diff --git a/.gitignore b/.gitignore index 486b32c..10b2cad 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,10 @@ +# HIPPIE +################### +mixins/_sprite.scss + +# Sass +################### .sass-cache/ *.css.map +*.sass.map +*.scss.map 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..03a78fd --- /dev/null +++ b/README.md @@ -0,0 +1,53 @@ +# 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](https://nodejs.org/) environment you can install Sass with the Node package manager: + +```bash +npm install -g sass +``` + +### Installing + +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: + +```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://quelltext.interaktionsweise.de/interaktionsweise/hippie-style/tags). + +## Authors + +**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. 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..62d38a8 --- /dev/null +++ b/_basic.scss @@ -0,0 +1,50 @@ +// 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"; + + + +// 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..6a63ce1 --- /dev/null +++ b/_hippie.scss @@ -0,0 +1,32 @@ +/* + * # 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/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..68ede56 --- /dev/null +++ b/elements/_textlevel.scss @@ -0,0 +1,307 @@ +// 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_discreet { + color: $color_text_basic; +} + +.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..e674d86 --- /dev/null +++ b/global/_common.scss @@ -0,0 +1,311 @@ +// Common styles for global usage +// ----------------------------------------------------------------------------- +@use "sass:math"; + + + +// General classes +// ----------------------------------------------------------------------------- +%size_content { + box-sizing: content-box; +} + +%size_content_solo { + @extend %size_content; + + *, + ::before, + ::after { + box-sizing: $box_sizing; + } +} + +%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: math.div((100% - $width_basic), 2); + margin-left: math.div((100% - $width_basic), 2); + + @include forTabletPortraitUp { + margin-right: math.div((100% - $width_small), 2); + margin-left: math.div((100% - $width_small), 2); + } + @include forTabletLandscapeUp { + margin-right: math.div((100% - $width_medium), 2); + margin-left: math.div((100% - $width_medium), 2); + } + @include forBigDesktopUp { + margin-right: math.div((100% - $width_large), 2); + margin-left: math.div((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..71ff66d --- /dev/null +++ b/global/_config.scss @@ -0,0 +1,273 @@ +// Default configuration +// ------------------------------------------------------------------------------ +@use "sass:math"; + + + +// 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: math.div($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..e965c23 --- /dev/null +++ b/global/_typography.scss @@ -0,0 +1,59 @@ +// 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 { + 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..f4240f5 --- /dev/null +++ b/mixins/_all.scss @@ -0,0 +1,6 @@ +@import "media_query"; +@import "sprite"; +@import "flow"; +@import "color"; +@import "user_agent"; +@import "vendor"; 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..d0e1f6c --- /dev/null +++ b/mixins/_media_query.scss @@ -0,0 +1,42 @@ +@use "sass:math"; + +//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; } + // @media (min-width: (math.div($width, 16)+em)) { @content; } + @media (min-width: ($width)) { @content; } +} + +//Desktop-first Media Query +@mixin goingSmall($width) { + @media (max-width: ($width)) { @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/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}; +} + 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/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..fe4ed62 --- /dev/null +++ b/modules/explanation/_explanation_module.scss @@ -0,0 +1,114 @@ +@use "sass:math"; + +%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: math.div(-$size_text_basic, 4) * 3; + right: math.div(-$size_text_basic, 2); + width: $size_text_basic; + height: $size_text_basic; + border: $space_tiny solid $color_highlight_basic; + border-radius: $size_text_basic; + color: $color_highlight_basic; + background-color: $color_darkest; +} + +.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; + } + } +}