material 0.9.24 → 0.9.26

package/src/skin/material/button/floating.sass

@@ -1,113 +0,0 @@
-
-// type floating
-.button.type-floating
-  min-width: 56px
-  min-height: 56px
-  transition: box-shadow .2s
-  border-radius: 28px
-  padding: 6px
-  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)
-  .button-label
-    display: none
-  .button-icon
-    padding: 0
-    height: 24px
-    width: 24px
-    margin-left: 0
-    svg
-      fill: $default-color-text
-  .material-ripple
-    opacity: .1
-    background-color: rgba(0, 0, 0, 1)
-
-// states
-.button.type-floating
-  background-color: rgba(0, 0, 0, 0.05)
-  &:focus
-    background-color: rgba(0, 0, 0, 0.15)
-    &:hover
-      background-color: rgba(0, 0, 0, 0.15)
-  &:hover
-    background-color: rgba(0, 0, 0, 0.1)
-  &:active
-    box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)
-
-// color
-.button.type-floating
-  &.primary-color
-    background-color: $primary-color
-    color: $primary-color-text
-    .button-icon
-      svg
-        fill: $primary-color-text
-    .material-ripple
-      opacity: .3
-      background-color: $default-color-dark
-
-    &:focus
-      background-color: lighten($primary-color, 15%)
-      &:hover
-        background-color: lighten($primary-color, 15%)
-    &:hover
-      background-color: lighten($primary-color, 7%)
-
-  &.secondary-color
-    background-color: $secondary-color
-    color: $secondary-color-text
-    .button-icon
-      svg
-        fill: $secondary-color-text
-    .material-ripple
-      opacity: .3
-      background-color: $default-color-dark
-    &:focus
-      background-color: lighten($secondary-color, 10%)
-      &:hover
-        background-color: lighten($secondary-color, 10%)
-    &:hover
-      background-color: lighten($secondary-color, 5%)
-
-// theme
-.dark-mode .button.type-floating,
-.button.type-floating.dark-mode
-  .material-ripple
-    opacity: .1
-    background-color: rgba(255, 255, 255, 1)
-  background-color: rgba(255, 255, 255, 0.1)
-  &:focus
-    background-color: rgba(255, 255, 255, 0.2)
-    &:hover
-      background-color: rgba(255, 255, 255, 0.2)
-  &:hover
-    background-color: rgba(255, 255, 255, 0.15)
-  //background-color: rgba(255, 255, 255, 0.95)
-  color: $primary-color-text-dark
-  .button-icon
-    svg
-      fill: $primary-color-text-dark
-  &.primary-color
-    background-color: $primary-color-dark
-    color: $primary-color-text-dark
-    .button-icon
-      svg
-        fill: $primary-color-text-dark
-    &:focus
-      background-color: lighten($primary-color, 15%)
-      &:hover
-        background-color: lighten($primary-color, 15%)
-    &:hover
-      background-color: lighten($primary-color, 7%)
-
-
-  &.secondary-color
-    background-color: $secondary-color-dark
-    color: $secondary-color-text-dark
-    .button-icon
-      svg
-        fill: $secondary-color-text-dark
-    &:focus
-      background-color: lighten($secondary-color, 10%)
-      &:hover
-        background-color: lighten($secondary-color, 10%)
-    &:hover
-      background-color: lighten($secondary-color, 5%)

package/src/skin/material/button/raised.sass

@@ -1,101 +0,0 @@
-
-// type raised
-.button.type-raised
-  min-width: 36px
-  transition: box-shadow .2s
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12)
-  .material-ripple
-    opacity: .1
-    background-color: rgba(0, 0, 0, 1)
-
-// states
-.button.type-raised
-  background-color: rgba(0, 0, 0, 0.05)
-  &:focus
-    background-color: rgba(0, 0, 0, 0.15)
-    &:hover
-      background-color: rgba(0, 0, 0, 0.15)
-  &:hover
-    background-color: rgba(0, 0, 0, 0.1)
-  &:active
-    box-shadow: 0px 4px 4px -3px rgba(0, 0, 0, 0.2), 0px 6px 8px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)
-
-// color
-.button.type-raised
-  &.primary-color
-    background-color: $primary-color
-    color: $primary-color-text
-    .button-icon
-      svg
-        fill: $primary-color-text
-    .material-ripple
-      opacity: .3
-      background-color: $default-color-dark
-
-    &:focus
-      background-color: lighten($primary-color, 15%)
-      &:hover
-        background-color: lighten($primary-color, 15%)
-    &:hover
-      background-color: lighten($primary-color, 7%)
-
-  &.secondary-color
-    background-color: $secondary-color
-    color: $secondary-color-text
-    .button-icon
-      svg
-        fill: $secondary-color-text
-    .material-ripple
-      opacity: .3
-      background-color: $default-color-dark
-    &:focus
-      background-color: lighten($secondary-color, 10%)
-      &:hover
-        background-color: lighten($secondary-color, 10%)
-    &:hover
-      background-color: lighten($secondary-color, 5%)
-
-// theme
-.dark-mode .button.type-raised,
-.button.type-raised.dark-mode
-  .material-ripple
-    opacity: .1
-    background-color: rgba(255, 255, 255, 1)
-  background-color: rgba(255, 255, 255, 0.1)
-  &:focus
-    background-color: rgba(255, 255, 255, 0.2)
-    &:hover
-      background-color: rgba(255, 255, 255, 0.2)
-  &:hover
-    background-color: rgba(255, 255, 255, 0.15)
-  //background-color: rgba(255, 255, 255, 0.95)
-  color: $primary-color-text-dark
-  .button-icon
-    svg
-      fill: $primary-color-text-dark
-  &.primary-color
-    background-color: $primary-color-dark
-    color: $primary-color-text-dark
-    .button-icon
-      svg
-        fill: $primary-color-text-dark
-    &:focus
-      background-color: lighten($primary-color, 15%)
-      &:hover
-        background-color: lighten($primary-color, 15%)
-    &:hover
-      background-color: lighten($primary-color, 7%)
-
-
-  &.secondary-color
-    background-color: $secondary-color-dark
-    color: $secondary-color-text-dark
-    .button-icon
-      svg
-        fill: $secondary-color-text-dark
-    &:focus
-      background-color: lighten($secondary-color, 10%)
-      &:hover
-        background-color: lighten($secondary-color, 10%)
-    &:hover
-      background-color: lighten($secondary-color, 5%)

