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

Changed defaults

Browse source 
Also removed 3rd party flexbox mixins
This commit is contained in:
Stephan 2017-02-27 17:51:25 +01:00
parent ff3af38c25
commit 7e85f9f654
8 changed files with 156 additions and 401 deletions
Download patch file Download diff file Expand all files Collapse all files

18
_config.scss
View file

@ -30,12 +30,13 @@ $head_line_2: $text_line_1;
$head_line_3: $text_line_1; $head_line_3: $text_line_1;
$head_line_4: $text_line_1; $head_line_4: $text_line_1;
$default_font_family: #{'Trebuchet MS', Helvetica, Arial, sans-serif, sans} !default; $default_font_family: #{'Roboto', 'Trebuchet MS', Helvetica, 'Source Sans', Arial, sans-serif, sans} !default;
$print_font_family: #{'Times New Roman', times}; $print_font_family: #{'Times New Roman', times};
$monospace_font_family: #{'Courier New', monospace};
$primary_font_family: $default_font_family; $primary_font_family: $default_font_family;
$secondary_font_family: #{'Roboto', sans-serif}; $secondary_font_family: $default_font_family;
$third_font_family: #{'Courier New', monospace}; $third_font_family: $monospace_font_family;
$fourth_font_family: $print_font_family; $fourth_font_family: $print_font_family;
$basic_indent: 2em; $basic_indent: 2em;
@ -51,9 +52,9 @@ $delta_color: #b7e0f0;
$echo_color: #52bed1; $echo_color: #52bed1;
$foxtrot_color: #0c85ff; $foxtrot_color: #0c85ff;
$black: black; $black: black !default;
$white: white; $white: white !default;
$medium_gray: lighten($black, 50%); $medium_gray: lighten($black, 50%) !default;
$basic_font_color: $black; $basic_font_color: $black;
@ -90,11 +91,12 @@ $space_2: $basic_space * 2;
$space_3: $basic_space * 4; $space_3: $basic_space * 4;
$space_4: $basic_space * 8; $space_4: $basic_space * 8;
$space_5: $basic_space * 16; $space_5: $basic_space * 16;
$tiny_space: 1px; $tiny_space: 1px !default;
$basic_corner: 4px; $basic_corner: 4px;
$basic_border_width: $tiny_space; $default_border_width: $tiny_space !default;
$basic_border_width: $default_border_width;
$border_width_4: $tiny_space * 4; $border_width_4: $tiny_space * 4;
$border_width_8: $tiny_space * 8; $border_width_8: $tiny_space * 8;
$basic_border: $tiny_space solid $basic_border_color; $basic_border: $tiny_space solid $basic_border_color;

20
_default.scss
View file

@ -1,9 +1,21 @@
// Main configuration // Main configuration
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$default_font_size: 15px; //$default_font_size: 15px;
$default_line_height: 1.5; //$default_print_font_size: 10pt;
$default_font_family: #{'Trebuchet MS', Helvetica, Arial, sans-serif, sans}; //$default_line_height: 1.5;
$default_space: 8px; //$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;
//$default_background_color: lighten(black, 50%);
//$default_space: 8px;
//$tiny_space: 1px;
//$default_border_width: $tiny_space;

3
_hippie.scss
View file

@ -46,7 +46,6 @@
// Modules and variables // Modules and variables
// Additional modules can be defined here // Additional modules can be defined here
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
@import "modules/flexbox";
@import "modules/vendor"; @import "modules/vendor";
//@import modules/all deprecated because of the new vendor mixin //@import modules/all deprecated because of the new vendor mixin
//@import modules/*/* needs sass-glob //@import modules/*/* needs sass-glob
@ -57,7 +56,7 @@
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
@import "basic/common"; @import "basic/common";
@import "basic/typography"; @import "basic/typography";
// Following the w3c document element structure // Following the w3c document element structure
// https://w3c.github.io/html/index.html#contents // https://w3c.github.io/html/index.html#contents
@import "basic/sections"; @import "basic/sections";
@import "basic/grouping"; @import "basic/grouping";

13
basic/_common.scss
View file

