Skip to content

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

edit responsive

parent 87b2423f
Hide whitespace changes
Inline Side-by-side
Showing with 275 additions and 210 deletions
themes/contrib/estore/css/styles.css
View file @ be8bacb5
...@@ -20,7 +20,22 @@ body { ...@@ -20,7 +20,22 @@ body {
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
} }
/* custom product */
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"]{
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;
}
/* invi custom */ /* invi custom */
.middle-header-wrapper{ .middle-header-wrapper{
background-color: #f8ebbc !important; background-color: #f8ebbc !important;
} }
...@@ -38,7 +53,9 @@ body { ...@@ -38,7 +53,9 @@ body {
.menu--main .open ul.sidebar-submenu-2.three-level{ .menu--main .open ul.sidebar-submenu-2.three-level{
flex-direction: row !important; flex-direction: row !important;
} }
.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; white-space: normal;
padding: 0 5px; padding: 0 5px;
...@@ -52,6 +69,7 @@ body { ...@@ -52,6 +69,7 @@ body {
.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 padding: 7px 0
} }
/* .menu--main .open ul.sidebar-submenu-2 ul.slidebar-submenu-3 { /* .menu--main .open ul.sidebar-submenu-2 ul.slidebar-submenu-3 {
display: flex; display: flex;
flex-direction: column !important; flex-direction: column !important;
...@@ -655,6 +673,56 @@ header.navbar .block-search-navigation .search-icon { ...@@ -655,6 +673,56 @@ header.navbar .block-search-navigation .search-icon {
.mobile-top{ .mobile-top{
display: none; display: none;
} }
/* invi 1440 */
@media (max-width: 1440px) {
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;
line-height: 43px !important;
}
header.navbar .category-menu{
font-size: 13px
}
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{
font-size: 26px !important;
}
.middle-header-wrapper .region-left-middle-header .branding-block .logo img{
width: 36px !important
}
.top-header-wrapper .left-top-header{
margin-top: -12px !important;
}
.top-header-wrapper .left-top-header>div {
margin: 6px 5px !important;
}
.top-header-wrapper{
height: 100px !important;
position: relative;
}
.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;
/* margin: auto; */
display: flex;
justify-content: center;
}
}
/* invi 991 response */ /* invi 991 response */
@media (max-width: 991px) { @media (max-width: 991px) {
header.navbar .category-menu ul.menu.litte-menu{ header.navbar .category-menu ul.menu.litte-menu{
...@@ -10562,7 +10630,7 @@ header.navbar .main-menu .toggle-wrap { ...@@ -10562,7 +10630,7 @@ header.navbar .main-menu .toggle-wrap {
header.navbar .main-menu ul.menu li { header.navbar .main-menu ul.menu li {
float: left; float: left;
margin-left: 38px; margin-left: 30px;
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 700;
line-height: 43px; line-height: 43px;
......
themes/contrib/estore/logo.png
View replaced file @ 87b2423f View file @ be8bacb5
This image diff could not be displayed because it is too large. You can view the blob instead.
themes/contrib/estore/templates/block/block--system-branding-block.html.twig
View file @ be8bacb5
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<div class="branding-block clearfix"> <div class="branding-block clearfix">
{% if site_logo %} {% if site_logo %}
<a class="logo navbar-btn pull-left" href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home"> <a class="logo navbar-btn pull-left" href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">
<img class="logo_img" src="/themes/contrib/estore/logo.svg" alt="{{ 'Home'|t }}" /> <img class="logo_img" src="/themes/contrib/estore/logo.png" alt="{{ 'Home'|t }}" />
</a> </a>
{% endif %} {% endif %}
......
themes/contrib/estore/templates/system/page.html.twig
View file @ be8bacb5
...@@ -54,19 +54,51 @@ ...@@ -54,19 +54,51 @@
{% set container = theme.settings.fluid_container ? 'container-fluid' : 'container' %} {% set container = theme.settings.fluid_container ? 'container-fluid' : 'container' %}
{# Navbar #} {# Navbar #}
{% block navbar %} {% block navbar %}
{% {%
set navbar_classes = [ set navbar_classes = [
'navbar', 'navbar',
theme.settings.navbar_inverse ? 'navbar-inverse' : 'navbar-default', theme.settings.navbar_inverse ? 'navbar-inverse' : 'navbar-default',
theme.settings.navbar_position ? 'navbar-' ~ theme.settings.navbar_position|clean_class, theme.settings.navbar_position ? 'navbar-' ~ theme.settings.navbar_position|clean_class,
] ]
%} %}
<div class="mobile-top"> <div class="mobile-top">
<div class="close-icon"> <div class="close-icon">
<i class="fa fa-times" aria-hidden="true"></i> <i class="fa fa-times" aria-hidden="true"></i>
</div> </div>
<div class="address-mobile"> <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">
{% if top_header.header_email %} {% if top_header.header_email %}
<div class="site-email"> <div class="site-email">
<i class="fa fa-envelope"></i> <i class="fa fa-envelope"></i>
...@@ -92,144 +124,109 @@ ...@@ -92,144 +124,109 @@
</div> </div>
{% endif %} {% endif %}
</div> </div>
{% if page.mobile_top %} <div class="right-top-header">
{{ page.mobile_top }} {% if page.top_header_right %}
{% endif %} {{ page.top_header_right }}
</div> {% endif %}
<div class="top-header-wrapper clearfix">
<div class="container-fluid">
<div class="left-top-header">
{% 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>
<div class="right-top-header">
{% if page.top_header_right %}
{{ page.top_header_right }}
{% endif %}
</div>
</div> </div>
</div> </div>
<div class="mobile-modal"> </div>
<div class="mobile-modal"></div>
<div class="middle-header-wrapper clearfix">
<div class="container-fluid">
<div class="col-md-3 col-xs-7">
{% if page.left_middle_header %}
{{ page.left_middle_header }}
{% endif %}
</div>
</div> <div class="col-lg-6 col-md-7 col-xs-2 order-button text-center">
<div class="middle-header-wrapper clearfix"> <header{{ navbar_attributes.addclass(navbar_classes) }} id="navbar" role="banner">
<div class="container-fluid"> <div class="navbar-header">
<div class="col-md-3 col-xs-7"> {% if page.middle_header %}
{% if page.left_middle_header %} {{ page.middle_header }}
{{ page.left_middle_header }} {% endif %}
{% endif %} </div>
</div>
<div class="col-md-7 col-xs-2 order-button text-center"> </header>
<header{{ navbar_attributes.addclass(navbar_classes) }} id="navbar" role="banner"> <button type="button" name="button" class="btn-mobile-top">
<div class="navbar-header"> <i class="fa fa-bars" aria-hidden="true"></i>
{% if page.middle_header %} </button>
{{ page.middle_header }} </div>
{% endif %}
</div>
</header> <div class="col-md-2 col-lg-3 col-xs-3">
<button type="button" name="button" class="btn-mobile-top"> {% if page.right_middle_header %}
<i class="fa fa-bars" aria-hidden="true"></i> {{ page.right_middle_header }}
</button> {% endif %}
</div>
</div>
<div class="col-md-2 col-xs-3"> </div>
{% if page.right_middle_header %} </div>
{{ page.right_middle_header }}
{% endif %}
</div> <header{{ navbar_attributes.addclass(navbar_classes, 'bottom-nav') }} id="navbar" role="banner">
{% if not navbar_attributes.hasClass(container) %}
<div class="{{ container }}">
{% endif %}
<div class="navbar-header">
{{ page.navigation }}
<div class="row">
<div class="col-lg-3 col-xs-6 col-md-3">
{{page.right_bottom_header}}
</div>
<div class="col-lg-6 col-md-6">
{{page.middle_bottom_header}}
</div>
<div class="col-lg-3 col-xs-6 col-md-3">
{{page.left_bottom_header}}
</div> </div>
</div> </div>
</div>
<header{{ navbar_attributes.addclass(navbar_classes, 'bottom-nav') }} id="navbar" role="banner"> {# Navigation (collapsible) #}
{% if not navbar_attributes.hasClass(container) %} {% if page.navigation_collapsible %}
<div class="{{ container }}"> <div id="navbar-collapse" class="navbar-collapse collapse">
{% endif %}
<div class="navbar-header">
{{ page.navigation }}
<div class="row">
<div class="col-lg-3 col-xs-6 col-md -6">
{{page.right_bottom_header}}
</div>
<div class="col-lg-6">
{{page.middle_bottom_header}}
</div>
<div class="col-lg-3 col-xs-6 col-md-6">
{{page.left_bottom_header}}
</div>
</div>
</div>
{# Navigation (collapsible) #} {{ page.navigation_collapsible }}
{% if page.navigation_collapsible %} </div>
<div id="navbar-collapse" class="navbar-collapse collapse"> {% endif %}
{% if not navbar_attributes.hasClass(container) %}
</div>
{% endif %}
</header>
{% endblock %}
{{ page.navigation_collapsible }} {# Main #}
</div> {% block main %}
{% endif %} {# Header #}
{% if not navbar_attributes.hasClass(container) %} {% if page.header %}
</div> {% block header %}
{% endif %} <div class="header-region clearfix" role="heading">
</header> <div class="container-fluid">
{% endblock %} <div class="header-inner">
{{ page.header }}
</div>
</div>
</div>
{% endblock %}
{% endif %}
<div role="main" class="main-container {{ container }} js-quickedit-main-content">
<div class="main-container-inner">
{# Main #} {# Sidebar First #}
{% block main %} {% if page.sidebar_first %}
{# Header #} {% block sidebar_first %}
{% if page.header %} <aside class="col-sm-3" role="complementary">
{% block header %} {{ page.sidebar_first }}
<div class="header-region clearfix" role="heading"> </aside>
<div class="container-fluid">
<div class="header-inner">
{{ page.header }}
</div>
</div>
</div>
{% endblock %} {% endblock %}
{% endif %} {% endif %}
<div role="main" class="main-container {{ container }} js-quickedit-main-content"> {# Content #}
<div class="main-container-inner"> {%
{# Sidebar First #}
{% if page.sidebar_first %}
{% block sidebar_first %}
<aside class="col-sm-3" role="complementary">
{{ page.sidebar_first }}
</aside>
{% endblock %}
{% endif %}
{# Content #}
{%
set content_classes = [ set content_classes = [
page.sidebar_first and page.sidebar_second ? 'col-sm-6', page.sidebar_first and page.sidebar_second ? 'col-sm-6',
page.sidebar_first and page.sidebar_second is empty ? 'col-sm-9', page.sidebar_first and page.sidebar_second is empty ? 'col-sm-9',
...@@ -237,92 +234,92 @@ ...@@ -237,92 +234,92 @@
page.sidebar_first is empty and page.sidebar_second is empty ? 'col-sm-12' page.sidebar_first is empty and page.sidebar_second is empty ? 'col-sm-12'
] ]
%} %}
<section{{ content_attributes.addClass(content_classes) }}> <section{{ content_attributes.addClass(content_classes) }}>
{# Highlighted #} {# Highlighted #}
{% if page.highlighted %} {% if page.highlighted %}
{% block highlighted %} {% block highlighted %}
<div class="highlighted">{{ page.highlighted }}</div> <div class="highlighted">{{ page.highlighted }}</div>
{% endblock %} {% endblock %}
{% endif %} {% endif %}
{# Help #} {# Help #}
{% if page.help %} {% if page.help %}
{% block help %} {% block help %}
{{ page.help }} {{ page.help }}
{% endblock %} {% endblock %}
{% endif %} {% endif %}
{# Content #} {# Content #}
{% block content %} {% block content %}
<a id="main-content"></a> <a id="main-content"></a>
{{ page.content }} {{ page.content }}
{% endblock %} {% endblock %}
</section> </section>
{# Sidebar Second #} {# Sidebar Second #}
{% if page.sidebar_second %} {% if page.sidebar_second %}
{% block sidebar_second %} {% block sidebar_second %}
<aside class="col-sm-3" role="complementary"> <aside class="col-sm-3" role="complementary">
{{ page.sidebar_second }} {{ page.sidebar_second }}
</aside> </aside>
{% endblock %} {% endblock %}
{% endif %} {% endif %}
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
<a id="scrollUp" href="#top" style="position: fixed; z-index: 2147483647; display: block;"> <a id="scrollUp" href="#top" style="position: fixed; z-index: 2147483647; display: block;">
<i class="fa fa-angle-double-up"></i> <i class="fa fa-angle-double-up"></i>
</a> </a>
{% block footer %} {% block footer %}
<footer class="footer" role="contentinfo"> <footer class="footer" role="contentinfo">
<div class="footer-top clearfix"> <div class="footer-top clearfix">
<div class="container-fluid"> <div class="container-fluid">
{% if page.footer_first %} {% if page.footer_first %}
<div class="footer-first col-sm-6 col-md-3"> <div class="footer-first col-sm-6 col-md-3">
{{ page.footer_first }} {{ page.footer_first }}
</div>
{% endif %}
{% if page.footer_second %}
<div class="footer-second col-sm-6 col-md-3">
{{ page.footer_second }}
</div>
{% endif %}
{% if page.footer_third %}
<div class="footer-third col-sm-6 col-md-3">
{{ page.footer_third }}
</div>
{% endif %}
{% if page.footer_fourth %}
<div class="footer-fourth col-sm-6 col-md-3">
{{ page.footer_fourth }}
</div>
{% endif %}
</div> </div>
</div> {% endif %}
{% if page.footer_second %}
<div class="footer-second col-sm-6 col-md-3">
{{ page.footer_second }}
</div>
{% endif %}
{% if page.footer_third %}
<div class="footer-third col-sm-6 col-md-3">
{{ page.footer_third }}
</div>
{% endif %}
{% if page.footer_fourth %}
<div class="footer-fourth col-sm-6 col-md-3">
{{ page.footer_fourth }}
</div>
{% endif %}
</div>
</div>
<div class="footer-bottom clearfix"> <div class="footer-bottom clearfix">
<div class="container-fluid"> <div class="container-fluid">
<div class="footer-bottom-left"> <div class="footer-bottom-left">
{% if copyright_text %} {% if copyright_text %}
{{ copyright_text }} {{ copyright_text }}
{% endif %} {% endif %}
{% if page.footer_bottom_left %} {% if page.footer_bottom_left %}
{{ page.footer_bottom_left }} {{ page.footer_bottom_left }}
{% endif %} {% endif %}
</div> </div>
<div class="footer-bottom-right"> <div class="footer-bottom-right">
{% if theme_credits %} {% if theme_credits %}
<div class="theme-credits"> <div class="theme-credits">
{{ theme_credits }} {{ theme_credits }}
</div>
{% endif %}
{% if page.footer_bottom_right %}
{{ page.footer_bottom_right }}
{% endif %}
</div> </div>
</div> {% endif %}
{% if page.footer_bottom_right %}
{{ page.footer_bottom_right }}
{% endif %}
</div> </div>
</div>
</div>
</footer> </footer>
{% endblock %} {% endblock %}
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