Skip to content

P
ptd
Commit ef424389 authored by Chi Bui's avatar Chi Bui 👀
Browse files
Options

edit css

parent be8bacb5
Show whitespace changes
Inline Side-by-side
Showing with 278 additions and 166 deletions
themes/contrib/estore/css/styles.css
View file @ ef424389
......@@ -7,6 +7,7 @@
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/* @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700,700i&subset=cyrillic"); */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@font-face {
font-family: "Roboto";
src: url('https://fonts.googleapis.com/css2?family=Roboto&display=swap') format("truetype");
......@@ -21,52 +22,63 @@ body {
}
/* custom product */
article.commerce-product.teaser .product-image .products-hover-wrapper{
article.commerce-product.teaser .product-image .products-hover-wrapper {
opacity: 0 !important;
cursor: pointer;
}
article.commerce-product.teaser:hover form[class*="add-to-cart-form"] button[id*="edit-submit"]{
article.commerce-product.teaser:hover form[class*="add-to-cart-form"] button[id*="edit-submit"] {
opacity: 0 !important
}
article.commerce-product.teaser .product-image img:hover {
transform: scale(1.2);
}
article.commerce-product.teaser .product-image img {
transition:all .4s linear;
transition: all .4s linear;
}
/* invi custom */
.middle-header-wrapper{
background-color: #f8ebbc !important;
/* invi custom */
.middle-header-wrapper {
background-color: #f7df24 !important;
}
.bottom-nav{
background-color: #f8ebbc !important;
.bottom-nav {
background-color: #f7df24 !important;
padding-bottom: 16px;
}
.menu--main .open ul.sidebar-submenu-2 li:hover {
background: white !important;
}
.menu--main .open ul.sidebar-submenu-2 li {
border-bottom: none !important;
width: 170px !important
}
.menu--main .open ul.sidebar-submenu-2.three-level{
.menu--main .open ul.sidebar-submenu-2.three-level {
flex-direction: row !important;
}
.middle-header-wrapper .col-md-3{
.middle-header-wrapper .col-md-3 {
padding: 0 !important
}
.menu--main .open ul.sidebar-submenu-2 li a{
.menu--main .open ul.sidebar-submenu-2 li a {
white-space: normal;
padding: 0 5px;
line-height: normal !important;
text-align: left !important;
text-transform: none !important;
}
.menu--main .open ul.sidebar-submenu-2 {
padding: 26px 20px !important;
}
.menu--main .open ul.sidebar-submenu-2.sidebar-submenu-3 li{
.menu--main .open ul.sidebar-submenu-2.sidebar-submenu-3 li {
padding: 7px 0
}
......@@ -74,7 +86,8 @@ article.commerce-product.teaser .product-image img {
display: flex;
flex-direction: column !important;
} */
.menu--main .open .dropdown-menu { /* menu lv2 */
.menu--main .open .dropdown-menu {
/* menu lv2 */
display: flex;
flex-direction: column;
justify-content: flex-start;
......@@ -85,23 +98,30 @@ article.commerce-product.teaser .product-image img {
background: white !important;
/* height: 169%; */
}
.menu--main .open .dropdown-menu li {
width: 100%;
}
.menu--main .open .dropdown-menu.three-level li a{
.menu--main .open .dropdown-menu.three-level li a {
font-weight: 600 !important;
}
.menu--main .open .dropdown-menu.three-level .sidebar-submenu-3 li a{
.menu--main .open .dropdown-menu.three-level .sidebar-submenu-3 li a {
font-weight: normal !important;
padding: 6px 0;
}
.menu--main .open .dropdown-menu li a{
.menu--main .open .dropdown-menu li a {
font-weight: normal;
}
.menu--main .open .dropdown-menu .dropdown-menu.sidebar-submenu-3{
.menu--main .open .dropdown-menu .dropdown-menu.sidebar-submenu-3 {
margin-top: 10px
}
.menu--main .open .dropdown-menu .dropdown-menu{/* menulv 3 */
.menu--main .open .dropdown-menu .dropdown-menu {
/* menulv 3 */
display: flex;
flex-direction: column;
justify-content: flex-start;
......@@ -111,41 +131,51 @@ article.commerce-product.teaser .product-image img {
left: 0;
position: relative;
}
.menu--main .open .dropdown-menu .dropdown-menu li{/* menulv 3 */
.menu--main .open .dropdown-menu .dropdown-menu li {
/* menulv 3 */
/* padding: 5px 10px; */
font-weight: 200;
}
.menu--main .open .dropdown-menu .dropdown-menu li a{/* menulv 3 */
.menu--main .open .dropdown-menu .dropdown-menu li a {
/* menulv 3 */
font-weight: 500;
}
.menu--main .open .dropdown-menu li {
color : red
.menu--main .open .dropdown-menu li {
color: red
}
/* end custom */
.menu--category-menu .open ul.sidebar-submenu-2 li:hover {
background: white !important;
}
.menu--category-menu .open ul.sidebar-submenu-2 li {
border-bottom: none !important;
width: 251px !important;
}
.menu--category-menu .open ul.sidebar-submenu-2.three-level{
.menu--category-menu .open ul.sidebar-submenu-2.three-level {
flex-direction: row !important;
}
.menu--category-menu .open ul.sidebar-submenu-2 li a{
.menu--category-menu .open ul.sidebar-submenu-2 li a {
white-space: normal;
padding: 0 5px !important;
}
.menu--category-menu .open ul.sidebar-submenu-2 {
padding: 10px 5px 20px !important;
}
/* .menu--category-menu .open ul.sidebar-submenu-2 ul.slidebar-submenu-3 {
display: flex;
flex-direction: column !important;
} */
.menu--category-menu .open .dropdown-menu { /* menu lv2 */
.menu--category-menu .open .dropdown-menu {
/* menu lv2 */
display: flex;
flex-direction: column;
justify-content: flex-start;
......@@ -156,16 +186,20 @@ article.commerce-product.teaser .product-image img {
background: white !important;
/* height: 169%; */
}
.menu--category-menu .open .dropdown-menu li {
width: 100%;
}
.menu--category-menu .open .dropdown-menu.three-level li a{
.menu--category-menu .open .dropdown-menu.three-level li a {
font-weight: 600 !important;
}
.menu--category-menu .open .dropdown-menu.three-level .sidebar-submenu-3 li {
padding: 4px 0;
width: 100% !important;
}
header.navbar .category-menu ul.menu ul.dropdown-menu li span {
font-weight: 500;
color: black;
......@@ -174,14 +208,18 @@ header.navbar .category-menu ul.menu ul.dropdown-menu li span {
margin-bottom: 0;
margin-top: 0;
}
.menu--category-menu .open .dropdown-menu.three-level .sidebar-submenu-3 li a{
.menu--category-menu .open .dropdown-menu.three-level .sidebar-submenu-3 li a {
font-weight: normal !important;
padding: 0;
}
.menu--category-menu .open .dropdown-menu li a{
.menu--category-menu .open .dropdown-menu li a {
font-weight: normal;
}
.menu--category-menu .open .dropdown-menu .dropdown-menu{/* menulv 3 */
.menu--category-menu .open .dropdown-menu .dropdown-menu {
/* menulv 3 */
display: flex;
flex-direction: column;
justify-content: flex-start;
......@@ -191,40 +229,47 @@ header.navbar .category-menu ul.menu ul.dropdown-menu li span {
left: 0;
position: relative;
}
.menu--category-menu .open .dropdown-menu .dropdown-menu li{/* menulv 3 */
.menu--category-menu .open .dropdown-menu .dropdown-menu li {
/* menulv 3 */
padding: 5px 10px;
font-weight: 200;
}
.menu--category-menu .open .dropdown-menu .dropdown-menu li a{/* menulv 3 */
.menu--category-menu .open .dropdown-menu .dropdown-menu li a {
/* menulv 3 */
font-weight: 500;
}
.menu--category-menu .open .dropdown-menu li {
color : red
.menu--category-menu .open .dropdown-menu li {
color: red
}
.menu--category-menu .dropdown-toggle i{
.menu--category-menu .dropdown-toggle i {
font-size: 14px;
font-weight: 300;
top: 15px;
position: absolute;
right: 15px;
}
.region-footer-fourth .view-content{
.region-footer-fourth .view-content {
display: flex;
}
.contact_text{
.contact_text {
margin-top: 12px
}
.region-footer-fourth .view-content .img-responsive {
width: 35px;
height: 35px;
margin-right: 7px;
margin-top: 14px;
border-radius: 9px;
height: 35px;
margin-right: 7px;
margin-top: 14px;
border-radius: 9px;
}
header.navbar .category-menu ul.menu ul.dropdown-menu li{
header.navbar .category-menu ul.menu ul.dropdown-menu li {
/* border: none; */
font-weight: 200 !important;
padding: 5px 11px;
......@@ -237,6 +282,7 @@ header.navbar .category-menu ul.menu ul.dropdown-menu li{
align-items: flex-start;
padding: 24px 30px;
}
.pin_be .navbar-nav>li>.dropdown-menu li {
margin-left: 0 !important
}
......@@ -244,14 +290,17 @@ header.navbar .category-menu ul.menu ul.dropdown-menu li{
.middle-header-wrapper .container-fluid.fixed-top.no-toolbar {
top: 0
}
.footer-bottom-left{
.footer-bottom-left {
margin-top: 10px;
}
@media (min-width: 768px){
.webform-flex--container {
@media (min-width: 768px) {
.webform-flex--container {
width: 91% !important
}
}
}
.middle-header-wrapper .container-fluid.fixed-top {
position: fixed;
z-index: 2000;
......@@ -264,8 +313,9 @@ header.navbar .category-menu ul.menu ul.dropdown-menu li{
header.navbar .category-menu ul.menu.litte-menu {
height: 455px;
/* // overflow: hidden; */
/* // overflow: hidden; */
}
#scrollUp {
background: #c40316 none repeat scroll 0 0;
bottom: 85px;
......@@ -286,35 +336,36 @@ header.navbar .category-menu ul.menu.litte-menu {
-webkit-transition: 0.3s;
transition: 0.3s;
}
#scrollUp:hover i {
animation-name: fadeInUp;
animation-duration: 1s;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
@keyframes fadeInUp {
from {
transform: translate3d(0,40px,0)
transform: translate3d(0, 40px, 0)
}
to {
transform: translate3d(0,0,0);
transform: translate3d(0, 0, 0);
opacity: 1
}
}
@-webkit-keyframes fadeInUp {
from {
transform: translate3d(0,40px,0)
transform: translate3d(0, 40px, 0)
}
to {
transform: translate3d(0,0,0);
transform: translate3d(0, 0, 0);
opacity: 1
}
}
/* .top-region{
background: white;
}
......@@ -345,12 +396,11 @@ header.navbar .category-menu ul.menu.litte-menu {
.more-category:hover {
color: red;
}
.more-category:hover::before {
color: red;
border: 1.5px solid red;
border: 1.5px solid red;
}
.more-category::before {
......@@ -370,7 +420,8 @@ border: 1.5px solid red;
border-radius: 50% 50%;
border: 1.5px solid red;
}
.less-category::before{
.less-category::before {
position: absolute;
font-family: FontAwesome;
content: "\f2d1";
......@@ -386,15 +437,16 @@ border: 1.5px solid red;
border-radius: 50% 50%;
border: 1.5px solid black;
}
.less-category:hover::before {
color: red;
border: 1.5px solid red;
border: 1.5px solid red;
}
.less-category:hover {
color: red;
}
.block-region-top-categories img {
width: 100%;
height: 140px;
......@@ -422,7 +474,7 @@ border: 1.5px solid red;
.middle-header-wrapper .container-fluid {
display: flex;
align-items: center;
background: #f8ebbc;
background: #f7df24;
}
@keyframes mymove {
......@@ -454,11 +506,14 @@ border: 1.5px solid red;
font-weight: bold !important;
text-shadow: -2px 0 0 #fff, 0 -2px 0 #fff, 2px 0 0 #fff, 0 2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, -2px -2px 0 #fff, 2px 2px 0 #fff, 3px 3px 4px rgba(0, 0, 0, 0.5);
}
header .link_content:hover {
background: #f09d51;
background: #ee964a;
color: #;
}
header .link_content {
background: #ee964a;
background: #eb5335;
height: 57px;
color: white;
color: #fff !important;
......@@ -486,14 +541,14 @@ header .link_content a:hover {
border: 1px solid #e94337;
border-radius: 4px;
padding: 5px 20px;
background: #EE964B;
background: #fe0024;
color: white !important;
}
.pin_be {
display: flex;
align-items: center;
background: #f8ebbc;
background: #f7df24;
}
.cong {
......@@ -503,7 +558,7 @@ header .link_content a:hover {
height: 29px;
line-height: 25px;
width: 10px;
background: #ee964a;
background: #fe0024;
color: white;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
......@@ -516,7 +571,7 @@ header .link_content a:hover {
height: 28px;
width: 10px;
color: white;
background: #ee964a;
background: #fe0024;
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
line-height: 25px;
......@@ -531,9 +586,11 @@ header.navbar .block-search-navigation {
/* flex: 1; */
/* padding: 0 25px; */
}
#toolbar-administration, #toolbar-administration * {
z-index: 99999;
}
.search .input-group {
/* padding-left: 30px; */
position: relative;
......@@ -544,9 +601,11 @@ header.navbar .block-search-navigation {
/* border-bottom: 2px solid #ebebeb; */
border-radius: 0 5px 5px 0;
}
.search .input-group input::placeholder {
color: #333;
}
.search .input-group button {
font-size: 12px;
text-transform: uppercase;
......@@ -567,14 +626,14 @@ header.navbar .block-search-navigation {
.search .input-group input {
border: 0;
background: inherit;
background: white;
width: 100%;
height: 50px;
color: #333;
font-size: 14px;
font-weight: 400;
padding: 0 145px 0 20px;
opacity: 0.7;
/* opacity: 0.7; */
}
@media (max-width: 768px) {
......@@ -626,8 +685,6 @@ header.navbar .block-search-navigation {
line-height: 16px;
}
header.navbar .main-menu .toggle-wrap .toggle {
font-size: 20px !important;
}
......@@ -656,9 +713,9 @@ header.navbar .category-menu .block-title i {
header.navbar .block-search-navigation .search-icon {
display: none;
}.region-footer-fourth .view-content .img-responsive
}
@media (min-width: 768px) and (max-width: 991px) {
.region-footer-fourth .view-content .img-responsive @media (min-width: 768px) and (max-width: 991px) {
header.navbar div.block-search-navigation {
right: 75px !important
}
......@@ -667,74 +724,107 @@ header.navbar .block-search-navigation .search-icon {
justify-content: flex-end !important;
}
}
.btn-mobile-top{
.btn-mobile-top {
display: none;
}
.mobile-top{
.mobile-top {
display: none;
}
/* invi 1440 */
@media (max-width: 1440px) {
header.navbar .main-menu ul.menu li:first-child{
margin-left: 0!important;
.search .input-group button{
min-width: 50px !important
}
header.navbar .main-menu ul.menu li:first-child {
margin-left: 0 !important;
}
header.navbar .main-menu ul.menu li {
float: left !important;
margin-left: 15px!important;
font-size: 13px!important;
font-weight: 700!important;
margin-left: 15px !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 43px !important;
}
header.navbar .category-menu{
}
header.navbar .category-menu {
font-size: 13px
}
header.navbar .category-menu .block-title span{
}
header.navbar .category-menu .block-title span {
font-size: 13px
}
.top-header-wrapper .right-top-header ul.menu .first a{
right: 110px !important
}
.middle-header-wrapper .region-left-middle-header .branding-block .site-title .name{
}
.top-header-wrapper .container-fluid {
display: flex;
}
.top-header-wrapper .left-top-header>div {
font-size: 16px !important;
}
.top-header-wrapper .container-fluid .menu--account {
display: flex;
}
.top-header-wrapper .right-top-header ul.menu .first a {
/* right: 110px !important */
}
.middle-header-wrapper .region-left-middle-header .branding-block .site-title .name {
font-size: 26px !important;
}
.middle-header-wrapper .region-left-middle-header .branding-block .logo img{
}
.middle-header-wrapper .region-left-middle-header .branding-block .logo img {
width: 36px !important
}
.top-header-wrapper .left-top-header{
}
.top-header-wrapper .left-top-header {
margin-top: -12px !important;
}
.top-header-wrapper .left-top-header>div {
}
.top-header-wrapper .left-top-header>div {
margin: 6px 5px !important;
}
.top-header-wrapper{
}
.top-header-wrapper {
height: 100px !important;
position: relative;
}
.top-header-wrapper .left-top-header>div:first-child{
}
.top-header-wrapper .left-top-header>div:first-child {
margin-left: 5px
}
.top-header-wrapper .right-top-header ul.menu a{
position: absolute;
top: 16px;
right: 0;
width: 76px;
}
.top-header-wrapper .right-top-header ul.menu a {
/* position: absolute; */
/* top: 16px; */
/* right: 0; */
/* width: 76px; */
/* margin: auto; */
display: flex;
justify-content: center;
}
}
}
/* invi 991 response */
@media (max-width: 991px) {
header.navbar .category-menu ul.menu.litte-menu{
header.navbar .category-menu ul.menu.litte-menu {
display: none !important;
}
.region-middle-bottom-header .search-block-form{
.region-middle-bottom-header .search-block-form {
display: none !important;
}
.region-middle-header .pin_be{
.region-middle-header .pin_be {
display: none !important;
}
.btn-mobile-top{
.btn-mobile-top {
display: block !important;
background: #eb5335;
border: none;
......@@ -746,6 +836,7 @@ header.navbar .category-menu .block-title span{
position: absolute;
top: 10px;
}
.mobile-top {
display: flex !important;
flex-direction: column;
......@@ -762,23 +853,28 @@ header.navbar .category-menu .block-title span{
font-size: 14px;
padding: 0 20px;
transition: 0.5s ease-in-out;
box-shadow: 0 3px 9px rgba(0,0,0,.5);
}
.mobile-top.menu-toggle{
box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
.mobile-top.menu-toggle {
left: 0px;
}
.mobile-top .address-mobile{
}
.mobile-top .address-mobile {
padding: 41px 0px 20px;
}
.mobile-top .address-mobile div{
padding: 5px 0 ;
}
.mobile-top .address-mobile div {
padding: 5px 0;
font-size: 15px;
font-weight: 500;
}
.mobile-top .pin_be{
}
.mobile-top .pin_be {
position: relative !important;
}
.close-icon{
}
.close-icon {
border: 1.5px solid black;
display: flex;
align-items: center;
......@@ -791,8 +887,9 @@ header.navbar .category-menu .block-title span{
top: 10px;
right: 10px;
justify-content: center;
}
.mobile-modal{
}
.mobile-modal {
background: black;
opacity: 0.8;
top: 0;
......@@ -802,8 +899,9 @@ header.navbar .category-menu .block-title span{
width: 100%;
height: 100%;
/* justify-content: center; */
}
.mobile-top .input-group{
}
.mobile-top .input-group {
position: relative;
width: 100%;
margin-top: 14px;
......@@ -813,15 +911,17 @@ header.navbar .category-menu .block-title span{
margin-bottom: 25px;
/* border-left: 2px solid #ebebeb; */
border-radius: 10px;
}
.btn-primary:hover{
}
.btn-primary:hover {
background: #e94537 !important;
}
.btn-primary{
}
.btn-primary {
border-color: #e94537 !important;
}
}
.mobile-top .input-group input{
.mobile-top .input-group input {
font-size: 12px;
padding: 0 92px 0 10px;
width: 100%;
......@@ -837,53 +937,64 @@ header.navbar .category-menu .block-title span{
opacity: 0.7;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
}
.mobile-top .input-group button{
.mobile-top .input-group button {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
width: 60px;
}
}
.region-mobile-top{
width : 100% ;
}
.region-mobile-top .toggle-wrap {
.region-mobile-top {
width: 100%;
}
.region-mobile-top .toggle-wrap {
display: none !important;
}
.region-mobile-top .tru {
}
.region-mobile-top .tru {
display: none !important;
}
.region-mobile-top .cong {
}
.region-mobile-top .cong {
display: none !important;
}
.region-mobile-top .navbar-nav{
}
.region-mobile-top .navbar-nav {
margin-left: 0
}
.region-mobile-top .pin{
}
.region-mobile-top .pin {
width: 100%;
background: none;
border: none;
color: black !important;
}
.region-mobile-top .pin a{
}
.region-mobile-top .pin a {
color: black;
font-weight: 500;
font-size: 14px;
text-transform: uppercase;
}
header.navbar .category-menu ul.menu.hide-block{
}
header.navbar .category-menu ul.menu.hide-block {
display: block !important;
}
header.navbar .category-menu ul.menu.not-home{
header.navbar .category-menu ul.menu.not-home {
display: block !important;
}
header.navbar .category-menu ul.menu.hide-block.not-home{
header.navbar .category-menu ul.menu.hide-block.not-home {
display: none !important
}
header.navbar .category-menu ul.menu{
header.navbar .category-menu ul.menu {
display: none !important;
}
.search .input-group button {
min-width: 20px !important;
}
......@@ -1051,9 +1162,6 @@ header.navbar .category-menu .block-title span{
/* flex-direction: column; */
}
header.navbar .main-menu {
margin-right: 10px;
margin-left: 6px;
......@@ -5138,7 +5246,7 @@ fieldset[disabled] .btn-default.focus {
.btn-primary:hover {
color: #fff;
/* border-color: #006889; */
/* border-color: #eb5335; */
background-color: #F6E8EA;
}
......@@ -5146,7 +5254,7 @@ fieldset[disabled] .btn-default.focus {
.btn-primary.active,
.open>.btn-primary.dropdown-toggle {
color: #fff;
border-color: #006889;
border-color: #eb5335;
background-color: #0083ad;
}
......@@ -5161,7 +5269,7 @@ fieldset[disabled] .btn-default.focus {
.open>.btn-primary.dropdown-toggle.focus {
color: #fff;
border-color: #003647;
background-color: #006889;
background-color: #eb5335;
}
.btn-primary:active,
......@@ -5980,7 +6088,7 @@ tbody.collapse.in {
}
.input-group .form-control:focus {
z-index: 3;
z-index: 0;
outline: none;
border: none;
box-shadow: none;
......@@ -10192,6 +10300,7 @@ body.toolbar-loading.toolbar {
height: 50px;
display: flex;
/* justify-content: center; */
background: #faeed9;
align-items: center;
}
......@@ -10218,9 +10327,10 @@ body.toolbar-loading.toolbar {
}
@media (max-width: 991px) {
.top-header-wrapper{
.top-header-wrapper {
display: none !important;
}
.top-header-wrapper .left-top-header {
float: none;
text-align: center;
......@@ -10238,6 +10348,7 @@ body.toolbar-loading.toolbar {
.top-header-wrapper .right-top-header ul.menu a {
font-size: 13px;
font-weight: 600;
white-space: nowrap;
line-height: 38px;
margin: 0 5px;
color: #e94337;
......@@ -10656,14 +10767,15 @@ header.navbar .main-menu ul.menu li a {
line-height: inherit;
white-space: nowrap;
}
header.navbar .main-menu ul.menu li a i{
header.navbar .main-menu ul.menu li a i {
font-size: 12px;
line-height: 13px
font-weight: 400;
line-height: 13px font-weight: 400;
padding-left: 6px;
}
header.navbar .main-menu ul.menu li a:hover {
color: #e94337;
color: #f7e558;
}
@media (max-width: 767px) {
......@@ -10907,7 +11019,7 @@ header.navbar .block-search-navigation .search-icon.active {
.footer {
padding: 50px 0 0 0;
background-color: #f8ebbc;
background-color: #f7df24;
}
.footer .block .block-title {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment