kdutify 0.16.9-rc.0

package/src/stylus/components/_cards.styl

@@ -0,0 +1,85 @@
+@import '../bootstrap'
+@import '../theme'
+
+/* Themes */
+card($material)
+  background-color: $material.cards
+  color: $material.text.primary
+
+theme(card, "card")
+
+.card
+  display: block
+  border-radius: $card-border-radius
+  min-width: 0
+  position: relative
+  text-decoration: none
+  elevation(2)
+
+  > *:first-child
+    border-top-left-radius: inherit
+    border-top-right-radius: inherit
+
+  > *:last-child
+    border-bottom-left-radius: inherit
+    border-bottom-right-radius: inherit
+
+  &--raised
+    elevation(3)
+
+  &--tile
+    border-radius: 0
+
+  &--flat
+    elevation(0)
+
+  &--hover
+    cursor: pointer
+    transition: all .4s cubic-bezier(.25, .8, .25, 1)
+    transition-property: box-shadow
+
+    &:hover
+      elevation(8)
+
+  &__title
+    align-items: center
+    display: flex
+    flex-wrap: wrap
+    padding: 16px
+
+    &--primary
+      padding-top: 24px
+
+  &__text
+    padding: 16px
+    width: 100%
+
+  &__media
+    display: flex
+    overflow: hidden
+    position: relative
+
+    img
+      width: 100%
+
+    &__background
+      border-radius: inherit
+      position: absolute
+      left: 0
+      top: 0
+      width: 100%
+      height: 100%
+
+    &__content
+      display: flex
+      flex: 1 1 auto
+      position: relative
+
+  &__actions
+    align-items: center
+    display: flex
+    padding: 8px 4px
+
+    > *,
+    .btn
+      margin: 0 4px

package/src/stylus/components/_carousel.styl

@@ -0,0 +1,76 @@
+@import '../bootstrap'
+
+.carousel
+  height: 500px
+  width: 100%
+  position: relative
+  overflow: hidden
+  elevation(2)
+
+  &__item
+    display: flex
+    align-items: center
+    justify-content: center
+    flex: 1 0 100%
+    height: 100%
+    width: 100%
+    background-size: cover
+    background-position: center center
+    transition: .2s ease-out
+
+  &__left
+    position: absolute
+    top: 50%
+    z-index: 1
+    left: 5px
+    transform: translateY(-50%)
+
+    .btn
+      color: #FFFFFF
+      margin: 0 !important
+      height: auto
+      width: auto
+
+      i
+        font-size: 48px
+
+      &:hover
+        background: none
+
+  &__right
+    @extend .carousel__left
+    left: auto
+    right: 5px
+
+  &__controls
+    background: rgba(0, 0, 0, .5)
+    align-items: center
+    bottom: 0
+    display: flex
+    justify-content: center
+    left: 0
+    position: absolute
+    height: 50px
+    list-style-type: none
+    width: 100%
+    z-index: 1
+
+    &__item
+      color: #FFFFFF
+      margin: 0 1rem !important
+
+      i
+        opacity: .5
+        transition: $primary-transition
+
+      &--active
+        i
+          opacity: 1
+          vertical-align: middle
+          font-size: 2rem !important
+
+      &:hover
+        background: none
+
+        i
+          opacity: .8

package/src/stylus/components/_chips.styl

@@ -0,0 +1,102 @@
+@import '../bootstrap'
+@import '../theme'
+
+chip($material)
+  background: $material.chips.background
+  color: $material.chips.color
+
+  &__close
+    color: $material.icons.active
+
+  &.chip--selected
+    background: $theme.accent
+    color: $material.text.theme
+
+    .chip__close
+      color: $material.text.theme
+
+theme(chip, "chip")
+
+.chip
+  align-items: center
+  border-radius: $chip-border-radius
+  color: $chip-label-color
+  cursor: default
+  display: inline-flex
+  height: $chip-height
+  justify-content: space-between
+  font-size: $chip-font-size
+  margin: $chip-margin
+  outline: none
+  padding: $chip-padding
+  transition: $primary-transition
+  vertical-align: middle
+  white-space: nowrap
+
+  .avatar
+    // Important is needed to account for new avatar structure
+    height: $chip-height !important
+    width: $chip-height !important
+    min-width: $chip-height
+    margin-left: -12px
+    margin-right: 8px
+    color: #fff
+
+    img
+      width: 100%
+      height: 100%
+
+  &:focus,
+  &--active
+    &:not(.chip--disabled)
+      elevation(2)
+      outline: none
+
+  &--label
+    border-radius: $chip-label-border-radius
+
+  &.chip--outline
+    background: $chip-outline-background
+    border: 1px solid transparent
+    color: $chip-outline-color
+
+  &--small
+    height: $chip-small-height
+
+    .avatar
+      height: $chip-small-height
+      width: $chip-small-height
+      min-width: $chip-small-height
+
+  &__close
+    align-items: center
+    cursor: pointer
+    display: flex
+    text-decoration: none
+    font-size: $chip-icon-font-size
+    margin-left: 4px
+    margin-right: -2px
+    transition: none !important
+
+    &:hover
+      opacity: .8
+
+  &--removable
+    padding: $chip-removeable-padding
+
+  &--select-multi
+    margin: $chip-margin $chip-margin $chip-margin 0
+
+  .icon,
+  .chip__close
+    color: inherit !important // I don't like this
+
+  .icon
+    opacity: .54
+    transition: none
+
+    &--right
+      margin-left: 4px
+
+    &--left
+      margin-right: 4px

