button.css

Same filename in this branch
  1. 10 core/profiles/demo_umami/themes/umami/css/classy/components/button.css
  2. 10 core/misc/dialog/off-canvas/css/button.css
  3. 10 core/themes/olivero/css/components/button.css
  4. 10 core/themes/starterkit_theme/css/components/button.css
  5. 10 core/assets/vendor/jquery.ui/themes/base/button.css
Same filename in other branches
  1. 9 core/profiles/demo_umami/themes/umami/css/classy/components/button.css
  2. 9 core/themes/olivero/css/components/button.css
  3. 9 core/themes/seven/css/classy/components/button.css
  4. 9 core/themes/claro/css/components/button.css
  5. 9 core/themes/bartik/css/classy/components/button.css
  6. 9 core/themes/starterkit_theme/css/components/button.css
  7. 9 core/themes/classy/css/components/button.css
  8. 9 core/assets/vendor/jquery.ui/themes/base/button.css
  9. 8.9.x core/profiles/demo_umami/themes/umami/css/classy/components/button.css
  10. 8.9.x core/themes/seven/css/classy/components/button.css
  11. 8.9.x core/themes/claro/css/components/button.css
  12. 8.9.x core/themes/bartik/css/classy/components/button.css
  13. 8.9.x core/themes/classy/css/components/button.css
  14. 8.9.x core/assets/vendor/jquery.ui/themes/base/button.css
  15. 11.x core/profiles/demo_umami/themes/umami/css/classy/components/button.css
  16. 11.x core/misc/dialog/off-canvas/css/button.css
  17. 11.x core/themes/olivero/css/components/button.css
  18. 11.x core/themes/claro/css/components/button.css
  19. 11.x core/themes/starterkit_theme/css/components/button.css
  20. 11.x core/assets/vendor/jquery.ui/themes/base/button.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.css

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