iugu-ux 0.9.5 → 0.9.8

data/vendor/assets/stylesheets/iugu-ux/components/badge.sass

@@ -0,0 +1,22 @@
+.badge
+  font-size: $baseFontSize * 0.8
+  text-transform: uppercase
+  background: #333
+  color: #FFF
+  line-height: ($baseFontSize * 1)
+  height: $baseFontSize * 0.9
+  padding: 5px
+  display: inline-block
+  @include border-radius( ($baseFontSize*0.8) + 10px )
+  padding-left: 8px
+  padding-right: 8px
+
+.button
+  .badge
+    margin-top: -3px
+  &.small
+    .badge
+      margin-top: -5px
+  &.large
+    .badge
+      margin-top: 0px

data/vendor/assets/stylesheets/iugu-ux/components/button.sass

@@ -0,0 +1,128 @@
+.desktop
+  .button
+    &:hover
+      background: #CCCCCC
+      color: #FFFFFF
+      @include transition-property(background)
+      @include transition-duration(0.10s)
+
+.button,.button:visited
+  position: relative
+  cursor: pointer
+  display: inline-block
+  text-decoration: none
+  text-align: center
+  border-width: 0px
+  margin: 0px
+  text-transform: uppercase
+  white-space: nowrap
+  -webkit-appearance: none
+  -webkit-tap-highlight-color: rgba(0,0,0,0)
+  -webkit-touch-callout: none
+  -webkit-border: none
+  -webkit-margin: none
+  vertical-align: top
+  @include box-shadow( none ) 
+  @include box-mode
+  margin-bottom: $baseElementSpacing
+  overflow: hidden
+
+  // Custom and Color
+  font-family: $uiFontFamily
+  font-weight: 600
+  @include border-radius( 0px )
+  background-color: #999999
+  color: #FFFFFF
+
+
+  &.selected, &.active
+    background: #333333
+    color: #fff
+    @include transition-duration(none)
+    @include transition-property(none)
+
+  &.transparent
+    background: transparent
+    color: $textColor
+
+  &.disabled
+    background: #ECECEC !important
+    color: #DDD !important
+    cursor: default
+    *
+      @include opacity(0.5)
+
+  // Sizing and Position
+
+  height: $baseFingerSize*1
+  font-size: $baseFontSize - 1px
+  line-height: ($baseFingerSize*1) - (($baseLineHeight * 1)*2) + 4px
+  padding: ($baseLineHeight * 1)
+  @include transition-property(background)
+  @include transition-duration(0.10s)
+
+  &.full-width
+    display: block
+    width: 100%
+
+  *
+    float: left
+    margin-right: $baseLineHeight
+    display: block
+    margin-top: 1px
+    &.no-space
+      margin-right: 0px !important
+
+  .right
+    position: absolute
+    right: 0px
+
+  &.large
+    height: $baseFingerSize*1.5
+    font-size: $baseFontSize * 1.5
+    line-height: ($baseFingerSize*1.5) - (($baseLineHeight * 1.5)*2) + 4px
+    padding: ($baseLineHeight * 1.5)
+    *
+      margin-right: $baseLineHeight * 1.5
+
+  &.small
+    height: $baseFingerSize*0.75
+    font-size: $baseFontSize * 0.75
+    line-height: ($baseFingerSize*0.80) - (($baseLineHeight * 0.75)*2)
+    padding: ($baseLineHeight * 0.75)
+    *
+      margin-right: $baseLineHeight * 0.75
+      margin-top: -2px
+
+  &.tal
+    text-align: left
+  &.tac
+    text-align: center
+  &.tar
+    text-align: right
+
+.group
+  word-spacing: 0px
+  letter-spacing: 0px
+  .button
+    margin-bottom: $baseElementSpacing/2
+  .button:last-child
+    margin-bottom: 0px
+  &.horizontal_stacking
+    .button
+      margin-bottom: 0px
+      min-width: 44px
+      border-right: 1px solid $baseLineColor
+      @include box-mode
+      float: left
+    .button:first-child
+    .button:last-child
+      border-right: none
+  &.vertical_stacking
+    .button
+      display: block
+      margin-bottom: 0px
+      border-bottom: 1px solid $baseLineColor
+    .button:last-child
+      border-bottom: none
+

