Merge pull request #14 from techvalidate/feat/stylesheets

Adds sass directory for importing core styles

sass/core/admin/_header.sass

@@ -0,0 +1,32 @@
+// -----------------------------------------------
+// header: fixed position header at top contains
+// the name of the current area you're in.
+// based on the old CX left-nav code.
+// -----------------------------------------------
+
+#header
+  position: fixed
+  min-width: 800px
+  z-index: 100
+  left: 160px
+  top: 0
+  right: 0
+  background: white
+  min-height: 56px
+  box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.05)
+  padding: 12px 32px
+  +clearfix
+
+  h1
+    margin: 0
+    float: left
+    font-size: 20px
+    line-height: 32px
+    color: #444
+    font-weight: 300
+    i
+      font-size: 20px
+
+  #cur-user
+    float: right
+    line-height: 32px

sass/core/admin/_nav.sass

@@ -0,0 +1,61 @@
+#admin-nav
+  position: fixed
+  z-index: 200
+  left: 0
+  top: 0
+  bottom: 0
+  width: 160px
+  overflow-x: hidden
+  overflow-y: auto
+  box-shadow: 0 0 5px rgba(0,0,0,0.4)
+  background: $charcoal
+  padding-bottom: 24px
+  transition: all 0.2s ease-in-out
+  color: white
+  font-size: $small-font-size
+  white-space: nowrap
+
+  a
+    overflow: visible
+    display: block
+    min-height: 32px
+    padding: 6px 16px
+    font-size: 12px
+    line-height: 32px
+    color: rgba(255,255,255,0.75)
+
+    &:hover
+      text-decoration: none
+      color: white
+      background-color: rgba(255,255,255,0.1)
+
+    &.selected
+      color: white
+      background-color: rgba(255,255,255,0.1)
+
+    span
+      display: inline-block
+      overflow: visible
+
+  #nav-logo-container
+    position: relative
+    height: 56px
+
+  #nav-logo
+    position: absolute
+    top: 5px
+    z-index: 10
+    width: 155px
+    background: transparent image-url('logos/cx-admin.svg') no-repeat center
+
+    &:hover
+      background-color: rgba(255,255,255,0.1)
+
+  .divider
+    min-height: 32px
+    padding: 6px 16px 6px 16px
+    color: rgba(255,255,255,0.3)
+    letter-spacing: 0.5px
+    border-top: solid 1px rgba(255,255,255,0.1)
+    font-size: 10px
+    text-transform: uppercase

sass/core/admin/index.sass

@@ -0,0 +1,10 @@
+// base admin styles on app styles
+@import "../app/index"
+@import "_nav"
+@import "_header"
+
+#main
+  margin-left: 160px
+
+#page
+  margin-top: 80px

sass/core/app/_demo_banner.sass

@@ -0,0 +1,35 @@
+// -----------------------------------------------
+// demo banner that pushes everything else down if it's there.
+// -----------------------------------------------
+
+#demo-banner
+  position: fixed
+  z-index: 500
+  bottom: 0
+  left: 0
+  width: 100vw
+  height: 64px
+  padding: 20px 0
+  // border-top: solid 2px $yellow
+  // -webkit-border-image: linear-gradient(to right, $green 0%, $blue 50%, $purple 100%)
+  // background: white
+  border-image-slice: 1
+  background: linear-gradient(to left, $green, darken($green, 5%))
+  color: white
+  // box-shadow: 0 0 4px rgba(0,0,0,0.4)
+  p, a
+    color: white
+  // a
+  //   text-decoration: underline
+
+  // .buttons
+  //   margin-top: 8px
+
+  +mobile
+    height: 48px
+    padding: 12px 0
+
+#demo-banner-shim
+  height: 64px
+  +mobile
+    height: 48px

sass/core/app/_file_uploads.sass

@@ -0,0 +1,167 @@
+// ------------------------------------------
+// dropzone-based file upload forms
+// ------------------------------------------
+
+@import "../../vendor/dropzone"
+
+.dropzone
+  margin-top: 32px
+  padding: 0
+  min-height: 0
+  +dashed-border
+  text-align: center
+  transition: all, 0.2s
+
+  .dz-message
+    padding: 32px
+    margin: 0
+
+  .material-icons
+    font-size: 32px
+    color: $light-gray
+
+  &:hover
+    background: lighten($link-color, 43%)
+    border-color: $link-color
+    cursor: pointer
+
+  &.dz-started
+    .dz-message
+      display: none !important
+
+  &.dz-drag-hover
+    background: lighten($link-color, 43%)
+    +dashed-border
+    border-color: $link-color
+
+    .dz-message
+      opacity: 0.5
+
+// drag-and-drop file upload boxes
+.upload-form-container
+  position: relative
+  width: 544px
+  text-align: center
+  margin: 64px auto
+
+.dropzone.dropzone-upload-form, .dropzone.dropzone-image-form, .dropzone.dropzone-csv-form
+  position: relative
+  height: 128px
+
+  .dz-progress
+    width: 188px
+    height: 8px
+    left: calc(50% - 94px)
+    bottom: 12px
+    top: auto
+    position: absolute
+    margin: 0 auto
+
+    // Fix for chrome bug: https://code.google.com/p/chromium/issues/detail?id=157218
+    -webkit-transform: scale(1)
+
+    .dz-upload
+      background: $blue
+      background: linear-gradient(to bottom, $blue, darken($blue, 10%))
+
+.dropzone.dropzone-image-form, .dropzone.dropzone-csv-form
+
+  .dz-preview
+    min-height: 1px
+    margin: 0
+    position: relative
+    height: 100%
+    width: 100%
+
+    &:hover
+      .dz-image
+        img
+          transform: none
+          filter: none
+
+  .dz-image
+    max-height: 50%
+    max-width: 50%
+    min-height: 1px
+    top: 10px
+    display: block
+    margin: 0 auto
+    border-radius: 0
+
+    img
+      max-height: 100%
+      max-width: 100%
+      margin: 0 auto
+
+  .dz-details
+    bottom: 24px
+    top: auto
+    opacity: 1
+    padding: 0
+
+    .dz-filename
+      font-weight: bold
+      max-width: 188px
+      margin: 0 auto
+
+      &:before
+        content: 'Uploading'
+        font-weight: normal
+        color: #ccc
+
+      &.processing:before
+        content: 'Processing'
+
+      &:hover
+        overflow: hidden
+        text-overflow: ellipsis
+
+        span
+          border: 1px solid transparent
+          background: none
+
+    .dz-size
+      display: none
+
+  .dz-success, .dz-error
+    display: none
+
+.dropzone.dropzone-csv-form
+  .dz-message
+    display: block
+
+  &.dz-started
+    .dz-message
+      .material-icons
+        color: $blue
+
+      .t
+        display: none
+
+  .dz-image
+    display: none
+
+  .dz-preview
+    top: 50%
+    height: auto
+    vertical-align: bottom
+    min-height: 0
+
+    .dz-filename
+      max-width: none
+
+
+.dropzone.dropzone-upload-form
+  padding: 32px
+  border: dashed 2px $green
+  border-radius: 8px
+  +transition(background-color, 0.2s)
+  &:hover
+    background: lighten($green, 46%)
+    cursor: pointer
+
+.dz-browser-not-supported
+  .dz-message
+    display: none
+  &:hover
+    background: #fff !important