kdutify 0.16.9-rc.0

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

@@ -0,0 +1,199 @@
+@import '../bootstrap'
+@import '../theme'
+
+/** Themes */
+date-picker($material)
+  .picker--time__clock
+    background: $material.picker.clock
+
+    &-hand:before
+      border-color: $theme.accent
+
+    &-hand, &:after
+      background: $theme.accent
+
+    > span
+      &:not(.disabled)
+        color: $material.text.primary
+
+      &.active
+        color: $material.picker.buttons
+
+        &:before
+          background: $theme.accent
+
+  .picker__title
+    div:first-child
+      span
+        color: #fff
+
+    div:last-child
+      color: #fff
+
+theme(date-picker, "picker--time")
+
+.picker--time
+  .card__row--actions
+    margin-top: -10px
+
+  &.picker--dark
+    .picker--time__clock
+      > span
+        &.disabled
+          color: $button-light-disabled-color
+
+  &.picker--landscape
+    flex-wrap: wrap
+
+    .picker__title
+      flex-direction: column
+      justify-content: center
+
+      div:first-child
+        text-align: right
+
+        span
+          height: 55px
+          font-size: 55px
+
+      div:last-child
+        margin: 16px 0 0
+        align-self: initial
+        text-align: center
+
+    .picker--time__clock
+      height: 250px
+      width: 250px
+
+      &-hand
+        height: 97px
+
+/** Title */
+.picker--time
+  .picker__title
+    display: flex
+    justify-content: flex-end
+
+    div:first-child
+      white-space: nowrap
+
+      span
+        align-items: center
+        cursor: pointer
+        display: inline-flex
+        height: 70px
+        font-size: 70px
+        justify-content: center
+        opacity: .6
+        transition: .3s $transition.swing
+
+        &.active
+          opacity: 1
+
+    div:last-child
+      align-self: flex-end
+      display: flex
+      flex-direction: column
+      font-size: 16px
+      margin: 8px 0 6px 8px
+
+      span
+        cursor: pointer
+        opacity: .6
+        transition: .3s $transition.swing
+
+        &.active
+          opacity: 1
+
+    div:only-child
+      flex-direction: row
+
+/** Clock */
+.picker--time__clock
+  height: 270px
+  width: 270px
+  border-radius: 100%
+  position: absolute
+  user-select: none
+  top: 50%
+  left: 50%
+  transition: .5s $transition.swing
+  transform: translate(-50%, -50%)
+
+  &-hand
+    height: 40%
+    width: 2px
+    background: $theme.primary
+    bottom: 50%
+    left: calc(50% - 1px)
+    transform-origin: center bottom
+    position: absolute
+
+    &:before
+      background: transparent
+      border: 2px solid $theme.primary
+      border-radius: 100%
+      width: 10px
+      height: 10px
+      content: ''
+      position: absolute
+      top: -3%
+      left: 50%
+      transform: translate3d(-50%, -50%, 0)
+
+  &:after
+    content: ''
+    position: absolute
+    height: 8px
+    width: 8px
+    top: 50%
+    left: 50%
+    background: $theme.primary
+    border-radius: 100%
+    transform: translate3d(calc(-50%, - 1px), -50%, 0)
+
+  > span
+    align-items: center
+    border-radius: 100%
+    cursor: default
+    display: flex
+    font-size: $time-picker-number-font-size
+    justify-content: center
+    left: 'calc(50% - %s)' % $time-picker-number-font-size
+    height: $time-picker-number-font-size * 2
+    position: absolute
+    text-align: center
+    top: 'calc(50% - %s)' % $time-picker-number-font-size
+    width: $time-picker-number-font-size * 2
+    user-select: none
+
+    > span
+      z-index: 1
+
+    &:before, &:after
+      content: ''
+      border-radius: 100%
+      position: absolute
+      top: 50%
+      left: 50%
+      height: 14px
+      width: 14px
+      transform: translate3d(-50%, -50%, 0)
+
+    &:after, &:before
+      height: $time-picker-number-font-size * 2.5
+      width: $time-picker-number-font-size * 2.5
+
+    &.active
+      color: #fff
+      cursor: default
+
+      &:before
+        background: $theme.primary
+
+    &.disabled
+      color: $button-dark-disabled-color
+      pointer-events: none
+
+.picker--time .card__row--actions
+  border: none

package/src/stylus/components/_toolbar.styl

