88 lines
1.8 KiB
CSS
88 lines
1.8 KiB
CSS
/* Capsule geometry from the figma Button component (1:155 instances:
|
|
* h36, pad 14/7, gap 4, r18; the wide New Session form is r24 at h38 —
|
|
* owners with the wide form set their own radius/width). */
|
|
.button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
border: none;
|
|
border-radius: 18px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
color: var(--dsw-alias-label-primary);
|
|
background: transparent;
|
|
padding: 0 14px;
|
|
}
|
|
|
|
.button:disabled {
|
|
cursor: not-allowed;
|
|
color: var(--dsw-alias-label-dimmed);
|
|
}
|
|
|
|
.md {
|
|
height: 36px;
|
|
}
|
|
|
|
/* Compact height for dense rows; no dedicated figma node (Icon_container
|
|
* 28x28 is the icon-only form) — geometry is ours. */
|
|
.sm {
|
|
height: 28px;
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
padding: 0 10px;
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.primary {
|
|
background: var(--dsw-alias-button-primary-fill);
|
|
color: var(--dsw-alias-label-primary-foreground);
|
|
}
|
|
|
|
.primary:hover:not(:disabled) {
|
|
background: var(--dsw-alias-button-primary-hover);
|
|
}
|
|
|
|
.primary:disabled {
|
|
background: var(--dsw-alias-button-primary-dimmed);
|
|
}
|
|
|
|
.ghost:hover:not(:disabled) {
|
|
background: var(--dsw-alias-interactive-bg-hover);
|
|
}
|
|
|
|
.ghost:active:not(:disabled) {
|
|
background: var(--dsw-alias-interactive-bg-active);
|
|
}
|
|
|
|
/* Dialog Cancel (figma 451:18655): bordered capsule on transparent fill. */
|
|
.outline {
|
|
border: 1px solid var(--dsw-alias-border-l2);
|
|
background: transparent;
|
|
}
|
|
|
|
.outline:hover:not(:disabled) {
|
|
background: var(--dsw-alias-interactive-bg-hover);
|
|
}
|
|
|
|
.outline:disabled {
|
|
border-color: var(--dsw-alias-border-l1);
|
|
}
|
|
|
|
.toolbar {
|
|
background: var(--dsw-alias-button-tool-bar-fill);
|
|
}
|
|
|
|
.toolbar:hover:not(:disabled) {
|
|
background: var(--dsw-alias-button-tool-bar-hover);
|
|
}
|
|
|
|
.icon {
|
|
display: inline-flex;
|
|
width: 16px;
|
|
height: 16px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|