From 150fb3fdbc5f8db8f6553a93dcade4b2b8c285ed Mon Sep 17 00:00:00 2001 From: Stephan Hagedorn Date: Fri, 15 Nov 2019 20:27:50 +0100 Subject: [PATCH] switched to style submodule usage * changed paths to style module * removed initial style folder which was moved to the submodule --- .gitignore | 2 +- source/style/demo.scss | 28 +- source/style/demo_basic.scss | 28 +- source/style/hippie/_abovethefold.scss | 23 -- source/style/hippie/_basic.scss | 53 --- source/style/hippie/_hippie.scss | 33 -- source/style/hippie/elements/_embedded.scss | 64 ---- source/style/hippie/elements/_grouping.scss | 330 ------------------ .../style/hippie/elements/_interactive.scss | 259 -------------- source/style/hippie/elements/_sections.scss | 189 ---------- source/style/hippie/elements/_tables.scss | 130 ------- source/style/hippie/elements/_textlevel.scss | 303 ---------------- source/style/hippie/functions/_all.scss | 3 - source/style/hippie/functions/_color.scss | 13 - source/style/hippie/functions/_shade.scss | 24 -- source/style/hippie/functions/_tint.scss | 24 -- source/style/hippie/global/_common.scss | 316 ----------------- source/style/hippie/global/_config.scss | 272 --------------- source/style/hippie/global/_typography.scss | 60 ---- source/style/hippie/mixins/_all.scss | 5 - source/style/hippie/mixins/_color.scss | 20 -- source/style/hippie/mixins/_flow.scss | 25 -- source/style/hippie/mixins/_media_query.scss | 38 -- source/style/hippie/mixins/_sprite.scss | 123 ------- source/style/hippie/mixins/_user_agent.scss | 9 - source/style/hippie/modules/_vendor.scss | 23 -- .../breakpoint/_breakpoint_module.scss | 47 --- .../hippie/modules/card/_card_module.scss | 76 ---- .../hippie/modules/editor/_editor_module.scss | 23 -- .../style/hippie/modules/editor/_extends.scss | 0 .../style/hippie/modules/editor/_mixins.scss | 0 .../explanation/_explanation_module.scss | 115 ------ .../maintenance/_maintenance_module.scss | 19 - .../hippie/modules/media/_media_module.scss | 4 - .../modules/navigation/_nav_module.scss | 171 --------- .../style/hippie/modules/print/_extends.scss | 0 .../style/hippie/modules/print/_mixins.scss | 0 .../hippie/modules/print/_print_module.scss | 128 ------- .../hippie/modules/tables/_tables_module.scss | 68 ---- 39 files changed, 29 insertions(+), 3019 deletions(-) delete mode 100644 source/style/hippie/_abovethefold.scss delete mode 100644 source/style/hippie/_basic.scss delete mode 100644 source/style/hippie/_hippie.scss delete mode 100644 source/style/hippie/elements/_embedded.scss delete mode 100644 source/style/hippie/elements/_grouping.scss delete mode 100644 source/style/hippie/elements/_interactive.scss delete mode 100644 source/style/hippie/elements/_sections.scss delete mode 100644 source/style/hippie/elements/_tables.scss delete mode 100644 source/style/hippie/elements/_textlevel.scss delete mode 100644 source/style/hippie/functions/_all.scss delete mode 100644 source/style/hippie/functions/_color.scss delete mode 100644 source/style/hippie/functions/_shade.scss delete mode 100644 source/style/hippie/functions/_tint.scss delete mode 100644 source/style/hippie/global/_common.scss delete mode 100644 source/style/hippie/global/_config.scss delete mode 100644 source/style/hippie/global/_typography.scss delete mode 100644 source/style/hippie/mixins/_all.scss delete mode 100644 source/style/hippie/mixins/_color.scss delete mode 100644 source/style/hippie/mixins/_flow.scss delete mode 100644 source/style/hippie/mixins/_media_query.scss delete mode 100644 source/style/hippie/mixins/_sprite.scss delete mode 100644 source/style/hippie/mixins/_user_agent.scss delete mode 100644 source/style/hippie/modules/_vendor.scss delete mode 100644 source/style/hippie/modules/breakpoint/_breakpoint_module.scss delete mode 100644 source/style/hippie/modules/card/_card_module.scss delete mode 100644 source/style/hippie/modules/editor/_editor_module.scss delete mode 100644 source/style/hippie/modules/editor/_extends.scss delete mode 100644 source/style/hippie/modules/editor/_mixins.scss delete mode 100644 source/style/hippie/modules/explanation/_explanation_module.scss delete mode 100644 source/style/hippie/modules/maintenance/_maintenance_module.scss delete mode 100644 source/style/hippie/modules/media/_media_module.scss delete mode 100644 source/style/hippie/modules/navigation/_nav_module.scss delete mode 100644 source/style/hippie/modules/print/_extends.scss delete mode 100644 source/style/hippie/modules/print/_mixins.scss delete mode 100644 source/style/hippie/modules/print/_print_module.scss delete mode 100644 source/style/hippie/modules/tables/_tables_module.scss diff --git a/.gitignore b/.gitignore index 03a303f..94abb41 100644 --- a/.gitignore +++ b/.gitignore @@ -7,7 +7,7 @@ reports/** source/art/*.* source/art/images/** source/art/sprites/** -source/style/hippie/mixins/_sprite.scss +source/style/hippie-style/mixins/_sprite.scss !source/art/**/demo/ source/templates/data.json source/data/** diff --git a/source/style/demo.scss b/source/style/demo.scss index 6da4dbb..7973df3 100644 --- a/source/style/demo.scss +++ b/source/style/demo.scss @@ -1,14 +1,14 @@ -// Start a new project by creating YOUR-PROJECT.scss and _YOUR-CONFIG.scss -// Then import your config and hippie -// NOTE // No css rules allowed in here -// ------------------------------------------------------------------------------ -@import "demo_config"; -@import "hippie/hippie"; - - -// Additional Modules and variables -// in dependency to other basic styles -// could be defined here -// ----------------------------------------------------------------------------- -@import "modules/demo/demo_module"; -// @import "modules/YOUR-MODULE/YOUR-FILES"; +// Start a new project by creating YOUR-PROJECT.scss and _YOUR-CONFIG.scss +// Then import your config and hippie +// NOTE // No css rules allowed in here +// ------------------------------------------------------------------------------ +@import "demo_config"; +@import "hippie-style/hippie"; + + +// Additional Modules and variables +// in dependency to other basic styles +// could be defined here +// ----------------------------------------------------------------------------- +@import "modules/demo/demo_module"; +// @import "modules/YOUR-MODULE/YOUR-FILES"; diff --git a/source/style/demo_basic.scss b/source/style/demo_basic.scss index e28c868..6703032 100644 --- a/source/style/demo_basic.scss +++ b/source/style/demo_basic.scss @@ -1,14 +1,14 @@ -// Start a new project by creating YOUR-PROJECT.scss and _YOUR-CONFIG.scss -// Then import your config and hippie -// NOTE // No css rules allowed in here -// ------------------------------------------------------------------------------ -@import "demo_config"; -@import "hippie/basic"; - - -// Additional Modules and variables -// in dependency to other basic styles -// could be defined here -// ----------------------------------------------------------------------------- -@import "modules/demo/demo_module"; -// @import "modules/YOUR-MODULE/YOUR-FILES"; +// Start a new project by creating YOUR-PROJECT.scss and _YOUR-CONFIG.scss +// Then import your config and hippie +// NOTE // No css rules allowed in here +// ------------------------------------------------------------------------------ +@import "demo_config"; +@import "hippie-style/basic"; + + +// Additional Modules and variables +// in dependency to other basic styles +// could be defined here +// ----------------------------------------------------------------------------- +@import "modules/demo/demo_module"; +// @import "modules/YOUR-MODULE/YOUR-FILES"; diff --git a/source/style/hippie/_abovethefold.scss b/source/style/hippie/_abovethefold.scss deleted file mode 100644 index 67f413f..0000000 --- a/source/style/hippie/_abovethefold.scss +++ /dev/null @@ -1,23 +0,0 @@ -/* - * # TABLE OF CONTENTS - * - * - Reset - * - Priority CSS Rules - * - */ - - -// Reset -// Use a file outside of hippie i.e. vendor/normalize.css -// ----------------------------------------------------------------------------- -// @import "vendor/normalize.css"; - - - -/* - * # NOTE - * - * CSS rules for content which is presented immediately - * to the screen and needs priority loading - * - */ diff --git a/source/style/hippie/_basic.scss b/source/style/hippie/_basic.scss deleted file mode 100644 index 789ec50..0000000 --- a/source/style/hippie/_basic.scss +++ /dev/null @@ -1,53 +0,0 @@ -// Reset -// Use a file outside of hippie i.e. vendor/normalize.css -// ----------------------------------------------------------------------------- -@import "../../vendor/normalizecss/normalize.css"; - - - -// Functions and Mixins -// Important code constructions -// ----------------------------------------------------------------------------- -@import "functions/all"; -@import "mixins/all"; - - - -// Fonts -// Use a central file outside of hippie for font definitions with @font-face -// ----------------------------------------------------------------------------- -// @import "../../vendor/fonts.css"; - - - -// Global configuration with default values -// ----------------------------------------------------------------------------- -@import "global/config"; - - - -// Modules and variables -// ----------------------------------------------------------------------------- -@import "modules/vendor"; -// @import modules/all deprecated because of the new vendor mixin - -// Basic styles - this is the core of definitions -// Individual styles can be added her -// ----------------------------------------------------------------------------- -@import "global/common"; -@import "global/typography"; -// Following the w3c document element structure -// https://w3c.github.io/html/index.html#contents -@import "elements/sections"; -@import "elements/grouping"; -@import "elements/textlevel"; -@import "elements/embedded"; -@import "elements/tables"; -@import "elements/interactive"; - -// Individual Modules and variables -// in dependency to other styles -// ----------------------------------------------------------------------------- -@import "modules/breakpoint/breakpoint_module"; -@import "modules/tables/tables_module"; -@import "modules/maintenance/maintenance_module"; diff --git a/source/style/hippie/_hippie.scss b/source/style/hippie/_hippie.scss deleted file mode 100644 index e54c545..0000000 --- a/source/style/hippie/_hippie.scss +++ /dev/null @@ -1,33 +0,0 @@ -/* - * # TABLE OF CONTENTS - * - * - Reset - * - Global functions and mixins - * - Configuration - * - Special modules - * - Basic styles - * - Common - * - Typography - * - * - Sections - * - Grouping - * - Textlevel - * - Embedded - * - Tables - * - Interactive - * - Modules - - Breakpoint - - Tables - - Maintenance -* - */ -@import "basic"; - -// Additional Modules and variables -// in dependency to other basic styles -// ----------------------------------------------------------------------------- -@import "modules/navigation/nav_module"; -@import "modules/card/card_module"; -@import "modules/editor/editor_module"; -@import "modules/explanation/explanation_module"; -@import "modules/print/print_module"; diff --git a/source/style/hippie/elements/_embedded.scss b/source/style/hippie/elements/_embedded.scss deleted file mode 100644 index cec51b9..0000000 --- a/source/style/hippie/elements/_embedded.scss +++ /dev/null @@ -1,64 +0,0 @@ -// Embedded content -// ----------------------------------------------------------------------------- -// picture -// source -// img -// iframe -// embed -// object -// param -// video -// audio -// track -// map -// area - - - -picture { - -} - -source { - -} - -img { - vertical-align: top; -} - -iframe { - -} - -embed { - -} - -object { - -} - -param { - -} - -video { - -} - -audio { - -} - -track { - -} - -map { - -} - -area { - -} diff --git a/source/style/hippie/elements/_grouping.scss b/source/style/hippie/elements/_grouping.scss deleted file mode 100644 index f6abefa..0000000 --- a/source/style/hippie/elements/_grouping.scss +++ /dev/null @@ -1,330 +0,0 @@ -// Grouping content -// ----------------------------------------------------------------------------- -// p -// address -// hr -// pre -// blockquote -// ol -// ul -// li -// dl -// dt -// dd -// figure -// figcaption -// main -// div - - - -// Paragraph -// ----------------------------------------------------------------------------- -p { - @extend %basic; - margin-top: $space_basic; - margin-bottom: $space_basic; - code { - padding: $space_tiny $space_half; - font-size: 1em; - line-height: 1; - } -} - -.column_line { - column-rule: $border_basic; -} -.column_2, .column_3 { - @extend p; -} -.column_2 { - column-count: 2; - column-gap: $space_small; -} -.column_3 { - column-count: 3; - column-gap: $space_medium; -} - -// Address -// ----------------------------------------------------------------------------- -address { - // @extend %basic; - margin-top: $space_double; - margin-bottom: $space_double; -} - -// Line -// ----------------------------------------------------------------------------- -hr { - margin-top: $space_small; - margin-bottom: $space_small; - border-width: $width_border_basic 0 0; - border-style: solid; - border-color: $color_border_basic; -} - -.hr_hidden { - @extend hr; - border-color: transparent; -} - -.hr_dotted { - @extend hr; - border-style: dotted; -} - -// Preformat -// ----------------------------------------------------------------------------- -pre { - @extend %basic_mono; - white-space: pre-wrap; -} - -.pre_code { - overflow-x: auto; - border-color: darken($color_back_basic, $color_diff_tiny); - border-style: dotted; - border-width: 0 0 0 $width_border_4; - border-radius: $radius_basic; - padding: $space_basic; - background-color: lighten($color_back_basic, $color_diff_tiny); - code { - background-color: transparent; - } -} - -// Quote -// ----------------------------------------------------------------------------- -blockquote { - margin: $space_basic 0; - padding-right: $indent_basic; - padding-left: $indent_basic; -} - -.quote_mark { - p::before { - content: "\201E \0020"; - } - p::after { - content: "\0020 \201C"; - } - .quote_source { - &::before, &::after { - content: ""; - } - } -} - -// List -// ----------------------------------------------------------------------------- -dl, ul, ol { - margin: $space_double 0; -} - -ul, ol { - padding-left: $indent_basic; -} - -dl { - margin-left: $indent_basic; -} - -li, dt, dd { - @extend %basic; -} - -dd, .list_basic li { - margin-bottom: $space_basic; -} - -dd { - margin-left: $indent_basic; -} - -ul { - li { - list-style: square; - } -} - -.list_dash { - li { - list-style: none; - position: relative; - - &::before { - content: "_"; - position: absolute; - left: -1em; - } - } -} - -.list_link { - li { - margin-bottom: $space_tiny * 2; - text-transform: uppercase; - a { - display: block; - padding: $padding_basic; - color: $color_text_basic; - img { - margin-right: $space_basic; - padding-bottom: 0.2em; - vertical-align: text-bottom; - } - &:active, - &:focus, - &:hover { - background-color: $color_action_basic; - color: $color_highlight_basic; - } - } - } -} - -.list_horizontal { - overflow: auto; - li { - @extend .float_space_left; - } -} - -// Embedded -// ----------------------------------------------------------------------------- -figure { - margin: $space_double $indent_basic; -} - -figcaption { - @extend %basic; - color: $color_darker; -} - -// Main content -// ----------------------------------------------------------------------------- -main { - -} - -// Div -// ----------------------------------------------------------------------------- -div { - -} - -.div_info { - padding: $space_double $indent_basic; - border-right: $space_basic solid rgba($echo_color, 0.6); - background-color: rgba($echo_color, 0.1) !important; -} - -.box_space { - position: relative; - width: 100%; -} - -.box_cube { - float: left; - display: table; - width: $space_medium; - text-align: center; - vertical-align: middle; - - span { - display: table-cell; - } -} - -.box_placeholder { - width: 100%; - height: $space_medium; - border: $width_border_4 solid transparentize($alpha_color, 0.1); - border-radius: $radius_basic; - background-color: transparentize($alpha_color, 0.2); -} - -.box_placeholder_bkg { - width: 100%; - height: $space_medium * 2; - border: $width_border_4 solid transparentize($color_front_basic, 0.1); - border-radius: $radius_basic; - padding: $space_basic; - /*data:[][;charset=][;base64],*/ - background: url("data:image/svg+xml;utf8,") no-repeat; - background-color: transparentize($color_front_basic, 0.1); -} - -.box_file_tile { - @extend .float_space_left; -} - -// Flex -.flex { - display: flex; -} - -.flex_wrap { - @extend .flex; - flex-wrap: wrap; -} - -.flex_row { - @extend .flex; - flex-direction: column; - // align-items: flex-start; - justify-content: flex-start; -} - -.flex_child { - flex: 0 1 auto; -} - -.flex_child_one { - flex: 1; -} - -.flex_child_end { - align-self: flex-end; -} - -.flex_column_wrap { - @extend .flex_wrap; - - .flex_column { - @extend .flex_child; - flex-grow: 1; - } -} - -// Grid -.grid { - display: grid; - grid-gap: $space_basic; - - & > input, - & > select, - & > textarea { - margin: 0; - } - - & > label { - margin: $width_border_io; - padding: $space_half; - } -} - -.grid_column_2 { - grid-template-columns: max-content max-content; - -} - -.grid_column_4 { - grid-template-columns: max-content max-content max-content max-content; -} - -// Sprites -.sprite_img { - display: inline-block; -} diff --git a/source/style/hippie/elements/_interactive.scss b/source/style/hippie/elements/_interactive.scss deleted file mode 100644 index fcf034e..0000000 --- a/source/style/hippie/elements/_interactive.scss +++ /dev/null @@ -1,259 +0,0 @@ -// Forms -// ----------------------------------------------------------------------------- -// form -// label -// input -// button -// select -// datalist -// optgroup -// option -// textarea -// output -// progress -// meter -// fieldset -// legend - - - -// Form -// ----------------------------------------------------------------------------- -form { - -} - -// Label -// ----------------------------------------------------------------------------- -label { - @extend %basic; - - input, button, textarea, select { - margin-left: $space_basic; - } -} - -input + label { - margin-left: $space_basic; -} - -.label { - line-height: 2.5; -} - -.label > input, -.label > textarea, -.label > select { - margin: 0 $space_basic; -} - -// Input -// ----------------------------------------------------------------------------- -input { -} - -label + input { - margin-left: $space_basic; -} - -input, button, textarea, select { - margin: $margin_io; - - &[disabled="disabled"], - &[disabled] { - cursor: not-allowed; - } -} - -td > input, -td > button, -td > select, -td > textarea { - margin: 0; -} - -@each $input in $io_input_list, textarea, select { - #{$input} { - @extend %basic_mono; - line-height: 1; - } -} - -.io_input, .io_textarea, .io_select { - padding: $space_half; - color: $color_text_io; - background-color: $color_back_io; - - &:hover { - background-color: $color_highlight_basic; - } - - &[readonly="readonly"], - &[readonly] { - background-color: darken($color_back_io, $color_diff_double); - } - - &[disabled="disabled"], - &[disabled] { - &:hover { - background-color: $color_back_io; - } - } -} - -@each $input in $io_date_list { - #{$input} { - padding-top: 0; - padding-bottom: 0; - } -} - -@each $input in $io_input_list, textarea { - #{$input} { - // border: $border_io; - } -} - -.io_input, .io_textarea { - border: $border_io; - - &[readonly="readonly"], - &[readonly] { - border-color: darken($color_border_io, $color_diff_double); - } - - &[disabled="disabled"], - &[disabled] { - border-color: transparent; - } -} - -// Fieldset -// ----------------------------------------------------------------------------- -fieldset { - margin: $margin_double; - padding: $space_basic; - border: $border_basic; -} - -// Legend -// ----------------------------------------------------------------------------- -legend { - @extend %basic; - padding: 0 $space_half; -} - -// Button -// ----------------------------------------------------------------------------- -button { - -} - -.io_button { - @extend %basic_button; - border: $width_border_io solid $color_border_button; - padding: $padding_basic; - color: $color_text_button; - background-color: $color_back_button; - - &:hover { - // border-color: #0059F6; - border-color: transparent; - color: white; - background-color: $foxtrot_color; - } - - &[disabled="disabled"], - &[disabled] { - border-color: transparent; - color: lighten($color_text_button, $color_diff_double); - - &:hover { - background-color: $color_back_button; - } - } -} - -// Selection -// ----------------------------------------------------------------------------- -select { - border: none; -} - -// Datalist -// ----------------------------------------------------------------------------- -datalist { - -} - -// Options -// ----------------------------------------------------------------------------- -optgroup { - -} - -option { - -} - -// Textarea -// ----------------------------------------------------------------------------- -textarea { -} - -.io_textarea { - line-height: 1.2; -} - -// Output -// ----------------------------------------------------------------------------- -output { - -} - -// Progress -// ----------------------------------------------------------------------------- -progress { - -} - -meter { - -} - - - -// Interactive elements -// ----------------------------------------------------------------------------- -// details -// summary -// dialog - - - -details { - -} - -summary { - -} - -dialog { - -} - - - -// Scripting -// ----------------------------------------------------------------------------- -// script -// noscript -// template -// canvas - - - -canvas { - -} diff --git a/source/style/hippie/elements/_sections.scss b/source/style/hippie/elements/_sections.scss deleted file mode 100644 index 268dbbb..0000000 --- a/source/style/hippie/elements/_sections.scss +++ /dev/null @@ -1,189 +0,0 @@ -// Root -// ----------------------------------------------------------------------------- -html { - // height: 100%; -} - - - -// Sections -// ----------------------------------------------------------------------------- -// body -// article -// section -// nav -// aside -// h1-h6 -// header -// footer - - - -// Body -// ----------------------------------------------------------------------------- -body { - position: relative; - box-sizing: $box_sizing; - margin: 0; - font-family: $family_text_basic; - font-size: $size_text_basic; - line-height: $line_basic; - line-height: $line_text_basic; - color: $color_text_basic; - background-color: $color_back_basic; - - *, - ::before, - ::after { - box-sizing: inherit; - } - - &:hover { - - .mouse_over { - background-color: transparent !important; - transition: background-color $duration_double $timing_basic 0s !important; - } - } -} - -// Article -// ----------------------------------------------------------------------------- -article { - -} - -// Section -// ----------------------------------------------------------------------------- -section { - -} - -.sec_main_center { - width: $width_basic; - margin: 0 auto; - padding-top: $space_small; - - @include forTabletPortraitUp { - width: $width_small; - } - @include forTabletLandscapeUp { - width: $width_medium; - } - @include forBigDesktopUp { - width: $width_large; - } -} - -.sec_main_status { - border-top-width: $width_border_8; - border-top-style: solid; - border-color: $color_border_basic; - padding-top: $space_small; -} - -// Navigation -// ----------------------------------------------------------------------------- -nav { - -} - -// Aside element -// ----------------------------------------------------------------------------- -aside { - width: $width_aside_basic; - - &.right + .bside { - margin-right: calc(#{$width_aside_basic} + #{$space_basic}); - } - - &.left + .bside { - margin-left: calc(#{$width_aside_basic} + #{$space_basic}); - } - - &.right { - float: right; - } - - &.left { - float: left; - } - - *:first-child { - margin-top: 0; - } -} - -// Headings -// ----------------------------------------------------------------------------- -h1, h2, h3, h4, h5, h6 { - @extend %head_all; -} - -h1 { - @extend %head_1; - margin: $space_large 0 $space_small; -} - -h1 + h1 { - margin-top: 0; -} - -h2 { - @extend %head_2; - margin: $space_medium 0 $space_small; -} - -h2 + h2 { - margin-top: 0; -} - -h3 { - @extend %head_3; - margin: $space_double 0; - text-transform: uppercase; -} - -h4 { - @extend %head_3; - margin: $space_double 0; - text-transform: none; -} - -h5 { - @extend %head_4; - margin: $space_double 0 $space_basic; - text-transform: none; -} - -h6 { - @extend %basic; - margin: $space_basic 0; - text-transform: none; - font-weight: bold; -} - -// Header -// ----------------------------------------------------------------------------- -header { - -} - -.header_page { - overflow: auto; -} - -.header_txt { - margin-bottom: $space_small; - border-bottom: $border_dotted; - - h1 { - border-top: $border_basic; - } -} - -// Footer -// ----------------------------------------------------------------------------- -footer { - -} diff --git a/source/style/hippie/elements/_tables.scss b/source/style/hippie/elements/_tables.scss deleted file mode 100644 index 662bb74..0000000 --- a/source/style/hippie/elements/_tables.scss +++ /dev/null @@ -1,130 +0,0 @@ -// Tabular data -// ----------------------------------------------------------------------------- -// table -// caption -// colgroup -// col -// tbody -// thead -// tfoot -// tr -// td -// th - - - -// Table -// ----------------------------------------------------------------------------- -table { - margin: $margin_double; - border: $border_basic; - border-collapse: collapse; -} - -.table_blank { - border: $width_border_basic solid transparent; - - th, td { - border: $width_border_basic solid transparent; - } -} - -.table_free { - border: $width_border_basic solid transparent; -} - -.table_stripe { - td { - border-top: 0; - border-bottom: 0; - } - - tr:nth-child(even) td { - background-color: lighten($color_back_basic, $color_diff_tiny); - } -} - -.table_fix { - table-layout: fixed; -} - -.table_file_simple { - @extend .width_full; -} - -// Caption -// ----------------------------------------------------------------------------- -caption { - @extend p; - padding: $space_half 0; - border: $border_dotted; - text-align: center; -} - -// Columns -// ----------------------------------------------------------------------------- -colgroup { - -} - -col { - -} - -// Table body -// ----------------------------------------------------------------------------- -tbody { - -} - -// Table head -// ----------------------------------------------------------------------------- -thead { - -} - -// Table foot -// ----------------------------------------------------------------------------- -tfoot { - - tr:first-child td { - border-top: $border_basic; - } -} - -// Row -// ----------------------------------------------------------------------------- -tr { - -} - -// Cells -// ----------------------------------------------------------------------------- -th, td { - @extend %basic; - padding: $space_half; -} - -th { - border: $border_basic; - text-align: left; -} - -td { - border-right: $border_basic; - border-bottom: $border_basic; -} - -td:last-child { - border-right: 0; - - td { - border-bottom: 0; - } -} - -.cell_pre { - // border-right-width: $width_border_4; - // border-right-color: lighten($color_back_basic, $color_diff_basic); - background-color: lighten($color_back_basic, $color_diff_tiny); -} diff --git a/source/style/hippie/elements/_textlevel.scss b/source/style/hippie/elements/_textlevel.scss deleted file mode 100644 index 6a68ddb..0000000 --- a/source/style/hippie/elements/_textlevel.scss +++ /dev/null @@ -1,303 +0,0 @@ -// Text-Level semantics -// ----------------------------------------------------------------------------- -// a -// em -// strong -// small -// s -// cite -// q -// dfn -// abbr -// ruby -// rb -// rt -// rtc -// rp -// data -// time -// code -// var -// samp -// kbd -// sub -// sup -// i -// b -// u -// mark -// bdi -// bdo -// span -// br -// wbr - - - -// Links -// ----------------------------------------------------------------------------- -a { - color: $color_link_basic; - // color: lighten($color_action_basic, 20%); - text-decoration: none; - - &:active, - &:focus, - &:hover { - color: $color_highlight_basic; - } -} - -.a_internal { - color: $charlie_color; -} - -.a_external { - color: $delta_color; -} - -.a_line { - border-bottom-width: $space_tiny; - border-bottom-style: dotted; - border-color: $color_border_basic; - color: $color_text_basic; - background-color: transparent; - transition: color $duration_basic $timing_basic; - - &:active, - &:focus, - &:hover { - color: $color_highlight_basic; - background-color: $color_action_basic; - } -} - -.a_button { - display: inline-block; - padding: $padding_basic; - border-radius: $radius_basic; - background-color: transparentize($color_link_basic, 0.8); - - &:active, - &:focus, - &:hover { - border-color: transparent; - background-color: transparentize($color_highlight_basic, 0.8); - } -} - -.a_button_text { - @extend .a_button; - padding: $padding_link; - color: $color_text_basic; - background-color: transparent; -} - -.a_button_border { - @extend .a_button_text; - border: $border_basic; -} - - -// Italic, Emphasis -// ----------------------------------------------------------------------------- -i, em { - font-style: italic; -} - -.i_bright { - color: $color_highlight_basic; - font-style: normal; -} - -// Bold, Strong -// ----------------------------------------------------------------------------- -b, strong { - font-weight: 500; // TODO maybe bolder -} - -// Small -// ----------------------------------------------------------------------------- -small { - -} - -// No longer accurate or no longer relevant -// ----------------------------------------------------------------------------- -s { - -} - -// Citation -// ----------------------------------------------------------------------------- -cite { - font-style: italic; -} - -// Phrasing content, quoted -// ----------------------------------------------------------------------------- -q { - -} - -// Definition -// ----------------------------------------------------------------------------- -dfn { - -} - -// Abbreviation -// ----------------------------------------------------------------------------- -abbr { - -} - -// Ruby annotations -// ----------------------------------------------------------------------------- -ruby { - -} - -rb { - -} - -rt { - -} - -rtc { - -} - -rp { - -} - -// Machine readable data -// ----------------------------------------------------------------------------- -data { - -} - -// Machine readable time -// ----------------------------------------------------------------------------- -time { - -} - -// Code -// ----------------------------------------------------------------------------- -code { - @extend %basic_mono; - color: lighten($color_text_basic, $color_diff_basic); - background-color: lighten($color_back_basic, $color_diff_tiny); -} - -.code_solo { - @extend %basic_mono; - padding: $space_tiny $space_half; - color: $color_text_basic; -} - -// Variable -// ----------------------------------------------------------------------------- -var { - -} - -// Sample -// ----------------------------------------------------------------------------- -samp { - @extend %basic_mono; -} - -// Keyboard input -// ----------------------------------------------------------------------------- -kbd { - @extend %basic_mono; - // font-size: .9em; - // font-weight: bold; - padding: 0 $space_half; - border-width: $width_border_basic; - border-style: solid; - border-color: $color_darker; - border-radius: $radius_basic; - color: lighten($color_text_basic, $color_diff_basic); -} - -// Sub- and superscript -// ----------------------------------------------------------------------------- -sub, sup { - -} - -// Unarticulated, non-textual annotation -// ----------------------------------------------------------------------------- -u { - -} - -// Marks -// ----------------------------------------------------------------------------- -mark { - background-color: $alpha_color; -} - -.mark_cursor { - color: invert($color_text_basic); - background-color: $color_text_basic; -} - -::-moz-selection { - color: invert($color_text_basic); - background-color: $color_text_basic; -} - -::selection { - color: invert($color_text_basic); - background-color: $color_text_basic; -} - -// Text direction -// ----------------------------------------------------------------------------- -bdi, bdo { - -} - -// Span -// ----------------------------------------------------------------------------- -span { - -} - -.span_solo { - @extend %solo; -} - -// Linebreaks -// ----------------------------------------------------------------------------- -br { - -} - -wbr { - -} - - - -// Edits -// ----------------------------------------------------------------------------- -// ins -// del - - - -ins { - -} - -del { - -} diff --git a/source/style/hippie/functions/_all.scss b/source/style/hippie/functions/_all.scss deleted file mode 100644 index 0e63090..0000000 --- a/source/style/hippie/functions/_all.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "color"; -@import "shade"; -@import "tint"; diff --git a/source/style/hippie/functions/_color.scss b/source/style/hippie/functions/_color.scss deleted file mode 100644 index 0e32ddb..0000000 --- a/source/style/hippie/functions/_color.scss +++ /dev/null @@ -1,13 +0,0 @@ -@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/source/style/hippie/functions/_shade.scss b/source/style/hippie/functions/_shade.scss deleted file mode 100644 index 34a652b..0000000 --- a/source/style/hippie/functions/_shade.scss +++ /dev/null @@ -1,24 +0,0 @@ -@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/source/style/hippie/functions/_tint.scss b/source/style/hippie/functions/_tint.scss deleted file mode 100644 index fa16997..0000000 --- a/source/style/hippie/functions/_tint.scss +++ /dev/null @@ -1,24 +0,0 @@ -@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/source/style/hippie/global/_common.scss b/source/style/hippie/global/_common.scss deleted file mode 100644 index 05feec7..0000000 --- a/source/style/hippie/global/_common.scss +++ /dev/null @@ -1,316 +0,0 @@ -// General classes -// ----------------------------------------------------------------------------- - - - -%size_content { - box-sizing: content-box; -} - -%size_content_solo { - @extend %size_content; - - *, - ::before, - ::after { - box-sizing: $box_sizing; - } -} - -%h_content_full { - height: 100%; - - body { - min-height: 100%; - } -} - -%hidden { - display: none; -} - -.hide { - @extend %hidden; -} - -.space_even_auto { - margin-right: auto; - margin-left: auto; -} - -.space_even_half { - margin-right: 25%; - margin-left: 25%; -} - -.space_even_fourth { - margin-right: 37.5%; - margin-left: 37.5%; -} - -@each $size, $variable in (basic, #{$space_basic}), - (small, #{$space_small}), - (medium, #{$space_medium}), - (large, #{$space_large}) { - .space_top_#{$size} { - margin-top: $variable; - } - .space_right_#{$size} { - margin-right: $variable; - } - .space_bottom_#{$size} { - margin-bottom: $variable; - } - .space_left_#{$size} { - margin-left: $variable; - } -} - -.space_left_fourth { - margin-left: 25%; -} - -.width_full { - width: 100%; - margin-right: 0; - margin-left: 0; -} - -.width_half { - width: 50%; - margin-right: 0; - margin-left: 0; -} - -.width_third { - width: 33.3%; - margin-right: 0; - margin-left: 0; -} - -.h_basic { - height: 1024px; -} - -.h_full_view { - height: 100vh; -} - -.h_100 { - height: 100%; -} - -.wrap_center { - & > * { - margin-right: (100% - $width_basic) / 2; - margin-left: (100% - $width_basic) / 2; - - @include forTabletPortraitUp { - margin-right: (100% - $width_small) / 2; - margin-left: (100% - $width_small) / 2; - } - @include forTabletLandscapeUp { - margin-right: (100% - $width_medium) / 2; - margin-left: (100% - $width_medium) / 2; - } - @include forBigDesktopUp { - margin-right: (100% - $width_large) / 2; - margin-left: (100% - $width_large) / 2; - } - } -} - - - -// Clearing and floating -// ----------------------------------------------------------------------------- -.clear { - clear: both; - - &::before, - &::after { - clear: both; - } -} - -.overflow { - overflow: auto; -} - -.float_left { - float: left; -} - -.float_right { - float: right; -} - -.float_space_left { - @extend .float_left; - margin-right: $space_small; -} - -.float_half_size { - float: left; - width: 50%; -} - -.x_long { - overflow-x: scroll; -} - - - -// Inlining -// ----------------------------------------------------------------------------- -.inline { - display: inline-block; -} - - - -// Positioned elements -// ----------------------------------------------------------------------------- -%viewport_fixed { - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; -} - -%full_parent { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - // width: 100%; - // height: 100%; -} - -.pos_abs { - position: absolute; -} - -.pos_rel { - position: relative; -} - -.pos_fix { - position: fixed; -} - -.pin_top { - top: 0; -} - -.pin_right { - right: 0; -} - -.pin_bottom { - bottom: 0; -} - -.pin_left { - left: 0; -} - -.pos_full_view { - @extend %viewport_fixed; - background-color: rgba($alpha_color, 0.5); -} - -.pos_full_page { - @extend %full_parent; - background-color: rgba($charlie_color, 0.25); -} - -.hover_back_change { - background-color: $color_darker; - transition: background-color 0.2s ease-in-out; - - &:hover { - background-color: $color_back_basic; - } -} - -.mouse_over { - @extend %viewport_fixed; - z-index: $z_heaven; - background-color: transparentize($color_darkest, 0.5); - transition: background-color $duration_long $timing_basic $duration_long; - pointer-events: none; -} - - - -// Colors -// ----------------------------------------------------------------------------- -.txt_color_light { - color: $color_brighter; -} - -.txt_color_dark { - color: $color_darker; -} - - - -// Text -// ----------------------------------------------------------------------------- -.txt_tiny { - font-size: .5em !important; -} - -.txt_smaller { - font-size: .75em !important; -} - -.txt_larger { - font-size: 1.2em !important; -} - -.txt_huge { - font-size: 3em !important; -} - -.txt_hero { - font-size: $size_hero; -} - -.txt_center { - text-align: center !important; -} - -.txt_right { - text-align: right !important; -} - -.txt_left { - text-align: left !important; -} - -.txt_top { - vertical-align: top !important; -} - -.txt_bottom { - vertical-align: bottom !important; -} - -.txt_white { - color: white; -} - -.txt_black { - color: black; -} - -.txt_gradient { - background: linear-gradient(165deg, $alpha_color 30%, $bravo_color 45%, $charlie_color 50%, $delta_color, $echo_color 80%, $foxtrot_color); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} diff --git a/source/style/hippie/global/_config.scss b/source/style/hippie/global/_config.scss deleted file mode 100644 index bf26ee2..0000000 --- a/source/style/hippie/global/_config.scss +++ /dev/null @@ -1,272 +0,0 @@ -// Default configuration -// ------------------------------------------------------------------------------ - - - -// TEXT -// ------------------------------------------------------------------------------ -$size_text_basic: 17px !default; -$size_text_print: 10pt !default; - -$line_basic: 1; - -// $i: 1; -// @while $i < 7 { -// %head_#{$i} { width: 2em * $i; } -// $i: $i + 1; -// } -// $head_sizes: (h1: 3.1em, h2: 2.5em, h3: 1.8em, h4: 1.35em); -// -// @each $head, $size in $head_sizes { -// #{$head} { -// font-size: $size; -// } -// } - -// $head_sizes: ( -// basic: ( -// 'h1': ('font-size': 24), -// 'h2': ('font-size': 20), -// 'h3': ('font-size': 19), -// 'h4': ('font-size': 18), -// 'h5': ('font-size': 17), -// 'h6': ('font-size': 16), -// ), -// print: ( -// 'h1': ('font-size': 48), -// 'h2': ('font-size': 40), -// 'h3': ('font-size': 31), -// 'h4': ('font-size': 25), -// 'h5': ('font-size': 20), -// 'h6': ('font-size': 16), -// ), -// ); - -$size_head_1: 3.1em !default; -$size_head_2: 2.5em !default; -$size_head_3: 1.8em !default; -$size_head_4: 1.35em !default; - -$size_text_1: 1em; -$size_text_2: 20; - -$size_hero: $size_head_1 * 3; - -$line_text_basic: 1.28 !default; -$line_text_mono: 1.1 !default; -$line_head_basic: $line_text_basic !default; - -$family_text_basic: #{'Roboto', 'Segoe UI', 'Liberation Sans', 'Source Sans', 'Trebuchet MS', Helvetica, Arial, sans-serif, sans} !default; -$family_text_print: #{'Times New Roman', times} !default; -$family_text_mono: #{'Courier New', monospace} !default; -$family_text_card: #{'Trebuchet MS', 'Roboto', 'Segoe UI', 'Liberation Sans', 'Source Sans', 'Trebuchet MS', Helvetica, Arial, sans-serif, sans} !default; -$family_head_basic: $family_text_basic !default; - - - -// COLORS -// ------------------------------------------------------------------------------ -$color_palette: ( - alpha: #fad803, - bravo: #d30a51, - charlie: #273f8b, - delta: #b7e0f0, - echo: #52bed1, - foxtrot: #0c85ff -) !default; - -@include addDefaultColors; - -$color_diff_basic: 12% !default; -$color_diff_tiny: 4% !default; -$color_diff_double: $color_diff_basic * 2; - -$color_darkest: black !default; -$color_brightest: white !default; - -$color_text_basic: black !default; -$color_back_basic: #808080 !default; -$color_border_basic: lighten($color_text_basic, $color_diff_basic) !default; -$color_front_basic: white !default; - -$color_medium: lighten($color_darkest, 50%); -$color_dark: lighten($color_darkest, $color_diff_double); -$color_darker: darken($color_back_basic, $color_diff_basic); -$color_brighter: lighten($color_back_basic, $color_diff_basic); -$color_bright: darken($color_brightest, $color_diff_double); - -$color_head_basic: $color_text_basic !default; -$color_link_basic: $delta_color !default; -$color_highlight_basic: $color_front_basic !default; -$color_action_basic: $foxtrot_color !default; - - -// default shadow colors -// $shadow_color: fade-out($color_medium, 0.5); - -$color_list: (); - -@each $key, $value in $color_palette { - $map: (); - $map: map-merge($map, ($key: createColorMap($value, 15%, 0.5)) ); - $color_list: map-merge($color_list, $map); -} - - - -// LAYOUT -// ------------------------------------------------------------------------------ -$box_sizing: border-box !default; - -$z_heaven: 100 !default; -$z_top: 10 !default; -$z_basic: 1 !default; -$z_earth: -100 !default; - -$width_basic: 96% !default; -$width_small: 80% !default; -$width_medium: 60% !default; -$width_large: 48% !default; -$width_aside_basic: 20% !default; - -$space_tiny: 1px !default; -$space_basic: $space_tiny * 8 !default; -$space_half: $space_basic / 2; -$space_double: $space_basic * 2; -$space_small: $space_basic * 4; -$space_medium: $space_basic * 8; -$space_large: $space_basic * 16; - -$margin_basic: $space_basic 0 !default; -$margin_double: $space_double 0 !default; -$margin_io: 0 $space_small 0 0 !default; - -$padding_basic: calc(#{$space_basic} - 3px) $space_basic !default; -$padding_link: calc(#{$space_basic} - 1px) calc(#{$space_basic} * 2) !default; - -$indent_basic: 2em !default; - -$border_basic: $space_tiny solid $color_border_basic; -$border_dotted: $space_tiny dotted $color_border_basic; -$width_border_basic: $space_tiny !default; -$width_border_4: $width_border_basic * 4; -$width_border_8: $width_border_basic * 8; - -$radius_basic: $space_tiny * 2 !default; - - - -// IO -// ------------------------------------------------------------------------------ -$io_input_list: - 'input[type="text"]', - 'input[type="number"]', - 'input[type="color"]', - 'input[type="range"]', - 'input[type="date"]', - 'input[type="time"]', - 'input[type="datetime-local"]', - 'input[type="month"]', - 'input[type="week"]', - 'input[type="email"]', - 'input[type="password"]', - 'input[type="tel"]', - 'input[type="url"]', - 'input[type="search"]', - 'input:not([type])'; - -$io_date_list: - '.io_input[type="date"]', - '.io_input[type="time"]', - '.io_input[type="datetime-local"]', - '.io_input[type="month"]', - '.io_input[type="week"]'; - -$io_button_list: - 'button', - 'input[type="button"]', - // 'input[type="file"]', - 'input[type="reset"]', - 'input[type="image"]', - 'input[type="submit"]'; - -$io_focus_list: - 'a[href]', - 'area[href]', - 'button:not([disabled])', - 'input:not([disabled])', - 'select:not([disabled])', - 'textarea:not([disabled])', - '*[tabindex]'; - -$color_text_io: lighten($color_text_basic, $color_diff_basic) !default; -$color_text_button: $color_text_basic !default; -$color_back_io: darken($color_front_basic, $color_diff_basic) !default; -$color_back_button: $color_darker !default; -$color_border_io: $color_front_basic !default; -$color_border_button: $color_dark !default; - -$width_border_io: $space_tiny * 2 !default; -$border_io: $width_border_io solid $color_border_io; -$border_io_dotted: $width_border_io dotted $color_border_io; - -$shadow_basic: inset 0 1px 3px rgba($color_darkest, 0.06); -$shadow_focus: $shadow_basic, 0 0 5px adjust-color($color_action_basic, $lightness: -5%, $alpha: -0.3); - - - -// ANIMATIONS -// ------------------------------------------------------------------------------ -$duration_basic: 250ms !default; -$duration_double: $duration_basic * 2; -$duration_long: 2s !default; -$timing_basic: ease-out !default; - - - -// HARDWARE BREAKPOINTS -// ------------------------------------------------------------------------------ -$screen_tiny: 768px; -$screen_small: 1024px; -$screen_medium: 1280px; -$screen_large: 1440px; -$screen_huge: 1680px; -$screen_gigantic: 1920px; - - - -// VENDOR PREFIX -// ------------------------------------------------------------------------------ -$prefix_defaults: -moz- -webkit- -o- -ms- ''; -$webkit_support: -webkit- ''; -$moz_support: -moz- ''; -$ms_support: -ms- ''; -$moz_webkit_support: -moz- -webkit- ''; -$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; diff --git a/source/style/hippie/global/_typography.scss b/source/style/hippie/global/_typography.scss deleted file mode 100644 index c4f0fc9..0000000 --- a/source/style/hippie/global/_typography.scss +++ /dev/null @@ -1,60 +0,0 @@ -// Basic styles -// ----------------------------------------------------------------------------- - -%basic { - font-family: $family_text_basic; - font-size: $size_text_1; - line-height: $line_text_basic; -} - -%basic_mono { - font-family: $family_text_mono; - font-size: $size_text_1; - line-height: $line_text_mono; -} - -%basic_print { - font-family: $family_text_print; - font-size: $size_text_1; - line-height: $line_text_basic; -} - -%head_all { - color: $color_head_basic; - font-family: $family_head_basic; - line-height: $line_head_basic; -} - -%head_1 { - font-size: $size_head_1; - font-weight: 300; -} - -%head_2 { - font-size: $size_head_2; - font-weight: 300; -} - -%head_3 { - font-size: $size_head_3; - font-weight: 300; -} - -%head_4 { - font-size: $size_head_4; - font-weight: 300; -} - -%basic_button { - @extend %basic; -} - -%solo { - @extend %basic; -} - -%short { - overflow: hidden; - text-overflow: ellipsis; - -o-text-overflow: ellipsis; // vendor -} diff --git a/source/style/hippie/mixins/_all.scss b/source/style/hippie/mixins/_all.scss deleted file mode 100644 index 054305c..0000000 --- a/source/style/hippie/mixins/_all.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import "media_query"; -@import "sprite"; -@import "flow"; -@import "color"; -@import "user_agent"; diff --git a/source/style/hippie/mixins/_color.scss b/source/style/hippie/mixins/_color.scss deleted file mode 100644 index 3822647..0000000 --- a/source/style/hippie/mixins/_color.scss +++ /dev/null @@ -1,20 +0,0 @@ -@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/source/style/hippie/mixins/_flow.scss b/source/style/hippie/mixins/_flow.scss deleted file mode 100644 index 2264389..0000000 --- a/source/style/hippie/mixins/_flow.scss +++ /dev/null @@ -1,25 +0,0 @@ -@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/source/style/hippie/mixins/_media_query.scss b/source/style/hippie/mixins/_media_query.scss deleted file mode 100644 index 4f4656c..0000000 --- a/source/style/hippie/mixins/_media_query.scss +++ /dev/null @@ -1,38 +0,0 @@ -//Sections for Media Queries -@mixin forPhoneUp { - @media (min-width: #{$screen_tiny - 1}) { @content; } //599px -} -@mixin forPhoneOnly { - @media (max-width: #{$screen_tiny - 1}) { @content; } //599px -} -@mixin forTabletPortraitUp { - @media (min-width: $screen_small) { @content; } //600px -} -@mixin forTabletPortraitOnly { - @media (min-width: $screen_tiny) and (max-width: #{$screen_small - 1}) { @content; } //600px - 899px -} -@mixin forTabletLandscapeUp { - @media (min-width: $screen_small) { @content; } //900px -} -@mixin forTabletLandscapeOnly { - @media (min-width: $screen_small) and (max-width: #{$screen_medium - 1}) { @content; } //900px - 1199px -} -@mixin forDesktopUp { - @media (min-width: $screen_medium) { @content; } //1200px -} -@mixin forDesktopOnly { - @media (min-width: $screen_medium) and (max-width: #{$screen_huge - 1}) { @content; } //1200px - 1799px -} -@mixin forBigDesktopUp { - @media (min-width: $screen_huge) { @content; } //1800px -} - -//Mobile-first Media Query -@mixin goingLarge($width) { - @media (min-width: $width/16+em) { @content; } -} - -//Desktop-first Media Query -@mixin goingSmall($width) { - @media (max-width: $width/16+em) { @content; } -} diff --git a/source/style/hippie/mixins/_sprite.scss b/source/style/hippie/mixins/_sprite.scss deleted file mode 100644 index 6068269..0000000 --- a/source/style/hippie/mixins/_sprite.scss +++ /dev/null @@ -1,123 +0,0 @@ -// SCSS variables are information about icon's compiled state, stored under its original file name -// -// .icon-home { -// width: $icon-home-width; -// } -// -// The large array-like variables contain all information about a single icon -// $icon-home: x y offset_x offset_y width height total_width total_height image_path; -// -// At the bottom of this section, we provide information about the spritesheet itself -// $spritesheet: width height image $spritesheet-sprites; -$down-name: 'down'; -$down-x: 64px; -$down-y: 0px; -$down-offset-x: -64px; -$down-offset-y: 0px; -$down-width: 32px; -$down-height: 32px; -$down-total-width: 96px; -$down-total-height: 64px; -$down-image: '../art/sprite.png'; -$down: (64px, 0px, -64px, 0px, 32px, 32px, 96px, 64px, '../art/sprite.png', 'down', ); -$meta-name: 'meta'; -$meta-x: 64px; -$meta-y: 32px; -$meta-offset-x: -64px; -$meta-offset-y: -32px; -$meta-width: 32px; -$meta-height: 32px; -$meta-total-width: 96px; -$meta-total-height: 64px; -$meta-image: '../art/sprite.png'; -$meta: (64px, 32px, -64px, -32px, 32px, 32px, 96px, 64px, '../art/sprite.png', 'meta', ); -$up-name: 'up'; -$up-x: 0px; -$up-y: 0px; -$up-offset-x: 0px; -$up-offset-y: 0px; -$up-width: 32px; -$up-height: 64px; -$up-total-width: 96px; -$up-total-height: 64px; -$up-image: '../art/sprite.png'; -$up: (0px, 0px, 0px, 0px, 32px, 64px, 96px, 64px, '../art/sprite.png', 'up', ); -$up2-name: 'up2'; -$up2-x: 32px; -$up2-y: 0px; -$up2-offset-x: -32px; -$up2-offset-y: 0px; -$up2-width: 32px; -$up2-height: 64px; -$up2-total-width: 96px; -$up2-total-height: 64px; -$up2-image: '../art/sprite.png'; -$up2: (32px, 0px, -32px, 0px, 32px, 64px, 96px, 64px, '../art/sprite.png', 'up2', ); -$spritesheet-width: 96px; -$spritesheet-height: 64px; -$spritesheet-image: '../art/sprite.png'; -$spritesheet-sprites: ($down, $meta, $up, $up2, ); -$spritesheet: (96px, 64px, '../art/sprite.png', $spritesheet-sprites, ); - -// The provided mixins are intended to be used with the array-like variables -// -// .icon-home { -// @include sprite-width($icon-home); -// } -// -// .icon-email { -// @include sprite($icon-email); -// } -// -// Example usage in HTML: -// -// `display: block` sprite: -//
-// -// To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class: -// -// // CSS -// .icon { -// display: inline-block; -// } -// -// // HTML -// -@mixin sprite-width($sprite) { - width: nth($sprite, 5); -} - -@mixin sprite-height($sprite) { - height: nth($sprite, 6); -} - -@mixin sprite-position($sprite) { - $sprite-offset-x: nth($sprite, 3); - $sprite-offset-y: nth($sprite, 4); - background-position: $sprite-offset-x $sprite-offset-y; -} - -@mixin sprite-image($sprite) { - $sprite-image: nth($sprite, 9); - background-image: url(#{$sprite-image}); -} - -@mixin sprite($sprite) { - @include sprite-image($sprite); - @include sprite-position($sprite); - @include sprite-width($sprite); - @include sprite-height($sprite); -} - -// The `sprites` mixin generates identical output to the CSS template -// but can be overridden inside of SCSS -// -// @include sprites($spritesheet-sprites); -@mixin sprites($sprites) { - @each $sprite in $sprites { - $sprite-name: nth($sprite, 10); - .#{$sprite-name} { - @include sprite($sprite); - } - } -} diff --git a/source/style/hippie/mixins/_user_agent.scss b/source/style/hippie/mixins/_user_agent.scss deleted file mode 100644 index 93c71c9..0000000 --- a/source/style/hippie/mixins/_user_agent.scss +++ /dev/null @@ -1,9 +0,0 @@ -@mixin overrideUserAgent() { - @if $no_agent_focus == true { - @each $el in $io_focus_list { - #{$el}:focus { - outline: 0; - } - } - } -} diff --git a/source/style/hippie/modules/_vendor.scss b/source/style/hippie/modules/_vendor.scss deleted file mode 100644 index b39ab41..0000000 --- a/source/style/hippie/modules/_vendor.scss +++ /dev/null @@ -1,23 +0,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) - */ -@mixin vendor-prefix($name, $argument) { - -webkit-#{$name}: #{$argument}; - -ms-#{$name}: #{$argument}; - -moz-#{$name}: #{$argument}; - -o-#{$name}: #{$argument}; - #{$name}: #{$argument}; -} - diff --git a/source/style/hippie/modules/breakpoint/_breakpoint_module.scss b/source/style/hippie/modules/breakpoint/_breakpoint_module.scss deleted file mode 100644 index 50f60ec..0000000 --- a/source/style/hippie/modules/breakpoint/_breakpoint_module.scss +++ /dev/null @@ -1,47 +0,0 @@ -.query_goingLarge { - @include goingLarge($screen_tiny) {}; -} - -.query_goingSmall { - @include goingSmall($screen_gigantic) {}; -} - -.query_phoneUp { - @include forPhoneUp {} -} - -.query_phoneOnly { - @include forPhoneOnly {} -} - -.query_tabletPortaitOnly { - @include forTabletPortraitOnly { - } -} - -.query_tabletPortraitUp { - @include forTabletPortraitUp { - } -} - -.query_tabletLandscapeOnly { - @include forTabletLandscapeOnly {} -} - -.query_tabletLandscapeUp { - @include forTabletLandscapeUp {} -} - -.query_desktopOnly { - @include forDesktopOnly { - } -} - -.query_desktopUp { - @include forDesktopUp { - } -} - -.query_bigDesktopUp { - @include forBigDesktopUp {} -} diff --git a/source/style/hippie/modules/card/_card_module.scss b/source/style/hippie/modules/card/_card_module.scss deleted file mode 100644 index 2f40b1d..0000000 --- a/source/style/hippie/modules/card/_card_module.scss +++ /dev/null @@ -1,76 +0,0 @@ -// Card module styles -// ------------------------------------------------------------------------------ - -.html_card { - @extend %h_content_full; - - body { - - .card_bkg { - @extend %full_parent; - transition-duration: 800ms; - overflow: hidden; - vertical-align: top; - z-index: -1; - - & > svg { - position: relative; - } - } - - .card_box { - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - - * { - font-family: $family_text_card; - // text-align: center; - } - - & > div { - position: relative; - padding: 64px 64px 24px 64px; - border: 1px solid #FFF; - background-color: #F5F5F5; - z-index: 40; - } - } - - h1 { - margin: 16px 0; - color: #1E1E1E; - font-size: 24px; - line-height: 1.4em; - font-weight: normal; - } - - p { - margin-top: 0; - margin-bottom: 16px; - font-size: 12px; - line-height: 1.4em; - } - - .marked { - // padding-left: 1em; - // text-indent: -1em; - - &::before { content: "*\0000a0" } - } - - .decent { color: #666 } - - a { - color: #000; - text-decoration: none; - - &:hover { - color: #F4F9FA; - background-color: #0C85FF; - text-decoration: none; - } - } - } -} diff --git a/source/style/hippie/modules/editor/_editor_module.scss b/source/style/hippie/modules/editor/_editor_module.scss deleted file mode 100644 index f7505c1..0000000 --- a/source/style/hippie/modules/editor/_editor_module.scss +++ /dev/null @@ -1,23 +0,0 @@ -// Custom extends and mixins -// ------------------------------------------------------------------------------ -@import "mixins"; -@import "extends"; - -// Editor module styles -// ------------------------------------------------------------------------------ - -%wip { - border-right: $space_basic solid rgba(crimson, 0.8); - background-color: rgba(crimson, 0.1) !important; -} -.wip { - @extend %wip; - &::before, &::after { - content: ""; - display: block; - height: 48px; - } -} -.wip_txt { - @extend %wip; -} diff --git a/source/style/hippie/modules/editor/_extends.scss b/source/style/hippie/modules/editor/_extends.scss deleted file mode 100644 index e69de29..0000000 diff --git a/source/style/hippie/modules/editor/_mixins.scss b/source/style/hippie/modules/editor/_mixins.scss deleted file mode 100644 index e69de29..0000000 diff --git a/source/style/hippie/modules/explanation/_explanation_module.scss b/source/style/hippie/modules/explanation/_explanation_module.scss deleted file mode 100644 index f84204e..0000000 --- a/source/style/hippie/modules/explanation/_explanation_module.scss +++ /dev/null @@ -1,115 +0,0 @@ -// Explanation module styles -// ------------------------------------------------------------------------------ - -%expose_after { - &::after { - content: ""; - display: block; - height: 48px; - background-color: rgba($delta_color, 0.1) !important; - } -} -%expose_before { - &::before { - content: ""; - display: block; - height: 48px; - background-color: rgba($delta_color, 0.1) !important; - } -} -%expose { - &::before, &::after { - content: ""; - display: block; - height: 48px; - background-color: rgba($delta_color, 0.1) !important; - } -} -%exp { -} -%exp_hidden { - display: none; -} - -.exp_wrap { - position: relative; -} - -.exp_overlay { - @extend %full_parent; - background-color: transparentize($alpha_color, .6); -} - -.exp_pop { - @extend %exp_hidden !optional; - position: absolute; - z-index: 100; - top: $space_large; - left: $space_large; - padding: $space_half; - border: 4px solid $color_back_basic; - border-radius: 4px; - background-color: $color_back_basic; - pointer-events: none; -} -.exp_marker_pop { - position: absolute; - top: -$size_text_basic / 4 * 3; - right: -$size_text_basic / 2; - width: $size_text_basic; - height: $size_text_basic; - border: $space_tiny solid $color_highlight_basic; - border-radius: $size_text_basic; - color: $color_highlight_basic; - background-color: $color_darkest; -} - -.exp_expose { - @extend %expose !optional; -} -.exp_expose_pre { - @extend %expose_after; -} -.exp_expose_post { - @extend %expose_before; -} - -.exp_overlay_btn { - position: fixed; - width: 3em; - height: 2em; - // padding: $space_basic $space_basic * 2; - cursor: pointer; -} -.exp_help_btn { - display: table; - right: $space_double; - bottom: $space_double; - background-color: rgba($color_darkest, 0.4); - &:hover { - background-color: $color_brightest; - > .span_solo { - color: $color_darkest; - } - } - .span_solo { - display: table-cell; - color: rgba($color_brightest, 0.8); - font-family: $family_text_mono; - 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($delta_color, 0.1) !important; - @include vendor-prefix(transition, height 0.5s ease); -} diff --git a/source/style/hippie/modules/maintenance/_maintenance_module.scss b/source/style/hippie/modules/maintenance/_maintenance_module.scss deleted file mode 100644 index dedb0ab..0000000 --- a/source/style/hippie/modules/maintenance/_maintenance_module.scss +++ /dev/null @@ -1,19 +0,0 @@ -.body_status { - @extend .sec_main_status; - height: 100vh; - border-color: $foxtrot_color; - - .main_site { - @extend .wrap_center; - & > h1:first-of-type { - margin-top: 0; - margin-bottom: 0; - font-weight: bold; - line-height: 1; - } - & > h1 + h3 { - margin-top: 0; - margin-bottom: $space_small; - } - } -} diff --git a/source/style/hippie/modules/media/_media_module.scss b/source/style/hippie/modules/media/_media_module.scss deleted file mode 100644 index 371c4f6..0000000 --- a/source/style/hippie/modules/media/_media_module.scss +++ /dev/null @@ -1,4 +0,0 @@ -.nomedia { - @extend .box_placeholder; - height: inherit; -} diff --git a/source/style/hippie/modules/navigation/_nav_module.scss b/source/style/hippie/modules/navigation/_nav_module.scss deleted file mode 100644 index f840674..0000000 --- a/source/style/hippie/modules/navigation/_nav_module.scss +++ /dev/null @@ -1,171 +0,0 @@ -nav { - - ul { - padding-left: 0; - } - - li { - margin-bottom: $space_basic; - list-style: none; - } -} - -.nav_horizontal { - ul { - @extend .overflow; - - ul { - margin: $space_basic 0; - } - - li { - @extend .float_space_left; - margin-right: $space_basic; - margin-bottom: 0; - - &:last-child { - margin-right: 0; - } - } - } -} - -.nav_right { - float: right; - margin-left: $space_basic; - - .align_parent { - margin-right: $space_basic * -1; - } -} - -.nav_separate { - li { - position: relative; - padding-left: $space_tiny; - - &:not(:first-child) { - - &::before { - content: ""; - position: absolute; - width: $space_tiny; - height: 100%; - left: 0; - top: 0; - background-color: $color_border_basic; - } - } - } -} - -.nav_separate_right { - float: right; - li { - position: relative; - - &:first-child { - padding-left: $space_basic * 2 + $space_tiny; - - &::before { - content: ""; - position: absolute; - width: $space_tiny; - height: 100%; - left: 0; - top: 0; - background-color: $color_front_basic; - margin: 0 $space_basic; - } - } - } -} - -.nav_center_old { - @extend .nav_horizontal; - float: right; - position: relative; - left: -50%; - - ul { - position: relative; - left: 50%; - text-align: center; - } -} - -.nav_column { - position: relative; - margin: $space_basic 0; - - ul { - @extend .flex; - margin: 0 $space_large; - - li { - @extend .flex_child; - flex-grow: 1; - margin: 0; - text-align: center; - - a { - display: block; - } - } - } -} - -.nav_page_meta { - position: fixed; - // display: table; - // width: 3em; - right: $space_half; - bottom: $space_double; - - ul { - margin: $space_basic 0; - } - - li { - margin-bottom: 0; - line-height: 1; - } - button { - width: 32px; - margin-right: 0; - margin-left: 0; - } - .a_button_meta { - // display: table-cell; - display: inline-block; - - &:active, - &:focus { - background-color: transparent; - } - - &:hover { - background-color: $color_action_basic; - } - } - .sprite_img { - vertical-align: top; - } -} - -.header_page { - - nav { - @extend .nav_horizontal; - - a { - - &:active, - &:focus, - &:hover { - background-color: rgba($color_text_basic, 0.2); - color: $color_text_basic; - } - } - } -} diff --git a/source/style/hippie/modules/print/_extends.scss b/source/style/hippie/modules/print/_extends.scss deleted file mode 100644 index e69de29..0000000 diff --git a/source/style/hippie/modules/print/_mixins.scss b/source/style/hippie/modules/print/_mixins.scss deleted file mode 100644 index e69de29..0000000 diff --git a/source/style/hippie/modules/print/_print_module.scss b/source/style/hippie/modules/print/_print_module.scss deleted file mode 100644 index 64e5756..0000000 --- a/source/style/hippie/modules/print/_print_module.scss +++ /dev/null @@ -1,128 +0,0 @@ -// Custom extends and mixins -// ------------------------------------------------------------------------------ -@import "mixins"; -@import "extends"; - -// Print module styles -// ------------------------------------------------------------------------------ - -%paper { - background-color: $color_front_basic; -} - -$a4: ".dina4" 1.2cm 1.2cm 1.2cm 2.4cm; -$a5: ".dina5" 0 0 0 1.2cm; -$a6: ".dina6" 0 0 0 1.2cm; - -$din: $a4, $a5, $a6; - -.print_body { - font-size: $size_text_print; - margin: 10vh 20vw; - - @page { - size: A4; - margin: 1.2cm; - } - - @page:first { - size: A4; - margin: 0; - } - - @each $space in $din { - #{nth($space, 1)} { - padding-top: nth($space, 2); - padding-right: nth($space, 3); - padding-bottom: nth($space, 4); - padding-left: nth($space, 5); - - .page_head, .page_foot { - right: nth($space, 3); - left: nth($space, 5); - } - .page_head { - top: nth($space, 2); - } - .page_foot { - bottom: nth($space, 4); - } - } - } - - *[class^="din"] { - @extend %paper; - position: relative; - overflow: auto; - - p { - @extend %basic_print; - } - - .page_head, .page_foot { - position: absolute; - } - - .page_head { - page: cover; - } - - .page_foot { - display: flex; - flex-direction: row; - - *:last-child { - margin-bottom: 0; - } - - p { - flex: 1 0 auto; - margin: 0; - font-size: 8pt; - line-height: 10pt; - text-align: center; - } - - .page_no { - flex: 1 0 auto; - font-size: 20pt; - line-height: 1; - text-align: right; - } - p:first-child { - text-align: left; - } - } - .page_content { - margin-top: 10cm; - margin-bottom: 2cm; - } - margin: $space_small auto; - } - - .page_title, .page_date { - font-size: 14pt; - } - - .page_title { - margin: 0; - } - - .page_date, .page_no { - @extend %head_1; - float: right; - } - - .page_author { - position: absolute; - top: 5cm; - right: 0; - text-align: right; - } - - .page_recipient { - position: absolute; - top: 5cm; - left: 0; - } -} diff --git a/source/style/hippie/modules/tables/_tables_module.scss b/source/style/hippie/modules/tables/_tables_module.scss deleted file mode 100644 index 2c0fe95..0000000 --- a/source/style/hippie/modules/tables/_tables_module.scss +++ /dev/null @@ -1,68 +0,0 @@ -.table_link { - width: 100%; - border: 0; - table-layout: auto; - - tbody { - border-bottom: $border_basic; - - &:hover { - background-color: $color_bright; - } - } - - th, td { - border: 0; - } - - .cell_icon { - width: 48px; - text-align: center; - img { - vertical-align: text-top; - } - } - - .cell_link { - padding-right: $space_basic; - padding-left: $space_basic; - - &:hover { - background-color: $foxtrot_color; - a:first-child { - display: none; - } - a:last-child { - display: block; - color: $color_highlight_basic; - } - } - - a { - display: block; - } - - a:last-child { - display: none; - } - } - - th:last-child, .cell_date { - width: 16%; - text-align: center; - } - - .cell_text { - padding-right: $space_basic; - padding-left: $space_basic; - - div { - width: 100%; - } - - .shorten { - @extend %short; - max-height: 44px; - } - } -}