kdutify 0.16.9-rc.0

package/src/stylus/components/_pickers.styl

@@ -0,0 +1,66 @@
+@import '../bootstrap'
+@import '../theme'
+
+/* Themes */
+
+picker($material)
+  color: $material.text.primary
+
+  .btn
+    color: $material.text.primary
+
+  .picker__body
+    background: $material.picker.body
+
+  .picker__title
+    background: $material.picker.title
+
+theme(picker, "picker")
+
+.picker
+  border-radius: $card-border-radius
+  display: flex
+  flex-direction: column
+  width: 290px
+
+  .card__row--actions
+    border: none
+    margin-top: -20px
+
+  &__title
+    color: #fff
+    border-top-left-radius: $card-border-radius
+    border-top-right-radius: $card-border-radius
+    height: 105px
+    padding: 16px
+
+  &__body
+    height: 290px
+    overflow: hidden
+    position: relative
+
+  &--landscape
+    flex-direction: row
+    flex-wrap: wrap
+    width: 500px
+
+    .picker__title
+      border-top-right-radius: 0
+      border-bottom-right-radius: 0
+      flex: 0 1 170px
+      width: 170px
+      height: auto
+      position: absolute
+      top: 0
+      left: 0
+      height: 100%
+      z-index: 1
+
+    .picker__body
+      flex: 1 0
+      width: 330px
+      margin-left: 170px
+
+    .card__row--actions
+      margin-left: 170px
+      width: 330px

package/src/stylus/components/_progress-circular.styl

@@ -0,0 +1,58 @@
+@import '../bootstrap'
+
+.progress-circular
+  position: relative
+  display: inline-flex
+
+  &--indeterminate
+    svg
+      animation: $progress-circular-rotate-animation
+      transform-origin: center center
+      width: 100%
+      height: 100%
+      margin: auto
+      position: absolute
+      top: 0
+      bottom: 0
+      left: 0
+      right: 0
+      transition: $process-circular-intermediate-svg-transition
+      z-index: 0
+
+    .progress-circular__overlay
+      animation: $progress-circular-rotate-dash
+      stroke-linecap: round
+      stroke-dasharray: 80,200
+      stroke-dashoffset: 0px
+
+  &__underlay
+    stroke: $progress-circular-underlay-stroke
+    z-index: 1
+
+  &__overlay
+    stroke: currentColor
+    z-index: 2
+    transition: $progress-circular-overlay-transition
+
+  &__info
+    position: absolute
+    top: 50%
+    left: 50%
+    transform: translate3d(-50%, -50%, 0)
+
+  @keyframes progress-circular-dash
+    0%
+      stroke-dasharray: 1,200
+      stroke-dashoffset: 0px
+
+    50%
+      stroke-dasharray: 100,200
+      stroke-dashoffset: -15px
+
+    100%
+      stroke-dasharray: 100,200
+      stroke-dashoffset: -125px
+
+  @keyframes progress-circular-rotate
+    100%
+      transform: rotate(360deg)

package/src/stylus/components/_progress-linear.styl

@@ -0,0 +1,104 @@
+@import '../bootstrap'
+
+.progress-linear
+  background: transparent
+  margin: 1rem 0
+  overflow: hidden
+  width: 100%
+  position: relative
+
+  &__bar
+    width: 100%
+    height: inherit
+    position: relative
+    transition: .3s ease-in
+    z-index: 1
+
+    &__determinate
+      height: inherit
+      transition: .3s ease-in
+
+    &__indeterminate
+      .long, .short
+        height: inherit
+        position: absolute
+        left: 0
+        top: 0
+        bottom: 0
+        will-change: left, right
+        width: auto
+        background-color: inherit
+
+      &--active .long
+        animation: indeterminate
+        animation-duration: 2.2s
+        animation-iteration-count: infinite
+
+      &--active .short
+        animation: indeterminate-short
+        animation-duration: 2.2s
+        animation-iteration-count: infinite
+
+  &__background
+    position: absolute
+    top: 0
+    left: 0
+    bottom: 0
+    transition: .3s ease-in
+
+  &--query
+    .progress-linear__bar__indeterminate
+      &--active .long
+        animation: query
+        animation-duration: 2s
+        animation-iteration-count: infinite
+
+      &--active .short
+        animation: query-short
+        animation-duration: 2s
+        animation-iteration-count: infinite
+
+  @keyframes indeterminate
+    0%
+      left: -90%
+      right: 100%
+    60%
+      left: -90%
+      right: 100%
+    100%
+      left: 100%
+      right: -35%
+
+  @keyframes indeterminate-short
+    0%
+      left: -200%
+      right: 100%
+    60%
+      left: 107%
+      right: -8%
+    100%
+      left: 107%
+      right: -8%
+
+  @keyframes query
+    0%
+      right: -90%
+      left: 100%
+    60%
+      right: -90%
+      left: 100%
+    100%
+      right: 100%
+      left: -35%
+
+  @keyframes query-short
+    0%
+      right: -200%
+      left: 100%
+    60%
+      right: 107%
+      left: -8%
+    100%
+      right: 107%
+      left: -8%
+

package/src/stylus/components/_radio-group.styl

@@ -0,0 +1,23 @@
+@import '../bootstrap'
+@import '../theme'
+
+radiogroup($material)
+  .input-group--selection-controls
+    //
+
+theme(radiogroup, "radio-group")
+
+.radio-group
+  .input-group__details:before, .input-group__details:after
+    display: none
+
+  .input-group
+    padding: 0
+
+  &--column
+    .input-group__input
+      display: block
+
+  &--row
+    .input-group__input
+      flex-direction: row

package/src/stylus/components/_ripples.styl

@@ -0,0 +1,31 @@
+.ripple    
+  &__container
+    color: inherit
+    border-radius: inherit
+    position: absolute
+    width: 100%
+    height: 100%
+    left: 0
+    top: 0
+    overflow: hidden
+    z-index: 0
+    pointer-events: none
+          
+  &__animation
+    color: inherit
+    position: absolute
+    top: 0
+    left: 0
+    border-radius: 50%
+    background: currentColor
+    opacity: 0
+    transition: $ripple-animation-transition
+    pointer-events: none
+    overflow: hidden
+    will-change: opacity
+      
+    &--enter
+      transition: none
+      
+    &--visible
+      opacity: $ripple-animation-visible-opacity

package/src/stylus/components/_select.styl

@@ -0,0 +1,153 @@
+@import '../bootstrap'
+
+.input-group--select
+  // TODO: revisit this
+  .input-group--select__autocomplete
+    display: block
+    height: 0px
+
+    &--index
+      opacity: 0 !important
+
+  .input-group__append-icon
+    transition: .3s $transition.linear-out-slow-in
+
+    &.input-group__icon-clearable
+      transition: none
+
+  &:not(.input-group--dirty),
+  &.input-group--focused
+    .input-group--select__autocomplete
+      padding-bottom: 1px
+      height: 30px
+
+  &.input-group--focused
+    .input-group--select__autocomplete
+      display: inline-block
+      opacity: 1
+
+    .input-group__append-icon:not(.input-group__icon-clearable)
+      transform: rotate(-180deg)
+
+  .input-group__input
+    cursor: pointer
+
+  &.input-group--disabled
+    cursor: default
+    pointer-events: none
+
+.input-group--select
+  .input-group__selections
+    align-items: center
+    display: flex
+    flex-wrap: wrap
+    position: relative
+    width: 100%
+
+    &__comma
+      display: inline-flex
+      font-size: 16px
+      padding: 3px 4px 3px 0
+
+      &--active
+        color: inherit
+
+  .menu
+    display: inline
+
+  .fade-transition-leave-active
+    position: absolute
+    left: 0
+
+  &.input-group--autocomplete.input-group--search-focused
+    .input-group__selections__comma
+      display: none
+
+.input-group--autocomplete
+  .input-group__selections
+    cursor: text
+
+
+.input-group
+  &.input-group--overflow,
+  &.input-group--editable,
+  &.input-group--segmented
+    padding: 0
+
+    .input-group__append-icon
+      padding: 0
+
+    .input-group__selections,
+    input
+      height: 48px
+
+    // Handle weird transition issue
+    .input-group__selections__comma, input
+      top: 0
+      left: 0
+      padding-left: 16px
+
+    .input-group__selections
+      width: calc(100% - 55px)
+
+      .btn
+        border-radius: 0
+        margin: 0
+        height: 48px
+        width: 100%
+
+        .btn__content
+          justify-content: start
+
+    .input-group__input
+      transition: .3s $transition.swing
+
+    &.input-group--focused
+      .input-group__input
+        elevation(8)
+
+    label
+      left: 16px !important
+      top: 9px !important
+
+    .input-group__details
+      &:after
+        display: none
+
+    .input-group__input
+      padding: 0
+
+      &:before
+        content: ''
+        position: absolute
+        left: 0
+        width: 100%
+        height: 1px
+        top: 0
+        transition: .3s $transition.swing
+
+    .input-group__append-icon
+      width: 55px
+
+  &--segmented .input-group__input,
+  &--editable .input-group__input:hover,
+  &.input-group--focused.input-group--editable .input-group__input
+    &:after
+      background-color: rgba(0,0,0,0.12)
+      content: ''
+      position: absolute
+      right: 55px
+      height: 48px
+      top: 0
+      width: 1px
+
+.menu__content--select
+  // // IE11 Fix for overflow
+  .input-group--selection-controls__ripple
+    display: none
+
+.menu__content--autocomplete
+    border-radius: 0
+
+    > .card
+      border-radius: 0

