expressionui 0.0.2 → 0.0.3

data/vendor/assets/stylesheets/_helpers.sass

@@ -0,0 +1,274 @@
+=amp
+  font-family: Baskerville, "Goudy Old Style", serif
+  font-weight: normal
+  font-style: italic
+
+=offscreen
+  position: absolute
+  left:  -9999px
+  top: -9999px
+  display: block
+
+=font_stack
+  font-family: "source-sans-pro"
+
+=serif
+  font-family: "ff-meta-serif-web-pro"
+
+=logo_serif
+  font-family: "rooney-web"
+
+=inline_block
+  display: -moz-inline-stack
+  display: inline-block
+  vertical-align: top
+  zoom: 1
+  *display: inline
+
+=group
+  &:before, &:after
+    content: ""
+    display: table
+  &:after
+    clear: both
+  *zoom: 1
+
+=transition($time:0.5)
+  +transition-property(all)
+  +transition-duration($time + s)
+  +transition-timing-function(ease-in)
+
+=min_height($size)
+  min-height: $size
+  height: auto !important
+  height: $size
+
+=min_width($size)
+  min-width: $size
+  width: auto !important
+  width: $size
+
+=max_height($size)
+  max-height: $size
+  height: auto !important
+  height: $size
+
+=text_color($base_color, $shadow: true)
+  @if lightness($base_color) > 75%
+    color: shade($base_color, 60%)
+    @if $shadow
+      text-shadow: rgba(white, .2 + lightness($base_color) * .8 / 100) 0 1px 0
+  @else
+    color: tint($base_color, 95%)
+    @if $shadow
+      text-shadow: rgba(black, .4) 0 -1px 1px
+
+=smart_gradient($base_color, $direction: both)
+  +text_color($base_color)
+  @if $direction == both
+    //$experimental-support-for-svg: true
+    +background(linear_gradient(tint($base_color, 30%), shade($base_color, 10%)))
+  @else if $direction == top
+    +background(linear_gradient(tint($base_color, 50%), $base_color 85%))
+  @else if $direction == bottom
+    +background(linear_gradient($base_color, shade($base_color, 30%)))
+
+=smart_border($base_color, $direction: both)
+  @if $direction == both
+    border: 1px solid shade($base_color, 20%)
+    border-top: 1px solid shade($base_color, 10%)
+    border-bottom: 1px solid shade($base_color, 40%)
+  @else if $direction == top
+    border: 1px solid shade($base_color, 20%)
+    border-top: 1px solid $base_color
+  @else if $direction == bottom
+    border: 1px solid shade($base_color, 30%)
+    border-top: 1px solid shade($base_color, 15%)
+    border-bottom: 1px solid shade($base_color, 50%)
+
+=btn_color($base_color, $behind: null)
+  +smart_gradient($base_color)
+  @if $behind == null
+    +smart_border($base_color)
+  @else
+    +smart_border($behind)
+
+=btn_flat($base_color, $behind: null)
+  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)
+
+=btn($base_color, $behind: null)
+  outline: 0
+  border: 0
+  text-align: center
+  text-transform: capitalize
+  text-decoration: none
+  font-weight: 600
+  line-height: 1em
+  +font_stack
+  width: auto
+  +inline-block
+  padding: 10px 13px
+  font-size: 1em
+  +border-radius(2px)
+  cursor: pointer
+  background: $base_color
+  +text_color($base_color)
+  +text-shadow(none)
+  @if lightness($base_color) == 100%
+    border: 1px solid shade($base_color, 10%)
+    +border-radius(3px)
+  &:hover, &: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)
+
+=shadow_scroll($background: #E5E5E5, $top: 62px, $left: 56px, $right: 0, $height: 10px, $z-index: 1111)
+  &:before
+    content: ""
+    display: block
+    +background(linear_gradient(rgba(black, 0.2), rgba(black, 0)))
+    position: fixed
+    top: $top
+    height: ($height)/2
+    left: $left
+    right: $right
+    width: 100%
+    z-index: $z-index
+  &:after
+    content: ""
+    display: block
+    +background(linear_gradient($background 60%, rgba($background, 0)))
+    position: absolute
+    top: 0
+    height: $height
+    left: 0
+    width: 100%
+    z-index: ($z-index)+1
+
+
+
+=text_replace
+  text-indent: 100%
+  white-space: nowrap
+  overflow: hidden
+  display: block
+
+=complement($color)
+  adjust-hue($color, 180deg)
+
+=text_truncate
+  position: relative
+  overflow: hidden
+  white-space: nowrap
+  text-overflow: ellipsis
+  -o-text-overflow: ellipsis
+  -ms-text-overflow: ellipsis
+
+//doesn't work on typekit fonts
+=multiline_text_truncate($lines: 2)
+  overflow : hidden
+  text-overflow: ellipsis
+  display: -webkit-box
+  -webkit-line-clamp: $lines
+  -webkit-box-orient: vertical
+
+=retina
+  @media (-webkit-min-device-pixel-ratio: 2)
+    @content
+
+=at-landscape
+  @media screen and (orientation:landscape)
+    @content
+
+=supports-transform
+  @media all and (-webkit-transform-3d)
+    @content
+
+=at-retina($asset, $width, $height)
+  @media (-webkit-min-device-pixel-ratio: 2)
+    background-image: url($asset)
+    background-size: $width, $height
+
+=mobile-only($include_portrait_tablet: false)
+  @if $include_portrait_tablet == true
+    @media screen and (max-width: $mobile), (orientation: portrait)
+      @content
+  @else
+    @media screen and (max-width: $mobile)
+      @content
+
+=tablet-only
+  @media screen and (min-device-width: $tablet) and (max-device-width: $desktop)
+    @content
+
+=tablet-and-above
+  @media screen and (min-width: $tablet)
+    @content
+
+=desktop-only
+  @media screen and (min-width: $desktop)
+    @content
+
+=desktop-large
+  @media screen and (min-width: $large_desktop)
+    @content
+
+=media_min_width($size)
+  @media screen and (min-width: $size)
+    @content
+
+=media_max_width($size)
+  @media screen and (max-width: $size)
+    @content
+
+=icon_font
+  font-family: 'grokkregular'
+  font-weight: normal !important
+  -webkit-font-smoothing: antialiased
+
+=icon_inline
+  +icon_font
+  position: relative
+  content: attr(data-icon)
+  text-transform: none
+  vertical-align: baseline
+  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

data/vendor/assets/stylesheets/_modals.sass

@@ -0,0 +1,163 @@
+@import libs/animate
+@import libs/animate/shared
+@import libs/animate/animations/bouncing-entrances/bounceInUp
+@import libs/animate/animations/bouncing-exits/bounceOutDown
+
+//Need to add this here as it is a global module
+@import partials/uielements/modals/create_collections
+
+$modal_footer_height: (68px)-$pad
+$borderColor: #cacaca
+
+.dialog_open .dialog_container
+  .pageOverlay
+    +transition
+    +opacity(0.5)
+  .dialog
+    +opacity(1)
+    +animation-name(bounceInUp)
+    +animation-duration(0.5s)
+    +animation-timing-function(ease)
+.dialog_close .dialog_container
+  .dialog
+    +animation-name(bounceOutDown)
+    +animation-duration(1s)
+    +animation-timing-function(ease)
+
+
+.dialog_container
+  position: fixed
+  top: 0
+  left: 0
+  z-index: 5000
+  .pageOverlay
+    +transition
+    background: black
+    position: fixed
+    top: 0
+    left: 0
+    z-index: 99
+    height: 100%
+    width: 100%
+    +opacity(0)
+  .dialog
+    width: auto
+    +opacity(0)
+    position: fixed
+    top: 50%
+    left: 50%
+    z-index: 100
+    background: #fff
+    +box-shadow(rgba(black, 0.4) 0 2px 12px)
+    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
+        .closeDialog
+          color: shade(#FAFAFA, 10%)
+          position: absolute
+          border-top: 0
+          right: 0px
+          top: 0px
+          display: block
+          padding: 0 $pad*2
+          +icon_font
+          text-transform: none
+          &:hover
+            color: $accent
+    .dialogBody
+      padding: 55px $pad $pad $pad
+      height: 100%
+      overflow-y: auto
+      +group
+      .container
+        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
+      padding: $pad
+      font-size: 18px
+      line-height: 36px
+      position: absolute
+      bottom: 0
+      width: 100%
+      +group
+      a
+        float: right
+        +btn(#fff)
+        margin-left: $pad
+        &.defaultButton
+          +btn($accent)
+          float: left
+          margin-left: 0
+          margin-right: $pad
+  &.full
+    .dialog
+      position: fixed
+      +media_max_width(900px)
+        width: 85% !important
+      +mobile_only
+        width: 95% !important
+      .dialogBody
+        height: 100%
+        overflow-y: auto
+
+
+
+
+
+// WRONG PLACE FOR THIS
+.colorpicker
+  .preview
+    float: left
+    width: 50px
+    height: 50px
+    margin: 0 10px 0 0
+    border: 1px solid #efefef
+  #picker
+    cursor: crosshair
+
+
+// WRONG PLACE FOR THIS
+#idea_modal
+  width: 500px
+  label
+    display: block
+    margin-bottom: 5px
+  input, textarea
+    width: 100%
+    font-size: 14px
+    padding: 5px
+    border: 1px solid $borderColor
+  input#inputTitle
+    margin-bottom: 15px
+  textarea
+    margin-bottom: 5px
+
+