Changeset 44149 for trunk/src/wp-content/themes/twentynineteen/sass/site/primary/_comments.scss

Timestamp:

12/14/2018 02:32:33 AM (8 years ago)

Author:

pento

Message:

Default Themes: Import Twenty Nineteen from the 5.0 branch.

Merges [43808,43821,43842,43860,43892,43904,43909,43926-43929,43956,43961-43963] from the 5.0 branch to trunk.

Props allancole, karmatosed, kjellr, yingling017, mrasharirfan, milana_cap, fabiankaegy, westonruter, jorbin, netweb, b-07, khleomix, audrasjb, nielslange, mmaumio, richsalvucci, littlebigthing, dimadin, joyously, anevins, peterwilsoncc, dannycooper, iCaleb, siriokun, technosiren, travel_girl, azchughtai, ianbelanger, nadim1992, ismailelkorchi, nativeinside, chetan200891, grapplerulrich, ocean90, joshfeck, frankew, AbdulWahab610, mendezcode, eliorivero, melchoyce, joen, laurelfulford, mdawaffe, kraftbj, dsmart, nao, mayukojpn, enodekciw, ketuchetan, atanasangelovdev, poena, sharaz, artisticasad, mukesh27, burhandodhy, crunnells, aprakasa, themeroots, imonly_ik, tlxo, youthkee, brentswisher, smyoon315, mrahmadawais, desideveloper, Kau-Boy, mor10, mikeyarce, dingo_bastard, xkon, twoabove.

Fixes #45424.

Location:

trunk

Files:

• . (modified) (1 prop)
• src/wp-content/themes/twentynineteen (copied) (copied from branches/5.0/src/wp-content/themes/twentynineteen )
• src/wp-content/themes/twentynineteen/sass/site/primary/_comments.scss (modified) (18 diffs)

trunk/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
-         * post itself (this happens on pages). 
+         * post itself (this happens on pages).
          */
