Clean up some CSS

otacke · Dec 22, 2023 · 9c84168 · 9c84168
1 parent 77957ef
commit 9c84168
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 82 deletions.
diff --git a/src/scripts/app.js b/src/scripts/app.js
@@ -18,11 +18,7 @@ import '@styles/h5p-portfolio.scss';
  * chapter transition and sizing. It is okay for Interactive Book, but now that
  * there can be a hotspots navigation, a header and a footer with different
  * needs, it's not. The pagecontent DOM should be refactored to not use absolute
- * positioning and heights set in CSS.
- *
- * Rename CSS classes to reflect the JavaScript class name/filename
- *
- * Change em to rem
+ * positioning and heights set in CSS. Grid is a hot candidate
  */
 
 export default class Portfolio extends H5P.EventDispatcher {

diff --git a/src/scripts/components/sidebar/sidebar.scss b/src/scripts/components/sidebar/sidebar.scss
@@ -153,6 +153,22 @@
       opacity: 0;
       visibility: none;
     }
+
+    &.icon-expanded {
+      &::before {
+        content: '\e901';
+        width: 1.5rem;
+        display: inline-block;
+      }
+    }
+
+    &.icon-collapsed {
+      &::before {
+        content: '\e902';
+        width: 1.5rem;
+        display: inline-block;
+      }
+    }
   }
 
   &.h5p-portfolio-navigation-chapter-content {

diff --git a/src/scripts/components/statusbar.scss b/src/scripts/components/statusbar.scss
@@ -80,6 +80,10 @@
     color: var(--color-base, $base-color);
     font-size: 1.5rem;
     margin: auto;
+
+    &::before {
+      content: '\e906';
+    }
   }
 
   &.h5p-portfolio-status-menu-active {
@@ -201,6 +205,24 @@
     color: var(--color-base, $base-color);
     font-size: 1.5rem;
     margin: auto;
+
+    &.icon-previous {
+      &::before {
+        content: '\e907';
+      }
+    }
+
+    &.icon-next {
+      &::before {
+        content: '\e908';
+      }
+    }
+
+    &.icon-up {
+      &::before {
+        content: '\e909';
+      }
+    }
   }
 
   &.disabled .navigation-button {

diff --git a/src/styles/h5p-portfolio.scss b/src/styles/h5p-portfolio.scss
@@ -128,7 +128,6 @@
 @media (max-width: 40rem) {
   .h5p-portfolio {
     .h5p-portfolio-main {
-
       &.h5p-portfolio-navigation-open {
 
         .h5p-portfolio-navigation {
@@ -164,79 +163,3 @@
     }
   }
 }
-
-.icon-expanded {
-  &::before {
-    content: '\e901';
-    width: 1.5rem;
-    display: inline-block;
-  }
-}
-
-.icon-collapsed {
-  &::before {
-    content: '\e902';
-    width: 1.5rem;
-    display: inline-block;
-  }
-}
-
-.icon-menu {
-  &::before {
-    content: '\e906';
-  }
-}
-
-.icon-previous {
-  &::before {
-    content: '\e907';
-  }
-}
-
-.icon-next {
-  &::before {
-    content: '\e908';
-  }
-}
-
-.icon-up {
-  &::before {
-    content: '\e909';
-  }
-}
-
-.icon-question-answered {
-  &::before {
-    content: '\e90a';
-  }
-}
-
-.icon-enable-fullscreen {
-  &::before {
-    content: '\e90b';
-  }
-}
-
-.icon-disable-fullscreen {
-  &::before {
-    content: '\e90c';
-  }
-}
-
-.icon-restart {
-  &::before {
-    content: '\e90d';
-  }
-}
-
-.icon-paper-pencil {
-  &::before {
-    content: '\e90e';
-  }
-}
-
-.icon-paper {
-  &::before {
-    content: '\e90f';
-  }
-}