material 0.4.3 → 0.5.1

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

@@ -0,0 +1,101 @@
+
+// type raised
+.material-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
+.material-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
+.material-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 .material-button.type-raised,
+.material-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.bak/button/stroked.sass

@@ -0,0 +1,71 @@
+
+// type stroked
+.material-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
+.material-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
+.material-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 .material-button.type-stroked,
+.material-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.bak/component/component.sass

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

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

@@ -0,0 +1,17 @@
+.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.bak/component/image.sass

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

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

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

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

@@ -0,0 +1,138 @@
+// 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.bak/component/subheader.sass

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

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

@@ -0,0 +1,85 @@
+.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;

package/src/skin/material.bak/container/appbar.sass

@@ -0,0 +1,167 @@
+.material-appbar
+  display: flex
+  flex-direction: row
+  height: 64px
+
+  position: absolute
+  top: 0
+  left: 0
+  right: 0
+
+  z-index: 3
+  flex: none
+  display: flex
+  flex-direction: row
+  flex-wrap: nowrap
+  padding: 14px 16px
+
+  &.type-bottom
+    bottom: 0
+    top: inherit
+
+  &.type-app
+    z-index: 5
+    padding: 14px 16px
+    position: fixed
+    &.is-flexible
+      position: fixed
+    &.is-scrolled
+      transition: box-shadow .3s
+      box-shadow: 0 0 4px rgba(0, 0, 0, 0.14),0 4px 8px rgba(0, 0, 0, 0.28)
+
+
+  &.is-flexible
+    position: absolute
+    top: 0
+    left: 0
+    right: 0
+    //display: block
+
+  &.is-fixed
+    position: absolute
+    top: 0
+    left: 0
+    right: 0
+    //display: block
+    &.is-scrolled
+      transition: box-shadow .3s
+      box-shadow: 0 0 4px rgba(0, 0, 0, 0.14),0 4px 8px rgba(0, 0, 0, 0.28)
+    &.type-bottom
+      bottom: 0
+      top: inherit
+
+
+ 
+
+  
+
+  
+  > *
+    &:first-child
+      margin-left: 0
+
+    &:last-child
+      margin-right: 0
+
+
+  .material-text
+    flex: 1
+    display: inline-block
+    font-size: 1.3rem
+    font-weight: 300
+    line-height: 2.3rem
+    color: $primary-color-text
+    padding: 0
+    margin-left: 16px
+    overflow: hidden
+    white-space: nowrap
+    text-overflow: ellipsis
+
+  .material-checkbox
+    padding: 0
+    .checkbox-control
+      height: 36px
+      width: 36px
+      margin: 0
+      .checkbox-icon
+        border: 2px solid rgba(255, 255, 255, 0.95)
+    .checkbox-label
+      color: $primary-color-text
+      padding: 10px 0 6px
+
+
+
+  .material-button
+    .button-icon
+      svg
+        fill: $primary-color-text
+
+
+  &.transparent-color
+    background-color: transparent
+    .material-text
+      color: $default-color-text
+    .material-button
+      .button-icon
+        svg
+          fill: $default-color-text
+    .material-checkbox
+      padding: 0
+      .checkbox-control
+        height: 36px
+        width: 36px
+        margin: 0
+        .checkbox-icon
+          border: 2px solid rgba(255, 255, 255, 0.95)
+      .checkbox-label
+        color: $default-color-text
+        padding: 10px 0 6px
+
+  &.primary-color
+    background-color: $primary-color
+    .material-text
+      color: $primary-color-text
+    .material-button
+      .button-icon
+        svg
+          fill: $primary-color-text
+    .material-checkbox
+      padding: 0
+      .checkbox-control
+        height: 36px
+        width: 36px
+        margin: 0
+        .checkbox-icon
+          border: 2px solid rgba(255, 255, 255, 0.95)
+      .checkbox-label
+        color: $primary-color-text
+        padding: 10px 0 6px
+
+  &.secondary-color
+    background-color: $secondary-color
+    .material-text
+      color: $secondary-color-text
+    .material-button
+      .button-icon
+        svg
+          fill: $secondary-color-text
+    .material-checkbox
+      padding: 0
+      .checkbox-control
+        height: 36px
+        width: 36px
+        margin: 0
+        .checkbox-icon
+          border: 2px solid rgba(255, 255, 255, 0.95)
+      .checkbox-label
+        color: $secondary-color-text
+        padding: 10px 0 6px
+
+
+
+
+// @media only screen and (max-width: 768px)
+//   .material-appbar
+//     &.type-app
+//       padding: 10px 16px
+    

package/src/skin/material.bak/container/banner.sass

@@ -0,0 +1,38 @@
+.material-banner
+	
+	padding: 20px 16px 16px
+	border-bottom: 1px solid rgba(0, 0, 0, 0.1)
+	background-color: white
+	position: absolute
+	overflow: hidden
+	bottom: 0
+	left: 0
+	right: 0
+	//transform: translateY(0)
+	// &.is-fixed
+	// 	position: absolute
+	// 	top: 0
+	// 	left: 0
+	// 	right: 0
+	//transition: top .3s
+	.material-toolbar
+		padding-top: 16px
+
+.banner-wrapper
+	position: relative
+	overflow: hidden
+	z-index: 4
+	height: 0
+	transition: height .2s
+	&.is-fixed
+		z-index: 4
+		position: absolute
+		top: 0
+		left: 0
+		right: 0
+	&.is-shown
+		transition: height .2s
+		//padding: 0
+		//border: none
+		//transform: translateY(-150px)
+		//

package/src/skin/material.bak/container/card.sass

@@ -0,0 +1,18 @@
+.card
+  flex-direction: column
+  -webkit-box-pack: end
+  -ms-flex-pack: end
+  justify-content: flex-end
+  padding: 0
+  -webkit-box-sizing: border-box
+  box-sizing: border-box
+  border-radius: 2px
+  overflow: hidden
+  display: block
+  background-color: rgba(255,255,255,1)
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)
+  .material-container
+    padding: 1rem
+  .toolbar-action
+    text-align: right
+    padding: 8px

package/src/skin/material.bak/container/container.sass

@@ -0,0 +1 @@
+