express_ui 0.5.0 → 0.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: a560320aa93759dfc68ade128da3dd6de81dc343
-  data.tar.gz: 18d262f3704412aad30f3611d7d54b84fc0b2bf0
+  metadata.gz: 8913b21afad54bd5cc9015c73b6f5bfa13f5a9ab
+  data.tar.gz: 89e55b1ee3d853a3b7f29e4db468b3ed8bbe889c
 SHA512:
-  metadata.gz: a04c4cebac311a0dd1aeb2fd3ce202101e2cd9772a9c6a9a394e92ff6a0f7aa1b5ddf7d1b42b473452289813971a8f2e2f991986d1f256087577aa515eb239d8
-  data.tar.gz: d0b7cf41f2a1c825ed9272809b3ee916f02535847a438f5411ec5449db63bfcfbcdb89ecfb736272b15212127a2f0e5765476ef243c68ea9daed108b546ca759
+  metadata.gz: 8d664564a78cf43a13d73e1cf337cff8eeebab7f767bc7d53f69e197954ee175726b23a57ce1c6c843e8f13b4c3eaf1e758a552214966b33d6af9310d56941d5
+  data.tar.gz: 5f40242582960d8b20063a421f8a7240f9129a1ed97d07b842836503e929911a606a2b4bf07e28017214fbb4673bc4bdb713c354675751bfb98b3549ce7d5f49

data/app/assets/javascripts/express_ui/application.js

@@ -1,6 +1,4 @@
 //= require jquery
-//= require jquery_ujs
-//= require_tree .
 //= require magnific-popup
 //= require select2
 //= require moment
@@ -15,39 +13,39 @@
 //= require ion.rangeSlider
 //= require quickaccord
 
-$(document).ready(function() {
-  $('.ae-popup-link').magnificPopup();
-  $('.ae-calendar').fullCalendar();
-  $('.ae-select').select2();
-  $('.ae-accordion-trigger').QuickAccord();
-  $('.ae-open-mega-menu').click(function() {
-    $(this).siblings( '.ae-nav-mega-menu-content' ).toggleClass('ae-hidden');
-    return false;
-  });
-  $('.ae-open-filter').click(function() {
-    $(this).parent().siblings( '.ae-table-filter' ).toggleClass('ae-hidden');
-  	return false;
-  });
-  $('.ae-mega-menu-close').click(function() {
-    $(this).parents( '.ae-table-filter' ).toggleClass('ae-hidden');
-  	return false;
-  });
-  $("#ae-double-slider").ionRangeSlider({
-    hide_min_max: true,
-    keyboard: true,
-    min: 0,
-    max: 5000,
-    from: 1000,
-    to: 4000,
-    type: 'double',
-    step: 1,
-    grid: true
-  });
-  $("#ae-single-slider").ionRangeSlider();
-  $('.ae-datepicker').pickadate({
-    weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
-    showMonthsShort: true,
-    selectYears: true,
-    selectMonths: true
-  });
-});
+// $(document).ready(function() {
+//   $('.ae-popup-link').magnificPopup();
+//   $('.ae-calendar').fullCalendar();
+//   $('.ae-select').select2();
+//   $('.ae-accordion-trigger').QuickAccord();
+//   $('.ae-open-mega-menu').click(function() {
+//     $(this).siblings( '.ae-nav-mega-menu-content' ).toggleClass('ae-hidden');
+//     return false;
+//   });
+//   $('.ae-open-filter').click(function() {
+//     $(this).parent().siblings( '.ae-table-filter' ).toggleClass('ae-hidden');
+//   	return false;
+//   });
+//   $('.ae-mega-menu-close').click(function() {
+//     $(this).parents( '.ae-table-filter' ).toggleClass('ae-hidden');
+//   	return false;
+//   });
+//   $("#ae-double-slider").ionRangeSlider({
+//     hide_min_max: true,
+//     keyboard: true,
+//     min: 0,
+//     max: 5000,
+//     from: 1000,
+//     to: 4000,
+//     type: 'double',
+//     step: 1,
+//     grid: true
+//   });
+//   $("#ae-single-slider").ionRangeSlider();
+//   $('.ae-datepicker').pickadate({
+//     weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+//     showMonthsShort: true,
+//     selectYears: true,
+//     selectMonths: true
+//   });
+// });

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

@@ -13,6 +13,7 @@
 @import "atoms/reset"
 @import "atoms/images"
 @import "atoms/icons"
+@import "atoms/utilities"
 @import "molecules/tabs"
 @import "molecules/button_group"
 @import "molecules/container"
@@ -20,12 +21,17 @@
 @import "molecules/form_groups"
 @import "molecules/flash_messages"
 @import "molecules/nav"
+@import "molecules/progress_bar"
 @import "molecules/progress_indicator"
 @import "molecules/tables"
 @import "molecules/lists"
+@import "organisms/popovers"
+@import "organisms/detail"
+@import "organisms/dropdown"
 @import "organisms/header"
 @import "organisms/footer"
 @import "organisms/sidebar"
