diff --git a/test/css/adduser.css b/test/css/entry-form.css similarity index 100% rename from test/css/adduser.css rename to test/css/entry-form.css diff --git a/test/html/adduser.html b/test/html/adduser.html index c86036d..997b2d7 100644 --- a/test/html/adduser.html +++ b/test/html/adduser.html @@ -3,7 +3,7 @@ - + Add New User @@ -68,7 +68,7 @@
- +
@@ -120,5 +120,5 @@
- + diff --git a/test/scss/_colors.scss b/test/scss/_colors.scss index 2a604f3..142620b 100644 --- a/test/scss/_colors.scss +++ b/test/scss/_colors.scss @@ -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% - ); \ No newline at end of file diff --git a/test/scss/_vars.scss b/test/scss/_vars.scss new file mode 100644 index 0000000..ab83530 --- /dev/null +++ b/test/scss/_vars.scss @@ -0,0 +1,3 @@ +// Varable definitions ///////////////////////////////////////////// + +$input-field-border-radius: 6px; // Round corners diff --git a/test/scss/adduser.scss b/test/scss/adduser.scss deleted file mode 100644 index e115dd0..0000000 --- a/test/scss/adduser.scss +++ /dev/null @@ -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 - } - } - } - } - } - } -} diff --git a/test/scss/entry-form-fields/_checkboxes.scss b/test/scss/entry-form-fields/_checkboxes.scss new file mode 100644 index 0000000..a707904 --- /dev/null +++ b/test/scss/entry-form-fields/_checkboxes.scss @@ -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; + } + } + } +} diff --git a/test/scss/entry-form-fields/_drop-down-menu.scss b/test/scss/entry-form-fields/_drop-down-menu.scss new file mode 100644 index 0000000..adfa93f --- /dev/null +++ b/test/scss/entry-form-fields/_drop-down-menu.scss @@ -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 + } +} diff --git a/test/scss/entry-form-fields/_radio-buttons.scss b/test/scss/entry-form-fields/_radio-buttons.scss new file mode 100644 index 0000000..de4884d --- /dev/null +++ b/test/scss/entry-form-fields/_radio-buttons.scss @@ -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; + } + } + } +} diff --git a/test/scss/entry-form-fields/_range-slider.scss b/test/scss/entry-form-fields/_range-slider.scss new file mode 100644 index 0000000..aff5586 --- /dev/null +++ b/test/scss/entry-form-fields/_range-slider.scss @@ -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; + } + } +} diff --git a/test/scss/entry-form-fields/_submit-buttons.scss b/test/scss/entry-form-fields/_submit-buttons.scss new file mode 100644 index 0000000..af148b2 --- /dev/null +++ b/test/scss/entry-form-fields/_submit-buttons.scss @@ -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 + } + } + } +} diff --git a/test/scss/entry-form.scss b/test/scss/entry-form.scss new file mode 100644 index 0000000..1248d2e --- /dev/null +++ b/test/scss/entry-form.scss @@ -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; + } + } + } +}