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

themes wip

Browse Source
This commit is contained in:
Adam Bradley
2015-08-11 17:36:28 -05:00
parent 3fafab21f0
commit f70aff1895
29 changed files with 500 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
gulpfile.js
View File

@ -294,6 +294,17 @@ gulp.task('sass', function() {
.pipe(gulp.dest('dist/css/')); .pipe(gulp.dest('dist/css/'));
}); });
gulp.task('sass.dark', function() {
return gulp.src('scripts/build/ionic.dark.scss')
.pipe(sass({
onError: function(err) {
console.log(err)
}
}))
.pipe(autoprefixer(buildConfig.autoprefixer))
.pipe(gulp.dest('dist/css/'));
});
gulp.task('fonts', function() { gulp.task('fonts', function() {
return gulp.src('ionic/components/icon/fonts/**/*') return gulp.src('ionic/components/icon/fonts/**/*')
.pipe(gulp.dest('dist/fonts')); .pipe(gulp.dest('dist/fonts'));

66
ionic/components/app/colors.scss
View File

@ -1,66 +0,0 @@
// App Colors
// --------------------------------------------------
// Color values and names can be changed here
// inverse: A color that looks good as a foreground to the base
//
// Use get-color($style, base/inverse) to grab
$colors: (
// Brand colors
// ----------------------
primary: (
base: #387ef5,
light: #387ef5,
inverse: #fff
),
secondary: (
base: #32db64,
light: #32db64,
inverse: #fff
),
// Action Colors
// ----------------------
danger: (
base: #f53d3d,
light: #f53d3d,
inverse: #fff,
),
// Shade Colors
// ----------------------
light: (
base: #fff,
light: #ddd,
inverse: #444,
),
stable: (
base: #f4f4f4,
light: #888,
inverse: #444,
),
dark: (
base: #222,
light: #222,
inverse: #fff,
),
) !default;
// Placeholder Colors
// --------------------------------------------------
// Default colors which are meant to be overridden
$placeholder-background: #f9f9f9 !default;

48
ionic/components/button/button-clear.scss Normal file
View File

@ -0,0 +1,48 @@
// Clear Button
// --------------------------------------------------
button,
[button] {
&[clear] {
border-color: transparent;
background: transparent;
color: darken-or-lighten($button-color);
&.activated {
opacity: 0.4;
}
}
}
// Clear Button Color Mixin
// --------------------------------------------------
@mixin button-clear($fg-color) {
&[clear] {
border-color: transparent;
background: transparent;
color: $fg-color;
}
}
// Generate Clear Button Colors
// --------------------------------------------------
@each $color, $value in auxiliary-colors() {
button[#{$color}],
[button][#{$color}] {
$fg-color: darken-or-lighten($value);
@include button-clear($fg-color);
}
}

55
ionic/components/button/button-outline.scss Normal file
View File

@ -0,0 +1,55 @@
// Outline Button
// --------------------------------------------------
button,
[button] {
&[outline] {
border: 1px solid $button-color;
background: $background-color;
color: $button-color;
&.activated {
opacity: 1;
color: $background-color;
background-color: $button-color;
}
}
}
// Outline Button Color Mixin
// --------------------------------------------------
@mixin button-outline($fg-color) {
&[outline] {
border-color: $fg-color;
background: $background-color;
color: $fg-color;
&.activated {
color: $background-color;
background-color: $fg-color;
}
}
}
// Outline Clear Button Colors
// --------------------------------------------------
@each $color, $value in auxiliary-colors() {
button[#{$color}],
[button][#{$color}] {
$fg-color: darken-or-lighten($value);
@include button-outline($fg-color);
}
}

31
ionic/components/button/button-size.scss Normal file
View File

@ -0,0 +1,31 @@
// Button Sizes
// --------------------------------------------------
$button-large-font-size: 2rem !default;
$button-large-height: 5.4rem !default;
$button-large-padding: 1.4rem !default;
$button-small-font-size: 1.3rem !default;
$button-small-height: 2.8rem !default;
$button-small-padding: 1.1rem !default;
button,
[button] {
&[large] {
padding: 0 $button-large-padding;
min-width: ($button-large-padding * 4);
min-height: $button-large-height;
font-size: $button-large-font-size;
}
&[small] {
padding: 0 $button-small-padding;
min-width: ($button-small-padding * 3);
min-height: $button-small-height;
font-size: $button-small-font-size;
}
}

148
ionic/components/button/button.scss
View File

@ -1,5 +1,5 @@
// Core Button Variables // Button Variables
// -------------------------------------------------- // --------------------------------------------------
$button-font-size: 1.6rem !default; $button-font-size: 1.6rem !default;
@ -9,19 +9,16 @@ $button-height: 4.4rem !default;
$button-border-width: 1px !default; $button-border-width: 1px !default;
$button-border-radius: 4px !default; $button-border-radius: 4px !default;
$button-large-font-size: 2rem !default;
$button-large-height: 5.4rem !default;
$button-large-padding: 1.4rem !default;
$button-small-font-size: 1.3rem !default;
$button-small-height: 2.8rem !default;
$button-small-padding: 1.1rem !default;
$button-round-border-radius: 64px !default; $button-round-border-radius: 64px !default;
$button-round-padding: 0 2.6rem !default; $button-round-padding: 0 2.6rem !default;
$button-color: color(primary) !default;
$button-color-activated: darken-or-lighten($button-color) !default;
$button-text-color: inverse(primary) !default;
$button-hover-opacity: 0.88 !default;
// Core Button
// Default Button
// -------------------------------------------------- // --------------------------------------------------
button, button,
@ -33,7 +30,8 @@ button,
align-items: center; align-items: center;
justify-content: center; justify-content: center;
will-change: transform; will-change: background-color, opacity;
transition: background-color, opacity 100ms linear;
margin: $button-margin; margin: $button-margin;
line-height: 1; line-height: 1;
@ -58,46 +56,30 @@ button,
padding: $button-padding; padding: $button-padding;
min-height: $button-height; min-height: $button-height;
background: transparent;
text-align: center; text-align: center;
font-size: $button-font-size; font-size: $button-font-size;
border: transparent; border: transparent;
border-radius: $button-border-radius; border-radius: $button-border-radius;
&[large] { background: $button-color;
padding: 0 $button-large-padding; color: $button-text-color;
min-width: ($button-large-padding * 4);
min-height: $button-large-height; &:hover,
font-size: $button-large-font-size; &.hover {
opacity: $button-hover-opacity;
color: $button-text-color;
text-decoration: none;
} }
&[small] { &.activated {
padding: 0 $button-small-padding; opacity: 1;
min-width: ($button-small-padding * 3); background-color: $button-color-activated;
min-height: $button-small-height;
font-size: $button-small-font-size;
} }
// Core Button Types // Button Types
// -------------------------------------------------- // --------------------------------------------------
&[clear] {
border-color: transparent;
background: none;
}
&[outline] {
background: none;
&[full] {
border-radius: 0;
border-right-width: 0;
border-left-width: 0;
}
}
&[block] { &[block] {
display: flex; display: flex;
clear: both; clear: both;
@ -117,13 +99,12 @@ button,
border-radius: 0; border-radius: 0;
border-right-width: 0; border-right-width: 0;
border-left-width: 0; border-left-width: 0;
}
&.disabled, &[outline] {
&[disabled] { border-radius: 0;
opacity: .4; border-right-width: 0;
cursor: default !important; border-left-width: 0;
pointer-events: none; }
} }
&[round] { &[round] {
@ -131,6 +112,13 @@ button,
padding: $button-round-padding; padding: $button-round-padding;
} }
&.disabled,
&[disabled] {
opacity: 0.4;
cursor: default !important;
pointer-events: none;
}
} }
@ -139,88 +127,38 @@ button,
margin-top: 0; margin-top: 0;
} }
// Button Misc
// --------------------------------------------------
a[button] { a[button] {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
// Core Button Mixins // Default Button Color Mixin
// -------------------------------------------------- // --------------------------------------------------
@mixin button-default($bg-color, $fg-color) { @mixin button-default($bg-color, $bg-color-activated, $text-color) {
background-color: $bg-color; background-color: $bg-color;
color: $fg-color; color: $text-color;
transition: background-color,opacity 100ms linear;
&[full][outline] {
border-radius: 0;
border-right-width: 0;
border-left-width: 0;
}
&:hover,
&.hover {
opacity: 0.88;
color: $fg-color;
text-decoration: none;
}
&.activated { &.activated {
opacity: 1; background-color: $bg-color-activated;
background-color: darken($bg-color, 12%);
}
}
@mixin button-clear($fg-color) {
&[clear] {
color: $fg-color;
background: none;
&.activated {
opacity: 0.4;
}
}
}
@mixin button-outline($fg-color) {
&[outline] {
border: 1px solid $fg-color;
background: transparent;
color: $fg-color;
&.activated {
color: white;
background-color: rgb(red($fg-color), green($fg-color), blue($fg-color));
}
} }
} }
// Core Button Color Generation // Generate Default Button Colors
// -------------------------------------------------- // --------------------------------------------------
@each $color, $value in $colors { @each $color, $value in auxiliary-colors() {
button[#{$color}], button[#{$color}],
[button][#{$color}] { [button][#{$color}] {
@if lightness(get-color($color, base)) > 90 { $bg-color: $value;
$fg-color: get-color($color, inverse); $bg-color-activated: darken-or-lighten($bg-color);
} @else { $text-color: inverse($color);
$fg-color: get-color($color, base); @include button-default($bg-color, $bg-color-activated, $text-color);
}
@include button-default(get-color($color, base),
get-color($color, inverse));
@include button-clear($fg-color);
@include button-outline(get-color($color, light));
} }
} }

20
ionic/components/button/test/basic/main.html
View File

@ -1,5 +1,9 @@
<div class="padding" style="text-align:center"> <ion-toolbar>
<ion-title>Default Buttons</ion-title>
</ion-toolbar>
<ion-content class="padding" style="text-align:center">
<p> <p>
<button>D</button> <button>D</button>
@ -7,12 +11,6 @@
<button class="activated">D.activated</button> <button class="activated">D.activated</button>
</p> </p>
<p>
<button primary>P</button>
<button primary class="hover">P.hover</button>
<button primary class="activated">P.activated</button>
</p>
<p> <p>
<button secondary>S</button> <button secondary>S</button>
<button secondary class="hover">S.hover</button> <button secondary class="hover">S.hover</button>
@ -31,16 +29,10 @@
<button light class="activated">L.activated</button> <button light class="activated">L.activated</button>
</p> </p>
<p>
<button stable>S</button>
<button stable class="hover">S.hover</button>
<button stable class="activated">S.activated</button>
</p>
<p> <p>
<button dark>D</button> <button dark>D</button>
<button dark class="hover">D.hover</button> <button dark class="hover">D.hover</button>
<button dark class="activated">D.activated</button> <button dark class="activated">D.activated</button>
</p> </p>
</div> </ion-content>

8
ionic/components/button/test/block/main.html
View File

@ -1,5 +1,9 @@
<div class="padding"> <ion-toolbar>
<ion-title>Block Buttons</ion-title>
</ion-toolbar>
<ion-content class="padding" style="text-align:center">
<p> <p>
<a button block href="#">a[button][block]</a> <a button block href="#">a[button][block]</a>
@ -21,4 +25,4 @@
<button block clear stable>button[block]</button> <button block clear stable>button[block]</button>
</p> </p>
</div> </ion-content>

20
ionic/components/button/test/clear/main.html
View File

@ -1,5 +1,9 @@
<div class="padding" style="text-align:center"> <ion-toolbar>
<ion-title>Clear Buttons</ion-title>
</ion-toolbar>
<ion-content class="padding" style="text-align:center">
<p> <p>
<button clear>D</button> <button clear>D</button>
@ -7,12 +11,6 @@
<button clear class="activated">D.activated</button> <button clear class="activated">D.activated</button>
</p> </p>
<p>
<button clear primary>P</button>
<button clear primary class="hover">P.hover</button>
<button clear primary class="activated">P.activated</button>
</p>
<p> <p>
<button clear secondary>S</button> <button clear secondary>S</button>
<button clear secondary class="hover">S.hover</button> <button clear secondary class="hover">S.hover</button>
@ -31,16 +29,10 @@
<button clear light class="activated">L.activated</button> <button clear light class="activated">L.activated</button>
</p> </p>
<p>
<button clear stable>S</button>
<button clear stable class="hover">S.hover</button>
<button clear stable class="activated">S.activated</button>
</p>
<p> <p>
<button clear dark>D</button> <button clear dark>D</button>
<button clear dark class="hover">D.hover</button> <button clear dark class="hover">D.hover</button>
<button clear dark class="activated">D.activated</button> <button clear dark class="activated">D.activated</button>
</p> </p>
</div> </ion-content>

14
ionic/components/button/test/fab/main.html
View File

@ -1,10 +1,16 @@
<div> <ion-toolbar>
<button fab fab-left fab-top primary><i class="icon ion-plus"></i></button> <ion-title>FAB Buttons</ion-title>
</ion-toolbar>
<ion-content>
<button fab fab-left fab-top><i class="icon ion-plus"></i></button>
<button fab fab-center fab-top secondary><i class="icon ion-plus"></i></button> <button fab fab-center fab-top secondary><i class="icon ion-plus"></i></button>
<button fab fab-right fab-top danger><i class="icon ion-plus"></i></button> <button fab fab-right fab-top danger><i class="icon ion-plus"></i></button>
<button fab fab-left fab-bottom light><i class="icon ion-plus"></i></button> <button fab fab-left fab-bottom light><i class="icon ion-plus"></i></button>
<button fab fab-center fab-bottom stable><i class="icon ion-plus"></i></button> <button fab fab-center fab-bottom><i class="icon ion-plus"></i></button>
<button fab fab-right fab-bottom dark><i class="icon ion-plus"></i></button> <button fab fab-right fab-bottom dark><i class="icon ion-plus"></i></button>
</div>
</ion-content>

20
ionic/components/button/test/full/main.html
View File

@ -1,20 +1,28 @@
<ion-toolbar>
<ion-title>Full Buttons</ion-title>
</ion-toolbar>
<ion-content>
<div> <div>
<a button full href="#">a[button][full]</a> <a button full href="#">a[button][full]</a>
<button full>button[full]</button> <button full>button[full]</button>
</div> </div>
<div> <div>
<a button full primary href="#">a[button][full][primary]</a> <a button full outline secondary href="#">a[button][full][outline][secondary]</a>
<button full primary>button[full][primary]</button> <button full outline secondary>button[full][outline][secondary]</button>
</div> </div>
<div> <div>
<a button full outline primary href="#">a[button][full][outline][primary]</a> <a button full clear light href="#">a[button][full][clear][light]</a>
<button full outline primary>button[full][outline][primary]</button> <button full clear light>button[full][clear][light]</button>
</div> </div>
<div> <div>
<a button full clear primary href="#">a[button][full][clear][primary]</a> <a button full clear dark href="#">a[button][full][clear][dark]</a>
<button full clear primary>button[full][clear][primary]</button> <button full clear dark>button[full][clear][dark]</button>
</div> </div>
</ion-content>

44
ionic/components/button/test/icons/main.html
View File

@ -1,97 +1,101 @@
<div class="padding"> <ion-toolbar>
<ion-title>Buttons Icons</ion-title>
</ion-toolbar>
<ion-content class="padding">
<div> <div>
<button primary> <button>
<icon name="ion-home"></icon> <icon name="ion-home"></icon>
Left Icon Left Icon
</button> </button>
<a button primary> <a button>
<icon name="ion-home"></icon> <icon name="ion-home"></icon>
Left Icon Left Icon
</a> </a>
</div> </div>
<div> <div>
<button primary> <button>
Right Icon Right Icon
<icon name="ion-star"></icon> <icon name="ion-star"></icon>
</button> </button>
<a button primary> <a button>
Right Icon Right Icon
<icon name="ion-star"></icon> <icon name="ion-star"></icon>
</a> </a>
</div> </div>
<div> <div>
<button primary> <button>
<icon name="ion-flag"></icon> <icon name="ion-flag"></icon>
</button> </button>
<a button primary> <a button>
<icon name="ion-flag"></icon> <icon name="ion-flag"></icon>
</a> </a>
</div> </div>
<div> <div>
<button large primary> <button large>
<icon name="ion-help-circled"></icon> <icon name="ion-help-circled"></icon>
Left, Large Left, Large
</button> </button>
<a button large primary> <a button large>
<icon name="ion-help-circled"></icon> <icon name="ion-help-circled"></icon>
Left, Large Left, Large
</a> </a>
</div> </div>
<div> <div>
<button large primary> <button large>
Right, Large Right, Large
<icon name="ion-settings"></icon> <icon name="ion-settings"></icon>
</button> </button>
<a button large primary> <a button large>
Right, Large Right, Large
<icon name="ion-settings"></icon> <icon name="ion-settings"></icon>
</a> </a>
</div> </div>
<div> <div>
<button large primary> <button large>
<icon name="ion-heart"></icon> <icon name="ion-heart"></icon>
</button> </button>
<a button large primary> <a button large>
<icon name="ion-heart"></icon> <icon name="ion-heart"></icon>
</a> </a>
</div> </div>
<div> <div>
<button small primary> <button small>
<icon name="ion-checkmark"></icon> <icon name="ion-checkmark"></icon>
Left, Small Left, Small
</button> </button>
<a button small primary> <a button small>
<icon name="ion-checkmark"></icon> <icon name="ion-checkmark"></icon>
Left, Small Left, Small
</a> </a>
</div> </div>
<div> <div>
<button small primary> <button small>
Right, Small Right, Small
<icon name="ion-forward"></icon> <icon name="ion-forward"></icon>
</button> </button>
<a button small primary> <a button small>
Right, Small Right, Small
<icon name="ion-forward"></icon> <icon name="ion-forward"></icon>
</a> </a>
</div> </div>
<div> <div>
<button small primary> <button small>
<icon name="ion-search"></icon> <icon name="ion-search"></icon>
</button> </button>
<a button small primary> <a button small>
<icon name="ion-search"></icon> <icon name="ion-search"></icon>
</a> </a>
</div> </div>
</div> </ion-content>

38
ionic/components/button/test/outline/main.html
View File

@ -1,5 +1,9 @@
<div class="padding" style="text-align:center"> <ion-toolbar>
<ion-title>Outline Buttons</ion-title>
</ion-toolbar>
<ion-content class="padding" style="text-align:center">
<p> <p>
<button outline>D</button> <button outline>D</button>
@ -7,12 +11,6 @@
<button outline class="activated">D.activated</button> <button outline class="activated">D.activated</button>
</p> </p>
<p>
<button outline primary>P</button>
<button outline primary class="hover">P.hover</button>
<button outline primary class="activated">P.activated</button>
</p>
<p> <p>
<button outline secondary>S</button> <button outline secondary>S</button>
<button outline secondary class="hover">S.hover</button> <button outline secondary class="hover">S.hover</button>
@ -31,12 +29,6 @@
<button outline light class="activated">L.activated</button> <button outline light class="activated">L.activated</button>
</p> </p>
<p>
<button outline stable>S</button>
<button outline stable class="hover">S.hover</button>
<button outline stable class="activated">S.activated</button>
</p>
<p> <p>
<button outline dark>D</button> <button outline dark>D</button>
<button outline dark class="hover">D.hover</button> <button outline dark class="hover">D.hover</button>
@ -44,15 +36,27 @@
</p> </p>
<p> <p>
<button outline primary block>button[outline][block][primary]</button> <button outline block>button[outline][block]</button>
</p> </p>
<p> <p>
<button outline primary block class="hover">[outline][block][primary].hover</button> <button outline block class="hover">[outline][block].hover</button>
</p> </p>
<p> <p>
<button outline primary block class="activated">[outline][block][primary].activated</button> <button outline block class="activated">[outline][block].activated</button>
</p> </p>
</div> <p>
<button outline block secondary>button[outline][block][secondary]</button>
</p>
<p>
<button outline block secondary class="hover">[outline][block][secondary].hover</button>
</p>
<p>
<button outline block secondary class="activated">[outline][block][secondary].activated</button>
</p>
</ion-content>

17
ionic/components/button/test/round/main.html
View File

@ -1,18 +1,23 @@
<div> <ion-toolbar>
<ion-title>Round Buttons</ion-title>
</ion-toolbar>
<ion-content class="padding">
<button round>button</button>
<button round light>button light</button> <button round light>button light</button>
<button round stable>button stable</button>
<button round primary>button primary</button>
<button round secondary>button secondary</button> <button round secondary>button secondary</button>
<button round danger>button danger</button> <button round danger>button danger</button>
<button round dark>button dark</button> <button round dark>button dark</button>
<button round outline>button</button>
<button round light outline>button light</button> <button round light outline>button light</button>
<button round stable outline>button stable</button>
<button round primary outline>button primary</button>
<button round secondary outline>button secondary</button> <button round secondary outline>button secondary</button>
<button round danger outline>button danger</button> <button round danger outline>button danger</button>
<button round dark outline>button dark</button> <button round dark outline>button dark</button>
</div>
</ion-content>
<style> <style>
button { button {
display: block !important; display: block !important;

36
ionic/components/button/test/sizes/main.html
View File

@ -1,29 +1,33 @@
<div class="padding"> <ion-toolbar>
<ion-title>Button Sizes</ion-title>
</ion-toolbar>
<ion-content class="padding">
<p> <p>
<a button primary href="#">a[button]</a> <a button href="#">a[button]</a>
<button primary>button</button> <button>button</button>
</p> </p>
<p> <p>
<a button small primary href="#">a[button][small]</a> <a button small href="#">a[button][small]</a>
<button small primary>button[small]</button> <button small>button[small]</button>
</p> </p>
<p> <p>
<a button outline small primary href="#">a[button][outline][small]</a> <a button outline small href="#">a[button][outline][small]</a>
<button outline small primary>button[outline][small]</button> <button outline small>button[outline][small]</button>
</p> </p>
<p> <p>
<a button clear small primary href="#">a[button][clear][small]</a> <a button clear small href="#">a[button][clear][small]</a>
<button clear small primary>button[clear][small]</button> <button clear small>button[clear][small]</button>
</p> </p>
<p> <p>
<button large primary>[large]</button> <button large>[large]</button>
<a button large primary href="#"> <a button large href="#">
<span style="font-size:48px">H</span> <span style="font-size:48px">H</span>
<span style="font-size:38px">E</span> <span style="font-size:38px">E</span>
<span style="font-size:32px">L</span> <span style="font-size:32px">L</span>
@ -32,13 +36,13 @@
</p> </p>
<p> <p>
<a button outline large primary href="#">a[button][outline][large]</a> <a button outline large href="#">a[button][outline][large]</a>
<button outline large primary>button[outline][large]</button> <button outline large>button[outline][large]</button>
</p> </p>
<p> <p>
<a button clear large primary href="#">a[clear][large]</a> <a button clear large href="#">a[clear][large]</a>
<button clear large primary>button[clear][large]</button> <button clear large>button[clear][large]</button>
</p> </p>
</div> </ion-content>

49
ionic/components/checkbox/extensions/ios.scss
View File

@ -1,30 +1,34 @@
// iOS Checkbox // iOS Checkbox Structure
// -------------------------------------------------- // --------------------------------------------------
$checkbox-ios-icon-size: 21px !default; $checkbox-ios-icon-size: 21px !default;
$checkbox-ios-background-color: get-color(primary, base) !default; $checkbox-ios-bg-color-off: $background-color !default;
$checkbox-ios-foreground-color: get-color(primary, inverse) !default; $checkbox-ios-border-color-off: $border-color !default;
$checkbox-ios-bg-color-on: color(primary) !default;
$checkbox-ios-border-color-on: color(primary) !default;
$checkbox-ios-checkmark-color-on: $background-color !default;
.checkbox[mode="ios"] { .checkbox[mode=ios] {
.checkbox-icon { .checkbox-icon {
position: relative; position: relative;
width: $checkbox-ios-icon-size; width: $checkbox-ios-icon-size;
height: $checkbox-ios-icon-size; height: $checkbox-ios-icon-size;
border-radius: 50%; border-radius: 50%;
background-color: $checkbox-ios-foreground-color; border: 1px solid $checkbox-ios-border-color-off;
border: 1px solid #c4c4c4; background-color: $checkbox-ios-bg-color-off;
} }
&[aria-checked=true] .checkbox-icon { &[aria-checked=true] .checkbox-icon {
background-color: $checkbox-ios-background-color; background-color: $checkbox-ios-bg-color-on;
border-color: $checkbox-ios-background-color; border-color: $checkbox-ios-border-color-on;
}
&::after { &[aria-checked=true] .checkbox-icon::after {
position: absolute; position: absolute;
border: 1px solid $checkbox-ios-foreground-color; border: 1px solid $checkbox-ios-checkmark-color-on;
top: 3px; top: 3px;
left: 7px; left: 7px;
width: 4px; width: 4px;
@ -34,10 +38,31 @@ $checkbox-ios-foreground-color: get-color(primary, inverse) !default;
content: ''; content: '';
transform: rotate(45deg); transform: rotate(45deg);
} }
} }
.input-label {
color: inherit; // iOS Checkbox Color Mixin
// --------------------------------------------------
@mixin checkbox-theme-ios($color, $bg-on) {
.checkbox[mode=ios][#{$color}] {
&[aria-checked=true] .checkbox-icon {
background-color: $bg-on;
border-color: $bg-on;
} }
} }
}
// Generate iOS Checkbox Auxiliary Colors
// --------------------------------------------------
@each $color, $value in auxiliary-colors() {
@include checkbox-theme-ios($color, $value);
}

4
ionic/components/checkbox/test/basic/main.html
View File

@ -24,6 +24,10 @@
Grape, value=grape, init checked, disabled Grape, value=grape, init checked, disabled
</ion-checkbox> </ion-checkbox>
<ion-checkbox secondary checked="true">
secondary color
</ion-checkbox>
</ion-list> </ion-list>
</form> </form>

4
ionic/components/content/content.scss
View File

@ -2,8 +2,8 @@
// Content // Content
// -------------------------------------------------- // --------------------------------------------------
$content-container-background-color: #fff !default; $content-container-background-color: $background-color !default;
$content-background-color: #fff !default; $content-background-color: $background-color !default;
.content-container { .content-container {

3
ionic/components/content/extensions/ios.scss
View File

@ -2,7 +2,7 @@
// iOS Content // iOS Content
// -------------------------------------------------- // --------------------------------------------------
$content-container-ios-background-color: #000 !default; /*$content-container-ios-background-color: #000 !default;
$content-ios-background-color: #efeff4 !default; $content-ios-background-color: #efeff4 !default;
@ -17,3 +17,4 @@ $content-ios-background-color: #efeff4 !default;
} }
} }
*/

6
ionic/components/tabs/tabs.scss
View File

@ -2,10 +2,10 @@
// Tabs // Tabs
// -------------------------------------------------- // --------------------------------------------------
$tab-bar-background-color: $placeholder-background !default; $tab-bar-background-color: $toolbar-background-color !default;
$tab-button-text-inactive: #8c8c8c !default; $tab-button-text-active: $toolbar-active-color !default;
$tab-button-text-active: get-color(primary, base) !default; $tab-button-text-inactive: $toolbar-inactive-color !default;
$tab-button-padding: 10px !default; $tab-button-padding: 10px !default;
$tab-button-min-width: 80px !default; $tab-button-min-width: 80px !default;
$tab-button-max-width: 160px !default; $tab-button-max-width: 160px !default;

2
ionic/components/toolbar/extensions/ios.scss
View File

@ -10,7 +10,7 @@ $toolbar-order-ios: (
); );
$toolbar-ios-height: 4.4rem !default; $toolbar-ios-height: 4.4rem !default;
$toolbar-ios-border-color: #c4c4c4 !default; $toolbar-ios-border-color: $toolbar-border-color !default;
$toolbar-ios-button-font-size: 1.7rem !default; $toolbar-ios-button-font-size: 1.7rem !default;
$toolbar-ios-title-font-size: 1.7rem !default; $toolbar-ios-title-font-size: 1.7rem !default;

9
ionic/components/toolbar/toolbar.scss
View File

@ -9,10 +9,6 @@ $toolbar-order: (
secondary: 40 secondary: 40
); );
$toolbar-background: $placeholder-background !default;
$toolbar-button-text-color: #007aff !default;
$toolbar-title-text-color: #000 !default;
.toolbar { .toolbar {
position: relative; position: relative;
@ -28,11 +24,11 @@ $toolbar-title-text-color: #000 !default;
order: $flex-order-toolbar-top; order: $flex-order-toolbar-top;
flex: 0; flex: 0;
background-color: $toolbar-background; background-color: $toolbar-background-color;
button, button,
[button] { [button] {
color: $toolbar-button-text-color; color: $toolbar-active-color;
box-shadow: none; box-shadow: none;
} }
} }
@ -66,6 +62,7 @@ ion-title {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
color: $toolbar-text-color;
} }
.toolbar-item { .toolbar-item {

11
ionic/ionic.scss
View File

@ -7,12 +7,17 @@
"components/app/z-index", "components/app/z-index",
"components/app/flex-order", "components/app/flex-order",
"components/app/normalize", "components/app/normalize",
"components/app/colors",
"components/app/structure", "components/app/structure",
"components/app/typography", "components/app/typography",
"util/util"; "util/util";
// Default Theme
// If a theme wasn't set then it'll use this default
@import
"themes/default";
// Core Components // Core Components
@import @import
"components/toolbar/toolbar", "components/toolbar/toolbar",
@ -21,6 +26,9 @@
"components/aside/aside", "components/aside/aside",
"components/badge/badge", "components/badge/badge",
"components/button/button", "components/button/button",
"components/button/button-clear",
"components/button/button-outline",
"components/button/button-size",
"components/button/button-icon", "components/button/button-icon",
"components/button/button-fab", "components/button/button-fab",
"components/card/card", "components/card/card",
@ -89,3 +97,4 @@
// Platforms // Platforms
@import @import
"platform/cordova"; "platform/cordova";

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

@ -0,0 +1,27 @@
// Dark Theme
// ----------------------------------
$colors: (
primary: #387ef5,
secondary: #32db64,
danger: #f53d3d,
light: #fff,
dark: #333,
) !default;
$text-color: #fff !default;
$background-color: #222 !default;
$border-color: #666 !default;
$link-color: map-get($colors, primary) !default;
$link-hover-color: lighten($link-color, 15%) !default;
$toolbar-background-color: #111 !default;
$toolbar-border-color: #000 !default;
$toolbar-text-color: $text-color !default;
$toolbar-active-color: $link-color !default;
$toolbar-inactive-color: #8c8c8c !default;

27
ionic/themes/default.scss Normal file
View File

@ -0,0 +1,27 @@
// Default Theme
// ----------------------------------
$colors: (
primary: #387ef5,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
) !default;
$text-color: #000 !default;
$background-color: #fff !default;
$border-color: #ddd !default;
$link-color: map-get($colors, primary) !default;
$link-hover-color: darken($link-color, 15%) !default;
$toolbar-background-color: #f9f9f9 !default;
$toolbar-border-color: #c4c4c4 !default;
$toolbar-text-color: $text-color !default;
$toolbar-active-color: $link-color !default;
$toolbar-inactive-color: #8c8c8c !default;

43
ionic/util/mixins.scss
View File

@ -3,24 +3,43 @@
// -------------------------------------------------- // --------------------------------------------------
@function get-color($color, $tone: base) { @function get-color($color, $tone: base) {
@return map-get(map-get($colors, $color), $tone); @return red;
} }
@function inverse-tone($color) { @function inverse($color-name) {
// For a lighter colored "base" the darker colored "inverse" @if (lightness( color($color-name) ) > 70) {
// the inverse-tone will be the "light" tone @return #000;
}
@else {
@return #fff;
}
}
// For a darker colored "base" the lighter colored "inverse" @function darken-or-lighten($color, $amount:12%) {
// the inverse-tone will be the "dark" tone // lightness is a percent value, 0% darkest, 100% lightest
$lightness-percent: lightness($color);
$base: map-get(map-get($colors, $color), base);
$inverse: map-get(map-get($colors, $color), inverse);
$light: map-get(map-get($colors, $color), light);
$dark: map-get(map-get($colors, $color), dark);
$lightness: lightness($base) - lightness($inverse); @if ($lightness-percent > 80) {
// really light foreground color, so really darken it up
@return darken($color, ($amount * 2));
}
@return if($lightness < 0, $dark, $light); @if ($lightness-percent < 35) {
// dark foreground color, so light it up
@return lighten($color, $amount);
}
// default to darken
@return darken($color, $amount);
}
@function color($color-name) {
@return map-get($colors, $color-name);
}
@function auxiliary-colors() {
@return map-remove($colors, primary);
} }

2
package.json
View File

@ -25,7 +25,7 @@
"gulp-insert": "^0.5.0", "gulp-insert": "^0.5.0",
"gulp-plumber": "^1.0.0", "gulp-plumber": "^1.0.0",
"gulp-rename": "~1.2.0", "gulp-rename": "~1.2.0",
"gulp-sass": "^1.3.3", "gulp-sass": "^2.0.4",
"gulp-shell": "^0.4.0", "gulp-shell": "^0.4.0",
"gulp-typescript": "^2.7.7", "gulp-typescript": "^2.7.7",
"gulp-util": "^3.0.6", "gulp-util": "^3.0.6",

11
scripts/build/ionic.dark.scss Normal file
View File

@ -0,0 +1,11 @@
// Ionic Dark
// Sass file to create and demo the default dark theme
// Manually set to use the dark theme
@import "ionic/themes/dark";
// Import Ionic SCSS
@import "ionic/ionic";

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

@ -5,7 +5,19 @@
<!-- https://www.chromium.org/developers/design-documents/chromium-graphics/how-to-get-gpu-rasterization --> <!-- https://www.chromium.org/developers/design-documents/chromium-graphics/how-to-get-gpu-rasterization -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="../../../css/ionic.css" rel="stylesheet"> <script>
// dynamically load the stylesheet depending on theme querystring
// defaults to use the light-theme
var theme = 'ionic.css';
if (location.href.indexOf('ionictheme=dark') > -1) {
theme = 'ionic.dark.css';
}
var stylesheet = document.createElement('link');
stylesheet.setAttribute('rel', 'stylesheet');
stylesheet.setAttribute('href', '../../../css/' + theme);
document.getElementsByTagName('head')[0].appendChild(stylesheet);
</script>
<style> <style>
/* hack to create tall scrollable areas for testing using <f></f> */ /* hack to create tall scrollable areas for testing using <f></f> */