cic-staff-client/src/styles.scss

302 lines
5.4 KiB
SCSS
Raw Normal View History

2020-10-30 16:16:05 +01:00
/* You can add global styles to this file, and also import other style files */
2021-04-12 10:24:22 +02:00
.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";
2021-04-12 10:24:22 +02:00
html,
body { height: 100%; }
body {
2021-04-12 10:24:22 +02:00
margin: 0;
font-family: Roboto, 'Roboto', sans-serif;
background: #fafafa;
}
p {
font-family: 'Roboto', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
2021-04-12 10:24:22 +02:00
color: #000;
}
2021-04-12 10:24:22 +02:00
a,
a:hover,
a:focus {
text-decoration: none;
2021-04-12 10:24:22 +02:00
color: inherit;
transition: all .3s;
}
.wrapper {
2021-04-12 10:24:22 +02:00
perspective: 1500px;
align-items: stretch;
display: flex;
width: 100%;
height: 100vh;
}
2021-04-12 10:24:22 +02:00
ul ul a {
padding-left: 30px;
font-size: .9em;
background: #6d7fcc;
}
.full-width,
table { width: 100%; }
li.breadcrumb-item.active,
footer.footer { color: black; }
2021-04-29 13:15:14 +02:00
.clipboard {
position: absolute;
left: -9999px;
}
#sidebar {
position: sticky;
2021-04-12 10:24:22 +02:00
position: -webkit-sticky;
top: 0;
left: 0;
z-index: 9999;
2021-04-12 10:24:22 +02:00
min-width: 250px;
max-width: 250px;
height: 100vh;
background: #313a46;
color: #fff;
transform-origin: center left;
}
#sidebar.active {
min-width: 100px;
max-width: 100px;
text-align: center;
}
#sidebar .sidebar-header {
padding: 20px;
background: #313a46;
}
2021-04-12 10:24:22 +02:00
#sidebar .sidebar-header strong,
#sidebar.active .sidebar-header h3 { display: none; }
2021-04-12 10:24:22 +02:00
#sidebar.active .sidebar-header strong { display: block; }
#sidebar ul li a {
2021-04-12 10:24:22 +02:00
display: block;
padding: 10px;
text-align: left;
2021-04-12 10:24:22 +02:00
font-size: 1.1em;
color: #fff;
}
2021-04-12 10:24:22 +02:00
#sidebar ul li a.active,
#sidebar.active ul li a.active { background: #000; }
#sidebar.active ul li a {
padding: 20px 10px;
2021-04-12 10:24:22 +02:00
font-size: .85em;
text-align: center;
}
#sidebar.active ul li a i {
display: block;
2021-04-12 10:24:22 +02:00
margin-right: 0;
margin-bottom: 5px;
2021-04-12 10:24:22 +02:00
font-size: 1.8em;
}
2021-04-12 10:24:22 +02:00
#sidebar.active ul li a { padding: 10px; }
#sidebar.active .dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
transform: translateX(50%);
2021-04-12 10:24:22 +02:00
-ms-transform: translateX(50%);
-webkit-transform: translateX(50%);
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
padding: 10px;
2021-04-12 10:24:22 +02:00
color: #fff;
}
#sidebar ul li a:hover {
color: #313a46;
background: #fff;
}
2021-04-12 10:24:22 +02:00
#sidebar ul li.active > a,
a[aria-expanded="true"] {
color: #fff;
background: #313a46;
}
2021-04-12 10:24:22 +02:00
a[data-toggle="collapse"] { position: relative; }
.dropdown-toggle::after {
position: absolute;
top: 50%;
right: 20%;
2021-04-12 10:24:22 +02:00
display: block;
transform: translateY(-50%);
}
#content {
position: relative;
overflow: auto;
2021-04-12 10:24:22 +02:00
width: 100%;
min-height: 100vh;
}
2021-04-12 10:24:22 +02:00
#sidebar,
#sidebar.active,
#content,
#content.active { transition: all .3s cubic-bezier(.945, .020, .270, .665); }
#sidebarCollapse {
width: 40px;
height: 40px;
background: #f5f5f5;
}
#sidebarCollapse span {
2021-04-12 10:24:22 +02:00
display: block;
width: 80%;
height: 2px;
margin: 0 auto;
background: #555;
2021-04-12 10:24:22 +02:00
transition: all .8s cubic-bezier(.810, -.330, .345, 1.375);
}
2021-04-12 10:24:22 +02:00
#sidebarCollapse span:first-of-type { transform: rotate(45deg) translate(2px, 2px); }
2021-04-12 10:24:22 +02:00
#sidebarCollapse span:nth-of-type(2) { opacity: 0; }
2021-04-12 10:24:22 +02:00
#sidebarCollapse span:last-of-type { transform: rotate(-45deg) translate(1px, -1px); }
#sidebarCollapse.active span {
2021-04-12 10:24:22 +02:00
margin: 5px auto;
transform: none;
opacity: 1;
}
.footer {
padding: 10px;
text-align: center;
2021-04-12 10:24:22 +02:00
color: #98a6ad;
}
2021-04-12 10:24:22 +02:00
.mat-column-select { overflow: initial; }
2020-11-25 08:09:15 +01:00
2021-04-12 10:24:22 +02:00
button { height: 2.5rem; }
2021-04-12 10:24:22 +02:00
.badge-pill { width: 5rem; }
.mat-column {
2021-04-12 10:24:22 +02:00
word-wrap: break-word;
white-space: unset;
overflow-wrap: break-word;
word-break: break-word;
2021-04-12 10:24:22 +02:00
hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
}
.mat-column-address {
2021-04-12 10:24:22 +02:00
flex: 0 0 30%;
width: 30%;
}
.mat-column-supply {
2021-04-12 10:24:22 +02:00
flex: 0 0 25%;
width: 25%;
}
.center-body {
float: none;
margin: 0 auto 10px;
}
@media (max-width: 768px) {
#sidebar.active {
min-width: 100px;
max-width: 100px;
2021-04-12 10:24:22 +02:00
margin-left: -100px;
text-align: center;
}
2021-04-12 10:24:22 +02:00
#sidebar .sidebar-header strong,
#sidebar.active .sidebar-header h3 { display: none; }
2021-04-12 10:24:22 +02:00
#sidebar.active .sidebar-header strong,
#sidebar.active ul li a i { display: block; }
#sidebar.active ul li a {
padding: 20px 10px;
2021-04-12 10:24:22 +02:00
font-size: .85em;
}
#sidebar.active ul li a i {
margin-right: 0;
margin-bottom: 5px;
2021-04-12 10:24:22 +02:00
font-size: 1.8em;
}
2021-04-12 10:24:22 +02:00
#sidebar.active ul ul a { padding: 10px; }
.dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
transform: translateX(50%);
2021-04-12 10:24:22 +02:00
-ms-transform: translateX(50%);
-webkit-transform: translateX(50%);
}
2021-04-12 10:24:22 +02:00
#content,
#content.active {
position: fixed;
2021-04-12 10:24:22 +02:00
height: 100vh;
}
2021-04-12 10:24:22 +02:00
#content .menutoggle { margin-left: 250px; }
2021-04-12 10:24:22 +02:00
#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 {
2021-04-12 10:24:22 +02:00
margin: 5px auto;
transform: none;
opacity: 1;
}
2021-04-12 10:24:22 +02:00
#sidebarCollapse.active span { margin: 0 auto; }
2021-04-12 10:24:22 +02:00
#sidebarCollapse.active span:first-of-type { transform: rotate(45deg) translate(2px, 2px); }
2020-11-25 08:09:15 +01:00
2021-04-12 10:24:22 +02:00
#sidebarCollapse.active span:nth-of-type(2) { opacity: 0; }
2021-04-12 10:24:22 +02:00
#sidebarCollapse.active span:last-of-type { transform: rotate(-45deg) translate(1px, -1px); }
}