(#285) Update Theme Toggle Styles

This updates the theme toggle styles slightly to add a width to the buttons to prevent it from changing size when toggling between themes. This also prevents the button from being underlined on hover.
chocolatey · Apr 9, 2024 · a506492 · a506492
1 parent d27f789
commit a506492
Show file tree

Hide file tree

Showing 13 changed files with 108 additions and 104 deletions.
diff --git a/dist/css/boxstarter.css b/dist/css/boxstarter.css
@@ -51380,6 +51380,9 @@ main {
     margin-bottom: 2rem;
   }
 }
+.dropdown-theme .dropdown-toggle {
+  text-decoration: none !important;
+}
 .dropdown-theme .dropdown-item.active i.d-none {
   display: block !important;
 }

diff --git a/dist/css/boxstarter.min.css b/dist/css/boxstarter.min.css
diff --git a/dist/css/chocolatey.css b/dist/css/chocolatey.css
@@ -55263,6 +55263,9 @@ main {
     margin-bottom: 2rem;
   }
 }
+.dropdown-theme .dropdown-toggle {
+  text-decoration: none !important;
+}
 .dropdown-theme .dropdown-item.active i.d-none {
   display: block !important;
 }

diff --git a/dist/css/chocolatey.min.css b/dist/css/chocolatey.min.css
diff --git a/dist/css/zendesk.css b/dist/css/zendesk.css
@@ -40899,6 +40899,9 @@ main {
     margin-bottom: 2rem;
   }
 }
+.dropdown-theme .dropdown-toggle {
+  text-decoration: none !important;
+}
 .dropdown-theme .dropdown-item.active i.d-none {
   display: block !important;
 }

diff --git a/dist/css/zendesk.min.css b/dist/css/zendesk.min.css
diff --git a/dist/partials/cshtml/_GlobalNavigation.cshtml b/dist/partials/cshtml/_GlobalNavigation.cshtml
@@ -7,10 +7,10 @@
     <li class="nav-item d-none d-md-flex align-items-center">
         <div class="vr me-3 my-auto h-50"></div>
         <div class="dropdown dropdown-theme">
-    <button class="btn btn-top-nav dropdown-toggle d-md-none" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
+    <button class="btn btn-top-nav dropdown-toggle w-px-60 d-md-none" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
         <span class="theme-icon-active"><i></i></span>
     </button>
-    <button class="btn nav-link dropdown-toggle py-0 px-0 d-none d-md-block" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
+    <button class="btn nav-link dropdown-toggle py-0 px-0 w-px-30 d-none d-md-block" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
         <span class="theme-icon-active"><i></i></span>
     </button>
     <ul class="dropdown-menu dropdown-menu-end">

diff --git a/dist/partials/cshtml/_ThemeToggle.cshtml b/dist/partials/cshtml/_ThemeToggle.cshtml
@@ -1,8 +1,8 @@
 <div class="dropdown dropdown-theme">
-    <button class="btn btn-top-nav dropdown-toggle d-md-none" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
+    <button class="btn btn-top-nav dropdown-toggle w-px-60 d-md-none" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
         <span class="theme-icon-active"><i></i></span>
     </button>
-    <button class="btn nav-link dropdown-toggle py-0 px-0 d-none d-md-block" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
+    <button class="btn nav-link dropdown-toggle py-0 px-0 w-px-30 d-none d-md-block" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
         <span class="theme-icon-active"><i></i></span>
     </button>
     <ul class="dropdown-menu dropdown-menu-end">

diff --git a/dist/partials/hbs/globalnavigation.hbs b/dist/partials/hbs/globalnavigation.hbs
@@ -10,10 +10,10 @@ partial: globalnavigation
     <li class="nav-item d-none d-md-flex align-items-center">
         <div class="vr me-3 my-auto h-50"></div>
         <div class="dropdown dropdown-theme">
-    <button class="btn btn-top-nav dropdown-toggle d-md-none" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
+    <button class="btn btn-top-nav dropdown-toggle w-px-60 d-md-none" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
         <span class="theme-icon-active"><i></i></span>
     </button>
-    <button class="btn nav-link dropdown-toggle py-0 px-0 d-none d-md-block" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
+    <button class="btn nav-link dropdown-toggle py-0 px-0 w-px-30 d-none d-md-block" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
         <span class="theme-icon-active"><i></i></span>
     </button>
     <ul class="dropdown-menu dropdown-menu-end">

diff --git a/dist/partials/hbs/themetoggle.hbs b/dist/partials/hbs/themetoggle.hbs
@@ -2,10 +2,10 @@
 partial: themetoggle
 ---
 <div class="dropdown dropdown-theme">
-    <button class="btn btn-top-nav dropdown-toggle d-md-none" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
+    <button class="btn btn-top-nav dropdown-toggle w-px-60 d-md-none" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
         <span class="theme-icon-active"><i></i></span>
     </button>
-    <button class="btn nav-link dropdown-toggle py-0 px-0 d-none d-md-block" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
+    <button class="btn nav-link dropdown-toggle py-0 px-0 w-px-30 d-none d-md-block" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
         <span class="theme-icon-active"><i></i></span>
     </button>
     <ul class="dropdown-menu dropdown-menu-end">

diff --git a/partials/ThemeToggle.html b/partials/ThemeToggle.html
@@ -1,8 +1,8 @@
 <div class="dropdown dropdown-theme">
-    <button class="btn btn-top-nav dropdown-toggle d-md-none" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
+    <button class="btn btn-top-nav dropdown-toggle w-px-60 d-md-none" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
         <span class="theme-icon-active"><i></i></span>
     </button>
-    <button class="btn nav-link dropdown-toggle py-0 px-0 d-none d-md-block" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
+    <button class="btn nav-link dropdown-toggle py-0 px-0 w-px-30 d-none d-md-block" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
         <span class="theme-icon-active"><i></i></span>
     </button>
     <ul class="dropdown-menu dropdown-menu-end">

diff --git a/scss/_theme-toggle.scss b/scss/_theme-toggle.scss
@@ -1,4 +1,8 @@
 .dropdown-theme {
+    .dropdown-toggle {
+        text-decoration: none !important;
+    }
+
     .dropdown-item {
         &.active {
             i.d-none {