// Default configuration // ------------------------------------------------------------------------------ // TEXT // ------------------------------------------------------------------------------ $basic_size: $default_font_size; $basic_print_size: $default_print_font_size; $size_1: $basic_size * 4; $basic_line: 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), // ), // ); $head_size_1: 3.1em; $head_size_2: 2.5em; $head_size_3: 1.8em; $head_size_4: 1.35em; $text_size_1: 1em; $text_size_2: 20; $text_line_1: $default_line_height; $head_line_1: $text_line_1; $head_line_2: $text_line_1; $head_line_3: $text_line_1; $head_line_4: $text_line_1; $print_font_family: #{'Times New Roman', times}; $monospace_font_family: #{'Courier New', monospace}; $primary_font_family: $default_font_family; $secondary_font_family: $default_font_family; $third_font_family: $monospace_font_family; $fourth_font_family: $print_font_family; $basic_indent: 2em; // COLORS // ------------------------------------------------------------------------------ $color_palette: ( alpha: #fad803, bravo: #d30a51, charlie: #273f8b, delta: #b7e0f0, echo: #52bed1, foxtrot: #0c85ff ); @include addDefaultColors; $darkest_color: $default_darkest_color; $brightest_color: $default_brightest_color; $basic_font_color: $default_front_color; $basic_head_color: $default_front_color; $basic_link_color: $echo_color; $basic_highlight_color: $brightest_color; $basic_action_color: $foxtrot_color; $basic_front_color: $default_front_color; $basic_back_color: $default_back_color; $dark_color: lighten($darkest_color, 20%); $medium_color: lighten($darkest_color, 50%); $bright_color: darken($brightest_color, 20%); $basic_border_color: $default_front_color; // default shadow colors // $shadow_color: fade-out($medium_color, .5); $basic_color_map: (); @each $key, $value in $color_palette { $map: (); $map: map-merge($map, ($key: createColorMap($value, 15%, .5)) ); $basic_color_map: map-merge($basic_color_map, $map); } // LAYOUT // ------------------------------------------------------------------------------ $box_sizing: $default_box_sizing; $z_top: 1000; $basic_width: 96%; $width_small: 80%; $width_medium: 60%; $width_large: 48%; $basic_space: $default_space; $half_space: $basic_space / 2; $space_2: $basic_space * 2; $space_3: $basic_space * 4; $space_4: $basic_space * 8; $space_5: $basic_space * 16; $tiny_space: 1px !default; $basic_padding: calc(#{$basic_space} - 3px) $basic_space; $wide_padding: calc(#{$basic_space} - 1px) calc(#{$basic_space} * 2); $basic_corner: $tiny_space; $basic_border_width: $default_border_width; $border_width_4: $tiny_space * 4; $border_width_8: $tiny_space * 8; $basic_border: $tiny_space solid $basic_border_color; $cell_border: $tiny_space solid $darkest_color; $basic_aside_width: 20%; // IO // ------------------------------------------------------------------------------ $basic_text_input_map: 'input[type="color"]', '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:not([type])', 'textarea'; $basic_button_map: 'button', 'input[type="button"]', 'input[type="reset"]', 'input[type="submit"]'; $basic_focus_map: 'a[href]', 'area[href]', 'button:not([disabled])', 'input:not([disabled])', 'select:not([disabled])', 'textarea:not([disabled])', '*[tabindex]'; $basic_io_font_color: darken($brightest_color, 10%); $basic_io_back_color: lighten($darkest_color, 25%); $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); // ANIMATIONS // ------------------------------------------------------------------------------ $basic_duration: 150ms; $basic_timing: ease; // HARDWARE BREAKPOINTS // ------------------------------------------------------------------------------ $tablet: "screen and (max-width: 64em)"; $tablet_portrait: "screen and (max-width: 50em) and (orientation: portrait)"; $tablet_landscape: "screen and (max-width: 50em) and (orientation: landscape)"; $mobile: "screen and (max-width: 30em)"; $mobile_portrait: "screen and (max-width: 30em) and (orientation : portrait)"; $mobile_landscape: "screen and (max-width: 30em) and (orientation : landscape)"; $screen_small: 1024px; $screen_medium: 1280px; $screen_large: 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; // The config file is intended to allow users to quickly redefine core elements of the design // that will cascade throughout the css to get your design up and running FAST! // For instruction, please see https://github.com/Anotheruiguy/toadstool/blob/master/sass/doc-src/config.md /////// Typography configuration/////// // ----------------------------------------------------------------------------- // $font_size: 12; // // $heading_1: 46; // $heading_2: 32; // $heading_3: 28; // $heading_4: 18; // $heading_5: 18; // $heading_6: 18; // // $line: $font_size * 1.5; // // $small_point_size: 10; // $large_point_size: 14; // // $primary_font_family: #{"Helvetica Neue", Arial, sans-serif}; // $secondary_font_family: #{"Helvetica Neue", Arial, sans-serif}; // $heading_font_family: #{"Helvetica Neue", Arial, sans-serif}; // $icon_font_alpha: #{'ico-fonts'}; /////// Default webfont directory/////// // ----------------------------------------------------------------------------- // $webfont_directory: "/fonts/"; /////// default image directory /////// // ----------------------------------------------------------------------------- // In Sinatra, the images folder resides in the public directory. This directory is not made publically accessible, // so simply referencing the images directory will be fine. // $imgDir: "/images/"; /////// OOCSS generic base colors/////// // ----------------------------------------------------------------------------- // Red, green, yellow, blue, accent and black is not law, but a common theme in most designs. // Using Toadstool, all you need to do is edit these 6 hex values and everything else is created // by magic, unicorns and fairy dust! // $alpha_primary: #5a2e2e; // red // $bravo_primary: #3e4147; // green // $charlie_primary: #fffedf; // yellow // $delta_primary: #2a2c31; // blue // $echo_primary: #dfba69; // accent // $alpha_gray: #333; //black /////// Toadstool color math /////// // ----------------------------------------------------------------------------- // Local color functions to create default color palette //@import "color/color_math"; //@import "color/grayscale_math"; //@import "color/color_defaults"; /////// Grid configuration /////// // ----------------------------------------------------------------------------- // setting default units of measurement for Toadstool grid solution // $grid_type: 12; // sets default column grid // $grid_uom: percent; // use either ``em`` or ``percent`` // $grid_padding_l: 0; // sets default left/right padding inside grid block // $grid_padding_r: 0; // sets default left/right padding inside grid block // $grid_padding_tb: 0; // sets default top/bottom padding inside grid block // $grid_border: 0; // sets default border width on all grid blocks // $grid_child: none; // sets parent child relationship between grid blocks // $grid_align: default; // by default grids float left. Optional argument is ``center`` // $col_base: 10; // equal to 10px in the standard 960.gs // $col_gutter: $col_base * 2; // sets default grid gutter width // $grid_960: 960 / 100%; // grid math for percentages /////// HTML 5 feature colors /////// // ----------------------------------------------------------------------------- // used with the `ins` tag // http://www.w3schools.com/tags/tag_ins.asp // $ins_color: $charlie_color; // used with the `mark` tag // http://www.w3schools.com/html5/tag_mark.asp // $mark_color: $charlie_color; // webkit tap highlight color // $webkit_tap_hightlight: $delta_color_bravo; // overrides the default content selection color in the browser // $selection_color: $charlie_color; // $selection_text_color: $primary_text; /////// Config defaults for forms /////// // ----------------------------------------------------------------------------- // $alert_back_color: $alpha_color; // $input_disabled: $bravo_gray; // $input_disabled_bkg: lighten($input_disabled, 75%); // $input_disabled_border: lighten($input_disabled, 50%); // $input_disabled_text: lighten($input_disabled, 50%); // // $form_field_back_color: $brightest_color; // $form_field_focus_color: $brightest_color; // $form_field_fail_bkg: $alpha_color_juliet; // $form_field_border: $charlie_gray; // $form_field_border_fail: $alpha_color_echo; // $form_field_focus_border_color: $charlie_gray; // $form_field_text_fail: $alpha_color_echo; // $form_label_color: $alpha_gray; // $optional_field_text_color: $delta_gray; // $instructional_text: $charlie_gray; // $placeholder_text: $hotel_gray; // $inline_alert_bkg_color: $alpha_color_delta; // $inline_alert_text_color: $brightest_color; // Non-color defaults (currently not represented in the SG view) // --------------------------------------------------------- // $form_field_border_radius: $standard_round_corner; // $form_field_text: $primary_text; // $form_field_height: 35; // $form_field_padding: 6; // $form_label_weight: bold; // $form_label_lineheight: 20; // $inline_alert_lineheight: 30; // $inline_alert_left_padding: 12; // $inline_alert_weight: bold; // $inline_alert_top_margin: 12; // $inline_alert_border_width: 1; /////// Config defaults for buttons /////// // ----------------------------------------------------------------------------- // $button-color: $delta-color; // $button-text-color: $brightest_color; // $button-line-height: 32; // $button-border-radius: 3; // $button-padding: 20; // $button-font-size: 18; // $button-weight: bold; // $button-text-shadow: true; // $button-box-shadow: true; /////// Config defaults for ``standard_rounded_border`` mixin /////// // ----------------------------------------------------------------------------- // $standard_round_corner: 3; // sets default border radius // $standard_corner_width: 1px; // sets default border width // $standard_border_color: $border_color; // sets default border color /////// Config defaults for ``standard_block_spacing`` mixin /////// // ----------------------------------------------------------------------------- // $default_block_spacing: 20; // sets margin-bottom /////// Config defaults for site border style /////// // ----------------------------------------------------------------------------- // $standard_border_style: solid; /////// Config defaults for ``standard_hr`` mixin /////// // ----------------------------------------------------------------------------- // $standard_hr_spacing: 40; // sets padding and margin bottom // $standard_hr_color: $delta_gray; // $standard_hr_width: 1px; /////// Config values for all default shadows /////// // ----------------------------------------------------------------------------- // $h-shadow: 0; // horizontal shadow settings // $v-shadow: 2; // vertical shaddow settings // $blur: 3; // blur settings // // $inset_color: $shadow_color; // for use with ``dual_box_shadow`` mixin // $ih-shadow: 0; // inset horizontal shadow settings // $iv-shadow: 2; // inset vertical shaddow settings // $is-shadow: 2; // inset spread shaddow settings // $iblur: 3; // inset blur settings