github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-05-23 23:29:57 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improve mobile dropdown styling

Browse Source
This commit is contained in:
Toby Zerner
2015-03-04 09:49:59 +10:30
parent 5eb554376f
commit cfc5266cb4
1 changed files with 15 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
ember/app/styles/flarum/dropdowns.less
View File

@ -32,7 +32,7 @@
} }
// PHONES // PHONES
@media (max-width: @screen-xs-max) { @media @phone {
.dropdown-open { .dropdown-open {
overflow: hidden; overflow: hidden;
} }
@ -49,22 +49,11 @@
display: block; display: block;
max-height: 100vh; max-height: 100vh;
border-radius: 0; border-radius: 0;
.box-shadow(none); .box-shadow(0 2px 6px @fl-shadow-color);
.transition(bottom 0.3s); .translate3d(0, 0, 0);
visibility: hidden;
.transition(~"bottom 0.3s, visibility 0s 0.3s");
&:before {
content: " ";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 200vh;
z-index: -1;
background: fade(@fl-body-primary-color, 90%);
pointer-events: none;
opacity: 0;
.transition(opacity 0.3s);
}
& > li > a { & > li > a {
background: #fff; background: #fff;
font-size: 16px; font-size: 16px;
@ -81,12 +70,18 @@
.open & { .open & {
bottom: 0; bottom: 0;
visibility: visible;
&:before { transition-delay: 0s;
opacity: 1;
pointer-events: auto;
} }
} }
.dropdown-backdrop {
background: fade(@fl-body-primary-color, 90%);
opacity: 0;
.transition(~"opacity 0.3s");
.open & {
opacity: 1;
}
} }
} }