kdutify 0.16.9-rc.0

package/src/stylus/components/_switch.styl

@@ -0,0 +1,89 @@
+@import '../bootstrap'
+@import '../theme'
+
+/** Theme */
+switch($material)
+  color: $material.selection-controls.active
+      
+  &:not(.input-group--dirty)
+    .input-group--selection-controls__container
+      // Must overwrite color helpers
+      color: $material.selection-controls.track.inactive !important
+
+  .input-group--selection-controls__ripple
+    &:after
+      background-color: $material.selection-controls.thumb.inactive
+
+    &:not(.input-group--selection-controls__ripple--active)
+      color: $material.selection-controls.track.inactive
+
+    &--active:after
+      background-color: currentColor
+
+  .input-group--selection-controls__toggle
+    color: $material.selection-controls.track.inactive
+
+    &--active
+      color: inherit
+
+  &.input-group--disabled
+    .input-group--selection-controls__ripple
+      &:after
+        background-color: $material.selection-controls.thumb.disabled !important
+
+    .input-group--selection-controls__toggle
+      color: $material.selection-controls.track.disabled !important
+
+theme(switch, "switch")
+
+.input-group.input-group--selection-controls
+  z-index: 0
+
+  &.switch
+    min-width: 36px
+
+    .input-group--selection-controls__container
+      color: inherit
+      position: relative
+
+      &[class*="--text"]
+        .input-group--selection-controls__ripple--active:after
+          background-color: currentColor
+
+    .input-group--selection-controls__toggle
+      background-color: currentColor
+      color: inherit
+      position: absolute
+      height: 14px
+      top: 50%
+      left: 0
+      width: 34px
+      border-radius: 8px
+      transform: translateY(-50%)
+
+      &.input-group--selection-controls__toggle--active
+        opacity: .5
+
+    .input-group--selection-controls__ripple
+      transform: translate3d(-15px, -24px, 0)
+      transition: .3s $transition.fast-in-fast-out
+      z-index: 1
+
+      &:after
+        content: ''
+        position: absolute
+        display: inline-block
+        cursor: pointer
+        width: 20px
+        border-radius: 50%
+        top: 50%
+        left: 50%
+        transform: translate3d(-50%, -50%, 0)
+        height: 20px
+        elevation(4)
+
+      &--active
+        transform: translate3d(2px, -24px, 0)
+
+    label
+      padding-left: 14px

package/src/stylus/components/_system-bars.styl

@@ -0,0 +1,49 @@
+@import '../bootstrap'
+@import '../theme'
+
+/* Theme */
+system-bar($material)
+  background-color: $material.status-bar.regular
+  color: $material.text.secondary
+
+  .icon
+    color: $material.text.secondary
+
+  &--lights-out
+    background-color: $material.status-bar.lights-out !important
+
+theme(system-bar, "system-bar")
+
+.system-bar
+  align-items: center
+  display: flex
+  font-size: $headings.body-2.size
+  font-weight: $headings.body-2.weight
+  left: 0
+  padding: 0 8px
+  position: fixed
+  top: 0
+  width: 100%
+  z-index: 2
+
+  .icon
+    font-size: $headings.subheading.size
+
+  &--status
+    .icon
+      margin-right: 4px
+
+  &--window
+    .icon
+      font-size: $headings.h6.size
+      margin-right: 8px
+
+  &--status
+    + .navigation-drawer
+      margin-top: 24px
+      max-height: "calc(100vh - %s)" % 24px
+
+  &--window
+    + .navigation-drawer
+      margin-top: 32px
+      max-height: "calc(100vh - %s)" % 32px

package/src/stylus/components/_tables.styl

@@ -0,0 +1,103 @@
+@import '../bootstrap'
+@import '../theme'
+
+/* Theme */
+table($material)
+  background-color: $material.cards
+  color: $material.text.primary
+
+  tr:not(:last-child)
+    border-bottom: 1px solid rgba($material.fg-color, $material.divider-percent)
+
+  thead
+    th
+      color: rgba($material.text-color, $material.secondary-text-percent)
+
+    &:last-of-type
+      border-bottom: 1px solid rgba($material.fg-color, $material.divider-percent)
+
+  tbody
+    tr
+      &[active]
+        background: $material.table.active
+
+      &:hover:not(.datatable__expand-row)
+        background: $material.table.hover
+
+  tfoot
+    tr
+      border-top: 1px solid rgba($material.fg-color, $material.divider-percent)
+
+theme(table, "table")
+
+.table
+  &__overflow
+    width: 100%
+    overflow-x: auto
+    overflow-y: hidden
+
+table.table
+  border-radius: 2px
+  border-collapse: collapse
+  border-spacing: 0
+  width: 100%
+  max-width: 100%
+
+  thead, tbody
+    td, th
+      &:not(:nth-child(1)), &:first-child
+        padding: 0 24px
+
+  thead
+    tr
+      height: 56px
+
+    th
+      font-weight: 500
+      font-size: 12px
+      transition: .3s $transition.swing
+      white-space: nowrap
+      user-select: none
+
+      &.sortable
+        pointer-events: auto
+
+      > div
+        width: 100%
+
+  tbody
+    tr
+      transition: background $primary-transition
+      will-change: background
+
+    td, th
+      height: 48px
+
+    td
+      font-weight: 400
+      font-size: 13px
+
+  .input-group--selection-controls
+    padding: 0
+
+    .input-group__details
+      display: none
+
+    &.checkbox
+      .icon
+        left: 50%
+        transform: translateX(-50%)
+
+      .input-group--selection-controls__ripple
+        left: 50%
+        transform: translate3d(-50%, -50%, 0)
+  tfoot
+    tr:not(:last-child)
+      height: 48px
+
+      &:not(:only-child)
+        td
+          padding: 0 24px
+
+    tr
+      height: 56px

package/src/stylus/components/_tabs.styl

@@ -0,0 +1,159 @@
+@import '../bootstrap'
+@import '../theme'
+
+/* Theme */
+tabs($material)
+  .tabs__item
+    color: $material.tabs.inactive
+
+    &.tabs__item--active
+      color: $material.tabs.active
+
+    &.tabs__item--disabled
+      color: $material.buttons.disabled
+
+  .tabs__bar
+    .icon--left,
+    .icon--right
+      color: $material.icons.inactive
+
+theme(tabs, "tabs")
+
+.tabs
+  overflow: hidden
+  position: relative
+  width: 100%
+
+  &--grow .tabs__bar
+    .tabs__li
+      flex: 1
+
+  &--fixed > .tabs__bar
+    .tabs__li
+      min-width: 160px
+      max-width: 264px
+      flex: 0 1 160px
+
+      @media $display-breakpoints.xs-only
+        min-width: 72px
+
+  &--centered .tabs__bar
+    .tabs__container
+      justify-content: center
+
+  &--icons
+    .tabs__bar
+      height: 72px
+
+    .tabs__item
+      flex-direction: column
+
+  &.tabs--mobile .tabs__bar
+    .icon--left, .icon--right
+      display: none
+
+    .tabs__wrapper
+      &--scrollable.tabs__wrapper--overflow
+        overflow: hidden !important
+
+  &:not(.tabs--grow):not(.tabs--mobile)
+    .tabs__item
+      padding: 0 24px
+
+  &:not(.tabs--centered):not(.tabs--grow):not(.tabs--mobile)
+    .tabs__wrapper
+      &--scrollable
+        margin: 0 60px
+        overflow: hidden !important
+
+  &__bar
+    background-color: $theme.primary
+    width: 100%
+    position: relative
+    height: 48px
+
+    @media $display-breakpoints.sm-and-down
+      padding-left: 0
+
+    .icon--left, .icon--right
+      position: absolute
+      top: 0
+      width: 32px
+      align-items: center
+      height: 100%
+      cursor: pointer
+      user-select: none
+
+    .icon--left
+      left: 28px
+
+    .icon--right
+      right: 28px
+
+  &__container
+    display: flex
+    height: 100%
+    width: 100%
+    position: absolute
+    padding: 0
+    top: 0
+    align-items: center
+    list-style: none
+    will-change: transform
+    transition: transform 0.6s cubic-bezier(0.86, 0, 0.07, 1)
+
+    > li:not(.tabs__slider)
+      height: 100%
+
+    &-left
+      position: absolute
+      left: 0
+      top: 0
+      height: 100%
+      width: 32px
+      display: flex
+      align-items: center
+
+  &__wrapper
+    position: relative
+    overflow-x: auto
+    height: inherit
+
+  &__item
+    align-items: center
+    display: flex
+    flex-shrink: 0
+    justify-content: center
+    height: 100%
+    padding: 0 12px
+    position: relative
+    text-align: center
+    text-decoration: none
+    text-transform: uppercase
+    text-overflow: ellipsis
+    white-space: nowrap
+
+    .icon
+      color: inherit
+      margin: 0 0 5px
+
+    &--disabled
+      pointer-events: none
+
+  &__items
+    position: relative
+    overflow: hidden
+
+  &__content
+    transition: $primary-transition
+    width: 100%
+
+    .card
+      border-radius: 0 0 2px 2px
+
+  &__slider
+    position: absolute
+    bottom: 0
+    height: 2px
+    background: $theme.accent
+    transition: $primary-transition

package/src/stylus/components/_text-fields.styl

@@ -0,0 +1,243 @@
+@import '../bootstrap'
+@import '../theme'
+
+textfield($material)
+  &.input-group--text-field-box
+    .input-group__input
+      background: $material.buttons.focused-alt
+
+  input::placeholder,
+  textarea::placeholder
+    color: $material.text.disabled
+
+  &:not(.input-group--error)
+    .input-group__counter
+      color: $material.text.secondary
+
+theme(textfield, "input-group--text-field")
+
+/** Label */
+.input-group--text-field label
+  position: absolute
+  top: $input-group-text-field-label-top
+  left: 0
+
+/** Input */
+.input-group--text-field
+  input,
+  textarea
+    font-size: $input-font-size
+
+    &::placeholder
+      color: inherit
+      transition: .3s $transition.swing
+
+.input-group--text-field input
+  box-shadow: none
+  flex: 1
+  height: $input-height
+  margin: 0
+  min-width: 0
+  overflow: hidden
+  text-overflow: ellipsis
+  white-space: nowrap
+
+  &:focus
+    outline: none
+
+  &:disabled
+    pointer-events: none
+
+/** Textarea */
+.input-group--text-field
+  textarea
+    flex: 1 1
+
+    &:focus
+      outline: none
+
+.input-group--text-field.input-group--textarea
+  label
+    top: 13px
+
+  .input-group__input
+    border-radius: 2px
+    transition: .4s $transition.fast-in-fast-out
+
+  textarea
+    font-size: $input-font-size
+    transition: .3s $transition.swing
+
+  &:not(.input-group--full-width)
+    label
+      top: 30px
+      left: 15px
+
+    .input-group__input
+      padding: 30px 0 0 13px
+
+  .input-group__details
+    &:before,
+    &:after
+      opacity: 0
+
+/** Counter */
+.input-group--text-field
+  .input-group__counter
+    margin-left: auto
+
+    &--error
+      color: inherit
+
+/** Input States */
+.input-group--text-field
+  &.input-group--placeholder.input-group--dirty
+    input::placeholder,
+    textarea::placeholder
+      opacity: 0
+
+/** Types */
+.input-group--text-field
+  // Icons
+  &.input-group--prepend-icon
+    .input-group__prepend-icon
+      align-items: center
+      display: flex
+      justify-content: flex-start
+      min-width: 40px
+      transition: .3s $transition.fast-in-fast-out
+
+    .input-group__messages
+      margin-right: auto
+      padding-left: 40px
+
+    .input-group__details
+      &:before, &:after
+        margin-left: 40px
+        max-width: calc(100% - 40px)
+
+    label
+      left: 40px
+
+  &:not(.input-group--single-line)
+    &.input-group--focused,
+    &.input-group--placeholder
+      label
+        opacity: 1
+
+      &:not(.input-group--textarea)
+        label
+          transform: translate3d(0, -18px, 0) scale(.75)
+
+      &:not(.input-group--full-width).input-group--textarea
+        label
+          transform: translate3d(0, -8px, 0) scale(.75)
+
+      &.input-group--text-field-box
+        label
+          transform: translate3d(0, -10px, 0) scale(.75)
+
+  &.input-group--dirty
+    &.input-group--select,
+    &:not(.input-group--textarea)
+      label
+        transform: translate3d(0, -18px, 0) scale(.75)
+
+    &:not(.input-group--full-width).input-group--textarea
+      label
+        transform: translate3d(0, -8px, 0) scale(.75)
+
+  // Multi Line
+  &.input-group--multi-line
+    textarea
+      padding-top: 4px
+
+  // Full Width
+  &.input-group--full-width
+    padding: 16px
+
+    label
+      margin-left: $grid-gutters.lg
+
+    .input-group__details:before, .input-group__details:after
+      display: none
+
+/** Prefix/Suffix */
+.input-group--prefix
+  &:not(.input-group--focused):not(.input-group--dirty)
+    label
+      left: 16px
+
+.input-group--prefix,
+.input-group--suffix
+  .input-group--text-field__prefix,
+  .input-group--text-field__suffix
+    align-items: center
+    display: inline-flex
+    font-size: 16px
+    margin-top: 1px
+
+  .input-group--text-field__prefix
+    margin-right: 3px
+
+  .input-group--text-field__suffix
+    margin-left: 3px
+
+/** Box */
+.input-group--text-field-box
+  input, textarea
+    cursor: pointer
+
+  label
+    left: 16px
+
+  .input-group__input
+    align-items: flex-end
+    border-radius: 4px 4px 0 0
+    cursor: pointer
+    min-height: 56px
+
+  .input-group__details
+    padding: 8px 16px 0
+
+    &:before,
+    &:after
+      height: 2px
+      border-bottom-left-radius: 4px
+      border-bottom-right-radius: 4px
+
+  &.input-group--multi-line
+    textarea
+      padding-left: 24px
+      padding-right: 24px
+
+  &:not(.input-group--textarea)
+    &.input-group--multi-line
+      .input-group__input
+        padding-top: 26px
+
+      label
+        top: 26px
+
+    &:not(.input-group--multi-line)
+      .input-group__input
+        padding-left: 16px
+        padding-right: 16px
+
+      label
+        top: 32px
+
+    &:not(.input-group--single-line)
+      &.input-group--focused,
+      &.input-group--dirty
+        label
+          transform: translate3d(0, -10px, 0) scale(0.75)
+  // Icons
+  &.input-group--prepend-icon
+    .input-group__details
+      &:before, &:after
+        margin-left: 56px
+        max-width: calc(100% - 56px)
+
+    label
+      left: 56px