Improve dynamic resizing of search and photo rail
This commit is contained in:
parent
9917a69dc5
commit
7d655c3dd5
4 changed files with 32 additions and 0 deletions
|
@ -25,6 +25,7 @@ input[type="text"] {
|
|||
.icon-button button {
|
||||
color: $accent;
|
||||
text-decoration: none;
|
||||
background: none;
|
||||
border: none;
|
||||
float: none;
|
||||
padding: unset;
|
||||
|
|
|
@ -74,3 +74,23 @@
|
|||
transition: max-height 0.4s;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 600px) {
|
||||
.photo-rail-grid {
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
}
|
||||
|
||||
#photo-rail-grid-toggle:checked ~ .photo-rail-grid {
|
||||
max-height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 450px) {
|
||||
.photo-rail-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
#photo-rail-grid-toggle:checked ~ .photo-rail-grid {
|
||||
max-height: 450px;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -42,6 +42,7 @@
|
|||
}
|
||||
|
||||
.search-panel {
|
||||
width: 100%;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.4s;
|
||||
|
@ -78,6 +79,15 @@
|
|||
grid-column-gap: 10px;
|
||||
}
|
||||
|
||||
.profile-tabs {
|
||||
@include search-resize(785px, 5, 185px);
|
||||
@include search-resize(725px, 4, 185px);
|
||||
@include search-resize(600px, 6, 140px);
|
||||
@include search-resize(530px, 5, 185px);
|
||||
@include search-resize(475px, 4, 185px);
|
||||
@include search-resize(406px, 3, 250px);
|
||||
}
|
||||
|
||||
@include search-resize(530px, 5, 185px);
|
||||
@include search-resize(475px, 4, 185px);
|
||||
@include search-resize(406px, 3, 250px);
|
||||
|
|
|
@ -32,6 +32,7 @@
|
|||
|
||||
.card-title {
|
||||
@include ellipsis;
|
||||
white-space: unset;
|
||||
font-weight: bold;
|
||||
font-size: 1.15em;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue