From e2359a5c1b10925dc7b475428477042ca60e9e74 Mon Sep 17 00:00:00 2001 From: candifloss Date: Fri, 25 Oct 2024 21:34:03 +0530 Subject: [PATCH] fixed range input --- .gitignore | 1 + test/css/adduser.css | 41 ++-- test/css/adduser.css.map | 2 +- test/html/adduser.html | 51 ++--- test/html/login.html | 42 ++-- test/js/rangeslider.js | 25 +++ test/scripts/csswatch.sh | 4 +- test/scss/_colors.scss | 8 + test/scss/adduser.scss | 467 ++++++++++++++++++++------------------- 9 files changed, 348 insertions(+), 293 deletions(-) create mode 100644 test/js/rangeslider.js diff --git a/.gitignore b/.gitignore index 49b5f2d..542c145 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ .venv/ test/scripts/csswatch.sh +test/css/adduser.css.map diff --git a/test/css/adduser.css b/test/css/adduser.css index 14cecf0..7dd9291 100644 --- a/test/css/adduser.css +++ b/test/css/adduser.css @@ -146,6 +146,7 @@ body .form-container form .radio-group input[type=radio]:checked + label.radio { border-color: rgba(0, 170, 179, 0.8); } body .form-container form input[type=range] { + --value: 0; width: 100%; height: 45px; -webkit-appearance: none; @@ -172,21 +173,20 @@ body .form-container form input[type=range]::-moz-range-track { body .form-container form input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; - width: 45px; + width: 0; height: 45px; - border-radius: 50%; + border-radius: 6px; background-color: #007b8a; - border: 2px solid rgba(220, 220, 220, 0.8); cursor: pointer; margin: 0; padding: 0; } body .form-container form input[type=range]::-moz-range-thumb { - width: 24px; - height: 24px; - border-radius: 50%; + width: 0; + height: 45px; + border: none; + border-radius: 6px; background-color: #007b8a; - border: 2px solid rgba(220, 220, 220, 0.8); cursor: pointer; margin: 0; padding: 0; @@ -198,27 +198,34 @@ body .form-container form input[type=range]:focus { body .form-container form .submit-button { flex: 1 1 100%; display: flex; - justify-content: center; + justify-content: space-between; margin-top: 20px; } body .form-container form .submit-button button { - width: 40%; + width: 48%; text-align: center; padding: 12px; + border-radius: 6px; +} +body .form-container form .submit-button button.clear-button { + background-color: #c4c4c4; + color: #ffffff; +} +body .form-container form .submit-button 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) { background-color: #007b8a; color: #ffffff; border: none; - border-radius: 6px; - font-size: 18px; - font-weight: bold; - cursor: pointer; - transition: background-color 0.3s, transform 0.3s; - box-shadow: 0 4px 10px rgba(0, 123, 138, 0.3); } -body .form-container form .submit-button button:hover { +body .form-container form .submit-button button:not(.clear-button):hover { background-color: #006b7a; } -body .form-container form .submit-button button:active { +body .form-container form .submit-button button:not(.clear-button):active { transform: translateY(2px); } diff --git a/test/css/adduser.css.map b/test/css/adduser.css.map index 023662e..8b16e68 100644 --- a/test/css/adduser.css.map +++ b/test/css/adduser.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/_common.scss","../scss/adduser.scss","../scss/_colors.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;;;AAIJ;EACI;;;ACLJ;EACI;EACA,YCcwB;EDbxB;EACA;EACA;EACA;EACA;;AAGA;EACI,kBCOmB;EDNnB;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI,OCFgB;EDGhB;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;;AAGA;EACI;EACA;;AAGA;EACI;EACA,OCxBQ;EDyBR;EACA;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQI;EACA;EACA;EACA;EACA,kBCzCQ;ED0CR;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI,cC5CY;ED6CZ;;AAMR;EACI;EACA,OCxDQ;EDyDR;EACA;;AAGJ;EACI;EACA;;AAGA;EACI;;AAIJ;EACI;EACA;EACA;EACA;EACA,kBC3EI;ED4EJ;EACA;EACA;EACA;EACA;;AAGA;EAEI,kBC7EY;ED8EZ,cCxEmB;;AD6E3B;EACI,kBCnFiB;EDoFjB,OCjFsB;EDkFtB,cC/EwB;;ADqFpC;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAGA;EACI;;AAIJ;EACI;EACA;EACA;EACA;EACA,kBCzHQ;ED0HR;EACA;EACA;EACA;EACA;;AAGA;EAEI,kBClHa;EDmHb,cC7GoB;;ADkH5B;EACI,kBCxHkB;EDyHlB,OCtHuB;EDuHvB,cCpHyB;;ADyHjC;EACI;EACA;EACA;EACA;EACA;EACA,kBCvJY;EDwJZ;EACA;EACA;EACA;;AAGA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA,kBChLI;EDiLJ;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EACA;EACA,kBC5LI;ED6LJ;EACA;EACA;EACA;;AAGJ;EACI;EACA,cCtMgB;;AD2MxB;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA,kBCpNI;EDqNJ,OCnNS;EDoNT;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,kBC9NM;;ADiOV;EACI","file":"adduser.css"} \ No newline at end of file +{"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/html/adduser.html b/test/html/adduser.html index 87f6374..c9d7f18 100644 --- a/test/html/adduser.html +++ b/test/html/adduser.html @@ -3,7 +3,7 @@ - + Add New User @@ -61,16 +61,15 @@ -
- - -
- -
- - -
+
+ + +
+
+ + +
@@ -96,28 +95,30 @@
-
- - -
+
+ + +
-
- -
- - - - - -
-
+
+ +
+ + + + +
+
+ -
+ + + diff --git a/test/html/login.html b/test/html/login.html index 40bf76f..f16308c 100644 --- a/test/html/login.html +++ b/test/html/login.html @@ -1,27 +1,27 @@ - - - - - Login Page - - + + + + + Login Page + + -
- -

LDAP Manager

-

User management system

-
+
+ +

LDAP Manager

+

User management system

+
-
-

Login

-
- - - -
-
+
+

Login

+
+ + + +
+
- + diff --git a/test/js/rangeslider.js b/test/js/rangeslider.js new file mode 100644 index 0000000..06723fb --- /dev/null +++ b/test/js/rangeslider.js @@ -0,0 +1,25 @@ +document.addEventListener('DOMContentLoaded', function () { + const rangeInputs = document.querySelectorAll('input[type="range"]'); + + rangeInputs.forEach(rangeInput => { + // Get the maximum value + 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 + // console.log("initial val: " + initialValue); + + const initialPercentage = (initialValue / max) * 100; + + // Set the initial thumb position + rangeInput.style.setProperty('--value', `${initialPercentage}%`); + + rangeInput.addEventListener('input', function () { + const value = rangeInput.value; + const percentage = (value / max) * 100; + + // Update the width of the thumb based on the percentage + rangeInput.style.setProperty('--value', `${percentage}%`); + }); + }); +}); diff --git a/test/scripts/csswatch.sh b/test/scripts/csswatch.sh index 11ae793..5646349 100644 --- a/test/scripts/csswatch.sh +++ b/test/scripts/csswatch.sh @@ -1,6 +1,6 @@ #!/bin/bash -idir="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/scss" -odir="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/css" +idir="/home/lcm/Works/ldapmanager/test/scss" +odir="/home/lcm/Works/ldapmanager/test/css" inotifywait -e modify -m -r $idir | while read events; do sass $idir/:$odir/ done; \ No newline at end of file diff --git a/test/scss/_colors.scss b/test/scss/_colors.scss index a172453..0ecbf91 100644 --- a/test/scss/_colors.scss +++ b/test/scss/_colors.scss @@ -23,13 +23,20 @@ $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 + $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-button-color: #007b8a; // Primary 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 + +$add-user-clear-button-color: #c4c4c4;; +$add-user-clear-button-hover-color: #8f9091; +$add-user-clear-button-text-color: #ffffff; + $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; @@ -39,6 +46,7 @@ $user-form-checkbox-button-active-text-color: #ffffff; $user-form-checkbox-button-border-color: rgba(220, 220, 220, 0.8); $user-form-checkbox-button-hover-border-color: #007b8a; $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; diff --git a/test/scss/adduser.scss b/test/scss/adduser.scss index b442b54..e32d17e 100644 --- a/test/scss/adduser.scss +++ b/test/scss/adduser.scss @@ -3,260 +3,273 @@ // 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 - // 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: 6px; + 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; - } + .admin-access { + label { + display: block; + color: $add-user-form-title-color; + font-size: 16px; + margin-bottom: 5px; + } - .checkbox-group { - display: flex; - gap: 10px; + .checkbox-group { + 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: 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; - // 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 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 + } - .radio-group { - display: flex; - gap: 10px; + .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 { + 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; - // 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"] { - width: 100%; // Full width of the form group - height: 45px; // Match the height of the other input fields - -webkit-appearance: none; // Remove default styling - appearance: none; - border-radius: 6px; // Rounded corners, matching other inputs - background-color: $add-user-input-background; // Same background color as other inputs - border: 1px solid $add-user-input-border-color; // Input field border color - cursor: pointer; // Change cursor on hover - padding: 0; // Remove any default padding - box-sizing: border-box; // Ensure padding is included in total width/height + // 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 filled portion of the track - &::-webkit-slider-runnable-track { - width: 100%; - height: 100%; - border-radius: 6px; // Rounded corners - background: linear-gradient(to right, $add-user-button-color 0%, $add-user-button-color var(--value), $add-user-input-background var(--value)); // Gradient to indicate value - } + // 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)); + } - &::-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 { + 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 thumb - &::-webkit-slider-thumb { - -webkit-appearance: none; // Remove default appearance - appearance: none; - width: 45px; // Thumb size - height: 45px; - border-radius: 50%; // Make the thumb round - background-color: $add-user-button-color; // Thumb color - border: 2px solid $add-user-input-border-color; // Thumb border - cursor: pointer; - //margin-top: -8px; // Center the thumb vertically - margin: 0; - padding: 0; - } + // 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; + } - &::-moz-range-thumb { - width: 24px; - height: 24px; - border-radius: 50%; - background-color: $add-user-button-color; - border: 2px solid $add-user-input-border-color; - cursor: pointer; - margin: 0; - padding: 0; - } + &::-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; + } - &:focus { - outline: none; // Remove default focus outline - border-color: $add-user-input-focus-border-color; // Change border color on focus - } - } + &:focus { + outline: none; + border-color: $add-user-input-focus-border-color; + } + } - // Submit button styling - .submit-button { - flex: 1 1 100%; // Full width for the submit button - display: flex; // Use flex to center the button - justify-content: center; // Center the button - margin-top: 20px; // Space above the button + // 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: 40%; - text-align: center; - padding: 12px; // Padding for button - background-color: $add-user-button-color; // Primary button color - color: $add-user-button-text-color; - border: none; - border-radius: 6px; - font-size: 18px; - font-weight: bold; - cursor: pointer; - transition: background-color 0.3s, transform 0.3s; - box-shadow: 0 4px 10px $add-user-button-shadow; + 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; - &:hover { - background-color: $add-user-button-hover-color; // Button hover color - } + // 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 - &:active { - transform: translateY(2px); // Subtle press effect - } - } - } - } - } + &:hover { + background-color: $add-user-clear-button-hover-color; // Hover effect color + } + + &:active { + transform: translateY(2px); // Subtle press effect + } + } + + // 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 + } + } + } + } + } + } }