material 0.9.25 → 0.9.26

package/src/skin/material/layout/layout.scss

@@ -0,0 +1,92 @@
+.material-layout {
+  /* empty */
+}
+  // overflow: hidden;
+  // padding: 0;
+  // margin: 0;
+  // height: 100%;
+  // position: absolute;
+  // top: 0;
+  // bottom: 0;
+  // left: 0;
+  // right: 0;
+
+.flex-row, {
+  /* empty */
+}
+.flex-raw {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+
+  > .ui-container {
+    height: inherit;
+
+  }
+}
+.flex-column {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+
+  > .material-container {
+    width: inherit;
+
+  }
+}
+.display-absolute {
+  display: absolute;
+
+}
+.flex-none {
+  flex: none;
+
+}
+.flex-1 {
+  flex: 1;
+
+}
+.flex-2 {
+  flex: 2;
+
+}
+.flex-3 {
+  flex: 3;
+
+}
+.flex-4 {
+  flex: 4;
+
+}
+.flex-5 {
+  flex: 5;
+
+}
+.flex-6 {
+  flex: 6;
+
+}
+.flex-7 {
+  flex: 7;
+
+}
+.flex-8 {
+  flex: 8;
+
+}
+.flex-9 {
+  flex: 9;
+
+}
+.flex-10 {
+  flex: 10;
+
+}
+.flex-11 {
+  flex: 11;
+
+}
+.flex-12 {
+  flex: 12;
+
+}

package/src/skin/material/layout/resizer.scss

@@ -0,0 +1,97 @@
+
+.resizer-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+}
+.ui-resizer {
+  opacity: .2;
+  position: absolute;
+  z-index: 200;
+  right: -3px;
+  bottom: -3px;
+  width: 12px;
+  height: 12px;
+  cursor: nwse-resize;
+
+  // &:hover, &.drag {
+  // 	background-color: rgba(66, 133, 244, .5);
+  // }
+
+}
+.resizer-height {
+  cursor: ns-resize;
+  position: absolute;
+  z-index: 100;
+  left: 0;
+  width: 100%;
+  height: 5px;
+
+}
+.resizer-width {
+  cursor: ew-resize;
+  position: absolute;
+  z-index: 100;
+  top: 0;
+  height: 100%;
+  width: 5px;
+
+}
+.ui-resizer-height, {
+  /* empty */
+}
+.ui-resizer-width, {
+  /* empty */
+}
+.ui-resizer-top, {
+  /* empty */
+}
+.ui-resizer-right, {
+  /* empty */
+}
+.ui-resizer-bottom, {
+  /* empty */
+}
+.ui-resizer-left {
+  background-color: rgba(255, 165, 0, 5);
+  opacity: .5;
+  position: absolute;
+  z-index: 100;
+
+  &:hover {
+    /* empty */
+  }
+    //background-color: rgba(255, 165, 0,5);
+
+}
+.ui-resizer-height, {
+  /* empty */
+}
+.ui-resizer-top, {
+  /* empty */
+}
+.ui-resizer-bottom {
+  cursor: ns-resize;
+  position: absolute;
+  z-index: 100;
+  left: 0;
+  width: 100%;
+  height: 5px;
+
+}
+.ui-resizer-width, {
+  /* empty */
+}
+.ui-resizer-right, {
+  /* empty */
+}
+.ui-resizer-left {
+  cursor: ew-resize;
+  position: absolute;
+  z-index: 100;
+  top: 0;
+  height: 100%;
+  width: 5px;
+
+}

package/src/skin/material/material.scss

@@ -0,0 +1,67 @@
+
+// font
+// @import ../../../vendor/roboto/roboto.css
+
+// base
+@import "base/body.scss";
+@import "base/typo.scss";
+@import "base/elevation.scss";
+
+// theme
+@import "theme/default.scss";
+@import "theme/theme.scss";
+
+// module
+@import "module/ripple.scss";
+
+// component
+@import "component/component.scss";
+@import "component/text.scss";
+@import "component/image.scss";
+@import "component/subheader.scss";
+@import "component/label.scss";
+@import "component/divider.scss";
+@import "component/progress.scss";
+
+// container
+@import "container/banner.scss";
+@import "container/card.scss";
+@import "container/menu.scss";
+@import "container/dialog.scss";
+@import "container/container.scss";
+@import "container/drawer.scss";
+@import "container/tabs.scss";
+@import "container/appbar.scss";
+@import "container/toolbar.scss";
+@import "container/snackbar.scss";
+
+// button
+@import "button/button.scss";
+@import "button/raised.scss";
+@import "button/floating.scss";
+@import "button/action.scss";
+@import "button/file.scss";
+
+// control
+@import "control/button.scss";
+@import "control/textfield.scss";
+@import "control/switch.scss";
+@import "control/checkbox.scss";
+@import "control/selector.scss";
+@import "control/slider.scss";
+@import "control/tooltip.scss";
+@import "control/search.scss";
+
+// view
+@import "view/view.scss";
+@import "view/list.scss";
+@import "view/form.scss";
+@import "view/tree.scss";
+@import "view/calendar.scss";
+@import "view/page.scss";
+@import "view/tabview.scss";
+
+// layout
+@import "layout/layout.scss";
+@import "layout/resizer.scss";
+

