material 0.9.25 → 0.9.26

package/src/skin/material/view/grid.scss

@@ -0,0 +1,134 @@
+.view-grid {
+  white-space: nowrap;
+
+  &.container-body {
+    overflow: hidden;
+
+  }
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+
+  .grid-header {
+    flex: none;
+    width: 100%;
+    background-color: $grey-200;
+    white-space: nowrap;
+    border-bottom: 1px solid $grey-300;
+
+    > .header-key {
+      font-size: .85em;
+      min-width: 50px;
+      cursor: default;
+      text-overflow: ellipsis;
+      display: inline-block;
+      white-space: nowrap;
+      overflow: hidden;
+      vertical-align: top;
+      padding: 3px 6px;
+      border-right: 1px solid $grey-300;
+
+      &.key-selected {
+        //color: $grey-50;
+        background-color: $grey-100;
+
+      }
+      .key-sort {
+        float: right;
+        padding: 3px;
+
+      }
+    }
+    > .ui-resizer-width {
+      &.resizer-drag {
+        background-color: orange;
+
+      }
+    }
+  }
+  .grid-search {
+    flex: none;
+    width: 100%;
+    background-color: white;
+    background-color: $grey-100;
+    white-space: nowrap;
+    border-bottom: 1px solid $grey-300;
+
+    > .search-key {
+      min-width: 50px;
+      cursor: default;
+
+      //text-overflow: ellipsis;
+      display: inline-block;
+      white-space: nowrap;
+      overflow: hidden;
+      vertical-align: top;
+      padding: 6px 6px;
+      border: none;
+      border-right: 1px solid $grey-300;
+      background-color: transparent;
+
+      &.key-selected {
+        //color: $grey-50;
+        background-color: $grey-100;
+
+      }
+    }
+  }
+  .grid-content {
+    flex: 1;
+    font-size: .85em;
+    position: relative;
+    overflow: auto;
+    border-collapse: collapse;
+    border-spacing: 0;
+    -webkit-overflow-scrolling: touch;
+    overflow-scrolling: touch;
+
+    > .content-row {
+      position: absolute;
+      white-space: nowrap;
+      left: 0;
+      border-bottom: 1px solid $grey-300;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+
+      > span {
+        min-height: 23px;
+        min-width: 50px;
+        border-right: 1px solid $grey-300;
+        border-right: 1px solid rgba(0, 0, 0, 0.07);
+        padding: 4px 6px;
+
+        //> span {
+        cursor: default;
+        text-overflow: ellipsis;
+        display: inline-block;
+
+        //width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        vertical-align: top;
+        padding-right: 6px 10px;
+
+        //}
+        &[data-key="total"] {
+          text-align: right;
+
+        }
+      }
+      &.item-selected {
+        background-color: rgba(160, 160, 160, 0.2);
+
+        //border-right: 1px solid $blue-grey-600;
+        border-bottom: 1px solid transparent;
+        margin: 0;
+
+      }
+      &:last-child {
+        border-bottom: none;
+
+      }
+    }
+  }
+}

package/src/skin/material/view/list.scss

@@ -0,0 +1,107 @@
+.list {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
+  &.hide {
+    display: none;
+
+
+  }
+  >.head {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    flex: none;
+    >.divider {
+      flex: 1;
+    }
+    >.button.search {
+      flex: none;
+      &.selected {
+        // background-color: $primary-color
+        .button-icon svg  {
+          fill: rgba(255, 255, 255, 1);
+
+        }
+      }
+    }
+  }
+  >.body.search {
+    display: none;
+    overflow: scroll;
+    flex: 1;
+    &.show {
+      display: block;
+
+    }
+  }
+  >.body {
+    overflow: scroll;
+    flex: 1;
+    // overscroll-behavior: none
+    // height: 100%
+    .item {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      padding: 8px 16px 8px 24px;
+      border: none;
+      background-color: transparent;
+      border-radius: 0;
+      box-shadow: none;
+      border-bottom: 1px solid rgba(0,0,0,.1);
+
+      .image {
+        flex: none;
+        position: relative;
+        width: 64px;
+        height: 64px;
+        background-color: rgba(0,0,0,.05);
+        //border: 1px solid rgba(0,0,0,.2)
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+        margin-right: 16px;
+
+      }
+    }
+    &.hide {
+      display: none;
+    }
+    .item {
+      .info {
+        display: flex;
+        flex-direction: row;
+      }
+      &.selected {
+        background-color: rgba(0,0,0,.05);
+
+      }
+    }
+  }
+  >.foot {
+    display: flex;
+    flex-direction: row;
+    flex: none;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 8px 16px 8px 24px;
+
+  }
+}
+.virtual {
+  overflow: auto;
+  position: relative;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  .scroller {
+    opacity: 1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1px;
+
+  }
+}

