Changeset 3852 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss

Timestamp:

08/24/2016 08:22:35 PM (7 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:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss (modified) (4 diffs)

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

@@ -325 +325 @@
         clear: both;
         margin: 0 0 1.5em;
+    }
+
+    /* =Tabs
+    ----------------------------------------------- */
+
+    .tablist {
+        margin: 0;
+    }
+    .tablist li {
+        display: inline-block;
+        list-style: none;
+    }
+    .tablist a {
+        border-color: none;
+        background-color: transparent;
+        border-color: transparent;
+        border-image: none;
+        border-style: solid solid none;
+        border-width: 1px 1px 0;   
+        display: inline-block;
+        padding: .5em 1em;
+        margin-bottom:-1px;
+    }
+    .tablist a[aria-selected],
+    .tablist a:focus {
+        background-color: #fff;
+        border-color: #ccc;
+        border-radius: 3px 3px 0 0;
+        color: #333;  
+    }
+    .tab-section {
+        margin-top: 0;
+        padding: 0;
+        border: none;
+    }
+    .tab-section[aria-hidden="true"] {
+        display: none;
+    }
+    .tab-section:focus {
+        background: #eee;
+        outline: thin dotted;
     }
 
@@ -1189 +1230 @@
             overflow: auto;
             border: 1px solid #dfdfdf;
-            border-radius: 2px;
+            border-radius: 0 2px 2px 2px;
 
             article {
@@ -1196 +1237 @@
         }
 
-        #comment-preview {
+        #comment-preview,
+        .js & .comment-form-comment {
+            margin-top: 0;
+            border: 1px solid #ccc;
+            border-radius: 0 3px 3px 3px;
             clear:both;
+        }
+
+        #comment-preview.tab-section-selected {
+            border-radius: 3px;
         }
 
@@ -1204 +1253 @@
         }
 
-        #comment-preview .spinner {
+        label[for=comment],
+        .comment-form-comment,
+        .comment-preview {
+            margin-bottom: 1em;
+        }
+
+        .js & .comment-form-comment {
+            padding: 0 .7em .7em;
+        }
+
+        .tablist .spinner {
             background: url("/wp-includes/images/spinner-2x.gif") no-repeat scroll 0 50%;
             -webkit-background-size: 20px 20px;