interaktionsweise/hippie-style
1
1
Fork 0
Code Pull requests Releases Activity

Compare commits

base: interaktionsweise:4e4f8814d319c2f2a26a3ae5ab1c812e1aac8483
Branches Tags
interaktionsweise:development
interaktionsweise:main
..
compare: interaktionsweise:b739ddefda35962192aadfc2ca86a11d996ab7c9
Branches Tags
interaktionsweise:development
interaktionsweise:main

No commits in common. "4e4f8814d319c2f2a26a3ae5ab1c812e1aac8483" and "b739ddefda35962192aadfc2ca86a11d996ab7c9" have entirely different histories.
4e4f8814d3 ... b739ddefda

26 changed files with 436 additions and 492 deletions
Download patch file Download diff file Expand all files Collapse all files

44
_basic.scss
View file

@ -4,38 +4,48 @@
// @import "../../vendor/normalizecss/normalize.css"; // @import "../../vendor/normalizecss/normalize.css";
// @import "../../node_modules/normalize.css/normalize.css"; // @import "../../node_modules/normalize.css/normalize.css";
// Functions and Mixins
// Important code constructions
// -----------------------------------------------------------------------------
@import "functions/all";
@import "mixins/all";
// Fonts // Fonts
// Use a central file outside of hippie for font definitions with @font-face // Use a central file outside of hippie for font definitions with @font-face
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// @import "../../vendor/fonts.css"; // @import "../../vendor/fonts.css";
// Functions and Mixins
// Important code constructions
// -----------------------------------------------------------------------------
@forward "functions/color";
@forward "mixins";
// Global configuration with default values // Global configuration with default values
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
@forward "global/config"; @import "global/config";
@forward "global/common";
@forward "global/typography";
// Basic styles - this is the core of definitions // Basic styles - this is the core of definitions
// Individual styles can be added her // Individual styles can be added her
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
@import "global/common";
@import "global/typography";
// Following the w3c document element structure // Following the w3c document element structure
// https://w3c.github.io/html/index.html#contents // https://w3c.github.io/html/index.html#contents
@forward "elements/sections"; @import "elements/sections";
@forward "elements/grouping"; @import "elements/grouping";
@forward "elements/textlevel"; @import "elements/textlevel";
@forward "elements/embedded"; @import "elements/embedded";
@forward "elements/tables"; @import "elements/tables";
@forward "elements/interactive"; @import "elements/interactive";
// Individual Modules and variables // Individual Modules and variables
// in dependency to other styles // in dependency to other styles
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
@forward "modules/breakpoint/breakpoint_module"; @import "modules/breakpoint/breakpoint_module";
@forward "modules/tables/tables_module"; @import "modules/tables/tables_module";
@forward "modules/maintenance/maintenance_module"; @import "modules/maintenance/maintenance_module";

12
_hippie.scss
View file

@ -21,13 +21,13 @@
- Maintenance - Maintenance
* *
*/ */
@forward "basic"; @import "basic";
// Additional Modules and variables // Additional Modules and variables
// in dependency to other basic styles // in dependency to other basic styles
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
@forward "modules/io/io_module"; @import "modules/io/io_module";
@forward "modules/navigation/nav_module"; @import "modules/navigation/nav_module";
@forward "modules/editor/editor_module"; @import "modules/editor/editor_module";
@forward "modules/explanation/explanation_module"; @import "modules/explanation/explanation_module";
@forward "modules/print/print_module"; @import "modules/print/print_module";

109
elements/_grouping.scss
View file

