expressionui 0.0.6 → 0.1.0

data/vendor/assets/stylesheets/expressionui/_helpers.sass

@@ -1,3 +1,6 @@
++font-face("#{$icon_font}", font-files("#{$icon_font}.woff", "#{$icon_font}.otf", "#{$icon_font}.svg##{$icon_font}"), "#{$icon_font}.eot")
+//woff, opentype/truetype, svg
+
 =amp
   font-family: Baskerville, "Goudy Old Style", serif
   font-weight: normal
@@ -97,29 +100,6 @@
 
 =btn($base_color, $behind: null, $style: flat)
   @if $style == flat
-    outline: 0
-    text-align: center
-    text-transform: capitalize
-    text-decoration: none
-    font-weight: 600
-    line-height: 1em
-    +font_stack
-    width: auto
-    +inline-block
-    padding: 8px 11px
-    font-size: 1em
-    +border-radius(2px)
-    +box-shadow(rgba(white, 0.3) 0 1px 0 inset, rgba(black, 0.20) 0 2px 2px 0)
-    cursor: pointer
-    +btn_color($base_color, $behind)
-    border: 0
-    &:hover
-      +box-shadow(rgba(white, 0.6) 0 1px 3px inset, rgba(black, 0.20) 0 2px 2px 0)
-      +btn_color(tint($base_color, 10%), $behind)
-    &:active
-      +box-shadow(rgba(black, 0.6) 0 2px 4px inset, rgba(black, 0.50) 0 1px 0 0)
-      +btn_color(shade($base_color, 10%), $behind)
-  @else
     outline: 0
     border: 0
     text-align: center
@@ -137,16 +117,58 @@
     background: $base_color
     +text_color($base_color)
     +text-shadow(none)
+    &.icon
+      +icon_font
+      text-transform: none
     @if lightness($base_color) == 100%
       border: 1px solid shade($base_color, 10%)
       +border-radius(3px)
-    &:hover, &:active
+    &:hover, &:active, &.active
       @if lightness($base_color) == 100%
         border: 1px solid shade($base_color, 20%)
       background: shade($base_color, 10%)
       +box-shadow(shade($base_color, 20%) 0 2px 0 inset)
       +text_color($base_color)
       +text-shadow(none)
