_ressources.scss 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710
  1. .path-centre-de-ressources{
  2. // //tmp
  3. // .slick-slider{
  4. // display: none;
  5. // }
  6. //colo programme
  7. .programme-1{
  8. color: $col-1;
  9. .views-field-field-programme{
  10. .field-content{
  11. background: $col-1;
  12. color:white;
  13. }
  14. }
  15. }
  16. .programme-2{
  17. color: $col-2;
  18. .views-field-field-programme{
  19. .field-content{
  20. background: $col-2;
  21. color:white;
  22. }
  23. }
  24. }
  25. .programme-3{
  26. color: $col-eur;
  27. .views-field-field-programme{
  28. .field-content{
  29. background: $col-eur;
  30. color:white;
  31. }
  32. }
  33. }
  34. .programme-4{
  35. color: $col-1;
  36. .views-field-field-programme{
  37. .field-content{
  38. background: $col-1;
  39. color:white;
  40. }
  41. }
  42. }
  43. .programme-5{
  44. color: $col-mond;
  45. .views-field-field-programme{
  46. .field-content{
  47. background: $col-mond;
  48. color:white;
  49. }
  50. }
  51. }
  52. .programme-6{
  53. color: $col-ter;
  54. .views-field-field-programme{
  55. .field-content{
  56. background: $col-ter;
  57. color:white;
  58. }
  59. }
  60. }
  61. .programme-7{
  62. color: $col-met;
  63. .views-field-field-programme{
  64. .field-content{
  65. background: $col-met;
  66. color:white;
  67. }
  68. }
  69. }
  70. /// end colo
  71. main{
  72. flex: 0 0 100%;
  73. max-width: 100%;
  74. }
  75. background-color: $bck-col;
  76. header{
  77. background: $trame;
  78. margin-bottom: 0;
  79. .slick-track{
  80. display: flex !important;
  81. align-items: center;
  82. }
  83. .slick-list{
  84. overflow: inherit;
  85. }
  86. .slick-slide{
  87. margin: 0 1rem;
  88. .views-row:not(.type-74){
  89. text-transform: uppercase;
  90. display: grid !important;
  91. grid-template-columns: 40% 60%;
  92. grid-auto-rows: min-content;
  93. a{
  94. text-decoration: none;
  95. &:hover{
  96. text-decoration: underline;
  97. }
  98. }
  99. background-color: rgb(255, 255, 255);
  100. width: 100% !important;
  101. padding: .3rem;
  102. .views-field:not(:first-child){
  103. padding: 0 0 0 .4rem;
  104. }
  105. .views-field-field-image{
  106. grid-row: 2/span 5;
  107. }
  108. .views-field-field-edition{
  109. grid-column: 2;
  110. grid-row: 6;
  111. }
  112. .views-field-field-auteurs{
  113. font-weight: 600;
  114. grid-column: 2;
  115. grid-row: 3;
  116. }
  117. .views-field-field-programme{
  118. margin-top: -.8rem;
  119. grid-row: 1 / span 1;
  120. grid-column: 1 / span 2;
  121. .field-content{
  122. font-weight: 600;
  123. display: inline-block;
  124. width: auto;
  125. color: white;
  126. padding: .15rem .3rem;
  127. margin-bottom: 1rem;
  128. }
  129. }
  130. .views-field-field-type-de-ressource{
  131. text-transform: uppercase;
  132. font-weight: 600;
  133. margin-bottom: .5rem;
  134. font-size: $font-small;
  135. grid-row: 2 / span 1;
  136. grid-column: 2 / span 1;
  137. }
  138. .views-field-title{
  139. font-style: italic;
  140. grid-row: 4 / span 1;
  141. grid-column: 2 / span 1;
  142. }
  143. .views-field-field-sous-titre{
  144. margin-bottom: 1rem;
  145. grid-row: 5 / span 1;
  146. grid-column: 2 / span 1;
  147. align-self: baseline;
  148. }
  149. .views-field-field-theme{
  150. grid-row: 7 / span 1;
  151. grid-column: 1 / span 2;
  152. font-size: $font-small;
  153. .field-content{
  154. color:black;
  155. }
  156. }
  157. }
  158. .type-74{
  159. text-transform: uppercase;
  160. display: grid !important;
  161. grid-template-columns: 1fr;
  162. grid-auto-rows: min-content;
  163. a{
  164. text-decoration: none;
  165. &:hover{
  166. text-decoration: underline;
  167. }
  168. }
  169. background-color: rgb(255, 255, 255);
  170. // background-clip: content-box;
  171. width: 100% !important;
  172. padding: .3rem;
  173. .views-field:not(:first-child){
  174. padding: 0 0 0 .4rem;
  175. }
  176. .views-field-field-image{
  177. grid-row: 2;
  178. img{
  179. width: 80%;
  180. }
  181. // margin-top: -1.5rem;
  182. }
  183. .views-field-field-programme{
  184. margin-top: -.8rem;
  185. // grid-column: 1 / span 2;
  186. .field-content{
  187. font-weight: 600;
  188. display: inline-block;
  189. width: auto;
  190. color: white;
  191. padding: .15rem .3rem;
  192. margin-bottom: 1rem;
  193. }
  194. }
  195. .views-field-field-theme{
  196. .field-content{
  197. color:black;
  198. }
  199. }
  200. .views-field-field-type-de-ressource{
  201. text-transform: uppercase;
  202. font-weight: 600;
  203. margin-bottom: .5rem;
  204. font-size: $font-small;
  205. // grid-row: 2 / span 1;
  206. // grid-column: 2 / span 1;
  207. }
  208. .views-field-title{
  209. font-style: italic;
  210. // grid-row: 3 / span 1;
  211. // grid-column: 2 / span 1;
  212. }
  213. .views-field-field-sous-titre{
  214. margin-bottom: 1rem;
  215. // grid-row: 4 / span 1;
  216. // grid-column: 2 / span 1;
  217. align-self: baseline;
  218. }
  219. .views-field-field-theme{
  220. // grid-row: 5 / span 1;
  221. // grid-column: 1 / span 2;
  222. font-size: $font-small;
  223. text-align: right;
  224. }
  225. }
  226. }
  227. .slick-arrow{
  228. position: absolute;
  229. height: 100%;
  230. cursor: pointer;
  231. z-index: 100;
  232. // background-color: white;
  233. opacity: 0.2;
  234. transition: opacity 250ms;
  235. width: 10%;
  236. &:hover{
  237. opacity: .5;
  238. }
  239. }
  240. .slick-next{
  241. right: 0;
  242. top: 0;
  243. }
  244. }
  245. .content_container{
  246. &>div>h2:first-child{
  247. text-align: center;
  248. background: $trame;
  249. padding: 1rem 0;
  250. }
  251. }
  252. form{
  253. background: $trame;
  254. display: grid;
  255. padding: 1rem 0 1rem 0;
  256. //margin-top: -3rem;
  257. column-gap: 1rem;
  258. grid-template-columns: calc(10% - 3em) repeat(4, 20%);
  259. &>div:first-child{
  260. grid-column-start: 2;
  261. }
  262. .form-item-combine{
  263. grid-row: 1 / span 1 ;
  264. grid-column-start: 2;
  265. }
  266. .form-item-programme{
  267. grid-column-start: 2;
  268. }
  269. .form-item-field-collections-target-id{
  270. grid-column-start: 2;
  271. }
  272. .form-item-items-per-page{
  273. grid-column-start: 3;
  274. }
  275. select, input{
  276. display: inline-block;
  277. width: auto;
  278. width: 100%;
  279. font-size: $font-normal;
  280. padding: .3rem 1rem;
  281. height: auto;
  282. }
  283. div{
  284. display: inline-block;
  285. width: auto;
  286. // padding: .5rem 1rem;
  287. }
  288. .form-actions{
  289. grid-column: 4 / span 2;
  290. display: grid;
  291. grid-template-columns: repeat(2, minmax(0,1fr) );
  292. align-items: center;
  293. column-gap: 1rem;
  294. input{
  295. background-color: transparent;
  296. border: solid 1px black;
  297. box-shadow: none;
  298. // &:first-child{
  299. // // margin-right: .5rem;
  300. // }
  301. // &:last-child{
  302. // // margin-left: .5rem;
  303. // }
  304. }
  305. }
  306. }
  307. .views-view-grid{
  308. margin-top: 3rem;
  309. .views-row{
  310. display: grid;
  311. column-gap: 1rem;
  312. row-gap: 1rem;
  313. grid-template-columns: calc(10% - 3em) repeat(3, 27.3%);
  314. align-items: flex-start;
  315. .views-col:first-child{
  316. grid-column-start: 2;
  317. }
  318. }
  319. .views-col:not(.type-74){
  320. display: grid;
  321. grid-template-columns: 40% 60%;
  322. grid-auto-rows: min-content;
  323. a{
  324. text-decoration: none;
  325. &:hover{
  326. text-decoration: underline;
  327. }
  328. }
  329. background-color: rgb(255, 255, 255);
  330. width: 100% !important;
  331. padding: .3rem;
  332. .views-field:not(:first-child){
  333. padding: 0 0 0 .4rem;
  334. }
  335. .views-field-field-image{
  336. grid-row: 2/span 5;
  337. }
  338. .views-field-field-edition{
  339. grid-column: 2;
  340. grid-row: 6;
  341. }
  342. .views-field-field-auteurs{
  343. font-weight: 600;
  344. grid-column: 2;
  345. grid-row: 3;
  346. }
  347. .views-field-field-programme{
  348. margin-top: -.8rem;
  349. grid-row: 1 / span 1;
  350. grid-column: 1 / span 2;
  351. .field-content{
  352. font-weight: 600;
  353. display: inline-block;
  354. width: auto;
  355. color: white;
  356. padding: .15rem .3rem;
  357. margin-bottom: 1rem;
  358. }
  359. }
  360. .views-field-field-type-de-ressource{
  361. text-transform: uppercase;
  362. font-weight: 600;
  363. margin-bottom: .5rem;
  364. font-size: $font-small;
  365. grid-row: 2 / span 1;
  366. grid-column: 2 / span 1;
  367. }
  368. .views-field-title{
  369. font-style: italic;
  370. grid-row: 4 / span 1;
  371. grid-column: 2 / span 1;
  372. }
  373. .views-field-field-sous-titre{
  374. margin-bottom: 1rem;
  375. grid-row: 5 / span 1;
  376. grid-column: 2 / span 1;
  377. align-self: baseline;
  378. }
  379. .views-field-field-theme{
  380. grid-row: 7 / span 1;
  381. grid-column: 1 / span 2;
  382. font-size: $font-small;
  383. .field-content{
  384. color:black;
  385. }
  386. }
  387. }
  388. .type-74{
  389. display: grid;
  390. grid-template-columns: 1fr;
  391. grid-auto-rows: min-content;
  392. a{
  393. text-decoration: none;
  394. &:hover{
  395. text-decoration: underline;
  396. }
  397. }
  398. background-color: rgb(255, 255, 255);
  399. // background-clip: content-box;
  400. width: 100% !important;
  401. padding: .3rem;
  402. .views-field:not(:first-child){
  403. padding: 0 0 0 .4rem;
  404. }
  405. .views-field-field-image{
  406. grid-row: 2;
  407. // margin-top: -1.5rem;
  408. }
  409. .views-field-field-programme{
  410. margin-top: -.7rem;
  411. grid-row: 1 / span 1;
  412. // grid-column: 1 / span 2;
  413. .field-content{
  414. font-weight: 600;
  415. display: inline-block;
  416. width: auto;
  417. color: white;
  418. padding: .15rem .3rem;
  419. margin-bottom: 1rem;
  420. }
  421. }
  422. .views-field-field-theme{
  423. .field-content{
  424. color:black;
  425. }
  426. }
  427. .views-field-field-type-de-ressource{
  428. text-transform: uppercase;
  429. font-weight: 600;
  430. margin-bottom: .5rem;
  431. font-size: $font-small;
  432. margin-top: .3rem;
  433. // grid-row: 2 / span 1;
  434. // grid-column: 2 / span 1;
  435. }
  436. .views-field-title{
  437. font-style: italic;
  438. // grid-row: 3 / span 1;
  439. // grid-column: 2 / span 1;
  440. }
  441. .views-field-field-sous-titre{
  442. margin-bottom: 1rem;
  443. // grid-row: 4 / span 1;
  444. // grid-column: 2 / span 1;
  445. align-self: baseline;
  446. }
  447. .views-field-field-theme{
  448. // grid-row: 5 / span 1;
  449. // grid-column: 1 / span 2;
  450. font-size: $font-small;
  451. text-align: right;
  452. }
  453. }
  454. }
  455. nav{
  456. display: grid;
  457. align-items: center;
  458. justify-items: center;
  459. }
  460. .js-pager__items{
  461. text-align: center;
  462. li{
  463. display: inline-block;
  464. float: left;
  465. margin: 0 .2rem;
  466. }
  467. }
  468. }
  469. ///////// ressource single
  470. .page-node-type-ressource{
  471. &.programme-1{
  472. .block-region-second{
  473. h2,.field_auteurs,.field_date_de_parution,.field_type_de_ressource,.field_collections{
  474. color: $col-1 !important;
  475. }
  476. }
  477. .field_programme div{
  478. background: $col-1 ;
  479. }
  480. }
  481. &.programme-2{
  482. .block-region-second{
  483. h2,.field_auteurs,.field_date_de_parution,.field_type_de_ressource,.field_collections{
  484. color: $col-2 !important;
  485. }
  486. }
  487. .field_programme div{
  488. background: $col-2 ;
  489. }
  490. }
  491. &.programme-3{
  492. .block-region-second{
  493. h2,.field_auteurs,.field_date_de_parution,.field_type_de_ressource,.field_collections{
  494. color: $col-eur !important;
  495. }
  496. }
  497. .field_programme div{
  498. background: $col-eur ;
  499. }
  500. }
  501. &.programme-4{
  502. .block-region-second{
  503. h2,.field_auteurs,.field_date_de_parution,.field_type_de_ressource,.field_collections{
  504. color: $col-1;
  505. }
  506. }
  507. .field_programme div{
  508. background:$col-1 ;
  509. }
  510. }
  511. &.programme-5{
  512. .block-region-second{
  513. h2,.field_auteurs,.field_date_de_parution,.field_type_de_ressource,.field_collections{
  514. color: $col-mond !important;
  515. }
  516. }
  517. .field_programme div{
  518. background: $col-mond ;
  519. }
  520. }
  521. &.programme-6{
  522. .block-region-second{
  523. h2,.field_auteurs,.field_date_de_parution,.field_type_de_ressource,.field_collections{
  524. color: $col-ter !important;
  525. }
  526. }
  527. .field_programme div{
  528. background: $col-ter ;
  529. }
  530. }
  531. &.programme-7{
  532. .block-region-second{
  533. h2,.field_auteurs,.field_date_de_parution,.field_type_de_ressource,.field_collections{
  534. color: $col-met !important;
  535. }
  536. }
  537. .field_programme div{
  538. background: $col-met ;
  539. }
  540. }
  541. .block-region-second{
  542. display: grid;
  543. grid-template-columns: repeat(10, 8%);
  544. padding-bottom: 3rem;
  545. align-items: center;
  546. grid-column-gap: 2%;
  547. .field_programme div{
  548. display: inline-block;
  549. // background: gray;
  550. color: white;
  551. font-weight: 600;
  552. padding: .3rem .5rem;
  553. a{
  554. text-decoration: none;
  555. }
  556. }
  557. ///
  558. #node\:title{
  559. margin: 0;
  560. font-size: $font-large;
  561. line-height: 1.3;
  562. font-weight: 300;
  563. font-style: italic;
  564. margin-bottom: 1rem;
  565. //grid-row: 3;
  566. grid-row: auto / span 1;
  567. grid-column: 4 / span 6;
  568. margin: 0;
  569. }
  570. #node\:field_image{
  571. grid-column: 1 / span 3;
  572. grid-row: 2 / span 4;
  573. // padding: .5rem;
  574. }
  575. #node\:field_auteurs{
  576. //grid-row: 2;
  577. grid-row: auto / span 1;
  578. grid-column: 4 / span 6;
  579. // margin-top: 2rem;
  580. .field_auteurs{
  581. font-weight: 600;
  582. font-size: $font-medium;
  583. }
  584. }
  585. #node\:body{
  586. margin-top: 2rem;
  587. grid-column: 1 / span 10;
  588. }
  589. #node\:field_videos{
  590. margin-top: 2rem;
  591. grid-column: 1 / span 10;
  592. // grid-row: 6;
  593. grid-row: auto / span 1;
  594. }
  595. #node\:field_type_de_ressource{
  596. // grid-row: 1;
  597. grid-row: auto / span 1;
  598. grid-column: 4/ span 6 ;
  599. font-weight: 600;
  600. align-self: start;
  601. padding: .3rem .5rem;
  602. text-transform: uppercase;
  603. }
  604. #node\:field_programme{
  605. margin-bottom: 1rem;
  606. // grid-row: 1;
  607. grid-row: auto / span 1;
  608. grid-column: 1 / span 3;
  609. }
  610. #node\:field_date_de_parution{
  611. //grid-row: 4;
  612. grid-row: auto / span 1;
  613. grid-column: 4/ span 6 ;
  614. font-size: $font-medium;
  615. }
  616. #node\:field_collections{
  617. //grid-row: 5;
  618. grid-row: auto / span 1;
  619. grid-column: 4 / span 6;
  620. font-size: $font-medium;
  621. }
  622. #node\:field_theme{
  623. grid-column: 4 / span 6;
  624. //grid-row: 6;
  625. grid-row: auto / span 2;
  626. align-self: end;
  627. a{
  628. text-decoration: none;
  629. }
  630. }
  631. }
  632. .block-region-third{
  633. #node\:field_lien{
  634. text-transform: uppercase;
  635. font-weight: 600;
  636. margin-top: 1rem;
  637. a{
  638. text-decoration: none;
  639. padding: .5rem;
  640. background: white;
  641. }
  642. }
  643. }
  644. }