material 0.9.24 → 0.9.26

package/src/skin/material/container/toolbar.sass

@@ -1,161 +0,0 @@
-.material-toolbar
-  display: flex
-  flex-direction: row
-  //height: 64px
-
-  // position: absolute
-  // top: 0
-  // left: 0
-  // right: 0
-
-  z-index: 3
-  flex: none
-  display: flex
-  flex-direction: row
-  flex-wrap: nowrap
-  //padding: 14px 16px
-
-  &.type-app
-    z-index: 5
-    padding: 14px 16px
-    position: fixed
-    &.is-flexible
-      position: fixed
-    &.is-scrolled
-      transition: box-shadow .3s
-      box-shadow: 0 0 4px rgba(0, 0, 0, 0.14),0 4px 8px rgba(0, 0, 0, 0.28)
-
-
-  &.is-flexible
-    position: absolute
-    top: 0
-    left: 0
-    right: 0
-    //display: block
-
-  &.is-fixed
-    position: absolute
-    top: 0
-    left: 0
-    right: 0
-    //display: block
-    &.is-scrolled
-      transition: box-shadow .3s
-      box-shadow: 0 0 4px rgba(0, 0, 0, 0.14),0 4px 8px rgba(0, 0, 0, 0.28)
-
-
-
- 
-
-  
-
-  
-  > *
-    &:first-child
-      margin-left: 0
-
-    &:last-child
-      margin-right: 0
-
-
-  .material-text
-    flex: 1
-    display: inline-block
-    font-size: 1.3rem
-    font-weight: 300
-    line-height: 2.3rem
-    //color: $primary-color-text
-    padding: 0
-    margin-left: 16px
-    overflow: hidden
-    white-space: nowrap
-    text-overflow: ellipsis
-
-  .material-checkbox
-    padding: 0
-    .checkbox-control
-      height: 36px
-      width: 36px
-      margin: 0
-      .checkbox-icon
-        border: 2px solid rgba(255, 255, 255, 0.95)
-    .checkbox-label
-      color: $primary-color-text
-      padding: 10px 0 6px
-
-
-
-  .material-button
-    .button-icon
-      svg
-        fill: $default-color-icon
-
-
-  &.transparent-color
-    background-color: transparent
-    .material-text
-      color: $default-color-text
-    .material-button
-      .button-icon
-        svg
-          fill: $default-color-text
-    .material-checkbox
-      padding: 0
-      .checkbox-control
-        height: 36px
-        width: 36px
-        margin: 0
-        .checkbox-icon
-          border: 2px solid rgba(255, 255, 255, 0.95)
-      .checkbox-label
-        color: $default-color-text
-        padding: 10px 0 6px
-
-  &.primary-color
-    background-color: $primary-color
-    .material-text
-      color: $primary-color-text
-    .material-button
-      .button-icon
-        svg
-          fill: $primary-color-text
-    .material-checkbox
-      padding: 0
-      .checkbox-control
-        height: 36px
-        width: 36px
-        margin: 0
-        .checkbox-icon
-          border: 2px solid rgba(255, 255, 255, 0.95)
-      .checkbox-label
-        color: $primary-color-text
-        padding: 10px 0 6px
-
-  &.secondary-color
-    background-color: $secondary-color
-    .material-text
-      color: $secondary-color-text
-    .material-button
-      .button-icon
-        svg
-          fill: $secondary-color-text
-    .material-checkbox
-      padding: 0
-      .checkbox-control
-        height: 36px
-        width: 36px
-        margin: 0
-        .checkbox-icon
-          border: 2px solid rgba(255, 255, 255, 0.95)
-      .checkbox-label
-        color: $secondary-color-text
-        padding: 10px 0 6px
-
-
-
-
-// @media only screen and (max-width: 768px)
-//   .material-toolbar
-//     &.type-app
-//       padding: 10px 16px
-    

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
-
-