mirror of
https://github.com/WebStackPage/WebStackPage.github.io.git
synced 2026-02-08 21:03:42 +08:00
172 lines
4.2 KiB
Plaintext
Executable File
172 lines
4.2 KiB
Plaintext
Executable File
// Name: Comment
|
|
// Description: Defines styles for comment threads
|
|
//
|
|
// Component: `uk-comment`
|
|
//
|
|
// Sub-objects: `uk-comment-header`
|
|
// `uk-comment-avatar`
|
|
// `uk-comment-title`
|
|
// `uk-comment-meta`
|
|
// `uk-comment-body`
|
|
// `uk-comment-list`
|
|
// `uk-comment-primary`
|
|
//
|
|
// Markup:
|
|
//
|
|
// <!-- uk-comment -->
|
|
// <article class="uk-comment">
|
|
// <header class="uk-comment-header">
|
|
// <img class="uk-comment-avatar" src="avatar.svg" width="50" height="50" alt="">
|
|
// <h4 class="uk-comment-title"></h4>
|
|
// <div class="uk-comment-meta"></div>
|
|
// </header>
|
|
// <div class="uk-comment-body">
|
|
// <p></p>
|
|
// </div>
|
|
// </article>
|
|
//
|
|
// ========================================================================
|
|
|
|
|
|
// Variables
|
|
// ========================================================================
|
|
|
|
@comment-header-margin-bottom: 15px;
|
|
|
|
@comment-avatar-margin-right: 15px;
|
|
|
|
@comment-title-margin-top: 5px;
|
|
@comment-title-font-size: 16px;
|
|
@comment-title-line-height: 22px;
|
|
|
|
@comment-meta-margin-top: 2px;
|
|
@comment-meta-color: #999;
|
|
@comment-meta-font-size: 11px;
|
|
@comment-meta-line-height: 16px;
|
|
|
|
@comment-list-margin-top: 15px;
|
|
@comment-list-padding-left: 100px;
|
|
|
|
|
|
/* ========================================================================
|
|
Component: Comment
|
|
========================================================================== */
|
|
|
|
.uk-comment {
|
|
.hook-comment;
|
|
}
|
|
|
|
|
|
/* Sub-object `uk-comment-header`
|
|
========================================================================== */
|
|
|
|
.uk-comment-header {
|
|
margin-bottom: @comment-header-margin-bottom;
|
|
.hook-comment-header;
|
|
}
|
|
|
|
/*
|
|
* Micro clearfix
|
|
*/
|
|
|
|
.uk-comment-header:before,
|
|
.uk-comment-header:after {
|
|
content: " ";
|
|
display: table;
|
|
}
|
|
|
|
.uk-comment-header:after { clear: both; }
|
|
|
|
|
|
/* Sub-object `uk-comment-avatar`
|
|
========================================================================== */
|
|
|
|
.uk-comment-avatar {
|
|
margin-right: @comment-avatar-margin-right;
|
|
float: left;
|
|
.hook-comment-avatar;
|
|
}
|
|
|
|
|
|
/* Sub-object `uk-comment-title`
|
|
========================================================================== */
|
|
|
|
.uk-comment-title {
|
|
margin: @comment-title-margin-top 0 0 0;
|
|
font-size: @comment-title-font-size;
|
|
line-height: @comment-title-line-height;
|
|
.hook-comment-title;
|
|
}
|
|
|
|
|
|
/* Sub-object `uk-comment-meta`
|
|
========================================================================== */
|
|
|
|
.uk-comment-meta {
|
|
margin: @comment-meta-margin-top 0 0 0;
|
|
font-size: @comment-meta-font-size;
|
|
line-height: @comment-meta-line-height;
|
|
color: @comment-meta-color;
|
|
.hook-comment-meta;
|
|
}
|
|
|
|
|
|
/* Sub-object `uk-comment-body`
|
|
========================================================================== */
|
|
|
|
.uk-comment-body {
|
|
.hook-comment-body;
|
|
}
|
|
|
|
/*
|
|
* Remove margin from the last-child
|
|
*/
|
|
|
|
.uk-comment-body > :last-child { margin-bottom: 0; }
|
|
|
|
|
|
/* Sub-object `uk-comment-list`
|
|
========================================================================== */
|
|
|
|
.uk-comment-list {
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.uk-comment-list .uk-comment + ul {
|
|
margin: @comment-list-margin-top 0 0 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.uk-comment-list > li:nth-child(n+2),
|
|
.uk-comment-list .uk-comment + ul > li:nth-child(n+2) { margin-top: @comment-list-margin-top; }
|
|
|
|
/* Tablet and bigger */
|
|
@media (min-width: @breakpoint-medium) {
|
|
|
|
.uk-comment-list .uk-comment + ul { padding-left: @comment-list-padding-left; }
|
|
|
|
}
|
|
|
|
|
|
/* Modifier `uk-comment-primary`
|
|
========================================================================== */
|
|
|
|
.uk-comment-primary {
|
|
.hook-comment-primary;
|
|
}
|
|
|
|
|
|
// Hooks
|
|
// ========================================================================
|
|
|
|
.hook-comment-misc;
|
|
|
|
.hook-comment() {}
|
|
.hook-comment-header() {}
|
|
.hook-comment-avatar() {}
|
|
.hook-comment-title() {}
|
|
.hook-comment-meta() {}
|
|
.hook-comment-body() {}
|
|
.hook-comment-primary() {}
|
|
.hook-comment-misc() {} |