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;
}
}
@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";
%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;
@include button;
&:hover, &.active {
background-color: var(--background-hover);
color: var(--text-hover);
@include button-hovered;
}
@include focus {
outline: var(--outline-focus) auto thick !important;
background-color: var(--background-base);
color: var(--text-base);
z-index: 1;
@include button-focused;
}
&:active {
background-color: var(--background-active);
color: var(--text-active);
@include button-active;
}
&[disabled], &.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);
}
}
.svg-icon {
display: inline-block;
width: 3rem;
height: 3rem;
&:only-child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
@include button-disabled;
}
}