Skip to content

Commit fe11ecc

Browse files
brandyscarneybrandyscarney
committed
feat(windows): add content padding/margin components for wp
also split all of the modes up so they can have different amounts of padding/margin on their content references ionic-team#5565
1 parent 922e1f1 commit fe11ecc

8 files changed

Lines changed: 244 additions & 100 deletions

File tree

‎ionic/components.wp.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"components/button/button.wp",
1313
"components/checkbox/checkbox.wp",
1414
"components/chip/chip.wp",
15+
"components/content/content.wp",
1516
"components/radio/radio.wp",
1617
"components/segment/segment.wp",
1718
"components/toolbar/toolbar.wp";

‎ionic/components/content/content.ios.scss‎

Lines changed: 79 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,97 @@
11
@import "../../globals.ios";
2+
@import "./content";
23

34
// iOS Content
45
// --------------------------------------------------
56

6-
$outer-content-ios-background-color: #efeff4 !default;
7+
$content-ios-outer-background-color: #efeff4 !default;
8+
$content-ios-padding: $content-padding !default;
9+
$content-ios-margin: $content-margin !default;
710

811

912
ion-content {
1013
background-color: $background-ios-color;
1114
}
1215

1316
.outer-content {
14-
background: $outer-content-ios-background-color;
17+
background: $content-ios-outer-background-color;
1518
}
1619

1720
ion-nav.has-views,
1821
ion-tab.has-views {
1922
background: #000;
2023
}
24+
25+
26+
// iOS Content Padding
27+
// --------------------------------------------------
28+
29+
[padding],
30+
[padding] > scroll-content {
31+
padding: $content-ios-padding;
32+
}
33+
34+
[padding-top] {
35+
padding-top: $content-ios-padding;
36+
}
37+
38+
[padding-left] {
39+
padding-left: $content-ios-padding;
40+
}
41+
42+
[padding-right] {
43+
padding-right: $content-ios-padding;
44+
}
45+
46+
[padding-bottom] {
47+
padding-bottom: $content-ios-padding;
48+
}
49+
50+
[padding-vertical] {
51+
padding-top: $content-ios-padding;
52+
padding-bottom: $content-ios-padding;
53+
}
54+
55+
[padding-horizontal] {
56+
padding-right: $content-ios-padding;
57+
padding-left: $content-ios-padding;
58+
}
59+
60+
[no-padding] {
61+
padding: 0;
62+
}
63+
64+
65+
// iOS Content Margin
66+
// --------------------------------------------------
67+
68+
[margin],
69+
[margin] > scroll-content {
70+
margin: $content-ios-margin;
71+
}
72+
73+
[margin-top] {
74+
margin-top: $content-ios-margin;
75+
}
76+
77+
[margin-left] {
78+
margin-left: $content-ios-margin;
79+
}
80+
81+
[margin-right] {
82+
margin-right: $content-ios-margin;
83+
}
84+
85+
[margin-bottom] {
86+
margin-bottom: $content-ios-margin;
87+
}
88+
89+
[margin-vertical] {
90+
margin-top: $content-ios-margin;
91+
margin-bottom: $content-ios-margin;
92+
}
93+
94+
[margin-horizontal] {
95+
margin-right: $content-ios-margin;
96+
margin-left: $content-ios-margin;
97+
}

‎ionic/components/content/content.md.scss‎

Lines changed: 55 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,83 @@
11
@import "../../globals.md";
2+
@import "./content";
23

3-
// Material Design Content Padding
4+
// Material Design Content
45
// --------------------------------------------------
56

6-
$content-padding-md: 16px !default;
7+
$content-md-padding: $content-padding !default;
8+
$content-md-margin: $content-margin !default;
79

810

911
ion-content {
1012
background-color: $background-md-color;
1113
}
1214

15+
16+
// Material Design Content Padding
17+
// --------------------------------------------------
18+
1319
[padding],
1420
[padding] > scroll-content {
15-
padding: $content-padding-md;
21+
padding: $content-md-padding;
1622
}
1723

1824
[padding-top] {
19-
padding-top: $content-padding-md;
25+
padding-top: $content-md-padding;
2026
}
2127

