diff options
Diffstat (limited to 'sass')
-rwxr-xr-x | sass/stylesheets/sass/components/_color-picker.scss | 98 | ||||
-rw-r--r-- | sass/stylesheets/sass/components/_tabfilter.scss | 29 | ||||
-rw-r--r-- | sass/stylesheets/sass/dark-theme.scss | 5 | ||||
-rw-r--r-- | sass/stylesheets/sass/hc-dark.scss | 8 | ||||
-rw-r--r-- | sass/stylesheets/sass/screen.scss | 142 |
5 files changed, 164 insertions, 118 deletions
diff --git a/sass/stylesheets/sass/components/_color-picker.scss b/sass/stylesheets/sass/components/_color-picker.scss new file mode 100755 index 00000000000..0baf9aa3597 --- /dev/null +++ b/sass/stylesheets/sass/components/_color-picker.scss @@ -0,0 +1,98 @@ +.color-picker, +.color-picker-dialogue { + .color-picker-preview { + position: relative; + background: url($sprite-path) no-repeat -323px -411px; + border: 1px solid $form-border-color; + color: $font-color; + vertical-align: inherit; + } + + .use-default { + background: none; + + &::after { + content: attr(data-use-default); + position: absolute; + top: 0; + right: 0; + left: 0; + text-align: center; + } + } +} + +.color-picker { + display: inline-block; + line-height: 1.2; + vertical-align: sub; + + .color-picker-preview { + padding: 0; + background-position: -321px -409px; + width: 24px; + + &:after { + line-height: 22px; + } + } + + input:disabled + button { + pointer-events: none; + background: $form-disabled-font-color !important; + border-color: $form-disabled-font-color; + } +} + +.color-picker-dialogue { + > div { + &:first-of-type { + margin-bottom: 5px; + } + + &:not(:first-of-type) { + button { + padding: 0; + width: 20px; + min-height: 20px; + border: 1px solid $ui-bg-color; + border-radius: 0; + vertical-align: middle; + transition: none; + + &:hover, + &:focus { + border-color: $form-border-focus-color; + box-shadow: inset 0 0 0 1px $ui-bg-color; + } + + &:active { + box-shadow: inset 0 0 0 2px $ui-bg-color; + } + } + } + } + + .color-picker-input { + position: relative; + display: inline-block; + margin-right: 3px; + + .color-picker-preview { + position: absolute; + top: 2px; + left: 2px; + width: 18px; + height: 18px; + + &:after { + line-height: 18px; + } + } + + input { + padding-left: 25px; + } + } +} + diff --git a/sass/stylesheets/sass/components/_tabfilter.scss b/sass/stylesheets/sass/components/_tabfilter.scss index f4c9abf47c3..8807d133c3b 100644 --- a/sass/stylesheets/sass/components/_tabfilter.scss +++ b/sass/stylesheets/sass/components/_tabfilter.scss @@ -31,6 +31,23 @@ $tab-label-counter-bg-color: $form-disabled-bg-color; background-color: $ui-bg-color; padding: 10px 0; margin-bottom: 6px; + + &.tabfilter-collapsed { + .tabfilter-tabs-container, + .form-buttons { + display: none; + } + } + } + + .subfilter-option-grid { + grid-template-columns: minmax(75px, max-content) auto; + display: grid; + margin: 5px 0; + + .subfilter-options { + grid-column: 2 / -1; + } } /* Top navigation labels */ @@ -162,7 +179,7 @@ $tab-label-counter-bg-color: $form-disabled-bg-color; pointer-events: none; } - .icon-home.tabfilter-item-link[data-counter]::after { + .icon-filter.tabfilter-item-link[data-counter]::after { display: none; } } @@ -226,16 +243,16 @@ $tab-label-counter-bg-color: $form-disabled-bg-color; } } -.icon-home::before { +.icon-filter::before { display: block; - width: 22px; + width: 24px; height: 24px; content: ''; // white icon - background: url($sprite-path) no-repeat -433px -510px; + background: url($sprite-path) no-repeat -87px -547px; } -.selected.expanded .icon-home::before { +.selected.expanded .icon-filter::before { // grey icon - background: url($sprite-path) no-repeat -121px -510px; + background-position: -246px -547px; } diff --git a/sass/stylesheets/sass/dark-theme.scss b/sass/stylesheets/sass/dark-theme.scss index fa41e6d02f7..f8170f785ba 100644 --- a/sass/stylesheets/sass/dark-theme.scss +++ b/sass/stylesheets/sass/dark-theme.scss @@ -442,3 +442,8 @@ $toc-title-bg-color: #4f4f4f; content: ""; } } + +.selected.expanded .icon-filter::before { + // grey icon + background-position: -87px -547px; +} diff --git a/sass/stylesheets/sass/hc-dark.scss b/sass/stylesheets/sass/hc-dark.scss index 08689d0e2f6..0fb08f173f4 100644 --- a/sass/stylesheets/sass/hc-dark.scss +++ b/sass/stylesheets/sass/hc-dark.scss @@ -1521,14 +1521,14 @@ td.inactive-bg { .filter-container.tabfilter-container { - .selected.expanded .icon-home::before { + .selected.expanded .icon-filter::before { // white icon - background: url($sprite-path) no-repeat -433px -510px; + background: url($sprite-path) no-repeat -87px -547px; } - .icon-home::before { + .icon-filter::before { // black icon - background: url($sprite-path) no-repeat -281px -510px; + background: url($sprite-path) no-repeat -246px -547px; } .tabfilter-item-label { diff --git a/sass/stylesheets/sass/screen.scss b/sass/stylesheets/sass/screen.scss index 10ec325f800..1711390ed35 100644 --- a/sass/stylesheets/sass/screen.scss +++ b/sass/stylesheets/sass/screen.scss @@ -28,6 +28,7 @@ $browser-sprite-path: '../img/browser-sprite.png?20211222'; @import "layout/form-grid"; @import "components/buttons"; +@import "components/color-picker"; @import "components/dashboard/dashboard"; @import "components/dashboard/widget-item"; @import "components/diff"; @@ -297,17 +298,26 @@ form { .action-container { display: flex; width: 100%; + height: 18px; + line-height: 18px; - .label { + .link-action { + height: 16px; + min-width: 1em; @extend %overflow-ellipsis; } - .separator { - margin-right: 4px; + [class*='icon-'] { + flex-shrink: 0; } - [class*='icon-'] { + .rel-container { + display: flex; + } + + .separator { flex-shrink: 0; + margin-right: 4px; } } @@ -495,25 +505,6 @@ form { margin-left: 2px; } } - - .action-container { - height: 18px; - line-height: 18px; - - .rel-container { - display: flex; - } - - .link-action { - height: 16px; - min-width: 1em; - @extend %overflow-ellipsis; - } - - .separator { - flex-shrink: 0; - } - } } thead th { @@ -4119,6 +4110,16 @@ a.link-action { @extend %overflow-ellipsis; border-radius: 2px; + a.link-action { + color: inherit !important; + border-bottom: none; + + &:hover { + text-decoration: underline; + border-bottom: none; + } + } + &:last-child { margin: 0; } @@ -4298,91 +4299,6 @@ td.inactive-bg { } } -// Color picker. -.color-picker { - height: 20px; - white-space: nowrap; - - div { - display: inline-block; - width: 18px; - height: 18px; - border: 1px solid $ui-bg-color; - - &:hover { - border-color: $alt-dark-blue; - box-shadow: inset 0 0 0 1px $ui-bg-color; - cursor: pointer; - } - - &:active { - box-shadow: inset 0 0 0 2px $ui-bg-color; - cursor: pointer; - } - } -} - -.input-color-picker { - display: inline-block; - vertical-align: middle; - - div { - width: 18px; - height: 18px; - background: url($sprite-path) no-repeat -323px -411px; - border: 1px solid $form-border-color; - margin: 1px; - cursor: pointer; - - &:focus { - border-color: $form-border-focus-color; - outline: none; - } - } - - div.use-default { - background: none; - position: relative; - - &::after { - content: attr(data-use-default); - position: absolute; - text-align: center; - line-height: 18px; - right: 0; - left: 0; - } - } - - input:disabled + div { - cursor: default; - background: $form-disabled-font-color !important; - border-color: $form-disabled-font-color; - } - - input[type="text"] { - padding-left: 25px; - } -} - -.color-picker-controls { - margin-bottom: 5px; - - .input-color-picker { - position: relative; - cursor: default; - margin-top: -2px; - - div { - position: absolute; - border-width: 1px; - margin: 0px; - left: 2px; - top: 2px; - } - } -} - // Preloader. @keyframes is-loading-kf { to { @@ -4819,6 +4735,7 @@ svg { display: inline-block; margin: 2px 7px 2px 0; white-space: nowrap; + vertical-align: middle; > div { position: relative; @@ -4847,6 +4764,15 @@ svg { } } } + + .color-picker { + .color-picker-preview { + margin: 1px; + width: 20px; + min-height: 20px; + background-position: -323px -411px; + } + } } .list-accordion-foot { |