javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(themes): adjusted scss structure for additional themes

Browse Source 
Related #4967
This commit is contained in:
Adam Bradley
2016-02-02 10:02:21 -06:00
parent 5aa112a626
commit c2cf3b0636
12 changed files with 244 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
gulpfile.js
View File

@ -366,6 +366,26 @@ gulp.task('sass', function() {
.pipe(gulp.dest('dist/bundles/'));
});
gulp.task('sass.themes', function() {
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
function buildTheme(mode) {
gulp.src([
'scripts/e2e/ionic.' + mode + '.dark.scss'
])
.pipe(sass({
includePaths: [__dirname + '/node_modules/ionicons/dist/scss/'],
}).on('error', sass.logError)
)
.pipe(autoprefixer(buildConfig.autoprefixer))
.pipe(gulp.dest('dist/bundles/'));
}
buildTheme('ios');
buildTheme('md');
});
gulp.task('fonts', function() {
gulp.src([
'ionic/fonts/*.+(ttf|woff|woff2)',

8
ionic/components.core.scss
View File

@ -1,4 +1,8 @@
// Core Globals
@import "globals.core";
// Core App
@import
"components/app/normalize",
@ -19,9 +23,7 @@
"components/slides/slides";
// Ionicons
// soon to be replaced with SVGs
$font-path: "../fonts" !default;
// Ionicons (to be replaced with SVGs)
$ionicons: true !default;
@if ($ionicons) {
@import "fonts/ionicons";

4
ionic/components.ios.scss
View File

@ -1,6 +1,6 @@
// iOS Theme
@import "themes/default.ios";
// iOS Globals
@import "globals.ios";
// iOS Components

4
ionic/components.md.scss
View File

@ -1,6 +1,6 @@
// Material Design Theme
@import "themes/default.md";
// Material Design Globals
@import "globals.md";
// Material Design Components

4
ionic/globals.core.scss
View File

@ -9,3 +9,7 @@
// Global include-rtl
$include-rtl: true !default;
// Global font path
$font-path: "../fonts" !default;

68
ionic/themes/dark.ios.scss Normal file
View File

@ -0,0 +1,68 @@
@import "./dark";
// iOS Dark Theme
// ----------------------------------
$colors-ios: map-merge($colors, ()) !default;
$text-ios-color: $text-color !default;
$paragraph-ios-color: $paragraph-color !default;
$link-ios-color: map-get($colors-ios, primary) !default;
$background-ios-color: $background-color !default;
$subdued-text-ios-color: $subdued-text-color !default;
$font-family-ios-base: $font-family-base !default;
$font-size-ios-base: $font-size-base !default;
// iOS Toolbar
// --------------------------------------------------
$toolbar-ios-background: $toolbar-background !default;
$toolbar-ios-border-color: $toolbar-border-color !default;
$toolbar-ios-text-color: $toolbar-text-color !default;
$toolbar-ios-active-color: $toolbar-active-color !default;
$toolbar-ios-inactive-color: $toolbar-inactive-color !default;
// iOS List
// --------------------------------------------------
$list-ios-text-color: $list-text-color !default;
$list-ios-border-color: $list-border-color !default;
$list-ios-background-color: $list-background-color !default;
$list-ios-activated-background-color: #d9d9d9 !default;
// iOS Item
// --------------------------------------------------
$item-ios-padding-top: 12px !default;
$item-ios-padding-right: 16px !default;
$item-ios-padding-bottom: 13px !default;
$item-ios-padding-left: 16px !default;
$item-ios-padding-media-top: 10px !default;
$item-ios-padding-media-bottom: 10px !default;
$item-ios-padding-icon-top: 10px !default;
$item-ios-padding-icon-bottom: 9px !default;
// iOS Icon
// --------------------------------------------------
$icon-detail-push-background-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='fg-color'/></svg>" !default;
@mixin ios-detail-push-icon($fg-color) {
$svg: str-replace($icon-detail-push-background-svg, 'fg-color', $fg-color);
@include svg-background-image($svg);
}
// iOS Body
// --------------------------------------------------
@mixin ios-body() {
font-family: $font-family-ios-base;
font-size: $font-size-ios-base;
background-color: $background-ios-color;
}

73
ionic/themes/dark.md.scss Normal file
View File

@ -0,0 +1,73 @@
@import "./dark";
// Material Design Dark Theme
// ----------------------------------
$colors-md: map-merge($colors, ()) !default;
$text-md-color: $text-color !default;
$paragraph-md-color: $paragraph-color !default;
$link-md-color: map-get($colors-md, primary) !default;
$background-md-color: $background-color !default;
$subdued-text-md-color: $subdued-text-color !default;
$font-family-md-base: "Roboto", "Helvetica Neue", sans-serif !default;
$font-size-md-base: $font-size-base !default;
// Material Design Toolbar
// --------------------------------------------------
$toolbar-md-background: $toolbar-background !default;
$toolbar-md-border-color: $toolbar-border-color !default;
$toolbar-md-text-color: #424242 !default;
$toolbar-md-active-color: $toolbar-active-color !default;
$toolbar-md-inactive-color: $toolbar-inactive-color !default;
$toolbar-md-button-color: #424242 !default;
// Material Design List
// --------------------------------------------------
$list-md-text-color: $list-text-color !default;
$list-md-border-color: #dedede !default;
$list-md-background-color: $list-background-color !default;
$list-md-activated-background-color: #f1f1f1 !default;
// Material Design Item
// --------------------------------------------------
$item-md-padding-top: 13px !default;
$item-md-padding-right: 16px !default;
$item-md-padding-bottom: 13px !default;
$item-md-padding-left: 16px !default;
$item-md-padding-media-top: 9px !default;
$item-md-padding-media-bottom: 9px !default;
$item-md-padding-icon-top: 11px !default;
$item-md-padding-icon-bottom: 10px !default;
// Ripple Color
// --------------------------------------------------
@function ripple-background-color($button-color) {
@return rgba( red($button-color), green($button-color), blue($button-color), 0.1);
}
// Material Design Body
// --------------------------------------------------
@mixin md-body() {
font-family: $font-family-md-base;
font-size: $font-size-md-base;
background-color: $background-md-color;
}
// Roboto Font
@at-root {
@import "../fonts/roboto";
}

35
ionic/themes/dark.scss Normal file
View File

@ -0,0 +1,35 @@
@import '../globals.core';
// Dark Theme
// ----------------------------------
$colors: (
primary: #327eff,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
) !default;
$text-color: #fff !default;
$paragraph-color: $text-color !default;
$link-color: map-get($colors, primary) !default;
$background-color: #000 !default;
$subdued-text-color: #666 !default;
$font-family-base: -apple-system, "Helvetica Neue", "Roboto", sans-serif !default;
$font-size-base: 1.4rem !default; // 1.4rem == 14px
$toolbar-background: #000 !default;
$toolbar-border-color: #b2b2b2 !default;
$toolbar-text-color: $text-color !default;
$toolbar-active-color: $link-color !default;
$toolbar-inactive-color: #8c8c8c !default;
$list-text-color: $text-color !default;
$list-background-color: $background-color !default;
$list-border-color: #c8c7cc !default;

2
ionic/themes/default.scss
View File

@ -1,3 +1,5 @@
@import '../globals.core';
// Default Theme
// ----------------------------------

43
scripts/e2e/e2e.template.html
View File

@ -6,29 +6,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- using relative paths in order for snapshot e2e tests to also work -->
<link ios-href="../../../bundles/ionic.ios.css" rel="stylesheet">
<link md-href="../../../bundles/ionic.md.css" rel="stylesheet">
<script src="../../../js/es6-shim.min.js"></script>
<script src="../../../js/es6-module-loader.src.js"></script>
<script src="../../../js/system.src.js"></script>
<script src="../../../js/angular2-polyfills.js"></script>
<script src="../../../js/angular2.dev.js"></script>
<script src="../../../js/router.dev.js"></script>
<script src="../../../js/http.dev.js"></script>
<script src="../../../js/web-animations.min.js"></script>
<script src="../../../bundles/ionic.system.js"></script>
<script src="../../../js/Rx.js"></script>
<link id="iosLink" ios-href="../../../bundles/ionic.ios.css" rel="stylesheet">
<link id="mdLink" md-href="../../../bundles/ionic.md.css" rel="stylesheet">
<script>
if (!console.time) {
console.time = console.log;
}
if (!console.timeEnd) {
console.timeEnd = console.log;
}
console.time('script init');
if (location.href.indexOf('snapshot=true') > -1) {
document.documentElement.classList.add('snapshot');
} else {
@ -42,8 +23,27 @@
} else {
document.dir = 'ltr';
}
// dynamically change the <link>s href so the e2e tests can use dark themes via querystring
if (location.href.indexOf('theme=dark') > -1) {
var link = document.getElementById('iosLink');
link.setAttribute('ios-href', link.getAttribute('ios-href').replace('.css', '.dark.css'));
link = document.getElementById('mdLink');
link.setAttribute('md-href', link.getAttribute('md-href').replace('.css', '.dark.css'));
}
</script>
<script src="../../../js/es6-shim.min.js"></script>
<script src="../../../js/es6-module-loader.src.js"></script>
<script src="../../../js/system.src.js"></script>
<script src="../../../js/angular2-polyfills.js"></script>
<script src="../../../js/angular2.dev.js"></script>
<script src="../../../js/router.dev.js"></script>
<script src="../../../js/http.dev.js"></script>
<script src="../../../js/web-animations.min.js"></script>
<script src="../../../bundles/ionic.system.js"></script>
<script src="../../../js/Rx.js"></script>
<style>
.snapshot body {
/* crop an exact size */
@ -103,7 +103,6 @@
}
System.import('index.js').then(function(m) {}, console.error.bind(console));
console.timeEnd('script init');
</script>
</body>

6
scripts/e2e/ionic.ios.dark.scss Normal file
View File

@ -0,0 +1,6 @@
// For E2E dark theme tests
@import "../../ionic/themes/dark.ios.scss";
@import "../../ionic/ionic.ios.scss";

6
scripts/e2e/ionic.md.dark.scss Normal file
View File

@ -0,0 +1,6 @@
// For E2E dark theme tests
@import "../../ionic/themes/dark.md.scss";
@import "../../ionic/ionic.md.scss";