_node-evenement-actu.scss 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. .page-node-type-evenement, .page-node-type-actualite{
  2. .block-region-first{
  3. .field_programme{
  4. display: none;
  5. }
  6. @include breakpoint(small down) {
  7. text-align: center;
  8. }
  9. #programme_toc-block_10{
  10. .views-row{
  11. padding-left: 1rem;
  12. }
  13. }
  14. position: absolute;
  15. top: 0;
  16. left: 0;
  17. width: 22%;
  18. padding: 1rem 1.5rem ;
  19. .prog-ressources-link, .back-actus-link{
  20. font-family: "duke";
  21. font-size: $font-large;
  22. cursor: pointer;
  23. transition: all 250ms;
  24. text-decoration: none;
  25. &:hover{
  26. padding: 0 0 0 .3rem;
  27. }
  28. }
  29. div[id=""] {
  30. @include breakpoint(small down) {
  31. display: none;
  32. }
  33. }
  34. //styling intro text
  35. .views-element-container{
  36. @include breakpoint(small down) {
  37. display: block;
  38. // &:not(:first-child){
  39. // margin-left: 1rem;
  40. // }
  41. }
  42. header{
  43. font-family: "duke";
  44. font-size: $font-large;
  45. text-transform: uppercase;
  46. cursor: pointer;
  47. transition: all 250ms;
  48. line-height: 1.1;
  49. margin-bottom: .5rem;
  50. &:hover{
  51. padding: 0 0 0 .3rem;
  52. }
  53. }
  54. .views-row, .view-grouping{
  55. display: none;
  56. padding: 0 0 0 1.1rem;
  57. margin-bottom: .5rem;
  58. a{
  59. text-decoration: none;
  60. &:hover{
  61. text-decoration: underline;
  62. }
  63. }
  64. }
  65. // .views-row{
  66. // padding: 0;
  67. // }
  68. }
  69. }
  70. &.programme-1{
  71. .field_programme{
  72. background-color: $col-1;
  73. }
  74. }
  75. &.programme-2{
  76. .field_programme{
  77. background-color: $col-2;
  78. }
  79. }
  80. &.programme-3{
  81. .field_programme{
  82. background-color: $col-eur;
  83. }
  84. }
  85. &.programme-4{
  86. .field_programme{
  87. background-color: $col-1;
  88. }
  89. }
  90. &.programme-5{
  91. .field_programme{
  92. background-color: $col-mond;
  93. }
  94. }
  95. &.programme-6{
  96. .field_programme{
  97. background-color: $col-ter;
  98. }
  99. }
  100. &.programme-7{
  101. .field_programme{
  102. background-color: $col-met;
  103. }
  104. }
  105. &.programme-883{
  106. .field_programme{
  107. background-color: $col-transition;
  108. }
  109. }
  110. &.programme-878{
  111. .field_programme{
  112. background-color: $col-exode;
  113. }
  114. }
  115. .block-region-second{
  116. display:grid;
  117. #node\:title{
  118. margin: 0;
  119. font-size: $font-large;
  120. line-height: 1.3;
  121. }
  122. #node\:field_programme{
  123. grid-row: 1;
  124. .field_programme:has(.programme-878){
  125. background-color: $col-exode;
  126. }
  127. .field_programme:has(.programme-912){
  128. background-color: $col-ter;
  129. }
  130. .field_programme{
  131. display: inline-block;
  132. width: auto;
  133. padding: .3rem .5rem;
  134. color: white;
  135. font-weight: 600;
  136. text-transform: uppercase;
  137. font-size: .5rem;
  138. }
  139. margin-bottom: 1rem;
  140. }
  141. #node\:field_date{
  142. //font-size: $font-medium;
  143. grid-row: 3;
  144. .field_date{
  145. div{
  146. float: left;
  147. margin-right: 1rem;
  148. }
  149. }
  150. }
  151. #node\:field_sous_titre{
  152. text-transform: uppercase;
  153. }
  154. #node\:field_intro{
  155. font-size: $font-medium;
  156. }
  157. .field_intro{
  158. margin-top: 1rem;
  159. margin-bottom: .5rem;
  160. }
  161. #node\:field_type_evenement{
  162. grid-row: 2;
  163. }
  164. #node\:field_image{
  165. grid-row: 5;
  166. width: 100%;
  167. margin: 1rem 0;
  168. img{
  169. width: 100%;
  170. }
  171. }
  172. #node\:body{
  173. }
  174. }
  175. // .block-region-first{
  176. // padding: 1rem 0 .5rem 0;
  177. // &>div{
  178. // padding: 0 0 .5rem 0;
  179. // }
  180. // a{
  181. // padding: 0 0 0 1rem;
  182. // }
  183. // }
  184. .block-region-third{
  185. position: sticky;
  186. top: 1rem;
  187. .field_fichier, .field_ressources_liees, .field_lien{
  188. // margin: .5rem 0;
  189. padding-right: 1.3rem;
  190. a{
  191. font-weight: 600;
  192. text-decoration: none;
  193. &:hover{
  194. text-decoration: underline;
  195. }
  196. }
  197. }
  198. }
  199. }