ellipsis-compass 1.0.1

data/stylesheets/component/_component.scss

@@ -0,0 +1,939 @@
+/* variables */
+$include-component-gradient: true !default;
+$include-component-gradient-inset: true !default;
+$include-component-text-shadow: false !default;
+$include-component-box-shadow: true !default;
+$include-component-active-box-shadow: true !default;
+$include-component-animation: false !default;
+$component-animation: all 0.15s ease-in !default;
+$component-hover-darken-factor: 4% !default;
+$component-border-hover-darken-factor: 4% !default;
+$component-border: 1px solid !default;
+$component-text-shadow: 0 1px 0 !default;
+$component-inset-box-shadow: rgba(0, 0, 0, .20) 0px 1px 1px, rgba(255, 255, 255, .40) 0 1px 0 0 inset !default;
+$component-inset-box-shadow-30: rgba(0, 0, 0, .20) 0px 1px 1px, rgba(255, 255, 255, .30) 0 1px 0 0 inset !default;
+$component-inset-box-shadow-40: rgba(0, 0, 0, .20) 0px 1px 1px, rgba(255, 255, 255, .40) 0 1px 0 0 inset !default;
+$component-box-shadow: rgba(0, 0, 0, .20) 0px 1px 1px !default;
+$component-box-shadow-active: inset 0 3px 5px rgba(0, 0, 0, .175) !default;
+$component-background-disabled: #eee !default;
+$component-font-color-disabled: darken(#eee, 5%) !default;
+$component-border-disabled:1px solid transparent !important !default;
+//$component-icon-text-shadow: 0 1px 0 !default;
+
+/* mixins */
+
+/* private -----------------------------------------------------------------------------------------------------------*/
+
+/* mixin helpers for background */
+
+//set a background value if passed value is color or string(e.g: none;transparent)
+//if force bit is set, will otherwise set to gray if passed val not color or string
+@mixin _background-set($color, $force: false) {
+  @if type-of($color) == color or type-of($color) == string {
+    background: $color;
+  } @else {
+    @if $force == true{
+      background: $gray;
+    }
+  }
+}
+
+//set a background gradient from a list
+@mixin _background-gradient($list) {
+  @include mod-background-image(linear-gradient(top, $list));
+}
+
+//process a background request
+@mixin _background($background, $background-alt) {
+  @if type-of($background) == list {
+    @if $include-component-gradient == true{
+      @include _background-set($background-alt, false);
+      @include _background-gradient($background);
+    } @else {
+      @include _background-set($background-alt, true);
+    }
+  } @else {
+    @include _background-set($background, false);
+  }
+}
+
+
+
+//darken a background color
+@mixin _darken-background-color($color, $force: false) {
+  $_darkenFactor: $component-hover-darken-factor;
+
+  @if type-of($color) == color{
+    background: darken($color, $_darkenFactor);
+  } @else {
+    @if $force == true{
+      background: darken($gray, $_darkenFactor);
+    }
+  }
+}
+
+//darken a gradient background
+@mixin _darken-background-gradient($list) {
+  $_darkenFactor: $component-hover-darken-factor;
+
+  $_start: darken(first($list), $_darkenFactor);
+  $_end: darken(last($list), $_darkenFactor);
+  @include mod-background-image(linear-gradient(top, $_start, $_end));
+
+}
+
+//process a background hover darken request
+@mixin _background-hover($background, $background-alt) {
+  $_darkenFactor: $component-hover-darken-factor;
+
+  @if type-of($background) == list {
+    @if $include-component-gradient == true{
+      @include _darken-background-color($background-alt, false);
+      @include _darken-background-gradient($background);
+
+    } @else {
+      @include _darken-background-color($background-alt, true);
+    }
+  } @else {
+    @include _darken-background-color($background, false);
+  }
+}
+
+
+
+/* mixin helpers for border */
+@mixin _border($border) {
+  @if type-of($border) == color{
+    border: $component-border;
+    border-color: $border !important;
+  } @else if type-of($border) == list{
+    @if list-has-number($border) {
+      border: $border !important;
+
+    } @else {
+      border: $component-border;
+      border-color: $border !important;
+
+    }
+  } @else {
+    border: none;
+
+  }
+}
+
+
+/* apply a darken to a border value */
+@mixin _border-hover($border) {
+  $_darkenFactor: $component-border-hover-darken-factor;
+
+  @if type-of($border) == list{
+    @if list-has-number($border) {
+      border: $border !important;
+    } @else {
+      border: $component-border;
+      border-color: darken-rule($border, $_darkenFactor) !important;
+    }
+  } @else if type-of($border) == color{
+    border: $component-border !important;
+    border-color: darken-rule($border, $_darkenFactor) !important;
+  } @else {
+    border: none;
+  }
+
+}
+
+/* mixin helpers for box-shadow */
+
+//box-shadow
+@mixin _box-shadow($box-shadow) {
+
+  @if $include-component-box-shadow == true{
+    @if $box-shadow == null {
+      @include box-shadow($component-box-shadow);
+    } @else if type-of($box-shadow) == list {
+      @include box-shadow($box-shadow);
+    } @else {
+      box-shadow: none;
+    }
+  } @else {
+    @if type-of($box-shadow) ==list{
+      @include box-shadow($box-shadow);
+    }@else{
+      box-shadow: none;
+    }
+  }
+}
+
+//set default box-shadow for active if flag is true
+@mixin _box-shadow-active() {
+  @if $include-component-active-box-shadow ==true{
+    @include box-shadow($component-box-shadow-active);
+  } @else {
+    box-shadow: none;
+  }
+}
+
+/* mixin helpers for font */
+
+//set font for default state
+@mixin _font-set($color: null, $text-shadow: null) {
+
+  @if type-of($color) == color{
+    color: $color;
+    opacity:1;
+  }@else if type-of($color) == number{
+    opacity:$color;
+  }
+  @if type-of($text-shadow) == list {
+    @if $include-component-text-shadow == true{
+      text-shadow: $text-shadow;
+    } @else {
+      text-shadow: none; //explicitly set text-shadow to avoid css-component inheriting another's text-shadow;
+    }
+  } @else {
+    text-shadow: none; //explicitly set text-shadow to avoid unexpected inheritance
+  }
+}
+
+@mixin _font-set-ext($color: null, $text-shadow: null) {
+
+  @if type-of($color) == color{
+    color: $color;
+    opacity:1;
+  }@else if type-of($color) == number{
+    opacity:$color;
+  }
+  @if type-of($text-shadow) == list {
+    @if $include-component-text-shadow == true{
+      text-shadow: $text-shadow;
+    } @else {
+      text-shadow: none;
+    }
+  } @else {
+    @if type-of($text-shadow) == string{
+      text-shadow: $text-shadow;
+    }
+
+  }
+}
+
+//set font for hover and active
+@mixin _font-set-hover($color: null, $text-shadow: null) {
+
+  @if type-of($color) == color{
+    color: $color;
+    opacity:1;
+  }@else if type-of($color) == number{
+    opacity:$color;
+  }
+
+  @if type-of($text-shadow) == list {
+    @if $include-component-text-shadow == true{
+      text-shadow: $text-shadow;
+    }
+  }
+}
+
+//set the placeholder color
+@mixin _placeholder-set($color:null){
+  &::-webkit-input-placeholder {
+    color: $color !important;
+  }
+  &::-moz-placeholder {
+    color: $color !important;
+  }
+  &::-o-placeholder {
+    color: $color !important;
+  }
+  &:-ms-input-placeholder {
+    color: $color !important;
+  }
+}
+
+/* mixin helper for disabled component */
+
+//disabled component
+@mixin _disabled-component($background-disabled, $font-color-disabled,$background) {
+  @if not(type-of($background-disabled) == color or type-of($background-disabled) == list or $background-disabled == none){
+    @if not(type-of($background) ==color or type-of($background) == list){
+      $background-disabled:none;
+    }@else{
+      $background-disabled: $component-background-disabled;
+    }
+  }
+
+  @if type-of($font-color-disabled) != color{
+    $font-color-disabled: $component-font-color-disabled;
+  }
+
+  background: $background-disabled !important;
+  text-shadow: none !important;
+  outline: none !important;
+  box-shadow: none !important;
+  border: $component-border-disabled;
+  cursor: default !important;
+  color: $font-color-disabled !important;
+  &:after {
+    background: none !important;
+    color: $font-color-disabled !important;
+  }
+  &:before {
+    background: none !important;
+    color: $font-color-disabled !important;
+  }
+  @include _placeholder-set($font-color-disabled);
+
+
+}
+
+@function _return-color($background, $background-alt) {
+  @if type-of($background) == color{
+    @return $background;
+  } @else if type-of($background-alt) == color{
+    @return $background-alt;
+  } @else {
+    @return $gray;
+  }
+}
+
+@mixin _core-color-variable-assignment($component, $background, $background-alt) {
+  @if $component == primary{
+    $primary-color: _return-color($background, $background-alt);
+  } @else if $component == secondary {
+    $secondary-color: _return-color($background, $background-alt);
+  } @else if $component == inverse {
+    $inverse-color: _return-color($background, $background-alt);
+  } @else if $component == default {
+    $default-color: _return-color($background, $background-alt);
+  } @else if $component == error {
+    $error-color: _return-color($background, $background-alt);
+  } @else if $component == warning {
+    $warning-color: _return-color($background, $background-alt);
+  } @else if $component == info {
+    $info-color: _return-color($background, $background-alt);
+  } @else if $component == success {
+    $success-color: _return-color($background, $background-alt);
+  }
+}
+
+/* public ------------------------------------------------------------------------------------------------------------*/
+
+/* component mixin */
+@mixin component($component: null,
+$background: null,
+$background-alt: null,
+$background-hover: null,
+$background-hover-alt: null,
+$background-active: null,
+$background-active-alt: null,
+$font-color: $white,
+$font-color-hover: null,
+$font-color-active: null,
+$border: null,
+$border-hover: null,
+$border-active: null,
+$text-shadow: null,
+$text-shadow-hover: null,
+$text-shadow-active: null,
+$box-shadow: null,
+$box-shadow-hover: null,
+$box-shadow-active: null,
+$icon-color: null,
+$icon-text-shadow: null,
+$background-disabled: null,
+$font-color-disabled: null,
+$placeholder-color:null
+) {
+
+  /* assign core components a variable {component}-color that can be used in your sass. unfortunately, no variable interpolation in sass */
+  @if $component == primary or $component == secondary or $component  == inverse or $component == default or $component == error
+  or $component == info or $component == warning or $component == success {
+    @include _core-color-variable-assignment($component, $background, $background-alt);
+  }
+
+  /* background --------------------------------------------------------------------------------------------------*/
+
+  /* background for component default state */
+  %#{$component}-background {
+
+    @include _background($background, $background-alt);
+  }
+
+  /*
+    background for component hover state
+    if no values are passed, we set hover background to a darken factor of default state background
+    if hover values are passed, set hover background accordingly
+ */
+  %#{$component}-background-hover {
+
+    @if $background-hover == null {
+      @include _background-hover($background, $background-alt);
+    } @else {
+      @include _background($background-hover, $background-hover-alt);
+    }
+  }
+
+  /* background for component active state
+  if no values are passed, we extend hover
+  if hover values are passed, set hover background accordingly
+  */
+  %#{$component}-background-active {
+
+    @if $background-active == null {
+      @extend %#{$component}-background-hover !optional;
+    } @else {
+      @include _background($background-active, $background-active-alt);
+    }
+  }
+
+  /* font --------------------------------------------------------------------------------------------------*/
+
+  /* font/text for component default state */
+  %#{$component}-font {
+    @include _font-set($font-color, $text-shadow);
+  }
+
+  /* font/text for component hover state */
+  %#{$component}-font-hover {
+
+    @if $font-color-hover !=null and $text-shadow-hover != null{
+      @include _font-set-hover($font-color-hover, $text-shadow-hover);
+    } @else {
+      @include _font-set($font-color, $text-shadow);
+      //@extend %#{$component}-font !optional;
+      @include _font-set-hover($font-color-hover, $text-shadow-hover);
+    }
+  }
+
+  /* font/text for component active state */
+  %#{$component}-font-active {
+    @if $font-color-active !=null and $text-shadow-active != null{
+      @include _font-set-hover($font-color-active, $text-shadow-active);
+    } @else {
+      @extend %#{$component}-font-hover !optional;
+      @include _font-set-hover($font-color-active, $text-shadow-active);
+    }
+  }
+
+  /* border --------------------------------------------------------------------------------------------------*/
+
+  /* border for component default state */
+  %#{$component}-border {
+    @include _border($border);
+  }
+
+  /* border for component hover state */
+  %#{$component}-border-hover {
+    @if $border-hover != null {
+      @include _border($border-hover);
+    } @else {
+      @include _border-hover($border);
+    }
+
+  }
+
+  /* border for component active state */
+  %#{$component}-border-active {
+    @if $border-active == null {
+      @extend %#{$component}-border-hover !optional;
+    } @else {
+      @include _border($border-active);
+    }
+  }
+
+  /* box shadow --------------------------------------------------------------------------------------------------*/
+
+  /* box-shadow for component default state */
+  %#{$component}-box-shadow {
+    @include _box-shadow($box-shadow);
+  }
+
+  /* box-shadow for component hover state */
+  %#{$component}-box-shadow-hover {
+    @if $box-shadow-hover == null {
+      @extend %#{$component}-box-shadow !optional;
+    } @else {
+      @include _box-shadow($box-shadow-hover);
+    }
+
+  }
+
+  /* box-shadow for component active state */
+  %#{$component}-box-shadow-active {
+    @if $box-shadow-active == null {
+      @include _box-shadow-active();
+    } @else {
+      @include _box-shadow($box-shadow-active);
+    }
+  }
+
+  /* icon --------------------------------------------------------------------------------------------------*/
+  /* component icon */
+  %#{$component}-icon {
+    @if $icon-color == null and $icon-text-shadow == null{
+      @extend %#{$component}-font !optional;
+    } @else {
+      @extend %#{$component}-font !optional;
+      @include _font-set-hover($icon-color, $icon-text-shadow);
+    }
+  }
+
+  /* placeholder --------------------------------------------------------------------------------------------------*/
+  /* component placeholder */
+  %#{$component}-placeholder {
+    $_placeholder-color:$font-color;
+    @if $placeholder-color !=null{
+      $_placeholder-color:$placeholder-color;
+    }
+    @include _placeholder-set($_placeholder-color);
+  }
+
+  /* disabled --------------------------------------------------------------------------------------------------*/
+  /* disabled state */
+  %#{$component}-disabled {
+    @include _disabled-component($background-disabled, $font-color-disabled,$background);
+
+  }
+
+}
+
+/* touch component mixin
+   components rely on extending placeholders.
+   you cannot create components within a media query because of the @extending an outer selector from within @media limitation
+   The requirement of @extending selectors within the same directive thus necessitates a touch-component mixin that creates and extends
+   inside the touch breakpoint media directive
+*/
+@mixin touch-component($component: null,
+$background: null,
+$background-alt: null,
+$background-hover: null,
+$background-hover-alt: null,
+$background-active: null,
+$background-active-alt: null,
+$font-color: $white,
+$font-color-hover: null,
+$font-color-active: null,
+$border: null,
+$border-hover: null,
+$border-active: null,
+$text-shadow: null,
+$text-shadow-hover: null,
+$text-shadow-active: null,
+$box-shadow: null,
+$box-shadow-hover: null,
+$box-shadow-active: null,
+$icon-color: null,
+$icon-text-shadow: null,
+$background-disabled: null,
+$font-color-disabled: null,
+$placeholder-color:null) {
+
+  // calling component but inside the touch breakpoint
+  @media #{$breakpoint-touch}{
+    @include component($component,
+      $background,
+      $background-alt,
+      $background-hover,
+      $background-hover-alt,
+      $background-active,
+      $background-active-alt,
+      $font-color,
+      $font-color-hover,
+      $font-color-active,
+      $border,
+      $border-hover,
+      $border-active,
+      $text-shadow,
+      $text-shadow-hover,
+      $text-shadow-active,
+      $box-shadow,
+      $box-shadow-hover,
+      $box-shadow-active,
+      $icon-color,
+      $icon-text-shadow,
+      $background-disabled,
+      $font-color-disabled,
+      $placeholder-color
+    );
+
+  }
+
+}
+
+@mixin desktop-component($component: null,
+$background: null,
+$background-alt: null,
+$background-hover: null,
+$background-hover-alt: null,
+$background-active: null,
+$background-active-alt: null,
+$font-color: $white,
+$font-color-hover: null,
+$font-color-active: null,
+$border: null,
+$border-hover: null,
+$border-active: null,
+$text-shadow: null,
+$text-shadow-hover: null,
+$text-shadow-active: null,
+$box-shadow: null,
+$box-shadow-hover: null,
+$box-shadow-active: null,
+$icon-color: null,
+$icon-text-shadow: null,
+$background-disabled: null,
+$font-color-disabled: null,
+$placeholder-color:null) {
+
+  // calling component but inside the desktop breakpoint
+  @media #{$breakpoint-desktop}{
+    @include component($component,
+      $background,
+      $background-alt,
+      $background-hover,
+      $background-hover-alt,
+      $background-active,
+      $background-active-alt,
+      $font-color,
+      $font-color-hover,
+      $font-color-active,
+      $border,
+      $border-hover,
+      $border-active,
+      $text-shadow,
+      $text-shadow-hover,
+      $text-shadow-active,
+      $box-shadow,
+      $box-shadow-hover,
+      $box-shadow-active,
+      $icon-color,
+      $icon-text-shadow,
+      $background-disabled,
+      $font-color-disabled,
+      $placeholder-color
+    );
+  }
+
+}
+
+/*
+  extend component mixin
+  create a new component that inherits from existing component
+  $extend-component=existing component, $component=new component
+*/
+@mixin extend-component($extend-component:null, $component:null,
+$background:null,
+$background-alt:null,
+$background-hover:null,
+$background-hover-alt:null,
+$background-active:null,
+$background-active-alt:null,
+$font-color:null,
+$font-color-hover:null,
+$font-color-active:null,
+$border:null,
+$border-hover:null,
+$border-active:null,
+$text-shadow:null,
+$text-shadow-hover:null,
+$text-shadow-active:null,
+$box-shadow:null,
+$box-shadow-hover:null,
+$box-shadow-active:null,
+$icon-color:null,
+$icon-text-shadow:null,
+$background-disabled:null,
+$font-color-disabled:null,
+$placeholder-color:null
+) {
+
+  //background
+  %#{$component}-background {
+
+    @if $background != null {
+      @include _background($background,$background-alt);
+    } @else {
+      @extend %#{$extend-component}-background !optional;
+    }
+  }
+  %#{$component}-background-hover {
+    @if $background-hover == null{
+      @if $background != null{
+        @include _background-hover($background,$background-alt);
+      }@else{
+        @extend %#{$extend-component}-background-hover !optional;
+      }
+    }@else{
+      @include _background($background-hover,$background-hover-alt);
+    }
+
+  }
+  %#{$component}-background-active {
+    @if $background-active != null {
+      @include _background($background-active,$background-active-alt);
+    } @else {
+      @extend %#{$extend-component}-background-active !optional;
+    }
+
+  }
+
+  //font
+  %#{$component}-font {
+    @if type-of($font-color)== color and type-of($text-shadow)==list{
+      @include _font-set($font-color, $text-shadow);
+    } @else {
+      @extend %#{$extend-component}-font !optional;
+      @include _font-set-ext($font-color, $text-shadow);
+    }
+
+  }
+  %#{$component}-font-hover {
+    @if type-of($font-color-hover)== color and type-of($text-shadow-hover)==list{
+      @include _font-set-hover($font-color-hover, $text-shadow-hover);
+    } @else {
+      @extend %#{$extend-component}-font-hover !optional;
+      @include _font-set-hover($font-color-hover, $text-shadow-hover);
+    }
+
+  }
+  %#{$component}-font-active {
+    @if type-of($font-color-active)== color and type-of($text-shadow-active)==list{
+      @include _font-set-hover($font-color-active, $text-shadow-active);
+    } @else {
+      @extend %#{$extend-component}-font-active !optional;
+      @include _font-set-hover($font-color-active, $text-shadow-active);
+    }
+  }
+
+  //border
+
+  %#{$component}-border {
+    @if $border != null{
+      @include _border($border);
+    } @else {
+      @extend %#{$extend-component}-border !optional;
+
+    }
+
+  }
+  %#{$component}-border-hover {
+    @if $border-hover != null{
+      @include _border($border-hover);
+    } @else {
+      @if type-of($border)== color or type-of($border) == list{
+        @include _border-hover($border);
+      } @else {
+        @extend %#{$extend-component}-border-hover !optional;
+      }
+    }
+  }
+
+  %#{$component}-border-active {
+    @if $border-active != null{
+      @include _border($border-active);
+    } @else {
+      @extend %#{$extend-component}-border-active !optional;
+    }
+  }
+
+
+  //box-shadow
+  %#{$component}-box-shadow {
+    @if $box-shadow != null{
+      @include _box-shadow($box-shadow);
+    }@else{
+      @extend %#{$extend-component}-box-shadow !optional;
+    }
+
+  }
+
+  %#{$component}-box-shadow-hover {
+    @if $box-shadow-hover != null{
+      @include _box-shadow($box-shadow-hover);
+    }@else{
+
+      @extend %#{$extend-component}-box-shadow-hover !optional;
+    }
+
+  }
+
+  %#{$component}-box-shadow-active {
+    @if $box-shadow-active != null{
+      @include _box-shadow($box-shadow-active);
+    }@else{
+      @extend %#{$extend-component}-box-shadow-active !optional;
+    }
+  }
+
+  //icon
+  %#{$component}-icon {
+    @extend %#{$extend-component}-icon !optional;
+    @if $icon-color != null or $icon-text-shadow != null {
+      @include _font-set-ext($icon-color, $icon-text-shadow);
+    }
+  }
+
+  //placeholder
+  %#{$component}-placeholder {
+    @extend %#{$extend-component}-placeholder !optional;
+    @if $placeholder-color != null {
+      @include _placeholder-set($placeholder-color);
+    }
+
+  }
+
+  //disabled
+  %#{$component}-disabled {
+
+    @extend %#{$extend-component}-disabled !optional;
+  }
+}
+
+/* extend touch component mixin */
+@mixin extend-touch-component($extend-component:null, $component:null,
+$background:null,
+$background-alt:null,
+$background-hover:null,
+$background-hover-alt:null,
+$background-active:null,
+$background-active-alt:null,
+$font-color:null,
+$font-color-hover:null,
+$font-color-active:null,
+$border:null,
+$border-hover:null,
+$border-active:null,
+$text-shadow:null,
+$text-shadow-hover:null,
+$text-shadow-active:null,
+$box-shadow:null,
+$box-shadow-hover:null,
+$box-shadow-active:null,
+$icon-color:null,
+$icon-text-shadow:null,
+$background-disabled:null,
+$font-color-disabled:null,
+$placeholder-color:null
+) {
+  @media #{$breakpoint-touch}{
+    @include extend-component($extend-component, $component,
+      $background,
+      $background-alt,
+      $background-hover,
+      $background-hover-alt,
+      $background-active,
+      $background-active-alt,
+      $font-color,
+      $font-color-hover,
+      $font-color-active,
+      $border,
+      $border-hover,
+      $border-active,
+      $text-shadow,
+      $text-shadow-hover,
+      $text-shadow-active,
+      $box-shadow,
+      $box-shadow-hover,
+      $box-shadow-active,
+      $icon-color,
+      $icon-text-shadow,
+      $background-disabled,
+      $font-color-disabled,
+      $placeholder-color
+    );
+  }
+}
+
+/* extend desktop component mixin */
+@mixin extend-desktop-component($extend-component:null, $component:null,
+$background:null,
+$background-alt:null,
+$background-hover:null,
+$background-hover-alt:null,
+$background-active:null,
+$background-active-alt:null,
+$font-color:null,
+$font-color-hover:null,
+$font-color-active:null,
+$border:null,
+$border-hover:null,
+$border-active:null,
+$text-shadow:null,
+$text-shadow-hover:null,
+$text-shadow-active:null,
+$box-shadow:null,
+$box-shadow-hover:null,
+$box-shadow-active:null,
+$icon-color:null,
+$icon-text-shadow:null,
+$background-disabled:null,
+$font-color-disabled:null,
+$placeholder-color:null
+) {
+  @media #{$breakpoint-desktop}{
+    @include extend-component($extend-component, $component,
+      $background,
+      $background-alt,
+      $background-hover,
+      $background-hover-alt,
+      $background-active,
+      $background-active-alt,
+      $font-color,
+      $font-color-hover,
+      $font-color-active,
+      $border,
+      $border-hover,
+      $border-active,
+      $text-shadow,
+      $text-shadow-hover,
+      $text-shadow-active,
+      $box-shadow,
+      $box-shadow-hover,
+      $box-shadow-active,
+      $icon-color,
+      $icon-text-shadow,
+      $background-disabled,
+      $font-color-disabled,
+      $placeholder-color
+    );
+  }
+}
+
+/**********************************************************************************************************************
+      we call the below mixins from ui-components(or widgets) to bind a component reference to the widget css
+*/
+
+/* invoke component mixin  */
+@mixin invoke-component($component) {
+  @extend %#{$component}-background !optional;
+  @extend %#{$component}-border !optional;
+  @extend %#{$component}-box-shadow !optional;
+  @extend %#{$component}-font !optional;
+  &:hover, &:focus {
+    @extend %#{$component}-background-hover !optional;
+    @extend %#{$component}-border-hover !optional;
+    @extend %#{$component}-box-shadow-hover !optional;
+    @extend %#{$component}-font-hover !optional;
+  }
+  &:active, &.active {
+    @extend %#{$component}-background-active !optional;
+    @extend %#{$component}-border-active !optional;
+    @extend %#{$component}-box-shadow-active !optional;
+    @extend %#{$component}-font-active !optional;
+  }
+  &.disabled, &[disabled] {
+    @extend %#{$component}-disabled !optional;
+  }
+}
+
+/* invoke component default state mixin  */
+@mixin invoke-component-default-state($component) {
+  @extend %#{$component}-background !optional;
+  @extend %#{$component}-border !optional;
+  @extend %#{$component}-box-shadow !optional;
+  @extend %#{$component}-font !optional;
+
+  &.disabled, &[disabled] {
+    @extend %#{$component}-disabled !optional;
+  }
+}