package/src/stylus/components/_content.styl

@@ -0,0 +1,6 @@
+@import '../bootstrap'
+
+.content
+  flex: 1 1 auto
+  max-width: 100%
+  transition: .3s padding $transition.swing

package/src/stylus/components/_data-table.styl

@@ -0,0 +1,113 @@
+@import '../bootstrap'
+@import '../theme'
+
+/* Theme */
+datatable($material)
+  thead
+    th.column.sortable
+      i
+        color: rgba($material.fg-color, $material.disabledORhints-text-percent)
+
+      &:hover
+        color: rgba($material.fg-color, $material.primary-text-percent)
+
+      &.active
+        color: rgba($material.fg-color, $material.primary-text-percent)
+
+        i
+          color: rgba($material.fg-color, $material.primary-text-percent)
+
+  .datatable__actions
+    color: rgba($material.fg-color, $material.secondary-text-percent)
+
+    &__select
+      .input-group--select
+        .input-group__selections__comma
+          color: rgba($material.fg-color, $material.secondary-text-percent) !important
+
+        .input-group__append-icon
+          color: rgba($material.fg-color, $material.secondary-text-percent) !important
+
+theme(datatable, "datatable")
+
+.datatable
+  thead
+    th.column.sortable
+      cursor: pointer
+
+      i
+        font-size: 16px
+        vertical-align: sub
+        display: inline-block
+        opacity: 0
+        transition: .3s $transition.swing
+
+      &:hover
+        i
+          opacity: .6
+
+      &.active
+        transform: none
+
+        i
+          opacity: 1
+
+        &.desc
+          i
+            transform: rotate(-180deg)
+
+/** Actions */
+.datatable__actions
+  display: flex
+  justify-content: flex-end
+  align-items: center
+  font-size: 12px
+
+  .btn
+    color: inherit
+
+    &:last-of-type
+      margin-left: 18px
+
+  &__pagination
+    text-align: center
+    margin: 0 26px 0 32px
+
+  &__select
+    display: flex
+    align-items: center
+    justify-content: center
+
+    .input-group--select
+      margin: 13px 0 13px 34px
+      padding: 0
+      position: initial
+
+      .input-group__selections__comma
+        font-size: 12px
+
+.datatable__progress
+  tr, td, th
+    height: auto !important
+
+  th
+    padding: 0 !important
+
+    .progress-linear
+      top: -2px
+      margin: 0 0 -2px
+
+.datatable__expand
+  &-row
+    border: none !important
+
+  &-col
+    padding: 0 !important
+    height: 0px !important
+
+  &-content
+    transition: height $primary-transition
+
+    > .card
+      border-radius: 0
+      box-shadow: none

package/src/stylus/components/_date-picker.styl

