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
44
_basic.scss
44
_basic.scss
|
|
@ -4,48 +4,38 @@
|
|||
// @import "../../vendor/normalizecss/normalize.css";
|
||||
// @import "../../node_modules/normalize.css/normalize.css";
|
||||
|
||||
|
||||
|
||||
// Functions and Mixins
|
||||
// Important code constructions
|
||||
// -----------------------------------------------------------------------------
|
||||
@import "functions/all";
|
||||
@import "mixins/all";
|
||||
|
||||
|
||||
|
||||
// Fonts
|
||||
// Use a central file outside of hippie for font definitions with @font-face
|
||||
// -----------------------------------------------------------------------------
|
||||
// @import "../../vendor/fonts.css";
|
||||
|
||||
|
||||
// Functions and Mixins
|
||||
// Important code constructions
|
||||
// -----------------------------------------------------------------------------
|
||||
@forward "functions/color";
|
||||
@forward "mixins";
|
||||
|
||||
// Global configuration with default values
|
||||
// -----------------------------------------------------------------------------
|
||||
@import "global/config";
|
||||
|
||||
|
||||
@forward "global/config";
|
||||
@forward "global/common";
|
||||
@forward "global/typography";
|
||||
|
||||
// Basic styles - this is the core of definitions
|
||||
// Individual styles can be added her
|
||||
// -----------------------------------------------------------------------------
|
||||
@import "global/common";
|
||||
@import "global/typography";
|
||||
// Following the w3c document element structure
|
||||
// https://w3c.github.io/html/index.html#contents
|
||||
@import "elements/sections";
|
||||
@import "elements/grouping";
|
||||
@import "elements/textlevel";
|
||||
@import "elements/embedded";
|
||||
@import "elements/tables";
|
||||
@import "elements/interactive";
|
||||
|
||||
|
||||
@forward "elements/sections";
|
||||
@forward "elements/grouping";
|
||||
@forward "elements/textlevel";
|
||||
@forward "elements/embedded";
|
||||
@forward "elements/tables";
|
||||
@forward "elements/interactive";
|
||||
|
||||
// Individual Modules and variables
|
||||
// in dependency to other styles
|
||||
// -----------------------------------------------------------------------------
|
||||
@import "modules/breakpoint/breakpoint_module";
|
||||
@import "modules/tables/tables_module";
|
||||
@import "modules/maintenance/maintenance_module";
|
||||
@forward "modules/breakpoint/breakpoint_module";
|
||||
@forward "modules/tables/tables_module";
|
||||
@forward "modules/maintenance/maintenance_module";
|
||||
|
|
|
|||
12
_hippie.scss
12
_hippie.scss
|
|
@ -21,13 +21,13 @@
|
|||
- Maintenance
|
||||
*
|
||||
*/
|
||||
@import "basic";
|
||||
@forward "basic";
|
||||
|
||||
// Additional Modules and variables
|
||||
// in dependency to other basic styles
|
||||
// -----------------------------------------------------------------------------
|
||||
@import "modules/io/io_module";
|
||||
@import "modules/navigation/nav_module";
|
||||
@import "modules/editor/editor_module";
|
||||
@import "modules/explanation/explanation_module";
|
||||
@import "modules/print/print_module";
|
||||
@forward "modules/io/io_module";
|
||||
@forward "modules/navigation/nav_module";
|
||||
@forward "modules/editor/editor_module";
|
||||
@forward "modules/explanation/explanation_module";
|
||||
@forward "modules/print/print_module";
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
@import "color";
|
||||
@import "shade";
|
||||
@import "tint";
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
@use "sass:map";
|
||||
@use "sass:color";
|
||||
|
||||
@use "../global/config";
|
||||
|
||||
@function createColorMap($color, $percentage, $opacity) {
|
||||
$map: (
|
||||
base: $color,
|
||||
|
|
@ -11,6 +13,6 @@
|
|||
@return $map;
|
||||
}
|
||||
|
||||
@function basic_color($key: 'alpha') {
|
||||
@return map.get($color_palette, $key);
|
||||
@function basic_color($key: 'alpha', $map: config.$color_palette) {
|
||||
@return map.get($map, $key);
|
||||
}
|
||||
|
|
|
|||
3
functions/_index.scss
Normal file
3
functions/_index.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@use "color" as *;
|
||||
@use "shade";
|
||||
@use "tint";
|
||||
|
|
@ -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,7 +158,6 @@ $z-indexes: (
|
|||
);
|
||||
|
||||
|
||||
|
||||
// IO
|
||||
// ------------------------------------------------------------------------------
|
||||
$io_input_list: 'input[type="text"]',
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
@import "media_query";
|
||||
@import "sprite";
|
||||
@import "flow";
|
||||
@import "color";
|
||||
@import "user_agent";
|
||||
@import "vendor";
|
||||
|
|
@ -1,22 +1,24 @@
|
|||
@use "sass:map";
|
||||
|
||||
@mixin addDefaultColors() {
|
||||
@if map.has-key($color_palette, alpha) {
|
||||
$alpha_color: map.get($color_palette, alpha) !global;
|
||||
@use "../global/config";
|
||||
|
||||
@mixin addDefaultColors {
|
||||
@if map.has-key(config.$color_palette, alpha) {
|
||||
$alpha_color: map.get(config.$color_palette, alpha) !global;
|
||||
}
|
||||
@if map.has-key($color_palette, bravo) {
|
||||
$bravo_color: map.get($color_palette, bravo) !global;
|
||||
@if map.has-key(config.$color_palette, bravo) {
|
||||
$bravo_color: map.get(config.$color_palette, bravo) !global;
|
||||
}
|
||||
@if map.has-key($color_palette, charlie) {
|
||||
$charlie_color: map.get($color_palette, charlie) !global;
|
||||
@if map.has-key(config.$color_palette, charlie) {
|
||||
$charlie_color: map.get(config.$color_palette, charlie) !global;
|
||||
}
|
||||
@if map.has-key($color_palette, delta) {
|
||||
$delta_color: map.get($color_palette, delta) !global;
|
||||
@if map.has-key(config.$color_palette, delta) {
|
||||
$delta_color: map.get(config.$color_palette, delta) !global;
|
||||
}
|
||||
@if map.has-key($color_palette, echo) {
|
||||
$echo_color: map.get($color_palette, echo) !global;
|
||||
@if map.has-key(config.$color_palette, echo) {
|
||||
$echo_color: map.get(config.$color_palette, echo) !global;
|
||||
}
|
||||
@if map.has-key($color_palette, foxtrot) {
|
||||
$foxtrot_color: map.get($color_palette, foxtrot) !global;
|
||||
@if map.has-key(config.$color_palette, foxtrot) {
|
||||
$foxtrot_color: map.get(config.$color_palette, foxtrot) !global;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
6
mixins/_index.scss
Normal file
6
mixins/_index.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
@forward "media_query";
|
||||
@forward "sprite";
|
||||
@forward "flow";
|
||||
//@use "./_color";
|
||||
@forward "user_agent";
|
||||
@forward "vendor";
|
||||
|
|
@ -1,32 +1,34 @@
|
|||
@use "../global/config";
|
||||
|
||||
@use "sass:math";
|
||||
|
||||
//Sections for Media Queries
|
||||
@mixin forPhoneUp {
|
||||
@media (min-width: #{$screen_tiny - 1}) { @content; } //599px
|
||||
@media (min-width: #{config.$screen_tiny - 1}) { @content; } //599px
|
||||
}
|
||||
@mixin forPhoneOnly {
|
||||
@media (max-width: #{$screen_tiny - 1}) { @content; } //599px
|
||||
@media (max-width: #{config.$screen_tiny - 1}) { @content; } //599px
|
||||
}
|
||||
@mixin forTabletPortraitUp {
|
||||
@media (min-width: $screen_small) { @content; } //600px
|
||||
@media (min-width: config.$screen_small) { @content; } //600px
|
||||
}
|
||||
@mixin forTabletPortraitOnly {
|
||||
@media (min-width: $screen_tiny) and (max-width: #{$screen_small - 1}) { @content; } //600px - 899px
|
||||
@media (min-width: config.$screen_tiny) and (max-width: #{config.$screen_small - 1}) { @content; } //600px - 899px
|
||||
}
|
||||
@mixin forTabletLandscapeUp {
|
||||
@media (min-width: $screen_small) { @content; } //900px
|
||||
@media (min-width: config.$screen_small) { @content; } //900px
|
||||
}
|
||||
@mixin forTabletLandscapeOnly {
|
||||
@media (min-width: $screen_small) and (max-width: #{$screen_medium - 1}) { @content; } //900px - 1199px
|
||||
@media (min-width: config.$screen_small) and (max-width: #{config.$screen_medium - 1}) { @content; } //900px - 1199px
|
||||
}
|
||||
@mixin forDesktopUp {
|
||||
@media (min-width: $screen_medium) { @content; } //1200px
|
||||
@media (min-width: config.$screen_medium) { @content; } //1200px
|
||||
}
|
||||
@mixin forDesktopOnly {
|
||||
@media (min-width: $screen_medium) and (max-width: #{$screen_huge - 1}) { @content; } //1200px - 1799px
|
||||
@media (min-width: config.$screen_medium) and (max-width: #{config.$screen_huge - 1}) { @content; } //1200px - 1799px
|
||||
}
|
||||
@mixin forBigDesktopUp {
|
||||
@media (min-width: $screen_huge) { @content; } //1800px
|
||||
@media (min-width: config.$screen_huge) { @content; } //1800px
|
||||
}
|
||||
|
||||
//Mobile-first Media Query
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@mixin overrideUserAgent() {
|
||||
@if $no_agent_focus == true {
|
||||
@each $el in $io_focus_list {
|
||||
@mixin overrideUserAgent($active, $elements) {
|
||||
@if $active == true {
|
||||
@each $el in $elements {
|
||||
#{$el}:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,29 @@
|
|||
@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 {
|
||||
.query_tabletPortraitOnly {
|
||||
@include forTabletPortraitOnly {
|
||||
}
|
||||
}
|
||||
|
|
@ -25,11 +34,13 @@
|
|||
}
|
||||
|
||||
.query_tabletLandscapeOnly {
|
||||
@include forTabletLandscapeOnly {}
|
||||
@include forTabletLandscapeOnly {
|
||||
}
|
||||
}
|
||||
|
||||
.query_tabletLandscapeUp {
|
||||
@include forTabletLandscapeUp {}
|
||||
@include forTabletLandscapeUp {
|
||||
}
|
||||
}
|
||||
|
||||
.query_desktopOnly {
|
||||
|
|
@ -43,5 +54,6 @@
|
|||
}
|
||||
|
||||
.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 {
|
||||
|
|
@ -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