Skip to content

Address Styling Issues on Entry (Edit/New) and Style Pages #1986

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Crabcyborg merged 21 commits into from
Jan 24, 2025
+24 −30
Merged

Address Styling Issues on Entry (Edit/New) and Style Pages #1986

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
67f6254
Fix style issues on Entry (Edit/New) and Style pages
shervElmi Sep 16, 2024
ac120bc
Merge remote-tracking branch 'origin/master' into fix_style-issues-en…
shervElmi Sep 24, 2024
af45f80
Update "frm-fields-item" class to "frm-button-entry-nav"
shervElmi Sep 24, 2024
7e5bd44
Revert the addition of the ".frm_forms" class to ".with_frm_style".
shervElmi Sep 24, 2024
e1ebac2
Update field focus selectors to target wp-admin
shervElmi Sep 24, 2024
f8d0609
Revert to master
shervElmi Sep 25, 2024
504e6af
Merge remote-tracking branch 'origin/HEAD' into fix_style-issues-entr…
shervElmi Nov 25, 2024
fa5192d
Optimze frontend CSS
shervElmi Nov 25, 2024
4965108
Make the button style more specific on the single entry page
shervElmi Nov 25, 2024
a9a9eef
Remove "frm-button-entry-nav" selector
shervElmi Nov 25, 2024
805a7fa
Refactor template file
shervElmi Nov 26, 2024
674c05e
Fix styles
shervElmi Nov 26, 2024
3a26bca
Revert show template
shervElmi Nov 27, 2024
9ea50f5
Add a comment for clarification
shervElmi Nov 27, 2024
5080b2c
Merge branch 'master' into fix_style-issues-entry-style-pages
Crabcyborg Nov 27, 2024
aa3bb86
Merge branch 'master' into fix_style-issues-entry-style-pages
Crabcyborg Nov 29, 2024
89aa37c
Merge remote-tracking branch 'origin/master' into fix_style-issues-en…
shervElmi Jan 6, 2025
6c4b9bf
Merge branch 'master' into fix_style-issues-entry-style-pages
Crabcyborg Jan 10, 2025
cd5bc36
Fix checkbox checked styles
shervElmi Jan 13, 2025
eaf7d52
Merge branch 'master' into fix_style-issues-entry-style-pages
shervElmi Jan 17, 2025
d5219d8
Merge branch 'master' into fix_style-issues-entry-style-pages
Crabcyborg Jan 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions css/custom_theme.css.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -871,8 +871,8 @@
border-radius:50%;
}

.with_frm_style .frm_checkbox input[type=checkbox]{
border-radius: calc(var(--border-radius) / 2);
.with_frm_style .frm_checkbox input[type=checkbox] {
border-radius: calc(var(--border-radius) / 2) !important;
Comment thread
shervElmi marked this conversation as resolved.
}

.with_frm_style .frm_radio input[type=radio],
Expand Down
50 changes: 22 additions & 28 deletions css/frm_admin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1431,7 +1431,7 @@ body.frm-hidden-overflow {
.post-type-frm_display.wp-core-ui .button-primary,
.frm-button-primary,
.wp-core-ui .button-primary.frm-button-primary,
.frm_single_entry_page .button-primary {
.frm_single_entry_page #frm-publishing .button-primary {
background-color: var(--primary-500) !important;
color: #fff !important;
}
Expand Down Expand Up @@ -3881,21 +3881,18 @@ input[type="checkbox"] {
}

.frm-white-body input[type="checkbox"]:checked,
.frm_wrap input[type="checkbox"]:checked,
body[class*="frm-admin"] #wpbody-content input[type="checkbox"]:checked {
background-color: var(--primary-500);
border-color: var(--primary-500) !important;
.frm_wrap input[type="checkbox"]:checked {
Comment thread
shervElmi marked this conversation as resolved.
background-color: var(--border-color-active, var(--primary-500)) !important;
border-color: var(--border-color-active, var(--primary-500)) !important;
}

.frm-white-body input[type="checkbox"]:checked:focus,
.frm_wrap input[type="checkbox"]:checked:focus,
body[class*="frm-admin"] #wpbody-content input[type="checkbox"]:checked:focus {
border-color: var(--primary-500);
.frm_wrap input[type="checkbox"]:checked:focus {
border-color: var(--border-color-active, var(--primary-500));
}

.frm-white-body input[type="checkbox"]:checked::before,
.frm_wrap input[type="checkbox"]:checked::before,
body[class*="frm-admin"] #wpbody-content input[type="checkbox"]:checked::before {
.frm_wrap input[type="checkbox"]:checked::before {
content: '';
display: block;
width: 100% !important;
Expand All @@ -3912,19 +3909,6 @@ body[class*="frm-admin"] #wpbody-content input[type="checkbox"]:checked::before
margin-right: 5px;
}

.frm_single_entry_page .with_frm_style .frm_radio input[type=radio] {
margin: 5px 0;
width: 18px;
position: relative; /* override Bootstrap */
}

.frm_single_entry_page .with_frm_style .frm_radio input[type=radio]:before {
position: relative !important;
left: calc(50% - 6px);
top: calc(50% - 6px);
margin: 0 !important;
}

.frm_inner_field_container {
margin-bottom: 10px;
}
Expand Down Expand Up @@ -4562,7 +4546,7 @@ li.frm_field_box > ul.frm_grid_container {

/* Image options for Radio and Checkbox */

.frm_image_options .frm_image_option_container {
body:not(.frm-admin-page-styles):not(.frm-admin-page-entries) .frm_image_options .frm_image_option_container {
--field-border-width: 1px;
--border-color: var(--grey-300);
--border-color-active: var(--primary-500);
Expand Down Expand Up @@ -8265,9 +8249,9 @@ button.frm_choose_image_box,
line-height: var(--leading);
}

.frm-white-body textarea:focus,
.frm-white-body input:focus,
.frm-white-body select:focus,
.frm-white-body:not(.frm-admin-page-styles):not(.frm-admin-page-entries) textarea:focus,
.frm-white-body:not(.frm-admin-page-styles):not(.frm-admin-page-entries) input:focus,
.frm-white-body:not(.frm-admin-page-styles):not(.frm-admin-page-entries) select:focus,
.frm_wrap input:focus,
.frm_wrap select:focus,
.wp-core-ui .frm_wrap select:focus,
Expand All @@ -8278,6 +8262,17 @@ button.frm_choose_image_box,
box-shadow: none !important;
}

/*
Pages like Entries and Styles need the border-color and box-shadow properties without the !important flag.
To achieve this, we exclude them above and duplicate these rules specifically for those pages without using !important.
*/
.wp-admin .frm_fields_container textarea:focus,
Comment thread
shervElmi marked this conversation as resolved.
.wp-admin .frm_fields_container input:focus,
.wp-admin .frm_fields_container select:focus {
border-color: var(--primary-500);
box-shadow: none;
}

#postbox-container-2 textarea,
.frm_wrap textarea,
.field-group textarea {
Expand Down Expand Up @@ -8923,7 +8918,6 @@ Responsive Design
.frm_wrap input[type="checkbox"]:checked::before {
width: 1.2rem;
height: 1.2rem;
margin: 0.125rem;
}
}

Expand Down