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/claro/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

Buttons.

File

core/themes/olivero/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. * Buttons.
  10. */
  11. .button {
  12. display: inline-block;
  13. height: var(--sp3);
  14. margin-block: var(--sp1);
  15. margin-inline-start: 0;
  16. margin-inline-end: var(--sp1);
  17. padding-block: calc((var(--sp3) - var(--line-height-s)) / 2);
  18. padding-inline: var(--sp1-5);
  19. cursor: pointer;
  20. text-align: center;
  21. -webkit-text-decoration: none;
  22. text-decoration: none;
  23. color: var(--color-text-primary-medium);
  24. border: solid 2px currentColor;
  25. border-radius: var(--border-radius);
  26. background-color: var(--color--white);
  27. font-family: var(--font-sans);
  28. font-size: var(--font-size-l);
  29. font-weight: 700;
  30. appearance: none;
  31. -webkit-font-smoothing: antialiased;
  32. }
  33. .button:hover,
  34. .button:focus {
  35. -webkit-text-decoration: none;
  36. text-decoration: none;
  37. color: var(--color-text-primary-loud);
  38. border: solid 2px currentColor;
  39. background: none;
  40. font-weight: 700;
  41. }
  42. .button:focus {
  43. outline: 2px solid var(--color--primary-60);
  44. outline-offset: 2px;
  45. }
  46. .button:active {
  47. color: var(--color-text-primary-medium);
  48. border-color: currentColor;
  49. }
  50. .button:disabled,
  51. .button.is-disabled {
  52. cursor: default;
  53. color: var(--color--gray-90);
  54. border-color: var(--color--gray-90);
  55. }
  56. /*
  57. IE11 doesn't work properly on button elements so we only do
  58. inline-flex on modern browsers.
  59. */
  60. @supports (display: inline-flex) {
  61. .button {
  62. display: inline-flex;
  63. align-items: center;
  64. /* Top padding accounts for font not being vertically centered within line-height. */
  65. padding-block: 1px 0;
  66. padding-inline: var(--sp1-5);
  67. line-height: var(--line-height-s);
  68. }
  69. }
  70. /* No margin if is part of a menu. */
  71. .menu .button {
  72. margin-block: 0;
  73. margin-inline-start: 0;
  74. margin-inline-end: 0;
  75. }
  76. .button--small {
  77. height: var(--sp2-5);
  78. padding-block: calc((var(--sp2-5) - var(--line-height-s)) / 2);
  79. padding-inline: var(--sp);
  80. font-size: var(--font-size-base);
  81. line-height: normal;
  82. }
  83. .button--primary {
  84. color: var(--color--white);
  85. border-color: var(--color--primary-40);
  86. background-color: var(--color--primary-40);
  87. }
  88. .button--primary:hover,
  89. .button--primary:focus {
  90. color: var(--color--white);
  91. border-color: var(--color--primary-30);
  92. background-color: var(--color--primary-30);
  93. }
  94. .button--primary:active {
  95. color: var(--color--white);
  96. background-color: var(--color--primary-40);
  97. }
  98. .button--primary:disabled,
  99. .button--primary.is-disabled {
  100. color: var(--color--white);
  101. background-color: var(--color--gray-90);
  102. }
  103. .button--icon-back {
  104. display: inline-flex;
  105. align-items: center;
  106. }
  107. .button--icon-back::before {
  108. display: block;
  109. width: 0.5em;
  110. height: 0.5em;
  111. margin-inline-end: 0.5em;
  112. content: "";
  113. transform: rotate(45deg); /* LTR */
  114. border-block-end: solid 2px currentColor;
  115. border-inline-start: solid 2px currentColor;
  116. }
  117. [dir="rtl"] .button--icon-back::before {
  118. transform: rotate(-45deg);
  119. }
  120. .shepherd-cancel-icon {
  121. font-size: 1.5em;
  122. }

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