aboutsummaryrefslogtreecommitdiffstats
path: root/old-apps/projects/src/app/pages/nav/scss
diff options
context:
space:
mode:
Diffstat (limited to 'old-apps/projects/src/app/pages/nav/scss')
-rw-r--r--old-apps/projects/src/app/pages/nav/scss/_1_responsive-sidebar.scss147
-rw-r--r--old-apps/projects/src/app/pages/nav/scss/_2_side-navigation-v4.scss237
2 files changed, 0 insertions, 384 deletions
diff --git a/old-apps/projects/src/app/pages/nav/scss/_1_responsive-sidebar.scss b/old-apps/projects/src/app/pages/nav/scss/_1_responsive-sidebar.scss
deleted file mode 100644
index e4304f1..0000000
--- a/old-apps/projects/src/app/pages/nav/scss/_1_responsive-sidebar.scss
+++ /dev/null
@@ -1,147 +0,0 @@
-@use '../base' as *;
-
-/* --------------------------------
-
-File#: _1_responsive-sidebar
-Title: Responsive Sidebar
-Descr: Responsive sidebar container
-Usage: codyhouse.co/license
-
--------------------------------- */
-
-/* mobile version only (--default) 👇 */
-.sidebar:not(.sidebar--static) {
- position: fixed;
- top: 0;
- left: 0;
- z-index: var(--z-index-fixed-element, 10);
- width: 100%;
- height: 100%;
- visibility: hidden;
- transition: visibility 0s 0.3s;
-
- &::after { /* overlay layer */
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: alpha(var(--color-black), 0);
- transition: background-color .3s;
- z-index: 1;
- }
-
- .sidebar__panel { /* content */
- position: absolute;
- top: 0;
- left: 0;
- z-index: 2;
- width: 100%;
- max-width: 380px;
- height: 100%;
- overflow: auto;
- -webkit-overflow-scrolling: touch;
- background-color: var(--color-bg);
- transform: translateX(-100%);
- transition: box-shadow 0.3s,transform 0.3s;
- }
-
- &.sidebar--right-on-mobile {
- .sidebar__panel {
- left: auto;
- right: 0;
- transform: translateX(100%);
- }
- }
-
- &.sidebar--is-visible {
- visibility: visible;
- transition: none;
-
- &::after {
- background-color: alpha(var(--color-black), 0.85);
- }
-
- .sidebar__panel {
- transform: translateX(0);
- box-shadow: var(--shadow-md);
- }
- }
-}
-/* end mobile version */
-
-.sidebar__header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- position: sticky;
- top: 0;
-}
-
-.sidebar__close-btn {
- --size: 32px;
- width: var(--size);
- height: var(--size);
- display: flex;
- border-radius: 50%;
- background-color: var(--color-bg-light);
- box-shadow: var(--inner-glow), var(--shadow-sm);
- transition: .2s;
- flex-shrink: 0;
-
- .icon {
- display: block;
- margin: auto;
- }
-
- &:hover {
- background-color: var(--color-bg-lighter);
- box-shadow: var(--inner-glow), var(--shadow-md);
- }
-}
-
-/* desktop version only (--static) 👇 */
-.sidebar--static {
- flex-shrink: 0;
- flex-grow: 1;
-
- .sidebar__header {
- display: none;
- }
-}
-
-.sidebar--sticky-on-desktop {
- position: sticky;
- top: var(--space-sm);
- max-height: calc(100vh - var(--space-sm));
- overflow: auto;
- -webkit-overflow-scrolling: touch;
-}
-/* end desktop version */
-
-.sidebar, .sidebar-loaded\:show {
- opacity: 0; /* hide sidebar - or other elements using the .sidebar-loaded:show class - while it is initialized in JS */
-}
-
-.sidebar--loaded {
- opacity: 1;
-}
-
-/* detect when the sidebar needs to switch from the mobile layout to a static one - used in JS */
-[class*="sidebar--static"]::before {
- display: none;
-}
-
-.sidebar--static::before {
- content: 'static';
-}
-
-@each $breakpoint, $value in $breakpoints {
- .sidebar--static\@#{$breakpoint}::before {
- content: 'mobile';
- @include breakpoint(#{$breakpoint}) {
- content: 'static';
- }
- }
-} \ No newline at end of file
diff --git a/old-apps/projects/src/app/pages/nav/scss/_2_side-navigation-v4.scss b/old-apps/projects/src/app/pages/nav/scss/_2_side-navigation-v4.scss
deleted file mode 100644
index 2b421df..0000000
--- a/old-apps/projects/src/app/pages/nav/scss/_2_side-navigation-v4.scss
+++ /dev/null
@@ -1,237 +0,0 @@
-@use '../base' as *;
-@use '_1_responsive-sidebar.scss' as *;
-
-/* --------------------------------
-
-File#: _2_side-navigation-v4
-Title: Side Navigation v4
-Descr: Main, side navigation
-Usage: codyhouse.co/license
-
--------------------------------- */
-
-.sidenav-v4 {
- --sidenav-v4-icon-size: 20px;
- --sidenav-v4-icon-margin-right: var(--space-xxs);
-}
-
-.sidenav-v4__item {
- position: relative;
-}
-
-.sidenav-v4__link,
-.sidenav-v4__sub-link,
-.sidenav-v4__separator {
- padding: var(--space-sm);
-}
-
-.sidenav-v4__link, .sidenav-v4__sub-link {
- display: flex;
- align-items: center;
-
- width: 100%;
- border-radius: var(--radius-md);
-
- text-decoration: none;
- color: inherit;
- line-height: 1;
- font-size: var(--text-md);
-
- transition: .2s;
-
- &:hover {
- color: var(--color-primary);
- background-color: alpha(var(--color-contrast-higher), 0.075);
- }
-
- &[aria-current="page"] {
- color: var(--color-primary);
- }
-}
-
-.sidenav-v4__sub-link {
- position: relative;
- color: var(--color-contrast-medium);
-
- /* dot indicator */
- &::before {
- content: '';
- display: block;
- --size: 6px;
- width: var(--size);
- height: var(--size);
- background: currentColor;
- border-radius: 50%;
- margin-left: calc(var(--sidenav-v4-icon-size)/2 - var(--size)/2);
- margin-right: calc(var(--sidenav-v4-icon-size)/2 - var(--size)/2 + var(--sidenav-v4-icon-margin-right));
-
- opacity: 0; /* visible only if current */
- }
-
- &[aria-current="page"] {
- &::before { /* show dot indicator */
- opacity: 1;
- }
- }
-}
-
-.sidenav-v4__notification-marker {
- margin-left: auto;
- background-color: var(--color-accent);
- border-radius: var(--radius-md);
-
- height: 16px;
- line-height: 16px;
- padding: 0 4px;
- color: var(--color-white);
- font-size: 12px;
-
- /* hide - visible only on desktop */
- display: none;
-}
-
-/* label icon */
-.sidenav-v4__icon {
- --size: var(--sidenav-v4-icon-size);
- margin-right: var(--sidenav-v4-icon-margin-right);
-}
-
-/* arrow icon - visible on mobile if item is expandable */
-.sidenav-v4__arrow-icon {
- --size: 20px;
-
- .icon__group {
- will-change: transform;
- transform-origin: 50% 50%;
- transform: rotate(-90deg);
- transition: transform .3s var(--ease-out);
-
- > * {
- transform-origin: 50% 50%;
- stroke-dasharray: 20;
- stroke-dashoffset: 0;
- transform: translateY(0px);
- transition: transform .3s, stroke-dashoffset .3s;
- transition-timing-function: var(--ease-out);
- }
-
- .sidenav-v4__item--collapsed & {
- transform: rotate(0deg);
-
- > * {
- transform: translateY(4px);
- }
-
- > *:first-child {
- stroke-dashoffset: 10.15;
- }
-
- > *:last-child {
- stroke-dashoffset: 10.15;
- }
- }
- }
-
- /* hide icon for links - show only for buttons created in JS */
- .sidenav-v4__link--href & {
- display: none;
- }
-}
-
-/* current item */
-.sidenav-v4__item--current {
- .sidenav-v4__sub-list {
- display: block; /* show sublist */
- }
-}
-
-/* separator */
-.sidenav-v4__separator {
- span {
- display: block;
- width: var(--sidenav-v4-icon-size);
- height: 1px;
- background-color: var(--color-contrast-lower);
- }
-}
-
-/* mobile only */
-@include breakpoint(md, "not all") {
- .sidenav-v4__item--collapsed {
- .sidenav-v4__sub-list {
- display: none;
- }
- }
-
- .sidenav-v4__link--href {
- display: none; /* hide link -> show button */
- }
-}
-
-/* desktop */
-@include breakpoint(md) {
- .sidenav-v4__sub-list {
- display: none;
- }
-
- .sidenav-v4__link,
- .sidenav-v4__sub-link,
- .sidenav-v4__separator {
- padding: var(--space-xs);
- }
-
- .sidenav-v4__link,
- .sidenav-v4__sub-link {
- font-size: var(--text-sm);
- }
-
- .sidenav-v4__link--btn {
- display: none; /* hide button -> show link */
- }
-
- /* tooltip */
- .sidenav-v4__item:not(.sidenav-v4__item--current) {
- .sidenav-v4__sub-list {
- width: 220px;
- position: absolute;
- z-index: var(--z-index-overlay);
- left: 100%;
- top: 0;
-
- background-color: var(--color-bg-light);
- box-shadow: var(--inner-glow), var(--shadow-md);
- border-radius: var(--radius-md);
-
- overflow: hidden;
- }
-
- .sidenav-v4__sub-link {
- border-radius: 0;
- color: var(--color-contrast-high);
-
- &::before {
- display: none; /* remove dot indicator */
- }
-
- &:hover {
- color: var(--color-primary);
- }
- }
-
- &.sidenav-v4__item--hover, &:focus-within {
- .sidenav-v4__sub-list {
- display: block;
- }
- }
-
- &:hover .sidenav-v4__link { /* highlight main link if tooltip is visible */
- color: var(--color-primary);
- background-color: alpha(var(--color-contrast-higher), 0.075);
- }
- }
-
- /* notification marker */
- .sidenav-v4__notification-marker {
- display: block;
- }
-} \ No newline at end of file
generated by cgit v1.3 (git 2.53.0) at 2026-04-02 13:12:39 +0200