javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-04 13:17:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(sass): update sass linters and fix lint errors

Browse Source
This commit is contained in:
Brandy Carney
2018-03-28 18:23:43 -04:00
parent 88752dea51
commit a1346a9e89
23 changed files with 95 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
core/.sass-lint.yml
View File

@ -11,6 +11,7 @@
files:
include: 'src/**/*.s+(a|c)ss'
ignore:
- 'src/themes/ionic.functions.color.scss'
- 'src/themes/ionic.mixins.scss'
- 'src/themes/license.scss'
- 'src/themes/normalize.scss'
@ -18,6 +19,7 @@ files:
- 'src/themes/version.scss'
- 'src/platform/cordova.*.scss'
- 'src/components/slides/slides-import.scss'
- 'src/components/slides/slides-vendor.scss'
options:
formatter: stylish
merge-default-rules: false
@ -46,6 +48,8 @@ rules:
- 1
- extra-properties:
- contain
- overscroll-behavior
- overscroll-behavior-y
# This doesn't allow chaining between elements and attributes, ids or classes
# if we turn this on it breaks a lot of components
no-qualifying-elements:
@ -71,6 +75,7 @@ rules:
- z-index
- display
- overflow
- overscroll-behavior
- clear
-
- flex

5
core/.scss-lint.yml
View File

@ -7,6 +7,8 @@ plugin_directories: ['.scss-linters']
scss_files: 'src/**/*.scss'
exclude:
- '*.css'
- 'src/themes/ionic.functions.color.scss'
- 'src/themes/ionic.mixins.scss'
- 'src/themes/license.scss'
- 'src/themes/normalize.scss'
@ -48,6 +50,7 @@ linters:
- z-index
- display
- overflow
- overscroll-behavior
- clear
-
- flex
@ -198,6 +201,8 @@ linters:
PropertySpelling:
extra_properties:
- contain
- overscroll-behavior
- overscroll-behavior-y
disabled_properties:
- background-position
- direction

4
core/src/components/action-sheet/action-sheet.scss
View File

@ -68,11 +68,11 @@ ion-action-sheet {
.action-sheet-group {
overflow: scroll;
overscroll-behavior: contain;
flex-shrink: 2;
pointer-events: all;
overscroll-behavior: contain;
}
.action-sheet-group-cancel {

4
core/src/components/alert/alert.ios.scss
View File

@ -101,13 +101,13 @@
.alert-ios .alert-checkbox-group {
overflow: scroll;
overscroll-behavior: contain;
max-height: $alert-ios-content-max-height;
border-top: $alert-ios-list-border-top;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.alert-ios .alert-tappable {

4
core/src/components/alert/alert.md.scss
View File

@ -113,9 +113,9 @@
flex: 1;
font-size: $alert-md-radio-label-font-size;
text-overflow: ellipsis;
white-space: nowrap;
font-size: $alert-md-radio-label-font-size;
color: $alert-md-radio-label-text-color;
}
@ -182,9 +182,9 @@
flex: 1;
font-size: $alert-md-checkbox-label-font-size;
text-overflow: ellipsis;
white-space: nowrap;
font-size: $alert-md-checkbox-label-font-size;
color: $alert-md-checkbox-label-text-color;
}

8
core/src/components/back-button/back-button.md.scss
View File

@ -10,6 +10,7 @@
min-width: 44px;
height: 32px;
border: 0;
font-size: 14px;
font-weight: 500;
@ -21,18 +22,19 @@
box-shadow: none;
&.activated {
opacity: 0.4;
opacity: .4;
}
}
.back-button-md ion-icon {
@include padding-horizontal(null, 0.3em);
@include padding-horizontal(null, .3em);
@include margin(0);
@include padding(0, 6px);
@include text-align(start);
font-size: 24px;
font-weight: normal;
line-height: 0.67;
line-height: .67;
pointer-events: none;
}

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

@ -19,7 +19,13 @@
position: relative;
z-index: 0;
display: inline-block;
display: flex;
flex-flow: row nowrap;
flex-shrink: 0;
align-items: center;
justify-content: center;
border: 0;
outline: none;
@ -32,21 +38,14 @@
white-space: nowrap;
cursor: pointer;
vertical-align: top; // the better option for most scenarios
vertical-align: -webkit-baseline-middle; // the best for those that support it
transition: background-color, opacity 100ms linear;
font-kerning: none;
user-select: none;
display: flex;
flex-flow: row nowrap;
flex-shrink: 0;
align-items: center;
justify-content: center;
font-kerning: none;
}
.back-button .button-inner {

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

@ -21,8 +21,6 @@ ion-checkbox input {
background: transparent;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

4
core/src/components/fab-button/fab-button.ios.scss
View File

@ -23,9 +23,9 @@
}
.fab-button-ios .icon {
fill: $fab-ios-icon-fill-color;
font-size: $fab-ios-icon-font-size;
fill: $fab-ios-icon-fill-color;
}
// FAB buttons in a list

2
core/src/components/fab-button/fab-button.ios.vars.scss
View File

@ -4,7 +4,7 @@
// --------------------------------------------------
/// @prop - Box shadow of the FAB button
$fab-ios-box-shadow: 0px 4px 16px rgba(0, 0, 0, .12) !default;
$fab-ios-box-shadow: 0 4px 16px rgba(0, 0, 0, .12) !default;
/// @prop - Box shadow of the activated FAB button
$fab-ios-box-shadow-activated: $fab-ios-box-shadow !default;

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

@ -71,4 +71,4 @@ ion-fab {
@include margin(-$fab-size / 2, null, null, null);
top: 50%;
}
}

