promoted-items.css

Same filename in other branches
  1. 8.9.x core/profiles/demo_umami/themes/umami/css/components/views/promoted-items.css
  2. 10 core/profiles/demo_umami/themes/umami/css/components/views/promoted-items.css
  3. 11.x core/profiles/demo_umami/themes/umami/css/components/views/promoted-items.css

This file is used to style the 'Promoted Items' view.

File

core/profiles/demo_umami/themes/umami/css/components/views/promoted-items.css

View source
  1. /**
  2. * @file
  3. * This file is used to style the 'Promoted Items' view.
  4. */
  5. .view-promoted-items--single {
  6. padding: 1rem 0 2rem;
  7. }
  8. /* Small */
  9. @media screen and (min-width: 30rem) { /* 480px */
  10. .view-promoted-items--single {
  11. padding-top: 2rem;
  12. padding-bottom: 3rem;
  13. }
  14. }
  15. /* Large */
  16. @media screen and (min-width: 60rem) { /* 960px */
  17. .view-promoted-items--single {
  18. display: flex;
  19. }
  20. }
  21. /* 77em == the max width of .container + 1em either side */
  22. @media screen and (min-width: 77em) {
  23. .view-promoted-items--single {
  24. padding-right: 0;
  25. padding-left: 0;
  26. }
  27. }
  28. /* Large */
  29. @media screen and (min-width: 60rem) { /* 960px */
  30. .view-promoted-items--single > .view-content {
  31. display: flex;
  32. flex: 0 0 50%;
  33. margin-right: 14px; /* LTR */
  34. }
  35. [dir=rtl] .view-promoted-items--single > .view-content {
  36. margin-right: 0;
  37. margin-left: 14px;
  38. }
  39. }
  40. .view-promoted-items--single > .view-content .views-row {
  41. margin-bottom: 14px;
  42. }
  43. /* Small */
  44. @media screen and (min-width: 30rem) { /* 480px */
  45. .view-promoted-items--single > .view-content .views-row {
  46. display: flex;
  47. margin-bottom: 28px;
  48. }
  49. }
  50. /* Large */
  51. @media screen and (min-width: 60rem) { /* 960px */
  52. .view-promoted-items--single > .view-content .views-row {
  53. margin-bottom: 0;
  54. }
  55. }
  56. /* Large */
  57. @media screen and (min-width: 60rem) { /* 960px */
  58. .view-promoted-items--single > .attachment-after {
  59. display: flex;
  60. margin-left: 14px; /* LTR */
  61. }
  62. [dir=rtl] .view-promoted-items--single > .attachment-after {
  63. margin-right: 14px;
  64. margin-left: 0;
  65. }
  66. }
  67. /* Large */
  68. @media screen and (min-width: 60rem) { /* 960px */
  69. .view-promoted-items--single .attachment-after .views-element-container {
  70. display: flex;
  71. }
  72. }
  73. /* Large */
  74. @media screen and (min-width: 60rem) { /* 960px */
  75. .view-promoted-items--single .attachment-after .view-promoted-items--double {
  76. display: flex;
  77. }
  78. }
  79. /* Small */
  80. @media screen and (min-width: 30rem) { /* 480px */
  81. .view-promoted-items--double {
  82. overflow-x: hidden;
  83. }
  84. }
  85. /* Small */
  86. @media screen and (min-width: 30rem) { /* 480px */
  87. .view-promoted-items--double .view-content {
  88. display: flex;
  89. margin: 0 -14px;
  90. }
  91. }
  92. /* Small */
  93. @media screen and (min-width: 30rem) { /* 480px */
  94. .view-promoted-items--double .views-row {
  95. display: flex;
  96. width: calc(50% - 28px);
  97. margin: 0 14px;
  98. }
  99. }
  100. /* For the front page only, apply .container gutters */
  101. .path-frontpage .block-views-blockpromoted-items-block-1 {
  102. max-width: 1200px;
  103. margin: 0 auto;
  104. padding: 0 4%;
  105. }
  106. /* Extra large + side margins */
  107. @media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */
  108. .path-frontpage .block-views-blockpromoted-items-block-1 {
  109. padding: 0;
  110. }
  111. }

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