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

Timestamp:

04/08/2024 03:40:30 AM (22 months ago)

Author:

adamwood

Message:

wporg-support-2024: Restyle buttons

Style buttons and associated inputs and textarea to match wporg-parent-2021 styles

Closes ​https://github.com/WordPress/wordpress.org/issues/229

File:

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

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

@@ -3 +3 @@
 /* Include margin and padding in the width calculation of input and textarea. */
 input,
-textarea {
+textarea,
+select {
     box-sizing: border-box;
-}
-
-input[type="text"],
-input[type="password"],
-input[type="checkbox"],
-input[type="color"],
-input[type="date"],
-input[type="datetime"],
-input[type="datetime-local"],
-input[type="email"],
-input[type="month"],
-input[type="number"],
-input[type="password"],
+    line-height: var(--wp--custom--form--line-height);
+}
+
 input[type="radio"],
-input[type="tel"],
-input[type="text"],
-input[type="time"],
-input[type="url"],
-input[type="week"],
-select,
-textarea {
+input[type="checkbox"] {
     background-color: #fff;
     border: 1px solid var(--wp--preset--color--light-grey-1);
@@ -38 +23 @@
 }
 
-input[type="text"]:focus,
-input[type="password"]:focus,
-input[type="color"]:focus,
-input[type="date"]:focus,
-input[type="datetime"]:focus,
-input[type="datetime-local"]:focus,
-input[type="email"]:focus,
-input[type="month"]:focus,
-input[type="number"]:focus,
-input[type="password"]:focus,
-input[type="search"]:focus,
-input[type="tel"]:focus,
-input[type="text"]:focus,
-input[type="time"]:focus,
-input[type="url"]:focus,
-input[type="week"]:focus,
 input[type="checkbox"]:focus,
-input[type="radio"]:focus,
-select:focus,
-textarea:focus {
+input[type="radio"]:focus {
     border-color: #5b9dd9;
     box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
-}
-
-/* rtl:ignore */
-input[type="email"],
-input[type="url"] {
-    direction: ltr;
-}
-
-input[type="text"],
-input[type="email"],
-input[type="password"],
-input[type="number"] {
-    padding: 6px 10px;
-}
-
-/* Vertically align the number selector with the input. */
-input[type="number"] {
-    height: 40px;
-    line-height: inherit;
 }
 
@@ -152 +100 @@
 }
 
+select {
+    background: var(--wp--custom--form--color--background);
+    border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
+    border-radius: var(--wp--custom--form--border--radius);
+    box-shadow: var(--wp--custom--form--color--box-shadow);
+    font-family: inherit;
+    height: 40px;
+
+    &:focus {
+        border-color: var(--custom--form--color--border);
+    }
+}
+
 /* Search */
 input[type="search"]::-webkit-search-decoration {
     display: none;
-}
-
-.ie8 input[type="password"] {
-    font-family: sans-serif;
-}
-
-textarea,
-input,
-select,
-button {
-    font-family: inherit;
-    font-size: inherit;
-    font-weight: inherit;
-}
-
-textarea,
-input,
-select {
-    border-radius: 0;
-    font-size: 16px;
-    padding: 3px 5px; /* Reset mobile webkit's default element styling */
-}
-
-textarea {
-    line-height: 1.4;
-    overflow: auto;
-    padding: 2px 6px;
-    resize: vertical;
-
-    .comment-form-comment & {
-        width: 100%;
-    }
 }
 
@@ -250 +179 @@
 @media screen and ( min-width: 48em ) {
 
-    /* Input Elements */
-    input[type="text"],
-    input[type="email"],
-    input[type="password"],
-    input[type="number"] {
-        padding: 0;
-    }
-
-    input[type="number"] {
-        height: 28px;
-    }
-
     input[type="checkbox"] {
         padding: 0;
@@ -282 +199 @@
         margin: 4px;
     }
-
-    textarea,
-    input,
-    select {
-        font-size: 14px;
-    }
-}
+}