From 297ce7be553b1fac31efe267676a0a197685af67 Mon Sep 17 00:00:00 2001 From: candifloss Date: Mon, 28 Oct 2024 16:38:40 +0530 Subject: [PATCH] scss cleaning --- test/css/adduser.css | 92 ++++---- test/css/adduser.css.map | 1 - test/css/login.css | 2 - test/css/login.css.map | 1 - test/html/adduser.html | 16 +- test/js/rangeslider.js | 2 +- test/scripts/csswatch.sh | 6 +- test/scss/_colors.scss | 65 ++++-- test/scss/adduser.scss | 484 ++++++++++++++++++++------------------- 9 files changed, 350 insertions(+), 319 deletions(-) delete mode 100644 test/css/adduser.css.map delete mode 100644 test/css/login.css.map diff --git a/test/css/adduser.css b/test/css/adduser.css index 7dd9291..1450b8d 100644 --- a/test/css/adduser.css +++ b/test/css/adduser.css @@ -44,6 +44,7 @@ body .form-container form { body .form-container form .form-group { flex: 1 1 calc(50% - 20px); min-width: 250px; + --value: 50; } body .form-container form .form-group label { display: block; @@ -78,20 +79,20 @@ body .form-container form .form-group select:focus { border-color: #007b8a; outline: none; } -body .form-container form .admin-access label { +body .form-container form .form-group.checkbox-set label { display: block; color: #4e4e4e; font-size: 16px; margin-bottom: 5px; } -body .form-container form .admin-access .checkbox-group { +body .form-container form .form-group.checkbox-set .checkboxes { display: flex; gap: 10px; } -body .form-container form .admin-access .checkbox-group input[type=checkbox] { +body .form-container form .form-group.checkbox-set .checkboxes input[type=checkbox] { display: none; } -body .form-container form .admin-access .checkbox-group label.checkbox { +body .form-container form .form-group.checkbox-set .checkboxes label.checkbox { cursor: pointer; padding: 12px; border: 1px solid rgba(220, 220, 220, 0.8); @@ -103,28 +104,32 @@ body .form-container form .admin-access .checkbox-group label.checkbox { transition: background-color 0.3s, color 0.3s, border-color 0.3s; user-select: none; } -body .form-container form .admin-access .checkbox-group label.checkbox:hover, body .form-container form .admin-access .checkbox-group label.checkbox:focus { +body .form-container form .form-group.checkbox-set .checkboxes label.checkbox:hover, body .form-container form .form-group.checkbox-set .checkboxes label.checkbox:focus { background-color: rgba(232, 232, 232, 0.9); border-color: #007b8a; } -body .form-container form .admin-access .checkbox-group input[type=checkbox]:checked + label.checkbox { +body .form-container form .form-group.checkbox-set .checkboxes input[type=checkbox]:checked + label.checkbox { background-color: #009299; color: #ffffff; border-color: rgba(0, 170, 179, 0.8); } -body .form-container form .role-dropdown { +body .form-container form .form-group.dropdown-menu { flex: 1 1 calc(50% - 20px); min-width: 250px; padding: 0; } -body .form-container form .radio-group { +body .form-container form .form-group.radio-input .radio-group { display: flex; gap: 10px; } -body .form-container form .radio-group input[type=radio] { +body .form-container form .form-group.radio-input .radio-group input[type=radio] { display: none; } -body .form-container form .radio-group label.radio { +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); @@ -136,21 +141,20 @@ body .form-container form .radio-group label.radio { transition: background-color 0.3s, color 0.3s, border-color 0.3s; user-select: none; } -body .form-container form .radio-group label.radio:hover, body .form-container form .radio-group label.radio:focus { +body .form-container form .form-group.radio-input .radio-group label.radio:hover, body .form-container form .form-group.radio-input .radio-group label.radio:focus { background-color: rgba(232, 232, 232, 0.9); border-color: #007b8a; } -body .form-container form .radio-group input[type=radio]:checked + label.radio { +body .form-container form .form-group.radio-input .radio-group input[type=radio]:checked + label.radio { background-color: #009299; color: #ffffff; border-color: rgba(0, 170, 179, 0.8); } -body .form-container form input[type=range] { - --value: 0; - width: 100%; - height: 45px; +body .form-container form .form-group input[type=range] { -webkit-appearance: none; appearance: none; + width: 100%; + height: 45px; border-radius: 6px; background-color: rgba(245, 245, 245, 0.9); border: 1px solid rgba(220, 220, 220, 0.8); @@ -158,75 +162,73 @@ body .form-container form input[type=range] { padding: 0; box-sizing: border-box; } -body .form-container form input[type=range]::-webkit-slider-runnable-track { +body .form-container form .form-group input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 100%; border-radius: 6px; - background: linear-gradient(to right, #007b8a 0%, #007b8a var(--value), rgba(245, 245, 245, 0.9) var(--value)); + 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 input[type=range]::-moz-range-track { +body .form-container form .form-group input[type=range]::-moz-range-track { width: 100%; height: 100%; border-radius: 6px; - background: linear-gradient(to right, #007b8a 0%, #007b8a var(--value), rgba(245, 245, 245, 0.9) var(--value)); + 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 input[type=range]::-webkit-slider-thumb { +body .form-container form .form-group input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; - width: 0; - height: 45px; - border-radius: 6px; - background-color: #007b8a; - cursor: pointer; - margin: 0; - padding: 0; -} -body .form-container form input[type=range]::-moz-range-thumb { - width: 0; + width: 10px; height: 45px; border: none; border-radius: 6px; - background-color: #007b8a; + background-color: rgba(245, 245, 245, 0.9); cursor: pointer; margin: 0; padding: 0; + background-color: green; } -body .form-container form input[type=range]:focus { +body .form-container form .form-group input[type=range]::-moz-range-thumb { + width: 10px; + height: 45px; + border: none; + border-radius: 6px; + background-color: rgba(245, 245, 245, 0.9); + cursor: pointer; + margin: 0; + padding: 0; + background-color: green; +} +body .form-container form .form-group input[type=range]:focus { outline: none; border-color: #007b8a; } -body .form-container form .submit-button { +body .form-container form .form-group.submit-buttons { flex: 1 1 100%; display: flex; justify-content: space-between; margin-top: 20px; } -body .form-container form .submit-button button { +body .form-container form .form-group.submit-buttons button { width: 48%; text-align: center; padding: 12px; border-radius: 6px; } -body .form-container form .submit-button button.clear-button { +body .form-container form .form-group.submit-buttons button.clear-button { background-color: #c4c4c4; color: #ffffff; } -body .form-container form .submit-button button.clear-button:hover { +body .form-container form .form-group.submit-buttons button.clear-button:hover { background-color: #8f9091; } -body .form-container form .submit-button button.clear-button:active { - transform: translateY(2px); -} -body .form-container form .submit-button button:not(.clear-button) { +body .form-container form .form-group.submit-buttons button.submit { background-color: #007b8a; color: #ffffff; border: none; } -body .form-container form .submit-button button:not(.clear-button):hover { +body .form-container form .form-group.submit-buttons button.submit:hover { background-color: #006b7a; } -body .form-container form .submit-button button:not(.clear-button):active { +body .form-container form .form-group.submit-buttons button:active { transform: translateY(2px); } - -/*# sourceMappingURL=adduser.css.map */ diff --git a/test/css/adduser.css.map b/test/css/adduser.css.map deleted file mode 100644 index 8b16e68..0000000 --- a/test/css/adduser.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sourceRoot":"","sources":["../scss/_common.scss","../scss/adduser.scss","../scss/_colors.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;;;AAIJ;EACI;;;ACLJ;EACC;EACA,YCc2B;EDb3B;EACA;EACA;EACA;EACA;;AAGA;EACC,kBCOyB;EDNzB;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACC,OCFyB;EDGzB;EACA;EACA;EACA;;AAID;EACC;EACA;EACA;EACA;;AAGA;EACC;EACA;;AAGA;EACC;EACA,OCxBuB;EDyBvB;EACA;;AAID;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQC;EACA;EACA;EACA;EACA,kBCxCuB;EDyCvB;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC,cC3C8B;ED4C9B;;AAMF;EACC;EACA,OCxDuB;EDyDvB;EACA;;AAGD;EACC;EACA;;AAGA;EACC;;AAID;EACC;EACA;EACA;EACA;EACA,kBC1EsB;ED2EtB;EACA;EACA;EACA;EACA;;AAGA;EAEC,kBCtEiC;EDuEjC,cCjEwC;;ADsE1C;EACC,kBC5EmC;ED6EnC,OC1EwC;ED2ExC,cCxE0C;;AD8E7C;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAGA;EACC;;AAID;EACC;EACA;EACA;EACA;EACA,kBCxHuB;EDyHvB;EACA;EACA;EACA;EACA;;AAGA;EAEC,kBC1G+B;ED2G/B,cCrGsC;;AD0GxC;EACC,kBChHiC;EDiHjC,OC9GsC;ED+GtC,cC5GwC;;ADiH1C;EACC;EACA;EACA;EACA;EACA;EACA;EACA,kBCvJwB;EDwJxB;EACA;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAID;EACC;EACA;EACA;EACA;EACA;EACA,kBC/KmB;EDiLnB;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,kBC3LmB;ED4LnB;EACA;EACA;;AAGD;EACC;EACA,cCrM+B;;AD0MjC;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGA;EACC,kBCjNwB;EDkNxB,OChN6B;;ADkN7B;EACC,kBCpN6B;;ADuN9B;EACC;;AAKF;EACC,kBCpOkB;EDqOlB,OCnOuB;EDoOvB;;AAEA;EACC,kBCxOuB;;AD2OxB;EACC","file":"adduser.css"} \ No newline at end of file diff --git a/test/css/login.css b/test/css/login.css index 3c02703..63d1400 100644 --- a/test/css/login.css +++ b/test/css/login.css @@ -101,5 +101,3 @@ body .login-container form button:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(70, 70, 70, 0.2); } - -/*# sourceMappingURL=login.css.map */ diff --git a/test/css/login.css.map b/test/css/login.css.map deleted file mode 100644 index 2ab50db..0000000 --- a/test/css/login.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sourceRoot":"","sources":["../scss/_common.scss","../scss/login.scss","../scss/_colors.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;;;AAIJ;EACI;;;ACNJ;EAEI;EACA,YCL0B;EDM1B;EACA;EACA;EACA;;AAGA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;EACA;EACA;EACA;;AAKJ;EACI;EACA,OChCe;EDiCf;;AAIJ;EACI;EACA,OCtCmB;;AD2C3B;EACI,kBC1CgB;ED2ChB;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;EACA,OCnDa;EDoDb;;AAGJ;EACI;EACA;EACA;;AAGA;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA,kBCpEc;EDqEd;;AAEA;AAAA;EACI,cCrEkB;;ADuEtB;AAAA;EACI,cCvEkB;EDwElB,kBC3EkB;ED4ElB;;AAIR;EACI;EACA;EACA,kBC/EK;EDgFL,OC5EU;ED6EV;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,kBCzFO;;AD4FX;EACI;EACA","file":"login.css"} \ No newline at end of file diff --git a/test/html/adduser.html b/test/html/adduser.html index c9d7f18..0324a05 100644 --- a/test/html/adduser.html +++ b/test/html/adduser.html @@ -3,7 +3,7 @@ - + Add New User @@ -71,7 +71,7 @@ -
+
-
+
-
+
@@ -100,7 +100,7 @@
-
+
@@ -111,14 +111,14 @@
-
+
- +
- + diff --git a/test/js/rangeslider.js b/test/js/rangeslider.js index 06723fb..6122b0d 100644 --- a/test/js/rangeslider.js +++ b/test/js/rangeslider.js @@ -6,7 +6,7 @@ document.addEventListener('DOMContentLoaded', function () { const max = rangeInput.max; // Get the initial value; if not set, default to 0 - const initialValue = rangeInput.value ? Number(rangeInput.value) : 0; // This may not work on all browsers. Firefox defaults this to 50 + const initialValue = rangeInput.value ? Number(rangeInput.value) : 50; // This may not work on all browsers. Firefox defaults this to 50 // console.log("initial val: " + initialValue); const initialPercentage = (initialValue / max) * 100; diff --git a/test/scripts/csswatch.sh b/test/scripts/csswatch.sh index 5646349..ba8e622 100644 --- a/test/scripts/csswatch.sh +++ b/test/scripts/csswatch.sh @@ -1,6 +1,6 @@ #!/bin/bash -idir="/home/lcm/Works/ldapmanager/test/scss" -odir="/home/lcm/Works/ldapmanager/test/css" +idir="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/scss" +odir="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/css" inotifywait -e modify -m -r $idir | while read events; do - sass $idir/:$odir/ + sass $idir/:$odir/ --no-source-map done; \ No newline at end of file diff --git a/test/scss/_colors.scss b/test/scss/_colors.scss index 0ecbf91..84a7a30 100644 --- a/test/scss/_colors.scss +++ b/test/scss/_colors.scss @@ -1,58 +1,83 @@ -// Login page colors +// Login page /////////////////////////////////////// + +// Page $login-page-background-color: linear-gradient(135deg, #5b727a, #355347); $login-page-appname-color: #ffffff; $login-page-description-color: rgba(207, 217, 215, 0.9); //$login-page-logo-shadow-color: rgba(0, 0, 0, 0.2); +// Log in form $login-form-background: rgba(255, 255, 255, 0.9); $login-form-shadow-color: rgba(0, 0, 0, 0.2); $login-form-title-color: #5f5f5f; +// Input fields $login-form-input-background: rgba(255, 255, 255, 0.95); $login-form-input-focused-background: #fff; $login-form-input-border-color: rgba(232, 232, 232, 0.7); $login-form-input-hover-border-color: #005f73; $login-form-input-focus-border-color: #005f73; +// Submit button $login-button-color: #003f5c; $login-button-hover-color: #2f798a; $login-button-shadow: rgba(0, 95, 115, 0.3); $login-button-active-shadow: rgba(70, 70, 70, 0.2); $login-button-text-color: #fff; -// Add New User Page Colors -$add-user-background-color: linear-gradient(135deg, #283e4a, #1c2e38); // Background gradient -$add-user-header-color: #ffffff; // Header text color (white for contrast) +// Add New User Page //////////////////////////////// + +// Page +$add-user-background-color: linear-gradient(135deg, #283e4a, #1c2e38); // Background gradient + +// Form +//$add-user-header-color: #ffffff; // Header text color (white for contrast) $add-user-form-background: rgba(255, 255, 255, 0.92); // Form background color $add-user-form-shadow-color: rgba(0, 0, 0, 0.25); // Form shadow color $add-user-form-title-color: #4e4e4e; // Form title color +// Input fileds $add-user-input-background: rgba(245, 245, 245, 0.9); // Input field background color -$add-user-input-border-color: rgba(220, 220, 220, 0.8); // Input field border color -$add-user-input-focus-border-color: #007b8a; // Focus border color for inputs +$add-user-input-border-color: rgba(220, 220, 220, 0.8); +$add-user-input-focus-border-color: #007b8a; -$add-user-button-color: #007b8a; // Primary button color +// Submit button +$add-user-button-color: #007b8a; // Normal button color $add-user-button-hover-color: #006b7a; // Button hover color $add-user-button-text-color: #ffffff; // Button text color $add-user-button-shadow: rgba(0, 123, 138, 0.3); // Button shadow color +// Reset button $add-user-clear-button-color: #c4c4c4;; $add-user-clear-button-hover-color: #8f9091; $add-user-clear-button-text-color: #ffffff; +// Check-box buttons +// Unchecked $user-form-checkbox-button-color: #007b8a; -$user-form-checkbox-button-hover-color: rgba(232, 232, 232, 0.9); -$user-form-checkbox-button-active-color: #009299; $user-form-checkbox-button-text-color: #007b8a; -$user-form-checkbox-button-hover-text-color: #007b8a; -$user-form-checkbox-button-active-text-color: #ffffff; $user-form-checkbox-button-border-color: rgba(220, 220, 220, 0.8); +// Hover +$user-form-checkbox-button-hover-color: rgba(232, 232, 232, 0.9); +$user-form-checkbox-button-hover-text-color: #007b8a; $user-form-checkbox-button-hover-border-color: #007b8a; +// Checked +$user-form-checkbox-button-active-color: #009299; +$user-form-checkbox-button-active-text-color: #ffffff; $user-form-checkbox-button-active-border-color: rgba(0, 170, 179, 0.8); -$user-form-radio-button-color: #007b8a; -$user-form-radio-button-hover-color: rgba(232, 232, 232, 0.9); -$user-form-radio-button-active-color: #009299; -$user-form-radio-button-text-color: #007b8a; -$user-form-radio-button-hover-text-color: #007b8a; -$user-form-radio-button-active-text-color: #ffffff; -$user-form-radio-button-border-color: rgba(220, 220, 220, 0.8); -$user-form-radio-button-hover-border-color: #007b8a; -$user-form-radio-button-active-border-color: rgba(0, 170, 179, 0.8); +// Radio buttons +// Unselected +$user-form-radio-button-color: $user-form-checkbox-button-color; +$user-form-radio-button-text-color: $user-form-checkbox-button-text-color; +$user-form-radio-button-border-color: $user-form-checkbox-button-border-color; +// Hover +$user-form-radio-button-hover-color: $user-form-checkbox-button-hover-color; +$user-form-radio-button-hover-text-color: $user-form-checkbox-button-hover-text-color; +$user-form-radio-button-hover-border-color: $user-form-checkbox-button-hover-border-color; +// Selected +$user-form-radio-button-active-color: $user-form-checkbox-button-active-color; +$user-form-radio-button-active-text-color: $user-form-checkbox-button-active-text-color; +$user-form-radio-button-active-border-color: $user-form-checkbox-button-active-border-color; + +//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 diff --git a/test/scss/adduser.scss b/test/scss/adduser.scss index e32d17e..b71765d 100644 --- a/test/scss/adduser.scss +++ b/test/scss/adduser.scss @@ -3,273 +3,281 @@ // Basic styling for the body body { - font-family: 'Arial', sans-serif; - background: $add-user-background-color; // Use background gradient for the page - display: flex; - justify-content: center; // Center the form horizontally - align-items: center; // Center the form vertically - height: 100%; - padding: 20px; // Add some padding for mobile responsiveness + font-family: 'Arial', sans-serif; + background: $add-user-background-color; // Use background gradient for the page + display: flex; + justify-content: center; // Center the form horizontally + align-items: center; // Center the form vertically + height: 100%; + padding: 20px; // Add some padding for mobile responsiveness - // Container for the form - .form-container { - background-color: $add-user-form-background; // Form background color - padding: 40px; - border-radius: 12px; // Rounded corners for the form - box-shadow: 0 8px 15px $add-user-form-shadow-color; - width: 100%; - max-width: 800px; // Increase the maximum width for a wider form - text-align: left; // Left-align text - margin: auto; + // Container for the form + .form-container { + background-color: $add-user-form-background; // Form background color + padding: 40px; + border-radius: 12px; // Rounded corners for the form + box-shadow: 0 8px 15px $add-user-form-shadow-color; + width: 100%; + max-width: 800px; // Increase the maximum width for a wider form + text-align: left; // Left-align text + margin: auto; - // Form header - h2 { - color: $add-user-form-title-color; // Form title color - font-size: 28px; - margin-bottom: 20px; - text-align: left; - display: block; - } + // Form header + h2 { + color: $add-user-form-title-color; // Form title color + font-size: 28px; + margin-bottom: 20px; + text-align: left; + display: block; + } - // Form element - form { - display: flex; - flex-wrap: wrap; // Allow wrapping for form groups - gap: 20px; // Add consistent gap between elements - margin-bottom: 20px; // Add space below the form for submit button + // Form element + form { + display: flex; + flex-wrap: wrap; // Allow wrapping for form groups + gap: 20px; // Add consistent gap between elements + margin-bottom: 20px; // Add space below the form for submit button - // Form groups for each input - .form-group { - flex: 1 1 calc(50% - 20px); // Take up half the row, accounting for gap - min-width: 250px; // Minimum width to prevent shrinking too much + // Form groups for each input + .form-group { + flex: 1 1 calc(50% - 20px); // Take up half the row, accounting for gap + min-width: 250px; // Minimum width to prevent shrinking too much + $input-field-border-radius: 6px; - // Label styling - label { - display: block; - color: $add-user-form-title-color; - font-size: 16px; - margin-bottom: 5px; - } + // Label styling + label { + display: block; + color: $add-user-form-title-color; + font-size: 16px; + margin-bottom: 5px; + } - // Input and select styling - input[type="text"], - input[type="password"], - input[type="email"], - input[type="date"], - input[type="number"], - input[type="datetime-local"], - input[type="tel"], - select { - width: 100%; // Full width of the form group - padding: 12px; - border: 1px solid $add-user-input-border-color; // Input field border color - border-radius: 6px; - background-color: $add-user-input-background; // Input background color - font-size: 16px; - transition: border-color 0.3s, background-color 0.3s; + // Input and select styling + input[type="text"], + input[type="password"], + input[type="email"], + input[type="date"], + input[type="number"], + input[type="datetime-local"], + input[type="tel"], + select { + width: 100%; // Full width of the form group + padding: 12px; + border: 1px solid $add-user-input-border-color; // Input field border color + border-radius: $input-field-border-radius; + background-color: $add-user-input-background; // Input background color + font-size: 16px; + transition: border-color 0.3s, background-color 0.3s; - &:focus { - border-color: $add-user-input-focus-border-color; // Focus border color - outline: none; - } - } - } + &:focus { + border-color: $add-user-input-focus-border-color; // Focus border color + outline: none; + } + } - .admin-access { - label { - display: block; - color: $add-user-form-title-color; - font-size: 16px; - margin-bottom: 5px; - } + &.checkbox-set { + label { + display: block; + color: $add-user-form-title-color; + font-size: 16px; + margin-bottom: 5px; + } - .checkbox-group { - display: flex; - gap: 10px; + .checkboxes { + display: flex; + gap: 10px; - // Hide the checkboxes - input[type="checkbox"] { - display: none; - } + // Hide the checkboxes + input[type="checkbox"] { + display: none; + } - // Style the label as a button to match input fields - label.checkbox { - cursor: pointer; - padding: 12px; // Match the padding with the input fields - border: 1px solid $user-form-checkbox-button-border-color; // Use the same border style - border-radius: 6px; // Match the border radius with other inputs - background-color: $add-user-input-background; // Use the same background color - font-size: 16px; // Font size consistency - text-align: center; - width: 100%; // Make the label full-width - transition: background-color 0.3s, color 0.3s, border-color 0.3s; - user-select: none; + // Style the label as a button to match input fields + label.checkbox { + cursor: pointer; + padding: 12px; // Match the padding with the input fields + border: 1px solid $user-form-checkbox-button-border-color; // Use the same border style + border-radius: $input-field-border-radius; // Match the border radius with other inputs + background-color: $add-user-input-background; // Use the same background color + font-size: 16px; // Font size consistency + text-align: center; + width: 100%; // Make the label full-width + transition: background-color 0.3s, color 0.3s, border-color 0.3s; + user-select: none; - // Change background when active or focused - &:hover, - &:focus { - background-color: $user-form-checkbox-button-hover-color; - border-color: $user-form-checkbox-button-hover-border-color; // Use focus border color - } - } + // Change background when active or focused + &:hover, + &:focus { + background-color: $user-form-checkbox-button-hover-color; + border-color: $user-form-checkbox-button-hover-border-color; // Use focus border color + } + } - // Change styles when the checkbox is checked - input[type="checkbox"]:checked + label.checkbox { - background-color: $user-form-checkbox-button-active-color; - color: $user-form-checkbox-button-active-text-color; - border-color: $user-form-checkbox-button-active-border-color; - } - } - } + // Change styles when the checkbox is checked + input[type="checkbox"]:checked + label.checkbox { + background-color: $user-form-checkbox-button-active-color; + color: $user-form-checkbox-button-active-text-color; + border-color: $user-form-checkbox-button-active-border-color; + } + } + } - // Dropdown Menu for Admin Role - .role-dropdown { - flex: 1 1 calc(50% - 20px); // Explicitly set to half width, considering gap - min-width: 250px; // Minimum width to avoid shrinking too much - padding: 0; // Reset any padding - } + // Dropdown Menu + &.dropdown-menu { + flex: 1 1 calc(50% - 20px); // Explicitly set to half width, considering gap + min-width: 250px; // Minimum width to avoid shrinking too much + padding: 0; // Reset any padding + } - .radio-group { - display: flex; - gap: 10px; + &.radio-input { + .radio-group { + display: flex; + gap: 10px; - // Hide the radio buttons - input[type="radio"] { - display: none; - } + // Hide the radio buttons + input[type="radio"] { + display: none; + } - // Style the label as a button to match the checkboxes - label.radio { - cursor: pointer; - padding: 12px; // Match the padding with the other styled elements - border: 1px solid $add-user-input-border-color; - border-radius: 6px; - background-color: $add-user-input-background; - font-size: 16px; - text-align: center; - width: 100%; // Make the label full-width - transition: background-color 0.3s, color 0.3s, border-color 0.3s; - user-select: none; + // Style the label as a button to match the checkboxes + label.radio { + width: 100%; + height: 100%; + border-radius: $input-field-border-radius; + background: $form-range-slider-background-gradient; + cursor: pointer; + padding: 12px; // Match the padding with the other styled elements + border: 1px solid $add-user-input-border-color; + border-radius: $input-field-border-radius; + background-color: $add-user-input-background; + font-size: 16px; + text-align: center; + width: 100%; // Make the label full-width + transition: background-color 0.3s, color 0.3s, border-color 0.3s; + user-select: none; - // Change background when active or focused - &:hover, - &:focus { - background-color: $user-form-radio-button-hover-color; - border-color: $user-form-radio-button-hover-border-color; - } - } + // Change background when active or focused + &:hover, + &:focus { + background-color: $user-form-radio-button-hover-color; + border-color: $user-form-radio-button-hover-border-color; + } + } - // Change styles when the radio button is checked - input[type="radio"]:checked + label.radio { - background-color: $user-form-radio-button-active-color; - color: $user-form-radio-button-active-text-color; - border-color: $user-form-radio-button-active-border-color; - } - } + // Change styles when the radio button is checked + input[type="radio"]:checked + label.radio { + background-color: $user-form-radio-button-active-color; + color: $user-form-radio-button-active-text-color; + border-color: $user-form-radio-button-active-border-color; + } + } + } - // Style the range input to match the other form inputs - input[type="range"] { - --value: 0; - width: 100%; - height: 45px; - -webkit-appearance: none; - appearance: none; - border-radius: 6px; - background-color: $add-user-input-background; - border: 1px solid $add-user-input-border-color; - cursor: pointer; - padding: 0; - box-sizing: border-box; + // 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; + height: $form-range-slider-height; + border: none; + border-radius: $input-field-border-radius; + background-color: $user-form-range-slider-filled; + cursor: pointer; + margin: 0; + padding: 0; +background-color: green; + } + input[type="range"] { + -webkit-appearance: none; + appearance: none; + width: 100%; + height: $form-range-slider-height; + border-radius: $input-field-border-radius; + background-color: $user-form-range-slider-background; + border: 1px solid $add-user-input-border-color; + cursor: pointer; + padding: 0; + box-sizing: border-box; - // Style the filled portion of the track - &::-webkit-slider-runnable-track { - width: 100%; - height: 100%; - border-radius: 6px; - background: linear-gradient(to right, $add-user-button-color 0%, $add-user-button-color var(--value), $add-user-input-background var(--value)); - } + // Style the filled portion of the track + &::-webkit-slider-runnable-track { + @include slider_track; + } - &::-moz-range-track { - width: 100%; - height: 100%; - border-radius: 6px; - background: linear-gradient(to right, $add-user-button-color 0%, $add-user-button-color var(--value), $add-user-input-background var(--value)); - } + &::-moz-range-track { + @include slider_track; + } - // Slider thumb - &::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - width: 0; // Smaller thumb size - height: 45px; - border-radius: 6px; - background-color: $add-user-button-color; - //border: 2px solid $add-user-input-border-color; - cursor: pointer; - margin: 0; - padding: 0; - } + // Slider thumb + &::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + @include slider_thumb; + //border: 2px solid $add-user-input-border-color; + } - &::-moz-range-thumb { - width: 0; // Smaller thumb size - height: 45px; - border: none; - border-radius: 6px; - background-color: $add-user-button-color; - cursor: pointer; - margin: 0; - padding: 0; - } + &::-moz-range-thumb { + @include slider_thumb; + } - &:focus { - outline: none; - border-color: $add-user-input-focus-border-color; - } - } + &:focus { + outline: none; + border-color: $add-user-input-focus-border-color; + } + } + // Submit button styling + &.submit-buttons { + flex: 1 1 100%; // Full width for the submit button + display: flex; // Use flex to align the buttons + justify-content: space-between; // Space between buttons + margin-top: 20px; // Space above the buttons - // Submit button styling - .submit-button { - flex: 1 1 100%; // Full width for the submit button - display: flex; // Use flex to align the buttons - justify-content: space-between; // Space between buttons - margin-top: 20px; // Space above the buttons + button { + width: 48%; // Set both buttons to take up nearly half of the width + text-align: center; + padding: 12px; // Padding for button + border-radius: $input-field-border-radius; - button { - width: 48%; // Set both buttons to take up nearly half of the width - text-align: center; - padding: 12px; // Padding for button - border-radius: 6px; + // Add styles for the clear button + &.clear-button { + background-color: $add-user-clear-button-color; // Define your clear button color in colors.scss + color: $add-user-clear-button-text-color; // Define clear button text color in colors.scss - // Add styles for the clear button - &.clear-button { - background-color: $add-user-clear-button-color; // Define your clear button color in colors.scss - color: $add-user-clear-button-text-color; // Define clear button text color in colors.scss + &:hover { + background-color: $add-user-clear-button-hover-color; // Hover effect color + } + } - &:hover { - background-color: $add-user-clear-button-hover-color; // Hover effect color - } + // Existing styles for submit button + &.submit { + background-color: $add-user-button-color; // Primary button color + color: $add-user-button-text-color; + border: none; - &:active { - transform: translateY(2px); // Subtle press effect - } - } + &:hover { + background-color: $add-user-button-hover-color; // Button hover color + } + } - // Existing styles for submit button - &:not(.clear-button) { - background-color: $add-user-button-color; // Primary button color - color: $add-user-button-text-color; - border: none; - - &:hover { - background-color: $add-user-button-hover-color; // Button hover color - } - - &:active { - transform: translateY(2px); // Subtle press effect - } - } - } - } - } - } + &:active { + transform: translateY(2px); // Subtle press effect + } + } + } + } + } + } }