diff --git a/.gitignore b/.gitignore index 0ea098e655..784a6d2a59 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,5 @@ framework.sublime-project framework.sublime-workspace UserInterfaceState.xcuserstate + +dist/* diff --git a/dist/ionic.css b/dist/ionic.css deleted file mode 100644 index 1e24dc14ef..0000000000 --- a/dist/ionic.css +++ /dev/null @@ -1,1912 +0,0 @@ -@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-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; - user-select: none; } - -body { - position: fixed; - top: 0; - right: 0; - 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; } - -.view { - width: 100%; - height: 100%; } - -.content { - position: fixed; - overflow: auto; - right: 0; - left: 0; - bottom: 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: 4px; } - -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; } - -.alert { - padding: 8px 35px 8px 14px; } - -.alert h4 { - margin: 0; } - -.alert .close { - position: relative; - top: -2px; - right: -21px; - line-height: 1.42857; } - -.alert-block { - padding-top: 14px; - padding-bottom: 14px; } - -.alert-block > p, -.alert-block > ul { - margin-bottom: 0; } - -.alert-block p + p { - margin-top: 5px; } - -.bar { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; - user-select: none; - display: -webkit-box; - display: box; - position: fixed; - left: 0; - right: 0; - z-index: 10; - width: 100%; - height: 44px; - padding: 5px; - box-sizing: border-box; } - .bar .title { - position: absolute; - z-index: 0; - top: 0; - left: 0; - right: 0; - line-height: 44px; - margin: 0; - min-width: 30px; - text-overflow: ellipsis; - text-align: center; - white-space: nowrap; - font-size: 18px; } - .bar .title a { - color: inherit; } - .bar .button { - box-flex: 1; - -webkit-box-flex: 0; - -moz-box-flex: 0; - background-color: transparent; - line-height: 23px; - font-size: 12px; - padding: 4px 12px; } - .bar .button-bar { - line-height: 18px; } - .bar .button-bar + .button, .bar .button + .button-bar { - margin-left: 5px; } - .bar .title + .button:last-child, - .bar > .button + .button:last-child, - .bar > .button.pull-right, - .bar .title + .buttons { - position: absolute; - top: 5px; - right: 5px; } - -.bar-header { - top: 0; } - -.bar-footer { - bottom: 0; } - -.bar-tabs { - padding: 0; } - -.bar-header-secondary { - top: 44px; } - -.bar-footer-secondary { - bottom: 44px; } - -/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab. - Note: For these to work, content must come after both bars in the markup */ -.has-header { - top: 44px; } - -.has-footer { - bottom: 44px; } - -.button { - position: relative; - display: inline-block; - vertical-align: middle; - text-align: center; - cursor: pointer; - margin: 0; } - .button.button-icon { - background: none; - border: none; } - .button.button-block { - margin: 10px 0 10px 0; - display: block; - width: 100%; } - -.button-group { - position: relative; - display: inline-block; - vertical-align: middle; } - .button-group > .button { - position: relative; - float: left; } - .button-group > .button:hover, .button-group > .button:focus, .button-group > .button:active, .button-group > .button.active { - z-index: 2; } - .button-group > .button:focus { - outline: none; } - -.button-group .button + .button, -.button-group .button + .button-group, -.button-group .button-group + .button, -.button-group .button-group + .button-group { - margin-left: -1px; } - -.button-group > .button:not(:first-child):not(:last-child) { - border-radius: 0; } - -.button-group > .button:first-child { - margin-left: 0; } - .button-group > .button:first-child:not(:last-child) { - -webkit-border-top-right-radius: 0; - -moz-border-radius-topright: 0; - border-top-right-radius: 0; - -webkit-border-bottom-right-radius: 0; - -moz-border-radius-bottomright: 0; - border-bottom-right-radius: 0; } - -.button-group > .button:last-child:not(:first-child) { - -webkit-border-top-left-radius: 0; - -moz-border-radius-topleft: 0; - border-top-left-radius: 0; - -webkit-border-bottom-left-radius: 0; - -moz-border-radius-bottomleft: 0; - border-bottom-left-radius: 0; } - -.button-group > .button-group { - float: left; } - -.button-group > .button-group:not(:first-child):not(:last-child) > .button { - border-radius: 0; } - -.button-group > .button-group:first-child > .button:last-child, -.button-group > .button-group:first-child > .dropdown-toggle { - -webkit-border-top-right-radius: 0; - -moz-border-radius-topright: 0; - border-top-right-radius: 0; - -webkit-border-bottom-right-radius: 0; - -moz-border-radius-bottomright: 0; - border-bottom-right-radius: 0; } - -.button-group > .button-group:last-child > .button:first-child { - -webkit-border-top-left-radius: 0; - -moz-border-radius-topleft: 0; - border-top-left-radius: 0; - -webkit-border-bottom-left-radius: 0; - -moz-border-radius-bottomleft: 0; - border-bottom-left-radius: 0; } - -.button-bar { - display: -webkit-box; - display: box; - box-flex: 1; - -webkit-box-flex: 1; - -moz-box-flex: 1; - box-orient: horizontal; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; } - -.button-bar > .button { - box-flex: 1; - -webkit-box-flex: 1; - -moz-box-flex: 1; - line-height: 15px; - border-radius: 0; - overflow: hidden; - text-align: center; - white-space: nowrap; - display: block; - text-overflow: ellipsis; - border-width: 1px 0px 1px 1px; - padding: 8px 16px; } - .button-bar > .button:last-child { - border-right-width: 1px; } - -.buttons { - display: -webkit-box; - display: box; - box-flex: 1; - -webkit-box-flex: 1; - -moz-box-flex: 1; - box-orient: horizontal; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; } - -form { - margin: 0 0 1.42857; } - -fieldset { - padding: 0; - margin: 0; - border: 0; } - -legend { - display: block; - width: 100%; - padding: 0; - margin-bottom: 1.42857; - font-size: 21px; - line-height: 2.85714; - color: #333333; - border: 0; - border-bottom: 1px solid #e5e5e5; } - legend small { - font-size: 1.07143; - color: #999999; } - -label, -input, -button, -select, -textarea { - font-size: 14px; - font-weight: normal; - line-height: 1.42857; } - -input, -button, -select, -textarea { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } - -.form-group { - border-top: 1px solid #cccccc; - border-bottom: 1px solid #cccccc; - background-color: white; - overflow: hidden; } - -.content-padded > .form-group, -.form-group.inset { - border-left: 1px solid #cccccc; - border-right: 1px solid #cccccc; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; } - -.form-group .input-wrapper + .input-wrapper { - border-top: 1px solid #cccccc; } - -.form-group + .form-group { - margin-top: 10px; } - -.input-wrapper { - display: block; - padding: 6px 8px 5px; - overflow: hidden; } - .input-wrapper input { - background-color: transparent; - margin: 0; - -webkit-appearance: none; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; } - .input-wrapper .input-label { - font-weight: bold; - line-height: 34px; } - -.form-group.stacked-label, -.form-group.stacked-label .input-wrapper { - background-color: transparent; - border: 0; } - -.form-group.stacked-label input { - border: 1px solid #cccccc; - background-color: white; - padding: 4px 8px 3px; - overflow: hidden; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; } - -.input-wrapper.row { - margin-left: 0; - margin-right: 0; } - .input-wrapper.row [class*='col-'] { - padding-left: 0; - padding-right: 0; } - -select, -textarea, -input[type="text"], -input[type="password"], -input[type="datetime"], -input[type="datetime-local"], -input[type="date"], -input[type="month"], -input[type="time"], -input[type="week"], -input[type="number"], -input[type="email"], -input[type="url"], -input[type="search"], -input[type="tel"], -input[type="color"], -.uneditable-input { - display: inline-block; - height: 34px; - font-size: 14px; - line-height: 20px; - color: #555555; - vertical-align: middle; } - -input, -textarea, -.uneditable-input { - width: 100%; } - -textarea { - height: auto; } - -textarea, -input[type="text"], -input[type="password"], -input[type="datetime"], -input[type="datetime-local"], -input[type="date"], -input[type="month"], -input[type="time"], -input[type="week"], -input[type="number"], -input[type="email"], -input[type="url"], -input[type="search"], -input[type="tel"], -input[type="color"], -.uneditable-input { - border: 0; } - textarea:focus, - input[type="text"]:focus, - input[type="password"]:focus, - input[type="datetime"]:focus, - input[type="datetime-local"]:focus, - input[type="date"]:focus, - input[type="month"]:focus, - input[type="time"]:focus, - input[type="week"]:focus, - input[type="number"]:focus, - input[type="email"]:focus, - input[type="url"]:focus, - input[type="search"]:focus, - input[type="tel"]:focus, - input[type="color"]:focus, - .uneditable-input:focus { - outline: 0; - outline: thin dotted \9; - /* IE6-9 */ } - -input[type="radio"], -input[type="checkbox"] { - margin: 4px 0 0; - margin-top: 1px \9; - /* IE8-9 */ - line-height: normal; } - -input[type="file"], -input[type="image"], -input[type="submit"], -input[type="reset"], -input[type="button"], -input[type="radio"], -input[type="checkbox"] { - width: auto; } - -select, -input[type="file"] { - height: 34px; - /* In IE7, the height of the select element cannot be changed by height, only font-size */ - line-height: 34px; } - -select { - width: 220px; - border: 1px solid #cccccc; - background-color: white; } - -select[multiple], -select[size] { - height: auto; } - -select:focus, -input[type="file"]:focus, -input[type="radio"]:focus, -input[type="checkbox"]:focus { - outline: thin dotted #333333; - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; } - -input:-moz-placeholder, -textarea:-moz-placeholder { - color: #999999; } -input:-ms-input-placeholder, -textarea:-ms-input-placeholder { - color: #999999; } -input::-webkit-input-placeholder, -textarea::-webkit-input-placeholder { - color: #999999; } - -input[disabled], -select[disabled], -textarea[disabled], -input[readonly], -select[readonly], -textarea[readonly] { - cursor: not-allowed; - background-color: #eeeeee; } - -input[type="radio"][disabled], -input[type="checkbox"][disabled], -input[type="radio"][readonly], -input[type="checkbox"][readonly] { - background-color: transparent; } - -.container { - margin-right: auto; - margin-left: auto; - padding-left: 15px; - padding-right: 15px; - *zoom: 1; } - .container:before, .container:after { - display: table; - content: ""; - line-height: 0; } - .container:after { - clear: both; } - -.row { - margin-left: -15px; - margin-right: -15px; - *zoom: 1; } - .row:before, .row:after { - display: table; - content: ""; - line-height: 0; } - .row:after { - clear: both; } - -.col-xs-1, -.col-xs-2, -.col-xs-3, -.col-xs-4, -.col-xs-5, -.col-xs-6, -.col-xs-7, -.col-xs-8, -.col-xs-9, -.col-xs-10, -.col-xs-11, -.col-xs-12, -.col-sm-1, -.col-sm-2, -.col-sm-3, -.col-sm-4, -.col-sm-5, -.col-sm-6, -.col-sm-7, -.col-sm-8, -.col-sm-9, -.col-sm-10, -.col-sm-11, -.col-sm-12, -.col-md-1, -.col-md-2, -.col-md-3, -.col-md-4, -.col-md-5, -.col-md-6, -.col-md-7, -.col-md-8, -.col-md-9, -.col-md-10, -.col-md-11, -.col-md-12, -.col-lg-1, -.col-lg-2, -.col-lg-3, -.col-lg-4, -.col-lg-5, -.col-lg-6, -.col-lg-7, -.col-lg-8, -.col-lg-9, -.col-lg-10, -.col-lg-11, -.col-lg-12 { - position: relative; - min-height: 1px; - padding-left: 15px; - padding-right: 15px; } - -.col-xs-1, -.col-xs-2, -.col-xs-3, -.col-xs-4, -.col-xs-5, -.col-xs-6, -.col-xs-7, -.col-xs-8, -.col-xs-9, -.col-xs-10, -.col-xs-11 { - float: left; } - -.col-xs-1 { - width: 8.33333%; } - -.col-xs-2 { - width: 16.66667%; } - -.col-xs-3 { - width: 25%; } - -.col-xs-4 { - width: 33.33333%; } - -.col-xs-5 { - width: 41.66667%; } - -.col-xs-6 { - width: 50%; } - -.col-xs-7 { - width: 58.33333%; } - -.col-xs-8 { - width: 66.66667%; } - -.col-xs-9 { - width: 75%; } - -.col-xs-10 { - width: 83.33333%; } - -.col-xs-11 { - width: 91.66667%; } - -.col-xs-12 { - width: 100%; } - -@media (min-width: 768px) { - .container { - max-width: 750px; } - - .col-sm-1, - .col-sm-2, - .col-sm-3, - .col-sm-4, - .col-sm-5, - .col-sm-6, - .col-sm-7, - .col-sm-8, - .col-sm-9, - .col-sm-10, - .col-sm-11 { - float: left; } - - .col-sm-1 { - width: 8.33333%; } - - .col-sm-2 { - width: 16.66667%; } - - .col-sm-3 { - width: 25%; } - - .col-sm-4 { - width: 33.33333%; } - - .col-sm-5 { - width: 41.66667%; } - - .col-sm-6 { - width: 50%; } - - .col-sm-7 { - width: 58.33333%; } - - .col-sm-8 { - width: 66.66667%; } - - .col-sm-9 { - width: 75%; } - - .col-sm-10 { - width: 83.33333%; } - - .col-sm-11 { - width: 91.66667%; } - - .col-sm-12 { - width: 100%; } - - .col-sm-push-1 { - left: 8.33333%; } - - .col-sm-push-2 { - left: 16.66667%; } - - .col-sm-push-3 { - left: 25%; } - - .col-sm-push-4 { - left: 33.33333%; } - - .col-sm-push-5 { - left: 41.66667%; } - - .col-sm-push-6 { - left: 50%; } - - .col-sm-push-7 { - left: 58.33333%; } - - .col-sm-push-8 { - left: 66.66667%; } - - .col-sm-push-9 { - left: 75%; } - - .col-sm-push-10 { - left: 83.33333%; } - - .col-sm-push-11 { - left: 91.66667%; } - - .col-sm-pull-1 { - right: 8.33333%; } - - .col-sm-pull-2 { - right: 16.66667%; } - - .col-sm-pull-3 { - right: 25%; } - - .col-sm-pull-4 { - right: 33.33333%; } - - .col-sm-pull-5 { - right: 41.66667%; } - - .col-sm-pull-6 { - right: 50%; } - - .col-sm-pull-7 { - right: 58.33333%; } - - .col-sm-pull-8 { - right: 66.66667%; } - - .col-sm-pull-9 { - right: 75%; } - - .col-sm-pull-10 { - right: 83.33333%; } - - .col-sm-pull-11 { - right: 91.66667%; } - - .col-sm-offset-1 { - margin-left: 8.33333%; } - - .col-sm-offset-2 { - margin-left: 16.66667%; } - - .col-sm-offset-3 { - margin-left: 25%; } - - .col-sm-offset-4 { - margin-left: 33.33333%; } - - .col-sm-offset-5 { - margin-left: 41.66667%; } - - .col-sm-offset-6 { - margin-left: 50%; } - - .col-sm-offset-7 { - margin-left: 58.33333%; } - - .col-sm-offset-8 { - margin-left: 66.66667%; } - - .col-sm-offset-9 { - margin-left: 75%; } - - .col-sm-offset-10 { - margin-left: 83.33333%; } - - .col-sm-offset-11 { - margin-left: 91.66667%; } } -@media (min-width: 992px) { - .container { - max-width: 970px; } - - .col-md-1, - .col-md-2, - .col-md-3, - .col-md-4, - .col-md-5, - .col-md-6, - .col-md-7, - .col-md-8, - .col-md-9, - .col-md-10, - .col-md-11 { - float: left; } - - .col-md-1 { - width: 8.33333%; } - - .col-md-2 { - width: 16.66667%; } - - .col-md-3 { - width: 25%; } - - .col-md-4 { - width: 33.33333%; } - - .col-md-5 { - width: 41.66667%; } - - .col-md-6 { - width: 50%; } - - .col-md-7 { - width: 58.33333%; } - - .col-md-8 { - width: 66.66667%; } - - .col-md-9 { - width: 75%; } - - .col-md-10 { - width: 83.33333%; } - - .col-md-11 { - width: 91.66667%; } - - .col-md-12 { - width: 100%; } - - .col-md-push-0 { - left: auto; } - - .col-md-push-1 { - left: 8.33333%; } - - .col-md-push-2 { - left: 16.66667%; } - - .col-md-push-3 { - left: 25%; } - - .col-md-push-4 { - left: 33.33333%; } - - .col-md-push-5 { - left: 41.66667%; } - - .col-md-push-6 { - left: 50%; } - - .col-md-push-7 { - left: 58.33333%; } - - .col-md-push-8 { - left: 66.66667%; } - - .col-md-push-9 { - left: 75%; } - - .col-md-push-10 { - left: 83.33333%; } - - .col-md-push-11 { - left: 91.66667%; } - - .col-md-pull-0 { - right: auto; } - - .col-md-pull-1 { - right: 8.33333%; } - - .col-md-pull-2 { - right: 16.66667%; } - - .col-md-pull-3 { - right: 25%; } - - .col-md-pull-4 { - right: 33.33333%; } - - .col-md-pull-5 { - right: 41.66667%; } - - .col-md-pull-6 { - right: 50%; } - - .col-md-pull-7 { - right: 58.33333%; } - - .col-md-pull-8 { - right: 66.66667%; } - - .col-md-pull-9 { - right: 75%; } - - .col-md-pull-10 { - right: 83.33333%; } - - .col-md-pull-11 { - right: 91.66667%; } - - .col-md-offset-0 { - margin-left: 0; } - - .col-md-offset-1 { - margin-left: 8.33333%; } - - .col-md-offset-2 { - margin-left: 16.66667%; } - - .col-md-offset-3 { - margin-left: 25%; } - - .col-md-offset-4 { - margin-left: 33.33333%; } - - .col-md-offset-5 { - margin-left: 41.66667%; } - - .col-md-offset-6 { - margin-left: 50%; } - - .col-md-offset-7 { - margin-left: 58.33333%; } - - .col-md-offset-8 { - margin-left: 66.66667%; } - - .col-md-offset-9 { - margin-left: 75%; } - - .col-md-offset-10 { - margin-left: 83.33333%; } - - .col-md-offset-11 { - margin-left: 91.66667%; } } -@media (min-width: 1200px) { - .container { - max-width: 1170px; } - - .col-lg-1, - .col-lg-2, - .col-lg-3, - .col-lg-4, - .col-lg-5, - .col-lg-6, - .col-lg-7, - .col-lg-8, - .col-lg-9, - .col-lg-10, - .col-lg-11 { - float: left; } - - .col-lg-1 { - width: 8.33333%; } - - .col-lg-2 { - width: 16.66667%; } - - .col-lg-3 { - width: 25%; } - - .col-lg-4 { - width: 33.33333%; } - - .col-lg-5 { - width: 41.66667%; } - - .col-lg-6 { - width: 50%; } - - .col-lg-7 { - width: 58.33333%; } - - .col-lg-8 { - width: 66.66667%; } - - .col-lg-9 { - width: 75%; } - - .col-lg-10 { - width: 83.33333%; } - - .col-lg-11 { - width: 91.66667%; } - - .col-lg-12 { - width: 100%; } - - .col-lg-push-0 { - left: auto; } - - .col-lg-push-1 { - left: 8.33333%; } - - .col-lg-push-2 { - left: 16.66667%; } - - .col-lg-push-3 { - left: 25%; } - - .col-lg-push-4 { - left: 33.33333%; } - - .col-lg-push-5 { - left: 41.66667%; } - - .col-lg-push-6 { - left: 50%; } - - .col-lg-push-7 { - left: 58.33333%; } - - .col-lg-push-8 { - left: 66.66667%; } - - .col-lg-push-9 { - left: 75%; } - - .col-lg-push-10 { - left: 83.33333%; } - - .col-lg-push-11 { - left: 91.66667%; } - - .col-lg-pull-0 { - right: auto; } - - .col-lg-pull-1 { - right: 8.33333%; } - - .col-lg-pull-2 { - right: 16.66667%; } - - .col-lg-pull-3 { - right: 25%; } - - .col-lg-pull-4 { - right: 33.33333%; } - - .col-lg-pull-5 { - right: 41.66667%; } - - .col-lg-pull-6 { - right: 50%; } - - .col-lg-pull-7 { - right: 58.33333%; } - - .col-lg-pull-8 { - right: 66.66667%; } - - .col-lg-pull-9 { - right: 75%; } - - .col-lg-pull-10 { - right: 83.33333%; } - - .col-lg-pull-11 { - right: 91.66667%; } - - .col-lg-offset-0 { - margin-left: 0; } - - .col-lg-offset-1 { - margin-left: 8.33333%; } - - .col-lg-offset-2 { - margin-left: 16.66667%; } - - .col-lg-offset-3 { - margin-left: 25%; } - - .col-lg-offset-4 { - margin-left: 33.33333%; } - - .col-lg-offset-5 { - margin-left: 41.66667%; } - - .col-lg-offset-6 { - margin-left: 50%; } - - .col-lg-offset-7 { - margin-left: 58.33333%; } - - .col-lg-offset-8 { - margin-left: 66.66667%; } - - .col-lg-offset-9 { - margin-left: 75%; } - - .col-lg-offset-10 { - margin-left: 83.33333%; } - - .col-lg-offset-11 { - margin-left: 91.66667%; } } -.list { - margin-bottom: 20px; - padding-left: 0; } - -.list-item { - position: relative; - display: block; - padding: 15px 15px; - margin-bottom: -1px; - border: 1px solid #dddddd; } - .list-item:last-child { - margin-bottom: 0; } - .list-item > .badge { - float: right; } - .list-item > i:last-child { - float: right; } - .list-item > .badge + .badge { - margin-right: 5px; } - .list-item.active, .list-item.active:hover, .list-item.active:focus { - z-index: 2; } - .list-item.active .list-item-heading, .list-item.active:hover .list-item-heading, .list-item.active:focus .list-item-heading { - color: inherit; } - -a.list-item { - text-decoration: none; } - a.list-item:hover, a.list-item:focus { - text-decoration: none; } - -.list-divider { - padding: 5px 15px; } - -.list-item-heading { - margin-top: 0; - margin-bottom: 5px; } - -.list-item-text { - margin-bottom: 0; - line-height: 1.3; } - -.menu { - min-height: 100%; - max-height: 100%; - width: 270px; - position: absolute; - top: 0; - bottom: 0; - z-index: 0; - background-color: #fff; - overflow-y: scroll; - -webkit-overflow-scrolling: touch; } - -.menu-left { - left: 0; } - -.menu-right { - right: 0; } - -.menu-animated { - -webkit-transition: -webkit-transform 200ms ease; - -moz-transition: -moz-transform 200ms ease; - transition: transform 200ms ease; } - -.ptr-capable { - -webkit-user-drag: element; } - -.ptr-content { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - overflow: auto; - height: 0; } - -.ptr-content .pulling { - display: none; } - -.ptr-content .refreshing { - display: none; } - -/** - * Tabs - * - * A navigation bar with any number of tab items supported. - */ -.tabs-inner { - display: -webkit-box; - display: box; - height: 100%; - list-style: none; - box-orient: horizontal; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; } - -/* Navigational tab */ -.tab-item { - height: 100%; - text-align: center; - box-sizing: border-box; - box-flex: 1; - -webkit-box-flex: 1; - -moz-box-flex: 1; - width: 0; } - .tab-item a { - text-decoration: none; - display: block; - width: 100%; - height: 100%; } - -/* Active state for tab */ -.tab-item.active, .tab-item:active { - background-color: rgba(0, 0, 0, 0.2); } - -/* Icon for tab */ -.tab-item i { - display: block; - margin: 0 auto; } - -/* Label for tab */ -.tab-label { - margin-top: 1px; - font-size: 10px; - font-weight: bold; - color: #fff; } - -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; } - .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: #999999; } - .bar.bar-primary .tab-item a { - color: #999999; } - .bar.bar-info { - background-color: #60d2e6; - border-color: #51b3c4; - color: #999999; } - .bar.bar-info .tab-item a { - color: #999999; } - .bar.bar-success { - background-color: #89c163; - border-color: #71a052; - color: #999999; } - .bar.bar-success .tab-item a { - color: #999999; } - .bar.bar-warning { - background-color: #f0b840; - border-color: #cf9a29; - color: #999999; } - .bar.bar-warning .tab-item a { - color: #999999; } - .bar.bar-danger { - background-color: #de5645; - border-color: #bc4435; - color: #999999; } - .bar.bar-danger .tab-item a { - color: #999999; } - .bar.bar-dark { - background-color: #444444; - border-color: #111111; - color: #999999; } - .bar.bar-dark .tab-item a { - color: #999999; } - -.bar-default .button { - color: #333333; - background-color: white; - border-color: #dddddd; } - .bar-default .button:hover { - color: #333333; - text-decoration: none; } - .bar-default .button.active, .bar-default .button:active { - background-color: #ebebeb; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); - border-color: #c4c4c4; } - -.bar-secondary .button { - color: #333333; - background-color: whitesmoke; - border-color: #cccccc; } - .bar-secondary .button:hover { - color: #333333; - text-decoration: none; } - .bar-secondary .button.active, .bar-secondary .button:active { - background-color: #e1e1e1; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); - border-color: #b3b3b3; } - -.bar-primary .button { - color: #999999; - background-color: #6999e9; - border-color: #5981c5; } - .bar-primary .button:hover { - color: #999999; - text-decoration: none; } - .bar-primary .button.active, .bar-primary .button:active { - background-color: #4581e4; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); - border-color: #3d67ae; } - -.bar-info .button { - color: #999999; - background-color: #60d2e6; - border-color: #51b3c4; } - .bar-info .button:hover { - color: #999999; - text-decoration: none; } - .bar-info .button.active, .bar-info .button:active { - background-color: #3dc8e0; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); - border-color: #3998a9; } - -.bar-success .button { - color: #999999; - background-color: #89c163; - border-color: #71a052; } - .bar-success .button:hover { - color: #999999; - text-decoration: none; } - .bar-success .button.active, .bar-success .button:active { - background-color: #73b447; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); - border-color: #597e41; } - -.bar-warning .button { - color: #999999; - background-color: #f0b840; - border-color: #cf9a29; } - .bar-warning .button:hover { - color: #999999; - text-decoration: none; } - .bar-warning .button.active, .bar-warning .button:active { - background-color: #edaa1a; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); - border-color: #a47a21; } - -.bar-danger .button { - color: #999999; - background-color: #de5645; - border-color: #bc4435; } - .bar-danger .button:hover { - color: #999999; - text-decoration: none; } - .bar-danger .button.active, .bar-danger .button:active { - background-color: #d43926; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); - border-color: #94362a; } - -.bar-dark .button { - color: #999999; - background-color: #444444; - border-color: #111111; } - .bar-dark .button:hover { - color: #999999; - text-decoration: none; } - .bar-dark .button.active, .bar-dark .button:active { - background-color: #303030; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); - border-color: black; } - -.bar .button-icon { - background-color: transparent; - border: 1px solid transparent; } - -.button { - color: #222222; - border-radius: 2px; - border-width: 1px; - border-style: solid; - padding: 12px 12px; - font-size: 16px; } - .button.button-default { - color: #333333; - background-color: white; - border-color: #dddddd; } - .button.button-default:hover { - color: #333333; - text-decoration: none; } - .button.button-default.active, .button.button-default:active { - background-color: #ebebeb; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); - border-color: #c4c4c4; } - .button.button-secondary { - color: #333333; - background-color: whitesmoke; - border-color: #cccccc; } - .button.button-secondary:hover { - color: #333333; - text-decoration: none; } - .button.button-secondary.active, .button.button-secondary:active { - background-color: #e1e1e1; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); - border-color: #b3b3b3; } - .button.button-primary { - color: #999999; - background-color: #6999e9; - border-color: #5981c5; } - .button.button-primary:hover { - color: #999999; - text-decoration: none; } - .button.button-primary.active, .button.button-primary:active { - background-color: #4581e4; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); - border-color: #3d67ae; } - .button.button-info { - color: #999999; - background-color: #60d2e6; - border-color: #51b3c4; } - .button.button-info:hover { - color: #999999; - text-decoration: none; } - .button.button-info.active, .button.button-info:active { - background-color: #3dc8e0; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); - border-color: #3998a9; } - .button.button-success { - color: #999999; - background-color: #89c163; - border-color: #71a052; } - .button.button-success:hover { - color: #999999; - text-decoration: none; } - .button.button-success.active, .button.button-success:active { - background-color: #73b447; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); - border-color: #597e41; } - .button.button-warning { - color: #999999; - background-color: #f0b840; - border-color: #cf9a29; } - .button.button-warning:hover { - color: #999999; - text-decoration: none; } - .button.button-warning.active, .button.button-warning:active { - background-color: #edaa1a; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); - border-color: #a47a21; } - .button.button-danger { - color: #999999; - background-color: #de5645; - border-color: #bc4435; } - .button.button-danger:hover { - color: #999999; - text-decoration: none; } - .button.button-danger.active, .button.button-danger:active { - background-color: #d43926; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); - border-color: #94362a; } - .button.button-dark { - color: #999999; - background-color: #444444; - border-color: #111111; } - .button.button-dark:hover { - color: #999999; - text-decoration: none; } - .button.button-dark.active, .button.button-dark:active { - background-color: #303030; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); - border-color: black; } - .button.button-clear { - background: none; - border: none; - padding: 10px 0px; } - -a.button { - text-decoration: none; } - -.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; } diff --git a/scss/ionic/_mixins.scss b/scss/_mixins.scss similarity index 100% rename from scss/ionic/_mixins.scss rename to scss/_mixins.scss diff --git a/scss/ionic/_theme-variables.scss b/scss/_variables.scss similarity index 54% rename from scss/ionic/_theme-variables.scss rename to scss/_variables.scss index 9a064caa86..95899b2320 100644 --- a/scss/ionic/_theme-variables.scss +++ b/scss/_variables.scss @@ -1,6 +1,7 @@ // Brand Colors // ------------------------------- + $brand-primary: #428bca; $brand-success: #5cb85c; $brand-warning: #f0ad4e; @@ -10,6 +11,7 @@ $brand-info: #5bc0de; // Global Gray Colors // ------------------------------- + $black: #000 !default; $gray-darker: lighten(#000, 13.5%) !default; // #222 $gray-dark: lighten(#000, 20%) !default; // #333 @@ -21,6 +23,7 @@ $white: #fff !default; // Global Accent Colors // ------------------------------- + $blue: #049cdb !default; $blue-dark: #0064cd !default; $green: #46a546 !default; @@ -35,6 +38,7 @@ $component-active-bg: $brand-primary !default; // Global Fonts // ------------------------------- + $sans-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default; $light-sans-font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif !default; $serif-font-family: Georgia, "Times New Roman", Times, serif !default; @@ -43,19 +47,75 @@ $mono-font-family: Monaco, Menlo, Consolas, "Courier New", monospace !de // Base // ------------------------------- + $base-font-family: $sans-font-family; $base-background-color: $white; +$content-padding: 10px; +$inset-margin: 10px; +$border-radius-base: 4px !default; +$border-radius-large: 6px !default; +$border-radius-small: 3px !default; + + +// Typography +// ------------------------------- + +$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default; +$font-family-serif: Georgia, "Times New Roman", Times, serif !default; +$font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace !default; +$font-family-base: $font-family-sans-serif !default; + +$font-size-base: 14px !default; +$font-size-large: ceil($font-size-base * 1.25) !default; // ~18px +$font-size-small: ceil($font-size-base * 0.85) !default; // ~12px + +$line-height-base: 1.428571429 !default; // 20/14 +$line-height-computed: floor($font-size-base * $line-height-base) !default; // ~20px + +$headings-font-family: $font-family-base !default; +$headings-font-weight: 500 !default; +$headings-line-height: 1.1 !default; + + +// Components +// ------------------------------- + +// Based on 14px font-size and 1.428 line-height (~20px to start) + +$padding-base-vertical: 6px !default; +$padding-base-horizontal: 12px !default; + +$padding-large-vertical: 10px !default; +$padding-large-horizontal: 16px !default; + +$padding-small-vertical: 5px !default; +$padding-small-horizontal: 10px !default; + +$line-height-large: 1.33 !default; +$line-height-small: 1.5 !default; + +$border-radius-base: 4px !default; +$border-radius-large: 6px !default; +$border-radius-small: 3px !default; + +$caret-width-base: 4px !default; +$caret-width-large: 5px !default; // Forms // ------------------------------- + +$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default; +$input-height-large: (floor($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default; +$input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default; + $input-bg: $white !default; $input-bg-disabled: $gray-lighter !default; $input-color: $gray !default; $input-border-color: #ccc !default; $input-border-width: 1px !default; -$input-border-radius: $border-radius-base !default; +$input-border-radius: 2px !default; $input-border-focus: #66afe9 !default; $input-color-placeholder: $gray-light !default; @@ -67,9 +127,11 @@ $input-group-addon-bg: $gray-lighter !default; $input-group-addon-border-color: $input-border-color !default; - // Buttons // ------------------------------- + +$button-bar-button-line-height: 15px !default; + $button-color: #222; $button-padding: 12px 12px; $button-clear-padding: 10px 0px; @@ -115,6 +177,14 @@ $button-dark-border: #111; // Bars // ------------------------------- + +$bar-height: 44px !default; +$bar-button-line-height: 23px !default; +$bar-button-bar-line-height: 18px !default; +$bar-title-font-size: $font-size-large; +$bar-padding-portrait: 5px; +$bar-padding-landscape: 5px; + $bar-bg: #fff; // Bar variations @@ -145,12 +215,15 @@ $bar-dark-border-color: #111; // Lists // ------------------------------- + $list-divider-bg: #f5f5f5; $list-divider-color: #222; +$list-item-border: 1px solid #ddd; // Form States and Alerts // ------------------------------- + $warning-text: #c09853; $warning-bg: #fcf8e3; $warning-border: darken(adjust-hue($warning-bg, -10), 3%); @@ -168,7 +241,61 @@ $info-bg: #d9edf7; $info-border: darken(adjust-hue($info-bg, -10), 7%); -// Side Menu +// Menus // ------------------------------- + $menu-bg: #eee; $menu-inset-border-color: #bbb; +$menu-width: 270px; +$menu-animation-speed: 200ms; + + + +// Media queries breakpoints +// ------------------------------- + +// Extra small screen / phone +$screen-xs: 480px !default; +$screen-phone: $screen-xs !default; + +// Small screen / tablet +$screen-sm: 768px !default; +$screen-tablet: $screen-sm !default; + +// Medium screen / desktop +$screen-md: 992px !default; +$screen-desktop: $screen-md !default; + +// Large screen / wide desktop +$screen-lg: 1200px !default; +$screen-lg-desktop: $screen-lg !default; + +// So media queries don't overlap when required, provide a maximum +$screen-xs-max: ($screen-sm - 1) !default; +$screen-sm-max: ($screen-md - 1) !default; +$screen-md-max: ($screen-lg - 1) !default; + + +// Grid system +// ------------------------------- + +// Number of columns in the grid system +$grid-columns: 12 !default; +// Padding, to be divided by two and applied to the left and right of all columns +$grid-gutter-width: 30px !default; +// Point at which the navbar stops collapsing +$grid-float-breakpoint: $screen-tablet !default; + + +// Container sizes +// ------------------------------- + +// Small screen / tablet +$container-tablet: ((720px + $grid-gutter-width)) !default; + +// Medium screen / desktop +$container-desktop: ((940px + $grid-gutter-width)) !default; + +// Large screen / wide desktop +$container-lg-desktop: ((1140px + $grid-gutter-width)) !default; + diff --git a/scss/ionic-structure.scss b/scss/ionic-structure.scss deleted file mode 100755 index 563a33530d..0000000000 --- a/scss/ionic-structure.scss +++ /dev/null @@ -1,26 +0,0 @@ -@charset "UTF-8"; - - -// Component Structures -@import - "ionic/structure-variables", - "ionic/mixins", - "ionic/theme-variables", - - "ionic/structure/normalize", - "ionic/structure/base", - - "ionic/structure/alerts", - "ionic/structure/bar", - "ionic/structure/button", - "ionic/structure/button-group", - "ionic/structure/card", - "ionic/structure/form", - "ionic/structure/grid", - "ionic/structure/icon", - "ionic/structure/img", - "ionic/structure/listview", - "ionic/structure/menu", - "ionic/structure/pull-to-refresh", - "ionic/structure/table", - "ionic/structure/tabs"; diff --git a/scss/ionic-theme.scss b/scss/ionic-theme.scss deleted file mode 100755 index 22636ec22b..0000000000 --- a/scss/ionic-theme.scss +++ /dev/null @@ -1,21 +0,0 @@ -@charset "UTF-8"; - - -// Component Themes -@import - "ionic/structure-variables", - "ionic/mixins", - "ionic/theme-variables", - - "ionic/theme/base", - - "ionic/theme/alerts", - "ionic/theme/bar", - "ionic/theme/button", - "ionic/theme/card", - "ionic/theme/icon", - "ionic/theme/listview", - "ionic/theme/menu", - "ionic/theme/pull-to-refresh", - "ionic/theme/table", - "ionic/theme/tabs"; diff --git a/scss/ionic.scss b/scss/ionic.scss index 812be3cfb8..5b356f2265 100644 --- a/scss/ionic.scss +++ b/scss/ionic.scss @@ -1,2 +1,33 @@ -@import "ionic-structure"; -@import "ionic-theme"; \ No newline at end of file +@charset "UTF-8"; + +@import + // Variables + "mixins", + "variables", + + // Base + "ionic/normalize", + "ionic/base", + "ionic/grid", + + // Nav + "ionic/bar", + "ionic/tabs", + "ionic/menu", + "ionic/listview", + + // Buttons + "ionic/button", + "ionic/button-group", + + // Icons + "ionic/icon", + + // Components + "ionic/alerts", + "ionic/card", + "ionic/form", + "ionic/table", + + // Animations + "ionic/animations"; \ No newline at end of file diff --git a/scss/ionic/theme/_alerts.scss b/scss/ionic/_alerts.scss similarity index 72% rename from scss/ionic/theme/_alerts.scss rename to scss/ionic/_alerts.scss index 283f105296..e69750ff14 100644 --- a/scss/ionic/theme/_alerts.scss +++ b/scss/ionic/_alerts.scss @@ -1,12 +1,9 @@ -// + // Alerts // -------------------------------------------------- - -// Base styles -// ------------------------- - .alert { + padding: 8px 35px 8px 14px; margin-bottom: $line-height-base; text-shadow: 0 1px 0 rgba(255,255,255,.5); background-color: $warning-bg; @@ -16,11 +13,27 @@ .alert h4 { // Specified for the h4 to prevent conflicts of changing $headingsColor color: $warning-text; + margin: 0; } +.alert .close { + position: relative; + top: -2px; + right: -21px; + line-height: $line-height-base; +} -// Alternate styles -// ------------------------- +.alert-block { + padding-top: 14px; + padding-bottom: 14px; +} +.alert-block > p, +.alert-block > ul { + margin-bottom: 0; +} +.alert-block p + p { + margin-top: 5px; +} .alert-success { background-color: $success-bg; diff --git a/scss/ionic/structure/_animations.css b/scss/ionic/_animations.scss similarity index 100% rename from scss/ionic/structure/_animations.css rename to scss/ionic/_animations.scss diff --git a/scss/ionic/theme/_bar.scss b/scss/ionic/_bar.scss similarity index 62% rename from scss/ionic/theme/_bar.scss rename to scss/ionic/_bar.scss index 9efe3e0d8e..c319a31053 100644 --- a/scss/ionic/theme/_bar.scss +++ b/scss/ionic/_bar.scss @@ -1,4 +1,18 @@ .bar { + @include user-select(none); + + display: -webkit-box; + display: box; + + position: fixed; + left: 0; + right: 0; + z-index: 10; + width: 100%; + height: $bar-height; + padding: $bar-padding-portrait; + box-sizing: border-box; + background-color: $bar-bg; border-style: solid; border-width: 0; @@ -83,6 +97,61 @@ //@media screen and (orientation : landscape) { //padding: $barPaddingLandscape; //} + + // Title inside of a bar is centered + .title { + position: absolute; + z-index: 0; + + top: 0; + left: 0; + right: 0; + + line-height: $bar-height; + + margin: 0; + //padding: $barPaddingVertical 0px; + + min-width: 30px; + + // Go into ellipsis if too small + text-overflow: ellipsis; + + text-align: center; + white-space: nowrap; + font-size: $bar-title-font-size; + } + + .title a { + color: inherit; + } + + .button { + @include box-flex(0); + background-color: transparent; + line-height: $bar-button-line-height; + font-size: 12px; + padding: 4px 12px; + } + + .button-bar { + line-height: $bar-button-bar-line-height; + } + + .button-bar + .button, .button + .button-bar { + margin-left: 5px; + } + + // Place the last button in a bar on the right of the bar + .title + .button:last-child, + > .button + .button:last-child, + > .button.pull-right, + .title + .buttons { + position: absolute; + top: 5px; + right: 5px; + } + } // Default styles for buttons inside of styled bars @@ -135,3 +204,35 @@ background-color: transparent; border: 1px solid transparent; } + +// Header at top +.bar-header { + top: 0; +} + +// Footer at bottom +.bar-footer { + bottom: 0; +} + +// Don't render padding if the bar is just for tabs +.bar-tabs { + padding: 0; +} + +.bar-header-secondary { + top: $bar-height; +} +.bar-footer-secondary { + bottom: $bar-height; +} + +/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab. + Note: For these to work, content must come after both bars in the markup */ +.has-header { + top: $bar-height; +} + +.has-footer { + bottom: $bar-height; +} \ No newline at end of file diff --git a/scss/ionic/structure/_base.scss b/scss/ionic/_base.scss similarity index 94% rename from scss/ionic/structure/_base.scss rename to scss/ionic/_base.scss index 59bdf46438..2a2aba558e 100644 --- a/scss/ionic/structure/_base.scss +++ b/scss/ionic/_base.scss @@ -7,6 +7,10 @@ html { } body { + font-size: 14px; + line-height: 1.25; + font-family: $base-font-family; + position: fixed; top: 0; right: 0; diff --git a/scss/ionic/structure/_button-group.scss b/scss/ionic/_button-group.scss similarity index 100% rename from scss/ionic/structure/_button-group.scss rename to scss/ionic/_button-group.scss diff --git a/scss/ionic/theme/_button.scss b/scss/ionic/_button.scss similarity index 81% rename from scss/ionic/theme/_button.scss rename to scss/ionic/_button.scss index f7f74b8764..711f571847 100644 --- a/scss/ionic/theme/_button.scss +++ b/scss/ionic/_button.scss @@ -5,6 +5,24 @@ border-style: solid; padding: $button-padding; font-size: $button-font-size; + + position: relative; + display: inline-block; + vertical-align: middle; + text-align: center; + cursor: pointer; + margin: 0; + + &.button-icon { + background: none; + border: none; + } + + &.button-block { + margin: $button-block-margin; + display: block; + width: 100%; + } &.button-default { @include button-style($button-default-bg, $buttonDefaultBorder, $gray-dark); diff --git a/scss/ionic/structure/_card.scss b/scss/ionic/_card.scss similarity index 100% rename from scss/ionic/structure/_card.scss rename to scss/ionic/_card.scss diff --git a/scss/ionic/structure/_form.scss b/scss/ionic/_form.scss similarity index 100% rename from scss/ionic/structure/_form.scss rename to scss/ionic/_form.scss diff --git a/scss/ionic/structure/_grid.scss b/scss/ionic/_grid.scss similarity index 100% rename from scss/ionic/structure/_grid.scss rename to scss/ionic/_grid.scss diff --git a/scss/ionic/structure/_icon.scss b/scss/ionic/_icon.scss similarity index 100% rename from scss/ionic/structure/_icon.scss rename to scss/ionic/_icon.scss diff --git a/scss/ionic/structure/_listview.scss b/scss/ionic/_listview.scss similarity index 94% rename from scss/ionic/structure/_listview.scss rename to scss/ionic/_listview.scss index cef41ec647..fdbde3a09c 100644 --- a/scss/ionic/structure/_listview.scss +++ b/scss/ionic/_listview.scss @@ -63,13 +63,9 @@ // Linked list items a.list-item { - //color: $list-group-link-color; + color: $gray-dark; text-decoration: none; - .list-item-heading { - //color: $list-group-link-heading-color; - } - // Hover state &:hover, &:focus { @@ -79,6 +75,9 @@ a.list-item { } .list-divider { + background-color: $list-divider-bg; + color: $list-divider-color; + font-weight: bold; padding: 5px 15px; } diff --git a/scss/ionic/structure/_menu.scss b/scss/ionic/_menu.scss similarity index 73% rename from scss/ionic/structure/_menu.scss rename to scss/ionic/_menu.scss index ce27e74d1f..719b84198b 100644 --- a/scss/ionic/structure/_menu.scss +++ b/scss/ionic/_menu.scss @@ -27,3 +27,15 @@ -moz-transition: -moz-transform $menu-animation-speed ease; transition: transform $menu-animation-speed ease; } + +.ion-panel { + background: $menu-bg; +} + +.ion-panel-left .ion-panel { + border-right: 1px solid $menu-inset-border-color; +} + +.ion-panel-right .ion-panel { + border-left: 1px solid $menu-inset-border-color; +} diff --git a/scss/ionic/structure/_normalize.scss b/scss/ionic/_normalize.scss similarity index 100% rename from scss/ionic/structure/_normalize.scss rename to scss/ionic/_normalize.scss diff --git a/scss/ionic/_structure-variables.scss b/scss/ionic/_structure-variables.scss deleted file mode 100644 index c4e7ca3026..0000000000 --- a/scss/ionic/_structure-variables.scss +++ /dev/null @@ -1,133 +0,0 @@ -// Components -// ------------------------- -// Based on 14px font-size and 1.428 line-height (~20px to start) - -$padding-base-vertical: 6px !default; -$padding-base-horizontal: 12px !default; - -$padding-large-vertical: 10px !default; -$padding-large-horizontal: 16px !default; - -$padding-small-vertical: 5px !default; -$padding-small-horizontal: 10px !default; - -$line-height-large: 1.33 !default; -$line-height-small: 1.5 !default; - -$border-radius-base: 4px !default; -$border-radius-large: 6px !default; -$border-radius-small: 3px !default; - -$caret-width-base: 4px !default; -$caret-width-large: 5px !default; - - -// Typography -// ------------------------- - -$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default; -$font-family-serif: Georgia, "Times New Roman", Times, serif !default; -$font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace !default; -$font-family-base: $font-family-sans-serif !default; - -$font-size-base: 14px !default; -$font-size-large: ceil($font-size-base * 1.25) !default; // ~18px -$font-size-small: ceil($font-size-base * 0.85) !default; // ~12px - -$line-height-base: 1.428571429 !default; // 20/14 -$line-height-computed: floor($font-size-base * $line-height-base) !default; // ~20px - -$headings-font-family: $font-family-base !default; -$headings-font-weight: 500 !default; -$headings-line-height: 1.1 !default; - - -// Content stuff -// ------------------------------- -$content-padding: 10px; -$inset-margin: 10px; -$border-radius-base: 4px !default; -$border-radius-large: 6px !default; -$border-radius-small: 3px !default; - - -// Bar stuff -// ------------------------------- -$bar-height: 44px !default; -$bar-button-line-height: 23px !default; -$bar-button-bar-line-height: 18px !default; -$bar-title-font-size: $font-size-large; -$bar-padding-portrait: 5px; -$bar-padding-landscape: 5px; - - -// Button bar stuff -// ------------------------------- -$button-bar-button-line-height: 15px !default; - - -// Forms -// ------------------------------- -$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default; -$input-height-large: (floor($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default; -$input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default; - - -// Lists -// ------------------------------- -$list-item-border: 1px solid #ddd; - - -// Menus -// ------------------------------- -$menu-width: 270px; -$menu-animation-speed: 200ms; - - -// Media queries breakpoints -// ------------------------------- - -// Extra small screen / phone -$screen-xs: 480px !default; -$screen-phone: $screen-xs !default; - -// Small screen / tablet -$screen-sm: 768px !default; -$screen-tablet: $screen-sm !default; - -// Medium screen / desktop -$screen-md: 992px !default; -$screen-desktop: $screen-md !default; - -// Large screen / wide desktop -$screen-lg: 1200px !default; -$screen-lg-desktop: $screen-lg !default; - -// So media queries don't overlap when required, provide a maximum -$screen-xs-max: ($screen-sm - 1) !default; -$screen-sm-max: ($screen-md - 1) !default; -$screen-md-max: ($screen-lg - 1) !default; - - -// Grid system -// ------------------------------- -// Number of columns in the grid system -$grid-columns: 12 !default; -// Padding, to be divided by two and applied to the left and right of all columns -$grid-gutter-width: 30px !default; -// Point at which the navbar stops collapsing -$grid-float-breakpoint: $screen-tablet !default; - - -// Container sizes -// ------------------------------- - -// Small screen / tablet -$container-tablet: ((720px + $grid-gutter-width)) !default; - -// Medium screen / desktop -$container-desktop: ((940px + $grid-gutter-width)) !default; - -// Large screen / wide desktop -$container-lg-desktop: ((1140px + $grid-gutter-width)) !default; - diff --git a/scss/ionic/structure/_table.scss b/scss/ionic/_table.scss similarity index 100% rename from scss/ionic/structure/_table.scss rename to scss/ionic/_table.scss diff --git a/scss/ionic/structure/_tabs.scss b/scss/ionic/_tabs.scss similarity index 78% rename from scss/ionic/structure/_tabs.scss rename to scss/ionic/_tabs.scss index e65718b4a1..532b6b0311 100644 --- a/scss/ionic/structure/_tabs.scss +++ b/scss/ionic/_tabs.scss @@ -4,6 +4,23 @@ * A navigation bar with any number of tab items supported. */ +.tabs { + font-size: 16px; +} +.tab-item { + a { + font-family: $light-sans-font-family; + font-weight: 200; + + .active, &:active { + //box-shadow: inset 0 0 10px rgba(0, 0, 0, .12); + } + } + i { + font-size: 25px; + } +} + .tabs-inner { display: -webkit-box; display: box; diff --git a/scss/ionic/structure/_alerts.scss b/scss/ionic/structure/_alerts.scss deleted file mode 100644 index 9a5c5a5fed..0000000000 --- a/scss/ionic/structure/_alerts.scss +++ /dev/null @@ -1,38 +0,0 @@ -// -// Alerts -// -------------------------------------------------- - - -// Base styles -// ------------------------- - -.alert { - padding: 8px 35px 8px 14px; -} -.alert h4 { - margin: 0; -} - -// Adjust close link position -.alert .close { - position: relative; - top: -2px; - right: -21px; - line-height: $line-height-base; -} - - -// Block alerts -// ------------------------- - -.alert-block { - padding-top: 14px; - padding-bottom: 14px; -} -.alert-block > p, -.alert-block > ul { - margin-bottom: 0; -} -.alert-block p + p { - margin-top: 5px; -} diff --git a/scss/ionic/structure/_bar.scss b/scss/ionic/structure/_bar.scss deleted file mode 100644 index ddf8bd1a85..0000000000 --- a/scss/ionic/structure/_bar.scss +++ /dev/null @@ -1,109 +0,0 @@ - -// Use Flexbox for our header and footer bars -.bar { - @include user-select(none); - - display: -webkit-box; - display: box; - - position: fixed; - left: 0; - right: 0; - z-index: 10; - width: 100%; - height: $bar-height; - padding: $bar-padding-portrait; - box-sizing: border-box; - - - - // Title inside of a bar is centered - .title { - position: absolute; - z-index: 0; - - top: 0; - left: 0; - right: 0; - - line-height: $bar-height; - - margin: 0; - //padding: $barPaddingVertical 0px; - - min-width: 30px; - - // Go into ellipsis if too small - text-overflow: ellipsis; - - text-align: center; - white-space: nowrap; - font-size: $bar-title-font-size; - - } - - - .title a { - color: inherit; - } - - .button { - @include box-flex(0); - background-color: transparent; - line-height: $bar-button-line-height; - font-size: 12px; - padding: 4px 12px; - } - - .button-bar { - line-height: $bar-button-bar-line-height; - } - - .button-bar + .button, .button + .button-bar { - margin-left: 5px; - } - - // Place the last button in a bar on the right of the bar - .title + .button:last-child, - > .button + .button:last-child, - > .button.pull-right, - .title + .buttons { - position: absolute; - top: 5px; - right: 5px; - } -} - - -// Header at top -.bar-header { - top: 0; -} - -// Footer at bottom -.bar-footer { - bottom: 0; -} - -// Don't render padding if the bar is just for tabs -.bar-tabs { - padding: 0; -} - -.bar-header-secondary { - top: $bar-height; -} -.bar-footer-secondary { - bottom: $bar-height; -} - -/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab. - Note: For these to work, content must come after both bars in the markup */ -.has-header { - top: $bar-height; -} - -.has-footer { - bottom: $bar-height; -} - diff --git a/scss/ionic/structure/_button.scss b/scss/ionic/structure/_button.scss deleted file mode 100644 index d42bee6302..0000000000 --- a/scss/ionic/structure/_button.scss +++ /dev/null @@ -1,19 +0,0 @@ -.button { - position: relative; - display: inline-block; - vertical-align: middle; - text-align: center; - cursor: pointer; - margin: 0; - - &.button-icon { - background: none; - border: none; - } - - &.button-block { - margin: $button-block-margin; - display: block; - width: 100%; - } -} diff --git a/scss/ionic/structure/_img.scss b/scss/ionic/structure/_img.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/ionic/structure/_label.scss b/scss/ionic/structure/_label.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/ionic/structure/_pull-to-refresh.scss b/scss/ionic/structure/_pull-to-refresh.scss deleted file mode 100644 index 9ba193cebb..0000000000 --- a/scss/ionic/structure/_pull-to-refresh.scss +++ /dev/null @@ -1,22 +0,0 @@ - -.ptr-capable { - -webkit-user-drag: element; -} - -.ptr-content { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - overflow: auto; - height: 0; -} - -.ptr-content .pulling { - display: none; -} - -.ptr-content .refreshing { - display: none; -} \ No newline at end of file diff --git a/scss/ionic/theme/_base.scss b/scss/ionic/theme/_base.scss deleted file mode 100644 index d8f9537b5e..0000000000 --- a/scss/ionic/theme/_base.scss +++ /dev/null @@ -1,14 +0,0 @@ - -body { - font-size: 14px; - line-height: 1.25; - font-family: $base-font-family; -} - -main { - background-color: $base-background-color; -} - -.full-section { - @include box-shadow(#{-3px 0px 10px rgba(0,0,0,0.2), 3px 0px 10px rgba(0,0,0,0.2)}); -} diff --git a/scss/ionic/theme/_card.scss b/scss/ionic/theme/_card.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/ionic/theme/_footer.scss b/scss/ionic/theme/_footer.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/ionic/theme/_icon.scss b/scss/ionic/theme/_icon.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/ionic/theme/_listview.scss b/scss/ionic/theme/_listview.scss deleted file mode 100644 index d1d74e6235..0000000000 --- a/scss/ionic/theme/_listview.scss +++ /dev/null @@ -1,9 +0,0 @@ -.list-divider { - background-color: $list-divider-bg; - color: $list-divider-color; - font-weight: bold; -} - -a.list-item { - color: $gray-dark; -} diff --git a/scss/ionic/theme/_menu.scss b/scss/ionic/theme/_menu.scss deleted file mode 100644 index 462e82e97b..0000000000 --- a/scss/ionic/theme/_menu.scss +++ /dev/null @@ -1,12 +0,0 @@ - -.ion-panel { - background: $menu-bg; -} - -.ion-panel-left .ion-panel { - border-right: 1px solid $menu-inset-border-color; -} - -.ion-panel-right .ion-panel { - border-left: 1px solid $menu-inset-border-color; -} diff --git a/scss/ionic/theme/_pull-to-refresh.scss b/scss/ionic/theme/_pull-to-refresh.scss deleted file mode 100644 index 52d8698997..0000000000 --- a/scss/ionic/theme/_pull-to-refresh.scss +++ /dev/null @@ -1,4 +0,0 @@ - -.ptr-content { - background: #eee; -} \ No newline at end of file diff --git a/scss/ionic/theme/_table.scss b/scss/ionic/theme/_table.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/ionic/theme/_tabs.scss b/scss/ionic/theme/_tabs.scss deleted file mode 100644 index 4b0748ff6c..0000000000 --- a/scss/ionic/theme/_tabs.scss +++ /dev/null @@ -1,17 +0,0 @@ -.tabs { - font-size: 16px; -} -.tab-item { - a { - font-family: $light-sans-font-family; - font-weight: 200; - - .active, &:active { - //box-shadow: inset 0 0 10px rgba(0, 0, 0, .12); - } - } - i { - font-size: 25px; - } -} -