package/src/skin/material/button/stroked.sass

@@ -1,71 +0,0 @@
-
-// type stroked
-.button.type-stroked
-  min-width: 36px
-  transition: box-shadow .2s
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12)
-  .material-ripple
-    background-color: rgba(255, 255, 255, .3)
-
-// states
-.button.type-stroked
-  &:hover
-    //background-color: #E0E0E0;
-  &:focus
-    background-color: darken(rgba(255, 255, 255, 0.95), 5%)
-    &:active
-      background-color: transparent
-  &:active
-    box-shadow: 0px 4px 4px -3px rgba(0, 0, 0, 0.2), 0px 6px 8px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)
-
-// color
-.button.type-stroked
-  &.primary-color
-    background-color: $primary-color
-    color: $primary-color-text
-    .button-icon
-      svg
-        fill: $primary-color-text
-    &:focus
-      background-color: lighten($primary-color, 10%)
-      color: $primary-color-text
-      &:active
-        background-color: $primary-color
-
-  &.secondary-color
-    background-color: $secondary-color
-    color: $secondary-color-text
-    .button-icon
-      svg
-        fill: $secondary-color-text
-
-    &:focus
-      background-color: lighten($secondary-color, 5%)
-      color: $secondary-color-text
-      &:active
-        background-color: $secondary-color
-
-// theme
-.dark-mode .button.type-stroked,
-.button.type-stroked.dark-mode
-
-  //background-color: rgba(255, 255, 255, 0.95)
-  color: $primary-color-text-dark
-  .button-icon
-    svg
-      fill: $primary-color-text-dark
-
-  &.primary-color
-    background-color: $primary-color-dark
-    color: $primary-color-text-dark
-    .button-icon
-      svg
-        fill: $primary-color-text-dark
-
-  &.secondary-color
-    background-color: $secondary-color-dark
-    color: $secondary-color-text-dark
-    .button-icon
-      svg
-        fill: $secondary-color-text-dark
-

package/src/skin/material/component/component.sass

@@ -1,7 +0,0 @@
-.material-component
-  background-color: $background-color
-
-
-.dark-mode .material-component,
-.material-component.dark-mode
-  background-color: $background-color-dark

package/src/skin/material/component/divider.sass

@@ -1,17 +0,0 @@
-.material-divider
-  display: block
-  font-size: .8em
-  text-transform: uppercase
-  padding: 8px 0
-  margin: 0
-  &.divider-horizontal
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
-  &.divider-vertical
-    border-right: 1px solid rgba(0, 0, 0, 0.1)
-  //background-color: rgba(0, 0, 0, 0.1);
-  &.divider-space
-    display: block
-    padding: 0
-    margin: 0
-    height: 16px
-    border-bottom: none

package/src/skin/material/component/image.sass

@@ -1,6 +0,0 @@
-.material-image
-  &.item-list
-    display: inline-block
-    background-size: cover
-    width: 300px
-    height: 200px

package/src/skin/material/component/label.sass

@@ -1,2 +0,0 @@
-.material-label
-  line-height: 1.3rem

package/src/skin/material/component/navigation.sass

@@ -1,13 +0,0 @@
-.navigation
-  flex: none
-  display: flex
-  flex-direction: column
-  width: 12px
-  margin: 0
-  overflow: hidden
-  background-color: #3a3a3a
-  transition: 0.1s linear width
-  &.type-rail
-    display: flex
-    flex-direction: column
-    width: 80px

package/src/skin/material/component/progress.sass