@@ -0,0 +1,148 @@
+@import '../bootstrap'
+@import '../theme'
+
+/* Theme */
+toolbar($material)
+  background-color: $material.app-bar
+  color: $material.text.primary
+
+  .btn:not(.btn--disabled)
+    color: $material.icons.active
+
+theme(toolbar, "toolbar")
+
+.toolbar
+  position: relative
+  transition: .3s $transition.swing
+  width: 100%
+  will-change: padding-left
+  elevation(4)
+
+  .input-group--solo
+    .input-group__details
+      display: none
+      
+  .input-group--single-line:not(.input-group--solo)
+    padding: 0
+
+    label
+      top: auto
+
+/** Children */
+.toolbar
+  &__title
+    font-size: $headings.h6.size
+    font-weight: $headings.h6.weight
+    letter-spacing: $headings.h6.letter-spacing
+    margin-left: 16px
+    white-space: nowrap
+    overflow: hidden
+    text-overflow: ellipsis
+
+  &__content, &__extension
+    align-items: center
+    display: flex
+
+    > .list
+      flex: 1 1 auto
+      margin: 0 !important // come back to this
+      max-height: 100%
+
+    > .btn:last-child, > .menu:first-child
+      margin-right: 8px
+
+    > .btn:first-child, > .menu:first-child
+      margin-left: 8px
+
+    > *:not(.btn):not(.menu):first-child
+      margin-left: $grid-gutters.lg
+
+    > *:not(.btn):not(.menu):last-child
+      margin-right: $grid-gutters.lg
+
+  &__items
+    display: flex
+    height: 100%
+    max-width: 100%
+    padding: 0
+    
+    .menu
+      height: 100%
+
+    > .menu .menu__activator
+      height: 100%
+
+      .btn
+        height: 100%
+        margin: 0
+
+    > .btn
+      height: 100%
+      margin: 0
+
+  @media $display-breakpoints.xs-only
+    .toolbar__content,
+    .toolbar__extension
+      > .btn:last-child
+        margin-right: 17px
+
+      > .btn:first-child
+        margin-left: 17px
+
+      > *:not(.btn):not(.menu):first-child
+        margin-left: $grid-gutters.xl
+
+      > *:not(.btn):not(.menu):last-child
+        margin-right: $grid-gutters.xl
+
+  @media all and (max-width: $grid-breakpoints.sm) and (orientation: portrait)
+    toolbar-content(7px)
+
+/** Types */
+.toolbar
+  &--card
+    border-radius: $card-border-radius $card-border-radius 0 0
+    elevation(0)
+
+  &--fixed
+    position: fixed
+    z-index: 2
+
+  &--fixed, &--absolute
+    top: 0
+    left: 0
+
+  &--absolute
+    position: absolute
+    z-index 2
+
+  &--floating
+    display: inline-flex
+    margin: 16px
+    width: auto
+  
+  &--clipped
+    z-index: 3
+
+  &--prominent
+    toolbar-content(15px)
+
+  &--dense
+    toolbar-content(7px)
+
+.toolbar__extension
+  .toolbar__title
+    margin-left: 72px !important
+
+  .tabs__bar
+    align-self: flex-end
+    margin: 0
+
+toolbar-content(left)
+  .toolbar__content,
+  .toolbar__extension
+    > *:first-child
+      margin-left: left
+
+    > *:last-child
+      margin-right: left

package/src/stylus/components/_tooltips.styl

@@ -0,0 +1,25 @@
+@import '../bootstrap'
+
+.tooltip
+  position: relative
+
+  &__content
+    background: $grey.darken-2
+    border-radius: 2px
+    color: #FFFFFF
+    font-size: 12px
+    display: inline-block
+    padding: 5px 8px
+    position: absolute
+    text-transform: initial
+    transition: .15s $transition.swing
+    width: auto
+    elevation(2)
+
+    &[class*="-active"] {
+      pointer-events: none
+    }
+
+  @media $display-breakpoints.sm-and-down
+    .tooltip__content
+      padding: 10px 16px

package/src/stylus/elements/_blockquote.styl

@@ -0,0 +1,5 @@
+blockquote
+  border-left: 5px solid $theme.primary
+  padding: $spacers.three.y 0 $spacers.three.y $spacers.four.x
+  font-size: 18px
+  font-weight: 300

package/src/stylus/elements/_code.styl

@@ -0,0 +1,20 @@
+code
+  background: $grey.base
+  color: #bd4147
+  display: inline-block
+  background-color: $grey.lighten-4
+  border-radius: 3px
+  white-space: pre-wrap
+  font-size: 85%
+  font-weight: 100
+  font-weight: 900
+  
+  &:after,
+  &:before
+    content: "\00a0"
+    letter-spacing: -1px
+    
+kbd
+  @extend code
+  background: $grey.darken-3
+  color: #fff

