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. width: 100%;
  31. height: auto;
  32. margin: 0 0 0.625rem;
  33. padding: var(--off-canvas-button-padding);
  34. cursor: pointer;
  35. transition: background 0.5s ease;
  36. text-align: center;
  37. color: var(--off-canvas-button-text-color);
  38. border: solid 1px var(--off-canvas-button-border-color);
  39. border-radius: var(--off-canvas-button-border-radius);
  40. background: var(--off-canvas-button-background-color);
  41. font-family: inherit;
  42. font-size: var(--off-canvas-button-font-size);
  43. font-weight: var(--off-canvas-button-font-weight);
  44. line-height: normal;
  45. appearance: none;
  46. }
  47. #drupal-off-canvas-wrapper .button:hover,
  48. #drupal-off-canvas-wrapper .button:active {
  49. z-index: 10;
  50. -webkit-text-decoration: none;
  51. text-decoration: none;
  52. color: var(--off-canvas-button-text-color-hover);
  53. background-color: var(--off-canvas-button-background-color-hover);
  54. }
  55. #drupal-off-canvas-wrapper .button:disabled,
  56. #drupal-off-canvas-wrapper .button:disabled:active,
  57. #drupal-off-canvas-wrapper .button.is-disabled,
  58. #drupal-off-canvas-wrapper .button.is-disabled:active {
  59. cursor: default;
  60. color: #5c5c5c;
  61. background: #555;
  62. font-weight: normal;
  63. }
  64. #drupal-off-canvas-wrapper .button--primary {
  65. margin-top: 0.9375rem;
  66. color: var(--off-canvas-primary-button-text-color);
  67. background: var(--off-canvas-primary-button-background-color);
  68. }
  69. #drupal-off-canvas-wrapper .button--primary:hover,
  70. #drupal-off-canvas-wrapper .button--primary:active {
  71. color: var(--off-canvas-primary-button-text-color-hover);
  72. background: var(--off-canvas-primary-button-background-color-hover);
  73. }
  74. #drupal-off-canvas-wrapper button.link {
  75. display: inline;
  76. transition: color 0.5s ease;
  77. color: var(--off-canvas-link-color);
  78. border: 0;
  79. background: transparent;
  80. font-size: var(--off-canvas-button-font-size);
  81. }
  82. #drupal-off-canvas-wrapper button.link:hover,
  83. #drupal-off-canvas-wrapper button.link:focus {
  84. -webkit-text-decoration: none;
  85. text-decoration: none;
  86. color: var(--off-canvas-link-color);
  87. }
  88. #drupal-off-canvas-wrapper .button--danger {
  89. -webkit-text-decoration: none;
  90. text-decoration: none;
  91. color: #c72100;
  92. border-radius: 0;
  93. font-weight: 400;
  94. }
  95. #drupal-off-canvas-wrapper .button--danger:hover,
  96. #drupal-off-canvas-wrapper .button--danger:focus,
  97. #drupal-off-canvas-wrapper .button--danger:active {
  98. -webkit-text-decoration: none;
  99. text-decoration: none;
  100. color: #ff2a00;
  101. text-shadow: none;
  102. }
  103. #drupal-off-canvas-wrapper .button--danger:disabled,
  104. #drupal-off-canvas-wrapper .button--danger.is-disabled {
  105. cursor: default;
  106. color: #737373;
  107. }
  108. .no-touchevents #drupal-off-canvas-wrapper .button--small {
  109. padding: 2px 1em;
  110. font-size: 0.8125rem;
  111. }

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