mirror of
https://github.com/koel/koel
synced 2024-11-24 21:23:06 +00:00
Merge branch 'caffinatedmonkey-styles't push origin master
This commit is contained in:
commit
1cff51d4ac
4 changed files with 19 additions and 15 deletions
|
@ -110,7 +110,6 @@
|
|||
padding: 24px 16px $footerHeight;
|
||||
background: $colorExtraBgr;
|
||||
max-height: calc(100vh - #{$headerHeight + $footerHeight});
|
||||
display: none;
|
||||
color: $color2ndText;
|
||||
overflow: auto;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
|
@ -176,16 +175,18 @@
|
|||
|
||||
@media only screen and (max-width : 1024px) {
|
||||
position: fixed;
|
||||
height: calc(100vh - #{$headerHeight + $footerHeight});
|
||||
padding-bottom: $footerHeight; // make sure the footer can never overlap the content
|
||||
width: $extraPanelWidth;
|
||||
z-index: 5;
|
||||
top: $headerHeight;
|
||||
right: -100%;
|
||||
transition: right .3s ease-in;
|
||||
right: 0;
|
||||
height: calc(100vh - #{$headerHeight + $footerHeight});
|
||||
width: $extraPanelWidth;
|
||||
padding-bottom: $footerHeight; // make sure the footer can never overlap the content
|
||||
z-index: 5;
|
||||
|
||||
transform: translateX(100%);
|
||||
transition: transform .3s $slideAnimation;
|
||||
|
||||
&.showing {
|
||||
right: 0;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -105,6 +105,7 @@
|
|||
align-items: center;
|
||||
align-content: stretch;
|
||||
display: flex;
|
||||
line-height: 1em;
|
||||
|
||||
span:first-child {
|
||||
flex: 1;
|
||||
|
|
|
@ -263,16 +263,17 @@
|
|||
|
||||
@media only screen and (max-width : 667px) {
|
||||
position: fixed;
|
||||
height: calc(100vh - #{$headerHeight + $footerHeight});
|
||||
padding-bottom: $footerHeight; // make sure the footer can never overlap the content
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
top: $headerHeight;
|
||||
left: -100%;
|
||||
transition: left .3s ease-in;
|
||||
height: calc(100vh - #{$headerHeight + $footerHeight});
|
||||
width: 100%;
|
||||
padding-bottom: $footerHeight; // make sure the footer can never overlap the content
|
||||
z-index: 99;
|
||||
|
||||
transform: translateX(-100%);
|
||||
transition: transform .3s $slideAnimation;
|
||||
|
||||
&.showing {
|
||||
left: 0;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -35,3 +35,4 @@ $footerHeight: 64px;
|
|||
$mainHeadingHeight: 64px;
|
||||
|
||||
$extraPanelWidth: 334px;
|
||||
$slideAnimation: cubic-bezier(0,0,0.3,1);
|
||||
|
|
Loading…
Reference in a new issue