Skip to content
Permalink
Browse files

fix(searchbar): update alignment of chips and other elements in toolb…

…ar (#19596)

fixes #19495 fixes #19502
  • Loading branch information...
brandyscarney authored and liamdebeasi committed Oct 8, 2019
1 parent 63c2008 commit 637f26b3642a266b6ef3b9d3d71b7327a5d3cc37
@@ -155,6 +155,15 @@
}
}

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

:host-context(ion-toolbar) {
@include padding(1px, null, 15px, null);

height: 52px;
}

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

@@ -33,6 +33,11 @@
<ion-button>Clear</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-back-button default-href="#" slot="start"></ion-back-button>
<ion-searchbar translucent></ion-searchbar>
<ion-chip slot="end" outline>Chip</ion-chip>
</ion-toolbar>
</ion-header>

<ion-content id="content" fullscreen>
@@ -41,20 +41,19 @@
@include padding(0, null);
}

// TODO - important is needed because searchbar is scoped
:host(.toolbar-searchbar) ::slotted(ion-searchbar) {
/* stylelint-disable */
height: 52px !important;

padding-top: 1px !important;
padding-bottom: 15px !important;
/* stylelint-enable */
:host(.toolbar-searchbar) ::slotted(*) {
align-self: start;
}

:host(.toolbar-searchbar) ::slotted(ion-buttons) {
align-self: start;
:host(.toolbar-searchbar) ::slotted(ion-chip) {
@include margin(3px, null, null, null);
}

:host(.toolbar-searchbar) ::slotted(ion-back-button) {
height: 38px;
}


// iOS Toolbar Slot Placement
// --------------------------------------------------

0 comments on commit 637f26b

Please sign in to comment.
You can’t perform that action at this time.