From f9c45de019d2700e8100e3457c75033b48655ed0 Mon Sep 17 00:00:00 2001 From: candifloss Date: Wed, 30 Oct 2024 14:08:28 +0530 Subject: [PATCH] fixed collapsible section; scss clean-up --- test/css/entry-form.css | 22 +++++------ test/html/adduser.html | 15 +++---- .../_collapsible-section.scss | 4 +- .../entry-form-fields/_drop-down-menu.scss | 5 +-- .../scss/entry-form-fields/_input_fields.scss | 27 +++++++++++++ test/scss/entry-form-fields/_labels.scss | 12 ++++++ .../entry-form-fields/_radio-buttons.scss | 3 +- .../scss/entry-form-fields/_range-slider.scss | 27 ++++++------- .../entry-form-fields/_submit-buttons.scss | 8 ++-- test/scss/entry-form.scss | 39 +++---------------- 10 files changed, 89 insertions(+), 73 deletions(-) create mode 100644 test/scss/entry-form-fields/_input_fields.scss create mode 100644 test/scss/entry-form-fields/_labels.scss diff --git a/test/css/entry-form.css b/test/css/entry-form.css index 4d86ce9..7502ba0 100644 --- a/test/css/entry-form.css +++ b/test/css/entry-form.css @@ -42,7 +42,6 @@ body .form-container form fieldset { display: flex; flex-wrap: wrap; gap: 20px; - padding-bottom: 3px; } body .form-container form fieldset .form-group { flex: 1 1 calc(50% - 20px); @@ -178,31 +177,29 @@ body .form-container form fieldset .form-group input[type=range]::-webkit-slider display: none; appearance: none; width: 0; - height: 45px; + height: 0; border: none; - border-radius: 6px; - background-color: #009299; - cursor: pointer; + border-radius: 0; margin: 0; padding: 0; + cursor: pointer; } body .form-container form fieldset .form-group input[type=range]::-moz-range-thumb { display: none; appearance: none; width: 0; - height: 45px; + height: 0; border: none; - border-radius: 6px; - background-color: #009299; - cursor: pointer; + border-radius: 0; margin: 0; padding: 0; + cursor: pointer; } body .form-container form fieldset .form-group input[type=range]:focus { outline: none; border-color: #007b8a; } -body .form-container form fieldset .collapsible-section-title { +body .form-container form .collapsible-section-title { display: block; width: 100%; color: #b1b1b1; @@ -213,10 +210,13 @@ body .form-container form fieldset .collapsible-section-title { border-bottom: 2px solid rgba(220, 220, 220, 0.8); padding: 10px 2px; } -body .form-container form fieldset .collapsible-section-title:hover { +body .form-container form .collapsible-section-title:hover { color: #636363; background-color: #d4d4d4; } +body .form-container form #collapsible-section-title-1:checked + .collapsible-section { + display: none; +} body .form-container form .submit-buttons { flex: 1 1 100%; display: flex; diff --git a/test/html/adduser.html b/test/html/adduser.html index 013665b..91c7b7f 100644 --- a/test/html/adduser.html +++ b/test/html/adduser.html @@ -10,8 +10,8 @@

Add New User

-
-
+ +
@@ -24,12 +24,12 @@
- +
- +
@@ -113,8 +113,9 @@
-
- Advanced + + +
@@ -145,5 +146,5 @@
- + diff --git a/test/scss/entry-form-fields/_collapsible-section.scss b/test/scss/entry-form-fields/_collapsible-section.scss index 59987be..f133fc8 100644 --- a/test/scss/entry-form-fields/_collapsible-section.scss +++ b/test/scss/entry-form-fields/_collapsible-section.scss @@ -3,7 +3,6 @@ // Collapsible sections in the form, like "Advanced" @mixin collapsible { - padding-bottom: 3px; .collapsible-section-title { display: block; width: 100%; @@ -21,4 +20,7 @@ } } + #collapsible-section-title-1:checked + .collapsible-section { + display: none; + } } diff --git a/test/scss/entry-form-fields/_drop-down-menu.scss b/test/scss/entry-form-fields/_drop-down-menu.scss index adfa93f..37ea324 100644 --- a/test/scss/entry-form-fields/_drop-down-menu.scss +++ b/test/scss/entry-form-fields/_drop-down-menu.scss @@ -3,9 +3,8 @@ // 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 + flex: 1 1 calc(50% - 20px); // Same width as other fields + min-width: 250px; } } diff --git a/test/scss/entry-form-fields/_input_fields.scss b/test/scss/entry-form-fields/_input_fields.scss new file mode 100644 index 0000000..d92dbda --- /dev/null +++ b/test/scss/entry-form-fields/_input_fields.scss @@ -0,0 +1,27 @@ +@use "../colors" as *; +@use "../vars" as *; + +// Input fields and drop-down menu styling +@mixin input_fields { + 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 div + 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; + } + } +} diff --git a/test/scss/entry-form-fields/_labels.scss b/test/scss/entry-form-fields/_labels.scss new file mode 100644 index 0000000..fa4f911 --- /dev/null +++ b/test/scss/entry-form-fields/_labels.scss @@ -0,0 +1,12 @@ +@use "../colors" as *; +@use "../vars" as *; + +// Labels +@mixin labels { + label { + display: block; + color: $add-user-form-title-color; + font-size: 16px; + margin-bottom: 5px; + } +} diff --git a/test/scss/entry-form-fields/_radio-buttons.scss b/test/scss/entry-form-fields/_radio-buttons.scss index de4884d..362d108 100644 --- a/test/scss/entry-form-fields/_radio-buttons.scss +++ b/test/scss/entry-form-fields/_radio-buttons.scss @@ -13,6 +13,7 @@ display: none; } + // Style the labels like buttons label.radio { width: 100%; height: 100%; @@ -36,7 +37,7 @@ } } - // Radio checked + // Radio button checked input[type="radio"]:checked + label.radio { background-color: $user-form-radio-button-active-color; color: $user-form-radio-button-active-text-color; diff --git a/test/scss/entry-form-fields/_range-slider.scss b/test/scss/entry-form-fields/_range-slider.scss index aff5586..3d20db4 100644 --- a/test/scss/entry-form-fields/_range-slider.scss +++ b/test/scss/entry-form-fields/_range-slider.scss @@ -13,24 +13,23 @@ $form-range-slider-height: 45px; @mixin slider_thumb { display: none; // Hide the actual thing, since we use a different representation appearance: none; - width: 0; - height: $form-range-slider-height; + width: 0; // Set everything to 0 or none to make sure it's hidden + height: 0; border: none; - border-radius: $input-field-border-radius; - background-color: $user-form-range-slider-filled; - cursor: pointer; + border-radius: 0; margin: 0; - padding: 0; + padding: 0; + cursor: pointer; } -// This gradient makes it look like a progress-bar, filled upto `--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 var(--value), - $user-form-range-slider-background 0% - ); + 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 { @@ -52,6 +51,7 @@ $form-range-slider-background-gradient: @include slider_track; } + // Firefox &::-moz-range-track { @include slider_track; } @@ -62,6 +62,7 @@ $form-range-slider-background-gradient: @include slider_thumb; } + // Firefox &::-moz-range-thumb { @include slider_thumb; } diff --git a/test/scss/entry-form-fields/_submit-buttons.scss b/test/scss/entry-form-fields/_submit-buttons.scss index 77eb6f7..d08e8f2 100644 --- a/test/scss/entry-form-fields/_submit-buttons.scss +++ b/test/scss/entry-form-fields/_submit-buttons.scss @@ -1,11 +1,11 @@ @use "../colors" as *; @use "../vars" as *; -// Submit button styling +// Submit & clear buttons @mixin submit-buttons { .submit-buttons { flex: 1 1 100%; // Full width of the available space - display: flex; // Use flex to align the buttons + display: flex; // To align the contents(buttons) justify-content: space-between; // Space between buttons margin-top: 20px; // Space above the buttons @@ -15,7 +15,7 @@ padding: 12px; border-radius: $input-field-border-radius; - // Add styles for the clear button + // Clear button &.clear-button { background-color: $add-user-clear-button-color; color: $add-user-clear-button-text-color; @@ -25,7 +25,7 @@ } } - // Existing styles for submit button + // Submit button &.submit { background-color: $add-user-button-color; color: $add-user-button-text-color; diff --git a/test/scss/entry-form.scss b/test/scss/entry-form.scss index 580cfa6..cb428d3 100644 --- a/test/scss/entry-form.scss +++ b/test/scss/entry-form.scss @@ -7,6 +7,8 @@ @use "entry-form-fields/checkboxes" as *; @use "entry-form-fields/drop-down-menu" as *; @use "entry-form-fields/collapsible-section" as *; +@use "entry-form-fields/input_fields" as *; +@use "entry-form-fields/labels" as *; // Basic styling for the body body { @@ -48,47 +50,18 @@ body { .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; - } + @include labels; // Label styling for all inputs + @include input_fields; // Common styles for all inputs - // 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 + // Form groups for special input types @include checkboxes; @include drop-down-menu; @include radio-buttons; @include range-slider; } - @include collapsible; } + @include collapsible; @include submit-buttons; } }