mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-24 14:58:36 +08:00
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
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -4,6 +4,10 @@
|
||||
// Material Design Action Sheet
|
||||
// --------------------------------------------------
|
||||
|
||||
.action-sheet-md {
|
||||
font-family: $action-sheet-md-font-family;
|
||||
}
|
||||
|
||||
// Material Design Action Sheet Title
|
||||
// -----------------------------------------
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -31,6 +31,8 @@ ion-action-sheet {
|
||||
|
||||
.action-sheet-button {
|
||||
width: $action-sheet-width;
|
||||
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.action-sheet-container {
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -19,6 +19,9 @@ ion-badge {
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
|
||||
font-smoothing: antialiased;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
contain: content;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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
|
||||
|
||||
@ -30,6 +30,9 @@
|
||||
user-select: none;
|
||||
|
||||
contain: content;
|
||||
|
||||
font-smoothing: antialiased;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.button:active,
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -5,6 +5,8 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
.content-ios {
|
||||
font-family: $content-ios-font-family;
|
||||
|
||||
color: $text-ios-color;
|
||||
background-color: $background-ios-color;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -5,6 +5,8 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
.content-md {
|
||||
font-family: $content-md-font-family;
|
||||
|
||||
color: $text-md-color;
|
||||
background-color: $background-md-color;
|
||||
}
|
||||
|
||||
@ -2,3 +2,6 @@
|
||||
|
||||
// Material Design Content
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font family of the content
|
||||
$content-md-font-family: $font-family-md-base !default;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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>
|
||||
];
|
||||
}
|
||||
|
||||
9
packages/core/src/components/grid/grid.ios.scss
Normal file
9
packages/core/src/components/grid/grid.ios.scss
Normal file
@ -0,0 +1,9 @@
|
||||
@import "./grid";
|
||||
@import "./grid.ios.vars";
|
||||
|
||||
// iOS Grid
|
||||
// --------------------------------------------------
|
||||
|
||||
.grid-ios {
|
||||
font-family: $grid-ios-font-family;
|
||||
}
|
||||
7
packages/core/src/components/grid/grid.ios.vars.scss
Normal file
7
packages/core/src/components/grid/grid.ios.vars.scss
Normal 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;
|
||||
9
packages/core/src/components/grid/grid.md.scss
Normal file
9
packages/core/src/components/grid/grid.md.scss
Normal file
@ -0,0 +1,9 @@
|
||||
@import "./grid";
|
||||
@import "./grid.md.vars";
|
||||
|
||||
// Material Design Grid
|
||||
// --------------------------------------------------
|
||||
|
||||
.grid-md {
|
||||
font-family: $grid-md-font-family;
|
||||
}
|
||||
7
packages/core/src/components/grid/grid.md.vars.scss
Normal file
7
packages/core/src/components/grid/grid.md.vars.scss
Normal 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;
|
||||
@ -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 {}
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
|
||||
position: relative;
|
||||
|
||||
font-family: $item-md-font-family;
|
||||
font-size: $item-md-font-size;
|
||||
font-weight: normal;
|
||||
text-transform: none;
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -4,6 +4,10 @@
|
||||
// iOS Picker
|
||||
// --------------------------------------------------
|
||||
|
||||
.picker-ios {
|
||||
font-family: $picker-ios-font-family;
|
||||
}
|
||||
|
||||
.picker-ios .picker-wrapper {
|
||||
height: $picker-ios-height;
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -4,6 +4,10 @@
|
||||
// Material Design Picker
|
||||
// --------------------------------------------------
|
||||
|
||||
.picker-md {
|
||||
font-family: $picker-md-font-family;
|
||||
}
|
||||
|
||||
.picker-md .picker-wrapper {
|
||||
height: $picker-md-height;
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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] {
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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"] {
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -51,3 +51,7 @@ ion-range .range-slider {
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.range-pin {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -4,6 +4,8 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-searchbar {
|
||||
box-sizing: border-box;
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
|
||||
@ -4,6 +4,10 @@
|
||||
// iOS Segment
|
||||
// --------------------------------------------------
|
||||
|
||||
.segment-ios {
|
||||
font-family: $segment-ios-font-family;
|
||||
}
|
||||
|
||||
.segment-ios ion-segment-button {
|
||||
display: flex;
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -4,6 +4,10 @@
|
||||
// Material Design Segment
|
||||
// --------------------------------------------------
|
||||
|
||||
.segment-md {
|
||||
font-family: $segment-md-font-family;
|
||||
}
|
||||
|
||||
.segment-md ion-segment-button {
|
||||
display: flex;
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -14,6 +14,7 @@ ion-segment {
|
||||
}
|
||||
|
||||
.segment-button {
|
||||
@include border-radius(0);
|
||||
@include margin-horizontal(0);
|
||||
@include text-align(center);
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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}/>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
@import "./slides.vars";
|
||||
@import "./slides-import";
|
||||
|
||||
// Slides
|
||||
|
||||
6
packages/core/src/components/slides/slides.vars.scss
Normal file
6
packages/core/src/components/slides/slides.vars.scss
Normal file
@ -0,0 +1,6 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
// Slides
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
42
packages/core/src/components/textarea/textarea.ios.scss
Normal file
42
packages/core/src/components/textarea/textarea.ios.scss
Normal 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});
|
||||
}
|
||||
27
packages/core/src/components/textarea/textarea.ios.vars.scss
Normal file
27
packages/core/src/components/textarea/textarea.ios.vars.scss
Normal 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;
|
||||
26
packages/core/src/components/textarea/textarea.md.scss
Normal file
26
packages/core/src/components/textarea/textarea.md.scss
Normal 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});
|
||||
}
|
||||
24
packages/core/src/components/textarea/textarea.md.vars.scss
Normal file
24
packages/core/src/components/textarea/textarea.md.vars.scss
Normal 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;
|
||||
82
packages/core/src/components/textarea/textarea.scss
Normal file
82
packages/core/src/components/textarea/textarea.scss
Normal 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;
|
||||
}
|
||||
@ -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 (
|
||||
|
||||
6
packages/core/src/components/textarea/textarea.vars.scss
Normal file
6
packages/core/src/components/textarea/textarea.vars.scss
Normal file
@ -0,0 +1,6 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
// Textarea
|
||||
// --------------------------------------------------
|
||||
|
||||
$textarea-placeholder-color: #999 !default;
|
||||
@ -7,3 +7,8 @@
|
||||
ion-thumbnail {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ion-thumbnail img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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
Reference in New Issue
Block a user