_node-evenement-actu.scss 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  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. .block-region-second{
  106. display:grid;
  107. #node\:title{
  108. margin: 0;
  109. font-size: $font-large;
  110. line-height: 1.3;
  111. }
  112. #node\:field_programme{
  113. grid-row: 1;
  114. .field_programme{
  115. display: inline-block;
  116. width: auto;
  117. padding: .3rem .5rem;
  118. color: white;
  119. font-weight: 600;
  120. text-transform: uppercase;
  121. font-size: .5rem;
  122. }
  123. margin-bottom: 1rem;
  124. }
  125. #node\:field_date{
  126. //font-size: $font-medium;
  127. grid-row: 3;
  128. .field_date{
  129. div{
  130. float: left;
  131. margin-right: 1rem;
  132. }
  133. }
  134. }
  135. #node\:field_sous_titre{
  136. text-transform: uppercase;
  137. }
  138. #node\:field_intro{
  139. font-size: $font-medium;
  140. }
  141. .field_intro{
  142. margin-top: 1rem;
  143. margin-bottom: .5rem;
  144. }
  145. #node\:field_type_evenement{
  146. grid-row: 2;
  147. }
  148. #node\:field_image{
  149. grid-row: 5;
  150. width: 100%;
  151. margin: 1rem 0;
  152. img{
  153. width: 100%;
  154. }
  155. }
  156. #node\:body{
  157. }
  158. }
  159. // .block-region-first{
  160. // padding: 1rem 0 .5rem 0;
  161. // &>div{
  162. // padding: 0 0 .5rem 0;
  163. // }
  164. // a{
  165. // padding: 0 0 0 1rem;
  166. // }
  167. // }
  168. .block-region-third{
  169. position: sticky;
  170. top: 1rem;
  171. .field_fichier, .field_ressources_liees, .field_lien{
  172. // margin: .5rem 0;
  173. padding-right: 1.3rem;
  174. a{
  175. font-weight: 600;
  176. text-decoration: none;
  177. &:hover{
  178. text-decoration: underline;
  179. }
  180. }
  181. }
  182. }
  183. }