Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(rtl): optimize the new mixins for smaller bundle, ltr seperation #11635

Merged
merged 87 commits into from
Jun 6, 2017
Merged

feat(rtl): optimize the new mixins for smaller bundle, ltr seperation #11635

Show file tree
Hide file tree
Changes from 85 commits
Commits
Show all changes
87 commits
Select commit Hold shift + click to select a range
cb5ac7c
refactor(item): replaced item-left with item-start
AmitMY Apr 7, 2017
4509c1f
style(item): fix spacing
AmitMY Apr 8, 2017
2172d11
fix(item): add backwards support for left/right in ng-content
AmitMY Apr 24, 2017
22d24a0
fix(item): deprecated old variables, not breaking change
AmitMY Apr 24, 2017
e1da67d
Merge remote-tracking branch 'origin/breaking-item' into breaking-item
AmitMY Apr 24, 2017
d103932
Merge branch 'master' into breaking-item
AmitMY Apr 24, 2017
13294ed
feat(rtl): padding mixin
AmitMY Apr 24, 2017
5ab8d60
feat(rtl): change all padding variables to start/end
AmitMY Apr 24, 2017
2b3897a
feat(rtl): replace all padding-side with start/end
AmitMY Apr 24, 2017
abdff51
Merge remote-tracking branch 'origin/start-end' into start-end
AmitMY Apr 24, 2017
6629092
revert(functions): remove mixins
AmitMY Apr 24, 2017
ce2d9f1
feat(scss): add padding-horizontal and rtl functions (thanks brandy)
AmitMY Apr 24, 2017
a6c1feb
feat(padding): use padding horizontal mixin everywhere
AmitMY Apr 24, 2017
1a4e0d4
feat(padding): use padding horizontal mixin everywhere
AmitMY Apr 24, 2017
a332df7
fix(lint): change properties order. tests passing
AmitMY Apr 24, 2017
bfe80bb
fix(sass-functions): reorder functions to avoid warning
AmitMY Apr 24, 2017
bdafbf8
fix(scss): fix variable name
AmitMY Apr 24, 2017
762fdb0
perf(rtl): add check if need rtl selector
AmitMY Apr 25, 2017
8f228e8
feat(scss): add full padding function
AmitMY Apr 25, 2017
4f81dd2
feat(scss): add border-radius mixin
AmitMY Apr 25, 2017
f2077f4
fix(rtl): change border-radius to use mixin
AmitMY Apr 25, 2017
d27b7b0
perf(scss): only override if has something to override
AmitMY Apr 25, 2017
8ebd500
feat(scss): add margin scss variables for sides
AmitMY Apr 25, 2017
40624db
feat(scss): add margin mixin
AmitMY Apr 25, 2017
bc93198
fix(scss): fix wrong support for 2/3 args
AmitMY Apr 25, 2017
c79db3b
feat(rtl): spread margins/paddings
AmitMY Apr 25, 2017
788728a
feat(rtl): spread margins/paddings
AmitMY Apr 25, 2017
ffce076
feat(position): add rtl support for absolute
AmitMY Apr 25, 2017
2c89379
fix(rtl): add missing calls
AmitMY Apr 26, 2017
0d4e5c1
fix(item): old attributes deprecated support
AmitMY Apr 27, 2017
df3f74e
revert(changelog): not intended to be changed
AmitMY Apr 27, 2017
e428c61
Merge branch 'master' into start-end
AmitMY Apr 27, 2017
cfecb3e
Merge branch 'master' into start-end
AmitMY May 1, 2017
2b409e1
fix(sass-functions): and not &&
AmitMY May 2, 2017
00152e9
fix(padding): merge + missing padding
AmitMY May 2, 2017
93f78c2
fix(padding): merge + missing padding
AmitMY May 2, 2017
6f84b7b
style(): remove newline
AmitMY May 2, 2017
b8721c8
refactor(mixins): move mixins to mixins file
AmitMY May 2, 2017
cf99437
style(): fix alignment
AmitMY May 2, 2017
d1ac9a0
fix(item): right padding should not be set
AmitMY May 2, 2017
3cbc8d6
fix(): incorrect defaults
AmitMY May 2, 2017
3577190
feat(scss-lint): disable some side variables
AmitMY May 4, 2017
7e38881
fix(scss): lint passes
AmitMY May 4, 2017
1a863ef
feat(lint): disabled text-align
AmitMY May 4, 2017
7307706
fix(): correct variable name
AmitMY May 4, 2017
b6ad052
fix(fab): missed a comma
AmitMY May 4, 2017
4376436
Merge branch 'master' into start-end
AmitMY May 4, 2017
d1ce2d6
fix(rtl): rtl method incorrect for multiple selectors
AmitMY May 5, 2017
8d045b7
fix(rtl): toolbar bad merge
AmitMY May 5, 2017
c25eca6
fix(rtl): icon-only is in px not em
AmitMY May 5, 2017
3757a44
fix(rtl): toggle padding
AmitMY May 5, 2017
5ad8328
feat(rtl): correct notation for rtl custom
AmitMY May 5, 2017
02b6df9
Merge branch 'master' into breaking-item
AmitMY May 5, 2017
7dcdac6
Merge branch 'master' into start-end
AmitMY May 5, 2017
55ac2c5
Merge branch 'breaking-item' into start-end
AmitMY May 5, 2017
94cf77e
Merge branch 'breaking-item' into start-end
AmitMY May 5, 2017
2857678
Merge branch 'master' into start-end
AmitMY May 5, 2017
cca8ecc
feat(rtl): optimize bundle result
AmitMY May 5, 2017
38a498d
feat(float): use new standard
AmitMY May 5, 2017
f2a3cfe
feat(platform): gotta have direction on html
AmitMY May 5, 2017
ccab2cb
fix(scss): add import + change code order
AmitMY May 6, 2017
6a983d1
fix(lint): passes
AmitMY May 6, 2017
176b454
fix(scss): fix for deprecated usages
AmitMY May 8, 2017
b466083
fix(scss): property use #{}
AmitMY May 9, 2017
784ae02
fix(scss): property use #{}
AmitMY May 9, 2017
5df03bd
merge with master
AmitMY May 12, 2017
1cec037
fix(rtl): change css specificity, increase bundle size for multidirec…
AmitMY May 13, 2017
842d099
fix(scss): mixin manages priority
AmitMY May 15, 2017
d97109b
fix(scss): select icon
AmitMY May 15, 2017
e2875dd
Merge branch 'master' into start-end-optimize
AmitMY May 16, 2017
a8f07cd
fix(scss): correct range variable
AmitMY May 17, 2017
d7bec87
fix(lint): unused import
AmitMY May 20, 2017
fbb0713
Merge remote-tracking branch 'upstream/master'
AmitMY May 25, 2017
96bd787
Merge branch 'master' into start-end-optimize
AmitMY May 25, 2017
ae5fbec
fix(multi-dir): things that ignore PropertySpelling must be under mul…
AmitMY May 28, 2017
b0cadc2
fix(multi-dir): things that ignore PropertySpelling must be under mul…
AmitMY May 28, 2017
804cf41
fix(include-rtl): change to app-direction, to be able to set rtl only…
AmitMY May 28, 2017
6614d3a
fix(rtl): remove incorrect split-pane rtl behavior
AmitMY May 28, 2017
38eeeb9
fix(menu): start needs position on rtl
AmitMY May 30, 2017
038abfe
fix(float): renamed test file, add float mixin
AmitMY Jun 1, 2017
97054bf
fix(scss-lint): lint excluded files
AmitMY Jun 1, 2017
bb71e0b
fix(scss): add missing unit
AmitMY Jun 1, 2017
d9c1546
refactor(scss): change dir to direction, as the correct property name
AmitMY Jun 1, 2017
4cc7c62
Merge branch 'master' into start-end-optimize
AmitMY Jun 2, 2017
e241c54
Merge remote-tracking branch 'remotes/upstream/master' into start-end…
AmitMY Jun 5, 2017
6efdbb5
Merge branch 'master' into start-end-optimize
AmitMY Jun 6, 2017
1dab3e2
fix(app-direction): replace last usage of include-rtl
AmitMY Jun 6, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 9 additions & 15 deletions .scss-lint.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,6 @@
# See config at https://github.com/brigade/scss-lint/blob/master/config/default.yml

