// Variables
// =========
// Colors
@colorPrimary: #274675;
@colorSecondary: #b2c81e;
@colorTertiary: #38cef9;
@colorBg: white;
@bradius: 5px;
// Metrics
@boxWidth: 1240px;
// Other
@layoutType: "wide";
@borderType: "square";
@outerBgType: "color";
@outerBgColor: @colorSecondary;
@outerBgImage: "";
@preloader: "";
// Mixins
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
}
.transform(@transform) {
-webkit-transform: @transform;
-ms-transform: @transform; // IE9 only
transform: @transform;
}
// Styles
// ======
// Backgrounds
body {
background: @colorBg !important;
}
body when (@layoutType = "boxed") and (@outerBgType = "color") {
background: @outerBgColor !important;
}
body when (@layoutType = "boxed") and (@outerBgType = "pattern") and not (@outerBgImage = "") {
background: url(@outerBgImage) @colorBg repeat left top !important;
}
html when (@layoutType = "boxed") and (@outerBgType = "image") and not (@outerBgImage = "") {
height: 100%;
background: url(@outerBgImage) @colorBg repeat center top / cover fixed !important;
}
body when (@layoutType = "boxed") and (@outerBgType = "image") {
background: none !important;
}
// Layout
.wrapper-boxed when (@layoutType = "boxed") {
max-width: @boxWidth;
}
// Colors
.text-color-primary {
color: @colorPrimary !important;
}
.bg-color-primary {
background-color: @colorPrimary;
}
.bg-color-secondary {
background-color: @colorSecondary;
}
.bg-color-tertiary {
background-color: @colorTertiary;
}
.btn.btn-color-primary {
background-color: @colorPrimary;
}
//theme styles
// =========== mega menu ====================
.header-section ul li.active > a {
color: @colorPrimary;
}
.header-section.style4 ul li ul {
background: @colorPrimary;
}
.header-section ul li:hover > a, .header-section ul li.active > a {
color: @colorPrimary;
}
.header-section.style4 ul li.search-parent .search-box {
background: @colorPrimary;
}
.header-section.style4 ul li.search-parent .search-box .form-control {
background: @colorPrimary;
}
@media only screen and (max-width: 1000px) {
.header-section.style4 #menu ul {
background: @colorPrimary;
}
}
.header-section ul li .number {
background: @colorPrimary;
}
.header-section.style4 ul li.cart-parent .cart-box {
background: @colorPrimary;
}
.header-section ul li.mega-menu > ul > li ul li a:hover {
color:@colorPrimary;
}
.header-section ul li.search-parent a.m-link {
color: @colorPrimary;
}
.header-section ul li.cart-parent a.m-link {
color: @colorPrimary;
}
.header-section.dark-dropdowns.style4 ul li:hover > a, .header-section.dark-dropdowns.style4 ul li.active > a {
color: @colorPrimary;
}
.header-section.dark-dropdowns.style4 ul li.mega-menu > ul > li ul li a:hover {
color: @colorPrimary;
}
.header-section.dark-dropdowns.style4 #menu ul li ul li:hover a span.sub-arrow, header-section.dark-dropdowns.style4 #menu ul li ul li.active a span.sub-arrow {
color: @colorPrimary;
}
.header-section.dark-dropdowns.style2 ul li:hover > a, .header-section.dark-dropdowns.style2 ul li.active > a {
color: @colorPrimary;
}
.header-section.dark-dropdowns.style2 ul li.mega-menu > ul > li ul li.active a {
color: @colorPrimary;
}
.header-section.dark-dropdowns.style2 ul li.mega-menu > ul > li ul li a:hover {
color: @colorPrimary;
}
.btn-top-1 {
background-color: @colorPrimary;
}
.header-section.dark-dropdowns.style1 ul li:hover > a, .header-section.dark-dropdowns.style1 ul li.active > a {
color: @colorPrimary;
}
.header-section.dark-dropdowns.style1 ul li.mega-menu > ul > li ul li a:hover {
color: @colorPrimary;
}
.header-section.dark-dropdowns.style1 ul li:hover > a, .header-section.dark-dropdowns.style1 ul li.active > a {
color: @colorPrimary;
}
.header-section.act-style-1 ul li.active > a {
background-color: @colorPrimary !important;
}
.header-section.style3 #menu ul li.mega-menu li ul li:hover a, .header-section.style3 #menu ul li.mega-menu li ul li.active a {
color: @colorPrimary;
}
.header-section.style3 #menu ul li.mega-menu li ul li:hover a, .header-section.style3 #menu ul li.mega-menu li ul li.active a {
color: @colorPrimary;
}
.header-section.style3 #menu ul li ul li:hover > a, .header-section.style3 #menu ul li ul li.active > a {
color: @colorPrimary;
}
.header-section.style3 #menu ul li ul li:hover a span.sub-arrow, header-section.style3 #menu ul li ul li.active a span.sub-arrow {
color: @colorPrimary;
}
.header-section.style5.dark #menu ul li ul li:hover > a, .header-section.style5.dark #menu ul li ul li.active > a {
color: @colorPrimary;
}
.header-section ul li.cart-parent .cart-box span {
color: @colorPrimary;
}
.header-section ul li.cart-parent .cart-box span {
color: @colorPrimary;
}
.header-section ul li.cart-parent .cart-box .btn.btn-primary {
background: @colorPrimary none repeat scroll 0 0 !important;
}
// =========== corporate ====================
.tp-caption.sbut2 a {
background-color: @colorPrimary;
}
.section-primary {
background-color: @colorPrimary;
}
.btn.btn-prim {
color: #fff;
background-color: @colorPrimary;
}
.ce-feature-box-17:hover .content-box, .ce-feature-box-17.active .content-box {
background-color: @colorPrimary;
}
.text-primary {
color: @colorPrimary;
}
.ce-feature-box-17 .content-box-inner .icon {
color: @colorPrimary;
}
.ce-feature-box-5:hover .img-box-main, .ce-feature-box-5.active .img-box-main {
background-color: @colorPrimary;
}
.ce-feature-box-5 .img-box-main .img-box .sc-icons-box {
background-color: @colorPrimary;
}
.text-primary {
color: @colorPrimary;
}
.ce-feature-box-12:hover .img-box .overlay, .ce-feature-box-12.active .img-box .overlay {
background: fadeout(@colorPrimary, 9%);
}
.sky-form .button {
background-color: @colorPrimary;
}
.footer-tags li a:hover, .footer-tags li a.active {
border: 1px solid @colorPrimary;
color: @colorPrimary;
}
.newsletter-submit-btn {
border: 1px solid @colorPrimary;
background-color: @colorPrimary;
}
.footer-social-icons li a:hover, .footer-social-icons li a.active {
color: @colorPrimary;
}
.scrollup {
background: @colorPrimary url(../images/scroll-top-arrow.png) no-repeat 15px 16px;
}
.ce-feature-box-5 .img-box-main.primary {
background-color: @colorPrimary;
}
// Border roundness
.btn when (@borderType = "rounded") {
border-radius: @bradius;
}