aboutsummaryrefslogtreecommitdiffstats
path: root/old-apps/projects/src/app/pages/nav/css/1_responsive-sidebar.css
diff options
context:
space:
mode:
Diffstat (limited to 'old-apps/projects/src/app/pages/nav/css/1_responsive-sidebar.css')
-rw-r--r--old-apps/projects/src/app/pages/nav/css/1_responsive-sidebar.css179
1 files changed, 0 insertions, 179 deletions
diff --git a/old-apps/projects/src/app/pages/nav/css/1_responsive-sidebar.css b/old-apps/projects/src/app/pages/nav/css/1_responsive-sidebar.css
deleted file mode 100644
index 515a9f2..0000000
--- a/old-apps/projects/src/app/pages/nav/css/1_responsive-sidebar.css
+++ /dev/null
@@ -1,179 +0,0 @@
-/* --------------------------------
-
-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;
-}
-.sidebar:not(.sidebar--static)::after {
- /* overlay layer */
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0);
- transition: background-color 0.3s;
- z-index: 1;
-}
-.sidebar:not(.sidebar--static) .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);
- -webkit-transform: translateX(-100%);
- transform: translateX(-100%);
- transition: box-shadow 0.3s, -webkit-transform 0.3s;
- transition: box-shadow 0.3s, transform 0.3s;
- transition: box-shadow 0.3s, transform 0.3s, -webkit-transform 0.3s;
-}
-.sidebar:not(.sidebar--static).sidebar--right-on-mobile .sidebar__panel {
- left: auto;
- right: 0;
- -webkit-transform: translateX(100%);
- transform: translateX(100%);
-}
-.sidebar:not(.sidebar--static).sidebar--is-visible {
- visibility: visible;
- transition: none;
-}
-.sidebar:not(.sidebar--static).sidebar--is-visible::after {
- background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.85);
-}
-.sidebar:not(.sidebar--static).sidebar--is-visible .sidebar__panel {
- -webkit-transform: translateX(0);
- transform: translateX(0);
- box-shadow: var(--shadow-md);
-}
-
-/* end mobile version */
-.sidebar__header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- position: -webkit-sticky;
- 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: 0.2s;
- flex-shrink: 0;
-}
-.sidebar__close-btn .icon {
- display: block;
- margin: auto;
-}
-.sidebar__close-btn: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--static .sidebar__header {
- display: none;
-}
-
-.sidebar--sticky-on-desktop {
- position: -webkit-sticky;
- 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";
-}
-
-.sidebar--static\@xs::before {
- content: "mobile";
-}
-@media (min-width: 32rem) {
- .sidebar--static\@xs::before {
- content: "static";
- }
-}
-
-.sidebar--static\@sm::before {
- content: "mobile";
-}
-@media (min-width: 48rem) {
- .sidebar--static\@sm::before {
- content: "static";
- }
-}
-
-.sidebar--static\@md::before {
- content: "mobile";
-}
-@media (min-width: 64rem) {
- .sidebar--static\@md::before {
- content: "static";
- }
-}
-
-.sidebar--static\@lg::before {
- content: "mobile";
-}
-@media (min-width: 80rem) {
- .sidebar--static\@lg::before {
- content: "static";
- }
-}
-
-.sidebar--static\@xl::before {
- content: "mobile";
-}
-@media (min-width: 90rem) {
- .sidebar--static\@xl::before {
- content: "static";
- }
-} \ No newline at end of file