-#nav-line {
- background-color: #e2e2e2;
- position: relative;
+/* ok */
- @media screen and (min-width: 62.5em) {
- @include size(width, 975px);
- margin: auto;
- }
+$menu_width: 200px;
- #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;
- .long {
- display: none;
-
- &:after {
- @include size(padding-left, 10px);
- content: url("/static/img/arrow-gray.png");
- vertical-align: top;
- }
- }
+/* 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: 20em) {
- .long { display: inline; }
- .short { display: none; }
- }
- @media screen and (min-width: 53em) {
- display: none;
- }
+#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;
}
- ul#menu {
- list-style: none;
- padding: 0;
- margin: 0;
-
+ @media screen and (min-width: 1024px) {
display: none;
- position: absolute;
- @include size(top, 49px);
- left: 0;
- @include size(right, 10px);
- z-index: 400;
-
- @media screen and (min-width: 24em) {
- right: auto;
- }
-
- @media screen and (min-width: 53em) {
- display: block !important;
- position: static;
- @include size(margin-left, 6px);
- }
-
- li.menu {
- background-color: #e2e2e2;
+ }
+}
- @media screen and (min-width: 53em) {
- float: left;
- }
+body.menu-on {
+ margin-left: $menu_width;
+ margin-right: -$menu_width;
- 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;
- }
+ @media screen and (min-width: 1024px) {
+ margin-left: 0;
+ margin-right: 0;
+ }
- a.hidden-box-trigger:hover {
- border-bottom-color: white;
- }
- }
+ #menu {
+ display: block;
}
+}
- #lang-menu {
+#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;
- float: right;
+ width: 975px;
+ height: 0;
+ overflow: visible;
+ margin: auto;
+ position: absolute;
+ top: 0;
+ }
- background: #f7f7f7;
- @include mono;
+ ul {
+ list-style: none;
+ padding: 0;
- @media screen and (min-width: 15em) {
- position: relative;
+ li {
+ padding: .5em 1em;
+
+ @media screen and (min-width: 1024px) {
+ padding: 0;
+ }
}
+ }
+}
- #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;
+@media screen and (min-width: 1024px) {
+ #user-info {
+ @include mono;
+ position: absolute;
+ right: 150px;
+ top: 4px;
+ @include size(font-size, 10px);
+ list-style: none;
- @media screen and (min-width: 62.5em) {
- display: inline;
- }
+ li {
+ display: inline;
- &:after {
- @include size(padding-left, 10px);
- content: url("/static/img/arrow-gray.png");
- vertical-align: top;
- }
+ &:after {
+ content: " | ";
}
-
- .lang-flag {
- @include size(font-size, 13px);
- @include size(line-height, 15px);
+ &:last-child:after {
+ content: "";
}
}
+ }
- #lang-menu-items {
- z-index: 9999;
+ #main-menu {
+ list-style: none;
+ padding: 0;
+ margin: 0;
- button {
- @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);
- }
+ background-color: #e2e2e2;
+ position: absolute;
+ top: 94px;
+ @include size(width, 975px);
- border-width: 0;
- @include size(border-bottom, 1px solid #ddd);
+ li {
+ display: inline-block;
+ @include size(width, 20%);
- @include size(font-size, 13px);
+ 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, 11px);
+ @include mono;
&.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;
}
}
}
fnp / wolnelektury.git / blobdiff