modular scss
This commit is contained in:
parent
315b784fa9
commit
f6727ab813
@ -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/entry-form.css">
|
||||
<title>Add New User</title>
|
||||
</head>
|
||||
<body>
|
||||
@ -68,7 +68,7 @@
|
||||
|
||||
<div class="form-group">
|
||||
<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 class="form-group dropdown-menu">
|
||||
@ -120,5 +120,5 @@
|
||||
</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>
|
||||
|
||||
@ -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-text-color: #fff;
|
||||
|
||||
// Add New User Page ////////////////////////////////
|
||||
// Entry Form Page ////////////////////////////////
|
||||
|
||||
// Page
|
||||
$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
|
||||
$user-form-range-slider-background: $add-user-input-background;
|
||||
$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