scripts/apps/monitoring/styles/monitoring.scss
@import '~mixins.scss';
@import '~variables.scss';
.monitoring {
position: absolute;
inset-block-start: $nav-height;
inset-inline-start: 0;
inset-inline-end: 0;
inset-block-end: 0;
.sortbar.sortbar-custom-sort-groups {
.dropdown {
vertical-align: middle;
.dropdown__menu li small {
font-weight: 300;
font-style: italic;
color: $grayLight;
margin-inline-start: 1em;
}
}
.direction {
display: inline-block !important; // take up space when it's hidden
}
}
.subnav {
inset-block-start: 0;
.dropdown {
.dropdown {
min-width: 120px;
float: inline-end;
}
.direction {
line-height: 18px;
margin-inline-start: 15px;
}
}
.navbtn {
&.btnRearrange {
width: 80px !important;
}
}
.title {
text-transform: uppercase;
}
}
.main-section {
inset-block-start: 0;
.content-list {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
inset-inline-end: 0;
inset-block-end: 0;
overflow-y: auto;
@include transition(all .3s);
@include border-box();
padding: 0!important;
&.monitoring__content {
display: flex;
flex-direction: column;
}
.list {
padding-block-start: 9px
}
.stage {
padding: 0;
margin: 9px 0;
}
.single-group {
.stage {
margin: 0;
}
}
.stage-content {
max-height: 100%;
overflow-y: auto;
box-shadow: $block-shadow-depth-2;
&:focus {
box-shadow: 0 0 10px 0 hsla(0, 0%, 0%, 0.32);
outline: 1px solid var(--sd-colour-line--strong);
}
.compact-view, .mlist-view {
box-shadow: none;
}
&.refresh {
border: 1px solid var(--sd-colour-interactive);
box-shadow: 0 0 10px 0 var(--sd-colour-interactive);
}
.list-view {
margin-block-end: 0;
// &.list-without-items {
// li {
// height: 40px;
// display: flex;
// align-items: center;
// justify-content: center;
// text-align: center;
// color: var(--color-text-lighter);
// }
// }
}
}
.inline-content-items {
@include border-box();
max-height: calc(100vh - 180px) !important;
}
}
.monitoring__toolbar-container {
flex-shrink: 1;
position: relative;
}
.monitoring__main-content {
position: relative;
flex-grow: 1;
display: flex;
overflow-y: auto;
}
}
}
.workspace {
.main-section {
.sd-preview-panel {
width: 0;
transition: all ease-in-out 0.2s;
}
[sd-item-preview] {
opacity: 0;
transition: all ease-in-out 0.4s;
}
.content-item-preview {
position: absolute;
z-index: 1;
inset-block-start: 0;
inset-inline-end: 0;
inset-block-end: 0;
width: $sidepreview-width + 160;
@media only screen and (max-width : 1430px) {
width: $sidepreview-width - 40;
}
.shift-preview__toggle {
display: none;
}
}
&.with-preview {
.sd-preview-panel {
width: $sidepreview-width + 160;
@media only screen and (max-width : 1430px) {
width: $sidepreview-width - 40;
}
flex-shrink: 0;
}
[sd-item-preview] {
position: relative;
width: 100%;
height: 100%;
opacity: 1;
&.sd-preview--overlay {
height: auto;
position: absolute;
overflow: visible;
inset-block-start: 9.6rem;
inset-inline-end:0;
inset-block-end: 0;
width: 0;
z-index: 3;
.content-item-preview {
width: $sidepreview-width - 80;
transition: all ease-in-out 0.2s;
overflow-y: visible !important;
inset-inline-end: 80 - $sidepreview-width - 4;
box-shadow: inset 3px 0 2px -1px rgba(0, 0, 0, 0.12), 2px 0 8px 0 rgba(0, 0, 0, 0.3), 0 0 2px 0 rgba(0, 0, 0, 0.12);
&.shift {
inset-inline-end:0;
box-shadow: -2px 0 8px 0 rgba(0, 0, 0, 0.3), 0 0 2px 0 rgba(0, 0, 0, 0.12);
}
.shift-preview__toggle {
display: inline-block;
}
}
}
}
.compact {
.content-list {
overflow-y: visible;
}
}
}
&.search-page-container {
.content-item-preview {
inset-block-start: $nav-height;
}
}
&.search {
.preview-layout {
[sd-item-preview] {
opacity: 1;
transition: all ease-in-out 0.4s;
}
&.closed {
opacity: 1;
}
}
}
}
}
.shift-preview__toggle {
position: absolute;
display: none;
width: 24px;
height: 48px;
padding: 0;
inset-block-start: 0;
inset-inline-end: -24px;
border: 0;
line-height: 0;
opacity: .65;
background-color: $white;
@include border-radius(0 2px 2px 0);
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2), 2px 0 10px 0 rgba(0, 0, 0, 0.3);
i { height: 15px; }
&:hover {
opacity: 1;
background-color: $sd-blue;
i { color: $white; }
}
&.shift {
inset-block-start: 1px;
@include border-radius(2px 0 0 2px);
@include box-shadow(-1px 0px 7px 0px rgba(0, 0, 0, 0.3));
@include rotate(180deg);
}
}
.workspace.authoring {
.main-section {
.content-item-preview {
width: $sidepreview-width;
@media only screen and (max-width : 1630px) {
width: $sidepreview-width - 40;
}
}
&.with-preview {
.sd-preview-panel {
width: $sidepreview-width;
@media only screen and (max-width : 1630px) {
width: $sidepreview-width - 40;
}
}
.navbtn {
&.btnRearrange {
width: 80px !important;
@media only screen and (max-width : 1430px) {
display: none !important;
}
}
}
}
}
}
.monitoring {
.sd-grid-group:not(.refresh) {
box-shadow: none !important;
.sd-grid-list {
margin: 1.4rem;
}
}
}
.sd-kanban-list-container {
height: 100%;
}
.sd-kanban-list {
overflow: auto;
.fix-stage { // there should be no div for .stage, but it's needed for list view
flex: 1 1 0;
}
}
.notification-container {
display: inline-flex !important;
vertical-align: sub;
margin-block-start: 2px;
}
.monitoring-dropdown {
.dropdown__menu {
margin-block-start: 5px;
max-width: 220px !important;
}
a {
padding: 0px !important;
white-space: inherit !important;
display: inline !important;
.headline {
color: $sd-blue !important;
}
}
.buttons {
margin: 4px 0;
height: 1%;
overflow: hidden;
}
.acknowledge {
width: auto;
display: inline;
float: inline-end;
}
.title {
padding-block-end: 6px;
margin-inline-start: 15px;
@include text-semibold();
text-transform: uppercase;
font-size: 13px;
color: $sd-text;
}
li {
display: block;
padding: 5px 15px 5px 20px;
border-block-end: 1px solid var(--sd-colour-line--light);
.slugline {
font-weight: 500;
color: #216278;
text-transform: uppercase;
font-size: 12px;
margin-inline-end: 10px;
white-space: nowrap;
}
.headline, .desk, .stage {
color: #686b6c;
}
.location {
border-block-start: 1px solid #ebebeb;
margin-block-start: 10px;
}
.sender {
margin-block-start: 10px;
span {
@include text-semibold();
margin-inline-end: 5px;
font-size: 12px;
}
}
}
}
.subnav__stage-group {
display: flex;
flex-direction: row;
align-items: center;
margin-inline-start: 2rem;
margin-inline-end: 2rem;
font-size: 1.5rem;
.stage-group__split {
padding: 0 0.4rem 0 0.8rem;
opacity: 0.4;
}
.stage-group__badge {
padding: 0.4rem 0.8rem;
margin-inline-start: 1rem;
}
.dropdown.open {
.navbtn {
background-color: transparent !important;
box-shadow: none;
&:hover {
background-color: transparent !important;
}
}
> .dropdown__menu {
margin: -4px 0 0 -10px;
}
}
}
.navbtn.navbtn--text-only {
&.navbtn--padding-s {
padding: 0 0.4rem
}
}