dropbutton.css 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. /**
  2. * @file
  3. * Base styles for dropbuttons.
  4. */
  5. /**
  6. * When a dropbutton has only one option, it is simply a button.
  7. */
  8. .dropbutton-wrapper,
  9. .dropbutton-wrapper div {
  10. box-sizing: border-box;
  11. }
  12. .js .dropbutton-wrapper,
  13. .js .dropbutton-widget {
  14. display: block;
  15. position: relative;
  16. }
  17. @media screen and (max-width:600px) {
  18. .js .dropbutton-wrapper {
  19. width: 100%;
  20. }
  21. }
  22. /* Splitbuttons */
  23. @media screen and (min-width:600px) {
  24. .form-actions .dropbutton-wrapper {
  25. float: left; /* LTR */
  26. }
  27. [dir="rtl"] .form-actions .dropbutton-wrapper {
  28. float: right;
  29. }
  30. }
  31. .js .form-actions .dropbutton-widget {
  32. position: static;
  33. }
  34. .js td .dropbutton-widget {
  35. position: absolute;
  36. }
  37. .js td .dropbutton-wrapper {
  38. min-height: 2em;
  39. }
  40. .js td .dropbutton-multiple {
  41. padding-right: 10em; /* LTR */
  42. margin-right: 2em; /* LTR */
  43. max-width: 100%;
  44. }
  45. [dir="rtl"].js td .dropbutton-multiple {
  46. padding-right: 0;
  47. margin-right: 0;
  48. padding-left: 10em;
  49. margin-left: 2em;
  50. }
  51. .js td .dropbutton-multiple .dropbutton-action a,
  52. .js td .dropbutton-multiple .dropbutton-action input,
  53. .js td .dropbutton-multiple .dropbutton-action button {
  54. width: auto;
  55. }
  56. /* UL styles are over-scoped in core, so this selector needs weight parity. */
  57. .js .dropbutton-widget .dropbutton {
  58. list-style-image: none;
  59. list-style-type: none;
  60. margin: 0;
  61. overflow: hidden;
  62. padding: 0;
  63. }
  64. .js .dropbutton li,
  65. .js .dropbutton a {
  66. display: block;
  67. outline: none;
  68. }
  69. .js .dropbutton li:hover,
  70. .js .dropbutton li:focus,
  71. .js .dropbutton a:hover,
  72. .js .dropbutton a:focus {
  73. outline: initial;
  74. }
  75. /**
  76. * The dropbutton styling.
  77. *
  78. * A dropbutton is a widget that displays a list of action links as a button
  79. * with a primary action. Secondary actions are hidden behind a click on a
  80. * twisty arrow.
  81. *
  82. * The arrow is created using border on a zero-width, zero-height span.
  83. * The arrow inherits the link color, but can be overridden with border colors.
  84. */
  85. .js .dropbutton-multiple .dropbutton-widget {
  86. padding-right: 2em; /* LTR */
  87. }
  88. .js[dir="rtl"] .dropbutton-multiple .dropbutton-widget {
  89. padding-left: 2em;
  90. padding-right: 0;
  91. }
  92. .dropbutton-multiple.open,
  93. .dropbutton-multiple.open .dropbutton-widget {
  94. max-width: none;
  95. }
  96. .dropbutton-multiple.open {
  97. z-index: 100;
  98. }
  99. .dropbutton-multiple .dropbutton .secondary-action {
  100. display: none;
  101. }
  102. .dropbutton-multiple.open .dropbutton .secondary-action {
  103. display: block;
  104. }
  105. .dropbutton-toggle {
  106. bottom: 0;
  107. display: block;
  108. position: absolute;
  109. right: 0; /* LTR */
  110. text-indent: 110%;
  111. top: 0;
  112. white-space: nowrap;
  113. width: 2em;
  114. }
  115. [dir="rtl"] .dropbutton-toggle {
  116. left: 0;
  117. right: auto;
  118. }
  119. .dropbutton-toggle button {
  120. background: none;
  121. border: 0;
  122. cursor: pointer;
  123. display: block;
  124. height: 100%;
  125. margin: 0;
  126. padding: 0;
  127. width: 100%;
  128. }
  129. .dropbutton-toggle button:hover,
  130. .dropbutton-toggle button:focus {
  131. outline: initial;
  132. }
  133. .dropbutton-arrow {
  134. border-bottom-color: transparent;
  135. border-left-color: transparent;
  136. border-right-color: transparent;
  137. border-style: solid;
  138. border-width: 0.3333em 0.3333em 0;
  139. display: block;
  140. height: 0;
  141. line-height: 0;
  142. position: absolute;
  143. right: 40%; /* 0.6667em; */ /* LTR */
  144. top: 50%;
  145. margin-top: -0.1666em;
  146. width: 0;
  147. overflow: hidden;
  148. }
  149. [dir="rtl"] .dropbutton-arrow {
  150. left: 0.6667em;
  151. right: auto;
  152. }
  153. .dropbutton-multiple.open .dropbutton-arrow {
  154. border-bottom: 0.3333em solid;
  155. border-top-color: transparent;
  156. top: 0.6667em;
  157. }