diff options
author | Dace Petra <dace.petra@zabbix.com> | 2022-08-04 10:38:03 +0300 |
---|---|---|
committer | Dace Petra <dace.petra@zabbix.com> | 2022-08-04 10:38:03 +0300 |
commit | eee125f1361236201b0aa14a748bdfca1041e455 (patch) | |
tree | 7e6f9a427f7f61579a8ec84c40aefcbea0909c5d /sass | |
parent | 6cd230fe716d100ec826cdbfcdba857bdf743903 (diff) | |
parent | ea2e3cdc423e8482f3adc1382d0d1977a12e4c0c (diff) |
.......... [ZBXNEXT-7830] updated to latest master; no conflicts.
Diffstat (limited to 'sass')
11 files changed, 66 insertions, 36 deletions
diff --git a/sass/stylesheets/sass/base/_colors.scss b/sass/stylesheets/sass/base/_colors.scss index ae326832b64..3be2b6d1203 100644 --- a/sass/stylesheets/sass/base/_colors.scss +++ b/sass/stylesheets/sass/base/_colors.scss @@ -129,6 +129,7 @@ $form-bg-color: #ffffff !default; $form-border-color: #acbbc2 !default; $form-border-focus-color: #02659f !default; $form-label-asterisk-color: $red; +$form-fields-group-border-color: #ebeef0 !default; $form-disabled-font-color: #acbbc2 !default; $form-disabled-bg-color: #ebebeb !default; diff --git a/sass/stylesheets/sass/components/dashboard/_dashboard.scss b/sass/stylesheets/sass/components/dashboard/_dashboard.scss index 4906bf7bbbf..726e26674ff 100644 --- a/sass/stylesheets/sass/components/dashboard/_dashboard.scss +++ b/sass/stylesheets/sass/components/dashboard/_dashboard.scss @@ -1061,6 +1061,24 @@ } } +.dashboard-widget-form { + position: relative; + + .form-field-show-header { + position: absolute; + right: 5px; + } + + .table-tags { + tr:last-of-type { + td { + padding-bottom: 0; + line-height: 1.4; + } + } + } +} + .wrapper.layout-kioskmode { .dashboard-navigation { diff --git a/sass/stylesheets/sass/components/dashboard/_widget-clock.scss b/sass/stylesheets/sass/components/dashboard/_widget-clock.scss index 0e1596c2d2e..41497454cf9 100644 --- a/sass/stylesheets/sass/components/dashboard/_widget-clock.scss +++ b/sass/stylesheets/sass/components/dashboard/_widget-clock.scss @@ -1,11 +1,11 @@ // Widget configuration. -form.dashboard-grid-widget-clock { - .field-group-date, - .field-group-time, - .field-group-tzone { +form.dashboard-widget-clock { + .fields-group-date, + .fields-group-time, + .fields-group-tzone { display: grid; - grid-template-columns: repeat(3, minmax(60px, max-content) auto); + grid-template-columns: 60px 120px repeat(2, minmax(60px, max-content) auto); align-items: center; column-gap: 10px; row-gap: 5px; @@ -21,13 +21,13 @@ form.dashboard-grid-widget-clock { } } - .field-group-time { + .fields-group-time { .field-format { grid-column: 4 / -1; } } - .field-group-tzone { + .fields-group-tzone { .field-format { grid-column: 2 / -1; } @@ -40,7 +40,7 @@ form.dashboard-grid-widget-clock { // Widget view. -div.dashboard-grid-widget-clock { +div.dashboard-widget-clock { &.clock-digital { $line-height: 1.14; diff --git a/sass/stylesheets/sass/components/dashboard/_widget-item.scss b/sass/stylesheets/sass/components/dashboard/_widget-item.scss index 01efecca8ac..f3a36d2d73a 100644 --- a/sass/stylesheets/sass/components/dashboard/_widget-item.scss +++ b/sass/stylesheets/sass/components/dashboard/_widget-item.scss @@ -1,10 +1,10 @@ // Widget configuration. -form.dashboard-grid-widget-item { - .field-group-description, - .field-group-value, - .field-group-time, - .field-group-change-indicator { +form.dashboard-widget-item { + .fields-group-description, + .fields-group-value, + .fields-group-time, + .fields-group-change-indicator { display: grid; grid-template-columns: minmax(100px, max-content) 3fr max-content auto; align-items: center; @@ -42,13 +42,13 @@ form.dashboard-grid-widget-item { } } - .field-group-description { + .fields-group-description { .form-field:nth-child(1) { grid-column: 1 / -1; } } - .field-group-value { + .fields-group-value { grid-template-columns: minmax(100px, max-content) 3fr max-content auto; .units-show { @@ -60,26 +60,18 @@ form.dashboard-grid-widget-item { } } - .field-group-change-indicator { + .fields-group-change-indicator { grid-template-columns: repeat(3, max-content 96px); } - .field-group-change-indicator .input-color-picker { + .fields-group-change-indicator .input-color-picker { display: block; } - - .table-forms { - .table-forms-td-left { - label.widget-item-label { - margin-top: 6px; - } - } - } } // Widget view. -div.dashboard-grid-widget-item { +div.dashboard-widget-item { $line-height: 1.14; box-sizing: border-box; @@ -220,7 +212,7 @@ div.dashboard-grid-widget-item { } } -.dashboard-grid-widget-item { +.dashboard-widget-item { .svg-arrow-up { fill: $arrow-fill-up; } @@ -237,7 +229,7 @@ div.dashboard-grid-widget-item { // Modifications by themes. @if $theme-name == 'hc-dark' or $theme-name == 'hc-light' { - div.dashboard-grid-widget-item { + div.dashboard-widget-item { a { &:link { border-bottom: none; diff --git a/sass/stylesheets/sass/components/dashboard/_widget-slareport.scss b/sass/stylesheets/sass/components/dashboard/_widget-slareport.scss index f71d6e9aae3..425b5a9d4b9 100644 --- a/sass/stylesheets/sass/components/dashboard/_widget-slareport.scss +++ b/sass/stylesheets/sass/components/dashboard/_widget-slareport.scss @@ -1,6 +1,6 @@ // Widget view. -div.dashboard-grid-widget-slareport { +div.dashboard-widget-slareport { .date-vertical { writing-mode: vertical-lr; diff --git a/sass/stylesheets/sass/components/dashboard/_widget-svggraph.scss b/sass/stylesheets/sass/components/dashboard/_widget-svggraph.scss index 35242966410..e32ad97b80a 100644 --- a/sass/stylesheets/sass/components/dashboard/_widget-svggraph.scss +++ b/sass/stylesheets/sass/components/dashboard/_widget-svggraph.scss @@ -1,6 +1,6 @@ // Widget configuration. -form.dashboard-grid-widget-svggraph { +form.dashboard-widget-svggraph { .graph-widget-config-tabs { padding: 10px 0; diff --git a/sass/stylesheets/sass/components/dashboard/_widget-tophosts.scss b/sass/stylesheets/sass/components/dashboard/_widget-tophosts.scss index 7595adc7fc9..65ce3c7c8a1 100644 --- a/sass/stylesheets/sass/components/dashboard/_widget-tophosts.scss +++ b/sass/stylesheets/sass/components/dashboard/_widget-tophosts.scss @@ -1,7 +1,7 @@ // Widget configuration. -form.dashboard-grid-widget-tophosts { - $width-small: 150px; +form.dashboard-widget-tophosts { + $width-small: 250px; #list_columns .text { @extend %overflow-ellipsis; @@ -15,7 +15,7 @@ form.dashboard-grid-widget-tophosts { // Widget view. -div.dashboard-grid-widget-tophosts { +div.dashboard-widget-tophosts { $bar-gauge-height: 20px; .list-table th.center { diff --git a/sass/stylesheets/sass/dark-theme.scss b/sass/stylesheets/sass/dark-theme.scss index 633a26a79df..0a31b24ce16 100644 --- a/sass/stylesheets/sass/dark-theme.scss +++ b/sass/stylesheets/sass/dark-theme.scss @@ -96,6 +96,7 @@ $form-font-color: #e1e3ed; $form-bg-color: #383838; $form-border-color: #4f4f4f; $form-border-focus-color: #768d99; +$form-fields-group-border-color: #383838; $form-disabled-font-color: #525252; $form-disabled-bg-color: #2b2b2b; diff --git a/sass/stylesheets/sass/hc-dark.scss b/sass/stylesheets/sass/hc-dark.scss index 37bc5bcdd8f..9c09a085b52 100644 --- a/sass/stylesheets/sass/hc-dark.scss +++ b/sass/stylesheets/sass/hc-dark.scss @@ -144,6 +144,7 @@ $form-font-color: #e1e3ed; $form-bg-color: #383838; $form-border-color: #666666; $form-border-focus-color: #bbbbbb; +$form-fields-group-border-color: #333333; $form-disabled-font-color: #7d7d7d; $form-disabled-bg-color: #000000; diff --git a/sass/stylesheets/sass/hc-light.scss b/sass/stylesheets/sass/hc-light.scss index b598bb73ee0..6f7675dc024 100644 --- a/sass/stylesheets/sass/hc-light.scss +++ b/sass/stylesheets/sass/hc-light.scss @@ -138,6 +138,7 @@ $form-font-color: #000000; $form-bg-color: #ffffff; $form-border-color: #888888; $form-border-focus-color: #000000; +$form-fields-group-border-color: #888888; $form-disabled-font-color: #9f9f9f; $form-disabled-bg-color: #f0f0f0; diff --git a/sass/stylesheets/sass/layout/_form-grid.scss b/sass/stylesheets/sass/layout/_form-grid.scss index c01fda6a0d5..dedda435665 100644 --- a/sass/stylesheets/sass/layout/_form-grid.scss +++ b/sass/stylesheets/sass/layout/_form-grid.scss @@ -12,15 +12,25 @@ grid-template-columns: max-content auto; } + .fields-group { + grid-column: 2 / -1; + padding: 5px; + border: 1px solid $form-fields-group-border-color; + } + > label { line-height: 24px; text-align: right; word-wrap: break-word; + + &.fields-group-label { + padding-top: 5px; + } } - .form-actions, - .form-field, - .field-fluid { + > .form-field, + > .field-fluid, + .form-actions { grid-column: 2 / -1; text-align: left; line-height: 24px; @@ -57,6 +67,12 @@ &.table-initial-width { width: auto; } + + .sortable td { + padding-bottom: 0; + vertical-align: middle; + line-height: 24px; + } } th { |