ellipsis-compass 1.0.1

data/stylesheets/ui/_popover.scss

@@ -0,0 +1,3 @@
+/* ui-popover */
+
+// TODO

data/stylesheets/ui/_rating.scss

@@ -0,0 +1,106 @@
+/* ui-rating */
+
+/* Private -----------------------------------------------------------------------------------------------------------*/
+
+@mixin _ui-rating($component:null,$divider:null,$link:null,
+$li-margin: null,
+$font-size: null,
+$divider-height: null,
+$divider-border: null,
+$divider-margin: null,
+$divider-padding: null,
+$star-size: null,
+$star-color-empty: null
+) {
+
+  list-style: none;
+  @include clearfix();
+  margin-left: 0;
+  display:inline-block;
+  & > li,&>rating-item {
+    float: left;
+    margin: $li-margin;
+    font-size: $font-size;
+    a {
+      @if $link != null {
+        @extend %#{$link}-font !optional;
+      }
+      font-size: $font-size;
+      &:hover{
+        @if $link != null {
+          @extend %#{$link}-font-hover !optional;
+        }
+      }
+    }
+    &.divider {
+      width: 2px;
+      height: $divider-height;
+      @extend %#{$divider}-background !optional;
+      @extend %#{$divider}-border !optional;
+      border-right: $divider-border;
+      margin: $divider-margin;
+      padding: $divider-padding;
+    }
+    .star {
+      @extend %#{$component}-icon !optional;
+      font-size: $star-size;
+      &.empty {
+        color: $star-color-empty;
+      }
+      &:last-child {
+        margin-right: 5px;
+      }
+    }
+  }
+
+}
+
+/* Public -----------------------------------------------------------------------------------------------------------*/
+
+@mixin touch-ui-rating($star-color:#ddd) {
+
+  @media #{$breakpoint-touch}{
+    & > li,&>rating-item {
+      .star {
+        color: $star-color;
+
+      }
+    }
+    @content;
+  }
+}
+
+@mixin ui-rating($class: null, $component: css-rating, $divider: css-divider, $link:null,
+$li-margin:0 3px 0 0,
+$font-size: .9em,
+$divider-height: 1em,
+$divider-border:1px solid,
+$divider-margin:0 9px 0 4px,
+$divider-padding:0,
+$star-size:1.1em,
+$star-color-empty:#ddd) {
+  .ui-rating,ui-rating {
+    @if $class != null{
+      &.#{$class} {
+
+        @include _ui-rating($component,$divider,$link,$li-margin,$font-size,$divider-height,
+        $divider-border,$divider-margin,$divider-padding,$star-size,$star-color-empty);
+
+        @content;
+      }
+    } @else {
+
+      @include _ui-rating($component,$divider,$link,$li-margin,$font-size,$divider-height,
+        $divider-border,$divider-margin,$divider-padding,$star-size,$star-color-empty);
+
+      @content;
+    }
+  }
+  .ui-rating.hover,ui-rating.hover{
+    &>li,&>rating-item{
+      &:hover{
+        cursor:pointer;
+      }
+    }
+  }
+}

data/stylesheets/ui/_sidebar.scss

