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

Merge branch 'master' of https://github.com/driftyco/ionic

Browse Source 
Conflicts:
	dist/ionic.css
This commit is contained in:
Max Lynch
2013-09-09 15:45:11 -05:00
parent c02effede2 debb795402
commit 4a963f41f3
13 changed files with 194 additions and 2936 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Makefile
View File

@ -9,3 +9,5 @@ cordova:
@cp -R js/ example/cordova/iOS/www/js @cp -R js/ example/cordova/iOS/www/js
@cp dist/ionic.css example/cordova/iOS/www/css @cp dist/ionic.css example/cordova/iOS/www/css
watch:
@sass --watch scss/ionic.scss:dist/ionic.css

4
README.md
View File

@ -30,10 +30,6 @@ you'll be good to go.
But we recommend using the `ionic` tool because it's faster and gives you a good starting structure for your app. But we recommend using the `ionic` tool because it's faster and gives you a good starting structure for your app.
### SASS
sass --watch scss
## Running examples ## Running examples

1
example/forms.html
View File

@ -20,7 +20,6 @@
<main class="content content-padded has-header"> <main class="content content-padded has-header">
<h2>Default form layout</h2> <h2>Default form layout</h2>
<form> <form>
<fieldset> <fieldset>
<legend>Legend</legend> <legend>Legend</legend>

88
example/input-text.html
View File

@ -1,7 +1,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Input: Text</title> <title>Text Inputs</title>
<!-- Sets initial viewport load and disables zooming --> <!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
@ -11,29 +11,87 @@
</head> </head>
<body> <body>
<section> <section class="view">
<header class="bar bar-header bar-dark"> <header class="bar bar-header bar-dark">
<h1 class="title">Input: Text</h1> <h1 class="title">Text Inputs</h1>
</header> </header>
<main class="content content-padded has-header"> <header class="bar bar-footer bar-dark">
<h1 class="title">Footer</h1>
</header>
<h2>Text input</h2> <div class="content has-header has-footer">
<p>
<input type="text" placeholder="This is where text goes!">
</p>
<h2>Search input</h2> <h3>Default Text Input, Not Inset, No Content Padding</h3>
<p> <label class="input-wrapper">
<input type="text" class="input-medium search-query" placeholder="Search"> <input type="text" placeholder="Email">
</p> </label>
<h3>Default Text Input, Is Inset, No Content Padding</h3>
<label class="input-wrapper inset">
<input type="text" placeholder="Email">
</label>
<div class="content-padded">
<h3>Default Text Input, Not Inset, With Content Padding</h3>
<label class="input-wrapper">
<input type="text" placeholder="Email">
</label>
<h3>Default Text Input, Is Inset, With Content Padding</h3>
<label class="input-wrapper inset">
<input type="text" placeholder="Email">
</label>
</div>
<hr>
<h3>Stacked Label On Top Of Text Input, Not Inset, No Content Padding</h3>
<label class="input-wrapper">
<span class="input-label">Email</span>
<input type="text" placeholder="your@email.com">
</label>
<h3>Stacked Label On Top Of Text Input, Is Inset, No Content Padding</h3>
<label class="input-wrapper inset">
<span class="input-label">Email</span>
<input type="text" placeholder="Email">
</label>
<div class="content-padded">
<h3>Stacked Label On Top Of Text Input, Not Inset, With Content Padding</h3>
<label class="input-wrapper">
<span class="input-label">Email</span>
<input type="text" placeholder="Email">
</label>
<h3>Stacked Label On Top Of Text Input, Is Inset, With Content Padding</h3>
<label class="input-wrapper inset">
<span class="input-label">Email</span>
<input type="text" placeholder="Email">
</label>
</div>
<hr>
<h3>Inline Labeled Input</h3>
<label class="embed">
<span>Email:</span>
<input type="text" placeholder="your@email.com">
</label>
<h2>Textarea</h2>
<textarea></textarea>
<p><a class="button button-secondary" href="index.html">Homepage</a></p> <p><a class="button button-secondary" href="index.html">Homepage</a></p>
</main> </div>
</section> </section>

