Remove dead styles from legacy dropdown

pull/10291/head
Thibaud Colas 2023-03-24 14:58:13 +00:00
rodzic 620f4ee11f
commit e8ead77b7a
5 zmienionych plików z 6 dodań i 19 usunięć

Wyświetl plik

@ -39,10 +39,6 @@
}
.c-dropdown__togle--icon {
&:before {
display: none; // TODO: remove when iconfont styles are removed
}
.icon {
@include svg-icon(1em, middle);
}

Wyświetl plik

@ -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);
},

Wyświetl plik

@ -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>

Wyświetl plik

@ -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>

Wyświetl plik

@ -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>