feat: Resolve all deprecation warnings for sass
- Replace @import with @use and @forward - Only color function is used in _basic.scss for now - Change _all.scss to _index.scss - Modules use direct dependencies - Move @include from _config.scss to _common.scss, this was a long term mistake - Remove $color_list - Change basic_color()
This commit is contained in:
parent
867e96ea0a
commit
4e4f8814d3
26 changed files with 476 additions and 420 deletions
|
|
@ -1,3 +1,8 @@
|
|||
@use "../global/config";
|
||||
@use "../global/common";
|
||||
@use "../elements/interactive";
|
||||
@use "../mixins/media_query" as *;
|
||||
|
||||
@use "sass:map";
|
||||
|
||||
// Root
|
||||
|
|
@ -24,13 +29,13 @@ html {
|
|||
// -----------------------------------------------------------------------------
|
||||
body {
|
||||
position: relative;
|
||||
box-sizing: $box_sizing;
|
||||
box-sizing: config.$box_sizing;
|
||||
margin: 0;
|
||||
font-family: $family_text_basic;
|
||||
font-size: $size_text_basic;
|
||||
line-height: $line_text_basic;
|
||||
color: $color_text_basic;
|
||||
background-color: $color_back_basic;
|
||||
font-family: config.$family_text_basic;
|
||||
font-size: config.$size_text_basic;
|
||||
line-height: config.$line_text_basic;
|
||||
color: config.$color_text_basic;
|
||||
background-color: config.$color_back_basic;
|
||||
|
||||
*,
|
||||
::before,
|
||||
|
|
@ -41,7 +46,7 @@ body {
|
|||
&:hover {
|
||||
#mouse-overlay {
|
||||
background-color: transparent !important;
|
||||
transition: background-color $duration_basic $timing_basic 0s !important;
|
||||
transition: background-color config.$duration_basic config.$timing_basic 0s !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -57,28 +62,28 @@ section {
|
|||
}
|
||||
|
||||
.sec_main_center {
|
||||
width: $width_basic;
|
||||
width: config.$width_basic;
|
||||
margin: 0 auto;
|
||||
padding-top: $space_small;
|
||||
padding-top: config.$space_small;
|
||||
|
||||
@include forTabletPortraitUp {
|
||||
width: $width_small;
|
||||
width: config.$width_small;
|
||||
}
|
||||
|
||||
@include forTabletLandscapeUp {
|
||||
width: $width_medium;
|
||||
width: config.$width_medium;
|
||||
}
|
||||
|
||||
@include forBigDesktopUp {
|
||||
width: $width_large;
|
||||
width: config.$width_large;
|
||||
}
|
||||
}
|
||||
|
||||
.sec_main_status {
|
||||
border-top-width: $width_border_8;
|
||||
border-top-width: config.$width_border_8;
|
||||
border-top-style: solid;
|
||||
border-color: $color_border_basic;
|
||||
padding-top: $space_small;
|
||||
border-color: config.$color_border_basic;
|
||||
padding-top: config.$space_small;
|
||||
}
|
||||
|
||||
// Navigation
|
||||
|
|
@ -97,14 +102,14 @@ nav {
|
|||
// Aside element
|
||||
// -----------------------------------------------------------------------------
|
||||
aside {
|
||||
width: $width_aside_basic;
|
||||
width: config.$width_aside_basic;
|
||||
|
||||
&.right + .bside {
|
||||
margin-right: calc(#{$width_aside_basic} + #{$space_basic});
|
||||
margin-right: calc(#{config.$width_aside_basic} + #{config.$space_basic});
|
||||
}
|
||||
|
||||
&.left + .bside {
|
||||
margin-left: calc(#{$width_aside_basic} + #{$space_basic});
|
||||
margin-left: calc(#{config.$width_aside_basic} + #{config.$space_basic});
|
||||
}
|
||||
|
||||
&.right {
|
||||
|
|
@ -150,7 +155,7 @@ aside {
|
|||
}
|
||||
|
||||
ul.vertical li {
|
||||
margin-bottom: $space_half;
|
||||
margin-bottom: config.$space_half;
|
||||
|
||||
.a_button > i:last-child {
|
||||
margin-left: auto;
|
||||
|
|
@ -172,12 +177,12 @@ h6 {
|
|||
|
||||
h1 {
|
||||
@extend %head_1;
|
||||
margin: $space_large 0 $space_small;
|
||||
margin: config.$space_large 0 config.$space_small;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@extend %head_2;
|
||||
margin: $space_medium 0 $space_small;
|
||||
margin: config.$space_medium 0 config.$space_small;
|
||||
}
|
||||
|
||||
h1 + h1,
|
||||
|
|
@ -187,25 +192,25 @@ h2 + h2 {
|
|||
|
||||
h3 {
|
||||
@extend %head_3;
|
||||
margin: $space_double 0;
|
||||
margin: config.$space_double 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@extend %head_3;
|
||||
margin: $space_double 0;
|
||||
margin: config.$space_double 0;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@extend %head_4;
|
||||
margin: $space_double 0 $space_basic;
|
||||
margin: config.$space_double 0 config.$space_basic;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@extend %basic;
|
||||
margin: $space_basic 0;
|
||||
margin: config.$space_basic 0;
|
||||
text-transform: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -219,7 +224,7 @@ hgroup {
|
|||
}
|
||||
|
||||
& > p {
|
||||
margin-bottom: $space_small;
|
||||
margin-bottom: config.$space_small;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -227,7 +232,7 @@ hgroup {
|
|||
// -----------------------------------------------------------------------------
|
||||
header {
|
||||
&.io {
|
||||
z-index: map.get($z-indexes, "content-top");
|
||||
z-index: map.get(config.$z-indexes, "content-top");
|
||||
|
||||
& > *:last-child *:last-child {
|
||||
margin-right: 0;
|
||||
|
|
@ -258,11 +263,11 @@ header {
|
|||
}
|
||||
|
||||
.header_txt {
|
||||
margin-bottom: $space_small;
|
||||
border-bottom: $border_dotted;
|
||||
margin-bottom: config.$space_small;
|
||||
border-bottom: config.$border_dotted;
|
||||
|
||||
h1 {
|
||||
border-top: $border_basic;
|
||||
border-top: config.$border_basic;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -279,7 +284,7 @@ footer {
|
|||
button,
|
||||
span,
|
||||
div:not(.spacer) {
|
||||
padding: 0 $space_half !important;
|
||||
padding: 0 config.$space_half !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue