Skip to content

Commit dd206ad

Browse files
brandyscarneybrandyscarney
committed
feat(windows): add radio component for wp mode
fixed radio and checkbox in alert, updated toolbar references #5565
1 parent 1ecfa6f commit dd206ad

File tree

5 files changed

+136
-9
lines changed

5 files changed

+136
-9
lines changed

‎ionic/components.wp.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,5 @@
1111
"components/badge/badge.wp",
1212
"components/button/button.wp",
1313
"components/checkbox/checkbox.wp",
14+
"components/radio/radio.wp",
1415
"components/toolbar/toolbar.wp";

‎ionic/components/alert/alert.wp.scss

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,9 @@ $alert-wp-button-width: 49.5% !default;
3535
$alert-wp-button-margin-right: 1% !default;
3636
$alert-wp-button-font-weight: 300 !default;
3737

38+
$alert-wp-checkbox-background-color: map-get($colors-wp, primary) !default;
39+
$alert-wp-radio-background-color: map-get($colors-wp, primary) !default;
40+
3841
$alert-wp-buttons-padding: 8px 20px 20px 20px !default;
3942
$alert-wp-buttons-justify-content: flex-end !default;
4043

@@ -150,11 +153,10 @@ $alert-wp-buttons-justify-content: flex-end !default;
150153
left: 2px;
151154
width: 8px;
152155
height: 8px;
153-
background-color: $alert-wp-button-text-color;
156+
background-color: $alert-wp-radio-background-color;
154157
border-radius: 50%;
155158
content: '';
156-
transition: transform 280ms cubic-bezier(.4, 0, .2, 1);
157-
transform: scale3d(0, 0, 0);
159+
display: none;
158160
}
159161
}
160162

@@ -166,7 +168,7 @@ $alert-wp-buttons-justify-content: flex-end !default;
166168
}
167169

168170
.alert-radio-icon:after {
169-
transform: scale3d(1, 1, 1);
171+
display: block;
170172
}
171173
}
172174

@@ -197,8 +199,8 @@ $alert-wp-buttons-justify-content: flex-end !default;
197199
}
198200

