Fixed spacing of search on tablet and screen

This commit is contained in:
squidfunk
2020-02-10 14:05:39 +01:00
parent 41dc846753
commit 42540dae9b
10 changed files with 43 additions and 89 deletions

View File

@@ -202,12 +202,22 @@
display: block;
width: px2rem(234px);
max-width: px2rem(234px);
padding-right: px2rem(12px);
margin-left: px2rem(20px);
// Adjust for RTL languages
[dir="rtl"] & {
padding-right: initial;
padding-left: px2rem(12px);
margin-right: px2rem(20px);
margin-left: initial;
}
}
// [screen +]: Increase spacing of search bar
@include break-from-device(screen) {
margin-left: px2rem(28px);
// Adjust for RTL languages
[dir="rtl"] & {
margin-right: px2rem(28px);
}
}
}

View File

@@ -42,7 +42,8 @@ $md-toggle__search--checked:
// [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) {
padding: px2rem(4px);
margin-left: px2rem(4px);
padding: px2rem(4px) 0;
}
// Search modal overlay
@@ -181,30 +182,17 @@ $md-toggle__search--checked:
// [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) {
position: relative;
width: px2rem(230px);
margin-right: px2rem(16px);
width: px2rem(234px);
padding: px2rem(2px) 0;
float: right;
transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
// Adjust for RTL languages
[dir="rtl"] & {
margin-right: initial;
margin-left: px2rem(16px);
float: left;
}
}
// [screen +]: Increase spacing of search bar
@include break-from-device(screen) {
margin-right: px2rem(24px);
// Adjust for RTL languages
[dir="rtl"] & {
margin-left: px2rem(24px);
}
}
// Set maximum width
#{$md-toggle__search--checked} & {