admin styling

2018-04-09 15:16:01 -05:00
parent 86d28aafd6
commit 0986cddae1
9 changed files with 1526 additions and 640 deletions
@@ -1,17 +1,237 @@
-@mixin input-size($padding-vertical, $padding-horizontal, $height){
-    padding: $padding-vertical $padding-horizontal;
-    height: $height;
+@mixin input-size($padding-vertical, $padding-horizontal) {
+  padding: $padding-vertical $padding-horizontal;
 }

-@mixin placeholder($color, $opacity){
-   color: $color;
-   @include opacity(1);
+@mixin form-control-placeholder($color, $opacity) {
+  .form-control::-moz-placeholder {
+    color: $color;
+    @include opacity(1);
+  }
+  .form-control:-moz-placeholder {
+    color: $color;
+    @include opacity(1);
+  }
+  .form-control::-webkit-input-placeholder {
+    color: $color;
+    @include opacity(1);
+  }
+  .form-control:-ms-input-placeholder {
+    color: $color;
+    @include opacity(1);
+  }
 }

-@mixin light-form(){
-    border-radius: 0;
-    border:0;
-    padding: 0;
-    background-color: transparent;
+@mixin light-form() {
+  border-radius: 0;
+  border: 0;
+  padding: 0;
+  background-color: transparent;
+}

-}
+@mixin input-sm-padding($padding-vertical, $padding-horizontal) {
+  .form-group.form-group-no-border.input-sm,
+  .input-group.form-group-no-border.input-sm {
+    .input-group-addon {
+      padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
+    }
+
+    .form-control {
+      padding: $padding-vertical $padding-horizontal;
+
+      & + .input-group-addon {
+        padding: $padding-vertical $padding-horizontal $padding-vertical 0;
+      }
+    }
+  }
+
+  .form-group.input-sm,
+  .input-group.input-sm {
+    .form-control {
+      padding: $padding-vertical - 1 $padding-horizontal - 1;
+
+      & + .input-group-addon {
+        padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
+      }
+    }
+
+    .input-group-addon {
+      padding: $padding-vertical - 1 0 $padding-vertical $padding-horizontal - 1;
+
+      & + .form-control {
+        padding: $padding-vertical $padding-horizontal - 1 $padding-vertical $padding-horizontal - 3;
+      }
+    }
+  }
+}
+
+@mixin input-lg-padding($padding-vertical, $padding-horizontal) {
+  .form-group.form-group-no-border.input-lg,
+  .input-group.form-group-no-border.input-lg {
+    .input-group-addon {
+      padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
+    }
+
+    .form-control {
+      padding: $padding-vertical $padding-horizontal;
+
+      & + .input-group-addon {
+        padding: $padding-vertical $padding-horizontal $padding-vertical 0;
+      }
+    }
+  }
+
+  .form-group.input-lg,
+  .input-group.input-lg {
+    .form-control {
+      padding: $padding-vertical - 1 $padding-horizontal - 1;
+
+      & + .input-group-addon {
+        padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
+      }
+    }
+
+    .input-group-addon {
+      padding: $padding-vertical - 1 0 $padding-vertical $padding-horizontal - 1;
+
+      & + .form-control {
+        padding: $padding-vertical $padding-horizontal - 1 $padding-vertical $padding-horizontal - 3;
+      }
+    }
+  }
+}
+
+@mixin input-base-padding($padding-vertical, $padding-horizontal) {
+  .form-group.form-group-no-border,
+  .input-group.form-group-no-border {
+    .form-control {
+      /*margin-top: 2px;*/
+      padding: $padding-vertical $padding-horizontal;
+
+      & + .input-group-addon {
+        padding: $padding-vertical $padding-horizontal $padding-vertical 0;
+      }
+    }
+
+    .input-group-addon {
+      padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
+    }
+  }
+
+  .form-group,
+  .input-group {
+    .form-control {
+      margin-top: 2px;
+      padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 $padding-horizontal - 1;
+
+      & + .input-group-addon {
+        padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
+      }
+    }
+
+    .input-group-addon {
+      padding: $padding-vertical - 1 0 $padding-vertical - 1 $padding-horizontal - 1;
+
+      & + .form-control,
+      & ~ .form-control {
+        padding: $padding-vertical - 1 $padding-horizontal $padding-vertical $padding-horizontal - 3;
+      }
+    }
+  }
+}
+
+//color1 = $opacity-5
+//color2 = $opacity-8
+//color3 = $white-color
+//color4 = $transparent-bg
+//color5 = $opacity-1
+//color6 = $opacity-2
+
+@mixin input-coloured-bg($color1, $color2, $color3, $color4, $color5, $color6) {
+  @include form-control-placeholder(darken($color2, 8%), 1);
+
+  .form-control {
+    border-color: $color1;
+    color: $color2;
+
+    &:focus {
+      border-color: $color3;
+      background-color: $color4;
+      color: $color3;
+    }
+  }
+
+  .has-success,
+  .has-danger {
+    &:after {
+      color: $color3;
+    }
+  }
+
+  .has-danger {
+    .form-control {
+      background-color: $color4;
+    }
+  }
+
+  .input-group-addon {
+    background-color: $color4;
+    border-color: $color1;
+    color: $color2;
+  }
+
+  .input-group-focus {
+    .input-group-addon {
+      background-color: $color4;
+      border-color: $color3;
+      color: $color3;
+    }
+  }
+
+  .form-group.form-group-no-border,
+  .input-group.form-group-no-border {
+    .form-control {
+      background-color: $color5;
+      color: $color2;
+
+      &:focus,
+      &:active,
+      &:active {
+        background-color: $color6;
+        color: $color3;
+      }
+    }
+
+    .form-control + .input-group-addon {
+      background-color: $color5;
+
+      &:focus,
+      &:active,
+      &:active {
+        background-color: $color6;
+        color: $color3;
+      }
+    }
+
+    .form-control {
+      &:focus {
+        & + .input-group-addon {
+          background-color: $color6;
+          color: $color3;
+        }
+      }
+    }
+
+    .input-group-addon {
+      background-color: $color5;
+      border: none;
+      color: $color2;
+    }
+
+    &.input-group-focus {
+      .input-group-addon {
+        background-color: $color6;
+        color: $color3;
+      }
+    }
+  }
+}