135 lines
4.3 KiB
SCSS
135 lines
4.3 KiB
SCSS
@use "common"; // Reset styles
|
|
@use "colors" as *; // Color scheme for Add New User page
|
|
|
|
// 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
|
|
|
|
// 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 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
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|