ionic-framework/core/src/components/range/range.ios.vars.scss at 7a40d042fd961c09be76a21ef6fc86bff0c9c537 · ionic-team/ionic-framework · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
@import "../../themes/native/native.globals.ios";

// iOS Range
// --------------------------------------------------

/// @prop - Padding top/bottom of the range
$range-ios-padding-vertical: 8px;

/// @prop - Padding start/end of the range - modern syntax
/**
 * 24px was chosen so the knob and its
 * shadow do not get cut off by the item.
 */
$range-ios-item-padding-horizontal: 24px;

/// @prop - Height of the range slider
$range-ios-slider-height: 42px;

/// @prop - Height of the area that will select the range knob
$range-ios-hit-height: $range-ios-slider-height;

/// @prop - Height of the range bar
$range-ios-bar-height: 4px;

/// @prop - Background of the range bar
$range-ios-bar-background-color: var(--ion-background-color-step-900, #e6e6e6);

/// @prop - Border radius of the range bar
$range-ios-bar-border-radius: 2px;

/// @prop - Width of the range knob
$range-ios-knob-width: 26px;

/// @prop - Box shadow of the range knob
$range-ios-knob-box-shadow: 0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12);

/// @prop - Background of the range knob
$range-ios-knob-background-color: #ffffff;

/// @prop - Width of the range tick
$range-ios-tick-width: $range-ios-bar-height;

/// @prop - Height of the range tick
$range-ios-tick-height: 8px;

/// @prop - Border radius of the range tick
$range-ios-tick-border-radius: 0;

/// @prop - Background of the range tick
$range-ios-tick-background-color: $range-ios-bar-background-color;

/// @prop - Background of the range pin
$range-ios-pin-background-color: transparent;

/// @prop - Color of the range pin
$range-ios-pin-color: $text-color;

/// @prop - Font size of the range pin
$range-ios-pin-font-size: dynamic-font(12px);

/// @prop - Padding top of the range pin
$range-ios-pin-padding-top: 8px;

/// @prop - Padding end of the range pin
$range-ios-pin-padding-end: $range-ios-pin-padding-top;

/// @prop - Padding bottom of the range pin
$range-ios-pin-padding-bottom: $range-ios-pin-padding-top;

/// @prop - Padding start of the range pin
$range-ios-pin-padding-start: $range-ios-pin-padding-end;

/// @prop - Opacity of the disabled range
$range-ios-disabled-opacity: $form-control-ios-disabled-opacity;