diff --git a/.scss-lint.yml b/.scss-lint.yml index 1761339d25..d0ae907ceb 100644 --- a/.scss-lint.yml +++ b/.scss-lint.yml @@ -5,6 +5,9 @@ exclude: 'ionic/components/slides/**' linters: + DuplicateProperty: + enabled: false + MergeableSelector: enabled: true force_nesting: false diff --git a/ionic/components/action-sheet/action-sheet.ios.scss b/ionic/components/action-sheet/action-sheet.ios.scss index 975bda7126..bdbb0d2b94 100644 --- a/ionic/components/action-sheet/action-sheet.ios.scss +++ b/ionic/components/action-sheet/action-sheet.ios.scss @@ -43,7 +43,9 @@ ion-action-sheet { .action-sheet-group { overflow: hidden; + margin-bottom: $action-sheet-ios-group-margin-bottom - 2; + border-radius: $action-sheet-ios-border-radius; background: $action-sheet-ios-background; @@ -54,6 +56,7 @@ ion-action-sheet { .action-sheet-title { padding: $action-sheet-ios-title-padding; + border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color; border-radius: $action-sheet-ios-title-border-radius; font-size: $action-sheet-ios-title-font-size; @@ -64,7 +67,9 @@ ion-action-sheet { .action-sheet-button { padding: $action-sheet-ios-button-padding; + min-height: $action-sheet-ios-button-min-height; + border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color; font-size: $action-sheet-ios-button-font-size; color: $action-sheet-ios-button-text-color; @@ -76,6 +81,7 @@ ion-action-sheet { &.activated { margin-top: -$action-sheet-ios-button-border-width; + border-top: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-background-activated; border-bottom-color: $action-sheet-ios-button-background-activated; background: $action-sheet-ios-button-background-activated; diff --git a/ionic/components/action-sheet/action-sheet.md.scss b/ionic/components/action-sheet/action-sheet.md.scss index e7fe08f57b..1e9c0e2f71 100644 --- a/ionic/components/action-sheet/action-sheet.md.scss +++ b/ionic/components/action-sheet/action-sheet.md.scss @@ -28,6 +28,7 @@ $action-sheet-md-icon-margin: 0 28px 0 0 !default; .action-sheet-title { padding: $action-sheet-md-title-padding; + font-size: $action-sheet-md-title-font-size; text-align: $action-sheet-md-text-align; color: $action-sheet-md-title-color; @@ -36,8 +37,11 @@ $action-sheet-md-icon-margin: 0 28px 0 0 !default; .action-sheet-button { position: relative; overflow: hidden; + padding: $action-sheet-md-button-padding; + min-height: $action-sheet-md-button-min-height; + font-size: $action-sheet-md-button-font-size; text-align: $action-sheet-md-text-align; color: $action-sheet-md-button-text-color; @@ -50,7 +54,9 @@ $action-sheet-md-icon-margin: 0 28px 0 0 !default; .action-sheet-icon { margin: $action-sheet-md-icon-margin; + min-width: $action-sheet-md-icon-min-width; + font-size: $action-sheet-md-icon-font-size; text-align: $action-sheet-md-icon-text-align; vertical-align: $action-sheet-md-icon-vertical-align; @@ -58,6 +64,7 @@ $action-sheet-md-icon-margin: 0 28px 0 0 !default; .action-sheet-group { overflow: hidden; + background: $action-sheet-md-background; &:last-child .action-sheet-button { diff --git a/ionic/components/action-sheet/action-sheet.scss b/ionic/components/action-sheet/action-sheet.scss index 6e9eced96d..d4dada4140 100644 --- a/ionic/components/action-sheet/action-sheet.scss +++ b/ionic/components/action-sheet/action-sheet.scss @@ -13,6 +13,7 @@ ion-action-sheet { left: 0; z-index: $z-index-overlay; display: block; + width: $action-sheet-width; height: $action-sheet-width; } @@ -24,9 +25,12 @@ ion-action-sheet { left: 0; z-index: $z-index-overlay-wrapper; display: block; + margin: auto; + width: $action-sheet-width; max-width: $action-sheet-max-width; + transform: translate3d(0, 100%, 0); } diff --git a/ionic/components/action-sheet/action-sheet.wp.scss b/ionic/components/action-sheet/action-sheet.wp.scss index 11bfc5f20f..db3b1e02f8 100644 --- a/ionic/components/action-sheet/action-sheet.wp.scss +++ b/ionic/components/action-sheet/action-sheet.wp.scss @@ -36,6 +36,7 @@ $action-sheet-wp-icon-margin: 0 16px 0 0 !default; .action-sheet-title { padding: $action-sheet-wp-title-padding; + font-size: $action-sheet-wp-title-font-size; text-align: $action-sheet-wp-title-text-align; color: $action-sheet-wp-title-color; @@ -43,7 +44,9 @@ $action-sheet-wp-icon-margin: 0 16px 0 0 !default; .action-sheet-button { padding: $action-sheet-wp-button-padding; + min-height: $action-sheet-wp-button-height; + font-size: $action-sheet-wp-button-font-size; text-align: $action-sheet-wp-button-text-align; color: $action-sheet-wp-button-text-color; @@ -56,7 +59,9 @@ $action-sheet-wp-icon-margin: 0 16px 0 0 !default; .action-sheet-icon { margin: $action-sheet-wp-icon-margin; + min-width: $action-sheet-wp-icon-min-width; + font-size: $action-sheet-wp-icon-font-size; text-align: $action-sheet-wp-icon-text-align; vertical-align: $action-sheet-wp-icon-vertical-align; diff --git a/ionic/components/app/normalize.scss b/ionic/components/app/normalize.scss index a3cf7dafe5..d5597afc11 100644 --- a/ionic/components/app/normalize.scss +++ b/ionic/components/app/normalize.scss @@ -16,6 +16,7 @@ video { // Remove excess height in iOS 5 devices. audio:not([controls]) { display: none; + height: 0; } @@ -36,6 +37,7 @@ strong { // Remove border when inside `a` element in IE 8/9/10. img { max-width: 100%; + border: 0; } @@ -55,7 +57,9 @@ figure { hr { height: 1px; + border-width: 0; + box-sizing: content-box; } @@ -96,7 +100,9 @@ textarea { textarea { overflow: auto; + height: auto; + font: inherit; color: inherit; } @@ -106,6 +112,7 @@ input, optgroup, select { margin: 0; // 3 + font: inherit; // 2 color: inherit; // 1 } @@ -119,6 +126,7 @@ html input[type="button"], // 1 input[type="reset"], input[type="submit"] { cursor: pointer; // 3 + -webkit-appearance: button; // 2 } @@ -151,6 +159,7 @@ button { line-height: 1; text-transform: none; cursor: pointer; + -webkit-appearance: button; } @@ -165,6 +174,7 @@ html input[disabled] { button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; + border: 0; } @@ -174,6 +184,7 @@ input::-moz-focus-inner { input[type="checkbox"], input[type="radio"] { padding: 0; // 2 + box-sizing: border-box; // 1 } diff --git a/ionic/components/app/scrollbars.scss b/ionic/components/app/scrollbars.scss index 6132f86549..a51afb9319 100644 --- a/ionic/components/app/scrollbars.scss +++ b/ionic/components/app/scrollbars.scss @@ -12,17 +12,23 @@ ::-webkit-scrollbar-thumb:vertical { min-height: 10px; + border: 2px solid transparent; border-radius: 20px; + background: rgba(0, 0, 0, .4); + background-clip: padding-box; } ::-webkit-scrollbar-thumb:vertical:active { min-height: 10px; + border: 2px solid transparent; border-radius: 20px; + background: rgba(0, 0, 0, .6); + background-clip: padding-box; } diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss index cfd63954d4..f17ca779f8 100644 --- a/ionic/components/app/structure.scss +++ b/ionic/components/app/structure.scss @@ -51,8 +51,8 @@ $flex-order-tabbar-bottom: 20; html { width: 100%; height: 100%; - -ms-text-size-adjust: 100%; // 1 - -webkit-text-size-adjust: 100%; // 1 + + text-size-adjust: 100%; } body { @@ -60,6 +60,7 @@ body { position: fixed; overflow: hidden; + margin: 0; padding: 0; @@ -72,6 +73,7 @@ body { font-smoothing: antialiased; text-rendering: optimizeLegibility; + -webkit-user-drag: none; -ms-content-zooming: none; @@ -79,8 +81,6 @@ body { word-wrap: break-word; - -webkit-text-size-adjust: none; - -moz-text-size-adjust: none; text-size-adjust: none; } @@ -92,13 +92,16 @@ ion-tabs { left: 0; display: flex; overflow: hidden; + flex-direction: column; + width: 100%; height: 100%; } ion-navbar-section { display: block; + width: 100%; min-height: 50px; } @@ -106,7 +109,9 @@ ion-navbar-section { ion-content-section { position: relative; display: block; + flex: 1; + width: 100%; height: 100%; } @@ -116,7 +121,9 @@ ion-page { top: 0; left: 0; display: none; + flex-direction: column; + width: 100%; height: 100%; @@ -128,7 +135,9 @@ ion-page { ion-content { position: relative; display: block; + flex: 1; + width: 100%; height: 100%; } @@ -141,6 +150,7 @@ scroll-content { left: 0; z-index: $z-index-scroll-content; display: block; + overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; @@ -152,6 +162,7 @@ ion-tabbar { top: 0; left: 0; display: block; + width: 100%; min-height: 50px; } @@ -162,6 +173,7 @@ ion-tab-section { left: 0; display: block; overflow: hidden; + width: 100%; height: 100%; } @@ -177,6 +189,7 @@ ion-navbar { left: 0; z-index: $z-index-navbar-section; display: block; + width: 100%; min-height: 50px; } @@ -187,6 +200,7 @@ ion-navbar-section ion-navbar.toolbar { ion-toolbar { display: block; + width: 100%; } @@ -196,7 +210,6 @@ ion-toolbar[position=bottom] { } .sticky { - position: -webkit-sticky; position: sticky; top: 0; } diff --git a/ionic/components/app/typography.scss b/ionic/components/app/typography.scss index e012fd62b8..24327af092 100644 --- a/ionic/components/app/typography.scss +++ b/ionic/components/app/typography.scss @@ -39,6 +39,7 @@ h5, h6 { margin-top: 1.6rem; margin-bottom: 1rem; + font-weight: $headings-font-weight; line-height: $headings-line-height; } @@ -64,11 +65,13 @@ h2 + h3 { h1 { margin-top: 2rem; + font-size: $h1-font-size; } h2 { margin-top: 1.8rem; + font-size: $h2-font-size; } @@ -95,6 +98,7 @@ small { sub, sup { position: relative; + font-size: 75%; line-height: 0; vertical-align: baseline; diff --git a/ionic/components/badge/badge.scss b/ionic/components/badge/badge.scss index 8892304734..b31c533a9c 100644 --- a/ionic/components/badge/badge.scss +++ b/ionic/components/badge/badge.scss @@ -11,6 +11,7 @@ ion-badge { display: inline-block; padding: 3px 8px; + min-width: 10px; font-size: $badge-font-size; diff --git a/ionic/components/button/button-fab.scss b/ionic/components/button/button-fab.scss index 80c09aff0f..b3339fd30d 100644 --- a/ionic/components/button/button-fab.scss +++ b/ionic/components/button/button-fab.scss @@ -9,17 +9,21 @@ $button-fab-size: 56px !default; .button-fab { position: absolute; overflow: hidden; + width: $button-fab-size; min-width: 0; height: $button-fab-size; + border-radius: 50%; font-size: 14px; line-height: $button-fab-size; vertical-align: middle; + background-clip: padding-box; ion-icon { flex: 1; + font-size: 2.8rem; } @@ -27,6 +31,7 @@ $button-fab-size: 56px !default; [fab-center] { left: 50%; + margin-left: -$button-fab-size / 2; } diff --git a/ionic/components/button/button-icon.scss b/ionic/components/button/button-icon.scss index 178e64db7b..73b2f55f38 100644 --- a/ionic/components/button/button-icon.scss +++ b/ionic/components/button/button-icon.scss @@ -6,26 +6,33 @@ .button-icon-left ion-icon { padding-right: .3em; + font-size: 1.4em; line-height: .67; + pointer-events: none; } .button-icon-right ion-icon { padding-left: .4em; + font-size: 1.4em; line-height: .67; + pointer-events: none; } .button-icon-only { padding: 0; + min-width: .9em; ion-icon { padding: 0 .5em; + font-size: 1.8em; line-height: .67; + pointer-events: none; } } diff --git a/ionic/components/button/button.ios.scss b/ionic/components/button/button.ios.scss index 7a6735ca07..43993c11c2 100644 --- a/ionic/components/button/button.ios.scss +++ b/ionic/components/button/button.ios.scss @@ -31,6 +31,7 @@ $button-ios-small-icon-font-size: 1.3em !default; padding: $button-ios-padding; height: $button-ios-height; + border-radius: $button-ios-border-radius; font-size: $button-ios-font-size; @@ -75,13 +76,17 @@ $button-ios-small-icon-font-size: 1.3em !default; .button-large { padding: 0 $button-ios-large-padding; + height: $button-ios-large-height; + font-size: $button-ios-large-font-size; } .button-small { padding: 0 $button-ios-small-padding; + height: $button-ios-small-height; + font-size: $button-ios-small-font-size; &.button-icon-only ion-icon { @@ -103,6 +108,7 @@ $button-ios-small-icon-font-size: 1.3em !default; .button-full { margin-right: 0; margin-left: 0; + border-right-width: 0; border-left-width: 0; border-radius: 0; @@ -197,6 +203,7 @@ $button-ios-small-icon-font-size: 1.3em !default; .button-round { padding: $button-round-padding; + border-radius: $button-round-border-radius; } diff --git a/ionic/components/button/button.md.scss b/ionic/components/button/button.md.scss index 8e17b4b58d..1af2bb2cd3 100644 --- a/ionic/components/button/button.md.scss +++ b/ionic/components/button/button.md.scss @@ -42,7 +42,9 @@ $button-md-small-icon-font-size: 1.4em !default; .button { margin: $button-md-margin; padding: $button-md-padding; + height: $button-md-height; + border-radius: $button-md-border-radius; font-size: $button-md-font-size; @@ -107,13 +109,17 @@ $button-md-small-icon-font-size: 1.4em !default; .button-large { padding: 0 $button-md-large-padding; + height: $button-md-large-height; + font-size: $button-md-large-font-size; } .button-small { padding: 0 $button-md-small-padding; + height: $button-md-small-height; + font-size: $button-md-small-font-size; &.button-icon-only ion-icon { @@ -135,6 +141,7 @@ $button-md-small-icon-font-size: 1.4em !default; .button-full { margin-right: 0; margin-left: 0; + border-right-width: 0; border-left-width: 0; border-radius: 0; @@ -247,6 +254,7 @@ $button-md-small-icon-font-size: 1.4em !default; .button-round { padding: $button-round-padding; + border-radius: $button-round-border-radius; } @@ -281,12 +289,14 @@ ion-button-effect { position: absolute; z-index: 0; display: block; + border-radius: 50%; background-color: $ripple-background-color; opacity: .2; transition-timing-function: ease-in-out; + pointer-events: none; } diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss index 4e3fdcea3d..1c9e6f5c09 100644 --- a/ionic/components/button/button.scss +++ b/ionic/components/button/button.scss @@ -26,15 +26,18 @@ $button-round-border-radius: 64px !default; vertical-align: -webkit-baseline-middle; // the best for those that support it transition: background-color, opacity 100ms linear; + font-kerning: none; } .button-inner { display: flex; + flex-flow: row nowrap; flex-shrink: 0; align-items: center; justify-content: center; + width: 100%; height: 100%; } @@ -47,6 +50,7 @@ a[button] { .button[disabled] { cursor: default; opacity: .4; + pointer-events: none; } @@ -57,6 +61,7 @@ a[button] { .button-block { display: block; clear: both; + width: 100%; &::after { @@ -70,6 +75,7 @@ a[button] { .button-full { display: block; + width: 100%; // Full Outline Button @@ -87,5 +93,6 @@ a[button] { .button-round { padding: $button-round-padding; + border-radius: $button-round-border-radius; } diff --git a/ionic/components/button/button.wp.scss b/ionic/components/button/button.wp.scss index 17b3e4c100..17fa32824a 100644 --- a/ionic/components/button/button.wp.scss +++ b/ionic/components/button/button.wp.scss @@ -51,7 +51,9 @@ $button-wp-fab-border-radius: 50% !default; .button { margin: $button-wp-margin; padding: $button-wp-padding; + height: $button-wp-height; + border: $button-wp-border-width solid $button-wp-border-color; border-radius: $button-wp-border-radius; @@ -102,13 +104,17 @@ $button-wp-fab-border-radius: 50% !default; .button-large { padding: $button-wp-large-padding; + height: $button-wp-large-height; + font-size: $button-wp-large-font-size; } .button-small { padding: $button-wp-small-padding; + height: $button-wp-small-height; + font-size: $button-wp-small-font-size; &.button-icon-only ion-icon { @@ -130,6 +136,7 @@ $button-wp-fab-border-radius: 50% !default; .button-full { margin-right: 0; margin-left: 0; + border-right-width: 0; border-left-width: 0; border-radius: 0; @@ -220,6 +227,7 @@ $button-wp-fab-border-radius: 50% !default; .button-round { padding: $button-round-padding; + border-radius: $button-round-border-radius; } diff --git a/ionic/components/card/card.ios.scss b/ionic/components/card/card.ios.scss index 5677d442ef..3357e961e1 100644 --- a/ionic/components/card/card.ios.scss +++ b/ionic/components/card/card.ios.scss @@ -37,6 +37,7 @@ $card-ios-header-color: #333 !default; ion-card { margin: $card-ios-margin-top $card-ios-margin-right $card-ios-margin-bottom $card-ios-margin-left; + border-radius: $card-ios-border-radius; font-size: $card-ios-font-size; @@ -66,12 +67,14 @@ ion-card { ion-card-content { padding: $card-ios-padding-top $card-ios-padding-right $card-ios-padding-bottom $card-ios-padding-left; + font-size: $card-ios-font-size; line-height: 1.4; } ion-card-header { padding: $card-ios-header-padding; + font-size: $card-ios-header-font-size; font-weight: $card-ios-header-font-weight; color: $card-ios-header-color; @@ -89,8 +92,10 @@ ion-card { ion-card-title { display: block; + margin: $card-ios-title-margin; padding: $card-ios-title-padding; + font-size: $card-ios-title-font-size; line-height: 1.2; color: $card-ios-title-text-color; @@ -98,12 +103,14 @@ ion-card { h1 { margin: 0 0 2px; + font-size: 2.4rem; font-weight: normal; } h2 { margin: 2px 0; + font-size: 1.6rem; font-weight: normal; } @@ -113,12 +120,14 @@ ion-card { h5, h6 { margin: 2px 0; + font-size: 1.4rem; font-weight: normal; } p { margin: 0 0 2px; + font-size: 1.4rem; color: $card-ios-text-color; } diff --git a/ionic/components/card/card.md.scss b/ionic/components/card/card.md.scss index 14a9320382..d5384922a3 100644 --- a/ionic/components/card/card.md.scss +++ b/ionic/components/card/card.md.scss @@ -39,6 +39,7 @@ $card-md-header-color: #222 !default; ion-card { margin: $card-md-margin-top $card-md-margin-right $card-md-margin-bottom $card-md-margin-left; + border-radius: $card-md-border-radius; font-size: $card-md-font-size; @@ -68,12 +69,14 @@ ion-card { ion-card-content { padding: $card-md-padding-top $card-md-padding-right $card-md-padding-bottom $card-md-padding-left; + font-size: $card-md-font-size; line-height: $card-md-line-height; } ion-card-header { padding: $card-md-header-padding; + font-size: $card-md-header-font-size; color: $card-md-header-color; } @@ -90,8 +93,10 @@ ion-card { ion-card-title { display: block; + margin: $card-md-title-margin; padding: $card-md-title-padding; + font-size: $card-md-title-font-size; line-height: 1.2; color: $card-md-title-text-color; @@ -99,6 +104,7 @@ ion-card { h1 { margin: 0 0 2px; + font-size: 2.4rem; font-weight: normal; color: $card-md-text-color; @@ -106,6 +112,7 @@ ion-card { h2 { margin: 2px 0; + font-size: 1.6rem; font-weight: normal; color: $card-md-text-color; @@ -116,6 +123,7 @@ ion-card { h5, h6 { margin: 2px 0; + font-size: 1.4rem; font-weight: normal; color: $card-md-text-color; @@ -123,6 +131,7 @@ ion-card { p { margin: 0 0 2px; + font-size: 1.4rem; font-weight: normal; line-height: 1.5; diff --git a/ionic/components/card/card.scss b/ionic/components/card/card.scss index 0a3655a5ae..8cf43ea69a 100644 --- a/ionic/components/card/card.scss +++ b/ionic/components/card/card.scss @@ -11,12 +11,14 @@ ion-card { ion-card img { display: block; + width: 100%; } ion-card-header { display: block; overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; } diff --git a/ionic/components/card/card.wp.scss b/ionic/components/card/card.wp.scss index 24ebcf1faf..9daf48e782 100644 --- a/ionic/components/card/card.wp.scss +++ b/ionic/components/card/card.wp.scss @@ -40,6 +40,7 @@ $card-wp-header-color: #222 !default; ion-card { margin: $card-wp-margin-top $card-wp-margin-right $card-wp-margin-bottom $card-wp-margin-left; + border-radius: $card-wp-border-radius; font-size: $card-wp-font-size; @@ -69,12 +70,14 @@ ion-card { ion-card-content { padding: $card-wp-padding-top $card-wp-padding-right $card-wp-padding-bottom $card-wp-padding-left; + font-size: $card-wp-font-size; line-height: $card-wp-line-height; } ion-card-header { padding: $card-wp-header-padding; + font-size: $card-wp-header-font-size; color: $card-wp-header-color; } @@ -91,8 +94,10 @@ ion-card { ion-card-title { display: block; + margin: $card-wp-title-margin; padding: $card-wp-title-padding; + font-size: $card-wp-title-font-size; line-height: 1.2; color: $card-wp-title-text-color; @@ -100,6 +105,7 @@ ion-card { h1 { margin: 0 0 2px; + font-size: 2.4rem; font-weight: normal; color: $card-wp-text-color; @@ -107,6 +113,7 @@ ion-card { h2 { margin: 2px 0; + font-size: 1.6rem; font-weight: normal; color: $card-wp-text-color; @@ -117,6 +124,7 @@ ion-card { h5, h6 { margin: 2px 0; + font-size: 1.4rem; font-weight: normal; color: $card-wp-text-color; @@ -124,6 +132,7 @@ ion-card { p { margin: 0 0 2px; + font-size: 1.4rem; font-weight: normal; line-height: 1.5; diff --git a/ionic/components/checkbox/checkbox.ios.scss b/ionic/components/checkbox/checkbox.ios.scss index a7832aa508..19255feae8 100644 --- a/ionic/components/checkbox/checkbox.ios.scss +++ b/ionic/components/checkbox/checkbox.ios.scss @@ -33,8 +33,10 @@ ion-checkbox { .checkbox-icon { position: relative; + width: $checkbox-ios-icon-size; height: $checkbox-ios-icon-size; + border-width: $checkbox-ios-icon-border-width; border-style: $checkbox-ios-icon-border-style; border-radius: $checkbox-ios-icon-border-radius; @@ -59,8 +61,10 @@ ion-checkbox { position: absolute; top: 4px; left: 7px; + width: 4px; height: 9px; + border-width: $checkbox-ios-icon-checkmark-width; border-top-width: 0; border-left-width: 0; @@ -76,6 +80,7 @@ ion-checkbox { .checkbox-disabled, .item-checkbox-disabled ion-label { opacity: $checkbox-ios-disabled-opacity; + pointer-events: none; } @@ -86,6 +91,7 @@ ion-checkbox { .item ion-checkbox { position: static; display: block; + margin: $checkbox-ios-media-margin; } diff --git a/ionic/components/checkbox/checkbox.md.scss b/ionic/components/checkbox/checkbox.md.scss index d8ed7fab11..d5eb4ff610 100644 --- a/ionic/components/checkbox/checkbox.md.scss +++ b/ionic/components/checkbox/checkbox.md.scss @@ -40,8 +40,10 @@ ion-checkbox { .checkbox-icon { position: relative; + width: $checkbox-md-icon-size; height: $checkbox-md-icon-size; + border-width: $checkbox-md-icon-border-width; border-style: $checkbox-md-icon-border-style; border-radius: $checkbox-md-icon-border-radius; @@ -70,8 +72,10 @@ ion-checkbox { position: absolute; top: 0; left: 4px; + width: 5px; height: 10px; + border-width: $checkbox-md-icon-checkmark-width; border-top-width: 0; border-left-width: 0; @@ -87,6 +91,7 @@ ion-checkbox { .checkbox-disabled, .item-checkbox-disabled ion-label { opacity: $checkbox-md-disabled-opacity; + pointer-events: none; } @@ -97,6 +102,7 @@ ion-checkbox { .item ion-checkbox { position: static; display: block; + margin: $checkbox-md-media-margin; } diff --git a/ionic/components/checkbox/checkbox.wp.scss b/ionic/components/checkbox/checkbox.wp.scss index 1a1c26d086..9459b8a815 100644 --- a/ionic/components/checkbox/checkbox.wp.scss +++ b/ionic/components/checkbox/checkbox.wp.scss @@ -37,8 +37,10 @@ ion-checkbox { .checkbox-icon { position: relative; + width: $checkbox-wp-icon-size; height: $checkbox-wp-icon-size; + border-width: $checkbox-wp-icon-border-width; border-style: $checkbox-wp-icon-border-style; border-radius: $checkbox-wp-icon-border-radius; @@ -63,8 +65,10 @@ ion-checkbox { position: absolute; top: -2px; left: 3px; + width: 6px; height: 12px; + border-width: $checkbox-wp-icon-checkmark-width; border-top-width: 0; border-left-width: 0; @@ -80,6 +84,7 @@ ion-checkbox { .checkbox-disabled, .item-checkbox-disabled ion-label { opacity: $checkbox-wp-disabled-opacity; + pointer-events: none; } @@ -90,6 +95,7 @@ ion-checkbox { .item ion-checkbox { position: static; display: block; + margin: $checkbox-wp-media-margin; } diff --git a/ionic/components/chip/chip.scss b/ionic/components/chip/chip.scss index 8046cf1941..8cb28798dd 100644 --- a/ionic/components/chip/chip.scss +++ b/ionic/components/chip/chip.scss @@ -15,10 +15,14 @@ $chip-icon-color: rgba(0, 0, 0, .87) !default; ion-chip { display: inline-flex; + align-self: center; + margin: $chip-margin; padding: $chip-padding; + height: $chip-height; + border-radius: $chip-border-radius; font-size: $chip-font-size; font-weight: normal; @@ -26,18 +30,22 @@ ion-chip { background: $chip-background-color; vertical-align: middle; + box-sizing: border-box; ion-label { margin: 0; + color: $chip-label-color; } > ion-icon, > ion-avatar { margin-left: -12px; + width: 32px; height: 32px; + border-radius: 50%; font-size: 18px; line-height: 32px; @@ -47,10 +55,12 @@ ion-chip { img { display: block; + width: 100%; max-width: 100%; height: 100%; max-height: 100%; + border-radius: 50%; } @@ -67,6 +77,7 @@ ion-chip { .button { margin: 0; margin-right: -4px; + height: inherit; } diff --git a/ionic/components/grid/grid.scss b/ionic/components/grid/grid.scss index 10abcd3f23..341b523ca6 100644 --- a/ionic/components/grid/grid.scss +++ b/ionic/components/grid/grid.scss @@ -32,8 +32,10 @@ $grid-responsive-lg-break: 1023px !default; // smaller than landscape tab &[width-80], &[width-90] { flex: 1; + margin-bottom: ($grid-padding-width * 3) / 2; margin-left: 0; + width: 100%; max-width: 100%; } @@ -46,7 +48,9 @@ $grid-responsive-lg-break: 1023px !default; // smaller than landscape tab ion-row { display: flex; + padding: ($grid-padding-width / 2); + width: 100%; &[wrap] { @@ -85,8 +89,11 @@ ion-row + ion-row { ion-col { display: block; + flex: 1; + padding: ($grid-padding-width / 2); + width: 100%; // Column Alignment @@ -158,48 +165,57 @@ ion-col { &[width-10] { flex: 0 0 10%; + max-width: 10%; } &[width-20] { flex: 0 0 20%; + max-width: 20%; } &[width-25] { flex: 0 0 25%; + max-width: 25%; } &[width-33], &[width-34] { flex: 0 0 33.3333%; + max-width: 33.3333%; } &[width-50] { flex: 0 0 50%; + max-width: 50%; } &[width-66], &[width-67] { flex: 0 0 66.6666%; + max-width: 66.6666%; } &[width-75] { flex: 0 0 75%; + max-width: 75%; } &[width-80] { flex: 0 0 80%; + max-width: 80%; } &[width-90] { flex: 0 0 90%; + max-width: 90%; } } diff --git a/ionic/components/icon/icon.scss b/ionic/components/icon/icon.scss index 10d156c411..4d37f559c4 100644 --- a/ionic/components/icon/icon.scss +++ b/ionic/components/icon/icon.scss @@ -6,6 +6,7 @@ ion-icon { display: inline-block; + font-size: 1.2em; } diff --git a/ionic/components/infinite-scroll/infinite-scroll.scss b/ionic/components/infinite-scroll/infinite-scroll.scss index 4e85a0853d..6435b20ef5 100644 --- a/ionic/components/infinite-scroll/infinite-scroll.scss +++ b/ionic/components/infinite-scroll/infinite-scroll.scss @@ -10,6 +10,7 @@ $infinite-scroll-loading-text-margin: 4px 32px 0 32px !default; ion-infinite-scroll { display: block; + width: 100%; } @@ -19,21 +20,27 @@ ion-infinite-scroll { ion-infinite-scroll-content { display: flex; + flex-direction: column; justify-content: center; + height: 100%; min-height: 84px; + text-align: center; } .infinite-loading { display: none; + margin: $infinite-scroll-loading-margin; + width: 100%; } .infinite-loading-text { margin: $infinite-scroll-loading-text-margin; + color: $infinite-scroll-loading-color; } diff --git a/ionic/components/input/input.ios.scss b/ionic/components/input/input.ios.scss index 7f8bfe18d0..5b7186204c 100644 --- a/ionic/components/input/input.ios.scss +++ b/ionic/components/input/input.ios.scss @@ -69,6 +69,8 @@ ion-input[clearInput] { right: ($item-ios-padding-right / 2); bottom: 0; + width: $text-input-ios-input-clear-icon-width; + background-size: $text-input-ios-input-clear-icon-size; } diff --git a/ionic/components/input/input.md.scss b/ionic/components/input/input.md.scss index fc14d77ce9..e5f6f72ab0 100644 --- a/ionic/components/input/input.md.scss +++ b/ionic/components/input/input.md.scss @@ -42,6 +42,7 @@ ion-input::after { right: 0; bottom: 0; left: $item-md-padding-left; + border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: transparent; @@ -103,6 +104,8 @@ ion-input[clearInput] { right: ($item-md-padding-right / 2); bottom: 2px; + width: $text-input-md-input-clear-icon-width; + background-size: $text-input-md-input-clear-icon-size; } diff --git a/ionic/components/input/input.scss b/ionic/components/input/input.scss index 27eb065b25..7338b5a4bb 100644 --- a/ionic/components/input/input.scss +++ b/ionic/components/input/input.scss @@ -7,7 +7,9 @@ ion-input, ion-textarea { position: relative; display: block; + flex: 1; + width: 100%; } @@ -32,12 +34,16 @@ ion-textarea { @include placeholder(); display: inline-block; + flex: 1; + width: 92%; width: calc(100% - 10px); + border: 0; border-radius: 0; background: transparent; + -webkit-appearance: none; } @@ -71,6 +77,7 @@ input.text-input:-webkit-autofill { position: absolute; top: 0; left: 0; + width: 100%; height: 100%; } @@ -93,11 +100,15 @@ input.text-input:-webkit-autofill { [next-input] { position: absolute; bottom: 1px; + padding: 0; + width: 1px; height: 1px; + border: 0; background: transparent; + pointer-events: none; } @@ -107,6 +118,7 @@ input.text-input:-webkit-autofill { .text-input-clear-icon { position: absolute; + margin: 0; padding: 0; @@ -121,6 +133,7 @@ input.text-input:-webkit-autofill { .text-input.cloned-input { position: absolute; top: 0; + pointer-events: none; } diff --git a/ionic/components/input/input.wp.scss b/ionic/components/input/input.wp.scss index aa2fc00929..03b354ee77 100644 --- a/ionic/components/input/input.wp.scss +++ b/ionic/components/input/input.wp.scss @@ -29,6 +29,7 @@ $text-input-wp-input-clear-icon-size: 22px !default; .text-input { margin: $item-wp-padding-top ($item-wp-padding-right / 2) $item-wp-padding-bottom ($item-wp-padding-left / 2); padding: $text-input-wp-padding-vertical $text-input-wp-padding-horizontal; + border: $text-input-wp-border-width solid $text-input-wp-border-color; line-height: $text-input-wp-line-height; } @@ -110,6 +111,8 @@ ion-input[clearInput] { right: ($item-wp-padding-right / 2); bottom: 2px; + width: $text-input-wp-input-clear-icon-width; + background-size: $text-input-wp-input-clear-icon-size; } diff --git a/ionic/components/item/item-media.scss b/ionic/components/item/item-media.scss index 9c6782fb7b..6c350ce17d 100644 --- a/ionic/components/item/item-media.scss +++ b/ionic/components/item/item-media.scss @@ -12,22 +12,26 @@ .item > ion-icon:first-child, .item-inner > ion-icon:first-child { min-width: 24px; + text-align: center; } .item > ion-icon, .item-inner > ion-icon { min-height: 2.4rem; + font-size: 2.4rem; line-height: 1; &[large] { min-height: 3.2rem; + font-size: 3.2rem; } &[small] { min-height: 1.8rem; + font-size: 1.8rem; } } @@ -35,6 +39,7 @@ ion-avatar, ion-thumbnail { display: block; + line-height: 1; img { @@ -46,8 +51,10 @@ ion-thumbnail { position: absolute; top: 0; left: 0; + width: 100%; height: 100%; + background: transparent; cursor: pointer; } diff --git a/ionic/components/item/item-sliding.scss b/ionic/components/item/item-sliding.scss index 0222099bee..93d0b41d5a 100644 --- a/ionic/components/item/item-sliding.scss +++ b/ionic/components/item/item-sliding.scss @@ -21,13 +21,17 @@ ion-item-options { right: 0; z-index: $z-index-item-options; display: none; + height: 100%; + visibility: hidden; } ion-item-options .button { margin: 0; + height: 100%; + border-radius: 0; box-shadow: none; } @@ -52,8 +56,10 @@ ion-item-sliding.active-slide { .item.activated { position: relative; z-index: $z-index-item-options + 1; + opacity: 1; transition: all 300ms cubic-bezier(.36, .66, .04, 1); + pointer-events: none; } diff --git a/ionic/components/item/item.ios.scss b/ionic/components/item/item.ios.scss index feff115035..0cece68592 100644 --- a/ionic/components/item/item.ios.scss +++ b/ionic/components/item/item.ios.scss @@ -26,6 +26,7 @@ $item-ios-sliding-content-background: $list-ios-background-color !default; position: relative; padding-left: $item-ios-padding-left; + border-radius: 0; font-size: $item-ios-body-text-font-size; color: $list-ios-text-color; @@ -34,12 +35,14 @@ $item-ios-sliding-content-background: $list-ios-background-color !default; h1 { margin: 0 0 2px; + font-size: 2.4rem; font-weight: normal; } h2 { margin: 0 0 2px; + font-size: 1.6rem; font-weight: normal; } @@ -49,6 +52,7 @@ $item-ios-sliding-content-background: $list-ios-background-color !default; h5, h6 { margin: 0 0 3px; + font-size: 1.4rem; font-weight: normal; line-height: normal; @@ -56,6 +60,7 @@ $item-ios-sliding-content-background: $list-ios-background-color !default; p { margin: 0 0 2px; + font-size: 1.2rem; line-height: normal; color: $item-ios-paragraph-text-color; @@ -82,6 +87,7 @@ $item-ios-sliding-content-background: $list-ios-background-color !default; .item-inner { padding-right: ($item-ios-padding-right / 2); + border-bottom: 1px solid $list-ios-border-color; } @@ -120,7 +126,9 @@ ion-thumbnail[item-right] { .item-button { padding: 0 .5em; + height: 24px; + font-size: 1.3rem; } @@ -136,6 +144,7 @@ ion-avatar { img { max-width: $item-ios-avatar-size; max-height: $item-ios-avatar-size; + border-radius: $item-ios-avatar-size / 2; } } @@ -160,6 +169,7 @@ a.item:not([detail-none]) .item-inner, @include ios-detail-push-icon($item-ios-detail-push-color); padding-right: 32px; + background-repeat: no-repeat; background-position: right ($item-ios-padding-right - 2) center; background-size: 14px 14px; @@ -188,6 +198,7 @@ ion-item-group { ion-item-divider { padding: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left; + color: $item-ios-divider-color; background-color: $item-ios-divider-background; } diff --git a/ionic/components/item/item.md.scss b/ionic/components/item/item.md.scss index adca25ca54..6d2ad45716 100644 --- a/ionic/components/item/item.md.scss +++ b/ionic/components/item/item.md.scss @@ -22,8 +22,10 @@ $item-md-sliding-content-background: $list-md-background-color !default; .item { position: relative; + padding-right: 0; padding-left: ($item-md-padding-left); + font-size: $item-md-font-size; font-weight: normal; text-transform: none; @@ -35,12 +37,14 @@ $item-md-sliding-content-background: $list-md-background-color !default; h1 { margin: 0 0 2px; + font-size: 2.4rem; font-weight: normal; } h2 { margin: 2px 0; + font-size: 1.6rem; font-weight: normal; } @@ -50,6 +54,7 @@ $item-md-sliding-content-background: $list-md-background-color !default; h5, h6 { margin: 2px 0; + font-size: 1.4rem; font-weight: normal; line-height: normal; @@ -57,6 +62,7 @@ $item-md-sliding-content-background: $list-md-background-color !default; p { margin: 0 0 2px; + font-size: 1.4rem; line-height: normal; color: $item-md-paragraph-text-color; @@ -73,6 +79,7 @@ $item-md-sliding-content-background: $list-md-background-color !default; .item-inner { padding-right: ($item-md-padding-right / 2); + border-bottom: 1px solid $list-md-border-color; } @@ -94,7 +101,9 @@ ion-icon[item-right] { .item-button { padding: 0 .6em; + height: 25px; + font-size: 1.2rem; } @@ -125,6 +134,7 @@ ion-avatar { img { max-width: $item-md-avatar-size; max-height: $item-md-avatar-size; + border-radius: $item-md-avatar-size / 2; } } @@ -149,6 +159,7 @@ ion-note { ion-item-divider { padding: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left; + color: $item-md-divider-color; background-color: $item-md-divider-background; } diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss index 9598bf74d5..7c043ce39e 100644 --- a/ionic/components/item/item.scss +++ b/ionic/components/item/item.scss @@ -8,13 +8,16 @@ .item { display: flex; overflow: hidden; + align-items: center; justify-content: space-between; margin: 0; padding: 0; + width: 100%; min-height: 4.4rem; + border: 0; font-weight: normal; @@ -27,23 +30,29 @@ .item-inner { display: flex; overflow: hidden; + flex: 1; flex-direction: inherit; align-items: inherit; align-self: stretch; + margin: 0; padding: 0; + min-height: inherit; + border: 0; } .input-wrapper { display: flex; overflow: hidden; + flex: 1; flex-direction: inherit; align-items: inherit; align-self: stretch; + text-overflow: ellipsis; } @@ -59,11 +68,11 @@ ion-item-group { ion-item-divider { z-index: 1000; display: block; + width: 100%; min-height: 30px; &[sticky] { - position: -webkit-sticky; position: sticky; top: 0; } diff --git a/ionic/components/item/item.wp.scss b/ionic/components/item/item.wp.scss index 9012b9357d..ced06a1c76 100644 --- a/ionic/components/item/item.wp.scss +++ b/ionic/components/item/item.wp.scss @@ -24,8 +24,10 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; .item { position: relative; + padding-right: 0; padding-left: ($item-wp-padding-left); + font-size: $item-wp-font-size; font-weight: normal; text-transform: none; @@ -36,12 +38,14 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; h1 { margin: 0 0 2px; + font-size: 2.4rem; font-weight: normal; } h2 { margin: 2px 0; + font-size: 1.6rem; font-weight: normal; } @@ -51,6 +55,7 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; h5, h6 { margin: 2px 0; + font-size: 1.4rem; font-weight: normal; line-height: normal; @@ -58,6 +63,7 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; p { margin: 0 0 2px; + font-size: 1.4rem; line-height: normal; color: $item-wp-paragraph-text-color; @@ -74,6 +80,7 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; .item-inner { padding-right: ($item-wp-padding-right / 2); + border-bottom: 1px solid $list-wp-border-color; } @@ -95,7 +102,9 @@ ion-icon[item-right] { .item-button { padding: 0 .6em; + height: 25px; + font-size: 1.2rem; } @@ -131,6 +140,7 @@ ion-avatar { img { max-width: $item-wp-avatar-size; max-height: $item-wp-avatar-size; + border-radius: $item-wp-avatar-size / 2; } } @@ -155,6 +165,7 @@ ion-note { ion-item-divider { padding: $item-wp-padding-top $item-wp-padding-right $item-wp-padding-bottom $item-wp-padding-left; + color: $item-wp-divider-color; background-color: $item-wp-divider-background; } diff --git a/ionic/components/label/label.ios.scss b/ionic/components/label/label.ios.scss index 6ccc42a328..8b38ae9d96 100644 --- a/ionic/components/label/label.ios.scss +++ b/ionic/components/label/label.ios.scss @@ -26,6 +26,7 @@ ion-label { ion-label + ion-input .text-input, ion-label + ion-textarea .text-input { margin-left: $item-ios-padding-left; + width: calc(100% - #{$item-ios-padding-left}); } @@ -35,11 +36,13 @@ ion-label + ion-textarea .text-input { ion-label[stacked] { margin-bottom: 4px; + font-size: 1.2rem; } ion-label[floating] { margin-bottom: 0; + transform: translate3d(0, 27px, 0); transform-origin: left top; transition: transform 150ms ease-in-out; diff --git a/ionic/components/label/label.scss b/ionic/components/label/label.scss index f9a7d230d1..c6e4cdc879 100644 --- a/ionic/components/label/label.scss +++ b/ionic/components/label/label.scss @@ -6,8 +6,11 @@ ion-label { display: block; overflow: hidden; + flex: 1; + margin: 0; + font-size: inherit; text-overflow: ellipsis; white-space: nowrap; @@ -15,7 +18,9 @@ ion-label { .item-input ion-label { flex: initial; + max-width: 200px; + pointer-events: none; } @@ -29,6 +34,7 @@ ion-label { ion-label[fixed] { flex: 0 0 100px; + width: 100px; min-width: 100px; max-width: 200px; @@ -38,7 +44,9 @@ ion-label[stacked], ion-label[floating] { flex-basis: 100%; align-self: stretch; + margin-bottom: 0; + width: auto; max-width: 100%; } diff --git a/ionic/components/list/list.ios.scss b/ionic/components/list/list.ios.scss index e012526e17..eb35e9af52 100644 --- a/ionic/components/list/list.ios.scss +++ b/ionic/components/list/list.ios.scss @@ -28,7 +28,9 @@ $list-ios-header-color: #333 !default; ion-list-header { position: relative; + padding: $list-ios-header-padding; + border-bottom: 1px solid $list-ios-border-color; font-size: $list-ios-header-font-size; font-weight: $list-ios-header-font-weight; @@ -72,13 +74,17 @@ ion-list { ion-item-options button, ion-item-options [button] { display: inline-flex; + align-items: center; + margin: 0; + height: 100%; min-height: 100%; border: 0; border-radius: 0; + box-sizing: border-box; &::before { @@ -131,6 +137,7 @@ ion-list + ion-list { ion-list[inset] { margin: $list-inset-ios-margin-top $list-inset-ios-margin-right $list-inset-ios-margin-bottom $list-inset-ios-margin-left; + border-radius: $list-inset-ios-border-radius; ion-list-header { diff --git a/ionic/components/list/list.md.scss b/ionic/components/list/list.md.scss index 402807aabb..fbe4045ce4 100644 --- a/ionic/components/list/list.md.scss +++ b/ionic/components/list/list.md.scss @@ -28,6 +28,7 @@ ion-list-header, ion-item-divider { margin-left: 0; padding: $list-md-header-padding; + border-bottom: 1px solid $list-md-border-color; font-size: $list-md-header-font-size; color: $list-md-header-color; @@ -62,12 +63,17 @@ ion-list { ion-item-options button, ion-item-options [button] { display: inline-flex; + align-items: center; + margin: 1px 0; + height: calc(100% - 2px); + border: 0; border-radius: 0; box-shadow: none; + box-sizing: border-box; &::before { @@ -100,6 +106,7 @@ ion-list { ion-list[inset] { margin: $list-inset-md-margin-top $list-inset-md-margin-right $list-inset-md-margin-bottom $list-inset-md-margin-left; + border-radius: $list-inset-md-border-radius; .item:first-child { diff --git a/ionic/components/list/list.scss b/ionic/components/list/list.scss index 997c9c480a..b589199d1e 100644 --- a/ionic/components/list/list.scss +++ b/ionic/components/list/list.scss @@ -6,18 +6,22 @@ ion-list-header { display: block; overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; } ion-list { display: block; + margin: 0; padding: 0; + list-style-type: none; } ion-list[inset] { overflow: hidden; + transform: translateZ(0); } diff --git a/ionic/components/list/list.wp.scss b/ionic/components/list/list.wp.scss index 3d88b3d3da..f7d88d2e2e 100644 --- a/ionic/components/list/list.wp.scss +++ b/ionic/components/list/list.wp.scss @@ -28,6 +28,7 @@ ion-list-header, ion-item-divider { margin-left: 0; padding: $list-wp-header-padding; + border-bottom: 1px solid $list-wp-border-color; font-size: $list-wp-header-font-size; color: $list-wp-header-color; @@ -62,12 +63,17 @@ ion-list { ion-item-options button, ion-item-options [button] { display: inline-flex; + align-items: center; + margin: 1px 0; + height: calc(100% - 2px); + border: 0; border-radius: 0; box-shadow: none; + box-sizing: border-box; &::before { @@ -100,6 +106,7 @@ ion-list { ion-list[inset] { margin: $list-inset-wp-margin-top $list-inset-wp-margin-right $list-inset-wp-margin-bottom $list-inset-wp-margin-left; + border-radius: $list-inset-wp-border-radius; .item:first-child { diff --git a/ionic/components/menu/menu.scss b/ionic/components/menu/menu.scss index 3589c5873f..9097f6f523 100644 --- a/ionic/components/menu/menu.scss +++ b/ionic/components/menu/menu.scss @@ -15,6 +15,7 @@ ion-menu { left: 0; display: flex; + flex-direction: column; width: $menu-width; @@ -76,7 +77,9 @@ ion-menu[type=overlay] { .backdrop { left: -3000px; display: block; + width: 6000px; + opacity: .01; transform: translate3d(-9999px, 0, 0); diff --git a/ionic/components/radio/radio.ios.scss b/ionic/components/radio/radio.ios.scss index de95e4e69c..324ac67d19 100644 --- a/ionic/components/radio/radio.ios.scss +++ b/ionic/components/radio/radio.ios.scss @@ -25,6 +25,7 @@ ion-radio { .radio-icon { position: relative; display: block; + width: $radio-ios-icon-width; height: $radio-ios-icon-height; } @@ -42,10 +43,10 @@ ion-radio { height: 12px; border-width: $radio-ios-icon-border-width; - border-style: $radio-ios-icon-border-style; - border-color: $radio-ios-color-on; border-top-width: 0; border-left-width: 0; + border-style: $radio-ios-icon-border-style; + border-color: $radio-ios-color-on; transform: rotate(45deg); } @@ -56,6 +57,7 @@ ion-radio { .radio-disabled, .item-radio-disabled ion-label { opacity: $radio-ios-disabled-opacity; + pointer-events: none; } @@ -66,6 +68,7 @@ ion-radio { .item ion-radio { position: static; display: block; + margin: $item-ios-padding-media-top ($item-ios-padding-right / 2) $item-ios-padding-media-bottom ($item-ios-padding-left / 2); } diff --git a/ionic/components/radio/radio.md.scss b/ionic/components/radio/radio.md.scss index cec46b6821..71f4efe1cc 100644 --- a/ionic/components/radio/radio.md.scss +++ b/ionic/components/radio/radio.md.scss @@ -32,9 +32,12 @@ ion-radio { top: 0; left: 0; display: block; + margin: 0; + width: $radio-md-icon-width; height: $radio-md-icon-height; + border-width: $radio-md-icon-border-width; border-style: $radio-md-icon-border-style; border-radius: $radio-md-icon-border-radius; @@ -49,8 +52,10 @@ ion-radio { position: absolute; top: $radio-md-icon-border-width; left: $radio-md-icon-border-width; + width: $radio-md-icon-width / 2; height: $radio-md-icon-height / 2; + border-radius: 50%; background-color: $radio-md-color-on; transform: scale3d(0, 0, 0); @@ -80,6 +85,7 @@ ion-radio { .radio-disabled, .item-radio-disabled ion-label { opacity: $radio-md-disabled-opacity; + pointer-events: none; } @@ -90,6 +96,7 @@ ion-radio { .item ion-radio { position: static; display: block; + margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom 0; } diff --git a/ionic/components/radio/radio.wp.scss b/ionic/components/radio/radio.wp.scss index 9e3af3a657..ef1220158b 100644 --- a/ionic/components/radio/radio.wp.scss +++ b/ionic/components/radio/radio.wp.scss @@ -32,9 +32,12 @@ ion-radio { top: 0; left: 0; display: block; + margin: 0; + width: $radio-wp-icon-width; height: $radio-wp-icon-height; + border-width: $radio-wp-icon-border-width; border-style: $radio-wp-icon-border-style; border-radius: $radio-wp-icon-border-radius; @@ -50,8 +53,10 @@ ion-radio { top: $radio-wp-icon-border-width; left: $radio-wp-icon-border-width; display: none; + width: $radio-wp-icon-width / 2; height: $radio-wp-icon-height / 2; + border-radius: 50%; background-color: $radio-wp-color-off; } @@ -80,6 +85,7 @@ ion-radio { .radio-disabled, .item-radio-disabled ion-label { opacity: $radio-wp-disabled-opacity; + pointer-events: none; } @@ -90,7 +96,9 @@ ion-radio { .item ion-radio { position: static; display: block; + order: $radio-wp-order; + margin: $item-wp-padding-media-top $item-wp-padding-right $item-wp-padding-media-bottom 0; } diff --git a/ionic/components/refresher/refresher.scss b/ionic/components/refresher/refresher.scss index 3d35910dcf..14506d480d 100644 --- a/ionic/components/refresher/refresher.scss +++ b/ionic/components/refresher/refresher.scss @@ -20,6 +20,7 @@ ion-refresher { left: 0; z-index: $z-index-refresher; display: none; + width: 100%; height: $refresher-height; @@ -33,6 +34,7 @@ ion-refresher { // this transition is what is used to put the // scroll content back into it's original location margin-top: -1px; + border-top: 1px solid $refresher-border-color; transition: all 320ms cubic-bezier(.36, .66, .04, 1); } @@ -43,14 +45,17 @@ ion-refresher { ion-refresher-content { display: flex; + flex-direction: column; justify-content: center; + height: 100%; } .refresher-pulling, .refresher-refreshing { display: none; + width: 100%; } diff --git a/ionic/components/scroll/scroll.scss b/ionic/components/scroll/scroll.scss index 646ac884dd..392674304a 100644 --- a/ionic/components/scroll/scroll.scss +++ b/ionic/components/scroll/scroll.scss @@ -15,6 +15,7 @@ ion-scroll { &[center] { scroll-content { display: flex; + align-items: center; justify-content: center; } @@ -26,6 +27,7 @@ ion-scroll { right: 0; bottom: 0; left: 0; + overflow-y: hidden; overflow-x: hidden; -webkit-overflow-scrolling: touch; diff --git a/ionic/components/searchbar/searchbar.ios.scss b/ionic/components/searchbar/searchbar.ios.scss index 071af1fc1b..3aaac6e22e 100644 --- a/ionic/components/searchbar/searchbar.ios.scss +++ b/ionic/components/searchbar/searchbar.ios.scss @@ -33,7 +33,9 @@ $searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default; ion-searchbar { padding: $searchbar-ios-padding-top-bottom $searchbar-ios-padding-left-right; + min-height: $searchbar-ios-min-height; + border-top: 1px solid transparent; border-bottom: 1px solid $searchbar-ios-border-color; background: $searchbar-ios-background-color; @@ -69,7 +71,9 @@ ion-searchbar { @include calc(padding-left, "50% - 28px"); padding: 0 28px; + height: $searchbar-ios-input-height; + border-radius: 5px; font-size: 1.4rem; font-weight: 400; @@ -106,11 +110,13 @@ ion-searchbar { .searchbar-ios-cancel { flex: 0 0 0%; + margin-right: 0; margin-left: 0; padding: 0; height: 30px; + visibility: hidden; transform: translateX(calc(100% + #{$searchbar-ios-padding-left-right})); transition: $searchbar-ios-cancel-transition; @@ -136,7 +142,9 @@ ion-searchbar { .searchbar-focused { .searchbar-ios-cancel { flex: 0 0 auto; + padding-left: 8px; + visibility: visible; transform: translateX(0); } diff --git a/ionic/components/searchbar/searchbar.md.scss b/ionic/components/searchbar/searchbar.md.scss index be9fae39e1..b91e807b67 100644 --- a/ionic/components/searchbar/searchbar.md.scss +++ b/ionic/components/searchbar/searchbar.md.scss @@ -29,6 +29,7 @@ $searchbar-md-input-clear-icon-size: 22px !default; ion-searchbar { padding: $searchbar-md-padding; + background: $searchbar-md-background-color; } @@ -41,6 +42,7 @@ ion-searchbar { top: 11px; left: 16px; + width: $searchbar-md-input-search-icon-size + 1; height: $searchbar-md-input-search-icon-size + 1; } @@ -53,7 +55,9 @@ ion-searchbar { top: 0; left: 10px; display: none; + margin: 0; + width: $searchbar-md-input-search-icon-size + 1; height: 100%; } @@ -64,6 +68,7 @@ ion-searchbar { .searchbar-search-icon, .searchbar-md-cancel { position: absolute; + background-repeat: no-repeat; background-size: $searchbar-md-input-search-icon-size; @@ -80,7 +85,9 @@ ion-searchbar { @include placeholder($searchbar-md-input-placeholder-color); padding: 6px 55px; + height: $searchbar-md-input-height; + border-radius: $searchbar-md-input-border-radius; font-size: 1.6rem; @@ -104,6 +111,7 @@ ion-searchbar { position: absolute; top: 0; right: 13px; + padding: 0; width: $searchbar-md-input-clear-icon-size; diff --git a/ionic/components/searchbar/searchbar.scss b/ionic/components/searchbar/searchbar.scss index cfda40cc9e..cd041e930c 100644 --- a/ionic/components/searchbar/searchbar.scss +++ b/ionic/components/searchbar/searchbar.scss @@ -7,7 +7,9 @@ ion-searchbar { position: relative; display: flex; + align-items: center; + width: 100%; } @@ -19,14 +21,18 @@ ion-searchbar { .searchbar-input-container { position: relative; display: block; + flex-shrink: 1; + width: 100%; } .searchbar-input { @include appearance(none); display: block; + width: 100%; + border: 0; font-family: inherit; } @@ -34,5 +40,6 @@ ion-searchbar { .searchbar-clear-icon { margin: 0; padding: 0; + min-height: 0; } diff --git a/ionic/components/searchbar/searchbar.wp.scss b/ionic/components/searchbar/searchbar.wp.scss index cf00c1427c..b513a4e211 100644 --- a/ionic/components/searchbar/searchbar.wp.scss +++ b/ionic/components/searchbar/searchbar.wp.scss @@ -35,6 +35,7 @@ $searchbar-wp-input-clear-icon-size: 22px !default; ion-searchbar { padding: $searchbar-wp-padding; + border: $searchbar-wp-border-width solid $searchbar-wp-border-color; background: $searchbar-wp-background-color; } @@ -69,7 +70,9 @@ ion-searchbar { @include placeholder($searchbar-wp-input-placeholder-color); padding: $searchbar-wp-input-padding-vertical $searchbar-wp-input-padding-horizontal; + height: $searchbar-wp-input-height; + border-radius: $searchbar-wp-input-border-radius; font-size: $searchbar-wp-input-font-size; font-weight: $searchbar-wp-input-font-weight; @@ -93,6 +96,7 @@ ion-searchbar { right: $searchbar-wp-input-padding-horizontal; padding: 0; + width: $searchbar-wp-input-clear-icon-size; height: 100%; diff --git a/ionic/components/segment/segment.ios.scss b/ionic/components/segment/segment.ios.scss index 138afbdfca..441f9de93e 100644 --- a/ionic/components/segment/segment.ios.scss +++ b/ionic/components/segment/segment.ios.scss @@ -32,9 +32,11 @@ $segment-button-ios-toolbar-icon-line-height: 2.4rem !default; .segment-button { flex: 1; + width: 0; height: $segment-button-ios-height; + border-width: $segment-button-ios-border-width; border-style: solid; border-color: $segment-button-ios-background-color-activated; @@ -69,6 +71,7 @@ $segment-button-ios-toolbar-icon-line-height: 2.4rem !default; &:first-of-type { margin-right: 0; + border-radius: $segment-button-ios-border-radius 0 0 $segment-button-ios-border-radius; } @@ -78,6 +81,7 @@ $segment-button-ios-toolbar-icon-line-height: 2.4rem !default; &:last-of-type { margin-left: 0; + border-left-width: 0; border-radius: 0 $segment-button-ios-border-radius $segment-button-ios-border-radius 0; } @@ -96,6 +100,7 @@ $segment-button-ios-toolbar-icon-line-height: 2.4rem !default; .segment-button { max-width: $segment-button-ios-toolbar-button-max-width; height: $segment-button-ios-toolbar-button-height; + font-size: $segment-button-ios-toolbar-font-size; line-height: $segment-button-ios-toolbar-line-height; diff --git a/ionic/components/segment/segment.md.scss b/ionic/components/segment/segment.md.scss index b206fe3c6c..97358f80f0 100644 --- a/ionic/components/segment/segment.md.scss +++ b/ionic/components/segment/segment.md.scss @@ -20,7 +20,9 @@ $segment-button-md-icon-line-height: $segment-button-md-line-height !d .segment-button { flex: 1; + padding: $segment-button-md-padding; + width: 0; height: $segment-button-md-height; diff --git a/ionic/components/segment/segment.scss b/ionic/components/segment/segment.scss index 6037250c4b..d6bc8b3e48 100644 --- a/ionic/components/segment/segment.scss +++ b/ionic/components/segment/segment.scss @@ -6,9 +6,11 @@ ion-segment { display: flex; + flex: 1; align-items: center; justify-content: center; + width: 100%; } diff --git a/ionic/components/segment/segment.wp.scss b/ionic/components/segment/segment.wp.scss index 0482f94972..7bf14b6cd5 100644 --- a/ionic/components/segment/segment.wp.scss +++ b/ionic/components/segment/segment.wp.scss @@ -29,6 +29,7 @@ ion-segment { padding: $segment-button-wp-padding; height: $segment-button-wp-height; + font-size: $segment-button-wp-font-size; font-weight: $segment-button-wp-font-weight; line-height: $segment-button-wp-line-height; diff --git a/ionic/components/select/select.ios.scss b/ionic/components/select/select.ios.scss index 7d8d1d9c91..bf5d1d0355 100644 --- a/ionic/components/select/select.ios.scss +++ b/ionic/components/select/select.ios.scss @@ -18,6 +18,7 @@ ion-select { .select-icon { position: relative; + width: 12px; height: 18px; } @@ -26,12 +27,16 @@ ion-select { position: absolute; top: 50%; left: 5px; + margin-top: -2px; + width: 0; height: 0; + border-top: 5px solid; border-right: 5px solid transparent; border-left: 5px solid transparent; color: $select-ios-icon-color; + pointer-events: none; } diff --git a/ionic/components/select/select.md.scss b/ionic/components/select/select.md.scss index a264e1ba44..6f6779934a 100644 --- a/ionic/components/select/select.md.scss +++ b/ionic/components/select/select.md.scss @@ -22,6 +22,7 @@ ion-select { .select-icon { position: relative; + width: 12px; height: 19px; } @@ -30,12 +31,16 @@ ion-select { position: absolute; top: 50%; left: 5px; + margin-top: -3px; + width: 0; height: 0; + border-top: 5px solid; border-right: 5px solid transparent; border-left: 5px solid transparent; color: $select-md-icon-color; + pointer-events: none; } diff --git a/ionic/components/select/select.scss b/ionic/components/select/select.scss index 7447abc470..2d970b3c6f 100644 --- a/ionic/components/select/select.scss +++ b/ionic/components/select/select.scss @@ -6,13 +6,17 @@ ion-select { display: flex; overflow: hidden; + max-width: 45%; } .select-text { overflow: hidden; + flex: 1; + min-width: 16px; + font-size: inherit; text-overflow: ellipsis; white-space: nowrap; @@ -25,5 +29,6 @@ ion-select { .select-disabled, .item-select-disabled ion-label { opacity: .4; + pointer-events: none; } diff --git a/ionic/components/select/select.wp.scss b/ionic/components/select/select.wp.scss index 2de9103b94..989e9b6a3f 100644 --- a/ionic/components/select/select.wp.scss +++ b/ionic/components/select/select.wp.scss @@ -19,6 +19,7 @@ $select-wp-icon-color: $select-wp-border-color !default; ion-select { padding: $select-wp-padding-top $select-wp-padding-right $select-wp-padding-bottom $select-wp-padding-left; + border: $select-wp-border-width solid $select-wp-border-color; line-height: 3rem; } @@ -29,6 +30,7 @@ ion-select { .select-icon { position: relative; + width: $select-wp-icon-width; height: $select-wp-icon-width; } @@ -46,5 +48,6 @@ ion-select { border-right: $select-wp-icon-arrow-width solid $select-wp-icon-color; transform: rotate(135deg); + pointer-events: none; } diff --git a/ionic/components/spinner/spinner.scss b/ionic/components/spinner/spinner.scss index c3c5f05c6f..d110f76759 100644 --- a/ionic/components/spinner/spinner.scss +++ b/ionic/components/spinner/spinner.scss @@ -6,6 +6,7 @@ ion-spinner { position: relative; display: inline-block; + width: 28px; height: 28px; } @@ -14,8 +15,10 @@ ion-spinner svg { position: absolute; top: 0; left: 0; + width: 100%; height: 100%; + transform: translateZ(0); } @@ -90,6 +93,7 @@ ion-spinner.spinner-paused svg { .spinner-dots svg { transform-origin: center; + animation: spinner-dots 1s linear infinite; } diff --git a/ionic/components/tabs/tabs.ios.scss b/ionic/components/tabs/tabs.ios.scss index 6fd126847c..0990f27662 100644 --- a/ionic/components/tabs/tabs.ios.scss +++ b/ionic/components/tabs/tabs.ios.scss @@ -28,6 +28,7 @@ ion-tabs[tabbarPlacement=top] tabbar { .tab-button { padding: $tabbar-ios-item-padding; + min-width: $tab-button-ios-min-width; max-width: $tab-button-ios-max-width; min-height: $tabbar-ios-height; @@ -43,7 +44,9 @@ ion-tabs[tabbarPlacement=top] tabbar { .tab-button-text { margin-top: 0; margin-bottom: 0; + min-height: $tabbar-ios-item-font-size + 1; + font-size: $tabbar-ios-item-font-size; } @@ -54,6 +57,7 @@ ion-tabs[tabbarPlacement=top] tabbar { .tab-button-icon { min-width: $tabbar-ios-item-icon-size + 5; height: $tabbar-ios-item-icon-size; + font-size: $tabbar-ios-item-icon-size; &::before { @@ -72,6 +76,7 @@ ion-tabs[tabbarPlacement=top] tabbar { ion-icon { min-width: 24px; height: 26px; + font-size: 24px; } } @@ -82,6 +87,7 @@ ion-tabs[tabbarPlacement=top] tabbar { .tab-button-text { margin: 2px 0; + font-size: 1.4rem; line-height: 1.1; } diff --git a/ionic/components/tabs/tabs.md.scss b/ionic/components/tabs/tabs.md.scss index dd30bf5958..bf501903f5 100644 --- a/ionic/components/tabs/tabs.md.scss +++ b/ionic/components/tabs/tabs.md.scss @@ -22,7 +22,9 @@ tabbar { .tab-button { padding: $tabbar-md-item-padding; + min-height: $tabbar-md-item-height; + border-bottom: 2px solid transparent; border-radius: 0; font-size: $tabbar-md-item-font-size; @@ -40,11 +42,13 @@ tabbar { .tab-button-text { margin-top: 5px; margin-bottom: 5px; + text-transform: uppercase; } .tab-button-icon { min-width: $tabbar-md-item-icon-size + 5; + font-size: $tabbar-md-item-icon-size; } @@ -74,8 +78,10 @@ tab-highlight { bottom: 0; left: 0; display: block; + width: 1px; height: 2px; + background: $tab-button-md-active-color; transform: translateZ(0); transform-origin: 0 0; diff --git a/ionic/components/tabs/tabs.scss b/ionic/components/tabs/tabs.scss index a44ea8e719..5f7c4a3710 100644 --- a/ionic/components/tabs/tabs.scss +++ b/ionic/components/tabs/tabs.scss @@ -7,10 +7,12 @@ ion-tabs { display: flex; overflow: hidden; + flex-direction: column; margin: 0; padding: 0; + width: 100%; max-width: 100%; height: 100%; @@ -25,7 +27,9 @@ ion-tab { left: 0; display: none; overflow: hidden; + flex-direction: column; + width: 100%; height: 100%; @@ -40,6 +44,7 @@ ion-tabs > ion-navbar-section { ion-tabbar-section { position: relative; + order: $flex-order-tabbar-bottom; } @@ -51,6 +56,7 @@ tabbar { position: relative; display: flex; overflow: hidden; + justify-content: center; } @@ -61,6 +67,7 @@ tabbar { z-index: 0; display: flex; overflow: hidden; + flex: 1; flex-direction: column; align-items: center; @@ -68,6 +75,7 @@ tabbar { justify-content: center; margin: 0; + border: 0; border-radius: 0; @@ -119,6 +127,7 @@ tab-highlight { .tab-button-icon { padding-right: 8px; + text-align: right; } } @@ -128,7 +137,9 @@ tab-highlight { .tab-button-icon { order: 10; + padding-left: 8px; + text-align: left; } } @@ -149,8 +160,11 @@ tab-highlight { top: 6%; right: 4%; right: calc(50% - 50px); + padding: 1px 6px; + height: auto; + font-size: 12px; line-height: 16px; } diff --git a/ionic/components/tabs/tabs.wp.scss b/ionic/components/tabs/tabs.wp.scss index bc15c409d0..64302d464f 100644 --- a/ionic/components/tabs/tabs.wp.scss +++ b/ionic/components/tabs/tabs.wp.scss @@ -23,7 +23,9 @@ tabbar { .tab-button { padding: $tabbar-wp-item-padding; + min-height: $tabbar-wp-item-height; + border-bottom: 2px solid transparent; border-radius: 0; font-size: $tabbar-wp-item-font-size; @@ -50,6 +52,7 @@ tabbar { .tab-button-icon { min-width: $tabbar-wp-item-icon-size; + font-size: $tabbar-wp-item-icon-size; } diff --git a/ionic/components/toggle/toggle.ios.scss b/ionic/components/toggle/toggle.ios.scss index c9fcc9153f..8dcb03899b 100644 --- a/ionic/components/toggle/toggle.ios.scss +++ b/ionic/components/toggle/toggle.ios.scss @@ -42,12 +42,15 @@ ion-toggle { .toggle-icon { position: relative; display: block; + width: $toggle-ios-width; height: $toggle-ios-height; + border-radius: $toggle-ios-border-radius; background-color: $toggle-ios-border-color-off; transition: background-color $toggle-ios-transition-duration; + pointer-events: none; } @@ -147,6 +150,7 @@ ion-toggle { .toggle-disabled, .item-toggle-disabled ion-label { opacity: $toggle-ios-disabled-opacity; + pointer-events: none; } diff --git a/ionic/components/toggle/toggle.md.scss b/ionic/components/toggle/toggle.md.scss index b0f337f742..d0a4572f1f 100644 --- a/ionic/components/toggle/toggle.md.scss +++ b/ionic/components/toggle/toggle.md.scss @@ -39,12 +39,15 @@ ion-toggle { .toggle-icon { position: relative; display: block; + width: $toggle-md-track-width; height: $toggle-md-track-height; + border-radius: $toggle-md-track-height; background-color: $toggle-md-track-background-color-off; transition: background-color $toggle-md-transition-duration; + pointer-events: none; } @@ -93,6 +96,7 @@ ion-toggle { .toggle-disabled, .item-toggle-disabled ion-label { opacity: $toggle-md-disabled-opacity; + pointer-events: none; } @@ -107,6 +111,7 @@ ion-toggle { .item ion-toggle { margin: $toggle-md-media-margin; padding: $toggle-md-media-padding; + cursor: pointer; } diff --git a/ionic/components/toggle/toggle.wp.scss b/ionic/components/toggle/toggle.wp.scss index f16d94887c..58f2bf6160 100644 --- a/ionic/components/toggle/toggle.wp.scss +++ b/ionic/components/toggle/toggle.wp.scss @@ -43,11 +43,14 @@ ion-toggle { .toggle-icon { position: relative; display: block; + width: $toggle-wp-track-width; height: $toggle-wp-track-height; + border: $toggle-wp-track-border-width solid $toggle-wp-track-border-color-off; border-radius: $toggle-wp-track-height; background-color: $toggle-wp-track-background-color-off; + pointer-events: none; } @@ -93,6 +96,7 @@ ion-toggle { .toggle-disabled, .item-toggle-disabled ion-label { opacity: $toggle-wp-disabled-opacity; + pointer-events: none; } @@ -107,6 +111,7 @@ ion-toggle { .item ion-toggle { margin: $toggle-wp-media-margin; padding: $toggle-wp-media-padding; + cursor: pointer; } diff --git a/ionic/components/toolbar/toolbar-button.scss b/ionic/components/toolbar/toolbar-button.scss index 7fc1e82d05..5027a941a8 100644 --- a/ionic/components/toolbar/toolbar-button.scss +++ b/ionic/components/toolbar/toolbar-button.scss @@ -32,6 +32,7 @@ right: -2px; bottom: -6px; left: -2px; + content: ""; } @@ -41,6 +42,7 @@ .bar-button-menutoggle { display: flex; + align-items: center; } @@ -58,5 +60,6 @@ .back-button-text { display: flex; + align-items: center; } diff --git a/ionic/components/toolbar/toolbar.ios.scss b/ionic/components/toolbar/toolbar.ios.scss index 22092a4d83..26eb0c1347 100644 --- a/ionic/components/toolbar/toolbar.ios.scss +++ b/ionic/components/toolbar/toolbar.ios.scss @@ -28,6 +28,7 @@ $bar-button-ios-border-radius: 4px !default; .toolbar { padding: $toolbar-ios-padding; + min-height: $toolbar-ios-height; } @@ -57,6 +58,7 @@ ion-navbar-section { .toolbar-content { flex: 1; order: map-get($toolbar-order-ios, content); + min-width: 0; } @@ -65,6 +67,7 @@ ion-navbar-section { font-weight: 600; text-align: center; color: $toolbar-ios-text-color; + pointer-events: auto; } @@ -72,10 +75,14 @@ ion-title { position: absolute; top: 0; left: 0; + padding: 0 90px 1px; + width: 100%; height: 100%; + transform: translateZ(0); + pointer-events: none; } @@ -101,6 +108,7 @@ ion-title { ion-buttons { flex: 1; order: map-get($toolbar-order-ios, buttons-start); + transform: translateZ(0); } @@ -110,11 +118,13 @@ ion-buttons[left] { ion-buttons[end] { order: map-get($toolbar-order-ios, buttons-end); + text-align: right; } ion-buttons[right] { order: map-get($toolbar-order-ios, buttons-right); + text-align: right; } @@ -124,7 +134,9 @@ ion-buttons[right] { .bar-button { padding: 0 5px; + height: 32px; + border: 0; border-radius: $bar-button-ios-border-radius; font-size: $toolbar-ios-button-font-size; @@ -224,26 +236,33 @@ ion-buttons[right] { .bar-button-icon-left ion-icon { padding-right: .3em; + font-size: 1.4em; line-height: .67; + pointer-events: none; } .bar-button-icon-right ion-icon { padding-left: .4em; + font-size: 1.4em; line-height: .67; + pointer-events: none; } .bar-button-icon-only { padding: 0; + min-width: .9em; ion-icon { padding: 0 .1em; + font-size: 1.8em; line-height: .67; + pointer-events: none; } } @@ -254,18 +273,25 @@ ion-buttons[right] { .back-button { overflow: visible; + order: map-get($toolbar-order-ios, back-button); + margin: 0; + min-height: 3.2rem; + line-height: 1; transform: translateZ(0); } .back-button-icon { display: inherit; + margin: 0; margin-top: -1px; + min-width: 18px; + font-size: 3.4rem; } @@ -279,12 +305,15 @@ ion-buttons[right] { .bar-button-menutoggle { order: map-get($toolbar-order-ios, menu-toggle-start); + margin: 0 6px; padding: 0; + min-width: 36px; ion-icon { padding: 0 6px; + font-size: 2.8rem; } diff --git a/ionic/components/toolbar/toolbar.md.scss b/ionic/components/toolbar/toolbar.md.scss index 3b7b24f3f4..7147c4f0cc 100644 --- a/ionic/components/toolbar/toolbar.md.scss +++ b/ionic/components/toolbar/toolbar.md.scss @@ -28,6 +28,7 @@ $bar-button-md-border-radius: 2px !default; .toolbar { padding: $toolbar-md-padding; + min-height: $toolbar-md-height; } @@ -51,12 +52,14 @@ ion-navbar-section { .toolbar-content { flex: 1; order: map-get($toolbar-order-md, content); + min-width: 0; max-width: 100%; } .toolbar-title { padding: 0 12px; + font-size: $toolbar-md-title-font-size; font-weight: 500; color: $toolbar-md-text-color; @@ -101,6 +104,7 @@ ion-navbar-section { ion-buttons { order: map-get($toolbar-order-md, buttons-start); + transform: translateZ(0); } @@ -114,11 +118,13 @@ ion-buttons[left] .bar-button:first-child { ion-buttons[end] { order: map-get($toolbar-order-md, buttons-end); + text-align: right; } ion-buttons[right] { order: map-get($toolbar-order-md, buttons-right); + text-align: right; } @@ -132,7 +138,9 @@ ion-buttons[right] { margin-bottom: 0; margin-left: .2rem; padding: 0 5px; + height: 32px; + border: 0; border-radius: $bar-button-md-border-radius; font-size: $toolbar-md-button-font-size; @@ -233,15 +241,19 @@ ion-buttons[right] { .bar-button-icon-left ion-icon { padding-right: .3em; + font-size: 1.4em; line-height: .67; + pointer-events: none; } .bar-button-icon-right ion-icon { padding-left: .4em; + font-size: 1.4em; line-height: .67; + pointer-events: none; } @@ -250,9 +262,12 @@ ion-buttons[right] { ion-icon { padding: 0 .1em; + min-width: 28px; + font-size: 1.8em; line-height: .67; + pointer-events: none; } } @@ -263,12 +278,15 @@ ion-buttons[right] { .back-button { margin: 0 0 0 12px; + box-shadow: none; } .back-button-icon { margin: 0; + min-width: 44px; + font-size: 2.4rem; font-weight: normal; text-align: left; @@ -280,12 +298,15 @@ ion-buttons[right] { .bar-button-menutoggle { order: map-get($toolbar-order-md, menu-toggle-start); + margin: 0 6px; padding: 0 2px; + min-width: 44px; ion-icon { padding: 0 6px; + font-size: 2.4rem; } } @@ -293,7 +314,9 @@ ion-buttons[right] { .bar-button-menutoggle[end], .bar-button-menutoggle[right] { order: map-get($toolbar-order-md, menu-toggle-end); + margin: 0 2px; + min-width: 28px; } diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss index a2cf801c03..9042de583a 100644 --- a/ionic/components/toolbar/toolbar.scss +++ b/ionic/components/toolbar/toolbar.scss @@ -10,11 +10,13 @@ display: flex; overflow: hidden; + flex: 0; flex-direction: row; align-items: center; justify-content: space-between; order: $flex-order-toolbar-top; + width: 100%; } @@ -23,11 +25,13 @@ top: 0; left: 0; z-index: $z-index-toolbar-background; + width: 100%; height: 100%; border: 0; transform: translateZ(0); + pointer-events: none; } @@ -37,23 +41,30 @@ ion-title { display: flex; + flex: 1; align-items: center; + transform: translateZ(0); } .toolbar-title { display: block; overflow: hidden; + width: 100%; + text-overflow: ellipsis; white-space: nowrap; } ion-buttons { display: block; + margin: 0 .2rem; + transform: translateZ(0); + pointer-events: none; } @@ -78,6 +89,7 @@ ion-buttons div { ion-buttons, .bar-button-menutoggle { z-index: 99; + transform: translateZ(0); } @@ -86,6 +98,7 @@ ion-buttons, ion-navbar.toolbar { display: flex; + opacity: 0; transform: translateZ(0); diff --git a/ionic/components/toolbar/toolbar.wp.scss b/ionic/components/toolbar/toolbar.wp.scss index 692307885b..4c83f65774 100644 --- a/ionic/components/toolbar/toolbar.wp.scss +++ b/ionic/components/toolbar/toolbar.wp.scss @@ -31,6 +31,7 @@ $bar-button-wp-border-radius: 2px !default; .toolbar { padding: $toolbar-wp-padding; + min-height: $toolbar-wp-height; } @@ -54,12 +55,14 @@ ion-navbar-section { .toolbar-content { flex: 1; order: map-get($toolbar-order-wp, content); + min-width: 0; max-width: 100%; } .toolbar-title { padding: $toolbar-wp-title-padding; + font-size: $toolbar-wp-title-font-size; font-weight: $toolbar-wp-title-font-weight; text-transform: $toolbar-wp-title-text-transform; @@ -105,6 +108,7 @@ ion-navbar-section { ion-buttons { order: map-get($toolbar-order-wp, buttons-start); + transform: translateZ(0); } @@ -118,11 +122,13 @@ ion-buttons[left] .bar-button:first-child { ion-buttons[end] { order: map-get($toolbar-order-wp, buttons-end); + text-align: right; } ion-buttons[right] { order: map-get($toolbar-order-wp, buttons-right); + text-align: right; } @@ -136,7 +142,9 @@ ion-buttons[right] { margin-bottom: 0; margin-left: .2rem; padding: 0 5px; + height: 32px; + border: 0; border-radius: $bar-button-wp-border-radius; font-size: $toolbar-wp-button-font-size; @@ -237,15 +245,19 @@ ion-buttons[right] { .bar-button-icon-left ion-icon { padding-right: .3em; + font-size: 1.4em; line-height: .67; + pointer-events: none; } .bar-button-icon-right ion-icon { padding-left: .4em; + font-size: 1.4em; line-height: .67; + pointer-events: none; } @@ -254,9 +266,12 @@ ion-buttons[right] { ion-icon { padding: 0 .1em; + min-width: 28px; + font-size: 1.8em; line-height: .67; + pointer-events: none; } } @@ -267,12 +282,15 @@ ion-buttons[right] { .back-button { margin: 0 0 0 12px; + box-shadow: none; } .back-button-icon { margin: 0; + min-width: 30px; + font-size: 2.4rem; font-weight: normal; text-align: left; @@ -284,12 +302,15 @@ ion-buttons[right] { .bar-button-menutoggle { order: map-get($toolbar-order-wp, menu-toggle-start); + margin: 0 6px; padding: 0 2px; + min-width: 44px; ion-icon { padding: 0 6px; + font-size: 2.4rem; } } @@ -297,7 +318,9 @@ ion-buttons[right] { .bar-button-menutoggle[end], .bar-button-menutoggle[right] { order: map-get($toolbar-order-wp, menu-toggle-end); + margin: 0 2px; + min-width: 28px; } diff --git a/ionic/fonts/ionicons.scss b/ionic/fonts/ionicons.scss index eae2163c76..dc8e92c386 100644 --- a/ionic/fonts/ionicons.scss +++ b/ionic/fonts/ionicons.scss @@ -21,6 +21,7 @@ $ionicons-font-path: $font-path !default; ion-icon { display: inline-block; + font-family: "Ionicons"; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; diff --git a/ionic/platform/cordova.ios.scss b/ionic/platform/cordova.ios.scss index 57a6a1aa2f..f8eb9744a7 100644 --- a/ionic/platform/cordova.ios.scss +++ b/ionic/platform/cordova.ios.scss @@ -29,6 +29,7 @@ $cordova-ios-toolbar-padding: 20px !default; ion-page.modal > ion-toolbar:first-child ion-title, ion-page.modal > ion-toolbar:first-child ion-segment, { padding-top: $toolbar-ios-padding + $cordova-ios-toolbar-padding; + height: $toolbar-ios-height + $cordova-ios-toolbar-padding; min-height: $toolbar-ios-height + $cordova-ios-toolbar-padding; } diff --git a/ionic/util/util.scss b/ionic/util/util.scss index 47636ced2c..17170cac54 100755 --- a/ionic/util/util.scss +++ b/ionic/util/util.scss @@ -63,7 +63,9 @@ focus-ctrl { top: 1px; left: -9999px; z-index: 9999; + width: 9px; + pointer-events: none; } } @@ -80,8 +82,10 @@ $backdrop-color: #000 !default; left: 0; z-index: $z-index-backdrop; display: block; + width: 100%; height: 100%; + background-color: $backdrop-color; opacity: .01; transform: translateZ(0); @@ -101,6 +105,7 @@ click-block { left: 0; z-index: $z-index-click-block; display: block; + opacity: 0; transform: translate3d(0, -100%, 0); transform: translate3d(0, calc(-100% + 1px), 0); @@ -129,7 +134,9 @@ click-block { ion-loading-icon { display: flex; + align-self: center; + margin: auto; font-family: "Ionicons";