General push forward with more content (interactive elements)
- added list for deprecated packages - removed deprecated node packages - reactivated gulp vendor task - work on intro page - redefined interactive styles - better variables in config
This commit is contained in:
Stephan
parent
8b81ed92e1
commit
c391799d02
20 changed files with 4134 additions and 5147 deletions
|
|
@ -39,10 +39,10 @@ address {
|
|||
|
||||
// Line
|
||||
hr {
|
||||
margin: $space_3 auto;
|
||||
margin: $space_small auto;
|
||||
border-width: $basic_border_width 0 0;
|
||||
border-style: solid;
|
||||
border-color: $darkest_color;
|
||||
border-color: $basic_border_color;
|
||||
}
|
||||
|
||||
.hr_hidden {
|
||||
|
|
@ -62,12 +62,12 @@ pre {
|
|||
|
||||
.pre_code {
|
||||
overflow-x: auto;
|
||||
border-color: rgba($brightest_color,.1);
|
||||
border-color: darken($basic_back_color, $tiny_color_diff);
|
||||
border-style: dotted;
|
||||
border-width: 0 0 0 $border_width_4;
|
||||
border-radius: $basic_corner;
|
||||
padding: $basic_space;
|
||||
background-color: rgba($brightest_color,.1);
|
||||
background-color: lighten($basic_back_color, $tiny_color_diff);
|
||||
code {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
|
@ -212,11 +212,11 @@ div {
|
|||
}
|
||||
.column_2 {
|
||||
column-count: 2;
|
||||
column-gap: $space_3;
|
||||
column-gap: $space_small;
|
||||
}
|
||||
.column_3 {
|
||||
column-count: 3;
|
||||
column-gap: $space_4;
|
||||
column-gap: $space_medium;
|
||||
}
|
||||
|
||||
// Space and placeholders
|
||||
|
|
@ -228,7 +228,7 @@ div {
|
|||
.box_cube {
|
||||
float: left;
|
||||
display: table;
|
||||
width: $space_4;
|
||||
width: $space_medium;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
span {
|
||||
|
|
@ -238,21 +238,21 @@ div {
|
|||
|
||||
.box_placeholder {
|
||||
width: 100%;
|
||||
height: $space_4;
|
||||
border: $border_width_4 solid rgba($alpha_color,.1);
|
||||
height: $space_medium;
|
||||
border: $border_width_4 solid transparentize($alpha_color, 0.1);
|
||||
border-radius: $basic_corner;
|
||||
background-color: rgba($alpha_color,.2);
|
||||
background-color: transparentize($alpha_color, 0.2);
|
||||
}
|
||||
|
||||
.box_placeholder_bkg {
|
||||
width: 100%;
|
||||
height: $space_4 * 2;
|
||||
border: $border_width_4 solid rgba($brightest_color,.1);
|
||||
height: $space_medium * 2;
|
||||
border: $border_width_4 solid transparentize($basic_front_color, 0.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='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: rgba($brightest_color,.1);
|
||||
background-color: transparentize($basic_front_color, 0.1);
|
||||
}
|
||||
|
||||
// Data
|
||||
|
|
|
|||
|
|
@ -24,17 +24,12 @@ form {
|
|||
label {
|
||||
@extend %basic;
|
||||
|
||||
input, textarea {
|
||||
input, button, textarea, select {
|
||||
margin-left: $basic_space;
|
||||
}
|
||||
}
|
||||
|
||||
label + textarea {
|
||||
@extend %solo;
|
||||
display: block;
|
||||
}
|
||||
|
||||
input, button, textarea {
|
||||
input, button, textarea, select {
|
||||
margin: $io_margin;
|
||||
|
||||
&[disabled="disabled"],
|
||||
|
|
@ -45,51 +40,60 @@ input, button, textarea {
|
|||
|
||||
input {
|
||||
color: $basic_io_font_color;
|
||||
|
||||
&[disabled="disabled"],
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@each $input in $basic_input_list, textarea, select {
|
||||
@each $input in $io_input_list, textarea, select {
|
||||
#{$input} {
|
||||
@extend %basic_mono;
|
||||
padding: $half_space;
|
||||
background-color: $basic_io_back_color;
|
||||
|
||||
&:hover {
|
||||
background-color: $basic_highlight_color;
|
||||
}
|
||||
|
||||
&[readonly="readonly"],
|
||||
&[readonly] {
|
||||
border-color: darken($basic_io_border_color, 30%);
|
||||
background-color: darken($basic_io_back_color, 30%);
|
||||
}
|
||||
|
||||
&[disabled="disabled"],
|
||||
&[disabled] {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $input in $basic_input_list, textarea {
|
||||
#{$input} {
|
||||
border: $basic_io_border;
|
||||
}
|
||||
}
|
||||
|
||||
@each $input in $basic_input_list {
|
||||
#{$input} {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@each $input in $basic_button_list {
|
||||
.io_input, .io_textarea, .io_select {
|
||||
padding: $half_space;
|
||||
background-color: $basic_io_back_color;
|
||||
|
||||
&:hover {
|
||||
background-color: $basic_highlight_color;
|
||||
}
|
||||
|
||||
&[readonly="readonly"],
|
||||
&[readonly] {
|
||||
background-color: darken($basic_io_back_color, 30%);
|
||||
}
|
||||
|
||||
&[disabled="disabled"],
|
||||
&[disabled] {
|
||||
&:hover {
|
||||
background-color: $basic_io_back_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $input in $io_date_list {
|
||||
#{$input} {
|
||||
padding: $basic_padding;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@each $input in $io_input_list, textarea {
|
||||
#{$input} {
|
||||
// border: $basic_io_border;
|
||||
}
|
||||
}
|
||||
|
||||
.io_input, .io_textarea {
|
||||
border: $basic_io_border;
|
||||
|
||||
&[readonly="readonly"],
|
||||
&[readonly] {
|
||||
border-color: darken($basic_io_border_color, 30%);
|
||||
}
|
||||
|
||||
&[disabled="disabled"],
|
||||
&[disabled] {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -104,17 +108,35 @@ legend {
|
|||
padding: 0 $half_space;
|
||||
}
|
||||
|
||||
label + input,
|
||||
.input_label_right,
|
||||
.label > input,
|
||||
.label > select {
|
||||
margin: 0 $basic_space;
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
&:hover {
|
||||
// border-color: #0059F6;
|
||||
border-color: transparent;
|
||||
color: white;
|
||||
background-color: $foxtrot_color;
|
||||
}
|
||||
|
||||
&[disabled="disabled"],
|
||||
&[disabled] {
|
||||
border-color: transparent;
|
||||
color: $oi_border_color;
|
||||
|
||||
&:hover {
|
||||
background-color: $oi_back_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
border: none;
|
||||
}
|
||||
|
|
@ -132,7 +154,10 @@ option {
|
|||
}
|
||||
|
||||
textarea {
|
||||
}
|
||||
|
||||
.io_textarea {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
output {
|
||||
|
|
@ -192,6 +217,12 @@ canvas {
|
|||
line-height: 2.5;
|
||||
}
|
||||
|
||||
.label > input,
|
||||
.label > textarea,
|
||||
.label > select {
|
||||
margin: 0 $basic_space;
|
||||
}
|
||||
|
||||
.label_table {
|
||||
display: table;
|
||||
|
||||
|
|
@ -200,23 +231,45 @@ canvas {
|
|||
}
|
||||
}
|
||||
|
||||
.input_default {
|
||||
label + input {
|
||||
margin-left: $basic_space;
|
||||
}
|
||||
|
||||
label {
|
||||
@extend .label_table;
|
||||
margin: $half_space 0;
|
||||
input + label {
|
||||
margin-left: $basic_space;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: $half_space ($half_space + 1);
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
background-color: $basic_io_back_color;
|
||||
color: $basic_io_font_color;
|
||||
td > input,
|
||||
td > button,
|
||||
td > select,
|
||||
td > textarea {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $darkest_color;
|
||||
color: $brightest_color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-gap: $basic_space;
|
||||
|
||||
& > input,
|
||||
& > select,
|
||||
& > textarea {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& > label {
|
||||
display: inline-block;
|
||||
margin: $basic_io_border_width;
|
||||
padding: $half_space;
|
||||
}
|
||||
}
|
||||
|
||||
.grid_column_2 {
|
||||
grid-template-columns: max-content max-content;
|
||||
|
||||
}
|
||||
|
||||
.grid_column_4 {
|
||||
grid-template-columns: max-content max-content max-content max-content;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ html {
|
|||
body {
|
||||
position: relative;
|
||||
box-sizing: $box_sizing;
|
||||
margin: 0;
|
||||
font-family: $primary_font_family;
|
||||
font-size: $basic_size;
|
||||
line-height: $basic_line;
|
||||
|
|
@ -38,7 +39,7 @@ body {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
|
||||
.layer_hover {
|
||||
background-color: transparent !important;
|
||||
transition: background-color $double_duration $basic_timing 0s !important;
|
||||
|
|
@ -59,7 +60,7 @@ section {
|
|||
.sec_main_center {
|
||||
width: $basic_width;
|
||||
margin: 0 auto;
|
||||
padding-top: $space_3;
|
||||
padding-top: $space_small;
|
||||
|
||||
@include forTabletPortraitUp {
|
||||
width: $width_small;
|
||||
|
|
@ -76,7 +77,7 @@ section {
|
|||
border-top-width: $border_width_8;
|
||||
border-top-style: solid;
|
||||
border-color: $basic_border_color;
|
||||
padding-top: $space_3;
|
||||
padding-top: $space_small;
|
||||
}
|
||||
|
||||
// Navigation
|
||||
|
|
@ -111,12 +112,12 @@ aside {
|
|||
|
||||
// Headings
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
|
||||
@extend %head_all;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@extend %head_1;
|
||||
margin: $space_5 0 $space_3;
|
||||
margin: $space_large 0 $space_small;
|
||||
}
|
||||
|
||||
h1 + h1 {
|
||||
|
|
@ -125,7 +126,7 @@ h1 + h1 {
|
|||
|
||||
h2 {
|
||||
@extend %head_2;
|
||||
margin: $space_4 0 $space_3;
|
||||
margin: $space_medium 0 $space_small;
|
||||
}
|
||||
|
||||
h2 + h2 {
|
||||
|
|
@ -167,7 +168,7 @@ header {
|
|||
}
|
||||
|
||||
.header_txt {
|
||||
margin-bottom: $space_3;
|
||||
margin-bottom: $space_small;
|
||||
border-bottom: $dotted_border;
|
||||
|
||||
h1 {
|
||||
|
|
|
|||
|
|
@ -76,8 +76,10 @@ td:last-child {
|
|||
|
||||
// General Classes
|
||||
// ------------------------------------------------------------------------------
|
||||
.precol {
|
||||
border-right: $basic_border;
|
||||
.cell_pre {
|
||||
// border-right-width: $border_width_4;
|
||||
// border-right-color: lighten($basic_back_color, $basic_color_diff);
|
||||
background-color: lighten($basic_back_color, $tiny_color_diff);
|
||||
}
|
||||
|
||||
.table_blank {
|
||||
|
|
@ -99,7 +101,7 @@ td:last-child {
|
|||
}
|
||||
|
||||
tr:nth-child(even) td {
|
||||
background-color: rgba($brightest_color, 0.1);
|
||||
background-color: lighten($basic_back_color, $tiny_color_diff);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@ i, em {
|
|||
|
||||
.i_bright {
|
||||
font-style: normal;
|
||||
color: $brightest_color;
|
||||
color: $basic_highlight_color;
|
||||
}
|
||||
|
||||
// Bold, Strong
|
||||
|
|
@ -160,7 +160,7 @@ time {
|
|||
code {
|
||||
@extend %basic_mono;
|
||||
color: lighten($basic_font_color, $basic_color_diff);
|
||||
background-color: rgba($brightest_color,.1);
|
||||
background-color: lighten($basic_back_color, $tiny_color_diff);
|
||||
}
|
||||
.code_solo {
|
||||
@extend %basic_mono;
|
||||
|
|
@ -200,17 +200,9 @@ u {
|
|||
mark {
|
||||
background-color: $alpha_color;
|
||||
}
|
||||
.mark_cursor {
|
||||
color: $basic_highlight_color;
|
||||
background-color: $darkest_color;
|
||||
}
|
||||
::-moz-selection {
|
||||
color: $basic_highlight_color;
|
||||
background-color: $darkest_color;
|
||||
}
|
||||
::selection {
|
||||
color: $basic_highlight_color;
|
||||
background-color: $darkest_color;
|
||||
.mark_cursor, ::-moz-selection, ::selection {
|
||||
color: invert($basic_font_color);
|
||||
background-color: $basic_font_color;
|
||||
}
|
||||
|
||||
bdi, bdo {
|
||||
|
|
@ -281,6 +273,14 @@ del {
|
|||
text-align: left !important;
|
||||
}
|
||||
|
||||
.txt_top {
|
||||
vertical-align: top !important;
|
||||
}
|
||||
|
||||
.txt_bottom {
|
||||
vertical-align: bottom !important;
|
||||
}
|
||||
|
||||
.txt_white {
|
||||
color: white;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue