From 5a6546550b867179db906ee80b3508085ff778c1 Mon Sep 17 00:00:00 2001 From: Spencer Ofwiti Date: Mon, 12 Apr 2021 11:24:22 +0300 Subject: [PATCH] Refactor css scripts to best practice. --- src/styles.scss | 272 +++++++++++++++++++----------------------------- 1 file changed, 105 insertions(+), 167 deletions(-) diff --git a/src/styles.scss b/src/styles.scss index c0375e2..6d0dbee 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,9 +1,20 @@ /* You can add global styles to this file, and also import other style files */ +.declaration-order { + /* Positioning */ + /* Box-model */ + /* Typography */ + /* Visual */ + /* Misc */ +} @import "~bootstrap/dist/css/bootstrap.css"; @import "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"; +html, +body { height: 100%; } + body { - font-family: 'Roboto', sans-serif; + margin: 0; + font-family: Roboto, 'Roboto', sans-serif; background: #fafafa; } @@ -12,35 +23,48 @@ p { font-size: 1.1em; font-weight: 300; line-height: 1.7em; - color: #000000; + color: #000; } -a, a:hover, a:focus { - color: inherit; +a, +a:hover, +a:focus { text-decoration: none; - transition: all 0.3s; + color: inherit; + transition: all .3s; } .wrapper { + perspective: 1500px; + align-items: stretch; display: flex; width: 100%; - align-items: stretch; height: 100vh; - perspective: 1500px; } +ul ul a { + padding-left: 30px; + font-size: .9em; + background: #6d7fcc; +} + +.full-width, +table { width: 100%; } + +li.breadcrumb-item.active, +footer.footer { color: black; } + #sidebar { - min-width: 250px; - max-width: 250px; - height: 100vh; - position: -webkit-sticky; position: sticky; + position: -webkit-sticky; top: 0; left: 0; z-index: 9999; + min-width: 250px; + max-width: 250px; + height: 100vh; background: #313a46; color: #fff; - transition: all 0.3s cubic-bezier(0.945, 0.020, 0.270, 0.665); transform-origin: center left; } @@ -48,7 +72,6 @@ a, a:hover, a:focus { min-width: 100px; max-width: 100px; text-align: center; - transition: all 0.3s cubic-bezier(0.945, 0.020, 0.270, 0.665); } #sidebar .sidebar-header { @@ -56,55 +79,44 @@ a, a:hover, a:focus { background: #313a46; } -#sidebar .sidebar-header strong { - display: none; -} +#sidebar .sidebar-header strong, +#sidebar.active .sidebar-header h3 { display: none; } -#sidebar.active .sidebar-header h3 { - display: none; -} - -#sidebar.active .sidebar-header strong { - display: block; -} +#sidebar.active .sidebar-header strong { display: block; } #sidebar ul li a { - color: #ffffff; + display: block; + padding: 10px; text-align: left; + font-size: 1.1em; + color: #fff; } -#sidebar ul li a.active { - background: #000000; -} +#sidebar ul li a.active, +#sidebar.active ul li a.active { background: #000; } #sidebar.active ul li a { padding: 20px 10px; + font-size: .85em; text-align: center; - font-size: 0.85em; -} - -#sidebar.active ul li a.active { - background: #000000; } #sidebar.active ul li a i { - margin-right: 0; display: block; - font-size: 1.8em; + margin-right: 0; margin-bottom: 5px; + font-size: 1.8em; } -#sidebar.active ul li a { - padding: 10px !important; -} +#sidebar.active ul li a { padding: 10px; } #sidebar.active .dropdown-toggle::after { top: auto; bottom: 10px; right: 50%; - -webkit-transform: translateX(50%); - -ms-transform: translateX(50%); transform: translateX(50%); + -ms-transform: translateX(50%); + -webkit-transform: translateX(50%); } #sidebar ul.components { @@ -113,14 +125,8 @@ a, a:hover, a:focus { } #sidebar ul p { + padding: 10px; color: #fff; - padding: 10px; -} - -#sidebar ul li a { - padding: 10px; - font-size: 1.1em; - display: block; } #sidebar ul li a:hover { @@ -128,40 +134,32 @@ a, a:hover, a:focus { background: #fff; } -#sidebar ul li.active > a, a[aria-expanded="true"] { +#sidebar ul li.active > a, +a[aria-expanded="true"] { color: #fff; background: #313a46; } -ul ul a { - font-size: 0.9em !important; - padding-left: 30px !important; - background: #6d7fcc; -} - -a[data-toggle="collapse"] { - position: relative; -} +a[data-toggle="collapse"] { position: relative; } .dropdown-toggle::after { - display: block; position: absolute; top: 50%; right: 20%; + display: block; transform: translateY(-50%); } #content { - width: 100%; position: relative; overflow: auto; + width: 100%; min-height: 100vh; - transition: all 0.3s cubic-bezier(0.945, 0.020, 0.270, 0.665); -} - -#content.active { - transition: all 0.3s cubic-bezier(0.945, 0.020, 0.270, 0.665); } +#sidebar, +#sidebar.active, +#content, +#content.active { transition: all .3s cubic-bezier(.945, .020, .270, .665); } #sidebarCollapse { width: 40px; @@ -170,84 +168,57 @@ a[data-toggle="collapse"] { } #sidebarCollapse span { + display: block; width: 80%; height: 2px; margin: 0 auto; - display: block; background: #555; - transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375); + transition: all .8s cubic-bezier(.810, -.330, .345, 1.375); } -#sidebarCollapse span:first-of-type { - /* rotate first one */ - transform: rotate(45deg) translate(2px, 2px); -} +#sidebarCollapse span:first-of-type { transform: rotate(45deg) translate(2px, 2px); } -#sidebarCollapse span:nth-of-type(2) { - /* second one is not visible */ - opacity: 0; -} +#sidebarCollapse span:nth-of-type(2) { opacity: 0; } -#sidebarCollapse span:last-of-type { - /* rotate third one */ - transform: rotate(-45deg) translate(1px, -1px); -} +#sidebarCollapse span:last-of-type { transform: rotate(-45deg) translate(1px, -1px); } #sidebarCollapse.active span { - /* no rotation */ - transform: none; - /* all bars are visible */ - opacity: 1; margin: 5px auto; + transform: none; + opacity: 1; } .footer { - color: #98a6ad; padding: 10px; text-align: center; + color: #98a6ad; } -.mat-column-select { - overflow: initial; -} +.mat-column-select { overflow: initial; } -button { - height: 2.5rem; -} +button { height: 2.5rem; } -.badge-pill { - width: 5rem; -} +.badge-pill { width: 5rem; } .mat-column { - word-wrap: break-word !important; - white-space: unset !important; + word-wrap: break-word; + white-space: unset; overflow-wrap: break-word; word-break: break-word; + hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; - hyphens: auto; } .mat-column-address { - flex: 0 0 30% !important; - width: 30% !important; + flex: 0 0 30%; + width: 30%; } .mat-column-supply { - flex: 0 0 25% !important; - width: 25% !important; -} - -.mat-column-select { - flex: 0 0 10% !important; - width: 10% !important; -} - -.mat-column-view { - flex: 0 0 5% !important; - width: 5% !important; + flex: 0 0 25%; + width: 25%; } .center-body { @@ -256,103 +227,70 @@ button { } @media (max-width: 768px) { - #sidebar { - margin-left: 0; - } - #sidebar.active { min-width: 100px; max-width: 100px; + margin-left: -100px; text-align: center; - margin-left: -100px !important; } - #sidebar .sidebar-header strong { - display: none; - } + #sidebar .sidebar-header strong, + #sidebar.active .sidebar-header h3 { display: none; } - #sidebar.active .sidebar-header h3 { - display: none; - } - - #sidebar.active .sidebar-header strong { - display: block; - } + #sidebar.active .sidebar-header strong, + #sidebar.active ul li a i { display: block; } #sidebar.active ul li a { padding: 20px 10px; - font-size: 0.85em; + font-size: .85em; } #sidebar.active ul li a i { margin-right: 0; - display: block; - font-size: 1.8em; margin-bottom: 5px; + font-size: 1.8em; } - #sidebar.active ul ul a { - padding: 10px !important; - } + #sidebar.active ul ul a { padding: 10px; } .dropdown-toggle::after { top: auto; bottom: 10px; right: 50%; - -webkit-transform: translateX(50%); - -ms-transform: translateX(50%); transform: translateX(50%); + -ms-transform: translateX(50%); + -webkit-transform: translateX(50%); } - #content, #content.active { - height: 100vh; + #content, + #content.active { position: fixed; - margin-left: 0; + height: 100vh; } - #content .menutoggle { - margin-left: 250px; - transition: all 0.3s cubic-bezier(0.945, 0.020, 0.270, 0.665); - } + #content .menutoggle { margin-left: 250px; } - #content.active .menutoggle { - margin-left: 0; - transition: all 0.3s cubic-bezier(0.945, 0.020, 0.270, 0.665); - } + #sidebar, + #content, + #content.active, + #content.active .menutoggle { margin-left: 0; } + + #content .menutoggle, + #content.active .menutoggle { transition: all .3s cubic-bezier(.945, .020, .270, .665); } #sidebarCollapse span:first-of-type, #sidebarCollapse span:nth-of-type(2), #sidebarCollapse span:last-of-type { + margin: 5px auto; transform: none; opacity: 1; - margin: 5px auto; } - #sidebarCollapse.active span { - margin: 0 auto; - } + #sidebarCollapse.active span { margin: 0 auto; } - #sidebarCollapse.active span:first-of-type { - transform: rotate(45deg) translate(2px, 2px); - } + #sidebarCollapse.active span:first-of-type { transform: rotate(45deg) translate(2px, 2px); } - #sidebarCollapse.active span:nth-of-type(2) { - opacity: 0; - } - - #sidebarCollapse.active span:last-of-type { - transform: rotate(-45deg) translate(1px, -1px); - } + #sidebarCollapse.active span:nth-of-type(2) { opacity: 0; } -} - -html, body { height: 100%; } -body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } - -.full-width, table { - width: 100%; -} - -li.breadcrumb-item.active, footer.footer { - color: black; + #sidebarCollapse.active span:last-of-type { transform: rotate(-45deg) translate(1px, -1px); } }