try out an icon instead of a button with text

kriskhaira · Apr 16, 2021 · 4d72fef · 4d72fef
1 parent 863fb7c
commit 4d72fef
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/includes/toggle-images.html b/includes/toggle-images.html
@@ -1,4 +1,4 @@
-<button type="button" class="btn btn-outline ml-3 toggle-images" id="js-toggle-images" aria-selected="false" aria-label="Toggle images">
-  <span id="js-hide-text">{% data ui.toggle_images.hide %}</span>
-  <span id="js-show-text">{% data ui.toggle_images.show %}</span>
+<button class="toggle-images tooltipped tooltipped-n" id="js-toggle-images">
+  <span id="js-hide-icon" aria-label="{% data ui.toggle_images.hide %}">{% octicon "eye-closed" %}</span>
+  <span id="js-show-icon" aria-label="{% data ui.toggle_images.show %}">{% octicon "eye" %}</span>
 </button>
diff --git a/stylesheets/index.scss b/stylesheets/index.scss
@@ -48,6 +48,7 @@ $marketing-font-path: "/dist/fonts/";
 @import "overrides.scss";
 @import "sidebar.scss";
 @import "scroll-button.scss";
+@import "toggle-images-button.scss";
 @import "explorer.scss";
 // from https://unpkg.com/highlight.js@9.15.8/styles/github.css
 @import "syntax-highlighting.scss";

diff --git a/stylesheets/toggle-images-button.scss b/stylesheets/toggle-images-button.scss
@@ -0,0 +1,12 @@
+button.toggle-images {
+    opacity: 1;
+    transition: 1s;
+    background-color: var(--color-auto-blue-5);
+    color: var(--color-text-inverse);
+    position: fixed;
+    display: block;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: none;
+}