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; $card-header-margin: $lineheight;
$border-radius: 12px; $card-radius: 12px;
$btn-radius: 0px;
$border-size: 0px; $border-size: 0px;
$fontweight_big: 300; $fontweight_big: 300;
@ -103,7 +104,7 @@ $screen-xxl-min: 1600px;
border: $border-size solid rgba(0, 0, 0, 0.3) 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; border-radius: $border-radius $border-radius $border-radius $border-radius;
} }
@ -112,7 +113,7 @@ $screen-xxl-min: 1600px;
z-index:1; z-index:1;
overflow: visible; overflow: visible;
@include borders(); @include borders();
@include border-radius(); @include border-radius($btn-radius);
background-color:transparent; background-color:transparent;

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

@ -9,7 +9,7 @@ $card-bigpad: $lineheight;
$card-smallpad: $lineheight_half; $card-smallpad: $lineheight_half;
@mixin card($size) { @mixin card($size) {
@include border-radius(); @include border-radius($card-radius);
background-color: $color-background-alt; background-color: $color-background-alt;
box-shadow: $large-shadow; box-shadow: $large-shadow;
border: none; border: none;
@ -53,12 +53,12 @@ $card-smallpad: $lineheight_half;
@include button-style($size); @include button-style($size);
border-radius:0; border-radius:0;
&:first-child { &:first-child {
border-top-left-radius: $border-radius; border-top-left-radius: $card-radius;
border-top-right-radius: $border-radius; border-top-right-radius: $card-radius;
} }
&:last-child { &:last-child {
border-bottom-left-radius: $border-radius; border-bottom-left-radius: $card-radius;
border-bottom-right-radius: $border-radius; border-bottom-right-radius: $card-radius;
} }
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 { 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; padding-top: $card-header-margin/2;
backdrop-filter: none; backdrop-filter: none;
transition: background-color 0.3s; transition: background-color 0.3s;
@include border-radius(); @include border-radius($card-radius);
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
color: $color-font-light; color: $color-font-light;
@ -119,7 +119,7 @@ $preview-height: 8*$lineheight;
background-size: cover; background-size: cover;
min-height:100%; min-height:100%;
min-width:100%; min-width:100%;
@include border-radius(); @include border-radius($card-radius);
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
margin-bottom:0px; margin-bottom:0px;
@ -153,7 +153,7 @@ $preview-height: 8*$lineheight;
color: $color-font-light; color: $color-font-light;
height:165px; height:165px;
overflow: hidden; overflow: hidden;
@include border-radius(); @include border-radius($card-radius);
.metadata-pills { .metadata-pills {
height:165px; height:165px;