KARMA CSS

Defaults

Please see belows the full list of variables, at the time of writing this page

// Variables
//––––––––––––––––––––––––––––––––––––––––––––––––––

// Options
//––––––––––––––––––––––––––––––––––––––––––––––––––

$enable-grid-classes:           true !default;



// Typography
//––––––––––––––––––––––––––––––––––––––––––––––––––

// Base font
$base-font-size:                15px !default;
$base-line-height:              1.6 !default;
$base-font-weight:              400 !default;
$base-font-family:              "Open Sans", sans-serif !default;

$code-font-family:              monospace, monospace !default; // https://github.com/necolas/normalize.css/issues/519#issuecomment-197131966

// The font sizes for h1-h6.
$h1-font-size: 2    * $base-font-size !default;
$h2-font-size: 1.5  * $base-font-size !default;
$h3-font-size: 1.17 * $base-font-size !default;
$h4-font-size: 1    * $base-font-size !default;
$h5-font-size: 0.83 * $base-font-size !default;
$h6-font-size: 0.67 * $base-font-size !default;

$heading-font-weight: 400 !default;



// Grid
//––––––––––––––––––––––––––––––––––––––––––––––––––

$grid-breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px
) !default;

$container-max-widths: (
        sm: 540px,
        md: 720px,
        lg: 960px,
        xl: 1140px
) !default;

$grid-columns:                  12 !default;
$grid-gutter-width:             30px !default;



// Styling
//––––––––––––––––––––––––––––––––––––––––––––––––––

// colors
$colors: (
        // required base colours
        white:                  rgb(255, 255, 255),
        black:                  rgb(17, 17, 17),
        primary:                  rgb(51, 195, 240),
        secondary:                rgb(240, 240, 240),

        // A nicer colour palette for the web via http://clrs.cc/

        // Cool
        aqua:                   rgb(127, 219, 255),
        blue:                   rgb(0, 116, 217),
        navy:                   rgb(0, 31, 63),
        teal:                   rgb(57, 204, 204),
        green:                  rgb(46, 204, 64),
        olive:                  rgb(61, 153, 112),
        lime:                   rgb(1, 255, 112),
        // Warm
        yellow:                 rgb(255, 220, 0),
        orange:                 rgb(255, 133, 27),
        red:                    rgb(255, 65, 54),
        fuchsia:                rgb(240, 18, 190),
        purple:                 rgb(177, 13, 201),
        maroon:                 rgb(133, 20, 75),
        // Other Greyscale
        silver:                 rgb(221, 221, 221),
        gray:                   rgb(170, 170, 170),

        // Social media, more can be found at https://www.materialui.co/socialcolors
        facebook:               rgb(59, 89, 153),
        twitter:                rgb(85, 172, 238),
        linkedin:               rgb(0, 119, 181),
        googleplus:             rgb(221, 75, 57),
        instagram:              rgb(228, 64, 95),
        pinterest:              rgb(189, 8, 28)
) !default;

// defined colors
$body-background:               rgb(255, 255, 255) !default;
$code-background:               rgb(240, 240, 240) !default;
$border-color:                  rgb(230, 230, 230) !default;
$font-color:                    rgb(62, 62, 62) !default;



// animation
$animation-speed-slow:          1000ms !default;
$animation-speed-fast:          400ms !default;


// misc
$generic-margin-bottom:         1.5rem !default; // pre, dl, figure, table, p, ul, ol, form, blockquote
$header-margin-bottom:          1rem !default; // h1-h6
$global-radius:                 .25rem !default;
$darken-hover-percent:          10% !default; // used within hovers in links and buttons



// links
$link-color:                    map-get($colors, primary) !default;
$link-color-hover:              darken($link-color, $darken-hover-percent) !default;
$link-decoration:               none !default;
$link-decoration-hover:         none !default;
$link-transition-speed:         $animation-speed-fast !default;



// buttons
$buttons: (
        // name         color                          font-color
        primary:        map-get($colors, primary)      map-get($colors, white),
        secondary:      map-get($colors, secondary)    map-get($colors, black)
) !default;
$button-font-size:              1.5rem !default;
$button-font-weight:            400 !default;
$button-padding-y:              1rem !default;
$button-padding-x:              1rem !default;
$button-transition-speed:       $animation-speed-fast !default;

// the below applies to the default button class only `.button`
$button-default-bg-color:       map-get($colors, white) !default;


// forms
$input-use-full-width:          false !default; // false = max-width:100%, true = width:100%
$input-background:              rgb(255, 255, 255) !default;
$input-border-radius:           $global-radius !default;
$input-border:                  1px solid $border-color !default;
$input-font-size:               1.5rem !default;
$input-font-color:              $font-color !default;
$input-padding-y:               1rem !default;
$input-padding-x:               1rem !default;
$input-margin-bottom:           1.5rem !default;
$input-transition-speed:        $animation-speed-fast !default;

$input-background-focus:        $input-background !default;
$input-border-color-focus:      map-get($colors, primary) !default;

$label-font-weight:             600 !default;



// tables
$table-cell-padding:            .85rem .85rem !default;
$table-striped-color:           rgb(250, 250, 250) !default;
$table-headed-color:            rgb(240, 240, 240) !default;
$table-hover-color:             rgb(245, 245, 245) !default;



// defined z-indexes
// and get with zindex('default')
$z-layers: (
        'default':              1
) !default;