You are here

Home » API reference » AT Tools 8

comments.css in AT Tools 8

Same filename and directory in other branches
  1. 8.3 at_theme_generator/starterkits/starterkit/styles/css/components/comments.css
  2. 8.2 at_theme_generator/starterkits/starterkit/styles/css/components/comments.css
/**
 * Comments
 *  - comment field (holds comment title, form, comments etc)
 *  - styles for comments
 ============================================================================ */
.comment {
  padding-top: 16px;
  padding-top: 1rem;
  border-top: 1px solid;
}
.comment:before, .comment:after {
  content: " ";
  display: table;
}
.comment:after {
  clear: both;
}
.comment__title--visually-hidden {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-size: 1rem;
  line-height: 21px;
  line-height: 1.3125rem;
}
.comment__title--visually-hidden .permalink {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
  padding: 0;
  word-wrap: normal;
  font: 0/0 a;
}
.comment__title--visually-hidden .marker {
  float: right;
  margin-left: 4px;
  margin-left: 0.25rem;
}
.comment p:last-of-type {
  margin-bottom: 0;
}
.comment__meta {
  margin: 0 0 16px 0;
  margin: 0 0 1rem 0;
  overflow: hidden;
}
.comment.has-title .comment__meta {
  margin: 16px 0;
  margin: 1rem 0;
}
.comment__meta .comment__author:after {
  content: "-";
  display: inline-block;
}
.comment__meta--has-user-picture .comment__author:after {
  display: none;
}
.comment__meta--has-user-picture .comment__author,
.comment__meta--has-user-picture .comment__pubdate {
  margin: 0;
  display: block;
}
@media all and (max-width: 60em) {
  .comment__meta .comment__author:after {
    display: none;
  }
  .comment__meta .comment__author,
  .comment__meta .comment__pubdate {
    margin: 0;
    display: block;
  }
}
.comment__meta .field-type-image {
  float: left;
  margin: 0 11px 0 0;
  margin: 0 0.6875rem 0 0;
}
.comment__meta .field-type-image img {
  width: auto;
  height: 48px;
  height: 3rem;
}
.comment__meta .field-type-image__figure {
  margin: 0;
  padding: 0;
}
.comment__meta article:empty {
  display: none;
}
.comment.preview {
  padding: 16px;
  padding: 1rem;
  margin-bottom: 16px;
  margin-bottom: 1rem;
}
.comment__links {
  clear: both;
}
.comment__links:before, .comment__links:after {
  content: " ";
  display: table;
}
.comment__links:after {
  clear: both;
}
@media all and (max-width: 60em) {
  .comment__links .inline {
    float: none;
    display: block;
  }
  .comment__links .inline li {
    display: list-item;
  }
}
@media all and (min-width: 60.063em) {
  .comment__links .inline {
    float: right;
  }
  .comment__links .inline li {
    margin: 0 0 0 16px;
  }
  [dir="rtl"] .comment__links .inline li {
    margin: 0 16px 0 0;
  }
}

.field-type-comment {
  margin: 18px 0 0;
  margin: 1.125rem 0 0;
  clear: both;
}
.field-type-comment:before, .field-type-comment:after {
  content: " ";
  display: table;
}
.field-type-comment:after {
  clear: both;
}
.field-type-comment .indented {
  margin-left: 42px;
  margin-left: 2.625rem;
}

/*# sourceMappingURL=maps/comments.css.map */

File

