From f97f76ee3dbcefdf3e4d623db2e156af6ba3fdab Mon Sep 17 00:00:00 2001 From: Stephan Hagedorn Date: Tue, 22 Aug 2017 16:50:09 +0200 Subject: [PATCH] New stuff --- _default.scss | 21 - _hippie.scss | 33 +- {basic => elements}/_embedded.scss | 0 {basic => elements}/_grouping.scss | 28 +- {basic => elements}/_interactive.scss | 16 +- {basic => elements}/_new.scss | 13 +- {basic => elements}/_sections.scss | 0 {basic => elements}/_tables.scss | 2 +- {basic => elements}/_textlevel.scss | 13 +- {basic => elements}/_typography.scss | 0 example.css | 2098 +++++++++-------- example.html | 55 +- functions/_all.scss | 3 + functions/_color.scss | 13 + functions/_shade.scss | 24 + functions/_tint.scss | 24 + {basic => global}/_common.scss | 8 +- _config.scss => global/_config.scss | 114 +- global/_default.scss | 23 + mixins/_all.scss | 3 + mixins/_clearflow.scss | 25 + mixins/_color.scss | 20 + mixins/_user_agent.scss | 9 + modules/card/_card_module.scss | 2 +- .../demo/_demo_module.scss | 16 +- modules/editor/_editor_module.scss | 4 +- modules/explanation/_explanation_module.scss | 16 +- modules/navigation/_nav_module.scss | 22 +- modules/print/_print_module.scss | 2 +- modules/tables/_tables_module.scss | 2 +- 30 files changed, 1463 insertions(+), 1146 deletions(-) delete mode 100644 _default.scss rename {basic => elements}/_embedded.scss (100%) rename {basic => elements}/_grouping.scss (87%) rename {basic => elements}/_interactive.scss (86%) rename {basic => elements}/_new.scss (53%) rename {basic => elements}/_sections.scss (100%) rename {basic => elements}/_tables.scss (96%) rename {basic => elements}/_textlevel.scss (89%) rename {basic => elements}/_typography.scss (100%) create mode 100644 functions/_all.scss create mode 100644 functions/_color.scss create mode 100644 functions/_shade.scss create mode 100644 functions/_tint.scss rename {basic => global}/_common.scss (96%) rename _config.scss => global/_config.scss (82%) create mode 100644 global/_default.scss create mode 100644 mixins/_all.scss create mode 100644 mixins/_clearflow.scss create mode 100644 mixins/_color.scss create mode 100644 mixins/_user_agent.scss rename basic/_demo.scss => modules/demo/_demo_module.scss (77%) diff --git a/_default.scss b/_default.scss deleted file mode 100644 index a70d492..0000000 --- a/_default.scss +++ /dev/null @@ -1,21 +0,0 @@ -// Main configuration -// ------------------------------------------------------------------------------ - -//$default_font_size: 15px; -//$default_print_font_size: 10pt; - -//$default_line_height: 1.5; - -//$default_font_family: #{'Roboto', 'Trebuchet MS', Helvetica, 'Source Sans', Arial, sans-serif, sans}; - -//$dark_color: black !default; -//$bright_color: white !default; -//$medium_color: lighten($dark_color, 50%) !default; - -//$default_back_color: lighten(black, 50%); - -//$default_space: 8px; - -//$tiny_space: 1px; - -//$default_border_width: $tiny_space; \ No newline at end of file diff --git a/_hippie.scss b/_hippie.scss index 76fb183..5fe1018 100644 --- a/_hippie.scss +++ b/_hippie.scss @@ -2,6 +2,7 @@ * # TABLE OF CONTENTS * * - Reset + * - Global functions and mixins * - Configuration * - Special modules * - Basic styles @@ -27,6 +28,14 @@ +// 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 // ----------------------------------------------------------------------------- @@ -38,8 +47,8 @@ // Adjustments can be made by copying values from _config.scss to _override.scss // Be careful though changes will get lost if hippie gets updated // ----------------------------------------------------------------------------- -@import "default"; // EDIT -@import "config"; // DO NOT EDIT +@import "global/default"; // DO NOT EDIT +@import "global/config"; // DO NOT EDIT @import "override"; // EDIT @@ -54,16 +63,16 @@ // Basic styles - this is the core of definitions // Individual styles can be added her // ----------------------------------------------------------------------------- -@import "basic/common"; -@import "basic/typography"; +@import "global/common"; +@import "elements/typography"; // Following the w3c document element structure // https://w3c.github.io/html/index.html#contents -@import "basic/sections"; -@import "basic/grouping"; -@import "basic/textlevel"; -@import "basic/embedded"; -@import "basic/tables"; -@import "basic/interactive"; +@import "elements/sections"; +@import "elements/grouping"; +@import "elements/textlevel"; +@import "elements/embedded"; +@import "elements/tables"; +@import "elements/interactive"; // @import "YOU-NAME-IT"; // Individual Modules and variables @@ -81,11 +90,11 @@ // Demonstration -@import "basic/demo"; +@import "modules/demo/demo_module"; // Not yet sorted -@import "basic/new"; +@import "elements/new"; // NOTE // No css rules allowed in here diff --git a/basic/_embedded.scss b/elements/_embedded.scss similarity index 100% rename from basic/_embedded.scss rename to elements/_embedded.scss diff --git a/basic/_grouping.scss b/elements/_grouping.scss similarity index 87% rename from basic/_grouping.scss rename to elements/_grouping.scss index a24e083..cbe9550 100644 --- a/basic/_grouping.scss +++ b/elements/_grouping.scss @@ -13,7 +13,7 @@ p { } .p__col_line { - column-rule: $basic_border_width solid $dark_color; + column-rule: $basic_border_width solid $darkest_color; } .p__col_2, .p__col_3 { @extend p; @@ -37,7 +37,7 @@ hr { margin: $space_3 auto; border-width: $basic_border_width 0 0; border-style: solid; - border-color: $dark_color; + border-color: $darkest_color; } .hr__hidden { @@ -57,12 +57,12 @@ pre { .pre__code { // overflow-x: scroll; - border-color: rgba($bright_color,.1); + border-color: rgba($brightest_color,.1); border-style: dotted; border-width: 0 0 0 $border_width_4; border-radius: $basic_corner; padding: $basic_space; - background-color: rgba($bright_color,.1); + background-color: rgba($brightest_color,.1); code { background-color: transparent; } @@ -116,7 +116,7 @@ ul { list-style: none; position: relative; - &:before { + &::before { content: "_"; position: absolute; left: -1em; @@ -218,10 +218,10 @@ div { .box__placeholder { width: 100%; height: $space_4; - border: $border_width_4 solid rgba($dark_color,.1); + border: $border_width_4 solid rgba($darkest_color,.1); border-radius: $basic_corner; padding: $basic_space; - background-color: rgba($dark_color,.1); + background-color: rgba($darkest_color,.1); svg { vertical-align: top; } @@ -230,10 +230,20 @@ div { .box__placeholder_bkg { width: 100%; height: $space_4; - border: $border_width_4 solid rgba($dark_color,.1); + border: $border_width_4 solid rgba($darkest_color,.1); border-radius: $basic_corner; padding: $basic_space; /*data:[][;charset=][;base64],*/ background: url("data:image/svg+xml;utf8,") no-repeat; - background-color: rgba($dark_color,.1); + background-color: rgba($darkest_color,.1); +} + +// Flex +.box__column { + @extend .flex; + + .column { + @extend .flex_child; + flex-grow: 1; + } } diff --git a/basic/_interactive.scss b/elements/_interactive.scss similarity index 86% rename from basic/_interactive.scss rename to elements/_interactive.scss index f3a48df..d956505 100644 --- a/basic/_interactive.scss +++ b/elements/_interactive.scss @@ -7,6 +7,7 @@ form { fieldset { margin: $basic_space 0; + padding: $basic_space; border: $basic_border; } @@ -21,6 +22,13 @@ legend { // ----------------------------------------------------------------------------- label { @extend %basic; + + & + input { + margin-left: $basic_space; + } + input + & { + margin-left: $basic_space; + } } .input_default label { @@ -37,8 +45,8 @@ label { color: $basic_io_font_color; &:hover { - background-color: $dark_color; - color: $bright_color; + background-color: $darkest_color; + color: $brightest_color; } } } @@ -119,5 +127,5 @@ dialog { // ----------------------------------------------------------------------------- canvas { - -} \ No newline at end of file + +} diff --git a/basic/_new.scss b/elements/_new.scss similarity index 53% rename from basic/_new.scss rename to elements/_new.scss index 2add945..3a6c03d 100644 --- a/basic/_new.scss +++ b/elements/_new.scss @@ -1,16 +1,16 @@ .test { - li:after { + li::after { content: ""; display: block; height: 16px; } } -.front_color_1 { color: $alpha_color; &:after { background-color: $alpha_color; } } -.front_color_2 { color: $bravo_color; &:after { background-color: $bravo_color; } } -.front_color_3 { color: $charlie_color; &:after { background-color: $charlie_color; } } -.front_color_4 { color: $delta_color; &:after { background-color: $delta_color; } } -.front_color_5 { color: $echo_color; &:after { background-color: $echo_color; } } +.front_color_1 { color: $alpha_color; &::after { background-color: $alpha_color; } } +.front_color_2 { color: $bravo_color; &::after { background-color: $bravo_color; } } +.front_color_3 { color: $charlie_color; &::after { background-color: $charlie_color; } } +.front_color_4 { color: $delta_color; &::after { background-color: $delta_color; } } +.front_color_5 { color: $echo_color; &::after { background-color: $echo_color; } } .back_color_1 { background-color: $alpha_color;} .back_color_2 { background-color: $bravo_color;} @@ -36,4 +36,3 @@ @extend %label; @extend .back_color_3; } - diff --git a/basic/_sections.scss b/elements/_sections.scss similarity index 100% rename from basic/_sections.scss rename to elements/_sections.scss diff --git a/basic/_tables.scss b/elements/_tables.scss similarity index 96% rename from basic/_tables.scss rename to elements/_tables.scss index 602c938..4283db3 100644 --- a/basic/_tables.scss +++ b/elements/_tables.scss @@ -60,7 +60,7 @@ tfoot { } tr:nth-child(even) td { - background-color: $light_color; + background-color: $bright_color; } } diff --git a/basic/_textlevel.scss b/elements/_textlevel.scss similarity index 89% rename from basic/_textlevel.scss rename to elements/_textlevel.scss index 66b1679..1713243 100644 --- a/basic/_textlevel.scss +++ b/elements/_textlevel.scss @@ -53,6 +53,11 @@ i, em { font-style: italic; } +.i__bright { + font-style: normal; + color: $brightest_color; +} + b, strong { font-weight: 500; // TODO maybe bolder } @@ -91,7 +96,7 @@ time { code { @extend %basic_mono; color: lighten($basic_font_color, 12%); - background-color: rgba($bright_color,.1); + background-color: rgba($brightest_color,.1); } .code__solo { @extend %basic_mono; @@ -121,15 +126,15 @@ mark { } .mark__cursor { color: $basic_highlight_color; - background-color: $dark_color; + background-color: $darkest_color; } ::-moz-selection { color: $basic_highlight_color; - background-color: $dark_color; + background-color: $darkest_color; } ::selection { color: $basic_highlight_color; - background-color: $dark_color; + background-color: $darkest_color; } span { diff --git a/basic/_typography.scss b/elements/_typography.scss similarity index 100% rename from basic/_typography.scss rename to elements/_typography.scss diff --git a/example.css b/example.css index 6cbb245..2cd2d1a 100644 --- a/example.css +++ b/example.css @@ -1,1014 +1,1084 @@ -@charset "UTF-8"; -/* - * # TABLE OF CONTENTS - * - * - Reset - * - Configuration - * - Special modules - * - Basic styles - * - Common - * - Typography - * - * - Sections - * - Grouping - * - Textlevel - * - Embedded - * - Tables - * - Interactive - * - Modules - * - */ -@import url(other/normalize.css); -/** - * @description - * Generates cross-browser-compatible output for a given element with its value. - * - * @author sthag - * - * @param values - * @returns - * -webkit-: - * ...-: - * - * @example - * .selector - * @include vendor-prefix(hyphens, auto) - */ -.magic { - display: none; } - -.center_50 { - margin-right: 25%; - margin-left: 25%; } - -.center_25 { - margin-right: 37.5%; - margin-left: 37.5%; } - -.width_full { - width: 100%; - margin-right: 0; - margin-left: 0; } - -.height_basic { - height: 1024px; } - -.txt_center { - text-align: center !important; } - -.txt_right { - text-align: right !important; } - -.txt_left { - text-align: left !important; } - -.clear { - clear: both; } - .clear::before, .clear::after { - clear: both; } - -.float_left, .list__horizontal li, .box__inline_left, .nav__horizontal ul li, .nav__center_old ul li, .header__page nav ul li { - float: left; - margin-right: 32px; } - -.overflow, .nav__horizontal ul, .nav__center_old ul, .header__page nav ul { - overflow: auto; } - -.x_long { - overflow-x: scroll; } - -.pos_full_view, .hover_full_view_change { - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; } - -.pos_full_page { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; } - -.pos_abs { - position: absolute; } - -.pos_rel { - position: relative; } - -.pos_fix { - position: fixed; } - -.pos_bottom { - bottom: 0; } - -.pos_full_view { - background-color: rgba(250, 216, 3, 0.5); } - -.pos_full_page { - background-color: rgba(39, 63, 139, 0.25); } - -.hover_back_change { - background-color: #666666; - transition: background-color .2s ease-in-out; } - .hover_back_change:hover { - background-color: gray; } - -.hover_full_view_change { - z-index: 1000; - background-color: rgba(0, 0, 0, 0.5); - transition: background-color .2s ease-in-out; - pointer-events: none; } - -.flex, .nav__column ul { - display: flex; } - -.flex_child, .nav__column ul li { - flex: 0 1 auto; } - -.txt_light_color { - color: #666666; } - -.a__button, .a__button_text, .a__button_border { - display: inline-block; - padding: calc(8px - 3px) 8px; - background-color: rgba(82, 190, 209, 0.2); - border-radius: 1px; } - .a__button:active, .a__button_text:active, .a__button_border:active, .a__button:focus, .a__button_text:focus, .a__button_border:focus, .a__button:hover, .a__button_text:hover, .a__button_border:hover { - background-color: rgba(255, 255, 255, 0.1); - color: white; - border-color: transparent; } - -.span__solo, h6, p, .p__col_2, .p__col_3, caption, li, dt, dd, figcaption, th, td, legend, label { - font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans; - font-size: 1em; - line-height: 1.5; } - -pre, code, .code__solo { - font-family: Courier New, monospace; - font-size: 1em; - line-height: 1.5; } - -.print_body *[class^="din"] p, .print_body *[class^="din"] .p__col_2, .print_body *[class^="din"] .p__col_3, .print_body *[class^="din"] caption { - font-family: Courier New, monospace; - font-size: 1em; - line-height: 1.5; } - -h1, .print_body .page_date, .print_body .page_no { - font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans; - font-size: 3.1em; - font-weight: 300; - line-height: 1.5; } - -h2 { - font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans; - font-size: 2.5em; - font-weight: 300; - line-height: 1.5; } - -h3, h4 { - font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans; - font-size: 1.8em; - font-weight: 300; - line-height: 1.5; } - -h5 { - font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans; - font-size: 1.35em; - font-weight: 300; - line-height: 1.5; } - -.span__solo { - color: black; } - -.table__link .cell__text .shorten { - overflow: hidden; - text-overflow: ellipsis; - -o-text-overflow: ellipsis; } - -html { - height: 100%; } - -body { - position: relative; - box-sizing: border-box; - font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans; - font-size: 17px; - line-height: 1; - color: black; - background-color: gray; } - body *, - body ::before, - body ::after { - box-sizing: inherit; } - body:hover .trigger__hover { - background-color: transparent; } - -.sec__main_center, .demo__intro { - width: 96%; - margin: 0 auto; - padding-top: 32px; } -@media screen and (orientation: landscape) and (min-width: 1024px) { - .sec__main_center, .demo__intro { - width: 80%; } } -@media screen and (orientation: landscape) and (min-width: 1280px) { - .sec__main_center, .demo__intro { - width: 60%; } } -@media screen and (orientation: landscape) and (min-width: 1920px) { - .sec__main_center, .demo__intro { - width: 48%; } } - -@media screen and (orientation: portrait) and (min-width: 1024px) { - .sec__main_center, .demo__intro { - width: 80%; } } - -aside.right + section { - margin-right: calc(20% + 8px); } -aside.left + section { - margin-left: calc(20% + 8px); } - -aside { - width: 20%; } - aside.left { - float: left; } - aside.right { - float: right; } - aside *:first-child { - margin-top: 0; } - -.header__page { - overflow: auto; } - -h1 { - margin: 128px 0 32px; } - -h2 { - margin: 64px 0 32px; } - -h3 { - margin: 16px 0 16px; - text-transform: uppercase; } - -h4 { - margin: 16px 0 16px; - text-transform: none; } - -h5 { - margin: 16px 0 8px; - text-transform: none; } - -h6 { - margin: 8px 0; - text-transform: none; - font-weight: bold; } - -p, .p__col_2, .p__col_3, caption { - margin: 8px 0; } - p code, .p__col_2 code, .p__col_3 code, caption code { - padding: 1px 4px; - font-size: 1em; - line-height: 1; } - -.p__col_line { - column-rule: 1px solid black; } - -.p__col_2 { - column-count: 2; - column-gap: 32px; } - -.p__col_3 { - column-count: 3; - column-gap: 64px; } - -hr, .hr__hidden, .hr__dotted { - margin: 32px auto; - border-width: 1px 0 0; - border-style: solid; - border-color: black; } - -.hr__hidden { - border-color: transparent; } - -.hr__dotted { - border-style: dotted; } - -.pre__code { - border-color: rgba(255, 255, 255, 0.1); - border-style: dotted; - border-width: 0 0 0 4px; - border-radius: 1px; - padding: 8px; - background-color: rgba(255, 255, 255, 0.1); } - .pre__code code { - background-color: transparent; } - -blockquote { - margin: 8px 2em; } - -.quote__mark p::before, .quote__mark .p__col_2::before, .quote__mark .p__col_3::before, .quote__mark caption::before { - content: "\201E \0020"; } -.quote__mark p::after, .quote__mark .p__col_2::after, .quote__mark .p__col_3::after, .quote__mark caption::after { - content: "\201C \0020"; } -.quote__mark .quote__source::before, .quote__mark .quote__source::after { - content: ""; } - -dl, ul, ol { - margin: 16px 0 8px; } - -ul, ol { - padding-left: 2em; } - -li, dt, dd { - color: black; } - -dd { - margin-left: 2em; } - -ul li { - list-style: square; } - -.list__dash li { - list-style: none; - position: relative; } - .list__dash li:before { - content: "_"; - position: absolute; - left: -1em; } - -.list__link li { - margin-bottom: 2px; - text-transform: uppercase; } - .list__link li a { - display: block; - padding: calc(8px - 3px) 8px; - color: black; } - .list__link li a img { - margin-right: 8px; - padding-bottom: .2em; - vertical-align: text-bottom; } - .list__link li a:active, .list__link li a:focus, .list__link li a:hover { - background-color: #0c85ff; - color: white; } - -.list__horizontal { - overflow: auto; } - -figure { - margin: 16px 2em; } - -.box__info { - padding: 16px 2em; - border-right: 8px solid rgba(82, 190, 209, 0.6); - background-color: rgba(82, 190, 209, 0.1) !important; } - -.box__main_indent { - margin-left: 25%; } - -.box__space { - position: relative; - width: 100%; } - -.box__cube { - float: left; - display: table; - width: 64px; - text-align: center; - vertical-align: middle; } - .box__cube span { - display: table-cell; } - -.box__placeholder { - width: 100%; - height: 64px; - border: 4px solid rgba(0, 0, 0, 0.1); - border-radius: 1px; - padding: 8px; - background-color: rgba(0, 0, 0, 0.1); } - .box__placeholder svg { - vertical-align: top; } - -.box__placeholder_bkg { - width: 100%; - height: 64px; - border: 4px solid rgba(0, 0, 0, 0.1); - border-radius: 1px; - padding: 8px; - /*data:[][;charset=][;base64],*/ - background: url("data:image/svg+xml;utf8,") no-repeat; - background-color: rgba(0, 0, 0, 0.1); } - -a { - color: #52bed1; - text-decoration: none; } - a:active, a:focus, a:hover { - color: white; } - -.a__line { - border-bottom-width: 1px; - border-bottom-style: dotted; - border-color: black; - background-color: transparent; - color: black; - transition: color 150ms ease; } - .a__line:active, .a__line:focus, .a__line:hover { - background-color: #0c85ff; - color: white; } - -.a__button_text, .a__button_border { - padding: calc(8px - 1px) calc(8px * 2); - background-color: transparent; - color: black; } - -.a__button_border { - border: 1px solid #666666; } - -i, em { - font-style: italic; } - -b, strong { - font-weight: 500; } - -cite { - font-style: italic; } - -code { - color: #1f1f1f; - background-color: rgba(255, 255, 255, 0.1); } - -.code__solo { - padding: 1px 4px; - color: black; } - -mark { - background-color: #fad803; } - -.mark__cursor { - color: white; - background-color: black; } - -::-moz-selection { - color: white; - background-color: black; } - -::selection { - color: white; - background-color: black; } - -img { - vertical-align: top; } - -table { - margin-top: 16px; - margin-bottom: 16px; - border: 1px solid black; - border-collapse: collapse; } - -th, td { - padding: 4px; } - -th { - border: 1px solid black; - text-align: left; } - -.precol { - border-right: 1px solid black; } - -td { - border-right: 1px solid #666666; - border-bottom: 1px solid #666666; } - -td:last-child { - border-right: 0; } - -tr:last-child td { - border-bottom: 0; } - -tfoot tr:first-child td { - border-top: 1px solid black; } - -.table_blank { - border: 1px solid transparent; } - .table_blank th, .table_blank td { - border: 1px solid transparent; } - -.table_free { - border: 1px solid transparent; } - -.table_stripe td { - border-top: 0; - border-bottom: 0; } -.table_stripe tr:nth-child(even) td { - background-color: #8c8c8c; } - -.table_fix { - table-layout: fixed; } - -caption { - padding: 4px 0; - border: 1px dotted black; - text-align: center; } - -fieldset { - margin: 8px 0; - border: 1px solid black; } - -legend { - padding: 0 4px; } - -.input_default label { - display: table; - margin: 4px 0; } - .input_default label input { - display: table-cell; - margin-left: 8px; - padding: 4px 5px; - border-style: solid; - border-color: transparent; - background-color: #404040; - color: #e6e6e6; } - .input_default label input:hover { - background-color: black; - color: white; } - -nav ul { - padding-left: 0; } -nav li { - margin-bottom: 8px; - list-style: none; } - -.nav__horizontal ul ul, .nav__center_old ul ul, .header__page nav ul ul { - margin: 8px 0; } -.nav__horizontal ul li, .nav__center_old ul li, .header__page nav ul li { - margin-right: 8px; - margin-bottom: 0; } - .nav__horizontal ul li:last-child, .nav__center_old ul li:last-child, .header__page nav ul li:last-child { - margin-right: 0; } - -.nav__right { - float: right; - margin-left: 8px; } - .nav__right .align_parent { - margin-right: -8px; } - -.nav__separate_right { - float: right; } - .nav__separate_right li { - position: relative; } - .nav__separate_right li:first-child { - padding-left: 17px; } - .nav__separate_right li:first-child::before { - content: ""; - position: absolute; - width: 1px; - height: 100%; - left: 0; - top: 0; - background-color: white; - margin: 0 8px; } - -.nav__center_old { - float: right; - position: relative; - left: -50%; } - .nav__center_old ul { - position: relative; - left: 50%; - text-align: center; } - -.nav__column { - position: relative; - margin: 8px 0; } - .nav__column ul { - margin: 0 128px; } - .nav__column ul li { - flex-grow: 1; - margin: 0; - text-align: center; } - .nav__column ul li a { - display: block; } - -.nav__page_meta { - position: fixed; - right: 0; - bottom: 16px; } - .nav__page_meta ul { - margin: 8px 0; } - .nav__page_meta li { - margin-bottom: 0; } - .nav__page_meta .a_button_meta { - display: inline-block; } - .nav__page_meta .a_button_meta:active, .nav__page_meta .a_button_meta:focus { - background-color: transparent; } - .nav__page_meta .a_button_meta:hover { - background-color: #0c85ff; } - -.header__page nav a:active, .header__page nav a:focus, .header__page nav a:hover { - background-color: rgba(0, 0, 0, 0.2); - color: black; } - -.table__link { - width: 100%; - border: 0; - table-layout: auto; } - .table__link tbody { - border-bottom: 1px solid #666666; } - .table__link tbody:hover { - background-color: #8c8c8c; } - .table__link th, .table__link td { - border: 0; } - .table__link .cell__icon { - width: 48px; - text-align: center; } - .table__link .cell__icon img { - vertical-align: text-top; } - .table__link .cell__link { - padding-right: 8px; - padding-left: 8px; } - .table__link .cell__link:hover { - background-color: #0c85ff; } - .table__link .cell__link:hover a:first-child { - display: none; } - .table__link .cell__link:hover a:last-child { - display: block; - color: white; } - .table__link .cell__link a { - display: block; } - .table__link .cell__link a:last-child { - display: none; } - .table__link th:last-child, .table__link .cell__date { - width: 16%; - text-align: center; } - .table__link .cell__text { - padding-right: 8px; - padding-left: 8px; } - .table__link .cell__text div { - width: 100%; } - .table__link .cell__text .shorten { - max-height: 44px; } - -.card_body .bkg_box { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; } - -.card_body { - height: 100%; - /* .full { - position: absolute; - width: 128px; - height: 128px; - top: 16px; - left: 16px; - background-color: #fff; - } - .mark { - float: left; - width: 32px; - height: 32px; - margin-top: 16px; - } - */ } - .card_body .bkg_box { - transition-duration: 800ms; - overflow: hidden; - vertical-align: top; - z-index: -1; } - .card_body .bkg_box > svg { - position: relative; } - .card_body .flex_wrap_center { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -webkit-align-items: center; - -moz-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -moz-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - height: 100%; } - .card_body .flex_content { - position: relative; - padding: 64px 64px 24px 64px; - border: 1px solid #FFF; - background-color: #F5F5F5; - z-index: 40; } - .card_body h1 { - margin: 16px 0; - color: #1E1E1E; - font-size: 24px; - line-height: 1.4em; - font-weight: normal; } - .card_body p, .card_body .p__col_2, .card_body .p__col_3, .card_body caption { - margin-top: 0; - margin-bottom: 16px; - font-size: 12px; - line-height: 1.4em; } - .card_body .marked { - padding-left: 1em; - text-indent: -1em; - text-align: center; } - .card_body .marked:before { - content: "* "; } - .card_body .decent { - color: #666; } - .card_body a { - color: #000; - text-decoration: none; } - .card_body a:hover { - color: #F4F9FA; - background-color: #0C85FF; - text-decoration: none; } - -.wip, .wip_txt { - border-right: 8px solid rgba(220, 20, 60, 0.8); - background-color: rgba(220, 20, 60, 0.1) !important; } - -.wip:before, .wip:after { - content: ""; - display: block; - height: 48px; } - -.exp_expose_pre:after { - content: ""; - display: block; - height: 48px; - background-color: rgba(183, 224, 240, 0.1) !important; } - -.exp_expose_post:before { - content: ""; - display: block; - height: 48px; - background-color: rgba(183, 224, 240, 0.1) !important; } - -.exp_expose:before, .exp_expose:after { - content: ""; - display: block; - height: 48px; - background-color: rgba(183, 224, 240, 0.1) !important; } - -.exp_pop { - display: none; } - -.exp_wrap { - position: relative; } - -.exp_pop { - position: absolute; - z-index: 100; - top: 128px; - left: 128px; - padding: 4px; - border: 4px solid gray; - border-radius: 4px; - background-color: gray; - pointer-events: none; } - -.exp_marker_pop { - position: absolute; - top: -12.75px; - right: -8.5px; - width: 17px; - height: 17px; - border: 1px solid white; - border-radius: 17px; - color: white; - background-color: black; } - -.exp_overlay_btn { - position: fixed; - width: 3em; - height: 2em; - cursor: pointer; } - -.exp_help_btn { - display: table; - right: 16px; - bottom: 16px; - background-color: rgba(0, 0, 0, 0.4); } - .exp_help_btn:hover { - background-color: white; } - .exp_help_btn:hover > .span__solo { - color: black; } - .exp_help_btn .span__solo { - display: table-cell; - color: rgba(255, 255, 255, 0.8); - font-family: Courier New, monospace; - font-size: 1.4em; - text-align: center; - vertical-align: middle; } - -.expose_height { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: rgba(183, 224, 240, 0.1) !important; - -webkit-transition: height 0.5s ease; - -ms-transition: height 0.5s ease; - -moz-transition: height 0.5s ease; - -o-transition: height 0.5s ease; - transition: height 0.5s ease; } - -.print_body *[class^="din"] { - background-color: white; } - -.print_body { - font-size: 10pt; - margin: 10vh 20vw; } -@page { - .print_body { - size: A4; - margin: 1.2cm; } } -@page :first { - .print_body { - size: A4; - margin: 0; } } - .print_body .dina4 { - padding-top: 1.2cm; - padding-right: 1.2cm; - padding-bottom: 1.2cm; - padding-left: 2.4cm; } - .print_body .dina4 .page_head, .print_body .dina4 .page_foot { - right: 1.2cm; - left: 2.4cm; } - .print_body .dina4 .page_head { - top: 1.2cm; } - .print_body .dina4 .page_foot { - bottom: 1.2cm; } - .print_body .dina5 { - padding-top: 0; - padding-right: 0; - padding-bottom: 0; - padding-left: 1.2cm; } - .print_body .dina5 .page_head, .print_body .dina5 .page_foot { - right: 0; - left: 1.2cm; } - .print_body .dina5 .page_head { - top: 0; } - .print_body .dina5 .page_foot { - bottom: 0; } - .print_body .dina6 { - padding-top: 0; - padding-right: 0; - padding-bottom: 0; - padding-left: 1.2cm; } - .print_body .dina6 .page_head, .print_body .dina6 .page_foot { - right: 0; - left: 1.2cm; } - .print_body .dina6 .page_head { - top: 0; } - .print_body .dina6 .page_foot { - bottom: 0; } - .print_body *[class^="din"] { - position: relative; - overflow: auto; - margin: 32px auto; } - .print_body *[class^="din"] .page_head, .print_body *[class^="din"] .page_foot { - position: absolute; } - .print_body *[class^="din"] .page_head { - page: cover; } - .print_body *[class^="din"] .page_foot { - display: flex; - flex-direction: row; } - .print_body *[class^="din"] .page_foot *:last-child { - margin-bottom: 0; } - .print_body *[class^="din"] .page_foot p, .print_body *[class^="din"] .page_foot .p__col_2, .print_body *[class^="din"] .page_foot .p__col_3, .print_body *[class^="din"] .page_foot caption { - flex: 1 0 auto; - margin: 0; - font-size: 8pt; - line-height: 10pt; - text-align: center; } - .print_body *[class^="din"] .page_foot .page_no { - flex: 1 0 auto; - font-size: 20pt; - line-height: 1; - text-align: right; } - .print_body *[class^="din"] .page_foot p:first-child, .print_body *[class^="din"] .page_foot .p__col_2:first-child, .print_body *[class^="din"] .page_foot .p__col_3:first-child, .print_body *[class^="din"] .page_foot caption:first-child { - text-align: left; } - .print_body *[class^="din"] .page_content { - margin-top: 10cm; - margin-bottom: 2cm; } - .print_body .page_title, .print_body .page_date { - font-size: 14pt; } - .print_body .page_title { - margin: 0; } - .print_body .page_date, .print_body .page_no { - float: right; } - .print_body .page_author { - position: absolute; - top: 5cm; - right: 0; - text-align: right; } - .print_body .page_recipient { - position: absolute; - top: 5cm; - left: 0; } - -.demo__intro { - border-top-width: 8px; - border-top-style: solid; - border-color: black; - padding-top: 32px; } - -.demo__header { - padding: 16px; } - .demo__header nav ul { - margin: 0; } - -.header__fancy { - background-color: rgba(211, 10, 81, 0.6); } - .header__fancy nav a { - background-color: rgba(250, 216, 3, 0.6); - color: #fad803; } - .header__fancy nav a:active, .header__fancy nav a:focus, .header__fancy nav a:hover { - background-color: rgba(255, 255, 255, 0.2); - color: white; } - -.header__fix { - position: relative; - top: 0; - width: 100%; - background-color: rgba(39, 63, 139, 0.6); } - .header__fix nav a:active, .header__fix nav a:focus, .header__fix nav a:hover { - background-color: rgba(255, 255, 255, 0.2); - color: white; } - -.demo__footer { - width: 100%; - padding: 16px 0; - background-color: black; - color: white; } - .demo__footer nav a { - color: white; } - -.demo__avatar img { - opacity: 1; - width: 128px; - height: auto; - border-radius: 50%; - background-color: #b7e0f0; } - -.demo__flag { - height: 40vh; } - -.test li:after { - content: ""; - display: block; - height: 16px; } - -.front_color_1 { - color: #fad803; } - .front_color_1:after { - background-color: #fad803; } - -.front_color_2 { - color: #d30a51; } - .front_color_2:after { - background-color: #d30a51; } - -.front_color_3 { - color: #273f8b; } - .front_color_3:after { - background-color: #273f8b; } - -.front_color_4 { - color: #b7e0f0; } - .front_color_4:after { - background-color: #b7e0f0; } - -.front_color_5 { - color: #52bed1; } - .front_color_5:after { - background-color: #52bed1; } - -.back_color_1, .label_1 { - background-color: #fad803; } - -.back_color_2, .label_2 { - background-color: #d30a51; } - -.back_color_3, .label_3 { - background-color: #273f8b; } - -.back_color_4 { - background-color: #b7e0f0; } - -.back_color_5 { - background-color: #52bed1; } - -.label_1, .label_2, .label_3 { - padding: 0 4px; } - - - -/*# sourceMappingURL=example.css.map */ +@charset "UTF-8"; +/* + * # TABLE OF CONTENTS + * + * - Reset + * - Global functions and mixins + * - Configuration + * - Special modules + * - Basic styles + * - Common + * - Typography + * + * - Sections + * - Grouping + * - Textlevel + * - Embedded + * - Tables + * - Interactive + * - Modules + * + */ +@import url(other/normalize.css); +.sym_glass::before { + content: ""; } + +.sym_music::before { + content: ""; } + +.sym_search::before { + content: ""; } + +.sym_envelope-o::before { + content: ""; } + +.sym_heart::before { + content: ""; } + +a[href]:focus { + outline: 0; } + +area[href]:focus { + outline: 0; } + +button:not([disabled]):focus { + outline: 0; } + +input:not([disabled]):focus { + outline: 0; } + +select:not([disabled]):focus { + outline: 0; } + +textarea:not([disabled]):focus { + outline: 0; } + +*[tabindex]:focus { + outline: 0; } + +/** + * @description + * Generates cross-browser-compatible output for a given element with its value. + * + * @author sthag + * + * @param values + * @returns + * -webkit-: + * ...-: + * + * @example + * .selector + * @include vendor-prefix(hyphens, auto) + */ +.magic { + display: none; } + +.center_50 { + margin-right: 25%; + margin-left: 25%; } + +.center_25 { + margin-right: 37.5%; + margin-left: 37.5%; } + +.width_full { + width: 100%; + margin-right: 0; + margin-left: 0; } + +.height_basic { + height: 1024px; } + +.txt_center { + text-align: center !important; } + +.txt_right { + text-align: right !important; } + +.txt_left { + text-align: left !important; } + +.space_right { + margin-right: 32px; } + +.clear { + clear: both; } + .clear::before, .clear::after { + clear: both; } + +.float_left, .list__horizontal li, .box__inline_left, .nav__horizontal ul li, .nav__center_old ul li, .header__page nav ul li { + float: left; + margin-right: 32px; } + +.overflow, .nav__horizontal ul, .nav__center_old ul, .header__page nav ul { + overflow: auto; } + +.x_long { + overflow-x: scroll; } + +.pos_full_view, .hover_full_view_change { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; } + +.pos_full_page { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; } + +.pos_abs { + position: absolute; } + +.pos_rel { + position: relative; } + +.pos_fix { + position: fixed; } + +.pos_bottom { + bottom: 0; } + +.pos_full_view { + background-color: rgba(250, 216, 3, 0.5); } + +.pos_full_page { + background-color: rgba(39, 63, 139, 0.25); } + +.hover_back_change { + background-color: #666666; + transition: background-color .2s ease-in-out; } + .hover_back_change:hover { + background-color: gray; } + +.hover_full_view_change { + z-index: 1000; + background-color: rgba(0, 0, 0, 0.5); + transition: background-color .2s ease-in-out; + pointer-events: none; } + +.flex, .box__column, .nav__column ul { + display: flex; } + +.flex_child, .box__column .column, .nav__column ul li { + flex: 0 1 auto; } + +.txt_light_color { + color: #666666; } + +.a__button, .a__button_text, .a__button_border { + display: inline-block; + padding: calc(8px - 3px) 8px; + background-color: rgba(82, 190, 209, 0.2); + border-radius: 1px; } + .a__button:active, .a__button_text:active, .a__button_border:active, .a__button:focus, .a__button_text:focus, .a__button_border:focus, .a__button:hover, .a__button_text:hover, .a__button_border:hover { + background-color: rgba(255, 255, 255, 0.1); + color: white; + border-color: transparent; } + +.span__solo, h6, p, .p__col_2, .p__col_3, caption, li, dt, dd, figcaption, th, td, legend, label { + font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans; + font-size: 1em; + line-height: 1.5; } + +pre, code, .code__solo { + font-family: Courier New, monospace; + font-size: 1em; + line-height: 1.5; } + +.print_body *[class^="din"] p, .print_body *[class^="din"] .p__col_2, .print_body *[class^="din"] .p__col_3, .print_body *[class^="din"] caption { + font-family: Courier New, monospace; + font-size: 1em; + line-height: 1.5; } + +h1, .print_body .page_date, .print_body .page_no { + font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans; + font-size: 3.1em; + font-weight: 300; + line-height: 1.5; } + +h2 { + font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans; + font-size: 2.5em; + font-weight: 300; + line-height: 1.5; } + +h3, h4 { + font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans; + font-size: 1.8em; + font-weight: 300; + line-height: 1.5; } + +h5 { + font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans; + font-size: 1.35em; + font-weight: 300; + line-height: 1.5; } + +.span__solo { + color: black; } + +.table__link .cell__text .shorten { + overflow: hidden; + text-overflow: ellipsis; + -o-text-overflow: ellipsis; } + +html { + height: 100%; } + +body { + position: relative; + box-sizing: border-box; + font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans; + font-size: 17px; + line-height: 1; + color: black; + background-color: gray; } + body *, + body ::before, + body ::after { + box-sizing: inherit; } + body:hover .trigger__hover { + background-color: transparent; } + +.sec__main_center, .demo__intro { + width: 96%; + margin: 0 auto; + padding-top: 32px; } +@media screen and (orientation: landscape) and (min-width: 1024px) { + .sec__main_center, .demo__intro { + width: 80%; } } +@media screen and (orientation: landscape) and (min-width: 1280px) { + .sec__main_center, .demo__intro { + width: 60%; } } +@media screen and (orientation: landscape) and (min-width: 1920px) { + .sec__main_center, .demo__intro { + width: 48%; } } + +@media screen and (orientation: portrait) and (min-width: 1024px) { + .sec__main_center, .demo__intro { + width: 80%; } } + +aside.right + section { + margin-right: calc(20% + 8px); } +aside.left + section { + margin-left: calc(20% + 8px); } + +aside { + width: 20%; } + aside.left { + float: left; } + aside.right { + float: right; } + aside *:first-child { + margin-top: 0; } + +.header__page { + overflow: auto; } + +h1 { + margin: 128px 0 32px; } + +h2 { + margin: 64px 0 32px; } + +h3 { + margin: 16px 0 16px; + text-transform: uppercase; } + +h4 { + margin: 16px 0 16px; + text-transform: none; } + +h5 { + margin: 16px 0 8px; + text-transform: none; } + +h6 { + margin: 8px 0; + text-transform: none; + font-weight: bold; } + +p, .p__col_2, .p__col_3, caption { + margin: 8px 0; } + p code, .p__col_2 code, .p__col_3 code, caption code { + padding: 1px 4px; + font-size: 1em; + line-height: 1; } + +.p__col_line { + column-rule: 1px solid black; } + +.p__col_2 { + column-count: 2; + column-gap: 32px; } + +.p__col_3 { + column-count: 3; + column-gap: 64px; } + +hr, .hr__hidden, .hr__dotted { + margin: 32px auto; + border-width: 1px 0 0; + border-style: solid; + border-color: black; } + +.hr__hidden { + border-color: transparent; } + +.hr__dotted { + border-style: dotted; } + +.pre__code { + border-color: rgba(255, 255, 255, 0.1); + border-style: dotted; + border-width: 0 0 0 4px; + border-radius: 1px; + padding: 8px; + background-color: rgba(255, 255, 255, 0.1); } + .pre__code code { + background-color: transparent; } + +blockquote { + margin: 8px 2em; } + +.quote__mark p::before, .quote__mark .p__col_2::before, .quote__mark .p__col_3::before, .quote__mark caption::before { + content: "\201E \0020"; } +.quote__mark p::after, .quote__mark .p__col_2::after, .quote__mark .p__col_3::after, .quote__mark caption::after { + content: "\201C \0020"; } +.quote__mark .quote__source::before, .quote__mark .quote__source::after { + content: ""; } + +dl, ul, ol { + margin: 16px 0 8px; } + +ul, ol { + padding-left: 2em; } + +li, dt, dd { + color: black; } + +dd { + margin-left: 2em; } + +ul li { + list-style: square; } + +.list__dash li { + list-style: none; + position: relative; } + .list__dash li::before { + content: "_"; + position: absolute; + left: -1em; } + +.list__link li { + margin-bottom: 2px; + text-transform: uppercase; } + .list__link li a { + display: block; + padding: calc(8px - 3px) 8px; + color: black; } + .list__link li a img { + margin-right: 8px; + padding-bottom: .2em; + vertical-align: text-bottom; } + .list__link li a:active, .list__link li a:focus, .list__link li a:hover { + background-color: #0c85ff; + color: white; } + +.list__horizontal { + overflow: auto; } + +figure { + margin: 16px 2em; } + +.box__info { + padding: 16px 2em; + border-right: 8px solid rgba(82, 190, 209, 0.6); + background-color: rgba(82, 190, 209, 0.1) !important; } + +.box__main_indent { + margin-left: 25%; } + +.box__space { + position: relative; + width: 100%; } + +.box__cube { + float: left; + display: table; + width: 64px; + text-align: center; + vertical-align: middle; } + .box__cube span { + display: table-cell; } + +.box__placeholder { + width: 100%; + height: 64px; + border: 4px solid rgba(0, 0, 0, 0.1); + border-radius: 1px; + padding: 8px; + background-color: rgba(0, 0, 0, 0.1); } + .box__placeholder svg { + vertical-align: top; } + +.box__placeholder_bkg { + width: 100%; + height: 64px; + border: 4px solid rgba(0, 0, 0, 0.1); + border-radius: 1px; + padding: 8px; + /*data:[][;charset=][;base64],*/ + background: url("data:image/svg+xml;utf8,") no-repeat; + background-color: rgba(0, 0, 0, 0.1); } + +.box__column .column { + flex-grow: 1; } + +a { + color: #52bed1; + text-decoration: none; } + a:active, a:focus, a:hover { + color: white; } + +.a__line { + border-bottom-width: 1px; + border-bottom-style: dotted; + border-color: black; + background-color: transparent; + color: black; + transition: color 150ms ease; } + .a__line:active, .a__line:focus, .a__line:hover { + background-color: #0c85ff; + color: white; } + +.a__button_text, .a__button_border { + padding: calc(8px - 1px) calc(8px * 2); + background-color: transparent; + color: black; } + +.a__button_border { + border: 1px solid black; } + +i, em { + font-style: italic; } + +.i__bright { + font-style: normal; + color: white; } + +b, strong { + font-weight: 500; } + +cite { + font-style: italic; } + +code { + color: #1f1f1f; + background-color: rgba(255, 255, 255, 0.1); } + +.code__solo { + padding: 1px 4px; + color: black; } + +mark { + background-color: #fad803; } + +.mark__cursor { + color: white; + background-color: black; } + +::-moz-selection { + color: white; + background-color: black; } + +::selection { + color: white; + background-color: black; } + +img { + vertical-align: top; } + +table { + margin-top: 16px; + margin-bottom: 16px; + border: 1px solid black; + border-collapse: collapse; } + +th, td { + padding: 4px; } + +th { + border: 1px solid black; + text-align: left; } + +.precol { + border-right: 1px solid black; } + +td { + border-right: 1px solid black; + border-bottom: 1px solid black; } + +td:last-child { + border-right: 0; } + +tr:last-child td { + border-bottom: 0; } + +tfoot tr:first-child td { + border-top: 1px solid black; } + +.table_blank { + border: 1px solid transparent; } + .table_blank th, .table_blank td { + border: 1px solid transparent; } + +.table_free { + border: 1px solid transparent; } + +.table_stripe td { + border-top: 0; + border-bottom: 0; } +.table_stripe tr:nth-child(even) td { + background-color: #cccccc; } + +.table_fix { + table-layout: fixed; } + +caption { + padding: 4px 0; + border: 1px dotted black; + text-align: center; } + +fieldset { + margin: 8px 0; + padding: 8px; + border: 1px solid black; } + +legend { + padding: 0 4px; } + +label + input { + margin-left: 8px; } +input + label { + margin-left: 8px; } + +.input_default label { + display: table; + margin: 4px 0; } + .input_default label input { + display: table-cell; + margin-left: 8px; + padding: 4px 5px; + border-style: solid; + border-color: transparent; + background-color: #404040; + color: #e6e6e6; } + .input_default label input:hover { + background-color: black; + color: white; } + +nav ul { + padding-left: 0; } +nav li { + margin-bottom: 8px; + list-style: none; } + +.nav__horizontal ul ul, .nav__center_old ul ul, .header__page nav ul ul { + margin: 8px 0; } +.nav__horizontal ul li, .nav__center_old ul li, .header__page nav ul li { + margin-right: 8px; + margin-bottom: 0; } + .nav__horizontal ul li:last-child, .nav__center_old ul li:last-child, .header__page nav ul li:last-child { + margin-right: 0; } + +.nav__right { + float: right; + margin-left: 8px; } + .nav__right .align_parent { + margin-right: -8px; } + +.nav__separate li { + position: relative; + padding-left: 1px; } + .nav__separate li:not(:first-child)::before { + content: ""; + position: absolute; + width: 1px; + height: 100%; + left: 0; + top: 0; + background-color: black; } + +.nav__separate_right { + float: right; } + .nav__separate_right li { + position: relative; } + .nav__separate_right li:first-child { + padding-left: 17px; } + .nav__separate_right li:first-child::before { + content: ""; + position: absolute; + width: 1px; + height: 100%; + left: 0; + top: 0; + background-color: white; + margin: 0 8px; } + +.nav__center_old { + float: right; + position: relative; + left: -50%; } + .nav__center_old ul { + position: relative; + left: 50%; + text-align: center; } + +.nav__column { + position: relative; + margin: 8px 0; } + .nav__column ul { + margin: 0 128px; } + .nav__column ul li { + flex-grow: 1; + margin: 0; + text-align: center; } + .nav__column ul li a { + display: block; } + +.nav__page_meta { + position: fixed; + right: 0; + bottom: 16px; } + .nav__page_meta ul { + margin: 8px 0; } + .nav__page_meta li { + margin-bottom: 0; } + .nav__page_meta .a_button_meta { + display: inline-block; } + .nav__page_meta .a_button_meta:active, .nav__page_meta .a_button_meta:focus { + background-color: transparent; } + .nav__page_meta .a_button_meta:hover { + background-color: #0c85ff; } + +.header__page nav a:active, .header__page nav a:focus, .header__page nav a:hover { + background-color: rgba(0, 0, 0, 0.2); + color: black; } + +.table__link { + width: 100%; + border: 0; + table-layout: auto; } + .table__link tbody { + border-bottom: 1px solid black; } + .table__link tbody:hover { + background-color: #cccccc; } + .table__link th, .table__link td { + border: 0; } + .table__link .cell__icon { + width: 48px; + text-align: center; } + .table__link .cell__icon img { + vertical-align: text-top; } + .table__link .cell__link { + padding-right: 8px; + padding-left: 8px; } + .table__link .cell__link:hover { + background-color: #0c85ff; } + .table__link .cell__link:hover a:first-child { + display: none; } + .table__link .cell__link:hover a:last-child { + display: block; + color: white; } + .table__link .cell__link a { + display: block; } + .table__link .cell__link a:last-child { + display: none; } + .table__link th:last-child, .table__link .cell__date { + width: 16%; + text-align: center; } + .table__link .cell__text { + padding-right: 8px; + padding-left: 8px; } + .table__link .cell__text div { + width: 100%; } + .table__link .cell__text .shorten { + max-height: 44px; } + +.card_body .bkg_box { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } + +.card_body { + height: 100%; + /* .full { + position: absolute; + width: 128px; + height: 128px; + top: 16px; + left: 16px; + background-color: #fff; + } + .mark { + float: left; + width: 32px; + height: 32px; + margin-top: 16px; + } + */ } + .card_body .bkg_box { + transition-duration: 800ms; + overflow: hidden; + vertical-align: top; + z-index: -1; } + .card_body .bkg_box > svg { + position: relative; } + .card_body .flex_wrap_center { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -moz-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -moz-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + height: 100%; } + .card_body .flex_content { + position: relative; + padding: 64px 64px 24px 64px; + border: 1px solid #FFF; + background-color: #F5F5F5; + z-index: 40; } + .card_body h1 { + margin: 16px 0; + color: #1E1E1E; + font-size: 24px; + line-height: 1.4em; + font-weight: normal; } + .card_body p, .card_body .p__col_2, .card_body .p__col_3, .card_body caption { + margin-top: 0; + margin-bottom: 16px; + font-size: 12px; + line-height: 1.4em; } + .card_body .marked { + padding-left: 1em; + text-indent: -1em; + text-align: center; } + .card_body .marked::before { + content: "* "; } + .card_body .decent { + color: #666; } + .card_body a { + color: #000; + text-decoration: none; } + .card_body a:hover { + color: #F4F9FA; + background-color: #0C85FF; + text-decoration: none; } + +.wip, .wip_txt { + border-right: 8px solid rgba(220, 20, 60, 0.8); + background-color: rgba(220, 20, 60, 0.1) !important; } + +.wip::before, .wip::after { + content: ""; + display: block; + height: 48px; } + +.exp_expose_pre::after { + content: ""; + display: block; + height: 48px; + background-color: rgba(183, 224, 240, 0.1) !important; } + +.exp_expose_post::before { + content: ""; + display: block; + height: 48px; + background-color: rgba(183, 224, 240, 0.1) !important; } + +.exp_expose::before, .exp_expose::after { + content: ""; + display: block; + height: 48px; + background-color: rgba(183, 224, 240, 0.1) !important; } + +.exp_pop { + display: none; } + +.exp_wrap { + position: relative; } + +.exp_pop { + position: absolute; + z-index: 100; + top: 128px; + left: 128px; + padding: 4px; + border: 4px solid gray; + border-radius: 4px; + background-color: gray; + pointer-events: none; } + +.exp_marker_pop { + position: absolute; + top: -12.75px; + right: -8.5px; + width: 17px; + height: 17px; + border: 1px solid white; + border-radius: 17px; + color: white; + background-color: black; } + +.exp_overlay_btn { + position: fixed; + width: 3em; + height: 2em; + cursor: pointer; } + +.exp_help_btn { + display: table; + right: 16px; + bottom: 16px; + background-color: rgba(0, 0, 0, 0.4); } + .exp_help_btn:hover { + background-color: white; } + .exp_help_btn:hover > .span__solo { + color: black; } + .exp_help_btn .span__solo { + display: table-cell; + color: rgba(255, 255, 255, 0.8); + font-family: Courier New, monospace; + font-size: 1.4em; + text-align: center; + vertical-align: middle; } + +.expose_height { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: rgba(183, 224, 240, 0.1) !important; + -webkit-transition: height 0.5s ease; + -ms-transition: height 0.5s ease; + -moz-transition: height 0.5s ease; + -o-transition: height 0.5s ease; + transition: height 0.5s ease; } + +.print_body [class^="din"] { + background-color: white; } + +.print_body { + font-size: 10pt; + margin: 10vh 20vw; } +@page { + .print_body { + size: A4; + margin: 1.2cm; } } +@page :first { + .print_body { + size: A4; + margin: 0; } } + .print_body .dina4 { + padding-top: 1.2cm; + padding-right: 1.2cm; + padding-bottom: 1.2cm; + padding-left: 2.4cm; } + .print_body .dina4 .page_head, .print_body .dina4 .page_foot { + right: 1.2cm; + left: 2.4cm; } + .print_body .dina4 .page_head { + top: 1.2cm; } + .print_body .dina4 .page_foot { + bottom: 1.2cm; } + .print_body .dina5 { + padding-top: 0; + padding-right: 0; + padding-bottom: 0; + padding-left: 1.2cm; } + .print_body .dina5 .page_head, .print_body .dina5 .page_foot { + right: 0; + left: 1.2cm; } + .print_body .dina5 .page_head { + top: 0; } + .print_body .dina5 .page_foot { + bottom: 0; } + .print_body .dina6 { + padding-top: 0; + padding-right: 0; + padding-bottom: 0; + padding-left: 1.2cm; } + .print_body .dina6 .page_head, .print_body .dina6 .page_foot { + right: 0; + left: 1.2cm; } + .print_body .dina6 .page_head { + top: 0; } + .print_body .dina6 .page_foot { + bottom: 0; } + .print_body *[class^="din"] { + position: relative; + overflow: auto; + margin: 32px auto; } + .print_body *[class^="din"] .page_head, .print_body *[class^="din"] .page_foot { + position: absolute; } + .print_body *[class^="din"] .page_head { + page: cover; } + .print_body *[class^="din"] .page_foot { + display: flex; + flex-direction: row; } + .print_body *[class^="din"] .page_foot *:last-child { + margin-bottom: 0; } + .print_body *[class^="din"] .page_foot p, .print_body *[class^="din"] .page_foot .p__col_2, .print_body *[class^="din"] .page_foot .p__col_3, .print_body *[class^="din"] .page_foot caption { + flex: 1 0 auto; + margin: 0; + font-size: 8pt; + line-height: 10pt; + text-align: center; } + .print_body *[class^="din"] .page_foot .page_no { + flex: 1 0 auto; + font-size: 20pt; + line-height: 1; + text-align: right; } + .print_body *[class^="din"] .page_foot p:first-child, .print_body *[class^="din"] .page_foot .p__col_2:first-child, .print_body *[class^="din"] .page_foot .p__col_3:first-child, .print_body *[class^="din"] .page_foot caption:first-child { + text-align: left; } + .print_body *[class^="din"] .page_content { + margin-top: 10cm; + margin-bottom: 2cm; } + .print_body .page_title, .print_body .page_date { + font-size: 14pt; } + .print_body .page_title { + margin: 0; } + .print_body .page_date, .print_body .page_no { + float: right; } + .print_body .page_author { + position: absolute; + top: 5cm; + right: 0; + text-align: right; } + .print_body .page_recipient { + position: absolute; + top: 5cm; + left: 0; } + +.demo__intro { + border-top-width: 8px; + border-top-style: solid; + border-color: black; + padding-top: 32px; } + +.demo__header { + padding: 16px; } + .demo__header nav ul { + margin: 0; } + +.header__fancy { + background-color: rgba(211, 10, 81, 0.6); } + .header__fancy nav a { + background-color: rgba(250, 216, 3, 0.6); + color: #fad803; } + .header__fancy nav a:active, .header__fancy nav a:focus, .header__fancy nav a:hover { + background-color: rgba(255, 255, 255, 0.2); + color: white; } + +.header__fix { + position: relative; + top: 0; + width: 100%; + background-color: rgba(39, 63, 139, 0.6); } + .header__fix nav a:active, .header__fix nav a:focus, .header__fix nav a:hover { + background-color: rgba(255, 255, 255, 0.2); + color: white; } + +.demo__footer { + width: 100%; + padding: 16px 0; + background-color: #333333; + color: #cccccc; } + .demo__footer nav a { + color: white; } + +.demo__avatar img { + opacity: 1; + width: 128px; + height: auto; + min-width: 128px; + min-height: 128px; + border-radius: 50%; + background-color: #b7e0f0; } + +.demo__flag { + height: 40vh; } + +.demo__credits { + margin: 32px 0 8px 0; } + +.test li::after { + content: ""; + display: block; + height: 16px; } + +.front_color_1 { + color: #fad803; } + .front_color_1::after { + background-color: #fad803; } + +.front_color_2 { + color: #d30a51; } + .front_color_2::after { + background-color: #d30a51; } + +.front_color_3 { + color: #273f8b; } + .front_color_3::after { + background-color: #273f8b; } + +.front_color_4 { + color: #b7e0f0; } + .front_color_4::after { + background-color: #b7e0f0; } + +.front_color_5 { + color: #52bed1; } + .front_color_5::after { + background-color: #52bed1; } + +.back_color_1, .label_1 { + background-color: #fad803; } + +.back_color_2, .label_2 { + background-color: #d30a51; } + +.back_color_3, .label_3 { + background-color: #273f8b; } + +.back_color_4 { + background-color: #b7e0f0; } + +.back_color_5 { + background-color: #52bed1; } + +.label_1, .label_2, .label_3 { + padding: 0 4px; } + + + +/*# sourceMappingURL=example.css.map */ diff --git a/example.html b/example.html index 0b3d140..2bf0ba1 100644 --- a/example.html +++ b/example.html @@ -10,6 +10,8 @@ + + @@ -338,8 +340,19 @@

