ustyle 1.3.12 → 1.4.0

data/dist/ustyle.min.js

@@ -0,0 +1 @@
+var slice=[].slice,hasProp={}.hasOwnProperty;null==this.Utils&&(this.Utils={modules:[]});var addClass=function(a,b){return removeClass(a,b),a.className+=" "+b+" "},removeClass=function(a,b){var c=new RegExp("(\\s|^)"+b+"(\\s|$)","gi");return a.className=a.className.replace(c,"")},hasClass=function(a,b){return new RegExp("(^| )"+b+"( |$)","gi").test(a.className)},merge=function(){var a,b,c,d,e=arguments[0],f=2<=arguments.length?slice.call(arguments,1):[];for(b=0,c=f.length;c>b;b++){a=f[b];for(d in a)hasProp.call(a,d)&&(e[d]=a[d])}return e},setOptions=function(a,b){return merge({},b,a)},deleteUndefined=function(a){var b,c,d=[];for(b in a)c=a[b],null===c||void 0===c?d.push(delete a[b]):d.push(void 0);return d},transformKey=function(){var a,b,c,d=document.createElement("div"),e=["transform","webkitTransform","OTransform","MozTransform","msTransform"];for(a=0,c=e.length;c>a;a++)if(b=e[a],void 0!==d.style[b])return b}(),requestAnimationFrame=function(a){var b,c,d,e=["ms","moz","webkit","o"];for(b=0,c=e.length;c>b&&(d=e[b],!a.requestAnimationFrame);b++)a.requestAnimationFrame=a[d+"RequestAnimationFrame"];return a.requestAnimationFrame||(a.requestAnimationFrame=function(a){return setTimeout(a,1e3/60)})}(window);this.Utils={addClass:addClass,removeClass:removeClass,hasClass:hasClass,merge:merge,setOptions:setOptions,deleteUndefined:deleteUndefined,transformKey:transformKey,requestAnimationFrame:requestAnimationFrame};var createContext,ref=this.Utils,merge=ref.merge,addClass=ref.addClass,hasClass=ref.hasClass,setOptions=ref.setOptions,removeClass=ref.removeClass,transformKey=ref.transformKey,indexOf=[].indexOf||function(a){for(var b=0,c=this.length;c>b;b++)if(b in this&&this[b]===a)return b;return-1};createContext=function(a){var b;return b=function(){function a(a){var b,c=this.options=setOptions(a,this.defaults);this.target=c.target,this.classPrefix=c.classPrefix,null!==this.target&&(this._boundEvents=[],this._closeTargets=[],b=this.create(),this.anchor=b.anchor,this.arrow=b.arrow,this.content=b.content,this.setEvents(this.anchor),this.watchWindow())}var b,c,d;return a.prototype.defaults={classPrefix:"us-anchor",openEvent:"click",showClose:!0,isAjax:!1},a.prototype.setEvents=function(a){var b=function(b){return function(c){return c.preventDefault(),c.stopPropagation(),b.isOpen()?b.hide(a):b.show(a)}}(this),c=function(b){return function(c){var d;if(b.isOpen()&&(d=c.target,indexOf.call(b._closeTargets,d)>=0&&(c.preventDefault(),c.stopPropagation(),b.hide(a)),c.target!==a&&!a.contains(c.target)&&c.target!==b.target&&!b.target.contains(c.target)))return b.hide(a)}}(this);return this._on(this.target,this.options.openEvent,b),this._on(document,this.options.openEvent,c)},a.prototype._on=function(a,b,c){return this._boundEvents.push({element:a,event:b,handler:c}),a.addEventListener(b,c,!1)},a.prototype.show=function(a){var b,c,d=function(b){return function(){return b.content.appendChild(b.options.content),a.parentNode||document.body.appendChild(a),addClass(a,b.classPrefix+"--open"),setTimeout(function(){return addClass(a,b.classPrefix+"--after-open")}),b.setPosition()}}(this);return this.options.isAjax?null!=(b=this.options.onOpen)?b.call().done(function(){return d()}):void 0:(d(),null!=(c=this.options.onOpen)?c.call():void 0)},a.prototype.hide=function(a){var b;return removeClass(a,this.classPrefix+"--open"),removeClass(a,this.classPrefix+"--after-open"),null!=(b=this.options.onClose)?b.call():void 0},a.prototype.isOpen=function(){return hasClass(this.anchor,this.classPrefix+"--open")},a.prototype.create=function(){var a,b,c,d=document.createElement("div"),e=document.createElement("div"),f=document.createElement("div");return addClass(e,this.classPrefix+"__content"),addClass(f,this.classPrefix+"__arrow-inner"),addClass(d,this.classPrefix+"__arrow"),d.appendChild(f),e.appendChild(d),this.options.showClose&&(c=document.createElement("a"),c.href="#",addClass(c,this.classPrefix+"__close-button"),e.appendChild(c),this._closeTargets.push(c)),a=document.createElement("div"),addClass(a,this.classPrefix),b=a.style,b.position="absolute",b.zIndex="9999",b.top="0px",b.left="0px",a.appendChild(e),addClass(document.documentElement,this.classPrefix+"--ready"),{anchor:a,arrow:d,content:e}},a.prototype.setPosition=function(){var a,e,f,g,h=c(this.target,this.anchor,this.arrow),i=this.target.getBoundingClientRect();return b(i,this.anchor)?(addClass(this.anchor,this.classPrefix+"--bottom"),removeClass(this.anchor,this.classPrefix+"--top"),g="calc(100% + 12px)",e=d(this.target,this.anchor,this.arrow)):(addClass(this.anchor,this.classPrefix+"--top"),removeClass(this.anchor,this.classPrefix+"--bottom"),g="-12px",e=d(this.target,this.anchor,this.arrow)),a="translateX("+Math.round(h)+"px) ",a+="translateY("+Math.round(e)+"px)","msTransform"!==transformKey&&(a+=" translateZ(0)"),this.anchor.style[transformKey]=a,f=i.left-this.anchor.getBoundingClientRect().left+this.target.offsetWidth/2,this.arrow.style.left=f+"px",this.content.style[transformKey+"Origin"]=f+"px "+g},c=function(a,b,c){var d=a.getBoundingClientRect(),e=d.left+b.offsetWidth/2+a.offsetWidth/2,f=d.left+a.offsetWidth/2;return document.body.offsetWidth<e?document.body.offsetWidth-b.offsetWidth:f-b.offsetWidth/2<0?0:d.left-b.offsetWidth/2+a.offsetWidth/2},d=function(a,c,d){var e=a.getBoundingClientRect();return b(e,c)?e.top-(c.offsetHeight-window.pageYOffset)+d.offsetHeight-a.offsetHeight:e.top+d.offsetHeight+a.offsetHeight+window.pageYOffset},b=function(a,b){return a.top<b.offsetHeight?void 0:window.innerHeight-a.top<b.offsetHeight},a.prototype.watchWindow=function(){var a,b,c,d=["resize","scroll","touchmove"],e=[];for(b=0,c=d.length;c>b;b++)a=d[b],e.push(window.addEventListener(a,function(a){return function(b){var c,d,e,f,g;return a.isOpen()?(e=+new Date,f=16,d=3*f,g?void 0:(e-c>d&&(a.setPosition(),c=e),g=setTimeout(function(b){return g=null,c=+new Date,a.setPosition()},f))):void 0}}(this),!1));return e},a}()},window.Anchor=createContext(),window.Backdrop=function(){function a(){d=document.querySelector(".us-backdrop"),null==d&&(d=b())}var b,c=0,d=null;return a.prototype.element=d,b=function(){return d=document.createElement("div"),Utils.addClass(d,"us-backdrop"),document.body.appendChild(d)},a.prototype.retain=function(){var a;return c++,1===c?(Utils.addClass(d,"us-backdrop--visible"),a=function(){return c>=1?Utils.addClass(d,"us-backdrop--active"):void 0},Utils.requestAnimationFrame.call(window,a)):void 0},a.prototype.release=function(){var a;return 1===c&&(Utils.removeClass(d,"us-backdrop--active"),a=function(){return setTimeout(function(){return 0===c?Utils.removeClass(d,"us-backdrop--visible"):void 0},300)},Utils.requestAnimationFrame.call(window,a)),c=Math.max(0,c-1)},a}(),window.Overlay=function(a){function b(a){if(this.overlay=(this.options=f(a,h)).overlay,null==this.overlay||"undefined"==typeof Backdrop||null===Backdrop)throw new Error("There's no overlay or you haven't included Backdrop");this.backdrop=new Backdrop,this.addEventListeners()}var c=a.addClass,d=a.hasClass,e=a.removeClass,f=a.setOptions,g=a.requestAnimationFrame,h={bodyActiveClass:"us-overlay--open",activeClass:"us-overlay-parent--active",visibleClass:"us-overlay-parent--visible",overlay:$(".us-overlay-parent"),openButton:".js-open-overlay",closeButton:".js-close-overlay",historyStatus:"#seedeal",history:!1,preventDefault:!0,animationSpeed:300};return b.prototype.addEventListeners=function(){return $(this.options.openButton).on("click.open-overlay",function(a){return function(b){return a.options.preventDefault&&b.preventDefault(),a.show(b)}}(this)),this.overlay.on("click.close-overlay",function(a){return function(b){for(var c=[],d=a.overlay.find(a.options.closeButton).toArray(),e=[a.overlay[0]].concat(d),f=e.length-1;f>=0;f--){var g=e[f];if(b.target===g){a.options.preventDefault&&b.preventDefault(),a.hide(b);break}c.push(void 0)}return c}}(this)),this.hasHistory()?window.onpopstate=function(a){return function(b){return a.isOpen()?a.hide(b):void 0}}(this):void 0},b.prototype.show=function(a){var b,d=this;return $(document.body).addClass(this.options.bodyActiveClass),this.backdrop.retain(),c(this.overlay[0],this.options.visibleClass),b=function(){return c(d.overlay[0],d.options.activeClass),setTimeout(function(){var b;return"function"==typeof(b=d.options).onOpen?b.onOpen(a):void 0},d.options.animationSpeed)},g.call(window,b),this.hasHistory()?history.pushState("open",window.document.title,this.options.historyStatus):void 0},b.prototype.hide=function(a){var b,c=this;return $(document.body).removeClass(this.options.bodyActiveClass),this.backdrop.release(),b=function(){return e(c.overlay[0],c.options.activeClass),setTimeout(function(){var b;return e(c.overlay[0],c.options.visibleClass),"function"==typeof(b=c.options).onClose?b.onClose(a):void 0},c.options.animationSpeed)},g.call(window,b),this.hasHistory()&&"open"===history.state?history.back():void 0},b.prototype.isOpen=function(){return d(this.overlay[0],this.options.activeClass)},b.prototype.hasHistory=function(){return this.options.history&&window.history&&window.history.pushState},b}(this.Utils);var setOptions=this.Utils.setOptions;window.Tabs=function(a){var b;return b=function(){function a(a){var b=this.options=setOptions(a,this.defaults),c=b.tabContainer,d=b.tabLinks;this.tabs=$(c).find(d),this.filter=this.tabs.data("target")?"data-target":"href",this.init(),this.tabs.on("click.ustyle.tab",function(a){return function(b){var c=$(b.currentTarget);return a.isAccordion()&&a.options.collapsible&&a.isActive(c)?(a.collapse(c),a.hashClear()):(a.navigateTo(c),a.scrollToTab(c),a.hashChange(c)),b.preventDefault()}}(this))}var b;return a.prototype.defaults={tabContainer:".us-tabs",tabLinks:".us-tabs-nav-mainlink",tabNav:".us-tabs-nav",changeUrls:!0,activeClass:"active",collapsible:!1,autoScroll:!0},a.prototype.init=function(){var a=this.activeTab(),b=this.tabFromHash();return b.length?this.navigateTo(b):a.length?this.navigateTo(a):this.options.collapsible&&this.isAccordion()?void 0:this.navigateTo(this.tabs.first())},a.prototype.hashChange=function(a){return this.options.changeUrls?location.replace("#!"+b(a).replace(/#/,"")):void 0},a.prototype.hashClear=function(){if(this.options.changeUrls){var a=window.location.pathname+window.location.search;return"function"==typeof history.replaceState?history.replaceState("",document.title,a):void 0}},a.prototype.navigateTo=function(a){var c=b(a),d=$(c);return this.tabs.removeClass(this.options.activeClass).end(),this.tabs.filter("["+this.filter+"='"+c+"']").addClass(this.options.activeClass),d.siblings("."+this.options.activeClass).removeClass(this.options.activeClass).end().addClass(this.options.activeClass),d.trigger("ustyle.tab.active")},a.prototype.collapse=function(a){var c=$(b(a));return this.tabs.removeClass(this.options.activeClass).end(),c.removeClass(this.options.activeClass)},a.prototype.scrollToTab=function(a){if(this.isAccordion()&&this.options.autoScroll){var c=$(b(a));return $("html,body").scrollTop(c.offset().top)}},a.prototype.activeTab=function(){return this.tabs.filter("."+this.options.activeClass)},a.prototype.tabFromHash=function(){var a=location.hash.replace("!","");return this.tabs.filter("["+this.filter+"='"+a+"']")},a.prototype.isActive=function(a){return b(a)===b(this.activeTab())},a.prototype.isAccordion=function(){return!$(this.options.tabNav).is(":visible")},b=function(a){return a.data("target")||a.attr("href")},a}()}(),window.ClassToggler=function(){function a(a){this.options=Utils.setOptions(a,b),this.options.$target?this.addEventListeners():console.trace("ClassToggle",this.options)}var b;return b={containerClass:null,$target:null,activeClass:"active",inactiveClass:null,toggleOn:"click"},a.prototype.addEventListeners=function(){return this.options.$target.on(this.options.toggleOn,function(a){return function(b){var c=a.options.containerClass?$(b.target).closest(a.options.containerClass):$(b.delegateTarget);return a.isActive(c)?a.hide(c,b):a.show(c,b)}}(this))},a.prototype.isActive=function(a){return a.hasClass(this.options.activeClass)},a.prototype.show=function(a,b){var c;return"function"==typeof(c=this.options).onShow&&c.onShow(a,b),a.addClass(this.options.activeClass)},a.prototype.hide=function(a,b){var c;return"function"==typeof(c=this.options).onHide&&c.onHide(a,b),a.removeClass(this.options.activeClass)},a}(),window.RadioToggle=function(){function a(a){if(this.options=Utils.setOptions(a,b),!this.options.$target)throw new Error("No target defined");this.addEventListeners()}var b={$target:$(".us-toggle")};return a.prototype.addEventListeners=function(){return this.options.$target.on("change","input:radio",function(a){return $("input[name='"+this.name+"']").removeClass("checked"),this.checked&&$(this).addClass("checked"),a.stopPropagation()})},a}();

data/lib/ustyle/version.rb

@@ -1,4 +1,4 @@
 module Ustyle
-  version = "1.3.12"
+  version = "1.4.0"
   VERSION = version
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ustyle",
-  "version": "1.3.12",
+  "version": "1.4.0",
   "description": "A living styleguide and pattern library by uSwitch.",
   "keywords": [
     "css",
@@ -50,6 +50,7 @@
     "grunt-contrib-uglify": "^0.9.2",
     "grunt-contrib-watch": "^0.6.1",
     "grunt-env": "^0.4.2",
+    "grunt-jscs": "~2.0.0",
     "grunt-newer": "^1.1.0",
     "grunt-postcss": "^0.2.0",
     "grunt-sassdoc": "^2.0.0",
@@ -58,6 +59,7 @@
     "grunt-svgmin": "^2.0.0",
     "grunt-version": "^1.0.0",
     "handlebars": "^2.0.0",
+    "jscs": "~2.1.0",
     "load-grunt-tasks": "~3.1.0",
     "lodash": "^2.4.1",
     "marked": "^0.3.2",
@@ -67,8 +69,6 @@
     "stylestats": "^4.2.2",
     "svg-to-png": "^2.0.0",
     "svgo": "^0.5.0",
-    "underscore.string": "^3.0.2",
-    "grunt-jscs": "~2.0.0",
-    "jscs": "~2.1.0"
+    "underscore.string": "^3.0.2"
   }
 }

data/styleguide/partials/_head.tpl

@@ -6,12 +6,12 @@
   <!-- <![endif] -->
 <head>
   <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
-  <meta content='width=device-width, initial-scale=1.0' name='viewport'>
+  <meta content='width=device-width, initial-scale=1.0' name='viewport' />
   <title>uStyle styleguide</title>
   <link rel="stylesheet" href="/css/main.css" type="text/css" />
   <!--[if lt IE 9]>
     <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
-  <![endif] -->
+  <![endif]-->
   <script>
     (function(html){
       html.className=html.className.replace(/\bno-js\b/,'js');

data/tasks/publish.rake

@@ -40,6 +40,7 @@ namespace :deploy do
 
     Ustyle.invalidate([
       "/s3/#{Ustyle::BUCKET}/ustyle/ustyle-latest.css",
+      "/s3/#{Ustyle::BUCKET}/ustyle/ustyle.min.js",
       "/s3/#{Ustyle::BUCKET}/ustyle/ustyle-content.css",
       "/s3/#{Ustyle::BUCKET}/ustyle/ustyle-icons.css"
     ])

data/vendor/assets/stylesheets/ustyle/basics/variables/_colors.scss

@@ -2,7 +2,7 @@
 // @name Primary palette
 // @partial colour
 //
-// @description Our colours (with a “u”, we’re a UK company) are divided into primary, secondary and tertiary palettes. The primary and secondary are core to all our design work and supported by the tertiary which we use in infographics, graphs and the like. CMYK equivalents are available for print work.
+// @description Our colours (with a "u", we're a UK company) are divided into primary, secondary and tertiary palettes. The primary and secondary are core to all our design work and supported by the tertiary which we use in infographics, graphs and the like. CMYK equivalents are available for print work.
 //
 // @variable c-cyan - Hero banners
 // @variable c-navy - Text with emphasis
@@ -10,86 +10,64 @@
 // @variable c-typecyan - Text links, icons
 // @variable c-typegrey - Body text
 // @variable c-typegrey-2 - Text without emphasis
-// @variable c-inputgrey - Dropdowns, icons
-// @variable c-bordergrey - Borders
-// @variable c-keylinegrey - Keylines, separators
 // @variable c-bggrey - Backgrounds
+// @variable c-red - Primary buttons
+// @variable c-green - Action buttons, USPs
 
 $c-navy: #1c1f4e;
 $c-blue: #174695;
 $c-typecyan: #008fe9;
 $c-cyan: #99e2ff;
-$c-typegrey: #333;
-$c-typegrey-2: #767676;
-$c-inputgrey: #97999a;
-$c-bordergrey: #bbb;
-$c-keylinegrey: #eaeaea;
-$c-bggrey: #f4f4f4;
+$c-typegrey: #2f353a;
+$c-typegrey-2: #65717b;
+$c-bggrey: #f4f5f6;
+$c-red: #d64226;
+$c-green: #2aaa5b;
 
 // @page Brand/Colours
 // @name Secondary palette
 // @partial colour
-//
-// @variable c-red - Primary buttons
-// @variable c-green - Action buttons, USPs
-// @variable c-yellow - USPs
-// @variable c-orange - USPs
-// @variable c-purple - USPs
-// @variable c-navy-light
+// @variable c-inputgrey - Dropdowns, icons
+// @variable c-bordergrey - Borders
+// @variable c-keylinegrey - Keylines, separators
 // @variable c-blue-light
 // @variable c-typecyan-light
 // @variable c-cyan-light
+// @variable c-yellow - USPs
+// @variable c-orange - USPs
+// @variable c-purple - USPs
 
-$c-yellow: #ffd32f;
-$c-orange: #f27930;
-$c-purple: #9c55b8;
-$c-red: #d64226;
-$c-green: #2aaa5b;
-$c-navy-light: #1a316e;
+
+$c-inputgrey: #84909a;
+$c-bordergrey: #b0b8bf;
+$c-keylinegrey: #e9ebed;
 $c-blue-light: #0c72bf;
 $c-typecyan-light: #4cc0f4;
 $c-cyan-light: #e4f8ff;
+$c-yellow: #ffd32f;
+$c-orange: #f27930;
+$c-purple: #9c55b8;
+
 
 // @page Brand/Colours
 // @name Tertiary palette
 // @partial colour
 //
+// @variable c-red-dark
+// @variable c-green-dark
+// @variable c-red-lightest
+// @variable c-green-lightest
 // @variable c-yellow-lightest
-// @variable c-yellow-light
-// @variable c-yellow-dark
-//
 // @variable c-orange-lightest
-// @variable c-orange-light
-// @variable c-orange-dark
-//
 // @variable c-purple-lightest
-// @variable c-purple-light
-// @variable c-purple-dark
-//
-// @variable c-red-lightest
-// @variable c-red-light
-// @variable c-red-dark
-//
-// @variable c-green-lightest
-// @variable c-green-light
-// @variable c-green-dark
 
-$c-yellow-lightest: #ffedab;
-$c-yellow-light: #ffe06d;
-$c-yellow-dark: #d8b327;
 
+$c-red-dark: #b53820;
+$c-green-dark: #23904d;
+$c-red-lightest: #eeb3a8;
+$c-green-lightest: #adebc5;
+$c-yellow-lightest: #ffedab;
 $c-orange-lightest: #f9c9ac;
-$c-orange-light: #f5a16e;
-$c-orange-dark: #cd6628;
-
 $c-purple-lightest: #d7bbe2;
-$c-purple-light: #b988cd;
-$c-purple-dark: #84489c;
 
-$c-red-lightest: #eeb3a8;
-$c-red-light: #e27a67;
-$c-red-dark: #b53820;
 
-$c-green-lightest: #a9ddbd;
-$c-green-light: #69c38c;
-$c-green-dark: #23904d;

data/vendor/assets/stylesheets/ustyle/components/_cta.scss

@@ -7,7 +7,7 @@
 // @markup
 //  <section class="us-cta cta cta-column">
 //    <form>
-//      <h3 class="us-cta__title">It’s your report</h3>
+//      <h3 class="us-cta__title">It's your report</h3>
 //      <p>Join the campaign to fight for free annual credit reports for everyone</p>
 //      <a href="/money/itsmyreport/" class="us-btn us-btn--primary" rel="nofollow">Sign the petition</a>
 //    </form>

data/vendor/assets/stylesheets/ustyle/components/_featured.scss

@@ -33,7 +33,7 @@
 //     <div class="us-col-xsm-6 us-desktop--block">
 //       <div class="us-featured-highlight">
 //         <strong class="us-featured-highlight__title">
-//           £99.99
+//           &pound;99.99
 //         </strong>
 //         monthly cost
 //       </div>
@@ -41,7 +41,7 @@
 //     <div class="us-col-xsm-6 us-desktop--block">
 //       <div class="us-featured-highlight">
 //         <strong class="us-featured-highlight__title">
-//           £99.99
+//           &pound;99.99
 //         </strong>
 //         monthly cost
 //         <br>

data/vendor/assets/stylesheets/ustyle/components/_tabs.scss

@@ -28,19 +28,25 @@
 //     </nav>
 //     <div class='us-tabs-container'>
 //       <div class='us-tab' id='tab1'>
-//         <h2 class='us-tab-title'><a class="us-tabs-nav-mainlink" href="#tab1">Test 1</a></h2>
+//         <h2 class='us-tab-title'>
+//           <a class="us-tabs-nav-mainlink us-icon--after us-icon--chevron-right--after us-icon--small--after us-icon--inputgrey--after" href="#tab1">Test 1</a>
+//         </h2>
 //         <div class='us-tab-content'>
 //           <p>Fatback capicola leberkas pork loin pork jowl. Meatloaf shoulder pancetta, salami prosciutto ribeye andouille chuck landjaeger short loin filet mignon sirloin. Pork chop tri-tip ham pork hamburger frankfurter leberkas short ribs biltong. Prosciutto ham hock rump, andouille tongue flank sirloin tri-tip ball tip frankfurter ham drumstick meatloaf pork loin.</p>
 //         </div>
 //       </div>
 //       <div class='us-tab' id='tab2'>
-//         <h2 class='us-tab-title'><a class="us-tabs-nav-mainlink" href="#tab2">Test 2</a></h2>
+//         <h2 class='us-tab-title'>
+//           <a class="us-tabs-nav-mainlink us-icon--after us-icon--chevron-right--after us-icon--small--after us-icon--inputgrey--after" href="#tab2">Test 2</a>
+//         </h2>
 //         <div class='us-tab-content'>
 //           <p>Kielbasa tenderloin spare ribs, andouille doner brisket chuck drumstick bresaola short loin pork t-bone ground round jowl. Ball tip pork loin doner tongue filet mignon biltong hamburger leberkas. Filet mignon kielbasa kevin short ribs, drumstick chuck shankle spare ribs tri-tip.</p>
 //         </div>
 //       </div>
 //       <div class='us-tab' id='tab3'>
-//         <h2 class='us-tab-title'><a class="us-tabs-nav-mainlink" href="#tab3">Test 3</a></h2>
+//         <h2 class='us-tab-title'>
+//           <a class="us-tabs-nav-mainlink us-icon--after us-icon--chevron-right--after us-icon--small--after us-icon--inputgrey--after" href="#tab3">Test 3</a>
+//         </h2>
 //         <div class='us-tab-content'>
 //           <p>Pig pastrami pork loin kielbasa, filet mignon meatloaf short ribs tenderloin. Pork loin leberkas kevin fatback porchetta bresaola. Cow rump shoulder pastrami. Andouille pork belly t-bone short ribs brisket. Bresaola pork belly tail salami capicola meatball. Pork belly beef ham landjaeger.</p>
 //         </div>
@@ -49,6 +55,8 @@
 //   </div>
 
 $tab-width: col-width(2) !default;
+$tab-border-color: #fff;
+$tab-active-color: $tab-border-color;
 
 @keyframes tab-show {
   0% {
@@ -63,7 +71,7 @@ $tab-width: col-width(2) !default;
 // Tab nav
 .us-tabs-nav {
   display: none;
-  background-color: $c-navy;
+  background-color: $c-bggrey;
 
   @include respond-to(tablet) {
     .js & {
@@ -78,7 +86,6 @@ $tab-width: col-width(2) !default;
 
 .us-tabs-nav-wrapper {
   @extend %container;
-  padding-top: $gutter-width / 2;
 }
 
 .us-tabs-nav-menu {
@@ -91,18 +98,15 @@ $tab-width: col-width(2) !default;
 }
 
 .us-tabs-nav-link {
-  @include normal-font;
-  @include link-colors(#fff, $c-navy, $c-navy, #fff);
-  position: relative;
-  z-index: 1;
   display: table-cell;
   width: $tab-width;
-  padding: .475em .15em 1.2em;
+  padding: 14px 1em 12px;
   text-align: center;
   vertical-align: middle;
-  border-radius: 3px 3px 0 0;
+  border-right: 1px solid $tab-border-color;
+  border-radius: 0;
   transition: none;
-  
+
   @include respond-to(tablet) {
     font-size: em(14px);
     line-height: 1.25em;
@@ -116,15 +120,48 @@ $tab-width: col-width(2) !default;
     font-size: em(18px);
   }
 
-  &:hover {
-    background-color: #fff;
+  &:last-child {
+    border-right: 0;
+  }
+
+  &:hover,
+  &.active {
+    color: $c-typecyan;
+
+    &:before {
+      background-color: $c-typecyan;
+    }
   }
 
   &.active {
-    z-index: 2;
-    color: $c-navy;
-    background-color: #fff;
-    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
+    cursor: default;
+    background-color: $tab-active-color;
+
+    &:hover {
+      background-color: $tab-active-color;
+    }
+  }
+}
+
+.us-tabs-nav-mainlink {
+  @include link-colors($c-inputgrey, $c-typecyan, $c-typecyan, $c-inputgrey);
+  position: relative;
+  background-color: $c-bggrey;
+  transition: color 300ms, background-color 300ms;
+
+  &:before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    height: 5px;
+    background-color: $c-bggrey;
+    content: "";
+    transition: background-color 300ms;
+  }
+
+  &:hover {
+    background-color: rgba(255,255,255,.35);
   }
 }
 
@@ -157,10 +194,11 @@ $tab-width: col-width(2) !default;
 }
 
 .us-tab-title {
-  @extend %heading-4;
+  @include heading(4);
   position: relative;
   margin: 0;
   font-weight: normal;
+  border-bottom: 1px solid #fff;
 
   @include respond-to(tablet) {
     .js & {
@@ -172,41 +210,34 @@ $tab-width: col-width(2) !default;
     display: none;
   }
 
-  a {
-    @include link-colors($c-navy, #fff, $c-navy);
+  .us-tabs-nav-mainlink {
     display: block;
-    padding: .5em .75em;
-    background-color: $c-cyan;
-    border-bottom: 1px solid #fff;
-    transition: color 300ms, background-color 300ms;
-
-    .active & {
-      color: #fff;
-      background-color: $c-navy;
+    padding: .75em .75em .5em;
+
+    &:after {
+      position: absolute;
+      right: $gutter-width/2;
     }
 
-    .active &:before {
-      transform: rotate(90deg);
+    .us-tab.active & {
+      color: $c-typecyan;
+      background-color: $tab-active-color;
     }
 
-    &:hover:before {
-      color: #fff;
+    &:hover:after,
+    .us-tab.active &:after {
+      @include icon-color("typecyan");
       transform: rotate(90deg);
     }
 
-    &:before {
-      @include arrow(10px, 10px, right);
-      display: inline-block;
-      margin-right: .75em;
-      font-size: .75em;
-      content: "";
-      transition: all 300ms;
+    &:hover:before,
+    .us-tab.active &:before {
+      background-color: $c-typecyan;
     }
   }
 }
 
 .us-tab-content {
-  @extend %container;
   display: block;
   overflow: hidden;
   opacity: 1;

data/vendor/assets/stylesheets/ustyle/forms/_select.scss

@@ -80,15 +80,20 @@ $select-hover-color: $c-form-element-border-hover !default;
 
 .us-form-select-wrap--multiple, // [deprecated]
 .us-form-select--multiple,
-.us-form-select[multiple] {
+.us-form-select[multiple],
+.us-form-select[size] {
   &,
   .us-form-select {
     height: auto;
     padding: $select-base-padding;
-    overflow: auto;
+    overflow: hidden {
+      x: auto;
+      y: auto;
+    };
     vertical-align: middle;
     cursor: default;
     background-image: none;
+    -webkit-overflow-scrolling: touch;
   }
 
   &:hover,
@@ -97,9 +102,28 @@ $select-hover-color: $c-form-element-border-hover !default;
   }
 
   option {
-    padding: .3em 5px;
     cursor: pointer;
   }
+
+  &::-webkit-scrollbar {
+    width: 16px;
+    height: 16px;
+
+    &:window-inactive {
+      opacity: 0;
+    }
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, .2);
+    border: 4px solid rgba(0, 0, 0, 0);
+    border-radius: 8px;
+    background-clip: padding-box;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
 }
 
 .us-form-select-wrap--blocked, // [deprecated]

data/vendor/assets/stylesheets/ustyle/utilities/_general.scss

@@ -89,6 +89,10 @@ $colors: (
   .us-color--#{nth($color, 1)} {
     color: nth($color, 2);
   }
+
+  .us-background-color--#{nth($color, 1)} {
+    background: nth($color, 2);
+  }
 }
 
 // Fonts

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ustyle
 version: !ruby/object:Gem::Version
-  version: 1.3.12
+  version: 1.4.0
 platform: ruby
 authors:
 - uSwitch Limited
@@ -13,7 +13,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-12-02 00:00:00.000000000 Z
+date: 2016-02-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -182,6 +182,7 @@ files:
 - dist/ustyle-latest.css
 - dist/ustyle.js
 - dist/ustyle.json
+- dist/ustyle.min.js
 - grunt/modules/dss-helper.js
 - grunt/modules/file.js
 - grunt/modules/templates.js