express_ui 0.5.0 → 0.5.1

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

@@ -1,7 +1,7 @@
 nav
   @include font-size(18px, 14px)
 
-  a:link, a:visited
+  a:link, a:visited, a:link:not(.ae-btn)
     text-decoration: none
     display: block
     color: $body-color
@@ -30,6 +30,7 @@ nav
     @include button
 
 .ae-nav-main
+  @include hide-scrollbar
   overflow: scroll
   white-space: nowrap
   float: none
@@ -84,13 +85,17 @@ nav
   .ae-nav-mega-menu-content
     background: #fff
     padding: 1em
+    position: relative
+    z-index: 2
     @include box-shadow(0, 0px, 5px, 0, $border-light)
     @include border-radius(2px)
-
+    @include animate(1s)
+    opacity: 1
 
   [class*="ae-nav-mega-menu-list"]
     min-height: 140px
     overflow: scroll
+    @include hide-scrollbar
 
   .ae-nav-mega-menu-list-icons
     .ae-nav-mega-menu-item

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

@@ -0,0 +1,33 @@
+// Browsers that support HTML5 progress element will ignore the html inside `progress` element. Whereas older browsers will ignore the `progress` element and instead render the html inside it.
+progress:not(value)
+  background-color: rgba($border-dark, 0.5)
+
+progress[value]
+  /* Get rid of the default appearance */
+  appearance: none
+
+  /* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
+  border: none
+
+  /* Add dimensions */
+  width: 100%
+  height: 5px
+
+  /* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
+  @include border-radius(4px)
+
+  /* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
+  color: $primary-color
+  position: relative
+  margin: 0.5em 0 0 0
+
+progress[value]::-webkit-progress-bar
+  background-color: rgba($border-dark, 0.5)
+  @include border-radius(4px)
+
+progress[value]::-webkit-progress-value
+  @include border-radius(4px)
+
+progress[value]::-moz-progress-bar
+  background-color: $success
+  @include border-radius(4px)

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

@@ -25,7 +25,7 @@
     .ae-progress-heading
       max-width: 100px
       color: darken($gray-background, 15%)
-
+      @include font-size(32px, 20px)
 
   .ae-progress-points
     display: flex
@@ -82,6 +82,10 @@
           height: 3rem
           @include font-size(32px, 24px)
 
+          @include small-desktop
+            font-size: 2rem
+            line-height: 1.4 !important
+
         &.ae-progress-point-done
           .ae-progress-heading
             color: $body-color

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

@@ -33,6 +33,9 @@ table
     tr:nth-child(even)
       background: $dark-gray-background
 
+  .ae-table-valign
+    td, th
+      vertical-align: middle
   &.ae-table-unstyled
     thead
       th
@@ -54,6 +57,8 @@ table
 
 .ae-table-responsive
   overflow-x: scroll
+  overflow: visible
+  @include hide-scrollbar
 
 .ae-table-actions
   vertical-align: middle

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

@@ -0,0 +1,28 @@
+.ae-detail-actions
+  position: absolute
+  left: 0
+  top: 0
+  z-index: 2
+  left: -1.3em
+  top: 4em
+  @include border-radius(20px)
+  @include flexbox
+  flex-direction: column
+  flex-wrap: nowrap
+  justify-content: flex-start
+  align-items: center
+  align-content: stretch
+
+  .ae-btn
+    margin: 1em 0 0 0
+
+    &:first-of-type
+      margin: 0
+
+  .ae-btn-border
+    border-color: rgba($border-dark, 0.4)  !important
+
+.my-bag-sidebar
+  .ae-detail-actions
+    top: 0.75em
+    left: -1.25em

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

@@ -0,0 +1,14 @@
+.ae-dropdown
+  position: absolute
+  background: $gray-background
+  z-index: 2
+  @include box-shadow(0 5px, 10px, 0px, rgba($border-dark, 0.5))
+
+.ae-close-dropdown
+  position: absolute
+  top: 0
+  right: 0.5em
+  @include font-size(38px, 34px)
+  padding: 0
+  top: 0.1em
+  cursor: pointer

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

@@ -6,7 +6,7 @@ header
   @include clearfix
 
   @include tablet
-    padding: 0.5em 0
+    padding: 0.5em 1em
 
   @include tablet-max
     text-align: center

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

@@ -0,0 +1,41 @@
+.ae-panel
+  background: #fff
+  margin: 2em auto
+  position: relative
+  @include border-radius(2px)
+  @include animate(1s)
+  border: 1px solid $border-light
+
+  &-header
+    background: $gray-background
+    padding:
+      right: 2em
+      left: 2em
+      bottom: 0.5em
+    position: relative
+    border-bottom: 1px solid $border-light
+    @include border-radius(2px 2px 0 0)
+
+  &-title
+    padding:
+      right: 1em
+      top: 0.5em
+    margin:
+      bottom: 0
+
+  &-content
+    padding: 2em
+    max-height: 500px
+    overflow: scroll
+
+  &-no-scroll
+    max-height: 100%
+    overflow: visible
+
+  &-footer
+    padding: 0 1em
+    overflow: hidden
+
+  @include tablet-max
+    width: 100%
+    display: block

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

@@ -0,0 +1,9 @@
+.ae-popover
+  position: fixed
+  z-index: 3
+  right: 1em
+  background: #fff
+  overflow: scroll
+  border: 5px solid $gray-background
+  @include box-shadow(0 3px, 6px, 0px, rgba($border-dark, 0.1) !important)
+  @include border-radius(3px)

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

@@ -17,6 +17,7 @@
   background-color: $dark-gray-background
   padding-left: $container-padding
   padding-right: $container-padding
+  z-index: 1
 
   .ui-resizable-handle
     cursor: col-resize
@@ -35,6 +36,7 @@
       @include border-radius(2px)
 
 .ae-sidebar
+  @include hide-scrollbar
   word-wrap: inherit
   overflow-y: scroll
   letter-spacing: 0
@@ -42,6 +44,9 @@
     top: $container-padding
     bottom: $container-padding
 
+  a:link, a
+    color: $link-color
+
   nav .active
     a:link
       background: $primary-active-color
@@ -67,41 +72,40 @@
   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
-
+  nav
+    ul
+      li
+        a:link
+          display: block
+          padding:
+            left: 1.75em
         ul
           margin:
-            left: 0
+            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
+        &.active
+          ul
+            a:link
+              background: transparent
+
+            li.active
+              background: $primary-active-color
 
 .ae-sidebar-has-icons
   li
@@ -132,4 +136,8 @@
     .fa
       width: 0.5em
       margin:
-        left: -0.75em
+        left: -0.75em
+
+.ae-sidebar-no-margin
+  margin-left: -2.5em
+  margin-right: -2.5em

data/app/assets/stylesheets/express_ui/scripts/_accordion.sass

@@ -1,3 +1,7 @@
+.ae-accordion-heading
+  @include font-size(22px, 22px)
+  text-transform: uppercase
+
 .ae-accordion-trigger
   background: $primary-color
   display: block
@@ -8,11 +12,11 @@
   &:not(.collapsed)
     @include border-radius(3px 3px 0 0 !important)
 
-  &:not(.collapsed):after
+  &:not(.collapsed):after, [aria-expanded="false"]:after
     content: "\f106"
     @include icon-font
 
-  &.collapsed:after
+  &.collapsed:after, [aria-expanded="true"]:after
     content: "\f107"
     @include icon-font
 
@@ -25,7 +29,7 @@
     font-size: 2em
 
 .ae-accordion-content
-  padding: 0 1em 1em 1em
+  padding: 0 1em
   border: 1px solid $border-light
   border-top: 0
   overflow: hidden
@@ -36,15 +40,15 @@
   -moz-box-sizing: border-box
   -webkit-box-sizing: border-box
   @include easeInOut
+
   &.expanded
     height: auto
+    @include tablet
+      margin-bottom: 1em
+
+
   &.collapsed
     height: 0
-  &.collapsed
-    display: none
-
-  @include tablet
-    margin-bottom: 1em
 
   @include tablet-max
     margin-bottom: 0.5em

data/app/assets/stylesheets/express_ui/scripts/_popup.sass

@@ -1,3 +1,12 @@
+// Vertically centers the popups
+.mfp-container
+  display: table
+
+  .mfp-content
+    display: table-cell
+    vertical-align: middle
+    position: relative
+
 // TODO: Adds fake transparent blocker behind popup. Should be removed once JS is active
 .ae-popup
   width: 60%
@@ -5,6 +14,8 @@
   margin: 2em auto
   padding: 1em
   position: relative
+  @include border-radius(6px)
+  @include animate(1s)
 
   .ae-popup-header
     padding:
@@ -13,6 +24,7 @@
       bottom: 1em
     position: relative
     border-bottom: 1px solid $border-light
+    @include border-radius(6px 6px 0 0)
 
   .ae-popup-title
     padding-right: 1em
@@ -25,18 +37,42 @@
 
   .ae-popup-content
     padding: 1em
-    max-height: 300px
+    max-height: 500px
     overflow: scroll
 
   .ae-popup-footer
     padding: 0 1em
     overflow: hidden
 
+    .mfp-close
+      position: relative
+      width: auto
+      height: auto
+      line-height: 100%
+      font-size: inherit
+      @include body-font
+
   @include tablet-max
     width: 90% !important
 
-  @include tablet
-    height: 100%
+.mfp-fade
+  transition: all 0.55s ease-out
+
+.mfp-fade.mfp-bg.mfp-ready
+  opacity: 0.8
+
+.mfp-fade.mfp-bg.mfp-removing
+  opacity: 0
+
+.mfp-fade.mfp-wrap .mfp-content
+  opacity: 0
+  transition: all 0.55s ease-out
+
+.mfp-fade.mfp-wrap.mfp-ready .mfp-content
+  opacity: 1
+
+.mfp-fade.mfp-wrap.mfp-removing .mfp-content
+  opacity: 0
 
 .ae-popup-sm
   width: 40%