@@ -1,138 +0,0 @@
-// Here is where the magic happens
-
-
-.material-progress
-  width: 100%
-  height: 4px
-  background-color: lighten($primary-color, 30%)
-  .bar
-    width: 0%
-    height: 100%
-    background-color: $primary-color
-    transition: width 3s
-
-.material-progress.type-indeterminate
-  position: relative
-  height: 4px
-  display: block
-  width: 100%
-  background-color: lighten($primary-color, 30%)
-  overflow: hidden
-  .determinate
-    position: absolute
-    background-color: inherit
-    top: 0
-    bottom: 0
-    background-color: $primary-color
-    transition: width .3s linear
-  .bar
-    background-color: $primary-color
-    &:before
-      content: ''
-      position: absolute
-      background-color: inherit
-      top: 0
-      left: 0
-      bottom: 0
-      will-change: left, right
-      -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite
-      animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite
-    &:after
-      content: ''
-      position: absolute
-      background-color: inherit
-      top: 0
-      left: 0
-      bottom: 0
-      will-change: left, right
-      -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite
-      animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite
-      -webkit-animation-delay: 1.15s
-      animation-delay: 1.15s
-
-@-webkit-keyframes indeterminate
-  0%
-    left: -35%
-    right: 100%
-
-  60%
-    left: 100%
-    right: -90%
-
-  100%
-    left: 100%
-    right: -90%
-
-
-@keyframes indeterminate
-  0%
-    left: -35%
-    right: 100%
-
-  60%
-    left: 100%
-    right: -90%
-
-  100%
-    left: 100%
-    right: -90%
-
-
-@-webkit-keyframes indeterminate-short
-  0%
-    left: -200%
-    right: 100%
-
-  60%
-    left: 107%
-    right: -8%
-
-  100%
-    left: 107%
-    right: -8%
-
-
-@keyframes indeterminate-short
-  0%
-    left: -200%
-    right: 100%
-
-  60%
-    left: 107%
-    right: -8%
-
-  100%
-    left: 107%
-    right: -8%
-
-
-
-.material-progress.type-circular
-  .progress
-    animation: rotator 1.4s linear infinite
-
-  @keyframes rotator
-    0%
-      transform: rotate(0deg)
-
-    100%
-      transform: rotate(270deg)
-
-  .path
-    stroke: #4285F4
-    stroke-dasharray: 187
-    stroke-dashoffset: 0
-    transform-origin: center
-    animation: dash 1.4s ease-in-out infinite
-
-  @keyframes dash
-    0%
-      stroke-dashoffset: 187
-
-    50%
-      stroke-dashoffset: 187 / 4
-      transform: rotate(135deg)
-
-    100%
-      stroke-dashoffset: 187
-      transform: rotate(450deg)

package/src/skin/material/component/subheader.sass

@@ -1,3 +0,0 @@
-.component-subheader
-  margin-left: 16px
-  margin-right: 16px

package/src/skin/material/component/text.sass

@@ -1,85 +0,0 @@
-.material-text
-  // -moz-osx-font-smoothing: grayscale
-  // -webkit-font-smoothing: antialiased
-
-  &.text-display4
-    font-size: 7rem
-    font-weight: 300
-    letter-spacing: -0.04em
-    line-height: 7rem
-
-  &.text-display3
-    font-size: 3.5rem
-    font-weight: 400
-    letter-spacing: -0.02em
-    line-height: 3.5rem
-
-  &.text-display2
-    font-size: 2.813rem
-    font-weight: 400
-    letter-spacing: normal
-    line-height: 3rem
-
-  &.text-display1
-    font-size: 2.125rem
-    font-weight: 400
-    letter-spacing: normal
-    line-height: 2.5rem
-
-  &.text-headline
-    font-size: 1.5rem
-    font-weight: 400
-    letter-spacing: normal
-    line-height: 2rem
-
-  &.text-title
-    font-size: 1.25rem
-    font-weight: 500
-    letter-spacing: 0.02em
-    line-height: 2rem
-
-    // margin-bottom: 30px;
-
-  &.text-subheading2
-    font-size: 1rem
-    font-weight: 400
-    letter-spacing: 0.04em
-    line-height: 1.75rem
-
-  &.text-subheading1
-    font-size: 0.938rem
-    font-weight: 400
-    letter-spacing: 0.04em
-    line-height: 1.5rem
-
-  &.text-body2
-    font-size: 0.875rem
-    font-weight: 500
-    letter-spacing: 0.04em
-    line-height: 1.5rem
-
-  &.text-body1
-    font-size: 0.875rem
-    font-weight: 400
-    letter-spacing: 0.04em
-    line-height: 1.25rem
-
-  &.text-caption
-    font-size: 0.75rem
-    font-weight: 400
-    letter-spacing: 0.08em
-    line-height: 1.25rem
-
-  &.text-button
-    font-size: 14px
-    font-weight: 500
-    text-transform: uppercase
-
-  &.secondary-color
-    color: $secondary-color
-
-  &.primary-color
-    color: $primary-color
-
-
-    // margin-bottom: 30px;