mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 03:00:58 +08:00
.ios and .md body class css structure
This commit is contained in:
Adam Bradley
@ -20,7 +20,7 @@ $action-menu-ios-background-active: #ebebeb !default;
|
||||
$action-menu-ios-icon-font-size: 1.4em !default;
|
||||
|
||||
|
||||
ion-action-menu[mode=ios] {
|
||||
ion-action-menu {
|
||||
text-align: center;
|
||||
|
||||
.action-menu-container {
|
||||
@ -90,7 +90,7 @@ ion-action-menu[mode=ios] {
|
||||
|
||||
}
|
||||
|
||||
.hairlines .action-menu[mode=ios] {
|
||||
&.hairlines .action-menu {
|
||||
.action-menu-title,
|
||||
.action-menu-option {
|
||||
border-bottom-width: 0.55px;
|
||||
|
||||
@ -18,7 +18,7 @@ $action-menu-md-icon-font-size: 2.4rem !default;
|
||||
$action-menu-md-icon-margin: 0 28px 0 0 !default;
|
||||
|
||||
|
||||
ion-action-menu[mode=md] {
|
||||
ion-action-menu {
|
||||
margin: 0;
|
||||
|
||||
.action-menu-container {
|
||||
|
||||
@ -167,7 +167,7 @@ export class IonicApp {
|
||||
}
|
||||
});
|
||||
|
||||
bodyEle.setAttribute('mode', config.setting('mode'));
|
||||
bodyEle.classList.add(config.setting('mode'));
|
||||
|
||||
/**
|
||||
* Hairline Shim
|
||||
|
||||
2
ionic/components/app/normalize.scss
vendored
2
ionic/components/app/normalize.scss
vendored
@ -1,4 +1,4 @@
|
||||
/*! Ionic fork of normalize.css v3.0.2 | MIT License | github.com/necolas/normalize.css */
|
||||
/*! normalize.css v3.0.2 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
|
||||
// HTML5 display definitions
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
.navbar-container {
|
||||
background-color: #ff6600 !important;
|
||||
}
|
||||
.nav[mode=ios] ion-title {
|
||||
.md .nav ion-title {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<ion-nav [root]="root"></ion-nav>
|
||||
|
||||
<style>
|
||||
.nav[mode=ios] .navbar-container {
|
||||
.md .nav .navbar-container {
|
||||
background-color: #2FD9BB !important;
|
||||
}
|
||||
.nav[mode=ios] .navbar-title {
|
||||
.md .nav .navbar-title {
|
||||
color: #FDFEFE;
|
||||
}
|
||||
#tabs .tab-bar:before {
|
||||
|
||||
@ -101,7 +101,3 @@ sup {
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
body[mode=md] {
|
||||
font-family: "Roboto", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
@ -8,13 +8,14 @@ $button-md-padding: 0 1.1em !default;
|
||||
$button-md-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12) !default;
|
||||
$button-md-box-shadow-active: 0 4px 5px 0 rgba(0, 0, 0, 0.14),0 1px 10px 0 rgba(0, 0, 0, 0.12),0 2px 4px -1px rgba(0, 0, 0, 0.2); //0 1px 3px 0 rgba(0, 0, 0, 0.3); //0 2px 5px 0 rgba(0, 0, 0, 0.26) !default;
|
||||
$button-md-border-radius: 2px !default;
|
||||
$button-md-animation-curve: cubic-bezier(0.4, 0, 0.2, 1) !default;
|
||||
|
||||
$button-md-clear-hover-bg-color: rgba(158, 158, 158, 0.1);
|
||||
$button-md-clear-active-bg-color: rgba(158, 158, 158, 0.2);
|
||||
|
||||
|
||||
[mode=md] button,
|
||||
[mode=md] [button] {
|
||||
button,
|
||||
[button] {
|
||||
border-radius: $button-md-border-radius;
|
||||
|
||||
min-height: $button-md-min-height;
|
||||
@ -26,9 +27,9 @@ $button-md-clear-active-bg-color: rgba(158, 158, 158, 0.2);
|
||||
font-size: $button-md-font-size;
|
||||
box-shadow: $button-md-box-shadow;
|
||||
|
||||
transition: box-shadow 0.2s $animation-curve-fast-out-linear-in,
|
||||
background-color 0.2s $animation-curve-default,
|
||||
color 0.2s $animation-curve-default;
|
||||
transition: box-shadow 0.2s $button-md-animation-curve,
|
||||
background-color 0.2s $button-md-animation-curve,
|
||||
color 0.2s $button-md-animation-curve;
|
||||
|
||||
&.activated {
|
||||
box-shadow: $button-md-box-shadow-active;
|
||||
@ -54,12 +55,6 @@ $button-md-clear-active-bg-color: rgba(158, 158, 158, 0.2);
|
||||
&[outline] {
|
||||
box-shadow: none;
|
||||
|
||||
/*.md-ripple {
|
||||
&.is-visible {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}*/
|
||||
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
}
|
||||
@ -97,15 +92,8 @@ $button-md-clear-active-bg-color: rgba(158, 158, 158, 0.2);
|
||||
|
||||
&[#{$color}] {
|
||||
|
||||
@if lightness(get-color($color, base)) < 80 {
|
||||
.md-ripple {
|
||||
//background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
//background-color: get-color($color, base);
|
||||
}
|
||||
|
||||
&[outline] {
|
||||
@ -128,8 +116,6 @@ $button-md-clear-active-bg-color: rgba(158, 158, 158, 0.2);
|
||||
}
|
||||
|
||||
opacity: 1;
|
||||
//background: transparent;
|
||||
//color: $fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -31,7 +31,7 @@ $card-ios-header-padding: 16px !default;
|
||||
$card-ios-header-color: #333 !default;
|
||||
|
||||
|
||||
ion-card[mode=ios] {
|
||||
ion-card {
|
||||
margin: $card-ios-margin-top $card-ios-margin-right $card-ios-margin-bottom $card-ios-margin-left;
|
||||
font-size: $card-ios-font-size;
|
||||
|
||||
@ -134,6 +134,6 @@ ion-card[mode=ios] {
|
||||
|
||||
}
|
||||
|
||||
ion-card[mode=ios] + ion-card {
|
||||
ion-card + ion-card {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@ $card-md-header-padding: 16px !default;
|
||||
$card-md-header-color: #222 !default;
|
||||
|
||||
|
||||
ion-card[mode=md] {
|
||||
ion-card {
|
||||
margin: $card-md-margin-top $card-md-margin-right $card-md-margin-bottom $card-md-margin-left;
|
||||
font-size: $card-md-font-size;
|
||||
|
||||
@ -137,6 +137,6 @@ ion-card[mode=md] {
|
||||
|
||||
}
|
||||
|
||||
ion-card[mode=md] + ion-card {
|
||||
ion-card + ion-card {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@ $checkbox-ios-border-color-on: color(primary) !default;
|
||||
$checkbox-ios-checkmark-color-on: $background-color !default;
|
||||
|
||||
|
||||
.checkbox[mode=ios] {
|
||||
.checkbox {
|
||||
|
||||
.checkbox-icon {
|
||||
position: relative;
|
||||
@ -47,7 +47,7 @@ $checkbox-ios-checkmark-color-on: $background-color !default;
|
||||
|
||||
@mixin checkbox-theme-ios($color-name, $bg-on) {
|
||||
|
||||
.checkbox[mode=ios][#{$color-name}] {
|
||||
.checkbox[#{$color-name}] {
|
||||
|
||||
&[aria-checked=true] .checkbox-icon {
|
||||
background-color: $bg-on;
|
||||
|
||||
@ -12,7 +12,7 @@ $checkbox-md-border-color-on: color(primary) !default;
|
||||
$checkbox-md-checkmark-color-on: $background-color !default;
|
||||
|
||||
|
||||
.checkbox[mode=md] {
|
||||
.checkbox {
|
||||
|
||||
.checkbox-icon {
|
||||
position: relative;
|
||||
@ -49,7 +49,7 @@ $checkbox-md-checkmark-color-on: $background-color !default;
|
||||
|
||||
@mixin checkbox-theme-md($color-name, $bg-on) {
|
||||
|
||||
.checkbox[mode=md][#{$color-name}] {
|
||||
.checkbox[#{$color-name}] {
|
||||
|
||||
&[aria-checked=true] .checkbox-icon {
|
||||
background-color: $bg-on;
|
||||
|
||||
@ -5,6 +5,6 @@
|
||||
$outer-content-md-background-color: #efeff4 !default;
|
||||
|
||||
|
||||
[mode=ios] .outer-content {
|
||||
.outer-content {
|
||||
background: $outer-content-md-background-color;
|
||||
}
|
||||
|
||||
@ -5,39 +5,35 @@
|
||||
$content-padding-md: 16px !default;
|
||||
|
||||
|
||||
[mode=md] {
|
||||
|
||||
.padding,
|
||||
[padding],
|
||||
.padding > scroll-content,
|
||||
[padding] > scroll-content {
|
||||
padding: $content-padding-md;
|
||||
}
|
||||
|
||||
.padding-top {
|
||||
padding-top: $content-padding-md;
|
||||
}
|
||||
|
||||
.padding-right {
|
||||
padding-right: $content-padding-md;
|
||||
}
|
||||
|
||||
.padding-bottom {
|
||||
padding-bottom: $content-padding-md;
|
||||
}
|
||||
|
||||
.padding-left {
|
||||
padding-left: $content-padding-md;
|
||||
}
|
||||
|
||||
.padding-vertical {
|
||||
padding-top: $content-padding-md;
|
||||
padding-bottom: $content-padding-md;
|
||||
}
|
||||
|
||||
.padding-horizontal {
|
||||
padding-right: $content-padding-md;
|
||||
padding-left: $content-padding-md;
|
||||
}
|
||||
|
||||
.padding,
|
||||
[padding],
|
||||
.padding > scroll-content,
|
||||
[padding] > scroll-content {
|
||||
padding: $content-padding-md;
|
||||
}
|
||||
|
||||
.padding-top {
|
||||
padding-top: $content-padding-md;
|
||||
}
|
||||
|
||||
.padding-right {
|
||||
padding-right: $content-padding-md;
|
||||
}
|
||||
|
||||
.padding-bottom {
|
||||
padding-bottom: $content-padding-md;
|
||||
}
|
||||
|
||||
.padding-left {
|
||||
padding-left: $content-padding-md;
|
||||
}
|
||||
|
||||
.padding-vertical {
|
||||
padding-top: $content-padding-md;
|
||||
padding-bottom: $content-padding-md;
|
||||
}
|
||||
|
||||
.padding-horizontal {
|
||||
padding-right: $content-padding-md;
|
||||
padding-left: $content-padding-md;
|
||||
}
|
||||
|
||||
@ -11,7 +11,6 @@ export class Ion {
|
||||
constructor(elementRef: ElementRef, config: IonicConfig) {
|
||||
this.elementRef = elementRef;
|
||||
this.config = config;
|
||||
this.clsMode = config.setting('mode');
|
||||
}
|
||||
|
||||
onInit() {
|
||||
|
||||
@ -23,7 +23,7 @@ $item-ios-note-color: darken($item-ios-border-color, 10%) !default;
|
||||
$item-ios-forward-icon-color: $item-ios-border-color !default;
|
||||
|
||||
|
||||
.list[mode=ios] {
|
||||
.list {
|
||||
|
||||
.item {
|
||||
margin-top: -1px;
|
||||
@ -141,7 +141,7 @@ $item-ios-forward-icon-color: $item-ios-border-color !default;
|
||||
}
|
||||
|
||||
|
||||
.hairlines .list[mode=ios] .item {
|
||||
&.hairlines .list .item {
|
||||
margin-top: -0.5px;
|
||||
|
||||
&:last-child {
|
||||
|
||||
@ -26,7 +26,7 @@ $item-md-note-color: darken($item-md-border-color, 10%) !default;
|
||||
$item-md-forward-icon-color: $item-md-border-color !default;
|
||||
|
||||
|
||||
.list[mode=md] {
|
||||
.list {
|
||||
|
||||
.item {
|
||||
margin-top: -1px;
|
||||
|
||||
@ -20,7 +20,7 @@ $list-ios-header-letter-spacing: 0.1rem !default;
|
||||
$list-ios-header-color: #333 !default;
|
||||
|
||||
|
||||
.list[mode=ios] {
|
||||
.list {
|
||||
margin: 0 $list-ios-margin-right $list-ios-margin-bottom $list-ios-margin-left;
|
||||
|
||||
ion-header {
|
||||
@ -34,16 +34,16 @@ $list-ios-header-color: #333 !default;
|
||||
|
||||
}
|
||||
|
||||
.list[mode=ios] + .list {
|
||||
.list + .list {
|
||||
margin-top: $list-ios-margin-top + $list-ios-margin-bottom;
|
||||
}
|
||||
|
||||
.list[mode=ios] + .list ion-header {
|
||||
.list + .list ion-header {
|
||||
margin-top: -$list-ios-margin-top;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.list[mode=ios][inset] {
|
||||
.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;
|
||||
|
||||
@ -68,6 +68,6 @@ $list-ios-header-color: #333 !default;
|
||||
}
|
||||
}
|
||||
|
||||
.list[mode=ios][inset] + .list[inset] {
|
||||
.list[inset] + .list[inset] {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@ $list-md-header-font-size: 1.4rem !default;
|
||||
$list-md-header-color: #858585 !default;
|
||||
|
||||
|
||||
.list[mode=md] {
|
||||
.list {
|
||||
margin: 0 $list-md-margin-right $list-md-margin-bottom $list-md-margin-left;
|
||||
|
||||
ion-header {
|
||||
@ -29,16 +29,16 @@ $list-md-header-color: #858585 !default;
|
||||
|
||||
}
|
||||
|
||||
.list[mode=md] + .list {
|
||||
.list + .list {
|
||||
margin-top: $list-md-margin-top + $list-md-margin-bottom;
|
||||
}
|
||||
|
||||
.list[mode=md] + .list ion-header {
|
||||
.list + .list ion-header {
|
||||
margin-top: -$list-md-margin-top;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.list[mode=md][inset] {
|
||||
.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;
|
||||
|
||||
@ -59,10 +59,10 @@ $list-md-header-color: #858585 !default;
|
||||
}
|
||||
}
|
||||
|
||||
.list[mode=md][inset] .item:not(ion-input):last-child:after {
|
||||
.list[inset] .item:not(ion-input):last-child:after {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.list[mode=md][inset] + .list[inset] {
|
||||
.list[inset] + .list[inset] {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@ -1,12 +0,0 @@
|
||||
$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
|
||||
$animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
|
||||
$animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
|
||||
|
||||
$animation-curve-default: $animation-curve-fast-out-slow-in !default;
|
||||
|
||||
$shadow-multiplier: 0.7;
|
||||
$shadow-key-umbra-opacity: $shadow-multiplier * 0.2;
|
||||
$shadow-key-penumbra-opacity: $shadow-multiplier * 0.14;
|
||||
$shadow-ambient-shadow-opacity: $shadow-multiplier * 0.12;
|
||||
|
||||
$md-whiteframe-shadow-z1: 0px 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 2px 2px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 1px 5px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
|
||||
@ -5,27 +5,6 @@
|
||||
$navbar-ios-height: 4.4rem !default;
|
||||
|
||||
|
||||
.nav[mode=ios] {
|
||||
|
||||
.navbar-container {
|
||||
min-height: $navbar-ios-height;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
padding: 0;
|
||||
margin: 0 4px;
|
||||
|
||||
min-height: 3.2rem;
|
||||
line-height: 1;
|
||||
|
||||
order: map-get($toolbar-order-ios, 'back-button');
|
||||
overflow: inherit;
|
||||
}
|
||||
|
||||
.back-button-icon {
|
||||
display: inherit;
|
||||
font-size: 3.2rem;
|
||||
padding-right: 7px;
|
||||
}
|
||||
|
||||
.nav .navbar-container {
|
||||
min-height: $navbar-ios-height;
|
||||
}
|
||||
|
||||
@ -5,23 +5,22 @@
|
||||
$navbar-md-height: 5.6rem !default;
|
||||
|
||||
|
||||
.nav[mode=md] {
|
||||
.nav {
|
||||
|
||||
.navbar-container {
|
||||
min-height: $navbar-md-height;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
padding: 0;
|
||||
margin: 0 0 0 12px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.back-button-icon {
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
font-size: 2.4rem;
|
||||
min-width: 44px;
|
||||
font-size: 2.4rem;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ $popup-ios-bg-color: #f8f8f8 !default;
|
||||
$popup-ios-button-text-color: color(primary) !default;
|
||||
|
||||
|
||||
.popup[mode=ios] {
|
||||
.popup {
|
||||
|
||||
popup-wrapper {
|
||||
border-radius: $popup-ios-border-radius;
|
||||
|
||||
@ -6,7 +6,7 @@ $popup-md-border-radius: 13px !default;
|
||||
$popup-md-bg-color: #f8f8f8 !default;
|
||||
|
||||
|
||||
.popup[mode=md] {
|
||||
.popup {
|
||||
|
||||
popup-wrapper {
|
||||
border-radius: $popup-md-border-radius;
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
$radio-ios-active-color: color(primary) !default;
|
||||
|
||||
|
||||
.radio[mode=ios] {
|
||||
.radio {
|
||||
|
||||
.radio-icon {
|
||||
position: relative;
|
||||
@ -38,7 +38,7 @@ $radio-ios-active-color: color(primary) !default;
|
||||
|
||||
@mixin radio-theme-ios($color-name, $color-value) {
|
||||
|
||||
.radio[mode=ios][#{$color-name}] {
|
||||
.radio[#{$color-name}] {
|
||||
|
||||
&[aria-checked=true] .radio-icon:after {
|
||||
border-color: $color-value;
|
||||
|
||||
@ -12,7 +12,7 @@ $radio-md-transition-duration: 280ms !default;
|
||||
$radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
|
||||
|
||||
|
||||
.radio[mode=md] {
|
||||
.radio {
|
||||
|
||||
.radio-icon {
|
||||
position: relative;
|
||||
@ -58,7 +58,7 @@ $radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
|
||||
|
||||
@mixin radio-theme-md($color-name, $color-value) {
|
||||
|
||||
.radio[mode=md][#{$color-name}] {
|
||||
.radio[#{$color-name}] {
|
||||
|
||||
&[aria-checked=true] .radio-icon {
|
||||
border-color: $color-value;
|
||||
|
||||
@ -10,7 +10,7 @@ $search-bar-ios-background-svg: "<svg xmlns='http://www.w3.org/2000/svg' v
|
||||
$search-bar-ios-background-size: 13px 13px !default;
|
||||
|
||||
|
||||
.search-bar[mode=ios] {
|
||||
.search-bar {
|
||||
padding: $search-bar-ios-padding;
|
||||
background: $search-bar-ios-background-color;
|
||||
border-bottom: 1px solid $search-bar-ios-border-color;
|
||||
@ -20,7 +20,6 @@ $search-bar-ios-background-size: 13px 13px !default;
|
||||
height: 13px;
|
||||
|
||||
transform: translateX(calc(50% - 60px));
|
||||
-webkit-transform: translateX(-webkit-calc(50% - 60px));
|
||||
|
||||
@include svg-background-image($search-bar-ios-background-svg);
|
||||
background-size: $search-bar-ios-background-size;
|
||||
@ -56,6 +55,6 @@ $search-bar-ios-background-size: 13px 13px !default;
|
||||
}
|
||||
}
|
||||
|
||||
.hairlines .search-bar[mode=ios] {
|
||||
&.hairlines .search-bar {
|
||||
border-bottom-width: 0.55px;
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
.segment[mode=ios] .ion-segment {
|
||||
.segment .ion-segment {
|
||||
> button,
|
||||
> [button] {
|
||||
border-width: 1px;
|
||||
@ -26,6 +26,7 @@
|
||||
&:first-of-type {
|
||||
border-right-width: 0px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-left-width: 0px;
|
||||
}
|
||||
|
||||
@ -22,7 +22,7 @@ $switch-ios-handle-bg-color: $switch-ios-off-bg-color !default;
|
||||
$switch-ios-transition-duration: 300ms !default;
|
||||
|
||||
|
||||
.switch[mode=ios] {
|
||||
.switch {
|
||||
|
||||
.item-media {
|
||||
margin: 0;
|
||||
@ -125,7 +125,7 @@ $switch-ios-transition-duration: 300ms !default;
|
||||
|
||||
@mixin switch-theme-ios($color-name, $bg-on) {
|
||||
|
||||
.switch[mode=ios][#{$color-name}] {
|
||||
.switch[#{$color-name}] {
|
||||
|
||||
&[aria-checked=true] .switch-icon {
|
||||
background-color: $bg-on;
|
||||
|
||||
@ -18,7 +18,7 @@ $switch-md-handle-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2p
|
||||
$switch-md-transition-duration: 300ms !default;
|
||||
|
||||
|
||||
.switch[mode=md] {
|
||||
.switch {
|
||||
|
||||
.item-media {
|
||||
margin: 0;
|
||||
@ -85,7 +85,7 @@ $switch-md-transition-duration: 300ms !default;
|
||||
|
||||
@mixin switch-theme-md($color-name, $bg-on) {
|
||||
|
||||
.switch[mode=md][#{$color-name}] {
|
||||
.switch[#{$color-name}] {
|
||||
|
||||
&[aria-checked=true] .switch-icon {
|
||||
background-color: lighten($bg-on, 25%);
|
||||
|
||||
@ -8,7 +8,7 @@ $tab-bar-ios-item-icon-size: 32px !default;
|
||||
$tab-bar-ios-height: 49px !default;
|
||||
|
||||
|
||||
.tabs[mode=ios] {
|
||||
.tabs {
|
||||
|
||||
.tab-bar {
|
||||
border-top: 1px solid $toolbar-ios-border-color;
|
||||
@ -46,8 +46,8 @@ $tab-bar-ios-height: 49px !default;
|
||||
|
||||
}
|
||||
|
||||
[mode=ios][tab-bar-icons=right] .tab-button,
|
||||
[mode=ios][tab-bar-icons=left] .tab-button {
|
||||
[tab-bar-icons=right] .tab-button,
|
||||
[tab-bar-icons=left] .tab-button {
|
||||
|
||||
.tab-button-text {
|
||||
font-size: 1.4rem;
|
||||
@ -63,7 +63,7 @@ $tab-bar-ios-height: 49px !default;
|
||||
}
|
||||
}
|
||||
|
||||
[mode=ios] .tab-button.has-title-only {
|
||||
.tab-button.has-title-only {
|
||||
min-height: $tab-bar-ios-height - 8;
|
||||
|
||||
.tab-button-text {
|
||||
@ -72,11 +72,11 @@ $tab-bar-ios-height: 49px !default;
|
||||
}
|
||||
}
|
||||
|
||||
[mode=ios] .tab-button.icon-only {
|
||||
.tab-button.icon-only {
|
||||
min-height: $tab-bar-ios-height - 8;
|
||||
}
|
||||
|
||||
.hairlines .tabs[mode=ios] {
|
||||
&.hairlines .tabs {
|
||||
|
||||
.tab-bar {
|
||||
border-top-width: 0.5px;
|
||||
|
||||
@ -9,7 +9,7 @@ $tab-bar-md-item-icon-size: 2.4rem !default;
|
||||
$tab-bar-md-item-height: 4.8rem !default;
|
||||
|
||||
|
||||
.tabs[mode=md] {
|
||||
.tabs {
|
||||
|
||||
.tab-button {
|
||||
padding: $tab-bar-md-item-padding;
|
||||
@ -39,12 +39,12 @@ $tab-bar-md-item-height: 4.8rem !default;
|
||||
|
||||
}
|
||||
|
||||
[mode=md][tab-bar-icons=bottom] .tab-button {
|
||||
[tab-bar-icons=bottom] .tab-button {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
[mode=md][tab-bar-icons=right] .tab-button,
|
||||
[mode=md][tab-bar-icons=left] .tab-button {
|
||||
[tab-bar-icons=right] .tab-button,
|
||||
[tab-bar-icons=left] .tab-button {
|
||||
padding-bottom: 10px;
|
||||
|
||||
icon {
|
||||
@ -52,7 +52,7 @@ $tab-bar-md-item-height: 4.8rem !default;
|
||||
}
|
||||
}
|
||||
|
||||
[mode=md] .tab-button.icon-only,
|
||||
[mode=md] .tab-button.has-title-only {
|
||||
.tab-button.icon-only,
|
||||
.tab-button.has-title-only {
|
||||
padding: 6px 10px 6px 10px;
|
||||
}
|
||||
|
||||
@ -58,8 +58,6 @@
|
||||
<style>
|
||||
ion-tabs {
|
||||
height: auto;
|
||||
}
|
||||
ion-tabs[mode=md] {
|
||||
border-bottom: 1px solid gray;
|
||||
border-top: 1px solid gray;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,8 +5,8 @@
|
||||
$input-label-ios-color: #7f7f7f !default;
|
||||
|
||||
|
||||
.list[mode=ios],
|
||||
ion-card[mode=ios] {
|
||||
.list,
|
||||
ion-card {
|
||||
|
||||
.text-input {
|
||||
margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom ($item-ios-padding-left / 2);
|
||||
|
||||
@ -6,8 +6,8 @@ $text-input-highlight-color: map-get($colors, primary) !default;
|
||||
$input-label-md-color: #999 !default;
|
||||
|
||||
|
||||
.list[mode=md],
|
||||
ion-card[mode=md] {
|
||||
.list,
|
||||
ion-card {
|
||||
|
||||
.text-input {
|
||||
margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
|
||||
@ -67,7 +67,7 @@ ion-card[mode=md] {
|
||||
}
|
||||
}
|
||||
|
||||
.list[mode=md][inset] ion-input.item {
|
||||
.list[inset] ion-input.item {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
@ -16,8 +16,7 @@ $toolbar-ios-button-font-size: 1.7rem !default;
|
||||
$toolbar-ios-title-font-size: 1.7rem !default;
|
||||
|
||||
|
||||
.nav[mode=ios] .toolbar,
|
||||
.toolbar[mode=ios] {
|
||||
.toolbar {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
min-height: $toolbar-ios-height;
|
||||
@ -46,12 +45,17 @@ $toolbar-ios-title-font-size: 1.7rem !default;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
margin: 0 4px;
|
||||
min-height: 3.2rem;
|
||||
line-height: 1;
|
||||
order: map-get($toolbar-order-ios, 'back-button');
|
||||
overflow: inherit;
|
||||
}
|
||||
|
||||
.back-button-icon {
|
||||
padding-right: 0.6rem;
|
||||
display: inherit;
|
||||
min-width: 20px;
|
||||
font-size: 3.2rem;
|
||||
}
|
||||
|
||||
button,
|
||||
@ -76,6 +80,6 @@ $toolbar-ios-title-font-size: 1.7rem !default;
|
||||
|
||||
}
|
||||
|
||||
.hairlines .toolbar[mode=ios] {
|
||||
&.hairlines .toolbar {
|
||||
border-bottom-width: 0.55px;
|
||||
}
|
||||
|
||||
@ -7,8 +7,7 @@ $toolbar-md-title-font-size: 2rem !default;
|
||||
$toolbar-md-button-font-size: 1.4rem !default;
|
||||
|
||||
|
||||
.nav[mode=md] .toolbar,
|
||||
.toolbar[mode=md] {
|
||||
.toolbar {
|
||||
min-height: $toolbar-md-height;
|
||||
|
||||
.toolbar-inner-title {
|
||||
|
||||
@ -159,9 +159,6 @@ function appendConfig(cls, config) {
|
||||
let componentId = config.classId || (config.selector && config.selector.replace('ion-', ''));
|
||||
config.host['class'] = ((config.host['class'] || '') + ' ' + componentId).trim();
|
||||
|
||||
// the mode will get figured out when the component is constructed
|
||||
config.host['[attr.mode]'] = 'clsMode';
|
||||
|
||||
return config;
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,8 @@
|
||||
|
||||
// Theme
|
||||
@import "themes/default";
|
||||
|
||||
|
||||
// Globals
|
||||
@import
|
||||
"util/mixins",
|
||||
@ -43,3 +47,14 @@
|
||||
"components/switch/switch",
|
||||
"components/tabs/tabs",
|
||||
"components/view/view";
|
||||
|
||||
|
||||
// Ionicons
|
||||
$ionicons: true !default;
|
||||
@if ($ionicons) {
|
||||
@import "fonts/ionicons";
|
||||
}
|
||||
|
||||
|
||||
// Engine
|
||||
@import "platform/cordova";
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
/*! Ionic: iOS */
|
||||
|
||||
|
||||
// iOS Components
|
||||
@import
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
/*! Ionic: Material Design */
|
||||
|
||||
|
||||
// Material Design Components
|
||||
@import
|
||||
"components/material/variables",
|
||||
"components/material/ripple",
|
||||
"components/toolbar/modes/material",
|
||||
"components/action-menu/modes/material",
|
||||
@ -1,41 +1,27 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
// Default Theme
|
||||
@import "themes/default";
|
||||
|
||||
|
||||
// Core Components
|
||||
@import "ionic.core";
|
||||
|
||||
|
||||
// iOS Components
|
||||
$ios-mode: true !default;
|
||||
@if ($ios-mode) {
|
||||
.ios {
|
||||
@import "ionic.ios";
|
||||
}
|
||||
|
||||
|
||||
// Material Design Components
|
||||
$material-design-mode: true !default;
|
||||
@if ($material-design-mode) {
|
||||
@import "ionic.material";
|
||||
.md {
|
||||
@import "ionic.md";
|
||||
}
|
||||
|
||||
|
||||
// Ionicons
|
||||
$ionicons: true !default;
|
||||
@if ($ionicons) {
|
||||
@import "fonts/ionicons";
|
||||
}
|
||||
|
||||
|
||||
// Roboto
|
||||
// Roboto Font
|
||||
$roboto: true !default;
|
||||
@if ($roboto) {
|
||||
@import "fonts/roboto";
|
||||
.md {
|
||||
font-family: "Roboto", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Platforms
|
||||
@import "platform/cordova";
|
||||
|
||||
Reference in New Issue
Block a user