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

chore: separate mixins from definitions

Browse source
This commit is contained in:
Kazhnuz 2021-07-30 09:47:18 +02:00
parent 7b882ecb6b
commit 04c0f11331
8 changed files with 118 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

105
src/scss/_definitions.scss
View file

@ -36,108 +36,3 @@ $fontweight_hyper: 800;
$basefont: Open Sans, sans-serif;
$titlefont: Amatic SC, sans-serif;
// MIXINS RESPONSIVES
// Small tablets and large smartphones (landscape view)
$screen-sm-min: 576px;
// Small tablets (portrait view)
$screen-md-min: 768px;
// Tablets and small desktops
$screen-lg-min: 992px;
// Large tablets and desktops
$screen-xl-min: 1200px;
// Very large desktops
$screen-xxl-min: 1600px;
// Small devices
@mixin sm {
@media (min-width: #{$screen-sm-min}) {
@content;
}
}
// Medium devices
@mixin md {
@media (min-width: #{$screen-md-min}) {
@content;
}
}
// Large devices
@mixin lg {
@media (min-width: #{$screen-lg-min}) {
@content;
}
}
// Extra large devices
@mixin xl {
@media (min-width: #{$screen-xl-min}) {
@content;
}
}
// Extra large desktops
@mixin xxl {
@media (min-width: #{$screen-xxl-min}) {
@content;
}
}
// Custom devices
@mixin rwd($screen) {
@media (min-width: $screen+'px' ) {
@content;
}
}
// MIXINS AUTRES
@mixin borders() {
border: $border-size solid rgba(0, 0, 0, 0.3)
}
@mixin prefer-no-borders() {
&:not(:hover) {
border-color:transparent;
}
}
@mixin border-radius($border-radius) {
border-radius: $border-radius $border-radius $border-radius $border-radius;
}
@mixin shape-style($size) {
@include borders();
@include border-radius($btn-radius);
background-color:transparent;
// Biseau
position: relative;
z-index:1;
overflow: visible;
&:before {
content: " ";
position: absolute;
top:0;
left:-$size/2;
right:-$size/2;
bottom:0;
z-index:-1;
transform: skewX(-15deg);
}
}
@mixin colorize-shape($background-color) {
&:before {
background-color: $background-color;
}
}

7
src/scss/_mixins.scss Normal file
View file

@ -0,0 +1,7 @@
// MIXINS
// Include every mixins files
@import 'mixins/colors';
@import 'mixins/responsive';
@import 'mixins/borders';
@import 'mixins/shape';

8
src/scss/_palette.scss
View file

@ -46,6 +46,14 @@ $semantics: (
"success":"green",
"muted":"grey");
@function get-color($name) {
@if map-has-key($semantics, $name) {
@return map-get($palette, map-get($semantics, $name));
} @else {
@return map-get($palette, $name);
}
}
// **Couleurs du theme**
// Ne pas retirer ces couleurs, qui
// sont essentielle pour que le framework functionne.

15
src/scss/mixins/_borders.scss Normal file
View file

@ -0,0 +1,15 @@
// BORDERS AND BORDERS RADIUS MIXINS
@mixin borders() {
border: $border-size solid rgba(0, 0, 0, 0.3)
}
@mixin prefer-no-borders() {
&:not(:hover) {
border-color:transparent;
}
}
@mixin border-radius($border-radius) {
border-radius: $border-radius $border-radius $border-radius $border-radius;
}

8
src/scss/_colors.css → src/scss/mixins/_colors.css
View file

@ -6,14 +6,6 @@
*/
// FUNCTIONS TO GET MORE EASILY COLORS
@function get-color($name) {
@if map-has-key($semantics, $name) {
@return map-get($palette, map-get($semantics, $name));
} @else {
@return map-get($palette, $name);
}
}
@function list-colors() {
$newmap: map-merge($palette, $semantics);
@return $newmap;

59
src/scss/mixins/_responsive.scss Normal file
View file

@ -0,0 +1,59 @@
// MIXINS RESPONSIVES
// Small tablets and large smartphones (landscape view)
$screen-sm-min: 576px;
// Small tablets (portrait view)
$screen-md-min: 768px;
// Tablets and small desktops
$screen-lg-min: 992px;
// Large tablets and desktops
$screen-xl-min: 1200px;
// Very large desktops
$screen-xxl-min: 1600px;
// Small devices
@mixin sm {
@media (min-width: #{$screen-sm-min}) {
@content;
}
}
// Medium devices
@mixin md {
@media (min-width: #{$screen-md-min}) {
@content;
}
}
// Large devices
@mixin lg {
@media (min-width: #{$screen-lg-min}) {
@content;
}
}
// Extra large devices
@mixin xl {
@media (min-width: #{$screen-xl-min}) {
@content;
}
}
// Extra large desktops
@mixin xxl {
@media (min-width: #{$screen-xxl-min}) {
@content;
}
}
// Custom devices
@mixin rwd($screen) {
@media (min-width: $screen+'px' ) {
@content;
}
}

27
src/scss/mixins/_shape.scss Normal file
View file

@ -0,0 +1,27 @@
@mixin shape-style($size) {
@include borders();
@include border-radius($btn-radius);
background-color:transparent;
// Biseau
position: relative;
z-index:1;
overflow: visible;
&:before {
content: " ";
position: absolute;
top:0;
left:-$size/2;
right:-$size/2;
bottom:0;
z-index:-1;
transform: skewX(-15deg);
}
}
@mixin colorize-shape($background-color) {
&:before {
background-color: $background-color;
}
}

4
src/scss/style.scss
View file

@ -21,10 +21,10 @@
@import 'palette';
@import 'colors';
@import 'definitions';
@import 'mixins';
@import 'typography';
@import 'global';