Move the buttons styling into it's own file

This commit is contained in:
Oliver-Akins 2024-01-08 22:54:12 -07:00
parent 3b816a30d9
commit d3c01977f5
3 changed files with 58 additions and 37 deletions

View file

@ -63,42 +63,5 @@
font-family: $body-font;
word-break: break-all;
}
button {
border-radius: 4px;
&.primary {
background: $colour-primary;
color: $text-on-primary;
padding: 4px 8px;
&:hover {
background: $colour-primary-d20;
color: $text-on-primary-d20;
}
}
&.danger {
background: $colour-danger;
color: $text-on-danger;
padding: 4px 8px;
&:hover {
background: $colour-danger-d20;
color: $text-on-danger-d20;
}
}
&.reduced-padding {
padding: 2px 4px;
}
&.equal-padding {
padding: 4px 4px;
&.reduced-padding {
padding: 2px 2px;
}
}
}
}
}

View file

@ -0,0 +1,56 @@
@use "../vars.scss" as *;
.dotdungeon.dotdungeon.dotdungeon.dotdungeon > .window-content {
button {
border-radius: 4px;
box-sizing: border-box;
border-style: solid;
border-color: transparent;
border-width: 2px;
border-radius: 4px;
transition: 400ms;
padding: 4px 8px;
&.confirm {
background: $colour-confirm;
color: $text-on-confirm;
&:hover, &:focus {
background: transparent;
color: $colour-confirm;
border-color: $colour-confirm;
}
}
&.neutral {
background: $colour-neutral;
color: $text-on-neutral;
&:hover, &:focus {
background: transparent;
color: $colour-neutral;
border-color: $colour-neutral;
}
}
&.danger {
background: $colour-danger;
color: $text-on-danger;
&:hover, &:focus {
background: transparent;
color: $colour-danger;
border-color: $colour-danger;
}
}
&.reduced-padding {
padding: 2px 4px;
}
&.equal-padding {
padding: 4px 4px;
&.reduced-padding {
padding: 2px 2px;
}
}
}
}

View file

@ -5,6 +5,8 @@
@use "./generic.scss";
@use "./icons.scss";
@use "./global/buttons.scss";
@use "./sheets/partials/stat.scss";
@use "./sheets/partials/skill.scss";
@use "./sheets/partials/panel.scss";