From 04c4c42af4a33cc30db020baf6fdd61d7b87a4c7 Mon Sep 17 00:00:00 2001 From: JSriwongsa Date: Fri, 7 Jul 2023 09:30:20 -0500 Subject: [PATCH] added active sidebar --- ecommerce/fashion_website/pages/page.css | 22 +++++++++++++++------- ecommerce/fashion_website/pages/page.html | 2 +- 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/ecommerce/fashion_website/pages/page.css b/ecommerce/fashion_website/pages/page.css index 9aa2bc0..4ff26fe 100644 --- a/ecommerce/fashion_website/pages/page.css +++ b/ecommerce/fashion_website/pages/page.css @@ -345,7 +345,7 @@ form :where(input, textarea, select)::placeholder{ .search-float.active{ display: block; } -.overlay, .mobile-menu, .cart-menu{ +.overlay, .mobile-menu, .cart-menu, .sidebar{ position: fixed; top: 0; left: 0; @@ -366,17 +366,17 @@ form :where(input, textarea, select)::placeholder{ pointer-events: all; } /*---------- mobile navbar ----------*/ -.mobile-menu, .cart-menu{ +.mobile-menu, .cart-menu, .sidebar{ pointer-events: none; z-index: 1001; visibility: hidden; opacity: 0; } -.mobile-menu.active, .cart-menu.active{ +.mobile-menu.active, .cart-menu.active, .sidebar.active{ visibility: visible; opacity: 1; } -.mobile-menu .wrap, .cart-menu .wrap{ +.mobile-menu .wrap, .cart-menu .wrap, .sidebar > .wrap{ position: relative; max-width: calc(100% - 40px); width: 360px; @@ -384,11 +384,12 @@ form :where(input, textarea, select)::placeholder{ background-color: var(--white-color); pointer-events: auto; transition: var(--trabsition-transform); + transform: translateX(var(--transX, -100%)); } -.mobile-menu.active .wrap, .cart-menu.active .wrap{ +.mobile-menu.active .wrap, .cart-menu.active .wrap, .sidebar.active > .wrap{ transform: translateX(0); } -.mobile-menu .close-trigger, .mobile-menu .child-trigger, .cart-menu .close-trigger{ +.mobile-menu .close-trigger, .mobile-menu .child-trigger, .cart-menu .close-trigger, .sidebar .close-trigger{ display: flex; position: absolute; top: 0; @@ -400,7 +401,7 @@ form :where(input, textarea, select)::placeholder{ justify-content: center; font-size: 30px; } -.mobile-menu .main-menu, .cart-menu .cart-list{ +.mobile-menu .main-menu, .cart-menu .cart-list, .sidebar-content{ display: flex; height: 100%; padding: 0 20px; @@ -1269,6 +1270,7 @@ input.checking:checked::after{ } .sidebar-title{ font-size: 24px; + padding-top: 100px; } .sidebar .widget{ margin: 20px 0; @@ -1506,6 +1508,12 @@ input.checking:checked::after{ grid-template-columns: 1fr 4fr; gap: 60px; } + .sidebar-title, .sidebar-content{ + padding: 0; + } + .sidebar, .sidebar > .wrap{ + all: unset; + } } @media(min-width: 1200px){ diff --git a/ecommerce/fashion_website/pages/page.html b/ecommerce/fashion_website/pages/page.html index 685ef66..eb391c1 100644 --- a/ecommerce/fashion_website/pages/page.html +++ b/ecommerce/fashion_website/pages/page.html @@ -30,7 +30,7 @@