interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

New stuff

Browse source
This commit is contained in:
Stephan Hagedorn 2017-08-22 16:50:09 +02:00
parent db96a298fb
commit f97f76ee3d
30 changed files with 1463 additions and 1146 deletions
Download patch file Download diff file Expand all files Collapse all files

21
_default.scss
View file

@ -1,21 +0,0 @@
// Main configuration
// ------------------------------------------------------------------------------
//$default_font_size: 15px;
//$default_print_font_size: 10pt;
//$default_line_height: 1.5;
//$default_font_family: #{'Roboto', 'Trebuchet MS', Helvetica, 'Source Sans', Arial, sans-serif, sans};
//$dark_color: black !default;
//$bright_color: white !default;
//$medium_color: lighten($dark_color, 50%) !default;
//$default_back_color: lighten(black, 50%);
//$default_space: 8px;
//$tiny_space: 1px;
//$default_border_width: $tiny_space;

33
_hippie.scss
View file

@ -2,6 +2,7 @@
* # TABLE OF CONTENTS
*
* - Reset
* - Global functions and mixins
* - Configuration
* - Special modules
* - Basic styles
@ -27,6 +28,14 @@
// Functions and Mixins
// Important code constructions
// -----------------------------------------------------------------------------
@import "functions/all";
@import "mixins/all";
// Fonts
// Use a central file outside of hippie for font definitions with @font-face
// -----------------------------------------------------------------------------
@ -38,8 +47,8 @@
// Adjustments can be made by copying values from _config.scss to _override.scss
// Be careful though changes will get lost if hippie gets updated
// -----------------------------------------------------------------------------
@import "default"; // EDIT
@import "config"; // DO NOT EDIT
@import "global/default"; // DO NOT EDIT
@import "global/config"; // DO NOT EDIT
@import "override"; // EDIT
@ -54,16 +63,16 @@
// Basic styles - this is the core of definitions
// Individual styles can be added her
// -----------------------------------------------------------------------------
@import "basic/common";
@import "basic/typography";
@import "global/common";
@import "elements/typography";
// Following the w3c document element structure
// https://w3c.github.io/html/index.html#contents
@import "basic/sections";
@import "basic/grouping";
@import "basic/textlevel";
@import "basic/embedded";
@import "basic/tables";
@import "basic/interactive";
@import "elements/sections";
@import "elements/grouping";
@import "elements/textlevel";
@import "elements/embedded";
@import "elements/tables";
@import "elements/interactive";
// @import "YOU-NAME-IT";
// Individual Modules and variables
@ -81,11 +90,11 @@
// Demonstration
@import "basic/demo";
@import "modules/demo/demo_module";
// Not yet sorted
@import "basic/new";
@import "elements/new";
// NOTE // No css rules allowed in here

0
basic/_embedded.scss → elements/_embedded.scss
View file

28
basic/_grouping.scss → elements/_grouping.scss
View file

