X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/357027375ff8867f42ca34bcbfb5a78b5b185fc3..0b270a76ad73162f894285c360a0ee87fa84e536:/src/wolnelektury/static/scss/main/menu.scss?ds=inline diff --git a/src/wolnelektury/static/scss/main/menu.scss b/src/wolnelektury/static/scss/main/menu.scss old mode 100755 new mode 100644 index 846e4c88c..b75ab6238 --- a/src/wolnelektury/static/scss/main/menu.scss +++ b/src/wolnelektury/static/scss/main/menu.scss @@ -1,175 +1,159 @@ -#nav-line { - background-color: #e2e2e2; +/* ok */ + +$menu_width: 200px; + + +/* This is duplication of code for reader menu button. */ +%menu-toggle { position: relative; + padding: 0; + &:before { + content: ""; + position: absolute; + top: 8px; + height: 5px; + border-top: 15px double #ddd; + border-bottom: 5px solid #ddd; + } +} - @media screen and (min-width: 62.5em) { - @include size(width, 975px); - margin: auto; + +#show-menu { + @extend %menu-toggle; + display: block; + background: #191919; + color: #ddd; + text-align: center; + z-index: 100; + @include size(width, 44px); + @include size(height, 44px); + padding: 0; + position: absolute; + left: 10px; + top: 25px; + + &:before { + left: 8px; + right: 8px; } - #show-menu { - display: block; - float: left; - @include size(line-height, 13px); - @include size(padding, 18px 13px); - color: #0c7076; - @include size(font-size, 11px); - @include mono; + @media screen and (min-width: 1024px) { + display: none; + } +} - .long { - display: none; +body.menu-on { + margin-left: $menu_width; + margin-right: -$menu_width; - &:after { - @include size(padding-left, 10px); - content: url("/static/img/arrow-gray.png"); - vertical-align: top; - } - } + @media screen and (min-width: 1024px) { + margin-left: 0; + margin-right: 0; + } - @media screen and (min-width: 20em) { - .long { display: inline; } - .short { display: none; } - } + #menu { + display: block; + } +} - @media screen and (min-width: 53em) { - display: none; - } +#menu { + display: none; + position: fixed; + left: 0; + top: 0; + width: $menu_width; + background: #141414; + height: 100%; + overflow-y: auto; + z-index: 90; + + @media screen and (min-width: 1024px) { + display: block; + width: 975px; + height: 0; + overflow: visible; + margin: auto; + position: absolute; + top: 0; } - ul#menu { + ul { list-style: none; padding: 0; - margin: 0; - display: none; - position: absolute; - @include size(top, 49px); - left: 0; - @include size(right, 10px); - z-index: 400; + li { + padding: .5em 1em; - @media screen and (min-width: 24em) { - right: auto; + @media screen and (min-width: 1024px) { + padding: 0; + } } + } +} - @media screen and (min-width: 53em) { - display: block !important; - position: static; - @include size(margin-left, 6px); - } - li.menu { - background-color: #e2e2e2; +#main-menu { + display: none; +} - @media screen and (min-width: 53em) { - float: left; - } +@media screen and (min-width: 1024px) { + #user-info { + @include mono; + position: absolute; + right: 0px; + top: 3px; + margin: 0; + @include size(line-height, 43px); + @include size(font-size, 10px); + list-style: none; - a.menu { - display: block; - @include size(line-height, 13px); - @include size(padding, 18px 12px 15px); - @include size(border-bottom, 3px solid #e2e2e2); - color: #0c7076; - @include size(font-size, 11px); - @include mono; - } + li { + display: inline; - a.hidden-box-trigger:hover { - border-bottom-color: white; + &:after { + content: " | "; + } + &:last-child:after { + content: ""; } } } - #lang-menu { + #main-menu-side { + display: none; + } + + #main-menu { display: block; - float: right; - - background: #f7f7f7; - @include mono; - - @media screen and (min-width: 15em) { - position: relative; - } - - #lang-button { - @include size(padding-left, 25px); - @include size(padding-right, 20px); - - display:block; - @include size(line-height, 17px); - @include size(padding-top, 16px); - @include size(padding-bottom, 16px); - - @include size(font-size, 10px); - color: #717171; - - .label { - display: none; + list-style: none; + padding: 0; + margin: 0; - @media screen and (min-width: 62.5em) { - display: inline; - } + background-color: #e2e2e2; + position: absolute; + top: 94px; + @include size(width, 975px); - &:after { - @include size(padding-left, 10px); - content: url("/static/img/arrow-gray.png"); - vertical-align: top; - } - } + li { + display: inline-block; + @include size(width, 14.2%); - .lang-flag { - @include size(font-size, 13px); - @include size(line-height, 15px); + &.active { + background-color: white; } - } - - #lang-menu-items { - z-index: 9999; - button { + a { + text-align: center; + display: block; + @include size(line-height, 13px); + @include size(padding, 18px 0 15px); + //@include size(border-bottom, 3px solid #e2e2e2); + color: #0c7076; + @include size(font-size, 15px); @include mono; - display: none; - background: #f7f7f7; - color: #6f6f6f; - cursor: pointer; - width: 100%; - margin: 0; - @include size(padding, 10px 0); - - @media screen and (min-width: 62.5em) { - @include size(padding, 5px 0); - } - - border-width: 0; - @include size(border-bottom, 1px solid #ddd); - - @include size(font-size, 13px); &.active { - color: #000; - } - } - } - - &:hover, &.hover { - #lang-menu-items { - position: absolute; - padding: 0; - left: 0; - right: 0; - - @media screen and (min-width: 15em) { - left: auto; - @include size(width, 180px); - @include size(top, 49px); - } - @media screen and (min-width: 62.5em) { - width: 100%; - } - - button { - display: block; + border-bottom-color: white; } } }