diff --git a/.gitignore b/.gitignore index 10b2cad..486b32c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,10 +1,2 @@ -# HIPPIE -################### -mixins/_sprite.scss - -# Sass -################### .sass-cache/ *.css.map -*.sass.map -*.scss.map diff --git a/LICENSE.md b/LICENSE similarity index 95% rename from LICENSE.md rename to LICENSE index 326dfd0..615e0d5 100644 --- a/LICENSE.md +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2016 till today Stephan Hagedorn +Copyright (c) 2019 Stephan 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 deleted file mode 100644 index 03a78fd..0000000 --- a/README.md +++ /dev/null @@ -1,53 +0,0 @@ -# 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 deleted file mode 100644 index f0f0136..0000000 --- a/_abovethefold.scss +++ /dev/null @@ -1,23 +0,0 @@ -/* - * # TABLE OF CONTENTS - * - * - Reset - * - Priority CSS Rules - * - */ - - -// Reset -// Use a file outside of hippie i.e. vendor/normalize.css -// ----------------------------------------------------------------------------- -// @import "vendor/normalize.css"; - - - -/* - * # NOTE - * - * CSS rules for content which is presented immediately - * to the screen and needs priority loading - * - */ diff --git a/_basic.scss b/_basic.scss deleted file mode 100644 index 62d38a8..0000000 --- a/_basic.scss +++ /dev/null @@ -1,50 +0,0 @@ -// Reset -// Use a file outside of hippie i.e. vendor/normalize.css -// ----------------------------------------------------------------------------- -// @import "../../vendor/normalizecss/normalize.css"; - - - -// Functions and Mixins -// Important code constructions -// ----------------------------------------------------------------------------- -@import "functions/all"; -@import "mixins/all"; - - - -// Fonts -// Use a central file outside of hippie for font definitions with @font-face -// ----------------------------------------------------------------------------- -// @import "../../vendor/fonts.css"; - - - -// Global configuration with default values -// ----------------------------------------------------------------------------- -@import "global/config"; - - - -// 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 deleted file mode 100644 index 6a63ce1..0000000 --- a/_hippie.scss +++ /dev/null @@ -1,32 +0,0 @@ -/* - * # TABLE OF CONTENTS - * - * - Reset - * - Global functions and mixins - * - Configuration - * - Special modules - * - Basic styles - * - Common - * - Typography - * - * - Sections - * - Grouping - * - Textlevel - * - Embedded - * - Tables - * - Interactive - * - Modules - - Breakpoint - - Tables - - Maintenance -* - */ -@import "basic"; - -// Additional Modules and variables -// in dependency to other basic styles -// ----------------------------------------------------------------------------- -@import "modules/navigation/nav_module"; -@import "modules/editor/editor_module"; -@import "modules/explanation/explanation_module"; -@import "modules/print/print_module"; diff --git a/elements/_embedded.scss b/elements/_embedded.scss deleted file mode 100644 index 4de399d..0000000 --- a/elements/_embedded.scss +++ /dev/null @@ -1,64 +0,0 @@ -// Embedded content -// ----------------------------------------------------------------------------- -// picture -// source -// img -// iframe -// embed -// object -// param -// video -// audio -// track -// map -// area - - - -picture { - -} - -source { - -} - -img { - vertical-align: top; -} - -iframe { - -} - -embed { - -} - -object { - -} - -param { - -} - -video { - -} - -audio { - -} - -track { - -} - -map { - -} - -area { - -} diff --git a/elements/_grouping.scss b/elements/_grouping.scss deleted file mode 100644 index ba80867..0000000 --- a/elements/_grouping.scss +++ /dev/null @@ -1,330 +0,0 @@ -// Grouping content -// ----------------------------------------------------------------------------- -// p -// address -// hr -// pre -// blockquote -// ol -// ul -// li -// dl -// dt -// dd -// figure -// figcaption -// main -// div - - - -// Paragraph -// ----------------------------------------------------------------------------- -p { - @extend %basic; - margin-top: $space_basic; - margin-bottom: $space_basic; - code { - padding: $space_tiny $space_half; - font-size: 1em; - line-height: 1; - } -} - -.column_line { - column-rule: $border_basic; -} -.column_2, .column_3 { - @extend p; -} -.column_2 { - column-count: 2; - column-gap: $space_small; -} -.column_3 { - column-count: 3; - column-gap: $space_medium; -} - -// Address -// ----------------------------------------------------------------------------- -address { - // @extend %basic; - margin-top: $space_double; - margin-bottom: $space_double; -} - -// Line -// ----------------------------------------------------------------------------- -hr { - margin-top: $space_small; - margin-bottom: $space_small; - border-width: $width_border_basic 0 0; - border-style: solid; - border-color: $color_border_basic; -} - -.hr_hidden { - @extend hr; - border-color: transparent; -} - -.hr_dotted { - @extend hr; - border-style: dotted; -} - -// Preformat -// ----------------------------------------------------------------------------- -pre { - @extend %basic_mono; - white-space: pre-wrap; -} - -.pre_code { - overflow-x: auto; - border-color: darken($color_back_basic, $color_diff_tiny); - border-style: dotted; - border-width: 0 0 0 $width_border_4; - border-radius: $radius_basic; - padding: $space_basic; - background-color: lighten($color_back_basic, $color_diff_tiny); - code { - background-color: transparent; - } -} - -// Quote -// ----------------------------------------------------------------------------- -blockquote { - margin: $space_basic 0; - padding-right: $indent_basic; - padding-left: $indent_basic; -} - -.quote_mark { - p::before { - content: "\201E \0020"; - } - p::after { - content: "\0020 \201C"; - } - .quote_source { - &::before, &::after { - content: ""; - } - } -} - -// List -// ----------------------------------------------------------------------------- -dl, ul, ol { - margin: $space_double 0; -} - -ul, ol { - padding-left: $indent_basic; -} - -dl { - margin-left: $indent_basic; -} - -li, dt, dd { - @extend %basic; -} - -dd, .list_basic li { - margin-bottom: $space_basic; -} - -dd { - margin-left: $indent_basic; -} - -ul { - li { - list-style: square; - } -} - -.list_dash { - li { - list-style: none; - position: relative; - - &::before { - content: "_"; - position: absolute; - left: -1em; - } - } -} - -.list_link { - li { - margin-bottom: $space_tiny * 2; - text-transform: uppercase; - a { - display: block; - padding: $padding_basic; - color: $color_text_basic; - img { - margin-right: $space_basic; - padding-bottom: 0.2em; - vertical-align: text-bottom; - } - &:active, - &:focus, - &:hover { - background-color: $color_action_basic; - color: $color_highlight_basic; - } - } - } -} - -.list_horizontal { - overflow: auto; - li { - @extend .float_space_left; - } -} - -// Embedded -// ----------------------------------------------------------------------------- -figure { - margin: $space_double $indent_basic; -} - -figcaption { - @extend %basic; - color: $color_darker; -} - -// Main content -// ----------------------------------------------------------------------------- -main { - -} - -// Div -// ----------------------------------------------------------------------------- -div { - -} - -.div_info { - padding: $space_double $indent_basic; - border-right: $space_basic solid rgba($echo_color, 0.6); - background-color: rgba($echo_color, 0.1) !important; -} - -.box_space { - position: relative; - width: 100%; -} - -.box_cube { - float: left; - display: table; - width: $space_medium; - text-align: center; - vertical-align: middle; - - span { - display: table-cell; - } -} - -.box_placeholder { - width: 100%; - height: $space_medium; - border: $width_border_4 solid transparentize($alpha_color, 0.1); - border-radius: $radius_basic; - background-color: transparentize($alpha_color, 0.2); -} - -.box_placeholder_bkg { - width: 100%; - height: $space_medium * 2; - border: $width_border_4 solid transparentize($color_front_basic, 0.1); - border-radius: $radius_basic; - padding: $space_basic; - /*data:[][;charset=][;base64],*/ - background: url("data:image/svg+xml;utf8,") no-repeat; - background-color: transparentize($color_front_basic, 0.1); -} - -.box_file_tile { - @extend .float_space_left; -} - -// Flex -.flex { - display: flex; -} - -.flex_wrap { - @extend .flex; - flex-wrap: wrap; -} - -.flex_row { - @extend .flex; - flex-direction: column; - // align-items: flex-start; - justify-content: flex-start; -} - -.flex_child { - flex: 0 1 auto; -} - -.flex_child_one { - flex: 1; -} - -.flex_child_end { - align-self: flex-end; -} - -.flex_column_wrap { - @extend .flex_wrap; - - .flex_column { - @extend .flex_child; - flex-grow: 1; - } -} - -// Grid -.grid { - display: grid; - grid-gap: $space_basic; - - & > input, - & > select, - & > textarea { - margin: 0; - } - - & > label { - margin: $width_border_io; - padding: $space_half; - } -} - -.grid_column_2 { - grid-template-columns: max-content max-content; - -} - -.grid_column_4 { - grid-template-columns: max-content max-content max-content max-content; -} - -// Sprites -.sprite_img { - display: inline-block; -} diff --git a/elements/_interactive.scss b/elements/_interactive.scss deleted file mode 100644 index 2739650..0000000 --- a/elements/_interactive.scss +++ /dev/null @@ -1,259 +0,0 @@ -// Forms -// ----------------------------------------------------------------------------- -// form -// label -// input -// button -// select -// datalist -// optgroup -// option -// textarea -// output -// progress -// meter -// fieldset -// legend - - - -// Form -// ----------------------------------------------------------------------------- -form { - -} - -// Label -// ----------------------------------------------------------------------------- -label { - @extend %basic; - - input, button, textarea, select { - margin-left: $space_basic; - } -} - -input + label { - margin-left: $space_basic; -} - -.label { - line-height: 2.5; -} - -.label > input, -.label > textarea, -.label > select { - margin: 0 $space_basic; -} - -// Input -// ----------------------------------------------------------------------------- -input { -} - -label + input { - margin-left: $space_basic; -} - -input, button, textarea, select { - margin: $margin_io; - - &[disabled="disabled"], - &[disabled] { - cursor: not-allowed; - } -} - -td > input, -td > button, -td > select, -td > textarea { - margin: 0; -} - -@each $input in $io_input_list, textarea, select { - #{$input} { - @extend %basic_mono; - line-height: 1; - } -} - -.io_input, .io_textarea, .io_select { - padding: $space_half; - color: $color_text_io; - background-color: $color_back_io; - - &:hover { - background-color: $color_highlight_basic; - } - - &[readonly="readonly"], - &[readonly] { - background-color: darken($color_back_io, $color_diff_double); - } - - &[disabled="disabled"], - &[disabled] { - &:hover { - background-color: $color_back_io; - } - } -} - -@each $input in $io_date_list { - #{$input} { - padding-top: 0; - padding-bottom: 0; - } -} - -@each $input in $io_input_list, textarea { - #{$input} { - // border: $border_io; - } -} - -.io_input, .io_textarea { - border: $border_io; - - &[readonly="readonly"], - &[readonly] { - border-color: darken($color_border_io, $color_diff_double); - } - - &[disabled="disabled"], - &[disabled] { - border-color: transparent; - } -} - -// Fieldset -// ----------------------------------------------------------------------------- -fieldset { - margin: $margin_double; - padding: $space_basic; - border: $border_basic; -} - -// Legend -// ----------------------------------------------------------------------------- -legend { - @extend %basic; - padding: 0 $space_half; -} - -// Button -// ----------------------------------------------------------------------------- -button { - -} - -.io_button { - @extend %basic_button; - border: $width_border_io solid $color_border_button; - padding: $padding_basic; - color: $color_text_button; - background-color: $color_back_button; - - &:hover { - // border-color: #0059F6; - border-color: transparent; - color: white; - background-color: $foxtrot_color; - } - - &[disabled="disabled"], - &[disabled] { - border-color: transparent; - color: lighten($color_text_button, $color_diff_double); - - &:hover { - background-color: $color_back_button; - } - } -} - -// Selection -// ----------------------------------------------------------------------------- -select { - border: none; -} - -// Datalist -// ----------------------------------------------------------------------------- -datalist { - -} - -// Options -// ----------------------------------------------------------------------------- -optgroup { - -} - -option { - -} - -// Textarea -// ----------------------------------------------------------------------------- -textarea { -} - -.io_textarea { - line-height: 1.2; -} - -// Output -// ----------------------------------------------------------------------------- -output { - -} - -// Progress -// ----------------------------------------------------------------------------- -progress { - -} - -meter { - -} - - - -// Interactive elements -// ----------------------------------------------------------------------------- -// details -// summary -// dialog - - - -details { - -} - -summary { - -} - -dialog { - -} - - - -// Scripting -// ----------------------------------------------------------------------------- -// script -// noscript -// template -// canvas - - - -canvas { - -} diff --git a/elements/_sections.scss b/elements/_sections.scss deleted file mode 100644 index 268dbbb..0000000 --- a/elements/_sections.scss +++ /dev/null @@ -1,189 +0,0 @@ -// Root -// ----------------------------------------------------------------------------- -html { - // height: 100%; -} - - - -// Sections -// ----------------------------------------------------------------------------- -// body -// article -// section -// nav -// aside -// h1-h6 -// header -// footer - - - -// Body -// ----------------------------------------------------------------------------- -body { - position: relative; - box-sizing: $box_sizing; - margin: 0; - font-family: $family_text_basic; - font-size: $size_text_basic; - line-height: $line_basic; - line-height: $line_text_basic; - color: $color_text_basic; - background-color: $color_back_basic; - - *, - ::before, - ::after { - box-sizing: inherit; - } - - &:hover { - - .mouse_over { - background-color: transparent !important; - transition: background-color $duration_double $timing_basic 0s !important; - } - } -} - -// Article -// ----------------------------------------------------------------------------- -article { - -} - -// Section -// ----------------------------------------------------------------------------- -section { - -} - -.sec_main_center { - width: $width_basic; - margin: 0 auto; - padding-top: $space_small; - - @include forTabletPortraitUp { - width: $width_small; - } - @include forTabletLandscapeUp { - width: $width_medium; - } - @include forBigDesktopUp { - width: $width_large; - } -} - -.sec_main_status { - border-top-width: $width_border_8; - border-top-style: solid; - border-color: $color_border_basic; - padding-top: $space_small; -} - -// Navigation -// ----------------------------------------------------------------------------- -nav { - -} - -// Aside element -// ----------------------------------------------------------------------------- -aside { - width: $width_aside_basic; - - &.right + .bside { - margin-right: calc(#{$width_aside_basic} + #{$space_basic}); - } - - &.left + .bside { - margin-left: calc(#{$width_aside_basic} + #{$space_basic}); - } - - &.right { - float: right; - } - - &.left { - float: left; - } - - *:first-child { - margin-top: 0; - } -} - -// Headings -// ----------------------------------------------------------------------------- -h1, h2, h3, h4, h5, h6 { - @extend %head_all; -} - -h1 { - @extend %head_1; - margin: $space_large 0 $space_small; -} - -h1 + h1 { - margin-top: 0; -} - -h2 { - @extend %head_2; - margin: $space_medium 0 $space_small; -} - -h2 + h2 { - margin-top: 0; -} - -h3 { - @extend %head_3; - margin: $space_double 0; - text-transform: uppercase; -} - -h4 { - @extend %head_3; - margin: $space_double 0; - text-transform: none; -} - -h5 { - @extend %head_4; - margin: $space_double 0 $space_basic; - text-transform: none; -} - -h6 { - @extend %basic; - margin: $space_basic 0; - text-transform: none; - font-weight: bold; -} - -// Header -// ----------------------------------------------------------------------------- -header { - -} - -.header_page { - overflow: auto; -} - -.header_txt { - margin-bottom: $space_small; - border-bottom: $border_dotted; - - h1 { - border-top: $border_basic; - } -} - -// Footer -// ----------------------------------------------------------------------------- -footer { - -} diff --git a/elements/_tables.scss b/elements/_tables.scss deleted file mode 100644 index da04d62..0000000 --- a/elements/_tables.scss +++ /dev/null @@ -1,130 +0,0 @@ -// Tabular data -// ----------------------------------------------------------------------------- -// table -// caption -// colgroup -// col -// tbody -// thead -// tfoot -// tr -// td -// th - - - -// Table -// ----------------------------------------------------------------------------- -table { - margin: $margin_double; - border: $border_basic; - border-collapse: collapse; -} - -.table_blank { - border: $width_border_basic solid transparent; - - th, td { - border: $width_border_basic solid transparent; - } -} - -.table_free { - border: $width_border_basic solid transparent; -} - -.table_stripe { - td { - border-top: 0; - border-bottom: 0; - } - - tr:nth-child(even) td { - background-color: lighten($color_back_basic, $color_diff_tiny); - } -} - -.table_fix { - table-layout: fixed; -} - -.table_file_simple { - @extend .width_full; -} - -// Caption -// ----------------------------------------------------------------------------- -caption { - @extend p; - padding: $space_half 0; - border: $border_dotted; - text-align: center; -} - -// Columns -// ----------------------------------------------------------------------------- -colgroup { - -} - -col { - -} - -// Table body -// ----------------------------------------------------------------------------- -tbody { - -} - -// Table head -// ----------------------------------------------------------------------------- -thead { - -} - -// Table foot -// ----------------------------------------------------------------------------- -tfoot { - - tr:first-child td { - border-top: $border_basic; - } -} - -// Row -// ----------------------------------------------------------------------------- -tr { - -} - -// Cells -// ----------------------------------------------------------------------------- -th, td { - @extend %basic; - padding: $space_half; -} - -th { - border: $border_basic; - text-align: left; -} - -td { - border-right: $border_basic; - border-bottom: $border_basic; -} - -td:last-child { - border-right: 0; - - td { - border-bottom: 0; - } -} - -.cell_pre { - // border-right-width: $width_border_4; - // border-right-color: lighten($color_back_basic, $color_diff_basic); - background-color: lighten($color_back_basic, $color_diff_tiny); -} diff --git a/elements/_textlevel.scss b/elements/_textlevel.scss deleted file mode 100644 index 68ede56..0000000 --- a/elements/_textlevel.scss +++ /dev/null @@ -1,307 +0,0 @@ -// Text-Level semantics -// ----------------------------------------------------------------------------- -// a -// em -// strong -// small -// s -// cite -// q -// dfn -// abbr -// ruby -// rb -// rt -// rtc -// rp -// data -// time -// code -// var -// samp -// kbd -// sub -// sup -// i -// b -// u -// mark -// bdi -// bdo -// span -// br -// wbr - - - -// Links -// ----------------------------------------------------------------------------- -a { - color: $color_link_basic; - // color: lighten($color_action_basic, 20%); - text-decoration: none; - - &:active, - &:focus, - &:hover { - color: $color_highlight_basic; - } -} - -.a_internal { - color: $charlie_color; -} - -.a_external { - color: $delta_color; -} - -.a_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 deleted file mode 100644 index 4acf406..0000000 --- a/functions/_all.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "color"; -@import "shade"; -@import "tint"; diff --git a/functions/_color.scss b/functions/_color.scss deleted file mode 100644 index 228ed81..0000000 --- a/functions/_color.scss +++ /dev/null @@ -1,13 +0,0 @@ -@function createColorMap($color, $percentage, $opacity) { - $map: ( - base: $color, - light: lighten($color, $percentage), - dark: darken($color, $percentage), - trans: transparentize($color, $opacity) - ); - @return $map; -} - -@function basic_color($key: 'alpha') { - @return map-get($color_palette, $key); -} diff --git a/functions/_shade.scss b/functions/_shade.scss deleted file mode 100644 index 6607422..0000000 --- a/functions/_shade.scss +++ /dev/null @@ -1,24 +0,0 @@ -@charset "UTF-8"; - -// Mixes a color with black. -// -// @param {Color} $color -// -// @param {Number (Percentage)} $percent -// The amount of black to be mixed in. -// -// @example scss - Usage -// .element { -// background-color: shade(#0c85ff, 60%); -// } -// -// @example css - CSS Output -// .element { -// background-color: #074f99; -// } -// -// @return {Color} - -@function shade($color, $percent) { - @return mix(#000, $color, $percent); -} diff --git a/functions/_tint.scss b/functions/_tint.scss deleted file mode 100644 index 7eee931..0000000 --- a/functions/_tint.scss +++ /dev/null @@ -1,24 +0,0 @@ -@charset "UTF-8"; - -// Mixes a color with white. -// -// @param {Color} $color -// -// @param {Number (Percentage)} $percent -// The amount of white to be mixed in. -// -// @example scss - Usage -// .element { -// background-color: tint(#0c85ff, 40%); -// } -// -// @example css - CSS Output -// .element { -// background-color: #9dceff; -// } -// -// @return {Color} - -@function tint($color, $percent) { - @return mix(#fff, $color, $percent); -} diff --git a/global/_common.scss b/global/_common.scss deleted file mode 100644 index e674d86..0000000 --- a/global/_common.scss +++ /dev/null @@ -1,311 +0,0 @@ -// 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 deleted file mode 100644 index 71ff66d..0000000 --- a/global/_config.scss +++ /dev/null @@ -1,273 +0,0 @@ -// 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 deleted file mode 100644 index e965c23..0000000 --- a/global/_typography.scss +++ /dev/null @@ -1,59 +0,0 @@ -// Basic styles -// ----------------------------------------------------------------------------- - -%basic { - font-family: $family_text_basic; - font-size: $size_text_1; - line-height: $line_text_basic; -} - -%basic_mono { - font-family: $family_text_mono; - font-size: $size_text_1; - line-height: $line_text_mono; -} - -%basic_print { - font-family: $family_text_print; - font-size: $size_text_1; - line-height: $line_text_basic; -} - -%head_all { - 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 deleted file mode 100644 index f4240f5..0000000 --- a/mixins/_all.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import "media_query"; -@import "sprite"; -@import "flow"; -@import "color"; -@import "user_agent"; -@import "vendor"; diff --git a/mixins/_color.scss b/mixins/_color.scss deleted file mode 100644 index 0849dc9..0000000 --- a/mixins/_color.scss +++ /dev/null @@ -1,20 +0,0 @@ -@mixin addDefaultColors() { - @if map-has-key($color_palette, alpha) { - $alpha_color: map-get($color_palette, alpha) !global; - } - @if map-has-key($color_palette, bravo) { - $bravo_color: map-get($color_palette, bravo) !global; - } - @if map-has-key($color_palette, charlie) { - $charlie_color: map-get($color_palette, charlie) !global; - } - @if map-has-key($color_palette, delta) { - $delta_color: map-get($color_palette, delta) !global; - } - @if map-has-key($color_palette, echo) { - $echo_color: map-get($color_palette, echo) !global; - } - @if map-has-key($color_palette, foxtrot) { - $foxtrot_color: map-get($color_palette, foxtrot) !global; - } -} diff --git a/mixins/_flow.scss b/mixins/_flow.scss deleted file mode 100644 index 8f9d9e7..0000000 --- a/mixins/_flow.scss +++ /dev/null @@ -1,25 +0,0 @@ -@charset "UTF-8"; - -// Provides an easy way to include a clearflow for containing floats. -// -// @link http://cssmojo.com/latest_new_clearfix_so_far/ -// -// @example scss - Usage -// .element { -// @include clearFlow; -// } -// -// @example css - CSS Output -// .element::after { -// content: ""; -// clear: both; -// display: table; -// } - -@mixin clearFlow { - &::after { - content: ""; - clear: both; - display: table; - } -} diff --git a/mixins/_media_query.scss b/mixins/_media_query.scss deleted file mode 100644 index d0e1f6c..0000000 --- a/mixins/_media_query.scss +++ /dev/null @@ -1,42 +0,0 @@ -@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 deleted file mode 100644 index 6068269..0000000 --- a/mixins/_sprite.scss +++ /dev/null @@ -1,123 +0,0 @@ -// SCSS variables are information about icon's compiled state, stored under its original file name -// -// .icon-home { -// width: $icon-home-width; -// } -// -// The large array-like variables contain all information about a single icon -// $icon-home: x y offset_x offset_y width height total_width total_height image_path; -// -// At the bottom of this section, we provide information about the spritesheet itself -// $spritesheet: width height image $spritesheet-sprites; -$down-name: 'down'; -$down-x: 64px; -$down-y: 0px; -$down-offset-x: -64px; -$down-offset-y: 0px; -$down-width: 32px; -$down-height: 32px; -$down-total-width: 96px; -$down-total-height: 64px; -$down-image: '../art/sprite.png'; -$down: (64px, 0px, -64px, 0px, 32px, 32px, 96px, 64px, '../art/sprite.png', 'down', ); -$meta-name: 'meta'; -$meta-x: 64px; -$meta-y: 32px; -$meta-offset-x: -64px; -$meta-offset-y: -32px; -$meta-width: 32px; -$meta-height: 32px; -$meta-total-width: 96px; -$meta-total-height: 64px; -$meta-image: '../art/sprite.png'; -$meta: (64px, 32px, -64px, -32px, 32px, 32px, 96px, 64px, '../art/sprite.png', 'meta', ); -$up-name: 'up'; -$up-x: 0px; -$up-y: 0px; -$up-offset-x: 0px; -$up-offset-y: 0px; -$up-width: 32px; -$up-height: 64px; -$up-total-width: 96px; -$up-total-height: 64px; -$up-image: '../art/sprite.png'; -$up: (0px, 0px, 0px, 0px, 32px, 64px, 96px, 64px, '../art/sprite.png', 'up', ); -$up2-name: 'up2'; -$up2-x: 32px; -$up2-y: 0px; -$up2-offset-x: -32px; -$up2-offset-y: 0px; -$up2-width: 32px; -$up2-height: 64px; -$up2-total-width: 96px; -$up2-total-height: 64px; -$up2-image: '../art/sprite.png'; -$up2: (32px, 0px, -32px, 0px, 32px, 64px, 96px, 64px, '../art/sprite.png', 'up2', ); -$spritesheet-width: 96px; -$spritesheet-height: 64px; -$spritesheet-image: '../art/sprite.png'; -$spritesheet-sprites: ($down, $meta, $up, $up2, ); -$spritesheet: (96px, 64px, '../art/sprite.png', $spritesheet-sprites, ); - -// The provided mixins are intended to be used with the array-like variables -// -// .icon-home { -// @include sprite-width($icon-home); -// } -// -// .icon-email { -// @include sprite($icon-email); -// } -// -// Example usage in HTML: -// -// `display: block` sprite: -//
-// -// To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class: -// -// // CSS -// .icon { -// display: inline-block; -// } -// -// // HTML -// -@mixin sprite-width($sprite) { - width: nth($sprite, 5); -} - -@mixin sprite-height($sprite) { - height: nth($sprite, 6); -} - -@mixin sprite-position($sprite) { - $sprite-offset-x: nth($sprite, 3); - $sprite-offset-y: nth($sprite, 4); - background-position: $sprite-offset-x $sprite-offset-y; -} - -@mixin sprite-image($sprite) { - $sprite-image: nth($sprite, 9); - background-image: url(#{$sprite-image}); -} - -@mixin sprite($sprite) { - @include sprite-image($sprite); - @include sprite-position($sprite); - @include sprite-width($sprite); - @include sprite-height($sprite); -} - -// The `sprites` mixin generates identical output to the CSS template -// but can be overridden inside of SCSS -// -// @include sprites($spritesheet-sprites); -@mixin sprites($sprites) { - @each $sprite in $sprites { - $sprite-name: nth($sprite, 10); - .#{$sprite-name} { - @include sprite($sprite); - } - } -} diff --git a/mixins/_user_agent.scss b/mixins/_user_agent.scss deleted file mode 100644 index bf21661..0000000 --- a/mixins/_user_agent.scss +++ /dev/null @@ -1,9 +0,0 @@ -@mixin overrideUserAgent() { - @if $no_agent_focus == true { - @each $el in $io_focus_list { - #{$el}:focus { - outline: 0; - } - } - } -} diff --git a/mixins/_vendor.scss b/mixins/_vendor.scss deleted file mode 100644 index 2a48b79..0000000 --- a/mixins/_vendor.scss +++ /dev/null @@ -1,23 +0,0 @@ -/** - * @description - * Generates cross-browser-compatible output for a given element with its value. - * - * @author sthag - * - * @param values - * @returns - * -webkit-: - * ...-: - * - * @example - * .selector - * @include vendor-prefix(hyphens, auto) - */ -@mixin vendor-prefix($name, $argument) { - -webkit-#{$name}: #{$argument}; - -ms-#{$name}: #{$argument}; - -moz-#{$name}: #{$argument}; - -o-#{$name}: #{$argument}; - #{$name}: #{$argument}; -} - diff --git a/modules/breakpoint/_breakpoint_module.scss b/modules/breakpoint/_breakpoint_module.scss deleted file mode 100644 index fd0174a..0000000 --- a/modules/breakpoint/_breakpoint_module.scss +++ /dev/null @@ -1,47 +0,0 @@ -.query_goingLarge { - @include goingLarge($screen_tiny) {}; -} - -.query_goingSmall { - @include goingSmall($screen_gigantic) {}; -} - -.query_phoneUp { - @include forPhoneUp {} -} - -.query_phoneOnly { - @include forPhoneOnly {} -} - -.query_tabletPortaitOnly { - @include forTabletPortraitOnly { - } -} - -.query_tabletPortraitUp { - @include forTabletPortraitUp { - } -} - -.query_tabletLandscapeOnly { - @include forTabletLandscapeOnly {} -} - -.query_tabletLandscapeUp { - @include forTabletLandscapeUp {} -} - -.query_desktopOnly { - @include forDesktopOnly { - } -} - -.query_desktopUp { - @include forDesktopUp { - } -} - -.query_bigDesktopUp { - @include forBigDesktopUp {} -} diff --git a/modules/editor/_editor_module.scss b/modules/editor/_editor_module.scss deleted file mode 100644 index 7aa9434..0000000 --- a/modules/editor/_editor_module.scss +++ /dev/null @@ -1,23 +0,0 @@ -// Custom extends and mixins -// ------------------------------------------------------------------------------ -@import "mixins"; -@import "extends"; - -// Editor module styles -// ------------------------------------------------------------------------------ - -%wip { - border-right: $space_basic solid rgba(crimson, 0.8); - background-color: rgba(crimson, 0.1) !important; -} -.wip { - @extend %wip; - &::before, &::after { - content: ""; - display: block; - height: 48px; - } -} -.wip_txt { - @extend %wip; -} diff --git a/modules/editor/_extends.scss b/modules/editor/_extends.scss deleted file mode 100644 index e69de29..0000000 diff --git a/modules/editor/_mixins.scss b/modules/editor/_mixins.scss deleted file mode 100644 index e69de29..0000000 diff --git a/modules/explanation/_explanation_module.scss b/modules/explanation/_explanation_module.scss deleted file mode 100644 index fe4ed62..0000000 --- a/modules/explanation/_explanation_module.scss +++ /dev/null @@ -1,114 +0,0 @@ -@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 deleted file mode 100644 index 815648c..0000000 --- a/modules/maintenance/_maintenance_module.scss +++ /dev/null @@ -1,19 +0,0 @@ -.body_status { - @extend .sec_main_status; - height: 100vh; - border-color: $foxtrot_color; - - .main_site { - @extend .wrap_center; - & > h1:first-of-type { - margin-top: 0; - margin-bottom: 0; - font-weight: bold; - line-height: 1; - } - & > h1 + h3 { - margin-top: 0; - margin-bottom: $space_small; - } - } -} diff --git a/modules/media/_media_module.scss b/modules/media/_media_module.scss deleted file mode 100644 index f98886a..0000000 --- a/modules/media/_media_module.scss +++ /dev/null @@ -1,4 +0,0 @@ -.nomedia { - @extend .box_placeholder; - height: inherit; -} diff --git a/modules/navigation/_nav_module.scss b/modules/navigation/_nav_module.scss deleted file mode 100644 index 608fd63..0000000 --- a/modules/navigation/_nav_module.scss +++ /dev/null @@ -1,171 +0,0 @@ -nav { - - ul { - padding-left: 0; - } - - li { - margin-bottom: $space_basic; - list-style: none; - } -} - -.nav_horizontal { - ul { - @extend .overflow; - - ul { - margin: $space_basic 0; - } - - li { - @extend .float_space_left; - margin-right: $space_basic; - margin-bottom: 0; - - &:last-child { - margin-right: 0; - } - } - } -} - -.nav_right { - float: right; - margin-left: $space_basic; - - .align_parent { - margin-right: $space_basic * -1; - } -} - -.nav_separate { - li { - position: relative; - padding-left: $space_tiny; - - &:not(:first-child) { - - &::before { - content: ""; - position: absolute; - width: $space_tiny; - height: 100%; - left: 0; - top: 0; - background-color: $color_border_basic; - } - } - } -} - -.nav_separate_right { - float: right; - li { - position: relative; - - &:first-child { - padding-left: $space_basic * 2 + $space_tiny; - - &::before { - content: ""; - position: absolute; - width: $space_tiny; - height: 100%; - left: 0; - top: 0; - background-color: $color_front_basic; - margin: 0 $space_basic; - } - } - } -} - -.nav_center_old { - @extend .nav_horizontal; - float: right; - position: relative; - left: -50%; - - ul { - position: relative; - left: 50%; - text-align: center; - } -} - -.nav_column { - position: relative; - margin: $space_basic 0; - - ul { - @extend .flex; - margin: 0 $space_large; - - li { - @extend .flex_child; - flex-grow: 1; - margin: 0; - text-align: center; - - a { - display: block; - } - } - } -} - -.nav_page_meta { - position: fixed; - // display: table; - // width: 3em; - right: $space_half; - bottom: $space_double; - - ul { - margin: $space_basic 0; - } - - li { - margin-bottom: 0; - line-height: 1; - } - button { - width: 32px; - margin-right: 0; - margin-left: 0; - } - .a_button_meta { - // display: table-cell; - display: inline-block; - - &:active, - &:focus { - background-color: transparent; - } - - &:hover { - background-color: $color_action_basic; - } - } - .sprite_img { - vertical-align: top; - } -} - -.header_page { - - nav { - @extend .nav_horizontal; - - a { - - &:active, - &:focus, - &:hover { - background-color: rgba($color_text_basic, 0.2); - color: $color_text_basic; - } - } - } -} diff --git a/modules/print/_extends.scss b/modules/print/_extends.scss deleted file mode 100644 index e69de29..0000000 diff --git a/modules/print/_mixins.scss b/modules/print/_mixins.scss deleted file mode 100644 index e69de29..0000000 diff --git a/modules/print/_print_module.scss b/modules/print/_print_module.scss deleted file mode 100644 index 1e01a84..0000000 --- a/modules/print/_print_module.scss +++ /dev/null @@ -1,128 +0,0 @@ -// Custom extends and mixins -// ------------------------------------------------------------------------------ -@import "mixins"; -@import "extends"; - -// Print module styles -// ------------------------------------------------------------------------------ - -%paper { - background-color: $color_front_basic; -} - -$a4: ".dina4" 1.2cm 1.2cm 1.2cm 2.4cm; -$a5: ".dina5" 0 0 0 1.2cm; -$a6: ".dina6" 0 0 0 1.2cm; - -$din: $a4, $a5, $a6; - -.print_body { - font-size: $size_text_print; - margin: 10vh 20vw; - - @page { - size: A4; - margin: 1.2cm; - } - - @page:first { - size: A4; - margin: 0; - } - - @each $space in $din { - #{nth($space, 1)} { - padding-top: nth($space, 2); - padding-right: nth($space, 3); - padding-bottom: nth($space, 4); - padding-left: nth($space, 5); - - .page_head, .page_foot { - right: nth($space, 3); - left: nth($space, 5); - } - .page_head { - top: nth($space, 2); - } - .page_foot { - bottom: nth($space, 4); - } - } - } - - *[class^="din"] { - @extend %paper; - position: relative; - overflow: auto; - - p { - @extend %basic_print; - } - - .page_head, .page_foot { - position: absolute; - } - - .page_head { - page: cover; - } - - .page_foot { - display: flex; - flex-direction: row; - - *:last-child { - margin-bottom: 0; - } - - p { - flex: 1 0 auto; - margin: 0; - font-size: 8pt; - line-height: 10pt; - text-align: center; - } - - .page_no { - flex: 1 0 auto; - font-size: 20pt; - line-height: 1; - text-align: right; - } - p:first-child { - text-align: left; - } - } - .page_content { - margin-top: 10cm; - margin-bottom: 2cm; - } - margin: $space_small auto; - } - - .page_title, .page_date { - font-size: 14pt; - } - - .page_title { - margin: 0; - } - - .page_date, .page_no { - @extend %head_1; - float: right; - } - - .page_author { - position: absolute; - top: 5cm; - right: 0; - text-align: right; - } - - .page_recipient { - position: absolute; - top: 5cm; - left: 0; - } -} diff --git a/modules/tables/_tables_module.scss b/modules/tables/_tables_module.scss deleted file mode 100644 index de2523e..0000000 --- a/modules/tables/_tables_module.scss +++ /dev/null @@ -1,68 +0,0 @@ -.table_link { - width: 100%; - border: 0; - table-layout: auto; - - tbody { - border-bottom: $border_basic; - - &:hover { - background-color: $color_bright; - } - } - - th, td { - border: 0; - } - - .cell_icon { - width: 48px; - text-align: center; - img { - vertical-align: text-top; - } - } - - .cell_link { - padding-right: $space_basic; - padding-left: $space_basic; - - &:hover { - background-color: $foxtrot_color; - a:first-child { - display: none; - } - a:last-child { - display: block; - color: $color_highlight_basic; - } - } - - a { - display: block; - } - - a:last-child { - display: none; - } - } - - th:last-child, .cell_date { - width: 16%; - text-align: center; - } - - .cell_text { - padding-right: $space_basic; - padding-left: $space_basic; - - div { - width: 100%; - } - - .shorten { - @extend %short; - max-height: 44px; - } - } -}