javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 14:01:20 +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 { [dir="rtl"] .segment-ios .segment-button {
&:first-of-type { &:first-of-type {
@include margin-horizontal(0, null);
border-left-width: 0; border-left-width: 0;
} }
&:last-of-type { &:last-of-type {
@include margin-horizontal(null, 0);
border-left-width: $segment-button-ios-border-width; border-left-width: $segment-button-ios-border-width;
} }
} }

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

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