Skip to content

Commit a9054ad

Browse files
brandyscarneybrandyscarney
committed
feat(windows): add searchbar component with styling
references #5565
1 parent 1cf56ee commit a9054ad

File tree

3 files changed

+161
-0
lines changed

3 files changed

+161
-0
lines changed

‎ionic/components.wp.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"components/list/list.wp",
1818
"components/modal/modal.wp",
1919
"components/radio/radio.wp",
20+
"components/searchbar/searchbar.wp",
2021
"components/segment/segment.wp",
2122
"components/toggle/toggle.wp",
2223
"components/toolbar/toolbar.wp";

‎ionic/components/searchbar/searchbar.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,9 @@ export class SearchbarInput {
4747
*/
4848
@Component({
4949
selector: 'ion-searchbar',
50+
host: {
51+
'[class.searchbar-has-value]': 'value'
52+
},
5053
template:
5154
'<div class="searchbar-input-container">' +
5255
'<button (click)="cancelSearchbar()" (mousedown)="cancelSearchbar()" clear dark class="searchbar-md-cancel">' +

‎ionic/components/searchbar/searchbar.wp.scss‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
@import "../../globals.wp";
2+
@import "./searchbar";
3+
4+
// Windows Searchbar
5+
// --------------------------------------------------
6+
7+
$searchbar-wp-padding: 0 !default;
8+
$searchbar-wp-background-color: transparent !default;
9+
$searchbar-wp-border-width: 2px !default;
10+
$searchbar-wp-border-color: #818181 !default;
11+
$searchbar-wp-border-color-focused: map-get($colors-wp, primary) !default;
12+
13+
$searchbar-wp-input-search-icon-color: #858585 !default;
14+
$searchbar-wp-input-search-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $searchbar-wp-input-search-icon-color + "' d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></svg>" !default;
15+
$searchbar-wp-input-search-icon-size: 20px !default;
16+
17+
$searchbar-wp-input-padding-vertical: 0 !default;
18+
$searchbar-wp-input-padding-horizontal: 8px !default;
19+
$searchbar-wp-input-height: auto !default;
20+
$searchbar-wp-input-line-height: 3rem !default;
21+
$searchbar-wp-input-placeholder-color: #858585 !default;
22+
$searchbar-wp-input-text-color: #141414 !default;
23+
$searchbar-wp-input-background-color: #FFFFFF !default;
24+
$searchbar-wp-input-border-radius: 0 !default;
25+
$searchbar-wp-input-font-size: 1.4rem !default;
26+
$searchbar-wp-input-font-weight: 400 !default;
27+
28+
$searchbar-wp-input-clear-icon-color: #858585 !default;
29+
$searchbar-wp-input-clear-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $searchbar-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;
30+
$searchbar-wp-input-clear-icon-size: 22px !default;
31+
32+
33+
// Searchbar
34+
// -----------------------------------------
35+
36+
ion-searchbar {
37+
padding: $searchbar-wp-padding;
38+
background: $searchbar-wp-background-color;
39+
border: $searchbar-wp-border-width solid $searchbar-wp-border-color;
40+
}
41+
42+
43+
// Searchbar Search Icon
44+
// -----------------------------------------
45+
46+
.searchbar-search-icon {
47+
width: $searchbar-wp-input-search-icon-size + 1;
48+
height: $searchbar-wp-input-search-icon-size + 1;
49+
top: 5px;
50+
right: $searchbar-wp-input-padding-horizontal;
51+
background-size: $searchbar-wp-input-search-icon-size;
52+
background-repeat: no-repeat;
53+
position: absolute;
54+
55+
@include svg-background-image($searchbar-wp-input-search-icon-svg);
56+
57+
&.activated {
58+
background-color: transparent;
59+
}
60+
}
61+
62+
63+
// Searchbar Input Field
64+
// -----------------------------------------
65+
66+
.searchbar-input {
67+
padding: $searchbar-wp-input-padding-vertical $searchbar-wp-input-padding-horizontal;
68+
69+
height: $searchbar-wp-input-height;
70+
line-height: $searchbar-wp-input-line-height;
71+
72+
font-size: $searchbar-wp-input-font-size;
73+
font-weight: $searchbar-wp-input-font-weight;
74+
75+
border-radius: $searchbar-wp-input-border-radius;
76+
color: $searchbar-wp-input-text-color;
77+
background-color: $searchbar-wp-input-background-color;
78+
background-position: $searchbar-wp-input-padding-horizontal center;
79+
80+
@include placeholder($searchbar-wp-input-placeholder-color);
81+
}
82+
83+
84+
// Searchbar Clear Input Icon
85+
// -----------------------------------------
86+
87+
.searchbar-clear-icon {
88+
width: $searchbar-wp-input-clear-icon-size;
89+
height: 100%;
90+
padding: 0;
91+
92+
@include svg-background-image($searchbar-wp-input-clear-icon-svg);
93+
background-size: $searchbar-wp-input-clear-icon-size;
94+
background-repeat: no-repeat;
95+
background-position: center;
96+
position: absolute;
97+
right: $searchbar-wp-input-padding-horizontal;
98+
top: 0;
99+
100+
&.activated {
101+
background-color: transparent;
102+
}
103+
}
104+
105+
106+
// Searchbar Focused
107+
// -----------------------------------------
108+
109+
.searchbar-focused {
110+
border-color: $searchbar-wp-border-color-focused;
111+
}
112+
113+
114+
// Searchbar Left Aligned
115+
// -----------------------------------------
116+
117+
.searchbar-has-value .searchbar-search-icon {
118+
display: none;
119+
}
120+
121+
122+
// Searchbar in Toolbar
123+
// -----------------------------------------
124+
125+
.toolbar {
126+
ion-searchbar {
127+
128+
}
129+
}
130+
131+
132+
// Searchbar Cancel Icon (iOS only)
133+
// -----------------------------------------
134+
135+
.searchbar-ios-cancel {
136+
display: none;
137+
}
138+
139+
140+
// Searchbar Cancel Icon (MD only)
141+
// -----------------------------------------
142+
143+
.searchbar-md-cancel {
144+
display: none;
145+
}
146+
147+
148+
// Generate Default Windows Search Bar Colors
149+
// --------------------------------------------------
150+
151+
@each $color-name, $color-value in $colors-wp {
152+
153+
ion-searchbar[#{$color-name}] .searchbar-focused {
154+
border-color: $color-value;
155+
}
156+
157+
}

0 commit comments

Comments
 (0)