diff --git a/dist/ionic.css b/dist/ionic.css index b3aefb9a86..ed8b036956 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; } + html { -webkit-text-size-adjust: 100%; -webkit-touch-callout: none; @@ -12,15 +355,45 @@ 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; } + +.inset { + margin: 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; @@ -34,27 +407,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; } @@ -84,13 +436,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, @@ -292,9 +644,62 @@ select, textarea { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } -label { +.input-wrapper { display: block; - margin-bottom: 5px; } + border-top: 1px solid #999999; + border-bottom: 1px solid #999999; + padding: 4px 7px 3px; } + .input-wrapper input { + margin: 0; + -webkit-appearance: none; } + .input-wrapper .input-label { + font-weight: bold; + line-height: 34px; } + +.content-padded > .input-wrapper, +.input-wrapper.inset { + border-left: 1px solid #999999; + border-right: 1px solid #999999; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; } + +.input-wrapper.row-fluid { + width: auto; } + +.stacked-label { + padding: 0; } + .stacked-label input { + border: 1px solid #999999; } + +.stacked-label { + border: 0; } + .stacked-label input { + border: 1px solid #999999 !important; + padding: 20px 10px !important; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; } + .stacked-label span { + font-weight: bold; + line-height: 20px; } + +.content > .input-wrapper.stacked-label input { + border-left: 0 !important; + border-right: 0 !important; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; } + +.content-padded > .input-wrapper.stacked-label, +.content > .input-wrapper.stacked-label.inset { + border: 0 !important; } + +.content > .input-wrapper.stacked-label.inset input { + border: 1px solid #999999 !important; } + +.input-wrapper + .input-wrapper { + border-top: 0 !important; } select, textarea, @@ -315,14 +720,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, @@ -350,14 +750,7 @@ input[type="tel"], input[type="color"], .uneditable-input { background-color: white; - border: 1px solid #cccccc; - -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, @@ -374,19 +767,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; } @@ -404,13 +791,11 @@ select, input[type="file"] { height: 24px; /* In IE7, the height of the select element cannot be changed by height, only font-size */ - *margin-top: 4px; - /* For IE7, add top margin to align select with labels */ line-height: 24px; } select { width: 220px; - border: 1px solid #cccccc; + border: 1px solid #999999; background-color: white; } select[multiple], @@ -429,10 +814,7 @@ input[type="checkbox"]:focus { .uneditable-textarea { color: #999999; background-color: #fcfcfc; - border-color: #cccccc; - -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); + border-color: #999999; cursor: not-allowed; } .uneditable-input { @@ -611,7 +993,7 @@ input[readonly], select[readonly], textarea[readonly] { cursor: not-allowed; - background-color: #eeeeee; } + background-color: whitesmoke; } input[type="radio"][disabled], input[type="checkbox"][disabled], @@ -747,10 +1129,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; @@ -808,11 +1187,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, @@ -832,7 +1207,7 @@ select:focus:invalid { line-height: 1.42857; text-align: center; text-shadow: 0 1px 0 white; - background-color: #eeeeee; + background-color: whitesmoke; border: 1px solid #cccccc; } .input-append .add-on, .input-append .btn, @@ -1030,8 +1405,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 { @@ -1046,6 +1420,239 @@ legend + .control-group { .form-horizontal .form-actions { padding-left: 180px; } +.row { + margin-left: -20px; + *zoom: 1; } + .row:before, .row:after { + display: table; + content: ""; + line-height: 0; } + .row:after { + clear: both; } + +[class*="span"] { + float: left; + min-height: 1px; + margin-left: 20px; } + +.container, +.navbar-static-top .container, +.navbar-fixed-top .container, +.navbar-fixed-bottom .container { + width: 940px; } + +.span1 { + width: 60px; } + +.span2 { + width: 140px; } + +.span3 { + width: 220px; } + +.span4 { + width: 300px; } + +.span5 { + width: 380px; } + +.span6 { + width: 460px; } + +.span7 { + width: 540px; } + +.span8 { + width: 620px; } + +.span9 { + width: 700px; } + +.span10 { + width: 780px; } + +.span11 { + width: 860px; } + +.span12 { + width: 940px; } + +.offset1 { + margin-left: 100px; } + +.offset2 { + margin-left: 180px; } + +.offset3 { + margin-left: 260px; } + +.offset4 { + margin-left: 340px; } + +.offset5 { + margin-left: 420px; } + +.offset6 { + margin-left: 500px; } + +.offset7 { + margin-left: 580px; } + +.offset8 { + margin-left: 660px; } + +.offset9 { + margin-left: 740px; } + +.offset10 { + margin-left: 820px; } + +.offset11 { + margin-left: 900px; } + +.offset12 { + margin-left: 980px; } + +.row-fluid { + width: 100%; + *zoom: 1; } + .row-fluid:before, .row-fluid:after { + display: table; + content: ""; + line-height: 0; } + .row-fluid:after { + clear: both; } + .row-fluid [class*="span"] { + display: block; + width: 100%; + min-height: 24px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + float: left; + margin-left: 2.12766%; + *margin-left: 2.07447%; } + .row-fluid [class*="span"]:first-child { + margin-left: 0; } + .row-fluid .controls-row [class*="span"] + [class*="span"] { + margin-left: 2.12766%; } + .row-fluid .span1 { + width: 6.38298%; + *width: 6.32979%; } + .row-fluid .span2 { + width: 14.89362%; + *width: 14.84043%; } + .row-fluid .span3 { + width: 23.40426%; + *width: 23.35106%; } + .row-fluid .span4 { + width: 31.91489%; + *width: 31.8617%; } + .row-fluid .span5 { + width: 40.42553%; + *width: 40.37234%; } + .row-fluid .span6 { + width: 48.93617%; + *width: 48.88298%; } + .row-fluid .span7 { + width: 57.44681%; + *width: 57.39362%; } + .row-fluid .span8 { + width: 65.95745%; + *width: 65.90426%; } + .row-fluid .span9 { + width: 74.46809%; + *width: 74.41489%; } + .row-fluid .span10 { + width: 82.97872%; + *width: 82.92553%; } + .row-fluid .span11 { + width: 91.48936%; + *width: 91.43617%; } + .row-fluid .span12 { + width: 100%; + *width: 99.94681%; } + .row-fluid .offset1 { + margin-left: 10.6383%; + *margin-left: 10.53191%; } + .row-fluid .offset1:first-child { + margin-left: 8.51064%; + *margin-left: 8.40426%; } + .row-fluid .offset2 { + margin-left: 19.14894%; + *margin-left: 19.04255%; } + .row-fluid .offset2:first-child { + margin-left: 17.02128%; + *margin-left: 16.91489%; } + .row-fluid .offset3 { + margin-left: 27.65957%; + *margin-left: 27.55319%; } + .row-fluid .offset3:first-child { + margin-left: 25.53191%; + *margin-left: 25.42553%; } + .row-fluid .offset4 { + margin-left: 36.17021%; + *margin-left: 36.06383%; } + .row-fluid .offset4:first-child { + margin-left: 34.04255%; + *margin-left: 33.93617%; } + .row-fluid .offset5 { + margin-left: 44.68085%; + *margin-left: 44.57447%; } + .row-fluid .offset5:first-child { + margin-left: 42.55319%; + *margin-left: 42.44681%; } + .row-fluid .offset6 { + margin-left: 53.19149%; + *margin-left: 53.08511%; } + .row-fluid .offset6:first-child { + margin-left: 51.06383%; + *margin-left: 50.95745%; } + .row-fluid .offset7 { + margin-left: 61.70213%; + *margin-left: 61.59574%; } + .row-fluid .offset7:first-child { + margin-left: 59.57447%; + *margin-left: 59.46809%; } + .row-fluid .offset8 { + margin-left: 70.21277%; + *margin-left: 70.10638%; } + .row-fluid .offset8:first-child { + margin-left: 68.08511%; + *margin-left: 67.97872%; } + .row-fluid .offset9 { + margin-left: 78.7234%; + *margin-left: 78.61702%; } + .row-fluid .offset9:first-child { + margin-left: 76.59574%; + *margin-left: 76.48936%; } + .row-fluid .offset10 { + margin-left: 87.23404%; + *margin-left: 87.12766%; } + .row-fluid .offset10:first-child { + margin-left: 85.10638%; + *margin-left: 85.0%; } + .row-fluid .offset11 { + margin-left: 95.74468%; + *margin-left: 95.6383%; } + .row-fluid .offset11:first-child { + margin-left: 93.61702%; + *margin-left: 93.51064%; } + .row-fluid .offset12 { + margin-left: 104.25532%; + *margin-left: 104.14894%; } + .row-fluid .offset12:first-child { + margin-left: 102.12766%; + *margin-left: 102.02128%; } + +[class*="span"].hide, +.row-fluid [class*="span"].hide { + display: none; } + +[class*="span"].pull-right, +.row-fluid [class*="span"].pull-right { + float: right; } + .list { margin-bottom: 20px; padding-left: 0; } diff --git a/example/input-text.html b/example/input-text.html index 8a1433857e..0ca1418707 100644 --- a/example/input-text.html +++ b/example/input-text.html @@ -25,72 +25,108 @@