/var/www/cobraambalaj/resources/scss
Edit: /var/www/cobraambalaj/resources/scss/_components.scss (8630B)
// Buttons
.btn {
border-radius: 0 10px 0 10px;
font-size: 0.93em;
text-transform: uppercase;
padding: 10px 20px !important;
> i {
font-size: 1.3em;
line-height: 0;
position: relative;
top: 1px;
left: 0;
transition: all 300ms ease;
}
&:hover,
&:focus {
> i {
left: 4px;
}
}
&.btn-lg {
font-size: 1.1em;
> i {
font-size: 1.4em;
top: 3px;
}
}
&.btn-first {
background-color: $first;
border-color: $first;
border-width: 2px;
color: #fff !important;
&:hover,
&:focus {
color: #fff !important;
box-shadow: 0 0 0 0;
background-color: darken($first, 5%);
border-color: darken($first, 5%);
}
&:not(:disabled):not(.disabled):active {
background-color: darken($first, 10%);
border-color: darken($first, 10%);
box-shadow: 0 0 0 0;
}
}
&.btn-second {
background-color: $second;
border-color: $second;
border-width: 2px;
color: #fff !important;
&:hover,
&:focus {
color: #fff !important;
box-shadow: 0 0 0 0;
background-color: darken($second, 5%);
border-color: darken($second, 5%);
}
&:not(:disabled):not(.disabled):active {
background-color: darken($second, 10%);
border-color: darken($second, 10%);
box-shadow: 0 0 0 0;
}
}
&.btn-third {
background-color: $third;
border-color: $third;
border-width: 2px;
color: #fff !important;
&:hover,
&:focus {
color: #fff !important;
box-shadow: 0 0 0 0;
background-color: darken($third, 5%);
border-color: darken($third, 5%);
}
&:not(:disabled):not(.disabled):active {
background-color: darken($third, 10%);
border-color: darken($third, 10%);
box-shadow: 0 0 0 0;
}
}
}
// Dropdown
.dropdown {
.dropdown-toggle {
&:after {
content: "\eb3a";
font-family: unicons-line;
font-style: normal;
font-weight: 400;
border: 0;
font-size: 1.2em;
position: relative;
display: inline-block;
margin-top: -8px;
top: 7px;
margin-left: 2px;
transition: transform 300ms ease;
}
}
&.show {
.dropdown-toggle {
&:after {
transform: rotate(180deg);
top: 5px;
}
}
}
.dropdown-menu {
border-radius: 10px;
padding: 0;
border: 0;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.06);
overflow: hidden;
min-width: 180px;
margin-top: 0;
border-top: 4px solid transparent;
&:not(.megamenu) {
animation: slideDownIn;
animation-duration: 600ms;
}
.dropdown-item {
color: $fourth;
padding: 7px 15px;
font-size: 0.875rem;
transition: all 300ms;
&:first-child {
padding-top: 15px;
}
&:last-child {
padding-bottom: 15px;
}
&:focus,
&:hover {
color: $first;
background-color: transparent;
}
}
&.megamenu {
justify-content: space-between;
align-items: flex-start;
left: 50%;
transform: translateX(-50%);
animation: slideDownInMega;
animation-duration: 600ms;
.megamenu-list {
margin: 20px 50px 20px 20px;
h4 {
font-size: 1.1em;
}
.dropdown-item {
padding: 7px 0;
&:last-child {
padding-bottom: 0;
}
}
}
}
&.show {
&.megamenu {
display: flex;
}
}
}
}
@keyframes slideDownIn {
0% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
0% {
transform: translateY(-20px);
}
}
@keyframes slideDownInMega {
0% {
transform: translate(-50%, -20px);
}
100% {
transform: translate(-50%, 0);
}
0% {
transform: translate(-50%, -20px);
}
}
// Slider
.swiper-container {
.swiper-button-next,
.swiper-button-prev {
transition: all 300ms;
&:hover {
transform: scale(1.3);
}
}
.swiper-button-next:after,
.swiper-button-prev:after {
color: $third;
margin: 0 20px;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
left: 30px;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
right: 30px;
}
.swiper-pagination {
text-align: center;
padding: 0 40px 0;
bottom: 40px;
.swiper-pagination-bullet {
background-color: transparent;
color: #fff;
opacity: 0.7;
border-bottom: 3px solid;
border-radius: 0;
height: 30px;
text-align: center;
min-width: 30px;
transition: all 300ms;
font-weight: 600;
&:hover,
&:focus {
color: $third;
opacity: 1;
}
&.swiper-pagination-bullet-active {
color: $third;
min-width: 50px;
opacity: 1;
}
}
}
}
// Lists
.list {
padding: 0;
margin: 0;
list-style-type: none;
li {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
> a {
color: #fff;
&:hover,
&:focus {
color: $third;
}
}
}
}
.icon-list {
padding: 0;
margin: 0;
list-style-type: none;
li {
position: relative;
padding-left: 25px;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
> a {
color: #fff;
&:hover,
&:focus {
color: $third;
}
}
i {
font-size: 1.2em;
position: absolute;
left: 0;
top: 3px;
line-height: 0;
color: $third;
}
}
}
// Social Menu
.social-menu {
padding: 0;
margin: 0;
li {
display: inline-block;
> a {
font-size: 1.4em;
margin-bottom: 0;
color: $white;
margin-right: 10px;
height: 30px;
width: 30px;
display: inline-block;
text-align: center;
border-radius: 0 10px 0 10px;
line-height: 30px;
&.fb {
background-color: $second;
}
&.tw {
background-color: $first;
}
&.wa {
background-color: $third;
}
&.in {
background-color: $fourth;
}
&:hover,
&:focus {
opacity: 0.7;
}
}
&:last-child {
> a {
margin-right: 0;
}
}
}
}
// Page Head
.page-head {
position: relative;
overflow: hidden;
min-height: 300px;
padding-bottom: 0;
> img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.3;
z-index: 0;
}
.container {
position: relative;
height: 100%;
z-index: 1;
display: flex;
flex-direction: column;
min-height: 230px;
justify-content: center;
h1 {
margin-bottom: 0;
font-size: 3.6em;
}
}
}
// Images Modal
.images-modal {
.modal-content {
border-radius: 10px;
border: 0;
background-color: transparent;
.modal-body {
padding: 0;
.swiper-slide {
height: auto;
.gallery-item {
&.shadow-bottom::before {
opacity: 0.5;
border-radius: 0 0 8px 8px;
}
height: 100%;
> img {
width: 100%;
border-radius: 8px;
height: 100%;
object-fit: cover;
}
}
}
}
}
}