WordPress.org
Get WordPress

Making WordPress.org


Ignore:
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

Legend:

Unmodified
Added
Removed

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

    r3257 r3345  
    11@import "../variables-site/variables-site";
     2
     3/* Include margin and padding in the width calculation of input and textarea. */
     4input,
     5textarea {
     6        -webkit-box-sizing: border-box;
     7        -moz-box-sizing: border-box;
     8        box-sizing: border-box;
     9}
     10
     11input[type="text"],
     12input[type="password"],
     13input[type="checkbox"],
     14input[type="color"],
     15input[type="date"],
     16input[type="datetime"],
     17input[type="datetime-local"],
     18input[type="email"],
     19input[type="month"],
     20input[type="number"],
     21input[type="password"],
     22input[type="search"],
     23input[type="radio"],
     24input[type="tel"],
     25input[type="text"],
     26input[type="time"],
     27input[type="url"],
     28input[type="week"],
     29select,
     30textarea {
     31        -webkit-appearance: none;
     32        border: 1px solid $color__border-input;
     33        -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
     34        box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
     35        background-color: #fff;
     36        color: $color__text-input;
     37        -webkit-transition: 0.05s border-color ease-in-out;
     38        transition: 0.05s border-color ease-in-out;
     39
     40        &:focus {
     41                color: $color__text-input-focus;
     42        }
     43}
     44
     45input[type="text"]:focus,
     46input[type="password"]:focus,
     47input[type="color"]:focus,
     48input[type="date"]:focus,
     49input[type="datetime"]:focus,
     50input[type="datetime-local"]:focus,
     51input[type="email"]:focus,
     52input[type="month"]:focus,
     53input[type="number"]:focus,
     54input[type="password"]:focus,
     55input[type="search"]:focus,
     56input[type="tel"]:focus,
     57input[type="text"]:focus,
     58input[type="time"]:focus,
     59input[type="url"]:focus,
     60input[type="week"]:focus,
     61input[type="checkbox"]:focus,
     62input[type="radio"]:focus,
     63select:focus,
     64textarea:focus {
     65        border-color: #5b9dd9;
     66        -webkit-box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
     67        box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
     68}
     69
     70/* rtl:ignore */
     71input[type="email"],
     72input[type="url"] {
     73        direction: ltr;
     74}
    275
    376input[type="text"],
    477input[type="email"],
    5 input[type="url"],
     78input[type="search"],
    679input[type="password"],
    7 input[type="search"],
    8 input[type="number"],
    9 input[type="tel"],
    10 input[type="range"],
    11 input[type="date"],
    12 input[type="month"],
    13 input[type="week"],
    14 input[type="time"],
    15 input[type="datetime"],
    16 input[type="datetime-local"],
    17 input[type="color"],
     80input[type="number"] {
     81        padding: 6px 10px;
     82}
     83
     84/* Vertically align the number selector with the input. */
     85input[type="number"] {
     86        height: 40px;
     87        line-height: inherit;
     88}
     89
     90input[type="checkbox"],
     91input[type="radio"] {
     92        border: 1px solid #b4b9be;
     93        background: #fff;
     94        color: #555;
     95        clear: none;
     96        cursor: pointer;
     97        display: inline-block;
     98        line-height: 0;
     99        margin: -4px 4px 0 0;
     100        padding: 0 !important;
     101        text-align: center;
     102        vertical-align: middle;
     103        min-width: 16px;
     104        -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.1 );
     105        box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.1 );
     106        -webkit-transition: .05s border-color ease-in-out;
     107        transition: .05s border-color ease-in-out;
     108        height: 25px;
     109        width: 25px;
     110}
     111
     112input[type="checkbox"] {
     113        padding: 10px;
     114}
     115
     116input[type="radio"] {
     117        -webkit-border-radius: 50%;
     118        border-radius: 50%;
     119        margin-right: 4px;
     120        line-height: 10px;
     121}
     122
     123input[type="checkbox"]:checked:before,
     124input[type="radio"]:checked:before {
     125        float: left;
     126        display: inline-block;
     127        vertical-align: middle;
     128        width: 16px;
     129        font: normal 21px/1 dashicons;
     130        speak: none;
     131        -webkit-font-smoothing: antialiased;
     132        -moz-osx-font-smoothing: grayscale;
     133}
     134
     135input[type="checkbox"]:checked:before {
     136        content: "\f147";
     137        color: #1e8cbe;
     138        font: normal 30px/1 dashicons;
     139        margin: -3px -5px;
     140}
     141
     142input[type="radio"]:checked:before {
     143        content: "\2022";
     144        text-indent: -9999px;
     145        -webkit-border-radius: 50px;
     146        border-radius: 50px;
     147        font-size: 24px;
     148        width: 9px;
     149        height: 9px;
     150        margin: 7px;
     151        line-height: 16px;
     152        background-color: #1e8cbe;
     153        vertical-align: middle;
     154}
     155
     156@-moz-document url-prefix() {
     157        input[type="checkbox"],
     158        input[type="radio"],
     159        .form-table input.tog {
     160                margin-bottom: -1px;
     161        }
     162}
     163
     164/* Search */
     165input[type="search"] {
     166        -webkit-appearance: textfield;
     167}
     168
     169input[type="search"]::-webkit-search-decoration {
     170        display: none;
     171}
     172
     173.ie8 input[type="password"] {
     174        font-family: sans-serif;
     175}
     176
     177textarea,
     178input,
     179select,
     180button {
     181        font-family: inherit;
     182        font-size: inherit;
     183        font-weight: inherit;
     184}
     185
     186textarea,
     187input,
     188select {
     189        font-size: 16px;
     190        padding: 3px 5px;
     191        -webkit-border-radius: 0;
     192        border-radius: 0; /* Reset mobile webkit's default element styling */
     193}
     194
    18195textarea {
    19         color: $color__text-input;
    20         border: 1px solid $color__border-input;
    21 
    22         &:focus {
    23                 color: $color__text-input-focus;
    24         }
    25 }
    26 
    27 select {
    28         border: 1px solid $color__border-input;
    29 }
    30 
    31 input[type="text"],
    32 input[type="email"],
    33 input[type="url"],
    34 input[type="password"],
    35 input[type="search"],
    36 input[type="number"],
    37 input[type="tel"],
    38 input[type="range"],
    39 input[type="date"],
    40 input[type="month"],
    41 input[type="week"],
    42 input[type="time"],
    43 input[type="datetime"],
    44 input[type="datetime-local"],
    45 input[type="color"] {
    46         -webkit-appearance: none;
    47         padding: 3px;
    48 }
    49 
    50 textarea {
    51         padding-left: 3px;
    52         width: 100%;
    53 }
     196        overflow: auto;
     197        padding: 2px 6px;
     198        line-height: 1.4;
     199        resize: vertical;
     200}
     201
     202input[type="file"] {
     203        padding: 3px 0;
     204}
     205
     206label {
     207        cursor: pointer;
     208}
     209
     210input.readonly,
     211input[readonly],
     212textarea.readonly,
     213textarea[readonly] {
     214        background-color: #eee;
     215}
     216
     217:-moz-placeholder {
     218        color: #a9a9a9;
     219}
     220
     221input:disabled,
     222input.disabled,
     223select:disabled,
     224select.disabled,
     225textarea:disabled,
     226textarea.disabled {
     227        background: rgba( 255, 255, 255, 0.5 );
     228        border-color: rgba( 222, 222, 222, 0.75 );
     229        -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 );
     230        box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 );
     231        color: rgba( 51, 51, 51, 0.5 );
     232}
     233
     234input[type="file"]:disabled,
     235input[type="file"].disabled,
     236input[type="range"]:disabled,
     237input[type="range"].disabled {
     238        background: none;
     239        -webkit-box-shadow: none;
     240        box-shadow: none;
     241}
     242
     243input[type="checkbox"]:disabled,
     244input[type="checkbox"].disabled,
     245input[type="radio"]:disabled,
     246input[type="radio"].disabled,
     247input[type="checkbox"]:disabled:checked:before,
     248input[type="checkbox"].disabled:checked:before,
     249input[type="radio"]:disabled:checked:before,
     250input[type="radio"].disabled:checked:before {
     251        opacity: 0.7;
     252}
     253
     254label,
     255fieldset label {
     256        vertical-align: middle;
     257}
     258
     259
     260/* =Media Queries
     261-------------------------------------------------------------- */
     262
     263@media screen and ( min-width: 48em ) {
     264        /* Input Elements */
     265        input[type="text"],
     266        input[type="email"],
     267        input[type="search"],
     268        input[type="password"],
     269        input[type="number"] {
     270                padding: 0;
     271        }
     272
     273        input[type="number"] {
     274                height: 28px;
     275        }
     276
     277        input[type="checkbox"] {
     278                padding: 0;
     279        }
     280
     281        input[type="checkbox"]:checked:before {
     282                font: normal 21px/1 dashicons;
     283                margin: -3px 0 0 -4px;
     284        }
     285
     286        input[type="radio"],
     287        input[type="checkbox"] {
     288                height: 16px;
     289                width: 16px;
     290        }
     291
     292        input[type="radio"]:checked:before {
     293                width: 6px;
     294                height: 6px;
     295                margin: 4px;
     296        }
     297
     298        textarea,
     299        input,
     300        select {
     301                font-size: 14px;
     302        }
     303}
Note: See TracChangeset for help on using the changeset viewer.