Next content push
- changed .gitignore for art folder - add gulp processing for art - changed nunjucks templates file structure to reflect demo files - removed file for new styles - renamed most sass variables - added sass function for space classes - great progress with content of the intro page - moved old gulp tasks to DEPRECATED.md
This commit is contained in:
Stephan
parent
48437cc4f4
commit
92d1609213
37 changed files with 664 additions and 637 deletions
|
|
@ -1,6 +1,6 @@
|
|||
// Override for configuration file
|
||||
// All variables setup with !default in gloabl/_config.scss can be used
|
||||
// All variables setup with !default in global/_config.scss can be used
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
// $color_back_basic: yellow;
|
||||
// $basic_link_color: magenta;
|
||||
// $color_back_basic: beige;
|
||||
// $color_link_basic: crimson;
|
||||
|
|
|
|||
|
|
@ -1,38 +0,0 @@
|
|||
.test {
|
||||
li::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.front_color_1 { color: $alpha_color; &::after { background-color: $alpha_color; } }
|
||||
.front_color_2 { color: $bravo_color; &::after { background-color: $bravo_color; } }
|
||||
.front_color_3 { color: $charlie_color; &::after { background-color: $charlie_color; } }
|
||||
.front_color_4 { color: $delta_color; &::after { background-color: $delta_color; } }
|
||||
.front_color_5 { color: $echo_color; &::after { background-color: $echo_color; } }
|
||||
|
||||
.back_color_1 { background-color: $alpha_color;}
|
||||
.back_color_2 { background-color: $bravo_color;}
|
||||
.back_color_3 { background-color: $charlie_color;}
|
||||
.back_color_4 { background-color: $delta_color;}
|
||||
.back_color_5 { background-color: $echo_color;}
|
||||
|
||||
%label {
|
||||
padding: 0 $half_space;
|
||||
}
|
||||
|
||||
.label_1 {
|
||||
@extend %label;
|
||||
@extend .back_color_1;
|
||||
}
|
||||
|
||||
.label_2 {
|
||||
@extend %label;
|
||||
@extend .back_color_2;
|
||||
}
|
||||
|
||||
.label_3 {
|
||||
@extend %label;
|
||||
@extend .back_color_3;
|
||||
}
|
||||
|
|
@ -12,5 +12,3 @@
|
|||
// -----------------------------------------------------------------------------
|
||||
@import "modules/demo/demo_module";
|
||||
// @import "modules/YOUR-MODULE/YOUR-FILES";
|
||||
// New
|
||||
@import "demo_new";
|
||||
|
|
|
|||
|
|
@ -12,5 +12,3 @@
|
|||
// -----------------------------------------------------------------------------
|
||||
@import "modules/demo/demo_module";
|
||||
// @import "modules/YOUR-MODULE/YOUR-FILES";
|
||||
// New
|
||||
@import "demo_new";
|
||||
|
|
|
|||
|
|
@ -22,17 +22,17 @@
|
|||
// -----------------------------------------------------------------------------
|
||||
p {
|
||||
@extend %basic;
|
||||
margin-top: $basic_space;
|
||||
margin-bottom: $basic_space;
|
||||
margin-top: $space_basic;
|
||||
margin-bottom: $space_basic;
|
||||
code {
|
||||
padding: $tiny_space $half_space;
|
||||
padding: $space_tiny $space_half;
|
||||
font-size: 1em;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.column_line {
|
||||
column-rule: $basic_border;
|
||||
column-rule: $border_basic;
|
||||
}
|
||||
.column_2, .column_3 {
|
||||
@extend p;
|
||||
|
|
@ -50,17 +50,18 @@ p {
|
|||
// -----------------------------------------------------------------------------
|
||||
address {
|
||||
// @extend %basic;
|
||||
margin-top: $double_space;
|
||||
margin-bottom: $double_space;
|
||||
margin-top: $space_double;
|
||||
margin-bottom: $space_double;
|
||||
}
|
||||
|
||||
// Line
|
||||
// -----------------------------------------------------------------------------
|
||||
hr {
|
||||
margin: $space_small auto;
|
||||
border-width: $basic_border_width 0 0;
|
||||
margin-top: $space_small;
|
||||
margin-bottom: $space_small;
|
||||
border-width: $width_border_basic 0 0;
|
||||
border-style: solid;
|
||||
border-color: $basic_border_color;
|
||||
border-color: $color_border_basic;
|
||||
}
|
||||
|
||||
.hr_hidden {
|
||||
|
|
@ -81,12 +82,12 @@ pre {
|
|||
|
||||
.pre_code {
|
||||
overflow-x: auto;
|
||||
border-color: darken($color_back_basic, $tiny_color_diff);
|
||||
border-color: darken($color_back_basic, $color_diff_tiny);
|
||||
border-style: dotted;
|
||||
border-width: 0 0 0 $border_width_4;
|
||||
border-radius: $basic_corner;
|
||||
padding: $basic_space;
|
||||
background-color: lighten($color_back_basic, $tiny_color_diff);
|
||||
border-width: 0 0 0 $width_border_4;
|
||||
border-radius: $radius_basic;
|
||||
padding: $space_basic;
|
||||
background-color: lighten($color_back_basic, $color_diff_tiny);
|
||||
code {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
|
@ -95,9 +96,9 @@ pre {
|
|||
// Quote
|
||||
// -----------------------------------------------------------------------------
|
||||
blockquote {
|
||||
margin: $basic_space 0;
|
||||
padding-right: $basic_indent;
|
||||
padding-left: $basic_indent;
|
||||
margin: $space_basic 0;
|
||||
padding-right: $indent_basic;
|
||||
padding-left: $indent_basic;
|
||||
}
|
||||
|
||||
.quote_mark {
|
||||
|
|
@ -105,7 +106,7 @@ blockquote {
|
|||
content: "\201E \0020";
|
||||
}
|
||||
p::after {
|
||||
content: "\201C \0020";
|
||||
content: "\0020 \201C";
|
||||
}
|
||||
.quote_source {
|
||||
&::before, &::after {
|
||||
|
|
@ -117,11 +118,15 @@ blockquote {
|
|||
// List
|
||||
// -----------------------------------------------------------------------------
|
||||
dl, ul, ol {
|
||||
margin: $double_space 0 $basic_space;
|
||||
margin: $space_double 0;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding-left: $basic_indent;
|
||||
padding-left: $indent_basic;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin-left: $indent_basic;
|
||||
}
|
||||
|
||||
li, dt, dd {
|
||||
|
|
@ -129,11 +134,11 @@ li, dt, dd {
|
|||
}
|
||||
|
||||
dd, .list_basic li {
|
||||
margin-bottom: $basic_space;
|
||||
margin-bottom: $space_basic;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: $basic_indent;
|
||||
margin-left: $indent_basic;
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
@ -157,22 +162,22 @@ ul {
|
|||
|
||||
.list_link {
|
||||
li {
|
||||
margin-bottom: $tiny_space * 2;
|
||||
margin-bottom: $space_tiny * 2;
|
||||
text-transform: uppercase;
|
||||
a {
|
||||
display: block;
|
||||
padding: $basic_padding;
|
||||
color: $basic_font_color;
|
||||
padding: $padding_basic;
|
||||
color: $color_text_basic;
|
||||
img {
|
||||
margin-right: $basic_space;
|
||||
margin-right: $space_basic;
|
||||
padding-bottom: 0.2em;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $basic_action_color;
|
||||
color: $basic_highlight_color;
|
||||
background-color: $color_action_basic;
|
||||
color: $color_highlight_basic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -188,11 +193,12 @@ ul {
|
|||
// Embedded
|
||||
// -----------------------------------------------------------------------------
|
||||
figure {
|
||||
margin: $double_space $basic_indent;
|
||||
margin: $space_double $indent_basic;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
@extend %basic;
|
||||
color: $color_darker;
|
||||
}
|
||||
|
||||
// Main content
|
||||
|
|
@ -208,8 +214,8 @@ div {
|
|||
}
|
||||
|
||||
.div_info {
|
||||
padding: $double_space $basic_indent;
|
||||
border-right: $basic_space solid rgba($echo_color, 0.6);
|
||||
padding: $space_double $indent_basic;
|
||||
border-right: $space_basic solid rgba($echo_color, 0.6);
|
||||
background-color: rgba($echo_color, 0.1) !important;
|
||||
}
|
||||
|
||||
|
|
@ -233,20 +239,20 @@ div {
|
|||
.box_placeholder {
|
||||
width: 100%;
|
||||
height: $space_medium;
|
||||
border: $border_width_4 solid transparentize($alpha_color, 0.1);
|
||||
border-radius: $basic_corner;
|
||||
border: $width_border_4 solid transparentize($alpha_color, 0.1);
|
||||
border-radius: $radius_basic;
|
||||
background-color: transparentize($alpha_color, 0.2);
|
||||
}
|
||||
|
||||
.box_placeholder_bkg {
|
||||
width: 100%;
|
||||
height: $space_medium * 2;
|
||||
border: $border_width_4 solid transparentize($basic_front_color, 0.1);
|
||||
border-radius: $basic_corner;
|
||||
padding: $basic_space;
|
||||
border: $width_border_4 solid transparentize($color_front_basic, 0.1);
|
||||
border-radius: $radius_basic;
|
||||
padding: $space_basic;
|
||||
/*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='0' y1='0' x2='100%' y2='100%' stroke='%23FFF' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='%23FFF' stroke-width='.5'/></svg>") no-repeat;
|
||||
background-color: transparentize($basic_front_color, 0.1);
|
||||
background-color: transparentize($color_front_basic, 0.1);
|
||||
}
|
||||
|
||||
.box_file_tile {
|
||||
|
|
@ -294,7 +300,7 @@ div {
|
|||
// Grid
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-gap: $basic_space;
|
||||
grid-gap: $space_basic;
|
||||
|
||||
& > input,
|
||||
& > select,
|
||||
|
|
@ -303,8 +309,8 @@ div {
|
|||
}
|
||||
|
||||
& > label {
|
||||
margin: $basic_io_border_width;
|
||||
padding: $half_space;
|
||||
margin: $width_border_io;
|
||||
padding: $space_half;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -29,12 +29,12 @@ label {
|
|||
@extend %basic;
|
||||
|
||||
input, button, textarea, select {
|
||||
margin-left: $basic_space;
|
||||
margin-left: $space_basic;
|
||||
}
|
||||
}
|
||||
|
||||
input + label {
|
||||
margin-left: $basic_space;
|
||||
margin-left: $space_basic;
|
||||
}
|
||||
|
||||
.label {
|
||||
|
|
@ -44,21 +44,20 @@ input + label {
|
|||
.label > input,
|
||||
.label > textarea,
|
||||
.label > select {
|
||||
margin: 0 $basic_space;
|
||||
margin: 0 $space_basic;
|
||||
}
|
||||
|
||||
// Input
|
||||
// -----------------------------------------------------------------------------
|
||||
input {
|
||||
color: $basic_io_font_color;
|
||||
}
|
||||
|
||||
label + input {
|
||||
margin-left: $basic_space;
|
||||
margin-left: $space_basic;
|
||||
}
|
||||
|
||||
input, button, textarea, select {
|
||||
margin: $io_margin;
|
||||
margin: $margin_io;
|
||||
|
||||
&[disabled="disabled"],
|
||||
&[disabled] {
|
||||
|
|
@ -81,22 +80,23 @@ td > textarea {
|
|||
}
|
||||
|
||||
.io_input, .io_textarea, .io_select {
|
||||
padding: $half_space;
|
||||
background-color: $basic_io_back_color;
|
||||
padding: $space_half;
|
||||
color: $color_text_io;
|
||||
background-color: $color_back_io;
|
||||
|
||||
&:hover {
|
||||
background-color: $basic_highlight_color;
|
||||
background-color: $color_highlight_basic;
|
||||
}
|
||||
|
||||
&[readonly="readonly"],
|
||||
&[readonly] {
|
||||
background-color: darken($basic_io_back_color, 30%);
|
||||
background-color: darken($color_back_io, $color_diff_double);
|
||||
}
|
||||
|
||||
&[disabled="disabled"],
|
||||
&[disabled] {
|
||||
&:hover {
|
||||
background-color: $basic_io_back_color;
|
||||
background-color: $color_back_io;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -110,16 +110,16 @@ td > textarea {
|
|||
|
||||
@each $input in $io_input_list, textarea {
|
||||
#{$input} {
|
||||
// border: $basic_io_border;
|
||||
// border: $border_io;
|
||||
}
|
||||
}
|
||||
|
||||
.io_input, .io_textarea {
|
||||
border: $basic_io_border;
|
||||
border: $border_io;
|
||||
|
||||
&[readonly="readonly"],
|
||||
&[readonly] {
|
||||
border-color: darken($basic_io_border_color, 30%);
|
||||
border-color: darken($color_border_io, $color_diff_double);
|
||||
}
|
||||
|
||||
&[disabled="disabled"],
|
||||
|
|
@ -131,16 +131,16 @@ td > textarea {
|
|||
// Fieldset
|
||||
// -----------------------------------------------------------------------------
|
||||
fieldset {
|
||||
margin: $high_margin;
|
||||
padding: $basic_space;
|
||||
border: $basic_border;
|
||||
margin: $margin_double;
|
||||
padding: $space_basic;
|
||||
border: $border_basic;
|
||||
}
|
||||
|
||||
// Legend
|
||||
// -----------------------------------------------------------------------------
|
||||
legend {
|
||||
@extend %basic;
|
||||
padding: 0 $half_space;
|
||||
padding: 0 $space_half;
|
||||
}
|
||||
|
||||
// Button
|
||||
|
|
@ -151,10 +151,10 @@ button {
|
|||
|
||||
.io_button {
|
||||
@extend %basic_button;
|
||||
border: $basic_io_border_width solid $oi_border_color;
|
||||
padding: $basic_padding;
|
||||
color: $oi_font_color;
|
||||
background-color: $oi_back_color;
|
||||
border: $width_border_io solid $color_border_button;
|
||||
padding: $padding_basic;
|
||||
color: $color_text_button;
|
||||
background-color: $color_back_button;
|
||||
|
||||
&:hover {
|
||||
// border-color: #0059F6;
|
||||
|
|
@ -166,10 +166,10 @@ button {
|
|||
&[disabled="disabled"],
|
||||
&[disabled] {
|
||||
border-color: transparent;
|
||||
color: $oi_border_color;
|
||||
color: lighten($color_text_button, $color_diff_double);
|
||||
|
||||
&:hover {
|
||||
background-color: $oi_back_color;
|
||||
background-color: $color_back_button;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,11 +25,11 @@ body {
|
|||
position: relative;
|
||||
box-sizing: $box_sizing;
|
||||
margin: 0;
|
||||
font-family: $primary_font_family;
|
||||
font-size: $basic_size;
|
||||
line-height: $basic_line;
|
||||
line-height: $text_line_basic;
|
||||
color: $basic_font_color;
|
||||
font-family: $family_text_basic;
|
||||
font-size: $size_text_basic;
|
||||
line-height: $line_basic;
|
||||
line-height: $line_text_basic;
|
||||
color: $color_text_basic;
|
||||
background-color: $color_back_basic;
|
||||
|
||||
*,
|
||||
|
|
@ -42,7 +42,7 @@ body {
|
|||
|
||||
.layer_hover {
|
||||
background-color: transparent !important;
|
||||
transition: background-color $double_duration $basic_timing 0s !important;
|
||||
transition: background-color $duration_double $timing_basic 0s !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -60,7 +60,7 @@ section {
|
|||
}
|
||||
|
||||
.sec_main_center {
|
||||
width: $basic_width;
|
||||
width: $width_basic;
|
||||
margin: 0 auto;
|
||||
padding-top: $space_small;
|
||||
|
||||
|
|
@ -76,9 +76,9 @@ section {
|
|||
}
|
||||
|
||||
.sec_main_status {
|
||||
border-top-width: $border_width_8;
|
||||
border-top-width: $width_border_8;
|
||||
border-top-style: solid;
|
||||
border-color: $basic_border_color;
|
||||
border-color: $color_border_basic;
|
||||
padding-top: $space_small;
|
||||
}
|
||||
|
||||
|
|
@ -91,14 +91,14 @@ nav {
|
|||
// Aside element
|
||||
// -----------------------------------------------------------------------------
|
||||
aside {
|
||||
width: $basic_aside_width;
|
||||
width: $width_aside_basic;
|
||||
|
||||
&.right + .bside {
|
||||
margin-right: calc(#{$basic_aside_width} + #{$basic_space});
|
||||
margin-right: calc(#{$width_aside_basic} + #{$space_basic});
|
||||
}
|
||||
|
||||
&.left + .bside {
|
||||
margin-left: calc(#{$basic_aside_width} + #{$basic_space});
|
||||
margin-left: calc(#{$width_aside_basic} + #{$space_basic});
|
||||
}
|
||||
|
||||
&.right {
|
||||
|
|
@ -140,25 +140,25 @@ h2 + h2 {
|
|||
|
||||
h3 {
|
||||
@extend %head_3;
|
||||
margin: $double_space 0;
|
||||
margin: $space_double 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@extend %head_3;
|
||||
margin: $double_space 0;
|
||||
margin: $space_double 0;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@extend %head_4;
|
||||
margin: $double_space 0 $basic_space;
|
||||
margin: $space_double 0 $space_basic;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@extend %basic;
|
||||
margin: $basic_space 0;
|
||||
margin: $space_basic 0;
|
||||
text-transform: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -175,10 +175,10 @@ header {
|
|||
|
||||
.header_txt {
|
||||
margin-bottom: $space_small;
|
||||
border-bottom: $dotted_border;
|
||||
border-bottom: $border_dotted;
|
||||
|
||||
h1 {
|
||||
border-top: $basic_border;
|
||||
border-top: $border_basic;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,21 +16,21 @@
|
|||
// Table
|
||||
// -----------------------------------------------------------------------------
|
||||
table {
|
||||
margin: $high_margin;
|
||||
border: $basic_border;
|
||||
margin: $margin_double;
|
||||
border: $border_basic;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table_blank {
|
||||
border: $basic_border_width solid transparent;
|
||||
border: $width_border_basic solid transparent;
|
||||
|
||||
th, td {
|
||||
border: $basic_border_width solid transparent;
|
||||
border: $width_border_basic solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.table_free {
|
||||
border: $basic_border_width solid transparent;
|
||||
border: $width_border_basic solid transparent;
|
||||
}
|
||||
|
||||
.table_stripe {
|
||||
|
|
@ -40,7 +40,7 @@ table {
|
|||
}
|
||||
|
||||
tr:nth-child(even) td {
|
||||
background-color: lighten($color_back_basic, $tiny_color_diff);
|
||||
background-color: lighten($color_back_basic, $color_diff_tiny);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -56,8 +56,8 @@ table {
|
|||
// -----------------------------------------------------------------------------
|
||||
caption {
|
||||
@extend p;
|
||||
padding: $half_space 0;
|
||||
border: $dotted_border;
|
||||
padding: $space_half 0;
|
||||
border: $border_dotted;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -88,7 +88,7 @@ thead {
|
|||
tfoot {
|
||||
|
||||
tr:first-child td {
|
||||
border-top: $basic_border;
|
||||
border-top: $border_basic;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -102,17 +102,17 @@ tr {
|
|||
// -----------------------------------------------------------------------------
|
||||
th, td {
|
||||
@extend %basic;
|
||||
padding: $half_space;
|
||||
padding: $space_half;
|
||||
}
|
||||
|
||||
th {
|
||||
border: $basic_border;
|
||||
border: $border_basic;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td {
|
||||
border-right: $basic_border;
|
||||
border-bottom: $basic_border;
|
||||
border-right: $border_basic;
|
||||
border-bottom: $border_basic;
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
|
|
@ -124,7 +124,7 @@ td:last-child {
|
|||
}
|
||||
|
||||
.cell_pre {
|
||||
// border-right-width: $border_width_4;
|
||||
// border-right-width: $width_border_4;
|
||||
// border-right-color: lighten($color_back_basic, $color_diff_basic);
|
||||
background-color: lighten($color_back_basic, $tiny_color_diff);
|
||||
background-color: lighten($color_back_basic, $color_diff_tiny);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,47 +37,57 @@
|
|||
// Links
|
||||
// -----------------------------------------------------------------------------
|
||||
a {
|
||||
color: $basic_link_color;
|
||||
// color: lighten($basic_action_color, 20%);
|
||||
color: $color_link_basic;
|
||||
// color: lighten($color_action_basic, 20%);
|
||||
text-decoration: none;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $basic_highlight_color;
|
||||
color: $color_highlight_basic;
|
||||
}
|
||||
}
|
||||
|
||||
.a_line {
|
||||
border-bottom-width: $tiny_space;
|
||||
border-bottom-width: $space_tiny;
|
||||
border-bottom-style: dotted;
|
||||
border-color: $basic_border_color;
|
||||
border-color: $color_border_basic;
|
||||
color: $color_text_basic;
|
||||
background-color: transparent;
|
||||
color: $basic_font_color;
|
||||
transition: color $basic_duration $basic_timing;
|
||||
transition: color $duration_basic $timing_basic;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $basic_action_color;
|
||||
color: $basic_highlight_color;
|
||||
color: $color_highlight_basic;
|
||||
background-color: $color_action_basic;
|
||||
}
|
||||
}
|
||||
|
||||
.a_button {
|
||||
@extend %default_button;
|
||||
display: inline-block;
|
||||
padding: $padding_basic;
|
||||
border-radius: $radius_basic;
|
||||
background-color: transparentize($color_link_basic, 0.8);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
background-color: transparentize($color_highlight_basic, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.a_button_text {
|
||||
@extend %default_button;
|
||||
padding: $wide_padding;
|
||||
@extend .a_button;
|
||||
padding: $padding_link;
|
||||
color: $color_text_basic;
|
||||
background-color: transparent;
|
||||
color: $basic_font_color;
|
||||
}
|
||||
|
||||
.a_button_border {
|
||||
@extend .a_button_text;
|
||||
border: $basic_border;
|
||||
border: $border_basic;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -88,8 +98,8 @@ i, em {
|
|||
}
|
||||
|
||||
.i_bright {
|
||||
color: $color_highlight_basic;
|
||||
font-style: normal;
|
||||
color: $basic_highlight_color;
|
||||
}
|
||||
|
||||
// Bold, Strong
|
||||
|
|
@ -172,14 +182,14 @@ time {
|
|||
// -----------------------------------------------------------------------------
|
||||
code {
|
||||
@extend %basic_mono;
|
||||
color: lighten($basic_font_color, $color_diff_basic);
|
||||
background-color: lighten($color_back_basic, $tiny_color_diff);
|
||||
color: lighten($color_text_basic, $color_diff_basic);
|
||||
background-color: lighten($color_back_basic, $color_diff_tiny);
|
||||
}
|
||||
|
||||
.code_solo {
|
||||
@extend %basic_mono;
|
||||
padding: $tiny_space $half_space;
|
||||
color: $basic_font_color;
|
||||
padding: $space_tiny $space_half;
|
||||
color: $color_text_basic;
|
||||
}
|
||||
|
||||
// Variable
|
||||
|
|
@ -191,7 +201,7 @@ var {
|
|||
// Sample
|
||||
// -----------------------------------------------------------------------------
|
||||
samp {
|
||||
|
||||
@extend %basic_mono;
|
||||
}
|
||||
|
||||
// Keyboard input
|
||||
|
|
@ -200,12 +210,12 @@ kbd {
|
|||
@extend %basic_mono;
|
||||
// font-size: .9em;
|
||||
// font-weight: bold;
|
||||
padding: 0 $half_space;
|
||||
border-width: $basic_border_width;
|
||||
padding: 0 $space_half;
|
||||
border-width: $width_border_basic;
|
||||
border-style: solid;
|
||||
border-color: darken($color_back_basic, $color_diff_basic);
|
||||
border-radius: $basic_corner;
|
||||
color: lighten($basic_font_color, $color_diff_basic);
|
||||
border-color: $color_darker;
|
||||
border-radius: $radius_basic;
|
||||
color: lighten($color_text_basic, $color_diff_basic);
|
||||
}
|
||||
|
||||
// Sub- and superscript
|
||||
|
|
@ -227,18 +237,18 @@ mark {
|
|||
}
|
||||
|
||||
.mark_cursor {
|
||||
color: invert($basic_font_color);
|
||||
background-color: $basic_font_color;
|
||||
color: invert($color_text_basic);
|
||||
background-color: $color_text_basic;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
color: invert($basic_font_color);
|
||||
background-color: $basic_font_color;
|
||||
color: invert($color_text_basic);
|
||||
background-color: $color_text_basic;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: invert($basic_font_color);
|
||||
background-color: $basic_font_color;
|
||||
color: invert($color_text_basic);
|
||||
background-color: $color_text_basic;
|
||||
}
|
||||
|
||||
// Text direction
|
||||
|
|
|
|||
|
|
@ -40,8 +40,22 @@
|
|||
margin-left: 37.5%;
|
||||
}
|
||||
|
||||
.space_right_small {
|
||||
margin-right: $space_small;
|
||||
@each $size, $variable in (basic, #{$space_basic}),
|
||||
(small, #{$space_small}),
|
||||
(medium, #{$space_medium}),
|
||||
(large, #{$space_large}) {
|
||||
.space_top_#{$size} {
|
||||
margin-top: $variable;
|
||||
}
|
||||
.space_right_#{$size} {
|
||||
margin-right: $variable;
|
||||
}
|
||||
.space_bottom_#{$size} {
|
||||
margin-bottom: $variable;
|
||||
}
|
||||
.space_left_#{$size} {
|
||||
margin-left: $variable;
|
||||
}
|
||||
}
|
||||
|
||||
.space_left_fourth {
|
||||
|
|
@ -76,8 +90,8 @@
|
|||
|
||||
.wrap_center {
|
||||
& > * {
|
||||
margin-right: (100% - $basic_width) / 2;
|
||||
margin-left: (100% - $basic_width) / 2;
|
||||
margin-right: (100% - $width_basic) / 2;
|
||||
margin-left: (100% - $width_basic) / 2;
|
||||
|
||||
@include forTabletPortraitUp {
|
||||
margin-right: (100% - $width_small) / 2;
|
||||
|
|
@ -202,7 +216,7 @@
|
|||
}
|
||||
|
||||
.hover_back_change {
|
||||
background-color: darken($color_back_basic, $color_diff_basic);
|
||||
background-color: $color_darker;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -213,8 +227,8 @@
|
|||
.hover_full_view_change {
|
||||
@extend %full_viewport;
|
||||
z-index: $z_heaven;
|
||||
background-color: transparentize($darkest_color, 0.5);
|
||||
transition: background-color $extended_duration $basic_timing $extended_duration;
|
||||
background-color: transparentize($color_darkest, 0.5);
|
||||
transition: background-color $duration_long $timing_basic $duration_long;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -223,11 +237,11 @@
|
|||
// Colors
|
||||
// -----------------------------------------------------------------------------
|
||||
.txt_color_light {
|
||||
color: $color_font_light;
|
||||
color: $color_brighter;
|
||||
}
|
||||
|
||||
.txt_color_dark {
|
||||
color: $color_font_dark;
|
||||
color: $color_darker;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -251,7 +265,7 @@
|
|||
}
|
||||
|
||||
.txt_hero {
|
||||
font-size: $hero_size_1;
|
||||
font-size: $size_hero;
|
||||
}
|
||||
|
||||
.txt_center {
|
||||
|
|
@ -288,22 +302,3 @@
|
|||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Input
|
||||
// -----------------------------------------------------------------------------
|
||||
%default_button {
|
||||
display: inline-block;
|
||||
padding: $basic_padding;
|
||||
background-color: transparentize($basic_link_color, 0.8);
|
||||
border-radius: $basic_corner;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: rgba($basic_highlight_color, 0.1);
|
||||
color: $basic_highlight_color;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,12 +5,10 @@
|
|||
|
||||
// TEXT
|
||||
// ------------------------------------------------------------------------------
|
||||
$basic_size: 17px !default;
|
||||
$basic_print_size: 10pt !default;
|
||||
$size_text_basic: 17px !default;
|
||||
$size_text_print: 10pt !default;
|
||||
|
||||
$size_1: $basic_size * 4;
|
||||
|
||||
$basic_line: 1;
|
||||
$line_basic: 1;
|
||||
|
||||
// $i: 1;
|
||||
// @while $i < 7 {
|
||||
|
|
@ -44,30 +42,24 @@ $basic_line: 1;
|
|||
// ),
|
||||
// );
|
||||
|
||||
$head_size_1: 3.1em !default;
|
||||
$head_size_2: 2.5em !default;
|
||||
$head_size_3: 1.8em !default;
|
||||
$head_size_4: 1.35em !default;
|
||||
$size_head_1: 3.1em !default;
|
||||
$size_head_2: 2.5em !default;
|
||||
$size_head_3: 1.8em !default;
|
||||
$size_head_4: 1.35em !default;
|
||||
|
||||
$text_size_1: 1em;
|
||||
$text_size_2: 20;
|
||||
$size_text_1: 1em;
|
||||
$size_text_2: 20;
|
||||
|
||||
$hero_size_1: $head_size_1 * 3;
|
||||
$size_hero: $size_head_1 * 3;
|
||||
|
||||
$text_line_basic: 1.28 !default;
|
||||
$text_line_mono: 1.1 !default;
|
||||
$head_line_basic: $text_line_basic !default;
|
||||
$head_line_2: $head_line_basic;
|
||||
$head_line_3: $head_line_basic;
|
||||
$head_line_4: $head_line_basic;
|
||||
$line_text_basic: 1.28 !default;
|
||||
$line_text_mono: 1.1 !default;
|
||||
$line_head_basic: $line_text_basic !default;
|
||||
|
||||
$print_font_family: #{'Times New Roman', times} !default;
|
||||
$monospace_font_family: #{'Courier New', monospace} !default;
|
||||
|
||||
$primary_font_family: #{'Roboto', 'Segoe UI', 'Liberation Sans', 'Source Sans', 'Trebuchet MS', Helvetica, Arial, sans-serif, sans} !default;
|
||||
$secondary_font_family: $primary_font_family !default;
|
||||
$third_font_family: $monospace_font_family !default;
|
||||
$fourth_font_family: $print_font_family !default;
|
||||
$family_text_basic: #{'Roboto', 'Segoe UI', 'Liberation Sans', 'Source Sans', 'Trebuchet MS', Helvetica, Arial, sans-serif, sans} !default;
|
||||
$family_text_print: #{'Times New Roman', times} !default;
|
||||
$family_text_mono: #{'Courier New', monospace} !default;
|
||||
$family_head_basic: $family_text_basic !default;
|
||||
|
||||
|
||||
|
||||
|
|
@ -85,38 +77,38 @@ $color_palette: (
|
|||
@include addDefaultColors;
|
||||
|
||||
$color_diff_basic: 12% !default;
|
||||
$tiny_color_diff: 4% !default;
|
||||
$double_color_diff: $color_diff_basic * 2;
|
||||
$color_diff_tiny: 4% !default;
|
||||
$color_diff_double: $color_diff_basic * 2;
|
||||
|
||||
$darkest_color: black !default;
|
||||
$brightest_color: white !default;
|
||||
$color_darkest: black !default;
|
||||
$color_brightest: white !default;
|
||||
|
||||
$basic_font_color: black !default;
|
||||
$color_text_basic: black !default;
|
||||
$color_back_basic: #808080 !default;
|
||||
$basic_border_color: lighten($basic_font_color, $color_diff_basic) !default;
|
||||
$basic_front_color: white !default;
|
||||
$color_border_basic: lighten($color_text_basic, $color_diff_basic) !default;
|
||||
$color_front_basic: white !default;
|
||||
|
||||
$medium_color: lighten($darkest_color, 50%);
|
||||
$dark_color: lighten($darkest_color, $double_color_diff);
|
||||
$bright_color: darken($brightest_color, $double_color_diff);
|
||||
$color_medium: lighten($color_darkest, 50%);
|
||||
$color_dark: lighten($color_darkest, $color_diff_double);
|
||||
$color_darker: darken($color_back_basic, $color_diff_basic);
|
||||
$color_brighter: lighten($color_back_basic, $color_diff_basic);
|
||||
$color_bright: darken($color_brightest, $color_diff_double);
|
||||
|
||||
$basic_head_color: $basic_font_color !default;
|
||||
$basic_link_color: $echo_color !default;
|
||||
$basic_highlight_color: $basic_front_color !default;
|
||||
$basic_action_color: $foxtrot_color !default;
|
||||
$color_head_basic: $color_text_basic !default;
|
||||
$color_link_basic: $echo_color !default;
|
||||
$color_highlight_basic: $color_front_basic !default;
|
||||
$color_action_basic: $foxtrot_color !default;
|
||||
|
||||
$color_font_light: lighten($color_back_basic, $color_diff_basic);
|
||||
$color_font_dark: darken($color_back_basic, $color_diff_basic);
|
||||
|
||||
// default shadow colors
|
||||
// $shadow_color: fade-out($medium_color, 0.5);
|
||||
// $shadow_color: fade-out($color_medium, 0.5);
|
||||
|
||||
$basic_color_list: ();
|
||||
$color_list: ();
|
||||
|
||||
@each $key, $value in $color_palette {
|
||||
$map: ();
|
||||
$map: map-merge($map, ($key: createColorMap($value, 15%, 0.5)) );
|
||||
$basic_color_list: map-merge($basic_color_list, $map);
|
||||
$color_list: map-merge($color_list, $map);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -130,40 +122,36 @@ $z_top: 10 !default;
|
|||
$z_basic: 1 !default;
|
||||
$z_earth: -100 !default;
|
||||
|
||||
$basic_width: 96% !default;
|
||||
$width_basic: 96% !default;
|
||||
$width_small: 80% !default;
|
||||
$width_medium: 60% !default;
|
||||
$width_large: 48% !default;
|
||||
$width_aside_basic: 20% !default;
|
||||
|
||||
$tiny_space: 1px !default;
|
||||
$basic_space: $tiny_space * 8 !default;
|
||||
$half_space: $basic_space / 2;
|
||||
$double_space: $basic_space * 2;
|
||||
$space_small: $basic_space * 4;
|
||||
$space_medium: $basic_space * 8;
|
||||
$space_large: $basic_space * 16;
|
||||
$space_tiny: 1px !default;
|
||||
$space_basic: $space_tiny * 8 !default;
|
||||
$space_half: $space_basic / 2;
|
||||
$space_double: $space_basic * 2;
|
||||
$space_small: $space_basic * 4;
|
||||
$space_medium: $space_basic * 8;
|
||||
$space_large: $space_basic * 16;
|
||||
|
||||
$basic_margin: $basic_space 0 !default;
|
||||
$high_margin: $double_space 0 !default;
|
||||
$io_margin: 0 $space_small 0 0 !default;
|
||||
$margin_basic: $space_basic 0 !default;
|
||||
$margin_double: $space_double 0 !default;
|
||||
$margin_io: 0 $space_small 0 0 !default;
|
||||
|
||||
$basic_padding: calc(#{$basic_space} - 3px) $basic_space !default;
|
||||
$wide_padding: calc(#{$basic_space} - 1px) calc(#{$basic_space} * 2) !default;
|
||||
$padding_basic: calc(#{$space_basic} - 3px) $space_basic !default;
|
||||
$padding_link: calc(#{$space_basic} - 1px) calc(#{$space_basic} * 2) !default;
|
||||
|
||||
$basic_indent: 2em !default;
|
||||
$indent_basic: 2em !default;
|
||||
|
||||
$basic_corner: $tiny_space * 2;
|
||||
$border_basic: $space_tiny solid $color_border_basic;
|
||||
$border_dotted: $space_tiny dotted $color_border_basic;
|
||||
$width_border_basic: $space_tiny !default;
|
||||
$width_border_4: $width_border_basic * 4;
|
||||
$width_border_8: $width_border_basic * 8;
|
||||
|
||||
// Borders
|
||||
$basic_border_width: $tiny_space !default;
|
||||
$border_width_4: $basic_border_width * 4;
|
||||
$border_width_8: $basic_border_width * 8;
|
||||
$basic_border: $tiny_space solid $basic_border_color;
|
||||
$dotted_border: $tiny_space dotted $basic_border_color;
|
||||
|
||||
$basic_corner_radius: $tiny_space * 2;
|
||||
|
||||
$basic_aside_width: 20%;
|
||||
$radius_basic: $space_tiny * 2 !default;
|
||||
|
||||
|
||||
|
||||
|
|
@ -210,29 +198,28 @@ $io_focus_list:
|
|||
'textarea:not([disabled])',
|
||||
'*[tabindex]';
|
||||
|
||||
$basic_io_font_color: lighten($basic_font_color, $color_diff_basic);
|
||||
$basic_io_back_color: darken($basic_front_color, $color_diff_basic);
|
||||
$basic_io_border_color: $basic_front_color;
|
||||
$color_text_io: lighten($color_text_basic, $color_diff_basic) !default;
|
||||
$color_text_button: $color_text_basic !default;
|
||||
$color_back_io: darken($color_front_basic, $color_diff_basic) !default;
|
||||
$color_back_button: $color_darker !default;
|
||||
$color_border_io: $color_front_basic !default;
|
||||
$color_border_button: $color_dark !default;
|
||||
|
||||
$oi_font_color: $basic_font_color;
|
||||
$oi_back_color: darken($color_back_basic, $color_diff_basic);
|
||||
$oi_border_color: darken($oi_back_color, $color_diff_basic);
|
||||
$width_border_io: $space_tiny * 2 !default;
|
||||
$border_io: $width_border_io solid $color_border_io;
|
||||
$border_io_dotted: $width_border_io dotted $color_border_io;
|
||||
|
||||
$basic_io_border_width: $tiny_space * 2 !default;
|
||||
$basic_io_border: $basic_io_border_width solid $basic_io_border_color;
|
||||
$dotted_io_border: $basic_io_border_width dotted $basic_io_border_color;
|
||||
|
||||
$basic_shadow: inset 0 1px 3px rgba($darkest_color, 0.06);
|
||||
$basic_focus_shadow: $basic_shadow, 0 0 5px adjust-color($basic_action_color, $lightness: -5%, $alpha: -0.3);
|
||||
$shadow_basic: inset 0 1px 3px rgba($color_darkest, 0.06);
|
||||
$shadow_focus: $shadow_basic, 0 0 5px adjust-color($color_action_basic, $lightness: -5%, $alpha: -0.3);
|
||||
|
||||
|
||||
|
||||
// ANIMATIONS
|
||||
// ------------------------------------------------------------------------------
|
||||
$basic_duration: 250ms;
|
||||
$double_duration: 500ms;
|
||||
$extended_duration: 2s;
|
||||
$basic_timing: ease-out;
|
||||
$duration_basic: 250ms !default;
|
||||
$duration_double: $duration_basic * 2;
|
||||
$duration_long: 2s !default;
|
||||
$timing_basic: ease-out !default;
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,53 +2,47 @@
|
|||
// -----------------------------------------------------------------------------
|
||||
|
||||
%basic {
|
||||
font-family: $primary_font_family;
|
||||
font-size: $text_size_1;
|
||||
line-height: $text_line_basic;
|
||||
font-family: $family_text_basic;
|
||||
font-size: $size_text_1;
|
||||
line-height: $line_text_basic;
|
||||
}
|
||||
|
||||
%basic_mono {
|
||||
font-family: $monospace_font_family;
|
||||
font-size: $text_size_1;
|
||||
line-height: $text_line_mono;
|
||||
font-family: $family_text_mono;
|
||||
font-size: $size_text_1;
|
||||
line-height: $line_text_mono;
|
||||
}
|
||||
|
||||
%basic_print {
|
||||
font-family: $print_font_family;
|
||||
font-size: $text_size_1;
|
||||
line-height: $text_line_basic;
|
||||
font-family: $family_text_print;
|
||||
font-size: $size_text_1;
|
||||
line-height: $line_text_basic;
|
||||
}
|
||||
|
||||
%head_all {
|
||||
color: $basic_head_color;
|
||||
color: $color_head_basic;
|
||||
font-family: $family_head_basic;
|
||||
line-height: $line_head_basic;
|
||||
}
|
||||
|
||||
%head_1 {
|
||||
font-family: $secondary_font_family;
|
||||
font-size: $head_size_1;
|
||||
font-size: $size_head_1;
|
||||
font-weight: 300;
|
||||
line-height: $head_line_basic;
|
||||
}
|
||||
|
||||
%head_2 {
|
||||
font-family: $secondary_font_family;
|
||||
font-size: $head_size_2;
|
||||
font-size: $size_head_2;
|
||||
font-weight: 300;
|
||||
line-height: $head_line_2;
|
||||
}
|
||||
|
||||
%head_3 {
|
||||
font-family: $secondary_font_family;
|
||||
font-size: $head_size_3;
|
||||
font-size: $size_head_3;
|
||||
font-weight: 300;
|
||||
line-height: $head_line_3;
|
||||
}
|
||||
|
||||
%head_4 {
|
||||
font-family: $secondary_font_family;
|
||||
font-size: $head_size_4;
|
||||
font-size: $size_head_4;
|
||||
font-weight: 300;
|
||||
line-height: $head_line_4;
|
||||
}
|
||||
|
||||
%basic_button {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
// ------------------------------------------------------------------------------
|
||||
|
||||
%wip {
|
||||
border-right: $basic_space solid rgba(crimson, 0.8);
|
||||
border-right: $space_basic solid rgba(crimson, 0.8);
|
||||
background-color: rgba(crimson, 0.1) !important;
|
||||
}
|
||||
.wip {
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
z-index: 100;
|
||||
top: $space_large;
|
||||
left: $space_large;
|
||||
padding: $half_space;
|
||||
padding: $space_half;
|
||||
border: 4px solid $color_back_basic;
|
||||
border-radius: 4px;
|
||||
background-color: $color_back_basic;
|
||||
|
|
@ -54,14 +54,14 @@
|
|||
}
|
||||
.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;
|
||||
top: -$size_text_basic / 4 * 3;
|
||||
right: -$size_text_basic / 2;
|
||||
width: $size_text_basic;
|
||||
height: $size_text_basic;
|
||||
border: $space_tiny solid $color_highlight_basic;
|
||||
border-radius: $size_text_basic;
|
||||
color: $color_highlight_basic;
|
||||
background-color: $color_darkest;
|
||||
}
|
||||
|
||||
.exp_expose {
|
||||
|
|
@ -78,24 +78,24 @@
|
|||
position: fixed;
|
||||
width: 3em;
|
||||
height: 2em;
|
||||
// padding: $basic_space $basic_space * 2;
|
||||
// padding: $space_basic $space_basic * 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
.exp_help_btn {
|
||||
display: table;
|
||||
right: $double_space;
|
||||
bottom: $double_space;
|
||||
background-color: rgba($darkest_color, 0.4);
|
||||
right: $space_double;
|
||||
bottom: $space_double;
|
||||
background-color: rgba($color_darkest, 0.4);
|
||||
&:hover {
|
||||
background-color: $brightest_color;
|
||||
background-color: $color_brightest;
|
||||
> .span_solo {
|
||||
color: $darkest_color;
|
||||
color: $color_darkest;
|
||||
}
|
||||
}
|
||||
.span_solo {
|
||||
display: table-cell;
|
||||
color: rgba($brightest_color, 0.8);
|
||||
font-family: $monospace_font_family;
|
||||
color: rgba($color_brightest, 0.8);
|
||||
font-family: $family_text_mono;
|
||||
font-size: 1.4em;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ nav {
|
|||
}
|
||||
|
||||
li {
|
||||
margin-bottom: $basic_space;
|
||||
margin-bottom: $space_basic;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -15,12 +15,12 @@ nav {
|
|||
@extend .overflow;
|
||||
|
||||
ul {
|
||||
margin: $basic_space 0;
|
||||
margin: $space_basic 0;
|
||||
}
|
||||
|
||||
li {
|
||||
@extend .float_space_left;
|
||||
margin-right: $basic_space;
|
||||
margin-right: $space_basic;
|
||||
margin-bottom: 0;
|
||||
|
||||
&:last-child {
|
||||
|
|
@ -32,28 +32,28 @@ nav {
|
|||
|
||||
.nav_right {
|
||||
float: right;
|
||||
margin-left: $basic_space;
|
||||
margin-left: $space_basic;
|
||||
|
||||
.align_parent {
|
||||
margin-right: $basic_space * -1;
|
||||
margin-right: $space_basic * -1;
|
||||
}
|
||||
}
|
||||
|
||||
.nav_separate {
|
||||
li {
|
||||
position: relative;
|
||||
padding-left: $tiny_space;
|
||||
padding-left: $space_tiny;
|
||||
|
||||
&:not(:first-child) {
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: $tiny_space;
|
||||
width: $space_tiny;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: $basic_border_color;
|
||||
background-color: $color_border_basic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -65,17 +65,17 @@ nav {
|
|||
position: relative;
|
||||
|
||||
&:first-child {
|
||||
padding-left: $basic_space * 2 + $tiny_space;
|
||||
padding-left: $space_basic * 2 + $space_tiny;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: $tiny_space;
|
||||
width: $space_tiny;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: $basic_front_color;
|
||||
margin: 0 $basic_space;
|
||||
background-color: $color_front_basic;
|
||||
margin: 0 $space_basic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -96,7 +96,7 @@ nav {
|
|||
|
||||
.nav_column {
|
||||
position: relative;
|
||||
margin: $basic_space 0;
|
||||
margin: $space_basic 0;
|
||||
|
||||
ul {
|
||||
@extend .flex;
|
||||
|
|
@ -119,11 +119,11 @@ nav {
|
|||
position: fixed;
|
||||
// display: table;
|
||||
// width: 3em;
|
||||
right: $half_space;
|
||||
bottom: $double_space;
|
||||
right: $space_half;
|
||||
bottom: $space_double;
|
||||
|
||||
ul {
|
||||
margin: $basic_space 0;
|
||||
margin: $space_basic 0;
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
@ -145,7 +145,7 @@ nav {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $basic_action_color;
|
||||
background-color: $color_action_basic;
|
||||
}
|
||||
}
|
||||
.sprite_img {
|
||||
|
|
@ -163,8 +163,8 @@ nav {
|
|||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: rgba($basic_font_color, 0.2);
|
||||
color: $basic_font_color;
|
||||
background-color: rgba($color_text_basic, 0.2);
|
||||
color: $color_text_basic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
// ------------------------------------------------------------------------------
|
||||
|
||||
%paper {
|
||||
background-color: $basic_front_color;
|
||||
background-color: $color_front_basic;
|
||||
}
|
||||
|
||||
$a4: ".dina4" 1.2cm 1.2cm 1.2cm 2.4cm;
|
||||
|
|
@ -17,7 +17,7 @@ $a6: ".dina6" 0 0 0 1.2cm;
|
|||
$din: $a4, $a5, $a6;
|
||||
|
||||
.print_body {
|
||||
font-size: $basic_print_size;
|
||||
font-size: $size_text_print;
|
||||
margin: 10vh 20vw;
|
||||
|
||||
@page {
|
||||
|
|
|
|||
|
|
@ -1,68 +1,68 @@
|
|||
.table_link {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
table-layout: auto;
|
||||
|
||||
tbody {
|
||||
border-bottom: $basic_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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.table_link {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
table-layout: auto;
|
||||
|
||||
tbody {
|
||||
border-bottom: $border_basic;
|
||||
|
||||
&:hover {
|
||||
background-color: $color_bright;
|
||||
}
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.cell_icon {
|
||||
width: 48px;
|
||||
text-align: center;
|
||||
img {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
}
|
||||
|
||||
.cell_link {
|
||||
padding-right: $space_basic;
|
||||
padding-left: $space_basic;
|
||||
|
||||
&:hover {
|
||||
background-color: $foxtrot_color;
|
||||
a:first-child {
|
||||
display: none;
|
||||
}
|
||||
a:last-child {
|
||||
display: block;
|
||||
color: $color_highlight_basic;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a:last-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
th:last-child, .cell_date {
|
||||
width: 16%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cell_text {
|
||||
padding-right: $space_basic;
|
||||
padding-left: $space_basic;
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.shorten {
|
||||
@extend %short;
|
||||
max-height: 44px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
}
|
||||
|
||||
.demo__header {
|
||||
padding: $double_space;
|
||||
padding: $space_double;
|
||||
|
||||
nav {
|
||||
|
||||
|
|
@ -44,8 +44,8 @@
|
|||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: rgba($brightest_color, 0.2);
|
||||
color: $brightest_color;
|
||||
background-color: rgba($color_brightest, 0.2);
|
||||
color: $color_brightest;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -65,8 +65,8 @@
|
|||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: rgba($brightest_color, 0.2);
|
||||
color: $brightest_color;
|
||||
background-color: rgba($color_brightest, 0.2);
|
||||
color: $color_brightest;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -75,14 +75,14 @@
|
|||
.demo__footer {
|
||||
width: 100%;
|
||||
// height: 128px;
|
||||
padding: $double_space 0;
|
||||
background-color: $dark_color;
|
||||
color: $bright_color;
|
||||
padding: $space_double 0;
|
||||
background-color: $color_dark;
|
||||
color: $color_bright;
|
||||
|
||||
nav {
|
||||
|
||||
a {
|
||||
color: $brightest_color;
|
||||
color: $color_brightest;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
}
|
||||
|
||||
.demo__credits {
|
||||
margin: $space_small 0 $basic_space 0;
|
||||
margin: $space_small 0 $space_basic 0;
|
||||
}
|
||||
|
||||
.demo__button_32 {
|
||||
|
|
@ -137,43 +137,43 @@
|
|||
|
||||
|
||||
.demo__queries > p {
|
||||
padding: $basic_padding;
|
||||
padding: $padding_basic;
|
||||
}
|
||||
|
||||
.query_phoneUp {
|
||||
@include forPhoneUp {background-color: rgba($basic_font_color, 0.2)};
|
||||
@include forPhoneUp {background-color: rgba($color_text_basic, 0.2)};
|
||||
}
|
||||
|
||||
.query_phoneOnly {
|
||||
@include forPhoneOnly { background-color: rgba($basic_font_color, 0.2); }
|
||||
@include forPhoneOnly { background-color: rgba($color_text_basic, 0.2); }
|
||||
}
|
||||
|
||||
.query_tabletPortaitOnly {
|
||||
@include forTabletPortraitOnly { background-color: rgba($basic_font_color, 0.2); }
|
||||
@include forTabletPortraitOnly { background-color: rgba($color_text_basic, 0.2); }
|
||||
}
|
||||
|
||||
.query_tabletPortraitUp {
|
||||
@include forTabletPortraitUp { background-color: rgba($basic_font_color, 0.2); }
|
||||
@include forTabletPortraitUp { background-color: rgba($color_text_basic, 0.2); }
|
||||
}
|
||||
|
||||
.query_tabletLandscapeOnly {
|
||||
@include forTabletLandscapeOnly { background-color: rgba($basic_font_color, 0.2); }
|
||||
@include forTabletLandscapeOnly { background-color: rgba($color_text_basic, 0.2); }
|
||||
}
|
||||
|
||||
.query_tabletLandscapeUp {
|
||||
@include forTabletLandscapeUp { background-color: rgba($basic_font_color, 0.2); }
|
||||
@include forTabletLandscapeUp { background-color: rgba($color_text_basic, 0.2); }
|
||||
}
|
||||
|
||||
.query_desktopOnly {
|
||||
@include forDesktopOnly { background-color: rgba($basic_font_color, 0.2); }
|
||||
@include forDesktopOnly { background-color: rgba($color_text_basic, 0.2); }
|
||||
}
|
||||
|
||||
.query_desktopUp {
|
||||
@include forDesktopUp { background-color: rgba($basic_font_color, 0.2); }
|
||||
@include forDesktopUp { background-color: rgba($color_text_basic, 0.2); }
|
||||
}
|
||||
|
||||
.query_bigDesktopUp {
|
||||
@include forBigDesktopUp { background-color: rgba($basic_font_color, 0.2); }
|
||||
@include forBigDesktopUp { background-color: rgba($color_text_basic, 0.2); }
|
||||
}
|
||||
|
||||
.demo__query_example {
|
||||
|
|
@ -205,10 +205,10 @@
|
|||
& { content: '1920px'; }
|
||||
}
|
||||
content: '< 768px';
|
||||
padding: $basic_padding;
|
||||
border-radius: $basic_corner_radius;
|
||||
color: $brightest_color;
|
||||
background-color: rgba($basic_front_color, 0.2);
|
||||
padding: $padding_basic;
|
||||
border-radius: $radius_basic;
|
||||
color: $color_brightest;
|
||||
background-color: rgba($color_front_basic, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -222,11 +222,11 @@
|
|||
}
|
||||
|
||||
.demo__td_pr {
|
||||
padding-right: $double_space;
|
||||
padding-right: $space_double;
|
||||
}
|
||||
|
||||
.demo__td_pl {
|
||||
padding-left: $double_space;
|
||||
padding-left: $space_double;
|
||||
}
|
||||
|
||||
// Index
|
||||
|
|
@ -244,6 +244,6 @@
|
|||
|
||||
ul {
|
||||
padding: 1em 5em;
|
||||
background-color: darken($color_back_basic, $color_diff_basic);
|
||||
background-color: $color_darker;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue