ionic-framework/scss/ionic/_structure-variables.scss

$baseFontSize: 14px !default;

$fontSizeLarge: ceil($baseFontSize * 1.25);

$baseLineHeight:        1.428571429; // 20/14
$baseLineHeightComputed:    floor($baseFontSize * $baseLineHeight); // ~20px
$lineHeightComputed: $baseLineHeightComputed;
$baseBorderRadius:      2px !default;

$brandPrimary:         #428bca;
$brandSuccess:         #5cb85c;
$brandWarning:         #f0ad4e;
$brandDanger:          #d9534f;
$brandInfo:            #5bc0de;

// Grays
// -------------------------
$black:                 #000 !default;
$grayDarker:            #222 !default;
$grayDark:              #333 !default;
$gray:                  #555 !default;
$grayLight:             #999 !default;
$grayLighter:           #eee !default;
$white:                 #fff !default;


// Accent colors
// -------------------------
$blue:                  #049cdb !default;
$blueDark:              #0064cd !default;
$green:                 #46a546 !default;
$red:                   #9d261d !default;
$yellow:                #ffc40d !default;
$orange:                #f89406 !default;
$pink:                  #c3325f !default;
$purple:                #7a43b6 !default;


// Content stuff
// -------------------------
$contentPadding: 10px;
$roundedRadius: 5px;


// Bar stuff
// -------------------------
$barHeight: 44px !default;
$barLineHeight: 44px !default;
$barButtonsLineHeight: 6px !default;
$barTitleFontSize: $fontSizeLarge;
$barTitleLineHeightComputed: 26px;//$barHeight - 2;
$barPaddingVertical: (($barHeight - $baseLineHeightComputed) / 2);
$barPaddingPortrait: 8px;
$barPaddingLandscape : 5px;


// Forms
// -------------------------
$inputBackground:               $white !default;
$inputBorder:                   #ccc !default;
$inputBorderRadius:             4px !default;
$inputDisabledBackground:       $grayLighter !default;
$formActionsBackground:         #f5f5f5 !default;
$inputHeight:                   $baseFontSize + 10px; // base line-height + 8px vertical padding + 2px top/bottom border


// Horizontal forms & lists
// -------------------------
$horizontalComponentOffset:       180px !default;


// Input placeholder text color
// -------------------------
$placeholderText:         $grayLight !default;


// Lists
// -------------------------
$listItemBorder: 1px solid #ddd;


// Panels
$panelBg: #fff;
$panelBorderRadius: 2px;
$panelInnerBorder: #ddd;
$panelFooterBg:             #f5f5f5;
$panelDefaultText:          $grayDark;
$panelDefaultBorder:        #ddd;
$panelDefaultHeadingBg:    #f5f5f5;

$panelPrimaryText:          #fff;
$panelPrimaryBorder:        $brandPrimary;
$panelPrimaryHeadingBg:    $brandPrimary;

$panelSuccessText:          #fff;
$panelSuccessBorder:        $brandSuccess;
$panelSuccessHeadingBg:    $brandSuccess;

$panelWarningText:          #fff;
$panelWarningBorder:        $brandWarning;
$panelWarningHeadingBg:    $brandWarning;

$panelDangerText:          #fff;
$panelDangerBorder:        $brandDanger;
$panelDangerHeadingBg:    $brandDanger;

$panelInfoText:          #fff;
$panelInfoBorder:        $brandInfo;
$panelInfoHeadingBg:    $brandInfo;


// Menus
// -------------------------
$menuWidth: 270px;
$menuAnimationSpeed: 200ms;
$menuBackgroundColor:    #eee;
$menuInsetBorderColor:   #bbb;


// GRID
// --------------------------------------------------


// Default 940px grid
// -------------------------
$gridColumns:             12 !default;
$gridColumnWidth:         60px !default;
$gridGutterWidth:         20px !default;
$gridRowWidth:            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)) !default;

// 1200px min
$gridColumnWidth1200:     70px !default;
$gridGutterWidth1200:     30px !default;
$gridRowWidth1200:        ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1)) !default;

// 768px-979px
$gridColumnWidth768:      42px !default;
$gridGutterWidth768:      20px !default;
$gridRowWidth768:         ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1)) !default;


// Fluid grid
// -------------------------
$fluidGridColumnWidth:    percentage($gridColumnWidth/$gridRowWidth) !default;
$fluidGridGutterWidth:    percentage($gridGutterWidth/$gridRowWidth) !default;

// 1200px min
$fluidGridColumnWidth1200:     percentage($gridColumnWidth1200/$gridRowWidth1200) !default;
$fluidGridGutterWidth1200:     percentage($gridGutterWidth1200/$gridRowWidth1200) !default;

// 768px-979px
$fluidGridColumnWidth768:      percentage($gridColumnWidth768/$gridRowWidth768) !default;
$fluidGridGutterWidth768:      percentage($gridGutterWidth768/$gridRowWidth768) !default;