Initial SASS build

1 files changed, 0 insertions, 514 deletions

diff --git a/src/forms.less b/src/forms.less
deleted file mode 100644
index 7ed91e6..0000000
--- a/src/forms.less
+++ /dev/null
@@ -1,514 +0,0 @@
-// Forms
-.form-group {
-  &:not(:last-child) {
-    margin-bottom: @layout-spacing;
-  }
-}
-
-fieldset {
-  margin-bottom: @layout-spacing-lg;
-}
-
-legend {
-  font-size: @font-size-lg;
-  font-weight: 500;
-  margin-bottom: @layout-spacing-lg;
-}
-
-// Form element: Label
-.form-label {
-  display: block;
-  padding: @control-padding-v + @border-width 0;
-
-  &.label-sm {
-    padding: @control-padding-v-sm + @border-width 0;
-  }
-
-  &.label-lg {
-    padding: @control-padding-v-lg + @border-width 0;
-  }
-}
-
-// Form element: Input
-.form-input {
-  appearance: none;
-  background: @bg-color-light;
-  background-image: none;
-  border: @border-width solid @border-color-dark;
-  border-radius: @border-radius;
-  color: @body-font-color;
-  .control-transition();
-  display: block;
-  font-size: @font-size;
-  height: @control-size;
-  line-height: @line-height;
-  max-width: 100%;
-  outline: none;
-  padding: @control-padding-v @control-padding-h;
-  position: relative;
-  width: 100%;
-  &:focus {
-    border-color: @primary-color;
-    .control-shadow();
-  }
-  &::placeholder {
-    color: @gray-color;
-  }
-
-  // Input sizes
-  &.input-sm {
-    font-size: @font-size-sm;
-    height: @control-size-sm;
-    padding: @control-padding-v-sm @control-padding-h;
-  }
-
-  &.input-lg {
-    font-size: @font-size-lg;
-    height: @control-size-lg;
-    padding: @control-padding-v-lg @control-padding-h;
-  }
-
-  &.input-inline {
-    display: inline-block;
-    vertical-align: middle;
-    width: auto;
-  }
-
-  // Textarea
-  textarea& {
-    height: auto;
-  }
-
-  // Input types
-  &[type="file"] {
-    height: auto;
-  }
-}
-
-// Form element: Input hint
-.form-input-hint {
-  color: @gray-color;
-  font-size: @font-size-sm;
-  margin-top: @unit-1;
-
-  .has-success &,
-  .is-success + & {
-    color: @success-color;
-  }
-
-  .has-error &,
-  .is-error + & {
-    color: @error-color;
-  }
-}
-
-// Form element: Select
-.form-select {
-  appearance: none;
-  border: @border-width solid @border-color-dark;
-  border-radius: @border-radius;
-  color: inherit;
-  font-size: @font-size;
-  height: @control-size;
-  line-height: @line-height;
-  outline: none;
-  padding: @control-padding-v @control-padding-h;
-  vertical-align: middle;
-  width: 100%;
-
-  &[size],
-  &[multiple] {
-    height: auto;
-    
-    option {
-      padding: @unit-h @unit-1;
-    }
-  }
-  &:not([multiple]):not([size]) {
-    background: @bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right (@control-icon-size / 2) center / .4rem .5rem;
-    padding-right: @control-icon-size + @control-padding-h;
-  }
-  &:focus {
-    border-color: @primary-color;
-    .control-shadow();
-  }
-  &::-ms-expand {
-    display: none;
-  }
-
-  // Select sizes
-  &.select-sm {
-    font-size: @font-size-sm;
-    height: @control-size-sm;
-    padding: @control-padding-v-sm (@control-icon-size + @control-padding-h) @control-padding-v-sm @control-padding-h;
-  }
-
-  &.select-lg {
-    font-size: @font-size-lg;
-    height: @control-size-lg;
-    padding: @control-padding-v-lg (@control-icon-size + @control-padding-h) @control-padding-v-lg @control-padding-h;
-  }
-}
-
-// Form Icons
-.has-icon-left,
-.has-icon-right {
-  position: relative;
-
-  .form-icon {
-    height: @control-icon-size;
-    margin: 0 @control-padding-v;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    width: @control-icon-size;
-  }
-}
-
-.has-icon-left {
-  .form-icon {
-    left: @border-width;
-  }
-
-  .form-input {
-    padding-left: @control-icon-size + @control-padding-v * 2;
-  }
-}
-
-.has-icon-right {
-  .form-icon {
-    right: @border-width;
-  }
-
-  .form-input {
-    padding-right: @control-icon-size + @control-padding-v * 2;
-  }
-}
-
-// Form element: Checkbox and Radio
-.form-checkbox,
-.form-radio,
-.form-switch {
-  display: inline-block;
-  line-height: @line-height;
-  padding: (@control-size-sm - @line-height) / 2  (@control-icon-size + @control-padding-h);
-  position: relative;
-
-  input {
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    position: absolute;
-    width: 1px;
-    &:focus + .form-icon {
-      border-color: @primary-color;
-      .control-shadow();
-    }
-    &:checked + .form-icon {
-      background: @primary-color;
-      border-color: @primary-color;
-    }
-  }
-
-  .form-icon {
-    border: @border-width solid @border-color-dark;
-    .control-transition();
-    cursor: pointer;
-    display: inline-block;
-    position: absolute;
-  }
-}
-
-.form-checkbox,
-.form-radio {
-  .form-icon {
-    background: @bg-color-light;
-    height: @control-icon-size;
-    left: 0;
-    top: (@control-size-sm - @control-icon-size) / 2;
-    width: @control-icon-size;
-  }
-
-  input {
-    &:active + .form-icon {
-      background: @bg-color-dark;
-    }
-  }
-}
-.form-checkbox {
-  .form-icon {
-    border-radius: @border-radius;
-  }
-
-  input {
-    &:checked + .form-icon {
-      &::before {
-        background-clip: padding-box;
-        border: @border-width-lg solid @light-color;
-        border-left-width: 0;
-        border-top-width: 0;
-        content: "";
-        height: 10px;
-        left: 50%;
-        margin-left: -3px;
-        margin-top: -6px;
-        position: absolute;
-        top: 50%;
-        transform: rotate(45deg);
-        width: 6px;
-      }
-    }
-    &:indeterminate + .form-icon {
-      background: @primary-color;
-      border-color: @primary-color;
-      &::before {
-        background: @bg-color-light;
-        content: "";
-        height: 2px;
-        left: 50%;
-        margin-left: -5px;
-        margin-top: -1px;
-        position: absolute;
-        top: 50%;
-        width: 10px;
-      }
-    }
-  }
-}
-.form-radio {
-  .form-icon {
-    border-radius: @control-icon-size / 2;
-  }
-
-  input {
-    &:checked + .form-icon {
-      &::before {
-        background: @bg-color-light;
-        border-radius: @border-radius;
-        content: "";
-        height: 4px;
-        left: 50%;
-        margin-left: -2px;
-        margin-top: -2px;
-        position: absolute;
-        top: 50%;
-        width: 4px;
-      }
-    }
-  }
-}
-
-// Form element: Switch
-.form-switch {
-  padding-left: (@unit-8 + @control-padding-h);
-
-  .form-icon {
-    background: @gray-color-light;
-    background-clip: padding-box;
-    border-radius: @unit-2 + @border-width;
-    height: @unit-4 + @border-width * 2;
-    left: 0;
-    top: (@control-size-sm - @unit-4) / 2 - @border-width;
-    width: @unit-8;
-    &::before {
-      background: @bg-color-light;
-      border-radius: @unit-2;
-      content: "";
-      display: block;
-      height: @unit-4;
-      left: 0;
-      position: absolute;
-      top: 0;
-      .control-transition();
-      width: @unit-4;
-    }
-  }
-
-  input {
-    &:checked + .form-icon {
-      &::before {
-        left: 14px;
-      }
-    }
-    &:active + .form-icon {
-      &::before {
-        background: @bg-color;
-      }
-    }
-  }
-}
-
-// Form element: Input groups
-.input-group {
-  display: flex;
-
-  .input-group-addon {
-    background: @bg-color;
-    border: @border-width solid @border-color-dark;
-    border-radius: @border-radius;
-    line-height: @line-height;
-    padding: @control-padding-v @control-padding-h;
-
-    &.addon-sm {
-      font-size: @font-size-sm;
-      padding: @control-padding-v-sm @control-padding-h;
-    }
-    &.addon-lg {
-      font-size: @font-size-lg;
-      padding: @control-padding-v-lg @control-padding-h;
-    }
-  }
-
-  .form-input,
-  .form-select {
-    flex: 1 1 auto;
-  }
-
-  .input-group-btn {
-    z-index: @zindex-0;
-  }
-
-  .form-input,
-  .form-select,
-  .input-group-addon,
-  .input-group-btn {
-    &:first-child:not(:last-child) {
-      border-bottom-right-radius: 0;
-      border-top-right-radius: 0;
-    }
-    &:not(:first-child):not(:last-child) {
-      border-radius: 0;
-      margin-left: -@border-width;
-    }
-    &:last-child:not(:first-child) {
-      border-bottom-left-radius: 0;
-      border-top-left-radius: 0;
-      margin-left: -@border-width;
-    }
-    &:focus {
-      z-index: @zindex-0 + 1;
-    }
-  }
-
-  .form-select {
-    width: auto;
-  }
-
-  &.input-inline {
-    display: inline-flex;
-  }
-}
-
-// Form validation states
-.form-input,
-.form-select {
-  .has-success &,
-  &.is-success {
-    border-color: @success-color;
-    &:focus {
-      .control-shadow(@success-color);
-    }
-  }
-
-  .has-error &,
-  &.is-error {
-    border-color: @error-color;
-    &:focus {
-      .control-shadow(@error-color);
-    }
-  }
-}
-
-.form-checkbox,
-.form-radio,
-.form-switch {
-  .has-error &,
-  &.is-error {
-    .form-icon {
-      border-color: @error-color;
-    }
-    
-    input {
-      &:checked + .form-icon {
-        background: @error-color;
-        border-color: @error-color;
-      }
-
-      &:focus + .form-icon {
-        border-color: @error-color;
-        .control-shadow(@error-color);
-      }
-    }
-  }
-}
-
-// validation based on :placeholder-shown (Edge doesn't support it yet)
-.form-input {
-  &:not(:placeholder-shown) {
-    &:invalid {
-      border-color: @error-color;
-      &:focus {
-        .control-shadow(@error-color);
-      }
-
-      & + .form-input-hint {
-        color: @error-color;
-      }
-    }
-  }
-}
-
-// Form disabled and readonly
-.form-input,
-.form-select {
-  &:disabled,
-  &.disabled {
-    background-color: @bg-color-dark;
-    cursor: not-allowed;
-    opacity: .5;
-  }
-}
-
-.form-input {
-  &[readonly] {
-    background-color: @bg-color;
-  }
-}
-
-input {
-  &:disabled,
-  &.disabled {
-    & + .form-icon {
-      background: @bg-color-dark;
-      cursor: not-allowed;
-      opacity: .5;
-    }
-  }
-}
-
-.form-switch {
-  input {
-    &:disabled,
-    &.disabled {
-      & + .form-icon::before {
-        background: @bg-color-light;
-      }
-    }
-  }
-}
-
-// Form Horizontal
-.form-horizontal {
-  padding: @layout-spacing;
-
-  .form-group {
-    display: flex;
-  }
-
-  .form-checkbox,
-  .form-radio,
-  .form-switch {
-    margin: (@control-size - @control-size-sm) / 2 0;
-  }
-}