Skip to content

Commit 1cf56ee

Browse files
brandyscarneybrandyscarney
committed
feat(windows): add list and item components
removed transition from checkbox references #5565
1 parent a323aa1 commit 1cf56ee

File tree

6 files changed

+325
-9
lines changed

6 files changed

+325
-9
lines changed

‎ionic/components.wp.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
"components/checkbox/checkbox.wp",
1414
"components/chip/chip.wp",
1515
"components/content/content.wp",
16+
"components/item/item.wp",
17+
"components/list/list.wp",
1618
"components/modal/modal.wp",
1719
"components/radio/radio.wp",
1820
"components/segment/segment.wp",

‎ionic/components/checkbox/checkbox.wp.scss

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,6 @@ $checkbox-wp-icon-border-radius: 0 !default;
2525
$checkbox-wp-icon-border-color-off: #333333 !default;
2626
$checkbox-wp-icon-border-color-on: map-get($colors-wp, primary) !default;
2727

28-
$checkbox-wp-transition-duration: 280ms !default;
29-
$checkbox-wp-transition-easing: cubic-bezier(.4,0,.2,1) !default;
30-
3128

3229
ion-checkbox {
3330
position: relative;
@@ -47,10 +44,6 @@ ion-checkbox {
4744
border-style: $checkbox-wp-icon-border-style;
4845
border-color: $checkbox-wp-icon-border-color-off;
4946
background-color: $checkbox-wp-icon-background-color-off;
50-
51-
transition-property: background;
52-
transition-duration: $checkbox-wp-transition-duration;
53-
transition-timing-function: $checkbox-wp-transition-easing;
5447
}
5548

5649

‎ionic/components/item/item.wp.scss

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
@import "../../globals.wp";
2+
@import "./item";
3+
4+
// Windows Item
5+
// --------------------------------------------------
6+
7+
$item-wp-body-text-font-size: 1.4rem !default;
8+
$item-wp-body-text-line-height: 1.5 !default;
9+
$item-wp-paragraph-text-color: #666 !default;
10+
11+
$item-wp-font-size: 1.6rem !default;
12+
$item-wp-avatar-size: 4rem !default;
13+
$item-wp-thumbnail-size: 8rem !default;
14+
$item-wp-note-color: darken($list-wp-border-color, 10%) !default;
15+
16+
$item-wp-divider-bg: #fff !default;
17+
$item-wp-divider-color: #222 !default;
18+
$item-wp-divider-padding: 5px 15px !default;
19+
20+
$item-wp-sliding-content-bg: $list-wp-background-color !default;
21+
22+
23+
.item {
24+
position: relative;
25+
padding-right: 0;
26+
padding-left: ($item-wp-padding-left);
27+
font-size: $item-wp-font-size;
28+
text-transform: none;
29+
font-weight: normal;
30+
31+
color: $list-wp-text-color;
32+
background-color: $list-wp-background-color;
33+
box-shadow: none;
34+
transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms;
35+
36+
h1 {
37+
margin: 0 0 2px;
38+
font-size: 2.4rem;
39+
font-weight: normal;
40+
}
41+
42+
h2 {
43+
margin: 2px 0 2px;
44+
font-size: 1.6rem;
45+
font-weight: normal;
46+
}
47+
48+
h3,
49+
h4,
50+
h5,
51+
h6 {
52+
line-height: normal;
53+
margin: 2px 0 2px;
54+
font-size: 1.4rem;
55+
font-weight: normal;
56+
}
57+
58+
p {
59+
line-height: normal;
60+
color: $item-wp-paragraph-text-color;
61+
font-size: 1.4rem;
62+
margin: 0 0 2px;
63+
}
64+
}
65+
66+
.item.activated {
67+
background-color: $list-wp-activated-background-color;
68+
}
69+
70+
.item[no-lines] {
71+
border-width: 0;
72+
}
73+
74+
.item-inner {
75+
padding-right: ($item-wp-padding-right / 2);
76+
border-bottom: 1px solid $list-wp-border-color;
77+
}
78+
79+
80+
// Windows Item Media
81+
// --------------------------------------------------
82+
83+
[item-left],
84+
[item-right] {
85+
margin: $item-wp-padding-media-top ($item-wp-padding-right / 2) $item-wp-padding-media-bottom 0;
86+
}
87+
88+
ion-icon[item-left],
89+
ion-icon[item-right] {
90+
margin-top: $item-wp-padding-icon-top;
91+
margin-bottom: $item-wp-padding-icon-bottom;
92+
margin-left: 0;
93+
}
94+
95+
.item-button {
96+
padding: 0 0.6em;
97+
height: 25px;
98+
font-size: 1.2rem;
99+
}
100+
101+
.item-button.button-icon-only ion-icon,
102+
.item-button.button-icon-only {
103+
padding: 0 1px;
104+
}
105+
106+
[text-wrap] ion-label {
107+
font-size: $item-wp-body-text-font-size;
108+
line-height: $item-wp-body-text-line-height;
109+
}
110+
111+
ion-icon[item-left] + .item-inner,
112+
ion-icon[item-left] + .item-input {
113+
margin-left: $item-wp-padding-left + ($item-wp-padding-left / 2);
114+
}
115+
116+
ion-avatar[item-left],
117+
ion-thumbnail[item-left] {
118+
margin: ($item-wp-padding-right / 2) $item-wp-padding-right ($item-wp-padding-right / 2) 0;
119+
}
120+
121+
ion-avatar[item-right],
122+
ion-thumbnail[item-right] {
123+
margin: ($item-wp-padding-right / 2);
124+
}
125+
126+
ion-avatar {
127+
min-width: $item-wp-avatar-size;
128+
min-height: $item-wp-avatar-size;
129+
130+
img {
131+
max-width: $item-wp-avatar-size;
132+
max-height: $item-wp-avatar-size;
133+
border-radius: $item-wp-avatar-size / 2;
134+
}
135+
}
136+
137+
ion-thumbnail {
138+
min-width: $item-wp-thumbnail-size;
139+
min-height: $item-wp-thumbnail-size;
140+
141+
img {
142+
max-width: $item-wp-thumbnail-size;
143+
max-height: $item-wp-thumbnail-size;
144+
}
145+
}
146+
147+
ion-note {
148+
color: $item-wp-note-color;
149+
}
150+
151+
152+
// Windows Item Divider
153+
// --------------------------------------------------
154+
155+
ion-item-divider {
156+
padding: $item-wp-padding-top $item-wp-padding-right $item-wp-padding-bottom $item-wp-padding-left;
157+
background-color: $item-wp-divider-bg;
158+
color: $item-wp-divider-color;
159+
}
160+
161+
162+
// Generate Windows Item Divider Colors
163+
// --------------------------------------------------
164+
165+
@each $color-name, $color-value in $colors-wp {
166+
ion-item-divider[#{$color-name}] {
167+
background-color: $color-value;
168+
color: color-inverse($color-value);
169+
}
170+
}
171+
172+
173+
// Windows Item Sliding
174+
// --------------------------------------------------
175+
176+
ion-item-sliding {
177+
background-color: $item-wp-sliding-content-bg;
178+
}

‎ionic/components/list/list.wp.scss

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
@import "../../globals.wp";
2+
@import "./list";
3+
4+
// Windows List
5+
// --------------------------------------------------
6+
7+
$list-wp-margin-top: 16px !default;
8+
$list-wp-margin-right: 0 !default;
9+
$list-wp-margin-bottom: 16px !default;
10+
$list-wp-margin-left: 0 !default;
11+
12+
$list-inset-wp-margin-top: 16px !default;
13+
$list-inset-wp-margin-right: 16px !default;
14+
$list-inset-wp-margin-bottom: 16px !default;
15+
$list-inset-wp-margin-left: 16px !default;
16+
$list-inset-wp-border-radius: 2px !default;
17+
18+
$list-wp-header-padding: 16px $item-wp-padding-right 16px $item-wp-padding-left !default;
19+
$list-wp-header-font-size: 2.0rem !default;
20+
$list-wp-header-color: #515151 !default;
21+
22+
23+
/****************/
24+
/* DEFAULT LIST */
25+
/****************/
26+
27+
ion-list-header,
28+
ion-item-divider {
29+
border-bottom: 1px solid $list-wp-border-color;
30+
margin-left: 0;
31+
padding: $list-wp-header-padding;
32+
font-size: $list-wp-header-font-size;
33+
color: $list-wp-header-color;
34+
}
35+
36+
ion-list {
37+
margin: 0 $list-wp-margin-right $list-wp-margin-bottom $list-wp-margin-left;
38+
39+
.item-inner {
40+
border-bottom: 1px solid $list-wp-border-color;
41+
}
42+
43+
> .item:first-child,
44+
> ion-item-sliding:first-child .item {
45+
border-top: 1px solid $list-wp-border-color;
46+
}
47+
48+
> .item:last-child,
49+
> ion-item-sliding:last-child .item {
50+
border-bottom: 1px solid $list-wp-border-color;
51+
52+
.item-inner,
53+
ion-label {
54+
border-bottom: none;
55+
}
56+
}
57+
58+
> ion-input:last-child:after {
59+
left: 0;
60+
}
61+
62+
ion-item-options {
63+
button, [button] {
64+
height: calc(100% - 2px);
65+
margin: 1px 0 1px 0;
66+
box-shadow: none;
67+
68+
border: none;
69+
border-radius: 0;
70+
display: inline-flex;
71+
align-items: center;
72+
box-sizing: border-box;
73+
74+
&:before{
75+
margin: 0 auto;
76+
}
77+
}
78+
}
79+
80+
// If the item has the no-lines attribute remove the bottom border from:
81+
// the item itself (for last-child items)
82+
// the item-inner class (if it is not last)
83+
.item[no-lines],
84+
.item[no-lines] .item-inner {
85+
border-width: 0;
86+
}
87+
88+
+ ion-list {
89+
margin-top: $list-wp-margin-top + $list-wp-margin-bottom;
90+
91+
ion-list-header {
92+
margin-top: -$list-wp-margin-top;
93+
padding-top: 0;
94+
}
95+
}
96+
}
97+
98+
99+
/**************/
100+
/* INSET LIST */
101+
/**************/
102+
103+
ion-list[inset] {
104+
margin: $list-inset-wp-margin-top $list-inset-wp-margin-right $list-inset-wp-margin-bottom $list-inset-wp-margin-left;
105+
border-radius: $list-inset-wp-border-radius;
106+
107+
.item:first-child {
108+
border-top-width: 0;
109+
border-top-right-radius: $list-inset-wp-border-radius;
110+
border-top-left-radius: $list-inset-wp-border-radius;
111+
}
112+
113+
.item:last-child {
114+
border-bottom-width: 0;
115+
border-bottom-right-radius: $list-inset-wp-border-radius;
116+
border-bottom-left-radius: $list-inset-wp-border-radius;
117+
}
118+
119+
.item-input {
120+
padding-right: 0;
121+
padding-left: 0;
122+
}
123+
124+
+ ion-list[inset] {
125+
margin-top: 0;
126+
}
127+
128+
ion-list-header {
129+
background-color: $list-wp-background-color;
130+
}
131+
}
132+
133+
134+
/*****************/
135+
/* NO LINES LIST */
136+
/*****************/
137+
138+
ion-list[no-lines] {
139+
.item,
140+
.item .item-inner {
141+
border-width: 0;
142+
}
143+
}

‎ionic/themes/dark.wp.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ $card-wp-text-color: #ddd !default;
4141
// --------------------------------------------------
4242

4343
$list-wp-text-color: $list-text-color !default;
44-
$list-wp-border-color: #dedede !default;
44+
$list-wp-border-color: transparent !default;
4545
$list-wp-background-color: $list-background-color !default;
4646
$list-wp-activated-background-color: #d9d9d9 !default;
4747

‎ionic/themes/default.wp.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ $toolbar-wp-button-color: $toolbar-text-color !default;
3131
// --------------------------------------------------
3232

3333
$list-wp-text-color: $list-text-color !default;
34-
$list-wp-border-color: $list-border-color !default;
34+
$list-wp-border-color: transparent !default;
3535
$list-wp-background-color: $list-background-color !default;
3636
$list-wp-activated-background-color: #AAAAAA !default;
3737

0 commit comments

Comments
 (0)