material 0.9.25 → 0.9.26

package/src/skin/material/control/button.sass

@@ -1,135 +0,0 @@
-.button
-  user-select: none
-  font-size: 0.875rem
-  line-height: 1.5rem
-  text-transform: uppercase
-  flex: none
-  display: flex
-  -webkit-font-smoothing: antialiased
-  white-space: nowrap
-  position: relative
-  vertical-align: middle
-  cursor: default
-  height: 36px
-  padding: 6px 12px
-  margin: 0 8px
-  border: none
-  border-radius: 3px
-  overflow: hidden
-  background-color: transparent
-  background-repeat: no-repeat
-
-  i
-    pointer-events: none
-    height: 24px
-    width: 24px
-    padding: 0
-
-  &.hide
-    display: none
-
-  // pseudo class
-  
-
-  &:focus
-    background-color: rgba(0, 0, 0, .1)
-
-  &:active
-    background-color: rgba(0, 0, 0, .1)
-
-  &:disabled
-    opacity: .5
-    background-color: transparent
-    &:hover
-      background-color: transparent
-
-  &[type="submit"]
-    font-weight: 600
-    padding: 6px 20px
-
-  // size
-  &.small-size
-    height: 36px
-    padding: 6px 12px
-
-  // styles
-  &.style-raised
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12)
-
-  &.style-outline
-    border: 1px solid #E1E1E1
-
-  &.style-action
-    width: 40px
-    height: 40px
-    border-radius: 50%
-    padding: 8px
-    background-position: center
-    i
-      pointer-events: none
-
-      height: 24px
-      width: 24px
-      margin-left: 0
-      svg
-        fill: rgba(0, 0, 0, 0.67)
-    
-    &:hover
-      background-color: rgba(0,0,0,.1)
-
-    &.small-size
-      width: 36px
-      height: 36px
-      padding: 6px
-
-  &.bold
-    font-weight: 600
-
-  &.normal-case
-    text-transform: none
-
-  &.color-secondary
-    color: $secondary-color-text
-    background-color: darken($secondary-color, 10%)
-    &:hover
-      background-color: darken($secondary-color, 5%)
-      &:focus
-        background-color: darken($secondary-color, 5%)
-    &:focus
-      background-color: darken($secondary-color, 10%)
-    &:disabled
-      background-color: darken($secondary-color, 10%)
-      &:hover
-        background-color: darken($secondary-color, 10%)
-
-  &.color-primary
-    color: $primary-color-text
-    background-color: darken($primary-color, 10%)
-    &:hover
-      background-color: darken($primary-color, 5%)
-      &:focus
-        background-color: darken($primary-color, 5%)
-    &:focus
-      background-color: darken($primary-color, 10%)
-    &:disabled
-      background-color: darken($primary-color, 10%)
-      &:hover
-        background-color: darken($primary-color, 10%)
-
-
-@media only screen and (min-width: 640px)
-.button
-  &:hover
-    background-color: rgba(0, 0, 0, .1)
-    &:focus
-      background-color: rgba(0, 0, 0, .1)
-
-.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/control/checkbox.sass

@@ -1,105 +0,0 @@
-.checkbox
-  display: block
-  position: relative
-  margin-left: 4px
-  margin-right: 12px
-  padding-top: 4px
-  padding-top: 4px
-  padding-bottom: 4px
-  vertical-align: top
-  overflow: hidden
-  display: flex
-  flew-direction: horizontal
-  flex-wrap: nowrap
-
-  input
-    position: absolute
-    left: -10000px
-    order: 2
-
-  .control
-    //flex: none;
-    order: 1
-    cursor: pointer
-    position: relative
-    height: 40px
-    width: 40px
-    padding: 0
-    margin: 4px
-    border-radius: 50%
-
-    //margin: 10px 10px 10px 4px;
-    .icon
-      position: absolute
-      top: 11px
-      left: 11px
-      border: 2px solid rgba(0, 0, 0, 0.5)
-      border-radius: 2px
-      transition: .3s
-
-      //stroke: rgba(0, 0, 0, 0.5);
-      .check
-        opacity: 0
-        position: absolute
-        fill: rgba(255, 255, 255, 0.95)
-        top: 8px
-        left: 8px
-
-  label
-    flex: 1
-    order: 3
-    font-size: 1rem
-    line-height: 1.25rem
-    cursor: default
-    padding: 15px 0 9px
-    margin: 0px 2px 0px 12px
-    overflow: hidden
-
-  &.is-checked
-    .control
-      .icon
-        transition: .3s
-        border-color: $secondary-color
-        background-color: $secondary-color
-
-        .check
-          opacity: 1
-          position: absolute
-          fill: rgba(255, 255, 255, 0.95)
-          top: 8px
-          left: 8px
-
-  &.is-disabled
-    label
-      opacity: .4
-
-    .icon
-      background-color: rgba(0, 0, 0, 0.26)
-      border-color: rgba(0, 0, 0, 0.26)
-      //opacity: .4
-
-    .control
-      .icon
-        opacity: .4
-
-  &.is-focused
-    .control
-      background-color: rgba(34, 31, 31, 0.05)
-
-  &:active
-    .control
-      background-color: transparent
-
-.dark-mode .checkbox,
-.checkbox.dark-mode
-  .control
-    .icon
-      border: 2px solid rgba(255, 255, 255, 0.5)
-
-  &.is-focused
-    .control
-      background-color: rgba(255, 255, 255, 0.05)
-
-  &.is-checked
-    .control
-      background-color: rgba(255, 255, 255, 0.5)

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

@@ -1,188 +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/menu.sass

@@ -1,18 +0,0 @@
-.menu
-  //display: none
-  &.show
-    //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.sass

@@ -1,136 +0,0 @@
-// 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
-      -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.sass

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