dropbutton.component.css

Same filename in this branch
  1. 9 core/themes/bartik/css/components/dropbutton.component.css
Same filename in other branches
  1. 8.9.x core/themes/seven/css/components/dropbutton.component.css
  2. 8.9.x core/themes/bartik/css/components/dropbutton.component.css

Styling dropbuttons.

File

core/themes/seven/css/components/dropbutton.component.css

View source 
  1. /**

  2.  * @file

  3.  * Styling dropbuttons.

  4.  */

  5. 

  6. /**

  7.  * Reset styling for all elements.

  8.  */

  9. .js .dropbutton .dropbutton-action > input,

  10. .js .dropbutton .dropbutton-action > a,

  11. .js .dropbutton .dropbutton-action > button {

  12.   margin: 0;

  13.   padding: 0;

  14.   text-align: left; /* LTR */

  15.   text-decoration: none;

  16.   color: #333;

  17.   font-weight: 600;

  18.   line-height: normal;

  19.   -webkit-font-smoothing: antialiased;

  20. }

  21. [dir="rtl"].js .dropbutton .dropbutton-action > input,

  22. [dir="rtl"].js .dropbutton .dropbutton-action > a,

  23. [dir="rtl"].js .dropbutton .dropbutton-action > button {

  24.   margin-left: 0; /* This is required to win over specificity of [dir="rtl"] .dropbutton-multiple .dropbutton .dropbutton-action > * */

  25.   text-align: right;

  26. }

  27. .js .dropbutton-action.last {

  28.   border-radius: 0 0 0 1em; /* LTR */

  29. }

  30. [dir="rtl"] .js .dropbutton-action.last {

  31.   border-radius: 0 0 1em 0;

  32. }

  33. 

  34. /**

  35.  * Overwrite Sevens button styling.

  36.  */

  37. .js .dropbutton-widget .button {

  38.   border: 0;

  39.   border-radius: 0;

  40.   background: transparent;

  41.   box-shadow: none;

  42. }

  43. .js .dropbutton-multiple .dropbutton {

  44.   border-right: 0; /* LTR */

  45. }

  46. [dir="rtl"].js .dropbutton-multiple .dropbutton {

  47.   border-left: 0;

  48. }

  49. 

  50. /**

  51.  * Show dropbutton elements as buttons when javascript is disabled

  52.  */

  53. .dropbutton {

  54.   margin: 0;

  55.   padding: 0;

  56.   list-style-type: none;

  57. }

  58. .dropbutton li + li {

  59.   margin-top: 10px;

  60. }

  61. .js .dropbutton li {

  62.   margin-right: 0;

  63.   margin-bottom: 0;

  64. }

  65. .js .dropbutton li + li {

  66.   margin-top: 0;

  67. }

  68. 

  69. @media screen and (min-width: 37.5625em) { /* 601px */

  70.   .dropbutton li {

  71.     display: inline-block;

  72.   }

  73.   .dropbutton li + li {

  74.     margin-top: 0;

  75.     margin-left: 1em;

  76.   }

  77.   .js .dropbutton li + li {

  78.     margin-left: 0;

  79.   }

  80. }

  81. 

  82. /**

  83.  * Copied styling for .button.

  84.  */

  85. .js .dropbutton-multiple .dropbutton-widget {

  86.   border: 1px solid #a6a6a6;

  87.   border-radius: 20em;

  88.   background-color: #f2f1eb;

  89.   background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);

  90.   background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);

  91.   text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);

  92. }

  93. .dropbutton-multiple.open .dropbutton-widget {

  94.   border-radius: 1em;

  95. }

  96. .js .dropbutton-widget .dropbutton-action a,

  97. .js .dropbutton-widget .dropbutton-action input,

  98. .js .dropbutton-widget .dropbutton-action button {

  99.   display: block;

  100.   width: 100%;

  101.   padding: 4px 1.5em;

  102.   border-radius: 20em 0 0 20em; /* LTR */

  103. }

  104. [dir="rtl"].js .dropbutton-widget .dropbutton-action a,

  105. [dir="rtl"].js .dropbutton-widget .dropbutton-action input,

  106. [dir="rtl"].js .dropbutton-widget .dropbutton-action button {

  107.   border-radius: 0 20em 20em 0;

  108. }

  109. .js .dropbutton-widget .dropbutton-action a:focus,

  110. .js .dropbutton-widget .dropbutton-action input:focus,

  111. .js .dropbutton-widget .dropbutton-action button:focus {

  112.   text-decoration: underline;

  113. }

  114. .js .dropbutton-multiple.open .dropbutton-action a,

  115. .js .dropbutton-multiple.open .dropbutton-action .button {

  116.   border-radius: 0;

  117. }

  118. .js .dropbutton-multiple.open .dropbutton-action:first-child a,

  119. .js .dropbutton-multiple.open .dropbutton-action:first-child .button {

  120.   border-radius: 0.9em 0 0 0; /* LTR */

  121. }

  122. [dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:first-child a,

  123. [dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:first-child .button {

  124.   border-radius: 0 0.9em 0 0;

  125. }

  126. .js .dropbutton-multiple.open .dropbutton-action:last-child a,

  127. .js .dropbutton-multiple.open .dropbutton-action:last-child .button {

  128.   border-radius: 0 0 0 0.9em; /* LTR */

  129. }

  130. [dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:last-child a,

  131. [dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:last-child .button {

  132.   border-radius: 0 0 0.9em 0;

  133. }

  134. .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action a:hover,

  135. .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action button:hover,

  136. .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action input:hover,

  137. .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action a:focus,

  138. .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action button:focus,

  139. .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action input:focus {

  140.   z-index: 3;

  141.   color: #1a1a1a;

  142.   background-color: #f9f8f6;

  143.   background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);

  144.   background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);

  145.   box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);

  146. }

  147. .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action a:active,

  148. .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action input:active,

  149. .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action button:active {

  150.   text-decoration: none;

  151.   background-color: #dfdfd9;

  152.   background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);

  153.   background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);

  154.   box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);

  155. }

  156. .dropbutton .secondary-action {

  157.   border-top: 1px solid #bfbfba;

  158. }

  159. 

  160. /**

  161.  * Rare instances when a dropbutton is actually just a button.

  162.  * Copied from Seven's buttons.css.

  163.  */

  164. .dropbutton-single .dropbutton-widget {

  165.   position: static;

  166.   display: inline-block;

  167.   border: 0;

  168.   background: transparent;

  169. }

  170. .dropbutton-single .dropbutton-action a {

  171.   width: auto !important;

  172.   padding: 4px 1.5em;

  173.   -webkit-transition: all 0.1s;

  174.   transition: all 0.1s;

  175.   text-decoration: none;

  176.   color: #333;

  177.   border: 1px solid #a6a6a6;

  178.   border-radius: 20em !important;

  179.   background-color: #f2f1eb;

  180.   background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);

  181.   background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);

  182.   text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);

  183.   font-weight: 600;

  184.   -webkit-font-smoothing: antialiased;

  185. }

  186. .dropbutton-single .dropbutton-action a:hover,

  187. .dropbutton-single .dropbutton-action a:focus {

  188.   text-decoration: none;

  189.   color: #1a1a1a;

  190.   outline: none;

  191.   background-color: #f9f8f6;

  192.   background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);

  193.   background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);

  194. }

  195. .dropbutton-single .dropbutton-action a:hover,

  196. .dropbutton-single .dropbutton-action a:focus {

  197.   box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);

  198. }

  199. .dropbutton-single .dropbutton-action a:active {

  200.   -webkit-transition: none;

  201.   transition: none;

  202.   background-color: #dfdfd9;

  203.   background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);

  204.   background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);

  205.   box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);

  206. }

  207. .dropbutton .dropbutton-action .ajax-progress {

  208.   position: absolute;

  209.   z-index: 2;

  210.   top: 0.2em;

  211.   right: 0.2em;

  212.   padding: 0 0 0 0.1em;

  213. }

  214. .dropbutton-multiple .dropbutton-action .ajax-progress {

  215.   top: 0.15em;

  216.   right: 2.2em;

  217.   margin-right: 0;

  218. }

  219. .dropbutton-multiple .secondary-action .ajax-progress {

  220.   top: auto;

  221.   bottom: 0.3em;

  222. }

  223. 

  224. /**

  225.  * The dropdown trigger.

  226.  */

  227. .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {

  228.   border-left: 1px solid #a6a6a6; /* LTR */

  229.   outline: none;

  230. }

  231. [dir="rtl"].js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {

  232.   border-right: 1px solid #a6a6a6;

  233.   border-left: 0;

  234. }

  235. .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {

  236.   border-radius: 0 20em 20em 0; /* LTR */

  237. }

  238. [dir="rtl"].js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {

  239.   border-radius: 20em 0 0 20em;

  240. }

  241. .dropbutton-multiple.open .dropbutton-widget .dropbutton-toggle button {

  242.   border-radius: 0 1em 1em 0; /* LTR */

  243. }

  244. [dir="rtl"] .dropbutton-multiple.open .dropbutton-widget .dropbutton-toggle button {

  245.   border-radius: 1em 0 0 1em;

  246. }

  247. .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:hover,

  248. .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:focus {

  249.   z-index: 3;

  250.   text-decoration: none;

  251.   color: #1a1a1a;

  252.   background-color: #f9f8f6;

  253.   background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);

  254.   background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);

  255.   box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);

  256. }

  257. .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:active {

  258.   background-color: #dfdfd9;

  259.   background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);

  260.   background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);

  261.   box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);

  262. }

  263. .dropbutton-arrow {

  264.   top: 54%;

  265.   right: 35%; /* LTR */

  266.   border-top-color: #333;

  267. }

  268. [dir="rtl"] .dropbutton-arrow {

  269.   right: auto;

  270.   left: 35%;

  271. }

  272. .dropbutton-multiple.open .dropbutton-arrow {

  273.   top: 0.6667em;

  274.   border-top-color: transparent;

  275.   border-bottom: 0.3333em solid #333;

  276. }

  277. 

  278. /**

  279.  * Form edit action theming.

  280.  * Copied styling from .button--primary.

  281.  */

  282. .js .form-actions .dropbutton .dropbutton-action > * {

  283.   color: #fff;

  284.   text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);

  285.   font-weight: 700;

  286. }

  287. .js .form-actions .dropbutton-widget {

  288.   position: relative;

  289.   border-color: #1e5c90;

  290.   background-color: #0071b8;

  291.   background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);

  292.   background-image: linear-gradient(to bottom, #007bc6, #0071b8);

  293.   text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);

  294. }

  295. .form-actions .dropbutton-multiple.open .dropbutton-widget {

  296.   background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);

  297.   background-image: linear-gradient(to bottom, #007bc6, #0071b8);

  298. }

  299. .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-action .button:hover,

  300. .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-action .button:focus {

  301.   color: #fff;

  302.   background-color: #2369a6;

  303.   background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);

  304.   background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);

  305.   box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);

  306. }

  307. .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-action .button:active {

  308.   border-color: #144b78;

  309.   background-image: -webkit-linear-gradient(top, #08639b, #0071b8);

  310.   background-image: linear-gradient(to bottom, #08639b, #0071b8);

  311.   box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);

  312. }

  313. .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button,

  314. .form-actions .dropbutton .secondary-action {

  315.   border-color: #1e5c90;

  316. }

  317. .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {

  318.   background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);

  319.   background-image: linear-gradient(to bottom, #007bc6, #0071b8);

  320. }

  321. .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:hover,

  322. .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:focus {

  323.   background-color: #2369a6;

  324.   background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);

  325.   background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);

  326. }

  327. .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:active {

  328.   border-color: #144b78;

  329.   background-image: -webkit-linear-gradient(top, #08639b, #0071b8);

  330.   background-image: linear-gradient(to bottom, #08639b, #0071b8);

  331.   box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);

  332. }

  333. .form-actions .dropbutton-arrow {

  334.   border-top-color: #fff;

  335. }

  336. .form-actions .dropbutton-multiple.open .dropbutton-arrow {

  337.   border-bottom: 0.3333em solid white;

  338. }

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