From 42a47fe51e7a25ec2b8f0984d5e0a95572bbed2e Mon Sep 17 00:00:00 2001 From: candifloss Date: Fri, 25 Oct 2024 16:43:15 +0530 Subject: [PATCH] more input types --- .gitignore | 3 +- test/css/adduser.css | 121 ++++++++++++- test/css/adduser.css.map | 2 +- test/css/login.css.map | 2 +- test/html/adduser.html | 167 ++++++++++------- test/html/login.html | 4 +- test/scripts/csswatch.sh | 4 +- test/scss/_colors.scss | 19 +- test/scss/_common.scss | 2 +- test/scss/adduser.scss | 378 ++++++++++++++++++++++++++------------- test/scss/login.scss | 204 ++++++++++----------- 11 files changed, 597 insertions(+), 309 deletions(-) diff --git a/.gitignore b/.gitignore index 0cafc1c..49b5f2d 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -.venv/ \ No newline at end of file +.venv/ +test/scripts/csswatch.sh diff --git a/test/css/adduser.css b/test/css/adduser.css index be72882..14cecf0 100644 --- a/test/css/adduser.css +++ b/test/css/adduser.css @@ -32,7 +32,8 @@ body .form-container h2 { color: #4e4e4e; font-size: 28px; margin-bottom: 20px; - text-align: center; + text-align: left; + display: block; } body .form-container form { display: flex; @@ -43,7 +44,6 @@ body .form-container form { body .form-container form .form-group { flex: 1 1 calc(50% - 20px); min-width: 250px; - margin-bottom: 20px; } body .form-container form .form-group label { display: block; @@ -55,6 +55,9 @@ body .form-container form .form-group input[type=text], body .form-container form .form-group input[type=password], body .form-container form .form-group input[type=email], body .form-container form .form-group input[type=date], +body .form-container form .form-group input[type=number], +body .form-container form .form-group input[type=datetime-local], +body .form-container form .form-group input[type=tel], body .form-container form .form-group select { width: 100%; padding: 12px; @@ -68,30 +71,130 @@ body .form-container form .form-group input[type=text]:focus, body .form-container form .form-group input[type=password]:focus, body .form-container form .form-group input[type=email]:focus, body .form-container form .form-group input[type=date]:focus, +body .form-container form .form-group input[type=number]:focus, +body .form-container form .form-group input[type=datetime-local]:focus, +body .form-container form .form-group input[type=tel]:focus, body .form-container form .form-group select:focus { border-color: #007b8a; outline: none; } -body .form-container form .admin-access { - flex: 1 1 100%; - margin-bottom: 20px; -} body .form-container form .admin-access label { display: block; color: #4e4e4e; font-size: 16px; - margin-bottom: 10px; + margin-bottom: 5px; } body .form-container form .admin-access .checkbox-group { display: flex; - justify-content: flex-start; gap: 10px; } +body .form-container form .admin-access .checkbox-group input[type=checkbox] { + display: none; +} +body .form-container form .admin-access .checkbox-group label.checkbox { + cursor: pointer; + padding: 12px; + border: 1px solid rgba(220, 220, 220, 0.8); + border-radius: 6px; + background-color: rgba(245, 245, 245, 0.9); + font-size: 16px; + text-align: center; + width: 100%; + 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 { + 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 { + background-color: #009299; + color: #ffffff; + border-color: rgba(0, 170, 179, 0.8); +} body .form-container form .role-dropdown { flex: 1 1 calc(50% - 20px); min-width: 250px; padding: 0; } +body .form-container form .radio-group { + display: flex; + gap: 10px; +} +body .form-container form .radio-group input[type=radio] { + display: none; +} +body .form-container form .radio-group label.radio { + cursor: pointer; + padding: 12px; + border: 1px solid rgba(220, 220, 220, 0.8); + border-radius: 6px; + background-color: rgba(245, 245, 245, 0.9); + font-size: 16px; + text-align: center; + width: 100%; + 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 { + background-color: rgba(232, 232, 232, 0.9); + border-color: #007b8a; +} +body .form-container form .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] { + width: 100%; + height: 45px; + -webkit-appearance: none; + appearance: none; + border-radius: 6px; + background-color: rgba(245, 245, 245, 0.9); + border: 1px solid rgba(220, 220, 220, 0.8); + cursor: pointer; + padding: 0; + box-sizing: border-box; +} +body .form-container form 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)); +} +body .form-container form 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)); +} +body .form-container form input[type=range]::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 45px; + height: 45px; + border-radius: 50%; + 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%; + 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]:focus { + outline: none; + border-color: #007b8a; +} body .form-container form .submit-button { flex: 1 1 100%; display: flex; @@ -99,7 +202,7 @@ body .form-container form .submit-button { margin-top: 20px; } body .form-container form .submit-button button { - width: 30%; + width: 40%; text-align: center; padding: 12px; background-color: #007b8a; diff --git a/test/css/adduser.css.map b/test/css/adduser.css.map index 6ea369b..023662e 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;EACE;EACA,YCc0B;EDb1B;EACA;EACA;EACA;EACA;;AAGA;EACE,kBCOuB;EDNvB;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE,OCFsB;EDGtB;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAGA;EACE;EACA,OCxBkB;EDyBlB;EACA;;AAIF;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EACA;EACA;EACA,kBCtCkB;EDuClB;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EACE,cCzCwB;ED0CxB;;AAMN;EACE;EACA;;AAEA;EACE;EACA,OCzDkB;ED0DlB;EACA;;AAIF;EACE;EACA;EACA;;AAKJ;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAEA;EACI;EACA;EACF;EACA,kBCpFc;EDqFd,OCnFmB;EDoFnB;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,kBC9FkB;;ADiGpB;EACE","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;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 diff --git a/test/css/login.css.map b/test/css/login.css.map index 29bb7db..2ab50db 100644 --- a/test/css/login.css.map +++ b/test/css/login.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/_common.scss","../scss/login.scss","../scss/_colors.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;;;AAIJ;EACI;;;ACNJ;EAEE;EACA,YCL4B;EDM5B;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;;AAKF;EACE;EACA,OChCqB;EDiCrB;;AAIF;EACE;EACA,OCtCyB;;AD2C7B;EACE,kBC1CoB;ED2CpB;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA,OCnDmB;EDoDnB;;AAGF;EACE;EACA;EACA;;AAGA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA,kBCpEsB;EDqEtB;;AAEA;AAAA;EACI,cCrE0B;;ADuE9B;AAAA;EACE,cCvE4B;EDwE5B,kBC3E4B;ED4E5B;;AAIJ;EACE;EACA;EACA,kBC/Ea;EDgFb,OC5EkB;ED6ElB;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,kBCzFiB;;AD4FnB;EACE;EACA","file":"login.css"} \ No newline at end of file +{"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 c20fb38..87f6374 100644 --- a/test/html/adduser.html +++ b/test/html/adduser.html @@ -1,84 +1,123 @@ - - - - - Add New User - - + + + + + Add New User + + -
-

Add New User

-
-
- - -
+
+

Add New User

+ +
+ + +
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- - -
- -
- - -
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
-
- - + +
-
- -
- - +
+ + +
- - +
+ +
+ + - - + + + + + +
+
+ +
+ + +
+ +
+ +
+ + + + +
- - -
- -
- -
- +
+ +
+ +
+ + diff --git a/test/html/login.html b/test/html/login.html index 8954aec..40bf76f 100644 --- a/test/html/login.html +++ b/test/html/login.html @@ -3,13 +3,13 @@ - + Login Page
- +

LDAP Manager

User management system

diff --git a/test/scripts/csswatch.sh b/test/scripts/csswatch.sh index 5646349..11ae793 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/ done; \ No newline at end of file diff --git a/test/scss/_colors.scss b/test/scss/_colors.scss index 0741d12..a172453 100644 --- a/test/scss/_colors.scss +++ b/test/scss/_colors.scss @@ -30,4 +30,21 @@ $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-description-color: rgba(220, 220, 220, 0.8); // Description text color +$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); +$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; +$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); diff --git a/test/scss/_common.scss b/test/scss/_common.scss index ca527a1..57f388d 100644 --- a/test/scss/_common.scss +++ b/test/scss/_common.scss @@ -8,4 +8,4 @@ // Hide the title title { display: none; - } \ No newline at end of file +} diff --git a/test/scss/adduser.scss b/test/scss/adduser.scss index 3e938d6..b442b54 100644 --- a/test/scss/adduser.scss +++ b/test/scss/adduser.scss @@ -3,132 +3,260 @@ // 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: center; // Center the title + // 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 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; + } + + // 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; + } + } + } + + .admin-access { + label { + display: block; + color: $add-user-form-title-color; + font-size: 16px; + margin-bottom: 5px; + } + + .checkbox-group { + display: flex; + gap: 10px; + + // 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; + + // 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; + } + } + } + + // 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; + + // 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; + + // 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; + } + } + + // 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 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 + } + + &::-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; + } + + &::-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; + } + + &:focus { + outline: none; // Remove default focus outline + border-color: $add-user-input-focus-border-color; // Change border color on focus + } + } + + // 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 + + 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; + + &:hover { + background-color: $add-user-button-hover-color; // Button hover color + } + + &:active { + transform: translateY(2px); // Subtle press effect + } + } + } + } } - - // 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 - margin-bottom: 20px; // Spacing between fields - - // 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"], - 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; - } - } - } - - // Admin Access Checkboxes - .admin-access { - flex: 1 1 100%; // Full width for admin access checkboxes - margin-bottom: 20px; // Space below the checkboxes - - label { - display: block; // Ensure label occupies full line - color: $add-user-form-title-color; - font-size: 16px; - margin-bottom: 10px; // Space below the main label - } - - // Container for checkboxes - .checkbox-group { - display: flex; // Use flex for checkboxes - justify-content: flex-start; // Align items to the start - gap: 10px; // Space between each checkbox label - } - } - - // 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 - } - - // 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 - - button { - width: 30%; - 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; - - &:hover { - background-color: $add-user-button-hover-color; // Button hover color - } - - &:active { - transform: translateY(2px); // Subtle press effect - } - } - } - } - } } diff --git a/test/scss/login.scss b/test/scss/login.scss index ff89187..cba41f2 100644 --- a/test/scss/login.scss +++ b/test/scss/login.scss @@ -2,113 +2,113 @@ @use "colors" as *; // Color scheme body { - // Page background - font-family: 'Arial', sans-serif; - background: $login-page-background-color; - display: flex; - align-items: center; - height: 100vh; - padding-right: 50px; - - // The left side, with the logo - .left-container { - flex: 1; // Take available space on the left - padding-left: 50px; // Space from the left edge - text-align: left; // Align text to the left + // Page background + font-family: 'Arial', sans-serif; + background: $login-page-background-color; display: flex; - flex-direction: column; // Stack elements vertically - justify-content: center; // Center elements vertically + align-items: center; + height: 100vh; + padding-right: 50px; - // App or organization logo - .logo { - height: 190px; // Set logo height - max-width: 100%; // Ensure the logo doesn't exceed the container's width - width: auto; // Maintain aspect ratio - margin-bottom: 20px; // Space below the logo, above the title - align-self: flex-start; // Align logo to the start (left) of the container - //box-shadow: -3px 3px 15px 3px $login-page-logo-shadow-color; - } + // The left side, with the logo + .left-container { + flex: 1; // Take available space on the left + padding-left: 50px; // Space from the left edge + text-align: left; // Align text to the left + display: flex; + flex-direction: column; // Stack elements vertically + justify-content: center; // Center elements vertically - // Application name - h1 { - font-size: 36px; - color: $login-page-appname-color; - margin-bottom: 10px; // Space below the heading - } - - // App description - p { - font-size: 18px; - color: $login-page-description-color; - } - } - - // The login form container - .login-container { - background-color: $login-form-background; - padding: 40px; // Spaces - border-radius: 12px; // Round corners - box-shadow: -3px 3px 15px 3px $login-form-shadow-color; - width: 350px; - text-align: center; - - // The heading ("Login") - h2 { - display: block; - margin-bottom: 20px; // Add space below the heading - color: $login-form-title-color; - font-size: 26px; - } - - form { - display: flex; - flex-direction: column; - align-items: center; // Center the form elements - - // The input fields - input[type="text"], - input[type="password"] { - width: 100%; // Make the inputs full width of the form - padding: 12px; // Spaces - margin-bottom: 15px; - border: 1px solid $login-form-input-border-color; - border-radius: 6px; // Round corners - font-size: 16px; - background-color: $login-form-input-background; - transition: border-color 0.3s, background-color 0.3s; - - &:hover { - border-color: $login-form-input-hover-border-color; - } - &:focus { - border-color: $login-form-input-focus-border-color; - background-color: $login-form-input-focused-background; - outline: none; - } - } - - button { - width: 100%; // Full width of the form - padding: 12px; // Spaces - background-color: $login-button-color; - color: $login-button-text-color; - border: none; - border-radius: 6px; // Round corners - font-size: 18px; - font-weight: bold; - cursor: pointer; - transition: background-color 0.3s, transform 0.3s; - box-shadow: 0 4px 10px $login-button-shadow; - - &:hover { - background-color: $login-button-hover-color; + // App or organization logo + .logo { + height: 190px; // Set logo height + max-width: 100%; // Ensure the logo doesn't exceed the container's width + width: auto; // Maintain aspect ratio + margin-bottom: 20px; // Space below the logo, above the title + align-self: flex-start; // Align logo to the start (left) of the container + //box-shadow: -3px 3px 15px 3px $login-page-logo-shadow-color; } - &:active { - transform: translateY(0); - box-shadow: 0 2px 6px $login-button-active-shadow; + // Application name + h1 { + font-size: 36px; + color: $login-page-appname-color; + margin-bottom: 10px; // Space below the heading + } + + // App description + p { + font-size: 18px; + color: $login-page-description-color; + } + } + + // The login form container + .login-container { + background-color: $login-form-background; + padding: 40px; // Spaces + border-radius: 12px; // Round corners + box-shadow: -3px 3px 15px 3px $login-form-shadow-color; + width: 350px; + text-align: center; + + // The heading ("Login") + h2 { + display: block; + margin-bottom: 20px; // Add space below the heading + color: $login-form-title-color; + font-size: 26px; + } + + form { + display: flex; + flex-direction: column; + align-items: center; // Center the form elements + + // The input fields + input[type="text"], + input[type="password"] { + width: 100%; // Make the inputs full width of the form + padding: 12px; // Spaces + margin-bottom: 15px; + border: 1px solid $login-form-input-border-color; + border-radius: 6px; // Round corners + font-size: 16px; + background-color: $login-form-input-background; + transition: border-color 0.3s, background-color 0.3s; + + &:hover { + border-color: $login-form-input-hover-border-color; + } + &:focus { + border-color: $login-form-input-focus-border-color; + background-color: $login-form-input-focused-background; + outline: none; + } + } + + button { + width: 100%; // Full width of the form + padding: 12px; // Spaces + background-color: $login-button-color; + color: $login-button-text-color; + border: none; + border-radius: 6px; // Round corners + font-size: 18px; + font-weight: bold; + cursor: pointer; + transition: background-color 0.3s, transform 0.3s; + box-shadow: 0 4px 10px $login-button-shadow; + + &:hover { + background-color: $login-button-hover-color; + } + + &:active { + transform: translateY(0); + box-shadow: 0 2px 6px $login-button-active-shadow; + } + } } - } } - } }