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,47 +1,59 @@
|
|||
@use "../../global/config";
|
||||
@use "../../mixins/media_query" as *;
|
||||
|
||||
.query_goingLarge {
|
||||
@include goingLarge($screen_tiny) {};
|
||||
@include goingLarge(config.$screen_tiny) {
|
||||
}
|
||||
;
|
||||
}
|
||||
|
||||
.query_goingSmall {
|
||||
@include goingSmall($screen_gigantic) {};
|
||||
@include goingSmall(config.$screen_gigantic) {
|
||||
}
|
||||
;
|
||||
}
|
||||
|
||||
.query_phoneUp {
|
||||
@include forPhoneUp {}
|
||||
@include forPhoneUp {
|
||||
}
|
||||
}
|
||||
|
||||
.query_phoneOnly {
|
||||
@include forPhoneOnly {}
|
||||
@include forPhoneOnly {
|
||||
}
|
||||
}
|
||||
|
||||
.query_tabletPortaitOnly {
|
||||
@include forTabletPortraitOnly {
|
||||
}
|
||||
.query_tabletPortraitOnly {
|
||||
@include forTabletPortraitOnly {
|
||||
}
|
||||
}
|
||||
|
||||
.query_tabletPortraitUp {
|
||||
@include forTabletPortraitUp {
|
||||
}
|
||||
@include forTabletPortraitUp {
|
||||
}
|
||||
}
|
||||
|
||||
.query_tabletLandscapeOnly {
|
||||
@include forTabletLandscapeOnly {}
|
||||
@include forTabletLandscapeOnly {
|
||||
}
|
||||
}
|
||||
|
||||
.query_tabletLandscapeUp {
|
||||
@include forTabletLandscapeUp {}
|
||||
@include forTabletLandscapeUp {
|
||||
}
|
||||
}
|
||||
|
||||
.query_desktopOnly {
|
||||
@include forDesktopOnly {
|
||||
}
|
||||
@include forDesktopOnly {
|
||||
}
|
||||
}
|
||||
|
||||
.query_desktopUp {
|
||||
@include forDesktopUp {
|
||||
}
|
||||
@include forDesktopUp {
|
||||
}
|
||||
}
|
||||
|
||||
.query_bigDesktopUp {
|
||||
@include forBigDesktopUp {}
|
||||
@include forBigDesktopUp {
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
// Custom extends and mixins
|
||||
// ------------------------------------------------------------------------------
|
||||
@import "mixins";
|
||||
@import "extends";
|
||||
@use "mixins";
|
||||
@use "extends";
|
||||
@use "../../global/config";
|
||||
|
||||
// Editor module styles
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
%wip {
|
||||
border-right: $space_basic solid rgba(crimson, 0.8);
|
||||
border-right: config.$space_basic solid rgba(crimson, 0.8);
|
||||
background-color: rgba(crimson, 0.1) !important;
|
||||
}
|
||||
.wip {
|
||||
|
|
|
|||
|
|
@ -1,30 +1,38 @@
|
|||
@use "sass:color";
|
||||
@use "sass:math";
|
||||
|
||||
@use "../../global/config";
|
||||
@use "../../global/common";
|
||||
@use "../../functions/color" as *;
|
||||
@use "../../mixins/vendor";
|
||||
|
||||
%expose_after {
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 48px;
|
||||
background-color: rgba($delta_color, 0.1) !important;
|
||||
background-color: rgba(basic_color(delta), 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
%expose_before {
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 48px;
|
||||
background-color: rgba($delta_color, 0.1) !important;
|
||||
background-color: rgba(basic_color(delta), 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
%expose {
|
||||
&::before, &::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 48px;
|
||||
background-color: rgba($delta_color, 0.1) !important;
|
||||
background-color: rgba(basic_color(delta), 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// %exp {
|
||||
// }
|
||||
%exp_hidden {
|
||||
|
|
@ -37,39 +45,42 @@
|
|||
|
||||
.exp_overlay {
|
||||
@extend %full_parent;
|
||||
background-color: color.adjust($alpha_color, $alpha: -0.6);
|
||||
background-color: color.adjust(basic_color(alpha), $alpha: -0.6);
|
||||
}
|
||||
|
||||
.exp_pop {
|
||||
@extend %exp_hidden !optional;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: $space_large;
|
||||
left: $space_large;
|
||||
padding: $space_half;
|
||||
border: 4px solid $color_back_basic;
|
||||
top: config.$space_large;
|
||||
left: config.$space_large;
|
||||
padding: config.$space_half;
|
||||
border: 4px solid config.$color_back_basic;
|
||||
border-radius: 4px;
|
||||
background-color: $color_back_basic;
|
||||
background-color: config.$color_back_basic;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.exp_marker_pop {
|
||||
position: absolute;
|
||||
top: math.div(-$size_text_basic, 4) * 3;
|
||||
right: math.div(-$size_text_basic, 2);
|
||||
width: $size_text_basic;
|
||||
height: $size_text_basic;
|
||||
border: $space_tiny solid $color_highlight_basic;
|
||||
border-radius: $size_text_basic;
|
||||
color: $color_highlight_basic;
|
||||
background-color: $color_darkest;
|
||||
top: math.div(-(config.$size_text_basic), 4) * 3;
|
||||
right: math.div(-(config.$size_text_basic), 2);
|
||||
width: config.$size_text_basic;
|
||||
height: config.$size_text_basic;
|
||||
border: config.$space_tiny solid config.$color_highlight_basic;
|
||||
border-radius: config.$size_text_basic;
|
||||
color: config.$color_highlight_basic;
|
||||
background-color: config.$color_darkest;
|
||||
}
|
||||
|
||||
.exp_expose {
|
||||
@extend %expose !optional;
|
||||
}
|
||||
|
||||
.exp_expose_pre {
|
||||
@extend %expose_after;
|
||||
}
|
||||
|
||||
.exp_expose_post {
|
||||
@extend %expose_before;
|
||||
}
|
||||
|
|
@ -81,21 +92,25 @@
|
|||
// padding: $space_basic $space_basic * 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.exp_help_btn {
|
||||
display: table;
|
||||
right: $space_double;
|
||||
bottom: $space_double;
|
||||
background-color: rgba($color_darkest, 0.4);
|
||||
right: config.$space_double;
|
||||
bottom: config.$space_double;
|
||||
background-color: rgba(config.$color_darkest, 0.4);
|
||||
|
||||
&:hover {
|
||||
background-color: $color_brightest;
|
||||
background-color: config.$color_brightest;
|
||||
|
||||
> .span_solo {
|
||||
color: $color_darkest;
|
||||
color: config.$color_darkest;
|
||||
}
|
||||
}
|
||||
|
||||
.span_solo {
|
||||
display: table-cell;
|
||||
color: rgba($color_brightest, 0.8);
|
||||
font-family: $family_text_mono;
|
||||
color: rgba(config.$color_brightest, 0.8);
|
||||
font-family: config.$family_text_mono;
|
||||
font-size: 1.4em;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
|
@ -103,13 +118,12 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
.expose_height {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgba($delta_color, 0.1) !important;
|
||||
@include vendor-prefix(transition, height 0.5s ease);
|
||||
background-color: rgba(basic_color(delta), 0.1) !important;
|
||||
@include vendor.vendor-prefix(transition, height 0.5s ease);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
@use "../../global/config";
|
||||
@use "../../global/common";
|
||||
@use "../../global/typography";
|
||||
@use "../../elements/interactive";
|
||||
|
||||
input[type="range"] {
|
||||
accent-color: $color_text_io;
|
||||
accent-color: config.$color_text_io;
|
||||
}
|
||||
|
||||
header,
|
||||
|
|
@ -51,7 +56,7 @@ footer {
|
|||
header,
|
||||
aside {
|
||||
&.io {
|
||||
padding: $space_basic;
|
||||
padding: config.$space_basic;
|
||||
|
||||
textarea {
|
||||
@extend .io_textarea;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,12 @@
|
|||
@use "../../global/config";
|
||||
@use "../../global/common";
|
||||
@use "../../elements/sections";
|
||||
@use "../../functions/color" as *;
|
||||
|
||||
.body_status {
|
||||
@extend .sec_main_status;
|
||||
height: 100vh;
|
||||
border-color: $foxtrot_color;
|
||||
border-color: basic_color(foxtrot);
|
||||
|
||||
.main_site {
|
||||
@extend .wrap_center;
|
||||
|
|
@ -13,7 +18,7 @@
|
|||
}
|
||||
& > h1 + h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: $space_small;
|
||||
margin-bottom: config.$space_small;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
@use "../../global/config";
|
||||
@use "../../global/common";
|
||||
|
||||
nav {
|
||||
|
||||
ul,
|
||||
|
|
@ -6,7 +9,7 @@ nav {
|
|||
}
|
||||
|
||||
li {
|
||||
margin-bottom: $space_basic;
|
||||
margin-bottom: config.$space_basic;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -16,12 +19,12 @@ nav {
|
|||
@extend .overflow;
|
||||
|
||||
ul {
|
||||
margin: $space_basic 0;
|
||||
margin: config.$space_basic 0;
|
||||
}
|
||||
|
||||
li {
|
||||
@extend .float_space_left;
|
||||
margin-right: $space_basic;
|
||||
margin-right: config.$space_basic;
|
||||
margin-bottom: 0;
|
||||
|
||||
&:last-child {
|
||||
|
|
@ -33,28 +36,28 @@ nav {
|
|||
|
||||
.nav_right {
|
||||
float: right;
|
||||
margin-left: $space_basic;
|
||||
margin-left: config.$space_basic;
|
||||
|
||||
.align_parent {
|
||||
margin-right: $space_basic * -1;
|
||||
margin-right: config.$space_basic * -1;
|
||||
}
|
||||
}
|
||||
|
||||
.nav_separate {
|
||||
li {
|
||||
position: relative;
|
||||
padding-left: $space_tiny;
|
||||
padding-left: config.$space_tiny;
|
||||
|
||||
&:not(:first-child) {
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: $space_tiny;
|
||||
width: config.$space_tiny;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: $color_border_basic;
|
||||
background-color: config.$color_border_basic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -66,17 +69,17 @@ nav {
|
|||
position: relative;
|
||||
|
||||
&:first-child {
|
||||
padding-left: $space_basic * 2 + $space_tiny;
|
||||
padding-left: config.$space_basic * 2 + config.$space_tiny;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: $space_tiny;
|
||||
width: config.$space_tiny;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: $color_front_basic;
|
||||
margin: 0 $space_basic;
|
||||
background-color: config.$color_front_basic;
|
||||
margin: 0 config.$space_basic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -97,11 +100,11 @@ nav {
|
|||
|
||||
.nav_column {
|
||||
position: relative;
|
||||
margin: $space_basic 0;
|
||||
margin: config.$space_basic 0;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
margin: 0 $space_large;
|
||||
margin: 0 config.$space_large;
|
||||
|
||||
li {
|
||||
flex: auto;
|
||||
|
|
@ -119,11 +122,11 @@ nav {
|
|||
position: fixed;
|
||||
// display: table;
|
||||
// width: 3em;
|
||||
right: $space_half;
|
||||
bottom: $space_double;
|
||||
right: config.$space_half;
|
||||
bottom: config.$space_double;
|
||||
|
||||
ul {
|
||||
margin: $space_basic 0;
|
||||
margin: config.$space_basic 0;
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
@ -145,7 +148,7 @@ nav {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color_action_basic;
|
||||
background-color: config.$color_action_basic;
|
||||
}
|
||||
}
|
||||
.sprite_img {
|
||||
|
|
@ -163,8 +166,8 @@ nav {
|
|||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: rgba($color_text_basic, 0.2);
|
||||
color: $color_text_basic;
|
||||
background-color: rgba(config.$color_text_basic, 0.2);
|
||||
color: config.$color_text_basic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
@use "sass:list";
|
||||
|
||||
@import "mixins";
|
||||
@import "extends";
|
||||
@use "../../global/config";
|
||||
@use "../../global/typography";
|
||||
@use "mixins";
|
||||
@use "extends";
|
||||
|
||||
// Print module styles
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
%paper {
|
||||
background-color: $color_front_basic;
|
||||
background-color: config.$color_front_basic;
|
||||
}
|
||||
|
||||
$a4: ".dina4" 1.2cm 1.2cm 1.2cm 2.4cm;
|
||||
|
|
@ -17,7 +19,7 @@ $a6: ".dina6" 0 0 0 1.2cm;
|
|||
$din: $a4, $a5, $a6;
|
||||
|
||||
.print_body {
|
||||
font-size: $size_text_print;
|
||||
font-size: config.$size_text_print;
|
||||
margin: 10vh 20vw;
|
||||
|
||||
@page {
|
||||
|
|
@ -25,7 +27,7 @@ $din: $a4, $a5, $a6;
|
|||
margin: 1.2cm;
|
||||
}
|
||||
|
||||
@page:first {
|
||||
@page :first {
|
||||
size: A4;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -38,9 +40,11 @@ $din: $a4, $a5, $a6;
|
|||
right: list.nth($space, 3);
|
||||
left: list.nth($space, 5);
|
||||
}
|
||||
|
||||
.page_head {
|
||||
top: list.nth($space, 2);
|
||||
}
|
||||
|
||||
.page_foot {
|
||||
bottom: list.nth($space, 4);
|
||||
}
|
||||
|
|
@ -86,15 +90,18 @@ $din: $a4, $a5, $a6;
|
|||
line-height: 1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
p:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.page_content {
|
||||
margin-top: 10cm;
|
||||
margin-bottom: 2cm;
|
||||
}
|
||||
margin: $space_small auto;
|
||||
|
||||
margin: config.$space_small auto;
|
||||
}
|
||||
|
||||
.page_title, .page_date {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,17 @@
|
|||
@use "../../global/config";
|
||||
@use "../../global/typography";
|
||||
@use "../../functions/color" as *;
|
||||
|
||||
.table_link {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
table-layout: auto;
|
||||
|
||||
tbody {
|
||||
border-bottom: $border_basic;
|
||||
border-bottom: config.$border_basic;
|
||||
|
||||
&:hover {
|
||||
background-color: $color_bright;
|
||||
background-color: config.$color_bright;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -26,11 +30,11 @@
|
|||
}
|
||||
|
||||
.cell_link {
|
||||
padding-right: $space_basic;
|
||||
padding-left: $space_basic;
|
||||
padding-right: config.$space_basic;
|
||||
padding-left: config.$space_basic;
|
||||
|
||||
&:hover {
|
||||
background-color: $foxtrot_color;
|
||||
background-color: basic_color(foxtrot);
|
||||
|
||||
a:first-child {
|
||||
display: none;
|
||||
|
|
@ -38,7 +42,7 @@
|
|||
|
||||
a:last-child {
|
||||
display: block;
|
||||
color: $color_highlight_basic;
|
||||
color: config.$color_highlight_basic;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -58,8 +62,8 @@
|
|||
}
|
||||
|
||||
.cell_text {
|
||||
padding-right: $space_basic;
|
||||
padding-left: $space_basic;
|
||||
padding-right: config.$space_basic;
|
||||
padding-left: config.$space_basic;
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue