material 0.9.25 → 0.9.27

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

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

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

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

@@ -0,0 +1,100 @@
+.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/container/appbar.scss

@@ -0,0 +1,202 @@
+.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/container/banner.scss

@@ -0,0 +1,43 @@
+.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/container/card.scss

@@ -0,0 +1,22 @@
+.material-card {
+
+  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);
+  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);
+  .material-container {
+    padding: 1rem;
+  }
+  .toolbar-action {
+    text-align: right;
+    padding: 8px;
+  }
+}

package/src/skin/material/container/container.scss

@@ -0,0 +1,2 @@
+
+

package/src/skin/material/container/dialog.scss

@@ -0,0 +1,192 @@
+.dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+
+  //display: none;
+  //visibility: hidden;
+  opacity: 0;
+
+  //z-index: -1;
+  transition: .2s;
+
+  &.show {
+    // display: flex;
+    // width: 10;
+    // height: 0;
+    //transition: .2s;
+    transition: .1s;
+    opacity: 1;
+
+    .surface {
+      transform: translateY(0) scale(1);
+      opacity: 1;
+      margin-top: 0;
+      transition: .1s;
+    }
+  }
+
+  .surface {
+    transition: .1s;
+    max-height: 600px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    opacity: 0;
+    border-radius: 2px;
+    background-color: $background-color;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    transform: translateY(150px) scale(0.8);
+  }
+}
+
+.material-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+
+  //height: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+
+  //display: none;
+  //visibility: hidden;
+  z-index: 20;
+  opacity: 0;
+
+  //z-index: -1;
+  transition: .2s;
+
+  .dialog-surface {
+    transition: .1s;
+    max-height: 600px;
+    display: flex;
+    min-width: 320px;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    opacity: 0;
+    overflow: hidden;
+    border-radius: 2px;
+    background-color: $background-color;
+    overflow: scroll;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    transform: translateY(150px) scale(0.8);
+
+    // >*:first-child
+    //   margin-top: 24px
+
+
+    .dialog-title {
+      font-weight: bold;
+      flex: none;
+      margin: 24px 24px 24px 24px;
+      padding: 0;
+    }
+
+    .dialog-content {
+      flex: 1;
+      padding: 0 24px 24px 24px;
+      &.material-text {
+        opacity: .7;
+      }
+    }
+
+    .dialog-actions {
+      flex: none;
+      display: block;
+      text-align: right;
+      overflow: hidden;
+      //padding: 8px
+    }
+
+    .material-toolbar {
+      position: relative;
+    }
+
+    .component-body {
+      flex: 1;
+      overflow: hidden;
+      position: relative;
+      padding: 16px;
+    }
+
+    .list-list {
+      overflow: scroll;
+      position: relative;
+      padding: 0;
+      border-top: 1px solid rgba(0, 0, 0, 0.1);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    }
+
+    .component-action {
+      flex: none;
+      display: 'flex';
+      text-align: right;
+
+      // float: right;
+      // justify-content: flex-end;
+      padding: 8px;
+
+      .material-button {
+        margin: 0 0 0 8px;
+      }
+    }
+  }
+
+  &.dialog-show {
+    // display: flex;
+    // width: 10;
+    // height: 0;
+    //transition: .2s;
+    transition: .1s;
+    opacity: 1;
+
+    //
+    .dialog-surface {
+      transform: translateY(0) scale(1);
+      opacity: 1;
+      margin-top: 0;
+      transition: .1s;
+    }
+  }
+
+  &.dialog-closing {
+    pointer-events: none;
+    opacity: 0;
+
+    // display: flex;
+    // width: 10;
+    // height: 0;
+    transition: .2s;
+
+    // transition: .2s;
+    //opacity: 1;
+    //
+    .dialog-surface {
+      opacity: 0;
+      transform: translateY(150px) scale(0.8);
+      transition: .1s;
+    }
+  }
+}
+
+.dark-mode .material-dialog,
+.material-dialog.dark-mode {
+  .dialog-surface {
+    background-color: $background-color-dark;
+  }
+}