modular scss
This commit is contained in:
parent
315b784fa9
commit
f6727ab813
@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<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/entry-form.css">
|
||||||
<title>Add New User</title>
|
<title>Add New User</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -68,7 +68,7 @@
|
|||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="experience_level">Experience Level</label>
|
<label for="experience_level">Experience Level</label>
|
||||||
<input type="range" class="range-slider" id="experience_level" name="experience_level" min="0" max="100" step="1">
|
<input type="range" class="range-slider" id="experience_level" name="experience_level" value="10" min="0" max="100" step="1">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group dropdown-menu">
|
<div class="form-group dropdown-menu">
|
||||||
@ -120,5 +120,5 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</body>
|
</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>
|
</html>
|
||||||
|
|||||||
@ -22,7 +22,7 @@ $login-button-shadow: rgba(0, 95, 115, 0.3);
|
|||||||
$login-button-active-shadow: rgba(70, 70, 70, 0.2);
|
$login-button-active-shadow: rgba(70, 70, 70, 0.2);
|
||||||
$login-button-text-color: #fff;
|
$login-button-text-color: #fff;
|
||||||
|
|
||||||
// Add New User Page ////////////////////////////////
|
// Entry Form Page ////////////////////////////////
|
||||||
|
|
||||||
// Page
|
// Page
|
||||||
$add-user-background-color: linear-gradient(135deg, #283e4a, #1c2e38); // Background gradient
|
$add-user-background-color: linear-gradient(135deg, #283e4a, #1c2e38); // Background gradient
|
||||||
@ -80,11 +80,3 @@ $user-form-radio-button-active-border-color: $user-form-checkbox-button-active-b
|
|||||||
// Range slider
|
// Range slider
|
||||||
$user-form-range-slider-background: $add-user-input-background;
|
$user-form-range-slider-background: $add-user-input-background;
|
||||||
$user-form-range-slider-filled: $user-form-checkbox-button-active-color;
|
$user-form-range-slider-filled: $user-form-checkbox-button-active-color;
|
||||||
// This gradient makes it look like a progress-bar, filled upto `--value`
|
|
||||||
$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 0%
|
|
||||||
);
|
|
||||||
3
test/scss/_vars.scss
Normal file
3
test/scss/_vars.scss
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
// Varable definitions /////////////////////////////////////////////
|
||||||
|
|
||||||
|
$input-field-border-radius: 6px; // Round corners
|
||||||
@ -1,270 +0,0 @@
|
|||||||
@use "common"; // Reset styles
|
|
||||||
@use "colors" as *; // Color scheme
|
|
||||||
|
|
||||||
// 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 {
|
|
||||||
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
|
|
||||||
$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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.checkbox-set {
|
|
||||||
label {
|
|
||||||
display: block;
|
|
||||||
color: $add-user-form-title-color;
|
|
||||||
font-size: 16px;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkboxes {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
|
|
||||||
// Hide the checkboxes
|
|
||||||
input[type="checkbox"] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Style the label as a button
|
|
||||||
label.checkbox {
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 12px;
|
|
||||||
border: 1px solid $user-form-checkbox-button-border-color;
|
|
||||||
border-radius: $input-field-border-radius;
|
|
||||||
background-color: $add-user-input-background;
|
|
||||||
font-size: 16px;
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
|
|
||||||
user-select: none;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
background-color: $user-form-checkbox-button-hover-color;
|
|
||||||
border-color: $user-form-checkbox-button-hover-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
|
|
||||||
&.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
|
|
||||||
}
|
|
||||||
|
|
||||||
&.radio-input {
|
|
||||||
.radio-group {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
|
|
||||||
// Hide the radio buttons
|
|
||||||
input[type="radio"] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
label.radio {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: $input-field-border-radius;
|
|
||||||
cursor: pointer;
|
|
||||||
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;
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
|
|
||||||
user-select: none;
|
|
||||||
|
|
||||||
// Hover & Focus
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
background-color: $user-form-radio-button-hover-color;
|
|
||||||
border-color: $user-form-radio-button-hover-border-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Radio 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Range input
|
|
||||||
--value: 50;
|
|
||||||
$form-range-slider-height: 45px;
|
|
||||||
@mixin slider_track {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: $input-field-border-radius;
|
|
||||||
}
|
|
||||||
@mixin slider_thumb {
|
|
||||||
display: none;
|
|
||||||
appearance: none;
|
|
||||||
width: 0;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
input[type="range"] {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
width: 100%;
|
|
||||||
height: $form-range-slider-height;
|
|
||||||
border-radius: $input-field-border-radius;
|
|
||||||
background: $form-range-slider-background-gradient;
|
|
||||||
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 {
|
|
||||||
@include slider_track;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-moz-range-track {
|
|
||||||
@include slider_track;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Slider thumb
|
|
||||||
&::-webkit-slider-thumb {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
@include slider_thumb;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-moz-range-thumb {
|
|
||||||
@include slider_thumb;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: $add-user-input-focus-border-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Submit button styling
|
|
||||||
&.submit-buttons {
|
|
||||||
flex: 1 1 100%; // Full width of the available space
|
|
||||||
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%;
|
|
||||||
text-align: center;
|
|
||||||
padding: 12px;
|
|
||||||
border-radius: $input-field-border-radius;
|
|
||||||
|
|
||||||
// Add styles for the clear button
|
|
||||||
&.clear-button {
|
|
||||||
background-color: $add-user-clear-button-color;
|
|
||||||
color: $add-user-clear-button-text-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;
|
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
51
test/scss/entry-form-fields/_checkboxes.scss
Normal file
51
test/scss/entry-form-fields/_checkboxes.scss
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
@use "../colors" as *;
|
||||||
|
@use "../vars" as *;
|
||||||
|
|
||||||
|
// Check-box input
|
||||||
|
@mixin checkboxes {
|
||||||
|
&.checkbox-set {
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
color: $add-user-form-title-color;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkboxes {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
// Hide the actual checkboxes
|
||||||
|
input[type="checkbox"] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Style the label as a button
|
||||||
|
label.checkbox {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid $user-form-checkbox-button-border-color;
|
||||||
|
border-radius: $input-field-border-radius;
|
||||||
|
background-color: $add-user-input-background;
|
||||||
|
font-size: 16px;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
background-color: $user-form-checkbox-button-hover-color;
|
||||||
|
border-color: $user-form-checkbox-button-hover-border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Indicate when 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
11
test/scss/entry-form-fields/_drop-down-menu.scss
Normal file
11
test/scss/entry-form-fields/_drop-down-menu.scss
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
@use "../colors" as *;
|
||||||
|
@use "../vars" as *;
|
||||||
|
|
||||||
|
// Drop-down menus
|
||||||
|
@mixin drop-down-menu {
|
||||||
|
// Dropdown Menu
|
||||||
|
&.dropdown-menu {
|
||||||
|
flex: 1 1 calc(50% - 20px); // Half width, considering gap
|
||||||
|
min-width: 250px; // Minimum width to avoid shrinking too much
|
||||||
|
}
|
||||||
|
}
|
||||||
47
test/scss/entry-form-fields/_radio-buttons.scss
Normal file
47
test/scss/entry-form-fields/_radio-buttons.scss
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
@use "../colors" as *;
|
||||||
|
@use "../vars" as *;
|
||||||
|
|
||||||
|
// Radio buttons
|
||||||
|
@mixin radio-buttons {
|
||||||
|
&.radio-input {
|
||||||
|
.radio-group {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
// Hide the actual radio buttons
|
||||||
|
input[type="radio"] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
label.radio {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: $input-field-border-radius;
|
||||||
|
cursor: pointer;
|
||||||
|
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;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
// Hover & Focus
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
background-color: $user-form-radio-button-hover-color;
|
||||||
|
border-color: $user-form-radio-button-hover-border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Radio 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
74
test/scss/entry-form-fields/_range-slider.scss
Normal file
74
test/scss/entry-form-fields/_range-slider.scss
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
@use "../colors" as *;
|
||||||
|
@use "../vars" as *;
|
||||||
|
|
||||||
|
$form-range-slider-height: 45px;
|
||||||
|
// The slider's track, ie., unfilled background
|
||||||
|
@mixin slider_track {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: $input-field-border-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
// The slider's draggable thingy
|
||||||
|
@mixin slider_thumb {
|
||||||
|
display: none; // Hide the actual thing, since we use a different representation
|
||||||
|
appearance: none;
|
||||||
|
width: 0;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// This gradient makes it look like a progress-bar, filled upto `--value`
|
||||||
|
$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 0%
|
||||||
|
);
|
||||||
|
|
||||||
|
// Range input, styled as a progress bar
|
||||||
|
@mixin range-slider {
|
||||||
|
--value: 50; // This value is not used except for initialization
|
||||||
|
input[type="range"] {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
width: 100%;
|
||||||
|
height: $form-range-slider-height;
|
||||||
|
border-radius: $input-field-border-radius;
|
||||||
|
background: $form-range-slider-background-gradient; // The effect to make it look like a progress-bar
|
||||||
|
border: 1px solid $add-user-input-border-color;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
// Slider track
|
||||||
|
&::-webkit-slider-runnable-track {
|
||||||
|
@include slider_track;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-moz-range-track {
|
||||||
|
@include slider_track;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Slider thumb
|
||||||
|
&::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
@include slider_thumb;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-moz-range-thumb {
|
||||||
|
@include slider_thumb;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: $add-user-input-focus-border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
44
test/scss/entry-form-fields/_submit-buttons.scss
Normal file
44
test/scss/entry-form-fields/_submit-buttons.scss
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
@use "../colors" as *;
|
||||||
|
@use "../vars" as *;
|
||||||
|
|
||||||
|
// Submit button styling
|
||||||
|
@mixin submit-buttons {
|
||||||
|
&.submit-buttons {
|
||||||
|
flex: 1 1 100%; // Full width of the available space
|
||||||
|
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%;
|
||||||
|
text-align: center;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: $input-field-border-radius;
|
||||||
|
|
||||||
|
// Add styles for the clear button
|
||||||
|
&.clear-button {
|
||||||
|
background-color: $add-user-clear-button-color;
|
||||||
|
color: $add-user-clear-button-text-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;
|
||||||
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
91
test/scss/entry-form.scss
Normal file
91
test/scss/entry-form.scss
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
@use "common"; // Reset styles
|
||||||
|
@use "colors" as *; // Color scheme
|
||||||
|
@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 *;
|
||||||
|
|
||||||
|
// 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 {
|
||||||
|
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
|
||||||
|
$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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include checkboxes;
|
||||||
|
@include drop-down-menu;
|
||||||
|
@include radio-buttons;
|
||||||
|
@include range-slider;
|
||||||
|
@include submit-buttons;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user