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

71
packages/core/src/components/segment/segment.ios.scss
View File

@ -1,78 +1,9 @@
@import "../../themes/ionic.globals.ios";
@import "./segment";
@import "./segment.ios.vars";
// 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: 2.8rem !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.2rem !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 ion-segment-button {
display: flex;

73
packages/core/src/components/segment/segment.ios.vars.scss Normal file
View File

@ -0,0 +1,73 @@
@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: 2.8rem !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.2rem !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;

51
packages/core/src/components/segment/segment.md.scss
View File

@ -1,58 +1,9 @@
@import "../../themes/ionic.globals.md";
@import "./segment";
@import "./segment.md.vars";
// 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;
/// @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 ion-segment-button {
display: flex;

52
packages/core/src/components/segment/segment.md.vars.scss Normal file
View File

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

1
packages/core/src/components/segment/segment.scss
View File

@ -3,7 +3,6 @@
// Segment
// --------------------------------------------------
ion-segment {
display: flex;