package/src/stylus/components/_selection-controls.styl

@@ -0,0 +1,122 @@
+@import '../bootstrap'
+@import '../theme'
+
+/** Theme */
+selection-control($material)
+  label
+    color: $material.text.primary
+
+  color: $material.selection-controls.active
+
+  .icon--selection-control
+    color: $material.text.secondary
+
+  &.input-group--active
+    .icon--selection-control
+      color: inherit
+
+  &.input-group--disabled
+    .input-group__input
+      color: $material.text.disabled
+
+      .icon--radio,
+      .icon--checkbox
+        color: inherit
+
+theme(selection-control, "input-group--selection-controls")
+
+.input-group--selection-controls.input-group--tab-focused,
+.input-group--tab-focused .input-group:focus
+  .input-group--selection-controls__ripple
+    &:before
+      transform: translate3d(-50%, -50%, 0) scale(1)
+      opacity: $ripple-animation-visible-opacity
+
+/** Input */
+.input-group.input-group--selection-controls
+  display: flex
+  padding: 0
+
+  .icon--selection-control
+    cursor: pointer
+    position: absolute
+    left: 0
+    user-select: none
+    transition: .3s $transition.ease-in-out
+
+  .input-group__details:before, .input-group__details:after
+    display: none
+
+  .input-group__input
+    color: inherit
+    width: 100%
+    position: relative
+
+    // Needed for safari
+    .icon--selection-control
+      align-self: center
+      height: 30px
+      margin: auto
+  
+  &.input-group--error
+    label
+      color: inherit
+
+    .input-group__input
+      .icon--selection-control
+        color: inherit
+
+/** Label */
+.input-group.input-group--selection-controls label
+  pointer-events: inherit
+  cursor: pointer
+  pointer-events: auto
+  position: absolute
+  left: 32px
+  user-select: none
+  z-index: 1
+  pointer-events: all
+
+.input-group--selection-controls__ripple
+  border-radius: 50%
+  height: 48px
+  width: 48px
+  cursor: pointer
+  position: absolute
+  transform: translate3d(-12px, -50%, 0)
+  transform-origin: center center
+  top: 50%
+  left: 0
+
+  &:before
+    content: ''
+    position: absolute
+    width: 36px
+    height: 36px
+    background: currentColor
+    border-radius: 50%
+    left: 50%
+    top: 50%
+    transform: translate3d(-50%, -50%, 0) scale(.3)
+    opacity: 0
+    transition: $ripple-animation-transition
+    transform-origin: center center
+
+/** Appended and prepended icons */
+.input-group--prepend-icon
+  &.input-group--selection-controls
+    .icon--selection-control,
+    .input-group--selection-controls__ripple
+      left: 38px
+      
+    label
+      left: 76px
+      
+.input-group--prepend-icon
+  &.radio-group--row
+    .icon--selection-control,
+    .input-group--selection-controls__ripple
+      left: 14px
+    
+    label
+      left: 52px