mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
2273fb5d47
* feat(rtl): add translate3d support for directions * feat(rtl): add transform-origin support for directions * fix(transform): add missing origins * fix(transform): when given a percentage, calc on rtl * fix(transform-origin): be same as before * fix(translate3d): no double minus * fix(translate3d): use transform instead of cloning code * style(scss-lint): remove empty line * fix(merge): fix bad merge * refactor(transform-origin): nicer logic * style(): add eof line * fix(transform): remove unneeded mixin * feat(rtl): add transform mixin and str-split function * Merge remote-tracking branch 'remotes/upstream/rtl-transform' into transform-rtl # Conflicts: # src/themes/ionic.mixins.scss * fix(transform): fix string comparison
228 lines
6.2 KiB
SCSS
228 lines
6.2 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: 1px !default;
|
|
|
|
/// @prop - Background of the range bar
|
|
$range-ios-bar-background-color: #bdbdbd !default;
|
|
|
|
/// @prop - Background of the active range bar
|
|
$range-ios-bar-active-background-color: color($colors-ios, primary) !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: #fff !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-ios-color !default;
|
|
|
|
/// @prop - Font size of the range pin
|
|
$range-ios-pin-font-size: 12px !default;
|
|
|
|
// deprecated
|
|
$range-ios-pin-padding: null !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;
|
|
|
|
|
|
.range-ios {
|
|
@include padding($range-ios-padding-vertical, $range-ios-padding-horizontal);
|
|
}
|
|
|
|
.range-ios [range-left] {
|
|
@include margin(0, 20px, 0, 0);
|
|
}
|
|
|
|
.range-ios [range-right] {
|
|
@include margin(0, 0, 0, 20px);
|
|
}
|
|
|
|
.range-ios.range-has-pin {
|
|
@include padding($range-ios-padding-vertical + $range-ios-pin-font-size, null, null, null);
|
|
}
|
|
|
|
.range-ios .range-slider {
|
|
height: $range-ios-slider-height;
|
|
}
|
|
|
|
.range-ios .range-bar {
|
|
@include position(($range-ios-slider-height / 2), null, null, 0);
|
|
@include border-radius(1px);
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
height: $range-ios-bar-height;
|
|
|
|
background: $range-ios-bar-background-color;
|
|
|
|
pointer-events: none;
|
|
}
|
|
|
|
.range-ios.range-pressed .range-bar-active {
|
|
will-change: left, right;
|
|
}
|
|
|
|
.range-ios.range-pressed .range-knob-handle {
|
|
will-change: left;
|
|
}
|
|
|
|
.range-ios .range-bar-active {
|
|
bottom: 0;
|
|
|
|
width: auto;
|
|
|
|
background: $range-ios-bar-active-background-color;
|
|
}
|
|
|
|
.range-ios .range-knob-handle {
|
|
@include position(($range-ios-slider-height / 2), null, null, 0);
|
|
@include margin(-($range-ios-hit-height / 2), null, null, -($range-ios-hit-width / 2));
|
|
@include text-align(center);
|
|
|
|
position: absolute;
|
|
|
|
width: $range-ios-hit-width;
|
|
height: $range-ios-hit-height;
|
|
}
|
|
|
|
.range-ios .range-knob {
|
|
@include position(($range-ios-hit-height / 2) - ($range-ios-knob-height / 2) + ($range-ios-bar-height / 2) - .5px,
|
|
null, null, ($range-ios-hit-width / 2) - ($range-ios-knob-width / 2));
|
|
@include border-radius($range-ios-knob-border-radius);
|
|
|
|
position: absolute;
|
|
|
|
width: $range-ios-knob-width;
|
|
height: $range-ios-knob-height;
|
|
|
|
background: $range-ios-knob-background-color;
|
|
|
|
box-shadow: $range-ios-knob-box-shadow;
|
|
|
|
pointer-events: none;
|
|
}
|
|
|
|
.range-ios .range-tick {
|
|
@include margin-horizontal(-($range-ios-tick-width / 2), null);
|
|
@include border-radius($range-ios-tick-border-radius);
|
|
|
|
position: absolute;
|
|
top: ($range-ios-hit-height / 2) - ($range-ios-tick-height / 2) + ($range-ios-bar-height / 2);
|
|
|
|
width: $range-ios-tick-width;
|
|
height: $range-ios-tick-height;
|
|
|
|
background: $range-ios-tick-background-color;
|
|
|
|
pointer-events: none;
|
|
}
|
|
|
|
.range-ios .range-tick-active {
|
|
background: $range-ios-tick-active-background-color;
|
|
}
|
|
|
|
.range-ios .range-pin {
|
|
@include text-align(center);
|
|
@include border-radius(50px);
|
|
@include transform(translate3d(0, 28px, 0), scale(.01));
|
|
|
|
position: relative;
|
|
top: -20px;
|
|
display: inline-block;
|
|
|
|
min-width: 28px;
|
|
|
|
font-size: $range-ios-pin-font-size;
|
|
|
|
color: $range-ios-pin-color;
|
|
|
|
background: $range-ios-pin-background-color;
|
|
|
|
transition: transform 120ms ease;
|
|
|
|
@include deprecated-variable(padding, $range-ios-pin-padding) {
|
|
@include padding($range-ios-pin-padding-top, $range-ios-pin-padding-end, $range-ios-pin-padding-bottom, $range-ios-pin-padding-start);
|
|
}
|
|
}
|
|
|
|
.range-ios .range-knob-pressed .range-pin {
|
|
@include transform(translate3d(0, 0, 0), scale(1));
|
|
}
|
|
|
|
.range-ios.range-disabled {
|
|
opacity: .5;
|
|
}
|
|
|
|
|
|
// Generate iOS Range Colors
|
|
// --------------------------------------------------
|
|
|
|
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
|
|
|
|
.range-ios-#{$color-name} {
|
|
.range-bar-active,
|
|
.range-tick-active {
|
|
background: $color-base;
|
|
}
|
|
}
|
|
|
|
}
|