button.pcss.css

Same filename in this branch
  1. 9 core/themes/olivero/css/components/button.pcss.css
Same filename in other branches
  1. 8.9.x core/themes/claro/css/components/button.pcss.css
  2. 10 core/misc/dialog/off-canvas/css/button.pcss.css
  3. 10 core/themes/olivero/css/components/button.pcss.css
  4. 10 core/themes/claro/css/components/button.pcss.css
  5. 11.x core/misc/dialog/off-canvas/css/button.pcss.css
  6. 11.x core/themes/olivero/css/components/button.pcss.css
  7. 11.x core/themes/claro/css/components/button.pcss.css

Structural styles for Claro's UI buttons

Apply these classes to button elements (<button>, <input type="button" />).

File

core/themes/claro/css/components/button.pcss.css

View source
  1. /**
  2. * @file
  3. * Structural styles for Claro's UI buttons
  4. *
  5. * Apply these classes to button elements (, ).
  6. */
  7. @import "../base/variables.pcss.css";
  8. /**
  9. * Buttons.
  10. *
  11. * 1. Padding widths detracted by width of the transparent borders to make
  12. * button size match with design system.
  13. * 2. Transparent border is needed for high contrast mode. This has to be set to
  14. * !important to render Firefox borders with consistent width in high
  15. * contrast mode.
  16. * 3. Prevent fat text in WebKit.
  17. *
  18. * @todo Consider moving box-sizing into base.css under a universal selector.
  19. * See https://www.drupal.org/node/2124251
  20. */
  21. /**
  22. * Base button styles.
  23. *
  24. * These styles have been duplicated to dropbutton.css and action-links.css
  25. * since those components inherits most of these design elements. Whenever
  26. * making changes to this file, remember to check if that needs to be applied to
  27. * dropbutton.css or action-links.css as well.
  28. */
  29. .button {
  30. display: inline-block;
  31. margin: var(--space-m) var(--space-s) var(--space-m) 0; /* LTR */
  32. padding: calc(var(--space-m) - 1px) calc(var(--space-l) - 1px); /* 1 */
  33. cursor: pointer;
  34. text-align: center;
  35. text-decoration: none;
  36. color: var(--button-fg-color);
  37. border: 1px solid transparent !important; /* 2 */
  38. border-radius: var(--button-border-radius-size);
  39. background-color: var(--button-bg-color);
  40. font-size: var(--font-size-base);
  41. font-weight: 700;
  42. line-height: 1rem;
  43. appearance: none;
  44. -webkit-font-smoothing: antialiased; /* 3 */
  45. }
  46. [dir="rtl"] .button {
  47. margin: var(--space-m) 0 var(--space-m) var(--space-s);
  48. }
  49. .button:not(:focus) {
  50. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  51. }
  52. .button:hover {
  53. text-decoration: none;
  54. background-color: var(--button--hover-bg-color);
  55. }
  56. .button:focus {
  57. text-decoration: none;
  58. }
  59. .button:active {
  60. background-color: var(--button--active-bg-color);
  61. }
  62. /* Common styles for small buttons */
  63. .no-touchevents .button--small {
  64. margin: var(--space-s) var(--space-xs) var(--space-s) 0; /* LTR */
  65. padding: calc(var(--space-xs) - 1px) calc(var(--space-m) - 1px); /* 1 */
  66. font-size: var(--font-size-xs);
  67. }
  68. /* Common styles for extra small buttons */
  69. .no-touchevents .button--extrasmall {
  70. margin: var(--space-xs) var(--space-xs) var(--space-xs) 0; /* LTR */
  71. padding: calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) - 1px); /* 1 */
  72. font-size: var(--font-size-xs);
  73. }
  74. [dir="rtl"].no-touchevents .button--small,
  75. [dir="rtl"].no-touchevents .button--extrasmall {
  76. margin-right: 0;
  77. margin-left: var(--space-xs);
  78. }
  79. /* Styles for action link buttons */
  80. .button--action {
  81. margin: 0;
  82. }
  83. .button--action::before {
  84. margin-left: -0.25em; /* LTR */
  85. padding-right: 0.25em; /* LTR */
  86. content: "+";
  87. font-weight: 900;
  88. }
  89. [dir="rtl"] .button--action::before {
  90. margin-right: -0.25em;
  91. margin-left: 0;
  92. padding-right: 0;
  93. padding-left: 0.25em;
  94. }
  95. a.button:hover,
  96. a.button:active {
  97. color: var(--button-fg-color);
  98. }
  99. /* Primary button styles */
  100. .button--primary {
  101. color: var(--button-fg-color--primary);
  102. background-color: var(--button-bg-color--primary);
  103. }
  104. .button--primary:hover {
  105. color: var(--button-fg-color--primary);
  106. background-color: var(--button--hover-bg-color--primary);
  107. }
  108. .button--primary:active {
  109. background-color: var(--button--active-bg-color--primary);
  110. }
  111. a.button--primary:hover,
  112. a.button--primary:active {
  113. color: var(--button-fg-color--primary);
  114. }
  115. /* Danger button styles */
  116. .button--danger {
  117. color: var(--button-fg-color--danger);
  118. background-color: var(--button-bg-color--danger);
  119. }
  120. .button--danger:hover {
  121. color: var(--button-fg-color--danger);
  122. background-color: var(--button--hover-bg-color--danger);
  123. }
  124. .button--danger:active {
  125. background-color: var(--button--active-bg-color--danger);
  126. }
  127. a.button--danger:hover,
  128. a.button--danger:active {
  129. color: var(--button-fg-color--danger);
  130. }
  131. /**
  132. * Disabled state styles as last.
  133. *
  134. * Overrides every definitions before, including variants.
  135. */
  136. .button:disabled,
  137. .button.is-disabled {
  138. color: var(--button--disabled-fg-color);
  139. background-color: var(--button--disabled-bg-color);
  140. }
  141. .button--primary:disabled,
  142. .button--primary.is-disabled {
  143. color: var(--button--disabled-fg-color--primary);
  144. background-color: var(--button--disabled-bg-color--primary);
  145. }
  146. /* Make disabled behave like a [disabled] or */
  147. .button.is-disabled {
  148. user-select: none;
  149. pointer-events: none;
  150. }
  151. /**
  152. * Style a clickable/tappable element as a link. Duplicates the base style for
  153. * the tag, plus a reset for padding, borders and background.
  154. */
  155. .link {
  156. display: inline;
  157. padding: 0;
  158. cursor: pointer;
  159. text-decoration: underline;
  160. border: 0;
  161. background: none;
  162. appearance: none;
  163. }