demo.2
- restructured input files - sorted gulpfile and separated old stuff - next up are node module updates
This commit is contained in:
Stephan
parent
8bc8da74db
commit
ce6597b6d1
53 changed files with 216 additions and 285 deletions
|
|
@ -1,23 +0,0 @@
|
|||
/**
|
||||
* @description
|
||||
* Generates cross-browser-compatible output for a given element with its value.
|
||||
*
|
||||
* @author sthag
|
||||
*
|
||||
* @param values
|
||||
* @returns
|
||||
* -webkit-<name>: <values>
|
||||
* ...-<name>: <values>
|
||||
*
|
||||
* @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};
|
||||
}
|
||||
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
.query__goingLarge {
|
||||
@include goingLarge($screen_tiny) {};
|
||||
}
|
||||
|
||||
.query__goingSmall {
|
||||
@include goingSmall($screen_gigantic) {};
|
||||
}
|
||||
|
||||
.query__phoneUp {
|
||||
}
|
||||
|
||||
.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 {}
|
||||
}
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
// Custom extends and mixins
|
||||
// ------------------------------------------------------------------------------
|
||||
@import "mixins";
|
||||
@import "extends";
|
||||
|
||||
// Card module styles
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
%absolute_full {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card_body {
|
||||
height: 100%;
|
||||
.bkg_box {
|
||||
@extend %absolute_full;
|
||||
transition-duration: 800ms;
|
||||
overflow: hidden;
|
||||
vertical-align: top;
|
||||
z-index: -1;
|
||||
}
|
||||
.bkg_box > svg {
|
||||
position: relative;
|
||||
}
|
||||
.flex_wrap_center {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-moz-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
.flex_content {
|
||||
position: relative;
|
||||
padding: 64px 64px 24px 64px;
|
||||
border: 1px solid #FFF;
|
||||
background-color: #F5F5F5;
|
||||
z-index: 40;
|
||||
}
|
||||
h1 {
|
||||
margin: 16px 0;
|
||||
color: #1E1E1E;
|
||||
font-size: 24px;
|
||||
line-height: 1.4em;
|
||||
font-weight: normal;
|
||||
}
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
font-size: 12px;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
/* .full {
|
||||
position: absolute;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.mark {
|
||||
float: left;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
*/
|
||||
.marked {
|
||||
padding-left: 1em;
|
||||
text-indent: -1em;
|
||||
text-align: center;
|
||||
}
|
||||
.marked::before { content: "*\0000a0" }
|
||||
.decent { color: #666 }
|
||||
a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: #F4F9FA;
|
||||
background-color: #0C85FF;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
// Custom extends and mixins
|
||||
// ------------------------------------------------------------------------------
|
||||
@import "mixins";
|
||||
@import "extends";
|
||||
|
||||
// Editor module styles
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
%wip {
|
||||
border-right: $basic_space 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;
|
||||
}
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
// Custom extends and mixins
|
||||
// ------------------------------------------------------------------------------
|
||||
@import "mixins";
|
||||
@import "extends";
|
||||
|
||||
// Explanation module styles
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
%expose_after {
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 48px;
|
||||
background-color: rgba($delta_color, 0.1) !important;
|
||||
}
|
||||
}
|
||||
%expose_before {
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 48px;
|
||||
background-color: rgba($delta_color, 0.1) !important;
|
||||
}
|
||||
}
|
||||
%expose {
|
||||
&::before, &::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 48px;
|
||||
background-color: rgba($delta_color, 0.1) !important;
|
||||
}
|
||||
}
|
||||
%exp {
|
||||
}
|
||||
%exp_hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.exp_wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.exp_pop {
|
||||
@extend %exp_hidden !optional;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: $space_5;
|
||||
left: $space_5;
|
||||
padding: $half_space;
|
||||
border: 4px solid $basic_back_color;
|
||||
border-radius: 4px;
|
||||
background-color: $basic_back_color;
|
||||
pointer-events: none;
|
||||
}
|
||||
.exp_marker_pop {
|
||||
position: absolute;
|
||||
top: -$basic_size / 4 * 3;
|
||||
right: -$basic_size / 2;
|
||||
width: $basic_size;
|
||||
height: $basic_size;
|
||||
border: $tiny_space solid $basic_highlight_color;
|
||||
border-radius: $basic_size;
|
||||
color: $basic_highlight_color;
|
||||
background-color: $darkest_color;
|
||||
}
|
||||
|
||||
.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: $basic_space $basic_space * 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
.exp_help_btn {
|
||||
display: table;
|
||||
right: $double_space;
|
||||
bottom: $double_space;
|
||||
background-color: rgba($darkest_color, 0.4);
|
||||
&:hover {
|
||||
background-color: $brightest_color;
|
||||
> .span__solo {
|
||||
color: $darkest_color;
|
||||
}
|
||||
}
|
||||
.span__solo {
|
||||
display: table-cell;
|
||||
color: rgba($brightest_color, 0.8);
|
||||
font-family: $monospace_font_family;
|
||||
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);
|
||||
}
|
||||
|
|
@ -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_3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
.up {
|
||||
@include sprite($up);
|
||||
}
|
||||
|
|
@ -1,101 +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: 32px;
|
||||
$down-y: 0px;
|
||||
$down-offset-x: -32px;
|
||||
$down-offset-y: 0px;
|
||||
$down-width: 32px;
|
||||
$down-height: 32px;
|
||||
$down-total-width: 64px;
|
||||
$down-total-height: 64px;
|
||||
$down-image: 'sprites.png';
|
||||
$down: (32px, 0px, -32px, 0px, 32px, 32px, 64px, 64px, 'sprites.png', 'down', );
|
||||
$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: 64px;
|
||||
$up-total-height: 64px;
|
||||
$up-image: 'sprites.png';
|
||||
$up: (0px, 0px, 0px, 0px, 32px, 64px, 64px, 64px, 'sprites.png', 'up', );
|
||||
$spritesheet-width: 64px;
|
||||
$spritesheet-height: 64px;
|
||||
$spritesheet-image: 'sprites.png';
|
||||
$spritesheet-sprites: ($down, $up, );
|
||||
$spritesheet: (64px, 64px, 'sprites.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:
|
||||
// <div class="icon-home"></div>
|
||||
//
|
||||
// To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
|
||||
//
|
||||
// // CSS
|
||||
// .icon {
|
||||
// display: inline-block;
|
||||
// }
|
||||
//
|
||||
// // HTML
|
||||
// <i class="icon icon-home"></i>
|
||||
@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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,162 +0,0 @@
|
|||
nav {
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: $basic_space;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav__horizontal {
|
||||
ul {
|
||||
@extend .overflow;
|
||||
|
||||
ul {
|
||||
margin: $basic_space 0;
|
||||
}
|
||||
|
||||
li {
|
||||
@extend .float_space_left;
|
||||
margin-right: $basic_space;
|
||||
margin-bottom: 0;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav__right {
|
||||
float: right;
|
||||
margin-left: $basic_space;
|
||||
|
||||
.align_parent {
|
||||
margin-right: $basic_space * -1;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
position: relative;
|
||||
|
||||
&:first-child {
|
||||
padding-left: $basic_space * 2 + $tiny_space;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: $tiny_space;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: $brightest_color;
|
||||
margin: 0 $basic_space;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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: $basic_space 0;
|
||||
|
||||
ul {
|
||||
@extend .flex;
|
||||
margin: 0 $space_5;
|
||||
|
||||
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: 0;
|
||||
bottom: $double_space;
|
||||
|
||||
ul {
|
||||
margin: $basic_space 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.a_button_meta {
|
||||
// display: table-cell;
|
||||
display: inline-block;
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $basic_action_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header__page {
|
||||
|
||||
nav {
|
||||
@extend .nav__horizontal;
|
||||
|
||||
a {
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: rgba($basic_font_color, 0.2);
|
||||
color: $basic_font_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,128 +0,0 @@
|
|||
// Custom extends and mixins
|
||||
// ------------------------------------------------------------------------------
|
||||
@import "mixins";
|
||||
@import "extends";
|
||||
|
||||
// Print module styles
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
%paper {
|
||||
background-color: $brightest_color;
|
||||
}
|
||||
|
||||
$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: $basic_print_size;
|
||||
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_3 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
.table__link {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
table-layout: auto;
|
||||
|
||||
tbody {
|
||||
border-bottom: $cell_border;
|
||||
|
||||
&:hover {
|
||||
background-color: $bright_color;
|
||||
}
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.cell__icon {
|
||||
width: 48px;
|
||||
text-align: center;
|
||||
img {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
}
|
||||
|
||||
.cell__link {
|
||||
padding-right: $basic_space;
|
||||
padding-left: $basic_space;
|
||||
|
||||
&:hover {
|
||||
background-color: $foxtrot_color;
|
||||
a:first-child {
|
||||
display: none;
|
||||
}
|
||||
a:last-child {
|
||||
display: block;
|
||||
color: $basic_highlight_color;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a:last-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
th:last-child, .cell__date {
|
||||
width: 16%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cell__text {
|
||||
padding-right: $basic_space;
|
||||
padding-left: $basic_space;
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.shorten {
|
||||
@extend %short;
|
||||
max-height: 44px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue