diff options
Diffstat (limited to '_scss/components/_navigation.scss')
-rw-r--r-- | _scss/components/_navigation.scss | 150 |
1 files changed, 0 insertions, 150 deletions
diff --git a/_scss/components/_navigation.scss b/_scss/components/_navigation.scss deleted file mode 100644 index 128ae0b..0000000 --- a/_scss/components/_navigation.scss +++ /dev/null @@ -1,150 +0,0 @@ -.navigation-container { - background: $color-bg; - border-left: 1px solid $color-bg-alt; - border-right: 1px solid $color-bg-alt; - height: 100px; - left: 0; - margin: auto; - max-width: 52em; - padding: 0; - position: fixed; - right: 0; - top: 0; - width: 100%; - z-index: 128; -} - -.navigation { - background: $color-bg; - border-left: 1px solid $color-bg-alt; - border-right: 1px solid $color-bg-alt; - height: 100%; - left: 0; - margin: auto; - max-width: 52em; - padding: 0; - position: fixed; - right: 0; - top: 100px; - transform: scale(.1, 0); - transform-origin: 100% 0%; - transition: none; - width: 100%; -} - -.navigation-header { - height: 100px; - margin: auto; - overflow: hidden; - padding-bottom: 32px; - padding-left: 32px; - padding-right: 100px; - padding-top: 32px; - position: absolute; - text-overflow: ellipsis; - text-transform: uppercase; - white-space: nowrap; - width: 100%; -} - -.navigation-footer { - bottom: 0; - list-style-type: none; - margin: auto; - max-width: 52em; - padding: 20px; - position: fixed; - text-align: center; - width: 100%; - - li { - border-right: 1px solid; - display: inline; - padding: 0 20px; - - @media (max-width: 684px) { - padding: 0 10px; - } - } - - li:last-child { - border-right: 0; - } -} - -.navigation-pills { - height: 100%; - list-style-type: none; - margin: 0; - padding: 0; - text-align: center; - width: 100%; -} - -.navigation-item { - padding-bottom: 5px; - - &:last-child { - padding-bottom: 0; - } - - a { - text-decoration: none; - text-transform: uppercase; - } -} - -.toggle-button { - display: none; - - &:checked ~ .navigation { - transform: none; - transition: all .1s; - } - - &:checked ~ .toggle-label { - span { - opacity: 0; - top: 50%; - } - - span:first-child { - opacity: 1; - transform: rotate(405deg); - } - - span:last-child { - opacity: 1; - transform: rotate(-405deg); - } - } -} - -.toggle-label { - float: right; - height: 20px; - margin: 40px; - position: relative; - width: 15px; - - &:hover { - cursor: pointer; - } - - span { - background: $color-text; - height: 2px; - position: absolute; - top: 50%; - transition: .5s; - width: 100%; - - &:first-child { - top: 3px; - } - - &:last-child { - top: 16px; - } - } -} |