@ -13,7 +13,7 @@ p {
}
.p__col_line {
column-rule: $basic_border_width solid $dark_color;
column-rule: $basic_border_width solid $darkest_color;
}
.p__col_2, .p__col_3 {
@extend p;
@ -37,7 +37,7 @@ hr {
margin: $space_3 auto;
border-width: $basic_border_width 0 0;
border-style: solid;
border-color: $dark_color;
border-color: $darkest_color;
}
.hr__hidden {
@ -57,12 +57,12 @@ pre {
.pre__code {
// overflow-x: scroll;
border-color: rgba($bright_color,.1);
border-color: rgba($brightest_color,.1);
border-style: dotted;
border-width: 0 0 0 $border_width_4;
border-radius: $basic_corner;
padding: $basic_space;
background-color: rgba($bright_color,.1);
background-color: rgba($brightest_color,.1);
code {
background-color: transparent;
}
@ -116,7 +116,7 @@ ul {
list-style: none;
position: relative;
&:before {
&::before {
content: "_";
position: absolute;
left: -1em;
@ -218,10 +218,10 @@ div {
.box__placeholder {
width: 100%;
height: $space_4;
border: $border_width_4 solid rgba($dark_color,.1);
border: $border_width_4 solid rgba($darkest_color,.1);
border-radius: $basic_corner;
padding: $basic_space;
background-color: rgba($dark_color,.1);
background-color: rgba($darkest_color,.1);
svg {
vertical-align: top;
}
@ -230,10 +230,20 @@ div {
.box__placeholder_bkg {
width: 100%;
height: $space_4;
border: $border_width_4 solid rgba($dark_color,.1);
border: $border_width_4 solid rgba($darkest_color,.1);
border-radius: $basic_corner;
padding: $basic_space;
/*data:[<mime type>][;charset=<charset>][;base64],<encoded data>*/
background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='2%' y1='2%' x2='98%' y2='98%' stroke='#000' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/></svg>") no-repeat;
background-color: rgba($dark_color,.1);
background-color: rgba($darkest_color,.1);
}
// Flex
.box__column {
@extend .flex;
.column {
@extend .flex_child;
flex-grow: 1;
}
}

16
basic/_interactive.scss → elements/_interactive.scss
View file

@ -7,6 +7,7 @@ form {
fieldset {
margin: $basic_space 0;
padding: $basic_space;
border: $basic_border;
}
@ -21,6 +22,13 @@ legend {
// -----------------------------------------------------------------------------
label {
@extend %basic;
& + input {
margin-left: $basic_space;
}
input + & {
margin-left: $basic_space;
}
}
.input_default label {
@ -37,8 +45,8 @@ label {
color: $basic_io_font_color;
&:hover {
background-color: $dark_color;
color: $bright_color;
background-color: $darkest_color;
color: $brightest_color;
}
}
}
@ -119,5 +127,5 @@ dialog {
// -----------------------------------------------------------------------------
canvas {
}
}

13
basic/_new.scss → elements/_new.scss
View file

@ -1,16 +1,16 @@
.test {
li:after {
li::after {
content: "";
display: block;
height: 16px;
}
}
.front_color_1 { color: $alpha_color; &:after { background-color: $alpha_color; } }
.front_color_2 { color: $bravo_color; &:after { background-color: $bravo_color; } }
.front_color_3 { color: $charlie_color; &:after { background-color: $charlie_color; } }
.front_color_4 { color: $delta_color; &:after { background-color: $delta_color; } }
.front_color_5 { color: $echo_color; &:after { background-color: $echo_color; } }
.front_color_1 { color: $alpha_color; &::after { background-color: $alpha_color; } }
.front_color_2 { color: $bravo_color; &::after { background-color: $bravo_color; } }
.front_color_3 { color: $charlie_color; &::after { background-color: $charlie_color; } }
.front_color_4 { color: $delta_color; &::after { background-color: $delta_color; } }
.front_color_5 { color: $echo_color; &::after { background-color: $echo_color; } }
.back_color_1 { background-color: $alpha_color;}
.back_color_2 { background-color: $bravo_color;}
@ -36,4 +36,3 @@
@extend %label;
@extend .back_color_3;
}

0
basic/_sections.scss → elements/_sections.scss
View file

2
basic/_tables.scss → elements/_tables.scss
View file

@ -60,7 +60,7 @@ tfoot {
}
tr:nth-child(even) td {
background-color: $light_color;
background-color: $bright_color;
}
}

13
basic/_textlevel.scss → elements/_textlevel.scss
View file

@ -53,6 +53,11 @@ i, em {
font-style: italic;
}
.i__bright {
font-style: normal;
color: $brightest_color;
}
b, strong {
font-weight: 500; // TODO maybe bolder
}
@ -91,7 +96,7 @@ time {
code {
@extend %basic_mono;
color: lighten($basic_font_color, 12%);
background-color: rgba($bright_color,.1);
background-color: rgba($brightest_color,.1);
}
.code__solo {
@extend %basic_mono;
@ -121,15 +126,15 @@ mark {
}
.mark__cursor {
color: $basic_highlight_color;
background-color: $dark_color;
background-color: $darkest_color;
}
::-moz-selection {
color: $basic_highlight_color;
background-color: $dark_color;
background-color: $darkest_color;
}
::selection {
color: $basic_highlight_color;
background-color: $dark_color;
background-color: $darkest_color;
}
span {

0
basic/_typography.scss → elements/_typography.scss
View file

2098
example.css
View file

File diff suppressed because it is too large Load diff

55
example.html
View file

@ -10,6 +10,8 @@
<meta name="generator" content="Notepad++, Atom">
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'>-->
<link rel="stylesheet" type="text/css" media="all" href="./example.css"/>
</head>
@ -338,8 +340,19 @@
</table>
<h1>Formulare</h1>
<p>Spätestens hier werden Betrachter zu Benutzern. Texteingabefelder und verschiedene Bedienelemente geben Möglichkeiten zur Interaktion. Diese Elemente sind in vielerlei Hinsicht besonders. Sie sind in ihrer unveränderten Gestalt, System- bzw. Browser-Abhängig. <span class="wip_txt">(Vielleicht ist das auch scheiße, hier darauf einzugehen) ...</span></p>
<input/>
<p>Spätestens hier werden Betrachter zu Benutzern. Texteingabefelder und verschiedene Bedienelemente geben Möglichkeiten zur Interaktion. Diese Elemente sind in vielerlei Hinsicht besonders. Werden sie nicht explizit gestaltet, ist ihre Erscheinung system- bzw. browserabhängig. <span class="wip_txt">(Vielleicht ist das auch scheiße, hier darauf einzugehen) ...</span> Üblicherweise stehen alle Formularelemente innerhalb eines <code>&lt;form&gt;</code> Elementes. Dieses ist notwendig um Angaben zur Kommunikation mit dem Server zu setzen. Es hat normalerweise keine gestalterische Funktion.</p>
<p>Grundlegend ist das Element <code>&lt;input&gt;</code>. Es hat viele Attribute um den Typ der Eingabe anzupassen. Ist es undefiniert nimmt es jegliche textbasierte Information auf und erhält eine Standardgröße.</p>
<p><input value="Undefiniert"/></p>
<p>Ein spezieller Typ des Eingabefeldes verändert seine Funktion zu einer Schaltfläche <code>&lt;input[type="button"]&gt;</code>. Es gibt allerdings auch ein eigenes Element <code>&lt;button&gt;</code> dafür.
<p><input type="button" value="Input Button" class="space_right"><button>Button</button></p>
<p>Interaktive Elemente können durch das Attribut <code>&lt;readonly&gt;</code> nur lesbar gemacht werden oder mittels <code>&lt;disabled&gt;</code> gänzlich deaktiviert werden.</p>
<p><input type="text" value="Read Only Text" readonly class="space_right"><input type="text" value="Disabled Text" disabled class="space_right"><button disabled>Button</button></p>
<p>Das Element <code>&lt;label&gt;</code> ergänzt interaktive Elemente um eine Beschriftung.</p>
<label for="demo__input">Beschriftung:</label><input type="text" id="demo__input">
<p>Zusätzlich zur Beschriftung einzelner Elemente gibt es auch die Möglichkeit Gruppierungen zu schaffen. Diese werden mit <code>&lt;fieldset&gt;</code> realisiert.</p>
<fieldset>
<label for="demo__output">Beschriftung:</label><input type="text" readonly id="demo__output">
</fieldset>
<fieldset class="input_default">
<legend>Einfache Eingabefelder</legend>
<label for="simple_txt">Einfache Texteingabe<input type="text" id="simple_txt" value="Text"/></label>
@ -491,17 +504,20 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4</code></pre>
</ul>
</nav>
</header>
<footer class="pos_abs pos_bottom demo__footer">
<nav class="nav__column">
<ul>
<li><a href="" class="a__button_text">Alpha</a></li>
<li><a href="" class="a__button_text">Bravo</a></li>
<li><a href="" class="a__button_text">Charlie</a></li>
<li><a href="" class="a__button_text">Delta</a></li>
</ul>
</nav>
<p class="txt_center">👨‍💻 mit ❤ von <a href="https://interaktionsweise.de">Interaktionsweise</a></p>
</footer>
<div class="pos_abs pos_bottom width_full">
<pre class="pre__code"><code>footer.pos_abs.pos_bottom>nav.nav__column>ul>(li>a.a__button_text)*4</code></pre>
<footer id="js_demo_stop" class="demo__footer">
<nav class="nav__column nav__separate">
<ul>
<li><a href="" class="a__button_text">Alpha</a></li>
<li><a href="" class="a__button_text">Bravo</a></li>
<li><a href="" class="a__button_text">Charlie</a></li>
<li><a href="" class="a__button_text">Delta</a></li>
</ul>
</nav>
<p class="txt_center demo__credits"><i class="i__bright">👨‍💻</i> mit <i class="i__bright">❤</i> von <a href="https://interaktionsweise.de">Interaktionsweise</a></p>
</footer>
</div>
</div>
<div class="flex">
<div class="flex_child"></div>
@ -510,6 +526,13 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4</code></pre>
<div class="flex_child"></div>
<div class="flex_child"></div>
</div>
<div class="box__column">
<div class="column"><input value="Undefiniert"/></div>
<div class="column"><input type="text" size="8" value="Text"/></div>
<div class="column"><input type="text" size="8" value="Deaktiviert" disabled/></div>
<div class="column"><input type="button" value="Auswählen"></div>
<div class="column"><input type="submit" value="Senden" disabled/></div>
</div>
<h2>Gruppierung</h2>
<pre class="pre__code"><code>ul.list__link>(li>a>img)*2+li>a</code></pre>
@ -620,7 +643,7 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4</code></pre>
);
// WIP Activates layer with explanation elements
// Besser :after oder :before benutzen
// Besser ::after oder ::before benutzen
$(".exp_help_btn").click(function(e){
var $wrap, $pop;
@ -703,7 +726,7 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4</code></pre>
// jq-sticky-anything
$('#js_demo_fix').stickThis({
pushup: '#js_demo_fix + .demo__footer'
pushup: '#js_demo_stop'
});
@ -718,7 +741,7 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4</code></pre>
doc_pos_y = $( document ).scrollTop();
// console.log(doc_pos_y);
var h = scroll_y_margin;
var demo_margin = $('.header__fix');
// var demo_margin = $('.header__fix');
if (doc_pos_y > h) {
$('#js_scrolltop').parent().removeClass('magic');
} else {

3
functions/_all.scss Normal file
View file

@ -0,0 +1,3 @@
@import "color";
@import "shade";
@import "tint";

13
functions/_color.scss Normal file
View file

@ -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);
}

24
functions/_shade.scss Normal file
View file

@ -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);
}

24
functions/_tint.scss Normal file
View file

@ -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);
}

8
basic/_common.scss → global/_common.scss
View file

@ -41,8 +41,6 @@
height: 1024px;
}
.txt_center {
text-align: center !important;
}
@ -53,6 +51,10 @@
text-align: left !important;
}
.space_right {
margin-right: $space_3;
}
// Clearing and floating
@ -138,7 +140,7 @@
.hover_full_view_change {
@extend %full_viewport;
z-index: $z_top;
background-color: transparentize($dark_color, .5);
background-color: transparentize($darkest_color, .5);
transition: background-color .2s ease-in-out;
pointer-events: none;
}

114
_config.scss → global/_config.scss
View file

@ -1,13 +1,11 @@
// Default configuration
// ------------------------------------------------------------------------------
// TEXT
// ------------------------------------------------------------------------------
$default_font_size: 17px !default;
$basic_size: $default_font_size;
$default_print_font_size: 10pt !default;
$basic_print_size: $default_print_font_size;
$size_1: $basic_size * 4;
@ -54,15 +52,12 @@ $head_size_4: 1.35em;
$text_size_1: 1em;
$text_size_2: 20;
$default_line_height: 1.5 !default;
$text_line_1: $default_line_height;
$head_line_1: $text_line_1;
$head_line_2: $text_line_1;
$head_line_3: $text_line_1;
$head_line_4: $text_line_1;
$default_font_family: #{'Roboto', 'Segoe UI', 'Liberation Sans', 'Source Sans', 'Trebuchet MS', Helvetica, Arial, sans-serif, sans} !default;
$print_font_family: #{'Times New Roman', times};
$monospace_font_family: #{'Courier New', monospace};
@ -86,43 +81,42 @@ $color_palette: (
foxtrot: #0c85ff
);
$alpha_color: #fad803;
$bravo_color: #d30a51;
$charlie_color: #273f8b;
$delta_color: #b7e0f0;
$echo_color: #52bed1;
$foxtrot_color: #0c85ff;
@include addDefaultColors;
$dark_color: black !default;
$bright_color: white !default;
$medium_color: lighten($dark_color, 50%) !default;
$default_front_color: $dark_color !default;
$default_back_color: $medium_color !default;
$darkest_color: $default_darkest_color;
$brightest_color: $default_brightest_color;
$basic_font_color: $default_front_color;
$basic_head_color: $default_front_color;
$basic_link_color: $echo_color;
$basic_highlight_color: $bright_color;
$basic_highlight_color: $brightest_color;
$basic_action_color: $foxtrot_color;
$basic_front_color: $default_front_color;
$basic_back_color: $default_back_color;
$light_color: lighten($basic_back_color, 5%);
$dark_color_color: darken($basic_back_color, 10%);
$dark_color: lighten($darkest_color, 20%);
$medium_color: lighten($darkest_color, 50%);
$bright_color: darken($brightest_color, 20%);
$basic_border_color: $default_front_color;
// default shadow colors
// $shadow_color: fade-out($medium_color, .5);
$basic_color_map: ();
@each $key, $value in $color_palette {
$map: ();
$map: map-merge($map, ($key: createColorMap($value, 15%, .5)) );
$basic_color_map: map-merge($basic_color_map, $map);
}
// LAYOUT
// ------------------------------------------------------------------------------
$default_box_sizing: border-box !default;
$box_sizing: $default_box_sizing;
$z_top: 1000;
@ -132,7 +126,6 @@ $width_small: 80%;
$width_medium: 60%;
$width_large: 48%;
$default_space: 8px !default;
$basic_space: $default_space;
$half_space: $basic_space / 2;
$space_2: $basic_space * 2;
@ -146,25 +139,52 @@ $wide_padding: calc(#{$basic_space} - 1px) calc(#{$basic_space} * 2);
$basic_corner: $tiny_space;
$default_border_width: $tiny_space !default;
$basic_border_width: $default_border_width;
$border_width_4: $tiny_space * 4;
$border_width_8: $tiny_space * 8;
$basic_border: $tiny_space solid $basic_border_color;
$cell_border: $tiny_space solid $dark_color_color;
$cell_border: $tiny_space solid $darkest_color;
$basic_aside_width: 20%;
// IO
// ------------------------------------------------------------------------------
$basic_io_font_color: darken($bright_color, 10%);
$basic_io_back_color: lighten($dark_color, 25%);
$basic_shadow: inset 0 1px 3px rgba($dark_color, 0.06);
$basic_focus_shadow: $basic_shadow, 0 0 5px adjust-color($basic_action_color, $lightness: -5%, $alpha: -0.3);
$basic_text_input_map: 'input[type="color"]',
'input[type="date"]',
'input[type="datetime"]',
'input[type="datetime-local"]',
'input[type="email"]',
'input[type="month"]',
'input[type="number"]',
'input[type="password"]',
'input[type="search"]',
'input[type="tel"]',
'input[type="text"]',
'input[type="time"]',
'input[type="url"]',
'input[type="week"]',
'input:not([type])',
'textarea';
$basic_button_map: 'button',
'input[type="button"]',
'input[type="reset"]',
'input[type="submit"]';
$basic_focus_map: 'a[href]',
'area[href]',
'button:not([disabled])',
'input:not([disabled])',
'select:not([disabled])',
'textarea:not([disabled])',
'*[tabindex]';
$basic_io_font_color: darken($brightest_color, 10%);
$basic_io_back_color: lighten($darkest_color, 25%);
$basic_shadow: inset 0 1px 3px rgba($darkest_color, 0.06);
$basic_focus_shadow: $basic_shadow, 0 0 5px adjust-color($basic_action_color, $lightness: -5%, $alpha: -0.3);
// ANIMATIONS
@ -174,7 +194,6 @@ $basic_duration: 150ms;
$basic_timing: ease;
// HARDWARE BREAKPOINTS
// ------------------------------------------------------------------------------
@ -191,7 +210,6 @@ $screen_medium: 1280px;
$screen_large: 1920px;
// VENDOR PREFIX
// ------------------------------------------------------------------------------
@ -204,6 +222,30 @@ $moz_ms_support: -moz- -ms- '';
$webkit_ms_support: -webkit- -ms- '';
// SYMBOLS
// ------------------------------------------------------------------------------
$icons: (
glass: "\f000",
music: "\f001",
search: "\f002",
envelope-o: "\f003",
heart: "\f004"
);
@each $name, $icon in $icons {
.sym_#{$name}::before {
content: $icon;
}
}
// USER AGENT
// ------------------------------------------------------------------------------
$no_agent_focus: true;
@include overrideUserAgent;
// The config file is intended to allow users to quickly redefine core elements of the design
// that will cascade throughout the css to get your design up and running FAST!
@ -308,8 +350,8 @@ $webkit_ms_support: -webkit- -ms- '';
// $input_disabled_border: lighten($input_disabled, 50%);
// $input_disabled_text: lighten($input_disabled, 50%);
//
// $form_field_back_color: $bright_color;
// $form_field_focus_color: $bright_color;
// $form_field_back_color: $brightest_color;
// $form_field_focus_color: $brightest_color;
// $form_field_fail_bkg: $alpha_color_juliet;
// $form_field_border: $charlie_gray;
@ -322,7 +364,7 @@ $webkit_ms_support: -webkit- -ms- '';
// $instructional_text: $charlie_gray;
// $placeholder_text: $hotel_gray;
// $inline_alert_bkg_color: $alpha_color_delta;
// $inline_alert_text_color: $bright_color;
// $inline_alert_text_color: $brightest_color;
// Non-color defaults (currently not represented in the SG view)
// ---------------------------------------------------------
@ -343,7 +385,7 @@ $webkit_ms_support: -webkit- -ms- '';
/////// Config defaults for buttons ///////
// -----------------------------------------------------------------------------
// $button-color: $delta-color;
// $button-text-color: $bright_color;
// $button-text-color: $brightest_color;
// $button-line-height: 32;
// $button-border-radius: 3;
// $button-padding: 20;

23
global/_default.scss Normal file
View file

@ -0,0 +1,23 @@
// Main configuration
// ------------------------------------------------------------------------------
$default_font_size: 17px !default;
$default_print_font_size: 10pt !default;
$default_line_height: 1.5 !default;
$default_font_family: #{'Roboto', 'Segoe UI', 'Liberation Sans', 'Source Sans', 'Trebuchet MS', Helvetica, Arial, sans-serif, sans} !default;
$default_darkest_color: black !default;
$default_medium_color: lighten($default_darkest_color, 50%);
$default_brightest_color: white !default;
$default_front_color: $default_darkest_color !default;
$default_back_color: $default_medium_color !default;
$default_box_sizing: border-box !default;
$default_space: 8px !default;
$default_tiny_space: 1px !default;
$default_border_width: $default_tiny_space !default;

3
mixins/_all.scss Normal file
View file

@ -0,0 +1,3 @@
@import "clearflow";
@import "color";
@import "user_agent";

25
mixins/_clearflow.scss Normal file
View file

@ -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;
}
}

20
mixins/_color.scss Normal file
View file

@ -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;
}
}

9
mixins/_user_agent.scss Normal file
View file

@ -0,0 +1,9 @@
@mixin overrideUserAgent() {
@if $no_agent_focus == true {
@each $el in $basic_focus_map {
#{$el}:focus {
outline: 0;
}
}
}
}

2
modules/card/_card_module.scss
View file

@ -85,7 +85,7 @@ margin-top: 16px;
text-indent: -1em;
text-align: center;
}
.marked:before { content: "*\0000a0" }
.marked::before { content: "*\0000a0" }
.decent { color: #666 }
a {
color: #000;

16
basic/_demo.scss → modules/demo/_demo_module.scss
View file

@ -29,8 +29,8 @@
&:active,
&:focus,
&:hover {
background-color: rgba($bright_color, .2);
color: $bright_color;
background-color: rgba($brightest_color, .2);
color: $brightest_color;
}
}
}
@ -49,8 +49,8 @@
&:active,
&:focus,
&:hover {
background-color: rgba($bright_color, .2);
color: $bright_color;
background-color: rgba($brightest_color, .2);
color: $brightest_color;
}
}
}
@ -66,7 +66,7 @@
nav {
a {
color: $bright_color;
color: $brightest_color;
}
}
}
@ -77,6 +77,8 @@
opacity: 1;
width: 128px;
height: auto;
min-width: 128px;
min-height: 128px;
border-radius: 50%;
background-color: $delta_color;
}
@ -85,3 +87,7 @@
.demo__flag {
height: 40vh;
}
.demo__credits {
margin: $space_3 0 $basic_space 0;
}

