button.pcss.css

Same filename in this branch
  1. 10 core/misc/dialog/off-canvas/css/button.pcss.css
  2. 10 core/themes/olivero/css/components/button.pcss.css
Same filename in other branches
  1. 9 core/themes/olivero/css/components/button.pcss.css
  2. 9 core/themes/claro/css/components/button.pcss.css
  3. 8.9.x core/themes/claro/css/components/button.pcss.css
  4. 11.x core/misc/dialog/off-canvas/css/button.pcss.css
  5. 11.x core/themes/olivero/css/components/button.pcss.css
  6. 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. /**
  8. * Buttons.
  9. *
  10. * 1. Padding widths detracted by width of the transparent borders to make
  11. * button size match with design system.
  12. * 2. Prevent fat text in WebKit.
  13. *
  14. * @todo Consider moving box-sizing into base.css under a universal selector.
  15. * See https://www.drupal.org/node/2124251
  16. */
  17. /**
  18. * Base button styles.
  19. *
  20. * These styles have been duplicated to dropbutton.css and action-links.css
  21. * since those components inherits most of these design elements. Whenever
  22. * making changes to this file, remember to check if that needs to be applied to
  23. * dropbutton.css or action-links.css as well.
  24. */
  25. .button {
  26. display: inline-block;
  27. margin-block: var(--space-m);
  28. margin-inline: 0 var(--space-s);
  29. padding: calc(var(--space-m) - 1px) calc(var(--space-l) - 1px); /* 1 */
  30. cursor: pointer;
  31. text-align: center;
  32. text-decoration: none;
  33. color: var(--button-fg-color);
  34. border: 1px solid transparent;
  35. border-radius: var(--button-border-radius-size);
  36. background-color: var(--button-bg-color);
  37. font-size: var(--font-size-base);
  38. font-weight: 700;
  39. line-height: 1rem;
  40. appearance: none;
  41. -webkit-font-smoothing: antialiased; /* 2 */
  42. &:not(:focus) {
  43. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  44. }
  45. &:hover {
  46. text-decoration: none;
  47. color: var(--button-fg-color);
  48. background-color: var(--button--hover-bg-color);
  49. }
  50. &:focus {
  51. text-decoration: none;
  52. }
  53. &:active {
  54. background-color: var(--button--active-bg-color);
  55. }
  56. }
  57. /* Common styles for small buttons. */
  58. .no-touchevents {
  59. & .button--small {
  60. margin-block: var(--space-s);
  61. margin-inline: 0 var(--space-xs);
  62. padding: calc(var(--space-xs) - 1px) calc(var(--space-m) - 1px); /* 1 */
  63. font-size: var(--font-size-xs);
  64. }
  65. /* Common styles for extra small buttons. */
  66. & .button--extrasmall {
  67. margin-block: var(--space-xs);
  68. margin-inline: 0 var(--space-xs);
  69. padding: calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) - 1px); /* 1 */
  70. font-size: var(--font-size-xs);
  71. }
  72. }
  73. /* Styles for action link buttons. */
  74. .button--action {
  75. margin: 0;
  76. &::before {
  77. margin-inline: -0.25em 0;
  78. padding-inline: 0 0.25em;
  79. content: "+";
  80. font-weight: 900;
  81. }
  82. }
  83. /* Primary button style.s */
  84. .button--primary {
  85. color: var(--button-fg-color--primary);
  86. background-color: var(--button-bg-color--primary);
  87. &:is(:hover, :active) {
  88. color: var(--button-fg-color--primary);
  89. background-color: var(--button--hover-bg-color--primary);
  90. }
  91. }
  92. /* Danger button styles */
  93. .button--danger {
  94. color: var(--button-fg-color--danger);
  95. background-color: var(--button-bg-color--danger);
  96. &:is(:hover, :active) {
  97. color: var(--button-fg-color--danger);
  98. background-color: var(--button--hover-bg-color--danger);
  99. }
  100. }
  101. /**
  102. * Disabled state styles as last.
  103. *
  104. * Overrides every definitions before, including variants.
  105. */
  106. .button {
  107. &:is(:disabled, .is-disabled) {
  108. color: var(--button--disabled-fg-color);
  109. background-color: var(--button--disabled-bg-color);
  110. }
  111. /* Make disabled behave like a [disabled] or . */
  112. &.is-disabled {
  113. user-select: none;
  114. pointer-events: none;
  115. }
  116. }
  117. /**
  118. * Style a clickable/tappable element as a link. Duplicates the base style for
  119. * the tag, plus a reset for padding, borders and background.
  120. */
  121. .link {
  122. display: inline;
  123. padding: 0;
  124. cursor: pointer;
  125. text-decoration: underline;
  126. border: 0;
  127. background: none;
  128. appearance: none;
  129. }