chore: split utility classes

This commit is contained in:
Kazhnuz 2021-07-30 10:51:44 +02:00
parent c25ec4a4af
commit 70fb39159f
9 changed files with 79 additions and 27 deletions

View file

@ -13,17 +13,6 @@
@import 'components/previews';
.flex-that {
display: flex;
justify-content: space-between;
}
.bg {
@each $name, $color in list-colors() {
&-#{$name} { @include background-color(get-color($name)); }
}
}
strong.btn-fake {
@include button($button_large);
@include button-fullcontrol(transparent, transparent, rgba(0,0,0,1));
@ -43,15 +32,10 @@ a.article-nav-link-wrap {
@include button-color($color-info);
}
.pigimg, .mb {
.pigimg {
padding-bottom:1.5rem;
}
.screen-reader-text {
visibility: collapse;
font-size:0;
}
nav.pagination {
padding-bottom:1.5rem;
.nav-links {

View file

@ -21,16 +21,6 @@ $color-header-back: get-color("skyblue");
margin:auto;
}
.no-pills {
list-style:none;
}
.align {
&-center {text-align: center;}
&-left {text-align: left;}
&-right {text-align: right;}
}
/* ------------------ HEADERS ------------------- */
#page-header {

3
src/scss/_utils.scss Normal file
View file

@ -0,0 +1,3 @@
/* 1. Utils
** All the utilities class of the stylesheet
*/

View file

@ -21,6 +21,8 @@
@import 'core';
@import 'utils';
@import 'global';
@import 'drawing';

View file

@ -0,0 +1,8 @@
/* 1.0 - Accessibility classes
* Some classes to help accessibility
**/
.screen-reader-text {
visibility: collapse;
font-size:0;
}

View file

@ -0,0 +1,14 @@
/* 1.1 - Alignement classes
* Handle easily alignement and flexboxes
**/
.flex-that {
display: flex;
justify-content: space-between;
}
.align {
&-center {text-align: center;}
&-left {text-align: left;}
&-right {text-align: right;}
}

View file

@ -0,0 +1,9 @@
/* 1.2 - Colorization classes
* Colorize some aspect of a class
**/
.bg {
@each $name, $color in list-colors() {
&-#{$name} { @include background-color(get-color($name)); }
}
}

View file

@ -0,0 +1,7 @@
/* 1.3 - List classes
* Handle more easily list
**/
.no-pills {
list-style:none;
}

View file

@ -0,0 +1,35 @@
/* 1.3 - Sizing classes
* Handle sizing and margin
**/
.mb {
margin-bottom:$lineheight;
}
.mr {
margin-right:$lineheight;
}
.ml {
margin-left:$lineheight;
}
.mt {
margin-top:$lineheight;
}
.pb {
padding-bottom:$lineheight;
}
.pr {
padding-right:$lineheight;
}
.pl {
padding-left:$lineheight;
}
.pt {
padding-top:$lineheight;
}