Current File : /home/kelaby89/cartel.express/wp-content/plugins/trx_addons/components/shortcodes/icons/icons.scss |
@import "../../../css/_mixins.scss";
@import "../../../css/_trx_addons.vars.scss";
/* Icons */
.sc_icons {
position: relative;
padding-top: 0.0001px;
}
.sc_icons_columns_wrap {
@include flex;
@include flex-wrap(wrap);
}
.sc_icons_slider .sc_icons_item,
.sc_icons_columns_wrap .sc_icons_item {
display:inline-block;
vertical-align:top;
@include box(100%, 100%);
@include border-box;
}
.sc_icons_slider .sc_icons_item {
// height: 95%;
margin-bottom: 0 !important;
}
.sc_icons .sc_icons_item {
position:relative;
}
.sc_icons.sc_align_left .sc_icons_item { text-align:left; }
.sc_icons.sc_align_center .sc_icons_item { text-align:center; }
.sc_icons.sc_align_right .sc_icons_item { text-align:right; }
.sc_icons .sc_icons_item > * {
margin:0;
}
.sc_icons .sc_icons_icon {
color: #efa758;
position:relative;
z-index:2;
display:inline-block;
width: auto;
}
.sc_icons_icon.sc_icons_char:before,
.sc_icons_icon.sc_icons_char > span:before {
content: attr(data-char);
font-weight: 700;
}
.sc_icon_type_svg.sc_icon_animation {
visibility:hidden;
}
.sc_icon_type_svg svg {
stroke: currentColor;
fill: currentColor;
@include transition-all;
}
.sc_icon_type_svg.sc_icon_animation svg {
fill: none !important;
}
.sc_icons .sc_icons_icon:before,
.sc_icons .sc_icons_icon > span:before {
@include font(6em, 1.1em !important);
}
.sc_icon_type_svg svg,
.sc_icon_type_svg object {
@include box(6em, 6em);
display: inline-block;
overflow: visible;
margin-bottom: -0.1em;
}
.sc_icons .sc_icons_image img {
max-width: 75%;
// Next two rows breaks theme-specific layouts
// width: auto;
// height: 6.6em; // Icon font-size:6em * line-height:1.1em
}
.sc_icons_size_small .sc_icons_icon:before,
.sc_icons_size_small .sc_icons_icon > span:before {
@include font(4em, 1.1em !important);
}
.sc_icons_size_small .sc_icon_type_svg svg,
.sc_icons_size_small .sc_icon_type_svg object {
@include box(4em, 4em);
}
// Next rule breaks theme-specific layouts
//.sc_icons_size_small .sc_icons_image img {
// height: 4.4em; // Icon font-size:4em * line-height:1.1em
//}
.sc_icons_size_large .sc_icons_icon:before,
.sc_icons_size_large .sc_icons_icon > span:before {
@include font(8em, 1.1em !important);
}
.sc_icons_size_large .sc_icon_type_svg svg,
.sc_icons_size_large .sc_icon_type_svg object {
@include box(8em, 8em);
}
// Next rule breaks theme-specific layouts
//.sc_icons_size_large .sc_icons_image img {
// height: 8.8em; // Icon font-size:8em * line-height:1.1em
//}
.sc_icons .sc_icons_icon > span {
display:inline-block;
opacity: 0;
@include abs-lt;
width: auto;
}
.sc_icons .sc_icons_icon,
.sc_icons .sc_icons_item_title {
@include transition-all;
}
.sc_icons .sc_icons_item_title span,
.sc_icons .sc_icons_item_description span {
display:block;
}
.sc_icons_item_title {
@include font(1.25em, 1.3em, 400, normal);
text-transform:uppercase;
letter-spacing:1px;
margin: 0;
}
.sc_icons_item_description {
@include font(1em, 1.6em);
}
.sc_icons_item_title + .sc_icons_item_description {
margin-top: 0.5em;
}
.sc_icons .sc_icons_item_link {
display:block;
@include abs-lt(0, 0, 10);
@include box(100%, 100%);
}
/* Style Default */
.sc_icons_default .sc_icons_icon + .sc_icons_item_details,
.sc_icons_default .sc_icons_image + .sc_icons_item_details {
margin-top: 1em;
}
/* Style Modern */
.sc_icons_modern {
position: relative;
}
.sc_icons_modern .sc_icons_icon,
.sc_icons_modern .sc_icons_image {
@include abs-lt;
}
.sc_icons_modern .sc_icons_image {
max-width: 6em;
overflow: hidden;
@include flex;
@include flex-justify-content(center);
@include flex-align-items(center);
@include border-round;
img {
max-width: none;
height: 6em;
}
}
.sc_icons_modern.sc_icons_size_small .sc_icons_image {
max-width: 4em;
img {
height: 4em;
}
}
.sc_icons_modern.sc_icons_size_large .sc_icons_image {
max-width: 8em;
img {
height: 8em;
}
}
.sc_icons_modern.sc_align_right .sc_icons_icon,
.sc_icons_modern.sc_align_right .sc_icons_image {
left: auto;
right: 0;
}
.sc_icons_modern .sc_icons_item_details {
min-height: 6em;
padding-left: 8em;
}
.sc_icons_modern.sc_align_right .sc_icons_item_details {
padding-left: 0;
padding-right: 8em;
}
.sc_icons_modern.sc_icons_size_small .sc_icons_item_details {
min-height: 4em;
padding-left: 6em;
}
.sc_icons_modern.sc_icons_size_small.sc_align_right .sc_icons_item_details {
padding-left: 0;
padding-right: 6em;
}
.sc_icons_modern.sc_icons_size_large .sc_icons_item_details {
min-height: 8em;
padding-left: 10em;
}
.sc_icons_modern.sc_icons_size_large.sc_align_right .sc_icons_item_details {
padding-left: 0;
padding-right: 10em;
}
/* Hover effects */
.sc_icons .sc_icons_item_linked:hover .sc_icons_icon > span {
@include animation(icons-zoom 0.25s ease-out);
}
.sc_icons .sc_icons_item_linked:hover .sc_icons_icon > svg {
@include scale(1.1,1.1);
}
.sc_icons .sc_icons_item_linked .sc_icons_icon + .sc_icons_item_title,
.sc_icons .sc_icons_item_linked .sc_icons_image + .sc_icons_item_title,
.sc_icons .sc_icons_item_linked .sc_icons_icon + .sc_icons_item_description,
.sc_icons .sc_icons_item_linked .sc_icons_icon + .sc_icons_item_title + .sc_icons_item_description,
.sc_icons .sc_icons_item_linked .sc_icons_image + .sc_icons_item_description,
.sc_icons .sc_icons_item_linked .sc_icons_image + .sc_icons_item_title + .sc_icons_item_description,
.sc_icons .sc_icons_item_linked .sc_icons_image img {
@include transition-all(.25s);
}
.sc_icons .sc_icons_item_linked .sc_icons_icon + .sc_icons_item_title,
.sc_icons .sc_icons_item_linked .sc_icons_image + .sc_icons_item_title {
@include transform-origin(center bottom);
}
.sc_icons .sc_icons_item_linked .sc_icons_icon + .sc_icons_item_description,
.sc_icons .sc_icons_item_linked .sc_icons_icon + .sc_icons_item_title + .sc_icons_item_description,
.sc_icons .sc_icons_item_linked .sc_icons_image + .sc_icons_item_description,
.sc_icons .sc_icons_item_linked .sc_icons_image + .sc_icons_item_title + .sc_icons_item_description {
@include transform-origin(center top);
}
.sc_icons .sc_icons_item_linked:hover .sc_icons_image img {
@include scale(1.1,1.1);
}
.sc_icons .sc_icons_item_linked:hover .sc_icons_icon + .sc_icons_item_title,
.sc_icons .sc_icons_item_linked:hover .sc_icons_image + .sc_icons_item_title,
.sc_icons .sc_icons_item_linked:hover .sc_icons_icon + .sc_icons_item_description,
.sc_icons .sc_icons_item_linked:hover .sc_icons_icon + .sc_icons_item_title + .sc_icons_item_description,
.sc_icons .sc_icons_item_linked:hover .sc_icons_image + .sc_icons_item_description,
.sc_icons .sc_icons_item_linked:hover .sc_icons_image + .sc_icons_item_title + .sc_icons_item_description {
@include scale(0.9,0.9);
}
@-webkit-keyframes icons-zoom {
0% { opacity: 1; }
100% { opacity: 0; @include scale(1.75, 1.75); }
}
@keyframes icons-zoom {
0% { opacity: 1; }
100% { opacity: 0; @include scale(1.75, 1.75); }
}