express_ui 0.5.0 → 0.5.1

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

@@ -12,6 +12,23 @@
 .ae-btn-group-right
   text-align: right
 
+// Buttons in this group have no spaces among them
+.ae-btn-group-collapsed
+  .ae-btn:first-child
+    @include border-radius(4px 0 0 4px)
+    margin-right: 0
+
+  .ae-btn
+    @include border-radius(0)
+    margin-right: 0
+    position: relative
+
+  .ae-btn:nth-child(n+2)
+    margin-left: -1px
+
+  .ae-btn:last-child
+    @include border-radius(0 4px 4px 0)
+
 .ae-btn-group-justified
   @include tablet-max
     .ae-btn

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

@@ -27,24 +27,75 @@
 .ae-grid
   float: left
 
+  &:last-of-type
+    margin-right: 0 !important
+
 .ae-content
   @include tablet-max
     padding-left: 0.5em !important
     padding-right: 0.5em !important
+
   &-container
     width: 100%
+    @include clearfix
 
-  &-one-half
     .ae-grid
-      width: (100%/2)
+      padding:
+        bottom: 1em
+  &-center
+    .ae-grid
+      margin-left: auto !important
+      margin-right: auto !important
+      float: none
+
+  &-one-half
+    @include clearfix
+    @include tablet
+      .ae-grid
+        width: 48%
+        margin-right: 2%
+
   &-one-third
+    @include clearfix
     .ae-grid
-      width: (100%/3)
+      width: 32%
+      margin-right: 2%
+
   &-one-fourth
-    .ae-grid
-      width: (100%/4)
+    @include clearfix
+    @include tablet
+      .ae-grid
+        width: 22%
+        margin-right: 2%
+
+.ae-fixed-grid-height
+  display: table
+  border-collapse: separate
+  border-spacing: 10px 0
+
+  &:before, &:after
+    display: none
+
+  .ae-grid
+    display: table-cell
+    float: none
+    margin-right: 0
+    height: 100%
+
+[class*="ae-content-"]
+  overflow: visible
 
 .ae-content
   @include tablet-max
     padding-left: 0.5em !important
-    padding-right: 0.5em !important
+    padding-right: 0.5em !important
+
+.ae-overflow
+  overflow-y: scroll
+
+.ae-bordered
+  border-top: 1px solid $border-light
+  border-bottom: 1px solid $border-light
+
+  .ae-grid:not(:last-of-type)
+    border-right: 1px solid $border-light

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

@@ -1,5 +1,5 @@
 .ae-alert
-  padding: 0.5rem
+  padding: 1em
   position: relative
 
   p
@@ -7,30 +7,38 @@
     margin-bottom: 0
 
   & + &
-    margin-top: 0.25rem
+    margin-top: 1em
 
   .ae-alert-action
     position: absolute
-    top: 0.5
-    right: 0.5rem
+    top: 0.5em
+    right: 0.5em
     text-decoration: none
-    @include font-size(12px, 16px)
+    @include font-size(22px, 28px)
 
   &-success
-    background: lighten($success, 50%)ƒ
+    background: $success
     border: 1px solid $success
     color: $success
 
-    a:link, a:visited, a .fa
-      color: lighten($success, 10%)
-      font-weight: bold
+    p
+      color: darken($success, 50%) !important
+
+    a:link, a:visited, a .fa, .fa
+      color: darken($success, 40%)
+
+    .ae-alert-action
+      color: darken($success, 50%)
 
   &-error
     background: lighten($cancelled, 30%)
     border: 1px solid $cancelled
     color: $cancelled
 
-    a:link, a:visited, a .fa
+    p
+      color: $cancelled !important
+
+    a:link, a:visited, a .fa, .ae-alert-action, .fa
       color: $cancelled
       font-weight: bold
 
@@ -39,7 +47,10 @@
     border: 1px solid darken($pending, 50%)
     color: darken($pending, 50%)
 
-    a:link, a:visited, a .fa
+    p
+      color: darken($pending, 50%) !important
+
+    a:link, a:visited, a .fa, .ae-alert-action, .fa
       color: darken($pending, 50%)
       font-weight: bold
 
@@ -48,10 +59,29 @@
     border: 1px solid darken($primary-color, 20%)
     color: darken($primary-color, 10%)
 
-    a:link, a:visited, a .fa
+    p
+      color: darken($primary-color, 10%)  !important
+
+    a:link, a:visited, a .fa, .ae-alert-action, .fa
+
       color: darken($primary-color, 20%)
       font-weight: bold
 
   @include tablet-max
     p
       padding-right: 1em
+
+  .ae-alert-close
+    @include font-size(30px, 30px)
+    font-weight: normal !important
+
+.ae-alert-fixed
+  position: fixed
+  bottom: 0
+  width: 100%
+  left: 0
+  right: 0
+  border: 0
+  text-align: center
+  z-index: 99
+  padding: 1.5em 0

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

@@ -16,14 +16,21 @@
     margin-top: 1em
 
 .ae-form-inline
+  @include tablet
+    .ae-field
+      width: auto
+      display: inline-block
+
   .ae-form-field
-    input
+    display: flex
+
+    input, select
       width: auto
       min-width: 100px
 
-    label
-      min-width: 30%
-      margin: 0.5em 1em 0.5em 0
+    label:first-child, .ae-label:first-child
+      width: 30%
+      margin: 1em 1em 1em 0
       display: inline-block
 
   & + &
@@ -91,14 +98,17 @@
 
 .ae-form-field.ae-has-icon
   position: relative
+  overflow: visible
 
   .ae-text-field
     padding-left: 3em
 