-        .hentry + & {
+        .entry + & {
                 margin-top: calc(3 * #{$size__spacing-unit});
         }
 
-        .comments-title-wrap,
-        .comment-list,
-        > .comment-respond,
-        .comment-form-flex,
-        .no-comments {
-
-                margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit;
+        .comments-title-wrap {
 
                 @include media(tablet) {
-                        margin: calc(3 * #{$size__spacing-unit}) calc(2 * (100vw / 12));
-                        max-width: calc(6 * (100vw / 12));
-                }
-        }
-
-        .comments-title-wrap {
-
-                align-items: baseline;
-                display: flex;
-                justify-content: space-between;
+                        align-items: baseline;
+                        display: flex;
+                        justify-content: space-between;
+                }
 
                 .comments-title {
                         @include post-section-dash;
                         margin: 0;
+
+                        @include media(tablet) {
+                                flex: 1 0 calc(3 * (100vw / 12));
+                        }
+                }
+
+                .discussion-meta {
+                        @include media(tablet) {
+                                flex: 0 0 calc(2 * (100vw / 12));
+                                margin-left: #{$size__spacing-unit};
+                        }
                 }
         }
@@ -49 +64 @@
 
 #respond {
-
         position: relative;
 
         .comment-user-avatar {
-                display: none;
+                margin: $size__spacing-unit 0 -#{$size__spacing-unit};
         }
 
@@ -75 +89 @@
                 display: none;
         }
-
-        > #respond {
-                @include media(desktop) {
-
-                        .comment-user-avatar {
-                                position: absolute;
-                                display: block;
-                                top: 0;
-                                left: 0;
-
-                                .avatar {
-                                        display: block;
-                                }
-                        }
-                }
-        }
 }
 
 .comment-form-flex {
-
         display: flex;
         flex-direction: column;
@@ -105 +102 @@
 
         #respond {
-
                 order: 2;
+
                 + .comments-title {
                         display: block;
@@ -114 +111 @@
 
 .comment-list {
-
         list-style: none;
         padding: 0;
@@ -127 +123 @@
         }
 
+        .pingback,
+        .trackback {
+
+                .comment-body {
+                        color: $color__text-light;
+                        font-family: $font__heading;
+                        font-size: $font__size-xs;
+                        font-weight: 500;
+                        margin-top: $size__spacing-unit;
+                        margin-bottom: $size__spacing-unit;
+
+                        a:not(.comment-edit-link) {
+                                font-weight: bold;
+                                font-size: $font__size-base / (1 * $font__size-ratio);
+                                line-height: 1.5;
+                                padding-right: #{0.5 * $size__spacing-unit};
+                                display: block;
+                        }
+
+                        .comment-edit-link {
+                                color: $color__text-light;
+                                font-family: $font__heading;
+                                font-weight: 500;
+                        }
+                }
+        }
 }
 
 .comment-reply {
-
-        left: calc(#{$size__spacing-unit} + 100%);
-        bottom: 0;
-        position: absolute;
 
         #respond + & {
@@ -145 +163 @@
 
 .comment {
-
         list-style: none;
         position: relative;
 
         @include media(tablet) {
-
                 padding-left: calc(.5 * (#{$size__spacing-unit} + calc(100vw / 12 )));
 
+                &.depth-1,
                 .children {
                         padding-left: 0;
                 }
-        }
-
-        &:hover > .comment-body > .comment-meta > .comment-metadata {
-                > .edit-link-sep,
-                > .edit-link {
-                        opacity: 1;
+
+                &.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 {
@@ -174 +189 @@
 
         .comment-author {
-
-                @include media(tablet) {
-                        display: inline-block;
-                        vertical-align: baseline;
-                }
 
                 .avatar {
@@ -198 +208 @@
                         display: block;
 
-                        @include media(tablet) {
-                                display: inline-block;
-                                vertical-align: baseline;
-                        }
-
                         a {
                                 color: inherit;
@@ -218 +223 @@
                         position: absolute;
                         background: lighten( $color__link, 8% );
-                        right: calc(100% + #{$size__spacing-unit * .25});
+                        right: calc(100% - #{$size__spacing-unit * 2.5});
                         top: -3px;
                         width: 18px;
+
+                        @include media(tablet) {
+                                right: calc(100% + #{$size__spacing-unit * .75});
+                        }
 
                         svg {
@@ -234 +243 @@
         .comment-metadata {
 
-                @include media(tablet) {
-                        display: inline-block;
-                        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;
@@ -253 +255 @@
 
                         &:hover {
-                                color: $color__text-hover;
+                                color: $color__link-hover;
                                 text-decoration: none;
                         }
@@ -265 +267 @@
                         color: $color__text-light;
                         margin: 0 0.2em;
-                        opacity: 0;
-                        transition: opacity 200ms ease-in-out;
                         vertical-align: baseline;
                 }
@@ -272 +272 @@
                 .edit-link {
                         color: $color__text-light;
-                        transition: opacity 200ms ease-in-out;
-                        opacity: 0;
 
                         svg {
@@ -283 +281 @@
 
                 .comment-edit-link {
-
                         position: relative;
                         padding-left: $size__spacing-unit;
@@ -299 +296 @@
                 margin: $size__spacing-unit 0;
 
+                @include media(desktop) {
+                        padding-right: $size__spacing-unit;
+                }
+
                 > *:first-child {
                         margin-top: 0;
@@ -305 +306 @@
                 > *:last-child {
                         margin-bottom: 0;
+                }
+
+                blockquote {
+                        margin-left: 0;
                 }
 
@@ -346 +351 @@
                         width: calc(1.5 * #{$size__spacing-unit});
                 }
-
-                @include media(tablet) {
-
-                }
         }
 }
 
 .discussion-meta {
-
-        .discussion-avatar-list {
-                display: inline-block;
-                margin-right: 8px;
-        }
 
         .discussion-meta-info {