Файловый менеджер - Редактировать - /home/lmsyaran/public_html/templates/g5_hydrogen/custom/scss/_features-particle.scss
Назад
// Set the variable defaults in case they are missing in the template $base-title-color: #4d4d4d !default; // The code base was refactored but we need to keep the markup (.g-features-particle and .g-features2-particle) separated for backward compatibility. // All Styles .g-features-particle, .g-features2-particle { margin-left: -($content-padding); margin-right: -($content-padding); .g-grid { margin-bottom: ($content-padding + $content-margin)*1.5; &:last-child { margin-bottom: 0; .g-features-particle-item { &:last-child { @include breakpoint(mobile-only) { margin-bottom: 0; } } } } @include breakpoint(mobile-only) { margin-bottom: 0; } } .g-features-particle-item, .g-features2-particle-item { @include breakpoint(mobile-only) { margin-bottom: ($content-margin + $content-padding)*1.5; } } .size-33 { @include flex(0 33.3333%); width: 33.3333%; @include breakpoint(mobile-only) { @include flex(0 100%); width: 100%; } } .size-16 { @include flex(0 16.6666%); width: 16.6666%; @include breakpoint(mobile-only) { @include flex(0 100%); width: 100%; } } .g-content { margin: 0; padding-top: 0; padding-bottom: 0; } p { margin: 0; } .g-features-particle-button, .g-features-particle-subs { margin-top: 20px; } } // Style 1, 6, 7 and 8 .g-features-particle { text-align: center; .g-features-particle-title { margin-top: 0.75rem; margin-bottom: 1rem; a { color: $base-title-color; &:hover { color: $accent-color-1; } } } .g-features-particle-icon, .g-circle-border { border-radius: 50%; font-size: 2rem; height: 100px; width: 100px; line-height: 100px; text-align: center; vertical-align: middle; margin-bottom: 0.75rem; color: $accent-color-1; position: relative; display: inline-block; @include transition(all 0.2s linear 0s); } .g-circle-border { background: transparent none repeat scroll 0 0; border: 1px solid $base-border-color; height: 98px; width: 98px; left: 1px; top: 1px; z-index: 1; position: absolute; @include transition-timing-function(cubic-bezier(0.5, -0.7, 0.67, 0.7)); } .g-features-particle-image { margin-bottom: 0.75rem; display: inline-block; } .g-features-particle-item { .g-content { &:hover { .g-features-particle-icon { color: #ffffff; background: $accent-color-1; } .g-circle-border { border-color: $accent-color-1; @include transform(scale(1.18)); @include transition-timing-function(cubic-bezier(0.4, 0.25, 0.14, 1.73)); } } } } &.style6 { .g-grid { margin-bottom: $content-padding*2; .g-block { padding: 0 $content-padding; } &:last-child { margin-bottom: 0; .g-features-particle-item { &:last-child { @include breakpoint(mobile-only) { margin-bottom: 0; } } } } @include breakpoint(mobile-only) { margin-bottom: 0; } } .g-features-particle-item { @include breakpoint(mobile-only) { margin-bottom: $content-padding*2; } } .g-content { padding: 3rem 2.5rem; background: #ffffff; border: 1px solid $base-border-color; } .g-features-particle-icon, .g-features-particle-image { margin-bottom: 1.25rem; } .g-features-particle-title { margin-bottom: 1.5rem; } .g-features-particle-button, .g-features-particle-subs { margin-top: 30px; } .g-subs-item { padding: 10px 0; border-bottom: 1px solid $base-border-color; &:last-child { border-bottom: none; } } } &.style7 { .g-grid { margin-bottom: $content-padding*2; .g-block { padding: 0 $content-padding; } &:last-child { margin-bottom: 0; .g-features-particle-item { &:last-child { @include breakpoint(mobile-only) { margin-bottom: 0; } } } } @include breakpoint(mobile-only) { margin-bottom: 0; } } .g-features-particle-item { margin-top: 40px; @include breakpoint(mobile-only) { margin-bottom: $content-padding*2; } } .g-content { padding: 25px; background: #ffffff; border: 1px solid $base-border-color; @include transition(all 0.3s); &:hover { border-color: $accent-color-2; .g-features-particle-icon { background: $accent-color-2 } } } .g-features-particle-item-inner { margin-top: -64px; } .g-features-particle-icon, .g-features-particle-image { margin-bottom: 1.25rem; .g-circle-border { display: none; } } .g-features-particle-icon { width: 75px; height: 75px; line-height: 75px; border-radius: 0; background: $accent-color-1; color: #ffffff; font-size: 24px; @include transition(all 0.3s); } .g-features-particle-title { margin-bottom: 1rem; text-transform: uppercase; } .g-features-particle-button, .g-features-particle-subs { margin-top: 30px; } .g-subs-item { padding: 10px 0; border-bottom: 1px solid $base-border-color; &:last-child { border-bottom: none; } } } &.style8 { margin-left: 0; margin-right: 0; color: #ffffff; text-align: left; .g-grid { margin-bottom: 0; &:last-child { .g-features-particle-item { box-shadow: -20px 0 20px -20px rgba(0, 0, 0, 0.07) inset; @include breakpoint(mobile-only) { box-shadow: 0 -20px 20px -20px rgba(0, 0, 0, 0.07) inset; } &:last-child { box-shadow: 0 0 20px -20px rgba(0, 0, 0, 0.07) inset; } } } } .g-features-particle-item { padding: 35px 30px 40px; box-shadow: -20px -20px 20px -20px rgba(0, 0, 0, 0.07) inset; &:nth-child(1) { background: darken($accent-color-1, 8%); } &:nth-child(2) { background: darken($accent-color-1, 4%); } &:nth-child(3) { background: $accent-color-1; } &:nth-child(4) { background: lighten($accent-color-1, 4%); } &:nth-child(5) { background: lighten($accent-color-1, 8%); } &:nth-child(6) { background: lighten($accent-color-1, 12%); } &:last-child { box-shadow: 0 -20px 20px -20px rgba(0, 0, 0, 0.07) inset; } @include breakpoint(mobile-only) { box-shadow: 0 -20px 20px -20px rgba(0, 0, 0, 0.07) inset; margin-bottom: 0; } } .g-features-particle-icon, .g-features-particle-image { margin-bottom: 10px; color: #ffffff; border-radius: 0; width: auto; height: auto; line-height: inherit; font-size: 40px; .g-circle-border { display: none; } } .g-features-particle-title { color: #ffffff !important; font-size: 1.35rem; a { color: #ffffff; &:hover { text-decoration: underline; } } } .g-features-particle-desc, .g-features-particle-subs { opacity: 0.85; } .g-features-particle-button { margin-top: 25px; .button { background: none; border: 2px solid #ffffff; color: #ffffff; border-radius: 50px; @include transition(all 0.2s); &:hover { background: $base-title-color; border-color: $base-title-color; } } } &.pull-up { margin-top: -7.5rem; position: relative; z-index: 4; } } } // Style 2, 3, 4 and 5 .g-features2-particle { .g-features2-particle-title { margin-top: 0; margin-bottom: 1rem; a { color: $base-title-color; &:hover { color: $accent-color-1; } } } .g-features2-particle-icon { margin-right: 20px; color: $accent-color-1; font-size: 130%; } .g-features2-particle-image { margin-right: 20px; display: inline-block; } &.style3 { .g-grid { .g-block { padding: 0 1rem; } } .g-content { padding-top: 1rem; padding-bottom: 1rem; background: rgba(0,0,0,0.2); &:after { content: ""; width: 0; height: 0; border-top: 15px solid rgba(0,0,0,0.2); border-right: 15px solid transparent; position: absolute; margin-top: 16px; margin-left: -15px; z-index: 99; } } } &.style4 { .g-features2-particle-icon { float: left; font-size: 55px; margin-right: 0; color: lighten($base-text-color, 15%); } .g-features2-particle-image { float: left; margin: 5px 0 0; max-width: 60px; } .g-title-desc-container { margin-left: 75px; } .g-features2-particle-title { margin-bottom: 10px; } .accent1 { .g-features2-particle-icon { color: $accent-color-1; } } .accent2 { .g-features2-particle-icon { color: $accent-color-2; } } } &.style5 { .g-features2-particle-icon { float: left; font-size: 24px; margin-right: 0; color: lighten($base-text-color, 10%); width: 60px; height: 60px; line-height: 60px; text-align: center; margin-top: 5px; border: 1px solid; border-radius: 50%; } .g-features2-particle-image { float: left; margin: 5px 0 0; width: 60px; height: 60px; img { border-radius: 50%; width: 60px; height: 60px; } } .g-title-desc-container { margin-left: 75px; } .g-features2-particle-title { margin-bottom: 10px; } .accent1 { .g-features2-particle-icon { color: $accent-color-1; } } .accent2 { .g-features2-particle-icon { color: $accent-color-2; } } } }
| ver. 1.4 |
Github
|
.
| PHP 8.1.33 | Генерация страницы: 0.01 |
proxy
|
phpinfo
|
Настройка