refactor: form styles

intershop · Dec 9, 2021 · d01109f · d01109f · github-actions · Dec 9, 2021
1 parent a4a7c7c
commit d01109f
Show file tree

Hide file tree

Showing 6 changed files with 163 additions and 172 deletions.
diff --git a/...ared/components/filter/filter-navigation-sidebar/filter-navigation-sidebar.component.html b/...ared/components/filter/filter-navigation-sidebar/filter-navigation-sidebar.component.html
@@ -1,5 +1,7 @@
 <div *ngIf="filterNavigation" class="filter-panel">
   <div *ngFor="let element of filterNavigation.filter" [ngSwitch]="element.displayType">
+    {{ element.displayType }}
+
     <ish-filter-collapsible [title]="element.name" [(collapsed)]="collapsedElements[element.name]">
       <!-- default: text & text_clear -->
       <ish-filter-text

diff --git a/src/styles/global/forms/forms.scss → src/styles/global/forms.scss b/src/styles/global/forms/forms.scss → src/styles/global/forms.scss
@@ -1,24 +1,63 @@
+fieldset {
+  margin-bottom: ($space-default);
+}
+
+// 	REQUIRED FIELDS
+.indicates-required {
+  color: $text-color-quarternary;
+
+  .required {
+    margin-right: 4px;
+    color: $text-color-special;
+  }
+}
+
+// LABELS
+label {
+  font-weight: normal;
+
+  .required {
+    margin-left: 4px;
+    color: $text-color-special;
+  }
+
+  &.disabled {
+    opacity: 0.5;
+  }
+
+  > * {
+    vertical-align: baseline;
+  }
+}
+
+.label-empty {
+  @media (max-width: $screen-xs-max) {
+    margin-top: 2.2rem;
+  }
+}
+
 .form-check {
   height: auto;
   padding-bottom: 0;
   padding-left: 0;
   margin-bottom: 0.5rem;
-}
 
-.has-feedback {
-  .form-control[type='number'] {
-    padding: $grid-gutter-width * 0.2 divide($grid-gutter-width, 2.5);
+  label {
+    label {
+      padding-left: 0;
+    }
   }
+}
 
-  .form-control[type='number'] + * .form-control-feedback {
-    display: none !important;
-  }
+.form-check-label {
+  margin-left: 18px;
+}
 
-  .form-control {
-    + a.form-control-feedback {
-      pointer-events: all;
-    }
-  }
+// FORM CONTROLS
+.quantity-input {
+  min-width: 80px;
+  max-width: 165px;
+  margin-bottom: $space-default;
 }
 
 input {
@@ -31,15 +70,26 @@ input[type='file'] {
   box-shadow: none;
 }
 
+input[type='radio'] ~ input[type='text'] {
+  margin-left: $space-default * 0.5;
+
+  @media (max-width: $screen-xs-max) {
+    display: inline-block;
+    width: 90%;
+  }
+}
+
+input[type='radio'],
+input[type='checkbox'] {
+  margin-right: 4px;
+  vertical-align: middle;
+}
+
 input.form-check-input {
   margin-top: 0.25rem;
   margin-left: 0;
 }
 
-.form-check-label {
-  margin-left: 18px;
-}
-
 .form-control-checkbox {
   margin-bottom: 0;
   font-size: $font-size-base;
@@ -68,6 +118,46 @@ input.form-check-input {
   }
 }
 
+.form-control:focus {
+  border-color: $color-special-tertiary;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px lighten($color-special-tertiary, 20%);
+}
+
+.input-help {
+  color: $text-color-quarternary;
+}
+
+// ERROR and SUCCESS
+.has-feedback {
+  .form-control[type='number'] {
+    padding: $grid-gutter-width * 0.2 divide($grid-gutter-width, 2.5);
+  }
+
+  .form-control[type='number'] + * .form-control-feedback {
+    display: none !important;
+  }
+
+  .form-control {
+    + a.form-control-feedback {
+      pointer-events: all;
+    }
+
+    padding-right: 42.5px; // TODO: dynamic field
+  }
+}
+
+.has-feedback .form-control-feedback {
+  position: absolute;
+  top: 0;
+  right: 25px; // TODO: dynamic field
+  height: $input-line-height + ($input-padding-y * 2);
+  line-height: $input-line-height + ($input-padding-y * 2);
+}
+
+.has-feedback select + * .form-control-feedback {
+  right: 35px; // TODO: dynamic field
+}
+
 .has-success {
   .ng-fa-icon {
     color: $success-color;
@@ -99,67 +189,13 @@ input.form-check-input {
     }
   }
 
-  .validation-message small {
-    display: block;
-  }
-
   .captcha > div {
     border: solid 1px $error-color;
   }
 }
 
-/* purgecss ignore */
-.grecaptcha-badge {
-  visibility: hidden;
-}
-
-.filter-dropdown {
-  position: relative;
-  padding-bottom: 15px;
-
-  .dropdown-menu {
-    width: 100%;
-    padding: 0;
-
-    a.dropdown-item {
-      color: $input-color;
-
-      &.selected {
-        color: $text-color-corporate;
-        background-color: $color-inverse;
-
-        .icon-checked {
-          position: absolute;
-          right: 15px;
-          padding-top: divide($space-default, 6);
-        }
-      }
-    }
-  }
-
-  .dropdown,
-  .dropup {
-    &.show {
-      color: $input-focus-color;
-      background-color: $input-focus-bg;
-      border-color: $input-focus-border-color;
-      outline: 0;
-    }
-
-    .dropdown-toggle {
-      color: $text-color-primary;
-
-      &:hover {
-        color: $text-color-primary;
-      }
-
-      &::after {
-        position: absolute;
-        top: calc(#{$input-height} / 2);
-        right: $space-default * 0.5;
-      }
-    }
-  }
+.validation-message small {
+  display: block;
 }
 
 .validation-offset {
@@ -174,8 +210,7 @@ input.form-check-input {
   }
 }
 
-.label-empty {
-  @media (max-width: $screen-xs-max) {
-    margin-top: 2.2rem;
-  }
+/* purgecss ignore */
+.grecaptcha-badge {
+  visibility: hidden;
 }
diff --git a/src/styles/global/forms/fields.scss b/src/styles/global/forms/fields.scss
diff --git a/src/styles/global/forms/labels.scss b/src/styles/global/forms/labels.scss
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -40,9 +40,7 @@
 @import 'global/tables';
 @import 'global/toasts';
 @import 'global/swiper';
-@import 'global/forms/labels';
-@import 'global/forms/fields';
-@import 'global/forms/forms';
+@import 'global/forms';
 @import 'global/lists';
 @import 'global/share-tools';
 @import 'global/notifications';