iugu-ux 0.9.5 → 0.9.8

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

@@ -1,971 +1,20 @@
-@import "compass/utilities/general/clearfix"
-@import "compass/css3"
-@import "variables"
-@import "mixins"
-@import "adaptative-mixins"
-@import "sprite-mixins"
+@charset "UTF-8"
 
-$button_family: "Myriad Pro", "Helvetica", "Arial", "sans", "sans-serif"
-$buttonShadowColor: rgba(0,0,0,0.25)
-$uiElementInternalSpacing: 14px
-$uiElementBaseHeight: 40px
-$uiElementBaseFontSize: 13px
-$uiElementBasePlaceHolderColor: #999
-$uiElementBaseColor: #7ccf42
+// @import "reset"
+@import "components/view"
 
-// ooooooooooooooooooooooooooooooo
-//  1. Button
-// ooooooooooooooooooooooooooooooo
-.iugu-ui
-  .button,.button:visited
-    cursor: pointer
-    display: inline-block
-    @include border-radius(4px)
-    background-color: #fcfcfc
-    @include filter-gradient(#fcfcfc, #f2f2f2, vertical)
-    @include background-image(linear-gradient(top, #fcfcfc 0%,#f2f2f2 100%))
-    color: #585858
-    @include text-shadow( rgba(255,255,255,1) -1px -1px 0px )
-    padding: $uiElementInternalSpacing
-    height: 41px
-    font-size: 13px
-    line-height: 16px
-    text-decoration: none
-    text-align: center
-    font-family: $button_family
-    font-weight: 600
-    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
-    @include box-shadow(  rgba(255,255,255,0.25 ) 1px 1px 0px 0px inset, $buttonShadowColor -1px -1px 0px 0px inset, rgba(0,0,0,0.10) 0px 0px 0px 1px )
-    vertical-align: top
-    @include box-mode
-    margin-bottom: $baseElementSpacing
-    overflow: hidden
-    &.align-left
-      text-align: left
-    &.align-center
-      text-align: center
-    &.align-right
-      text-align: right
-    *
-      float: left
-      margin-right: $uiElementInternalSpacing
-      display: block
-      &.no-space
-        margin-right: 0px !important
-    &.default
-      @include text-shadow( rgba(0,0,0,0.25) 1px 1px 0px )
-      background-color: #7ccf42
-      @include filter-gradient(#7ccf42, #6cb53a, vertical)
-      @include background-image(linear-gradient(top, #7ccf42 0%,#6cb53a 100%))
-      color: #FFF
-    &.warning
-      @include text-shadow( rgba(0,0,0,0.25) 1px 1px 0px )
-      background-color: #D23F3F
-      @include filter-gradient(#D23F3F, #B93737, vertical)
-      @include background-image(linear-gradient(top, #D23F3F 0%,#B93737 100%))
-      color: #FFF
-    &.disabled,&.default.disabled
-      @include border-radius(4px)
-      background-color: #fcfcfc !important
-      @include filter-gradient(#fcfcfc, #f2f2f2, vertical)
-      @include background-image(linear-gradient(top, #fcfcfc 0%,#f2f2f2 100%))
-      color: #cccccc
-      @include text-shadow( rgba(255,255,255,1) -1px -1px 0px )
-      @include box-shadow(  rgba(255,255,255,0.25 ) 1px 1px 0px 0px inset, $buttonShadowColor -1px -1px 0px 0px inset, rgba(0,0,0,0.10) 0px 0px 0px 1px !important )
-      div
-        @include opacity(0.5)
-    &.no-space
-      margin-bottom: 0px !important
+@import "components/container"
+@import "components/group"
+@import "components/responsive_box"
+@import "components/popup"
 
-.desktop
-  .iugu-ui
-    .button
-      &.default
-        &:hover
-          @include box-shadow(  rgba(255,255,255,0.25 ) 1px 1px 0px 0px inset, $buttonShadowColor -1px -1px 0px 0px inset, rgba(0,0,0,0.10) 0px 0px 0px 1px, rgba(255,190,75,0.45) 0px 0px 5px 4px inset )
+@import "components/input"
+@import "components/combobox"
+@import "components/checkbox"
+@import "components/radio"
 
-.desktop,.mobile
-  .iugu-ui
-    .button,.button.default
-      &.active,&.selected
-        @include box-shadow(  rgba(255,255,255,0.25 ) -1px -1px 0px 0px inset, $buttonShadowColor 1px 1px 0px 0px inset, rgba(0,0,0,0.10) 0px 0px 0px 1px )
+@import "components/button"
+@import "components/notice"
+@import "components/badge"
 
-.mobile
-  .iugu-ui
-    .button
-      line-height: 13px
-
-.iugu-ui
-  button.button
-    line-height: 15px
-
-.ios
-  .iugu-ui
-    .button
-      line-height: 12px
-
-.iugu-ui
-  .button-group
-    @include pie-clearfix
-    .button
-      float: left
-      min-width: 40px
-    .button:not(:first-child):not(:last-child)
-      @include border-radius(0px)
-    .button:first-child:not(:last-child)
-      @include border-top-right-radius(0px)
-      @include border-bottom-right-radius(0px)
-    .button:last-child:not(:first-child)
-      @include border-top-left-radius(0px)
-      @include border-bottom-left-radius(0px)
-    &.no-bottom-margin
-      .button
-        margin-bottom: 0px
-
-.ie
-  .iugu-ui
-    .button
-      @include border-radius(0px)
-
-// ooooooooooooooooooooooooooooooo
-//  2. Input
-// ooooooooooooooooooooooooooooooo
-.iugu-ui
-  input[type="text"],input.string,input.password
-    border: none
-    padding-left: $uiElementInternalSpacing - 2px
-    padding-right: $uiElementInternalSpacing - 2px
-    height: $uiElementBaseHeight
-    padding-top: 3px
-    font-size: $uiElementBaseFontSize + 1px
-    -webkit-appearance: none
-    -webkit-tap-highlight-color: rgba(0,0,0,0)
-    -webkit-touch-callout: none
-    outline: none
-    @include box-mode
-    @include border-radius(4px)
-    @include box-shadow(  rgba(255,255,255,0.25 ) -1px -1px 0px 0px inset, $buttonShadowColor 1px 1px 0px 0px inset, rgba(0,0,0,0.10) 0px 0px 0px 1px )
-    margin-bottom: $baseLineSpacing
-
-    &.failure
-      background: #FFF5F5
-      padding-left: $uiElementInternalSpacing - 4px
-      padding-right: $uiElementInternalSpacing - 4px
-      border: 2px solid #DC4B4B
-      @include box-shadow( none )
-    &.success
-      padding-left: $uiElementInternalSpacing - 4px
-      padding-right: $uiElementInternalSpacing - 4px
-      border: 2px solid #57B436
-      @include box-shadow( none )
-
-  .field_with_errors
-    input[type="text"],input.string,input.password
-      background: #FFF5F5
-      padding-left: $uiElementInternalSpacing - 4px
-      padding-right: $uiElementInternalSpacing - 4px
-      border: 2px solid #DC4B4B
-      @include box-shadow( none )
-
-    span.error
-      display: block
-      padding: 2px
-      padding-top: 0px
-      padding-bottom: 4px
-      font-size: 12px
-      color: #DC4B4B
-
-  .field_with_no_errors
-    input[type="text"],input.string,input.password
-      padding-left: $uiElementInternalSpacing - 4px
-      padding-right: $uiElementInternalSpacing - 4px
-      border: 2px solid #57B436
-      @include box-shadow( none )
-
-
-  input.string::-webkit-input-placeholder
-    color: $uiElementBasePlaceHolderColor
-    font-weight: normal
-  input.string:-moz-placeholder
-    color: $uiElementBasePlaceHolderColor
-    font-weight: normal
-  input.string:-ms-input-placeholder
-    color: $uiElementBasePlaceHolderColor
-    font-weight: normal
- 
-    // @include box-shadow(  rgba(255,255,255,0.25 ) 1px 1px 0px 0px inset, $buttonShadowColor -1px -1px 0px 0px inset, rgba(0,0,0,0.04) 0px 0px 0px 1px )
-
-.ie
-  .iugu-ui
-    input[type="text"]
-      @include border-radius(0px)
-
-.iugu-ui
-  .ui-slider .ui-slider-handle
-    position: absolute
-    z-index: 2
-
-  .ui-slider
-    position: relative
-    text-align: left
-    background: $baseUIInsetColor
-    @include border-radius( 5px )
-    @include box-shadow(  $baseUILighterShadowColor 1px 1px 0px 0px inset )
-
-    .ui-slider-handle,.ui-slider-handle:active
-      padding: 12px
-      cursor: pointer
-
-      .ui-slider-handle-visual
-        background: $baseUIColor
-        width: 10px
-        height: 10px
-        border: 6px solid #fff
-        +border-radius( 11px )
-        @include box-shadow(  rgba(255,255,255,0.25 ) 1px 1px 0px 0px inset, $buttonShadowColor -1px -1px 0px 0px inset, rgba(0,0,0,0.15) 1px 1px 0px 0px )
-        outline: 0
-
-    .ui-slider-range
-      position: absolute
-      z-index: 1
-      font-size: .7em
-      display: block
-      border: 0
-      background-position: 0 0
-      background: $baseUIColor
-      @include box-shadow(  rgba(255,255,255,0.25 ) -1px -1px 0px 0px inset, $buttonShadowColor 1px 1px 0px 0px inset )
-
-  .ui-slider-horizontal
-    height: 6px
-    margin-top: 12px
-    margin-bottom: 12px
-    margin-left: 11px
-    margin-right: 11px
-    .ui-slider-handle
-      top: -21px
-      margin-left: -22px
-    .ui-slider-range
-      top: 0
-      height: 100%
-    .ui-slider-range-min
-      left: 0
-    .ui-slider-range-max
-      right: 0
-
-  .ui-slider-vertical
-    width: 6px
-    .ui-slider-handle
-      margin-bottom: -22px
-      left: -20px
-    .ui-slider-range
-      width: 6px
-
-.ie
-  .iugu-ui
-    .ui-slider
-      +border-radius( 0px )
-
-
-// ooooooooooooooooooooooooooooooo
-//  XX. Selectors
-// ooooooooooooooooooooooooooooooo
-.ui-selector-input-hidden
-  display: none
-.ui-selector-input-visible
-  display: block
-.iugu-ui
-  .ui-selector-floating-title
-    position: relative
-    span
-      position: absolute
-      top: $uiElementInternalSpacing
-      left: $uiElementInternalSpacing
-      z-index: 10
-      color: $uiElementBasePlaceHolderColor
-      font-size: 13px
-      line-height: 16px
-.iugu-ui
-  .ui-selector.date.dw-inline
-    .dwwc
-      margin-top: 20px
-      padding-top: 6px
-      border-top: 2px solid $uiElementBasePlaceHolderColor
-    .dw
-      color: lighten($uiElementBasePlaceHolderColor, 10%)
-  .ui-selector
-    position: relative
-    .dw
-      @include border-radius(4px)
-      background-color: #fcfcfc
-      @include filter-gradient(#fcfcfc, #f2f2f2, vertical)
-      @include background-image(linear-gradient(top, #fcfcfc 0%,#f2f2f2 100%))
-      color: $uiElementBasePlaceHolderColor
-      @include text-shadow( rgba(255,255,255,1) -1px -1px 0px )
-      padding: $uiElementInternalSpacing
-      padding-left: $uiElementInternalSpacing - 4px
-      padding-right: $uiElementInternalSpacing - 4px
-      font-size: 13px
-      line-height: 16px
-      text-decoration: none
-      text-align: center
-      font-family: $button_family
-      font-weight: 600
-      border-width: 0px
-      margin: 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
-      @include box-shadow(  rgba(255,255,255,0.25 ) 1px 1px 0px 0px inset, $buttonShadowColor -1px -1px 0px 0px inset, rgba(0,0,0,0.10) 0px 0px 0px 1px )
-      vertical-align: top
-      @include box-mode
-      margin-bottom: $baseLineSpacing
-      overflow: hidden
-
-    table
-      border: none
-      padding: 0px
-      margin: 0px
-      +border-radius( 0px )
-      td
-        padding: 0px
-        padding-left: 4px
-        padding-right: 4px
-        margin: 0px
-        border: 0px
-        ul
-          list-style: none
-          margin: 0px
-          padding: 0px
-          margin-left: 10px
-          margin-right: 10px
-          li
-            margin: 0px
-            padding: 0px
-            text-transform: uppercase
-            color: #585858
-            
-
-    .hidden
-      display: none
-
-    .dwwol
-      border: 2px solid $baseUIColor
-      +border-radius(8px)
-      display: block
-      height: 36px
-      margin-top: -21px
-      width: 100%
-      position: absolute
-      top: 50%
-      left: -2px
-    .dwl
-      position: absolute
-      top: -20px
-      left: 0px
-      z-index: 4
-      background: #fcfcfc
-    .dwwl
-      position: relative
-    .dww
-      overflow: hidden
-      position: relative
-      margin-top: 20px
-    .dwwo
-      display: block
-      height: 100%
-      left: 0
-      position: absolute
-      top: 0
-      width: 100%
-      z-index: 3
-
-
-      +background( linear-gradient( #fcfcfc 10px, rgba(245, 245, 245, 0) 41%, rgba(245, 245, 245, 0) 41%, #f2f2f2 100%) )
-
-
-// ooooooooooooooooooooooooooooooo
-//  XX. Notice
-// ooooooooooooooooooooooooooooooo
-.iugu-ui
-  .borderless,.close
-    font-size: 20px
-    font-weight: bold
-    line-height: 20px
-    color: #000
-    +text-shadow(0 1px 0 rgba(255,255,255,1))
-    +opacity(0.2)
-    padding: 0px
-    margin: 0px
-    margin-top: -5px
-    cursor: pointer
-    background: transparent
-    border: 0
-    -webkit-appearance: none
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
-    &:hover
-      color: #000
-      text-decoration: none
-      cursor: pointer
-      +opacity(0.4)
-
-  .notice .borderless, .notice .close
-    float: right
-    position: relative
-    top: 0px
-    right: -25px
-    line-height: 18px
-
-  .notice .close
-    padding: 10px 10px 20px 20px
-    right: -40px
-    top: -15px
-
-  .notice
-    font-size: $baseFontSize * 0.85714
-    line-height: ($baseFontSize * 0.85714)
-    padding: 10px
-    padding-right: 35px
-    margin-bottom: $baseElementSpacing
-    +text-shadow( 0 1px 0 rgba(255,255,255,.5) )
-    +border-radius( 5px )
-    border: 4px solid $yellowBorder
-    background-color: lighten($yellowBackground,5%)
-    color: #919191
-    .notice-heading
-      color: $yellowText
-    p,h1,h2,h3,h4,h5,h6
-      margin: 0px
-      padding: 0px
-    ul
-      margin-bottom: 0px
-      padding-top: 0px
-      padding-bottom: 0px
-      margin-top: $baseLineSpacing
-    ul ul
-      margin-top: 0px
-    ul li
-      line-height: $baseElementSpacing
-      padding-top: 0px
-      padding-bottom: 0px
-    &.notice-red
-      border-color: $redBorder
-      background-color: lighten($redBackground,5%)
-      .notice-heading
-        color: $redText
-    &.notice-green
-      border-color: $greenBorder
-      background-color: lighten($greenBackground,5%)
-      .notice-heading
-        color: $greenText
-    &.notice-blue
-      border-color: $blueBorder
-      background-color: lighten($blueBackground,5%)
-      .notice-heading
-        color: $blueText
-
-// ooooooooooooooooooooooooooooooo
-//  1. Tag
-// ooooooooooooooooooooooooooooooo
-$tag_size: 0.70
-.iugu-ui
-  .tag
-    font-size: $baseFontSize * $tag_size
-    font-weight: bold
-    line-height: ($baseFontSize * $tag_size) + $baseLineSpacing
-    white-space: nowrap
-    background-color: $gray
-    color: #FFF
-    padding: 3px
-    padding-top: 5px
-    +border-radius( 2px )
-    +text-shadow(0px -1px 0px rgba(0,0,0,0.25))
-    text-transform: uppercase
-  .dl-horizontal
-    .tag
-      line-height: ($baseFontSize * $tag_size)
-
-.chrome,.safari
-  .iugu-ui
-    .tag
-      padding-top: 3px
-      padding-bottom: 4px
-    .dl-horizontal
-      .tag
-        padding-top: 4px
-        padding-bottom: 3px
-
-// ooooooooooooooooooooooooooooooo
-//  2. Badge
-// ooooooooooooooooooooooooooooooo
-.iugu-ui
-  $badge_size: 0.70
-  .badge
-    font-size: $baseFontSize * $badge_size
-    font-weight: bold
-    line-height: ($baseFontSize * $badge_size) + $baseLineSpacing
-    white-space: nowrap
-    background-color: $gray
-    color: #FFF
-    padding: 3px
-    +border-radius( $baseFontSize )
-    +text-shadow(0px -1px 0px rgba(0,0,0,0.25))
-    min-width: $baseFontSize
-    text-align: center
-    display: inline-block
-
-.firefox
-  .iugu-ui
-    .badge
-      padding-top: 4px
-      padding-bottom: 2px
-
-// ooooooooooooooooooooooooooooooo
-//  Common to Label and Badge
-// ooooooooooooooooooooooooooooooo
-.iugu-ui
-  .badge,.tag
-    &.red
-      background-color: $red
-    &.yellow
-      background-color: $yellow
-    &.green
-      background-color: $green
-    &.blue
-      background-color: $blue
-
-// ooooooooooooooooooooooooooooooo
-//  3. Progress Bar
-// ooooooooooooooooooooooooooooooo
-.iugu-ui
-  .progress
-    overflow: hidden
-    height: 18px
-    margin-bottom: $baseElementSpacing
-    +box-shadow( inset 0 1px 2px rgba(0,0,0,.1) )
-    +border-radius( 9px )
-    +background( linear-gradient( #f5f5f5, #f9f9f9 ) )
-    .bar
-      width: 0%
-      height: 18px
-      color: #FFF
-      font-size: 12px
-      line-height: 18px
-      text-align: center
-      +text-shadow( 0 -1px 0 rgba(0,0,0,.25) )
-      +background( linear-gradient( #149bdf, #0480be ) )
-      +box-mode
-      +transition(width .6s ease)
-
-// ooooooooooooooooooooooooooooooo
-//  4. Container
-// ooooooooooooooooooooooooooooooo
-.iugu-ui
-  .container
-    background: $white
-    +border-radius(5px)
-    +box-mode
-    padding: 20px
-    +box-shadow( 1px 1px 1px rgba(0, 0, 0, 0.10) )
-    // -1px 2px 2px rgba(0, 0, 0, 0.05) )
-    margin-bottom: $baseElementSpacing
-    > .container
-      border: 1px solid $baseLineColor
-      +box-shadow( -1px -1px rgba( 0,0,0, 0.3 ) )
-    &.no-padding
-      padding: 0px
-    &.small-padding
-      padding: 10px
-    .padding
-      padding: 20px
-      position: relative
-    .header
-      border-bottom: 1px solid $baseLineColor
-      padding: 8px
-    .footer
-      border-top: 1px solid $baseLineColor
-      padding: 8px
-
-// ooooooooooooooooooooooooooooooo
-//  5. Tabbed Container
-// ooooooooooooooooooooooooooooooo
-.iugu-ui
-  .tabbed
-    +box-shadow( 1px 1px 1px rgba(0, 0, 0, 0.10) )
-    +border-radius(5px)
-    background: darken( $white, 15% )
-    .nav
-      @extend .auto-clear
-      margin: 0px !important
-      padding: 0px
-      height: auto !important
-      &:after
-        margin-bottom: 0px
-      > li
-        @extend .floating-left
-        display: block
-        list-style: none
-        margin: 0px
-        padding: 0px
-        background: darken( $white, 15% )
-        text-align: center
-        font-size: 18px
-        line-height: 20px
-        font-weight: bold
-        cursor: pointer
-        color: lighten( $textColor, 50% ) 
-        +box-mode()
-        overflow: hidden
-        [class^="icon-"],[class*=" icon-"]
-          vertical-align: baseline
-          +opacity( 0.30 )
-      > li:first-child
-        +border-radius( 5px 0px 0px 0px )
-      > li:last-child
-        +border-radius( 0px 5px 0px 0px )
-      > li.active,li.active:hover
-        +text-shadow(-1px -1px 0 rgba(0,0,0,0.1))
-        color: lighten( $textColor, 40% ) 
-        background: $white
-        [class^="icon-"],[class*=" icon-"]
-          +opacity( 1 )
-      > li:hover
-        background: darken( $white, 10% ) 
-        [class^="icon-"],[class*=" icon-"]
-          +opacity( 0.4 )
-      > li > a, > li > a:visited, li > a:hover
-        text-decoration: none
-        color: inherit
-        display: block
-        width: 100%
-        padding: 15px
-        height: auto
-        overflow: hidden
-        +box-mode()
-        white-space: nowrap
-        &.no-padding
-          padding: 0px
-        span
-          display: block
-          overflow: hidden
-          margin: 15px
-
-    > .container
-      +border-radius( 0px 0px 5px 5px )
-      +box-shadow( none )
-    .tabbed
-      border: 1px solid $baseLineColor
-      +box-shadow( none )
-      > ul.nav li
-        +box-shadow( none )
-        font-size: 16px
-        line-height: 16px
-      > .container
-        +box-shadow( none )
-
-
-
-// ooooooooooooooooooooooooooooooo
-//  XXX. UI Responsive Box
-// ooooooooooooooooooooooooooooooo
-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: $baseUIBoxBackground !important
-
-
-.ui-responsive-box
-  @include pie-clearfix
-  background: $baseUIBackground
-  width: 100%
-  margin-left: auto
-  margin-right: auto
-  position: relative
-  color: #666
-  height: 100%
-  @include box-sizing( border-box )
-  border-left: 1px solid $baseUIBackground_highlight
-  border-top: 1px solid $baseUIBackground_highlight
-  border-right: 1px solid $baseUIBackground
-  border-bottom: 1px solid $baseUIBackground
-
-  .sidebar
-    float: left
-    width: $desktopSidebarWidth 
-    height: 100%
-    background: $secondaryUIBackground
-    border-right: 1px solid $secondaryUIBackground_darken
-    padding: 20px
-    @include box-sizing( border-box )
-    position: relative
-
-  .content-area
-    height: 100%
-    position: relative
-    @include background( #FFF top linear-gradient( lighten($baseUIBackground, 3) 44px, $baseUIBackground ) )
-
-    @include box-sizing( border-box )
-    .small-navigation
-      display: none
-    
-    &.handle-sidebar
-      border-left: 1px solid $secondaryUIBackground_lighten
-      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: 1px
-    bottom: 1px
-    left: 2px
-    right: 1px
-
-@include for-large-screens(1025px)
-  body.ui-box-background
-    padding: 20px
-    @include background-image( radial-gradient(top center, circle, $applicationBackgroundHighlightColor 0px, rgba($applicationBackgroundHighlightColor,0) 300px) ,linear-gradient(bottom, $applicationBackgroundHighlightColor 30%,$applicationBackgroundHighlightColor 70%) )
-  .ui-responsive-box
-    max-width: 980px
-    @include box-shadow( rgba(0,0,0,0.54) 0px 0px 2px, rgba(0,0,0,0.25) 0px 0px 20px )
-    border: 1px solid #FF0000, 2px solid #00FFFF
-    @include border-radius( 4px, 4px )
-
-@include for-small-screens(680px)
-  body.ui-box-background
-    background: $baseSidebarBackgroundColor !important
-
-  .mobile
-    .ui-responsive-box
-      .content-area.handle-sidebar
-        +translateZ(0px)
-    .handle-scrolling
-      overflow-y: scroll
-
-  .ui-responsive-box
-    border: none
-    background: $baseSidebarBackgroundColor
-
-    .sidebar
-      float: none
-      position: absolute
-      z-index: 1000
-      width: $mobileSidebarWidth
-      border: none
-      background: $baseSidebarBackgroundColor
-      visibility: hidden
-
-      @include transition-delay( 1.5s )
-
-    .content-area.handle-sidebar
-      margin-left: 0px
-      border-left: none
-      z-index: 2000
-      min-width: 320px
-
-      @include transition-property( transform )
-      @include transition-duration( 300ms )
-      @include transition-timing-function( cubic-bezier(0.39, 0.575, 0.565, 1) )
-
-    .content-area
-      @include background( #FFF top linear-gradient( lighten($baseUIBackground, 3) 44px, $baseUIBackground ) )
-      @include box-shadow( rgba(0,0,0,0.54) 0px 0px 2px, rgba(0,0,0,0.8) 0px 0px 15px )
-      border-left: 1px solid $baseUIBackground_highlight
-      border-top: 1px solid $baseUIBackground_highlight
-      border-right: 1px solid $baseUIBackground
-      border-bottom: 1px solid $baseUIBackground
-      @include border-radius( 4px, 4px )
-
-
-      &.handle-sidebar
-        .small-navigation
-          display: block
-          height: $toolbarHeight
-          position: relative
-          background: $baseHeaderBackground
-          @include background( top, linear-gradient( $baseHeaderBackground 22px, $baseHeaderBackground_darken ) )
-
-          margin-top: -1px
-          margin-right: -2px
-
-          @include border-radius( 4px 4px 0px 0px )
-          border-left: 1px solid $baseHeaderBackground_lighten
-          border-top: 1px solid $baseHeaderBackground_lighten
-          border-right: 1px solid $baseHeaderBackground
-          border-bottom: 1px solid $baseHeaderBackground_shadow
-          
-          .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: #FFF
-            @include box-mode
-            left: 60px
-            right: 60px
-            font-weight: bold
-            @include text-shadow( rgba(0,0,0,0.25) -1px -1px 0px )
-
-  .content-area
-    .content
-      top: 48px
-
-  .desktop .open, .mobile .open
-    border: none
-    .content-area.handle-sidebar
-      +translateX( $mobileSidebarWidth )
-
-    .sidebar
-      display: block
-      visibility: visible
-      margin: 1px
-
-      @include transition-property( border )
-      @include transition-delay( 0.3s )
-
-  .deprecated_android
-    .content-area
-      background: #FFF
-    *
-      @include border-radius(0px !important)
-    input[type="text"],input.string,input.password,.button
-      border: 1px solid #CCC !important
-      @include box-shadow( none !important ) 
-
-// ooooooooooooooooooooooooooooooo
-//  ??. DataSet 
-// ooooooooooooooooooooooooooooooo
-.dataset
-  table.table
-    overflow: visible
-    th
-      .row-container
-        cursor: pointer
-        .icon
-          position: absolute
-          right: 3px
-          top: 5px
-    td,th
-      overflow: visible
-      padding: 0px
-      .row-container
-        width: 100%
-        height: 44px
-        position: relative
-        .row-data
-          padding: 0px
-          display: block
-          position: absolute
-          top: 12px
-          line-height: 100%
-          left: 12px
-          bottom: 12px
-          right: 12px
-          overflow: hidden
-          font-size: 13px
-          line-height: 22px
-        
-    thead
-      tr
-        th
-          color: #FFF
-          background: $uiElementBaseColor
-
-@include for-small-screens(680px)
-  .dataset
-    table.table
-      thead
-        tr
-          th
-            background: none
-            color: #333
-      th,td
-        .row-container
-          .row-data
-            font-size: 12px
-            line-height: 22px
-
-// ooooooooooooooooooooooooooooooo
-//  ??. Popup
-// ooooooooooooooooooooooooooooooo
-.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
+@import "iux/components"