gin-dropbutton.pcss.css

Same filename and directory in other branches
  1. main core/themes/default_admin/migration/css/base/gin-dropbutton.pcss.css
.dropbutton-widget,
html.js .dropbutton-widget {
  background-color: transparent;
}

/* Overlay the dropdown button on top of the sticky header and main toolbar */
html.js {
  .dropbutton-wrapper.open {
    .dropbutton-widget {
      z-index: 502; /* Above toolbar and sticky header */
    }

    .dropbutton {
      background: var(--gin-bg-layer3);
    }
  }
}

.dropbutton {
  border: 2px solid var(--gin-color-primary);
  border-radius: var(--gin-border-m);
  box-shadow: 0 1px 2px var(--gin-color-primary-light);

  .gin--dark-mode & {
    box-shadow: 0 4px 18px var(--gin-shadow-button);
  }

  &:hover {
    border-color: var(--gin-color-primary);
  }

  &:active,
  &:focus {
    border-color: var(--gin-color-primary-active);
  }

  .dropbutton__items {
    position: absolute;
    min-width: 120px;
    margin: 0;
    padding: 0.5em;
    list-style: none;
    border-radius: var(--gin-border-l);
    background: var(--gin-bg-layer3);
    box-shadow: var(--gin-shadow-l2);
    inset-inline-end: 0;

    .node-form & {
      inset-inline-start: 0;
      inset-inline-end: auto;
    }

    @media (forced-colors: active) {
      border: 1px solid linktext;
    }
  }

  > .dropbutton__items > .dropbutton__item:first-of-type {
    > a,
    > input,
    > .button {
      border-radius: var(--gin-border-s) var(--gin-border-s) 0 0;
    }
  }

  /* Drupal 10.2.x fix */
  &.dropbutton--gin .dropbutton-action > .button {
    border: var(--dropbutton-border-size) solid transparent !important;
  }

  /* The ugly part: make it work for all different dropbutton versions out there */
  &:not(.dropbutton--gin) > .dropbutton__item ~ .dropbutton__item,
  .dropbutton__items > .dropbutton__item,
  .dropbutton__items > .dropbutton__item ~ .dropbutton__item {
    border: 0 none;
    background-color: var(--gin-bg-app);
    box-shadow: none;

    &:first-of-type {
      margin-inline-end: 0;
    }

    /* Multiple Dropbutton only has one item */
    &:first-of-type:last-of-type > * {
      .js .dropbutton--multiple & {
        border-radius: var(--gin-border-s);
      }
    }

    > a,
    > input,
    > .button {
      display: block;
      overflow: hidden;
      box-sizing: border-box;
      width: 100%;
      max-width: 320px;
      margin: 0;
      text-align: start;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: var(--gin-color-primary);
      border: 0 none !important;
      border-radius: 0;
      background: var(--gin-bg-layer3);
      box-shadow: none;
      font-weight: var(--gin-font-weight-heavy);

      &:hover,
      &:active,
      &:focus {
        color: var(--gin-color-button-text);
        border-radius: var(--gin-border-s);
        background: var(--gin-color-primary);

        @media (forced-colors: active) {
          outline: 2px solid transparent;
          outline-offset: -2px;
        }
      }

      &:focus {
        @media (forced-colors: active) {
          outline-style: dotted;
        }
      }
    }
  }

  & > .dropbutton__item:first-of-type {
    > a,
    > input,
    > .button {
      &:hover,
      &:active,
      &:focus {
        color: var(--gin-color-button-text);
        background: var(--gin-color-primary);
      }
    }
  }

  .dropbutton__items > .dropbutton__item {
    border-radius: var(--gin-border-s);
  }

  /* Shadow for pseudo dropdown on views page */
  &:not(.dropbutton--gin) > .dropbutton__item.secondary-action {
    box-shadow: var(--gin-shadow-l2);
  }

  &:not(.dropbutton--gin) > .dropbutton__item:not(:first-of-type),
  .dropbutton__items > .dropbutton__item,
  > .dropbutton__items > .dropbutton__item ~ .dropbutton__item {
    > a,
    > input,
    > .button {
      padding: 0.75em 1em !important;
      font-size: var(--gin-font-size-s) !important;
    }
  }
}

/* Offset for select button on first item */
.dropbutton--multiple > .dropbutton__item:first-of-type {
  height: 100%;
  border-inline-end: 1px solid var(--gin-color-primary-light-active);

  input {
    height: 100%;
    color: var(--gin-color-primary);
    border: 0 none !important;
    border-radius: 0 !important;
    background-color: transparent;
  }
}

.dropbutton-wrapper {
  box-shadow: none;
}

.dropbutton__item:first-of-type > *,
.dropbutton__toggle {
  white-space: nowrap;
  background: none;

  @media (forced-colors: active) {
    border-width: 0 !important;
  }
}

.dropbutton__item:first-of-type > * {
  padding: calc(0.875rem - 1px) calc(var(--gin-spacing-l) - 1px);
}

.dropbutton__toggle {
  inset-block-start: 2px;
  inset-inline-end: 2px;
  width: calc(var(--gin-spacing-xxl) + 1px);
  height: 2.75rem;
  border-inline-start: var(--dropbutton-border-size, 1px) solid var(--gin-color-primary) !important;

  &:hover {
    background-color: var(--gin-color-primary);
  }

  @media not (forced-colors: active) {
    &::before {
      background-color: var(--gin-color-primary);
      background-image: none;
      mask-image: var(--admin-icon-drop);
      mask-repeat: no-repeat;
      mask-position: center center;
      mask-size: 12px 12px;
    }

    &:hover::before,
    &:active::before,
    &:focus::before {
      background-color: var(--gin-color-button-text);
    }
  }
}

.dropbutton__item:first-of-type ~ .dropbutton__item {
  max-width: unset;
  border-color: var(--gin-color-primary);

  & > *:hover {
    background-color: var(--gin-bg-layer3);
  }
}

.dropbutton__item:first-of-type ~ .dropbutton__item__item ~ .dropbutton__item:last-child {
  border-color: var(--gin-color-primary);
}

html.js {
  .dropbutton {
    box-sizing: border-box;
    height: 3rem;
    min-height: 3rem;
  }

  .dropbutton-wrapper:not(.open) .dropbutton__items {
    visibility: hidden;
    opacity: 0;
  }

  .dropbutton-wrapper .dropbutton__items {
    visibility: visible;
    overflow: auto;
    max-height: 30vh;
    opacity: 1;
  }

  .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__items {
    display: none;
  }

  .dropbutton-wrapper:not(.open) .dropbutton__items .dropbutton__item:first-of-type ~ .dropbutton__item {
    display: block;
    height: auto;
  }
}

html.js.no-touchevents {
  .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
    margin-inline-end: 0;
  }

  .dropbutton--multiple.dropbutton--small > .dropbutton__item:first-of-type {
    margin-inline-end: var(--gin-spacing-xl);
  }

  .dropbutton--multiple.dropbutton--extrasmall > .dropbutton__item:first-of-type {
    margin-inline-end: var(--gin-spacing-l);
  }

  .dropbutton--small {
    min-width: 0;
    height: 2.25rem;
    min-height: 2.25rem;
    border-radius: var(--gin-border-s);

    .dropbutton__toggle {
      width: calc(var(--dropbutton-small-toggle-size, 2rem) + 1px);
    }
  }

  .dropbutton--extrasmall {
    min-width: 0;
    height: 1.75rem;
    min-height: 1.75rem;
    border-radius: var(--gin-border-s);

    .dropbutton__toggle {
      width: calc(var(--dropbutton-extrasmall-toggle-size, 1.5rem) + 1px);
    }

    .dropbutton__item:first-of-type > * {
      padding-inline: var(--gin-spacing-s);
    }
  }

  .dropbutton--multiple.dropbutton--extrasmall .dropbutton__items .dropbutton__item {
    margin-inline-end: 0;
  }
}

File

View on git.drupalcode.org

core/themes/default_admin/migration/css/base/gin-dropbutton.pcss.css

