javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(all): improve text customization

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-08-10 00:35:59 +02:00
parent 4ec038d507
commit 6e3e07bc8b
11 changed files with 44 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
angular/BREAKING.md
View File

@ -954,7 +954,7 @@ presentPopover(ev: any) {
async presentPopover(ev: any) {
const popover = await this.popoverController.create({
component: PopoverComponent,
ev: event,
event: event,
translucent: true
});
return await popover.present();

19
core/src/components/back-button/back-button.scss
View File

@ -8,6 +8,14 @@
color: #{current-color(base)};
pointer-events: all;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
text-transform: none;
white-space: nowrap;
font-kerning: none;
}
:host-context(.can-go-back > ion-header),
@ -16,6 +24,7 @@
}
.back-button-native {
@include text-inherit();
@include font-smoothing();
display: block;
@ -27,21 +36,11 @@
outline: none;
color: inherit;
line-height: 1;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
text-transform: none;
white-space: nowrap;
cursor: pointer;
user-select: none;
z-index: 0;
font-kerning: none;
appearance: none;
}

7
core/src/components/button/button.scss
View File

@ -21,6 +21,8 @@
user-select: none;
vertical-align: top; // the better option for most scenarios
vertical-align: -webkit-baseline-middle; // the best for those that support it
font-kerning: none;
}
:host([disabled]) {
@ -123,7 +125,6 @@
transition: var(--transition);
border-width: var(--border-width);
border-style: var(--border-style);
border-color: var(--border-color);
@ -139,11 +140,9 @@
cursor: pointer;
opacity: var(--opacity);
overflow: var(--overflow);
vertical-align: top; // the better option for most scenarios
vertical-align: -webkit-baseline-middle; // the best for those that support it
z-index: 0;
box-sizing: border-box;
font-kerning: none;
appearance: none;
}

21
core/src/components/fab-button/fab-button.scss
View File

@ -18,6 +18,13 @@
color: #{current-color(contrast)};
font-size: 14px;
text-align: center;
text-overflow: ellipsis;
text-transform: none;
white-space: nowrap;
font-kerning: none;
}
@ -26,6 +33,7 @@
}
.fab-button-native {
@include text-inherit();
@include border-radius(50%);
@include margin(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
@ -45,25 +53,14 @@
background: var(--background);
background-clip: padding-box;
color: inherit;
font-size: inherit;
font-weight: inherit;
line-height: var(--size);
text-align: center;
text-overflow: ellipsis;
text-transform: none;
white-space: nowrap;
box-shadow: var(--box-shadow);
contain: strict;
cursor: pointer;
overflow: hidden;
z-index: 0;
font-kerning: none;
appearance: none;
}
@ -86,8 +83,6 @@
flex-flow: row nowrap;
flex-shrink: 0;
align-items: center;
align-items: center;
justify-content: center;
justify-content: center;
height: 100%;

18
core/src/components/menu-button/menu-button.scss
View File

@ -7,9 +7,18 @@
pointer-events: all;
color: #{current-color(base)};
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
text-transform: none;
white-space: nowrap;
font-kerning: none;
}
button {
@include text-inherit();
@include margin(0);
@include padding(0);
@include font-smoothing();
@ -30,21 +39,12 @@ button {
outline: none;
background: transparent;
color: inherit;
line-height: 1;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
text-transform: none;
white-space: nowrap;
cursor: pointer;
user-select: none;
z-index: 0;
font-kerning: none;
appearance: none;
}

19
core/src/components/segment-button/segment-button.scss
View File

@ -11,6 +11,12 @@
--icon-size: 1em;
flex: 1;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
font-kerning: none;
}
:host(:first-of-type) .segment-button-native {
@ -30,6 +36,7 @@
}
.segment-button-native {
@include text-inherit();
@include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
@ -46,22 +53,10 @@
border-color: var(--border-color);
background: var(--background);
color: inherit;
font-size: inherit;
font-weight: inherit;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
text-transform: inherit;
white-space: nowrap;
contain: content;
cursor: pointer;
overflow: hidden;
font-kerning: none;
&:active,
&:focus {

4
core/src/components/textarea/textarea.scss
View File

@ -36,13 +36,14 @@
box-sizing: border-box;
background: var(--background);
color: var(--color);
}
:host(.ion-color) {
background: initial;
}
:host(.ion-color) .native-textarea {
:host(.ion-color) {
color: current-color(base);
}
@ -73,7 +74,6 @@
outline: none;
background: transparent;
color: var(--color);
box-sizing: border-box;
resize: none;

5
core/src/components/toast/toast.ios.scss
View File

@ -10,6 +10,7 @@
--color: #{$toast-ios-title-color};
font-family: $toast-ios-font-family;
font-size: $toast-ios-title-font-size;
}
.toast-ios .toast-wrapper {
@ -48,10 +49,6 @@
.toast-ios .toast-message {
@include padding($toast-ios-title-padding-top, $toast-ios-title-padding-end, $toast-ios-title-padding-bottom, $toast-ios-title-padding-start);
color: var(--color);
font-size: $toast-ios-title-font-size;
}
.toast-ios .toast-button {

7
core/src/components/toast/toast.md.scss
View File

@ -6,9 +6,10 @@
.toast-md {
--background: #{$toast-md-background};
--color: #{toast-md-title-color};
--color: #{$toast-md-title-color};
font-family: $toast-md-font-family;
font-size: $toast-md-title-font-size;
}
.toast-md .toast-wrapper {
@ -42,8 +43,4 @@
.toast-md .toast-message {
@include padding($toast-md-title-padding-top, $toast-md-title-padding-end, $toast-md-title-padding-bottom, $toast-md-title-padding-start);
color: var(--color);
font-size: $toast-md-title-font-size;
}

2
core/src/components/toast/toast.scss
View File

@ -18,6 +18,8 @@ ion-toast {
width: $toast-width;
height: $toast-width;
color: var(--color);
contain: strict;
z-index: $z-index-overlay;
pointer-events: none;

16
core/src/themes/ionic.mixins.scss
View File

@ -361,22 +361,6 @@
}
}
// Sets correct text align with support for old browsers
// @param {string} $direction - text direction
// @param {string} $decorator - !important
// ----------------------------------------------------------
@mixin text-align($direction, $decorator: null) {
@if $direction == start {
text-align: left;
text-align: start $decorator;
} @else if $direction == end {
text-align: right;
text-align: end $decorator;
} @else {
text-align: $direction $decorator;
}
}
// Add direction for all directions
// @param {string} $dir - Direction on LTR
@mixin direction($dir) {