candifloss/ldapmanager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

css comments cleanup

Browse Source
This commit is contained in:
Candifloss 2024-10-29 01:11:18 +05:30
parent e69988d1c5
commit 315b784fa9
3 changed files with 32 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
test/css/adduser.css
View File

@ -116,7 +116,6 @@ body .form-container form .form-group.checkbox-set .checkboxes input[type=checkb
body .form-container form .form-group.dropdown-menu { body .form-container form .form-group.dropdown-menu {
flex: 1 1 calc(50% - 20px); flex: 1 1 calc(50% - 20px);
min-width: 250px; min-width: 250px;
padding: 0;
} }
body .form-container form .form-group.radio-input .radio-group { body .form-container form .form-group.radio-input .radio-group {
display: flex; display: flex;

4
test/scss/_colors.scss
View File

@ -77,10 +77,10 @@ $user-form-radio-button-active-color: $user-form-checkbox-button-active-color;
$user-form-radio-button-active-text-color: $user-form-checkbox-button-active-text-color; $user-form-radio-button-active-text-color: $user-form-checkbox-button-active-text-color;
$user-form-radio-button-active-border-color: $user-form-checkbox-button-active-border-color; $user-form-radio-button-active-border-color: $user-form-checkbox-button-active-border-color;
//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;
//$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 var(--value)); // This gradient makes it look like a progress-bar, filled upto `--value`
$form-range-slider-background-gradient: $form-range-slider-background-gradient:
linear-gradient( linear-gradient(
to right, to right,

63
test/scss/adduser.scss
View File

@ -1,25 +1,25 @@
@use "common"; // Reset styles @use "common"; // Reset styles
@use "colors" as *; // Color scheme for Add New User page @use "colors" as *; // Color scheme
// Basic styling for the body // Basic styling for the body
body { body {
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
background: $add-user-background-color; // Use background gradient for the page background: $add-user-background-color;
display: flex; display: flex;
justify-content: center; // Center the form horizontally justify-content: center; // Center the form horizontally
align-items: center; // Center the form vertically align-items: center; // Center the form vertically
height: 100%; height: 100%;
padding: 20px; // Add some padding for mobile responsiveness padding: 20px; // Some padding for mobile responsiveness
// Container for the form // Container for the form
.form-container { .form-container {
background-color: $add-user-form-background; // Form background color background-color: $add-user-form-background;
padding: 40px; padding: 40px;
border-radius: 12px; // Rounded corners for the form border-radius: 12px; // Rounded corners
box-shadow: 0 8px 15px $add-user-form-shadow-color; box-shadow: 0 8px 15px $add-user-form-shadow-color;
width: 100%; width: 100%;
max-width: 800px; // Increase the maximum width for a wider form max-width: 800px;
text-align: left; // Left-align text text-align: left;
margin: auto; margin: auto;
// Form header // Form header
@ -63,14 +63,14 @@ body {
select { select {
width: 100%; // Full width of the form group width: 100%; // Full width of the form group
padding: 12px; padding: 12px;
border: 1px solid $add-user-input-border-color; // Input field border color border: 1px solid $add-user-input-border-color;
border-radius: $input-field-border-radius; border-radius: $input-field-border-radius;
background-color: $add-user-input-background; // Input background color background-color: $add-user-input-background;
font-size: 16px; font-size: 16px;
transition: border-color 0.3s, background-color 0.3s; transition: border-color 0.3s, background-color 0.3s;
&:focus { &:focus {
border-color: $add-user-input-focus-border-color; // Focus border color border-color: $add-user-input-focus-border-color;
outline: none; outline: none;
} }
} }
@ -92,24 +92,23 @@ body {
display: none; display: none;
} }
// Style the label as a button to match input fields // Style the label as a button
label.checkbox { label.checkbox {
cursor: pointer; cursor: pointer;
padding: 12px; // Match the padding with the input fields padding: 12px;
border: 1px solid $user-form-checkbox-button-border-color; // Use the same border style border: 1px solid $user-form-checkbox-button-border-color;
border-radius: $input-field-border-radius; // Match the border radius with other inputs border-radius: $input-field-border-radius;
background-color: $add-user-input-background; // Use the same background color background-color: $add-user-input-background;
font-size: 16px; // Font size consistency font-size: 16px;
text-align: center; text-align: center;
width: 100%; // Make the label full-width width: 100%;
transition: background-color 0.3s, color 0.3s, border-color 0.3s; transition: background-color 0.3s, color 0.3s, border-color 0.3s;
user-select: none; user-select: none;
// Change background when active or focused
&:hover, &:hover,
&:focus { &:focus {
background-color: $user-form-checkbox-button-hover-color; background-color: $user-form-checkbox-button-hover-color;
border-color: $user-form-checkbox-button-hover-border-color; // Use focus border color border-color: $user-form-checkbox-button-hover-border-color;
} }
} }
@ -126,7 +125,6 @@ body {
&.dropdown-menu { &.dropdown-menu {
flex: 1 1 calc(50% - 20px); // Explicitly set to half width, considering gap flex: 1 1 calc(50% - 20px); // Explicitly set to half width, considering gap
min-width: 250px; // Minimum width to avoid shrinking too much min-width: 250px; // Minimum width to avoid shrinking too much
padding: 0; // Reset any padding
} }
&.radio-input { &.radio-input {
@ -139,24 +137,22 @@ body {
display: none; display: none;
} }
// Style the label as a button to match the checkboxes
label.radio { label.radio {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: $input-field-border-radius; border-radius: $input-field-border-radius;
//background: $user-form-radio-button-color;
cursor: pointer; cursor: pointer;
padding: 12px; // Match the padding with the other styled elements padding: 12px;
border: 1px solid $add-user-input-border-color; border: 1px solid $add-user-input-border-color;
border-radius: $input-field-border-radius; border-radius: $input-field-border-radius;
background-color: $add-user-input-background; background-color: $add-user-input-background;
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
width: 100%; // Make the label full-width width: 100%;
transition: background-color 0.3s, color 0.3s, border-color 0.3s; transition: background-color 0.3s, color 0.3s, border-color 0.3s;
user-select: none; user-select: none;
// Change background when active or focused // Hover & Focus
&:hover, &:hover,
&:focus { &:focus {
background-color: $user-form-radio-button-hover-color; background-color: $user-form-radio-button-hover-color;
@ -164,7 +160,7 @@ body {
} }
} }
// Change styles when the radio button is checked // Radio checked
input[type="radio"]:checked + label.radio { input[type="radio"]:checked + label.radio {
background-color: $user-form-radio-button-active-color; background-color: $user-form-radio-button-active-color;
color: $user-form-radio-button-active-text-color; color: $user-form-radio-button-active-text-color;
@ -173,7 +169,7 @@ body {
} }
} }
// Style the range input to match the other form inputs // Range input
--value: 50; --value: 50;
$form-range-slider-height: 45px; $form-range-slider-height: 45px;
@mixin slider_track { @mixin slider_track {
@ -218,7 +214,6 @@ body {
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
@include slider_thumb; @include slider_thumb;
//border: 2px solid $add-user-input-border-color;
} }
&::-moz-range-thumb { &::-moz-range-thumb {
@ -232,21 +227,21 @@ body {
} }
// Submit button styling // Submit button styling
&.submit-buttons { &.submit-buttons {
flex: 1 1 100%; // Full width for the submit button flex: 1 1 100%; // Full width of the available space
display: flex; // Use flex to align the buttons display: flex; // Use flex to align the buttons
justify-content: space-between; // Space between buttons justify-content: space-between; // Space between buttons
margin-top: 20px; // Space above the buttons margin-top: 20px; // Space above the buttons
button { button {
width: 48%; // Set both buttons to take up nearly half of the width width: 48%;
text-align: center; text-align: center;
padding: 12px; // Padding for button padding: 12px;
border-radius: $input-field-border-radius; border-radius: $input-field-border-radius;
// Add styles for the clear button // Add styles for the clear button
&.clear-button { &.clear-button {
background-color: $add-user-clear-button-color; // Define your clear button color in colors.scss background-color: $add-user-clear-button-color;
color: $add-user-clear-button-text-color; // Define clear button text color in colors.scss color: $add-user-clear-button-text-color;
&:hover { &:hover {
background-color: $add-user-clear-button-hover-color; // Hover effect color background-color: $add-user-clear-button-hover-color; // Hover effect color
@ -255,7 +250,7 @@ body {
// Existing styles for submit button // Existing styles for submit button
&.submit { &.submit {
background-color: $add-user-button-color; // Primary button color background-color: $add-user-button-color;
color: $add-user-button-text-color; color: $add-user-button-text-color;
border: none; border: none;