ellipsis-compass 1.0.1

data/stylesheets/ui/_menutab.scss

@@ -0,0 +1,175 @@
+/* ui-menutab */
+
+
+/* private -----------------------------------------------------------------------------------------------------------*/
+
+@mixin _ui-menu-tab($component:css-tab,$button-component:css-button,
+$top:null,
+$left:null,
+$border-radius:null,
+$li-padding:null,
+$span-font-size:null,
+$button-height:null,
+$button-width:null,
+$button-icon-font-size:null,
+$button-icon-top:null,
+$button-icon-left:null,
+$button-border-radius:null,
+$button-top:null,
+$button-right:null,
+$button-icon-up-top:null,
+$z-index:null
+
+){
+
+  list-style: none;
+  position:absolute;
+  left:$left;
+  top:$top;
+
+  border-top:0;
+  z-index:$z-index;
+  cursor:pointer;
+
+  &>li,&>menu-item{
+    padding:$li-padding;
+    float:none !important;
+    @include border-radius($border-radius);
+    @extend %#{$component}-background !optional;
+    @extend %#{$component}-box-shadow !optional;
+    @extend %#{$component}-border !optional;
+    &>span{
+      @extend %#{$component}-font !optional;
+      @include dotted-border-bottom();
+      font-size:$span-font-size;
+    }
+    &>.tab-button{
+      display:inline-block;
+      @include border-radius($button-border-radius);
+      cursor:pointer;
+      @extend %#{$button-component}-background !optional;
+      height:$button-height;
+      width:$button-width;
+      @extend %#{$button-component}-font !optional;
+      @extend %#{$button-component}-box-shadow !optional;
+      position:absolute;
+      top:$button-top;
+      right:$button-right;
+      &:after{
+        font-family:$global-icon-font-family;
+        content:'#{$global-icon-down-arrow}';
+        @extend %#{$button-component}-font;
+        font-size:$button-icon-font-size;
+        position:absolute;
+        top:$button-icon-top;
+        left:$button-icon-left;
+      }
+      &.up{
+        &:after{
+          content:'#{$global-icon-up-arrow}';
+          top:$button-icon-up-top;
+        }
+      }
+    }
+    &.has-dropdown{
+      background:none;
+      position:relative;
+      margin:0;
+      padding:0;
+      &>.ui-dropdown,&>ui-dropdown{
+        z-index:-1 !important;
+        left:-10px;
+        visibility: hidden;
+      }
+    }
+  }
+}
+
+/* public ------------------------------------------------------------------------------------------------------------*/
+
+@mixin ui-menu-tab($class:null,$component:css-tab,$button-component:css-button,
+$top:-1px ,
+$left:10%,
+$border-radius:0 0 2px 2px,
+$li-padding:10px 55px 15px 20px,
+$span-font-size:14px,
+$button-height:20px,
+$button-width:20px,
+$button-icon-font-size:12px,
+$button-icon-top:3px,
+$button-icon-left:4px,
+$button-border-radius:50%,
+$button-top:10px,
+$button-right:15px,
+$button-icon-up-top:2px,
+$z-index:$global-z-index + 900
+
+){
+
+  .ui-menu-tab,ui-menu-tab {
+    @if $class != null{
+      &.#{$class} {
+        @include _ui-menu-tab($component,$button-component,
+        $top,
+        $left,
+        $border-radius,
+        $li-padding,
+        $span-font-size,
+        $button-height,
+        $button-width,
+        $button-icon-font-size,
+        $button-icon-top,
+        $button-icon-left,
+        $button-border-radius,
+        $button-top,
+        $button-right,
+        $button-icon-up-top,
+        $z-index);
+        @content;
+      }
+    } @else {
+      @include _ui-menu-tab($component,$button-component,
+        $top,
+        $left,
+        $border-radius,
+        $li-padding,
+        $span-font-size,
+        $button-height,
+        $button-width,
+        $button-icon-font-size,
+        $button-icon-top,
+        $button-icon-left,
+        $button-border-radius,
+        $button-top,
+        $button-right,
+        $button-icon-up-top,
+        $z-index);
+      @content;
+    }
+
+  }
+
+  @media #{$breakpoint-touch}{
+    .ui-menu-tab,ui-menu-tab{
+      display:none !important;
+    }
+  }
+
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

