Файловый менеджер - Редактировать - /home/lmsyaran/public_html/templates/g5_hydrogen/custom/scss/_timeline.scss
Назад
// Set the variable defaults in case they are missing in the template $base-title-color: #4d4d4d !default; .g-timeline { &.style1 { margin-left: -($content-padding); margin-right: -($content-padding); .g-content { margin: 0; padding-top: 0; padding-bottom: 0; } .g-timeline-row { width: 100%; height: 10px; margin-top: 3.5rem; margin-bottom: -15px; background: $base-border-color; @include border-right-radius($core-border-radius); @include border-left-radius($core-border-radius); &:before { content:""; width: 30px; height:30px; display: block; position: absolute; background: $base-border-color; border-radius: 100%; margin-top: -10px; } &:after { content:""; width: 30px; height:30px; display: inline-block; background: $base-border-color; border-radius: 100%; margin-top: -10px; margin-left: -30px; position: relative; float: right; } @include breakpoint(mobile-only) { display: none; } } .g-timeline-item { text-align: center; @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { margin-top: -25px; } @supports (-webkit-appearance:none) { margin-top: -25px; } .g-content { .g-timeline-icon { width: 60px; height: 60px; border-radius: 100%; line-height: 60px; font-size: 1.5rem; margin-top: -35px; &:after { content:""; display: block; width: 1px; height: 4rem; background: $base-border-color; margin: 0 auto; } } .g-timeline-year { color: $base-border-color !important; position: relative; margin: 1.25rem 0 1.5rem -2rem; min-height: 1.4rem; font-size: 1rem; @include transform(rotate(-90deg)); } .g-timeline-title { color: $base-title-color !important; margin-top: 1rem; margin-bottom: 0; text-transform: uppercase; font-size: 1rem; a { color: $base-title-color; &:hover { color: $accent-color-1; } } } .g-timeline-description { margin: 0; } .g-timeline-button { margin-top: 20px; } } @include breakpoint(mobile-only) { margin-top: 1rem; margin-bottom: 3rem; &:last-child { margin-bottom: 0; } } } } &.style2 { #g-timeline { position: relative; padding: 35px 0; &:before { /* this is the vertical line */ content: ''; position: absolute; top: 0; left: 18px; height: 100%; width: 4px; background: $base-border-color; } @include breakpoint(desktop-only) { &:before { left: 50%; margin-left: -2px; } } } .g-timeline-block { position: relative; margin: 30px 0; @include clearfix; &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } @include breakpoint(desktop-only) { margin: 60px 0; &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } } .g-timeline-icon-container { position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; text-align: center; line-height: 40px; font-size: 20px; box-shadow: 0 0 0 4px #ffffff, inset 0 2px 0 rgba(#000, .08), 0 3px 0 4px rgba(#000, .05) ; @include breakpoint(desktop-only) { width: 60px; height: 60px; line-height: 60px; font-size: 24px; left: 50%; margin-left: -30px; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; &.is-hidden { visibility: hidden; } &.bounce-in { visibility: visible; @include animation(g-bounce-1 .6s); } } } @include keyframes(g-bounce-1) { 0% { opacity: 0; @include transform(scale(.5)); } 60% { opacity: 1; @include transform(scale(1.2)); } 100% { @include transform(scale(1)); } } .g-timeline-content { position: relative; margin-left: 60px; background: #ffffff; border-radius: $core-border-radius; padding: 20px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07); @include clearfix; .g-timeline-title { margin-top: -5px; margin-bottom: 15px; a { color: $base-title-color; &:hover { color: $accent-color-1; } } } .g-timeline-year { display: inline-block; } .g-timeline-year { float: left; padding: 13px 0; opacity: 0.7; } &:before { content: ''; position: absolute; top: 16px; right: 100%; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #ffffff; } .g-timeline-button { margin-top: 25px; @include breakpoint(mobile-only) { margin-bottom: 10px; } @include breakpoint(tablet-range) { margin-bottom: 10px; } } @include breakpoint(desktop-only) { margin-left: 0; padding: 25px; width: 45%; &:before { top: 24px; left: 100%; border-color: transparent; border-left-color: #ffffff; } .g-timeline-year { position: absolute; width: 100%; left: 122%; top: 6px; font-size: 1rem; } &.is-hidden { visibility: hidden; } &.bounce-in { visibility: visible; @include animation(g-bounce-2 .6s); } } } .g-timeline-block:nth-child(even) { .g-timeline-content { float: right; &:before { left: auto; right: 100%; border-color: transparent; border-right-color: #ffffff; } .g-timeline-year { left: auto; right: 122%; text-align: right; } } } @include breakpoint(desktop-only) { /* inverse bounce effect on even content blocks */ .g-timeline-block:nth-child(even) .g-timeline-content.bounce-in { @include animation(g-bounce-2-inverse .6s); } } @include keyframes(g-bounce-2) { 0% { opacity: 0; @include transform(translateX(-100px)); } 60% { opacity: 1; @include transform(translateX(20px)); } 100% { @include transform(translateX(0)); } } @include keyframes(g-bounce-2-inverse) { 0% { opacity: 0; @include transform(translateX(100px)); } 60% { opacity: 1; @include transform(translateX(-20px)); } 100% { @include transform(translateX(0)); } } } }
| ver. 1.4 |
Github
|
.
| PHP 8.1.33 | Генерация страницы: 0.07 |
proxy
|
phpinfo
|
Настройка