Skip to content

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

edit css responsive

parent f1b0c3ca
Show whitespace changes
Inline Side-by-side
Showing with 292 additions and 56 deletions
themes/contrib/estore/css/styles.css
View file @ 87b2423f
......@@ -21,6 +21,13 @@ body {
}
/* invi custom */
.middle-header-wrapper{
background-color: #f8ebbc !important;
}
.bottom-nav{
background-color: #f8ebbc !important;
padding-bottom: 16px;
}
.menu--main .open ul.sidebar-submenu-2 li:hover {
background: white !important;
}
......@@ -103,7 +110,7 @@ body {
}
.menu--category-menu .open ul.sidebar-submenu-2 li {
border-bottom: none !important;
width: 170px !important
width: 251px !important;
}
.menu--category-menu .open ul.sidebar-submenu-2.three-level{
flex-direction: row !important;
......@@ -111,7 +118,7 @@ body {
.menu--category-menu .open ul.sidebar-submenu-2 li a{
white-space: normal;
padding: 0 5px;
padding: 0 5px !important;
}
.menu--category-menu .open ul.sidebar-submenu-2 {
padding: 10px 5px 20px !important;
......@@ -137,8 +144,21 @@ body {
.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;
font-size: 15px;
letter-spacing: 0.5px;
margin-bottom: 0;
margin-top: 0;
}
.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{
font-weight: normal;
......@@ -189,7 +209,7 @@ border-radius: 9px;
header.navbar .category-menu ul.menu ul.dropdown-menu li{
/* border: none; */
font-weight: 200 !important;
padding: 5px 0px;
padding: 5px 11px;
}
.pin_be .navbar-nav>li.open>.dropdown-menu {
......@@ -216,12 +236,12 @@ header.navbar .category-menu ul.menu ul.dropdown-menu li{
}
.middle-header-wrapper .container-fluid.fixed-top {
position: fixed;
z-index: 200000;
z-index: 2000;
top: 76px;
left: 0;
right: 0;
width: 100%;
background: rgba(255, 255, 255, 0.95);
/* background: rgba(255, 255, 255, 0.95); */
}
header.navbar .category-menu ul.menu.litte-menu {
......@@ -384,7 +404,7 @@ border: 1.5px solid red;
.middle-header-wrapper .container-fluid {
display: flex;
align-items: center;
background: white;
background: #f8ebbc;
}
@keyframes mymove {
......@@ -420,7 +440,7 @@ header .link_content:hover {
background: #f09d51;
}
header .link_content {
background: #e94537;
background: #ee964a;
height: 57px;
color: white;
color: #fff !important;
......@@ -448,28 +468,40 @@ header .link_content a:hover {
border: 1px solid #e94337;
border-radius: 4px;
padding: 5px 20px;
background: #ff000026;
background: #EE964B;
color: white !important;
}
.pin_be {
display: flex;
align-items: center;
background: #f8ebbc;
}
.cong {
border-top: 1px solid #e94337;
border-bottom: 1px solid #e94337;
border-left: 1px solid #e94337;
height: 26px;
height: 29px;
line-height: 25px;
width: 10px;
background: #ee964a;
color: white;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.tru {
border-top: 1px solid #e94337;
border-bottom: 1px solid #e94337;
border-right: 1px solid #e94337;
height: 26px;
height: 28px;
width: 10px;
color: white;
background: #ee964a;
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
line-height: 25px;
}
html {
......@@ -481,18 +513,22 @@ 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;
width: 100%;
/* max-width: 650px; */
border: 2px solid #ebebeb;
border: 2px solid #e94537;
/* border-right: 2px solid #ebebeb; */
/* 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;
......@@ -516,7 +552,7 @@ header.navbar .block-search-navigation {
background: inherit;
width: 100%;
height: 50px;
color: #222222;
color: #333;
font-size: 14px;
font-weight: 400;
padding: 0 145px 0 20px;
......@@ -572,14 +608,7 @@ header.navbar .block-search-navigation {
line-height: 16px;
}
div.pin_be {
position: absolute !important;
right: -41px !important;
top: 9px !important;
/* margin-left: 20px !important; */
width: 35px;
height: 35px;
}
header.navbar .main-menu .toggle-wrap .toggle {
font-size: 20px !important;
......@@ -620,9 +649,173 @@ header.navbar .block-search-navigation .search-icon {
justify-content: flex-end !important;
}
}
.btn-mobile-top{
display: none;
}
.mobile-top{
display: none;
}
/* invi 991 response */
@media (max-width: 991px) {
header.navbar .category-menu ul.menu.litte-menu{
display: none !important;
}
.region-middle-bottom-header .search-block-form{
display: none !important;
}
.region-middle-header .pin_be{
display: none !important;
}
.btn-mobile-top{
display: block !important;
background: #eb5335;
border: none;
width: 30px;
height: 30px;
color: white;
/* padding-top: 10px; */
border-radius: 4px;
position: absolute;
top: 10px;
}
.mobile-top {
display: flex !important;
flex-direction: column;
align-items: flex-start;
width: 300px;
position: absolute;
top: 0;
left: -300px;
z-index: 999999;
height: 100vh;
background: #f8ebbc;
color: black;
font-weight: 500;
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{
left: 0px;
}
.mobile-top .address-mobile{
padding: 41px 0px 20px;
}
.mobile-top .address-mobile div{
padding: 5px 0 ;
font-size: 15px;
font-weight: 500;
}
.mobile-top .pin_be{
position: relative !important;
}
.close-icon{
border: 1.5px solid black;
display: flex;
align-items: center;
width: 25px;
height: 25px;
font-size: 15px;
font-weight: 200;
border-radius: 6px;
position: absolute;
top: 10px;
right: 10px;
justify-content: center;
}
.mobile-modal{
background: black;
opacity: 0.8;
top: 0;
left: 0;
position: fixed;
z-index: 99998;
width: 100%;
height: 100%;
/* justify-content: center; */
}
.mobile-top .input-group{
position: relative;
width: 100%;
margin-top: 14px;
/* border-top: 2px solid black; */
/* border-right: 2px solid black; */
/* border-bottom: 2px solid #ebebeb; */
margin-bottom: 25px;
/* border-left: 2px solid #ebebeb; */
border-radius: 10px;
}
.btn-primary:hover{
background: #e94537 !important;
}
.btn-primary{
border-color: #e94537 !important;
}
.mobile-top .input-group input{
font-size: 12px;
padding: 0 92px 0 10px;
width: 100%;
height: 34px;
border: 0;
background: white;
/* width: 100%; */
/* height: 50px; */
color: #222222;
/* font-size: 14px; */
font-weight: 400;
/* padding: 0 145px 0 20px; */
opacity: 0.7;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.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 {
display: none !important;
}
.region-mobile-top .tru {
display: none !important;
}
.region-mobile-top .cong {
display: none !important;
}
.region-mobile-top .navbar-nav{
margin-left: 0
}
.region-mobile-top .pin{
width: 100%;
background: none;
border: none;
color: black !important;
}
.region-mobile-top .pin a{
color: black;
font-weight: 500;
font-size: 14px;
text-transform: uppercase;
}
header.navbar .category-menu ul.menu.hide-block{
display: block !important;
}
header.navbar .category-menu ul.menu.not-home{
display: block !important;
}
header.navbar .category-menu ul.menu.hide-block.not-home{
display: none !important
}
header.navbar .category-menu ul.menu{
display: none !important;
}
.search .input-group button {
min-width: 20px !important;
}
......@@ -790,29 +983,8 @@ header.navbar .block-search-navigation .search-icon {
/* flex-direction: column; */
}
.pin_be {
float: right;
padding: auto;
/* left: 30px; */
border: 1px solid #e2e2e2;
right: -50px !important;
position: absolute;
}
.pin_be div {
border: none;
/* border: 1px solid #e2e2e2; */
/* display: none; */
/* padding-left: 22px; */
}
.pin_be .cong {
display: none
}
.pin_be .tru {
display: none
}
header.navbar .main-menu {
margin-right: 10px;
......@@ -4175,7 +4347,7 @@ output {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
/* box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); */
}
.form-control::-moz-placeholder {
......@@ -5741,6 +5913,9 @@ tbody.collapse.in {
.input-group .form-control:focus {
z-index: 3;
outline: none;
border: none;
box-shadow: none;
}
.input-group-addon,
......@@ -9960,12 +10135,13 @@ body.toolbar-loading.toolbar {
float: left;
margin-top: 12px;
line-height: 12px;
/* font-size: 45px; */
}
.top-header-wrapper .left-top-header>div {
display: inline-block;
margin: 0 5px;
font-size: 13px;
font-size: 14px;
/* font-weight: 600; */
}
......@@ -9974,6 +10150,9 @@ body.toolbar-loading.toolbar {
}
@media (max-width: 991px) {
.top-header-wrapper{
display: none !important;
}
.top-header-wrapper .left-top-header {
float: none;
text-align: center;
......@@ -10009,7 +10188,7 @@ body.toolbar-loading.toolbar {
.top-header-wrapper .right-top-header ul.menu a:hover {
color: #fff;
background-color: #380801;
background-color: #ee964a;
}
@media (max-width: 991px) {
......@@ -10066,6 +10245,8 @@ body.toolbar-loading.toolbar {
.middle-header-wrapper .region-left-middle-header .branding-block .site-title {
float: left;
padding-top: 5px;
display: flex;
align-items: center;
}
.middle-header-wrapper .region-left-middle-header .branding-block .site-title .name {
......@@ -10073,7 +10254,7 @@ body.toolbar-loading.toolbar {
color: #454545;
font-size: 28px;
font-weight: bold;
line-height: 1.3;
/* line-height: 1.3; */
white-space: nowrap;
}
......@@ -10289,7 +10470,7 @@ header.navbar .category-menu .block-title i {
header.navbar .category-menu .block-title.active,
header.navbar .category-menu .block-title:hover {
background-color: #e94337;
background-color: #F95738;
}
@media (max-width: 991px) {
......@@ -10304,7 +10485,7 @@ header.navbar .category-menu .block-title:hover {
header.navbar .category-menu ul.menu {
position: absolute;
z-index: 999;
top: 100px;
top: 114px;
left: 0;
display: block;
width: 100%;
......@@ -10402,7 +10583,7 @@ header.navbar .main-menu ul.menu li a {
display: block;
padding: 0;
text-transform: uppercase;
color: #333;
color: white;
text-align: right;
line-height: inherit;
white-space: nowrap;
......@@ -10658,7 +10839,7 @@ header.navbar .block-search-navigation .search-icon.active {
.footer {
padding: 50px 0 0 0;
background-color: #fbe3ce;
background-color: #f8ebbc;
}
.footer .block .block-title {
......
themes/contrib/estore/estore.info.yml
View file @ 87b2423f
......@@ -12,6 +12,7 @@ libraries:
# Regions.
regions:
mobile_top : 'Mobile top'
top_header_right: 'Top Header Right'
left_middle_header: 'Left Middle Header'
middle_header: 'Middle Header'
......
themes/contrib/estore/js/custom.js
View file @ 87b2423f
......@@ -37,6 +37,8 @@
}
if (checkHome.length == 0) {
$(".menu.menu--category-menu.nav").addClass('hide-block');
$(".menu.menu--category-menu.nav").addClass('not-home');
}
$(window).scroll(function () {
// console.log($(window).scrollTop() )
......@@ -72,8 +74,20 @@
$(".dropdown-toggle").mouseleave(function(){
$(this).parent("li.expanded.dropdown").removeClass("open");
})
console.log($(".sidebar-submenu-2").find(".sidebar-submenu-3").parents(".sidebar-submenu-2"));
$(".sidebar-submenu-2").find(".sidebar-submenu-3").parents(".sidebar-submenu-2").addClass("three-level");
$(".mobile-modal").hide();
$(".btn-mobile-top").click(function(){
$(".mobile-modal").show();
$(".mobile-top").addClass("menu-toggle");
})
$(".mobile-modal").click(function(){
$(".mobile-modal").hide();
$(".mobile-top").removeClass("menu-toggle");
})
$(".close-icon").click(function(){
$(".mobile-top").removeClass("menu-toggle");
$(".mobile-modal").hide();
})
})(window.jQuery, window.Drupal);
themes/contrib/estore/templates/block/block--system-branding-block.html.twig
View file @ 87b2423f
......@@ -19,7 +19,7 @@
<div class="branding-block clearfix">
{% if site_logo %}
<a class="logo navbar-btn pull-left" href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">
<img class="logo_img" src="/themes/contrib/estore/logo.png" alt="{{ 'Home'|t }}" />
<img class="logo_img" src="/themes/contrib/estore/logo.svg" alt="{{ 'Home'|t }}" />
</a>
{% endif %}
......
themes/contrib/estore/templates/layouts/homepage/first/homepage--first.html.twig
View file @ 87b2423f
......@@ -12,7 +12,7 @@
*/
#}
{% if content %}
<div{{ attributes .addClass('estore-homepage-first')}}>
<div{{ attributes.addClass('estore-homepage-first')}}>
{% if content.top_slideshow or content.top_categories %}
<div class="top-region">
......
themes/contrib/estore/templates/system/page.html.twig
View file @ 87b2423f
......@@ -62,6 +62,40 @@
theme.settings.navbar_position ? 'navbar-' ~ theme.settings.navbar_position|clean_class,
]
%}
<div class="mobile-top">
<div class="close-icon">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
<div class="address-mobile">
{% if top_header.header_email %}
<div class="site-email">
<i class="fa fa-envelope"></i>
{{ top_header.header_email }}
</div>
{% endif %}
{% if top_header.header_phone %}
<div class="site-phone">
<i class="fa fa-phone"></i>
{{ top_header.header_phone }}
</div>
{% endif %}
{% if top_header.header_location %}
<div class="site-map-marker">
<i class="fa fa-map-marker"></i>
{{ top_header.header_location }}
</div>
{% endif %}
{% if top_header.header_shop_opens %}
<div class="site-clock-o">
<i class="fa fa-clock-o"></i>
{{ top_header.header_shop_opens }}
</div>
{% endif %}
</div>
{% if page.mobile_top %}
{{ page.mobile_top }}
{% endif %}
</div>
<div class="top-header-wrapper clearfix">
<div class="container-fluid">
<div class="left-top-header">
......@@ -97,7 +131,9 @@
</div>
</div>
</div>
<div class="mobile-modal">
</div>
<div class="middle-header-wrapper clearfix">
<div class="container-fluid">
<div class="col-md-3 col-xs-7">
......@@ -115,18 +151,22 @@
</div>
</header>
<button type="button" name="button" class="btn-mobile-top">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
</div>
<div class="col-md-2 col-xs-3">
{% if page.right_middle_header %}
{{ page.right_middle_header }}
{% endif %}
</div>
</div>
</div>
<header{{ navbar_attributes.addclass(navbar_classes) }} id="navbar" role="banner">
<header{{ navbar_attributes.addclass(navbar_classes, 'bottom-nav') }} id="navbar" role="banner">
{% if not navbar_attributes.hasClass(container) %}
<div class="{{ container }}">
{% endif %}
......
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