javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(searchbar): add border-radius css variable (#20662)

Browse Source 
fixes #17426
fixes #18247
This commit is contained in:
EinfachHans
2020-04-03 19:01:07 +02:00
committed by GitHub
parent 5b9840508f
commit acaa1d9ef7
5 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
core/api.txt
View File

@@ -954,6 +954,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,--border-radius
ion-searchbar,css-prop,--box-shadow
ion-searchbar,css-prop,--cancel-button-color
ion-searchbar,css-prop,--clear-button-color

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

@@ -303,6 +303,7 @@ Type: `Promise<void>`
| Name | Description |
| --------------------------- | ---------------------------------------- |
| `--background` | Background of the searchbar input |
| `--border-radius` | Border radius 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 |

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

@@ -6,6 +6,7 @@
:host {
--background: #{$searchbar-ios-input-background-color};
--border-radius: #{$searchbar-ios-input-border-radius};
--box-shadow: none;
--cancel-button-color: #{$searchbar-ios-cancel-button-color};
--clear-button-color: #{$searchbar-ios-input-clear-icon-color};
@@ -45,7 +46,6 @@
.searchbar-input {
@include padding(0, 28px);
@include border-radius($searchbar-ios-input-border-radius);
height: 100%;
@@ -189,4 +189,4 @@
color: currentColor;
opacity: $searchbar-ios-input-icon-opacity;
}
}

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

@@ -6,6 +6,7 @@
:host {
--background: #{$searchbar-md-input-background-color};
--border-radius: #{$searchbar-md-input-border-radius};
--box-shadow: #{$searchbar-md-input-box-shadow};
--cancel-button-color: #{$searchbar-md-cancel-button-color};
--clear-button-color: initial;
@@ -59,7 +60,6 @@
.searchbar-input {
@include padding(6px, 55px);
@include border-radius($searchbar-md-input-border-radius);
@include background-position(start, 8px, center);
height: $searchbar-md-input-height;

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

@@ -7,6 +7,7 @@
/**
* @prop --background: Background of the searchbar input
* @prop --box-shadow: Box shadow of the searchbar input
* @prop --border-radius: Border radius 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,6 +69,7 @@
.searchbar-input {
@include text-inherit();
@include border-radius(var(--border-radius));
display: block;