data/stylesheets/ui/_modal.scss

@@ -0,0 +1,47 @@
+/* ui-modal */
+
+/* Private -----------------------------------------------------------------------------------------------------------*/
+
+@mixin _ui-modal($background: null, $z-index: null, $opacity: null) {
+
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $z-index;
+  background-color: $background;
+  height: 100%;
+  width: 100%;
+  opacity: $opacity;
+  &.light {
+    background-color: $gray;
+    opacity: .5;
+  }
+  &.transparent {
+    background-color: $white;
+    opacity: 0;
+  }
+
+}
+
+/* Public -------------------------------------------------------------------------------------------------------------*/
+
+@mixin ui-modal($class: null,
+$background: #000,
+$z-index: $global-z-index + 99999,
+$opacity: .5) {
+
+  .ui-modal,ui-modal {
+    @if $class != null {
+      &.#{$class} {
+        @include _ui-modal($background, $z-index, $opacity);
+        @content;
+      }
+    } @else {
+      @include _ui-modal($background, $z-index, $opacity);
+      @content;
+    }
+  }
+
+}

data/stylesheets/ui/_navbar.scss

@@ -0,0 +1,315 @@
+/*
+      ui-navbar
+
+*/
+
+/* private -----------------------------------------------------------------------------------------------------------*/
+
+@mixin _ui-navbar($component:null,
+$height:null,
+$margin:null,
+$section-padding:null,
+$brand-font:null,
+$brand-float:null,
+$brand-margin:null,
+$brand-padding:null,
+$stacked-height:null,
+$stacked-brand-font:null,
+$stacked-brand-float:null,
+$stacked-brand-margin:null,
+$stacked-brand-padding:null,
+$stacked-brand-text-align:null,
+$stacked-brand-height:null,
+$stacked-brand-background:null,
+$stacked-section-height:null
+
+){
+
+
+  $_ui-navbar-contained-to-grid: $grid-width - $grid-column-gutter;
+
+  width: 100%;
+  position: relative;
+
+  nav{
+    @extend %#{$component}-background !optional;
+    @extend %#{$component}-border !optional;
+    @extend %#{$component}-box-shadow !optional;
+    width:100%;
+    margin: $margin;
+    height: $height;
+    min-height: 45px;
+    position: relative;
+
+    ul{
+      list-style: none;
+    }
+    &>section{
+      position:relative;
+      padding: $section-padding;
+      margin:0 auto;
+      width:100%;
+      max-width: $_ui-navbar-contained-to-grid;
+    }
+    &>.brand {
+      @extend %#{$component}-font !optional;
+      float: $brand-float;
+      display: block;
+      margin: $brand-margin;
+      padding: $brand-padding;
+      font: $brand-font;
+      .logo{
+        &:hover{
+          cursor:pointer;
+        }
+      }
+      &>section{
+        position:relative;
+        margin:0 auto;
+        width:100%;
+        max-width: $_ui-navbar-contained-to-grid;
+
+      }
+    }
+    //stacked navbar(brand stacked above the menu)
+    &.stacked {
+      height: $stacked-height;
+      &>.touch-brand{
+        display:none;
+      }
+      &>.brand {
+        @extend %#{$component}-font;
+        font: $stacked-brand-font;
+        float: $stacked-brand-float;
+        text-align: $stacked-brand-text-align;
+        margin: $stacked-brand-margin;
+        padding: $stacked-brand-padding;
+        height: $stacked-brand-height;
+        background:$stacked-brand-background;
+        &.center{
+          @include display-flex();
+          @include justify-content(center);
+          @include align-items(center);
+        }
+        &>section{
+          ul{
+            display:block;
+            float:left;
+          }
+        }
+      }
+      &>section{
+        height:$stacked-section-height;
+        padding:0;
+        &.center{
+          @include display-flex();
+          @include justify-content(center);
+          @include align-items(center);
+        }
+      }
+    }
+    //when the screen width matches grid width, we must further subtract gutter width from the max-width and use gutter width as the margin
+    @media only screen and (max-width:$grid-width){
+      &>section{
+        left:0;
+        margin:0;
+        max-width:$grid-width - $grid-column-gutter - $grid-column-gutter;
+        padding: 0 $grid-column-gutter/2 !important;
+      }
+      &>.brand{
+        &>section{
+          padding: 0 $grid-column-gutter/2 !important;
+          max-width:100% !important;
+        }
+      }
+    }
+  }
+}
+
+
+/* public ------------------------------------------------------------------------------------------------------------*/
+
+@mixin ui-navbar($class:null,$component:null,$touch-component:css-touch,
+$height:65px,
+$margin:0 auto,
+$section-padding:0,
+$brand-font:1.5em,
+$brand-float:left,
+$brand-margin:0,
+$brand-padding:0,
+$stacked-height:auto,
+$stacked-brand-font:inherit,
+$stacked-brand-float:none,
+$stacked-brand-margin:0,
+$stacked-brand-padding:0,
+$stacked-brand-text-align:center,
+$stacked-brand-height:75px,
+$stacked-brand-background:inherit,
+$stacked-section-height:45px,
+$touch-position:fixed,
+$touch-height:60px,
+$touch-z-index:$global-z-index + 9999,
+$touch-brand-font:inherit,
+$touch-brand-margin:10px
+
+){
+
+
+
+  .ui-navbar,ui-navbar{
+    @if $class != null{
+      &.#{$class} {
+        @include _ui-navbar($component,
+        $height,
+        $margin,
+        $section-padding,
+        $brand-font,
+        $brand-float,
+        $brand-margin,
+        $brand-padding,
+        $stacked-height,
+        $stacked-brand-font,
+        $stacked-brand-float,
+        $stacked-brand-margin,
+        $stacked-brand-padding,
+        $stacked-brand-text-align,
+        $stacked-brand-height,
+        $stacked-brand-background,
+        $stacked-section-height
+        );
+       @content;
+      }
+    } @else {
+      @include _ui-navbar($component,
+        $height,
+        $margin,
+        $section-padding,
+        $brand-font,
+        $brand-float,
+        $brand-margin,
+        $brand-padding,
+        $stacked-height,
+        $stacked-brand-font,
+        $stacked-brand-float,
+        $stacked-brand-margin,
+        $stacked-brand-padding,
+        $stacked-brand-text-align,
+        $stacked-brand-height,
+        $stacked-brand-background,
+        $stacked-section-height
+      );
+      @content;
+    }
+
+  }
+
+  @media #{$breakpoint-touch}{
+    .ui-navbar,ui-navbar{
+      &>.ui-topbar,&>ui-topbar{
+        display:none !important;
+      }
+      &>nav{
+        &>.brand{
+          display:none;
+        }
+        &>section{
+          display:none;
+        }
+        &.stacked{
+          &>.brand{
+            display:none !important;
+          }
+          &>section{
+            display:none;
+          }
+        }
+      }
+
+      @if $class != null{
+        &.#{$class} {
+          @include _touch-ui-navbar($touch-component,
+            $touch-position,
+            $touch-height,
+            $touch-z-index,
+            $touch-brand-font,
+            $touch-brand-margin
+          );
+        }
+
+      }@else{
+        @include _touch-ui-navbar($touch-component,
+          $touch-position,
+          $touch-height,
+          $touch-z-index,
+          $touch-brand-font,
+          $touch-brand-margin
+        );
+      }
+
+    }
+
+    @if $touch-position != relative{
+      @if $class != null {
+        .ui-navbar.#{$class} + *,ui-navbar.#{$class} + *{
+          padding-top:$touch-height;
+
+
+        }
+      }@else{
+        .ui-navbar + *,ui-navbar + *{
+          padding-top:$touch-height;
+
+        }
+      }
+    }
+  }
+}
+
+@mixin navbar-brand(){
+  &>nav{
+    &.stacked{
+      &>.brand{
+        @content;
+      }
+    }
+  }
+}
+
+@mixin navbar-stacked-brand(){
+    &>nav{
+      &.stacked{
+        &>.brand{
+          @content;
+        }
+      }
+    }
+}
+
+@mixin phone-navbar-brand(){
+  @media #{$breakpoint-phone}{
+    .touch-brand{
+      @content;
+    }
+  }
+}
+@mixin touch-navbar-brand(){
+  @media #{$breakpoint-touch}{
+    .touch-brand{
+      @content;
+    }
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+