Fixed search bar alignment on big screens

This commit is contained in:
squidfunk 2017-10-19 09:23:22 +02:00 committed by Martin Donath
parent 9c3134750e
commit 9005ae2381
4 changed files with 14 additions and 16 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -50,7 +50,7 @@
<script src="{{ base_url }}/assets/javascripts/modernizr-e826f8942a.js"></script>
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-0741cbeb94.css">
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-6062816a07.css">
{% if config.extra.palette %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-23f75ab9c7.palette.css">
{% endif %}

View File

@ -123,13 +123,13 @@ $md-toggle__search--checked:
// Search modal wrapper
&__inner {
width: 100%;
// [tablet portrait -]: Put search modal off-canvas by default
@include break-to-device(tablet portrait) {
position: fixed;
top: 0;
left: 100%;
width: 100%;
height: 100%;
transform: translateX(5%);
transition:
@ -151,23 +151,11 @@ $md-toggle__search--checked:
}
}
// [tablet landscape +]: Make relative for inner layout
@include break-from-device(tablet landscape) {
position: relative;
}
}
// Search form
&__form {
position: relative;
// [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) {
position: relative;
width: 23rem;
// Hack: omit jitter when form is resized
float: right;
transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
border-radius: 0.2rem;
}
// Set maximum width
@ -185,6 +173,16 @@ $md-toggle__search--checked:
}
}
// Search form
&__form {
position: relative;
// [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) {
border-radius: 0.2rem;
}
}
// Search input
&__input {
position: relative;