From 7f60f42570f77d42bb88990d6db1885ae26e2715 Mon Sep 17 00:00:00 2001 From: lvuch Date: Fri, 29 Jan 2021 08:26:09 -0700 Subject: [PATCH 01/30] button padding to adjust height --- assets/styles/global/_button.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/styles/global/_button.scss b/assets/styles/global/_button.scss index cf94e28d22..7802de8d6c 100644 --- a/assets/styles/global/_button.scss +++ b/assets/styles/global/_button.scss @@ -1,5 +1,5 @@ // $btn-padding: 15px 40px; -$btn-padding: 0 20px 0 20px; +$btn-padding: 0 21px 0 21px; $btn-sm-padding: 0 7px 0 7px; $btn-height: 40px; $btn-sm-height: 30px; @@ -22,7 +22,7 @@ button, -moz-user-select: none; -ms-user-select: none; user-select: none; - border: 1px solid transparent; + border: 0; padding: $btn-padding; border-radius: var(--border-radius); color: white; From fc24af81e0790ad5a5052350bf793ac83093625f Mon Sep 17 00:00:00 2001 From: lvuch Date: Fri, 29 Jan 2021 09:45:24 -0700 Subject: [PATCH 02/30] port row and button sizes --- assets/styles/global/_button.scss | 5 ----- assets/styles/global/_form.scss | 2 +- components/Glance.vue | 1 - components/RoleBindings.vue | 2 +- components/form/EnvVars.vue | 2 +- components/form/KeyValue.vue | 4 ++-- components/form/LabeledSelect.vue | 2 +- components/form/MatchExpressions.vue | 2 +- components/form/Ports.vue | 2 +- components/form/ServicePorts.vue | 2 +- components/form/Tolerations.vue | 2 +- components/form/WorkloadPorts.vue | 8 ++++---- edit/monitoring.coreos.com.prometheusrule/GroupRules.vue | 4 ++-- edit/rio.cattle.io.service/Permissions.vue | 2 +- edit/workload/storage/Mount.vue | 2 +- 15 files changed, 18 insertions(+), 24 deletions(-) diff --git a/assets/styles/global/_button.scss b/assets/styles/global/_button.scss index 7802de8d6c..77d4408521 100644 --- a/assets/styles/global/_button.scss +++ b/assets/styles/global/_button.scss @@ -82,8 +82,6 @@ button, background: transparent; color: var(--link-text) !important; padding: $btn-padding; - letter-spacing: 1px; - text-transform: uppercase; } .role-multi-action { @@ -91,9 +89,6 @@ button, border: solid thin var(--link-text); color: var(--link-text); border-radius: 2px; - // line-height: 0; - // width: $btn-height; - // padding: 0; } .icon-group i { diff --git a/assets/styles/global/_form.scss b/assets/styles/global/_form.scss index f5d0a600b1..c927726111 100644 --- a/assets/styles/global/_form.scss +++ b/assets/styles/global/_form.scss @@ -17,7 +17,7 @@ TEXTAREA, display: block; box-sizing: border-box; width: 100%; - padding: 10px; + padding: 8px; background-color: var(--input-bg); border-radius: var(--border-radius); border: solid var(--border-width) var(--input-border); diff --git a/components/Glance.vue b/components/Glance.vue index 90817d5ba5..a3c64d3eb3 100644 --- a/components/Glance.vue +++ b/components/Glance.vue @@ -27,7 +27,6 @@ export default { flex-direction: row; justify-content: space-evenly; padding: 11px; - align-items: center; .tile { display: flex; diff --git a/components/RoleBindings.vue b/components/RoleBindings.vue index 77aa47d9cd..b2c658eba3 100644 --- a/components/RoleBindings.vue +++ b/components/RoleBindings.vue @@ -403,7 +403,7 @@ export default { />
-
diff --git a/components/form/EnvVars.vue b/components/form/EnvVars.vue index 0c10e612e7..b8ffb43108 100644 --- a/components/form/EnvVars.vue +++ b/components/form/EnvVars.vue @@ -110,7 +110,7 @@ export default { v-t="'workload.container.command.addEnvVar'" :disabled="isView" type="button" - class="btn btn-sm role-tertiary add" + class="btn role-tertiary add" @click="addFromReference" />
diff --git a/components/form/KeyValue.vue b/components/form/KeyValue.vue index 4dc6cb719b..c2d11ee9b9 100644 --- a/components/form/KeyValue.vue +++ b/components/form/KeyValue.vue @@ -424,7 +424,7 @@ export default {
- @@ -434,7 +434,7 @@ export default {
- .labeled-select { .labeled-container { - padding: 8px 0 0 8px; + padding: 7px 0 1px 8px; label { margin: 0; diff --git a/components/form/MatchExpressions.vue b/components/form/MatchExpressions.vue index bcecbe3d5b..7342100a1d 100644 --- a/components/form/MatchExpressions.vue +++ b/components/form/MatchExpressions.vue @@ -237,7 +237,7 @@ export default { diff --git a/components/form/ServicePorts.vue b/components/form/ServicePorts.vue index ae5e53adcd..d67d6aca1d 100644 --- a/components/form/ServicePorts.vue +++ b/components/form/ServicePorts.vue @@ -200,7 +200,7 @@ export default { />
-
diff --git a/components/form/Tolerations.vue b/components/form/Tolerations.vue index 91117794aa..1af9705e5d 100644 --- a/components/form/Tolerations.vue +++ b/components/form/Tolerations.vue @@ -180,7 +180,7 @@ export default {
-
@@ -279,7 +279,7 @@ export default {
-
@@ -305,7 +305,7 @@ $checkbox: 75; } .ports-headers, .ports-row{ display: grid; - grid-template-columns: 20% 3fr 160px 80px 10% 58px; + grid-template-columns: 20% 32% 145px 80px .5fr .5fr; grid-column-gap: $column-gutter; margin-bottom: 10px; align-items: center; @@ -315,7 +315,7 @@ $checkbox: 75; } &.show-host{ - grid-template-columns: 20% 3fr 160px 80px 160px 10% 1fr + grid-template-columns: 20% 20% 145px 80px 140px .5fr .5fr; } } diff --git a/edit/monitoring.coreos.com.prometheusrule/GroupRules.vue b/edit/monitoring.coreos.com.prometheusrule/GroupRules.vue index a1de1d74ce..0db8d32110 100644 --- a/edit/monitoring.coreos.com.prometheusrule/GroupRules.vue +++ b/edit/monitoring.coreos.com.prometheusrule/GroupRules.vue @@ -118,7 +118,7 @@ export default { v-if="!isView" :disabled="disableAddRecord" type="button" - class="btn btn-sm role-tertiary" + class="btn role-tertiary" @click="addRule('record')" > @@ -162,7 +162,7 @@ export default { v-if="!isView" :disabled="disableAddAlert" type="button" - class="btn btn-sm role-tertiary" + class="btn role-tertiary" @click="addRule('alert')" > diff --git a/edit/rio.cattle.io.service/Permissions.vue b/edit/rio.cattle.io.service/Permissions.vue index 60c61cd132..e0b21a3cf4 100644 --- a/edit/rio.cattle.io.service/Permissions.vue +++ b/edit/rio.cattle.io.service/Permissions.vue @@ -204,7 +204,7 @@ export default { - diff --git a/edit/workload/storage/Mount.vue b/edit/workload/storage/Mount.vue index d89c589c17..c3d38e6302 100644 --- a/edit/workload/storage/Mount.vue +++ b/edit/workload/storage/Mount.vue @@ -111,7 +111,7 @@ export default {
-
From 3476e8fea26b022cdc66d9995d096d5360db45a1 Mon Sep 17 00:00:00 2001 From: lvuch Date: Fri, 29 Jan 2021 14:46:17 -0700 Subject: [PATCH 03/30] spacer variables --- assets/styles/base/_variables.scss | 4 +++- assets/styles/global/_form.scss | 4 ++-- assets/styles/global/_labeled-input.scss | 21 ++++++++++----------- assets/styles/global/_select.scss | 2 +- assets/styles/themes/_light.scss | 2 +- 5 files changed, 17 insertions(+), 16 deletions(-) diff --git a/assets/styles/base/_variables.scss b/assets/styles/base/_variables.scss index c38b5d8b3e..efa9ade2b2 100644 --- a/assets/styles/base/_variables.scss +++ b/assets/styles/base/_variables.scss @@ -1,7 +1,9 @@ $max-width: 1440px !default; $min-width: 75% !default; $input-height: 55px; -// $input-height-small: 35px; + +$spacer1: 17px; +$spacer2: 8.5px; $column-gutter: 1.75%; diff --git a/assets/styles/global/_form.scss b/assets/styles/global/_form.scss index c927726111..606f47f0d3 100644 --- a/assets/styles/global/_form.scss +++ b/assets/styles/global/_form.scss @@ -17,7 +17,7 @@ TEXTAREA, display: block; box-sizing: border-box; width: 100%; - padding: 8px; + padding: $spacer2; background-color: var(--input-bg); border-radius: var(--border-radius); border: solid var(--border-width) var(--input-border); @@ -60,7 +60,7 @@ TEXTAREA, } TEXTAREA { - padding: 17px 10px 10px 10px; + padding: $spacer1 10px 10px 10px; line-height: 1.25; } diff --git a/assets/styles/global/_labeled-input.scss b/assets/styles/global/_labeled-input.scss index 421725e50b..29f067bf01 100644 --- a/assets/styles/global/_labeled-input.scss +++ b/assets/styles/global/_labeled-input.scss @@ -18,14 +18,6 @@ } } - /* - &.raised LABEL, .corner { - transform: translate(0, -20px); - font-size: 0.75em; - color: var(--input-label); - } - */ - .corner { top: 5px; right: 10px; @@ -36,6 +28,13 @@ transform: none !important; } +<<<<<<< HEAD +======= + .required { + color: var(--error); + } + +>>>>>>> bb339701... spacer variables INPUT, SELECT { position: relative; font-size: 14px; @@ -59,17 +58,17 @@ background-color: transparent; outline: 0; box-shadow: none; - padding: 17px 0 0 0; + padding: $spacer1 0 0 0; line-height: 1.25; &.no-label { - padding: 8.5px 0px 8.5px 0px; + padding: $spacer2 0px $spacer2 0px; } } &.view > DIV:not(.addon) { font-size: 14px; - padding: 17px 0 0 0; + padding: $spacer1 0 0 0; &.no-label { padding-top:0px; diff --git a/assets/styles/global/_select.scss b/assets/styles/global/_select.scss index 43e5f2e141..a84aac9055 100644 --- a/assets/styles/global/_select.scss +++ b/assets/styles/global/_select.scss @@ -4,7 +4,7 @@ width: 100%; .selected { - padding-top: 17px; + padding-top: $spacer1; } } diff --git a/assets/styles/themes/_light.scss b/assets/styles/themes/_light.scss index f103980a6e..ae92cdd00d 100644 --- a/assets/styles/themes/_light.scss +++ b/assets/styles/themes/_light.scss @@ -83,7 +83,7 @@ $selected: rgba($primary, .5); --border-width : 1px; --border-radius : 4px; --outline : #{rgba($medium, 0.75)}; - --outline-width : 2px; + --outline-width : 1px; --accent-btn : #{rgba($primary, 0.2)}; --accent-btn-hover : #{rgba($primary, 0.5)}; From 698458f990052f62a7f3d46f2f1d06bec40403ec Mon Sep 17 00:00:00 2001 From: lvuch Date: Mon, 1 Feb 2021 12:31:34 -0700 Subject: [PATCH 04/30] hover fix for role-primary --- assets/styles/base/_variables.scss | 4 ++-- assets/styles/global/_button.scss | 9 ++++++++- components/SortableTable/index.vue | 2 +- components/nav/NamespaceFilter.vue | 1 - pages/design-system/form-controls.vue | 2 +- 5 files changed, 12 insertions(+), 6 deletions(-) diff --git a/assets/styles/base/_variables.scss b/assets/styles/base/_variables.scss index efa9ade2b2..50a9c6a8b2 100644 --- a/assets/styles/base/_variables.scss +++ b/assets/styles/base/_variables.scss @@ -2,8 +2,8 @@ $max-width: 1440px !default; $min-width: 75% !default; $input-height: 55px; -$spacer1: 17px; -$spacer2: 8.5px; +$spacer1: 18px; +$spacer2: 9px; $column-gutter: 1.75%; diff --git a/assets/styles/global/_button.scss b/assets/styles/global/_button.scss index 77d4408521..908f278c3f 100644 --- a/assets/styles/global/_button.scss +++ b/assets/styles/global/_button.scss @@ -25,12 +25,13 @@ button, border: 0; padding: $btn-padding; border-radius: var(--border-radius); - color: white; + color: var(--lightest); // height: $btn-height; line-height: 38px; &:hover { text-decoration: none; + color: var(--lightest); } &.bg-transparent { @@ -64,6 +65,12 @@ button, //btn roles .role-primary { background: var(--link-text); + color: var(--primary-text); + + &:hover { + background-color: var(--primary-hover-bg); + color: var(--primary-text); + } } .role-secondary { diff --git a/components/SortableTable/index.vue b/components/SortableTable/index.vue index b4f72986b5..ee71d32e7b 100644 --- a/components/SortableTable/index.vue +++ b/components/SortableTable/index.vue @@ -462,7 +462,7 @@ export default { v-for="act in availableActions" :key="act.action" type="button" - class="btn bg-primary" + class="btn role-primary" :disabled="!act.enabled" @click="applyTableAction(act, null, $event)" @mouseover="setBulkActionOfInterest(act)" diff --git a/components/nav/NamespaceFilter.vue b/components/nav/NamespaceFilter.vue index b41883d6f9..bb274a2dc7 100644 --- a/components/nav/NamespaceFilter.vue +++ b/components/nav/NamespaceFilter.vue @@ -383,7 +383,6 @@ export default { } .filter ::v-deep .unlabeled-select:not(.focused) { - border: var(--outline-width) solid transparent; min-height: 0; } diff --git a/pages/design-system/form-controls.vue b/pages/design-system/form-controls.vue index 9befde6d97..ff01e03c88 100644 --- a/pages/design-system/form-controls.vue +++ b/pages/design-system/form-controls.vue @@ -73,7 +73,7 @@ export default { :tooltip="tooltip" /> -
+
Date: Mon, 1 Feb 2021 12:57:31 -0700 Subject: [PATCH 05/30] spacer name --- assets/styles/base/_variables.scss | 4 ++-- assets/styles/global/_form.scss | 4 ++-- assets/styles/global/_labeled-input.scss | 6 +++--- assets/styles/global/_select.scss | 2 +- components/form/TextAreaAutoGrow.vue | 2 +- 5 files changed, 9 insertions(+), 9 deletions(-) diff --git a/assets/styles/base/_variables.scss b/assets/styles/base/_variables.scss index 50a9c6a8b2..25c36d23b1 100644 --- a/assets/styles/base/_variables.scss +++ b/assets/styles/base/_variables.scss @@ -2,8 +2,8 @@ $max-width: 1440px !default; $min-width: 75% !default; $input-height: 55px; -$spacer1: 18px; -$spacer2: 9px; +$input-padding-lg: 18px; +$input-padding-sm: 9px; $column-gutter: 1.75%; diff --git a/assets/styles/global/_form.scss b/assets/styles/global/_form.scss index 606f47f0d3..1d7f83439e 100644 --- a/assets/styles/global/_form.scss +++ b/assets/styles/global/_form.scss @@ -17,7 +17,7 @@ TEXTAREA, display: block; box-sizing: border-box; width: 100%; - padding: $spacer2; + padding: $input-padding-sm; background-color: var(--input-bg); border-radius: var(--border-radius); border: solid var(--border-width) var(--input-border); @@ -60,7 +60,7 @@ TEXTAREA, } TEXTAREA { - padding: $spacer1 10px 10px 10px; + padding: $input-padding-lg 10px 10px 10px; line-height: 1.25; } diff --git a/assets/styles/global/_labeled-input.scss b/assets/styles/global/_labeled-input.scss index 29f067bf01..c0aeb88602 100644 --- a/assets/styles/global/_labeled-input.scss +++ b/assets/styles/global/_labeled-input.scss @@ -58,17 +58,17 @@ background-color: transparent; outline: 0; box-shadow: none; - padding: $spacer1 0 0 0; + padding: $input-padding-lg 0 0 0; line-height: 1.25; &.no-label { - padding: $spacer2 0px $spacer2 0px; + padding: $input-padding-sm 0px $input-padding-sm 0px; } } &.view > DIV:not(.addon) { font-size: 14px; - padding: $spacer1 0 0 0; + padding: $input-padding-lg 0 0 0; &.no-label { padding-top:0px; diff --git a/assets/styles/global/_select.scss b/assets/styles/global/_select.scss index a84aac9055..41d417352b 100644 --- a/assets/styles/global/_select.scss +++ b/assets/styles/global/_select.scss @@ -4,7 +4,7 @@ width: 100%; .selected { - padding-top: $spacer1; + padding-top: $input-padding-lg; } } diff --git a/components/form/TextAreaAutoGrow.vue b/components/form/TextAreaAutoGrow.vue index 9f5efa23f1..9bbd87bd8c 100644 --- a/components/form/TextAreaAutoGrow.vue +++ b/components/form/TextAreaAutoGrow.vue @@ -14,7 +14,7 @@ export default { minHeight: { type: Number, - default: 33, + default: 32, }, maxHeight: { type: Number, From e20713ff47d1b1ca8f1085409976be9259d5c0f5 Mon Sep 17 00:00:00 2001 From: lvuch Date: Mon, 1 Feb 2021 15:59:46 -0700 Subject: [PATCH 06/30] sortable table header button and input fix --- assets/styles/base/_variables.scss | 2 +- assets/styles/global/_button.scss | 8 ++------ assets/styles/global/_form.scss | 4 ++++ assets/styles/vendor/vue-select.scss | 6 +++--- components/form/LabeledSelect.vue | 2 +- components/form/TextAreaAutoGrow.vue | 2 +- pages/design-system/form-controls.vue | 2 +- 7 files changed, 13 insertions(+), 13 deletions(-) diff --git a/assets/styles/base/_variables.scss b/assets/styles/base/_variables.scss index 25c36d23b1..1c143cb39f 100644 --- a/assets/styles/base/_variables.scss +++ b/assets/styles/base/_variables.scss @@ -3,7 +3,7 @@ $min-width: 75% !default; $input-height: 55px; $input-padding-lg: 18px; -$input-padding-sm: 9px; +$input-padding-sm: 10px; $column-gutter: 1.75%; diff --git a/assets/styles/global/_button.scss b/assets/styles/global/_button.scss index 908f278c3f..cadeeba6fa 100644 --- a/assets/styles/global/_button.scss +++ b/assets/styles/global/_button.scss @@ -1,11 +1,7 @@ -// $btn-padding: 15px 40px; $btn-padding: 0 21px 0 21px; $btn-sm-padding: 0 7px 0 7px; $btn-height: 40px; $btn-sm-height: 30px; -// $xs-padding: 2px 3px; -// $sm-padding: 8px 13px; -// $lg-padding: 18px 30px; // ----------------------------------------------------------------------------- // This file contains all styles related to the button component. @@ -26,8 +22,8 @@ button, padding: $btn-padding; border-radius: var(--border-radius); color: var(--lightest); - // height: $btn-height; line-height: 38px; + min-height: $btn-height; &:hover { text-decoration: none; @@ -58,7 +54,7 @@ button, .btn-group-sm > .btn, .btn-sm .btn-label { padding: $btn-sm-padding; - height: $btn-sm-height; + min-height: $btn-sm-height; line-height: 28px; } diff --git a/assets/styles/global/_form.scss b/assets/styles/global/_form.scss index 1d7f83439e..4702a32b0c 100644 --- a/assets/styles/global/_form.scss +++ b/assets/styles/global/_form.scss @@ -59,6 +59,10 @@ TEXTAREA, } } +INPUT[type='search']:not(.vs__search) { + padding: calc($input-padding-sm + 2px); +} + TEXTAREA { padding: $input-padding-lg 10px 10px 10px; line-height: 1.25; diff --git a/assets/styles/vendor/vue-select.scss b/assets/styles/vendor/vue-select.scss index 2e5bb90df4..260663a92a 100644 --- a/assets/styles/vendor/vue-select.scss +++ b/assets/styles/vendor/vue-select.scss @@ -200,7 +200,7 @@ $transition-duration: 150ms; width: 0; max-width: 100%; flex-grow: 1; - margin-left: 7px; + margin-left: $input-padding-sm; } .vs__search::placeholder { @@ -242,7 +242,7 @@ $transition-duration: 150ms; border: 1px solid var(--primary); border-radius: 3px; color: var(--link-text); - margin-left: 7px; + margin-left: $input-padding-sm; &:not(:last-of-type) { margin-right: 2px; @@ -283,7 +283,7 @@ $transition-duration: 150ms; opacity: 0.4; } .vs__search { - margin-left: 7px; + margin-left: $input-padding-sm; } } .vs__selected { diff --git a/components/form/LabeledSelect.vue b/components/form/LabeledSelect.vue index 05c07cf920..6d4b10eac9 100644 --- a/components/form/LabeledSelect.vue +++ b/components/form/LabeledSelect.vue @@ -272,7 +272,7 @@ export default { diff --git a/components/nav/NamespaceFilter.vue b/components/nav/NamespaceFilter.vue index bb274a2dc7..425658e19e 100644 --- a/components/nav/NamespaceFilter.vue +++ b/components/nav/NamespaceFilter.vue @@ -380,6 +380,7 @@ export default { .filter ::v-deep .unlabeled-select { background-color: transparent; + border: 0; } .filter ::v-deep .unlabeled-select:not(.focused) { @@ -399,13 +400,13 @@ export default { user-select: none; cursor: default; background: rgba(255, 255, 255, 0.25); - border: solid white thin; - color: white; + border: solid var(--header-btn-text) thin; + color: var(--header-btn-text); height: calc(var(--header-height) - 26px); } .filter ::v-deep .unlabeled-select .vs__search::placeholder { - color: white; + color: var(--header-btn-text); } .filter ::v-deep .unlabeled-select INPUT:hover { @@ -423,12 +424,12 @@ export default { } .filter ::v-deep .unlabeled-select .vs__deselect:after { - color: white; + color: var(--header-btn-text); } .filter ::v-deep .unlabeled-select .v-select .vs__actions:after { - fill: white !important; - color: white !important; + fill: var(--header-btn-text) !important; + color: var(--header-btn-text) !important; } .filter ::v-deep .unlabeled-select INPUT[type='search'] { diff --git a/components/nav/WorkspaceSwitcher.vue b/components/nav/WorkspaceSwitcher.vue index e3094974dd..d506f4df86 100644 --- a/components/nav/WorkspaceSwitcher.vue +++ b/components/nav/WorkspaceSwitcher.vue @@ -91,10 +91,11 @@ export default { .filter ::v-deep .unlabeled-select { background-color: transparent; + border: 0; } .filter ::v-deep .unlabeled-select:not(.focused) { - border: var(--outline-width) solid transparent; + min-height: 0; } .filter ::v-deep .unlabeled-select:not(.view):hover .vs__dropdown-menu { @@ -105,8 +106,14 @@ export default { margin: 0; } +.filter ::v-deep .unlabeled-select .v-select .vs__selected { + margin: 4px; + user-select: none; + color: var(--header-btn-text); +} + .filter ::v-deep .unlabeled-select .vs__search::placeholder { - color: white; + color: var(--header-btn-text); } .filter ::v-deep .unlabeled-select INPUT:hover { @@ -124,12 +131,12 @@ export default { } .filter ::v-deep .unlabeled-select .vs__deselect:after { - color: white; + color: var(--header-btn-text); } .filter ::v-deep .unlabeled-select .v-select .vs__actions:after { - fill: white !important; - color: white !important; + fill: var(--header-btn-text) !important; + color: var(--header-btn-text) !important; } .filter ::v-deep .unlabeled-select INPUT[type='search'] { diff --git a/pages/c/_cluster/apps/charts.vue b/pages/c/_cluster/apps/charts.vue index ff6a4473d7..6b7068306e 100644 --- a/pages/c/_cluster/apps/charts.vue +++ b/pages/c/_cluster/apps/charts.vue @@ -320,50 +320,52 @@ export default {
- - - +
@@ -477,7 +477,7 @@ export default { trigger="click" placement="top" > - diff --git a/components/nav/WindowManager/Window.vue b/components/nav/WindowManager/Window.vue index 25743e912f..401db54240 100644 --- a/components/nav/WindowManager/Window.vue +++ b/components/nav/WindowManager/Window.vue @@ -65,7 +65,7 @@ export default {