You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
2.4 KiB
92 lines
2.4 KiB
/** |
|
* @file |
|
* Visual styles for buttons. |
|
* |
|
* Drupal applies .button — and typically .button--primary for the main |
|
* action — automatically to <input type="submit">, <button>, and |
|
* <a class="button"> via core RenderElement processing. |
|
* |
|
* Variants commonly emitted by core/contrib: |
|
* .button — base, neutral |
|
* .button--primary — primary action (form submit defaults to this) |
|
* .button--danger — destructive action |
|
* .button--small — compact size |
|
* .button[disabled] — disabled state (.is-disabled in some contexts) |
|
*/ |
|
@layer components { |
|
|
|
.button, |
|
.image-button { |
|
display: inline-block; |
|
padding: var(--size-2) var(--size-3); |
|
border: 1px solid var(--text-2); |
|
border-radius: var(--radius-2); |
|
background-color: var(--surface-1); |
|
color: var(--text-1); |
|
font: inherit; |
|
line-height: 1.2; |
|
text-decoration: none; |
|
cursor: pointer; |
|
transition: |
|
background-color 0.15s var(--ease-out-2), |
|
border-color 0.15s var(--ease-out-2), |
|
color 0.15s var(--ease-out-2); |
|
} |
|
.button:not(:first-child), |
|
.image-button:not(:first-child) { |
|
margin-inline-start: var(--size-3); |
|
} |
|
.button:hover, |
|
.image-button:hover { |
|
background-color: var(--surface-2); |
|
border-color: var(--text-1); |
|
} |
|
.button:focus, |
|
.image-button:focus { |
|
outline: 2px solid var(--upei-red); |
|
outline-offset: 2px; |
|
} |
|
|
|
/* Primary — brand-colored. Form submits typically get this class. */ |
|
.button--primary { |
|
background-color: var(--upei-red); |
|
border-color: var(--upei-red); |
|
color: white; |
|
} |
|
.button--primary:hover { |
|
background-color: var(--upei-dark-red); |
|
border-color: var(--upei-dark-red); |
|
} |
|
|
|
/* Danger — destructive action. Outlined by default, fills on hover. */ |
|
.button--danger { |
|
background-color: var(--surface-1); |
|
border-color: var(--upei-red); |
|
color: var(--upei-red); |
|
} |
|
.button--danger:hover { |
|
background-color: var(--upei-red); |
|
color: white; |
|
} |
|
|
|
/* Small variant. */ |
|
.button--small { |
|
padding: var(--size-1) var(--size-2); |
|
font-size: 0.875em; |
|
} |
|
|
|
/* Disabled. */ |
|
.button[disabled], |
|
.button.is-disabled, |
|
.image-button[disabled] { |
|
opacity: 0.5; |
|
cursor: not-allowed; |
|
} |
|
.button[disabled]:hover, |
|
.button.is-disabled:hover, |
|
.image-button[disabled]:hover { |
|
background-color: var(--surface-1); |
|
border-color: var(--text-2); |
|
} |
|
|
|
}
|
|
|