Merge pull request #557 from alphagov/namespace-mixins-and-functions

Namespace all @functions and @mixin's

CHANGELOG.md

@@ -6,6 +6,7 @@ Note: We're not following semantic versioning yet, we are going to talk about th
 
 Breaking changes:
 
+- Namespace existing mixins and functions ( PR [#557](https://github.com/alphagov/govuk-frontend/pull/557))
 - The class `.govuk-section-break__visible` has been renamed to
   `.govuk-section-break--visible` as it is a modifier, not an element.
   (PR [#547](https://github.com/alphagov/govuk-frontend/pull/547)

src/components/back-link/_back-link.scss

@@ -1,6 +1,6 @@
 @import "../../globals/scss/common";
 
-@include exports("back-link") {
+@include govuk-exports("back-link") {
 
   .govuk-c-back-link {
     @include govuk-font-regular-16;
@@ -31,7 +31,7 @@
 
     // Prepend left pointing arrow
     &:before {
-      @include arrow($direction: left, $base: 10px, $height: 6px);
+      @include govuk-shape-arrow($direction: left, $base: 10px, $height: 6px);
 
       content: "";
 

src/components/breadcrumbs/_breadcrumbs.scss

@@ -1,6 +1,6 @@
 @import "../../globals/scss/common";
 
-@include exports("breadcrumbs") {
+@include govuk-exports("breadcrumbs") {
 
   // Size of chevron (excluding border)
   $chevron-size: 7px;
@@ -82,7 +82,7 @@
       border-color: $chevron-border-colour;
 
       // Fall back to a greater than sign for IE8
-      @include ie(8) {
+      @include govuk-ie(8) {
         content: "\003e"; // Greater than sign (>)
         width: auto;
         height: auto;

src/components/button/_button.scss

@@ -1,6 +1,6 @@
 @import "../../globals/scss/common";
 
-@include exports("button") {
+@include govuk-exports("button") {
 
   // Because the shadow (s0) is visually 'part of' the button, we need to reduce
   // the height of the button to compensate by adjusting its padding (s1) and
@@ -133,7 +133,7 @@
     &:active {
       top: 0;
       box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
-      @include ie-lte(8) {
+      @include govuk-ie-lte(8) {
         border-bottom: $button-shadow-size solid $govuk-button-shadow-colour; // s0
       }
     }
@@ -156,23 +156,23 @@
     padding-bottom: $govuk-spacing-scale-2 - $govuk-border-width-form-element;
     padding-left: $govuk-spacing-scale-3;
 
-    background-image: file-url("icon-pointer.png");
+    background-image: govuk-file-url("icon-pointer.png");
 
     @include govuk-h-device-pixel-ratio {
-      background-image: file-url("icon-pointer-2x.png");
+      background-image: govuk-file-url("icon-pointer-2x.png");
       background-size: 30px 19px;
     }
 
     background-repeat: no-repeat;
     background-position: 100% 50%;
     box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour;
-    @include ie-lte(8) {
+    @include govuk-ie-lte(8) {
       border-bottom: $button-shadow-size solid $govuk-button-shadow-colour;
     }
   }
 
   // Fixes a bug where IE puts a black border around certain elements
-  @include ie-lte(8) {
+  @include govuk-ie-lte(8) {
     .govuk-c-button[type="submit"],
     .govuk-c-button[type="reset"],
     .govuk-c-button[type="button"] {

src/components/checkboxes/_checkboxes.scss

@@ -1,6 +1,6 @@
 @import "../../globals/scss/common";
 
-@include exports("checkboxes") {
+@include govuk-exports("checkboxes") {
   .govuk-c-checkboxes__item {
     @include govuk-font-regular-19;
 
@@ -33,7 +33,7 @@
     cursor: pointer;
 
     // IE8 doesn’t support pseudoelements, so we don’t want to hide native elements there.
-    @if ($is-ie == false) or ($ie-version == 9) {
+    @if ($govuk-is-ie == false) or ($govuk-ie-version == 9) {
       margin: 0;
       opacity: 0;
     }

src/components/date-input/_date-input.scss

@@ -3,7 +3,7 @@
 @import "../input/input";
 @import "../error-message/error-message";
 
-@include exports("date-input") {
+@include govuk-exports("date-input") {
   .govuk-c-date-input {
     @include govuk-h-clearfix;
   }

src/components/details/_details.scss

@@ -1,6 +1,6 @@
 @import "../../globals/scss/common";
 
-@include exports("details") {
+@include govuk-exports("details") {
 
   .govuk-c-details {
     @include govuk-font-regular-19;
@@ -60,10 +60,10 @@
 
     margin: auto;
 
-    @include arrow($direction: right, $base: 14px);
+    @include govuk-shape-arrow($direction: right, $base: 14px);
 
     .govuk-c-details[open] > & {
-      @include arrow($direction: down, $base: 14px);
+      @include govuk-shape-arrow($direction: down, $base: 14px);
     }
   }
 

src/components/error-message/_error-message.scss

@@ -1,6 +1,6 @@
 @import "../../globals/scss/common";
 
-@include exports("error-message") {
+@include govuk-exports("error-message") {
   .govuk-c-error-message {
     @include govuk-font-bold-19;
 

src/components/error-summary/_error-summary.scss

@@ -1,6 +1,6 @@
 @import "../../globals/scss/common";
 
-@include exports("error-summary") {
+@include govuk-exports("error-summary") {
 
   .govuk-c-error-summary {
     @include govuk-text-colour;
@@ -14,7 +14,7 @@
     }
 
     // TODO: Fix IE < 8
-    @include ie-lte(6) {
+    @include govuk-ie-lte(6) {
       zoom: 1;
     }
   }

src/components/fieldset/_fieldset.scss

@@ -1,6 +1,6 @@
 @import "../../globals/scss/common";
 
-@include exports("fieldset") {
+@include govuk-exports("fieldset") {
   .govuk-c-fieldset {
     margin: 0;
     padding: 0;

src/components/file-upload/_file-upload.scss

@@ -1,6 +1,6 @@
 @import "../../globals/scss/common";
 
-@include exports("file-upload") {
+@include govuk-exports("file-upload") {
   .govuk-c-file-upload {
     @include govuk-font-regular-19;
     @include govuk-text-colour;

src/components/input/_input.scss

@@ -2,7 +2,7 @@
 @import "../label/label";
 @import "../error-message/error-message";
 
-@include exports("input") {
+@include govuk-exports("input") {
   .govuk-c-input {
     @include govuk-font-regular-19;
     @include govuk-focusable;

src/components/label/_label.scss

@@ -1,6 +1,6 @@
 @import "../../globals/scss/common";
 
-@include exports("label") {
+@include govuk-exports("label") {
   .govuk-c-label {
     @include govuk-font-regular-19;
     @include govuk-text-colour;

src/components/panel/_panel.scss

@@ -1,6 +1,6 @@
 @import "../../globals/scss/common";
 
-@include exports("panel") {
+@include govuk-exports("panel") {
 
   .govuk-c-panel {
     @include govuk-font-regular-19;

src/components/phase-banner/_phase-banner.scss

@@ -1,7 +1,7 @@
 @import "../../globals/scss/common";
 @import "../tag/tag";
 
-@include exports("phase-banner") {
+@include govuk-exports("phase-banner") {
   .govuk-c-phase-banner {
     @include govuk-font-regular-16;
     @include govuk-text-colour;

src/components/radios/_radios.scss

@@ -1,6 +1,6 @@
 @import "../../globals/scss/common";
 
-@include exports("radios") {
+@include govuk-exports("radios") {
   .govuk-c-radios__item {
     @include govuk-font-regular-19;
 
@@ -40,7 +40,7 @@
     cursor: pointer;
 
     // IE8 doesn’t support pseudoelements, so we don’t want to hide native elements there. Double colons get ommited by IE8.
-    @if ($is-ie == false) or ($ie-version == 9) {
+    @if ($govuk-is-ie == false) or ($govuk-ie-version == 9) {
       margin: 0;
       opacity: 0;
     }

src/components/select/_select.scss

@@ -1,7 +1,7 @@
 @import "../../globals/scss/common";
 @import "../label/label";
 
-@include exports("select") {
+@include govuk-exports("select") {
   .govuk-c-select {
     @include govuk-font-regular;
     @include govuk-typography-responsive(

src/components/skip-link/_skip-link.scss

@@ -1,6 +1,6 @@
 @import "../../globals/scss/common";
 
-@include exports("skip-link") {
+@include govuk-exports("skip-link") {
   .govuk-c-skip-link {
     @include govuk-h-visually-hidden-focusable;
     @include govuk-focusable-fill;

src/components/table/_table.scss

@@ -1,6 +1,6 @@
 @import "../../globals/scss/common";
 
-@include exports("table") {
+@include govuk-exports("table") {
   .govuk-c-table {
     @include govuk-text-colour;
     width: 100%;
@@ -13,15 +13,15 @@
   .govuk-c-table__header {
     @include govuk-font-bold-19;
 
-    padding: em($govuk-spacing-scale-2, 19px) em($govuk-spacing-scale-4, 19px) em($govuk-spacing-scale-2, 19px) 0;
+    padding: govuk-em($govuk-spacing-scale-2, 19px) govuk-em($govuk-spacing-scale-4, 19px) govuk-em($govuk-spacing-scale-2, 19px) 0;
     border-bottom: 1px solid $govuk-border-colour;
     text-align: left;
   }
 
   .govuk-c-table__cell {
     @include govuk-font-regular-19;
 
-    padding: em($govuk-spacing-scale-2, 19px) em($govuk-spacing-scale-4, 19px) em($govuk-spacing-scale-2, 19px) 0;
+    padding: govuk-em($govuk-spacing-scale-2, 19px) govuk-em($govuk-spacing-scale-4, 19px) govuk-em($govuk-spacing-scale-2, 19px) 0;
     border-bottom: 1px solid $govuk-border-colour;
     text-align: left;
   }

src/components/tag/_tag.scss

@@ -1,6 +1,6 @@
 @import "../../globals/scss/common";
 
-@include exports("tag") {
+@include govuk-exports("tag") {
   .govuk-c-tag {
     @include govuk-font-bold;
     @include govuk-typography-responsive(

src/components/textarea/_textarea.scss

@@ -2,7 +2,7 @@
 @import "../label/label";
 @import "../error-message/error-message";
 
-@include exports("textarea") {
+@include govuk-exports("textarea") {
   .govuk-c-textarea {
     @include govuk-font-regular;
     @include govuk-typography-responsive(

src/components/warning-text/_warning-text.scss

@@ -1,6 +1,6 @@
 @import "../../globals/scss/common";
 
-@include exports("warning-text") {
+@include govuk-exports("warning-text") {
 
   .govuk-c-warning-text {
     @include govuk-font-regular-19;

src/globals/scss/_common.scss

@@ -24,7 +24,7 @@
 @import "tools/px-to-em";
 
 // Helpers
-@import "helpers/arrow";
+@import "helpers/shape-arrow";
 @import "helpers/clearfix";
 @import "helpers/device-pixels";
 @import "helpers/focusable";

src/globals/scss/_font-face.scss

@@ -1,6 +1,6 @@
 @import "tools/exports";
 
-@include exports("font-face") {
+@include govuk-exports("font-face") {
 
   // sass-lint:disable no-css-comments
   /* Warning: this file is automatically generated by `gds/fonts` - do not edit by hand */

src/globals/scss/core/_links.scss

@@ -1,4 +1,4 @@
-@include exports("links") {
+@include govuk-exports("links") {
 
   // We use placeholder classes here so that we can @extend from the prose scope
   // without also applying every other occurrence of the .govuk-link selector to

src/globals/scss/core/_lists.scss

@@ -1,4 +1,4 @@
-@include exports("lists") {
+@include govuk-exports("lists") {
 
   // We use a placeholder class here so that we can @extend from the prose scope
   // without also applying every other occurrence of the .govuk-list selector to
@@ -58,7 +58,7 @@
 
   %govuk-list--number {
     // TODO: Fix IE < 8
-    @include ie-lte(7) {
+    @include govuk-ie-lte(7) {
       padding-left: $govuk-spacing-scale-6; //used to be 28
     }
     padding-left: $govuk-spacing-scale-4;

src/globals/scss/core/_prose-scope.scss

@@ -1,5 +1,5 @@
 
-@include exports("prose-scope") {
+@include govuk-exports("prose-scope") {
   .govuk-prose-scope {
 
     // @extend inheritance

src/globals/scss/core/_section-break.scss

@@ -1,4 +1,4 @@
-@include exports("section-break") {
+@include govuk-exports("section-break") {
 
   // We use placeholder classes here so that we can @extend from the prose scope
 

src/globals/scss/core/_typography.scss

@@ -1,4 +1,4 @@
-@include exports("typography") {
+@include govuk-exports("typography") {
 
   // We use placeholder classes here so that we can @extend from the prose scope
   // without also applying every other occurrence of the typography selectors to

src/globals/scss/govuk-frontend-oldie.scss

@@ -6,7 +6,7 @@ $mq-responsive: false;
 
 // Set is-ie to true to output IE specific styles
 // uses the IE helpers in globals/_helpers.scss
-$is-ie: true;
-$ie-version: 8;
+$govuk-is-ie: true;
+$govuk-ie-version: 8;
 
 @import "govuk-frontend";

src/globals/scss/helpers/_clearfix.scss

@@ -5,12 +5,12 @@
     display: block;
     clear: both;
   }
-  @include ie-lte(7) {
+  @include govuk-ie-lte(7) {
     zoom: 1;
   }
 }
 
-@include exports("clearfix") {
+@include govuk-exports("clearfix") {
   .govuk-h-clearfix {
     @include govuk-h-clearfix;
   }