material 0.9.25 → 0.9.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material",
-  "version": "0.9.25",
+  "version": "0.9.26",
   "description": "A lightweight implementation of Material Design Components for the web - ES6",
   "main": "index.js",
   "type": "module",

package/src/skin/material/base/body.scss

@@ -0,0 +1,83 @@
+
+// HTML Tags General Defintion
+html {
+  font-size: 100%;
+  line-height: 1.15;
+  width: 100%;
+  height: 100%;
+
+}
+body {
+  color: rgba(0, 0, 0, 0.67);
+  font-family: Roboto, arial, serif {
+    /* empty */
+  }
+  font-size: 100%;
+  // position: relative
+  // display: block
+  // height: 100%
+  // width: 100%
+  // overflow: hidden
+  margin: 0;
+  padding: 0;
+  // user-select: none
+
+}
+input, {
+  /* empty */
+}
+textarea, {
+  /* empty */
+}
+keygen, {
+  /* empty */
+}
+select, {
+  /* empty */
+}
+button {
+  font-size: 1em;
+  font-family: Roboto, arial, serif {
+    /* empty */
+  }
+  color: rgb(51, 51, 51);
+
+}
+p {
+  line-height: 20px;
+  padding-top: 6px;
+  margin-bottom: 14px;
+  letter-spacing: 0;
+  font-weight: 400;
+
+// get rid of outline
+}
+select, {
+  /* empty */
+}
+input, {
+  /* empty */
+}
+textarea, {
+  /* empty */
+}
+button {
+  outline: none;
+  &:hover {
+    outline: none;
+
+  }
+}
+button {
+  user-select: none;
+
+// set all container boder-box
+}
+* {
+  box-sizing: border-box;
+
+}
+a {
+  color: rgba(0, 0, 0, 0.7);
+
+}

package/src/skin/material/base/{elevation.sass → elevation.scss}

@@ -1,50 +1,76 @@
-.elevation-z0
-  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)
-.elevation-z1
-  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)
-.elevation-z2
-  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)
-.elevation-z3
-  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12)
-.elevation-z4
-  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)
-.elevation-z5
-  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12)
-.elevation-z6
-  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)
-.elevation-z7
-  box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12)
-.elevation-z8
-  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)
-.elevation-z9
-  box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12)
-.elevation-z10
-  box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12)
-.elevation-z11
-  box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12)
-.elevation-z12
-  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)
-.elevation-z13
-  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12)
-.elevation-z14
-  box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12)
-.elevation-z15
-  box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12)
-.elevation-z16
-  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12)
-.elevation-z17
-  box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12)
-.elevation-z18
-  box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12)
-.elevation-z19
-  box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12)
-.elevation-z20
-  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12)
-.elevation-z21
-  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12)
-.elevation-z22
-  box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12)
-.elevation-z23
-  box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12)
-.elevation-z24
-  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)
+.elevation-z0 {
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+}
+.elevation-z1 {
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+}
+.elevation-z2 {
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+}
+.elevation-z3 {
+  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
+}
+.elevation-z4 {
+  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+}
+.elevation-z5 {
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
+}
+.elevation-z6 {
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+}
+.elevation-z7 {
+  box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
+}
+.elevation-z8 {
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+.elevation-z9 {
+  box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
+}
+.elevation-z10 {
+  box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
+}
+.elevation-z11 {
+  box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
+}
+.elevation-z12 {
+  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
+}
+.elevation-z13 {
+  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
+}
+.elevation-z14 {
+  box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
+}
+.elevation-z15 {
+  box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
+}
+.elevation-z16 {
+  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
+}
+.elevation-z17 {
+  box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
+}
+.elevation-z18 {
+  box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
+}
+.elevation-z19 {
+  box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
+}
+.elevation-z20 {
+  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
+}
+.elevation-z21 {
+  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
+}
+.elevation-z22 {
+  box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
+}
+.elevation-z23 {
+  box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
+}
+.elevation-z24 {
+  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+
+}

package/src/skin/material/base/{grid.sass → grid.scss}

@@ -3,61 +3,73 @@
 /////////////////
 
 // Defaults which you can freely override
-$column-width: 60px
-$gutter-width: 20px
-$columns: 12
+$column-width: 60px;
+$gutter-width: 20px;
+$columns: 12;
 
 // Utility function — you should never need to modify this
-@function gridsystem-width($columns:$columns)
-  @return ($column-width * $columns) + ($gutter-width * $columns)
+@function gridsystem-width($columns:$columns) {
+  @return ($column-width * $columns) + ($gutter-width * $columns);
 
 
 // Set $total-width to 100% for a fluid layout
-$total-width: gridsystem-width($columns)
+}
+$total-width: gridsystem-width($columns);
 
 // Uncomment these two lines and the star-hack width/margin lines below to enable sub-pixel fix for IE6 & 7. See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
 // $min-width: 999999
 // $correction: 0.5 / $min-width * 100
 
 // The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
-@mixin clearfix()
-  *zoom:1
+@mixin clearfix() {
+  *zoom:1;
 
-  &:before,
-  &:after
-      content:""
-      display:table
-  
-  &:after
-      clear:both
+  &:before, {
+    /* empty */
+  }
+  &:after {
+      content:"";
+      display:table;
+
+  }
+  &:after {
+      clear:both;
 
 //////////
 // GRID //
 //////////
 
-body
-  width: 100%
-  @include clearfix()
+  }
+}
+body {
+  width: 100%;
+  @include clearfix();
 
 
-@mixin row($columns:$columns)
-  display: block
-  width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns))
-  margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1)
+}
+@mixin row($columns:$columns) {
+  display: block;
+  width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns));
+  margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1);
   // *width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns))-$correction
   // *margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1)-$correction
-  @include clearfix()
+  @include clearfix();
 
-@mixin column($x,$columns:$columns)
-  display: inline
-  float: left
-  width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns))
-  margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns))
+}
+@mixin column($x,$columns:$columns) {
+  display: inline;
+  float: left;
+  width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns));
+  margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns));
   // *width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns))-$correction
   // *margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns))-$correction
 
-@mixin push($offset:1)
-  margin-left: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns))
+}
+@mixin push($offset:1) {
+  margin-left: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns));
+
+}
+@mixin pull($offset:1) {
+  margin-right: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns));
 
-@mixin pull($offset:1)
-  margin-right: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns))
+}

package/src/skin/material/base/typo.scss

@@ -0,0 +1,133 @@
+.material-text {
+  &.type-display4 {
+    font-size: 7rem;
+    font-weight: 300;
+    letter-spacing: -0.04em;
+    line-height: 7rem;
+
+  }
+  &.type-display3 {
+    font-size: 3.5rem;
+    font-weight: 400;
+    letter-spacing: -0.02em;
+    line-height: 3.5rem;
+
+  }
+  &.type-display2 {
+    font-size: 2.813rem;
+    font-weight: 400;
+    letter-spacing: normal;
+    line-height: 3rem;
+
+  }
+  &.type-display1 {
+    font-size: 2.125rem;
+    font-weight: 400;
+    letter-spacing: normal;
+    line-height: 2.5rem;
+
+  }
+  &.type-headline {
+    font-size: 1.5rem;
+    font-weight: 400;
+    letter-spacing: normal;
+    line-height: 2rem;
+
+  }
+  &.type-title {
+    font-size: 1.25rem;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    line-height: 2rem;
+
+  }
+  &.type-subheading2 {
+    font-size: 1rem;
+    font-weight: 400;
+    letter-spacing: 0.04em;
+    line-height: 1.75rem;
+
+  }
+  &.type-subheading1 {
+    font-size: 0.938rem;
+    font-weight: 400;
+    letter-spacing: 0.04em;
+    line-height: 1.5rem;
+
+  }
+  &.type-body1 {
+    font-size: 0.875rem;
+    font-weight: 400;
+    letter-spacing: 0.04em;
+    line-height: 1.25rem;
+
+  }
+  &.type-body2 {
+    font-size: 0.875rem;
+    font-weight: 500;
+    letter-spacing: 0.04em;
+    line-height: 1.5rem;
+
+  }
+  &.type-caption {
+    font-size: 0.75rem;
+    font-weight: 400;
+    letter-spacing: 0.08em;
+    line-height: 1.25rem;
+
+  }
+  &.type-button {
+    font-size: 14px;
+    font-weight: 500;
+
+    // margin-bottom: 30px;
+    margin-left: 8px;
+
+  }
+  &.style-adjust {
+    &.type-display4 {
+      margin: -1rem 0 3.5rem -0.085em;
+
+    }
+    &.type-display3 {
+      margin: -8px 0 64px -0.07em;
+
+    }
+    &.type-display2 {
+      margin: -0.5rem 0 4rem -0.07em;
+
+    }
+    &.type-display1 {
+      margin: -0.5rem 0 4rem -0.07em;
+
+    }
+    &.type-headline {
+      margin: -0.5rem 0 1rem -0.06em;
+
+    }
+    &.type-title {
+      margin: -0.5rem 0 1rem -0.05em;
+
+    }
+    &.type-subheading2 {
+      margin: -0.5rem 0 1rem -0.06em;
+
+    }
+    &.type-subheading1 {
+      margin: -0.313rem 0 0.813rem -0.06em;
+
+    }
+    &.type-body1 {
+      margin: -0.25rem 0 0.75rem 0;
+
+    }
+    &.type-body2 {
+      margin: -0.25rem 0 0.75rem 0;
+
+    }
+    &.type-caption {
+      line-height: 1.25rem;
+
+    }
+  }
+}

