idsk_frontend_toolkit 7.4.2

data/app/assets/spec/unit/shim-links-with-button-role.spec.js

@@ -0,0 +1,41 @@
+/* global describe it expect beforeEach afterEach */
+
+var $ = window.jQuery
+
+describe('shim-links-with-button-role', function () {
+  'use strict'
+  var GOVUK = window.GOVUK
+
+  var $buttonLink
+  var keyDownEvent
+
+  beforeEach(function () {
+    $buttonLink = $('<a role="button">Button</a>')
+    $buttonLink.on('click', function () {
+      $buttonLink.addClass('clicked')
+    })
+    $(document.body).append($buttonLink)
+    keyDownEvent = $.Event('keydown')
+    keyDownEvent.target = $buttonLink.get(0)
+    GOVUK.shimLinksWithButtonRole.init()
+  })
+
+  afterEach(function () {
+    $buttonLink.remove()
+    $(document).off('keyup')
+  })
+
+  it('should trigger event on space', function () {
+    // Ideally we’d test the page loading functionality but that seems hard to
+    // do within a Jasmine context. Settle for checking a bound event trigger.
+    keyDownEvent.which = 32 // Space character
+    $(document).trigger(keyDownEvent)
+    expect($buttonLink.hasClass('clicked')).toBe(true)
+  })
+
+  it('should not trigger event on tab', function () {
+    keyDownEvent.which = 9 // Tab character
+    $(document).trigger(keyDownEvent)
+    expect($buttonLink.hasClass('clicked')).toBe(false)
+  })
+})

data/app/assets/spec/unit/show-hide-content.spec.js

@@ -0,0 +1,306 @@
+/* global describe it expect beforeEach afterEach jasmine */
+
+var $ = window.jQuery
+
+describe('show-hide-content', function () {
+  'use strict'
+  var GOVUK = window.GOVUK
+
+  afterEach(function () {
+    if (this.showHideContent) {
+      this.showHideContent.destroy()
+    }
+
+    this.$content.remove()
+  })
+
+  describe('when the radios are inside a form', function () {
+    beforeEach(function () {
+      // Sample markup
+      this.$content = $(
+
+        // Radio buttons (yes/no)
+        '<form>' +
+        '<div class="multiple-choice" data-target="show-hide-radios">' +
+        '<input type="radio" name="single" value="yes">' +
+        '<label>Yes</label>' +
+        '</div>' +
+        '<div class="multiple-choice">' +
+        '<input type="radio" name="single" value="no">' +
+        '<label>No</label>' +
+        '</div>' +
+        '<div id="show-hide-radios" class="panel js-hidden" />' +
+        '</form>' +
+
+        // Checkboxes (multiple values)
+        '<form>' +
+        '<div class="multiple-choice" data-target="show-hide-checkboxes">' +
+        '<input type="checkbox" name="multiple[option1]">' +
+        '<label>Option 1</label>' +
+        '</div>' +
+        '<div class="multiple-choice">' +
+        '<input type="checkbox" name="multiple[option2]">' +
+        '<label>Option 2</label>' +
+        '</div>' +
+        '<div class="multiple-choice">' +
+        '<input type="checkbox" name="multiple[option3]">' +
+        '<label>Option 3</label>' +
+        '</div>' +
+        '<div id="show-hide-checkboxes" class="panel js-hidden" />' +
+        '</form>'
+      )
+
+      // Find radios/checkboxes
+      var $radios = this.$content.find('input[type=radio]')
+      var $checkboxes = this.$content.find('input[type=checkbox]')
+
+      // Two radios
+      this.$radio1 = $radios.eq(0)
+      this.$radio2 = $radios.eq(1)
+
+      // Three checkboxes
+      this.$checkbox1 = $checkboxes.eq(0)
+      this.$checkbox2 = $checkboxes.eq(1)
+      this.$checkbox3 = $checkboxes.eq(2)
+
+      // Add to page
+      $(document.body).append(this.$content)
+
+      // Show/Hide content
+      this.$radioShowHide = $('#show-hide-radios')
+      this.$checkboxShowHide = $('#show-hide-checkboxes')
+
+      // Add show/hide content support
+      this.showHideContent = new GOVUK.ShowHideContent()
+      this.showHideContent.init()
+    })
+
+    describe('and when this.showHideContent = new GOVUK.ShowHideContent() is called', function () {
+      it('should add the aria attributes to inputs with show/hide content', function () {
+        expect(this.$radio1.attr('aria-expanded')).toBe('false')
+        expect(this.$radio1.attr('aria-controls')).toBe('show-hide-radios')
+      })
+
+      it('should add the aria attributes to show/hide content', function () {
+        expect(this.$radioShowHide.attr('aria-hidden')).toBe('true')
+        expect(this.$radioShowHide.hasClass('js-hidden')).toEqual(true)
+      })
+
+      it('should hide the show/hide content visually', function () {
+        expect(this.$radioShowHide.hasClass('js-hidden')).toEqual(true)
+      })
+
+      it('should do nothing if no radios are checked', function () {
+        expect(this.$radio1.attr('aria-expanded')).toBe('false')
+        expect(this.$radio2.attr('aria-expanded')).toBe(undefined)
+      })
+
+      it('should do nothing if no checkboxes are checked', function () {
+        expect(this.$radio1.attr('aria-expanded')).toBe('false')
+        expect(this.$radio2.attr('aria-expanded')).toBe(undefined)
+      })
+
+      describe('with non-default markup', function () {
+        beforeEach(function () {
+          this.showHideContent.destroy()
+        })
+
+        it('should do nothing if a radio without show/hide content is checked', function () {
+          this.$radio2.prop('checked', true)
+
+          // Defaults changed, initialise again
+          this.showHideContent = new GOVUK.ShowHideContent().init()
+          expect(this.$radio1.attr('aria-expanded')).toBe('false')
+          expect(this.$radioShowHide.attr('aria-hidden')).toBe('true')
+          expect(this.$radioShowHide.hasClass('js-hidden')).toEqual(true)
+        })
+
+        it('should do nothing if a checkbox without show/hide content is checked', function () {
+          this.$checkbox2.prop('checked', true)
+
+          // Defaults changed, initialise again
+          this.showHideContent = new GOVUK.ShowHideContent().init()
+          expect(this.$checkbox1.attr('aria-expanded')).toBe('false')
+          expect(this.$checkboxShowHide.attr('aria-hidden')).toBe('true')
+          expect(this.$checkboxShowHide.hasClass('js-hidden')).toEqual(true)
+        })
+
+        it('should do nothing if checkboxes without show/hide content is checked', function () {
+          this.$checkbox2.prop('checked', true)
+          this.$checkbox3.prop('checked', true)
+
+          // Defaults changed, initialise again
+          this.showHideContent = new GOVUK.ShowHideContent().init()
+          expect(this.$checkbox1.attr('aria-expanded')).toBe('false')
+          expect(this.$checkboxShowHide.attr('aria-hidden')).toBe('true')
+          expect(this.$checkboxShowHide.hasClass('js-hidden')).toEqual(true)
+        })
+
+        it('should make the show/hide content visible if its radio is checked', function () {
+          this.$radio1.prop('checked', true)
+
+          // Defaults changed, initialise again
+          this.showHideContent = new GOVUK.ShowHideContent().init()
+          expect(this.$radio1.attr('aria-expanded')).toBe('true')
+          expect(this.$radioShowHide.attr('aria-hidden')).toBe('false')
+          expect(this.$radioShowHide.hasClass('js-hidden')).toEqual(false)
+        })
+
+        it('should make the show/hide content visible if its checkbox is checked', function () {
+          this.$checkbox1.prop('checked', true)
+
+          // Defaults changed, initialise again
+          this.showHideContent = new GOVUK.ShowHideContent().init()
+          expect(this.$checkbox1.attr('aria-expanded')).toBe('true')
+          expect(this.$checkboxShowHide.attr('aria-hidden')).toBe('false')
+          expect(this.$checkboxShowHide.hasClass('js-hidden')).toEqual(false)
+        })
+      })
+
+      describe('and a show/hide radio receives a click', function () {
+        it('should make the show/hide content visible', function () {
+          this.$radio1.click()
+          expect(this.$radioShowHide.hasClass('js-hidden')).toEqual(false)
+        })
+
+        it('should add the aria attributes to show/hide content', function () {
+          this.$radio1.click()
+          expect(this.$radio1.attr('aria-expanded')).toBe('true')
+          expect(this.$radioShowHide.attr('aria-hidden')).toBe('false')
+          expect(this.$radioShowHide.hasClass('js-hidden')).toEqual(false)
+        })
+      })
+
+      describe('and a show/hide checkbox receives a click', function () {
+        it('should make the show/hide content visible', function () {
+          this.$checkbox1.click()
+          expect(this.$checkboxShowHide.hasClass('js-hidden')).toEqual(false)
+        })
+
+        it('should add the aria attributes to show/hide content', function () {
+          this.$checkbox1.click()
+          expect(this.$checkbox1.attr('aria-expanded')).toBe('true')
+          expect(this.$checkboxShowHide.attr('aria-hidden')).toBe('false')
+          expect(this.$checkboxShowHide.hasClass('js-hidden')).toEqual(false)
+        })
+      })
+
+      describe('and a show/hide radio receives a click, but another group radio is clicked afterwards', function () {
+        it('should make the show/hide content hidden', function () {
+          this.$radio1.click()
+          this.$radio2.click()
+          expect(this.$radioShowHide.hasClass('js-hidden')).toEqual(true)
+        })
+
+        it('should add the aria attributes to show/hide content', function () {
+          this.$radio1.click()
+          this.$radio2.click()
+          expect(this.$radio1.attr('aria-expanded')).toBe('false')
+          expect(this.$radioShowHide.attr('aria-hidden')).toBe('true')
+        })
+      })
+
+      describe('and a show/hide checkbox receives a click, but another checkbox is clicked afterwards', function () {
+        it('should keep the show/hide content visible', function () {
+          this.$checkbox1.click()
+          this.$checkbox2.click()
+          expect(this.$checkboxShowHide.hasClass('js-hidden')).toEqual(false)
+        })
+
+        it('should keep the aria attributes to show/hide content', function () {
+          this.$checkbox1.click()
+          this.$checkbox2.click()
+          expect(this.$checkbox1.attr('aria-expanded')).toBe('true')
+          expect(this.$checkboxShowHide.attr('aria-hidden')).toBe('false')
+        })
+      })
+    })
+
+    describe('before this.showHideContent.destroy() is called', function () {
+      it('document.body should have show/hide event handlers', function () {
+        var events = $._data(document.body, 'events')
+        expect(events && events.click).toContain(jasmine.objectContaining({
+          namespace: 'ShowHideContent',
+          selector: 'input[type="radio"][name="single"]'
+        }))
+        expect(events && events.click).toContain(jasmine.objectContaining({
+          namespace: 'ShowHideContent',
+          selector: '[data-target] > input[type="checkbox"]'
+        }))
+      })
+    })
+
+    describe('and when this.showHideContent.destroy() is called', function () {
+      beforeEach(function () {
+        this.showHideContent.destroy()
+      })
+
+      it('should have no show/hide event handlers', function () {
+        var events = $._data(document.body, 'events')
+        expect(events && events.click).not.toContain(jasmine.objectContaining({
+          namespace: 'ShowHideContent',
+          selector: 'input[type="radio"][name="single"]'
+        }))
+        expect(events && events.click).not.toContain(jasmine.objectContaining({
+          namespace: 'ShowHideContent',
+          selector: '[data-target] > input[type="checkbox"]'
+        }))
+      })
+    })
+  })
+
+  describe('when the radios are outside of a form', function () {
+    beforeEach(function () {
+      // Sample markup
+      this.$content = $(
+        // Radio buttons (yes/no)
+        '<div class="multiple-choice" data-target="show-hide-radios">' +
+        '<input type="radio" name="single" value="yes">' +
+        '<label>Yes</label>' +
+        '</div>' +
+        '<div class="multiple-choice">' +
+        '<input type="radio" name="single" value="no">' +
+        '<label>No</label>' +
+        '</div>' +
+        '<div id="show-hide-radios" class="panel js-hidden" />'
+      )
+
+      // Find radios/checkboxes
+      var $radios = this.$content.find('input[type=radio]')
+
+      // Two radios
+      this.$radio1 = $radios.eq(0)
+      this.$radio2 = $radios.eq(1)
+
+      // Add to page
+      $(document.body).append(this.$content)
+
+      // Show/Hide content
+      this.$radioShowHide = $('#show-hide-radios')
+
+      // Add show/hide content support
+      this.showHideContent = new GOVUK.ShowHideContent()
+      this.showHideContent.init()
+    })
+
+    it('should make the show/hide content visible if its radio is checked', function () {
+      this.$radio1.click()
+
+      // Defaults changed, initialise again
+      this.showHideContent = new GOVUK.ShowHideContent().init()
+      expect(this.$radio1.attr('aria-expanded')).toBe('true')
+      expect(this.$radioShowHide.attr('aria-hidden')).toBe('false')
+      expect(this.$radioShowHide.hasClass('js-hidden')).toEqual(false)
+    })
+
+    it('should do nothing if a radio without show/hide content is checked', function () {
+      this.$radio2.click()
+
+      // Defaults changed, initialise again
+      this.showHideContent = new GOVUK.ShowHideContent().init()
+      expect(this.$radio1.attr('aria-expanded')).toBe('false')
+      expect(this.$radioShowHide.attr('aria-hidden')).toBe('true')
+      expect(this.$radioShowHide.hasClass('js-hidden')).toEqual(true)
+    })
+  })
+})

