Browse Source
* Show boosted user's avatar * add .status__avatar-boost * margin * apply to notifications too. * account__avatar-boost * Add inline prop to Avatar component * Add AvatarOverlay component * rename mixins.scss * move files for latest master * fixed for webpackcustom

committed by
Eugen Rochko

7 changed files with 97 additions and 15 deletions
@ -0,0 +1,30 @@ |
|||
import React from 'react'; |
|||
import PropTypes from 'prop-types'; |
|||
|
|||
class AvatarOverlay extends React.PureComponent { |
|||
render() { |
|||
const {staticSrc, overlaySrc} = this.props; |
|||
|
|||
const baseStyle = { |
|||
backgroundImage: `url(${staticSrc})` |
|||
}; |
|||
|
|||
const overlayStyle = { |
|||
backgroundImage: `url(${overlaySrc})` |
|||
}; |
|||
|
|||
return ( |
|||
<div className='account__avatar-overlay'> |
|||
<div className="account__avatar-overlay-base" style={baseStyle} /> |
|||
<div className="account__avatar-overlay-overlay" style={overlayStyle} /> |
|||
</div> |
|||
); |
|||
} |
|||
} |
|||
|
|||
AvatarOverlay.propTypes = { |
|||
staticSrc: PropTypes.string.isRequired, |
|||
overlaySrc: PropTypes.string.isRequired, |
|||
}; |
|||
|
|||
export default AvatarOverlay; |
@ -0,0 +1,12 @@ |
|||
@mixin avatar-radius() { |
|||
border-radius: 4px; |
|||
background: transparent no-repeat; |
|||
background-position: 50%; |
|||
background-clip: padding-box; |
|||
} |
|||
|
|||
@mixin avatar-size($size:48px) { |
|||
width: $size; |
|||
height: $size; |
|||
background-size: $size $size; |
|||
} |
Loading…
Reference in new issue