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

Shit

Browse Source
This commit is contained in:
Max Lynch
2013-08-23 10:23:33 -05:00
parent 451f04c673
commit 0636ecac38
6 changed files with 89 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -1,2 +1,2 @@
.DS_Store .DS_Store
*.sw[mpcod]

BIN
max/.app.css.swp
View File

Binary file not shown.

BIN
max/.app.js.swp
View File

Binary file not shown.

BIN
max/.index.html.swp
View File

Binary file not shown.

BIN
max/.normalize.css.swp
View File

Binary file not shown.

94
max/app.css
View File

@ -58,8 +58,8 @@ body {
bottom: 0; bottom: 0;
} }
/* Generic style for all buttons in .bar-title */ /* Generic style for all buttons in .bar-header */
.bar-title [class*="button"] { .bar-header [class*="button"] {
position: relative; position: relative;
z-index: 10; /* Places buttons over full width title */ z-index: 10; /* Places buttons over full width title */
font-size: 12px; font-size: 12px;
@ -78,16 +78,16 @@ body {
/* Hacky way to right align buttons outside of flex-box system /* Hacky way to right align buttons outside of flex-box system
Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */ Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */
.bar-title .title + [class*="button"]:last-child, .bar-header .title + [class*="button"]:last-child,
.bar-title .button + [class*="button"]:last-child, .bar-header .button + [class*="button"]:last-child,
.bar-title [class*="button"].pull-right { .bar-header [class*="button"].pull-right {
position: absolute; position: absolute;
top: 5px; top: 5px;
right: 5px; right: 5px;
} }
/* Override standard button active states */ /* Override standard button active states */
.bar-title .button:active { .bar-header .button:active {
color: #fff; color: #fff;
background-color: #0876b1; background-color: #0876b1;
} }
@ -162,3 +162,85 @@ body {
box-shadow: inset 0 -3px 3px rgba(0, 0, 0, .2); box-shadow: inset 0 -3px 3px rgba(0, 0, 0, .2);
} }
[class*="button"] {
position: relative;
display: inline-block;
padding: 4px 12px;
margin: 0;
font-weight: bold;
line-height: 18px;
color: #333;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
vertical-align: top;
cursor: pointer;
background-color: #f8f8f8;
background-image: -webkit-linear-gradient(top, #f8f8f8 0, #d4d4d4 100%);
background-image: linear-gradient(to bottom, #f8f8f8 0, #d4d4d4 100%);
border: 1px solid rgba(0, 0, 0, .3);
border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 0, 0, .05);
}
/* Active */
[class*="button"]:active {
padding-top: 5px;
padding-bottom: 3px;
color: #333;
background-color: #ccc;
background-image: none;
box-shadow: inset 0 3px 3px rgba(0, 0, 0, .2);
}
/* Button modifiers
-------------------------------------------------- */
/* Overriding styles for buttons with modifiers */
.button-main,
.button-positive,
.button-negative {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
}
/* Main button */
.button-main {
background-color: #1eafe7;
background-image: -webkit-linear-gradient(top, #1eafe7 0, #1a97c8 100%);
background-image: linear-gradient(to bottom, #1eafe7 0, #1a97c8 100%);
border: 1px solid #117aaa;
}
/* Positive button */
.button-positive {
background-color: #34ba15;
background-image: -webkit-linear-gradient(top, #34ba15 0, #2da012 100%);
background-image: linear-gradient(to bottom, #34ba15 0, #2da012 100%);
border: 1px solid #278f0f;
}
/* Negative button */
.button-negative {
background-color: #e71e1e;
background-image: -webkit-linear-gradient(top, #e71e1e 0,#c71a1a 100%);
background-image: linear-gradient(to bottom, #e71e1e 0, #c71a1a 100%);
border: 1px solid #b51a1a;
}
/* Active state for buttons with modifiers */
.button-main:active,
.button-positive:active,
.button-negative:active {
color: #fff;
}
.button-main:active {
background-color: #0876b1;
}
.button-positive:active {
background-color: #298f11;
}
.button-negative:active {
background-color: #b21a1a;
}