material 0.9.25 → 0.9.26

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

@@ -0,0 +1,25 @@
+.menu {
+  //display: none
+  &.show {
+    /* empty */
+  }
+    //display: block
+  .list {
+    background: white;
+    .item {
+      color: rgba(0,0,0,.87);
+
+    }
+  }
+  &.floating {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    opacity: 0;
+    transition: 0.2s;
+
+
+
+  }
+}

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

@@ -0,0 +1,174 @@
+// Here is where the magic happens
+
+
+.progress {
+  width: 100%;
+  height: 4px;
+  background-color: lighten($primary-color, 30%);
+  .bar {
+    width: 0%;
+    height: 100%;
+    background-color: $primary-color;
+    transition: width 3s;
+
+  }
+}
+.progress.type-indeterminate {
+  position: relative;
+  height: 4px;
+  display: block;
+  width: 100%;
+  background-color: lighten($primary-color, 30%);
+  overflow: hidden;
+  .determinate {
+    position: absolute;
+    background-color: inherit;
+    top: 0;
+    bottom: 0;
+    background-color: $primary-color;
+    transition: width .3s linear;
+  }
+  .bar {
+    background-color: $primary-color;
+    &:before {
+      content: '';
+      position: absolute;
+      background-color: inherit;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      will-change: left, right {
+        /* empty */
+      }
+      -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+      animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    }
+    &:after {
+      content: '';
+      position: absolute;
+      background-color: inherit;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      will-change: left, right {
+        /* empty */
+      }
+      -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+      animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+      -webkit-animation-delay: 1.15s;
+      animation-delay: 1.15s;
+
+    }
+  }
+}
+@-webkit-keyframes indeterminate {
+  0% {
+    left: -35%;
+    right: 100%;
+
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+
+
+  }
+}
+@keyframes indeterminate {
+  0% {
+    left: -35%;
+    right: 100%;
+
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+
+
+  }
+}
+@-webkit-keyframes indeterminate-short {
+  0% {
+    left: -200%;
+    right: 100%;
+
+  }
+  60% {
+    left: 107%;
+    right: -8%;
+
+  }
+  100% {
+    left: 107%;
+    right: -8%;
+
+
+  }
+}
+@keyframes indeterminate-short {
+  0% {
+    left: -200%;
+    right: 100%;
+
+  }
+  60% {
+    left: 107%;
+    right: -8%;
+
+  }
+  100% {
+    left: 107%;
+    right: -8%;
+
+  }
+}
+.progress.type-circular {
+  .progress {
+    animation: rotator 1.4s linear infinite;
+
+  }
+  @keyframes rotator {
+    0% {
+      transform: rotate(0deg);
+
+    }
+    100% {
+      transform: rotate(270deg);
+
+    }
+  }
+  .path {
+    stroke: #4285F4;
+    stroke-dasharray: 187;
+    stroke-dashoffset: 0;
+    transform-origin: center;
+    animation: dash 1.4s ease-in-out infinite;
+
+  }
+  @keyframes dash {
+    0% {
+      stroke-dashoffset: 187;
+
+    }
+    50% {
+      stroke-dashoffset: 187 / 4;
+      transform: rotate(135deg);
+
+    }
+    100% {
+      stroke-dashoffset: 187;
+      transform: rotate(450deg);
+
+    }
+  }
+}

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

@@ -0,0 +1,50 @@
+.search-input {
+  position: relative;
+  height: 40px;
+  width: 100%;
+  display: none;
+  flex-direction: row;
+  border-bottom: 1px solid rgba(0,0,0,.1);
+  background-color: rgba(0,0,0,.02);
+  &.show {
+    display: flex;
+  }
+  >.icon {
+    padding: 8px 0 8px 24px;
+    svg {
+      fill: $primary-color;
+    }
+  }
+  >.input {
+    flex: 1;
+    font-size: 1.2em;
+    padding: 8px 16px 8px 16px;
+    border: none;
+    margin: 0;
+    background-color: transparent;
+
+  }
+  >.clear {
+    cursor: pointer;
+    opacity: .4;
+    flex: none;
+    width: 46px;
+    height: 40px;
+    margin: 0;
+    background-color: transparent;
+    &:focus {
+      opacity: .4;
+      background-color: transparent;
+    }
+    &:hover, &:active {
+      opacity: .7;
+      background-color: transparent;
+    }
+    .icon {
+      svg {
+        fill: $primary-color;
+
+      }
+    }
+  }
+}

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

@@ -0,0 +1,152 @@
+.selecter {
+  display: flex;
+  position: initial;
+  margin-right: 20px;
+  // margin-bottom: 8px
+  vertical-align: top;
+  flex: none;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+
+  label {
+    flex: 1;
+    order: 0;
+    cursor: default;
+    font-size: 1rem;
+    line-height: 1.2rem;
+    padding: 14px 0;
+    margin: 0px 2px 0px 0;
+    overflow: hidden;
+  }
+  .value {
+    flex: 1;
+    order: 1;
+    text-align: right;
+    cursor: pointer;
+    font-size: 1rem;
+    line-height: 1.2rem;
+    padding: 14px 0;
+    margin: 0px 2px 0px 0;
+    overflow: hidden;
+  }
+  input {
+    flex: 1;
+    display: none;
+    user-select: auto;
+    color: rgba(0,0,0,.87);
+    float: none;
+    width: 100%;
+    border: none;
+    margin: 0;
+    padding: 16px 12px 15px;
+    // background-color: rgba(255,255,255,.47)
+    border-radius: 3px;
+    background-color: rgba(255,255,255,.67);
+    // border: 1px solid rgba(0,0,0,.1)
+    // transition: .195s background-color
+    &:focus {
+      background-color: rgba(255,255,255,1);
+      transition: .225s background-color;
+      // border: 1px solid rgba(0,0,0,.5)
+    }
+    &:disabled {
+      color: rgba(0,0,0,.57);
+      background-color: rgba(255,255,255,.27);
+
+    }
+  }
+  .list {
+    display: none;
+    flex-direction: column;
+    font-size: .9em;
+    color: rgba(0,0,0,.87);
+    color: rgba(255,255,255,.87);
+    z-index: 151;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    background-color: #7b7c7f;
+    overflow: hidden;
+    // transform: translateX(-100%)
+    // transition: .195s transform cubic-bezier(.4,0,.2,1)
+    &.show {
+      display: flex;
+    }
+    .head {
+      flex: none;
+      display: flex;
+      .title {
+        font-size: 1.1em;
+        flex: 1;
+        padding: 16px 20px;
+      }
+      .close {
+        top: 8px;
+        right: 8px;
+        height: 40px;
+        width: 40px;
+        background-image: url(/theme/common/icon/close.svg);
+
+      }
+    }
+    .body {
+      flex: 1;
+      overflow: auto;
+      .item {
+        padding: 16px 20px;
+        &:hover {
+          background-color: rgba(0,0,0,.05);
+
+        }
+        &.selected {
+          label {
+            font-weight: 700px;
+
+          }
+        }
+      }
+    }
+  }
+  input {
+    display: none;
+    cursor: pointer;
+    -webkit-appearance: none;
+    appearance: none;
+    color: rgba(0,0,0,.87);
+    float: none;
+    width: 100%;
+    border: none;
+    margin: 0;
+    padding: 17px 12px 14px;
+    // background-color: rgba(255,255,255,.47)
+    border-radius: 3px;
+    // border: 1px solid rgba(0,0,0,.1)
+    background-color: rgba(255,255,255,.67);
+    // transition: .195s background-color       
+    &:focus {
+      background-color: rgba(255,255,255,1);
+      // border: 1px solid rgba(0,0,0,.5)
+      // transition: .225s background-color
+    }
+    &:disabled {
+      color: rgba(0,0,0,.57);
+      background-color: rgba(255,255,255,.27);
+
+    }
+  }
+  .error {
+    color: rgba(0,0,0,.87);
+    float: none;
+    width: 100%;
+    border: none;
+    margin: 0;
+    background-color: rgba(255,255,255,.87);
+    border-radius: 0;
+
+
+  }
+}

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

@@ -0,0 +1,46 @@
+.selector {
+  display: block;
+  pointer-events: none;
+  position: fixed;
+  z-index: 1000;
+  &.hide {
+    display: none;
+  }
+  &.rounded {
+    border-radius: 50%;
+    .border {
+      border-radius: 50%;
+  // transition: .2s top linear, .2s left linear, 
+    }
+  }
+  >.label {
+    color: white;
+    position: absolute;
+    top: -12px;
+    left: 0;
+    width: 30px;
+    height: 12px;
+    background: #247BB6;
+  }
+  >.border {
+    position: absolute;
+    top : 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid #326FB6;
+    border-radius: 3px;
+  }
+  >.resizer {
+    pointer-events: auto;
+    display: block;
+    width: 3px;
+    height: 3px;
+    position: absolute;
+    bottom: -5;
+    right: -5;
+    // background-color: #326FB6
+
+
+  }
+}

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

@@ -0,0 +1,221 @@
+.material-slider {
+  display: block;
+  position: relative;
+  padding-top: 0;
+  padding-bottom: 16px;
+  margin-right: 8px;
+  vertical-align: top;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+
+  //overflow: hidden;
+  //border-bottom: 1px solid rgba(100, 100, 100, 0.1);
+  input {
+    position: absolute;
+    left: -10000px;
+
+  }
+  .slider-label {
+    flex: 1;
+    order: 1;
+    cursor: default;
+    padding: 16px 0;
+    margin: 0px 2px 0px 0;
+    overflow: hidden;
+
+  }
+  .slider-control {
+    order: 3;
+    position: relative;
+    cursor: pointer;
+    width: 100%;
+    height: 48px;
+    padding: 0 8px;
+
+    .slider-track {
+      position: absolute;
+      z-index: 1;
+      cursor: pointer;
+      position: relative;
+      display: block;
+      height: 48px;
+      padding: 0;
+
+      //background-color: rgba(34, 31, 31, .26);
+      transition: .3s;
+
+    }
+    .slider-canvas {
+      position: absolute;
+      top: 0;
+      left: 0;
+
+    }
+    .slider-track-value {
+      position: absolute;
+      width: 0;
+      top: 50%;
+      z-index: 2;
+      cursor: pointer;
+      display: block;
+      height: 2px;
+      padding: 0;
+      background-color: #4054B2;
+      border-radius: 7px;
+
+    }
+    .slider-marker {
+      opacity: 0;
+      transform: scale(0.1) translateY(60px);
+      text-align: center;
+      font-size: 9px;
+      color: white;
+      position: absolute;
+      width: 32px;
+      height: 32px;
+      top: -17px;
+      z-index: 2;
+      cursor: pointer;
+      margin: auto;
+      border-radius: 50%;
+      transition: .2s;
+
+      .slider-pin {
+        fill: $secondary-color;
+
+      }
+    }
+    .slider-knob {
+      z-index: 3;
+      cursor: pointer;
+      position: absolute;
+      top: 50%;
+      left: 0px;
+      display: block;
+      height: 12px;
+      width: 12px;
+      margin: 0;
+      transform: translateY(-5px);
+      border-radius: 50%;
+      background-color: white;
+      border: 2px solid rgba(241, 241, 241, 100);
+
+      //box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+      transition: .2s;
+
+      &.notnull {
+        background-color: #4054B2;
+        border: 2px solid #4054B2;
+
+      }
+      &:active {
+        background-color: #4054B2;
+        border: 2px solid #4054B2;
+
+      }
+      &:hover {
+        /* empty */
+      }
+        // background-color: #4054B2;
+        // border: 2px solid #4054B2;
+
+    }
+    &.dragging {
+      .slider-knob {
+        top: 50%;
+        background-color: white;
+        border: 2px solid rgba(241, 241, 241, 100);
+
+        //box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+        transition: none;
+        transform: scale(1.5) translateY(-4px);
+
+        &.notnull {
+          background-color: #4054B2;
+          border: 2px solid #4054B2;
+
+        }
+      }
+    }
+  }
+  &.is-checked {
+    .slider-track {
+      background-color: rgba(0, 150, 136, 0.5);
+
+      .slider-knob {
+        background-color: rgba(0, 150, 136, 1);
+        left: 15px;
+
+      }
+    }
+  }
+  &.is-disabled {
+    .slider-label {
+      opacity: .5;
+
+    }
+    .slider-control {
+      .slider-track {
+        .slider-knob {
+          background-color: #BDBDBD;
+          border: 2px solid white;
+
+        }
+        .slider-track-value {
+          background-color: #BDBDBD;
+
+        }
+      }
+      order: 3;
+      cursor: pointer;
+
+      // .slider-track
+
+      // .slider-knob
+
+    }
+  }
+  &.is-focused {
+    .slider-control {
+      .slider-knob {
+        height: 18px;
+        width: 18px;
+        border: 32px solid rgba(0, 0, 0, 0.05);
+
+      }
+    }
+  }
+  &.type-discrete {
+    .slider-control {
+      &.dragging {
+        .slider-marker {
+          opacity: 1;
+          transform: scale(1) translateY(0);
+          display: block;
+          transition: none;
+
+        }
+        .slider-knob {
+          opacity: 0;
+          transform: scale(0.2);
+          display: block;
+          transition: .2s;
+
+        }
+      }
+    }
+  }
+}
+.dark-mode {
+  .material-slider {
+    .slider-control {
+      .slider-track {
+        .slider-tarck-value {
+          background-color: #5C5C5C;
+
+        }
+      }
+    }
+  }
+}