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;
|
||||
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 "./icons.scss";
|
||||
|
||||
@use "./global/buttons.scss";
|
||||
|
||||
@use "./sheets/partials/stat.scss";
|
||||
@use "./sheets/partials/skill.scss";
|
||||
@use "./sheets/partials/panel.scss";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue