javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 23:16:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(sass): remove and fix todos

Browse Source
This commit is contained in:
Brandy Carney
2017-11-30 16:22:32 -05:00
parent 9df3d4c8ad
commit 4dfe6195fb
21 changed files with 66 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/src/components/alert/alert.ios.scss
View File

@ -107,7 +107,7 @@
.alert-ios .alert-tappable {
display: flex;
min-height: $alert-ios-button-min-height;
min-height: $alert-ios-tappable-min-height;
}

5
packages/core/src/components/alert/alert.ios.vars.scss
View File

@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.ios";
@import "../item/item.vars";
// iOS Alert
// --------------------------------------------------
@ -281,3 +283,6 @@ $alert-ios-translucent-filter: saturate(180%) blur(20px) !defau
/// @prop - Opacity of the translucent alert
$alert-ios-translucent-opacity: .88 !default;
/// @prop - Minimum height of the tappable inputs in the checkbox alert
$alert-ios-tappable-min-height: $item-min-height !default;

3
packages/core/src/components/alert/alert.md.scss
View File

@ -90,8 +90,7 @@
overflow: hidden;
// TODO this should be a variable that matches item
min-height: 4.4rem;
min-height: $alert-md-tappable-min-height;
}

5
packages/core/src/components/alert/alert.md.vars.scss
View File

@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.md";
@import "../item/item.vars";
// Material Design Alert
// --------------------------------------------------
@ -311,3 +313,6 @@ $alert-md-checkbox-icon-border-color: color-contrast($colors-md, $alert-
/// @prop - Transform of the icon in the checkbox alert
$alert-md-checkbox-icon-transform: rotate(45deg) !default;
/// @prop - Minimum height of the tappable inputs in the checkbox alert
$alert-md-tappable-min-height: $item-min-height !default;

4
packages/core/src/components/app/app.ios.scss
View File

@ -23,4 +23,8 @@
}
}
a {
color: $link-ios-color;
}
@import "../icon/icon.ios";

4
packages/core/src/components/app/app.md.scss
View File

@ -22,4 +22,8 @@
}
}
a {
color: $link-md-color;
}
@import "../icon/icon.md";

6
packages/core/src/components/content/content.scss
View File

@ -16,12 +16,6 @@ ion-content {
padding: 0 !important; // scss-lint:disable all
}
a {
// TODO
// color: $link-color;
}
// Scrollable Content
// --------------------------------------------------

20
packages/core/src/components/input/input.ios.scss
View File

@ -24,6 +24,8 @@
// iOS Highlighted Input
// --------------------------------------------------
// TODO this is angular specific scss
// Input highlight mixin for focus, valid, and invalid states
@mixin ios-input-highlight($highlight-color) {
border-bottom-color: $highlight-color;
@ -34,17 +36,13 @@
// In order to get a 2px border we need to add an inset
// box-shadow 1px (this is to avoid the div resizing)
// TODO remove all uses of input-has-focus in v4
// TODO remove all uses of input-has-value in v4
.item-ios.item-input.item-input-has-focus .item-inner,
.item-ios.item-input.input-has-focus .item-inner {
.item-ios.item-input.item-input-has-focus .item-inner {
@include ios-input-highlight($input-ios-highlight-color);
}
// The last item in a list has a border on the item, not the
// inner item, so add it to the item itself
.list-ios .item-input.item-input-has-focus:last-child,
.list-ios .item-input.input-has-focus:last-child {
.list-ios .item-input.item-input-has-focus:last-child {
@include ios-input-highlight($input-ios-highlight-color);
.item-inner {
@ -55,13 +53,11 @@
// Show the valid highlight when it has the .ng-valid class and a value
@if ($input-ios-show-valid-highlight) {
.item-ios.item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner,
.item-ios.item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner {
.item-ios.item-input.ng-valid.item-input-has-value:not(.item-input-has-focus) .item-inner {
@include ios-input-highlight($input-ios-highlight-color-valid);
}
.list-ios .item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child,
.list-ios .item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child {
.list-ios .item-input.ng-valid.item-input-has-value:not(.item-input-has-focus):last-child {
@include ios-input-highlight($input-ios-highlight-color-valid);
.item-inner {
@ -72,11 +68,11 @@
// Show the invalid highlight when it has the invalid class and has been touched
@if ($input-ios-show-invalid-highlight) {
.item-ios.item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .item-inner {
.item-ios.item-input.ng-invalid.ng-touched:not(.item-input-has-focus) .item-inner {
@include ios-input-highlight($input-ios-highlight-color-invalid);
}
.list-ios .item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus):last-child {
.list-ios .item-input.ng-invalid.ng-touched:not(.item-input-has-focus):last-child {
@include ios-input-highlight($input-ios-highlight-color-invalid);
.item-inner {

21
packages/core/src/components/input/input.md.scss
View File

@ -35,16 +35,13 @@
// In order to get a 2px border we need to add an inset
// box-shadow 1px (this is to avoid the div resizing)
// TODO remove all uses of input-has-focus in v4
.item-md.item-input.item-input-has-focus .item-inner,
.item-md.item-input.input-has-focus .item-inner {
.item-md.item-input.item-input-has-focus .item-inner {
@include md-input-highlight($input-md-highlight-color);
}
// The last item in a list has a border on the item, not the
// inner item, so add it to the item itself
.list-md .item-input.item-input-has-focus:last-child,
.list-md .item-input.input-has-focus:last-child {
.list-md .item-input.item-input-has-focus:last-child {
@include md-input-highlight($input-md-highlight-color);
.item-inner {
@ -53,17 +50,15 @@
}
}
// TODO this is angular specific scss
// Show the valid highlight when it has the .ng-valid class and a value
@if ($input-md-show-valid-highlight) {
// TODO remove all uses of input-has-focus in v4
// TODO remove all uses of input-has-value in v4
.item-md.item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner,
.item-md.item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner {
.item-md.item-input.ng-valid.item-input-has-value:not(.item-input-has-focus) .item-inner {
@include md-input-highlight($input-md-highlight-color-valid);
}
.list-md .item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child,
.list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child {
.list-md .item-input.ng-valid.item-input-has-value:not(.item-input-has-focus):last-child {
@include md-input-highlight($input-md-highlight-color-valid);
.item-inner {
@ -74,11 +69,11 @@
// Show the invalid highlight when it has the invalid class and has been touched
@if ($input-md-show-invalid-highlight) {
.item-md.item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .item-inner {
.item-md.item-input.ng-invalid.ng-touched:not(.item-input-has-focus) .item-inner {
@include md-input-highlight($input-md-highlight-color-invalid);
}
.list-md .item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus):last-child {
.list-md .item-input.ng-invalid.ng-touched:not(.item-input-has-focus):last-child {
@include md-input-highlight($input-md-highlight-color-invalid);
.item-inner {

2
packages/core/src/components/input/input.scss
View File

@ -145,8 +145,6 @@ input.text-input:-webkit-autofill {
background-repeat: no-repeat;
}
// TODO remove all uses of input-has-focus in v4
// TODO remove all uses of input-has-value in v4
.item-input-has-focus.item-input-has-value .text-input-clear-icon {
display: block;
}

5
packages/core/src/components/item/item.scss
View File

@ -1,4 +1,4 @@
@import "../../themes/ionic.globals";
@import "./item.vars";
// Item
// --------------------------------------------------
@ -20,7 +20,6 @@ ion-item {
contain: content;
}
.item-block {
@include margin(0);
@include padding(0);
@ -33,7 +32,7 @@ ion-item {
justify-content: space-between;
width: 100%;
min-height: 4.4rem;
min-height: $item-min-height;
border: 0;

7
packages/core/src/components/item/item.vars.scss Normal file
View File

@ -0,0 +1,7 @@
@import "../../themes/ionic.globals";
// Item
// --------------------------------------------------
/// @prop - Minimum height of the item
$item-min-height: 44px !default;

10
packages/core/src/components/label/label.ios.scss
View File

@ -48,12 +48,8 @@
transition: transform 150ms ease-in-out;
}
// TODO remove all uses of input-has-focus in v4
// TODO remove all uses of input-has-value in v4
.item-input-has-focus .label-ios[floating],
.input-has-focus .label-ios[floating],
.item-input-has-value .label-ios[floating],
.input-has-value .label-ios[floating] {
.item-input-has-value .label-ios[floating] {
@include transform(translate3d(0, 0, 0), scale(.8));
}
@ -63,9 +59,7 @@
}
.item-input-has-focus .label-ios[stacked],
.input-has-focus .label-ios[stacked],
.item-input-has-focus .label-ios[floating],
.input-has-focus .label-ios[floating] {
.item-input-has-focus .label-ios[floating] {
color: $label-ios-text-color-focused;
}

15
packages/core/src/components/label/label.md.scss
View File

@ -8,10 +8,9 @@
@include margin($label-md-margin-top, $label-md-margin-end, $label-md-margin-bottom, $label-md-margin-start);
}
// TODO uncomment this and get working
[text-wrap] .label-md {
// font-size: $item-md-body-text-font-size;
// line-height: $item-md-body-text-line-height;
font-size: $label-md-text-wrap-font-size;
line-height: $label-md-text-wrap-line-height;
}
// Material Design Default Label Inside An Input/Select Item
@ -43,19 +42,13 @@
@include margin(null, null, 0, 0);
}
// TODO remove all uses of input-has-focus in v4
// TODO remove all uses of input-has-value in v4
.item-input-has-focus .label-md[stacked],
.input-has-focus .label-md[stacked],
.item-input-has-focus .label-md[floating],
.input-has-focus .label-md[floating] {
.item-input-has-focus .label-md[floating] {
color: $label-md-text-color-focused;
}
.item-input-has-focus .label-md[floating],
.input-has-focus .label-md[floating],
.item-input-has-value .label-md[floating],
.input-has-value .label-md[floating] {
.item-input-has-value .label-md[floating] {
@include transform(translate3d(0, 0, 0), scale(.8));
}

8
packages/core/src/components/label/label.md.vars.scss
View File

@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.md";
@import "../item/item.md.vars";
// Material Design Label
// --------------------------------------------------
@ -20,3 +22,9 @@ $label-md-margin-bottom: $item-md-padding-bottom !default;
/// @prop - Margin start of the label
$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;
/// @prop - Line height of the label when the text wraps
$label-md-text-wrap-line-height: $item-md-body-text-line-height !default;

1
packages/core/src/components/select/select.scss
View File

@ -39,7 +39,6 @@ ion-select {
@include margin($select-popover-list-margin-top, $select-popover-list-margin-end, $select-popover-list-margin-bottom, $select-popover-list-margin-start);
}
// TODO remove
.select-option {
display: none;
}

6
packages/core/src/themes/ionic.mixins.scss
View File

@ -184,14 +184,14 @@
// If deprecated variable exists, use it, otherwise, use alternative
// @param {string} $property - property to default
// @param {string} $variable-name - the deprecated variable's name
// @param {string} $variable - the deprecated variable
// ----------------------------------------------------------
@mixin deprecated-variable($property, $variable) {
@mixin deprecated-variable($property, $variable-name, $variable) {
@if $variable == null {
@content;
} @else {
// TODO find variable name
@warn "you are using a deprecated variable";
@warn "you are using a deprecated variable: #{$variable-name}";
#{$property}: $variable;
}
}

1
packages/core/src/themes/ionic.theme.dark.ios.scss
View File

@ -5,6 +5,7 @@
$colors-ios: copy-colors($colors) !default;
$link-ios-color: $link-color !default;
$text-ios-color: $text-color !default;
$background-ios-color: $background-color !default;
$subdued-text-ios-color: $subdued-text-color !default;

1
packages/core/src/themes/ionic.theme.dark.md.scss
View File

@ -6,6 +6,7 @@
$colors-md: copy-colors($colors) !default;
$link-md-color: $link-color !default;
$text-md-color: $text-color !default;
$background-md-color: $background-color !default;
$subdued-text-md-color: $subdued-text-color !default;

1
packages/core/src/themes/ionic.theme.default.ios.scss
View File

@ -6,6 +6,7 @@
$colors-ios: copy-colors($colors) !default;
$link-ios-color: $link-color !default;
$text-ios-color: $text-color !default;
$background-ios-color: $background-color !default;
$subdued-text-ios-color: $subdued-text-color !default;

1
packages/core/src/themes/ionic.theme.default.md.scss
View File

@ -6,6 +6,7 @@
$colors-md: copy-colors($colors) !default;
$link-md-color: $link-color !default;
$text-md-color: $text-color !default;
$background-md-color: $background-color !default;
$subdued-text-md-color: $subdued-text-color !default;