feat(windows): add list and item components

removed transition from checkbox

references #5565

ionic/components.wp.scss

@@ -13,6 +13,8 @@
   "components/checkbox/checkbox.wp",
   "components/chip/chip.wp",
   "components/content/content.wp",
+  "components/item/item.wp",
+  "components/list/list.wp",
   "components/modal/modal.wp",
   "components/radio/radio.wp",
   "components/segment/segment.wp",

ionic/components/checkbox/checkbox.wp.scss

@@ -25,9 +25,6 @@ $checkbox-wp-icon-border-radius:         0 !default;
 $checkbox-wp-icon-border-color-off:      #333333 !default;
 $checkbox-wp-icon-border-color-on:       map-get($colors-wp, primary) !default;
 
-$checkbox-wp-transition-duration:        280ms !default;
-$checkbox-wp-transition-easing:          cubic-bezier(.4,0,.2,1) !default;
-
 
 ion-checkbox {
   position: relative;
@@ -47,10 +44,6 @@ ion-checkbox {
   border-style: $checkbox-wp-icon-border-style;
   border-color: $checkbox-wp-icon-border-color-off;
   background-color: $checkbox-wp-icon-background-color-off;
-
-  transition-property: background;
-  transition-duration: $checkbox-wp-transition-duration;
-  transition-timing-function: $checkbox-wp-transition-easing;
 }
 
 

ionic/components/item/item.wp.scss

@@ -0,0 +1,178 @@
+@import "../../globals.wp";
+@import "./item";
+
+// Windows Item
+// --------------------------------------------------
+
+$item-wp-body-text-font-size:        1.4rem !default;
+$item-wp-body-text-line-height:      1.5 !default;
+$item-wp-paragraph-text-color:       #666 !default;
+
+$item-wp-font-size:                  1.6rem !default;
+$item-wp-avatar-size:                4rem !default;
+$item-wp-thumbnail-size:             8rem !default;
+$item-wp-note-color:                 darken($list-wp-border-color, 10%) !default;
+
+$item-wp-divider-bg:                 #fff !default;
+$item-wp-divider-color:              #222 !default;
+$item-wp-divider-padding:            5px 15px !default;
+
+$item-wp-sliding-content-bg:         $list-wp-background-color !default;
+
+
+.item {
+  position: relative;
+  padding-right: 0;
+  padding-left: ($item-wp-padding-left);
+  font-size: $item-wp-font-size;
+  text-transform: none;
+  font-weight: normal;
+
+  color: $list-wp-text-color;
+  background-color: $list-wp-background-color;
+  box-shadow: none;
+  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms;
+
+  h1 {
+    margin: 0 0 2px;
+    font-size: 2.4rem;
+    font-weight: normal;
+  }
+
+  h2 {
+    margin: 2px 0 2px;
+    font-size: 1.6rem;
+    font-weight: normal;
+  }
+
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: normal;
+    margin: 2px 0 2px;
+    font-size: 1.4rem;
+    font-weight: normal;
+  }
+
+  p {
+    line-height: normal;
+    color: $item-wp-paragraph-text-color;
+    font-size: 1.4rem;
+    margin: 0 0 2px;
+  }
+}
+
+.item.activated {
+  background-color: $list-wp-activated-background-color;
+}
+
+.item[no-lines] {
+  border-width: 0;
+}
+
+.item-inner {
+  padding-right: ($item-wp-padding-right / 2);
+  border-bottom: 1px solid $list-wp-border-color;
+}
+
+
+// Windows Item Media
+// --------------------------------------------------
+
+[item-left],
+[item-right] {
+  margin: $item-wp-padding-media-top ($item-wp-padding-right / 2) $item-wp-padding-media-bottom 0;
+}
+
+ion-icon[item-left],
+ion-icon[item-right] {
+  margin-top: $item-wp-padding-icon-top;
+  margin-bottom: $item-wp-padding-icon-bottom;
+  margin-left: 0;
+}
+
+.item-button {
+  padding: 0 0.6em;
+  height: 25px;
+  font-size: 1.2rem;
+}
+
+.item-button.button-icon-only ion-icon,
+.item-button.button-icon-only {
+   padding: 0 1px;
+ }
+
+[text-wrap] ion-label {
+  font-size: $item-wp-body-text-font-size;
+  line-height: $item-wp-body-text-line-height;
+}
+
+ion-icon[item-left] + .item-inner,
+ion-icon[item-left] + .item-input {
+  margin-left: $item-wp-padding-left + ($item-wp-padding-left / 2);
+}
+
+ion-avatar[item-left],
+ion-thumbnail[item-left] {
+  margin: ($item-wp-padding-right / 2) $item-wp-padding-right ($item-wp-padding-right / 2) 0;
+}
+
+ion-avatar[item-right],
+ion-thumbnail[item-right] {
+  margin: ($item-wp-padding-right / 2);
+}
+
+ion-avatar {
+  min-width: $item-wp-avatar-size;
+  min-height: $item-wp-avatar-size;
+
+  img {
+    max-width: $item-wp-avatar-size;
+    max-height: $item-wp-avatar-size;
+    border-radius: $item-wp-avatar-size / 2;
+  }
+}
+
+ion-thumbnail {
+  min-width: $item-wp-thumbnail-size;
+  min-height: $item-wp-thumbnail-size;
+
+  img {
+    max-width: $item-wp-thumbnail-size;
+    max-height: $item-wp-thumbnail-size;
+  }
+}
+
+ion-note {
+  color: $item-wp-note-color;
+}
+
+
+// Windows Item Divider
+// --------------------------------------------------
+
+ion-item-divider {
+  padding: $item-wp-padding-top $item-wp-padding-right $item-wp-padding-bottom $item-wp-padding-left;
+  background-color: $item-wp-divider-bg;
+  color: $item-wp-divider-color;
+}
+
+
+// Generate Windows Item Divider Colors
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-wp {
+  ion-item-divider[#{$color-name}] {
+    background-color: $color-value;
+    color: color-inverse($color-value);
+  }
+}
+
+
+// Windows Item Sliding
+// --------------------------------------------------
+
+ion-item-sliding {
+  background-color: $item-wp-sliding-content-bg;
+}

