javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-24 23:01:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(chip): separate chip button styles from chip

Browse Source
This commit is contained in:
Brandy Carney
2017-07-24 18:19:09 -04:00
parent 76651edebc
commit 69dfaad7b0
10 changed files with 277 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
packages/core/src/components/chip-button/chip-button.ios.scss Normal file
View File

@ -0,0 +1,89 @@
@import "../../themes/ionic.globals.ios";
@import "./chip-button";
// iOS Chip Button
// --------------------------------------------------
/// @prop - Background color of the chip button
$chip-button-ios-background-color: color($colors-ios, primary) !default;
/// @prop - Fill color of the icon in the chip button
$chip-button-ios-icon-fill-color: color-contrast($colors-ios, $chip-button-ios-background-color) !default;
/// @prop - Background color of the clear chip button
$chip-button-ios-clear-background-color: transparent !default;
/// @prop - Text color of the clear chip button
$chip-button-ios-clear-text-color: color($colors-ios, primary) !default;
/// @prop - Fill color of the icon in the clear chip button
$chip-button-ios-clear-icon-fill-color: color($colors-ios, primary) !default;
.chip-button-ios {
background-color: $chip-button-ios-background-color;
}
.chip-button-ios .icon {
fill: $chip-button-ios-icon-fill-color;
}
// iOS Clear Chip Button
// --------------------------------------------------
.chip-button-clear-ios {
background-color: $chip-button-ios-clear-background-color;
color: $chip-button-ios-clear-text-color;
}
.chip-button-clear-ios .icon {
fill: $chip-button-ios-clear-icon-fill-color;
}
// Generate iOS Chip Button Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
.chip-button-ios-#{$color-name} {
color: $color-contrast;
background-color: $color-base;
.icon {
fill: $color-contrast;
}
}
.chip-ios-#{$color-name} .chip-button-ios {
color: $color-base;
background-color: $color-contrast;
.icon {
fill: $color-base;
}
}
// Clear Chip Buttons
// --------------------------------------------------
.chip-button-clear-ios-#{$color-name} {
color: $color-base;
background-color: transparent;
.icon {
fill: $color-base;
}
}
.chip-ios-#{$color-name} .chip-button-clear-ios {
color: $color-contrast;
background-color: transparent;
.icon {
fill: $color-contrast;
}
}
}

67
packages/core/src/components/chip-button/chip-button.md.scss Normal file
View File

@ -0,0 +1,67 @@
@import "../../themes/ionic.globals.md";
@import "./chip-button";
// Material Design Chip Button
// --------------------------------------------------
/// @prop - Background color of the chip button
$chip-button-md-background-color: color($colors-md, primary) !default;
/// @prop - Fill color of the icon in the chip button
$chip-button-md-icon-fill-color: color-contrast($colors-md, $chip-button-md-background-color) !default;
/// @prop - Background color of the clear chip button
$chip-button-md-clear-background-color: transparent !default;
/// @prop - Text color of the clear chip button
$chip-button-md-clear-text-color: color($colors-md, primary) !default;
/// @prop - Fill color of the icon in the clear chip button
$chip-button-md-clear-icon-fill-color: color($colors-md, primary) !default;
.chip-button-md {
background-color: $chip-button-md-background-color;
}
.chip-button-md .icon {
fill: $chip-button-md-icon-fill-color;
}
// Material Design Clear Chip Button
// --------------------------------------------------
.chip-button-clear-md {
background-color: $chip-button-md-clear-background-color;
color: $chip-button-md-clear-text-color;
}
.chip-button-clear-md .icon {
fill: $chip-button-md-clear-icon-fill-color;
}
// Generate Material Design Chip Button Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
.chip-button-md-#{$color-name} {
color: $color-contrast;
background-color: $color-base;
}
.chip-button-md-#{$color-name} .icon {
fill: $color-contrast;
}
.chip-button-clear-md-#{$color-name} {
color: $color-base;
}
.chip-button-clear-md-#{$color-name} .icon {
fill: $color-base;
}
}

31
packages/core/src/components/chip-button/chip-button.scss Normal file
View File

@ -0,0 +1,31 @@
@import "../../themes/ionic.globals";
// Chip Button
// --------------------------------------------------
/// @prop - Border radius of the button in the chip
$chip-button-border-radius: 50% !default;
/// @prop - Margin top of the button in the chip
$chip-button-margin-top: 0 !default;
/// @prop - Margin end of the button in the chip
$chip-button-margin-end: $chip-button-margin-top !default;
/// @prop - Margin bottom of the button in the chip
$chip-button-margin-bottom: $chip-button-margin-top !default;
/// @prop - Margin start of the button in the chip
$chip-button-margin-start: $chip-button-margin-end !default;
/// @prop - Width and height of the button in the chip
$chip-button-size: 32px !default;
.chip-button {
@include border-radius($chip-button-border-radius);
@include margin($chip-button-margin-top, $chip-button-margin-end, $chip-button-margin-bottom, $chip-button-margin-start);
width: $chip-button-size;
height: $chip-button-size;
}