Formulare

-

Spätestens hier werden Betrachter zu Benutzern. Texteingabefelder und verschiedene Bedienelemente geben Möglichkeiten zur Interaktion. Diese Elemente sind in vielerlei Hinsicht besonders. Sie sind in ihrer unveränderten Gestalt, System- bzw. Browser-Abhängig. (Vielleicht ist das auch scheiße, hier darauf einzugehen) ...

- +

Spätestens hier werden Betrachter zu Benutzern. Texteingabefelder und verschiedene Bedienelemente geben Möglichkeiten zur Interaktion. Diese Elemente sind in vielerlei Hinsicht besonders. Werden sie nicht explizit gestaltet, ist ihre Erscheinung system- bzw. browserabhängig. (Vielleicht ist das auch scheiße, hier darauf einzugehen) ... Üblicherweise stehen alle Formularelemente innerhalb eines <form> Elementes. Dieses ist notwendig um Angaben zur Kommunikation mit dem Server zu setzen. Es hat normalerweise keine gestalterische Funktion.

+

Grundlegend ist das Element <input>. Es hat viele Attribute um den Typ der Eingabe anzupassen. Ist es undefiniert nimmt es jegliche textbasierte Information auf und erhält eine Standardgröße.

+

+

Ein spezieller Typ des Eingabefeldes verändert seine Funktion zu einer Schaltfläche <input[type="button"]>. Es gibt allerdings auch ein eigenes Element <button> dafür. +

