mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-12-29 16:30:54 +05:30
Добавлено залипание кнопки при раскрытии Dropdown.
Класс открытого состояние перенесён на верх компонента.
This commit is contained in:
parent
8b4ea446b0
commit
c66c2ac446
@ -18,7 +18,7 @@ export default class Dropdown extends FormComponent {
|
|||||||
]).isRequired,
|
]).isRequired,
|
||||||
items: PropTypes.arrayOf(PropTypes.string).isRequired,
|
items: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||||||
block: PropTypes.bool,
|
block: PropTypes.bool,
|
||||||
color: PropTypes.oneOf(['green', 'blue', 'red', 'lightViolet', 'darkBlue', 'violet'])
|
color: PropTypes.oneOf(['green', 'blue', 'red', 'lightViolet', 'darkBlue', 'violet', 'orange'])
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
@ -42,14 +42,13 @@ export default class Dropdown extends FormComponent {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classNames(styles[color], {
|
<div className={classNames(styles[color], {
|
||||||
[styles.block]: block
|
[styles.block]: block,
|
||||||
|
[styles.opened]: isActive
|
||||||
})} {...this.props} onClick={this.onToggle}>
|
})} {...this.props} onClick={this.onToggle}>
|
||||||
{label}
|
{label}
|
||||||
<span className={styles.toggleIcon} />
|
<span className={styles.toggleIcon} />
|
||||||
|
|
||||||
<div className={classNames(styles.menu, {
|
<div className={styles.menu}>
|
||||||
[styles.menuActive]: isActive
|
|
||||||
})}>
|
|
||||||
{items.map((item, key) => (
|
{items.map((item, key) => (
|
||||||
<div className={styles.menuItem} key={key} onClick={this.onSelectItem(item)}>
|
<div className={styles.menuItem} key={key} onClick={this.onSelectItem(item)}>
|
||||||
{item}
|
{item}
|
||||||
|
@ -14,7 +14,8 @@ $dropdownPadding: 15px;
|
|||||||
background-color: lighter($backgroundColor);
|
background-color: lighter($backgroundColor);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active { // TODO: +.open, чтобы он был ужатый в раскрытом состоянии
|
&:active,
|
||||||
|
&.opened {
|
||||||
background-color: darker($backgroundColor);
|
background-color: darker($backgroundColor);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -42,6 +43,10 @@ $dropdownPadding: 15px;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.opened {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
.toggleIcon {
|
.toggleIcon {
|
||||||
composes: selecter from 'components/ui/icons.scss';
|
composes: selecter from 'components/ui/icons.scss';
|
||||||
|
|
||||||
@ -55,7 +60,8 @@ $dropdownPadding: 15px;
|
|||||||
right: $dropdownPadding - 5px;
|
right: $dropdownPadding - 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown:active & { // TODO: + .open, смотри коммент выше
|
.dropdown:active &,
|
||||||
|
.dropdown.opened & {
|
||||||
right: $dropdownPadding + 5px;
|
right: $dropdownPadding + 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -84,11 +90,11 @@ $dropdownPadding: 15px;
|
|||||||
transition-property: opacity, visibility;
|
transition-property: opacity, visibility;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
|
||||||
|
|
||||||
.menuActive {
|
.dropdown.opened & {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.menuItem {
|
.menuItem {
|
||||||
|
Loading…
Reference in New Issue
Block a user