From 315b784fa95f28e68cb61f71084c048c9fe18c1f Mon Sep 17 00:00:00 2001 From: candifloss Date: Tue, 29 Oct 2024 01:11:18 +0530 Subject: [PATCH] css comments cleanup --- test/css/adduser.css | 1 - test/scss/_colors.scss | 6 ++-- test/scss/adduser.scss | 63 +++++++++++++++++++----------------------- 3 files changed, 32 insertions(+), 38 deletions(-) diff --git a/test/css/adduser.css b/test/css/adduser.css index 3e5f3c0..1073be0 100644 --- a/test/css/adduser.css +++ b/test/css/adduser.css @@ -116,7 +116,6 @@ body .form-container form .form-group.checkbox-set .checkboxes input[type=checkb body .form-container form .form-group.dropdown-menu { flex: 1 1 calc(50% - 20px); min-width: 250px; - padding: 0; } body .form-container form .form-group.radio-input .radio-group { display: flex; diff --git a/test/scss/_colors.scss b/test/scss/_colors.scss index 5a7ffcf..2a604f3 100644 --- a/test/scss/_colors.scss +++ b/test/scss/_colors.scss @@ -77,14 +77,14 @@ $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-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-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: linear-gradient( to right, - $user-form-range-slider-filled 0%, + $user-form-range-slider-filled 0%, $user-form-range-slider-filled var(--value), $user-form-range-slider-background 0% ); \ No newline at end of file diff --git a/test/scss/adduser.scss b/test/scss/adduser.scss index 683313a..e115dd0 100644 --- a/test/scss/adduser.scss +++ b/test/scss/adduser.scss @@ -1,25 +1,25 @@ @use "common"; // Reset styles -@use "colors" as *; // Color scheme for Add New User page +@use "colors" as *; // Color scheme // Basic styling for the body body { font-family: 'Arial', sans-serif; - background: $add-user-background-color; // Use background gradient for the page + 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; // Add some padding for mobile responsiveness + padding: 20px; // Some padding for mobile responsiveness // Container for the form .form-container { - background-color: $add-user-form-background; // Form background color + background-color: $add-user-form-background; 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; width: 100%; - max-width: 800px; // Increase the maximum width for a wider form - text-align: left; // Left-align text + max-width: 800px; + text-align: left; margin: auto; // Form header @@ -63,14 +63,14 @@ body { select { width: 100%; // Full width of the form group 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; - background-color: $add-user-input-background; // Input background color + 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; // Focus border color + border-color: $add-user-input-focus-border-color; outline: none; } } @@ -92,24 +92,23 @@ body { display: none; } - // Style the label as a button to match input fields + // Style the label as a button label.checkbox { cursor: pointer; - padding: 12px; // Match the padding with the input fields - border: 1px solid $user-form-checkbox-button-border-color; // Use the same border style - border-radius: $input-field-border-radius; // Match the border radius with other inputs - background-color: $add-user-input-background; // Use the same background color - font-size: 16px; // Font size consistency + 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%; // Make the label full-width + width: 100%; transition: background-color 0.3s, color 0.3s, border-color 0.3s; user-select: none; - // Change background when active or focused &:hover, &:focus { 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 { 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 } &.radio-input { @@ -139,24 +137,22 @@ body { display: none; } - // Style the label as a button to match the checkboxes label.radio { width: 100%; height: 100%; border-radius: $input-field-border-radius; - //background: $user-form-radio-button-color; cursor: pointer; - padding: 12px; // Match the padding with the other styled elements + 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%; // Make the label full-width + width: 100%; transition: background-color 0.3s, color 0.3s, border-color 0.3s; user-select: none; - // Change background when active or focused + // Hover & Focus &:hover, &:focus { 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 { background-color: $user-form-radio-button-active-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; $form-range-slider-height: 45px; @mixin slider_track { @@ -218,7 +214,6 @@ body { &::-webkit-slider-thumb { -webkit-appearance: none; @include slider_thumb; - //border: 2px solid $add-user-input-border-color; } &::-moz-range-thumb { @@ -232,21 +227,21 @@ body { } // Submit button styling &.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 justify-content: space-between; // Space between buttons margin-top: 20px; // Space above the buttons button { - width: 48%; // Set both buttons to take up nearly half of the width + width: 48%; text-align: center; - padding: 12px; // Padding for button + padding: 12px; border-radius: $input-field-border-radius; // Add styles for the clear button &.clear-button { - background-color: $add-user-clear-button-color; // Define your clear button color in colors.scss - color: $add-user-clear-button-text-color; // Define clear button text color in colors.scss + 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 @@ -255,7 +250,7 @@ body { // Existing styles for submit button &.submit { - background-color: $add-user-button-color; // Primary button color + background-color: $add-user-button-color; color: $add-user-button-text-color; border: none;