express_ui 0.1.0.rc1

data/app/assets/stylesheets/express_ui/molecules/_tables.sass

@@ -0,0 +1,77 @@
+table
+  width: 100%
+  box-shadow: none
+  margin: 1em 0
+  border-collapse: collapse
+
+  .ae-table-fixed-width
+    table-layout: fixed
+
+  th
+    padding: 0.8em
+    color: $thead-color
+    background: rgba($primary-color, 0.1)
+    border-bottom: 1px solid rgba($thead-color, 0.2)
+    word-wrap: break-word
+    text-align: left
+    text-transform: uppercase
+    @include font-size(10px, 12px)
+    vertical-align: top
+
+    a:link, a:visited
+      color: $thead-color
+      text-decoration: none
+
+  tbody
+    td
+      padding: 0.8em
+      word-wrap: break-word
+      vertical-align: top
+
+      p
+        padding-top: 0
+
+    tr:nth-child(even)
+      background: $dark-gray-background
+
+  &.ae-table-unstyled
+    thead
+      th
+        color: $thead-color
+        background: transparent
+
+    tbody
+      tr:nth-child(even)
+        background: transparent
+
+  @include laptop-max
+    width: 100%!important
+
+.ae-table-responsive
+  overflow-x: scroll
+
+.ae-table-filter
+  display: flex
+  flex-flow: row
+  flex-wrap: nowrap
+  justify-content: flex-start
+  align-items: stretch
+  align-content: stretch
+  background-color: $gray-background
+
+  .ae-filter
+    // border-right: 1px solid $border-light
+    padding: 0 $container-padding*2
+
+  & + table
+    margin-top: 0
+    border-top: 1px solid $border-light
+
+  *
+
+    display: flex
+    flex-direction: row
+    flex-wrap: nowrap
+    justify-content: flex-start
+    align-items: center
+    align-content: stretch

data/app/assets/stylesheets/express_ui/molecules/_tabs.sass

@@ -0,0 +1,23 @@
+.ae-tabs
+  margin: 0
+  padding: 0
+  list-style: none
+
+  li
+    display: inline-block
+    padding: 0.5em 1em
+    cursor: pointer
+    text-align: center
+
+    &.active-tab
+      background-color: #fff
+      border: 1px solid $border-light
+      border-bottom-color: transparent
+
+.ae-tab-content
+  display: none
+  padding: 12px
+  border: 1px solid $border-light
+  &.active-tab
+    display: inherit
+    margin-top: -2px

data/app/assets/stylesheets/express_ui/organisms/_header.sass

@@ -0,0 +1,29 @@
+header
+  background: $gray-background
+  max-height: $header-max-height
+  @include box-shadow(0, 0, 3px, 0, rgba($border-dark, 0.5))
+  @include clearfix
+
+  @include tablet
+    padding: 0.5em 0
+
+  img
+    margin: 0
+
+  .ae-logo
+    float: left
+    padding: 0.25em 0.5em
+
+  &.ae-header-fixed
+    position: fixed
+    top: 0
+    left: 0
+    right: 0
+    z-index: 2
+
+    & + .ae-container
+      margin-top: ($header-max-height/2.75)
+
+
+  & + [class*="ae-template-"]
+    margin-top: ($header-max-height/2.75)

data/app/assets/stylesheets/express_ui/organisms/_sidebar.sass

@@ -0,0 +1,113 @@
+@mixin sidebar($width)
+  .ae-sidebar-left
+    width: $width
+
+    @include laptop
+      width: 250px
+
+@mixin sidebar-fixed($width)
+  .ae-sidebar-left
+    width: $width
+    position: fixed
+
+    @include laptop
+      max-width: 250px
+
+  .ae-content
+    left: $width
+
+.ae-sidebar-left
+  background-color: $primary-color
+
+.ae-sidebar-right
+  background-color: $dark-gray-background
+  padding-left: $container-padding
+  padding-right: $container-padding
+
+.ae-sidebar
+  word-wrap: inherit
+  overflow-y: scroll
+  padding:
+    top: $container-padding
+    bottom: $container-padding
+
+  nav .active
+    a:link
+      background: $primary-active-color
+
+  .ae-sidebar-overlay
+    content: " "
+    z-index: 1
+    left: 0
+    top: 0
+    width: 100%
+    height: 100%
+    position: absolute
+
+  .ae-sidebar-title
+    background-color: $primary-color
+    padding: 0.25em
+
+    *
+      color: #FFF
+      border-bottom: 0
+
+
+  a:link, a:visited
+    color: #FFF
+    text-decoration: none
+    color: #FFF
+
+    &:hover
+      color: lighten($primary-color, 20%)
+
+  ul
+    li
+      a:link
+        display: block
+        border-bottom: 1px solid rgba(#fff, 0.1)
+        padding:
+          left: 1.75em
+      ul
+        margin:
+          top: 0
+          bottom: 1em
+          left: 1em
+
+        li
+          a:link
+            padding:
+              left: 1.75em
+
+        ul
+          margin:
+            left: 0
+
+
+      &.active
+        ul
+          a:link
+            background: transparent
+
+          li.active
+            background: $primary-active-color
+
+.ae-sidebar-has-icons
+
+  li
+    a:link
+      padding:
+        left: 0.5em
+
+    .fa
+      width: 0.5em
+      margin:
+        left: -0.75em
+        // right: 0.5em
+
+    ul
+      margin:
+        // left: 1.5em !important
+
+      li a:link
+        // text-indent: 0

data/app/assets/stylesheets/express_ui/style.sass

@@ -0,0 +1,31 @@
+// Global – Do not change order
+@import "atoms/mixins"
+@import "atoms/animations"
+@import "atoms/variables"
+@import "atoms/media_queries"
+@import "atoms/typography"
+// End Global
+
+// Atoms, Molecules, Organisms
+@import "font-awesome-sprockets"
+@import "font-awesome"
+@import "atoms/headings"
+@import "atoms/buttons"
+@import "atoms/reset"
+@import "atoms/images"
+@import "atoms/icons"
+@import "molecules/tabs"
+@import "molecules/button_group"
+@import "molecules/container"
+@import "molecules/forms"
+@import "molecules/form_groups"
+@import "molecules/flash_messages"
+@import "molecules/nav"
+@import "molecules/tables"
+@import "molecules/lists"
+@import "organisms/header"
+@import "organisms/sidebar"
+@import "templates/full_width"
+@import "templates/half_width"
+@import "templates/content_sidebar"
+@import "templates/master_detail"

data/app/assets/stylesheets/express_ui/styleguide.sass

@@ -0,0 +1,200 @@
+@import "style"
+@import "resizable"
+
+header
+  @include font-size(12px, 12px)
+
+.content
+
+  h2, h3, h4
+    @include heading($border-light, uppercase)
+
+
+.ae-anchor
+  @include font-size(10px, 10px)
+  margin: 0 0 0 0.5em
+
+  &:hover
+    @include scale
+
+pre
+  font-size: 0.75rem
+
+.pre-line
+  white-space: pre-line
+
+
+// SIDEBAR
+.sidebar
+  .fa
+    margin-right: 0.25em
+    color: #fff
+
+// BACK TO TOP
+.back-to-top
+  position: fixed
+  bottom: 10px
+  right: 15px
+
+.demo-container
+  .ae-anchor
+    display: none
+  .ae-sidebar
+    position: relative
+    width: 100%
+  .ae-form-single
+    .ae-form-field
+      width: 170px
+
+  h1, h2, h3, h4, h5, h6
+    border-bottom: 0
+
+
+// CLICK TO COPY
+.click-to-copy
+  position: absolute
+  bottom: 0.25em
+  right: 0
+  outline: 0
+  width: 36px
+  height: 36px
+
+  .fa-clipboard
+    font-size: 13px
+
+.click-to-copy__success-text--container
+  position: relative
+
+.click-to-copy__success-text
+  @include status
+  position: absolute
+  top: 0
+  right: 0
+
+  display: block
+
+[data-tooltip]
+  z-index: 2
+  cursor: pointer
+
+
+// Hide the tooltip content by default
+[data-tooltip]:before,
+[data-tooltip]:after
+  visibility: hidden
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
+  filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"
+  opacity: 0
+  pointer-events: none
+
+
+// Position tooltip left of the element
+[data-tooltip]:before
+  @include status
+  position: absolute
+  bottom: -1px
+  right: 47px
+  left: auto
+  margin-bottom: 5px
+  margin-left: -80px
+  padding: 7px
+  width: 100px
+  font-size: 11px
+  background-color: #000
+  background-color: hsla(0, 0%, 20%, 0.9)
+  color: #fff
+  content: attr(data-tooltip)
+  text-align: center
+  line-height: 1.2
+
+// Triangle hack to make tooltip look like a speech bubble
+[data-tooltip]:after
+  position: absolute
+  bottom: 12px
+  right: 37px
+  left: auto
+  width: 0
+  border-left: 5px solid hsla(0, 0%, 20%, 0.9)
+  border-bottom: 5px solid transparent
+  border-right: 5px solid transparent
+  border-top: 5px solid transparent
+  content: " "
+  font-size: 0
+  line-height: 0
+
+
+// Show tooltip content on hover
+[data-tooltip]:hover:before,
+[data-tooltip]:hover:after
+  visibility: visible
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
+  filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"
+  opacity: 1
+
+
+// prettyprint
+/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
+
+.prettyprint
+  font-family: Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace
+  width: auto
+  padding: 1em
+  @include box-shadow(inset 0, 0, 5px, 0, rgba($border-dark, 0.5))
+  position: relative
+
+.pln
+  color: #161b1d
+
+/* Specify class=linenums on a pre to get line numbering */
+
+ol.linenums
+  margin-top: 0
+  margin-bottom: 0
+  color: #7195a8
+
+li
+  &.L0, &.L1, &.L2, &.L3, &.L4, &.L5, &.L6, &.L7, &.L8, &.L9
+    padding-left: 1em
+    background-color: #ebf8ff
+    list-style-type: decimal
+
+@media screen
+  /* string content */
+  .str
+    color: #568c3b
+  /* keyword */
+  .kwd
+    color: #6b6bb8
+  /* comment */
+  .com
+    color: #7195a8
+  /* type name */
+  .typ
+    color: #257fad
+  /* literal value */
+  .lit
+    color: #935c25
+  /* punctuation */
+  .pun, .opn, .clo
+    color: #161b1d
+  /* lisp open bracket */
+  /* lisp close bracket */
+  /* markup tag name */
+  .tag
+    color: #d22d72
+  /* markup attribute name */
+  .atn
+    color: #935c25
+  /* markup attribute value */
+  .atv
+    color: #2d8f6f
+  /* declaration */
+  .dec
+    color: #935c25
+  /* variable name */
+  .var
+    color: #d22d72
+  /* function name */
+  .fun
+    color: #257fad
+