| DIR: /home/aissorg/public_html/fonts/qzfcvsedcv/werwcwsfs /home/aissorg/public_html/fonts/qzfcvsedcv/werwcwsfs/ |
| Current File : /home/aissorg/public_html/fonts/qzfcvsedcv/werwcwsfs/_boxes.scss.tar |
home/aissorg/public_html/scss/custom-styles/components/_boxes.scss 0000644 00000020741 15116247730 0021626 0 ustar 00 /*
*
* Boxes
*/
//
// Table of Contents:
//
// Box Minimal
// Box Light
// Box Creative
// Box Width
// Box CTA
// Box Indigo
// Box Promo
//
//
// Box Minimal
//
.box-minimal {
display: flex;
@include groupX(15px);
text-align: left;
}
.box-minimal-icon {
position: relative;
top: 4px;
min-width: 26px;
font-size: 24px;
line-height: 1;
color: $primary;
&.fl-bigmug-line-checkmark14 {
font-size: 20px;
}
}
.box-minimal-text {
width: 100%;
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
* + .box-minimal { margin-top: 30px; }
* + .box-minimal-title { margin-top: 10px; }
* + .box-minimal-text { margin-top: 15px; }
@include media-breakpoint-down(xs) {
.box-minimal {
max-width: 360px;
margin-left: auto;
margin-right: auto;
}
}
@include media-breakpoint-down(sm) {
.box-minimal {
* + p { margin-top: 7px; }
}
}
@include media-breakpoint-up(md) {
.box-minimal {
padding-right: 15px;
@include groupX(30px);
}
}
@include media-breakpoint-between(lg, lg) {
.box-minimal {
padding-right: 0;
}
.box-minimal-title {
font-size: 22px;
}
}
@include media-breakpoint-up(xl) {
.box-minimal-icon {
top: 0;
font-size: 36px;
&.fl-bigmug-line-checkmark14 {
font-size: 30px;
}
}
}
//
// Box Light
//
.box-light {
text-align: center;
.icon-modern{
transition: all ease .35s;
}
@include media-breakpoint-up(xl) {
&:hover{
.icon-modern{
background-color: $primary;
color: $white;
transition: all ease .35s;
}
}
}
}
.box-light-icon {
font-size: 30px;
line-height: 1;
color: $primary;
}
* + .box-light-title { margin-top: 10px; }
@include media-breakpoint-down(xs) {
.box-light {
max-width: 300px;
margin-left: auto;
margin-right: auto;
}
}
@include media-breakpoint-up(md) {
.box-light {
max-width: 330px;
margin-left: auto;
margin-right: auto;
}
* + .box-light-title { margin-top: 16px; }
}
@include media-breakpoint-between(md, lg) {
.box-light-title {
font-size: 24px;
}
}
@include media-breakpoint-up(lg) {
.box-light-icon {
font-size: 38px;
}
* + .box-light-title { margin-top: 25px; }
}
@include media-breakpoint-up(xl) {
.box-light-icon {
font-size: 48px;
}
}
//
// Box Creative
//
.box-creative {
max-width: 330px;
margin-left: auto;
margin-right: auto;
text-align: center;
cursor: default;
&:hover {
.box-creative-icon {
color: $white;
}
.box-creative-icon::after {
opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0);
}
}
}
.box-creative-shadow {
.box-creative-icon {
background: $white;
border: 0;
box-shadow: 0 17px 24px 0 rgba($black, 0.05);
}
}
.box-creative-icon {
position: relative;
z-index: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.8em;
height: 2.8em;
border: 2px solid $gray-200;
border-radius: 50%;
font-size: 24px;
line-height: 1;
color: $primary;
&::before {
position: relative;
z-index: 2;
}
&::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
border-radius: inherit;
background: $primary;
border-color: $primary;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: .15s ease-in;
transform: scale3d(1.05, 1.05, 1.05);
}
}
* + .box-creative-icon { margin-top: 10px; }
* + .box-creative-title { margin-top: 10px; }
@include media-breakpoint-up(md) {
.box-creative-icon {
font-size: 30px;
}
* + .box-creative-title { margin-top: 15px; }
}
@include media-breakpoint-down(md) {
.box-creative {
* + p { margin-top: 10px; }
}
}
@include media-breakpoint-up(xl) {
.box-creative-icon {
width: 2.4em;
height: 2.4em;
font-size: 40px;
}
* + .box-creative-title { margin-top: 24px; }
}
// Box Width
.box-1 {
max-width: 280px;
margin-left: auto;
margin-right: auto;
}
.box-2 {
@include media-breakpoint-up(md) {
padding-right: 30px;
}
@include media-breakpoint-up(lg) {
padding-right: 35px;
}
@include media-breakpoint-up(xl) {
padding-right: 100px;
}
}
.box-3 {
@include media-breakpoint-up(lg) {
padding-left: 10px;
}
@include media-breakpoint-up(xl) {
padding-left: 70px;
}
}
// Box CTA
div.box-cta-1 {
display: inline-table;
text-align: center;
vertical-align: middle;
@include group(40px, 25px);
> * {
margin-top: 0;
vertical-align: middle;
}
}
div.box-cta-thin {
display: inline-table;
text-align: center;
vertical-align: middle;
@include group(30px, 25px);
> * {
margin-top: 0;
vertical-align: middle;
}
@include media-breakpoint-between(md, md) {
> * { max-width: 500px; }
}
}
.box-cta-medium{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
vertical-align: middle;
flex-wrap: wrap;
margin-left: -30px;
@include media-breakpoint-up(lg) {
margin-left: -167px;
}
> * {
margin-bottom: 10px;
margin-top: 0;
vertical-align: middle;
margin-left: 30px;
@include media-breakpoint-up(lg) {
margin-left: 167px;
}
}
.button-outer{
margin-top: 0;
}
}
//
// Box Indigo
//
.box-indigo {
position: relative;
padding: 5px 0 22px;
max-width: 500px;
&::before {
content: '';
position: absolute;
top: 0;
right: 100px;
bottom: 0;
left: 30px;
z-index: -1;
background: rgba($gray-700, .12);
pointer-events: none;
}
p {
line-height: 1.35;
}
}
.box-indigo-header {
> * {
padding-left: 60px;
}
> * + * { margin-top: 0; }
}
.box-indigo-mark {
font-weight: 300;
color: $color-1;
}
.box-indigo-title,
.box-indigo-subtitle {
font-weight: 700;
letter-spacing: 0;
color: $gray-700
}
p.box-indigo-title {
position: relative;
font-size: 30px;
line-height: 1.15;
&::before {
content: '';
position: absolute;
top: 50%;
left: 0;
transform: translate3d(0, -50%, 0);
display: inline-block;
width: 37px;
height: 0.05em;
margin-right: 15px;
vertical-align: middle;
background: $primary;
}
@include media-breakpoint-up(sm) {
font-size: 60px;
}
@include media-breakpoint-up(md) {
font-size: 75px;
line-height: 1.2;
}
}
p.box-indigo-subtitle {
font-size: 24px;
line-height: 1.2;
.box-indigo-mark {
font-size: (34 / 40) * 1em;
}
@include media-breakpoint-up(sm) {
font-size: 34px;
}
@include media-breakpoint-up(md) {
font-size: 40px;
}
}
%context-dark {
.box-indigo {
&::before {
background: rgba($white, .12);
}
p { color: $gray-300; }
}
p.box-indigo-title,
p.box-indigo-subtitle {
color: $white;
}
}
//
// Box Promo
//
.box-promo {
position: relative;
display: flex;
max-width: 750px;
margin-left: auto;
margin-right: auto;
text-align: left;
box-shadow: 0 2px 24px 0 rgba($black, .15);
transition: .33s ease-in-out;
h6,
.heading-6 {
color: $color-2;
}
&:hover {
transform: translate(0, -5px);
box-shadow: 0 2px 24px 1px rgba($black, .2);
}
}
.box-promo-mark {
position: absolute;
top: 14%;
right: 6.5%;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
border-radius: 50%;
color: rgba($primary, .1);
border: 2px solid;
pointer-events: none;
&::before,
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background: rgba($primary, .1);
}
&::before {
width: 2px;
height: 50%;
}
&::after {
height: 2px;
width: 50%;
}
}
.box-promo-inner,
.box-promo-dummy {
width: 100%;
flex-shrink: 0;
}
.box-promo-inner {
display: flex;
align-items: center;
padding: 30px;
}
.box-promo-dummy {
visibility: hidden;
opacity: 0;
pointer-events: none;
&::before {
content: '';
display: block;
padding-bottom: (364 / 750) * 100%;
}
}
.box-promo-content {
width: 100%;
max-width: 500px;
* + h3,
* + .heading-3 {
margin-top: 15px;
}
* + p { margin-top: 10px; }
* + .button { margin-top: 30px; }
}
@include media-breakpoint-up(md) {
.box-promo-inner {
padding: 39px 35px;
}
}
@include media-breakpoint-up(xl) {
.box-promo-inner {
padding: 60px 70px;
}
.box-promo-mark {
top: 24%;
right: 6.5%;
width: 120px;
height: 120px;
}
}
|