package/src/skin/material/module/ripple.scss

@@ -0,0 +1,11 @@
+.material-ripple, .ripple {
+  opacity: 1;
+  pointer-events: none;
+  z-index: 1;
+  position: absolute;
+  background-color: rgba(255, 255, 255, 0.1);
+  height: 5px;
+  width: 5px;
+  border-radius: 50%;
+
+}

package/src/skin/material/theme/{default.sass → default.scss}

@@ -25,26 +25,27 @@
 
 
 // ocean theme
-$background-color: rgba(255, 255, 255, 1)
-$background-color-dark: rgba(51, 51, 51, 1)
+$background-color: rgba(255, 255, 255, 1);
+$background-color-dark: rgba(51, 51, 51, 1);
 
 // color schema
-$default-color: rgba(0, 0, 0, 1)
-$default-color-text: rgba(0, 0, 0, 0.67)
-$default-color-button: rgba(0, 0, 0, 0.47)
-$default-color-icon: rgba(0, 0, 0, 0.67)
-$primary-color: rgb(98, 0, 238)
-$primary-color: rgb(54, 79, 144)
-$primary-color-text: rgba(255, 255, 255, 0.95)
-$secondary-color: #1A9989
-$secondary-color-text: rgba(255, 255, 255, 0.95)
+$default-color: rgba(0, 0, 0, 1);
+$default-color-text: rgba(0, 0, 0, 0.67);
+$default-color-button: rgba(0, 0, 0, 0.47);
+$default-color-icon: rgba(0, 0, 0, 0.67);
+$primary-color: rgb(98, 0, 238);
+$primary-color: rgb(54, 79, 144);
+$primary-color-text: rgba(255, 255, 255, 0.95);
+$secondary-color: #1A9989;
+$secondary-color-text: rgba(255, 255, 255, 0.95);
 
 // on dark theme
-$default-color-dark: rgba(255, 255, 255, 1)
-$default-color-text-dark: rgba(255, 255, 255, 0.95)
-$primary-color-dark: rgb(54, 79, 144)
-$primary-color-text-dark: rgba(255, 255, 255, 0.95)
-$secondary-color-dark: #1A9989
-$secondary-color-text-dark: rgba(255, 255, 255, 0.95)
+$default-color-dark: rgba(255, 255, 255, 1);
+$default-color-text-dark: rgba(255, 255, 255, 0.95);
+$primary-color-dark: rgb(54, 79, 144);
+$primary-color-text-dark: rgba(255, 255, 255, 0.95);
+$secondary-color-dark: #1A9989;
+$secondary-color-text-dark: rgba(255, 255, 255, 0.95);
+
 
 

package/src/skin/material/theme/ocean.scss

@@ -0,0 +1,30 @@
+
+
+
+// base color
+$background: rgba(255, 255, 255, 1);
+
+// color schema
+$default-color: rgba(0, 0, 0, 1);
+$default-color-text: rgba(0, 0, 0, 0.87);
+
+// primary color
+$primary-color: #3f51b5;
+$primary-color-text: rgba(255, 255, 255, 0.95);
+
+// secondary color
+$secondary-color: #1A9989;
+$secondary-color-text: rgba(255, 255, 255, 0.95);
+
+// on dark theme
+$default-color-dark: rgba(255, 255, 255, 1);
+$default-color-text-dark: rgba(255, 255, 255, 0.95);
+
+$primary-color-dark: #3f51b5;
+$primary-color-text-dark: rgba(255, 255, 255, 0.95);
+
+$secondary-color-dark: #1A9989;
+$secondary-color-text-dark: rgba(255, 255, 255, 0.95);
+
+
+

package/src/skin/material/theme/theme.scss

@@ -0,0 +1,4 @@
+.dark-mode {
+  background-color: rgba(51, 51, 51, 1);
+  color: rgba(255, 255, 255, 0.95);
+}

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

@@ -0,0 +1,219 @@
+.material-calendar, {
+  /* empty */
+}
+.material-book {
+  margin-left: 10px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+
+  header {
+    flex: none;
+
+    .calendar-headline, {
+      /* empty */
+    }
+    .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,21 @@
+.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;
+
+      }
+    }
+  }
+}