// Default configuration // ------------------------------------------------------------------------------ // TEXT // ------------------------------------------------------------------------------ $default_font_size: 15px !default; $basic_size: $default_font_size; $default_print_font_size: 10pt !default; $basic_print_size: $default_print_font_size; $size_1: $basic_size * 4; $basic_line: 1; $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; $default_line_height: 1.5 !default; $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; $default_font_family: #{'Trebuchet MS', Helvetica, Arial, sans-serif, sans} !default; $print_font_family: #{'Times New Roman', times}; $primary_font_family: $default_font_family; $secondary_font_family: #{'Roboto', sans-serif}; $third_font_family: #{'Courier New', monospace}; $fourth_font_family: $print_font_family; $basic_indent: 2em; // COLORS // ------------------------------------------------------------------------------ $alpha_color: #fad803; $bravo_color: #d30a51; $charlie_color: #273f8b; $delta_color: #b7e0f0; $echo_color: #52bed1; $foxtrot_color: #0c85ff; $black: black; $white: white; $medium_gray: lighten($black, 50%); $basic_font_color: $black; $basic_head_color: $black; $basic_link_color: $echo_color; $basic_highlight_color: $white; $basic_action_color: $foxtrot_color; $default_background_color: $medium_gray !default; $basic_background_color: $default_background_color; $light_color: lighten($basic_background_color,5%); $dark_color: darken($basic_background_color,10%); $basic_border_color: $black; // default shadow colors // $shadow_color: fade-out($medium_gray, 0.5); // LAYOUT // ------------------------------------------------------------------------------ $basic_width: 96%; $width_2: 80%; $width_3: 60%; $width_4: 48%; $default_space: 8px !default; $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; $basic_corner: 4px; $basic_border_width: $tiny_space; $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 $dark_color; $basic_aside_width: 20%; // IO // ------------------------------------------------------------------------------ $basic_io_font_color: darken($white, 10%); $basic_io_background_color: lighten($black, 25%); $basic_shadow: inset 0 1px 3px rgba($black, 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- ''; // 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_background_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_background_color: $white; // $form_field_focus_color: $white; // $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: $white; // 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: $white; // $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