_ressources.scss 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. .path-centre-de-ressources{
  2. background-color: #f8f8fb;
  3. .content_container{
  4. &>div>h2:first-child{
  5. text-align: center;
  6. background-color: #98d0d9;
  7. padding: 1rem 0;
  8. }
  9. }
  10. form{
  11. background-color: #98d0d9;
  12. display: grid;
  13. padding: 0 0 5rem 0;
  14. column-gap: 1rem;
  15. grid-template-columns: calc(10% - 3em) repeat(4, 20%);
  16. &>div:first-child{
  17. grid-column-start: 2;
  18. }
  19. .form-item-combine{
  20. grid-row: 1 / span 1 ;
  21. grid-column-start: 2;
  22. }
  23. .form-item-programme{
  24. grid-column-start: 2;
  25. }
  26. .form-item-items-per-page{
  27. grid-column-start: 2;
  28. }
  29. select, input{
  30. display: inline-block;
  31. width: auto;
  32. width: 100%;
  33. font-size: $font-normal;
  34. padding: .3rem 1rem;
  35. height: auto;
  36. }
  37. div{
  38. display: inline-block;
  39. width: auto;
  40. // padding: .5rem 1rem;
  41. }
  42. .form-actions{
  43. grid-column: 4 / span 2;
  44. display: grid;
  45. grid-template-columns: 1fr 1fr;
  46. align-items: center;
  47. column-gap: 1rem;
  48. input{
  49. background-color: transparent;
  50. border: solid 1px black;
  51. box-shadow: none;
  52. &:first-child{
  53. // margin-right: .5rem;
  54. }
  55. &:last-child{
  56. // margin-left: .5rem;
  57. }
  58. }
  59. }
  60. }
  61. .views-view-grid{
  62. margin-top: 3rem;
  63. .views-row{
  64. display: grid;
  65. column-gap: 1rem;
  66. row-gap: 1rem;
  67. grid-template-columns: calc(10% - 3em) repeat(3, 27.3%);
  68. .views-col:first-child{
  69. grid-column-start: 2;
  70. }
  71. }
  72. .views-col{
  73. display: grid;
  74. grid-template-columns: 40% 60%;
  75. grid-auto-rows: min-content;
  76. a{
  77. text-decoration: none;
  78. &:hover{
  79. text-decoration: underline;
  80. }
  81. }
  82. background-color: rgb(255, 255, 255);
  83. background-clip: content-box;
  84. width: 100% !important;
  85. padding: .3rem;
  86. .views-field:not(:first-child){
  87. padding: 0 0 0 .4rem;
  88. }
  89. .views-field-field-image{
  90. grid-row: 2 / span 2;
  91. }
  92. .views-field-field-programme{
  93. grid-row: 1 / span 1;
  94. grid-column: 1 / span 2;
  95. .field-content{
  96. font-weight: 600;
  97. display: inline-block;
  98. width: auto;
  99. color: white;
  100. background: red;
  101. padding: .15rem .3rem;
  102. margin-bottom: 1rem;
  103. }
  104. }
  105. .views-field-field-type-de-ressource{
  106. text-transform: uppercase;
  107. font-weight: 600;
  108. margin-bottom: .5rem;
  109. font-size: $font-small;
  110. grid-row: 2 / span 1;
  111. grid-column: 2 / span 1;
  112. }
  113. .views-field-title{
  114. font-style: italic;
  115. grid-row: 3 / span 1;
  116. grid-column: 2 / span 1;
  117. }
  118. .views-field-field-sous-titre{
  119. margin-bottom: 1rem;
  120. grid-row: 4 / span 1;
  121. grid-column: 2 / span 1;
  122. align-self: baseline;
  123. }
  124. .views-field-field-theme{
  125. grid-row: 5 / span 1;
  126. grid-column: 1 / span 2;
  127. font-size: $font-small;
  128. }
  129. }
  130. }
  131. .js-pager__items{
  132. text-align: center;
  133. }
  134. }