scripts/apps/ingest/styles/dashboard.scss
// Styling for the ingest dashboard
// ----------------------------------------------------------------------------------------
@import '~mixins.scss';
@import '~variables.scss';
// Ingest dashboard
// -------------------------------------------------
.ingest-dashboard {
padding: 40px;
overflow: auto;
.card-list {
display: flex;
flex-wrap: wrap;
}
.card-list > li {
width: 240px;
margin: 10px;
padding: 0px;
position: relative;
flex: 0 0 auto;
&:hover {
cursor: default;
}
.card-list__controls {
position: absolute;
inset-block-start: 7px;
inset-inline-end: 1px;
}
.header {
height: 110px;
background: var(--sd-colour-bg--02);
padding: 16px;
color: $white;
border-radius: var(--b-radius--medium) var(--b-radius--medium) 0 0;
.title {
padding-block-end: 6px;
font-weight: 500;
}
.sub-title {
color: hsla(0, 0%, 100%, 0.5);
.text {
color: hsla(0, 0%, 100%, 0.75);
font-weight: 500;
}
}
}
.status {
color: $white;
font-size: 14px;
padding: 10px 15px;
min-height: 36px;
box-sizing: content-box;
.time {
font-size: 11px;
}
&.opened {
background: #107401;
}
&.closed {
background: #970000;
}
.uppercase {
padding-inline-end: .3em;
}
}
.ingested-count {
padding: 10px 16px;
text-align: center;
border-block-end: 1px solid var(--sd-colour-line--light);
.count {
font-size: 30px;
line-height: 34px;
font-weight: 500;
}
.text {
font-size: 11px;
color: var(--color-text-light);
}
}
.update-time {
padding: 0 15px 10px 15px;
border-block-end: 1px solid var(--sd-colour-line--light);
.text {
margin-block-start: 10px;
font-size: 12px;
text-transform: uppercase;
color: var(--color-text-light);
font-weight: 500;
}
.time {
font-size: 11px;
}
}
.error {
word-wrap: break-word;
color: $red;
padding: 5px;
}
.toggle-box {
margin: 10px;
header {
&:before {
display: none;
}
h6 {
background: none;
}
i {
opacity: 0.6;
}
.chevron {
background-color: hsl(0, 0%, 100%);
}
}
}
}
}