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

chore: add special panel mixins

Browse source
This commit is contained in:
Kazhnuz 2021-07-30 11:37:23 +02:00
parent c1751741f6
commit 048ce90daf
4 changed files with 70 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/scss/_mixins.scss
View file

@ -5,3 +5,4 @@
@import 'mixins/responsive';
@import 'mixins/borders';
@import 'mixins/shape';
@import 'mixins/panels';

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

@ -8,71 +8,6 @@
$card-bigpad: $lineheight;
$card-smallpad: $lineheight_half;
@mixin card($size) {
@include border-radius($card-radius);
background-color: $color-background-alt;
box-shadow: $large-shadow;
border: none;
margin:0;
margin-bottom:$lineheight;
& > * {
margin-left: $size;
margin-right: $size;
&:first-child {
margin-top: $size;
&.card-header {
margin-top:$card-header-margin;
}
}
&:last-child {
margin-bottom: $size;
&.card-header {
margin-bottom:$card-header-margin;
}
}
}
}
@mixin card-header($size) {
font-size:1.1em;
font-weight: $fontweight_big;
padding: $size/2;
padding-left:0;
padding-right:0;
padding-bottom: $size/2!important;
margin-bottom:$lineheight_half;
margin-top:$lineheight_half;
line-height:$lineheight;
white-space: nowrap;
position:relative;
left: -$size*1.25;
width:85%;
@include shape-style($size);
border-radius:0;
&:first-child {
border-top-left-radius: $card-radius;
border-top-right-radius: $card-radius;
}
&:last-child {
border-bottom-left-radius: $card-radius;
border-bottom-right-radius: $card-radius;
}
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
font-family:$basefont;
font-size:1rem;
padding:0px;
margin:0px;
color:$color-font-light;
font-weight: $fontweight_big;
line-height:$lineheight;
}
}
@mixin card-color($background-color) {
& .card-header, & .menu-header {
@include colorize-shape($background-color);
@ -81,7 +16,7 @@ $card-smallpad: $lineheight_half;
}
.card, .menu {
@include card($card-bigpad);
@include panel($card-bigpad);
display: flex;
flex-direction: column;
@ -90,7 +25,7 @@ $card-smallpad: $lineheight_half;
}
&-header {
@include card-header($card-bigpad);
@include panel-header($card-bigpad);
.fa {
margin-right: 0.5em;
}
@ -206,9 +141,9 @@ ul.card-list, .card > ul {
}
.smallcard, .toast {
@include card($card-smallpad);
@include panel($card-smallpad);
&-header {
@include card-header($card-bigpad);
@include panel-header($card-bigpad);
}
}

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

@ -94,7 +94,7 @@ $comment-height:30px;
.card-header {
font-family: $basefont;
font-size: 1rem;
@include card-header($lineheight_half);
@include panel-header($lineheight_half);
@include colorize-shape($color-primary);
color:getTextColorFromBackground($color-primary);
font-weight: $fontweight_big;

64
src/scss/mixins/_panels.scss Normal file
View file

@ -0,0 +1,64 @@
@mixin panel($size) {
@include border-radius($card-radius);
background-color: $color-background-alt;
box-shadow: $large-shadow;
border: none;
margin:0;
margin-bottom:$lineheight;
& > * {
margin-left: $size;
margin-right: $size;
&:first-child {
margin-top: $size;
&.card-header {
margin-top:$card-header-margin;
}
}
&:last-child {
margin-bottom: $size;
&.card-header {
margin-bottom:$card-header-margin;
}
}
}
}
@mixin panel-header($size) {
font-size:1.1em;
font-weight: $fontweight_big;
padding: $size/2;
padding-left:0;
padding-right:0;
padding-bottom: $size/2!important;
margin-bottom:$lineheight_half;
margin-top:$lineheight_half;
line-height:$lineheight;
white-space: nowrap;
position:relative;
left: -$size*1.25;
width:85%;
@include shape-style($size);
border-radius:0;
&:first-child {
border-top-left-radius: $card-radius;
border-top-right-radius: $card-radius;
}
&:last-child {
border-bottom-left-radius: $card-radius;
border-bottom-right-radius: $card-radius;
}
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
font-family:$basefont;
font-size:1rem;
padding:0px;
margin:0px;
color:$color-font-light;
font-weight: $fontweight_big;
line-height:$lineheight;
}
}