button.css

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

Visual styling for buttons in the off-canvas dialog.

@internal

File

core/misc/dialog/off-canvas/css/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. * Visual styling for buttons in the off-canvas dialog.
  10. *
  11. * @internal
  12. */
  13. #drupal-off-canvas-wrapper {
  14. --off-canvas-button-background-color: #777;
  15. --off-canvas-button-background-color-hover: #999;
  16. --off-canvas-button-text-color: #f5f5f5;
  17. --off-canvas-button-text-color-hover: #fff;
  18. --off-canvas-button-font-size: 0.875rem;
  19. --off-canvas-button-padding: calc(var(--off-canvas-vertical-spacing-unit) / 2) 1.25rem;
  20. --off-canvas-button-border-color: transparent;
  21. --off-canvas-button-border-radius: 20em;
  22. --off-canvas-button-font-weight: 600;
  23. --off-canvas-primary-button-background-color: #277abd;
  24. --off-canvas-primary-button-background-color-hover: #236aaf;
  25. --off-canvas-primary-button-text-color: #fff;
  26. --off-canvas-primary-button-text-color-hover: #fff;
  27. }
  28. #drupal-off-canvas-wrapper .button {
  29. display: inline-block;
  30. height: auto;
  31. margin: 0 0 0.625rem;
  32. padding: var(--off-canvas-button-padding);
  33. cursor: pointer;
  34. transition: background 0.5s ease;
  35. text-align: center;
  36. color: var(--off-canvas-button-text-color);
  37. border: solid 1px var(--off-canvas-button-border-color);
  38. border-radius: var(--off-canvas-button-border-radius);
  39. background: var(--off-canvas-button-background-color);
  40. font-family: inherit;
  41. font-size: var(--off-canvas-button-font-size);
  42. font-weight: var(--off-canvas-button-font-weight);
  43. line-height: normal;
  44. appearance: none;
  45. }
  46. #drupal-off-canvas-wrapper .button:hover,
  47. #drupal-off-canvas-wrapper .button:active {
  48. z-index: 10;
  49. -webkit-text-decoration: none;
  50. text-decoration: none;
  51. color: var(--off-canvas-button-text-color-hover);
  52. background-color: var(--off-canvas-button-background-color-hover);
  53. }
  54. #drupal-off-canvas-wrapper .button:disabled,
  55. #drupal-off-canvas-wrapper .button:disabled:active,
  56. #drupal-off-canvas-wrapper .button.is-disabled,
  57. #drupal-off-canvas-wrapper .button.is-disabled:active {
  58. cursor: default;
  59. color: #5c5c5c;
  60. background: #555;
  61. font-weight: normal;
  62. }
  63. #drupal-off-canvas-wrapper .button--primary {
  64. margin-top: 0.9375rem;
  65. color: var(--off-canvas-primary-button-text-color);
  66. background: var(--off-canvas-primary-button-background-color);
  67. }
  68. #drupal-off-canvas-wrapper .button--primary:hover,
  69. #drupal-off-canvas-wrapper .button--primary:active {
  70. color: var(--off-canvas-primary-button-text-color-hover);
  71. background: var(--off-canvas-primary-button-background-color-hover);
  72. }
  73. #drupal-off-canvas-wrapper button.link {
  74. display: inline;
  75. transition: color 0.5s ease;
  76. color: var(--off-canvas-link-color);
  77. border: 0;
  78. background: transparent;
  79. font-size: var(--off-canvas-button-font-size);
  80. }
  81. #drupal-off-canvas-wrapper button.link:hover,
  82. #drupal-off-canvas-wrapper button.link:focus {
  83. -webkit-text-decoration: none;
  84. text-decoration: none;
  85. color: var(--off-canvas-link-color);
  86. }
  87. #drupal-off-canvas-wrapper .button--danger {
  88. -webkit-text-decoration: none;
  89. text-decoration: none;
  90. color: #c72100;
  91. border-radius: 0;
  92. font-weight: 400;
  93. }
  94. #drupal-off-canvas-wrapper .button--danger:hover,
  95. #drupal-off-canvas-wrapper .button--danger:focus,
  96. #drupal-off-canvas-wrapper .button--danger:active {
  97. -webkit-text-decoration: none;
  98. text-decoration: none;
  99. color: #ff2a00;
  100. text-shadow: none;
  101. }
  102. #drupal-off-canvas-wrapper .button--danger:disabled,
  103. #drupal-off-canvas-wrapper .button--danger.is-disabled {
  104. cursor: default;
  105. color: #737373;
  106. }
  107. .no-touchevents #drupal-off-canvas-wrapper .button--small {
  108. padding: 2px 1em;
  109. font-size: 0.8125rem;
  110. }

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