Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Split button placeholder into mixins for easier use with non-button elements

Browse Source
This commit is contained in:
James Lyne 2021-05-27 17:34:14 +01:00
parent 42d14ca5c9
commit 72772881b6
2 changed files with 71 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/scss/_mixins.scss
View File

@ -10,3 +10,69 @@
@content; @content;
} }
} }
@mixin button {
appearance: none;
border: none;
box-shadow: none;
background-color: var(--background-base);
color: var(--text-base);
border-radius: var(--border-radius);
cursor: pointer;
display: block;
text-align: center;
position: relative;
transition: color 0.2s ease-in, background-color 0.2s ease-in;
font-size: 1.6rem;
font-family: Raleway, sans-serif;
box-sizing: border-box;
.svg-icon {
display: inline-block;
width: 3rem;
height: 3rem;
pointer-events: none;
&:only-child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
}
}
@mixin button-hovered {
background-color: var(--background-hover);
color: var(--text-hover);
}
@mixin button-focused {
outline: var(--outline-focus) auto thick !important;
background-color: var(--background-base);
color: var(--text-base);
z-index: 1;
}
@mixin button-active {
background-color: var(--background-active);
color: var(--text-active);
}
@mixin button-disabled {
background-color: var(--background-disabled);
color: var(--text-disabled);
cursor: not-allowed;
&:hover, &:active {
background-color: var(--background-disabled);
color: var(--text-disabled);
}
@include focus {
background-color: var(--background-disabled);
color: var(--text-disabled);
}
}

54
src/scss/_placeholders.scss
View File

@ -17,66 +17,22 @@
@import "mixins"; @import "mixins";
%button { %button {
appearance: none; @include button;
border: none;
box-shadow: none;
background-color: var(--background-base);
color: var(--text-base);
border-radius: var(--border-radius);
cursor: pointer;
display: block;
text-align: center;
position: relative;
transition: color 0.2s ease-in, background-color 0.2s ease-in;
font-size: 1.6rem;
font-family: Raleway, sans-serif;
&:hover, &.active { &:hover, &.active {
background-color: var(--background-hover); @include button-hovered;
color: var(--text-hover);
} }
@include focus { @include focus {
outline: var(--outline-focus) auto thick !important; @include button-focused;
background-color: var(--background-base);
color: var(--text-base);
z-index: 1;
} }
&:active { &:active {
background-color: var(--background-active); @include button-active;
color: var(--text-active);
} }
&[disabled], &.disabled { &[disabled], &.disabled {
background-color: var(--background-disabled); @include button-disabled;
color: var(--text-disabled);
cursor: not-allowed;
&:hover, &:active {
background-color: var(--background-disabled);
color: var(--text-disabled);
}
@include focus {
background-color: var(--background-disabled);
color: var(--text-disabled);
}
}
.svg-icon {
display: inline-block;
width: 3rem;
height: 3rem;
&:only-child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
} }
} }