candifloss/ldapmanager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

scss cleaning

Browse Source
This commit is contained in:
Candifloss 2024-10-28 16:38:40 +05:30
parent e2359a5c1b
commit 297ce7be55
9 changed files with 350 additions and 319 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
test/css/adduser.css
View File

@ -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 */

1
test/css/adduser.css.map
View File

@ -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"}

2
test/css/login.css
View File

@ -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 */

1
test/css/login.css.map
View File

@ -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"}

16
test/html/adduser.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/home/lcm/Works/ldapmanager/test/css/adduser.css">
<link rel="stylesheet" href="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/css/adduser.css">
<title>Add New User</title>
</head>
<body>
@ -71,7 +71,7 @@
<input type="range" class="range-slider" id="experience_level" name="experience_level" min="0" max="100" step="1">
</div>
<div class="form-group role-dropdown">
<div class="form-group dropdown-menu">
<label for="role">User Role</label>
<select id="role" name="role" required>
<option value="" class="placeholder-option">--Select Role--</option>
@ -81,9 +81,9 @@
</select>
</div>
<div class="form-group admin-access">
<div class="form-group checkbox-set">
<label>Admin Access</label>
<div class="checkbox-group">
<div class="checkboxes">
<input type="checkbox" id="add-access" name="add_access">
<label class="checkbox" for="add-access">Add</label>
@ -100,7 +100,7 @@
<input type="datetime-local" id="password-expire-at" name="password_expire_at" value="2018-06-12T19:30">
</div>
<div class="form-group">
<div class="form-group radio-input">
<label>Account Status</label>
<div class="radio-group">
<input type="radio" id="active" name="account_status" value="active">
@ -111,14 +111,14 @@
</div>
</div>
<div class="form-group submit-button">
<div class="form-group submit-buttons">
<button type="reset" class="clear-button">Clear</button>
<button type="submit">Add User</button>
<button type="submit" class="submit">Add User</button>
</div>
</form>
</div>
</body>
<script src="/home/lcm/Works/ldapmanager/test/js/rangeslider.js"></script>
<script src="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/js/rangeslider.js"></script >
</html>

2
test/js/rangeslider.js
View File

@ -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;

6
test/scripts/csswatch.sh
View File

@ -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;

65
test/scss/_colors.scss
View File

@ -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));

484
test/scss/adduser.scss
View File

@ -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
}
}
}
}
}
}
}