mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
themes wip
This commit is contained in:
Adam Bradley
11
gulpfile.js
11
gulpfile.js
@ -294,6 +294,17 @@ gulp.task('sass', function() {
|
||||
.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() {
|
||||
return gulp.src('ionic/components/icon/fonts/**/*')
|
||||
.pipe(gulp.dest('dist/fonts'));
|
||||
|
||||
@ -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
48
ionic/components/button/button-clear.scss
Normal 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
55
ionic/components/button/button-outline.scss
Normal 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
31
ionic/components/button/button-size.scss
Normal 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;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
|
||||
// Core Button Variables
|
||||
// Button Variables
|
||||
// --------------------------------------------------
|
||||
|
||||
$button-font-size: 1.6rem !default;
|
||||
@ -9,19 +9,16 @@ $button-height: 4.4rem !default;
|
||||
$button-border-width: 1px !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-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,
|
||||
@ -33,7 +30,8 @@ button,
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
will-change: transform;
|
||||
will-change: background-color, opacity;
|
||||
transition: background-color, opacity 100ms linear;
|
||||
|
||||
margin: $button-margin;
|
||||
line-height: 1;
|
||||
@ -58,46 +56,30 @@ button,
|
||||
padding: $button-padding;
|
||||
min-height: $button-height;
|
||||
|
||||
background: transparent;
|
||||
|
||||
text-align: center;
|
||||
font-size: $button-font-size;
|
||||
border: transparent;
|
||||
border-radius: $button-border-radius;
|
||||
|
||||
&[large] {
|
||||
padding: 0 $button-large-padding;
|
||||
min-width: ($button-large-padding * 4);
|
||||
min-height: $button-large-height;
|
||||
font-size: $button-large-font-size;
|
||||
background: $button-color;
|
||||
color: $button-text-color;
|
||||
|
||||
&:hover,
|
||||
&.hover {
|
||||
opacity: $button-hover-opacity;
|
||||
color: $button-text-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&[small] {
|
||||
padding: 0 $button-small-padding;
|
||||
min-width: ($button-small-padding * 3);
|
||||
min-height: $button-small-height;
|
||||
font-size: $button-small-font-size;
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
background-color: $button-color-activated;
|
||||
}
|
||||
|
||||
|
||||
// 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] {
|
||||
display: flex;
|
||||
clear: both;
|
||||
@ -117,13 +99,12 @@ button,
|
||||
border-radius: 0;
|
||||
border-right-width: 0;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled] {
|
||||
opacity: .4;
|
||||
cursor: default !important;
|
||||
pointer-events: none;
|
||||
&[outline] {
|
||||
border-radius: 0;
|
||||
border-right-width: 0;
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[round] {
|
||||
@ -131,6 +112,13 @@ button,
|
||||
padding: $button-round-padding;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled] {
|
||||
opacity: 0.4;
|
||||
cursor: default !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -139,88 +127,38 @@ button,
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
// Button Misc
|
||||
// --------------------------------------------------
|
||||
|
||||
a[button] {
|
||||
color: inherit;
|
||||
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;
|
||||
color: $fg-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;
|
||||
}
|
||||
color: $text-color;
|
||||
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
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));
|
||||
}
|
||||
background-color: $bg-color-activated;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Core Button Color Generation
|
||||
// Generate Default Button Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color, $value in $colors {
|
||||
@each $color, $value in auxiliary-colors() {
|
||||
|
||||
button[#{$color}],
|
||||
[button][#{$color}] {
|
||||
|
||||
@if lightness(get-color($color, base)) > 90 {
|
||||
$fg-color: get-color($color, inverse);
|
||||
} @else {
|
||||
$fg-color: get-color($color, base);
|
||||
}
|
||||
$bg-color: $value;
|
||||
$bg-color-activated: darken-or-lighten($bg-color);
|
||||
$text-color: inverse($color);
|
||||
@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));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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>
|
||||
<button>D</button>
|
||||
@ -7,12 +11,6 @@
|
||||
<button class="activated">D.activated</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button primary>P</button>
|
||||
<button primary class="hover">P.hover</button>
|
||||
<button primary class="activated">P.activated</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button secondary>S</button>
|
||||
<button secondary class="hover">S.hover</button>
|
||||
@ -31,16 +29,10 @@
|
||||
<button light class="activated">L.activated</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button stable>S</button>
|
||||
<button stable class="hover">S.hover</button>
|
||||
<button stable class="activated">S.activated</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button dark>D</button>
|
||||
<button dark class="hover">D.hover</button>
|
||||
<button dark class="activated">D.activated</button>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
@ -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>
|
||||
<a button block href="#">a[button][block]</a>
|
||||
@ -21,4 +25,4 @@
|
||||
<button block clear stable>button[block]</button>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
@ -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>
|
||||
<button clear>D</button>
|
||||
@ -7,12 +11,6 @@
|
||||
<button clear class="activated">D.activated</button>
|
||||
</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>
|
||||
<button clear secondary>S</button>
|
||||
<button clear secondary class="hover">S.hover</button>
|
||||
@ -31,16 +29,10 @@
|
||||
<button clear light class="activated">L.activated</button>
|
||||
</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>
|
||||
<button clear dark>D</button>
|
||||
<button clear dark class="hover">D.hover</button>
|
||||
<button clear dark class="activated">D.activated</button>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
@ -1,10 +1,16 @@
|
||||
|
||||
<div>
|
||||
<button fab fab-left fab-top primary><i class="icon ion-plus"></i></button>
|
||||
<ion-toolbar>
|
||||
<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-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-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>
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
|
||||
@ -1,20 +1,28 @@
|
||||
|
||||
<div>
|
||||
<a button full href="#">a[button][full]</a>
|
||||
<button full>button[full]</button>
|
||||
</div>
|
||||
<ion-toolbar>
|
||||
<ion-title>Full Buttons</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<div>
|
||||
<a button full primary href="#">a[button][full][primary]</a>
|
||||
<button full primary>button[full][primary]</button>
|
||||
</div>
|
||||
<ion-content>
|
||||
|
||||
<div>
|
||||
<a button full outline primary href="#">a[button][full][outline][primary]</a>
|
||||
<button full outline primary>button[full][outline][primary]</button>
|
||||
</div>
|
||||
<div>
|
||||
<a button full href="#">a[button][full]</a>
|
||||
<button full>button[full]</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a button full clear primary href="#">a[button][full][clear][primary]</a>
|
||||
<button full clear primary>button[full][clear][primary]</button>
|
||||
</div>
|
||||
<div>
|
||||
<a button full outline secondary href="#">a[button][full][outline][secondary]</a>
|
||||
<button full outline secondary>button[full][outline][secondary]</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a button full clear light href="#">a[button][full][clear][light]</a>
|
||||
<button full clear light>button[full][clear][light]</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a button full clear dark href="#">a[button][full][clear][dark]</a>
|
||||
<button full clear dark>button[full][clear][dark]</button>
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
|
||||
@ -1,97 +1,101 @@
|
||||
|
||||
<div class="padding">
|
||||
<ion-toolbar>
|
||||
<ion-title>Buttons Icons</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-content class="padding">
|
||||
|
||||
<div>
|
||||
<button primary>
|
||||
<button>
|
||||
<icon name="ion-home"></icon>
|
||||
Left Icon
|
||||
</button>
|
||||
<a button primary>
|
||||
<a button>
|
||||
<icon name="ion-home"></icon>
|
||||
Left Icon
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button primary>
|
||||
<button>
|
||||
Right Icon
|
||||
<icon name="ion-star"></icon>
|
||||
</button>
|
||||
<a button primary>
|
||||
<a button>
|
||||
Right Icon
|
||||
<icon name="ion-star"></icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button primary>
|
||||
<button>
|
||||
<icon name="ion-flag"></icon>
|
||||
</button>
|
||||
<a button primary>
|
||||
<a button>
|
||||
<icon name="ion-flag"></icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button large primary>
|
||||
<button large>
|
||||
<icon name="ion-help-circled"></icon>
|
||||
Left, Large
|
||||
</button>
|
||||
<a button large primary>
|
||||
<a button large>
|
||||
<icon name="ion-help-circled"></icon>
|
||||
Left, Large
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button large primary>
|
||||
<button large>
|
||||
Right, Large
|
||||
<icon name="ion-settings"></icon>
|
||||
</button>
|
||||
<a button large primary>
|
||||
<a button large>
|
||||
Right, Large
|
||||
<icon name="ion-settings"></icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button large primary>
|
||||
<button large>
|
||||
<icon name="ion-heart"></icon>
|
||||
</button>
|
||||
<a button large primary>
|
||||
<a button large>
|
||||
<icon name="ion-heart"></icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button small primary>
|
||||
<button small>
|
||||
<icon name="ion-checkmark"></icon>
|
||||
Left, Small
|
||||
</button>
|
||||
<a button small primary>
|
||||
<a button small>
|
||||
<icon name="ion-checkmark"></icon>
|
||||
Left, Small
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button small primary>
|
||||
<button small>
|
||||
Right, Small
|
||||
<icon name="ion-forward"></icon>
|
||||
</button>
|
||||
<a button small primary>
|
||||
<a button small>
|
||||
Right, Small
|
||||
<icon name="ion-forward"></icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button small primary>
|
||||
<button small>
|
||||
<icon name="ion-search"></icon>
|
||||
</button>
|
||||
<a button small primary>
|
||||
<a button small>
|
||||
<icon name="ion-search"></icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
@ -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>
|
||||
<button outline>D</button>
|
||||
@ -7,12 +11,6 @@
|
||||
<button outline class="activated">D.activated</button>
|
||||
</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>
|
||||
<button outline secondary>S</button>
|
||||
<button outline secondary class="hover">S.hover</button>
|
||||
@ -31,12 +29,6 @@
|
||||
<button outline light class="activated">L.activated</button>
|
||||
</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>
|
||||
<button outline dark>D</button>
|
||||
<button outline dark class="hover">D.hover</button>
|
||||
@ -44,15 +36,27 @@
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button outline primary block>button[outline][block][primary]</button>
|
||||
<button outline block>button[outline][block]</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button outline primary block class="hover">[outline][block][primary].hover</button>
|
||||
<button outline block class="hover">[outline][block].hover</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button outline primary block class="activated">[outline][block][primary].activated</button>
|
||||
<button outline block class="activated">[outline][block].activated</button>
|
||||
</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>
|
||||
|
||||
@ -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 stable>button stable</button>
|
||||
<button round primary>button primary</button>
|
||||
<button round secondary>button secondary</button>
|
||||
<button round danger>button danger</button>
|
||||
<button round dark>button dark</button>
|
||||
|
||||
<button round outline>button</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 danger outline>button danger</button>
|
||||
<button round dark outline>button dark</button>
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
|
||||
<style>
|
||||
button {
|
||||
display: block !important;
|
||||
|
||||
@ -1,29 +1,33 @@
|
||||
|
||||
<div class="padding">
|
||||
<ion-toolbar>
|
||||
<ion-title>Button Sizes</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-content class="padding">
|
||||
|
||||
<p>
|
||||
<a button primary href="#">a[button]</a>
|
||||
<button primary>button</button>
|
||||
<a button href="#">a[button]</a>
|
||||
<button>button</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a button small primary href="#">a[button][small]</a>
|
||||
<button small primary>button[small]</button>
|
||||
<a button small href="#">a[button][small]</a>
|
||||
<button small>button[small]</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a button outline small primary href="#">a[button][outline][small]</a>
|
||||
<button outline small primary>button[outline][small]</button>
|
||||
<a button outline small href="#">a[button][outline][small]</a>
|
||||
<button outline small>button[outline][small]</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a button clear small primary href="#">a[button][clear][small]</a>
|
||||
<button clear small primary>button[clear][small]</button>
|
||||
<a button clear small href="#">a[button][clear][small]</a>
|
||||
<button clear small>button[clear][small]</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button large primary>[large]</button>
|
||||
<a button large primary href="#">
|
||||
<button large>[large]</button>
|
||||
<a button large href="#">
|
||||
<span style="font-size:48px">H</span>
|
||||
<span style="font-size:38px">E</span>
|
||||
<span style="font-size:32px">L</span>
|
||||
@ -32,13 +36,13 @@
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a button outline large primary href="#">a[button][outline][large]</a>
|
||||
<button outline large primary>button[outline][large]</button>
|
||||
<a button outline large href="#">a[button][outline][large]</a>
|
||||
<button outline large>button[outline][large]</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a button clear large primary href="#">a[clear][large]</a>
|
||||
<button clear large primary>button[clear][large]</button>
|
||||
<a button clear large href="#">a[clear][large]</a>
|
||||
<button clear large>button[clear][large]</button>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
@ -1,43 +1,68 @@
|
||||
|
||||
// iOS Checkbox
|
||||
// iOS Checkbox Structure
|
||||
// --------------------------------------------------
|
||||
|
||||
$checkbox-ios-icon-size: 21px !default;
|
||||
$checkbox-ios-background-color: get-color(primary, base) !default;
|
||||
$checkbox-ios-foreground-color: get-color(primary, inverse) !default;
|
||||
$checkbox-ios-icon-size: 21px !default;
|
||||
$checkbox-ios-bg-color-off: $background-color !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 {
|
||||
position: relative;
|
||||
width: $checkbox-ios-icon-size;
|
||||
height: $checkbox-ios-icon-size;
|
||||
border-radius: 50%;
|
||||
background-color: $checkbox-ios-foreground-color;
|
||||
border: 1px solid #c4c4c4;
|
||||
border: 1px solid $checkbox-ios-border-color-off;
|
||||
background-color: $checkbox-ios-bg-color-off;
|
||||
}
|
||||
|
||||
&[aria-checked=true] .checkbox-icon {
|
||||
background-color: $checkbox-ios-background-color;
|
||||
border-color: $checkbox-ios-background-color;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
border: 1px solid $checkbox-ios-foreground-color;
|
||||
top: 3px;
|
||||
left: 7px;
|
||||
width: 4px;
|
||||
height: 9px;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
content: '';
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
background-color: $checkbox-ios-bg-color-on;
|
||||
border-color: $checkbox-ios-border-color-on;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
color: inherit;
|
||||
&[aria-checked=true] .checkbox-icon::after {
|
||||
position: absolute;
|
||||
border: 1px solid $checkbox-ios-checkmark-color-on;
|
||||
top: 3px;
|
||||
left: 7px;
|
||||
width: 4px;
|
||||
height: 9px;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
content: '';
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// 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);
|
||||
|
||||
}
|
||||
|
||||
@ -24,6 +24,10 @@
|
||||
Grape, value=grape, init checked, disabled
|
||||
</ion-checkbox>
|
||||
|
||||
<ion-checkbox secondary checked="true">
|
||||
secondary color
|
||||
</ion-checkbox>
|
||||
|
||||
</ion-list>
|
||||
|
||||
</form>
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
// Content
|
||||
// --------------------------------------------------
|
||||
|
||||
$content-container-background-color: #fff !default;
|
||||
$content-background-color: #fff !default;
|
||||
$content-container-background-color: $background-color !default;
|
||||
$content-background-color: $background-color !default;
|
||||
|
||||
|
||||
.content-container {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
// iOS Content
|
||||
// --------------------------------------------------
|
||||
|
||||
$content-container-ios-background-color: #000 !default;
|
||||
/*$content-container-ios-background-color: #000 !default;
|
||||
$content-ios-background-color: #efeff4 !default;
|
||||
|
||||
|
||||
@ -17,3 +17,4 @@ $content-ios-background-color: #efeff4 !default;
|
||||
}
|
||||
|
||||
}
|
||||
*/
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
// 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: get-color(primary, base) !default;
|
||||
$tab-button-text-active: $toolbar-active-color !default;
|
||||
$tab-button-text-inactive: $toolbar-inactive-color !default;
|
||||
$tab-button-padding: 10px !default;
|
||||
$tab-button-min-width: 80px !default;
|
||||
$tab-button-max-width: 160px !default;
|
||||
|
||||
@ -10,7 +10,7 @@ $toolbar-order-ios: (
|
||||
);
|
||||
|
||||
$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-title-font-size: 1.7rem !default;
|
||||
|
||||
|
||||
@ -9,10 +9,6 @@ $toolbar-order: (
|
||||
secondary: 40
|
||||
);
|
||||
|
||||
$toolbar-background: $placeholder-background !default;
|
||||
$toolbar-button-text-color: #007aff !default;
|
||||
$toolbar-title-text-color: #000 !default;
|
||||
|
||||
|
||||
.toolbar {
|
||||
position: relative;
|
||||
@ -28,11 +24,11 @@ $toolbar-title-text-color: #000 !default;
|
||||
order: $flex-order-toolbar-top;
|
||||
flex: 0;
|
||||
|
||||
background-color: $toolbar-background;
|
||||
background-color: $toolbar-background-color;
|
||||
|
||||
button,
|
||||
[button] {
|
||||
color: $toolbar-button-text-color;
|
||||
color: $toolbar-active-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
@ -66,6 +62,7 @@ ion-title {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
color: $toolbar-text-color;
|
||||
}
|
||||
|
||||
.toolbar-item {
|
||||
|
||||
@ -7,12 +7,17 @@
|
||||
"components/app/z-index",
|
||||
"components/app/flex-order",
|
||||
"components/app/normalize",
|
||||
"components/app/colors",
|
||||
"components/app/structure",
|
||||
"components/app/typography",
|
||||
"util/util";
|
||||
|
||||
|
||||
// Default Theme
|
||||
// If a theme wasn't set then it'll use this default
|
||||
@import
|
||||
"themes/default";
|
||||
|
||||
|
||||
// Core Components
|
||||
@import
|
||||
"components/toolbar/toolbar",
|
||||
@ -21,6 +26,9 @@
|
||||
"components/aside/aside",
|
||||
"components/badge/badge",
|
||||
"components/button/button",
|
||||
"components/button/button-clear",
|
||||
"components/button/button-outline",
|
||||
"components/button/button-size",
|
||||
"components/button/button-icon",
|
||||
"components/button/button-fab",
|
||||
"components/card/card",
|
||||
@ -89,3 +97,4 @@
|
||||
// Platforms
|
||||
@import
|
||||
"platform/cordova";
|
||||
|
||||
|
||||
27
ionic/themes/dark.scss
Normal file
27
ionic/themes/dark.scss
Normal 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
27
ionic/themes/default.scss
Normal 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;
|
||||
@ -3,24 +3,43 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
@function get-color($color, $tone: base) {
|
||||
@return map-get(map-get($colors, $color), $tone);
|
||||
@return red;
|
||||
}
|
||||
|
||||
@function inverse-tone($color) {
|
||||
// For a lighter colored "base" the darker colored "inverse"
|
||||
// the inverse-tone will be the "light" tone
|
||||
@function inverse($color-name) {
|
||||
@if (lightness( color($color-name) ) > 70) {
|
||||
@return #000;
|
||||
}
|
||||
@else {
|
||||
@return #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// For a darker colored "base" the lighter colored "inverse"
|
||||
// the inverse-tone will be the "dark" tone
|
||||
@function darken-or-lighten($color, $amount:12%) {
|
||||
// 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);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
"gulp-insert": "^0.5.0",
|
||||
"gulp-plumber": "^1.0.0",
|
||||
"gulp-rename": "~1.2.0",
|
||||
"gulp-sass": "^1.3.3",
|
||||
"gulp-sass": "^2.0.4",
|
||||
"gulp-shell": "^0.4.0",
|
||||
"gulp-typescript": "^2.7.7",
|
||||
"gulp-util": "^3.0.6",
|
||||
|
||||
11
scripts/build/ionic.dark.scss
Normal file
11
scripts/build/ionic.dark.scss
Normal 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";
|
||||
@ -5,7 +5,19 @@
|
||||
<!-- 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" />
|
||||
|
||||
<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>
|
||||
/* hack to create tall scrollable areas for testing using <f></f> */
|
||||
|
||||
Reference in New Issue
Block a user