interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

General push forward with more content (interactive elements)

Browse source 
- 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 2018-10-06 15:11:33 +02:00
parent 8b81ed92e1
commit c391799d02
20 changed files with 4134 additions and 5147 deletions
Download patch file Download diff file Expand all files Collapse all files

26
source/style/hippie/elements/_grouping.scss
View file

@ -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

183
source/style/hippie/elements/_interactive.scss
View file

@ -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;
}

15
source/style/hippie/elements/_sections.scss
View file

@ -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 {

8
source/style/hippie/elements/_tables.scss
View file

@ -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);
}
}

26
source/style/hippie/elements/_textlevel.scss
View file

@ -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;
}

10
source/style/hippie/global/_common.scss
View file

@ -22,10 +22,16 @@
@extend %hidden;
}
.center_auto {
margin-right: auto;
margin-left: auto;
}
.center_50 {
margin-right: 25%;
margin-left: 25%;
}
.center_25 {
margin-right: 37.5%;
margin-left: 37.5%;
@ -58,7 +64,7 @@
}
.space_right {
margin-right: $space_3;
margin-right: $space_small;
}
.wrap_center {
@ -108,7 +114,7 @@
.float_space_left {
@extend .float_left;
margin-right: $space_3;
margin-right: $space_small;
}
.float_half_size {

90
source/style/hippie/global/_config.scss
View file

@ -86,28 +86,30 @@ $color_palette: (
@include addDefaultColors;
$basic_color_diff: 12% !default;
$tiny_color_diff: 4% !default;
$double_color_diff: $basic_color_diff * 2;
$darkest_color: black !default;
$brightest_color: white !default;
$medium_color: lighten($darkest_color, 50%) !default;
$dark_color: lighten($darkest_color, 20%) !default;
$bright_color: darken($brightest_color, 20%) !default;
$basic_front_color: $darkest_color !default;
$basic_back_color: $medium_color !default;
$basic_font_color: $basic_front_color !default;
$basic_head_color: $basic_front_color !default;
$basic_font_color: black !default;
$basic_back_color: #808080 !default;
$basic_border_color: lighten($basic_font_color, $basic_color_diff) !default;
$basic_front_color: white !default;
$medium_color: lighten($darkest_color, 50%);
$dark_color: lighten($darkest_color, $double_color_diff);
$bright_color: darken($brightest_color, $double_color_diff);
$basic_head_color: $basic_font_color !default;
$basic_link_color: $echo_color !default;
$basic_highlight_color: $brightest_color !default;
$basic_highlight_color: $basic_front_color !default;
$basic_action_color: $foxtrot_color !default;
$basic_border_color: $basic_front_color !default;
// default shadow colors
// $shadow_color: fade-out($medium_color, 0.5);
$basic_color_diff: 12% !default;
$basic_color_list: ();
@each $key, $value in $color_palette {
@ -132,17 +134,17 @@ $width_small: 80% !default;
$width_medium: 60% !default;
$width_large: 48% !default;
$basic_space: 8px !default;
$tiny_space: 1px !default;
$half_space: $basic_space / 2 !default;
$double_space: $basic_space * 2 !default;
$space_3: $basic_space * 4;
$space_4: $basic_space * 8;
$space_5: $basic_space * 16;
$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;
$basic_margin: $basic_space 0 !default;
$high_margin: $double_space 0 !default;
$io_margin: 0 $space_3 !default;
$io_margin: 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;
@ -151,8 +153,8 @@ $basic_corner: $tiny_space * 2;
// Borders
$basic_border_width: $tiny_space !default;
$border_width_4: $tiny_space * 4;
$border_width_8: $tiny_space * 8;
$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;
$cell_border: $tiny_space solid $darkest_color;
@ -165,31 +167,39 @@ $basic_aside_width: 20%;
// IO
// ------------------------------------------------------------------------------
$basic_input_list:
$io_input_list:
'input[type="text"]',
'input[type="number"]',
'input[type="color"]',
'input[type="range"]',
'input[type="date"]',
'input[type="datetime"]',
'input[type="datetime-local"]',
'input[type="email"]',
'input[type="month"]',
'input[type="number"]',
'input[type="password"]',
'input[type="search"]',
'input[type="tel"]',
'input[type="text"]',
'input[type="time"]',
'input[type="url"]',
'input[type="week"]',
'input[type="datetime-local"]',
'input[type="month"]',
'input[type="week"]',
'input[type="email"]',
'input[type="password"]',
'input[type="tel"]',
'input[type="url"]',
'input[type="search"]',
'input:not([type])';
$basic_button_list:
$io_date_list:
'.io_input[type="date"]',
'.io_input[type="time"]',
'.io_input[type="datetime-local"]',
'.io_input[type="month"]',
'.io_input[type="week"]';
$io_button_list:
'button',
'input[type="button"]',
// 'input[type="file"]',
'input[type="reset"]',
'input[type="image"]',
'input[type="submit"]';
$basic_focus_list:
$io_focus_list:
'a[href]',
'area[href]',
'button:not([disabled])',
@ -199,12 +209,16 @@ $basic_focus_list:
'*[tabindex]';
$basic_io_font_color: lighten($basic_font_color, $basic_color_diff);
$basic_io_back_color: darken($brightest_color, $basic_color_diff);
$basic_io_border_color: $brightest_color;
$basic_io_back_color: darken($basic_front_color, $basic_color_diff);
$basic_io_border_color: $basic_front_color;
$oi_font_color: $basic_font_color;
$oi_back_color: darken($basic_back_color, $basic_color_diff);
$oi_border_color: darken($oi_back_color, $basic_color_diff);
$basic_io_border_width: $tiny_space * 2 !default;
$basic_io_border: $basic_io_border_width solid $basic_io_border_color;
$dotted_io_border: $tiny_space dotted $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);

4
source/style/hippie/global/_typography.scss
View file

@ -51,6 +51,10 @@
line-height: $head_line_4;
}
%basic_button {
@extend %basic;
}
%solo {
@extend %basic;
}

2
source/style/hippie/mixins/_user_agent.scss
View file

@ -1,6 +1,6 @@
@mixin overrideUserAgent() {
@if $no_agent_focus == true {
@each $el in $basic_focus_list {
@each $el in $io_focus_list {
#{$el}:focus {
outline: 0;
}

230
source/style/hippie/modules/explanation/_explanation_module.scss
View file

@ -1,115 +1,115 @@
// Custom extends and mixins
// ------------------------------------------------------------------------------
@import "mixins";
@import "extends";
// Explanation module styles
// ------------------------------------------------------------------------------
%expose_after {
&::after {
content: "";
display: block;
height: 48px;
background-color: rgba($delta_color, 0.1) !important;
}
}
%expose_before {
&::before {
content: "";
display: block;
height: 48px;
background-color: rgba($delta_color, 0.1) !important;
}
}
%expose {
&::before, &::after {
content: "";
display: block;
height: 48px;
background-color: rgba($delta_color, 0.1) !important;
}
}
%exp {
}
%exp_hidden {
display: none;
}
.exp_wrap {
position: relative;
}
.exp_pop {
@extend %exp_hidden !optional;
position: absolute;
z-index: 100;
top: $space_5;
left: $space_5;
padding: $half_space;
border: 4px solid $basic_back_color;
border-radius: 4px;
background-color: $basic_back_color;
pointer-events: none;
}
.exp_marker_pop {
position: absolute;
top: -$basic_size / 4 * 3;
right: -$basic_size / 2;
width: $basic_size;
height: $basic_size;
border: $tiny_space solid $basic_highlight_color;
border-radius: $basic_size;
color: $basic_highlight_color;
background-color: $darkest_color;
}
.exp_expose {
@extend %expose !optional;
}
.exp_expose_pre {
@extend %expose_after;
}
.exp_expose_post {
@extend %expose_before;
}
.exp_overlay_btn {
position: fixed;
width: 3em;
height: 2em;
// padding: $basic_space $basic_space * 2;
cursor: pointer;
}
.exp_help_btn {
display: table;
right: $double_space;
bottom: $double_space;
background-color: rgba($darkest_color, 0.4);
&:hover {
background-color: $brightest_color;
> .span_solo {
color: $darkest_color;
}
}
.span_solo {
display: table-cell;
color: rgba($brightest_color, 0.8);
font-family: $monospace_font_family;
font-size: 1.4em;
text-align: center;
vertical-align: middle;
}
}
.expose_height {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba($delta_color, 0.1) !important;
@include vendor-prefix(transition, height 0.5s ease);
}
// Custom extends and mixins
// ------------------------------------------------------------------------------
@import "mixins";
@import "extends";
// Explanation module styles
// ------------------------------------------------------------------------------
%expose_after {
&::after {
content: "";
display: block;
height: 48px;
background-color: rgba($delta_color, 0.1) !important;
}
}
%expose_before {
&::before {
content: "";
display: block;
height: 48px;
background-color: rgba($delta_color, 0.1) !important;
}
}
%expose {
&::before, &::after {
content: "";
display: block;
height: 48px;
background-color: rgba($delta_color, 0.1) !important;
}
}
%exp {
}
%exp_hidden {
display: none;
}
.exp_wrap {
position: relative;
}
.exp_pop {
@extend %exp_hidden !optional;
position: absolute;
z-index: 100;
top: $space_large;
left: $space_large;
padding: $half_space;
border: 4px solid $basic_back_color;
border-radius: 4px;
background-color: $basic_back_color;
pointer-events: none;
}
.exp_marker_pop {
position: absolute;
top: -$basic_size / 4 * 3;
right: -$basic_size / 2;
width: $basic_size;
height: $basic_size;
border: $tiny_space solid $basic_highlight_color;
border-radius: $basic_size;
color: $basic_highlight_color;
background-color: $darkest_color;
}
.exp_expose {
@extend %expose !optional;
}
.exp_expose_pre {
@extend %expose_after;
}
.exp_expose_post {
@extend %expose_before;
}
.exp_overlay_btn {
position: fixed;
width: 3em;
height: 2em;
// padding: $basic_space $basic_space * 2;
cursor: pointer;
}
.exp_help_btn {
display: table;
right: $double_space;
bottom: $double_space;
background-color: rgba($darkest_color, 0.4);
&:hover {
background-color: $brightest_color;
> .span_solo {
color: $darkest_color;
}
}
.span_solo {
display: table-cell;
color: rgba($brightest_color, 0.8);
font-family: $monospace_font_family;
font-size: 1.4em;
text-align: center;
vertical-align: middle;
}
}
.expose_height {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba($delta_color, 0.1) !important;
@include vendor-prefix(transition, height 0.5s ease);
}

38
source/style/hippie/modules/maintenance/_maintenance_module.scss
View file

@ -1,19 +1,19 @@
.body_status {
@extend .sec_main_status;
height: 100vh;
border-color: $foxtrot_color;
.main_site {
@extend .wrap_center;
& > h1:first-of-type {
margin-top: 0;
margin-bottom: 0;
font-weight: bold;
line-height: 1;
}
& > h1 + h3 {
margin-top: 0;
margin-bottom: $space_3;
}
}
}
.body_status {
@extend .sec_main_status;
height: 100vh;
border-color: $foxtrot_color;
.main_site {
@extend .wrap_center;
& > h1:first-of-type {
margin-top: 0;
margin-bottom: 0;
font-weight: bold;
line-height: 1;
}
& > h1 + h3 {
margin-top: 0;
margin-bottom: $space_small;
}
}
}

6
source/style/hippie/modules/navigation/_nav_module.scss
View file

@ -53,7 +53,7 @@ nav {
height: 100%;
left: 0;
top: 0;
background-color: $darkest_color;
background-color: $basic_border_color;
}
}
}
@ -74,7 +74,7 @@ nav {
height: 100%;
left: 0;
top: 0;
background-color: $brightest_color;
background-color: $basic_front_color;
margin: 0 $basic_space;
}
}
@ -100,7 +100,7 @@ nav {
ul {
@extend .flex;
margin: 0 $space_5;
margin: 0 $space_large;
li {
@extend .flex_child;

6
source/style/hippie/modules/print/_print_module.scss
View file

@ -7,7 +7,7 @@
// ------------------------------------------------------------------------------
%paper {
background-color: $brightest_color;
background-color: $basic_front_color;
}
$a4: ".dina4" 1.2cm 1.2cm 1.2cm 2.4cm;
@ -97,7 +97,7 @@ $din: $a4, $a5, $a6;
margin-top: 10cm;
margin-bottom: 2cm;
}
margin: $space_3 auto;
margin: $space_small auto;
}
.page_title, .page_date {
@ -125,4 +125,4 @@ $din: $a4, $a5, $a6;
top: 5cm;
left: 0;
}
}
}

41
source/style/modules/demo/_demo_module.scss
View file

@ -126,7 +126,7 @@
}
.demo__credits {
margin: $space_3 0 $basic_space 0;
margin: $space_small 0 $basic_space 0;
}
.demo__button_32 {
@ -141,39 +141,39 @@
}
.query_phoneUp {
@include forPhoneUp {background-color: rgba($basic_front_color, 0.2)};
@include forPhoneUp {background-color: rgba($basic_font_color, 0.2)};
}
.query_phoneOnly {
@include forPhoneOnly { background-color: rgba($basic_front_color, 0.2); }
@include forPhoneOnly { background-color: rgba($basic_font_color, 0.2); }
}
.query_tabletPortaitOnly {
@include forTabletPortraitOnly { background-color: rgba($basic_front_color, 0.2); }
@include forTabletPortraitOnly { background-color: rgba($basic_font_color, 0.2); }
}
.query_tabletPortraitUp {
@include forTabletPortraitUp { background-color: rgba($basic_front_color, 0.2); }
@include forTabletPortraitUp { background-color: rgba($basic_font_color, 0.2); }
}
.query_tabletLandscapeOnly {
@include forTabletLandscapeOnly { background-color: rgba($basic_front_color, 0.2); }
@include forTabletLandscapeOnly { background-color: rgba($basic_font_color, 0.2); }
}
.query_tabletLandscapeUp {
@include forTabletLandscapeUp { background-color: rgba($basic_front_color, 0.2); }
@include forTabletLandscapeUp { background-color: rgba($basic_font_color, 0.2); }
}
.query_desktopOnly {
@include forDesktopOnly { background-color: rgba($basic_front_color, 0.2); }
@include forDesktopOnly { background-color: rgba($basic_font_color, 0.2); }
}
.query_desktopUp {
@include forDesktopUp { background-color: rgba($basic_front_color, 0.2); }
@include forDesktopUp { background-color: rgba($basic_font_color, 0.2); }
}
.query_bigDesktopUp {
@include forBigDesktopUp { background-color: rgba($basic_front_color, 0.2); }
@include forBigDesktopUp { background-color: rgba($basic_font_color, 0.2); }
}
.demo__query_example {
@ -183,8 +183,8 @@
@include goingLarge($screen_large/1px) {background-color: $delta_color; }
@include goingLarge($screen_huge/1px) {background-color: $echo_color; }
@include goingLarge($screen_gigantic/1px) {background-color: $foxtrot_color; }
margin-bottom: $space_3;
padding: $space_3;
margin-bottom: $space_small;
padding: $space_small;
text-align: center;
&:after {
@ -212,6 +212,23 @@
}
}
// Tables
.demo__td_no_bl {
border-left: none;
}
.demo__td_no_br {
border-right: none;
}
.demo__td_pr {
padding-right: $double_space;
}
.demo__td_pl {
padding-left: $double_space;
}
// Index
// -----------------------------------------------------------------------------
.wrap {