javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +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

39
packages/core/src/components/button/button.ios.scss
View File

@@ -37,11 +37,11 @@
// iOS Default Button Color Mixin
// --------------------------------------------------
@mixin ios-button-default($color-name, $color-base, $color-contrast) {
$bg-color: $color-base;
$bg-color-activated: color-shade($bg-color);
$bg-color-focused: color-shade($color-base, 12%);
$fg-color: $color-contrast;
@mixin ios-button-default($color-name) {
$bg-color: ion-color($colors-ios, $color-name, base, ios);
$bg-color-activated: ion-color($colors-ios, $color-name, tint, ios);
$bg-color-focused: ion-color($colors-ios, $color-name, shade, ios);
$fg-color: ion-color($colors-ios, $color-name, contrast, ios);
.button-ios-#{$color-name} {
color: $fg-color;
@@ -119,15 +119,18 @@
}
.button-outline-ios.activated.focused {
border-color: color-shade($button-ios-background-color, 12%);
background-color: color-shade($button-ios-background-color, 12%);
border-color: ion-color($colors-ios, $button-ios-background-color, shade, ios);
background-color: ion-color($colors-ios, $button-ios-background-color, shade, ios);
}
// iOS Outline Button Color Mixin
// --------------------------------------------------
@mixin ios-button-outline($color-name, $color-base, $color-contrast) {
$bg-color-focused: rgba($color-base, .12);
@mixin ios-button-outline($color-name) {
$color-base: ion-color($colors-ios, $color-name, base, ios);
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
$color-tint: ion-color($colors-ios, $color-name, shade, ios);
$bg-color-focused: ion-color-alpha($colors-ios, $color-name, $alpha-ios-low, ios);
.button-outline-ios-#{$color-name} {
border-color: $color-base;
@@ -145,8 +148,8 @@
}
.button-outline-ios-#{$color-name}.activated.focused {
border-color: color-shade($color-base, 12%);
background-color: color-shade($color-base, 12%);
border-color: $color-tint;
background-color: $color-tint;
}
}
@@ -178,9 +181,9 @@
// iOS Clear Button Color Mixin
// --------------------------------------------------
@mixin ios-button-clear($color-name, $color-base, $color-contrast) {
$fg-color: $color-base;
$bg-color-focused: rgba($color-base, .12);
@mixin ios-button-clear($color-name) {
$fg-color: ion-color($colors-ios, $color-name, base, ios);
$bg-color-focused: ion-color-alpha($colors-ios, $color-name, $alpha-ios-low, ios);
.button-clear-ios-#{$color-name} {
border-color: $button-ios-clear-border-color;
@@ -215,10 +218,10 @@
// Generate iOS Button Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@include ios-button-default($color-name, $color-base, $color-contrast);
@include ios-button-outline($color-name, $color-base, $color-contrast);
@include ios-button-clear($color-name, $color-base, $color-contrast);
@each $color-name, $color-value in $colors-ios {
@include ios-button-default($color-name);
@include ios-button-outline($color-name);
@include ios-button-clear($color-name);
}

15
packages/core/src/components/button/button.ios.vars.scss
View File

@@ -40,13 +40,13 @@ $button-ios-border-radius: 4px !default;
$button-ios-font-size: 16px !default;
/// @prop - Background color of the button
$button-ios-background-color: color($colors-ios, primary) !default;
$button-ios-background-color: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Text color of the button
$button-ios-text-color: color-contrast($colors-ios, $button-ios-background-color) !default;
$button-ios-text-color: ion-color($colors-ios, $button-ios-background-color, contrast, ios) !default;
/// @prop - Background color of the activated button
$button-ios-background-color-activated: color-shade($button-ios-background-color) !default;
$button-ios-background-color-activated: ion-color($colors-ios, $button-ios-background-color, tint, ios) !default;
/// @prop - Opacity of the activated button
$button-ios-opacity-activated: 1 !default;
@@ -55,7 +55,7 @@ $button-ios-opacity-activated: 1 !default;
$button-ios-opacity-hover: .8 !default;
/// @prop - Background color of the focused button
$button-ios-background-color-focused: color-shade($button-ios-background-color, 12%) !default;
$button-ios-background-color-focused: ion-color($colors-ios, $button-ios-background-color, shade, ios) !default;
// iOS Large Button
@@ -124,7 +124,7 @@ $button-ios-outline-text-color: $button-ios-background-color
$button-ios-outline-background-color: transparent !default;
/// @prop - Text color of the activated outline button
$button-ios-outline-text-color-activated: color-contrast($colors-ios, $button-ios-background-color) !default;
$button-ios-outline-text-color-activated: ion-color($colors-ios, $button-ios-background-color, contrast, ios) !default;
/// @prop - Background color of the activated outline button
$button-ios-outline-background-color-activated: $button-ios-background-color !default;
@@ -133,8 +133,7 @@ $button-ios-outline-background-color-activated: $button-ios-background-color
$button-ios-outline-opacity-activated: 1 !default;
/// @prop - Background color of the focused outline button
$button-ios-outline-background-color-focused: rgba($button-ios-background-color, .12) !default;
$button-ios-outline-background-color-focused: ion-color-alpha($colors-ios, primary, $alpha-ios-low, ios) !default;
// iOS Clear Button
// --------------------------------------------------
@@ -158,7 +157,7 @@ $button-ios-clear-text-color-hover: $button-ios-background-color
$button-ios-clear-opacity-hover: .6 !default;
/// @prop - Background color of the focused clear button
$button-ios-clear-background-color-focused: rgba($button-ios-background-color, .12) !default;
$button-ios-clear-background-color-focused: ion-color-alpha($colors-ios, primary, $alpha-ios-low, ios) !default;
// iOS Round Button

30
packages/core/src/components/button/button.md.scss
View File

@@ -50,11 +50,11 @@
// Material Design Default Button Color Mixin
// --------------------------------------------------
@mixin md-button-default($color-name, $color-base, $color-contrast) {
$bg-color: $color-base;
$bg-color-activated: color-shade($bg-color);
$bg-color-focused: color-shade($bg-color, 12%);
$fg-color: $color-contrast;
@mixin md-button-default($color-name) {
$bg-color: ion-color($colors-md, $color-name, base, md);
$bg-color-activated: ion-color($colors-md, $color-name, tint, md);
$bg-color-focused: ion-color($colors-md, $color-name, shade, md);
$fg-color: ion-color($colors-md, $color-name, contrast, md);
.button-md-#{$color-name} {
color: $fg-color;
@@ -151,9 +151,9 @@
// Material Design Outline Button Color Mixin
// --------------------------------------------------
@mixin md-button-outline($color-name, $color-base, $color-contrast) {
$fg-color: color-shade($color-base, 5%);
$bg-color-focused: rgba($color-base, .12);
@mixin md-button-outline($color-name) {
$fg-color: ion-color($colors-md, $color-name, tint, md);
$bg-color-focused: ion-color-alpha($colors-md, $color-name, $alpha-md-lowest, md);
.button-outline-md-#{$color-name} {
border-color: $fg-color;
@@ -211,9 +211,9 @@
// Material Design Clear Button Color Mixin
// --------------------------------------------------
@mixin md-button-clear($color-name, $color-base, $color-contrast) {
$fg-color: $color-base;
$bg-color-focused: rgba($color-base, .12);
@mixin md-button-clear($color-name) {
$fg-color: ion-color($colors-md, $color-name, base, md);
$bg-color-focused: ion-color-alpha($colors-md, $color-name, $alpha-md-lowest, md);
.button-clear-md-#{$color-name} {
border-color: $button-md-clear-border-color;
@@ -253,10 +253,10 @@
// Generate Material Design Button Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@include md-button-default($color-name, $color-base, $color-contrast);
@include md-button-outline($color-name, $color-base, $color-contrast);
@include md-button-clear($color-name, $color-base, $color-contrast);
@each $color-name, $color-value in $colors-md {
@include md-button-default($color-name);
@include md-button-outline($color-name);
@include md-button-clear($color-name);
}

23
packages/core/src/components/button/button.md.vars.scss
View File

@@ -46,10 +46,10 @@ $button-md-font-weight: 500 !default;
$button-md-text-transform: uppercase !default;
/// @prop - Background color of the button
$button-md-background-color: color($colors-md, primary) !default;
$button-md-background-color: ion-color($colors-md, primary, base, md) !default;
/// @prop - Text color of the button
$button-md-text-color: color-contrast($colors-md, $button-md-background-color) !default;
$button-md-text-color: ion-color($colors-md, $button-md-background-color, contrast, md) !default;
/// @prop - Box shadow of the button
$button-md-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
@@ -64,7 +64,7 @@ $button-md-transition-timing-function: cubic-bezier(.4, 0, .2, 1) !default;
$button-md-background-color-hover: $button-md-background-color !default;
/// @prop - Background color of the activated button
$button-md-background-color-activated: color-shade($button-md-background-color) !default;
$button-md-background-color-activated: ion-color($colors-md, $button-md-background-color, tint, md) !default;
/// @prop - Opacity of the activated button
$button-md-opacity-activated: 1 !default;
@@ -73,10 +73,10 @@ $button-md-opacity-activated: 1 !default;
$button-md-box-shadow-activated: 0 3px 5px rgba(0, 0, 0, .14), 0 3px 5px rgba(0, 0, 0, .21), 0 0 0 0 transparent !default;
/// @prop - Background color of the ripple on the button
$button-md-ripple-background-color: #555 !default;
$button-md-ripple-background-color: $text-md-color-step-200 !default;
/// @prop - Background color of the focused button
$button-md-background-color-focused: color-shade($button-md-background-color, 12%) !default;
$button-md-background-color-focused: ion-color($colors-md, $button-md-background-color, shade, md) !default;
// Material Design Large Button
@@ -145,7 +145,7 @@ $button-md-outline-background-color: transparent !default;
$button-md-outline-box-shadow: none !default;
/// @prop - Background color of the outline button on hover
$button-md-outline-background-color-hover: rgba(158, 158, 158, .1) !default;
$button-md-outline-background-color-hover: ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-lowest) !default;
/// @prop - Background color of the activated outline button
$button-md-outline-background-color-activated: transparent !default;
@@ -160,8 +160,7 @@ $button-md-outline-opacity-activated: 1 !default;
$button-md-outline-ripple-background-color: $button-md-background-color !default;
/// @prop - Background color of the focused outline button
$button-md-outline-background-color-focused: rgba($button-md-background-color, .12) !default;
$button-md-outline-background-color-focused: ion-color-alpha($colors-md, primary, $alpha-md-low, md) !default;
// Material Design Clear Button
// --------------------------------------------------
@@ -182,19 +181,19 @@ $button-md-clear-box-shadow: none !default;
$button-md-clear-opacity: 1 !default;
/// @prop - Background color of the activated clear button
$button-md-clear-background-color-activated: rgba(158, 158, 158, .2) !default;
$button-md-clear-background-color-activated: ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-lowest) !default;
/// @prop - Box shadow of the activated clear button
$button-md-clear-box-shadow-activated: $button-md-clear-box-shadow !default;
/// @prop - Background color of the clear button on hover
$button-md-clear-background-color-hover: rgba(158, 158, 158, .1) !default;
$button-md-clear-background-color-hover: ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-lowest) !default;
/// @prop - Background color of the ripple on the clear button
$button-md-clear-ripple-background-color: #999 !default;
$button-md-clear-ripple-background-color: $text-md-color-step-300 !default;
/// @props - Background color of the focused clear button
$button-md-clear-background-color-focused: rgba($button-md-background-color, .12) !default;
$button-md-clear-background-color-focused: ion-color-alpha($colors-md, primary, $alpha-md-low, md) !default;
// Material Design Round Button