diff --git a/packages/core/src/components/action-sheet/action-sheet.tsx b/packages/core/src/components/action-sheet/action-sheet.tsx index 73b068c638..7c900904bf 100644 --- a/packages/core/src/components/action-sheet/action-sheet.tsx +++ b/packages/core/src/components/action-sheet/action-sheet.tsx @@ -8,8 +8,7 @@ import iOSLeaveAnimation from './animations/ios.leave'; tag: 'ion-action-sheet', styleUrls: { ios: 'action-sheet.ios.scss', - md: 'action-sheet.md.scss', - wp: 'action-sheet.wp.scss' + md: 'action-sheet.md.scss' }, host: { theme: 'action-sheet' diff --git a/packages/core/src/components/action-sheet/action-sheet.wp.scss b/packages/core/src/components/action-sheet/action-sheet.wp.scss deleted file mode 100644 index 1af5773779..0000000000 --- a/packages/core/src/components/action-sheet/action-sheet.wp.scss +++ /dev/null @@ -1,166 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./action-sheet"; - -// Windows Action Sheet -// -------------------------------------------------- - -/// @prop - Text align of the action sheet -$action-sheet-wp-text-align: start !default; - -/// @prop - Background color of the action sheet -$action-sheet-wp-background: #fff !default; - -/// @prop - Padding top of the action sheet -$action-sheet-wp-padding-top: .8rem !default; - -/// @prop - Padding bottom of the action sheet -$action-sheet-wp-padding-bottom: .8rem !default; - -/// @prop - Box shadow color of the action sheet -$action-sheet-wp-box-shadow-color: rgba(0, 0, 0, .2) !default; - -/// @prop - Box shadow of the action sheet -$action-sheet-wp-box-shadow: 0 -1px 0 $action-sheet-wp-box-shadow-color !default; - -/// @prop - Padding top of the action sheet title -$action-sheet-wp-title-padding-top: 11px !default; - -/// @prop - Padding end of the action sheet title -$action-sheet-wp-title-padding-end: 16px !default; - -/// @prop - Padding bottom of the action sheet title -$action-sheet-wp-title-padding-bottom: 17px !default; - -/// @prop - Padding start of the action sheet title -$action-sheet-wp-title-padding-start: $action-sheet-wp-title-padding-end !default; - -/// @prop - Font size of the action sheet title -$action-sheet-wp-title-font-size: 2rem !default; - -/// @prop - Color of the action sheet title -$action-sheet-wp-title-color: #4d4d4d !default; - -/// @prop - Text align of the action sheet title -$action-sheet-wp-title-text-align: $action-sheet-wp-text-align !default; - -/// @prop - Height of the action sheet button -$action-sheet-wp-button-height: 4.8rem !default; - -/// @prop - Text color of the action sheet button -$action-sheet-wp-button-text-color: #4d4d4d !default; - -/// @prop - Font size of the action sheet button -$action-sheet-wp-button-font-size: 1.5rem !default; - -/// @prop - Padding top of the action sheet button -$action-sheet-wp-button-padding-top: 0 !default; - -/// @prop - Padding end of the action sheet button -$action-sheet-wp-button-padding-end: 16px !default; - -/// @prop - Padding bottom of the action sheet button -$action-sheet-wp-button-padding-bottom: $action-sheet-wp-button-padding-top !default; - -/// @prop - Padding start of the action sheet button -$action-sheet-wp-button-padding-start: $action-sheet-wp-button-padding-end !default; - -/// @prop - Text align of the action sheet button -$action-sheet-wp-button-text-align: $action-sheet-wp-text-align !default; - -/// @prop - Background color of the action sheet button -$action-sheet-wp-button-background: transparent !default; - -/// @prop - Background color of the action sheet activated button -$action-sheet-wp-button-background-activated: $list-wp-activated-background-color !default; - -/// @prop - Font size of the icon in the action sheet button -$action-sheet-wp-icon-font-size: 2.4rem !default; - -/// @prop - Width of the icon in the action sheet button -$action-sheet-wp-icon-width: 2.3rem !default; - -/// @prop - Text align of the icon in the action sheet button -$action-sheet-wp-icon-text-align: center !default; - -/// @prop - Vertical align of the icon in the action sheet button -$action-sheet-wp-icon-vertical-align: middle !default; - -/// @prop - Margin top of the icon in the action sheet button -$action-sheet-wp-icon-margin-top: 0 !default; - -/// @prop - Margin end of the icon in the action sheet button -$action-sheet-wp-icon-margin-end: 20px !default; - -/// @prop - Margin bottom of the icon in the action sheet button -$action-sheet-wp-icon-margin-bottom: 0 !default; - -/// @prop - Margin start of the icon in the action sheet button -$action-sheet-wp-icon-margin-start: 0 !default; - - -.action-sheet-wp .action-sheet-wrapper { - box-shadow: $action-sheet-wp-box-shadow; -} - -.action-sheet-wp .action-sheet-title { - @include padding($action-sheet-wp-title-padding-top, $action-sheet-wp-title-padding-end, $action-sheet-wp-title-padding-bottom, $action-sheet-wp-title-padding-start); - - @include text-align($action-sheet-wp-title-text-align); - - font-size: $action-sheet-wp-title-font-size; - color: $action-sheet-wp-title-color; -} - -.action-sheet-wp .action-sheet-button { - @include padding($action-sheet-wp-button-padding-top, $action-sheet-wp-button-padding-end, $action-sheet-wp-button-padding-bottom, $action-sheet-wp-button-padding-start); - - @include text-align($action-sheet-wp-button-text-align); - - min-height: $action-sheet-wp-button-height; - - font-size: $action-sheet-wp-button-font-size; - color: $action-sheet-wp-button-text-color; - background: $action-sheet-wp-button-background; -} - -.action-sheet-wp .action-sheet-button.activated { - background: $action-sheet-wp-button-background-activated; -} - -.action-sheet-wp .action-sheet-icon { - @include margin($action-sheet-wp-icon-margin-top, $action-sheet-wp-icon-margin-end, $action-sheet-wp-icon-margin-bottom, $action-sheet-wp-icon-margin-start); - - @include padding(0); - - @include text-align($action-sheet-wp-icon-text-align); - - width: $action-sheet-wp-icon-width; - - font-size: $action-sheet-wp-icon-font-size; - vertical-align: $action-sheet-wp-icon-vertical-align; -} - -.action-sheet-wp .action-sheet-group { - background: $action-sheet-wp-background; -} - -.action-sheet-wp .action-sheet-group:first-child { - @include padding($action-sheet-wp-padding-top, null, null, null); -} - -.action-sheet-wp .action-sheet-group:last-child { - @include padding(null, null, $action-sheet-wp-padding-bottom, null); -} - -.action-sheet-wp .action-sheet-group .button-inner { - justify-content: flex-start; -} - -.action-sheet-wp .action-sheet-selected { - font-weight: bold; -} - -.action-sheet-wp .action-sheet-cancel { - background: $action-sheet-wp-button-background; -} - diff --git a/packages/core/src/components/alert/alert.tsx b/packages/core/src/components/alert/alert.tsx index ba5ed8c1f5..aea6c8f709 100644 --- a/packages/core/src/components/alert/alert.tsx +++ b/packages/core/src/components/alert/alert.tsx @@ -9,8 +9,7 @@ import iOSLeaveAnimation from './animations/ios.leave'; tag: 'ion-alert', styleUrls: { ios: 'alert.ios.scss', - md: 'alert.md.scss', - wp: 'alert.wp.scss' + md: 'alert.md.scss' }, host: { theme: 'alert' diff --git a/packages/core/src/components/alert/alert.wp.scss b/packages/core/src/components/alert/alert.wp.scss deleted file mode 100644 index 98b98b367a..0000000000 --- a/packages/core/src/components/alert/alert.wp.scss +++ /dev/null @@ -1,593 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./alert"; - -// Windows Alerts -// -------------------------------------------------- - -/// @prop - Background of the alert backdrop -$alert-wp-backdrop-background: #fff !default; - -/// @prop - Width of the alert -$alert-wp-width: 100% !default; - -/// @prop - Max width of the alert -$alert-wp-max-width: 520px !default; - -/// @prop - Border width of the alert -$alert-wp-border-width: 1px !default; - -/// @prop - Border style of the alert -$alert-wp-border-style: solid !default; - -/// @prop - Border color of the alert -$alert-wp-border-color: color($colors-wp, primary) !default; - -/// @prop - Border radius of the alert -$alert-wp-border-radius: 0 !default; - -/// @prop - Background color of the alert -$alert-wp-background: #e6e6e6 !default; - -/// @prop - Padding top of the alert head -$alert-wp-head-padding-top: 20px !default; - -/// @prop - Padding end of the alert head -$alert-wp-head-padding-end: 22px !default; - -/// @prop - Padding bottom of the alert head -$alert-wp-head-padding-bottom: 5px !default; - -/// @prop - Padding start of the alert head -$alert-wp-head-padding-start: 22px !default; - -/// @prop - Text align of the alert head -$alert-wp-head-text-align: start !default; - -/// @prop - Font size of the alert title -$alert-wp-title-font-size: 20px !default; - -/// @prop - Font weight of the alert title -$alert-wp-title-font-weight: 400 !default; - -/// @prop - Font size of the alert sub title -$alert-wp-sub-title-font-size: 16px !default; - -/// @prop - Padding top of the alert message -$alert-wp-message-padding-top: 0 !default; - -/// @prop - Padding end of the alert message -$alert-wp-message-padding-end: 22px !default; - -/// @prop - Padding bottom of the alert message -$alert-wp-message-padding-bottom: 8px !default; - -/// @prop - Padding start of the alert message -$alert-wp-message-padding-start: 22px !default; - -/// @prop - Padding top of the alert empty message -$alert-wp-message-empty-padding-top: 0 !default; - -/// @prop - Padding end of the alert empty message -$alert-wp-message-empty-padding-end: $alert-wp-message-empty-padding-top !default; - -/// @prop - Padding bottom of the alert empty message -$alert-wp-message-empty-padding-bottom: $alert-wp-message-empty-padding-top !default; - -/// @prop - Padding start of the alert empty message -$alert-wp-message-empty-padding-start: $alert-wp-message-empty-padding-end !default; - -/// @prop - Text color of the alert message -$alert-wp-message-text-color: #000 !default; - -/// @prop - Font size of the alert message -$alert-wp-message-font-size: 13px !default; - -/// @prop - Maximum height of the alert content -$alert-wp-content-max-height: 240px !default; - -/// @prop - Margin top of the alert input -$alert-wp-input-margin-top: 5px !default; - -/// @prop - Margin end of the alert input -$alert-wp-input-margin-end: 0 !default; - -/// @prop - Margin bottom of the alert input -$alert-wp-input-margin-bottom: 5px !default; - -/// @prop - Margin start of the alert input -$alert-wp-input-margin-start: 0 !default; - -/// @prop - Padding top on the alert input -$alert-wp-input-padding-top: 0 !default; - -/// @prop - Padding end on the alert input -$alert-wp-input-padding-end: 8px !default; - -/// @prop - Padding bottom on the alert input -$alert-wp-input-padding-bottom: $alert-wp-input-padding-top !default; - -/// @prop - Padding start on the alert input -$alert-wp-input-padding-start: $alert-wp-input-padding-end !default; - -/// @prop - Border width of the alert input -$alert-wp-input-border-width: 2px !default; - -/// @prop - Border style of the alert input -$alert-wp-input-border-style: $alert-wp-border-style !default; - -/// @prop - Border color of the alert input -$alert-wp-input-border-color: $input-wp-border-color !default; - -/// @prop - Border color of the alert input when focused -$alert-wp-input-border-color-focused: color($colors-wp, primary) !default; - -/// @prop - Line height of the alert input -$alert-wp-input-line-height: 3rem !default; - -/// @prop - Color of the text in the alert input -$alert-wp-input-text-color: #000 !default; - -/// @prop - Padding top of the alert button -$alert-wp-button-padding-top: 5px !default; - -/// @prop - Padding end of the alert button -$alert-wp-button-padding-end: $alert-wp-button-padding-top !default; - -/// @prop - Padding bottom of the alert button -$alert-wp-button-padding-bottom: $alert-wp-button-padding-top !default; - -/// @prop - Padding start of the alert button -$alert-wp-button-padding-start: $alert-wp-button-padding-end !default; - -/// @prop - Width of the alert button -$alert-wp-button-width: 49.5% !default; - -/// @prop - Border radius of the alert button -$alert-wp-button-border-radius: 0 !default; - -/// @prop - Font weight of the alert button -$alert-wp-button-font-weight: 400 !default; - -/// @prop - Color of the text in the alert button -$alert-wp-button-text-color: #000 !default; - -/// @prop - Background color of the alert button -$alert-wp-button-background: #b8b8b8 !default; - -/// @prop - Background color of the activated alert button -$alert-wp-button-background-activated: color-shade($alert-wp-button-background) !default; - -/// @prop - Margin end of the alert button -$alert-wp-button-margin-end: 1% !default; - -$alert-wp-button-group-padding: null !default; - -/// @prop - Padding top of the alert button group -$alert-wp-button-group-padding-top: 20px !default; - -/// @prop - Padding end of the alert button group -$alert-wp-button-group-padding-end: 22px !default; - -/// @prop - Padding bottom of the alert button group -$alert-wp-button-group-padding-bottom: 20px !default; - -/// @prop - Padding start of the alert button group -$alert-wp-button-group-padding-start: 22px !default; - - -/// @prop - Justify content of the alert button group -$alert-wp-button-group-justify-content: flex-end !default; - -/// @prop - Flex wrap of the alert button group -$alert-wp-button-group-flex-wrap: wrap-reverse !default; - -/// @prop - Vertical width of the vertical alert button group -$alert-wp-button-group-vertical-width: 100% !default; - -/// @prop - Margin top of the vertical alert button group -$alert-wp-button-group-vertical-margin-top: 5px !default; - - -/// @prop - Background color of the radio alert -$alert-wp-radio-background: color($colors-wp, primary) !default; - -/// @prop - Border color of the radio alert -$alert-wp-radio-border-color: $input-wp-border-color !default; - -/// @prop - Padding top of the label for the radio alert -$alert-wp-radio-label-padding-top: 13px !default; - -/// @prop - Padding end of the label for the radio alert -$alert-wp-radio-label-padding-end: 26px !default; - -/// @prop - Padding bottom of the label for the radio alert -$alert-wp-radio-label-padding-bottom: $alert-wp-radio-label-padding-top !default; - -/// @prop - Padding start of the label for the radio alert -$alert-wp-radio-label-padding-start: $alert-wp-radio-label-padding-end !default; - - -/// @prop - Text color of the label for the radio alert -$alert-wp-radio-label-text-color: initial !default; - -/// @prop - Text color of the label for the checked radio alert -$alert-wp-radio-label-text-color-checked: $alert-wp-button-text-color !default; - -/// @prop - Top of the radio alert -$alert-wp-radio-top: 0 !default; - -/// @prop - Left of the radio alert -$alert-wp-radio-left: 13px !default; - -/// @prop - Width of the radio alert -$alert-wp-radio-width: 16px !default; - -/// @prop - Height of the radio alert -$alert-wp-radio-height: 16px !default; - -/// @prop - Border width of the radio alert -$alert-wp-radio-border-width: 2px !default; - -/// @prop - Border style of the radio alert -$alert-wp-radio-border-style: solid !default; - -/// @prop - Border radius of the radio alert -$alert-wp-radio-border-radius: 50% !default; - -/// @prop - Border color of the radio alert -$alert-wp-radio-border-color: $input-wp-border-color !default; - -/// @prop - Top of the icon in the radio alert -$alert-wp-radio-icon-top: 2px !default; - -/// @prop - Start of the icon in the radio alert -$alert-wp-radio-icon-start: 2px !default; - -/// @prop - Width of the icon in the radio alert -$alert-wp-radio-icon-width: 8px !default; - -/// @prop - Height of the icon in the radio alert -$alert-wp-radio-icon-height: 8px !default; - -/// @prop - Border radius of the icon in the radio alert -$alert-wp-radio-icon-border-radius: $alert-wp-radio-border-radius !default; - -/// @prop - Padding top of the label for the checkbox in the alert -$alert-wp-checkbox-label-padding-top: 13px !default; - -/// @prop - Padding end of the label for the checkbox in the alert -$alert-wp-checkbox-label-padding-end: 26px !default; - -/// @prop - Padding bottom of the label for the checkbox in the alert -$alert-wp-checkbox-label-padding-bottom: $alert-wp-checkbox-label-padding-top !default; - -/// @prop - Padding start of the label for the checkbox in the alert -$alert-wp-checkbox-label-padding-start: $alert-wp-checkbox-label-padding-end !default; - -/// @prop - Text color of the label for the checkbox in the alert -$alert-wp-checkbox-label-text-color: initial !default; - -/// @prop - Text color of the label for the checked checkbox in the alert -$alert-wp-checkbox-label-text-color-checked: initial !default; - -/// @prop - Top of the checkbox in the alert -$alert-wp-checkbox-top: 0 !default; - -/// @prop - Left of the checkbox in the alert -$alert-wp-checkbox-left: 13px !default; - -/// @prop - Width of the checkbox in the alert -$alert-wp-checkbox-width: 16px !default; - -/// @prop - Height of the checkbox in the alert -$alert-wp-checkbox-height: 16px !default; - -/// @prop - Border width of the checkbox in the alert -$alert-wp-checkbox-border-width: 2px !default; - -/// @prop - Border style of the checkbox in the alert -$alert-wp-checkbox-border-style: solid !default; - -/// @prop - Border radius of the checkbox in the alert -$alert-wp-checkbox-border-radius: 0 !default; - -/// @prop - Border color of the checkbox in the alert -$alert-wp-checkbox-border-color: $input-wp-border-color !default; - -/// @prop - Background color of the checkbox in the alert when off -$alert-wp-checkbox-background-off: transparent !default; - -/// @prop - Background color of the checkbox in the alert when on -$alert-wp-checkbox-background-on: color($colors-wp, primary) !default; - -/// @prop - Top of the icon in the checkbox alert -$alert-wp-checkbox-icon-top: -2px !default; - -/// @prop - Start of the icon in the checkbox alert -$alert-wp-checkbox-icon-start: 3px !default; - -/// @prop - Width of the icon in the checkbox alert -$alert-wp-checkbox-icon-width: 6px !default; - -/// @prop - Height of the icon in the checkbox alert -$alert-wp-checkbox-icon-height: 12px !default; - -/// @prop - Border width of the icon in the checkbox alert -$alert-wp-checkbox-icon-border-width: 1px !default; - -/// @prop - Border style of the icon in the checkbox alert -$alert-wp-checkbox-icon-border-style: solid !default; - -/// @prop - Border color of the icon in the checkbox alert -$alert-wp-checkbox-icon-border-color: color-contrast($colors-wp, $alert-wp-checkbox-background-on) !default; - -/// @prop - Transform of the icon in the checkbox alert -$alert-wp-checkbox-icon-transform: rotate(45deg) !default; - - -.alert-wp ion-backdrop { - background: $alert-wp-backdrop-background; -} - -.alert-wp .alert-wrapper { - @include border-radius($alert-wp-border-radius); - - width: $alert-wp-width; - max-width: $alert-wp-max-width; - - border: $alert-wp-border-width $alert-wp-border-style $alert-wp-border-color; - background: $alert-wp-background; -} - -// Windows Alert Header -// -------------------------------------------------- - -.alert-wp .alert-head { - @include text-align($alert-wp-head-text-align); - - @include padding($alert-wp-head-padding-top, $alert-wp-head-padding-end, $alert-wp-head-padding-bottom, $alert-wp-head-padding-start); -} - -.alert-wp .alert-title { - font-size: $alert-wp-title-font-size; - font-weight: $alert-wp-title-font-weight; -} - -.alert-wp .alert-sub-title { - font-size: $alert-wp-sub-title-font-size; -} - - -// Windows Alert Message -// -------------------------------------------------- - -.alert-wp .alert-message, -.alert-wp .alert-input-group { - @include padding($alert-wp-message-padding-top, $alert-wp-message-padding-end, $alert-wp-message-padding-bottom, $alert-wp-message-padding-start); - - color: $alert-wp-message-text-color; -} - -.alert-wp .alert-message { - max-height: $alert-wp-content-max-height; - - font-size: $alert-wp-message-font-size; -} - -.alert-wp .alert-message:empty { - @include padding($alert-wp-message-empty-padding-top, $alert-wp-message-empty-padding-end, $alert-wp-message-empty-padding-bottom, $alert-wp-message-empty-padding-start); -} - - -// Windows Alert Input -// -------------------------------------------------- - -.alert-wp .alert-input { - @include margin($alert-wp-input-margin-top, $alert-wp-input-margin-end, $alert-wp-input-margin-bottom, $alert-wp-input-margin-start); - - @include padding($alert-wp-input-padding-top, $alert-wp-input-padding-end, $alert-wp-input-padding-bottom, $alert-wp-input-padding-start); - - border: $alert-wp-input-border-width $alert-wp-input-border-style $alert-wp-input-border-color; - line-height: $alert-wp-input-line-height; - color: $alert-wp-input-text-color; -} - -.alert-wp .alert-input:focus { - border-color: $alert-wp-input-border-color-focused; -} - - -// Windows Alert Radio/Checkbox Group -// -------------------------------------------------- - -.alert-wp .alert-radio-group, -.alert-wp .alert-checkbox-group { - position: relative; - overflow: auto; - - max-height: $alert-wp-content-max-height; -} - -.alert-wp .alert-tappable { - position: relative; - display: flex; - - overflow: hidden; - - // TODO this should be a variable that matches item - min-height: 4.4rem; -} - - -// Windows Alert Radio Label -// -------------------------------------------------- - -.alert-wp .alert-radio-label { - @include padding($alert-wp-radio-label-padding-top, $alert-wp-radio-label-padding-end, $alert-wp-radio-label-padding-bottom, $alert-wp-radio-label-padding-start); - - overflow: hidden; - - flex: 1; - - text-overflow: ellipsis; - white-space: nowrap; - - color: $alert-wp-radio-label-text-color; -} - -// Windows Alert Radio Unchecked Circle -// --------------------------------------------------- - -.alert-wp .alert-radio-icon { - @include position($alert-wp-radio-top, null, null, $alert-wp-radio-left); - @include margin(0); - @include border-radius($alert-wp-radio-border-radius); - - position: relative; - display: block; - - width: $alert-wp-radio-width; - height: $alert-wp-radio-height; - - border-width: $alert-wp-radio-border-width; - border-style: $alert-wp-radio-border-style; - border-color: $alert-wp-radio-border-color; -} - -// Windows Alert Radio Checked Dot -// --------------------------------------------------- - -.alert-wp .alert-radio-inner { - @include position($alert-wp-radio-icon-top, null, null, $alert-wp-radio-icon-start); - @include border-radius($alert-wp-radio-icon-border-radius); - - position: absolute; - display: none; - - width: $alert-wp-radio-icon-width; - height: $alert-wp-radio-icon-height; - - background: $alert-wp-radio-background; -} - -// Windows Alert Radio Checked -// --------------------------------------------------- - -.alert-wp [aria-checked=true] .alert-radio-label { - color: $alert-wp-radio-label-text-color-checked; -} - -.alert-wp [aria-checked=true] .alert-radio-icon { - border-color: $alert-wp-radio-border-color; -} - -.alert-wp [aria-checked=true] .alert-radio-inner { - display: block; -} - - -// Windows Alert Checkbox Label -// -------------------------------------------------- - -.alert-wp .alert-checkbox-label { - @include padding($alert-wp-checkbox-label-padding-top, $alert-wp-checkbox-label-padding-end, $alert-wp-checkbox-label-padding-bottom, $alert-wp-checkbox-label-padding-start); - - overflow: hidden; - - flex: 1; - - text-overflow: ellipsis; - white-space: nowrap; - - color: $alert-wp-checkbox-label-text-color; -} - -.alert-wp [aria-checked=true] .alert-checkbox-label { - color: $alert-wp-checkbox-label-text-color-checked; -} - -// Windows Alert Checkbox Outline: Unchecked -// -------------------------------------------------- - -.alert-wp .alert-checkbox-icon { - @include position($alert-wp-checkbox-top, null, null, $alert-wp-checkbox-left); - @include border-radius($alert-wp-checkbox-border-radius); - - position: relative; - - width: $alert-wp-checkbox-width; - height: $alert-wp-checkbox-height; - - border-width: $alert-wp-checkbox-border-width; - border-style: $alert-wp-checkbox-border-style; - border-color: $alert-wp-checkbox-border-color; - background: $alert-wp-checkbox-background-off; -} - -// Windows Alert Checkbox Outline: Checked -// -------------------------------------------------- - -.alert-wp [aria-checked=true] .alert-checkbox-icon { - border-color: $alert-wp-checkbox-background-on; - background: $alert-wp-checkbox-background-on; -} - -// Windows Alert Checkbox Checkmark: Checked -// -------------------------------------------------- - -.alert-wp [aria-checked=true] .alert-checkbox-inner { - @include position($alert-wp-checkbox-icon-top, null, null, $alert-wp-checkbox-icon-start); - - position: absolute; - - width: $alert-wp-checkbox-icon-width; - height: $alert-wp-checkbox-icon-height; - - border-width: $alert-wp-checkbox-icon-border-width; - border-top-width: 0; - border-left-width: 0; - border-style: $alert-wp-checkbox-icon-border-style; - border-color: $alert-wp-checkbox-icon-border-color; - transform: $alert-wp-checkbox-icon-transform; -} - - -// Windows Alert Button -// -------------------------------------------------- - -.alert-wp .alert-button-group { - @include padding($alert-wp-button-group-padding-top, $alert-wp-button-group-padding-end, $alert-wp-button-group-padding-bottom, $alert-wp-button-group-padding-start); - - flex-wrap: $alert-wp-button-group-flex-wrap; - justify-content: $alert-wp-button-group-justify-content; -} - -.alert-wp .alert-button-group-vertical .alert-button { - @include margin($alert-wp-button-group-vertical-margin-top, null, null, null); - - width: $alert-wp-button-group-vertical-width; -} - -.alert-wp .alert-button-group-vertical .alert-button:first-child:not(:only-child) { - @include margin(0, 0, null, null); -} - -.alert-wp .alert-button { - @include border-radius($alert-wp-button-border-radius); - - @include padding($alert-wp-button-padding-top, $alert-wp-button-padding-end, $alert-wp-button-padding-bottom, $alert-wp-button-padding-start); - - width: $alert-wp-button-width; - - font-weight: $alert-wp-button-font-weight; - color: $alert-wp-button-text-color; - background: $alert-wp-button-background; -} - -.alert-wp .alert-button:first-child:not(:only-child) { - @include margin-horizontal(null, $alert-wp-button-margin-end); -} - -.alert-wp .alert-button.activated { - background: $alert-wp-button-background-activated; -} diff --git a/packages/core/src/components/app/app.tsx b/packages/core/src/components/app/app.tsx index 5c8f4e0d2a..4786801c27 100644 --- a/packages/core/src/components/app/app.tsx +++ b/packages/core/src/components/app/app.tsx @@ -10,8 +10,7 @@ const rootNavs = new Map(); tag: 'ion-app', styleUrls: { ios: 'app.ios.scss', - md: 'app.md.scss', - wp: 'app.wp.scss' + md: 'app.md.scss' }, host: { theme: 'app' diff --git a/packages/core/src/components/app/app.wp.scss b/packages/core/src/components/app/app.wp.scss deleted file mode 100644 index 2215eededf..0000000000 --- a/packages/core/src/components/app/app.wp.scss +++ /dev/null @@ -1,12 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./app"; - - -// Windows App -// -------------------------------------------------- - -.app-wp { - font-family: $font-family-wp-base; - font-size: $font-size-wp-base; - background-color: $background-wp-color; -} diff --git a/packages/core/src/components/avatar/avatar.tsx b/packages/core/src/components/avatar/avatar.tsx index 12351ae777..dbecc8abbe 100644 --- a/packages/core/src/components/avatar/avatar.tsx +++ b/packages/core/src/components/avatar/avatar.tsx @@ -13,8 +13,7 @@ import { Component } from '@stencil/core'; tag: 'ion-avatar', styleUrls: { ios: 'avatar.ios.scss', - md: 'avatar.md.scss', - wp: 'avatar.wp.scss' + md: 'avatar.md.scss' }, host: { theme: 'avatar' diff --git a/packages/core/src/components/avatar/avatar.wp.scss b/packages/core/src/components/avatar/avatar.wp.scss deleted file mode 100644 index 73cb8e1155..0000000000 --- a/packages/core/src/components/avatar/avatar.wp.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./avatar"; - - -// Windows Avatar -// -------------------------------------------------- diff --git a/packages/core/src/components/badge/badge.tsx b/packages/core/src/components/badge/badge.tsx index eeae61d964..417f222f09 100644 --- a/packages/core/src/components/badge/badge.tsx +++ b/packages/core/src/components/badge/badge.tsx @@ -31,8 +31,7 @@ import { Component, Prop } from '@stencil/core'; tag: 'ion-badge', styleUrls: { ios: 'badge.ios.scss', - md: 'badge.md.scss', - wp: 'badge.wp.scss' + md: 'badge.md.scss' }, host: { theme: 'badge' @@ -49,10 +48,10 @@ export class Badge { /** * @input {string} The mode determines which platform styles to use. - * Possible values are: `"ios"`, `"md"`, or `"wp"`. + * Possible values are: `"ios"` or `"md"`. * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ - @Prop() mode: 'ios' | 'md' | 'wp'; + @Prop() mode: 'ios' | 'md'; protected render() { return ; diff --git a/packages/core/src/components/badge/badge.wp.scss b/packages/core/src/components/badge/badge.wp.scss deleted file mode 100644 index 77e77c7823..0000000000 --- a/packages/core/src/components/badge/badge.wp.scss +++ /dev/null @@ -1,37 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./badge"; - - -// Windows Badge -// -------------------------------------------------- - -/// @prop - Border radius of the badge -$badge-wp-border-radius: 0 !default; - -/// @prop - Background color of the badge -$badge-wp-background-color: color($colors-wp, primary) !default; - -/// @prop - Text color of the badge -$badge-wp-text-color: color-contrast($colors-wp, $badge-wp-background-color) !default; - - -.badge-wp { - @include border-radius($badge-wp-border-radius); - - color: $badge-wp-text-color; - background-color: $badge-wp-background-color; -} - - -// Generate Windows Badge Colors -// -------------------------------------------------- - -@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - - .badge-wp-#{$color-name} { - color: $color-contrast; - background-color: $color-base; - } - -} - diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx index 58c5771af6..39a2c1c4a3 100644 --- a/packages/core/src/components/button/button.tsx +++ b/packages/core/src/components/button/button.tsx @@ -66,8 +66,7 @@ import { getElementClassObject } from '../../utils/theme'; tag: 'ion-button', styleUrls: { ios: 'button.ios.scss', - md: 'button.md.scss', - wp: 'button.wp.scss' + md: 'button.md.scss' } }) export class Button { @@ -162,10 +161,10 @@ export class Button { /** * @input {string} The mode determines which platform styles to use. - * Possible values are: `"ios"`, `"md"`, or `"wp"`. + * Possible values are: `"ios"` or `"md"`. * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ - @Prop() mode: 'ios' | 'md' | 'wp'; + @Prop() mode: 'ios' | 'md'; protected render() { const buttonType = this.buttonType; diff --git a/packages/core/src/components/button/button.wp.scss b/packages/core/src/components/button/button.wp.scss deleted file mode 100644 index 81a434c8ee..0000000000 --- a/packages/core/src/components/button/button.wp.scss +++ /dev/null @@ -1,380 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./button"; -@import "../icon/icon.wp"; - - -// Windows Button -// -------------------------------------------------- - -/// @prop - Margin top of the button -$button-wp-margin-top: .4rem !default; - -/// @prop - Margin end of the button -$button-wp-margin-end: .2rem !default; - -/// @prop - Margin bottom of the button -$button-wp-margin-bottom: .4rem !default; - -/// @prop - Margin start of the button -$button-wp-margin-start: .2rem !default; - -/// @prop - Padding top of the button -$button-wp-padding-top: 0 !default; - -/// @prop - Padding end of the button -$button-wp-padding-end: 1.1em !default; - -/// @prop - Padding bottom of the button -$button-wp-padding-bottom: $button-wp-padding-top !default; - -/// @prop - Padding start of the button -$button-wp-padding-start: $button-wp-padding-end !default; - -/// @prop - Height of the button -$button-wp-height: 3.6rem !default; - -/// @prop - Border width of the button -$button-wp-border-width: 3px !default; - -/// @prop - Border style of the button -$button-wp-border-style: solid !default; - -/// @prop - Border color of the button -$button-wp-border-color: transparent !default; - -/// @prop - Border radius of the button -$button-wp-border-radius: 0 !default; - -/// @prop - Font size of the button text -$button-wp-font-size: 1.4rem !default; - -/// @prop - Background color of the button -$button-wp-background-color: color($colors-wp, primary) !default; - -/// @prop - Text color of the button -$button-wp-text-color: color-contrast($colors-wp, $button-wp-background-color) !default; - -/// @prop - Background color of the activated button -$button-wp-background-color-activated: color-shade($button-wp-background-color) !default; - - -// Windows Large Button -// -------------------------------------------------- - -/// @prop - Padding top of the large button -$button-wp-large-padding-top: 0 !default; - -/// @prop - Padding end of the large button -$button-wp-large-padding-end: 1em !default; - -/// @prop - Padding bottom of the large button -$button-wp-large-padding-bottom: $button-wp-large-padding-top !default; - -/// @prop - Padding start of the large button -$button-wp-large-padding-start: $button-wp-large-padding-end !default; - -/// @prop - Height of the large button -$button-wp-large-height: 2.8em !default; - -/// @prop - Font size of the large button -$button-wp-large-font-size: 2rem !default; - - -// Windows Small Button -// -------------------------------------------------- - -/// @prop - Padding top of the small button -$button-wp-small-padding-top: 0 !default; - -/// @prop - Padding end of the small button -$button-wp-small-padding-end: .9em !default; - -/// @prop - Padding bottom of the small button -$button-wp-small-padding-bottom: $button-wp-small-padding-top !default; - -/// @prop - Padding start of the small button -$button-wp-small-padding-start: $button-wp-small-padding-end !default; - -/// @prop - Height of the small button -$button-wp-small-height: 2.1em !default; - -/// @prop - Font size of the small button -$button-wp-small-font-size: 1.3rem !default; - -/// @prop - Font size of an icon in the small button -$button-wp-small-icon-font-size: 1.4em !default; - - -// Windows Outline Button -// -------------------------------------------------- - -/// @prop - Border width of the outline button -$button-wp-outline-border-width: 1px !default; - -/// @prop - Border style of the outline button -$button-wp-outline-border-style: solid !default; - -/// @prop - Border color of the outline button -$button-wp-outline-border-color: $button-wp-background-color !default; - -/// @prop - Text color of the outline button -$button-wp-outline-text-color: $button-wp-background-color !default; - -/// @prop - Background color of the outline button -$button-wp-outline-background-color: transparent !default; - -/// @prop - Background color of the activated outline button -$button-wp-outline-background-color-activated: $button-wp-background-color !default; - -/// @prop - Opacity of the background color of the activated outline button -$button-wp-outline-background-color-opacity-activated: .16 !default; - - -// Windows Clear Button -// -------------------------------------------------- - -/// @prop - Text color of the clear button -$button-wp-clear-text-color: $button-wp-background-color !default; - -/// @prop - Background color of the clear button -$button-wp-clear-background-color: transparent !default; - -/// @prop - Background color of the activated clear button -$button-wp-clear-background-color-activated: rgba(158, 158, 158, .2) !default; - -/// @prop - Background color of the clear button on hover -$button-wp-clear-background-color-hover: rgba(158, 158, 158, .1) !default; - - -// Windows Round Button -// -------------------------------------------------- - -/// @prop - Padding top of the round button -$button-wp-round-padding-top: $button-round-padding-top !default; - -/// @prop - Padding end of the round button -$button-wp-round-padding-end: $button-round-padding-end !default; - -/// @prop - Padding bottom of the round button -$button-wp-round-padding-bottom: $button-round-padding-bottom !default; - -/// @prop - Padding start of the round button -$button-wp-round-padding-start: $button-round-padding-start !default; - -/// @prop - Border radius of the round button -$button-wp-round-border-radius: $button-round-border-radius !default; - - -// Material Design Decorator Button -// -------------------------------------------------- - -/// @prop - Font weight of the strong button -$button-wp-strong-font-weight: bold !default; - - -// Windows Default Button -// -------------------------------------------------- - -.button-wp { - @include border-radius($button-wp-border-radius); - - @include margin($button-wp-margin-top, $button-wp-margin-end, $button-wp-margin-bottom, $button-wp-margin-start); - - @include padding($button-wp-padding-top, $button-wp-padding-end, $button-wp-padding-bottom, $button-wp-padding-start); - - height: $button-wp-height; - - border: $button-wp-border-width $button-wp-border-style $button-wp-border-color; - - font-size: $button-wp-font-size; - - color: $button-wp-text-color; - background-color: $button-wp-background-color; -} - -.button-wp:hover:not(.disable-hover) { - border-color: $button-wp-background-color-activated; - background-color: $button-wp-background-color; -} - -.button-wp.activated { - background-color: $button-wp-background-color-activated; -} - - -// Windows Default Button Color Mixin -// -------------------------------------------------- - -@mixin wp-button-default($color-name, $color-base, $color-contrast) { - $bg-color: $color-base; - $bg-color-activated: color-shade($bg-color); - $fg-color: $color-contrast; - - .button-wp-#{$color-name} { - color: $fg-color; - background-color: $bg-color; - } - - .button-wp-#{$color-name}:hover:not(.disable-hover) { - border-color: $bg-color-activated; - background-color: $bg-color; - } - - .button-wp-#{$color-name}.activated { - background-color: $bg-color-activated; - } -} - - -// Windows Button Sizes -// -------------------------------------------------- - -.button-large-wp { - @include padding($button-wp-large-padding-top, $button-wp-large-padding-end, $button-wp-large-padding-bottom, $button-wp-large-padding-start); - - height: $button-wp-large-height; - - font-size: $button-wp-large-font-size; -} - -.button-small-wp { - @include padding($button-wp-small-padding-top, $button-wp-small-padding-end, $button-wp-small-padding-bottom, $button-wp-small-padding-start); - - height: $button-wp-small-height; - - font-size: $button-wp-small-font-size; -} - -.button-small-wp ion-icon[slot="icon-only"] { - font-size: $button-wp-small-icon-font-size; -} - -// Windows Block Button -// -------------------------------------------------- - -.button-block-wp { - @include margin-horizontal(0); -} - -// Windows Full Button -// -------------------------------------------------- - -.button-full-wp { - @include margin-horizontal(0); - @include border-radius(0); - - border-right-width: 0; - border-left-width: 0; -} - -// Windows Outline Button -// -------------------------------------------------- - -.button-outline-wp { - border-width: $button-wp-outline-border-width; - border-style: $button-wp-outline-border-style; - border-color: $button-wp-outline-border-color; - color: $button-wp-outline-text-color; - background-color: $button-wp-outline-background-color; -} - -.button-outline-wp:hover:not(.disable-hover) { - background-color: $button-wp-clear-background-color-hover; -} - -.button-outline-wp.activated { - background-color: rgba($button-wp-outline-background-color-activated, $button-wp-outline-background-color-opacity-activated); -} - - -// Windows Outline Button Color Mixin -// -------------------------------------------------- - -@mixin wp-button-outline($color-name, $color-base, $color-contrast) { - $fg-color: color-shade($color-base, 5%); - - .button-outline-wp-#{$color-name} { - border-color: $fg-color; - color: $fg-color; - background-color: $button-wp-outline-background-color; - } - - .button-outline-wp-#{$color-name}:hover:not(.disable-hover) { - border-color: $fg-color; - background-color: $button-wp-clear-background-color-hover; - } - - .button-outline-wp-#{$color-name}.activated { - background-color: rgba($fg-color, $button-wp-outline-background-color-opacity-activated); - } -} - - -// Windows Clear Button -// -------------------------------------------------- - -.button-clear-wp { - color: $button-wp-clear-text-color; - background-color: $button-wp-clear-background-color; -} - -.button-clear-wp.activated { - background-color: $button-wp-clear-background-color-activated; -} - -.button-clear-wp:hover:not(.disable-hover) { - background-color: $button-wp-clear-background-color-hover; -} - - -// Windows Clear Button Color Mixin -// -------------------------------------------------- - -@mixin wp-button-clear($color-name, $color-base, $color-contrast) { - $fg-color: $color-base; - - .button-clear-wp-#{$color-name} { - color: $fg-color; - background-color: $button-wp-clear-background-color; - } - - .button-clear-wp-#{$color-name}.activated { - background-color: $button-wp-clear-background-color-activated; - } - - .button-clear-wp-#{$color-name}:hover:not(.disable-hover) { - color: $fg-color; - } -} - - -// Windows Round Button -// -------------------------------------------------- - -.button-round-wp { - @include border-radius($button-wp-round-border-radius); - - @include padding($button-wp-round-padding-top, $button-wp-round-padding-end, $button-wp-round-padding-bottom, $button-wp-round-padding-start); -} - -.button-wp ion-icon[slot="icon-only"] { - @include padding(0); -} - - -// Generate Windows Button Colors -// -------------------------------------------------- - -@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - @include wp-button-default($color-name, $color-base, $color-contrast); - @include wp-button-outline($color-name, $color-base, $color-contrast); - @include wp-button-clear($color-name, $color-base, $color-contrast); -} - - -// WP strong Button -// -------------------------------------------------- - -.button-strong-wp { - font-weight: $button-wp-strong-font-weight; -} diff --git a/packages/core/src/components/card-content/card-content.tsx b/packages/core/src/components/card-content/card-content.tsx index 45ce4e1846..3af1253f13 100644 --- a/packages/core/src/components/card-content/card-content.tsx +++ b/packages/core/src/components/card-content/card-content.tsx @@ -4,8 +4,7 @@ import { Component, Prop } from '@stencil/core'; tag: 'ion-card-content', styleUrls: { ios: 'card-content.ios.scss', - md: 'card-content.md.scss', - wp: 'card-content.wp.scss' + md: 'card-content.md.scss' }, host: { theme: 'card-content' @@ -21,10 +20,10 @@ export class CardContent { /** * @input {string} The mode determines which platform styles to use. - * Possible values are: `"ios"`, `"md"`, or `"wp"`. + * Possible values are: `"ios"` or `"md"`. * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ - @Prop() mode: 'ios' | 'md' | 'wp'; + @Prop() mode: 'ios' | 'md'; protected render() { return ; diff --git a/packages/core/src/components/card-content/card-content.wp.scss b/packages/core/src/components/card-content/card-content.wp.scss deleted file mode 100644 index 4cb12cd922..0000000000 --- a/packages/core/src/components/card-content/card-content.wp.scss +++ /dev/null @@ -1,62 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./card-content"; - - -// Windows Card Content -// -------------------------------------------------- - -/// @prop - Padding top of the card -$card-wp-padding-top: 13px !default; - -/// @prop - Padding end of the card -$card-wp-padding-end: 16px !default; - -/// @prop - Padding bottom of the card -$card-wp-padding-bottom: 13px !default; - -/// @prop - Padding start of the card -$card-wp-padding-start: 16px !default; - -/// @prop - Font size of the card -$card-wp-font-size: 1.4rem !default; - -/// @prop - Line height of the card -$card-wp-line-height: 1.5 !default; - - -.card-content-wp { - @include padding($card-wp-padding-top, $card-wp-padding-end, $card-wp-padding-bottom, $card-wp-padding-start); - - font-size: $card-wp-font-size; - line-height: $card-wp-line-height; -} - -.card-header-wp + .card-content-wp, -.card-wp .item + .card-content-wp { - @include padding(0, null, null, null); -} - - -// Generate Windows Card Content Colors -// -------------------------------------------------- - -@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - - .card-wp-#{$color-name} { - - .card-content-wp { - color: $color-contrast; - } - - @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - .card-content-wp-#{$color-name} { - color: $color-base; - } - } - } - - .card-content-wp-#{$color-name} { - color: $color-base; - } - -} diff --git a/packages/core/src/components/card-header/card-header.tsx b/packages/core/src/components/card-header/card-header.tsx index af012c2581..c295c0d1fa 100644 --- a/packages/core/src/components/card-header/card-header.tsx +++ b/packages/core/src/components/card-header/card-header.tsx @@ -5,8 +5,7 @@ import { Component, Prop } from '@stencil/core'; tag: 'ion-card-header', styleUrls: { ios: 'card-header.ios.scss', - md: 'card-header.md.scss', - wp: 'card-header.wp.scss' + md: 'card-header.md.scss' }, host: { theme: 'card-header' @@ -22,10 +21,10 @@ export class CardHeader { /** * @input {string} The mode determines which platform styles to use. - * Possible values are: `"ios"`, `"md"`, or `"wp"`. + * Possible values are: `"ios"` or `"md"`. * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ - @Prop() mode: 'ios' | 'md' | 'wp'; + @Prop() mode: 'ios' | 'md'; protected render() { return ; diff --git a/packages/core/src/components/card-header/card-header.wp.scss b/packages/core/src/components/card-header/card-header.wp.scss deleted file mode 100644 index 9456bf53b3..0000000000 --- a/packages/core/src/components/card-header/card-header.wp.scss +++ /dev/null @@ -1,58 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./card-header"; - - -// Windows Card Header -// -------------------------------------------------- - -/// @prop - Font size of the card header -$card-wp-header-font-size: 1.6rem !default; - -/// @prop - Padding top of the card header -$card-wp-header-padding-top: 16px !default; - -/// @prop - Padding end of the card header -$card-wp-header-padding-end: $card-wp-header-padding-top !default; - -/// @prop - Padding bottom of the card header -$card-wp-header-padding-bottom: $card-wp-header-padding-top !default; - -/// @prop - Padding start of the card header -$card-wp-header-padding-start: $card-wp-header-padding-end !default; - -/// @prop - Color of the card header -$card-wp-header-color: #222 !default; - - -.card-header-wp { - @include padding($card-wp-header-padding-top, $card-wp-header-padding-end, $card-wp-header-padding-bottom, $card-wp-header-padding-start); - - font-size: $card-wp-header-font-size; - - color: $card-wp-header-color; -} - - -// Generate Windows Card Header Colors -// -------------------------------------------------- - -@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - - .card-wp-#{$color-name} { - - .card-header-wp { - color: $color-contrast; - } - - @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - .card-header-wp-#{$color-name} { - color: $color-base; - } - } - } - - .card-header-wp-#{$color-name} { - color: $color-base; - } - -} diff --git a/packages/core/src/components/card-subtitle/card-subtitle.tsx b/packages/core/src/components/card-subtitle/card-subtitle.tsx index 85e0e3395f..fef47acddd 100644 --- a/packages/core/src/components/card-subtitle/card-subtitle.tsx +++ b/packages/core/src/components/card-subtitle/card-subtitle.tsx @@ -21,10 +21,10 @@ export class CardSubtitle { /** * @input {string} The mode determines which platform styles to use. - * Possible values are: `"ios"`, `"md"`, or `"wp"`. + * Possible values are: `"ios"` or `"md"`. * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ - @Prop() mode: 'ios' | 'md' | 'wp'; + @Prop() mode: 'ios' | 'md'; hostData() { return { diff --git a/packages/core/src/components/card-title/card-title.tsx b/packages/core/src/components/card-title/card-title.tsx index ea7f1f931d..2e1283d057 100644 --- a/packages/core/src/components/card-title/card-title.tsx +++ b/packages/core/src/components/card-title/card-title.tsx @@ -5,8 +5,7 @@ import { Component, Prop} from '@stencil/core'; tag: 'ion-card-title', styleUrls: { ios: 'card-title.ios.scss', - md: 'card-title.md.scss', - wp: 'card-title.wp.scss' + md: 'card-title.md.scss' }, host: { theme: 'card-title' @@ -22,10 +21,10 @@ export class CardTitle { /** * @input {string} The mode determines which platform styles to use. - * Possible values are: `"ios"`, `"md"`, or `"wp"`. + * Possible values are: `"ios"` or `"md"`. * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ - @Prop() mode: 'ios' | 'md' | 'wp'; + @Prop() mode: 'ios' | 'md'; hostData() { return { diff --git a/packages/core/src/components/card-title/card-title.wp.scss b/packages/core/src/components/card-title/card-title.wp.scss deleted file mode 100644 index 77c4df392d..0000000000 --- a/packages/core/src/components/card-title/card-title.wp.scss +++ /dev/null @@ -1,74 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./card-title"; - - -// Windows Card Title -// -------------------------------------------------- - -/// @prop - Font size of card title -$card-wp-title-font-size: 2.4rem !default; - -/// @prop - Padding top of the card title -$card-wp-title-padding-top: 8px !default; - -/// @prop - Padding end of the card title -$card-wp-title-padding-end: 0 !default; - -/// @prop - Padding bottom of the card title -$card-wp-title-padding-bottom: 8px !default; - -/// @prop - Padding start of the card title -$card-wp-title-padding-start: 0 !default; - -/// @prop - Margin top of the card title -$card-wp-title-margin-top: 2px !default; - -/// @prop - Margin end of the card title -$card-wp-title-margin-end: 0 !default; - -/// @prop - Margin bottom of the card title -$card-wp-title-margin-bottom: $card-wp-title-margin-top !default; - -/// @prop - Margin start of the card title -$card-wp-title-margin-start: $card-wp-title-margin-end !default; - -/// @prop - Color of the card title -$card-wp-title-text-color: #222 !default; - - -.card-title-wp { - @include margin($card-wp-title-margin-top, $card-wp-title-margin-end, $card-wp-title-margin-bottom, $card-wp-title-margin-start); - - @include padding($card-wp-title-padding-top, $card-wp-title-padding-end, $card-wp-title-padding-bottom, $card-wp-title-padding-start); - - display: block; - - font-size: $card-wp-title-font-size; - line-height: 1.2; - color: $card-wp-title-text-color; -} - - -// Generate Windows Card Title Colors -// -------------------------------------------------- - -@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - - .card-wp-#{$color-name} { - - .card-title-wp { - color: $color-contrast; - } - - @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - .card-title-wp-#{$color-name} { - color: $color-base; - } - } - } - - .card-title-wp-#{$color-name} { - color: $color-base; - } - -} diff --git a/packages/core/src/components/card/card.tsx b/packages/core/src/components/card/card.tsx index 5d9ea83999..7d2b360665 100644 --- a/packages/core/src/components/card/card.tsx +++ b/packages/core/src/components/card/card.tsx @@ -4,8 +4,7 @@ import { Component, Prop } from '@stencil/core'; tag: 'ion-card', styleUrls: { ios: 'card.ios.scss', - md: 'card.md.scss', - wp: 'card.wp.scss' + md: 'card.md.scss' }, host: { theme: 'card' @@ -21,10 +20,10 @@ export class Card { /** * @input {string} The mode determines which platform styles to use. - * Possible values are: `"ios"`, `"md"`, or `"wp"`. + * Possible values are: `"ios"` or `"md"`. * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ - @Prop() mode: 'ios' | 'md' | 'wp'; + @Prop() mode: 'ios' | 'md'; protected render() { return ; diff --git a/packages/core/src/components/card/card.wp.scss b/packages/core/src/components/card/card.wp.scss deleted file mode 100755 index 2f3fbb63c3..0000000000 --- a/packages/core/src/components/card/card.wp.scss +++ /dev/null @@ -1,155 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./card"; - - -// Windows Card -// -------------------------------------------------- - -/// @prop - Margin top of the card -$card-wp-margin-top: 8px !default; - -/// @prop - Margin end of the card -$card-wp-margin-end: 8px !default; - -/// @prop - Margin bottom of the card -$card-wp-margin-bottom: 8px !default; - -/// @prop - Margin start of the card -$card-wp-margin-start: 8px !default; - -/// @prop - Padding top of the media on the card -$card-wp-padding-media-top: 10px !default; - -/// @prop - Padding bottom of the media on the card -$card-wp-padding-media-bottom: 10px !default; - -/// @prop - Size of the card avatar -$card-wp-avatar-size: 4rem !default; - -/// @prop - Size of the card thumbnail -$card-wp-thumbnail-size: 8rem !default; - -/// @prop - Background color of the card -$card-wp-background-color: $list-wp-background-color !default; - -/// @prop - Box shadow color of the card -$card-wp-box-shadow-color: rgba(0, 0, 0, .2) !default; - -/// @prop - Box shadow of the card -$card-wp-box-shadow: 0 1px 1px 1px $card-wp-box-shadow-color !default; - -/// @prop - Border radius of the card -$card-wp-border-radius: 1px !default; - -/// @prop - Font size of the card -$card-wp-font-size: 1.4rem !default; - -/// @prop - Line height of the card -$card-wp-line-height: 1.5 !default; - -/// @prop - Color of the card text -$card-wp-text-color: #222 !default; - - -.card-wp { - @include margin($card-wp-margin-top, $card-wp-margin-end, $card-wp-margin-bottom, $card-wp-margin-start); - @include border-radius($card-wp-border-radius); - - width: calc(100% - #{($card-wp-margin-end + $card-wp-margin-start)}); - - font-size: $card-wp-font-size; - - background: $card-wp-background-color; - box-shadow: $card-wp-box-shadow; -} - -.card-wp ion-list { - @include margin(null, null, 0, null); -} - -.card-wp > .item:last-child, -.card-wp > .item:last-child .item-inner, -.card-wp > .item-wrapper:last-child .item { - border-bottom: 0; -} - -.card-wp .item-wp.item-block .item-inner { - border: 0; -} - -.card .note-wp { - font-size: 1.3rem; -} - -.card-wp h1 { - @include margin(0, 0, 2px); - - font-size: 2.4rem; - font-weight: normal; - color: $card-wp-text-color; -} - -.card-wp h2 { - @include margin(2px, 0); - - font-size: 1.6rem; - font-weight: normal; - color: $card-wp-text-color; -} - -.card-wp h3, -.card-wp h4, -.card-wp h5, -.card-wp h6 { - @include margin(2px, 0); - - font-size: 1.4rem; - font-weight: normal; - color: $card-wp-text-color; -} - -.card-wp p { - @include margin(0, 0, 2px); - - font-size: 1.4rem; - font-weight: normal; - line-height: 1.5; - color: $card-wp-text-color; -} - -.card-wp + ion-card { - @include margin(0, null, null, null); -} - - -// Generate Windows Card Colors -// -------------------------------------------------- - -@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - - .card-wp .text-wp-#{$color-name} { - color: $color-base; - } - - .card-wp-#{$color-name} { - color: $color-contrast; - background-color: $color-base; - - h1, - h2, - h3, - h4, - h5, - h6, - p { - color: $color-contrast; - } - - @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - .text-wp-#{$color-name} { - color: $color-base; - } - } - } - -} diff --git a/packages/core/src/components/checkbox/checkbox.tsx b/packages/core/src/components/checkbox/checkbox.tsx index 10ef921af8..78636e9cc9 100644 --- a/packages/core/src/components/checkbox/checkbox.tsx +++ b/packages/core/src/components/checkbox/checkbox.tsx @@ -70,8 +70,7 @@ import { Component, CssClassMap, Event, EventEmitter, Listen, Prop, PropDidChang tag: 'ion-checkbox', styleUrls: { ios: 'checkbox.ios.scss', - md: 'checkbox.md.scss', - wp: 'checkbox.wp.scss' + md: 'checkbox.md.scss' }, host: { theme: 'checkbox' @@ -101,10 +100,10 @@ export class Checkbox { /** * @input {string} The mode determines which platform styles to use. - * Possible values are: `"ios"`, `"md"`, or `"wp"`. + * Possible values are: `"ios"` or `"md"`. * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ - @Prop() mode: 'ios' | 'md' | 'wp'; + @Prop() mode: 'ios' | 'md'; /** * @input {boolean} If true, the checkbox is selected. Defaults to `false`. diff --git a/packages/core/src/components/checkbox/checkbox.wp.scss b/packages/core/src/components/checkbox/checkbox.wp.scss deleted file mode 100644 index a9fe3e61b7..0000000000 --- a/packages/core/src/components/checkbox/checkbox.wp.scss +++ /dev/null @@ -1,176 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./checkbox"; - -// Windows Checkbox -// -------------------------------------------------- - -/// @prop - Border bottom width of the checkbox -$checkbox-wp-border-bottom-width: 1px !default; - -/// @prop - Border bottom style of the checkbox -$checkbox-wp-border-bottom-style: solid !default; - -/// @prop - Border bottom color of the checkbox -$checkbox-wp-border-bottom-color: $list-wp-border-color !default; - -/// @prop - Opacity of the disabled checkbox -$checkbox-wp-disabled-opacity: .3 !default; - -/// @prop - Background color of the checkbox icon when off -$checkbox-wp-icon-background-color-off: $list-wp-background-color !default; - -/// @prop - Background color of the checkbox icon when on -$checkbox-wp-icon-background-color-on: color($colors-wp, primary) !default; - -/// @prop - Size of the checkbox icon -$checkbox-wp-icon-size: 16px !default; - -/// @prop - Width of the checkbox icon checkmark -$checkbox-wp-icon-checkmark-width: 1px !default; - -/// @prop - Style of the checkbox icon checkmark -$checkbox-wp-icon-checkmark-style: solid !default; - -/// @prop - Color of the checkbox icon checkmark -$checkbox-wp-icon-checkmark-color: color-contrast($colors-wp, $checkbox-wp-icon-background-color-on) !default; - -/// @prop - Border width of the checkbox icon -$checkbox-wp-icon-border-width: 2px !default; - -/// @prop - Border style of the checkbox icon -$checkbox-wp-icon-border-style: solid !default; - -/// @prop - Border radius of the checkbox icon -$checkbox-wp-icon-border-radius: 0 !default; - -/// @prop - Border color of the checkbox icon when off -$checkbox-wp-icon-border-color-off: #333 !default; - -/// @prop - Border color of the checkbox icon when on -$checkbox-wp-icon-border-color-on: color($colors-wp, primary) !default; - -/// @prop - Margin top of the start checkbox item -$checkbox-wp-item-start-margin-top: $item-wp-padding-media-top !default; - -/// @prop - Margin end of the start checkbox item -$checkbox-wp-item-start-margin-end: $item-wp-padding-end !default; - -/// @prop - Margin bottom of the start checkbox item -$checkbox-wp-item-start-margin-bottom: $item-wp-padding-media-bottom !default; - -/// @prop - Margin start of the start checkbox item -$checkbox-wp-item-start-margin-start: 4px !default; - -/// @prop - Margin top of the end checkbox item -$checkbox-wp-item-end-margin-top: 11px !default; - -/// @prop - Margin end of the end checkbox item -$checkbox-wp-item-end-margin-end: 10px !default; - -/// @prop - Margin bottom of the end checkbox item -$checkbox-wp-item-end-margin-bottom: 10px !default; - -/// @prop - Margin start of the end checkbox item -$checkbox-wp-item-end-margin-start: 0 !default; - - -// Windows Checkbox Outer Square: Unchecked -// ----------------------------------------- - -.checkbox-wp .checkbox-icon { - @include border-radius($checkbox-wp-icon-border-radius); - - position: relative; - - width: $checkbox-wp-icon-size; - height: $checkbox-wp-icon-size; - - border-width: $checkbox-wp-icon-border-width; - border-style: $checkbox-wp-icon-border-style; - border-color: $checkbox-wp-icon-border-color-off; - background-color: $checkbox-wp-icon-background-color-off; -} - - -// Windows Checkbox Outer Square: Checked -// ----------------------------------------- - -.checkbox-wp .checkbox-checked { - border-color: $checkbox-wp-icon-border-color-on; - background-color: $checkbox-wp-icon-background-color-on; -} - - -// Windows Checkbox Inner Checkmark: Checked -// ----------------------------------------- - -.checkbox-wp .checkbox-checked .checkbox-inner { - @include position(-2px, null, null, 3px); - - position: absolute; - - width: 6px; - height: 12px; - - border-width: $checkbox-wp-icon-checkmark-width; - border-top-width: 0; - border-left-width: 0; - border-style: $checkbox-wp-icon-checkmark-style; - border-color: $checkbox-wp-icon-checkmark-color; - transform: rotate(45deg); -} - - -// Windows Checkbox: Disabled -// ----------------------------------------- - -.checkbox-wp.checkbox-disabled, -.item-wp.item-checkbox-disabled ion-label { - opacity: $checkbox-wp-disabled-opacity; - - pointer-events: none; -} - - -// Windows Checkbox Within An Item -// ----------------------------------------- - -.item.item-wp .checkbox-wp { - @include margin($checkbox-wp-item-start-margin-top, $checkbox-wp-item-start-margin-end, $checkbox-wp-item-start-margin-bottom, $checkbox-wp-item-start-margin-start); - - position: static; - display: block; -} - -.item.item-wp .checkbox-wp[slot="end"] { - @include margin($checkbox-wp-item-end-margin-top, $checkbox-wp-item-end-margin-end, $checkbox-wp-item-end-margin-bottom, $checkbox-wp-item-end-margin-start); -} - -.checkbox-wp + .item-inner ion-label { - @include margin-horizontal(0, null); -} - - -// Windows Checkbox Color Mixin -// -------------------------------------------------- - -@mixin checkbox-theme-wp($color-name, $color-base, $color-contrast) { - - .checkbox-wp-#{$color-name} .checkbox-checked { - border-color: $color-base; - background-color: $color-base; - } - - .checkbox-wp-#{$color-name} .checkbox-checked .checkbox-inner { - border-color: $color-contrast; - } - -} - - -// Generate Windows Checkbox Colors -// -------------------------------------------------- - -@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - @include checkbox-theme-wp($color-name, $color-base, $color-contrast); -} diff --git a/packages/core/src/components/chip-button/chip-button.tsx b/packages/core/src/components/chip-button/chip-button.tsx index cc87f848d9..f2744591eb 100644 --- a/packages/core/src/components/chip-button/chip-button.tsx +++ b/packages/core/src/components/chip-button/chip-button.tsx @@ -6,8 +6,7 @@ import { getElementClassObject } from '../../utils/theme'; tag: 'ion-chip-button', styleUrls: { ios: 'chip-button.ios.scss', - md: 'chip-button.md.scss', - wp: 'chip-button.wp.scss' + md: 'chip-button.md.scss' }, }) export class ChipButton { @@ -28,10 +27,10 @@ export class ChipButton { /** * @input {string} The mode determines which platform styles to use. - * Possible values are: `"ios"`, `"md"`, or `"wp"`. + * Possible values are: `"ios"` or `"md"`. * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ - @Prop() mode: 'ios' | 'md' | 'wp'; + @Prop() mode: 'ios' | 'md'; /** * @input {boolean} If true, activates a transparent button style. diff --git a/packages/core/src/components/chip-button/chip-button.wp.scss b/packages/core/src/components/chip-button/chip-button.wp.scss deleted file mode 100644 index 7baf2c643a..0000000000 --- a/packages/core/src/components/chip-button/chip-button.wp.scss +++ /dev/null @@ -1,66 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./chip-button"; - -// Windows Chip Button -// -------------------------------------------------- - -/// @prop - Background color of the chip button -$chip-button-wp-background-color: color($colors-wp, primary) !default; - -/// @prop - Fill color of the icon in the chip button -$chip-button-wp-icon-fill-color: color-contrast($colors-wp, $chip-button-wp-background-color) !default; - -/// @prop - Background color of the clear chip button -$chip-button-wp-clear-background-color: transparent !default; - -/// @prop - Text color of the clear chip button -$chip-button-wp-clear-text-color: color($colors-wp, primary) !default; - -/// @prop - Fill color of the icon in the clear chip button -$chip-button-wp-clear-icon-fill-color: color($colors-wp, primary) !default; - - -.chip-button-wp { - background-color: $chip-button-wp-background-color; -} - -.chip-button-wp .icon { - fill: $chip-button-wp-icon-fill-color; -} - - -// Material Design Clear Chip Button -// -------------------------------------------------- - -.chip-button-clear-wp { - color: $chip-button-wp-clear-text-color; - background-color: $chip-button-wp-clear-background-color; -} - -.chip-button-clear-wp .icon { - fill: $chip-button-wp-clear-icon-fill-color; -} - - -// Generate Windows Chip Colors -// -------------------------------------------------- - -@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - - .chip-button-wp-#{$color-name} { - color: $color-contrast; - background-color: $color-base; - } - - .chip-button-wp-#{$color-name} .icon { - fill: $color-contrast; - } - - .chip-button-clear-wp-#{$color-name} { - color: $color-base; - - .icon { - fill: $color-base; - } - } -} diff --git a/packages/core/src/components/chip/chip.tsx b/packages/core/src/components/chip/chip.tsx index 325017bf2d..ccfb0d1e51 100644 --- a/packages/core/src/components/chip/chip.tsx +++ b/packages/core/src/components/chip/chip.tsx @@ -91,8 +91,7 @@ import { Component, Prop } from '@stencil/core'; tag: 'ion-chip', styleUrls: { ios: 'chip.ios.scss', - md: 'chip.md.scss', - wp: 'chip.wp.scss' + md: 'chip.md.scss' }, host: { theme: 'chip' @@ -108,10 +107,10 @@ export class Chip { /** * @input {string} The mode determines which platform styles to use. - * Possible values are: `"ios"`, `"md"`, or `"wp"`. + * Possible values are: `"ios"` or `"md"`. * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ - @Prop() mode: 'ios' | 'md' | 'wp'; + @Prop() mode: 'ios' | 'md'; protected render() { return ; diff --git a/packages/core/src/components/chip/chip.wp.scss b/packages/core/src/components/chip/chip.wp.scss deleted file mode 100644 index 29563c2583..0000000000 --- a/packages/core/src/components/chip/chip.wp.scss +++ /dev/null @@ -1,93 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./chip"; - -// Windows Chip -// -------------------------------------------------- - -/// @prop - Margin top of the chip -$chip-wp-margin-top: 2px !default; - -/// @prop - Margin end of the chip -$chip-wp-margin-end: 0 !default; - -/// @prop - Margin bottom of the chip -$chip-wp-margin-bottom: $chip-wp-margin-top !default; - -/// @prop - Margin start of the chip -$chip-wp-margin-start: $chip-wp-margin-end !default; - -/// @prop - Height of the chip -$chip-wp-height: 32px !default; - -/// @prop - Border radius of the chip -$chip-wp-border-radius: 16px !default; - -/// @prop - Font size of the chip -$chip-wp-font-size: 13px !default; - -/// @prop - Text color of the chip -$chip-wp-text-color: rgba(0, 0, 0, .87) !default; - -/// @prop - Background color of the chip -$chip-wp-background-color: rgba(0, 0, 0, .12) !default; - -/// @prop - Margin top of the label in the chip -$chip-wp-label-margin-top: 0 !default; - -/// @prop - Margin end of the label in the chip -$chip-wp-label-margin-end: 10px !default; - -/// @prop - Margin bottom of the label in the chip -$chip-wp-label-margin-bottom: $chip-wp-label-margin-top !default; - -/// @prop - Margin start of the label in the chip -$chip-wp-label-margin-start: $chip-wp-label-margin-end !default; - -/// @prop - Background color of the icon in the chip -$chip-wp-icon-background-color: color($colors-wp, primary) !default; - -/// @prop - Fill color of the icon in the chip -$chip-wp-icon-fill-color: color-contrast($colors-wp, $chip-wp-icon-background-color) !default; - - -.chip-wp { - @include border-radius($chip-wp-border-radius); - - @include margin($chip-wp-margin-top, $chip-wp-margin-end, $chip-wp-margin-bottom, $chip-wp-margin-start); - - height: $chip-wp-height; - - font-size: $chip-wp-font-size; - line-height: $chip-wp-height; - color: $chip-wp-text-color; - background: $chip-wp-background-color; -} - -.chip-wp > ion-label { - @include margin($chip-wp-label-margin-top, $chip-wp-label-margin-end, $chip-wp-label-margin-bottom, $chip-wp-label-margin-start); -} - -.chip-wp > ion-icon { - background-color: $chip-wp-icon-background-color; - - fill: $chip-wp-icon-fill-color; -} - - -// Generate Windows Chip Colors -// -------------------------------------------------- - -@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - - .chip-wp-#{$color-name} { - color: $color-contrast; - background-color: $color-base; - } - - .chip-wp .icon-wp-#{$color-name} { - background-color: $color-base; - - fill: $color-contrast; - } - -} diff --git a/packages/core/src/components/content/content.tsx b/packages/core/src/components/content/content.tsx index 098b7ab79c..7598312cfd 100644 --- a/packages/core/src/components/content/content.tsx +++ b/packages/core/src/components/content/content.tsx @@ -7,8 +7,7 @@ import { getPageElement } from '../../utils/helpers'; tag: 'ion-content', styleUrls: { ios: 'content.ios.scss', - md: 'content.md.scss', - wp: 'content.wp.scss' + md: 'content.md.scss' } }) export class Content { diff --git a/packages/core/src/components/content/content.wp.scss b/packages/core/src/components/content/content.wp.scss deleted file mode 100644 index 6cc34b52ed..0000000000 --- a/packages/core/src/components/content/content.wp.scss +++ /dev/null @@ -1,27 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./content"; - - -// Windows Content -// -------------------------------------------------- - -.content-wp { - color: $text-wp-color; - background-color: $background-wp-color; -} - -.content-wp hr { - background-color: rgba(0, 0, 0, .08); -} - - -// Windows Content Padding -// -------------------------------------------------- - -@include content-padding("wp", $content-wp-padding); - - -// Windows Content Margin -// -------------------------------------------------- - -@include content-margin("wp", $content-wp-margin); diff --git a/packages/core/src/components/datetime/datetime.tsx b/packages/core/src/components/datetime/datetime.tsx index 6ac8cba45d..c36a69e09f 100644 --- a/packages/core/src/components/datetime/datetime.tsx +++ b/packages/core/src/components/datetime/datetime.tsx @@ -247,8 +247,7 @@ import { Picker, PickerColumn, PickerController, PickerOptions } from '../../ind tag: 'ion-datetime', styleUrls: { ios: 'datetime.ios.scss', - md: 'datetime.md.scss', - wp: 'datetime.wp.scss' + md: 'datetime.md.scss' }, host: { theme: 'datetime' diff --git a/packages/core/src/components/datetime/datetime.wp.scss b/packages/core/src/components/datetime/datetime.wp.scss deleted file mode 100644 index 8ccd96f5cd..0000000000 --- a/packages/core/src/components/datetime/datetime.wp.scss +++ /dev/null @@ -1,54 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./datetime"; - -// Windows Datetime -// -------------------------------------------------- - -/// @prop - Min width of the Datetime component -$datetime-wp-min-width: 45% !default; - -/// @prop - Padding top of the Datetime component -$datetime-wp-padding-top: $item-wp-padding-top !default; - -/// @prop - Padding end of the Datetime component -$datetime-wp-padding-end: ($item-wp-padding-end / 2) !default; - -/// @prop - Padding bottom of the Datetime component -$datetime-wp-padding-bottom: $item-wp-padding-bottom !default; - -/// @prop - Padding start of the Datetime component -$datetime-wp-padding-start: $item-wp-padding-start !default; - -/// @prop - Border width of the Datetime component -$datetime-wp-border-width: 2px !default; - -/// @prop - Border color of the Datetime component -$datetime-wp-border-color: $input-wp-border-color !default; - -/// @prop - Color of the Datetime placeholder -$datetime-wp-placeholder-color: $input-wp-border-color !default; - - -.datetime-wp { - @include padding($datetime-wp-padding-top, $datetime-wp-padding-end, $datetime-wp-padding-bottom, $datetime-wp-padding-start); - - min-width: $datetime-wp-min-width; -} - -.datetime-wp .datetime-text { - @include padding(0, 8px); - - min-height: 3.4rem; - - border: $datetime-wp-border-width solid $datetime-wp-border-color; - line-height: 3rem; -} - -.item-datetime .datetime-wp ion-label[floating] { - @include transform(translate3d(8px, 41px, 0)); -} - -.datetime-wp .datetime-placeholder { - color: $datetime-wp-placeholder-color; -} - diff --git a/packages/core/src/components/fab/fab.tsx b/packages/core/src/components/fab/fab.tsx index 2600bb6706..cb887eaaf8 100755 --- a/packages/core/src/components/fab/fab.tsx +++ b/packages/core/src/components/fab/fab.tsx @@ -51,8 +51,7 @@ import { createThemedClasses, getElementClassObject } from '../../utils/theme'; tag: 'ion-fab-button', styleUrls: { ios: 'fab.ios.scss', - md: 'fab.md.scss', - wp: 'fab.wp.scss' + md: 'fab.md.scss' } }) export class FabButton { @@ -67,10 +66,10 @@ export class FabButton { /** * @input {string} The mode determines which platform styles to use. - * Possible values are: `"ios"`, `"md"`, or `"wp"`. + * Possible values are: `"ios"` or `"md"`. * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ - @Prop() mode: 'ios' | 'md' | 'wp'; + @Prop() mode: 'ios' | 'md'; /** * @input {string} Contains a URL or a URL fragment that the hyperlink points to. diff --git a/packages/core/src/components/fab/fab.wp.scss b/packages/core/src/components/fab/fab.wp.scss deleted file mode 100755 index 871c3dfe68..0000000000 --- a/packages/core/src/components/fab/fab.wp.scss +++ /dev/null @@ -1,96 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./fab"; - -// Windows FAB Button -// -------------------------------------------------- - -/// @prop - Background color of the button -$fab-wp-background-color: color($colors-wp, primary) !default; - -/// @prop - Text color of the button -$fab-wp-text-color: color-contrast($colors-wp, $fab-wp-background-color) !default; - -/// @prop - Color of the button icon -$fab-wp-icon-fill-color: $fab-wp-text-color !default; - -/// @prop - Background color of the activated button -$fab-wp-background-color-activated: color-shade($fab-wp-background-color) !default; - -/// @prop - Background color of the button in a list -$fab-wp-list-button-background-color: $fab-list-button-background-color !default; - -/// @prop - Text color of the button in a list -$fab-wp-list-button-text-color: color-contrast($colors-wp, $fab-wp-list-button-background-color) !default; - -/// @prop - Color of the button icon in a list -$fab-wp-list-button-icon-fill-color: $fab-wp-list-button-text-color !default; - -/// @prop - Background color of the activated button in a list -$fab-wp-list-button-background-color-activated: color-shade($fab-wp-list-button-background-color) !default; - -/// @prop - Transition duration of the transform and opacity of the button in a list -$fab-wp-list-button-transition-duration: 200ms !default; - -/// @prop - Speed curve of the transition of the transform and opacity of the button in a list -$fab-wp-list-button-transition-timing-function: ease !default; - -/// @prop - Transition delay of the transform and opacity of the button in a list -$fab-wp-list-button-transition-delay: 10ms !default; - - -.fab-wp { - color: $fab-wp-text-color; - background-color: $fab-wp-background-color; -} - -.fab-wp.activated { - background-color: $fab-wp-background-color-activated; -} - -.fab-wp .icon { - fill: $fab-wp-icon-fill-color; -} - - -// FAB buttons in a list -// -------------------------------------------------- - -.fab-wp-in-list { - color: $fab-wp-list-button-text-color; - background-color: $fab-wp-list-button-background-color; - - transition: transform $fab-wp-list-button-transition-duration $fab-wp-list-button-transition-timing-function $fab-wp-list-button-transition-delay, - opacity $fab-wp-list-button-transition-duration $fab-wp-list-button-transition-timing-function $fab-wp-list-button-transition-delay; -} - -.fab-wp-in-list.activated { - background-color: $fab-wp-list-button-background-color-activated; -} - -.fab-wp-in-list .icon { - fill: $fab-wp-list-button-icon-fill-color; -} - - -// Generate WP FAB colors -// -------------------------------------------------- - -@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - - $bg-color: $color-base; - $bg-color-activated: color-shade($bg-color); - $fg-color: $color-contrast; - - .fab-wp-#{$color-name} { - color: $fg-color; - background-color: $bg-color; - } - - .fab-wp-#{$color-name} .icon { - fill: $fg-color; - } - - .fab-wp-#{$color-name}.activated { - background-color: $bg-color-activated; - } -} diff --git a/packages/core/src/components/icon/icon.wp.scss b/packages/core/src/components/icon/icon.wp.scss deleted file mode 100644 index 79cd2637b0..0000000000 --- a/packages/core/src/components/icon/icon.wp.scss +++ /dev/null @@ -1,16 +0,0 @@ -@import "../../themes/ionic.globals.wp"; - -// Windows Icon -// -------------------------------------------------- - - -// Generate Windows Icon Colors -// -------------------------------------------------- - -@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - - .icon-wp-#{$color-name} { - fill: $color-base; - } - -} diff --git a/packages/core/src/components/input/input.tsx b/packages/core/src/components/input/input.tsx index ecbda3d645..1aa6f5304b 100644 --- a/packages/core/src/components/input/input.tsx +++ b/packages/core/src/components/input/input.tsx @@ -8,8 +8,7 @@ import { InputComponent } from './input-base'; tag: 'ion-input', styleUrls: { ios: 'input.ios.scss', - md: 'input.md.scss', - wp: 'input.wp.scss' + md: 'input.md.scss' }, host: { theme: 'input' diff --git a/packages/core/src/components/input/input.wp.scss b/packages/core/src/components/input/input.wp.scss deleted file mode 100644 index f19c012ea2..0000000000 --- a/packages/core/src/components/input/input.wp.scss +++ /dev/null @@ -1,157 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./input"; - - -// Windows Input -// -------------------------------------------------- - -/// @prop - Background color of the input -$text-input-wp-background-color: $list-wp-background-color !default; - -/// @prop - Border color of the input -$text-input-wp-border-color: $input-wp-border-color !default; - -/// @prop - Border width of the input -$text-input-wp-border-width: 2px !default; - -/// @prop - Margin top of the input -$text-input-wp-margin-top: $item-wp-padding-top !default; - -/// @prop - Margin end of the input -$text-input-wp-margin-end: ($item-wp-padding-end / 2) !default; - -/// @prop - Margin bottom of the input -$text-input-wp-margin-bottom: $item-wp-padding-bottom !default; - -/// @prop - Margin start of the input -$text-input-wp-margin-start: ($item-wp-padding-start / 2) !default; - -/// @prop - Vertical padding of the input -$text-input-wp-padding-vertical: 0 !default; - -/// @prop - Horizontal padding of the input -$text-input-wp-padding-horizontal: 8px !default; - -/// @prop - Line height of the input -$text-input-wp-line-height: 3rem !default; - -/// @prop - Width of the icon used to clear the input -$text-input-wp-input-clear-icon-width: 30px !default; - -/// @prop - Color of the icon used to clear the input -$text-input-wp-input-clear-icon-color: $input-wp-border-color !default; - -/// @prop - Icon used to clear the input -$text-input-wp-input-clear-icon-svg: "" !default; - -/// @prop - Size of the icon used to clear the input -$text-input-wp-input-clear-icon-size: 22px !default; - -/// @prop - Show the focus highlight when the input has focus -$text-input-wp-show-focus-highlight: true !default; - -/// @prop - Show the valid highlight when it is valid and has a value -$text-input-wp-show-valid-highlight: $text-input-wp-show-focus-highlight !default; - -/// @prop - Show the invalid highlight when it is invalid and has value -$text-input-wp-show-invalid-highlight: $text-input-wp-show-focus-highlight !default; - -/// @prop - Color of the input highlight -$text-input-wp-highlight-color: color($colors-wp, primary) !default; - -/// @prop - Color of the input highlight when valid -$text-input-wp-highlight-color-valid: $text-input-highlight-color-valid !default; - -/// @prop - Color of the input highlight when invalid -$text-input-wp-highlight-color-invalid: $text-input-highlight-color-invalid !default; - - -// Windows Default Input -// -------------------------------------------------- - -.text-input-wp { - @include margin($text-input-wp-margin-top, $text-input-wp-margin-end, $text-input-wp-margin-bottom, $text-input-wp-margin-start); - @include padding($text-input-wp-padding-vertical, $text-input-wp-padding-horizontal); - - width: calc(100% - #{$text-input-wp-margin-end} - #{$text-input-wp-margin-start}); - - border: $text-input-wp-border-width solid $text-input-wp-border-color; - line-height: $text-input-wp-line-height; -} - - -// Windows Inset Input -// -------------------------------------------------- - -.item-wp .inset-input { - @include padding(($item-wp-padding-top / 2), ($item-wp-padding-end / 2), ($item-wp-padding-bottom / 2), ($item-wp-padding-start / 2)); - @include margin(($item-wp-padding-top / 2), $item-wp-padding-end, ($item-wp-padding-bottom / 2), $item-wp-padding-start); -} - - -// Windows Highlighted Input -// -------------------------------------------------- - -// Show the focus highlight when the input has focus -@if ($text-input-wp-show-focus-highlight) { - // TODO remove all uses of input-has-focus in v4 - // TODO remove all uses of input-has-value in v4 - .item-wp.item-input.item-input-has-focus .text-input, - .item-wp.item-input.input-has-focus .text-input { - border-color: $text-input-wp-highlight-color; - } -} - -// Show the valid highlight when it has the .ng-valid class and a value -@if ($text-input-wp-show-valid-highlight) { - .item-wp.item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .text-input, - .item-wp.item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .text-input { - border-color: $text-input-wp-highlight-color-valid; - } -} - -// Show the invalid highlight when it has the invalid class and has been touched -@if ($text-input-wp-show-invalid-highlight) { - .item-wp.item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .text-input { - border-color: $text-input-wp-highlight-color-invalid; - } -} - - -// Windows Stacked & Floating Inputs -// -------------------------------------------------- - -.item-label-stacked .text-input-wp, -.item-label-floating .text-input-wp, -.item-label-stacked .select-wp, -.item-label-floating .select-wp { - @include margin(8px, null, 8px, 0); - - width: calc(100% - #{$text-input-wp-margin-end}); -} - -.item-wp.item-label-stacked [slot="end"], -.item-wp.item-label-floating [slot="end"] { - align-self: flex-end; -} - -// Windows Clear Input Icon -// -------------------------------------------------- - -.input-wp[clearInput] { - position: relative; -} - -.input-wp[clearInput] .text-input { - @include padding-horizontal(null, $text-input-wp-input-clear-icon-width); -} - -.input-wp .text-input-clear-icon { - @include position-horizontal(null, ($item-wp-padding-end / 2)); - @include svg-background-image($text-input-wp-input-clear-icon-svg); - - width: $text-input-wp-input-clear-icon-width; - - background-color: transparent; - background-size: $text-input-wp-input-clear-icon-size; -} diff --git a/packages/core/src/components/input/textarea.tsx b/packages/core/src/components/input/textarea.tsx index 9082bf8056..dbb41836f8 100644 --- a/packages/core/src/components/input/textarea.tsx +++ b/packages/core/src/components/input/textarea.tsx @@ -51,8 +51,7 @@ import { TextareaComponent } from './input-base'; tag: 'ion-textarea', styleUrls: { ios: 'input.ios.scss', - md: 'input.md.scss', - wp: 'input.wp.scss' + md: 'input.md.scss' }, host: { theme: 'input' diff --git a/packages/core/src/components/item-divider/item-divider.tsx b/packages/core/src/components/item-divider/item-divider.tsx index 4357f281be..ab06eae92f 100644 --- a/packages/core/src/components/item-divider/item-divider.tsx +++ b/packages/core/src/components/item-divider/item-divider.tsx @@ -5,8 +5,7 @@ import { Component, Prop } from '@stencil/core'; tag: 'ion-item-divider', styleUrls: { ios: 'item-divider.ios.scss', - md: 'item-divider.md.scss', - wp: 'item-divider.wp.scss' + md: 'item-divider.md.scss' }, host: { theme: 'item item-divider' @@ -23,10 +22,10 @@ export class ItemDivider { /** * @input {string} The mode determines which platform styles to use. - * Possible values are: `"ios"`, `"md"`, or `"wp"`. + * Possible values are: `"ios"` or `"md"`. * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ - @Prop() mode: 'ios' | 'md' | 'wp'; + @Prop() mode: 'ios' | 'md'; protected render() { return [ diff --git a/packages/core/src/components/item-divider/item-divider.wp.scss b/packages/core/src/components/item-divider/item-divider.wp.scss deleted file mode 100644 index 512cbc08b4..0000000000 --- a/packages/core/src/components/item-divider/item-divider.wp.scss +++ /dev/null @@ -1,53 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./item-divider"; - -// Windows Item Divider -// -------------------------------------------------- - -/// @prop - Color for the divider -$item-wp-divider-color: $list-wp-text-color !default; - -/// @prop - Background for the divider -$item-wp-divider-background: #fff !default; - -/// @prop - Bodrer bottom for the divider -$item-wp-divider-border-bottom: 1px solid $list-wp-border-color !default; - -/// @prop - Font size for the divider -$item-wp-divider-font-size: 2rem !default; - -/// @prop - Padding start for the divider -$item-wp-divider-padding-start: $item-wp-padding-start !default; - - -// Windows Item Divider -// -------------------------------------------------- - -.item-divider-wp { - @include padding-horizontal($item-wp-divider-padding-start, null); - - border-bottom: $item-wp-divider-border-bottom; - font-size: $item-wp-divider-font-size; - - color: $item-wp-divider-color; - background-color: $item-wp-divider-background; -} - - -// Generate Windows Item Divider Colors -// -------------------------------------------------- - -@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - .item-divider-wp-#{$color-name} { - color: $color-contrast; - background-color: $color-base; - - p { - color: $color-contrast; - } - - &.activated { - background-color: color-shade($color-base); - } - } -} diff --git a/packages/core/src/components/item-sliding/item-option.tsx b/packages/core/src/components/item-sliding/item-option.tsx index e15942f890..c7e5b62f48 100644 --- a/packages/core/src/components/item-sliding/item-option.tsx +++ b/packages/core/src/components/item-sliding/item-option.tsx @@ -23,10 +23,10 @@ export class ItemOption { /** * @input {string} The mode determines which platform styles to use. - * Possible values are: `"ios"`, `"md"`, or `"wp"`. + * Possible values are: `"ios"` or `"md"`. * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ - @Prop() mode: 'ios' | 'md' | 'wp'; + @Prop() mode: 'ios' | 'md'; /** * @input {string} Contains a URL or a URL fragment that the hyperlink points to. diff --git a/packages/core/src/components/item-sliding/item-sliding.tsx b/packages/core/src/components/item-sliding/item-sliding.tsx index 1123f3da42..5eb8727630 100644 --- a/packages/core/src/components/item-sliding/item-sliding.tsx +++ b/packages/core/src/components/item-sliding/item-sliding.tsx @@ -131,8 +131,7 @@ const enum SlidingState { tag: 'ion-item-sliding', styleUrls: { ios: 'item-sliding.ios.scss', - md: 'item-sliding.md.scss', - wp: 'item-sliding.wp.scss' + md: 'item-sliding.md.scss' } }) export class ItemSliding { diff --git a/packages/core/src/components/item-sliding/item-sliding.wp.scss b/packages/core/src/components/item-sliding/item-sliding.wp.scss deleted file mode 100644 index 266c5452c4..0000000000 --- a/packages/core/src/components/item-sliding/item-sliding.wp.scss +++ /dev/null @@ -1,64 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./item-sliding"; - - -// Windows Item Sliding -// -------------------------------------------------- - -/// @prop - Background for the sliding content -$item-wp-sliding-content-background: $list-wp-background-color !default; - -/// @prop - Font size of the sliding option button -$item-wp-sliding-button-font-size: 1.4rem !default; - -/// @prop - Background color of the sliding option button -$item-wp-sliding-button-background-color: color($colors-wp, primary) !default; - -/// @prop - Text color of the sliding option button -$item-wp-sliding-button-text-color: color-contrast($colors-wp, $item-wp-sliding-button-background-color) !default; - -/// @prop - Color of the sliding option button icon -$item-wp-sliding-button-icon-color: color-contrast($colors-wp, $item-wp-sliding-button-background-color) !default; - - -.list-wp ion-item-sliding { - background-color: $item-wp-sliding-content-background; -} - -.list-wp ion-item-options { - border-bottom: 1px solid $list-wp-border-color; -} - -.item-option-wp { - font-size: $item-wp-sliding-button-font-size; - color: $item-wp-sliding-button-text-color; - background-color: $item-wp-sliding-button-background-color; -} - -.item-option-wp .icon { - fill: $item-wp-sliding-button-icon-color; -} - -// Windows No Lines List -// -------------------------------------------------- - -.list-wp[no-lines] ion-item-options { - border-width: 0; -} - - -// Generate Windows Option Button Colors -// -------------------------------------------------- - -@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - - item-option-wp-#{$color-name} { - color: $color-contrast; - background-color: $color-base; - } - - item-option-wp-#{$color-name} .icon { - fill: $color-contrast; - } - -} diff --git a/packages/core/src/components/item/item.tsx b/packages/core/src/components/item/item.tsx index 909a6ba460..ccedb18920 100644 --- a/packages/core/src/components/item/item.tsx +++ b/packages/core/src/components/item/item.tsx @@ -8,8 +8,7 @@ import { CssClassMap } from '../../index'; tag: 'ion-item', styleUrls: { ios: 'item.ios.scss', - md: 'item.md.scss', - wp: 'item.wp.scss' + md: 'item.md.scss' } }) export class Item { @@ -31,10 +30,10 @@ export class Item { /** * @input {string} The mode determines which platform styles to use. - * Possible values are: `"ios"`, `"md"`, or `"wp"`. + * Possible values are: `"ios"` or `"md"`. * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ - @Prop() mode: 'ios' | 'md' | 'wp'; + @Prop() mode: 'ios' | 'md'; /** * @input {string} Contains a URL or a URL fragment that the hyperlink points to. diff --git a/packages/core/src/components/item/item.wp.scss b/packages/core/src/components/item/item.wp.scss deleted file mode 100644 index 07b926625a..0000000000 --- a/packages/core/src/components/item/item.wp.scss +++ /dev/null @@ -1,231 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./item"; - - -// Windows Item -// -------------------------------------------------- - -/// @prop - Font size of the item text -$item-wp-body-text-font-size: 1.4rem !default; - -/// @prop - line height of the item text -$item-wp-body-text-line-height: 1.5 !default; - -/// @prop - Background color of the item -$item-wp-body-background-color: $list-wp-background-color !default; - -/// @prop - Color of the item text -$item-wp-body-text-color: $list-wp-text-color !default; - -/// @prop - Color of the item paragraph -$item-wp-paragraph-text-color: #666 !default; - -/// @prop - Font size of the item -$item-wp-font-size: 1.6rem !default; - -/// @prop - Size of the avatar in the item -$item-wp-avatar-size: 40px !default; - -/// @prop - Border radius of the avatar in the item -$item-wp-avatar-border-radius: 50% !default; - -/// @prop - Size of the thumbnail in the item -$item-wp-thumbnail-size: 80px !default; - -/// @prop - Shows the detail arrow icon on an item -$item-wp-detail-push-show: false !default; - -/// @prop - Color of the detail arrow icon -$item-wp-detail-push-color: $input-wp-border-color !default; - -/// @prop - Icon for the detail arrow -$item-wp-detail-push-svg: "" !default; - - -.item-wp { - @include padding-horizontal($item-wp-padding-start, 0); - - position: relative; - - font-size: $item-wp-font-size; - font-weight: normal; - text-transform: none; - - color: $item-wp-body-text-color; - background-color: $item-wp-body-background-color; - box-shadow: none; -} - -.item-wp.activated { - background-color: $list-wp-activated-background-color; -} - -.item-wp[no-lines] { - border-width: 0; -} - -.item-wp h1 { - @include margin(0, 0, 2px); - - font-size: 2.4rem; - font-weight: normal; -} - -.item-wp h2 { - @include margin(2px, 0); - - font-size: 1.6rem; - font-weight: normal; -} - -.item-wp h3, -.item-wp h4, -.item-wp h5, -.item-wp h6 { - @include margin(2px, 0); - - font-size: 1.4rem; - font-weight: normal; - line-height: normal; -} - -.item-wp p { - @include margin(0, 0, 2px); - - overflow: inherit; - - font-size: 1.4rem; - line-height: normal; - text-overflow: inherit; - color: $item-wp-paragraph-text-color; -} - -.item-wp.item-block .item-inner { - @include padding-horizontal(null, ($item-wp-padding-end / 2)); - - border-bottom: 1px solid $list-wp-border-color; -} - - -// Windows Item Detail Push -// -------------------------------------------------- - -// Only show the forward arrow icon if true -@if $item-wp-detail-push-show == true { - .item-wp[detail-push] .item-inner, - button.item-wp:not([detail-none]) .item-inner, - a.item-wp:not([detail-none]) .item-inner { - @include svg-background-image($item-wp-detail-push-svg, true); - @include padding-horizontal(null, 32px); - @include background-position(end, $item-wp-padding-end - 2, center); - - background-repeat: no-repeat; - background-size: 14px 14px; - } -} - - -// Windows Item Media -// -------------------------------------------------- - -.item-wp [slot="start"], -.item-wp [slot="end"] { - @include margin($item-wp-padding-media-top, ($item-wp-padding-end / 2), $item-wp-padding-media-bottom, 0); -} - -.item-wp ion-icon[slot="start"], -.item-wp ion-icon[slot="end"] { - @include margin($item-wp-padding-icon-top, null, $item-wp-padding-icon-bottom, 0); -} - -.item-wp .item-button { - @include padding(0, .6em); - - height: 25px; - - font-size: 1.2rem; -} - -.item-wp .item-button ion-icon[slot="icon-only"] { - @include padding(0); -} - -.item-wp[text-wrap] ion-label { - font-size: $item-wp-body-text-font-size; - line-height: $item-wp-body-text-line-height; -} - -.item-wp ion-icon[slot="start"] + .item-inner, -.item-wp ion-icon[slot="start"] + .item-input { - @include margin-horizontal(($item-wp-padding-start / 2), null); -} - -.item-wp ion-avatar[slot="start"], -.item-wp ion-thumbnail[slot="start"] { - @include margin(($item-wp-padding-end / 2), $item-wp-padding-end, ($item-wp-padding-end / 2), 0); -} - -.item-wp ion-avatar[slot="end"], -.item-wp ion-thumbnail[slot="end"] { - @include margin($item-wp-padding-end / 2); -} - - -// Windows Item Avatar -// -------------------------------------------------- - -.item-wp ion-avatar { - min-width: $item-wp-avatar-size; - min-height: $item-wp-avatar-size; -} - -.item-wp ion-avatar ion-img, -.item-wp ion-avatar img { - @include border-radius($item-wp-avatar-border-radius); - - overflow: hidden; - - width: $item-wp-avatar-size; - height: $item-wp-avatar-size; -} - - -// Windows Item Thumbnail -// -------------------------------------------------- - -.item-wp ion-thumbnail { - min-width: $item-wp-thumbnail-size; - min-height: $item-wp-thumbnail-size; -} - -.item-wp ion-thumbnail ion-img, -.item-wp ion-thumbnail img { - width: $item-wp-thumbnail-size; - height: $item-wp-thumbnail-size; -} - - -// Generate Windows Item and Item Divider Colors -// -------------------------------------------------- - -@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - // If there is text with a color it should use this color - // and override whatever item sets it to - .item-wp .text-wp-#{$color-name} { - color: $color-base; - } - - .item-wp-#{$color-name}, - .item-divider-wp-#{$color-name} { - color: $color-contrast; - background-color: $color-base; - - p { - color: $color-contrast; - } - - &.activated { - background-color: color-shade($color-base); - } - } -} diff --git a/packages/core/src/components/label/label.tsx b/packages/core/src/components/label/label.tsx index 18657df6af..0e96e31e30 100644 --- a/packages/core/src/components/label/label.tsx +++ b/packages/core/src/components/label/label.tsx @@ -5,8 +5,7 @@ import { Component, Element, Event, EventEmitter, Method, Prop } from '@stencil/ tag: 'ion-label', styleUrls: { ios: 'label.ios.scss', - md: 'label.md.scss', - wp: 'label.wp.scss' + md: 'label.md.scss' }, host: { theme: 'label' @@ -31,10 +30,10 @@ export class Label { /** * @input {string} The mode determines which platform styles to use. - * Possible values are: `"ios"`, `"md"`, or `"wp"`. + * Possible values are: `"ios"` or `"md"`. * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ - @Prop() mode: 'ios' | 'md' | 'wp'; + @Prop() mode: 'ios' | 'md'; /** * @output {Event} If true, the label will sit alongside an input. Defaults to `false`. diff --git a/packages/core/src/components/label/label.wp.scss b/packages/core/src/components/label/label.wp.scss deleted file mode 100644 index cd3d7a0d15..0000000000 --- a/packages/core/src/components/label/label.wp.scss +++ /dev/null @@ -1,84 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./label"; - - -// Windows Label -// -------------------------------------------------- - -/// @prop - Text color of the label by an input, select, or datetime -$label-wp-text-color: #999 !default; - -/// @prop - Text color of the stacked/floating label when it is focused -$label-wp-text-color-focused: color($colors-wp, primary) !default; - - -// Windows Default Label -// -------------------------------------------------- - -.label-wp { - @include margin($item-wp-padding-top, ($item-wp-padding-end / 2), $item-wp-padding-bottom, 0); -} - - -// Windows Default Label Inside An Input/Select Item -// -------------------------------------------------- - -.item-input .label-wp, -.item-select .label-wp, -.item-datetime .label-wp { - color: $label-wp-text-color; -} - - -// Windows Stacked & Floating Labels -// -------------------------------------------------- - -.label-wp[stacked] { - font-size: 1.2rem; -} - -.label-wp[floating] { - @include transform(translate3d(8px, 34px, 0)); - @include transform-origin(start, top); -} - -.label-wp[stacked], -.label-wp[floating] { - @include margin(null, null, 0, 0); -} - -// TODO remove all uses of input-has-focus in v4 -// TODO remove all uses of input-has-value in v4 -.item-input-has-focus .label-wp[stacked], -.input-has-focus .label-wp[stacked], -.item-input-has-focus .label-wp[floating], -.input-has-focus .label-wp[floating] { - color: $label-wp-text-color-focused; -} - -.item-input-has-focus .label-wp[floating], -.input-has-focus .label-wp[floating], -.item-input-has-value .label-wp[floating], -.input-has-value .label-wp[floating] { - @include transform(translate3d(0, 0, 0), scale(.8)); -} - -.item-wp.item-label-stacked [slot="end"], -.item-wp.item-label-floating [slot="end"] { - @include margin($item-wp-padding-media-top + 4, null, $item-wp-padding-media-top + 4, null); -} - - -// Generate Windows Label colors -// -------------------------------------------------- - -@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - - .label-wp-#{$color-name}, - .item-input .label-wp-#{$color-name}, - .item-select .label-wp-#{$color-name}, - .item-datetime .label-wp-#{$color-name} { - color: $color-base; - } - -} diff --git a/packages/core/src/components/list-header/list-header.tsx b/packages/core/src/components/list-header/list-header.tsx index d675852bba..3e80f41a30 100644 --- a/packages/core/src/components/list-header/list-header.tsx +++ b/packages/core/src/components/list-header/list-header.tsx @@ -5,8 +5,7 @@ import { Component, Prop } from '@stencil/core'; tag: 'ion-list-header', styleUrls: { ios: 'list-header.ios.scss', - md: 'list-header.md.scss', - wp: 'list-header.wp.scss' + md: 'list-header.md.scss' }, host: { theme: 'list-header' @@ -23,10 +22,10 @@ export class ListHeader { /** * @input {string} The mode determines which platform styles to use. - * Possible values are: `"ios"`, `"md"`, or `"wp"`. + * Possible values are: `"ios"` or `"md"`. * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ - @Prop() mode: 'ios' | 'md' | 'wp'; + @Prop() mode: 'ios' | 'md'; protected render() { return ; diff --git a/packages/core/src/components/list-header/list-header.wp.scss b/packages/core/src/components/list-header/list-header.wp.scss deleted file mode 100644 index ca70876668..0000000000 --- a/packages/core/src/components/list-header/list-header.wp.scss +++ /dev/null @@ -1,37 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./list-header"; - -// Windows List Header -// -------------------------------------------------- - -/// @prop - Padding start of the header in a list -$list-wp-header-padding-start: $item-wp-padding-start !default; - -/// @prop - Border bottom of the header in a list -$list-wp-header-border-bottom: 1px solid $list-wp-border-color !default; - -/// @prop - Font size of the header in a list -$list-wp-header-font-size: 2rem !default; - -/// @prop - Text color of the header in a list -$list-wp-header-color: $list-wp-text-color !default; - - -.list-header-wp { - @include padding-horizontal($list-wp-header-padding-start, null); - - border-bottom: $list-wp-header-border-bottom; - font-size: $list-wp-header-font-size; - color: $list-wp-header-color; -} - - -// Generate Windows List Header Colors -// -------------------------------------------------- - -@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - .list-header-wp-#{$color-name} { - color: $color-contrast; - background-color: $color-base; - } -} diff --git a/packages/core/src/components/list/list.tsx b/packages/core/src/components/list/list.tsx index c74cee382e..16744cb898 100644 --- a/packages/core/src/components/list/list.tsx +++ b/packages/core/src/components/list/list.tsx @@ -7,8 +7,7 @@ import { ItemSliding } from '../item-sliding/item-sliding'; tag: 'ion-list', styleUrls: { ios: 'list.ios.scss', - md: 'list.md.scss', - wp: 'list.wp.scss' + md: 'list.md.scss' }, host: { theme: 'list' diff --git a/packages/core/src/components/list/list.wp.scss b/packages/core/src/components/list/list.wp.scss deleted file mode 100644 index 4ecc7a9426..0000000000 --- a/packages/core/src/components/list/list.wp.scss +++ /dev/null @@ -1,124 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./list"; - - -// Windows List -// -------------------------------------------------- - -/// @prop - Margin top of the list -$list-wp-margin-top: 16px !default; - -/// @prop - Margin end of the list -$list-wp-margin-end: 0 !default; - -/// @prop - Margin bottom of the list -$list-wp-margin-bottom: 16px !default; - -/// @prop - Margin start of the list -$list-wp-margin-start: 0 !default; - -/// @prop - Margin top of the inset list -$list-inset-wp-margin-top: 16px !default; - -/// @prop - Margin end of the inset list -$list-inset-wp-margin-end: 16px !default; - -/// @prop - Margin bottom of the inset list -$list-inset-wp-margin-bottom: 16px !default; - -/// @prop - Margin start of the inset list -$list-inset-wp-margin-start: 16px !default; - -/// @prop - Border radius of the inset list -$list-inset-wp-border-radius: 2px !default; - - -// Windows Default List -// -------------------------------------------------- - -.list-wp { - @include margin(0, $list-wp-margin-end, $list-wp-margin-bottom, $list-wp-margin-start); -} - -.list-wp .item-block .item-inner { - border-bottom: 1px solid $list-wp-border-color; -} - -.list-wp > .item-block:first-child, -.list-wp > .item-wrapper:first-child .item-block { - border-top: 1px solid $list-wp-border-color; -} - -.list-wp > .item-block:last-child, -.list-wp > .item-wrapper:last-child .item-block { - border-bottom: 1px solid $list-wp-border-color; -} - -.list-wp > .item-block:last-child, -.list-wp > .item-wrapper:last-child { - ion-label, - .item-inner { - border-bottom: 0; - } -} - -.list-wp > ion-input:last-child::after { - @include position-horizontal(0, null); -} - - - -// 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) -.list-wp .item[no-lines], -.list-wp .item[no-lines] .item-inner { - border-width: 0; -} - -.list-wp + ion-list ion-list-header { - @include margin(-$list-wp-margin-top, null, null, null); - @include padding(0, null, null, null); -} - - -// Windows Insert List -// -------------------------------------------------- - -.list-wp[inset] { - @include margin($list-inset-wp-margin-top, $list-inset-wp-margin-end, $list-inset-wp-margin-bottom, $list-inset-wp-margin-start); - @include border-radius($list-inset-wp-border-radius); -} - -.list-wp[inset] .item:first-child { - @include border-radius($list-inset-wp-border-radius, $list-inset-wp-border-radius, null, null); - - border-top-width: 0; -} - -.list-wp[inset] .item:last-child { - @include border-radius(null, null, $list-inset-wp-border-radius, $list-inset-wp-border-radius); - - border-bottom-width: 0; -} - -.list-wp[inset] .item-input { - @include padding-horizontal(0); -} - -.list-wp[inset] + ion-list[inset] { - @include margin(0, null, null, null); -} - -.list-wp[inset] ion-list-header { - background-color: $list-wp-background-color; -} - - -// Windows No Lines List -// -------------------------------------------------- - -.list-wp[no-lines] .item, -.list-wp[no-lines] .item .item-inner { - border-width: 0; -} diff --git a/packages/core/src/components/loading/loading.tsx b/packages/core/src/components/loading/loading.tsx index 5f916d8283..21b52363c9 100644 --- a/packages/core/src/components/loading/loading.tsx +++ b/packages/core/src/components/loading/loading.tsx @@ -9,8 +9,7 @@ import iOSLeaveAnimation from './animations/ios.leave'; tag: 'ion-loading', styleUrls: { ios: 'loading.ios.scss', - md: 'loading.md.scss', - wp: 'loading.wp.scss' + md: 'loading.md.scss' }, host: { theme: 'loading' @@ -160,8 +159,6 @@ export class Loading { if (this.mode === 'md') { defaultSpinner = 'crescent'; - } else if (this.mode === 'wp') { - defaultSpinner = 'circles'; } this.spinner = this.config.get('loadingSpinner') || defaultSpinner; diff --git a/packages/core/src/components/loading/loading.wp.scss b/packages/core/src/components/loading/loading.wp.scss deleted file mode 100644 index 61841f254b..0000000000 --- a/packages/core/src/components/loading/loading.wp.scss +++ /dev/null @@ -1,97 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./loading"; - - -// Windows Loading Indicator -// -------------------------------------------------- - -/// @prop - Padding top of the loading wrapper -$loading-wp-padding-top: 20px !default; - -/// @prop - Padding end of the loading wrapper -$loading-wp-padding-end: $loading-wp-padding-top !default; - -/// @prop - Padding bottom of the loading wrapper -$loading-wp-padding-bottom: $loading-wp-padding-top !default; - -/// @prop - Padding start of the loading wrapper -$loading-wp-padding-start: $loading-wp-padding-end !default; - -/// @prop - Max width of the loading wrapper -$loading-wp-max-width: 280px !default; - -/// @prop - Maximum height of the loading wrapper -$loading-wp-max-height: 90% !default; - -/// @prop - Border radius of the loading wrapper -$loading-wp-border-radius: 2px !default; - -/// @prop - Text color of the loading wrapper -$loading-wp-text-color: #fff !default; - -/// @prop - Background of the loading wrapper -$loading-wp-background: #000 !default; - -/// @prop - Color of the loading spinner -$loading-wp-spinner-color: $loading-wp-text-color !default; - -/// @prop - Color of the ios loading spinner -$loading-wp-spinner-ios-color: $loading-wp-spinner-color !default; - -/// @prop - Color of the bubbles loading spinner -$loading-wp-spinner-bubbles-color: $loading-wp-spinner-color !default; - -/// @prop - Color of the circles loading spinner -$loading-wp-spinner-circles-color: $loading-wp-spinner-color !default; - -/// @prop - Color of the crescent loading spinner -$loading-wp-spinner-crescent-color: $loading-wp-spinner-color !default; - -/// @prop - Color of the dots loading spinner -$loading-wp-spinner-dots-color: $loading-wp-spinner-color !default; - - -.loading-wp .loading-wrapper { - @include border-radius($loading-wp-border-radius); - - @include padding($loading-wp-padding-top, $loading-wp-padding-end, $loading-wp-padding-bottom, $loading-wp-padding-start); - - max-width: $loading-wp-max-width; - max-height: $loading-wp-max-height; - - color: $loading-wp-text-color; - background: $loading-wp-background; -} - - -// Windows Loading Content -// ----------------------------------------- - -.loading-wp .loading-spinner + .loading-content { - @include margin-horizontal(16px, null); -} - - -// Windows Loading Spinner fill colors -// ----------------------------------------- - -.loading-wp .spinner-ios line, -.loading-wp .spinner-ios-small line { - stroke: $loading-wp-spinner-ios-color; -} - -.loading-wp .spinner-bubbles circle { - fill: $loading-wp-spinner-bubbles-color; -} - -.loading-wp .spinner-circles circle { - fill: $loading-wp-spinner-circles-color; -} - -.loading-wp .spinner-crescent circle { - stroke: $loading-wp-spinner-crescent-color; -} - -.loading-wp .spinner-dots circle { - fill: $loading-wp-spinner-dots-color; -} diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx index c031a08741..1e3dd31a3e 100644 --- a/packages/core/src/components/menu/menu.tsx +++ b/packages/core/src/components/menu/menu.tsx @@ -6,8 +6,7 @@ import { Side, assert, checkEdgeSide, isRightSide } from '../../utils/helpers'; tag: 'ion-menu', styleUrls: { ios: 'menu.ios.scss', - md: 'menu.md.scss', - wp: 'menu.wp.scss' + md: 'menu.md.scss' }, host: { theme: 'menu' diff --git a/packages/core/src/components/menu/menu.wp.scss b/packages/core/src/components/menu/menu.wp.scss deleted file mode 100644 index 97f6c005fb..0000000000 --- a/packages/core/src/components/menu/menu.wp.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./menu"; - - -// Windows Menu -// -------------------------------------------------- - -/// @prop - Background of the menu -$menu-wp-background: #f2f2f2 !default; - - -.menu-wp .menu-inner { - background: $menu-wp-background; -} diff --git a/packages/core/src/components/modal/modal.tsx b/packages/core/src/components/modal/modal.tsx index 9bbfd5b142..0dc0c6f487 100644 --- a/packages/core/src/components/modal/modal.tsx +++ b/packages/core/src/components/modal/modal.tsx @@ -10,8 +10,7 @@ import iOSLeaveAnimation from './animations/ios.leave'; tag: 'ion-modal', styleUrls: { ios: 'modal.ios.scss', - md: 'modal.md.scss', - wp: 'modal.wp.scss' + md: 'modal.md.scss' }, host: { theme: 'modal' diff --git a/packages/core/src/components/modal/modal.wp.scss b/packages/core/src/components/modal/modal.wp.scss deleted file mode 100644 index 6b36281214..0000000000 --- a/packages/core/src/components/modal/modal.wp.scss +++ /dev/null @@ -1,16 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./modal"; - - -// Windows Modals -// -------------------------------------------------- - -/// @prop - Background color for the modal -$modal-wp-background-color: $background-wp-color !default; - - -.modal-wrapper-wp { - @include transform(translate3d(0, 40px, 0)); - - opacity: .01; -} diff --git a/packages/core/src/components/note/note.tsx b/packages/core/src/components/note/note.tsx index 089e3e9eff..a73beb336c 100644 --- a/packages/core/src/components/note/note.tsx +++ b/packages/core/src/components/note/note.tsx @@ -32,8 +32,7 @@ import { Component, Prop } from '@stencil/core'; tag: 'ion-note', styleUrls: { ios: 'note.ios.scss', - md: 'note.md.scss', - wp: 'note.wp.scss' + md: 'note.md.scss' }, host: { theme: 'note' @@ -50,10 +49,10 @@ export class Note { /** * @input {string} The mode determines which platform styles to use. - * Possible values are: `"ios"`, `"md"`, or `"wp"`. + * Possible values are: `"ios"` or `"md"`. * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ - @Prop() mode: 'ios' | 'md' | 'wp'; + @Prop() mode: 'ios' | 'md'; protected render() { return ; diff --git a/packages/core/src/components/note/note.wp.scss b/packages/core/src/components/note/note.wp.scss deleted file mode 100644 index d6076240cd..0000000000 --- a/packages/core/src/components/note/note.wp.scss +++ /dev/null @@ -1,24 +0,0 @@ -@import "../../themes/ionic.globals.wp"; - -// Windows Note -// -------------------------------------------------- - -/// @prop - Text color of the note -$note-wp-color: $input-wp-border-color !default; - - -.note-wp { - color: $note-wp-color; -} - - -// Generate Windows Note Colors -// -------------------------------------------------- - -@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - - .note-wp-#{$color-name} { - color: $color-base; - } - -} diff --git a/packages/core/src/components/picker/picker.tsx b/packages/core/src/components/picker/picker.tsx index 7aa91d4ab0..6d6878573d 100644 --- a/packages/core/src/components/picker/picker.tsx +++ b/packages/core/src/components/picker/picker.tsx @@ -9,8 +9,7 @@ import iOSLeaveAnimation from './animations/ios.leave'; tag: 'ion-picker', styleUrls: { ios: 'picker.ios.scss', - md: 'picker.md.scss', - wp: 'picker.wp.scss' + md: 'picker.md.scss' }, host: { theme: 'picker' @@ -165,8 +164,6 @@ export class Picker { if (this.mode === 'md') { defaultSpinner = 'crescent'; - } else if (this.mode === 'wp') { - defaultSpinner = 'circles'; } this.spinner = this.config.get('pickerSpinner') || defaultSpinner; diff --git a/packages/core/src/components/picker/picker.wp.scss b/packages/core/src/components/picker/picker.wp.scss deleted file mode 100644 index ea9023912a..0000000000 --- a/packages/core/src/components/picker/picker.wp.scss +++ /dev/null @@ -1,201 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./picker"; - - -// Windows Picker -// -------------------------------------------------- - -/// @prop - Height of the picker wrapper -$picker-wp-height: 260px !default; - -/// @prop - Border color of the picker wrapper -$picker-wp-border-color: $list-wp-border-color !default; - -/// @prop - Background of the picker wrapper -$picker-wp-background-color: $list-wp-background-color !default; - -/// @prop - Height of the picker toolbar -$picker-wp-toolbar-height: 44px !default; - -/// @prop - Background of the picker toolbar -$picker-wp-toolbar-background-color: $picker-wp-background-color !default; - -/// @prop - Height of the picker button -$picker-wp-button-height: $picker-wp-toolbar-height !default; - -/// @prop - Text color of the picker button -$picker-wp-button-text-color: color($colors-wp, primary) !default; - -/// @prop - Background of the picker button -$picker-wp-button-background-color: transparent !default; - -/// @prop - Padding top of the picker column -$picker-wp-column-padding-top: 0 !default; - -/// @prop - Padding end of the picker column -$picker-wp-column-padding-end: 4px !default; - -/// @prop - Padding bottom of the picker column -$picker-wp-column-padding-bottom: $picker-wp-column-padding-top !default; - -/// @prop - Padding start of the picker column -$picker-wp-column-padding-start: $picker-wp-column-padding-end !default; - -/// @prop - Padding top of the picker option -$picker-wp-option-padding-top: 0 !default; - -/// @prop - Padding end of the picker option -$picker-wp-option-padding-end: $picker-wp-option-padding-top !default; - -/// @prop - Padding bottom of the picker option -$picker-wp-option-padding-bottom: $picker-wp-option-padding-top !default; - -/// @prop - Padding start of the picker option -$picker-wp-option-padding-start: $picker-wp-option-padding-end !default; - -/// @prop - Text color of the picker option -$picker-wp-option-text-color: $list-wp-text-color !default; - -/// @prop - Font size of the picker option -$picker-wp-option-font-size: 22px !default; - -/// @prop - Height of the picker option -$picker-wp-option-height: 42px !default; - -/// @prop - Offset y of the picker option -$picker-wp-option-offset-y: (($picker-wp-height - $picker-wp-toolbar-height) / 2) - ($picker-wp-option-height / 2) - 10 !default; - -/// @prop - Text color of the selected picker option -$picker-wp-option-selected-color: color($colors-wp, primary) !default; - - -.picker-wp .picker-wrapper { - height: $picker-wp-height; - - border-top: $hairlines-width solid $picker-wp-border-color; - - background: $picker-wp-background-color; -} - -.picker-wp .picker-toolbar { - display: flex; - - justify-content: flex-end; - - height: $picker-wp-toolbar-height; - - border-width: $hairlines-width; - - background: $picker-wp-toolbar-background-color; -} - -.picker-wp .picker-toolbar-button { - @include text-align(end); - - flex: 1; -} - -.picker-wp .picker-toolbar-cancel { - @include text-align(start); - - font-weight: normal; -} - -.picker-wp .picker-button, -.picker-wp .picker-button.activated { - @include margin(0); - - height: $picker-wp-button-height; - - color: $picker-wp-button-text-color; - background: $picker-wp-button-background-color; - - box-shadow: none; -} - -.picker-wp .picker-columns { - height: $picker-wp-height - $picker-wp-toolbar-height; - - perspective: 1800px; -} - -.picker-wp .picker-col { - @include padding($picker-wp-column-padding-top, $picker-wp-column-padding-end, $picker-wp-column-padding-bottom, $picker-wp-column-padding-start); - - transform-style: preserve-3d; -} - -.picker-wp .picker-prefix, -.picker-wp .picker-suffix, -.picker-wp .picker-opts { - top: $picker-wp-option-offset-y; - - font-size: $picker-wp-option-font-size; - line-height: $picker-wp-option-height; - color: $picker-wp-option-text-color; - - transform-style: preserve-3d; - - pointer-events: none; -} - -.picker-wp .picker-opt { - @include margin(0); - @include padding($picker-wp-option-padding-top, $picker-wp-option-padding-end, $picker-wp-option-padding-bottom, $picker-wp-option-padding-start); - - height: 4.2rem; - - font-size: $picker-wp-option-font-size; - line-height: $picker-wp-option-height; - color: $picker-wp-option-text-color; - - background: transparent; - - transition-timing-function: ease-out; - - backface-visibility: hidden; - - pointer-events: auto; -} - -.picker-wp .picker-prefix, -.picker-wp .picker-suffix, -.picker-wp .picker-opt-selected { - color: $picker-wp-option-selected-color; -} - -.picker-wp .picker-above-highlight { - @include position(0, null, null, 0); - @include transform(translate3d(0, 0, 90px)); - - position: absolute; - - z-index: 10; - - width: 100%; - height: $picker-wp-option-offset-y + 4px; - - border-bottom: 1px solid $picker-wp-border-color; - - background: linear-gradient(to bottom, - rgba($picker-wp-background-color, 1) 20%, - rgba($picker-wp-background-color, .7) 100%); -} - -.picker-wp .picker-below-highlight { - @include position($picker-wp-option-offset-y + $picker-wp-option-height - 4, null, null, 0); - @include transform(translate3d(0, 0, 90px)); - - position: absolute; - - z-index: 11; - - width: 100%; - height: $picker-wp-option-offset-y + $picker-wp-option-height; - - border-top: 1px solid $picker-wp-border-color; - - background: linear-gradient(to top, - rgba($picker-wp-background-color, 1) 30%, - rgba($picker-wp-background-color, .7) 100%); -} \ No newline at end of file diff --git a/packages/core/src/components/popover/popover.tsx b/packages/core/src/components/popover/popover.tsx index f78a6050d9..f5e04d9ead 100644 --- a/packages/core/src/components/popover/popover.tsx +++ b/packages/core/src/components/popover/popover.tsx @@ -10,8 +10,7 @@ import iOSLeaveAnimation from './animations/ios.leave'; tag: 'ion-popover', styleUrls: { ios: 'popover.ios.scss', - md: 'popover.md.scss', - wp: 'popover.wp.scss' + md: 'popover.md.scss' }, host: { theme: 'popover' @@ -345,11 +344,5 @@ export const POPOVER_POSITION_PROPERTIES: any = { unit: 'px', showArrow: false, centerTarget: false - }, - wp: { - padding: 12, - unit: 'px', - showArrow: false, - centerTarget: false } }; diff --git a/packages/core/src/components/popover/popover.wp.scss b/packages/core/src/components/popover/popover.wp.scss deleted file mode 100644 index f364bee679..0000000000 --- a/packages/core/src/components/popover/popover.wp.scss +++ /dev/null @@ -1,48 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./popover"; - -// Windows Popover -// -------------------------------------------------- - -/// @prop - Width of the popover content -$popover-wp-width: 200px !default; - -/// @prop - Min width of the popover content -$popover-wp-min-width: 0 !default; - -/// @prop - Minimum height of the popover content -$popover-wp-min-height: 0 !default; - -/// @prop - Maximum height of the popover content -$popover-wp-max-height: 90% !default; - -/// @prop - Border of the popover content -$popover-wp-border: 2px solid #ccc !default; - -/// @prop - Border radius of the popover content -$popover-wp-border-radius: 0 !default; - -/// @prop - Text color of the popover content -$popover-wp-text-color: $text-wp-color !default; - -/// @prop - Background of the popover content -$popover-wp-background: $background-wp-color !default; - - -.popover-wp .popover-content { - @include border-radius($popover-wp-border-radius); - @include transform-origin(start, top); - - width: $popover-wp-width; - min-width: $popover-wp-min-width; - min-height: $popover-wp-min-height; - max-height: $popover-wp-max-height; - - border: $popover-wp-border; - color: $popover-wp-text-color; - background: $popover-wp-background; -} - -.popover-wp .popover-viewport { - transition-delay: 100ms; -} diff --git a/packages/core/src/components/radio/radio.tsx b/packages/core/src/components/radio/radio.tsx index ec6da34952..a7fb69cfcd 100644 --- a/packages/core/src/components/radio/radio.tsx +++ b/packages/core/src/components/radio/radio.tsx @@ -42,8 +42,7 @@ import { createThemedClasses } from '../../utils/theme'; tag: 'ion-radio', styleUrls: { ios: 'radio.ios.scss', - md: 'radio.md.scss', - wp: 'radio.wp.scss' + md: 'radio.md.scss' }, host: { theme: 'radio' @@ -96,10 +95,10 @@ export class Radio { /** * @input {string} The mode determines which platform styles to use. - * Possible values are: `"ios"`, `"md"`, or `"wp"`. + * Possible values are: `"ios"` or `"md"`. * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ - @Prop() mode: 'ios' | 'md' | 'wp'; + @Prop() mode: 'ios' | 'md'; /** * @input {boolean} If true, the radio is selected. Defaults to `false`. diff --git a/packages/core/src/components/radio/radio.wp.scss b/packages/core/src/components/radio/radio.wp.scss deleted file mode 100644 index 667ede8eef..0000000000 --- a/packages/core/src/components/radio/radio.wp.scss +++ /dev/null @@ -1,159 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./radio"; - -// Windows Radio -// -------------------------------------------------- - -/// @prop - Color of the checked radio -$radio-wp-color-on: color($colors-wp, primary) !default; - -/// @prop - Color of the unchecked radio -$radio-wp-color-off: #333 !default; - -/// @prop - Width of the radio icon -$radio-wp-icon-width: 16px !default; - -/// @prop - Height of the radio icon -$radio-wp-icon-height: 16px !default; - -/// @prop - Border width of the radio icon -$radio-wp-icon-border-width: 2px !default; - -/// @prop - Border style of the radio icon -$radio-wp-icon-border-style: solid !default; - -/// @prop - Border radius of the radio icon -$radio-wp-icon-border-radius: 50% !default; - -/// @prop - Opacity of the disabled radio -$radio-wp-disabled-opacity: .3 !default; - -/// @prop - Margin top of the item-start in a radio -$radio-wp-item-start-margin-top: 9px !default; - -/// @prop - Margin end of the item-start in a radio -$radio-wp-item-start-margin-end: 20px !default; - -/// @prop - Margin bottom of the item-start in a radio -$radio-wp-item-start-margin-bottom: 9px !default; - -/// @prop - Margin start of the item-start in a radio -$radio-wp-item-start-margin-start: 4px !default; - -/// @prop - Margin top of the item-end in a radio -$radio-wp-item-end-margin-top: 11px !default; - -/// @prop - Margin end of the item-end in a radio -$radio-wp-item-end-margin-end: 10px !default; - -/// @prop - Margin bottom of the item-end in a radio -$radio-wp-item-end-margin-bottom: 10px !default; - -/// @prop - Margin start of the item-end in a radio -$radio-wp-item-end-margin-start: 0 !default; - - -// Windows Radio Outer Circle: Unchecked -// ----------------------------------------- - -.radio-wp .radio-icon { - @include position(0, null, null, 0); - @include margin(0); - @include border-radius($radio-wp-icon-border-radius); - - position: relative; - - display: block; - - width: $radio-wp-icon-width; - height: $radio-wp-icon-height; - - border-width: $radio-wp-icon-border-width; - border-style: $radio-wp-icon-border-style; - border-color: $radio-wp-color-off; -} - - -// Windows Radio Inner Circle: Unchecked -// ----------------------------------------- - -.radio-wp .radio-inner { - @include position($radio-wp-icon-border-width, null, null, $radio-wp-icon-border-width); - @include border-radius(50%); - - position: absolute; - - display: none; - - width: $radio-wp-icon-width / 2; - height: $radio-wp-icon-height / 2; - - background-color: $radio-wp-color-off; -} - - -// Windows Radio Outer Circle: Checked -// ----------------------------------------- - -.radio-wp .radio-checked { - border-color: $radio-wp-color-on; -} - - -// Windows Radio Inner Circle: Checked -// ----------------------------------------- - -.radio-wp .radio-checked .radio-inner { - // transform: scale3d(1, 1, 1); - display: block; -} - - -// Windows Radio: Disabled -// ----------------------------------------- - -.radio-wp.radio-disabled, -.item-wp.item-radio-disabled ion-label { - opacity: $radio-wp-disabled-opacity; - - pointer-events: none; -} - - -// Windows Radio Within An Item -// ----------------------------------------- - -.item-wp .radio-wp { - @include margin($radio-wp-item-start-margin-top, $radio-wp-item-start-margin-end, $radio-wp-item-start-margin-bottom, $radio-wp-item-start-margin-start); - - position: static; - display: block; - - &[slot="end"] { - @include margin($radio-wp-item-end-margin-top, $radio-wp-item-end-margin-end, $radio-wp-item-end-margin-bottom, $radio-wp-item-end-margin-start); - } -} - -.item-radio.item-wp ion-label { - @include margin-horizontal(0, null); -} - - -// Windows Radio Color Mixin -// -------------------------------------------------- - -@mixin radio-theme-wp($color-name, $color-base) { - - .radio-wp-#{$color-name} .radio-checked { - border-color: $color-base; - } - -} - - -// Generate Windows Radio Colors -// -------------------------------------------------- - -@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - @include radio-theme-wp($color-name, $color-base); -} diff --git a/packages/core/src/components/range/range.tsx b/packages/core/src/components/range/range.tsx index 6e62aadb99..844666df48 100644 --- a/packages/core/src/components/range/range.tsx +++ b/packages/core/src/components/range/range.tsx @@ -6,8 +6,7 @@ import { clamp } from '../../utils/helpers'; tag: 'ion-range', styleUrls: { ios: 'range.ios.scss', - md: 'range.md.scss', - wp: 'range.wp.scss' + md: 'range.md.scss' }, host: { theme: 'range' @@ -68,10 +67,10 @@ export class Range implements BaseInputComponent { /** * @input {string} The mode determines which platform styles to use. - * Possible values are: `"ios"`, `"md"`, or `"wp"`. + * Possible values are: `"ios"` or `"md"`. * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ - @Prop() mode: 'ios' | 'md' | 'wp'; + @Prop() mode: 'ios' | 'md'; /** * @input {number} How long, in milliseconds, to wait to trigger the diff --git a/packages/core/src/components/range/range.wp.scss b/packages/core/src/components/range/range.wp.scss deleted file mode 100644 index 93fa1826ce..0000000000 --- a/packages/core/src/components/range/range.wp.scss +++ /dev/null @@ -1,223 +0,0 @@ -@import "../../themes/ionic.globals.wp"; - -// Windows Range -// -------------------------------------------------- - -/// @prop - Padding top/bottom of the range -$range-wp-padding-vertical: 8px !default; - -/// @prop - Padding start/end of the range -$range-wp-padding-horizontal: 8px !default; - -/// @prop - Height of the range slider -$range-wp-slider-height: 42px !default; - -/// @prop - Width of the area that will select the range knob -$range-wp-hit-width: 42px !default; - -/// @prop - Height of the area that will select the range knob -$range-wp-hit-height: $range-wp-slider-height !default; - -/// @prop - Height of the range bar -$range-wp-bar-height: 2px !default; - -/// @prop - Background of the range bar -$range-wp-bar-background-color: #bdbdbd !default; - -/// @prop - Background of the active range bar -$range-wp-bar-active-background-color: color($colors-wp, primary) !default; - -/// @prop - Width of the range knob -$range-wp-knob-width: 8px !default; - -/// @prop - Height of the range knob -$range-wp-knob-height: $range-wp-knob-width * 3 !default; - -/// @prop - Background of the range knob -$range-wp-knob-background-color: $range-wp-bar-active-background-color !default; - -/// @prop - Border radius of the range knob -$range-wp-knob-border-radius: $range-wp-knob-width / 2 !default; - -/// @prop - Width of the range tick -$range-wp-tick-width: $range-wp-bar-height !default; - -/// @prop - Height of the range tick -$range-wp-tick-height: $range-wp-tick-width * 3 !default; - -/// @prop - Border radius of the range tick -$range-wp-tick-border-radius: $range-wp-knob-width / 2 !default; - -/// @prop - Background of the range tick -$range-wp-tick-background-color: $range-wp-bar-background-color !default; - -/// @prop - Background of the active range tick -$range-wp-tick-active-background-color: $range-wp-bar-active-background-color !default; - -/// @prop - Background of the range pin -$range-wp-pin-background-color: $range-wp-bar-active-background-color !default; - -/// @prop - Color of the range pin -$range-wp-pin-color: color-contrast($colors-wp, $range-wp-bar-active-background-color) !default; - -/// @prop - Font size of the range pin -$range-wp-pin-font-size: 12px !default; - -// deprecated -$range-wp-pin-padding: null !default; - -/// @prop - Padding top of the range pin -$range-wp-pin-padding-top: 8px !default; - -/// @prop - Padding end of the range pin -$range-wp-pin-padding-end: $range-wp-pin-padding-top !default; - -/// @prop - Padding bottom of the range pin -$range-wp-pin-padding-bottom: $range-wp-pin-padding-top !default; - -/// @prop - Padding start of the range pin -$range-wp-pin-padding-start: $range-wp-pin-padding-end !default; - - -.range-wp { - @include padding($range-wp-padding-vertical, $range-wp-padding-horizontal); -} - -.range-wp [range-left] { - @include margin(0, 12px, 0, 0); -} - -.range-wp [range-right] { - @include margin(0, 0, 0, 12px); -} - -.range-wp.range-has-pin { - @include padding($range-wp-padding-vertical + $range-wp-pin-font-size + $range-wp-pin-padding-top, null, null, null); -} - -.range-wp .range-slider { - height: $range-wp-slider-height; -} - -.range-wp .range-bar { - @include position(($range-wp-slider-height / 2), null, null, 0); - - position: absolute; - - width: 100%; - height: $range-wp-bar-height; - - background: $range-wp-bar-background-color; - - pointer-events: none; -} - -.range-wp.range-pressed .range-bar-active { - will-change: left, right; -} - -.range-wp.range-pressed .range-knob-handle { - will-change: left; -} - -.range-wp .range-bar-active { - bottom: 0; - - width: auto; - - background: $range-wp-bar-active-background-color; -} - -.range-wp .range-knob-handle { - @include position(($range-wp-slider-height / 2), null, null, 0); - @include margin(-($range-wp-hit-height / 2), null, null, -($range-wp-hit-width / 2)); - @include text-align(center); - - position: absolute; - - width: $range-wp-hit-width; - height: $range-wp-hit-height; -} - -.range-wp .range-knob { - @include position(($range-wp-hit-height / 2) - ($range-wp-knob-height / 2) + ($range-wp-bar-height / 2), - null, null, ($range-wp-hit-width / 2) - ($range-wp-knob-width / 2)); - @include border-radius($range-wp-knob-border-radius); - - position: absolute; - - width: $range-wp-knob-width; - height: $range-wp-knob-height; - - background: $range-wp-knob-background-color; - - pointer-events: none; -} - -.range-wp .range-tick { - @include margin-horizontal(-($range-wp-tick-width / 2), null); - @include border-radius($range-wp-tick-border-radius); - - position: absolute; - top: ($range-wp-hit-height / 2) - ($range-wp-tick-height / 2) + ($range-wp-bar-height / 2); - - width: $range-wp-tick-width; - height: $range-wp-tick-height; - - background: $range-wp-tick-background-color; - - pointer-events: none; -} - -.range-wp .range-tick-active { - background: $range-wp-tick-active-background-color; -} - -.range-wp .range-pin { - @include text-align(center); - @include border-radius(50px); - @include transform(translate3d(0, 28px, 0), scale(.01)); - - position: relative; - top: -24px; - display: inline-block; - - min-width: 28px; - - font-size: $range-wp-pin-font-size; - - color: $range-wp-pin-color; - - background: $range-wp-pin-background-color; - - transition: transform 120ms ease; - - @include deprecated-variable(padding, $range-wp-pin-padding) { - @include padding($range-wp-pin-padding-top, $range-wp-pin-padding-end, $range-wp-pin-padding-bottom, $range-wp-pin-padding-start); - } -} - -.range-wp .range-knob-pressed .range-pin { - @include transform(translate3d(0, 0, 0), scale(1)); -} - -.range-wp.range-disabled { - opacity: .5; -} - -// Generate Windows Range Colors -// -------------------------------------------------- - -@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - - .range-wp-#{$color-name} { - .range-bar-active, - .range-tick-active, - .range-knob, - .range-pin { - background: $color-base; - } - } - -} - diff --git a/packages/core/src/components/range/test/basic.html b/packages/core/src/components/range/test/basic.html index 7b38078ac6..947c85fbae 100644 --- a/packages/core/src/components/range/test/basic.html +++ b/packages/core/src/components/range/test/basic.html @@ -52,9 +52,6 @@ - - - diff --git a/packages/core/src/components/searchbar/searchbar.tsx b/packages/core/src/components/searchbar/searchbar.tsx index 1dae974a06..ac84fdfb01 100644 --- a/packages/core/src/components/searchbar/searchbar.tsx +++ b/packages/core/src/components/searchbar/searchbar.tsx @@ -24,8 +24,7 @@ import { Component, Element, Event, EventEmitter, Prop, State } from '@stencil/c tag: 'ion-searchbar', styleUrls: { ios: 'searchbar.ios.scss', - md: 'searchbar.md.scss', - wp: 'searchbar.wp.scss' + md: 'searchbar.md.scss' }, host: { theme: 'searchbar' @@ -77,10 +76,10 @@ export class Searchbar { /** * @input {string} The mode determines which platform styles to use. - * Possible values are: `"ios"`, `"md"`, or `"wp"`. + * Possible values are: `"ios"` or `"md"`. * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ - @Prop() mode: 'ios' | 'md' | 'wp'; + @Prop() mode: 'ios' | 'md'; /** * @input {boolean} If true, enable searchbar animation. Default `false`. diff --git a/packages/core/src/components/searchbar/searchbar.wp.scss b/packages/core/src/components/searchbar/searchbar.wp.scss deleted file mode 100644 index 6798e853da..0000000000 --- a/packages/core/src/components/searchbar/searchbar.wp.scss +++ /dev/null @@ -1,206 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./searchbar"; - -// Windows Searchbar -// -------------------------------------------------- - -/// @prop - Padding top of the searchbar -$searchbar-wp-padding-top: 8px !default; - -/// @prop - Padding end of the searchbar -$searchbar-wp-padding-end: $searchbar-wp-padding-top !default; - -/// @prop - Padding bottom of the searchbar -$searchbar-wp-padding-bottom: $searchbar-wp-padding-top !default; - -/// @prop - Padding start of the searchbar -$searchbar-wp-padding-start: $searchbar-wp-padding-end !default; - -/// @prop - Background of the searchbar -$searchbar-wp-background-color: transparent !default; - -/// @prop - Border width of the searchbar -$searchbar-wp-border-width: 2px !default; - -/// @prop - Border color of the searchbar -$searchbar-wp-border-color: $input-wp-border-color !default; - -/// @prop - Border color of the searchbar on focus -$searchbar-wp-border-color-focused: color($colors-wp, primary) !default; - -/// @prop - Color of the searchbar input search icon -$searchbar-wp-input-search-icon-color: #858585 !default; - -/// @prop - Svg for the searchbar input search icon -$searchbar-wp-input-search-icon-svg: "" !default; - -/// @prop - Size of the searchbar input search icon -$searchbar-wp-input-search-icon-size: 20px !default; - -/// @prop - Padding top/bottom of the searchbar input -$searchbar-wp-input-padding-vertical: 0 !default; - -/// @prop - Padding start/end of the searchbar input -$searchbar-wp-input-padding-horizontal: 8px !default; - -/// @prop - Height of the searchbar input -$searchbar-wp-input-height: auto !default; - -/// @prop - Line height of the searchbar input -$searchbar-wp-input-line-height: 3rem !default; - -/// @prop - Color of the searchbar input placeholder -$searchbar-wp-input-placeholder-color: #858585 !default; - -/// @prop - Color of the searchbar input text -$searchbar-wp-input-text-color: #141414 !default; - -/// @prop - Background of the searchbar input -$searchbar-wp-input-background-color: #fff !default; - -/// @prop - Border radius of the searchbar input -$searchbar-wp-input-border-radius: 0 !default; - -/// @prop - Font size of the searchbar input -$searchbar-wp-input-font-size: 1.4rem !default; - -/// @prop - Font weight of the searchbar input -$searchbar-wp-input-font-weight: 400 !default; - -/// @prop - Color of the searchbar input clear icon -$searchbar-wp-input-clear-icon-color: #858585 !default; - -/// @prop - Svg for the searchbar input clear icon -$searchbar-wp-input-clear-icon-svg: "" !default; - -/// @prop - Size of the searchbar input clear icon -$searchbar-wp-input-clear-icon-size: 22px !default; - - -// Searchbar -// ----------------------------------------- - -.searchbar-wp { - @include padding($searchbar-wp-padding-top, $searchbar-wp-padding-end, $searchbar-wp-padding-bottom, $searchbar-wp-padding-start); - - background: $searchbar-wp-background-color; -} - -.searchbar-wp .searchbar-input-container { - border: $searchbar-wp-border-width solid $searchbar-wp-border-color; -} - -// Searchbar Search Icon -// ----------------------------------------- - -.searchbar-wp .searchbar-search-icon { - @include position(5px, $searchbar-wp-input-padding-horizontal, null, null); - @include svg-background-image($searchbar-wp-input-search-icon-svg, true); - - position: absolute; - - width: $searchbar-wp-input-search-icon-size + 1; - height: $searchbar-wp-input-search-icon-size + 1; - - background-repeat: no-repeat; - background-size: $searchbar-wp-input-search-icon-size; -} - -.searchbar-wp .searchbar-search-icon.activated { - background-color: transparent; -} - - -// Searchbar Input Field -// ----------------------------------------- - -.searchbar-wp .searchbar-input { - @include placeholder($searchbar-wp-input-placeholder-color); - @include padding($searchbar-wp-input-padding-vertical, $searchbar-wp-input-padding-horizontal); - @include border-radius($searchbar-wp-input-border-radius); - @include background-position(start, $searchbar-wp-input-padding-horizontal, center); - - height: $searchbar-wp-input-height; - - font-size: $searchbar-wp-input-font-size; - font-weight: $searchbar-wp-input-font-weight; - - line-height: $searchbar-wp-input-line-height; - color: $searchbar-wp-input-text-color; - - background-color: $searchbar-wp-input-background-color; -} - - -// Searchbar Clear Input Icon -// ----------------------------------------- - -.searchbar-wp ion-button.searchbar-clear-icon { - @include position(0, $searchbar-wp-input-padding-horizontal, null, null); - @include svg-background-image($searchbar-wp-input-clear-icon-svg); - @include padding(0); - @include background-position(center); - - position: absolute; - - width: $searchbar-wp-input-clear-icon-size; - height: 100%; - - background-repeat: no-repeat; - background-size: $searchbar-wp-input-clear-icon-size; -} - -.searchbar-wp ion-button.searchbar-clear-icon.activated { - background-color: transparent; -} - - -// Searchbar Focused -// ----------------------------------------- - -.searchbar-wp.searchbar-has-focus .searchbar-input-container { - border-color: $searchbar-wp-border-color-focused; -} - - -// Searchbar Left Aligned -// ----------------------------------------- - -.searchbar-wp.searchbar-has-value .searchbar-search-icon { - display: none; -} - - -// Searchbar Cancel Icon (iOS only) -// ----------------------------------------- - -.searchbar-wp .searchbar-ios-cancel { - display: none; -} - - -// Searchbar Cancel Icon (MD only) -// ----------------------------------------- - -.searchbar-wp .searchbar-md-cancel { - display: none; -} - -// Searchbar in Toolbar -// ----------------------------------------- - -.toolbar .searchbar-wp { - @include padding(2px); -} - - -// Generate Default Windows Search Bar Colors -// -------------------------------------------------- - -@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - - .searchbar-wp-#{$color-name}.searchbar-has-focus .searchbar-input-container { - border-color: $color-base; - } - -} diff --git a/packages/core/src/components/searchbar/test/basic.html b/packages/core/src/components/searchbar/test/basic.html index 53710b6e6d..45e0c25cd3 100644 --- a/packages/core/src/components/searchbar/test/basic.html +++ b/packages/core/src/components/searchbar/test/basic.html @@ -78,14 +78,6 @@ placeholder="Search"> -
Search - Mode WP
- - -
Search - Animated and No Cancel
.split-pane-side { - min-width: $split-pane-wp-side-min-width; - max-width: $split-pane-wp-side-max-width; - - border-right: $split-pane-wp-border; - border-left: 0; -} - -.split-pane-wp.split-pane-visible > .split-pane-side[side=right] { - border-right: 0; - border-left: $split-pane-wp-border; -} diff --git a/packages/core/src/components/tabs/tabs.tsx b/packages/core/src/components/tabs/tabs.tsx index 016e00d975..aaee6bb1ef 100644 --- a/packages/core/src/components/tabs/tabs.tsx +++ b/packages/core/src/components/tabs/tabs.tsx @@ -140,8 +140,7 @@ export interface NavOptions { } tag: 'ion-tabs', styleUrls: { ios: 'tabs.ios.scss', - md: 'tabs.md.scss', - wp: 'tabs.wp.scss' + md: 'tabs.md.scss' } }) export class Tabs { diff --git a/packages/core/src/components/tabs/tabs.wp.scss b/packages/core/src/components/tabs/tabs.wp.scss deleted file mode 100644 index 81be624908..0000000000 --- a/packages/core/src/components/tabs/tabs.wp.scss +++ /dev/null @@ -1,169 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./tabs"; - - -// Windows Tabs -// -------------------------------------------------- - -/// @prop - Padding top on the tab button -$tabs-wp-tab-padding-top: 12px !default; - -/// @prop - Padding end on the tab button -$tabs-wp-tab-padding-end: 10px !default; - -/// @prop - Padding bottom on the tab button -$tabs-wp-tab-padding-bottom: 5px !default; - -/// @prop - Padding start on the tab button -$tabs-wp-tab-padding-start: 10px !default; - -/// @prop - Minimum height of the tab button -$tabs-wp-tab-min-height: 4.8rem !default; - -/// @prop - Font size of the tab button text -$tabs-wp-tab-font-size: 1.2rem !default; - -/// @prop - Font weight of the tab button text -$tabs-wp-tab-font-weight: normal !default; - -/// @prop - Opacity of the inactive tab button -$tabs-wp-tab-opacity: .7 !default; - -/// @prop - Text color of the inactive tab button -$tabs-wp-tab-color: rgba($tabs-wp-tab-color-inactive, $tabs-wp-tab-opacity) !default; - -/// @prop - Text color of the active tab button -$tabs-wp-tab-color-active: $tabs-wp-tab-color-active !default; - -/// @prop - Icon color of the inactive tab button -$tabs-wp-tab-icon-color: rgba($tabs-wp-tab-color-inactive, $tabs-wp-tab-opacity) !default; - -/// @prop - Icon color of the active tab button -$tabs-wp-tab-icon-color-active: $tabs-wp-tab-color-active !default; - -/// @prop - Border on the inactive tab button (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top]) -$tabs-wp-tab-border: 2px solid $tabs-wp-border-color !default; - -/// @prop - Border color on the active tab button (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top]) -$tabs-wp-tab-border-color-active: $tabs-wp-tab-color-active !default; - -/// @prop - Background of the tab button when pressed -$tabs-wp-tab-background-activated: rgba(0, 0, 0, .1) !default; - -/// @prop - Size of the tab button icon -$tabs-wp-tab-icon-size: 2.4rem !default; - - -.tabbar-wp { - background: $tabs-wp-background; -} - -.tabbar-wp ion-tab-button { - @include border-radius(0); - - @include padding($tabs-wp-tab-padding-top, $tabs-wp-tab-padding-end, $tabs-wp-tab-padding-bottom, $tabs-wp-tab-padding-start); - - min-height: $tabs-wp-tab-min-height; - - border-bottom: $tabs-wp-tab-border; - font-size: $tabs-wp-tab-font-size; - font-weight: $tabs-wp-tab-font-weight; - color: $tabs-wp-tab-color; - box-shadow: none; -} - -.tabbar-wp ion-tab-highlight { - background: $tabs-wp-tab-color-active; -} - -.tabbar-wp ion-tab-button.tab-selected { - border-bottom-color: $tabs-wp-tab-border-color-active; - color: $tabs-wp-tab-color-active; -} - -.tabbar-wp ion-tab-button.activated { - background: $tabs-wp-tab-background-activated; -} - -.tabbar-wp.placement-bottom ion-tab-button { - border-top: $tabs-wp-tab-border; - border-bottom-width: 0; -} - -.tabbar-wp.placement-bottom ion-tab-button.tab-selected { - border-top-color: $tabs-wp-tab-border-color-active; -} - - -// Windows Tab Button Text -// -------------------------------------------------- - -.tabbar-wp .tab-button-text { - @include margin(5px, null); -} - - -// Windows Tab Button Icon -// -------------------------------------------------- - -.tabbar-wp .tab-button-icon { - min-width: $tabs-wp-tab-icon-size; - - font-size: $tabs-wp-tab-icon-size; - - color: $tabs-wp-tab-icon-color; -} - -.tabbar-wp .tab-selected .tab-button-icon { - color: $tabs-wp-tab-icon-color-active; -} - -.tabbar-wp.layout-icon-bottom ion-tab-button { - @include padding(8px, null, 8px, null); -} - -.tabbar-wp.layout-icon-end ion-tab-button, -.tabbar-wp.layout-icon-start ion-tab-button { - @include padding(null, null, 10px, null); -} - -.tabbar-wp.layout-icon-end ion-icon, -.tabbar-wp.layout-icon-start ion-icon { - min-width: 24px; -} - -.tabbar-wp.layout-icon-hide ion-tab-button, -.tabbar-wp.layout-title-hide ion-tab-button, -.tabbar-wp ion-tab-button.icon-only, -.tabbar-wp ion-tab-button.has-title-only { - @include padding(6px, 10px); -} - - -// Windows Tabbar Color Mixin -// -------------------------------------------------- - -@mixin tabbar-wp($color-name, $color-base, $color-contrast) { - - .tabbar-wp-#{$color-name} { - color: rgba($color-contrast, $tabs-wp-tab-opacity); - background-color: $color-base; - - fill: rgba($color-contrast, $tabs-wp-tab-opacity); - } - - .tabbar-wp-#{$color-name} ion-tab-button:hover:not(.disable-hover), - .tabbar-wp-#{$color-name} ion-tab-button.tab-selected { - border-color: $color-contrast; - color: $color-contrast; - } - -} - - -// Windows Tabbar Color Generation -// -------------------------------------------------- - -@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - @include tabbar-wp($color-name, $color-base, $color-contrast); -} diff --git a/packages/core/src/components/thumbnail/thumbnail.tsx b/packages/core/src/components/thumbnail/thumbnail.tsx index 52cd3e47c0..80f20e134f 100644 --- a/packages/core/src/components/thumbnail/thumbnail.tsx +++ b/packages/core/src/components/thumbnail/thumbnail.tsx @@ -5,8 +5,7 @@ import { Component } from '@stencil/core'; tag: 'ion-thumbnail', styleUrls: { ios: 'thumbnail.ios.scss', - md: 'thumbnail.md.scss', - wp: 'thumbnail.wp.scss' + md: 'thumbnail.md.scss' }, host: { theme: 'thumbnail' diff --git a/packages/core/src/components/thumbnail/thumbnail.wp.scss b/packages/core/src/components/thumbnail/thumbnail.wp.scss deleted file mode 100644 index 3c48ee8b70..0000000000 --- a/packages/core/src/components/thumbnail/thumbnail.wp.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./thumbnail"; - - -// Windows Thumbnail -// -------------------------------------------------- diff --git a/packages/core/src/components/title/title.tsx b/packages/core/src/components/title/title.tsx index 75bcb62234..dc37a9a98a 100644 --- a/packages/core/src/components/title/title.tsx +++ b/packages/core/src/components/title/title.tsx @@ -41,8 +41,7 @@ import { createThemedClasses } from '../../utils/theme'; tag: 'ion-title', styleUrls: { ios: 'title.ios.scss', - md: 'title.md.scss', - wp: 'title.wp.scss' + md: 'title.md.scss' }, host: { theme: 'title' diff --git a/packages/core/src/components/title/title.wp.scss b/packages/core/src/components/title/title.wp.scss deleted file mode 100644 index 5676cbdb7f..0000000000 --- a/packages/core/src/components/title/title.wp.scss +++ /dev/null @@ -1,48 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./title"; - - -// Windows Title -// -------------------------------------------------- - -/// @prop - Padding top of the toolbar title -$toolbar-wp-title-padding-top: 0 !default; - -/// @prop - Padding end of the toolbar title -$toolbar-wp-title-padding-end: 6px !default; - -/// @prop - Padding bottom of the toolbar title -$toolbar-wp-title-padding-bottom: $toolbar-wp-title-padding-top !default; - -/// @prop - Padding start of the toolbar title -$toolbar-wp-title-padding-start: $toolbar-wp-title-padding-end !default; - -/// @prop - Font size of the toolbar title -$toolbar-wp-title-font-size: 1.5rem !default; - -/// @prop - Font weight of the toolbar title -$toolbar-wp-title-font-weight: bold !default; - -/// @prop - Text transform of the toolbar title -$toolbar-wp-title-text-transform: uppercase !default; - -/// @prop - Text color of the toolbar title -$toolbar-wp-title-text-color: color-contrast($colors-wp, $toolbar-wp-background, wp) !default; - - -.toolbar-title-wp { - @include padding($toolbar-wp-title-padding-top, $toolbar-wp-title-padding-end, $toolbar-wp-title-padding-bottom, $toolbar-wp-title-padding-start); - - font-size: $toolbar-wp-title-font-size; - font-weight: $toolbar-wp-title-font-weight; - text-transform: $toolbar-wp-title-text-transform; - color: $toolbar-wp-title-text-color; -} - -@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - - .toolbar-#{$color-name} .toolbar-title-wp { - color: $color-contrast; - } - -} diff --git a/packages/core/src/components/toast/toast.tsx b/packages/core/src/components/toast/toast.tsx index 32ceb012ae..588b972a87 100644 --- a/packages/core/src/components/toast/toast.tsx +++ b/packages/core/src/components/toast/toast.tsx @@ -8,8 +8,7 @@ import iOSLeaveAnimation from './animations/ios.leave'; tag: 'ion-toast', styleUrls: { ios: 'toast.ios.scss', - md: 'toast.md.scss', - wp: 'toast.wp.scss' + md: 'toast.md.scss' }, host: { theme: 'toast' diff --git a/packages/core/src/components/toast/toast.wp.scss b/packages/core/src/components/toast/toast.wp.scss deleted file mode 100644 index 8f47dead51..0000000000 --- a/packages/core/src/components/toast/toast.wp.scss +++ /dev/null @@ -1,76 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./toast"; - -// Windows Phone Toast -// -------------------------------------------------- - -/// @prop - Background of the toast wrapper -$toast-wp-background: rgba(0, 0, 0, 1) !default; - -/// @prop - Border radius of the toast wrapper -$toast-wp-border-radius: 0 !default; - -/// @prop - Color of the toast button -$toast-wp-button-color: #fff !default; - -/// @prop - Color of the toast title -$toast-wp-title-color: #fff !default; - -/// @prop - Font size of the toast title -$toast-wp-title-font-size: 1.4rem !default; - -/// @prop - Padding top of the toast title -$toast-wp-title-padding-top: 1.5rem !default; - -/// @prop - Padding end of the toast title -$toast-wp-title-padding-end: $toast-wp-title-padding-top !default; - -/// @prop - Padding bottom of the toast title -$toast-wp-title-padding-bottom: $toast-wp-title-padding-top !default; - -/// @prop - Padding start of the toast title -$toast-wp-title-padding-start: $toast-wp-title-padding-end !default; - - -.toast-wp .toast-wrapper { - @include position-horizontal(0, 0); - @include margin(auto); - @include border-radius($toast-wp-border-radius); - - position: absolute; - - z-index: $z-index-overlay-wrapper; - display: block; - - max-width: $toast-max-width; - - background: $toast-wp-background; -} - -.toast-wp .toast-wrapper.toast-top { - top: 0; - - opacity: .01; -} - -.toast-wp .toast-wrapper.toast-bottom { - bottom: 0; - - opacity: .01; -} - -.toast-wp .toast-wrapper.toast-middle { - opacity: .01; -} - -.toast-message { - @include padding($toast-wp-title-padding-top, $toast-wp-title-padding-end, $toast-wp-title-padding-bottom, $toast-wp-title-padding-start); - - font-size: $toast-wp-title-font-size; - - color: $toast-wp-title-color; -} - -.toast-button { - color: $toast-wp-button-color; -} diff --git a/packages/core/src/components/toggle/toggle.tsx b/packages/core/src/components/toggle/toggle.tsx index 7ec1ca14a2..7f3d1c5ff0 100644 --- a/packages/core/src/components/toggle/toggle.tsx +++ b/packages/core/src/components/toggle/toggle.tsx @@ -7,8 +7,7 @@ import { hapticSelection } from '../../utils/haptic'; tag: 'ion-toggle', styleUrls: { ios: 'toggle.ios.scss', - md: 'toggle.md.scss', - wp: 'toggle.wp.scss' + md: 'toggle.md.scss' }, host: { theme: 'toggle' @@ -53,10 +52,10 @@ export class Toggle implements BooleanInputComponent { /** * @input {string} The mode determines which platform styles to use. - * Possible values are: `"ios"`, `"md"`, or `"wp"`. + * Possible values are: `"ios"` or `"md"`. * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ - @Prop() mode: 'ios' | 'md' | 'wp'; + @Prop() mode: 'ios' | 'md'; /** * @input {boolean} If true, the toggle is selected. Defaults to `false`. diff --git a/packages/core/src/components/toggle/toggle.wp.scss b/packages/core/src/components/toggle/toggle.wp.scss deleted file mode 100644 index 8c8bf2695d..0000000000 --- a/packages/core/src/components/toggle/toggle.wp.scss +++ /dev/null @@ -1,222 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./toggle"; - - -// Windows Toggle -// -------------------------------------------------- - -/// @prop - Color of the toggle -$toggle-wp-inactive-color: #323232 !default; - -/// @prop - Color of the checked toggle -$toggle-wp-active-color: color($colors-wp, primary) !default; - -/// @prop - Width of the toggle track -$toggle-wp-track-width: 40px !default; - -/// @prop - Height of the toggle track -$toggle-wp-track-height: 18px !default; - -/// @prop - Background color of the toggle track -$toggle-wp-track-background-color-off: transparent !default; - -/// @prop - Background color of the checked toggle track -$toggle-wp-track-background-color-on: $toggle-wp-active-color !default; - -/// @prop - Border width of the toggle track -$toggle-wp-track-border-width: 2px !default; - -/// @prop - Border color of the toggle track -$toggle-wp-track-border-color-off: $toggle-wp-inactive-color !default; - -/// @prop - Border color of the checked toggle track -$toggle-wp-track-border-color-on: $toggle-wp-active-color !default; - -/// @prop - Width of the toggle handle -$toggle-wp-handle-width: 10px !default; - -/// @prop - Height of the toggle handle -$toggle-wp-handle-height: 10px !default; - -/// @prop - Top of the toggle handle -$toggle-wp-handle-top: 2px !default; - -/// @prop - Left of the toggle handle -$toggle-wp-handle-left: 2px !default; - -/// @prop - Border radius of the toggle handle -$toggle-wp-handle-border-radius: 50% !default; - -/// @prop - Background color of the toggle handle -$toggle-wp-handle-background-color-off: $toggle-wp-inactive-color !default; - -/// @prop - Background color of the checked toggle handle -$toggle-wp-handle-background-color-on: color-contrast($colors-wp, $toggle-wp-active-color) !default; - -/// @prop - Margin of the toggle -$toggle-wp-media-margin: 0 !default; - -/// @prop - Transition duration of the toggle icon -$toggle-wp-transition-duration: 300ms !default; - -/// @prop - Opacity of the disabled toggle -$toggle-wp-disabled-opacity: .3 !default; - -/// @prop - Padding top of the toggle positioned on the start in an item -$toggle-wp-item-start-padding-top: 12px !default; - -/// @prop - Padding end of the toggle positioned on the start in an item -$toggle-wp-item-start-padding-end: 18px !default; - -/// @prop - Padding bottom of the toggle positioned on the start in an item -$toggle-wp-item-start-padding-bottom: 12px !default; - -/// @prop - Padding start the toggle positioned on the start in an item -$toggle-wp-item-start-padding-start: 2px !default; - -/// @prop - Padding top of the toggle positioned on the end in an item -$toggle-wp-item-end-padding-top: 12px !default; - -/// @prop - Padding end of the toggle positioned on the end in an item -$toggle-wp-item-end-padding-end: ($item-wp-padding-end / 2) !default; - -/// @prop - Padding bottom of the toggle positioned on the end in an item -$toggle-wp-item-end-padding-bottom: 12px !default; - -/// @prop - Padding start of the toggle positioned on the end in an item -$toggle-wp-item-end-padding-start: $item-wp-padding-start !default; - -// Windows Toggle -// ----------------------------------------- - -.toggle-wp { - position: relative; - - width: $toggle-wp-track-width; - height: $toggle-wp-track-height; - - box-sizing: content-box; - - contain: strict; -} - - -// Windows Toggle Background Track: Unchecked -// ----------------------------------------- - -.toggle-wp .toggle-icon { - @include border-radius($toggle-wp-track-height); - - position: relative; - display: block; - - width: 100%; - height: 100%; - - border: $toggle-wp-track-border-width solid $toggle-wp-track-border-color-off; - background-color: $toggle-wp-track-background-color-off; - - pointer-events: none; - - contain: strict; -} - - -// Windows Toggle Inner Knob: Unchecked -// ----------------------------------------- - -.toggle-wp .toggle-inner { - @include position($toggle-wp-handle-top, null, null, $toggle-wp-handle-left); - @include border-radius($toggle-wp-handle-border-radius); - - position: absolute; - - width: $toggle-wp-handle-width; - height: $toggle-wp-handle-height; - - background-color: $toggle-wp-handle-background-color-off; - - transition-duration: $toggle-wp-transition-duration; - transition-property: transform, background-color; - - will-change: transform, background-color; -} - - -// Windows Toggle Background Track: Checked -// ----------------------------------------- - -.toggle-wp.toggle-checked .toggle-icon { - border-color: $toggle-wp-track-background-color-on; - background-color: $toggle-wp-track-background-color-on; -} - - -// Windows Toggle Inner Knob: Checked -// ----------------------------------------- - -.toggle-wp.toggle-checked .toggle-inner { - @include transform(translate3d($toggle-wp-track-width - $toggle-wp-handle-width - ($toggle-wp-track-border-width * 2) - ($toggle-wp-handle-left * 2), 0, 0)); - - background-color: $toggle-wp-handle-background-color-on; -} - - -// Windows Toggle: Disabled -// ----------------------------------------- - -.toggle-wp.toggle-disabled, -.item-wp.item-toggle-disabled ion-label { - opacity: $toggle-wp-disabled-opacity; - - pointer-events: none; -} - -.toggle-wp.toggle-disabled ion-radio { - opacity: $toggle-wp-disabled-opacity; -} - - -// Windows Toggle Within An Item -// ----------------------------------------- - -.item-wp .toggle-wp[slot] { - @include margin($toggle-wp-media-margin); - @include padding($toggle-wp-item-end-padding-top, $toggle-wp-item-end-padding-end, $toggle-wp-item-end-padding-bottom, $toggle-wp-item-end-padding-start); - - cursor: pointer; -} - -.item-wp .toggle-wp[slot="start"] { - @include padding($toggle-wp-item-start-padding-top, $toggle-wp-item-start-padding-end, $toggle-wp-item-start-padding-bottom, $toggle-wp-item-start-padding-start); -} - -.item-wp.item-toggle ion-label { - @include margin-horizontal(0, null); -} - - -// Windows Color Mixin -// -------------------------------------------------- - -@mixin toggle-theme-wp($color-name, $color-base, $color-contrast) { - - .toggle-wp-#{$color-name}.toggle-checked .toggle-icon { - border-color: $color-base; - background-color: $color-base; - } - - .toggle-wp-#{$color-name}.toggle-checked .toggle-inner { - background-color: $color-contrast; - } -} - - -// Generate Windows Toggle Auxiliary Colors -// -------------------------------------------------- - -@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - - @include toggle-theme-wp($color-name, $color-base, $color-contrast); - -} diff --git a/packages/core/src/components/toolbar/toolbar.tsx b/packages/core/src/components/toolbar/toolbar.tsx index 852e0125d6..6d4d829052 100644 --- a/packages/core/src/components/toolbar/toolbar.tsx +++ b/packages/core/src/components/toolbar/toolbar.tsx @@ -22,10 +22,10 @@ import { Config } from '../../index'; * * | Property | Description | * |-------------|-----------------------------------------------------------------------------------------------------------------------| - * | `start` | Positions element to the left of the content in `ios` mode, and directly to the right in `md` and `wp` mode. | - * | `end` | Positions element to the right of the content in `ios` mode, and to the far right in `md` and `wp` mode. | - * | `left` | Positions element to the left of all other elements. | - * | `right` | Positions element to the right of all other elements. | + * | `start` | Positions element to the left of the content in `ios` mode, and directly to the right in `md` mode. | + * | `end` | Positions element to the right of the content in `ios` mode, and to the far right in `md` mode. | + * | `left` | Positions element to the left of all other elements. | + * | `right` | Positions element to the right of all other elements. | * * * ### Header / Footer Box Shadow and Border @@ -94,8 +94,7 @@ import { Config } from '../../index'; tag: 'ion-toolbar', styleUrls: { ios: 'toolbar.ios.scss', - md: 'toolbar.md.scss', - wp: 'toolbar.wp.scss' + md: 'toolbar.md.scss' }, host: { theme: 'toolbar' @@ -115,10 +114,10 @@ export class Toolbar { /** * @input {string} The mode determines which platform styles to use. - * Possible values are: `"ios"`, `"md"`, or `"wp"`. + * Possible values are: `"ios"` or `"md"`. * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ - @Prop() mode: 'ios' | 'md' | 'wp'; + @Prop() mode: 'ios' | 'md'; protected ionViewDidLoad() { const buttons = this.el.querySelectorAll('ion-button') as any; diff --git a/packages/core/src/components/toolbar/toolbar.wp.scss b/packages/core/src/components/toolbar/toolbar.wp.scss deleted file mode 100644 index 059dee8af4..0000000000 --- a/packages/core/src/components/toolbar/toolbar.wp.scss +++ /dev/null @@ -1,328 +0,0 @@ -@import "../../themes/ionic.globals.wp"; -@import "./toolbar"; -@import "./toolbar-button"; - - -// Windows Toolbar -// -------------------------------------------------- - -/// @prop - Order of the toolbar elements -$toolbar-order-wp: ( - back-button: 0, - menu-toggle-start: 1, - buttons-start: 2, - content: 3, - buttons-mode-start: 4, - buttons-mode-end: 5, - buttons-end: 6, - menu-toggle-end: 7, -); - -/// @prop - Font size of the toolbar button -$toolbar-wp-button-font-size: 1.4rem !default; - -/// @prop - Text color of the toolbar button -$toolbar-wp-button-color: color-contrast($colors-wp, $toolbar-wp-background, wp) !default; - -/// @prop - Border radius of the toolbar button -$toolbar-wp-button-border-radius: 2px !default; - -/// @prop - Font weight of the strong toolbar button -$toolbar-wp-button-strong-font-weight: bold !default; - -/// @prop - Height of the navigation bar -$navbar-wp-height: $toolbar-wp-height !default; - - -.toolbar-wp { - @include padding($toolbar-wp-padding); - - min-height: $toolbar-wp-height; -} - - -// Windows Toolbar Background -// -------------------------------------------------- - -.toolbar-background-wp { - border-color: $toolbar-wp-border-color; - background: $toolbar-wp-background; -} - - -// Windows Toolbar Content -// -------------------------------------------------- - -.toolbar-content-wp { - flex: 1; - order: map-get($toolbar-order-wp, content); - - min-width: 0; - max-width: 100%; -} - -@mixin wp-toolbar-theme($color-name, $color-base, $color-contrast) { - - .toolbar-wp-#{$color-name} .toolbar-background-wp { - background: $color-base; - } - - .toolbar-wp-#{$color-name} .bar-button-clear-wp, - .toolbar-wp-#{$color-name} .bar-button-default-wp, - .toolbar-wp-#{$color-name} .bar-button-outline-wp { - color: $color-contrast; - } - - .toolbar-wp-#{$color-name} .bar-button-outline-wp { - border-color: $color-contrast; - } - - .toolbar-wp-#{$color-name} { - @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - @include wp-bar-button-default($color-name, $color-base, $color-contrast); - @include wp-bar-button-outline($color-name, $color-base, $color-contrast); - @include wp-bar-button-solid($color-name, $color-base, $color-contrast); - } - } -} - - -// Windows Toolbar Button Placement -// -------------------------------------------------- - -.bar-buttons-wp { - order: map-get($toolbar-order-wp, buttons-mode-start); - - transform: translateZ(0); -} - -.bar-buttons-wp[slot="start"] { - order: map-get($toolbar-order-wp, buttons-start); -} - -.bar-buttons-wp[slot="start"] .bar-button:first-child { - @include margin-horizontal(0, null); -} - -.bar-buttons-wp[slot="mode-end"] { - @include text-align(end); - - order: map-get($toolbar-order-wp, buttons-mode-end); -} - -.bar-buttons-wp[slot="end"] { - @include text-align(right); - - order: map-get($toolbar-order-wp, buttons-end); -} - - -// Windows Toolbar Button Default -// -------------------------------------------------- - -.bar-button-wp { - @include margin(0, .2rem); - @include padding(0, 5px); - @include border-radius($toolbar-wp-button-border-radius); - - height: 32px; - - border: 0; - font-size: $toolbar-wp-button-font-size; - font-weight: 500; - text-transform: uppercase; -} - -.bar-button-solid-wp, -.bar-button-outline-wp { - // restrict the ripple to button size - overflow: hidden; -} - -@mixin wp-bar-button-default($color-name, $color-base, $color-contrast) { - - .bar-button-#{$color-name}-wp, - .bar-button-clear-wp-#{$color-name}, - .bar-button-wp-#{$color-name} { - color: $color-base; - background-color: transparent; - - &:hover:not(.disable-hover) { - color: $color-base; - } - } - -} - - -// Windows Toolbar Button Outline -// -------------------------------------------------- - -.bar-button-outline-wp { - border-width: 1px; - border-style: solid; - border-color: $toolbar-wp-button-color; - color: $toolbar-wp-button-color; - background-color: transparent; - - &:hover:not(.disable-hover) { - opacity: .4; - } - - &.activated { - color: color-contrast($colors-wp, $toolbar-wp-button-color, wp); - background-color: $toolbar-wp-button-color; - } -} - -@mixin wp-bar-button-outline($color-name, $color-base, $color-contrast) { - - .bar-button-outline-wp-#{$color-name} { - $fg-color: color-shade($color-base); - border-color: $fg-color; - color: $fg-color; - background-color: transparent; - - &.activated { - color: $color-contrast; - background-color: $fg-color; - } - } - -} - - -// Windows Toolbar Button Solid -// -------------------------------------------------- - -.bar-button-solid-wp { - color: color-contrast($colors-wp, $toolbar-wp-button-color, wp); - background-color: $toolbar-wp-button-color; - - &:hover:not(.disable-hover) { - color: color-contrast($colors-wp, $toolbar-wp-button-color, wp); - } - - &.activated { - color: color-contrast($colors-wp, $toolbar-wp-button-color, wp); - background-color: color-shade($toolbar-wp-button-color); - } -} - -@mixin wp-bar-button-solid($color-name, $color-base, $color-contrast) { - - .bar-button-solid-wp-#{$color-name} { - color: $color-contrast; - background-color: $color-base; - - &.activated { - color: $color-contrast; - background-color: color-shade($color-base); - } - } - -} - - -// Windows Toolbar Button Icon -// -------------------------------------------------- - -.bar-button-wp ion-icon[slot="start"] { - @include padding-horizontal(null, .3em); - - font-size: 1.4em; - line-height: .67; - - pointer-events: none; -} - -.bar-button-wp ion-icon[slot="end"] { - @include padding-horizontal(.4em, null); - - font-size: 1.4em; - line-height: .67; - - pointer-events: none; -} - -.bar-button-wp ion-icon[slot="icon-only"] { - @include padding(0); - - min-width: 28px; - - font-size: 1.8em; - line-height: .67; - - pointer-events: none; -} - - -// Windows Toolbar Back Button -// -------------------------------------------------- - -.back-button-wp { - @include margin(0, 6px); - - min-width: 44px; - - box-shadow: none; -} - -.back-button-icon-wp { - @include text-align(start); - @include margin(0); - @include padding(0, 6px); - - font-size: 2.4rem; - font-weight: normal; -} - - -// Windows Toolbar Menu Toggle -// -------------------------------------------------- - -.bar-button-menutoggle-wp { - @include margin(0, 6px); - @include padding(0, 2px); - - order: map-get($toolbar-order-wp, menu-toggle-start); - - min-width: 44px; - - ion-icon { - @include padding(0, 6px); - - font-size: 2.4rem; - } -} - -.bar-button-menutoggle-wp[slot="mode-end"], -.bar-button-menutoggle-wp[slot="end"] { - @include margin(0, 2px); - - order: map-get($toolbar-order-wp, menu-toggle-end); - - min-width: 28px; -} - - -// Windows Toolbar Color Generation -// -------------------------------------------------- - -@include wp-bar-button-default(default, $toolbar-wp-button-color, color-contrast($colors-wp, $toolbar-wp-button-color, wp)); -@include wp-bar-button-default(clear, $toolbar-wp-button-color, color-contrast($colors-wp, $toolbar-wp-button-color, wp)); - -@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - @include wp-toolbar-theme($color-name, $color-base, $color-contrast); - @include wp-bar-button-default($color-name, $color-base, $color-contrast); - @include wp-bar-button-outline($color-name, $color-base, $color-contrast); - @include wp-bar-button-solid($color-name, $color-base, $color-contrast); -} - - -// WP strong Button -// -------------------------------------------------- - -.bar-button-strong-wp { - font-weight: $toolbar-wp-button-strong-font-weight; -} diff --git a/packages/core/src/global/platform-configs.ts b/packages/core/src/global/platform-configs.ts index 40a86e6f45..409d342c00 100644 --- a/packages/core/src/global/platform-configs.ts +++ b/packages/core/src/global/platform-configs.ts @@ -39,7 +39,7 @@ export const PLATFORM_CONFIGS: PlatformConfig[] = [ { name: 'windows', settings: { - mode: 'wp' + mode: 'md' }, isMatch: (url, userAgent) => isPlatformMatch(url, userAgent, 'windows', WINDOWS_PHONE, []) }, diff --git a/packages/core/src/themes/ionic.components.scss b/packages/core/src/themes/ionic.components.scss index 18544a1c99..b8623a0745 100644 --- a/packages/core/src/themes/ionic.components.scss +++ b/packages/core/src/themes/ionic.components.scss @@ -5,20 +5,17 @@ @import "../components/action-sheet/action-sheet", "../components/action-sheet/action-sheet.ios", -"../components/action-sheet/action-sheet.md", -"../components/action-sheet/action-sheet.wp"; +"../components/action-sheet/action-sheet.md"; @import "../components/alert/alert", "../components/alert/alert.ios", -"../components/alert/alert.md", -"../components/alert/alert.wp"; +"../components/alert/alert.md"; @import "../components/app/app", "../components/app/app.ios", -"../components/app/app.md", -"../components/app/app.wp"; +"../components/app/app.md"; @import "../components/backdrop/backdrop"; @@ -26,50 +23,42 @@ @import "../components/badge/badge", "../components/badge/badge.ios", -"../components/badge/badge.md", -"../components/badge/badge.wp"; +"../components/badge/badge.md"; @import "../components/button/button", "../components/button/button-icon", "../components/button/button.ios", -"../components/button/button.md", -"../components/button/button.wp"; +"../components/button/button.md"; @import "../components/card/card", "../components/card/card.ios", -"../components/card/card.md", -"../components/card/card.wp"; +"../components/card/card.md"; @import "../components/checkbox/checkbox.ios", -"../components/checkbox/checkbox.md", -"../components/checkbox/checkbox.wp"; +"../components/checkbox/checkbox.md"; @import "../components/chip/chip", "../components/chip/chip.ios", -"../components/chip/chip.md", -"../components/chip/chip.wp"; +"../components/chip/chip.md"; @import "../components/content/content", "../components/content/content.ios", -"../components/content/content.md", -"../components/content/content.wp"; +"../components/content/content.md"; @import "../components/datetime/datetime", "../components/datetime/datetime.ios", -"../components/datetime/datetime.md", -"../components/datetime/datetime.wp"; +"../components/datetime/datetime.md"; @import "../components/fab/fab", "../components/fab/fab.ios", -"../components/fab/fab.md", -"../components/fab/fab.wp"; +"../components/fab/fab.md"; @import "../components/grid/grid"; @@ -77,8 +66,7 @@ @import "../components/icon/icon", "../components/icon/icon.ios", -"../components/icon/icon.md", -"../components/icon/icon.wp"; +"../components/icon/icon.md"; @import "../components/img/img"; @@ -89,8 +77,7 @@ @import "../components/input/input", "../components/input/input.ios", -"../components/input/input.md", -"../components/input/input.wp"; +"../components/input/input.md"; @import "../components/item/item", @@ -98,66 +85,55 @@ "../components/item/item-reorder", "../components/item/item-sliding", "../components/item/item.ios", -"../components/item/item.md", -"../components/item/item.wp"; +"../components/item/item.md"; @import "../components/label/label", "../components/label/label.ios", -"../components/label/label.md", -"../components/label/label.wp"; +"../components/label/label.md"; @import "../components/list/list", "../components/list/list.ios", -"../components/list/list.md", -"../components/list/list.wp"; +"../components/list/list.md"; @import "../components/loading/loading", "../components/loading/loading.ios", -"../components/loading/loading.md", -"../components/loading/loading.wp"; +"../components/loading/loading.md"; @import "../components/menu/menu", "../components/menu/menu.ios", -"../components/menu/menu.md", -"../components/menu/menu.wp"; +"../components/menu/menu.md"; @import "../components/modal/modal", "../components/modal/modal.ios", -"../components/modal/modal.md", -"../components/modal/modal.wp"; +"../components/modal/modal.md"; @import "../components/note/note.ios", -"../components/note/note.md", -"../components/note/note.wp"; +"../components/note/note.md"; @import "../components/picker/picker", "../components/picker/picker.ios", -"../components/picker/picker.md", -"../components/picker/picker.wp"; +"../components/picker/picker.md"; @import "../components/popover/popover", "../components/popover/popover.ios", -"../components/popover/popover.md", -"../components/popover/popover.wp"; +"../components/popover/popover.md"; @import "../components/radio/radio.ios", -"../components/radio/radio.md", -"../components/radio/radio.wp"; +"../components/radio/radio.md"; @import "../components/range/range", "../components/range/range.ios", -"../components/range/range.md", -"../components/range/range.wp"; +"../components/range/range.md"; @import "../components/refresher/refresher"; @@ -168,20 +144,17 @@ @import "../components/searchbar/searchbar", "../components/searchbar/searchbar.ios", -"../components/searchbar/searchbar.md", -"../components/searchbar/searchbar.wp"; +"../components/searchbar/searchbar.md"; @import "../components/segment/segment", "../components/segment/segment.ios", -"../components/segment/segment.md", -"../components/segment/segment.wp"; +"../components/segment/segment.md"; @import "../components/select/select", "../components/select/select.ios", -"../components/select/select.md", -"../components/select/select.wp"; +"../components/select/select.md"; @import "../components/show-hide-when/show-hide-when"; @@ -192,43 +165,36 @@ @import "../components/split-pane/split-pane", "../components/split-pane/split-pane.ios", -"../components/split-pane/split-pane.md", -"../components/split-pane/split-pane.wp"; +"../components/split-pane/split-pane.md"; @import "../components/spinner/spinner", "../components/spinner/spinner.ios", -"../components/spinner/spinner.md", -"../components/spinner/spinner.wp"; +"../components/spinner/spinner.md"; @import "../components/tabs/tabs", "../components/tabs/tabs.ios", -"../components/tabs/tabs.md", -"../components/tabs/tabs.wp"; +"../components/tabs/tabs.md"; @import "../components/toast/toast", "../components/toast/toast.ios", -"../components/toast/toast.md", -"../components/toast/toast.wp"; +"../components/toast/toast.md"; @import "../components/toggle/toggle.ios", -"../components/toggle/toggle.md", -"../components/toggle/toggle.wp"; +"../components/toggle/toggle.md"; @import "../components/toolbar/toolbar", "../components/toolbar/toolbar-button", "../components/toolbar/toolbar.ios", -"../components/toolbar/toolbar.md", -"../components/toolbar/toolbar.wp"; +"../components/toolbar/toolbar.md"; @import "../components/typography/typography.ios", -"../components/typography/typography.md", -"../components/typography/typography.wp"; +"../components/typography/typography.md"; @import "../components/virtual-scroll/virtual-scroll"; @@ -239,8 +205,7 @@ @import "../platform/cordova", "../platform/cordova.ios", -"../platform/cordova.md", -"../platform/cordova.wp"; +"../platform/cordova.md"; // Fonts diff --git a/packages/core/src/themes/ionic.globals.wp.scss b/packages/core/src/themes/ionic.globals.wp.scss deleted file mode 100644 index 0338a9e65b..0000000000 --- a/packages/core/src/themes/ionic.globals.wp.scss +++ /dev/null @@ -1,7 +0,0 @@ - -// Core Globals -@import "./ionic.globals"; - - -// Windows Globals -@import "./ionic.theme.default.wp"; diff --git a/packages/core/src/themes/ionic.theme.dark.wp.scss b/packages/core/src/themes/ionic.theme.dark.wp.scss deleted file mode 100644 index 6e29d33881..0000000000 --- a/packages/core/src/themes/ionic.theme.dark.wp.scss +++ /dev/null @@ -1,81 +0,0 @@ -@import "./ionic.theme.dark"; - -// Windows Dark Theme -// ---------------------------------- - -$colors-wp: copy-colors($colors) !default; - - -$text-wp-color: $text-color !default; -$background-wp-color: $background-color !default; -$subdued-text-wp-color: $subdued-text-color !default; - -$font-family-wp-base: "Segoe UI", "Noto Sans", sans-serif !default; -$font-size-wp-base: $font-size-base !default; - - -// Windows Outer content -// -------------------------------------------------- -$outer-content-wp-background-color: $background-color !default; - - -// Windows Toolbar -// -------------------------------------------------- - -$toolbar-wp-background: $toolbar-background !default; -$toolbar-wp-border-color: $toolbar-border-color !default; -$toolbar-wp-text-color: #fff !default; -$toolbar-wp-active-color: $toolbar-active-color !default; -$toolbar-wp-inactive-color: $toolbar-inactive-color !default; - - -// Windows Tabs -// -------------------------------------------------- - -$tabs-wp-background: $tabs-background !default; -$tabs-wp-border-color: transparent !default; -$tabs-wp-tab-color-inactive: $tabs-tab-color-inactive !default; -$tabs-wp-tab-color-active: $tabs-tab-color-active !default; - - -// Windows Card -// -------------------------------------------------- - -$card-wp-header-color: #ddd !default; -$card-wp-title-text-color: #fff !default; -$card-wp-text-color: #ddd !default; - - -// Windows List -// -------------------------------------------------- - -$list-wp-text-color: $list-text-color !default; -$list-wp-border-color: transparent !default; -$list-wp-background-color: $list-background-color !default; -$list-wp-activated-background-color: #d9d9d9 !default; - - -// Windows Item -// -------------------------------------------------- - -$item-wp-padding-top: 13px !default; -$item-wp-padding-end: 16px !default; -$item-wp-padding-bottom: 13px !default; -$item-wp-padding-start: 16px !default; -$item-wp-padding-media-top: 9px !default; -$item-wp-padding-media-bottom: 9px !default; -$item-wp-padding-icon-top: 11px !default; -$item-wp-padding-icon-bottom: 10px !default; -$item-wp-divider-background: #151515 !default; -$item-wp-divider-color: #f4f4f4 !default; - - -// Windows Toggle -// --------------------------------------------------- -$toggle-wp-handle-background-color-off: #f4f4f4 !default; - - -// Windows Input -// -------------------------------------------------- - -$input-wp-border-color: rgba(0, 0, 0, .5) !default; diff --git a/packages/core/src/themes/ionic.theme.default.wp.scss b/packages/core/src/themes/ionic.theme.default.wp.scss deleted file mode 100644 index 9888ca92e1..0000000000 --- a/packages/core/src/themes/ionic.theme.default.wp.scss +++ /dev/null @@ -1,66 +0,0 @@ -@import "./ionic.theme.default"; - -// Windows Default Theme -// ---------------------------------- - -$colors-wp: copy-colors($colors) !default; - - -$text-wp-color: $text-color !default; -$background-wp-color: $background-color !default; -$subdued-text-wp-color: $subdued-text-color !default; - -$font-family-wp-base: "Segoe UI", "Noto Sans", sans-serif !default; -$font-size-wp-base: $font-size-base !default; - -$content-wp-padding: $content-padding !default; -$content-wp-margin: $content-margin !default; - - -// Windows Toolbar -// -------------------------------------------------- - -$toolbar-wp-height: 46px !default; -$toolbar-wp-padding: 4px !default; -$toolbar-wp-background: $toolbar-background !default; -$toolbar-wp-border-color: $toolbar-border-color !default; -$toolbar-wp-text-color: $toolbar-text-color !default; -$toolbar-wp-active-color: $toolbar-active-color !default; -$toolbar-wp-inactive-color: $toolbar-inactive-color !default; - - -// Windows Tabs -// -------------------------------------------------- - -$tabs-wp-background: $tabs-background !default; -$tabs-wp-border-color: transparent !default; -$tabs-wp-tab-color-inactive: $tabs-tab-color-inactive !default; -$tabs-wp-tab-color-active: $tabs-tab-color-active !default; - - -// Windows List -// -------------------------------------------------- - -$list-wp-text-color: $list-text-color !default; -$list-wp-border-color: transparent !default; -$list-wp-background-color: $list-background-color !default; -$list-wp-activated-background-color: #aaa !default; - - -// Windows Item -// -------------------------------------------------- - -$item-wp-padding-top: 13px !default; -$item-wp-padding-end: 16px !default; -$item-wp-padding-bottom: 13px !default; -$item-wp-padding-start: 16px !default; -$item-wp-padding-media-top: 9px !default; -$item-wp-padding-media-bottom: 9px !default; -$item-wp-padding-icon-top: 11px !default; -$item-wp-padding-icon-bottom: 10px !default; - - -// Windows Input -// -------------------------------------------------- - -$input-wp-border-color: rgba(0, 0, 0, .5) !default; diff --git a/packages/ionic-angular/src/components/ion.ts b/packages/ionic-angular/src/components/ion.ts index a3bb9a102b..a4ea85246d 100644 --- a/packages/ionic-angular/src/components/ion.ts +++ b/packages/ionic-angular/src/components/ion.ts @@ -42,7 +42,7 @@ export class Ion { /** * @input {string} The mode determines which platform styles to use. - * Possible values are: `"ios"`, `"md"`, or `"wp"`. + * Possible values are: `"ios"` or `"md"`. * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ @Input()