diff --git a/ionic/components.wp.scss b/ionic/components.wp.scss index da082ec57af..5f5f5e7a426 100644 --- a/ionic/components.wp.scss +++ b/ionic/components.wp.scss @@ -24,5 +24,6 @@ "components/searchbar/searchbar.wp", "components/segment/segment.wp", "components/select/select.wp", + "components/tabs/tabs.wp", "components/toggle/toggle.wp", "components/toolbar/toolbar.wp"; diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss index d75625f8d96..2543d8626f4 100644 --- a/ionic/components/item/item.scss +++ b/ionic/components/item/item.scss @@ -52,7 +52,6 @@ ion-item-divider { min-height: 30px; width: 100%; z-index: 1000; - font-weight: 500; &[sticky] { position: -webkit-sticky; diff --git a/ionic/components/item/item.wp.scss b/ionic/components/item/item.wp.scss index 39f35954473..826fba26182 100644 --- a/ionic/components/item/item.wp.scss +++ b/ionic/components/item/item.wp.scss @@ -6,6 +6,8 @@ $item-wp-body-text-font-size: 1.4rem !default; $item-wp-body-text-line-height: 1.5 !default; +$item-wp-body-background-color: $list-wp-background-color !default; +$item-wp-body-text-color: $list-wp-text-color !default; $item-wp-paragraph-text-color: #666 !default; $item-wp-font-size: 1.6rem !default; @@ -28,8 +30,8 @@ $item-wp-sliding-content-bg: $list-wp-background-color !default; text-transform: none; font-weight: normal; - color: $list-wp-text-color; - background-color: $list-wp-background-color; + color: $item-wp-body-text-color; + background-color: $item-wp-body-background-color; box-shadow: none; transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms; @@ -110,7 +112,7 @@ ion-icon[item-right] { ion-icon[item-left] + .item-inner, ion-icon[item-left] + .item-input { - margin-left: $item-wp-padding-left + ($item-wp-padding-left / 2); + margin-left: ($item-wp-padding-left / 2); } ion-avatar[item-left], diff --git a/ionic/components/list/list.wp.scss b/ionic/components/list/list.wp.scss index 0706d1590e4..aacc81b9c1f 100644 --- a/ionic/components/list/list.wp.scss +++ b/ionic/components/list/list.wp.scss @@ -17,7 +17,7 @@ $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; +$list-wp-header-color: $list-wp-text-color !default; /****************/ diff --git a/ionic/components/tabs/tabs.wp.scss b/ionic/components/tabs/tabs.wp.scss new file mode 100644 index 00000000000..44e53620168 --- /dev/null +++ b/ionic/components/tabs/tabs.wp.scss @@ -0,0 +1,98 @@ +@import "../../globals.wp"; +@import "./tabs"; + +// Windows Tabs +// -------------------------------------------------- + +$tabbar-wp-background: $toolbar-wp-background !default; +$tabbar-wp-item-padding: 12px 10px 5px 10px !default; +$tabbar-wp-item-font-size: 1.4rem !default; +$tabbar-wp-item-font-weight: 500 !default; +$tabbar-wp-item-icon-size: 2.4rem !default; +$tabbar-wp-item-height: 4.8rem !default; + +$tab-button-wp-active-color: $toolbar-wp-active-color !default; +$tab-button-wp-inactive-color: $toolbar-wp-inactive-color !default; + + +tabbar { + background: $tabbar-wp-background; +} + + +.tab-button { + padding: $tabbar-wp-item-padding; + min-height: $tabbar-wp-item-height; + font-size: $tabbar-wp-item-font-size; + font-weight: $tabbar-wp-item-font-weight; + opacity: 0.7; + + box-shadow: none; + border-radius: 0; + border-bottom: 2px solid transparent; + color: $tab-button-wp-inactive-color; + + &[aria-selected=true] { + opacity: 1.0; + color: $tab-button-wp-active-color; + } +} + +.tab-button-text { + margin-top: 5px; + margin-bottom: 5px; + text-transform: uppercase; +} + +.tab-button-icon { + font-size: $tabbar-wp-item-icon-size; + min-width: $tabbar-wp-item-icon-size + 5; +} + +[tabbarIcons=bottom] .tab-button { + padding-top: 8px; + padding-bottom: 8px; +} + +[tabbarIcons=right] .tab-button, +[tabbarIcons=left] .tab-button { + padding-bottom: 10px; + + ion-icon { + min-width: 24px; + } +} + +.tab-button.icon-only, +.tab-button.has-title-only { + padding: 6px 10px 6px 10px; +} + + +// Windows Tabbar Color Mixin +// -------------------------------------------------- + +@mixin tabbar-wp($color-name, $color-value) { + + ion-tabs[#{$color-name}] tabbar { + background-color: $color-value; + + .tab-button { + color: color-inverse($color-value); + } + + .tab-button:hover:not(.disable-hover), + .tab-button[aria-selected=true] { + color: color-inverse($color-value); + } + } + +} + + +// Windows Tabbar Color Generation +// -------------------------------------------------- + +@each $color-name, $color-value in $colors-wp { + @include tabbar-wp($color-name, $color-value); +} diff --git a/ionic/config/modes.ts b/ionic/config/modes.ts index 99876964c1b..36ffcbbdce1 100644 --- a/ionic/config/modes.ts +++ b/ionic/config/modes.ts @@ -70,9 +70,9 @@ Config.setModeConfig('wp', { alertLeave: 'alert-md-pop-out', backButtonText: '', - backButtonIcon: 'md-arrow-back', + backButtonIcon: 'ios-arrow-back', - iconMode: 'md', + iconMode: 'ios', menuType: 'overlay', @@ -82,7 +82,6 @@ Config.setModeConfig('wp', { pageTransition: 'md-transition', pageTransitionDelay: 96, - tabbarHighlight: true, tabbarPlacement: 'top', tabSubPages: true,