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

color updates

Browse Source
This commit is contained in:
Adam Bradley
2015-08-11 22:10:25 -05:00
parent f70aff1895
commit 147a7e68ff
23 changed files with 265 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ionic/components/button/button-outline.scss
View File

@@ -47,7 +47,7 @@ button,
button[#{$color}],
[button][#{$color}] {
$fg-color: darken-or-lighten($value);
$fg-color: darken-or-lighten($value, 5%);
@include button-outline($fg-color);
}

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

@@ -14,7 +14,7 @@ $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-text-color: inverse($button-color) !default;
$button-hover-opacity: 0.88 !default;
@@ -112,7 +112,6 @@ button,
padding: $button-round-padding;
}
&.disabled,
&[disabled] {
opacity: 0.4;
cursor: default !important;
@@ -121,17 +120,15 @@ button,
}
a[button] {
text-decoration: none;
}
.padding > button[block]:first-child,
.padding > [button][block]:first-child {
margin-top: 0;
}
a[button] {
color: inherit;
text-decoration: none;
}
// Default Button Color Mixin
// --------------------------------------------------
@@ -156,7 +153,7 @@ a[button] {
$bg-color: $value;
$bg-color-activated: darken-or-lighten($bg-color);
$text-color: inverse($color);
$text-color: inverse($bg-color);
@include button-default($bg-color, $bg-color-activated, $text-color);
}

77
ionic/components/button/extensions/material.scss
View File

@@ -12,7 +12,6 @@ $button-md-border-radius: 3px !default;
[mode="md"] button,
[mode="md"] [button] {
border: 0;
border-radius: $button-md-border-radius;
min-height: $button-md-min-height;
@@ -32,18 +31,6 @@ $button-md-border-radius: 3px !default;
box-shadow: $button-md-box-shadow-active;
}
&[icon] {
//font-size: $button-icon-size;
}
&[large][icon] {
//font-size: $button-icon-large-size;
}
&[small][icon] {
//font-size: $button-icon-small-size;
}
&[full] {
border-radius: 0;
}
@@ -51,40 +38,63 @@ $button-md-border-radius: 3px !default;
&[outline] {
box-shadow: none;
.md-ripple {
/*.md-ripple {
&.is-visible {
opacity: 0.2;
}
}
}*/
}
&[round] {
border-radius: $button-round-border-radius;
padding: $button-round-padding;
}
&[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;
}
&[fab] {
border-radius: 50%;
}
@each $color, $value in $colors {
// Generate iOS Checkbox Auxiliary Colors
// --------------------------------------------------
@each $color, $value in {
&[#{$color}] {
@if lightness(get-color($color, base)) < 80 {
.md-ripple {
background-color: white;
//background-color: white;
}
}
&.activated {
opacity: 1;
background-color: get-color($color, base);
//background-color: get-color($color, base);
}
&[outline] {
@if lightness(get-color($color, base)) >= 80 {
.md-ripple {
background-color: black;
//background-color: black;
}
} @else {
.md-ripple {
background-color: get-color($color, base);
//background-color: get-color($color, base);
}
}
@@ -97,8 +107,8 @@ $button-md-border-radius: 3px !default;
}
opacity: 1;
background: transparent;
color: $fg-color;
//background: transparent;
//color: $fg-color;
}
}
@@ -107,31 +117,12 @@ $button-md-border-radius: 3px !default;
&:hover,
&.hover {
background-color: rgba(158, 158, 158, 0.1);
//background-color: rgba(158, 158, 158, 0.1);
}
&.activated {
background-color: rgba(158, 158, 158, 0.2);
//background-color: rgba(158, 158, 158, 0.2);
}
}
&[round] {
border-radius: $button-round-border-radius;
padding: $button-round-padding;
}
&[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;
}
}
}
}

2
ionic/components/checkbox/checkbox.scss
View File

@@ -11,5 +11,5 @@
.checkbox[aria-disabled=true] {
pointer-events: none;
opacity: 0.5;
color: gray;
color: $subdued-text-color;
}

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