7
packages/core/src/components/chip-button/chip-button.tsx
View File

@ -2,7 +2,12 @@ import { Component, CssClassObject, h, Prop } from '@stencil/core';
@Component({
tag: 'ion-chip-button'
tag: 'ion-chip-button',
styleUrls: {
ios: 'chip-button.ios.scss',
md: 'chip-button.md.scss',
wp: 'chip-button.wp.scss'
},
})
export class ChipButton {
$el: HTMLElement;

68
packages/core/src/components/chip-button/chip-button.wp.scss Normal file
View File

@ -0,0 +1,68 @@
@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 {
background-color: $chip-button-wp-clear-background-color;
color: $chip-button-wp-clear-text-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;
}
}
}

54
packages/core/src/components/chip/chip.ios.scss
View File

@ -49,21 +49,6 @@ $chip-ios-icon-background-color: color($colors-ios, primary) !default
/// @prop - Fill color of the icon in the chip
$chip-ios-icon-fill-color: color-contrast($colors-ios, $chip-ios-icon-background-color) !default;
/// @prop - Background color of the chip button
$chip-ios-button-background-color: color($colors-ios, primary) !default;
/// @prop - Fill color of the icon in the chip button
$chip-ios-button-icon-fill-color: color-contrast($colors-ios, $chip-ios-button-background-color) !default;
/// @prop - Background color of the clear chip button
$chip-ios-button-clear-background-color: transparent !default;
/// @prop - Text color of the clear chip button
$chip-ios-button-clear-text-color: color($colors-ios, primary) !default;
/// @prop - Fill color of the icon in the clear chip button
$chip-ios-button-clear-icon-fill-color: color($colors-ios, primary) !default;
.chip-ios {
@include border-radius($chip-ios-border-radius);
@ -86,57 +71,20 @@ $chip-ios-button-clear-icon-fill-color: color($colors-ios, primary) !default
background-color: $chip-ios-icon-background-color;
}
// iOS Chip Button
// --------------------------------------------------
.chip-button-ios {
background-color: $chip-ios-button-background-color;
}
.chip-button-ios .icon {
fill: $chip-ios-button-icon-fill-color;
}
// iOS Clear Chip Button
// --------------------------------------------------
.chip-button-clear-ios {
background-color: $chip-ios-button-clear-background-color;
color: $chip-ios-button-clear-text-color;
}
.chip-button-clear-ios .icon {
fill: $chip-ios-button-clear-icon-fill-color;
}
// Generate iOS Chip Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
.chip-ios-#{$color-name},
.chip-button-ios-#{$color-name} {
.chip-ios-#{$color-name} {
color: $color-contrast;
background-color: $color-base;
}
.chip-button-ios-#{$color-name} .icon {
fill: $color-contrast;
}
.chip-ios .icon-ios-#{$color-name} {
fill: $color-contrast;
background-color: $color-base;
}
.chip-button-clear-ios-#{$color-name} {
color: $color-base;
}
.chip-button-clear-ios-#{$color-name} .icon {
fill: $color-base;
}
}

55
packages/core/src/components/chip/chip.md.scss
View File

@ -49,21 +49,6 @@ $chip-md-icon-background-color: color($colors-md, primary) !default;
/// @prop - Fill color of the icon in the chip
$chip-md-icon-fill-color: color-contrast($colors-md, $chip-md-icon-background-color) !default;
/// @prop - Background color of the chip button
$chip-md-button-background-color: color($colors-md, primary) !default;
/// @prop - Fill color of the icon in the chip button
$chip-md-button-icon-fill-color: color-contrast($colors-md, $chip-md-button-background-color) !default;
/// @prop - Background color of the clear chip button
$chip-md-button-clear-background-color: transparent !default;
/// @prop - Text color of the clear chip button
$chip-md-button-clear-text-color: color($colors-md, primary) !default;
/// @prop - Fill color of the icon in the clear chip button
$chip-md-button-clear-icon-fill-color: color($colors-md, primary) !default;
.chip-md {
@include border-radius($chip-md-border-radius);
@ -88,57 +73,19 @@ $chip-md-button-clear-icon-fill-color: color($colors-md, primary) !default;
}
// Material Design Chip Button
// --------------------------------------------------
.chip-button-md {
background-color: $chip-md-button-background-color;
}
.chip-button-md .icon {
fill: $chip-md-button-icon-fill-color;
}
// Material Design Clear Chip Button
// --------------------------------------------------
.chip-button-clear-md {
background-color: $chip-md-button-clear-background-color;
color: $chip-md-button-clear-text-color;
}
.chip-button-clear-md .icon {
fill: $chip-md-button-clear-icon-fill-color;
}
// Generate Material Design Chip Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
.chip-md-#{$color-name},
.chip-button-md-#{$color-name} {
.chip-md-#{$color-name} {
color: $color-contrast;
background-color: $color-base;
}
.chip-button-md-#{$color-name} .icon {
fill: $color-contrast;
}
.chip-md .icon-md-#{$color-name} {
fill: $color-contrast;
background-color: $color-base;
}
.chip-button-clear-md-#{$color-name} {
color: $color-base;
}
.chip-button-clear-md-#{$color-name} .icon {
fill: $color-base;
}
}

