slides.scss 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. .flickity-button {
  2. background: transparent;
  3. &:hover {
  4. background: transparent;
  5. }
  6. }
  7. .flickity-button-icon {
  8. fill: $col_black;
  9. }
  10. .flickity-button:disabled {
  11. display: none;
  12. }
  13. #block-colloque2024-views-block-slide-programme-block-1,
  14. #block-colloque2024-views-block-slide-programme-node-intervenant-block-1 {
  15. .__slide {
  16. article {
  17. width: calc(100% - 30px);
  18. height: 325px;
  19. // background: none;
  20. display: flex;
  21. flex-direction: column;
  22. margin: 3rem $gutter 1.5rem $gutter;
  23. @media screen and (min-width: 768px) {
  24. width: calc(100% / 2 - #{$gutter} * 2);
  25. }
  26. @media screen and (min-width: 992px) {
  27. width: calc(100% / 3 - #{$gutter} * 2);
  28. }
  29. @media screen and (min-width: 1200px) {
  30. width: calc(100% / 4 - #{$gutter} * 2);
  31. }
  32. a {
  33. width: 100%;
  34. height: 100%;
  35. background: white;
  36. @include shadow;
  37. .__wrap {
  38. background: white;
  39. }
  40. }
  41. &.first {
  42. & > span {
  43. font-family: "Mariannelight";
  44. position: absolute;
  45. top: -2.5rem;
  46. width: max-content;
  47. font-size: 1.2rem;
  48. line-height: 1.2;
  49. text-transform: uppercase;
  50. }
  51. &:not(:first-child) {
  52. &::before {
  53. position: absolute;
  54. display: block;
  55. content: " ";
  56. width: 1px;
  57. height: calc(100% + 3rem);
  58. margin: -2.5rem 0 0 0;
  59. background: $color1;
  60. left: -0.5rem;
  61. top: 0;
  62. }
  63. }
  64. }
  65. }
  66. }
  67. }
  68. #block-colloque2024-views-block-gallerie-block-1,
  69. #block-colloque2024-views-block-slide-programme-block-1,
  70. #block-colloque2024-views-block-slide-programme-node-intervenant-block-1,
  71. #block-colloque2024-views-block-dernieres-publications-block-1,
  72. #block-colloque2024-views-block-slide-interviews-block-1 {
  73. section:not(.wrap_head) {
  74. margin: 1rem 0;
  75. }
  76. .views {
  77. section.wrap_head {
  78. // @include croix_or;
  79. .head {
  80. display: flex;
  81. flex-direction: row;
  82. align-items: center;
  83. position: relative;
  84. .custom-line {
  85. flex: 1; /* Pour étendre le trait sur toute la largeur disponible */
  86. border: none;
  87. border-top: 1px solid #000; /* Couleur et style de la ligne */
  88. margin: 10px 0; /* Marge supérieure et inférieure pour l'espacement */
  89. }
  90. h3{
  91. // &:after{
  92. // content:url(../images/path1.svg);
  93. // max-width: fit-content;
  94. // }
  95. }
  96. }
  97. .head::after {
  98. content: "";
  99. position: absolute;
  100. bottom: 0;
  101. left: 0;
  102. width: 100%; /* Étendre la ligne sur toute la largeur */
  103. border-bottom: 1px solid #000; /* Couleur et style de la ligne */
  104. }
  105. }
  106. }
  107. @media screen and (min-width: 576px) {
  108. .views {
  109. section {
  110. .head {
  111. display: flex !important;
  112. width: 100%;
  113. justify-content: space-between;
  114. align-items: center;
  115. }
  116. }
  117. }
  118. }
  119. }
  120. .paragraph--type--role-de-l-intervenant {
  121. margin-bottom: 2rem;
  122. .__slide {
  123. &:after {
  124. content: "flickity";
  125. display: none;
  126. @media screen and (min-width: 768px) {
  127. content: "";
  128. }
  129. }
  130. .flickity-viewport {
  131. // overflow: initial;
  132. }
  133. .flickity-slider > div {
  134. width: 70%;
  135. padding: 0 0.5rem;
  136. @media screen and (min-width: 768px) {
  137. width: 100%;
  138. }
  139. }
  140. }
  141. }
  142. .flickity-slider {
  143. position: absolute;
  144. // width: 300px;
  145. height: 100%;
  146. margin-left: 10px;
  147. &:hover{
  148. // border: solid 1px black;
  149. }
  150. }