+

Interaktive Elemente können durch das Attribut <readonly> nur lesbar gemacht werden oder mittels <disabled> gänzlich deaktiviert werden.

+

+

Das Element <label> ergänzt interaktive Elemente um eine Beschriftung.

+ +

Zusätzlich zur Beschriftung einzelner Elemente gibt es auch die Möglichkeit Gruppierungen zu schaffen. Diese werden mit <fieldset> realisiert.

+
+ +
Einfache Eingabefelder @@ -491,17 +504,20 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4 - +
+ 
footer.pos_abs.pos_bottom>nav.nav__column>ul>(li>a.a__button_text)*4
+ +
@@ -510,6 +526,13 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4
+
+
+
+
+
+
+

Gruppierung

ul.list__link>(li>a>img)*2+li>a
@@ -620,7 +643,7 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4 ); // WIP Activates layer with explanation elements - // Besser :after oder :before benutzen + // Besser ::after oder ::before benutzen $(".exp_help_btn").click(function(e){ var $wrap, $pop; @@ -703,7 +726,7 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4 // jq-sticky-anything $('#js_demo_fix').stickThis({ - pushup: '#js_demo_fix + .demo__footer' + pushup: '#js_demo_stop' }); @@ -718,7 +741,7 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4 doc_pos_y = $( document ).scrollTop(); // console.log(doc_pos_y); var h = scroll_y_margin; - var demo_margin = $('.header__fix'); + // var demo_margin = $('.header__fix'); if (doc_pos_y > h) { $('#js_scrolltop').parent().removeClass('magic'); } else { diff --git a/functions/_all.scss b/functions/_all.scss new file mode 100644 index 0000000..0e63090 --- /dev/null +++ b/functions/_all.scss @@ -0,0 +1,3 @@ +@import "color"; +@import "shade"; +@import "tint"; diff --git a/functions/_color.scss b/functions/_color.scss new file mode 100644 index 0000000..0e32ddb --- /dev/null +++ b/functions/_color.scss @@ -0,0 +1,13 @@ +@function createColorMap($color, $percentage, $opacity) { + $map: ( + base: $color, + light: lighten($color, $percentage), + dark: darken($color, $percentage), + trans: transparentize($color, $opacity) + ); + @return $map; +} + +@function basic_color($key: 'alpha') { + @return map-get($color_palette, $key); +} diff --git a/functions/_shade.scss b/functions/_shade.scss new file mode 100644 index 0000000..34a652b --- /dev/null +++ b/functions/_shade.scss @@ -0,0 +1,24 @@ +@charset "UTF-8"; + +// Mixes a color with black. +// +// @param {Color} $color +// +// @param {Number (Percentage)} $percent +// The amount of black to be mixed in. +// +// @example scss - Usage +// .element { +// background-color: shade(#0c85ff, 60%); +// } +// +// @example css - CSS Output +// .element { +// background-color: #074f99; +// } +// +// @return {Color} + +@function shade($color, $percent) { + @return mix(#000, $color, $percent); +} diff --git a/functions/_tint.scss b/functions/_tint.scss new file mode 100644 index 0000000..fa16997 --- /dev/null +++ b/functions/_tint.scss @@ -0,0 +1,24 @@ +@charset "UTF-8"; + +// Mixes a color with white. +// +// @param {Color} $color +// +// @param {Number (Percentage)} $percent +// The amount of white to be mixed in. +// +// @example scss - Usage +// .element { +// background-color: tint(#0c85ff, 40%); +// } +// +// @example css - CSS Output +// .element { +// background-color: #9dceff; +// } +// +// @return {Color} + +@function tint($color, $percent) { + @return mix(#fff, $color, $percent); +} diff --git a/basic/_common.scss b/global/_common.scss similarity index 96% rename from basic/_common.scss rename to global/_common.scss index 387cc72..1733f1b 100644 --- a/basic/_common.scss +++ b/global/_common.scss @@ -41,8 +41,6 @@ height: 1024px; } - - .txt_center { text-align: center !important; } @@ -53,6 +51,10 @@ text-align: left !important; } +.space_right { + margin-right: $space_3; +} + // Clearing and floating @@ -138,7 +140,7 @@ .hover_full_view_change { @extend %full_viewport; z-index: $z_top; - background-color: transparentize($dark_color, .5); + background-color: transparentize($darkest_color, .5); transition: background-color .2s ease-in-out; pointer-events: none; } diff --git a/_config.scss b/global/_config.scss similarity index 82% rename from _config.scss rename to global/_config.scss index 6b515b8..8c7071e 100644 --- a/_config.scss +++ b/global/_config.scss @@ -1,13 +1,11 @@ // Default configuration // ------------------------------------------------------------------------------ + // TEXT // ------------------------------------------------------------------------------ -$default_font_size: 17px !default; $basic_size: $default_font_size; - -$default_print_font_size: 10pt !default; $basic_print_size: $default_print_font_size; $size_1: $basic_size * 4; @@ -54,15 +52,12 @@ $head_size_4: 1.35em; $text_size_1: 1em; $text_size_2: 20; - -$default_line_height: 1.5 !default; $text_line_1: $default_line_height; $head_line_1: $text_line_1; $head_line_2: $text_line_1; $head_line_3: $text_line_1; $head_line_4: $text_line_1; -$default_font_family: #{'Roboto', 'Segoe UI', 'Liberation Sans', 'Source Sans', 'Trebuchet MS', Helvetica, Arial, sans-serif, sans} !default; $print_font_family: #{'Times New Roman', times}; $monospace_font_family: #{'Courier New', monospace}; @@ -86,43 +81,42 @@ $color_palette: ( foxtrot: #0c85ff ); -$alpha_color: #fad803; -$bravo_color: #d30a51; -$charlie_color: #273f8b; -$delta_color: #b7e0f0; -$echo_color: #52bed1; -$foxtrot_color: #0c85ff; +@include addDefaultColors; -$dark_color: black !default; -$bright_color: white !default; -$medium_color: lighten($dark_color, 50%) !default; - -$default_front_color: $dark_color !default; -$default_back_color: $medium_color !default; +$darkest_color: $default_darkest_color; +$brightest_color: $default_brightest_color; $basic_font_color: $default_front_color; $basic_head_color: $default_front_color; $basic_link_color: $echo_color; -$basic_highlight_color: $bright_color; +$basic_highlight_color: $brightest_color; $basic_action_color: $foxtrot_color; +$basic_front_color: $default_front_color; $basic_back_color: $default_back_color; -$light_color: lighten($basic_back_color, 5%); -$dark_color_color: darken($basic_back_color, 10%); +$dark_color: lighten($darkest_color, 20%); +$medium_color: lighten($darkest_color, 50%); +$bright_color: darken($brightest_color, 20%); $basic_border_color: $default_front_color; // default shadow colors // $shadow_color: fade-out($medium_color, .5); +$basic_color_map: (); + +@each $key, $value in $color_palette { + $map: (); + $map: map-merge($map, ($key: createColorMap($value, 15%, .5)) ); + $basic_color_map: map-merge($basic_color_map, $map); +} // LAYOUT // ------------------------------------------------------------------------------ -$default_box_sizing: border-box !default; $box_sizing: $default_box_sizing; $z_top: 1000; @@ -132,7 +126,6 @@ $width_small: 80%; $width_medium: 60%; $width_large: 48%; -$default_space: 8px !default; $basic_space: $default_space; $half_space: $basic_space / 2; $space_2: $basic_space * 2; @@ -146,25 +139,52 @@ $wide_padding: calc(#{$basic_space} - 1px) calc(#{$basic_space} * 2); $basic_corner: $tiny_space; -$default_border_width: $tiny_space !default; $basic_border_width: $default_border_width; $border_width_4: $tiny_space * 4; $border_width_8: $tiny_space * 8; $basic_border: $tiny_space solid $basic_border_color; -$cell_border: $tiny_space solid $dark_color_color; +$cell_border: $tiny_space solid $darkest_color; $basic_aside_width: 20%; - // IO // ------------------------------------------------------------------------------ -$basic_io_font_color: darken($bright_color, 10%); -$basic_io_back_color: lighten($dark_color, 25%); -$basic_shadow: inset 0 1px 3px rgba($dark_color, 0.06); -$basic_focus_shadow: $basic_shadow, 0 0 5px adjust-color($basic_action_color, $lightness: -5%, $alpha: -0.3); +$basic_text_input_map: 'input[type="color"]', + 'input[type="date"]', + 'input[type="datetime"]', + 'input[type="datetime-local"]', + 'input[type="email"]', + 'input[type="month"]', + 'input[type="number"]', + 'input[type="password"]', + 'input[type="search"]', + 'input[type="tel"]', + 'input[type="text"]', + 'input[type="time"]', + 'input[type="url"]', + 'input[type="week"]', + 'input:not([type])', + 'textarea'; +$basic_button_map: 'button', + 'input[type="button"]', + 'input[type="reset"]', + 'input[type="submit"]'; + +$basic_focus_map: 'a[href]', + 'area[href]', + 'button:not([disabled])', + 'input:not([disabled])', + 'select:not([disabled])', + 'textarea:not([disabled])', + '*[tabindex]'; + +$basic_io_font_color: darken($brightest_color, 10%); +$basic_io_back_color: lighten($darkest_color, 25%); +$basic_shadow: inset 0 1px 3px rgba($darkest_color, 0.06); +$basic_focus_shadow: $basic_shadow, 0 0 5px adjust-color($basic_action_color, $lightness: -5%, $alpha: -0.3); // ANIMATIONS @@ -174,7 +194,6 @@ $basic_duration: 150ms; $basic_timing: ease; - // HARDWARE BREAKPOINTS // ------------------------------------------------------------------------------ @@ -191,7 +210,6 @@ $screen_medium: 1280px; $screen_large: 1920px; - // VENDOR PREFIX // ------------------------------------------------------------------------------ @@ -204,6 +222,30 @@ $moz_ms_support: -moz- -ms- ''; $webkit_ms_support: -webkit- -ms- ''; +// SYMBOLS +// ------------------------------------------------------------------------------ + +$icons: ( + glass: "\f000", + music: "\f001", + search: "\f002", + envelope-o: "\f003", + heart: "\f004" +); + +@each $name, $icon in $icons { + .sym_#{$name}::before { + content: $icon; + } +} + +// USER AGENT +// ------------------------------------------------------------------------------ + +$no_agent_focus: true; + +@include overrideUserAgent; + // The config file is intended to allow users to quickly redefine core elements of the design // that will cascade throughout the css to get your design up and running FAST! @@ -308,8 +350,8 @@ $webkit_ms_support: -webkit- -ms- ''; // $input_disabled_border: lighten($input_disabled, 50%); // $input_disabled_text: lighten($input_disabled, 50%); // -// $form_field_back_color: $bright_color; -// $form_field_focus_color: $bright_color; +// $form_field_back_color: $brightest_color; +// $form_field_focus_color: $brightest_color; // $form_field_fail_bkg: $alpha_color_juliet; // $form_field_border: $charlie_gray; @@ -322,7 +364,7 @@ $webkit_ms_support: -webkit- -ms- ''; // $instructional_text: $charlie_gray; // $placeholder_text: $hotel_gray; // $inline_alert_bkg_color: $alpha_color_delta; -// $inline_alert_text_color: $bright_color; +// $inline_alert_text_color: $brightest_color; // Non-color defaults (currently not represented in the SG view) // --------------------------------------------------------- @@ -343,7 +385,7 @@ $webkit_ms_support: -webkit- -ms- ''; /////// Config defaults for buttons /////// // ----------------------------------------------------------------------------- // $button-color: $delta-color; -// $button-text-color: $bright_color; +// $button-text-color: $brightest_color; // $button-line-height: 32; // $button-border-radius: 3; // $button-padding: 20; diff --git a/global/_default.scss b/global/_default.scss new file mode 100644 index 0000000..113dcd3 --- /dev/null +++ b/global/_default.scss @@ -0,0 +1,23 @@ +// Main configuration +// ------------------------------------------------------------------------------ + +$default_font_size: 17px !default; +$default_print_font_size: 10pt !default; + +$default_line_height: 1.5 !default; + +$default_font_family: #{'Roboto', 'Segoe UI', 'Liberation Sans', 'Source Sans', 'Trebuchet MS', Helvetica, Arial, sans-serif, sans} !default; + +$default_darkest_color: black !default; +$default_medium_color: lighten($default_darkest_color, 50%); +$default_brightest_color: white !default; + +$default_front_color: $default_darkest_color !default; +$default_back_color: $default_medium_color !default; + +$default_box_sizing: border-box !default; + +$default_space: 8px !default; +$default_tiny_space: 1px !default; + +$default_border_width: $default_tiny_space !default; diff --git a/mixins/_all.scss b/mixins/_all.scss new file mode 100644 index 0000000..cab5eb0 --- /dev/null +++ b/mixins/_all.scss @@ -0,0 +1,3 @@ +@import "clearflow"; +@import "color"; +@import "user_agent"; diff --git a/mixins/_clearflow.scss b/mixins/_clearflow.scss new file mode 100644 index 0000000..404a21c --- /dev/null +++ b/mixins/_clearflow.scss @@ -0,0 +1,25 @@ +@charset "UTF-8"; + +// Provides an easy way to include a clearflow for containing floats. +// +// @link http://cssmojo.com/latest_new_clearfix_so_far/ +// +// @example scss - Usage +// .element { +// @include clearflow; +// } +// +// @example css - CSS Output +// .element::after { +// content: ""; +// clear: both; +// display: table; +// } + +@mixin clearflow { + &::after { + content: ""; + clear: both; + display: table; + } +} diff --git a/mixins/_color.scss b/mixins/_color.scss new file mode 100644 index 0000000..3822647 --- /dev/null +++ b/mixins/_color.scss @@ -0,0 +1,20 @@ +@mixin addDefaultColors() { + @if map-has-key($color_palette, alpha) { + $alpha_color: map-get($color_palette, alpha) !global; + } + @if map-has-key($color_palette, bravo) { + $bravo_color: map-get($color_palette, bravo) !global; + } + @if map-has-key($color_palette, charlie) { + $charlie_color: map-get($color_palette, charlie) !global; + } + @if map-has-key($color_palette, delta) { + $delta_color: map-get($color_palette, delta) !global; + } + @if map-has-key($color_palette, echo) { + $echo_color: map-get($color_palette, echo) !global; + } + @if map-has-key($color_palette, foxtrot) { + $foxtrot_color: map-get($color_palette, foxtrot) !global; + } +} diff --git a/mixins/_user_agent.scss b/mixins/_user_agent.scss new file mode 100644 index 0000000..ff7a0ce --- /dev/null +++ b/mixins/_user_agent.scss @@ -0,0 +1,9 @@ +@mixin overrideUserAgent() { + @if $no_agent_focus == true { + @each $el in $basic_focus_map { + #{$el}:focus { + outline: 0; + } + } + } +} diff --git a/modules/card/_card_module.scss b/modules/card/_card_module.scss index 92643ea..4c7b7ab 100644 --- a/modules/card/_card_module.scss +++ b/modules/card/_card_module.scss @@ -85,7 +85,7 @@ margin-top: 16px; text-indent: -1em; text-align: center; } -.marked:before { content: "*\0000a0" } +.marked::before { content: "*\0000a0" } .decent { color: #666 } a { color: #000; diff --git a/basic/_demo.scss b/modules/demo/_demo_module.scss similarity index 77% rename from basic/_demo.scss rename to modules/demo/_demo_module.scss index 41cdd19..036054b 100644 --- a/basic/_demo.scss +++ b/modules/demo/_demo_module.scss @@ -29,8 +29,8 @@ &:active, &:focus, &:hover { - background-color: rgba($bright_color, .2); - color: $bright_color; + background-color: rgba($brightest_color, .2); + color: $brightest_color; } } } @@ -49,8 +49,8 @@ &:active, &:focus, &:hover { - background-color: rgba($bright_color, .2); - color: $bright_color; + background-color: rgba($brightest_color, .2); + color: $brightest_color; } } } @@ -66,7 +66,7 @@ nav { a { - color: $bright_color; + color: $brightest_color; } } } @@ -77,6 +77,8 @@ opacity: 1; width: 128px; height: auto; + min-width: 128px; + min-height: 128px; border-radius: 50%; background-color: $delta_color; } @@ -85,3 +87,7 @@ .demo__flag { height: 40vh; } + +.demo__credits { + margin: $space_3 0 $basic_space 0; +} diff --git a/modules/editor/_editor_module.scss b/modules/editor/_editor_module.scss index 9708c63..82d7da9 100644 --- a/modules/editor/_editor_module.scss +++ b/modules/editor/_editor_module.scss @@ -12,7 +12,7 @@ } .wip { @extend %wip; - &:before, &:after { + &::before, &::after { content: ""; display: block; height: 48px; @@ -20,4 +20,4 @@ } .wip_txt { @extend %wip; -} \ No newline at end of file +} diff --git a/modules/explanation/_explanation_module.scss b/modules/explanation/_explanation_module.scss index eea463c..e6412dd 100644 --- a/modules/explanation/_explanation_module.scss +++ b/modules/explanation/_explanation_module.scss @@ -7,7 +7,7 @@ // ------------------------------------------------------------------------------ %expose_after { - &:after { + &::after { content: ""; display: block; height: 48px; @@ -15,7 +15,7 @@ } } %expose_before { - &:before { + &::before { content: ""; display: block; height: 48px; @@ -23,7 +23,7 @@ } } %expose { - &:before, &:after { + &::before, &::after { content: ""; display: block; height: 48px; @@ -61,7 +61,7 @@ border: $tiny_space solid $basic_highlight_color; border-radius: $basic_size; color: $basic_highlight_color; - background-color: $dark_color; + background-color: $darkest_color; } .exp_expose { @@ -85,16 +85,16 @@ display: table; right: $space_2; bottom: $space_2; - background-color: rgba($dark_color, .4); + background-color: rgba($darkest_color, .4); &:hover { - background-color: $bright_color; + background-color: $brightest_color; > .span__solo { - color: $dark_color; + color: $darkest_color; } } .span__solo { display: table-cell; - color: rgba($bright_color, .8); + color: rgba($brightest_color, .8); font-family: $monospace_font_family; font-size: 1.4em; text-align: center; diff --git a/modules/navigation/_nav_module.scss b/modules/navigation/_nav_module.scss index 525d616..0ee17ad 100644 --- a/modules/navigation/_nav_module.scss +++ b/modules/navigation/_nav_module.scss @@ -39,6 +39,26 @@ nav { } } +.nav__separate { + li { + position: relative; + padding-left: $tiny_space; + + &:not(:first-child) { + + &::before { + content: ""; + position: absolute; + width: $tiny_space; + height: 100%; + left: 0; + top: 0; + background-color: $darkest_color; + } + } + } +} + .nav__separate_right { float: right; li { @@ -54,7 +74,7 @@ nav { height: 100%; left: 0; top: 0; - background-color: $bright_color; + background-color: $brightest_color; margin: 0 $basic_space; } } diff --git a/modules/print/_print_module.scss b/modules/print/_print_module.scss index adbe14b..e1d52ff 100644 --- a/modules/print/_print_module.scss +++ b/modules/print/_print_module.scss @@ -7,7 +7,7 @@ // ------------------------------------------------------------------------------ %paper { - background-color: $bright_color; + background-color: $brightest_color; } $a4: ".dina4" 1.2cm 1.2cm 1.2cm 2.4cm; diff --git a/modules/tables/_tables_module.scss b/modules/tables/_tables_module.scss index 8dffa72..f6e625c 100644 --- a/modules/tables/_tables_module.scss +++ b/modules/tables/_tables_module.scss @@ -7,7 +7,7 @@ border-bottom: $cell_border; &:hover { - background-color: $light_color; + background-color: $bright_color; } }