data/app/assets/spec/unit/stick-at-top-when-scrolling.spec.js

@@ -0,0 +1,137 @@
+/* global describe it expect beforeEach afterEach */
+
+var $ = window.jQuery
+
+describe('stick-at-top-when-scrolling', function () {
+  'use strict'
+  var GOVUK = window.GOVUK
+
+  var $stickyElement
+  var $stickyWrapper
+
+  beforeEach(function () {
+    $stickyElement = $('<div class="stick-at-top-when-scrolling"></div>')
+    $stickyWrapper = $('<div>').append($stickyElement)
+
+    $('body').append($stickyWrapper)
+  })
+
+  afterEach(function () {
+    $stickyWrapper.remove()
+  })
+
+  describe('when stick is called', function () {
+    it('should add fixed class on stick', function () {
+      expect(!$stickyElement.hasClass('content-fixed')).toBe(true)
+      GOVUK.stickAtTopWhenScrolling.stick($stickyElement)
+      expect($stickyElement.hasClass('content-fixed')).toBe(true)
+    })
+
+    it('should insert shim when sticking the element', function () {
+      expect($('.shim').length).toBe(0)
+      GOVUK.stickAtTopWhenScrolling.stick($stickyElement)
+      expect($('.shim').length).toBe(1)
+    })
+
+    it('should insert shim with minimum height', function () {
+      GOVUK.stickAtTopWhenScrolling.stick($stickyElement)
+      expect($('.shim').height()).toBe(1)
+    })
+  })
+
+  describe('when release is called', function () {
+    it('should remove fixed class', function () {
+      $stickyElement.addClass('content-fixed')
+      GOVUK.stickAtTopWhenScrolling.release($stickyElement)
+      expect($stickyElement.hasClass('content-fixed')).toBe(false)
+    })
+
+    it('should remove the shim', function () {
+      $stickyElement = $('<div class="stick-at-top-when-scrolling content-fixed"></div>')
+      GOVUK.stickAtTopWhenScrolling.release($stickyElement)
+      expect($('.shim').length).toBe(0)
+    })
+  })
+
+  describe('for larger screens (>768px)', function () {
+    beforeEach(function () {
+      GOVUK.stickAtTopWhenScrolling.getWindowPositions = function () {
+        return {
+          scrollTop: 300
+        }
+      }
+      GOVUK.stickAtTopWhenScrolling.getElementOffset = function () {
+        return {
+          top: 300
+        }
+      }
+      GOVUK.stickAtTopWhenScrolling.getWindowDimensions = function () {
+        return {
+          height: 768,
+          width: 769
+        }
+      }
+      GOVUK.stickAtTopWhenScrolling.$els = $stickyElement
+      GOVUK.stickAtTopWhenScrolling._hasScrolled = true
+      GOVUK.stickAtTopWhenScrolling.checkScroll()
+    })
+
+    it('should stick, if the scroll position is past the element position', function () {
+      expect($stickyElement.hasClass('content-fixed')).toBe(true)
+    })
+
+    it('should check the width of the parent, and make the width of the element and the shim the same on resize', function () {
+      var $stickyResizeElement = $('<div class="stick-at-top-when-scrolling js-sticky-resize"></div>')
+      var $stickyResizeWrapper = $('<div class="column-third" style="width:300px;">').append($stickyResizeElement)
+      $('body').append($stickyResizeWrapper)
+
+      GOVUK.stickAtTopWhenScrolling.$els = $stickyResizeElement
+      GOVUK.stickAtTopWhenScrolling._hasResized = true
+      GOVUK.stickAtTopWhenScrolling.checkResize()
+
+      var stickyElementParentWidth = $stickyResizeElement.parent('div').width()
+      expect(stickyElementParentWidth).toBe(300)
+
+      var stickyElementWidth = $stickyResizeElement.width()
+      expect(stickyElementWidth).toBe(300)
+
+      var stickElementShimWidth = $('.shim').width()
+      expect(stickElementShimWidth).toBe(300)
+    })
+
+    it('should unstick, if the scroll position is less than the point at which scrolling started', function () {
+      GOVUK.stickAtTopWhenScrolling.getWindowPositions = function () {
+        return {
+          scrollTop: 0
+        }
+      }
+      GOVUK.stickAtTopWhenScrolling.$els = $stickyElement
+      GOVUK.stickAtTopWhenScrolling._hasScrolled = true
+      GOVUK.stickAtTopWhenScrolling.checkScroll()
+      expect($stickyElement.hasClass('content-fixed')).toBe(false)
+    })
+  })
+
+  describe('for smaller screens (<=768px)', function () {
+    beforeEach(function () {
+      GOVUK.stickAtTopWhenScrolling.getWindowDimensions = function () {
+        return {
+          height: 768,
+          width: 767
+        }
+      }
+      GOVUK.stickAtTopWhenScrolling.getElementOffset = function () {
+        return {
+          top: 300
+        }
+      }
+      GOVUK.stickAtTopWhenScrolling.$els = $stickyElement
+      GOVUK.stickAtTopWhenScrolling._hasScrolled = true
+      GOVUK.stickAtTopWhenScrolling.checkScroll()
+    })
+
+    it('should unstick the element', function () {
+      expect($stickyElement.hasClass('content-fixed')).toBe(false)
+    })
+  })
+})

data/app/assets/stylesheets/_colours.scss

@@ -0,0 +1,2 @@
+@import "colours/palette";
+@import "colours/organisation";

data/app/assets/stylesheets/_conditionals.scss

@@ -0,0 +1,81 @@
+// Media query helpers. These make producing IE layouts
+// super easy.
+
+// The base css you write should be for mobile. You can
+// then add desktop styles on top.
+//
+// Usage:
+//
+//   div.columns {
+//     border: 1px solid;
+//
+//     @include media(desktop){
+//       width: 30%;
+//       float: left;
+//     }
+//     @include ie-lte(8) {
+//       something to fix visual bugs in old IE
+//     }
+//     @include ie(6) {
+//       padding: 0;
+//     }
+//   }
+
+
+$is-ie: false !default;
+$mobile-ie6: true !default;
+
+$tablet-breakpoint: 641px !default;
+$desktop-breakpoint: 769px !default;
+
+@mixin media($size: false, $max-width: false, $min-width: false, $ignore-for-ie: false) {
+  @if $is-ie and ($ignore-for-ie == false) {
+    @if $size != mobile {
+      @if ($ie-version == 6 and $mobile-ie6 == false) or $ie-version > 6 {
+        @content;
+      }
+    }
+  } @else {
+    @if $size == desktop {
+      @media (min-width: $desktop-breakpoint){
+        @content;
+      }
+    } @else if $size == tablet {
+      @media (min-width: $tablet-breakpoint){
+        @content;
+      }
+    } @else if $size == mobile {
+      @media (max-width: $tablet-breakpoint - 1px){
+        @content;
+      }
+    } @else if $max-width != false {
+      @media (max-width: $max-width){
+        @content;
+      }
+    } @else if $min-width != false {
+      @media (min-width: $min-width){
+        @content;
+      }
+    } @else {
+      @media (min-width: $size){
+        @content
+      }
+    }
+  }
+}
+
+@mixin ie-lte($version) {
+  @if $is-ie {
+    @if $ie-version <= $version {
+      @content;
+    }
+  }
+}
+
+@mixin ie($version) {
+  @if $is-ie {
+    @if $ie-version == $version {
+      @content;
+    }
+  }
+}

