slides.scss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  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-views-block-slide-programme-block-1,
  14. #block-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: 'truenolight';
  44. position: absolute;
  45. top: -2.5rem;
  46. width: max-content;
  47. font-size: 1.2rem;
  48. line-height: 1.2;
  49. }
  50. &:not(:first-child){
  51. &::before{
  52. position: absolute;
  53. display: block;
  54. content: " ";
  55. width: 1px;
  56. height: calc(100% + 3rem);
  57. margin: -2.5rem 0 0 0;
  58. background: $color1;
  59. left: -0.5rem;
  60. top: 0;
  61. }
  62. }
  63. }
  64. }
  65. }
  66. }
  67. #block-views-block-gallerie-block-1,
  68. #block-views-block-slide-programme-block-1,
  69. #block-views-block-slide-programme-node-intervenant-block-1,
  70. #block-views-block-dernieres-publications-block-1{
  71. section:not(.wrap_head){
  72. margin: 1rem 0;
  73. }
  74. .views{
  75. section.wrap_head{
  76. @include croix_or;
  77. .head{
  78. display: block;
  79. }
  80. }
  81. }
  82. @media screen and (min-width: 576px) {
  83. .views{
  84. section{
  85. .head{
  86. display: flex!important;
  87. width: 100%;
  88. justify-content: space-between;
  89. align-items: center;
  90. }
  91. }
  92. }
  93. }
  94. }
  95. .paragraph--type--role-de-l-intervenant{
  96. margin-bottom: 2rem;
  97. .__slide{
  98. &:after {
  99. content: 'flickity';
  100. display: none;
  101. @media screen and ( min-width: 768px ) {
  102. content: '';
  103. }
  104. }
  105. .flickity-viewport{
  106. // overflow: initial;
  107. }
  108. .flickity-slider > div{
  109. width: 70%;
  110. padding: 0 0.5rem;
  111. @media screen and ( min-width: 768px ) {
  112. width: 100%;
  113. }
  114. }
  115. }
  116. }