kdutify 0.16.9-rc.0

package/src/stylus/components/_alerts.styl

@@ -0,0 +1,44 @@
+@import '../bootstrap'
+
+.alert
+  border-radius: $alert-border-radius
+  border-width: $alert-border-width
+  border-style: solid
+  border-color: $material-light.dividers !important
+  color: #fff
+  display: flex
+  font-size: $alert-font-size
+  margin: $alert-margin
+  padding: $alert-padding
+  position: relative
+  transition: $primary-transition
+  
+  .alert__icon.icon,
+  &__dismissible .icon
+    align-self: center
+    color: $alert-icon-color
+    font-size: $alert-icon-font-size
+    
+  &__icon
+    margin-right: $alert-padding
+    
+  &__dismissible
+    align-self: flex-start
+    margin-left: $alert-padding
+    margin-right: 0
+    text-decoration: none
+    transition: $primary-transition
+    
+    &:hover
+      color: lighten($alert-icon-color, 10%)
+    
+  &--no-icon
+    .alert__icon
+      display: none
+      
+  > div
+    flex: 1
+    
+  @media screen and (max-width: $grid-breakpoints.sm)
+    &__icon
+      display: none

package/src/stylus/components/_app.styl

@@ -0,0 +1,21 @@
+@import '../bootstrap'
+@import '../theme'
+
+.application
+  -webkit-backface-visibility: hidden
+  display: flex
+  min-height: 100vh
+  flex-direction: column
+
+  > main
+    display: flex
+    flex: 1 0 auto
+
+application($material)
+  background: $material.background
+  color: $material.text.primary
+
+  a
+    color: $material.text.link
+
+app(application)

package/src/stylus/components/_avatars.styl

@@ -0,0 +1,22 @@
+@import '../bootstrap'
+
+.avatar
+  align-items: center
+  border-radius: 50%
+  display: inline-flex
+  justify-content: center
+  text-align: center
+  vertical-align: middle
+
+  img,
+  .icon
+    border-radius: 50%
+    height: inherit
+    width: inherit
+    
+  &--tile
+    border-radius: 0
+
+    img,
+    .icon
+      border-radius: 0

package/src/stylus/components/_badges.styl

@@ -0,0 +1,49 @@
+@import '../bootstrap'
+
+.badge
+  display: inline-block
+  position: relative
+  
+  &__badge
+    color: $badge-color
+    display: flex
+    position: absolute
+    font-size: $badge-font-size
+    top: -($badge-height / 2)
+    right: -($badge-width)
+    border-radius: $badge-border-radius
+    height: $badge-height
+    line-height: $badge-height
+    width: $badge-width
+    justify-content: center
+    align-items: center
+    flex-direction: row
+    flex-wrap: wrap
+    transition: $primary-transition
+    
+    .icon
+      font-size: $badge-font-size
+
+  &--overlap
+    .badge__badge
+      top: -8px
+      right: -8px
+
+    &.badge--left
+      .badge__badge
+        left: -8px
+        right: initial
+
+    &.badge--bottom
+      .badge__badge
+        bottom: -8px
+        top: initial
+
+  &--left
+    .badge__badge
+      left: -($badge-width)
+
+  &--bottom
+    .badge__badge
+      bottom: -($badge-height / 2)
+      top: initial;

package/src/stylus/components/_bottom-navs.styl

