ressources.scss 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401
  1. .path-ressources{
  2. .layout-content{
  3. width: 100vw;
  4. .region-content{
  5. width: 100%;
  6. margin: auto;
  7. #block-contenudelapageprincipale{
  8. .layout--onecol{
  9. .layout__region--content{
  10. .block-region-content{
  11. // display: grid;
  12. // grid-template-columns: 1fr repeat(4, 1fr) 1fr;
  13. display: flex;
  14. flex-direction: column;
  15. @media (max-width: 479px){
  16. display: flex;
  17. flex-direction: column;
  18. }
  19. // texte présentation
  20. .block-config-pages-block{
  21. width: 60%;
  22. margin: auto;
  23. margin-left: 30%;
  24. @media (max-width:479px) {
  25. order: 1;
  26. margin-left: 0;
  27. }
  28. .config_pages--base-de-donnees--full{
  29. grid-column: 1 / span 5;
  30. @media (max-width: 810px){
  31. padding: 2rem;
  32. margin-top:1rem;
  33. }
  34. @media (max-width: 479px){
  35. padding-left: 0;
  36. padding-right: 0;
  37. }
  38. .field--name-field-introduction{
  39. margin: auto;
  40. background: $white;
  41. margin-top:5rem;
  42. @media (max-width: 479px){
  43. margin-top:1rem;
  44. }
  45. }
  46. }
  47. }
  48. //button proposer une ressource
  49. .block-block-content82917d0c-5004-4bfb-af66-ce334782d82d{
  50. // visibility: hidden;
  51. grid-column: 6 / span 5;
  52. grid-row: 1;
  53. margin-top: 4rem;
  54. background-color: $blue-light;
  55. height: fit-content;
  56. width: 100%;
  57. @media (max-width: 810px){
  58. grid-column: 5 / span 5;
  59. }
  60. @media (max-width: 479px){
  61. grid-column: 5 / span 5;
  62. order: 2;
  63. }
  64. .display{
  65. display: block;
  66. }
  67. .field--name-field-lien{
  68. display: flex;
  69. flex-direction: column;
  70. margin-top: 2rem;
  71. margin-bottom: 2rem;
  72. margin-left: 1.5rem;
  73. margin-right: 1.5rem;
  74. text-align: center;
  75. a{
  76. font-weight: 800;
  77. color: $white;
  78. font-size: 1.3rem;
  79. }
  80. &:after{
  81. margin-left: auto;
  82. padding-top: 1rem;
  83. display: block;
  84. content:url("../images/pictos/noun_Arrow_3771902.svg")
  85. }
  86. }
  87. @media (max-width: 810px){
  88. margin: auto;
  89. }
  90. }
  91. // grille des ressources
  92. .block-views-blockbase-de-donnees-block-1{
  93. margin-top: 2rem;
  94. width: 100%;
  95. @media (max-width:479px) {
  96. order: 3;
  97. }
  98. .view-base-de-donnees{
  99. display: flex;
  100. flex-direction: row;
  101. .view-filters{
  102. position: fixed;
  103. top: 13rem;
  104. left: 0;
  105. width: 20%;
  106. background-color: $white;
  107. margin-top: 2rem;
  108. margin-left: 1rem;
  109. margin-bottom: 5rem;
  110. padding: 0.5rem;
  111. padding-right: 3rem;
  112. @media (max-width: 479px) {
  113. margin-left: 0;
  114. }
  115. &::before{
  116. content: "Filtrer par : ";
  117. padding-right: 1rem;
  118. font-weight: 800;
  119. @media (max-width: 479px){
  120. padding-bottom: 1rem;
  121. }
  122. }
  123. #views-exposed-form-base-de-donnees-block-1{
  124. // max-width: 20%;
  125. display: flex;
  126. flex-direction: column;
  127. flex-wrap: wrap;
  128. margin-top: 1rem;
  129. @media (max-width: 479px){
  130. justify-content: center;
  131. }
  132. .js-form-item{
  133. display: flex;
  134. flex-direction: column;
  135. max-width: 100%;
  136. }
  137. #edit-actions{
  138. display: flex;
  139. flex-direction: column;
  140. justify-content: space-between;
  141. align-self: center;
  142. margin-left: auto;
  143. @media (max-width: 479px){
  144. justify-content: center;
  145. margin: auto;
  146. }
  147. #edit-submit-base-de-donnees{
  148. background-color: $blue-light;
  149. color: white;
  150. text-transform: uppercase;
  151. border: none;
  152. padding: 0.3rem 0.7rem;
  153. margin-left: 2rem;
  154. @media (max-width: 479px){
  155. margin: auto;
  156. margin-top: 1rem;
  157. }
  158. }
  159. #edit-reset{
  160. background-color: $blue-light;
  161. color: white;
  162. text-transform: uppercase;
  163. border: none;
  164. padding: 0.3rem 0.7rem;
  165. margin-top: 1rem;
  166. margin-left: 1rem;
  167. @media (max-width: 479px){
  168. margin: auto;
  169. margin-top: 1rem;
  170. }
  171. }
  172. }
  173. }
  174. }
  175. .view-content{
  176. width: 100%;
  177. display: flex;
  178. flex-direction: row;
  179. flex-wrap: wrap;
  180. .view-type-ressource-slide{
  181. width: 100%;
  182. h3{
  183. margin-left: 30%;
  184. text-transform: uppercase;
  185. a{color: rgb(9, 57, 139) !important;}
  186. }
  187. .views-row-wrapper{
  188. margin-left: 30%;
  189. display: flex;
  190. flex-direction: row;
  191. .views-row{
  192. display: flex;
  193. width: 25%;
  194. max-width: fit-content;
  195. .node-type-ressource{
  196. display: flex;
  197. flex-direction: column;
  198. // border: 2px solid $blue-light;
  199. // display: grid;
  200. // grid-template-columns: 1fr 1.2fr;
  201. // margin-left: 3rem;
  202. margin-bottom: 1rem ;
  203. padding-right: 1rem;
  204. .ext{
  205. color: black;
  206. }
  207. svg.ext{
  208. display: none;
  209. }
  210. &.type-de-ressource-Publication-issue-du-programme-EQLD{
  211. // background-color: $background-actus;
  212. }
  213. &.type-de-ressource-Paroles-de-lauréats{
  214. // background-color: $background-actus;
  215. }
  216. @media (max-width: 479px) {
  217. margin-left: 0;
  218. }
  219. // &:hover{
  220. // background-color: $black15;
  221. // }
  222. .field--name-field-type-de-ressource{
  223. grid-column: 1;
  224. text-transform: uppercase;
  225. line-height: 1.1rem;
  226. margin-top: 0.5rem;
  227. a{
  228. color: $blue-light;
  229. font-weight: 900;
  230. font-size: 0.8rem;
  231. pointer-events: none;
  232. cursor: default;
  233. }
  234. }
  235. .field--name-title{
  236. grid-column: 2;
  237. margin-top: 0.5rem;
  238. h2{
  239. margin: 0;
  240. line-height: 1rem;
  241. a{
  242. color: $black;
  243. font-size: 1rem;
  244. font-weight: 900;
  245. font-style: italic;
  246. }
  247. }
  248. }
  249. .field--name-field-auteur-s-{
  250. grid-column: 2;
  251. margin-top: 0.5rem;
  252. font-weight: 800;
  253. line-height: 1.1rem;
  254. p{
  255. margin: 0;
  256. }
  257. .field__label{
  258. display:none;
  259. }
  260. }
  261. .field--name-field-sous-titre{
  262. grid-column: 2;
  263. margin-top: 0.5rem;
  264. }
  265. .field--name-field-edition{
  266. grid-column: 2;
  267. margin-top: 0.5rem;
  268. p{
  269. margin: 0;
  270. }
  271. .field__label{
  272. display:none;
  273. }
  274. }
  275. .field--name-field-images{
  276. grid-column: 1;
  277. // display: none;
  278. // width: 30%;
  279. width: fit-content;
  280. border: 1px solid #a3a3a3;
  281. height: 100px;
  282. .field__item{
  283. height: 100px;
  284. }
  285. img{
  286. height: 100%;
  287. width: auto;
  288. // width: 100%;
  289. // height: auto;
  290. }
  291. }
  292. .field--name-field-date-de-parution{
  293. grid-column: 2;
  294. margin-top: 0.3rem;
  295. }
  296. .field--name-field-mots-clefs{
  297. grid-column: 2;
  298. display: flex;
  299. margin-top: 1rem;
  300. flex-direction: row;
  301. flex-wrap: wrap;
  302. .field__item{
  303. margin-right: 0.5rem;
  304. padding-left: 0.3rem;
  305. padding-right: 0.3rem;
  306. font-size: 0.7rem;
  307. a{
  308. background: $blue-dark;
  309. color: $white;
  310. font-weight: 800;
  311. vertical-align: super;
  312. padding-left: 0.1rem;
  313. padding-right: 0.1rem;
  314. display: inline-flex;
  315. pointer-events: none;
  316. cursor: default;
  317. }
  318. }
  319. }
  320. ul.links.inline{
  321. display: none;
  322. }
  323. }
  324. }
  325. @media (max-width: 810px){
  326. flex-direction: column;
  327. .views-row{
  328. width: 100%;
  329. }
  330. }
  331. .slick-next::before{
  332. content:url("../images/pictos/fleche-droite-dans-rond.png");
  333. display: block;
  334. }
  335. .slick-prev::before{
  336. content:url("../images/pictos/fleche-droite-dans-rond.png");
  337. display: block;
  338. transform: scaleX(-1);
  339. display: none;
  340. }
  341. .slick-next {
  342. right: 10%;
  343. }
  344. }
  345. }
  346. .view-type-ressource-slide:has(.type-publication-issue-du-programme-eqld){
  347. background-color: $background-actus;
  348. }
  349. }
  350. }
  351. }
  352. }
  353. }
  354. }
  355. }
  356. }
  357. }
  358. }