← Back to branch summary

~canonical-sysadmins/wordpress/5.0.1

« back to all changes in this revision

Viewing changes to wp-content/themes/twentynineteen/sass/site/primary/_comments.scss

  • Committer: Barry Price
  • Date: 2018-12-12 05:08:33 UTC
  • mfrom: (1.2.8 upstream)
  • Revision ID: barry.price@canonical.com-20181212050833-y090hmrbmlxy37aa
Merge WP5.0 from upstream

Show diffs side-by-side

added added

removed removed

Lines of Context:
wp-content/themes/twentynineteen/sass/site/primary/_comments.scss
 
1
.comment-content a {
 
2
        word-wrap: break-word;
 
3
}
 
4
 
 
5
.bypostauthor {
 
6
        display: block;
 
7
}
 
8
 
 
9
.comments-area {
 
10
        margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit;
 
11
        @include postContentMaxWidth();
 
12
 
 
13
        @include media(tablet) {
 
14
                margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
 
15
        }
 
16
 
 
17
        & > * {
 
18
                margin-top: calc(2 * #{$size__spacing-unit});
 
19
                margin-bottom: calc(2 * #{$size__spacing-unit});
 
20
 
 
21
                @include media(tablet) {
 
22
                        margin-top: calc(3 * #{$size__spacing-unit});
 
23
                        margin-bottom: calc(3 * #{$size__spacing-unit});
 
24
                }
 
25
        }
 
26
 
 
27
        /* Add extra margin when the comments section is located immediately after the
 
28
         * post itself (this happens on pages).
 
29
         */
 
30
        .entry + & {
 
31
                margin-top: calc(3 * #{$size__spacing-unit});
 
32
        }
 
33
 
 
34
        .comments-title-wrap {
 
35
 
 
36
                @include media(tablet) {
 
37
                        align-items: baseline;
 
38
                        display: flex;
 
39
                        justify-content: space-between;
 
40
                }
 
41
 
 
42
                .comments-title {
 
43
                        @include post-section-dash;
 
44
                        margin: 0;
 
45
 
 
46
                        @include media(tablet) {
 
47
                                flex: 1 0 calc(3 * (100vw / 12));
 
48
                        }
 
49
                }
 
50
 
 
51
                .discussion-meta {
 
52
                        @include media(tablet) {
 
53
                                flex: 0 0 calc(2 * (100vw / 12));
 
54
                                margin-left: #{$size__spacing-unit};
 
55
                        }
 
56
                }
 
57
        }
 
58
}
 
59
 
 
60
#comment {
 
61
        max-width: 100%;
 
62
        box-sizing: border-box;
 
63
}
 
64
 
 
65
#respond {
 
66
        position: relative;
 
67
 
 
68
        .comment-user-avatar {
 
69
                margin: $size__spacing-unit 0 -#{$size__spacing-unit};
 
70
        }
 
71
 
 
72
        .comment .comment-form {
 
73
                padding-left: 0;
 
74
        }
 
75
 
 
76
        > small {
 
77
                display: block;
 
78
                font-size: $font__size_base;
 
79
                position: absolute;
 
80
                left: calc(#{$size__spacing-unit} + 100%);
 
81
                top: calc(-3.5 * #{$size__spacing-unit});
 
82
                width: calc(100vw / 12 );
 
83
        }
 
84
}
 
85
 
 
86
#comments {
 
87
 
 
88
        > .comments-title:last-child {
 
89
                display: none;
 
90
        }
 
91
}
 
92
 
 
93
.comment-form-flex {
 
94
        display: flex;
 
95
        flex-direction: column;
 
96
 
 
97
        .comments-title {
 
98
                display: none;
 
99
                margin: 0;
 
100
                order: 1;
 
101
        }
 
102
 
 
103
        #respond {
 
104
                order: 2;
 
105
 
 
106
                + .comments-title {
 
107
                        display: block;
 
108
                }
 
109
        }
 
110
}
 
111
 
 
112
.comment-list {
 
113
        list-style: none;
 
114
        padding: 0;
 
115
 
 
116
        .children {
 
117
                margin: 0;
 
118
                padding: 0 0 0 $size__spacing-unit;
 
119
        }
 
120
 
 
121
        > .comment:first-child {
 
122
                margin-top: 0;
 
123
        }
 
124
 
 
125
        .pingback,
 
126
        .trackback {
 
127
 
 
128
                .comment-body {
 
129
                        color: $color__text-light;
 
130
                        font-family: $font__heading;
 
131
                        font-size: $font__size-xs;
 
132
                        font-weight: 500;
 
133
                        margin-top: $size__spacing-unit;
 
134
                        margin-bottom: $size__spacing-unit;
 
135
 
 
136
                        a:not(.comment-edit-link) {
 
137
                                font-weight: bold;
 
138
                                font-size: $font__size-base / (1 * $font__size-ratio);
 
139
                                line-height: 1.5;
 
140
                                padding-right: #{0.5 * $size__spacing-unit};
 
141
                                display: block;
 
142
                        }
 
143
 
 
144
                        .comment-edit-link {
 
145
                                color: $color__text-light;
 
146
                                font-family: $font__heading;
 
147
                                font-weight: 500;
 
148
                        }
 
149
                }
 
150
        }
 
151
}
 
152
 
 
153
.comment-reply {
 
154
 
 
155
        #respond + & {
 
156
                display: none;
 
157
        }
 
158
 
 
159
        .comment-reply-link {
 
160
                display: inline-block;
 
161
        }
 
162
}
 
163
 
 
164
.comment {
 
165
        list-style: none;
 
166
        position: relative;
 
167
 
 
168
        @include media(tablet) {
 
169
                padding-left: calc(.5 * (#{$size__spacing-unit} + calc(100vw / 12 )));
 
170
 
 
171
                &.depth-1,
 
172
                .children {
 
173
                        padding-left: 0;
 
174
                }
 
175
 
 
176
                &.depth-1 {
 
177
                        margin-left: calc(3.25 * #{$size__spacing-unit});
 
178
                }
 
179
        }
 
180
 
 
181
        .comment-body {
 
182
                margin: calc(2 * #{$size__spacing-unit}) 0 0;
 
183
        }
 
184
 
 
185
 
 
186
        .comment-meta {
 
187
                position: relative;
 
188
        }
 
189
 
 
190
        .comment-author {
 
191
 
 
192
                .avatar {
 
193
                        float: left;
 
194
                        margin-right: $size__spacing-unit;
 
195
                        position: relative;
 
196
 
 
197
                        @include media(tablet) {
 
198
                                float: inherit;
 
199
                                margin-right: inherit;
 
200
                                position: absolute;
 
201
                                top: 0;
 
202
                                right: calc(100% + #{$size__spacing-unit});
 
203
                        }
 
204
                }
 
205
 
 
206
                .fn {
 
207
                        position: relative;
 
208
                        display: block;
 
209
 
 
210
                        a {
 
211
                                color: inherit;
 
212
 
 
213
                                &:hover {
 
214
                                        color: $color__link-hover;
 
215
                                }
 
216
                        }
 
217
                }
 
218
 
 
219
                .post-author-badge {
 
220
                        border-radius: 100%;
 
221
                        display: block;
 
222
                        height: 18px;
 
223
                        position: absolute;
 
224
                        background: lighten( $color__link, 8% );
 
225
                        right: calc(100% - #{$size__spacing-unit * 2.5});
 
226
                        top: -3px;
 
227
                        width: 18px;
 
228
 
 
229
                        @include media(tablet) {
 
230
                                right: calc(100% + #{$size__spacing-unit * .75});
 
231
                        }
 
232
 
 
233
                        svg {
 
234
                                width: inherit;
 
235
                                height: inherit;
 
236
                                display: block;
 
237
                                fill: white;
 
238
                                transform: scale(0.875);
 
239
                        }
 
240
                }
 
241
        }
 
242
 
 
243
        .comment-metadata {
 
244
 
 
245
                > a,
 
246
                .comment-edit-link {
 
247
                        display: inline;
 
248
                        font-weight: 500;
 
249
                        color: $color__text-light;
 
250
                        vertical-align: baseline;
 
251
 
 
252
                        time {
 
253
                                vertical-align: baseline;
 
254
                        }
 
255
 
 
256
                        &:hover {
 
257
                                color: $color__link-hover;
 
258
                                text-decoration: none;
 
259
                        }
 
260
                }
 
261
 
 
262
                > * {
 
263
                        display: inline-block;
 
264
                }
 
265
 
 
266
                .edit-link-sep {
 
267
                        color: $color__text-light;
 
268
                        margin: 0 0.2em;
 
269
                        vertical-align: baseline;
 
270
                }
 
271
 
 
272
                .edit-link {
 
273
                        color: $color__text-light;
 
274
 
 
275
                        svg {
 
276
                                transform: scale(0.8);
 
277
                                vertical-align: baseline;
 
278
                                margin-right: 0.1em;
 
279
                        }
 
280
                }
 
281
 
 
282
                .comment-edit-link {
 
283
                        position: relative;
 
284
                        padding-left: $size__spacing-unit;
 
285
                        margin-left: -#{$size__spacing-unit};
 
286
                        z-index: 1;
 
287
 
 
288
                        &:hover {
 
289
                                color: $color__link;
 
290
                        }
 
291
                }
 
292
        }
 
293
 
 
294
        .comment-content {
 
295
 
 
296
                margin: $size__spacing-unit 0;
 
297
 
 
298
                @include media(desktop) {
 
299
                        padding-right: $size__spacing-unit;
 
300
                }
 
301
 
 
302
                > *:first-child {
 
303
                        margin-top: 0;
 
304
                }
 
305
 
 
306
                > *:last-child {
 
307
                        margin-bottom: 0;
 
308
                }
 
309
 
 
310
                blockquote {
 
311
                        margin-left: 0;
 
312
                }
 
313
 
 
314
                a {
 
315
                        text-decoration: underline;
 
316
 
 
317
                        &:hover {
 
318
                                text-decoration: none;
 
319
                        }
 
320
                }
 
321
        }
 
322
}
 
323
 
 
324
.comment-reply-link,
 
325
#cancel-comment-reply-link {
 
326
        font-weight: 500;
 
327
 
 
328
        &:hover {
 
329
                color: $color__link-hover;
 
330
        }
 
331
}
 
332
 
 
333
.discussion-avatar-list {
 
334
        @include clearfix;
 
335
 
 
336
        margin: 0;
 
337
        padding: 0;
 
338
 
 
339
        li {
 
340
                position: relative;
 
341
                list-style: none;
 
342
                margin: 0 -8px 0 0;
 
343
                padding: 0;
 
344
                float: left;
 
345
        }
 
346
 
 
347
        .comment-user-avatar {
 
348
 
 
349
                img {
 
350
                        height: calc(1.5 * #{$size__spacing-unit});
 
351
                        width: calc(1.5 * #{$size__spacing-unit});
 
352
                }
 
353
        }
 
354
}
 
355
 
 
356
.discussion-meta {
 
357
 
 
358
        .discussion-meta-info {
 
359
                margin: 0;
 
360
 
 
361
                .svg-icon {
 
362
                        vertical-align: middle;
 
363
                        fill: currentColor;
 
364
                        transform: scale( 0.6 ) scaleX(-1) translateY(-0.1em);
 
365
                        margin-left: -#{.25 * $size__spacing-unit}; // Align icon with avatars above.
 
366
                }
 
367
        }
 
368
 
 
369
}
 
370
 
 
371
.comment-form {
 
372
 
 
373
        .comment-notes,
 
374
        label {
 
375
                font-family: $font__heading;
 
376
                font-size: $font__size-xs;
 
377
                color: $color__text-light;
 
378
        }
 
379
 
 
380
        .comment-form-author,
 
381
        .comment-form-email {
 
382
                @include media(tablet) {
 
383
                        width: calc(50% - #{$size__spacing-unit / 2});
 
384
                        float: left;
 
385
                }
 
386
        }
 
387
 
 
388
        .comment-form-email {
 
389
                @include media(tablet) {
 
390
                        margin-left: $size__spacing-unit;
 
391
                }
 
392
        }
 
393
 
 
394
        input[name="author"],
 
395
        input[name="email"],
 
396
        input[name="url"] {
 
397
                display: block;
 
398
                width: 100%;
 
399
        }
 
400
}