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