diff --git a/less/mobile.less b/less/mobile.less index e69de29..a0ceb10 100644 --- a/less/mobile.less +++ b/less/mobile.less @@ -0,0 +1,162 @@ +#mobile-menu { + display: none; +} + +@media (max-width: 1200px) { + +} + +@media (max-width: 980px) { + body { + height: 100%; + } + + .header { + height: 58px; + box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.26); + position: fixed; + top: 0px; + z-index: 5; + + #main-page-title { + bottom: -31px; + font-size: 20px; + color: #FFF; + left: 52px; + font-weight: 400; + } + + #user_label { + right: 0px; + bottom: 7px; + } + + #main-menu { + display: none; + } + } + + #mobile-menu { + width: 31px; + background: none; + border: none; + vertical-align: 10%; + margin-right: 10px; + margin-left: -15px; + outline: none !important; + display: block; + + position: absolute; + top: 22px; + left: 22px; + + .bar { + width: 100%; + height: 2px; + background: #fff; + margin-bottom: 3px; + border-radius: 10px; + } + } + + #menu { + background-color: #1D1F20; + background-image: linear-gradient(145deg, #1D1F20, #404348); + + a { + color: #fff; + text-decoration: none; + } + + a:hover { + text-decoration: underline; + } + } + + .menu-header-title { + font-weight: 400; + letter-spacing: 0.5px; + margin: 0; + } + + .menu-section { + margin: 25px 0; + } + + .menu-section-title { + text-transform: uppercase; + color: #85888d; + font-weight: 200; + font-size: 13px; + letter-spacing: 1px; + padding: 0 20px; + margin:0; + } + + .menu-section-list { + padding:0; + margin: 10px 0; + list-style:none; + + a { + display: block; + padding: 10px 20px; + } + + a:hover { + background-color: rgba(255, 255, 255, 0.1); + text-decoration: none; + } + } + + #panel { + background: white; + min-height: 100%; + padding-top: 80px; + } + + .slideout-menu { + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 0; + width: 256px; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + display: none; + } + + + .slideout-panel { + position: relative; + z-index: 1; + } + + .slideout-open, + .slideout-open body, + .slideout-open .slideout-panel { + overflow: hidden; + overflow-y: hidden !important; + } + + .slideout-open .slideout-menu { + display: block; + } + + html { + height: 100%; + overflow-y: hidden; + } + + .slideout-open { + overflow-y: hidden; + height: 100%; + } + + body { + overflow-y: scroll; + overflow-x: hidden; + } +} \ No newline at end of file