From b03fa10c7a1990c502d1c7c347a15ce017a024d2 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Tue, 20 Jul 2021 16:28:32 +0530 Subject: [PATCH] Added standard operations to layouts --- Layouts/boxes layout/index.html | 9445 +++++++++++++++++++ Layouts/boxes layout/js/main_UI.js | 50 +- Layouts/many sections layout/index.html | 9445 +++++++++++++++++++ Layouts/many sections layout/js/main_UI.js | 67 +- Layouts/sidebar layout/css/main.css | 8 +- Layouts/sidebar layout/css/main.min.css | 2 +- Layouts/sidebar layout/css/main.scss | 6 +- Layouts/sidebar layout/index.html | 9457 +++++++++++++++++++- Layouts/sidebar layout/js/main_UI.js | 44 +- Layouts/tabs layout/index.html | 9447 +++++++++++++++++++ Layouts/tabs layout/js/main_UI.js | 67 +- aggregate.js | 133 - components/dist/theme-toggle.js | 8 +- components/dist/theme-toggle.min.js | 2 +- components/index.html | 23 +- components/index.min.html | 2 +- main_UI.js | 305 + 17 files changed, 38264 insertions(+), 247 deletions(-) delete mode 100644 aggregate.js create mode 100644 main_UI.js diff --git a/Layouts/boxes layout/index.html b/Layouts/boxes layout/index.html index 3042abe..8bd8ea0 100644 --- a/Layouts/boxes layout/index.html +++ b/Layouts/boxes layout/index.html @@ -82,6 +82,9451 @@ + + + + + + + + + \ No newline at end of file diff --git a/Layouts/boxes layout/js/main_UI.js b/Layouts/boxes layout/js/main_UI.js index e60c9a9..a1363c9 100644 --- a/Layouts/boxes layout/js/main_UI.js +++ b/Layouts/boxes layout/js/main_UI.js @@ -1,7 +1,8 @@ // Global variables +const appPages = ['dashboard', 'settings']; const domRefs = {}; -const appPages = ['dashboard', 'settings'] - +let timerId; +const currentYear = new Date().getFullYear(); //Checks for internet connection status if (!navigator.onLine) @@ -10,6 +11,10 @@ if (!navigator.onLine) "error", { sound: true } ); +window.addEventListener("online", () => { + getRef("notification_drawer").clearAll(); + notify("We are back online.", "success"); +}); window.addEventListener("offline", () => { notify( "There seems to be a problem connecting to the internet, Please check you internet connection.", @@ -17,10 +22,6 @@ window.addEventListener("offline", () => { { pinned: true, sound: true } ); }); -window.addEventListener("online", () => { - getRef("notification_drawer").clearAll(); - notify("We are back online.", "success"); -}); // Use instead of document.getElementById function getRef(elementId) { @@ -43,8 +44,8 @@ function getRef(elementId) { } // returns dom with specified element -function createElement(tagName, obj) { - const { className, textContent, innerHTML, attributes = {} } = obj +function createElement(tagName, options) { + const { className, textContent, innerHTML, attributes = {} } = options const elem = document.createElement(tagName) for (let attribute in attributes) { elem.setAttribute(attribute, attributes[attribute]) @@ -70,7 +71,6 @@ const debounce = (callback, wait) => { } // Limits the rate of function execution -let timerId; function throttle(func, delay) { // If setTimeout is already scheduled, no need to do anything if (timerId) { @@ -87,7 +87,6 @@ function throttle(func, delay) { }, delay); } -// function required for popups or modals to appear class Stack { constructor() { this.items = []; @@ -104,14 +103,13 @@ class Stack { return this.items[this.items.length - 1]; } } -let popupStack = new Stack(), - zIndex = 10; -async function showPopup(popup, pinned) { +// function required for popups or modals to appear +function showPopup(popupId, pinned) { zIndex++ - getRef(popup).setAttribute('style', `z-index: ${zIndex}`) - popupStack = getRef(popup).show({ pinned, popupStack }) - return getRef(popup); + getRef(popupId).setAttribute('style', `z-index: ${zIndex}`) + popupStack = getRef(popupId).show({ pinned, popupStack }) + return getRef(popupId); } // hides the popup or modal @@ -122,7 +120,7 @@ function hidePopup() { } // displays a popup for asking permission. Use this instead of JS confirm -let getConfirmation = (title, message, cancelText = 'Cancel', confirmText = 'OK') => { +const getConfirmation = (title, message, cancelText = 'Cancel', confirmText = 'OK') => { return new Promise(resolve => { showPopup('confirmation_popup', true) getRef('confirm_title').textContent = title; @@ -143,19 +141,19 @@ let getConfirmation = (title, message, cancelText = 'Cancel', confirmText = 'OK' } // displays a popup for asking user input. Use this instead of JS prompt -async function getPromptInput(title, message = '', showText = true, trueBtn = "Ok", falseBtn = "Cancel") { +async function getPromptInput(title, message = '', isPassword = true, cancelText = 'Cancel', confirmText = 'OK') { showPopup('prompt_popup', true) getRef('prompt_title').textContent = title; let input = getRef('prompt_input'); input.setAttribute("placeholder", message) let buttons = getRef('prompt_popup').querySelectorAll("sm-button"); - if (showText) + if (isPassword) input.setAttribute("type", "text") else input.setAttribute("type", "password") input.focusIn() - buttons[0].textContent = falseBtn; - buttons[1].textContent = trueBtn; + buttons[0].textContent = cancelText; + buttons[1].textContent = confirmText; return new Promise((resolve, reject) => { buttons[0].onclick = () => { hidePopup() @@ -170,11 +168,10 @@ async function getPromptInput(title, message = '', showText = true, trueBtn = "O } //Function for displaying toast notifications. pass in error for mode param if you want to show an error. -function notify(message, mode, options = {}) { - const { pinned = false, sound } = options - if (mode === "error") console.error(message); +function notify(message, type, options = {}) { + const { pinned = false, sound = false } = options let icon - switch (mode) { + switch (type) { case 'success': icon = `` break; @@ -189,7 +186,6 @@ function notify(message, mode, options = {}) { } } -const currentYear = new Date().getFullYear(); function getFormatedTime(time, relative) { try { if (String(time).indexOf("_")) time = String(time).split("_")[0]; @@ -277,7 +273,7 @@ function showPage(targetPage, options = {}) { else { pageId = targetPage.includes('#') ? targetPage.split('#')[1] : targetPage } - if(!appPages.includes(pageId)) return + if (!appPages.includes(pageId)) return document.querySelector('.page:not(.hide-completely)').classList.add('hide-completely') document.querySelector('.nav-list__item--active').classList.remove('nav-list__item--active') getRef(pageId).classList.remove('hide-completely') diff --git a/Layouts/many sections layout/index.html b/Layouts/many sections layout/index.html index 584c09d..4d17f8e 100644 --- a/Layouts/many sections layout/index.html +++ b/Layouts/many sections layout/index.html @@ -178,6 +178,9451 @@ + + + + + + + + + \ No newline at end of file diff --git a/Layouts/many sections layout/js/main_UI.js b/Layouts/many sections layout/js/main_UI.js index b4d9afd..95805d4 100644 --- a/Layouts/many sections layout/js/main_UI.js +++ b/Layouts/many sections layout/js/main_UI.js @@ -1,7 +1,8 @@ // Global variables +const appPages = ['home']; const domRefs = {}; -const appPages = ['home'] - +let timerId; +const currentYear = new Date().getFullYear(); //Checks for internet connection status if (!navigator.onLine) @@ -43,8 +44,8 @@ function getRef(elementId) { } // returns dom with specified element -function createElement(tagName, obj) { - const { className, textContent, innerHTML, attributes = {} } = obj +function createElement(tagName, options) { + const { className, textContent, innerHTML, attributes = {} } = options const elem = document.createElement(tagName) for (let attribute in attributes) { elem.setAttribute(attribute, attributes[attribute]) @@ -70,7 +71,6 @@ const debounce = (callback, wait) => { } // Limits the rate of function execution -let timerId; function throttle(func, delay) { // If setTimeout is already scheduled, no need to do anything if (timerId) { @@ -87,7 +87,6 @@ function throttle(func, delay) { }, delay); } -// function required for popups or modals to appear class Stack { constructor() { this.items = []; @@ -97,21 +96,20 @@ class Stack { } pop() { if (this.items.length == 0) - return "Underflow"; + return "Underflow"; return this.items.pop(); } peek() { return this.items[this.items.length - 1]; } } -let popupStack = new Stack(), - zIndex = 10; -async function showPopup(popup, pinned) { +// function required for popups or modals to appear +function showPopup(popupId, pinned) { zIndex++ - getRef(popup).setAttribute('style', `z-index: ${zIndex}`) - popupStack = getRef(popup).show({ pinned, popupStack }) - return getRef(popup); + getRef(popupId).setAttribute('style', `z-index: ${zIndex}`) + popupStack = getRef(popupId).show({ pinned, popupStack }) + return getRef(popupId); } // hides the popup or modal @@ -122,7 +120,7 @@ function hidePopup() { } // displays a popup for asking permission. Use this instead of JS confirm -let getConfirmation = (title, message, cancelText = 'Cancel', confirmText = 'OK') => { +const getConfirmation = (title, message, cancelText = 'Cancel', confirmText = 'OK') => { return new Promise(resolve => { showPopup('confirmation_popup', true) getRef('confirm_title').textContent = title; @@ -143,19 +141,19 @@ let getConfirmation = (title, message, cancelText = 'Cancel', confirmText = 'OK' } // displays a popup for asking user input. Use this instead of JS prompt -async function getPromptInput(title, message = '', showText = true, trueBtn = "Ok", falseBtn = "Cancel") { +async function getPromptInput(title, message = '', isPassword = true, cancelText = 'Cancel', confirmText = 'OK') { showPopup('prompt_popup', true) getRef('prompt_title').textContent = title; let input = getRef('prompt_input'); input.setAttribute("placeholder", message) let buttons = getRef('prompt_popup').querySelectorAll("sm-button"); - if (showText) + if (isPassword) input.setAttribute("type", "text") else input.setAttribute("type", "password") input.focusIn() - buttons[0].textContent = falseBtn; - buttons[1].textContent = trueBtn; + buttons[0].textContent = cancelText; + buttons[1].textContent = confirmText; return new Promise((resolve, reject) => { buttons[0].onclick = () => { hidePopup() @@ -171,8 +169,7 @@ async function getPromptInput(title, message = '', showText = true, trueBtn = "O //Function for displaying toast notifications. pass in error for mode param if you want to show an error. function notify(message, mode, options = {}) { - const { pinned = false, sound } = options - if (mode === "error") console.error(message); + const { pinned = false, sound = false } = options let icon switch (mode) { case 'success': @@ -189,7 +186,6 @@ function notify(message, mode, options = {}) { } } -const currentYear = new Date().getFullYear(); function getFormatedTime(time, relative) { try { if (String(time).indexOf("_")) time = String(time).split("_")[0]; @@ -268,7 +264,8 @@ function createRipple(event, target) { }; } -function showPage(targetPage) { +function showPage(targetPage, options = {}) { + const { firstLoad, hashChange } = options let pageId if (targetPage === '') { pageId = 'overview_page' @@ -278,5 +275,31 @@ function showPage(targetPage) { } if(!appPages.includes(pageId)) return document.querySelector('.page:not(.hide-completely)').classList.add('hide-completely') + document.querySelector('.nav-list__item--active').classList.remove('nav-list__item--active') getRef(pageId).classList.remove('hide-completely') + getRef(pageId).animate([ + { + opacity: 0, + transform: 'translateX(-1rem)' + }, + { + opacity: 1, + transform: 'none' + }, + ], + { + duration: 300, + easing: 'ease' + }) + const targetListItem = document.querySelector(`.nav-list__item[href="#${pageId}"]`) + targetListItem.classList.add('nav-list__item--active') + if (firstLoad && window.innerWidth > 640 && targetListItem.getBoundingClientRect().top > getRef('side_nav').getBoundingClientRect().height) { + getRef('side_nav').scrollTo({ + top: (targetListItem.getBoundingClientRect().top - getRef('side_nav').getBoundingClientRect().top + getRef('side_nav').scrollTop), + behavior: 'smooth' + }) + } + if (hashChange && window.innerWidth < 640) { + getRef('side_nav').close() + } } \ No newline at end of file diff --git a/Layouts/sidebar layout/css/main.css b/Layouts/sidebar layout/css/main.css index 139aad2..22bdc1a 100644 --- a/Layouts/sidebar layout/css/main.css +++ b/Layouts/sidebar layout/css/main.css @@ -387,19 +387,19 @@ main { padding-bottom: 3rem; } -.list { +.nav-list { list-style: none; display: flex; flex-direction: column; margin-bottom: 0.8rem; } -.list__item { +.nav-list__item { display: flex; padding: 0.8rem 1.5rem; text-transform: capitalize; } -.list__item--active { +.nav-list__item--active { color: var(--accent-color); background: rgba(var(--text-color), 0.06); } @@ -469,7 +469,7 @@ main { background: rgba(var(--text-color), 0.5); } - .list__item:hover { + .nav-list__item:hover { background: rgba(var(--text-color), 0.1); cursor: pointer; } diff --git a/Layouts/sidebar layout/css/main.min.css b/Layouts/sidebar layout/css/main.min.css index 6fb53cf..a3db60b 100644 --- a/Layouts/sidebar layout/css/main.min.css +++ b/Layouts/sidebar layout/css/main.min.css @@ -1 +1 @@ -.hide,.ripple{pointer-events:none}.list,ul{list-style:none}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color),1);background:rgba(var(--background-color),1)}body,body *{--accent-color:#0D7377;--text-color:17,17,17;--background-color:255,255,255;--danger-color:red}body[data-theme=dark],body[data-theme=dark] *{--accent-color:#32E0C4;--text-color:240,240,240;--text-color-light:170,170,170;--background-color:10,10,10;--danger-color:rgb(255, 106, 106)}p{font-size:.8;max-width:65ch;line-height:1.7;margin-bottom:1.5rem;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1rem}img{object-fit:cover}a{color:inherit;text-decoration:none}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}button{display:inline-flex;border:none;background-color:inherit}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}.hide{opacity:0}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}#logo h4,.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}#logo h4,.capitalize,h2{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}#confirmation_popup,#prompt_popup,.page{flex-direction:column}.w-100{width:100%}.color-0-8{color:rgba(var(--text-color),.8)}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}#logo,main{display:grid}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}h1,h2,h3,h4.h5{font-family:Poppins,sans-serif}h2{margin:3rem 0 1rem}main{height:100%}#main_header{padding:.5rem 1.5rem;border-bottom:1px solid rgba(var(--text-color),.1)}#side_nav_button{padding:.5rem;margin-left:-.5rem}#logo{align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .5rem;margin-right:1rem}.list,.list__item,.page{display:flex}#logo h4{font-weight:600}#logo #main_logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color),1);stroke:none}#side_nav>:last-child{padding-bottom:3rem}#side_nav h4{font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;padding:1.5rem}.right{max-height:100%;overflow-y:auto;padding:1.5rem}.right h1{margin-bottom:1.5rem}.page{padding-bottom:3rem}.list{flex-direction:column;margin-bottom:.8rem}.list__item{padding:.8rem 1.5rem;text-transform:capitalize}.list__item--active{color:var(--accent-color);background:rgba(var(--text-color),.06)}@media screen and (max-width:640px){main{grid-template-rows:auto 1fr;grid-template-columns:1fr}}@media screen and (min-width:640px){sm-popup{--width:32rem}#main_header{padding:1rem 1.5rem;grid-area:main-header}#side_nav_button{display:none}main{grid-template-columns:14rem minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"main-header main-header" ". ."}.right{display:grid;grid-template-columns:1fr 90% 1fr}.right>*{grid-column:2/3}.page__title{font-size:2.5rem}#overview_page{display:grid;gap:1.5rem;grid-template-columns:1fr auto}#overview_page>div:first-of-type{grid-column:2/3;text-align:right}#overview_page>div:nth-of-type(2){grid-row:1/2}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.list__item:hover{background:rgba(var(--text-color),.1);cursor:pointer}} \ No newline at end of file +.hide,.ripple{pointer-events:none}.nav-list,ul{list-style:none}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color),1);background:rgba(var(--background-color),1)}body,body *{--accent-color:#0D7377;--text-color:17,17,17;--background-color:255,255,255;--danger-color:red}body[data-theme=dark],body[data-theme=dark] *{--accent-color:#32E0C4;--text-color:240,240,240;--text-color-light:170,170,170;--background-color:10,10,10;--danger-color:rgb(255, 106, 106)}p{font-size:.8;max-width:65ch;line-height:1.7;margin-bottom:1.5rem;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1rem}img{object-fit:cover}a{color:inherit;text-decoration:none}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}button{display:inline-flex;border:none;background-color:inherit}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}.hide{opacity:0}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}#logo h4,.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}#logo h4,.capitalize,h2{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}#confirmation_popup,#prompt_popup,.page{flex-direction:column}.w-100{width:100%}.color-0-8{color:rgba(var(--text-color),.8)}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}#logo,main{display:grid}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}h1,h2,h3,h4.h5{font-family:Poppins,sans-serif}h2{margin:3rem 0 1rem}main{height:100%}#main_header{padding:.5rem 1.5rem;border-bottom:1px solid rgba(var(--text-color),.1)}#side_nav_button{padding:.5rem;margin-left:-.5rem}#logo{align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .5rem;margin-right:1rem}#logo h4{font-weight:600}#logo #main_logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color),1);stroke:none}#side_nav>:last-child{padding-bottom:3rem}#side_nav h4{font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;padding:1.5rem}.right{max-height:100%;overflow-y:auto;padding:1.5rem}.right h1{margin-bottom:1.5rem}.page{display:flex;padding-bottom:3rem}.nav-list{display:flex;flex-direction:column;margin-bottom:.8rem}.nav-list__item{display:flex;padding:.8rem 1.5rem;text-transform:capitalize}.nav-list__item--active{color:var(--accent-color);background:rgba(var(--text-color),.06)}@media screen and (max-width:640px){main{grid-template-rows:auto 1fr;grid-template-columns:1fr}}@media screen and (min-width:640px){sm-popup{--width:32rem}#main_header{padding:1rem 1.5rem;grid-area:main-header}#side_nav_button{display:none}main{grid-template-columns:14rem minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"main-header main-header" ". ."}.right{display:grid;grid-template-columns:1fr 90% 1fr}.right>*{grid-column:2/3}.page__title{font-size:2.5rem}#overview_page{display:grid;gap:1.5rem;grid-template-columns:1fr auto}#overview_page>div:first-of-type{grid-column:2/3;text-align:right}#overview_page>div:nth-of-type(2){grid-row:1/2}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.nav-list__item:hover{background:rgba(var(--text-color),.1);cursor:pointer}} \ No newline at end of file diff --git a/Layouts/sidebar layout/css/main.scss b/Layouts/sidebar layout/css/main.scss index 7951a50..e6adbba 100644 --- a/Layouts/sidebar layout/css/main.scss +++ b/Layouts/sidebar layout/css/main.scss @@ -321,13 +321,13 @@ main{ flex-direction: column; padding-bottom: 3rem; } -.list{ +.nav-list{ list-style: none; display: flex; flex-direction: column; margin-bottom: 0.8rem; } -.list__item{ +.nav-list__item{ display: flex; padding: 0.8rem 1.5rem; text-transform: capitalize; @@ -394,7 +394,7 @@ main{ background: rgba(var(--text-color), 0.5); } } - .list__item:hover{ + .nav-list__item:hover{ background: rgba(var(--text-color), .1); cursor: pointer; } diff --git a/Layouts/sidebar layout/index.html b/Layouts/sidebar layout/index.html index 27ca152..cc6effd 100644 --- a/Layouts/sidebar layout/index.html +++ b/Layouts/sidebar layout/index.html @@ -58,12 +58,12 @@