material 0.9.24 → 0.9.26

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

@@ -0,0 +1,215 @@
+.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,44 @@
+.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,23 @@
+.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,196 @@
+.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, {
+  /* empty */
+}
+.material-dialog.dark-mode {
+  .dialog-surface {
+    background-color: $background-color-dark;
+
+  }
+}

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

@@ -0,0 +1,185 @@
+.material-drawer {
+  opacity: 0;
+  pointer-events: none;
+  z-index: 15;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0);
+
+  &.is-fixed {
+    position: fixed;
+
+  }
+  .drawer-panel {
+    background-color: rgba(255,255,255, 1);
+    z-index: 8;
+    position: relative;
+    will-change: transfo1rm;
+    transition: 0.3s cubic-bezier(0.4, 0, 0.6, 1);
+    transform: translateX(calc(100% - 20px));
+    background-color: rgba(255, 255, 255, 1);
+    width: 0;
+
+  }
+  &.show {
+    pointer-events: initial;
+    background-color: rgba(0, 0, 0, 0);
+    opacity: 1;
+    .drawer-panel {
+      transition: 233ms cubic-bezier(0,0,.21,1);
+      opacity: 1;
+      transform: translateX(0);
+      transition: 0.2s cubic-bezier(0, 0, 0.2, 1);
+      background-color: rgba(255, 255, 255, 1);
+
+    }
+  }
+}
+.material-drawer.drawer-temporary {
+  opacity: 0;
+  pointer-events: none;
+  z-index: 15;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  transition: 0.2s cubic-bezier(0, 0, 0.2, 1);
+
+  &.show {
+    pointer-events: initial;
+    background-color: rgba(0, 0, 0, 0.7);
+    opacity: 1;
+    transition: 0.2s cubic-bezier(0, 0, 0.2, 1);
+    .drawer-panel {
+      width: 340px;
+      transform: none;
+
+    }
+  }
+  &.is-fixed {
+    position: fixed;
+
+  }
+  .drawer-panel {
+    position: absolute;
+    height: 100%;
+    width: 260px;
+    transform: translateX(calc(-100% - 20px));
+    z-index: 16;
+    box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
+    transition: 233ms cubic-bezier(0,0,.21,1);
+
+  }
+}
+.material-drawer.drawer-persistent {
+  opacity: 0;
+  pointer-events: none;
+  z-index: 15;
+  flex: 1;
+  position: relative;
+  display: inline;
+  // right: 0
+  // top: 0
+  // bottom: 0
+  // left: 0
+  transition: 0.2s cubic-bezier(0, 0, 0.2, 1);
+  height: 100%;
+  width: initial;
+
+  &.is-fixed {
+    position: fixed;
+
+  }
+  .drawer-panel {
+    position: relative;
+    height: 100%;
+    width: 0px;
+    //transform: translateX(calc(-100% - 20px))
+    transform: none;
+    z-index: 16;
+    //box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12)
+    transition: 233ms cubic-bezier(0,0,.21,1);
+    border-right: 1px solid rgb(228, 228, 228);
+
+  }
+  .content-persistent {
+    /* empty */
+  }
+    //flex: 1
+
+  &.show {
+    pointer-events: initial;
+    //background-color: rgba(0, 0, 0, 0.7)
+    opacity: 1;
+    transition: 0.2s cubic-bezier(0, 0, 0.2, 1);
+    .drawer-panel {
+      width: 240px;
+      transform: none;
+      background-color: rgba(0,0,0,.05);
+
+
+
+
+    }
+  }
+}
+.material-drawer.drawer-permanent {
+  opacity: 1;
+  pointer-events: none;
+  z-index: 15;
+  flex: 1;
+  position: relative;
+  display: inline;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  transition: 0.2s cubic-bezier(0, 0, 0.2, 1);
+  height: 100%;
+  width: initial;
+
+  &.is-fixed {
+    position: fixed;
+
+  }
+  .material-toolbar {
+    position: relative;
+
+  }
+  .drawer-panel {
+    position: relative;
+    height: 100%;
+    width: 340px;
+    //width: 0px
+    //transform: translateX(calc(-100% - 20px))
+    transform: none;
+    z-index: 16;
+    //box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12)
+    transition: 190ms cubic-bezier(0,0,.21,1);
+    border-right: 1px solid rgb(228, 228, 228);
+
+  }
+  .content-permanent {
+    /* empty */
+  }
+    //flex: 1
+
+  &.show {
+    pointer-events: initial;
+    background-color: rgba(0, 0, 0, 0.7);
+    opacity: 1;
+    transition: 233s cubic-bezier(0, 0, .21, 1);
+    .drawer-panel {
+      width: 340px;
+      transform: none;
+
+
+
+
+    }
+  }
+}