File: /var/www/html/wpamazingsecret/wp-content/themes/porto/scss/theme/gui/_featured-box.scss
/* Icon Featured */
.icon-featured {
--porto-icon-featured: 110px;
display: inline-block;
position: relative;
width: var(--porto-icon-featured);
height: var(--porto-icon-featured);
line-height: var(--porto-icon-featured);
margin: 15px;
border-radius: 50%;
color: #fff;
font-size: 40px;
text-align: center;
z-index: 1;
&:after {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
content: '';
@include box-sizing(content-box);
}
img {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto; padding: 0;
}
}
.featured-box .icon-featured:after {
border-color: var(--porto-primary-color);
}
/* Featured Box */
.featured-box {
position: relative;
min-height: 100px;
background: var(--porto-light-1);
border: 1px solid var(--porto-gray-2);
box-shadow: 0 2px 4px 0px rgba(0, 0, 0, .05);
margin: 20px auto;
text-align: center;
z-index: 1;
&.align-left {
text-align: $left;
}
&.align-center {
text-align: center;
}
&.align-right {
text-align: $right;
}
&.align-justify {
text-align: justify;
}
.woocommerce &,
.woocommerce-page &{
h2,
h3,
h4 {
font-size: 1.3em;
font-weight: 400;
letter-spacing: -.7px;
line-height: 1.42857;
color: var(--porto-primary-color);
margin-top: 30px;
margin-bottom: 15px;
text-transform: uppercase;
&:first-child {
margin-top: -5px;
}
}
header {
h2,
h3,
h4 {
font-size: 1.1em;
margin-top: 0 !important;
}
}
}
h4,
.wpb_heading {
font-size: 1.3em;
font-weight: 400;
letter-spacing: -0.7px;
margin-top: 5px;
margin-bottom: 5px;
}
.box-content {
padding: 30px var(--porto-grid-gutter-width) 10px var(--porto-grid-gutter-width);
border-top: 4px solid var(--porto-gray-bg, #dfdfdf);
position: relative;
top: -1px;
@media #{$screen-medium} {
padding: 25px var(--porto-column-spacing) 5px var(--porto-column-spacing);
}
}
.learn-more {
display: block;
margin-top: 10px;
}
.porto-sicon-box {
margin-top: 15px;
margin-bottom: 25px;
}
.wpb_content_element {
margin-bottom: 20px;
}
h2 {
margin-bottom: 0px;
padding: 10px 0px;
}
&.porto-user-box {
border-top-color: var(--porto-primary-color);
}
}
/* Featured Box Left */
.featured-box-text-left,
.featured-box-text-start {
text-align: $left;
}
/* Featured Boxes - Flat */
.featured-boxes-flat .featured-box {
box-shadow: none;
margin: 10px 0;
.box-content {
background: var(--porto-light-1);
margin-top: 65px;
}
.icon-featured {
--porto-icon-featured: 90px;
position: relative;
top: -37px;
padding: 0;
margin: -100px 0 -15px;
font-size: 38px;
}
}
/* Featured Boxes - Style 2 */
.featured-boxes-style-2 .featured-box {
background: none;
border: 0;
margin: 10px 0;
box-shadow: none;
.box-content {
border: 0;
padding: 0;
}
.icon-featured {
--porto-icon-featured: 75px;
font-size: 30px;
padding: 0;
margin-top: 0;
}
}
/* Featured Boxes - Style 3 */
.featured-boxes-style-3 {
.featured-box {
margin: 10px 0;
.icon-featured {
--porto-icon-featured: 75px;
padding: 0;
margin-top: -35px;
font-size: 30px;
background: var(--porto-body-bg);
border: 3px solid #ccc;
}
.box-content {
display: inline-block;
}
}
&:not(.featured-boxes-flat) {
.featured-box {
background: none;
border: 0;
box-shadow: none;
.box-content {
border: 0;
padding: 0;
}
}
}
}
/* Featured Boxes - Style 4 */
.featured-boxes-style-4 .featured-box {
background: none;
border: 0;
margin: 10px 0;
box-shadow: none;
.box-content {
border: 0;
padding: 0;
}
.icon-featured {
--porto-icon-featured: 45px;
font-size: 40px;
padding: 0;
margin-top: 0;
margin-bottom: 10px;
background: transparent;
border-radius: 0;
}
}
/* Featured Boxes - Style 5, 6 and 7 */
.featured-boxes-style-5, .featured-boxes-style-6, .featured-boxes-style-7 {
.featured-box {
background: none;
border: 0;
box-shadow: none;
margin: 10px 0;
.box-content {
border: 0;
padding: 0;
h4 {
color: var(--porto-heading-color);
}
}
.icon-featured {
--porto-icon-featured: 75px;
font-size: 30px;
padding: 0;
margin-top: 0;
margin-bottom: 10px;
background: var(--porto-normal-bg);
border: 1px solid var(--porto-gray-2);
}
}
}
/* Featured Boxes - Style 6 */
.featured-boxes-style-6 {
.featured-box {
.icon-featured {
&:after {
border-radius: 50%;
box-sizing: content-box;
content: "";
display: block;
height: 100%;
#{$left}: -6px;
padding: 1px;
position: absolute;
top: -6px;
width: 100%;
border: 5px solid var(--porto-gray-3);
}
}
}
}
/* Featured Boxes - Style 8 */
.featured-boxes-style-8 {
.featured-box {
.icon-featured {
--porto-icon-featured: 75px;
font-size: 30px;
padding: 0;
margin: -38px 0 -16px;
border: 0;
background: var(--porto-light-1);
&:after {
display: none;
}
}
}
}
/* Effects */
.featured-box-effect-1 {
.icon-featured:after {
top: -7px;
#{$left}: -7px;
padding: 7px;
@include transition(transform .2s, opacity .2s);
transform: scale(1);
opacity: 0;
box-shadow: 0 0 0 3px var(--porto-light-1);
}
&:hover {
.icon-featured:after {
transform: scale(.8);
opacity: 1;
}
}
}
.featured-box-effect-2 {
.icon-featured:after {
top: -7px;
#{$left}: -7px;
padding: 7px;
box-shadow: 0 0 0 3px var(--porto-primary-color);
@include transition(transform .2s, opacity .2s);
transform: scale(.8);
opacity: 0;
}
&:hover {
.icon-featured:after {
transform: scale(.95);
opacity: 1;
}
}
}
.featured-box-effect-3 {
.icon-featured:after {
top: 0;
#{$left}: 0;
box-shadow: 0 0 0 10px var(--porto-primary-color);
transform: scale(.9);
@include transition(transform .2s, opacity .2s);
opacity: 0;
}
&:hover {
.icon-featured {
background: var(--porto-primary-color);
color: #fff !important;
&:after {
transform: scale(1);
opacity: .8;
}
}
}
}
.featured-box-effect-4 {
.icon-featured {
transform: scale(1);
@include transition(transform .2s, transform .2s);
}
&:hover {
.icon-featured {
transform: scale(1.15);
}
}
}
.featured-box-effect-5 {
.icon-featured {
overflow: hidden;
@include transition(all .3s);
}
&:hover {
.icon-featured {
@include animation(toRightFromLeft .3s forwards);
}
}
}
@keyframes toRightFromLeft {
49% {
transform: translate(100%);
}
50% {
opacity: 0;
transform: translate(-100%);
}
51% {
opacity: 1;
}
}
.featured-box-effect-6 {
.icon-featured:after {
@include transition(all .2s);
}
&:hover {
.box-content {
.icon-featured:after {
transform: scale(1.1);
}
}
}
}
.featured-box-effect-7 {
.icon-featured:after {
opacity: 0;
box-shadow: 3px 3px #d5d5d5;
transform: rotate(-90deg);
@include transition(opacity .2s, transform .2s);
#{$left}: 0;
top: -1px;
}
&:hover {
.icon-featured:after {
opacity: 1;
transform: rotate(0deg);
}
}
.icon-featured:before {
transform: scale(0.8);
opacity: .7;
@include transition(transform .2s, opacity .2s);
}
&:hover {
.icon-featured:before {
transform: scale(1);
opacity: 1;
}
}
}
/* WPB Feature Box */
.feature-box {
display: flex;
h4 {
color: var(--porto-heading-color);
}
.porto-feature-box & .feature-box-icon {
background-color: transparent;
}
&.align-items-center .feature-box-icon {
top: 0;
}
.feature-box-icon {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
top: 7px;
height: 1px;
min-width: 4.32em;
min-height: 4.32em;
padding: 0.8em;
font-size: 10px;
color: #fff;
border-radius: 50%;
i {
color: var(--porto-primary-color);
}
}
.feature-box-info {
flex: 1;
padding-#{$left}: 15px;
}
}
.feature-box {
&.feature-box-style-1 .feature-box-icon {
background-color: var(--porto-primary-color);
i {
color: #fff;
}
}
&.feature-box-style-2 {
.feature-box-icon {
top: 0;
i {
font-size: 2.7em;
}
}
}
&.feature-box-style-3 {
.feature-box-icon {
border: 1px solid var(--porto-primary-color);
line-height: 32px;
}
}
&.feature-box-style-4 {
flex-wrap: wrap;
.feature-box-icon {
flex-basis: 100%;
justify-content: flex-start;
padding: 0 0 1.2rem 0;
i {
font-size: 2.35em;
width: auto;
height: auto;
}
}
.feature-box-info {
clear: both;
padding-#{$left}: 0;
}
}
&.feature-box-style-5 {
.feature-box-icon {
top: 0;
padding: 1em 1.4em;
min-width: 5em;
i {
font-size: 2.75em;
}
}
}
&.feature-box-style-6 {
.feature-box-icon {
line-height: 32px;
border: 1px solid var(--porto-gray-2);
&:after {
content: "";
display: block;
position: absolute;
top: -4px;
width: 100%;
height: 100%;
#{$left}: -4px;
padding: 1px;
border: 3px solid var(--porto-gray-3);
border-radius: 50%;
box-sizing: initial;
}
i {
color: #a9a9a9;
}
}
}
}
/* Reverse All Resolutions */
.feature-box.reverse-allres {
text-align: $right;
flex-direction: row-reverse;
}
.feature-box.reverse-allres .feature-box-info {
padding-#{$right}: 15px;
padding-#{$left}: 0;
}
.feature-box.reverse-allres.feature-box-style-4 .feature-box-icon {
justify-content: flex-end;
}
.feature-box.reverse-allres.feature-box-style-4 .feature-box-info {
padding-#{$right}: 0;
}
/* Reverse */
@media (min-width: 992px) {
.feature-box.reverse {
text-align: $right;
flex-direction: row-reverse;
.feature-box-info {
padding-#{$right}: 15px;
padding-#{$left}: 0;
}
.feature-box-icon {
justify-content: flex-end;
}
&.feature-box-style-2 {
.feature-box-info {
padding-#{$right}: 60px;
}
}
&.feature-box-style-4 {
.feature-box-info {
padding-#{$right}: 0;
}
}
}
}
/* Full Width */
.featured-boxes-full {
.featured-box-full {
text-align: center;
padding: 55px;
i, h1, h2, h3, h4, h5, h6, p, a {
color: #fff;
padding: 0;
margin: 0;
}
i {
font-size: 3.9em;
margin-bottom: 15px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
}
p {
padding-top: 12px;
opacity: .8;
}
}
}