diff --git a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html index f0b31314a..f2a0b892e 100644 --- a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html +++ b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html @@ -22,6 +22,14 @@ + + + + + + + - - - - - - - diff --git a/src/addons/block/myoverview/components/myoverview/myoverview.scss b/src/addons/block/myoverview/components/myoverview/myoverview.scss index 9c2cb0d56..06c764187 100644 --- a/src/addons/block/myoverview/components/myoverview/myoverview.scss +++ b/src/addons/block/myoverview/components/myoverview/myoverview.scss @@ -1,21 +1,35 @@ :host { ion-row.addon-block-myoverview-filter { - padding: 4px 8px 0px 8px; + margin: 8px; + padding: 0; ion-col { - padding: 0 2px; + padding: 0; } ion-button, core-combobox ::ng-deep ion-button { + --border-width: 0; + --a11y-min-target-size: 40px; margin: 0; + + .select-icon { + display: none; + } ion-icon { font-size: 20px; } } - ::ng-deep ion-searchbar { + core-combobox ::ng-deep ion-select { + margin: 0; + --a11y-min-target-size: 40px; + } + + ion-searchbar { padding: 0; + --height: 40px; } } + } diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index b10ac0d47..a162e6c0a 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -1091,20 +1091,28 @@ ion-chip { } ion-searchbar { - .searchbar-search-icon.ios { - top: 4px; - } - .searchbar-search-icon.md { - } + height: var(--height) !important; - .searchbar-input, - .sc-ion-searchbar-md.searchbar-input, - .sc-ion-searchbar-ios.searchbar-input { - @include padding-horizontal(48px); + .searchbar-input-container { + color: var(--color) !important; + height: var(--height) !important; } .searchbar-input { - @include padding-horizontal(48px); + height: var(--height) !important; + border: 1px solid var(--border-color) !important; + box-shadow: none !important; + border-radius: var(--border-radius) !important; + background: var(--background) !important; + @include padding-horizontal(var(--height) !important); + } + + .searchbar-search-icon { + @include position(null, null, null, calc(var(--height) / 4) !important); + } + + button { + @include position(null, 0 !important, null, null); } } diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index 944c0f5d6..f8799c64f 100644 --- a/src/theme/theme.light.scss +++ b/src/theme/theme.light.scss @@ -190,23 +190,16 @@ --ion-searchbar-background: var(--ion-background-color); --ion-searchbar-border-color: var(--core-input-stroke); --ion-searchbar-border-radius: var(--core-input-radius); + --ion-searchbar-height: var(--a11y-min-target-size); --ion-searchbar-color: var(--text-color); --ion-searchbar-icon-color: var(--core-input-stroke); ion-searchbar { --background: var(--ion-searchbar-background); --border-color: var(--ion-searchbar-border-color); + --color: var(--ion-searchbar-color); + --border-radius: var(--ion-searchbar-border-radius); --icon-color: var(--ion-searchbar-icon-color); - - .searchbar-input-container { - color: var(--ion-searchbar-color) !important; - } - .searchbar-input { - height: var(--a11y-min-target-size); - border: 1px solid var(--ion-searchbar-border-color); - box-shadow: none; - border-radius: var(--ion-searchbar-border-radius); - background: var(--ion-searchbar-background) !important; - } + --height: var(--ion-searchbar-height); } --core-search-box-background: var(--ion-background-color);