buttons.css

Same filename in this branch
  1. 9 core/profiles/demo_umami/themes/umami/css/components/forms/buttons.css
  2. 9 core/themes/bartik/css/components/buttons.css
Same filename in other branches
  1. 8.9.x core/profiles/demo_umami/themes/umami/css/components/forms/buttons.css
  2. 8.9.x core/themes/seven/css/components/buttons.css
  3. 8.9.x core/themes/bartik/css/components/buttons.css
  4. 10 core/profiles/demo_umami/themes/umami/css/components/forms/buttons.css
  5. 11.x core/profiles/demo_umami/themes/umami/css/components/forms/buttons.css

Structural styles for Seven’s UI buttons

Apply these classes to any element (<link>, <button>, <input>, etc.) that should appear as a button.

File

core/themes/seven/css/components/buttons.css

View source
  1. /**
  2. * @file
  3. * Structural styles for Seven’s UI buttons
  4. *
  5. * Apply these classes to any element (, , , etc.) that
  6. * should appear as a button.
  7. */
  8. /**
  9. * Buttons.
  10. *
  11. * 1. Enable z-index on buttons.
  12. * 2. Normalize 'line-height'; can’t be changed from 'normal' in Firefox 4+.
  13. * 3. Allows full range of styling in Webkit and Gecko.
  14. * 4. Use px units to ensure button text is centered vertically.
  15. * 5. Use rems to avoid the font size cascade of ems, with a px fallback for
  16. * older browsers.
  17. * 6. Prevent fat text in WebKit.
  18. *
  19. * @todo Consider moving box-sizing into base.css under a universal selector.
  20. * See https://www.drupal.org/node/2124251
  21. *
  22. */
  23. .button {
  24. position: relative; /* 1 */
  25. display: inline-block;
  26. box-sizing: border-box;
  27. padding: 4px 1.5em; /* 4 */
  28. cursor: pointer;
  29. -webkit-transition: all 0.1s;
  30. transition: all 0.1s;
  31. text-align: center;
  32. text-decoration: none;
  33. color: #333;
  34. border: 1px solid #a6a6a6;
  35. border-radius: 20em;
  36. background-color: #f2f1eb;
  37. background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
  38. background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
  39. text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
  40. font-size: 14px;
  41. font-size: 0.875rem; /* 5 */
  42. font-weight: 600;
  43. line-height: normal; /* 2 */
  44. -webkit-appearance: none; /* 3 */
  45. -moz-appearance: none; /* 3 */
  46. -webkit-font-smoothing: antialiased; /* 6 */
  47. }
  48. .button:hover,
  49. .button:focus {
  50. text-decoration: none;
  51. color: #1a1a1a;
  52. outline: none;
  53. background-color: #f9f8f6;
  54. background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
  55. background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
  56. }
  57. .button:hover {
  58. box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
  59. }
  60. /* Prevent focus ring being covered by next siblings. */
  61. .button:focus {
  62. z-index: 10;
  63. border: 1px solid #3ab2ff;
  64. box-shadow: 0 0 0.5em 0.1em hsla(203, 100%, 60%, 0.7);
  65. }
  66. .button:active {
  67. -webkit-transition: none;
  68. transition: none;
  69. border: 1px solid #a6a6a6;
  70. background-color: #dfdfd9;
  71. background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
  72. background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
  73. box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
  74. }
  75. .button--primary {
  76. color: #fff;
  77. border-color: #1e5c90;
  78. background-color: #0071b8;
  79. background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
  80. background-image: linear-gradient(to bottom, #007bc6, #0071b8);
  81. text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
  82. font-weight: 700;
  83. -webkit-font-smoothing: antialiased;
  84. }
  85. .button--primary:hover,
  86. .button--primary:focus {
  87. color: #fff;
  88. border-color: #1e5c90;
  89. background-color: #2369a6;
  90. background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
  91. background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
  92. }
  93. .button--primary:focus {
  94. border: 1px solid #1280df;
  95. }
  96. .button--primary:hover {
  97. box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
  98. }
  99. .button--primary:active {
  100. border-color: #144b78;
  101. background-image: -webkit-linear-gradient(top, #08639b, #0071b8);
  102. background-image: linear-gradient(to bottom, #08639b, #0071b8);
  103. box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
  104. }
  105. /**
  106. * Overrides styling from system.theme.
  107. */
  108. .button-action:before {
  109. margin-left: -0.2em; /* LTR */
  110. padding-right: 0.2em; /* LTR */
  111. font-size: 14px;
  112. font-size: 0.875rem;
  113. line-height: 16px;
  114. -webkit-font-smoothing: auto;
  115. }
  116. [dir="rtl"] .button-action:before {
  117. margin-right: -0.2em;
  118. margin-left: 0;
  119. padding-right: 0;
  120. padding-left: 0.2em;
  121. }
  122. /**
  123. * 1. Use px units to ensure button text is centered vertically.
  124. */
  125. .no-touchevents .button--small {
  126. padding: 2px 1em; /* 1 */
  127. font-size: 13px;
  128. font-size: 0.813rem;
  129. }
  130. .button:disabled,
  131. .button:disabled:active,
  132. .button.is-disabled,
  133. .button.is-disabled:active {
  134. cursor: default;
  135. color: #5c5c5c;
  136. border-color: #d4d4d4;
  137. background: #ededed;
  138. box-shadow: none;
  139. text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
  140. font-weight: normal;
  141. }
  142. /* Link actions. */
  143. /**
  144. * Style a clickable/tappable element as a link. Duplicates the base style for
  145. * the tag, plus a reset for padding, borders and background.
  146. */
  147. .link {
  148. display: inline;
  149. padding: 0;
  150. cursor: pointer;
  151. text-decoration: none;
  152. color: #0074bd;
  153. border: 0;
  154. background: none;
  155. -webkit-appearance: none;
  156. -moz-appearance: none;
  157. }
  158. .link:hover,
  159. .link:focus {
  160. text-decoration: underline;
  161. color: #008ee6;
  162. }
  163. /**
  164. * We've temporarily added the danger button here, bit of a harsh reset but we
  165. * need it.
  166. * @todo replace with link--danger.
  167. * See https://www.drupal.org/node/2123731
  168. */
  169. .button--danger {
  170. display: inline;
  171. padding: 0;
  172. cursor: pointer;
  173. text-decoration: underline;
  174. color: #c72100;
  175. border: 0;
  176. border-radius: 0;
  177. background: none;
  178. box-shadow: none;
  179. font-weight: 400;
  180. -webkit-appearance: none;
  181. -moz-appearance: none;
  182. }
  183. .button--danger:hover,
  184. .button--danger:focus,
  185. .button--danger:active {
  186. padding: 0;
  187. text-decoration: underline;
  188. color: #ff2a00;
  189. border: 0;
  190. background: none;
  191. box-shadow: none;
  192. text-shadow: none;
  193. }
  194. .button--danger:disabled,
  195. .button--danger.is-disabled {
  196. padding: 0;
  197. cursor: default;
  198. text-decoration: none;
  199. color: #737373;
  200. border: 0;
  201. background: none;
  202. box-shadow: none;
  203. -webkit-font-smoothing: antialiased;
  204. }