You are here

Home » API reference » Open Social 8.2

meta.css in Open Social 8.2

Same filename in this branch
  1. 8.2 themes/socialblue/assets/css/meta.css
  2. 8.2 themes/socialbase/assets/css/meta.css
Same filename and directory in other branches
  1. 8.9 themes/socialbase/assets/css/meta.css
  2. 8 themes/socialbase/assets/css/meta.css
  3. 8.3 themes/socialbase/assets/css/meta.css
  4. 8.4 themes/socialbase/assets/css/meta.css
  5. 8.5 themes/socialbase/assets/css/meta.css
  6. 8.6 themes/socialbase/assets/css/meta.css
  7. 8.7 themes/socialbase/assets/css/meta.css
  8. 8.8 themes/socialbase/assets/css/meta.css
.metainfo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
  margin-bottom: 30px;
  line-height: 1.4;
}

.metainfo__avatar {
  margin-right: 12px;
}

.metainfo__avatar .img-metainfo__avatar {
  width: 44px;
  height: auto;
}

.metainfo__content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 0.875rem;
}

.metainfo__content a {
  text-decoration: underline;
  color: #4d4d4d;
}

.metainfo__content .badge--toggle {
  vertical-align: text-top;
}

.metainfo__authorname {
  display: inline-block;
  color: #777777;
  margin-right: 0.2em;
}

.metainfo__published-date {
  display: inline-block;
  color: #777777;
}

.metainfo__properties {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  margin: 20px 0 40px;
}

.meta-engage {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.meta-engage .badge {
  margin-right: 5px;
}

.meta-follow {
  margin-right: 0;
  margin-left: auto;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  margin-bottom: 1rem;
}

.article__special-fields {
  padding: 30px 0;
  border-top: 1px solid #e6e6e6;
}

.article__special-fields .article__special-field {
  margin-bottom: 15px;
}

.article__special-fields .article__special-field:last-child {
  margin-bottom: 0;
}

.article__special-fields .article__special-fields-icon {
  width: 18px;
  height: 18px;
  line-height: 20px;
  display: inline-block;
  vertical-align: middle;
  fill: #222222;
  margin-right: 12px;
}

.node--unpublished__label {
  display: inline-block;
  position: absolute;
  font-style: italic;
  font-weight: 500;
  top: 0;
  right: 0;
  padding: 0.5em 1em;
}

.stream-item .node--unpublished__label {
  top: -1.25rem;
  right: -1.25rem;
}

@media (min-width: 600px) {
  .meta-engage {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    margin-bottom: 2rem;
  }
  .meta-follow {
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
    -webkit-box-ordinal-group: 11;
        -ms-flex-order: 10;
            order: 10;
    margin-bottom: 0;
  }
}

File

themes/socialbase/assets/css/meta.css
View source 
  1. .metainfo {

  2.   display: -webkit-box;

  3.   display: -ms-flexbox;

  4.   display: flex;

  5.   -ms-flex-wrap: wrap;

  6.       flex-wrap: wrap;

  7.   position: relative;

  8.   margin-bottom: 30px;

  9.   line-height: 1.4;

  10. }

  11. 

  12. .metainfo__avatar {

  13.   margin-right: 12px;

  14. }

  15. 

  16. .metainfo__avatar .img-metainfo__avatar {

  17.   width: 44px;

  18.   height: auto;

  19. }

  20. 

  21. .metainfo__content {

  22.   -webkit-box-flex: 1;

  23.       -ms-flex: 1;

  24.           flex: 1;

  25.   font-size: 0.875rem;

  26. }

  27. 

  28. .metainfo__content a {

  29.   text-decoration: underline;

  30.   color: #4d4d4d;

  31. }

  32. 

  33. .metainfo__content .badge--toggle {

  34.   vertical-align: text-top;

  35. }

  36. 

  37. .metainfo__authorname {

  38.   display: inline-block;

  39.   color: #777777;

  40.   margin-right: 0.2em;

  41. }

  42. 

  43. .metainfo__published-date {

  44.   display: inline-block;

  45.   color: #777777;

  46. }

  47. 

  48. .metainfo__properties {

  49.   -webkit-box-flex: 1;

  50.       -ms-flex: 1 1 100%;

  51.           flex: 1 1 100%;

  52.   margin: 20px 0 40px;

  53. }

  54. 

  55. .meta-engage {

  56.   display: -webkit-box;

  57.   display: -ms-flexbox;

  58.   display: flex;

  59.   margin-bottom: 1rem;

  60.   -ms-flex-wrap: wrap;

  61.       flex-wrap: wrap;

  62. }

  63. 

  64. .meta-engage .badge {

  65.   margin-right: 5px;

  66. }

  67. 

  68. .meta-follow {

  69.   margin-right: 0;

  70.   margin-left: auto;

  71.   -ms-flex-preferred-size: 100%;

  72.       flex-basis: 100%;

  73.   margin-bottom: 1rem;

  74. }

  75. 

  76. .article__special-fields {

  77.   padding: 30px 0;

  78.   border-top: 1px solid #e6e6e6;

  79. }

  80. 

  81. .article__special-fields .article__special-field {

  82.   margin-bottom: 15px;

  83. }

  84. 

  85. .article__special-fields .article__special-field:last-child {

  86.   margin-bottom: 0;

  87. }

  88. 

  89. .article__special-fields .article__special-fields-icon {

  90.   width: 18px;

  91.   height: 18px;

  92.   line-height: 20px;

  93.   display: inline-block;

  94.   vertical-align: middle;

  95.   fill: #222222;

  96.   margin-right: 12px;

  97. }

  98. 

  99. .node--unpublished__label {

  100.   display: inline-block;

  101.   position: absolute;

  102.   font-style: italic;

  103.   font-weight: 500;

  104.   top: 0;

  105.   right: 0;

  106.   padding: 0.5em 1em;

  107. }

  108. 

  109. .stream-item .node--unpublished__label {

  110.   top: -1.25rem;

  111.   right: -1.25rem;

  112. }

  113. 

  114. @media (min-width: 600px) {

  115.   .meta-engage {

  116.     -ms-flex-wrap: nowrap;

  117.         flex-wrap: nowrap;

  118.     margin-bottom: 2rem;

  119.   }

  120.   .meta-follow {

  121.     -ms-flex-preferred-size: auto;

  122.         flex-basis: auto;

  123.     -webkit-box-ordinal-group: 11;

  124.         -ms-flex-order: 10;

  125.             order: 10;

  126.     margin-bottom: 0;

  127.   }

  128. }