feat: improve character sheet

This commit is contained in:
Kazhnuz 2019-10-18 15:26:26 +02:00
parent 7b9acaab38
commit 5a71a0f467
5 changed files with 124 additions and 11 deletions

View file

@ -1,3 +1,4 @@
@charset "UTF-8";
/* /*
* 0. Palette and global colorization * 0. Palette and global colorization
* *
@ -604,6 +605,22 @@ mark {
} }
/* Table elements */ /* Table elements */
table {
border-collapse: collapse;
}
table, th, td {
border: 0;
padding: 0px;
margin: 0px;
}
th, td {
vertical-align: center;
padding-top: 0.325em;
padding-bottom: 0.325em;
}
th { th {
font-weight: 800; font-weight: 800;
} }
@ -977,6 +994,43 @@ ul.social li a:hover {
padding-bottom: 0.325rem; padding-bottom: 0.325rem;
} }
/* CARD LIST - Make a list part of a card */
ul.card-list {
padding: 0;
margin: 0;
}
ul.card-list li.list-element {
line-height: 1.5rem;
padding-right: 0.75rem;
padding-left: 0.325rem;
padding-top: 0.325rem;
padding-bottom: 0.325rem;
margin: 0;
}
.list-check li.list-element {
list-style: none;
}
.list-check li.list-element::before {
font-family: "ForkAwesome";
content: "";
padding-right: 0.75rem;
}
.list-cross li.list-element {
list-style: none;
}
.list-cross li.list-element::before {
font-family: "ForkAwesome";
content: "";
padding-right: 0.75rem;
}
.list-danger li.list-element::before {
color: #dc322f;
}
.list-success li.list-element::before {
color: #859900;
}
.smallcard, .toast { .smallcard, .toast {
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;
background-color: #eee8d5; background-color: #eee8d5;

File diff suppressed because one or more lines are too long

View file

@ -130,21 +130,21 @@
<div class="card card-success personnage-aime"> <div class="card card-success personnage-aime">
<h2 class="card-header">Aime</h2> <h2 class="card-header">Aime</h2>
<ul class="card-menu"> <ul class="card-list list-success list-check">
<li class="menu-element">Se balader</li> <li class="list-element">Se balader</li>
<li class="menu-element">Manger</li> <li class="list-element">Manger</li>
<li class="menu-element">Se cacher</li> <li class="list-element">Se cacher</li>
<li class="menu-element">Être happy de la vie</li> <li class="list-element">Être happy de la vie</li>
</ul> </ul>
</div> </div>
<div class="card card-danger personnage-dete"> <div class="card card-danger personnage-dete">
<h2 class="card-header">N'aime pas</h2> <h2 class="card-header">N'aime pas</h2>
<ul class="card-menu"> <ul class="card-list list-danger list-cross">
<li class="menu-element">Se faire poursuivre</li> <li class="list-element">Se faire poursuivre</li>
<li class="menu-element">L'empire</li> <li class="list-element">L'empire</li>
<li class="menu-element">La guerre</li> <li class="list-element">La guerre</li>
<li class="menu-element">Réussir à s'enfermer dans un coffre :<</li> <li class="list-element">Réussir à s'enfermer dans un coffre :<</li>
</ul> </ul>
</div> </div>

View file

@ -119,6 +119,49 @@ $card-smallpad: 0.75rem;
} }
} }
/* CARD LIST - Make a list part of a card */
@mixin list-symbol($symbol) {
li.list-element {
list-style: none;
&::before {
font-family: "ForkAwesome";
content:$symbol;
padding-right:0.75rem;
}
}
}
@mixin list-color($color) {
li.list-element {
&::before {
color: $color;
}
}
}
ul.card-list {
padding:0;
margin:0;
li.list-element {
line-height:1.5rem;
padding-right:0.75rem;
padding-left:0.325rem;
padding-top:0.325rem;
padding-bottom:0.325rem;
margin:0;
}
}
.list {
&-check {@include list-symbol("\f00c");}
&-cross {@include list-symbol("\f00d");}
&-danger{@include list-color($color-danger);}
&-success{@include list-color($color-success);}
}
.smallcard, .toast { .smallcard, .toast {
@include card($card-smallpad); @include card($card-smallpad);
&-header { &-header {

View file

@ -299,6 +299,22 @@ mark {
} }
} }
table {
border-collapse: collapse;
}
table, th, td {
border: 0;
padding:0px;
margin:0px;
}
th, td {
vertical-align:center;
padding-top: 0.325em;
padding-bottom: 0.325em;
}
th { th {
font-weight: $fontweight_hyper; font-weight: $fontweight_hyper;
} }