From b60dd80cd5674e28d12fa410d87f2663778bc643 Mon Sep 17 00:00:00 2001 From: Stephan Date: Tue, 12 Nov 2019 20:18:02 +0100 Subject: [PATCH 01/12] added current state from hippie main repo commit state 175816 source/style/hippie --- _abovethefold.scss | 23 ++ _basic.scss | 53 +++ _hippie.scss | 33 ++ elements/_embedded.scss | 64 ++++ elements/_grouping.scss | 330 +++++++++++++++++++ elements/_interactive.scss | 259 +++++++++++++++ elements/_sections.scss | 189 +++++++++++ elements/_tables.scss | 130 ++++++++ elements/_textlevel.scss | 303 +++++++++++++++++ functions/_all.scss | 3 + functions/_color.scss | 13 + functions/_shade.scss | 24 ++ functions/_tint.scss | 24 ++ global/_common.scss | 316 ++++++++++++++++++ global/_config.scss | 272 +++++++++++++++ global/_typography.scss | 60 ++++ mixins/_all.scss | 5 + mixins/_color.scss | 20 ++ mixins/_flow.scss | 25 ++ mixins/_media_query.scss | 38 +++ mixins/_sprite.scss | 123 +++++++ mixins/_user_agent.scss | 9 + modules/_vendor.scss | 23 ++ modules/breakpoint/_breakpoint_module.scss | 47 +++ modules/card/_card_module.scss | 76 +++++ modules/editor/_editor_module.scss | 23 ++ modules/editor/_extends.scss | 0 modules/editor/_mixins.scss | 0 modules/explanation/_explanation_module.scss | 115 +++++++ modules/maintenance/_maintenance_module.scss | 19 ++ modules/media/_media_module.scss | 4 + modules/navigation/_nav_module.scss | 171 ++++++++++ modules/print/_extends.scss | 0 modules/print/_mixins.scss | 0 modules/print/_print_module.scss | 128 +++++++ modules/tables/_tables_module.scss | 68 ++++ 36 files changed, 2990 insertions(+) create mode 100644 _abovethefold.scss create mode 100644 _basic.scss create mode 100644 _hippie.scss create mode 100644 elements/_embedded.scss create mode 100644 elements/_grouping.scss create mode 100644 elements/_interactive.scss create mode 100644 elements/_sections.scss create mode 100644 elements/_tables.scss create mode 100644 elements/_textlevel.scss create mode 100644 functions/_all.scss create mode 100644 functions/_color.scss create mode 100644 functions/_shade.scss create mode 100644 functions/_tint.scss create mode 100644 global/_common.scss create mode 100644 global/_config.scss create mode 100644 global/_typography.scss create mode 100644 mixins/_all.scss create mode 100644 mixins/_color.scss create mode 100644 mixins/_flow.scss create mode 100644 mixins/_media_query.scss create mode 100644 mixins/_sprite.scss create mode 100644 mixins/_user_agent.scss create mode 100644 modules/_vendor.scss create mode 100644 modules/breakpoint/_breakpoint_module.scss create mode 100644 modules/card/_card_module.scss create mode 100644 modules/editor/_editor_module.scss create mode 100644 modules/editor/_extends.scss create mode 100644 modules/editor/_mixins.scss create mode 100644 modules/explanation/_explanation_module.scss create mode 100644 modules/maintenance/_maintenance_module.scss create mode 100644 modules/media/_media_module.scss create mode 100644 modules/navigation/_nav_module.scss create mode 100644 modules/print/_extends.scss create mode 100644 modules/print/_mixins.scss create mode 100644 modules/print/_print_module.scss create mode 100644 modules/tables/_tables_module.scss diff --git a/_abovethefold.scss b/_abovethefold.scss new file mode 100644 index 0000000..f0f0136 --- /dev/null +++ b/_abovethefold.scss @@ -0,0 +1,23 @@ +/* + * # 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/_basic.scss b/_basic.scss new file mode 100644 index 0000000..789ec50 --- /dev/null +++ b/_basic.scss @@ -0,0 +1,53 @@ +// 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/_hippie.scss b/_hippie.scss new file mode 100644 index 0000000..ad96e38 --- /dev/null +++ b/_hippie.scss @@ -0,0 +1,33 @@ +/* + * # 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/elements/_embedded.scss b/elements/_embedded.scss new file mode 100644 index 0000000..4de399d --- /dev/null +++ b/elements/_embedded.scss @@ -0,0 +1,64 @@ +// 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/elements/_grouping.scss b/elements/_grouping.scss new file mode 100644 index 0000000..ba80867 --- /dev/null +++ b/elements/_grouping.scss @@ -0,0 +1,330 @@ +// 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/elements/_interactive.scss b/elements/_interactive.scss new file mode 100644 index 0000000..2739650 --- /dev/null +++ b/elements/_interactive.scss @@ -0,0 +1,259 @@ +// 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/elements/_sections.scss b/elements/_sections.scss new file mode 100644 index 0000000..268dbbb --- /dev/null +++ b/elements/_sections.scss @@ -0,0 +1,189 @@ +// 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/elements/_tables.scss b/elements/_tables.scss new file mode 100644 index 0000000..da04d62 --- /dev/null +++ b/elements/_tables.scss @@ -0,0 +1,130 @@ +// 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/elements/_textlevel.scss b/elements/_textlevel.scss new file mode 100644 index 0000000..6567f5c --- /dev/null +++ b/elements/_textlevel.scss @@ -0,0 +1,303 @@ +// 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/functions/_all.scss b/functions/_all.scss new file mode 100644 index 0000000..4acf406 --- /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..228ed81 --- /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..6607422 --- /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..7eee931 --- /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/global/_common.scss b/global/_common.scss new file mode 100644 index 0000000..05feec7 --- /dev/null +++ b/global/_common.scss @@ -0,0 +1,316 @@ +// 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/global/_config.scss b/global/_config.scss new file mode 100644 index 0000000..e8442c6 --- /dev/null +++ b/global/_config.scss @@ -0,0 +1,272 @@ +// 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/global/_typography.scss b/global/_typography.scss new file mode 100644 index 0000000..3a35b6e --- /dev/null +++ b/global/_typography.scss @@ -0,0 +1,60 @@ +// 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/mixins/_all.scss b/mixins/_all.scss new file mode 100644 index 0000000..b3bd5e8 --- /dev/null +++ b/mixins/_all.scss @@ -0,0 +1,5 @@ +@import "media_query"; +@import "sprite"; +@import "flow"; +@import "color"; +@import "user_agent"; diff --git a/mixins/_color.scss b/mixins/_color.scss new file mode 100644 index 0000000..0849dc9 --- /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/_flow.scss b/mixins/_flow.scss new file mode 100644 index 0000000..8f9d9e7 --- /dev/null +++ b/mixins/_flow.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/_media_query.scss b/mixins/_media_query.scss new file mode 100644 index 0000000..86a4e89 --- /dev/null +++ b/mixins/_media_query.scss @@ -0,0 +1,38 @@ +//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/mixins/_sprite.scss b/mixins/_sprite.scss new file mode 100644 index 0000000..6068269 --- /dev/null +++ b/mixins/_sprite.scss @@ -0,0 +1,123 @@ +// 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/mixins/_user_agent.scss b/mixins/_user_agent.scss new file mode 100644 index 0000000..bf21661 --- /dev/null +++ b/mixins/_user_agent.scss @@ -0,0 +1,9 @@ +@mixin overrideUserAgent() { + @if $no_agent_focus == true { + @each $el in $io_focus_list { + #{$el}:focus { + outline: 0; + } + } + } +} diff --git a/modules/_vendor.scss b/modules/_vendor.scss new file mode 100644 index 0000000..2a48b79 --- /dev/null +++ b/modules/_vendor.scss @@ -0,0 +1,23 @@ +/** + * @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/modules/breakpoint/_breakpoint_module.scss b/modules/breakpoint/_breakpoint_module.scss new file mode 100644 index 0000000..fd0174a --- /dev/null +++ b/modules/breakpoint/_breakpoint_module.scss @@ -0,0 +1,47 @@ +.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/modules/card/_card_module.scss b/modules/card/_card_module.scss new file mode 100644 index 0000000..2f40b1d --- /dev/null +++ b/modules/card/_card_module.scss @@ -0,0 +1,76 @@ +// 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/modules/editor/_editor_module.scss b/modules/editor/_editor_module.scss new file mode 100644 index 0000000..7aa9434 --- /dev/null +++ b/modules/editor/_editor_module.scss @@ -0,0 +1,23 @@ +// 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/modules/editor/_extends.scss b/modules/editor/_extends.scss new file mode 100644 index 0000000..e69de29 diff --git a/modules/editor/_mixins.scss b/modules/editor/_mixins.scss new file mode 100644 index 0000000..e69de29 diff --git a/modules/explanation/_explanation_module.scss b/modules/explanation/_explanation_module.scss new file mode 100644 index 0000000..f84204e --- /dev/null +++ b/modules/explanation/_explanation_module.scss @@ -0,0 +1,115 @@ +// 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/modules/maintenance/_maintenance_module.scss b/modules/maintenance/_maintenance_module.scss new file mode 100644 index 0000000..815648c --- /dev/null +++ b/modules/maintenance/_maintenance_module.scss @@ -0,0 +1,19 @@ +.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/modules/media/_media_module.scss b/modules/media/_media_module.scss new file mode 100644 index 0000000..f98886a --- /dev/null +++ b/modules/media/_media_module.scss @@ -0,0 +1,4 @@ +.nomedia { + @extend .box_placeholder; + height: inherit; +} diff --git a/modules/navigation/_nav_module.scss b/modules/navigation/_nav_module.scss new file mode 100644 index 0000000..608fd63 --- /dev/null +++ b/modules/navigation/_nav_module.scss @@ -0,0 +1,171 @@ +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/modules/print/_extends.scss b/modules/print/_extends.scss new file mode 100644 index 0000000..e69de29 diff --git a/modules/print/_mixins.scss b/modules/print/_mixins.scss new file mode 100644 index 0000000..e69de29 diff --git a/modules/print/_print_module.scss b/modules/print/_print_module.scss new file mode 100644 index 0000000..1e01a84 --- /dev/null +++ b/modules/print/_print_module.scss @@ -0,0 +1,128 @@ +// 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/modules/tables/_tables_module.scss b/modules/tables/_tables_module.scss new file mode 100644 index 0000000..de2523e --- /dev/null +++ b/modules/tables/_tables_module.scss @@ -0,0 +1,68 @@ +.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; + } + } +} From f081d9354507d07634ff45cf9faceefb6b8a78a3 Mon Sep 17 00:00:00 2001 From: Stephan Date: Sun, 5 Jan 2020 16:32:26 +0100 Subject: [PATCH 02/12] Added README and removed dependency * Removed import of normalize.css --- LICENSE => LICENSE.md | 2 +- README.md | 55 +++++++++++++++++++++++++++++++++++++++++++ _basic.scss | 2 +- 3 files changed, 57 insertions(+), 2 deletions(-) rename LICENSE => LICENSE.md (95%) create mode 100644 README.md diff --git a/LICENSE b/LICENSE.md similarity index 95% rename from LICENSE rename to LICENSE.md index 615e0d5..326dfd0 100644 --- a/LICENSE +++ b/LICENSE.md @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2019 Stephan +Copyright (c) 2016 till today Stephan Hagedorn Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md new file mode 100644 index 0000000..842b787 --- /dev/null +++ b/README.md @@ -0,0 +1,55 @@ +# HIPPIE styles + +Collection of CSS styles, mainly for the use with HIPPIE, written in SASS language. + +## Getting Started + +These instructions will get you a copy of the project up and running on your local machine. + +### Prerequisites + +All styles in this project are written in the [Sass](https://sass-lang.com/) language. So a preprocessor may be needed to form Cascading Style Sheets (CSS). + +Please choose a implementation suitable for your needs from the [Install Sass document](https://sass-lang.com/install). + +For example in a Node.js environment you can install Sass with the Node package manager: + +```bash +npm install -g sass +``` + +### Installing + +Clone the repository `https://github.com/sthag/hippie-styles.git` to a folder to get all source files. + +To include HIPPIE styles to a Sass workflow, just import the main file at the appropriate position. Usually this would be at the beginning of your stylesheet: + +```scss +@import "hippie/hippie"; +``` + +It is also possible to link to the resulting CSS file. First the file needs to be compiled: + +``` +sass hippie/_hippie.scss stylesheets/hippie.css +``` + +Now the stylesheet can be included into the HTML document: + +``` + +``` + +## Versioning + +This project uses [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/hippie-styles/tags). + +## Authors + +* **Stephan Hagedorn** - *Initial work* - [Interaktionsweise](https://interaktionsweise.de) + +See also the list of [contributors](https://github.com/your/project/contributors) who participated in this project. + +## License + +This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details diff --git a/_basic.scss b/_basic.scss index 789ec50..e18dfe8 100644 --- a/_basic.scss +++ b/_basic.scss @@ -1,7 +1,7 @@ // Reset // Use a file outside of hippie i.e. vendor/normalize.css // ----------------------------------------------------------------------------- -@import "../../vendor/normalizecss/normalize.css"; +// @import "../../vendor/normalizecss/normalize.css"; From f30d5d356784f975f65f512297d3a31d21265ed8 Mon Sep 17 00:00:00 2001 From: Stephan Hagedorn Date: Sat, 1 Feb 2020 13:52:04 +0100 Subject: [PATCH 03/12] moved vendor mixin --- _basic.scss | 7 ++----- mixins/_all.scss | 1 + modules/_vendor.scss | 23 ----------------------- 3 files changed, 3 insertions(+), 28 deletions(-) delete mode 100644 modules/_vendor.scss diff --git a/_basic.scss b/_basic.scss index e18dfe8..62d38a8 100644 --- a/_basic.scss +++ b/_basic.scss @@ -26,11 +26,6 @@ -// 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 // ----------------------------------------------------------------------------- @@ -45,6 +40,8 @@ @import "elements/tables"; @import "elements/interactive"; + + // Individual Modules and variables // in dependency to other styles // ----------------------------------------------------------------------------- diff --git a/mixins/_all.scss b/mixins/_all.scss index b3bd5e8..f4240f5 100644 --- a/mixins/_all.scss +++ b/mixins/_all.scss @@ -3,3 +3,4 @@ @import "flow"; @import "color"; @import "user_agent"; +@import "vendor"; diff --git a/modules/_vendor.scss b/modules/_vendor.scss deleted file mode 100644 index 2a48b79..0000000 --- a/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}; -} - From f8ffd90a8329d4153c223b17ede9339a022a561b Mon Sep 17 00:00:00 2001 From: Stephan Hagedorn Date: Sat, 1 Feb 2020 14:54:00 +0100 Subject: [PATCH 04/12] forgot new file --- mixins/_vendor.scss | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 mixins/_vendor.scss diff --git a/mixins/_vendor.scss b/mixins/_vendor.scss new file mode 100644 index 0000000..2a48b79 --- /dev/null +++ b/mixins/_vendor.scss @@ -0,0 +1,23 @@ +/** + * @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}; +} + From cb93384315c73cb926da7dc3838cb7226015180a Mon Sep 17 00:00:00 2001 From: Stephan Hagedorn Date: Fri, 8 May 2020 19:55:55 +0200 Subject: [PATCH 05/12] removed sass placeholder (i) change from parent project hippie --- global/_common.scss | 8 -------- modules/card/_card_module.scss | 3 ++- 2 files changed, 2 insertions(+), 9 deletions(-) diff --git a/global/_common.scss b/global/_common.scss index 05feec7..a38e29e 100644 --- a/global/_common.scss +++ b/global/_common.scss @@ -17,14 +17,6 @@ } } -%h_content_full { - height: 100%; - - body { - min-height: 100%; - } -} - %hidden { display: none; } diff --git a/modules/card/_card_module.scss b/modules/card/_card_module.scss index 2f40b1d..36b7424 100644 --- a/modules/card/_card_module.scss +++ b/modules/card/_card_module.scss @@ -2,9 +2,10 @@ // ------------------------------------------------------------------------------ .html_card { - @extend %h_content_full; + height: 100%; body { + min-height: 100%; .card_bkg { @extend %full_parent; From 50017657bacfe56d718cd906a858cfcd404362d9 Mon Sep 17 00:00:00 2001 From: Stephan Hagedorn Date: Sun, 24 May 2020 17:33:05 +0200 Subject: [PATCH 06/12] added sprite file to gitignore --- .gitignore | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/.gitignore b/.gitignore index 486b32c..a8df3d1 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,12 @@ +# hippie +################### +################### + +mixins/_sprite.scss + + + +# https://github.com/github/gitignore/blob/master/Sass.gitignore +################### .sass-cache/ *.css.map From ceb9d8c4a9fa00279b74ddded52254e7ad5d6ed8 Mon Sep 17 00:00:00 2001 From: Stephan Hagedorn Date: Sun, 14 Mar 2021 20:11:14 +0100 Subject: [PATCH 07/12] Remove color from headings --- global/_typography.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/global/_typography.scss b/global/_typography.scss index 3a35b6e..e965c23 100644 --- a/global/_typography.scss +++ b/global/_typography.scss @@ -20,7 +20,6 @@ } %head_all { - color: $color_head_basic; font-family: $family_head_basic; line-height: $line_head_basic; } From b27dc31455b1dff17bbb1df4239a83981bafe748 Mon Sep 17 00:00:00 2001 From: Stephan Hagedorn Date: Sun, 14 Mar 2021 20:30:58 +0100 Subject: [PATCH 08/12] Added link style --- elements/_textlevel.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/elements/_textlevel.scss b/elements/_textlevel.scss index 6567f5c..68ede56 100644 --- a/elements/_textlevel.scss +++ b/elements/_textlevel.scss @@ -56,6 +56,10 @@ a { color: $delta_color; } +.a_discreet { + color: $color_text_basic; +} + .a_line { border-bottom-width: $space_tiny; border-bottom-style: dotted; From 5e667371e6aafdfc8bbafb56d4891f9d1cb795d8 Mon Sep 17 00:00:00 2001 From: Stephan Hagedorn Date: Sun, 14 Mar 2021 21:44:05 +0100 Subject: [PATCH 09/12] Moved card module to hippie --- _hippie.scss | 1 - modules/card/_card_module.scss | 77 ---------------------------------- 2 files changed, 78 deletions(-) delete mode 100644 modules/card/_card_module.scss diff --git a/_hippie.scss b/_hippie.scss index ad96e38..6a63ce1 100644 --- a/_hippie.scss +++ b/_hippie.scss @@ -27,7 +27,6 @@ // 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/modules/card/_card_module.scss b/modules/card/_card_module.scss deleted file mode 100644 index 36b7424..0000000 --- a/modules/card/_card_module.scss +++ /dev/null @@ -1,77 +0,0 @@ -// Card module styles -// ------------------------------------------------------------------------------ - -.html_card { - height: 100%; - - body { - min-height: 100%; - - .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; - } - } - } -} From 0214054c81aaa29150d97efa0d03b6328c0258fb Mon Sep 17 00:00:00 2001 From: Stephan Hagedorn Date: Mon, 8 Aug 2022 21:45:53 +0200 Subject: [PATCH 10/12] Fixes to SASS - Changes to sass:math - Mediaqueries not working anymore --- global/_common.scss | 25 +++++++++++--------- global/_config.scss | 3 ++- mixins/_media_query.scss | 8 +++++-- modules/explanation/_explanation_module.scss | 11 ++++----- 4 files changed, 27 insertions(+), 20 deletions(-) diff --git a/global/_common.scss b/global/_common.scss index a38e29e..e674d86 100644 --- a/global/_common.scss +++ b/global/_common.scss @@ -1,8 +1,11 @@ +// Common styles for global usage +// ----------------------------------------------------------------------------- +@use "sass:math"; + + + // General classes // ----------------------------------------------------------------------------- - - - %size_content { box-sizing: content-box; } @@ -94,20 +97,20 @@ .wrap_center { & > * { - margin-right: (100% - $width_basic) / 2; - margin-left: (100% - $width_basic) / 2; + margin-right: math.div((100% - $width_basic), 2); + margin-left: math.div((100% - $width_basic), 2); @include forTabletPortraitUp { - margin-right: (100% - $width_small) / 2; - margin-left: (100% - $width_small) / 2; + margin-right: math.div((100% - $width_small), 2); + margin-left: math.div((100% - $width_small), 2); } @include forTabletLandscapeUp { - margin-right: (100% - $width_medium) / 2; - margin-left: (100% - $width_medium) / 2; + margin-right: math.div((100% - $width_medium), 2); + margin-left: math.div((100% - $width_medium), 2); } @include forBigDesktopUp { - margin-right: (100% - $width_large) / 2; - margin-left: (100% - $width_large) / 2; + margin-right: math.div((100% - $width_large), 2); + margin-left: math.div((100% - $width_large), 2); } } } diff --git a/global/_config.scss b/global/_config.scss index e8442c6..71ff66d 100644 --- a/global/_config.scss +++ b/global/_config.scss @@ -1,5 +1,6 @@ // Default configuration // ------------------------------------------------------------------------------ +@use "sass:math"; @@ -131,7 +132,7 @@ $width_aside_basic: 20% !default; $space_tiny: 1px !default; $space_basic: $space_tiny * 8 !default; -$space_half: $space_basic / 2; +$space_half: math.div($space_basic, 2); $space_double: $space_basic * 2; $space_small: $space_basic * 4; $space_medium: $space_basic * 8; diff --git a/mixins/_media_query.scss b/mixins/_media_query.scss index 86a4e89..3b8a7b1 100644 --- a/mixins/_media_query.scss +++ b/mixins/_media_query.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + //Sections for Media Queries @mixin forPhoneUp { @media (min-width: #{$screen_tiny - 1}) { @content; } //599px @@ -29,10 +31,12 @@ //Mobile-first Media Query @mixin goingLarge($width) { - @media (min-width: $width/16+em) { @content; } + // @media (min-width: $width/16+em) { @content; } + // @media (min-width: (math.div($width, 16)+em)) { @content; } + @media (min-width: (math.div($width, 16))) { @content; } } //Desktop-first Media Query @mixin goingSmall($width) { - @media (max-width: $width/16+em) { @content; } + @media (max-width: (math.div($width, 16)+em)) { @content; } } diff --git a/modules/explanation/_explanation_module.scss b/modules/explanation/_explanation_module.scss index f84204e..fe4ed62 100644 --- a/modules/explanation/_explanation_module.scss +++ b/modules/explanation/_explanation_module.scss @@ -1,5 +1,4 @@ -// Explanation module styles -// ------------------------------------------------------------------------------ +@use "sass:math"; %expose_after { &::after { @@ -25,8 +24,8 @@ background-color: rgba($delta_color, 0.1) !important; } } -%exp { -} +// %exp { +// } %exp_hidden { display: none; } @@ -54,8 +53,8 @@ } .exp_marker_pop { position: absolute; - top: -$size_text_basic / 4 * 3; - right: -$size_text_basic / 2; + top: math.div(-$size_text_basic, 4) * 3; + right: math.div(-$size_text_basic, 2); width: $size_text_basic; height: $size_text_basic; border: $space_tiny solid $color_highlight_basic; From bf818600f866abb2e1541aa70acc03ca2ebcd148 Mon Sep 17 00:00:00 2001 From: Stephan Hagedorn Date: Thu, 11 Aug 2022 21:40:10 +0200 Subject: [PATCH 11/12] Simplified media queries - Switched to pixel based values again to fix error - Future version should use em values again --- mixins/_media_query.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/mixins/_media_query.scss b/mixins/_media_query.scss index 3b8a7b1..d0e1f6c 100644 --- a/mixins/_media_query.scss +++ b/mixins/_media_query.scss @@ -33,10 +33,10 @@ @mixin goingLarge($width) { // @media (min-width: $width/16+em) { @content; } // @media (min-width: (math.div($width, 16)+em)) { @content; } - @media (min-width: (math.div($width, 16))) { @content; } + @media (min-width: ($width)) { @content; } } //Desktop-first Media Query @mixin goingSmall($width) { - @media (max-width: (math.div($width, 16)+em)) { @content; } + @media (max-width: ($width)) { @content; } } From 84ddbceb9a130943c3833b3d937bd7beac2e71d3 Mon Sep 17 00:00:00 2001 From: sthag Date: Tue, 17 Oct 2023 19:10:46 +0200 Subject: [PATCH 12/12] Migration to new home - Updated project links in README - Update to text in README - Small additions to .gitignore for Sass --- .gitignore | 10 ++++------ README.md | 12 +++++------- 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/.gitignore b/.gitignore index a8df3d1..10b2cad 100644 --- a/.gitignore +++ b/.gitignore @@ -1,12 +1,10 @@ -# hippie +# HIPPIE ################### -################### - mixins/_sprite.scss - - -# https://github.com/github/gitignore/blob/master/Sass.gitignore +# Sass ################### .sass-cache/ *.css.map +*.sass.map +*.scss.map diff --git a/README.md b/README.md index 842b787..03a78fd 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ All styles in this project are written in the [Sass](https://sass-lang.com/) lan Please choose a implementation suitable for your needs from the [Install Sass document](https://sass-lang.com/install). -For example in a Node.js environment you can install Sass with the Node package manager: +For example in a [Node.js](https://nodejs.org/) environment you can install Sass with the Node package manager: ```bash npm install -g sass @@ -20,7 +20,7 @@ npm install -g sass ### Installing -Clone the repository `https://github.com/sthag/hippie-styles.git` to a folder to get all source files. +Clone the repository `https://quelltext.interaktionsweise.de/interaktionsweise/hippie-style.git` to a folder to get all source files. To include HIPPIE styles to a Sass workflow, just import the main file at the appropriate position. Usually this would be at the beginning of your stylesheet: @@ -42,14 +42,12 @@ Now the stylesheet can be included into the HTML document: ## Versioning -This project uses [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/hippie-styles/tags). +This project uses [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://quelltext.interaktionsweise.de/interaktionsweise/hippie-style/tags). ## Authors -* **Stephan Hagedorn** - *Initial work* - [Interaktionsweise](https://interaktionsweise.de) - -See also the list of [contributors](https://github.com/your/project/contributors) who participated in this project. +**Stephan Hagedorn** - *Initial work* - [Interaktionsweise](https://interaktionsweise.de) ## License -This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details +This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.