96 lines
3.4 KiB
SCSS
96 lines
3.4 KiB
SCSS
@use "common"; // Reset styles
|
|
@use "colors" as *; // Color scheme
|
|
@use "vars" as *;
|
|
@use "entry-form-fields/submit-buttons" as *;
|
|
@use "entry-form-fields/range-slider" as *;
|
|
@use "entry-form-fields/radio-buttons" as *;
|
|
@use "entry-form-fields/checkboxes" as *;
|
|
@use "entry-form-fields/drop-down-menu" as *;
|
|
@use "entry-form-fields/collapsible-section" as *;
|
|
|
|
// Basic styling for the body
|
|
body {
|
|
font-family: 'Arial', sans-serif;
|
|
background: $add-user-background-color;
|
|
display: flex;
|
|
justify-content: center; // Center the form horizontally
|
|
align-items: center; // Center the form vertically
|
|
height: 100%;
|
|
padding: 20px; // Some padding for mobile responsiveness
|
|
|
|
// Container for the form
|
|
.form-container {
|
|
background-color: $add-user-form-background;
|
|
padding: 40px;
|
|
border-radius: 12px; // Rounded corners
|
|
box-shadow: 0 8px 15px $add-user-form-shadow-color;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
text-align: left;
|
|
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 element
|
|
form {
|
|
margin-bottom: 20px; // Add space below the form for submit button
|
|
.main-form, .collapsible-section {
|
|
display: flex;
|
|
flex-wrap: wrap; // Allow wrapping for form groups
|
|
gap: 20px; // Add consistent gap between elements
|
|
.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;
|
|
}
|
|
|
|
// 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;
|
|
border-radius: $input-field-border-radius;
|
|
background-color: $add-user-input-background;
|
|
font-size: 16px;
|
|
transition: border-color 0.3s, background-color 0.3s;
|
|
|
|
&:focus {
|
|
border-color: $add-user-input-focus-border-color;
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
// Form groups for each input
|
|
@include checkboxes;
|
|
@include drop-down-menu;
|
|
@include radio-buttons;
|
|
@include range-slider;
|
|
}
|
|
@include collapsible;
|
|
}
|
|
@include submit-buttons;
|
|
}
|
|
}
|
|
}
|