Making WordPress.org


Ignore:
Timestamp:
08/24/2016 08:22:35 PM (5 years ago)
Author:
coffee2code
Message:

developer.wordpress.org: Implement a tabbed interface for writing and previewing user contributed notes.

Also wraps form header in 'h3' tag so it appears in table of contents.

Props keesiemeijer.
See #1905.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss

    r3788 r3852  
    325325        clear: both;
    326326        margin: 0 0 1.5em;
     327    }
     328
     329    /* =Tabs
     330    ----------------------------------------------- */
     331
     332    .tablist {
     333        margin: 0;
     334    }
     335    .tablist li {
     336        display: inline-block;
     337        list-style: none;
     338    }
     339    .tablist a {
     340        border-color: none;
     341        background-color: transparent;
     342        border-color: transparent;
     343        border-image: none;
     344        border-style: solid solid none;
     345        border-width: 1px 1px 0;   
     346        display: inline-block;
     347        padding: .5em 1em;
     348        margin-bottom:-1px;
     349    }
     350    .tablist a[aria-selected],
     351    .tablist a:focus {
     352        background-color: #fff;
     353        border-color: #ccc;
     354        border-radius: 3px 3px 0 0;
     355        color: #333; 
     356    }
     357    .tab-section {
     358        margin-top: 0;
     359        padding: 0;
     360        border: none;
     361    }
     362    .tab-section[aria-hidden="true"] {
     363        display: none;
     364    }
     365    .tab-section:focus {
     366        background: #eee;
     367        outline: thin dotted;
    327368    }
    328369
     
    11891230            overflow: auto;
    11901231            border: 1px solid #dfdfdf;
    1191             border-radius: 2px;
     1232            border-radius: 0 2px 2px 2px;
    11921233
    11931234            article {
     
    11961237        }
    11971238
    1198         #comment-preview {
     1239        #comment-preview,
     1240        .js & .comment-form-comment {
     1241            margin-top: 0;
     1242            border: 1px solid #ccc;
     1243            border-radius: 0 3px 3px 3px;
    11991244            clear:both;
     1245        }
     1246
     1247        #comment-preview.tab-section-selected {
     1248            border-radius: 3px;
    12001249        }
    12011250
     
    12041253        }
    12051254
    1206         #comment-preview .spinner {
     1255        label[for=comment],
     1256        .comment-form-comment,
     1257        .comment-preview {
     1258            margin-bottom: 1em;
     1259        }
     1260
     1261        .js & .comment-form-comment {
     1262            padding: 0 .7em .7em;
     1263        }
     1264
     1265        .tablist .spinner {
    12071266            background: url("/wp-includes/images/spinner-2x.gif") no-repeat scroll 0 50%;
    12081267            -webkit-background-size: 20px 20px;
Note: See TracChangeset for help on using the changeset viewer.