| |
| .sidebar-mask { |
| z-index: 9; |
| width: 100vw; |
| height: 100vh; |
| position: fixed; |
| top: 0; |
| left: 0; |
| display: none; |
| } |
| |
| .sidebar { |
| font-size: 15px; |
| background-color: #fff; |
| width: 20rem; |
| position: fixed; |
| z-index: 10; |
| margin: 0; |
| top: 3.6rem; |
| left: 0; |
| bottom: 0; |
| box-sizing: border-box; |
| border-right: 1px solid #eaecef; |
| overflow-y: auto; |
| display: none; |
| } |
| |
| |
| .sidebar-button { |
| display: none; |
| position: absolute; |
| padding: .6rem; |
| top: .7rem; |
| left: 1rem; |
| &:hover{ |
| cursor: pointer; |
| } |
| } |
| |
| .sidebar-button .icon { |
| display: block; |
| color: #ddd; |
| width: 1.25rem; |
| height: 1.25rem |
| } |
| |
| @media (max-width: 768px) { |
| .sidebar-button { |
| display: block; |
| |
| } |
| .navbar-brand{ |
| margin-left: 55px; |
| } |
| #navigation { |
| display: none; |
| } |
| |
| } |
| @media (min-width: 768px) { |
| .sidebar { |
| display: none!important; |
| |
| } |
| .sidebar-mask { |
| display: none!important; |
| |
| } |
| } |
| |
| |
| .sidebar .sidebar-sub-headers { |
| padding-left: 1rem; |
| font-size: .95em |
| } |
| |
| a.sidebar-link { |
| font-weight: 400; |
| display: inline-block; |
| color: #2c3e50; |
| border-left: .25rem solid transparent; |
| padding: .35rem 1rem .35rem 1.25rem; |
| line-height: 1.4; |
| width: 100%; |
| box-sizing: border-box |
| } |
| |
| a.sidebar-link:hover { |
| color: #0091ff |
| } |
| |
| a.sidebar-link.active { |
| font-weight: 600; |
| color: #0091ff; |
| border-left-color: #0091ff |
| } |
| |
| .sidebar-group a.sidebar-link { |
| padding-left: 2rem |
| } |
| |
| .sidebar-sub-headers a.sidebar-link { |
| padding-top: .25rem; |
| padding-bottom: .25rem; |
| border-left: none |
| } |
| |
| .sidebar-sub-headers a.sidebar-link.active { |
| font-weight: 500 |
| } |
| |
| .sidebar-group:not(.first) { |
| margin-top: 1em |
| } |
| |
| .sidebar-group .sidebar-group { |
| padding-left: .5em |
| } |
| |
| .sidebar-group:not(.collapsable) .sidebar-heading { |
| cursor: auto; |
| color: inherit |
| } |
| |
| .sidebar-heading { |
| color: #999; |
| transition: color .15s ease; |
| cursor: pointer; |
| font-size: 1.1em; |
| font-weight: 700; |
| padding: 0 1.5rem; |
| margin-top: 0; |
| margin-bottom: .5rem |
| } |
| |
| .sidebar-heading.open, .sidebar-heading:hover { |
| color: inherit |
| } |
| |
| .sidebar-heading .arrow { |
| position: relative; |
| top: -.12em; |
| left: .5em |
| } |
| |
| .sidebar-heading.open .arrow { |
| top: -.18em |
| } |
| |
| .sidebar-group-items { |
| transition: height .1s ease-out; |
| overflow: hidden |
| } |
| |
| .sidebar ul { |
| padding: 0; |
| margin: 0; |
| list-style-type: none |
| } |
| |
| .sidebar a { |
| display: inline-block |
| } |
| |
| |
| .sidebar .nav-links { |
| //border-bottom: 1px solid #eaecef; |
| padding: .5rem 0 .75rem 0; |
| |
| .dropdown-item.active, .dropdown-item:active { |
| background: none; |
| } |
| } |
| |
| .sidebar .nav-links a { |
| font-weight: 600; |
| padding: 1rem 0 0; |
| color: #2c3e50; |
| } |
| |
| .sidebar .nav-links .nav-item, .sidebar .nav-links .repo-link { |
| display: block; |
| line-height: 1.25rem; |
| color: #2c3e50; |
| font-family: Lato, sans-serif; |
| padding: .5rem 0 .5rem 1.5rem |
| } |
| |
| .sidebar .sidebar-links { |
| padding: 1.5rem 0 |
| } |
| |
| @media (max-width: 768px) { |
| .sidebar .nav-links { |
| display: block; |
| word-break: break-all; |
| } |
| |
| .sidebar .nav-links .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after { |
| top: calc(1rem - 2px) |
| } |
| |
| .sidebar .sidebar-links { |
| padding: 1rem 0 |
| } |
| } |
| |
| .dropdown-enter, .dropdown-leave-to { |
| height: 0 !important |
| } |
| |
| .dropdown-wrapper { |
| cursor: pointer; |
| height: auto; |
| } |
| |
| .dropdown-wrapper .dropdown-title { |
| display: block |
| } |
| |
| .dropdown-wrapper .dropdown-title:hover { |
| border-color: transparent |
| } |
| |
| .dropdown-wrapper .dropdown-title .arrow { |
| vertical-align: middle; |
| margin-top: -1px; |
| margin-left: .4rem |
| } |
| |
| .dropdown-wrapper .nav-dropdown .dropdown-item { |
| color: inherit; |
| line-height: 1.7rem |
| } |
| |
| .dropdown-wrapper .nav-dropdown .dropdown-item h4 { |
| margin: .45rem 0 0; |
| border-top: 1px solid #eee; |
| padding: .45rem 1.5rem 0 1.25rem |
| } |
| |
| .dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper { |
| padding: 0; |
| list-style: none |
| } |
| |
| .dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem { |
| font-size: .9em |
| } |
| |
| .dropdown-wrapper .nav-dropdown .dropdown-item a { |
| display: block; |
| color: #adaeb1; |
| line-height: 1.7rem; |
| position: relative; |
| border-bottom: none; |
| font-weight: 400; |
| margin-bottom: 0; |
| padding: 0 1.5rem 0 1.25rem; |
| } |
| |
| .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active, .dropdown-wrapper .nav-dropdown .dropdown-item a:hover { |
| color: #0091ff |
| } |
| .nav-dropdown{ |
| display: none; |
| } |
| |
| .arrow { |
| display: inline-block; |
| width: 0; |
| height: 0 |
| } |
| |
| .arrow.up { |
| border-bottom: 6px solid #ccc |
| } |
| |
| .arrow.down, .arrow.up { |
| border-left: 4px solid transparent; |
| border-right: 4px solid transparent |
| } |
| |
| .arrow.down { |
| border-top: 6px solid #ccc |
| } |
| |
| .arrow.right { |
| border-left: 6px solid #ccc |
| } |
| |
| .arrow.left, .arrow.right { |
| border-top: 4px solid transparent; |
| border-bottom: 4px solid transparent |
| } |
| |
| .arrow.left { |
| border-right: 6px solid #ccc |
| } |
| |
| .td-navbar { |
| position: fixed !important; |
| top: 0; |
| left: 0; |
| width: 100%; |
| } |