mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
docs(demos): add variables Sass file to use colors and add to icons
references driftyco/ionic-site#453
This commit is contained in:
Brandy Carney
31
demos/app.variables.scss
Normal file
31
demos/app.variables.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
// http://ionicframework.com/docs/v2/theming/
|
||||
|
||||
|
||||
// App Shared Variables
|
||||
// --------------------------------------------------
|
||||
// To customize the look and feel of this app, you can override
|
||||
// the Sass variables found in Ionic's source scss files. Setting
|
||||
// variables before Ionic's Sass will use these variables rather than
|
||||
// Ionic's default Sass variable values. App Shared Sass imports belong
|
||||
// in the app.core.scss file and not this file. Sass variables specific
|
||||
// to the mode belong in either the app.ios.scss or app.md.scss files.
|
||||
|
||||
|
||||
// App Shared Color Variables
|
||||
// --------------------------------------------------
|
||||
// It's highly recommended to change the default colors
|
||||
// to match your app's branding. Ionic uses a Sass map of
|
||||
// colors so you can add, rename and remove colors as needed.
|
||||
// The "primary" color is the only required color in the map.
|
||||
// Both iOS and MD colors can be further customized if colors
|
||||
// are different per mode.
|
||||
|
||||
$colors: (
|
||||
primary: #387ef5,
|
||||
secondary: #32db64,
|
||||
danger: #f53d3d,
|
||||
light: #f4f4f4,
|
||||
dark: #222,
|
||||
vibrant: rebeccapurple,
|
||||
bright: #FFC125
|
||||
);
|
||||
@@ -9,14 +9,14 @@
|
||||
<ion-col><ion-icon name='heart' danger></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='ionitron' primary></ion-icon></ion-col>
|
||||
|
||||
<ion-col><ion-icon name='happy'></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='happy' vibrant></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='people'></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='person'></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='contact'></ion-icon></ion-col>
|
||||
|
||||
<ion-col><ion-icon name='apps'></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='lock'></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='key'></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='key' bright></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='unlock'></ion-icon></ion-col>
|
||||
|
||||
<ion-col><ion-icon name='map' secondary></ion-icon></ion-col>
|
||||
@@ -25,27 +25,27 @@
|
||||
<ion-col><ion-icon name='locate'></ion-icon></ion-col>
|
||||
|
||||
<ion-col><ion-icon name='mic'></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='musical-notes'></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='musical-notes' vibrant></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='volume-up'></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='microphone'></ion-icon></ion-col>
|
||||
|
||||
<ion-col><ion-icon name='cafe'></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='cafe' bright></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='calculator'></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='bus'></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='wine' danger></ion-icon></ion-col>
|
||||
|
||||
<ion-col><ion-icon name='camera'></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='image' secondary></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='star'></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='star' bright></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='pin'></ion-icon></ion-col>
|
||||
|
||||
<ion-col><ion-icon name='arrow-dropup-circle'></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='arrow-dropup-circle' vibrant></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='arrow-back'></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='arrow-dropdown'></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='arrow-forward'></ion-icon></ion-col>
|
||||
|
||||
<ion-col><ion-icon name='cloud'></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='sunny'></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='sunny' bright></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='umbrella'></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name='rainy' primary></ion-icon></ion-col>
|
||||
</ion-row>
|
||||
|
||||
@@ -1,4 +1,36 @@
|
||||
$font-path: "../fonts";
|
||||
$roboto-font-path: "../fonts";
|
||||
|
||||
// http://ionicframework.com/docs/v2/theming/
|
||||
|
||||
|
||||
// App Shared Variables
|
||||
// --------------------------------------------------
|
||||
// To customize the look and feel of this app, you can override
|
||||
// the Sass variables found in Ionic's source scss files. Setting
|
||||
// variables before Ionic's Sass will use these variables rather than
|
||||
// Ionic's default Sass variable values. App Shared Sass imports belong
|
||||
// in the app.core.scss file and not this file. Sass variables specific
|
||||
// to the mode belong in either the app.ios.scss or app.md.scss files.
|
||||
|
||||
|
||||
// App Shared Color Variables
|
||||
// --------------------------------------------------
|
||||
// It's highly recommended to change the default colors
|
||||
// to match your app's branding. Ionic uses a Sass map of
|
||||
// colors so you can add, rename and remove colors as needed.
|
||||
// The "primary" color is the only required color in the map.
|
||||
// Both iOS and MD colors can be further customized if colors
|
||||
// are different per mode.
|
||||
|
||||
$colors: (
|
||||
primary: #387ef5,
|
||||
secondary: #32db64,
|
||||
danger: #f53d3d,
|
||||
light: #f4f4f4,
|
||||
dark: #222,
|
||||
vibrant: rebeccapurple,
|
||||
bright: #FFC125
|
||||
);
|
||||
|
||||
@import "../ionic/ionic.ios";
|
||||
|
||||
@@ -1,4 +1,36 @@
|
||||
$font-path: "../fonts";
|
||||
$roboto-font-path: "../fonts";
|
||||
|
||||
// http://ionicframework.com/docs/v2/theming/
|
||||
|
||||
|
||||
// App Shared Variables
|
||||
// --------------------------------------------------
|
||||
// To customize the look and feel of this app, you can override
|
||||
// the Sass variables found in Ionic's source scss files. Setting
|
||||
// variables before Ionic's Sass will use these variables rather than
|
||||
// Ionic's default Sass variable values. App Shared Sass imports belong
|
||||
// in the app.core.scss file and not this file. Sass variables specific
|
||||
// to the mode belong in either the app.ios.scss or app.md.scss files.
|
||||
|
||||
|
||||
// App Shared Color Variables
|
||||
// --------------------------------------------------
|
||||
// It's highly recommended to change the default colors
|
||||
// to match your app's branding. Ionic uses a Sass map of
|
||||
// colors so you can add, rename and remove colors as needed.
|
||||
// The "primary" color is the only required color in the map.
|
||||
// Both iOS and MD colors can be further customized if colors
|
||||
// are different per mode.
|
||||
|
||||
$colors: (
|
||||
primary: #387ef5,
|
||||
secondary: #32db64,
|
||||
danger: #f53d3d,
|
||||
light: #f4f4f4,
|
||||
dark: #222,
|
||||
vibrant: rebeccapurple,
|
||||
bright: #FFC125
|
||||
);
|
||||
|
||||
@import "../ionic/ionic.md";
|
||||
|
||||
@@ -634,6 +634,7 @@ function buildDemoSass(isProductionMode) {
|
||||
(function combineSass() {
|
||||
gulp.src([
|
||||
sassVars,
|
||||
'demos/app.variables.scss',
|
||||
'demos/app.ios.scss'
|
||||
])
|
||||
.pipe(concat('output.ios.scss'))
|
||||
@@ -641,6 +642,7 @@ function buildDemoSass(isProductionMode) {
|
||||
|
||||
gulp.src([
|
||||
sassVars,
|
||||
'demos/app.variables.scss',
|
||||
'demos/app.md.scss'
|
||||
])
|
||||
.pipe(concat('output.md.scss'))
|
||||
|
||||
Reference in New Issue
Block a user