5092 lines
83 KiB
SCSS
5092 lines
83 KiB
SCSS
/* You can add global styles to this file, and also import other style files */
|
|
@import '~handsontable/dist/handsontable.full.css';
|
|
|
|
@import '~@clr/icons/clr-icons.min.css';
|
|
|
|
@import '@cds/core/global.min.css';
|
|
@import '@cds/core/styles/theme.dark.min.css';
|
|
@import '@clr/ui/clr-ui.min.css';
|
|
|
|
@import './colors.scss';
|
|
|
|
@font-face {
|
|
font-family: text-security-disc;
|
|
src: url('https://raw.githubusercontent.com/noppa/text-security/master/dist/text-security-disc.woff');
|
|
}
|
|
|
|
// TODO: IMPORTANT CSP WOKRAROUND
|
|
// To workaround the issue with the CSP issues while streaming DC on SAS
|
|
// we disabled angular component encapsulation and put all styles globally
|
|
|
|
// EDITOR.COMPONENT
|
|
|
|
app-editor {
|
|
.card {
|
|
margin-top: 0;
|
|
border: 0;
|
|
}
|
|
|
|
.buttonBar {
|
|
padding: 2px 10px 2px 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.testRed {
|
|
color: white;
|
|
background: rgba(255,0,0, 0.8) !important;
|
|
}
|
|
|
|
hot-table {
|
|
.firstColumnHeaderStyle button.changeType {
|
|
display: none;
|
|
}
|
|
|
|
.handsontable tbody th.ht__highlight, .handsontable thead th.ht__highlight {
|
|
&.primaryKeyHeaderStyle {
|
|
background-color: #306b00b0 !important;
|
|
}
|
|
}
|
|
|
|
.primaryKeyHeaderStyle {
|
|
background-color: #306b006e !important;
|
|
}
|
|
|
|
th.readonlyCell {
|
|
div {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
td.readonlyCell {
|
|
opacity: 0.5
|
|
}
|
|
}
|
|
|
|
.submit-reason {
|
|
min-height: 120px;
|
|
max-height: 120px;
|
|
height: 120px;
|
|
}
|
|
|
|
.infoBar {
|
|
margin-top:14px;
|
|
background: #495967;
|
|
color: white;
|
|
text-align:center;
|
|
padding: 3px;
|
|
font-size: 16px;
|
|
|
|
height: 30px;
|
|
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
|
|
span {
|
|
width: 80%;
|
|
}
|
|
|
|
&:hover {
|
|
height: unset;
|
|
white-space: normal;
|
|
|
|
span {
|
|
width: unset;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pkHeader {
|
|
background: #687682;
|
|
color: #fff;
|
|
margin: -1px -1px -1px -1px;
|
|
}
|
|
|
|
.headerBar {
|
|
// padding: 13px 0px 14px 0px;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
background: var(--clr-vertical-nav-bg-color);
|
|
}
|
|
|
|
.error-icon {
|
|
width: 30px;
|
|
height: 30px;
|
|
color: red;
|
|
}
|
|
|
|
.btnCtrl {
|
|
display:flex;
|
|
justify-content:flex-end;
|
|
}
|
|
|
|
.card-header {
|
|
border-bottom: 1px solid transparent;
|
|
}
|
|
|
|
.hidden {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.my-drop-zone {
|
|
border: solid 1px lightgray;
|
|
border-radius: 10px;
|
|
background: whitesmoke;
|
|
box-shadow: inset 0px 0px 4px 2px #a7a5a52b;
|
|
height: 50vh;
|
|
}
|
|
.nv-file-over {
|
|
border: solid 2px green;
|
|
} /* Default class applied to drop zones on over */
|
|
|
|
.file-drop-text{
|
|
text-align: center;
|
|
}
|
|
|
|
.nv-file-over {
|
|
border: solid 2px green;
|
|
} /* Default class applied to drop zones on over */
|
|
|
|
.file-drop-text{
|
|
text-align: center;
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
|
|
.progresStatic {
|
|
margin-top:9px!important;
|
|
}
|
|
|
|
.progress, .progress-static {
|
|
width: calc(100% - 14px);
|
|
}
|
|
}
|
|
|
|
.hotEditor {
|
|
position: relative;
|
|
}
|
|
|
|
.excel-parsing {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
position: relative;
|
|
|
|
.details {
|
|
margin: 0;
|
|
position: absolute;
|
|
top: -45px;
|
|
}
|
|
}
|
|
|
|
.edit-record-spinner {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: rgba(255, 255, 255, 0.6);
|
|
position: absolute;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
z-index: 500;
|
|
}
|
|
|
|
@media screen and (max-width: 480px) {
|
|
|
|
.progresStatic {
|
|
margin-top:32px!important;
|
|
}
|
|
|
|
.card-block, .card-footer {
|
|
padding: 10px 0px 0px 0px;
|
|
}
|
|
}
|
|
|
|
.content-area {
|
|
padding: 0 0.8rem 0.8rem 0.8rem !important;
|
|
padding-top: 0;
|
|
|
|
// .card {
|
|
// min-height: calc(100vh - 160px);
|
|
// }
|
|
}
|
|
|
|
.drop-area {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
|
|
margin: 1px;
|
|
|
|
border: 2px dashed #fff;
|
|
|
|
z-index: -1;
|
|
|
|
span {
|
|
font-size: 20px;
|
|
margin-top: 20px;
|
|
padding: 10px;
|
|
background: #dbdbdb;
|
|
border-radius: 5px;
|
|
color: black;
|
|
}
|
|
}
|
|
|
|
#submitBtn, #cancelSubmitBtn {
|
|
width: 150px;
|
|
}
|
|
|
|
.view-table {
|
|
font-size: inherit !important;
|
|
color: #1a57bb !important;
|
|
}
|
|
|
|
// When width is smaller remove the text from the buttons
|
|
// keep only the icons
|
|
@media (max-width: 992px) {
|
|
.icon-collapse {
|
|
.text {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// FIXME
|
|
// Let's leave it here for a reference if there
|
|
// is an issue with viewboxes/filter modal overlaying
|
|
// we will remove it if no issues found
|
|
// .filter-modal {
|
|
// z-index: 1210;
|
|
// }
|
|
|
|
}
|
|
// EDITOR.COMPONENT END
|
|
|
|
// APP.COMPONENT
|
|
my-app {
|
|
app-requests-modal {
|
|
z-index: 10000;
|
|
}
|
|
|
|
header.app-header {
|
|
background: $headerBackground !important;
|
|
color: #fff;
|
|
}
|
|
|
|
.logo img.without-text {
|
|
width: 30px;
|
|
}
|
|
|
|
.logo img.with-text {
|
|
width: 210px;
|
|
}
|
|
|
|
.header-hamburger-trigger {
|
|
display: block;
|
|
background: transparent;
|
|
border: 0;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.demo-expired-notice {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100vh !important;
|
|
width: 100vw !important;
|
|
z-index: 105;
|
|
background: rgba(33, 33, 33, .5);
|
|
|
|
.expired-details {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 30px;
|
|
z-index: 110;
|
|
background: $headerBackground;
|
|
|
|
.expired-notice {
|
|
color: #e0e0e0;
|
|
font-size: 16px;
|
|
|
|
.mailto {
|
|
color: #8dc53e;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.main-container .update-key {
|
|
display: flex;
|
|
align-items: center;
|
|
color: white;
|
|
padding: 0px 10px;
|
|
background: #00000026;
|
|
}
|
|
|
|
.alert-icon-wrapper {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.nav-text {
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.sidebar-toggle {
|
|
display: flex;
|
|
height: 100%;
|
|
align-items: center;
|
|
padding-left: 10px;
|
|
|
|
clr-icon {
|
|
cursor: pointer;
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
}
|
|
|
|
header {
|
|
.header-actions {
|
|
.dropdown {
|
|
position: unset; //without it, when opening user dropdown scrollbar was displaying without reason
|
|
}
|
|
}
|
|
|
|
.nav-link:hover {
|
|
color: #fafafa;
|
|
}
|
|
|
|
.nav-link.active {
|
|
background: #1d2f3d;
|
|
}
|
|
}
|
|
|
|
.notf {
|
|
background: #16a57a;
|
|
color: #fffcfc;
|
|
font-size: 12px;
|
|
}
|
|
|
|
|
|
.toggle-switch input[type=checkbox]:checked+label:before {
|
|
border-color: #61717D;
|
|
background-color: #61717D;
|
|
transition: .15s ease-in;
|
|
transition-property: border-color,background-color;
|
|
}
|
|
|
|
.main-container {
|
|
min-height: 100vh !important;
|
|
}
|
|
|
|
.content-container {
|
|
z-index: 0!important;
|
|
}
|
|
|
|
.navBarResp {
|
|
display: flex;
|
|
justify-content: center;
|
|
background: #495A67;
|
|
color: #fff;
|
|
}
|
|
|
|
.app-loading {
|
|
.loading-logo {
|
|
max-width: 400px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.navBarResp {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
background: #495A67;
|
|
color: #fff;
|
|
}
|
|
|
|
.main-container .sub-nav.clr-nav-level-1 .nav .nav-link, .main-container .sub-nav.clr-nav-level-2 .nav .nav-link, .main-container .subnav.clr-nav-level-1 .nav .nav-link, .main-container .subnav.clr-nav-level-2 .nav .nav-link {
|
|
padding: 0 .5rem 0 1rem;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
border-radius: .125rem 0 0 .125rem;
|
|
color: #95c84b;
|
|
}
|
|
|
|
|
|
|
|
.card-block, .card-footer {
|
|
padding: 10px 0px 0px 0px;
|
|
}
|
|
|
|
.main-container[_ngcontent-c0] .content-container[_ngcontent-c0] .content-area[_ngcontent-c0] {
|
|
padding: 0rem 0rem 0rem 0rem;
|
|
}
|
|
|
|
}
|
|
}
|
|
// ::ng-deep {
|
|
.htInvalid {
|
|
background: black!important;
|
|
}
|
|
|
|
@media screen and (max-width:480px) {
|
|
h2 {
|
|
font-size: .7rem!important;
|
|
}
|
|
h3 {
|
|
font-size: .7rem;
|
|
}
|
|
}
|
|
|
|
.nav-link {
|
|
padding: 0rem 1rem 0rem 1rem;
|
|
}
|
|
|
|
body[cds-theme="light"] {
|
|
.btn-primary .btn, .btn.btn-primary {
|
|
border-color: $headerBackground;
|
|
background-color: $headerBackground;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
body[cds-theme="dark"] {
|
|
.btn-primary .btn, .btn.btn-primary {
|
|
border-color: #5e7382;
|
|
background-color: #5e7382;
|
|
color: #fff;
|
|
|
|
clr-icon, cds-icon {
|
|
color: #fff
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-primary .btn, .btn.btn-primary {
|
|
&:disabled {
|
|
opacity: 0.65;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
-webkit-appearance: none!important;
|
|
border-radius: .125rem;
|
|
border: 1px solid;
|
|
min-width: 3rem;
|
|
max-width: 15rem;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
vertical-align: middle;
|
|
line-height: 1.5rem;
|
|
letter-spacing: .12em;
|
|
font-size: .5rem;
|
|
font-weight: 500;
|
|
height: 1.5rem;
|
|
padding: 0 .5rem;
|
|
}
|
|
|
|
.btn.btn-outline:hover {
|
|
border-color: $headerBackground;
|
|
background-color: #495A67;
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
body[cds-theme="dark"] {
|
|
.btn.btn-icon.btn-dimmed {
|
|
color: #7295ae;
|
|
}
|
|
}
|
|
|
|
body[cds-theme="light"] {
|
|
.btn.btn-icon.btn-dimmed {
|
|
color: $headerBackground;
|
|
}
|
|
|
|
.btn.btn-outline {
|
|
border-color: $headerBackground;
|
|
background-color: transparent;
|
|
color: $headerBackground;
|
|
}
|
|
}
|
|
|
|
.htMobileEditorContainer .inputs textarea {
|
|
font-size: 13pt;
|
|
border: 2px solid #485967;
|
|
border-radius: 4px;
|
|
-webkit-appearance: none;
|
|
box-shadow: none;
|
|
position: absolute;
|
|
left: 14px;
|
|
right: 0px;
|
|
top: 0;
|
|
bottom: 0;
|
|
padding: 7pt;
|
|
width: 290px;
|
|
}
|
|
|
|
.htMobileEditorContainer .positionControls {
|
|
width: 333px;
|
|
position: absolute;
|
|
right: 5pt;
|
|
top: 50px;
|
|
bottom: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.htMobileEditorContainer.active {
|
|
display: block;
|
|
height: 120px;
|
|
width: 350px;
|
|
}
|
|
|
|
|
|
/* Left and right */
|
|
|
|
/* Column headers */
|
|
|
|
body[cds-theme="light"] {
|
|
.wtBorder {
|
|
background-color: #495A67!important;
|
|
}
|
|
|
|
.ht_master tr:nth-of-type(odd) > td {
|
|
filter: brightness(0.97);
|
|
}
|
|
|
|
.ht_master .htDimmed {
|
|
color: #373737 !important;
|
|
filter: brightness(1) !important;
|
|
}
|
|
}
|
|
|
|
$darkBorderColor: #697c85;
|
|
|
|
body[cds-theme="dark"] {
|
|
.ht_master tr:nth-of-type(odd) > td {
|
|
filter: brightness(1.2);
|
|
}
|
|
|
|
.ht_master:not(.emptyColumns) ~ .handsontable tbody tr th, .ht_master:not(.emptyColumns) ~ .handsontable:not(.ht_clone_top) thead tr th:first-child {
|
|
background-color: #2d4048;
|
|
border-color: $darkBorderColor;
|
|
}
|
|
|
|
.handsontable td {
|
|
// border-right: 1px solid #697c85;
|
|
// border-bottom: 1px solid #697c85;
|
|
border-color: $darkBorderColor;
|
|
}
|
|
|
|
.handsontable tr:first-child th, .handsontable tr:first-child td {
|
|
border-color: $darkBorderColor;
|
|
}
|
|
|
|
.handsontable .handsontable.ht_clone_top .wtHider {
|
|
border-color: $darkBorderColor;
|
|
}
|
|
|
|
.handsontable .changeType {
|
|
background-color: #3c5662;
|
|
border-color: $darkBorderColor;
|
|
}
|
|
|
|
.handsontableInput {
|
|
background-color: #708b98;
|
|
}
|
|
}
|
|
|
|
.handsontable .handsontable.ht_clone_top .wtHider {
|
|
padding: 0 0 0px 0!important;
|
|
margin: 0px;
|
|
border-bottom: 3px solid #d6d3d3;
|
|
}
|
|
|
|
body[cds-theme="light"] {
|
|
.content-container {
|
|
// background: red;
|
|
background: #F5F6FF;
|
|
}
|
|
}
|
|
|
|
.datagrid-compact, .datagrid-history{
|
|
.datagrid {
|
|
border-collapse: separate;
|
|
border: 1px solid transparent;
|
|
border-radius: .125rem;
|
|
margin: 0;
|
|
margin-top: 1rem;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
padding: 15px 15px 50px 15px;
|
|
}
|
|
.datagrid-foot {
|
|
-webkit-box-pack: end;
|
|
-ms-flex-pack: end;
|
|
justify-content: flex-end;
|
|
height: 1.5rem;
|
|
padding: 0 .5rem;
|
|
line-height: calc(1.5rem - 3px);
|
|
font-size: .45833rem;
|
|
background-color: #fff;
|
|
border-top: 1px solid #ccc;
|
|
border-radius: 0px;
|
|
// border-radius: 0 0 .125rem .125rem;
|
|
}
|
|
.datagrid-footer {
|
|
position: absolute;
|
|
right: 30px;
|
|
top: 1px;
|
|
}
|
|
.datagrid .datagrid-head {
|
|
background-color: #fff;
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
}
|
|
|
|
.dropdown-menu {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
margin-top: .083333rem;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
padding: .5rem 0;
|
|
border: 1px solid #ccc;
|
|
box-shadow: 0 1px 0.125rem hsla(0,0%,45%,.25);
|
|
min-width: 5rem;
|
|
max-width: 15rem;
|
|
border-radius: .125rem;
|
|
visibility: hidden;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.table {
|
|
border-collapse: separate;
|
|
border: 1px solid transparent;
|
|
border-radius: 0px;
|
|
margin: 0;
|
|
margin-top: 1rem;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.table th {
|
|
font-size: .45833rem;
|
|
font-weight: 600;
|
|
letter-spacing: .03em;
|
|
vertical-align: bottom;
|
|
border-bottom: 1px solid #ccc;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.modal-header {
|
|
border-bottom: 2px solid #e4e4e4;
|
|
padding: 0 0 .5rem 0;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.main-container .content-container {
|
|
min-height: 0px;
|
|
position: relative;
|
|
}
|
|
|
|
// } eng of ng deep
|
|
// APP.COMPONENT END
|
|
|
|
// HOME.COMPONENT
|
|
home-component {
|
|
clr-tree-node button {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.card-block {
|
|
height: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
.no-table-selected {
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
|
|
.spinner-wrapper-fullpage {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
// ::ng-deep {
|
|
// .badge.badge-info {
|
|
// background: #6a9235!important;
|
|
// color: #fff;
|
|
// }
|
|
clr-icon.is-blue, clr-icon.is-info {
|
|
fill: #6a9235;
|
|
}
|
|
// }
|
|
// HOME.COMPONENT END
|
|
|
|
// SIDEBAR.COMPONENT
|
|
app-sidebar {
|
|
$sidebarWidth: 272px;
|
|
|
|
.clr-vertical-nav .nav-link.active {
|
|
background-color: transparent;
|
|
}
|
|
|
|
clr-vertical-nav {
|
|
width: $sidebarWidth;
|
|
min-width: $sidebarWidth;
|
|
height: 100%;
|
|
max-width: 375px;
|
|
position: relative;
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.12);
|
|
|
|
.sun-dropdown {
|
|
min-height: 36px
|
|
}
|
|
|
|
.nav-tree {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
&.closed {
|
|
margin-left: -$sidebarWidth;
|
|
}
|
|
|
|
.resize-handle {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: -3px;
|
|
border-right: 4px solid #80b441;
|
|
cursor: col-resize;
|
|
opacity: 0;
|
|
transition: all 0.1s ease-in-out;
|
|
|
|
&:hover {
|
|
opacity: .5;
|
|
}
|
|
|
|
&.resizing {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&.resizing {
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
.nav-divider {
|
|
border: 0;
|
|
border-top: 1px solid #d3d3d3;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.page-title {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
text-align: center;
|
|
}
|
|
.zero-margin{
|
|
margin: 0px !important;
|
|
}
|
|
.user-nav-btn{
|
|
padding: 0px;
|
|
padding-left: 2px;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
#sidebarNav {
|
|
z-index: 200;
|
|
}
|
|
|
|
@media (max-width: 767px) { //768
|
|
#sidebarNav {
|
|
position: absolute;
|
|
bottom: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
// SIDEBAR.COMPONENT END
|
|
|
|
// XLMAP.COMPONENT
|
|
app-xlmap {
|
|
.card {
|
|
margin-top: 0;
|
|
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
clr-tree-node button {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.no-table-selected {
|
|
position: relative;
|
|
}
|
|
|
|
.header-row {
|
|
.title-col {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.options-col {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
.sw {
|
|
margin: 1rem 0rem 0.5rem 1rem;
|
|
}
|
|
|
|
.viewerTitle {
|
|
text-align: center;
|
|
}
|
|
|
|
.cardFlex {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.content-area {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
hot-table {
|
|
.primaryKeyHeaderStyle {
|
|
background: #306b006e;
|
|
}
|
|
}
|
|
|
|
.drop-area {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
margin: 1px;
|
|
|
|
border: 2px dashed #fff;
|
|
|
|
z-index: -1;
|
|
|
|
span {
|
|
font-size: 20px;
|
|
margin-top: 20px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
// XLMAP.COMPONENT END
|
|
|
|
// MULTI-DATASET.COMPONENT
|
|
app-multi-dataset {
|
|
.no-table-selected {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: absolute;
|
|
background: var(--clr-vertical-nav-bg-color);
|
|
z-index: 10;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
}
|
|
|
|
.header-row {
|
|
padding: 15px 0;
|
|
border-bottom: 1px solid #d3d3d3;
|
|
}
|
|
|
|
.dataset-input-wrapper {
|
|
max-width: 500px;
|
|
width: 100%;
|
|
|
|
textarea {
|
|
min-height: 200px;
|
|
height: 200px;
|
|
}
|
|
}
|
|
|
|
.submit-reason {
|
|
min-height: 70px;
|
|
max-height: 70px;
|
|
height: 70px;
|
|
}
|
|
|
|
.log-wrapper {
|
|
margin: 0 10px;
|
|
height: auto;
|
|
}
|
|
|
|
.dataset-selection-actions {
|
|
border-top: 1px solid #d3d3d3;
|
|
}
|
|
|
|
.licence-limit-notice {
|
|
color: var(--cds-alias-status-warning-dark);
|
|
}
|
|
|
|
.submission-results {
|
|
border-bottom: 1px solid #d3d3d3;
|
|
}
|
|
}
|
|
|
|
td.not-matched {
|
|
background-color: #ff000054;
|
|
}
|
|
// MULTI-DATASET.COMPONENT END
|
|
|
|
// SUBMITTER.COMPONENT
|
|
app-submitted {
|
|
.noBorder {
|
|
border-bottom: 1px solid transparent!important;
|
|
}
|
|
|
|
.tooltip.tooltip-bottom-left>.tooltip-content, .tooltip .tooltip-content.tooltip-bottom-left {
|
|
background: $headerBackground !important;
|
|
}
|
|
.tooltip.tooltip-bottom-left>.tooltip-content:before, .tooltip .tooltip-content.tooltip-bottom-left:before {
|
|
border-right: .25rem solid $headerBackground;
|
|
border-bottom: .20833rem solid $headerBackground;
|
|
}
|
|
|
|
.no-submitted-tables {
|
|
height: calc(100vh - 200px);
|
|
}
|
|
}
|
|
// SUBMITTER.COMPONENT END
|
|
|
|
// APPROVE.COMPONENT
|
|
app-approve {
|
|
.column-center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.datagrid .datagrid-column .datagrid-column-title{
|
|
outline: none!important;
|
|
}
|
|
|
|
.links {
|
|
font-weight: 700;cursor: pointer;
|
|
}
|
|
|
|
.tooltip.tooltip-bottom-left>.tooltip-content, .tooltip .tooltip-content.tooltip-bottom-left {
|
|
background: $headerBackground !important;
|
|
}
|
|
.tooltip.tooltip-bottom-left>.tooltip-content:before, .tooltip .tooltip-content.tooltip-bottom-left:before {
|
|
border-right: .25rem solid $headerBackground;
|
|
border-bottom: .20833rem solid $headerBackground;
|
|
}
|
|
|
|
.noBorder {
|
|
border-bottom: 1px solid transparent!important;
|
|
}
|
|
|
|
.approvals-list-wrapper {
|
|
height: 70vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.noapprovals-info-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
height: calc(100vh - 200px);
|
|
}
|
|
}
|
|
// APPROVE.COMPONENT END
|
|
|
|
// HISTORY.COMPONENT
|
|
app-history {
|
|
.rejected {
|
|
color: #f83126;
|
|
font-weight: bold
|
|
}
|
|
|
|
.accepted {
|
|
color: #3fc424;
|
|
font-weight: bold
|
|
}
|
|
|
|
.hsCell {
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
padding: 7px;
|
|
}
|
|
.btCell {
|
|
display: flex !important;
|
|
justify-content: center !important;
|
|
}
|
|
|
|
.verCenter {
|
|
display: flex;
|
|
align-items: center;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.load-more {
|
|
input {
|
|
width: 90px;
|
|
}
|
|
}
|
|
|
|
#noDataContainer {
|
|
height: calc(100vh - 200px);
|
|
}
|
|
|
|
.table-link {
|
|
text-decoration: underline;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
// HISTORY.COMPONENT END
|
|
|
|
// VIEWER.COMPONENT
|
|
app-viewer {
|
|
.card {
|
|
margin-top: 0;
|
|
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
clr-tree-node button {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.toggle-switch input[type=checkbox]:checked+label:before {
|
|
border-color: $headerBackground;
|
|
background-color: $headerBackground !important;
|
|
transition: .15s ease-in;
|
|
transition-property: border-color,background-color;
|
|
}
|
|
|
|
.header-row {
|
|
.title-col {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.options-col {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.sw {
|
|
margin: 1rem 0rem 0.5rem 1rem;
|
|
}
|
|
|
|
.infoBar {
|
|
margin-top:10px;
|
|
background: #495967;
|
|
color: white;
|
|
text-align:center;
|
|
padding: 3px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.filterSide {
|
|
margin-top: 26px;
|
|
margin-bottom: 19px;
|
|
}
|
|
|
|
.options-dropdown {
|
|
clr-icon {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
.dropdown-menu {
|
|
width: 180px;
|
|
margin-top: -18px;
|
|
padding: 0;
|
|
}
|
|
|
|
.dropdown-menu .btn {
|
|
width: 100%;
|
|
text-transform: none;
|
|
}
|
|
|
|
.cardFlex {
|
|
display:flex;
|
|
justify-content: center
|
|
}
|
|
|
|
.noData {
|
|
display:flex;
|
|
justify-content:center;
|
|
flex-direction:column;
|
|
align-items: center;
|
|
flex: 1;
|
|
}
|
|
|
|
|
|
.filterBtn {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.editBtn {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.btnView{
|
|
margin: 0px!important;
|
|
}
|
|
|
|
.content-area {
|
|
padding: 0.5rem !important;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.download-select {
|
|
.clr-select-wrapper {
|
|
max-height: unset !important;
|
|
}
|
|
}
|
|
|
|
.refresh-table {
|
|
cursor: pointer;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.libinfo {
|
|
padding: 10px 20px;
|
|
overflow: auto;
|
|
}
|
|
|
|
hot-table {
|
|
.handsontable tbody th.ht__highlight, .handsontable thead th.ht__highlight {
|
|
&.primaryKeyHeaderStyle {
|
|
background-color: #306b00b0 !important;
|
|
}
|
|
}
|
|
|
|
.primaryKeyHeaderStyle {
|
|
background-color: #306b006e !important;
|
|
}
|
|
}
|
|
|
|
.no-table-selected-info {
|
|
background: none;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.web-query {
|
|
max-height: 35vh;
|
|
|
|
.web-query-text {
|
|
min-height: 100px;
|
|
max-height: 100px;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.web-query-wrapper {
|
|
.clr-control-container {
|
|
width: 100%;
|
|
}
|
|
|
|
clr-textarea-container {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.clr-textarea-wrapper {
|
|
margin: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.table-search-wrapper {
|
|
margin-left: 0;
|
|
|
|
form {
|
|
padding-left: 0;
|
|
}
|
|
|
|
clr-icon {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
clr-input-container {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.clr-control-container {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
// FIXME
|
|
// Let's leave it here for a reference if there
|
|
// is an issue with viewboxes/filter modal overlaying
|
|
// we will remove it if no issues found
|
|
// .filter-modal {
|
|
// z-index: 1210;
|
|
// }
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.filterBtn {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.editBtn {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
.row {
|
|
margin-right: 0rem;
|
|
margin-left: 0rem;
|
|
}
|
|
}
|
|
}
|
|
// VIEWER.COMPONENT END
|
|
|
|
// GROUP.COMPONENT
|
|
app-group {
|
|
.sidebar-height{
|
|
height: 100%;
|
|
}
|
|
.group-info-text{
|
|
display: inline;
|
|
font-size: 20px;
|
|
}
|
|
.group-info{
|
|
border: 1px solid;
|
|
border-radius: 3px;
|
|
}
|
|
.group-info td{
|
|
text-align: center;
|
|
}
|
|
|
|
.group-data{
|
|
border: 1px solid;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.group-data{
|
|
min-height: auto;
|
|
h3, h5{
|
|
text-align: center;
|
|
}
|
|
|
|
.member-table{
|
|
width: 100%;
|
|
}
|
|
|
|
.member-table tbody{
|
|
tr:hover{
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
.table-container{
|
|
overflow: auto;
|
|
}
|
|
|
|
@media screen and (max-width: 768px){
|
|
.group-data{
|
|
min-height: unset !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
body[cds-theme="dark"] {
|
|
app-group {
|
|
.group-info {
|
|
background-color: $headerBackground;
|
|
border-color: $headerBackground;
|
|
}
|
|
|
|
.group-data {
|
|
background-color: $headerBackground;
|
|
border-color: $headerBackground;
|
|
}
|
|
|
|
.member-table tbody{
|
|
tr:hover{
|
|
background-color: #29404b;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
body[cds-theme="light"] {
|
|
app-group {
|
|
.group-info{
|
|
background-color: #f9f9f9;
|
|
border-color: #a7a7a7;
|
|
box-shadow: 0px 2px 5px #dad7d7;
|
|
}
|
|
|
|
.group-data {
|
|
background-color: #f9f9f9;
|
|
border-color: #a7a7a7;
|
|
box-shadow: 0px 2px 5px #dad7d7;
|
|
}
|
|
|
|
.member-table tbody{
|
|
tr:hover{
|
|
background-color: #e6e6e6;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// GROUP.COMPONENT END
|
|
|
|
// USER.COMPONENT
|
|
app-user {
|
|
.sidebar-height{
|
|
height: 100%;
|
|
}
|
|
.user-info-text{
|
|
display: inline;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.user-info{
|
|
border: 1px solid;
|
|
border-radius: 3px;
|
|
}
|
|
.user-info td{
|
|
text-align: center;
|
|
}
|
|
.user-data{
|
|
border: 1px solid;
|
|
border-radius: 3px;
|
|
}
|
|
.user-data{
|
|
min-height: auto;
|
|
h3, h5{
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.user-table{
|
|
width: 100%;
|
|
}
|
|
.user-table thead{
|
|
background-color: #dadada;
|
|
}
|
|
.user-table tbody{
|
|
tr:hover{
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.width-50{
|
|
width: 50%;
|
|
}
|
|
.width-33{
|
|
width: 33%;
|
|
}
|
|
.table-container{
|
|
overflow-y: scroll;
|
|
max-height: 500px;
|
|
}
|
|
@media screen and (max-width: 768px){
|
|
.user-data{
|
|
min-height: unset !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
body[cds-theme="dark"] {
|
|
app-user {
|
|
.user-info {
|
|
background-color: $headerBackground;
|
|
border-color: $headerBackground;
|
|
}
|
|
|
|
.user-data {
|
|
background-color: $headerBackground;
|
|
border-color: $headerBackground;
|
|
}
|
|
|
|
.user-table tbody{
|
|
tr:hover{
|
|
background-color: #29404b;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
body[cds-theme="light"] {
|
|
app-user {
|
|
.user-info {
|
|
background-color: #f9f9f9;
|
|
border-color: #a7a7a7;
|
|
box-shadow: 0px 2px 5px #dad7d7;
|
|
}
|
|
|
|
.user-data {
|
|
background-color: #f9f9f9;
|
|
border-color: #a7a7a7;
|
|
box-shadow: 0px 2px 5px #dad7d7;
|
|
}
|
|
|
|
.user-table tbody{
|
|
tr:hover{
|
|
background-color: #e6e6e6;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// USER.COMPONENT END
|
|
|
|
// REQUESTS-MODAL.COMPONENT
|
|
app-requests-modal {
|
|
.dropdown-item {
|
|
&.selected {
|
|
background: #d8e3e9;
|
|
}
|
|
}
|
|
|
|
.no-reqs {
|
|
border-top: 1px solid #0000001a;
|
|
padding-top: 5px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.requests-modal .modal-header .close clr-icon {
|
|
display: block !important;
|
|
}
|
|
|
|
.requests-modal .modal-content {
|
|
padding: 20px 10px 5px 10px;
|
|
}
|
|
|
|
.work-tables-dropdown button {
|
|
color: var(--clr-nav-link-color, #8c8c8c) !important;
|
|
}
|
|
|
|
.stack-view {
|
|
height: auto !important;
|
|
|
|
//Following lines will fix clarity (requests modal white) issue.
|
|
//Clarity version that has issue is: v12
|
|
mask-image: none !important;
|
|
-webkit-mask-image: none !important;
|
|
}
|
|
|
|
.content {
|
|
clr-icon {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
pre {
|
|
word-break: break-all;
|
|
white-space: pre-wrap;
|
|
max-height: initial;
|
|
overflow: visible;
|
|
border: 0;
|
|
}
|
|
|
|
.stack-block-label {
|
|
// Clarity before V3 -----
|
|
// display: none;
|
|
|
|
// Clarity V3 -----
|
|
width: 100%;
|
|
padding-left: .6rem !important;
|
|
|
|
.stack-view-key {
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.err-links {
|
|
.clr-treenode-children {
|
|
max-height: 55px;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
// REQUESTS-MODAL.COMPONENT END
|
|
|
|
// SYSTEM.COMPONENT
|
|
app-system {
|
|
.content-box {
|
|
max-width: 1289px;
|
|
}
|
|
|
|
.sys-info {
|
|
>div {
|
|
// width: 238px;
|
|
flex: 1;
|
|
}
|
|
div:nth-child(2) {
|
|
margin: 0 30px;
|
|
}
|
|
}
|
|
|
|
.admin-action, .user-action {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 5px 10px;
|
|
border-radius: 6px;
|
|
border: 1px solid #dedede;
|
|
margin-bottom: 5px;
|
|
|
|
button {
|
|
min-width: 102px;
|
|
}
|
|
}
|
|
|
|
.dark {
|
|
font-weight: bold;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
@media (max-width: 993px) {
|
|
.sys-info div:nth-child(2) {
|
|
margin: 0;
|
|
}
|
|
|
|
.sys-info div {
|
|
margin: 20px 0;
|
|
}
|
|
}
|
|
}
|
|
// SYSTEM.COMPONENT END
|
|
|
|
// QUERY.COMPONENT
|
|
app-query {
|
|
.content {
|
|
display: flex;
|
|
|
|
.clauses-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.clause-logic {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
|
|
padding: 15px;
|
|
}
|
|
|
|
.clause-query {
|
|
padding: 30px 0px 20px 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
position: relative;
|
|
|
|
& > .clr-row {
|
|
justify-content: space-between;
|
|
|
|
&:not(:last-child) {
|
|
padding-bottom: 15px;
|
|
margin-bottom: 15px;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.16)
|
|
}
|
|
}
|
|
|
|
.remove-group-clause-button {
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 10px;
|
|
color: gray;
|
|
}
|
|
|
|
.variable-col {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding-bottom: 1px;
|
|
|
|
.datalist-wrapper {
|
|
width: 100%;
|
|
|
|
input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.operator-col {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
|
|
clr-select-container {
|
|
height: 45px;
|
|
margin-top: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.value-col {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding-bottom: 1px;
|
|
|
|
.checkbox-vals {
|
|
width: 100%;
|
|
padding: 0px 5px;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
|
|
|
clr-checkbox-container {
|
|
margin-top: 0;
|
|
}
|
|
|
|
section {
|
|
max-height: 120px;
|
|
overflow-y: scroll;
|
|
}
|
|
}
|
|
|
|
.single-field-vals {
|
|
width: 100%;
|
|
|
|
.clr-control-container {
|
|
width: 100%;
|
|
|
|
.clr-input-wrapper {
|
|
max-width: none;
|
|
|
|
.clr-input-group {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
& > input {
|
|
width: 100%;
|
|
}
|
|
|
|
input[type=time] {
|
|
width: 100%;
|
|
padding-right: 17px;
|
|
}
|
|
}
|
|
|
|
.range-vals {
|
|
width: 100%;
|
|
|
|
.clr-control-container {
|
|
width: 100%;
|
|
|
|
.clr-input-wrapper {
|
|
max-width: none;
|
|
|
|
.clr-input-group {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.from {
|
|
margin-bottom: 10px;
|
|
|
|
& > input {
|
|
width: 100%;
|
|
}
|
|
|
|
input[type=time] {
|
|
width: 100%;
|
|
padding-right: 17px;
|
|
}
|
|
}
|
|
|
|
.from, .to {
|
|
min-width: 100px;
|
|
|
|
& > input {
|
|
width: 100%;
|
|
}
|
|
|
|
input[type=time] {
|
|
width: 100%;
|
|
padding-right: 17px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.contains-vals {
|
|
width: 100%;
|
|
|
|
.clr-control-container {
|
|
width: 100%;
|
|
|
|
.clr-input-wrapper {
|
|
max-width: none;
|
|
|
|
.clr-input-group {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
& > input {
|
|
width: 100%;
|
|
}
|
|
|
|
input[type=time] {
|
|
width: 100%;
|
|
padding-right: 17px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.clause-buttons {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
button {
|
|
min-width: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.invalid-clause {
|
|
border-left: 2px solid #d94b31;
|
|
}
|
|
|
|
.clause-row {
|
|
clr-icon {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.clause-row:after {
|
|
position: relative;
|
|
content: "";
|
|
height: .41667rem;
|
|
width: .41667rem;
|
|
top: .29167rem;
|
|
right: .25rem;
|
|
background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org…%2C9.84%2C3.24a0.68%2C0.68%2C0%2C1%2C1%2C1%2C1Z%22%2F%3E%0A%3C%2Fsvg%3E%0A);
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
vertical-align: middle;
|
|
margin: 0;
|
|
}
|
|
|
|
pre[class*="language-"] {
|
|
padding: 8px;
|
|
margin: 0;
|
|
border-radius: 1px;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 66px;
|
|
|
|
position: relative;
|
|
|
|
span.spinner {
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 10px;
|
|
}
|
|
|
|
code {
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
}
|
|
|
|
.input-val {
|
|
border: 0px;
|
|
background: #fbf8f8;
|
|
border-bottom: 1px solid #999999;
|
|
}
|
|
|
|
clr-date-container {
|
|
margin-top: 2px !important;
|
|
}
|
|
|
|
input[type="time"] {
|
|
border: 0;
|
|
background: transparent;
|
|
border-bottom: 1px solid #b3b3b3;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.in-values-modal {
|
|
.modal-footer {
|
|
border-top: 1px solid #d8d8d8;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.progress, .progress-static {
|
|
background-color: transparent;
|
|
width: 100%;
|
|
height: 4px;
|
|
top: 3px;
|
|
}
|
|
}
|
|
|
|
body[cds-theme="light"] {
|
|
app-query {
|
|
.clause-logic {
|
|
background: #e9e9e9;
|
|
}
|
|
|
|
.clause-query {
|
|
background: #fbf8f8;
|
|
}
|
|
}
|
|
}
|
|
|
|
body[cds-theme="dark"] {
|
|
app-query {
|
|
.line-numbers {
|
|
border-color: #989797 !important;
|
|
}
|
|
|
|
.clause-logic {
|
|
background: #192a30;
|
|
}
|
|
|
|
.clause-query {
|
|
background: #263e48;
|
|
}
|
|
}
|
|
}
|
|
// QUERY.COMPONENT END
|
|
|
|
// LOGIN.COMPONENT
|
|
app-login {
|
|
.sideBarProps {
|
|
background: $headerBackground !important;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.sideBarProps h2, .sideBarProps h3, .sideBarProps h4, .sideBarProps h5, .sideBarProps input {
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.sideBarProps button {
|
|
border-color: wheat!important;
|
|
}
|
|
|
|
.sideBarProps a {
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.login-sidebar-wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
pointer-events: none;
|
|
z-index: 10000;
|
|
|
|
>* {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.login-sidebar {
|
|
width: 400px;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background: #fff;
|
|
border-right: 1px solid #ddd;
|
|
padding: 40px;
|
|
|
|
form.login {
|
|
z-index: 101;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
|
|
.title {
|
|
font-size: 32px;
|
|
letter-spacing: normal;
|
|
line-height: 36px;
|
|
.welcome {
|
|
margin-top: 36px;
|
|
}
|
|
}
|
|
|
|
.login-group {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
padding: 48px 0 0 0;
|
|
|
|
>* {
|
|
margin: 6px 0 18px 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
-webkit-transform: translateX(-400px);
|
|
transform: translateX(-400px);
|
|
|
|
transition: -webkit-transform .3s ease;
|
|
transition: transform .3s ease;
|
|
transition: transform .3s ease, -webkit-transform .3s ease;
|
|
}
|
|
|
|
&.active {
|
|
.login-sidebar {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
z-index: 101;
|
|
}
|
|
.overlay {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
background: rgba(33, 33, 33, .5);
|
|
z-index: 100;
|
|
}
|
|
}
|
|
|
|
.login-logo {
|
|
max-width: 200px
|
|
}
|
|
}
|
|
|
|
.login-sidebar-wrapper .login-group {
|
|
.clr-control-container, .clr-input-group, .username, .password {
|
|
width: 100%;
|
|
}
|
|
|
|
.clr-input-wrapper {
|
|
max-width: none;
|
|
}
|
|
|
|
button {
|
|
max-width: none;
|
|
}
|
|
}
|
|
// LOGIN.COMPONENT END
|
|
|
|
// TERMS.COMPONENT
|
|
app-terms {
|
|
:host {
|
|
height: 100%;
|
|
background: #f5f6ff;
|
|
}
|
|
|
|
.clr-checkbox-wrapper {
|
|
&.disabled {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
|
|
.card {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 0;
|
|
|
|
.card-block {
|
|
flex: 1;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
.accept-checkbox {
|
|
padding: 10px 15px
|
|
}
|
|
}
|
|
// TERMS.COMPONENT END
|
|
|
|
// DEPLPOY.COMPONENT
|
|
app-deploy {
|
|
.card {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.btn {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.log-wrapper {
|
|
width: 100%;
|
|
background: #f0f0f0;
|
|
border: 1px solid #c9c9c9;
|
|
padding: 10px;
|
|
overflow: auto;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
#contexts-btn {
|
|
padding: 0;
|
|
min-width: 30px;
|
|
margin-left: 10px;
|
|
height: 30px;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding-top: 3px;
|
|
}
|
|
|
|
.validation-bar {
|
|
display: flex;
|
|
margin-top: 20px;
|
|
align-items: center;
|
|
|
|
clr-icon {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
.autodeploy-section {
|
|
padding: 0px 15px;
|
|
|
|
.clr-checkbox-wrapper {
|
|
margin: 20px 0 20px 0;
|
|
}
|
|
|
|
.btn-autodeploy {
|
|
display: block;
|
|
margin: 15px 0 15px 0;
|
|
}
|
|
}
|
|
}
|
|
// DEPLOY.COMPONENT END
|
|
|
|
// ALERTS.COMPONENT
|
|
app-alerts {
|
|
clr-alerts {
|
|
display: block;
|
|
}
|
|
}
|
|
// ALERTS.COMPONENT END
|
|
|
|
// MANUAL-DEPLOY.COMPONENT
|
|
app-manual-deploy {
|
|
.clear-memory-button {
|
|
right: 10px;
|
|
top: 2px;
|
|
}
|
|
}
|
|
// MANUAL-DEPLOY.COMPONENT END
|
|
|
|
// LINEAGE.COMPONENT
|
|
app-lineage {
|
|
.toggle-switch input[type=checkbox]:checked+label:before {
|
|
border-color: $headerBackground;
|
|
background-color: $headerBackground !important;
|
|
transition: .15s ease-in;
|
|
transition-property: border-color,background-color;
|
|
}
|
|
|
|
#graph{
|
|
height: calc(100vh - 195px);
|
|
overflow: hidden;
|
|
text-align: center;
|
|
display: block;
|
|
width: 100%;
|
|
border: 1px solid #e4e4e4;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.selection-wrapper {
|
|
width: 100%;
|
|
max-width: 670px;
|
|
}
|
|
|
|
.column-active {
|
|
background: #d8e3e9;
|
|
color: black;
|
|
}
|
|
|
|
.content-area {
|
|
padding: 0.5rem !important;
|
|
|
|
.card {
|
|
min-height: calc(100vh - 120px);
|
|
|
|
.card-block {
|
|
padding: 0.5rem 0.35rem !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
clr-tree-node button {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.btn-group.direction {
|
|
margin-left: var(--cds-global-space-6);
|
|
}
|
|
|
|
.graph-render-spinner {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.biglineage-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.modal-footer {
|
|
p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.lineage-title-wrapper {
|
|
left: 12px;
|
|
}
|
|
|
|
.max-depth-input {
|
|
width: 100%;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.toggle-switch-container {
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
}
|
|
// LINEAGE.COMPONENT END
|
|
|
|
// DC-TREE.COMPONENT
|
|
dc-tree {
|
|
clr-tree-node button {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
clr-tree {
|
|
.clr-tree-node-content-container {
|
|
&:focus {
|
|
.clr-treenode-link {
|
|
background: #e8e8e8;
|
|
background: var(--clr-tree-link-hover-color, #e8e8e8);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// DC-TREE.COMPONENT END
|
|
|
|
// METADATA.COMPONENT
|
|
app-metadata {
|
|
.objects-col{
|
|
height: 75vh;
|
|
overflow: scroll;
|
|
border: 1px solid #cccccc;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.cols-head {
|
|
border: 1px solid #cccccc;
|
|
padding: 10px;
|
|
display: flex;
|
|
}
|
|
.object-text {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
margin-left: 10px;
|
|
flex: 1;
|
|
}
|
|
.repo-dropdown{
|
|
margin-right: 15px;
|
|
margin-left: 15px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.clr-accordion-title{
|
|
width: 100%;
|
|
}
|
|
.float-right{
|
|
margin: 0px;
|
|
float: right;
|
|
}
|
|
.full-width{
|
|
width: 100%;
|
|
}
|
|
.object-uri{
|
|
margin: 0px;
|
|
margin-top: 5px;
|
|
}
|
|
.object-header{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-left: 3px;
|
|
padding-right: 3px;
|
|
}
|
|
.object-header:hover{
|
|
border-radius: 3px;
|
|
}
|
|
.datagrid-host{
|
|
display: unset !important;
|
|
}
|
|
|
|
.card {
|
|
margin-top: 0;
|
|
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.content-area {
|
|
padding: 0.5rem !important;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
body[cds-theme="dark"] {
|
|
app-metadata {
|
|
.object-header:hover {
|
|
background-color: #405560;
|
|
}
|
|
}
|
|
}
|
|
|
|
body[cds-theme="light"] {
|
|
app-metadata {
|
|
.objects-col {
|
|
background: white;
|
|
}
|
|
|
|
.object-header:hover {
|
|
background-color: #d8e3e9;
|
|
}
|
|
}
|
|
}
|
|
// METADATA.COMPONENT END
|
|
|
|
// LICENSING.COMPONENT
|
|
app-licensing {
|
|
height: calc(100% - 96px);
|
|
padding: 20px 20px;
|
|
|
|
.card {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.key-error {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.misskey {
|
|
color: #E74C3C;
|
|
}
|
|
|
|
.license-key-form, .activation-key-form {
|
|
padding: 0;
|
|
|
|
.clr-control-container {
|
|
width: 100%;
|
|
|
|
textarea {
|
|
width: 100%;
|
|
height: 170px;
|
|
max-height: 170px;
|
|
min-height: 170px;
|
|
resize: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.apply-keys {
|
|
height: 40px;
|
|
}
|
|
|
|
.drop-area {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 15px;
|
|
border: 2px dashed #b2b2b2;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
clr-tabs button {
|
|
box-shadow: none !important
|
|
}
|
|
}
|
|
// LICENSING.COMPONENT END
|
|
|
|
// VIEWBOXES.COMPONENT
|
|
app-viewboxes {
|
|
.licence-notice {
|
|
font-size: 14px;
|
|
display: block;
|
|
opacity: 0.6;}
|
|
|
|
clr-modal.root-modal {
|
|
.modal-body-wrapper {
|
|
height: calc(100% - 60px);
|
|
}
|
|
|
|
.modal-content {
|
|
height: 80vh;
|
|
}
|
|
|
|
.modal-footer {
|
|
padding: 0;
|
|
}
|
|
|
|
.modal-body {
|
|
max-height: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
z-index: 1300;
|
|
}
|
|
|
|
dc-tree {
|
|
overflow: auto;
|
|
flex: 1;
|
|
}
|
|
|
|
.tooltip-long {
|
|
word-break: break-word;
|
|
}
|
|
|
|
.add-new {
|
|
width: 50%;
|
|
padding-right: 5px;
|
|
|
|
> p {
|
|
margin-bottom: 1px;
|
|
}
|
|
}
|
|
|
|
.viewbox-limit-notice {
|
|
opacity: .7;
|
|
color: #E74C3C
|
|
}
|
|
|
|
.currently-open {
|
|
width: 50%;
|
|
|
|
.open-viewbox {
|
|
cursor: pointer;
|
|
padding: 3px 5px;
|
|
|
|
&.selected {
|
|
background: #3c85002e;
|
|
}
|
|
}
|
|
}
|
|
|
|
.viewboxes-container {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
pointer-events: none;
|
|
z-index: 999; // make it 1020 if there are issues
|
|
}
|
|
|
|
.viewbox {
|
|
min-width: 200px;
|
|
min-height: 200px;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
pointer-events: all;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
border-top-left-radius: 3px;
|
|
border-top-right-radius: 3px;
|
|
|
|
box-shadow: 0px 0px 10px -3px black;
|
|
|
|
&.focused {
|
|
z-index: 1100;
|
|
outline: none;
|
|
}
|
|
|
|
.content {
|
|
border: 1px solid #0000004d;
|
|
background: white;
|
|
height: 100%;
|
|
width: 100%;
|
|
flex: 1;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.drag-handle {
|
|
width: 100%;
|
|
min-height: 20px;
|
|
background-color: #3c8500;
|
|
border-top-left-radius: 3px;
|
|
border-top-right-radius: 3px;
|
|
|
|
color: #fff;
|
|
padding: 0 5px;
|
|
|
|
pointer-events: all;
|
|
|
|
.table-title {
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
min-width: 35px;
|
|
|
|
clr-icon {
|
|
cursor: pointer;
|
|
margin-left: 5px;
|
|
|
|
&:hover {
|
|
transform: scale(1.3);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.click-icon {
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
transform: scale(1.3);
|
|
}
|
|
}
|
|
|
|
.dragHandle {
|
|
position: absolute;
|
|
// bottom: -8px;
|
|
// right: -8px;
|
|
// background-color: black;
|
|
}
|
|
|
|
.dragHandle.corner {
|
|
width: 15px;
|
|
height: 15px;
|
|
cursor: nwse-resize;
|
|
}
|
|
|
|
.dragHandle.right {
|
|
width: 2px;
|
|
height: 100%;
|
|
cursor: ew-resize;
|
|
}
|
|
|
|
.dragHandle.bottom {
|
|
height: 2px;
|
|
width: 100%;
|
|
cursor: ns-resize;
|
|
}
|
|
|
|
}
|
|
|
|
.cols-search {
|
|
width: 100%;
|
|
margin-top: 5px;
|
|
|
|
border: 1px solid #00000047;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.cols-list {
|
|
border: solid 1px #ccc;
|
|
min-height: 60px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
display: block;
|
|
width: 400px;
|
|
max-width: 100%;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.col-box {
|
|
padding: 2px 10px;
|
|
border-bottom: solid 1px #ccc;
|
|
color: rgba(0, 0, 0, 0.87);
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
cursor: move;
|
|
font-size: 14px;
|
|
|
|
&.search:focus {
|
|
background: #0000001a;
|
|
}
|
|
|
|
&.primaryKeyHeaderStyle {
|
|
background: #306b0024;
|
|
}
|
|
}
|
|
|
|
.cdk-drag-preview {
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
|
|
0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
|
0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
|
z-index: 1300 !important;
|
|
}
|
|
|
|
.cdk-drag-placeholder {
|
|
opacity: 0;
|
|
}
|
|
|
|
.cdk-drag-animating {
|
|
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
|
|
.col-box:last-child {
|
|
border: none;
|
|
}
|
|
|
|
.cols-list.cdk-drop-list-dragging .col-box:not(.cdk-drag-placeholder) {
|
|
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
|
|
// FIXME
|
|
// Let's leave it here for a reference if there
|
|
// is an issue with viewboxes/filter modal overlaying
|
|
// we will remove it if no issues found
|
|
// clr-modal.filter-modal {
|
|
// ::ng-deep {
|
|
// .modal {
|
|
// z-index: 1210 !important;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
.disabled {
|
|
opacity: 0.5;
|
|
transform: none !important;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.filter-active {
|
|
color: #0072a3;
|
|
}
|
|
|
|
hot-table {
|
|
.firstColumnHeaderStyle button.changeType {
|
|
display: none;
|
|
}
|
|
|
|
.handsontable tbody th.ht__highlight, .handsontable thead th.ht__highlight {
|
|
&.primaryKeyHeaderStyle {
|
|
background: #306b00b0;
|
|
}
|
|
}
|
|
|
|
.primaryKeyHeaderStyle {
|
|
background: #306b006e;
|
|
}
|
|
|
|
th.readonlyCell {
|
|
div {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
td.readonlyCell {
|
|
opacity: 0.5
|
|
}
|
|
}
|
|
}
|
|
|
|
body[cds-theme="dark"] {
|
|
app-viewboxes {
|
|
.currently-open .open-viewbox:hover {
|
|
background: #314b57;
|
|
}
|
|
|
|
.cols-list {
|
|
background: #314b57;
|
|
color: #fff;
|
|
border-color: #858585;
|
|
}
|
|
|
|
.col-box {
|
|
background: #314b57;
|
|
border-color: #858585;
|
|
color: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
body[cds-theme="light"] {
|
|
app-viewboxes {
|
|
.currently-open .open-viewbox:hover {
|
|
background: #e8e8e8;
|
|
}
|
|
|
|
.cols-list {
|
|
background: #fff;
|
|
}
|
|
|
|
.col-box {
|
|
background: #fff;
|
|
}
|
|
}
|
|
}
|
|
// VIEWBOXES.COMPONENT END
|
|
|
|
// AUTOMATIC-DEPLOY.COMPONENT
|
|
app-automatic-deploy {
|
|
.auto-deploy {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
|
|
z-index: 100;
|
|
}
|
|
|
|
.spinner-box {
|
|
width: 400px;
|
|
padding: 20px;
|
|
border-radius: 3px;
|
|
background: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
box-shadow: 1px 1px 8px 0px #00000082;
|
|
|
|
.buttons {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.deploy-status-row {
|
|
display: flex;
|
|
align-items: center;
|
|
align-self: flex-start;
|
|
|
|
p {
|
|
margin: 0 0 0 10px;
|
|
}
|
|
}
|
|
|
|
.deploy-success {
|
|
color: #6ECF44;
|
|
}
|
|
|
|
.deploy-error {
|
|
color: #E74C3C;
|
|
// width: 20px;
|
|
// height: 20px;
|
|
}
|
|
|
|
.deploy-undeterminated {
|
|
color: #cacaca;
|
|
}
|
|
|
|
hr {
|
|
border: 0;
|
|
border-bottom: 1px solid #00000045;
|
|
}
|
|
}
|
|
// AUTOMATIC-DEPLOY.COMPONENT END
|
|
|
|
// INFO-MODAL.COMPONENT
|
|
app-info-modal {
|
|
.clr-abort-modal {
|
|
.modal {
|
|
z-index: 2050;
|
|
}
|
|
|
|
.modal-title-wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
.modal {
|
|
z-index: 2050;
|
|
}
|
|
}
|
|
|
|
.modal-title {
|
|
position: relative;
|
|
}
|
|
|
|
.sasService {
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 10px;
|
|
margin: 0;
|
|
}
|
|
|
|
.modal-footer {
|
|
position: relative;
|
|
border-top: 1px solid #dcdcdc;
|
|
}
|
|
|
|
.systext {
|
|
overflow: auto;
|
|
margin-top: 20px;
|
|
padding: 10px 0;
|
|
border-top: 1px solid #dcdcdc;
|
|
|
|
p {
|
|
margin-top: 0;
|
|
word-wrap: break-word;
|
|
}
|
|
}
|
|
}
|
|
// INFO-MODAL.COMPONENT END
|
|
|
|
// EDIT-RECORD.COMPONENT
|
|
app-edit-record {
|
|
.record-edit-modal {
|
|
.column-entry {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.name-input-row {
|
|
width: 100%;
|
|
max-width: 260px;
|
|
|
|
.cell-desc {
|
|
margin-right: 30px;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.inputs-wrapper {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
>*:not(.date-field):not(clr-select-container) {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
p {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.clr-textarea-wrapper {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.clr-form-control {
|
|
margin-top: 0px !important;
|
|
}
|
|
|
|
app-soft-select {
|
|
display: block;
|
|
width: 224px;
|
|
border: 1px solid #999;
|
|
color: #000;
|
|
padding: calc(.25rem + 2px) .5rem;
|
|
border-radius: .125rem;
|
|
font-size: .541667rem;
|
|
margin-right: 6px;
|
|
|
|
input {
|
|
width: 100%;
|
|
border: 0;
|
|
|
|
&:focus {
|
|
background: none;
|
|
border: 0 !important;
|
|
}
|
|
|
|
&::-webkit-outer-spin-button,
|
|
&::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:first-child p:first-child {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.date-field {
|
|
position: relative;
|
|
display: inline-block;
|
|
|
|
textarea {
|
|
width: 230px;
|
|
}
|
|
|
|
.date-picker {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 4px;
|
|
|
|
// clr-datepicker-view-manager {
|
|
// transform: unset !important;
|
|
// left: unset !important;
|
|
// right: 70px !important;
|
|
// }
|
|
.clr-input-group {
|
|
border: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-body {
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
clr-select-container {
|
|
border: 1px solid #999;
|
|
color: #000;
|
|
border-radius: .125rem;
|
|
margin-right: 5px;
|
|
|
|
.clr-select-wrapper {
|
|
max-height: unset;
|
|
|
|
&::after {
|
|
top: 15px;
|
|
}
|
|
}
|
|
|
|
select {
|
|
height: auto;
|
|
padding: 10px;
|
|
padding-right: 20px;
|
|
border: 0 !important;
|
|
|
|
&:focus {
|
|
background: 0 0 !important;
|
|
}
|
|
&:hover {
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
clr-input-container {
|
|
width: 224px;
|
|
border: 1px solid #999;
|
|
color: #000;
|
|
padding: calc(.25rem + 2px) .5rem;
|
|
border-radius: .125rem;
|
|
font-size: .541667rem;
|
|
margin-right: 6px;
|
|
|
|
.clr-input-group {
|
|
width: 100%;
|
|
border: 0;
|
|
}
|
|
|
|
input {
|
|
width: 100%;
|
|
border: 0;
|
|
|
|
&:focus {
|
|
background: none;
|
|
border: 0 !important;
|
|
}
|
|
|
|
&::-webkit-outer-spin-button,
|
|
&::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
&.invalid-data {
|
|
border-color: red;
|
|
}
|
|
}
|
|
|
|
.modal-dialog {
|
|
width: 80vw;
|
|
}
|
|
|
|
.clr-control-container {
|
|
width: 100%;
|
|
|
|
textarea {
|
|
width: 100%;
|
|
resize: none;
|
|
border-color: #999;
|
|
|
|
&.invalid-data {
|
|
border-color: red;
|
|
outline: 0;
|
|
}
|
|
|
|
&.not-char {
|
|
font-family: "Lucida Console", Monaco, monospace;
|
|
}
|
|
}
|
|
}
|
|
|
|
.generate-record-url {
|
|
right: 40px;
|
|
top: 40px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.generate-record-url-button {
|
|
right: 25px;
|
|
top: 5px;
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 0 0 1rem 0;
|
|
}
|
|
|
|
.modal-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
// height: 65px;
|
|
|
|
.alert {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.prev-next {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
button {
|
|
margin: 0px 10px;
|
|
}
|
|
}
|
|
|
|
.focusable {
|
|
&:focus {
|
|
box-shadow: 0 0 3px 0px #5aa220;
|
|
}
|
|
}
|
|
|
|
.entry-input-left-offset {
|
|
left: -30px;
|
|
}
|
|
|
|
.validation-info-alert {
|
|
width: 310px
|
|
}
|
|
}
|
|
// EDIT-RECORD.COMPONENT END
|
|
|
|
// AUTOCOMPLETE.COMPONENT
|
|
app-autocomplete {
|
|
.input-val {
|
|
border: 0px;
|
|
background: transparent;
|
|
border-bottom: 1px solid #999999;
|
|
}
|
|
|
|
input {
|
|
width: 100%;
|
|
outline: none;
|
|
|
|
&::-webkit-calendar-picker-indicator {
|
|
margin-top: -5px;
|
|
}
|
|
}
|
|
|
|
.autocomplete-wrapper {
|
|
.overlay {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 1500;
|
|
}
|
|
|
|
.datalist {
|
|
position: fixed;
|
|
box-shadow: 0px 3px 10px -1px #0000002b;
|
|
overflow: auto;
|
|
z-index: 2000;
|
|
|
|
option {
|
|
padding: 5px 10px;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: #0000000f;
|
|
}
|
|
|
|
&.focused {
|
|
background: #0000000f;
|
|
}
|
|
}
|
|
}
|
|
|
|
.load-more {
|
|
text-align: center;
|
|
border-top: 1px solid #e6e6e6;
|
|
}
|
|
}
|
|
}
|
|
|
|
body[cds-theme="dark"] {
|
|
app-autocomplete {
|
|
.datalist {
|
|
background: #21333b;
|
|
border: 1px solid #575757;
|
|
}
|
|
|
|
input {
|
|
color: #fff;
|
|
}
|
|
|
|
.datalist option {
|
|
color: #fff
|
|
}
|
|
}
|
|
}
|
|
|
|
body[cds-theme="light"] {
|
|
app-autocomplete {
|
|
.datalist {
|
|
background: #fff;
|
|
}
|
|
}
|
|
}
|
|
// AUTOCOMPLETE.COMPONENT END
|
|
|
|
// CONTACT-LINK.COMPONENT
|
|
app-contact-link {
|
|
.unset {
|
|
color: unset;
|
|
}
|
|
}
|
|
// CONTACT-LINK.COMPONENT END
|
|
|
|
// DATASET-INFO.COMPONENT
|
|
app-dataset-info {
|
|
.modal-body {
|
|
clr-tabs {
|
|
max-height: 70vh;
|
|
}
|
|
|
|
.tab-content {
|
|
width: 100%;
|
|
overflow: auto;
|
|
|
|
.datagrid-outer-wrapper {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
clr-modal {
|
|
.modal-dialog {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.clickable-row {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.datagrid-table .datagrid-cell:focus {
|
|
outline: none;
|
|
outline-offset: 0;
|
|
}
|
|
}
|
|
// DATASET-INFO.COMPONENT END
|
|
|
|
// UPLOAD-STARTER.COMPONENT
|
|
app-upload-stater {
|
|
display: block;
|
|
|
|
p {
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
}
|
|
// UPLOAD-STARTER.COMPONENT END
|
|
|
|
// APPROVE-DETAILS.COMPONENT
|
|
app-approve-details {
|
|
.loader {
|
|
display:flex;
|
|
justify-content: center;
|
|
height:75vh;
|
|
align-items:center;
|
|
flex-direction:column
|
|
}
|
|
.modalLarge {
|
|
width: 50rem!important;
|
|
}
|
|
|
|
.addedRow {
|
|
border: 1px solid rgba(9, 77, 117, 0.2);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.deletedRow {
|
|
border: 1px solid rgba(70, 71, 70, 0.2);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.updatedRow {
|
|
border: 1px solid rgba(9, 117, 9, 0.2);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.table {
|
|
border: 0px solid;
|
|
}
|
|
|
|
.ch {
|
|
background: rgba(0,0,0,.1);
|
|
border: 1px solid rgba(104, 100, 0, 0.4);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.ch:hover {
|
|
background: rgba(252, 135, 120, 0.4);
|
|
}
|
|
|
|
.tooltip .tooltip-content.tooltip-top-right, .tooltip.tooltip-top-right>.tooltip-content, .tooltip>.tooltip-content {
|
|
font-size: .54167rem;
|
|
font-weight: 400;
|
|
letter-spacing: normal;
|
|
background: $headerBackground;
|
|
border-radius: .125rem;
|
|
color: #f0f1ec;;
|
|
line-height: .75rem;
|
|
margin: 0;
|
|
padding: .375rem .5rem;
|
|
width: 235px;
|
|
position: absolute;
|
|
top: auto;
|
|
bottom: 100%;
|
|
left: 12px;
|
|
right: auto;
|
|
border-bottom-left-radius: 0;
|
|
margin-bottom: .66667rem;
|
|
}
|
|
|
|
.tooltip .tooltip-content.tooltip-top-right:before, .tooltip.tooltip-top-right>.tooltip-content:before, .tooltip>.tooltip-content:before {
|
|
position: absolute;
|
|
bottom: -.375rem;
|
|
left: 0;
|
|
top: auto;
|
|
right: auto;
|
|
content: "";
|
|
border-left: .25rem solid $headerBackground;
|
|
border-top: .20833rem solid $headerBackground;
|
|
border-right: .25rem solid transparent;
|
|
border-bottom: .20833rem solid transparent;
|
|
}
|
|
|
|
.table {
|
|
border: 0px solid;
|
|
}
|
|
|
|
.toggle-switch input[type=checkbox]:checked+label:before {
|
|
border-color: $headerBackground;
|
|
background-color: $headerBackground !important;
|
|
transition: .15s ease-in;
|
|
transition-property: border-color,background-color;
|
|
}
|
|
|
|
.tableCont {
|
|
overflow:auto;
|
|
margin: 15px 10px 10px 10px;
|
|
|
|
td {
|
|
word-break: break-word;
|
|
}
|
|
}
|
|
|
|
.approvalInfo {
|
|
display: flex;
|
|
justify-content: flex-end
|
|
}
|
|
|
|
.approvalBack {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
@media screen and (max-width:768px) {
|
|
.approvalInfo {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 15px;
|
|
|
|
}
|
|
|
|
.approvalBack {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.card {
|
|
margin-top:0rem!important;
|
|
min-height: calc(100vh - 0px)!important;
|
|
}
|
|
|
|
.table td.left, .table th.left {
|
|
text-align: left;
|
|
width: 150px!important;
|
|
flex: 0
|
|
}
|
|
}
|
|
|
|
.table td.left, .table th.left {
|
|
text-align: left;
|
|
flex: 1;
|
|
width: 300px!important;
|
|
}
|
|
|
|
|
|
.tooll {
|
|
position: absolute;
|
|
background: #e6b3b3;
|
|
color: $headerBackground;
|
|
top: 0px;
|
|
height: 36px;
|
|
width: 100%;
|
|
left: 0px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
#acceptBtn, #rejectBtn {
|
|
width: 175px
|
|
}
|
|
|
|
.formatted-values-toggle {
|
|
min-width: 75px
|
|
}
|
|
|
|
clr-modal {
|
|
.modal-body-wrapper {
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
.rows-notice {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 10px;
|
|
color: #6a6a6a;
|
|
font-size: 15px;
|
|
|
|
clr-icon {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
body[cds-theme="dark"] {
|
|
app-approve-details {
|
|
table {
|
|
.updatedRow {
|
|
background: #93971e;
|
|
}
|
|
|
|
.addedRow {
|
|
background: rgb(86 153 95);
|
|
}
|
|
|
|
.deletedRow {
|
|
background: rgb(138 90 90);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
body[cds-theme="light"] {
|
|
app-approve-details {
|
|
table {
|
|
.updatedRow {
|
|
background: #fafda8;
|
|
}
|
|
|
|
.addedRow {
|
|
background: rgb(146, 208, 154);
|
|
}
|
|
|
|
.deletedRow {
|
|
background: rgb(230, 179, 179);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// APPROVE-DETAILS.COMPONENT END
|
|
|
|
// VIYA-API-EXPLORER.COMPONENT
|
|
app-viya-api-explorer {
|
|
.api-collection-dropdown {
|
|
margin-left: 15px;
|
|
margin-right: 15px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.json-area {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
> ngx-json-viewer {
|
|
height: 100%;
|
|
|
|
> .ngx-json-viewer {
|
|
overflow: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.json-toggle {
|
|
position: absolute;
|
|
left: 10px;
|
|
margin: 0;
|
|
}
|
|
|
|
.endpoint-breadcrums {
|
|
margin: 0;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.query-params {
|
|
input {
|
|
width: 70px;
|
|
}
|
|
}
|
|
}
|
|
// VIYA-API-EXPLORER.COMPONENT END
|
|
|
|
// LOADING-INDICATOR.COMPONENT
|
|
// there are no clear instructions how to use Clarity ui variables
|
|
$clr-header-height: 2.5rem;
|
|
$clr-dark-gray: #565656;
|
|
$clr-red: #c92100;
|
|
$clr-yellow: rgb(233, 191, 4);
|
|
$clr-green: #60b515;
|
|
|
|
app-loading-indicator {
|
|
.loading-indicator {
|
|
line-height: $clr-header-height;
|
|
height: $clr-header-height;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
margin-right: 10px;
|
|
|
|
.spinner {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
clr-signpost-content {
|
|
line-height: 24px;
|
|
color: $clr-dark-gray;
|
|
cursor: auto;
|
|
|
|
p {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
span {
|
|
margin-left: 10px;
|
|
|
|
&.running {
|
|
color: $clr-yellow;
|
|
}
|
|
&.success {
|
|
color: $clr-green;
|
|
}
|
|
&.fail {
|
|
color: $clr-red;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// LOADING-INDICATOR.COMPONENT END
|
|
|
|
// EXCEL-PASSWORD-MODAL.COMPONENT
|
|
app-excel-password-modal {
|
|
.excel-password-root {
|
|
.modal {
|
|
z-index: 1060;
|
|
}
|
|
}
|
|
|
|
.modal-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.buttons {
|
|
display: flex;
|
|
gap: 5px;
|
|
}
|
|
}
|
|
}
|
|
// EXCEL-PASSWORD-MODAL.COMPONENT END
|
|
|
|
// STAGE.COMPONENT
|
|
app-stage {
|
|
.rejected {
|
|
color: #f83126;
|
|
font-weight: bold
|
|
}
|
|
|
|
.accepted {
|
|
color: #3fc424;
|
|
font-weight: bold
|
|
}
|
|
|
|
.baseTableLink {
|
|
cursor:pointer;
|
|
margin-top:10px;
|
|
color: #007cbb;
|
|
}
|
|
}
|
|
|
|
body[cds-theme="dark"] {
|
|
app-stage {
|
|
.baseTableLink {
|
|
color: #4ec0ff;
|
|
}
|
|
}
|
|
}
|
|
// STAGE.COMPONENT END
|
|
|
|
// SOFT-SELECT.COMPONENT
|
|
app-soft-select {
|
|
.input-val {
|
|
border: 0px;
|
|
background: transparent;
|
|
border-bottom: 1px solid #999999;
|
|
}
|
|
|
|
input {
|
|
width: 100%;
|
|
outline: none;
|
|
|
|
&::-webkit-calendar-picker-indicator {
|
|
margin-top: -5px;
|
|
}
|
|
}
|
|
|
|
clr-date-container {
|
|
position: relative;
|
|
margin-top: 2px !important;
|
|
|
|
.clr-input-group-icon-action {
|
|
position: absolute;
|
|
right: -5px;
|
|
}
|
|
|
|
input::-webkit-calendar-picker-indicator {
|
|
margin-right: 20px;
|
|
margin-top: -5px;
|
|
}
|
|
}
|
|
|
|
label.secondLabelActive span {
|
|
&:not(.value-type-selected) {
|
|
text-decoration: line-through;
|
|
cursor: pointer;
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
}
|
|
// SOFT-SELECT.COMPONENT END
|
|
|
|
// SASJS-CONFIGURATOR.COMPONENT
|
|
app-sasjs-configurator {
|
|
.clr-control-container {
|
|
width: 50vw;
|
|
}
|
|
|
|
.clr-input-wrapper {
|
|
width: 100%;
|
|
|
|
input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.thinProgress {
|
|
left: 0px;
|
|
right: 0;
|
|
width: unset;
|
|
height: 1px;
|
|
margin-top: 0 !important;
|
|
|
|
&::after {
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
// SASJS-CONFIGURATOR.COMPONENT END
|
|
|
|
// HEADER-ACTIONS.COMPONENT
|
|
$clr-header-height: 3rem;
|
|
$clr-near-white: #fafafa;
|
|
$clr-dark-gray: #565656;
|
|
$clr-light-gray: #eee;
|
|
|
|
app-header-actions {
|
|
display: contents;
|
|
|
|
.copyRight {
|
|
margin-top: 10px;
|
|
|
|
span {
|
|
word-break: break-word;
|
|
white-space: pre-wrap;
|
|
width: 100%;
|
|
text-align: center;
|
|
line-height: 1.5;
|
|
}
|
|
}
|
|
|
|
.user-nav-toggle {
|
|
padding: 0 10px !important;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.app-nav-dropdown {
|
|
//left padding for branding is also 24px
|
|
padding-right: 15px;
|
|
line-height: $clr-header-height;
|
|
height: $clr-header-height;
|
|
|
|
>button.dropdown-toggle {
|
|
color: $clr-near-white;
|
|
position: relative;
|
|
|
|
&:after {
|
|
content: "";
|
|
background-color: $clr-near-white;
|
|
opacity: .15;
|
|
left: 0;
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 40px;
|
|
top: 10px;
|
|
}
|
|
|
|
.badge {
|
|
&.hidden {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
clr-dropdown-menu {
|
|
color: $clr-dark-gray;
|
|
padding-bottom: 0;
|
|
|
|
.separator {
|
|
margin: 10px 0;
|
|
border-bottom: 1px solid gray;
|
|
// border-bottom: 1px solid $clr-dark-gray;
|
|
}
|
|
|
|
.dropdown-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
position: relative;
|
|
height: 45px;
|
|
line-height: 40px;
|
|
|
|
|
|
.badge {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 26px;
|
|
margin-right: 0;
|
|
}
|
|
|
|
&.debug-switch-item {
|
|
padding: 0;
|
|
}
|
|
|
|
.toggle-switch {
|
|
margin: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.clr-logout{
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 15px;
|
|
}
|
|
|
|
.clr-control-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
clr-toggle-wrapper {
|
|
width: 100%;
|
|
margin: 0;
|
|
height: 100%;
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
input {
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
// width: 100%;
|
|
// height: 100%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.clr-toggle-wrapper input[type=checkbox]+label::after {
|
|
transition: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.debug-toggle-label {
|
|
padding-left: 42px;
|
|
}
|
|
|
|
@media (max-width: 768px){
|
|
.sidenav-content{
|
|
a.nav-link.active {
|
|
color: inherit;
|
|
padding: 15px;
|
|
background: #565656;
|
|
}
|
|
}
|
|
}
|
|
.nav-link.d-block{
|
|
span.badge{
|
|
position: absolute;
|
|
}
|
|
|
|
}
|
|
.avatar-img{
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-left: 10px;
|
|
border-radius: 50px;
|
|
}
|
|
}
|
|
// HEADER-ACTIONS.COMPONENT END
|
|
|
|
// END OF CSP WORKAROUND
|
|
|
|
body[cds-theme="dark"] {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: $trackColor $thumbColor;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 11px;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
// Track
|
|
background: $trackColor;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
// Thumb
|
|
background-color: $thumbColor;
|
|
border-radius: 6px;
|
|
// Track
|
|
border: 3px solid $trackColor;
|
|
}
|
|
|
|
clr-icon.is-highlight {
|
|
fill: #4ec0ff;
|
|
}
|
|
}
|
|
|
|
body,
|
|
html {
|
|
font-weight: 400 !important;
|
|
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
&.should-login {
|
|
clr-modal {
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
body[cds-theme="dark"] {
|
|
button {
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 1px solid rgb(255, 255, 255)
|
|
}
|
|
}
|
|
}
|
|
|
|
body[cds-theme="light"] {
|
|
button {
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 1px solid rgb(0, 0, 0)
|
|
}
|
|
}
|
|
}
|
|
|
|
.select-table-icon {
|
|
width: 80px;
|
|
}
|
|
|
|
.select-library-icon {
|
|
width: 80px;
|
|
}
|
|
|
|
[cds-text=label] {
|
|
color: var(--cds-global-typography-color-200);
|
|
}
|
|
|
|
[cds-text=labelLink] {
|
|
line-height: 1.8 !important;
|
|
}
|
|
|
|
[cds-text=caption_clean] {
|
|
font-size: var(--cds-global-typography-caption-font-size);
|
|
font-weight: var(--cds-global-typography-caption-font-weight);
|
|
line-height: var(--cds-global-typography-caption-line-height);
|
|
letter-spacing: var(--cds-global-typography-caption-letter-spacing);
|
|
|
|
&::after, &::before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.log-wrapper {
|
|
min-height: 50px;
|
|
padding: 10px;
|
|
margin-top: 10px;
|
|
|
|
white-space: pre-wrap;
|
|
border-radius: 3px;
|
|
|
|
border: 1px solid $codeBorder;
|
|
|
|
height: 48vh;
|
|
overflow: auto;
|
|
}
|
|
|
|
// 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: $headerBackground;
|
|
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-100-i {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.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-20 {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.ml-0 {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.ml-3 {
|
|
margin-left: 3px;
|
|
}
|
|
|
|
.ml-5 {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.ml-5-i {
|
|
margin-left: 5px !important;
|
|
}
|
|
|
|
.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-5i {
|
|
margin-right: 5px !important;
|
|
}
|
|
|
|
.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-10-i {
|
|
margin-bottom: 10px !important;
|
|
}
|
|
|
|
.mb-15 {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
body[cds-theme="light"] {
|
|
.color-gray {
|
|
color: #5a5a5a;
|
|
}
|
|
|
|
.color-dark-gray {
|
|
color: #495967;
|
|
}
|
|
|
|
.color-darker-gray {
|
|
color: $headerBackground;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.whitespace-nowrap {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
}
|
|
|
|
.text-area-full-width {
|
|
.clr-control-container {
|
|
width: 100%;
|
|
|
|
textarea {
|
|
width: 100%;
|
|
|
|
}
|
|
}
|
|
|
|
clr-textarea-container {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.clr-textarea-wrapper {
|
|
margin: 0 !important;
|
|
}
|
|
}
|
|
|
|
.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: 0.583333rem;
|
|
min-height: 0.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: 0.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: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 .clr-loading-btn-content {
|
|
justify-content: center;
|
|
}
|
|
|
|
.btn.btn-danger,
|
|
.btn.btn-warning {
|
|
border-color: #ef4f2e;
|
|
background-color: #d94b2e;
|
|
color: #fff;
|
|
}
|
|
|
|
// Vertical align fix for small buttons with icons
|
|
.btn.btn-sm:has(clr-icon) {
|
|
line-height: 2;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.htCustomHidden {
|
|
display: none;
|
|
}
|
|
|
|
body[cds-theme="dark"] {
|
|
.htDark {
|
|
background: #888;
|
|
color: #fff;
|
|
}
|
|
|
|
.handsontable .htDark {
|
|
background: #3c5662;
|
|
color: #eee;
|
|
}
|
|
|
|
.handsontable .darkTH {
|
|
&:not(.primaryKeyHeaderStyle) {
|
|
background: #487d96;
|
|
color: #eee;
|
|
}
|
|
|
|
&.ht__highlight {
|
|
background: #3b6b81;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.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;
|
|
}
|
|
|
|
.handsontable .numericListbox {
|
|
text-align: right;
|
|
}
|
|
|
|
.margin-top-20 {
|
|
margin-top: 20px;
|
|
}
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
.unvisible {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.no-borders {
|
|
border: 0;
|
|
}
|
|
|
|
.card {
|
|
&.no-borders {
|
|
border: 0;
|
|
box-shadow: none;
|
|
|
|
.card-header, .card-block, .card-footer {
|
|
border: 0;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
&.no-inner-borders {
|
|
.card-header, .card-block, .card-footer {
|
|
border: 0;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@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: var(--clr-vertical-nav-bg-color);
|
|
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;
|
|
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-bottom: 3px;
|
|
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;
|
|
}
|
|
|
|
body[cds-theme="dark"] {
|
|
.table-search-wrapper {
|
|
// background: #2d4048;
|
|
background: #21333b;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
[name="search-input"] {
|
|
padding-right: 25px;
|
|
}
|
|
}
|
|
|
|
clr-input-container {
|
|
margin-top: -5px;
|
|
margin-right: 0;
|
|
|
|
label {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
clr-checkbox-container {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* 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;
|
|
} |