promoted-items.css 2.7 KB

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