22-
[padding-right] {
23-
padding-right: $content-padding-md;
28+
[padding-left] {
29+
padding-left: $content-md-padding;
2430
}
2531

26-
[padding-bottom] {
27-
padding-bottom: $content-padding-md;
32+
[padding-right] {
33+
padding-right: $content-md-padding;
2834
}
2935

30-
[padding-left] {
31-
padding-left: $content-padding-md;
36+
[padding-bottom] {
37+
padding-bottom: $content-md-padding;
3238
}
3339

3440
[padding-vertical] {
35-
padding-top: $content-padding-md;
36-
padding-bottom: $content-padding-md;
41+
padding-top: $content-md-padding;
42+
padding-bottom: $content-md-padding;
3743
}
3844

3945
[padding-horizontal] {
40-
padding-right: $content-padding-md;
41-
padding-left: $content-padding-md;
46+
padding-right: $content-md-padding;
47+
padding-left: $content-md-padding;
48+
}
49+
50+
51+
// Material Design Content Margin
52+
// --------------------------------------------------
53+
54+
[margin],
55+
[margin] > scroll-content {
56+
margin: $content-md-margin;
57+
}
58+
59+
[margin-top] {
60+
margin-top: $content-md-margin;
61+
}
62+
63+
[margin-left] {
64+
margin-left: $content-md-margin;
65+
}
66+
67+
[margin-right] {
68+
margin-right: $content-md-margin;
69+
}
70+
71+
[margin-bottom] {
72+
margin-bottom: $content-md-margin;
73+
}
74+
75+
[margin-vertical] {
76+
margin-top: $content-md-margin;
77+
margin-bottom: $content-md-margin;
78+
}
79+
80+
[margin-horizontal] {
81+
margin-right: $content-md-margin;
82+
margin-left: $content-md-margin;
4283
}

‎ionic/components/content/content.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
@import "../../globals.core";
2+
3+
// Content
4+
// --------------------------------------------------
5+
6+
7+
// Content Padding
8+
// --------------------------------------------------
9+
10+
[no-padding] {
11+
padding: 0;
12+
}
13+
14+
15+
// Content Margin
16+
// --------------------------------------------------
17+
18+
[no-margin] {
19+
margin: 0;
20+
}

‎ionic/components/content/content.wp.scss‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
@import "../../globals.wp";
2+
@import "./content";
3+
4+
// Windows Content
5+
// --------------------------------------------------
6+
7+
$content-wp-padding: $content-padding !default;
8+
$content-wp-margin: $content-margin !default;
9+
10+
11+
ion-content {
12+
background-color: $background-wp-color;
13+
}
14+
15+
16+
// Windows Content Padding
17+
// --------------------------------------------------
18+
19+
[padding],
20+
[padding] > scroll-content {
21+
padding: $content-wp-padding;
22+
}
23+
24+
[padding-top] {
25+
padding-top: $content-wp-padding;
26+
}
27+
28+
[padding-left] {
29+
padding-left: $content-wp-padding;
30+
}
31+
32+
[padding-right] {
33+
padding-right: $content-wp-padding;
34+
}
35+
36+
[padding-bottom] {
37+
padding-bottom: $content-wp-padding;
38+
}
39+
40+
[padding-vertical] {
41+
padding-top: $content-wp-padding;
42+
padding-bottom: $content-wp-padding;
43+
}
44+
45+
[padding-horizontal] {
46+
padding-right: $content-wp-padding;
47+
padding-left: $content-wp-padding;
48+
}
49+
50+
51+
// Windows Content Margin
52+
// --------------------------------------------------
53+
54+
[margin],
55+
[margin] > scroll-content {
56+
margin: $content-wp-margin;
57+
}
58+
59+
[margin-top] {
60+
margin-top: $content-wp-margin;
61+
}
62+
63+
[margin-left] {
64+
margin-left: $content-wp-margin;
65+
}
66+
67+
[margin-right] {
68+
margin-right: $content-wp-margin;
69+
}
70+
71+
[margin-bottom] {
72+
margin-bottom: $content-wp-margin;
73+
}
74+
75+
[margin-vertical] {
76+
margin-top: $content-wp-margin;
77+
margin-bottom: $content-wp-margin;
78+
}
79+
80+
[margin-horizontal] {
81+
margin-right: $content-wp-margin;
82+
margin-left: $content-wp-margin;
83+
}

‎ionic/themes/dark.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@ $subdued-text-color: #666 !default;
2424
$font-family-base: -apple-system, "Helvetica Neue", "Roboto", sans-serif !default;
2525
$font-size-base: 1.4rem !default; // 1.4rem == 14px
2626

27+
$content-padding: 16px !default;
28+
$content-margin: 16px !default;
29+
2730
$toolbar-background: #151515 !default;
2831
$toolbar-border-color: map-get($colors, dark) !default;
2932
$toolbar-text-color: $text-color !default;

‎ionic/themes/default.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@ $subdued-text-color: #666 !default;
2424
$font-family-base: -apple-system, "Helvetica Neue", "Roboto", sans-serif !default;
2525
$font-size-base: 1.4rem !default; // 1.4rem == 14px
2626

27+
$content-padding: 16px !default;
28+
$content-margin: 16px !default;
29+
2730
$toolbar-background: #f8f8f8 !default;
2831
$toolbar-border-color: #b2b2b2 !default;
2932
$toolbar-text-color: $text-color !default;

0 commit comments

Comments
 (0)