You are here

Home » API reference » AT Tools 8

node.css in AT Tools 8

Same filename and directory in other branches
  1. 8.3 at_theme_generator/starterkits/starterkit/styles/css/components/node.css
  2. 8.2 at_theme_generator/starterkits/starterkit/styles/css/components/node.css
/**
 * Content Types (nodes)
 *  - in Drupal a content type is a bunch of fields we use to enter and display
 *    content, such as pages, blog posts, forum posts and so on. Each of those
 *    is usually a content type you create in the Drupal admin.
 *  - an instance of a content type (e.g. a single blog post) is called a node,
 *    the root template is node.html.twig and the base selector is .node {}
 ============================================================================ */
.node {
  margin-bottom: 16px;
  margin-bottom: 1rem;
  padding: 16px;
  padding: 1rem;
  border-radius: 2px;
}
.node:before, .node:after {
  content: " ";
  display: table;
}
.node:after {
  clear: both;
}
.node p:last-child {
  margin-bottom: 0;
}
.node__status {
  float: right;
}
.node--view-mode-full__title {
  margin: 0 0 16px;
  margin: 0 0 1rem;
}
.node__meta {
  margin: 16px 0;
  margin: 1rem 0;
  overflow: hidden;
}
.node__meta .field-type-image {
  float: left;
  margin: 0 11px 0 0;
  margin: 0 0.6875rem 0 0;
}
.node__meta .field-type-image__figure {
  margin: 0;
  padding: 0;
}
.node__meta .field-type-image img {
  width: auto;
  height: 48px;
  height: 3rem;
}
.node__meta article:empty {
  display: none;
}
.node .node__author:after {
  content: "-";
  display: inline-block;
}
.node__meta--has-author-picture .node__author:after {
  display: none;
}
.node__meta--has-author-picture .node__author,
.node__meta--has-author-picture .node__pubdate {
  margin: 0;
  display: block;
}
@media all and (max-width: 60em) {
  .node .node__author:after {
    display: none;
  }
  .node .node__author,
  .node .node__pubdate {
    margin: 0;
    display: block;
  }
}
.node__links {
  clear: both;
}
.node__links:before, .node__links:after {
  content: " ";
  display: table;
}
.node__links:after {
  clear: both;
}
@media all and (max-width: 60em) {
  .node__links .inline {
    float: none;
    display: block;
  }
  .node__links .inline li {
    display: list-item;
  }
}
@media all and (min-width: 60.063em) {
  .node__links .inline {
    float: right;
  }
  .node__links .inline li {
    margin: 0 0 0 16px;
  }
  [dir="rtl"] .node__links .inline li {
    margin: 0 16px 0 0;
  }
}
.node--sticky {
  padding: 0;
}

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

File

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

  2.  * Content Types (nodes)

  3.  *  - in Drupal a content type is a bunch of fields we use to enter and display

  4.  *    content, such as pages, blog posts, forum posts and so on. Each of those

  5.  *    is usually a content type you create in the Drupal admin.

  6.  *  - an instance of a content type (e.g. a single blog post) is called a node,

  7.  *    the root template is node.html.twig and the base selector is .node {}

  8.  ============================================================================ */

  9. .node {

  10.   margin-bottom: 16px;

  11.   margin-bottom: 1rem;

  12.   padding: 16px;

  13.   padding: 1rem;

  14.   border-radius: 2px;

  15. }

  16. .node:before, .node:after {

  17.   content: " ";

  18.   display: table;

  19. }

  20. .node:after {

  21.   clear: both;

  22. }

  23. .node p:last-child {

  24.   margin-bottom: 0;

  25. }

  26. .node__status {

  27.   float: right;

  28. }

  29. .node--view-mode-full__title {

  30.   margin: 0 0 16px;

  31.   margin: 0 0 1rem;

  32. }

  33. .node__meta {

  34.   margin: 16px 0;

  35.   margin: 1rem 0;

  36.   overflow: hidden;

  37. }

  38. .node__meta .field-type-image {

  39.   float: left;

  40.   margin: 0 11px 0 0;

  41.   margin: 0 0.6875rem 0 0;

  42. }

  43. .node__meta .field-type-image__figure {

  44.   margin: 0;

  45.   padding: 0;

  46. }

  47. .node__meta .field-type-image img {

  48.   width: auto;

  49.   height: 48px;

  50.   height: 3rem;

  51. }

  52. .node__meta article:empty {

  53.   display: none;

  54. }

  55. .node .node__author:after {

  56.   content: "-";

  57.   display: inline-block;

  58. }

  59. .node__meta--has-author-picture .node__author:after {

  60.   display: none;

  61. }

  62. .node__meta--has-author-picture .node__author,

  63. .node__meta--has-author-picture .node__pubdate {

  64.   margin: 0;

  65.   display: block;

  66. }

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

  68.   .node .node__author:after {

  69.     display: none;

  70.   }

  71.   .node .node__author,

  72.   .node .node__pubdate {

  73.     margin: 0;

  74.     display: block;

  75.   }

  76. }

  77. .node__links {

  78.   clear: both;

  79. }

  80. .node__links:before, .node__links:after {

  81.   content: " ";

  82.   display: table;

  83. }

  84. .node__links:after {

  85.   clear: both;

  86. }

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

  88.   .node__links .inline {

  89.     float: none;

  90.     display: block;

  91.   }

  92.   .node__links .inline li {

  93.     display: list-item;

  94.   }

  95. }

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

  97.   .node__links .inline {

  98.     float: right;

  99.   }

  100.   .node__links .inline li {

  101.     margin: 0 0 0 16px;

  102.   }

  103.   [dir="rtl"] .node__links .inline li {

  104.     margin: 0 16px 0 0;

  105.   }

  106. }

  107. .node--sticky {

  108.   padding: 0;

  109. }

  110. 

  111. /*# sourceMappingURL=maps/node.css.map */