material 0.9.25 → 0.9.26

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

@@ -0,0 +1,77 @@
+$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,349 @@
+.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 {
+      /* empty */
+    }
+      //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 {
+      /* empty */
+    }
+      //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,48 @@
+.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);
+
+      }
+    }
+  }
+}

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

@@ -0,0 +1,159 @@
+.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, {
+      /* empty */
+    }
+    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], {
+    /* empty */
+  }
+  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, {
+      /* empty */
+    }
+    &: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,42 @@
+.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;
+
+  }
+}