123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185 |
- ///
- /// Hyperspace by HTML5 UP
- /// html5up.net | @ajlkn
- /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
- ///
- /* Sidebar */
- #sidebar {
- @include padding(2.5em, 2.5em);
- background: _palette(bg);
- cursor: default;
- height: 100vh;
- left: 0;
- overflow-x: hidden;
- overflow-y: auto;
- position: fixed;
- text-align: right;
- top: 0;
- width: _size(sidebar-width);
- z-index: _misc(z-index-base);
- > .inner {
- @include vendor('display', 'flex');
- @include vendor('flex-direction', 'column');
- @include vendor('justify-content', 'center');
- @include vendor('transform', 'translateY(0)');
- @include vendor('transition', (
- 'opacity #{_duration(activation)} ease',
- ));
- min-height: 100%;
- opacity: 1;
- width: 100%;
- body.is-ie & {
- height: 100%;
- }
- }
- nav {
- > ul {
- list-style: none;
- padding: 0;
- > li {
- @include vendor('transform', 'translateY(0)');
- @include vendor('transition', (
- 'opacity #{_duration(activation) * 0.15} ease',
- 'transform #{_duration(activation) * 0.75} ease'
- ));
- margin: 1.5em 0 0 0;
- opacity: 1;
- padding: 0;
- position: relative;
- &:first-child {
- margin: 0;
- }
- @for $i from 1 through _misc(max-sidebar-links) {
- &:nth-child(#{$i}) {
- @include vendor('transition-delay', '#{(_duration(activation) * 0.2 * $i) + (_duration(activation) * 0.25)}');
- }
- }
- }
- }
- a {
- @include vendor('transition', 'color #{_duration(transition)} ease');
- border: 0;
- color: _palette(fg-light);
- display: block;
- font-size: 0.6em;
- font-weight: _font(weight-bold);
- letter-spacing: _font(kerning-alt);
- line-height: 1.75;
- outline: 0;
- padding: 1.35em 0;
- position: relative;
- text-decoration: none;
- text-transform: uppercase;
- &:before,
- &:after {
- border-radius: 0.2em;
- bottom: 0;
- content: '';
- height: 0.2em;
- position: absolute;
- right: 0;
- width: 100%;
- }
- &:before {
- background: lighten(_palette(bg), 5);
- }
- &:after {
- @include vendor('background-image', 'linear-gradient(to right, #{_palette(accent1)}, #{_palette(accent3)})');
- @include vendor('transition', 'max-width #{_duration(transition)} ease');
- max-width: 0;
- }
- &:hover {
- color: _palette(fg);
- }
- &.active {
- color: _palette(fg-bold);
- &:after {
- max-width: 100%;
- }
- }
- }
- }
- body.is-loading & {
- > .inner {
- opacity: 0;
- }
- nav {
- ul {
- li {
- @include vendor('transform', 'translateY(2em)');
- opacity: 0;
- }
- }
- }
- }
- @include breakpoint(large) {
- height: _size(sidebar-height);
- left: 0;
- line-height: _size(sidebar-height);
- overflow: hidden;
- padding: 0;
- text-align: center;
- top: 0;
- width: 100%;
- > .inner {
- @include vendor('flex-direction', 'row');
- @include vendor('align-items', 'stretch');
- height: inherit;
- line-height: inherit;
- }
- nav {
- height: inherit;
- line-height: inherit;
- ul {
- @include vendor('display', 'flex');
- height: inherit;
- line-height: inherit;
- margin: 0;
- li {
- display: block;
- height: inherit;
- line-height: inherit;
- margin: 0 0 0 2em;
- padding: 0;
- }
- }
- a {
- height: inherit;
- line-height: inherit;
- padding: 0;
- &:after {
- background-image: none;
- background-color: _palette(accent3);
- }
- }
- }
- }
- @include breakpoint(small) {
- display: none;
- }
- }
|