button.css
Same filename in this branch
Same filename in other branches
- 9 core/profiles/demo_umami/themes/umami/css/classy/components/button.css
- 9 core/themes/olivero/css/components/button.css
- 9 core/themes/seven/css/classy/components/button.css
- 9 core/themes/claro/css/components/button.css
- 9 core/themes/bartik/css/classy/components/button.css
- 9 core/themes/starterkit_theme/css/components/button.css
- 9 core/themes/classy/css/components/button.css
- 9 core/assets/vendor/jquery.ui/themes/base/button.css
- 8.9.x core/profiles/demo_umami/themes/umami/css/classy/components/button.css
- 8.9.x core/themes/seven/css/classy/components/button.css
- 8.9.x core/themes/claro/css/components/button.css
- 8.9.x core/themes/bartik/css/classy/components/button.css
- 8.9.x core/themes/classy/css/components/button.css
- 8.9.x core/assets/vendor/jquery.ui/themes/base/button.css
- 10 core/profiles/demo_umami/themes/umami/css/classy/components/button.css
- 10 core/misc/dialog/off-canvas/css/button.css
- 10 core/themes/olivero/css/components/button.css
- 10 core/themes/claro/css/components/button.css
- 10 core/themes/starterkit_theme/css/components/button.css
- 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
- /*
- * DO NOT EDIT THIS FILE.
- * See the following change record for more information,
- * https://www.drupal.org/node/3084859
- * @preserve
- */
- /**
- * @file
- * Visual styling for buttons in the off-canvas dialog.
- *
- * @internal
- */
- #drupal-off-canvas-wrapper {
- --off-canvas-button-background-color: #777;
- --off-canvas-button-background-color-hover: #999;
- --off-canvas-button-text-color: #f5f5f5;
- --off-canvas-button-text-color-hover: #fff;
- --off-canvas-button-font-size: 0.875rem;
- --off-canvas-button-padding: calc(var(--off-canvas-vertical-spacing-unit) / 2) 1.25rem;
- --off-canvas-button-border-color: transparent;
- --off-canvas-button-border-radius: 20em;
- --off-canvas-button-font-weight: 600;
- --off-canvas-primary-button-background-color: #277abd;
- --off-canvas-primary-button-background-color-hover: #236aaf;
- --off-canvas-primary-button-text-color: #fff;
- --off-canvas-primary-button-text-color-hover: #fff;
- }
- #drupal-off-canvas-wrapper .button {
- display: inline-block;
- height: auto;
- margin: 0 0 0.625rem;
- padding: var(--off-canvas-button-padding);
- cursor: pointer;
- transition: background 0.5s ease;
- text-align: center;
- color: var(--off-canvas-button-text-color);
- border: solid 1px var(--off-canvas-button-border-color);
- border-radius: var(--off-canvas-button-border-radius);
- background: var(--off-canvas-button-background-color);
- font-family: inherit;
- font-size: var(--off-canvas-button-font-size);
- font-weight: var(--off-canvas-button-font-weight);
- line-height: normal;
- appearance: none;
- }
- #drupal-off-canvas-wrapper .button:hover,
- #drupal-off-canvas-wrapper .button:active {
- z-index: 10;
- -webkit-text-decoration: none;
- text-decoration: none;
- color: var(--off-canvas-button-text-color-hover);
- background-color: var(--off-canvas-button-background-color-hover);
- }
- #drupal-off-canvas-wrapper .button:disabled,
- #drupal-off-canvas-wrapper .button:disabled:active,
- #drupal-off-canvas-wrapper .button.is-disabled,
- #drupal-off-canvas-wrapper .button.is-disabled:active {
- cursor: default;
- color: #5c5c5c;
- background: #555;
- font-weight: normal;
- }
- #drupal-off-canvas-wrapper .button--primary {
- margin-top: 0.9375rem;
- color: var(--off-canvas-primary-button-text-color);
- background: var(--off-canvas-primary-button-background-color);
- }
- #drupal-off-canvas-wrapper .button--primary:hover,
- #drupal-off-canvas-wrapper .button--primary:active {
- color: var(--off-canvas-primary-button-text-color-hover);
- background: var(--off-canvas-primary-button-background-color-hover);
- }
- #drupal-off-canvas-wrapper button.link {
- display: inline;
- transition: color 0.5s ease;
- color: var(--off-canvas-link-color);
- border: 0;
- background: transparent;
- font-size: var(--off-canvas-button-font-size);
- }
- #drupal-off-canvas-wrapper button.link:hover,
- #drupal-off-canvas-wrapper button.link:focus {
- -webkit-text-decoration: none;
- text-decoration: none;
- color: var(--off-canvas-link-color);
- }
- #drupal-off-canvas-wrapper .button--danger {
- -webkit-text-decoration: none;
- text-decoration: none;
- color: #c72100;
- border-radius: 0;
- font-weight: 400;
- }
- #drupal-off-canvas-wrapper .button--danger:hover,
- #drupal-off-canvas-wrapper .button--danger:focus,
- #drupal-off-canvas-wrapper .button--danger:active {
- -webkit-text-decoration: none;
- text-decoration: none;
- color: #ff2a00;
- text-shadow: none;
- }
- #drupal-off-canvas-wrapper .button--danger:disabled,
- #drupal-off-canvas-wrapper .button--danger.is-disabled {
- cursor: default;
- color: #737373;
- }
- .no-touchevents #drupal-off-canvas-wrapper .button--small {
- padding: 2px 1em;
- font-size: 0.8125rem;
- }
Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.