at_theme_generator/starterkits/starterkit/styles/css/components/comments.css
View source 
  1. /**

  2.  * Comments

  3.  *  - comment field (holds comment title, form, comments etc)

  4.  *  - styles for comments

  5.  ============================================================================ */

  6. .comment {

  7.   padding-top: 16px;

  8.   padding-top: 1rem;

  9.   border-top: 1px solid;

  10. }

  11. .comment:before, .comment:after {

  12.   content: " ";

  13.   display: table;

  14. }

  15. .comment:after {

  16.   clear: both;

  17. }

  18. .comment__title--visually-hidden {

  19.   margin: 0;

  20.   padding: 0;

  21.   font-size: 16px;

  22.   font-size: 1rem;

  23.   line-height: 21px;

  24.   line-height: 1.3125rem;

  25. }

  26. .comment__title--visually-hidden .permalink {

  27.   position: absolute !important;

  28.   clip: rect(1px, 1px, 1px, 1px);

  29.   overflow: hidden;

  30.   height: 1px;

  31.   width: 1px;

  32.   padding: 0;

  33.   word-wrap: normal;

  34.   font: 0/0 a;

  35. }

  36. .comment__title--visually-hidden .marker {

  37.   float: right;

  38.   margin-left: 4px;

  39.   margin-left: 0.25rem;

  40. }

  41. .comment p:last-of-type {

  42.   margin-bottom: 0;

  43. }

  44. .comment__meta {

  45.   margin: 0 0 16px 0;

  46.   margin: 0 0 1rem 0;

  47.   overflow: hidden;

  48. }

  49. .comment.has-title .comment__meta {

  50.   margin: 16px 0;

  51.   margin: 1rem 0;

  52. }

  53. .comment__meta .comment__author:after {

  54.   content: "-";

  55.   display: inline-block;

  56. }

  57. .comment__meta--has-user-picture .comment__author:after {

  58.   display: none;

  59. }

  60. .comment__meta--has-user-picture .comment__author,

  61. .comment__meta--has-user-picture .comment__pubdate {

  62.   margin: 0;

  63.   display: block;

  64. }

  65. @media all and (max-width: 60em) {

  66.   .comment__meta .comment__author:after {

  67.     display: none;

  68.   }

  69.   .comment__meta .comment__author,

  70.   .comment__meta .comment__pubdate {

  71.     margin: 0;

  72.     display: block;

  73.   }

  74. }

  75. .comment__meta .field-type-image {

  76.   float: left;

  77.   margin: 0 11px 0 0;

  78.   margin: 0 0.6875rem 0 0;

  79. }

  80. .comment__meta .field-type-image img {

  81.   width: auto;

  82.   height: 48px;

  83.   height: 3rem;

  84. }

  85. .comment__meta .field-type-image__figure {

  86.   margin: 0;

  87.   padding: 0;

  88. }

  89. .comment__meta article:empty {

  90.   display: none;

  91. }

  92. .comment.preview {

  93.   padding: 16px;

  94.   padding: 1rem;

  95.   margin-bottom: 16px;

  96.   margin-bottom: 1rem;

  97. }

  98. .comment__links {

  99.   clear: both;

  100. }

  101. .comment__links:before, .comment__links:after {

  102.   content: " ";

  103.   display: table;

  104. }

  105. .comment__links:after {

  106.   clear: both;

  107. }

  108. @media all and (max-width: 60em) {

  109.   .comment__links .inline {

  110.     float: none;

  111.     display: block;

  112.   }

  113.   .comment__links .inline li {

  114.     display: list-item;

  115.   }

  116. }

  117. @media all and (min-width: 60.063em) {

  118.   .comment__links .inline {

  119.     float: right;

  120.   }

  121.   .comment__links .inline li {

  122.     margin: 0 0 0 16px;

  123.   }

  124.   [dir="rtl"] .comment__links .inline li {

  125.     margin: 0 16px 0 0;

  126.   }

  127. }

  128. 

  129. .field-type-comment {

  130.   margin: 18px 0 0;

  131.   margin: 1.125rem 0 0;

  132.   clear: both;

  133. }

  134. .field-type-comment:before, .field-type-comment:after {

  135.   content: " ";

  136.   display: table;

  137. }

  138. .field-type-comment:after {

  139.   clear: both;

  140. }

  141. .field-type-comment .indented {

  142.   margin-left: 42px;

  143.   margin-left: 2.625rem;

  144. }

  145. 

  146. /*# sourceMappingURL=maps/comments.css.map */