Modified Chip component based on Material Design specs.

feature/appm-store/pbac
Menaka Jayawardena 7 years ago
parent b3bd70ad61
commit 594996b3fe

@ -1,48 +0,0 @@
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
.chip {
display: inline-block;
padding: 0 25px;
height: 50px;
font-size: 16px;
line-height: 50px;
border-radius: 25px;
background-color: #f1f1f1;
}
.chip img {
float: left;
margin: 0 10px 0 -25px;
height: 50px;
width: 50px;
border-radius: 50%;
}
.close-btn {
padding-left: 10px;
color: #888;
font-weight: bold;
float: right;
font-size: 20px;
cursor: pointer;
}
.close-btn:hover {
color: #000;
}

@ -16,20 +16,36 @@
* under the License. * under the License.
*/ */
import PropTypes from 'prop-types';
import React, {Component} from 'react'; import React, {Component} from 'react';
import './chip.css'; import './chip.css';
class Chip extends Component { class Chip extends Component {
constructor() {
super();
this.onDeleteClick = this.onDeleteClick.bind(this);
}
onDeleteClick() {
this.props.onDelete(this.props.content.key);
}
render() { render() {
return ( return (
<div className="chip"> <div className="chip">
{this.props.image?<img src={this.props.image} alt="Person" width="96" height="96" />:<div/>} <div className="chip-text">{this.props.content.value}</div>
{this.props.text} <div className="chip-close-btn" onClick={this.onDeleteClick}>
<span className="close-btn" >&times;</span> <i className="fw fw-uncheck"></i>
</div>
</div> </div>
) )
} }
} }
Chip.propTypes = {
onDelete: PropTypes.func,
content: PropTypes.object
};
export default Chip; export default Chip;

@ -0,0 +1,67 @@
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
/*
* Chip component with the material design specs.
* Chip with a close button.
* (-12px-{text (Roboto-Regular 13px)}-4px-{close button}-4px-)
*/
.chip {
display: flex;
height: 32px;
background-color: #f1f1f1;
border-radius: 16px;
padding: 3px;
border: 10px;
}
.chip-text {
padding-top: 4px;
font-family: "Roboto-Regular";
font-size: 13px;
font-weight: 400;
color: rgba(0, 0, 0, 0.87);
line-height: 20px;
padding-left: 12px;
padding-right: 4px;
user-select: none;
white-space: nowrap;
}
.chip-close-btn {
padding-left: 7px;
padding-bottom: 6px;
border-radius: 50%;
display: inline-block;
height: 24px;
width: 24px;
user-select: none;
transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
cursor: pointer;
margin-right: 4px;
}
.chip-close-btn i {
font-size: 10px;
color: rgba(0, 0, 0, 0.258824);
fill: rgba(0, 0, 0, 0.258824);
}
.chip-close-btn:hover {
background-color: #e1e1e1;
}
Loading…
Cancel
Save