junto scss-ified

app/assets/stylesheets/junto.scss.erb

@@ -5,8 +5,8 @@
   height: 150px;
   cursor: default;
   color: #FFF;
-}
+
-.collaborator-video .video-receive {
+  .video-receive {
     position: absolute;
     width: 160px;
     padding: 20px 20px 20px 170px;
@@ -16,20 +16,24 @@
     border-bottom-left-radius: 75px;
     border-top-right-radius: 2px;
     border-bottom-right-radius: 2px;
-}
+
-.collaborator-video .video-receive .video-statement {
+    .video-statement {
       margin-bottom: 10px;
-}
+    }
-.collaborator-video .video-receive .btn-group .btn-yes {
+    .btn-group {
+      .btn-yes {
         margin-right: 10px;
-}
+      }
-.collaborator-video .video-receive .btn-group .btn-no {
+      .btn-no {
         background-color: #c04f4f;
-}
+        &:hover {
-.collaborator-video .video-receive .btn-group .btn-no:hover {
           background-color: #A54242;
-}
+        }
-.collaborator-video .video-cutoff {
+      }
+    }
+  }
+
+  .video-cutoff {
     width: 150px;
     height: 150px;
     overflow: hidden;
@@ -39,12 +43,12 @@
     -webkit-box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.23), 10px 10px 10px rgba(0, 0, 0, 0.19);
     -moz-box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.23), 10px 10px 10px rgba(0, 0, 0, 0.19);
     box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.23), 10px 10px 10px rgba(0, 0, 0, 0.19);
-}
+
-.collaborator-video .video-cutoff video {
+    video {
       height: 150px;
       margin-left: -25px;
-}
+    }
-.collaborator-video .video-cutoff .collaborator-video-avatar {
+    .collaborator-video-avatar {
       position: absolute;
       top: 0;
       left: 0;
@@ -55,8 +59,9 @@
       user-select: none;
       -webkit-user-drag: none;
       display: none;
-}
+    }
-.collaborator-video .video-audio {
+  }
+  .video-audio {
     position: absolute;
     width: 24px;
     height: 24px;
@@ -64,14 +69,14 @@
     right: 0px;
     cursor: pointer;
     background: url(<%= asset_path 'audio_sprite.png' %>) no-repeat;
-}
+  }
-.collaborator-video .video-audio:hover {
+  .video-audio:hover {
     background-position-x: -24px;
-}
+  }
-.collaborator-video .video-audio.active {
+  .video-audio.active {
     background-position-y: -24px;
-}
+  }
-.collaborator-video .video-video {
+  .video-video {
     position: absolute;
     width: 24px;
     height: 24px;
@@ -79,21 +84,25 @@
     left: 0px;
     cursor: pointer;
     background: url(<%= asset_path 'camera_sprite.png' %>) no-repeat;
-}
+  }
-.collaborator-video .video-video:hover {
+  .video-video:hover {
     background-position-x: -24px;
-}
+  }
-.collaborator-video .video-video.active {
+  .video-video.active {
     background-position-y: -24px;
+  }
 }
+
 .collaborator-video.my-video {
   left: 30px;
   top: 72px;
 }
+
 #chat-box-wrapper {
   height: 100%;
   float: right;
 }
+
 .chat-box {
   position: relative;
   display: flex;
@@ -103,8 +112,8 @@
   height: 100%;
   background: #424242;
   box-shadow: -8px 0px 16px 2px rgba(0, 0, 0, 0.23);
-}
+
-.chat-box .chat-button {
+  .chat-button {
     position: absolute;
     top: 50%;
     left: -36px;
@@ -112,11 +121,11 @@
     height: 49px;
     background: url(<%= asset_path 'junto.png' %>) no-repeat 2px 9px, url(<%= asset_path 'tray_tab.png' %>) no-repeat;
     cursor: pointer;
-}
+
-.chat-box .chat-button.active {
+    &.active {
       background: url(<%= asset_path 'junto_spinner_dark.gif' %>) no-repeat 2px 8px, url(<%= asset_path 'tray_tab.png' %>) no-repeat !important;
-}
+    }
-.chat-box .chat-button .chat-unread {
+    .chat-unread {
       background: #DAB539;
       position: absolute;
       top: -3px;
@@ -130,8 +139,10 @@
       font-size: 12px;
       font-weight: bold;
       line-height: 20px;
-}
+    }
-.chat-box .junto-header {
+  }
+
+  .junto-header {
     width: 276px;
     padding: 16px 8px 16px 16px;
     font-size: 16px;
@@ -140,75 +151,77 @@
     background-color: #000000;
     color: #f5f5f5;
     box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.23);
-}
+
-.chat-box .junto-header .cursor-toggle {
+    .cursor-toggle {
       width: 32px;
       height: 32px;
       margin-right: 8px;
       margin-top: -8px;
       float: right;
       background: url(<%= asset_path 'cursor_sprite.png' %>) no-repeat;
-}
+    }
-.chat-box .junto-header .cursor-toggle:hover {
+    .cursor-toggle:hover {
       background-position-x: -32px;
-}
+    }
-.chat-box .junto-header .cursor-toggle.active {
+    .cursor-toggle.active {
       background-position-y: -32px;
-}
+    }
-.chat-box .junto-header .video-toggle {
+    .video-toggle {
       width: 32px;
       height: 32px;
       margin-right: 10px;
       margin-top: -8px;
       float: right;
       background: url(<%= asset_path 'video_sprite.png' %>) no-repeat;
-}
+    }
-.chat-box .junto-header .video-toggle:hover {
+    .video-toggle:hover {
       background-position-x: -32px;
-}
+    }
-.chat-box .junto-header .video-toggle.active {
+    .video-toggle.active {
       background-position-y: -32px;
-}
+    }
-.chat-box .participants {
+  }
+
+  .participants {
     width: 100%;
     min-height: 150px;
     padding: 16px 0px 16px 0px;
     text-align: left;
     color: #f5f5f5;
     overflow-y: auto;
-}
+
-.chat-box .participants .conversation-live {
+    .conversation-live {
       padding: 5px 10px 5px 10px;
       background: #c04f4f;
       margin: 5px 10px;
       border-radius: 2px;
-}
+    }
-.chat-box .participants .conversation-live .call-action {
+    .conversation-live .call-action {
       float: right;
       cursor: pointer;
       color: #EBFF00;
-}
+    }
-.chat-box .participants .participant {
+    .participant {
       width: 89%;
       padding: 8px 8px 2px 8px;
       color: #f5f5f5;
       font-family: arial, sans-serif;
       font-size: 13px;
       line-height: 14px;
-}
+
-.chat-box .participants .participant .chat-participant-image {
+      .chat-participant-image {
         width: 15%;
         float: left;
         overflow: hidden;
         color: #BBB;
         padding-top: 2px;
-}
+      }
-.chat-box .participants .participant .chat-participant-image img {
+      .chat-participant-image img {
         width: 32px;
         height: 32px;
         border-radius: 18px;
-}
+      }
-.chat-box .participants .participant .chat-participant-name {
+      .chat-participant-name {
         width: 53%;
         float: left;
         font-size: 13px;
@@ -216,28 +229,31 @@
         margin-top: 12px;
         padding: 2px 8px 0;
         text-align: left;
-}
+      }
-.chat-box .participants .participant .chat-participant-invite-call,
+      .chat-participant-invite-call,
-.chat-box .participants .participant .chat-participant-invite-join
+      .chat-participant-invite-join
        {
         float: right;
         background: #4FC059 url(<%= asset_path 'invitepeer16.png' %>) no-repeat center center;
-}
+      }
-.chat-box .participants .participant .chat-participant-invite-call.pending,
+      .chat-participant-invite-call.pending,
-.chat-box .participants .participant .chat-participant-invite-join.pending {
+      .chat-participant-invite-join.pending {
           background: #dab539 url(<%= asset_path 'ellipsis.gif' %>) no-repeat center center;
-}
+      }
-.chat-box .participants .participant .chat-participant-participating {
+      .chat-participant-participating {
         float: right;
         margin-top: 14px;
-}
+      }
-.chat-box .participants .participant .chat-participant-participating .green-dot {
+      .chat-participant-participating .green-dot {
         background: #4fc059;
         width: 12px;
         height: 12px;
         border-radius: 6px;
-}
+      }
-.chat-box .chat-header {
+    }
+  }
+
+  .chat-header {
     width: 276px;
     padding: 16px 8px 16px 16px;
     font-size: 16px;
@@ -246,83 +262,89 @@
     background-color: #000000;
     color: #f5f5f5;
     box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.23);
-}
+
-.chat-box .chat-header .sound-toggle {
+    .sound-toggle {
       width: 24px;
       height: 24px;
       margin-right: 10px;
       margin-top: -2px;
       float: right;
       background: url(<%= asset_path 'sound_sprite.png' %>) no-repeat;
-}
+    }
-.chat-box .chat-header .sound-toggle:hover {
+    .sound-toggle:hover {
       background-position-x: -24px;
-}
+    }
-.chat-box .chat-header .sound-toggle.active {
+    .sound-toggle.active {
       background-position-y: -24px;
-}
+    }
-.chat-box .chat-input {
+  }
+
+  .chat-input {
     min-height: 80px;
     width: 94%;
     padding: 8px 3% 8px 3%;
     font-size: 13px;
     outline: none;
     resize: none;
-}
+  }
-.chat-box .chat-messages {
+
+  .chat-messages {
     width: 100%;
     padding: 16px 0px;
     overflow-y: auto;
     flex-grow: 1;
-}
+
-.chat-box .chat-messages .chat-message {
+    .chat-message {
       width: 89%;
       padding: 8px 8px 2px 8px;
       color: #f5f5f5;
       font-family: arial, sans-serif;
       font-size: 13px;
       line-height: 14px;
-}
+
-.chat-box .chat-messages .chat-message a:link {
+      a:link {
         color: #4fb5c0;
         text-decoration: underline;
-}
+      }
-.chat-box .chat-messages .chat-message a:visited {
+      a:visited {
         color: #aea9fd;
         text-decoration: underline;
-}
+      }
-.chat-box .chat-messages .chat-message a:hover {
+      a:hover {
         color: #dab539;
         text-decoration: underline;
-}
+      }
-.chat-box .chat-messages .chat-message .chat-message-user {
+      .chat-message-user {
         width: 12%;
         float: left;
         overflow: hidden;
         color: #BBB;
         padding-top: 2px;
-}
+      }
-.chat-box .chat-messages .chat-message .chat-message-user img {
+      .chat-message-user img {
         border: 2px solid #424242;
         width: 26px;
         height: 26px;
         border-radius: 14px;
-}
+      }
-.chat-box .chat-messages .chat-message .chat-message-meta {
+      .chat-message-meta {
-  padding: 0 8px;
+        padding: 0 px;
         float: left;
-}
+      }
-.chat-box .chat-messages .chat-message .chat-message-username {
+      .chat-message-username {
         color: #4fc059;
-}
+      }
-.chat-box .chat-messages .chat-message .chat-message-text {
+      .chat-message-text {
         width: 80%;
         float: left;
         padding: 2px 8px 0;
         text-align: left;
         word-wrap: break-word;
-}
+      }
-.chat-box .chat-messages .chat-message .chat-message-time {
+      .chat-message-time {
         font-size: 10px;
         color: #757575;
+      }
+    }
+  }
 }