Improve/remove style hacks (epicmaxco#328)

tiant11 · Sep 18, 2018 · 761ec23 · 761ec23
1 parent 35f77ee
commit 761ec23
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 55 deletions.
diff --git a/src/components/forms/form-elements/FormElements.vue b/src/components/forms/form-elements/FormElements.vue
@@ -12,7 +12,7 @@
                     <div class="input-group">
                       <input id="simple-input" required/>
                       <label class="control-label" for="simple-input">{{'forms.inputs.textInput'
-                      | translate}}</label><i class="bar"></i>
+                        | translate}}</label><i class="bar"></i>
                     </div>
                   </div>
                   <div class="form-group with-icon-right"
@@ -473,10 +473,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss">
-  input[type=checkbox]:disabled + label, input[type=radio]:disabled + label,
-  input[type=checkbox]:disabled, input[type=radio]:disabled {
-    cursor: not-allowed;
-  }
-</style>
diff --git a/src/components/forms/form-wizard/FormWizard.vue b/src/components/forms/form-wizard/FormWizard.vue
@@ -485,16 +485,4 @@ export default {
       }
     }
   }
-
-  .form-wizard-page {
-    .form-group {
-      min-width: 200px;
-      max-width: 360px;
-      width: 80%;
-    }
-  }
-
-  .form-wizard-tab-content-text {
-    width: 100%; // IE11 only
-  }
 </style>
diff --git a/src/components/ui/cards/Cards.vue b/src/components/ui/cards/Cards.vue
@@ -219,11 +219,4 @@ export default {
     margin-top: 50px;
     margin-bottom: 50px;
   }
-
-  .cards-label {
-    color: $vue-green;
-    font-size: 14px;
-    font-weight: bold;
-    text-transform: uppercase;
-  }
 </style>
diff --git a/src/components/ui/color-pickers/ColorPickers.vue b/src/components/ui/color-pickers/ColorPickers.vue
@@ -142,9 +142,5 @@ export default {
   &__text-advanced {
     padding-left: 5px;
   }
-
-  &__palette-picker {
-    padding-top: 10px;
-  }
 }
 </style>
diff --git a/src/components/ui/notifications/Notifications.vue b/src/components/ui/notifications/Notifications.vue
@@ -196,11 +196,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
-  .toast-position-picker {
-    margin-right: 2rem;
-  }
-
   .toasted-container.sample-toasted-container {
     position: static;
     transform: translateX(0);

diff --git a/src/components/ui/notifications/ToastPositionPicker.vue b/src/components/ui/notifications/ToastPositionPicker.vue
@@ -58,6 +58,7 @@ export default {
   .toast-position-picker {
     width: 112px;
     height: 76px;
+    margin-right: 2rem;
   }
 
   .position-boxes-row {

diff --git a/src/components/ui/spinners/Spinners.vue b/src/components/ui/spinners/Spinners.vue
@@ -127,18 +127,6 @@ export default {
 <style lang="scss">
 
 .spinners {
-  &__customization {
-
-  }
-
-  &__widget {
-
-  }
-
-  &__color-picker {
-
-  }
-
   @include media-breakpoint-down(xs) {
     &__duration-picker {
       margin-top: 30px;

diff --git a/src/vuestic-theme/vuestic-components/vuestic-checkbox/VuesticCheckbox.vue b/src/vuestic-theme/vuestic-components/vuestic-checkbox/VuesticCheckbox.vue
@@ -83,6 +83,9 @@ export default {
 
 <style lang="scss">
   .vuestic-checkbox {
-
+    input[type=checkbox]:disabled + label, input[type=radio]:disabled + label,
+    input[type=checkbox]:disabled, input[type=radio]:disabled {
+      cursor: not-allowed;
+    }
   }
 </style>
diff --git a/src/vuestic-theme/vuestic-components/vuestic-wizard/VuesticWizard.vue b/src/vuestic-theme/vuestic-components/vuestic-wizard/VuesticWizard.vue
@@ -18,13 +18,12 @@
       <div class="wizard-body-step"
            v-for="(step, index) in steps"
            :key="index"
-           v-show="isStepShown(step)"
-      >
-        <slot :name="step.slot" class="step-content"></slot>
+           v-show="isStepShown(step)">
+        <slot :name="step.slot"></slot>
       </div>
 
       <div class="wizard-body-step" v-show="wizardCompleted">
-        <slot :name="wizardCompletedSlotName" class="step-content"></slot>
+        <slot :name="wizardCompletedSlotName"></slot>
       </div>
 
       <div class="wizard-body-actions" v-if="!wizardCompleted">
@@ -199,6 +198,11 @@ $wizard-body-step-item-margin-bottom: $wizard-body-step-v-padding;
     > *:last-child {
       margin-bottom: 0;
     }
+    .form-group {
+      min-width: 200px;
+      max-width: 360px;
+      width: 80%;
+    }
   }
 }
 
@@ -209,8 +213,30 @@ $wizard-body-step-item-margin-bottom: $wizard-body-step-v-padding;
   flex-wrap: wrap;
   align-items: baseline;
 
-  .btn-container {
-    margin: $wizard-body-step-item-margin-bottom $wizard-body-step-item-margin-bottom/2 0 $wizard-body-step-item-margin-bottom/2;
+  .wizard-body{
+    position: relative;
+  }
+
+  .wizard-body-step {
+    > * {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      > * {
+        margin-bottom: $wizard-body-step-item-margin-bottom;
+      }
+
+      > *:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    width: 100%; // IE11 only
+
+    .btn-container {
+      margin: $wizard-body-step-item-margin-bottom $wizard-body-step-item-margin-bottom/2 0 $wizard-body-step-item-margin-bottom/2;
+    }
   }
 }