diff --git a/assets/styles/base/_variables.scss b/assets/styles/base/_variables.scss index e1819c9ee46..ff3d9e23b00 100644 --- a/assets/styles/base/_variables.scss +++ b/assets/styles/base/_variables.scss @@ -3,8 +3,6 @@ $min-width: 75% !default; $column-gutter: 1.75%; -$outline-width: 1px; - $sideways-tabs-width: 200px; $z-indexes: ( @@ -18,15 +16,14 @@ $z-indexes: ( modalOverlay: 20, modalContent: 21, - dropdownOverlay: 30, - dropdownContent: 31, - - loadingOverlay: 40, - loadingContent: 41 -); + tooltip: 30, -$text-light: 300; + dropdownOverlay: 40, + dropdownContent: 41, + loadingOverlay: 50, + loadingContent: 51 +); // Usage Example: // @media only screen and (min-width: map-get($breakpoints, '--viewport-*')) { diff --git a/assets/styles/global/_form.scss b/assets/styles/global/_form.scss index 477354152e0..880ea7fb060 100644 --- a/assets/styles/global/_form.scss +++ b/assets/styles/global/_form.scss @@ -20,7 +20,7 @@ TEXTAREA, padding: 8px; background-color: var(--input-bg); border-radius: var(--border-radius); - border: solid $outline-width var(--input-border); + border: solid var(--outline-width) var(--input-border); color: var(--input-text); &:not(.focused) { diff --git a/assets/styles/global/_tooltip.scss b/assets/styles/global/_tooltip.scss index 148a62c2ff4..8e7a98d0220 100644 --- a/assets/styles/global/_tooltip.scss +++ b/assets/styles/global/_tooltip.scss @@ -4,7 +4,7 @@ $center: calc(50% - #{$triangle-size}); display: block !important; - z-index: 10000; + z-index: z-index('tooltip'); .tooltip-inner { background: var(--tooltip-bg); diff --git a/assets/styles/themes/_dark.scss b/assets/styles/themes/_dark.scss index a72b1548363..61ac38fe1bf 100644 --- a/assets/styles/themes/_dark.scss +++ b/assets/styles/themes/_dark.scss @@ -117,7 +117,7 @@ --tabbed-border: #{$medium}; --tabbed-sidebar-bg: #{$darkest}; - --tabbed-container-bg: #{$dark}; + --tabbed-container-bg: #{mix($medium, $dark, 10%)}; --yaml-editor-bg: #{$darkest}; @@ -139,7 +139,7 @@ --diff-empty-placeholder : #{$darker}; - --wm-tabs-bg: #{$darker}; + --wm-tabs-bg: #{mix($medium, $dark, 10%)}; --wm-tab-bg: #{$darkest}; --wm-closer-hover-bg: #{$medium}; --wm-tab-active-bg: #{$darker}; diff --git a/assets/styles/themes/_light.scss b/assets/styles/themes/_light.scss index dc54519103a..0cf1fbeece2 100644 --- a/assets/styles/themes/_light.scss +++ b/assets/styles/themes/_light.scss @@ -172,7 +172,7 @@ $selected: rgba($primary, .5); --wm-title-border : #{$medium}; --wm-body-bg : #{$lighter}; --wm-border : var(--border); - --wm-tab-height : 25px; + --wm-tab-height : 29px; --glance-bg-rgb : 61, 152, 211; --glance-divider : #{rgba($primary, 0.5)}; diff --git a/assets/styles/vendor/vue-select.scss b/assets/styles/vendor/vue-select.scss index 1d436dc1f29..afe4d264179 100644 --- a/assets/styles/vendor/vue-select.scss +++ b/assets/styles/vendor/vue-select.scss @@ -35,7 +35,7 @@ position: absolute; top: calc(100% - 1px); left: 0; - z-index: 1000; + z-index: z-index('dropdownContent'); padding: 5px 0; margin: 0; width: 100%; diff --git a/components/form/Select.vue b/components/form/Select.vue index 6d84ceb87c2..c1628170e15 100644 --- a/components/form/Select.vue +++ b/components/form/Select.vue @@ -28,12 +28,9 @@ export default { * above. */ const popper = createPopper(component.$refs.toggle, dropdownList, { + placement: this.placement, modifiers: [ - { - name: 'flip', - options: { fallbackPlacements: ['top', 'right', 'left'] }, - }, { name: 'offset', options: { offset: [0, -1] } @@ -45,7 +42,8 @@ export default { fn({ state }) { component.$el.setAttribute('x-placement', state.placement); }, - }] + }, + ] }); /** @@ -62,6 +60,7 @@ export default { diff --git a/components/nav/WindowManager/ContainerLogs.vue b/components/nav/WindowManager/ContainerLogs.vue index 58ddcf8f1b3..a41b0b03205 100644 --- a/components/nav/WindowManager/ContainerLogs.vue +++ b/components/nav/WindowManager/ContainerLogs.vue @@ -107,6 +107,7 @@ export default { label: t('wm.containerLogs.range.lines', { value: x }), value, }); + updateFound(value); } for ( const x of minutes ) { @@ -142,7 +143,10 @@ export default { return out; function updateFound(entry) { - if ( entry === current || entry === `{ current }s` ) { + entry = entry.replace(/[, ]/g, '').replace(/s$/, ''); + const normalized = current.replace(/[, ]/g, '').replace(/s$/, ''); + + if ( entry === normalized) { found = true; } } @@ -442,10 +446,10 @@ export default { v-if="containerChoices.length > 0" v-model="container" :disabled="containerChoices.length === 1" - class="auto-width" + class="containerPicker auto-width" :options="containerChoices" - :searchable="false" :clearable="false" + placement="top" @input="switchTo($event)" >