@@ -0,0 +1,86 @@
+@import '../bootstrap'
+
+.bottom-nav
+  background: $theme.primary
+  bottom: 0
+  box-shadow: 0 3px 14px 2px rgba(#000, .12)
+  display: flex
+  height: 56px
+  justify-content: center
+  position: fixed
+  transform: translate3d(0, 60px, 0)
+  transition: all .4s $transition.swing
+  width: 100%
+  z-index: 4
+
+  &--absolute
+    position: absolute
+
+  &--active
+    transform: translate3d(0, 0, 0)
+
+  .btn
+    background: transparent !important
+    border-radius: 0
+    box-shadow: none !important
+    font-weight: 400
+    height: 100%
+    margin: 0
+    max-width: 168px
+    min-width: 80px
+    padding: 0px
+    text-transform: none
+    opacity: .5
+    width: 100%
+
+    .btn__content
+      height: 100%
+      flex-direction: column-reverse
+      height: 56px
+      font-size: 12px
+      transform: scale3d(1, 1, 1) translate3d(0, 0, 0)
+      white-space: nowrap
+      will-change: font-size
+
+      i.icon
+        color: inherit
+        transition: all .4s cubic-bezier(.25, .8, .50, 1)
+
+    &--active
+      opacity: 1
+
+      .btn__content
+        font-size: 14px
+
+        &:before
+          opacity: 0
+
+        .icon
+          transform: none
+
+    &:not(.btn--active)
+      filter: grayscale(100%)
+
+  &--shift
+    .btn__content
+      font-size: 14px
+
+      span
+        height: 21px
+
+    .btn
+      transition: all .3s
+      min-width: 56px
+      max-width: 96px
+
+      &--active
+        min-width: 96px
+        max-width: 168px
+
+.bottom-nav--shift
+  .btn:not(.btn--active) .btn__content
+    .icon
+      transform: scale3d(1, 1, 1) translate3d(0, 10px, 0)
+
+    span
+      color: transparent

package/src/stylus/components/_bottom-sheets.styl

@@ -0,0 +1,18 @@
+@import '../bootstrap'
+@import '../theme'
+
+.bottom-sheet.dialog
+  align-self: flex-end
+  border-radius: 0
+  flex: 1 0 100%
+  margin: 0
+  min-width: 100%
+  overflow: visible
+  transition: .4s $transition.swing
+  
+  &.bottom-sheet--inset
+    max-width: 70%
+    min-width: 0
+    
+    @media $display-breakpoints.xs-only
+      max-width: none

package/src/stylus/components/_breadcrumbs.styl

@@ -0,0 +1,46 @@
+@import '../bootstrap'
+@import '../theme'
+
+breadcrumbs($material)
+  li:not(:last-child):after,
+  li:last-child .breadcrumbs__item,
+  li .breadcrumbs__item--disabled
+    color: $material.text.disabled
+
+theme(breadcrumbs, "breadcrumbs")
+
+.breadcrumbs
+  display: flex
+  justify-content: center
+  flex-wrap: wrap
+  flex: $breadcrumbs-flex
+  margin: $breadcrumbs-margin
+  list-style-type: none
+
+  li
+    &:not(:last-child):after
+      content: attr(data-divider)
+      vertical-align: middle
+
+    &:last-child a
+      pointer-events: none
+      cursor: default
+
+  &--with-icons
+    li
+      &:not(:last-child):after
+        font-family: 'Material Icons'
+        font-feature-settings: 'liga'
+
+  &__item
+    align-items: center
+    display: inline-flex
+    font-size: $breadcrumbs-item-font-size
+    padding: $breadcrumbs-padding
+    height: $breadcrumbs-height
+    text-decoration: none
+    line-height: $breadcrumbs-height
+    transition: $primary-transition
+
+    &--disabled
+      pointer-events: none

package/src/stylus/components/_button-toggle.styl

@@ -0,0 +1,55 @@
+@import '../bootstrap'
+@import '../theme'
+
+/** Themes */
+
+btn-toggle($material)
+  background: $material.cards
+
+  .btn
+    color: $material.text.primary
+
+    &[data-selected]:not(:last-child):not([data-only-child])
+      border-right-color: $material.buttons.disabled
+
+theme(btn-toggle, "btn-toggle")
+
+.btn-toggle
+  display: inline-flex
+  border-radius: 2px
+  transition: $primary-transition
+  will-change: background, box-shadow
+
+  .btn
+    justify-content: center
+    min-width: auto
+    width: auto
+    padding: 0 8px
+    margin: 0
+    opacity: .4
+    border-radius: 0
+
+    &:not(:last-child)
+      border-right: 1px solid transparent
+
+    &:after
+      display: none
+
+    &[data-selected]
+      opacity: 1
+
+    &__content
+      padding: 0
+
+    span + .icon
+      font-size: initial
+      margin-left: 10px
+
+    &:first-child
+      border-radius: 2px 0 0 2px
+
+    &:last-child
+      border-radius: 0 2px 2px 0
+
+  &--selected
+    elevation(2)

package/src/stylus/components/_buttons.styl

@@ -0,0 +1,339 @@
+@import '../bootstrap'
+@import '../components/_ripples'
+@import '../theme'
+
+button($material)
+  color: $material.text.primary
+
+  &.btn--disabled
+    color: $material.buttons.disabled !important
+
+    .icon
+      color: $material.buttons.disabled !important
+
+    &:not(.btn--icon):not(.btn--flat)
+      background-color: $material.buttons.focused !important
+
+  &:not(.btn--icon):not(.btn--flat)
+    background-color: $material.app-bar
+
+  // Specific styles for styling on date-picker
+  &:not(.btn--disabled):not(.btn--date-picker)
+    &.btn--icon,
+    &.btn--floating
+      color: $material.icons.active
+
+theme(button, "btn")
+
+/** Base Spec */
+.btn
+  align-items: center
+  border-radius: $button-border-radius
+  display: inline-flex
+  height: $button-height
+  flex: 0 1 auto
+  font-size: $button-font-size
+  font-weight: $button-font-weight
+  justify-content: center
+  margin: $button-margin
+  min-width: $button-min-width
+  outline: 0
+  text-transform: $button-text-transform
+  text-decoration: none
+  transition: .3s $transition.swing, color 1ms
+  position: relative
+  vertical-align: middle
+  user-select: none
+
+
+/** Psuedo */
+.btn
+  &__content:before
+    border-radius: inherit
+    color: inherit
+    content: ''
+    position: absolute
+    left: 0
+    top: 0
+    height: 100%
+    opacity: .12
+    transition: $primary-transition
+    width: 100%
+
+/** Content */
+.btn
+  &--active,
+  &:hover,
+  &:focus
+    .btn__content:before
+      background-color: currentColor
+
+  &__content
+    align-items: center
+    border-radius: inherit
+    color: inherit
+    display: flex
+    height: 100%
+    flex: 1 0 auto
+    justify-content: center
+    margin: 0 auto
+    padding: $button-padding
+    transition: $primary-transition
+    white-space: nowrap
+
+/** Icons */
+.btn .btn__content .icon
+  color: inherit 
+
+/** Types */
+.btn
+  &--flat
+    background-color: transparent !important
+    box-shadow: none !important
+
+  &--raised
+    will-change: box-shadow
+    elevation(2)
+
+    &:active
+      elevation(8)
+
+  &--icon
+    background: transparent
+    box-shadow: none !important
+    border-radius: 50%
+    justify-content: center
+    height: $button-height
+    width: $button-height
+    min-width: 0
+
+    .btn__content
+      padding: 0
+
+      &:before
+        border-radius: 50%
+
+    &.btn--small
+      width: $button-small-height
+
+      .btn__content
+        height: $button-small-height
+
+    &.btn--large
+      width: $button-large-height
+
+      .btn__content
+        height: $button-large-height
+
+  &--floating
+    border-radius: 50%
+    min-width: 0
+    height: $button-floating-width
+    width: $button-floating-width
+    padding: 0
+    z-index: 4
+    elevation(6)
+
+    &:active
+      elevation(12)
+
+    .btn__content
+      flex: 1 1 auto
+      margin: 0
+      padding: 0
+
+    &:after
+      border-radius: 50%
+
+    .icon
+      &:not(:only-of-type):last-of-type
+        opacity: 0
+        position: absolute
+        transform: rotate(-45deg)
+        left: calc(50% - 12px)
+        top: calc(50% - 12px)
+
+    &.btn--active
+      .icon
+        &:not(:only-of-type)
+          &:first-of-type
+            opacity: 0
+            transform: rotate(45deg)
+            left: 'calc(50% - %s)' % (24 / 2)
+            top: 'calc(50% - %s)' % (24 / 2)
+
+          &:last-of-type
+            opacity: 1
+            transform: none
+
+    .icon
+      height: $button-floating-icon-width
+      width: $button-floating-icon-width
+
+    &.btn--small
+      height: $button-floating-small-width
+      width: $button-floating-small-width
+
+      .icon
+        font-size: $button-floating-small-icon-width
+        height: $button-floating-small-icon-width
+        width: $button-floating-small-icon-width
+
+      &.btn--floating .icon
+        left: 'calc(50% - %s)' % ($button-floating-small-icon-width / 2)
+        top: 'calc(50% - %s)' % ($button-floating-small-icon-width / 2)
+
+
+    &.btn--large
+      height: $button-floating-large-width
+      width: $button-floating-large-width
+
+      .icon
+        font-size: $button-floating-large-icon-width
+        height: $button-floating-large-icon-width
+        width: $button-floating-large-icon-width
+
+      &.btn--floating .icon
+        left: 'calc(50% - %s)' % ($button-floating-large-icon-width / 2)
+        top: 'calc(50% - %s)' % ($button-floating-large-icon-width / 2)
+
+  &--reverse
+    .btn__content
+      flex-direction: row-reverse
+
+    &.btn--column
+      .btn__content
+        flex-direction: column-reverse
+
+  &--fixed, &--absolute
+    margin: 0
+
+  // Position must have prepended .btn
+  // to account for tooltip
+  // TODO: Remove this once tooltips are
+  // converted to elements
+  &.btn--absolute
+    position: absolute
+
+  &.btn--fixed
+    position: fixed
+
+  &--top
+    &:not(.btn--absolute)
+      top: $grid-gutters.lg
+
+    &.btn--absolute
+      top: -($button-floating-width / 2)
+
+      &.btn--small
+        top: -($button-floating-small-width / 2)
+
+      &.btn--large
+        top: -($button-floating-large-width / 2)
+
+  &--bottom
+    &:not(.btn--absolute)
+      bottom: $grid-gutters.lg
+
+    &.btn--absolute
+      bottom: -($button-floating-width / 2)
+
+      &.btn--small
+        bottom: -($button-floating-small-width / 2)
+
+      &.btn--large
+        bottom: -($button-floating-large-width / 2)
+
+  &--left
+    left: $grid-gutters.lg
+
+  &--right
+    right: $grid-gutters.lg
+
+/** Disabled */
+.btn
+  &.btn--disabled
+    box-shadow: none !important
+    pointer-events: none
+
+/** Sizes */
+.btn
+  &--small
+    font-size: $button-small-font-size
+    height: $button-small-height
+
+  &--large
+    font-size: $button-large-font-size
+    height: $button-large-height
+
+
+/** Loader */
+.btn
+  &--loader
+    pointer-events: none
+
+    .btn__content
+      opacity: 0
+
+  &__loading
+    align-items: center
+    display: flex
+    height: 100%
+    justify-content: center
+    left: 0
+    position: absolute
+    top: 0
+    width: 100%
+
+    .icon
+      &--left
+        margin-right: 1rem
+        line-height: inherit
+
+      &--right
+        margin-left: 1rem
+        line-height: inherit
+
+
+/** Custom Buttons */
+.btn
+  &--outline
+    border: 1px solid currentColor
+    background: transparent !important
+    box-shadow: none
+
+    &:hover
+      box-shadow: none
+
+  &--block
+    display: flex
+    flex: 1
+    margin: $button-margin-y 0
+    width: 100%
+
+  &--round
+    border-radius: 28px
+
+    &:after
+      border-radius: 28px
+
+
+/** Button w/ directional Icon */
+.btn
+  .icon
+    &--right
+      margin-left: 16px
+
+    &--left
+      margin-right: 16px
+
+
+/** Themes */
+.btn
+  &.primary,
+  &.secondary,
+  &.success,
+  &.error,
+  &.warning,
+  &.info
+    color: $material-dark.text.primary