Spade
Mini Shell
| Directory:~$ /home/lmsyaran/public_html/j3/templates/g5_hydrogen/custom/scss/ |
| [Home] [System Details] [Kill Me] |
// 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;
}
}
}
}