CodeCow/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2026-06-30 21:11:04 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
4db7ea2296
zulip/web/styles/buttons.css
Sayam Samal 7c5199896f buttons: Update action button design. 
The `line-height` and `padding` values are updated, to account for the
previous confusion of calculating these values for a 15px base value,
instead of the required 16px base font value.

The other changes in this commit include the `font-weight` and `gap`
properties, which are modified following the design discussion on CZO.
2025-01-13 17:44:52 -08:00

573 lines
14 KiB
CSS
Raw Blame History

.action-button {
display: flex;
gap: 0.75ch;
justify-content: center;
align-items: center;
line-height: 1.25;
font-size: var(--base-font-size-px);
font-family: "Source Sans 3 VF", sans-serif;
font-weight: 500;
letter-spacing: 0.02ch;
padding: 0.25em 0.625em;
color: var(--color-text-neutral-quiet-action-button);
background-color: var(--color-background-neutral-quiet-action-button);
border-radius: 4px;
white-space: nowrap;
user-select: none;
border: none;
cursor: pointer;
clip-path: inset(-1px);
transition: none 0.05s ease-in;
transition-property: background-color, clip-path;
&:hover {
background-color: var(
--color-background-neutral-quiet-action-button-hover
);
transition: none 0.1s ease-out;
transition-property: background-color, clip-path;
}
&:active {
background-color: var(
--color-background-neutral-quiet-action-button-active
);
clip-path: inset(1px round 4px);
}
&:focus-visible {
outline-offset: 2px;
outline-width: 1px;
clip-path: inset(-3px);
}
&:focus {
/* Override common button outline style set in zulip.css and dark_theme.css */
outline: none;
}
}
.action-button-label {
max-width: 32ch;
text-overflow: ellipsis;
overflow: hidden;
}
/* Action buttons -- Neutral Intent */
.action-button-primary-neutral {
color: var(--color-text-neutral-primary-action-button);
background-color: var(--color-background-neutral-primary-action-button);
&:hover {
background-color: var(
--color-background-neutral-primary-action-button-hover
);
}
&:active {
background-color: var(
--color-background-neutral-primary-action-button-active
);
}
}
.action-button-quiet-neutral {
color: var(--color-text-neutral-quiet-action-button);
background-color: var(--color-background-neutral-quiet-action-button);
box-shadow: 0 0 0.5px 0.5px var(--color-inner-shadow-action-button) inset;
&:hover {
background-color: var(
--color-background-neutral-quiet-action-button-hover
);
}
&:active {
background-color: var(
--color-background-neutral-quiet-action-button-active
);
}
}
.action-button-borderless-neutral {
color: var(--color-text-neutral-borderless-action-button);
background-color: transparent;
&:hover {
background-color: var(
--color-background-neutral-borderless-action-button-hover
);
}
&:active {
background-color: var(
--color-background-neutral-borderless-action-button-active
);
}
}
/* Action buttons -- Brand Intent */
.action-button-primary-brand {
color: var(--color-text-brand-primary-action-button);
background-color: var(--color-background-brand-primary-action-button);
&:hover {
background-color: var(
--color-background-brand-primary-action-button-hover
);
}
&:active {
background-color: var(
--color-background-brand-primary-action-button-active
);
}
}
.action-button-quiet-brand {
color: var(--color-text-brand-quiet-action-button);
background-color: var(--color-background-brand-quiet-action-button);
box-shadow: 0 0 0.5px 0.5px var(--color-inner-shadow-action-button) inset;
&:hover {
background-color: var(
--color-background-brand-quiet-action-button-hover
);
}
&:active {
background-color: var(
--color-background-brand-quiet-action-button-active
);
}
}
.action-button-borderless-brand {
color: var(--color-text-brand-borderless-action-button);
background-color: transparent;
&:hover {
background-color: var(
--color-background-brand-borderless-action-button-hover
);
}
&:active {
background-color: var(
--color-background-brand-borderless-action-button-active
);
}
}
/* Action buttons -- Info Intent */
.action-button-primary-info {
color: var(--color-text-info-primary-action-button);
background-color: var(--color-background-info-primary-action-button);
&:hover {
background-color: var(
--color-background-info-primary-action-button-hover
);
}
&:active {
background-color: var(
--color-background-info-primary-action-button-active
);
}
}
.action-button-quiet-info {
color: var(--color-text-info-quiet-action-button);
background-color: var(--color-background-info-quiet-action-button);
box-shadow: 0 0 0.5px 0.5px var(--color-inner-shadow-action-button) inset;
&:hover {
background-color: var(
--color-background-info-quiet-action-button-hover
);
}
&:active {
background-color: var(
--color-background-info-quiet-action-button-active
);
}
}
.action-button-borderless-info {
color: var(--color-text-info-borderless-action-button);
background-color: transparent;
&:hover {
background-color: var(
--color-background-info-borderless-action-button-hover
);
}
&:active {
background-color: var(
--color-background-info-borderless-action-button-active
);
}
}
/* Action buttons -- Success Intent */
.action-button-primary-success {
color: var(--color-text-success-primary-action-button);
background-color: var(--color-background-success-primary-action-button);
&:hover {
background-color: var(
--color-background-success-primary-action-button-hover
);
}
&:active {
background-color: var(
--color-background-success-primary-action-button-active
);
}
}
.action-button-quiet-success {
color: var(--color-text-success-quiet-action-button);
background-color: var(--color-background-success-quiet-action-button);
box-shadow: 0 0 0.5px 0.5px var(--color-inner-shadow-action-button) inset;
&:hover {
background-color: var(
--color-background-success-quiet-action-button-hover
);
}
&:active {
background-color: var(
--color-background-success-quiet-action-button-active
);
}
}
.action-button-borderless-success {
color: var(--color-text-success-borderless-action-button);
background-color: transparent;
&:hover {
background-color: var(
--color-background-success-borderless-action-button-hover
);
}
&:active {
background-color: var(
--color-background-success-borderless-action-button-active
);
}
}
/* Action buttons -- Warning Intent */
.action-button-primary-warning {
color: var(--color-text-warning-primary-action-button);
background-color: var(--color-background-warning-primary-action-button);
&:hover {
background-color: var(
--color-background-warning-primary-action-button-hover
);
}
&:active {
background-color: var(
--color-background-warning-primary-action-button-active
);
}
}
.action-button-quiet-warning {
color: var(--color-text-warning-quiet-action-button);
background-color: var(--color-background-warning-quiet-action-button);
box-shadow: 0 0 0.5px 0.5px var(--color-inner-shadow-action-button) inset;
&:hover {
background-color: var(
--color-background-warning-quiet-action-button-hover
);
}
&:active {
background-color: var(
--color-background-warning-quiet-action-button-active
);
}
}
.action-button-borderless-warning {
color: var(--color-text-warning-borderless-action-button);
background-color: transparent;
&:hover {
background-color: var(
--color-background-warning-borderless-action-button-hover
);
}
&:active {
background-color: var(
--color-background-warning-borderless-action-button-active
);
}
}
/* Action buttons -- Danger Intent */
.action-button-primary-danger {
color: var(--color-text-danger-primary-action-button);
background-color: var(--color-background-danger-primary-action-button);
&:hover {
background-color: var(
--color-background-danger-primary-action-button-hover
);
}
&:active {
background-color: var(
--color-background-danger-primary-action-button-active
);
}
}
.action-button-quiet-danger {
color: var(--color-text-danger-quiet-action-button);
background-color: var(--color-background-danger-quiet-action-button);
box-shadow: 0 0 0.5px 0.5px var(--color-inner-shadow-action-button) inset;
&:hover {
background-color: var(
--color-background-danger-quiet-action-button-hover
);
}
&:active {
background-color: var(
--color-background-danger-quiet-action-button-active
);
}
}
.action-button-borderless-danger {
color: var(--color-text-danger-borderless-action-button);
background-color: transparent;
&:hover {
background-color: var(
--color-background-danger-borderless-action-button-hover
);
}
&:active {
background-color: var(
--color-background-danger-borderless-action-button-active
);
}
}
.icon-button {
/* This class should always be used with an icon-button-* class
defining the color scheme of the button, defined below. */
display: flex;
justify-content: center;
align-items: center;
aspect-ratio: 1;
font-size: var(--base-font-size-px);
background-color: transparent; /* Override button default background color */
padding: 0.375em;
cursor: pointer;
border: none;
border-radius: 4px;
clip-path: inset(-1px);
transition: none 0.05s ease-in;
transition-property: background-color, clip-path;
&:focus {
/* Override common button outline style set in zulip.css and dark_theme.css */
outline: none;
}
&:hover {
transition: none 0.1s ease-out;
transition-property: background-color, clip-path;
}
&:active {
clip-path: inset(1px round 4px);
}
&:focus-visible {
outline-offset: 2px;
outline-width: 1px;
clip-path: inset(-3px);
}
}
.icon-button-neutral {
color: var(--color-text-neutral-icon-button);
&:hover {
color: var(--color-text-neutral-icon-button-hover);
}
&:active {
color: var(--color-text-neutral-icon-button-active);
}
&.icon-button-square {
&:hover {
background-color: var(
--color-background-neutral-icon-button-square-hover
);
}
&:active {
color: var(--color-text-neutral-icon-button-square-active);
background-color: var(
--color-background-neutral-icon-button-square-active
);
}
}
}
.icon-button-brand {
color: var(--color-text-brand-icon-button);
&:hover {
color: var(--color-text-brand-icon-button-hover);
}
&:active {
color: var(--color-text-brand-icon-button-active);
}
&.icon-button-square {
&:hover {
background-color: var(
--color-background-brand-icon-button-square-hover
);
}
&:active {
color: var(--color-text-brand-icon-button-square-active);
background-color: var(
--color-background-brand-icon-button-square-active
);
}
}
}
.icon-button-info {
color: var(--color-text-info-icon-button);
&:hover {
color: var(--color-text-info-icon-button-hover);
}
&:active {
color: var(--color-text-info-icon-button-active);
}
&.icon-button-square {
&:hover {
background-color: var(
--color-background-info-icon-button-square-hover
);
}
&:active {
color: var(--color-text-info-icon-button-square-active);
background-color: var(
--color-background-info-icon-button-square-active
);
}
}
}
.icon-button-success {
color: var(--color-text-success-icon-button);
&:hover {
color: var(--color-text-success-icon-button-hover);
}
&:active {
color: var(--color-text-success-icon-button-active);
}
&.icon-button-square {
&:hover {
background-color: var(
--color-background-success-icon-button-square-hover
);
}
&:active {
color: var(--color-text-success-icon-button-square-active);
background-color: var(
--color-background-success-icon-button-square-active
);
}
}
}
.icon-button-warning {
color: var(--color-text-warning-icon-button);
&:hover {
color: var(--color-text-warning-icon-button-hover);
}
&:active {
color: var(--color-text-warning-icon-button-active);
}
&.icon-button-square {
&:hover {
background-color: var(
--color-background-warning-icon-button-square-hover
);
}
&:active {
color: var(--color-text-warning-icon-button-square-active);
background-color: var(
--color-background-warning-icon-button-square-active
);
}
}
}
.icon-button-danger {
color: var(--color-text-danger-icon-button);
&:hover {
color: var(--color-text-danger-icon-button-hover);
}
&:active {
color: var(--color-text-danger-icon-button-active);
}
&.icon-button-square {
&:hover {
background-color: var(
--color-background-danger-icon-button-square-hover
);
}
&:active {
color: var(--color-text-danger-icon-button-square-active);
background-color: var(
--color-background-danger-icon-button-square-active
);
}
}
}
Reference in New Issue View Git Blame Copy Permalink