Removed collapsible button requirements, and animate submenu deletion
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
parent
43f3fad41b
commit
a8df5c2bed
|
@ -116,11 +116,23 @@ kbd {
|
||||||
&.open > ul {
|
&.open > ul {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
/* hide and animate the deletion of subitems */
|
||||||
|
&.deleted {
|
||||||
|
> ul {
|
||||||
|
opacity: 0;
|
||||||
|
max-height: 0;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
/* Second level nesting for lists */
|
/* Second level nesting for lists */
|
||||||
> ul {
|
> ul {
|
||||||
flex: 1 0 100%;
|
flex: 1 0 100%;
|
||||||
padding-left: 44px;
|
padding-left: 44px;
|
||||||
width: inherit;
|
width: inherit;
|
||||||
|
/* bezier override the hide/slow effect due to the 2000 max-height */
|
||||||
|
transition: max-height 250ms cubic-bezier(0, 1, 0, 1),
|
||||||
|
opacity 250ms ease-in-out;
|
||||||
|
max-height: 2000px;
|
||||||
> li {
|
> li {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
@ -240,16 +252,11 @@ kbd {
|
||||||
/**
|
/**
|
||||||
* Collapsible menus
|
* Collapsible menus
|
||||||
*/
|
*/
|
||||||
.collapse {
|
|
||||||
/* hide collapse button initially */
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.collapsible {
|
.collapsible {
|
||||||
border-width: 0 1 0 0 !important;
|
|
||||||
> ul {
|
> ul {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
> .collapse {
|
&:after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
width: 44px;
|
width: 44px;
|
||||||
|
@ -264,29 +271,35 @@ kbd {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
outline: none !important;
|
outline: none !important;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
transition: transform 250ms ease-in-out;
|
content: ' ';
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: rotate(-90deg);
|
||||||
|
-ms-transform: rotate(-90deg);
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
|
||||||
/* force padding on link if collapse is here no matter if a has an icon class */
|
/* force padding on link if collapse is here no matter if a has an icon class */
|
||||||
& + a {
|
& + a {
|
||||||
padding-left: 44px;
|
padding-left: 44px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&:after,
|
||||||
|
> a {
|
||||||
|
transition: background 100ms ease-in-out,
|
||||||
|
transform 250ms ease-in-out,
|
||||||
|
opacity 100ms ease-in-out;
|
||||||
|
}
|
||||||
&:hover > a,
|
&:hover > a,
|
||||||
&:focus > a {
|
&:focus > a {
|
||||||
background-image: none;
|
background-position-x: -50px;
|
||||||
}
|
}
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
> .collapse {
|
&:after {
|
||||||
display: block;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.collapse {
|
|
||||||
-webkit-transform: rotate(-90deg);
|
|
||||||
-ms-transform: rotate(-90deg);
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
}
|
|
||||||
&.open {
|
&.open {
|
||||||
.collapse {
|
&:after {
|
||||||
-webkit-transform: rotate(0);
|
-webkit-transform: rotate(0);
|
||||||
-ms-transform: rotate(0);
|
-ms-transform: rotate(0);
|
||||||
transform: rotate(0);
|
transform: rotate(0);
|
||||||
|
|
Loading…
Reference in New Issue