material 0.9.25 → 0.9.27

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

@@ -0,0 +1,44 @@
+.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,219 @@
+.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 {
+        // 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;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,74 @@
+$width: 500px;
+
+.snackbars {
+  position: absolute;
+  z-index: 300;
+  display: flex;
+  width: $width;
+  flex-direction: column;
+  background-color: rgba(0,0,0,.1);
+  bottom: 160px;
+  width: 100%;
+  .snackbar {
+    overflow: hidden;
+    display: flex;
+    opacity: 0;
+    height: 2px;
+    flex-direction: row;
+    padding: 0;
+    margin: 2px;
+    background-color: #322F35;
+    border-radius: 4px;
+    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);
+    transition: 225ms opacity cubic-bezier(.4,0,.2,1), 225ms height cubic-bezier(.4,0,.2,1), 225ms padding cubic-bezier(.4,0,.2,1);
+    &.show {
+      opacity: 1;
+      padding: 8px;
+      height: initial;
+      transition: 225ms opacity cubic-bezier(.4,0,.2,1), 225ms height cubic-bezier(.4,0,.2,1), 225ms padding cubic-bezier(.4,0,.2,1);
+    }
+    .text {
+      line-height: 2em;
+      padding-left: 8px;
+      flex: 1;
+      color: rgba(255,255,255,.87);
+    }
+    button.action {
+      flex:none;
+      display: none;
+      color: green;
+      .show {
+        display: inline-block;
+      }
+    }
+    .close {
+      flex: none;
+      display: none;
+      width: 24px;
+      height: 24px;
+      min-width: 24px;
+      background-image: url('../../theme/common/icon/dark/close.svg');
+      background-color: transparent;
+      &:hover, &:active {
+        background-color: transparent;
+      }
+      &.show {
+        display: inline-block;
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: $desktop_switch) {
+  .snackbars {
+    left: 50%;
+    bottom: 200px;
+    margin-left: calc(-$width / 2);
+    width: $width;
+    transition: 195ms bottom cubic-bezier(0.4, 0, 0.2, 1);
+    &.up {
+      bottom: 500px;
+      transition: 225ms bottom cubic-bezier(0.4, 0, 0.2, 1);
+    }
+  }
+}

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

@@ -0,0 +1,345 @@
+.switch {
+  display: block;
+  position: relative;
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-right: 16px;
+  vertical-align: top;
+  display: flex;
+  flew-direction: horizontal;
+  flex-wrap: nowrap;
+
+  //overflow: hidden;
+  //border-bottom: 1px solid rgba(100, 100, 100, 0.1);
+  input {
+    position: absolute;
+    left: -10000px;
+
+    &:active {
+      //background-color: #D6E5E4;
+      //transition: .1s;
+    }
+  }
+
+  .switch-label {
+    flex: 1;
+    order: 2;
+    cursor: default;
+    font-size: 1rem;
+    line-height: 1.2rem;
+    padding: 14px 0;
+    margin: 0px 2px 0px 16px;
+    overflow: hidden;
+  }
+
+  .switch-control {
+    order: 1;
+    cursor: pointer;
+    width: 48px;
+    height: 48px;
+    padding: 17px 7px;
+    border-radius: 50%;
+    transition: .3s;
+
+    .switch-track {
+      cursor: pointer;
+      position: relative;
+      display: block;
+      height: 14px;
+      padding: 2px;
+      background-color: rgba(34, 31, 31, 0.26);
+      border-radius: 7px;
+      transition: 0.2s cubic-bezier(0.46, 0, 0.24, 1);
+
+      .switch-knob {
+        cursor: pointer;
+        position: absolute;
+        top: -3px;
+        left: -2px;
+        display: block;
+        height: 20px;
+        width: 20px;
+        margin: 0;
+        border-radius: 50%;
+        background-color: rgba(241, 241, 241, 1);
+        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+        transition: 0.2s cubic-bezier(0.46, 0, 0.24, 1);
+
+        &::after {
+          position: absolute;
+          top: -14px;
+          left: -14px;
+          width: 48px;
+          height: 48px;
+
+          // -webkit-transform: scale(0);
+          // transform: scale(0);
+          // -webkit-transition: background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
+          // transition: background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
+          // transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1);
+          // transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
+          border-radius: 24px;
+          content: "";
+
+          //opacity: .2;
+          transition: .2s;
+        }
+      }
+    }
+  }
+
+  &.is-checked {
+    .switch-track {
+      background-color: rgba($secondary-color, .3);
+
+      .switch-knob {
+        background-color: $secondary-color;
+        left: 15px;
+      }
+    }
+  }
+
+  &.is-focused {
+    .switch-track {
+      .switch-knob {
+        &::after {
+          transition: .2s;
+          position: absolute;
+          top: -14px;
+          left: -14px;
+          width: 48px;
+          height: 48px;
+          border-radius: 24px;
+          background-color: rgba(0, 0, 0, 0.05);
+          content: "";
+        }
+      }
+    }
+  }
+
+  &.is-disabled {
+    .switch-label {
+      opacity: .5;
+    }
+
+    .switch-control {
+      order: 3;
+      cursor: pointer;
+      width: 48px;
+      height: 48px;
+      padding: 17px 7px;
+
+      //border-radius: 50%;
+      //transition: .1s;
+      .switch-track {
+        background-color: rgba(34, 31, 31, 0.1);
+
+        .switch-knob {
+          background-color: rgb(189, 189, 189);
+          box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 0 1px 0 rgba(0, 0, 0, 0.06);
+        }
+      }
+    }
+  }
+}
+
+.dark-mode {
+  .material-switch {
+    .switch-control {
+      .switch-track {
+        background-color: rgba(255, 255, 255, 0.5);
+      }
+    }
+
+    &.is-checked {
+      .switch-track {
+        background-color: rgba($secondary-color, .3);
+      }
+    }
+
+    &.is-focused {
+      .switch-control {
+        .switch-track {
+          .switch-knob {
+            &::after {
+              background-color: rgba(255, 255, 255, 0.05);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.material-switch {
+  display: block;
+  position: relative;
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-right: 16px;
+  vertical-align: top;
+  display: flex;
+  flew-direction: horizontal;
+  flex-wrap: nowrap;
+
+  //overflow: hidden;
+  //border-bottom: 1px solid rgba(100, 100, 100, 0.1);
+  input {
+    position: absolute;
+    left: -10000px;
+
+    &:active {
+      //background-color: #D6E5E4;
+      //transition: .1s;
+    }
+  }
+
+  .switch-label {
+    flex: 1;
+    order: 2;
+    cursor: default;
+    font-size: 1rem;
+    line-height: 1.2rem;
+    padding: 14px 0;
+    margin: 0px 2px 0px 16px;
+    overflow: hidden;
+  }
+
+  .switch-control {
+    order: 1;
+    cursor: pointer;
+    width: 48px;
+    height: 48px;
+    padding: 17px 7px;
+    border-radius: 50%;
+    transition: .3s;
+
+    .switch-track {
+      cursor: pointer;
+      position: relative;
+      display: block;
+      height: 14px;
+      padding: 2px;
+      background-color: rgba(34, 31, 31, 0.26);
+      border-radius: 7px;
+      transition: 0.2s cubic-bezier(0.46, 0, 0.24, 1);
+
+      .switch-knob {
+        cursor: pointer;
+        position: absolute;
+        top: -3px;
+        left: -2px;
+        display: block;
+        height: 20px;
+        width: 20px;
+        margin: 0;
+        border-radius: 50%;
+        background-color: rgba(241, 241, 241, 1);
+        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+        transition: 0.2s cubic-bezier(0.46, 0, 0.24, 1);
+
+        &::after {
+          position: absolute;
+          top: -14px;
+          left: -14px;
+          width: 48px;
+          height: 48px;
+
+          // -webkit-transform: scale(0);
+          // transform: scale(0);
+          // -webkit-transition: background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
+          // transition: background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
+          // transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1);
+          // transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
+          border-radius: 24px;
+          content: "";
+
+          //opacity: .2;
+          transition: .2s;
+        }
+      }
+    }
+  }
+
+  &.is-checked {
+    .switch-track {
+      background-color: rgba($secondary-color, .3);
+
+      .switch-knob {
+        background-color: $secondary-color;
+        left: 15px;
+      }
+    }
+  }
+
+  &.is-focused {
+    .switch-track {
+      .switch-knob {
+        &::after {
+          transition: .2s;
+          position: absolute;
+          top: -14px;
+          left: -14px;
+          width: 48px;
+          height: 48px;
+          border-radius: 24px;
+          background-color: rgba(0, 0, 0, 0.05);
+          content: "";
+        }
+      }
+    }
+  }
+
+  &.is-disabled {
+    .switch-label {
+      opacity: .5;
+    }
+
+    .switch-control {
+      order: 3;
+      cursor: pointer;
+      width: 48px;
+      height: 48px;
+      padding: 17px 7px;
+
+      //border-radius: 50%;
+      //transition: .1s;
+      .switch-track {
+        background-color: rgba(34, 31, 31, 0.1);
+
+        .switch-knob {
+          background-color: rgb(189, 189, 189);
+          box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 0 1px 0 rgba(0, 0, 0, 0.06);
+        }
+      }
+    }
+  }
+}
+
+.dark-mode {
+  .material-switch {
+    .switch-control {
+      .switch-track {
+        background-color: rgba(255, 255, 255, 0.5);
+      }
+    }
+
+    &.is-checked {
+      .switch-track {
+        background-color: rgba($secondary-color, .3);
+      }
+    }
+
+    &.is-focused {
+      .switch-control {
+        .switch-track {
+          .switch-knob {
+            &::after {
+              background-color: rgba(255, 255, 255, 0.05);
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,47 @@
+.switcher {
+
+  position: relative;
+  margin-right: 16px;
+  padding-top: 8px;
+  margin-bottom: 8px;
+  vertical-align: top;
+  label {
+    display: block;
+    color: rgba(0,0,0,.4);
+    font-size: 0.7em;
+    font-weight: 600;
+    text-transform: uppercase;
+    margin-bottom: 3px;
+  }
+  ul {
+    user-select: none;
+    display: inline-block;
+    list-style: none;
+    padding: 0;
+    height: 40px;
+    margin: 0;
+    padding: 5px;
+    border-radius: 20px;
+    background-color: rgba(0, 0, 0, 0.03);
+    li {
+      cursor: pointer;
+      font-size: .8em;
+      font-weight: 600;
+      padding: 8px 16px 7px;
+      display: inline-block;
+      border-radius: 16px;
+      &.selected {
+        //color: rgba(255,255,255, 1)
+        // background-color: #4891F4
+        background-color: white;
+        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+      }
+      &.preselected {
+        //color: rgba(255,255,255, 1)
+        // background-color: #4891F4
+        background-color: white;
+        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+      }
+    }
+  }
+}