material 0.9.24 → 0.9.26

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

@@ -0,0 +1,145 @@
+
+// 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, {
+  /* empty */
+}
+.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.scss

@@ -0,0 +1,102 @@
+
+// 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 {
+    /* empty */
+  }
+    //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, {
+  /* empty */
+}
+.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.scss

@@ -0,0 +1,11 @@
+.material-component {
+  background-color: $background-color;
+
+
+}
+.dark-mode .material-component, {
+  /* empty */
+}
+.material-component.dark-mode {
+  background-color: $background-color-dark;
+}

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

@@ -0,0 +1,22 @@
+.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.scss

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

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

@@ -0,0 +1,4 @@
+.material-label {
+  line-height: 1.3rem;
+
+}

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

@@ -0,0 +1,15 @@
+.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.scss

@@ -0,0 +1,176 @@
+// 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 {
+        /* empty */
+      }
+      -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 {
+        /* empty */
+      }
+      -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.scss

@@ -0,0 +1,5 @@
+.component-subheader {
+  margin-left: 16px;
+  margin-right: 16px;
+
+}

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

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