fix: Various comment and preview fixes.

src/components/ICheckbox/examples/color-variants.demo.html

@@ -1,7 +1,9 @@
-<div class="_background:white _display:flex _align-items:center _padding:1" style="height: 50px;">
-    <i-checkbox v-model="light" color="light">Light</i-checkbox>
-</div>
+<div>
+    <div class="_background:white _display:flex _align-items:center _padding:1" style="height: 50px;">
+        <i-checkbox v-model="light" color="light">Light</i-checkbox>
+    </div>
 
-<div class="_background:gray-90 _display:flex _align-items:center _padding:1" style="height: 50px;">
-    <i-checkbox v-model="dark" color="dark">Dark</i-checkbox>
+    <div class="_background:gray-90 _display:flex _align-items:center _padding:1" style="height: 50px;">
+        <i-checkbox v-model="dark" color="dark">Dark</i-checkbox>
+    </div>
 </div>

src/components/ICheckbox/examples/group-color-variants.demo.html

@@ -1,17 +1,19 @@
-<div class="_background:white _display:flex _align-items:center _padding:1">
-    <i-checkbox-group v-model="light" color="light">
-        <i-checkbox value="apple">Apple</i-checkbox>
-        <i-checkbox value="banana">Banana</i-checkbox>
-        <i-checkbox value="strawberry">Strawberry</i-checkbox>
-        <i-checkbox value="mango">Mango</i-checkbox>
-    </i-checkbox-group>
-</div>
+<div>
+    <div class="_background:white _display:flex _align-items:center _padding:1">
+        <i-checkbox-group v-model="light" color="light">
+            <i-checkbox value="apple">Apple</i-checkbox>
+            <i-checkbox value="banana">Banana</i-checkbox>
+            <i-checkbox value="strawberry">Strawberry</i-checkbox>
+            <i-checkbox value="mango">Mango</i-checkbox>
+        </i-checkbox-group>
+    </div>
 
-<div class="_background:gray-90 _display:flex _align-items:center _padding:1">
-    <i-checkbox-group v-model="dark" color="dark">
-        <i-checkbox value="apple">Apple</i-checkbox>
-        <i-checkbox value="banana">Banana</i-checkbox>
-        <i-checkbox value="strawberry">Strawberry</i-checkbox>
-        <i-checkbox value="mango">Mango</i-checkbox>
-    </i-checkbox-group>
+    <div class="_background:gray-90 _display:flex _align-items:center _padding:1">
+        <i-checkbox-group v-model="dark" color="dark">
+            <i-checkbox value="apple">Apple</i-checkbox>
+            <i-checkbox value="banana">Banana</i-checkbox>
+            <i-checkbox value="strawberry">Strawberry</i-checkbox>
+            <i-checkbox value="mango">Mango</i-checkbox>
+        </i-checkbox-group>
+    </div>
 </div>

src/components/IInput/css/_colors.scss

@@ -9,103 +9,75 @@
     /// @type variant
     ////
     @include variant('light', 'form') {
-        ////
         ////
         /// The background of the input component, for the light color variant
         /// @name background
         ////
-        ////
         ----background: #{color('white')};
         ////
-        ////
         /// The background of the input component when disabled, for the light color variant
         /// @name background--disabled
         ////
-        ////
         ----background--disabled: #{color('light-25')};
         ////
-        ////
         /// The border color of the input component, for the light color variant
         /// @name border-color
         ////
-        ////
         ----border-color: #{color('light-55')};
         ////
-        ////
         /// The border color of the input component when hovered, for the light color variant
         /// @name border-color--hover
         ////
-        ////
         ----border-color--hover: #{color('light-60')};
         ////
-        ////
         /// The border color of the input component when focused, for the light color variant
         /// @name border-color--focus
         ////
-        ////
         ----border-color--focus: #{color('primary')};
         ////
-        ////
         /// The color of the input component, for the light color variant
         /// @name color
         ////
-        ////
         ----color: #{contrast-color($color-white)};
         ////
-        ////
         /// The color of the input component when disabled, for the light color variant
         /// @name color--disabled
         ////
-        ////
         ----color--disabled: #{color('light-75')};
         ////
-        ////
         /// The background of the input component clear button, for the light color variant
         /// @name clear--background
         ////
-        ////
         ----clear--background: #{transparent};
         ////
-        ////
         /// The background of the input component clear button, for the light color variant
         /// @name clear--background--hover
         ////
-        ////
         ----clear--background--hover: #{color('light-30')};
         ////
-        ////
         /// The background of the input component clear button, for the light color variant
         /// @name clear--background--active
         ////
-        ////
         ----clear--background--active: #{color('light-40')};
         ////
-        ////
         /// The color of the input component clear button, for the light color variant
         /// @name clear--color
         ////
-        ////
         ----clear--color: #{color('light-70')};
         ////
-        ////
         /// The color of the input component placeholder, for the light color variant
         /// @name placeholder--color
         ////
-        ////
         ----placeholder--color: #{color('light-60')};
         ////
-        ////
         /// The color of the input component prefix and suffix, for the light color variant
         /// @name prefix-suffix--color
         ////
-        ////
         ----prefix-suffix--color: #{color('light-70')};
         ////
-        ////
         /// The background of the input component prepend and append, for the light color variant
         /// @name prepend-append--background
         ////
-        ////
         ----prepend-append--background: #{color('light')};
     }
     ////
@@ -114,103 +86,75 @@
     /// @type variant
     ////
     @include variant('dark', 'form') {
-        ////
         ////
         /// The background of the input component, for the dark color variant
         /// @name background
         ////
-        ////
         ----background: #{color('dark')};
         ////
-        ////
         /// The background of the input component when disabled, for the dark color variant
         /// @name background--disabled
         ////
-        ////
         ----background--disabled: #{color('dark-40')};
         ////
-        ////
         /// The border color of the input component, for the dark color variant
         /// @name border-color
         ////
-        ////
         ----border-color: #{color('dark-45')};
         ////
-        ////
         /// The border color of the input component when hovered, for the dark color variant
         /// @name border-color--hover
         ////
-        ////
         ----border-color--hover: #{color('dark-40')};
         ////
-        ////
         /// The border color of the input component when focused, for the dark color variant
         /// @name border-color--focus
         ////
-        ////
         ----border-color--focus: #{color('primary')};
         ////
-        ////
         /// The color of the input component, for the dark color variant
         /// @name color
         ////
-        ////
         ----color: #{contrast-color($color-dark)};
         ////
-        ////
         /// The color of the input component when disabled, for the dark color variant
         /// @name color--disabled
         ////
-        ////
         ----color--disabled: #{color('gray-35')};
         ////
-        ////
         /// The background of the input component clear button, for the dark color variant
         /// @name clear--background
         ////
-        ////
         ----clear--background: #{transparent};
         ////
-        ////
         /// The background of the input component clear button, for the dark color variant
         /// @name clear--background--hover
         ////
-        ////
         ----clear--background--hover: #{color('dark-35')};
         ////
-        ////
         /// The background of the input component clear button, for the dark color variant
         /// @name clear--background--active
         ////
-        ////
         ----clear--background--active: #{color('dark-30')};
         ////
-        ////
         /// The color of the input component clear button, for the dark color variant
         /// @name clear--color
         ////
-        ////
         ----clear--color: #{color('dark-30')};
         ////
-        ////
         /// The color of the input component placeholder, for the dark color variant
         /// @name placeholder--color
         ////
-        ////
         ----placeholder--color: #{color('dark-25')};
         ////
-        ////
         /// The color of the input component prefix and suffix, for the dark color variant
         /// @name prefix-suffix--color
         ////
-        ////
         ----prefix-suffix--color: #{color('dark-25')};
         ////
-        ////
         /// The background of the input component prepend and append, for the dark color variant
         /// @name prepend-append--background
         ////
-        ////
         ----prepend-append--background: #{color('dark')};
     }
 }

src/components/IPagination/script.ts