package/src/stylus/elements/_global.styl

@@ -0,0 +1,31 @@
+html, body
+  height: 100%
+  min-height: 100%
+  position: relative
+  width: 100%
+
+html
+  font-size: $font-size-root
+  text-rendering: optimizeLegibility
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
+  overflow-x: hidden
+
+body
+  font-family: $body-font-family
+  line-height: $line-height-root
+
+// TODO: deprecate
+header
+  transition: .3s padding $transition.swing
+  width: 100%
+  z-index: 1
+
+main
+  transition: .3s padding $transition.swing
+  will-change: padding-left
+
+::-ms-clear
+::-ms-reveal
+  display: none

package/src/stylus/elements/_headings.styl

@@ -0,0 +1,17 @@
+heading($material)
+  color: $material.text.primary
+
+theme(heading, "heading")
+
+for heading, options in $headings
+  {heading}
+    font-size: options.size
+    font-weight: options.weight
+    if options.line-height
+      line-height: options.line-height
+    if options.letter-spacing
+      letter-spacing: options.letter-spacing
+    margin-bottom: $spacers.three.y
+    
+    @media screen and (max-width: $grid-breakpoints.sm)
+      font-size: options.size * .6

package/src/stylus/elements/_lists.styl

@@ -0,0 +1,2 @@
+ul, ol
+  padding-left: $spacers.four.x

package/src/stylus/elements/_typography.styl

@@ -0,0 +1,54 @@
+.display-4
+  font-size: $headings.h1.size !important
+  font-weight: $headings.h1.weight
+  line-height: $headings.h1.line-height !important
+  letter-spacing: $headings.h1.letter-spacing !important
+  
+.display-3
+  font-size: $headings.h2.size !important
+  font-weight: $headings.h2.weight
+  line-height: $headings.h2.line-height !important
+  letter-spacing: $headings.h2.letter-spacing !important
+  
+.display-2
+  font-size: $headings.h3.size !important
+  font-weight: $headings.h3.weight
+  line-height: $headings.h3.line-height !important
+  letter-spacing: $headings.h3.letter-spacing !important
+  
+.display-1
+  font-size: $headings.h4.size !important
+  font-weight: $headings.h4.weight
+  line-height: $headings.h4.line-height !important
+  letter-spacing: $headings.h4.letter-spacing !important
+  
+.headline
+  font-size: $headings.h5.size !important
+  font-weight: $headings.h5.weight
+  line-height: $headings.h5.line-height !important
+  letter-spacing: $headings.h5.letter-spacing !important
+  
+.title
+  font-size: $headings.h6.size !important
+  font-weight: $headings.h6.weight
+  line-height: $headings.h6.line-height !important
+  letter-spacing: $headings.h6.letter-spacing !important
+  
+.subheading
+  font-size: $headings.subheading.size !important
+  font-weight: $headings.subheading.weight
+  
+.body-2
+  font-size: $headings.body-2.size !important
+  font-weight: $headings.body-2.weight
+  
+.body-1
+  font-size: $headings.body-1.size !important
+  font-weight: $headings.body-1.weight
+  
+.caption
+  font-size: $headings.caption.size !important
+  font-weight: $headings.caption.weight
+  
+p
+  margin-bottom: $spacers.three.y

package/src/stylus/generic/_bootstrap.styl

@@ -0,0 +1,49 @@
+global-color(color_name, color_value)
+  .{color_name}
+    background-color color_value !important
+    border-color: color_value !important
+
+  .{color_name}--text
+    color color_value !important
+
+    input,
+    textarea
+      caret-color: color_value !important
+
+  .{color_name}--after
+    &:after
+      background: color_value !important
+
+global-color-accent(color_name, color_value)
+  .{color_name}
+    &.{color_type}
+      background-color color_value !important
+      border-color: color_value !important
+
+    &.{color_type}--after
+      &:after
+        background-color: color_value !important
+
+  .{color_name}--text
+    &.text--{color_type}
+      color: color_value !important
+
+      input,
+      textarea
+        caret-color: color_value !important
+
+
+for color_name, color_value in $theme
+  global-color(color_name, color_value)
+
+for color_name, color_value in $shades
+  global-color(color_name, color_value)
+
+if ($color-pack)
+  for color_name, color_color in $colors
+    for color_type, color_value in color_color
+      if color_type == 'base'
+        global-color(color_name, color_value)
+
+      else if color_type != 'shades'
+        global-color-accent(color_name, color_value)