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

fix(reorder): use correct icon size and opacity per mode

Browse Source
This commit is contained in:
Brandy Carney
2018-02-09 20:20:00 -05:00
parent 255c3dd1ae
commit 7eca95daa9
7 changed files with 45 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/core/src/components/item/item.md.scss
View File

@ -157,15 +157,6 @@
}
// Item reorder
// --------------------------------------------------
.item-md ion-reorder {
font-size: 1.5em;
opacity: .3;
}
// Generate Material Design Item and Item Divider Colors
// --------------------------------------------------

10
packages/core/src/components/reorder/reorder.ios.scss Normal file
View File

@ -0,0 +1,10 @@
@import "./reorder";
@import "./reorder.ios.vars";
// iOS Reorder
// --------------------------------------------------
.reorder-ios .reorder-icon {
font-size: $reorder-ios-icon-font-size;
opacity: $reorder-ios-icon-font-size;
}

11
packages/core/src/components/reorder/reorder.ios.vars.scss Normal file
View File

@ -0,0 +1,11 @@
@import "../../themes/ionic.globals.ios";
// iOS Reorder
// --------------------------------------------------
/// @prop - Font size of the reorder icon
$reorder-ios-icon-font-size: 2em !default;
/// @prop - Opacity of the reorder icon
$reorder-ios-icon-opacity: .4 !default;

10
packages/core/src/components/reorder/reorder.md.scss Normal file
View File

@ -0,0 +1,10 @@
@import "./reorder";
@import "./reorder.md.vars";
// Material Design Reorder
// --------------------------------------------------
.reorder-md .reorder-icon {
font-size: $reorder-md-icon-font-size;
opacity: $reorder-md-icon-opacity;
}

10
packages/core/src/components/reorder/reorder.md.vars.scss Normal file
View File

@ -0,0 +1,10 @@
@import "../../themes/ionic.globals.md";
// Material Design Reorder
// --------------------------------------------------
/// @prop - Font size of the reorder icon
$reorder-md-icon-font-size: 1.8em !default;
/// @prop - Opacity of the reorder icon
$reorder-md-icon-opacity: .3 !default;

8
packages/core/src/components/reorder/reorder.scss
View File

@ -67,11 +67,3 @@
.item .reorder[slot] {
@include margin(0, null);
}
.item .reorder-icon {
font-size: 2em;
opacity: .4;
fill: currentColor;
}

5
packages/core/src/components/reorder/reorder.tsx
View File

@ -3,7 +3,10 @@ import { Component, Element, State } from '@stencil/core';
@Component({
tag: 'ion-reorder',
styleUrl: 'reorder.scss',
styleUrls: {
ios: 'reorder.ios.scss',
md: 'reorder.md.scss',
},
host: {
theme: 'reorder'
}