esr360

/// Map Search
/// Get the first occurance of a key from a nested map
///
/// @author [@esr360](http://twitter.com/esr360)
///
/// @access public
/// @group Tools
///
/// @param {map} $map - the map you would like to search
/// @param {string} $target-key - the key you are searching for

esr360

// Requirements
var sass = require('node-sass');
var fs = require('fs');
var mkdirp = require('mkdirp');
var getDirName = require('path').dirname;

function compileSass(options = {}) {
    // set default options
    options = Object.assign({
        style: 'expanded'

esr360

var sass = require('node-sass');
sass.render({
    file: scss_filename,
    [, options..]
}, function(err, result) { /*...*/ });
// OR
var result = sass.renderSync({
    data: scss_content
    [, options..]
});

esr360

import * as app from '../../app';

/**
 * Determine if an element is in the viewport
 * 
 * @access public
 * 
 * @param {Object} custom - where custom options are passed
 */
export function inViewport(custom) {

esr360

@include module('header') {
    @include component('social-links') {
        @include _module('list', ('reset', 'inline'), false);

        @include component('item') {
            @include _module('button', (
                'brand-1-light', 'circle', 'icon', 'border', 'size-3'
            ));
        }
    }

esr360

const MODULE = 'accordion';

document.querySelectorAll(`.${MODULE}`).forEach(accordion => {
    const panels = accordion.querySelectorAll(`.${MODULE}__panel`);

    panels.forEach(panel => {
        const TITLE = panel.querySelector(`.${MODULE}__title`);
        const CONTENT = panel.querySelector(`.${MODULE}__content`);
        ...
    });

esr360

.accordion {
    color: map-get($colors, brand-2); 
    ...
}

esr360

@import 'modules/utilities/colors/colors';
@import 'modules/elements/accordion/accordion';

esr360

//*****************************************************************
// Utilities
//*****************************************************************

@import 'modules/utilities/grid/grid';
@import 'modules/utilities/colors/colors';
@import 'modules/utilities/container/container';
@import 'modules/utilities/typography/typography';
@import 'modules/utilities/core/core';
@import 'modules/utilities/helpers/helpers';

esr360

@mixin accordion($custom: ()) {

    $options: map-merge((
        panel-bg: #,
        panel-text-color: #
    ), $custom);

    .accordion {
        &__panel {
            background: map-get($options, panel-bg);