mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
80 lines
3.0 KiB
SCSS
80 lines
3.0 KiB
SCSS
@import "../../themes/ionic.globals.ios";
|
|
|
|
// iOS Range
|
|
// --------------------------------------------------
|
|
|
|
/// @prop - Padding top/bottom of the range
|
|
$range-ios-padding-vertical: 8px !default;
|
|
|
|
/// @prop - Padding start/end of the range
|
|
$range-ios-padding-horizontal: 16px !default;
|
|
|
|
/// @prop - Height of the range slider
|
|
$range-ios-slider-height: 42px !default;
|
|
|
|
/// @prop - Width of the area that will select the range knob
|
|
$range-ios-hit-width: 42px !default;
|
|
|
|
/// @prop - Height of the area that will select the range knob
|
|
$range-ios-hit-height: $range-ios-slider-height !default;
|
|
|
|
/// @prop - Height of the range bar
|
|
$range-ios-bar-height: 2px !default;
|
|
|
|
/// @prop - Background of the range bar
|
|
$range-ios-bar-background-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), .1) !default;
|
|
|
|
/// @prop - Background of the active range bar
|
|
$range-ios-bar-active-background-color: current-color(base) !default;
|
|
|
|
/// @prop - Width of the range knob
|
|
$range-ios-knob-width: 28px !default;
|
|
|
|
/// @prop - Height of the range knob
|
|
$range-ios-knob-height: $range-ios-knob-width !default;
|
|
|
|
/// @prop - Box shadow of the range knob
|
|
$range-ios-knob-box-shadow: 0 3px 1px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .13), 0 0 0 1px rgba(0, 0, 0, .02) !default;
|
|
|
|
/// @prop - Border radius of the range knob
|
|
$range-ios-knob-border-radius: 50% !default;
|
|
|
|
/// @prop - Background of the range knob
|
|
$range-ios-knob-background-color: #ffffff !default;
|
|
|
|
/// @prop - Width of the range tick
|
|
$range-ios-tick-width: $range-ios-bar-height !default;
|
|
|
|
/// @prop - Height of the range tick
|
|
$range-ios-tick-height: 8px !default;
|
|
|
|
/// @prop - Border radius of the range tick
|
|
$range-ios-tick-border-radius: 0 !default;
|
|
|
|
/// @prop - Background of the range tick
|
|
$range-ios-tick-background-color: $range-ios-bar-background-color !default;
|
|
|
|
/// @prop - Background of the active range tick
|
|
$range-ios-tick-active-background-color: $range-ios-bar-active-background-color !default;
|
|
|
|
/// @prop - Background of the range pin
|
|
$range-ios-pin-background-color: transparent !default;
|
|
|
|
/// @prop - Color of the range pin
|
|
$range-ios-pin-color: $text-color !default;
|
|
|
|
/// @prop - Font size of the range pin
|
|
$range-ios-pin-font-size: 12px !default;
|
|
|
|
/// @prop - Padding top of the range pin
|
|
$range-ios-pin-padding-top: 8px !default;
|
|
|
|
/// @prop - Padding end of the range pin
|
|
$range-ios-pin-padding-end: $range-ios-pin-padding-top !default;
|
|
|
|
/// @prop - Padding bottom of the range pin
|
|
$range-ios-pin-padding-bottom: $range-ios-pin-padding-top !default;
|
|
|
|
/// @prop - Padding start of the range pin
|
|
$range-ios-pin-padding-start: $range-ios-pin-padding-end !default;
|