ressources.scss 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510
  1. .path-ressources{
  2. .layout-container {
  3. overflow: visible;
  4. }
  5. .layout-content{
  6. width: 100vw;
  7. .region-content{
  8. width: 100%;
  9. margin: auto;
  10. #block-contenudelapageprincipale{
  11. h2{
  12. font-size: 5rem;
  13. color: $blue-dark;
  14. font-weight: 400;
  15. text-align: center;
  16. margin-bottom: 1rem;
  17. width: fit-content;
  18. margin-left: 28%;
  19. }
  20. .layout--onecol{
  21. .layout__region--content{
  22. .block-region-content{
  23. // display: grid;
  24. // grid-template-columns: 1fr repeat(4, 1fr) 1fr;
  25. display: flex;
  26. flex-direction: column;
  27. @media (max-width: 479px){
  28. display: flex;
  29. flex-direction: column;
  30. }
  31. // texte présentation
  32. .block-config-pages-block{
  33. width: 60%;
  34. margin: auto;
  35. margin-left: 28%;
  36. @media (max-width:479px) {
  37. order: 1;
  38. margin-left: 0;
  39. }
  40. .config_pages--base-de-donnees--full{
  41. grid-column: 1 / span 5;
  42. @media (max-width: 810px){
  43. padding: 2rem;
  44. margin-top:1rem;
  45. }
  46. @media (max-width: 479px){
  47. padding-left: 0;
  48. padding-right: 0;
  49. }
  50. .field--name-field-introduction{
  51. margin: auto;
  52. background: $white;
  53. // margin-top:5rem;
  54. @media (max-width: 479px){
  55. margin-top:1rem;
  56. }
  57. }
  58. }
  59. }
  60. //button proposer une ressource
  61. .block-block-content82917d0c-5004-4bfb-af66-ce334782d82d{
  62. // visibility: hidden;
  63. grid-column: 6 / span 5;
  64. grid-row: 1;
  65. margin-top: 4rem;
  66. background-color: $blue-light;
  67. height: fit-content;
  68. width: 100%;
  69. @media (max-width: 810px){
  70. grid-column: 5 / span 5;
  71. }
  72. @media (max-width: 479px){
  73. grid-column: 5 / span 5;
  74. order: 2;
  75. }
  76. .display{
  77. display: block;
  78. }
  79. .field--name-field-lien{
  80. display: flex;
  81. flex-direction: column;
  82. margin-top: 2rem;
  83. margin-bottom: 2rem;
  84. margin-left: 1.5rem;
  85. margin-right: 1.5rem;
  86. text-align: center;
  87. a{
  88. font-weight: 800;
  89. color: $white;
  90. font-size: 1.3rem;
  91. }
  92. &:after{
  93. margin-left: auto;
  94. padding-top: 1rem;
  95. display: block;
  96. content:url("../images/pictos/noun_Arrow_3771902.svg")
  97. }
  98. }
  99. @media (max-width: 810px){
  100. margin: auto;
  101. }
  102. }
  103. // grille des ressources
  104. .block-views-blockbase-de-donnees-block-1{
  105. margin-top: 2rem;
  106. width: 100%;
  107. @media (max-width:479px) {
  108. order: 3;
  109. }
  110. .view-base-de-donnees{
  111. display: grid;
  112. grid-template-columns: 25% 80%;
  113. gap: 2rem;
  114. .view-filters{
  115. position: sticky;
  116. align-self: start;
  117. top: 21rem;
  118. left: 0;
  119. background-color: $white;
  120. margin-bottom: 5rem;
  121. padding: 1rem;
  122. padding-left: 2rem;
  123. padding-right: 1.5rem;
  124. z-index: 1;
  125. transform: translateY(-210px);
  126. margin-bottom: -210px;
  127. @media (max-width: 810px) {
  128. position: static;
  129. margin-bottom: 2rem;
  130. }
  131. @media (max-width: 479px) {
  132. margin-left: 0;
  133. }
  134. .buttons-filtres-ressources{
  135. &::before{
  136. content: "Afficher : ";
  137. padding-right: 1rem;
  138. font-weight: 800;
  139. margin-bottom: 1rem;
  140. display: block;
  141. width: 100%;
  142. @media (max-width: 479px){
  143. padding-bottom: 1rem;
  144. }
  145. }
  146. button.is-active {
  147. background-color: $blue-dark;
  148. color: white;
  149. a {
  150. color: white;
  151. }
  152. }
  153. button{
  154. background-color: transparent;
  155. // border-radius: 30px;
  156. border: 1px solid black;
  157. padding: 0.5rem 0.8rem 0.2rem 0.6rem;
  158. margin-bottom: 1rem;
  159. margin-right: 0.5rem;
  160. &:hover{
  161. cursor: grab;
  162. background-color: $blue-dark;
  163. color: white;
  164. }
  165. a {
  166. color: $blue-dark;
  167. display: inline-flex;
  168. flex-direction: row;
  169. align-items: center;
  170. &:hover{
  171. color: white;
  172. }
  173. :visited{
  174. color: $blue-dark;
  175. }
  176. }
  177. &.button-videos{
  178. margin-top: 1rem;
  179. a {
  180. &::before{
  181. content:url("../images/pictos/videos.svg");
  182. padding-right: 0.5rem;
  183. }
  184. &:hover::before,
  185. .is-active &::before{
  186. content:url("../images/pictos/videos-blanc.svg");
  187. }
  188. }
  189. }
  190. &.button-podcasts{
  191. a {
  192. &::before{
  193. content:url("../images/pictos/podcasts.svg");
  194. padding-right: 0.5rem;
  195. }
  196. &:hover::before{
  197. content:url("../images/pictos/podcasts-blanc.svg");
  198. }
  199. }
  200. }
  201. &.button-images---photos{
  202. a {
  203. &::before{
  204. content:url("../images/pictos/en-images.svg");
  205. padding-right: 0.5rem;
  206. }
  207. &:hover::before{
  208. content:url("../images/pictos/en-images-blanc.svg");
  209. }
  210. }
  211. }
  212. &.button-livres{
  213. a {
  214. &::before{
  215. content:url("../images/pictos/ecrits.svg");
  216. padding-right: 0.5rem;
  217. }
  218. &:hover::before{
  219. content:url("../images/pictos/ecrits-blanc.svg");
  220. }
  221. }
  222. }
  223. &.button-articles{
  224. a {
  225. &::before{
  226. content:url("../images/pictos/ecrits.svg");
  227. padding-right: 0.5rem;
  228. }
  229. &:hover::before{
  230. content:url("../images/pictos/ecrits-blanc.svg");
  231. }
  232. }
  233. }
  234. &.button-publications---rapports{
  235. a {
  236. &::before{
  237. content:url("../images/pictos/ecrits.svg");
  238. padding-right: 0.5rem;
  239. }
  240. &:hover::before{
  241. content:url("../images/pictos/ecrits-blanc.svg");
  242. }
  243. }
  244. }
  245. }
  246. button.is-active{
  247. &.button-videos{
  248. margin-top: 1rem;
  249. a {
  250. &::before,
  251. .is-active &::before{
  252. content:url("../images/pictos/videos-blanc.svg");
  253. }
  254. }
  255. }
  256. &.button-podcasts{
  257. a {
  258. &::before{
  259. content:url("../images/pictos/podcasts-blanc.svg");
  260. }
  261. }
  262. }
  263. &.button-images---photos{
  264. a {
  265. &::before{
  266. content:url("../images/pictos/en-images-blanc.svg");
  267. }
  268. }
  269. }
  270. &.button-livres{
  271. a {
  272. &::before{
  273. content:url("../images/pictos/ecrits-blanc.svg");
  274. }
  275. }
  276. }
  277. &.button-articles{
  278. a {
  279. &::before{
  280. content:url("../images/pictos/ecrits-blanc.svg");
  281. }
  282. }
  283. }
  284. &.button-publications---rapports{
  285. a {
  286. &::before{
  287. content:url("../images/pictos/ecrits-blanc.svg");
  288. }
  289. }
  290. }
  291. }
  292. }
  293. form{
  294. &::before{
  295. content: "Filtrer par : ";
  296. padding-right: 1rem;
  297. font-weight: 800;
  298. margin-bottom: 1rem;
  299. @media (max-width: 479px){
  300. padding-bottom: 1rem;
  301. }
  302. }
  303. .form-item-combine{
  304. border-top: none;
  305. border-left: none;
  306. border-right: none;
  307. label{display: none;}
  308. .input-wrapper{
  309. display: inline-flex;
  310. &::after{
  311. content: url("../images/pictos/loupe.svg");
  312. display: inline-block;
  313. }
  314. input{
  315. text-align: start !important;
  316. max-width: 100% !important;
  317. }
  318. }
  319. }
  320. select{
  321. ::placeholder{
  322. display: none;
  323. }
  324. }
  325. }
  326. }
  327. .filtered{
  328. display: flex;
  329. flex-direction: row;
  330. flex-wrap: wrap;
  331. .views-row-wrapper{
  332. flex-wrap: wrap;
  333. width: 85%;
  334. .views-row {
  335. padding: 1rem;
  336. width: 30% !important;
  337. }
  338. }
  339. }
  340. .view-content{
  341. transition: opacity 0.3s ease;
  342. display: flex;
  343. flex-direction: row;
  344. flex-wrap: wrap;
  345. width: 100%;
  346. .view-type-slide.type-publication-issue-du-programme-eqld{
  347. order: 1;
  348. &::before{
  349. background-color: $background-actus;}
  350. }
  351. .view-type-slide.type-paroles-de-laureats{order: 2;}
  352. .view-type-slide.type-les-projets-en-images{order: 3;}
  353. .view-type-slide.type-presse{
  354. order: 4;
  355. &::before{
  356. background-color: $background-actus;}
  357. }
  358. .view-type-slide:not(footer){
  359. width: 100%;
  360. position: relative;
  361. z-index: 0;
  362. padding-bottom: 2rem;
  363. &::before {
  364. content: "";
  365. position: absolute;
  366. left: -35%;
  367. height: 100%;
  368. width: 110vw;
  369. z-index: 0;
  370. }
  371. > * {
  372. position: relative;
  373. z-index: 1;
  374. }
  375. h3{
  376. margin-top: 3rem;
  377. text-transform: uppercase;
  378. font-family: 'Source Code Pro';
  379. color: rgb(9, 57, 139) !important;
  380. display: flex;
  381. flex-direction: row;
  382. align-items: center;
  383. font-size: 1.7rem;
  384. }
  385. h3.type-publication-issue-du-programme-eqld {
  386. &:before{
  387. content:url("../images/pictos/picto-ressource-eqld.svg");
  388. padding-right: 1rem;
  389. }
  390. }
  391. h3.type-paroles-de-laureats {
  392. &:before{
  393. content:url("../images/pictos/picto-ressource-paroleslaureats.svg");
  394. padding-right: 1rem;
  395. }
  396. }
  397. h3.type-les-projets-en-images {
  398. width: 80%;
  399. border-top: solid 2px rgba(0, 0, 0, 0.3);
  400. padding-top: 2rem;
  401. &:before{
  402. content:url("../images/pictos/picto-ressource-projetsimages.svg");
  403. padding-right: 1rem;
  404. }
  405. }
  406. h3.type-presse {
  407. &:before{
  408. content:url("../images/pictos/picto-ressource-presse.svg");
  409. padding-right: 1rem;
  410. }
  411. }
  412. .tout-voir{
  413. background-color: $white;
  414. border: 1px solid $blue-light;
  415. list-style: none;
  416. padding: 0.5rem;
  417. position: relative;
  418. left: 60vw;
  419. top: -4rem;
  420. a{
  421. text-transform: uppercase;
  422. font-size: 0.7rem;
  423. font-weight: 500;
  424. color: $blue-light;
  425. display: inline-flex;
  426. align-items: center;
  427. // &:after{
  428. // // display: block;
  429. // content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)" fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>');
  430. // }
  431. }
  432. }
  433. .views-row-wrapper{
  434. display: flex;
  435. flex-direction: row;
  436. .slick-track{
  437. width: 100% !important;
  438. display: flex;
  439. flex-direction: row;
  440. .views-row{
  441. width: 45% !important;
  442. min-width: 450px !important;
  443. max-width: 500px !important;
  444. }
  445. }
  446. @media (max-width: 810px){
  447. flex-direction: column;
  448. .views-row{
  449. width: 100%;
  450. }
  451. }
  452. .slick-next::before{
  453. content:url("../images/pictos/fleche-droite-dans-rond.png");
  454. display: block;
  455. }
  456. .slick-prev::before{
  457. content:url("../images/pictos/fleche-droite-dans-rond.png");
  458. display: block;
  459. transform: scaleX(-1);
  460. // display: none;
  461. }
  462. .slick-prev.slick-disabled::before,
  463. .slick-next.slick-disabled::before{
  464. opacity: 0 !important;
  465. }
  466. .slick-next {
  467. right: 15%;
  468. }
  469. }
  470. }
  471. }
  472. }
  473. }
  474. }
  475. }
  476. }
  477. }
  478. }
  479. }
  480. }