kdutify 0.16.9-rc.0

package/src/stylus/components/_expansion-panel.styl

@@ -0,0 +1,85 @@
+@import '../bootstrap'
+@import '../theme'
+
+/** Theme */
+expansion-panel($material)
+  .expansion-panel__container
+    border-top: 1px solid rgba($material.fg-color, $material.divider-percent)
+    background-color: $material.cards
+    color: $material.text.primary
+
+  .icon
+    color: $material.icons.active
+
+  &--focusable
+    .expansion-panel__container
+      &:focus
+        background-color: $material.expansion-panels.focus
+
+theme(expansion-panel, "expansion-panel")
+
+.expansion-panel
+  display: flex
+  flex-wrap: wrap
+  justify-content: center
+  list-style-type: none
+  padding: 0
+  text-align: left
+  width: 100%
+  elevation(2)
+
+  &__container
+    flex: 1 0 100%
+    outline: none
+    transition: .3s $transition.swing
+
+    &:first-child
+      border-top: none !important
+
+    .header__icon
+      margin-left: auto
+      
+      .icon
+        // Edge rendering issue TODO: revisit later
+        transition: none
+
+    &--active
+      > .expansion-panel__header
+        .header__icon .icon
+          transform: rotate(-180deg)
+
+  &__header
+    display: flex
+    cursor: pointer
+    align-items: center
+    position: relative
+    padding: 12px 24px
+
+    > *:not(.header__icon)
+      flex: 1 1 auto
+
+  &__body
+    transition: $primary-transition
+
+    .card
+      border-radius: 0
+      elevation(0)
+
+  &--popout, &--inset
+    elevation(0)
+
+    .expansion-panel__container--active
+      margin: $spacers.three.x
+      elevation(3)
+
+  &--popout, &--inset
+    .expansion-panel__container
+      max-width: 95%
+  
+  &--popout
+    .expansion-panel__container--active
+      max-width: 100%
+
+  &--inset
+    .expansion-panel__container--active
+      max-width: 85%

package/src/stylus/components/_footer.styl

@@ -0,0 +1,40 @@
+@import '../bootstrap'
+@import '../theme'
+
+footer($material)
+  background: $material.app-bar
+  
+theme(footer, "footer")
+
+.footer
+  align-items: center
+  display: flex
+  flex: 0 1 auto !important // Don't let devs break their code
+  min-height: $footer-height
+  transition: .3s $transition.swing
+
+  &--absolute, &--fixed
+    bottom: 0
+    left: 0
+    width: 100%
+    z-index: 3
+
+  &--absolute
+    position: absolute
+
+  &--fixed
+    position: fixed
+
+  > *:first-child
+    margin-left: $grid-gutters.md
+
+  > *:last-child
+    margin-right: $grid-gutters.md
+
+  @media $display-breakpoints.xs-only
+    > *:first-child
+      margin-left: $grid-gutters.lg
+
+    > *:last-child
+      margin-right: $grid-gutters.lg
+

package/src/stylus/components/_grid.styl

@@ -0,0 +1,171 @@
+@import '../bootstrap'
+
+.container
+  flex: 1 1 100%
+  margin: auto
+  padding: $grid-gutters.lg
+  width: 100%
+
+  for size, width in $container-max-widths
+    @media only screen and (min-width: width)
+      max-width: (width * 0.9375) // Credit to bootstrap
+
+  @media $display-breakpoints.xs-only
+    padding: $grid-gutters.xl
+
+  &.fluid
+    max-width: 100%
+    
+  &.fill-height
+    align-items: center
+    display: flex
+    
+    .layout
+      height: 100%
+      flex: 1 1 auto
+
+  &.grid-list
+    for $size, $gutter in $grid-gutters
+      &-{$size}
+        padding: $gutter
+
+        .layout
+          .flex
+            padding: ($gutter / 2)
+            
+        .layout:only-child
+          margin: -($gutter / 2)
+
+        .layout:not(:only-child)
+          margin: auto -($gutter / 2)
+        
+        *:not(:only-child)
+          .layout:first-child
+            margin-top: -($gutter / 2)
+
+          .layout:last-child
+            margin-bottom: -($gutter / 2)
+
+.layout
+  display: flex
+  flex: 1 1 auto
+  flex-wrap: nowrap
+
+  &.row
+    flex-direction: row
+
+    &.reverse
+      flex-direction: row-reverse
+
+  &.column
+    flex-direction: column
+
+    &.reverse
+      flex-direction: column-reverse
+
+  &.wrap
+    flex-wrap: wrap
+
+for size, width in $grid-breakpoints
+  @media all and (min-width: width)
+    for n in (1..$grid-columns)
+      .flex.{size}{n}
+        flex-basis: (n / $grid-columns * 100)%
+        max-width: (n / $grid-columns * 100)%
+
+      .flex.order-{size}{n}
+        order: n
+
+    for n in (0..$grid-columns)
+      .flex.offset-{size}{n}
+        margin-left: (n / $grid-columns * 100)%
+
+.flex,
+.child-flex > *
+  flex: 1 1 auto
+
+.align
+  &-start
+    align-items: flex-start
+
+  &-end
+    align-items: flex-end
+
+  &-center
+    align-items: center
+
+  &-baseline
+    align-items: baseline
+    
+.align-content
+  &-start
+    align-content: flex-start
+
+  &-end
+    align-content: flex-end
+
+  &-center
+    align-content: center
+
+  &-space-between
+    align-content: space-between
+
+  &-space-around
+    align-content: space-around
+
+.justify
+  &-start
+    justify-content: flex-start
+
+  &-end
+    justify-content: flex-end
+
+  &-center
+    justify-content: center
+
+  &-space-around
+    justify-content: space-around
+
+  &-space-between
+    justify-content: space-between
+
+.spacer
+  flex-grow: 1 !important
+
+.scroll-y
+  overflow-y: auto
+
+.fill-height
+  height: 100%
+
+.hide-overflow
+  overflow: hidden !important
+
+.show-overflow
+  overflow: visible !important
+
+.no-wrap
+  white-space: nowrap
+  
+.ellipsis
+  white-space: nowrap
+  overflow: hidden
+  text-overflow: ellipsis
+  
+// Display helpers
+.d-flex
+  display: flex
+    
+.d-inline-flex
+  display: inline-flex
+  
+.d-flex,
+.d-inline-flex
+  > *
+    flex: 1 1 auto
+    
+.d-block
+  display: block
+  
+.d-inline-block
+  display: inline-block

