Advertisement
MikkoDC

resource__slider

Mar 4th, 2024
9
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.21 KB | None | 0 0
  1. .resource_slider {
  2. $parent: &;
  3.  
  4. display: flex;
  5. flex-direction: column;
  6. padding: 0;
  7.  
  8. // Global
  9. &__item {
  10. height: 100%;
  11.  
  12. @include breakpoint(md) {
  13. padding-top: 80px;
  14. }
  15. }
  16.  
  17. &__meta {
  18. font-size: 14px;
  19. line-height: 20px;
  20. text-transform: uppercase;
  21. letter-spacing: 0.2em;
  22. font-weight: 600;
  23. }
  24.  
  25. &__title {
  26. text-transform: capitalize;
  27. }
  28.  
  29. // Slider Content
  30. &__content {
  31.  
  32. #{$parent}__item {
  33. overflow: hidden;
  34. position: relative;
  35. display: flex!important;
  36. align-items: center;
  37. min-height: 660px;
  38. background-color: $secondary__color;
  39. background-size: cover!important;
  40.  
  41. .container {
  42. display: flex;
  43. align-items: center;
  44. }
  45.  
  46. @include breakpoint(md) {
  47. align-items: flex-end;
  48. background: linear-gradient(57deg, #08386F 39.83%, #ACE2E4 154.63%)!important;
  49.  
  50. .container {
  51. flex-wrap: wrap;
  52. }
  53. }
  54. }
  55.  
  56. #{$parent}__meta,
  57. #{$parent}__title,
  58. #{$parent}__excerpt,
  59. a[class^="button-"] {
  60. position: relative;
  61. z-index: 10;
  62. }
  63.  
  64. #{$parent}__meta {
  65. color: $primary__color;
  66. margin-bottom: 10px;
  67. }
  68.  
  69. #{$parent}__title {
  70. font-size: 48px;
  71. color: $primary__color;
  72. margin-bottom: 20px;
  73.  
  74. &::first-line {
  75. color: $white;
  76. }
  77. }
  78.  
  79. #{$parent}__excerpt {
  80. color: $primary__color;
  81. font-size: 18px;
  82. line-height: 28px;
  83. margin-bottom: 25px;
  84. }
  85.  
  86. #{$parent}__feat-img {
  87. pointer-events: none;
  88. position: relative;
  89.  
  90. img {
  91. aspect-ratio: 1 / 1;
  92. border-radius: 100%;
  93. object-fit: cover;
  94. min-height: 480px;
  95. max-width: 100%;
  96. margin: 0 auto;
  97. position: relative;
  98. }
  99.  
  100. &:before {
  101. content: '';
  102. background: url('../../images/circle-style.png') center/contain no-repeat;
  103. width: 120%;
  104. height: 120%;
  105. position: absolute;
  106. top: 50%;
  107. left: 50%;
  108. z-index: 0;
  109. transform: translate(-50%,-50%);
  110. pointer-events: none;
  111. }
  112.  
  113. @include breakpoint(md) {
  114. margin-top: 30px;
  115. margin-bottom: 85px;
  116. width: 100%;
  117. }
  118.  
  119. @include breakpoint(xs) {
  120. img {
  121. min-height: 0;
  122. }
  123. }
  124. }
  125. }
  126.  
  127. // Slider Control
  128. &__control {
  129. margin: -52px 2px 2px;
  130. position: relative;
  131. display: inline-block;
  132. display: flex;
  133. justify-content: flex-end;
  134. align-items: center;
  135.  
  136. #{$parent}__info {
  137. color: $secondary__color;
  138. font-size: 16px;
  139. line-height: 20px;
  140. letter-spacing: 0.2em;
  141. font-weight: 500;
  142. margin-right: 12px;
  143.  
  144. @include breakpoint(md) {
  145. color: $white;
  146. }
  147. }
  148.  
  149. #{$parent}__arrow {
  150. display: flex;
  151. gap: 2px;
  152.  
  153. .prev, .next {
  154. display: inline-block;
  155. width: 50px;
  156. height: 50px;
  157. background-color: #fff;
  158.  
  159. &:hover {
  160. cursor: pointer;
  161. }
  162. }
  163.  
  164. .prev {
  165. background: $white url('../../images/slider-left-arrow.png') center no-repeat;
  166. }
  167.  
  168. .next {
  169. background: $white url('../../images/slider-right-arrow.png') center no-repeat;
  170. }
  171. }
  172. }
  173.  
  174. // Slider Navigation
  175. &__nav {
  176. #{$parent}__item {
  177. background-color: $blue2;
  178. padding: 40px;
  179. display: block;
  180.  
  181. &:hover {
  182. cursor: pointer;
  183. background-color: $white;
  184. }
  185. }
  186.  
  187. #{$parent}__meta {
  188. font-weight: 700;
  189. color: $secondary__color;
  190. margin-bottom: 8px;
  191. }
  192.  
  193. #{$parent}__num {
  194. color: rgba($secondary__color, 0.2);
  195. }
  196.  
  197. #{$parent}__title,
  198. #{$parent}__excerpt {
  199. overflow: hidden;
  200. text-overflow: ellipsis;
  201. display: -webkit-box;
  202. -webkit-line-clamp: 2;
  203. -webkit-box-orient: vertical;
  204. }
  205.  
  206. #{$parent}__title {
  207. font-size: 24px!important;
  208. line-height: 28px!important;
  209. color: #333;
  210. font-weight: 500;
  211. }
  212.  
  213. #{$parent}__excerpt {
  214. font-size: 14px;
  215. line-height: 24px;
  216. color: #717171;
  217. margin-bottom: 0;
  218. }
  219.  
  220. @include breakpoint(md) {
  221.  
  222. #{$parent}__title {
  223. margin-bottom: 0!important;
  224. }
  225.  
  226. #{$parent}__excerpt {
  227. display: none;
  228. }
  229. }
  230.  
  231. .slick-slide {
  232.  
  233. &:not(:last-child) {
  234. border-right: 1px solid #DEE2EB;
  235. }
  236.  
  237. }
  238.  
  239. .slick-current {
  240. #{$parent}__item {
  241. position: relative;
  242. background-color: $white;
  243.  
  244. &:before {
  245. content: '';
  246. width: 0;
  247. height: 0;
  248. border-left: 13px solid transparent;
  249. border-right: 13px solid transparent;
  250.  
  251. border-top: 10px solid $secondary__color;
  252. position: absolute;
  253. top: -1px;
  254. left: 50%;
  255. transform: translateX(-50%);
  256. }
  257. }
  258.  
  259. #{$parent}__num {
  260. color: $secondary__color;
  261. }
  262. }
  263. }
  264.  
  265. &--circled {
  266. #{$parent}__content {
  267. #{$parent}__feat-img {
  268. @media screen and (min-width: 1081px) {
  269. position: initial;
  270. &:before {
  271. display: none;
  272. }
  273. &:after {
  274. content: '';
  275. background: url('../../images/img-style.png') calc(100% + 100px) 50%/contain no-repeat;
  276. width: 100%;
  277. height: 100%;
  278. position: absolute;
  279. top: 0;
  280. right: 0;
  281. z-index: 0;
  282. pointer-events: none;
  283. }
  284.  
  285. img {
  286. position: absolute;
  287. width: 837px;
  288. height: 837px;
  289. right: -715px;
  290. top: 50%;
  291. max-width: none;
  292. transform: translate(-50%, -50%);
  293. }
  294. }
  295. }
  296. }
  297. }
  298.  
  299. // Slick
  300. .slick-slide {
  301. @include breakpoint(md) {
  302. & > div {
  303. height: 100%;
  304. }
  305. }
  306. }
  307.  
  308. .slide-for {
  309. flex-grow: 1;
  310. }
  311.  
  312. .slick-list,
  313. .slick-track,
  314. .slick-slide {
  315. height: 100%;
  316. }
  317. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement