PDJ Brandbox

select-checkboxes 

<div class="select-checkboxes">
    <div class="select-checkboxes__inner">
        <label class="select-checkboxes__label">Filter by</label>

        <span class="select-checkboxes__value"></span>

        <span class="select-checkboxes__trigger">
            <span class="select-checkboxes__symbol"><svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                    <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                </svg>
            </span>
        </span>
    </div>

    <div class="select-checkboxes__content">
        <div class="select-checkboxes__options">
            <ul class="select-checkboxes__items">

                <li class="select-checkboxes__item">
                    <div class="checkbox">
                        <label class="checkbox__inner">
                            <input type="checkbox" name="option[]" value="Option 1">

                            <span class="checkbox__spoof">
                                <span class="checkbox__icon">
                                    <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
                                        <path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
                                    </svg>

                                </span>
                            </span>

                            <span class="checkbox__label">
                                Option
                            </span>
                        </label>
                    </div>

                </li>

                <li class="select-checkboxes__item">
                    <div class="checkbox">
                        <label class="checkbox__inner">
                            <input type="checkbox" name="option[]" value="Option 2">

                            <span class="checkbox__spoof">
                                <span class="checkbox__icon">
                                    <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
                                        <path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
                                    </svg>

                                </span>
                            </span>

                            <span class="checkbox__label">
                                Option
                            </span>
                        </label>
                    </div>

                </li>

                <li class="select-checkboxes__item">
                    <div class="checkbox">
                        <label class="checkbox__inner">
                            <input type="checkbox" name="option[]" value="Option 3">

                            <span class="checkbox__spoof">
                                <span class="checkbox__icon">
                                    <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
                                        <path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
                                    </svg>

                                </span>
                            </span>

                            <span class="checkbox__label">
                                Option
                            </span>
                        </label>
                    </div>

                </li>

                <li class="select-checkboxes__item">
                    <div class="checkbox">
                        <label class="checkbox__inner">
                            <input type="checkbox" name="option[]" value="Option 4" checked>

                            <span class="checkbox__spoof">
                                <span class="checkbox__icon">
                                    <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
                                        <path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
                                    </svg>

                                </span>
                            </span>

                            <span class="checkbox__label">
                                Option
                            </span>
                        </label>
                    </div>

                </li>

                <li class="select-checkboxes__item">
                    <div class="checkbox">
                        <label class="checkbox__inner">
                            <input type="checkbox" name="option[]" value="Option 5" checked>

                            <span class="checkbox__spoof">
                                <span class="checkbox__icon">
                                    <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
                                        <path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
                                    </svg>

                                </span>
                            </span>

                            <span class="checkbox__label">
                                Option
                            </span>
                        </label>
                    </div>

                </li>

                <li class="select-checkboxes__item">
                    <div class="checkbox">
                        <label class="checkbox__inner">
                            <input type="checkbox" name="option[]" value="Option 6">

                            <span class="checkbox__spoof">
                                <span class="checkbox__icon">
                                    <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
                                        <path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
                                    </svg>

                                </span>
                            </span>

                            <span class="checkbox__label">
                                Option
                            </span>
                        </label>
                    </div>

                </li>

                <li class="select-checkboxes__item">
                    <div class="checkbox">
                        <label class="checkbox__inner">
                            <input type="checkbox" name="option[]" value="Option 7">

                            <span class="checkbox__spoof">
                                <span class="checkbox__icon">
                                    <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
                                        <path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
                                    </svg>

                                </span>
                            </span>

                            <span class="checkbox__label">
                                Option
                            </span>
                        </label>
                    </div>

                </li>

            </ul>

            <div class="select-checkboxes__actions">
                <div class="actions actions--end">
                    <div class="actions__item">

                        <a href="#" target="_blank" class="select-checkboxes__action action action--normal action--on-light">
                            <span class="action__label">Apply filters</span>
                            <span class="action__bg"></span>
                        </a>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="select-checkboxes">
  <div class="select-checkboxes__inner">
    <label class="select-checkboxes__label">{{ label }}</label>

    <span class="select-checkboxes__value"></span>

    <span class="select-checkboxes__trigger">
      <span class="select-checkboxes__symbol">{{render '@icon-chevron' }}</span>
    </span>
  </div>

  <div class="select-checkboxes__content">
    <div class="select-checkboxes__options">
      <ul class="select-checkboxes__items">
        {{#each items }}

          <li class="select-checkboxes__item">
            {{render '@checkbox' this }}
          </li>

        {{/each}}
      </ul>

      <div class="select-checkboxes__actions">
        <div class="actions actions--end">
          <div class="actions__item">
            {{render '@action' action merge=true }}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
 
label: Filter by
items:
  - label: Option
    name: option[]
    value: Option 1
  - label: Option
    name: option[]
    value: Option 2
  - label: Option
    name: option[]
    value: Option 3
  - label: Option
    name: option[]
    value: Option 4
    checked: true
  - label: Option
    name: option[]
    value: Option 5
    checked: true
  - label: Option
    name: option[]
    value: Option 6
  - label: Option
    name: option[]
    value: Option 7
action:
  label: Apply filters
  class: select-checkboxes__action
  submit: true
  • Content: 
    const SELECTCHECKBOXES = ((w, d, undefined) => {

  'use strict';

  const selectors = {
    theWrap: '.select-checkboxes',
    theTrigger: '.select-checkboxes__inner',
    theValue: '.select-checkboxes__value',
    theContent: '.select-checkboxes__content',
    theOptions: '.select-checkboxes__options',
    theOption: 'input[type="checkbox"]',
  };

  const classes = {
    hasValue: 'has-value',
    isVisible: 'is-visible',
  };

  const els = {};

  let timer = null;

  const onInit = () => {
    els.theWrap = d.querySelector(selectors.theWrap);

    if (!els.theWrap) {
      return;
    }

    els.theTrigger = els.theWrap.querySelector(selectors.theTrigger);
    els.theValue   = els.theWrap.querySelector(selectors.theValue);
    els.theContent = els.theWrap.querySelector(selectors.theContent);
    els.theOptions = els.theWrap.querySelector(selectors.theOptions);

    bindIt();
    setHeight();
    setValue();
  };

  const onResize = () => {
    clearTimeout(timer);

    timer = setTimeout(() => {
      setHeight();
    }, 200);
  };

  const bindIt = () => {
    els.theTrigger.addEventListener('click', (e) => {
      e.preventDefault();
      toggleIt();
    });
  };

  const setHeight = () => {
    if (!els.theContent) { return; }

    els.theContent.style.height = els.theOptions.offsetHeight + 'px';
  };

  const toggleIt = () => !els.theWrap.classList.contains(classes.isVisible) ? showIt() : hideIt();
  const showIt   = () => els.theWrap.classList.add(classes.isVisible);
  const hideIt   = () => els.theWrap.classList.remove(classes.isVisible);

  const setValue = () => {
    const theOptions = els.theWrap.querySelectorAll(selectors.theOption);
    const values = [];

    [...theOptions].forEach(theOption => theOption.checked && values.push(theOption.value));

    els.theValue.innerHTML = values.join(', ');

    els.theWrap.classList.toggle(classes.hasValue, values.length > 0);

    hideIt();
  };

  d.addEventListener('DOMContentLoaded', onInit);
  w.addEventListener('resize', onResize);

  return {};

})(window, window.document);
  • URL: /components/raw/select-checkboxes/select-checkboxes.js
  • Filesystem Path: ../src/02_atoms/select-checkboxes/select-checkboxes.js
  • Size: 2.1 KB
  • Content: 
    .select-checkboxes {
  position: relative;
}

.select-checkboxes__inner {
  @media (max-width: 599px) {
    position: relative;
    width: 100%;
    height: var(--atom-height);
    padding: 0 var(--gap--4);
    border: 1px solid var(--color--neutrals-10);
    cursor: pointer;
  }
}

.select-checkboxes__label {
  @media (max-width: 599px) {
    transition: height 250ms, opacity 250ms, font-size 250ms;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 var(--gap--4);
    color: var(--color--neutrals-7);
    pointer-events: none;
  }

  .select-checkboxes.has-value & {
    @media (max-width: 599px) {
      height: 20px;
      font-size: 10px;
      opacity: .7;
    }
  }
}

.select-checkboxes__value {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--atom-height);
  padding-right: 30px;
  overflow: hidden;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;

  .select-checkboxes.has-value & {
    padding-top: var(--gap--3);
  }

  @media (min-width: 600px) {
    display: none;
  }
}

.select-checkboxes__trigger {
  transition: transform 250ms;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  padding-right: var(--gap--4);
  pointer-events: none;

  @media (min-width: 600px) {
    display: none;
  }

  .select-checkboxes.is-visible & {
    @media (max-width: 599px) {
      transform: rotateX(180deg);
    }
  }
}

.select-checkboxes__symbol {
  @media (max-width: 599px) {
    transform: rotate(90deg);
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
  }
}

.select-checkboxes__symbol svg {
  width: 100%;
  height: 100%;
}

.select-checkboxes__content {
  @media (max-width: 599px) {
    transition: height 250ms, opacity 250ms;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    overflow: hidden;
    background-color: var(--color--neutrals-0);
    opacity: 1;
    pointer-events: all;
  }

  .select-checkboxes:not(.is-visible) & {
    @media (max-width: 599px) {
      height: 0 !important;
      opacity: 0;
      pointer-events: none;
    }
  }
}

.select-checkboxes__options {
  @media (max-width: 599px) {
    transform: translateY(-1px);
    padding: 0 var(--gap--4);
    border: 1px solid var(--color--neutrals-10);
  }
}

.select-checkboxes__items {
  max-height: 180px;
  margin: 0;
  padding: var(--gap--4) 0 0;
  overflow: auto;
  list-style: none;

  @media (min-width: 600px) {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -8px;
    padding-top: var(--gap--2);
  }
}

.select-checkboxes__item {
  margin-bottom: var(--gap--4);

  @media (min-width: 600px) {
    display: block;
    flex: 0 0 25%;
    margin-bottom: 8px;
    padding-right: var(--gap--4);
  }

  &:last-child {
    margin-bottom: 0;
  }
}

.select-checkboxes__actions {
  padding: var(--gap--4) 0;

  @media (min-width: 600px) {
    margin-top: var(--gap--4);
    padding: 0;
  }
}
  • URL: /components/raw/select-checkboxes/select-checkboxes.scss
  • Filesystem Path: ../src/02_atoms/select-checkboxes/select-checkboxes.scss
  • Size: 3.1 KB

No notes defined.