From 86f07ef6fc8f6483cad2d5116389706f232e984f Mon Sep 17 00:00:00 2001 From: Ionitron Date: Thu, 6 Jul 2017 15:02:39 -0400 Subject: [PATCH] refactor(components): remove old files --- .../core/src/components/segment/segment.tsx | 2 +- .../src/components/note/note.ios.scss | 24 -- .../src/components/note/note.md.scss | 24 -- .../ionic-angular/src/components/note/note.ts | 39 --- .../src/components/note/note.wp.scss | 24 -- .../src/components/segment/segment.ios.scss | 223 ------------------ .../src/components/segment/segment.md.scss | 139 ----------- .../src/components/segment/segment.scss | 28 --- .../src/components/segment/segment.wp.scss | 132 ----------- 9 files changed, 1 insertion(+), 634 deletions(-) delete mode 100644 packages/ionic-angular/src/components/note/note.ios.scss delete mode 100644 packages/ionic-angular/src/components/note/note.md.scss delete mode 100644 packages/ionic-angular/src/components/note/note.ts delete mode 100644 packages/ionic-angular/src/components/note/note.wp.scss delete mode 100644 packages/ionic-angular/src/components/segment/segment.ios.scss delete mode 100644 packages/ionic-angular/src/components/segment/segment.md.scss delete mode 100644 packages/ionic-angular/src/components/segment/segment.scss delete mode 100644 packages/ionic-angular/src/components/segment/segment.wp.scss diff --git a/packages/core/src/components/segment/segment.tsx b/packages/core/src/components/segment/segment.tsx index be9bb04f57..fc77b2513b 100644 --- a/packages/core/src/components/segment/segment.tsx +++ b/packages/core/src/components/segment/segment.tsx @@ -71,7 +71,7 @@ import { SegmentButtonEvent, VNodeData } from '../../utils/interfaces'; }) export class Segment { buttons: any; - $el: any; + $el: HTMLElement; @Prop({ state: true }) disabled: boolean = false; diff --git a/packages/ionic-angular/src/components/note/note.ios.scss b/packages/ionic-angular/src/components/note/note.ios.scss deleted file mode 100644 index aca3b599fd..0000000000 --- a/packages/ionic-angular/src/components/note/note.ios.scss +++ /dev/null @@ -1,24 +0,0 @@ -@import "../../themes/ionic.globals.ios"; - -// iOS Note -// -------------------------------------------------- - -/// @prop - Text color of the note -$note-ios-color: darken($list-ios-border-color, 10%) !default; - - -.note-ios { - color: $note-ios-color; -} - - -// Generate iOS Note Colors -// -------------------------------------------------- - -@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) { - - .note-ios-#{$color-name} { - color: $color-base; - } - -} diff --git a/packages/ionic-angular/src/components/note/note.md.scss b/packages/ionic-angular/src/components/note/note.md.scss deleted file mode 100644 index 1ae3f94bcd..0000000000 --- a/packages/ionic-angular/src/components/note/note.md.scss +++ /dev/null @@ -1,24 +0,0 @@ -@import "../../themes/ionic.globals.md"; - -// Material Design Note -// -------------------------------------------------- - -/// @prop - Text color of the note -$note-md-color: darken($list-md-border-color, 10%) !default; - - -.note-md { - color: $note-md-color; -} - - -// Generate Material Design Note Colors -// -------------------------------------------------- - -@each $color-name, $color-base, $color-contrast in get-colors($colors-md) { - - .note-md-#{$color-name} { - color: $color-base; - } - -} diff --git a/packages/ionic-angular/src/components/note/note.ts b/packages/ionic-angular/src/components/note/note.ts deleted file mode 100644 index 311816e38b..0000000000 --- a/packages/ionic-angular/src/components/note/note.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { Directive, ElementRef, Renderer } from '@angular/core'; - -import { Config } from '../../config/config'; -import { Ion } from '../ion'; - -/** - * @name Note - * @module ionic - * @description - * A note is detailed item in an ion-item. It creates greyed out element that can be on the left or right side of an item. - * @usage - * - * ```html - * - * - * - * - * Left Note - * - * My Item - * - * Right Note - * - * - * - * - *``` - * {@link /docs/api/components/api/components/item/item ion-item} - */ -@Directive({ - selector: 'ion-note' -}) -export class Note extends Ion { - - constructor(config: Config, elementRef: ElementRef, renderer: Renderer) { - super(config, elementRef, renderer, 'note'); - } - -} diff --git a/packages/ionic-angular/src/components/note/note.wp.scss b/packages/ionic-angular/src/components/note/note.wp.scss deleted file mode 100644 index d6076240cd..0000000000 --- a/packages/ionic-angular/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/ionic-angular/src/components/segment/segment.ios.scss b/packages/ionic-angular/src/components/segment/segment.ios.scss deleted file mode 100644 index 5cd7359ad7..0000000000 --- a/packages/ionic-angular/src/components/segment/segment.ios.scss +++ /dev/null @@ -1,223 +0,0 @@ -@import "../../themes/ionic.globals.ios"; - -// iOS Segment -// -------------------------------------------------- - -/// @prop - Background of the segment button -$segment-button-ios-background-color: transparent !default; - -/// @prop - Background of the activated segment button -$segment-button-ios-background-color-activated: $toolbar-ios-active-color !default; - -/// @prop - Text color of the segment button -$segment-button-ios-text-color: color-contrast($colors-ios, $segment-button-ios-background-color-activated) !default; - -/// @prop - Transition of the activated segment button -$segment-button-ios-transition-activated: 100ms all linear !default; - -/// @prop - Transition of the segment button on hover -$segment-button-ios-transition-hover: 100ms all linear !default; - -/// @prop - Transition of the segment button when pressed -$segment-button-ios-transition-active: 100ms all linear !default; - -/// @prop - Opacity of the segment button on hover -$segment-button-ios-opacity-hover: .1 !default; - -/// @prop - Opacity of the segment button when pressed -$segment-button-ios-opacity-active: .16 !default; - -/// @prop - Opacity of the activated segment button -$segment-button-ios-opacity-activated: 1 !default; - -/// @prop - Opacity of the disabled segment button -$segment-button-ios-opacity-disabled: .3 !default; - -/// @prop - Border width of the segment button -$segment-button-ios-border-width: 1px !default; - -/// @prop - Height of the segment button -$segment-button-ios-height: 3.2rem !default; - -/// @prop - Line height of the segment button -$segment-button-ios-line-height: 3rem !default; - -/// @prop - Font size of the segment button -$segment-button-ios-font-size: 1.3rem !default; - -/// @prop - Border radius of the segment button -$segment-button-ios-border-radius: 4px !default; - -/// @prop - Size of an icon in the segment button -$segment-button-ios-icon-size: 2.6rem !default; - -/// @prop - Line height of an icon in the segment button -$segment-button-ios-icon-line-height: 2.8rem !default; - -/// @prop - Max width of the segment button in a toolbar -$segment-button-ios-toolbar-button-max-width: 100px !default; - -/// @prop - Height of the segment button in a toolbar -$segment-button-ios-toolbar-button-height: 2.6rem !default; - -/// @prop - Line height of the segment button in a toolbar -$segment-button-ios-toolbar-line-height: 2.5rem !default; - -/// @prop - Font size of the segment button in a toolbar -$segment-button-ios-toolbar-font-size: 1.2rem !default; - -/// @prop - Size of an icon in the segment button in a toolbar -$segment-button-ios-toolbar-icon-size: 2.2rem !default; - -/// @prop - Line height of an icon in the segment button in a toolbar -$segment-button-ios-toolbar-icon-line-height: 2.4rem !default; - - -.segment-ios .segment-button { - flex: 1; - - width: 0; - - height: $segment-button-ios-height; - - border-width: $segment-button-ios-border-width; - border-style: solid; - border-color: $segment-button-ios-background-color-activated; - - font-size: $segment-button-ios-font-size; - line-height: $segment-button-ios-line-height; - - color: $segment-button-ios-background-color-activated; - background-color: $segment-button-ios-background-color; - - ion-icon { - font-size: $segment-button-ios-icon-size; - line-height: $segment-button-ios-icon-line-height; - } - - &.segment-activated { - color: $segment-button-ios-text-color; - background-color: $segment-button-ios-background-color-activated; - opacity: $segment-button-ios-opacity-activated; - transition: $segment-button-ios-transition-activated; - } - - &:hover:not(.segment-activated) { - background-color: rgba($segment-button-ios-background-color-activated, $segment-button-ios-opacity-hover); - transition: $segment-button-ios-transition-hover; - } - - &:active:not(.segment-activated) { - background-color: rgba($segment-button-ios-background-color-activated, $segment-button-ios-opacity-active); - transition: $segment-button-ios-transition-active; - } - - &:first-of-type { - @include border-radius($segment-button-ios-border-radius, 0, 0, $segment-button-ios-border-radius); - @include margin-horizontal(null, 0); - } - - &:not(:first-of-type) { - border-left-width: 0; - } - - &:last-of-type { - @include border-radius(0, $segment-button-ios-border-radius, $segment-button-ios-border-radius, 0); - @include margin-horizontal(0, null); - - border-left-width: 0; - } -} - -[dir="rtl"] .segment-ios .segment-button { - &:first-of-type { - border-left-width: 0; - } - - &:last-of-type { - border-left-width: $segment-button-ios-border-width; - } -} - - -.segment-ios.segment-disabled { - opacity: .4; - - pointer-events: none; -} - -.segment-ios .segment-button-disabled { - color: rgba($segment-button-ios-background-color-activated, $segment-button-ios-opacity-disabled); - - pointer-events: none; -} - - -// iOS Segment in Toolbar -// -------------------------------------------------- - -.toolbar-ios .segment-ios { - @include position(0, 0, 0, 0); - - position: absolute; -} - -.toolbar-ios .segment-button { - max-width: $segment-button-ios-toolbar-button-max-width; - height: $segment-button-ios-toolbar-button-height; - - font-size: $segment-button-ios-toolbar-font-size; - line-height: $segment-button-ios-toolbar-line-height; - - ion-icon { - font-size: $segment-button-ios-toolbar-icon-size; - line-height: $segment-button-ios-toolbar-icon-line-height; - } -} - - -// iOS Segment Button Mixin -// -------------------------------------------------- - -@mixin ios-segment-button($color-name, $color-base, $color-contrast) { - - .segment-ios-#{$color-name} { - - .segment-button { - border-color: $color-base; - color: $color-base; - - &:hover:not(.segment-activated) { - background-color: rgba($color-base, $segment-button-ios-opacity-hover); - } - - &:active:not(.segment-activated) { - background-color: rgba($color-base, $segment-button-ios-opacity-active); - } - - &.segment-activated { - color: $color-contrast; - background-color: $color-base; - } - } - - .segment-button-disabled { - color: rgba($color-base, $segment-button-ios-opacity-disabled); - } - - } - -} - - -// iOS Segment Color Generation -// -------------------------------------------------- - -@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) { - - @include ios-segment-button($color-name, $color-base, $color-contrast); - - .toolbar-ios-#{$color-name} .segment-ios .segment-button.segment-activated { - color: $color-base; - } -} diff --git a/packages/ionic-angular/src/components/segment/segment.md.scss b/packages/ionic-angular/src/components/segment/segment.md.scss deleted file mode 100644 index 4db2e65d6c..0000000000 --- a/packages/ionic-angular/src/components/segment/segment.md.scss +++ /dev/null @@ -1,139 +0,0 @@ -@import "../../themes/ionic.globals.md"; - -// Material Design Segment -// -------------------------------------------------- - -/// @prop - Text color of the activated segment button -$segment-button-md-text-color-activated: $toolbar-md-active-color !default; - -/// @prop - Border color of the activated segment button -$segment-button-md-border-color-activated: $toolbar-md-active-color !default; - -/// @prop - Width of the bottom border on the segment button -$segment-button-md-border-bottom-width: 2px !default; - -/// @prop - Color of the bottom border on the segment button -$segment-button-md-border-bottom-color: rgba(#000, .10) !default; - -/// @prop - Opacity of the segment button -$segment-button-md-opacity: .7 !default; - -/// @prop - Opacity of the activated segment button -$segment-button-md-opacity-activated: 1 !default; - -/// @prop - Opacity of the disabled segment button -$segment-button-md-opacity-disabled: .3 !default; - -// deprecated -$segment-button-md-padding: null !default; - -/// @prop - Padding top of the segment button -$segment-button-md-padding-top: 0 !default; - -/// @prop - Padding end of the segment button -$segment-button-md-padding-end: 6px !default; - -/// @prop - Padding bottom of the segment button -$segment-button-md-padding-bottom: $segment-button-md-padding-top !default; - -/// @prop - Padding start of the segment button -$segment-button-md-padding-start: $segment-button-md-padding-end !default; - -/// @prop - Height of the segment button -$segment-button-md-height: 4.2rem !default; - -/// @prop - Line height of the segment button -$segment-button-md-line-height: 4rem !default; - -/// @prop - Font size of the segment button -$segment-button-md-font-size: 1.2rem !default; - -/// @prop - Size of an icon in the segment button -$segment-button-md-icon-size: 2.6rem !default; - -/// @prop - Line height of an icon in the segment button -$segment-button-md-icon-line-height: $segment-button-md-line-height !default; - - -.segment-md .segment-button { - flex: 1; - - width: 0; - height: $segment-button-md-height; - - border-bottom-width: $segment-button-md-border-bottom-width; - border-bottom-style: solid; - border-bottom-color: $segment-button-md-border-bottom-color; - - font-size: $segment-button-md-font-size; - font-weight: 500; - line-height: $segment-button-md-line-height; - text-transform: uppercase; - - color: $segment-button-md-text-color-activated; - background-color: transparent; - opacity: $segment-button-md-opacity; - transition: 100ms all linear; - - @include deprecated-variable(padding, $segment-button-md-padding) { - @include padding($segment-button-md-padding-top, $segment-button-md-padding-end, $segment-button-md-padding-bottom, $segment-button-md-padding-start); - } - - ion-icon { - font-size: $segment-button-md-icon-size; - line-height: $segment-button-md-icon-line-height; - } - - &.activated, - &.segment-activated { - border-color: $segment-button-md-border-color-activated; - opacity: $segment-button-md-opacity-activated; - } -} - -.segment-md.segment-disabled, -.segment-md .segment-button-disabled { - opacity: $segment-button-md-opacity-disabled; - - pointer-events: none; -} - -.toolbar { - - .segment-md { - @include margin(0, auto); - } - - .segment-md .segment-button.activated, - .segment-md .segment-button.segment-activated { - opacity: 1; - } - -} - - -// Material Design Segment Button Mixin -// -------------------------------------------------- - -@mixin md-segment-button($color-name, $color-base, $color-contrast) { - - .segment-md-#{$color-name} .segment-button { - color: $color-base; - - &.activated, - &.segment-activated { - border-color: $color-base; - color: $color-base; - opacity: 1; - } - } - -} - - -// Material Design Segment Color Generation -// -------------------------------------------------- - -@each $color-name, $color-base, $color-contrast in get-colors($colors-md) { - @include md-segment-button($color-name, $color-base, $color-contrast); -} diff --git a/packages/ionic-angular/src/components/segment/segment.scss b/packages/ionic-angular/src/components/segment/segment.scss deleted file mode 100644 index 2eb7452ad6..0000000000 --- a/packages/ionic-angular/src/components/segment/segment.scss +++ /dev/null @@ -1,28 +0,0 @@ -@import "../../themes/ionic.globals"; - -// Segment -// -------------------------------------------------- - - -ion-segment { - display: flex; - - flex: 1; - align-items: center; - justify-content: center; - - width: 100%; -} - -.segment-button { - @include margin-horizontal(0); - @include text-align(center); - - position: relative; - display: block; - overflow: hidden; - - text-overflow: ellipsis; - white-space: nowrap; - cursor: pointer; -} diff --git a/packages/ionic-angular/src/components/segment/segment.wp.scss b/packages/ionic-angular/src/components/segment/segment.wp.scss deleted file mode 100644 index c25859c9da..0000000000 --- a/packages/ionic-angular/src/components/segment/segment.wp.scss +++ /dev/null @@ -1,132 +0,0 @@ -@import "../../themes/ionic.globals.wp"; - -// Windows Segment -// -------------------------------------------------- - -/// @prop - Background of the segment button -$segment-button-wp-background-color: transparent !default; - -/// @prop - Text color of the activated segment button -$segment-button-wp-text-color-activated: $toolbar-wp-text-color !default; - -// deprecated -$segment-button-wp-padding: null !default; - -/// @prop - Padding top of the segment button -$segment-button-wp-padding-top: 0 !default; - -/// @prop - Padding end of the segment button -$segment-button-wp-padding-end: 6px !default; - -/// @prop - Padding bottom of the segment button -$segment-button-wp-padding-bottom: $segment-button-wp-padding-top !default; - -/// @prop - Padding start of the segment button -$segment-button-wp-padding-start: $segment-button-wp-padding-end !default; - -/// @prop - Height of the segment button -$segment-button-wp-height: 4rem !default; - -/// @prop - Line height of the segment button -$segment-button-wp-line-height: 4rem !default; - -/// @prop - Font size of the segment button -$segment-button-wp-font-size: 1.3rem !default; - -/// @prop - Text transform of the segment button -$segment-button-wp-text-transform: uppercase !default; - -/// @prop - Font weight of the segment button -$segment-button-wp-font-weight: bold !default; - -/// @prop - Opacity of the segment button -$segment-button-wp-opacity: .5 !default; - -/// @prop - Opacity of the activated segment button -$segment-button-wp-opacity-activated: 1 !default; - -/// @prop - Opacity of the disabled segment button -$segment-button-wp-opacity-disabled: .3 !default; - -/// @prop - Size of an icon in the segment button -$segment-button-wp-icon-size: 2.6rem !default; - -/// @prop - Line height of an icon in the segment button -$segment-button-wp-icon-line-height: $segment-button-wp-line-height !default; - -/// @prop - Position of the buttons in the segment -$segment-button-wp-buttons-justify-content: flex-start !default; - - -.segment-wp { - justify-content: $segment-button-wp-buttons-justify-content; -} - -.segment-wp .segment-button { - height: $segment-button-wp-height; - - font-size: $segment-button-wp-font-size; - font-weight: $segment-button-wp-font-weight; - line-height: $segment-button-wp-line-height; - - text-transform: $segment-button-wp-text-transform; - - color: $segment-button-wp-text-color-activated; - background-color: $segment-button-wp-background-color; - opacity: $segment-button-wp-opacity; - - @include deprecated-variable(padding, $segment-button-wp-padding) { - @include padding($segment-button-wp-padding-top, $segment-button-wp-padding-end, $segment-button-wp-padding-bottom, $segment-button-wp-padding-start); - } - - &.segment-activated { - opacity: $segment-button-wp-opacity-activated; - } - - ion-icon { - font-size: $segment-button-wp-icon-size; - line-height: $segment-button-wp-icon-line-height; - } -} - -.segment-wp.segment-disabled, -.segment-wp .segment-button-disabled { - opacity: $segment-button-wp-opacity-disabled; - - pointer-events: none; -} - -.toolbar { - - .segment-wp { - @include margin(0, auto); - } - -} - - -// Windows Segment Button Mixin -// -------------------------------------------------- - -@mixin wp-segment-button($color-name, $color-base) { - - .segment-wp-#{$color-name} .segment-button { - color: $color-base; - - &.activated, - &.segment-activated { - border-color: $color-base; - color: $color-base; - opacity: $segment-button-wp-opacity-activated; - } - } - -} - - -// Windows Segment Color Generation -// -------------------------------------------------- - -@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - @include wp-segment-button($color-name, $color-base); -}