more input types
This commit is contained in:
parent
bc79d6912c
commit
42a47fe51e
3
.gitignore
vendored
3
.gitignore
vendored
@ -1 +1,2 @@
|
||||
.venv/
|
||||
.venv/
|
||||
test/scripts/csswatch.sh
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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"}
|
||||
{"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"}
|
||||
@ -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"}
|
||||
{"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"}
|
||||
@ -1,84 +1,123 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<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">
|
||||
<title>Add New User</title>
|
||||
</head>
|
||||
<body>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/css/adduser.css">
|
||||
<title>Add New User</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="form-container">
|
||||
<h2>Add New User</h2>
|
||||
<form action="/add_user" method="post">
|
||||
<div class="form-group">
|
||||
<label for="full-name">Full Name</label>
|
||||
<input type="text" id="full-name" name="full_name" placeholder="Full Name" required>
|
||||
</div>
|
||||
<div class="form-container">
|
||||
<h2>Add New User</h2>
|
||||
<form action="/add_user" method="post">
|
||||
<div class="form-group">
|
||||
<label for="full-name">Full Name</label>
|
||||
<input type="text" id="full-name" name="full_name" placeholder="Full Name" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" name="username" placeholder="Username" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" name="username" placeholder="Username" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" name="password" placeholder="Password" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" name="password" placeholder="Password" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" id="email" name="email" placeholder="Email Address" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="passwordconfirm">Confirm password</label>
|
||||
<input type="password" id="passwordconfirm" name="passwordconfirm" placeholder="Re-enter password" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="date-joining">Date of Joining</label>
|
||||
<input type="date" id="date-joining" name="date_of_joining" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="designation">Designation</label>
|
||||
<input type="text" id="designation" name="designation" placeholder="Designation" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="date-birth">Date of Birth</label>
|
||||
<input type="date" id="date-birth" name="date_of_birth" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group role-dropdown">
|
||||
<label for="role">User Role</label>
|
||||
<select id="role" name="role" required>
|
||||
<option value="" class="placeholder-option">--Select Role--</option>
|
||||
<option value="admin">Admin</option>
|
||||
<option value="user">User</option>
|
||||
<option value="moderator">Moderator</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="department">Department</label>
|
||||
<input type="text" id="department" name="department" placeholder="Department">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" id="email" name="email" placeholder="Email Address" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="mail-quota">Mail Quota (MB)</label>
|
||||
<input type="number" id="mail-quota" name="mail_quota" placeholder="Enter mail quota in MB" value="0" min="0" step="1" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="date-joining">Date of Joining</label>
|
||||
<input type="date" id="date-joining" name="date_of_joining" value="2018-07-22" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="date-birth">Date of Birth</label>
|
||||
<input type="date" id="date-birth" name="date_of_birth" value="2018-07-22" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="mobile_number">Mobile Number</label>
|
||||
<input type="tel" id="mobile_number" name="mobile_number" placeholder="Enter mobile number">
|
||||
</div>
|
||||
|
||||
<!-- New input field for testing -->
|
||||
<div class="form-group">
|
||||
<label for="department">Department</label>
|
||||
<input type="text" id="department" name="department" placeholder="Department">
|
||||
<label for="experience_level">Experience Level</label>
|
||||
<input type="range" id="experience_level" name="experience_level" min="0" max="10" step="1">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-group admin-access">
|
||||
<label>Admin Access</label>
|
||||
<div class="checkbox-group">
|
||||
<input type="checkbox" id="add-access" name="add_access">
|
||||
<label class="checkbox" for="add-access">Add</label>
|
||||
<div class="form-group role-dropdown">
|
||||
<label for="role">User Role</label>
|
||||
<select id="role" name="role" required>
|
||||
<option value="" class="placeholder-option">--Select Role--</option>
|
||||
<option value="admin">Admin</option>
|
||||
<option value="user">User</option>
|
||||
<option value="moderator">Moderator</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<input type="checkbox" id="edit-access" name="edit_access">
|
||||
<label class="checkbox" for="edit-access">Edit</label>
|
||||
<div class="form-group admin-access">
|
||||
<label>Admin Access</label>
|
||||
<div class="checkbox-group">
|
||||
<input type="checkbox" id="add-access" name="add_access">
|
||||
<label class="checkbox" for="add-access">Add</label>
|
||||
|
||||
<input type="checkbox" id="approve-access" name="approve_access">
|
||||
<label class="checkbox" for="approve-access">Approve</label>
|
||||
<input type="checkbox" id="edit-access" name="edit_access">
|
||||
<label class="checkbox" for="edit-access">Edit</label>
|
||||
|
||||
<input type="checkbox" id="approve-access" name="approve_access">
|
||||
<label class="checkbox" for="approve-access">Approve</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password-expire-at">Password Expire At</label>
|
||||
<input type="datetime-local" id="password-expire-at" name="password_expire_at" value="2018-06-12T19:30">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Account Status</label>
|
||||
<div class="radio-group">
|
||||
<input type="radio" id="active" name="account_status" value="active">
|
||||
<label class="radio" for="active">Active</label>
|
||||
|
||||
<input type="radio" id="inactive" name="account_status" value="inactive">
|
||||
<label class="radio" for="inactive">Inactive</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="form-group submit-button">
|
||||
<button type="submit">Add User</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<div class="form-group submit-button">
|
||||
<button type="submit">Add User</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -3,13 +3,13 @@
|
||||
<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/login.css">
|
||||
<link rel="stylesheet" href="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/css/login.css">
|
||||
<title>Login Page</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="left-container">
|
||||
<img src="/home/lcm/Works/ldapmanager/test/images/logo2.png" alt="Company Logo" class="logo">
|
||||
<img src="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/images/logo2.png" alt="Company Logo" class="logo">
|
||||
<h1>LDAP Manager</h1>
|
||||
<p>User management system</p>
|
||||
</div>
|
||||
|
||||
@ -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;
|
||||
@ -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);
|
||||
|
||||
@ -8,4 +8,4 @@
|
||||
// Hide the title
|
||||
title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user