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

chore: rename the common shape mixins

Browse source
This commit is contained in:
Kazhnuz 2021-07-28 18:05:39 +02:00
parent 5a49b025e4
commit 15d58223f3
4 changed files with 21 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/scss/_definitions.scss
View file

@ -108,15 +108,16 @@ $screen-xxl-min: 1600px;
border-radius: $border-radius $border-radius $border-radius $border-radius;
}
@mixin button-style($size) {
position: relative;
z-index:1;
overflow: visible;
@mixin shape-style($size) {
@include borders();
@include border-radius($btn-radius);
background-color:transparent;
// Biseau
position: relative;
z-index:1;
overflow: visible;
&:before {
content: " ";
position: absolute;
@ -128,3 +129,9 @@ $screen-xxl-min: 1600px;
transform: skewX(-15deg);
}
}
@mixin colorize-shape($background-color) {
&:before {
background-color: $background-color;
}
}

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

@ -12,7 +12,7 @@ $button_small: $lineheight_quarter;
@mixin button($size) {
@include button-layout($size);
@include button-style($size);
@include shape-style($size);
@include button-hover();
font-weight: $fontweight_base;
}
@ -50,22 +50,16 @@ $button_small: $lineheight_quarter;
}
}
@mixin colorize-button($background-color) {
&:before {
background-color: $background-color;
}
}
@mixin button-fullcontrol($background-color, $hover-color, $text-color) {
@include colorize-button($background-color);
@include colorize-shape($background-color);
color:$text-color;
&:visited {
@include colorize-button($background-color);
@include colorize-shape($background-color);
color:$text-color;
}
&, &:visited, &:not(.disabled):not(:disabled) {
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
@include colorize-button($hover-color);
@include colorize-shape($hover-color);
color:lighten($text-color, 5%);
}
}
@ -101,7 +95,7 @@ $button_small: $lineheight_quarter;
}
.menu-label {
@include button-style($button_small);
@include shape-style($button_small);
@include button-hover();
padding-left: $button_small;
padding-right: $button_small;

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

@ -50,7 +50,7 @@ $card-smallpad: $lineheight_half;
width:85%;
@include button-style($size);
@include shape-style($size);
border-radius:0;
&:first-child {
border-top-left-radius: $card-radius;
@ -74,7 +74,7 @@ $card-smallpad: $lineheight_half;
@mixin card-color($background-color) {
& .card-header, & .menu-header {
@include colorize-button($background-color);
@include colorize-shape($background-color);
color:getTextColorFromBackground($background-color);
}
}
@ -125,7 +125,7 @@ $card-smallpad: $lineheight_half;
text-overflow: ellipsis;
overflow:hidden;
@include button-style($lineheight_half);
@include shape-style($lineheight_half);
@include button-hover();
strong {
@ -143,7 +143,7 @@ $card-smallpad: $lineheight_half;
}
a, a:visited {
@include button-style($lineheight_half);
@include shape-style($lineheight_half);
@include button-hover();
@include button-fullcontrol(transparent, darken($color-background-alt, 7.5%), $color-primary);
}

2
src/scss/components/_previews.scss
View file

@ -92,7 +92,7 @@ $preview-height: 8*$lineheight;
font-family: $basefont;
font-size: 1rem;
@include card-header($lineheight_half);
@include colorize-button($color-primary);
@include colorize-shape($color-primary);
color:getTextColorFromBackground($color-primary);
font-weight: $fontweight_big;
margin-top:0px;