package/src/skin/material/view/listview.scss

@@ -0,0 +1,221 @@
+.material-list {
+  padding: 0;
+  overflow: scroll;
+
+  .material-item {
+    display: flex;
+    flex-direction: horizontal;
+    flex-wrap: nowrap;
+    text-align: left;
+    width: 100%;
+    display: block;
+    font-size: 1rem;
+    line-height: 1.2rem;
+    appearance: span;
+    padding: 14px 16px;
+
+    //border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    transition: .1s;
+
+    &.is-selected {
+      background-color: rgba(0, 0, 0, 0.05);
+      transition: .1s;
+
+    }
+    .ui-icon {
+      flex: none;
+      padding: 24px;
+
+    }
+    .ui-text {
+      flex: 1;
+      padding: 16px 12px 16px 0;
+
+    }
+  }
+  .material-button {
+    display: flex;
+    flex-direction: horizontal;
+    flex-wrap: nowrap;
+    text-align: left;
+    width: 100%;
+    display: block;
+    -ms-appearance: span;
+    -moz-appearance: span;
+    -webkit-appearance: span;
+    appearance: span;
+
+    .ui-icon {
+      flex: none;
+      padding: 24px;
+
+    }
+    .button-label {
+      flex: 1;
+      padding: 16px 12px 16px 0;
+
+    }
+  }
+  .ui-separator {
+    display: block;
+    height: 1px;
+    margin: 12px;
+    background-color: #DDD;
+
+
+
+
+
+
+
+  }
+  &.type-image {
+    max-width: 1000px;
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 auto;
+    padding: 0;
+
+    .material-image {
+      //float: left
+      //background-color: red
+      position: relative;
+      display: list-item;
+      //height: 125px
+      width: 125px;
+      overflow: hidden;
+      margin: 2px 2px;
+      padding: 0;
+      //background-color: red
+      -webkit-column-break-inside: avoid;
+      break-inside: avoid-column;
+      display: list-item;
+      text-align: -webkit-match-parent;
+      position: relative;
+      box-sizing: border-box;
+      //margin-bottom: 16px
+
+      .image-image {
+        //height: 125px
+        width: 125px;
+        display: block;
+
+      }
+      .image-info {
+        // padding: 16px
+        background-color: rgba(0,0,0,.6);
+        display: block;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        padding: 8px 16px;
+
+
+        .image-label {
+          line-height: 24px;
+          flex: 1 ;
+          color: rgba(255,255,255,.8);
+          overflow: hidden;
+          text-overflow: ellipsis;
+          height: 24px;
+          // background-color: rgba(0,0,0,.6)
+          // display: block
+          // position: absolute
+          // bottom: 0
+          // left: 0
+          // right: 0
+        }
+        .image-icon {
+          flex: none;
+          svg {
+            fill: white;
+
+          }
+        }
+      }
+    }
+    &.hide-info {
+      .image-info {
+        display: none !important ;
+
+      }
+    }
+    &.info-below {
+      .image-info {
+        //display: none !important 
+        color: initial !important ;
+        padding: 16px;
+        background-color: transparent  !important ;
+        //display: block
+        position: initial !important ;
+        padding:  8px 0 !important ;
+        line-height: 16px;
+        // bottom: 0
+        // left: 0
+        // right: 0
+        .image-label {
+          line-height: 24px;
+          flex: 1 ;
+          color: rgba(0,0,0,.8);
+        }
+        .image-icon {
+          flex: none;
+          svg {
+            fill: rgba(0,0,0,.8);
+
+          }
+        }
+      }
+    }
+    &.layout-masonry {
+      -webkit-column-count: 3;
+      column-count: 3;
+      -webkit-column-gap: 16px;
+      column-gap: 16px;
+      max-width: 1000px;
+      display: block;
+      flex-wrap: wrap;
+      margin: 0 auto;
+      padding: 0;
+      .material-image {
+        //float: left
+        //background-color: red
+        position: relative;
+        display: list-item;
+        // height: 118px
+        // width: 177px
+        overflow: hidden;
+        margin: 0 2px;
+        padding: 0;
+        background-color: red;
+        -webkit-column-break-inside: avoid;
+        break-inside: avoid-column;
+        display: list-item;
+        text-align: -webkit-match-parent;
+        position: relative;
+        box-sizing: border-box;
+        margin-bottom: 16px;
+
+        // .image-image
+        //   // height: 118px
+        //   // width: 177px
+        //   display: block
+
+        // .image-label
+        //   color: rgba(255,255,255,.8)
+        //   padding: 16px
+        //   background-color: rgba(0,0,0,.6)
+        //   display: block
+        //   position: absolute
+        //   bottom: 0
+        //   left: 0
+        //   right: 0
+
+      }
+    }
+  }
+}

package/src/skin/material/view/map.scss

@@ -0,0 +1,8 @@
+.ui-map {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+}

package/src/skin/material/view/page.scss

@@ -0,0 +1,5 @@
+.material-page {
+	border: none;
+	margin: 0;
+
+}

package/src/skin/material/view/tabview-bak.scss

@@ -0,0 +1,49 @@
+.tabview {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  white-space: no-wrap;
+  overflow: hidden;
+  >.indicator {
+    position: absolute;
+    height: 2px;
+    transition: 0.2s;
+    background-color: $secondary-color;
+  }
+  >.tabs {
+    flex: none;
+    display: flex;
+    flex-direction: row;
+    overflow: hidden ;
+    //height: 48px
+    >.material-divider {
+      margin: 0;
+      padding: 0;
+      flex: 1 ;
+      display: inline-block;
+    }
+    >button {
+      flex: 1;
+      display: inline-block;
+      padding: 0 10px;
+      height: 48px;
+      border-radius: 0;
+      margin: 0;
+      text-align: center;
+      background-repeat: no-repeat;
+      background-size: 30%;
+      background-position: center;
+      >label {
+        color: $default-color-text;
+      }
+    }
+  }
+  >.views {
+    >div {
+      display: none;
+
+    }
+  }
+}

package/src/skin/material/view/tabview.scss

@@ -0,0 +1,65 @@
+.tabview {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  white-space: no-wrap;
+  overflow: hidden;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  >.indicator {
+    position: absolute;
+    height: 2px;
+    // transition: 0.2s
+  }
+  >.tabs {
+    flex: none;
+    display: flex;
+    flex-direction: row;
+    overflow: hidden ;
+    //height: 48px
+    >.divider {
+      margin: 0;
+      padding: 0;
+      flex: 1 ;
+      display: inline-block;
+    }
+    >button {
+      flex: 1;
+      display: inline-block;
+      padding: 0;
+      height: 48px;
+      border-radius: 0;
+      margin: 0;
+      text-align: center;
+      background-repeat: no-repeat;
+      background-size: 25%;
+      background-position: center;
+      // transition: 50ms transform
+      &:hover, &.selected {
+        background-color: transparent;
+        // transform: scale(1.1)
+        // transition: 50ms transform
+
+      }
+      &.type-action {
+        max-width: 60px;
+
+
+      }
+    }
+  }
+  >.views {
+    position: relative;
+    flex: 1;
+    >div {
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+
+    }
+  }
+}

package/src/skin/material/view/tree.scss

@@ -0,0 +1,85 @@
+.material-tree {
+  padding: 16px 0;
+  overflow: scroll;
+
+  ul {
+    margin: 0;
+    padding: 0;
+    .item-tree {
+      display: flex;
+      flex-direction: horizontal;
+      flex-wrap: nowrap;
+      text-align: left;
+      width: 100%;
+      display: block;
+      -ms-appearance: span;
+      -moz-appearance: span;
+      -webkit-appearance: span;
+      appearance: span;
+      padding: 8px 16px;
+
+    }
+    .material-item  {
+      display: flex;
+      flex-direction: horizontal;
+      flex-wrap: nowrap;
+      text-align: left;
+      width: 100%;
+      display: block;
+      -ms-appearance: span;
+      -moz-appearance: span;
+      -webkit-appearance: span;
+      appearance: span;
+      padding: 8px 16px;
+
+      //border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+      transition: .3s;
+
+      &.is-selected {
+        background-color: rgba(0, 0, 0, 0.05);
+        transition: .3s;
+
+      }
+      .ui-icon {
+        flex: none;
+        padding: 24px;
+
+      }
+      .ui-text {
+        flex: 1;
+        padding: 16px 12px 16px 0;
+
+      }
+    }
+    .material-button {
+      display: flex;
+      flex-direction: horizontal;
+      flex-wrap: nowrap;
+      text-align: left;
+      width: 100%;
+      display: block;
+      -ms-appearance: span;
+      -moz-appearance: span;
+      -webkit-appearance: span;
+      appearance: span;
+
+      .ui-icon {
+        flex: none;
+        padding: 24px;
+
+      }
+      .ui-text {
+        flex: 1;
+        padding: 16px 12px 16px 0;
+
+      }
+    }
+    .ui-separator {
+      display: block;
+      height: 1px;
+      margin: 12px;
+      background-color: #DDD;
+
+    }
+  }
+}

package/src/skin/material/view/{view.sass → view.scss}

@@ -5,3 +5,4 @@
 //   bottom: 0
 //   left: 0
 //   overflow: scroll
+