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

feat(components): add support for css variables (#13895)

Browse Source 
* wip

* wip

* wip

* wip

* CSS variable cleanup
added css variable example

* reverted example

* wip

* name fixes for tabbar and item

* wip - alpha support

* wip - all the things

* wip

* wip

* PR cleanup

* cleanup to ion-color

* switched to double quotes

* PR cleanup
Added TODO for color-mod comments

* reverted ios variable for transition.

* style cleanup
added -ion prefix to all css variables
updated default.css to mirror SASS values
cleanup/update to oceanic css

* removed 'dark' theme files
cleanup from scss-lint report
This commit is contained in:
Ross Gerbasi
2018-02-05 10:55:50 -06:00
committed by Brandy Carney
parent ded672294f
commit f41bb39ce3
234 changed files with 2699 additions and 1634 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,17 +49,16 @@
&.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);
background-color: $segment-button-ios-background-color-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);
background-color: $segment-button-ios-background-color-active;
transition: $segment-button-ios-transition-active;
}
}
@ -82,7 +81,7 @@
}
.segment-ios .segment-button-disabled {
color: rgba($segment-button-ios-background-color-activated, $segment-button-ios-opacity-disabled);
color: $segment-button-ios-background-color-disabled;
pointer-events: none;
}
@ -117,7 +116,9 @@
// iOS Segment Button Mixin
// --------------------------------------------------
@mixin ios-segment-button($color-name, $color-base, $color-contrast) {
@mixin ios-segment-button($color-name) {
$color-base: ion-color($colors-ios, $color-name, base, ios);
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
.segment-ios-#{$color-name} {
@ -125,12 +126,13 @@
border-color: $color-base;
color: $color-base;
&:hover:not(.segment-activated) {
background-color: rgba($color-base, $segment-button-ios-opacity-hover);
background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-lowest);
}
&:active:not(.segment-activated) {
background-color: rgba($color-base, $segment-button-ios-opacity-active);
background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-lowest);
}
&.segment-activated {
@ -140,20 +142,19 @@
}
.segment-button-disabled {
color: rgba($color-base, $segment-button-ios-opacity-disabled);
color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-medium);
}
}
}
// iOS Segment Color Generation
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@each $color-name, $color-value in $colors-ios {
$color-base: ion-color($colors-ios, $color-name, base, ios);
@include ios-segment-button($color-name, $color-base, $color-contrast);
@include ios-segment-button($color-name);
.toolbar-ios-#{$color-name} .segment-ios .segment-button.segment-activated {
color: $color-base;

68
packages/core/src/components/segment/segment.ios.vars.scss
View File

@ -10,70 +10,76 @@ $segment-ios-font-family: $font-family-ios-base !default;
// ---------------------------------------------
/// @prop - Background of the segment button
$segment-button-ios-background-color: transparent !default;
$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;
$segment-button-ios-background-color-activated: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Background of the segment button when hovered
$segment-button-ios-background-color-hover: ion-color-alpha($colors-ios, primary, $alpha-ios-lowest) !default;
/// @prop - Background of the segment button when active
$segment-button-ios-background-color-active: ion-color-alpha($colors-ios, primary, $alpha-ios-low) !default;
/// @prop - Background of the activated segment button when active
$segment-button-ios-background-color-disabled: ion-color-alpha($colors-ios, primary, $alpha-ios-medium) !default;
/// @prop - Text color of the segment button
$segment-button-ios-text-color: color-contrast($colors-ios, $segment-button-ios-background-color-activated) !default;
$segment-button-ios-text-color: ion-color($colors-ios, primary, contrast, ios) !default;
/// @prop - Transition of the activated segment button
$segment-button-ios-transition-activated: 100ms all linear !default;
$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;
$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;
$segment-button-ios-transition-active: 100ms all linear !default;
/// @prop - Border width of the segment button
$segment-button-ios-border-width: 1px !default;
$segment-button-ios-border-width: 1px !default;
/// @prop - Height of the segment button
$segment-button-ios-height: 32px !default;
$segment-button-ios-height: 32px !default;
/// @prop - Line height of the segment button
$segment-button-ios-line-height: 28px !default;
$segment-button-ios-line-height: 28px !default;
/// @prop - Font size of the segment button
$segment-button-ios-font-size: 13px !default;
$segment-button-ios-font-size: 13px !default;
/// @prop - Border radius of the segment button
$segment-button-ios-border-radius: 4px !default;
$segment-button-ios-border-radius: 4px !default;
/// @prop - Size of an icon in the segment button
$segment-button-ios-icon-size: 26px !default;
$segment-button-ios-icon-size: 26px !default;
/// @prop - Line height of an icon in the segment button
$segment-button-ios-icon-line-height: 28px !default;
$segment-button-ios-icon-line-height: 28px !default;
/// @prop - Max width of the segment button in a toolbar
$segment-button-ios-toolbar-button-max-width: 100px !default;
$segment-button-ios-toolbar-button-max-width: 100px !default;
/// @prop - Height of the segment button in a toolbar
$segment-button-ios-toolbar-button-height: 26px !default;
$segment-button-ios-toolbar-button-height: 26px !default;
/// @prop - Line height of the segment button in a toolbar
$segment-button-ios-toolbar-line-height: 22px !default;
$segment-button-ios-toolbar-line-height: 22px !default;
/// @prop - Font size of the segment button in a toolbar
$segment-button-ios-toolbar-font-size: 12px !default;
$segment-button-ios-toolbar-font-size: 12px !default;
/// @prop - Size of an icon in the segment button in a toolbar
$segment-button-ios-toolbar-icon-size: 22px !default;
$segment-button-ios-toolbar-icon-size: 22px !default;
/// @prop - Line height of an icon in the segment button in a toolbar
$segment-button-ios-toolbar-icon-line-height: 24px !default;
$segment-button-ios-toolbar-icon-line-height: 24px !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 disabled segment button
$segment-button-ios-opacity-disabled: .3 !default;

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

@ -25,7 +25,7 @@
line-height: $segment-button-md-line-height;
text-transform: uppercase;
color: $segment-button-md-text-color-activated;
color: $segment-button-md-text-color-active;
background-color: transparent;
opacity: $segment-button-md-opacity;
transition: 100ms all linear;
@ -66,7 +66,8 @@
// Material Design Segment Button Mixin
// --------------------------------------------------
@mixin md-segment-button($color-name, $color-base, $color-contrast) {
@mixin md-segment-button($color-name) {
$color-base: ion-color($colors-md, $color-name, base, md);
.segment-md-#{$color-name} .segment-button {
color: $color-base;
@ -85,6 +86,6 @@
// 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);
@each $color-name, $color-value in $colors-md {
@include md-segment-button($color-name);
}

4
packages/core/src/components/segment/segment.md.vars.scss
View File

@ -7,10 +7,10 @@
$segment-md-font-family: $font-family-md-base !default;
/// @prop - Text color of the activated segment button
$segment-button-md-text-color-activated: $toolbar-md-active-color !default;
$segment-button-md-text-color-active: $toolbar-md-color-active !default;
/// @prop - Border color of the activated segment button
$segment-button-md-border-color-activated: $toolbar-md-active-color !default;
$segment-button-md-border-color-activated: $toolbar-md-color-active !default;
/// @prop - Width of the bottom border on the segment button
$segment-button-md-border-bottom-width: 2px !default;