@@ -3,8 +3,8 @@
// --------------------------------------------------
$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-off: $list-background-color !default;
$checkbox-ios-border-color-off: $list-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;
@@ -45,9 +45,9 @@ $checkbox-ios-checkmark-color-on: $background-color !default;
// iOS Checkbox Color Mixin
// --------------------------------------------------
@mixin checkbox-theme-ios($color, $bg-on) {
@mixin checkbox-theme-ios($color-name, $bg-on) {
.checkbox[mode=ios][#{$color}] {
.checkbox[mode=ios][#{$color-name}] {
&[aria-checked=true] .checkbox-icon {
background-color: $bg-on;
@@ -58,11 +58,12 @@ $checkbox-ios-checkmark-color-on: $background-color !default;
}
// Generate iOS Checkbox Auxiliary Colors
// --------------------------------------------------
@each $color, $value in auxiliary-colors() {
@each $color-name, $value in auxiliary-colors() {
@include checkbox-theme-ios($color, $value);
@include checkbox-theme-ios($color-name, $value);
}

73
ionic/components/checkbox/extensions/material.scss
View File

@@ -1,38 +1,69 @@
// Material Design Checkbox
// Material Design Checkbox Structure
// --------------------------------------------------
$checkbox-md-icon-size: 24px !default;
$checkbox-md-background-color: get-color(primary, base) !default;
$checkbox-md-foreground-color: get-color(primary, inverse) !default;
$checkbox-md-icon-size: 21px !default;
$checkbox-md-bg-color-off: $list-background-color !default;
$checkbox-md-border-color-off: $list-border-color !default;
$checkbox-md-bg-color-on: color(primary) !default;
$checkbox-md-border-color-on: color(primary) !default;
$checkbox-md-checkmark-color-on: $background-color !default;
.checkbox[mode="md"] {
.checkbox[mode=md] {
.checkbox-icon {
position: relative;
width: $checkbox-md-icon-size;
height: $checkbox-md-icon-size;
border-radius: $checkbox-md-icon-size / 2;
background-color: $checkbox-md-foreground-color;
border: 1px solid $checkbox-md-background-color;
border-radius: 50%;
border: 1px solid $checkbox-md-border-color-off;
background-color: $checkbox-md-bg-color-off;
}
&[aria-checked=true] .checkbox-icon {
background-color: $checkbox-md-background-color;
background-color: $checkbox-md-bg-color-on;
border-color: $checkbox-md-border-color-on;
}
&::after {
position: absolute;
border: 1px solid $checkbox-md-foreground-color;
top: 3px;
left: 8px;
width: 5px;
height: 12px;
border-left: none;
border-top: none;
content: '';
transform: rotate(45deg);
}
&[aria-checked=true] .checkbox-icon::after {
position: absolute;
border: 1px solid $checkbox-md-checkmark-color-on;
top: 3px;
left: 7px;
width: 4px;
height: 9px;
border-left: none;
border-top: none;
content: '';
transform: rotate(45deg);
}
}
// Material Design Checkbox Color Mixin
// --------------------------------------------------
@mixin checkbox-theme-md($color-name, $bg-on) {
.checkbox[mode=md][#{$color-name}] {
&[aria-checked=true] .checkbox-icon {
background-color: $bg-on;
border-color: $bg-on;
}
}
}
// Generate Material Design Checkbox Auxiliary Colors
// --------------------------------------------------
@each $color-name, $value in auxiliary-colors() {
@include checkbox-theme-md($color-name, $value);
}

50
ionic/components/item/extensions/ios.scss
View File

@@ -2,7 +2,7 @@
// iOS Item
// --------------------------------------------------
$item-ios-border-color: #c8c7cc !default;
$item-ios-border-color: $list-border-color !default;
$item-ios-font-size: 1.6rem !default;
$item-ios-padding-top: 13px !default;
@@ -15,7 +15,8 @@ $item-ios-padding-media-bottom: 11px !default;
$item-ios-avatar-size: 3.6rem !default;
$item-ios-thumbnail-size: 5.6rem !default;
$item-ios-note-color: #999 !default;
$item-ios-note-color: $item-ios-border-color !default;
$item-ios-forward-icon-color: $item-ios-border-color !default;
.list[mode="ios"] {
@@ -73,7 +74,7 @@ $item-ios-note-color: #999 !default;
icon[forward] {
font-size: 2rem;
color: #cfcfcf;
color: $item-ios-forward-icon-color;
}
button {
@@ -115,46 +116,3 @@ $item-ios-note-color: #999 !default;
}
/*
.list[mode="ios"] {
margin-top: -1px;
.item {
background: $item-ios-background-color;
min-height: $item-ios-min-height;
padding-left: $item-ios-padding-left;
.item-media + .item-content {
margin-left: $item-ios-padding-left;
}
.item-content {
min-height: $item-ios-min-height;
padding: 0;
}
.item:last-of-type .item-content:after {
background: none;
}
.item-accessory {
color: $item-ios-accessory-color;
}
.item-subtitle {
width: 100%;
color: #808080;
}
.item-full {
// No left ios-style padding
padding-left: 0;
button {
width: 100%;
font-size: 1.3em;
}
}
}
}
*/

7
ionic/components/item/extensions/material.scss
View File

@@ -2,7 +2,7 @@
// Material Design Item
// --------------------------------------------------
$item-md-border-color: #c8c7cc !default;
$item-md-border-color: $list-border-color !default;
$item-md-font-size: 1.6rem !default;
$item-md-padding-top: 13px !default;
@@ -15,7 +15,8 @@ $item-md-padding-media-bottom: 11px !default;
$item-md-avatar-size: 4rem !default;
$item-md-thumbnail-size: 8rem !default;
$item-md-note-color: #999 !default;
$item-md-note-color: $item-md-border-color !default;
$item-md-forward-icon-color: $item-md-border-color !default;
.list[mode="md"] {
@@ -73,7 +74,7 @@ $item-md-note-color: #999 !default;
icon[forward] {
font-size: 2rem;
color: #cfcfcf;
color: $item-md-forward-icon-color;
}
button {

3
ionic/components/item/item.scss
View File

@@ -15,6 +15,9 @@
border: 0;
min-height: 4.4rem;
text-align: initial;
background-color: $list-background-color;
color: $list-text-color;
}
a.item,

11
ionic/components/popup/extensions/ios.scss
View File

@@ -2,8 +2,9 @@
// iOS Popups
// --------------------------------------------------
$popup-ios-border-radius: 13px !default;
$popup-ios-bg-color: #f8f8f8 !default;
$popup-ios-border-radius: 13px !default;
$popup-ios-bg-color: #f8f8f8 !default;
$popup-ios-button-text-color: color(primary) !default;
.popup[mode="ios"] {
@@ -25,9 +26,9 @@ $popup-ios-bg-color: #f8f8f8 !default;
padding: 0;
min-height: 0;
.button {
min-height: 42px;
color: get-color('primary', base);
button {
background-color: transparent;
color: $popup-ios-button-text-color;
font-size: 14px;
&:last-child {

3
ionic/components/popup/popup.scss
View File

@@ -46,7 +46,6 @@ ion-popup {
.popup-head {
padding: 15px 10px;
border-bottom: 1px solid #eee;
text-align: center;
}
@@ -74,7 +73,7 @@ h3.popup-title {
padding: 10px;
min-height: $popup-button-min-height + 20;
.button {
button {
flex: 1;
display: block;
min-height: $popup-button-min-height;

4
ionic/components/popup/popup.ts
View File

@@ -27,7 +27,7 @@ export class Popup extends Overlay {
if (typeof context === 'string') {
context = {
title: context
}
};
}
let button = {
text: 'OK',
@@ -139,7 +139,7 @@ const OVERLAY_TYPE = 'popup';
'<input type="text" *ng-if="showPrompt" placeholder="{{promptPlaceholder}}">' +
'</div>' +
'<div class="popup-buttons" *ng-if="buttons.length">' +
'<button *ng-for="#button of buttons" (click)="buttonTapped(button, $event)" class="button" [class]="button.type || \'button-default\'" [inner-html]="button.text"></button>' +
'<button *ng-for="#button of buttons" (click)="buttonTapped(button, $event)" [class]="button.type || \'button-default\'" [inner-html]="button.text"></button>' +
'</div>' +
'</popup-wrapper>',
directives: [formDirectives, CSSClass, NgIf, NgFor]

64
ionic/components/radio/extensions/ios.scss
View File

@@ -2,7 +2,7 @@
// iOS Radio
// --------------------------------------------------
$radio-ios-foreground-color: get-color(primary, base) !default;
$radio-ios-active-color: color(primary) !default;
.radio[mode="ios"] {
@@ -13,29 +13,51 @@ $radio-ios-foreground-color: get-color(primary, base) !default;
height: 21px;
}
&[aria-checked=true] .radio-icon {
border-color: $radio-ios-foreground-color;
&::after {
position: absolute;
border: 2px solid $radio-ios-foreground-color;
top: 3px;
left: 7px;
width: 4px;
height: 10px;
border-left: none;
border-top: none;
content: '';
transform: rotate(45deg);
}
&[aria-checked=true] .radio-icon::after {
position: absolute;
border: 2px solid $radio-ios-active-color;
top: 3px;
left: 7px;
width: 4px;
height: 10px;
border-left: none;
border-top: none;
content: '';
transform: rotate(45deg);
}
&[aria-checked=true] {
color: $radio-ios-foreground-color;
}
.input-label {
color: inherit;
color: $radio-ios-active-color;
}
}
// iOS Radio Color Mixin
// --------------------------------------------------
@mixin radio-theme-ios($color-name, $color-value) {
.radio[mode=ios][#{$color-name}] {
&[aria-checked=true] .radio-icon::after {
border-color: $color-value;
}
&[aria-checked=true] {
color: $color-value;
}
}
}
// Generate iOS Radio Auxiliary Colors
// --------------------------------------------------
@each $color-name, $color-value in auxiliary-colors() {
@include radio-theme-ios($color-name, $color-value);
}

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

@@ -2,12 +2,14 @@
// Radio
// --------------------------------------------------
.radio {
cursor: pointer;
@include user-select-none();
}
.radio[aria-disabled=true] {
pointer-events: none;
opacity: 0.5;
color: gray;
color: $subdued-text-color;
}

8
ionic/components/radio/test/basic/main.html
View File

@@ -20,8 +20,12 @@
Banana
</ion-radio>
<ion-radio value="cherry">
Cherry
<ion-radio value="cherry" secondary>
Cherry (secondary color)
</ion-radio>
<ion-radio value="disabled" disabled="true">
Disabled
</ion-radio>
</ion-radio-group>

75
ionic/components/switch/extensions/ios.scss
View File

@@ -2,27 +2,27 @@
// iOS Switch
// --------------------------------------------------
$switch-ios-width: 51px !default;
$switch-ios-height: 32px !default;
$switch-ios-border-width: 2px !default;
$switch-ios-border-radius: 30px !default;
$switch-ios-width: 51px !default;
$switch-ios-height: 32px !default;
$switch-ios-border-width: 2px !default;
$switch-ios-border-radius: 30px !default;
$switch-ios-off-bg-color: #fff !default;
$switch-ios-off-border-color: #e6e6e6 !default;
$switch-ios-off-bg-color: $list-background-color !default;
$switch-ios-off-border-color: $list-border-color !default;
$switch-ios-on-bg-color: get-color(primary, base) !default;
$switch-ios-on-border-color: $switch-ios-on-bg-color !default;
$switch-ios-on-bg-color: color(primary) !default;
$switch-ios-on-border-color: $switch-ios-on-bg-color !default;
$switch-ios-handle-width: $switch-ios-height - ($switch-ios-border-width * 2) !default;
$switch-ios-handle-height: $switch-ios-handle-width !default;
$switch-ios-handle-radius: $switch-ios-handle-width !default;
$switch-ios-handle-dragging-bg-color: darken(#fff, 5%) !default;
$switch-ios-handle-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1), 0px 0px 1px rgba(0, 0, 0, 0.15) !default;
$switch-ios-handle-width: $switch-ios-height - ($switch-ios-border-width * 2) !default;
$switch-ios-handle-height: $switch-ios-handle-width !default;
$switch-ios-handle-radius: $switch-ios-handle-width !default;
$switch-ios-handle-dragging-bg-color: darken($switch-ios-off-bg-color, 5%) !default;
$switch-ios-handle-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1), 0px 0px 1px rgba(0, 0, 0, 0.15) !default;
$switch-ios-handle-off-bg-color: #fff !default;
$switch-ios-handle-on-bg-color: #fff !default;
$switch-ios-handle-off-bg-color: $switch-ios-off-bg-color !default;
$switch-ios-handle-on-bg-color: $switch-ios-off-bg-color !default;
$switch-ios-transition-duration: 200ms !default;
$switch-ios-transition-duration: 200ms !default;
.switch[mode="ios"] {
@@ -55,6 +55,19 @@ $switch-ios-transition-duration: 200ms !default;
transition-delay: 100ms;
}
.switch-track::before {
position: absolute;
top: $switch-ios-border-width;
left: $switch-ios-border-width;
right: 50%;
bottom: $switch-ios-border-width;
content: '';
border-radius: $switch-ios-border-radius;
background-color: $switch-ios-off-border-color;
will-change: right;
transition: right $switch-ios-transition-duration;
}
.switch-handle {
position: absolute;
top: $switch-ios-border-width;
@@ -88,6 +101,10 @@ $switch-ios-transition-duration: 200ms !default;
&[aria-checked=true] .switch-track {
opacity: 0;
&::before {
right: 15%;
}
}
&[aria-checked=true] .switch-handle {
@@ -100,3 +117,29 @@ $switch-ios-transition-duration: 200ms !default;
}
}
// iOS Switch Color Mixin
// --------------------------------------------------
@mixin switch-theme-ios($color-name, $bg-on) {
.switch[mode=ios][#{$color-name}] {
&[aria-checked=true] .switch-icon {
background-color: $bg-on;
}
}
}
// Generate iOS Switch Auxiliary Colors
// --------------------------------------------------
@each $color-name, $value in auxiliary-colors() {
@include switch-theme-ios($color-name, $value);
}

2
ionic/components/switch/switch.scss
View File

@@ -15,5 +15,5 @@
.switch[aria-disabled=true] {
pointer-events: none;
opacity: 0.5;
color: gray;
color: $subdued-text-color;
}

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

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

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

@@ -134,6 +134,5 @@ button.tab-button {
}
button.tab-button[aria-selected="true"] {
// Default color is primary
color: get-color(primary, base);
color: $toolbar-active-color;
}

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

@@ -28,8 +28,16 @@ $toolbar-order: (
button,
[button] {
background-color: transparent;
color: $toolbar-active-color;
box-shadow: none;
&.activated,
&:hover,
&.hover {
color: $toolbar-active-color;
background-color: transparent;
}
}
}
@@ -84,12 +92,12 @@ ion-title {
@each $color, $value in $colors {
.toolbar[#{$color}] {
background-color: get-color($color, base);
background-color: $value;
ion-title,
button,
[button] {
color: get-color($color, inverse);
color: inverse($value);
}
}

5
ionic/themes/dark.scss
View File

@@ -15,7 +15,10 @@ $colors: (
$text-color: #fff !default;
$background-color: #222 !default;
$border-color: #666 !default;
$list-text-color: $text-color !default;
$list-background-color: $background-color !default;
$list-border-color: #666 !default;
$link-color: map-get($colors, primary) !default;
$link-hover-color: lighten($link-color, 15%) !default;

6
ionic/themes/default.scss
View File

@@ -15,7 +15,11 @@ $colors: (
$text-color: #000 !default;
$background-color: #fff !default;
$border-color: #ddd !default;
$subdued-text-color: #666 !default;
$list-text-color: $text-color !default;
$list-background-color: $background-color !default;
$list-border-color: #c8c7cc !default;
$link-color: map-get($colors, primary) !default;
$link-hover-color: darken($link-color, 15%) !default;

17
ionic/util/mixins.scss
View File

@@ -1,13 +1,13 @@
// Color Mixins/Functions
// Color Functions
// --------------------------------------------------
@function get-color($color, $tone: base) {
@return red;
}
@function inverse($color-name) {
@if (lightness( color($color-name) ) > 70) {
@function inverse($color-value) {
@if (lightness($color-value) > 70) {
@return #000;
}
@else {
@@ -15,23 +15,23 @@
}
}
@function darken-or-lighten($color, $amount:12%) {
@function darken-or-lighten($color-value, $amount:8%) {
// lightness is a percent value, 0% darkest, 100% lightest
$lightness-percent: lightness($color);
$lightness-percent: lightness($color-value);
@if ($lightness-percent > 80) {
// really light foreground color, so really darken it up
@return darken($color, ($amount * 2));
@return darken($color-value, ($amount * 2));
}
@if ($lightness-percent < 35) {
// dark foreground color, so light it up
@return lighten($color, $amount);
@return lighten($color-value, $amount);
}
// default to darken
@return darken($color, $amount);
@return darken($color-value, $amount);
}
@function color($color-name) {
@@ -39,6 +39,7 @@
}
@function auxiliary-colors() {
// get a map of all the colors, except "primary"
@return map-remove($colors, primary);
}