dc/client/src/styles.scss
Mihajlo Medjedovic f268de21a3
Some checks failed
Test / Build-and-test-development (push) Failing after 6m14s
Test / Build-and-test-development-latest-adapter (push) Failing after 6m13s
init
2023-07-13 13:44:05 +02:00

1079 lines
15 KiB
SCSS

/* You can add global styles to this file, and also import other style files */
@import '~handsontable/dist/handsontable.full.css';
@import "~@clr/ui/clr-ui.min.css";
@import "~@clr/icons/clr-icons.min.css";
@font-face{
font-family: text-security-disc;
src: url("https://raw.githubusercontent.com/noppa/text-security/master/dist/text-security-disc.woff");
}
body, html {
font-weight: 400!important;
padding: 0;
margin: 0;
&.should-login {
clr-modal {
display: none !important;
}
}
}
button {
&:focus {
outline: none;
}
}
// Custom loading spinner
.slider{
position: absolute;
width: 320px;
margin-left: 75px;
margin-top: 70px;
height: 5px;
overflow-x: hidden;
}
.line{
position:absolute;
opacity: 0.4;
background:#73D544;
width:150%;
height:5px;
}
.subline{
position:absolute;
background:#73D544;
height:5px;
}
.inc{
animation: increase 2s infinite;
}
.dec{
animation: decrease 2s 0.5s infinite;
}
@keyframes increase {
from { left: -5%; width: 5%; }
to { left: 130%; width: 100%;}
}
@keyframes decrease {
from { left: -80%; width: 80%; }
to { left: 110%; width: 10%;}
}
// Custo loading spinner end
// Should be here until we figure out why it was there in the first place
// .modal {
// z-index: 2020;
// }
.app-loading {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #314351;
flex-direction: column;
z-index: 2000;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.select-none {
user-select: none;
}
.h-auto {
height: auto;
}
.h-unset-i {
height: unset !important;
}
.min-h-50vh {
min-height: 50vh;
}
.h-24vh {
height: 25vh;
}
.h-25vh {
height: 25vh;
}
.h-70vh {
height: 70vh;
}
.h-80vh {
height: 80vh;
}
.h-100 {
height: 100%;
}
.w-50vw {
width: 50vw;
}
.w-100 {
width: 100%;
}
.w-40 {
width: 40%;
}
.min-w-0 {
min-width: 0px;
}
.mx-5 {
margin: 0 5px;
}
.my-5 {
margin: 5px 0;
}
.my-15 {
margin: 15px 0;
}
.my-10-mx-auto {
margin: 10px auto;
}
.m-0 {
margin: 0 !important;
}
.m-10 {
margin: 10px;
}
.mt-0 {
margin-top: 0;
}
.mt-0-i {
margin-top: 0 !important;
}
.mt-3-negative {
margin-top: -3px;
}
.mt-5 {
margin-top: 5px;
}
.mt-5-i {
margin-top: 5px !important;
}
.mt-2 {
margin-top: 2px;
}
.mt-2-i {
margin-top: 2px !important;
}
.mt-10 {
margin-top: 10px;
}
.mt-20 {
margin-top: 20px;
}
.mt-15 {
margin-top: 15px;
}
.mt-17 {
margin-top: 17px;
}
.mt-20 {
margin-top: 20px;
}
.ml-0 {
margin-left: 0;
}
.ml-3 {
margin-left: 3px;
}
.ml-5 {
margin-left: 5px;
}
.ml-10 {
margin-left: 10px;
}
.ml-15 {
margin-left: 15px;
}
.ml-20 {
margin-left: 20px;
}
.ml-20-i {
margin-left: 20px !important;
}
.mr-0 {
margin-right: 0;
}
.mr-5 {
margin-right: 5px;
}
.mr-10 {
margin-right: 10px;
}
.mr-12 {
margin-right: 12px;
}
.mr-20 {
margin-right: 20px;
}
.mb-0 {
margin-bottom: 0;
}
.mb-0i {
margin-bottom: 0 !important;
}
.mb-5 {
margin-bottom: 5px;
}
.mb-10 {
margin-bottom: 10px;
}
.mb-20 {
margin-bottom: 20px;
}
.mb-30 {
margin-bottom: 30px;
}
.p-0 {
padding: 0;
}
.p-10 {
padding: 10px;
}
.pb-0 {
padding-bottom: 0;
}
.pb-10 {
padding-bottom: 10px;
}
.py-5 {
padding: 5px 0px;
}
.py-10 {
padding: 10px 0px;
}
.background-transparent {
background: transparent;
}
.background-transparent-i {
background: transparent !important;
}
.color-gray {
color: #5a5a5a;
}
.color-dark-gray {
color: #495967
}
.color-darker-gray{
color: #314351
}
.color-white {
color: white;
}
.color-white-i {
color: white !important
}
.color-green {
color: #4b9e4b;
}
.color-dc-green {
color: #81b440
}
.color-red {
color: #e45454
}
.color-orange {
color: #E67E22;
}
.color-blue {
color: #3f8cc3;
}
.color-yellow {
color: #f1c40f
}
.cursor-pointer {
cursor: pointer;
}
.cursor-defualt {
cursor: default;
}
.cursor-default-i {
cursor: default !important;
}
.background-transparent {
background-color: transparent;
}
.pointer-events-none {
pointer-events: none;
}
.text-center {
text-align: center;
}
.font-size-15 {
font-size: 15px;
}
.font-size-18 {
font-size: 18px;
}
.font-bold {
font-weight: bold;
}
.font-bold-i {
font-weight: bold !important;
}
.font-weight-300 {
font-weight: 300;
}
.font-weight-700 {
font-weight: 700;
}
.word-break {
word-break: break-word;
}
.word-break-all {
word-break: break-all;
}
.position-relative {
position: relative;
}
.position-absolute {
position: absolute;
}
.d-none {
display: none;
}
.d-block {
display: block;
}
.d-inline-block {
display: inline-block;
}
.d-flex {
display: flex;
}
.d-contents {
display: contents;
}
.flex-unset {
flex: unset;
}
.align-self-end {
align-self: flex-end;
}
.align-self-start {
align-self: flex-start;
}
.align-items-center {
align-items: center;
}
.justify-content-center {
justify-content: center;
}
.justify-content-center-i {
justify-content: center !important;
}
.justify-content-start {
justify-content: flex-start;
}
.justify-content-end {
justify-content: flex-end;
}
.justify-content-between {
justify-content: space-between;
}
.justify-content-around {
justify-content: space-around;
}
.flex-column {
flex-direction: column;
}
.clr-gap-5 {
gap: 5px;
}
.clr-gap-0 {
gap: 0;
}
.overflow-auto {
overflow: auto;
}
.z-index-highest {
z-index: 10000000
}
.vertical-align-middle {
vertical-align: middle;
}
.icon-dc-fill {
fill: #81b440;
}
.datagrid-custom-footer {
.datagrid-outer-wrapper {
width: 100%;
}
}
.progresStatic {
margin-top:-6px!important;
position: absolute!important;
z-index: 10000!important;
}
.progress, .progress-static {
background-color: #f5f6fe;
border-radius: 0;
font-size: inherit;
height: 6px;
margin: 0;
max-height: .583333rem;
min-height: .166667rem;
overflow: hidden;
display: block;
width: calc(100% - 63px);
}
.progress.loop:after {
-webkit-animation: clr-progress-looper 1.5s ease-in-out infinite;
animation: clr-progress-looper 1.5s ease-in-out infinite;
content: " ";
top: .166667rem;
bottom: 0;
left: 0;
position: absolute;
display: block;
background-color: #60b515;
width: 75%;
}
// Fix for clarity bug, should be addressed when clarity is updated
.badge-warning {
color: white !important;
}
.content-container .content-area .card-header h3 {
margin-top: 10px;
}
.modal-header .close clr-icon {
display: none;
}
.show-close .modal-header .close clr-icon {
display: inline-block;
position: relative;
top: -18px;
right: -10px;
}
.alert-app-level.alert-danger {
background: #D94B2E;
color: #fff;
border: none;
}
.card-header {
font-weight: 300;
}
.select select:focus {
border-bottom: 1px solid #495967;
background: linear-gradient(180deg,transparent 95%,#495a67 0) no-repeat;
}
.clr-treenode-children {
margin-left: 0.2rem !important;
}
.table-active {
background: #d8e3e9 !important;
color: black !important;
}
.table-active:focus {
background: #d8e3e9;
}
clr-select-container .clr-control-container, clr-select-container .clr-control-container .clr-select-wrapper, clr-select-container select {
width: 100%;
}
tbody {
font-weight: 400;
}
h3, h4 {
color: #585858;
font-weight: 400;
letter-spacing: normal;
line-height: 1rem;
margin-top: 1rem;
margin-bottom: 0;
/* text-transform: uppercase; */
}
h1, h2 {
color: #585858;
font-weight: 400;
/* font-family: Metropolis,Avenir Next,Helvetica Neue,Arial,sans-serif; */
letter-spacing: normal;
line-height: 2rem;
margin-top: 1rem;
margin-bottom: 0;
/* text-transform: uppercase; */
}
clr-icon.is-info {
fill: #80b441;
}
.datagrid-host, .datagrid-overlay-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-box!important;
-webkit-box-direction: normal;
}
.btn.btn-danger, .btn.btn-warning {
border-color: #ef4f2e;
background-color: #D94B2E;
color: #fff;
}
.d-none {
display: none !important;
}
.d-block {
display: block !important;
}
.clr-flex-1 {
flex: 1;
}
.clr-flex-column {
flex-direction: column;
}
.clr-flex-row {
flex-direction: row;
}
.border-0 {
border: 0;
}
.box-shadow-none {
box-shadow: none;
}
.box-shadow-none-i {
box-shadow: none !important;
}
.handsontable .htAutocompleteArrow {
color: #828282;
}
.handsontable.listbox {
padding: 5px 0px 5px 5px;
box-shadow: 0px 4px 20px 0px #00000070;
}
.handsontable td.htInvalid {
background: #e62700ad!important;
border: 1px solid red !important;
color: #ffffff!important;
}
.margin-top-20{
margin-top: 20px;
}
.hidden {
display: none !important;
}
.unvisible {
visibility: hidden;
}
@media (min-width: 576px) {
.d-sm-none {
display: none !important;
}
.d-sm-inline {
display: inline !important;
}
.d-sm-inline-block {
display: inline-block !important;
}
.d-sm-block {
display: block !important;
}
.d-sm-table {
display: table !important;
}
.d-sm-table-cell {
display: table-cell !important;
}
.d-sm-flex {
display: -ms-flexbox !important;
display: flex !important;
}
.d-sm-inline-flex {
display: -ms-inline-flexbox !important;
display: inline-flex !important;
}
.clr-flex-sm-column {
flex-direction: column;
}
.clr-flex-sm-row {
flex-direction: row;
}
.clr-gap-sm-5 {
gap: 5px;
}
.clr-gap-sm-0 {
gap: 0;
}
}
@media (min-width: 768px) {
.d-md-none {
display: none !important;
}
.d-md-inline {
display: inline !important;
}
.d-md-inline-block {
display: inline-block !important;
}
.d-md-block {
display: block !important;
}
.d-md-table {
display: table !important;
}
.d-md-table-cell {
display: table-cell !important;
}
.d-md-flex {
display: -ms-flexbox !important;
display: flex !important;
}
.d-md-inline-flex {
display: -ms-inline-flexbox !important;
display: inline-flex !important;
}
.clr-flex-md-column {
flex-direction: column;
}
.clr-flex-md-row {
flex-direction: row;
}
.clr-gap-md-5 {
gap: 5px;
}
.clr-gap-md-0 {
gap: 0;
}
}
@media (min-width: 992px) {
.d-lg-none {
display: none !important;
}
.d-lg-inline {
display: inline !important;
}
.d-lg-inline-block {
display: inline-block !important;
}
.d-lg-block {
display: block !important;
}
.d-lg-table {
display: table !important;
}
.d-lg-table-cell {
display: table-cell !important;
}
.d-lg-flex {
display: -ms-flexbox !important;
display: flex !important;
}
.d-lg-inline-flex {
display: -ms-inline-flexbox !important;
display: inline-flex !important;
}
.clr-flex-lg-column {
flex-direction: column;
}
.clr-flex-lg-row {
flex-direction: row;
}
.clr-gap-lg-5 {
gap: 5px;
}
.clr-gap-lg-0 {
gap: 0;
}
}
.datagrid-body {
padding-bottom: 2rem!important;
}
.abortMsg {
white-space: pre-wrap;
font-family: monospace;
}
#graph svg {
height: 100%;
width: 100%;
}
.no-table-selected {
display:flex;
justify-content:center;
flex-direction:column;
align-items: center;
position: absolute;
background: white;
z-index: 10;
width: 100%;
height: 100%;
top: 0;
}
.copyRight {
background:#495967!important;
color: #fff;
display:flex !important;
justify-content:center;
align-items: center;
padding: 5px 0px 4px 0px;
z-index: 100;
}
.nav-tree > clr-tree-node.clr-expanded {
display: inline-block !important;
}
clr-tree-node {
overflow-y: visible;
&:focus {
outline: none !important;
}
.clr-treenode-caret {
width: auto !important;
height: auto !important;
}
.clr-treenode-spinner-container {
padding: 0px 8px 0px 8px;
width: auto;
height: auto;
display: flex;
align-items: center;
}
.clr-tree-node-content-container {
&:focus {
outline: none !important;
}
}
}
.clr-treenode-content {
p {
white-space: nowrap;
}
}
.search-node {
margin-bottom: 5px;
}
.tree-search-wrapper {
position: relative;
display: flex;
align-items: center;
clr-input-container {
margin: 0;
}
clr-icon {
position: absolute;
right: 0;
bottom: 0;
margin: 0;
margin-top: 5px;
background: white;
cursor: pointer;
}
}
.clr-tree-node {
overflow: visible !important;
}
.content-container {
width: 100%;
}
//Firefox Fixes
@-moz-document url-prefix() {
.wtHolder {
width: 100% !important;
}
}
// IE Fixes
input::-ms-clear {
display: none;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
clr-tree-node.clr-expanded {
padding-bottom: 20px;
min-height: auto;
}
.clr-tree-node {
min-height: 24px;
}
.clr-treenode-children {
overflow: hidden !important;
}
.clr-treenode-content .clr-icon, .clr-treenode-content clr-icon {
min-width: 16px;
min-height: 16px;
}
.tree-search-wrapper clr-icon {
bottom: 2px;
}
.content-container {
height: 100%;
}
.content-area {
& > .card {
margin-bottom: 20px;
}
}
.record-edit-modal textarea {
min-height: 42px;
}
}
.border-bottom-divider {
border-bottom: 1px solid #d3d3d3;
}
.loadingSpinner {
height:70vh;
flex: 1;
display:flex;
justify-content: center;
flex-direction:column;
align-items:center;
}
.disable-password-manager {
-webkit-text-security: disc;
-moz-text-security: disc;
text-security: disc;
font-family: text-security-disc;
}
.relative {
position: relative;
}
hr.light {
border: 0;
border-bottom: 1px solid #dedede;
}
//Rules to fix CSP issues with clarity elements (they use base64 which is blocked)
.spinner {
background: url('./images/spinner.svg') !important;
}
.clr-select-wrapper::after {
background: url('./images/caret.svg') !important;
}
.table-search-wrapper {
background-color: #fff;
.input-wrapper {
position: relative;
min-width: 170px;
clr-icon, .spinner {
position: absolute;
right: 19px;
top: 0px;
}
clr-icon {
cursor: pointer;
background: white;
}
}
clr-input-container {
margin-top: -5px;
margin-right: 0;
label {
display: none;
}
}
clr-checkbox-container {
margin-top: 0;
}
input {
border-bottom: none;
border: 1px solid #999;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
}
.dc-locked-control {
opacity: 0.4;
cursor: not-allowed !important;
}
.link-it {
cursor: pointer;
text-decoration: underline;
}