Prefixing & scoping styles (#9)

* Fixing link component * Reverting removed command * Prefixing classes * Make all styles scoped
FastyBird · Feb 22, 2022 · ac7cddc · ac7cddc
1 parent f2c1f12
commit ac7cddc
Show file tree

Hide file tree

Showing 101 changed files with 423 additions and 424 deletions.
diff --git a/src/assets/components/ui/fb-switch-element.scss b/src/assets/components/ui/fb-switch-element.scss
@@ -22,20 +22,20 @@ $thumb-background-color: #fff;
 @mixin switch-variant($color) {
   input {
     &:checked {
-      ~ .fb-ui-switch-element__track {
+      ~ .fb-theme-ui-switch-element__track {
         background-color: $color;
       }
 
-      ~ .fb-ui-switch-element__thumb {
+      ~ .fb-theme-ui-switch-element__thumb {
         border-color: $color;
       }
 
       &:disabled {
-        ~ .fb-ui-switch-element__track {
+        ~ .fb-theme-ui-switch-element__track {
           background-color: color.adjust($color, $lightness: 30%);
         }
 
-        ~ .fb-ui-switch-element__thumb {
+        ~ .fb-theme-ui-switch-element__thumb {
           border-color: color.adjust($color, $lightness: 30%);
         }
       }

diff --git a/src/components/forms/FbCheckbox/index.scss b/src/components/forms/FbCheckbox/index.scss
@@ -2,7 +2,7 @@
 @use "sass:color";
 @import "../../../assets/components/form/fb-checkbox";
 
-.fb-form-checkbox {
+.fb-theme-form-checkbox {
   &__container {
     display: inline-block;
     position: relative;
@@ -16,7 +16,7 @@
     vertical-align: middle;
     user-select: text;
 
-    .fb-form-checkbox {
+    .fb-theme-form-checkbox {
       &__indicator {
         background-color: $checkbox-indicator-bg-color;
         background-position: center center;
@@ -37,7 +37,7 @@
     }
 
     &[data-error="true"] {
-      .fb-form-checkbox {
+      .fb-theme-form-checkbox {
         &__indicator {
           border-color: $checkbox-error-color;
         }
@@ -52,22 +52,22 @@
   &__input {
     display: none;
 
-    &:checked ~ .fb-form-checkbox__indicator {
+    &:checked ~ .fb-theme-form-checkbox__indicator {
       border-color: $checkbox-indicator-checked-border-color;
       background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='%23fff'%3E%3Cpath d='M26.109 8.844q0 .625-.438 1.062L12.233 23.344q-.438.438-1.062.438t-1.062-.438l-7.781-7.781q-.438-.438-.438-1.062t.438-1.062l2.125-2.125q.438-.438 1.062-.438t1.062.438l4.594 4.609 10.25-10.266q.438-.438 1.062-.438t1.062.438l2.125 2.125q.438.437.438 1.062z'/%3E%3C/svg%3E");
       background-color: $checkbox-indicator-checked-bg-color;
     }
 
-    &:active ~ .fb-form-checkbox__indicator {
+    &:active ~ .fb-theme-form-checkbox__indicator {
       border-color: $checkbox-indicator-checked-border-color;
       background-color: color.adjust($checkbox-indicator-checked-bg-color, $lightness: 25%);
     }
 
-    &:disabled ~ .fb-form-checkbox__indicator {
+    &:disabled ~ .fb-theme-form-checkbox__indicator {
       background-color: $checkbox-indicator-disabled-bg-color;
     }
 
-    &:disabled:checked ~ .fb-form-checkbox__indicator {
+    &:disabled:checked ~ .fb-theme-form-checkbox__indicator {
       background-color: $checkbox-indicator-disabled-bg-color;
     }
   }

diff --git a/src/components/forms/FbCheckbox/index.vue b/src/components/forms/FbCheckbox/index.vue
@@ -2,7 +2,7 @@
   <label
     :data-size="size"
     :data-error="hasError"
-    class="fb-form-checkbox__container"
+    class="fb-theme-form-checkbox__container"
   >
     <input
       :id="id ? id : name"
@@ -12,16 +12,16 @@
       :readonly="readonly"
       :disabled="disabled"
       :tabindex="tabIndex"
-      class="fb-form-checkbox__input"
+      class="fb-theme-form-checkbox__input"
       type="checkbox"
       @change="handleChange"
     >
 
-    <span class="fb-form-checkbox__indicator" />
+    <span class="fb-theme-form-checkbox__indicator" />
 
     <span
       v-if="'default' in $slots || label !== null"
-      class="fb-form-checkbox__label"
+      class="fb-theme-form-checkbox__label"
     >
       <slot>{{ label }}</slot>
     </span>
@@ -148,6 +148,6 @@ export default defineComponent({
 })
 </script>
 
-<style rel="stylesheet/scss" lang="scss">
+<style rel="stylesheet/scss" lang="scss" scoped>
 @import 'index';
 </style>
diff --git a/src/components/forms/FbCheckboxes/index.scss b/src/components/forms/FbCheckboxes/index.scss
@@ -1,6 +1,6 @@
 @import "../../../assets/components/form/fb-checkboxes";
 
-.fb-form-checkboxes {
+.fb-theme-form-checkboxes {
   &__control {
     padding: $checkboxes-margin;
   }

diff --git a/src/components/forms/FbCheckboxes/index.vue b/src/components/forms/FbCheckboxes/index.vue
@@ -13,7 +13,7 @@
       <div
         role="group"
         aria-label="checkboxes-group"
-        class="fb-form-checkboxes__control"
+        class="fb-theme-form-checkboxes__control"
       >
         <template
           v-for="(option, index) in options"
@@ -176,6 +176,6 @@ export default defineComponent({
 })
 </script>
 
-<style rel="stylesheet/scss" lang="scss">
+<style rel="stylesheet/scss" lang="scss" scoped>
 @import 'index';
 </style>
diff --git a/src/components/forms/FbField/index.scss b/src/components/forms/FbField/index.scss
@@ -1,13 +1,13 @@
 @use "sass:color";
 @import "../../../assets/components/form/fb-field";
 
-.fb-form-field {
+.fb-theme-form-field {
   &__container {
     font-family: $field-font-family;
     font-size: $field-font-size;
     position: relative;
 
-    .fb-form-field__input-group {
+    .fb-theme-form-field__input-group {
       position: relative;
       display: table;
       border-collapse: separate;
@@ -46,7 +46,7 @@
       }
     }
 
-    .fb-form-field {
+    .fb-theme-form-field {
       &__input-group-addon {
         display: table-cell;
         width: 1%;
@@ -80,13 +80,13 @@
         position: relative;
 
         &-left-addon {
-          .fb-form-input__control {
+          .fb-theme-form-input__control {
             @include field-remove-left-border-radius;
           }
         }
 
         &-right-addon {
-          .fb-form-input__control {
+          .fb-theme-form-input__control {
             @include field-remove-right-border-radius;
           }
         }
@@ -125,7 +125,7 @@
     }
 
     &[data-size="lg"] {
-      .fb-form-field__input-feedback {
+      .fb-theme-form-field__input-feedback {
         width: $field-size-lg-feedback-size;
         height: $field-size-lg-feedback-size;
         line-height: $field-size-lg-feedback-size;
@@ -134,7 +134,7 @@
     }
 
     &[data-size="md"] {
-      .fb-form-field__input-feedback {
+      .fb-theme-form-field__input-feedback {
         width: $field-size-md-feedback-size;
         height: $field-size-md-feedback-size;
         line-height: $field-size-md-feedback-size;
@@ -143,7 +143,7 @@
     }
 
     &[data-size="sm"] {
-      .fb-form-field__input-feedback {
+      .fb-theme-form-field__input-feedback {
         width: $field-size-sm-feedback-size;
         height: $field-size-sm-feedback-size;
         line-height: $field-size-sm-feedback-size;

diff --git a/src/components/forms/FbField/index.vue b/src/components/forms/FbField/index.vue
@@ -3,7 +3,7 @@
     :data-orientation="orientation"
     :data-size="size"
     :data-error="error !== null"
-    class="fb-form-field__container"
+    class="fb-theme-form-field__container"
   >
     <fb-form-label
       :id="id ? id : name"
@@ -15,24 +15,24 @@
       {{ label }}
     </fb-form-label>
 
-    <div class="fb-form-field__input-field">
+    <div class="fb-theme-form-field__input-field">
       <div
         v-if="'left-addon' in $slots || 'right-addon' in $slots"
-        class="fb-form-field__input-group"
+        class="fb-theme-form-field__input-group"
       >
         <span
           v-if="'left-addon' in $slots"
-          class="fb-form-field__input-group-addon fb-form-field__input-group-addon-left"
+          class="fb-theme-form-field__input-group-addon fb-theme-form-field__input-group-addon-left"
         >
           <slot name="left-addon" />
         </span>
 
-        <span :class="['fb-form-field__grouped-input-field', {'fb-form-field__grouped-input-field-left-addon': 'left-addon' in $slots}, {'fb-form-field__grouped-input-field-right-addon': 'right-addon' in $slots}]">
+        <span :class="['fb-theme-form-field__grouped-input-field', {'fb-theme-form-field__grouped-input-field-left-addon': 'left-addon' in $slots}, {'fb-theme-form-field__grouped-input-field-right-addon': 'right-addon' in $slots}]">
           <slot name="field" />
 
           <span
             v-if="error !== null"
-            class="fb-form-field__input-feedback"
+            class="fb-theme-form-field__input-feedback"
             aria-hidden="true"
           >
             <svg
@@ -57,7 +57,7 @@
 
         <span
           v-if="'right-addon' in $slots"
-          class="fb-form-field__input-group-addon fb-form-field__input-group-addon-right"
+          class="fb-theme-form-field__input-group-addon fb-theme-form-field__input-group-addon-right"
         >
           <slot name="right-addon" />
         </span>
@@ -68,7 +68,7 @@
 
         <span
           v-if="error !== null"
-          class="fb-form-field__input-feedback"
+          class="fb-theme-form-field__input-feedback"
           aria-hidden="true"
         >
           <svg
@@ -93,7 +93,7 @@
 
       <p
         v-if="'help-line' in $slots"
-        class="fb-form-field__help"
+        class="fb-theme-form-field__help"
       >
         <slot name="help-line" />
       </p>
@@ -186,6 +186,6 @@ export default defineComponent({
 })
 </script>
 
-<style rel="stylesheet/scss" lang="scss">
+<style rel="stylesheet/scss" lang="scss" scoped>
 @import 'index';
 </style>
diff --git a/src/components/forms/FbInput/index.scss b/src/components/forms/FbInput/index.scss
@@ -1,7 +1,7 @@
 @use "sass:color";
 @import "../../../assets/components/form/fb-input";
 
-.fb-form-input {
+.fb-theme-form-input {
   &__control {
     display: block;
     width: 100%;

diff --git a/src/components/forms/FbInput/index.vue b/src/components/forms/FbInput/index.vue
@@ -37,7 +37,7 @@
         :readonly="readonly"
         :value="modelValue"
         :placeholder="error !== null && !isFocused ? error : placeholder"
-        class="fb-form-input__control"
+        class="fb-theme-form-input__control"
         @input="handleUpdateValue($event.target.value)"
         @focus="handleSetFocus(true)"
         @blur="handleSetFocus(false)"
@@ -211,6 +211,6 @@ export default defineComponent({
 })
 </script>
 
-<style rel="stylesheet/scss" lang="scss">
+<style rel="stylesheet/scss" lang="scss" scoped>
   @import 'index';
 </style>
diff --git a/src/components/forms/FbLabel/index.vue b/src/components/forms/FbLabel/index.vue
@@ -74,6 +74,6 @@ export default defineComponent({
 })
 </script>
 
-<style rel="stylesheet/scss" lang="scss">
+<style rel="stylesheet/scss" lang="scss" scoped>
 @import 'index';
 </style>
diff --git a/src/components/forms/FbRadioButton/index.scss b/src/components/forms/FbRadioButton/index.scss
@@ -2,7 +2,7 @@
 @use "sass:color";
 @import "../../../assets/components/form/fb-radio-button";
 
-.fb-form-radio-button {
+.fb-theme-form-radio-button {
   &__container {
     display: inline-block;
     position: relative;
@@ -16,7 +16,7 @@
     vertical-align: middle;
     user-select: text;
 
-    .fb-form-radio-button {
+    .fb-theme-form-radio-button {
       &__indicator {
         background-color: $radio-indicator-bg-color;
         border-color: $radio-indicator-border-color;
@@ -34,7 +34,7 @@
     }
 
     &[data-error="true"] {
-      .fb-form-radio-button {
+      .fb-theme-form-radio-button {
         &__indicator {
           border-color: $radio-error-color;
         }
@@ -49,22 +49,22 @@
   &__input {
     display: none;
 
-    &:checked ~ .fb-form-radio-button__indicator {
+    &:checked ~ .fb-theme-form-radio-button__indicator {
       border-color: $radio-indicator-checked-border-color;
       border-width: 0.3rem;
       background-color: $radio-indicator-checked-bg-color;
     }
 
-    &:active ~ .fb-form-radio-button__indicator {
+    &:active ~ .fb-theme-form-radio-button__indicator {
       border-color: $radio-indicator-checked-border-color;
       background-color: color.adjust($radio-indicator-checked-bg-color, $lightness: 25%);
     }
 
-    &:disabled ~ .fb-form-radio-button__indicator {
+    &:disabled ~ .fb-theme-form-radio-button__indicator {
       background-color: $radio-indicator-disabled-bg-color;
     }
 
-    &:disabled:checked ~ .fb-form-radio-button__indicator {
+    &:disabled:checked ~ .fb-theme-form-radio-button__indicator {
       background-color: $radio-indicator-disabled-bg-color;
     }
   }