diff --git a/packages/xod-client/src/core/components/CloseButton.jsx b/packages/xod-client/src/core/components/CloseButton.jsx new file mode 100644 index 00000000..22c0789b --- /dev/null +++ b/packages/xod-client/src/core/components/CloseButton.jsx @@ -0,0 +1,23 @@ +import React from 'react'; +import cn from 'classnames'; +import PropTypes from 'prop-types'; + +const CloseButton = ({ + as = 'button', + className, + ...restProps +}) => React.createElement( + as, + { + ...restProps, + className: cn('CloseButton', className), + role: as !== 'button' ? 'button' : restProps.role, + } +); + +CloseButton.propTypes = { + as: PropTypes.string, + className: PropTypes.string, +}; + +export default CloseButton; diff --git a/packages/xod-client/src/core/styles/components/CloseButton.scss b/packages/xod-client/src/core/styles/components/CloseButton.scss new file mode 100644 index 00000000..bfd80edf --- /dev/null +++ b/packages/xod-client/src/core/styles/components/CloseButton.scss @@ -0,0 +1,52 @@ +.CloseButton { + position: absolute; + right: 0; + top: 0; + width: 32px; + height: 32px; + + background: transparent; + border: 0; + + cursor: pointer; + + line-height: 0; + font-size: $font-size-xs; + color: $chalk; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + outline: none; + + &:hover, &:focus { + outline: none; + + &:before { + background-color: $black; + } + } + + &:before { + content: ''; + position: absolute; + top: 6px; + right: 6px; + width: 18px; + height: 18px; + background-color: rgba($black, .5); + border-radius: 100%; + border: 0; + } + + &:after { + content: '╳'; + display: inline; + position: absolute; + top: 15px; + width: 18px; + right: 6px; + z-index: 2; + } +} diff --git a/packages/xod-client/src/core/styles/main.scss b/packages/xod-client/src/core/styles/main.scss index 6deae435..6033fb9e 100644 --- a/packages/xod-client/src/core/styles/main.scss +++ b/packages/xod-client/src/core/styles/main.scss @@ -18,6 +18,7 @@ 'components/BackgroundLayer', 'components/Breadcrumbs', 'components/Button', + 'components/CloseButton', 'components/Comment', 'components/CppImplementationEditor', 'components/Debugger',