@@ -0,0 +1,110 @@
+/* ui-sidebar */
+
+/* Private -----------------------------------------------------------------------------------------------------------*/
+
+@mixin _ui-sidebar($component:null,
+$padding:null,
+$flex-align:null,
+$min-height:null,
+$border-radius:null,
+$menu-li-line-height:null,
+$menu-header-margin-top:null,
+$menu-dropdown-margin:null
+){
+
+
+
+  $_margin-left:margin-left($padding);
+  $_margin-right:margin-right($padding);
+
+
+  @include display-flex();
+  @include flex-direction(column);
+  @include justify-content($flex-align);
+
+  @extend %#{$component}-background !optional;
+  @if $min-height != null{
+    min-height:$min-height;
+  }
+  list-style: none;
+  padding:$padding;
+  border-radius:$border-radius;
+  h1,h2,h3,h4,h5,h6{
+    padding:0;
+    margin:0;
+    font-size:1em;
+    display:inline;
+  }
+  li,menu-item{
+    float:none !important;
+  }
+  &>.ui-menu,&>ui-menu{
+    width:100% !important;
+    display:block !important;
+    &>li,&>menu-item{
+      float:none !important;
+      padding:0 !important;
+      line-height:$menu-li-line-height;
+      h1,h2,h3,h4,h5,h6{
+        line-height:$menu-li-line-height;
+      }
+
+      a{
+        white-space:nowrap;
+        text-overflow:ellipsis;
+        overflow:hidden;
+        width:100%;
+        display:block;
+      }
+      &:hover,&.active{
+        @extend %#{$component}-background-hover !optional;
+        cursor:pointer;
+        margin-left:-#{$_margin-left};
+        margin-right:-#{$_margin-right};
+        &>*{
+          padding-left:#{$_margin-left};
+        }
+        a{
+          width:91%;
+        }
+      }
+      &.header:not(:first-child){
+        margin-top:$menu-header-margin-top;
+      }
+    }
+    .ui-dropdown,ui-dropdown{
+      margin:$menu-dropdown-margin;
+    }
+  }
+}
+
+/* Public -----------------------------------------------------------------------------------------------------------*/
+
+@mixin ui-sidebar($class:null,$component:null,
+$padding:1.5em,
+$flex-align:flex-start,
+$min-height:null,
+$border-radius:$global-radius,
+$menu-li-line-height:2em,
+$menu-header-margin-top:2em,
+$menu-dropdown-margin:0 0 0 1em
+){
+
+  .ui-sidebar,ui-sidebar{
+    @if $class != null{
+      &.#{$class} {
+
+        @include _ui-sidebar($component,$padding,$flex-align,$min-height,$border-radius,$menu-li-line-height,
+          $menu-header-margin-top,$menu-dropdown-margin);
+
+        @content;
+      }
+    } @else {
+
+      @include _ui-sidebar($component,$padding,$flex-align,$min-height,$border-radius,$menu-li-line-height,
+        $menu-header-margin-top,$menu-dropdown-margin);
+
+      @content;
+    }
+  }
+}

data/stylesheets/ui/_slidingpanel.scss

@@ -0,0 +1,57 @@
+/* ui-sliding-panel */
+
+/* Private -----------------------------------------------------------------------------------------------------------*/
+
+@mixin _ui-sliding-panel($component:null,
+$height:null,
+$width:null,
+$top:null,
+$right:null,
+$border-radius:null,
+$padding:null,
+$z-index:null
+){
+
+  position:fixed;
+  z-index:$z-index;
+  top:$top;
+  right:$right;
+  height:$height;
+  width:$width;
+  border-radius:$border-radius;
+  display:none;
+  padding:$padding;
+  @extend %#{$component}-background !optional;
+  @extend %#{$component}-border !optional;
+  @extend %#{$component}-box-shadow !optional;
+
+  &.show{
+    display:inherit;
+  }
+}
+
+
+/* Public ------------------------------------------------------------------------------------------------------------*/
+
+@mixin ui-sliding-panel($class: null, $component:css-sliding-panel,
+$height:88vh,
+$width:25em,
+$top:50px,
+$right:0,
+$border-radius:$global-radius,
+$padding:0,
+$z-index:1001
+) {
+
+  .ui-sliding-panel,ui-sliding-panel {
+    @if $class != null{
+      &.#{$class} {
+        @include _ui-sliding-panel($component,$height,$width,$top,$right,$border-radius,$padding,$z-index);
+        @content;
+      }
+    } @else {
+      @include _ui-sliding-panel($component,$height,$width,$top,$right,$border-radius,$padding,$z-index);
+      @content;
+    }
+  }
+}

data/stylesheets/ui/_social.scss

@@ -0,0 +1,213 @@
+
+/* ui-social */
+
+
+/* private -----------------------------------------------------------------------------------------------------------*/
+
+@mixin _ui-social($component:null,
+$margin:null,
+$padding:null,
+$font-size:null,
+$li-padding: null,
+$li-margin:null,
+$facebook-color:null,
+$pinterest-color:null,
+$twitter-color:null,
+$flickr-color:null,
+$google-color:null,
+$github-color:null,
+$color-text-shadow:null
+
+) {
+
+      @include flexbox($justification: flex-start, $alignment: center);
+      list-style: none;
+      padding: $padding;
+      margin:$margin;
+      &>li,&>social-icon {
+        padding: $li-padding;
+        margin:$li-margin;
+        min-width:$font-size;
+        min-height:$font-size;
+        position:relative;
+        a {
+          font-size:$font-size;
+          &:before{
+            font-family:$global-icon-font-family;
+            @extend %#{$component}-icon !optional;
+            position:absolute;
+            top:0;
+            left:0;
+          }
+
+          &.facebook{
+            &:before{
+              content:'#{$global-icon-facebook}';
+            }
+          }
+          &.pinterest{
+            &:before{
+              content:'#{$global-icon-pinterest}';
+            }
+          }
+          &.twitter{
+            &:before{
+              content:'#{$global-icon-twitter}';
+            }
+          }
+          &.flickr{
+            &:before{
+              content:'#{$global-icon-flickr}';
+            }
+          }
+          &.google{
+            &:before{
+              content:'#{$global-icon-google}';
+            }
+          }
+          &.github{
+            &:before{
+              content:'#{$global-icon-github}';
+            }
+          }
+        }
+      }
+      &.color{
+        &>li,&>social-icon{
+          a{
+            &:before{
+              font-family:$global-icon-font-family;
+              @extend %#{$component}-icon !optional;
+              position:absolute;
+              top:0;
+              left:0;
+            }
+            &.facebook{
+              &:before{
+                content:'#{$global-icon-facebook-2}';
+                color:$facebook-color;
+              }
+            }
+            &.pinterest{
+              &:before{
+                content:'#{$global-icon-pinterest-2}';
+                color:$pinterest-color;
+              }
+            }
+            &.twitter{
+              &:before{
+                content:'#{$global-icon-twitter-2}';
+                color:$twitter-color;
+              }
+            }
+            &.flickr{
+              &:before{
+                content:'#{$global-icon-flickr-2}';
+                color:$flickr-color;
+              }
+            }
+            &.google{
+              &:before{
+                content:'#{$global-icon-google-2}';
+                color:$google-color;
+              }
+            }
+            &.github{
+              &:before{
+                content:'#{$global-icon-github}';
+                color:$github-color;
+              }
+            }
+            &:before{
+              @if $color-text-shadow != true{
+                text-shadow:none;
+              }
+            }
+          }
+        }
+      }
+
+
+}
+
+/* public ------------------------------------------------------------------------------------------------------------*/
+
+@mixin ui-social($class:null,$component:css-social,
+$margin:0,
+$padding:0,
+$font-size:1.5em,
+$li-padding:0 .7em 0 .7em,
+$li-margin:0 .5em 0 .5em,
+$facebook-color:#3b5998,
+$pinterest-color:#ca3924,
+$twitter-color:#5ec5fb,
+$flickr-color:#f1369d,
+$google-color:#d23e2b,
+$github-color:#020202,
+$color-text-shadow:false
+
+) {
+
+  .ui-social,ui-social {
+    @if $class != null{
+      &.#{$class} {
+        @include _ui-social($component,
+        $margin,
+        $padding,
+        $font-size,
+        $li-padding,
+        $li-margin,
+        $facebook-color,
+        $pinterest-color,
+        $twitter-color,
+        $flickr-color,
+        $google-color,
+        $github-color,
+        $color-text-shadow);
+       @content;
+      }
+    } @else {
+      @include _ui-social($component,
+      $margin,
+      $padding,
+      $font-size,
+      $li-padding,
+      $li-margin,
+      $facebook-color,
+      $pinterest-color,
+      $twitter-color,
+      $flickr-color,
+      $google-color,
+      $github-color,
+      $color-text-shadow);
+      @content;
+    }
+
+  }
+
+
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+