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

refactor(sass): separate sass variables from styles (#13547)

Browse Source 
* refactor(sass): separate sass variables from styles

also adds styles for stand alone avatar

closes #9192 closes #12880

* style(range): remove deprecated variable

* refactor(sass): move variables for chip and fix file naming
This commit is contained in:
Brandy Carney
2017-11-30 10:30:40 -05:00
committed by GitHub
parent 3a62bf5921
commit 11c954b283
230 changed files with 4486 additions and 4201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/core/src/components/chip-button/chip-button.ios.scss
View File

@ -1,25 +1,9 @@
@import "../../themes/ionic.globals.ios";
@import "./chip-button";
@import "./chip-button.ios.vars";
// 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;
}

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

@ -0,0 +1,19 @@
@import "../../themes/ionic.globals.ios";
// 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;

18
packages/core/src/components/chip-button/chip-button.md.scss
View File

@ -1,25 +1,9 @@
@import "../../themes/ionic.globals.md";
@import "./chip-button";
@import "./chip-button.md.vars";
// 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;
}

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

@ -0,0 +1,19 @@
@import "../../themes/ionic.globals.md";
// 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;

21
packages/core/src/components/chip-button/chip-button.scss
View File

@ -1,27 +1,8 @@
@import "../../themes/ionic.globals";
@import "./chip-button.vars";
// 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);

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

@ -0,0 +1,22 @@
@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;