3
core/src/components/hide-when/hide-when.scss
View File

@ -3,5 +3,6 @@ ion-hide-when.show-content {
}
ion-hide-when.hide-content {
// scss-lint:disable ImportantRule
display: none !important;
}
}

1
core/src/components/item-divider/item-divider.scss
View File

@ -23,7 +23,6 @@ ion-item-divider {
}
ion-item-divider[sticky] {
position: -webkit-sticky;
position: sticky;
top: 0;
}

2
core/src/components/item/item.mixins.scss
View File

@ -6,4 +6,4 @@
$item-detail-push-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$fill}'/></svg>";
@include svg-background-image($item-detail-push-svg, true);
}
}

3
core/src/components/item/item.scss
View File

@ -98,5 +98,6 @@ ion-item-group {
.item-disabled {
cursor: default;
opacity: .4;
pointer-events: none;
}
}

3
core/src/components/radio/radio.scss
View File

@ -23,8 +23,7 @@ ion-radio input {
background: transparent;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
&:active,

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

@ -13,7 +13,6 @@
display: block;
cursor: grab;
cursor: -webkit-grab;
pointer-events: all;
touch-action: none;
@ -22,7 +21,6 @@
.reorder-selected,
.reorder-selected .reorder {
cursor: grabbing;
cursor: -webkit-grabbing;
}
.reorder-selected {
@ -32,7 +30,7 @@
box-shadow: 0 0 10px rgba(0, 0, 0, .4);
opacity: .8;
// TODO remove !important
// scss-lint:disable ImportantRule
transition: none !important;
}

3
core/src/components/show-when/show-when.scss
View File

@ -3,5 +3,6 @@ ion-show-when.show-content {
}
ion-show-when.hide-content {
// scss-lint:disable ImportantRule
display: none !important;
}
}

3
core/src/components/title/title.ios.scss
View File

@ -23,10 +23,11 @@
font-size: $toolbar-ios-title-font-size;
font-weight: $toolbar-ios-title-font-weight;
color: $toolbar-ios-title-text-color;
letter-spacing: -.03em;
color: $toolbar-ios-title-text-color;
pointer-events: auto;
}

5
core/src/components/toggle/toggle.scss
View File

@ -53,15 +53,12 @@ ion-toggle input {
width: 100%;
height: 100%;
border: 0;
background: transparent;
cursor: pointer;
border: 0;
pointer-events: none;
// touch-action: pan-x;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

78
core/src/themes/css/default.css
View File

@ -15,107 +15,107 @@
--ion-alpha-highest: .9;
--ion-color-primary: #488aff;
--ion-color-primary-rgb: 72,138,255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast: #fff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-shade: #3f79e0;
--ion-color-primary-tint: #5a96ff;
--ion-color-secondary: #32db64;
--ion-color-secondary-rgb: 50,219,100;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast: #fff;
--ion-color-secondary-contrast-rgb: 255,255,255;
--ion-color-secondary-shade: #2cc158;
--ion-color-secondary-tint: #47df74;
--ion-color-tertiary: #f4a942;
--ion-color-tertiary-rgb: 244,169,66;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast: #fff;
--ion-color-tertiary-contrast-rgb: 255,255,255;
--ion-color-tertiary-shade: #d7953a;
--ion-color-tertiary-tint: #f5b255;
--ion-color-success: #10dc60;
--ion-color-success-rgb: 16,220,96;
--ion-color-success-contrast: #ffffff;
--ion-color-success-contrast: #fff;
--ion-color-success-contrast-rgb: 255,255,255;
--ion-color-success-shade: #0ec254;
--ion-color-success-tint: #28e070;
--ion-color-warning: #ffce00;
--ion-color-warning-rgb: 255,206,0;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast: #000;
--ion-color-warning-contrast-rgb: 0,0,0;
--ion-color-warning-shade: #e0b500;
--ion-color-warning-tint: #ffd31a;
--ion-color-danger: #f53d3d;
--ion-color-danger-rgb: 245,61,61;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast: #fff;
--ion-color-danger-contrast-rgb: 255,255,255;
--ion-color-danger-shade: #d83636;
--ion-color-danger-tint: #f65050;
--ion-color-light: #f4f4f4;
--ion-color-light-rgb: 244,244,244;
--ion-color-light-contrast: #000000;
--ion-color-light-contrast: #000;
--ion-color-light-contrast-rgb: 0,0,0;
--ion-color-light-shade: #d7d7d7;
--ion-color-light-tint: #f5f5f5;
--ion-color-medium: #989aa2;
--ion-color-medium-rgb: 152,154,162;
--ion-color-medium-contrast: #000000;
--ion-color-medium-contrast: #000;
--ion-color-medium-contrast-rgb: 0,0,0;
--ion-color-medium-shade: #86888f;
--ion-color-medium-tint: #a2a4ab;
--ion-color-dark: #222222;
--ion-color-dark: #222;
--ion-color-dark-rgb: 34,34,34;
--ion-color-dark-contrast: #ffffff;
--ion-color-dark-contrast: #fff;
--ion-color-dark-contrast-rgb: 255,255,255;
--ion-color-dark-shade: #1e1e1e;
--ion-color-dark-tint: #383838;
--ion-backdrop-color: #000000;
--ion-backdrop-color: #000;
--ion-overlay-background-color: #fafafa;
--ion-ripple-background-color: #000000;
--ion-background-color: #ffffff;
--ion-background-color-rgb: 255,255,255;
--ion-ripple-background-color: #000;
--ion-background-color: #fff;
--ion-background-color-rgb: 255, 255, 255;
--ion-background-color-step-50: #f2f2f2;
--ion-background-color-step-100: #e6e6e6;
--ion-background-color-step-150: #d9d9d9;
--ion-background-color-step-200: #cccccc;
--ion-background-color-step-200: #ccc;
--ion-background-color-step-250: #bfbfbf;
--ion-background-color-step-300: #b3b3b3;
--ion-background-color-step-350: #a6a6a6;
--ion-background-color-step-400: #999999;
--ion-background-color-step-400: #999;
--ion-background-color-step-450: #8c8c8c;
--ion-background-color-step-500: #808080;
--ion-background-color-step-550: #737373;
--ion-background-color-step-600: #666666;
--ion-background-color-step-600: #666;
--ion-background-color-step-650: #595959;
--ion-background-color-step-700: #4d4d4d;
--ion-background-color-step-750: #404040;
--ion-background-color-step-800: #333333;
--ion-background-color-step-800: #333;
--ion-background-color-step-850: #262626;
--ion-background-color-step-900: #191919;
--ion-background-color-step-950: #0d0d0d;
--ion-background-color-step-1000: #000000;
--ion-background-color-step-1000: #000;
--ion-border-color: #b2b2b2;
--ion-box-shadow-color: #000000;
--ion-text-color: #000000;
--ion-box-shadow-color: #000;
--ion-text-color: #000;
--ion-text-color-rgb: 0,0,0;
--ion-text-color-step-50: #0d0d0d;
--ion-text-color-step-100: #1a1a1a;
--ion-text-color-step-150: #262626;
--ion-text-color-step-200: #333333;
--ion-text-color-step-200: #333;
--ion-text-color-step-250: #404040;
--ion-text-color-step-300: #4d4d4d;
--ion-text-color-step-350: #595959;
--ion-text-color-step-400: #666666;
--ion-text-color-step-400: #666;
--ion-text-color-step-450: #737373;
--ion-text-color-step-500: #808080;
--ion-text-color-step-550: #8c8c8c;
--ion-text-color-step-600: #999999;
--ion-text-color-step-600: #999;
--ion-text-color-step-650: #a6a6a6;
--ion-text-color-step-700: #b3b3b3;
--ion-text-color-step-750: #bfbfbf;
--ion-text-color-step-800: #cccccc;
--ion-text-color-step-800: #ccc;
--ion-text-color-step-850: #d9d9d9;
--ion-text-color-step-900: #e6e6e6;
--ion-text-color-step-950: #f2f2f2;
--ion-text-color-step-1000: #ffffff;
--ion-text-color-step-1000: #fff;
--ion-tabbar-background-color: #f8f8f8;
--ion-tabbar-background-color-focused: #dadada;
--ion-tabbar-border-color: #b2b2b2;
@ -125,31 +125,31 @@
--ion-toolbar-border-color: #b2b2b2;
--ion-toolbar-color-active: #488aff;
--ion-toolbar-color-inactive: #8c8c8c;
--ion-toolbar-text-color: #000000;
--ion-item-background-color: #ffffff;
--ion-item-background-color-active: #ffffff;
--ion-toolbar-text-color: #000;
--ion-item-background-color: #fff;
--ion-item-background-color-active: #fff;
--ion-item-border-color: #c8c7cc;
--ion-item-text-color: #000000;
--ion-placeholder-text-color: #999999;
--ion-item-text-color: #000;
--ion-placeholder-text-color: #999;
/** iOS overrides **/
--ion-border-ios-color: #dedede;
--ion-overlay-ios-background-color: #f9f9f9;
--ion-tabbar-ios-translucent-background-color: rgba(248,248,248, var(--ion-alpha-ios-high, var(--ion-alpha-high, 0.8)));
--ion-tabbar-ios-border-color: rgba(0, 0, 0, var(--ion-alpha-ios-border-medium, var(--ion-alpha-border-medium, 0.2)));
--ion-tabbar-ios-translucent-background-color: rgba(248, 248, 248, var(--ion-alpha-ios-high, var(--ion-alpha-high, .8)));
--ion-tabbar-ios-border-color: rgba(0, 0, 0, var(--ion-alpha-ios-border-medium, var(--ion-alpha-border-medium, .2)));
--ion-tabbar-ios-text-color-active: var(--ion-color-ios-primary, var(--ion-color-primary, #488aff));
--ion-toolbar-ios-translucent-background-color: rgba(248, 248, 248, var(--ion-alpha-ios-high, var(--ion-alpha-high, 0.8)));
--ion-toolbar-ios-border-color: rgba(0, 0, 0, var(--ion-alpha-ios-border-medium, var(--ion-alpha-border-medium, 0.2)));
--ion-toolbar-ios-translucent-background-color: rgba(248, 248, 248, var(--ion-alpha-ios-high, var(--ion-alpha-high, .8)));
--ion-toolbar-ios-border-color: rgba(0, 0, 0, var(--ion-alpha-ios-border-medium, var(--ion-alpha-border-medium, .2)));
--ion-item-ios-background-color: var(--ion-background-ios-color, var(--ion-background-color, #fff));
--ion-item-ios-background-color-active: #d9d9d9;
/** MD overrides **/
--ion-alpha-md-focused: 0.1;
--ion-alpha-md-border-low: 0.07;
--ion-alpha-md-focused: .1;
--ion-alpha-md-border-low: .07;
--ion-border-md-color: #c1c4cd;
--ion-overlay-md-background-color: #fafafa;
--ion-tabbar-md-border-color: rgba(0, 0, 0, var(--ion-alpha-md-border-low, var(--ion-alpha-border-low, 0.07)));
--ion-tabbar-md-text-color: var(--ion-text-md-color-step-400, var(--ion-text-color-step-400, #666666));
--ion-tabbar-md-border-color: rgba(0, 0, 0, var(--ion-alpha-md-border-low, var(--ion-alpha-border-low, .07)));
--ion-tabbar-md-text-color: var(--ion-text-md-color-step-400, var(--ion-text-color-step-400, #666));
--ion-toolbar-md-border-color: var(--ion-border-md-color, var(--ion-border-color, #c1c4cd));
--ion-toolbar-md-color-active: #4a4a4a;
--ion-toolbar-md-text-color: #424242;

16
core/src/themes/css/oceanic.css
View File

@ -14,7 +14,7 @@
--ion-alpha-high: .8;
--ion-alpha-highest: .9;
--ion-color-primary: #549ee7;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast: #fff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-rgb: 84,158,231;
--ion-color-primary-shade: #498bce;
@ -32,19 +32,19 @@
--ion-color-tertiary-shade: #eab30f;
--ion-color-tertiary-tint: #ffd36a;
--ion-color-success: #90d089;
--ion-color-success-contrast: #ffffff;
--ion-color-success-contrast: #fff;
--ion-color-success-contrast-rgb: 255,255,255;
--ion-color-success-rgb: 144,208,137;
--ion-color-success-shade: #81bc7b;
--ion-color-success-tint: #a1eb9a;
--ion-color-warning: #f99157;
--ion-color-warning-contrast: #ffffff;
--ion-color-warning-contrast: #fff;
--ion-color-warning-contrast-rgb: 255,255,255;
--ion-color-warning-rgb: 249,145,87;
--ion-color-warning-shade: #ec8a54;
--ion-color-warning-tint: #ff9e60;
--ion-color-danger: #ec5f67;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast: #fff;
--ion-color-danger-contrast-rgb: 255,255,255;
--ion-color-danger-rgb: 236,95,103;
--ion-color-danger-shade: #cb535b;
@ -56,7 +56,7 @@
--ion-color-light-shade: #bcc1cd;
--ion-color-light-tint: #ecf2ff;
--ion-color-medium: #65737e;
--ion-color-medium-contrast: #ffffff;
--ion-color-medium-contrast: #fff;
--ion-color-medium-contrast-rgb: 255,255,255;
--ion-color-medium-rgb: 101,115,126;
--ion-color-medium-shade: #4f5b66;
@ -90,10 +90,10 @@
--ion-background-color-step-850: #dddfe1;
--ion-background-color-step-900: #e8eaeb;
--ion-background-color-step-950: #f4f4f5;
--ion-background-color-step-1000: #ffffff;
--ion-background-color-step-1000: #fff;
--ion-border-color: #1b2b34;
--ion-box-shadow-color: #000000;
--ion-text-color: #ffffff;
--ion-box-shadow-color: #000;
--ion-text-color: #fff;
--ion-text-color-rgb: 255,255,255;
--ion-text-color-step-50: #f4f4f5;
--ion-text-color-step-100: #e8eaeb;

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

@ -94,7 +94,7 @@ $overlay-ios-background-color: css-var(#f9f9f9, overlay-ios-backg
// --------------------------------------------------
$tabbar-ios-background-color: css-var($tabbar-background-color, tabbar-ios-background-color) !default;
$tabbar-ios-background-color-focused: css-var($tabbar-background-color-focused, tabbar-ios-background-color-focused) !default;
$tabbar-ios-translucent-background-color: css-var(rgb(248,248,248), tabbar-ios-translucent-background-color, $alpha-ios-high) !default; // TODO: @color-mod: remove
$tabbar-ios-translucent-background-color: css-var(rgb(248, 248, 248), tabbar-ios-translucent-background-color, $alpha-ios-high) !default; // TODO: @color-mod: remove
$tabbar-ios-border-color: css-var(rgb(0, 0, 0), tabbar-ios-border-color, $alpha-ios-border-medium) !default; // TODO: @color-mod($border-ios-color, a($alpha-ios-low))
$tabbar-ios-text-color: css-var($tabbar-text-color, tabbar-ios-text-color) !default;
$tabbar-ios-text-color-active: css-var(ion-color($colors-ios, primary, base, ios), tabbar-ios-text-color-active) !default;
@ -104,7 +104,7 @@ $tabbar-ios-text-color-active: css-var(ion-color($colors-ios, pri
$toolbar-ios-height: 44px !default;
$toolbar-ios-padding: 4px !default;
$toolbar-ios-background-color: css-var($toolbar-background-color, toolbar-ios-background-color) !default;
$toolbar-ios-translucent-background-color: css-var(rgb(248,248,248), toolbar-ios-translucent-background-color, $alpha-ios-high) !default; // TODO: @color-mod: remove
$toolbar-ios-translucent-background-color: css-var(rgb(248, 248, 248), toolbar-ios-translucent-background-color, $alpha-ios-high) !default; // TODO: @color-mod: remove
$toolbar-ios-border-color: css-var(rgb(0, 0, 0), toolbar-ios-border-color, $alpha-ios-border-medium) !default; // TODO: @color-mod($border-ios-color, a($alpha-ios-low))
$toolbar-ios-color-active: css-var(ion-color($colors-ios, primary, base, ios), toolbar-ios-color-active) !default;
$toolbar-ios-color-inactive: css-var($toolbar-color-inactive, toolbar-ios-color-inactive) !default;