// Default configuration // ------------------------------------------------------------------------------ // TEXT // ------------------------------------------------------------------------------ $size_text_basic: 17px !default; $size_text_print: 10pt !default; $line_basic: 1; // $i: 1; // @while $i < 7 { // %head_#{$i} { width: 2em * $i; } // $i: $i + 1; // } // $head_sizes: (h1: 3.1em, h2: 2.5em, h3: 1.8em, h4: 1.35em); // // @each $head, $size in $head_sizes { // #{$head} { // font-size: $size; // } // } // $head_sizes: ( // basic: ( // 'h1': ('font-size': 24), // 'h2': ('font-size': 20), // 'h3': ('font-size': 19), // 'h4': ('font-size': 18), // 'h5': ('font-size': 17), // 'h6': ('font-size': 16), // ), // print: ( // 'h1': ('font-size': 48), // 'h2': ('font-size': 40), // 'h3': ('font-size': 31), // 'h4': ('font-size': 25), // 'h5': ('font-size': 20), // 'h6': ('font-size': 16), // ), // ); $size_head_1: 3.1em !default; $size_head_2: 2.5em !default; $size_head_3: 1.8em !default; $size_head_4: 1.35em !default; $size_text_1: 1em; $size_text_2: 20; $size_hero: $size_head_1 * 3; $line_text_basic: 1.28 !default; $line_text_mono: 1.1 !default; $line_head_basic: $line_text_basic !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_text_card: #{'Trebuchet MS', 'Roboto', 'Segoe UI', 'Liberation Sans', 'Source Sans', 'Trebuchet MS', Helvetica, Arial, sans-serif, sans} !default; $family_head_basic: $family_text_basic !default; // COLORS // ------------------------------------------------------------------------------ $color_palette: ( alpha: #fad803, bravo: #d30a51, charlie: #273f8b, delta: #b7e0f0, echo: #52bed1, foxtrot: #0c85ff ) !default; @include addDefaultColors; $color_diff_basic: 12% !default; $color_diff_tiny: 4% !default; $color_diff_double: $color_diff_basic * 2; $color_darkest: black !default; $color_brightest: white !default; $color_text_basic: black !default; $color_back_basic: #808080 !default; $color_border_basic: lighten($color_text_basic, $color_diff_basic) !default; $color_front_basic: white !default; $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); $color_head_basic: $color_text_basic !default; $color_link_basic: $delta_color !default; $color_highlight_basic: $color_front_basic !default; $color_action_basic: $foxtrot_color !default; // default shadow colors // $shadow_color: fade-out($color_medium, 0.5); $color_list: (); @each $key, $value in $color_palette { $map: (); $map: map-merge($map, ($key: createColorMap($value, 15%, 0.5)) ); $color_list: map-merge($color_list, $map); } // LAYOUT // ------------------------------------------------------------------------------ $box_sizing: border-box !default; $z_heaven: 100 !default; $z_top: 10 !default; $z_basic: 1 !default; $z_earth: -100 !default; $width_basic: 96% !default; $width_small: 80% !default; $width_medium: 60% !default; $width_large: 48% !default; $width_aside_basic: 20% !default; $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; $margin_basic: $space_basic 0 !default; $margin_double: $space_double 0 !default; $margin_io: 0 $space_small 0 0 !default; $padding_basic: calc(#{$space_basic} - 3px) $space_basic !default; $padding_link: calc(#{$space_basic} - 1px) calc(#{$space_basic} * 2) !default; $indent_basic: 2em !default; $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; $radius_basic: $space_tiny * 2 !default; // IO // ------------------------------------------------------------------------------ $io_input_list: 'input[type="text"]', 'input[type="number"]', 'input[type="color"]', 'input[type="range"]', 'input[type="date"]', 'input[type="time"]', '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])'; $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"]'; $io_focus_list: 'a[href]', 'area[href]', 'button:not([disabled])', 'input:not([disabled])', 'select:not([disabled])', 'textarea:not([disabled])', '*[tabindex]'; $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; $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; $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 // ------------------------------------------------------------------------------ $duration_basic: 250ms !default; $duration_double: $duration_basic * 2; $duration_long: 2s !default; $timing_basic: ease-out !default; // HARDWARE BREAKPOINTS // ------------------------------------------------------------------------------ $screen_tiny: 768px; $screen_small: 1024px; $screen_medium: 1280px; $screen_large: 1440px; $screen_huge: 1680px; $screen_gigantic: 1920px; // VENDOR PREFIX // ------------------------------------------------------------------------------ $prefix_defaults: -moz- -webkit- -o- -ms- ''; $webkit_support: -webkit- ''; $moz_support: -moz- ''; $ms_support: -ms- ''; $moz_webkit_support: -moz- -webkit- ''; $moz_ms_support: -moz- -ms- ''; $webkit_ms_support: -webkit- -ms- ''; // SYMBOLS // ------------------------------------------------------------------------------ $icons: ( glass: "\f000", music: "\f001", search: "\f002", envelope-o: "\f003", heart: "\f004" ); @each $name, $icon in $icons { .sym_#{$name}::before { content: $icon; } } // USER AGENT // ------------------------------------------------------------------------------ $no_agent_focus: true; @include overrideUserAgent;