You are here

Home » API reference » AT Tools 8.2

comments.css in AT Tools 8.2

Same filename and directory in other branches
  1. 8.3 at_theme_generator/starterkits/starterkit/styles/css/components/comments.css
  2. 8 at_theme_generator/starterkits/starterkit/styles/css/components/comments.css
/**
 * Comments
 *  - comment field (holds comment title, form, comments etc)
 *  - styles for comments
 ============================================================================ */
.comment {
  padding: 1rem 0;
  border-top: 1px solid;
}

.comment__title--visually-hidden {
  margin: 0;
  padding: 0;
  font-size: 1rem;
}

.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: 0.25rem;
}

.comment p:last-of-type {
  margin-bottom: 0;
}

.comment__meta {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 1rem 0;
}

.comment.has-title .comment__meta {
  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 screen 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 0.75rem 0 0;
}

.comment__meta .field-type-image img {
  width: auto;
  height: 3rem;
}

.comment__meta .field-type-image__figure {
  margin: 0;
  padding: 0;
}

.comment__meta article:empty {
  display: none;
}

.comment.preview {
  padding: 1rem;
  margin-bottom: 1rem;
}

.comment__links {
  clear: both;
}

.field-type-comment {
  margin: 1.25rem 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: 2.625rem;
}
/*# sourceMappingURL=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: 1rem 0;

  8.   border-top: 1px solid;

  9. }

  10. 

  11. .comment__title--visually-hidden {

  12.   margin: 0;

  13.   padding: 0;

  14.   font-size: 1rem;

  15. }

  16. 

  17. .comment__title--visually-hidden .permalink {

  18.   position: absolute !important;

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

  20.   overflow: hidden;

  21.   height: 1px;

  22.   width: 1px;

  23.   padding: 0;

  24.   word-wrap: normal;

  25.   font: 0/0 a;

  26. }

  27. 

  28. .comment__title--visually-hidden .marker {

  29.   float: right;

  30.   margin-left: 0.25rem;

  31. }

  32. 

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

  34.   margin-bottom: 0;

  35. }

  36. 

  37. .comment__meta {

  38.   display: -webkit-flex;

  39.   display: -ms-flexbox;

  40.   display: flex;

  41.   -webkit-align-items: center;

  42.       -ms-flex-align: center;

  43.           align-items: center;

  44.   margin: 1rem 0;

  45. }

  46. 

  47. .comment.has-title .comment__meta {

  48.   margin: 1rem 0;

  49. }

  50. 

  51. .comment__meta .comment__author:after {

  52.   content: "-";

  53.   display: inline-block;

  54. }

  55. 

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

  57.   display: none;

  58. }

  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. 

  66. @media screen and (max-width: 60em) {

  67.   .comment__meta .comment__author:after {

  68.     display: none;

  69.   }

  70.   .comment__meta .comment__author,

  71.   .comment__meta .comment__pubdate {

  72.     margin: 0;

  73.     display: block;

  74.   }

  75. }

  76. 

  77. .comment__meta .field-type-image {

  78.   float: left;

  79.   margin: 0 0.75rem 0 0;

  80. }

  81. 

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

  83.   width: auto;

  84.   height: 3rem;

  85. }

  86. 

  87. .comment__meta .field-type-image__figure {

  88.   margin: 0;

  89.   padding: 0;

  90. }

  91. 

  92. .comment__meta article:empty {

  93.   display: none;

  94. }

  95. 

  96. .comment.preview {

  97.   padding: 1rem;

  98.   margin-bottom: 1rem;

  99. }

  100. 

  101. .comment__links {

  102.   clear: both;

  103. }

  104. 

  105. .field-type-comment {

  106.   margin: 1.25rem 0 0;

  107.   clear: both;

  108. }

  109. 

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

  111.   content: " ";

  112.   display: table;

  113. }

  114. 

  115. .field-type-comment:after {

  116.   clear: both;

  117. }

  118. 

  119. .field-type-comment .indented {

  120.   margin-left: 2.625rem;

  121. }

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