1154
scss/ionic-structure.css
View File

File diff suppressed because it is too large Load Diff

1
scss/ionic-structure.scss
View File

@ -7,6 +7,7 @@
"ionic/mixins", "ionic/mixins",
"ionic/theme-variables", "ionic/theme-variables",
"ionic/structure/normalize",
"ionic/structure/base", "ionic/structure/base",
"ionic/structure/alerts", "ionic/structure/alerts",

253
scss/ionic-theme.css
View File

@ -1,253 +0,0 @@
@charset "UTF-8";
body {
font-size: 14px;
line-height: 1.25;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
main {
background-color: white; }
.full-section {
-webkit-box-shadow: -3px 0px 10px rgba(0, 0, 0, 0.2), 3px 0px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -3px 0px 10px rgba(0, 0, 0, 0.2), 3px 0px 10px rgba(0, 0, 0, 0.2);
box-shadow: -3px 0px 10px rgba(0, 0, 0, 0.2), 3px 0px 10px rgba(0, 0, 0, 0.2); }
.alert {
margin-bottom: 1.42857;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #fcf8e3;
border: 1px solid #fbeed5; }
.alert,
.alert h4 {
color: #c09853; }
.alert-success {
background-color: #dff0d8;
border-color: #d6e9c6;
color: #468847; }
.alert-success h4 {
color: #468847; }
.alert-danger,
.alert-error {
background-color: #f2dede;
border-color: #eed3d7;
color: #b94a48; }
.alert-danger h4,
.alert-error h4 {
color: #b94a48; }
.alert-info {
background-color: #d9edf7;
border-color: #bce8f1;
color: #3a87ad; }
.alert-info h4 {
color: #3a87ad; }
.bar {
background-color: white;
border-style: solid;
border-width: 0;
/*
Disabled temporarily because it's annoying for testing.
@media screen and (orientation : landscape) {
padding: $barPaddingLandscape;
}
*/ }
.bar.bar-header {
border-bottom-width: 1px; }
.bar.bar-footer {
border-top-width: 1px; }
.bar.bar-default {
background-color: white;
border-color: #dddddd;
color: #333333; }
.bar.bar-default .tab-item a {
color: #333333; }
.bar.bar-secondary {
background-color: whitesmoke;
border-color: #cccccc;
color: #333333; }
.bar.bar-secondary .tab-item a {
color: #333333; }
.bar.bar-primary {
background-color: #6999e9;
border-color: #5981c5;
color: white; }
.bar.bar-primary .tab-item a {
color: white; }
.bar.bar-info {
background-color: #60d2e6;
border-color: #51b3c4;
color: white; }
.bar.bar-info .tab-item a {
color: white; }
.bar.bar-success {
background-color: #89c163;
border-color: #71a052;
color: white; }
.bar.bar-success .tab-item a {
color: white; }
.bar.bar-warning {
background-color: #f0b840;
border-color: #cf9a29;
color: white; }
.bar.bar-warning .tab-item a {
color: white; }
.bar.bar-danger {
background-color: #de5645;
border-color: #bc4435;
color: white; }
.bar.bar-danger .tab-item a {
color: white; }
.bar.bar-dark {
background-color: #444444;
border-color: #111111;
color: white; }
.bar.bar-dark .tab-item a {
color: white; }
.button {
color: #222222;
border-radius: 2px;
border-width: 1px;
border-style: solid;
padding: 10px 15px; }
a.button {
text-decoration: none; }
.button-default {
color: #333333;
background-color: white;
border-color: #dddddd; }
.button-default:hover {
color: #333333;
text-decoration: none; }
.button-default.active, .button-default:active {
background-color: #ebebeb;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #c4c4c4; }
.button-secondary {
color: #333333;
background-color: whitesmoke;
border-color: #cccccc; }
.button-secondary:hover {
color: #333333;
text-decoration: none; }
.button-secondary.active, .button-secondary:active {
background-color: #e1e1e1;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #b3b3b3; }
.button-primary {
color: white;
background-color: #6999e9;
border-color: #5981c5; }
.button-primary:hover {
color: white;
text-decoration: none; }
.button-primary.active, .button-primary:active {
background-color: #4581e4;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #3d67ae; }
.button-info {
color: white;
background-color: #60d2e6;
border-color: #51b3c4; }
.button-info:hover {
color: white;
text-decoration: none; }
.button-info.active, .button-info:active {
background-color: #3dc8e0;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #3998a9; }
.button-success {
color: white;
background-color: #89c163;
border-color: #71a052; }
.button-success:hover {
color: white;
text-decoration: none; }
.button-success.active, .button-success:active {
background-color: #73b447;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #597e41; }
.button-warning {
color: white;
background-color: #f0b840;
border-color: #cf9a29; }
.button-warning:hover {
color: white;
text-decoration: none; }
.button-warning.active, .button-warning:active {
background-color: #edaa1a;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #a47a21; }
.button-danger {
color: white;
background-color: #de5645;
border-color: #bc4435; }
.button-danger:hover {
color: white;
text-decoration: none; }
.button-danger.active, .button-danger:active {
background-color: #d43926;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #94362a; }
.button-dark {
color: white;
background-color: #444444;
border-color: #111111; }
.button-dark:hover {
color: white;
text-decoration: none; }
.button-dark.active, .button-dark:active {
background-color: #303030;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: black; }
.button-transparent {
background: transparent; }
.button-borderless [class^="icon-"] {
font-size: 24px; }
.list-divider {
background-color: whitesmoke;
color: #222222;
font-weight: bold; }
a.list-item {
color: #333333; }
.ion-panel {
background: #eeeeee; }
.ion-panel-left .ion-panel {
border-right: 1px solid #bbbbbb; }
.ion-panel-right .ion-panel {
border-left: 1px solid #bbbbbb; }
.ptr-content {
background: #eee; }
.tabs {
font-size: 16px; }
.tab-item a {
font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 200; }
.tab-item i {
font-size: 25px; }

1407
scss/ionic.css
View File

File diff suppressed because it is too large Load Diff

1
scss/ionic/_structure-variables.scss
View File

@ -12,6 +12,7 @@ $baseBorderRadius: 2px !default;
// Content stuff // Content stuff
// ------------------------------- // -------------------------------
$contentPadding: 10px; $contentPadding: 10px;
$insetMargin: 10px;
$roundedRadius: 5px; $roundedRadius: 5px;

10
scss/ionic/_theme-variables.scss
View File

@ -14,7 +14,7 @@ $grayDarker: #222 !default;
$grayDark: #333 !default; $grayDark: #333 !default;
$gray: #555 !default; $gray: #555 !default;
$grayLight: #999 !default; $grayLight: #999 !default;
$grayLighter: #eee !default; $grayLighter: #f5f5f5 !default;
$white: #fff !default; $white: #fff !default;
@ -41,17 +41,17 @@ $monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace !defau
// Base // Base
// ------------------------------- // -------------------------------
$baseFontFamily: $sansFontFamily; $baseFontFamily: $sansFontFamily;
$baseBackgroundColor: #fff; $baseBackgroundColor: $white;
$textColor: $grayDark !default; $textColor: $grayDark !default;
// Forms // Forms
// ------------------------- // -------------------------------
$inputBackground: $white !default; $inputBackground: $white !default;
$inputBorder: #ccc !default; $inputBorder: $grayLight !default;
$inputBorderRadius: 4px !default; $inputBorderRadius: 4px !default;
$inputDisabledBackground: $grayLighter !default; $inputDisabledBackground: $grayLighter !default;
$formActionsBackground: #f5f5f5 !default; $formActionsBackground: $grayLighter !default;
$inputHeight: $baseFontSize + 10px; // base line-height + 8px vertical padding + 2px top/bottom border $inputHeight: $baseFontSize + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
$placeholderText: $grayLight !default; $placeholderText: $grayLight !default;

7
scss/ionic/structure/_bar.scss
View File

@ -4,16 +4,15 @@
@include disable-user-select(); @include disable-user-select();
position: fixed; position: fixed;
right: 0;
left: 0; left: 0;
right: 0;
z-index: 10; z-index: 10;
width: 100%; width: 100%;
height: $barHeight;
padding: $barPaddingPortrait;
box-sizing: border-box; box-sizing: border-box;
height: $barHeight;
padding: $barPaddingPortrait;
// Title inside of a bar is centered // Title inside of a bar is centered
.title { .title {

67
scss/ionic/structure/_base.scss
View File

@ -14,6 +14,42 @@ body {
bottom: 0; bottom: 0;
left: 0; left: 0;
margin: 0; margin: 0;
padding: 0;
overflow: hidden;
word-wrap: break-word;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
text-size-adjust: none;
-webkit-tap-highlight-color: transparent;
-webkit-overflow-scrolling: touch;
}
.view {
width: 100%;
height: 100%;
}
.content {
position: fixed;
overflow: auto;
right: 0;
left: 0;
}
/* Hack to force all relatively and absolutely positioned elements still render while scrolling
Note: This is a bug for "-webkit-overflow-scrolling: touch" (via ratchet) */
.content > *, .content-padded > * {
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
}
.content-padded {
padding: $contentPadding;
}
.rounded {
border-radius: $roundedRadius;
} }
// Remove tap highlight color on Safari // Remove tap highlight color on Safari
@ -21,8 +57,6 @@ a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
ul { margin: 0; padding: 0; }
.page, .full-section { .page, .full-section {
position: fixed; position: fixed;
top: 0; top: 0;
@ -36,32 +70,3 @@ ul { margin: 0; padding: 0; }
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
background-color: #fff; background-color: #fff;
} }
.content {
position: absolute;
width: 100%;
height: 100%;
}
/* Hack to force all relatively and absolutely positioned elements still render while scrolling
Note: This is a bug for "-webkit-overflow-scrolling: touch" (via ratchet) */
.content > *, .content-padded > * {
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
}
.content-padded {
padding: $contentPadding;
}
// A section is a wrapper that contains objects that are positioned
// together. For example, the entire contents of a page could
// be a section, to make it easy to drag the section and expose panels
// on the left and right sides of the app.
.section {
position: fixed;
z-index: 1;
}
.rounded {
border-radius: $roundedRadius;
}

71
scss/ionic/structure/_form.scss
View File

@ -1,10 +1,6 @@
// //
// Forms // Forms
// -------------------------------------------------- // -------------------------------
// GENERAL STYLES
// --------------
// Make all forms have space below them // Make all forms have space below them
form { form {
@ -55,10 +51,38 @@ textarea {
label { label {
display: block; display: block;
margin-bottom: 5px; margin-bottom: 5px;
border-top: 1px solid $inputBorder;
border-bottom: 1px solid $inputBorder;
padding: 4px 7px 3px;
} }
// Form controls label input {
// ------------------------- margin: 0;
}
.content-padded > label.input-wrapper,
.content-padded > label.stacked,
label.inset
{
border-left: 1px solid $inputBorder;
border-right: 1px solid $inputBorder;
@include border-radius(2px);
}
label.inset {
margin: $insetMargin;
}
label.stacked {
padding: 0;
border: 0;
input {
border: 1px solid $inputBorder;
}
}
// Form Controls
// -------------------------------
// Shared size and type resets // Shared size and type resets
select, select,
@ -80,26 +104,23 @@ input[type="color"],
.uneditable-input { .uneditable-input {
display: inline-block; display: inline-block;
height: $baseLineHeightComputed + 14px; height: $baseLineHeightComputed + 14px;
padding: 4px 6px;
margin-bottom: $baseLineHeightComputed / 2;;
font-size: $baseFontSize; font-size: $baseFontSize;
line-height: $baseLineHeightComputed; line-height: $baseLineHeightComputed;
color: $gray; color: $gray;
@include border-radius($inputBorderRadius);
vertical-align: middle; vertical-align: middle;
} }
// Reset appearance properties for textual inputs and textarea
// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
input, input,
textarea, textarea,
.uneditable-input { .uneditable-input {
width: 100%; width: 100%;
} }
// Reset height since textareas have rows // Reset height since textareas have rows
textarea { textarea {
height: auto; height: auto;
} }
// Everything else // Everything else
textarea, textarea,
input[type="text"], input[type="text"],
@ -118,24 +139,21 @@ input[type="tel"],
input[type="color"], input[type="color"],
.uneditable-input { .uneditable-input {
background-color: $inputBackground; background-color: $inputBackground;
border: 1px solid $inputBorder; border: 0;
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
@include transition(border linear .2s, box-shadow linear .2s);
// Focus state // Focus state
&:focus { &:focus {
border-color: rgba(82,168,236,.8);
outline: 0; outline: 0;
outline: thin dotted \9; /* IE6-9 */ outline: thin dotted \9; /* IE6-9 */
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6));
} }
} }
// Position radios and checkboxes better // Position radios and checkboxes better
input[type="radio"], input[type="radio"],
input[type="checkbox"] { input[type="checkbox"] {
margin: 4px 0 0; margin: 4px 0 0;
*margin-top: 0; /* IE7 */
margin-top: 1px \9; /* IE8-9 */ margin-top: 1px \9; /* IE8-9 */
line-height: normal; line-height: normal;
} }
@ -182,7 +200,7 @@ input[type="checkbox"]:focus {
// Uneditable inputs // Uneditable inputs
// ------------------------- // -------------------------------
// Make uneditable inputs look inactive // Make uneditable inputs look inactive
.uneditable-input, .uneditable-input,
@ -190,7 +208,6 @@ input[type="checkbox"]:focus {
color: $grayLight; color: $grayLight;
background-color: darken($inputBackground, 1%); background-color: darken($inputBackground, 1%);
border-color: $inputBorder; border-color: $inputBorder;
@include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
cursor: not-allowed; cursor: not-allowed;
} }
@ -208,9 +225,7 @@ input[type="checkbox"]:focus {
// Placeholder // Placeholder
// ------------------------- // -------------------------------
// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
input, input,
textarea { textarea {
@include placeholder(); @include placeholder();
@ -218,7 +233,7 @@ textarea {
// CHECKBOXES & RADIOS // CHECKBOXES & RADIOS
// ------------------- // -------------------------------
// Indent the labels to position radios/checkboxes as hanging // Indent the labels to position radios/checkboxes as hanging
.radio, .radio,
@ -255,7 +270,7 @@ textarea {
// INPUT SIZES // INPUT SIZES
// ----------- // -------------------------------
// General classes for quick sizes // General classes for quick sizes
.input-mini { width: 60px; } .input-mini { width: 60px; }
@ -295,7 +310,7 @@ textarea[class*="span"],
// GRID SIZING FOR INPUTS // GRID SIZING FOR INPUTS
// ---------------------- // -------------------------------
// Grid sizes // Grid sizes
@include grid-input($gridColumnWidth, $gridGutterWidth); @include grid-input($gridColumnWidth, $gridGutterWidth);
@ -373,7 +388,6 @@ select:focus:invalid {
border-color: #ee5f5b; border-color: #ee5f5b;
&:focus { &:focus {
border-color: darken(#ee5f5b, 10%); border-color: darken(#ee5f5b, 10%);
@include box-shadow(0 0 6px lighten(#ee5f5b, 20%));
} }
} }
@ -441,9 +455,7 @@ select:focus:invalid {
.uneditable-input { .uneditable-input {
position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
*margin-left: 0;
vertical-align: top; vertical-align: top;
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
// Make input on top when focused so blue border and shadow always show // Make input on top when focused so blue border and shadow always show
&:focus { &:focus {
z-index: 2; z-index: 2;
@ -662,7 +674,6 @@ legend + .control-group {
*display: inline-block; *display: inline-block;
*padding-left: 20px; *padding-left: 20px;
margin-left: $horizontalComponentOffset; margin-left: $horizontalComponentOffset;
*margin-left: 0;
&:first-child { &:first-child {
*padding-left: $horizontalComponentOffset; *padding-left: $horizontalComponentOffset;
} }