Skip to content
Permalink
Browse files

fix(range): add slot margins (#16464)

This adds margins between the range slider and its slotted content, such as labels or icons.
  • Loading branch information...
camwiegert committed Nov 27, 2018
1 parent 723d17b commit 69f63b3849b5edbe92feed628adc9ba21de2d4df
@@ -22,6 +22,14 @@
background: current-color(base);
}

::slotted([slot="start"]) {
@include margin(0, 16px, 0, 0);
}

::slotted([slot="end"]) {
@include margin(0, 0, 0, 16px);
}

:host(.range-has-pin) {
@include padding($range-ios-padding-vertical + $range-ios-pin-font-size, null, null, null);
}
@@ -34,14 +34,13 @@
color: current-color(contrast);
}

// TODO: REVIEW
// .range-md [slot="range-start"] {
// @include margin(0, 12px, 0, 0);
// }

// .range-md [slot="range-end"] {
// @include margin(0, 0, 0, 12px);
// }
::slotted([slot="start"]) {
@include margin(0, 14px, 0, 0);
}

::slotted([slot="end"]) {
@include margin(0, 0, 0, 14px);
}

:host(.range-has-pin) {
@include padding($range-md-padding-vertical + $range-md-pin-font-size + $range-md-pin-padding-vertical, null, null, null);
@@ -43,6 +43,12 @@
<ion-icon name="ios-thermometer" slot="end"></ion-icon>
</ion-range>
</ion-item>
<ion-item>
<ion-range value="40">
<ion-label slot="start">Start</ion-label>
<ion-label slot="end">End</ion-label>
</ion-range>
</ion-item>
</ion-list>

<ion-list>

0 comments on commit 69f63b3

Please sign in to comment.
You can’t perform that action at this time.