kazhnuz/kazhnuz.css
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

improvement: refactor buttons

Browse source 
Now buttons is divided into three mixins, the layout, the style and the 
hover
This commit is contained in:
Kazhnuz 2021-07-26 09:10:43 +02:00
parent 9c42bf8321
commit 61e67c8b1f
3 changed files with 35 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/scss/_definitions.scss
View file

@ -105,10 +105,14 @@ $screen-xxl-min: 1600px;
border-radius: $border-radius $border-radius $border-radius $border-radius;
}
@mixin biseau($size) {
@mixin button-style($size) {
position: relative;
z-index:1;
overflow: visible;
@include borders();
@include border-radius();
background-color:transparent;
&:before {
content: " ";
@ -119,6 +123,5 @@ $screen-xxl-min: 1600px;
bottom:0;
z-index:-1;
transform: skewX(-15deg);
transition: background-color 0.3s;
}
}

45
src/scss/components/_buttons.scss
View file

@ -11,11 +11,13 @@ $button_large: $lineheight;
$button_small: $lineheight_quarter;
@mixin button($size) {
@include button-nobiseau($size);
@include biseau($size);
@include button-layout($size);
@include button-style($size);
@include button-hover();
font-weight: $fontweight_base;
}
@mixin button-nobiseau($size) {
@mixin button-layout($size) {
padding: $size;
padding-top: $size/3;
padding-bottom: $size/3;
@ -25,25 +27,27 @@ $button_small: $lineheight_quarter;
//font-size: 4.75mm;
line-height:$lineheight;
height:auto;
@include borders();
@include border-radius();
font-weight: $fontweight_base;
}
background-color:transparent;
@mixin button-hover() {
transition: background 0.3s, border .3s, box-shadow .3s, color .3s;
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
text-decoration:none;
background-color:transparent;
}
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
text-decoration:none;
background-color:transparent;
}
&:focus {
outline: none;
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0);
&:before {
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
outline: none;
}
}
&:focus {
outline: none;
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0);
&:before {
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
outline: none;
}
}
&:before {
transition: background-color 0.3s;
}
}
@mixin colorize-button($background-color) {
@ -97,7 +101,8 @@ $button_small: $lineheight_quarter;
}
.menu-label {
@include biseau($button_small);
@include button-style($button_small);
@include button-hover();
padding-left: $button_small;
padding-right: $button_small;
}

8
src/scss/components/_cards.scss
View file

@ -35,7 +35,7 @@ $card-smallpad: $lineheight_half;
width:95%;
@include biseau($size);
@include button-style($size);
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
font-family:$basefont;
@ -104,7 +104,8 @@ $card-smallpad: $lineheight_half;
text-overflow: ellipsis;
overflow:hidden;
@include biseau($lineheight_half);
@include button-style($lineheight_half);
@include button-hover();
strong {
font-weight: 900;
@ -128,7 +129,8 @@ $card-smallpad: $lineheight_half;
text-decoration:none;
color: $color-primary;
@include biseau($lineheight_half);
@include button-style($lineheight_half);
@include button-hover();
&:before {
background-color: darken($color-background-alt, 7.5%)