4
modules/editor/_editor_module.scss
View file

@ -12,7 +12,7 @@
}
.wip {
@extend %wip;
&:before, &:after {
&::before, &::after {
content: "";
display: block;
height: 48px;
@ -20,4 +20,4 @@
}
.wip_txt {
@extend %wip;
}
}

16
modules/explanation/_explanation_module.scss
View file

@ -7,7 +7,7 @@
// ------------------------------------------------------------------------------
%expose_after {
&:after {
&::after {
content: "";
display: block;
height: 48px;
@ -15,7 +15,7 @@
}
}
%expose_before {
&:before {
&::before {
content: "";
display: block;
height: 48px;
@ -23,7 +23,7 @@
}
}
%expose {
&:before, &:after {
&::before, &::after {
content: "";
display: block;
height: 48px;
@ -61,7 +61,7 @@
border: $tiny_space solid $basic_highlight_color;
border-radius: $basic_size;
color: $basic_highlight_color;
background-color: $dark_color;
background-color: $darkest_color;
}
.exp_expose {
@ -85,16 +85,16 @@
display: table;
right: $space_2;
bottom: $space_2;
background-color: rgba($dark_color, .4);
background-color: rgba($darkest_color, .4);
&:hover {
background-color: $bright_color;
background-color: $brightest_color;
> .span__solo {
color: $dark_color;
color: $darkest_color;
}
}
.span__solo {
display: table-cell;
color: rgba($bright_color, .8);
color: rgba($brightest_color, .8);
font-family: $monospace_font_family;
font-size: 1.4em;
text-align: center;

22
modules/navigation/_nav_module.scss
View file

@ -39,6 +39,26 @@ nav {
}
}
.nav__separate {
li {
position: relative;
padding-left: $tiny_space;
&:not(:first-child) {
&::before {
content: "";
position: absolute;
width: $tiny_space;
height: 100%;
left: 0;
top: 0;
background-color: $darkest_color;
}
}
}
}
.nav__separate_right {
float: right;
li {
@ -54,7 +74,7 @@ nav {
height: 100%;
left: 0;
top: 0;
background-color: $bright_color;
background-color: $brightest_color;
margin: 0 $basic_space;
}
}

2
modules/print/_print_module.scss
View file

@ -7,7 +7,7 @@
// ------------------------------------------------------------------------------
%paper {
background-color: $bright_color;
background-color: $brightest_color;
}
$a4: ".dina4" 1.2cm 1.2cm 1.2cm 2.4cm;

2
modules/tables/_tables_module.scss
View file

@ -7,7 +7,7 @@
border-bottom: $cell_border;
&:hover {
background-color: $light_color;
background-color: $bright_color;
}
}