Move the buttons styling into it's own file
This commit is contained in:
parent
3b816a30d9
commit
d3c01977f5
3 changed files with 58 additions and 37 deletions
|
|
@ -63,42 +63,5 @@
|
||||||
font-family: $body-font;
|
font-family: $body-font;
|
||||||
word-break: break-all;
|
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
56
styles/global/buttons.scss
Normal file
56
styles/global/buttons.scss
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -5,6 +5,8 @@
|
||||||
@use "./generic.scss";
|
@use "./generic.scss";
|
||||||
@use "./icons.scss";
|
@use "./icons.scss";
|
||||||
|
|
||||||
|
@use "./global/buttons.scss";
|
||||||
|
|
||||||
@use "./sheets/partials/stat.scss";
|
@use "./sheets/partials/stat.scss";
|
||||||
@use "./sheets/partials/skill.scss";
|
@use "./sheets/partials/skill.scss";
|
||||||
@use "./sheets/partials/panel.scss";
|
@use "./sheets/partials/panel.scss";
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue