express_ui 0.1.0.rc1

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

@@ -0,0 +1,29 @@
+@mixin container-table
+  display: table
+
+@mixin container-table-cell
+  display: table-cell
+
+.ae-container
+  position: relative
+  margin-left: auto
+  margin-right: auto
+  max-width: $container
+
+  @include tablet
+    width: 100%
+
+.ae-container-left
+  margin-left: 0
+
+.ae-container-full
+  position: relative
+  width: 100%
+  padding-left: 0.5rem
+  padding-right: 0.5rem
+
+.ae-container-table
+  @include container-table
+
+  .ae-container-table-cell
+    @include container-table-cell

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

@@ -0,0 +1,56 @@
+.ae-alert
+  padding: 0.5rem
+  position: relative
+
+  p
+    padding-top: 0
+    margin-bottom: 0
+
+  & + &
+    margin-top: 0.25rem
+
+  .ae-alert-action
+    position: absolute
+    top: 0.5rem
+    right: 0.5rem
+    text-decoration: none
+
+  &-success
+    background: lighten($success, 50%)ƒ
+    border: 1px solid $success
+    color: $success
+
+    a:link, a:visited, a .fa
+      color: lighten($success, 10%)
+      font-weight: bold
+
+  &-error
+    background: lighten($cancelled, 30%)
+    border: 1px solid $cancelled
+    color: $cancelled
+
+    a:link, a:visited, a .fa
+      color: $cancelled
+      font-weight: bold
+
+  &-pending
+    background: darken($pending, 10%)
+    border: 1px solid darken($pending, 50%)
+    color: darken($pending, 50%)
+
+    a:link, a:visited, a .fa
+      color: darken($pending, 50%)
+      font-weight: bold
+
+  &-info
+    background: lighten($primary-color, 30%)
+    border: 1px solid darken($primary-color, 20%)
+    color: darken($primary-color, 10%)
+
+    a:link, a:visited, a .fa
+      color: darken($primary-color, 20%)
+      font-weight: bold
+
+  @include tablet-max
+    p
+      padding-right: 1em

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

@@ -0,0 +1,96 @@
+@mixin fa-input
+  position: absolute
+  top: 30%
+  left: 15px
+  color: $body-color
+
+  @include tablet-max
+    top: 34%
+
+.ae-form-horizontal
+  .ae-form-field
+    input
+      width: 100%
+
+  .ae-form-field.ae-has-icon
+    & > div
+      display: block
+
+.ae-form-inline
+  .ae-form-field
+    input
+      width: auto
+      min-width: 100px
+
+    label
+      min-width: 30%
+      margin: 0.5em 1em 0.5em 0
+      display: inline-block
+
+.ae-form-single
+  display: flex
+  flex-flow: row nowrap
+  align-items: stretch
+
+  .ae-form-field
+    position: relative
+
+  .ae-actions
+    width: auto
+
+  .ae-actions
+    margin: 10px 0 10px 10px
+
+    .ae-btn
+      margin: 0
+
+
+.ae-search-form
+  .ae-text-field
+    padding-left: 2em
+
+    & + .fa-search
+      position: absolute
+      top: 35%
+      left: 10px
+      color: $body-color
+
+    &:focus + .fa-search
+      color: $primary-color
+
+
+.ae-form-field.ae-has-icon
+  position: relative
+
+  .ae-text-field
+    padding-left: 2em
+
+  & > div
+    width: auto
+    display: inline-block
+    vertical-align: top
+
+  & > .fa
+    @include fa-input
+
+  &:focus > .fa
+    color: $primary-color
+
+
+  & > div
+    position: relative
+
+    .fa
+      @include fa-input
+
+    &:focus > div .fa
+      color: $primary-color
+
+
+.ae-has-icon
+  padding: 0 4px
+
+
+@include tablet-max
+  form, input
+    width: 100%!important

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

@@ -0,0 +1,159 @@
+@mixin input
+  border: 1px solid $border-dark
+  width: 100%
+  @include border-radius(3px)
+  @include box-shadow(inset, 2px, 2px, 2px, lighten($border-dark, 20%))
+  outline: none
+  @include easeInOut
+  margin: 10px 0
+  @include body-font
+
+  &:focus
+    border: 1px solid $primary-color
+    @include box-shadow(0, 0, 5px, 0, $primary-color)
+
+.ae-text-field
+  @include input
+
+.ae-form-field
+
+  input[type="range"]
+    @include box-shadow(0, 0, 0, 0)
+
+  .ae-textarea
+    @include input
+
+  select
+    @include input
+
+  .ae-radio-field, .ae-checkbox-field
+    @include box-shadow(0, 0, 0, 0)
+    border: 0
+    clip: rect(0 0 0 0)
+    height: 20px
+    margin: -1px
+    overflow: hidden
+    padding: 0
+    position: absolute
+    width: 1px
+
+    & ~ label:before
+      font-family: FontAwesome
+      display: inline-block
+      color: $body-color
+      width: 20px
+
+    &:checked ~ label:before
+      color: $primary-color
+
+    &:checked ~ label
+      color: $primary-color
+
+  .ae-radio-field
+    & ~ label:before
+      content: "\f10c"
+
+    &:checked ~ label:before
+      content: "\f192"
+
+  .ae-checkbox-field
+    & ~ label:before
+      content: "\f096"
+      font-size: 15px
+
+    &:checked ~ label:before
+      content: "\f14a"
+      top: -1px
+      position: relative
+      font-size: 14px
+
+.ae-input-sm
+  @include h6
+  padding: rem(3px)
+
+  @include desktop
+    padding: rem(2px)
+
+.ae-input-md
+  @include h5
+  padding: rem(6px)
+
+  @include desktop
+    padding: rem(5px)
+
+.ae-input-lg
+  @include h4
+  padding: rem(8px)
+
+  @include desktop
+    padding: rem(7px)
+
+label
+  line-height: 1.4
+  @include p
+  padding-right: 0.5em
+
+.ae-actions
+  margin: 20px 0
+
+.ae-hint
+  margin: 0 0 20px 0
+  padding: 0
+  color: $body-lighter
+
+.ae-switch
+  position: relative
+  width: 50px
+  -webkit-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+
+  &-checkbox
+    display: none
+  &-label
+    border: 1px solid $border-light
+    border-radius: 20px
+    cursor: pointer
+    display: block
+    overflow: hidden
+  &-inner
+    display: block
+    margin-left: -100%
+    transition: margin 0.3s ease-in 0s
+    width: 200%
+
+    &:before, &:after
+      box-sizing: border-box
+      display: block
+      float: left
+      height: 30px
+      line-height: 30px
+      padding: 0
+      width: 50%
+    &:before
+      background-color: $primary-color
+      content: ""
+      padding-left: 10px
+    &:after
+      background-color: $body-lighter
+      content: ""
+      padding-right: 10px
+
+  &-button
+    background: #FFFFFF
+    border: 1px solid $border-dark
+    border-radius: 20px
+    bottom: 0
+    display: block
+    margin: 5px
+    position: absolute
+    right: 20px
+    top: 0
+    transition: all 0.3s ease-in 0s
+    width: 20px
+
+  &-checkbox:checked + &-label &-inner
+    margin-left: 0
+
+  &-checkbox:checked + &-label &-button
+    right: 0

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

@@ -0,0 +1,56 @@
+ul, ol
+  margin: 0
+  padding: 0
+  list-style-position: inside
+
+  li
+    @include p
+    @include font-size(12px, 12px)
+
+    &:before
+      content: ""
+      float: left
+      padding-left: 0.5rem
+
+ul
+  list-style: none
+
+.ae-list-inline
+  li
+    display: block
+    width: auto
+    float: left
+
+  &:after
+    content: " "
+    display: block
+    clear: both
+
+.ae-list-block
+  li
+    display: block
+    width: auto
+
+  &:after
+    content: " "
+    display: block
+    clear: both
+
+
+.ae-list-media
+  figure
+    display: flex
+
+    figcaption
+      text-align: left
+      margin-left: 1rem
+
+.ae-list-description
+  .ae-li-title
+    font-weight: bold
+  .ae-li-inline
+    text-align: right
+    margin-right: 2em
+
+    @include tablet-max
+      text-align: left!important

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

@@ -0,0 +1,85 @@
+nav
+  a:link, a:visited
+    text-decoration: none
+    display: block
+    color: $body-color
+    padding: 0.25em 0.5em
+    @include easeInOut
+
+    &:hover
+      color: $primary-color
+
+.ae-nav-item, .ae-page-item
+  &.active
+    a:link, a:visited
+      color: $primary-color
+
+      .fa
+        color: #fff
+
+.ae-nav-left
+  float: left
+
+.ae-nav-right
+  float: right
+
+.ae-page-item
+  & > a
+    @include button
+
+.ae-breadcrumbs
+  .ae-nav-item
+    position: relative
+
+    &:not(:first-of-type)
+      margin-left: 0.5em
+
+    &:after
+      content: " »"
+      position: absolute
+      top: 0.3em
+      right: -0.3em
+      color: $icon-color
+
+.ae-mega-menu
+  .ae-mega-menu-title
+    padding:
+      top: 0
+      left: 0.5em
+      right: 0.5em
+    margin-bottom: 1em
+
+  .ae-mega-menu-close
+    text-decoration: none
+
+  .ae-nav-mega-menu-content
+    background: #fff
+    padding: 1em
+    @include box-shadow(0, 0px, 5px, 0, $border-light)
+    @include border-radius(2px)
+
+
+  [class*="ae-nav-mega-menu-list"]
+    max-height: 140px
+    overflow: scroll
+
+  .ae-nav-mega-menu-list-icons
+    .ae-nav-mega-menu-item
+      border-right: 1px solid $border-light
+      padding: 1em
+      text-align: center
+
+  .ae-nav-mega-menu-list
+    .ae-nav-mega-menu-item
+      padding: 0.5em
+      text-align: left
+
+      a:link
+        display: block
+
+      img
+        display: inline-block
+        vertical-align: middle
+        margin-right: 1em
+        margin-bottom: 0
+        width: 25px