scripts/apps/monitoring/styles/aggregate.scss
// search(aggregate) widget.scss
// ----------------------------------------------------------------------------------------
@import '~mixins.scss';
@import '~variables.scss';
$search-widget-width: $tabpane-extended-width;
$search-widget-preview-width: 440px;
//widget tabpane
.widget-search.tabpane,
.widget-aggregate.tabpane {
width: auto;
.widget-header {
display: none;
}
.tabcontent {
position: relative;
overflow: initial;
padding: 0;
inset-inline-start: 0; inset-inline-end: 0;
height: 100%;
}
.widget-content {
position: relative;
inset-block-start: 0;
overflow: initial;
padding-block-end: 0;
border-block-start: 0;
height: 100%;
> div {
height: 100%;
}
}
}
.sd-widget.search,
.tabpane .sd-widget.aggregate {
position: relative;
height: 100%;
}
//widget content
.sd-widget.search,
.sd-widget.aggregate {
.content-search {
position: relative;
background: $tabpane-background;
width: $search-widget-width;
height: 100%;
overflow: hidden;
&.extended {
width: $search-widget-width + $search-widget-preview-width;
}
}
.search-container {
position: absolute;
width: $search-widget-width;
inset-block-start: 0; inset-inline-start: 0; inset-block-end: 0;
.search-box {
display: flex;
box-sizing: border-box;
inset-inline-start: 0; inset-inline-end: 0; inset-block-start: 0;
height: $nav-height;
border-block-end: 1px solid #dcdcdc;
background: #fff url(~images/search-icon.png) no-repeat 15px 16px;
input {
position: static;
flex: 1;
width: auto;
height: 100%;
padding-inline-start: 46px;
box-sizing: border-box;
border: 0 !important;
background: transparent;
&:focus {
@include box-shadow(none !important);
}
}
.more-actions {
position: relative;
margin: auto;
height: 22px;
width: 28px;
inset-inline-end: 0px;
inset-block-start: 0;
}
}
.filter-list {
position: absolute;
inset-block-start: $nav-height;
inset-inline-start: 0; inset-inline-end: 0;
height: $nav-height;
@include border-box();
border-block-end: 1px solid #dcdcdc;
padding: 10px;
}
.content-list {
position: absolute;
inset-block-start: $nav-height;
inset-block-end: $bottom-view-padding - 2rem;
inset-inline-start: 0;
inset-inline-end: 0;
padding: 0 10px 10px;
overflow: auto;
}
}
.preview-container {
width: $search-widget-preview-width;
position: absolute;
inset-inline-start: $search-widget-width;
inset-block-end: 0; inset-block-start: 0;
border-inline-end: 1px solid #bbb;
background: #fff;
@include border-box();
@include box-shadow(inset 1px 0 0 #dcdcdc);
> header {
border-block-end: 1px solid #dcdcdc;
padding: 0 15px;
}
.close-preview {
position: absolute;
inset-inline-end: 10px;
inset-block-start: 10px;
}
> .content-item-preview {
position: absolute;
inset-block-start: $nav-height;
inset-block-end: 0;
inset-inline-start: 0 ;right: 0;
padding: 20px;
overflow: auto;
}
}
}
.sd-widget.search {
.search-container {
.content-list {
inset-block-start: 2*$nav-height;
> ul {
padding-inline-end: 10px;
> li {
position: relative;
background: $white;
border-block-end: 1px solid #ededed;
@include border-box();
padding: 7px 10px;
line-height: 12px;
border-inline-end: 2px solid #fff;
.select-box {
width: 32px;
height: 21px;
float: inline-start;
margin-inline-end: 10px;
.select {
position: absolute;
inset-inline-start: 15px;
inset-block-start: 10px;
display: none;
}
i {
display: inline-block;
}
}
&:not(.added) {
.select-box:hover {
.select {
display: block;
}
i {
display: none;
}
}
}
.item-functions {
display: none;
position: absolute;
inset-inline-end: 0; inset-block-start: 0;
li {
padding: 6px;
}
}
&:hover {
background: #f4f4f4;
cursor: pointer;
padding-inline-end: 40px;
border-right-color: #f4f4f4;
.item-functions {
display: block;
}
}
[class^="filetype-icon-"] {
margin: -1px 4px 0 -4px;
@include opacity(80);
}
p {
overflow: hidden;
width: 80%;
height: 18px;
text-overflow: ellipsis;
white-space: nowrap;
margin-inline-start: 0;
.keyword {
@include text-semibold();
text-transform: uppercase;
color: #216278;
margin-inline-end: 10px;
}
}
.group-select {
.dropdown__menu {
margin-block-start: -3px;
padding: 0;
&:before {
display: none;
}
> li {
padding: 3px 6px;
&:first-child {
padding-block-start: 6px;
}
&:last-child {
padding-block-end: 6px;
}
}
}
}
&.added {
background: #fafafa;
border-right-color: #ddd;
@include opacity(50);
&:hover {
padding-inline-end: 10px;
}
}
&.active {
background: $sd-hover;
border-right-color: $sd-blue;
}
&.multi-select {
background: #ccfbd6;
border-bottom-color: #a4e4b1;
}
}
}
}
}
}
.content-list {
.stage {
margin: 10px 0 15px;
.stage-content {
margin: 5px 0 20px;
overflow-y: auto;
position: relative;
}
}
}
.widget-container {
.content-list-holder {
background-color: var(--sd-colour-panel-bg--100);
.desk {
width: 100%;
}
}
.content-list {
.stage {
margin: 10px 0 0;
.stage-header {
margin: 0 4px 4px 4px;
}
.stage-content {
padding: 5px 3px;
margin: 0 0 10px;
}
}
}
}
.stage-header {
display: flex;
align-items: center;
height: 2.4rem;
margin-block-end: $sd-base-increment;
.stage-header__line, .stage-header__stretch-bar {
height: 1px;
margin: auto 4px;
background: var(--sd-colour-line--medium);
flex: 1;
}
.stage-header__stretch-bar {
background: transparent;
margin: auto 0;
}
.stage-header__name {
font-size: 1.1rem;
line-height: 1.1rem;
@include text-semibold();
text-transform: uppercase;
letter-spacing: 0.08em;
display: flex;
align-items: center;
a, .stage-header__name-part {
display: inline-flex;
align-items: center;
}
a {
color: var(--sd-colour-interactive);
&:hover {
color: var(--sd-colour-interactive--hover)
}
}
span + span {
margin-inline-start: 5px;
}
}
.stage-header__separator {
padding: 0 6px;
opacity: 0.5;
}
.stage-header__toggle {
border: 0;
padding: 0;
margin: 0 5px 0 0;
display: flex;
background: transparent;
i {
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
color: var(--color-icon-default);
}
&.closed {
i {
@include rotate(-90deg);
margin: auto;
}
}
}
.stage-header__number,
.stage-header__notification {
margin: 0 0 0 4px;
}
.stage-header__name + .stage-header__number {
margin-inline-start: 10px;
}
}
.sd-kanban-list__board-header {
.stage-header {
margin-block-end: 0;
}
}
.notification-label, .label-total {
display: inline-flex;
align-items: center;
vertical-align: middle;
justify-content: center;
padding-block-start: 0;
padding-block-end: 0;
padding-inline: $sd-base-increment;
height: $sd-base-increment * 2;
border-radius: 999px;
color: $white !important;
background: var(--sd-colour-interactive);
font-size: 9px;
line-height: $sd-base-increment * 2;
letter-spacing: 0.125em;
font-weight: 500;
white-space: nowrap;
cursor: default;
}
.label-total {
background: var(--sd-colour-bg--08);
}
.refresh-box {
display: flex;
button {
background: none;
&.btnRefresh {
margin-inline-end: 3px;
padding-inline-start: 0;
height: 26px;
position: absolute;
inset-inline-end: 12px;
&:hover {
@include opacity(90);
}
}
}
}
.content-list-holder {
position: absolute;
inset-block-start: 38px;
inset-inline-start: 0;
inset-inline-end: 0;
inset-block-end: 0;
.desk {
width: 99%;
}
}
.sd-widget.aggregate {
.content-list-holder .content-list {
padding: 0 5px;
}
.preview.preview-widget {
opacity: 0;
animation-delay: 0.5s;
animation: fadeIn3 0.2s ease-out 1;
opacity: 1;
ul.nav {
height: 35px;
line-height: 35px;
background: inherit;
> li {
> button {
height: 35px;
line-height: 19px;
}
}
}
ul.nav.nav-tabs {
height: 35px;
line-height: 35px;
border-block-end: none;
}
.content-item-preview {
.content-container, .metadata-view {
inset-block-start: 70px;
}
}
.package-item.item {
.item-actions-menu {
display: none;
}
}
}
.preview.preview-widget.custom-widget {
.nav {
display: none;
}
ul.nav.nav-tabs {
display: flex;
border-block-start: 1px solid rgba(123,123,123,0.3);
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 -1px 2px 0 rgba(0, 0, 0, 0.08);
}
.content-item-preview {
.content-container, .metadata-view {
inset-block-start: 36px;
}
}
}
}
.aggregate-widget-config {
.legend {
text-transform: none;
font-size: 16px;
color: $sd-text;
font-weight: 400;
margin-block-end: 16px;
margin-block-start: 10px;
padding: 0;
}
.legend + div[sd-toggle-box] {
margin-block-start: 30px;
}
.desk {
padding: 5px 0;
border-block-end: 1px dotted var(--sd-colour-line--strong);
&:first-of-type{
border-block-start: 1px dotted var(--sd-colour-line--strong);
}
&--item-count {
display: flex;
align-items: center;
.desk-title {
flex-grow: 1;
}
.box-items-count {
width: 14%;
}
}
}
.content {
.desk:first-of-type {
border-block-start: 1px dotted var(--sd-colour-line--strong) !important;
}
}
.desk-title {
font-size: 14px;
@include text-semibold();
padding: 5px 0;
i {
font-size: 12px;
font-weight: 100;
}
.search-description {
font-size: 12px;
font-weight: 300;
color: $sd-text-light;
}
&--80 {
width: 80%;
}
&--saved-search {
display: flex;
.switch {
flex-grow: 0;
flex-shrink: 0;
}
.desk-title__text {
flex-grow: 1;
}
}
}
.desk-title__text {
display: inline-block;
padding-inline-start: 1rem;
}
.stages {
overflow: hidden;
margin: 5px 0 0;
li {
float: inline-start;
overflow: hidden;
}
.sd-check__wrapper {
margin: 0 5px 5px 0;
}
}
}
.placeholder {
margin: 20px 0;
}