package/src/stylus/components/_icons.styl

@@ -0,0 +1,32 @@
+@import '../bootstrap'
+@import '../theme'
+
+/* Themes */
+icon($material)
+  color: $material.icons.active
+
+  &.icon--disabled
+    color: $material.icons.inactive !important
+
+theme(icon, "icon")
+
+.icon
+  align-items: center
+  display: inline-flex
+  font-size: 24px
+  justify-content: center
+  line-height: 1
+  transition: $primary-transition
+  vertical-align: middle
+
+  &.icon--large
+    font-size: 2.5rem
+
+  &.icon--medium
+    font-size: 2rem
+
+  &.icon--x-large
+    font-size: 3rem
+
+  &.icon--disabled
+    cursor: default

package/src/stylus/components/_input-groups.styl

@@ -0,0 +1,310 @@
+@import '../bootstrap'
+@import '../theme'
+
+/* Theme */
+input-group($material)
+  input,
+  textarea
+    color: $material.text.primary
+
+    &:disabled
+      color: $material.text.disabled
+
+  &:not(.input-group--error) .input-group__messages
+    color: $material.text.secondary
+
+  &.input-group--textarea:not(.input-group--full-width)
+    .input-group__input
+      border: 2px solid $material.text.secondary
+
+  // This is specific for selects
+  &.input-group--dirty
+    .input-group__selections__comma
+      &:not(.input-group__selections__comma--active)
+        color: $material.text.primary
+
+  &:not(.input-group--error)
+    label
+      color: $material.text.secondary
+
+    &.input-group--disabled
+      label,
+      .input-group__selections__comma
+        color: $material.text.disabled
+
+    .input-group__details:before
+      background-color: $material.input-bottom-line
+
+    &:not(.input-group--focused):not(.input-group--disabled)
+      .input-group__input
+        .input-group__append-icon,
+        .input-group__prepend-icon
+          &:not(:hover)
+            color: $material.text.secondary
+
+      &:not(.input-group--disabled):not(.input-group--overflow):not(.input-group--segmented):not(.input-group--editable):hover
+        .input-group__details:before
+          background-color: $material.text.primary
+
+        &.input-group--textarea:not(.input-group--full-width)
+          .input-group__input
+            border-color: $material.text.primary
+
+  &.input-group
+    &--overflow, &--segmented, &--editable
+      .input-group__input,
+      .input-group__details
+        &:before
+          background-color: $material.dividers
+
+  &.input-group--disabled
+    .input-group__input
+      .input-group__append-icon,
+      .input-group__prepend-icon
+        color: $material.text.disabled
+
+    .input-group__details:before
+      background-color: transparent
+      background-image: linear-gradient(
+        to right,
+        $material.text.disabled 0,
+        $material.text.disabled 33%,
+        transparent 0
+      )
+
+  .input-group--text-field
+    &__prefix, &__suffix
+      color: $material.text.secondary
+
+    &.input-group--disabled
+      &__prefix, &__suffix
+        color: $material.text.disabled
+
+theme(input-group, "input-group")
+
+.input-group
+  display: flex
+  flex: 1 1
+  flex-wrap: wrap
+  min-width: 24px
+  padding: $input-group-padding
+  position: relative
+  width: 100%
+  outline: none
+  transition: box-shadow $primary-transition
+
+
+/** Label */
+.input-group
+  label
+    display: inline-block
+    font-size: $input-font-size
+    line-height: $input-height
+    height: $input-height
+    max-width: 90%
+    min-width: 0
+    overflow: hidden
+    pointer-events: none
+    text-align: left
+    text-overflow: ellipsis
+    transform: translate3d(0, 0, 0)
+    transform-origin: top left
+    transition: .4s $transition.fast-in-fast-out
+    white-space: nowrap
+    width: 100%
+    z-index: 0
+
+/** Blocks */
+.input-group
+  &__input
+    display: flex
+    flex: 1 0 100%
+    min-width: 0
+    min-height: $input-height
+
+/** Icons */
+.input-group
+  &__icon-cb
+    cursor: pointer
+
+.input-group
+  &.input-group--focused,
+  &.input-group--error
+    .input-group__append-icon,
+    .input-group__prepend-icon
+      color: inherit
+
+  &.input-group--append-icon, &.input-group--selection-controls
+    label
+      max-width: 75%
+
+  &.input-group--prepend-icon
+    label
+      max-width: 75%
+
+  &.input-group--append-icon.input-group--prepend-icon
+    label
+      max-width: 65%
+
+  .input-group__append-icon
+    padding: 0 6px
+    transition: .3s $transition.ease-in-out
+
+  .input-group__append-icon,
+  .input-group__prepend-icon
+    align-self: center
+    user-select: none
+
+/** States */
+.input-group
+  // Single Line
+  &.input-group--single-line,
+  &.input-group--solo
+    label
+      transform: translate3d(0,0,0)
+
+    &.input-group--dirty
+      label
+        display: none
+
+  // Solo
+  &.input-group--solo
+    background: #fff
+    min-height: 46px
+    border-radius: $card-border-radius
+    padding: 0
+    elevation(2)
+
+    label
+      top: 8px
+      padding-left: 16px
+      transform: none !important
+
+    .input-group__input
+      align-items: center
+      padding: 8px 16px
+
+    .input-group__details
+      display: none
+
+  &--disabled
+    .input-group__details:before
+      background-color: transparent
+      background-position: bottom
+      background-size: 3px 1px
+      background-repeat: repeat-x
+
+  // Focused
+  &.input-group--text-field
+    &:not(.input-group--single-line):not(.input-group--error)
+      &.input-group--focused
+        label
+          color: inherit
+
+        .input-group__input
+          border-color: inherit
+
+    &.input-group--focused
+      &:not(.input-group--disabled)
+        .input-group__details
+          &:after
+            transform: scaleX(1)
+
+  // Required
+  &--required
+    label:after
+      content: '*'
+
+    &.input-group--focused
+      label:after
+        color: $theme.error
+
+  // Error
+  &.input-group--error
+    label
+      animation: shake .6s $transition.swing
+
+    .input-group__messages
+      color: inherit
+
+    .input-group__details
+      &:before
+        background-color: currentColor
+
+/** Details */
+.input-group
+  .slide-y-transition-leave,
+  .slide-y-transition-leave-to
+    position: absolute
+
+  &__details
+    color: inherit
+    display: flex
+    padding-top: 4px
+    flex: 1 0 100%
+    font-size: 12px
+    min-height: 26px
+    overflow: hidden
+    position: relative
+    width: 100%
+
+    &:after, &:before
+      content: ''
+      position: absolute
+      left: 0
+      transition: .3s $transition.fast-out-slow-in
+
+    &:after
+      background-color: currentColor
+      color: inherit
+      top: 0
+      height: 2px
+      transform: scaleX(0)
+      transform-origin: center center 0
+      width: 100%
+      z-index: 1
+
+    &:before
+      top: 0
+      height: 1px
+      width: 100%
+      z-index: 0
+
+  &--hide-details
+    .input-group__details
+      min-height: 2px
+      padding: 0
+
+  &--async-loading
+    .input-group__details
+      &:before,
+      &:after
+        display: none
+
+  /** Async loading indicator */
+  .progress-linear
+    position: absolute
+    top: 0
+    left: 0
+    margin: 0
+
+/** Hint */
+.input-group
+  &__hint
+    // flex: 1 0
+    transition: .3s $transition.fast-in-fast-out
+
+/** Error */
+.input-group
+  .input-group__error
+    color: inherit
+    flex: 1 0
+    transition: .3s $transition.fast-in-fast-out
+
+/** Types */
+.input-group
+  &--overflow,
+  &--segmented,
+  &--editable
+    &.input-group--active
+      background-color: #fff