recipe-collections.css

Same filename in other branches
  1. 8.9.x core/profiles/demo_umami/themes/umami/css/components/blocks/recipe-collections/recipe-collections.css
  2. 10 core/profiles/demo_umami/themes/umami/css/components/blocks/recipe-collections/recipe-collections.css
  3. 11.x core/profiles/demo_umami/themes/umami/css/components/blocks/recipe-collections/recipe-collections.css
.block-views-blockrecipe-collections-block {
  padding: 3rem 4%;
  color: #fff;
  background: #767775;
}
.block-views-blockrecipe-collections-block .block__title {
  margin-bottom: 1.5rem;
  text-align: center;
}
.block-views-blockrecipe-collections-block .views-view-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.block-views-blockrecipe-collections-block .views-col {
  width: 100%;
  padding: 0 14px;
  text-align: center;
}

@media screen and (min-width: 48em) {
  .block-views-blockrecipe-collections-block .views-col {
    width: 25%;
    max-width: 13rem;
    text-align: left; /* LTR */
  }
  [dir="rtl"] .block-views-blockrecipe-collections-block .views-col {
    text-align: right;
  }
}
.block-views-blockrecipe-collections-block .views-row {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.block-views-blockrecipe-collections-block .views-row a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}
.block-views-blockrecipe-collections-block .views-row a:active,
.block-views-blockrecipe-collections-block .views-row a:focus,
.block-views-blockrecipe-collections-block .views-row a:hover {
  text-decoration: underline;
  outline-color: #fff;
  background: transparent;
}

File

core/profiles/demo_umami/themes/umami/css/components/blocks/recipe-collections/recipe-collections.css

View source
  1. .block-views-blockrecipe-collections-block {
  2. padding: 3rem 4%;
  3. color: #fff;
  4. background: #767775;
  5. }
  6. .block-views-blockrecipe-collections-block .block__title {
  7. margin-bottom: 1.5rem;
  8. text-align: center;
  9. }
  10. .block-views-blockrecipe-collections-block .views-view-grid {
  11. display: flex;
  12. flex-wrap: wrap;
  13. justify-content: center;
  14. }
  15. .block-views-blockrecipe-collections-block .views-col {
  16. width: 100%;
  17. padding: 0 14px;
  18. text-align: center;
  19. }
  20. @media screen and (min-width: 48em) {
  21. .block-views-blockrecipe-collections-block .views-col {
  22. width: 25%;
  23. max-width: 13rem;
  24. text-align: left; /* LTR */
  25. }
  26. [dir="rtl"] .block-views-blockrecipe-collections-block .views-col {
  27. text-align: right;
  28. }
  29. }
  30. .block-views-blockrecipe-collections-block .views-row {
  31. margin-bottom: 0.5rem;
  32. font-size: 0.9rem;
  33. }
  34. .block-views-blockrecipe-collections-block .views-row a {
  35. text-decoration: none;
  36. color: #fff;
  37. font-weight: bold;
  38. }
  39. .block-views-blockrecipe-collections-block .views-row a:active,
  40. .block-views-blockrecipe-collections-block .views-row a:focus,
  41. .block-views-blockrecipe-collections-block .views-row a:hover {
  42. text-decoration: underline;
  43. outline-color: #fff;
  44. background: transparent;
  45. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.