From ebfcacf15e3035b962c0ec82783141d982d74cdb Mon Sep 17 00:00:00 2001
From: hatuhay <hatuhay@827704.no-reply.drupal.org>
Date: Sun, 16 Aug 2020 14:11:46 -0500
Subject: [PATCH] Change toggler icon and adjust page.htlm
---
css/components/slide-nav.css | 38 +++++++++++++++++++++++-------
subtheme/templates/_page.html.twig | 2 +-
templates/layout/page.html.twig | 2 +-
3 files changed, 31 insertions(+), 11 deletions(-)
diff --git a/css/components/slide-nav.css b/css/components/slide-nav.css
index 6dec6c4..ce2a692 100644
--- a/css/components/slide-nav.css
+++ b/css/components/slide-nav.css
@@ -1,16 +1,16 @@
@media (max-width: 767px) {
- .navbar-slide-nav {
+ .navbar-collapse {
border-top: 0;
}
- .navbar-slide-nav .navbar-nav {
+ .navbar-collapse .navbar-nav {
margin-right: 0;
margin-left: 0;
}
- .navbar-slide-nav [class*="container"] {
+ .navbar-collapse [class*="container"] {
background-color: inherit;
border-color: inherit;
}
- .navbar-slide-nav .navbar-slide {
+ .navbar-collapse .navigation {
position: fixed;
top: 0;
bottom: 0;
@@ -20,15 +20,19 @@
height: 100%;
margin: 0;
overflow: auto;
- background-color: inherit;
+ background-color: white;
border-right: 1px solid;
border-right-color: inherit;
+ padding-left: 0.25rem;
+ }
+ .bg-dark .navbar-collapse .navigation {
+ background-color: #17141f !important;
}
- .navbar-slide-nav .navbar-slide .navbar-nav .dropdown-menu li a {
+ .navbar-collapse .navigation .navbar-nav .dropdown-menu li a {
width: 100%;
white-space: normal;
}
- .navbar-slide-nav .navbar-form {
+ .navbar-collapse .navbar-form {
width: 100%;
margin: 8px 0;
overflow: hidden;
@@ -36,10 +40,26 @@
}
}
@media (min-width: 768px) {
- .navbar-slide {
+ .navigation {
display: block;
width: auto !important;
padding-right: 15px;
padding-left: 15px;
}
-}
\ No newline at end of file
+}
+
+.navbar-dark .navbar-toggler-icon {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 16 16'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' fill-rule='evenodd' d='M11.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708 0z'/%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' fill-rule='evenodd' d='M4.146 4.146a.5.5 0 0 0 0 .708l7 7a.5.5 0 0 0 .708-.708l-7-7a.5.5 0 0 0-.708 0z'/%3e%3c/svg%3e");
+}
+
+.navbar-dark .collapsed .navbar-toggler-icon {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+
+.navbar-light .navbar-toggler-icon {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 16 16'%3e%3cpath stroke='rgba%280, 0, 0, 0.4%29' fill-rule='evenodd' d='M11.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708 0z'/%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' fill-rule='evenodd' d='M4.146 4.146a.5.5 0 0 0 0 .708l7 7a.5.5 0 0 0 .708-.708l-7-7a.5.5 0 0 0-.708 0z'/%3e%3c/svg%3e");
+}
+
+.navbar-light .collapsed .navbar-toggler-icon {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.4%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
diff --git a/subtheme/templates/_page.html.twig b/subtheme/templates/_page.html.twig
index 30504df..fc34d2d 100644
--- a/subtheme/templates/_page.html.twig
+++ b/subtheme/templates/_page.html.twig
@@ -104,7 +104,7 @@
</div>
{% endif %}
{% if sidebar_collapse %}
- <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#CollapsingLeft" aria-controls="CollapsingLeft" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <button class="navbar-toggler navbar-toggler-left collapsed" type="button" data-toggle="collapse" data-target="#CollapsingLeft" aria-controls="CollapsingLeft" aria-expanded="false" aria-label="Toggle navigation"></button>
{% endif %}
{% if container_navbar %}
</div>
diff --git a/templates/layout/page.html.twig b/templates/layout/page.html.twig
index 73a83c6..a12b840 100644
--- a/templates/layout/page.html.twig
+++ b/templates/layout/page.html.twig
@@ -105,7 +105,7 @@
</div>
{% endif %}
{% if sidebar_collapse %}
- <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#CollapsingLeft" aria-controls="CollapsingLeft" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <button class="navbar-toggler navbar-toggler-left collapsed" type="button" data-toggle="collapse" data-target="#CollapsingLeft" aria-controls="CollapsingLeft" aria-expanded="false" aria-label="Toggle navigation"></button>
{% endif %}
{% if container_navbar %}
</div>
--
GitLab