+@import "organisms/panels"
 @import "templates/full_width"
 @import "templates/half_width"
 @import "templates/content_sidebar"

data/app/assets/stylesheets/express_ui/atoms/_animations.sass

@@ -13,6 +13,10 @@
 .ae-hidden
   display: none
 
+.ae-invisible
+  visibility: hidden
+  height: 0
+
 @keyframes fadeIn
   0%
     opacity: 0

data/app/assets/stylesheets/express_ui/atoms/_buttons.sass

@@ -19,6 +19,11 @@
     @include box-shadow(inset, 2px, 2px, 2px, darken($secondary-color, 5%))
     outline-color: $primary-color
 
+.ae-btn-auto
+  padding:
+    left: 0.5em !important
+    right: 0.5em !important
+
 .ae-btn-block
   display: block
 
@@ -35,14 +40,14 @@
   color: #fff !important
 
   *
-    color: #fff !important
+    color: #fff
 
 .ae-btn-secondary
   @include btn-type($secondary-color)
   color: #fff !important
 
   *
-    color: #fff !important
+    color: #fff
 
 .ae-btn-success
   background-color: $success
@@ -79,24 +84,24 @@
 
 .ae-btn-sm
   padding:
-    top: rem(8px)
-    bottom: rem(8px)
+    top: rem(8px) !important
+    bottom: rem(8px) !important
   @include font-size(16px, 16px)
   max-height: 30px
   line-height: 100%
 
 .ae-btn-md
   padding:
-    top: rem(16px)
-    bottom: rem(16px)
+    top: rem(16px) !important
+    bottom: rem(16px) !important
   @include font-size(18px, 18px)
   max-height: 40px
   line-height: 100%
 
 .ae-btn-lg
   padding:
-    top: rem(22px)
-    bottom: rem(22px)
+    top: rem(22px) !important
+    bottom: rem(22px) !important
   @include font-size(20px, 20px)
   max-height: 50px
   line-height: 100%
@@ -111,9 +116,58 @@
 
 .ae-btn-disabled, button:disabled
   background-color: lighten($secondary-color, 30%)
-  color: #ccc
+  color: #ccc !important
   cursor: not-allowed
   border-color: lighten($secondary-color, 30%)
 
   &:hover
     box-shadow: none
+
+[class*="ae-btn-icon"]
+  position: relative
+  text-align: left
+
+  span:first-of-type
+    position: absolute
+    top: 0
+
+  &.ae-btn-md
+    span:first-of-type
+      padding: 0.7em 0.6em
+
+  &.ae-btn-lg
+    span:first-of-type
+      padding: 0.55em 1em
+
+.ae-btn-icon-right
+  text-align: left
+
+  &.ae-btn-md
+    padding-right: 4em
+
+  &.ae-btn-lg
+    padding-left: 1em
+    padding-right: 4em
+
+  span:first-of-type
+    right: 0
+    margin-left: 1em
+    border-left: 1px solid rgba(255, 255, 255, 0.2)
+
+  &.ae-btn-border
+    span:first-of-type
+      border-left: 1px solid $body-color
+
+.ae-btn-icon-left
+  text-align: left
+
+  &.ae-btn-md
+    padding-left: 4em
+
+  &.ae-btn-lg
+    padding-left: 5em
+
+  span:first-of-type
+    left: 0
+    margin-right: 1em
+    border-right: 1px solid rgba(255, 255, 255, 0.2)

data/app/assets/stylesheets/express_ui/atoms/_icons.sass

@@ -1,3 +1,22 @@
+// Some icons can be merged with another icon, i.e., "Add To My Bag" wherein a plus icon will need to be beside a bag icon.
+.ae-secondary-icon, .fa + .fa
+  margin-left: -0.25em
+  position: relative
+  top: 0.25em
+  color: $icon-color !important
+
+a:link, a
+  .fa
+    color: $primary-color
+
 .fa
   @include font-size(20px, 20px)
-  color: $icon-color
+  color: $icon-color
+
+.ae-btn-primary .fa.ae-text
+  &-success
+    color: lighten($success, 15%) !important
+  &-cancelled
+    color: $cancelled !important
+  &-lighter
+    color: $body-lighter !important

data/app/assets/stylesheets/express_ui/atoms/_reset.sass

@@ -3,10 +3,13 @@
   margin: 0
   padding: 0
 
+html
+  height: auto
+
 html, body
   line-height: 1.4
-  height: 100%
   min-height: 100%
 
 body
-  width: 100%
+  width: 100%
+  height: 100%

data/app/assets/stylesheets/express_ui/atoms/_typography.sass

@@ -13,10 +13,10 @@
   text-align: justify
 
 .ae-u-float-right
-  float: right
+  float: right !important
 
 .ae-u-float-left
-  float: left
+  float: left !important
 
 .ae-code-block
   white-space: pre-wrap
@@ -50,9 +50,6 @@ button
   @include p
   @include body-font
 
-em
-  @include p
-
 a:link
   color: $link-color
 
