196 lines
5.1 KiB
CSS
196 lines
5.1 KiB
CSS
/* Copyright 2024 New Vector Ltd.
|
|
* Copyright 2023, 2024 The Matrix.org Foundation C.I.C.
|
|
*
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
* Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
.cpd-button {
|
|
border-radius: var(--cpd-radius-pill-effect);
|
|
cursor: pointer;
|
|
appearance: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--cpd-space-2x);
|
|
box-sizing: border-box;
|
|
font: var(--cpd-font-body-md-semibold);
|
|
transition-duration: 0.1s;
|
|
transition-property: color, background-color, border-color;
|
|
}
|
|
|
|
.cpd-button > svg {
|
|
transition: color 0.1s;
|
|
}
|
|
|
|
.cpd-button[disabled] {
|
|
cursor: not-allowed;
|
|
pointer-events: all !important;
|
|
color: var(--cpd-color-text-disabled) !important;
|
|
}
|
|
|
|
.cpd-button[disabled] > svg {
|
|
color: var(--cpd-color-icon-disabled) !important;
|
|
}
|
|
|
|
/**
|
|
* SIZES
|
|
*/
|
|
|
|
.cpd-button[data-size="lg"] {
|
|
padding-block: var(--cpd-space-2x);
|
|
padding-inline: var(--cpd-space-8x);
|
|
min-block-size: var(--cpd-space-12x);
|
|
}
|
|
|
|
.cpd-button[data-size="lg"].has-icon {
|
|
padding-inline-start: var(--cpd-space-7x);
|
|
}
|
|
|
|
.cpd-button[data-size="sm"] {
|
|
padding-block: var(--cpd-space-1x);
|
|
padding-inline: var(--cpd-space-5x);
|
|
min-block-size: var(--cpd-space-9x);
|
|
}
|
|
|
|
.cpd-button[data-size="sm"].has-icon {
|
|
padding-inline-start: var(--cpd-space-4x);
|
|
}
|
|
|
|
/**
|
|
* KINDS
|
|
*/
|
|
|
|
.cpd-button[data-kind="primary"] {
|
|
color: var(--cpd-color-text-on-solid-primary);
|
|
background: var(--cpd-color-bg-action-primary-rest);
|
|
border-width: 0;
|
|
}
|
|
|
|
.cpd-button[data-kind="primary"] > svg {
|
|
color: var(--cpd-color-icon-on-solid-primary);
|
|
}
|
|
|
|
@media (hover) {
|
|
.cpd-button[data-kind="primary"]:hover {
|
|
background: var(--cpd-color-bg-action-primary-hovered);
|
|
}
|
|
}
|
|
|
|
.cpd-button[data-kind="primary"]:active,
|
|
.cpd-button[data-kind="primary"][aria-expanded="true"] {
|
|
background: var(--cpd-color-bg-action-primary-pressed);
|
|
}
|
|
|
|
.cpd-button[data-kind="primary"][disabled] {
|
|
/* !important to override destructive background */
|
|
background: var(--cpd-color-bg-subtle-primary) !important;
|
|
}
|
|
|
|
.cpd-button[data-kind="primary"].destructive {
|
|
background: var(--cpd-color-bg-critical-primary);
|
|
}
|
|
|
|
@media (hover) {
|
|
.cpd-button[data-kind="primary"].destructive:hover {
|
|
background: var(--cpd-color-bg-critical-hovered);
|
|
}
|
|
}
|
|
|
|
.cpd-button[data-kind="primary"].destructive:active,
|
|
.cpd-button[data-kind="primary"].destructive[aria-expanded="true"] {
|
|
/* TODO: We're waiting for this value to be formalized as a semantic token */
|
|
background: var(--cpd-color-red-1100);
|
|
}
|
|
|
|
.cpd-button[data-kind="secondary"] {
|
|
border: 1px solid var(--cpd-color-border-interactive-secondary);
|
|
color: var(--cpd-color-text-primary);
|
|
background: var(--cpd-color-bg-canvas-default);
|
|
}
|
|
|
|
.button[data-kind="secondary"] > svg {
|
|
color: var(--cpd-color-icon-primary);
|
|
}
|
|
|
|
@media (hover) {
|
|
.cpd-button[data-kind="secondary"]:hover {
|
|
border-color: var(--cpd-color-border-interactive-hovered);
|
|
background: var(--cpd-color-bg-subtle-secondary);
|
|
}
|
|
}
|
|
|
|
.cpd-button[data-kind="secondary"]:active,
|
|
.cpd-button[data-kind="secondary"][aria-expanded="true"] {
|
|
border-color: var(--cpd-color-border-interactive-hovered);
|
|
background: var(--cpd-color-bg-subtle-primary);
|
|
}
|
|
|
|
.cpd-button[data-kind="secondary"][disabled] {
|
|
/* !important to override destructive values */
|
|
border-color: var(--cpd-color-border-interactive-secondary) !important;
|
|
background: var(--cpd-color-bg-subtle-secondary) !important;
|
|
}
|
|
|
|
.cpd-button[data-kind="secondary"].destructive {
|
|
border-color: var(--cpd-color-border-critical-subtle);
|
|
color: var(--cpd-color-text-critical-primary);
|
|
}
|
|
|
|
.cpd-button[data-kind="secondary"].destructive > svg {
|
|
color: var(--cpd-color-icon-critical-primary);
|
|
}
|
|
|
|
@media (hover) {
|
|
.cpd-button[data-kind="secondary"].destructive:hover {
|
|
border-color: var(--cpd-color-border-critical-hovered);
|
|
background: var(--cpd-color-bg-critical-subtle);
|
|
}
|
|
}
|
|
|
|
.cpd-button[data-kind="secondary"].destructive:active,
|
|
.cpd-button[data-kind="secondary"].destructive[aria-expanded="true"] {
|
|
border-color: var(--cpd-color-border-critical-hovered);
|
|
background: var(--cpd-color-bg-critical-subtle-hovered);
|
|
}
|
|
|
|
.cpd-button[data-kind="tertiary"] {
|
|
border: none;
|
|
color: var(--cpd-color-text-primary);
|
|
text-decoration: underline;
|
|
background: transparent;
|
|
}
|
|
|
|
@media (hover) {
|
|
.cpd-button[data-kind="tertiary"]:hover {
|
|
background: var(--cpd-color-bg-subtle-secondary);
|
|
}
|
|
}
|
|
|
|
.cpd-button[data-kind="tertiary"]:active,
|
|
.cpd-button[data-kind="tertiary"][aria-expanded="true"] {
|
|
background: var(--cpd-color-bg-subtle-primary);
|
|
}
|
|
|
|
.cpd-button[data-kind="tertiary"][disabled] {
|
|
color: var(--cpd-color-text-disabled);
|
|
|
|
/* !important to override destructive background */
|
|
background: transparent !important;
|
|
}
|
|
|
|
.cpd-button[data-kind="tertiary"].destructive {
|
|
color: var(--cpd-color-text-critical-primary);
|
|
}
|
|
|
|
@media (hover) {
|
|
.cpd-button[data-kind="tertiary"].destructive:hover {
|
|
background: var(--cpd-color-bg-critical-subtle);
|
|
}
|
|
}
|
|
|
|
.cpd-button[data-kind="tertiary"].destructive:active,
|
|
.cpd-button[data-kind="tertiary"].destructive[aria-expanded="true"] {
|
|
background: var(--cpd-color-bg-critical-subtle-hovered);
|
|
}
|