New stuff
This commit is contained in:
Stephan Hagedorn
parent
db96a298fb
commit
f97f76ee3d
30 changed files with 1463 additions and 1146 deletions
|
|
@ -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
33
_hippie.scss
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -60,7 +60,7 @@ tfoot {
|
|||
}
|
||||
|
||||
tr:nth-child(even) td {
|
||||
background-color: $light_color;
|
||||
background-color: $bright_color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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 {
|
||||
116
example.css
116
example.css
|
|
@ -3,6 +3,7 @@
|
|||
* # TABLE OF CONTENTS
|
||||
*
|
||||
* - Reset
|
||||
* - Global functions and mixins
|
||||
* - Configuration
|
||||
* - Special modules
|
||||
* - Basic styles
|
||||
|
|
@ -19,6 +20,42 @@
|
|||
*
|
||||
*/
|
||||
@import url(other/normalize.css);
|
||||
.sym_glass::before {
|
||||
content: ""; }
|
||||
|
||||
.sym_music::before {
|
||||
content: ""; }
|
||||
|
||||
.sym_search::before {
|
||||
content: ""; }
|
||||
|
||||
.sym_envelope-o::before {
|
||||
content: ""; }
|
||||
|
||||
.sym_heart::before {
|
||||
content: ""; }
|
||||
|
||||
a[href]:focus {
|
||||
outline: 0; }
|
||||
|
||||
area[href]:focus {
|
||||
outline: 0; }
|
||||
|
||||
button:not([disabled]):focus {
|
||||
outline: 0; }
|
||||
|
||||
input:not([disabled]):focus {
|
||||
outline: 0; }
|
||||
|
||||
select:not([disabled]):focus {
|
||||
outline: 0; }
|
||||
|
||||
textarea:not([disabled]):focus {
|
||||
outline: 0; }
|
||||
|
||||
*[tabindex]:focus {
|
||||
outline: 0; }
|
||||
|
||||
/**
|
||||
* @description
|
||||
* Generates cross-browser-compatible output for a given element with its value.
|
||||
|
|
@ -62,6 +99,9 @@
|
|||
.txt_left {
|
||||
text-align: left !important; }
|
||||
|
||||
.space_right {
|
||||
margin-right: 32px; }
|
||||
|
||||
.clear {
|
||||
clear: both; }
|
||||
.clear::before, .clear::after {
|
||||
|
|
@ -121,10 +161,10 @@
|
|||
transition: background-color .2s ease-in-out;
|
||||
pointer-events: none; }
|
||||
|
||||
.flex, .nav__column ul {
|
||||
.flex, .box__column, .nav__column ul {
|
||||
display: flex; }
|
||||
|
||||
.flex_child, .nav__column ul li {
|
||||
.flex_child, .box__column .column, .nav__column ul li {
|
||||
flex: 0 1 auto; }
|
||||
|
||||
.txt_light_color {
|
||||
|
|
@ -331,7 +371,7 @@ ul li {
|
|||
.list__dash li {
|
||||
list-style: none;
|
||||
position: relative; }
|
||||
.list__dash li:before {
|
||||
.list__dash li::before {
|
||||
content: "_";
|
||||
position: absolute;
|
||||
left: -1em; }
|
||||
|
|
@ -398,6 +438,9 @@ figure {
|
|||
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(0, 0, 0, 0.1); }
|
||||
|
||||
.box__column .column {
|
||||
flex-grow: 1; }
|
||||
|
||||
a {
|
||||
color: #52bed1;
|
||||
text-decoration: none; }
|
||||
|
|
@ -421,11 +464,15 @@ a {
|
|||
color: black; }
|
||||
|
||||
.a__button_border {
|
||||
border: 1px solid #666666; }
|
||||
border: 1px solid black; }
|
||||
|
||||
i, em {
|
||||
font-style: italic; }
|
||||
|
||||
.i__bright {
|
||||
font-style: normal;
|
||||
color: white; }
|
||||
|
||||
b, strong {
|
||||
font-weight: 500; }
|
||||
|
||||
|
|
@ -475,8 +522,8 @@ th {
|
|||
border-right: 1px solid black; }
|
||||
|
||||
td {
|
||||
border-right: 1px solid #666666;
|
||||
border-bottom: 1px solid #666666; }
|
||||
border-right: 1px solid black;
|
||||
border-bottom: 1px solid black; }
|
||||
|
||||
td:last-child {
|
||||
border-right: 0; }
|
||||
|
|
@ -499,7 +546,7 @@ tfoot tr:first-child td {
|
|||
border-top: 0;
|
||||
border-bottom: 0; }
|
||||
.table_stripe tr:nth-child(even) td {
|
||||
background-color: #8c8c8c; }
|
||||
background-color: #cccccc; }
|
||||
|
||||
.table_fix {
|
||||
table-layout: fixed; }
|
||||
|
|
@ -511,11 +558,17 @@ caption {
|
|||
|
||||
fieldset {
|
||||
margin: 8px 0;
|
||||
padding: 8px;
|
||||
border: 1px solid black; }
|
||||
|
||||
legend {
|
||||
padding: 0 4px; }
|
||||
|
||||
label + input {
|
||||
margin-left: 8px; }
|
||||
input + label {
|
||||
margin-left: 8px; }
|
||||
|
||||
.input_default label {
|
||||
display: table;
|
||||
margin: 4px 0; }
|
||||
|
|
@ -551,6 +604,18 @@ nav li {
|
|||
.nav__right .align_parent {
|
||||
margin-right: -8px; }
|
||||
|
||||
.nav__separate li {
|
||||
position: relative;
|
||||
padding-left: 1px; }
|
||||
.nav__separate li:not(:first-child)::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: black; }
|
||||
|
||||
.nav__separate_right {
|
||||
float: right; }
|
||||
.nav__separate_right li {
|
||||
|
|
@ -612,9 +677,9 @@ nav li {
|
|||
border: 0;
|
||||
table-layout: auto; }
|
||||
.table__link tbody {
|
||||
border-bottom: 1px solid #666666; }
|
||||
border-bottom: 1px solid black; }
|
||||
.table__link tbody:hover {
|
||||
background-color: #8c8c8c; }
|
||||
background-color: #cccccc; }
|
||||
.table__link th, .table__link td {
|
||||
border: 0; }
|
||||
.table__link .cell__icon {
|
||||
|
|
@ -716,7 +781,7 @@ nav li {
|
|||
padding-left: 1em;
|
||||
text-indent: -1em;
|
||||
text-align: center; }
|
||||
.card_body .marked:before {
|
||||
.card_body .marked::before {
|
||||
content: "* "; }
|
||||
.card_body .decent {
|
||||
color: #666; }
|
||||
|
|
@ -732,24 +797,24 @@ nav li {
|
|||
border-right: 8px solid rgba(220, 20, 60, 0.8);
|
||||
background-color: rgba(220, 20, 60, 0.1) !important; }
|
||||
|
||||
.wip:before, .wip:after {
|
||||
.wip::before, .wip::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 48px; }
|
||||
|
||||
.exp_expose_pre:after {
|
||||
.exp_expose_pre::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 48px;
|
||||
background-color: rgba(183, 224, 240, 0.1) !important; }
|
||||
|
||||
.exp_expose_post:before {
|
||||
.exp_expose_post::before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 48px;
|
||||
background-color: rgba(183, 224, 240, 0.1) !important; }
|
||||
|
||||
.exp_expose:before, .exp_expose:after {
|
||||
.exp_expose::before, .exp_expose::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 48px;
|
||||
|
|
@ -819,7 +884,7 @@ nav li {
|
|||
-o-transition: height 0.5s ease;
|
||||
transition: height 0.5s ease; }
|
||||
|
||||
.print_body *[class^="din"] {
|
||||
.print_body [class^="din"] {
|
||||
background-color: white; }
|
||||
|
||||
.print_body {
|
||||
|
|
@ -946,8 +1011,8 @@ nav li {
|
|||
.demo__footer {
|
||||
width: 100%;
|
||||
padding: 16px 0;
|
||||
background-color: black;
|
||||
color: white; }
|
||||
background-color: #333333;
|
||||
color: #cccccc; }
|
||||
.demo__footer nav a {
|
||||
color: white; }
|
||||
|
||||
|
|
@ -955,40 +1020,45 @@ nav li {
|
|||
opacity: 1;
|
||||
width: 128px;
|
||||
height: auto;
|
||||
min-width: 128px;
|
||||
min-height: 128px;
|
||||
border-radius: 50%;
|
||||
background-color: #b7e0f0; }
|
||||
|
||||
.demo__flag {
|
||||
height: 40vh; }
|
||||
|
||||
.test li:after {
|
||||
.demo__credits {
|
||||
margin: 32px 0 8px 0; }
|
||||
|
||||
.test li::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 16px; }
|
||||
|
||||
.front_color_1 {
|
||||
color: #fad803; }
|
||||
.front_color_1:after {
|
||||
.front_color_1::after {
|
||||
background-color: #fad803; }
|
||||
|
||||
.front_color_2 {
|
||||
color: #d30a51; }
|
||||
.front_color_2:after {
|
||||
.front_color_2::after {
|
||||
background-color: #d30a51; }
|
||||
|
||||
.front_color_3 {
|
||||
color: #273f8b; }
|
||||
.front_color_3:after {
|
||||
.front_color_3::after {
|
||||
background-color: #273f8b; }
|
||||
|
||||
.front_color_4 {
|
||||
color: #b7e0f0; }
|
||||
.front_color_4:after {
|
||||
.front_color_4::after {
|
||||
background-color: #b7e0f0; }
|
||||
|
||||
.front_color_5 {
|
||||
color: #52bed1; }
|
||||
.front_color_5:after {
|
||||
.front_color_5::after {
|
||||
background-color: #52bed1; }
|
||||
|
||||
.back_color_1, .label_1 {
|
||||
|
|
|
|||
39
example.html
39
example.html
|
|
@ -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><form></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><input></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><input[type="button"]></code>. Es gibt allerdings auch ein eigenes Element <code><button></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><readonly></code> nur lesbar gemacht werden oder mittels <code><disabled></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><label></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><fieldset></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,8 +504,10 @@ 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">
|
||||
<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>
|
||||
|
|
@ -500,9 +515,10 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4</code></pre>
|
|||
<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>
|
||||
<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>
|
||||
<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
3
functions/_all.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@import "color";
|
||||
@import "shade";
|
||||
@import "tint";
|
||||
13
functions/_color.scss
Normal file
13
functions/_color.scss
Normal 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
24
functions/_shade.scss
Normal 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
24
functions/_tint.scss
Normal 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);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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
23
global/_default.scss
Normal 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
3
mixins/_all.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@import "clearflow";
|
||||
@import "color";
|
||||
@import "user_agent";
|
||||
25
mixins/_clearflow.scss
Normal file
25
mixins/_clearflow.scss
Normal 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
20
mixins/_color.scss
Normal 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
9
mixins/_user_agent.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
@mixin overrideUserAgent() {
|
||||
@if $no_agent_focus == true {
|
||||
@each $el in $basic_focus_map {
|
||||
#{$el}:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
}
|
||||
.wip {
|
||||
@extend %wip;
|
||||
&:before, &:after {
|
||||
&::before, &::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 48px;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
// ------------------------------------------------------------------------------
|
||||
|
||||
%paper {
|
||||
background-color: $bright_color;
|
||||
background-color: $brightest_color;
|
||||
}
|
||||
|
||||
$a4: ".dina4" 1.2cm 1.2cm 1.2cm 2.4cm;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
border-bottom: $cell_border;
|
||||
|
||||
&:hover {
|
||||
background-color: $light_color;
|
||||
background-color: $bright_color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue