kdutify 0.16.9-rc.0

package/src/stylus/components/_lists.styl

@@ -0,0 +1,263 @@
+@import '../bootstrap'
+@import '../theme'
+
+/* Themes */
+list($material)
+  background: $material.cards
+
+  .list__tile:not(.list__tile--active)
+    color: $material.text.primary
+
+  .list__tile__sub-title
+    color: $material.text.secondary
+
+  .subheader
+    color: $material.text.secondary
+
+  .divider
+    background-color: $material.dividers
+
+  .list__tile__mask
+    color: $material.text.disabled
+
+theme(list, "list")
+
+.list
+  list-style-type: none
+  padding: $list-top-padding 0 $list-bottom-padding
+  transition: height .4s $transition.fast-out-slow-in
+
+  .input-group
+    margin: 0
+
+  > .list__tile ~ .list__tile
+    margin-top: 0
+
+  &__tile
+    font-size: $list-tile-font-size
+    font-weight: $list-tile-font-weight
+    display: flex
+    height: $list-item-single-height
+    text-decoration: none
+    align-items: center
+    padding: 0 16px
+    margin: 0
+    transition: $primary-transition
+    position: relative
+    user-select: none
+
+    &:after
+      content: ''
+      position: absolute
+      left: 0
+      top: 0
+      height: 1px
+      opacity: 0
+      width: 100%
+      transition: $primary-transition
+      background-color: $material-twelve-percent-dark
+
+    &--link
+      cursor: pointer
+
+    &--link:hover, &--highlighted
+      background: $material-twelve-percent-dark
+
+    &__content,
+    &__action,
+    &__avatar
+      height: 100%
+
+    &__title, &__sub-title
+      white-space: nowrap
+      overflow: hidden
+      text-overflow: ellipsis
+      width: 100%
+
+    &__title
+      transition: $primary-transition
+      height: 24px
+      line-height: 24px
+      position: relative
+      text-align: left
+
+    &__sub-title
+      font-size: $list-sub-title-font-size
+
+    .avatar
+      justify-content: flex-start
+      min-width: 56px
+
+    &__action
+      display: flex
+      justify-content: flex-start
+      min-width: 56px
+      align-items: center
+
+      .input-group--selection-controls
+        align-items: center
+        padding: 0
+
+      .input-group__details
+        display: none
+
+      .icon
+        transition: $primary-transition
+
+      .btn //fix button padding if used
+        padding 0
+        margin 0
+        &--icon
+          margin -8px
+
+      &-text
+        color: $list-action-text-font-color
+        font-size: $list-action-text-font-size
+
+      &--stack
+        align-items: flex-end
+        justify-content: space-between
+        padding-top: $list-top-padding
+        padding-bottom: $list-bottom-padding
+        white-space: nowrap
+        flex-direction: column
+
+    &__content
+      text-align: left
+      flex: 1 1 auto
+      overflow: hidden
+      display: flex
+      align-items: flex-start
+      justify-content: center
+      flex-direction: column
+
+      ~ .avatar
+        justify-content: flex-end
+
+      ~ .list__tile__action:not(.list__tile__action--stack)
+        justify-content: flex-end
+
+    &--active
+      color: $list-tile-active-color
+
+      .list__tile__action:first-of-type
+        .icon
+          color: inherit
+
+    &--disabled
+      opacity: 0.4 !important
+      pointer-events: none
+
+    &--avatar
+      height: $list-item-avatar-single-height
+
+      .avatar
+        img,
+        .icon
+          height: 40px
+          width: 40px
+
+  &--dense
+    padding-top: $list-item-dense-top-padding
+    padding-bottom: $list-item-dense-top-padding
+
+    .subheader
+      font-size: $subheader-dense-font-size
+      height: $list-dense-subheader-height
+    .list--group
+      .subheader
+        height $list-dense-subheader-group-height
+    .list__tile
+      font-size: $list-item-dense-font-size
+
+      &--avatar
+        height: $list-item-dense-avatar-single-height
+
+      &:not(.list__tile--avatar)
+        height: $list-item-dense-single-height
+
+      .icon
+        font-size: $list-item-dense-icon-font-size
+
+    .list__tile__sub-title
+      font-size: $list-item-dense-font-size
+
+  &--two-line
+    .list__tile
+      height: $list-item-double-height
+
+    &.list--dense
+      .list__tile
+        height: $list-item-dense-double-height
+
+  &--three-line
+    .list__tile
+      height: $list-item-triple-height
+
+    .list__tile__sub-title
+      white-space: initial
+      -webkit-line-clamp: 2
+      -webkit-box-orient: vertical
+      display: -webkit-box
+
+    &.list--dense
+      .list__tile
+        height: $list-item-dense-triple-height
+
+  &--group
+    position: relative
+    padding: 0
+
+    &:after
+      content: ''
+      position: absolute
+      left: 0
+      bottom: 0
+      height: 1px
+      opacity: 0
+      width: 100%
+      background-color: $material-twelve-percent-dark
+
+    .list__tile
+      padding-left: $list-item-left-padding
+
+    .list__tile--active
+      .list__tile__title
+        color: $theme.primary
+
+    &__header
+      > li:first-child
+        cursor: pointer
+
+        &:hover
+          background: $material-twelve-percent-dark
+
+      + .list--group
+        &:after
+          opacity: 1
+
+      &--active
+        .list__tile
+          background: $material-twelve-percent-dark
+
+          &:after
+            opacity: 1
+
+          .list__tile__title
+            color: inherit
+
+          .list__tile__action:last-of-type
+            .icon
+              transform: rotate(-180deg)
+
+      &--no-action + .list--group
+        .list__tile
+          padding-left: $list-left-padding
+
+  &--subheader
+    padding-top: 0
+
+  &.list--two-line,
+  &.list--three-line
+    .list__tile__avatar
+      align-items: flex-start

package/src/stylus/components/_menus.styl

@@ -0,0 +1,87 @@
+@import '../bootstrap'
+
+.menu
+  display: inline-block
+  position: relative
+  vertical-align: middle
+
+  &--disabled
+    cursor: default
+
+    .menu__activator,
+    .menu__activator > *
+      cursor: default
+      pointer-events: none
+
+  &__activator
+    align-items: center
+    cursor: pointer
+    position: relative
+
+    input[readonly]
+      cursor: pointer
+
+    .toolbar__side-icon
+      margin: 0
+
+  &__content
+    position: absolute
+    display: inline-block
+    border-radius: 2px
+    max-width: 80%
+    overflow-y: auto
+    overflow-x: hidden
+    transition: .3s $transition.swing
+    contain: content
+    elevation(8)
+
+    &--active
+      pointer-events: none
+
+    &--dropdown
+      border-top-left-radius: 0
+      border-top-right-radius: 0
+      border-top: 1px solid $material-light.dividers
+
+    & > .card
+      contain: content
+      backface-visibility: hidden
+
+  &-transition
+    &-enter
+      .list__tile
+        min-width: 0
+        transition-delay: .4s
+        opacity: 0
+        transform: translateY(-15px)
+        pointer-events: none
+
+    &-enter-to
+      .list__tile
+        pointer-events: auto
+        opacity: 1
+
+      .list__tile--active
+        transform: none !important
+
+    &-leave-to
+      transform: translateY(-10px)
+
+    &-leave-active, &-leave-to
+      pointer-events: none
+
+    &-enter, &-leave-to
+      opacity: 0
+
+    &-enter-to, &-leave
+      opacity: 1
+
+    &-enter-active, &-leave-active
+      transition: all .5s $transition.swing
+
+.menu-transition-enter
+  &.menu__content--auto
+    .list__tile--active
+      opacity: 1
+      transform: none !important
+      pointer-events: auto

package/src/stylus/components/_navigation-drawer.styl

@@ -0,0 +1,150 @@
+@import '../bootstrap'
+@import '../theme'
+
+navigation-drawer($material)
+  background-color: $material.cards
+
+  &:not(.navigation-drawer--floating)
+    .navigation-drawer__border
+      background-color: $material.dividers
+
+  a:not(.list__tile--active),
+  .subheader,
+  .list
+    color: $material.text.primary
+
+  .divider
+    background-color: $material.dividers
+
+  .list
+    &__tile:not(.list__tile--active)
+      color: $material.text.primary
+
+      .icon
+        color: $material.icons.active
+
+    &__tile__sub-title
+      color: $material.text.secondary
+      
+
+  .list--group__header--active
+    .list__tile, + .list--group
+      &:after
+        background: $material.dividers
+
+theme(navigation-drawer, "navigation-drawer")
+
+.navigation-drawer
+  max-width: 100%
+  overflow-y: auto
+  overflow-x: hidden
+  -webkit-overflow-scrolling: touch
+  padding: 0 0 100px
+  pointer-events: auto
+  position: fixed
+  transition: .3s $transition.swing
+  top: 0
+  left: 0
+  will-change: transform
+  z-index: 3
+
+  &__border
+    position: absolute
+    right: 0
+    top: 0
+    height: 100%
+    width: 1px
+
+  &.navigation-drawer--right
+    &:after
+      left: 0
+      right: initial
+
+  // Remove animation when booting up
+  &:not(.navigation-drawer--is-booted)
+    transition: none !important
+    z-index: -1
+
+    + .toolbar, ~ main, ~ .footer
+      transition: none !important
+
+      @media $display-breakpoints.sm-and-down
+        padding-left: 0 !important
+
+  &--close:not(.navigation--permanent)
+    &.navigation-drawer:not(.navigation-drawer--right)
+      transform: translate3d(-100%, 0, 0)
+
+    &.navigation-drawer--right
+      transform: translate3d(100%, 0, 0)
+
+  &--right
+    left: auto
+    right: 0
+
+    > .navigation-drawer__border
+      right: auto
+      left: 0
+
+  &--absolute
+    position: absolute
+
+  &--floating:after
+    display: none
+
+  &--mini-variant
+    overflow: hidden
+
+    .list__tile__action,
+    .list__tile__avatar
+      justify-content: center
+      min-width: 48px
+
+    .list__tile__content,
+    .list__tile:after
+      opacity: 0
+
+    .subheader,
+    .divider,
+    .list--group
+      display: none !important
+
+  &--temporary, &--is-mobile:not(.navigation-drawer--permanent)
+    z-index: 6
+
+    &:not(.navigation-drawer--close)
+      elevation(16)
+
+  /** Changed nested components */
+  ~ toolbar
+    + main
+      min-height: "calc(100vh - %s)" % $toolbar-height
+
+  .list
+    background: inherit
+
+  > .list
+    .list__tile
+      transition: none
+      font-weight: $navigation-drawer-item-font-weight
+
+      &--active
+        .list__tile__title
+          color: inherit
+
+    .list--group
+      .list__tile
+        font-weight: $navigation-drawer-group-item-font-weight
+
+      &__header--active
+        &:after
+          background: transparent
+
+    .list--group__container
+      .list__tile--active
+        .list__tile__title
+          color: $navigation-drawer-item-active-color
+
+  > .list:not(.list--dense)
+    .list__tile
+      font-size: $navigation-drawer-item-font-size

package/src/stylus/components/_overlay.styl

@@ -0,0 +1,42 @@
+@import '../bootstrap'
+
+.overlay
+  position: fixed
+  top: 0
+  left: 0
+  right: 0
+  bottom: 0
+  pointer-events: none
+  // The overlay has a dynamically set
+  // z-index, we want the transition
+  // timing to affect its changing
+  transition: .5s $transition.swing
+  // This is the standard index
+  z-index: 5
+
+  &--absolute
+    position: absolute
+
+  &:before
+    background-color: rgba(33, 33, 33, 1)
+    bottom: 0
+    content: ''
+    height: 100%
+    left: 0
+    opacity: 0
+    position: absolute
+    right: 0
+    top: 0
+    transition: inherit
+    // Delay the transition to avoid a
+    // rendering bug that is visible
+    // within Edge and Firefox
+    transition-delay: 150ms
+    width: 100%
+
+  &--active
+    pointer-events: auto
+    touch-action: none
+
+    &:before
+      opacity: .46

package/src/stylus/components/_pagination.styl

@@ -0,0 +1,95 @@
+@import '../bootstrap'
+@import '../theme'
+
+pagination($material)
+  &__item
+    background: $material.cards
+    color: $material.fg-color
+
+    &--active
+      color: $material.text.theme
+      background: $theme.primary
+
+  &__navigation
+    background: $material.cards
+
+    .icon
+      color: rgba($material.fg-color, $material.active-icon-percent)
+
+theme(pagination, "pagination")
+
+.pagination
+  align-items: center
+  align-items: center
+  display: inline-flex
+  list-style-type: none
+  height: 40px
+  margin: 0
+  overflow-x: auto
+  overflow-y: hidden
+  max-width: 100%
+  padding: 0
+
+  > li
+    align-items: center
+    display: flex
+
+  a
+    transition: .3s $transition.linear-out-slow-in
+
+    &:hover
+      elevation(2)
+
+  &--circle
+    .pagination__item,
+    .pagination__more,
+    .pagination__navigation
+      border-radius: 50%
+
+  &--disabled
+    pointer-events: none
+    opacity: .6
+
+  &__item
+    elevation(2)
+    border-radius: 4px
+    display: inline-flex
+    justify-content: center
+    align-items: center
+    background: transparent
+    height: 34px
+    width: 34px
+    margin: .3rem
+    text-decoration: none
+
+    &--active
+      elevation(4)
+
+  &__navigation
+    elevation(2)
+    display: inline-flex
+    justify-content: center
+    align-items: center
+    text-decoration: none
+    height: 2rem
+
+    border-radius: 4px
+    width: 2rem
+    margin: .3rem 10px
+
+    .icon
+      font-size: 2rem
+      transition: $secondary-transition
+      vertical-align: middle
+
+    &--disabled
+      opacity: .6
+      pointer-events: none
+
+  &__more
+    margin: .3rem
+    display: inline-flex
+    align-items: flex-end
+    justify-content: center
+    height: 2rem
+    width: 2rem

package/src/stylus/components/_parallax.styl

@@ -0,0 +1,35 @@
+@import '../bootstrap'
+
+.parallax
+  position: relative
+  overflow: hidden
+  z-index: 0
+
+  &__image-container
+    position: absolute
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    z-index: 1
+
+  &__image
+    position: absolute
+    bottom: 0
+    left: 50%
+    min-width: 100%
+    min-height: 100%
+    display: none
+    transform: translate3d(-50%, 0, 0)
+    transition: .3s opacity $transition.swing
+    z-index: 1
+
+  &__content
+    color: #FFFFFF
+    height: 100%
+    z-index: 2
+    position: relative
+    display: flex
+    flex-direction: column
+    justify-content: center
+    padding: 0 1rem