diff options
author | Mārtiņš Tālbergs <martins.talbergs@zabbix.com> | 2021-03-10 09:46:07 +0300 |
---|---|---|
committer | Mārtiņš Tālbergs <martins.talbergs@zabbix.com> | 2021-03-10 09:46:07 +0300 |
commit | 379990a1951cf1be47a4cf41c88968e593acbfe9 (patch) | |
tree | b66d43eeb5586849e16087207b1940ff5f6cf817 /sass | |
parent | 864245d61348023c41c1c661435b7cd7369dc951 (diff) | |
parent | 7a75847663d07e63dd19c8be6522277807a50711 (diff) |
.......... [ZBXNEXT-6288] updated to latest from ^origin/feature/ZBXNEXT-6309-5.3; no conflicts
Diffstat (limited to 'sass')
-rwxr-xr-x | sass/stylesheets/sass/components/_dashboard.scss | 950 | ||||
-rw-r--r-- | sass/stylesheets/sass/screen.scss | 1123 | ||||
-rwxr-xr-x | sass/stylesheets/sass/utils/_resizable.scss | 175 |
3 files changed, 1127 insertions, 1121 deletions
diff --git a/sass/stylesheets/sass/components/_dashboard.scss b/sass/stylesheets/sass/components/_dashboard.scss new file mode 100755 index 00000000000..81d243851d4 --- /dev/null +++ b/sass/stylesheets/sass/components/_dashboard.scss @@ -0,0 +1,950 @@ +.dashbrd-edit { + background-color: $ui-bg-color; + box-shadow: 0 0 0 4px $ui-bg-color; + display: inline-block; + margin-right: 5px; + position: relative; + + &::after { + content: ''; + position: absolute; + min-height: 24px; + z-index: -1; + top: -5px; + right: -5px; + bottom: -5px; + left: -5px; + border: 1px solid $ui-border-color; + } + + ul { + li { + vertical-align: middle; + + &:first-child { + padding: 0; + } + + .btn-dashbrd-conf { + vertical-align: middle; + } + } + } +} + +.dashbrd-navigation { + display: flex; + margin: 10px 0 8px 0; +} + +.dashbrd-navigation-tabs { + // Compensate 2px padding of tabs. + margin: -2px 10px -2px 0; + overflow: hidden; + + .csortable { + // Accommodate 2px shadow of focused tabs. + padding: 2px 0; + // Hide the invisible tab paddings. + margin: 0 -1.5px; + } + + .csortable-list { + display: flex; + padding: 0; + margin: 0; + + & > .csortable-item:focus:not(:active) { + // Increase padding to accommodate the focused div's shadow. + padding: 0 3.5px 0 3.5px; + + & > div { + padding: 0 8px; + border: 1px solid transparent; + box-shadow: 0 0 0 2px rgba($blue, .35); + } + } + } + + .csortable-item { + // This container should not be visually styled at this level. + box-sizing: border-box; + display: block; + // Invisible padding for tab separation. + padding: 0 1.5px 0 1.5px; + margin: 0; + list-style-type: none; + outline: none; + + & > div { + min-height: 22px; + line-height: 22px; + box-sizing: border-box; + padding: 0 10px; + flex-shrink: 0; + + font-size: 12px; + white-space: nowrap; + + cursor: pointer; + user-select: none; + + background-color: $ui-bg-color; + border: 1px solid $ui-border-color; + border-radius: 2px; + + @if $ui-transitions { + transition: background-color $ui-transition-duration, border-color $ui-transition-duration; + } + } + } + + & .csortable > .csortable-item > div, + & .csortable-list > .csortable-item > div:hover { + background: #e8f5ff; + border: 1px solid lighten($blue, 30%); + } + + & .csortable > .csortable-item > div.selected-tab, + & .csortable-list > .csortable-item > div.selected-tab { + color: $white; + background: $ui-bg-selected-color; + border: 1px solid transparent; + } +} + +.dashbrd-navigation-controls { + display: flex; + flex-shrink: 0; + + button { + margin-left: 10px; + + &.dashbrd-previous-page, + &.dashbrd-next-page { + display: none; + margin: 0; + } + } +} + +// Dashboard, widgets and iterators. +// To maintain code clarity: +// - Do not mix rules for dashboard view mode and dashboard edit mode. +// - Do not mix rules for widgets and iterators. +.dashbrd-grid-container { + position: relative; + margin: -4px; + + // For widget sliding headers to appear over the breadcrumbs. + z-index: 3; +} + +.dashbrd-grid-new-widget-placeholder { + box-sizing: border-box; + display: flex; + height: 200px; + padding: .25rem; + width: calc(100% / 6 - .65rem); + z-index: 999; + color: $font-alt-color; + cursor: pointer; + + .dashbrd-grid-widget-new-box, + .dashbrd-grid-widget-set-position, + .dashbrd-grid-widget-set-size { + background-color: rgba($ui-bg-color, .7); + border: 1px dashed $form-border-color; + box-shadow: 2px 2px 6px $action-shadow-color; + flex: 1; + position: relative; + overflow: hidden; + } + + .dashbrd-grid-widget-set-size { + background: darken($body-bg-color, 6%); + box-shadow: inset 2px 2px 6px $action-shadow-color; + } + + .dashbrd-grid-new-widget-label { + $icon-height: 28px; + + position: absolute; + left: 0; + top: calc(50% - #{$icon-height / 2}); + right: 0; + bottom: 0; + padding: ($icon-height + 10px) 5px 5px; + text-align: center; + + &::before { + background: url($sprite-path) no-repeat -157px -888px; + content: ' '; + height: $icon-height; + width: 36px; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + } + + span { + &.hidden { + display: none; + } + } + } + + &.disabled { + opacity: 1; + + .dashbrd-grid-widget-new-box { + background-color: rgba($ui-bg-color, .7); + + .dashbrd-grid-new-widget-label::before { + background: url($sprite-path) no-repeat -122px -284px; + } + } + } + + &.hidden { + display: none; + } +} + +.dashbrd-grid-widget-set-size { + .dashbrd-grid-new-widget-label { + &::before { + background: url($sprite-path) no-repeat -345px -888px; + } + } +} + +.dashbrd-grid-widget-container { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + padding: .25rem; + box-sizing: border-box; + display: flex; + flex-direction: column; +} + +.dashbrd-grid-widget-head { + position: absolute; + top: .25rem; + left: .25rem; + right: .25rem; + height: 2rem; + padding-left: 10px; + display: flex; + flex-wrap: nowrap; + flex-direction: row; + overflow: hidden; + align-items: flex-start; + border: 1px solid $ui-border-color; + border-bottom: 0; + background-color: $ui-bg-color; + + // For floating headers to appear over other widgets. + // Cannot rely on DOM order here, since widgets of iterators can be shuffled on refresh. + z-index: 3; + + h4 { + flex-grow: 1; + margin-top: .5rem; + color: widget-head-font-color($font-color); + font-weight: bold; + @extend %overflow-ellipsis; + } + + ul { + flex-shrink: 0; + + li { + float: left; + padding: 0; + + select { + margin: 4px 0; + } + } + } +} + +.dashbrd-grid-widget-actions { + opacity: 0; + transition: opacity .2s ease-out; +} + +.dashbrd-grid-widget-content { + flex-grow: 1; + margin-top: 2rem; + box-sizing: border-box; + height: calc(100% - 2rem); + padding-bottom: 8px; + overflow: auto; + border: 1px solid $ui-border-color; + background-color: $ui-bg-color; + + @extend %webkit-scrollbar; + + .list-table { + border: 0; + + th { + @extend %dashbrd-widget-td; + } + + td { + @extend %dashbrd-widget-td; + } + + tbody tr { + &:last-child th, + &:last-child td { + border-bottom: 1px solid $table-border-color; + + &.list-table-footer { + border-bottom: 0; + } + } + } + } + + .debug-output { + max-height: none; + border-color: $table-border-color; + } + + .msg-bad, + .msg-good, + .msg-warning { + margin: 0 10px; + } +} + +.dashbrd-grid-widget-mask { + position: absolute; + top: .25rem; + left: .25rem; + right: .25rem; + bottom: .25rem; + display: none; +} + +.dashbrd-grid-widget { + position: absolute; + + &.dashbrd-grid-widget-hidden-header { + .dashbrd-grid-widget-head { + height: 0; + transition: height .3s, margin-top .3s, box-shadow .3s; + } + + .dashbrd-grid-widget-content { + margin-top: 0; + height: 100%; + padding-top: 8px; + } + + &.dashbrd-grid-widget-focus { + .dashbrd-grid-widget-head { + height: 2rem; + margin-top: -2rem; + box-shadow: 0 -6px 8px -2px rgba(128, 128, 128, .15); + z-index: 5; + } + } + } + + &.dashbrd-grid-widget-focus { + .dashbrd-grid-widget-actions { + opacity: 1; + } + } + + &.ui-resizable-resizing.resizing-top { + .dashbrd-grid-widget-container { + top: auto; + bottom: 0; + } + } + + &.ui-resizable-resizing.resizing-left { + .dashbrd-grid-widget-container { + left: auto; + right: 0; + } + } +} + +.dashbrd-grid-iterator-container { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.dashbrd-grid-iterator-head { + position: absolute; + top: .25rem; + left: .25rem; + right: .25rem; + height: 0; + display: flex; + flex-wrap: nowrap; + flex-direction: row; + overflow: hidden; + padding-left: 10px; + box-sizing: border-box; + border: 1px solid $ui-border-color; + border-bottom: 0; + background-color: $ui-bg-color; + opacity: 0; + + // Transition for opacity is set for best border disappearance on different themes. + transition: margin-top .3s ease-out, height .3s ease-out, opacity .15s .15s ease-out, box-shadow .3s ease-out; + + // Not to loose hovered header while widget underneath is updating. + z-index: 3; + + h4 { + flex-grow: 1; + margin-top: .5rem; + color: widget-head-font-color($font-color); + font-weight: bold; + @extend %overflow-ellipsis; + } + + ul { + flex-shrink: 0; + + li { + float: left; + padding: 0; + } + } + + .dashbrd-grid-iterator-pager { + margin: 0 10px; + height: 2rem; + display: none; + flex-direction: row; + flex-shrink: 0; // IE11 fix. + align-items: center; + + .dashbrd-grid-iterator-pager-info { + margin: 2px .5em 0; + white-space: nowrap; + color: widget-head-font-color($font-color); + } + } + + &.pager-visible .dashbrd-grid-iterator-pager { + display: flex; + } +} + +.dashbrd-grid-iterator-content { + // To catch vertical resize events correctly. + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + + // To allow overflowing of the floating headers of child widgets. + overflow: visible; + + transition: margin-top .3s ease-out; +} + +.dashbrd-grid-iterator-placeholder { + position: absolute; + display: flex; + + > div { + margin: .25rem; + display: flex; + flex-grow: 1; + flex-direction: column; + border: 1px solid $ui-border-color; + background-color: rgba($ui-bg-color, .3); + } +} + +.dashbrd-grid-iterator-too-small { + position: absolute; + top: .25rem; + left: .25rem; + right: .25rem; + bottom: .25rem; + overflow: hidden; + display: none; + align-items: center; + justify-content: center; + border: 1px solid $ui-border-color; + background-color: $ui-bg-color; + + > div { + padding: 0 10px; + text-align: center; + color: $font-alt-color; + } +} + +.dashbrd-grid-iterator-mask { + position: absolute; + top: .25rem; + left: .25rem; + right: .25rem; + bottom: .25rem; + display: none; +} + +.dashbrd-grid-iterator { + position: absolute; + + &.iterator-too-small { + .dashbrd-grid-iterator-too-small { + display: flex; + } + + .dashbrd-grid-iterator-content { + display: none; + } + } + + &.dashbrd-grid-iterator-focus { + z-index: 5; + + .dashbrd-grid-iterator-head { + margin-top: -2rem; + height: 2rem; + box-shadow: 0 -6px 8px -2px rgba(128, 128, 128, .15); + opacity: 1; + + // Not inheriting opacity transition here. + transition: margin-top .3s ease-out, height .3s ease-out, box-shadow .3s ease-out; + } + + &.dashbrd-grid-iterator-hidden-header.iterator-double-header { + .dashbrd-grid-iterator-head { + margin-top: -4rem; + height: 4rem; + } + } + } + + &.ui-resizable-resizing.resizing-top { + .dashbrd-grid-iterator-container { + top: auto; + bottom: 0; + } + } + + &.ui-resizable-resizing.resizing-left { + .dashbrd-grid-iterator-container { + left: auto; + right: 0; + } + } + + &.iterator-alt-content { + .dashbrd-grid-iterator-content { + position: absolute; + top: .25rem; + left: .25rem; + right: .25rem; + bottom: .25rem; + border: 1px solid $ui-border-color; + background-color: $ui-bg-color; + + > div { + padding-top: 8px; + + .list-table { + border: 0; + + th { + @extend %dashbrd-widget-td; + } + + td { + @extend %dashbrd-widget-td; + } + + tbody tr { + &:last-child th, + &:last-child td { + border-bottom: 1px solid $table-border-color; + + &.list-table-footer { + border-bottom: 0; + } + } + } + } + + .msg-good, + .msg-bad { + margin: 0 10px; + } + } + } + } +} + +.dashbrd-grid-container.dashbrd-mode-edit { + .dashbrd-grid-widget-actions { + opacity: 1; + } + + &.dashbrd-positioning { + // No lazy transitions while dragging or resizing. + + .dashbrd-grid-widget { + &.dashbrd-grid-widget-hidden-header { + .dashbrd-grid-widget-head { + transition: none; + } + } + } + + .dashbrd-grid-iterator { + &.dashbrd-grid-widget-hidden-header { + .dashbrd-grid-widget-head { + transition: none; + } + } + } + + // No widget interactivity while dragging or resizing. + + .dashbrd-grid-widget-mask { + display: block; + } + + .dashbrd-grid-iterator-mask { + display: block; + } + } + + .dashbrd-grid-widget { + .ui-resizable-handle { + visibility: hidden; + } + + &.dashbrd-grid-widget-focus .ui-resizable-handle { + visibility: visible; + } + + &.ui-resizable-resizing { + &.dashbrd-grid-widget-hidden-header { + .dashbrd-grid-widget-head { + margin-top: 0; + height: 0; + box-shadow: none; + } + } + } + + &.ui-draggable-dragging { + .ui-resizable-handle { + visibility: hidden; + } + + &.dashbrd-grid-widget-hidden-header { + .dashbrd-grid-widget-head { + margin-top: -2rem; + height: 2rem; + box-shadow: 0 -6px 8px -2px rgba(128, 128, 128, .15); + opacity: .5; + } + } + } + + &.ui-resizable-resizing, + &.ui-draggable-dragging { + z-index: 1000; + + &::before { + content: ''; + display: block; + position: absolute; + top: .25rem; + left: .25rem; + right: .25rem; + bottom: .25rem; + background-color: rgba(darken($body-bg-color, 6%), .75); + box-shadow: 0 4px 20px 2px rgba(0, 0, 0, .15); + } + + .dashbrd-grid-widget-head { + border-color: darken($ui-border-color, 6%); + } + + .dashbrd-grid-widget-content { + border-color: darken($ui-border-color, 6%); + } + } + } + + .dashbrd-grid-iterator { + .ui-resizable-handle { + visibility: hidden; + } + + &.dashbrd-grid-iterator-focus .ui-resizable-handle { + visibility: visible; + } + + &.ui-resizable-resizing { + .dashbrd-grid-iterator-head { + margin-top: 0; + height: 0; + box-shadow: none; + opacity: 0; + } + } + + &.ui-draggable-dragging { + .ui-resizable-handle { + visibility: hidden; + } + + .dashbrd-grid-iterator-head { + margin-top: -2rem; + height: 2rem; + box-shadow: 0 -6px 8px -2px rgba(128, 128, 128, .15); + opacity: .5; + } + + &.dashbrd-grid-iterator-hidden-header.iterator-double-header { + .dashbrd-grid-iterator-head { + margin-top: -4rem; + height: 4rem; + } + } + } + + &.ui-resizable-resizing, + &.ui-draggable-dragging { + z-index: 1000; + + &::before { + content: ''; + display: block; + position: absolute; + top: .25rem; + left: .25rem; + right: .25rem; + bottom: .25rem; + background-color: rgba(darken($body-bg-color, 6%), .75); + box-shadow: 0 4px 20px 2px rgba(0, 0, 0, .15); + } + + .dashbrd-grid-iterator-head { + border-color: darken($ui-border-color, 6%); + } + + .dashbrd-grid-iterator-content { + .dashbrd-grid-widget { + .dashbrd-grid-widget-head { + border-color: darken($ui-border-color, 6%); + } + + .dashbrd-grid-widget-content { + border-color: darken($ui-border-color, 6%); + } + } + + .dashbrd-grid-iterator-placeholder > div { + border-color: darken($ui-border-color, 6%); + } + } + + .dashbrd-grid-iterator-mask { + border: 1px solid darken($ui-border-color, 8%); + border-top: 0; + } + } + } + + .dashbrd-grid-widget-placeholder { + position: absolute; + z-index: 999; + + > div { + position: absolute; + top: .25rem; + left: .25rem; + right: .25rem; + bottom: .25rem; + background-color: darken($body-bg-color, 6%) !important; + } + } +} + +@keyframes zoom-in-out { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.05); + } + 100% { + transform: scale(1); + } +} + +.new-widget { + animation: zoom-in-out .2s linear; +} +.dashbrd-widget-placeholder { + border-color: darken($body-bg-color, 6%) !important; + background-color: darken($body-bg-color, 6%) !important; +} + +.dashbrd-widget-draggable { + border-color: $action-border-color !important; + border-bottom-color: darken($action-border-color, 1%) !important; + box-shadow: 0 4px 20px 0 $action-shadow-color; +} + +.dashbrd-widget { + min-width: 250px; + margin: 0 10px 10px 0; + background-color: $ui-bg-color; + border: 1px solid $ui-border-color; + + .list-table { + border: 0; + + th { + @extend %dashbrd-widget-td; + } + + td { + @extend %dashbrd-widget-td; + } + + tbody tr { + &:last-child td { + border-bottom: 1px solid $table-border-color; + } + } + } + + .msg-bad, + .msg-good, + .msg-warning { + margin: 0 10px; + } + + &.dashbrd-widget-fluid { + margin-right: 0; + } +} + +%dashbrd-widget-td { + &:first-child { + padding-left: 10px; + } + + &:last-child { + padding-right: 10px; + } +} + +.dashbrd-widget-head { + position: relative; + padding: 8px 60px 8px 10px; + + h4 { + color: widget-head-font-color($font-color); + font-weight: bold; + } + + ul { + position: absolute; + top: 0; + right: 0; + + li { + display: block; + float: left; + padding: 0; + + select { + margin: 4px 0; + } + } + } + + z-select { + .list { + li { + float: none; + line-height: normal; + padding: 5px; + } + } + } +} + +.dashbrd-widget-foot { + text-align: right; + color: $font-alt-color; + margin: 0 10px; + + li { + display: inline-block; + padding: 8px 0 8px 13px; + } +} + +.dashbrd-widget-graph-link { + display: block; + + &:link { + border: 0; + } +} + +.dashbrd-grid-widget-content, +.dashbrd-grid-iterator-content { + &.is-loading::before { + margin: calc(.25rem + 1px); + } +} + +// Dashboard list table. +.dashboard-list { + .dashboard-list-item { + display: flex; + justify-content: space-between; + height: 18px; + + .status-green { + background-color: $dashboard-my-bg-color; + border-color: $dashboard-my-bg-color; + } + + .status-yellow { + background-color: $dashboard-shared-bg-color; + border-color: $dashboard-shared-bg-color; + } + } +} + +.wrapper.layout-kioskmode { + + .dashbrd-navigation { + display: none; + } +} diff --git a/sass/stylesheets/sass/screen.scss b/sass/stylesheets/sass/screen.scss index 24142e6af9c..266af7708c1 100644 --- a/sass/stylesheets/sass/screen.scss +++ b/sass/stylesheets/sass/screen.scss @@ -17,6 +17,7 @@ $browser-sprite-path: '../img/browser-sprite.png?20200407'; @import "base/common"; @import "utils/indicator"; +@import "utils/resizable"; @import "utils/scrollable"; @import "layout/grid"; @@ -26,6 +27,7 @@ $browser-sprite-path: '../img/browser-sprite.png?20200407'; @import "layout/form-grid"; @import "components/csortable"; +@import "components/dashboard"; @import "components/form-search"; @import "components/menu-main"; @import "components/menu-user"; @@ -185,40 +187,6 @@ $browser-sprite-path: '../img/browser-sprite.png?20200407'; background: url($sprite-path) no-repeat -540px -400px; } -.dashbrd-edit { - background-color: $ui-bg-color; - box-shadow: 0 0 0 4px $ui-bg-color; - display: inline-block; - margin-right: 5px; - position: relative; - - &::after { - content: ''; - position: absolute; - min-height: 24px; - z-index: -1; - top: -5px; - right: -5px; - bottom: -5px; - left: -5px; - border: 1px solid $ui-border-color; - } - - ul { - li { - vertical-align: middle; - - &:first-child { - padding: 0; - } - - .btn-dashbrd-conf { - vertical-align: middle; - } - } - } -} - .hor-list { li { display: inline-block; @@ -2909,1002 +2877,6 @@ $form-icon-btn: ( width: 100%; } -.dashbrd-navigation { - display: flex; - margin: 10px 0 8px 0; -} - -.dashbrd-navigation-tabs { - // Compensate 2px padding of tabs. - margin: -2px 10px -2px 0; - overflow: hidden; - - .csortable { - // Accommodate 2px shadow of focused tabs. - padding: 2px 0; - // Hide the invisible tab paddings. - margin: 0 -1.5px; - } - - .csortable-list { - display: flex; - padding: 0; - margin: 0; - - & > .csortable-item:focus:not(:active) { - // Increase padding to accommodate the focused div's shadow. - padding: 0 3.5px 0 3.5px; - - & > div { - padding: 0 8px; - border: 1px solid transparent; - box-shadow: 0 0 0 2px rgba($blue, .35); - } - } - } - - .csortable-item { - // This container should not be visually styled at this level. - box-sizing: border-box; - display: block; - // Invisible padding for tab separation. - padding: 0 1.5px 0 1.5px; - margin: 0; - list-style-type: none; - outline: none; - - & > div { - min-height: 22px; - line-height: 22px; - box-sizing: border-box; - padding: 0 10px; - flex-shrink: 0; - - font-size: 12px; - white-space: nowrap; - - cursor: pointer; - user-select: none; - - background-color: $ui-bg-color; - border: 1px solid $ui-border-color; - border-radius: 2px; - - @if $ui-transitions { - transition: background-color $ui-transition-duration, border-color $ui-transition-duration; - } - } - } - - & .csortable > .csortable-item > div, - & .csortable-list > .csortable-item > div:hover { - background: #e8f5ff; - border: 1px solid lighten($blue, 30%); - } - - & .csortable > .csortable-item > div.selected-tab, - & .csortable-list > .csortable-item > div.selected-tab { - color: $white; - background: $ui-bg-selected-color; - border: 1px solid transparent; - } -} - -.dashbrd-navigation-controls { - display: flex; - flex-shrink: 0; - - button { - margin-left: 10px; - - &.dashbrd-previous-page, - &.dashbrd-next-page { - display: none; - margin: 0; - } - } -} - -// Dashboard, widgets and iterators. -// To maintain code clarity: -// - Do not mix rules for dashboard view mode and dashboard edit mode. -// - Do not mix rules for widgets and iterators. -.dashbrd-grid-container { - position: relative; - margin: -4px; - - // For widget sliding headers to appear over the breadcrumbs. - z-index: 3; -} - -.dashbrd-grid-new-widget-placeholder { - box-sizing: border-box; - display: flex; - height: 200px; - padding: .25rem; - width: calc(100% / 6 - .65rem); - z-index: 999; - color: $font-alt-color; - cursor: pointer; - - .dashbrd-grid-widget-new-box, - .dashbrd-grid-widget-set-position, - .dashbrd-grid-widget-set-size { - background-color: rgba($ui-bg-color, .7); - border: 1px dashed $form-border-color; - box-shadow: 2px 2px 6px $action-shadow-color; - flex: 1; - position: relative; - overflow: hidden; - } - - .dashbrd-grid-widget-set-size { - background: darken($body-bg-color, 6%); - box-shadow: inset 2px 2px 6px $action-shadow-color; - } - - .dashbrd-grid-new-widget-label { - $icon-height: 28px; - - position: absolute; - left: 0; - top: calc(50% - #{$icon-height / 2}); - right: 0; - bottom: 0; - padding: ($icon-height + 10px) 5px 5px; - text-align: center; - - &::before { - background: url($sprite-path) no-repeat -157px -888px; - content: ' '; - height: $icon-height; - width: 36px; - position: absolute; - top: 0; - left: 50%; - transform: translateX(-50%); - } - - span { - &.hidden { - display: none; - } - } - } - - &.disabled { - opacity: 1; - - .dashbrd-grid-widget-new-box { - background-color: rgba($ui-bg-color, .7); - - .dashbrd-grid-new-widget-label::before { - background: url($sprite-path) no-repeat -122px -284px; - } - } - } - - &.hidden { - display: none; - } -} - -.dashbrd-grid-widget-set-size { - .dashbrd-grid-new-widget-label { - &::before { - background: url($sprite-path) no-repeat -345px -888px; - } - } -} - -.dashbrd-grid-widget-container { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - padding: .25rem; - box-sizing: border-box; - display: flex; - flex-direction: column; -} - -.dashbrd-grid-widget-head { - position: absolute; - top: .25rem; - left: .25rem; - right: .25rem; - height: 2rem; - padding-left: 10px; - display: flex; - flex-wrap: nowrap; - flex-direction: row; - overflow: hidden; - align-items: flex-start; - border: 1px solid $ui-border-color; - border-bottom: 0; - background-color: $ui-bg-color; - - // For floating headers to appear over other widgets. - // Cannot rely on DOM order here, since widgets of iterators can be shuffled on refresh. - z-index: 3; - - h4 { - flex-grow: 1; - margin-top: .5rem; - color: widget-head-font-color($font-color); - font-weight: bold; - @extend %overflow-ellipsis; - } - - ul { - flex-shrink: 0; - - li { - float: left; - padding: 0; - - select { - margin: 4px 0; - } - } - } -} - -.dashbrd-grid-widget-actions { - opacity: 0; - transition: opacity .2s ease-out; -} - -.dashbrd-grid-widget-content { - flex-grow: 1; - margin-top: 2rem; - box-sizing: border-box; - height: calc(100% - 2rem); - padding-bottom: 8px; - overflow: auto; - border: 1px solid $ui-border-color; - background-color: $ui-bg-color; - - @extend %webkit-scrollbar; - - .list-table { - border: 0; - - th { - @extend %dashbrd-widget-td; - } - - td { - @extend %dashbrd-widget-td; - } - - tbody tr { - &:last-child th, - &:last-child td { - border-bottom: 1px solid $table-border-color; - - &.list-table-footer { - border-bottom: 0; - } - } - } - } - - .debug-output { - max-height: none; - border-color: $table-border-color; - } - - .msg-bad, - .msg-good, - .msg-warning { - margin: 0 10px; - } -} - -.dashbrd-grid-widget-mask { - position: absolute; - top: .25rem; - left: .25rem; - right: .25rem; - bottom: .25rem; - display: none; -} - -.dashbrd-grid-widget { - position: absolute; - - &.dashbrd-grid-widget-hidden-header { - .dashbrd-grid-widget-head { - height: 0; - transition: height .3s, margin-top .3s, box-shadow .3s; - } - - .dashbrd-grid-widget-content { - margin-top: 0; - height: 100%; - padding-top: 8px; - } - - &.dashbrd-grid-widget-focus { - .dashbrd-grid-widget-head { - height: 2rem; - margin-top: -2rem; - box-shadow: 0 -6px 8px -2px rgba(128, 128, 128, .15); - z-index: 5; - } - } - } - - &.dashbrd-grid-widget-focus { - .dashbrd-grid-widget-actions { - opacity: 1; - } - } - - &.ui-resizable-resizing.resizing-top { - .dashbrd-grid-widget-container { - top: auto; - bottom: 0; - } - } - - &.ui-resizable-resizing.resizing-left { - .dashbrd-grid-widget-container { - left: auto; - right: 0; - } - } -} - -.dashbrd-grid-iterator-container { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -.dashbrd-grid-iterator-head { - position: absolute; - top: .25rem; - left: .25rem; - right: .25rem; - height: 0; - display: flex; - flex-wrap: nowrap; - flex-direction: row; - overflow: hidden; - padding-left: 10px; - box-sizing: border-box; - border: 1px solid $ui-border-color; - border-bottom: 0; - background-color: $ui-bg-color; - opacity: 0; - - // Transition for opacity is set for best border disappearance on different themes. - transition: margin-top .3s ease-out, height .3s ease-out, opacity .15s .15s ease-out, box-shadow .3s ease-out; - - // Not to loose hovered header while widget underneath is updating. - z-index: 3; - - h4 { - flex-grow: 1; - margin-top: .5rem; - color: widget-head-font-color($font-color); - font-weight: bold; - @extend %overflow-ellipsis; - } - - ul { - flex-shrink: 0; - - li { - float: left; - padding: 0; - } - } - - .dashbrd-grid-iterator-pager { - margin: 0 10px; - height: 2rem; - display: none; - flex-direction: row; - flex-shrink: 0; // IE11 fix. - align-items: center; - - .dashbrd-grid-iterator-pager-info { - margin: 2px .5em 0; - white-space: nowrap; - color: widget-head-font-color($font-color); - } - } - - &.pager-visible .dashbrd-grid-iterator-pager { - display: flex; - } -} - -.dashbrd-grid-iterator-content { - // To catch vertical resize events correctly. - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - - // To allow overflowing of the floating headers of child widgets. - overflow: visible; - - transition: margin-top .3s ease-out; -} - -.dashbrd-grid-iterator-placeholder { - position: absolute; - display: flex; - - > div { - margin: .25rem; - display: flex; - flex-grow: 1; - flex-direction: column; - border: 1px solid $ui-border-color; - background-color: rgba($ui-bg-color, .3); - } -} - -.dashbrd-grid-iterator-too-small { - position: absolute; - top: .25rem; - left: .25rem; - right: .25rem; - bottom: .25rem; - overflow: hidden; - display: none; - align-items: center; - justify-content: center; - border: 1px solid $ui-border-color; - background-color: $ui-bg-color; - - > div { - padding: 0 10px; - text-align: center; - color: $font-alt-color; - } -} - -.dashbrd-grid-iterator-mask { - position: absolute; - top: .25rem; - left: .25rem; - right: .25rem; - bottom: .25rem; - display: none; -} - -.dashbrd-grid-iterator { - position: absolute; - - &.iterator-too-small { - .dashbrd-grid-iterator-too-small { - display: flex; - } - - .dashbrd-grid-iterator-content { - display: none; - } - } - - &.dashbrd-grid-iterator-focus { - z-index: 5; - - .dashbrd-grid-iterator-head { - margin-top: -2rem; - height: 2rem; - box-shadow: 0 -6px 8px -2px rgba(128, 128, 128, .15); - opacity: 1; - - // Not inheriting opacity transition here. - transition: margin-top .3s ease-out, height .3s ease-out, box-shadow .3s ease-out; - } - - &.dashbrd-grid-iterator-hidden-header.iterator-double-header { - .dashbrd-grid-iterator-head { - margin-top: -4rem; - height: 4rem; - } - } - } - - &.ui-resizable-resizing.resizing-top { - .dashbrd-grid-iterator-container { - top: auto; - bottom: 0; - } - } - - &.ui-resizable-resizing.resizing-left { - .dashbrd-grid-iterator-container { - left: auto; - right: 0; - } - } - - &.iterator-alt-content { - .dashbrd-grid-iterator-content { - position: absolute; - top: .25rem; - left: .25rem; - right: .25rem; - bottom: .25rem; - border: 1px solid $ui-border-color; - background-color: $ui-bg-color; - - > div { - padding-top: 8px; - - .list-table { - border: 0; - - th { - @extend %dashbrd-widget-td; - } - - td { - @extend %dashbrd-widget-td; - } - - tbody tr { - &:last-child th, - &:last-child td { - border-bottom: 1px solid $table-border-color; - - &.list-table-footer { - border-bottom: 0; - } - } - } - } - - .msg-good, - .msg-bad { - margin: 0 10px; - } - } - } - } -} - -.dashbrd-grid-container.dashbrd-mode-edit { - .dashbrd-grid-widget-actions { - opacity: 1; - } - - &.dashbrd-positioning { - // No lazy transitions while dragging or resizing. - - .dashbrd-grid-widget { - &.dashbrd-grid-widget-hidden-header { - .dashbrd-grid-widget-head { - transition: none; - } - } - } - - .dashbrd-grid-iterator { - &.dashbrd-grid-widget-hidden-header { - .dashbrd-grid-widget-head { - transition: none; - } - } - } - - // No widget interactivity while dragging or resizing. - - .dashbrd-grid-widget-mask { - display: block; - } - - .dashbrd-grid-iterator-mask { - display: block; - } - } - - .dashbrd-grid-widget { - .ui-resizable-handle { - visibility: hidden; - } - - &.dashbrd-grid-widget-focus .ui-resizable-handle { - visibility: visible; - } - - &.ui-resizable-resizing { - &.dashbrd-grid-widget-hidden-header { - .dashbrd-grid-widget-head { - margin-top: 0; - height: 0; - box-shadow: none; - } - } - } - - &.ui-draggable-dragging { - .ui-resizable-handle { - visibility: hidden; - } - - &.dashbrd-grid-widget-hidden-header { - .dashbrd-grid-widget-head { - margin-top: -2rem; - height: 2rem; - box-shadow: 0 -6px 8px -2px rgba(128, 128, 128, .15); - opacity: .5; - } - } - } - - &.ui-resizable-resizing, - &.ui-draggable-dragging { - z-index: 1000; - - &::before { - content: ''; - display: block; - position: absolute; - top: .25rem; - left: .25rem; - right: .25rem; - bottom: .25rem; - background-color: rgba(darken($body-bg-color, 6%), .75); - box-shadow: 0 4px 20px 2px rgba(0, 0, 0, .15); - } - - .dashbrd-grid-widget-head { - border-color: darken($ui-border-color, 6%); - } - - .dashbrd-grid-widget-content { - border-color: darken($ui-border-color, 6%); - } - } - } - - .dashbrd-grid-iterator { - .ui-resizable-handle { - visibility: hidden; - } - - &.dashbrd-grid-iterator-focus .ui-resizable-handle { - visibility: visible; - } - - &.ui-resizable-resizing { - .dashbrd-grid-iterator-head { - margin-top: 0; - height: 0; - box-shadow: none; - opacity: 0; - } - } - - &.ui-draggable-dragging { - .ui-resizable-handle { - visibility: hidden; - } - - .dashbrd-grid-iterator-head { - margin-top: -2rem; - height: 2rem; - box-shadow: 0 -6px 8px -2px rgba(128, 128, 128, .15); - opacity: .5; - } - - &.dashbrd-grid-iterator-hidden-header.iterator-double-header { - .dashbrd-grid-iterator-head { - margin-top: -4rem; - height: 4rem; - } - } - } - - &.ui-resizable-resizing, - &.ui-draggable-dragging { - z-index: 1000; - - &::before { - content: ''; - display: block; - position: absolute; - top: .25rem; - left: .25rem; - right: .25rem; - bottom: .25rem; - background-color: rgba(darken($body-bg-color, 6%), .75); - box-shadow: 0 4px 20px 2px rgba(0, 0, 0, .15); - } - - .dashbrd-grid-iterator-head { - border-color: darken($ui-border-color, 6%); - } - - .dashbrd-grid-iterator-content { - .dashbrd-grid-widget { - .dashbrd-grid-widget-head { - border-color: darken($ui-border-color, 6%); - } - - .dashbrd-grid-widget-content { - border-color: darken($ui-border-color, 6%); - } - } - - .dashbrd-grid-iterator-placeholder > div { - border-color: darken($ui-border-color, 6%); - } - } - - .dashbrd-grid-iterator-mask { - border: 1px solid darken($ui-border-color, 8%); - border-top: 0; - } - } - } - - .dashbrd-grid-widget-placeholder { - position: absolute; - z-index: 999; - - > div { - position: absolute; - top: .25rem; - left: .25rem; - right: .25rem; - bottom: .25rem; - background-color: darken($body-bg-color, 6%) !important; - } - } -} - -@keyframes zoom-in-out { - 0% { - transform: scale(1); - } - 50% { - transform: scale(1.05); - } - 100% { - transform: scale(1); - } -} - -.new-widget { - animation: zoom-in-out .2s linear; -} - -.ui-resize-dot { - @extend %ui-resize-dot; -} - -.ui-resizable-border-n { - border-top: 1px solid $form-border-focus-color; - height: 5px; - margin: 0 .25rem; - flex: 1; -} - -.ui-resizable-border-e { - border-right: 1px solid $form-border-focus-color; - width: 5px; - margin: .25rem 0; - flex: 1; -} - -.ui-resizable-border-s { - border-bottom: 1px solid $form-border-focus-color; - height: 5px; - margin: 0 .25rem; - flex: 1; -} - -.ui-resizable-border-w { - border-left: 1px solid $form-border-focus-color; - width: 5px; - margin: .25rem 0; - flex: 1; -} - -.ui-resizable-n { - @extend %ui-resizable; - cursor: ns-resize; - height: 5px; - width: 100%; - top: 4px; - left: 0; - - .ui-resize-dot { - left: 0; - right: 0; - margin: auto; - bottom: 0; - } -} - -.ui-resizable-ne { - @extend %ui-resize-dot; - cursor: nesw-resize; - right: 0; - top: 0; -} - -.ui-resizable-nw { - @extend %ui-resize-dot; - cursor: nwse-resize; - left: 0; - top: 0; -} - -.ui-resizable-e { - @extend %ui-resizable; - cursor: ew-resize; - width: 5px; - right: 4px; - top: 0; - height: 100%; - - .ui-resize-dot { - left: 0; - top: 50%; - transform: translateY(-50%); - } -} - -.ui-resizable-s { - @extend %ui-resizable; - cursor: ns-resize; - height: 5px; - width: 100%; - bottom: 5px; - left: 0; - - .ui-resize-dot { - left: 0; - right: 0; - margin: auto; - bottom: -5px; - } -} - -.ui-resizable-se { - @extend %ui-resize-dot; - cursor: nwse-resize; - right: 0; - bottom: 0; -} - -.ui-resizable-sw { - @extend %ui-resize-dot; - cursor: nesw-resize; - left: 0; - bottom: 0; -} - -.ui-resizable-w { - @extend %ui-resizable; - cursor: ew-resize; - width: 5px; - left: 4px; - top: 0; - height: 100%; - - .ui-resize-dot { - right: 0; - top: 50%; - transform: translateY(-50%); - } -} - -.ui-inner-handles { - .ui-resizable-n { - top: 0; - } - - .ui-resizable-ne { - top: -4px; - right: -4px; - } - - .ui-resizable-nw { - top: -4px; - left: -4px; - } - - .ui-resizable-e { - right: 0; - } - - .ui-resizable-s { - bottom: 0; - } - - .ui-resizable-se { - bottom: -4px; - right: -4px; - } - - .ui-resizable-sw { - bottom: -4px; - left: -4px; - } - - .ui-resizable-w { - left: 0; - } -} - -%ui-resize-dot { - z-index: 90; - width: 7px; - height: 7px; - position: absolute; - background-color: $ui-bg-color; - border: 1px solid $form-border-focus-color; - border-radius: 100%; -} - -%ui-resizable { - z-index: 90; - position: absolute; - display: flex; -} - -.dashbrd-widget-placeholder { - border-color: darken($body-bg-color, 6%) !important; - background-color: darken($body-bg-color, 6%) !important; -} - -.dashbrd-widget-draggable { - border-color: $action-border-color !important; - border-bottom-color: darken($action-border-color, 1%) !important; - box-shadow: 0 4px 20px 0 $action-shadow-color; -} - -.dashbrd-widget { - min-width: 250px; - margin: 0 10px 10px 0; - background-color: $ui-bg-color; - border: 1px solid $ui-border-color; - - .list-table { - border: 0; - - th { - @extend %dashbrd-widget-td; - } - - td { - @extend %dashbrd-widget-td; - } - - tbody tr { - &:last-child td { - border-bottom: 1px solid $table-border-color; - } - } - } - - .msg-bad, - .msg-good, - .msg-warning { - margin: 0 10px; - } - - &.dashbrd-widget-fluid { - margin-right: 0; - } -} - %nothing-to-show { color: $font-alt-color; text-align: center; @@ -3915,71 +2887,6 @@ $form-icon-btn: ( } } -%dashbrd-widget-td { - &:first-child { - padding-left: 10px; - } - - &:last-child { - padding-right: 10px; - } -} - -.dashbrd-widget-head { - position: relative; - padding: 8px 60px 8px 10px; - - h4 { - color: widget-head-font-color($font-color); - font-weight: bold; - } - - ul { - position: absolute; - top: 0; - right: 0; - - li { - display: block; - float: left; - padding: 0; - - select { - margin: 4px 0; - } - } - } - - z-select { - .list { - li { - float: none; - line-height: normal; - padding: 5px; - } - } - } -} - -.dashbrd-widget-foot { - text-align: right; - color: $font-alt-color; - margin: 0 10px; - - li { - display: inline-block; - padding: 8px 0 8px 13px; - } -} - -.dashbrd-widget-graph-link { - display: block; - - &:link { - border: 0; - } -} - // Action Menus, Pop-up Menus. .menu-popup { position: absolute; @@ -5634,13 +4541,6 @@ span { } } -.dashbrd-grid-widget-content, -.dashbrd-grid-iterator-content { - &.is-loading::before { - margin: calc(.25rem + 1px); - } -} - .overlay-dialogue.modal .overlay-dialogue-body { &.is-loading { overflow: hidden; @@ -7418,25 +6318,6 @@ z-select, } } -// Dashboard list table. -.dashboard-list { - .dashboard-list-item { - display: flex; - justify-content: space-between; - height: 18px; - - .status-green { - background-color: $dashboard-my-bg-color; - border-color: $dashboard-my-bg-color; - } - - .status-yellow { - background-color: $dashboard-shared-bg-color; - border-color: $dashboard-shared-bg-color; - } - } -} - .multiselect-description-container { display: flex; align-items: center; diff --git a/sass/stylesheets/sass/utils/_resizable.scss b/sass/stylesheets/sass/utils/_resizable.scss new file mode 100755 index 00000000000..685132e2e1d --- /dev/null +++ b/sass/stylesheets/sass/utils/_resizable.scss @@ -0,0 +1,175 @@ +.ui-resize-dot { + @extend %ui-resize-dot; +} + +.ui-resizable-border-n { + border-top: 1px solid $form-border-focus-color; + height: 5px; + margin: 0 .25rem; + flex: 1; +} + +.ui-resizable-border-e { + border-right: 1px solid $form-border-focus-color; + width: 5px; + margin: .25rem 0; + flex: 1; +} + +.ui-resizable-border-s { + border-bottom: 1px solid $form-border-focus-color; + height: 5px; + margin: 0 .25rem; + flex: 1; +} + +.ui-resizable-border-w { + border-left: 1px solid $form-border-focus-color; + width: 5px; + margin: .25rem 0; + flex: 1; +} + +.ui-resizable-n { + @extend %ui-resizable; + cursor: ns-resize; + height: 5px; + width: 100%; + top: 4px; + left: 0; + + .ui-resize-dot { + left: 0; + right: 0; + margin: auto; + bottom: 0; + } +} + +.ui-resizable-ne { + @extend %ui-resize-dot; + cursor: nesw-resize; + right: 0; + top: 0; +} + +.ui-resizable-nw { + @extend %ui-resize-dot; + cursor: nwse-resize; + left: 0; + top: 0; +} + +.ui-resizable-e { + @extend %ui-resizable; + cursor: ew-resize; + width: 5px; + right: 4px; + top: 0; + height: 100%; + + .ui-resize-dot { + left: 0; + top: 50%; + transform: translateY(-50%); + } +} + +.ui-resizable-s { + @extend %ui-resizable; + cursor: ns-resize; + height: 5px; + width: 100%; + bottom: 5px; + left: 0; + + .ui-resize-dot { + left: 0; + right: 0; + margin: auto; + bottom: -5px; + } +} + +.ui-resizable-se { + @extend %ui-resize-dot; + cursor: nwse-resize; + right: 0; + bottom: 0; +} + +.ui-resizable-sw { + @extend %ui-resize-dot; + cursor: nesw-resize; + left: 0; + bottom: 0; +} + +.ui-resizable-w { + @extend %ui-resizable; + cursor: ew-resize; + width: 5px; + left: 4px; + top: 0; + height: 100%; + + .ui-resize-dot { + right: 0; + top: 50%; + transform: translateY(-50%); + } +} + +.ui-inner-handles { + .ui-resizable-n { + top: 0; + } + + .ui-resizable-ne { + top: -4px; + right: -4px; + } + + .ui-resizable-nw { + top: -4px; + left: -4px; + } + + .ui-resizable-e { + right: 0; + } + + .ui-resizable-s { + bottom: 0; + } + + .ui-resizable-se { + bottom: -4px; + right: -4px; + } + + .ui-resizable-sw { + bottom: -4px; + left: -4px; + } + + .ui-resizable-w { + left: 0; + } +} + +%ui-resize-dot { + z-index: 90; + width: 7px; + height: 7px; + position: absolute; + background-color: $ui-bg-color; + border: 1px solid $form-border-focus-color; + border-radius: 100%; +} + +%ui-resizable { + z-index: 90; + position: absolute; + display: flex; +} |