redoc/lib/components/SideMenu/side-menu.scss

154 lines
3.0 KiB
SCSS
Raw Normal View History

2015-11-26 23:06:54 +03:00
@import '../../common/styles/variables';
2016-01-21 18:26:54 +03:00
$mobile-menu-compact-breakpoint: 550px;
2015-11-26 23:06:54 +03:00
.menu-header {
2015-10-18 19:46:21 +03:00
text-transform: uppercase;
2015-11-26 23:06:54 +03:00
color: $headers-color;
padding: 0 $side-menu-item-hpadding;
2015-12-20 23:19:56 +03:00
margin: 10px 0;
font-size: 16px;
2015-10-18 19:46:21 +03:00
}
2015-11-26 22:39:23 +03:00
.menu-cat-header {
font-size: 15px;
cursor: pointer;
color: $side-menu-item-color;
text-transform: uppercase;
2015-12-20 23:19:56 +03:00
background-color: $side-bar-bg-color;
2015-11-26 23:06:54 +03:00
display: block;
padding: $side-menu-item-vpadding $side-menu-item-hpadding;
}
.menu-cat:nth-of-type(even) .menu-cat-header {
background-color: $side-menu-even-bg-color;
2015-11-26 22:39:23 +03:00
}
2016-01-21 18:26:54 +03:00
.menu-cat .menu-cat-header.active {
background-color: darken($side-menu-active-bg-color, 5%);
2016-01-21 18:26:54 +03:00
}
2015-11-26 22:39:23 +03:00
.menu-subitems {
margin: 0;
2015-11-26 23:06:54 +03:00
padding: 0;
2015-11-26 22:39:23 +03:00
height: 0;
overflow: hidden;
}
.menu-subitems.active {
height: auto;
}
.menu-subitems li {
list-style: none inside none;
cursor: pointer;
2015-11-26 23:06:54 +03:00
2015-11-29 18:19:23 +03:00
padding: $side-menu-item-vpadding $side-menu-item-hpadding;
2015-11-26 23:06:54 +03:00
padding-left: $side-menu-item-hpadding*2;
2015-12-20 23:19:56 +03:00
background-color: $side-bar-bg-color;
2015-11-26 23:06:54 +03:00
overflow: hidden;
text-overflow: ellipsis;
2015-11-26 22:39:23 +03:00
}
2015-11-26 23:06:54 +03:00
.menu-subitems li:nth-of-type(even) {
background-color: $side-menu-even-bg-color;
}
// invert item colors for odd categories
.menu-cat:nth-of-type(odd) {
.menu-subitems li {
background-color: $side-menu-even-bg-color;
}
.menu-subitems li:nth-of-type(even) {
2015-12-20 23:19:56 +03:00
background-color: $side-bar-bg-color;
2015-11-26 23:06:54 +03:00
}
}
2016-01-21 18:26:54 +03:00
.menu-cat .menu-subitems {
li.active, li.active:nth-of-type(even) {
background-color: $side-menu-active-bg-color;
}
}
.mobile-nav {
display: none;
height: 3em;
line-height: 3em;
box-sizing: border-box;
border-bottom: 1px solid #ccc;
cursor: pointer;
&:after {
content: "";
display: inline-block;
width: 3em;
height: 3em;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve"><polygon fill="#010101" points="23.1 34.1 51.5 61.7 80 34.1 81.5 35 51.5 64.1 21.5 35 23.1 34.1 "/></svg>');
background-size: 70%;
background-repeat: no-repeat;
background-position: center;
float: right;
vertical-align: middle;
}
.menu-header {
2016-01-23 01:03:05 +03:00
padding: 0 10px 0 20px;
2016-01-21 18:26:54 +03:00
font-size: 0.95em;
@media (max-width: $mobile-menu-compact-breakpoint) {
display: none;
}
}
}
@media (max-width: $side-menu-mobile-breakpoint) {
.mobile-nav {
display: block;
}
#resources-nav {
height: 0;
overflow-y: auto;
transition: all 0.3s ease;
}
#resources-nav .menu-header {
display: none;
}
.menu-subitems {
height: auto;
}
}
.selected-tag {
text-transform: capitalize;
}
.selected-endpoint:before {
content: "/";
padding: 0 2px;
color: #ccc;
}
.selected-endpoint:empty:before {
display: none;
}
.selected-item-info {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
box-sizing: border-box;
max-width: 350px;
@media (max-width: $mobile-menu-compact-breakpoint) {
display: inline-block;
2016-01-23 01:03:05 +03:00
padding: 0 20px;
2016-01-21 18:26:54 +03:00
max-width: 80%;
max-width: calc(100% - 4em);
}
2015-11-26 22:39:23 +03:00
}