@ -1,10 +1,5 @@
@use "sass:color"; @use "sass:color";
@use "../global/config";
@use "../global/common";
@use "../global/typography";
@use "../functions/color" as *;
// Grouping content // Grouping content
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// p // p
@ -30,18 +25,18 @@
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
p { p {
@extend %basic; @extend %basic;
margin-top: config.$space_basic; margin-top: $space_basic;
margin-bottom: config.$space_basic; margin-bottom: $space_basic;
code { code {
padding: config.$space_tiny config.$space_half; padding: $space_tiny $space_half;
font-size: 1em; font-size: 1em;
line-height: 1; line-height: 1;
} }
} }
.column_line { .column_line {
column-rule: config.$border_basic; column-rule: $border_basic;
} }
.column_2, .column_2,
@ -51,35 +46,35 @@ p {
.column_2 { .column_2 {
column-count: 2; column-count: 2;
column-gap: config.$space_small; column-gap: $space_small;
} }
.column_3 { .column_3 {
column-count: 3; column-count: 3;
column-gap: config.$space_medium; column-gap: $space_medium;
} }
// Address // Address
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
address { address {
// @extend %basic; // @extend %basic;
margin-top: config.$space_double; margin-top: $space_double;
margin-bottom: config.$space_double; margin-bottom: $space_double;
} }
// Line // Line
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
hr { hr {
margin-top: config.$space_small; margin-top: $space_small;
margin-bottom: config.$space_small; margin-bottom: $space_small;
border-width: config.$width_border_basic 0 0; border-width: $width_border_basic 0 0;
border-style: solid; border-style: solid;
border-color: config.$color_border_basic; border-color: $color_border_basic;
&.vertical { &.vertical {
display: inline; display: inline;
margin: 0 config.$space_double; margin: 0 $space_double;
border-width: 0 config.$width_border_basic 0 0; border-width: 0 $width_border_basic 0 0;
} }
} }
@ -96,7 +91,7 @@ hr {
.hr_double { .hr_double {
@extend hr; @extend hr;
height: 4px; height: 4px;
border-width: config.$width_border_basic 0; border-width: $width_border_basic 0;
} }
// Preformat // Preformat
@ -108,12 +103,12 @@ pre {
.pre_code { .pre_code {
overflow-x: auto; overflow-x: auto;
border-color: color.scale(config.$color_back_basic, $lightness: -(config.$color_diff_tiny)); border-color: color.scale($color_back_basic, $lightness: -$color_diff_tiny);
border-style: dotted; border-style: dotted;
border-width: 0 0 0 config.$width_border_4; border-width: 0 0 0 $width_border_4;
border-radius: config.$radius_basic; border-radius: $radius_basic;
padding: config.$space_basic; padding: $space_basic;
background-color: color.scale(config.$color_back_basic, $lightness: config.$color_diff_tiny); background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny);
code { code {
background-color: transparent; background-color: transparent;
@ -123,9 +118,9 @@ pre {
// Quote // Quote
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
blockquote { blockquote {
margin: config.$space_basic 0; margin: $space_basic 0;
padding-right: config.$indent_basic; padding-right: $indent_basic;
padding-left: config.$indent_basic; padding-left: $indent_basic;
} }
.quote_mark { .quote_mark {
@ -151,12 +146,12 @@ blockquote {
dl, dl,
ul, ul,
ol { ol {
margin: config.$space_double 0; margin: $space_double 0;
} }
ul, ul,
ol { ol {
padding-left: config.$indent_basic; padding-left: $indent_basic;
&.horizontal { &.horizontal {
overflow: auto; overflow: auto;
@ -172,7 +167,7 @@ menu {
} }
dl { dl {
margin-left: config.$indent_basic; margin-left: $indent_basic;
} }
li, li,
@ -183,11 +178,11 @@ dd {
dd, dd,
.list_basic li { .list_basic li {
margin-bottom: config.$space_basic; margin-bottom: $space_basic;
} }
dd { dd {
margin-left: config.$indent_basic; margin-left: $indent_basic;
} }
ul { ul {
@ -211,16 +206,16 @@ ul {
.list_link { .list_link {
li { li {
margin-bottom: config.$space_tiny * 2; margin-bottom: $space_tiny * 2;
text-transform: uppercase; text-transform: uppercase;
a { a {
display: block; display: block;
padding: config.$padding_basic; padding: $padding_basic;
color: config.$color_text_basic; color: $color_text_basic;
img { img {
margin-right: config.$space_basic; margin-right: $space_basic;
padding-bottom: 0.2em; padding-bottom: 0.2em;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
@ -228,8 +223,8 @@ ul {
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
background-color: config.$color_action_basic; background-color: $color_action_basic;
color: config.$color_highlight_basic; color: $color_highlight_basic;
} }
} }
} }
@ -238,12 +233,12 @@ ul {
// Embedded // Embedded
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
figure { figure {
margin: config.$space_double config.$indent_basic; margin: $space_double $indent_basic;
} }
figcaption { figcaption {
@extend %basic; @extend %basic;
color: config.$color_darker; color: $color_darker;
} }
// Main content // Main content
@ -255,9 +250,9 @@ main {}
div {} div {}
.div_info { .div_info {
padding: config.$space_double config.$indent_basic; padding: $space_double $indent_basic;
border-right: config.$space_basic solid rgba(basic_color(echo), 0.6); border-right: $space_basic solid rgba($echo_color, 0.6);
background-color: rgba(basic_color(echo), 0.1) !important; background-color: rgba($echo_color, 0.1) !important;
} }
.box_space { .box_space {
@ -269,7 +264,7 @@ div {}
.box_cube { .box_cube {
float: left; float: left;
display: table; display: table;
width: config.$space_medium; width: $space_medium;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
@ -280,21 +275,21 @@ div {}
.box_placeholder { .box_placeholder {
width: 100%; width: 100%;
height: config.$space_medium; height: $space_medium;
border: config.$width_border_4 solid color.adjust(basic_color(alpha), $alpha: -0.1); border: $width_border_4 solid color.adjust($alpha_color, $alpha: -0.1);
border-radius: config.$radius_basic; border-radius: $radius_basic;
background-color: color.adjust(basic_color(alpha), $alpha: -0.2); background-color: color.adjust($alpha_color, $alpha: -0.2);
} }
.box_placeholder_bkg { .box_placeholder_bkg {
width: 100%; width: 100%;
height: config.$space_medium * 2; height: $space_medium * 2;
border: config.$width_border_4 solid color.adjust(config.$color_front_basic, $alpha: -0.1); border: $width_border_4 solid color.adjust($color_front_basic, $alpha: -0.1);
border-radius: config.$radius_basic; border-radius: $radius_basic;
padding: config.$space_basic; padding: $space_basic;
/*data:[<mime type>][;charset=<charset>][;base64],<encoded data>*/ /*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: 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(config.$color_front_basic, $alpha: -0.1); background-color: color.adjust($color_front_basic, $alpha: -0.1);
} }
.box_file_tile { .box_file_tile {
@ -313,7 +308,7 @@ div {}
// Grid // Grid
.grid { .grid {
display: grid; display: grid;
grid-gap: config.$space_basic; grid-gap: $space_basic;
&>input, &>input,
&>select, &>select,
@ -322,8 +317,8 @@ div {}
} }
&>label { &>label {
margin: config.$width_border_io; margin: $width_border_io;
padding: config.$space_half; padding: $space_half;
} }
} }

59
elements/_interactive.scss
View file

@ -1,8 +1,5 @@
@use "sass:color"; @use "sass:color";
@use "../global/config";
@use "../global/typography";
// Forms // Forms
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// form // form
@ -37,12 +34,12 @@ label {
label, label,
p { p {
input, button, textarea, select { input, button, textarea, select {
margin: 0 config.$space_basic; margin: 0 $space_basic;
} }
} }
input + label { input + label {
margin-left: config.$space_basic; margin-left: $space_basic;
} }
// Input // Input
@ -51,11 +48,11 @@ input {
} }
label + input { label + input {
margin-left: config.$space_basic; margin-left: $space_basic;
} }
input, button, textarea, select { input, button, textarea, select {
margin: config.$margin_inline; margin: $margin_inline;
&[disabled="disabled"], &[disabled="disabled"],
&[disabled] { &[disabled] {
@ -70,7 +67,7 @@ td > textarea {
margin: 0; margin: 0;
} }
@each $input in config.$io_input_list, textarea, select { @each $input in $io_input_list, textarea, select {
#{$input} { #{$input} {
@extend %basic_mono; @extend %basic_mono;
line-height: 1; line-height: 1;
@ -79,50 +76,50 @@ td > textarea {
// TODO: Move to io_module // TODO: Move to io_module
.input_io, .button_io, .io_textarea, .io_select { .input_io, .button_io, .io_textarea, .io_select {
margin: config.$margin_io; margin: $margin_io;
} }
.input_io, .io_textarea, .io_select { .input_io, .io_textarea, .io_select {
padding: config.$space_half; padding: $space_half;
color: config.$color_text_io; color: $color_text_io;
background-color: config.$color_back_io; background-color: $color_back_io;
&:hover { &:hover {
background-color: config.$color_highlight_basic; background-color: $color_highlight_basic;
} }
&[readonly="readonly"], &[readonly="readonly"],
&[readonly] { &[readonly] {
background-color: color.scale(config.$color_back_io, $lightness: -(config.$color_diff_double)); background-color: color.scale($color_back_io, $lightness: -$color_diff_double);
} }
&[disabled="disabled"], &[disabled="disabled"],
&[disabled] { &[disabled] {
&:hover { &:hover {
background-color: config.$color_back_io; background-color: $color_back_io;
} }
} }
} }
@each $input in config.$io_date_list { @each $input in $io_date_list {
#{$input} { #{$input} {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
} }
@each $input in config.$io_input_list, textarea { @each $input in $io_input_list, textarea {
#{$input} { #{$input} {
// border: $border_io; // border: $border_io;
} }
} }
.input_io, .io_textarea { .input_io, .io_textarea {
border: config.$border_io; border: $border_io;
&[readonly="readonly"], &[readonly="readonly"],
&[readonly] { &[readonly] {
border-color: color.scale(config.$color_border_io, $lightness: -(config.$color_diff_double)); border-color: color.scale($color_border_io, $lightness: -$color_diff_double);
} }
&[disabled="disabled"], &[disabled="disabled"],
@ -134,16 +131,16 @@ td > textarea {
// Fieldset // Fieldset
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
fieldset { fieldset {
margin: config.$margin_double; margin: $margin_double;
padding: config.$space_basic; padding: $space_basic;
border: config.$border_basic; border: $border_basic;
} }
// Legend // Legend
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
legend { legend {
@extend %basic; @extend %basic;
padding: 0 config.$space_half; padding: 0 $space_half;
} }
// Button // Button
@ -154,26 +151,26 @@ button {
.button_io { .button_io {
@extend %basic; @extend %basic;
border: config.$width_border_io solid config.$color_border_button; border: $width_border_io solid $color_border_button;
padding: config.$padding_basic; padding: $padding_basic;
color: config.$color_text_button; color: $color_text_button;
background-color: config.$color_back_button; background-color: $color_back_button;
user-select: none; user-select: none;
&:hover { &:hover {
// border-color: #0059F6; // border-color: #0059F6;
border-color: transparent; border-color: transparent;
color: white; color: white;
background-color: config.$color_action_basic; background-color: $color_action_basic;
} }
&[disabled="disabled"], &[disabled="disabled"],
&[disabled] { &[disabled] {
border-color: transparent; border-color: transparent;
color: color.scale(config.$color_text_button, $lightness: config.$color_diff_double); color: color.scale($color_text_button, $lightness: $color_diff_double);
&:hover { &:hover {
background-color: config.$color_back_button; background-color: $color_back_button;
} }
} }
} }
@ -190,7 +187,7 @@ button {
} }
&:hover { &:hover {
background-color: config.$color_action_basic; background-color: $color_action_basic;
} }
} }

77
elements/_sections.scss
View file

@ -1,8 +1,3 @@
@use "../global/config";
@use "../global/common";
@use "../elements/interactive";
@use "../mixins/media_query" as *;
@use "sass:map"; @use "sass:map";
// Root // Root
@ -12,6 +7,7 @@ html {
} }
// Sections // Sections
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// body // body
@ -25,17 +21,18 @@ html {
// footer // footer
// Body // Body
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
body { body {
position: relative; position: relative;
box-sizing: config.$box_sizing; box-sizing: $box_sizing;
margin: 0; margin: 0;
font-family: config.$family_text_basic; font-family: $family_text_basic;
font-size: config.$size_text_basic; font-size: $size_text_basic;
line-height: config.$line_text_basic; line-height: $line_text_basic;
color: config.$color_text_basic; color: $color_text_basic;
background-color: config.$color_back_basic; background-color: $color_back_basic;
*, *,
::before, ::before,
@ -44,46 +41,44 @@ body {
} }
&:hover { &:hover {
#mouse-overlay { .mouse_over {
background-color: transparent !important; background-color: transparent !important;
transition: background-color config.$duration_basic config.$timing_basic 0s !important; transition: background-color $duration_basic $timing_basic 0s !important;
} }
} }
} }
// Article // Article
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
article { article {}
}
// Section // Section
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
section { section {}
}
.sec_main_center { .sec_main_center {
width: config.$width_basic; width: $width_basic;
margin: 0 auto; margin: 0 auto;
padding-top: config.$space_small; padding-top: $space_small;
@include forTabletPortraitUp { @include forTabletPortraitUp {
width: config.$width_small; width: $width_small;
} }
@include forTabletLandscapeUp { @include forTabletLandscapeUp {
width: config.$width_medium; width: $width_medium;
} }
@include forBigDesktopUp { @include forBigDesktopUp {
width: config.$width_large; width: $width_large;
} }
} }
.sec_main_status { .sec_main_status {
border-top-width: config.$width_border_8; border-top-width: $width_border_8;
border-top-style: solid; border-top-style: solid;
border-color: config.$color_border_basic; border-color: $color_border_basic;
padding-top: config.$space_small; padding-top: $space_small;
} }
// Navigation // Navigation
@ -102,14 +97,14 @@ nav {
// Aside element // Aside element
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
aside { aside {
width: config.$width_aside_basic; width: $width_aside_basic;
&.right+.bside { &.right+.bside {
margin-right: calc(#{config.$width_aside_basic} + #{config.$space_basic}); margin-right: calc(#{$width_aside_basic} + #{$space_basic});
} }
&.left+.bside { &.left+.bside {
margin-left: calc(#{config.$width_aside_basic} + #{config.$space_basic}); margin-left: calc(#{$width_aside_basic} + #{$space_basic});
} }
&.right { &.right {
@ -155,7 +150,7 @@ aside {
} }
ul.vertical li { ul.vertical li {
margin-bottom: config.$space_half; margin-bottom: $space_half;
.a_button>i:last-child { .a_button>i:last-child {
margin-left: auto; margin-left: auto;
@ -177,12 +172,12 @@ h6 {
h1 { h1 {
@extend %head_1; @extend %head_1;
margin: config.$space_large 0 config.$space_small; margin: $space_large 0 $space_small;
} }
h2 { h2 {
@extend %head_2; @extend %head_2;
margin: config.$space_medium 0 config.$space_small; margin: $space_medium 0 $space_small;
} }
h1+h1, h1+h1,
@ -192,25 +187,25 @@ h2 + h2 {
h3 { h3 {
@extend %head_3; @extend %head_3;
margin: config.$space_double 0; margin: $space_double 0;
text-transform: uppercase; text-transform: uppercase;
} }
h4 { h4 {
@extend %head_3; @extend %head_3;
margin: config.$space_double 0; margin: $space_double 0;
text-transform: none; text-transform: none;
} }
h5 { h5 {
@extend %head_4; @extend %head_4;
margin: config.$space_double 0 config.$space_basic; margin: $space_double 0 $space_basic;
text-transform: none; text-transform: none;
} }
h6 { h6 {
@extend %basic; @extend %basic;
margin: config.$space_basic 0; margin: $space_basic 0;
text-transform: none; text-transform: none;
font-weight: bold; font-weight: bold;
} }
@ -224,7 +219,7 @@ hgroup {
} }
&>p { &>p {
margin-bottom: config.$space_small; margin-bottom: $space_small;
} }
} }
@ -232,7 +227,7 @@ hgroup {
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
header { header {
&.io { &.io {
z-index: map.get(config.$z-indexes, "content-top"); z-index: map.get($z-indexes, "content-top");
&>*:last-child *:last-child { &>*:last-child *:last-child {
margin-right: 0; margin-right: 0;
@ -263,11 +258,11 @@ header {
} }
.header_txt { .header_txt {
margin-bottom: config.$space_small; margin-bottom: $space_small;
border-bottom: config.$border_dotted; border-bottom: $border_dotted;
h1 { h1 {
border-top: config.$border_basic; border-top: $border_basic;
} }
} }
@ -284,7 +279,7 @@ footer {
button, button,
span, span,
div:not(.spacer) { div:not(.spacer) {
padding: 0 config.$space_half !important; padding: 0 $space_half !important;
} }
} }
} }

33
elements/_tables.scss
View file

@ -1,10 +1,5 @@
@use "sass:color"; @use "sass:color";
@use "../global/config";
@use "../global/common";
@use "../global/typography";
@use "../elements/grouping";
// Tabular data // Tabular data
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// table // table
@ -23,21 +18,21 @@
// Table // Table
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
table { table {
margin: config.$margin_double; margin: $margin_double;
border: config.$border_basic; border: $border_basic;
border-collapse: collapse; border-collapse: collapse;
} }
.table_blank { .table_blank {
border: config.$width_border_basic solid transparent; border: $width_border_basic solid transparent;
th, td { th, td {
border: config.$width_border_basic solid transparent; border: $width_border_basic solid transparent;
} }
} }
.table_free { .table_free {
border: config.$width_border_basic solid transparent; border: $width_border_basic solid transparent;
} }
.table_stripe { .table_stripe {
@ -47,7 +42,7 @@ table {
} }
tr:nth-child(even) td { tr:nth-child(even) td {
background-color: color.scale(config.$color_back_basic, $lightness: config.$color_diff_tiny); background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny);
} }
} }
@ -63,8 +58,8 @@ table {
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
caption { caption {
@extend p; @extend p;
padding: config.$space_half 0; padding: $space_half 0;
border: config.$border_dotted; border: $border_dotted;
text-align: center; text-align: center;
} }
@ -95,7 +90,7 @@ thead {
tfoot { tfoot {
tr:first-child td { tr:first-child td {
border-top: config.$border_basic; border-top: $border_basic;
} }
} }
@ -109,17 +104,17 @@ tr {
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
th, td { th, td {
@extend %basic; @extend %basic;
padding: config.$space_half; padding: $space_half;
} }
th { th {
border: config.$border_basic; border: $border_basic;
text-align: left; text-align: left;
} }
td { td {
border-right: config.$border_basic; border-right: $border_basic;
border-bottom: config.$border_basic; border-bottom: $border_basic;
} }
td:last-child { td:last-child {
@ -133,5 +128,5 @@ td:last-child {
.cell_pre { .cell_pre {
// border-right-width: $width_border_4; // border-right-width: $width_border_4;
// border-right-color: color.scale($color_back_basic, $lightness: $color_diff_basic); // border-right-color: color.scale($color_back_basic, $lightness: $color_diff_basic);
background-color: color.scale(config.$color_back_basic, $lightness: config.$color_diff_tiny); background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny);
} }

74
elements/_textlevel.scss
View file

@ -1,9 +1,5 @@
@use "sass:color"; @use "sass:color";
@use "../global/config";
@use "../global/typography";
@use "../functions/color" as *;
// Text-Level semantics // Text-Level semantics
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// a // a
@ -43,69 +39,69 @@
// Links // Links
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
a { a {
color: config.$color_link_basic; color: $color_link_basic;
// color: color.scale($color_action_basic, $lightness: 20%); // color: color.scale($color_action_basic, $lightness: 20%);
text-decoration: none; text-decoration: none;
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
color: config.$color_highlight_basic; color: $color_highlight_basic;
} }
} }
.a_internal { .a_internal {
color: basic_color(charlie); color: $charlie_color;
} }
.a_external { .a_external {
color: basic_color(delta); color: $delta_color;
} }
.a_discreet { .a_discreet {
color: config.$color_text_basic; color: $color_text_basic;
} }
.a_line { .a_line {
border-bottom-width: config.$space_tiny; border-bottom-width: $space_tiny;
border-bottom-style: dotted; border-bottom-style: dotted;
border-color: config.$color_border_basic; border-color: $color_border_basic;
color: config.$color_text_basic; color: $color_text_basic;
background-color: transparent; background-color: transparent;
transition: color config.$duration_basic config.$timing_basic; transition: color $duration_basic $timing_basic;
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
color: config.$color_highlight_basic; color: $color_highlight_basic;
background-color: config.$color_action_basic; background-color: $color_action_basic;
} }
} }
.a_button { .a_button {
display: inline-block; display: inline-block;
padding: config.$padding_basic; padding: $padding_basic;
border-radius: config.$radius_basic; border-radius: $radius_basic;
background-color: color.adjust(config.$color_link_basic, $alpha: -0.8); background-color: color.adjust($color_link_basic, $alpha: -0.8);
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
border-color: transparent; border-color: transparent;
background-color: color.adjust(config.$color_highlight_basic, $alpha: -0.8); background-color: color.adjust($color_highlight_basic, $alpha: -0.8);
} }
} }
.a_button_text { .a_button_text {
@extend .a_button; @extend .a_button;
padding: config.$padding_link; padding: $padding_link;
color: config.$color_text_basic; color: $color_text_basic;
background-color: transparent; background-color: transparent;
} }
.a_button_border { .a_button_border {
@extend .a_button_text; @extend .a_button_text;
border: config.$border_basic; border: $border_basic;
} }
@ -116,7 +112,7 @@ i, em {
} }
.i_bright { .i_bright {
color: config.$color_highlight_basic; color: $color_highlight_basic;
font-style: normal; font-style: normal;
} }
@ -200,14 +196,14 @@ time {
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
code { code {
@extend %basic_mono; @extend %basic_mono;
color: color.scale(config.$color_text_basic, $lightness: config.$color_diff_basic); color: color.scale($color_text_basic, $lightness: $color_diff_basic);
background-color: color.scale(config.$color_back_basic, $lightness: config.$color_diff_tiny); background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny);
} }
.code_solo { .code_solo {
@extend %basic_mono; @extend %basic_mono;
padding: config.$space_tiny config.$space_half; padding: $space_tiny $space_half;
color: config.$color_text_basic; color: $color_text_basic;
} }
// Variable // Variable
@ -228,12 +224,12 @@ kbd {
@extend %basic_mono; @extend %basic_mono;
// font-size: .9em; // font-size: .9em;
// font-weight: bold; // font-weight: bold;
padding: 0 config.$space_half; padding: 0 $space_half;
border-width: config.$width_border_basic; border-width: $width_border_basic;
border-style: solid; border-style: solid;
border-color: config.$color_darker; border-color: $color_darker;
border-radius: config.$radius_basic; border-radius: $radius_basic;
color: color.scale(config.$color_text_basic, $lightness: config.$color_diff_basic); color: color.scale($color_text_basic, $lightness: $color_diff_basic);
} }
// Sub- and superscript // Sub- and superscript
@ -251,22 +247,22 @@ u {
// Marks // Marks
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
mark { mark {
background-color: basic_color(alpha); background-color: $alpha_color;
} }
.mark_cursor { .mark_cursor {
color: color.invert(config.$color_text_basic); color: color.invert($color_text_basic);
background-color: config.$color_text_basic; background-color: $color_text_basic;
} }
::-moz-selection { ::-moz-selection {
color: color.invert(config.$color_text_basic); color: color.invert($color_text_basic);
background-color: config.$color_text_basic; background-color: $color_text_basic;
} }
::selection { ::selection {
color: color.invert(config.$color_text_basic); color: color.invert($color_text_basic);
background-color: config.$color_text_basic; background-color: $color_text_basic;
} }
// Text direction // Text direction

3
functions/_all.scss Normal file
View file

@ -0,0 +1,3 @@
@import "color";
@import "shade";
@import "tint";

6
functions/_color.scss
View file

@ -1,8 +1,6 @@
@use "sass:map"; @use "sass:map";
@use "sass:color"; @use "sass:color";
@use "../global/config";
@function createColorMap($color, $percentage, $opacity) { @function createColorMap($color, $percentage, $opacity) {
$map: ( $map: (
base: $color, base: $color,
@ -13,6 +11,6 @@
@return $map; @return $map;
} }
@function basic_color($key: 'alpha', $map: config.$color_palette) { @function basic_color($key: 'alpha') {
@return map.get($map, $key); @return map.get($color_palette, $key);
} }

3
functions/_index.scss
View file

@ -1,3 +0,0 @@
@use "color" as *;
@use "shade";
@use "tint";

73
global/_common.scss
View file

@ -1,13 +1,8 @@
// Common styles for global usage
// -----------------------------------------------------------------------------
@use "sass:math"; @use "sass:math";
@use "sass:color"; @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 // General classes
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
@ -21,13 +16,13 @@
*, *,
::before, ::before,
::after { ::after {
box-sizing: config.$box_sizing; box-sizing: $box_sizing;
} }
} }
%size_io_button { %size_io_button {
border: config.$width_border_io solid transparent; border: $width_border_io solid transparent;
padding: config.$padding_basic; padding: $padding_basic;
} }
.di_none { .di_none {
@ -57,10 +52,10 @@
margin-left: 37.5%; margin-left: 37.5%;
} }
@each $size, $variable in (basic, #{config.$space_basic}), @each $size, $variable in (basic, #{$space_basic}),
(small, #{config.$space_small}), (small, #{$space_small}),
(medium, #{config.$space_medium}), (medium, #{$space_medium}),
(large, #{config.$space_large}) { (large, #{$space_large}) {
.space_top_#{$size} { .space_top_#{$size} {
margin-top: $variable; margin-top: $variable;
} }
@ -114,22 +109,22 @@
.wrap_center { .wrap_center {
& > * { & > * {
margin-right: math.div((100% - config.$width_basic), 2); margin-right: math.div((100% - $width_basic), 2);
margin-left: math.div((100% - config.$width_basic), 2); margin-left: math.div((100% - $width_basic), 2);
@include forTabletPortraitUp { @include forTabletPortraitUp {
margin-right: math.div((100% - config.$width_small), 2); margin-right: math.div((100% - $width_small), 2);
margin-left: math.div((100% - config.$width_small), 2); margin-left: math.div((100% - $width_small), 2);
} }
@include forTabletLandscapeUp { @include forTabletLandscapeUp {
margin-right: math.div((100% - config.$width_medium), 2); margin-right: math.div((100% - $width_medium), 2);
margin-left: math.div((100% - config.$width_medium), 2); margin-left: math.div((100% - $width_medium), 2);
} }
@include forBigDesktopUp { @include forBigDesktopUp {
margin-right: math.div((100% - config.$width_large), 2); margin-right: math.div((100% - $width_large), 2);
margin-left: math.div((100% - config.$width_large), 2); margin-left: math.div((100% - $width_large), 2);
} }
} }
} }
@ -160,7 +155,7 @@
.float_space_left { .float_space_left {
float: left; float: left;
margin-right: config.$space_small; margin-right: $space_small;
} }
.float_half_size { .float_half_size {
@ -188,14 +183,14 @@
flex-wrap: wrap; flex-wrap: wrap;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
gap: config.$space_half config.$space_basic; gap: $space_half $space_basic;
} }
%flex-column, %flex-column,
%flex-row { %flex-row {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
gap: config.$space_basic; gap: $space_basic;
} }
%flex-column { %flex-column {
@ -257,31 +252,31 @@
.pos_full_view { .pos_full_view {
@extend %viewport_fixed; @extend %viewport_fixed;
background-color: rgba(basic_color(alpha), 0.5); background-color: rgba($alpha_color, 0.5);
} }
.pos_full_page { .pos_full_page {
@extend %full_parent; @extend %full_parent;
background-color: rgba(basic_color(charlie), 0.25); background-color: rgba($charlie_color, 0.25);
} }
.hover_back_change { .hover_back_change {
background-color: config.$color_darker; background-color: $color_darker;
transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out;
&:hover { &:hover {
background-color: config.$color_back_basic; background-color: $color_back_basic;
} }
} }
#mouse-overlay { .mouse_over {
@extend %viewport_fixed; @extend %viewport_fixed;
z-index: config.$z_heaven; z-index: $z_heaven;
transition: background-color config.$duration_long config.$timing_basic config.$duration_long; transition: background-color $duration_long $timing_basic $duration_long;
pointer-events: none; pointer-events: none;
&.active { &.active {
background-color: color.adjust(config.$color_darkest, $alpha: -0.5); background-color: color.adjust($color_darkest, $alpha: -0.5);
} }
} }
@ -289,11 +284,11 @@
// Colors // Colors
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
.txt_color_light { .txt_color_light {
color: config.$color_brighter; color: $color_brighter;
} }
.txt_color_dark { .txt_color_dark {
color: config.$color_darker; color: $color_darker;
} }
@ -316,7 +311,7 @@
} }
.txt_hero { .txt_hero {
font-size: config.$size_hero; font-size: $size_hero;
} }
.txt_center { .txt_center {
@ -348,12 +343,8 @@
} }
.txt_gradient { .txt_gradient {
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: linear-gradient(165deg, $alpha_color 30%, $bravo_color 45%, $charlie_color 50%, $delta_color, $echo_color 80%, $foxtrot_color);
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
// Focus
// -----------------------------------------------------------------------------
@include overrideUserAgent(config.$no_agent_focus, config.$io_focus_list);

30
global/_config.scss
View file

@ -6,6 +6,7 @@
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
// TEXT // TEXT
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$size_text_basic: 17px !default; $size_text_basic: 17px !default;
@ -66,6 +67,7 @@ $family_text_card: #{'Trebuchet MS', 'Roboto', 'Segoe UI', 'Liberation Sans', 'S
$family_head_basic: $family_text_basic !default; $family_head_basic: $family_text_basic !default;
// COLORS // COLORS
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$color_palette: ( $color_palette: (
@ -76,6 +78,8 @@ $color_palette: (
echo: #52bed1, echo: #52bed1,
foxtrot: #0c85ff) !default; foxtrot: #0c85ff) !default;
@include addDefaultColors;
$color_diff_basic: 12% !default; $color_diff_basic: 12% !default;
$color_diff_tiny: 4% !default; $color_diff_tiny: 4% !default;
$color_diff_double: $color_diff_basic * 2; $color_diff_double: $color_diff_basic * 2;
@ -95,13 +99,25 @@ $color_brighter: color.scale($color_back_basic, $lightness: $color_diff_basic);
$color_bright: color.scale($color_brightest, $lightness: -$color_diff_double); $color_bright: color.scale($color_brightest, $lightness: -$color_diff_double);
$color_head_basic: $color_text_basic !default; $color_head_basic: $color_text_basic !default;
$color_link_basic: map.get($color_palette, delta) !default; $color_link_basic: $delta_color !default;
$color_highlight_basic: $color_front_basic !default; $color_highlight_basic: $color_front_basic !default;
$color_action_basic: map.get($color_palette, foxtrot) !default; $color_action_basic: $foxtrot_color !default;
// default shadow colors // default shadow colors
// $shadow_color: fade-out($color_medium, 0.5); // $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 // LAYOUT
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
@ -158,6 +174,7 @@ $z-indexes: (
); );
// IO // IO
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$io_input_list: 'input[type="text"]', $io_input_list: 'input[type="text"]',
@ -212,6 +229,7 @@ $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); $shadow_focus: $shadow_basic, 0 0 5px color.adjust($color_action_basic, $lightness: -5%, $alpha: -0.3);
// ANIMATIONS // ANIMATIONS
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$duration_basic: 200ms !default; $duration_basic: 200ms !default;
@ -223,6 +241,7 @@ $transition_hide: opacity $duration_double;
$transition_show: opacity $duration_long; $transition_show: opacity $duration_long;
// HARDWARE BREAKPOINTS // HARDWARE BREAKPOINTS
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$screen_tiny: 768px; $screen_tiny: 768px;
@ -233,6 +252,7 @@ $screen_huge: 1680px;
$screen_gigantic: 1920px; $screen_gigantic: 1920px;
// VENDOR PREFIX // VENDOR PREFIX
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$prefix_defaults: -moz- -webkit- -o- -ms- ''; $prefix_defaults: -moz- -webkit- -o- -ms- '';
@ -244,6 +264,7 @@ $moz_ms_support: -moz- -ms- '';
$webkit_ms_support: -webkit- -ms- ''; $webkit_ms_support: -webkit- -ms- '';
// SYMBOLS // SYMBOLS
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$icons: ( $icons: (
@ -261,6 +282,9 @@ $icons: (
} }
// USER AGENT // USER AGENT
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$no_agent_focus: true !default; $no_agent_focus: true;
@include overrideUserAgent;

32
global/_typography.scss
View file

@ -1,48 +1,46 @@
@use "config";
// Basic styles // Basic styles
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
%basic { %basic {
font-family: config.$family_text_basic; font-family: $family_text_basic;
font-size: config.$size_text_1; font-size: $size_text_1;
line-height: config.$line_text_basic; line-height: $line_text_basic;
} }
%basic_mono { %basic_mono {
font-family: config.$family_text_mono; font-family: $family_text_mono;
font-size: config.$size_text_1; font-size: $size_text_1;
line-height: config.$line_text_mono; line-height: $line_text_mono;
} }
%basic_print { %basic_print {
font-family: config.$family_text_print; font-family: $family_text_print;
font-size: config.$size_text_1; font-size: $size_text_1;
line-height: config.$line_text_basic; line-height: $line_text_basic;
} }
%head_all { %head_all {
font-family: config.$family_head_basic; font-family: $family_head_basic;
line-height: config.$line_head_basic; line-height: $line_head_basic;
} }
%head_1 { %head_1 {
font-size: config.$size_head_1; font-size: $size_head_1;
font-weight: 300; font-weight: 300;
} }
%head_2 { %head_2 {
font-size: config.$size_head_2; font-size: $size_head_2;
font-weight: 300; font-weight: 300;
} }
%head_3 { %head_3 {
font-size: config.$size_head_3; font-size: $size_head_3;
font-weight: 300; font-weight: 300;
} }
%head_4 { %head_4 {
font-size: config.$size_head_4; font-size: $size_head_4;
font-weight: 300; font-weight: 300;
} }

6
mixins/_all.scss Normal file
View file

@ -0,0 +1,6 @@
@import "media_query";
@import "sprite";
@import "flow";
@import "color";
@import "user_agent";
@import "vendor";

28
mixins/_color.scss
View file

@ -1,24 +1,22 @@
@use "sass:map"; @use "sass:map";
@use "../global/config"; @mixin addDefaultColors() {
@if map.has-key($color_palette, alpha) {
@mixin addDefaultColors { $alpha_color: map.get($color_palette, alpha) !global;
@if map.has-key(config.$color_palette, alpha) {
$alpha_color: map.get(config.$color_palette, alpha) !global;
} }
@if map.has-key(config.$color_palette, bravo) { @if map.has-key($color_palette, bravo) {
$bravo_color: map.get(config.$color_palette, bravo) !global; $bravo_color: map.get($color_palette, bravo) !global;
} }
@if map.has-key(config.$color_palette, charlie) { @if map.has-key($color_palette, charlie) {
$charlie_color: map.get(config.$color_palette, charlie) !global; $charlie_color: map.get($color_palette, charlie) !global;
} }
@if map.has-key(config.$color_palette, delta) { @if map.has-key($color_palette, delta) {
$delta_color: map.get(config.$color_palette, delta) !global; $delta_color: map.get($color_palette, delta) !global;
} }
@if map.has-key(config.$color_palette, echo) { @if map.has-key($color_palette, echo) {
$echo_color: map.get(config.$color_palette, echo) !global; $echo_color: map.get($color_palette, echo) !global;
} }
@if map.has-key(config.$color_palette, foxtrot) { @if map.has-key($color_palette, foxtrot) {
$foxtrot_color: map.get(config.$color_palette, foxtrot) !global; $foxtrot_color: map.get($color_palette, foxtrot) !global;
} }
} }

6
mixins/_index.scss
View file

@ -1,6 +0,0 @@
@forward "media_query";
@forward "sprite";
@forward "flow";
//@use "./_color";
@forward "user_agent";
@forward "vendor";

20
mixins/_media_query.scss
View file

@ -1,34 +1,32 @@
@use "../global/config";
@use "sass:math"; @use "sass:math";
//Sections for Media Queries //Sections for Media Queries
@mixin forPhoneUp { @mixin forPhoneUp {
@media (min-width: #{config.$screen_tiny - 1}) { @content; } //599px @media (min-width: #{$screen_tiny - 1}) { @content; } //599px
} }
@mixin forPhoneOnly { @mixin forPhoneOnly {
@media (max-width: #{config.$screen_tiny - 1}) { @content; } //599px @media (max-width: #{$screen_tiny - 1}) { @content; } //599px
} }
@mixin forTabletPortraitUp { @mixin forTabletPortraitUp {
@media (min-width: config.$screen_small) { @content; } //600px @media (min-width: $screen_small) { @content; } //600px
} }
@mixin forTabletPortraitOnly { @mixin forTabletPortraitOnly {
@media (min-width: config.$screen_tiny) and (max-width: #{config.$screen_small - 1}) { @content; } //600px - 899px @media (min-width: $screen_tiny) and (max-width: #{$screen_small - 1}) { @content; } //600px - 899px
} }
@mixin forTabletLandscapeUp { @mixin forTabletLandscapeUp {
@media (min-width: config.$screen_small) { @content; } //900px @media (min-width: $screen_small) { @content; } //900px
} }
@mixin forTabletLandscapeOnly { @mixin forTabletLandscapeOnly {
@media (min-width: config.$screen_small) and (max-width: #{config.$screen_medium - 1}) { @content; } //900px - 1199px @media (min-width: $screen_small) and (max-width: #{$screen_medium - 1}) { @content; } //900px - 1199px
} }
@mixin forDesktopUp { @mixin forDesktopUp {
@media (min-width: config.$screen_medium) { @content; } //1200px @media (min-width: $screen_medium) { @content; } //1200px
} }
@mixin forDesktopOnly { @mixin forDesktopOnly {
@media (min-width: config.$screen_medium) and (max-width: #{config.$screen_huge - 1}) { @content; } //1200px - 1799px @media (min-width: $screen_medium) and (max-width: #{$screen_huge - 1}) { @content; } //1200px - 1799px
} }
@mixin forBigDesktopUp { @mixin forBigDesktopUp {
@media (min-width: config.$screen_huge) { @content; } //1800px @media (min-width: $screen_huge) { @content; } //1800px
} }
//Mobile-first Media Query //Mobile-first Media Query

6
mixins/_user_agent.scss
View file

@ -1,6 +1,6 @@
@mixin overrideUserAgent($active, $elements) { @mixin overrideUserAgent() {
@if $active == true { @if $no_agent_focus == true {
@each $el in $elements { @each $el in $io_focus_list {
#{$el}:focus { #{$el}:focus {
outline: 0; outline: 0;
} }

28
modules/breakpoint/_breakpoint_module.scss
View file

@ -1,29 +1,20 @@
@use "../../global/config";
@use "../../mixins/media_query" as *;
.query_goingLarge { .query_goingLarge {
@include goingLarge(config.$screen_tiny) { @include goingLarge($screen_tiny) {};
}
;
} }
.query_goingSmall { .query_goingSmall {
@include goingSmall(config.$screen_gigantic) { @include goingSmall($screen_gigantic) {};
}
;
} }
.query_phoneUp { .query_phoneUp {
@include forPhoneUp { @include forPhoneUp {}
}
} }
.query_phoneOnly { .query_phoneOnly {
@include forPhoneOnly { @include forPhoneOnly {}
}
} }
.query_tabletPortraitOnly { .query_tabletPortaitOnly {
@include forTabletPortraitOnly { @include forTabletPortraitOnly {
} }
} }
@ -34,13 +25,11 @@
} }
.query_tabletLandscapeOnly { .query_tabletLandscapeOnly {
@include forTabletLandscapeOnly { @include forTabletLandscapeOnly {}
}
} }
.query_tabletLandscapeUp { .query_tabletLandscapeUp {
@include forTabletLandscapeUp { @include forTabletLandscapeUp {}
}
} }
.query_desktopOnly { .query_desktopOnly {
@ -54,6 +43,5 @@
} }
.query_bigDesktopUp { .query_bigDesktopUp {
@include forBigDesktopUp { @include forBigDesktopUp {}
}
} }

7
modules/editor/_editor_module.scss
View file

@ -1,14 +1,13 @@
// Custom extends and mixins // Custom extends and mixins
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
@use "mixins"; @import "mixins";
@use "extends"; @import "extends";
@use "../../global/config";
// Editor module styles // Editor module styles
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
%wip { %wip {
border-right: config.$space_basic solid rgba(crimson, 0.8); border-right: $space_basic solid rgba(crimson, 0.8);
background-color: rgba(crimson, 0.1) !important; background-color: rgba(crimson, 0.1) !important;
} }
.wip { .wip {

68
modules/explanation/_explanation_module.scss
View file

@ -1,38 +1,30 @@
@use "sass:color"; @use "sass:color";
@use "sass:math"; @use "sass:math";
@use "../../global/config";
@use "../../global/common";
@use "../../functions/color" as *;
@use "../../mixins/vendor";
%expose_after { %expose_after {
&::after { &::after {
content: ""; content: "";
display: block; display: block;
height: 48px; height: 48px;
background-color: rgba(basic_color(delta), 0.1) !important; background-color: rgba($delta_color, 0.1) !important;
} }
} }
%expose_before { %expose_before {
&::before { &::before {
content: ""; content: "";
display: block; display: block;
height: 48px; height: 48px;
background-color: rgba(basic_color(delta), 0.1) !important; background-color: rgba($delta_color, 0.1) !important;
} }
} }
%expose { %expose {
&::before, &::after { &::before, &::after {
content: ""; content: "";
display: block; display: block;
height: 48px; height: 48px;
background-color: rgba(basic_color(delta), 0.1) !important; background-color: rgba($delta_color, 0.1) !important;
} }
} }
// %exp { // %exp {
// } // }
%exp_hidden { %exp_hidden {
@ -45,42 +37,39 @@
.exp_overlay { .exp_overlay {
@extend %full_parent; @extend %full_parent;
background-color: color.adjust(basic_color(alpha), $alpha: -0.6); background-color: color.adjust($alpha_color, $alpha: -0.6);
} }
.exp_pop { .exp_pop {
@extend %exp_hidden !optional; @extend %exp_hidden !optional;
position: absolute; position: absolute;
z-index: 100; z-index: 100;
top: config.$space_large; top: $space_large;
left: config.$space_large; left: $space_large;
padding: config.$space_half; padding: $space_half;
border: 4px solid config.$color_back_basic; border: 4px solid $color_back_basic;
border-radius: 4px; border-radius: 4px;
background-color: config.$color_back_basic; background-color: $color_back_basic;
pointer-events: none; pointer-events: none;
} }
.exp_marker_pop { .exp_marker_pop {
position: absolute; position: absolute;
top: math.div(-(config.$size_text_basic), 4) * 3; top: math.div(-$size_text_basic, 4) * 3;
right: math.div(-(config.$size_text_basic), 2); right: math.div(-$size_text_basic, 2);
width: config.$size_text_basic; width: $size_text_basic;
height: config.$size_text_basic; height: $size_text_basic;
border: config.$space_tiny solid config.$color_highlight_basic; border: $space_tiny solid $color_highlight_basic;
border-radius: config.$size_text_basic; border-radius: $size_text_basic;
color: config.$color_highlight_basic; color: $color_highlight_basic;
background-color: config.$color_darkest; background-color: $color_darkest;
} }
.exp_expose { .exp_expose {
@extend %expose !optional; @extend %expose !optional;
} }
.exp_expose_pre { .exp_expose_pre {
@extend %expose_after; @extend %expose_after;
} }
.exp_expose_post { .exp_expose_post {
@extend %expose_before; @extend %expose_before;
} }
@ -92,25 +81,21 @@
// padding: $space_basic $space_basic * 2; // padding: $space_basic $space_basic * 2;
cursor: pointer; cursor: pointer;
} }
.exp_help_btn { .exp_help_btn {
display: table; display: table;
right: config.$space_double; right: $space_double;
bottom: config.$space_double; bottom: $space_double;
background-color: rgba(config.$color_darkest, 0.4); background-color: rgba($color_darkest, 0.4);
&:hover { &:hover {
background-color: config.$color_brightest; background-color: $color_brightest;
> .span_solo { > .span_solo {
color: config.$color_darkest; color: $color_darkest;
} }
} }
.span_solo { .span_solo {
display: table-cell; display: table-cell;
color: rgba(config.$color_brightest, 0.8); color: rgba($color_brightest, 0.8);
font-family: config.$family_text_mono; font-family: $family_text_mono;
font-size: 1.4em; font-size: 1.4em;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
@ -118,12 +103,13 @@
} }
.expose_height { .expose_height {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background-color: rgba(basic_color(delta), 0.1) !important; background-color: rgba($delta_color, 0.1) !important;
@include vendor.vendor-prefix(transition, height 0.5s ease); @include vendor-prefix(transition, height 0.5s ease);
} }

9
modules/io/_io_module.scss
View file

@ -1,10 +1,5 @@
@use "../../global/config";
@use "../../global/common";
@use "../../global/typography";
@use "../../elements/interactive";
input[type="range"] { input[type="range"] {
accent-color: config.$color_text_io; accent-color: $color_text_io;
} }
header, header,
@ -56,7 +51,7 @@ footer {
header, header,
aside { aside {
&.io { &.io {
padding: config.$space_basic; padding: $space_basic;
textarea { textarea {
@extend .io_textarea; @extend .io_textarea;

9
modules/maintenance/_maintenance_module.scss
View file

@ -1,12 +1,7 @@
@use "../../global/config";
@use "../../global/common";
@use "../../elements/sections";
@use "../../functions/color" as *;
.body_status { .body_status {
@extend .sec_main_status; @extend .sec_main_status;
height: 100vh; height: 100vh;
border-color: basic_color(foxtrot); border-color: $foxtrot_color;
.main_site { .main_site {
@extend .wrap_center; @extend .wrap_center;
@ -18,7 +13,7 @@
} }
& > h1 + h3 { & > h1 + h3 {
margin-top: 0; margin-top: 0;
margin-bottom: config.$space_small; margin-bottom: $space_small;
} }
} }
} }

43
modules/navigation/_nav_module.scss
View file

@ -1,6 +1,3 @@
@use "../../global/config";
@use "../../global/common";
nav { nav {
ul, ul,
@ -9,7 +6,7 @@ nav {
} }
li { li {
margin-bottom: config.$space_basic; margin-bottom: $space_basic;
list-style: none; list-style: none;
} }
} }
@ -19,12 +16,12 @@ nav {
@extend .overflow; @extend .overflow;
ul { ul {
margin: config.$space_basic 0; margin: $space_basic 0;
} }
li { li {
@extend .float_space_left; @extend .float_space_left;
margin-right: config.$space_basic; margin-right: $space_basic;
margin-bottom: 0; margin-bottom: 0;
&:last-child { &:last-child {
@ -36,28 +33,28 @@ nav {
.nav_right { .nav_right {
float: right; float: right;
margin-left: config.$space_basic; margin-left: $space_basic;
.align_parent { .align_parent {
margin-right: config.$space_basic * -1; margin-right: $space_basic * -1;
} }
} }
.nav_separate { .nav_separate {
li { li {
position: relative; position: relative;
padding-left: config.$space_tiny; padding-left: $space_tiny;
&:not(:first-child) { &:not(:first-child) {
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
width: config.$space_tiny; width: $space_tiny;
height: 100%; height: 100%;
left: 0; left: 0;
top: 0; top: 0;
background-color: config.$color_border_basic; background-color: $color_border_basic;
} }
} }
} }
@ -69,17 +66,17 @@ nav {
position: relative; position: relative;
&:first-child { &:first-child {
padding-left: config.$space_basic * 2 + config.$space_tiny; padding-left: $space_basic * 2 + $space_tiny;
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
width: config.$space_tiny; width: $space_tiny;
height: 100%; height: 100%;
left: 0; left: 0;
top: 0; top: 0;
background-color: config.$color_front_basic; background-color: $color_front_basic;
margin: 0 config.$space_basic; margin: 0 $space_basic;
} }
} }
} }
@ -100,11 +97,11 @@ nav {
.nav_column { .nav_column {
position: relative; position: relative;
margin: config.$space_basic 0; margin: $space_basic 0;
ul { ul {
display: flex; display: flex;
margin: 0 config.$space_large; margin: 0 $space_large;
li { li {
flex: auto; flex: auto;
@ -122,11 +119,11 @@ nav {
position: fixed; position: fixed;
// display: table; // display: table;
// width: 3em; // width: 3em;
right: config.$space_half; right: $space_half;
bottom: config.$space_double; bottom: $space_double;
ul { ul {
margin: config.$space_basic 0; margin: $space_basic 0;
} }
li { li {
@ -148,7 +145,7 @@ nav {
} }
&:hover { &:hover {
background-color: config.$color_action_basic; background-color: $color_action_basic;
} }
} }
.sprite_img { .sprite_img {
@ -166,8 +163,8 @@ nav {
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
background-color: rgba(config.$color_text_basic, 0.2); background-color: rgba($color_text_basic, 0.2);
color: config.$color_text_basic; color: $color_text_basic;
} }
} }
} }

17
modules/print/_print_module.scss
View file

@ -1,15 +1,13 @@
@use "sass:list"; @use "sass:list";
@use "../../global/config"; @import "mixins";
@use "../../global/typography"; @import "extends";
@use "mixins";
@use "extends";
// Print module styles // Print module styles
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
%paper { %paper {
background-color: config.$color_front_basic; background-color: $color_front_basic;
} }
$a4: ".dina4" 1.2cm 1.2cm 1.2cm 2.4cm; $a4: ".dina4" 1.2cm 1.2cm 1.2cm 2.4cm;
@ -19,7 +17,7 @@ $a6: ".dina6" 0 0 0 1.2cm;
$din: $a4, $a5, $a6; $din: $a4, $a5, $a6;
.print_body { .print_body {
font-size: config.$size_text_print; font-size: $size_text_print;
margin: 10vh 20vw; margin: 10vh 20vw;
@page { @page {
@ -40,11 +38,9 @@ $din: $a4, $a5, $a6;
right: list.nth($space, 3); right: list.nth($space, 3);
left: list.nth($space, 5); left: list.nth($space, 5);
} }
.page_head { .page_head {
top: list.nth($space, 2); top: list.nth($space, 2);
} }
.page_foot { .page_foot {
bottom: list.nth($space, 4); bottom: list.nth($space, 4);
} }
@ -90,18 +86,15 @@ $din: $a4, $a5, $a6;
line-height: 1; line-height: 1;
text-align: right; text-align: right;
} }
p:first-child { p:first-child {
text-align: left; text-align: left;
} }
} }
.page_content { .page_content {
margin-top: 10cm; margin-top: 10cm;
margin-bottom: 2cm; margin-bottom: 2cm;
} }
margin: $space_small auto;
margin: config.$space_small auto;
} }
.page_title, .page_date { .page_title, .page_date {

20
modules/tables/_tables_module.scss
View file

@ -1,17 +1,13 @@
@use "../../global/config";
@use "../../global/typography";
@use "../../functions/color" as *;
.table_link { .table_link {
width: 100%; width: 100%;
border: 0; border: 0;
table-layout: auto; table-layout: auto;
tbody { tbody {
border-bottom: config.$border_basic; border-bottom: $border_basic;
&:hover { &:hover {
background-color: config.$color_bright; background-color: $color_bright;
} }
} }
@ -30,11 +26,11 @@
} }
.cell_link { .cell_link {
padding-right: config.$space_basic; padding-right: $space_basic;
padding-left: config.$space_basic; padding-left: $space_basic;
&:hover { &:hover {
background-color: basic_color(foxtrot); background-color: $foxtrot_color;
a:first-child { a:first-child {
display: none; display: none;
@ -42,7 +38,7 @@
a:last-child { a:last-child {
display: block; display: block;
color: config.$color_highlight_basic; color: $color_highlight_basic;
} }
} }
@ -62,8 +58,8 @@
} }
.cell_text { .cell_text {
padding-right: config.$space_basic; padding-right: $space_basic;
padding-left: config.$space_basic; padding-left: $space_basic;
div { div {
width: 100%; width: 100%;