kdutify 0.16.9-rc.0

package/src/stylus/components/_sliders.styl

@@ -0,0 +1,234 @@
+@import '../bootstrap'
+@import '../theme'
+
+/* Theme */
+slider($material)
+  label
+    color: $material.text.secondary
+
+  .slider__track, .slider__track-fill
+    background: $material.slider.inactive
+
+  .slider__track__container
+    &:after
+      border: 1px solid $material.text.primary
+
+  .slider__tick
+    border: 1px solid $material.text.primary
+
+  &:not(.input-group--dirty)
+    .slider__thumb--label
+      background: $material.slider.inactive
+
+    &.input-group--ticks
+      .slider__thumb-container
+        .slider__thumb
+          background: $material.slider.discrete
+
+    &:not(.input-group--ticks)
+      .slider__thumb
+        border: 4px solid $material.slider.inactive
+
+      &:focus
+        .slider__thumb
+          border: 4px solid $material.slider.active
+
+  &.input-group--disabled:not(.input-group--ticks)
+    .slider__thumb
+      background: $material.slider.disabled
+      border: 0px solid transparent
+
+  &:focus
+    .slider__track
+      background: $material.slider.active
+
+theme(slider, "input-group--slider")
+
+/** Input Group */
+.input-group.input-group--slider
+  flex-direction: row
+  flex-wrap: wrap
+  // Allow for right space if inline with other inputs
+  padding-right: 16px
+
+  .input-group__details:before, .input-group__details:after
+    display: none
+
+  .input-group__input
+    flex: 1 1 100%
+
+
+  label
+    flex: 0 1 auto
+    width: auto
+    align-items: center
+    display: inline-flex
+    font-size: 18px
+    transform: none
+
+    + .input-group__input
+      margin-left: 16px
+      flex: 1 0 auto
+
+  &:not(.input-group--disabled).input-group--dirty
+    .slider__track-fill
+      background: $theme.primary
+
+  &.input-group--active
+    .slider__thumb
+      transform: translateY(-50%) scale(1.2)
+
+    .slider__track
+      transition: none
+
+    .slider__thumb-container
+      &--label
+        .slider__thumb
+          transform: translateY(-50%) scale(0)
+
+          &:hover
+            transform: translateY(-50%) scale(0)
+
+    .slider__thumb-container, .slider__track-fill
+      transition: none
+
+    &.input-group--ticks
+      .slider
+        &__track__container:after, &__tick
+          opacity: 1
+
+  &.input-group--dirty
+    .slider__thumb
+      background: $theme.primary
+      border-color: $theme.primary
+
+    .slider__thumb--label
+      background: $theme.primary
+
+  &.input-group--disabled
+    pointer-events: none
+
+    .slider__thumb
+      transform: translateY(-50%) scale(.5)
+      background: transparent
+
+    &.input-group--dirty
+      border-color: transparent
+
+  &.input-group--prepend-icon
+    .slider
+      margin-left: 40px
+
+  &.input-group--append-icon
+    .slider
+      margin-right: 40px
+
+
+/** Slider */
+.slider
+  cursor: default
+  display: flex
+  align-items: center
+  position: relative
+  height: 30px
+  flex: 1
+  user-select: none
+
+
+/** Thumb/Track/Ticks */
+.slider
+  &__track__container
+    position: absolute
+    top: 50%
+    transform: translateY(-50%)
+    height: 2px
+    width: 100%
+    overflow: hidden
+
+    &:after
+      content: ''
+      position: absolute
+      right: 0
+      top: 0
+      height: 2px
+      transition: .3s $transition.swing
+      width: 2px
+      opacity: 0
+
+  &__track, &__thumb, &__tick
+    position: absolute
+    top: 0
+
+  &__track
+    height: 2px
+    left: 0
+    transition: .3s $transition.swing
+    transform-origin: right
+    overflow: hidden
+    width: 100%
+
+    &-fill
+      position: absolute
+      left: 0
+      height: 2px
+      transform-origin: left
+      width: 100%
+      transition: .3s $transition.swing
+
+  &__ticks-container
+    position: absolute
+    left: 0
+    height: 2px
+    width: 100%
+
+  &__ticks-container
+    top: 50%
+    overflow: hidden
+
+  &__tick
+    transition: .3s $transition.swing
+    opacity: 0
+
+  &__thumb-container
+    position: absolute
+    top: 50%
+    transition: .3s $transition.swing
+
+  &__thumb
+    width: 20px
+    height: 20px
+    left: -10px
+    top: 50%
+    border-radius: 50%
+    background: transparent
+    transition: .3s $transition.swing
+    transform: translateY(-50%) scale(.8)
+    user-select: none
+
+
+/** Thumb Label */
+.slider
+  &__thumb--label__container
+    position: absolute
+    left: 0
+    top: 0
+    transition: .3s ease-in-out
+
+  &__thumb--label
+    display: flex
+    align-items: center
+    justify-content: center
+    font-size: 12px
+    color: #fff
+    width: 28px
+    height: 28px
+    border-radius: 50% 50% 0
+    position: absolute
+    left: -14px
+    top: -40px
+    transform: rotate(45deg)
+    user-select: none
+    transition: .3s ease-in-out
+
+    span
+      transform: rotate(-45deg) translateZ(0)

package/src/stylus/components/_small-dialog.styl

@@ -0,0 +1,37 @@
+@import '../bootstrap'
+@import '../theme'
+
+small-dialog($material)
+  &__content
+    background: $material.cards
+
+  &__actions
+    background: $material.cards
+
+  a
+    color: rgba($material.fg-color, $material.primary-text-percent)
+
+theme(small-dialog, "small-dialog")
+
+.small-dialog
+  display: block
+  height: 100%
+
+  &__content
+    padding: 0 24px
+
+  &__actions
+    text-align: right
+
+  a
+    display: flex
+    align-items: center
+
+    height: 100%
+    text-decoration: none
+
+    > *
+      width: 100%
+
+  .menu__activator
+    height: 100%

package/src/stylus/components/_snackbars.styl

@@ -0,0 +1,110 @@
+@import '../bootstrap'
+
+.snack
+  background-color: $snackbar-background-color
+  position: fixed
+  display: flex
+  height: 0
+  pointer-events: none
+  visibility: visible
+  z-index: 7
+
+  &--absolute
+    position: absolute
+
+  &--top
+    top: 0
+    left: 50%
+    transform: translate3d(-50%, 0, 0) translateZ(0)
+
+  &--bottom
+    bottom: 48px
+    left: 50%
+    transform: translate3d(-50%, 0, 0) translateZ(0)
+
+  &--left
+    left: 8px
+    right: initial
+    transform: none
+
+    &.snack--top
+      top: 8px
+
+    &.snack--bottom
+      bottom: 56px
+
+  &--right
+    left: initial
+    right: 8px
+    transform: none
+
+    &.snack--top
+      top: 8px
+
+    &.snack--bottom
+      top: initial
+      bottom: 56px
+
+  &__content
+    background-color: inherit
+    padding: 14px 24px
+    border-radius: 2px
+    pointer-events: auto
+    max-width: 568px
+    min-width: 288px
+    height: 48px
+    align-items: center
+    color: #fff
+    display: flex
+    font-size: 14px
+    justify-content: space-between
+    transition: .4s $transition.swing
+    position: relative !important
+    elevation(6)
+
+    .btn
+      margin: 0 0 0 48px
+
+.snack
+  &--multi-line &__content
+    height: 80px
+    padding: 24px
+
+  &--bottom, &--right
+    &.snack--multi-line
+      bottom: 80px
+
+  &--vertical &__content
+    height: 112px
+    padding: 24px 24px 14px
+    flex-direction: column
+    align-items: initial
+
+    .btn
+      align-self: flex-end
+
+  &--bottom, &--right
+    &.snack--vertical
+      bottom: 112px
+
+@media $display-breakpoints.xs-only
+  .snack
+    width: 100%
+    left: 0
+    right: initial
+    transform: none
+
+    &--right, &--left
+      &.snack--top
+        top: 0
+
+      &.snack--bottom
+        bottom: 48px
+
+    &__content
+      border-radius: 0
+      max-width: 100%
+      width: 100%
+
+      .btn
+        margin: 0 0 0 24px

package/src/stylus/components/_speed-dial.styl

@@ -0,0 +1,78 @@
+@import '../bootstrap'
+
+.speed-dial
+  position: relative
+
+  &--absolute
+    position: absolute
+
+  &--fixed
+    position: fixed
+
+  &--top
+    &:not(.speed-dial--absolute)
+      top: $grid-gutters.lg
+
+    &.speed-dial--absolute
+      top: 50%
+      transform: translateY(-50%)
+
+  &--bottom
+    &:not(.speed-dial--absolute)
+      bottom: $grid-gutters.lg
+
+    &.speed-dial--absolute
+      bottom: 50%
+      transform: translateY(50%)
+
+  &--left
+    left: $grid-gutters.lg
+
+  &--right
+    right: $grid-gutters.lg
+
+  &--direction
+    &-left,
+    &-right
+      .speed-dial__list
+        height: 100%
+        top: 0
+
+    &-top,
+    &-bottom
+      .speed-dial__list
+        left: 0
+        width: 100%
+
+    &-top
+      .speed-dial__list
+        flex-direction: column-reverse
+        bottom: 100%
+
+    &-right
+      .speed-dial__list
+        flex-direction: row
+        left: 100%
+
+    &-bottom
+      .speed-dial__list
+        flex-direction: column
+        top: 100%
+
+    &-left
+      .speed-dial__list
+        flex-direction: row-reverse
+        right: 100%
+
+/** Elements */
+.speed-dial__list
+  align-items: center
+  display: flex
+  justify-content: center
+  position: absolute
+
+  .btn
+    for n in (1..7)
+      &:nth-child({n})
+        transition-delay: "%ss" % (n * .05)
+

package/src/stylus/components/_steppers.styl

@@ -0,0 +1,216 @@
+@import '../bootstrap'
+@import '../theme'
+
+stepper($material)
+  background: $material.bg-color
+
+  .stepper__step
+    &:not(.stepper__step--active):not(.stepper__step--complete):not(.stepper__step--error)
+      .stepper__step__step
+        background: rgba($material.fg-color, $material.disabledORhints-text-percent)
+
+    &__step
+      color: $material.stepper.active
+
+      .icon
+        color: $material.stepper.active
+
+  .stepper__header
+    .divider
+      background: rgba($material.fg-color, $material.divider-percent)
+
+  .stepper__step
+    &--active
+      .stepper__label
+        text-shadow: 0px 0px 0px rgba($material.fg-color, 1)
+
+    &--editable:hover
+      background: rgba($material.fg-color, .06)
+
+      .stepper__label
+        text-shadow: 0px 0px 0px rgba($material.fg-color, 1)
+
+    &--complete
+      .stepper__label
+        color: $material.stepper.completed
+
+    &--inactive
+      &.stepper__step--editable
+        &:hover
+          .stepper__step__step
+            background: $material.stepper.hover
+
+  .stepper__label
+    color: rgba($material.fg-color, $material.disabledORhints-text-percent)
+
+    small
+      color: rgba($material.fg-color, $material.secondary-text-percent)
+
+  &--non-linear
+    .stepper__step:not(.stepper__step--complete)
+      .stepper__label
+        color: rgba($material.fg-color, $material.secondary-text-percent)
+
+  &--vertical
+    .stepper__content:not(:last-child)
+      border-left: 1px solid rgba($material.fg-color, $material.divider-percent)
+
+theme(stepper, "stepper")
+
+.stepper
+  overflow: hidden
+  position: relative
+  elevation(2)
+
+.stepper
+  &__header
+    align-items: stretch
+    display: flex
+    flex-wrap: wrap
+    justify-content: space-between
+    elevation(2)
+
+    .divider
+      align-self: center
+      margin: 0 -16px
+
+.stepper
+  &__items
+    position: relative
+    overflow: hidden
+
+.stepper
+  &__step__step
+    align-items: center
+    border-radius: 50%
+    display: inline-flex
+    font-size: 12px
+    justify-content: center
+    height: 24px
+    margin-right: 8px
+    min-width: 24px
+    width: 24px
+    transition: .3s $transition.fast-in-fast-out
+
+    .icon
+      font-size: 18px
+
+.stepper
+  &__step
+    align-items: center
+    display: flex
+    flex-direction: row
+    padding: 24px
+    position: relative
+
+    &--active
+      .stepper__label
+        transition: .3s $transition.ease-in-out
+
+      .stepper__step__step
+        background: $theme.primary
+
+    &--editable
+      cursor: pointer
+
+    &--complete
+      .stepper__step__step
+        background: $theme.primary
+
+    &.stepper__step--error
+      color: $theme.error
+
+      .stepper__step__step
+        background: transparent
+        color: inherit
+
+        .icon
+          font-size: 24px
+          color: inherit
+
+      .stepper__label
+        color: inherit
+        text-shadow: none
+        font-weight: 500
+
+        small
+          color: $theme.error
+
+.stepper
+  &__label
+    align-items: flex-start
+    display: flex
+    flex-direction: column
+    text-align: left
+
+    small
+      font-size: 12px
+      font-weight: 300
+      text-shadow: none
+
+.stepper
+  &__wrapper
+    overflow: hidden
+    transition: none
+
+.stepper
+  &__content
+    top: initial
+    bottom: 0
+    padding: 16px
+    flex: 1
+    // Chrome has an issue with overflow hidden for rendering
+    // Originally used translateZ but this messes up fixed
+    // elements within the stepper
+    // Fix for #512 and #620
+    // overflow: hidden
+    width: 100%
+
+    .btn
+      margin-left: 0
+
+  &--is-booted
+    .stepper__content, .stepper__wrapper
+      transition: .4s $transition.ease-in-out
+
+.stepper
+  &--vertical
+    padding-bottom: 36px
+
+    .stepper__content
+      margin: -8px -36px -16px 36px
+      padding: 16px 60px 16px 23px
+      width: auto
+
+    .stepper__step
+      padding: 24px 24px 16px
+
+    .stepper__step__step
+      margin-right: 12px
+
+  &--alt-labels
+    .stepper__header
+      .divider
+        margin: 35px -67px 0
+        align-self: flex-start
+
+    .stepper__step
+      flex-direction: column
+      justify-content: flex-start
+      align-items: center
+      flex-basis: 175px
+
+      small
+        align-self: center
+
+    .stepper__step__step
+      margin-right: 0
+      margin-bottom: 12px
+
+@media $display-breakpoints.sm-and-down
+  .stepper:not(.stepper--vertical)
+    .stepper__label
+      display: none
+
+    .stepper__step__step
+      margin-right: 0

package/src/stylus/components/_subheaders.styl

@@ -0,0 +1,18 @@
+@import '../bootstrap'
+@import '../theme'
+
+subheader($material)
+  color: $material.text.primary
+
+theme(subheader, "subheader")
+
+.subheader
+  height: $list-item-single-height
+  display: flex
+  align-items: center
+  font-size: $subheader-height-font-size
+  font-weight: $subheader-font-weight
+  padding: 0 $list-right-padding 0 $list-left-padding
+
+  &--inset
+    margin-left: $subheader-inset-margin