Skip to content

Commit

Permalink
feat(rtl): add rtl margin, padding, position and border-radius (#11342)
Browse files Browse the repository at this point in the history 
* refactor(item): replaced item-left with item-start
replaced item-right with item-end

* style(item): fix spacing

* fix(item): add backwards support for left/right in ng-content

* fix(item): deprecated old variables, not breaking change

* feat(rtl): padding mixin

* feat(rtl): change all padding variables to start/end
add support for old variable names

* feat(rtl): replace all padding-side with start/end

* revert(functions): remove mixins

* feat(scss): add padding-horizontal and rtl functions (thanks brandy)

* feat(padding): use padding horizontal mixin everywhere

* feat(padding): use padding horizontal mixin everywhere

* fix(lint): change properties order. tests passing

* fix(sass-functions): reorder functions to avoid warning

* fix(scss): fix variable name

* perf(rtl): add check if need rtl selector

* feat(scss): add full padding function

* feat(scss): add border-radius mixin

* fix(rtl): change border-radius to use mixin

* perf(scss): only override if has something to override

* feat(scss): add margin scss variables for sides

* feat(scss): add margin mixin

* fix(scss): fix wrong support for 2/3 args

* feat(rtl): spread margins/paddings

* feat(rtl): spread margins/paddings

* feat(position): add rtl support for absolute

* fix(rtl): add missing calls

* fix(item): old attributes deprecated support

* revert(changelog): not intended to be changed

* fix(sass-functions): and not &&

* fix(padding): merge + missing padding

* style(): remove newline

* refactor(mixins): move mixins to mixins file

* style(): fix alignment

* fix(item): right padding should not be set

* fix(): incorrect defaults

* feat(scss-lint): disable some side variables

* fix(scss): lint passes

* feat(lint): disabled text-align

* fix(): correct variable name

* fix(fab): missed a comma

* fix(rtl): rtl method incorrect for multiple selectors

* fix(rtl): toolbar bad merge

* fix(rtl): icon-only is in px not em

* fix(rtl): toggle padding

* feat(rtl): correct notation for rtl custom

* Merge branch 'breaking-item' into start-end

# Conflicts:
#	src/components/checkbox/checkbox.ios.scss
#	src/components/checkbox/checkbox.md.scss
#	src/components/checkbox/checkbox.wp.scss
#	src/components/item/item.ios.scss
#	src/components/item/item.md.scss
#	src/components/item/item.wp.scss
#	src/components/radio/radio.ios.scss
#	src/components/radio/radio.md.scss
#	src/components/radio/radio.wp.scss
#	src/components/toggle/toggle.ios.scss
#	src/components/toggle/toggle.md.scss
#	src/components/toggle/toggle.wp.scss

* fix(scss): fix for deprecated usages
  • Loading branch information
@AmitMY @brandyscarney
AmitMY authored and brandyscarney committed May 12, 2017
1 parent 0eb4310 commit a30379b
Show file tree
Hide file tree
Showing 125 changed files with 3,289 additions and 1,499 deletions.
37 changes: 21 additions & 16 deletions .scss-lint.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,10 @@ linters:

- position
- top
- right
- bottom
- left
- z-index
- display
- overflow
- float
- clear
-
- flex
Expand All @@ -59,16 +56,10 @@ linters:
- justify-content
- order
-
- margin
- margin-top
- margin-right
- margin-bottom
- margin-left
- padding
- padding-top
- padding-right
- padding-bottom
- padding-left
-
- width
- min-width
Expand Down Expand Up @@ -104,12 +95,6 @@ linters:
- border-bottom-style
- border-left-style

- border-radius
- border-top-left-radius
- border-top-right-radius
- border-bottom-left-radius
- border-bottom-right-radius

- border-color
- border-top-color
- border-right-color
Expand All @@ -135,7 +120,6 @@ linters:
- letter-spacing
- line-height
- list-style
- text-align
- text-decoration
- text-indent
- text-overflow
Expand Down Expand Up @@ -207,3 +191,24 @@ linters:
PropertySpelling:
extra_properties:
- contain
disabled_properties:
- right
- left

- float

- padding
- padding-left
- padding-right

- margin
- margin-left
- margin-right

- border-radius
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius

- text-align
3 changes: 2 additions & 1 deletion scripts/gulp/tasks/lint.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ task('lint.sass', function() {
return src([
'src/**/*.scss',
'!src/components/*/test/**/*',
'!src/util/test/*'
'!src/util/test/*',
'!src/themes/normalize.scss',
])
.pipe(scsslint())
.pipe(scsslint.failReporter());
Expand Down
32 changes: 23 additions & 9 deletions src/components/action-sheet/action-sheet.ios.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,20 @@
/// @prop - Text align of the action sheet
$action-sheet-ios-text-align: center !default;

/// @prop - Padding of the action sheet
$action-sheet-ios-padding: 0 10px !default;
// deprecated
$action-sheet-ios-padding: null !default;

/// @prop - Padding top of the action sheet
$action-sheet-ios-padding-top: 0 !default;

/// @prop - Padding end of the action sheet
$action-sheet-ios-padding-end: 10px !default;

/// @prop - Padding bottom of the action sheet
$action-sheet-ios-padding-bottom: $action-sheet-ios-padding-top !default;

/// @prop - Padding start of the action sheet
$action-sheet-ios-padding-start: $action-sheet-ios-padding-end !default;

/// @prop - Bottom margin of the action sheet button group
$action-sheet-ios-group-margin-bottom: 10px !default;
Expand Down Expand Up @@ -78,15 +90,18 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default;
}

.action-sheet-ios .action-sheet-container {
padding: $action-sheet-ios-padding;
@include deprecated-variable(padding, $action-sheet-ios-padding) {
@include padding($action-sheet-ios-padding-top, $action-sheet-ios-padding-end, $action-sheet-ios-padding-bottom, $action-sheet-ios-padding-start);
}
}

.action-sheet-ios .action-sheet-group {
@include border-radius($action-sheet-ios-border-radius);

overflow: hidden;

margin-bottom: $action-sheet-ios-group-margin-bottom - 2;

border-radius: $action-sheet-ios-border-radius;
background: $action-sheet-ios-background;
}

Expand All @@ -95,20 +110,19 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default;
}

.action-sheet-ios .action-sheet-title {
@include padding($action-sheet-ios-title-padding);
@include text-align($action-sheet-ios-text-align);

padding: $action-sheet-ios-title-padding;
@include border-radius($action-sheet-ios-title-border-radius);

border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
border-radius: $action-sheet-ios-title-border-radius;
font-size: $action-sheet-ios-title-font-size;
font-weight: $action-sheet-ios-title-font-weight;
color: $action-sheet-ios-title-color;
}

.action-sheet-ios .action-sheet-button {
margin: 0;
padding: $action-sheet-ios-button-padding;
@include margin(0);
@include padding($action-sheet-ios-button-padding);

min-height: $action-sheet-ios-button-min-height;

Expand Down
71 changes: 57 additions & 14 deletions src/components/action-sheet/action-sheet.md.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,20 @@ $action-sheet-md-title-color: #757575 !default;
/// @prop - Font size of the action sheet title
$action-sheet-md-title-font-size: 1.6rem !default;

/// @prop - Padding of the action sheet title
$action-sheet-md-title-padding: 11px 16px 17px !default;
// deprecated
$action-sheet-md-title-padding: null !default;

/// @prop - Padding top of the action sheet title
$action-sheet-md-title-padding-top: 11px !default;

/// @prop - Padding end of the action sheet title
$action-sheet-md-title-padding-end: 16px !default;

/// @prop - Padding bottom of the action sheet title
$action-sheet-md-title-padding-bottom: 17px !default;

/// @prop - Padding start of the action sheet title
$action-sheet-md-title-padding-start: $action-sheet-md-title-padding-end !default;

/// @prop - Minimum height of the action sheet button
$action-sheet-md-button-min-height: 4.8rem !default;
Expand All @@ -30,8 +42,20 @@ $action-sheet-md-button-text-color: #222 !default;
/// @prop - Font size of the action sheet button
$action-sheet-md-button-font-size: 1.6rem !default;

/// @prop - Padding of the action sheet button
$action-sheet-md-button-padding: 0 16px !default;
// deprecated
$action-sheet-md-button-padding: null !default;

/// @prop - Padding top of the action sheet button
$action-sheet-md-button-padding-top: 0 !default;

/// @prop - Padding end of the action sheet button
$action-sheet-md-button-padding-end: 16px !default;

/// @prop - Padding bottom of the action sheet button
$action-sheet-md-button-padding-bottom: $action-sheet-md-button-padding-top !default;

/// @prop - Padding start of the action sheet button
$action-sheet-md-button-padding-start: $action-sheet-md-button-padding-end !default;

/// @prop - Background color of the action sheet button
$action-sheet-md-button-background: transparent !default;
Expand All @@ -51,22 +75,36 @@ $action-sheet-md-icon-text-align: center !default;
/// @prop - Vertical align of the icon in the action sheet button
$action-sheet-md-icon-vertical-align: middle !default;

/// @prop - Margin of the icon in the action sheet button
$action-sheet-md-icon-margin: 0 32px 0 0 !default;
// deprecated
$action-sheet-md-icon-margin: null !default;

/// @prop - Margin top of the icon in the action sheet button
$action-sheet-md-icon-margin-top: 0 !default;

/// @prop - Margin end of the icon in the action sheet button
$action-sheet-md-icon-margin-end: 32px !default;

/// @prop - Margin bottom of the icon in the action sheet button
$action-sheet-md-icon-margin-bottom: 0 !default;

/// @prop - Margin start of the icon in the action sheet button
$action-sheet-md-icon-margin-start: 0 !default;

.action-sheet-md .action-sheet-container {
padding: .8rem 0;
@include padding(.8rem, 0);

background: $action-sheet-md-background;
}

.action-sheet-md .action-sheet-title {
@include text-align($action-sheet-md-text-align);

padding: $action-sheet-md-title-padding;

font-size: $action-sheet-md-title-font-size;
color: $action-sheet-md-title-color;

@include deprecated-variable(padding, $action-sheet-md-title-padding) {
@include padding($action-sheet-md-title-padding-top, $action-sheet-md-title-padding-end, $action-sheet-md-title-padding-bottom, $action-sheet-md-title-padding-start);
}
}

.action-sheet-md .action-sheet-button {
Expand All @@ -75,29 +113,34 @@ $action-sheet-md-icon-margin: 0 32px 0 0 !default;
position: relative;
overflow: hidden;

padding: $action-sheet-md-button-padding;

min-height: $action-sheet-md-button-min-height;

font-size: $action-sheet-md-button-font-size;
color: $action-sheet-md-button-text-color;
background: $action-sheet-md-button-background;


@include deprecated-variable(padding, $action-sheet-md-button-padding) {
@include padding($action-sheet-md-button-padding-top, $action-sheet-md-button-padding-end, $action-sheet-md-button-padding-bottom, $action-sheet-md-button-padding-start);
}
}

.action-sheet-md .action-sheet-button.activated {
background: $action-sheet-md-button-background-activated;
}

.action-sheet-md .action-sheet-icon {
@include padding(0);
@include text-align($action-sheet-md-icon-text-align);

margin: $action-sheet-md-icon-margin;
padding: 0;

width: $action-sheet-md-icon-width;

font-size: $action-sheet-md-icon-font-size;
vertical-align: $action-sheet-md-icon-vertical-align;

@include deprecated-variable(margin, $action-sheet-md-icon-margin) {
@include margin($action-sheet-md-icon-margin-top, $action-sheet-md-icon-margin-end, $action-sheet-md-icon-margin-bottom, $action-sheet-md-icon-margin-start);
}
}

.action-sheet-md .action-sheet-group {
Expand Down
12 changes: 5 additions & 7 deletions src/components/action-sheet/action-sheet.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ $action-sheet-max-width: 500px !default;


ion-action-sheet {
@include position(0, null, null, 0);

position: absolute;
top: 0;
left: 0;
z-index: $z-index-overlay;
display: block;

Expand All @@ -22,15 +22,13 @@ ion-action-sheet {
}

.action-sheet-wrapper {
@include position(null, 0, 0, 0);
@include margin(auto);

position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: $z-index-overlay-wrapper;
display: block;

margin: auto;

width: $action-sheet-width;
max-width: $action-sheet-max-width;

Expand Down
Loading

0 comments on commit a30379b

Please sign in to comment.