mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 22:29:44 +08:00
116 lines
3.4 KiB
SCSS
116 lines
3.4 KiB
SCSS
|
|
|
|
$baseFontSize: 14px !default;
|
|
|
|
$fontSizeLarge: ceil($baseFontSize * 1.25);
|
|
|
|
$baseLineHeight: 1.428571429; // 20/14
|
|
$baseLineHeightComputed: floor($baseFontSize * $baseLineHeight); // ~20px
|
|
$baseBorderRadius: 2px !default;
|
|
|
|
|
|
// 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;
|
|
|
|
|
|
// Bar stuff
|
|
// -------------------------
|
|
$barHeight: 44px !default;
|
|
$barLineHeight: 44px !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
|
|
// -------------------------
|
|
$panelWidth: 270px;
|
|
$panelAnimationSpeed: 200ms;
|
|
|
|
|
|
// 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;
|