material 1.0.4 → 3.0.0-next.0

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

@@ -1,218 +0,0 @@
-.colorpicker {
-  display: none;
-  position: absolute;
-  width: 280px;
-  background-color: var(--md-sys-color-surface);
-  border-radius: 4px;
-  box-shadow: var(--md-sys-elevation-3);
-  z-index: 1000;
-
-  // Panel container
-  .panel {
-    padding: 16px;
-
-   // Color gradient area
-  }
-  .gradient {
-    position: relative;
-    width: 100%;
-    height: 150px;
-    margin-bottom: 16px;
-    border-radius: 4px;
-    background-image: linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentColor);
-    cursor: pointer;
-
-    .marker {
-      position: absolute;
-      width: 12px;
-      height: 12px;
-      margin: -6px;
-      border: 2px solid #fff;
-      border-radius: 50%;
-      background-color: currentColor;
-      box-shadow: 0 1px 4px rgba(0,0,0,0.2);
-      cursor: pointer;
-      transition: transform 0.1s ease;
-
-      &:focus {
-        outline: none;
-        transform: scale(1.1);
-
-  // Hue and Alpha sliders
-      }
-    }
-  }
-  .hue,
-  .alpha {
-    position: relative;
-    width: 100%;
-    height: 20px;
-    margin: 8px 0;
-    border-radius: 10px;
-
-    input[type="range"] {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      margin: 0;
-      opacity: 0;
-      cursor: pointer;
-      appearance: none;
-    }
-
-    .marker {
-      position: absolute;
-      width: 20px;
-      height: 20px;
-      transform: translateX(-50%);
-      border: 2px solid #fff;
-      border-radius: 50%;
-      background-color: currentColor;
-      box-shadow: 0 1px 4px rgba(0,0,0,0.2);
-      pointer-events: none;
-    }
-  }
-
-  .hue {
-    background-image: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
-  }
-
-  .alpha {
-    background-image: linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);
-    background-size: 8px 8px;
-    background-position: 0 0, 4px 4px;
-
-    &:after {
-      content: '';
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      border-radius: inherit;
-      background-image: linear-gradient(90deg, rgba(0,0,0,0), currentColor);
-
-  // Input and Preview
-    }
-  }
-  .input {
-    width: 100%;
-    height: 40px;
-    margin: 8px 0;
-    padding: 0 12px;
-    border: 1px solid var(--md-sys-color-outline);
-    border-radius: 4px;
-    background: var(--md-sys-color-surface);
-    color: var(--md-sys-color-on-surface);
-    font-family: var(--md-sys-typescale-body-medium-font-family);
-    font-size: var(--md-sys-typescale-body-medium-size);
-    transition: border-color 0.2s ease;
-
-    &:focus {
-      outline: none;
-      border-color: var(--md-sys-color-primary);
-    }
-  }
-
-  .preview {
-    position: relative;
-    width: 40px;
-    height: 40px;
-    border-radius: 4px;
-    background-image: linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);
-    background-size: 8px 8px;
-    background-position: 0 0, 4px 4px;
-    overflow: hidden;
-
-    &:after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background-color: currentColor;
-
-  // Swatches
-    }
-  }
-  .swatches {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin-top: 16px;
-
-    button {
-      width: 24px;
-      height: 24px;
-      padding: 0;
-      border: none;
-      border-radius: 4px;
-      background-color: currentColor;
-      cursor: pointer;
-      transition: transform 0.1s ease;
-
-      &:hover {
-        transform: scale(1.1);
-      }
-
-      &:focus {
-        outline: 2px solid var(--md-sys-color-primary);
-        outline-offset: 2px;
-
-  // States
-      }
-    }
-  }
-  &.is-open {
-    display: block;
-  }
-
-  &[data-inline="true"] {
-    position: relative;
-    display: block;
-  }
-
-  &[data-alpha="false"] {
-    .alpha {
-      display: none;
-
-// Field wrapper styles
-    }
-  }
-}
-.colorpicker-field {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-
-  input {
-    padding-right: 40px;
-  }
-
-  .preview {
-    position: absolute;
-    right: 8px;
-    width: 24px;
-    height: 24px;
-    border-radius: 4px;
-    background-image: linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);
-    background-size: 8px 8px;
-    background-position: 0 0, 4px 4px;
-    pointer-events: none;
-
-    &:after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background-color: currentColor;
-
-// Dark theme support
-    }
-  }
-}
-@media (prefers-color-scheme: dark) {
-  .colorpicker {
-    background-color: var(--md-sys-color-surface-container-high);
-
-    .input {
-      background: var(--md-sys-color-surface-container);
-      color: var(--md-sys-color-on-surface);
-    }
-  }
-}

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

@@ -1 +0,0 @@
-

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

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

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

@@ -1,172 +0,0 @@
-@use "../variables" as *;
-@use "sass:color";
-
-// Here is where the magic happens
-
-.progress {
-  width: 100%;
-  height: 4px;
-  background-color: color.adjust($primary-color, $lightness: 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: color.adjust($primary-color, $lightness: 30%);
-  overflow: hidden;
-  .determinate {
-    position: absolute;
-    background-color: inherit;
-    top: 0;
-    bottom: 0;
-    background-color: $primary-color;
-    transition: width 0.3s linear;
-  }
-  .bar {
-    background-color: $primary-color;
-    &:before {
-      content: "";
-      position: absolute;
-      background-color: inherit;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      will-change: left, right;
-      -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;
-      -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

@@ -1,52 +0,0 @@
-@use "../variables" as *;
-
-.search-input {
-  position: relative;
-  height: 40px;
-  width: 100%;
-  display: none;
-  flex-direction: row;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  background-color: rgba(0, 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: 0.4;
-    flex: none;
-    width: 46px;
-    height: 40px;
-    margin: 0;
-    background-color: transparent;
-    &:focus {
-      opacity: 0.4;
-      background-color: transparent;
-    }
-    &:hover,
-    &:active {
-      opacity: 0.7;
-      background-color: transparent;
-    }
-    .icon {
-      svg {
-        fill: $primary-color;
-      }
-    }
-  }
-}

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

@@ -1,150 +0,0 @@
-.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

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