material 0.7.2 → 0.7.4

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

@@ -1,4 +1,4 @@
-.material-checkbox
+.checkbox
   display: block
   position: relative
   margin-left: 4px
@@ -17,7 +17,7 @@
     left: -10000px
     order: 2
 
-  .checkbox-control
+  .control
     //flex: none;
     order: 1
     cursor: pointer
@@ -29,7 +29,7 @@
     border-radius: 50%
 
     //margin: 10px 10px 10px 4px;
-    .checkbox-icon
+    .icon
       position: absolute
       top: 11px
       left: 11px
@@ -38,14 +38,14 @@
       transition: .3s
 
       //stroke: rgba(0, 0, 0, 0.5);
-      .checkbox-check
+      .check
         opacity: 0
         position: absolute
         fill: rgba(255, 255, 255, 0.95)
         top: 8px
         left: 8px
 
-  .checkbox-label
+  label
     flex: 1
     order: 3
     font-size: 1rem
@@ -56,13 +56,13 @@
     overflow: hidden
 
   &.is-checked
-    .checkbox-control
-      .checkbox-icon
+    .control
+      .icon
         transition: .3s
         border-color: $secondary-color
         background-color: $secondary-color
 
-        .checkbox-check
+        .check
           opacity: 1
           position: absolute
           fill: rgba(255, 255, 255, 0.95)
@@ -70,36 +70,36 @@
           left: 8px
 
   &.is-disabled
-    .checkbox-label
+    label
       opacity: .4
 
-    .checkbox-icon
+    .icon
       background-color: rgba(0, 0, 0, 0.26)
       border-color: rgba(0, 0, 0, 0.26)
       //opacity: .4
 
-    .checkbox-control
-      .checkbox-icon
+    .control
+      .icon
         opacity: .4
 
   &.is-focused
-    .checkbox-control
+    .control
       background-color: rgba(34, 31, 31, 0.05)
 
   &:active
-    .checkbox-control
-      //background-color: transparent;
+    .control
+      background-color: transparent
 
-.dark-mode .material-checkbox,
-.material-checkbox.dark-mode
-  > .material-control
-    > .checkbox-icon
+.dark-mode .checkbox,
+.checkbox.dark-mode
+  .control
+    .icon
       border: 2px solid rgba(255, 255, 255, 0.5)
 
   &.is-focused
-    .checkbox-control
+    .control
       background-color: rgba(255, 255, 255, 0.05)
 
   &.is-checked
-    .material-control
+    .control
       background-color: rgba(255, 255, 255, 0.5)

package/src/skin/material/module/ripple.sass

@@ -1,4 +1,4 @@
-.material-ripple
+.material-ripple, .ripple
   opacity: 1
   pointer-events: none
   z-index: 1

package/src/snackbar.js

@@ -13,9 +13,10 @@ class Snackbar extends EventEmitter {
     class: 'snackbar',
     transition: 225,
     duration: 4000,
+    stack: false,
     close: false,
     layout: [
-      [Text, 'text', { tag: 'span', class: 'text' }],
+      [Text, 'message', { tag: 'span', class: 'message' }],
       [Button, 'action', { class: 'action', type: 'link' }],
       [Button, 'close', { class: 'close', type: 'action' }]
     ],
@@ -60,12 +61,13 @@ class Snackbar extends EventEmitter {
       this.options.container.classList.add('snackbars')
       container.appendChild(this.options.container)
     } else {
+      if (this.options.stack === false) snackbarContainer.innerHTML = ''
       this.options.container = snackbarContainer
     }
   }
 
   render () {
-    this.ui.text.set(this.options.text)
+    this.ui.message.set(this.options.message)
 
     if (this.options.action) {
       this.ui.action.set(this.options.action)

package/src/styles/M3/abstracts/variables.sass

@@ -0,0 +1,44 @@
+// Color Palette
+$color-primary: #3498db
+$color-secondary: #2ecc71
+$color-tertiary: #9b59b6
+$color-tonal: #d9e7cc
+$color-success: #2ecc71
+$color-warning: #f1c40f
+$color-danger: #e74c3c
+$color-light: #ecf0f1
+$color-dark: #34495e
+
+$text-on-primary: #ffffff
+$text-primary-on-dark: #ffffff
+$text-primary-on-light: #333333
+$text-on-tonal: #131F0D
+
+// Typography
+$font-primary: 'Helvetica Neue', Arial, sans-serif
+$font-secondary: 'Georgia', serif
+$font-size-base: 1rem // 16px
+$font-size-large: 1.25rem // 20px
+$font-size-small: 0.875rem // 14px
+
+// Spacing
+$spacing-unit: 10px
+
+// Breakpoints for Responsive Design
+$breakpoint-xs: 480px
+$breakpoint-sm: 768px
+$breakpoint-md: 992px
+$breakpoint-lg: 1200px
+
+// Z-index Layers
+$zindex-dropdown: 1000
+$zindex-sticky: 1020
+$zindex-fixed: 1030
+$zindex-modal-backdrop: 1040
+$zindex-modal: 1050
+$zindex-popover: 1060
+$zindex-tooltip: 1070
+
+// Other Variables
+$border-radius: 4px
+$box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)

package/src/styles/M3/components/button.sass

@@ -0,0 +1,26 @@
+.button
+  font-size: 0.875rem
+  font-weight: 500
+  color: $text-on-primary
+  height: 40px
+  background-color: $color-primary
+  padding-left: 24px
+  padding-right: 24px
+  border-radius: 20px
+  border: none
+  overflow: hidden
+  &.style-filled
+    color: $text-on-primary
+    background-color: $color-primary
+  &.style-tonal
+    color: $text-on-tonal
+    background-color: $color-tonal
+  &.style-elevated
+    background-color: $color-primary
+    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-outlined
+    color: $color-primary
+    background-color: transparent
+    border-color: 2px solid #72776C
+  &.style-text
+    color: $color-primary

package/src/styles/M3/modules/ripple.sass

@@ -0,0 +1,9 @@
+.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/styles/M3/themes/classic.sass

@@ -0,0 +1,2 @@
+$primary: #6750A4
+$onPrimary: rgba(255,255,255,.87)

package/src/tabs.js

@@ -1,5 +1,3 @@
-'use strict'
-
 import create from './mixin/create'
 import insert from './mixin/insert'
 import emitter from './module/emitter'
@@ -49,6 +47,7 @@ class Tabs {
     if (this.options.list) {
       this.list = new List({
         tag: 'div',
+        container: this.element,
         list: this.options.list,
         target: '.material-button',
         height: 600,
@@ -74,7 +73,7 @@ class Tabs {
           this.selected = item
           this.click(item)
         }
-      }).insert(this.element)
+      })
     }
 
     this.indicator = create(this.options.indicator)