vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Chip - Replace fonticon with inline SVG, tweak size and position

old
Lucas Correia 2016-04-05 10:54:30 +02:00
parent ae8b22a174
commit 703ed2767b
3 changed files with 22 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/chip/Chip.jsx
View File

@ -1,7 +1,6 @@
import React, {PropTypes} from 'react';
import FontIcon from '../font_icon';
import style from './style';
import ClassNames from 'classnames';
import style from './style';
const Chip = ({children, className, deletable, onDeleteClick, ...other}) => {
let hasAvatar = false;
@ -21,7 +20,9 @@ const Chip = ({children, className, deletable, onDeleteClick, ...other}) => {
{
deletable ? (
<span className={style.delete} onClick={onDeleteClick}>
<FontIcon value="close" />
<svg viewBox="0 0 40 40" className={style.deleteIcon}>
<path className={style.deleteX} d="M 12,12 L 28,28 M 28,12 L 12,28" />
</svg>
</span>
) : null
}

1
components/chip/_config.scss
View File

@ -12,7 +12,6 @@ $chip-font-size: $font-size-small !default;
$chip-remove-size: 2.4 * $unit !default;
$chip-remove-margin: 0.4 * $unit !default;
$chip-remove-line-height: 3.0 * $unit !default;
$chip-remove-font-size: 1.6 * $unit !default;
$chip-remove-background: $palette-grey-400 !default;
$chip-remove-background-hover: $palette-grey-500 !default;
$chip-remove-color: $color-white !default;

30
components/chip/style.scss
View File

@ -30,27 +30,33 @@
}
.deletable {
padding-right: 0;
padding-right: $chip-remove-size + 2 * $chip-remove-margin;
}
.delete {
background: $chip-remove-background;
border-radius: $chip-remove-size;
color: $chip-remove-color;
cursor: pointer;
display: inline-block;
height: $chip-remove-size;
line-height: $chip-remove-line-height;
margin: 0 $chip-remove-margin;
text-align: center;
margin: $chip-remove-margin;
padding: $chip-remove-margin;
position: absolute;
vertical-align: middle;
width: $chip-remove-size;
}
> [data-react-toolbox="font-icon"] {
font-size: $chip-remove-font-size;
}
.delete:hover .deleteIcon {
background: $chip-remove-background-hover;
}
&:hover {
background: $chip-remove-background-hover;
.deleteIcon {
background: $chip-remove-background;
border-radius: $chip-remove-size;
vertical-align: top;
.deleteX {
fill: transparent;
stroke-linecap: round;
stroke-width: 3;
stroke: $chip-remove-color;
}
}