mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 22:29:44 +08:00
134 lines
4.3 KiB
SCSS
134 lines
4.3 KiB
SCSS
// Components
|
|
// -------------------------
|
|
// Based on 14px font-size and 1.428 line-height (~20px to start)
|
|
|
|
$padding-base-vertical: 6px !default;
|
|
$padding-base-horizontal: 12px !default;
|
|
|
|
$padding-large-vertical: 10px !default;
|
|
$padding-large-horizontal: 16px !default;
|
|
|
|
$padding-small-vertical: 5px !default;
|
|
$padding-small-horizontal: 10px !default;
|
|
|
|
$line-height-large: 1.33 !default;
|
|
$line-height-small: 1.5 !default;
|
|
|
|
$border-radius-base: 4px !default;
|
|
$border-radius-large: 6px !default;
|
|
$border-radius-small: 3px !default;
|
|
|
|
$caret-width-base: 4px !default;
|
|
$caret-width-large: 5px !default;
|
|
|
|
|
|
// Typography
|
|
// -------------------------
|
|
|
|
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
|
|
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
|
|
$font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace !default;
|
|
$font-family-base: $font-family-sans-serif !default;
|
|
|
|
$font-size-base: 14px !default;
|
|
$font-size-large: ceil($font-size-base * 1.25) !default; // ~18px
|
|
$font-size-small: ceil($font-size-base * 0.85) !default; // ~12px
|
|
|
|
$line-height-base: 1.428571429 !default; // 20/14
|
|
$line-height-computed: floor($font-size-base * $line-height-base) !default; // ~20px
|
|
|
|
$headings-font-family: $font-family-base !default;
|
|
$headings-font-weight: 500 !default;
|
|
$headings-line-height: 1.1 !default;
|
|
|
|
|
|
// Content stuff
|
|
// -------------------------------
|
|
$content-padding: 10px;
|
|
$inset-margin: 10px;
|
|
$border-radius-base: 4px !default;
|
|
$border-radius-large: 6px !default;
|
|
$border-radius-small: 3px !default;
|
|
|
|
|
|
// Bar stuff
|
|
// -------------------------------
|
|
$bar-height: 44px !default;
|
|
$bar-button-line-height: 23px !default;
|
|
$bar-button-bar-line-height: 18px !default;
|
|
$bar-title-font-size: $font-size-large;
|
|
$bar-padding-portrait: 5px;
|
|
$bar-padding-landscape: 5px;
|
|
|
|
|
|
// Button bar stuff
|
|
// -------------------------------
|
|
$button-bar-button-line-height: 15px !default;
|
|
|
|
|
|
// Forms
|
|
// -------------------------------
|
|
$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
|
|
$input-height-large: (floor($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
|
|
$input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
|
|
|
|
|
|
// Lists
|
|
// -------------------------------
|
|
$list-item-border: 1px solid #ddd;
|
|
|
|
|
|
// Menus
|
|
// -------------------------------
|
|
$menu-width: 270px;
|
|
$menu-animation-speed: 200ms;
|
|
|
|
|
|
// Media queries breakpoints
|
|
// -------------------------------
|
|
|
|
// Extra small screen / phone
|
|
$screen-xs: 480px !default;
|
|
$screen-phone: $screen-xs !default;
|
|
|
|
// Small screen / tablet
|
|
$screen-sm: 768px !default;
|
|
$screen-tablet: $screen-sm !default;
|
|
|
|
// Medium screen / desktop
|
|
$screen-md: 992px !default;
|
|
$screen-desktop: $screen-md !default;
|
|
|
|
// Large screen / wide desktop
|
|
$screen-lg: 1200px !default;
|
|
$screen-lg-desktop: $screen-lg !default;
|
|
|
|
// So media queries don't overlap when required, provide a maximum
|
|
$screen-xs-max: ($screen-sm - 1) !default;
|
|
$screen-sm-max: ($screen-md - 1) !default;
|
|
$screen-md-max: ($screen-lg - 1) !default;
|
|
|
|
|
|
// Grid system
|
|
// -------------------------------
|
|
// Number of columns in the grid system
|
|
$grid-columns: 12 !default;
|
|
// Padding, to be divided by two and applied to the left and right of all columns
|
|
$grid-gutter-width: 30px !default;
|
|
// Point at which the navbar stops collapsing
|
|
$grid-float-breakpoint: $screen-tablet !default;
|
|
|
|
|
|
// Container sizes
|
|
// -------------------------------
|
|
|
|
// Small screen / tablet
|
|
$container-tablet: ((720px + $grid-gutter-width)) !default;
|
|
|
|
// Medium screen / desktop
|
|
$container-desktop: ((940px + $grid-gutter-width)) !default;
|
|
|
|
// Large screen / wide desktop
|
|
$container-lg-desktop: ((1140px + $grid-gutter-width)) !default;
|
|
|