material 0.4.3 → 0.5.0

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

@@ -0,0 +1,161 @@
+.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.bak/control/button.sass

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

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

@@ -0,0 +1,105 @@
+.material-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
+
+  .checkbox-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;
+    .checkbox-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);
+      .checkbox-check
+        opacity: 0
+        position: absolute
+        fill: rgba(255, 255, 255, 0.95)
+        top: 8px
+        left: 8px
+
+  .checkbox-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
+    .checkbox-control
+      .checkbox-icon
+        transition: .3s
+        border-color: $secondary-color
+        background-color: $secondary-color
+
+        .checkbox-check
+          opacity: 1
+          position: absolute
+          fill: rgba(255, 255, 255, 0.95)
+          top: 8px
+          left: 8px
+
+  &.is-disabled
+    .checkbox-label
+      opacity: .4
+
+    .checkbox-icon
+      background-color: rgba(0, 0, 0, 0.26)
+      border-color: rgba(0, 0, 0, 0.26)
+      //opacity: .4
+
+    .checkbox-control
+      .checkbox-icon
+        opacity: .4
+
+  &.is-focused
+    .checkbox-control
+      background-color: rgba(34, 31, 31, 0.05)
+
+  &:active
+    .checkbox-control
+      //background-color: transparent;
+
+.dark-mode .material-checkbox,
+.material-checkbox.dark-mode
+  > .material-control
+    > .checkbox-icon
+      border: 2px solid rgba(255, 255, 255, 0.5)
+
+  &.is-focused
+    .checkbox-control
+      background-color: rgba(255, 255, 255, 0.05)
+
+  &.is-checked
+    .material-control
+      background-color: rgba(255, 255, 255, 0.5)

package/src/skin/material.bak/control/search.sass

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

package/src/skin/material.bak/control/selecter.sass

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