ellipsis-compass 1.0.6 → 1.0.7

data/stylesheets/ellipsis/form/_form.scss

@@ -37,16 +37,13 @@ $form-dropdown-border-radius: .6em !default;
 $form-dropdown-width: 18.625em !default;
 $form-dropdown-select-font-weight: normal !default;
 
-//input type=number
-$form-input-number-font-color: $global-font-color !default;
 
 
-/* Mixins ----------------------------------------------------------------------------------------------------- */
-
 
+/* Mixins ----------------------------------------------------------------------------------------------------- */
 
-//semantic input
-@mixin _semantic-input-text($component) {
+//input selector mixin
+@mixin __input(){
   input[type="text"],
   input[type="password"],
   input[type="date"],
@@ -57,7 +54,14 @@ $form-input-number-font-color: $global-font-color !default;
   input[type="tel"],
   input[type="time"],
   input[type="url"],
-  textarea {
+  textarea{
+    @content;
+  }
+}
+
+//semantic input
+@mixin _semantic-input-text($component) {
+  @include __input(){
     &.#{$component} {
       @extend %#{$component}-background !optional;
       @extend %#{$component}-border !optional;
@@ -159,17 +163,7 @@ $form-input-number-font-color: $global-font-color !default;
     }
   }
 
-  input[type="text"],
-  input[type="password"],
-  input[type="date"],
-  input[type="datetime"],
-  input[type="email"],
-  input[type="number"],
-  input[type="search"],
-  input[type="tel"],
-  input[type="time"],
-  input[type="url"],
-  textarea {
+  @include __input(){
     font-family: inherit;
     @extend %#{$input-component}-background !optional;
     @extend %#{$input-component}-border !optional;
@@ -225,21 +219,21 @@ $form-input-number-font-color: $global-font-color !default;
     }
   }
 
+
 }
 
 /* Form Input ---------------------------------------------------------------------------------------------------------*/
+@mixin input-addon($tag:null){
 
-@mixin form-input($check-component: css-checkbox, $switch-component: css-switch, $switch-toggle-component: css-switch-toggle,$number-component:default,
-$button-box-shadow: true,
-$button-margin: 10px,
-$input-padding-right: 6rem,
-$input-padding-left: 6rem,
-$z-index: 2) {
-
-  .ui-input-addon,ui-input-addon {
+  $_tag:ui-input-addon;
+  @if $tag !=null{
+    $_tag:$tag;
+  }
+  .ui-input-addon,#{$_tag} {
     @include display-flex();
     margin: 0 0 1em 0;
     position:relative;
+    width:100%;
     input {
       @include flex(1);
       margin: 0 !important;
@@ -281,14 +275,16 @@ $z-index: 2) {
       }
     }
   }
+}
 
-  input[type="checkbox"] {
-    &.ui-checkbox, &.ui-switch {
-      opacity: 0;
-    }
+@mixin input-checkbox($check-component:null){
+  @if $check-component ==null{
+    $check-component:css-checkbox;
   }
-  input[type="checkbox"] {
-    &.ui-checkbox {
+  ui-checkbox{
+    display:block;
+    position:relative;
+    input[type="checkbox"] {
       position: absolute;
       left: 0;
       bottom: 0;
@@ -296,122 +292,129 @@ $z-index: 2) {
       height: 30px;
       width: 100%;
       cursor: pointer;
+      opacity: 0;
     }
-  }
-  label {
-    &.ui-form {
-      position: relative;
-    }
-  }
-  input[type="checkbox"] + label.ui-checkbox {
-    display: block;
-    position: relative;
-    padding: $form-checkbox-label-padding;
-    vertical-align: text-bottom;
-    padding-bottom: 0;
-    margin-bottom: 1em;
-    line-height:1.2;
-    cursor: pointer;
-    &:before {
-      content: "";
+
+    input[type="checkbox"] + label {
       display: block;
+      position: relative;
+      padding: $form-checkbox-label-padding;
+      vertical-align: text-bottom;
+      padding-bottom: 0;
+      margin-bottom: 1em;
       line-height:1.2;
-      height: $form-checkbox-size;
-      width: $form-checkbox-size;
-      text-align: center;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      font-size: $form-checkbox-icon-font-size;
-      @extend %#{$check-component}-border !optional;
-      @extend %#{$check-component}-background !optional;
-
+      cursor: pointer;
+      &:before {
+        content: "";
+        display: block;
+        line-height:1.2;
+        height: $form-checkbox-size;
+        width: $form-checkbox-size;
+        text-align: center;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        font-size: $form-checkbox-icon-font-size;
+        @extend %#{$check-component}-border !optional;
+        @extend %#{$check-component}-background !optional;
+      }
+      &.inline{
+        display:inline-block;
+      }
     }
+    input[type="checkbox"]:checked + label {
 
-    &.inline{
-      display:inline-block;
+      &:before {
+        content: "#{$global-icon-check}";
+        @extend %#{$check-component}-font !optional;
+        font-family: $global-icon-font-family;
+        font-size: $form-checkbox-icon-font-size;
+      }
     }
 
-  }
-
-  input[type="checkbox"]:checked + label.ui-checkbox {
-
-    &:before {
-      content: "#{$global-icon-check}";
-      @extend %#{$check-component}-font !optional;
-      font-family: $global-icon-font-family;
-      font-size: $form-checkbox-icon-font-size;
+    input[type="checkbox"]:disabled + label {
+      @extend %#{$check-component}-disabled !optional;
+      background: none !important;
     }
-  }
 
-  input[type="checkbox"]:disabled + label.ui-checkbox {
-    @extend %#{$check-component}-disabled !optional;
-    background: none !important;
+    input[type="checkbox"]:disabled:checked + label {
+      @extend %#{$check-component}-disabled !optional;
+      background: none !important;
+    }
   }
 
-  input[type="checkbox"]:disabled:checked + label.ui-checkbox {
-    @extend %#{$check-component}-disabled !optional;
-    background: none !important;
-  }
 
-  input[type="radio"] {
-    &.ui-radio {
+  ui-radio{
+    display:block;
+    position:relative;
+    input[type="radio"] {
       opacity: 0;
     }
-  }
 
-  input[type="radio"] + label.ui-radio {
-    display: block;
-    position: relative;
-    padding: $form-checkbox-label-padding;
-    vertical-align: text-bottom;
-    padding-bottom: 0;
-    margin-bottom: 0em;
-    line-height: 1;
-    &:before {
-      content: "";
+    input[type="radio"] + label {
       display: block;
+      position: relative;
+      padding: $form-checkbox-label-padding;
+      vertical-align: text-bottom;
+      padding-bottom: 0;
+      margin-bottom: 0em;
       line-height: 1;
-      height: $form-checkbox-size;
-      width: $form-checkbox-size;
-      text-align: center;
-      position: absolute;
-      bottom: 0em;
-      left: 0;
-      @extend %#{$check-component}-border !optional;
-      @extend %#{$check-component}-background !optional;
-      @include border-radius($form-radio-border-radius);
+      &:before {
+        content: "";
+        display: block;
+        line-height: 1;
+        height: $form-checkbox-size;
+        width: $form-checkbox-size;
+        text-align: center;
+        position: absolute;
+        bottom: 0em;
+        left: 0;
+        @extend %#{$check-component}-border !optional;
+        @extend %#{$check-component}-background !optional;
+        @include border-radius($form-radio-border-radius);
+      }
+      &.inline{
+        display:inline-block;
+        margin-bottom:1em;
+      }
     }
-    &.inline{
-      display:inline-block;
-      margin-bottom:1em;
+
+    input[type="radio"]:checked + label {
+      &:after {
+        line-height: 1;
+        content: '#{$global-icon-radio}';
+        font-size: $form-radio-icon-font-size;
+        @extend %#{$check-component}-icon !optional;
+        font-family: $global-icon-font-family;
+        bottom:.4em;
+        left:.4em;
+        position: absolute;
+      }
     }
-  }
 
-  input[type="radio"]:checked + label.ui-radio {
-    &:after {
-      line-height: 1;
-      content: '#{$global-icon-radio}';
-      font-size: $form-radio-icon-font-size;
-      @extend %#{$check-component}-icon !optional;
-      font-family: $global-icon-font-family;
-      bottom:.4em;
-      left:.4em;
-      position: absolute;
+    input[type="radio"]:disabled + label {
+      @extend %#{$check-component}-disabled !optional;
+      background: none !important
+    }
+
+    input[type="radio"]:disabled:checked + label {
+      @extend %#{$check-component}-disabled !optional;
+      background: none !important;
     }
   }
 
-  input[type="radio"]:disabled + label.ui-radio {
-    @extend %#{$check-component}-disabled !optional;
-    background: none !important
+}
+
+@mixin input-switch($switch-component:null, $switch-toggle-component: null){
+
+  @if $switch-component ==null{
+    $switch-component:css-switch;
   }
 
-  input[type="radio"]:disabled:checked + label.ui-radio {
-    @extend %#{$check-component}-disabled !optional;
-    background: none !important;
+  @if $switch-toggle-component ==null{
+    $switch-toggle-component:css-switch-toggle;
   }
 
-  //switch
   input[type="checkbox"].ui-switch + label.ui-switch {
     display: block;
     position: relative;
@@ -472,40 +475,82 @@ $z-index: 2) {
 
   }
 
-  //number
+}
+
+@mixin input-number($number-component:null,$input-component:null,
+$input-number-margin:null,
+$input-number-input-padding:null,
+$input-number-input-width:null,
+$input-number-item-margin:null,
+$input-number-item-size:null,
+$input-number-icon-top:null,
+$input-number-icon-left:null
+){
+
+  @if $number-component ==null{
+    $number-component:default;
+  }
+
+  @if $input-component ==null{
+    $input-component:css-input-number;
+  }
+
+  @if $input-number-margin == null{
+    $input-number-margin:0 .5em 0 .5em;
+  }
+
+  @if $input-number-input-padding==null{
+    $input-number-input-padding:.3rem .2rem 6px .2rem;
+  }
+
+  @if $input-number-input-width==null{
+    $input-number-input-padding:2.75em;
+  }
+
+  @if $input-number-item-margin==null{
+    $input-number-item-margin:0 .3em 0 0;
+  }
+
+
+  @if $input-number-item-size == null{
+    $input-number-item-size:2em;
+  }
+
+  @if $input-number-icon-top == null{
+    $input-number-icon-top:.3em;
+  }
+
+  @if $input-number-icon-left == null{
+    $input-number-icon-left:.38em;
+  }
+
   label {
     &.ui-number {
-      display: inline-block;
-      margin-right: 3px;
-      padding: 0;
+      @include flexbox($justification:flex-start,$alignment:flex-end);
       input {
-        border: 0;
-        width: 40px;
-        margin: 0;
-        padding: .2rem .2rem 6px .2rem;
-        color: $form-input-number-font-color;
+        width: $input-number-input-width;
+        margin: $input-number-margin;
+        padding: $input-number-input-padding;
         font-size: 1em;
-        display: inline-block;
-        background: transparent;
-        &:focus {
-          background: none !important;
-        }
+        @extend %#{$input-component}-background !optional;
+        @extend %#{$input-component}-border !optional;
+        @extend %#{$input-component}-font !optional;
+        @extend %#{$input-component}-box-shadow !optional;
+        font-weight:normal;
+
       }
       ul,ui-input-number {
-        display: inline-block;
         list-style: none;
-        padding-bottom: 7px;
-        vertical-align: middle;
-        margin-left: -5px;
-        & > li,&> input-item {
-          float: left;
-          margin-right: .5em;
-          margin-left: 0px;
-          border-radius: 5px;
+        margin:0;
+        font-weight:normal;
+        @include flexbox($justification:flex-start,$alignment:center);
+        & > li,&> input-plus,&>input-minus {
+          margin:$input-number-item-margin;
+          border-radius: $global-radius;
           @extend %#{$number-component}-background !optional;
           @extend %#{$number-component}-border !optional;
-          height: 2em;
-          width: 2em;
+          height: $input-number-item-size;
+          width: $input-number-item-size;
           position: relative;
           cursor: pointer;
           &:hover{
@@ -521,41 +566,84 @@ $z-index: 2) {
             @extend %#{$number-component}-border-active !optional;
             @extend %#{$number-component}-box-shadow-active !optional;
           }
-          &.plus,&[plus] {
-            &:before {
-              font-family: $global-icon-font-family;
-              position: absolute;
-              top: .3em;
-              left: .375em;
-              font-size: 1em;
-              content: '#{$global-icon-plus}';
-              @extend %#{$number-component}-icon !optional;
-            }
+        }
+        &>.input-plus,&>input-plus{
+          &:before {
+            font-family: $global-icon-font-family;
+            position: absolute;
+            top: $input-number-icon-top;
+            left: $input-number-icon-left;
+            font-size: 1em;
+            content: '#{$global-icon-plus}';
+            @extend %#{$number-component}-icon !optional;
           }
-          &.minus,&[minus] {
-            &:before {
-              font-family: $global-icon-font-family;
-              position: absolute;
-              top: .3em;
-              left:.375em;
-              font-size: 1em;
-              content: '#{$global-icon-minus}';
-              @extend %#{$number-component}-icon !optional;
-            }
+        }
+        &>.input-minus,&>input-minus{
+          &:before {
+            font-family: $global-icon-font-family;
+            position: absolute;
+            top: $input-number-icon-top;
+            left:$input-number-icon-left;
+            font-size: 1em;
+            content: '#{$global-icon-minus}';
+            @extend %#{$number-component}-icon !optional;
           }
         }
-
       }
     }
   }
+}
+
+@mixin form-input($check-component: css-checkbox, $switch-component: css-switch, $switch-toggle-component: css-switch-toggle,$number-component:default,$input-component:css-input-number,
+$input-number-margin:0 .5em 0 .5em,
+$input-number-input-padding:.3rem .2rem 6px .2rem,
+$input-number-input-width:2.75em,
+$input-number-item-margin:0 .3em 0 0,
+$input-number-item-size:2em,
+$input-number-icon-top:.3em,
+$input-number-icon-left:.38em
+) {
+
+  @include input-addon();
+
+  @include input-checkbox($check-component:$check-component);
+
+  @include input-switch($switch-component:$switch-component,$switch-toggle-component:$switch-toggle-component);
+
+  @include input-number($number-component:$number-component,$input-component:$input-component,
+   $input-number-margin:$input-number-margin,
+   $input-number-input-padding:$input-number-input-padding,
+   $input-number-input-width:$input-number-input-width,
+   $input-number-item-margin:$input-number-item-margin,
+   $input-number-item-size:$input-number-item-size,
+   $input-number-icon-top:$input-number-icon-top,
+   $input-number-icon-left:$input-number-icon-left
+  );
+
 
 }
 
 /* Form Dropdown ----------------------------------------------------------------------------------------------- */
 
-@mixin ui-select($component: default) {
+@mixin ui-select($primary-tag:null,$tags:null,$template-tag:null,$component-class:null,$class:null,
+$component: default,
+$icon:$global-icon-down,
+$icon-font-size:1em,
+$icon-top:.7em,
+$icon-right:.6em,
+$option-color:$black
+) {
+
+  $_component-class:'.ui-select';
+  $_primary-tag:ui-select;
+  @if $component-custom-tags==true and $component-class ==null{
+    $_component-class:null;
+  }
+  @if $primary-tag !=null{
+    $_primary-tag:$primary-tag;
+  }
 
-  .ui-select,ui-select {
+  @include element-tag($primary-tag:$_primary-tag,$tags:$tags,$template-tag:$template-tag,$component-class:$_component-class,$class:$class){
     position: relative;
     @extend %#{$component}-background !optional;
     min-width: $form-dropdown-width;
@@ -583,37 +671,42 @@ $z-index: 2) {
       outline: none;
       font-weight: $form-dropdown-select-font-weight;
       option{
-        color:$black;
+        color:$option-color;
       }
     }
     ::-ms-expand {
       display: none;
     }
     &:after {
-      $font-size:1em;
-      content: "#{$global-icon-down}";
+      $font-size:$icon-font-size;
+      content: "#{$icon}";
       @extend %#{$component}-icon !optional;
       font-family: $global-icon-font-family;
       font-size: $font-size;
       position: absolute;
-      right: .6em;
-      top: .7em;
+      right: $icon-right;
+      top: $icon-top;
       line-height: 1;
       pointer-events: none;
     }
     @content;
   }
 
+
+
+
+
   @-moz-document url-prefix() {
-    .ui-select,ui-select {
-      & > select {
+    @include element-tag($primary-tag:$_primary-tag,$tags:$tags,$template-tag:$template-tag,$component-class:$_component-class,$class:$class){
+      select {
         text-overflow: '';
         text-indent: .1rem;
       }
     }
   }
+
   @media #{$breakpoint-phone} {
-    .ui-select,ui-select {
+    @include element-tag($primary-tag:$_primary-tag,$tags:$tags,$template-tag:$template-tag,$component-class:$_component-class,$class:$class){
       width: 90%;
     }
   }
@@ -633,12 +726,12 @@ $right: null) {
 
   position: relative;
   display:block;
-  input {
+  @include __input() {
     @extend %#{$component}-background !optional;
     @extend %#{$component}-border !optional;
     @extend %#{$component}-font !optional;
     @extend %#{$component}-placeholder !optional;
-    @include border-radius($border-radius);
+    border-radius:$border-radius !important;
     padding-right: $padding-right;
 
     &:focus {
@@ -655,7 +748,7 @@ $right: null) {
     top: icon-position($form-input-padding, $font-size);
     line-height: component-line-height($font-size, 1);
     z-index: 99;
-
+    pointer-events: none;
   }
 }
 
@@ -663,11 +756,17 @@ $right: null) {
 
 @mixin _form-search-input($component: null, $touch-component:null,
 $border-radius: null,
+$search-icon:null,
 $placeholder-color: null,
+$font-size:null,
 $touch-border-radius: null,
 $touch-placeholder-color: null) {
 
+
   $icon:$global-icon-search;
+  @if $search-icon != null{
+    $icon:$search-icon;
+  }
   display:block;
   @media #{$breakpoint-desktop}{
     @if $border-radius == null{
@@ -675,7 +774,6 @@ $touch-placeholder-color: null) {
     }
     $padding-right: 3em;
     $right: .3em;
-    $font-size: 1.5em;
     width:100%;
     @include _form-input-icon($component, $font-size, $border-radius,$icon, $placeholder-color, $padding-right, $right);
   }
@@ -695,18 +793,20 @@ $touch-placeholder-color: null) {
 /* public */
 @mixin ui-search($class: null, $component: null, $touch-component: null,
 $border-radius: null,
+$search-icon:null,
 $placeholder-color: $gray,
 $touch-border-radius: null,
-$touch-placeholder-color: $gray) {
+$touch-placeholder-color: $gray,
+$font-size:1.5em) {
 
   .ui-search,ui-search {
     @if $class !=null {
       &.#{$class} {
-        @include _form-search-input($component, $touch-component, $border-radius, $placeholder-color, $touch-border-radius, $touch-placeholder-color);
+        @include _form-search-input($component, $touch-component, $border-radius,$search-icon, $placeholder-color,$font-size,$touch-border-radius, $touch-placeholder-color);
         @content;
       }
     } @else {
-      @include _form-search-input($component, $touch-component, $border-radius, $placeholder-color, $touch-border-radius, $touch-placeholder-color);
+      @include _form-search-input($component, $touch-component, $border-radius, $search-icon,$placeholder-color, $font-size,$touch-border-radius, $touch-placeholder-color);
       @content;
     }
   }