material 0.9.25 → 0.9.27

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

@@ -0,0 +1,214 @@
+.material-calendar,
+.material-book {
+  margin-left: 10px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+
+  header {
+    flex: none;
+
+    .calendar-headline,
+    .book-headline {
+      font-family: 'Helvetica';
+      font-weight: light;
+      font-size: 17px;
+
+      .week-number {
+        font-size: 14px;
+        display: inline-block;
+        width: 50%;
+        padding: 10px;
+        text-align: right;
+      }
+
+      .month-year {
+        font-size: 24px;
+        display: inline-block;
+        width: 50%;
+        padding: 10px;
+      }
+
+      .material-toolbar {
+        text-align: right;
+        font-size: 24px;
+        display: inline-block;
+        width: 50%;
+        padding: 10px;
+
+        .material-button {
+          margin: 0;
+        }
+      }
+    }
+
+    .header-days {
+      display: flex;
+      flex-direction: horizontal;
+      flex-wrap: nowrap;
+      padding-bottom: 8px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+      .margin {
+        width: 100px;
+        flex: none;
+        display: inline-block;
+      }
+
+      .date {
+        font-size: .8em;
+        overflow: hidden;
+
+        .first {
+          font-size: .8em;
+          flex: 1;
+
+          //display: inline-block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .second {
+          display: block;
+          flex: none;
+
+          //display: inline-block;
+        }
+
+        flex: 15;
+
+        //white-space: nowrap;
+        //display: inline-block;
+        text-align: center;
+      }
+    }
+
+    .allday {
+      height: 24px;
+      border-bottom: 4px solid #d4d4d4;
+
+      .label {
+        font-size: 11px;
+        text-align: right;
+        float: left;
+        width: 10%;
+        border-bottom: 4px solid transparent;
+        min-height: 32px;
+        padding: 4px;
+        color: #D9D9D9;
+      }
+
+      .day {
+        float: left;
+        width: 15%;
+        min-height: 32px;
+        padding: 4px;
+      }
+    }
+  }
+
+  .calendar-body {
+    display: flex;
+    flex-direction: horizontal;
+    flex-wrap: nowrap;
+    position: relative;
+    overflow: scroll;
+    flex: 1;
+
+    .hours {
+      width: 100px;
+
+      .hour {
+        position: relative;
+        font-size: 11px;
+        font-weight: bold;
+        line-height: 14px;
+        text-align: right;
+        height: 60px;
+        border-right: 8px solid transaprent;
+        color: #D9D9D9;
+        padding-right: 5px;
+      }
+    }
+
+    canvas {
+      position: absolute;
+      top: 0;
+      left: 10%;
+      width: 2000px;
+      height: 1440px;
+    }
+
+    .week-day {
+      flex: 15;
+      position: relative;
+
+      //width: 15%;
+      height: 1440px;
+
+      //float: left;
+      border-right: 1px solid rgba(0, 0, 0, 0.1);
+
+      &[data-day='day-6'] {
+        background-color: rgba(196, 196, 196, 0.1);
+
+      /*.element-event {
+       *  background-color: rgba(197, 224, 179, .8);
+       *  border-left: none;
+       *  border-radius: 3px;
+       *  padding: 5px;
+       *}
+
+  .book-body
+    position: relative
+    overflow: scroll
+    flex: 1
+
+    .resource-folder
+      .type
+        .title
+          font-size: .8em
+          padding-bottom: 4px
+          padding-top: 4px
+          border-bottom: 1px solid rgba(0, 0, 0, 0.05)
+          background-color: rgba(0, 0, 0, 0.01)
+
+        .item
+          display: flex
+          flex-direction: horizontal
+          flex-wrap: nowrap
+          position: relative
+          text-align: left
+          border-right: 8px solid transaprent
+          color: #D9D9D9
+          padding-right: 5px
+          border-bottom: 1px solid rgba(0, 0, 0, 0.05)
+
+          .resource-name
+            width: 100px
+            font-size: 1.5em
+            font-weight: bold
+
+      .date
+        &.weekend
+          background-color: rgba(0, 0, 0, 0.01)
+
+        flex: 15
+        position: relative
+
+        //width: 15%;
+        border-left: 1px solid rgba(0, 0, 0, 0.1)
+
+        &[data-day='day-6']
+          background-color: rgba(196, 196, 196, 0.1)
+
+        /*     .element-event {
+         *   background-color: rgba(197, 224, 179, .8);
+         *   border-left: none;
+         *   border-radius: 3px;
+         *   padding: 5px;
+         * }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+.material-form {
+  background-color: #E6E6E6;
+  .component-subheader {
+    padding: 16px 0 0;
+  }
+
+  .material-layout {
+    > .layout-component {
+      border-bottom: 1px solid rgba(100, 100, 100, 0.3);
+      padding: 16px 0;
+
+      .ui-text {
+        margin-left: 16px;
+        margin-right: 16px;
+        padding-top: 8px;
+        margin-bottom: 16px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,133 @@
+.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,105 @@
+.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,214 @@
+.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,7 @@
+.ui-map {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}

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

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