26
packages/core/src/components/chip/chip.scss
View File

@ -3,24 +3,6 @@
// Chip
// --------------------------------------------------
/// @prop - Border radius of the button in the chip
$chip-button-border-radius: 50% !default;
/// @prop - Margin top of the button in the chip
$chip-button-margin-top: 0 !default;
/// @prop - Margin end of the button in the chip
$chip-button-margin-end: $chip-button-margin-top !default;
/// @prop - Margin bottom of the button in the chip
$chip-button-margin-bottom: $chip-button-margin-top !default;
/// @prop - Margin start of the button in the chip
$chip-button-margin-start: $chip-button-margin-end !default;
/// @prop - Width and height of the button in the chip
$chip-button-size: 32px !default;
/// @prop - Border radius of the icon in the chip
$chip-icon-border-radius: 50% !default;
@ -54,14 +36,6 @@ ion-chip {
box-sizing: border-box;
}
ion-chip .chip-button {
@include border-radius($chip-button-border-radius);
@include margin($chip-button-margin-top, $chip-button-margin-end, $chip-button-margin-bottom, $chip-button-margin-start);
width: $chip-button-size;
height: $chip-button-size;
}
ion-chip ion-icon {
@include text-align($chip-icon-text-align);
@include border-radius($chip-icon-border-radius);

54
packages/core/src/components/chip/chip.wp.scss
View File

@ -49,21 +49,6 @@ $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;
/// @prop - Background color of the chip button
$chip-wp-button-background-color: color($colors-wp, primary) !default;
/// @prop - Fill color of the icon in the chip button
$chip-wp-button-icon-fill-color: color-contrast($colors-wp, $chip-wp-button-background-color) !default;
/// @prop - Background color of the clear chip button
$chip-wp-button-clear-background-color: transparent !default;
/// @prop - Text color of the clear chip button
$chip-wp-button-clear-text-color: color($colors-wp, primary) !default;
/// @prop - Fill color of the icon in the clear chip button
$chip-wp-button-clear-icon-fill-color: color($colors-wp, primary) !default;
.chip-wp {
@include border-radius($chip-wp-border-radius);
@ -88,56 +73,19 @@ $chip-wp-button-clear-icon-fill-color: color($colors-wp, primary) !default;
}
// Material Design Chip Button
// --------------------------------------------------
.chip-button-wp {
background-color: $chip-wp-button-background-color;
}
.chip-button-wp .icon {
fill: $chip-wp-button-icon-fill-color;
}
// Material Design Clear Chip Button
// --------------------------------------------------
.chip-button-clear-wp {
background-color: $chip-wp-button-clear-background-color;
color: $chip-wp-button-clear-text-color;
}
.chip-button-clear-wp .icon {
fill: $chip-wp-button-clear-icon-fill-color;
}
// Generate Windows Chip Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
.chip-wp-#{$color-name},
.chip-button-wp-#{$color-name} {
.chip-wp-#{$color-name} {
color: $color-contrast;
background-color: $color-base;
}
.chip-button-wp-#{$color-name} .icon {
fill: $color-contrast;
}
.chip-wp .icon-wp-#{$color-name} {
fill: $color-contrast;
background-color: $color-base;
}
.chip-button-clear-wp-#{$color-name} {
color: $color-base;
}
.chip-button-clear-wp-#{$color-name} .icon {
fill: $color-base;
}
}

16
packages/core/src/components/chip/test/basic.html
View File

@ -72,7 +72,7 @@
</ion-avatar>
</ion-chip>
<h2>del Chips</h2>
<h2>Delete Chips</h2>
<ion-chip id="chip1">
<ion-label>Default</ion-label>
@ -82,7 +82,7 @@
</ion-chip>
<ion-chip id="chip2">
<ion-icon name="pin" color="primary"></ion-icon>
<ion-icon name="pin"></ion-icon>
<ion-label>With Icon</ion-label>
<ion-chip-button onclick="del('chip2')">
<ion-icon name="close"></ion-icon>
@ -99,12 +99,20 @@
</ion-chip-button>
</ion-chip>
<ion-chip color="primary" id="chip4">
<ion-icon name="pin"></ion-icon>
<ion-label>Primary</ion-label>
<ion-chip-button clear onclick="del('chip4')">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
<ion-item>
<ion-label>Chip Item</ion-label>
<ion-chip slot="end" id="chip4">
<ion-chip slot="end" id="chip5">
<ion-icon name="pin" color="primary"></ion-icon>
<ion-label>Default</ion-label>
<ion-chip-button clear color="light" onclick="del('chip4')">
<ion-chip-button clear color="light" onclick="del('chip5')">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>