Refactor css scripts to best practice.

This commit is contained in:
Spencer Ofwiti 2021-04-12 11:24:22 +03:00
parent 9a87e5af04
commit 5a6546550b

View File

@ -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); }
}