Context Navigation

← Previous Change
Next Change →

_fields.scss

Timestamp:

06/14/2016 06:58:07 AM (10 years ago)

Author:

obenland

Message:

Plugin Directory: Updated styles for upload form.

See #1573.

File:

: 1 edited

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/forms/_fields.scss (modified) (1 diff)

Legend:

: Unmodified
: Added
: Removed

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

-              r3257
+              r3345
 @import "../variables-site/variables-site";
+/* Include margin and padding in the width calculation of input and textarea. */
+input,
+textarea {
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        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"],
+input[type="search"],
+input[type="radio"],
+input[type="tel"],
+input[type="text"],
+input[type="time"],
+input[type="url"],
+input[type="week"],
+select,
+textarea {
+        -webkit-appearance: none;
+        border: 1px solid $color__border-input;
+        -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
+        box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
+        background-color: #fff;
+        color: $color__text-input;
+        -webkit-transition: 0.05s border-color ease-in-out;
+        transition: 0.05s border-color ease-in-out;
+        &:focus {
+                color: $color__text-input-focus;
+        }
+}
+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 {
+        border-color: #5b9dd9;
+        -webkit-box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
+        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="url"],
+input[type="search"],
 input[type="password"],
+input[type="search"],
+input[type="number"],
+input[type="tel"],
+input[type="range"],
+input[type="date"],
+input[type="month"],
+input[type="week"],
+input[type="time"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="color"],
+input[type="number"] {
+        padding: 6px 10px;
+}
+/* Vertically align the number selector with the input. */
+input[type="number"] {
+        height: 40px;
+        line-height: inherit;
+}
+input[type="checkbox"],
+input[type="radio"] {
+        border: 1px solid #b4b9be;
+        background: #fff;
+        color: #555;
+        clear: none;
+        cursor: pointer;
+        display: inline-block;
+        line-height: 0;
+        margin: -4px 4px 0 0;
+        padding: 0 !important;
+        text-align: center;
+        vertical-align: middle;
+        min-width: 16px;
+        -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.1 );
+        box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.1 );
+        -webkit-transition: .05s border-color ease-in-out;
+        transition: .05s border-color ease-in-out;
+        height: 25px;
+        width: 25px;
+}
+input[type="checkbox"] {
+        padding: 10px;
+}
+input[type="radio"] {
+        -webkit-border-radius: 50%;
+        border-radius: 50%;
+        margin-right: 4px;
+        line-height: 10px;
+}
+input[type="checkbox"]:checked:before,
+input[type="radio"]:checked:before {
+        float: left;
+        display: inline-block;
+        vertical-align: middle;
+        width: 16px;
+        font: normal 21px/1 dashicons;
+        speak: none;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+}
+input[type="checkbox"]:checked:before {
+        content: "\f147";
+        color: #1e8cbe;
+        font: normal 30px/1 dashicons;
+        margin: -3px -5px;
+}
+input[type="radio"]:checked:before {
+        content: "\2022";
+        text-indent: -9999px;
+        -webkit-border-radius: 50px;
+        border-radius: 50px;
+        font-size: 24px;
+        width: 9px;
+        height: 9px;
+        margin: 7px;
+        line-height: 16px;
+        background-color: #1e8cbe;
+        vertical-align: middle;
+}
+@-moz-document url-prefix() {
+        input[type="checkbox"],
+        input[type="radio"],
+        .form-table input.tog {
+                margin-bottom: -1px;
+        }
+}
+/* Search */
+input[type="search"] {
+        -webkit-appearance: textfield;
+}
+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 {
+        font-size: 16px;
+        padding: 3px 5px;
+        -webkit-border-radius: 0;
+        border-radius: 0; /* Reset mobile webkit's default element styling */
+}
 textarea {
+        color: $color__text-input;
+        border: 1px solid $color__border-input;
+        &:focus {
+                color: $color__text-input-focus;
+        }
+}
+select {
+        border: 1px solid $color__border-input;
+}
+input[type="text"],
+input[type="email"],
+input[type="url"],
+input[type="password"],
+input[type="search"],
+input[type="number"],
+input[type="tel"],
+input[type="range"],
+input[type="date"],
+input[type="month"],
+input[type="week"],
+input[type="time"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="color"] {
+        -webkit-appearance: none;
+        padding: 3px;
+}
+textarea {
+        padding-left: 3px;
+        width: 100%;
+}
+        overflow: auto;
+        padding: 2px 6px;
+        line-height: 1.4;
+        resize: vertical;
+}
+input[type="file"] {
+        padding: 3px 0;
+}
+label {
+        cursor: pointer;
+}
+input.readonly,
+input[readonly],
+textarea.readonly,
+textarea[readonly] {
+        background-color: #eee;
+}
+:-moz-placeholder {
+        color: #a9a9a9;
+}
+input:disabled,
+input.disabled,
+select:disabled,
+select.disabled,
+textarea:disabled,
+textarea.disabled {
+        background: rgba( 255, 255, 255, 0.5 );
+        border-color: rgba( 222, 222, 222, 0.75 );
+        -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 );
+        box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 );
+        color: rgba( 51, 51, 51, 0.5 );
+}
+input[type="file"]:disabled,
+input[type="file"].disabled,
+input[type="range"]:disabled,
+input[type="range"].disabled {
+        background: none;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+}
+input[type="checkbox"]:disabled,
+input[type="checkbox"].disabled,
+input[type="radio"]:disabled,
+input[type="radio"].disabled,
+input[type="checkbox"]:disabled:checked:before,
+input[type="checkbox"].disabled:checked:before,
+input[type="radio"]:disabled:checked:before,
+input[type="radio"].disabled:checked:before {
+        opacity: 0.7;
+}
+label,
+fieldset label {
+        vertical-align: middle;
+}
+/* =Media Queries
+-------------------------------------------------------------- */
+@media screen and ( min-width: 48em ) {
+        /* Input Elements */
+        input[type="text"],
+        input[type="email"],
+        input[type="search"],
+        input[type="password"],
+        input[type="number"] {
+                padding: 0;
+        }
+        input[type="number"] {
+                height: 28px;
+        }
+        input[type="checkbox"] {
+                padding: 0;
+        }
+        input[type="checkbox"]:checked:before {
+                font: normal 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;
+        }
+        textarea,
+        input,
+        select {
+                font-size: 14px;
+        }
+}

Note: See TracChangeset for help on using the changeset viewer.

Making WordPress.org

Context Navigation

Changeset 3345 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/forms/_fields.scss

Legend:

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

Download in other formats: