cic-staff-client/src/styles.scss

358 lines
5.6 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 */
}
2021-06-15 18:37:33 +02:00
@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,
2021-06-15 18:37:33 +02:00
body {
height: 100%;
}
2021-04-12 10:24:22 +02:00
body {
margin: 0;
2021-04-12 10:24:22 +02:00
font-family: Roboto, 'Roboto', sans-serif;
background: #fafafa;
}
2021-05-26 12:06:18 +02:00
.background-dark {
background: #313a46 !important;
}
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;
2021-06-15 18:37:33 +02:00
transition: all 0.3s;
}
.wrapper {
2021-04-12 10:24:22 +02:00
perspective: 1500px;
align-items: stretch;
display: flex;
width: 100%;
align-items: stretch;
2021-04-02 15:16:21 +02:00
height: inherit;
perspective: 1500px;
}
2021-04-12 10:24:22 +02:00
ul ul a {
padding-left: 30px;
2021-06-15 18:37:33 +02:00
font-size: 0.9em;
2021-04-12 10:24:22 +02:00
background: #6d7fcc;
}
.full-width,
2021-06-15 18:37:33 +02:00
table {
width: 100%;
}
2021-04-12 10:24:22 +02:00
li.breadcrumb-item.active,
2021-06-15 18:37:33 +02:00
footer.footer {
color: black;
}
2021-04-12 10:24:22 +02:00
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;
min-width: 200px;
max-width: 200px;
2021-04-12 10:24:22 +02:00
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,
2021-06-15 18:37:33 +02:00
#sidebar.active .sidebar-header h3 {
display: none;
}
2021-06-15 18:37:33 +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,
2021-06-15 18:37:33 +02:00
#sidebar.active ul li a.active {
background: #000;
}
#sidebar.active ul li a {
padding: 20px 10px;
2021-06-15 18:37:33 +02:00
font-size: 0.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-06-15 18:37:33 +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,
2021-06-15 18:37:33 +02:00
a[aria-expanded='true'] {
color: #fff;
background: #313a46;
}
2021-06-15 18:37:33 +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,
2021-06-15 18:37:33 +02:00
#content.active {
transition: all 0.3s cubic-bezier(0.945, 0.02, 0.27, 0.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-06-15 18:37:33 +02:00
transition: all 0.8s cubic-bezier(0.81, -0.33, 0.345, 1.375);
}
2021-06-15 18:37:33 +02:00
#sidebarCollapse span:first-of-type {
transform: rotate(45deg) translate(2px, 2px);
}
2021-06-15 18:37:33 +02:00
#sidebarCollapse span:nth-of-type(2) {
opacity: 0;
}
2021-06-15 18:37:33 +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-06-15 18:37:33 +02:00
.mat-column-select {
overflow: initial;
}
2020-11-25 08:09:15 +01:00
2021-06-15 18:37:33 +02:00
button {
height: 2.5rem;
}
2021-06-15 18:37:33 +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,
2021-06-15 18:37:33 +02:00
#sidebar.active .sidebar-header h3 {
display: none;
}
2021-04-12 10:24:22 +02:00
#sidebar.active .sidebar-header strong,
2021-06-15 18:37:33 +02:00
#sidebar.active ul li a i {
display: block;
}
#sidebar.active ul li a {
padding: 20px 10px;
2021-06-15 18:37:33 +02:00
font-size: 0.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-06-15 18:37:33 +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-06-15 18:37:33 +02:00
#content .menutoggle {
margin-left: 250px;
}
2021-04-12 10:24:22 +02:00
#sidebar,
#content,
#content.active,
2021-06-15 18:37:33 +02:00
#content.active .menutoggle {
margin-left: 0;
}
2021-04-12 10:24:22 +02:00
#content .menutoggle,
2021-06-15 18:37:33 +02:00
#content.active .menutoggle {
transition: all 0.3s cubic-bezier(0.945, 0.02, 0.27, 0.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-06-15 18:37:33 +02:00
#sidebarCollapse.active span {
margin: 0 auto;
}
2021-06-15 18:37:33 +02:00
#sidebarCollapse.active span:first-of-type {
transform: rotate(45deg) translate(2px, 2px);
}
2021-06-15 18:37:33 +02:00
#sidebarCollapse.active span:nth-of-type(2) {
opacity: 0;
}
2021-06-15 18:37:33 +02:00
#sidebarCollapse.active span:last-of-type {
transform: rotate(-45deg) translate(1px, -1px);
}
}