+    &.active:hover
+      @if lightness($base_color) == 100%
+        border: 1px solid shade($base_color, 20%)
+      background: shade($base_color, 20%)
+      +box-shadow(shade($base_color, 30%) 0 2px 0 inset)
+      +text_color(shade($base_color, 10%))
+      +text-shadow(none)
+    &.disabled, &.disabled:hover
+      cursor: not-allowed
+      +opacity(0.7)
+      @if lightness($base_color) == 100%
+        border: 1px solid shade($base_color, 10%)
+      background: $base_color
+      +box-shadow(none)
+      +text_color($base_color)
+      +text-shadow(none)
+  @else
+    outline: 0
+    text-align: center
+    text-transform: capitalize
+    text-decoration: none
+    font-weight: 600
+    line-height: 1em
+    +font_stack
+    width: auto
+    +inline-block
+    padding: 8px 11px
+    font-size: 1em
+    +border-radius(2px)
+    +box-shadow(rgba(white, 0.3) 0 1px 0 inset, rgba(black, 0.20) 0 2px 2px 0)
+    cursor: pointer
+    +btn_color($base_color, $behind)
+    border: 0
+    &:hover
+      +box-shadow(rgba(white, 0.6) 0 1px 3px inset, rgba(black, 0.20) 0 2px 2px 0)
+      +btn_color(tint($base_color, 10%), $behind)
+    &:active
+      +box-shadow(rgba(black, 0.6) 0 2px 4px inset, rgba(black, 0.50) 0 1px 0 0)
+      +btn_color(shade($base_color, 10%), $behind)
 
 =shadow_scroll($background: #E5E5E5, $top: 62px, $left: 56px, $right: 0, $height: 10px, $z-index: 1111)
   &:before
@@ -259,16 +281,32 @@
   line-height: 0
   font-size: 1.4em
   top: 0.1em
-
-=shadow_base
-  +box-shadow(rgba(#000, .3) 0 1px 4px, rgba(#000, .1) 0 0 40px 0 true)
-  &:before, &:after
-    content: ""
-    position: absolute
-    z-index: -2
-
-=shadow_raised
-  +shadow-base
-  -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 40px rgba(0, 0, 0, 0.05) inset
-  -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 40px rgba(0, 0, 0, 0.05) inset
-  box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 40px rgba(0, 0, 0, 0.05) inset
+  
+=flex_me
+  +display-box
+  +box-orient(horizontal)
+  +box-align(stretch)
+  .col1
+    +box-flex(1)
+  .col2
+    +box-flex(2)
+  .col3
+    +box-flex(3)
+  .col4
+    +box-flex(4)
+  .col5
+    +box-flex(5)
+  .col6
+    +box-flex(6)
+
+// Depricated with compass Version: 0.13.alpha.0
+=placeholder
+  @if $experimental-support-for-webkit
+    &::-webkit-input-placeholder
+      @content
+  @if $experimental-support-for-mozilla
+    &:-moz-placeholder
+      @content
+  @if $experimental-support-for-microsoft
+    &:-ms-input-placeholder
+      @content

data/vendor/assets/stylesheets/expressionui/_modals.sass

@@ -1,31 +1,29 @@
 @import animate
 @import animate/shared
-@import animate/animations/bouncing-entrances/bounceInUp
-@import animate/animations/bouncing-exits/bounceOutDown
+@import animate/animations/bouncing-entrances/bounceIn
+@import animate/animations/bouncing-exits/bounceOut
 
-//Need to add this here as it is a global module
-//@import partials/uielements/modals/create_collections
-
-$modal_footer_height: (68px)-$pad
+$modal_button_size: 36px
+$modal_footer_height: ($modal_button_size)+($pad*2)
 $borderColor: #cacaca
+$modal_border_radius: 5px
 
-.dialog_open .dialog_container
+.modal_open .modal_wrapper
   .pageOverlay
     +transition
     +opacity(0.5)
-  .dialog
+  .modal
     +opacity(1)
-    +animation-name(bounceInUp)
+    +animation-name(bounceIn)
     +animation-duration(0.5s)
     +animation-timing-function(ease)
-.dialog_close .dialog_container
-  .dialog
-    +animation-name(bounceOutDown)
-    +animation-duration(1s)
+.modal_close .modal_wrapper
+  .modal
+    +animation-name(bounceOut)
+    +animation-duration(0.5s)
     +animation-timing-function(ease)
 
-
-.dialog_container
+.modal_wrapper
   position: fixed
   top: 0
   left: 0
@@ -40,70 +38,63 @@ $borderColor: #cacaca
     height: 100%
     width: 100%
     +opacity(0)
-  .dialog
-    width: auto
+  .modal
+    width: auto !important
     +opacity(0)
     position: fixed
     top: 50%
     left: 50%
     z-index: 100
     background: #fff
+    border: 1px solid #464646
     +box-shadow(rgba(black, 0.4) 0 2px 12px)
+    +border-radius($modal_border_radius)
     padding-bottom: $modal_footer_height
     .content
       background: #fff
-      display: block
     > h1
-      background: #FAFAFA
-      position: absolute
-      width: 100%
-      z-index: 10
-      line-height: 55px
-      text-transform: capitalize
-      padding: 0 0 0 $pad*2
-      font-weight: 800
-      font-size: 25px
-      color: shade(#FAFAFA, 10%)
-      span.container
-        background: none !important
-        display: block
+      background: shade(white, 5%)
+      +border-top-radius($modal_border_radius)
+      color: shade(white, 30%)
+      position: relative
+      text-transform: uppercase
+      padding: $pad
+      font-weight: 100
+      letter-spacing: 1px
+      font-size: ($font-size)+5px
+      margin: 0
+      span
         .closeDialog
-          color: shade(#FAFAFA, 10%)
           position: absolute
-          border-top: 0
-          right: 0px
-          top: 0px
+          right: 0
+          top: 50%
+          margin-top: -($font-size)
           display: block
           padding: 0 $pad*2
           +icon_font
+          font-size: ($font-size)+10px
           text-transform: none
+          color: shade(white, 20%)
           &:hover
             color: $accent
-    .dialogBody
-      padding: 55px $pad $pad $pad
+    .modalBody
+      padding: $pad $pad $pad $pad
+      margin-top: -1px
       height: 100%
       overflow-y: auto
+      +border-top-radius(5px)
       +group
-      .container
+      background: #fff
+      .wrapper
         width: auto
-        height: auto
-        background: none !important
-      .field
-        input, textarea
-      .share_item
-        .card_wrapper
-          width: 260px
-          border: 1px solid #ccc
-          box-shadow: 1px 3px 4px rgba(0,0,0,0.3)
-          footer
-            a
-              visibility: hidden
-      .bottom_footer
-        display: none
-    .dialogFooter
+        overflow: initial
+        //width: auto
+        //height: auto
+    .modalFooter
       padding: $pad
-      font-size: 18px
-      line-height: 36px
+      border-top: 1px solid shade(white, 6%)
+      font-size: ($font_size)+6px
+      line-height: $modal_button_size
       position: absolute
       bottom: 0
       width: 100%
@@ -118,12 +109,12 @@ $borderColor: #cacaca
           margin-left: 0
           margin-right: $pad
   &.full
-    .dialog
+    .modal
       position: fixed
       +media_max_width(900px)
         width: 85% !important
       +mobile_only
         width: 95% !important
-      .dialogBody
+      .modalBody
         height: 100%
         overflow-y: auto

data/vendor/assets/stylesheets/expressionui/_notifications.sass

@@ -4,13 +4,6 @@
 @import expressionui/loading/spinner
 @import expressionui/loading/progress
 
-$circle_color: $accent
-$error: #F35919 // Green
-$success: #45A03B // Success
-$tip: #01C8E4 // Blue
-$info: #FDE200 // Yellow
-$font_size: 18px
-
 // Content Display
 .content_visible
   position: relative
@@ -39,7 +32,7 @@ $font_size: 18px
   display: block
   width: auto
   height: auto
-  font-size: $font_size
+  font-size: ($font_size)+4
   position: relative
   z-index: 3000
   visibility: visible !important
@@ -47,7 +40,6 @@ $font_size: 18px
   .notify_wrap
     width: auto
     padding: $pad*2 58px $pad*2 $pad
-    
     .msg
       p, ul, li
         margin: 0 !important
@@ -56,7 +48,7 @@ $font_size: 18px
         height: auto !important
         float: none !important
         border: none !important
-      a
+      a:not(.btn)
         color: white
         text-decoration: underline
     .notify_close
@@ -84,6 +76,22 @@ $font_size: 18px
         width: 100%
         margin-top: -9px
 
+  &.icon_true
+    .notify_wrap
+      padding-left: 68px
+    .icon
+      color: rgba(white, 0.28)
+      display: block
+      position: absolute
+      top: 50%
+      left: 15px
+      font-size: 45px
+      margin-top: -0.65em
+  &.icon_flase
+    .icon
+      display: none
+
+
   // Base Error
   &.style_error
     background: $error
@@ -112,34 +120,13 @@ $font_size: 18px
       color: shade($info, 70%)
     .msg a
       color: shade($info, 70%)
+    &.icon_true
+      .icon
+        color: rgba(black, 0.04)
       
 
-  // CLEAN?
-  &.invert_false
-  &.invert_true
-
-
-  &.icon_true
-    .notify_wrap
-      padding-left: $pad*7
-    .icon
-      color: rgba(white, 0.28)
-      display: block
-      position: absolute
-      top: 50%
-      left: 15px
-      font-size: 50px
-      margin-top: -0.7em
-  &.icon_flase
-    .icon
-      display: none
-
-  // COVER AND PUSH SHOULD CONTROL THE CONTENT INTERACTIONS
-  // POSITION SHOULD BE TOP, BOTTOM, OR MIDDLE
 
   // position: top, bottom, middle, push_down
-
-  
   &.position_top
     position: absolute !important
     +box-shadow(rgba(black, 0.18) 0 2px 0)
@@ -174,6 +161,7 @@ $font_size: 18px
     +border-bottom-radius(5px)
     margin: 0 $pad/2 $pad/2 $pad/2
   
+  // MAKE A PARTIAL
   // LOADING
   &.loading_spinner
     .notify_wrap
@@ -183,8 +171,8 @@ $font_size: 18px
       .indicator
         overflow: hidden
         text-indent: -2000em
-        margin: 0 auto
-        background: url('/assets/spinner.svg') no-repeat
+        margin: 0 auto        
+        background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNS4xLCBFeHBvcnQgU1ZHIEV4dGVuc2lvbiBieSBBYXJvbiBCZWFsbCAoaHR0cDovL2ZpcmV3b3Jrcy5hYmVhbGwuY29tKSAuIFZlcnNpb246IDAuNi4xICAtLT4NPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NPHN2ZyBpZD0iVW50aXRsZWQtUGFnZSUyMDEiIHZpZXdCb3g9IjAgMCA3MiA3MiIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6I2ZmZmZmZjAwIiB2ZXJzaW9uPSIxLjEiDQl4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIg0JeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI3MnB4IiBoZWlnaHQ9IjcycHgiDT4NCTxnIGlkPSJMYXllciUyMDEiPg0JCTxnPg0JCQk8cGF0aCBkPSJNIDUyLjkwMTQgNDguODkwMSBDIDQ5LjA4NCA1NC4yMTM0IDQyLjg0OTYgNTcuNjkxNCAzNS44MTI1IDU3LjY5MTQgQyAyNC4yNjI3IDU3LjY5MTQgMTQuODYwNCA0OC4zMjc2IDE0Ljc5MzkgMzYuNzkzIEwgMTcuMjY0NiAzNi43OTMgTCAyMS42NTE0IDM2Ljc5MyBMIDEwLjczMzQgMjUuOTE3IEwgLTAuMTY1IDM2Ljc5MyBMIDUuNTk4NiAzNi43OTMgTCA1Ljc1OTggMzYuNzkzIEwgNi43MDggMzYuNzkzIEMgNi43NzU0IDUyLjgxMSAxOS43NzgzIDY1Ljc3NjkgMzUuODEyNSA2NS43NzY5IEMgNDUuMDk3NyA2NS43NzY5IDUzLjM1OTQgNjEuNDI1MyA1OC42OTA0IDU0LjY1NTggTCA1Ni4zMDk2IDUyLjI4NDIgTCA1Mi45MDE0IDQ4Ljg5MDEgWiIgZmlsbD0iIzAwMDAwMCIvPg0JCQk8cGF0aCBkPSJNIDY3LjI3NzMgMzYuODI1NyBMIDY3LjI3NDQgMzYuODI3NiBMIDY0LjkxNyAzNi44Mjc2IEMgNjQuOTE3IDM2LjgyNjcgNjQuOTE3IDM2LjgyNjcgNjQuOTE3IDM2LjgyNTcgQyA2NC45MTcgMzYuNzcyOSA2NC45MjA5IDM2LjcyMTIgNjQuOTIwOSAzNi42Njg5IEMgNjQuOTIwOSAyMC41OTI4IDUxLjg4ODcgNy41NjEgMzUuODEyNSA3LjU2MSBDIDI2LjQ1MzEgNy41NjEgMTguMTI4OSAxMS45ODQ5IDEyLjgwNTcgMTguODUwMSBMIDE1LjI4NTIgMjEuMzIxMyBMIDE4LjU5OTYgMjQuNjIzNSBDIDIyLjQwNjMgMTkuMjAwNyAyOC43MDAyIDE1LjY0NjUgMzUuODEyNSAxNS42NDY1IEMgNDcuNDA1MyAxNS42NDY1IDU2LjgzNTkgMjUuMDc3MSA1Ni44MzU5IDM2LjY2ODkgQyA1Ni44MzU5IDM2LjcyMTIgNTYuODMxMSAzNi43NzI5IDU2LjgzMTEgMzYuODI1NyBDIDU2LjgzMTEgMzYuODI2NyA1Ni44MzExIDM2LjgyNjcgNTYuODMxMSAzNi44Mjc2IEwgNTQuMjY5NSAzNi44Mjc2IEwgNTQuMjY3NiAzNi44MjU3IEwgNDkuOTU2MSAzNi44MjU3IEwgNjAuODc0IDQ3LjcwMTcgTCA3MS43NzI1IDM2LjgyNTcgTCA2Ny4yNzczIDM2LjgyNTcgWiIgZmlsbD0iIzAwMDAwMCIvPg0JCTwvZz4NCTwvZz4NPC9zdmc+') no-repeat
         background-size: 100% !important
         width: 40px
         height: 40px
@@ -229,7 +217,7 @@ $font_size: 18px
         margin-left: -100px
         display: block
         padding: 0
-      &.position_push
+      &.position_push_down
         margin-top: 0
         position: static
         .notify_wrap
@@ -348,7 +336,7 @@ $font_size: 18px
         margin-left: -100px
         display: block
         padding: 0
-      &.position_push
+      &.position_push_down
         margin-top: 0
         position: static
         .notify_wrap
@@ -358,7 +346,13 @@ $font_size: 18px
         margin-top: 0
         top: $pad*2
         .notify_wrap
-
+      &.position_middle .notify_wrap
+        margin-top: -35px
+        top: 50%
+      &.position_bottom .notify_wrap
+        bottom: 0
+      &.position_top .notify_wrap
+        top: 0
 
 
 
@@ -423,17 +417,19 @@ $font_size: 18px
         margin-left: -100px
         display: block
         padding: 0
-      &.position_push
+      &.position_push_down
         margin-top: 0
         position: static
         .notify_wrap
           margin: 0 auto
           position: static
-      &.position_cover
+      &.position_middle
         margin-top: 0
         top: $pad*2
-        .notify_wrap
-
+      &.position_bottom
+        bottom: 0
+      &.position_top
+        top: 0
 
 
 
@@ -447,11 +443,10 @@ $font_size: 18px
         overflow: hidden
         text-indent: -2000em
         margin: 0 auto
-        border: 1px solid shade(#1C60AA, 50%)
         +border-radius(5px)
-        +background-image(linear_gradient(#6796C6 30%, #1C60AA)  )
+        background: $loading_bars
         width: 200px
-        height: 10px
+        height: 20px
         display: block
         position: relative
         .progress
@@ -459,23 +454,12 @@ $font_size: 18px
           +border-radius(5px)
           +opacity(0.2)
           display: block
-          +background-image( image-url('/assets/loading_bars.svg') )
-          -webkit-animation-name: bars
-          -webkit-animation-duration: .9s
-          -webkit-animation-iteration-count: infinite
-          -webkit-animation-timing-function: linear
-          -moz-animation-name: bars
-          -moz-animation-duration: .9s
-          -moz-animation-iteration-count: infinite
-          -moz-animation-timing-function: linear
-          -o-animation-name: bars
-          -o-animation-duration: .9s
-          -o-animation-iteration-count: infinite
-          -o-animation-timing-function: linear
-          -ms-animation-name: bars
-          -ms-animation-duration: .9s
-          -ms-animation-iteration-count: infinite
-          -ms-animation-timing-function: linear
+          +background-size(30px 30px)
+          +background-image(linear-gradient(-45deg, white 25%, transparent 25%, transparent 50%, white 50%, white 75%, transparent 75%, transparent))
+          -webkit-animation: bars .9s infinite linear
+          -moz-animation: bars .9s infinite linear
+          -o-animation: bars .9s infinite linear
+          -ms-animation: bars .9s infinite linear
           position: absolute
           top: 0
           left: 0
@@ -512,20 +496,19 @@ $font_size: 18px
         margin-left: -100px
         display: block
         padding: $pad 0
-      &.position_push
+      &.position_push_down
         margin-top: 0
         position: static
         .notify_wrap
           margin: 0 auto
           position: static
-      &.position_cover
+      &.position_middle
         margin-top: 0
         top: $pad*2
-        .notify_wrap
-
-
-
-
+      &.position_bottom
+        bottom: 0
+      &.position_top
+        top: 0
 
   &.style_loading
     +box-shadow(inset rgba(black, 0.3) 0 2px 4px)