diff --git a/packages/core/src/components/checkbox/checkbox.ios.scss b/packages/core/src/components/checkbox/checkbox.ios.scss new file mode 100644 index 0000000000..bd965d2721 --- /dev/null +++ b/packages/core/src/components/checkbox/checkbox.ios.scss @@ -0,0 +1,174 @@ +@import "../../themes/ionic.globals.ios"; +@import "./checkbox"; + +// iOS Checkbox +// -------------------------------------------------- + +/// @prop - Background color of the checkbox when off +$checkbox-ios-background-color-off: $list-ios-background-color !default; + +/// @prop - Background color of the checkbox when on +$checkbox-ios-background-color-on: color($colors-ios, primary) !default; + +/// @prop - Size of the checkbox icon +$checkbox-ios-icon-size: 21px !default; + +/// @prop - Border color of the checkbox icon when off +$checkbox-ios-icon-border-color-off: $list-ios-border-color !default; + +/// @prop - Border color of the checkbox icon when on +$checkbox-ios-icon-border-color-on: $checkbox-ios-background-color-on !default; + +/// @prop - Border width of the checkbox icon +$checkbox-ios-icon-border-width: 1px !default; + +/// @prop - Border style of the checkbox icon +$checkbox-ios-icon-border-style: solid !default; + +/// @prop - Border radius of the checkbox icon +$checkbox-ios-icon-border-radius: 50% !default; + +/// @prop - Width of the checkbox icon checkmark +$checkbox-ios-icon-checkmark-width: 1px !default; + +/// @prop - Style of the checkbox icon checkmark +$checkbox-ios-icon-checkmark-style: solid !default; + +/// @prop - Color of the checkbox icon checkmark +$checkbox-ios-icon-checkmark-color: color-contrast($colors-ios, $checkbox-ios-background-color-on) !default; + +/// @prop - Opacity of the disabled checkbox +$checkbox-ios-disabled-opacity: .3 !default; + +// deprecated +$checkbox-ios-item-left-margin: null !default; + +/// @prop - Margin top of the left checkbox item +$checkbox-ios-item-start-margin-top: $item-ios-padding-media-top !default; + +/// @prop - Margin end of the left checkbox item +$checkbox-ios-item-start-margin-end: $item-ios-padding-end !default; + +/// @prop - Margin bottom of the left checkbox item +$checkbox-ios-item-start-margin-bottom: $item-ios-padding-media-bottom !default; + +/// @prop - Margin start of the left checkbox item +$checkbox-ios-item-start-margin-start: 2px !default; + +// deprecated +$checkbox-ios-item-right-margin: null !default; + +/// @prop - Margin top of the right checkbox item +$checkbox-ios-item-end-margin-top: 10px !default; + +/// @prop - Margin end of the right checkbox item +$checkbox-ios-item-end-margin-end: 8px !default; + +/// @prop - Margin bottom of the right checkbox item +$checkbox-ios-item-end-margin-bottom: 9px !default; + +/// @prop - Margin start of the right checkbox item +$checkbox-ios-item-end-margin-start: 0 !default; + + +// iOS Checkbox Outer Circle: Unchecked +// ----------------------------------------- + +.checkbox-ios .checkbox-icon { + @include border-radius($checkbox-ios-icon-border-radius); + + position: relative; + + width: $checkbox-ios-icon-size; + height: $checkbox-ios-icon-size; + + border-width: $checkbox-ios-icon-border-width; + border-style: $checkbox-ios-icon-border-style; + border-color: $checkbox-ios-icon-border-color-off; + background-color: $checkbox-ios-background-color-off; +} + + +// iOS Checkbox Outer Circle: Checked +// ----------------------------------------- + +.checkbox-ios .checkbox-checked { + border-color: $checkbox-ios-icon-border-color-on; + background-color: $checkbox-ios-background-color-on; +} + + +// iOS Checkbox Inner Checkmark: Checked +// ----------------------------------------- + +.checkbox-ios .checkbox-checked .checkbox-inner { + @include position(4px, null, null, 7px); + + position: absolute; + + width: 4px; + height: 9px; + + border-width: $checkbox-ios-icon-checkmark-width; + border-top-width: 0; + border-left-width: 0; + border-style: $checkbox-ios-icon-checkmark-style; + border-color: $checkbox-ios-icon-checkmark-color; + transform: rotate(45deg); +} + + +// iOS Checkbox: Disabled +// ----------------------------------------- + +.checkbox-ios.checkbox-disabled, +.item-ios.item-checkbox-disabled ion-label { + opacity: $checkbox-ios-disabled-opacity; + + pointer-events: none; +} + + +// iOS Checkbox Within An Item +// ----------------------------------------- + +.item.item-ios .checkbox-ios { + position: static; + display: block; + + @include deprecated-variable(margin, $checkbox-ios-item-left-margin) { + @include margin($checkbox-ios-item-start-margin-top, $checkbox-ios-item-start-margin-end, $checkbox-ios-item-start-margin-bottom, $checkbox-ios-item-start-margin-start); + } +} + +.item.item-ios .checkbox-ios[item-right], // deprecated +.item.item-ios .checkbox-ios[item-end] { + @include deprecated-variable(margin, $checkbox-ios-item-right-margin) { + @include margin($checkbox-ios-item-end-margin-top, $checkbox-ios-item-end-margin-end, $checkbox-ios-item-end-margin-bottom, $checkbox-ios-item-end-margin-start); + } +} + + +// iOS Checkbox Color Mixin +// -------------------------------------------------- + +@mixin checkbox-theme-ios($color-name, $color-base, $color-contrast) { + + .checkbox-ios-#{$color-name} .checkbox-checked { + border-color: $color-base; + background-color: $color-base; + } + + .checkbox-ios-#{$color-name} .checkbox-checked .checkbox-inner { + border-color: $color-contrast; + } + +} + + +// Generate iOS Checkbox Colors +// -------------------------------------------------- + +@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) { + @include checkbox-theme-ios($color-name, $color-base, $color-contrast); +} diff --git a/packages/core/src/components/checkbox/checkbox.md.scss b/packages/core/src/components/checkbox/checkbox.md.scss new file mode 100644 index 0000000000..552d1e35c1 --- /dev/null +++ b/packages/core/src/components/checkbox/checkbox.md.scss @@ -0,0 +1,197 @@ +@import "../../themes/ionic.globals.md"; +@import "./checkbox"; + +// Material Design Checkbox +// -------------------------------------------------- + +/// @prop - Border bottom width of the checkbox +$checkbox-md-border-bottom-width: 1px !default; + +/// @prop - Border bottom style of the checkbox +$checkbox-md-border-bottom-style: solid !default; + +/// @prop - Border bottom color of the checkbox +$checkbox-md-border-bottom-color: $list-md-border-color !default; + +/// @prop - Opacity of the disabled checkbox +$checkbox-md-disabled-opacity: .3 !default; + +/// @prop - Background color of the checkbox icon when off +$checkbox-md-icon-background-color-off: $list-md-background-color !default; + +/// @prop - Background color of the checkbox icon when on +$checkbox-md-icon-background-color-on: color($colors-md, primary) !default; + +/// @prop - Size of the checkbox icon +$checkbox-md-icon-size: 16px !default; + +/// @prop - Width of the checkbox icon checkmark +$checkbox-md-icon-checkmark-width: 2px !default; + +/// @prop - Style of the checkbox icon checkmark +$checkbox-md-icon-checkmark-style: solid !default; + +/// @prop - Color of the checkbox icon checkmark +$checkbox-md-icon-checkmark-color: color-contrast($colors-md, $checkbox-md-icon-background-color-on) !default; + +/// @prop - Border width of the checkbox icon +$checkbox-md-icon-border-width: 2px !default; + +/// @prop - Border style of the checkbox icon +$checkbox-md-icon-border-style: solid !default; + +/// @prop - Border radius of the checkbox icon +$checkbox-md-icon-border-radius: 2px !default; + +/// @prop - Border color of the checkbox icon when off +$checkbox-md-icon-border-color-off: darken($list-md-border-color, 40%) !default; + +/// @prop - Border color of the checkbox icon when on +$checkbox-md-icon-border-color-on: color($colors-md, primary) !default; + +/// @prop - Transition duration of the checkbox +$checkbox-md-transition-duration: 280ms !default; + +/// @prop - Transition easing of the checkbox +$checkbox-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default; + +// deprecated +$checkbox-md-item-left-margin: null !default; + +/// @prop - Margin top of the start checkbox item +$checkbox-md-item-start-margin-top: $item-md-padding-media-top !default; + +/// @prop - Margin end of the start checkbox item +$checkbox-md-item-start-margin-end: 36px !default; + +/// @prop - Margin bottom of the start checkbox item +$checkbox-md-item-start-margin-bottom: $item-md-padding-media-bottom !default; + +/// @prop - Margin start of the start checkbox item +$checkbox-md-item-start-margin-start: 4px !default; + +// deprecated +$checkbox-md-item-right-margin: null !default; + +/// @prop - Margin top of the end checkbox item +$checkbox-md-item-end-margin-top: 11px !default; + +/// @prop - Margin end of the end checkbox item +$checkbox-md-item-end-margin-end: 10px !default; + +/// @prop - Margin bottom of the end checkbox item +$checkbox-md-item-end-margin-bottom: 10px !default; + +/// @prop - Margin start of the end checkbox item +$checkbox-md-item-end-margin-start: 0 !default; + + +// Material Design Checkbox Outer Square: Unchecked +// ----------------------------------------- + +.checkbox-md .checkbox-icon { + @include border-radius($checkbox-md-icon-border-radius); + + position: relative; + + width: $checkbox-md-icon-size; + height: $checkbox-md-icon-size; + + border-width: $checkbox-md-icon-border-width; + border-style: $checkbox-md-icon-border-style; + border-color: $checkbox-md-icon-border-color-off; + background-color: $checkbox-md-icon-background-color-off; + + transition-duration: $checkbox-md-transition-duration; + transition-property: background; + transition-timing-function: $checkbox-md-transition-easing; +} + + +// Material Design Checkbox Outer Square: Checked +// ----------------------------------------- + +.checkbox-md .checkbox-checked { + border-color: $checkbox-md-icon-border-color-on; + background-color: $checkbox-md-icon-background-color-on; +} + + +// Material Design Checkbox Inner Checkmark: Checked +// ----------------------------------------- + +.checkbox-md .checkbox-checked .checkbox-inner { + @include position(0, null, null, 4px); + + position: absolute; + + width: 5px; + height: 10px; + + border-width: $checkbox-md-icon-checkmark-width; + border-top-width: 0; + border-left-width: 0; + border-style: $checkbox-md-icon-checkmark-style; + border-color: $checkbox-md-icon-checkmark-color; + transform: rotate(45deg); +} + + +// Material Design Checkbox: Disabled +// ----------------------------------------- + +.checkbox-md.checkbox-disabled, +.item-md.item-checkbox-disabled ion-label { + opacity: $checkbox-md-disabled-opacity; + + pointer-events: none; +} + + +// Material Design Checkbox Within An Item +// ----------------------------------------- + +.item.item-md .checkbox-md { + position: static; + display: block; + + @include deprecated-variable(margin, $checkbox-md-item-left-margin) { + @include margin($checkbox-md-item-start-margin-top, $checkbox-md-item-start-margin-end, $checkbox-md-item-start-margin-bottom, $checkbox-md-item-start-margin-start); + } +} + +.item.item-md .checkbox-md[item-right], // deprecated +.item.item-md .checkbox-md[item-end] { + @include deprecated-variable(margin, $checkbox-md-item-right-margin) { + @include margin($checkbox-md-item-end-margin-top, $checkbox-md-item-end-margin-end, $checkbox-md-item-end-margin-bottom, $checkbox-md-item-end-margin-start); + } +} + +.checkbox-md + .item-inner ion-label { + @include margin-horizontal(0, null); +} + + +// Material Design Checkbox Color Mixin +// -------------------------------------------------- + +@mixin checkbox-theme-md($color-name, $color-base, $color-contrast) { + + .checkbox-md-#{$color-name} .checkbox-checked { + border-color: $color-base; + background-color: $color-base; + } + + .checkbox-md-#{$color-name} .checkbox-checked .checkbox-inner { + border-color: $color-contrast; + } + +} + + +// Generate Material Design Checkbox Colors +// -------------------------------------------------- + +@each $color-name, $color-base, $color-contrast in get-colors($colors-md) { + @include checkbox-theme-md($color-name, $color-base, $color-contrast); +} diff --git a/packages/core/src/components/checkbox/checkbox.scss b/packages/core/src/components/checkbox/checkbox.scss new file mode 100644 index 0000000000..84b0ceb33a --- /dev/null +++ b/packages/core/src/components/checkbox/checkbox.scss @@ -0,0 +1,22 @@ +@import "../../themes/ionic.globals"; + +// Checkbox +// -------------------------------------------------- + + +ion-checkbox { + position: relative; + display: inline-block; +} + +.checkbox-cover { + @include position(0, null, null, 0); + + position: absolute; + + width: 100%; + height: 100%; + + background: transparent; + cursor: pointer; +} \ No newline at end of file diff --git a/packages/core/src/components/checkbox/checkbox.tsx b/packages/core/src/components/checkbox/checkbox.tsx new file mode 100644 index 0000000000..2a66b6c388 --- /dev/null +++ b/packages/core/src/components/checkbox/checkbox.tsx @@ -0,0 +1,173 @@ +import { Component, CssClassMap, Event, EventEmitter, Listen, Prop, PropDidChange } from '@stencil/core'; + + +/** + * @name Checkbox + * @module ionic + * + * @description + * placed in an `ion-item` or used as a stand-alone checkbox. + * + * See the [Angular Docs](https://angular.io/docs/ts/latest/guide/forms.html) + * for more info on forms and inputs. + * + * + * @usage + * ```html + * + * + * + * + * Pepperoni + * + * + * + * + * Sausage + * + * + * + * + * Mushrooms + * + * + * + * + * ``` + * + * @advanced + * + * ```html + * + * + * + * + * + * Cucumber + * + * + * + * + * ``` + * + * ```ts + * @Component({ + * templateUrl: 'main.html' + * }) + * class SaladPage { + * cucumber: boolean; + * + * updateCucumber() { + * console.log('Cucumbers new state:' + this.cucumber); + * } + * } + * ``` + * + * @demo /docs/demos/src/checkbox/ + * @see {@link /docs/components#checkbox Checkbox Component Docs} + */ +@Component({ + tag: 'ion-checkbox', + styleUrls: { + ios: 'checkbox.ios.scss', + md: 'checkbox.md.scss', + wp: 'checkbox.wp.scss' + }, + host: { + theme: 'checkbox' + } +}) +export class Checkbox { + id: string; + labelId: string; + styleTmr: any; + + @Event() ionChange: EventEmitter; + @Event() ionStyle: EventEmitter; + + /* + * @input {boolean} If true, the checkbox is checked. Default false. + */ + @Prop({ state: true }) checked: boolean = false; + + /* + * @input {boolean} If true, the user cannot interact with this element. Default false. + */ + @Prop({ state: true }) disabled: boolean = false; + + /** + * @input {string} the value of the checkbox. + */ + @Prop({ state: true }) value: string; + + + ionViewWillLoad() { + this.emitStyle(); + } + + @PropDidChange('checked') + checkedChanged(val: boolean) { + this.ionChange.emit({ checked: val }); + this.emitStyle(); + } + + @PropDidChange('disabled') + disabledChanged() { + this.emitStyle(); + } + + private emitStyle() { + clearTimeout(this.styleTmr); + + this.styleTmr = setTimeout(() => { + this.ionStyle.emit({ + 'checkbox-disabled': this.disabled, + 'checkbox-checked': this.checked, + }); + }); + } + + + @Listen('keydown.space') + onSpace(ev: KeyboardEvent) { + this.toggle(); + ev.stopPropagation(); + ev.preventDefault(); + } + + toggle() { + this.checked = !this.checked; + } + + hostData() { + return { + class: { + 'checkbox-checked': this.checked, + 'checkbox-disabled': this.disabled + } + }; + } + + render() { + const checkboxClasses: CssClassMap = { + 'checkbox-icon': true, + 'checkbox-checked': this.checked + }; + + return [ +
+
+
, +