Skip to content

Commit

Permalink
feat(windows): add searchbar component with styling
Browse files Browse the repository at this point in the history
references #5565
  • Loading branch information
brandyscarney committed Feb 23, 2016
1 parent 1cf56ee commit a9054ad
Show file tree
Hide file tree
Showing 3 changed files with 161 additions and 0 deletions.
1 change: 1 addition & 0 deletions ionic/components.wp.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"components/list/list.wp",
"components/modal/modal.wp",
"components/radio/radio.wp",
"components/searchbar/searchbar.wp",
"components/segment/segment.wp",
"components/toggle/toggle.wp",
"components/toolbar/toolbar.wp";
3 changes: 3 additions & 0 deletions ionic/components/searchbar/searchbar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,9 @@ export class SearchbarInput {
*/
@Component({
selector: 'ion-searchbar',
host: {
'[class.searchbar-has-value]': 'value'
},
template:
'<div class="searchbar-input-container">' +
'<button (click)="cancelSearchbar()" (mousedown)="cancelSearchbar()" clear dark class="searchbar-md-cancel">' +
Expand Down
157 changes: 157 additions & 0 deletions ionic/components/searchbar/searchbar.wp.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
@import "../../globals.wp";
@import "./searchbar";

// Windows Searchbar
// --------------------------------------------------

$searchbar-wp-padding: 0 !default;
$searchbar-wp-background-color: transparent !default;
$searchbar-wp-border-width: 2px !default;
$searchbar-wp-border-color: #818181 !default;
$searchbar-wp-border-color-focused: map-get($colors-wp, primary) !default;

$searchbar-wp-input-search-icon-color: #858585 !default;
$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;
$searchbar-wp-input-search-icon-size: 20px !default;

$searchbar-wp-input-padding-vertical: 0 !default;
$searchbar-wp-input-padding-horizontal: 8px !default;
$searchbar-wp-input-height: auto !default;
$searchbar-wp-input-line-height: 3rem !default;
$searchbar-wp-input-placeholder-color: #858585 !default;
$searchbar-wp-input-text-color: #141414 !default;
$searchbar-wp-input-background-color: #FFFFFF !default;
$searchbar-wp-input-border-radius: 0 !default;
$searchbar-wp-input-font-size: 1.4rem !default;
$searchbar-wp-input-font-weight: 400 !default;

$searchbar-wp-input-clear-icon-color: #858585 !default;
$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;
$searchbar-wp-input-clear-icon-size: 22px !default;


// Searchbar
// -----------------------------------------

ion-searchbar {
padding: $searchbar-wp-padding;
background: $searchbar-wp-background-color;
border: $searchbar-wp-border-width solid $searchbar-wp-border-color;
}


// Searchbar Search Icon
// -----------------------------------------

.searchbar-search-icon {
width: $searchbar-wp-input-search-icon-size + 1;
height: $searchbar-wp-input-search-icon-size + 1;
top: 5px;
right: $searchbar-wp-input-padding-horizontal;
background-size: $searchbar-wp-input-search-icon-size;
background-repeat: no-repeat;
position: absolute;

@include svg-background-image($searchbar-wp-input-search-icon-svg);

&.activated {
background-color: transparent;
}
}


// Searchbar Input Field
// -----------------------------------------

.searchbar-input {
padding: $searchbar-wp-input-padding-vertical $searchbar-wp-input-padding-horizontal;

height: $searchbar-wp-input-height;
line-height: $searchbar-wp-input-line-height;

font-size: $searchbar-wp-input-font-size;
font-weight: $searchbar-wp-input-font-weight;

border-radius: $searchbar-wp-input-border-radius;
color: $searchbar-wp-input-text-color;
background-color: $searchbar-wp-input-background-color;
background-position: $searchbar-wp-input-padding-horizontal center;

@include placeholder($searchbar-wp-input-placeholder-color);
}


// Searchbar Clear Input Icon
// -----------------------------------------

.searchbar-clear-icon {
width: $searchbar-wp-input-clear-icon-size;
height: 100%;
padding: 0;

@include svg-background-image($searchbar-wp-input-clear-icon-svg);
background-size: $searchbar-wp-input-clear-icon-size;
background-repeat: no-repeat;
background-position: center;
position: absolute;
right: $searchbar-wp-input-padding-horizontal;
top: 0;

&.activated {
background-color: transparent;
}
}


// Searchbar Focused
// -----------------------------------------

.searchbar-focused {
border-color: $searchbar-wp-border-color-focused;
}


// Searchbar Left Aligned
// -----------------------------------------

.searchbar-has-value .searchbar-search-icon {
display: none;
}


// Searchbar in Toolbar
// -----------------------------------------

.toolbar {
ion-searchbar {

}
}


// Searchbar Cancel Icon (iOS only)
// -----------------------------------------

.searchbar-ios-cancel {
display: none;
}


// Searchbar Cancel Icon (MD only)
// -----------------------------------------

.searchbar-md-cancel {
display: none;
}


// Generate Default Windows Search Bar Colors
// --------------------------------------------------

@each $color-name, $color-value in $colors-wp {

ion-searchbar[#{$color-name}] .searchbar-focused {
border-color: $color-value;
}

}

0 comments on commit a9054ad

Please sign in to comment.