@@ -64,6 +61,7 @@ a:hover
 
 .ae-status
   @include status
+  text-align: center
 
   &-success
     @include status-success
@@ -79,9 +77,16 @@ a:hover
 
 .ae-text
   &-success
-    color: $success !important
+    color: darken($success, 40%)  !important
+    .fa
+      color: darken($success, 40%)  !important
+
   &-cancelled
     color: $cancelled !important
+    .fa
+      color: $cancelled !important
+  &-lighter
+    color: $body-lighter !important
 
 .ae-badge
   @include badge

data/app/assets/stylesheets/express_ui/atoms/_utilities.sass

@@ -0,0 +1,5 @@
+.ae-u-margin-tb-20
+  margin: 20px 0
+
+.ae-u-margin-tb-30
+  margin: 30px 0

data/app/assets/stylesheets/express_ui/mixins/_express_ui.sass

@@ -5,11 +5,11 @@
 //	II.	Mixins
 
 //	I. Variables
-$primary-color: #6699CC
-$primary-active-color: #477db0
-$secondary-color: #999999
+$primary-color: #000
+$primary-active-color: #D0011B
+$secondary-color: #858585
 $sidebar-caret-icon: #ffffff
-$success: #3c763d
+$success: #8AFF71
 $cancelled: #a94442
 $pending: #faf2cc
 $deleted: lighten($secondary-color, 30%)
@@ -18,7 +18,7 @@ $border-light: #eaeaea
 $body-color: #666
 $body-background: #fff
 $heading-color: #333
-$link-color: $primary-color
+$link-color: #D0011B
 $body-lighter: #999
 $icon-color: #333
 $smartphone: 480px
@@ -27,7 +27,7 @@ $laptop: 1024px
 $desktop: 1440px
 $gray-background: #F7F7F7
 $thead-color: #888
-$dark-gray-background: rgba(#ccc, 0.1)
+$dark-gray-background: #CCC
 $container: 960px
 $line-height: 14px
 $font-size-root: 62.5%
@@ -67,7 +67,7 @@ $container-padding: 0.25em
   &:before, &:after
     content: ""
     display: table
-
+    clear: both
 
 @mixin easeInOut
   -moz-transition: all 0.3s ease-in-out
@@ -165,12 +165,11 @@ $container-padding: 0.25em
   @include tablet
     display: none !important
 
-
 @mixin body-font
-  font-family: 'Lato', sans-serif
+  font-family: 'Roboto',  Helvetica, Arial, sans-serif
 
 @mixin header-font
-  font-family: 'Lato', sans-serif
+  font-family: 'Roboto',  Helvetica, Arial, sans-serif
 
 @mixin icon-font
   font-family: FontAwesome
@@ -265,10 +264,10 @@ $container-padding: 0.25em
     top: 30%
 
 @mixin input
-  border: 1px solid $border-dark
+  border: 1px solid rgba($border-dark, 0.5)
   width: 100%
   @include border-radius(3px)
-  @include box-shadow(inset, 2px, 2px, 2px, lighten($border-dark, 20%))
+  @include box-shadow(inset, 2px, 2px, 2px, lighten($border-dark, 40%))
   outline: none
   @include easeInOut
   margin: 10px 0
@@ -302,4 +301,67 @@ $container-padding: 0.25em
     right: $width
 
   .ae-sidebar-right
-    width: $width
+    width: $width
+
+// New mixins added for Express UI below
+
+$xsmall-desktop: 1024px
+$small-desktop: 1280px
+
+// browser prefixes for flexbox container
+@mixin flexbox
+  display: -webkit-box
+  display: -moz-box
+  display: -ms-flexbox
+  display: -webkit-flex
+  display: flex
+
+@mixin flex-row
+  @include flexbox
+  flex-direction: row
+  flex-wrap: nowrap
+  justify-content: space-between
+  align-items: center
+  align-content: stretch
+
+@mixin small-desktop
+  @media only screen and (min-width: $small-desktop + 1)
+    @content
+
+@mixin small-desktop-max
+  @media only screen and (max-width: $small-desktop)
+    @content
+
+@mixin xsmall-desktop
+  @media only screen and (min-width: $xsmall-desktop + 1)
+    @content
+
+@mixin xsmall-desktop-max
+  @media only screen and (max-width: $xsmall-desktop)
+    @content
+
+@mixin hide-scrollbar
+  @include tablet
+    &::-webkit-scrollbar
+      width: 0px
+    &::-webkit-scrollbar:vertical
+      width: 0px
+    &::-webkit-scrollbar-track-piece
+      background-color: transparent
+
+@mixin section-dark
+  p, h1, h2, h3, h4, h5, h6, ul, dl, span, div, label
+    color: #fff
+
+  a:link, a, a:visited, .ae-link
+    color: darken(#fff, 40%)
+
+  .fa
+    color: #fff
+
+  a:hover
+    color: $body-lighter
+
+  .ae-btn
+    &:hover
+      box-shadow: none !important