javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 15:07:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

colour tweaks

Browse Source
This commit is contained in:
Adam Bradley
2013-11-13 12:24:55 -06:00
parent 5516e70f30
commit 9626e5f6e6
3 changed files with 48 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
dist/css/ionic.css vendored
View File

@ -2620,14 +2620,14 @@ a.subdued‎ {
border-width: 0; border-width: 0;
border-style: solid; border-style: solid;
border-top: 1px solid transparent; border-top: 1px solid transparent;
border-bottom: 1px solid #b2b2b2; border-bottom: 1px solid #dddddd;
background-color: white; background-color: white;
background-size: 0; } background-size: 0; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) { @media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.bar { .bar {
border-top: none !important; border-top: none !important;
border-bottom: none !important; border-bottom: none !important;
background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%); background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
background-position: bottom; background-position: bottom;
background-size: 100% 1px; background-size: 100% 1px;
background-repeat: no-repeat; } } background-repeat: no-repeat; } }
@ -2641,15 +2641,15 @@ a.subdued‎ {
color: #fff; } color: #fff; }
.bar.bar-light { .bar.bar-light {
background-color: white; background-color: white;
border-color: #b2b2b2; border-color: #dddddd;
background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%); background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
color: #444444; } color: #444444; }
.bar.bar-light .title { .bar.bar-light .title {
color: #444444; } color: #444444; }
.bar.bar-stable { .bar.bar-stable {
background-color: #f8f8f8; background-color: #f8f8f8;
border-color: #bbbbbb; border-color: #b2b2b2;
background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%); background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%);
color: #444444; } color: #444444; }
.bar.bar-stable .title { .bar.bar-stable .title {
color: #444444; } color: #444444; }
@ -2697,8 +2697,8 @@ a.subdued‎ {
color: white; } color: white; }
.bar.bar-dark { .bar.bar-dark {
background-color: #444444; background-color: #444444;
border-color: #444444; border-color: #111111;
background-image: linear-gradient(0deg, #444444, #444444 50%, transparent 50%); background-image: linear-gradient(0deg, #111111, #111111 50%, transparent 50%);
color: white; } color: white; }
.bar.bar-dark .title { .bar.bar-dark .title {
color: white; } color: white; }
@ -2749,14 +2749,14 @@ a.subdued‎ {
.bar-light .button { .bar-light .button {
color: #444444; color: #444444;
background-color: white; background-color: white;
border-color: #b2b2b2; } border-color: #dddddd; }
.bar-light .button:hover { .bar-light .button:hover {
color: #444444; color: #444444;
text-decoration: none; } text-decoration: none; }
.bar-light .button.active, .bar-light .button:active { .bar-light .button.active, .bar-light .button:active {
background-color: #222222; background-color: #fafafa;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: black; } border-color: #cccccc; }
.bar-light .button.button-clear { .bar-light .button.button-clear {
color: white; color: white;
background: none; background: none;
@ -2766,14 +2766,14 @@ a.subdued‎ {
.bar-stable .button { .bar-stable .button {
color: #444444; color: #444444;
background-color: #f8f8f8; background-color: #f8f8f8;
border-color: #bbbbbb; } border-color: #b2b2b2; }
.bar-stable .button:hover { .bar-stable .button:hover {
color: #444444; color: #444444;
text-decoration: none; } text-decoration: none; }
.bar-stable .button.active, .bar-stable .button:active { .bar-stable .button.active, .bar-stable .button:active {
background-color: #222222; background-color: #e5e5e5;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: black; } border-color: #a2a2a2; }
.bar-stable .button.button-clear { .bar-stable .button.button-clear {
color: white; color: white;
background: none; background: none;
@ -2885,12 +2885,12 @@ a.subdued‎ {
.bar-dark .button { .bar-dark .button {
color: white; color: white;
background-color: #444444; background-color: #444444;
border-color: #444444; } border-color: #111111; }
.bar-dark .button:hover { .bar-dark .button:hover {
color: white; color: white;
text-decoration: none; } text-decoration: none; }
.bar-dark .button.active, .bar-dark .button:active { .bar-dark .button.active, .bar-dark .button:active {
background-color: #222222; background-color: #262626;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: black; } border-color: black; }
.bar-dark .button.button-clear { .bar-dark .button.button-clear {
@ -2939,8 +2939,8 @@ a.subdued‎ {
-ms-flex-direction: horizontal; -ms-flex-direction: horizontal;
flex-direction: horizontal; flex-direction: horizontal;
background-color: #f8f8f8; background-color: #f8f8f8;
background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%); background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%);
border-color: #bbbbbb; border-color: #b2b2b2;
color: #444444; color: #444444;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -2953,13 +2953,13 @@ a.subdued‎ {
line-height: 49px; } line-height: 49px; }
.tabs.tabs-light { .tabs.tabs-light {
background-color: white; background-color: white;
background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%); background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
border-color: #b2b2b2; border-color: #dddddd;
color: #444444; } color: #444444; }
.tabs.tabs-stable { .tabs.tabs-stable {
background-color: #f8f8f8; background-color: #f8f8f8;
background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%); background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%);
border-color: #bbbbbb; border-color: #b2b2b2;
color: #444444; } color: #444444; }
.tabs.tabs-positive { .tabs.tabs-positive {
background-color: #4a87ee; background-color: #4a87ee;
@ -2993,8 +2993,8 @@ a.subdued‎ {
color: white; } color: white; }
.tabs.tabs-dark { .tabs.tabs-dark {
background-color: #444444; background-color: #444444;
background-image: linear-gradient(0deg, #444444, #444444 50%, transparent 50%); background-image: linear-gradient(0deg, #111111, #111111 50%, transparent 50%);
border-color: #444444; border-color: #111111;
color: white; } color: white; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) { @media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.tabs { .tabs {
@ -3315,7 +3315,6 @@ a.subdued‎ {
white-space: nowrap; } white-space: nowrap; }
a.item { a.item {
color: inherit;
text-decoration: none; } text-decoration: none; }
a.item:hover, a.item:focus { a.item:hover, a.item:focus {
text-decoration: none; } text-decoration: none; }
@ -4354,7 +4353,7 @@ input[type="range"] {
border-radius: 2px; border-radius: 2px;
color: #444444; color: #444444;
background-color: #f8f8f8; background-color: #f8f8f8;
border-color: #bbbbbb; border-color: #b2b2b2;
vertical-align: top; vertical-align: top;
text-align: center; text-align: center;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -4365,9 +4364,9 @@ input[type="range"] {
color: #444444; color: #444444;
text-decoration: none; } text-decoration: none; }
.button.active, .button:active { .button.active, .button:active {
background-color: #222222; background-color: #e5e5e5;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: black; } border-color: #a2a2a2; }
.button .icon { .button .icon {
display: inline-block; display: inline-block;
padding: 0 0 1px 0; padding: 0 0 1px 0;
@ -4380,14 +4379,14 @@ input[type="range"] {
.button.button-light { .button.button-light {
color: #444444; color: #444444;
background-color: white; background-color: white;
border-color: #b2b2b2; } border-color: #dddddd; }
.button.button-light:hover { .button.button-light:hover {
color: #444444; color: #444444;
text-decoration: none; } text-decoration: none; }
.button.button-light.active, .button.button-light:active { .button.button-light.active, .button.button-light:active {
background-color: #222222; background-color: #fafafa;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: black; } border-color: #cccccc; }
.button.button-light.button-clear { .button.button-light.button-clear {
color: white; color: white;
background: none; background: none;
@ -4403,14 +4402,14 @@ input[type="range"] {
.button.button-stable { .button.button-stable {
color: #444444; color: #444444;
background-color: #f8f8f8; background-color: #f8f8f8;
border-color: #bbbbbb; } border-color: #b2b2b2; }
.button.button-stable:hover { .button.button-stable:hover {
color: #444444; color: #444444;
text-decoration: none; } text-decoration: none; }
.button.button-stable.active, .button.button-stable:active { .button.button-stable.active, .button.button-stable:active {
background-color: #222222; background-color: #e5e5e5;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: black; } border-color: #a2a2a2; }
.button.button-stable.button-clear { .button.button-stable.button-clear {
color: #f8f8f8; color: #f8f8f8;
background: none; background: none;
@ -4564,12 +4563,12 @@ input[type="range"] {
.button.button-dark { .button.button-dark {
color: white; color: white;
background-color: #444444; background-color: #444444;
border-color: #444444; } border-color: #111111; }
.button.button-dark:hover { .button.button-dark:hover {
color: white; color: white;
text-decoration: none; } text-decoration: none; }
.button.button-dark.active, .button.button-dark:active { .button.button-dark.active, .button.button-dark:active {
background-color: #222222; background-color: #262626;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: black; } border-color: black; }
.button.button-dark.button-clear { .button.button-dark.button-clear {
@ -5165,7 +5164,7 @@ a.button {
background-color: white; } background-color: white; }
.light-border { .light-border {
border-color: #b2b2b2; } border-color: #dddddd; }
.stable { .stable {
color: #f8f8f8; } color: #f8f8f8; }
@ -5174,7 +5173,7 @@ a.button {
background-color: #f8f8f8; } background-color: #f8f8f8; }
.stable-border { .stable-border {
border-color: #bbbbbb; } border-color: #b2b2b2; }
.positive { .positive {
color: #4a87ee; } color: #4a87ee; }
@ -5237,7 +5236,7 @@ a.button {
background-color: #444444; } background-color: #444444; }
.dark-border { .dark-border {
border-color: #444444; } border-color: #111111; }
/** /**
* Platform * Platform

1
scss/_items.scss
View File

@ -108,7 +108,6 @@
// Linked list items // Linked list items
a.item { a.item {
color: inherit;
text-decoration: none; text-decoration: none;
&:hover, &:hover,

20
scss/_variables.scss
View File

@ -2,7 +2,7 @@
// Colors // Colors
// ------------------------------- // -------------------------------
$light: #ffffff !default; $light: #fff !default;
$stable: #f8f8f8 !default; $stable: #f8f8f8 !default;
$positive: #4a87ee !default; $positive: #4a87ee !default;
$calm: #43cee6 !default; $calm: #43cee6 !default;
@ -10,7 +10,7 @@ $balanced: #66cc33 !default;
$energized: #f0b840 !default; $energized: #f0b840 !default;
$assertive: #ef4e3a !default; $assertive: #ef4e3a !default;
$royal: #8a6de9 !default; $royal: #8a6de9 !default;
$dark: #444444 !default; $dark: #444 !default;
@ -164,15 +164,15 @@ $button-bar-button-icon-size: 24px;
$button-light-bg: $light; $button-light-bg: $light;
$button-light-text: #444; $button-light-text: #444;
$button-light-border: #B2B2B2; $button-light-border: #ddd;
$button-light-active-bg: #222; $button-light-active-bg: #fafafa;
$button-light-active-border: #000; $button-light-active-border: #ccc;
$button-stable-bg: $stable; $button-stable-bg: $stable;
$button-stable-text: #444; $button-stable-text: #444;
$button-stable-border: #bbb; $button-stable-border: #b2b2b2;
$button-stable-active-bg: #222; $button-stable-active-bg: #e5e5e5;
$button-stable-active-border: #000; $button-stable-active-border: #a2a2a2;
$button-positive-bg: $positive; $button-positive-bg: $positive;
$button-positive-text: #fff; $button-positive-text: #fff;
@ -212,8 +212,8 @@ $button-royal-active-border: darken($royal, 15%);
$button-dark-bg: $dark; $button-dark-bg: $dark;
$button-dark-text: #fff; $button-dark-text: #fff;
$button-dark-border: #444; $button-dark-border: #111;
$button-dark-active-bg: #222; $button-dark-active-bg: #262626;
$button-dark-active-border: #000; $button-dark-active-border: #000;
$button-default-bg: $button-stable-bg; $button-default-bg: $button-stable-bg;