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

feat: separate button and card border radius

Browse source
This commit is contained in:
Kazhnuz 2021-07-28 17:57:21 +02:00
parent 7b39f8ae02
commit 5a49b025e4
3 changed files with 12 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/scss/_definitions.scss
View file

@ -25,7 +25,8 @@ $lineheight_quarter: $lineheight/4;
$card-header-margin: $lineheight;
$border-radius: 12px;
$card-radius: 12px;
$btn-radius: 0px;
$border-size: 0px;
$fontweight_big: 300;
@ -103,7 +104,7 @@ $screen-xxl-min: 1600px;
border: $border-size solid rgba(0, 0, 0, 0.3)
}
@mixin border-radius() {
@mixin border-radius($border-radius) {
border-radius: $border-radius $border-radius $border-radius $border-radius;
}
@ -112,7 +113,7 @@ $screen-xxl-min: 1600px;
z-index:1;
overflow: visible;
@include borders();
@include border-radius();
@include border-radius($btn-radius);
background-color:transparent;

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

@ -9,7 +9,7 @@ $card-bigpad: $lineheight;
$card-smallpad: $lineheight_half;
@mixin card($size) {
@include border-radius();
@include border-radius($card-radius);
background-color: $color-background-alt;
box-shadow: $large-shadow;
border: none;
@ -53,12 +53,12 @@ $card-smallpad: $lineheight_half;
@include button-style($size);
border-radius:0;
&:first-child {
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
border-top-left-radius: $card-radius;
border-top-right-radius: $card-radius;
}
&:last-child {
border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
border-bottom-left-radius: $card-radius;
border-bottom-right-radius: $card-radius;
}
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {

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

@ -79,7 +79,7 @@ $preview-height: 8*$lineheight;
padding-top: $card-header-margin/2;
backdrop-filter: none;
transition: background-color 0.3s;
@include border-radius();
@include border-radius($card-radius);
h1, h2, h3, h4, h5, h6 {
color: $color-font-light;
@ -119,7 +119,7 @@ $preview-height: 8*$lineheight;
background-size: cover;
min-height:100%;
min-width:100%;
@include border-radius();
@include border-radius($card-radius);
h1, h2, h3, h4, h5, h6 {
margin-bottom:0px;
@ -153,7 +153,7 @@ $preview-height: 8*$lineheight;
color: $color-font-light;
height:165px;
overflow: hidden;
@include border-radius();
@include border-radius($card-radius);
.metadata-pills {
height:165px;