octicon-mirror(24/)
javascript/ionic-framework
octicon-rss(16/)
1
0
octicon-repo-forked(16/)Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 22:44:13 +08:00
octicon-code(16/) Code octicon-issue-opened(16/) Issues octicon-package(16/) Packages octicon-project(16/) Projects octicon-tag(16/) Releases octicon-book(16/) Wiki octicon-pulse(16/) Activity

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

Browse Source 
* Updates searchbar.md.scss to expose box-shadow

We would like to style the box-shadow property in searchbar and give the parent the ability to control it.

* fix(searchbar): add box shadow to main input for both modes
This commit is contained in:
octicon-git-branch(16/)
octicon-tag(16/)
Antoine
2019-11-08 10:53:42 -05:00
committed by Liam DeBeasi
gitea-unlock(16/)
parent 48a766246d
commit 1ab7066aa0
octicon-diff(16/tw-mr-1) 6 changed files with 22 additions and 13 deletions
gitea-whitespace(16/)
gitea-split(16/)
octicon-kebab-horizontal(16/)
Download Patch File Download Diff File Expand all files Collapse all files

3
core/src/components/searchbar/readme.md
View File

@@ -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 |

7
core/src/components/searchbar/searchbar.ios.scss
View File

@@ -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);
@@ -20,8 +21,6 @@
.searchbar-input-container {
height: $searchbar-ios-input-height;
contain: strict;
}

7
core/src/components/searchbar/searchbar.md.scss
View File

@@ -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);
@@ -67,8 +68,6 @@
font-weight: 400;
line-height: $searchbar-md-input-line-height;
box-shadow: $searchbar-md-input-box-shadow;
}

9
core/src/components/searchbar/searchbar.scss
View File

@@ -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
@@ -68,8 +69,6 @@
.searchbar-input {
@include text-inherit();
box-sizing: border-box;
display: block;
width: 100%;
@@ -81,6 +80,10 @@
background: var(--background);
font-family: inherit;
box-shadow: var(--box-shadow);
box-sizing: border-box;
appearance: none;
&::placeholder {

8
core/src/components/searchbar/test/basic/index.html
View File

@@ -26,7 +26,7 @@
</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>
@@ -118,6 +118,12 @@
<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');