Skip to content

Commit 6708bb1

Browse files
OS-martacarlosOS-martacarlos
committed
chore(divider): split styles according to themes
1 parent 0eed01b commit 6708bb1

File tree

6 files changed

+106
-50
lines changed

6 files changed

+106
-50
lines changed

‎core/src/components/divider/divider.common.scss‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
@import "../../themes/native/native.globals";
2+
3+
:host {
4+
/**
5+
* @prop --margin-top: Top margin of the divider
6+
* @prop --margin-bottom: Bottom margin of the divider
7+
* @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the divider
8+
* @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the divider
9+
*/
10+
--margin-top: 0px;
11+
--margin-bottom: 0px;
12+
--padding-start: 0px;
13+
--padding-end: 0px;
14+
15+
display: block;
16+
17+
width: 100%;
18+
19+
/* stylelint-disable */
20+
@include ltr() {
21+
padding-right: var(--padding-end);
22+
padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
23+
}
24+
25+
@include rtl() {
26+
padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
27+
padding-left: var(--padding-end);
28+
}
29+
/* stylelint-enable */
30+
}
31+
32+
:host hr {
33+
display: block;
34+
35+
width: 100%;
36+
37+
margin-top: var(--margin-top);
38+
margin-bottom: var(--margin-bottom);
39+
40+
border: none;
41+
}

‎core/src/components/divider/divider.scss‎ renamed to ‎core/src/components/divider/divider.ionic.scss‎

Lines changed: 8 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,16 @@
11
@use "../../themes/ionic/ionic.globals.scss" as globals;
2-
@import "../../themes/native/native.globals";
3-
4-
:host {
5-
/**
6-
* @prop --margin-top: Top margin of the divider
7-
* @prop --margin-bottom: Bottom margin of the divider
8-
* @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the divider
9-
* @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the divider
10-
*/
11-
--margin-top: 0px;
12-
--margin-bottom: 0px;
13-
--padding-start: 0px;
14-
--padding-end: 0px;
15-
16-
display: block;
17-
18-
width: 100%;
19-
20-
/* stylelint-disable */
21-
@include ltr() {
22-
padding-right: var(--padding-end);
23-
padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
24-
}
25-
26-
@include rtl() {
27-
padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
28-
padding-left: var(--padding-end);
29-
}
30-
/* stylelint-enable */
31-
}
2+
@import "./divider.common.scss";
323

334
:host hr {
34-
display: block;
35-
36-
width: 100%;
5+
border-top: globals.$ion-border-size-025 globals.$ion-border-style-solid globals.$ion-border-default;
6+
}
377

38-
margin-top: var(--margin-top);
39-
margin-bottom: var(--margin-bottom);
8+
// Divider Inset
9+
// --------------------------------------------------
4010

41-
border: none;
42-
border-top: globals.$ion-border-size-025 globals.$ion-border-style-solid globals.$ion-border-default;
11+
:host(.divider-inset) {
12+
--padding-start: #{globals.$ion-space-400};
13+
--padding-end: #{globals.$ion-space-400};
4314
}
4415

4516
// Divider Spacing
@@ -74,13 +45,3 @@
7445
--margin-top: #{globals.$ion-space-1000};
7546
--margin-bottom: #{globals.$ion-space-1000};
7647
}
77-
78-
// Divider Inset
79-
// --------------------------------------------------
80-
81-
:host(.divider-inset) {
82-
--margin-top: #{globals.$ion-space-600};
83-
--margin-bottom: #{globals.$ion-space-600};
84-
--padding-start: #{globals.$ion-space-400};
85-
--padding-end: #{globals.$ion-space-400};
86-
}

‎core/src/components/divider/divider.ios.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@import "./divider.native.scss";
2+
3+
// iOS Divider
4+
// --------------------------------------------------

‎core/src/components/divider/divider.md.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@import "./divider.native.scss";
2+
3+
// Material Design Divider
4+
// --------------------------------------------------

‎core/src/components/divider/divider.native.scss‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
@import "./divider.common.scss";
2+
3+
:host hr {
4+
border-top: 1px solid #e0e0e0;
5+
}
6+
7+
// Divider Inset
8+
// --------------------------------------------------
9+
10+
:host(.divider-inset) {
11+
--padding-start: 16px;
12+
--padding-end: 16px;
13+
}
14+
15+
// Divider Spacing
16+
// --------------------------------------------------
17+
18+
:host(.divider-spacing-xsmall) {
19+
--margin-top: 8px;
20+
--margin-bottom: 8px;
21+
}
22+
23+
:host(.divider-spacing-small) {
24+
--margin-top: 12px;
25+
--margin-bottom: 12px;
26+
}
27+
28+
:host(.divider-spacing-medium) {
29+
--margin-top: 16px;
30+
--margin-bottom: 16px;
31+
}
32+
33+
:host(.divider-spacing-large) {
34+
--margin-top: 24px;
35+
--margin-bottom: 24px;
36+
}
37+
38+
:host(.divider-spacing-xlarge) {
39+
--margin-top: 32px;
40+
--margin-bottom: 32px;
41+
}
42+
43+
:host(.divider-spacing-xxlarge) {
44+
--margin-top: 40px;
45+
--margin-bottom: 40px;
46+
}

‎core/src/components/divider/divider.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import { Component, Prop, Host, h } from '@stencil/core';
55
@Component({
66
tag: 'ion-divider',
77
styleUrls: {
8-
ios: 'divider.scss',
9-
md: 'divider.scss',
10-
ionic: 'divider.scss',
8+
ios: 'divider.ios.scss',
9+
md: 'divider.md.scss',
10+
ionic: 'divider.ionic.scss',
1111
},
1212
shadow: true,
1313
})

0 commit comments

Comments
 (0)