You are here

social_landing_page.featured.css in Open Social 8.4

.field--name-field-featured-items .field--label {
  width: 100%; }
@media (min-width: 600px) {
  .field--name-field-featured-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; }
    .paragraph--section .field--name-field-featured-items {
      margin: 0; } }
@media (min-width: 600px) {
  .field--name-field-featured-items .teaser--tile {
    flex: 0 0 49%;
    max-width: 49%;
    margin-left: 2%; }
    .field--name-field-featured-items .teaser--tile:nth-child(2n+1) {
      margin-left: 0; } }
@media (min-width: 900px) {
  .field--name-field-featured-items .teaser--tile {
    flex: 0 0 32%;
    max-width: 32%;
    margin-left: 2%; }
    .field--name-field-featured-items .teaser--tile:nth-child(2n+1) {
      margin-left: 2%; }
    .field--name-field-featured-items .teaser--tile:nth-child(3n+1) {
      margin-left: 0; } }

.teaser.teaser--tile {
  flex-direction: column;
  height: auto; }
  @media screen\0 {
    .teaser.teaser--tile {
      min-height: 320px; } }
  .teaser.teaser--tile .teaser__title {
    min-height: 63px;
    font-size: 1rem;
    line-height: 1.3;
    margin-bottom: 1rem;
    padding-right: 0;
    color: #4D4D4D;
    font-weight: 400; }
  .teaser.teaser--tile .teaser__image {
    position: relative;
    flex: 0 0 auto;
    height: auto;
    display: block;
    background: transparent;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0; }
    .teaser.teaser--tile .teaser__image .img_wrapper {
      display: block;
      height: 0;
      padding-bottom: 33.3%;
      border-radius: inherit; }
    .teaser.teaser--tile .teaser__image .no-feature-image {
      border: 0 none;
      border-bottom: 2px solid #777;
      padding: 0;
      position: absolute;
      bottom: 0;
      left: 1rem;
      right: 1rem;
      margin: 0; }
    .teaser.teaser--tile .teaser__image img {
      position: absolute;
      top: 0;
      left: 0;
      width: auto;
      border-radius: inherit; }
  .teaser.teaser--tile .teaser__content {
    display: flex;
    justify-content: space-between;
    flex-direction: column; }
  .teaser.teaser--tile .card__link {
    align-self: flex-end; }
  .teaser.teaser--tile .teaser__image a {
    display: block;
    border-radius: inherit; }
  .teaser.teaser--tile .teaser__teaser-type {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 8px 0 8px 0;
    left: 0; }
  .teaser.teaser--tile.no-image .teaser__teaser-type {
    background-color: transparent; }

.paragraph--section .paragraph--featured {
  background-color: #f3f3f3;
  padding: 30px 1em; }
  @media (min-width: 900px) {
    .paragraph--section .paragraph--featured {
      padding: 50px 1em; } }
  @media (min-width: 1200px) {
    .paragraph--section .paragraph--featured {
      padding: 50px 0;
      margin-left: calc(-100vw / 2 + 1200px / 2);
      margin-right: calc(-100vw / 2 + 1200px / 2); } }
.paragraph--featured.multiple {
  padding: 0 2em; }
  @media (min-width: 900px) {
    .paragraph--featured.multiple {
      padding: 0 2em; } }
  @media (min-width: 1200px) {
    .paragraph--featured.multiple {
      padding: 0; } }
.paragraph--featured.multiple.first {
  padding: 30px 2em 0; }
  @media (min-width: 900px) {
    .paragraph--featured.multiple.first {
      padding: 50px 2em 0; } }
  @media (min-width: 1200px) {
    .paragraph--featured.multiple.first {
      padding: 50px 0 0; } }
.paragraph--featured.multiple.last {
  padding: 0 2em 30px; }
  @media (min-width: 900px) {
    .paragraph--featured.multiple.last {
      padding: 0 2em 50px; } }
  @media (min-width: 1200px) {
    .paragraph--featured.multiple.last {
      padding: 0 0 50px; } }
