mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
style(sass): remove all PropertySortOrder errors from linter
references #5797
This commit is contained in:
Brandy Carney
@ -5,6 +5,9 @@
|
||||
exclude: 'ionic/components/slides/**'
|
||||
|
||||
linters:
|
||||
DuplicateProperty:
|
||||
enabled: false
|
||||
|
||||
MergeableSelector:
|
||||
enabled: true
|
||||
force_nesting: false
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
11
ionic/components/app/normalize.scss
vendored
11
ionic/components/app/normalize.scss
vendored
@ -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
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -11,6 +11,7 @@ ion-badge {
|
||||
display: inline-block;
|
||||
|
||||
padding: 3px 8px;
|
||||
|
||||
min-width: 10px;
|
||||
|
||||
font-size: $badge-font-size;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
|
||||
ion-icon {
|
||||
display: inline-block;
|
||||
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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%;
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -6,9 +6,11 @@
|
||||
|
||||
ion-segment {
|
||||
display: flex;
|
||||
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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";
|
||||
|
||||
Reference in New Issue
Block a user