From 494af30e43aaa13c4b09377bed6b6d3af224d4fd Mon Sep 17 00:00:00 2001 From: candifloss Date: Wed, 30 Oct 2024 16:44:23 +0530 Subject: [PATCH] style fixes --- test/css/entry-form.css | 24 ++++++++++++------- test/html/adduser.html | 8 +++---- test/scss/_colors.scss | 2 +- test/scss/entry-form-fields/_checkboxes.scss | 1 - .../_collapsible-section.scss | 23 ++++++++++++++---- .../entry-form-fields/_radio-buttons.scss | 1 - 6 files changed, 39 insertions(+), 20 deletions(-) diff --git a/test/css/entry-form.css b/test/css/entry-form.css index 7502ba0..1059f55 100644 --- a/test/css/entry-form.css +++ b/test/css/entry-form.css @@ -111,9 +111,8 @@ body .form-container form fieldset .form-group.checkbox-set .checkboxes label.ch border-color: #007b8a; } body .form-container form fieldset .form-group.checkbox-set .checkboxes input[type=checkbox]:checked + label.checkbox { - background-color: #009299; + background-color: #3b8084; color: #ffffff; - border-color: rgba(0, 170, 179, 0.8); } body .form-container form fieldset .form-group.dropdown-menu { flex: 1 1 calc(50% - 20px); @@ -146,9 +145,8 @@ body .form-container form fieldset .form-group.radio-input .radio-group label.ra border-color: #007b8a; } body .form-container form fieldset .form-group.radio-input .radio-group input[type=radio]:checked + label.radio { - background-color: #009299; + background-color: #3b8084; color: #ffffff; - border-color: rgba(0, 170, 179, 0.8); } body .form-container form fieldset .form-group input[type=range] { -webkit-appearance: none; @@ -156,7 +154,7 @@ body .form-container form fieldset .form-group input[type=range] { width: 100%; height: 45px; border-radius: 6px; - background: linear-gradient(to right, #009299 0%, #009299 var(--value), rgba(245, 245, 245, 0.9) 0%); + background: linear-gradient(to right, #3b8084 0%, #3b8084 var(--value), rgba(245, 245, 245, 0.9) 0%); border: 1px solid rgba(220, 220, 220, 0.8); cursor: pointer; padding: 0; @@ -200,7 +198,7 @@ body .form-container form fieldset .form-group input[type=range]:focus { border-color: #007b8a; } body .form-container form .collapsible-section-title { - display: block; + display: flex; width: 100%; color: #b1b1b1; font-weight: bold; @@ -208,15 +206,25 @@ body .form-container form .collapsible-section-title { cursor: pointer; margin-bottom: 10px; border-bottom: 2px solid rgba(220, 220, 220, 0.8); - padding: 10px 2px; + padding: 10px 7px 10px 5px; + transition: background-color 0.3s; } body .form-container form .collapsible-section-title:hover { color: #636363; background-color: #d4d4d4; } -body .form-container form #collapsible-section-title-1:checked + .collapsible-section { +body .form-container form .collapsible-section-title::after { + flex: 1 1 50%; + content: "x"; + text-align: end; + transition: display 0.3s; +} +body .form-container form #collapsible-section-title-1:checked ~ .collapsible-section { display: none; } +body .form-container form #collapsible-section-title-1:checked ~ .collapsible-section-title::after { + content: "+"; +} 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 91c7b7f..d8df096 100644 --- a/test/html/adduser.html +++ b/test/html/adduser.html @@ -7,7 +7,6 @@ Add New User -

Add New User

@@ -113,8 +112,8 @@
- +
@@ -138,13 +137,12 @@
- - + +
- diff --git a/test/scss/_colors.scss b/test/scss/_colors.scss index 9357b21..33ccf0c 100644 --- a/test/scss/_colors.scss +++ b/test/scss/_colors.scss @@ -59,7 +59,7 @@ $user-form-checkbox-button-hover-color: rgba(232, 232, 232, 0.9); $user-form-checkbox-button-hover-text-color: #007b8a; $user-form-checkbox-button-hover-border-color: #007b8a; // Checked -$user-form-checkbox-button-active-color: #009299; +$user-form-checkbox-button-active-color: #3b8084;; $user-form-checkbox-button-active-text-color: #ffffff; $user-form-checkbox-button-active-border-color: rgba(0, 170, 179, 0.8); diff --git a/test/scss/entry-form-fields/_checkboxes.scss b/test/scss/entry-form-fields/_checkboxes.scss index a707904..4fd35c1 100644 --- a/test/scss/entry-form-fields/_checkboxes.scss +++ b/test/scss/entry-form-fields/_checkboxes.scss @@ -44,7 +44,6 @@ 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/_collapsible-section.scss b/test/scss/entry-form-fields/_collapsible-section.scss index f133fc8..d5819e0 100644 --- a/test/scss/entry-form-fields/_collapsible-section.scss +++ b/test/scss/entry-form-fields/_collapsible-section.scss @@ -4,7 +4,7 @@ // Collapsible sections in the form, like "Advanced" @mixin collapsible { .collapsible-section-title { - display: block; + display: flex; width: 100%; color: $details-closed-summary-color; font-weight: bold; @@ -12,15 +12,30 @@ cursor: pointer; margin-bottom: 10px; border-bottom: 2px solid $details-summary-border-color; - padding: 10px 2px; + padding: 10px 7px 10px 5px; + transition: background-color 0.3s; &:hover { color: $details-summary-hover-color; background-color: #d4d4d4; } + + &::after { + flex: 1 1 50%; + content: "x"; + text-align: end; + transition: display 0.3s; + } } - #collapsible-section-title-1:checked + .collapsible-section { - display: none; + #collapsible-section-title-1:checked { + ~ .collapsible-section { + display: none; + } + ~ .collapsible-section-title { + &::after { + content: "+"; + } + } } } diff --git a/test/scss/entry-form-fields/_radio-buttons.scss b/test/scss/entry-form-fields/_radio-buttons.scss index 362d108..107eeaa 100644 --- a/test/scss/entry-form-fields/_radio-buttons.scss +++ b/test/scss/entry-form-fields/_radio-buttons.scss @@ -41,7 +41,6 @@ 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; } } }