Changeset 13476 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-support-2024/sass/forms/_fields.scss

Timestamp:

04/09/2024 06:31:42 AM (21 months ago)

Author:

adamwood

Message:

wporg-support-2024: Style forms

Update styles for bbPress forms and block editor

Fixes ​https://github.com/WordPress/wordpress.org/issues/213
Closes ​https://github.com/WordPress/wordpress.org/issues/230
Closes ​https://github.com/WordPress/wordpress.org/issues/219

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-support-2024/sass/forms/_fields.scss (modified) (4 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-support-2024/sass/forms/_fields.scss

@@ -11 +11 @@
 input[type="radio"],
 input[type="checkbox"] {
-    background-color: #fff;
-    border: 1px solid var(--wp--preset--color--light-grey-1);
+    border: 1px solid var(--wp--custom--form--border--color);
     box-shadow: var(--wp--custom--form--color--box-shadow);
-    color: var(--wp--custom--form--color--text);
-    transition: 0.05s border-color ease-in-out;
-    -webkit-appearance: none;
+    border-radius: var(--wp--custom--form--border--radius);
+    clear: none;
+    cursor: pointer;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    line-height: 0;
+    padding: 0 !important;
+    text-align: center;
+    vertical-align: middle;
+    margin: 0;
 
     &:focus {
+        box-shadow: none;
         color: var(--wp--custom--form--color--text);
     }
-}
 
-input[type="checkbox"]:focus,
-input[type="radio"]:focus {
-    border-color: #5b9dd9;
-    box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
-}
-
-input[type="checkbox"],
-input[type="radio"] {
-    background: #fff;
-    border: 1px solid #b4b9be;
-    box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.1 );
-    clear: none;
-    color: #555;
-    cursor: pointer;
-    display: inline-block;
-    height: 25px;
-    line-height: 0;
-    margin: -4px 4px 0 0;
-    min-width: 16px;
-    padding: 0 !important;
-    text-align: center;
-    transition: 0.05s border-color ease-in-out;
-    vertical-align: middle;
-    width: 25px;
-}
-
-input[type="checkbox"] {
-    padding: 10px;
+    &:focus-visible {
+        outline: -webkit-focus-ring-color auto 1px;
+    }
 }
 
 input[type="radio"] {
     border-radius: 50%;
-    line-height: 10px;
-    margin-right: 4px;
-}
 
-input[type="checkbox"]:checked::before,
-input[type="radio"]:checked::before {
-    display: inline-block;
-    float: left;
-    font: 400 21px/1 dashicons;
-    vertical-align: middle;
-    width: 16px;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-    speak: none;
-}
-
-input[type="checkbox"]:checked::before {
-    color: var(--wp--preset--color--blueberry-1);
-    content: "\f147";
-    font: 400 30px/1 dashicons;
-    margin: -3px -5px;
-}
-
-input[type="radio"]:checked::before {
-    background-color: var(--wp--preset--color--blueberry-1);
-    border-radius: 50px;
-    content: "\2022";
-    font-size: 24px;
-    height: 9px;
-    line-height: 16px;
-    margin: 7px;
-    text-indent: -9999px;
-    vertical-align: middle;
-    width: 9px;
+    & + label {
+        margin-left: 0.5em;
+    }
 }
 
@@ -106 +58 @@
     box-shadow: var(--wp--custom--form--color--box-shadow);
     font-family: inherit;
-    height: 40px;
-
-    &:focus {
-        border-color: var(--custom--form--color--border);
-    }
+    min-height: 40px;
 }
 
@@ -143 +91 @@
 textarea:disabled,
 textarea.disabled {
-    background: rgba( 255, 255, 255, 0.5 );
-    border-color: rgba( 222, 222, 222, 0.75 );
-    box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 );
-    color: rgba( 51, 51, 51, 0.5 );
+    background: var(--wp--custom--form--color--background);
+    border-color: var(--wp--custom--form--disabled--border-color);
+    box-shadow: none;
+    color: var(--wp--custom--form--disabled--color);
 }
 
@@ -172 +120 @@
     vertical-align: middle;
 }
-
-
-/* =Media Queries
--------------------------------------------------------------- */
-
-@media screen and ( min-width: 48em ) {
-
-    input[type="checkbox"] {
-        padding: 0;
-    }
-
-    input[type="checkbox"]:checked::before {
-        font: 400 21px/1 dashicons;
-        margin: -3px 0 0 -4px;
-    }
-
-    input[type="radio"],
-    input[type="checkbox"] {
-        height: 16px;
-        width: 16px;
-    }
-
-    input[type="radio"]:checked::before {
-        width: 6px;
-        height: 6px;
-        margin: 4px;
-    }
-}