|
a.button { |
|
text-decoration: none; |
|
} |
|
|
|
.button { |
|
--button-font-color: light-dark( |
|
var(--button-font-color-light, oklch(0.985 0 0)), |
|
var(--button-font-color-dark, oklch(0.2046 0 0)) |
|
); |
|
--button-font-size: 1rem; |
|
--button-background-color: light-dark( |
|
var(--button-background-color-light, oklch(0.205 0 0)), |
|
var(--button-background-color-dark, oklch(0.9219 0 0)) |
|
); |
|
--button-text-icon-gutter: 6px; |
|
|
|
position: relative; |
|
background-color: var(--button-background-color); |
|
padding: var(--button-padding, 10px 16px); |
|
border-radius: var(--button-border-radius, 8px); |
|
color: var(--button-font-color); |
|
font-size: var(--button-font-size); /* Got size from figma login screren */ |
|
border: transparent; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
cursor: pointer; |
|
font-family: var(--font-family); |
|
font-weight: var(--button-font-weight, var(--bold-font-weight)); |
|
line-height: 24px; |
|
|
|
&:hover { |
|
background-color: var( |
|
--button-hover-background-color, |
|
color-mix(in oklch, var(--button-background-color) 80%, transparent) |
|
); |
|
} |
|
|
|
&:disabled { |
|
background-color: var( |
|
--button-disabled-background-color, |
|
color-mix(in oklch, var(--button-background-color) 60%, transparent) |
|
); |
|
cursor: inherit; |
|
} |
|
|
|
& > svg { |
|
height: var(--button-font-size); |
|
} |
|
|
|
& > svg:first-child { |
|
margin-left: var(--button-text-icon-gutter); |
|
} |
|
|
|
& > svg:last-child { |
|
margin-right: var(--button-text-icon-gutter); |
|
} |
|
} |
|
|
|
.button-secondary { |
|
--button-secondary-background-color: light-dark( |
|
var(--button-secondary-background-color-light, oklch(0.8702 0 0)), |
|
var(--button-secondary-background-color-dark, oklch(0.2686 0 0)) |
|
); |
|
|
|
--button-font-color: var( |
|
--button-secondary-font-color, |
|
light-dark( |
|
var(--button-secondary-font-color-light, oklch(0.2046 0 0)), |
|
var(--button-secondary-font-color-dark, oklch(0.9761 0 0)) |
|
) |
|
); |
|
--button-background-color: var(--button-secondary-background-color); |
|
|
|
--button-disabled-background-color: var( |
|
--button-hover-background-color, |
|
color-mix( |
|
in oklch, |
|
var(--button-secondary-background-color) 80%, |
|
transparent |
|
) |
|
; |
|
); |
|
|
|
--button-disabled-background-color: var( |
|
--button-secondary-disabled-background-color, |
|
color-mix( |
|
in oklch, |
|
var(--button-secondary-background-color) 60%, |
|
transparent |
|
) |
|
; |
|
); |
|
} |
|
|
|
.button-destructive { |
|
--button-destructive-background-color: light-dark( |
|
var( |
|
--button-destructive-background-color-light, |
|
oklch(0.5836 0.2381 28.59) |
|
), |
|
var( |
|
--button-destructive-background-color-dark, |
|
oklch(0.4974 0.1245 21.47) |
|
) |
|
); |
|
|
|
--button-font-color: var( |
|
--button-destructive-font-color, |
|
light-dark( |
|
var(--button-destructive-font-color-light, oklch(1 0 0)), |
|
var(--button-destructive-font-color-dark, oklch(1 0 0)) |
|
) |
|
); |
|
|
|
--button-background-color: var(--button-destructive-background-color); |
|
|
|
--button-disabled-background-color: var( |
|
--button-hover-background-color, |
|
color-mix( |
|
in oklch, |
|
var(--button-destructive-background-color) 80%, |
|
transparent |
|
) |
|
; |
|
); |
|
|
|
--button-disabled-background-color: var( |
|
--button-secondary-disabled-background-color, |
|
color-mix( |
|
in oklch, |
|
var(--button-destructive-background-color) 60%, |
|
transparent |
|
) |
|
; |
|
); |
|
} |
