mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 22:29:44 +08:00
83 lines
2.4 KiB
SCSS
83 lines
2.4 KiB
SCSS
|
|
|
|
$baseFontSize: 14px !default;
|
|
|
|
$fontSizeLarge: ceil($baseFontSize * 1.25);
|
|
|
|
$baseLineHeight: 1.428571429; // 20/14
|
|
$baseLineHeightComputed: floor($baseFontSize * $baseLineHeight); // ~20px
|
|
$lineHeightComputed: $baseLineHeightComputed;
|
|
$baseBorderRadius: 2px !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;
|
|
|
|
|
|
// Horizontal forms & lists
|
|
// -------------------------
|
|
$horizontalComponentOffset: 180px !default;
|
|
|
|
|
|
// Lists
|
|
// -------------------------
|
|
$listItemBorder: 1px solid #ddd;
|
|
|
|
|
|
// 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;
|