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 {
-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 */
.middle-header-wrapper{
background-color: #f8ebbc !important;
}
......@@ -38,7 +53,9 @@ body {
.menu--main .open ul.sidebar-submenu-2.three-level{
flex-direction: row !important;
}
.middle-header-wrapper .col-md-3{
padding: 0 !important
}
.menu--main .open ul.sidebar-submenu-2 li a{
white-space: normal;
padding: 0 5px;
......@@ -52,6 +69,7 @@ body {
.menu--main .open ul.sidebar-submenu-2.sidebar-submenu-3 li{
padding: 7px 0
}
/* .menu--main .open ul.sidebar-submenu-2 ul.slidebar-submenu-3 {
display: flex;
flex-direction: column !important;
......@@ -655,6 +673,56 @@ header.navbar .block-search-navigation .search-icon {
.mobile-top{
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 */
@media (max-width: 991px) {
header.navbar .category-menu ul.menu.litte-menu{
......@@ -10562,7 +10630,7 @@ header.navbar .main-menu .toggle-wrap {
header.navbar .main-menu ul.menu li {
float: left;
margin-left: 38px;
margin-left: 30px;
font-size: 14px;
font-weight: 700;
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 @@
<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.svg" alt="{{ 'Home'|t }}" />
<img class="logo_img" src="/themes/contrib/estore/logo.png" alt="{{ 'Home'|t }}" />
</a>
{% endif %}
......
themes/contrib/estore/templates/system/page.html.twig
View file @ be8bacb5
......@@ -54,19 +54,51 @@
{% set container = theme.settings.fluid_container ? 'container-fluid' : 'container' %}
{# Navbar #}
{% block navbar %}
{%
{% block navbar %}
{%
set navbar_classes = [
'navbar',
theme.settings.navbar_inverse ? 'navbar-inverse' : 'navbar-default',
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">
<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">
{% if top_header.header_email %}
<div class="site-email">
<i class="fa fa-envelope"></i>
......@@ -92,144 +124,109 @@
</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 %}
<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 class="right-top-header">
{% if page.top_header_right %}
{{ page.top_header_right }}
{% endif %}
</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="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 class="col-lg-6 col-md-7 col-xs-2 order-button text-center">
<header{{ navbar_attributes.addclass(navbar_classes) }} id="navbar" role="banner">
<div class="navbar-header">
{% if page.middle_header %}
{{ page.middle_header }}
{% endif %}
</div>
<div class="col-md-7 col-xs-2 order-button text-center">
<header{{ navbar_attributes.addclass(navbar_classes) }} id="navbar" role="banner">
<div class="navbar-header">
{% if page.middle_header %}
{{ page.middle_header }}
{% endif %}
</div>
</header>
<button type="button" name="button" class="btn-mobile-top">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
</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-lg-3 col-xs-3">
{% if page.right_middle_header %}
{{ page.right_middle_header }}
{% endif %}
</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, '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>
<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 -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) #}
{% if page.navigation_collapsible %}
<div id="navbar-collapse" class="navbar-collapse collapse">
{# Navigation (collapsible) #}
{% if page.navigation_collapsible %}
<div id="navbar-collapse" class="navbar-collapse collapse">
{{ page.navigation_collapsible }}
</div>
{% endif %}
{% if not navbar_attributes.hasClass(container) %}
</div>
{% endif %}
</header>
{% endblock %}
{{ page.navigation_collapsible }}
</div>
{% endif %}
{% if not navbar_attributes.hasClass(container) %}
</div>
{% endif %}
</header>
{% endblock %}
{# Main #}
{% block main %}
{# Header #}
{% if page.header %}
{% block header %}
<div class="header-region clearfix" role="heading">
<div class="container-fluid">
<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 #}
{% block main %}
{# Header #}
{% if page.header %}
{% block header %}
<div class="header-region clearfix" role="heading">
<div class="container-fluid">
<div class="header-inner">
{{ page.header }}
</div>
</div>
</div>
{# Sidebar First #}
{% if page.sidebar_first %}
{% block sidebar_first %}
<aside class="col-sm-3" role="complementary">
{{ page.sidebar_first }}
</aside>
{% endblock %}
{% endif %}
<div role="main" class="main-container {{ container }} js-quickedit-main-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 #}
{%
{# Content #}
{%
set content_classes = [
page.sidebar_first and page.sidebar_second ? 'col-sm-6',
page.sidebar_first and page.sidebar_second is empty ? 'col-sm-9',
......@@ -237,92 +234,92 @@
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 #}
{% if page.highlighted %}
{% block highlighted %}
<div class="highlighted">{{ page.highlighted }}</div>
{% endblock %}
{% endif %}
{# Highlighted #}
{% if page.highlighted %}
{% block highlighted %}
<div class="highlighted">{{ page.highlighted }}</div>
{% endblock %}
{% endif %}
{# Help #}
{% if page.help %}
{% block help %}
{{ page.help }}
{% endblock %}
{% endif %}
{# Help #}
{% if page.help %}
{% block help %}
{{ page.help }}
{% endblock %}
{% endif %}
{# Content #}
{% block content %}
<a id="main-content"></a>
{{ page.content }}
{% endblock %}
</section>
{# Content #}
{% block content %}
<a id="main-content"></a>
{{ page.content }}
{% endblock %}
</section>
{# Sidebar Second #}
{% if page.sidebar_second %}
{% block sidebar_second %}
<aside class="col-sm-3" role="complementary">
{{ page.sidebar_second }}
</aside>
{% endblock %}
{% endif %}
</div>
</div>
{% endblock %}
<a id="scrollUp" href="#top" style="position: fixed; z-index: 2147483647; display: block;">
<i class="fa fa-angle-double-up"></i>
</a>
{% block footer %}
<footer class="footer" role="contentinfo">
<div class="footer-top clearfix">
<div class="container-fluid">
{% if page.footer_first %}
<div class="footer-first col-sm-6 col-md-3">
{{ 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 %}
{# Sidebar Second #}
{% if page.sidebar_second %}
{% block sidebar_second %}
<aside class="col-sm-3" role="complementary">
{{ page.sidebar_second }}
</aside>
{% endblock %}
{% endif %}
</div>
</div>
{% endblock %}
<a id="scrollUp" href="#top" style="position: fixed; z-index: 2147483647; display: block;">
<i class="fa fa-angle-double-up"></i>
</a>
{% block footer %}
<footer class="footer" role="contentinfo">
<div class="footer-top clearfix">
<div class="container-fluid">
{% if page.footer_first %}
<div class="footer-first col-sm-6 col-md-3">
{{ page.footer_first }}
</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="container-fluid">
<div class="footer-bottom-left">
{% if copyright_text %}
{{ copyright_text }}
{% endif %}
{% if page.footer_bottom_left %}
{{ page.footer_bottom_left }}
{% endif %}
</div>
<div class="footer-bottom-right">
{% if theme_credits %}
<div class="theme-credits">
{{ theme_credits }}
</div>
{% endif %}
{% if page.footer_bottom_right %}
{{ page.footer_bottom_right }}
{% endif %}
<div class="footer-bottom clearfix">
<div class="container-fluid">
<div class="footer-bottom-left">
{% if copyright_text %}
{{ copyright_text }}
{% endif %}
{% if page.footer_bottom_left %}
{{ page.footer_bottom_left }}
{% endif %}
</div>
<div class="footer-bottom-right">
{% if theme_credits %}
<div class="theme-credits">
{{ theme_credits }}
</div>
</div>
{% endif %}
{% if page.footer_bottom_right %}
{{ page.footer_bottom_right }}
{% endif %}
</div>
</div>
</div>
</footer>
{% endblock %}
</footer>
{% 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