material 0.9.25 → 0.9.27

package/src/skin/material/control/textfield.scss

@@ -0,0 +1,152 @@
+.material-textfield {
+  display: block;
+  position: relative;
+  margin-right: 16px;
+  padding-top: 8px;
+  margin-bottom: 16px;
+  vertical-align: top;
+  .textfield-label {
+    transition: .2s;
+    color: rgba(0, 0, 0, 0.3);
+    position: absolute;
+    font-size: .7em;
+    top: -2px;
+  }
+
+  .textfield-underline {
+    position: absolute;
+    opacity: 0;
+    left: 50%;
+    bottom: 0px;
+    height: 2px;
+    width: 2px;
+    background-color: #4891F4;
+    transition: .1s;
+  }
+
+  &.textfield-error {
+    .textfield-label {
+      color: #F44336;
+      color: #D6392C;
+    }
+
+    textarea,
+    input {
+      border-bottom: 1px solid #F44336;
+    }
+  }
+
+  &.hide {
+    display: none;
+
+// states
+  }
+}
+.material-textfield {
+  &.is-focused {
+    .textfield-label {
+      transition: .2s;
+    }
+
+    .textfield-underline {
+      opacity: 1;
+      display: block;
+      width: 100%;
+      left: 0;
+      transition: .1s;
+      background-color: $primary-color;
+    }
+  }
+
+  &.is-empty {
+    .textfield-label {
+      transition: .2s;
+      pointer-events: none;
+      position: absolute;
+      top: 20px;
+      left: 0;
+      display: block;
+      font-size: 1em;
+      padding: 0 2px 0 0;
+    }
+
+    &.is-focused {
+      .textfield-label {
+        transition: .2s;
+        font-size: .7em;
+        top: -2px;
+      }
+    }
+
+    .textfield-input {
+      float: none;
+      width: 100%;
+      border: none;
+      margin: 0;
+
+      // margin-top: 13px;
+      background-color: transparent;
+      border-radius: 0;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+
+      //outline:none;
+    }
+  }
+
+  .textfield-input {
+    float: none;
+    width: 100%;
+    padding: 12px 8px 8px 0;
+    border: none;
+    margin: 0;
+    background-color: transparent;
+    border-radius: 0;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+
+    //outline:none;
+    &:hover {
+      cursor: default;
+
+      //background-color: rgba(100, 100, 100, .06);
+    }
+
+    &:focus {
+      cursor: text;
+    }
+  }
+
+  input[readonly],
+  textarea[readonly] {
+    //color: #9A9A9A;
+    //color: rgba(0, 0, 0, 1);
+    //background-color: rgba(255,255,255,1);
+    border-bottom: 1px solid transparent;
+
+    &:hover {
+      cursor: default;
+
+      //background-color: rgba(255,255,255,1);
+    }
+
+    &:focus,
+    &:active {
+      cursor: text;
+      border-bottom: 1px solid transparent !important;
+
+      //background-color: rgba(255,255,255,1);
+    }
+  }
+}
+
+.dark-mode {
+  .material-textfield {
+    .textfield-label {
+      transition: .2s;
+      color: rgba(255, 255, 255, 0.3);
+    }
+
+    .textfield-input {
+      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+    }
+  }
+}

package/src/skin/material/control/tooltip.scss

@@ -0,0 +1,40 @@
+.tooltip {
+  z-index: 100;
+  // pointer-events: none
+  display: none;
+  position: absolute;
+  background-color: rgba(0,0,0,.7);
+  max-width: 200px;
+  text-align: center;
+  padding: 4px 8px 8px;
+  transform: translateY(24px);
+  border-radius: 3px;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+  &.show {
+    display: block;
+    >.label {
+      font-size: .8em;
+      line-height: 1em;
+      color: rgba(255,255,255,.87);
+    }
+    >.pointer {
+      display: block;
+      width: 100%;
+      height: 8px;
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: -8px;
+      background-image: url('/theme/minimal/icon/tooltip.svg');
+      background-position: center;
+      background-size: contain;
+      background-repeat: no-repeat;
+    }
+  }
+}
+
+@media only screen and (max-width: 640px) {
+  .tooltip {
+    display: none;
+  }
+}

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

@@ -0,0 +1,88 @@
+.material-layout {
+  // overflow: hidden;
+  // padding: 0;
+  // margin: 0;
+  // height: 100%;
+  // position: absolute;
+  // top: 0;
+  // bottom: 0;
+  // left: 0;
+  // right: 0;
+}
+
+.flex-row,
+.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,77 @@
+
+.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,
+.ui-resizer-width,
+.ui-resizer-top,
+.ui-resizer-right,
+.ui-resizer-bottom,
+.ui-resizer-left {
+  background-color: rgba(255, 165, 0, 5);
+  opacity: .5;
+  position: absolute;
+  z-index: 100;
+
+  &:hover {
+    //background-color: rgba(255, 165, 0,5);
+  }
+}
+
+.ui-resizer-height,
+.ui-resizer-top,
+.ui-resizer-bottom {
+  cursor: ns-resize;
+  position: absolute;
+  z-index: 100;
+  left: 0;
+  width: 100%;
+  height: 5px;
+}
+
+.ui-resizer-width,
+.ui-resizer-right,
+.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,10 @@
+.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);
+}