diff options
Diffstat (limited to 'old-apps/projects/src/app/pages/nav/css/2_side-navigation-v4.css')
| -rw-r--r-- | old-apps/projects/src/app/pages/nav/css/2_side-navigation-v4.css | 213 |
1 files changed, 213 insertions, 0 deletions
diff --git a/old-apps/projects/src/app/pages/nav/css/2_side-navigation-v4.css b/old-apps/projects/src/app/pages/nav/css/2_side-navigation-v4.css new file mode 100644 index 0000000..ec5fcdf --- /dev/null +++ b/old-apps/projects/src/app/pages/nav/css/2_side-navigation-v4.css @@ -0,0 +1,213 @@ +/* -------------------------------- + +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: 0.2s; +} +.sidenav-v4__link:hover, .sidenav-v4__sub-link:hover { + color: var(--color-primary); + background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075); +} +.sidenav-v4__link[aria-current=page], .sidenav-v4__sub-link[aria-current=page] { + color: var(--color-primary); +} + +.sidenav-v4__sub-link { + position: relative; + color: var(--color-contrast-medium); + /* dot indicator */ +} +.sidenav-v4__sub-link::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 */ +} +.sidenav-v4__sub-link[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; + /* hide icon for links - show only for buttons created in JS */ +} +.sidenav-v4__arrow-icon .icon__group { + will-change: transform; + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + transition: -webkit-transform 0.3s var(--ease-out); + transition: transform 0.3s var(--ease-out); + transition: transform 0.3s var(--ease-out), -webkit-transform 0.3s var(--ease-out); +} +.sidenav-v4__arrow-icon .icon__group > * { + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + stroke-dasharray: 20; + stroke-dashoffset: 0; + -webkit-transform: translateY(0px); + transform: translateY(0px); + transition: stroke-dashoffset 0.3s, -webkit-transform 0.3s; + transition: transform 0.3s, stroke-dashoffset 0.3s; + transition: transform 0.3s, stroke-dashoffset 0.3s, -webkit-transform 0.3s; + transition-timing-function: var(--ease-out); +} +.sidenav-v4__item--collapsed .sidenav-v4__arrow-icon .icon__group { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); +} +.sidenav-v4__item--collapsed .sidenav-v4__arrow-icon .icon__group > * { + -webkit-transform: translateY(4px); + transform: translateY(4px); +} +.sidenav-v4__item--collapsed .sidenav-v4__arrow-icon .icon__group > *:first-child { + stroke-dashoffset: 10.15; +} +.sidenav-v4__item--collapsed .sidenav-v4__arrow-icon .icon__group > *:last-child { + stroke-dashoffset: 10.15; +} +.sidenav-v4__link--href .sidenav-v4__arrow-icon { + 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 */ +@media not all and (min-width: 64rem) { + .sidenav-v4__item--collapsed .sidenav-v4__sub-list { + display: none; + } + + .sidenav-v4__link--href { + display: none; + /* hide link -> show button */ + } +} +/* desktop */ +@media (min-width: 64rem) { + .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__item:not(.sidenav-v4__item--current) .sidenav-v4__sub-link { + border-radius: 0; + color: var(--color-contrast-high); + } + .sidenav-v4__item:not(.sidenav-v4__item--current) .sidenav-v4__sub-link::before { + display: none; + /* remove dot indicator */ + } + .sidenav-v4__item:not(.sidenav-v4__item--current) .sidenav-v4__sub-link:hover { + color: var(--color-primary); + } + .sidenav-v4__item:not(.sidenav-v4__item--current).sidenav-v4__item--hover .sidenav-v4__sub-list, .sidenav-v4__item:not(.sidenav-v4__item--current):focus-within .sidenav-v4__sub-list { + display: block; + } + .sidenav-v4__item:not(.sidenav-v4__item--current):hover .sidenav-v4__link { + /* highlight main link if tooltip is visible */ + color: var(--color-primary); + background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075); + } + + /* notification marker */ + .sidenav-v4__notification-marker { + display: block; + } +}
\ No newline at end of file |