Refactor css scripts to best practice.
This commit is contained in:
Spencer Ofwiti
parent
9a87e5af04
commit
5a6546550b
272
src/styles.scss
272
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); }
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user