New content
Renamed many variables New modules for special elements Added demo content
This commit is contained in:
Stephan Hagedorn
parent
933806cb72
commit
9b2f7260ad
19 changed files with 1010 additions and 1081 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -187,3 +187,4 @@ typings/
|
|||
# https://interaktionsweise.de/
|
||||
###################
|
||||
###################
|
||||
art/
|
||||
|
|
|
|||
97
_config.scss
97
_config.scss
|
|
@ -14,10 +14,42 @@ $size_1: $basic_size * 4;
|
|||
|
||||
$basic_line: 1;
|
||||
|
||||
$head_size_1: 3.1em;
|
||||
$head_size_2: 2.5em;
|
||||
$head_size_3: 1.8em;
|
||||
$head_size_4: 1.35em;
|
||||
// $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),
|
||||
// ),
|
||||
// );
|
||||
|
||||
// $head_size_1: 3.1em;
|
||||
// $head_size_2: 2.5em;
|
||||
// $head_size_3: 1.8em;
|
||||
// $head_size_4: 1.35em;
|
||||
|
||||
$text_size_1: 1em;
|
||||
$text_size_2: 20;
|
||||
|
|
@ -45,6 +77,15 @@ $basic_indent: 2em;
|
|||
// COLORS
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
$color_palette: (
|
||||
alpha: #fad803,
|
||||
bravo: #d30a51,
|
||||
charlie: #273f8b,
|
||||
delta: #b7e0f0,
|
||||
echo: #52bed1,
|
||||
foxtrot: #0c85ff
|
||||
);
|
||||
|
||||
$alpha_color: #fad803;
|
||||
$bravo_color: #d30a51;
|
||||
$charlie_color: #273f8b;
|
||||
|
|
@ -52,42 +93,44 @@ $delta_color: #b7e0f0;
|
|||
$echo_color: #52bed1;
|
||||
$foxtrot_color: #0c85ff;
|
||||
|
||||
$black: black !default;
|
||||
$white: white !default;
|
||||
$medium_gray: lighten($black, 50%) !default;
|
||||
$dark_color: black !default;
|
||||
$bright_color: white !default;
|
||||
$medium_color: lighten($dark_color, 50%) !default;
|
||||
|
||||
$default_front_color: $black !default;
|
||||
$default_back_color: $medium_gray !default;
|
||||
$default_front_color: $dark_color !default;
|
||||
$default_back_color: $medium_color !default;
|
||||
|
||||
$basic_font_color: $default_front_color;
|
||||
$basic_head_color: $default_front_color;
|
||||
|
||||
$basic_link_color: $echo_color;
|
||||
$basic_highlight_color: $white;
|
||||
$basic_highlight_color: $bright_color;
|
||||
$basic_action_color: $foxtrot_color;
|
||||
|
||||
$basic_back_color: $default_back_color;
|
||||
|
||||
$light_color: lighten($basic_back_color, 5%);
|
||||
$dark_color: darken($basic_back_color, 10%);
|
||||
$dark_color_color: darken($basic_back_color, 10%);
|
||||
|
||||
$basic_border_color: $default_front_color;
|
||||
|
||||
// default shadow colors
|
||||
// $shadow_color: fade-out($medium_gray, .5);
|
||||
// $shadow_color: fade-out($medium_color, .5);
|
||||
|
||||
|
||||
|
||||
// LAYOUT
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
$default_box_sizing: box-sizing !default;
|
||||
$default_box_sizing: border-box !default;
|
||||
$box_sizing: $default_box_sizing;
|
||||
|
||||
$z_top: 1000;
|
||||
|
||||
$basic_width: 96%;
|
||||
$width_2: 80%;
|
||||
$width_3: 60%;
|
||||
$width_4: 48%;
|
||||
$width_small: 80%;
|
||||
$width_medium: 60%;
|
||||
$width_large: 48%;
|
||||
|
||||
$default_space: 8px !default;
|
||||
$basic_space: $default_space;
|
||||
|
|
@ -98,14 +141,17 @@ $space_4: $basic_space * 8;
|
|||
$space_5: $basic_space * 16;
|
||||
$tiny_space: 1px !default;
|
||||
|
||||
$basic_corner: 4px;
|
||||
$basic_padding: calc(#{$basic_space} - 3px) $basic_space;
|
||||
$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;
|
||||
$cell_border: $tiny_space solid $dark_color_color;
|
||||
|
||||
$basic_aside_width: 20%;
|
||||
|
||||
|
|
@ -114,9 +160,9 @@ $basic_aside_width: 20%;
|
|||
// IO
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
$basic_io_font_color: darken($white, 10%);
|
||||
$basic_io_back_color: lighten($black, 25%);
|
||||
$basic_shadow: inset 0 1px 3px rgba($black, 0.06);
|
||||
$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);
|
||||
|
||||
|
||||
|
|
@ -129,7 +175,6 @@ $basic_timing: ease;
|
|||
|
||||
|
||||
|
||||
|
||||
// HARDWARE BREAKPOINTS
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
|
|
@ -263,8 +308,8 @@ $webkit_ms_support: -webkit- -ms- '';
|
|||
// $input_disabled_border: lighten($input_disabled, 50%);
|
||||
// $input_disabled_text: lighten($input_disabled, 50%);
|
||||
//
|
||||
// $form_field_back_color: $white;
|
||||
// $form_field_focus_color: $white;
|
||||
// $form_field_back_color: $bright_color;
|
||||
// $form_field_focus_color: $bright_color;
|
||||
// $form_field_fail_bkg: $alpha_color_juliet;
|
||||
|
||||
// $form_field_border: $charlie_gray;
|
||||
|
|
@ -277,7 +322,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: $white;
|
||||
// $inline_alert_text_color: $bright_color;
|
||||
|
||||
// Non-color defaults (currently not represented in the SG view)
|
||||
// ---------------------------------------------------------
|
||||
|
|
@ -298,7 +343,7 @@ $webkit_ms_support: -webkit- -ms- '';
|
|||
/////// Config defaults for buttons ///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// $button-color: $delta-color;
|
||||
// $button-text-color: $white;
|
||||
// $button-text-color: $bright_color;
|
||||
// $button-line-height: 32;
|
||||
// $button-border-radius: 3;
|
||||
// $button-padding: 20;
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@
|
|||
|
||||
//$default_font_family: #{'Roboto', 'Trebuchet MS', Helvetica, 'Source Sans', Arial, sans-serif, sans};
|
||||
|
||||
//$black: black !default;
|
||||
//$white: white !default;
|
||||
//$medium_gray: lighten($black, 50%) !default;
|
||||
//$dark_color: black !default;
|
||||
//$bright_color: white !default;
|
||||
//$medium_color: lighten($dark_color, 50%) !default;
|
||||
|
||||
//$default_back_color: lighten(black, 50%);
|
||||
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@
|
|||
// in dependency to other styles
|
||||
// Additional modules can be defined here
|
||||
// -----------------------------------------------------------------------------
|
||||
@import "modules/navigation/nav_module";
|
||||
@import "modules/tables/tables_module";
|
||||
@import "modules/card/card_module";
|
||||
@import "modules/editor/editor_module";
|
||||
|
|
@ -79,6 +80,11 @@
|
|||
|
||||
|
||||
|
||||
// Demonstration
|
||||
@import "basic/demo";
|
||||
|
||||
|
||||
|
||||
// Not yet sorted
|
||||
@import "basic/new";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,28 +1,27 @@
|
|||
// Clearing and floating
|
||||
// General layout attributes
|
||||
// ------------------------------------------------------------------------------
|
||||
%size_content {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
&::before,
|
||||
&::after {
|
||||
clear: both;
|
||||
%size_content_solo {
|
||||
@extend %size_content;
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: $box_sizing;
|
||||
}
|
||||
}
|
||||
|
||||
.float_left {
|
||||
float: left;
|
||||
margin-right: $space_3;
|
||||
%hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.overflow {
|
||||
overflow: auto;
|
||||
.magic {
|
||||
@extend %hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// General positioning attributes
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
.center_50 {
|
||||
margin-right: 25%;
|
||||
margin-left: 25%;
|
||||
|
|
@ -38,27 +37,41 @@
|
|||
margin-left: 0;
|
||||
}
|
||||
|
||||
%size_content {
|
||||
box-sizing: content-box;
|
||||
.height_basic {
|
||||
height: 1024px;
|
||||
}
|
||||
|
||||
%size_content_solo {
|
||||
@extend %size_content;
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: $box_sizing;
|
||||
|
||||
// Clearing and floating
|
||||
// ------------------------------------------------------------------------------
|
||||
.clear {
|
||||
clear: both;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.float_left {
|
||||
float: left;
|
||||
margin-right: $space_3;
|
||||
}
|
||||
|
||||
.overflow {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.x_long {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
|
||||
// Structure attributes
|
||||
// Positioned elements
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
%full_viewport {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
|
|
@ -68,32 +81,87 @@
|
|||
%full_parent {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
}
|
||||
|
||||
.pos_abs {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
// Fixed elements
|
||||
.pos_rel {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pos_fix {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.pos_bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
// Absolute elements
|
||||
.pos_full_view {
|
||||
@extend %full_viewport;
|
||||
background-color: rgba($alpha_color, .5);
|
||||
}
|
||||
|
||||
.pos_full_page {
|
||||
@extend %full_parent;
|
||||
background-color: rgba($charlie_color, .25);
|
||||
}
|
||||
|
||||
.hover_back_change {
|
||||
background-color: darken($basic_back_color, 10%);
|
||||
transition: background-color .2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: $basic_back_color;
|
||||
}
|
||||
}
|
||||
|
||||
.hover_full_view_change {
|
||||
@extend %full_viewport;
|
||||
z-index: $z_top;
|
||||
background-color: transparentize($dark_color, .5);
|
||||
transition: background-color .2s ease-in-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex_child {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Colors
|
||||
// ------------------------------------------------------------------------------
|
||||
.txt_light_color {
|
||||
color: darken($basic_back_color, 10%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Input
|
||||
// ------------------------------------------------------------------------------
|
||||
%default_button {
|
||||
display: inline-block;
|
||||
padding: $basic_padding;
|
||||
background-color: transparentize($basic_link_color, .8);
|
||||
border-radius: $basic_corner;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: rgba($basic_highlight_color, .1);
|
||||
color: $basic_highlight_color;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
79
basic/_demo.scss
Normal file
79
basic/_demo.scss
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
.demo__intro {
|
||||
@extend .sec__main_center;
|
||||
border-top-width: $border_width_8;
|
||||
border-top-style: solid;
|
||||
border-color: $basic_border_color;
|
||||
padding-top: $space_3;
|
||||
}
|
||||
|
||||
.demo__header {
|
||||
padding: $space_2;
|
||||
|
||||
nav {
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header__fancy {
|
||||
background-color: transparentize($bravo_color, .4);
|
||||
|
||||
nav {
|
||||
|
||||
a {
|
||||
background-color: transparentize($alpha_color, .4);
|
||||
color: $alpha_color;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: rgba($bright_color, .2);
|
||||
color: $bright_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header__fix {
|
||||
position: relative;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background-color: transparentize($charlie_color, .4);
|
||||
|
||||
nav {
|
||||
|
||||
a {
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: rgba($bright_color, .2);
|
||||
color: $bright_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.demo__footer {
|
||||
width: 100%;
|
||||
height: 128px;
|
||||
background-color: $dark_color;
|
||||
color: $bright_color;
|
||||
}
|
||||
|
||||
.demo__avatar {
|
||||
|
||||
img {
|
||||
opacity: 1;
|
||||
width: 128px;
|
||||
height: auto;
|
||||
border-radius: 50%;
|
||||
background-color: $delta_color;
|
||||
}
|
||||
}
|
||||
|
||||
.demo__flag {
|
||||
height: 40vh;
|
||||
}
|
||||
|
|
@ -14,7 +14,7 @@ p {
|
|||
}
|
||||
|
||||
.p__col_line {
|
||||
column-rule: $basic_border_width solid $black;
|
||||
column-rule: $basic_border_width solid $dark_color;
|
||||
}
|
||||
.p__col_2, .p__col_3 {
|
||||
@extend p;
|
||||
|
|
@ -38,7 +38,7 @@ hr {
|
|||
margin: $space_3 auto;
|
||||
border-width: $basic_border_width 0 0;
|
||||
border-style: solid;
|
||||
border-color: $black;
|
||||
border-color: $dark_color;
|
||||
}
|
||||
|
||||
.hr__hidden {
|
||||
|
|
@ -57,12 +57,13 @@ pre {
|
|||
}
|
||||
|
||||
.pre__code {
|
||||
border-color: rgba($white,.1);
|
||||
// overflow-x: scroll;
|
||||
border-color: rgba($bright_color,.1);
|
||||
border-style: dotted;
|
||||
border-width: 0 0 0 $border_width_4;
|
||||
border-radius: $basic_corner;
|
||||
padding: $basic_space;
|
||||
background-color: rgba($white,.1);
|
||||
background-color: rgba($bright_color,.1);
|
||||
code {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
|
@ -124,6 +125,36 @@ ul {
|
|||
}
|
||||
}
|
||||
|
||||
.list__link {
|
||||
li {
|
||||
margin-bottom: $tiny_space * 2;
|
||||
text-transform: uppercase;
|
||||
a {
|
||||
display: block;
|
||||
padding: $basic_padding;
|
||||
color: $basic_font_color;
|
||||
img {
|
||||
margin-right: $basic_space;
|
||||
padding-bottom: .2em;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $basic_action_color;
|
||||
color: $basic_highlight_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list__horizontal {
|
||||
overflow: auto;
|
||||
li {
|
||||
@extend .float_left;
|
||||
}
|
||||
}
|
||||
|
||||
// Embedded
|
||||
figure {
|
||||
margin: $space_2 $basic_indent;
|
||||
|
|
@ -146,39 +177,35 @@ div {
|
|||
|
||||
}
|
||||
|
||||
.box__screen {
|
||||
width: $basic_width;
|
||||
@media screen and (orientation: landscape) {
|
||||
@media (min-width: $screen_small) {
|
||||
width: $width_2;
|
||||
}
|
||||
@media (min-width: $screen_medium) {
|
||||
width: $width_3;
|
||||
}
|
||||
@media (min-width: $screen_large) {
|
||||
width: $width_4;
|
||||
}
|
||||
}
|
||||
@media screen and (orientation: portrait) {
|
||||
@media (min-width: $screen_small) {
|
||||
width: $width_2;
|
||||
}
|
||||
}
|
||||
margin: 0 auto;
|
||||
border-top-width: $border_width_8;
|
||||
border-top-style: solid;
|
||||
border-color: $basic_border_color;
|
||||
padding-top: $space_3;
|
||||
}
|
||||
|
||||
.box__info {
|
||||
padding: $space_2 $basic_indent;
|
||||
border-right: $basic_space solid rgba($echo_color, .6);
|
||||
background-color: rgba($echo_color, .1) !important;
|
||||
}
|
||||
|
||||
.box__main_indent {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.box__full_width {
|
||||
// position: relative;
|
||||
// overflow: hidden;
|
||||
// width: 100%;
|
||||
}
|
||||
|
||||
// Inline
|
||||
.box__inline_left {
|
||||
@extend .float_left;
|
||||
// padding: $basic_space / 2;
|
||||
}
|
||||
|
||||
// Space and placeholders
|
||||
.box__space {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.box__cube {
|
||||
float: left;
|
||||
display: table;
|
||||
width: $space_4;
|
||||
|
|
@ -192,21 +219,22 @@ div {
|
|||
.box__placeholder {
|
||||
width: 100%;
|
||||
height: $space_4;
|
||||
border: $border_width_4 solid rgba($black,.1);
|
||||
border: $border_width_4 solid rgba($dark_color,.1);
|
||||
border-radius: $basic_corner;
|
||||
padding: $basic_space;
|
||||
background-color: rgba($black,.1);
|
||||
background-color: rgba($dark_color,.1);
|
||||
svg {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.box__placeholder_bkg {
|
||||
width: 100%;
|
||||
height: $space_4;
|
||||
border: $border_width_4 solid rgba($black,.1);
|
||||
border: $border_width_4 solid rgba($dark_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($black,.1);
|
||||
background-color: rgba($dark_color,.1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,8 +37,8 @@ label {
|
|||
color: $basic_io_font_color;
|
||||
|
||||
&:hover {
|
||||
background-color: $black;
|
||||
color: $white;
|
||||
background-color: $dark_color;
|
||||
color: $bright_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ html {
|
|||
// -----------------------------------------------------------------------------
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
box-sizing: $box_sizing;
|
||||
font-family: $primary_font_family;
|
||||
font-size: $basic_size;
|
||||
|
|
@ -24,6 +25,11 @@ body {
|
|||
::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
&:hover {
|
||||
.trigger__hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
article {
|
||||
|
|
@ -34,14 +40,39 @@ section {
|
|||
|
||||
}
|
||||
|
||||
aside.right + section {
|
||||
margin-right: calc(#{$basic_aside_width} + #{$basic_space});
|
||||
.sec__main_center {
|
||||
width: $basic_width;
|
||||
@media screen and (orientation: landscape) {
|
||||
@media (min-width: $screen_small) {
|
||||
width: $width_small;
|
||||
}
|
||||
@media (min-width: $screen_medium) {
|
||||
width: $width_medium;
|
||||
}
|
||||
@media (min-width: $screen_large) {
|
||||
width: $width_large;
|
||||
}
|
||||
}
|
||||
@media screen and (orientation: portrait) {
|
||||
@media (min-width: $screen_small) {
|
||||
width: $width_small;
|
||||
}
|
||||
}
|
||||
margin: 0 auto;
|
||||
padding-top: $space_3;
|
||||
}
|
||||
|
||||
aside.left + section {
|
||||
aside {
|
||||
&.right + section {
|
||||
margin-right: calc(#{$basic_aside_width} + #{$basic_space});
|
||||
}
|
||||
|
||||
&.left + section {
|
||||
margin-left: calc(#{$basic_aside_width} + #{$basic_space});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
nav {
|
||||
|
||||
}
|
||||
|
|
@ -63,6 +94,10 @@ header {
|
|||
|
||||
}
|
||||
|
||||
.header__page {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
footer {
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
a {
|
||||
color: $basic_link_color;
|
||||
// color: lighten($basic_action_color, 20%);
|
||||
// color: lighten($basic_action_color, 20%);
|
||||
text-decoration: none;
|
||||
|
||||
&:active,
|
||||
|
|
@ -29,6 +29,18 @@ a {
|
|||
}
|
||||
}
|
||||
|
||||
.a__button {
|
||||
@extend %default_button;
|
||||
}
|
||||
|
||||
.a__button_border {
|
||||
@extend %default_button;
|
||||
padding: $wide_padding;
|
||||
background-color: transparent;
|
||||
color: $basic_font_color;
|
||||
border: $cell_border;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Other elements
|
||||
|
|
@ -76,7 +88,7 @@ time {
|
|||
code {
|
||||
@extend %basic_mono;
|
||||
color: lighten($basic_font_color, 12%);
|
||||
background-color: rgba($white,.1);
|
||||
background-color: rgba($bright_color,.1);
|
||||
}
|
||||
.code__solo {
|
||||
@extend %basic_mono;
|
||||
|
|
@ -106,15 +118,15 @@ mark {
|
|||
}
|
||||
.mark__cursor {
|
||||
color: $basic_highlight_color;
|
||||
background-color: $black;
|
||||
background-color: $dark_color;
|
||||
}
|
||||
::-moz-selection {
|
||||
color: $basic_highlight_color;
|
||||
background-color: $black;
|
||||
background-color: $dark_color;
|
||||
}
|
||||
::selection {
|
||||
color: $basic_highlight_color;
|
||||
background-color: $black;
|
||||
background-color: $dark_color;
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
|
|||
57
code/functions.js
Normal file
57
code/functions.js
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
function setup() {
|
||||
if($('#js_tph').length && full_view_hover) {
|
||||
// $('body').prepend("<div id=\"js_tph\" class=\"trigger__hover hover_full_view_change\"></div>");
|
||||
$('#js_tph').addClass("hover_full_view_change");
|
||||
}
|
||||
}
|
||||
|
||||
// get document coordinates of the element
|
||||
function getCoords(elem) {
|
||||
let box = elem.getBoundingClientRect();
|
||||
|
||||
return {
|
||||
top: box.top + pageYOffset,
|
||||
left: box.left + pageXOffset
|
||||
};
|
||||
}
|
||||
|
||||
// https://stackoverflow.com/a/488073/1444149
|
||||
function Utils() {
|
||||
|
||||
}
|
||||
|
||||
Utils.prototype = {
|
||||
constructor: Utils,
|
||||
isElementInView: function (element, fullyInView) {
|
||||
var pageTop = $(window).scrollTop();
|
||||
var pageBottom = pageTop + $(window).height();
|
||||
var elementTop = $(element).offset().top;
|
||||
var elementBottom = elementTop + $(element).height();
|
||||
|
||||
if (fullyInView === true) {
|
||||
return ((pageTop < elementTop) && (pageBottom > elementBottom));
|
||||
} else {
|
||||
return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var Utils = new Utils();
|
||||
|
||||
// TEST
|
||||
|
||||
function scrollNav() {
|
||||
$('.nav a').click(function(){
|
||||
//Toggle Class
|
||||
$(".active").removeClass("active");
|
||||
$(this).closest('li').addClass("active");
|
||||
var theClass = $(this).attr("class");
|
||||
$('.'+theClass).parent('li').addClass('active');
|
||||
//Animate
|
||||
$('html, body').stop().animate({
|
||||
scrollTop: $( $(this).attr('href') ).offset().top - 160
|
||||
}, 400);
|
||||
return false;
|
||||
});
|
||||
$('.scrollTop a').scrollTop();
|
||||
}
|
||||
12
code/variables.js
Normal file
12
code/variables.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
|
||||
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
|
||||
|
||||
var full_view_hover = true;
|
||||
|
||||
var doc_pos_y = 0;
|
||||
var basic_ease = 600;
|
||||
var scroll_y_margin = h;
|
||||
|
||||
|
||||
// TEST
|
||||
// var fixed_containers = [];
|
||||
5
code/vendor/jq-sticky-anything.min.js
vendored
Normal file
5
code/vendor/jq-sticky-anything.min.js
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
/**
|
||||
* @preserve Sticky Anything 2.0.1 | @senff | GPL2 Licensed
|
||||
*/
|
||||
|
||||
!function(a){function b(b,c,d,e,f,g,h){$listenerElement=a(".sticky-element-active");var i=$listenerElement.offset();if(orgElementTop=i.top,f){var j=a(f).offset();pushElementTop=j.top}var k=window,l="inner";if("innerWidth"in window||(l="client",k=document.documentElement||document.body),viewport=k[l+"Width"],a(window).scrollTop()>=orgElementTop-b&&viewport>=c&&viewport<=d){coordsOrgElement=$listenerElement.offset(),leftOrgElement=coordsOrgElement.left,widthPlaceholder=$listenerElement[0].getBoundingClientRect().width,widthPlaceholder||(widthPlaceholder=$listenerElement.css("width")),heightPlaceholder=$listenerElement[0].getBoundingClientRect().height,heightPlaceholder||(heightPlaceholder=$listenerElement.css("height")),widthSticky=a(".sticky-element-original").css("width"),"0px"==widthSticky&&(widthSticky=a(".sticky-element-original")[0].getBoundingClientRect().width),heightSticky=a(".sticky-element-original").height(),paddingOrgElement=[a(".sticky-element-original").css("padding-top"),a(".sticky-element-original").css("padding-right"),a(".sticky-element-original").css("padding-bottom"),a(".sticky-element-original").css("padding-left")],paddingSticky=paddingOrgElement[0]+" "+paddingOrgElement[1]+" "+paddingOrgElement[2]+" "+paddingOrgElement[3],marginOrgElement=[$listenerElement.css("margin-top"),$listenerElement.css("margin-right"),$listenerElement.css("margin-bottom"),$listenerElement.css("margin-left")],marginPlaceholder=marginOrgElement[0]+" "+marginOrgElement[1]+" "+marginOrgElement[2]+" "+marginOrgElement[3],assignedStyles="";for(var m in g)"inline"==g[m]?assignedStyles+=m+":inline-block; ":assignedStyles+=m+":"+g[m]+"; ";elementHeight=0,heightPlaceholder<1?elementHeight=a(".sticky-element-cloned").outerHeight():elementHeight=a(".sticky-element-original").outerHeight(),f&&a(window).scrollTop()>pushElementTop-b-elementHeight?stickyTopMargin=pushElementTop-b-elementHeight-a(window).scrollTop():stickyTopMargin=0,assignedStyles+="width:"+widthPlaceholder+"px; height:"+heightPlaceholder+"px; margin:"+marginPlaceholder+";",a(".sticky-element-original").removeClass("sticky-element-not-sticky").addClass("sticky-element-sticky").removeClass("sticky-element-active").css("position","fixed").css("left",leftOrgElement+"px").css("top",b+"px").css("width",widthSticky).css("margin-left",0).css("padding",paddingSticky).css("margin-top",stickyTopMargin).css("z-index",e),a(".sticky-element-placeholder").hasClass("sticky-element-active")||a(".sticky-element-placeholder").addClass("sticky-element-active").attr("style",assignedStyles)}else a(".sticky-element-original").addClass("sticky-element-not-sticky").removeClass("sticky-element-sticky").addClass("sticky-element-active").attr("style",h),a(".sticky-element-placeholder").hasClass("sticky-element-active")&&a(".sticky-element-placeholder").removeClass("sticky-element-active").removeAttr("style").css("width","0").css("height","0").css("margin","0").css("padding","0")}function c(){a(".sticky-element-original").addClass("sticky-element-active").before('<div class="sticky-element-placeholder" style="width:0; height:0; margin:0; padding:0; visibility:hidden;"></div>')}function d(a){return o={},o.display=a.css("display"),o.float=a.css("float"),o.flex=a.css("flex"),o["box-sizing"]=a.css("box-sizing"),o.clear=a.css("clear"),o.overflow=a.css("overflow"),o.transform=a.css("transform"),o}a.fn.stickThis=function(e){var f=a.extend({top:0,minscreenwidth:0,maxscreenwidth:99999,zindex:1,debugmode:!1,pushup:""},e),g=a(this).length,h=a(f.pushup).length;return h<1?(1==f.debugmode&&f.pushup&&console.error('STICKY ANYTHING DEBUG: There are no elements with the selector/class/ID you selected for the Push-up element ("'+f.pushup+'").'),f.pushup=""):h>1&&(1==f.debugmode&&console.error("STICKY ANYTHING DEBUG: There are "+h+' elements on the page with the selector/class/ID you selected for the push-up element ("'+f.pushup+'"). You can select only ONE element to push the sticky element up.'),f.pushup=""),g<1?1==f.debugmode&&console.error('STICKY ANYTHING DEBUG: There are no elements with the selector/class/ID you selected for the sticky element ("'+this.selector+'").'):g>1?1==f.debugmode&&console.error("STICKY ANYTHING DEBUG: There There are "+h+' elements with the selector/class/ID you selected for the sticky element ("'+this.selector+'"). You can only make ONE element sticky.'):(a(this).addClass("sticky-element-original").addClass("sticky-element-not-sticky"),orgAssignedStyles=d(a(this)),orgInlineStyles=a(".sticky-element-original").attr("style"),null==orgInlineStyles&&(orgInlineStyles=""),c(),checkElement=setInterval(function(){b(f.top,f.minscreenwidth,f.maxscreenwidth,f.zindex,f.pushup,orgAssignedStyles,orgInlineStyles)},10)),this}}(jQuery);
|
||||
894
example.css
894
example.css
|
|
@ -1,810 +1,90 @@
|
|||
@charset "UTF-8";
|
||||
/*
|
||||
* # TABLE OF CONTENTS
|
||||
*
|
||||
* - Reset
|
||||
* - Configuration
|
||||
* - Special modules
|
||||
* - Basic styles
|
||||
* - Common
|
||||
* - Typography
|
||||
*
|
||||
* - Sections
|
||||
* - Grouping
|
||||
* - Textlevel
|
||||
* - Embedded
|
||||
* - Tables
|
||||
* - Interactive
|
||||
* - Modules
|
||||
*
|
||||
*/
|
||||
@import url(other/normalize.css);
|
||||
/**
|
||||
* @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)
|
||||
*/
|
||||
.clear {
|
||||
clear: both; }
|
||||
.clear::before, .clear::after {
|
||||
clear: both; }
|
||||
|
||||
.float_left {
|
||||
float: left;
|
||||
margin-right: 32px; }
|
||||
|
||||
.overflow {
|
||||
overflow: auto; }
|
||||
|
||||
.center_50 {
|
||||
margin-right: 25%;
|
||||
margin-left: 25%; }
|
||||
|
||||
.center_25 {
|
||||
margin-right: 37.5%;
|
||||
margin-left: 37.5%; }
|
||||
|
||||
.width_full {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
margin-left: 0; }
|
||||
|
||||
.pos_full_view {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh; }
|
||||
|
||||
.pos_rel {
|
||||
position: relative; }
|
||||
|
||||
.pos_fix {
|
||||
position: fixed; }
|
||||
|
||||
.pos_bottom {
|
||||
bottom: 0; }
|
||||
|
||||
.pos_full_view {
|
||||
background-color: rgba(250, 216, 3, 0.5); }
|
||||
|
||||
.hover_back_change {
|
||||
background-color: #666666;
|
||||
transition: background-color .2s ease-in-out; }
|
||||
.hover_back_change:hover {
|
||||
background-color: gray; }
|
||||
|
||||
.span__solo, h6, p, .p__col_2, .p__col_3, caption, li, dt, dd, figcaption, th, td, legend, label {
|
||||
font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans;
|
||||
font-size: 1em;
|
||||
line-height: 1.5; }
|
||||
|
||||
pre, code, .code__solo {
|
||||
font-family: Courier New, monospace;
|
||||
font-size: 1em;
|
||||
line-height: 1.5; }
|
||||
|
||||
.print_body *[class^="din"] p, .print_body *[class^="din"] .p__col_2, .print_body *[class^="din"] .p__col_3, .print_body *[class^="din"] caption {
|
||||
font-family: Courier New, monospace;
|
||||
font-size: 1em;
|
||||
line-height: 1.5; }
|
||||
|
||||
h1, .print_body .page_date, .print_body .page_no {
|
||||
font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans;
|
||||
font-size: 3.1em;
|
||||
font-weight: 300;
|
||||
line-height: 1.5; }
|
||||
|
||||
h2 {
|
||||
font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans;
|
||||
font-size: 2.5em;
|
||||
font-weight: 300;
|
||||
line-height: 1.5; }
|
||||
|
||||
h3, h4 {
|
||||
font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans;
|
||||
font-size: 1.8em;
|
||||
font-weight: 300;
|
||||
line-height: 1.5; }
|
||||
|
||||
h5 {
|
||||
font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans;
|
||||
font-size: 1.35em;
|
||||
font-weight: 300;
|
||||
line-height: 1.5; }
|
||||
|
||||
.span__solo {
|
||||
color: black; }
|
||||
|
||||
.table-link_list .cell_text .shorten {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis; }
|
||||
|
||||
.txt_center {
|
||||
text-align: center !important; }
|
||||
|
||||
.txt_right {
|
||||
text-align: right !important; }
|
||||
|
||||
.txt_left {
|
||||
text-align: left !important; }
|
||||
|
||||
html {
|
||||
height: 100%; }
|
||||
|
||||
body {
|
||||
box-sizing: box-sizing;
|
||||
font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans;
|
||||
font-size: 17px;
|
||||
line-height: 1;
|
||||
color: black;
|
||||
background-color: gray; }
|
||||
body *,
|
||||
body ::before,
|
||||
body ::after {
|
||||
box-sizing: inherit; }
|
||||
|
||||
aside.right + section {
|
||||
margin-right: calc(20% + 8px); }
|
||||
|
||||
aside.left + section {
|
||||
margin-left: calc(20% + 8px); }
|
||||
|
||||
aside {
|
||||
width: 20%; }
|
||||
aside.left {
|
||||
float: left; }
|
||||
aside.right {
|
||||
float: right; }
|
||||
aside *:first-child {
|
||||
margin-top: 0; }
|
||||
|
||||
h1 {
|
||||
margin: 128px 0 32px; }
|
||||
|
||||
h2 {
|
||||
margin: 64px 0 32px; }
|
||||
|
||||
h3 {
|
||||
margin: 16px 0 16px;
|
||||
text-transform: uppercase; }
|
||||
|
||||
h4 {
|
||||
margin: 16px 0 16px;
|
||||
text-transform: none; }
|
||||
|
||||
h5 {
|
||||
margin: 16px 0 8px;
|
||||
text-transform: none; }
|
||||
|
||||
h6 {
|
||||
margin: 8px 0;
|
||||
text-transform: none;
|
||||
font-weight: bold; }
|
||||
|
||||
p, .p__col_2, .p__col_3, caption {
|
||||
margin: 8px 0;
|
||||
color: black; }
|
||||
p code, .p__col_2 code, .p__col_3 code, caption code {
|
||||
padding: 1px 4px;
|
||||
font-size: 1em;
|
||||
line-height: 1; }
|
||||
|
||||
.p__col_line {
|
||||
column-rule: 1px solid black; }
|
||||
|
||||
.p__col_2 {
|
||||
column-count: 2;
|
||||
column-gap: 32px; }
|
||||
|
||||
.p__col_3 {
|
||||
column-count: 3;
|
||||
column-gap: 64px; }
|
||||
|
||||
hr, .hr__hidden, .hr__dotted {
|
||||
margin: 32px auto;
|
||||
border-width: 1px 0 0;
|
||||
border-style: solid;
|
||||
border-color: black; }
|
||||
|
||||
.hr__hidden {
|
||||
border-color: transparent; }
|
||||
|
||||
.hr__dotted {
|
||||
border-style: dotted; }
|
||||
|
||||
.pre__code {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
border-style: dotted;
|
||||
border-width: 0 0 0 4px;
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
background-color: rgba(255, 255, 255, 0.1); }
|
||||
.pre__code code {
|
||||
background-color: transparent; }
|
||||
|
||||
blockquote {
|
||||
margin: 8px 2em; }
|
||||
|
||||
.quote__mark p::before, .quote__mark .p__col_2::before, .quote__mark .p__col_3::before, .quote__mark caption::before {
|
||||
content: "\201E \0020"; }
|
||||
.quote__mark p::after, .quote__mark .p__col_2::after, .quote__mark .p__col_3::after, .quote__mark caption::after {
|
||||
content: "\201C \0020"; }
|
||||
.quote__mark .quote__source::before, .quote__mark .quote__source::after {
|
||||
content: ""; }
|
||||
|
||||
dl, ul, ol {
|
||||
margin: 16px 0 8px; }
|
||||
|
||||
ul, ol {
|
||||
padding-left: 2em; }
|
||||
|
||||
li, dt, dd {
|
||||
color: black; }
|
||||
|
||||
dd {
|
||||
margin-left: 2em; }
|
||||
|
||||
ul li {
|
||||
list-style: square; }
|
||||
|
||||
.list__dash li {
|
||||
list-style: none;
|
||||
position: relative; }
|
||||
.list__dash li:before {
|
||||
content: "_";
|
||||
position: absolute;
|
||||
left: -1em; }
|
||||
|
||||
figure {
|
||||
margin: 16px 2em; }
|
||||
|
||||
.box__screen {
|
||||
width: 96%;
|
||||
margin: 0 auto;
|
||||
border-top-width: 8px;
|
||||
border-top-style: solid;
|
||||
border-color: black;
|
||||
padding-top: 32px; }
|
||||
@media screen and (orientation: landscape) and (min-width: 1024px) {
|
||||
.box__screen {
|
||||
width: 80%; } }
|
||||
@media screen and (orientation: landscape) and (min-width: 1280px) {
|
||||
.box__screen {
|
||||
width: 60%; } }
|
||||
@media screen and (orientation: landscape) and (min-width: 1920px) {
|
||||
.box__screen {
|
||||
width: 48%; } }
|
||||
|
||||
@media screen and (orientation: portrait) and (min-width: 1024px) {
|
||||
.box__screen {
|
||||
width: 80%; } }
|
||||
|
||||
.box__info {
|
||||
padding: 16px 2em;
|
||||
border-right: 8px solid rgba(82, 190, 209, 0.6);
|
||||
background-color: rgba(82, 190, 209, 0.1) !important; }
|
||||
|
||||
.box__space {
|
||||
float: left;
|
||||
display: table;
|
||||
width: 64px;
|
||||
text-align: center;
|
||||
vertical-align: middle; }
|
||||
.box__space span {
|
||||
display: table-cell; }
|
||||
|
||||
.box__placeholder {
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
border: 4px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
background-color: rgba(0, 0, 0, 0.1); }
|
||||
.box__placeholder svg {
|
||||
vertical-align: top; }
|
||||
|
||||
.box__placeholder_bkg {
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
border: 4px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
/*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(0, 0, 0, 0.1); }
|
||||
|
||||
a {
|
||||
color: #52bed1;
|
||||
text-decoration: none; }
|
||||
a:active, a:focus, a:hover {
|
||||
color: white; }
|
||||
|
||||
.a__line {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: dotted;
|
||||
border-color: black;
|
||||
background-color: transparent;
|
||||
color: black;
|
||||
transition: color 150ms ease; }
|
||||
.a__line:active, .a__line:focus, .a__line:hover {
|
||||
background-color: #0c85ff;
|
||||
color: white; }
|
||||
|
||||
i, em {
|
||||
font-style: italic; }
|
||||
|
||||
b, strong {
|
||||
font-weight: 500; }
|
||||
|
||||
cite {
|
||||
font-style: italic; }
|
||||
|
||||
code {
|
||||
color: #1f1f1f;
|
||||
background-color: rgba(255, 255, 255, 0.1); }
|
||||
|
||||
.code__solo {
|
||||
padding: 1px 4px;
|
||||
color: black; }
|
||||
|
||||
mark {
|
||||
background-color: #fad803; }
|
||||
|
||||
.mark__cursor {
|
||||
color: white;
|
||||
background-color: black; }
|
||||
|
||||
::-moz-selection {
|
||||
color: white;
|
||||
background-color: black; }
|
||||
|
||||
::selection {
|
||||
color: white;
|
||||
background-color: black; }
|
||||
|
||||
img {
|
||||
vertical-align: top; }
|
||||
|
||||
table {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid black;
|
||||
border-collapse: collapse; }
|
||||
|
||||
th, td {
|
||||
padding: 4px; }
|
||||
|
||||
th {
|
||||
border: 1px solid black;
|
||||
text-align: left; }
|
||||
|
||||
.precol {
|
||||
border-right: 1px solid black; }
|
||||
|
||||
td {
|
||||
border-right: 1px solid #666666;
|
||||
border-bottom: 1px solid #666666; }
|
||||
|
||||
td:last-child {
|
||||
border-right: 0; }
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: 0; }
|
||||
|
||||
tfoot tr:first-child td {
|
||||
border-top: 1px solid black; }
|
||||
|
||||
.table_blank {
|
||||
border: 1px solid transparent; }
|
||||
.table_blank th, .table_blank td {
|
||||
border: 1px solid transparent; }
|
||||
|
||||
.table_free {
|
||||
border: 1px solid transparent; }
|
||||
|
||||
.table_stripe td {
|
||||
border-top: 0;
|
||||
border-bottom: 0; }
|
||||
.table_stripe tr:nth-child(even) td {
|
||||
background-color: #8c8c8c; }
|
||||
|
||||
.table_fix {
|
||||
table-layout: fixed; }
|
||||
|
||||
caption {
|
||||
padding: 4px 0;
|
||||
border: 1px dotted black;
|
||||
text-align: center; }
|
||||
|
||||
fieldset {
|
||||
margin: 8px 0;
|
||||
border: 1px solid black; }
|
||||
|
||||
legend {
|
||||
padding: 0 4px; }
|
||||
|
||||
.input_default label {
|
||||
display: table;
|
||||
margin: 4px 0; }
|
||||
.input_default label input {
|
||||
display: table-cell;
|
||||
margin-left: 8px;
|
||||
padding: 4px 5px;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
background-color: #404040;
|
||||
color: #e6e6e6; }
|
||||
.input_default label input:hover {
|
||||
background-color: black;
|
||||
color: white; }
|
||||
|
||||
.table-link_list {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
table-layout: auto; }
|
||||
.table-link_list tbody {
|
||||
border-bottom: 1px solid #666666; }
|
||||
.table-link_list tbody:hover {
|
||||
background-color: #8c8c8c; }
|
||||
.table-link_list th, .table-link_list td {
|
||||
border: 0; }
|
||||
.table-link_list .cell_icon {
|
||||
width: 48px;
|
||||
text-align: center; }
|
||||
.table-link_list .cell_icon img {
|
||||
vertical-align: text-top; }
|
||||
.table-link_list .cell_link {
|
||||
padding-right: 8px;
|
||||
padding-left: 8px; }
|
||||
.table-link_list .cell_link:hover {
|
||||
background-color: #0c85ff; }
|
||||
.table-link_list .cell_link a {
|
||||
display: block; }
|
||||
.table-link_list .cell_link .link_url {
|
||||
display: none; }
|
||||
.table-link_list .cell_link:hover .link_url {
|
||||
display: block;
|
||||
color: white; }
|
||||
.table-link_list .cell_link:hover .link_text {
|
||||
display: none; }
|
||||
.table-link_list .cell_date {
|
||||
width: 12%;
|
||||
text-align: center; }
|
||||
.table-link_list .cell_text {
|
||||
padding-right: 8px;
|
||||
padding-left: 8px; }
|
||||
.table-link_list .cell_text div {
|
||||
width: 100%; }
|
||||
.table-link_list .cell_text .shorten {
|
||||
max-height: 44px; }
|
||||
|
||||
.card_body .bkg_box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
|
||||
.card_body {
|
||||
height: 100%;
|
||||
/* .full {
|
||||
position: absolute;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.mark {
|
||||
float: left;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
*/ }
|
||||
.card_body .bkg_box {
|
||||
transition-duration: 800ms;
|
||||
overflow: hidden;
|
||||
vertical-align: top;
|
||||
z-index: -1; }
|
||||
.card_body .bkg_box > svg {
|
||||
position: relative; }
|
||||
.card_body .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%; }
|
||||
.card_body .flex_content {
|
||||
position: relative;
|
||||
padding: 64px 64px 24px 64px;
|
||||
border: 1px solid #FFF;
|
||||
background-color: #F5F5F5;
|
||||
z-index: 40; }
|
||||
.card_body h1 {
|
||||
margin: 16px 0;
|
||||
color: #1E1E1E;
|
||||
font-size: 24px;
|
||||
line-height: 1.4em;
|
||||
font-weight: normal; }
|
||||
.card_body p, .card_body .p__col_2, .card_body .p__col_3, .card_body caption {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
font-size: 12px;
|
||||
line-height: 1.4em; }
|
||||
.card_body .marked {
|
||||
padding-left: 1em;
|
||||
text-indent: -1em;
|
||||
text-align: center; }
|
||||
.card_body .marked:before {
|
||||
content: "* "; }
|
||||
.card_body .decent {
|
||||
color: #666; }
|
||||
.card_body a {
|
||||
color: #000;
|
||||
text-decoration: none; }
|
||||
.card_body a:hover {
|
||||
color: #F4F9FA;
|
||||
background-color: #0C85FF;
|
||||
text-decoration: none; }
|
||||
|
||||
.wip, .wip_txt {
|
||||
border-right: 8px solid rgba(220, 20, 60, 0.8);
|
||||
background-color: rgba(220, 20, 60, 0.1) !important; }
|
||||
|
||||
.wip:before, .wip:after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 48px; }
|
||||
|
||||
.exp_expose_pre:after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 48px;
|
||||
background-color: rgba(183, 224, 240, 0.1) !important; }
|
||||
|
||||
.exp_expose_post:before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 48px;
|
||||
background-color: rgba(183, 224, 240, 0.1) !important; }
|
||||
|
||||
.exp_expose:before, .exp_expose:after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 48px;
|
||||
background-color: rgba(183, 224, 240, 0.1) !important; }
|
||||
|
||||
.exp_pop {
|
||||
display: none; }
|
||||
|
||||
.exp_wrap {
|
||||
position: relative; }
|
||||
|
||||
.exp_pop {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: 128px;
|
||||
left: 128px;
|
||||
padding: 4px;
|
||||
border: 4px solid gray;
|
||||
border-radius: 4px;
|
||||
background-color: gray;
|
||||
pointer-events: none; }
|
||||
|
||||
.exp_marker_pop {
|
||||
position: absolute;
|
||||
top: -12.75px;
|
||||
right: -8.5px;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
border: 1px solid white;
|
||||
border-radius: 17px;
|
||||
color: white;
|
||||
background-color: black; }
|
||||
|
||||
.exp_overlay_btn {
|
||||
position: fixed;
|
||||
width: 3em;
|
||||
height: 2em;
|
||||
cursor: pointer; }
|
||||
|
||||
.exp_help_btn {
|
||||
display: table;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
background-color: rgba(0, 0, 0, 0.4); }
|
||||
.exp_help_btn:hover {
|
||||
background-color: white; }
|
||||
.exp_help_btn:hover > .span__solo {
|
||||
color: black; }
|
||||
.exp_help_btn .span__solo {
|
||||
display: table-cell;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-family: Courier New, monospace;
|
||||
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(183, 224, 240, 0.1) !important;
|
||||
-webkit-transition: height 0.5s ease;
|
||||
-ms-transition: height 0.5s ease;
|
||||
-moz-transition: height 0.5s ease;
|
||||
-o-transition: height 0.5s ease;
|
||||
transition: height 0.5s ease; }
|
||||
|
||||
.print_body *[class^="din"] {
|
||||
background-color: white; }
|
||||
|
||||
.print_body {
|
||||
font-size: 10pt;
|
||||
margin: 10vh 20vw; }
|
||||
@page {
|
||||
.print_body {
|
||||
size: A4;
|
||||
margin: 1.2cm; } }
|
||||
@page :first {
|
||||
.print_body {
|
||||
size: A4;
|
||||
margin: 0; } }
|
||||
.print_body .dina4 {
|
||||
padding-top: 1.2cm;
|
||||
padding-right: 1.2cm;
|
||||
padding-bottom: 1.2cm;
|
||||
padding-left: 2.4cm; }
|
||||
.print_body .dina4 .page_head, .print_body .dina4 .page_foot {
|
||||
right: 1.2cm;
|
||||
left: 2.4cm; }
|
||||
.print_body .dina4 .page_head {
|
||||
top: 1.2cm; }
|
||||
.print_body .dina4 .page_foot {
|
||||
bottom: 1.2cm; }
|
||||
.print_body .dina5 {
|
||||
padding-top: 0;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: 1.2cm; }
|
||||
.print_body .dina5 .page_head, .print_body .dina5 .page_foot {
|
||||
right: 0;
|
||||
left: 1.2cm; }
|
||||
.print_body .dina5 .page_head {
|
||||
top: 0; }
|
||||
.print_body .dina5 .page_foot {
|
||||
bottom: 0; }
|
||||
.print_body .dina6 {
|
||||
padding-top: 0;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: 1.2cm; }
|
||||
.print_body .dina6 .page_head, .print_body .dina6 .page_foot {
|
||||
right: 0;
|
||||
left: 1.2cm; }
|
||||
.print_body .dina6 .page_head {
|
||||
top: 0; }
|
||||
.print_body .dina6 .page_foot {
|
||||
bottom: 0; }
|
||||
.print_body *[class^="din"] {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
margin: 32px auto; }
|
||||
.print_body *[class^="din"] .page_head, .print_body *[class^="din"] .page_foot {
|
||||
position: absolute; }
|
||||
.print_body *[class^="din"] .page_head {
|
||||
page: cover; }
|
||||
.print_body *[class^="din"] .page_foot {
|
||||
display: flex;
|
||||
flex-direction: row; }
|
||||
.print_body *[class^="din"] .page_foot *:last-child {
|
||||
margin-bottom: 0; }
|
||||
.print_body *[class^="din"] .page_foot p, .print_body *[class^="din"] .page_foot .p__col_2, .print_body *[class^="din"] .page_foot .p__col_3, .print_body *[class^="din"] .page_foot caption {
|
||||
flex: 1 0 auto;
|
||||
margin: 0;
|
||||
font-size: 8pt;
|
||||
line-height: 10pt;
|
||||
text-align: center; }
|
||||
.print_body *[class^="din"] .page_foot .page_no {
|
||||
flex: 1 0 auto;
|
||||
font-size: 20pt;
|
||||
line-height: 1;
|
||||
text-align: right; }
|
||||
.print_body *[class^="din"] .page_foot p:first-child, .print_body *[class^="din"] .page_foot .p__col_2:first-child, .print_body *[class^="din"] .page_foot .p__col_3:first-child, .print_body *[class^="din"] .page_foot caption:first-child {
|
||||
text-align: left; }
|
||||
.print_body *[class^="din"] .page_content {
|
||||
margin-top: 10cm;
|
||||
margin-bottom: 2cm; }
|
||||
.print_body .page_title, .print_body .page_date {
|
||||
font-size: 14pt; }
|
||||
.print_body .page_title {
|
||||
margin: 0; }
|
||||
.print_body .page_date, .print_body .page_no {
|
||||
float: right; }
|
||||
.print_body .page_author {
|
||||
position: absolute;
|
||||
top: 5cm;
|
||||
right: 0;
|
||||
text-align: right; }
|
||||
.print_body .page_recipient {
|
||||
position: absolute;
|
||||
top: 5cm;
|
||||
left: 0; }
|
||||
|
||||
.test li:after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 16px; }
|
||||
|
||||
.front_color_1 {
|
||||
color: #fad803; }
|
||||
.front_color_1:after {
|
||||
background-color: #fad803; }
|
||||
|
||||
.front_color_2 {
|
||||
color: #d30a51; }
|
||||
.front_color_2:after {
|
||||
background-color: #d30a51; }
|
||||
|
||||
.front_color_3 {
|
||||
color: #273f8b; }
|
||||
.front_color_3:after {
|
||||
background-color: #273f8b; }
|
||||
|
||||
.front_color_4 {
|
||||
color: #b7e0f0; }
|
||||
.front_color_4:after {
|
||||
background-color: #b7e0f0; }
|
||||
|
||||
.front_color_5 {
|
||||
color: #52bed1; }
|
||||
.front_color_5:after {
|
||||
background-color: #52bed1; }
|
||||
|
||||
.back_color_1, .label_1 {
|
||||
background-color: #fad803; }
|
||||
|
||||
.back_color_2, .label_2 {
|
||||
background-color: #d30a51; }
|
||||
|
||||
.back_color_3, .label_3 {
|
||||
background-color: #273f8b; }
|
||||
|
||||
.back_color_4 {
|
||||
background-color: #b7e0f0; }
|
||||
|
||||
.back_color_5 {
|
||||
background-color: #52bed1; }
|
||||
|
||||
.label_1, .label_2, .label_3 {
|
||||
padding: 0 4px; }
|
||||
|
||||
|
||||
Error: Undefined variable: "$head_size_1".
|
||||
on line 28 of basic/_typography.scss
|
||||
from line 58 of _hippie.scss
|
||||
from line 3 of ./example.scss
|
||||
|
||||
Backtrace:
|
||||
basic/_typography.scss:28
|
||||
_hippie.scss:58
|
||||
./example.scss:3
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/script/tree/variable.rb:49:in `_perform'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/script/tree/node.rb:58:in `perform'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:397:in `visit_prop'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/base.rb:36:in `visit'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:160:in `block in visit'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:79:in `block in with_base'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:115:in `with_frame'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:79:in `with_base'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:160:in `visit'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:433:in `block (2 levels) in visit_rule'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:433:in `map'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:433:in `block in visit_rule'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:181:in `with_environment'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:431:in `visit_rule'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/base.rb:36:in `visit'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:160:in `block in visit'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:79:in `block in with_base'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:115:in `with_frame'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:79:in `with_base'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:160:in `visit'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:328:in `block (2 levels) in visit_import'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:328:in `map'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:328:in `block in visit_import'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:88:in `block in with_import'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:115:in `with_frame'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:88:in `with_import'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:325:in `visit_import'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/base.rb:36:in `visit'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:160:in `block in visit'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:79:in `block in with_base'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:115:in `with_frame'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:79:in `with_base'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:160:in `visit'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:328:in `block (2 levels) in visit_import'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:328:in `map'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:328:in `block in visit_import'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:88:in `block in with_import'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:115:in `with_frame'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:88:in `with_import'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:325:in `visit_import'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/base.rb:36:in `visit'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:160:in `block in visit'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:79:in `block in with_base'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:115:in `with_frame'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:79:in `with_base'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:160:in `visit'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/base.rb:52:in `block in visit_children'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/base.rb:52:in `map'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/base.rb:52:in `visit_children'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:169:in `block in visit_children'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:181:in `with_environment'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:168:in `visit_children'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/base.rb:36:in `block in visit'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:188:in `visit_root'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/base.rb:36:in `visit'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:159:in `visit'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:8:in `visit'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/root_node.rb:36:in `css_tree'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/root_node.rb:29:in `render_with_sourcemap'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/engine.rb:381:in `_render_with_sourcemap'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/engine.rb:298:in `render_with_sourcemap'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/plugin/compiler.rb:492:in `update_stylesheet'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/plugin/compiler.rb:215:in `block in update_stylesheets'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/plugin/compiler.rb:209:in `each'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/plugin/compiler.rb:209:in `update_stylesheets'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/plugin.rb:82:in `update_stylesheets'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/exec/sass_scss.rb:340:in `watch_or_update'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/exec/sass_scss.rb:51:in `process_result'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/exec/base.rb:52:in `parse'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/exec/base.rb:19:in `parse!'
|
||||
C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/bin/sass:13:in `<top (required)>'
|
||||
C:/Sachen/Ruby23-x64/bin/sass:22:in `load'
|
||||
C:/Sachen/Ruby23-x64/bin/sass:22:in `<main>'
|
||||
*/
|
||||
body:before {
|
||||
white-space: pre;
|
||||
font-family: monospace;
|
||||
content: "Error: Undefined variable: \"$head_size_1\".\A on line 28 of basic/_typography.scss\A from line 58 of _hippie.scss\A from line 3 of ./example.scss"; }
|
||||
|
||||
/*# sourceMappingURL=example.css.map */
|
||||
|
|
|
|||
240
example.html
240
example.html
|
|
@ -14,13 +14,23 @@
|
|||
<link rel="stylesheet" type="text/css" media="all" href="./example.css"/>
|
||||
</head>
|
||||
|
||||
<body class="hover_back_change">
|
||||
<body>
|
||||
<div id="js_tph" class="trigger__hover"></div>
|
||||
|
||||
<div class="layer">
|
||||
<div class="exp_overlay_btn exp_help_btn"><span class="span__solo">?</span></div>
|
||||
<div class="temp__layer">
|
||||
<!-- <div class="exp_overlay_btn exp_help_btn">
|
||||
<span class="span__solo">?</span>
|
||||
</div> -->
|
||||
<nav class="nav__page_meta">
|
||||
<ul>
|
||||
<li class="magic"><a href="#begin" id="js_scrolltop" class="a_button_meta"><img src="./art/up.png" alt="" width="32" height="64"></a></li>
|
||||
<li><a href="#end" id="js_scrolldown" class="a_button_meta"><img src="./art/down.png" alt="" width="32" height="32"></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="box__screen">
|
||||
|
||||
<div id="begin" class="demo__intro">
|
||||
Dies ist einfach nur Text.<br/>Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.
|
||||
<p>Es wirken nur die Eigenschaften des <code><body></code> Elements. Dieses Element umschließt den gesamten Inhalt des Dokumentes und kommt daher nur einmal vor. Inhalte sind normalerweise durch Elemente definiert. Grundlegende Elemente teilen das Dokument zunächst in Abschnitte.</p>
|
||||
<h1>Bereiche</h1>
|
||||
|
|
@ -375,65 +385,201 @@
|
|||
</header>
|
||||
<article>
|
||||
<p>Dies war eine Übersicht der grundlegenden Elemente. Nun folgen weitere Elemente mit besonderen Formatierungen.</p>
|
||||
<hr class="hr__dotted"/>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="sec__main_center">
|
||||
<header>
|
||||
<h1>HIPPIE Erklärung</h1>
|
||||
<p>Aufbau, Standardwerte</p>
|
||||
</header>
|
||||
<article>
|
||||
<p>&ellip;</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section class="sec__main_center">
|
||||
<header>
|
||||
<h1>Einzelene Elemente</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Bereiche</h2>
|
||||
<pre class="pre__code"><code>h3.txt_light_color+p</code></pre>
|
||||
<h3 class="txt_light_color">Helle Überschrift</h3>
|
||||
<p>Mit normalem Textabsatz</p>
|
||||
<pre class="pre__code"><code>a>h4</code></pre>
|
||||
<a href="">
|
||||
<h4>Überschrift als Block-Verweis</h4>
|
||||
</a>
|
||||
<pre class="pre__code"><code>section>div.box__inline_left>img^p+p</code></pre>
|
||||
<section class="overflow">
|
||||
<div class="box__inline_left demo__avatar"><img src="./art/bullet.gif" width="256" height="256" alt="Avatar"></div>
|
||||
<p>Vorname Name<br>Straße 1, 01234 Stadt</p><p>+49 (0)123 1337 0000<br><a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a></p>
|
||||
</section>
|
||||
<pre class="pre__code"><code>div.box__main_indent</code></pre>
|
||||
<div class="box__main_indent">
|
||||
<hr/>
|
||||
<p>Eingerückter Inhalt</p>
|
||||
<hr/>
|
||||
</div>
|
||||
<pre class="pre__code"><code>nav>ul>(li>a.a__button{Punkt $})*4
|
||||
nav>ul>(li>a.a__button_border{Stufe $})*4</code></pre>
|
||||
<div class="overflow">
|
||||
<nav class="float_left">
|
||||
<ul>
|
||||
<li><a href="" class="a__button">Punkt 1</a></li>
|
||||
<li><a href="" class="a__button">Punkt 2</a></li>
|
||||
<li><a href="" class="a__button">Punkt 3</a></li>
|
||||
<li><a href="" class="a__button">Punkt 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="" class="a__button_border">Stufe 1</a></li>
|
||||
<li><a href="" class="a__button_border">Stufe 2</a></li>
|
||||
<li><a href="" class="a__button_border">Stufe 3</a></li>
|
||||
<li><a href="" class="a__button_border">Stufe 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<pre class="pre__code"><code>nav.nav__horizontal>ul>(li>a.a__button{Abschnitt $})*4
|
||||
nav.nav__center_old>ul>(li>a.a__button{Typ $})*4</code></pre>
|
||||
<nav class="nav__horizontal">
|
||||
<ul>
|
||||
<li><a href="" class="a__button">Abschnitt 1</a></li>
|
||||
<li><a href="" class="a__button">Abschnitt 2</a></li>
|
||||
<li><a href="" class="a__button">Abschnitt 3</a></li>
|
||||
<li><a href="" class="a__button">Abschnitt 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="overflow">
|
||||
<nav class="nav__center_old">
|
||||
<ul>
|
||||
<li><a href="" class="a__button">Typ 1</a></li>
|
||||
<li><a href="" class="a__button">Typ 2</a></li>
|
||||
<li><a href="" class="a__button">Typ 3</a></li>
|
||||
<li><a href="" class="a__button">Typ 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<pre class="pre__code x_long"><code>header.header__page>h1+p+nav.nav__separate_right>ul>(li>a.a__button{Nav $})*4^+nav.nav__right>ul>(li>a.a__button{Nav $})*4</code></pre>
|
||||
<header class="header__page demo__header header__fancy">
|
||||
<h1>Fancy Pants</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
|
||||
<nav class="nav__separate_right">
|
||||
<ul>
|
||||
<li><a href="" class="a__button">Mensch</a></li>
|
||||
<li><a href="" class="a__button">Pflanze</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav class="nav__right">
|
||||
<ul>
|
||||
<li><a href="" class="a__button">Blau</a></li>
|
||||
<li><a href="" class="a__button">Gelb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<pre class="pre__code"><code>header.header__page>nav.nav__right>ul>(li>a.a__button{Nav $})*4</code></pre>
|
||||
<div class="box__space height_basic">
|
||||
<header id="js_demo_fix" class="header__page demo__header header__fix">
|
||||
<nav class="nav__right">
|
||||
<ul>
|
||||
<li><a href="" class="a__button">One</a></li>
|
||||
<li><a href="" class="a__button">Two</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<footer class="pos_abs pos_bottom demo__footer"></footer>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
</div>
|
||||
|
||||
<h2>Gruppierung</h2>
|
||||
<pre class="pre__code"><code>ul.list__link>(li>a>img)*2+li>a</code></pre>
|
||||
<ul class="list__link">
|
||||
<li><a href=""><img src="./art/letter.gif" alt="">name@domain.tld</a></li>
|
||||
<li><a href=""><img src="./art/bullet.gif" alt="">Work</a></li>
|
||||
<li><a href="">Projects</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Tabellen</h2>
|
||||
<table class="table-link_list js_pop">
|
||||
<pre class="pre__code x_long"><code>table.table__link>thead>tr>th{&nbsp;}+th{Ab / Zy}+th{Neu / Alt}^^(tbody>tr>td.cell__icon[rowspan="2"]>img[width=16 height=16]^+td.cell__link>a[target=_blank]{Name}+a[target=_blank]{URL}^+td.cell__date[rowspan="2"]{YYY-MM-DD}^tr>td.cell__text>div.shorten{Beschreibung})*2</code></pre>
|
||||
<table class="table__link js_pop">
|
||||
<thead>
|
||||
<tr>
|
||||
<th> </th>
|
||||
<th>Ab / Zy</th>
|
||||
<th> Neu / Alt</th>
|
||||
<th>Neu / Alt</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="cell_icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
|
||||
<td class="cell_link"><a href="" class="link_text" target="_blank">Name</a><a href="" class="link_url" target="_blank">URL</a></td>
|
||||
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
||||
<td class="cell__icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
|
||||
<td class="cell__link"><a href="" target="_blank">Name</a><a href="" target="_blank">URL</a></td>
|
||||
<td class="cell__date" rowspan="2">YYYY-MM-DD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell_text">
|
||||
<td class="cell__text">
|
||||
<div class="shorten">Beschreibung</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="cell_icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
|
||||
<td class="cell_link"><a href="" class="link_text" target="_blank">Name</a><a href="" class="link_url" target="_blank">URL</a></td>
|
||||
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
||||
<td class="cell__icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
|
||||
<td class="cell__link"><a href="" target="_blank">Name</a><a href="" target="_blank">URL</a></td>
|
||||
<td class="cell__date" rowspan="2">YYYY-MM-DD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell_text">
|
||||
<td class="cell__text">
|
||||
<div class="shorten">Beschreibung</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="exp_pop"><code class="code__solo">table.table-link_list>thead>tr>th*3^^(tbody>tr>td.cell_icon[rowspan=2]>img[width=16 height=16]^+td.cell_link>a.link_text[target=_blank]+a.link_url[target=_blank]^+td.cell_date[rowspan=2]{YYYY-MM-DD}^tr>td.cell_text>div.shorten)*2</code></div>
|
||||
<h2>Eingebettet</h2>
|
||||
<div class="box__full_width demo__flag">
|
||||
<svg version="1.1" id="vector" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1920 1200" preserveAspectRatio="xMinYMax slice" alt="Background flag">
|
||||
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect>
|
||||
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon>
|
||||
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon>
|
||||
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon>
|
||||
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon>
|
||||
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon>
|
||||
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon>
|
||||
<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "></polygon>
|
||||
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
|
||||
</article>
|
||||
</section>
|
||||
<div id="end"></div>
|
||||
|
||||
</div>
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.1.1.min.js"
|
||||
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
|
||||
src="https://code.jquery.com/jquery-3.2.1.min.js"
|
||||
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="./code/vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
||||
<script src="./code/variables.js" type="text/javascript"></script>
|
||||
<script src="./code/functions.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
|
||||
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
|
||||
|
||||
$( document ).ready(function() {
|
||||
|
||||
// Setup
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
setup();
|
||||
|
||||
|
||||
|
||||
// Modules
|
||||
// ------------------------------------------------------------------------------
|
||||
|
|
@ -504,6 +650,23 @@
|
|||
console.log("Explanation mode: "+ exp_mode);
|
||||
});
|
||||
|
||||
// WIP Scroll to top
|
||||
$('#js_scrolltop').click(function(event) {
|
||||
console.log('scroll to the top');
|
||||
event.preventDefault();
|
||||
// $('body').scrollTop();
|
||||
$('body').animate({scrollTop: 0}, basic_ease, function() {
|
||||
console.log('arrived at top');
|
||||
});
|
||||
});
|
||||
$('#js_scrolldown').click(function(event) {
|
||||
console.log('scroll down');
|
||||
event.preventDefault();
|
||||
$('body').animate({scrollTop: $(document).height()}, basic_ease * 2, function() {
|
||||
console.log('arrived at bottom');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
$( "#gameIcon" ).click(function(event) {
|
||||
|
|
@ -512,12 +675,6 @@
|
|||
$( this ).siblings().clone().appendTo( "#gameDetail" );
|
||||
$( "#gameDetail" ).removeClass( "magic" );
|
||||
});
|
||||
/*$( "#gameIcon" ).click(function(event) {
|
||||
event.preventDefault();
|
||||
var clone = $( this ).parent().clone();
|
||||
clone.removeClass().addClass( "detailBoxBox" );
|
||||
clone.prependTo( ".gridContainer" );
|
||||
});*/
|
||||
|
||||
var i = 0;
|
||||
$( ".pass-def dd" ).each(function() {
|
||||
|
|
@ -531,10 +688,35 @@
|
|||
}
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
// jq-sticky-anything
|
||||
$('#js_demo_fix').stickThis({
|
||||
pushup: '#js_demo_fix + .demo__footer'
|
||||
});
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
$( document ).scroll(function() {
|
||||
|
||||
// Toggle navigation elements
|
||||
doc_pos_y = $( document ).scrollTop();
|
||||
// console.log(doc_pos_y);
|
||||
var h = scroll_y_margin;
|
||||
var demo_margin = $('.header__fix');
|
||||
if (doc_pos_y > h) {
|
||||
$('#js_scrolltop').parent().removeClass('magic');
|
||||
} else {
|
||||
$('#js_scrolltop').parent().addClass('magic');
|
||||
}
|
||||
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
border: $tiny_space solid $basic_highlight_color;
|
||||
border-radius: $basic_size;
|
||||
color: $basic_highlight_color;
|
||||
background-color: $black;
|
||||
background-color: $dark_color;
|
||||
}
|
||||
|
||||
.exp_expose {
|
||||
|
|
@ -85,16 +85,16 @@
|
|||
display: table;
|
||||
right: $space_2;
|
||||
bottom: $space_2;
|
||||
background-color: rgba($black, .4);
|
||||
background-color: rgba($dark_color, .4);
|
||||
&:hover {
|
||||
background-color: $white;
|
||||
background-color: $bright_color;
|
||||
> .span__solo {
|
||||
color: $black;
|
||||
color: $dark_color;
|
||||
}
|
||||
}
|
||||
.span__solo {
|
||||
display: table-cell;
|
||||
color: rgba($white, .8);
|
||||
color: rgba($bright_color, .8);
|
||||
font-family: $monospace_font_family;
|
||||
font-size: 1.4em;
|
||||
text-align: center;
|
||||
|
|
|
|||
121
modules/navigation/_nav_module.scss
Normal file
121
modules/navigation/_nav_module.scss
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
nav {
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: $basic_space;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav__horizontal {
|
||||
ul {
|
||||
@extend .overflow;
|
||||
|
||||
li {
|
||||
@extend .float_left;
|
||||
margin-right: $basic_space;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav__center_old {
|
||||
@extend .nav__horizontal;
|
||||
float: right;
|
||||
position: relative;
|
||||
left: -50%;
|
||||
|
||||
ul {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.nav__page_meta {
|
||||
position: fixed;
|
||||
// display: table;
|
||||
// width: 3em;
|
||||
right: 0;
|
||||
bottom: $space_2;
|
||||
|
||||
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;
|
||||
|
||||
ul {
|
||||
margin: $basic_space 0;
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: rgba($basic_font_color, .2);
|
||||
color: $basic_font_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav__right {
|
||||
float: right;
|
||||
margin-left: $basic_space;
|
||||
|
||||
.align_parent {
|
||||
margin-right: $basic_space * -1;
|
||||
}
|
||||
}
|
||||
|
||||
.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: $bright_color;
|
||||
margin: 0 $basic_space;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
// ------------------------------------------------------------------------------
|
||||
|
||||
%paper {
|
||||
background-color: $white;
|
||||
background-color: $bright_color;
|
||||
}
|
||||
|
||||
$a4: ".dina4" 1.2cm 1.2cm 1.2cm 2.4cm;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.table-link_list {
|
||||
.table__link {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
table-layout: auto;
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
border: 0;
|
||||
}
|
||||
|
||||
.cell_icon {
|
||||
.cell__icon {
|
||||
width: 48px;
|
||||
text-align: center;
|
||||
img {
|
||||
|
|
@ -23,38 +23,36 @@
|
|||
}
|
||||
}
|
||||
|
||||
.cell_link {
|
||||
.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;
|
||||
}
|
||||
|
||||
.link_url {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover .link_url {
|
||||
display: block;
|
||||
color: $basic_highlight_color;
|
||||
}
|
||||
|
||||
&:hover .link_text {
|
||||
a:last-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cell_date {
|
||||
width: 12%;
|
||||
th:last-child, .cell__date {
|
||||
width: 16%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cell_text {
|
||||
.cell__text {
|
||||
padding-right: $basic_space;
|
||||
padding-left: $basic_space;
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue