kopia lustrzana https://github.com/wagtail/wagtail
Remove dead styles from legacy dropdown
rodzic
620f4ee11f
commit
e8ead77b7a
|
|
@ -39,10 +39,6 @@
|
|||
}
|
||||
|
||||
.c-dropdown__togle--icon {
|
||||
&:before {
|
||||
display: none; // TODO: remove when iconfont styles are removed
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include svg-icon(1em, middle);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -308,11 +308,8 @@ if (!wagtail.ui) {
|
|||
const DROPDOWN_SELECTOR = '[data-dropdown]';
|
||||
const LISTING_TITLE_SELECTOR = '[data-listing-page-title]';
|
||||
const LISTING_ACTIVE_CLASS = 'listing__item--active';
|
||||
const ICON_DOWN = 'icon-arrow-down';
|
||||
const ICON_UP = 'icon-arrow-up';
|
||||
const IS_OPEN = 'is-open';
|
||||
const clickEvent = 'click';
|
||||
const TOGGLE_SELECTOR = '[data-dropdown-toggle]';
|
||||
const ARIA = 'aria-hidden';
|
||||
const keys = {
|
||||
ESC: 27,
|
||||
|
|
@ -426,15 +423,12 @@ DropDown.prototype = {
|
|||
e.preventDefault();
|
||||
const el = this.el;
|
||||
const $parent = this.$parent;
|
||||
const toggle = el.querySelector(TOGGLE_SELECTOR);
|
||||
|
||||
this.state.isOpen = true;
|
||||
this.registry.closeAllExcept(this);
|
||||
|
||||
el.classList.add(IS_OPEN);
|
||||
el.setAttribute(ARIA, false);
|
||||
toggle.classList.remove(ICON_DOWN);
|
||||
toggle.classList.add(ICON_UP);
|
||||
document.addEventListener(clickEvent, this.clickOutsideDropDown, false);
|
||||
$parent.addClass(LISTING_ACTIVE_CLASS);
|
||||
},
|
||||
|
|
@ -444,11 +438,8 @@ DropDown.prototype = {
|
|||
|
||||
const el = this.el;
|
||||
const $parent = this.$parent;
|
||||
const toggle = el.querySelector(TOGGLE_SELECTOR);
|
||||
document.removeEventListener(clickEvent, this.clickOutsideDropDown, false);
|
||||
el.classList.remove(IS_OPEN);
|
||||
toggle.classList.add(ICON_DOWN);
|
||||
toggle.classList.remove(ICON_UP);
|
||||
el.setAttribute(ARIA, true);
|
||||
$parent.removeClass(LISTING_ACTIVE_CLASS);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div {{ self.attrs }} class="c-dropdown {% if is_parent %}t-inverted{% else %}t-default{% endif %} {{ classes|join:' ' }}" data-dropdown>
|
||||
<a href="javascript:void(0)" aria-label="{{ title }}" class="c-dropdown__button u-btn-current {{button_classes|join:' ' }}">
|
||||
{{ label }}
|
||||
<div data-dropdown-toggle class="o-icon c-dropdown__toggle c-dropdown__togle--icon [ icon icon-arrow-down ]">
|
||||
<div data-dropdown-toggle class="o-icon c-dropdown__toggle c-dropdown__togle--icon">
|
||||
{% icon name="arrow-down" %}{% icon name="arrow-up" %}
|
||||
</div>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<a href="javascript:void(0)" aria-label="{{ locale.get_display_name }}" class="c-dropdown__button u-btn-current w-no-underline">
|
||||
{% icon name="site" classname="default" %}
|
||||
{{ locale.get_display_name }}
|
||||
<div data-dropdown-toggle class="o-icon c-dropdown__toggle c-dropdown__togle--icon [ icon icon-arrow-down ]">
|
||||
<div data-dropdown-toggle class="o-icon c-dropdown__toggle c-dropdown__togle--icon">
|
||||
{% icon name="arrow-down" %}{% icon name="arrow-up" %}
|
||||
</div>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -360,7 +360,7 @@
|
|||
|
||||
<div class="col3">
|
||||
<div class="dropdown dropup dropdown-button match-width">
|
||||
<button value="drop up" class="button icon icon-view">icon dropup</button>
|
||||
<button value="drop up" class="button">{% icon name="view" %}icon dropup</button>
|
||||
<div class="dropdown-toggle">{% icon name="arrow-up" %}</div>
|
||||
<ul>
|
||||
<li><a href="#">item 1</a></li>
|
||||
|
|
@ -386,7 +386,7 @@
|
|||
<div class="col3">
|
||||
<div class="dropdown dropdown-button dropdown-button--white">
|
||||
<a href="#" class="button" value="drop down">White drop down</a>
|
||||
<div class="dropdown-toggle icon icon-arrow-down"></div>
|
||||
<div class="dropdown-toggle">{% icon name="arrow-down" %}</div>
|
||||
<ul>
|
||||
<li><a href="#">items should not exceed button match-width</a></li>
|
||||
<li><a href="#">item 2</a></li>
|
||||
|
|
@ -410,7 +410,7 @@
|
|||
<div class="c-dropdown t-default" data-dropdown="">
|
||||
<a class="c-dropdown__button u-btn-current">
|
||||
More
|
||||
<div data-dropdown-toggle="" class="o-icon c-dropdown__toggle c-dropdown__togle--icon [ icon icon-arrow-down ]">
|
||||
<div data-dropdown-toggle="" class="o-icon c-dropdown__toggle c-dropdown__togle--icon">
|
||||
{% icon name="arrow-down" %}
|
||||
{% icon name="arrow-up" %}
|
||||
</div>
|
||||
|
|
@ -449,7 +449,7 @@
|
|||
<div class="c-dropdown t-inverted" data-dropdown="">
|
||||
<a class="c-dropdown__button u-btn-current">
|
||||
More
|
||||
<div data-dropdown-toggle="" class="o-icon c-dropdown__toggle c-dropdown__togle--icon [ icon icon-arrow-down ]">
|
||||
<div data-dropdown-toggle="" class="o-icon c-dropdown__toggle c-dropdown__togle--icon">
|
||||
{% icon name="arrow-down" %}
|
||||
{% icon name="arrow-up" %}
|
||||
</div>
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue