Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- .resource_slider {
- $parent: &;
- display: flex;
- flex-direction: column;
- padding: 0;
- // Global
- &__item {
- height: 100%;
- @include breakpoint(md) {
- padding-top: 80px;
- }
- }
- &__meta {
- font-size: 14px;
- line-height: 20px;
- text-transform: uppercase;
- letter-spacing: 0.2em;
- font-weight: 600;
- }
- &__title {
- text-transform: capitalize;
- }
- // Slider Content
- &__content {
- #{$parent}__item {
- overflow: hidden;
- position: relative;
- display: flex!important;
- align-items: center;
- min-height: 660px;
- background-color: $secondary__color;
- background-size: cover!important;
- .container {
- display: flex;
- align-items: center;
- }
- @include breakpoint(md) {
- align-items: flex-end;
- background: linear-gradient(57deg, #08386F 39.83%, #ACE2E4 154.63%)!important;
- .container {
- flex-wrap: wrap;
- }
- }
- }
- #{$parent}__meta,
- #{$parent}__title,
- #{$parent}__excerpt,
- a[class^="button-"] {
- position: relative;
- z-index: 10;
- }
- #{$parent}__meta {
- color: $primary__color;
- margin-bottom: 10px;
- }
- #{$parent}__title {
- font-size: 48px;
- color: $primary__color;
- margin-bottom: 20px;
- &::first-line {
- color: $white;
- }
- }
- #{$parent}__excerpt {
- color: $primary__color;
- font-size: 18px;
- line-height: 28px;
- margin-bottom: 25px;
- }
- #{$parent}__feat-img {
- pointer-events: none;
- position: relative;
- img {
- aspect-ratio: 1 / 1;
- border-radius: 100%;
- object-fit: cover;
- min-height: 480px;
- max-width: 100%;
- margin: 0 auto;
- position: relative;
- }
- &:before {
- content: '';
- background: url('../../images/circle-style.png') center/contain no-repeat;
- width: 120%;
- height: 120%;
- position: absolute;
- top: 50%;
- left: 50%;
- z-index: 0;
- transform: translate(-50%,-50%);
- pointer-events: none;
- }
- @include breakpoint(md) {
- margin-top: 30px;
- margin-bottom: 85px;
- width: 100%;
- }
- @include breakpoint(xs) {
- img {
- min-height: 0;
- }
- }
- }
- }
- // Slider Control
- &__control {
- margin: -52px 2px 2px;
- position: relative;
- display: inline-block;
- display: flex;
- justify-content: flex-end;
- align-items: center;
- #{$parent}__info {
- color: $secondary__color;
- font-size: 16px;
- line-height: 20px;
- letter-spacing: 0.2em;
- font-weight: 500;
- margin-right: 12px;
- @include breakpoint(md) {
- color: $white;
- }
- }
- #{$parent}__arrow {
- display: flex;
- gap: 2px;
- .prev, .next {
- display: inline-block;
- width: 50px;
- height: 50px;
- background-color: #fff;
- &:hover {
- cursor: pointer;
- }
- }
- .prev {
- background: $white url('../../images/slider-left-arrow.png') center no-repeat;
- }
- .next {
- background: $white url('../../images/slider-right-arrow.png') center no-repeat;
- }
- }
- }
- // Slider Navigation
- &__nav {
- #{$parent}__item {
- background-color: $blue2;
- padding: 40px;
- display: block;
- &:hover {
- cursor: pointer;
- background-color: $white;
- }
- }
- #{$parent}__meta {
- font-weight: 700;
- color: $secondary__color;
- margin-bottom: 8px;
- }
- #{$parent}__num {
- color: rgba($secondary__color, 0.2);
- }
- #{$parent}__title,
- #{$parent}__excerpt {
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- }
- #{$parent}__title {
- font-size: 24px!important;
- line-height: 28px!important;
- color: #333;
- font-weight: 500;
- }
- #{$parent}__excerpt {
- font-size: 14px;
- line-height: 24px;
- color: #717171;
- margin-bottom: 0;
- }
- @include breakpoint(md) {
- #{$parent}__title {
- margin-bottom: 0!important;
- }
- #{$parent}__excerpt {
- display: none;
- }
- }
- .slick-slide {
- &:not(:last-child) {
- border-right: 1px solid #DEE2EB;
- }
- }
- .slick-current {
- #{$parent}__item {
- position: relative;
- background-color: $white;
- &:before {
- content: '';
- width: 0;
- height: 0;
- border-left: 13px solid transparent;
- border-right: 13px solid transparent;
- border-top: 10px solid $secondary__color;
- position: absolute;
- top: -1px;
- left: 50%;
- transform: translateX(-50%);
- }
- }
- #{$parent}__num {
- color: $secondary__color;
- }
- }
- }
- &--circled {
- #{$parent}__content {
- #{$parent}__feat-img {
- @media screen and (min-width: 1081px) {
- position: initial;
- &:before {
- display: none;
- }
- &:after {
- content: '';
- background: url('../../images/img-style.png') calc(100% + 100px) 50%/contain no-repeat;
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- right: 0;
- z-index: 0;
- pointer-events: none;
- }
- img {
- position: absolute;
- width: 837px;
- height: 837px;
- right: -715px;
- top: 50%;
- max-width: none;
- transform: translate(-50%, -50%);
- }
- }
- }
- }
- }
- // Slick
- .slick-slide {
- @include breakpoint(md) {
- & > div {
- height: 100%;
- }
- }
- }
- .slide-for {
- flex-grow: 1;
- }
- .slick-list,
- .slick-track,
- .slick-slide {
- height: 100%;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement