gin-dropbutton.css

Same filename and directory in other branches
  1. 11.x core/themes/default_admin/migration/css/base/gin-dropbutton.css
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

.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: 7.5rem;
    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: 20rem;
      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: 0.75rem 0.75rem;
    }

    &: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.css

View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. 

  8. .dropbutton-widget,

  9. html.js .dropbutton-widget {

  10.   background-color: transparent;

  11. }

  12. 

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

  14. 

  15. html.js {

  16.   .dropbutton-wrapper.open {

  17.     .dropbutton-widget {

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

  19.     }

  20. 

  21.     .dropbutton {

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

  23.     }

  24.   }

  25. }

  26. 

  27. .dropbutton {

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

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

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

  31. 

  32.   .gin--dark-mode 
  33. 

  34.   &:hover {

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

  36.   }

  37. 

  38.   &:active,

  39.   &:focus {

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

  41.   }

  42. 

  43.   .dropbutton__items {

  44.     position: absolute;

  45.     min-width: 7.5rem;

  46.     margin: 0;

  47.     padding: 0.5em;

  48.     list-style: none;

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

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

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

  52.     inset-inline-end: 0;

  53. 

  54.     .node-form 
  55. 

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

  57.       border: 1px solid linktext;

  58.     }

  59.   }

  60. 

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

  62.     > a,

  63.     > input,

  64.     > .button {

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

  66.     }

  67.   }

  68. 

  69.   /* Drupal 10.2.x fix */

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

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

  72.   }

  73. 

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

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

  76.   .dropbutton__items > .dropbutton__item,

  77.   .dropbutton__items > .dropbutton__item ~ .dropbutton__item {

  78.     border: 0 none;

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

  80.     box-shadow: none;

  81. 

  82.     &:first-of-type {

  83.       margin-inline-end: 0;

  84.     }

  85. 

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

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

  88.       .js .dropbutton--multiple 
  89.     }

  90. 

  91.     > a,

  92.     > input,

  93.     > .button {

  94.       display: block;

  95.       overflow: hidden;

  96.       box-sizing: border-box;

  97.       width: 100%;

  98.       max-width: 20rem;

  99.       margin: 0;

  100.       text-align: start;

  101.       white-space: nowrap;

  102.       text-overflow: ellipsis;

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

  104.       border: 0 none !important;

  105.       border-radius: 0;

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

  107.       box-shadow: none;

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

  109. 

  110.       &:hover,

  111.       &:active,

  112.       &:focus {

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

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

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

  116. 

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

  118.           outline: 2px solid transparent;

  119.           outline-offset: -2px;

  120.         }

  121.       }

  122. 

  123.       &:focus {

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

  125.           outline-style: dotted;

  126.         }

  127.       }

  128.     }

  129.   }

  130. 

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

  132.     > a,

  133.     > input,

  134.     > .button {

  135.       &:hover,

  136.       &:active,

  137.       &:focus {

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

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

  140.       }

  141.     }

  142.   }

  143. 

  144.   .dropbutton__items > .dropbutton__item {

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

  146.   }

  147. 

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

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

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

  151.   }

  152. 

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

  154.   .dropbutton__items > .dropbutton__item,

  155.   > .dropbutton__items > .dropbutton__item ~ .dropbutton__item {

  156.     > a,

  157.     > input,

  158.     > .button {

  159.       padding: 0.75em 1em !important;

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

  161.     }

  162.   }

  163. }

  164. 

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

  166. 

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

  168.   height: 100%;

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

  170. 

  171.   input {

  172.     height: 100%;

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

  174.     border: 0 none !important;

  175.     border-radius: 0 !important;

  176.     background-color: transparent;

  177.   }

  178. }

  179. 

  180. .dropbutton-wrapper {

  181.   box-shadow: none;

  182. }

  183. 

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

  185. .dropbutton__toggle {

  186.   white-space: nowrap;

  187.   background: none;

  188. 

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

  190.     border-width: 0 !important;

  191.   }

  192. }

  193. 

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

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

  196. }

  197. 

  198. .dropbutton__toggle {

  199.   inset-block-start: 2px;

  200.   inset-inline-end: 2px;

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

  202.   height: 2.75rem;

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

  204. 

  205.   &:hover {

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

  207.   }

  208. 

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

  210.     &::before {

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

  212.       background-image: none;

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

  214.       mask-repeat: no-repeat;

  215.       mask-position: center center;

  216.       mask-size: 0.75rem 0.75rem;

  217.     }

  218. 

  219.     &:hover::before,

  220.     &:active::before,

  221.     &:focus::before {

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

  223.     }

  224.   }

  225. }

  226. 

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

  228.   max-width: unset;

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

  230. 

  231.   & > *:hover {

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

  233.   }

  234. }

  235. 

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

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

  238. }

  239. 

  240. html.js {

  241.   .dropbutton {

  242.     box-sizing: border-box;

  243.     height: 3rem;

  244.     min-height: 3rem;

  245.   }

  246. 

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

  248.     visibility: hidden;

  249.     opacity: 0;

  250.   }

  251. 

  252.   .dropbutton-wrapper .dropbutton__items {

  253.     visibility: visible;

  254.     overflow: auto;

  255.     max-height: 30vh;

  256.     opacity: 1;

  257.   }

  258. 

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

  260.     display: none;

  261.   }

  262. 

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

  264.     display: block;

  265.     height: auto;

  266.   }

  267. }

  268. 

  269. html.js.no-touchevents {

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

  271.     margin-inline-end: 0;

  272.   }

  273. 

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

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

  276.   }

  277. 

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

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

  280.   }

  281. 

  282.   .dropbutton--small {

  283.     min-width: 0;

  284.     height: 2.25rem;

  285.     min-height: 2.25rem;

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

  287. 

  288.     .dropbutton__toggle {

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

  290.     }

  291.   }

  292. 

  293.   .dropbutton--extrasmall {

  294.     min-width: 0;

  295.     height: 1.75rem;

  296.     min-height: 1.75rem;

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

  298. 

  299.     .dropbutton__toggle {

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

  301.     }

  302. 

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

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

  305.     }

  306.   }

  307. 

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

  309.     margin-inline-end: 0;

  310.   }

  311. }

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