iugu-ux 0.9.5 → 0.9.8

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

@@ -0,0 +1,5 @@
+.notice
+  @include box-mode
+  border: 4px solid #DDD
+  background: #FFFFFF
+  margin-bottom: $baseElementSpacing

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

@@ -0,0 +1,44 @@
+.popup-wrapper
+  position: absolute
+  left: 0px
+  right: 0px
+  top: 0px
+  bottom: 0px
+  z-index: 5000
+  .popup-modal
+    position: absolute
+    top: 0px
+    left: 0px
+    width: 100%
+    height: 100%
+    background: rgba(0,0,0,0.5)
+    z-index: 2
+  .popup-window
+    position: absolute
+    top: 50%
+    left: 50%
+    z-index: 5
+
+@include for-small-screens(680px)
+  .popup-wrapper
+    .popup-model
+      display: none
+    .popup-window
+      position: absolute
+      left: 0px
+      top: 46px
+      bottom: 0px
+      right: 0px
+      width: auto !important
+      height: auto !important
+      margin-top: auto !important
+      margin-left: auto !important
+      .container
+        width: auto !important
+        height: auto !important
+        position: absolute
+        left: 0px
+        top: 0px
+        bottom: 0px
+        right: 0px
+        margin-bottom: 0px

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

@@ -0,0 +1,63 @@
+.radio
+  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
+
+  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
+
+    .inner_decorator
+      width: 16px
+      height: 16px
+      @include border-radius(16px)
+      @include box-mode
+      background: #FFF
+      position: absolute
+      left: 8px
+      top: 8px
+      display: block
+      border: 3px solid #CCC
+
+    .label_decorator_on, .label_decorator_off
+      display: none
+
+  &.selected
+    .outer_decorator
+      .inner_decorator
+        display: block
+        background: #333
+        border: none

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

@@ -0,0 +1,167 @@
+@import "compass/utilities/general/clearfix"
+
+body.ui-box-background,body.ui-box-background #app
+  height: 100%
+  width: 100%
+  position: relative
+  @include box-sizing( border-box )
+
+body.ui-box-background
+  overflow: hidden
+
+body.ui-box-background
+  background: $baseUIBoxPageBackgroundColor
+  background-image: none
+
+.ui-responsive-box
+  @include pie-clearfix
+  width: 100%
+  margin-left: auto
+  margin-right: auto
+  position: relative
+  color: $textColor
+  height: 100%
+  @include box-sizing( border-box )
+
+  .sidebar
+    float: left
+    width: $desktopSidebarWidth 
+    height: 100%
+    background: $baseUIBoxSidebarBackgroundColor
+    border-right: 1px solid $baseLineColor
+    padding: 20px
+    @include box-sizing( border-box )
+    position: relative
+
+  .content-area
+    height: 100%
+    position: relative
+    background: $baseUIBoxBackgroundColor
+
+    @include box-sizing( border-box )
+    .small-navigation
+      display: none
+    
+    &.handle-sidebar
+      margin-left: $desktopSidebarWidth
+
+  .handle-scrolling
+    width: 100%
+    height: 100%
+    overflow-y: auto
+    -webkit-overflow-scrolling: touch
+
+  .handle-scrolling > *
+    -webkit-transform: translateZ(0px)
+
+  .handle-scrolling > div:first-child
+    height: 100%
+
+  .content
+    position: absolute
+    top: 0px
+    bottom: 0px
+    left: 0px
+    right: 0px
+
+@include for-large-screens(1025px)
+  body.ui-box-background
+    padding: 20px
+  .ui-responsive-box
+    max-width: 980px
+    @include box-shadow( 3px 3px 0px rgba(0,0,0,0.25))
+
+
+@include for-small-screens(680px)
+  body.ui-box-background
+    background: $baseUIBoxSidebarBackgroundColor
+
+  .mobile
+    .ui-responsive-box
+      .content-area.handle-sidebar
+        +translateZ(0px)
+
+  .ios
+    .handle-scrolling
+      overflow-y: scroll
+  .android
+    .handle-scrolling
+      overflow-y: auto
+
+  .ui-responsive-box
+    border: none
+    background: $baseUIBoxSidebarBackgroundColor
+
+    .sidebar
+      float: none
+      position: absolute
+      z-index: 1000
+      width: $mobileSidebarWidth
+      border: none
+      background: $baseUIBoxSidebarBackgroundColor
+      visibility: hidden
+
+      @include transition-delay( 1.5s )
+
+    .content-area.handle-sidebar
+      margin-left: -1px
+      z-index: 2000
+      min-width: 320px
+      border-left: 1px solid $baseLineColor
+
+      @include transition-property( transform )
+      @include transition-duration( 300ms )
+      @include transition-timing-function( cubic-bezier(0.39, 0.575, 0.565, 1) )
+
+      &.handle-sidebar
+        .small-navigation
+          display: block
+          height: $toolbarHeight
+          position: relative
+          background: $baseUIBoxHeaderBackgroundColor
+          border-bottom: 1px solid $baseUIBoxHeaderLineColor
+
+          margin-top: -1px
+          margin-right: -2px
+
+          .toggle-sidebar
+            display: block
+            width: 44px
+            height: 44px
+            cursor: pointer
+            position: absolute
+            top: 0px
+            left: 0px
+            z-index: 10
+          .responsive-title
+            display: block
+            text-align: center
+            height: 44px
+            font-size: 17px
+            line-height: 44px
+            color: $baseUIBoxHeaderTitleColor
+            @include box-mode
+            left: 60px
+            right: 60px
+            font-weight: bold
+
+  .content-area
+    .content
+      top: 44px
+
+  .desktop .open, .mobile .open
+    border: none
+    .content-area.handle-sidebar
+      +translateX( $mobileSidebarWidth )
+
+    .sidebar
+      display: block
+      visibility: visible
+      margin: 0px
+
+      @include transition-property( border )
+      @include transition-delay( 0.3s )
+
+  .deprecated_android
+    .content-area
+      background: #FFF

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

@@ -0,0 +1,68 @@
+.viewLoader
+  position: absolute
+  top: 0px
+  left: 0px
+  width: 100%
+  height: 100%
+  .blockLayer
+    position: absolute
+    top: 0px
+    left: 0px
+    width: 100%
+    height: 100%
+    background: rgba(255,255,255,0.5)
+    z-index: 2
+
+  .loaderContainer
+    position: absolute
+    top: 50%
+    left: 50%
+    width: 64px
+    height: 64px
+    margin-left: -32px
+    margin-top: -32px
+    background: #FFFFFF
+    @include border-radius(5px)
+    line-height: 64px
+    text-align: center
+    color: #fff
+    @include box-mode
+    padding: 14px
+    border: 2px solid #CCC
+
+
+.empty-view-wrapper
+  position: absolute
+  top: 50%
+  width: 100%
+  height: 220px
+  @include box-mode
+  padding-left: 20px
+  padding-right: 20px
+  margin-top: -110px
+
+  .empty-icon
+    margin-left: auto
+    margin-right: auto
+    margin-bottom: $baseElementSpacing
+
+  .empty-title
+    font-weight: bold
+    text-transform: uppercase
+    margin-bottom: $baseElementSpacing
+    text-align: center
+
+  .empty-description
+    text-align: center
+    margin-bottom: $baseElementSpacing
+
+  .button
+    margin-bottom: 0px
+    margin-left: auto
+    margin-right: auto
+    display: block
+    max-width: 300px
+
+    *
+      margin-top: -3px
+      margin-right: 14px

data/vendor/assets/stylesheets/iugu-ux/core.sass

@@ -4,7 +4,10 @@
 @import "compass/css3/images"
 @import "compass/utilities/sprites"
 @import "compass/css3"
+
 @import "variables"
+@import "iux/variables"
+
 @import "mixins"
 @import "adaptative-mixins"
 @import "sprite-mixins"

data/vendor/assets/stylesheets/iugu-ux/iugu-ux-entry.sass

@@ -7,6 +7,7 @@
 
 @import "typography"
 @import "components"
+@import "iux/components"
 
 // Default Rendering Styles
 @import "no-js"

data/vendor/assets/stylesheets/iugu-ux/typography.sass

@@ -156,11 +156,11 @@ table
 .table-stripping
   tbody
     tr:nth-child(odd) td, tr:nth-child(odd) th
