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

feat(ionicons): update svg ion-icons

Browse Source
This commit is contained in:
Adam Bradley
2017-11-28 17:21:23 -06:00
parent 08fd1e13ee
commit 7633108734
12 changed files with 40 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/core/package-lock.json generated
View File

@ -3426,9 +3426,9 @@
"dev": true "dev": true
}, },
"ionicons": { "ionicons": {
"version": "4.0.0-6", "version": "4.0.0-7",
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-4.0.0-6.tgz", "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-4.0.0-7.tgz",
"integrity": "sha512-GHJNBjHOrASVjJ6ajdt9TDqv5ZAD6GDCLNYWdC9uG35TiQ79ggfr7RbcVb/DrGk9mLXHbpVCaBaGAVJnnLNY3Q==", "integrity": "sha512-j7+DdZPdJ8FRUhLi6LAsiTieekpkQ+AbzfHZCVdMl9nUZJt7qXRC0Kqmb/zX7HCYTcgNek/4QLMiuZS+6UANAg==",
"dev": true "dev": true
}, },
"is-arrayish": { "is-arrayish": {

2
packages/core/package.json
View File

@ -15,7 +15,7 @@
"@stencil/utils": "latest", "@stencil/utils": "latest",
"@types/jest": "^21.1.6", "@types/jest": "^21.1.6",
"chromedriver": "^2.33.2", "chromedriver": "^2.33.2",
"ionicons": "^4.0.0-6", "ionicons": "4.0.0-7",
"jest": "^21.2.1", "jest": "^21.2.1",
"mocha": "^4.0.1", "mocha": "^4.0.1",
"np": "^2.17.0", "np": "^2.17.0",

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

@ -10,3 +10,5 @@
font-size: $font-size-ios-base; font-size: $font-size-ios-base;
background-color: $background-ios-color; background-color: $background-ios-color;
} }
@import "../icon/icon.ios";

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

@ -10,3 +10,5 @@
font-size: $font-size-md-base; font-size: $font-size-md-base;
background-color: $background-md-color; background-color: $background-md-color;
} }
@import "../icon/icon.md";

24
packages/core/src/components/button/button-icon.scss
View File

@ -1,29 +1,25 @@
@import "../../themes/ionic.globals"; @import "../../themes/ionic.globals";
@import "../icon/icon";
// Button Icons // Button Icons
// -------------------------------------------------- // --------------------------------------------------
.button ion-icon { .button ion-icon {
width: 1.4em;
height: 1.4em;
pointer-events: none; pointer-events: none;
} }
ion-icon[slot="start"] { .button ion-icon[slot="start"] {
@include button-icon(); margin: 0 0.3em 0 -0.3em;
@include padding-horizontal(null, .3em);
} }
ion-icon[slot="end"] { .button ion-icon[slot="end"] {
@include button-icon(); margin: 0 -0.2em 0 0.3em;
@include padding-horizontal(.4em, null);
} }
ion-icon[slot="icon-only"] { .button ion-icon[slot="icon-only"] {
@include padding(0); width: 1.8em;
height: 1.8em;
font-size: 1.8em;
line-height: .67;
} }

8
packages/core/src/components/button/button.ios.scss
View File

@ -1,6 +1,5 @@
@import "../../themes/ionic.globals.ios"; @import "../../themes/ionic.globals.ios";
@import "./button"; @import "./button";
@import "../icon/icon.ios";
// iOS Button // iOS Button
@ -101,9 +100,6 @@ $button-ios-small-height: 2.1em !default;
/// @prop - Font size of the small button /// @prop - Font size of the small button
$button-ios-small-font-size: 1.3rem !default; $button-ios-small-font-size: 1.3rem !default;
/// @prop - Font size of an icon in the small button
$button-ios-small-icon-font-size: 1.3em !default;
// iOS Outline Button // iOS Outline Button
// -------------------------------------------------- // --------------------------------------------------
@ -254,10 +250,6 @@ $button-ios-strong-font-weight: 600 !default;
font-size: $button-ios-small-font-size; font-size: $button-ios-small-font-size;
} }
.button-small-ios ion-icon[slot="icon-only"] {
font-size: $button-ios-small-icon-font-size;
}
// iOS Block Button // iOS Block Button
// -------------------------------------------------- // --------------------------------------------------

8
packages/core/src/components/button/button.md.scss
View File

@ -1,6 +1,5 @@
@import "../../themes/ionic.globals.md"; @import "../../themes/ionic.globals.md";
@import "./button"; @import "./button";
@import "../icon/icon.md";
// Material Design Button // Material Design Button
@ -123,9 +122,6 @@ $button-md-small-height: 2.1em !default;
/// @prop - Font size of the small button /// @prop - Font size of the small button
$button-md-small-font-size: 1.3rem !default; $button-md-small-font-size: 1.3rem !default;
/// @prop - Font size of an icon in the small button
$button-md-small-icon-font-size: 1.4em !default;
// Material Design Outline Button // Material Design Outline Button
// -------------------------------------------------- // --------------------------------------------------
@ -313,10 +309,6 @@ $button-md-strong-font-weight: bold !default;
font-size: $button-md-small-font-size; font-size: $button-md-small-font-size;
} }
.button-small-md ion-icon[slot="icon-only"] {
font-size: $button-md-small-icon-font-size;
}
// Material Design Block Button // Material Design Block Button
// -------------------------------------------------- // --------------------------------------------------

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

@ -33,6 +33,7 @@ $button-round-border-radius: 64px !default;
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
text-transform: none; text-transform: none;
line-height: 1;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
@ -60,13 +61,9 @@ $button-round-border-radius: 64px !default;
} }
[ion-button] {
text-decoration: none;
}
a[disabled], a[disabled],
button[disabled], button[disabled],
[ion-button][disabled] { .button[disabled] {
cursor: default; cursor: default;
opacity: .4; opacity: .4;

17
packages/core/src/components/icon/icon.scss
View File

@ -1,17 +0,0 @@
// Icon
// --------------------------------------------------
ion-icon {
display: inline-block;
font-size: 1.2em;
}
ion-icon[small],
ion-icon[small][slot] {
min-height: 1.1em;
font-size: 1.1em;
}

66
packages/core/src/components/icon/test/basic/index.html
View File

@ -17,63 +17,37 @@
<ion-content text-center class="icon-demo"> <ion-content text-center class="icon-demo">
<ion-grid> <ion-grid>
<ion-row> <ion-row>
<ion-col><ion-icon name="ionic" color="primary"></ion-icon></ion-col> <ion-col><ion-icon name="logo-ionic" color="primary"></ion-icon></ion-col>
<ion-col><ion-icon name="logo-angular"></ion-icon></ion-col> <ion-col><ion-icon name="logo-ionitron" color="primary"></ion-icon></ion-col>
<ion-col><ion-icon name="heart" color="danger"></ion-icon></ion-col> <ion-col><ion-icon name="heart" color="secondary"></ion-icon></ion-col>
<ion-col><ion-icon name="ionitron" color="primary"></ion-icon></ion-col> <ion-col><ion-icon name="logo-angular" color="danger"></ion-icon></ion-col>
<ion-col><ion-icon name="happy" color="vibrant"></ion-icon></ion-col> <ion-col><ion-icon name="happy"></ion-icon></ion-col>
<ion-col><ion-icon name="people"></ion-icon></ion-col> <ion-col><ion-icon name="people"></ion-icon></ion-col>
<ion-col><ion-icon name="person"></ion-icon></ion-col>
<ion-col><ion-icon name="contact"></ion-icon></ion-col>
<ion-col><ion-icon name="apps"></ion-icon></ion-col>
<ion-col><ion-icon name="lock"></ion-icon></ion-col> <ion-col><ion-icon name="lock"></ion-icon></ion-col>
<ion-col><ion-icon name="key" color="bright"></ion-icon></ion-col> <ion-col><ion-icon name="key"></ion-icon></ion-col>
<ion-col><ion-icon name="unlock"></ion-icon></ion-col>
<ion-col><ion-icon name="map" color="secondary"></ion-icon></ion-col>
<ion-col><ion-icon name="navigate"></ion-icon></ion-col>
<ion-col><ion-icon name="pin"></ion-icon></ion-col>
<ion-col><ion-icon name="locate"></ion-icon></ion-col>
<ion-col><ion-icon name="mic"></ion-icon></ion-col>
<ion-col><ion-icon name="musical-notes" color="vibrant"></ion-icon></ion-col>
<ion-col><ion-icon name="volume-up"></ion-icon></ion-col>
<ion-col><ion-icon name="microphone"></ion-icon></ion-col>
<ion-col><ion-icon name="cafe" color="bright"></ion-icon></ion-col>
<ion-col><ion-icon name="calculator"></ion-icon></ion-col>
<ion-col><ion-icon name="bus"></ion-icon></ion-col>
<ion-col><ion-icon name="wine" color="danger"></ion-icon></ion-col>
<ion-col><ion-icon name="camera"></ion-icon></ion-col>
<ion-col><ion-icon name="image" color="secondary"></ion-icon></ion-col>
<ion-col><ion-icon name="star" color="bright"></ion-icon></ion-col>
<ion-col><ion-icon name="pin"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-dropup-circle" color="vibrant"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-back"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-dropdown"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-forward"></ion-icon></ion-col>
<ion-col><ion-icon name="cloud"></ion-icon></ion-col>
<ion-col><ion-icon name="sunny" color="bright"></ion-icon></ion-col>
<ion-col><ion-icon name="umbrella"></ion-icon></ion-col>
<ion-col><ion-icon name="rainy" color="primary"></ion-icon></ion-col>
</ion-row> </ion-row>
</ion-grid> </ion-grid>
<p>
inline styling
<ion-icon name="logo-ionic" style="display:inline-block; width: 1em;"></ion-icon>
icon.
</p>
<p>
Default
<ion-icon name="logo-ionic"></ion-icon>
inline.
</p>
</ion-content> </ion-content>
</ion-page> </ion-page>
<style> <style>
.icon-demo ion-icon {
font-size: 50px;
}
.icon-demo ion-row { .icon-demo ion-row {
height: 100%; height: 100%;
flex-wrap: wrap; flex-wrap: wrap;

15
packages/core/src/components/toolbar/toolbar-button.scss
View File

@ -61,18 +61,3 @@
align-items: center; align-items: center;
} }
// Button Icons
// --------------------------------------------------
ion-icon[slot="start"] {
@include button-icon();
@include padding-horizontal(null, .3em);
}
ion-icon[slot="end"] {
@include button-icon();
@include padding-horizontal(.4em, null);
}

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

@ -30,18 +30,6 @@
} }
// Button Icons
// --------------------------------------------------
@mixin button-icon($font-size: 1.4em, $line-height: .67, $pointer-events: none, $margin: 0) {
font-size: $font-size;
line-height: $line-height;
pointer-events: $pointer-events;
margin: $margin;
}
// Check that the given map values are in ascending order // Check that the given map values are in ascending order
// --------------------------------------------------------------------------------- // ---------------------------------------------------------------------------------