Changeset 43892 for branches/5.0/src/wp-content/themes/twentynineteen/sass/site/primary/_comments.scss

Timestamp:

11/12/2018 11:19:13 PM (8 years ago)

Author:

allancole

Message:

Updating Twenty Nineteen, our new default theme for 2019, set for 5.0.

This update applies the following changes:

• Improve menu UI to support keyboard, click and touch interactions
• Improve variable scoping and js performance in menu interaction javascript
• Improve custom-colors for selected text, buttons and menu hover styles
• Improve margins structure for more consistency between editor and frontend
• Improve discussion avatars for simpler wording and better performance
• Improve fonts in list widgets and list blocks
• Improve comment responsive spacing and avatar display
• Improve various block styles to make them consistent between the editor and frontend
• Add tabbed browsing support for ie11
• Add backwards compatibility support for older versions of WordPress
• Add fallback styles for older versions of WP where Gutenberg is activated and then deactivated (backwards compatibility)
• Add sizes attribute for featured images to improve responsive performance
• Add focus-within polyfill
• Add a footer menu for secondary page links
• Fix editor styles to prevent conflicts with plugins that add meta boxes to the editor
• Fix columns block issues on small screens
• Fix empty-space font text cursor issue in Gutenberg editor
• Fix RTL floating styles so that left/right floats are honored
• Fix cover image block margins/padding
• Fix invalid rgba style
• Fix php warning when returning attributes
• Fix gallery widget margins to improve gallery grids
• Fix .entry-content selectors to prevent shortcodes, plugins and other unknown content from breaking the layout
• Remove translation escaping to follow code standards in previous default themes
• Remove custom color output in the fronten header when default color is selected
• Remove fly-out sub-sub-sub-menu behavior on desktop to prevent sub-menus from falling off the screen
• General code clean up and coding standards improvements

Initial development occurred on GitHub. See: ​https://github.com/WordPress/twentynineteen

Props allancole, karmatosed, kjellr, yingling017, mrasharirfan, milana_cap, fabiankaegy, westonruter, aaronjorbin, netweb, b-07, khleomix, blowery, dereksmart, jasmussen, audrasjb, nielslange, mmaumio, dimadin, joyously, anevins12, peterwilsoncc, dannycooper, icaleb, siriokun, technosiren, travel_girl, azchughtai, ianbelanger, nadim1992, ismailelkorchi, nativeinside, chetan200891, icaleb, grapplerulrich, ocean90, joshfeck, frankew, abdulwahab610, mendezcode, eliorivero, melchoyce, joen, laurelfulford, mdawaffe, kraftbj, dsmart, mukeshpanchal27, burhandodhy, crunnells, Ismail-elkorchi, aryaprakasa, @tlxo, @themeroots, @whizbangik, @yingles, @youthkee, @brentswisher, @smy315, @ahmadawais, @desi-developer.

File:

• branches/5.0/src/wp-content/themes/twentynineteen/sass/site/primary/_comments.scss (modified) (12 diffs)

branches/5.0/src/wp-content/themes/twentynineteen/sass/site/primary/_comments.scss

@@ -8 +8 @@
 
 .comments-area {
+        margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit;
+        @include postContentMaxWidth();
+
+        @include media(tablet) {
+                margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
+        }
+
+        & > * {
+                margin-top: calc(2 * #{$size__spacing-unit});
+                margin-bottom: calc(2 * #{$size__spacing-unit});
+
+                @include media(tablet) {
+                        margin-top: calc(3 * #{$size__spacing-unit});
+                        margin-bottom: calc(3 * #{$size__spacing-unit});
+                }
+        }
 
         /* Add extra margin when the comments section is located immediately after the
@@ -16 +32 @@
         }
 
-        .comment-list,
-        .comment-navigation,
-        > .comment-respond,
-        .comment-form-flex,
-        .no-comments {
-                margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit;
-
-                @include media(tablet) {
-                        margin: calc(3 * #{$size__spacing-unit}) calc(2 * (100vw / 12));
-                        max-width: calc(6 * (100vw / 12));
-                }
-        }
-
         .comments-title-wrap {
-
-                margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit;
 
                 @include media(tablet) {
@@ -37 +38 @@
                         display: flex;
                         justify-content: space-between;
-                        margin: calc(3 * #{$size__spacing-unit}) calc(2 * (100vw / 12));
-                        max-width: calc(8 * (100vw / 12));
                 }
 
@@ -124 +123 @@
         }
 
-        .pingback {
+        .pingback,
+        .trackback {
 
                 .comment-body {
@@ -131 +131 @@
                         font-size: $font__size-xs;
                         font-weight: 500;
+                        margin-top: $size__spacing-unit;
                         margin-bottom: $size__spacing-unit;
 
@@ -151 +152 @@
 
 .comment-reply {
-        left: calc(#{$size__spacing-unit} + 100%);
-        bottom: 0;
-        position: absolute;
 
         #respond + & {
@@ -171 +169 @@
                 padding-left: calc(.5 * (#{$size__spacing-unit} + calc(100vw / 12 )));
 
+                &.depth-1,
                 .children {
                         padding-left: 0;
                 }
+
+                &.depth-1 {
+                        margin-left: calc(3.25 * #{$size__spacing-unit});
+                }
         }
 
         .comment-body {
-                margin: calc(2 * #{$size__spacing-unit}) 0;
-        }
+                margin: calc(2 * #{$size__spacing-unit}) 0 0;
+        }
+
 
         .comment-meta {
                 position: relative;
-
-                @include media(tablet) {
-                        display: flex;
-                }
         }
 
         .comment-author {
-
-                @include media(tablet) {
-                        flex: 0 0 auto;
-                        vertical-align: baseline;
-                }
 
                 .avatar {
@@ -212 +207 @@
                         position: relative;
                         display: block;
-
-                        @include media(tablet) {
-                                display: inline-block;
-                                vertical-align: baseline;
-                        }
 
                         a {
@@ -253 +243 @@
         .comment-metadata {
 
-                @include media(tablet) {
-                        flex: 1 0 auto;
-                        margin-left: $size__spacing-unit;
-                        position: relative;
-                        vertical-align: baseline;
-                }
-
                 > a,
                 .comment-edit-link {
-                        display: inline-block;
+                        display: inline;
                         font-weight: 500;
                         color: $color__text-light;
@@ -272 +255 @@
 
                         &:hover {
-                                color: $color__text-hover;
+                                color: $color__link-hover;
                                 text-decoration: none;
                         }
@@ -313 +296 @@
                 margin: $size__spacing-unit 0;
 
+                @include media(desktop) {
+                        padding-right: $size__spacing-unit;
+                }
+
                 > *:first-child {
                         margin-top: 0;
@@ -319 +306 @@
                 > *:last-child {
                         margin-bottom: 0;
+                }
+
+                blockquote {
+                        margin-left: 0;
                 }