-      background-color: $lineAlternateBackgroundColor
+      background-color: $tableAlternateBackgroundColor
 
 .table-highlighting
   tbody tr:hover td, tbody tr:hover td
-    background-color: $lineHighlightBackgroundColor 
+    background-color: $tableHighlightBackgroundColor 
     cursor: pointer
 
 pre.prettyprint
@@ -179,13 +179,34 @@ pre.prettyprint
     margin: 0px
 
 code
-  background-color: $lineAlternateBackgroundColor
+  background-color: $codeBackgroundColor
   border: 1px solid $baseLineColor
   padding: 2px 4px
   +border-radius( 3px )
-  color: $red
+  color: $textColor
   font-weight: normal
 
+.padding
+  padding: $baseElementSpacing
+
+.small-padding
+  padding: $baseElementSpacing/2
+
+.big-padding
+  padding: $baseElementSpacing*2
+
+@include for-small-screens(680px)
+
+  .padding
+    padding: $baseElementSpacing*0.5
+
+  .small-padding
+    padding: $baseElementSpacing*0.25
+
+  .big-padding
+    padding: $baseElementSpacing*1
+
+// TODO: Revise
 .box
   +box-mode
   max-width: 100%
@@ -194,7 +215,7 @@ code
   +box-shadow( -1px 1px 1px rgba(0, 0, 0, 0.15))
   margin-bottom: $gridSpacing
   &.box-highlighting:hover
-    border: 1px solid $gray
+    border: 1px solid $baseLineColor
     cursor: pointer
   &.box-rounded
     +border-radius( 3px )

data/vendor/assets/stylesheets/iugu-ux/variables.sass

@@ -1,79 +1,96 @@
-$sansFontFamily: Helvetica, Arial, sans-serif
+// Base Spacing and Typography
+$sansFontFamily: Helvetica, Arial, "sans", sans-serif
+$uiFontFamily: "Myriad Pro", "Helvetica", "Arial", "sans", "sans-serif"
 
 $baseElementSpacing: 20px
 $baseFontSize: 14px
 $baseFontFamily: $sansFontFamily
 $baseLineHeight: 14px
 $baseLineSpacing: 6px
+
+$headingFontWeight: bold
+$headingFontColor: #000000
+
+// Default Grid Size
 $baseBlockSize: 20px
+$gridSpacing: $baseElementSpacing 
+
+// Default Height of Components
+$baseFingerSize: 44px
+
+// Default Sizing for Components
+$desktopSidebarWidth: 256px
+$mobileSidebarWidth: 256px
+$toolbarHeight: 44px
+
+// Used in <HR> and other stuff
 $baseLineColor: #DDD
 $baseLineShadowColor: #BBB
 
-$lineAlternateBackgroundColor: #EFEFEF
-$lineHighlightBackgroundColor: #E7E7E7
+// Table Colors
+$tableAlternateBackgroundColor: #EFEFEF
+$tableHighlightBackgroundColor: #E7E7E7
 
-$gridSpacing: $baseElementSpacing 
+// Color Background Color
+$codeBackgroundColor: $tableAlternateBackgroundColor
 
+// Default Document Text Color
 $textColor: #333333
 
-$bodyBackgroundColor: #FFFFFF
-$applicationBackgroundColor: #F2F2F2
+// Default Background Color
+$bodyBackgroundColor: #F2F2F2
 
-$baseUIBoxBackground: #7FCF42
-$baseUIBackground: #FFFFFF
-$baseSidebarBackgroundColor: #3D3D3D
-$baseHeaderBackground: #7CCF42
+// Default Application Background Color - (For responsive/embed/boxed)
+$applicationBackgroundColor: #ECECEC
 
-$desktopSidebarWidth: 256px
-$mobileSidebarWidth: 256px
+// Responsive Box - Default Header Background Color
+$baseUIBoxHeaderBackgroundColor: #FFFFFF
+// Responsive Box - Default Header Line Color
+$baseUIBoxHeaderLineColor: #DDD
+// Responsive Box - Default Header Title Color
+$baseUIBoxHeaderTitleColor: #333
 
-$toolbarHeight: 44px
+// Responsive Box - Default Background Color
+$baseUIBoxBackgroundColor: #FFFFFF
 