@ -44,7 +44,7 @@
%size_content_solo { %size_content_solo {
@extend %size_content; @extend %size_content;
*, *,
::before, ::before,
::after { ::after {
@ -94,6 +94,17 @@
bottom: 0; bottom: 0;
} }
// Absolute elements
.fullscreen_body {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: transparentize($alpha_color, .5);;
}
// Space and placeholders // Space and placeholders
.space_box { .space_box {
float: left; float: left;

139
example.css
View file

@ -19,98 +19,6 @@
* *
*/ */
@import url(other/normalize.css); @import url(other/normalize.css);
/**
* @description
* Generates flexbox properties for a given element
*
* @author romamatusevich
*
* @link MDN https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
* @link css-tricks http://css-tricks.com/snippets/css/a-guide-to-flexbox/
* @link spec http://www.w3.org/TR/css3-flexbox/
*/
/**
* @returns
* display: -webkit-box;
* display: -moz-box;
* display: -ms-flexbox;
* display: -webkit-flex;
* display: flex;
*
* @example
* .selector {
* @include x-display-flex;
* }
*/
/**
* @param values
* @returns
* -webkit-box-flex: <values>;
* -moz-box-flex: <values>;
* -webkit-flex: <values>;
* -ms-flex: <values>;
* flex: <values>;
*
* @example
* .selector {
* @include x-flex(1 1 auto);
* }
*/
/**
* @param value
* @returns
* -webkit-box-ordinal-group: <value>;
* -moz-box-ordinal-group: <value>;
* -ms-flex-order: <value>;
* -webkit-order: <value>;
* order: <value>;
*
* @example
* .selector {
* @include x-order(1);
* }
*/
/**
* @param value
* @returns
* -webkit-flex-wrap: <value>;
* -ms-flex-wrap: <value>;
* flex-wrap: <value>;
*
* @example
* .selector {
* @include x-flex-wrap(wrap);
* }
*/
/**
* @param value
* @returns
* -webkit-align-content: <value>;
* -moz-align-content: <value>;
* -ms-flex-line-pack: <value>;
* align-content: <value>;
* @example
* .selector {
* @include x-align-content(center);
* }
*/
/**
* @param value
* @returns
* -webkit-box-direction: <value>;
* -moz-box-direction: <value>;
* -webkit-box-orient: <value>;
* -moz-box-orient: <value>;
* -webkit-flex-direction: <value>;
* -moz-flex-direction: <value>;
* -ms-flex-direction: <value>;
* flex-direction: <value>;
* @example
* .selector {
* @include x-flex-direction(row-reverse);
* }
*/
/* ToDo: add flex-grow, flex-shrink, flex-basis, flex-flow, align-items, align-self, justify-content mixins */
/** /**
* @description * @description
* Generates cross-browser-compatible output for a given element with its value. * Generates cross-browser-compatible output for a given element with its value.
@ -181,6 +89,14 @@
.bottom { .bottom {
bottom: 0; } bottom: 0; }
.fullscreen_body {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(250, 216, 3, 0.5); }
.space_box { .space_box {
float: left; float: left;
display: table; display: table;
@ -216,7 +132,7 @@
background-color: rgba(82, 190, 209, 0.1) !important; } background-color: rgba(82, 190, 209, 0.1) !important; }
.span_solo, h6, p, .p_col_2, .p_col_3, caption, li, dt, dd, figcaption, th, td, legend, label { .span_solo, h6, p, .p_col_2, .p_col_3, caption, li, dt, dd, figcaption, th, td, legend, label {
font-family: Trebuchet MS, Helvetica, Arial, sans-serif, sans; font-family: Roboto, Trebuchet MS, Helvetica, Source Sans, Arial, sans-serif, sans;
font-size: 1em; font-size: 1em;
line-height: 1.5; } line-height: 1.5; }
@ -231,25 +147,25 @@ pre, code, .code_solo {
line-height: 1.5; } line-height: 1.5; }
h1, .exp_help_btn .span_solo, .print_body .page_date, .print_body .page_no { h1, .exp_help_btn .span_solo, .print_body .page_date, .print_body .page_no {
font-family: Roboto, sans-serif; font-family: Roboto, Trebuchet MS, Helvetica, Source Sans, Arial, sans-serif, sans;
font-size: 3.1em; font-size: 3.1em;
font-weight: 300; font-weight: 300;
line-height: 1.5; } line-height: 1.5; }
h2 { h2 {
font-family: Roboto, sans-serif; font-family: Roboto, Trebuchet MS, Helvetica, Source Sans, Arial, sans-serif, sans;
font-size: 2.5em; font-size: 2.5em;
font-weight: 300; font-weight: 300;
line-height: 1.5; } line-height: 1.5; }
h3, h4 { h3, h4 {
font-family: Roboto, sans-serif; font-family: Roboto, Trebuchet MS, Helvetica, Source Sans, Arial, sans-serif, sans;
font-size: 1.8em; font-size: 1.8em;
font-weight: 300; font-weight: 300;
line-height: 1.5; } line-height: 1.5; }
h5 { h5 {
font-family: Roboto, sans-serif; font-family: Roboto, Trebuchet MS, Helvetica, Source Sans, Arial, sans-serif, sans;
font-size: 1.35em; font-size: 1.35em;
font-weight: 300; font-weight: 300;
line-height: 1.5; } line-height: 1.5; }
@ -276,7 +192,7 @@ html {
body { body {
box-sizing: border-box; box-sizing: border-box;
font-family: Trebuchet MS, Helvetica, Arial, sans-serif, sans; font-family: Roboto, Trebuchet MS, Helvetica, Source Sans, Arial, sans-serif, sans;
font-size: 15px; font-size: 15px;
line-height: 1; line-height: 1;
color: black; color: black;
@ -576,20 +492,19 @@ legend {
.card_body { .card_body {
height: 100%; height: 100%;
/* .full { /* .full {
position: absolute; position: absolute;
width: 128px; width: 128px;
height: 128px; height: 128px;
top: 16px; top: 16px;
left: 16px; left: 16px;
background-color: #fff; background-color: #fff;
} }
.mark {
.mark { float: left;
float: left; width: 32px;
width: 32px; height: 32px;
height: 32px; margin-top: 16px;
margin-top: 16px; }
}
*/ } */ }
.card_body .bkg_box { .card_body .bkg_box {
transition-duration: 800ms; transition-duration: 800ms;

175
modules/_flexbox.scss
View file

@ -1,175 +0,0 @@
/**
* @description
* Generates flexbox properties for a given element
*
* @author romamatusevich
*
* @link MDN https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
* @link css-tricks http://css-tricks.com/snippets/css/a-guide-to-flexbox/
* @link spec http://www.w3.org/TR/css3-flexbox/
*/
/**
* @returns
* display: -webkit-box;
* display: -moz-box;
* display: -ms-flexbox;
* display: -webkit-flex;
* display: flex;
*
* @example
* .selector {
* @include x-display-flex;
* }
*/
@mixin x-display-flex {
display: -webkit-box; // Chrome 20-, iOS 6-, Safari 3.1 -6
display: -moz-box; // FF 19-
display: -webkit-flex; // Chrome 21 - 28
display: -ms-flexbox; // IE 10
display: flex; // FF 20+, Chrome 29+, Opera 12.1, 17+
}
/**
* @param values
* @returns
* -webkit-box-flex: <values>;
* -moz-box-flex: <values>;
* -webkit-flex: <values>;
* -ms-flex: <values>;
* flex: <values>;
*
* @example
* .selector {
* @include x-flex(1 1 auto);
* }
*/
@mixin x-flex ($values...) {
-webkit-box-flex: $values; // Chrome 20-, iOS 6-, Safari 3.1 - 6
-moz-box-flex: $values; // FF 19-
-webkit-flex: $values; // Chrome 21 - 28
-ms-flex: $values; // IE 10
flex: $values; // FF 20+, Chrome 29+, Opera 12.1, 17+
}
/**
* @param value
* @returns
* -webkit-box-ordinal-group: <value>;
* -moz-box-ordinal-group: <value>;
* -ms-flex-order: <value>;
* -webkit-order: <value>;
* order: <value>;
*
* @example
* .selector {
* @include x-order(1);
* }
*/
@mixin x-order ($value) {
-webkit-box-ordinal-group: $value; // Chrome 20-, iOS 6-, Safari 3.1 - 6
-moz-box-ordinal-group: $value; // FF 19-
-ms-flex-order: $value; // IE 10
-webkit-order: $value; // Chrome 21 - 28
order: $value; // FF 20+, Chrome 29+, Opera 12.1, 17+
}
/**
* @param value
* @returns
* -webkit-flex-wrap: <value>;
* -ms-flex-wrap: <value>;
* flex-wrap: <value>;
*
* @example
* .selector {
* @include x-flex-wrap(wrap);
* }
*/
@mixin x-flex-wrap ($value) {
// IE 10
@if $value == nowrap {
-ms-flex-wrap: none;
} @else {
-ms-flex-wrap: $value;
}
-webkit-flex-wrap: $value; // Chrome 20-, iOS 6-, Safari 3.1 - 6
flex-wrap: $value; // FF 28+, Chrome 21+, Opera 12.1, 17+, IE 11
}
/**
* @param value
* @returns
* -webkit-align-content: <value>;
* -moz-align-content: <value>;
* -ms-flex-line-pack: <value>;
* align-content: <value>;
* @example
* .selector {
* @include x-align-content(center);
* }
*/
@mixin x-align-content ($value) {
// IE 10
@if $value == flex-start {
-ms-flex-line-pack: start;
} @else if $value == flex-end {
-ms-flex-line-pack: end;
} @else if $value == space-between {
-ms-flex-line-pack: justify;
} @else if $value == space-around {
-ms-flex-line-pack: distribute;
} @else {
-ms-flex-line-pack: $value;
}
-webkit-align-content: $value; // Chrome 20-, iOS 6-, Safari 3.1 - 6
-moz-align-content: $value; // FF 19-
align-content: $value; // FF 20+, Chrome 21+, Opera 12.1, 17+, IE 11
}
/**
* @param value
* @returns
* -webkit-box-direction: <value>;
* -moz-box-direction: <value>;
* -webkit-box-orient: <value>;
* -moz-box-orient: <value>;
* -webkit-flex-direction: <value>;
* -moz-flex-direction: <value>;
* -ms-flex-direction: <value>;
* flex-direction: <value>;
* @example
* .selector {
* @include x-flex-direction(row-reverse);
* }
*/
@mixin x-flex-direction ($value) {
@if $value == row {
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
} @elseif $value == row-reverse {
-webkit-box-direction: reverse;
-moz-box-direction: reverse;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
} @elseif $value == column {
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
} @elseif $value == column-reverse {
-webkit-box-direction: reverse;
-moz-box-direction: reverse;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
}
-webkit-flex-direction: $value;
-moz-flex-direction: $value;
-ms-flex-direction: $value;
flex-direction: $value;
}
/* ToDo: add flex-grow, flex-shrink, flex-basis, flex-flow, align-items, align-self, justify-content mixins */

10
modules/_vendor.scss
View file

@ -14,10 +14,10 @@
* @include vendor-prefix(hyphens, auto) * @include vendor-prefix(hyphens, auto)
*/ */
@mixin vendor-prefix($name, $argument) { @mixin vendor-prefix($name, $argument) {
-webkit-#{$name}: #{$argument}; -webkit-#{$name}: #{$argument};
-ms-#{$name}: #{$argument}; -ms-#{$name}: #{$argument};
-moz-#{$name}: #{$argument}; -moz-#{$name}: #{$argument};
-o-#{$name}: #{$argument}; -o-#{$name}: #{$argument};
#{$name}: #{$argument}; #{$name}: #{$argument};
} }

179
modules/card/_card_module.scss
View file

@ -7,102 +7,93 @@
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
%absolute_full { %absolute_full {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.card_body { .card_body {
height: 100%; height: 100%;
.bkg_box { .bkg_box {
@extend %absolute_full; @extend %absolute_full;
transition-duration: 800ms; transition-duration: 800ms;
overflow: hidden; overflow: hidden;
vertical-align: top; vertical-align: top;
z-index: -1; z-index: -1;
} }
.bkg_box > svg {
position: relative;
}
.flex_wrap_center {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
}
.flex_content {
position: relative;
padding: 64px 64px 24px 64px;
border: 1px solid #FFF;
background-color: #F5F5F5;
z-index: 40;
}
h1 {
margin: 16px 0;
color: #1E1E1E;
font-size: 24px;
line-height: 1.4em;
font-weight: normal;
}
p {
margin-top: 0;
margin-bottom: 16px;
font-size: 12px;
line-height: 1.4em;
}
.bkg_box > svg { /* .full {
position: relative; position: absolute;
} width: 128px;
height: 128px;
.flex_wrap_center { top: 16px;
display: -webkit-box; left: 16px;
display: -webkit-flex; background-color: #fff;
display: -moz-box; }
display: -ms-flexbox; .mark {
display: flex; float: left;
-webkit-box-align: center; width: 32px;
-webkit-align-items: center; height: 32px;
-moz-box-align: center; margin-top: 16px;
-ms-flex-align: center; }
align-items: center; */
-webkit-box-pack: center; .marked {
-webkit-justify-content: center; padding-left: 1em;
-moz-box-pack: center; text-indent: -1em;
-ms-flex-pack: center; text-align: center;
justify-content: center; }
height: 100%; .marked:before { content: "*\0000a0" }
} .decent { color: #666 }
a {
.flex_content { color: #000;
position: relative; text-decoration: none;
padding: 64px 64px 24px 64px; }
border: 1px solid #FFF; a:hover {
background-color: #F5F5F5; color: #F4F9FA;
z-index: 40; background-color: #0C85FF;
} text-decoration: none;
}
h1 {
margin: 16px 0;
color: #1E1E1E;
font-size: 24px;
line-height: 1.4em;
font-weight: normal;
}
p {
margin-top: 0;
margin-bottom: 16px;
font-size: 12px;
line-height: 1.4em;
}
/* .full {
position: absolute;
width: 128px;
height: 128px;
top: 16px;
left: 16px;
background-color: #fff;
}
.mark {
float: left;
width: 32px;
height: 32px;
margin-top: 16px;
}
*/
.marked {
padding-left: 1em;
text-indent: -1em;
text-align: center;
}
.marked:before { content: "*\0000a0" }
.decent { color: #666 }
a {
color: #000;
text-decoration: none;
}
a:hover {
color: #F4F9FA;
background-color: #0C85FF;
text-decoration: none;
}
} }