mobile header: ship CSS without SCSS
This commit is contained in:
111
mandelstudio/static/mandelstudio/header_mobile.css
Normal file
111
mandelstudio/static/mandelstudio/header_mobile.css
Normal file
@@ -0,0 +1,111 @@
|
|||||||
|
/* Scoped mobile header fixes for MandelBlog Studio.
|
||||||
|
Keep changes local to the Carbasa mega header to avoid desktop regressions. */
|
||||||
|
|
||||||
|
@media (max-width: 991.98px) {
|
||||||
|
header.mega_header .header-inner .container {
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header.mega_header .header-inner .navbar-brand {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
z-index: 30;
|
||||||
|
}
|
||||||
|
|
||||||
|
header.mega_header .header-inner .navbar-brand .logo.big_brand img,
|
||||||
|
header.mega_header .header-inner .navbar-brand .logo img {
|
||||||
|
max-height: 36px;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
header.mega_header .header-inner .header-right {
|
||||||
|
padding-left: 0;
|
||||||
|
margin-left: auto;
|
||||||
|
gap: 0.5rem;
|
||||||
|
position: relative;
|
||||||
|
z-index: 30;
|
||||||
|
}
|
||||||
|
|
||||||
|
header.mega_header .header-inner .header-right .user-button {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header.mega_header .header-inner .navbar-toggler {
|
||||||
|
position: static;
|
||||||
|
inset: auto;
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
margin: 0 0 0 0.5rem;
|
||||||
|
box-shadow: none;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid rgba(15, 23, 42, 0.12);
|
||||||
|
z-index: 35;
|
||||||
|
}
|
||||||
|
|
||||||
|
header.mega_header .header-inner #navbarSupportedContent.show {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
background: #fff;
|
||||||
|
padding: 5.25rem 1.25rem 6rem;
|
||||||
|
z-index: 40;
|
||||||
|
}
|
||||||
|
|
||||||
|
header.mega_header .header-inner #navbarSupportedContent.show ~ .header-right {
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
header.mega_header .header-inner #navbarSupportedContent .brand-wrapper {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
header.mega_header .header-inner #navbarSupportedContent .navbar-nav {
|
||||||
|
width: 100%;
|
||||||
|
align-items: stretch;
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header.mega_header .header-inner #navbarSupportedContent .navbar-nav > li {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
header.mega_header .header-inner #navbarSupportedContent .navbar-nav > li > a.nav-link,
|
||||||
|
header.mega_header .header-inner #navbarSupportedContent .navbar-nav > li > a.toggler.nav-link {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.85rem 0.25rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header.mega_header .header-inner #navbarSupportedContent .dropdown-menu {
|
||||||
|
position: static;
|
||||||
|
float: none;
|
||||||
|
width: 100%;
|
||||||
|
border: 0;
|
||||||
|
padding: 0.25rem 0 0.75rem;
|
||||||
|
margin: 0;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
header.mega_header .header-inner #navbarSupportedContent .dropdown-menu .nav-link {
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 0.6rem 0.25rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@@ -1,121 +0,0 @@
|
|||||||
/* Scoped mobile header fixes for MandelBlog Studio.
|
|
||||||
Keep changes local to the Carbasa mega header to avoid desktop regressions. */
|
|
||||||
|
|
||||||
header.mega_header {
|
|
||||||
@media (max-width: 991.98px) {
|
|
||||||
.header-inner {
|
|
||||||
.container {
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
align-items: center;
|
|
||||||
padding-top: 0.5rem;
|
|
||||||
padding-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-brand {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
position: relative;
|
|
||||||
z-index: 30;
|
|
||||||
|
|
||||||
.logo.big_brand img,
|
|
||||||
.logo img {
|
|
||||||
max-height: 36px;
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-right {
|
|
||||||
padding-left: 0;
|
|
||||||
margin-left: auto;
|
|
||||||
gap: 0.5rem;
|
|
||||||
position: relative;
|
|
||||||
z-index: 30;
|
|
||||||
|
|
||||||
.user-button {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Move the mobile menu toggle into the header (not floating at the bottom). */
|
|
||||||
.navbar-toggler {
|
|
||||||
position: static;
|
|
||||||
inset: auto;
|
|
||||||
width: 42px;
|
|
||||||
height: 42px;
|
|
||||||
margin: 0 0 0 0.5rem;
|
|
||||||
box-shadow: none;
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid rgba(15, 23, 42, 0.12);
|
|
||||||
z-index: 35;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Fullscreen mobile menu that sits above header icons. */
|
|
||||||
#navbarSupportedContent.show {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
height: 100vh;
|
|
||||||
width: 100%;
|
|
||||||
overflow: auto;
|
|
||||||
background: #fff;
|
|
||||||
padding: 5.25rem 1.25rem 6rem;
|
|
||||||
z-index: 40;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Prevent header action icons overlapping the open menu. */
|
|
||||||
#navbarSupportedContent.show ~ .header-right {
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Make mobile menu items look consistent and aligned. */
|
|
||||||
#navbarSupportedContent {
|
|
||||||
.brand-wrapper {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-nav {
|
|
||||||
width: 100%;
|
|
||||||
align-items: stretch;
|
|
||||||
gap: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-nav > li {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-nav > li > a.nav-link,
|
|
||||||
.navbar-nav > li > a.toggler.nav-link {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0.85rem 0.25rem;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu {
|
|
||||||
position: static;
|
|
||||||
float: none;
|
|
||||||
width: 100%;
|
|
||||||
border: 0;
|
|
||||||
padding: 0.25rem 0 0.75rem;
|
|
||||||
margin: 0;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu .nav-link {
|
|
||||||
justify-content: flex-start;
|
|
||||||
padding: 0.6rem 0.25rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -15,8 +15,8 @@
|
|||||||
{{ block.super }}
|
{{ block.super }}
|
||||||
{# Ensure Carbasa webshop styling is present so responsive header/footer render correctly. #}
|
{# Ensure Carbasa webshop styling is present so responsive header/footer render correctly. #}
|
||||||
<link rel="stylesheet" type="text/x-scss" href="{% static 'carbasa/webshop_base.scss' %}">
|
<link rel="stylesheet" type="text/x-scss" href="{% static 'carbasa/webshop_base.scss' %}">
|
||||||
{# Project-scoped header mobile fixes (no Bootstrap overrides). #}
|
{# Project-scoped header mobile fixes (plain CSS to avoid SCSS compilation at runtime). #}
|
||||||
<link rel="stylesheet" type="text/x-scss" href="{% static 'mandelstudio/header_mobile.scss' %}">
|
<link rel="stylesheet" href="{% static 'mandelstudio/header_mobile.css' %}">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block extrahead %}
|
{% block extrahead %}
|
||||||
|
|||||||
Reference in New Issue
Block a user