diff options
author | Alexander Neonxp Kiryukhin <i@neonxp.ru> | 2024-11-16 19:32:18 +0300 |
---|---|---|
committer | Alexander Neonxp Kiryukhin <i@neonxp.ru> | 2024-11-17 01:28:57 +0300 |
commit | 239d68f94c6250276850fbe95eaa6cdd5c38fb26 (patch) | |
tree | c576da169afc442f51eae6213ad0ff749ed86589 /themes/hugo-theme-stack/assets/scss/partials/menu.scss | |
parent | 8e79098193fd0a8b65305dd8054cf7c424c60bc5 (diff) |
Своя тема, полностью всё переделал
Diffstat (limited to 'themes/hugo-theme-stack/assets/scss/partials/menu.scss')
-rw-r--r-- | themes/hugo-theme-stack/assets/scss/partials/menu.scss | 229 |
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; - } -} |