diff --git a/.gitignore b/.gitignore index 542c145..9cb07b8 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,3 @@ .venv/ -test/scripts/csswatch.sh test/css/adduser.css.map +test/scripts/csswatch.sh diff --git a/test/css/adduser.css b/test/css/adduser.css index 1450b8d..3e5f3c0 100644 --- a/test/css/adduser.css +++ b/test/css/adduser.css @@ -129,7 +129,6 @@ body .form-container form .form-group.radio-input .radio-group label.radio { width: 100%; height: 100%; border-radius: 6px; - background: linear-gradient(to right, rgba(245, 245, 245, 0.9) 0%, rgba(245, 245, 245, 0.9) var(--value), rgba(245, 245, 245, 0.9) var(--value)); cursor: pointer; padding: 12px; border: 1px solid rgba(220, 220, 220, 0.8); @@ -156,7 +155,7 @@ body .form-container form .form-group input[type=range] { width: 100%; height: 45px; border-radius: 6px; - background-color: rgba(245, 245, 245, 0.9); + background: linear-gradient(to right, #009299 0%, #009299 var(--value), rgba(245, 245, 245, 0.9) 0%); border: 1px solid rgba(220, 220, 220, 0.8); cursor: pointer; padding: 0; @@ -166,37 +165,36 @@ body .form-container form .form-group input[type=range]::-webkit-slider-runnable width: 100%; height: 100%; border-radius: 6px; - background-color: linear-gradient(to right, rgba(245, 245, 245, 0.9) 0%, rgba(245, 245, 245, 0.9) var(--value), rgba(245, 245, 245, 0.9) 100%); } body .form-container form .form-group input[type=range]::-moz-range-track { width: 100%; height: 100%; border-radius: 6px; - background-color: linear-gradient(to right, rgba(245, 245, 245, 0.9) 0%, rgba(245, 245, 245, 0.9) var(--value), rgba(245, 245, 245, 0.9) 100%); } body .form-container form .form-group input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; + display: none; appearance: none; - width: 10px; + width: 0; height: 45px; border: none; border-radius: 6px; - background-color: rgba(245, 245, 245, 0.9); + background-color: #009299; cursor: pointer; margin: 0; padding: 0; - background-color: green; } body .form-container form .form-group input[type=range]::-moz-range-thumb { - width: 10px; + display: none; + appearance: none; + width: 0; height: 45px; border: none; border-radius: 6px; - background-color: rgba(245, 245, 245, 0.9); + background-color: #009299; cursor: pointer; margin: 0; padding: 0; - background-color: green; } body .form-container form .form-group input[type=range]:focus { outline: none; diff --git a/test/html/adduser.html b/test/html/adduser.html index 0324a05..c86036d 100644 --- a/test/html/adduser.html +++ b/test/html/adduser.html @@ -3,7 +3,7 @@ - + Add New User @@ -120,5 +120,5 @@ - + diff --git a/test/scss/_colors.scss b/test/scss/_colors.scss index 84a7a30..5a7ffcf 100644 --- a/test/scss/_colors.scss +++ b/test/scss/_colors.scss @@ -79,5 +79,12 @@ $user-form-radio-button-active-border-color: $user-form-checkbox-button-active-b //Range slider $user-form-range-slider-background: $add-user-input-background; -$user-form-range-slider-filled: $add-user-input-background; -$form-range-slider-background-gradient: linear-gradient(to right, $user-form-range-slider-filled 0%, $user-form-range-slider-filled var(--value), $user-form-range-slider-background var(--value)); \ No newline at end of file +$user-form-range-slider-filled: $user-form-checkbox-button-active-color; +//$form-range-slider-background-gradient: linear-gradient(to right, $user-form-range-slider-filled 0%, $user-form-range-slider-filled var(--value), $user-form-range-slider-background var(--value)); +$form-range-slider-background-gradient: + linear-gradient( + to right, + $user-form-range-slider-filled 0%, + $user-form-range-slider-filled var(--value), + $user-form-range-slider-background 0% + ); \ No newline at end of file diff --git a/test/scss/adduser.scss b/test/scss/adduser.scss index b71765d..683313a 100644 --- a/test/scss/adduser.scss +++ b/test/scss/adduser.scss @@ -144,7 +144,7 @@ body { width: 100%; height: 100%; border-radius: $input-field-border-radius; - background: $form-range-slider-background-gradient; + //background: $user-form-radio-button-color; cursor: pointer; padding: 12px; // Match the padding with the other styled elements border: 1px solid $add-user-input-border-color; @@ -175,22 +175,16 @@ body { // Style the range input to match the other form inputs --value: 50; - $form-range-slider-background-gradient: - linear-gradient( - to right, - $user-form-range-slider-filled 0%, - $user-form-range-slider-filled var(--value), - $user-form-range-slider-background 100% - ); $form-range-slider-height: 45px; @mixin slider_track { width: 100%; height: 100%; border-radius: $input-field-border-radius; - background-color: $form-range-slider-background-gradient; } @mixin slider_thumb { - width: 10px; + display: none; + appearance: none; + width: 0; height: $form-range-slider-height; border: none; border-radius: $input-field-border-radius; @@ -198,7 +192,6 @@ body { cursor: pointer; margin: 0; padding: 0; -background-color: green; } input[type="range"] { -webkit-appearance: none; @@ -206,7 +199,7 @@ background-color: green; width: 100%; height: $form-range-slider-height; border-radius: $input-field-border-radius; - background-color: $user-form-range-slider-background; + background: $form-range-slider-background-gradient; border: 1px solid $add-user-input-border-color; cursor: pointer; padding: 0; @@ -224,7 +217,6 @@ background-color: green; // Slider thumb &::-webkit-slider-thumb { -webkit-appearance: none; - appearance: none; @include slider_thumb; //border: 2px solid $add-user-input-border-color; }