va_common 0.2.3 → 0.2.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e415eac23ed1615110d9569e5b2cd99db0cd3061
-  data.tar.gz: 2c4cf5cc45f20bc6a11be295b9a9eae26d2e3d98
+  metadata.gz: 5eb6ee7fe27b9149a9a232f64a924edd1fd9184f
+  data.tar.gz: eb5bc4f306dc64347c05a0726076940b3e93a722
 SHA512:
-  metadata.gz: 40d8a2a8e5c68c049f2a788ee3c60f17e693becc5350c098e929808a52aa422eeff542730626a3b34849e87a7b10013466278c8f696e9d57bbc92127aebda223
-  data.tar.gz: eafba2375964a3c83a221be50f300dbbc6eea950c6fbbd90bf1c93a92a6b8180e225e44976147873a8d432e370226b4b156f855ea8075d1e932d6a0b11ea9f15
+  metadata.gz: 3c15e00af31a0b4b6776b4e216a1d3f7413f3d45414b11b6dc3c67f2fd65a9c80372b3915110df08fdd0fa9887b33a522b3f792a0a6e8235a5e1bb88e4e3fd74
+  data.tar.gz: 55090e29ed3ccc0a54e415e882e1a7c83704c3c3d1b05c16c8fc51bc7556e57571197ea2e0530dfa17592d2698ecd0eed989b524a75b215c5243c16bb9d79816

data/app/assets/js/va_common_main.js

@@ -4,6 +4,7 @@
 //= require jquery.stellar
 //= require html5shiv
 //= require foundation
+//= require vendor/foundation.reveal
 //= require modernizr
 //= require components
 //= require respond

data/app/assets/js/vendor/foundation.reveal.js

@@ -0,0 +1,498 @@
+;(function ($, window, document, undefined) {
+  'use strict';
+
+  Foundation.libs.reveal = {
+    name : 'reveal',
+
+    version : '5.5.2',
+
+    locked : false,
+
+    settings : {
+      animation : 'fadeAndPop',
+      animation_speed : 250,
+      close_on_background_click : true,
+      close_on_esc : true,
+      dismiss_modal_class : 'close-reveal-modal',
+      multiple_opened : false,
+      bg_class : 'reveal-modal-bg',
+      root_element : 'body',
+      open : function(){},
+      opened : function(){},
+      close : function(){},
+      closed : function(){},
+      on_ajax_error: $.noop,
+      bg : $('.reveal-modal-bg'),
+      css : {
+        open : {
+          'opacity' : 0,
+          'visibility' : 'visible',
+          'display' : 'block'
+        },
+        close : {
+          'opacity' : 1,
+          'visibility' : 'hidden',
+          'display' : 'none'
+        }
+      }
+    },
+
+    init : function (scope, method, options) {
+      $.extend(true, this.settings, method, options);
+      this.bindings(method, options);
+    },
+
+    events : function (scope) {
+      var self = this,
+          S = self.S;
+
+      S(this.scope)
+        .off('.reveal')
+        .on('click.fndtn.reveal', '[' + this.add_namespace('data-reveal-id') + ']:not([disabled])', function (e) {
+          e.preventDefault();
+
+          if (!self.locked) {
+            var element = S(this),
+                ajax = element.data(self.data_attr('reveal-ajax')),
+                replaceContentSel = element.data(self.data_attr('reveal-replace-content'));
+
+            self.locked = true;
+
+            if (typeof ajax === 'undefined') {
+              self.open.call(self, element);
+            } else {
+              var url = ajax === true ? element.attr('href') : ajax;
+              self.open.call(self, element, {url : url}, { replaceContentSel : replaceContentSel });
+            }
+          }
+        });
+
+      S(document)
+        .on('click.fndtn.reveal', this.close_targets(), function (e) {
+          e.preventDefault();
+          if (!self.locked) {
+            var settings = S('[' + self.attr_name() + '].open').data(self.attr_name(true) + '-init') || self.settings,
+                bg_clicked = S(e.target)[0] === S('.' + settings.bg_class)[0];
+
+            if (bg_clicked) {
+              if (settings.close_on_background_click) {
+                e.stopPropagation();
+              } else {
+                return;
+              }
+            }
+
+            self.locked = true;
+            self.close.call(self, bg_clicked ? S('[' + self.attr_name() + '].open:not(.toback)') : S(this).closest('[' + self.attr_name() + ']'));
+          }
+        });
+
+      if (S('[' + self.attr_name() + ']', this.scope).length > 0) {
+        S(this.scope)
+          // .off('.reveal')
+          .on('open.fndtn.reveal', this.settings.open)
+          .on('opened.fndtn.reveal', this.settings.opened)
+          .on('opened.fndtn.reveal', this.open_video)
+          .on('close.fndtn.reveal', this.settings.close)
+          .on('closed.fndtn.reveal', this.settings.closed)
+          .on('closed.fndtn.reveal', this.close_video);
+      } else {
+        S(this.scope)
+          // .off('.reveal')
+          .on('open.fndtn.reveal', '[' + self.attr_name() + ']', this.settings.open)
+          .on('opened.fndtn.reveal', '[' + self.attr_name() + ']', this.settings.opened)
+          .on('opened.fndtn.reveal', '[' + self.attr_name() + ']', this.open_video)
+          .on('close.fndtn.reveal', '[' + self.attr_name() + ']', this.settings.close)
+          .on('closed.fndtn.reveal', '[' + self.attr_name() + ']', this.settings.closed)
+          .on('closed.fndtn.reveal', '[' + self.attr_name() + ']', this.close_video);
+      }
+
+      return true;
+    },
+
+    // PATCH #3: turning on key up capture only when a reveal window is open
+    key_up_on : function (scope) {
+      var self = this;
+
+      // PATCH #1: fixing multiple keyup event trigger from single key press
+      self.S('body').off('keyup.fndtn.reveal').on('keyup.fndtn.reveal', function ( event ) {
+        var open_modal = self.S('[' + self.attr_name() + '].open'),
+            settings = open_modal.data(self.attr_name(true) + '-init') || self.settings ;
+        // PATCH #2: making sure that the close event can be called only while unlocked,
+        //           so that multiple keyup.fndtn.reveal events don't prevent clean closing of the reveal window.
+        if ( settings && event.which === 27  && settings.close_on_esc && !self.locked) { // 27 is the keycode for the Escape key
+          self.close.call(self, open_modal);
+        }
+      });
+
+      return true;
+    },
+
+    // PATCH #3: turning on key up capture only when a reveal window is open
+    key_up_off : function (scope) {
+      this.S('body').off('keyup.fndtn.reveal');
+      return true;
+    },
+
+    open : function (target, ajax_settings) {
+      var self = this,
+          modal;
+
+      if (target) {
+        if (typeof target.selector !== 'undefined') {
+          // Find the named node; only use the first one found, since the rest of the code assumes there's only one node
+          modal = self.S('#' + target.data(self.data_attr('reveal-id'))).first();
+        } else {
+          modal = self.S(this.scope);
+
+          ajax_settings = target;
+        }
+      } else {
+        modal = self.S(this.scope);
+      }
+
+      var settings = modal.data(self.attr_name(true) + '-init');
+      settings = settings || this.settings;
+
+
+      if (modal.hasClass('open') && target.attr('data-reveal-id') == modal.attr('id')) {
+        return self.close(modal);
+      }
+
+      if (!modal.hasClass('open')) {
+        var open_modal = self.S('[' + self.attr_name() + '].open');
+
+        if (typeof modal.data('css-top') === 'undefined') {
+          modal.data('css-top', parseInt(modal.css('top'), 10))
+            .data('offset', this.cache_offset(modal));
+        }
+
+        modal.attr('tabindex','0').attr('aria-hidden','false');
+
+        this.key_up_on(modal);    // PATCH #3: turning on key up capture only when a reveal window is open
+
+        // Prevent namespace event from triggering twice
+        modal.on('open.fndtn.reveal', function(e) {
+          if (e.namespace !== 'fndtn.reveal') return;
+        });
+
+        modal.on('open.fndtn.reveal').trigger('open.fndtn.reveal');
+
+        if (open_modal.length < 1) {
+          this.toggle_bg(modal, true);
+        }
+
+        if (typeof ajax_settings === 'string') {
+          ajax_settings = {
+            url : ajax_settings
+          };
+        }
+
+        if (typeof ajax_settings === 'undefined' || !ajax_settings.url) {
+          if (open_modal.length > 0) {
+            if (settings.multiple_opened) {
+              self.to_back(open_modal);
+            } else {
+              self.hide(open_modal, settings.css.close);
+            }
+          }
+
+          this.show(modal, settings.css.open);
+        } else {
+          var old_success = typeof ajax_settings.success !== 'undefined' ? ajax_settings.success : null;
+          $.extend(ajax_settings, {
+            success : function (data, textStatus, jqXHR) {
+              if ( $.isFunction(old_success) ) {
+                var result = old_success(data, textStatus, jqXHR);
+                if (typeof result == 'string') {
+                  data = result;
+                }
+              }
+
+              if (typeof options !== 'undefined' && typeof options.replaceContentSel !== 'undefined') {
+                modal.find(options.replaceContentSel).html(data);
+              } else {
+                modal.html(data);
+              }
+
+              self.S(modal).foundation('section', 'reflow');
+              self.S(modal).children().foundation();
+
+              if (open_modal.length > 0) {
+                if (settings.multiple_opened) {
+                  self.to_back(open_modal);
+                } else {
+                  self.hide(open_modal, settings.css.close);
+                }
+              }
+              self.show(modal, settings.css.open);
+            }
+          });
+
+          // check for if user initalized with error callback
+          if (settings.on_ajax_error !== $.noop) {
+            $.extend(ajax_settings, {
+              error : settings.on_ajax_error
+            });
+          }
+
+          $.ajax(ajax_settings);
+        }
+      }
+      self.S(window).trigger('resize');
+    },
+
+    close : function (modal) {
+      var modal = modal && modal.length ? modal : this.S(this.scope),
+          open_modals = this.S('[' + this.attr_name() + '].open'),
+          settings = modal.data(this.attr_name(true) + '-init') || this.settings,
+          self = this;
+
+      if (open_modals.length > 0) {
+
+        modal.removeAttr('tabindex','0').attr('aria-hidden','true');
+
+        this.locked = true;
+        this.key_up_off(modal);   // PATCH #3: turning on key up capture only when a reveal window is open
+
+        modal.trigger('close.fndtn.reveal');
+
+        if ((settings.multiple_opened && open_modals.length === 1) || !settings.multiple_opened || modal.length > 1) {
+          self.toggle_bg(modal, false);
+          self.to_front(modal);
+        }
+
+        if (settings.multiple_opened) {
+          self.hide(modal, settings.css.close, settings);
+          self.to_front($($.makeArray(open_modals).reverse()[1]));
+        } else {
+          self.hide(open_modals, settings.css.close, settings);
+        }
+      }
+    },
+
+    close_targets : function () {
+      var base = '.' + this.settings.dismiss_modal_class;
+
+      if (this.settings.close_on_background_click) {
+        return base + ', .' + this.settings.bg_class;
+      }
+
+      return base;
+    },
+
+    toggle_bg : function (modal, state) {
+      if (this.S('.' + this.settings.bg_class).length === 0) {
+        this.settings.bg = $('<div />', {'class': this.settings.bg_class})
+          .appendTo('body').hide();
+      }
+
+      var visible = this.settings.bg.filter(':visible').length > 0;
+      if ( state != visible ) {
+        if ( state == undefined ? visible : !state ) {
+          this.hide(this.settings.bg);
+        } else {
+          this.show(this.settings.bg);
+        }
+      }
+    },
+
+    show : function (el, css) {
+      // is modal
+      if (css) {
+        var settings = el.data(this.attr_name(true) + '-init') || this.settings,
+            root_element = settings.root_element,
+            context = this;
+
+        if (el.parent(root_element).length === 0) {
+          var placeholder = el.wrap('<div style="display: none;" />').parent();
+
+          el.on('closed.fndtn.reveal.wrapped', function () {
+            el.detach().appendTo(placeholder);
+            el.unwrap().unbind('closed.fndtn.reveal.wrapped');
+          });
+
+          el.detach().appendTo(root_element);
+        }
+
+        var animData = getAnimationData(settings.animation);
+        if (!animData.animate) {
+          this.locked = false;
+        }
+        if (animData.pop) {
+          css.top = $(window).scrollTop() - el.data('offset') + 'px';
+          var end_css = {
+            top: $(window).scrollTop() + el.data('css-top') + 'px',
+            opacity: 1
+          };
+
+          return setTimeout(function () {
+            return el
+              .css(css)
+              .animate(end_css, settings.animation_speed, 'linear', function () {
+                context.locked = false;
+                el.trigger('opened.fndtn.reveal');
+              })
+              .addClass('open');
+          }, settings.animation_speed / 2);
+        }
+
+        if (animData.fade) {
+          css.top = $(window).scrollTop() + el.data('css-top') + 'px';
+          var end_css = {opacity: 1};
+
+          return setTimeout(function () {
+            return el
+              .css(css)
+              .animate(end_css, settings.animation_speed, 'linear', function () {
+                context.locked = false;
+                el.trigger('opened.fndtn.reveal');
+              })
+              .addClass('open');
+          }, settings.animation_speed / 2);
+        }
+
+        return el.css(css).show().css({opacity : 1}).addClass('open').trigger('opened.fndtn.reveal');
+      }
+
+      var settings = this.settings;
+
+      // should we animate the background?
+      if (getAnimationData(settings.animation).fade) {
+        return el.fadeIn(settings.animation_speed / 2);
+      }
+
+      this.locked = false;
+
+      return el.show();
+    },
+
+    to_back : function(el) {
+      el.addClass('toback');
+    },
+
+    to_front : function(el) {
+      el.removeClass('toback');
+    },
+
+    hide : function (el, css) {
+      // is modal
+      if (css) {
+        var settings = el.data(this.attr_name(true) + '-init'),
+            context = this;
+        settings = settings || this.settings;
+
+        var animData = getAnimationData(settings.animation);
+        if (!animData.animate) {
+          this.locked = false;
+        }
+        if (animData.pop) {
+          var end_css = {
+            top: - $(window).scrollTop() - el.data('offset') + 'px',
+            opacity: 0
+          };
+
+          return setTimeout(function () {
+            return el
+              .animate(end_css, settings.animation_speed, 'linear', function () {
+                context.locked = false;
+                el.css(css).trigger('closed.fndtn.reveal');
+              })
+              .removeClass('open');
+          }, settings.animation_speed / 2);
+        }
+
+        if (animData.fade) {
+          var end_css = {opacity : 0};
+
+          return setTimeout(function () {
+            return el
+              .animate(end_css, settings.animation_speed, 'linear', function () {
+                context.locked = false;
+                el.css(css).trigger('closed.fndtn.reveal');
+              })
+              .removeClass('open');
+          }, settings.animation_speed / 2);
+        }
+
+        return el.hide().css(css).removeClass('open').trigger('closed.fndtn.reveal');
+      }
+
+      var settings = this.settings;
+
+      // should we animate the background?
+      if (getAnimationData(settings.animation).fade) {
+        return el.fadeOut(settings.animation_speed / 2);
+      }
+
+      return el.hide();
+    },
+
+    close_video : function (e) {
+      var video = $('.flex-video', e.target),
+          iframe = $('iframe', video);
+
+      if (iframe.length > 0) {
+        iframe.attr('data-src', iframe[0].src);
+        iframe.attr('src', iframe.attr('src'));
+        video.hide();
+      }
+    },
+
+    open_video : function (e) {
+      var video = $('.flex-video', e.target),
+          iframe = video.find('iframe');
+
+      if (iframe.length > 0) {
+        var data_src = iframe.attr('data-src');
+        if (typeof data_src === 'string') {
+          iframe[0].src = iframe.attr('data-src');
+        } else {
+          var src = iframe[0].src;
+          iframe[0].src = undefined;
+          iframe[0].src = src;
+        }
+        video.show();
+      }
+    },
+
+    data_attr : function (str) {
+      if (this.namespace.length > 0) {
+        return this.namespace + '-' + str;
+      }
+
+      return str;
+    },
+
+    cache_offset : function (modal) {
+      var offset = modal.show().height() + parseInt(modal.css('top'), 10) + modal.scrollY;
+
+      modal.hide();
+
+      return offset;
+    },
+
+    off : function () {
+      $(this.scope).off('.fndtn.reveal');
+    },
+
+    reflow : function () {}
+  };
+
+  /*
+   * getAnimationData('popAndFade') // {animate: true,  pop: true,  fade: true}
+   * getAnimationData('fade')       // {animate: true,  pop: false, fade: true}
+   * getAnimationData('pop')        // {animate: true,  pop: true,  fade: false}
+   * getAnimationData('foo')        // {animate: false, pop: false, fade: false}
+   * getAnimationData(null)         // {animate: false, pop: false, fade: false}
+   */
+  function getAnimationData(str) {
+    var fade = /fade/i.test(str);
+    var pop = /pop/i.test(str);
+    return {
+      animate : fade || pop,
+      pop : pop,
+      fade : fade
+    };
+  }
+}(jQuery, window, window.document));

data/app/assets/stylesheets/_va.scss

@@ -1541,6 +1541,69 @@ a {color: #fff; background: none;}
 
 // Search
 
+#search_form {
+  input[type="submit"] {
+    font-size: 16px;
+  }
+}
+.reveal-modal {
+  padding: 0px;
+}
+#trigger-overlay-button button {
+  font-size: 16px;
+  padding: .5em;
+}
+
+button#overlay-close-button {
+  border-radius: 0;
+  display: block;
+  width: 100% !important;
+  margin: 0;
+  width: auto;
+  background: #0071bc;
+  color: #fff;
+}
+
+.overlay {
+  z-index: 10000;
+}
+.search-button {
+  margin: 0.1em .5em 0 0;
+  padding: 0;
+  float: right;
+  a {
+    line-height: 1em;
+    display: inline-block;
+    padding: .41em;
+    font-size: .85em;
+    border-radius: .2em;
+    text-decoration: none;
+    background: $color-primary;
+    color: #fff;
+  }
+}
+
+.reveal-modal #search_form {
+  margin-bottom: 1em;
+}
+
+.reveal-modal .close-reveal-modal {
+  font-size: 1em;
+  clear: both;
+  text-decoration: none;
+  color: $color-gray-dark;
+  text-align: center;
+  margin: 1em 0;
+  position: relative;
+  top: auto;
+  display: block;
+  padding: 1em 0;
+  right: auto;
+  width: 100%;
+  bottom: auto;
+}
+
+
 #search_form {
   padding: 1.1em 0;
   text-align: right;

data/lib/generators/files/_footer.html.erb

@@ -20,9 +20,9 @@
     <div class="small-12 medium-4 columns">
       <ul>
         <li><b>Resources</b></li>
-        <li><a href="/employment/">Veterans Employment Center&trade;</a></li>
-        <li><a href="/facility-locator">Facility Locator</a></li>
-        <li><a href="/gibill/">GI Bill® Comparison Tool</a></li>
+        <li><a class="vets-app" href="/veterans-employment-center/">Veterans Employment Center&trade;</a></li>
+        <li><a class="vets-app"  href="/facility-locator">Facility Locator</a></li>
+        <li><a class="vets-app"  href="/gi-bill-comparison-tool/">GI Bill® Comparison Tool</a></li>
       </ul>
     </div>
     <!--Use with Signup <div class="small-12 medium-2 columns"> -->
@@ -30,7 +30,7 @@
       <ul>
         <li><b>Process</b></li>
         <li><a href="/playbook/">Playbook</a></li>
-        <li><a href="/blog/">Blog</a></li>
+        <li><a href="/experience/">Blog</a></li>
       </ul>
     </div>
     <div class="small-12 medium-2 columns">
@@ -68,8 +68,8 @@
               <abbr>VA</abbr> | U.S. Department of Veterans Affairs
             </div>
             <div class="medium-7 columns">
-              <ul class="inline-list">
-                <li><a href="http://va.gov">Va.gov</a></li>
+              <ul class="final-list">
+                <li><a href="http://www.va.gov">VA.gov</a></li>
                 <li><a href="http://www.section508.va.gov/">Accessibility</a></li>
                 <li><a href="http://www.va.gov/privacy/">Privacy</a></li>
                 <li><a href="http://usa.gov">USA.gov</a></li>
@@ -87,3 +87,15 @@
     </div>
   </div>
 </div>
+
+<div data-alert class="alert-box coda">
+  <div class="row full">
+    <div class="small-12 medium-6 columns">
+      <a href="{{ site.url }}/2015/11/11/why-we-are-designing-in-beta.html" class="usa-button usa-button-outline-inverse">Help Us Create vets.gov: A Message from Secretary Robert McDonald</a>
+    </div>
+    <div class="small-12 medium-6 columns feedback">
+     We need your feedback to make Vets.gov better.<br/>
+     <a href="https://veterans.uservoice.com/">Feedback Forum</a>
+   </div>
+ </div>
+</div>

data/lib/generators/files/_header.html.erb

@@ -1,7 +1,58 @@
 <div class="header">
+  <div data-alert class="alert-box notice">
+    <div class="row full">
+      <div class="small-12 message">
+        <p><strong>This site is a <a href="https://www.vets.gov/playbook/design/">work in progress.</a></strong> If you don&rsquo;t find what you need, visit <a href="http://www.va.gov">VA.gov</a>.</p>
+      </div>
+    </div>
+  </div>
+
+  <!-- /header alert box -->
   <div class="row full">
-    <div class="small-9 medium-4 columns">
+    <div class="small-6 medium-4 columns">
       <h1 role="banner"><a href="/">Vets.gov</a></h1>
     </div>
+
+    <!-- Mobile search button -->
+    <div class="hide-for-medium-up search-button" id="trigger-overlay-button">
+      <button type="button" data-reveal-id="mobile-menu" class="usa-button usa-button-outline-inverse" aria-hidden="true">Search</button>
+    </div>
+
+    <div id="mobile-menu" class="reveal-modal overlay overlay-fullscreen" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog" data-options="close_on_background_click:false">
+      <button type="usa-button" id="overlay-close-button" class="overlay-close close-reveal-modal" aria-label="Close">Close</button>
+        <div class="menu">
+         <form accept-charset="UTF-8" action="https://search.usa.gov/search" id="search_form" method="get">
+         <div style="margin:0;padding:0;display:inline">
+         <input name="utf8" type="hidden" value="&#x2713;" /></div>
+         <input id="affiliate" name="affiliate" type="hidden" value="vets.gov_staging" />
+         <label for="mobile-query">Search:</label>
+         <div class="row collapse">
+           <div class="small-9 columns">
+             <input autocomplete="off" class="usagov-search-autocomplete" id="mobile-query" name="query" type="text" />
+           </div>
+           <div class="small-3 columns">
+             <input name="commit" type="submit" value="Search" />
+           </div>
+         </div>
+        </form>
+      </div>
+    </div>
+
+    <div class="medium-5 medium-offset-3 text-right columns show-for-medium-up">
+      <form accept-charset="UTF-8" action="https://search.usa.gov/search" id="search_form" method="get">
+        <div style="margin:0;padding:0;display:inline">
+        <input name="utf8" type="hidden" value="&#x2713;" /></div>
+        <input id="affiliate" name="affiliate" type="hidden" value="vets.gov_staging" />
+        <label for="query">Search:</label>
+        <div class="row collapse">
+          <div class="small-9 columns">
+            <input autocomplete="off" class="usagov-search-autocomplete" id="query" name="query" type="text" />
+          </div>
+          <div class="small-3 columns">
+            <input name="commit" type="submit" value="Search" />
+          </div>
+        </form>
+      </div>
+    </div>
   </div>
 </div>

data/lib/va_common/version.rb

@@ -1,3 +1,3 @@
 module VaCommon
-  VERSION = "0.2.3"
+  VERSION = "0.2.4"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: va_common
 version: !ruby/object:Gem::Version
-  version: 0.2.3
+  version: 0.2.4
 platform: ruby
 authors:
 - Emily Wright-Moore
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2015-12-08 00:00:00.000000000 Z
+date: 2015-12-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -321,6 +321,7 @@ files:
 - app/assets/js/stellar-settings.js
 - app/assets/js/va_common_main.js
 - app/assets/js/vendor/classie.js
+- app/assets/js/vendor/foundation.reveal.js
 - app/assets/js/vendor/nwmatcher-1.2.5-min.js
 - app/assets/js/vendor/svg-injector.js
 - app/assets/stylesheets/_va.scss