Add CSS class name prefix

sass/form/checkbox-radio.scss

@@ -20,14 +20,14 @@
   }
 }
 
-.checkbox {
+.#{$class-prefix}checkbox {
   @extend %checkbox-radio;
 }
 
-.radio {
+.#{$class-prefix}radio {
   @extend %checkbox-radio;
 
-  & + .radio {
+  & + .#{$class-prefix}radio {
     @include ltr-property("margin", 0.5em, false);
   }
 }

sass/form/file.scss

@@ -13,7 +13,7 @@ $file-name-max-width: 16em !default;
 
 $file-colors: $form-colors !default;
 
-.file {
+.#{$class-prefix}file {
   @extend %unselectable;
 
   align-items: stretch;
@@ -27,7 +27,7 @@ $file-colors: $form-colors !default;
     $color-invert: nth($pair, 2);
 
     &.is-#{$name} {
-      .file-cta {
+      .#{$class-prefix}file-cta {
         background-color: $color;
         border-color: transparent;
         color: $color-invert;
@@ -35,7 +35,7 @@ $file-colors: $form-colors !default;
 
       &:hover,
       &.is-hovered {
-        .file-cta {
+        .#{$class-prefix}file-cta {
           background-color: bulmaDarken($color, 2.5%);
           border-color: transparent;
           color: $color-invert;
@@ -44,7 +44,7 @@ $file-colors: $form-colors !default;
 
       &:focus,
       &.is-focused {
-        .file-cta {
+        .#{$class-prefix}file-cta {
           border-color: transparent;
           box-shadow: 0 0 0.5em bulmaRgba($color, 0.25);
           color: $color-invert;
@@ -53,7 +53,7 @@ $file-colors: $form-colors !default;
 
       &:active,
       &.is-active {
-        .file-cta {
+        .#{$class-prefix}file-cta {
           background-color: bulmaDarken($color, 5%);
           border-color: transparent;
           color: $color-invert;
@@ -74,7 +74,7 @@ $file-colors: $form-colors !default;
   &.is-medium {
     font-size: $size-medium;
 
-    .file-icon {
+    .#{$class-prefix}file-icon {
       .fa {
         font-size: 21px;
       }
@@ -84,7 +84,7 @@ $file-colors: $form-colors !default;
   &.is-large {
     font-size: $size-large;
 
-    .file-icon {
+    .#{$class-prefix}file-icon {
       .fa {
         font-size: 28px;
       }
@@ -93,43 +93,43 @@ $file-colors: $form-colors !default;
 
   // Modifiers
   &.has-name {
-    .file-cta {
+    .#{$class-prefix}file-cta {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
     }
 
-    .file-name {
+    .#{$class-prefix}file-name {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
     }
 
     &.is-empty {
-      .file-cta {
+      .#{$class-prefix}file-cta {
         border-radius: $file-radius;
       }
 
-      .file-name {
+      .#{$class-prefix}file-name {
         display: none;
       }
     }
   }
 
   &.is-boxed {
-    .file-label {
+    .#{$class-prefix}file-label {
       flex-direction: column;
     }
 
-    .file-cta {
+    .#{$class-prefix}file-cta {
       flex-direction: column;
       height: auto;
       padding: 1em 3em;
     }
 
-    .file-name {
+    .#{$class-prefix}file-name {
       border-width: 0 1px 1px;
     }
 
-    .file-icon {
+    .#{$class-prefix}file-icon {
       height: 1.5em;
       width: 1.5em;
 
@@ -139,29 +139,29 @@ $file-colors: $form-colors !default;
     }
 
     &.is-small {
-      .file-icon .fa {
+      .#{$class-prefix}file-icon .fa {
         font-size: 14px;
       }
     }
 
     &.is-medium {
-      .file-icon .fa {
+      .#{$class-prefix}file-icon .fa {
         font-size: 28px;
       }
     }
 
     &.is-large {
-      .file-icon .fa {
+      .#{$class-prefix}file-icon .fa {
         font-size: 35px;
       }
     }
 
     &.has-name {
-      .file-cta {
+      .#{$class-prefix}file-cta {
         border-radius: $file-radius $file-radius 0 0;
       }
 
-      .file-name {
+      .#{$class-prefix}file-name {
         border-radius: 0 0 $file-radius $file-radius;
         border-width: 0 1px 1px;
       }
@@ -173,11 +173,11 @@ $file-colors: $form-colors !default;
   }
 
   &.is-fullwidth {
-    .file-label {
+    .#{$class-prefix}file-label {
       width: 100%;
     }
 
-    .file-name {
+    .#{$class-prefix}file-name {
       flex-grow: 1;
       max-width: none;
     }
@@ -186,11 +186,11 @@ $file-colors: $form-colors !default;
   &.is-right {
     justify-content: flex-end;
 
-    .file-cta {
+    .#{$class-prefix}file-cta {
       border-radius: 0 $file-radius $file-radius 0;
     }
 
-    .file-name {
+    .#{$class-prefix}file-name {
       border-radius: $file-radius 0 0 $file-radius;
       border-width: 1px 0 1px 1px;
       order: -1;
@@ -198,7 +198,7 @@ $file-colors: $form-colors !default;
   }
 }
 
-.file-label {
+.#{$class-prefix}file-label {
   align-items: stretch;
   display: flex;
   cursor: pointer;
@@ -207,29 +207,29 @@ $file-colors: $form-colors !default;
   position: relative;
 
   &:hover {
-    .file-cta {
+    .#{$class-prefix}file-cta {
       background-color: bulmaDarken($file-cta-background-color, 2.5%);
       color: $file-cta-hover-color;
     }
 
-    .file-name {
+    .#{$class-prefix}file-name {
       border-color: bulmaDarken($file-name-border-color, 2.5%);
     }
   }
 
   &:active {
-    .file-cta {
+    .#{$class-prefix}file-cta {
       background-color: bulmaDarken($file-cta-background-color, 5%);
       color: $file-cta-active-color;
     }
 
-    .file-name {
+    .#{$class-prefix}file-name {
       border-color: bulmaDarken($file-name-border-color, 5%);
     }
   }
 }
 
-.file-input {
+.#{$class-prefix}file-input {
   height: 100%;
   left: 0;
   opacity: 0;
@@ -239,8 +239,8 @@ $file-colors: $form-colors !default;
   width: 100%;
 }
 
-.file-cta,
-.file-name {
+.#{$class-prefix}file-cta,
+.#{$class-prefix}file-name {
   @extend %control;
 
   border-color: $file-border-color;
@@ -251,12 +251,12 @@ $file-colors: $form-colors !default;
   white-space: nowrap;
 }
 
-.file-cta {
+.#{$class-prefix}file-cta {
   background-color: $file-cta-background-color;
   color: $file-cta-color;
 }
 
-.file-name {
+.#{$class-prefix}file-name {
   border-color: $file-name-border-color;
   border-style: $file-name-border-style;
   border-width: $file-name-border-width;
@@ -267,7 +267,7 @@ $file-colors: $form-colors !default;
   text-overflow: ellipsis;
 }
 
-.file-icon {
+.#{$class-prefix}file-icon {
   align-items: center;
   display: flex;
   height: 1em;

sass/form/input-textarea.scss

@@ -56,7 +56,7 @@ $textarea-colors: $form-colors !default;
   }
 }
 
-.input {
+.#{$class-prefix}input {
   @extend %input-textarea;
 
   &.is-rounded {
@@ -74,7 +74,7 @@ $textarea-colors: $form-colors !default;
   }
 }
 
-.textarea {
+.#{$class-prefix}textarea {
   @extend %input-textarea;
 
   display: block;

sass/form/select.scss

@@ -1,6 +1,6 @@
 $select-colors: $form-colors !default;
 
-.select {
+.#{$class-prefix}select {
   display: inline-block;
   max-width: 100%;
   position: relative;

sass/form/tools.scss

@@ -5,7 +5,7 @@ $help-size: $size-small !default;
 
 $label-colors: $form-colors !default;
 
-.label {
+.#{$class-prefix}label {
   color: $label-color;
   display: block;
   font-size: $size-normal;
@@ -29,7 +29,7 @@ $label-colors: $form-colors !default;
   }
 }
 
-.help {
+.#{$class-prefix}help {
   display: block;
   font-size: $help-size;
   margin-top: 0.25rem;
@@ -45,7 +45,7 @@ $label-colors: $form-colors !default;
 
 // Containers
 
-.field {
+.#{$class-prefix}field {
   &:not(:last-child) {
     margin-bottom: 0.75rem;
   }
@@ -55,29 +55,28 @@ $label-colors: $form-colors !default;
     display: flex;
     justify-content: flex-start;
 
-    .control {
+    .#{$class-prefix}control {
       &:not(:last-child) {
         @include ltr-property("margin", -1px);
       }
 
       &:not(:first-child):not(:last-child) {
-        .button,
-        .input,
-        .select select {
+        .#{$class-prefix}button,
+        .#{$class-prefix}input,
+        .#{$class-prefix}select select {
           border-radius: 0;
         }
       }
 
       &:first-child:not(:only-child) {
-        .button,
-        .input,
-        .select select {
+        .#{$class-prefix}button,
+        .#{$class-prefix}input,
+        .#{$class-prefix}select select {
           @include ltr {
             border-bottom-right-radius: 0;
             border-top-right-radius: 0;
           }
 
-
           @include rtl {
             border-bottom-left-radius: 0;
             border-top-left-radius: 0;
@@ -86,15 +85,14 @@ $label-colors: $form-colors !default;
       }
 
       &:last-child:not(:only-child) {
-        .button,
-        .input,
-        .select select {
+        .#{$class-prefix}button,
+        .#{$class-prefix}input,
+        .#{$class-prefix}select select {
           @include ltr {
             border-bottom-left-radius: 0;
             border-top-left-radius: 0;
           }
 
-
           @include rtl {
             border-bottom-right-radius: 0;
             border-top-right-radius: 0;
@@ -102,9 +100,9 @@ $label-colors: $form-colors !default;
         }
       }
 
-      .button,
-      .input,
-      .select select {
+      .#{$class-prefix}button,
+      .#{$class-prefix}input,
+      .#{$class-prefix}select select {
         &:not([disabled]) {
           &:hover,
           &.is-hovered {
@@ -139,7 +137,7 @@ $label-colors: $form-colors !default;
     }
 
     &.has-addons-fullwidth {
-      .control {
+      .#{$class-prefix}control {
         flex-grow: 1;
         flex-shrink: 0;
       }
@@ -150,7 +148,7 @@ $label-colors: $form-colors !default;
     display: flex;
     justify-content: flex-start;
 
-    & > .control {
+    & > .#{$class-prefix}control {
       flex-shrink: 0;
 
       &:not(:last-child) {
@@ -176,7 +174,7 @@ $label-colors: $form-colors !default;
     &.is-grouped-multiline {
       flex-wrap: wrap;
 
-      & > .control {
+      & > .#{$class-prefix}control {
         &:last-child,
         &:not(:last-child) {
           margin-bottom: 0.75rem;
@@ -200,8 +198,8 @@ $label-colors: $form-colors !default;
   }
 }
 
-.field-label {
-  .label {
+.#{$class-prefix}field-label {
+  .#{$class-prefix}label {
     font-size: inherit;
   }
 
@@ -209,7 +207,6 @@ $label-colors: $form-colors !default;
     margin-bottom: 0.5rem;
   }
 
-
   @include tablet {
     flex-basis: 0;
     flex-grow: 1;
@@ -240,8 +237,8 @@ $label-colors: $form-colors !default;
   }
 }
 
-.field-body {
-  .field .field {
+.#{$class-prefix}field-body {
+  .#{$class-prefix}field .#{$class-prefix}field {
     margin-bottom: 0;
   }
 
@@ -251,11 +248,11 @@ $label-colors: $form-colors !default;
     flex-grow: 5;
     flex-shrink: 1;
 
-    .field {
+    .#{$class-prefix}field {
       margin-bottom: 0;
     }
 
-    & > .field {
+    & > .#{$class-prefix}field {
       flex-shrink: 1;
 
       &:not(.is-narrow) {
@@ -269,7 +266,7 @@ $label-colors: $form-colors !default;
   }
 }
 
-.control {
+.#{$class-prefix}control {
   box-sizing: border-box;
   clear: both;
   font-size: $size-normal;
@@ -279,28 +276,28 @@ $label-colors: $form-colors !default;
   // Modifiers
   &.has-icons-left,
   &.has-icons-right {
-    .input,
-    .select {
+    .#{$class-prefix}input,
+    .#{$class-prefix}select {
       &:focus {
-        & ~ .icon {
+        & ~ .#{$class-prefix}icon {
           color: $input-icon-active-color;
         }
       }
 
-      &.is-small ~ .icon {
+      &.is-small ~ .#{$class-prefix}icon {
         font-size: $size-small;
       }
 
-      &.is-medium ~ .icon {
+      &.is-medium ~ .#{$class-prefix}icon {
         font-size: $size-medium;
       }
 
-      &.is-large ~ .icon {
+      &.is-large ~ .#{$class-prefix}icon {
         font-size: $size-large;
       }
     }
 
-    .icon {
+    .#{$class-prefix}icon {
       color: $input-icon-color;
       height: $input-height;
       pointer-events: none;
@@ -312,23 +309,23 @@ $label-colors: $form-colors !default;
   }
 
   &.has-icons-left {
-    .input,
-    .select select {
+    .#{$class-prefix}input,
+    .#{$class-prefix}select select {
       padding-left: $input-height;
     }
 
-    .icon.is-left {
+    .#{$class-prefix}icon.is-left {
       left: 0;
     }
   }
 
   &.has-icons-right {
-    .input,
-    .select select {
+    .#{$class-prefix}input,
+    .#{$class-prefix}select select {
       padding-right: $input-height;
     }
 
-    .icon.is-right {
+    .#{$class-prefix}icon.is-right {
       right: 0;
     }
   }