199201
.alert-checkbox[aria-checked=true] .alert-checkbox-icon {
200-
background-color: $alert-wp-button-text-color;
201-
border-color: $alert-wp-button-text-color;
202+
background-color: $alert-wp-checkbox-background-color;
203+
border-color: $alert-wp-checkbox-background-color;
202204

203205
&:after {
204206
position: absolute;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ $checkbox-wp-icon-checkmark-color: $background-wp-color !default;
2222
$checkbox-wp-icon-border-width: 2px !default;
2323
$checkbox-wp-icon-border-style: solid !default;
2424
$checkbox-wp-icon-border-radius: 0 !default;
25-
$checkbox-wp-icon-border-color-off: darken($list-wp-border-color, 40%) !default;
25+
$checkbox-wp-icon-border-color-off: #333333 !default;
2626
$checkbox-wp-icon-border-color-on: map-get($colors-wp, primary) !default;
2727

2828
$checkbox-wp-transition-duration: 280ms !default;

‎ionic/components/radio/radio.wp.scss

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
@import "../../globals.wp";
2+
3+
// Windows Radio
4+
// --------------------------------------------------
5+
6+
$radio-wp-color-on: map-get($colors-wp, primary) !default;
7+
$radio-wp-color-off: #333333 !default;
8+
9+
$radio-wp-icon-width: 16px !default;
10+
$radio-wp-icon-height: 16px !default;
11+
$radio-wp-icon-border-width: 2px !default;
12+
$radio-wp-icon-border-style: solid !default;
13+
$radio-wp-icon-border-radius: 50% !default;
14+
15+
$radio-wp-disabled-opacity: 0.3 !default;
16+
17+
18+
ion-radio {
19+
position: relative;
20+
display: inline-block;
21+
}
22+
23+
24+
// Windows Radio Outer Circle: Unchecked
25+
// -----------------------------------------
26+
27+
.radio-icon {
28+
position: relative;
29+
top: 0;
30+
left: 0;
31+
display: block;
32+
width: $radio-wp-icon-width;
33+
height: $radio-wp-icon-height;
34+
margin: 0;
35+
border-width: $radio-wp-icon-border-width;
36+
border-style: $radio-wp-icon-border-style;
37+
border-color: $radio-wp-color-off;
38+
border-radius: $radio-wp-icon-border-radius;
39+
}
40+
41+
42+
// Windows Radio Inner Circle: Unchecked
43+
// -----------------------------------------
44+
45+
.radio-inner {
46+
position: absolute;
47+
top: $radio-wp-icon-border-width;
48+
left: $radio-wp-icon-border-width;
49+
width: $radio-wp-icon-width / 2;
50+
height: $radio-wp-icon-height / 2;
51+
background-color: $radio-wp-color-off;
52+
border-radius: 50%;
53+
display: none;
54+
}
55+
56+
57+
// Windows Radio Outer Circle: Checked
58+
// -----------------------------------------
59+
60+
.radio-checked {
61+
border-color: $radio-wp-color-on;
62+
}
63+
64+
65+
// Windows Radio Inner Circle: Checked
66+
// -----------------------------------------
67+
68+
.radio-checked .radio-inner {
69+
// transform: scale3d(1, 1, 1);
70+
display: block;
71+
}
72+
73+
74+
// Windows Radio: Disabled
75+
// -----------------------------------------
76+
77+
.radio-disabled,
78+
.item-radio-disabled ion-label {
79+
opacity: $radio-wp-disabled-opacity;
80+
pointer-events: none;
81+
}
82+
83+
84+
// Windows Radio Within An Item
85+
// -----------------------------------------
86+
87+
.item ion-radio {
88+
position: static;
89+
display: block;
90+
margin: $item-wp-padding-media-top ($item-wp-padding-right / 2) $item-wp-padding-media-bottom 0;
91+
}
92+
93+
.item-radio ion-label {
94+
margin-left: 0;
95+
}
96+
97+
98+
// Windows Radio Color Mixin
99+
// --------------------------------------------------
100+
101+
@mixin radio-theme-wp($color-name, $color-value) {
102+
103+
ion-radio[#{$color-name}] {
104+
105+
.radio-checked {
106+
border-color: $color-value;
107+
}
108+
109+
}
110+
111+
}
112+
113+
114+
// Generate Windows Radio Colors
115+
// --------------------------------------------------
116+
117+
@each $color-name, $color-value in $colors-wp {
118+
119+
@include radio-theme-wp($color-name, $color-value);
120+
121+
}

‎ionic/components/toolbar/toolbar.wp.scss

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@ $toolbar-order-wp: (
1818

1919
$toolbar-wp-padding: 4px !default;
2020
$toolbar-wp-height: 4.6rem !default;
21-
$toolbar-wp-title-font-size: 2.0rem !default;
21+
$toolbar-wp-title-font-size: 1.5rem !default;
22+
$toolbar-wp-title-font-weight: bold !default;
23+
$toolbar-wp-title-text-transform: uppercase !default;
2224
$toolbar-wp-button-font-size: 1.4rem !default;
2325
$navbar-wp-height: $toolbar-wp-height !default;
2426

@@ -58,7 +60,8 @@ ion-navbar-section {
5860
color: $toolbar-wp-text-color;
5961
padding: 0 12px;
6062
font-size: $toolbar-wp-title-font-size;
61-
font-weight: 500;
63+
font-weight: $toolbar-wp-title-font-weight;
64+
text-transform: $toolbar-wp-title-text-transform;
6265
}
6366

6467
@mixin wp-toolbar-theme($color-name, $color-value) {

0 commit comments

Comments
 (0)