_ressources.scss 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306
  1. .path-ressources{
  2. .layout-content{
  3. width: 100vw;
  4. .region-content{
  5. width: 80%;
  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. @media (max-width: 479px){
  14. display: flex;
  15. flex-direction: column;
  16. }
  17. // texte présentation
  18. .block-config-pages-block{
  19. grid-column: 1 / span 4;
  20. margin-left: 1rem;
  21. @media (max-width:479px) {
  22. order: 1;
  23. margin-left: 0;
  24. }
  25. .config_pages--base-de-donnees--full{
  26. grid-column: 1 / span 5;
  27. @media (max-width: 810px){
  28. padding: 2rem;
  29. margin-top:1rem;
  30. }
  31. @media (max-width: 479px){
  32. padding-left: 0;
  33. padding-right: 0;
  34. }
  35. .field--name-field-introduction{
  36. margin: auto;
  37. background: $white;
  38. margin-top:5rem;
  39. @media (max-width: 479px){
  40. margin-top:1rem;
  41. }
  42. }
  43. }
  44. }
  45. //button proposer une ressource
  46. .block-block-content82917d0c-5004-4bfb-af66-ce334782d82d{
  47. // visibility: hidden;
  48. grid-column: 6 / span 5;
  49. grid-row: 1;
  50. margin-top: 4rem;
  51. background-color: $blue-light;
  52. height: fit-content;
  53. width: 100%;
  54. @media (max-width: 810px){
  55. grid-column: 5 / span 5;
  56. }
  57. @media (max-width: 479px){
  58. grid-column: 5 / span 5;
  59. order: 2;
  60. }
  61. .display{
  62. display: block;
  63. }
  64. .field--name-field-lien{
  65. display: flex;
  66. flex-direction: column;
  67. margin-top: 2rem;
  68. margin-bottom: 2rem;
  69. margin-left: 1.5rem;
  70. margin-right: 1.5rem;
  71. text-align: center;
  72. a{
  73. font-weight: 800;
  74. color: $white;
  75. font-size: 1.3rem;
  76. }
  77. &:after{
  78. margin-left: auto;
  79. padding-top: 1rem;
  80. display: block;
  81. content:url("../images/pictos/noun_Arrow_3771902.svg")
  82. }
  83. }
  84. @media (max-width: 810px){
  85. margin: auto;
  86. }
  87. }
  88. // grille des ressources
  89. .block-views-blockbase-de-donnees-block-1{
  90. margin-top: 2rem;
  91. width: 100%;
  92. grid-column: 1 / span 6;
  93. @media (max-width:479px) {
  94. order: 3;
  95. }
  96. .view-filters{
  97. display: flex;
  98. flex-direction: row;
  99. flex-wrap: wrap;
  100. background-color: $white;
  101. margin-top: 2rem;
  102. margin-left: 1rem;
  103. margin-bottom: 5rem;
  104. @media (max-width: 479px) {
  105. margin-left: 0;
  106. }
  107. &::before{
  108. content: "Filtrer par : ";
  109. padding-right: 1rem;
  110. @media (max-width: 479px){
  111. padding-bottom: 1rem;
  112. }
  113. }
  114. #views-exposed-form-base-de-donnees-block-1{
  115. width: fit-content;
  116. display: flex;
  117. flex-direction: row;
  118. flex-wrap: wrap;
  119. #edit-field-mots-clefs-target-id{
  120. @media (max-width: 479px){
  121. width: 75vw;
  122. }
  123. }
  124. #edit-actions{
  125. display: flex;
  126. flex-direction: column;
  127. justify-content: space-between;
  128. #edit-submit-base-de-donnees{
  129. background-color: $blue-light;
  130. color: white;
  131. text-transform: uppercase;
  132. border: none;
  133. padding: 0.1rem 0.7rem;
  134. margin-left: 2rem;
  135. @media (max-width: 479px){
  136. margin-left: 0rem;
  137. margin-right: 2rem;
  138. margin-top: 1rem;
  139. }
  140. }
  141. #edit-reset{
  142. background-color: $blue-light;
  143. color: white;
  144. text-transform: uppercase;
  145. border: none;
  146. padding: 0.1rem 0.7rem;
  147. margin-top: 1rem;
  148. margin-left: 1rem;
  149. }
  150. }
  151. }
  152. }
  153. .view-content{
  154. width: 100%;
  155. display: flex;
  156. flex-direction: row;
  157. flex-wrap: wrap;
  158. .views-row{
  159. width: 25%;
  160. flex: 0 0 25%;
  161. .node-type-ressource{
  162. display: flex;
  163. flex-direction: column;
  164. border: 2px solid $blue-light;
  165. margin-left: 1rem;
  166. margin-bottom: 1rem ;
  167. padding: 1rem;
  168. @media (max-width: 479px) {
  169. margin-left: 0;
  170. }
  171. &:hover{
  172. background-color: $background-actus;
  173. }
  174. .field--name-field-type-de-ressource{
  175. text-transform: uppercase;
  176. line-height: 1.1rem;
  177. margin-top: 0.5rem;
  178. a{
  179. color: $blue-light;
  180. font-weight: 900;
  181. font-size: 0.8rem;
  182. pointer-events: none;
  183. cursor: default;
  184. }
  185. }
  186. .field--name-title{
  187. margin-top: 0.5rem;
  188. h2{
  189. margin: 0;
  190. line-height: 1rem;
  191. a{
  192. color: $black;
  193. font-size: 1rem;
  194. font-weight: 900;
  195. font-style: italic;
  196. }
  197. }
  198. }
  199. .field--name-field-auteur-s-{
  200. margin-top: 0.5rem;
  201. font-weight: 800;
  202. line-height: 1.1rem;
  203. p{
  204. margin: 0;
  205. }
  206. .field__label{
  207. display:none;
  208. }
  209. }
  210. .field--name-field-edition{
  211. margin-top: 0.5rem;
  212. p{
  213. margin: 0;
  214. }
  215. .field__label{
  216. display:none;
  217. }
  218. }
  219. .field--name-field-images{
  220. // display: none;
  221. // width: 30%;
  222. width: fit-content;
  223. border: 1px solid #a3a3a3;
  224. height: 100px;
  225. .field__item{
  226. height: 100px;
  227. }
  228. img{
  229. height: 100%;
  230. width: auto;
  231. // width: 100%;
  232. // height: auto;
  233. }
  234. }
  235. .field--name-field-date-de-parution{
  236. margin-top: 0.3rem;
  237. }
  238. .field--name-field-mots-clefs{
  239. display: flex;
  240. margin-top: 1rem;
  241. flex-direction: row;
  242. flex-wrap: wrap;
  243. .field__item{
  244. margin-right: 0.5rem;
  245. padding-left: 0.3rem;
  246. padding-right: 0.3rem;
  247. font-size: 0.7rem;
  248. a{
  249. background: $blue-dark;
  250. color: $white;
  251. font-weight: 800;
  252. vertical-align: super;
  253. padding-left: 0.1rem;
  254. padding-right: 0.1rem;
  255. display: inline-flex;
  256. pointer-events: none;
  257. cursor: default;
  258. }
  259. }
  260. }
  261. ul.links.inline{
  262. display: none;
  263. }
  264. }
  265. }
  266. @media (max-width: 810px){
  267. flex-direction: column;
  268. .views-row{
  269. width: 100%;
  270. }
  271. }
  272. }
  273. }
  274. }
  275. }
  276. }
  277. }
  278. }
  279. }
  280. }