/var/www/cobraambalaj/resources/scss
Edit: /var/www/cobraambalaj/resources/scss/_helpers.scss (2449B)
// Colors
.bfirst {
background-color: $first !important;
color: $white !important;
}
.cfirst {
color: $first !important;
}
.bsecond {
background-color: $second !important;
color: $white !important;
}
.csecond {
color: $second !important;
}
.bthird {
background-color: $third !important;
color: $white !important;
}
.cthird {
color: $third !important;
}
.bfourth {
background-color: $fourth !important;
color: $white !important;
}
.cfourth {
color: $fourth !important;
}
.ctext{
color: $textColor !important;
}
// Aspect Ratio
.aspect {
position: relative;
width: 100%;
height: 0;
overflow: hidden;
padding-bottom: 100%;
&-16x9 {
padding-bottom: 56.25%;
}
&-9x16 {
padding-bottom: 177.77778%;
}
&-4x3 {
padding-bottom: 75%;
}
&-3x4 {
padding-bottom: 133.33333%;
}
&-3x2 {
padding-bottom: 66.66667%;
}
&-3x1 {
padding-bottom: 33.33333%;
}
&-2x3 {
padding-bottom: 150%;
}
&-2x1 {
padding-bottom: 50%;
}
&-1x2 {
padding-bottom: 200%;
}
&-1x1 {
padding-bottom: 100%;
}
&-none {
height: auto;
padding-bottom: 0;
overflow: visible;
}
&-none > .aspect-inner {
position: static;
}
& > div,
&-inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
// Inside Shadow
.shadow {
&-top {
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: $fourth;
background: linear-gradient(
0deg,
rgba($fourth, 0) 0%,
rgba($fourth, 1) 100%
);
transition: all 300ms ease-out;
}
}
&-bottom {
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: $fourth;
background: linear-gradient(
180deg,
rgba($fourth, 0) 0%,
rgba($fourth, 1) 100%
);
transition: all 300ms ease-out;
}
}
}