X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/8a078a30db08afb680c48ce94d6e576236febeed..16c39b15d9a1516d9cbfa99288747260493cbb15:/src/wolnelektury/static/2021/css/components/_hamburger.scss diff --git a/src/wolnelektury/static/2021/css/components/_hamburger.scss b/src/wolnelektury/static/2021/css/components/_hamburger.scss deleted file mode 100644 index 2c6c22ef2..000000000 --- a/src/wolnelektury/static/2021/css/components/_hamburger.scss +++ /dev/null @@ -1,106 +0,0 @@ -/* ------------------------------ - Component: Hamburger ------------------------------- */ - -$bar-width: 35px; -$bar-height: 3px; -$bar-spacing: 8px; -$bar-color: $color-gray; - -.c-hamburger { - display: flex; - height: $bar-height + $bar-spacing*2; - transition: transform $ease-out 400ms; - backface-visibility: hidden; - position: relative; - cursor: pointer; - - @include rwd(tablet) { - margin-right: 0; - } - - border: 0; - margin: 0; padding: 0; - background-color: transparent; - appearance: none; - - &:after { - content: attr(data-label); - transform: translateX(50%); - @include font-size(18px); - top: -3px; left: -7px; - font-weight: $medium; - padding-left: 17px; - position: absolute; - transition: color 300ms $ease-out; - } - - &.is-clicked { - z-index: $master-layer + 2; - - @include rwd(tablet) { - position: fixed; - top: 2rem; right: 1rem; - } - - &:after { - color: $color-black; - } - } - - .bar, - .bar:after, - .bar:before { - width: $bar-width; - height: $bar-height; - border-radius: 10px; - } - - .bar { - position: relative; - transform: translateY($bar-spacing); - background-color: rgba($bar-color, 1); - transition: all 0ms 300ms; - - &:before, - &:after { - left: 0; - content: ""; - position: absolute; - bottom: $bar-spacing; - background-color: rgba($bar-color, 1); - } - - &:before { - bottom: $bar-spacing; - transition: bottom 300ms 300ms $ease-out, - transform 300ms $ease-out, - background-color 300ms $ease-out; - } - - &:after { - top: $bar-spacing; - transition: top 300ms 300ms $ease-out, - transform 300ms $ease-out, - background-color 300ms $ease-out; - } - - &.animate { - background-color: rgba(255, 255, 255, 0); - - &:before { - bottom: 0; - transform: rotate(-45deg); - transition: bottom 300ms $ease-out, - transform 300ms 300ms $ease-out; - } - - &:after { - top: 0; - transform: rotate(45deg); - transition: top 300ms $ease-out, - transform 300ms 300ms $ease-out; - } - } - } -}