View source 
  1. .dropbutton-widget,

  2. html.js .dropbutton-widget {

  3.   background-color: transparent;

  4. }

  5. 

  6. /* Overlay the dropdown button on top of the sticky header and main toolbar */

  7. html.js {

  8.   .dropbutton-wrapper.open {

  9.     .dropbutton-widget {

  10.       z-index: 502; /* Above toolbar and sticky header */

  11.     }

  12. 

  13.     .dropbutton {

  14.       background: var(--gin-bg-layer3);

  15.     }

  16.   }

  17. }

  18. 

  19. .dropbutton {

  20.   border: 2px solid var(--gin-color-primary);

  21.   border-radius: var(--gin-border-m);

  22.   box-shadow: 0 1px 2px var(--gin-color-primary-light);

  23. 

  24.   .gin--dark-mode 
  25. 

  26.   &:hover {

  27.     border-color: var(--gin-color-primary);

  28.   }

  29. 

  30.   &:active,

  31.   &:focus {

  32.     border-color: var(--gin-color-primary-active);

  33.   }

  34. 

  35.   .dropbutton__items {

  36.     position: absolute;

  37.     min-width: 120px;

  38.     margin: 0;

  39.     padding: 0.5em;

  40.     list-style: none;

  41.     border-radius: var(--gin-border-l);

  42.     background: var(--gin-bg-layer3);

  43.     box-shadow: var(--gin-shadow-l2);

  44.     inset-inline-end: 0;

  45. 

  46.     .node-form 
  47. 

  48.     @media (forced-colors: active) {

  49.       border: 1px solid linktext;

  50.     }

  51.   }

  52. 

  53.   > .dropbutton__items > .dropbutton__item:first-of-type {

  54.     > a,

  55.     > input,

  56.     > .button {

  57.       border-radius: var(--gin-border-s) var(--gin-border-s) 0 0;

  58.     }

  59.   }

  60. 

  61.   /* Drupal 10.2.x fix */

  62.   &.dropbutton--gin .dropbutton-action > .button {

  63.     border: var(--dropbutton-border-size) solid transparent !important;

  64.   }

  65. 

  66.   /* The ugly part: make it work for all different dropbutton versions out there */

  67.   &:not(.dropbutton--gin) > .dropbutton__item ~ .dropbutton__item,

  68.   .dropbutton__items > .dropbutton__item,

  69.   .dropbutton__items > .dropbutton__item ~ .dropbutton__item {

  70.     border: 0 none;

  71.     background-color: var(--gin-bg-app);

  72.     box-shadow: none;

  73. 

  74.     &:first-of-type {

  75.       margin-inline-end: 0;

  76.     }

  77. 

  78.     /* Multiple Dropbutton only has one item */

  79.     &:first-of-type:last-of-type > * {

  80.       .js .dropbutton--multiple 
  81.     }

  82. 

  83.     > a,

  84.     > input,

  85.     > .button {

  86.       display: block;

  87.       overflow: hidden;

  88.       box-sizing: border-box;

  89.       width: 100%;

  90.       max-width: 320px;

  91.       margin: 0;

  92.       text-align: start;

  93.       white-space: nowrap;

  94.       text-overflow: ellipsis;

  95.       color: var(--gin-color-primary);

  96.       border: 0 none !important;

  97.       border-radius: 0;

  98.       background: var(--gin-bg-layer3);

  99.       box-shadow: none;

  100.       font-weight: var(--gin-font-weight-heavy);

  101. 

  102.       &:hover,

  103.       &:active,

  104.       &:focus {

  105.         color: var(--gin-color-button-text);

  106.         border-radius: var(--gin-border-s);

  107.         background: var(--gin-color-primary);

  108. 

  109.         @media (forced-colors: active) {

  110.           outline: 2px solid transparent;

  111.           outline-offset: -2px;

  112.         }

  113.       }

  114. 

  115.       &:focus {

  116.         @media (forced-colors: active) {

  117.           outline-style: dotted;

  118.         }

  119.       }

  120.     }

  121.   }

  122. 

  123.   & > .dropbutton__item:first-of-type {

  124.     > a,

  125.     > input,

  126.     > .button {

  127.       &:hover,

  128.       &:active,

  129.       &:focus {

  130.         color: var(--gin-color-button-text);

  131.         background: var(--gin-color-primary);

  132.       }

  133.     }

  134.   }

  135. 

  136.   .dropbutton__items > .dropbutton__item {

  137.     border-radius: var(--gin-border-s);

  138.   }

  139. 

  140.   /* Shadow for pseudo dropdown on views page */

  141.   &:not(.dropbutton--gin) > .dropbutton__item.secondary-action {

  142.     box-shadow: var(--gin-shadow-l2);

  143.   }

  144. 

  145.   &:not(.dropbutton--gin) > .dropbutton__item:not(:first-of-type),

  146.   .dropbutton__items > .dropbutton__item,

  147.   > .dropbutton__items > .dropbutton__item ~ .dropbutton__item {

  148.     > a,

  149.     > input,

  150.     > .button {

  151.       padding: 0.75em 1em !important;

  152.       font-size: var(--gin-font-size-s) !important;

  153.     }

  154.   }

  155. }

  156. 

  157. /* Offset for select button on first item */

  158. .dropbutton--multiple > .dropbutton__item:first-of-type {

  159.   height: 100%;

  160.   border-inline-end: 1px solid var(--gin-color-primary-light-active);

  161. 

  162.   input {

  163.     height: 100%;

  164.     color: var(--gin-color-primary);

  165.     border: 0 none !important;

  166.     border-radius: 0 !important;

  167.     background-color: transparent;

  168.   }

  169. }

  170. 

  171. .dropbutton-wrapper {

  172.   box-shadow: none;

  173. }

  174. 

  175. .dropbutton__item:first-of-type > *,

  176. .dropbutton__toggle {

  177.   white-space: nowrap;

  178.   background: none;

  179. 

  180.   @media (forced-colors: active) {

  181.     border-width: 0 !important;

  182.   }

  183. }

  184. 

  185. .dropbutton__item:first-of-type > * {

  186.   padding: calc(0.875rem - 1px) calc(var(--gin-spacing-l) - 1px);

  187. }

  188. 

  189. .dropbutton__toggle {

  190.   inset-block-start: 2px;

  191.   inset-inline-end: 2px;

  192.   width: calc(var(--gin-spacing-xxl) + 1px);

  193.   height: 2.75rem;

  194.   border-inline-start: var(--dropbutton-border-size, 1px) solid var(--gin-color-primary) !important;

  195. 

  196.   &:hover {

  197.     background-color: var(--gin-color-primary);

  198.   }

  199. 

  200.   @media not (forced-colors: active) {

  201.     &::before {

  202.       background-color: var(--gin-color-primary);

  203.       background-image: none;

  204.       mask-image: var(--admin-icon-drop);

  205.       mask-repeat: no-repeat;

  206.       mask-position: center center;

  207.       mask-size: 12px 12px;

  208.     }

  209. 

  210.     &:hover::before,

  211.     &:active::before,

  212.     &:focus::before {

  213.       background-color: var(--gin-color-button-text);

  214.     }

  215.   }

  216. }

  217. 

  218. .dropbutton__item:first-of-type ~ .dropbutton__item {

  219.   max-width: unset;

  220.   border-color: var(--gin-color-primary);

  221. 

  222.   & > *:hover {

  223.     background-color: var(--gin-bg-layer3);

  224.   }

  225. }

  226. 

  227. .dropbutton__item:first-of-type ~ .dropbutton__item__item ~ .dropbutton__item:last-child {

  228.   border-color: var(--gin-color-primary);

  229. }

  230. 

  231. html.js {

  232.   .dropbutton {

  233.     box-sizing: border-box;

  234.     height: 3rem;

  235.     min-height: 3rem;

  236.   }

  237. 

  238.   .dropbutton-wrapper:not(.open) .dropbutton__items {

  239.     visibility: hidden;

  240.     opacity: 0;

  241.   }

  242. 

  243.   .dropbutton-wrapper .dropbutton__items {

  244.     visibility: visible;

  245.     overflow: auto;

  246.     max-height: 30vh;

  247.     opacity: 1;

  248.   }

  249. 

  250.   .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__items {

  251.     display: none;

  252.   }

  253. 

  254.   .dropbutton-wrapper:not(.open) .dropbutton__items .dropbutton__item:first-of-type ~ .dropbutton__item {

  255.     display: block;

  256.     height: auto;

  257.   }

  258. }

  259. 

  260. html.js.no-touchevents {

  261.   .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {

  262.     margin-inline-end: 0;

  263.   }

  264. 

  265.   .dropbutton--multiple.dropbutton--small > .dropbutton__item:first-of-type {

  266.     margin-inline-end: var(--gin-spacing-xl);

  267.   }

  268. 

  269.   .dropbutton--multiple.dropbutton--extrasmall > .dropbutton__item:first-of-type {

  270.     margin-inline-end: var(--gin-spacing-l);

  271.   }

  272. 

  273.   .dropbutton--small {

  274.     min-width: 0;

  275.     height: 2.25rem;

  276.     min-height: 2.25rem;

  277.     border-radius: var(--gin-border-s);

  278. 

  279.     .dropbutton__toggle {

  280.       width: calc(var(--dropbutton-small-toggle-size, 2rem) + 1px);

  281.     }

  282.   }

  283. 

  284.   .dropbutton--extrasmall {

  285.     min-width: 0;

  286.     height: 1.75rem;

  287.     min-height: 1.75rem;

  288.     border-radius: var(--gin-border-s);

  289. 

  290.     .dropbutton__toggle {

  291.       width: calc(var(--dropbutton-extrasmall-toggle-size, 1.5rem) + 1px);

  292.     }

  293. 

  294.     .dropbutton__item:first-of-type > * {

  295.       padding-inline: var(--gin-spacing-s);

  296.     }

  297.   }

  298. 

  299.   .dropbutton--multiple.dropbutton--extrasmall .dropbutton__items .dropbutton__item {

  300.     margin-inline-end: 0;

  301.   }

  302. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.