Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(searchbar): add --box-shadow variable to style searchbar input #19838

Merged
merged 2 commits into from Nov 8, 2019
Merged

feat(searchbar): add --box-shadow variable to style searchbar input #19838

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f813252
Updates searchbar.md.scss to expose box-shadow
antoinecfmws Nov 5, 2019
27a4989
fix(searchbar): add box shadow to main input for both modes
brandyscarney Nov 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions core/api.txt
View file
Open in desktop
Expand Up @@ -965,6 +965,7 @@ ion-searchbar,event,ionClear,void,true
ion-searchbar,event,ionFocus,void,true
ion-searchbar,event,ionInput,KeyboardEvent,true
ion-searchbar,css-prop,--background
ion-searchbar,css-prop,--box-shadow
ion-searchbar,css-prop,--cancel-button-color
ion-searchbar,css-prop,--clear-button-color
ion-searchbar,css-prop,--color
Expand Down
3 changes: 2 additions & 1 deletion core/src/components/searchbar/readme.md
View file
Open in desktop
Expand Up @@ -280,7 +280,8 @@ Type: `Promise<void>`

| Name | Description |
| --------------------------- | ---------------------------------------- |
| `--background` | Background of the searchbar |
| `--background` | Background of the searchbar input |
| `--box-shadow` | Box shadow of the searchbar input |
| `--cancel-button-color` | Color of the searchbar cancel button |
| `--clear-button-color` | Color of the searchbar clear button |
| `--color` | Color of the searchbar text |
Expand Down
7 changes: 3 additions & 4 deletions core/src/components/searchbar/searchbar.ios.scss
View file
Open in desktop
Expand Up @@ -5,11 +5,12 @@
// --------------------------------------------------

:host {
--clear-button-color: #{$searchbar-ios-input-clear-icon-color};
--background: #{$searchbar-ios-input-background-color};
--box-shadow: none;
--cancel-button-color: #{$searchbar-ios-cancel-button-color};
--clear-button-color: #{$searchbar-ios-input-clear-icon-color};
--color: #{$searchbar-ios-input-text-color};
--icon-color: #{$searchbar-ios-input-search-icon-color};
--background: #{$searchbar-ios-input-background-color};

@include padding($searchbar-ios-padding-top, $searchbar-ios-padding-end, $searchbar-ios-padding-bottom, $searchbar-ios-padding-start);

Expand All @@ -20,8 +21,6 @@

.searchbar-input-container {
height: $searchbar-ios-input-height;

contain: strict;
}


Expand Down
7 changes: 3 additions & 4 deletions core/src/components/searchbar/searchbar.md.scss
View file
Open in desktop
Expand Up @@ -5,11 +5,12 @@
// --------------------------------------------------

:host {
--clear-button-color: initial;
--background: #{$searchbar-md-input-background-color};
--box-shadow: #{$searchbar-md-input-box-shadow};
--cancel-button-color: #{$searchbar-md-cancel-button-color};
--clear-button-color: initial;
--color: #{$searchbar-md-input-text-color};
--icon-color: #{$searchbar-md-input-search-icon-color};
--background: #{$searchbar-md-input-background-color};

@include padding($searchbar-md-padding-top, $searchbar-md-padding-end, $searchbar-md-padding-bottom, $searchbar-md-padding-start);

Expand Down Expand Up @@ -67,8 +68,6 @@
font-weight: 400;

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

box-shadow: $searchbar-md-input-box-shadow;
}


Expand Down
9 changes: 6 additions & 3 deletions core/src/components/searchbar/searchbar.scss
View file
Open in desktop
Expand Up @@ -5,7 +5,8 @@

:host {
/**
* @prop --background: Background of the searchbar
* @prop --background: Background of the searchbar input
* @prop --box-shadow: Box shadow of the searchbar input
* @prop --cancel-button-color: Color of the searchbar cancel button
* @prop --clear-button-color: Color of the searchbar clear button
* @prop --color: Color of the searchbar text
Expand Down Expand Up @@ -68,8 +69,6 @@
.searchbar-input {
@include text-inherit();

box-sizing: border-box;

display: block;

width: 100%;
Expand All @@ -81,6 +80,10 @@
background: var(--background);

font-family: inherit;

box-shadow: var(--box-shadow);

box-sizing: border-box;
appearance: none;

&::placeholder {
Expand Down
8 changes: 7 additions & 1 deletion core/src/components/searchbar/test/basic/index.html
View file
Open in desktop
Expand Up @@ -26,7 +26,7 @@ <h5 class="ion-padding-start ion-padding-top"> Search - Default </h5>
</ion-searchbar>

<h5 class="ion-padding-start ion-padding-top"> Search - No Cancel Button </h5>
<ion-searchbar id="noCancel" value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="never">
<ion-searchbar class="red-box" id="noCancel" value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="never">
</ion-searchbar>

<h5 class="ion-padding-start ion-padding-top"> Search - Always Show Cancel Button</h5>
Expand Down Expand Up @@ -118,6 +118,12 @@ <h5 class="ion-padding-start ion-padding-top"> Search - Animated and No Cancel</
<ion-button expand="block" color="secondary" onClick="toggleDisabled()">Toggle disabled</ion-button>
</div>

<style>
.red-box {
--box-shadow: 0 2px 2px 0 rgba(255, 0, 0, 0.14), 0 3px 1px -2px rgba(255, 0, 0, 0.2), 0 1px 5px 0 rgba(255, 0, 0, 0.12);
}
</style>

<script>
function toggleAttr() {
var dynamicAttr = document.getElementById('dynamicAttr');
Expand Down