-$applicationBackgroundHighlightColor: lighten( $baseUIBoxBackground, 10 )
+// Responsive Box - Default Sidebar Background Color
+$baseUIBoxSidebarBackgroundColor: #FFFFFF
 
-$baseUIBackground_lighten: lighten( $baseUIBackground, 10 )
-$baseUIBackground_darken: darken( $baseUIBackground, 10 )
-$baseUIBackground_highlight: lighten( $baseUIBackground, 50 )
-$baseUIBackground_shadow: darken( $baseUIBackground, 50 )
+// Responsive Box - Default Page Background Color
+$baseUIBoxPageBackgroundColor: #ECECEC
 
-$secondaryUIBackground: darken( $baseUIBackground, 3 )
-$secondaryUIBackground_lighten: lighten( $secondaryUIBackground, 10 )
-$secondaryUIBackground_darken: darken( $secondaryUIBackground, 10 )
-$secondaryUIBackground_highlight: lighten( $secondaryUIBackground, 50 )
-$secondaryUIBackground_shadow: darken( $secondaryUIBackground, 50 )
+// $applicationBackgroundHighlightColor: lighten( $baseUIBoxBackground, 10 )
+// $baseUIBackground_lighten: lighten( $baseUIBackground, 10 )
+// $baseUIBackground_darken: darken( $baseUIBackground, 10 )
+// $baseUIBackground_highlight: lighten( $baseUIBackground, 50 )
+// $baseUIBackground_shadow: darken( $baseUIBackground, 50 )
 
-$baseHeaderBackground_lighten: lighten(   $baseHeaderBackground, 10 )
-$baseHeaderBackground_darken: darken(     $baseHeaderBackground, 10 )
-$baseHeaderBackground_highlight: lighten( $baseHeaderBackground, 50 )
-$baseHeaderBackground_shadow: darken(     $baseHeaderBackground, 50 )
+// $secondaryUIBackground: darken( $baseUIBackground, 3 )
+// $secondaryUIBackground_lighten: lighten( $secondaryUIBackground, 10 )
+// $secondaryUIBackground_darken: darken( $secondaryUIBackground, 10 )
+// $secondaryUIBackground_highlight: lighten( $secondaryUIBackground, 50 )
+// $secondaryUIBackground_shadow: darken( $secondaryUIBackground, 50 )
 
-$headingFontWeight: bold
-$headingFontColor: #000000
+// $white: #FFFFFF
+// $gray: #999999
+// $red: #b94a48
+// $yellow: #f89406
+// $green: #468847
+// $blue: #3a87ad
+
+// $redText: #b94a48
+// $redBackground: #f2dede
+// $redBorder: darken(adjust-hue($redBackground, -10), 3%)
+
+// $yellowText: #c09853
+// $yellowBackground: #fcf8e3
+// $yellowBorder: darken(adjust-hue($yellowBackground, -10), 3%)
+
+// $greenText: #468847
+// $greenBackground: #dff0d8
+// $greenBorder: darken(adjust-hue($greenBackground, -10), 3%)
+
+// $blueText: #3a87ad
+// $blueBackground: #d9edf7
+// $blueBorder: darken(adjust-hue($blueBackground, -10), 3%)
 
-$white: #FFFFFF
-$gray: #999999
-$red: #b94a48
-$yellow: #f89406
-$green: #468847
-$blue: #3a87ad
-
-$redText: #b94a48
-$redBackground: #f2dede
-$redBorder: darken(adjust-hue($redBackground, -10), 3%)
-
-$yellowText: #c09853
-$yellowBackground: #fcf8e3
-$yellowBorder: darken(adjust-hue($yellowBackground, -10), 3%)
-
-$greenText: #468847
-$greenBackground: #dff0d8
-$greenBorder: darken(adjust-hue($greenBackground, -10), 3%)
-
-$blueText: #3a87ad
-$blueBackground: #d9edf7
-$blueBorder: darken(adjust-hue($blueBackground, -10), 3%)
-
-$baseUIInsetColor: #D6D6D6
-$baseUIColor: #6AC13C
-$baseUIShadowColor: rgba(0,0,0,0.25)
-$baseUILighterShadowColor: rgba(0,0,0,0.15)