diff options
Diffstat (limited to 'meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0076-IBS-custom-styles-_forms.scss.patch')
-rw-r--r-- | meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0076-IBS-custom-styles-_forms.scss.patch | 189 |
1 files changed, 189 insertions, 0 deletions
diff --git a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0076-IBS-custom-styles-_forms.scss.patch b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0076-IBS-custom-styles-_forms.scss.patch new file mode 100644 index 0000000000..293ad54330 --- /dev/null +++ b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0076-IBS-custom-styles-_forms.scss.patch @@ -0,0 +1,189 @@ +From f96c5c0e25f921cc8738817dd04ecfc1badbcbc6 Mon Sep 17 00:00:00 2001 +From: "Andrey V.Kosteltsev" <AKosteltsev@IBS.RU> +Date: Tue, 28 Jun 2022 06:41:02 +0300 +Subject: [PATCH] IBS: custom styles _forms.scss + +--- + src/assets/styles/bmc/custom/_forms.scss | 120 +++++++++++++++++++---- + 1 file changed, 99 insertions(+), 21 deletions(-) + +diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss +index 428a40c2..914bf379 100644 +--- a/src/assets/styles/bmc/custom/_forms.scss ++++ b/src/assets/styles/bmc/custom/_forms.scss +@@ -21,20 +21,12 @@ + .custom-select, + .form-control, + .input-group-text { +- border-color: gray("500") !important; +- background-color: gray("100"); ++ border-radius: $border-radius; ++ background-color: $white; + } + + .custom-select, + .form-control { +- &:active { +- border: 1px solid $primary!important; +- } +- &:focus { +- color: theme-color("dark"); +- background-color: gray("100"); +- box-shadow: inset 0 0 0 3px gray("100"), inset 0 0 0 5px $primary !important; +- } + &:disabled { + background-color: gray("400"); + color: gray("600"); +@@ -48,26 +40,52 @@ + } + } + +-.custom-select, +-.custom-control-label, ++.form-control::-webkit-outer-spin-button, ++.form-control::-webkit-inner-spin-button { ++ -webkit-appearance: none; ++ margin: 0; ++} ++.form-control[type='number'] { ++ -moz-appearance: textfield; ++} ++ + .form-control { +- color: theme-color("dark") !important; +- font-size: 1rem; ++ color: $text-secondary; ++ border-radius: $border-radius; ++ border: none; ++ background-color: $gray-5; ++ font-size: 0.875rem; ++ &:focus { ++ color: $text-secondary; ++ } ++ &:hover { ++ background-color: $gray-5-hover; ++ } + } + + // Inverted form colors + .form-background { +- background-color: gray("100"); ++ background-color: none; ++ padding: 0 !important; + .custom-select, + .form-control { +- background-color: $white; ++ color: #0c1c29e6; ++ border-radius: $border-radius; ++ border: none; ++ background-color: $gray-5; ++ &:hover { ++ background-color: $gray-5-hover; ++ } + &:focus { +- background-color: $white; ++ border: 1px solid gray("400"); + } + &:disabled { + background-color: gray("400"); + color: gray("600"); + } ++ &.is-valid { ++ border: 1px solid gray("400"); ++ } + } + } + +@@ -76,12 +94,22 @@ + line-height: $form-line-height; + } + ++.custom-checkbox ::before { ++ box-shadow: none !important; ++ border: 2px solid $on-surface-secondary; ++ background-color: #fff; ++ border-radius: 3px; ++} ++ + .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after, + .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before, + .custom-control-input:checked ~ .custom-control-label::before { +- background-color: $black; +- border-color: $black; ++ background-color: $red; ++ border-color: $red; + cursor: pointer; ++ &:focus { ++ box-shadow: none !important; ++ } + } + + .custom-control { +@@ -94,8 +122,35 @@ + } + } + +-.custom-control-input:focus ~ .custom-control-label::before{ +- box-shadow: 0 0 0 2px theme-color("primary"); ++.custom-switch { ++ width: 28px; ++ height: 16px; ++} ++ ++.custom-switch ++.custom-control-input:focus ~ .custom-control-label::before { ++ box-shadow: none; ++} ++ ++.custom-switch ++.custom-control-input ~ .custom-control-label::after { ++ border: 1px solid $gray-20; ++ background: $white; ++} ++ ++.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { ++ border-color: $gray-20; ++} ++ ++.custom-control-input:not(:disabled):active ~ .custom-control-label::before { ++ background-color: rgba(4, 10, 15, 0.3); ++ border-color: $gray-20; ++} ++ ++.custom-switch ++.custom-control-input ~ .custom-control-label::before { ++ border: 1px solid $gray-20; ++ background: rgba(4, 10, 15, 0.3); + } + + .custom-control-label::after { +@@ -130,3 +185,26 @@ + background-position: right 3rem bottom 50%; + } + } ++// For invisible label of fields ++.invisible { ++ height: 0; ++ margin-bottom: 0; ++} ++// Global style progress bar ++.progress { ++ height: 8px; ++ background-color: $gray-10; ++} ++ ++.progress-bar { ++ background-color: $red; ++ border-radius: 4px; ++} ++ ++.progress_bar_percent { ++ color: $red; ++} ++ ++.system-control__radio label { ++ padding-top: 4px; ++} +-- +2.35.1 + |