data/vendor/assets/stylesheets/iugu-ux/components/checkbox.sass

@@ -0,0 +1,115 @@
+.checkbox,.switch
+  position: relative
+  cursor: pointer
+  display: inline-block
+  text-decoration: none
+  text-align: center
+  border-width: 0px
+  margin: 0px
+  text-transform: uppercase
+  white-space: nowrap
+  -webkit-appearance: none
+  -webkit-tap-highlight-color: rgba(0,0,0,0)
+  -webkit-touch-callout: none
+  -webkit-border: none
+  -webkit-margin: none
+  vertical-align: top
+  @include box-shadow( none ) 
+  @include box-mode
+  margin-bottom: $baseLineSpacing
+  overflow: hidden
+  display: inline-block
+
+.checkbox
+  width: 44px
+  height: 44px
+  background: none
+  color: #333
+  @include border-radius( 0px )
+  position: relative
+
+  &:hover, &.selected
+    background: none 
+
+  .outer_decorator
+    height: 32px
+    width: 32px
+    position: absolute
+    top: 6px
+    left: 6px
+    @include border-radius(32px)
+    @include box-mode
+    background: #FFFFFF
+    border: 3px solid #CCC
+
+    .inner_decorator
+      width: 16px
+      height: 16px
+      @include border-radius(16px)
+      @include box-mode
+      position: absolute
+      left: 5px
+      top: 7px
+      display: none
+      font-size: 16px
+
+      span
+        display: block
+        text-align: center
+
+    .label_decorator_on, .label_decorator_off
+      display: none
+
+  &.selected
+    .outer_decorator
+      .inner_decorator
+        display: block
+
+.switch
+  width: 88px
+  height: 44px
+
+  .outer_decorator
+
+    width: 88px
+    height: 44px
+    @include box-mode
+    border: 2px solid #CCC
+
+    .inner_decorator
+      width: 44px
+      height: 44px
+      position: absolute
+      top: 0px
+      left: 0px
+      background: #CCC
+      z-index: 2
+      @include transition-property( left )
+      @include transition-duration(0.10s)
+      @include transition-timing-function( ease-in-out )
+
+      span
+        display: none
+
+    .label_decorator_on, .label_decorator_off
+      position: absolute
+      z-index: 1
+      display: block
+      width: 44px
+      font-size: 11px
+      font-weight: bold
+      line-height: 42px
+      height: 44px
+
+    .label_decorator_on
+      left: 0px
+      color: #333
+
+    .label_decorator_off
+      right: 0px
+      color: #999
+
+  &.selected
+    .outer_decorator
+      .inner_decorator
+        left: 44px

data/vendor/assets/stylesheets/iugu-ux/components/combobox.sass

