diff --git a/dist/ionic.css b/dist/ionic.css index f62d6ba206..641fb947c5 100644 --- a/dist/ionic.css +++ b/dist/ionic.css @@ -1,4 +1,347 @@ @charset "UTF-8"; +/* normalize.css v2.1.2 | MIT License | git.io/normalize */ +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ +/** + * Correct `block` display not defined in IE 8/9. + */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; } + +/** + * Correct `inline-block` display not defined in IE 8/9. + */ +audio, +canvas, +video { + display: inline-block; } + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ +audio:not([controls]) { + display: none; + height: 0; } + +/** + * Address `[hidden]` styling not present in IE 8/9. + * Hide the `template` element in IE, Safari, and Firefox < 22. + */ +[hidden], +template { + display: none; } + +script { + display: none !important; } + +/* ========================================================================== + Base + ========================================================================== */ +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ +html { + font-family: sans-serif; + /* 1 */ + -ms-text-size-adjust: 100%; + /* 2 */ + -webkit-text-size-adjust: 100%; + /* 2 */ } + +/** + * Remove default margin. + */ +body { + margin: 0; } + +/* ========================================================================== + Links + ========================================================================== */ +/** + * Remove the gray background color from active links in IE 10. + */ +a { + background: transparent; } + +/** + * Address `outline` inconsistency between Chrome and other browsers. + */ +a:focus { + outline: thin dotted; } + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ +a:active, +a:hover { + outline: 0; } + +/* ========================================================================== + Typography + ========================================================================== */ +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari 5, and Chrome. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; } + +/** + * Address styling not present in IE 8/9, Safari 5, and Chrome. + */ +abbr[title] { + border-bottom: 1px dotted; } + +/** + * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ +b, +strong { + font-weight: bold; } + +/** + * Address styling not present in Safari 5 and Chrome. + */ +dfn { + font-style: italic; } + +/** + * Address differences between Firefox and other browsers. + */ +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; } + +/** + * Address styling not present in IE 8/9. + */ +mark { + background: #ff0; + color: #000; } + +/** + * Correct font family set oddly in Safari 5 and Chrome. + */ +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; } + +/** + * Improve readability of pre-formatted text in all browsers. + */ +pre { + white-space: pre-wrap; } + +/** + * Set consistent quote types. + */ +q { + quotes: "\201C" "\201D" "\2018" "\2019"; } + +/** + * Address inconsistent and variable font size in all browsers. + */ +small { + font-size: 80%; } + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sup { + top: -0.5em; } + +sub { + bottom: -0.25em; } + +/* ========================================================================== + Embedded content + ========================================================================== */ +/** + * Remove border when inside `a` element in IE 8/9. + */ +img { + border: 0; } + +/** + * Correct overflow displayed oddly in IE 9. + */ +svg:not(:root) { + overflow: hidden; } + +/* ========================================================================== + Figures + ========================================================================== */ +/** + * Address margin not present in IE 8/9 and Safari 5. + */ +figure { + margin: 0; } + +/* ========================================================================== + Forms + ========================================================================== */ +/** + * Define consistent border, margin, and padding. + */ +fieldset { + border: 1px solid silver; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } + +/** + * 1. Correct `color` not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ +legend { + border: 0; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * 1. Correct font family not being inherited in all browsers. + * 2. Correct font size not being inherited in all browsers. + * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. + */ +button, +input, +select, +textarea { + font-family: inherit; + /* 1 */ + font-size: 100%; + /* 2 */ + margin: 0; + /* 3 */ } + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ +button, +input { + line-height: normal; } + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ +button, +select { + text-transform: none; } + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; + /* 2 */ + cursor: pointer; + /* 3 */ } + +/** + * Re-set default cursor for disabled elements. + */ +button[disabled], +html input[disabled] { + cursor: default; } + +/** + * 1. Address box sizing set to `content-box` in IE 8/9. + * 2. Remove excess padding in IE 8/9. + */ +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ +input[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + /* 2 */ + box-sizing: content-box; } + +/** + * Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +/** + * Remove inner padding and border in Firefox 4+. + */ +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; } + +/** + * 1. Remove default vertical scrollbar in IE 8/9. + * 2. Improve readability and alignment in all browsers. + */ +textarea { + overflow: auto; + /* 1 */ + vertical-align: top; + /* 2 */ } + +/* ========================================================================== + Tables + ========================================================================== */ +/** + * Remove most spacing between table cells. + */ +table { + border-collapse: collapse; + border-spacing: 0; } + *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -18,15 +361,42 @@ body { right: 0; bottom: 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: 10px; } + +.rounded { + border-radius: 5px; } a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } -ul { - margin: 0; - padding: 0; } - .page, .full-section { position: fixed; top: 0; @@ -40,27 +410,6 @@ ul { -webkit-overflow-scrolling: touch; 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: 10px; } - -.section { - position: fixed; - z-index: 1; } - -.rounded { - border-radius: 5px; } - .alert { padding: 8px 35px 8px 14px; } @@ -90,13 +439,13 @@ ul { -moz-user-select: -moz-none; user-select: none; position: fixed; - right: 0; left: 0; + right: 0; z-index: 10; width: 100%; - box-sizing: border-box; height: 44px; padding: 8px; + box-sizing: border-box; /* .title + .button:last-child, .button + .button:last-child, @@ -298,7 +647,31 @@ textarea { label { display: block; - margin-bottom: 5px; } + margin-bottom: 5px; + border-top: 1px solid #999999; + border-bottom: 1px solid #999999; + padding: 4px 7px 3px; } + +label input { + margin: 0; } + +.content-padded > label.input-wrapper, +.content-padded > label.stacked, +label.inset { + border-left: 1px solid #999999; + border-right: 1px solid #999999; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; } + +label.inset { + margin: 10px; } + +label.stacked { + padding: 0; + border: 0; } + label.stacked input { + border: 1px solid #999999; } select, textarea, @@ -319,14 +692,9 @@ input[type="color"], .uneditable-input { display: inline-block; height: 34px; - padding: 4px 6px; - margin-bottom: 10px; font-size: 14px; line-height: 20px; color: #555555; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; vertical-align: middle; } input, @@ -354,14 +722,7 @@ input[type="tel"], input[type="color"], .uneditable-input { background-color: white; - border: 1px solid #999999; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; - -moz-transition: border linear 0.2s, box-shadow linear 0.2s; - -o-transition: border linear 0.2s, box-shadow linear 0.2s; - transition: border linear 0.2s, box-shadow linear 0.2s; } + border: 0; } textarea:focus, input[type="text"]:focus, input[type="password"]:focus, @@ -378,19 +739,13 @@ input[type="color"], input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus { - border-color: rgba(82, 168, 236, 0.8); outline: 0; outline: thin dotted \9; - /* IE6-9 */ - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); } + /* IE6-9 */ } input[type="radio"], input[type="checkbox"] { margin: 4px 0 0; - *margin-top: 0; - /* IE7 */ margin-top: 1px \9; /* IE8-9 */ line-height: normal; } @@ -434,9 +789,6 @@ input[type="checkbox"]:focus { color: #999999; background-color: #fcfcfc; border-color: #999999; - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); cursor: not-allowed; } .uneditable-input { @@ -751,10 +1103,7 @@ select:focus:invalid { input:focus:invalid:focus, textarea:focus:invalid:focus, select:focus:invalid:focus { - border-color: #e9322d; - -webkit-box-shadow: 0 0 6px #f8b9b7; - -moz-box-shadow: 0 0 6px #f8b9b7; - box-shadow: 0 0 6px #f8b9b7; } + border-color: #e9322d; } .form-actions { padding: 0.42857 20px 1.42857; @@ -812,11 +1161,7 @@ select:focus:invalid { .input-prepend .uneditable-input { position: relative; margin-bottom: 0; - *margin-left: 0; - vertical-align: top; - -webkit-border-radius: 0 4px 4px 0; - -moz-border-radius: 0 4px 4px 0; - border-radius: 0 4px 4px 0; } + vertical-align: top; } .input-append input:focus, .input-append select:focus, .input-append .uneditable-input:focus, @@ -1034,8 +1379,7 @@ legend + .control-group { .form-horizontal .controls { *display: inline-block; *padding-left: 20px; - margin-left: 180px; - *margin-left: 0; } + margin-left: 180px; } .form-horizontal .controls:first-child { *padding-left: 180px; } .form-horizontal .help-block { diff --git a/example/forms.html b/example/forms.html index 43a0998043..102a8ad8d6 100644 --- a/example/forms.html +++ b/example/forms.html @@ -20,7 +20,6 @@

Default form layout

-
Legend diff --git a/example/input-text.html b/example/input-text.html index 6fd988a203..8a1433857e 100644 --- a/example/input-text.html +++ b/example/input-text.html @@ -1,7 +1,7 @@ - Input: Text + Text Inputs @@ -11,29 +11,87 @@ -
+
-

Input: Text

+

Text Inputs

-
- -

Text input

-

- -

- -

Search input

-

- -

- -

Textarea

- + + +
+
diff --git a/scss/ionic-structure.scss b/scss/ionic-structure.scss index b0917f397b..563a33530d 100755 --- a/scss/ionic-structure.scss +++ b/scss/ionic-structure.scss @@ -7,6 +7,7 @@ "ionic/mixins", "ionic/theme-variables", + "ionic/structure/normalize", "ionic/structure/base", "ionic/structure/alerts", diff --git a/scss/ionic/_structure-variables.scss b/scss/ionic/_structure-variables.scss index 5a1bd0bc56..9f9d8a3e16 100644 --- a/scss/ionic/_structure-variables.scss +++ b/scss/ionic/_structure-variables.scss @@ -12,6 +12,7 @@ $baseBorderRadius: 2px !default; // Content stuff // ------------------------------- $contentPadding: 10px; +$insetMargin: 10px; $roundedRadius: 5px; diff --git a/scss/ionic/structure/_bar.scss b/scss/ionic/structure/_bar.scss index 5385753a3c..220ca45418 100644 --- a/scss/ionic/structure/_bar.scss +++ b/scss/ionic/structure/_bar.scss @@ -4,16 +4,15 @@ @include disable-user-select(); position: fixed; - right: 0; left: 0; + right: 0; z-index: 10; width: 100%; - + height: $barHeight; + padding: $barPaddingPortrait; box-sizing: border-box; - height: $barHeight; - padding: $barPaddingPortrait; // Title inside of a bar is centered .title { diff --git a/scss/ionic/structure/_base.scss b/scss/ionic/structure/_base.scss index b18fd5e08c..26d1c60894 100644 --- a/scss/ionic/structure/_base.scss +++ b/scss/ionic/structure/_base.scss @@ -21,33 +21,28 @@ body { bottom: 0; left: 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; } -// Remove tap highlight color on Safari -a { - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -ul { margin: 0; padding: 0; } - -.page, .full-section { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1; +.view { width: 100%; height: 100%; - overflow: auto; - -webkit-overflow-scrolling: touch; - background-color: #fff; } .content { - position: absolute; - width: 100%; - height: 100%; + 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) */ @@ -60,15 +55,25 @@ ul { margin: 0; padding: 0; } 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; } + +// Remove tap highlight color on Safari +a { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +.page, .full-section { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + width: 100%; + height: 100%; + overflow: auto; + -webkit-overflow-scrolling: touch; + background-color: #fff; +} diff --git a/scss/ionic/structure/_form.scss b/scss/ionic/structure/_form.scss index d5456c7131..6977531f7d 100644 --- a/scss/ionic/structure/_form.scss +++ b/scss/ionic/structure/_form.scss @@ -1,10 +1,6 @@ // // Forms -// -------------------------------------------------- - - -// GENERAL STYLES -// -------------- +// ------------------------------- // Make all forms have space below them form { @@ -55,10 +51,38 @@ textarea { label { display: block; 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 select, @@ -80,26 +104,23 @@ input[type="color"], .uneditable-input { display: inline-block; height: $baseLineHeightComputed + 14px; - padding: 4px 6px; - margin-bottom: $baseLineHeightComputed / 2;; font-size: $baseFontSize; line-height: $baseLineHeightComputed; color: $gray; - @include border-radius($inputBorderRadius); 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, textarea, .uneditable-input { width: 100%; } + // Reset height since textareas have rows textarea { height: auto; } + // Everything else textarea, input[type="text"], @@ -118,24 +139,21 @@ input[type="tel"], input[type="color"], .uneditable-input { background-color: $inputBackground; - border: 1px solid $inputBorder; - @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); - @include transition(border linear .2s, box-shadow linear .2s); + border: 0; // Focus state &:focus { - border-color: rgba(82,168,236,.8); outline: 0; 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 input[type="radio"], input[type="checkbox"] { margin: 4px 0 0; - *margin-top: 0; /* IE7 */ margin-top: 1px \9; /* IE8-9 */ line-height: normal; } @@ -182,7 +200,7 @@ input[type="checkbox"]:focus { // Uneditable inputs -// ------------------------- +// ------------------------------- // Make uneditable inputs look inactive .uneditable-input, @@ -190,7 +208,6 @@ input[type="checkbox"]:focus { color: $grayLight; background-color: darken($inputBackground, 1%); border-color: $inputBorder; - @include box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); cursor: not-allowed; } @@ -208,9 +225,7 @@ input[type="checkbox"]:focus { // Placeholder -// ------------------------- - -// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector +// ------------------------------- input, textarea { @include placeholder(); @@ -218,7 +233,7 @@ textarea { // CHECKBOXES & RADIOS -// ------------------- +// ------------------------------- // Indent the labels to position radios/checkboxes as hanging .radio, @@ -255,7 +270,7 @@ textarea { // INPUT SIZES -// ----------- +// ------------------------------- // General classes for quick sizes .input-mini { width: 60px; } @@ -295,7 +310,7 @@ textarea[class*="span"], // GRID SIZING FOR INPUTS -// ---------------------- +// ------------------------------- // Grid sizes @include grid-input($gridColumnWidth, $gridGutterWidth); @@ -373,7 +388,6 @@ select:focus:invalid { border-color: #ee5f5b; &:focus { border-color: darken(#ee5f5b, 10%); - @include box-shadow(0 0 6px lighten(#ee5f5b, 20%)); } } @@ -441,9 +455,7 @@ select:focus:invalid { .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 margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms - *margin-left: 0; vertical-align: top; - @include border-radius(0 $inputBorderRadius $inputBorderRadius 0); // Make input on top when focused so blue border and shadow always show &:focus { z-index: 2; @@ -662,7 +674,6 @@ legend + .control-group { *display: inline-block; *padding-left: 20px; margin-left: $horizontalComponentOffset; - *margin-left: 0; &:first-child { *padding-left: $horizontalComponentOffset; }