exclude:
- 'src/components/item/item.ios.scss'
- 'src/components/item/item.md.scss'
- 'src/components/list/list.ios.scss'
- 'src/components/show-hide-when/**'
- 'src/components/slides/**'
- 'src/themes/ionic.mixins.scss'
- 'src/themes/license.scss'
- 'src/themes/util.scss'
Expand Down Expand Up @@ -56,11 +51,6 @@ linters:
- justify-content
- order
-
- margin-top
- margin-bottom
- padding-top
- padding-bottom
-
- width
- min-width
- max-width
Expand Down Expand Up @@ -188,27 +178,31 @@ linters:
enabled: true
style: double_quotes

SelectorDepth:
enabled: true
max_depth: 5

PropertySpelling:
extra_properties:
- contain
disabled_properties:
- direction
- right
- left

- float

- padding
- padding-left
- padding-right

- padding-top
- padding-bottom
- margin
- margin-left
- margin-right

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

- text-align
7 changes: 3 additions & 4 deletions src/components/action-sheet/action-sheet.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,16 +97,15 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default;

.action-sheet-ios .action-sheet-group {
@include border-radius($action-sheet-ios-border-radius);
@include margin(null, null, $action-sheet-ios-group-margin-bottom - 2, null);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need to use the mixin for margin-bottom, margin-top, padding-bottom, or padding-top? These shouldn't be affected by RTL, no?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In theory, you are correct, and that is what I've done before. In practice no.

span {
    margin-top: 1px;
}
[dir=rtl] span {
    margin: 5px;
}

Gives the span margin: 5px, because of specificity.

[dir=rtl] span {
    margin-top: 1px;
}
[dir=rtl] span {
    margin: 5px;
}

Gives the span margin: 1px 5px 5px 5px, because of specificity. (which is the wanted behavior)

Don't worry, it gets super squashed at the end


overflow: hidden;

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

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

.action-sheet-ios .action-sheet-group:last-child {
margin-bottom: $action-sheet-ios-group-margin-bottom;
@include margin(null, null, $action-sheet-ios-group-margin-bottom, null);
}

.action-sheet-ios .action-sheet-title {
Expand Down Expand Up @@ -137,7 +136,7 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default;
}

.action-sheet-ios .action-sheet-button.activated {
margin-top: -$action-sheet-ios-button-border-width;
@include margin(-$action-sheet-ios-button-border-width, null, null, null);

border-top: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-background-activated;
border-bottom-color: $action-sheet-ios-button-background-activated;
Expand Down
2 changes: 1 addition & 1 deletion src/components/alert/alert.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -328,7 +328,7 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default;
}

.alert-ios .alert-title {
margin-top: $alert-ios-title-margin-top;
@include margin($alert-ios-title-margin-top, null, null, null);

font-size: $alert-ios-title-font-size;
font-weight: $alert-ios-title-font-weight;
Expand Down
2 changes: 1 addition & 1 deletion src/components/alert/alert.md.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -414,7 +414,7 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default;
}

.alert-md .alert-input:focus {
margin-bottom: $alert-md-input-margin-bottom - 1;
@include margin(null, null, $alert-md-input-margin-bottom - 1, null);

border-bottom: $alert-md-input-border-width-focused $alert-md-input-border-style-focused $alert-md-input-border-color-focused;
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/alert/alert.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,9 @@ ion-alert {
}

ion-alert.alert-top {
align-items: flex-start;
@include padding(50px, null, null, null);

padding-top: 50px;
align-items: flex-start;
}

ion-alert input {
Expand Down
2 changes: 1 addition & 1 deletion src/components/alert/alert.wp.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -608,7 +608,7 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default;
}

.alert-wp .alert-button-group-vertical .alert-button {
margin-top: $alert-wp-button-group-vertical-margin-top;
@include margin($alert-wp-button-group-vertical-margin-top, null, null, null);

width: $alert-wp-button-group-vertical-width;
}
Expand Down
31 changes: 9 additions & 22 deletions src/components/app/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,8 +145,7 @@ h3,
h4,
h5,
h6 {
margin-top: 1.6rem;
margin-bottom: 1rem;
@include margin(1.6rem, null, 1rem, null);

font-weight: $headings-font-weight;
line-height: $headings-line-height;
Expand All @@ -160,25 +159,25 @@ h6 {
h5,
h6 {
&:first-child {
margin-top: -.3rem;
@include margin(-.3rem, null, null, null);
}
}
}

h1 + h2,
h1 + h3,
h2 + h3 {
margin-top: -.3rem;
@include margin(-.3rem, null, null, null);
}

h1 {
margin-top: 2rem;
@include margin(2rem, null, null, null);

font-size: $h1-font-size;
}

h2 {
margin-top: 1.8rem;
@include margin(1.8rem, null, null, null);

font-size: $h2-font-size;
}
Expand Down Expand Up @@ -412,31 +411,19 @@ ion-footer {
// Provide `[float-{bp}]` attributes for floating the element based
// on the breakpoint
[float#{$infix}-left] {
// scss-lint:disable ImportantRule, PropertySpelling
float: left !important;
@include float(left, !important);
}

[float#{$infix}-right] {
// scss-lint:disable ImportantRule, PropertySpelling
float: right !important;
@include float(right, !important);
}

[float#{$infix}-start] {
// scss-lint:disable ImportantRule, PropertySpelling
float: left !important;

@include rtl() {
float: right !important;
}
@include float(start, !important);
}

[float#{$infix}-end] {
// scss-lint:disable ImportantRule, PropertySpelling
float: right !important;

@include rtl() {
float: left !important;
}
@include float(end, !important);
}
}
}
Expand Down
60 changes: 30 additions & 30 deletions src/components/app/test/utilities/pages/root-page/root-page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,51 +60,51 @@
</ion-row>

<div class="float-elements-row">
<div pull-left>pull-left</div>
<div pull-sm-left>pull-sm-left</div>
<div pull-md-left>pull-md-left</div>
<div pull-lg-left>pull-lg-left</div>
<div pull-xl-left>pull-xl-left</div>
<div float-left>float-left</div>
<div float-sm-left>float-sm-left</div>
<div float-md-left>float-md-left</div>
<div float-lg-left>float-lg-left</div>
<div float-xl-left>float-xl-left</div>
</div>

<div class="float-elements-row">
<div pull-right>pull-right</div>
<div pull-sm-right>pull-sm-right</div>
<div pull-md-right>pull-md-right</div>
<div pull-lg-right>pull-lg-right</div>
<div pull-xl-right>pull-xl-right</div>
<div float-right>float-right</div>
<div float-sm-right>float-sm-right</div>
<div float-md-right>float-md-right</div>
<div float-lg-right>float-lg-right</div>
<div float-xl-right>float-xl-right</div>
</div>

<div class="float-elements-row">
<div pull-start>pull-start</div>
<div pull-sm-start>pull-sm-start</div>
<div pull-md-start>pull-md-start</div>
<div pull-lg-start>pull-lg-start</div>
<div pull-xl-start>pull-xl-start</div>
<div float-start>float-start</div>
<div float-sm-start>float-sm-start</div>
<div float-md-start>float-md-start</div>
<div float-lg-start>float-lg-start</div>
<div float-xl-start>float-xl-start</div>
</div>

<div class="float-elements-row">
<div pull-end>pull-end</div>
<div pull-sm-end>pull-sm-end</div>
<div pull-md-end>pull-md-end</div>
<div pull-lg-end>pull-lg-end</div>
<div pull-xl-end>pull-xl-end</div>
<div float-end>float-end</div>
<div float-sm-end>float-sm-end</div>
<div float-md-end>float-md-end</div>
<div float-lg-end>float-lg-end</div>
<div float-xl-end>float-xl-end</div>
</div>

<div class="float-elements-row" dir="rtl">
<div pull-start>pull-start</div>
<div pull-sm-start>pull-sm-start</div>
<div pull-md-start>pull-md-start</div>
<div pull-lg-start>pull-lg-start</div>
<div pull-xl-start>pull-xl-start</div>
<div float-start>float-start</div>
<div float-sm-start>float-sm-start</div>
<div float-md-start>float-md-start</div>
<div float-lg-start>float-lg-start</div>
<div float-xl-start>float-xl-start</div>
</div>

<div class="float-elements-row" dir="rtl">
<div pull-end>pull-end</div>
<div pull-sm-end>pull-sm-end</div>
<div pull-md-end>pull-md-end</div>
<div pull-lg-end>pull-lg-end</div>
<div pull-xl-end>pull-xl-end</div>
<div float-end>float-end</div>
<div float-sm-end>float-sm-end</div>
<div float-md-end>float-md-end</div>
<div float-lg-end>float-lg-end</div>
<div float-xl-end>float-xl-end</div>
</div>
</ion-content>

Expand Down
6 changes: 3 additions & 3 deletions src/components/card/card.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ $card-ios-header-color: #333 !default;
}

.card-ios ion-list {
margin-bottom: 0;
@include margin(null, null, 0, null);
}

.card-ios > .item:last-child,
Expand Down Expand Up @@ -165,7 +165,7 @@ $card-ios-header-color: #333 !default;

.card-header-ios + .card-content-ios,
.card-ios .item + .card-content-ios {
padding-top: 0;
@include padding(0, null, null, null);
}

.card .note-ios {
Expand Down Expand Up @@ -220,7 +220,7 @@ $card-ios-header-color: #333 !default;
}

.card-ios + ion-card {
margin-top: 0;
@include margin(0, null, null, null);
}


Expand Down
6 changes: 3 additions & 3 deletions src/components/card/card.md.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ $card-md-header-color: #222 !default;
}