data/app/assets/stylesheets/_css3.scss

@@ -0,0 +1,90 @@
+// CSS 3 mixins
+
+// This file includes mixins for CSS properties that require vendor prefixes.
+
+// Please add more mixins here as you need them, rather than adding them to
+// your application - this lets us manage them in one place.
+
+// You can use the @warn directive to deprecate a mixin where the property
+// no longer needs prefixes.
+
+// This style of indentation is preferred as it is easier to scan
+// Allow more than two spaces per indentation level and don't require a space after a colon
+// scss-lint:disable Indentation SpaceAfterPropertyColon
+
+@mixin border-radius($radius) {
+  -webkit-border-radius: $radius; // Chrome 4.0, Safari 3.1 to 4.0, Mobile Safari 3.2, Android Browser 2.1
+     -moz-border-radius: $radius; // Firefox 2.0 to 3.6
+          border-radius: $radius;
+}
+
+@mixin box-shadow($shadow) {
+  -webkit-box-shadow: $shadow; // Chrome 4.0 to 9.0, Safari 3.1 to 5.0, Mobile Safari 3.2 to 4.3, Android Browser 2.1 to 3.0
+     -moz-box-shadow: $shadow; // Firefox 3.5 to 3.6
+          box-shadow: $shadow;
+}
+
+@mixin scale($x, $y, $transform-origin: 50% 50% 0) {
+  // $x and $y should be numeric values without units
+  -webkit-transform: scale($x, $y); // Still in use now, started at: Chrome 4.0, Safari 3.1, Mobile Safari 3.2, Android 2.1
+     -moz-transform: scale($x, $y); // Firefox 3.5 to 15.0
+      -ms-transform: scale($x, $y); // IE9 only
+          transform: scale($x, $y);
+
+  -webkit-transform-origin: $transform-origin; // Chrome, Safari 3.1
+     -moz-transform-origin: $transform-origin; // Firefox 10 to 15.0
+      -ms-transform-origin: $transform-origin; // IE9
+          transform-origin: $transform-origin;
+}
+
+@mixin translate($x, $y) {
+  -webkit-transform: translate($x, $y); // Still in use now, started at: Chrome 4.0, Safari 3.1, Mobile Safari 3.2, Android 2.1
+     -moz-transform: translate($x, $y); // Firefox 3.5 to 15.0
+      -ms-transform: translate($x, $y); // IE9 only
+       -o-transform: translate($x, $y); // Opera 10.5 to 12.0
+          transform: translate($x, $y);
+}
+
+@mixin gradient($from, $to) {
+  // Creates a vertical gradient where $from is the colour at the top of the element
+  // and $to is the colour at the bottom. The top colour is used as a background-color
+  // for browsers that don't support gradients.
+  background-color: $from;
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to)); // Safari 4.0 to 5.1, Chrome 1.0 to 10.0, old deprecated syntax
+  background-image: -webkit-linear-gradient($from, $to); // Chrome 10.0 to 25.0, Safari 5.1 to 6.0, Mobile Safari 5.0 to 6.1, Android Browser 4.0 to 4.3
+  background-image:    -moz-linear-gradient($from, $to); // Firefox 3.6 to 15.0
+  background-image:      -o-linear-gradient($from, $to); // Opera 11.1 to 12.0
+  background-image:         linear-gradient($from, $to);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$from}', endColorstr='#{$to}',GradientType=0 ); // IE6 to IE9
+}
+
+@mixin transition($property, $duration, $function, $delay: 0s) {
+  -webkit-transition: ($property $duration $function $delay); // Chrome 4.0 to 25.0, Safari 3.1 to 6.0, Mobile Safari 3.2 to 6.1, Android Browser 2.1 to 4.3
+     -moz-transition: ($property $duration $function $delay); // Firefox 4.0 to 15.0
+       -o-transition: ($property $duration $function $delay); // Opera 10.5 to 12.0
+          transition: ($property $duration $function $delay);
+}
+
+@mixin box-sizing($type) {
+  // http://www.w3.org/TR/css3-ui/#box-sizing
+  // $type can be one of: content-box | padding-box | border-box | inherit
+  -webkit-box-sizing: $type; // Chrome 4.0 to 9.0, Safari 3.1 to 5.0, Mobile Safari 3.2 to 4.3, Android Browser 2.1 to 3.0
+     -moz-box-sizing: $type; // Firefox 2.0 to 28.0, Firefox for Android 26.0 onwards
+          box-sizing: $type;
+}
+
+@mixin appearance($appearance) {
+  -webkit-appearance: $appearance;
+     -moz-appearance: $appearance;
+}
+
+@mixin calc($property, $calc) {
+  #{$property}: -webkit-calc(#{$calc}); // Chrome 19.0 to 25.0, Safari 6.0, Mobile Safari 6.0 to 6.1
+  #{$property}:         calc(#{$calc});
+}
+
+@mixin opacity($trans) {
+  zoom: 1;
+  filter: unquote('alpha(opacity=' + ($trans * 100) + ')'); // IE6 to IE8
+  opacity: $trans;
+}

data/app/assets/stylesheets/_device-pixels.scss

@@ -0,0 +1,10 @@
+@mixin device-pixel-ratio($ratio: 2) {
+  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
+  only screen and (min--moz-device-pixel-ratio: $ratio),
+  only screen and (  -o-min-device-pixel-ratio: #{($ratio*10)}/10),
+  only screen and (     min-device-pixel-ratio: $ratio),
+  only screen and (             min-resolution: #{($ratio*96)}dpi),
+  only screen and (             min-resolution: #{$ratio}dppx) {
+    @content;
+  }
+}