aboutsummaryrefslogtreecommitdiff
path: root/themes/hugo-theme-stack/assets/scss/partials/menu.scss
diff options
context:
space:
mode:
Diffstat (limited to 'themes/hugo-theme-stack/assets/scss/partials/menu.scss')
-rw-r--r--themes/hugo-theme-stack/assets/scss/partials/menu.scss229
1 files changed, 0 insertions, 229 deletions
diff --git a/themes/hugo-theme-stack/assets/scss/partials/menu.scss b/themes/hugo-theme-stack/assets/scss/partials/menu.scss
deleted file mode 100644
index 5b6be17..0000000
--- a/themes/hugo-theme-stack/assets/scss/partials/menu.scss
+++ /dev/null
@@ -1,229 +0,0 @@
-/*!
- * Hamburgers
- * @description Tasty CSS-animated hamburgers
- * @author Jonathan Suh @jonsuh
- * @site https://jonsuh.com/hamburgers
- * @link https://github.com/jonsuh/hamburgers
- */
-
-.hamburger {
- padding-top: 10px;
- display: inline-block;
- cursor: pointer;
- transition-property: opacity, filter;
- transition-duration: 0.15s;
- transition-timing-function: linear;
- font: inherit;
- color: inherit;
- text-transform: none;
- background-color: transparent;
- border: 0;
- margin: 0;
- overflow: visible;
-}
-.hamburger:hover {
- opacity: 0.7;
-}
-.hamburger.is-active:hover {
- opacity: 0.7;
-}
-.hamburger.is-active .hamburger-inner,
-.hamburger.is-active .hamburger-inner::before,
-.hamburger.is-active .hamburger-inner::after {
- background-color: #000;
-}
-
-.hamburger-box {
- width: 30px;
- height: 24px;
- display: inline-block;
- position: relative;
-}
-
-.hamburger-inner {
- display: block;
- top: 50%;
- margin-top: -2px;
-}
-
-.hamburger-inner,
-.hamburger-inner::before,
-.hamburger-inner::after {
- width: 30px;
- height: 2px;
- background-color: var(--card-text-color-main);
- border-radius: 4px;
- position: absolute;
- transition-property: transform;
- transition-duration: 0.15s;
- transition-timing-function: ease;
-}
-.hamburger-inner::before,
-.hamburger-inner::after {
- content: "";
- display: block;
-}
-.hamburger-inner::before {
- top: -10px;
-}
-.hamburger-inner::after {
- bottom: -10px;
-}
-
-.hamburger--spin .hamburger-inner {
- transition-duration: 0.22s;
- transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-}
-.hamburger--spin .hamburger-inner::before {
- transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
-}
-.hamburger--spin .hamburger-inner::after {
- transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
-}
-
-.hamburger--spin.is-active .hamburger-inner {
- transform: rotate(225deg);
- transition-delay: 0.12s;
- transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-.hamburger--spin.is-active .hamburger-inner::before {
- top: 0;
- opacity: 0;
- transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
-}
-.hamburger--spin.is-active .hamburger-inner::after {
- bottom: 0;
- transform: rotate(-90deg);
- transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-#toggle-menu {
- background: none;
- border: none;
- position: absolute;
- right: 0;
- top: 0;
- z-index: 2;
- cursor: pointer;
-
- [dir="rtl"] & {
- left: 0;
- right: auto;
- }
-
- @include respond(md) {
- display: none;
- }
-
- outline: none;
-
- &.is-active {
- .hamburger-inner,
- .hamburger-inner::before,
- .hamburger-inner::after {
- background-color: var(--accent-color);
- }
- }
-}
-
-/* Menu style */
-#main-menu {
- list-style: none;
- overflow-y: auto;
- flex-grow: 1;
- font-size: 1.4rem;
- background-color: var(--card-background);
-
- box-shadow: var(--shadow-l1);
- display: none;
- margin: 0 calc(var(--container-padding) * -1);
-
- padding: 30px 30px;
-
- @include respond(xl) {
- padding: 15px 0;
- }
-
- &, .menu-bottom-section ol {
- flex-direction: column;
- gap: 30px;
-
- @include respond(xl) {
- gap: 25px;
- }
- }
-
- &.show {
- display: flex;
- }
-
- @include respond(md) {
- align-items: flex-end;
- display: flex;
- background-color: transparent;
- padding: 0;
- box-shadow: none;
- margin: 0;
- }
-
- li {
- position: relative;
- vertical-align: middle;
- padding: 0;
-
- @include respond(md) {
- width: 100%;
- }
-
- svg {
- stroke: currentColor;
- stroke-width: 1.33;
- width: 20px;
- height: 20px;
- }
-
- a {
- height: 100%;
- display: inline-flex;
- align-items: center;
- color: var(--body-text-color);
- gap: var(--menu-icon-separation);
- }
-
- span {
- flex: 1;
- }
-
- &.current {
- a {
- color: var(--accent-color);
- font-weight: bold;
- }
- }
-
- &.menu-bottom-section {
- margin-top: auto;
-
- ol {
- display: flex;
- padding-left: 0;
- }
- }
- }
-}
-
-.menu-social {
- list-style: none;
- padding: 0;
- margin: 0;
- display: flex;
- flex-direction: row;
- gap: 10px;
-
- svg {
- width: 24px;
- height: 24px;
- stroke: var(--body-text-color);
- stroke-width: 1.33;
- }
-}