Change sidenav class to id

Remove .sidenav and replace it with #sidenav
Aspine · Dec 26, 2020 · e52c9c3 · e52c9c3
1 parent c2f15ad
commit e52c9c3
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 16 deletions.
diff --git a/public/css/home.css b/public/css/home.css
@@ -1128,11 +1128,11 @@ p#large_clock_period {
   background-color: var(--white1);
 }
 
-.sidenav .select-items div:hover {
+#sidenav .select-items div:hover {
   background-color: var(--white3);
 }
 
-.sidenav hr {
+#sidenav hr {
   height: 4px;
   width: 270px;
   background-color: var(--white3);
@@ -1141,7 +1141,7 @@ p#large_clock_period {
   border: 0px;
 }
 
-.sidenav {
+#sidenav {
   height: 100%;
   width: 0;
   position: fixed;
@@ -1155,7 +1155,7 @@ p#large_clock_period {
   display: block;
 }
 
-.sidenav button {
+#sidenav button {
   clear: both;
   background-color: inherit;
   /* float: left; */
@@ -1171,26 +1171,26 @@ p#large_clock_period {
   /*transition: 0.3s; commented out to prevent weird transitions involving Calculated GPA*/
 }
 
-.sidenav button.active {
+#sidenav button.active {
   background-color: var(--gray);
 }
 
-.sidenav .select-selected:hover {
+#sidenav .select-selected:hover {
   background-color: var(--white3) !important;
 }
 
-.sidenav button:hover {
+#sidenav button:hover {
   background-color: var(--white3) !important;
 }
 
-.sidenav .GPA {
+#sidenav .GPA {
   clear: both;
   height: 44px;
   margin-bottom: 5px;
   width: 270px;
 }
 
-.sidenav .select-selected {
+#sidenav .select-selected {
   color: var(--black) !important;
   background-color: inherit;
   /* float: right; */
@@ -1202,19 +1202,19 @@ p#large_clock_period {
   margin-bottom: 5px;
 }
 
-.sidenav .select-selected:after {
+#sidenav .select-selected:after {
   right: 15px;
 }
 
-.sidenav .activated-selected-item {
+#sidenav .activated-selected-item {
   /*border: 1px transparent solid;*/
   border-width: 1px 1px 1px 1px !important;
   margin: 0px 5px 5px 5px;
   border-style: solid;
   border-color: transparent !important; /* empty borders for these because it looks better */
 }
 
-.sidenav .activated-select-items {
+#sidenav .activated-select-items {
   color: var(--black);
   background-color: inherit;
   float: right;
@@ -1227,15 +1227,15 @@ p#large_clock_period {
   border-color: transparent !important;
 }
 
-.sidenav .select-items {
+#sidenav .select-items {
   position: static;
 }
 
 .hide {
   display: none;
 }
 
-.sidenav-overlay {
+#sidenav-overlay {
   width: 100%;
   height: 100%;
   position: fixed;

diff --git a/public/home.html b/public/home.html
@@ -44,7 +44,7 @@
   <script src="vendor/file-saver/FileSaver.min.js" async="true"></script>
 </head>
 <body>
-  <div class="sidenav-overlay fade-in" id="sidenav-overlay"></div>
+  <div id="sidenav-overlay" class="fade-in"></div>
   <noscript>
     <p><strong>
       Aspine is designed to work mainly as a client-side web application
@@ -75,7 +75,7 @@ <h4 id="title" onclick="openTab(event, 'grades')">Aspine</h4>
   </div>
 
   <!-- SIDENAV STUFF -->
-  <div id="sidenav" class="sidenav">
+  <div id="sidenav">
     <!-- switch-exempt makes the switch out of navbar pass over this -->
     <button onclick="closeSideNav()" class="tablinks switch-exempt" style="margin: 0px;width: 270px; height: 44px; background-color: var(--lightgray1)">
       <i class="fa fa-times fa-2x" style="position: absolute; top: 18px; left: 18px; font-size: 1.3em; color: var(--black);"></i>