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
+