diff --git a/src/core-styles/_includes.scss b/src/core-styles/_includes.scss deleted file mode 100644 index 69bb291f96..0000000000 --- a/src/core-styles/_includes.scss +++ /dev/null @@ -1,3 +0,0 @@ - -$include-button: true !default; -$include-tabbar: true !default; diff --git a/src/core-styles/_mixins.scss b/src/core-styles/_mixins.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/core-styles/_scaffolding.scss b/src/core-styles/_scaffolding.scss deleted file mode 100644 index c9ce8e351b..0000000000 --- a/src/core-styles/_scaffolding.scss +++ /dev/null @@ -1,4 +0,0 @@ - -[ionic-app] { - -} diff --git a/src/core/styles/_components.scss b/src/core/styles/_components.scss new file mode 100644 index 0000000000..47f0777e92 --- /dev/null +++ b/src/core/styles/_components.scss @@ -0,0 +1,5 @@ + +$components: ( + button: true, + tabbar: false, +); diff --git a/src/core-styles/_globals.scss b/src/core/styles/_globals.scss similarity index 100% rename from src/core-styles/_globals.scss rename to src/core/styles/_globals.scss diff --git a/src/core-styles/_normalize.scss b/src/core/styles/_normalize.scss similarity index 99% rename from src/core-styles/_normalize.scss rename to src/core/styles/_normalize.scss index bc7be55cba..ee71aeb67f 100644 --- a/src/core-styles/_normalize.scss +++ b/src/core/styles/_normalize.scss @@ -11,7 +11,7 @@ html { *, *:before, *:after { - box-sizing: inherit; + box-sizing: border-box; } diff --git a/src/core/styles/_scaffolding.scss b/src/core/styles/_scaffolding.scss new file mode 100644 index 0000000000..7d09a40cd1 --- /dev/null +++ b/src/core/styles/_scaffolding.scss @@ -0,0 +1,134 @@ + +[ionic] { + 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; + } + + .view > .container.shared-view { + position: absolute; + width: 100%; + } + + .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; + } + + .tool-bar-bottom { + -webkit-order: 100; + } + + .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; + } + + .container > .view { + position: absolute; + min-height: 100%; + } + + .view > .container > .content { + position: relative; + -webkit-flex: 1; + background: linear-gradient(135deg, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); + } + + .scroll-content { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow-y: scroll; + -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/_typography.scss b/src/core/styles/_typography.scss similarity index 100% rename from src/core-styles/_typography.scss rename to src/core/styles/_typography.scss diff --git a/src/core-styles/ionic.scss b/src/core/styles/ionic.scss similarity index 88% rename from src/core-styles/ionic.scss rename to src/core/styles/ionic.scss index 2fe88c1da1..b9d0e2a55c 100644 --- a/src/core-styles/ionic.scss +++ b/src/core/styles/ionic.scss @@ -1,9 +1,13 @@ @charset "UTF-8"; +// Mixins +@import + "mixins/flex"; + + // Globals @import - "mixins", "globals", "includes"; diff --git a/src/core/styles/mixins/_flex.scss b/src/core/styles/mixins/_flex.scss new file mode 100644 index 0000000000..fe47697e42 --- /dev/null +++ b/src/core/styles/mixins/_flex.scss @@ -0,0 +1,138 @@ +// Flexbox Mixins +// -------------------------------------------------- +// http://philipwalton.github.io/solved-by-flexbox/ +// https://github.com/philipwalton/solved-by-flexbox + +@mixin display-flex { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -moz-flex; + display: -ms-flexbox; + display: flex; +} + +@mixin display-inline-flex { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -moz-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +@mixin flex-direction($value: row) { + @if $value == row-reverse { + -webkit-box-direction: reverse; + -webkit-box-orient: horizontal; + } @else if $value == column { + -webkit-box-direction: normal; + -webkit-box-orient: vertical; + } @else if $value == column-reverse { + -webkit-box-direction: reverse; + -webkit-box-orient: vertical; + } @else { + -webkit-box-direction: normal; + -webkit-box-orient: horizontal; + } + -webkit-flex-direction: $value; + -moz-flex-direction: $value; + -ms-flex-direction: $value; + flex-direction: $value; +} + +@mixin flex-wrap($value: nowrap) { + // No Webkit Box fallback. + -webkit-flex-wrap: $value; + -moz-flex-wrap: $value; + @if $value == nowrap { + -ms-flex-wrap: none; + } @else { + -ms-flex-wrap: $value; + } + flex-wrap: $value; +} + +@mixin flex($fg: 1, $fs: null, $fb: null) { + -webkit-box-flex: $fg; + -webkit-flex: $fg $fs $fb; + -moz-box-flex: $fg; + -moz-flex: $fg $fs $fb; + -ms-flex: $fg $fs $fb; + flex: $fg $fs $fb; +} + +@mixin flex-flow($values: (row nowrap)) { + // No Webkit Box fallback. + -webkit-flex-flow: $values; + -moz-flex-flow: $values; + -ms-flex-flow: $values; + flex-flow: $values; +} + +@mixin flex-align-items($value: stretch) { + @if $value == flex-start { + -webkit-box-align: start; + -ms-flex-align: start; + } @else if $value == flex-end { + -webkit-box-align: end; + -ms-flex-align: end; + } @else { + -webkit-box-align: $value; + -ms-flex-align: $value; + } + -webkit-align-items: $value; + -moz-align-items: $value; + align-items: $value; +} + +@mixin flex-align-self($value: auto) { + -webkit-align-self: $value; + -moz-align-self: $value; + @if $value == flex-start { + -ms-flex-item-align: start; + } @else if $value == flex-end { + -ms-flex-item-align: end; + } @else { + -ms-flex-item-align: $value; + } + align-self: $value; +} + +@mixin flex-align-content($value: stretch) { + -webkit-align-content: $value; + -moz-align-content: $value; + @if $value == flex-start { + -ms-flex-line-pack: start; + } @else if $value == flex-end { + -ms-flex-line-pack: end; + } @else { + -ms-flex-line-pack: $value; + } + align-content: $value; +} + +@mixin flex-justify-content($value: stretch) { + @if $value == flex-start { + -webkit-box-pack: start; + -ms-flex-pack: start; + } @else if $value == flex-end { + -webkit-box-pack: end; + -ms-flex-pack: end; + } @else if $value == space-between { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + } @else { + -webkit-box-pack: $value; + -ms-flex-pack: $value; + } + -webkit-justify-content: $value; + -moz-justify-content: $value; + justify-content: $value; +} + +@mixin flex-order($n) { + -webkit-order: $n; + -ms-flex-order: $n; + order: $n; + -webkit-box-ordinal-group: $n; +}