86 lines
No EOL
1.7 KiB
SCSS
86 lines
No EOL
1.7 KiB
SCSS
@use "../vars.scss" as *;
|
|
|
|
@use "sass:color" as color;
|
|
|
|
.dotdungeon.dotdungeon:not(.style-v3) > .window-content {
|
|
button {
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
border-width: 2px;
|
|
border-radius: 4px;
|
|
transition:
|
|
background-color 400ms ease-in-out,
|
|
color 400ms ease-in-out,
|
|
border-color 400ms ease-in-out;
|
|
padding: 4px 8px;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 4px;
|
|
|
|
&.confirm {
|
|
background: $colour-confirm;
|
|
color: $text-on-confirm;
|
|
|
|
&:hover:not(:disabled),
|
|
&:focus-visible {
|
|
background: transparent;
|
|
color: $colour-confirm;
|
|
border-color: $colour-confirm;
|
|
}
|
|
|
|
&:disabled {
|
|
background: color.adjust($colour-confirm, $lightness: -10%);
|
|
color: color.adjust($text-on-confirm, $lightness: -15%);
|
|
}
|
|
}
|
|
|
|
&.neutral {
|
|
background: $colour-neutral;
|
|
color: $text-on-neutral;
|
|
|
|
&:hover:not(:disabled),
|
|
&:focus-visible {
|
|
background: transparent;
|
|
color: $colour-neutral;
|
|
border-color: $colour-neutral;
|
|
}
|
|
|
|
&:disabled {
|
|
background: color.adjust($colour-neutral, $lightness: -10%);
|
|
color: color.adjust($text-on-neutral, $lightness: -15%);
|
|
}
|
|
}
|
|
|
|
&.danger {
|
|
background: $colour-danger;
|
|
color: $text-on-danger;
|
|
|
|
&:hover:not(:disabled),
|
|
&:focus-visible {
|
|
background: transparent;
|
|
color: $colour-danger;
|
|
border-color: $colour-danger;
|
|
}
|
|
|
|
&:disabled {
|
|
background: color.adjust($colour-danger, $lightness: -10%);
|
|
color: color.adjust($text-on-danger, $lightness: -15%);
|
|
}
|
|
}
|
|
|
|
&.reduced-padding {
|
|
padding: 2px 4px;
|
|
}
|
|
|
|
|
|
&.equal-padding {
|
|
padding: 4px 4px;
|
|
&.reduced-padding {
|
|
padding: 2px 2px;
|
|
}
|
|
}
|
|
}
|
|
} |