Skip to content

Commit 1ecfa6f

Browse files
brandyscarneybrandyscarney
committed
feat(windows): add checkbox styling and update alert checkbox
references #5565
1 parent 1fc0a23 commit 1ecfa6f

File tree

3 files changed

+135
-4
lines changed

3 files changed

+135
-4
lines changed

‎ionic/components.wp.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,5 @@
1010
"components/alert/alert.wp",
1111
"components/badge/badge.wp",
1212
"components/button/button.wp",
13+
"components/checkbox/checkbox.wp",
1314
"components/toolbar/toolbar.wp";

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -202,13 +202,13 @@ $alert-wp-buttons-justify-content: flex-end !default;
202202

203203
&:after {
204204
position: absolute;
205-
border-width: 2px;
205+
border-width: 1px;
206206
border-style: solid;
207207
border-color: $alert-wp-background-color;
208-
top: 0;
208+
top: -2px;
209209
left: 3px;
210-
width: 4px;
211-
height: 8px;
210+
width: 6px;
211+
height: 12px;
212212
border-left: none;
213213
border-top: none;
214214
content: '';

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

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

0 commit comments

Comments
 (0)