diff --git a/src/core/styles/_normalize.scss b/src/core/styles/_normalize.scss index ee71aeb67f..472f8c2a2b 100644 --- a/src/core/styles/_normalize.scss +++ b/src/core/styles/_normalize.scss @@ -1,12 +1,10 @@ -/*! normalize.css v3.0.2 | MIT License | github.com/necolas/normalize.css */ +/*! Ionic fork of normalize.css v3.0.2 | MIT License | github.com/necolas/normalize.css */ -// 1. Apply border-box so it can be inherited -// 2. Prevent iOS text size adjust after orientation change, without disabling +// 1. Prevent iOS text size adjust after orientation change, without disabling // user zoom. html { - box-sizing: border-box; - -ms-text-size-adjust: 100%; // 2 - -webkit-text-size-adjust: 100%; // 2 + -ms-text-size-adjust: 100%; // 1 + -webkit-text-size-adjust: 100%; // 1 } *, *:before, @@ -45,13 +43,13 @@ template { // ========================================================================== // Remove the gray background color from active links in IE 10. -a { +[ionic] a { background-color: transparent; } // Improve readability when focused and also mouse hovered in all browsers. -a:active, -a:hover { +[ionic] a:active, +[ionic] a:hover { outline: 0; } @@ -59,29 +57,12 @@ a:hover { // Text-level semantics // ========================================================================== -// Address styling not present in IE 8/9/10/11, Safari, and Chrome. -abbr[title] { - border-bottom: 1px dotted; -} - // Address style set to `bolder` in Firefox 4+, Safari, and Chrome. b, strong { font-weight: bold; } -// Address styling not present in Safari and Chrome. -dfn { - font-style: italic; -} - -// Address variable `h1` font-size and margin within `section` and `article` -// contexts in Firefox 4+, Safari, and Chrome. -h1 { - font-size: 2em; - margin: 0.67em 0; -} - // Address inconsistent and variable font size in all browsers. small { font-size: 80%; @@ -109,12 +90,12 @@ sub { // ========================================================================== // Remove border when inside `a` element in IE 8/9/10. -img { +[ionic] img { border: 0; } // Correct overflow not hidden in IE 9/10/11. -svg:not(:root) { +[ionic] svg:not(:root) { overflow: hidden; } @@ -123,12 +104,12 @@ svg:not(:root) { // ========================================================================== // Address margin not present in IE 8/9 and Safari. -figure { +[ionic] figure { margin: 1em 40px; } // Address differences between Firefox and other browsers. -hr { +[ionic] hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; @@ -204,10 +185,7 @@ html input[disabled] { cursor: default; } -// // Remove inner padding and border in Firefox 4+. -// - button::-moz-focus-inner, input::-moz-focus-inner { border: 0; @@ -220,7 +198,6 @@ input { line-height: normal; } -//t you don't attempt to style these elements. // Firefox's implementation doesn't respect box-sizing, padding, or width. // 1. Address box sizing set to `content-box` in IE 8/9/10. // 2. Remove excess padding in IE 8/9/10. diff --git a/src/core/styles/_scaffolding.scss b/src/core/styles/_scaffolding.scss index 7d09a40cd1..fbe94ff182 100644 --- a/src/core/styles/_scaffolding.scss +++ b/src/core/styles/_scaffolding.scss @@ -1,43 +1,22 @@ [ionic] { + @include flex-display(); + @include flex-direction(row); + overflow: hidden; max-width: 100%; max-height: 100%; margin: 0; padding: 0; height: 100%; - word-wrap: break-word; - text-rendering: optimizeLegibility; - -webkit-user-drag: none; - - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -moz-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - - -webkit-tap-highlight-color: transparent; - -webkit-user-select: none; - - background: red; - text-align: center; - font-size: 16px; .view { position: relative; width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -moz-flex; - display: -ms-flexbox; - display: flex; - - -webkit-flex-direction: column; - -webkit-flex: 1; + @include flex-display(); + @include flex-direction(column); + @include flex(1); } .view > .container.shared-view { @@ -48,49 +27,24 @@ .tool-bar { display: block; min-height: 50px; - background: linear-gradient(45deg, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); - color: white; } .tool-bar-top { - -webkit-order: 10; + @include flex-order(20); } .tool-bar-bottom { - -webkit-order: 100; + @include flex-order(80); } .view > .container { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -moz-flex; - display: -ms-flexbox; - display: flex; - position: relative; - -webkit-flex: 1; - -webkit-flex-direction: column; - -webkit-order: 50; - overflow: hidden; - } - .nav-bar { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -moz-flex; - display: -ms-flexbox; - display: flex; - - -webkit-justify-content: center; - -webkit-align-items: center; - } - - .nav-bar > .nav-item { - -webkit-flex: 1; - max-width: 120px; + @include flex-display(); + @include flex-order(40); + @include flex(1); + @include flex-direction(column); } .container > .view { @@ -100,8 +54,7 @@ .view > .container > .content { position: relative; - -webkit-flex: 1; - background: linear-gradient(135deg, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); + @include flex(1); } .scroll-content { @@ -114,21 +67,5 @@ -webkit-overflow-scrolling: touch; } - .pane { - max-width: 320px; - z-index: 99; - } - - .view.pane > .container .content { - background: linear-gradient(45deg, #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%); - } } - -f { - display: block; - margin: 20px auto; - width: 200px; - height: 300px; - background: blue; -} diff --git a/src/core/styles/ionic.scss b/src/core/styles/ionic.scss index b9d0e2a55c..1bd6aeac1c 100644 --- a/src/core/styles/ionic.scss +++ b/src/core/styles/ionic.scss @@ -20,5 +20,5 @@ // Components (Conditional Includes) -@if $include-button { @import "../components/button/button" } -@if $include-tabbar { @import "../components/tabbar/tabbar" } +@import "../components/button/button"; +@import "../components/tabbar/tabbar";