.card-md ion-list {
margin-bottom: 0;
@include margin(null, null, 0, null);
}

.card-md > .item:last-child,
Expand Down Expand Up @@ -169,7 +169,7 @@ $card-md-header-color: #222 !default;

.card-header-md + .card-content-md,
.card-md .item + .card-content-md {
padding-top: 0;
@include padding(0, null, null, null);
}

.card .note-md {
Expand Down Expand Up @@ -229,7 +229,7 @@ $card-md-header-color: #222 !default;
}

.card-md + ion-card {
margin-top: 0;
@include margin(0, null, null, null);
}


Expand Down
6 changes: 3 additions & 3 deletions src/components/card/card.wp.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ $card-wp-header-color: #222 !default;
}

.card-wp ion-list {
margin-bottom: 0;
@include margin(null, null, 0, null);
}

.card-wp > .item:last-child,
Expand Down Expand Up @@ -171,7 +171,7 @@ $card-wp-header-color: #222 !default;

.card-header-wp + .card-content-wp,
.card-wp .item + .card-content-wp {
padding-top: 0;
@include padding(0, null, null, null);
}

.card .note-wp {
Expand Down Expand Up @@ -231,7 +231,7 @@ $card-wp-header-color: #222 !default;
}

.card-wp + ion-card {
margin-top: 0;
@include margin(0, null, null, null);
}


Expand Down
Loading