@@ -69,13 +69,7 @@ export default defineComponent({
          * The maximum number of pagination buttons to show on each breakpoint
          * @type Number | Object
          * @name limit
-         * @default
-         * ```
-         * {
-         *     xs: 3,
-         *     sm: 5
-         * }
-         * ```
+         * @default { xs: 3, sm: 5 }
          */
         limit: {
             type: [Number, Object],

src/components/IProgress/css/_colors.scss

@@ -9,40 +9,30 @@
     /// @type variant
     ////
     @include variant('light') {
-        ////
         ////
         /// The background of the progress component, for the light color variant
         /// @name background
         ////
-        ////
         ----background: #{color('light')};
         ////
-        ////
         /// The border top color of the progress component, for the light color variant
         /// @name border-top-color
         ////
-        ////
         ----border-top-color: #{color('light-55')};
         ////
-        ////
         /// The border right color of the progress component, for the light color variant
         /// @name border-right-color
         ////
-        ////
         ----border-right-color: #{color('light-55')};
         ////
-        ////
         /// The border bottom color of the progress component, for the light color variant
         /// @name border-bottom-color
         ////
-        ////
         ----border-bottom-color: #{color('light-55')};
         ////
-        ////
         /// The border left color of the progress component, for the light color variant
         /// @name border-left-color
         ////
-        ////
         ----border-left-color: #{color('light-55')};
     }
     ////
@@ -51,40 +41,30 @@
     /// @type variant
     ////
     @include variant('dark') {
-        ////
         ////
         /// The background of the progress component, for the dark color variant
         /// @name background
         ////
-        ////
         ----background: #{color('dark')};
         ////
-        ////
         /// The border top color of the progress component, for the dark color variant
         /// @name border-top-color
         ////
-        ////
         ----border-top-color: #{color('dark-45')};
         ////
-        ////
         /// The border right color of the progress component, for the dark color variant
         /// @name border-right-color
         ////
-        ////
         ----border-right-color: #{color('dark-45')};
         ////
-        ////
         /// The border bottom color of the progress component, for the dark color variant
         /// @name border-bottom-color
         ////
-        ////
         ----border-bottom-color: #{color('dark-45')};
         ////
-        ////
         /// The border left color of the progress component, for the dark color variant
         /// @name border-left-color
         ////
-        ////
         ----border-left-color: #{color('dark-45')};
     }
 }

src/components/IRadio/examples/color-variants.demo.html

@@ -1,17 +1,19 @@
-<div class="_background:white _display:flex _align-items:center _padding:1">
-    <i-radio-group v-model="light" color="light">
-        <i-radio value="apple">Apple</i-radio>
-        <i-radio value="banana">Banana</i-radio>
-        <i-radio value="strawberry">Strawberry</i-radio>
-        <i-radio value="mango">Mango</i-radio>
-    </i-radio-group>
-</div>
+<div>
+    <div class="_background:white _display:flex _align-items:center _padding:1">
+        <i-radio-group v-model="light" color="light">
+            <i-radio value="apple">Apple</i-radio>
+            <i-radio value="banana">Banana</i-radio>
+            <i-radio value="strawberry">Strawberry</i-radio>
+            <i-radio value="mango">Mango</i-radio>
+        </i-radio-group>
+    </div>
 
-<div class="_background:gray-90 _display:flex _align-items:center _padding:1">
-    <i-radio-group v-model="dark" color="dark">
-        <i-radio value="apple">Apple</i-radio>
-        <i-radio value="banana">Banana</i-radio>
-        <i-radio value="strawberry">Strawberry</i-radio>
-        <i-radio value="mango">Mango</i-radio>
-    </i-radio-group>
+    <div class="_background:gray-90 _display:flex _align-items:center _padding:1">
+        <i-radio-group v-model="dark" color="dark">
+            <i-radio value="apple">Apple</i-radio>
+            <i-radio value="banana">Banana</i-radio>
+            <i-radio value="strawberry">Strawberry</i-radio>
+            <i-radio value="mango">Mango</i-radio>
+        </i-radio-group>
+    </div>
 </div>