StyleKit classes wip

app/assets/stylesheets/app/_footer.scss

@@ -6,12 +6,12 @@
   z-index: $z-index-footer-bar;
 }
 
-#footer-bar .item {
+#footer-bar .sk-app-bar-item {
   z-index: $z-index-footer-bar-item;
   position: relative;
   user-select: none;
 
-  .panel {
+  .sk-panel {
     max-height: 85vh;
     position: absolute;
     right: 0px;
@@ -20,16 +20,14 @@
     min-width: 300px;
     z-index: $z-index-footer-bar-item-panel;
     margin-top: 15px;
-    background-color: white;
   }
-
 }
 
 #account-panel {
   width: 400px;
 }
 
-.panel {
+.sk-panel {
   cursor: default;
 }
 

app/assets/stylesheets/app/_lock-screen.scss

@@ -26,11 +26,11 @@
     height: 100%;
   }
 
-  .panel {
+  .sk-panel {
     width: 315px;
     flex-grow: 0;
 
-    .header {
+    .sk-panel-header {
       justify-content: center;
     }
   }

app/assets/stylesheets/app/_menus.scss

@@ -1,5 +1,5 @@
-.app-bar {
-  .item {
+.sk-app-bar {
+  .sk-app-bar-item {
     position: relative;
   }
 }
@@ -15,6 +15,4 @@
   margin-top: 5px;
   width: 280px;
   max-height: calc(85vh - 90px);
-  background-color: white;
-  color: $selected-text-color;
 }

app/assets/stylesheets/app/_modals.scss

@@ -1,13 +1,13 @@
 #permissions-modal {
   width: 350px;
-  .panel {
+  .sk-panel {
     border-radius: 0;
     background-color: white;
   }
-  .content {
+  .sk-panel-content {
     padding-top: 1.1rem;
   }
-  .footer {
+  .sk-panel-footer {
     padding-bottom: 1.4rem;
   }
 }
@@ -43,9 +43,9 @@
   }
 }
 
-.panel {
-  background-color: white;
-}
+// .sk-panel {
+//   background-color: white;
+// }
 
 .header .subtitle {
   font-size: 1.1rem;
@@ -70,7 +70,7 @@
 
   .sn-component {
     height: 100%;
-    .panel {
+    .sk-panel {
       height: 100%;
     }
   }

app/assets/stylesheets/app/_stylekit-sub.scss

@@ -1,6 +1,6 @@
 .sn-component {
 
-  .notification {
+  .sk-notification {
     &.unpadded {
       padding: 0;
       padding-bottom: 0 !important;
@@ -18,7 +18,7 @@
   }
 
 
-  .app-bar {
+  .sk-app-bar {
     &.no-top-edge {
       border-top: 0;
     }
@@ -26,10 +26,8 @@
 
 }
 
-.panel {
-  color: black;
-
-  .header {
+.sk-panel {
+  .sk-panel-header {
     .close-button {
       &:hover {
         text-decoration: none;
@@ -42,20 +40,16 @@
   }
 
 
-  .button-group.stretch {
-    .button:not(.featured) {
+  .sk-button-group.stretch {
+    .sk-button:not(.featured) {
       // Default buttons that are not featured and stretched should have larger vertical padding
       padding: 9px;
     }
   }
-
-  a {
-    color: $blue-color;
-  }
 }
 
 #session-history-menu {
-  .menu-panel .row .sublabel.opaque {
+  .sk-menu-panel .sk-menu-panel-row .sk-sublabel.opaque {
     opacity: 1.0
   }
 }