209 lines
4.7 KiB
CSS
209 lines
4.7 KiB
CSS
.mm,
|
|
.mm a,
|
|
.mm li,
|
|
.mm span,
|
|
.mm ul {
|
|
display: block;
|
|
padding: 0;
|
|
margin: 0;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box
|
|
}
|
|
|
|
.mm a,
|
|
.mm li,
|
|
.mm span,
|
|
.mm ul {
|
|
border-width: 0;
|
|
border-style: inherit;
|
|
border-color: inherit;
|
|
background: inherit
|
|
}
|
|
|
|
:root {
|
|
--mm-color: rgba(0, 0, 0, 0.8);
|
|
--mm-item-height: 50px;
|
|
--mm-item-indent: 20px;
|
|
--mm-line-height: 24px;
|
|
--mm-navbar-height: var(--mm-item-height);
|
|
--mm-arrow-color: rgba(0, 0, 0, 0.3);
|
|
--mm-arrow-size: 10px;
|
|
--mm-arrow-weight: 2px
|
|
}
|
|
|
|
body.mm--open {
|
|
overflow-y: hidden
|
|
}
|
|
|
|
.mm {
|
|
-webkit-tap-highlight-color: transparent;
|
|
-webkit-overflow-scrolling: touch;
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 80%;
|
|
min-width: 200px;
|
|
max-width: 440px;
|
|
overflow: hidden;
|
|
color: var(--mm-arrow-color);
|
|
background: #f3f3f3;
|
|
border: 0 solid rgba(0, 0, 0, .1);
|
|
line-height: var(--mm-line-height);
|
|
-webkit-box-shadow: 300px 0 0 100vw transparent, 0 0 20px transparent;
|
|
box-shadow: 300px 0 0 100vw transparent, 0 0 20px transparent;
|
|
-webkit-transform: translateX(-100%);
|
|
-ms-transform: translateX(-100%);
|
|
transform: translateX(-100%);
|
|
-webkit-transition: -webkit-transform .3s ease, -webkit-box-shadow .3s ease;
|
|
transition: -webkit-transform .3s ease, -webkit-box-shadow .3s ease;
|
|
-o-transition: transform .3s ease, box-shadow .3s ease;
|
|
transition: transform .3s ease, box-shadow .3s ease;
|
|
transition: transform .3s ease, box-shadow .3s ease, -webkit-transform .3s ease, -webkit-box-shadow .3s ease
|
|
}
|
|
|
|
.mm.mm--open {
|
|
-webkit-box-shadow: 300px 0 0 100vw rgba(0, 0, 0, .2), 0 0 20px rgba(0, 0, 0, .2);
|
|
box-shadow: 300px 0 0 100vw rgba(0, 0, 0, .2), 0 0 20px rgba(0, 0, 0, .2);
|
|
-webkit-transform: translateX(0);
|
|
-ms-transform: translateX(0);
|
|
transform: translateX(0)
|
|
}
|
|
|
|
.mm {
|
|
cursor: pointer
|
|
}
|
|
|
|
.mm:before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: calc(var(--mm-navbar-height)/ 2);
|
|
left: var(--mm-item-indent);
|
|
width: var(--mm-arrow-size);
|
|
height: var(--mm-arrow-size);
|
|
margin-top: 2px;
|
|
border: 0 solid var(--mm-arrow-color);
|
|
border-top-width: var(--mm-arrow-weight);
|
|
border-left-width: var(--mm-arrow-weight);
|
|
-webkit-transform: rotate(-45deg) translate(50%, -50%);
|
|
-ms-transform: rotate(-45deg) translate(50%, -50%);
|
|
transform: rotate(-45deg) translate(50%, -50%)
|
|
}
|
|
|
|
.mm.mm--home {
|
|
cursor: default
|
|
}
|
|
|
|
.mm.mm--home:before {
|
|
content: none;
|
|
display: none
|
|
}
|
|
|
|
.mm:after {
|
|
content: attr(data-mm-title);
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: calc(var(--mm-item-indent) + (var(--mm-arrow-size) * 2));
|
|
right: var(--mm-item-indent);
|
|
line-height: var(--mm-navbar-height);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
-o-text-overflow: ellipsis;
|
|
text-overflow: ellipsis
|
|
}
|
|
|
|
.mm--home:after {
|
|
left: var(--mm-item-indent)
|
|
}
|
|
|
|
.mm ul {
|
|
-webkit-overflow-scrolling: touch;
|
|
position: fixed;
|
|
top: var(--mm-navbar-height);
|
|
bottom: 0;
|
|
left: 100%;
|
|
width: 0%;
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
border-top-width: 1px;
|
|
color: var(--mm-color);
|
|
cursor: default;
|
|
-webkit-transition: left .3s ease, width 0s ease .3s;
|
|
-o-transition: left .3s ease, width 0s ease .3s;
|
|
transition: left .3s ease, width 0s ease .3s
|
|
}
|
|
|
|
.mm ul.mm--open {
|
|
left: 0;
|
|
width: 100%;
|
|
-webkit-transition-delay: 0s;
|
|
-o-transition-delay: 0s;
|
|
transition-delay: 0s
|
|
}
|
|
|
|
.mm ul.mm--parent {
|
|
left: -100%
|
|
}
|
|
|
|
.mm>ul {
|
|
left: 0;
|
|
width: 100%
|
|
}
|
|
|
|
.mm li {
|
|
position: relative;
|
|
cursor: pointer
|
|
}
|
|
|
|
.mm li:before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: var(--mm-item-indent);
|
|
right: 0;
|
|
z-index: 12;
|
|
border: inherit;
|
|
border-top-width: 1px
|
|
}
|
|
|
|
.mm li:after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: calc(var(--mm-item-height)/ 2);
|
|
right: calc(var(--mm-item-height)/ 2);
|
|
z-index: 0;
|
|
width: var(--mm-arrow-size);
|
|
height: var(--mm-arrow-size);
|
|
border: 0 solid var(--mm-arrow-color);
|
|
border-top-width: var(--mm-arrow-weight);
|
|
border-right-width: var(--mm-arrow-weight);
|
|
border-bottom-width: 0;
|
|
-webkit-transform: rotate(45deg) translate(0, -50%);
|
|
-ms-transform: rotate(45deg) translate(0, -50%);
|
|
transform: rotate(45deg) translate(0, -50%)
|
|
}
|
|
|
|
.mm a,
|
|
.mm span {
|
|
position: relative;
|
|
z-index: 1;
|
|
padding: calc((var(--mm-item-height) - var(--mm-line-height))/ 2) var(--mm-item-indent)
|
|
}
|
|
|
|
.mm a {
|
|
text-decoration: none;
|
|
color: inherit
|
|
}
|
|
|
|
.mm a:not(:last-child) {
|
|
width: calc(100% - 50px);
|
|
border-right-width: 1px
|
|
}
|
|
|
|
.mm span {
|
|
background: 0 0
|
|
} |