dropbutton.base.css

Base styles for dropbuttons.

File

drupal/core/misc/dropbutton/dropbutton.base.css
View source
  1. 

  2. /**

  3.  * @file

  4.  * Base styles for dropbuttons.

  5.  */

  6. 

  7. /**

  8.  * When a dropbutton has only one option, it is simply a button.

  9.  */

  10. .dropbutton-wrapper,

  11. .dropbutton-wrapper div {

  12.   -moz-box-sizing: border-box;

  13.   -webkit-box-sizing: border-box;

  14.   box-sizing: border-box;

  15. }

  16. .js .dropbutton-wrapper {

  17.   display: block;

  18.   min-height: 2em;

  19.   position: relative;

  20. }

  21. .js .dropbutton-wrapper,

  22. .js .dropbutton-widget {

  23.   max-width: 100%;

  24. }

  25. .js .dropbutton-widget {

  26.   position: absolute;

  27. }

  28. /* UL styles are over-scoped in core, so this selector needs weight parity. */

  29. .js .dropbutton-widget .dropbutton {

  30.   list-style-image: none;

  31.   list-style-type: none;

  32.   margin: 0;

  33.   overflow: hidden;

  34.   padding: 0;

  35. }

  36. .js .dropbutton li,

  37. .js .dropbutton a {

  38.   display: block;

  39. }

  40. 

  41. /**

  42.  * The dropbutton styling.

  43.  *

  44.  * A dropbutton is a widget that displays a list of action links as a button

  45.  * with a primary action. Secondary actions are hidden behind a click on a

  46.  * twisty arrow.

  47.  *

  48.  * The arrow is created using border on a zero-width, zero-height span.

  49.  * The arrow inherits the link color, but can be overridden with border colors.

  50.  */

  51. .js .dropbutton-multiple .dropbutton-widget {

  52.   padding-right: 2em; /* LTR */

  53. }

  54. .dropbutton-multiple.open,

  55. .dropbutton-multiple.open .dropbutton-widget {

  56.   max-width: none;

  57. }

  58. .dropbutton-multiple.open {

  59.   z-index: 100;

  60. }

  61. .dropbutton-multiple .dropbutton .secondary-action {

  62.   display: none;

  63. }

  64. .dropbutton-multiple.open .dropbutton .secondary-action {

  65.   display: block;

  66. }

  67. .dropbutton-toggle {

  68.   bottom: 0;

  69.   display: block;

  70.   position: absolute;

  71.   right: 0; /* LTR */

  72.   text-indent: 110%;

  73.   top: 0;

  74.   white-space: nowrap;

  75.   width: 2em;

  76. }

  77. .dropbutton-toggle button {

  78.   background: none;

  79.   border: 0;

  80.   cursor: pointer;

  81.   display: block;

  82.   height: 100%;

  83.   margin: 0;

  84.   padding: 0;

  85.   width: 100%;

  86. }

  87. .dropbutton-arrow {

  88.   border-bottom-color: transparent;

  89.   border-left-color: transparent;

  90.   border-right-color: transparent;

  91.   border-style: solid;

  92.   border-width: 0.3333em 0.3333em 0;

  93.   display: block;

  94.   height: 0;

  95.   line-height: 0;

  96.   position: absolute;

  97.   right: 40%; /* 0.6667em; */ /* LTR */

  98.   top: 50%;

  99.   margin-top: -0.1666em;

  100.   width: 0;

  101.   overflow: hidden;

  102. }

  103. .dropbutton-multiple.open .dropbutton-arrow {

  104.   border-bottom: 0.3333em solid;

  105.   border-top-color: transparent;

  106.   top: 0.6667em;

  107. }