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

8
packages/core/src/components/loading/loading.ios.scss
View File

@@ -1,6 +1,10 @@
@import "./loading";
@import "./loading.ios.vars";
.loading-backdrop-ios {
background-color: $loading-backdrop-ios-color;
}
// iOS Loading Indicator
// --------------------------------------------------
@@ -13,7 +17,7 @@
max-height: $loading-ios-max-height;
color: $loading-ios-text-color;
background: $loading-ios-background;
background-color: $loading-ios-background-color;
}
@@ -21,7 +25,7 @@
// -----------------------------------------
.loading-translucent-ios .loading-wrapper {
background: rgba($loading-ios-background, $loading-ios-translucent-opacity);
background-color: $loading-ios-translucent-background-color;
backdrop-filter: $loading-ios-translucent-filter;
-webkit-backdrop-filter: $loading-ios-translucent-filter;

43
packages/core/src/components/loading/loading.ios.vars.scss
View File

@@ -3,56 +3,59 @@
// iOS Loading Indicator
// --------------------------------------------------
/// @prop - Color of backdrop
$loading-backdrop-ios-color: $backdrop-ios-color !default;
/// @prop - Padding top of the loading wrapper
$loading-ios-padding-top: 24px !default;
$loading-ios-padding-top: 24px !default;
/// @prop - Padding end of the loading wrapper
$loading-ios-padding-end: 34px !default;
$loading-ios-padding-end: 34px !default;
/// @prop - Padding bottom of the loading wrapper
$loading-ios-padding-bottom: $loading-ios-padding-top !default;
$loading-ios-padding-bottom: $loading-ios-padding-top !default;
/// @prop - Padding start of the loading wrapper
$loading-ios-padding-start: $loading-ios-padding-end !default;
$loading-ios-padding-start: $loading-ios-padding-end !default;
/// @prop - Max width of the loading wrapper
$loading-ios-max-width: 270px !default;
$loading-ios-max-width: 270px !default;
/// @prop - Maximum height of the loading wrapper
$loading-ios-max-height: 90% !default;
$loading-ios-max-height: 90% !default;
/// @prop - Border radius of the loading wrapper
$loading-ios-border-radius: 8px !default;
$loading-ios-border-radius: 8px !default;
/// @prop - Text color of the loading wrapper
$loading-ios-text-color: #000 !default;
$loading-ios-text-color: $text-ios-color !default;
/// @prop - Background of the loading wrapper
$loading-ios-background: #f8f8f8 !default;
$loading-ios-background-color: $background-ios-color-step-100 !default;
/// @prop - Background of the loading wrapper
$loading-ios-translucent-background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-high) !default;
/// @prop - Font weight of the loading content
$loading-ios-content-font-weight: bold !default;
$loading-ios-content-font-weight: bold !default;
/// @prop - Color of the loading spinner
$loading-ios-spinner-color: #69717d !default;
$loading-ios-spinner-color: $text-ios-color-step-200 !default;
/// @prop - Color of the ios loading spinner
$loading-ios-spinner-ios-color: $loading-ios-spinner-color !default;
$loading-ios-spinner-ios-color: $loading-ios-spinner-color !default;
/// @prop - Color of the bubbles loading spinner
$loading-ios-spinner-bubbles-color: $loading-ios-spinner-color !default;
$loading-ios-spinner-bubbles-color: $loading-ios-spinner-color !default;
/// @prop - Color of the circles loading spinner
$loading-ios-spinner-circles-color: $loading-ios-spinner-color !default;
$loading-ios-spinner-circles-color: $loading-ios-spinner-color !default;
/// @prop - Color of the crescent loading spinner
$loading-ios-spinner-crescent-color: $loading-ios-spinner-color !default;
$loading-ios-spinner-crescent-color: $loading-ios-spinner-color !default;
/// @prop - Color of the dots loading spinner
$loading-ios-spinner-dots-color: $loading-ios-spinner-color !default;
$loading-ios-spinner-dots-color: $loading-ios-spinner-color !default;
/// @prop - Filter of the translucent loading
$loading-ios-translucent-filter: saturate(180%) blur(20px) !default;
/// @prop - Opacity of the translucent loading
$loading-ios-translucent-opacity: .88 !default;
$loading-ios-translucent-filter: saturate(180%) blur(20px) !default;

4
packages/core/src/components/loading/loading.md.scss
View File

@@ -1,6 +1,10 @@
@import "./loading";
@import "./loading.md.vars";
.loading-backdrop-ios {
background-color: $loading-backdrop-md-color;
}
// Material Design Loading Indicator
// --------------------------------------------------

9
packages/core/src/components/loading/loading.md.vars.scss
View File

@@ -3,6 +3,9 @@
// Material Design Loading Indicator
// --------------------------------------------------
/// @prop - Color of backdrop
$loading-backdrop-md-color: $backdrop-md-color !default;
/// @prop - Padding top of the loading wrapper
$loading-md-padding-top: 24px !default;
@@ -25,10 +28,10 @@ $loading-md-max-height: 90% !default;
$loading-md-border-radius: 2px !default;
/// @prop - Text color of the loading wrapper
$loading-md-text-color: rgba(0, 0, 0, .5) !default;
$loading-md-text-color: $text-color-step-100 !default;
/// @prop - Background of the loading wrapper
$loading-md-background: #fafafa !default;
$loading-md-background: $background-color-step-100 !default;
/// @prop - Box shadow color of the loading wrapper
$loading-md-box-shadow-color: rgba(0, 0, 0, .4) !default;
@@ -37,7 +40,7 @@ $loading-md-box-shadow-color: rgba(0, 0, 0, .4) !default;
$loading-md-box-shadow: 0 16px 20px $loading-md-box-shadow-color !default;
/// @prop - Color of the loading spinner
$loading-md-spinner-color: color($colors-md, primary) !default;
$loading-md-spinner-color: ion-color($colors-md, primary, base, md) !default;
/// @prop - Color of the ios loading spinner
$loading-md-spinner-ios-color: $loading-md-spinner-color !default;

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

@@ -41,7 +41,6 @@ ion-loading-controller {
width: 100%;
height: 100%;
background-color: $loading-backdrop-color;
opacity: .01;
transform: translateZ(0);
}

10
packages/core/src/components/loading/loading.tsx
View File

@@ -234,6 +234,14 @@ export class Loading {
}
render() {
const themedClasses = createThemedClasses(this.mode, this.color, 'loading-backdrop');
if (this.cssClass) {
this.cssClass.split(' ').forEach(cssClass => {
if (cssClass.trim() !== '') this.el.classList.add(cssClass);
});
}
const loadingInner: any[] = [];
if (this.spinner !== 'hide') {
@@ -257,7 +265,7 @@ export class Loading {
attachTo='parent'
autoBlockAll
class={{
'loading-backdrop': true,
...themedClasses,
'hide-backdrop': !this.showBackdrop
}}
></ion-gesture>,

6
packages/core/src/components/loading/loading.vars.scss
View File

@@ -1,7 +1 @@
@import "../../themes/ionic.globals";
// Loading
// --------------------------------------------------
/// @prop - Color of the loading backdrop
$loading-backdrop-color: #000 !default;