javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(segment): fix border-radius logic for RTL (#11981)

Browse Source
This commit is contained in:
Amit Moryossef
2017-06-09 22:19:53 +03:00
committed by Brandy Carney
parent 3c046b413b
commit 6db8c147a6
2 changed files with 10 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/segment/segment.ios.scss
View File

@ -131,14 +131,10 @@ $segment-button-ios-toolbar-icon-line-height: 2.4rem !default;
[dir="rtl"] .segment-ios .segment-button {
&:first-of-type {
@include margin-horizontal(0, null);
border-left-width: 0;
}
&:last-of-type {
@include margin-horizontal(null, 0);
border-left-width: $segment-button-ios-border-width;
}
}

24
src/themes/ionic.mixins.scss
View File

@ -29,7 +29,6 @@
}
}
// SVG Background Image Mixin
// --------------------------------------------------
@ -68,7 +67,6 @@
}
}
// Breakpoint Mixins
// ---------------------------------------------------------------------------------
@ -91,7 +89,6 @@
@return if($min != 0, $min, null);
}
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
// Useful for making responsive utilities.
//
@ -139,7 +136,6 @@
@return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
}
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
// Makes the @content apply to the given breakpoint and narrower.
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
@ -236,7 +232,7 @@
// @param {string} $start
// @param {boolean} $content include content or use default
// ----------------------------------------------------------
@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end, $content: false) {
@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {
@if $top == $end and $top == $bottom and $top == $start {
@include multi-dir() {
#{$prop}: $top;
@ -257,14 +253,10 @@
#{$prop}: $top $start $bottom $end;
}
} @else {
@if $content == true { // TODO check if @content exists instead
@content;
} @else {
@include property-horizontal($prop, $start, $end);
@include multi-dir() {
#{$prop}-top: $top;
#{$prop}-bottom: $bottom;
}
@include property-horizontal($prop, $start, $end);
@include multi-dir() {
#{$prop}-top: $top;
#{$prop}-bottom: $bottom;
}
}
}
@ -346,7 +338,11 @@
// @param {string} $bottom-start
// ----------------------------------------------------------
@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {
@include property(border-radius, $top-start, $top-end, $bottom-end, $bottom-start, true) {
@if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {
@include multi-dir() {
border-radius: $top-start;
}
} @else {
@include ltr() {
border-top-left-radius: $top-start;
border-top-right-radius: $top-end;