+  .ae-text-field:not([type="hidden"]) + .ae-text-field
+    padding-left: 0.75em !important
+
     @include desktop
       padding-left: 3em
 
-
   & > div
     width: auto
     display: inline-block
@@ -110,7 +120,6 @@
   &:focus > .fa
     color: $primary-color
 
-
   & > div
     position: relative
 
@@ -127,3 +136,63 @@
 @include tablet-max
   form, input
     width: 100%
+
+
+.ae-form-floating-label
+  position: relative
+
+  .ae-text-field
+    color: $body-color
+    padding:
+      left: 1em
+      right: 1em
+
+  .ae-label, label
+    color: $body-lighter !important
+
+  .ae-input-md
+    @include font-size(18px, 18px)
+    padding:
+      top: 1.2em
+      bottom: 0.5em
+      left: 1em
+      right: 1em
+
+  &.ae-has-icon
+
+    .ae-text-field
+      padding-left: 1em
+
+    .fa-check, .fa-error
+      top: 2.6em
+      right: 0.75em
+      left: auto
+
+  .ae-input-lg
+    @include font-size(20px, 20px)
+    padding:
+      top: 1.6em
+      bottom: 0.75em
+
+  label
+    @include font-size(28px, 24px)
+    display: inline-block
+    position: absolute
+    left: 1em
+    top: 2.5em
+    transition: all 150ms ease-in
+    text-transform: none
+    margin:
+      bottom: 0 !important
+      top: 0 !important
+
+
+  label.ae-floating-label
+    transform: translateY(0.75em)
+    margin-left: 0.5em
+    top: 2.4em
+    @include font-size(15px, 15px)
+    cursor: text
+
+    @include tablet-max
+      top: 3em

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

@@ -6,6 +6,11 @@ input[type="date"]
   -moz-appearance: none
   -webkit-text-size-adjust: none
 
+input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill
+  -webkit-box-shadow: 0 0 0 100px #fff inset !important
+  background-color: #fff !important
+  -webkit-animation-name: autofill
+
 .ae-form-field
 
   .fa
@@ -57,12 +62,14 @@ input[type="date"]
     & ~ label:before
       content: "\f096"
       font-size: 15px
+      top: 1px
+      position: relative
 
     &:checked ~ label:before
       content: "\f14a"
-      top: -1px
+      top: 0px
       position: relative
-      font-size: 14px
+      font-size: 15px
 
 .ae-input-sm
   @include font-size(16px, 16px)
@@ -85,7 +92,7 @@ input[type="date"]
   @include desktop
     padding: rem(18px)
 
-label
+label, .ae-label
   line-height: 1.4
   @include p
   padding-right: 0.5em
@@ -111,16 +118,21 @@ label
   -webkit-user-select: none
   -moz-user-select: none
   -ms-user-select: none
+  margin-right: 1em
 
   &-checkbox
     display: none
+
   &-label
     border: 1px solid $border-light
     @include border-radius(20px)
     cursor: pointer
     display: block
-    padding: 0
+    padding: 0 !important
     overflow: hidden
+    position: relative
+    width: 100%
+
   &-inner
     display: block
     margin-left: -100%
@@ -162,3 +174,25 @@ label
 
   &-checkbox:checked + &-label &-button
     right: 0
+
+  & + label
+    line-height: 2
+
+.ae-input-success
+  .fa, .ae-text-field
+    color: $success !important
+
+.ae-input-error
+  .fa, .ae-text-field
+    color: $cancelled !important
+
+.ae-required
+  label:first-child, .ae-label:first-child
+    position: relative
+    &:after
+      content: " *"
+      color: $cancelled
+      right: 0
+      position: absolute
+      top: 0
+      @include font-size(26px, 26px)

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

@@ -26,22 +26,35 @@ ul
     width: auto
     float: left
 
+    &.ae-list-item
+      border-bottom: 0
+
+      a, a:link
+        display: inline
+
+      &:first-child, &:last-child
+        margin-top: 0
+        margin-bottom: 0
+
   &:after
     content: " "
     display: block
     clear: both
 
 .ae-list-flex
-  display: flex
-  flex-direction: row
-  flex-wrap: nowrap
-  justify-content: space-between
-  align-items: stretch
-  align-content: stretch
+  &:before, &:after
+    display: none
 
   li
-    flex: 1
-    padding: 0 0.8em
+    &:before, &:after
+      display: none
+
+    @include flexbox
+    flex-direction: row
+    flex-wrap: nowrap
+    justify-content: space-between
+    align-items: flex-start
+    align-content: stretch
 
 .ae-list-block
   li
@@ -57,6 +70,7 @@ dl
   margin-bottom: 1em
 
   dt, dd
+    @include p
     vertical-align: top
     padding:
       top: 0.5em
@@ -72,6 +86,7 @@ dl
 
   dt
     width: 30%
+    margin-right: 1em
 
   dd
     width: 65%
@@ -84,6 +99,27 @@ dl
       text-align: left
       margin-left: 1rem
 
+// Any list item that is styled with a padding
+.ae-list-item
+  // padding: 0 1em
+  @include font-size(18px, 18px)
+  border-bottom: 1px solid $border-light
+
+  a:link, a
+    display: block
+    padding: 1em 0.5em
+    @include animate(0.5s)
+
+  &:hover a
+    background: darken($gray-background, 10%)
+
+  &:first-child
+    margin-top: 0.5em
+
+  &:last-child
+    margin-bottom: 0.5em
+    border-bottom: 0
+
 .ae-list-description
   .ae-li-title
     font-weight: bold