.paragraph--featured .title {
  margin-top: 25px;
  font-size: 24px;
  line-height: 2;
  color: #4A4A4A; }
.paragraph--featured .field--name-field-featured-items {
  margin-top: 30px;
  margin-bottom: 0.75rem; }
.paragraph--featured > .container > .card__actionbar {
  padding-right: 0; }
.paragraph--featured footer.card__actionbar {
  padding-right: 0; }

/*# sourceMappingURL=social_landing_page.featured.css.map */

File

modules/social_features/social_landing_page/css/social_landing_page.featured.css
View source
  1. .field--name-field-featured-items .field--label {
  2. width: 100%; }
  3. @media (min-width: 600px) {
  4. .field--name-field-featured-items {
  5. display: flex;
  6. flex-wrap: wrap;
  7. justify-content: flex-start; }
  8. .paragraph--section .field--name-field-featured-items {
  9. margin: 0; } }
  10. @media (min-width: 600px) {
  11. .field--name-field-featured-items .teaser--tile {
  12. flex: 0 0 49%;
  13. max-width: 49%;
  14. margin-left: 2%; }
  15. .field--name-field-featured-items .teaser--tile:nth-child(2n+1) {
  16. margin-left: 0; } }
  17. @media (min-width: 900px) {
  18. .field--name-field-featured-items .teaser--tile {
  19. flex: 0 0 32%;
  20. max-width: 32%;
  21. margin-left: 2%; }
  22. .field--name-field-featured-items .teaser--tile:nth-child(2n+1) {
  23. margin-left: 2%; }
  24. .field--name-field-featured-items .teaser--tile:nth-child(3n+1) {
  25. margin-left: 0; } }
  26. .teaser.teaser--tile {
  27. flex-direction: column;
  28. height: auto; }
  29. @media screen\0 {
  30. .teaser.teaser--tile {
  31. min-height: 320px; } }
  32. .teaser.teaser--tile .teaser__title {
  33. min-height: 63px;
  34. font-size: 1rem;
  35. line-height: 1.3;
  36. margin-bottom: 1rem;
  37. padding-right: 0;
  38. color: #4D4D4D;
  39. font-weight: 400; }
  40. .teaser.teaser--tile .teaser__image {
  41. position: relative;
  42. flex: 0 0 auto;
  43. height: auto;
  44. display: block;
  45. background: transparent;
  46. border-top-left-radius: inherit;
  47. border-top-right-radius: inherit;
  48. border-bottom-left-radius: 0;
  49. border-bottom-right-radius: 0; }
  50. .teaser.teaser--tile .teaser__image .img_wrapper {
  51. display: block;
  52. height: 0;
  53. padding-bottom: 33.3%;
  54. border-radius: inherit; }
  55. .teaser.teaser--tile .teaser__image .no-feature-image {
  56. border: 0 none;
  57. border-bottom: 2px solid #777;
  58. padding: 0;
  59. position: absolute;
  60. bottom: 0;
  61. left: 1rem;
  62. right: 1rem;
  63. margin: 0; }
  64. .teaser.teaser--tile .teaser__image img {
  65. position: absolute;
  66. top: 0;
  67. left: 0;
  68. width: auto;
  69. border-radius: inherit; }
  70. .teaser.teaser--tile .teaser__content {
  71. display: flex;
  72. justify-content: space-between;
  73. flex-direction: column; }
  74. .teaser.teaser--tile .card__link {
  75. align-self: flex-end; }
  76. .teaser.teaser--tile .teaser__image a {
  77. display: block;
  78. border-radius: inherit; }
  79. .teaser.teaser--tile .teaser__teaser-type {
  80. position: absolute;
  81. background-color: rgba(0, 0, 0, 0.5);
  82. border-radius: 8px 0 8px 0;
  83. left: 0; }
  84. .teaser.teaser--tile.no-image .teaser__teaser-type {
  85. background-color: transparent; }
  86. .paragraph--section .paragraph--featured {
  87. background-color: #f3f3f3;
  88. padding: 30px 1em; }
  89. @media (min-width: 900px) {
  90. .paragraph--section .paragraph--featured {
  91. padding: 50px 1em; } }
  92. @media (min-width: 1200px) {
  93. .paragraph--section .paragraph--featured {
  94. padding: 50px 0;
  95. margin-left: calc(-100vw / 2 + 1200px / 2);
  96. margin-right: calc(-100vw / 2 + 1200px / 2); } }
  97. .paragraph--featured.multiple {
  98. padding: 0 2em; }
  99. @media (min-width: 900px) {
  100. .paragraph--featured.multiple {
  101. padding: 0 2em; } }
  102. @media (min-width: 1200px) {
  103. .paragraph--featured.multiple {
  104. padding: 0; } }
  105. .paragraph--featured.multiple.first {
  106. padding: 30px 2em 0; }
  107. @media (min-width: 900px) {
  108. .paragraph--featured.multiple.first {
  109. padding: 50px 2em 0; } }
  110. @media (min-width: 1200px) {
  111. .paragraph--featured.multiple.first {
  112. padding: 50px 0 0; } }
  113. .paragraph--featured.multiple.last {
  114. padding: 0 2em 30px; }
  115. @media (min-width: 900px) {
  116. .paragraph--featured.multiple.last {
  117. padding: 0 2em 50px; } }
  118. @media (min-width: 1200px) {
  119. .paragraph--featured.multiple.last {
  120. padding: 0 0 50px; } }
  121. .paragraph--featured .title {
  122. margin-top: 25px;
  123. font-size: 24px;
  124. line-height: 2;
  125. color: #4A4A4A; }
  126. .paragraph--featured .field--name-field-featured-items {
  127. margin-top: 30px;
  128. margin-bottom: 0.75rem; }
  129. .paragraph--featured > .container > .card__actionbar {
  130. padding-right: 0; }
  131. .paragraph--featured footer.card__actionbar {
  132. padding-right: 0; }
  133. /*# sourceMappingURL=social_landing_page.featured.css.map */