Skip to content

Commit f8ef960

Browse files
committed
feat(windows): add input component sass
references #5565
1 parent 6673008 commit f8ef960

File tree

2 files changed

+100
-0
lines changed

2 files changed

+100
-0
lines changed

ionic/components.wp.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"components/checkbox/checkbox.wp",
1515
"components/chip/chip.wp",
1616
"components/content/content.wp",
17+
"components/input/input.wp",
1718
"components/item/item.wp",
1819
"components/list/list.wp",
1920
"components/menu/menu.wp",

ionic/components/input/input.wp.scss

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
@import "../../globals.wp";
2+
@import "./input";
3+
4+
// Windows Input
5+
// --------------------------------------------------
6+
7+
$text-input-wp-background-color: $list-wp-background-color !default;
8+
$text-input-wp-border-color: $input-wp-border-color !default;
9+
$text-input-wp-border-width: 2px !default;
10+
11+
$text-input-wp-padding-vertical: 0 !default;
12+
$text-input-wp-padding-horizontal: 8px !default;
13+
$text-input-wp-line-height: 3rem !default;
14+
15+
$text-input-wp-highlight-color: map-get($colors-wp, primary) !default;
16+
$text-input-wp-hightlight-color-valid: map-get($colors-wp, secondary) !default;
17+
$text-input-wp-hightlight-color-invalid: map-get($colors-wp, danger) !default;
18+
19+
$text-input-wp-input-clear-icon-width: 30px !default;
20+
$text-input-wp-input-clear-icon-color: $input-wp-border-color !default;
21+
$text-input-wp-input-clear-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $text-input-wp-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
22+
$text-input-wp-input-clear-icon-size: 22px !default;
23+
24+
25+
26+
// Windows Default Input
27+
// --------------------------------------------------
28+
29+
.text-input {
30+
margin: $item-wp-padding-top ($item-wp-padding-right / 2) $item-wp-padding-bottom ($item-wp-padding-left / 2);
31+
padding: $text-input-wp-padding-vertical $text-input-wp-padding-horizontal;
32+
border: $text-input-wp-border-width solid $text-input-wp-border-color;
33+
line-height: $text-input-wp-line-height;
34+
}
35+
36+
37+
// Windows Inset Input
38+
// --------------------------------------------------
39+
40+
.inset-input {
41+
margin: ($item-wp-padding-top / 2) $item-wp-padding-right ($item-wp-padding-bottom / 2) $item-wp-padding-left;
42+
padding: ($item-wp-padding-top / 2) ($item-wp-padding-right / 2) ($item-wp-padding-bottom / 2) ($item-wp-padding-left / 2);
43+
}
44+
45+
46+
// Windows Highlighted Input
47+
// --------------------------------------------------
48+
49+
.input-has-focus .text-input {
50+
border-color: $text-input-wp-highlight-color;
51+
}
52+
53+
ion-input.ng-valid.input-has-value .text-input {
54+
border-color: $text-input-wp-hightlight-color-valid;
55+
}
56+
57+
ion-input.ng-invalid.ng-touched .text-input {
58+
border-color: $text-input-wp-hightlight-color-invalid;
59+
}
60+
61+
62+
// Windows Stacked & Floating Inputs
63+
// --------------------------------------------------
64+
65+
.item-label-stacked .text-input,
66+
.item-label-floating .text-input {
67+
margin-left: 0;
68+
margin-top: 8px;
69+
margin-bottom: 8px;
70+
}
71+
72+
.item-label-floating .text-input.cloned-input {
73+
top: 32px;
74+
}
75+
76+
.item-label-stacked .text-input.cloned-input {
77+
top: 27px;
78+
}
79+
80+
81+
// Windows Clear Input Icon
82+
// --------------------------------------------------
83+
84+
ion-input[clearInput] {
85+
position: relative;
86+
87+
.text-input {
88+
padding-right: $text-input-wp-input-clear-icon-width;
89+
}
90+
}
91+
92+
.text-input-clear-icon {
93+
width: $text-input-wp-input-clear-icon-width;
94+
95+
@include svg-background-image($text-input-wp-input-clear-icon-svg);
96+
background-size: $text-input-wp-input-clear-icon-size;
97+
right: ($item-wp-padding-right / 2);
98+
bottom: 2px;
99+
}

0 commit comments

Comments
 (0)