@@ -0,0 +1,214 @@
+@import '../bootstrap'
+@import '../theme'
+
+/** Themes */
+date-picker($material)
+  .picker--date__years
+    li
+      color: $material.text.primary
+
+      &.active, &:hover
+        color: $theme.primary
+
+  .picker--date__header
+    color: $material.text.primary
+
+    &-selector-date
+      strong:hover
+        color: $material.picker.date
+
+    &-selector
+      .btn
+        color: $material.text.primary
+
+  .picker--date__title-year, .picker--date__title-date
+    &:not(.active)
+      opacity: 0.6
+
+  .picker--date__table
+    th
+      color: $material.text.primary
+
+    .btn.btn--date-picker
+      &:not(.btn--disabled)
+        &:hover
+          color: #fff
+
+        &.btn--active
+          color: #fff
+
+      &:not(.btn--disabled):not(.btn--active)
+        color: $material.text.primary
+
+      &.btn--disabled
+        color: $material.buttons.disabled
+
+      &.btn--outline
+        border-color: $theme.primary
+
+      &.btn--active:after
+        background-color: $material.picker.date
+
+      &:not(.btn--active):hover
+        color: #fff
+
+        &:after
+          background-color: $material.picker.date
+          opacity: .6
+
+theme(date-picker, "picker--date")
+
+.picker--date
+  width: 100%
+
+/** Years */
+.picker--date__years
+  font-size: 16px
+  font-weight: 400
+  list-style-type: none
+  max-height: 290px
+  overflow: auto
+  padding: 0
+  text-align: center
+
+  li
+    cursor: pointer
+    margin: 16px 0
+    transition: none
+
+    &.active
+      font-size: 24px
+      font-weight: 500
+      margin: 20px 0
+
+
+/** Title */
+.picker--date__title
+  justify-content: space-between
+  flex-direction: column
+  flex-wrap: wrap
+
+  &-year
+    align-items: center
+    display: inline-flex
+    font-size: 14px
+
+  &-date
+    font-size: 34px
+    text-align: left
+
+    > div
+      position: relative
+
+  &-year, &-date
+    font-weight: 500
+    transition: .3s $transition.swing
+    width: 100%
+
+    &:not(.active)
+      cursor: pointer
+
+/** Header */
+.picker--date__header
+  padding: 4px 16px
+
+  &-selector
+    align-items: center
+    display: flex
+    justify-content: space-between
+    position: relative
+
+    .btn
+      margin: 0
+
+    .icon
+      cursor: pointer
+      user-select: none
+
+    &-date
+      flex: 1
+      text-align: center
+      position: relative
+      overflow: hidden
+
+      strong
+        cursor: pointer
+        transition: .3s $transition.swing
+        display: block
+        width: 100%
+
+.picker--date
+  .btn
+    z-index: auto
+
+  &__table
+    position: relative
+
+  table
+    transition: .3s $transition.swing
+    top: 0
+
+    thead
+      th
+        padding: 8px 0
+
+    th
+      font-weight: 600
+      font-size: 12px
+
+    th, td
+      text-align: center
+      width: 45px
+
+    .btn
+      margin: 0
+      transition: none
+
+      &:hover, .btn__content:before
+        background-color: transparent !important
+
+      &:after
+        position: absolute
+        content: ''
+        left: 0
+        top: 0
+        height: 100%
+        width: 100%
+
+      &__content
+        overflow: visible
+        transition: none
+        z-index: 1
+
+    .btn.btn--date-picker
+      height: 32px
+      width: 32px
+
+      &:after
+        transform: scale(0)
+
+      &:not(.btn--active):not(.btn--current):not(.btn--disabled):hover
+        &:after
+          transform: scale(1)
+
+    .btn.btn--date-picker.btn--active
+      &:after
+        transform: none
+
+.picker--landscape
+  .picker--date__years
+    width: 330px
+
+.picker--month__table
+  table
+    width: 100%
+
+    td
+      width: 33.333333%
+      height: 56px
+      vertical-align: middle
+
+  // .picker--date__title-date > div
+  //   white-space: pre
+  //   overflow: hidden
+  //   text-overflow: ellipsis

package/src/stylus/components/_dialogs.styl

@@ -0,0 +1,63 @@
+@import '../bootstrap'
+
+.dialog
+  elevation(24)
+  border-radius: $card-border-radius
+  margin: 24px
+  overflow-y: auto
+  pointer-events: auto
+  transition: .3s ease-in-out
+  width 100%
+
+  &__content
+    align-items: center
+    display: flex
+    height: 100%
+    justify-content: center
+    left: 0
+    pointer-events: none
+    position: fixed
+    top: 0
+    transition: .3s ease-in-out
+    width: 100%
+    z-index 6
+
+  &:not(.dialog--fullscreen)
+    max-height: 90%
+
+  &__container
+    display: inline-block
+    vertical-align: middle
+
+  &--fullscreen
+    margin 0
+    height 100%
+    position fixed
+    overflow-y: auto
+    top: 0
+    left 0
+
+    >
+      .card
+        min-height 100%
+        min-width 100%
+        margin 0 !important
+        padding 0 !important
+
+  &--scrollable
+    display: flex
+    overflow: hidden
+    
+    >
+      .card
+        display: flex
+        flex: 1 1 auto
+        flex-direction: column
+        
+        .card__title
+        .card__actions
+          flex: 1 0 auto
+      
+        .card__text
+          overflow-y: auto
+          backface-visibility: hidden

package/src/stylus/components/_dividers.styl

@@ -0,0 +1,19 @@
+@import '../bootstrap'
+@import '../theme'
+
+divider($material)
+  background-color: $material.dividers
+
+theme(divider, "divider")
+
+.divider
+  border: none
+  display: block
+  height: 1px
+  min-height: 1px
+  flex: 1
+  width: 100%
+
+  &--inset
+    margin-left: 72px
+    width: calc(100% - 72px)