EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-2567 ux: Seems that $core-text-input-md-show-highlight is not needed anymore

main
Pau Ferrer Ocaña 2018-09-04 16:57:31 +02:00
parent edf940f604
commit 7e4dbd736e
5 changed files with 4 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/app/app.ios.scss
View File

@ -59,71 +59,6 @@ ion-app.app-root.ios {
height: 100%;
}
// Highlights inside the input element.
@if ($core-text-input-ios-show-highlight) {
.card-ios, .list-ios {
// In order to get a 2px border we need to add an inset
// box-shadow 1px (this is to avoid the div resizing)
// The last item in a list has a border on the item, not the
// inner item, so add it to the item itself
.item-input.item-input-has-focus:last-child,
.item-input.input-has-focus:last-child {
@include ios-input-highlight($text-input-ios-highlight-color);
.item-inner ion-input {
box-shadow: none;
}
}
// Show the focus highlight when the input has focus
.item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child,
.item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child {
@include ios-input-highlight($text-input-ios-highlight-color-valid);
.item-inner ion-input {
box-shadow: none;
}
}
.item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus):last-child {
@include ios-input-highlight($text-input-ios-highlight-color-invalid);
.item-inner ion-input {
box-shadow: none;
}
}
}
.item-ios.item-input {
.item-inner {
border: 0;
}
&.item-block .item-inner ion-input {
border-bottom: $hairlines-width solid $list-border-color;
}
// TODO remove all uses of input-has-focus in v4
&.item-input-has-focus .item-inner ion-input,
&.input-has-focus .item-inner ion-input {
@include ios-input-highlight($text-input-ios-highlight-color);
}
// Show the valid highlight when it has the .ng-valid class and a value
&.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input,
&.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input {
@include ios-input-highlight($text-input-ios-highlight-color-valid);
}
// Show the invalid highlight when it has the invalid class and has been touched
&.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input {
@include ios-input-highlight($text-input-ios-highlight-color-invalid);
}
}
}
// Different levels of padding.
@for $i from 0 through 15 {
.core-padding-#{$i} {

65
src/app/app.md.scss
View File

@ -41,71 +41,6 @@ ion-app.app-root.md {
height: calc(100% - #{($navbar-md-height)});
}
// Highlights inside the input element.
@if ($core-text-input-md-show-highlight) {
.card-md, .list-md {
// In order to get a 2px border we need to add an inset
// box-shadow 1px (this is to avoid the div resizing)
// The last item in a list has a border on the item, not the
// inner item, so add it to the item itself
.item-input.item-input-has-focus:last-child,
.item-input.input-has-focus:last-child {
@include md-input-highlight($text-input-md-highlight-color);
.item-inner ion-input {
box-shadow: none;
}
}
.item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child,
.item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child {
@include md-input-highlight($text-input-md-highlight-color-valid);
.item-inner ion-input {
box-shadow: none;
}
}
.item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus):last-child {
@include md-input-highlight($text-input-md-highlight-color-invalid);
.item-inner ion-input {
box-shadow: none;
}
}
}
.item-md.item-input {
.item-inner {
border: 0;
}
&.item-block .item-inner ion-input {
border-bottom: 1px solid $list-border-color;
}
// TODO remove all uses of input-has-focus in v4
&.item-input-has-focus .item-inner ion-input,
&.input-has-focus .item-inner ion-input {
@include md-input-highlight($text-input-md-highlight-color);
}
// Show the valid highlight when it has the .ng-valid class and a value
// TODO remove all uses of input-has-focus in v4
// TODO remove all uses of input-has-value in v4
&.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input,
&.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input {
@include md-input-highlight($text-input-md-highlight-color-valid);
}
// Show the invalid highlight when it has the invalid class and has been touched
&.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input {
@include md-input-highlight($text-input-md-highlight-color-invalid);
}
}
}
// Different levels of padding.
@for $i from 0 through 15 {
.core-padding-#{$i} {

2
src/core/login/pages/site/site.html
View File

@ -14,7 +14,7 @@
<div text-center padding>
<img src="assets/img/login_logo.png" class="avatar-full login-logo" role="presentation">
</div>
<form ion-list no-lines [formGroup]="siteForm" (ngSubmit)="connect(siteForm.value.siteUrl)">
<form ion-list [formGroup]="siteForm" (ngSubmit)="connect(siteForm.value.siteUrl)">
<!-- Form to input the site URL if there are no fixed sites. -->
<div *ngIf="!fixedSites">
<p padding>{{ 'core.login.newsitedescription' | translate }}</p>

4
src/core/login/pages/sites/sites.scss
View File

@ -1,5 +1,5 @@
ion-app.app-root page-core-login-sites {
.item-button[icon-only] ion-icon {
font-size: 2.3em;
.item-ios .item-button[icon-only] ion-icon {
font-size: 2.1em;
}
}

4
src/theme/variables.scss
View File

@ -142,7 +142,6 @@ $core-select-placeholder-color: $core-color;
// iOS only Sass variables can go here
$text-input-ios-show-focus-highlight: false;
$core-text-input-ios-show-highlight: false;
$item-ios-avatar-size: 54px;
$loading-ios-spinner-color: $core-loading-spinner-color;
$spinner-ios-ios-color: $core-spinner-color;
@ -159,8 +158,7 @@ $toggle-ios-disabled-opacity: .5 !default;
// --------------------------------------------------
// Material Design only Sass variables can go here
$text-input-md-show-focus-highlight: false;
$core-text-input-md-show-highlight: true;
$text-input-md-show-focus-highlight: true;
$item-md-detail-push-show: true;
$item-md-avatar-size: 54px;
$loading-md-spinner-color: $core-loading-spinner-color;