javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 22:17:40 +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;
}
}
}