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

feat: use margin to make card padding more flexible

Browse source
This commit is contained in:
Kazhnuz 2021-07-28 16:55:07 +02:00
parent 72cb16d40a
commit dc9f6aedb0
2 changed files with 15 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -11,11 +11,20 @@ $card-smallpad: $lineheight_half;
@mixin card($size) { @mixin card($size) {
@include border-radius(); @include border-radius();
background-color: $color-background-alt; background-color: $color-background-alt;
box-shadow: $large-shadow; box-shadow: $large-shadow;
border: none; border: none;
margin:0; margin:0;
margin-bottom:$lineheight; margin-bottom:$lineheight;
padding: $size; & > * {
margin-left: $size;
margin-right: $size;
&:first-child {
margin-top: $size;
}
&:last-child {
margin-bottom: $size;
}
}
} }
@mixin card-header($size) { @mixin card-header($size) {
@ -27,13 +36,15 @@ $card-smallpad: $lineheight_half;
padding-right:0; padding-right:0;
padding-bottom: $size/2!important; padding-bottom: $size/2!important;
margin-bottom:$lineheight_half; margin-bottom:$lineheight_half;
margin-top:$lineheight_half;
line-height:$lineheight; line-height:$lineheight;
white-space: nowrap; white-space: nowrap;
@include border-radius();
position:relative; position:relative;
left: -$size*1.25; left: -$size*1.25;
width:95%; width:85%;
@include button-style($size); @include button-style($size);
@ -62,7 +73,6 @@ $card-smallpad: $lineheight_half;
&-body { &-body {
padding:0!important; padding:0!important;
margin:0!important;
} }
&-header { &-header {

2
src/static/index.html
View file

@ -52,7 +52,6 @@
<section class="sidebar"> <section class="sidebar">
<div class="card card-info"> <div class="card card-info">
<div class="card-header"><i class="fa fa-info"></i> Cémwha</div> <div class="card-header"><i class="fa fa-info"></i> Cémwha</div>
<p class="mwarea"><img src="/img/avatar.png" alt="Une armée de cochon regarde de manière menaçante." class="mwaimg" /></p>
<table style="width:100%" class="table-primary"> <table style="width:100%" class="table-primary">
<tr> <tr>
<th>PSEUDO</th> <th>PSEUDO</th>
@ -75,6 +74,7 @@
<td>LibreOffice & Krita</td> <td>LibreOffice & Krita</td>
</tr> </tr>
</table> </table>
<div class="card-header"><i class="fa fa-info"></i> Cétémwah</div>
</div> </div>
<!--=include includes/components/_sidebar.html --> <!--=include includes/components/_sidebar.html -->