diff --git a/src/components/SelectSingleFilter/SelectSingleFilter.css b/src/components/SelectSingleFilter/SelectSingleFilter.css deleted file mode 100644 index 06edfcff..00000000 --- a/src/components/SelectSingleFilter/SelectSingleFilter.css +++ /dev/null @@ -1,127 +0,0 @@ -@import '../../marketplace.css'; - -.root { - display: inline-block; - - &:last-of-type { - padding-right: 0; - } -} - -.menuLabel { - @apply --marketplaceButtonStylesSecondary; - @apply --marketplaceSearchFilterLabelFontStyles; - - padding: 9px 16px 10px 16px; - width: auto; - height: auto; - min-height: 0; - border-radius: 4px; - - &:focus { - outline: none; - background-color: var(--matterColorLight); - border-color: transparent; - text-decoration: none; - box-shadow: var(--boxShadowFilterButton); - } -} - -.menuLabelSelected { - @apply --marketplaceButtonStyles; - @apply --marketplaceSearchFilterLabelFontStyles; - font-weight: var(--fontWeightSemiBold); - - padding: 9px 16px 10px 16px; - width: auto; - height: auto; - min-height: 0; - border-radius: 4px; - border: 1px solid var(--marketplaceColor); - - &:hover, - &:focus { - border: 1px solid var(--marketplaceColorDark); - } -} - -.menuContent { - margin-top: 7px; - padding-top: 13px; - min-width: 300px; - border-radius: 4px; -} - -/* left animated "border" like hover element */ -.menuItemBorder { - position: absolute; - top: 2px; - left: 0px; - height: calc(100% - 4px); - width: 0; - background-color: var(--marketplaceColor); - transition: width var(--transitionStyleButton); -} - -/* left static border for selected element */ -.menuItemBorderSelected { - position: absolute; - top: 2px; - left: 0px; - height: calc(100% - 7px); - width: 6px; - background-color: var(--matterColorDark); -} - -.menuItem { - @apply --marketplaceListingAttributeFontStyles; - color: var(--matterColor); - - /* Layout */ - position: relative; - min-width: 300px; - margin: 0; - padding: 4px 30px; - - /* Override button styles */ - outline: none; - text-align: left; - border: none; - - cursor: pointer; - - &:focus, - &:hover { - color: var(--matterColorDark); - } - - &:hover .menuItemBorder { - width: 6px; - } -} - -.clearMenuItem { - @apply --marketplaceH4FontStyles; - font-weight: var(--fontWeightMedium); - color: var(--matterColorAnti); - - /* Layout */ - position: relative; - min-width: 300px; - margin: 0; - padding: 32px 30px 18px 30px; - - /* Override button styles */ - outline: none; - text-align: left; - border: none; - - cursor: pointer; - transition: width var(--transitionStyleButton); - - &:focus, - &:hover { - color: var(--matterColor); - transition: width var(--transitionStyleButton); - } -} diff --git a/src/components/SelectSingleFilterPlain/SelectSingleFilterPlain.css b/src/components/SelectSingleFilterPlain/SelectSingleFilterPlain.css deleted file mode 100644 index 8460c5df..00000000 --- a/src/components/SelectSingleFilterPlain/SelectSingleFilterPlain.css +++ /dev/null @@ -1,151 +0,0 @@ -@import '../../marketplace.css'; - -.root { - padding-top: 24px; - padding-bottom: 17px; - border-bottom: 1px solid var(--matterColorNegative); -} - -.filterLabel, -.filterLabelSelected { - @apply --marketplaceH3FontStyles; - - /* Baseline adjustment for label text */ - margin-top: 0; - margin-bottom: 12px; - padding: 4px 0 2px 0; -} - -.filterLabel { - color: var(--matterColorDark); -} - -.filterLabelSelected { - color: var(--marketplaceColor); -} - -.labelButton { - /* Override button styles */ - outline: none; - text-align: left; - border: none; - padding: 0; - cursor: pointer; -} - -.optionsContainerOpen { - height: auto; - padding-bottom: 30px; -} - -.optionsContainerClosed { - height: 0; - overflow: hidden; -} - -.hasBullets { - padding-left: 26px; -} - -.twoColumns { - @media (--viewportMedium) { - column-count: 2; - } -} - -.optionBorder, -.optionBorderSelected { - position: absolute; - height: calc(100% - 12px); - top: 4px; - left: -24px; - transition: width var(--transitionStyleButton); -} - -/* left animated "border" like hover element */ -.optionBorder { - width: 0; - background-color: var(--matterColorDark); -} - -/* left static border for selected element */ -.optionBorderSelected { - width: 8px; - background-color: var(--matterColorDark); -} - -.optionBullet, -.optionBulletSelected { - position: absolute; - left: -5px; - top: 13px; - width: 8px; - height: 8px; - border-radius: 4px; - background-color: var(--marketplaceColor); - transition: opacity var(--transitionStyleButton); -} - -/* left animated "border" like hover element */ -.optionBullet { - opacity: 0; -} - -/* left static border for selected element */ -.optionBulletSelected { - opacity: 1; -} - -.option { - @apply --marketplaceH4FontStyles; - font-weight: var(--fontWeightMedium); - font-size: 18px; - color: var(--matterColor); - - /* Layout */ - display: block; - position: relative; - margin: 0; - padding: 4px 0 8px 20px; - - /* Override button styles */ - outline: none; - border: none; - cursor: pointer; - - &:focus, - &:hover { - color: var(--matterColorDark); - } - - &:hover .menuItemBorder { - width: 6px; - } -} - -.optionSelected { - composes: option; - color: var(--matterColorDark); -} - -.clearButton { - @apply --marketplaceH5FontStyles; - font-weight: var(--fontWeightMedium); - color: var(--matterColorAnti); - - /* Layout */ - display: inline; - float: right; - margin-top: 6px; - padding: 0; - - /* Override button styles */ - outline: none; - text-align: left; - border: none; - - &:focus, - &:hover { - color: var(--matterColor); - } -} diff --git a/src/components/SelectSingleFilterPlain/SelectSingleFilterPlain.js b/src/components/SelectSingleFilterPlain/SelectSingleFilterPlain.js deleted file mode 100644 index 63a085c9..00000000 --- a/src/components/SelectSingleFilterPlain/SelectSingleFilterPlain.js +++ /dev/null @@ -1,121 +0,0 @@ -import React, { Component } from 'react'; -import { arrayOf, bool, func, shape, string } from 'prop-types'; -import classNames from 'classnames'; -import { FormattedMessage } from 'react-intl'; - -import css from './SelectSingleFilterPlain.css'; - -class SelectSingleFilterPlain extends Component { - constructor(props) { - super(props); - this.state = { isOpen: true }; - this.selectOption = this.selectOption.bind(this); - this.toggleIsOpen = this.toggleIsOpen.bind(this); - } - - selectOption(option, e) { - const { urlParam, onSelect } = this.props; - onSelect(urlParam, option); - - // blur event target if event is passed - if (e && e.currentTarget) { - e.currentTarget.blur(); - } - } - - toggleIsOpen() { - this.setState({ isOpen: !this.state.isOpen }); - } - - render() { - const { - rootClassName, - className, - label, - options, - initialValue, - twoColumns, - useBullets, - } = this.props; - - const labelClass = initialValue ? css.filterLabelSelected : css.filterLabel; - - const hasBullets = useBullets || twoColumns; - const optionsContainerClass = classNames({ - [css.optionsContainerOpen]: this.state.isOpen, - [css.optionsContainerClosed]: !this.state.isOpen, - [css.hasBullets]: hasBullets, - [css.twoColumns]: twoColumns, - }); - - const classes = classNames(rootClassName || css.root, className); - - return ( -