fix(standalone): fixes standalone component styling (#13769)

* test(e2e): update standalone tests for snapshot

* fix(standalone): improve component fonts, box-sizing, etc

* refactor(input): separate textarea styles from input and rename classes

* fix(datetime): change position in an item so cover is over item
This commit is contained in:
Brandy Carney
2018-01-08 10:32:09 -05:00
committed by GitHub
parent 34df45c827
commit 06c9377192
103 changed files with 598 additions and 77 deletions

View File

@ -6,6 +6,8 @@
.action-sheet-ios {
@include text-align($action-sheet-ios-text-align);
font-family: $action-sheet-ios-font-family;
}
.action-sheet-ios .action-sheet-wrapper {

View File

@ -3,6 +3,9 @@
// iOS Action Sheet
// --------------------------------------------------
/// @prop - Font family of the action sheet
$action-sheet-ios-font-family: $font-family-ios-base !default;
/// @prop - Text align of the action sheet
$action-sheet-ios-text-align: center !default;

View File

@ -4,6 +4,10 @@
// Material Design Action Sheet
// --------------------------------------------------
.action-sheet-md {
font-family: $action-sheet-md-font-family;
}
// Material Design Action Sheet Title
// -----------------------------------------

View File

@ -3,6 +3,9 @@
// Material Design Action Sheet
// --------------------------------------------------
/// @prop - Font family of the action sheet
$action-sheet-md-font-family: $font-family-md-base !default;
/// @prop - Text align of the action sheet
$action-sheet-md-text-align: start !default;

View File

@ -31,6 +31,8 @@ ion-action-sheet {
.action-sheet-button {
width: $action-sheet-width;
border: 0;
}
.action-sheet-container {

View File

@ -4,6 +4,10 @@
// iOS Alert
// --------------------------------------------------
.alert-ios {
font-family: $alert-ios-font-family;
}
.alert-ios .alert-wrapper {
@include border-radius($alert-ios-border-radius);

View File

@ -5,6 +5,9 @@
// iOS Alert
// --------------------------------------------------
/// @prop - Font family of the alert
$alert-ios-font-family: $font-family-ios-base !default;
/// @prop - Max width of the alert
$alert-ios-max-width: 270px !default;

View File

@ -4,6 +4,10 @@
// Material Design Alert
// --------------------------------------------------
.alert-md {
font-family: $alert-md-font-family;
}
.alert-md .alert-wrapper {
@include border-radius($alert-md-border-radius);
@ -230,6 +234,8 @@
.alert-md .alert-button-group {
@include padding($alert-md-button-group-padding-top, $alert-md-button-group-padding-end, $alert-md-button-group-padding-bottom, $alert-md-button-group-padding-start);
box-sizing: border-box;
flex-wrap: $alert-md-button-group-flex-wrap;
justify-content: $alert-md-button-group-justify-content;
}

View File

@ -5,6 +5,9 @@
// Material Design Alert
// --------------------------------------------------
/// @prop - Font family of the alert
$alert-md-font-family: $font-family-md-base !default;
/// @prop - Max width of the alert
$alert-md-max-width: 280px !default;

View File

@ -87,6 +87,8 @@ ion-alert input {
z-index: 0;
display: block;
border: 0;
font-size: $alert-button-font-size;
line-height: $alert-button-line-height;
}

View File

@ -7,6 +7,8 @@
.badge-ios {
@include border-radius($badge-ios-border-radius);
font-family: $badge-ios-font-family;
color: $badge-ios-text-color;
background-color: $badge-ios-background-color;
}

View File

@ -6,6 +6,9 @@
/// @prop - Border radius of the badge
$badge-ios-border-radius: 10px !default;
/// @prop - Font family of the badge
$badge-ios-font-family: $font-family-ios-base !default;
/// @prop - Background color of the badge
$badge-ios-background-color: color($colors-ios, primary) !default;

View File

@ -7,6 +7,8 @@
.badge-md {
@include border-radius($badge-md-border-radius);
font-family: $badge-md-font-family;
color: $badge-md-text-color;
background-color: $badge-md-background-color;
}

View File

@ -6,6 +6,9 @@
/// @prop - Border radius of the badge
$badge-md-border-radius: 4px !default;
/// @prop - Font family of the badge
$badge-md-font-family: $font-family-md-base !default;
/// @prop - Background color of the badge
$badge-md-background-color: color($colors-md, primary) !default;

View File

@ -19,6 +19,9 @@ ion-badge {
white-space: nowrap;
vertical-align: baseline;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
contain: content;
}

View File

@ -14,6 +14,7 @@
height: $button-ios-height;
font-family: $button-ios-font-family;
font-size: $button-ios-font-size;
color: $button-ios-text-color;
@ -131,7 +132,7 @@
// --------------------------------------------------
@mixin ios-button-outline($color-name, $color-base, $color-contrast) {
$bg-color-focused: rgba($color-base, 0.12);
$bg-color-focused: rgba($color-base, .12);
.button-outline-ios-#{$color-name} {
border-color: $color-base;
@ -184,7 +185,7 @@
@mixin ios-button-clear($color-name, $color-base, $color-contrast) {
$fg-color: $color-base;
$bg-color-focused: rgba($color-base, 0.12);
$bg-color-focused: rgba($color-base, .12);
.button-clear-ios-#{$color-name} {
border-color: $button-ios-clear-border-color;

View File

@ -3,6 +3,9 @@
// iOS Button
// --------------------------------------------------
/// @prop - Font family of the button
$button-ios-font-family: $font-family-ios-base !default;
/// @prop - Margin top of the button
$button-ios-margin-top: 4px !default;
@ -133,7 +136,7 @@ $button-ios-outline-background-color-activated: $button-ios-background-color
$button-ios-outline-opacity-activated: 1 !default;
/// @prop - Background color of the focused outline button
$button-ios-outline-background-color-focused: rgba($button-ios-background-color, 0.12) !default;
$button-ios-outline-background-color-focused: rgba($button-ios-background-color, .12) !default;
// iOS Clear Button
@ -158,7 +161,7 @@ $button-ios-clear-text-color-hover: $button-ios-background-color
$button-ios-clear-opacity-hover: .6 !default;
/// @prop - Background color of the focused clear button
$button-ios-clear-background-color-focused: rgba($button-ios-background-color, 0.12) !default;
$button-ios-clear-background-color-focused: rgba($button-ios-background-color, .12) !default;
// iOS Round Button

View File

@ -15,6 +15,7 @@
height: $button-md-height;
font-family: $button-md-font-family;
font-size: $button-md-font-size;
font-weight: $button-md-font-weight;
@ -156,7 +157,7 @@
@mixin md-button-outline($color-name, $color-base, $color-contrast) {
$fg-color: color-shade($color-base, 5%);
$bg-color-focused: rgba($color-base, 0.12);
$bg-color-focused: rgba($color-base, .12);
.button-outline-md-#{$color-name} {
border-color: $fg-color;
@ -216,7 +217,7 @@
@mixin md-button-clear($color-name, $color-base, $color-contrast) {
$fg-color: $color-base;
$bg-color-focused: rgba($color-base, 0.12);
$bg-color-focused: rgba($color-base, .12);
.button-clear-md-#{$color-name} {
border-color: $button-md-clear-border-color;

View File

@ -3,6 +3,9 @@
// Material Design Button
// --------------------------------------------------
/// @prop - Font family of the button
$button-md-font-family: $font-family-md-base !default;
/// @prop - Margin top of the button
$button-md-margin-top: 4px !default;
@ -160,7 +163,7 @@ $button-md-outline-opacity-activated: 1 !default;
$button-md-outline-ripple-background-color: $button-md-background-color !default;
/// @prop - Background color of the focused outline button
$button-md-outline-background-color-focused: rgba($button-md-background-color, 0.12) !default;
$button-md-outline-background-color-focused: rgba($button-md-background-color, .12) !default;
// Material Design Clear Button
@ -194,7 +197,7 @@ $button-md-clear-background-color-hover: rgba(158, 158, 158, .1) !default
$button-md-clear-ripple-background-color: #999 !default;
/// @props - Background color of the focused clear button
$button-md-clear-background-color-focused: rgba($button-md-background-color, 0.12) !default;
$button-md-clear-background-color-focused: rgba($button-md-background-color, .12) !default;
// Material Design Round Button

View File

@ -30,6 +30,9 @@
user-select: none;
contain: content;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
}
.button:active,

View File

@ -10,6 +10,8 @@
width: calc(100% - #{($card-ios-margin-end + $card-ios-margin-start)});
font-family: $card-ios-font-family;
font-size: $card-ios-font-size;
background: $card-ios-background-color;

View File

@ -27,6 +27,9 @@ $card-ios-box-shadow: 0 16px 42px $card-ios-box-shadow-color !d
/// @prop - Border radius of the card
$card-ios-border-radius: 14px !default;
/// @prop - Font family of the card
$card-ios-font-family: $font-family-ios-base !default;
/// @prop - Font size of the card
$card-ios-font-size: 14px !default;

View File

@ -10,6 +10,8 @@
width: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
font-family: $card-md-font-family;
font-size: $card-md-font-size;
background: $card-md-background-color;

View File

@ -27,6 +27,9 @@ $card-md-border-radius: 2px !default;
/// @prop - Font size of the card
$card-md-font-size: 14px !default;
/// @prop - Font family of the card
$card-md-font-family: $font-family-md-base !default;
/// @prop - Line height of the card
$card-md-line-height: 1.5 !default;

View File

@ -11,6 +11,8 @@
height: $chip-ios-height;
font-family: $chip-ios-font-family;
font-size: $chip-ios-font-size;
line-height: $chip-ios-height;
color: $chip-ios-text-color;

View File

@ -21,6 +21,9 @@ $chip-ios-height: 32px !default;
/// @prop - Border radius of the chip
$chip-ios-border-radius: 16px !default;
/// @prop - Font family of the chip
$chip-ios-font-family: $font-family-ios-base !default;
/// @prop - Font size of the chip
$chip-ios-font-size: 13px !default;

View File

@ -11,6 +11,8 @@
height: $chip-md-height;
font-family: $chip-md-font-family;
font-size: $chip-md-font-size;
line-height: $chip-md-height;
color: $chip-md-text-color;

View File

@ -21,6 +21,9 @@ $chip-md-height: 32px !default;
/// @prop - Border radius of the chip
$chip-md-border-radius: 16px !default;
/// @prop - Font family of the chip
$chip-md-font-family: $font-family-md-base !default;
/// @prop - Font size of the chip
$chip-md-font-size: 13px !default;

View File

@ -5,6 +5,8 @@
// --------------------------------------------------
.content-ios {
font-family: $content-ios-font-family;
color: $text-ios-color;
background-color: $background-ios-color;
}

View File

@ -3,6 +3,9 @@
// iOS Content
// --------------------------------------------------
/// @prop - Font family of the content
$content-ios-font-family: $font-family-ios-base !default;
/// @prop - Background color of the outer content
$content-ios-outer-background: #efeff4 !default;

View File

@ -5,6 +5,8 @@
// --------------------------------------------------
.content-md {
font-family: $content-md-font-family;
color: $text-md-color;
background-color: $background-md-color;
}

View File

@ -2,3 +2,6 @@
// Material Design Content
// --------------------------------------------------
/// @prop - Font family of the content
$content-md-font-family: $font-family-md-base !default;

View File

@ -6,6 +6,8 @@
.datetime-ios {
@include padding($datetime-ios-padding-top, $datetime-ios-padding-end, $datetime-ios-padding-bottom, $datetime-ios-padding-start);
font-family: $datetime-ios-font-family;
}
.datetime-ios .datetime-placeholder {

View File

@ -17,5 +17,8 @@ $datetime-ios-padding-bottom: $item-ios-padding-bottom !default;
/// @prop - Padding start of the datetime
$datetime-ios-padding-start: $item-ios-padding-start !default;
/// @prop - Font family of the datetime
$datetime-ios-font-family: $font-family-ios-base !default;
/// @prop - Color of the datetime placeholder
$datetime-ios-placeholder-color: #999 !default;

View File

@ -6,6 +6,8 @@
.datetime-md {
@include padding($datetime-md-padding-top, $datetime-md-padding-end, $datetime-md-padding-bottom, $datetime-md-padding-start);
font-family: $datetime-md-font-family;
}
.datetime-md .datetime-placeholder {

View File

@ -17,5 +17,8 @@ $datetime-md-padding-bottom: $item-md-padding-bottom !default;
/// @prop - Padding start of the datetime
$datetime-md-padding-start: $item-md-padding-start !default;
/// @prop - Font family of the datetime
$datetime-md-font-family: $font-family-md-base !default;
/// @prop - Color of the datetime placeholder
$datetime-md-placeholder-color: #999 !default;

View File

@ -4,10 +4,26 @@
// --------------------------------------------------
ion-datetime {
position: relative;
display: flex;
overflow: hidden;
}
.datetime-cover {
@include position(0, null, null, 0);
position: absolute;
width: 100%;
height: 100%;
border: 0;
background: transparent;
cursor: pointer;
}
.datetime-text {
overflow: hidden;
@ -35,3 +51,7 @@ ion-datetime {
width: 100%;
}
.item .datetime {
position: static;
}

View File

@ -596,7 +596,7 @@ export class Datetime {
aria-labelledby={this.labelId}
aria-disabled={this.disabled ? 'true' : false}
onClick={this.open.bind(this)}
class='item-cover'>
class='datetime-cover'>
</button>
];
}

View File

@ -0,0 +1,9 @@
@import "./grid";
@import "./grid.ios.vars";
// iOS Grid
// --------------------------------------------------
.grid-ios {
font-family: $grid-ios-font-family;
}

View File

@ -0,0 +1,7 @@
@import "../../themes/ionic.globals.ios";
// iOS Grid
// --------------------------------------------------
/// @prop - Font family of the grid
$grid-ios-font-family: $font-family-ios-base !default;

View File

@ -0,0 +1,9 @@
@import "./grid";
@import "./grid.md.vars";
// Material Design Grid
// --------------------------------------------------
.grid-md {
font-family: $grid-md-font-family;
}

View File

@ -0,0 +1,7 @@
@import "../../themes/ionic.globals.md";
// Material Design Grid
// --------------------------------------------------
/// @prop - Font family of the grid
$grid-md-font-family: $font-family-md-base !default;

View File

@ -3,6 +3,12 @@ import { Component } from '@stencil/core';
@Component({
tag: 'ion-grid',
styleUrl: 'grid.scss'
styleUrls: {
ios: 'grid.ios.scss',
md: 'grid.md.scss'
},
host: {
theme: 'grid'
}
})
export class Grid {}

View File

@ -4,11 +4,14 @@
// iOS Input
// --------------------------------------------------
.text-input-ios {
.native-input-ios {
@include margin($input-ios-margin-top, $input-ios-margin-end, $input-ios-margin-bottom, $input-ios-margin-start);
@include padding(0);
width: calc(100% - #{($input-ios-margin-end + $input-ios-margin-start)});
font-family: $input-ios-font-family;
font-size: $input-ios-font-size;
}
@ -85,8 +88,8 @@
// iOS Stacked & Floating Inputs
// --------------------------------------------------
.item-ios.item-label-stacked .text-input,
.item-ios.item-label-floating .text-input {
.item-ios.item-label-stacked .native-input,
.item-ios.item-label-floating .native-input {
@include margin(8px, null, 8px, 0);
width: calc(100% - #{$input-ios-margin-end});
@ -101,8 +104,7 @@
// iOS Input After Label
// --------------------------------------------------
.label-ios + ion-input .text-input,
.label-ios + ion-textarea .text-input,
.label-ios + ion-input .native-input,
.label-ios + .input + .cloned-input {
@include margin-horizontal($input-ios-by-label-margin-start, null);
}
@ -114,11 +116,11 @@
position: relative;
}
.input-ios[clear-input] .text-input {
.input-ios[clear-input] .native-input {
@include padding-horizontal(null, $input-ios-input-clear-padding-end);
}
.input-ios .text-input-clear-icon {
.input-ios .input-clear-icon {
@include position-horizontal(null, 0);
@include svg-background-image($input-ios-input-clear-icon-svg);

View File

@ -5,6 +5,12 @@
// iOS Input
// --------------------------------------------------
/// @prop - Font family of the input
$input-ios-font-family: $font-family-ios-base !default;
/// @prop - Font size of the input
$input-ios-font-size: inherit !default;
/// @prop - Margin top of the input
$input-ios-margin-top: $item-ios-padding-top !default;

View File

@ -4,11 +4,14 @@
// Material Design Input
// --------------------------------------------------
.text-input-md {
.native-input-md {
@include margin($input-md-margin-top, $input-md-margin-end, $input-md-margin-bottom, $input-md-margin-start);
@include padding(0);
width: calc(100% - #{$input-md-margin-end} - #{$input-md-margin-start});
font-family: $input-md-font-family;
font-size: $input-md-font-size;
}
@ -86,8 +89,8 @@
// Material Design Stacked & Floating Inputs
// --------------------------------------------------
.item-label-stacked .text-input-md,
.item-label-floating .text-input-md {
.item-label-stacked .native-input-md,
.item-label-floating .native-input-md {
@include margin(8px, null, 8px, 0);
width: calc(100% - #{$input-md-margin-end});
@ -101,11 +104,11 @@
position: relative;
}
.input-md[clear-input] .text-input {
.input-md[clear-input] .native-input {
@include padding-horizontal(null, $input-md-input-clear-icon-width);
}
.input-md .text-input-clear-icon {
.input-md .native-input-clear-icon {
@include position-horizontal(null, 0);
@include svg-background-image($input-md-input-clear-icon-svg);

View File

@ -5,6 +5,12 @@
// Material Design Input
// --------------------------------------------------
/// @prop - Font family of the input
$input-md-font-family: $font-family-md-base !default;
/// @prop - Font size of the input
$input-md-font-size: inherit !default;
/// @prop - Margin top of the input
$input-md-margin-top: $item-md-padding-top !default;

View File

@ -3,8 +3,7 @@
// Input
// --------------------------------------------------
ion-input,
ion-textarea {
ion-input {
position: relative;
display: block;
@ -13,24 +12,18 @@ ion-textarea {
width: 100%;
}
.item-input ion-input,
.item-input ion-textarea {
position: static;
}
// Textarea Within An Item
// Input Within An Item
// --------------------------------------------------
.item.item-textarea {
align-items: stretch;
.item-input ion-input {
position: static;
}
// Native Text Input
// --------------------------------------------------
.text-input {
.native-input {
@include placeholder($input-placeholder-color);
@include appearance(none);
@include border-radius(0);
@ -47,22 +40,14 @@ ion-textarea {
background: transparent;
}
textarea.text-input {
display: block;
}
.text-input[disabled] {
.native-input[disabled] {
opacity: .4;
}
input.text-input:-webkit-autofill {
input.native-input:-webkit-autofill {
background-color: transparent;
}
.platform-mobile textarea.text-input {
resize: none;
}
// Input Cover: Unfocused
// --------------------------------------------------
@ -100,7 +85,6 @@ input.text-input:-webkit-autofill {
}
.item-input-has-focus input,
.item-input-has-focus textarea,
.item-input-has-focus a,
.item-input-has-focus button {
pointer-events: auto;
@ -131,7 +115,7 @@ input.text-input:-webkit-autofill {
// Clear Input Icon
// --------------------------------------------------
.text-input-clear-icon {
.input-clear-icon {
@include margin(0);
@include padding(0);
@include background-position(center);
@ -145,6 +129,6 @@ input.text-input:-webkit-autofill {
background-repeat: no-repeat;
}
.item-input-has-focus.item-input-has-value .text-input-clear-icon {
.item-input-has-focus.item-input-has-value .input-clear-icon {
display: block;
}

View File

@ -300,7 +300,7 @@ export class Input implements InputComponent {
}
render() {
const themedClasses = createThemedClasses(this.mode, this.color, 'text-input');
const themedClasses = createThemedClasses(this.mode, this.color, 'native-input');
// TODO aria-labelledby={this.item.labelId}
return [
@ -338,7 +338,7 @@ export class Input implements InputComponent {
/>,
<button
hidden={this.clearInput !== true}
class='text-input-clear-icon'
class='input-clear-icon'
onClick={this.clearTextInput.bind(this)}
onMouseDown={this.clearTextInput.bind(this)}>
</button>

View File

@ -11,7 +11,9 @@
position: relative;
font-size: $item-ios-body-text-font-size;
font-family: $item-ios-font-family;
font-size: $item-ios-font-size;
color: $list-ios-text-color;
background-color: $list-ios-background-color;
transition: background-color 200ms linear;

View File

@ -3,8 +3,11 @@
// iOS Item
// --------------------------------------------------
/// @prop - Font size of the item text
$item-ios-body-text-font-size: 17px !default;
/// @prop - Font family of the item
$item-ios-font-family: $font-family-ios-base !default;
/// @prop - Font size of the item
$item-ios-font-size: 17px !default;
/// @prop - Margin top of the item paragraph
$item-ios-paragraph-margin-top: 0 !default;

View File

@ -9,6 +9,7 @@
position: relative;
font-family: $item-md-font-family;
font-size: $item-md-font-size;
font-weight: normal;
text-transform: none;

View File

@ -3,15 +3,12 @@
// Material Design Item
// --------------------------------------------------
/// @prop - Font size of the item text
$item-md-body-text-font-size: 14px !default;
/// @prop - line height of the item text
$item-md-body-text-line-height: 1.5 !default;
/// @prop - Color of the item paragraph
$item-md-paragraph-text-color: #666 !default;
/// @prop - Font family of the item
$item-md-font-family: $font-family-md-base !default;
/// @prop - Font size of the item
$item-md-font-size: 16px !default;

View File

@ -6,6 +6,8 @@
.label-ios {
@include margin($label-ios-margin-top, $label-ios-margin-end, $label-ios-margin-bottom, $label-ios-margin-start);
font-family: $label-ios-font-family;
}

View File

@ -5,6 +5,9 @@
// iOS Label
// --------------------------------------------------
/// @prop - Font family of the label
$label-ios-font-family: $font-family-ios-base !default;
/// @prop - Text color of the label by an input, select, or datetime
$label-ios-text-color: null !default;

View File

@ -6,6 +6,8 @@
.label-md {
@include margin($label-md-margin-top, $label-md-margin-end, $label-md-margin-bottom, $label-md-margin-start);
font-family: $label-md-font-family;
}
[text-wrap] .label-md {

View File

@ -5,6 +5,9 @@
// Material Design Label
// --------------------------------------------------
/// @prop - Font family of the label
$label-md-font-family: $font-family-md-base !default;
/// @prop - Text color of the label by an input, select, or datetime
$label-md-text-color: #999 !default;
@ -24,7 +27,7 @@ $label-md-margin-bottom: $item-md-padding-bottom !default;
$label-md-margin-start: 0 !default;
/// @prop - Font size of the label when the text wraps
$label-md-text-wrap-font-size: $item-md-body-text-font-size !default;
$label-md-text-wrap-font-size: 14px !default;
/// @prop - Line height of the label when the text wraps
$label-md-text-wrap-line-height: $item-md-body-text-line-height !default;
$label-md-text-wrap-line-height: 1.5 !default;

View File

@ -4,6 +4,10 @@
// iOS Picker
// --------------------------------------------------
.picker-ios {
font-family: $picker-ios-font-family;
}
.picker-ios .picker-wrapper {
height: $picker-ios-height;

View File

@ -3,6 +3,9 @@
// iOS Picker
// --------------------------------------------------
/// @prop - Font family of the picker
$picker-ios-font-family: $font-family-ios-base !default;
/// @prop - Height of the picker wrapper
$picker-ios-height: 260px !default;

View File

@ -4,6 +4,10 @@
// Material Design Picker
// --------------------------------------------------
.picker-md {
font-family: $picker-md-font-family;
}
.picker-md .picker-wrapper {
height: $picker-md-height;

View File

@ -3,6 +3,9 @@
// Material Design Picker
// --------------------------------------------------
/// @prop - Font family of the picker
$picker-md-font-family: $font-family-md-base !default;
/// @prop - Height of the picker wrapper
$picker-md-height: 260px !default;

View File

@ -14,6 +14,9 @@ ion-picker {
height: $picker-width;
contain: strict;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.picker-toolbar {
@ -121,6 +124,8 @@ ion-picker {
width: 100%;
border: 0;
text-overflow: ellipsis;
white-space: nowrap;
@ -162,3 +167,8 @@ ion-picker {
pointer-events: none;
}
.picker-button {
border: 0;
font-family: inherit;
}

View File

@ -4,6 +4,8 @@
// --------------------------------------------------
ion-radio {
box-sizing: border-box;
position: relative;
display: inline-block;
}
@ -23,3 +25,7 @@ ion-radio input {
-moz-appearance: none;
appearance: none;
}
ion-radio .radio-icon {
box-sizing: border-box;
}

View File

@ -1,3 +1,4 @@
@import "./range";
@import "./range.ios.vars";
// iOS Range
@ -5,6 +6,8 @@
.range-ios {
@include padding($range-ios-padding-vertical, $range-ios-padding-horizontal);
font-family: $range-ios-font-family;
}
.range-ios [range-left] {

View File

@ -3,6 +3,9 @@
// iOS Range
// --------------------------------------------------
/// @prop - Padding top/bottom of the range
$range-ios-font-family: $font-family-ios-base !default;
/// @prop - Padding top/bottom of the range
$range-ios-padding-vertical: 8px !default;

View File

@ -6,6 +6,8 @@
.range-md {
@include padding($range-md-padding-vertical, $range-md-padding-horizontal);
font-family: $range-md-font-family;
}
.range-md [slot="range-start"] {

View File

@ -3,6 +3,9 @@
// Material Design Range
// --------------------------------------------------
/// @prop - Font family of the range
$range-md-font-family: $font-family-md-base !default;
/// @prop - Padding top/bottom of the range
$range-md-padding-vertical: 8px !default;

View File

@ -51,3 +51,7 @@ ion-range .range-slider {
cursor: pointer;
}
.range-pin {
box-sizing: border-box;
}

View File

@ -8,6 +8,8 @@
@include padding($searchbar-ios-padding-top, $searchbar-ios-padding-end, $searchbar-ios-padding-bottom, $searchbar-ios-padding-start);
min-height: $searchbar-ios-min-height;
font-family: $searchbar-ios-font-family;
}

View File

@ -15,6 +15,9 @@ $searchbar-ios-padding-bottom: $searchbar-ios-padding-top !default;
/// @prop - Padding start of the searchbar
$searchbar-ios-padding-start: $searchbar-ios-padding-end !default;
/// @prop - Font family of the searchbar
$searchbar-ios-font-family: $font-family-ios-base !default;
/// @prop - Minimum height of the searchbar
$searchbar-ios-min-height: 44px !default;

View File

@ -7,7 +7,9 @@
.searchbar-md {
@include padding($searchbar-md-padding-top, $searchbar-md-padding-end, $searchbar-md-padding-bottom, $searchbar-md-padding-start);
background: $searchbar-md-background-color;
font-family: $searchbar-md-font-family;
background: $searchbar-md-background;
}

View File

@ -15,8 +15,11 @@ $searchbar-md-padding-bottom: $searchbar-md-padding-top !default;
/// @prop - Padding start of the searchbar
$searchbar-md-padding-start: $searchbar-md-padding-end !default;
/// @prop - Font family of the searchbar
$searchbar-md-font-family: $font-family-md-base !default;
/// @prop - Background of the searchbar
$searchbar-md-background-color: inherit !default;
$searchbar-md-background: inherit !default;
/// @prop - Color of the searchbar input search icon
$searchbar-md-input-search-icon-color: #5b5b5b !default;

View File

@ -4,6 +4,8 @@
// --------------------------------------------------
ion-searchbar {
box-sizing: border-box;
position: relative;
display: flex;

View File

@ -4,6 +4,10 @@
// iOS Segment
// --------------------------------------------------
.segment-ios {
font-family: $segment-ios-font-family;
}
.segment-ios ion-segment-button {
display: flex;

View File

@ -3,6 +3,12 @@
// iOS Segment
// --------------------------------------------------
/// @prop - Background of the segment button
$segment-ios-font-family: $font-family-ios-base !default;
// TODO either move to button or rename
// ---------------------------------------------
/// @prop - Background of the segment button
$segment-button-ios-background-color: transparent !default;

View File

@ -4,6 +4,10 @@
// Material Design Segment
// --------------------------------------------------
.segment-md {
font-family: $segment-md-font-family;
}
.segment-md ion-segment-button {
display: flex;

View File

@ -3,6 +3,9 @@
// Material Design Segment
// --------------------------------------------------
/// @prop - Background of the segment button
$segment-md-font-family: $font-family-md-base !default;
/// @prop - Text color of the activated segment button
$segment-button-md-text-color-activated: $toolbar-md-active-color !default;

View File

@ -14,6 +14,7 @@ ion-segment {
}
.segment-button {
@include border-radius(0);
@include margin-horizontal(0);
@include text-align(center);

View File

@ -6,6 +6,8 @@
.select-ios {
@include padding($select-ios-padding-top, $select-ios-padding-end, $select-ios-padding-bottom, $select-ios-padding-start);
font-family: $select-ios-font-family;
}
.select-ios .select-placeholder {
@ -43,4 +45,4 @@
.item-label-stacked .select-ios,
.item-label-floating .select-ios {
@include padding(8px, null, 8px, 0);
}
}

View File

@ -17,6 +17,9 @@ $select-ios-padding-bottom: $item-ios-padding-bottom !default;
/// @prop - Padding start of the select
$select-ios-padding-start: $item-ios-padding-start !default;
/// @prop - Font family of the select
$select-ios-font-family: $font-family-ios-base !default;
/// @prop - Color of the select icon
$select-ios-icon-color: #999 !default;

View File

@ -6,6 +6,8 @@
.select-md {
@include padding($select-md-padding-top, $select-md-padding-end, $select-md-padding-bottom, $select-md-padding-start);
font-family: $select-md-font-family;
}
.select-md .select-placeholder {

View File

@ -17,6 +17,9 @@ $select-md-padding-bottom: $item-md-padding-bottom !default;
/// @prop - Padding start of the select
$select-md-padding-start: $item-md-padding-start !default;
/// @prop - Font family of the select
$select-md-font-family: $font-family-md-base !default;
/// @prop - Color of the select icon
$select-md-icon-color: #999 !default;

View File

@ -9,9 +9,28 @@ ion-select {
display: flex;
overflow: hidden;
}
.item .select {
position: static;
max-width: 45%;
}
.select-cover {
@include position(0, null, null, 0);
position: absolute;
width: 100%;
height: 100%;
border: 0;
background: transparent;
cursor: pointer;
}
.select-text {
overflow: hidden;
@ -48,5 +67,5 @@ ion-select {
}
.select-key button {
border: 2px solid blue;
}
border: 2px solid #5e9ed6;
}

View File

@ -471,8 +471,8 @@ export class Select {
this.styleTmr = setTimeout(() => {
this.ionStyle.emit({
'select': true,
'input-has-value': this.hasValue(),
'select-disabled': this.disabled
'select-disabled': this.disabled,
'input-has-value': this.hasValue()
});
});
}
@ -519,7 +519,7 @@ export class Select {
onKeyUp={this.onKeyUp.bind(this)}
onFocus={this.onFocus.bind(this)}
onBlur={this.onBlur.bind(this)}
class='item-cover'>
class='select-cover'>
<slot></slot>
</button>,
<input type='hidden' name={this.name} value={this.value}/>

View File

@ -1,4 +1,4 @@
@import "../../themes/ionic.globals";
@import "./slides.vars";
@import "./slides-import";
// Slides

View File

@ -0,0 +1,6 @@
@import "../../themes/ionic.globals";
// Slides
// --------------------------------------------------

View File

@ -0,0 +1,42 @@
@import "./textarea";
@import "./textarea.ios.vars";
// iOS Textarea
// --------------------------------------------------
.native-textarea-ios {
@include margin($textarea-ios-margin-top, $textarea-ios-margin-end, $textarea-ios-margin-bottom, $textarea-ios-margin-start);
@include padding(0);
width: calc(100% - #{($textarea-ios-margin-end + $textarea-ios-margin-start)});
font-family: $textarea-ios-font-family;
font-size: $textarea-ios-font-size;
}
// iOS Stacked & Floating Textarea
// --------------------------------------------------
.item-ios.item-label-stacked .native-textarea,
.item-ios.item-label-floating .native-textarea {
@include margin(8px, null, 8px, 0);
width: calc(100% - #{$textarea-ios-margin-end});
}
.item-ios.item-label-stacked .label-ios + .input + .cloned-input,
.item-ios.item-label-floating .label-ios + .input + .cloned-input {
@include margin-horizontal(0, null);
}
// iOS Textarea After Label
// --------------------------------------------------
.label-ios + ion-textarea .native-textarea,
.label-ios + .input + .cloned-input {
@include margin-horizontal($textarea-ios-by-label-margin-start, null);
width: calc(100% - (#{$item-ios-padding-end} / 2) - #{$item-ios-padding-start});
}

View File

@ -0,0 +1,27 @@
@import "../../themes/ionic.globals.ios";
@import "../item/item.ios.vars";
// iOS Textarea
// --------------------------------------------------
/// @prop - Margin top of the textarea
$textarea-ios-margin-top: $item-ios-padding-top !default;
/// @prop - Margin end of the textarea
$textarea-ios-margin-end: ($item-ios-padding-end / 2) !default;
/// @prop - Margin bottom of the textarea
$textarea-ios-margin-bottom: $item-ios-padding-bottom !default;
/// @prop - Margin start of the textarea
$textarea-ios-margin-start: 0 !default;
/// @prop - Font family of the textarea
$textarea-ios-font-family: $font-family-ios-base !default;
/// @prop - Font size of the textarea
$textarea-ios-font-size: inherit !default;
/// @prop - Margin start of the textarea when it is after a label
$textarea-ios-by-label-margin-start: $item-ios-padding-start !default;

View File

@ -0,0 +1,26 @@
@import "./textarea";
@import "./textarea.md.vars";
// Material Design Textarea
// --------------------------------------------------
.native-textarea-md {
@include margin($textarea-md-margin-top, $textarea-md-margin-end, $textarea-md-margin-bottom, $textarea-md-margin-start);
@include padding(0);
width: calc(100% - #{$textarea-md-margin-end} - #{$textarea-md-margin-start});
font-family: $textarea-md-font-family;
font-size: $textarea-md-font-size;
}
// Material Design Stacked & Floating Textarea
// --------------------------------------------------
.item-label-stacked .native-textarea-md,
.item-label-floating .native-textarea-md {
@include margin(8px, null, 8px, 0);
width: calc(100% - #{$textarea-md-margin-end});
}

View File

@ -0,0 +1,24 @@
@import "../../themes/ionic.globals.md";
@import "../item/item.md.vars";
// Material Design Textarea
// --------------------------------------------------
/// @prop - Font family of the textarea
$textarea-md-font-family: $font-family-md-base !default;
/// @prop - Font size of the textarea
$textarea-md-font-size: inherit !default;
/// @prop - Margin top of the textarea
$textarea-md-margin-top: $item-md-padding-top !default;
/// @prop - Margin end of the textarea
$textarea-md-margin-end: ($item-md-padding-end / 2) !default;
/// @prop - Margin bottom of the textarea
$textarea-md-margin-bottom: $item-md-padding-bottom !default;
/// @prop - Margin start of the textarea
$textarea-md-margin-start: ($item-md-padding-start / 2) !default;

View File

@ -0,0 +1,82 @@
@import "./textarea.vars";
// Textarea
// --------------------------------------------------
ion-textarea {
position: relative;
display: block;
flex: 1;
width: 100%;
}
.item-input ion-textarea {
position: static;
}
// Textarea Within An Item
// --------------------------------------------------
.item.item-textarea {
align-items: stretch;
}
// Native Textarea
// --------------------------------------------------
.native-textarea {
@include placeholder($textarea-placeholder-color);
@include appearance(none);
@include border-radius(0);
display: block;
flex: 1;
width: 92%;
width: calc(100% - 10px);
border: 0;
font-size: inherit;
background: transparent;
}
.native-textarea[disabled] {
opacity: .4;
}
.platform-mobile .native-textarea {
resize: none;
}
.item-input-has-focus a,
.item-input-has-focus button,
.item-input-has-focus textarea {
pointer-events: auto;
}
// Input Cover: Unfocused
// --------------------------------------------------
// The input cover is the div that actually receives the
// tap/click event when scroll assist is configured to true.
// This make it so the native input element is not clickable.
// This will only show when the scroll assist is configured
// otherwise the .input-cover will not be rendered at all
// The input cover is not clickable when the input is disabled
.textarea-cover {
@include position(0, null, null, 0);
position: absolute;
width: 100%;
height: 100%;
}
.textarea[disabled] .textarea-cover {
pointer-events: none;
}

View File

@ -12,13 +12,12 @@ import { TextareaComponent } from '../input/input-base';
// right now we're cheating by knowing ion-input
// css is bundled with ion-textarea
// styleUrls: {
// ios: 'input.ios.scss',
// md: 'input.md.scss'
// },
styleUrls: {
ios: 'textarea.ios.scss',
md: 'textarea.md.scss'
},
host: {
theme: 'input'
theme: 'textarea'
}
})
export class Textarea implements TextareaComponent {
@ -243,7 +242,7 @@ export class Textarea implements TextareaComponent {
}
render() {
const themedClasses = createThemedClasses(this.mode, this.color, 'text-input');
const themedClasses = createThemedClasses(this.mode, this.color, 'native-textarea');
// TODO aria-labelledby={this.item.labelId}
return (

View File

@ -0,0 +1,6 @@
@import "../../themes/ionic.globals";
// Textarea
// --------------------------------------------------
$textarea-placeholder-color: #999 !default;

View File

@ -7,3 +7,8 @@
ion-thumbnail {
display: block;
}
ion-thumbnail img {
width: 100%;
height: 100%;
}

View File

@ -4,6 +4,10 @@
// iOS Toast
// --------------------------------------------------
.toast-ios {
font-family: $toast-ios-font-family;
}
.toast-ios .toast-wrapper {
@include position-horizontal(10px, 10px);
@include margin(auto);

View File

@ -3,6 +3,9 @@
// iOS Toast
// --------------------------------------------------
/// @prop - Font family of the toast
$toast-ios-font-family: $font-family-ios-base !default;
/// @prop - Background of the toast wrapper
$toast-ios-background: rgba(237, 237, 239, 1) !default;

View File

@ -4,6 +4,10 @@
// Material Design Toast
// --------------------------------------------------
.toast-md {
font-family: $toast-md-font-family;
}
.toast-md .toast-wrapper {
@include position-horizontal(0, 0);
@include margin(auto);

View File

@ -3,6 +3,9 @@
// Material Design Toast
// --------------------------------------------------
/// @prop - Font family of the toast
$toast-md-font-family: $font-family-md-base !default;
/// @prop - Background of the toast wrapper
$toast-md-background: #333 !default;

View File

@ -9,6 +9,8 @@
min-height: $toolbar-ios-height;
font-family: $toolbar-ios-font-family;
@media screen and (orientation: landscape) {
@include safe-area-padding-horizontal($toolbar-ios-padding);
}

View File

@ -15,6 +15,9 @@ $toolbar-order-ios: (
menu-toggle-end: 7,
);
/// @prop - Font family of the toolbar
$toolbar-ios-font-family: $font-family-ios-base !default;
/// @prop - Font size of the toolbar button
$toolbar-ios-button-font-size: 17px !default;

Some files were not shown because too many files have changed in this diff Show More