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,8 +1,13 @@
|
|||
// Common styles for global usage
|
||||
// -----------------------------------------------------------------------------
|
||||
@use "sass:math";
|
||||
@use "sass:color";
|
||||
|
||||
@use "config";
|
||||
@use "../functions/color" as *;
|
||||
@use "../mixins/media_query" as *;
|
||||
@use "../mixins/user_agent" as *;
|
||||
|
||||
// Common styles for global usage
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
// General classes
|
||||
// -----------------------------------------------------------------------------
|
||||
|
|
@ -16,13 +21,13 @@
|
|||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: $box_sizing;
|
||||
box-sizing: config.$box_sizing;
|
||||
}
|
||||
}
|
||||
|
||||
%size_io_button {
|
||||
border: $width_border_io solid transparent;
|
||||
padding: $padding_basic;
|
||||
border: config.$width_border_io solid transparent;
|
||||
padding: config.$padding_basic;
|
||||
}
|
||||
|
||||
.di_none {
|
||||
|
|
@ -52,10 +57,10 @@
|
|||
margin-left: 37.5%;
|
||||
}
|
||||
|
||||
@each $size, $variable in (basic, #{$space_basic}),
|
||||
(small, #{$space_small}),
|
||||
(medium, #{$space_medium}),
|
||||
(large, #{$space_large}) {
|
||||
@each $size, $variable in (basic, #{config.$space_basic}),
|
||||
(small, #{config.$space_small}),
|
||||
(medium, #{config.$space_medium}),
|
||||
(large, #{config.$space_large}) {
|
||||
.space_top_#{$size} {
|
||||
margin-top: $variable;
|
||||
}
|
||||
|
|
@ -109,22 +114,22 @@
|
|||
|
||||
.wrap_center {
|
||||
& > * {
|
||||
margin-right: math.div((100% - $width_basic), 2);
|
||||
margin-left: math.div((100% - $width_basic), 2);
|
||||
margin-right: math.div((100% - config.$width_basic), 2);
|
||||
margin-left: math.div((100% - config.$width_basic), 2);
|
||||
|
||||
@include forTabletPortraitUp {
|
||||
margin-right: math.div((100% - $width_small), 2);
|
||||
margin-left: math.div((100% - $width_small), 2);
|
||||
margin-right: math.div((100% - config.$width_small), 2);
|
||||
margin-left: math.div((100% - config.$width_small), 2);
|
||||
}
|
||||
|
||||
@include forTabletLandscapeUp {
|
||||
margin-right: math.div((100% - $width_medium), 2);
|
||||
margin-left: math.div((100% - $width_medium), 2);
|
||||
margin-right: math.div((100% - config.$width_medium), 2);
|
||||
margin-left: math.div((100% - config.$width_medium), 2);
|
||||
}
|
||||
|
||||
@include forBigDesktopUp {
|
||||
margin-right: math.div((100% - $width_large), 2);
|
||||
margin-left: math.div((100% - $width_large), 2);
|
||||
margin-right: math.div((100% - config.$width_large), 2);
|
||||
margin-left: math.div((100% - config.$width_large), 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -155,7 +160,7 @@
|
|||
|
||||
.float_space_left {
|
||||
float: left;
|
||||
margin-right: $space_small;
|
||||
margin-right: config.$space_small;
|
||||
}
|
||||
|
||||
.float_half_size {
|
||||
|
|
@ -183,14 +188,14 @@
|
|||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
gap: $space_half $space_basic;
|
||||
gap: config.$space_half config.$space_basic;
|
||||
}
|
||||
|
||||
%flex-column,
|
||||
%flex-row {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: $space_basic;
|
||||
gap: config.$space_basic;
|
||||
}
|
||||
|
||||
%flex-column {
|
||||
|
|
@ -252,31 +257,31 @@
|
|||
|
||||
.pos_full_view {
|
||||
@extend %viewport_fixed;
|
||||
background-color: rgba($alpha_color, 0.5);
|
||||
background-color: rgba(basic_color(alpha), 0.5);
|
||||
}
|
||||
|
||||
.pos_full_page {
|
||||
@extend %full_parent;
|
||||
background-color: rgba($charlie_color, 0.25);
|
||||
background-color: rgba(basic_color(charlie), 0.25);
|
||||
}
|
||||
|
||||
.hover_back_change {
|
||||
background-color: $color_darker;
|
||||
background-color: config.$color_darker;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: $color_back_basic;
|
||||
background-color: config.$color_back_basic;
|
||||
}
|
||||
}
|
||||
|
||||
#mouse-overlay {
|
||||
@extend %viewport_fixed;
|
||||
z-index: $z_heaven;
|
||||
transition: background-color $duration_long $timing_basic $duration_long;
|
||||
z-index: config.$z_heaven;
|
||||
transition: background-color config.$duration_long config.$timing_basic config.$duration_long;
|
||||
pointer-events: none;
|
||||
|
||||
&.active {
|
||||
background-color: color.adjust($color_darkest, $alpha: -0.5);
|
||||
background-color: color.adjust(config.$color_darkest, $alpha: -0.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -284,11 +289,11 @@
|
|||
// Colors
|
||||
// -----------------------------------------------------------------------------
|
||||
.txt_color_light {
|
||||
color: $color_brighter;
|
||||
color: config.$color_brighter;
|
||||
}
|
||||
|
||||
.txt_color_dark {
|
||||
color: $color_darker;
|
||||
color: config.$color_darker;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -311,7 +316,7 @@
|
|||
}
|
||||
|
||||
.txt_hero {
|
||||
font-size: $size_hero;
|
||||
font-size: config.$size_hero;
|
||||
}
|
||||
|
||||
.txt_center {
|
||||
|
|
@ -343,8 +348,12 @@
|
|||
}
|
||||
|
||||
.txt_gradient {
|
||||
background: linear-gradient(165deg, $alpha_color 30%, $bravo_color 45%, $charlie_color 50%, $delta_color, $echo_color 80%, $foxtrot_color);
|
||||
background: linear-gradient(165deg, basic_color(alpha) 30%, basic_color(bravo) 45%, basic_color(charlie) 50%, basic_color(delta), basic_color(echo) 80%, basic_color(foxtrot));
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Focus
|
||||
// -----------------------------------------------------------------------------
|
||||
@include overrideUserAgent(config.$no_agent_focus, config.$io_focus_list);
|
||||
|
|
@ -6,7 +6,6 @@
|
|||
// ------------------------------------------------------------------------------
|
||||
|
||||
|
||||
|
||||
// TEXT
|
||||
// ------------------------------------------------------------------------------
|
||||
$size_text_basic: 17px !default;
|
||||
|
|
@ -67,7 +66,6 @@ $family_text_card: #{'Trebuchet MS', 'Roboto', 'Segoe UI', 'Liberation Sans', 'S
|
|||
$family_head_basic: $family_text_basic !default;
|
||||
|
||||
|
||||
|
||||
// COLORS
|
||||
// ------------------------------------------------------------------------------
|
||||
$color_palette: (
|
||||
|
|
@ -78,8 +76,6 @@ $color_palette: (
|
|||
echo: #52bed1,
|
||||
foxtrot: #0c85ff) !default;
|
||||
|
||||
@include addDefaultColors;
|
||||
|
||||
$color_diff_basic: 12% !default;
|
||||
$color_diff_tiny: 4% !default;
|
||||
$color_diff_double: $color_diff_basic * 2;
|
||||
|
|
@ -99,25 +95,13 @@ $color_brighter: color.scale($color_back_basic, $lightness: $color_diff_basic);
|
|||
$color_bright: color.scale($color_brightest, $lightness: -$color_diff_double);
|
||||
|
||||
$color_head_basic: $color_text_basic !default;
|
||||
$color_link_basic: $delta_color !default;
|
||||
$color_link_basic: map.get($color_palette, delta) !default;
|
||||
$color_highlight_basic: $color_front_basic !default;
|
||||
$color_action_basic: $foxtrot_color !default;
|
||||
|
||||
$color_action_basic: map.get($color_palette, foxtrot) !default;
|
||||
|
||||
// default shadow colors
|
||||
// $shadow_color: fade-out($color_medium, 0.5);
|
||||
|
||||
$color_list: (
|
||||
);
|
||||
|
||||
@each $key, $value in $color_palette {
|
||||
$map: (
|
||||
);
|
||||
$map: map.merge($map, ($key: createColorMap($value, 15%, 0.5)));
|
||||
$color_list: map.merge($color_list, $map);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// LAYOUT
|
||||
// ------------------------------------------------------------------------------
|
||||
|
|
@ -174,45 +158,44 @@ $z-indexes: (
|
|||
);
|
||||
|
||||
|
||||
|
||||
// IO
|
||||
// ------------------------------------------------------------------------------
|
||||
$io_input_list: 'input[type="text"]',
|
||||
'input[type="number"]',
|
||||
'input[type="color"]',
|
||||
'input[type="range"]',
|
||||
'input[type="date"]',
|
||||
'input[type="time"]',
|
||||
'input[type="datetime-local"]',
|
||||
'input[type="month"]',
|
||||
'input[type="week"]',
|
||||
'input[type="email"]',
|
||||
'input[type="password"]',
|
||||
'input[type="tel"]',
|
||||
'input[type="url"]',
|
||||
'input[type="search"]',
|
||||
'input:not([type])';
|
||||
'input[type="number"]',
|
||||
'input[type="color"]',
|
||||
'input[type="range"]',
|
||||
'input[type="date"]',
|
||||
'input[type="time"]',
|
||||
'input[type="datetime-local"]',
|
||||
'input[type="month"]',
|
||||
'input[type="week"]',
|
||||
'input[type="email"]',
|
||||
'input[type="password"]',
|
||||
'input[type="tel"]',
|
||||
'input[type="url"]',
|
||||
'input[type="search"]',
|
||||
'input:not([type])';
|
||||
|
||||
$io_date_list: '.input_io[type="date"]',
|
||||
'.input_io[type="time"]',
|
||||
'.input_io[type="datetime-local"]',
|
||||
'.input_io[type="month"]',
|
||||
'.input_io[type="week"]';
|
||||
'.input_io[type="time"]',
|
||||
'.input_io[type="datetime-local"]',
|
||||
'.input_io[type="month"]',
|
||||
'.input_io[type="week"]';
|
||||
|
||||
$io_button_list: 'button',
|
||||
'input[type="button"]',
|
||||
'input[type="button"]',
|
||||
// 'input[type="file"]',
|
||||
'input[type="reset"]',
|
||||
'input[type="image"]',
|
||||
'input[type="submit"]';
|
||||
'input[type="reset"]',
|
||||
'input[type="image"]',
|
||||
'input[type="submit"]';
|
||||
|
||||
$io_focus_list: 'a[href]',
|
||||
'area[href]',
|
||||
'button:not([disabled])',
|
||||
'input:not([disabled])',
|
||||
'select:not([disabled])',
|
||||
'textarea:not([disabled])',
|
||||
'*[tabindex]';
|
||||
'area[href]',
|
||||
'button:not([disabled])',
|
||||
'input:not([disabled])',
|
||||
'select:not([disabled])',
|
||||
'textarea:not([disabled])',
|
||||
'*[tabindex]';
|
||||
|
||||
$color_text_io: color.scale($color_text_basic, $lightness: $color_diff_basic) !default;
|
||||
$color_text_button: $color_text_basic !default;
|
||||
|
|
@ -229,7 +212,6 @@ $shadow_basic: inset 0 1px 3px rgba($color_darkest, 0.06);
|
|||
$shadow_focus: $shadow_basic, 0 0 5px color.adjust($color_action_basic, $lightness: -5%, $alpha: -0.3);
|
||||
|
||||
|
||||
|
||||
// ANIMATIONS
|
||||
// ------------------------------------------------------------------------------
|
||||
$duration_basic: 200ms !default;
|
||||
|
|
@ -241,7 +223,6 @@ $transition_hide: opacity $duration_double;
|
|||
$transition_show: opacity $duration_long;
|
||||
|
||||
|
||||
|
||||
// HARDWARE BREAKPOINTS
|
||||
// ------------------------------------------------------------------------------
|
||||
$screen_tiny: 768px;
|
||||
|
|
@ -252,7 +233,6 @@ $screen_huge: 1680px;
|
|||
$screen_gigantic: 1920px;
|
||||
|
||||
|
||||
|
||||
// VENDOR PREFIX
|
||||
// ------------------------------------------------------------------------------
|
||||
$prefix_defaults: -moz- -webkit- -o- -ms- '';
|
||||
|
|
@ -264,7 +244,6 @@ $moz_ms_support: -moz- -ms- '';
|
|||
$webkit_ms_support: -webkit- -ms- '';
|
||||
|
||||
|
||||
|
||||
// SYMBOLS
|
||||
// ------------------------------------------------------------------------------
|
||||
$icons: (
|
||||
|
|
@ -282,9 +261,6 @@ $icons: (
|
|||
}
|
||||
|
||||
|
||||
|
||||
// USER AGENT
|
||||
// ------------------------------------------------------------------------------
|
||||
$no_agent_focus: true;
|
||||
|
||||
@include overrideUserAgent;
|
||||
$no_agent_focus: true !default;
|
||||
|
|
@ -1,46 +1,48 @@
|
|||
@use "config";
|
||||
|
||||
// Basic styles
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
%basic {
|
||||
font-family: $family_text_basic;
|
||||
font-size: $size_text_1;
|
||||
line-height: $line_text_basic;
|
||||
font-family: config.$family_text_basic;
|
||||
font-size: config.$size_text_1;
|
||||
line-height: config.$line_text_basic;
|
||||
}
|
||||
|
||||
%basic_mono {
|
||||
font-family: $family_text_mono;
|
||||
font-size: $size_text_1;
|
||||
line-height: $line_text_mono;
|
||||
font-family: config.$family_text_mono;
|
||||
font-size: config.$size_text_1;
|
||||
line-height: config.$line_text_mono;
|
||||
}
|
||||
|
||||
%basic_print {
|
||||
font-family: $family_text_print;
|
||||
font-size: $size_text_1;
|
||||
line-height: $line_text_basic;
|
||||
font-family: config.$family_text_print;
|
||||
font-size: config.$size_text_1;
|
||||
line-height: config.$line_text_basic;
|
||||
}
|
||||
|
||||
%head_all {
|
||||
font-family: $family_head_basic;
|
||||
line-height: $line_head_basic;
|
||||
font-family: config.$family_head_basic;
|
||||
line-height: config.$line_head_basic;
|
||||
}
|
||||
|
||||
%head_1 {
|
||||
font-size: $size_head_1;
|
||||
font-size: config.$size_head_1;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
%head_2 {
|
||||
font-size: $size_head_2;
|
||||
font-size: config.$size_head_2;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
%head_3 {
|
||||
font-size: $size_head_3;
|
||||
font-size: config.$size_head_3;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
%head_4 {
|
||||
font-size: $size_head_4;
|
||||
font-size: config.$size_head_4;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue