expressionui 0.0.2 → 0.0.3

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

@@ -0,0 +1,689 @@
+@import expressionui/loading/spinner
+@import expressionui/loading/dots_round
+@import expressionui/loading/three_dots
+@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
+  +group
+.content_hidden
+  visibility: hidden
+  position: relative
+  +group
+.content_overlay
+  position: relative
+  +group
+  &:before
+    position: absolute
+    content: '' !important
+    top: 0
+    left: 0
+    bottom: 0
+    right: 0
+    background: rgba(black, 0.45)
+    display: block !important
+    z-index: 2999
+
+
+// Base Notify
+.notify
+  display: block
+  width: auto
+  height: auto
+  font-size: $font_size
+  position: relative
+  z-index: 3000
+  visibility: visible !important
+  color: white
+  .notify_wrap
+    width: auto
+    padding: $pad*2 58px $pad*2 $pad
+    
+    .msg
+      p, ul, li
+        margin: 0 !important
+        padding: 0 !important
+        width: auto !important
+        height: auto !important
+        float: none !important
+        border: none !important
+      a
+        color: white
+        text-decoration: underline
+    .notify_close
+      display: block
+      position: absolute
+      overflow: hidden
+      font-size: 18px
+      line-height: 18px
+      text-align: center
+      top: 0
+      bottom: 0
+      right: 0
+      width: 44px
+      height: 100%
+      padding-bottom: initial
+      border-bottom: initial
+      +border-radius(0 0 5px 0)
+      +icon_font
+      span
+        cursor: pointer
+        position: absolute
+        top: 50%
+        left: 0
+        right: 0
+        width: 100%
+        margin-top: -9px
+
+  // Base Error
+  &.style_error
+    background: $error
+    .notify_wrap .notify_close
+      color: shade($error, 60%)
+
+  // Base Success
+  &.style_success
+    background: $success
+    .notify_wrap .notify_close
+      color: shade($success, 60%)
+      
+
+  // Base Tip
+  &.style_tip
+    background: $tip
+    .notify_wrap .notify_close
+      color: shade($tip, 60%)
+      
+      
+  // Base Info
+  &.style_info
+    background: $info
+    color: shade($info, 60%)
+    .notify_wrap .notify_close
+      color: shade($info, 70%)
+    .msg a
+      color: shade($info, 70%)
+      
+
+  // 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)
+  &.position_bottom
+    position: absolute !important
+    +box-shadow(rgba(black, 0.18) 0 -2px 0)
+    top: auto
+    bottom: 0
+  &.position_middle
+    position: absolute !important
+    top: 50%
+    margin-top: -19px
+  &.position_full
+    position: absolute !important
+    +box-shadow(rgba(black, 0.18) 0 2px 0)
+    top: 0
+    bottom: 0
+  &.position_push_down
+    margin-bottom: $pad/2
+    position: relative
+    +box-shadow(rgba(black, 0.18) 0 2px 0)
+
+
+  // Not sure how I would use auto?
+  // Whitepsace adds padding around the edge
+
+  &.width_full
+    +box-sizing(content-box)
+    width: 100%
+    position: relative
+  &.width_whitespace
+    +border-bottom-radius(5px)
+    margin: 0 $pad/2 $pad/2 $pad/2
+  
+  // LOADING
+  &.loading_spinner
+    .notify_wrap
+      margin: 0 auto
+      &:before
+        display: none
+      .indicator
+        overflow: hidden
+        text-indent: -2000em
+        margin: 0 auto
+        background: url('/assets/spinner.svg') no-repeat
+        background-size: 100% !important
+        width: 40px
+        height: 40px
+        display: block
+        -webkit-animation-name: spin
+        -webkit-animation-duration: .9s
+        -webkit-animation-iteration-count: infinite
+        -webkit-animation-timing-function: linear
+        -moz-animation-name: spin
+        -moz-animation-duration: .9s
+        -moz-animation-iteration-count: infinite
+        -moz-animation-timing-function: linear
+        -o-animation-name: spin
+        -o-animation-duration: .9s
+        -o-animation-iteration-count: infinite
+        -o-animation-timing-function: linear
+        -ms-animation-name: spin
+        -ms-animation-duration: .9s
+        -ms-animation-iteration-count: infinite
+        -ms-animation-timing-function: linear
+      .msg
+        display: block !important
+        color: #555 !important
+        text-align: center !important
+        margin: 5px 0 0 0 !important
+        font-size: 14px !important
+        font-weight: normal !important
+
+    &.style_none
+      overflow: visible !important
+      +box-shadow(none)
+      height: $spinner_height
+      margin-top: -$spinner_height/2
+      background: none
+      top: 50%
+      position: absolute
+      .notify_wrap
+        position: absolute
+        width: 200px
+        left: 50%
+        height: $spinner_height
+        margin-left: -100px
+        display: block
+        padding: 0
+      &.position_push
+        margin-top: 0
+        position: static
+        .notify_wrap
+          margin: 0 auto
+          position: static
+      &.position_cover
+        margin-top: 0
+        top: $pad*2
+        .notify_wrap
+
+  &.loading_dots
+    .notify_wrap
+      margin: 0 auto
+      &:before
+        display: none
+      .indicator
+        width: 70px
+        height: 70px
+        display: block
+        margin: 0 auto
+        //+scale(5)
+        .dot1, .dot2, .dot3, .dot4, .dot5, .dot6, .dot7, .dot8
+          +border-radius(100px)
+          width: 7px
+          height: 7px
+          display: block
+          background: rgba($dot_color, 0.2)
+          position: absolute
+          left: 50%
+          margin-left: -5px
+          bottom: 25%
+          -webkit-animation-name: fade
+          -webkit-animation-duration: 1s
+          -webkit-animation-iteration-count: infinite
+          -webkit-animation-timing-function: linear
+          -moz-animation-name: fade
+          -moz-animation-duration: 1s
+          -moz-animation-iteration-count: infinite
+          -moz-animation-timing-function: linear
+          -o-animation-name: fade
+          -o-animation-duration: 1s
+          -o-animation-iteration-count: infinite
+          -o-animation-timing-function: linear
+          -ms-animation-name: fade
+          -ms-animation-duration: 1s
+          -ms-animation-iteration-count: infinite
+          -ms-animation-timing-function: linear
+        .dot1
+          +transform( rotate( $dot_deg -$dot_deg + deg) translate(0, $dot_offset) )
+          -webkit-animation-delay: 0.3s
+          -moz-animation-delay: 0.3s
+          -o-animation-delay: 0.3s
+          -ms-animation-delay: 0.3s
+        .dot2
+          +transform( rotate( $dot_deg + deg) translate(0, $dot_offset) )
+          -webkit-animation-delay: 0.4s
+          -moz-animation-delay: 0.4s
+          -o-animation-delay: 0.4s
+          -ms-animation-delay: 0.4s
+        .dot3
+          +transform( rotate( $dot_deg * 2 + deg) translate(0, $dot_offset) )
+          -webkit-animation-delay: 0.5s
+          -moz-animation-delay: 0.5s
+          -o-animation-delay: 0.5s
+          -ms-animation-delay: 0.5s
+        .dot4
+          +transform( rotate( $dot_deg * 3 + deg) translate(0, $dot_offset) )
+          -webkit-animation-delay: 0.6s
+          -moz-animation-delay: 0.6s
+          -o-animation-delay: 0.6s
+          -ms-animation-delay: 0.6s
+        .dot5
+          +transform( rotate( $dot_deg * 4 + deg) translate(0, $dot_offset) )
+          -webkit-animation-delay: 0.7s
+          -moz-animation-delay: 0.7s
+          -o-animation-delay: 0.7s
+          -ms-animation-delay: 0.7s
+        .dot6
+          +transform( rotate( $dot_deg * 5 + deg) translate(0, $dot_offset) )
+          -webkit-animation-delay: 0.8s
+          -moz-animation-delay: 0.8s
+          -o-animation-delay: 0.8s
+          -ms-animation-delay: 0.8s
+        .dot7
+          +transform( rotate( $dot_deg * 6 + deg) translate(0, $dot_offset) )
+          -webkit-animation-delay: 0.9s
+          -moz-animation-delay: 0.9s
+          -o-animation-delay: 0.9s
+          -ms-animation-delay: 0.9s
+        .dot8
+          +transform( rotate( $dot_deg * 7 + deg) translate(0, $dot_offset) )
+          -webkit-animation-delay: 1s
+          -moz-animation-delay: 1s
+          -o-animation-delay: 1s
+          -ms-animation-delay: 1s
+      .msg
+        display: block !important
+        color: #555 !important
+        text-align: center !important
+        margin: 5px 0 0 0 !important
+        font-size: 14px !important
+        font-weight: normal !important
+    &.style_none
+      overflow: visible !important
+      +box-shadow(none)
+      height: $spinner_height
+      margin-top: -round($spinner_height/2)
+      background: none
+      top: 50%
+      position: absolute
+      .notify_wrap
+        position: absolute
+        width: 200px
+        left: 50%
+        height: $spinner_height
+        margin-left: -100px
+        display: block
+        padding: 0
+      &.position_push
+        margin-top: 0
+        position: static
+        .notify_wrap
+          margin: 0 auto
+          position: static
+      &.position_cover
+        margin-top: 0
+        top: $pad*2
+        .notify_wrap
+
+
+
+
+
+
+
+  &.loading_circles
+    .notify_wrap
+      margin: 0 auto
+      &:before
+        display: none
+      .indicator
+        width: 76px
+        height: 20px
+        display: block
+        margin: 0 auto
+        .circle1, .circle2, .circle3
+          $circle_size: 15px
+          background-color: $circle_color
+          float: left
+          margin: 0 round($circle_size/3)
+          height: $circle_size
+          width: $circle_size
+          +border-radius(100px)
+          +opacity(0.3)
+          -webkit-animation-name: circle_fade
+          -webkit-animation-duration: 1.5s
+          -webkit-animation-iteration-count: infinite
+          -webkit-animation-direction: linear
+        .circle1
+          -webkit-animation-delay: .3s
+        .circle2
+          -webkit-animation-delay: .7s
+        .circle3
+          -webkit-animation-delay: .9s
+      .msg
+        display: block !important
+        color: #555 !important
+        text-align: center !important
+        margin: 5px 0 0 0 !important
+        font-size: 14px !important
+        font-weight: normal !important
+    .content_overlay &
+      .notify_wrap
+        &:before
+        .indicator
+          .circle1, .circle2, .circle3
+            background-color: white !important
+    &.style_none
+      overflow: visible !important
+      +box-shadow(none)
+      height: $spinner_height
+      margin-top: -$spinner_height/2
+      background: none
+      top: 50%
+      position: absolute
+      .notify_wrap
+        position: absolute
+        width: 200px
+        left: 50%
+        height: $spinner_height
+        margin-left: -100px
+        display: block
+        padding: 0
+      &.position_push
+        margin-top: 0
+        position: static
+        .notify_wrap
+          margin: 0 auto
+          position: static
+      &.position_cover
+        margin-top: 0
+        top: $pad*2
+        .notify_wrap
+
+
+
+
+
+  &.loading_bars
+    .notify_wrap
+      margin: 0 auto
+      &:before
+        display: none
+      .indicator
+        overflow: hidden
+        text-indent: -2000em
+        margin: 0 auto
+        border: 1px solid shade(#1C60AA, 50%)
+        +border-radius(5px)
+        +background-image(linear_gradient(#6796C6 30%, #1C60AA)  )
+        width: 200px
+        height: 10px
+        display: block
+        position: relative
+        .progress
+          content: ' '
+          +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
+          position: absolute
+          top: 0
+          left: 0
+          width: 100%
+          height: 100%
+      .msg
+        display: block !important
+        color: #555 !important
+        text-align: center !important
+        margin: 5px 0 0 0 !important
+        font-size: 14px !important
+        font-weight: normal !important
+    &.text_align_left
+      .notify_wrap .msg
+        display: block !important
+        color: #555 !important
+        text-align: center !important
+        margin: 5px 0 0 0 !important
+        font-size: 14px !important
+        font-weight: normal !important
+    &.style_none
+      overflow: visible !important
+      +box-shadow(none)
+      height: $spinner_height
+      margin-top: -$spinner_height/2
+      background: none
+      top: 50%
+      position: absolute
+      .notify_wrap
+        position: absolute
+        width: 200px
+        left: 50%
+        height: $spinner_height
+        margin-left: -100px
+        display: block
+        padding: $pad 0
+      &.position_push
+        margin-top: 0
+        position: static
+        .notify_wrap
+          margin: 0 auto
+          position: static
+      &.position_cover
+        margin-top: 0
+        top: $pad*2
+        .notify_wrap
+
+
+
+
+
+  &.style_loading
+    +box-shadow(inset rgba(black, 0.3) 0 2px 4px)
+    +smart_gradient(#219cdf, top)
+    +smart_border(#219cdf)
+    +min_height(10px)
+    margin-top: 0 !important
+    .notify_wrap .notify_close
+      display: none
+    .notify_wrap
+      margin: 0 auto
+      padding: 0
+      &:before
+        display: none
+      .progress
+        +opacity(0.2)
+        +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
+        -webkit-animation-delay: 5s
+        -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
+        position: absolute
+        top: 0
+        left: 0
+        width: 100%
+        height: 100%
+        display: block
+      .msg
+        padding: $pad/2
+        text-transform: uppercase
+        font-size: 10px
+        display: block
+        text-align: center
+        +text_color(#219cdf)
+
+
+// This could be moved???
+.load_more
+  display: block
+  text-align: center
+  color: rgba($highlight, 0.5)
+  margin-bottom: $pad*3
+  span.start
+    display: block
+    .ind
+      +icon_font
+      font-size: 40px
+    .msg
+      font-size: 18px
+      font-weight: bold
+  span.end
+    position: relative
+    .ind
+      width: 48px
+      height: 48px
+      display: block
+      position: relative
+      margin: 0 auto
+      +scale(0.6)
+      .dot1, .dot2, .dot3, .dot4, .dot5, .dot6, .dot7, .dot8
+        +border-radius(5px)
+        height: 9px
+        width: 9px
+        display: block
+        position: absolute
+        -webkit-animation-name: fade
+        -webkit-animation-duration: 0.56s
+        -webkit-animation-iteration-count: infinite
+        -webkit-animation-timing-function: linear
+        -moz-animation-name: fade
+        -moz-animation-duration: 0.56s
+        -moz-animation-iteration-count: infinite
+        -moz-animation-timing-function: linear
+        -o-animation-name: fade
+        -o-animation-duration: 0.56s
+        -o-animation-iteration-count: infinite
+        -o-animation-timing-function: linear
+        -ms-animation-name: fade
+        -ms-animation-duration: 0.56s
+        -ms-animation-iteration-count: infinite
+        -ms-animation-timing-function: linear
+      .dot1
+        left: 0
+        top: 20px
+        -moz-animation-delay: 0.21s
+        -webkit-animation-delay: 0.21s
+        -o-animation-delay: 0.21s
+        -ms-animation-delay: 0.21s
+        animation-delay: 0.21s
+      .dot2
+        left: 6px
+        top: 6px
+        -moz-animation-delay: 0.28s
+        -webkit-animation-delay: 0.28s
+        -o-animation-delay: 0.28s
+        -ms-animation-delay: 0.28s
+        animation-delay: 0.28s
+      .dot3
+        left: 20px
+        top: 0
+        -moz-animation-delay: 0.35s
+        -webkit-animation-delay: 0.35s
+        -o-animation-delay: 0.35s
+        -ms-animation-delay: 0.35s
+        animation-delay: 0.35s
+      .dot4
+        right: 6px
+        top: 6px
+        -moz-animation-delay: 0.42s
+        -webkit-animation-delay: 0.42s
+        -o-animation-delay: 0.42s
+        -ms-animation-delay: 0.42s
+        animation-delay: 0.42s
+      .dot5
+        right: 0
+        top: 20px
+        -moz-animation-delay: 0.49s
+        -webkit-animation-delay: 0.49s
+        -o-animation-delay: 0.49s
+        -ms-animation-delay: 0.49s
+        animation-delay: 0.49s
+      .dot6
+        right: 6px
+        bottom: 6px
+        -moz-animation-delay: 0.56s
+        -webkit-animation-delay: 0.56s
+        -o-animation-delay: 0.56s
+        -ms-animation-delay: 0.56s
+        animation-delay: 0.56s
+      .dot7
+        left: 20px
+        bottom: 0
+        -moz-animation-delay: 0.63s
+        -webkit-animation-delay: 0.63s
+        -o-animation-delay: 0.63s
+        -ms-animation-delay: 0.63s
+        animation-delay: 0.63s
+      .dot8
+        left: 6px
+        bottom: 6px
+        -moz-animation-delay: 0.7s
+        -webkit-animation-delay: 0.7s
+        -o-animation-delay: 0.7s
+        -ms-animation-delay: 0.7s
+        animation-delay: 0.7s
+    .msg
+      font-size: 18px
+      font-weight: bold

data/vendor/assets/stylesheets/_popover.css.sass

@@ -0,0 +1,30 @@
+.popover_container
+  position: absolute
+  +box-shadow(rgba(black, 0.2) 0 3px 2px)
+  +border-radius(4px)
+  &:before
+    content: '4'
+    +icon_font
+    font-size: 32px
+    line-height: 32px
+    position: absolute
+    display: block
+    color: #F2F2F2
+    +rotate(90deg)
+    z-index: 1
+    +text-shadow(rgba(black, 0.5) 1px 0 0)
+  &.topleft:before
+    top: -20px
+    left: 27px
+    +rotate(270deg)
+  &.bottomleft:before
+    bottom: -20px
+    left: 27px
+  &.topright:before
+    top: -20px
+    right: 35px
+    +rotate(270deg)
+  &.bottomright:before
+    bottom: -20px
+    right: 35px
+