package/src/skin/material/button/action.scss

@@ -0,0 +1,124 @@
+
+// type action
+.button.type-action {
+  min-width: 36px;
+  transition: box-shadow .2s;
+  box-shadow: none;
+  border-radius: 50%;
+  padding: 6px;
+  .button-icon {
+    padding: 0;
+    height: 24px;
+    width: 24px;
+    margin-left: 0;
+    svg {
+      fill: $default-color-text;
+
+// styles
+    }
+  }
+}
+.button.type-action {
+  &.style-dense, {
+    /* empty */
+  }
+  &.style-compact {
+    height: 32px;
+    width: 32px;
+    min-width: 32px;
+    border-radius: 50%;
+    .button-icon {
+      width: 20px;
+      height: 20px;
+      svg {
+        width: 20px;
+        height: 20px;
+        viewbox: 0 0 20 20;
+
+
+// states
+      }
+    }
+  }
+}
+.button.type-action {
+  &:hover {
+    /* empty */
+  }
+    //background-color: #E0E0E0;
+
+  &:focus {
+    /* empty */
+  }
+    //background-color: darken(rgba(255, 255, 255, 0.95), 5%)
+
+  .material-ripple {
+    /* empty */
+  }
+    //background-color: rgba(255, 255, 255, 1)
+
+// color
+}
+.button.type-action {
+  &.primary-color {
+    background-color: $primary-color;
+    color: $primary-color-text;
+    .button-icon {
+      svg {
+        fill: $primary-color-text;
+      }
+    }
+    &:focus {
+      background-color: lighten($primary-color, 10%);
+      color: $primary-color-text;
+    }
+  }
+  &.secondary-color {
+    background-color: $secondary-color;
+    color: $secondary-color-text;
+    .button-icon {
+      svg {
+        fill: $secondary-color-text;
+      }
+    }
+    &:focus {
+      background-color: lighten($secondary-color, 5%);
+      color: $secondary-color-text;
+
+
+// theme
+    }
+  }
+}
+.dark-mode .button.type-action, {
+  /* empty */
+}
+.button.type-action.dark-mode {
+
+  //background-color: rgba(255, 255, 255, 0.95)
+  color: $primary-color-text-dark;
+
+  &.primary-color {
+    background-color: $primary-color-dark;
+    color: $primary-color-text-dark;
+    .button-icon {
+      svg {
+        fill: $primary-color-text-dark;
+      }
+    }
+  }
+  &.secondary-color {
+    background-color: $secondary-color-dark;
+    color: $secondary-color-text-dark;
+    .button-icon {
+      svg {
+        fill: $secondary-color-text-dark;
+
+
+
+
+
+      }
+    }
+  }
+}