Файловый менеджер - Редактировать - /home/digitalm/tendepavia/wp-content/themes/trydo/assets/scss/elements/_portfolio.scss
Назад
/*================== Portfolio Area ==================*/ .mesonry-list { margin: 0 -22px; .masonry_item { .portfolio-static { padding: 0 22px; } } &.grid-metro3 { .resizer { width: 33.33%; @media #{$md-layout} { width: 50%; } @media #{$sm-layout} { width: 100%; } } .portfolio-33-33 { width: 33.33%; @media #{$md-layout} { width: 50%; } @media #{$sm-layout} { width: 100%; } } &.grid-lg-6 { .resizer { width: 50%; @media #{$md-layout} { width: 50%; } @media #{$sm-layout} { width: 100%; } } .portfolio-33-33 { width: 50%; @media #{$md-layout} { width: 50%; } @media #{$sm-layout} { width: 100%; } } } &.grid-lg-4 { .resizer { width: 33.33%; @media #{$md-layout} { width: 50%; } @media #{$sm-layout} { width: 100%; } } .portfolio-33-33 { width: 33.33%; @media #{$md-layout} { width: 50%; } @media #{$sm-layout} { width: 100%; } } } &.grid-lg-3 { .resizer { width: 25%; @media #{$md-layout} { width: 50%; } @media #{$sm-layout} { width: 100%; } } .portfolio-33-33 { width: 25%; @media #{$md-layout} { width: 50%; } @media #{$sm-layout} { width: 100%; } } } &.grid-lg-12 { .resizer { width: 100%; @media #{$md-layout} { width: 100%; } @media #{$sm-layout} { width: 100%; } } .portfolio-33-33 { width: 100%; @media #{$md-layout} { width: 100%; } @media #{$sm-layout} { width: 100%; } } } } } .portfolio { position: relative; @extend %transition; min-height: 600px; width: 100%; padding-top: 35%; @media #{$laptop-device} { min-height: 500px; } @media #{$lg-layout} { min-height: 500px; } @media #{$md-layout} { min-height: 450px; } @media #{$sm-layout} { min-height: 400px; } .thumbnail-inner { transition: transform .28s ease; z-index: 9; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-size: cover; background-position: center; overflow: hidden; border-radius: 5px; &::before { background-color: #f6004c; background-image: linear-gradient(#f6004c 10%, #000000 100%); position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; opacity: 0; @extend %transition; } } .thumbnail { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-size: cover; background-position: center; border-radius: 5px; background-color: #0a0a0a; transform: scale(1.13) translateZ(0); backface-visibility: hidden; transition: transform .28s ease; z-index: 4; &::after { background-color: rgba(45, 45, 45, .35); position: absolute; top: 0; left: 0; height: 100%; width: 100%; content: ' '; z-index: 1; display: block; border-radius: 5px; background-color: rgba(25, 25, 25, .37); @extend %transition; } } .bg-blr-image { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-size: cover; background-position: center; background-color: #0a0a0a; @extend %transition; transform: translateY(38px); opacity: 0; z-index: 1; } .content { position: absolute; bottom: 40px; left: 40px; right: 40px; max-width: 100% !important; z-index: 10; padding: 0; @media #{$lg-layout} { left: 20px; right: 20px; } @media #{$md-layout} { left: 20px; right: 20px; } @media #{$sm-layout} { left: 15px; right: 15px; } .inner { p { color: #c6c9d8; font-size: 14px; line-height: 1.7; margin-bottom: 15px; } h4 { font-size: 24px; line-height: 36px; font-weight: 600; @media #{$sm-layout} { font-size: 20px; line-height: 32px; } a { color: #ffffff; } } .portfolio-button { @extend %transition; margin-top: 35px; transition: 0.7s; @media #{$sm-layout} { margin-top: 20px; } @media #{$large-mobile} { margin-top: 25px; } a { &.rn-btn { color: #ffffff; border-color: rgba(255, 255, 255, 0.3); &:hover { border-color: var(--color-primary); } } } } } } &.text-center { .content { position: absolute; bottom: 40px; left: 40px; max-width: 80% !important; z-index: 10; padding: 0; right: 40px; margin: 0 auto; @media #{$lg-layout} { left: 20px; right: 20px; } @media #{$md-layout} { left: 15px; right: 15px; } @media #{$sm-layout} { left: 10px; right: 10px; } } } &:hover { .thumbnail-inner { transform: scale(1.08) translateZ(0); &::before { opacity: 0.85; } } .thumbnail { transform: scale(1) translateZ(0); &::after { background-color: rgba(25, 25, 25, .24); } } .bg-blr-image { opacity: 0; z-index: 9; } } &.portfolio-style--2 { .inner { margin: 0 20px; } } } // Minimal Portfolio .portfolio-tilthover { .portfolio { margin-top: 30px; @media #{$sm-layout} { min-height: 400px; } @media #{$md-layout} { min-height: 400px; } @media #{$lg-layout} { min-height: 400px; } .thumbnail { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-size: cover; background-position: center; border-radius: 5px; background-color: #0a0a0a; transform: scale(1.13) translateZ(0); backface-visibility: hidden; transition: transform .28s ease; z-index: 4; @media #{$large-mobile} { transform: scale(1) translateZ(0); } &::after { display: none; } } .thumbnail-inner { @media #{$large-mobile} { transform: scale(1) translateZ(0); &::before { opacity: 0.85; } } } .bg-blr-image { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-size: cover; background-position: center; background-color: #0a0a0a; @extend %transition; transform: translateY(38px); opacity: 0; z-index: 1; @media #{$large-mobile} { opacity: 0; z-index: 9; } } .content { opacity: 0; @extend %transition; @media #{$large-mobile} { opacity: 1; } } &:hover { .content { opacity: 1; } .thumbnail-inner { transform: scale(1) translateZ(0); &::before { opacity: 0.85; } } .thumbnail { transform: scale(1) translateZ(0); &::after { background-color: rgba(25, 25, 25, .24); } } .bg-blr-image { opacity: 0; z-index: 9; } } } } /* Item Between Spacing */ .portfolio-slick-activation { &.item-fluid { &.slick-gutter-15 { .slick-list { margin-left: -200px; margin-right: -200px; @media #{$lg-layout} { margin-left: 30px; margin-right: 30px; } @media #{$md-layout} { margin-left: 30px; margin-right: 30px; } @media #{$sm-layout} { margin-left: 15px; margin-right: 15px; } } } } } .portfolio-sacousel-inner { .slick-list { margin-left: -200px; margin-right: -200px; @media #{$lg-layout} { margin-left: 30px; margin-right: 30px; } @media #{$md-layout} { margin-left: 30px; margin-right: 30px; } @media #{$sm-layout} { margin-left: 30px; margin-right: 30px; } } } .portfolio-sacousel-inner { .slick-slide { padding-left: 15px; padding-right: 15px; margin-bottom: -10px; } } .portfolio-sacousel-inner { .slick-list { overflow: visible; } } .portfolio-sacousel-inner, .rn-slick-dot { .slick-dots { bottom: -30px; @media #{$large-mobile} { bottom: -30px; } li { width: 30px; margin: 0; opacity: .35; position: relative; button { &::before { display: none; } &::after { background: #333; width: 100%; display: block; content: ''; position: absolute; left: 0; width: 6px; height: 6px; @extend %transition; border-radius: 50%; margin-left: 11px; background-color: transparent; box-shadow: inset 0 0 0 5px #000; } } &.slick-active { opacity: 1; button { &::after { -webkit-transform: scale(2); transform: scale(2); box-shadow: inset 0 0 0 1px var(--color-primary); background-color: transparent; background-color: transparent !important; } } } } } // Dot Light &.dot-light { .slick-dots { li { button { &::after { background: #ffffff; box-shadow: inset 0 0 0 5px #ffffff; } } &.slick-active { opacity: 1; button { &::after { -webkit-transform: scale(2); transform: scale(2); box-shadow: inset 0 0 0 1px var(--color-primary); background-color: transparent; background-color: transparent !important; } } } } } } } /* Slick Arrow Button */ .portfolio-slick-activation { position: relative; @media #{$sm-layout} { margin-left: -5px; margin-right: -5px; } button { &.slick-arrow { position: absolute; z-index: 3; background: transparent; font-size: 20px; width: 253px; height: 100%; @media #{$lg-layout} { width: 136px; } @media #{$md-layout} { width: 100px; } @media #{$sm-layout} { width: 100px; display: none !important; } &::before { line-height: 1; opacity: 0.75; font-size: 30px; position: relative; top: -14px; transition: 0.5s; } &.slick-prev { left: 0; background: -moz-linear-gradient(left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); background: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#00000000', GradientType=1); &::before { content: url(../images/icons/slick-arrow-left.png); } @media #{$md-layout} { display: none !important; } @media #{$lg-layout} { display: none !important; } @media #{$laptop-device} { display: none !important; } } &.slick-next { right: 0; background: -moz-linear-gradient(right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); background: -webkit-linear-gradient(right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#00000000', GradientType=1); &::before { content: url(../images/icons/slick-arrow-right.png); } @media #{$md-layout} { display: none !important; } @media #{$lg-layout} { display: none !important; } @media #{$laptop-device} { display: none !important; } } &:hover { &.slick-prev { padding-right: 50px; @media #{$md-layout} { padding-right: 10px; } @media #{$sm-layout} { padding-right: 10px; } } &.slick-next { padding-left: 50px; @media #{$md-layout} { padding-right: 10px; } @media #{$sm-layout} { padding-right: 10px; } } &::before { opacity: 1; } } } } &.layout-2 { button { &.slick-arrow { position: absolute; z-index: 3; background: transparent; font-size: 20px; width: auto; height: 40px; left: -60px; @media #{$lg-layout} { width: 136px; } @media #{$md-layout} { width: 100px; } @media #{$sm-layout} { width: 100px; display: none !important; } &::before { line-height: 1; opacity: 0.75; font-size: 30px; position: relative; transition: 0.5s; filter: invert(0.5); } &.slick-prev { &::before { content: url(../images/icons/slick-arrow-left.png); } @media #{$md-layout} { display: none !important; } @media #{$lg-layout} { display: none !important; } @media #{$laptop-device} { display: none !important; } } &.slick-next { left: auto; right: -60px; &::before { content: url(../images/icons/slick-arrow-right.png); } @media #{$md-layout} { display: none !important; } @media #{$lg-layout} { display: none !important; } @media #{$laptop-device} { display: none !important; } } &:hover { &.slick-prev { padding-right: 50px; @media #{$md-layout} { padding-right: 10px; } @media #{$sm-layout} { padding-right: 10px; } } &.slick-next { padding-left: 50px; @media #{$md-layout} { padding-right: 10px; } @media #{$sm-layout} { padding-right: 10px; } } &::before { opacity: 1; } } } } } } .rn-slick-activation { &.item-fluid { .slick-dots { bottom: -60px; } } } /* Slick Gutter Space */ .slick-space-gutter--15 { margin-left: -15px; margin-right: -15px; .slick-slide { padding-left: 15px; padding-right: 15px; } .portfolio { margin: 40px 0; } } .slickdot--20 { .slick-dots { bottom: -20px; } } /*----------------------------- Portfolio Style Three --------------------------------*/ .portfolio-style--3 { position: relative; margin-bottom: 40px; @extend %transition; overflow: hidden; border-radius: 6px; .thumbnail { a { display: block; position: relative; z-index: 1; img { @extend %transition; } &::after { background: linear-gradient(to bottom, #fc004d 0, #000000 100%); position: absolute; left: 0; right: 0; width: 100%; height: 100%; content: ""; z-index: 1; opacity: 0; @extend %transition; @media #{$large-mobile} { opacity: 0.85; top: 0; } } } } .content { position: absolute; bottom: -92px; width: 100%; padding: 50px 35px; z-index: 3; @extend %transition; @media #{$large-mobile} { bottom: 0; } @media #{$large-mobile} { padding: 30px 20px; } &::before { position: absolute; content: ""; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 0, #000000 70%); left: 0; top: 0; width: 100%; height: 100%; opacity: 1; @extend %transition; z-index: -1; @media #{$large-mobile} { opacity: 0; } } p { &.portfoliotype { font-size: 14px; margin-bottom: 5px; color: #c6c9d8; } } h4 { &.title { margin-bottom: 0; a { color: #ffffff; font-size: 24px; font-weight: 500; line-height: 36px; @extend %transition; @media #{$sm-layout} { font-size: 18px; line-height: 29px; } } } } .portfolio-btn { @extend %transition; margin-top: 35px; transition: 0.7s; opacity: 0; visibility: hidden; @media #{$large-mobile} { margin-top: 22px; } @media #{$large-mobile} { opacity: 1; visibility: visible; } } } &:hover { .content { bottom: 0; &::before { opacity: 0; } } .thumbnail { a { img { transform: scale(1.1); } &::before { opacity: 0; } &::after { opacity: 0.85; top: 0; } } } .content { .portfolio-btn { opacity: 1; visibility: visible; } } } } .row--5 { .portfolio-style--3 { margin-bottom: 10px; } } /*-------------------------- Portfolio Style Static -----------------------------*/ a { &.item-portfolio-static { transition: inherit; } } .item-portfolio-static { margin-top: 60px; margin-bottom: 0; @media #{$sm-layout} { margin-top: 30px; } @media #{$md-layout} { margin-top: 30px; } .inner { padding-top: 20px; p { margin-bottom: 5px; font-size: 16px; color: var(--color-heading); transition: 0.3s; &:hover { color: var(--color-primary); } } .gallery-title { color: var(--color-heading); transition: 0.3s; margin-bottom: 0; &:hover { color: var(--color-primary); } } } .thumbnail { img { transition: 0.3s; width: 100%; border-radius: 5px; box-shadow: 0 25px 65px rgba(0, 0, 0, 0.1); } } &:hover { .thumbnail { img { box-shadow: 0 50px 80px -10px rgba(0, 0, 0, 0.17); transform: translate3d(0, -10px, 0); } } } } .portfolio-content-wrap-row { &.row--5 { margin-top: -10px; } }
| ver. 1.4 |
Github
|
.
| PHP 8.3.23 | Генерация страницы: 0.03 |
proxy
|
phpinfo
|
Настройка