ellipsis-compass 1.0.1

data/stylesheets/font/_ubuntu.scss

@@ -0,0 +1,38 @@
+@mixin font-ubuntu(){
+  @font-face {
+    font-family: 'ubuntulight';
+    src: url('fonts/ubuntu-l.eot');
+    src: url('fonts/ubuntu-l.eot?#iefix') format('embedded-opentype'),
+    url('fonts/ubuntu-l.woff') format('woff'),
+    url('fonts/ubuntu-l.ttf') format('truetype'),
+    url('fonts/ubuntu-l.svg#ubuntulight') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+  }
+
+
+  @font-face {
+    font-family: 'ubuntumedium';
+    src: url('fonts/ubuntu-m.eot');
+    src: url('fonts/ubuntu-m.eot?#iefix') format('embedded-opentype'),
+    url('fonts/ubuntu-m.woff') format('woff'),
+    url('fonts/ubuntu-m.ttf') format('truetype'),
+    url('fonts/ubuntu-m.svg#ubuntumedium') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+  }
+
+  @font-face {
+    font-family: 'ubunturegular';
+    src: url('fonts/ubuntu-r.eot');
+    src: url('fonts/ubuntu-r.eot?#iefix') format('embedded-opentype'),
+    url('fonts/ubuntu-r.woff') format('woff'),
+    url('fonts/ubuntu-r.ttf') format('truetype'),
+    url('fonts/ubuntu-r.svg#ubunturegular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+  }
+}

data/stylesheets/form/_form.scss

@@ -0,0 +1,836 @@
+/* Variables ------------------------------------------------------------------------- */
+
+$include-form-input-animation: true !default;
+$form-input-margin: 0 0 1em 0 !default;
+$form-input-padding: 0.6em 0.75em !default;
+
+$form-spacing: 1.5em !default;
+$form-label-font-size: 1em !default;
+$form-label-font-weight: bold !default;
+$form-label-font-color: $global-font-color !default;
+$form-label-bottom-margin: .2em !default;
+$form-input-animation: all 0.25s linear !default;
+
+$form-input-border-radius: 0 !default;
+$form-input-outline: none !default;
+
+$form-fieldset-padding: .5em !default;
+$form-fieldset-margin: 1em 0 !default;
+$form-fieldset-button-margin-top: 3em !default;
+$form-fieldset-border:0 !default;
+
+$form-checkbox-label-padding: 0 0 0 1.5em !default;
+$form-checkbox-size: 1.2em !default;
+$form-checkbox-icon-font-size: 1em !default;
+$form-radio-border-radius: 100px !default;
+$form-radio-icon-font-size: .625em !default;
+
+$form-switch-toggle-size: 2.5em;
+$form-switch-height: 2.5em !default;
+$form-switch-width: 5em !default;
+$form-switch-border-radius: 2.5em !default;
+$form-switch-top-position: .7em !default;
+$form-switch-font-size: .75em !default;
+
+$form-dropdown-padding: .5em 1em .5em 1em !default;
+$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 ----------------------------------------------------------------------------------------------------- */
+
+
+
+//semantic input
+@mixin _semantic-input-text($component) {
+  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 {
+    &.#{$component} {
+      @extend %#{$component}-background !optional;
+      @extend %#{$component}-border !optional;
+      @extend %#{$component}-font !optional;
+      outline: none;
+      font-weight: bold;
+      @extend %#{$component}-placeholder !optional;
+      &:focus{
+        @extend %#{$component}-background-hover !optional;
+        @extend %#{$component}-border-hover !optional;
+        @extend %#{$component}-font !optional;
+        outline: none;
+        font-weight: bold;
+        @extend %#{$component}-placeholder !optional;
+      }
+    }
+  }
+}
+
+@mixin _semantic-form-label($class, $color) {
+  label {
+    &.#{$class} {
+      color: $color;
+    }
+  }
+}
+
+@mixin _semantic-search(){
+  .ui-search,ui-search{
+    &.warning{
+      &:after{
+        color:$component-warning-font-color !important;
+      }
+    }
+    &.success{
+      &:after{
+        color:$component-success-font-color !important;
+      }
+    }
+    &.info{
+      &:after{
+        color:$component-info-font-color !important;
+      }
+    }
+    &.error{
+      &:after{
+        color:$component-error-font-color !important;
+      }
+    }
+  }
+}
+/* Base Form Markup ----------------------------------------------*/
+
+@mixin form-base($input-component: css-input) {
+
+  form {
+    margin: 0 0 ($form-spacing * 1);
+  }
+
+  .row form .row,grid-row form grid-row {
+    margin: 0 (-($form-spacing / 2));
+
+    .column, .columns,grid-columns {
+      padding: 0 ($form-spacing / 2);
+    }
+
+    &.collapse {
+      margin: 0;
+      .column, .columns,grid-columns {
+        padding: 0;
+      }
+    }
+  }
+
+  label {
+    font-size: $form-label-font-size;
+    color: $form-label-font-color;
+    cursor: pointer;
+    display: block;
+    font-weight: $form-label-font-weight;
+    margin-bottom: $form-label-bottom-margin;
+    margin-left: 3px;
+    &.disabled {
+      cursor: normal !important;
+    }
+    &.checkbox {
+      margin-bottom: 1em;
+    }
+    &.radio {
+      margin-bottom: 1em;
+    }
+    &.right {
+      float: none;
+      text-align: right;
+    }
+    &.inline {
+      line-height: (1em + ($form-spacing * 1.5));
+      margin: 0 0 $form-spacing 0;
+    }
+  }
+
+  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 {
+    font-family: inherit;
+    @extend %#{$input-component}-background !optional;
+    @extend %#{$input-component}-border !optional;
+    @extend %#{$input-component}-font !optional;
+    @extend %#{$input-component}-placeholder !optional;
+    @include border-radius($form-input-border-radius);
+    display: block;
+    font-size: 1em;
+    margin: $form-input-margin;
+    padding: $form-input-padding;
+    width: 100%;
+    outline: $form-input-outline;
+    -webkit-appearance: none;
+
+    @if $include-form-input-animation == true
+    {
+      @include transition($form-input-animation);
+    }
+
+    &:focus {
+      @extend %#{$input-component}-background-hover !optional;
+      @extend %#{$input-component}-font !optional;
+      @extend %#{$input-component}-placeholder !optional;
+    }
+    &[disabled] {
+      @extend %#{$input-component}-disabled !optional;
+    }
+
+  }
+
+  @include _semantic-input-text(error);
+  @include _semantic-input-text(info);
+  @include _semantic-input-text(warning);
+  @include _semantic-input-text(success);
+  @include _semantic-search();
+
+
+  textarea {
+    height: auto;
+  }
+
+  select {
+    width: 100%;
+  }
+
+  fieldset {
+    border: $form-fieldset-border;
+    padding: #{$form-fieldset-padding};
+    margin: #{$form-fieldset-margin};
+
+    button {
+      margin-top: $form-fieldset-button-margin-top;
+    }
+  }
+
+}
+
+/* Form Input ---------------------------------------------------------------------------------------------------------*/
+
+@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 {
+    @include display-flex();
+    margin: 0 0 1em 0;
+    position:relative;
+    input {
+      @include flex(1);
+      margin: 0 !important;
+
+      &:not(:first-child) {
+        border-left: 0;
+      }
+      &:not(:last-child) {
+        border-right: 0;
+      }
+    }
+    .ui-button,ui-button {
+      margin: 0;
+      &:not(:active) {
+        box-shadow: none;
+      }
+    }
+    input, .ui-button,ui-button {
+      padding: 0.6em 0.75em;
+      &:first-child {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+      &:last-child {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+    &.large-icon{
+      input,.ui-button,ui-button{
+        padding:0.25em 0.375em;
+      }
+      .ui-button,ui-button{
+        &>span{
+          font-size:2em;
+          padding-left:.5em;
+          padding-right:.5em;
+        }
+      }
+    }
+  }
+
+  input[type="checkbox"] {
+    &.ui-checkbox, &.ui-switch {
+      opacity: 0;
+    }
+  }
+  input[type="checkbox"] {
+    &.ui-checkbox {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      z-index: 99;
+      height: 30px;
+      width: 100%;
+      cursor: pointer;
+    }
+  }
+  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: "";
+      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.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.ui-checkbox {
+    @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 {
+      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: "";
+      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;
+    }
+  }
+
+  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.ui-radio {
+    @extend %#{$check-component}-disabled !optional;
+    background: none !important
+  }
+
+  input[type="radio"]:disabled:checked + label.ui-radio {
+    @extend %#{$check-component}-disabled !optional;
+    background: none !important;
+  }
+
+  //switch
+  input[type="checkbox"].ui-switch + label.ui-switch {
+    display: block;
+    position: relative;
+    width: $form-switch-width;
+    height: $form-switch-height;
+    border-radius: $form-switch-border-radius;
+    @extend %#{$switch-component}-background !optional;
+    @extend %#{$switch-component}-border !optional;
+    @extend %#{$switch-component}-box-shadow !optional;
+    margin: 0;
+    padding: 0;
+    &:before {
+      content: '';
+      border: 0;
+      background: none;
+    }
+    &:after {
+      content: "";
+      width: $form-switch-toggle-size;
+      height: $form-switch-toggle-size;
+      border-radius: 100px;
+      @extend %#{$switch-toggle-component}-background !optional;
+      @extend %#{$switch-toggle-component}-border !optional;
+      position: absolute;
+      top: 0;
+      left: 1%;
+      z-index: 999;
+      @include transition(left 0.1s linear);
+    }
+
+  }
+
+  input[type="checkbox"].ui-switch:disabled + label.ui-switch {
+    @extend %#{$switch-component}-disabled !optional;
+  }
+
+  input[type="checkbox"].ui-switch:checked + label.ui-switch {
+    @extend %#{$switch-component}-background-active !optional;
+    @extend %#{$switch-component}-border-active !optional;
+    &:after {
+      @extend %#{$switch-toggle-component}-border-active !optional;
+      left: 49%;
+      @include transition(left 0.1s linear);
+    }
+
+  }
+
+  input[type="checkbox"].ui-switch:disabled:checked + label.ui-switch {
+    @extend %#{$switch-component}-disabled !optional;
+    &:before {
+      content: '';
+      border: 0;
+      background: none;
+    }
+    &:after {
+      left: 49%;
+    }
+
+  }
+
+  //number
+  label {
+    &.ui-number {
+      display: inline-block;
+      margin-right: 3px;
+      padding: 0;
+      input {
+        border: 0;
+        width: 40px;
+        margin: 0;
+        padding: .2rem .2rem 6px .2rem;
+        color: $form-input-number-font-color;
+        font-size: 1em;
+        display: inline-block;
+        background: transparent;
+        &:focus {
+          background: none !important;
+        }
+      }
+      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;
+          @extend %#{$number-component}-background !optional;
+          @extend %#{$number-component}-border !optional;
+          height: 2em;
+          width: 2em;
+          position: relative;
+          cursor: pointer;
+          &:hover{
+            @extend %#{$number-component}-background-hover !optional;
+            @extend %#{$number-component}-border-hover !optional;
+          }
+          &:focus{
+            @include tab-focus();
+          }
+          &:active {
+            @extend %#{$number-component}-background-active !optional;
+            @extend %#{$number-component}-font-active !optional;
+            @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;
+            }
+          }
+          &.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;
+            }
+          }
+        }
+
+      }
+    }
+  }
+
+}
+
+/* Form Dropdown ----------------------------------------------------------------------------------------------- */
+
+@mixin ui-select($component: default) {
+
+  .ui-select,ui-select {
+    position: relative;
+    @extend %#{$component}-background !optional;
+    min-width: $form-dropdown-width;
+    padding: #{$form-dropdown-padding};
+    @extend %#{$component}-border !optional;
+    @extend %#{$component}-box-shadow !optional;
+    border-radius: $form-dropdown-border-radius;
+    display: inline-block;
+    &.disabled, &.ui-disabled {
+      @extend %#{$component}-disabled !optional;;
+    }
+    line-height:1.5;
+    &.expand, &.ui-expand {
+      width: 100%;
+    }
+    & > select {
+      -webkit-appearance: none;
+      -moz-appearance: window;
+      font-size: 1em;
+      line-height: 1;
+      background: transparent;
+      border: 0;
+      @extend %#{$component}-font !optional;
+      text-shadow: none !important;
+      outline: none;
+      font-weight: $form-dropdown-select-font-weight;
+      option{
+        color:$black;
+      }
+    }
+    ::-ms-expand {
+      display: none;
+    }
+    &:after {
+      $font-size:1em;
+      content: "#{$global-icon-down}";
+      @extend %#{$component}-icon !optional;
+      font-family: $global-icon-font-family;
+      font-size: $font-size;
+      position: absolute;
+      right: .6em;
+      top: .7em;
+      line-height: 1;
+      pointer-events: none;
+    }
+    @content;
+  }
+
+  @-moz-document url-prefix() {
+    .ui-select,ui-select {
+      & > select {
+        text-overflow: '';
+        text-indent: .1rem;
+      }
+    }
+  }
+  @media #{$breakpoint-phone} {
+    .ui-select,ui-select {
+      width: 90%;
+    }
+  }
+}
+
+/* Form Input Icon ----------------------------------------------------------------------------------------------- */
+
+
+/* private */
+@mixin _form-input-icon($component: null,
+$font-size: null,
+$border-radius: null,
+$icon:null,
+$placeholder-color: null,
+$padding-right: null,
+$right: null) {
+
+  position: relative;
+  display:block;
+  input {
+    @extend %#{$component}-background !optional;
+    @extend %#{$component}-border !optional;
+    @extend %#{$component}-font !optional;
+    @extend %#{$component}-placeholder !optional;
+    @include border-radius($border-radius);
+    padding-right: $padding-right;
+
+    &:focus {
+      @extend %#{$component}-background-hover !optional;
+    }
+  }
+  &:after {
+    font-family: $global-icon-font-family;
+    content: '#{$icon}';
+    position: absolute;
+    @extend %#{$component}-icon !optional;
+    font-size: $font-size;
+    right: $right;
+    top: icon-position($form-input-padding, $font-size);
+    line-height: component-line-height($font-size, 1);
+    z-index: 99;
+
+  }
+}
+
+
+
+@mixin _form-search-input($component: null, $touch-component:null,
+$border-radius: null,
+$placeholder-color: null,
+$touch-border-radius: null,
+$touch-placeholder-color: null) {
+
+  $icon:$global-icon-search;
+  display:block;
+  @media #{$breakpoint-desktop}{
+    @if $border-radius == null{
+      $border-radius: $form-input-border-radius;
+    }
+    $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);
+  }
+  @media #{$breakpoint-touch}{
+    @if $touch-border-radius == null{
+      $border-radius: $global-touch-search-radius;
+    }
+    $padding-right: 2em;
+    $right: .5em;
+    $font-size: 1em;
+    font-size:.9em;
+    @include _form-input-icon($touch-component, $font-size, $border-radius,$icon, $touch-placeholder-color, $padding-right, $right);
+  }
+}
+
+
+/* public */
+@mixin ui-search($class: null, $component: null, $touch-component: null,
+$border-radius: null,
+$placeholder-color: $gray,
+$touch-border-radius: null,
+$touch-placeholder-color: $gray) {
+
+  .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);
+        @content;
+      }
+    } @else {
+      @include _form-search-input($component, $touch-component, $border-radius, $placeholder-color, $touch-border-radius, $touch-placeholder-color);
+      @content;
+    }
+  }
+
+}
+
+@mixin ui-input-icon($class: null, $component: null,
+$border-radius: null,
+$icon: null,
+$placeholder-color: $gray) {
+  @if $class !=null {
+    .ui-input-icon,ui-input-icon {
+      &.#{$class} {
+        @if $border-radius == null{
+          $border-radius: $form-input-border-radius;
+        }
+        $padding-right: 3em;
+        $right: .3em;
+        $font-size: 1.5em;
+        @include _form-input-icon($component, $font-size, $border-radius,$icon, $placeholder-color, $padding-right, $right);
+        @content;
+      }
+    }
+  }
+
+}
+@mixin semantic-input-icons(){
+  .ui-input-icon,ui-input-icon{
+    &.error{
+      &:after{
+        color: $component-error-font-color;
+        opacity: 1;
+        text-shadow: none;
+      }
+    }
+    &.success{
+      &:after{
+        color: $component-success-font-color;
+        opacity: 1;
+        text-shadow: none;
+      }
+    }
+    &.info{
+      &:after{
+        color: $component-info-font-color;
+        opacity: 1;
+        text-shadow: none;
+      }
+    }
+    &.warning{
+      &:after{
+        color: $component-warning-font-color;
+        opacity: 1;
+        text-shadow: none;
+      }
+    }
+  }
+}
+
+@mixin form-fieldset($component:null){
+  fieldset {
+    @if $component==null{
+      border: $form-fieldset-border;
+    }@else{
+      @extend %#{$component}-border !optional;
+    }
+    @extend %#{$component}-background !optional;
+    @extend %#{$component}-box-shadow !optional;
+    @extend %#{$component}-font !optional;
+    padding: #{$form-fieldset-padding};
+    margin: #{$form-fieldset-margin};
+    font-size:1em;
+    .ui-button,ui-button {
+      margin-top:1em;
+      margin-bottom:1em;
+    }
+    legend{
+      font-size:1.5em;
+      font-weight:bold;
+      margin-bottom:1em;
+    }
+    .ui-selecy,ui-select{
+      margin-bottom:2em;
+    }
+    input[type="radio"] + label.ui-radio {
+      display:inline-block;
+      margin:0;
+      margin-bottom:2em;
+
+    }
+    input[type="checkbox"] + label.ui-checkbox {
+      display:inline-block;
+      margin-right:2em;
+      margin-bottom:2em;
+
+    }
+    @include phone-content(){
+      label + input[type="radio"]{
+        margin-top:-2em;
+      }
+      input[type="radio"] + label.ui-radio {
+        display:block;
+        margin:0;
+        margin-top:-1em;
+
+        &:last-child{
+          margin-bottom:1.5em;
+        }
+      }
+      input[type="checkbox"] + label.ui-checkbox {
+        display:block;
+        margin:.5em 0 1em 0;
+        &:last-child{
+          margin-bottom:1.5em;
+        }
+      }
+    }
+    @content;
+  }
+}
+
+
+
+
+
+
+