ionic/components/list/list.wp.scss

@@ -0,0 +1,143 @@
+@import "../../globals.wp";
+@import "./list";
+
+// Windows List
+// --------------------------------------------------
+
+$list-wp-margin-top:             16px !default;
+$list-wp-margin-right:           0 !default;
+$list-wp-margin-bottom:          16px !default;
+$list-wp-margin-left:            0 !default;
+
+$list-inset-wp-margin-top:       16px !default;
+$list-inset-wp-margin-right:     16px !default;
+$list-inset-wp-margin-bottom:    16px !default;
+$list-inset-wp-margin-left:      16px !default;
+$list-inset-wp-border-radius:    2px !default;
+
+$list-wp-header-padding:         16px $item-wp-padding-right 16px $item-wp-padding-left !default;
+$list-wp-header-font-size:       2.0rem !default;
+$list-wp-header-color:           #515151 !default;
+
+
+/****************/
+/* DEFAULT LIST */
+/****************/
+
+ion-list-header,
+ion-item-divider {
+  border-bottom: 1px solid $list-wp-border-color;
+  margin-left: 0;
+  padding: $list-wp-header-padding;
+  font-size: $list-wp-header-font-size;
+  color: $list-wp-header-color;
+}
+
+ion-list {
+  margin: 0 $list-wp-margin-right $list-wp-margin-bottom $list-wp-margin-left;
+
+  .item-inner {
+    border-bottom: 1px solid $list-wp-border-color;
+  }
+
+  > .item:first-child,
+  > ion-item-sliding:first-child .item {
+    border-top: 1px solid $list-wp-border-color;
+  }
+
+  > .item:last-child,
+  > ion-item-sliding:last-child .item {
+    border-bottom: 1px solid $list-wp-border-color;
+
+    .item-inner,
+    ion-label {
+      border-bottom: none;
+    }
+  }
+
+  > ion-input:last-child:after {
+    left: 0;
+  }
+
+  ion-item-options {
+    button, [button] {
+      height: calc(100% - 2px);
+      margin: 1px 0 1px 0;
+      box-shadow: none;
+
+      border: none;
+      border-radius: 0;
+      display: inline-flex;
+      align-items: center;
+      box-sizing: border-box;
+
+      &:before{
+        margin: 0 auto;
+      }
+    }
+  }
+
+  // If the item has the no-lines attribute remove the bottom border from:
+  // the item itself (for last-child items)
+  // the item-inner class (if it is not last)
+  .item[no-lines],
+  .item[no-lines] .item-inner {
+    border-width: 0;
+  }
+
+  + ion-list {
+    margin-top: $list-wp-margin-top + $list-wp-margin-bottom;
+
+    ion-list-header {
+      margin-top: -$list-wp-margin-top;
+      padding-top: 0;
+    }
+  }
+}
+
+
+/**************/
+/* INSET LIST */
+/**************/
+
+ion-list[inset] {
+  margin: $list-inset-wp-margin-top $list-inset-wp-margin-right $list-inset-wp-margin-bottom $list-inset-wp-margin-left;
+  border-radius: $list-inset-wp-border-radius;
+
+  .item:first-child {
+    border-top-width: 0;
+    border-top-right-radius: $list-inset-wp-border-radius;
+    border-top-left-radius: $list-inset-wp-border-radius;
+  }
+
+  .item:last-child {
+    border-bottom-width: 0;
+    border-bottom-right-radius: $list-inset-wp-border-radius;
+    border-bottom-left-radius: $list-inset-wp-border-radius;
+  }
+
+  .item-input {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  + ion-list[inset] {
+    margin-top: 0;
+  }
+
+  ion-list-header {
+    background-color: $list-wp-background-color;
+  }
+}
+
+
+/*****************/
+/* NO LINES LIST */
+/*****************/
+
+ion-list[no-lines] {
+  .item,
+  .item .item-inner {
+    border-width: 0;
+  }
+}

ionic/themes/dark.wp.scss

@@ -41,7 +41,7 @@ $card-wp-text-color:                  #ddd !default;
 // --------------------------------------------------
 
 $list-wp-text-color:                  $list-text-color !default;
-$list-wp-border-color:                #dedede !default;
+$list-wp-border-color:                transparent !default;
 $list-wp-background-color:            $list-background-color !default;
 $list-wp-activated-background-color:  #d9d9d9 !default;
 

ionic/themes/default.wp.scss

@@ -31,7 +31,7 @@ $toolbar-wp-button-color:             $toolbar-text-color !default;
 // --------------------------------------------------
 
 $list-wp-text-color:                  $list-text-color !default;
-$list-wp-border-color:                $list-border-color !default;
+$list-wp-border-color:                transparent !default;
 $list-wp-background-color:            $list-background-color !default;
 $list-wp-activated-background-color:  #AAAAAA !default;