@@ -0,0 +1,99 @@
+// NEED TO WORK THIS TO NOT WORK WITH SELECT?
+
+.combobox_native, .combobox
+  display: inline-block
+  margin-bottom: $baseLineSpacing
+
+.combobox
+  position: relative
+  
+  a,a:visited
+
+    border: 2px solid #CCC
+    font-size: $baseFontSize + 1px
+    -webkit-appearance: none
+    -webkit-tap-highlight-color: rgba(0,0,0,0)
+    -webkit-touch-callout: none
+    -webkit-border: none
+    -webkit-margin: none
+    outline: none
+    @include box-shadow( none ) 
+    @include box-mode
+    @include border-radius(0px)
+    display: inline-block
+    cursor: pointer
+    position: relative
+
+    min-width: 88px
+
+    background: #FFFFFF
+    color: #333
+
+    height: $baseFingerSize*1
+    font-size: $baseFontSize - 1px
+    padding: ($baseLineHeight * 1)
+    @include transition-property(background)
+    @include transition-duration(0.10s)
+    white-space: nowrap
+
+    text-decoration: none
+
+    &.selected
+      background: #ececec
+
+  > a,:visited
+    padding-right: $baseLineHeight - 2px + 30px
+    background: #FFFFFF image-url("mobile-dropdown-arrow.png") no-repeat right  14px
+
+  ul
+    display: none
+    position: absolute
+    background: #F00
+    z-index: 1000
+    left: 0px
+    top: $baseFingerSize
+    margin: 0px
+    padding: 0px
+    
+    a
+      margin-bottom: 0px
+      display: block
+      width: 100%
+      text-align: left
+  &.open
+    > a
+      border-bottom: none
+      @include box-shadow( 3px 3px 0px rgba(0,0,0,0.10))
+    ul
+      display: block
+      @include box-shadow( 3px 3px 0px rgba(0,0,0,0.10))
+
+      a:not(:last-child)
+        border-bottom: none
+
+.mobile
+  .combobox_native
+    display: inline-block
+    border: 2px solid #CCC
+    padding-left: $baseLineHeight - 2px
+    padding-right: $baseLineHeight - 2px + 30px
+    height: $baseFingerSize
+    font-size: $baseFontSize + 1px
+    background: #FFFFFF image-url("mobile-dropdown-arrow.png") no-repeat center right 
+
+    @include border-radius(0px)
+
+    white-space: nowrap
+    -webkit-appearance: none
+    -webkit-tap-highlight-color: rgba(0,0,0,0)
+    -webkit-touch-callout: none
+    -webkit-border: none
+    -webkit-margin: none
+    vertical-align: top
+    @include box-shadow( none ) 
+    @include box-mode
+    overflow: hidden
+    display: inline-block
+    outline: none
+
+    cursor: pointer

data/vendor/assets/stylesheets/iugu-ux/components/container.sass

@@ -0,0 +1,29 @@
+.container
+  @include box-mode
+  @include box-shadow( none )
+
+  background: #FFFFFF
+
+  padding: $baseElementSpacing
+  margin-bottom: $baseElementSpacing
+  &.no-padding
+    padding: 0px
+  &.small-padding
+    padding: $baseElementSpacing/2
+
+.container, .content
+  .container
+    border: 1px solid $baseLineColor
+    @include border-radius(0px)
+    @include box-shadow(none)
+    &.covered
+      background: #e0e0e0
+      border: none
+  .padding
+    padding: $baseElementSpacing
+  .header
+    border-bottom: 1px solid $baseLineColor
+    padding: $baseLineSpacing
+  .footer
+    border-top: 1px solid $baseLineColor
+    padding: $baseLineSpacing

data/vendor/assets/stylesheets/iugu-ux/components/group.sass

@@ -0,0 +1,10 @@
+.group
+  &.horizontal_stacking
+    display: inline-block
+    margin-right: $baseElementSpacing
+  &.horizontal_stacking:last-child
+    margin-right: 0px
+
+.button-group
+  .button
+    margin-bottom: 0px

data/vendor/assets/stylesheets/iugu-ux/components/input.sass

@@ -0,0 +1,37 @@
+input[type="text"],input.string,input.password,input[type="email"],input[type="number"],input[type="url"],input[type="date"],input[type="datetime"],input[type="tel"],input[type="datetime"],input[type="month"],input[type="search"],textarea
+  border: 2px solid #CCC
+  padding-left: $baseLineHeight - 2px
+  padding-right: $baseLineHeight - 2px
+  height: $baseFingerSize
+  // padding-top: 3px
+  font-size: $baseFontSize + 1px
+  -webkit-appearance: none
+  -webkit-tap-highlight-color: rgba(0,0,0,0)
+  -webkit-touch-callout: none
+  outline: none
+  @include box-mode
+  margin-bottom: $baseLineSpacing
+  @include border-radius(0px)
+
+  &.failure
+    border: 2px solid #F00
+  &.success
+    border: 2px solid #0F0
+
+  &.full-width
+    display: block
+    width: 100%
+
+.mobile
+  input[type="date"]
+    width: 120px
+    text-align: center
+
+textarea
+  height: auto
+  line-height: auto
+  padding: $baseLineHeight - 2px
+  resize: none
+  overflow: auto
+  overflow-y: auto
+  height: $baseFingerSize * 3