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,5 +1,10 @@
|
|||
@use "sass:color";
|
||||
|
||||
@use "../global/config";
|
||||
@use "../global/common";
|
||||
@use "../global/typography";
|
||||
@use "../functions/color" as *;
|
||||
|
||||
// Grouping content
|
||||
// -----------------------------------------------------------------------------
|
||||
// p
|
||||
|
|
@ -25,18 +30,18 @@
|
|||
// -----------------------------------------------------------------------------
|
||||
p {
|
||||
@extend %basic;
|
||||
margin-top: $space_basic;
|
||||
margin-bottom: $space_basic;
|
||||
margin-top: config.$space_basic;
|
||||
margin-bottom: config.$space_basic;
|
||||
|
||||
code {
|
||||
padding: $space_tiny $space_half;
|
||||
padding: config.$space_tiny config.$space_half;
|
||||
font-size: 1em;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.column_line {
|
||||
column-rule: $border_basic;
|
||||
column-rule: config.$border_basic;
|
||||
}
|
||||
|
||||
.column_2,
|
||||
|
|
@ -46,35 +51,35 @@ p {
|
|||
|
||||
.column_2 {
|
||||
column-count: 2;
|
||||
column-gap: $space_small;
|
||||
column-gap: config.$space_small;
|
||||
}
|
||||
|
||||
.column_3 {
|
||||
column-count: 3;
|
||||
column-gap: $space_medium;
|
||||
column-gap: config.$space_medium;
|
||||
}
|
||||
|
||||
// Address
|
||||
// -----------------------------------------------------------------------------
|
||||
address {
|
||||
// @extend %basic;
|
||||
margin-top: $space_double;
|
||||
margin-bottom: $space_double;
|
||||
margin-top: config.$space_double;
|
||||
margin-bottom: config.$space_double;
|
||||
}
|
||||
|
||||
// Line
|
||||
// -----------------------------------------------------------------------------
|
||||
hr {
|
||||
margin-top: $space_small;
|
||||
margin-bottom: $space_small;
|
||||
border-width: $width_border_basic 0 0;
|
||||
margin-top: config.$space_small;
|
||||
margin-bottom: config.$space_small;
|
||||
border-width: config.$width_border_basic 0 0;
|
||||
border-style: solid;
|
||||
border-color: $color_border_basic;
|
||||
border-color: config.$color_border_basic;
|
||||
|
||||
&.vertical {
|
||||
display: inline;
|
||||
margin: 0 $space_double;
|
||||
border-width: 0 $width_border_basic 0 0;
|
||||
margin: 0 config.$space_double;
|
||||
border-width: 0 config.$width_border_basic 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -91,7 +96,7 @@ hr {
|
|||
.hr_double {
|
||||
@extend hr;
|
||||
height: 4px;
|
||||
border-width: $width_border_basic 0;
|
||||
border-width: config.$width_border_basic 0;
|
||||
}
|
||||
|
||||
// Preformat
|
||||
|
|
@ -103,12 +108,12 @@ pre {
|
|||
|
||||
.pre_code {
|
||||
overflow-x: auto;
|
||||
border-color: color.scale($color_back_basic, $lightness: -$color_diff_tiny);
|
||||
border-color: color.scale(config.$color_back_basic, $lightness: -(config.$color_diff_tiny));
|
||||
border-style: dotted;
|
||||
border-width: 0 0 0 $width_border_4;
|
||||
border-radius: $radius_basic;
|
||||
padding: $space_basic;
|
||||
background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny);
|
||||
border-width: 0 0 0 config.$width_border_4;
|
||||
border-radius: config.$radius_basic;
|
||||
padding: config.$space_basic;
|
||||
background-color: color.scale(config.$color_back_basic, $lightness: config.$color_diff_tiny);
|
||||
|
||||
code {
|
||||
background-color: transparent;
|
||||
|
|
@ -118,9 +123,9 @@ pre {
|
|||
// Quote
|
||||
// -----------------------------------------------------------------------------
|
||||
blockquote {
|
||||
margin: $space_basic 0;
|
||||
padding-right: $indent_basic;
|
||||
padding-left: $indent_basic;
|
||||
margin: config.$space_basic 0;
|
||||
padding-right: config.$indent_basic;
|
||||
padding-left: config.$indent_basic;
|
||||
}
|
||||
|
||||
.quote_mark {
|
||||
|
|
@ -146,12 +151,12 @@ blockquote {
|
|||
dl,
|
||||
ul,
|
||||
ol {
|
||||
margin: $space_double 0;
|
||||
margin: config.$space_double 0;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: $indent_basic;
|
||||
padding-left: config.$indent_basic;
|
||||
|
||||
&.horizontal {
|
||||
overflow: auto;
|
||||
|
|
@ -167,7 +172,7 @@ menu {
|
|||
}
|
||||
|
||||
dl {
|
||||
margin-left: $indent_basic;
|
||||
margin-left: config.$indent_basic;
|
||||
}
|
||||
|
||||
li,
|
||||
|
|
@ -178,11 +183,11 @@ dd {
|
|||
|
||||
dd,
|
||||
.list_basic li {
|
||||
margin-bottom: $space_basic;
|
||||
margin-bottom: config.$space_basic;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: $indent_basic;
|
||||
margin-left: config.$indent_basic;
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
@ -206,16 +211,16 @@ ul {
|
|||
|
||||
.list_link {
|
||||
li {
|
||||
margin-bottom: $space_tiny * 2;
|
||||
margin-bottom: config.$space_tiny * 2;
|
||||
text-transform: uppercase;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: $padding_basic;
|
||||
color: $color_text_basic;
|
||||
padding: config.$padding_basic;
|
||||
color: config.$color_text_basic;
|
||||
|
||||
img {
|
||||
margin-right: $space_basic;
|
||||
margin-right: config.$space_basic;
|
||||
padding-bottom: 0.2em;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
|
@ -223,8 +228,8 @@ ul {
|
|||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $color_action_basic;
|
||||
color: $color_highlight_basic;
|
||||
background-color: config.$color_action_basic;
|
||||
color: config.$color_highlight_basic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -233,12 +238,12 @@ ul {
|
|||
// Embedded
|
||||
// -----------------------------------------------------------------------------
|
||||
figure {
|
||||
margin: $space_double $indent_basic;
|
||||
margin: config.$space_double config.$indent_basic;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
@extend %basic;
|
||||
color: $color_darker;
|
||||
color: config.$color_darker;
|
||||
}
|
||||
|
||||
// Main content
|
||||
|
|
@ -250,9 +255,9 @@ main {}
|
|||
div {}
|
||||
|
||||
.div_info {
|
||||
padding: $space_double $indent_basic;
|
||||
border-right: $space_basic solid rgba($echo_color, 0.6);
|
||||
background-color: rgba($echo_color, 0.1) !important;
|
||||
padding: config.$space_double config.$indent_basic;
|
||||
border-right: config.$space_basic solid rgba(basic_color(echo), 0.6);
|
||||
background-color: rgba(basic_color(echo), 0.1) !important;
|
||||
}
|
||||
|
||||
.box_space {
|
||||
|
|
@ -264,7 +269,7 @@ div {}
|
|||
.box_cube {
|
||||
float: left;
|
||||
display: table;
|
||||
width: $space_medium;
|
||||
width: config.$space_medium;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
|
|
@ -275,21 +280,21 @@ div {}
|
|||
|
||||
.box_placeholder {
|
||||
width: 100%;
|
||||
height: $space_medium;
|
||||
border: $width_border_4 solid color.adjust($alpha_color, $alpha: -0.1);
|
||||
border-radius: $radius_basic;
|
||||
background-color: color.adjust($alpha_color, $alpha: -0.2);
|
||||
height: config.$space_medium;
|
||||
border: config.$width_border_4 solid color.adjust(basic_color(alpha), $alpha: -0.1);
|
||||
border-radius: config.$radius_basic;
|
||||
background-color: color.adjust(basic_color(alpha), $alpha: -0.2);
|
||||
}
|
||||
|
||||
.box_placeholder_bkg {
|
||||
width: 100%;
|
||||
height: $space_medium * 2;
|
||||
border: $width_border_4 solid color.adjust($color_front_basic, $alpha: -0.1);
|
||||
border-radius: $radius_basic;
|
||||
padding: $space_basic;
|
||||
height: config.$space_medium * 2;
|
||||
border: config.$width_border_4 solid color.adjust(config.$color_front_basic, $alpha: -0.1);
|
||||
border-radius: config.$radius_basic;
|
||||
padding: config.$space_basic;
|
||||
/*data:[<mime type>][;charset=<charset>][;base64],<encoded data>*/
|
||||
background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='0' y1='0' x2='100%' y2='100%' stroke='%23FFF' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='%23FFF' stroke-width='.5'/></svg>") no-repeat;
|
||||
background-color: color.adjust($color_front_basic, $alpha: -0.1);
|
||||
background-color: color.adjust(config.$color_front_basic, $alpha: -0.1);
|
||||
}
|
||||
|
||||
.box_file_tile {
|
||||
|
|
@ -308,7 +313,7 @@ div {}
|
|||
// Grid
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-gap: $space_basic;
|
||||
grid-gap: config.$space_basic;
|
||||
|
||||
&>input,
|
||||
&>select,
|
||||
|
|
@ -317,8 +322,8 @@ div {}
|
|||
}
|
||||
|
||||
&>label {
|
||||
margin: $width_border_io;
|
||||
padding: $space_half;
|
||||
margin: config.$width_border_io;
|
||||
padding: config.$space_half;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
@use "sass:color";
|
||||
|
||||
@use "../global/config";
|
||||
@use "../global/typography";
|
||||
|
||||
// Forms
|
||||
// -----------------------------------------------------------------------------
|
||||
// form
|
||||
|
|
@ -34,12 +37,12 @@ label {
|
|||
label,
|
||||
p {
|
||||
input, button, textarea, select {
|
||||
margin: 0 $space_basic;
|
||||
margin: 0 config.$space_basic;
|
||||
}
|
||||
}
|
||||
|
||||
input + label {
|
||||
margin-left: $space_basic;
|
||||
margin-left: config.$space_basic;
|
||||
}
|
||||
|
||||
// Input
|
||||
|
|
@ -48,11 +51,11 @@ input {
|
|||
}
|
||||
|
||||
label + input {
|
||||
margin-left: $space_basic;
|
||||
margin-left: config.$space_basic;
|
||||
}
|
||||
|
||||
input, button, textarea, select {
|
||||
margin: $margin_inline;
|
||||
margin: config.$margin_inline;
|
||||
|
||||
&[disabled="disabled"],
|
||||
&[disabled] {
|
||||
|
|
@ -67,7 +70,7 @@ td > textarea {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
@each $input in $io_input_list, textarea, select {
|
||||
@each $input in config.$io_input_list, textarea, select {
|
||||
#{$input} {
|
||||
@extend %basic_mono;
|
||||
line-height: 1;
|
||||
|
|
@ -76,50 +79,50 @@ td > textarea {
|
|||
|
||||
// TODO: Move to io_module
|
||||
.input_io, .button_io, .io_textarea, .io_select {
|
||||
margin: $margin_io;
|
||||
margin: config.$margin_io;
|
||||
}
|
||||
|
||||
.input_io, .io_textarea, .io_select {
|
||||
padding: $space_half;
|
||||
color: $color_text_io;
|
||||
background-color: $color_back_io;
|
||||
padding: config.$space_half;
|
||||
color: config.$color_text_io;
|
||||
background-color: config.$color_back_io;
|
||||
|
||||
&:hover {
|
||||
background-color: $color_highlight_basic;
|
||||
background-color: config.$color_highlight_basic;
|
||||
}
|
||||
|
||||
&[readonly="readonly"],
|
||||
&[readonly] {
|
||||
background-color: color.scale($color_back_io, $lightness: -$color_diff_double);
|
||||
background-color: color.scale(config.$color_back_io, $lightness: -(config.$color_diff_double));
|
||||
}
|
||||
|
||||
&[disabled="disabled"],
|
||||
&[disabled] {
|
||||
&:hover {
|
||||
background-color: $color_back_io;
|
||||
background-color: config.$color_back_io;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $input in $io_date_list {
|
||||
@each $input in config.$io_date_list {
|
||||
#{$input} {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@each $input in $io_input_list, textarea {
|
||||
@each $input in config.$io_input_list, textarea {
|
||||
#{$input} {
|
||||
// border: $border_io;
|
||||
}
|
||||
}
|
||||
|
||||
.input_io, .io_textarea {
|
||||
border: $border_io;
|
||||
border: config.$border_io;
|
||||
|
||||
&[readonly="readonly"],
|
||||
&[readonly] {
|
||||
border-color: color.scale($color_border_io, $lightness: -$color_diff_double);
|
||||
border-color: color.scale(config.$color_border_io, $lightness: -(config.$color_diff_double));
|
||||
}
|
||||
|
||||
&[disabled="disabled"],
|
||||
|
|
@ -131,16 +134,16 @@ td > textarea {
|
|||
// Fieldset
|
||||
// -----------------------------------------------------------------------------
|
||||
fieldset {
|
||||
margin: $margin_double;
|
||||
padding: $space_basic;
|
||||
border: $border_basic;
|
||||
margin: config.$margin_double;
|
||||
padding: config.$space_basic;
|
||||
border: config.$border_basic;
|
||||
}
|
||||
|
||||
// Legend
|
||||
// -----------------------------------------------------------------------------
|
||||
legend {
|
||||
@extend %basic;
|
||||
padding: 0 $space_half;
|
||||
padding: 0 config.$space_half;
|
||||
}
|
||||
|
||||
// Button
|
||||
|
|
@ -151,26 +154,26 @@ button {
|
|||
|
||||
.button_io {
|
||||
@extend %basic;
|
||||
border: $width_border_io solid $color_border_button;
|
||||
padding: $padding_basic;
|
||||
color: $color_text_button;
|
||||
background-color: $color_back_button;
|
||||
border: config.$width_border_io solid config.$color_border_button;
|
||||
padding: config.$padding_basic;
|
||||
color: config.$color_text_button;
|
||||
background-color: config.$color_back_button;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
// border-color: #0059F6;
|
||||
border-color: transparent;
|
||||
color: white;
|
||||
background-color: $color_action_basic;
|
||||
background-color: config.$color_action_basic;
|
||||
}
|
||||
|
||||
&[disabled="disabled"],
|
||||
&[disabled] {
|
||||
border-color: transparent;
|
||||
color: color.scale($color_text_button, $lightness: $color_diff_double);
|
||||
color: color.scale(config.$color_text_button, $lightness: config.$color_diff_double);
|
||||
|
||||
&:hover {
|
||||
background-color: $color_back_button;
|
||||
background-color: config.$color_back_button;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -187,7 +190,7 @@ button {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color_action_basic;
|
||||
background-color: config.$color_action_basic;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
@use "sass:color";
|
||||
|
||||
@use "../global/config";
|
||||
@use "../global/common";
|
||||
@use "../global/typography";
|
||||
@use "../elements/grouping";
|
||||
|
||||
// Tabular data
|
||||
// -----------------------------------------------------------------------------
|
||||
// table
|
||||
|
|
@ -18,21 +23,21 @@
|
|||
// Table
|
||||
// -----------------------------------------------------------------------------
|
||||
table {
|
||||
margin: $margin_double;
|
||||
border: $border_basic;
|
||||
margin: config.$margin_double;
|
||||
border: config.$border_basic;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table_blank {
|
||||
border: $width_border_basic solid transparent;
|
||||
border: config.$width_border_basic solid transparent;
|
||||
|
||||
th, td {
|
||||
border: $width_border_basic solid transparent;
|
||||
border: config.$width_border_basic solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.table_free {
|
||||
border: $width_border_basic solid transparent;
|
||||
border: config.$width_border_basic solid transparent;
|
||||
}
|
||||
|
||||
.table_stripe {
|
||||
|
|
@ -42,7 +47,7 @@ table {
|
|||
}
|
||||
|
||||
tr:nth-child(even) td {
|
||||
background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny);
|
||||
background-color: color.scale(config.$color_back_basic, $lightness: config.$color_diff_tiny);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -58,8 +63,8 @@ table {
|
|||
// -----------------------------------------------------------------------------
|
||||
caption {
|
||||
@extend p;
|
||||
padding: $space_half 0;
|
||||
border: $border_dotted;
|
||||
padding: config.$space_half 0;
|
||||
border: config.$border_dotted;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -90,7 +95,7 @@ thead {
|
|||
tfoot {
|
||||
|
||||
tr:first-child td {
|
||||
border-top: $border_basic;
|
||||
border-top: config.$border_basic;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -104,17 +109,17 @@ tr {
|
|||
// -----------------------------------------------------------------------------
|
||||
th, td {
|
||||
@extend %basic;
|
||||
padding: $space_half;
|
||||
padding: config.$space_half;
|
||||
}
|
||||
|
||||
th {
|
||||
border: $border_basic;
|
||||
border: config.$border_basic;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td {
|
||||
border-right: $border_basic;
|
||||
border-bottom: $border_basic;
|
||||
border-right: config.$border_basic;
|
||||
border-bottom: config.$border_basic;
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
|
|
@ -128,5 +133,5 @@ td:last-child {
|
|||
.cell_pre {
|
||||
// border-right-width: $width_border_4;
|
||||
// border-right-color: color.scale($color_back_basic, $lightness: $color_diff_basic);
|
||||
background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny);
|
||||
background-color: color.scale(config.$color_back_basic, $lightness: config.$color_diff_tiny);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
@use "sass:color";
|
||||
|
||||
@use "../global/config";
|
||||
@use "../global/typography";
|
||||
@use "../functions/color" as *;
|
||||
|
||||
// Text-Level semantics
|
||||
// -----------------------------------------------------------------------------
|
||||
// a
|
||||
|
|
@ -39,69 +43,69 @@
|
|||
// Links
|
||||
// -----------------------------------------------------------------------------
|
||||
a {
|
||||
color: $color_link_basic;
|
||||
color: config.$color_link_basic;
|
||||
// color: color.scale($color_action_basic, $lightness: 20%);
|
||||
text-decoration: none;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $color_highlight_basic;
|
||||
color: config.$color_highlight_basic;
|
||||
}
|
||||
}
|
||||
|
||||
.a_internal {
|
||||
color: $charlie_color;
|
||||
color: basic_color(charlie);
|
||||
}
|
||||
|
||||
.a_external {
|
||||
color: $delta_color;
|
||||
color: basic_color(delta);
|
||||
}
|
||||
|
||||
.a_discreet {
|
||||
color: $color_text_basic;
|
||||
color: config.$color_text_basic;
|
||||
}
|
||||
|
||||
.a_line {
|
||||
border-bottom-width: $space_tiny;
|
||||
border-bottom-width: config.$space_tiny;
|
||||
border-bottom-style: dotted;
|
||||
border-color: $color_border_basic;
|
||||
color: $color_text_basic;
|
||||
border-color: config.$color_border_basic;
|
||||
color: config.$color_text_basic;
|
||||
background-color: transparent;
|
||||
transition: color $duration_basic $timing_basic;
|
||||
transition: color config.$duration_basic config.$timing_basic;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $color_highlight_basic;
|
||||
background-color: $color_action_basic;
|
||||
color: config.$color_highlight_basic;
|
||||
background-color: config.$color_action_basic;
|
||||
}
|
||||
}
|
||||
|
||||
.a_button {
|
||||
display: inline-block;
|
||||
padding: $padding_basic;
|
||||
border-radius: $radius_basic;
|
||||
background-color: color.adjust($color_link_basic, $alpha: -0.8);
|
||||
padding: config.$padding_basic;
|
||||
border-radius: config.$radius_basic;
|
||||
background-color: color.adjust(config.$color_link_basic, $alpha: -0.8);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
background-color: color.adjust($color_highlight_basic, $alpha: -0.8);
|
||||
background-color: color.adjust(config.$color_highlight_basic, $alpha: -0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.a_button_text {
|
||||
@extend .a_button;
|
||||
padding: $padding_link;
|
||||
color: $color_text_basic;
|
||||
padding: config.$padding_link;
|
||||
color: config.$color_text_basic;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.a_button_border {
|
||||
@extend .a_button_text;
|
||||
border: $border_basic;
|
||||
border: config.$border_basic;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -112,7 +116,7 @@ i, em {
|
|||
}
|
||||
|
||||
.i_bright {
|
||||
color: $color_highlight_basic;
|
||||
color: config.$color_highlight_basic;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
|
@ -196,14 +200,14 @@ time {
|
|||
// -----------------------------------------------------------------------------
|
||||
code {
|
||||
@extend %basic_mono;
|
||||
color: color.scale($color_text_basic, $lightness: $color_diff_basic);
|
||||
background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny);
|
||||
color: color.scale(config.$color_text_basic, $lightness: config.$color_diff_basic);
|
||||
background-color: color.scale(config.$color_back_basic, $lightness: config.$color_diff_tiny);
|
||||
}
|
||||
|
||||
.code_solo {
|
||||
@extend %basic_mono;
|
||||
padding: $space_tiny $space_half;
|
||||
color: $color_text_basic;
|
||||
padding: config.$space_tiny config.$space_half;
|
||||
color: config.$color_text_basic;
|
||||
}
|
||||
|
||||
// Variable
|
||||
|
|
@ -224,12 +228,12 @@ kbd {
|
|||
@extend %basic_mono;
|
||||
// font-size: .9em;
|
||||
// font-weight: bold;
|
||||
padding: 0 $space_half;
|
||||
border-width: $width_border_basic;
|
||||
padding: 0 config.$space_half;
|
||||
border-width: config.$width_border_basic;
|
||||
border-style: solid;
|
||||
border-color: $color_darker;
|
||||
border-radius: $radius_basic;
|
||||
color: color.scale($color_text_basic, $lightness: $color_diff_basic);
|
||||
border-color: config.$color_darker;
|
||||
border-radius: config.$radius_basic;
|
||||
color: color.scale(config.$color_text_basic, $lightness: config.$color_diff_basic);
|
||||
}
|
||||
|
||||
// Sub- and superscript
|
||||
|
|
@ -247,22 +251,22 @@ u {
|
|||
// Marks
|
||||
// -----------------------------------------------------------------------------
|
||||
mark {
|
||||
background-color: $alpha_color;
|
||||
background-color: basic_color(alpha);
|
||||
}
|
||||
|
||||
.mark_cursor {
|
||||
color: color.invert($color_text_basic);
|
||||
background-color: $color_text_basic;
|
||||
color: color.invert(config.$color_text_basic);
|
||||
background-color: config.$color_text_basic;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
color: color.invert($color_text_basic);
|
||||
background-color: $color_text_basic;
|
||||
color: color.invert(config.$color_text_basic);
|
||||
background-color: config.$color_text_basic;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: color.invert($color_text_basic);
|
||||
background-color: $color_text_basic;
|
||||
color: color.invert(config.$color_text_basic);
|
||||
background-color: config.$color_text_basic;
|
||||
}
|
||||
|
||||
// Text direction
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue