initial commit.

styles/members.scss

+@import "vars";
+@import "mixins";
+
+#editors, #editors-list {
+  @include user-select(none);
+  
+  h6 {
+    padding: 15px 25px;
+    margin: 0px;
+    color: $medium;
+    font-size: 10px;
+  }
+
+  .overflow-y-scroll {
+    top: 60px !important;
+  }
+
+  ul {
+    padding: 0px;
+    margin: 0px;
+  }
+}
+
+
+
+.editor > span {
+  border-radius: $radius;
+  display: block;
+  // background-color: rgba(255,255,255,0.05);
+  position: relative;
+  padding: 11px 25px;
+  padding-left: 45px !important;
+  padding-right: 0px !important;
+  min-height: 60px;
+  border: none;
+
+  .editor-avatar {
+    height: 34px;
+    width: 34px;
+    line-height: 34px;
+    left: 0px;  
+    top: 10px;
+
+    background-color: $dark;
+    color: $darker ;
+    color: white;
+    font-weight: 700;
+
+    font-size: 15px;
+    font-family: $main-font;
+
+    display: inline-block;
+    text-align: center;
+    border-radius: $radius;
+    background-size: cover;
+    background-position: center;
+    position: absolute;
+    &.status-off,
+    &.status-on {
+      &:before {
+        top: 0;
+        right: 0;
+        display: block;
+        position: absolute;
+        color: $darker ;
+        border: 1px solid #292929;
+        border-radius: 100px;
+
+        padding: 4px; 
+        font-weight: 700;
+        text-transform: uppercase;
+        font-size: 0px;
+        height: 4px;
+        width: 4px;
+      }
+    }
+    &.status-off:before {background-color: #d55c4b; content: "off"; display: none;}
+    &.status-on:before {background-color: #2ecc71; content: "on"; }
+  }
+
+  .editor-email,
+  .editor-name {
+    font-family: $main-font;
+    font-size: 11px;
+    line-height: 1.3;
+    display: block;
+    font-weight: 300;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: $medium;
+  }
+  .editor-email {
+    opacity: 0.5;
+  }
+}
\ No newline at end of file

styles/metrics.scss

+@import "vars";
+@import "mixins";
+
+#metrics {
+  #transform-origin {
+    height: 230px;
+    position: relative;
+
+    .transform-origin-icon {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 120px;
+      height: 120px;
+      border: 2px solid rgba(0,0,0,0.1);
+      border-radius: 4px;
+      margin: -45px -60px;
+
+      .radio {
+        position: absolute;
+        display: inline-block;
+
+        &.top-left   {top: -30px; left: 0; margin-left: -30px; }
+        &.top-center {top: -30px; left: 50%; margin-left: -30px; }
+        &.top-right  {top: -30px; right: 0; margin-right: -30px; } 
+
+        &.center-left   {top: 50%; margin-top: -30px; left: 0; margin-left: -30px; }
+        &.center-center {top: 50%; margin-top: -30px; left: 50%; margin-left: -30px; }
+        &.center-right  {top: 50%; margin-top: -30px; right: 0; margin-right: -30px; } 
+
+        &.bottom-left   {bottom: 0; margin-bottom: -30px; left: 0; margin-left: -30px; }
+        &.bottom-center {bottom: 0; margin-bottom: -30px; left: 50%; margin-left: -30px; }
+        &.bottom-right  {bottom: 0; margin-bottom: -30px; right: 0; margin-right: -30px; } 
+      }
+    }
+
+    .icon-label {
+      pointer-events: none;
+      margin-top: 62px;
+    }
+  }
+}
\ No newline at end of file

styles/mixins.scss

+
+// Responsive image
+//
+// Keep images from scaling beyond the width of their parents.
+ 
+
+@mixin blur($blur) {
+  -webkit-filter: blur($blur);
+     -moz-filter: blur($blur);
+       -o-filter: blur($blur);
+      -ms-filter: blur($blur);
+          filter: blur($blur);
+}
+
+@mixin img-responsive($display: block) {
+  display: $display;
+  max-width: 100%; // Part 1: Set a maximum relative to the parent
+  height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
+}
+
+// Box sizing
+@mixin box-sizing($boxmodel) {
+  -webkit-box-sizing: $boxmodel;
+     -moz-box-sizing: $boxmodel;
+          box-sizing: $boxmodel;
+}
+
+// User select
+// For selecting text on the page
+@mixin user-select($select) {
+  -webkit-user-select: $select;
+     -moz-user-select: $select;
+      -ms-user-select: $select; // IE10+
+       -o-user-select: $select;
+          user-select: $select;
+}
+
+// Drop shadows
+//
+// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
+//   supported browsers that have box shadow capabilities now support the
+//   standard `box-shadow` property.
+@mixin box-shadow($shadow...) {
+  -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
+          box-shadow: $shadow;
+}
+
+// Placeholder text
+@mixin placeholder($color: rgba(136,136,136,0.5)) {
+  &:-moz-placeholder            { color: $color; } // Firefox 4-18
+  &::-moz-placeholder           { color: $color;   // Firefox 19+
+                                  opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
+  &:-ms-input-placeholder       { color: $color; } // Internet Explorer 10+
+  &::-webkit-input-placeholder  { color: $color; } // Safari and Chrome
+  // &:hover {
+  //   &:-moz-placeholder            { color: #aaa; } // Firefox 4-18
+  //   &::-moz-placeholder           { color: #aaa;   // Firefox 19+
+  //                                   opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
+  //   &:-ms-input-placeholder       { color: #aaa; } // Internet Explorer 10+
+  //   &::-webkit-input-placeholder  { color: #aaa; } // Safari and Chrome
+  // }
+}
+
+// Placeholder text
+@mixin placeholder_inverted($color: $blue-lighter) {
+  &:-moz-placeholder            { color: $color; } // Firefox 4-18
+  &::-moz-placeholder           { color: $color;   // Firefox 19+
+                                  opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
+  &:-ms-input-placeholder       { color: $color; } // Internet Explorer 10+
+  &::-webkit-input-placeholder  { color: $color; } // Safari and Chrome
+  &:focus {
+    &:-moz-placeholder            { color: white; } // Firefox 4-18
+    &::-moz-placeholder           { color: white;   // Firefox 19+
+                                    opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
+    &:-ms-input-placeholder       { color: white; } // Internet Explorer 10+
+    &::-webkit-input-placeholder  { color: white; } // Safari and Chrome
+  }
+}
+
+@mixin input-focus($color: #aaa) {
+  $color-rgba: rgba(red($color), green($color), blue($color), .6);
+  &:focus {
+    outline: 0;
+    // @include box-shadow(inset 0 0 3px rgba(255,255,255,.075), 0 0 3px $color-rgba);
+  }
+}
+
+// Transitions
+@mixin transition($transition...) {
+  -webkit-transition: $transition;
+          transition: $transition;
+}
+@mixin transition-property($transition-property...) {
+  -webkit-transition-property: $transition-property;
+          transition-property: $transition-property;
+}
+@mixin transition-delay($transition-delay) {
+  -webkit-transition-delay: $transition-delay;
+          transition-delay: $transition-delay;
+}
+@mixin transition-duration($transition-duration...) {
+  -webkit-transition-duration: $transition-duration;
+          transition-duration: $transition-duration;
+}
+@mixin transition-transform($transition...) {
+  -webkit-transition: -webkit-transform $transition;
+     -moz-transition: -moz-transform $transition;
+       -o-transition: -o-transform $transition;
+          transition: transform $transition;
+}
+
+// Transformations
+@mixin rotate($degrees) {
+  -webkit-transform: rotate($degrees);
+      -ms-transform: rotate($degrees); // IE9 only
+          transform: rotate($degrees);
+}
+@mixin scale($ratio, $ratio-y...) {
+  -webkit-transform: scale($ratio, $ratio-y);
+      -ms-transform: scale($ratio, $ratio-y); // IE9 only
+          transform: scale($ratio, $ratio-y);
+}
+@mixin translate($x, $y) {
+  -webkit-transform: translate($x, $y);
+      -ms-transform: translate($x, $y); // IE9 only
+          transform: translate($x, $y);
+}
+@mixin translateX($x) {
+  -webkit-transform: translateX($x);
+      -ms-transform: translateX($x); // IE9 only
+          transform: translateX($x);
+}
+@mixin translateY($y) {
+  -webkit-transform: translateY($y);
+      -ms-transform: translateY($y); // IE9 only
+          transform: translateY($y);
+}
+@mixin skew($x, $y) {
+  -webkit-transform: skew($x, $y);
+      -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
+          transform: skew($x, $y);
+}
+@mixin translate3d($x, $y, $z) {
+  -webkit-transform: translate3d($x, $y, $z);
+          transform: translate3d($x, $y, $z);
+}
+
+@mixin rotateX($degrees) {
+  -webkit-transform: rotateX($degrees);
+      -ms-transform: rotateX($degrees); // IE9 only
+          transform: rotateX($degrees);
+}
+@mixin rotateY($degrees) {
+  -webkit-transform: rotateY($degrees);
+      -ms-transform: rotateY($degrees); // IE9 only
+          transform: rotateY($degrees);
+}
+@mixin perspective($perspective) {
+  -webkit-perspective: $perspective;
+     -moz-perspective: $perspective;
+          perspective: $perspective;
+}
+@mixin perspective-origin($perspective) {
+  -webkit-perspective-origin: $perspective;
+     -moz-perspective-origin: $perspective;
+          perspective-origin: $perspective;
+}
+@mixin transform-origin($origin) {
+  -webkit-transform-origin: $origin;
+     -moz-transform-origin: $origin;
+      -ms-transform-origin: $origin; // IE9 only
+          transform-origin: $origin;
+}
+
+// Animations
+@mixin animation($animation) {
+  -webkit-animation: $animation;
+          animation: $animation;
+}
+@mixin animation-name($name) {
+  -webkit-animation-name: $name;
+          animation-name: $name;
+}
+@mixin animation-duration($duration) {
+  -webkit-animation-duration: $duration;
+          animation-duration: $duration;
+}
+@mixin animation-timing-function($timing-function) {
+  -webkit-animation-timing-function: $timing-function;
+          animation-timing-function: $timing-function;
+}
+@mixin animation-delay($delay) {
+  -webkit-animation-delay: $delay;
+          animation-delay: $delay;
+}
+@mixin animation-iteration-count($iteration-count) {
+  -webkit-animation-iteration-count: $iteration-count;
+          animation-iteration-count: $iteration-count;
+}
+@mixin animation-direction($direction) {
+  -webkit-animation-direction: $direction;
+          animation-direction: $direction;
+}
+@mixin animation-fill-mode($fill-mode) {
+  -webkit-animation-fill-mode: $fill-mode;
+          animation-fill-mode: $fill-mode;
+}
+
+// Backface visibility
+// Prevent browsers from flickering when using CSS 3D transforms.
+// Default value is `visible`, but can be changed to `hidden`
+@mixin backface-visibility($visibility){
+  -webkit-backface-visibility: $visibility;
+     -moz-backface-visibility: $visibility;
+          backface-visibility: $visibility;
+}
+
+// Opacity
+@mixin opacity($opacity) {
+  opacity: $opacity;
+  // IE8 filter
+  $opacity-ie: ($opacity * 100);
+  filter: #{alpha(opacity=$opacity-ie)};
+}
+
+// Clearfix
+// Source: http://nicolasgallagher.com/micro-clearfix-hack/
+//
+// For modern browsers
+// 1. The space content is one way to avoid an Opera bug when the
+//    contenteditable attribute is included anywhere else in the document.
+//    Otherwise it causes space to appear at the top and bottom of elements
+//    that are clearfixed.
+// 2. The use of `table` rather than `block` is only necessary if using
+//    `:before` to contain the top-margins of child elements.
+
+@mixin clearfix() {
+  &:before,
+  &:after {
+    content: " "; // 1
+    display: table; // 2
+  }
+  &:after {
+    clear: both;
+  }
+}
+
+// WebKit-style focus
+@mixin tab-focus() {
+  // Default
+  outline: thin dotted;
+  // WebKit
+  outline: 5px auto #298041;
+  outline-offset: -2px;
+}
+
+
+@mixin icon-xxs {
+  font-size: 9px; 
+  height: 16px;
+  width: 16px;
+  line-height: 16px;
+  &:after,
+  &:before {
+    height: 16px;
+    width: 16px;
+    line-height: 12px;
+  }
+}
+
+@mixin icon {
+  font-size: 20px; 
+  height: 60px;
+  width: 60px;
+  display: inline-block;
+  font-family: 'icon';
+  text-align: center;
+  font-style: normal;
+  font-weight: normal;
+  vertical-align: middle;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  @include transition(all 0s 0s ease-in-out);
+
+  &:after,
+  &:before {
+    @include backface-visibility(hidden);
+    position: absolute;
+    height: 60px;
+    width: 60px;
+    line-height: 60px;
+    text-align: center;
+    left: 0px;
+    top: 0px;
+  }
+
+  &:hover {
+    text-decoration: none;
+  } 
+}
+
+@mixin icon-xs {
+  font-size: 9px; 
+  height: 24px;
+  width: 24px;
+  line-height: 24px;
+  &:after,
+  &:before {
+    height: 24px;
+    width: 24px;
+    line-height: 24px;
+  }
+}
+
+
+@mixin icon-sm {
+  font-size: 14px; 
+  height: 32px;
+  width: 32px;
+  line-height: 32px;
+
+  &:after,
+  &:before {
+    height: 32px;
+    width: 32px;
+    line-height: 32px;
+  }
+}
+
+@mixin icon-md {
+  font-size: 16px; 
+  height: 44px;
+  width: 44px;
+  line-height: 43px;
+  
+  &:after,
+  &:before {
+    height: 44px;
+    width: 44px;
+    line-height: 43px;
+  }
+}
+
+
+
+@mixin icon-xl {
+  font-size: 28px; 
+  height: 80px;
+  width: 80px;
+  line-height: 80px;
+  
+  &:after,
+  &:before {
+    height: 80px;
+    width: 80px;
+    line-height: 75px;
+  }
+}
+
+
+
+@mixin icon-xxl {
+  font-size: 50px; 
+  height: 140px;
+  width: 140px;
+  line-height: 130px;
+  
+  &:after,
+  &:before {
+    height: 140px;
+    width: 140px;
+    line-height: 130px;
+  }
+}

styles/modal.scss

+@import "vars";
+@import "mixins";
+
+//
+// Modals
+// --------------------------------------------------
+
+// .modal-open      - body class for killing the scroll
+// .modal           - container to scroll within
+// .modal-dialog    - positioning shell for the actual modal
+// .modal-content   - actual modal w/ bg and corners etc
+
+// Kill the scroll on the body
+.modal-open {overflow: hidden; }
+
+.modal-prev, 
+.modal-next  {
+  color: $dark !important;
+  position: fixed;
+  top: 50%;
+  margin: 0 34px;
+  margin-top: -30px;
+  opacity: 0.5;
+  z-index: 2000;
+}
+.modal-prev { left: 0;}
+.modal-next { right: 0;}
+
+
+// Container that the modal scrolls within
+.modal {
+  overflow: auto;
+  overflow-y: scroll;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 35000;
+  -webkit-overflow-scrolling: touch;
+
+  // Prevent Chrome on Windows from adding a focus outline. For details, see
+  // https://github.com/twbs/bootstrap/pull/10951.
+  outline: 0;
+
+  // When fading in the modal, animate it to slide down
+  &.fade .modal-dialog {
+    // @include translate(0, -25%);
+    @include transition-transform(0.1s ease-out);
+    @include scale(0.98,0.98);
+  }
+
+  &.in {
+    pointer-events: auto;
+    .modal-dialog { 
+      // @include translate(0, 0)
+      @include scale(1,1);
+    }
+  }
+  
+  .close {
+    position: fixed;
+    margin: 44px 44px;
+    .icon {display: block; }
+  }
+  
+  figure {
+    margin: 0;
+    img {
+      display: block;
+      margin: auto;
+    }
+  }
+}
+
+// Shell div to position the modal with bottom padding
+
+.modal-wrapper {
+  position: relative;
+  margin: 0px;
+  display: table;
+  height: 100%;
+  width: 100%;
+
+  background-color: rgba(0,0,0, 0.7);
+}
+.modal-appendix {
+  position: relative;
+  margin: 0px;
+  display: table;
+  width: 100%;
+
+  text-align: center;
+  background-color: $light;
+  color: $medium;
+  vertical-align: top;
+  height: auto;
+
+  .modal-section {
+    max-width: 600px;
+    margin: auto;
+    text-align: left;
+  }
+}
+
+.modal-dialog {
+  position: relative;
+  width: auto;
+  margin: 0px;
+  display: table-cell;
+  vertical-align: middle;
+  height: 100%;
+  width: 100%;
+  margin: auto;
+  text-align: center;
+  padding: 40px;
+  &.top {vertical-align: top; }
+}
+
+.modal-medium {
+  max-height: 100%;
+  > * {
+    max-width: 100%;
+    max-height: 100%;
+  }
+}
+
+// Actual modal
+.modal-content {
+  width: 600px;
+  position: relative;
+  // @include box-shadow(0 0px 10px 5px rgba(0,0,0,0.05));
+  background-clip: padding-box;
+  // Remove focus outline from opened modal
+  outline: none;
+  display: inline-block;
+  text-align: left;
+  @include user-select(none);
+
+  border-radius: $radius*3;
+  background-color: $light !important;
+  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 7px rgba(0, 0, 0, 0.1);
+}
+
+
+.modal-header {
+  padding: 30px 40px;
+  position: relative;
+  color: $medium;
+}
+
+.close-search {
+  position: fixed;
+  top: 0;
+  right: 0;
+  margin: 40px 35px;
+}
+
+
+
+// Title text within header
+.modal-title {
+  color: $dark;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  text-indent: 4px;
+  text-align: center;
+  padding-top: 30px;
+}
+
+.modal-side-tabs {
+  position: absolute;
+  right: 0;
+  top: 0;
+  list-style: none;
+  padding: 0;
+  height: 100%;
+  padding: 15px;
+  border-left: 2px solid rgba(0,0,0,0.025); 
+  z-index: 100;
+  border-top-right-radius: $radius*3;
+  border-bottom-right-radius: $radius*3;
+}
+
+
+.modal-tabs-wrapper {
+  overflow: hidden;
+  border-top-left-radius: $radius*3;
+  border-top-right-radius: $radius*3;
+}
+
+.modal-tabs {
+  display: table;
+  width: 100%;
+  table-layout: auto;
+  background-color: $lightish;
+
+  .dialog-tab {
+    display: table-cell;
+    text-align: center; 
+    &:hover span {color: $dark; }
+
+    &.open span {
+      background-color: $light;
+      color: $dark;
+      opacity: 1;
+      box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 7px rgba(0, 0, 0, 0.1) !important;
+      border-bottom-right-radius: 0px !important;
+      border-bottom-left-radius: 0px !important;
+      border-top-left-radius: $radius*3;
+      border-top-right-radius: $radius*3;
+
+    }
+
+    &:first-child span { 
+      box-shadow: inset 0px -4px 1px -4px rgba(0, 0, 0, 0.05), inset 0px -4px 7px -4px rgba(0, 0, 0, 0.1); 
+      // border-top-left-radius: $radius*3;
+      // border-bottom-right-radius: $radius*3;
+    }
+
+    &:last-child  span { 
+      // box-shadow: inset 0 -4px 1px -4px rgba(0, 0, 0, 0.05), inset 0 -4px 7px -4px rgba(0, 0, 0, 0.1); 
+      // border-top-right-radius: $radius*3;
+      // border-bottom-left-radius: $radius*3;
+    }
+
+    span {
+      box-shadow: inset 0 -4px 1px -4px rgba(0, 0, 0, 0.05), inset 0 -4px 7px -4px rgba(0, 0, 0, 0.1); 
+      cursor: pointer;
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: 0.2em;
+      text-indent: 4px;
+      display: block;
+      width: 100%;
+      height: 44px;
+      line-height: 44px;
+    }
+  }
+}
+
+
+// Modal body
+// Where all modal content resides (sibling of .modal-header and .modal-footer)
+.modal-body {
+  position: relative;
+  @include clearfix();
+}
+
+.modal {
+  .modal-section {
+    // overflow: hidden;
+    border-bottom: 2px solid rgba(0,0,0,0.04);
+    padding: 40px;
+    display: block;
+    @include clearfix();
+  
+    &:first-child {
+      border-top-left-radius: $radius*3 !important;
+      border-top-right-radius: $radius*3 !important;
+    }
+
+    &.dark {background-color: $dark; }
+    &.light {background-color: $light; }
+      
+    .modal-section-title {
+      margin: 0;
+      padding-top: 15px;
+      color: $dark;
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: 0.2em;
+      text-indent: 4px;
+      text-align: center;
+    }
+  }
+}
+
+// Footer (for actions)
+.modal-footer {
+  // border-bottom-left-radius: $radius;
+  // border-bottom-right-radius: $radius;
+  // background-color: $dark !important;
+  // padding: 40px;
+  // padding-top: 0px;
+  // text-align: right; // right align buttons
+  @include clearfix(); // clear it in case folks use .pull-* classes on buttons
+
+  // Properly space out buttons
+  // .btn + .btn {
+  //   margin-left: 5px;
+  //   margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
+  // }
+  // // but override that for button groups
+  // .btn-group .btn + .btn {
+  //   margin-left: -1px;
+  // }
+  // // and override it for block buttons as well
+  // .btn-block + .btn-block {
+  //   margin-left: 0;
+  // }
+}
\ No newline at end of file

styles/normalize.scss

+/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
+
+//
+// 1. Set default font family to sans-serif.
+// 2. Prevent iOS text size adjust after orientation change, without disabling
+//    user zoom.
+//
+
+html {
+  font-family: sans-serif; // 1
+  -ms-text-size-adjust: 100%; // 2
+  -webkit-text-size-adjust: 100%; // 2
+}
+
+//
+// Remove default margin.
+//
+
+body {
+  margin: 0;
+}
+
+// HTML5 display definitions
+// ==========================================================================
+
+//
+// Correct `block` display not defined in IE 8/9.
+//
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+  display: block;
+}
+
+//
+// 1. Correct `inline-block` display not defined in IE 8/9.
+// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+//
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; // 1
+  vertical-align: baseline; // 2
+}
+
+//
+// Prevent modern browsers from displaying `audio` without controls.
+// Remove excess height in iOS 5 devices.
+//
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+//
+// Address `[hidden]` styling not present in IE 8/9.
+// Hide the `template` element in IE, Safari, and Firefox < 22.
+//
+
+[hidden],
+template {
+  display: none;
+}
+
+// Links
+// ==========================================================================
+
+//
+// Remove the gray background color from active links in IE 10.
+//
+
+a {
+  background: transparent;
+}
+
+//
+// Improve readability when focused and also mouse hovered in all browsers.
+//
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+// Text-level semantics
+// ==========================================================================
+
+//
+// Address styling not present in IE 8/9, Safari 5, and Chrome.
+//
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+//
+// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+//
+
+b,
+strong {
+  font-weight: bold;
+}
+
+//
+// Address styling not present in Safari 5 and Chrome.
+//
+
+dfn {
+  font-style: italic;
+}
+
+//
+// Address variable `h1` font-size and margin within `section` and `article`
+// contexts in Firefox 4+, Safari 5, and Chrome.
+//
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+//
+// Address styling not present in IE 8/9.
+//
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+//
+// Address inconsistent and variable font size in all browsers.
+//
+
+small {
+  font-size: 80%;
+}
+
+//
+// Prevent `sub` and `sup` affecting `line-height` in all browsers.
+//
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+// Embedded content
+// ==========================================================================
+
+//
+// Remove border when inside `a` element in IE 8/9.
+//
+
+img {
+  border: 0;
+}
+
+//
+// Correct overflow displayed oddly in IE 9.
+//
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+// Grouping content
+// ==========================================================================
+
+//
+// Address margin not present in IE 8/9 and Safari 5.
+//
+
+figure {
+  margin: 1em 40px;
+}
+
+//
+// Address differences between Firefox and other browsers.
+//
+
+hr {
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  height: 0;
+}
+
+//
+// Contain overflow in all browsers.
+//
+
+pre {
+  overflow: auto;
+}
+
+//
+// Address odd `em`-unit font size rendering in all browsers.
+//
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+// Forms
+// ==========================================================================
+
+//
+// Known limitation: by default, Chrome and Safari on OS X allow very limited
+// styling of `select`, unless a `border` property is set.
+//
+
+//
+// 1. Correct color not being inherited.
+//    Known issue: affects color of disabled elements.
+// 2. Correct font properties not being inherited.
+// 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+//
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; // 1
+  font: inherit; // 2
+  margin: 0; // 3
+}
+
+//
+// Address `overflow` set to `hidden` in IE 8/9/10.
+//
+
+button {
+  overflow: visible;
+}
+
+//
+// Address inconsistent `text-transform` inheritance for `button` and `select`.
+// All other form control elements do not inherit `text-transform` values.
+// Correct `button` style inheritance in Firefox, IE 8+, and Opera
+// Correct `select` style inheritance in Firefox.
+//
+
+button,
+select {
+  text-transform: none;
+}
+
+//
+// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+//    and `video` controls.
+// 2. Correct inability to style clickable `input` types in iOS.
+// 3. Improve usability and consistency of cursor style between image-type
+//    `input` and others.
+//
+
+button,
+html input[type="button"], // 1
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; // 2
+  cursor: pointer; // 3
+}
+
+//
+// Re-set default cursor for disabled elements.
+//
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+//
+// Remove inner padding and border in Firefox 4+.
+//
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+//
+// Address Firefox 4+ setting `line-height` on `input` using `!important` in
+// the UA stylesheet.
+//
+
+input {
+  line-height: normal;
+}
+
+//
+// It's recommended that you don't attempt to style these elements.
+// Firefox's implementation doesn't respect box-sizing, padding, or width.
+//
+// 1. Address box sizing set to `content-box` in IE 8/9/10.
+// 2. Remove excess padding in IE 8/9/10.
+//
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; // 1
+  padding: 0; // 2
+}
+
+//
+// Fix the cursor style for Chrome's increment/decrement buttons. For certain
+// `font-size` values of the `input`, it causes the cursor style of the
+// decrement button to change from `default` to `text`.
+//
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+//
+// 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+// 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+//    (include `-moz` to future-proof).
+//
+
+input[type="search"] {
+  -webkit-appearance: textfield; // 1
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box; // 2
+  box-sizing: border-box;
+}
+
+//
+// Remove inner padding and search cancel button in Safari and Chrome on OS X.
+// Safari (but not Chrome) clips the cancel button when the search input has
+// padding (and `textfield` appearance).
+//
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+//
+// Define consistent border, margin, and padding.
+//
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+//
+// 1. Correct `color` not being inherited in IE 8/9.
+// 2. Remove padding so people aren't caught out if they zero out fieldsets.
+//
+
+legend {
+  border: 0; // 1
+  padding: 0; // 2
+}
+
+//
+// Remove default vertical scrollbar in IE 8/9.
+//
+
+textarea {
+  overflow: auto;
+}
+
+//
+// Don't inherit the `font-weight` (applied by a rule above).
+// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+//
+
+optgroup {
+  font-weight: bold;
+}
+
+// Tables
+// ==========================================================================
+
+//
+// Remove most spacing between table cells.
+//
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
\ No newline at end of file

styles/overflow.scss

+@import "vars";
+@import "mixins";
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-scroll {
+  overflow-y: scroll;
+  overflow-x: scroll;
+}
+
+.overflow-y-scroll {
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+.overflow-x-scroll { 
+  overflow-y: hidden;
+  overflow-x: scroll;
+}
+
+.fit {
+  position: absolute !important;
+  width: auto;
+  height: auto;
+  right: 0px;
+  left: 0px;
+  top: 0px;
+  bottom: 0px;
+}
+
+.overflow-scroll,
+.overflow-hidden,
+.overflow-x-scroll,
+.overflow-y-scroll {
+  -webkit-overflow-scrolling: touch;
+
+  &::-webkit-scrollbar {
+      width: 0px;
+      height: 0px;
+  }
+  &::-webkit-scrollbar-corner,::-webkit-scrollbar {
+    background-color: rgba(0,0,0,0);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: rgba(255,255,255,0.1);
+    -webkit-background-clip: padding-box;
+    border: 0px solid transparent;
+  }
+}

styles/pages.scss

+@import "vars";
+@import "mixins";
+
+#pages {
+  #pages-actions {
+    display: inline-block;
+    padding-left: 25px;
+    margin: 20px 0;
+  }
+  
+  #pages-options {
+    position: relative;
+    display: inline-block;
+    margin-right: -4px;
+    padding-right: 0px;
+    margin: 10px 0;
+
+  }
+  
+  .pages-wrapper {
+    counter-reset: pages-counter;
+  }
+
+  .page {
+    counter-increment: pages-counter;
+    display: block;
+    position: relative;
+    
+    .dropdown {
+      position: absolute;
+      bottom: 0;
+      right: -15px;
+      margin: 10px 25px;
+    }
+
+    &.active {
+      img {
+        border: 2px solid white;
+      }
+      .page-thumbnail:before  {
+        background-color: white;
+      }
+    }
+
+    .page-thumbnail {
+      position: relative;
+      width: 100%;
+      margin-top: 25px;
+      padding: 0 25px;
+
+      img {
+        border-radius: $radius;
+        display: block;
+        width: 100%;
+      }
+
+      &:before {
+        z-index: 100;
+        content: counter(pages-counter);
+        right: 0px;
+        margin-right: 5px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        font-size: 15px;
+        background-color: white;
+        border-radius: 100%;
+        margin: -15px;
+        line-height: 30px;
+        width: 30px;
+        height: 30px;
+        text-align: center;
+
+        background-color: $light;
+        background-color: $dark;
+        color: $medium;;
+      }
+    }
+  }
+}
\ No newline at end of file

styles/pattern.scss

+@import "vars";
+@import "mixins";
+
+#pattern {
+
+
+  #background-position {
+    height: 210px;
+    position: relative;
+
+    .position-icon {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 120px;
+      height: 120px;
+      border: 2px solid $dark;
+      border-radius: 4px;
+      margin: -50px -60px;
+
+      .radio {
+        position: absolute;
+        display: inline-block;
+
+        &.top-left   {top: -30px; left: 0; margin-left: -30px; }
+        &.top-center {top: -30px; left: 50%; margin-left: -30px; }
+        &.top-right  {top: -30px; right: 0; margin-right: -30px; } 
+
+        &.center-left   {top: 50%; margin-top: -30px; left: 0; margin-left: -30px; }
+        &.center-center {top: 50%; margin-top: -30px; left: 50%; margin-left: -30px; }
+        &.center-right  {top: 50%; margin-top: -30px; right: 0; margin-right: -30px; } 
+
+        &.bottom-left   {bottom: 0; margin-bottom: -30px; left: 0; margin-left: -30px; }
+        &.bottom-center {bottom: 0; margin-bottom: -30px; left: 50%; margin-left: -30px; }
+        &.bottom-right  {bottom: 0; margin-bottom: -30px; right: 0; margin-right: -30px; } 
+      }
+    }
+
+    .icon-label {
+      pointer-events: none;
+      margin-top: 62px;
+    }
+  }
+}
\ No newline at end of file

styles/player.scss

+@import "vars";
+@import "mixins";
+
+
+#player {
+
+  -webkit-overflow-scrolling: touch;
+  position: absolute;
+  border-radius: $radius;
+  
+  top: 100px;
+  left: 100px;
+  bottom: 100px;
+  right: 100px;
+  width: auto;
+  height: auto;
+  z-index: 0;
+  background-color: black;
+  white-space: nowrap;
+  z-index: 10000;
+  display: none;
+
+  #player-controls-1{
+    height: 100px;
+
+    &:hover #player-controls-2{
+      @include scale(1,1);
+    }
+
+    #player-controls-2{
+      @include transition( all 0.4s ease-in-out);
+    }
+
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    opacity: 0;
+    @include transition( all 0.4s ease-in-out);
+    @include translateY (20%);
+    &:hover {
+      @include translateY (0);
+      opacity: 1;
+      #player-controls {
+      @include rotateX(0deg);
+      }
+    }
+
+    @include backface-visibility(hidden);
+    -webkit-perspective: 1000;
+       -moz-perspective: 1000;
+        -ms-perspective: 1000;
+            perspective: 1000;
+
+    @include perspective-origin(bottom center);
+
+    #player-controls {
+      @include rotateX(-90deg);
+      @include transform-origin(bottom center);
+      @include backface-visibility(hidden);
+      @include transition( all 0.4s ease-in-out);
+      
+      background-color: rgba(0,0,0,0.25);
+      background-color: $darker;
+      border-radius: $radius;
+      margin: 20px;
+
+      /*  As of August 2012, only supported in Chrome 21+ */
+      display: -webkit-flex;
+      flex-direction: row;
+      align-items: center;
+
+      .time {
+        font-size: 20px;
+        line-height: 60px;
+        display: block;
+        padding: 0 20px;
+        &.current {border-left: 2px solid rgba(0,0,0,0.1); }
+        &.total {border-right: 2px solid rgba(0,0,0,0.1); }
+      }
+
+      .progress-bar {
+        flex: 1;
+        position: relative;
+      }
+
+      .progress-bar {
+        background-color: rgba(0,0,0,0.25);
+        width: 100%;
+        height: 60px;
+        position: relative;
+
+        .progress-bar-buffer,
+        .progress-bar-progress,
+        .progress-bar-handle {
+          position: absolute;
+          height: 60px;
+        }
+        .progress-bar-handle {
+          width: 4px;
+          background-color: $light;
+          z-index: 10;
+          margin-left: -2px;
+          height: 60px;
+          border-radius: 30px;
+        }
+        .progress-bar-buffer { background-color: rgba(0,0,0,0.25); }
+        .progress-bar-progress { background-color: $blue; }
+        .progress-bar-handle {}
+      }
+    }
+  }
+}
\ No newline at end of file

styles/profile.scss

+@import "vars";
+@import "mixins";
+#short-profile {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 300px;
+  height: 200px;
+  border-radius: $radius;
+  background-color: white;
+  box-shadow: 0 1px 10px rgba(0,0,0,0.05);
+  z-index: 5000;
+
+  #short-profile-header {
+    height: 100px;
+    width: 300px;
+    border-top-left-radius: $radius;
+    border-top-right-radius: $radius;
+    position: relative;
+    background-size: cover;
+    background-position: center;
+    background-color: rgba(0,0,0,0.1);
+  }
+
+  #short-profile-image {
+    position: absolute;
+    bottom: -30px;
+    left: 50%;
+    margin-left: -40px;
+  }
+  #short-profile-actions {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 10px;
+  }
+  #short-profile-details {
+    padding-top: 40px;
+    .nickname,
+    .bio {
+      text-align: center;
+      display: block;
+    }
+    .bio { color: $medium;}
+    .nickname {color: $darker; font-size: 18px;}
+  }
+}
+
+
+
+#profile-details {
+  padding: 30px 40px;
+  background-color: white;
+  @include clearfix();
+  text-align: center;
+  position: relative;
+  .profile-head {
+    margin-bottom: 20px;
+  }
+  .profile-image {
+    position: relative;
+    margin: auto;
+    display: inline-block;
+    margin-bottom: 20px;
+    line-height: 200px;
+    width: 200px;
+    height: 200px;
+    border: 4px solid white;
+    border-radius: 8px;
+    box-shadow: 0 1px 10px rgba(0,0,0,0.05);
+  }
+
+  .profile-cover {
+    position: absolute;
+    height: 200px;
+    width: 100%;
+    top: 0;
+    left: 0;
+    background-size: cover;
+    background-position: center;
+    z-index: 0;
+  }
+  .profile-username {
+    margin: 0;
+    font-size: 20px;
+    color: $darker;
+  }
+  .profile-description {
+    margin: 0;
+    font-size: 20px;
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    // text-align: center;
+    margin-top: -3px;
+
+    li {
+      vertical-align: middle;
+      display: inline-block;
+      // margin: 0px 7px;
+      margin-right: 3px;
+      color: $medium;
+      text-transform: uppercase;
+      font-family: $main-font;
+      font-size: 11px;
+      opacity: 0.5;
+      &:hover {opacity: 1; }
+      > .icon {margin-right: 3px; }
+      a {
+        color: $medium;
+        &:hover {color: $blue; }
+      }
+    }
+  }
+}
+
+
+#account {
+  padding-top: 64px;
+  #cover-image {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    opacity: 0.2;
+    background-size: cover;
+    background-position: center;
+  }
+  #profile-image {
+    position: relative;
+
+    img {
+      border-radius: $radius;
+      overflow: hidden;
+    }
+    #remove-profile-image {
+      position: absolute;
+      top: 0;
+      left: 0;
+      margin: -16px;
+    }
+  }
+}
+

styles/rich-text.scss

+@import "vars";
+
+#rich-text-editor-wrapper {
+  z-index: 10001;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  &:before {
+    top: 0;
+    display: block;
+    content: "";
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    pointer-events: none;
+    border: 1px solid $blue;
+    z-index: 0;
+  }
+}
+
+#rich-text-editor-controls {
+  position: absolute;
+  width: 100%;
+  bottom: 100%;
+  left: 0;
+  padding-bottom: 10px; 
+}
+
+#rich-text-editor {
+  white-space: normal;
+  cursor: default;
+  position: relative;
+  
+  // multi-column text
+  /*&:after{
+    width: 32px;
+    left: 50%;
+    top: 0;
+    margin-left: -16px;
+    border-left: 1px solid $blue;
+    border-right: 1px solid $blue;
+    position: absolute;
+    content: "";
+    height: 100%;
+    pointer-events: none;
+  }*/
+  
+  li,
+  p {
+    cursor: text;
+    // &:hover{
+    //   &:after {display: block; }
+    // }
+
+    // &:after{
+    //   background-color: rgba(40,140,215,0.05);
+    //   border: 1px solid $blue;
+    //   margin-top: 0.38em;
+    //   margin-bottom: 0.42em;
+    //   position: absolute;
+    //   content: "";
+    //   width: auto;
+    //   height: auto;
+    //   left: 0;
+    //   right: 0;
+    //   bottom: 0;
+    //   top: 0;
+    //   pointer-events: none;
+    // }
+  }
+}

styles/row.scss

+.row:before,
+.row:after {
+  display: table;
+  content: " ";
+}
+
+.row:after {
+  clear: both;
+}
+
+.row:before,
+.row:after {
+  display: table;
+  content: " ";
+}
+
+.row:after {
+  clear: both;
+}
+
+.row {
+  margin: 0 -5px;
+  > div {
+    position: relative;
+    min-height: 1px;
+    padding-right: 5px;
+    padding-left: 5px; 
+    float: left;
+    img {
+      max-width: 100%;
+    }
+  }
+  &.no-gutter {
+    margin: 0 !important;
+    > div {
+      padding: 0px !important;
+    }
+  }
+
+  &.cols-12 > div { width: percentage(1 / 12); }
+  &.cols-11 > div { width: percentage(1 / 11); }
+  &.cols-10 > div { width: percentage(1 / 10); }
+  &.cols-9  > div { width: percentage(1 / 9); }
+  &.cols-8  > div { width: percentage(1 / 8); }
+  &.cols-7  > div { width: percentage(1 / 7); }
+  &.cols-6  > div { width: percentage(1 / 6); }
+  &.cols-5  > div { width: percentage(1 / 5); }
+  &.cols-4  > div { width: percentage(1 / 4); }
+  &.cols-3  > div { width: percentage(1 / 3); }
+  &.cols-2  > div { width: percentage(1 / 2); }
+  &.cols-1  > div { width: percentage(1 / 1); }
+}

styles/ruler.scss

+@import "vars";
+@import "mixins";
+
+.ruler {
+    position: absolute;
+    width: 100%;
+    border-bottom:1px dotted #e17878;
+    background-clip: padding-box;
+
+    z-index: 5;
+    cursor: ns-resize;
+    .ruler-value {
+        display: inline-block;
+        background-color: $blue;
+        background-color: #e17878;
+        color: white;
+        font-size: 11px;
+        line-height: 1;
+        position: absolute;
+        text-align: center;  
+        opacity: 0;
+    }
+    &:hover {
+        .ruler-value {
+            opacity: 1;
+        }
+    }
+    &.horz {
+        top: 50px;
+        width: 100%;
+        border-bottom:1px dotted #e17878;
+        height: 1px;
+        cursor: ns-resize;
+        &:hover {
+            border-bottom-style: solid; 
+        }
+        .ruler-value {
+            left: 250px;
+            top: 0;
+            border-bottom-left-radius: 60px;
+            border-bottom-right-radius: 60px;
+            width: 40px;
+            height: 40px;
+            line-height: 40px;
+        }
+    }
+
+    &.vert {
+        left: 50px;
+        height: 100%;
+        border-left:1px dotted #e17878;
+        width: 1px;
+        cursor: ew-resize;
+        &:hover {border-left-style: solid; }
+        .ruler-value {
+            left: 0;
+            top: 250px;
+            border-top-right-radius: 60px;
+            border-bottom-right-radius: 60px;
+            height: 40px;
+            width: 40px;
+            line-height: 40px;
+        }
+    }
+}
\ No newline at end of file

styles/search.scss

+@import "vars";
+@import "mixins";
+
+#search-dialog {
+  &:after {
+    margin-left: -160px;
+  }
+}
+
+.dialog-search {
+  margin-left: 0;
+
+  transform: translate3d(-22.5%, 0%, 100px) scale(1) !important;
+}
+
+.dialog-search-input {
+  position: absolute;
+  text-align: center;
+  top: 0;
+  left: 0;
+  right: 112px;
+  color: $medium;
+  padding: 25px;
+  background-color: rgba(245,245,245,0.95); 
+  border-top-left-radius: $radius*3;
+  z-index: 100;
+}
+
+.dialog-search-results {
+  padding: 40px !important;
+  padding-top: 110px !important;
+  margin-right: 92px;
+  position: relative;
+  @include clearfix();
+  font-size: 11px;
+  line-height: 1.5;
+  text-align: left !important;
+
+  .search-result {
+    max-width:100px;
+  }
+  
+  > * {
+    cursor: pointer; 
+    // &:hover {opacity: 0.8; }
+    > * {pointer-events: none; }
+  }
+  .search-result-audio {}
+  .search-result-video {
+    &:nth-child(3n+1) {clear: both; }
+
+    width: 33%;
+    float: left;
+    padding-right: 20px;
+    padding-bottom: 20px;
+
+    .thumbnail-wrapper {
+      &:hover .thumbnail { opacity: 0.8; }
+      span {
+        display: block;
+        top: 0;
+        left: 0;
+        position: absolute;
+        &:before{
+          content: "";
+          display: block;
+          padding-top: 100%; /* initial ratio of 1:1*/
+          padding-top: 55%;
+        }
+        background-color: $blue;
+        color: $light;
+        text-align: center;
+      }
+    }
+    
+    .thumbnail {
+      width: 100%;
+      margin-bottom: 10px;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      border-radius: $radius;
+      &:before{
+        content: "";
+        display: block;
+        padding-top: 100%; /* initial ratio of 1:1*/
+        padding-top: 55%;
+      }
+    }
+  }
+    .search-result-image {
+    display: inline-block;
+    margin-right: 8px;
+    margin-bottom: 8px;
+    img {
+      height: 100%;
+      max-width: 120px;
+      max-height: 120px;
+      border-radius: $radius;
+    }
+  }
+}
\ No newline at end of file

styles/section.scss

+@import "vars";
+@import "mixins";
+
+.section {
+  // min-height: 100%;
+  min-height: 50px !important;
+  position: relative;
+  //@include clearfix;
+  background-color: #fff;
+  background-position: center;
+  background-size: cover;
+
+  &.active {
+    .section-padding-corner.in,
+    .section-padding.in {
+      display: block;
+    }
+  }
+}
+
+.space-empty,
+.section-empty {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 800;
+  pointer-events: none;
+  opacity: 0.25;
+  display: block;
+}

styles/select-list.scss

+@import "vars";
+@import "mixins";
+
+
+.white .select-list {
+  li {
+    &.checked {
+
+      &:before {background-color: $medium !important; }
+      > a,
+      > span {
+        color: $medium;
+      }
+    }
+    
+    &:hover {
+      &:before {background-color: $medium; }
+      > a,
+      > span {
+        background-color: rgba(0,0,0,0.025) !important;
+      }
+    }
+
+    &:before {background-color: $medium; }
+    > a,
+    > span {
+      color: $medium;
+    }
+  }
+}
+
+.select-list {
+  &:empty:before{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -50%;
+    width: 100%;
+    display: block;
+    font-size: 13px;
+    line-height: 1px;
+    margin-top: -6px;
+    content:attr(data-placeholder);
+    color: $medium;
+    opacity: 0.5;
+  }
+
+  -webkit-mask-image: -webkit-gradient(linear, left top, left 15px, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.5)));
+
+  background-clip: padding-box;
+  font-size: 15px;
+  line-height: 14px;
+  list-style: none;
+  margin: 0px;
+  padding: 15px 0;
+  text-align: left;
+  // background-color: $dark;
+  color: $medium;
+  border-radius: $radius;
+  
+  .divider + li span {border: none !important; }
+
+  .divider {
+    @include backface-visibility(hidden);
+    
+    margin: 10px 0;
+    border: 1px solid rgba(0,0,0,0.05);
+    height: 0;
+  }
+
+  // li.divider {border-bottom: 2px solid rgba(0,0,0,0.025); }
+  
+  li {
+    width: 100%;
+    display: block;
+    position: relative;
+    margin: -2px 0 ;
+
+    &.checked {
+      opacity: 1;
+
+      &:before {
+        background-color: $dark !important;
+        display: block;
+      }
+      > a,
+      > span {
+        color: $dark;
+      }
+    }
+    
+    &:hover {
+      // background-color: rgba(0,0,0,0.025);
+      &:before {
+        background-color: $medium;
+        display: block;
+      }
+      > a,
+      > span {
+        color: $medium;
+        color: $dark;
+      }
+    }
+    
+    &.select-list-title:before {
+      display: none !important;
+    }
+
+    &:before {
+      top: 50%;
+      left: 10px;
+      margin-top: -3px;
+      content: "";
+      display: block;
+      position: absolute;
+      height: 6px;
+      width: 6px;
+      background-color: $light;
+      border-radius: 100%;
+      display: none;
+    }
+
+    > b,
+    > a,
+    > span {
+      display: block;
+      cursor: pointer;
+      white-space: nowrap;
+      color: $medium;
+      margin: 0 25px;
+      padding: 16px 3px;
+      // line-height: 50px; 
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+      border-top: 2px solid rgba(0,0,0,0.025) !important;
+      .icon {
+        &.icon-sm {
+          margin: -7px;
+          margin-right: 14px;
+        }
+        &.icon-md {
+          margin: -13px;
+          margin-right: 7px;
+        }
+      }
+    }
+
+    &:first-child {
+      > b,
+      > a,
+      > span {
+        border: none !important;
+      }
+    }
+  }
+}
\ No newline at end of file

styles/settings.scss

+@import "vars";
+@import "mixins";
+
+#settings {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  .overflow-y-scroll {
+    width: 100%;
+    padding: 25px 40px;
+  }
+
+  font-family: 'open sans', sans-serif;
+  background-color: $light;
+  color: $medium;;
+  h5 {
+    font-size: 13px;
+    line-height: 30px;
+    display: block;
+  }
+}
\ No newline at end of file

styles/sidebar.scss

+@import "vars";
+@import "mixins";
+
+// .sidebar-open {
+//   #sidebar #sidebar-content {
+//   @include translate3d (0%,0,0);
+//   }
+// }
+// body:not(.sidebar-open) {
+//   #sidebar-content:hover {
+//     @include translateX($sidebar-width);
+//   }
+// }
+
+#sidebar {
+  @include opacity (0);
+  //@include translateX($sidebar-width);
+  @include transition( all 0.25s ease-in-out);
+
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  backface-visibility: hidden;
+  
+  z-index: 20001;
+  position: absolute;
+  top: 0px;
+  max-height: 50%;
+  width: $sidebar-width;
+  font-size: 14px;
+  color: $medium;
+  background-color: $light !important;
+  right: 0px;
+  overflow-y: auto;
+
+  pointer-events: none;
+  
+  @include user-select(none);
+
+  &.folder-sidebar {
+    height: 100%;
+    max-height: 100%;
+  }
+  
+  small,
+  p {color: $medium; }
+
+  &.in {
+    //@include translateX(0);
+    @include opacity(1);
+    pointer-events: all;
+  }
+  
+  #sidebar-options {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 1100;
+    height: auto;
+    padding: 7px 20px;
+    border-bottom: 2px solid rgba(0,0,0,0.1);
+    background-color: $darker;
+  }
+
+  #sidebar-rim {
+    position: absolute;
+    top: 0%;
+    margin-top: -30px;
+    height: 100%;
+    left: 100%;
+    z-index: 4000;
+    font-size: 40px;
+    background-color: $darker;
+    opacity: 0.1;
+    width: 1px !important;
+    padding: 0px;
+    min-width: 0px;
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+
+  .sidebar-footer {
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+    z-index: 1000;
+    padding: 0px 25px;
+    padding-bottom: 10px;
+    background-color: $darker;
+  }
+
+  .sidebar-header {
+    display: block;
+    width: 100%;
+    background-color: $darker;
+    min-height: 62px;
+    border-bottom: 2px solid rgba(0,0,0,0.1);
+
+    .btn-group {
+      margin: 10px;
+    }
+
+    .sidebar-title {
+      font-size: 13px;
+      height: 60px;
+      line-height: 30px;
+      padding: 15px 55px;
+      display: block;
+      margin: 0px;
+      z-index: 0;
+      text-align: center;
+      width: 100%;
+      position: absolute;
+
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      &:first-letter {text-transform: capitalize; }
+    }
+  }
+
+  .sidebar-section {
+    padding: 25px;
+    border-bottom: 2px solid rgba(0,0,0,0.1);
+    h4 {
+      .btn {
+        margin-right: -10px;
+        margin-top: -10px;
+      }
+    }
+  }
+
+  .sidebar-menu {
+    position: absolute;
+    top: 60px;
+    width: 100%;
+    min-height: 60px;
+    text-align: center;
+    background-color: $darker;
+    background-color: #242424;
+    border-bottom: 2px solid rgba(0,0,0,0.1);
+    font-size: 0;
+    z-index: 900;
+    @include backface-visibility(hidden);
+
+    .btn {
+      width: 50%;
+    }
+
+    &#file-create {
+      .icon {
+        opacity: 0.25;
+        position: absolute;
+        pointer-events: none;
+        top: 6px;
+        left: 8px;
+      }
+
+      .input {
+        background-color: transparent;
+        border: none;
+        display: block;
+        height: 60px !important;
+        min-height: 58px !important;
+        line-height: 30px;
+        font-size: 15px !important;
+        color: $light;
+        position: absolute;
+        z-index: 1000;
+        top: -1px;
+        width: 100%;
+        padding-left: 50px;
+        &:first-letter {text-transform: capitalize; }
+      }
+    }
+    
+    pointer-events: none;
+    @include transition( all 0.2s ease-in-out);
+    @include translateY (-15px);
+    &.in {
+      background-color: $darker;
+      pointer-events: auto;
+      opacity: 1;
+      @include translateY (0px);
+    }
+    &.disabled {
+      .btn {
+        @include opacity(0.125);
+        pointer-events: none;
+      }
+    }
+  }
+
+  .sidebar-menu-backdrop {
+    @include transition( all 0.2s ease-in-out);
+    position: absolute;
+    z-index: 800;
+    top: 60px;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0);
+    pointer-events: none;
+    &.in {
+      pointer-events: auto;
+      background-color: rgba(30,30,30,0.5);
+    }
+  }
+
+  #search-input {
+    padding: 15px 25px;
+    font-size: 14px;
+
+    &:-moz-placeholder,
+    &::-moz-placeholder,
+    &:-ms-input-placeholder { 
+      font-family: $main-font;
+      // text-transform: uppercase;
+    }
+
+    &::-webkit-input-placeholder  { 
+      font-family: $main-font;
+      // text-transform: uppercase;
+    }
+  }
+
+  #online-members {
+    > div:not(.in) {
+      display: none;
+    }
+  }
+}

styles/smoke.scss

+@import "vars";
+
+.smoke {
+  text-align: center;
+  background-color: white;
+  box-shadow: 0 0px 20px #666;
+}
+
+.smoke-base {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  visibility: hidden;
+  opacity: 0;
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.smoke-base.smoke-visible {
+  opacity: 1;
+  visibility: visible; 
+}
+
+.smokebg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0; 
+}
+
+.smoke-base .smoke-dialog {
+  margin: auto;
+  margin-top: 200px;
+  border-radius: 20px;
+  
+  width: 400px;
+  padding: 10px;
+  
+  font-size: 13pt;
+  text-align: left;
+}
+
+.smoke-dialog-prompt {
+  margin-top: 15px;
+  text-align: center; 
+}
+
+.smoke-dialog-buttons {
+  margin: 20px 0 0 0; 
+}
+
+.smoke-dialog-buttons button {
+  background-color: $blue;
+  color: $light;
+  margin: 10px 0px 0px 5px;
+}
+
+.smoke-dialog-buttons button.cancel {
+  background-color: $light;
+  color: $dark;
+}
+
+.smoke-dialog-prompt input {
+  width: 75%;
+}
+
+.smoke-base .smoke-dialog-inner {
+  padding: 20px;
+  color: #202020;
+}

styles/space-grid.scss

+@import "vars";
+@import "mixins";
+
+$grid-color-1: rgba(60,60,60,0.125);
+$grid-color-2: rgba(60,60,60,0.075);
+
+.edge {
+  width: 100%;
+  height: 100%;
+  border:1px dotted $light;
+  pointer-events:none;
+  opacity: 0.5;
+  position:absolute;
+  z-index: 100000;
+  display: none;
+}
+
+.space-grid {
+  pointer-events:none;
+  position:absolute;
+  width:100%;
+  height:100%;
+  top:0;
+  left:0;
+  opacity: 0.5;
+}
+
+.grid-active #space-helpers {
+  display: block !important;
+}