ellipsis-compass 1.0.1

data/stylesheets/ui/_loading.scss

@@ -0,0 +1,70 @@
+/* ui-loading  */
+
+
+@mixin ui-loading($background:$primary-color,
+$border-color:$white,
+$inner-border-color:darken($primary-color,10%),
+$duration:3s,
+$inner-duration:1s
+){
+  .ui-loading,ui-loading{
+    display:block;
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 18.75em;
+    height: 18.75em;
+    background: $background;
+    z-index:$global-z-index + 999999;
+    -webkit-transition: -webkit-transform 0.3s;
+    transition: transform 0.3s;
+    -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
+    transform: translateX(100%) translateY(-100%) rotate(45deg);
+    pointer-events: none;
+    &.animate{
+      -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);
+      transform: translateX(50%) translateY(-50%) rotate(45deg);
+    }
+    &:before,&:after{
+      position: absolute;
+      bottom: 2em;
+      left: 50%;
+      display: block;
+      border: 5px solid $border-color;
+      border-radius: 50%;
+      content: '';
+    }
+    &:before{
+      margin-left: -2.5em;
+      width: 5em;
+      height: 5em;
+      border-right-color: $inner-border-color;
+      border-left-color: $inner-border-color;
+      -webkit-animation: loading-rotation $duration linear infinite;
+      animation: loading-rotation $duration linear infinite;
+    }
+    &:after{
+      bottom: 3.125em;
+      margin-left: -1.25em;
+      width: 2.5em;
+      height: 2.5em;
+      border-top-color: $inner-border-color;
+      border-bottom-color: $inner-border-color;
+      -webkit-animation: loading-rotation $inner-duration linear infinite;
+      animation: loading-rotation $inner-duration linear infinite;
+    }
+
+  }
+}
+
+@-webkit-keyframes loading-rotation {
+  0% 		{ -webkit-transform: rotate(0deg); }
+  50% 	{ -webkit-transform: rotate(180deg); }
+  100% 	{ -webkit-transform: rotate(360deg); }
+}
+
+@keyframes loading-rotation {
+  0% 		{ transform: rotate(0deg); }
+  50% 	{ transform: rotate(180deg); }
+  100% 	{ transform: rotate(360deg); }
+}

data/stylesheets/ui/_mediaobject.scss

@@ -0,0 +1,108 @@
+/* ui-mediaobject */
+
+
+/* private -----------------------------------------------------------------------------------------------------------*/
+@mixin _ui-media-object(
+$background:null,
+$padding:null,
+$border-radius:null,
+$media-margin:null,
+$image-border:null,
+$header-margin:null,
+$image-max-width:null,
+$image-max-height:null
+){
+
+  @include display-flex();
+  @include align-items(flex-start);
+  padding:$padding;
+  background:$background;
+  border-radius: $border-radius;
+  margin:0 0 1em 0;
+
+  @include phone-content(){
+    border-radius:0;
+    padding-left:1px;
+    background:$white;
+  }
+  &>figure{
+    margin-right: $media-margin;
+    &>div{
+      border:$image-border;
+      max-width:$image-max-width;
+      max-height:$image-max-height;
+      overflow:hidden;
+      @include phone-content(){
+        width:80px;
+        max-height:100px;
+      }
+      &>img{
+        width:100%;
+        height:auto;
+      }
+    }
+  }
+
+  &>img{
+    margin-right: $media-margin;
+    border:$image-border;
+    @include phone-content(){
+      width:80px;
+      height:auto;
+    }
+  }
+  &>section {
+    @include flex(1);
+    h2,h3,h4,h5,h6{
+      &:first-child{
+        margin:$header-margin;
+      }
+    }
+    @include phone-content(){
+
+    }
+  }
+
+  &.reverse{
+    &>figure,&>img{
+      @include order(1);
+      margin:0 0 0 $media-margin;
+    }
+  }
+
+}
+
+
+
+
+
+
+/* public -----------------------------------------------------------------------------------------------------------*/
+
+@mixin ui-media-object($class:null,
+$background:#eee,
+$padding:1em,
+$border-radius:$global-radius,
+$media-margin:1em,
+$image-border:0,
+$header-margin:0 0 1em 0,
+$image-max-width:200px,
+$image-max-height:200px
+){
+
+  .ui-media-object,ui-media-object {
+    @if $class != null{
+      &.#{$class} {
+        @include _ui-media-object($background,$padding,$border-radius,$media-margin,$image-border,
+          $header-margin,$image-max-width,$image-max-height);
+        @content;
+      }
+    } @else {
+      @include _ui-media-object($background,$padding,$border-radius,$media-margin,$image-border,
+        $header-margin,$image-max-width,$image-max-height);
+      @content;
+    }
+
+  }
+
+}

data/stylesheets/ui/_menu.scss

@@ -0,0 +1,287 @@
+/* ui-menu */
+
+
+/* private -----------------------------------------------------------------------------------------------------------*/
+@mixin _ui-menu($component:null,$divider:null,
+$margin:null,
+$padding:null,
+$width:null,
+$height:null,
+$li-margin:null,
+$li-padding:null,
+$li-divider-border:null,
+$li-divider-padding:null,
+$li-divider-margin:null,
+$li-divider-height:null,
+$li-label-font-size:null,
+$li-label-padding:null,
+$li-search-padding:null,
+$z-index:null,
+$top:null,
+$left:null,
+$li-stacked-padding:null
+
+){
+
+  @include flexbox($alignment:center,$justification:flex-start);
+  list-style: none;
+  margin: $margin;
+  padding:$padding;
+  width:$width;
+  height:$height;
+  @extend %#{$component}-background !optional;
+
+
+  &.stacked{
+    @include flexbox-column();
+    &>li{
+      height:auto;
+      padding:$li-stacked-padding;
+    }
+  }
+  &>li,&>menu-item{
+    @include flexbox($alignment:center,$justification:flex-start);
+    margin:$li-margin;
+    //padding:$li-padding;
+    height:100%;
+    position:relative;
+    &:hover,&:focus{
+      cursor:pointer;
+      @extend %#{$component}-background-hover !optional;
+      &>a{
+        @extend %#{$component}-font-hover !optional;
+      }
+    }
+    &.label{
+      @extend %#{$component}-font-active !optional;
+      font-size:$li-label-font-size;
+      padding:$li-label-padding;
+    }
+    &.divider{
+      width:0;
+      height:$li-divider-height;
+      border:0;
+      border-right: $li-divider-border;
+      padding: $li-divider-padding;
+      margin:$li-divider-margin;
+      @if $divider != null{
+        @extend %#{$divider}-border !optional;
+      }
+    }
+    &>a{
+      @extend %#{$component}-font !optional;
+      font-size:1em;
+      padding:$li-padding;
+    }
+    &.active{
+      @extend %#{$component}-background-active !optional;
+      &>a{
+        @extend %#{$component}-font-active !optional;
+      }
+      &:hover{
+        @extend %#{$component}-background-active !optional;
+        &>a{
+          @extend %#{$component}-font-active !optional;
+        }
+      }
+    }
+    &.has-dropdown{
+      position:relative;
+      &>.ui-dropdown,ui-dropdown{
+        display:none;
+      }
+      &:hover,&:focus{
+        &>.ui-dropdown,ui-dropdown{
+          display:block !important;
+        }
+      }
+    }
+    &.has-search {
+      padding:$li-search-padding;
+      margin-left:auto;
+    }
+  }
+  &>menu-divider{
+    width:0;
+    height:$li-divider-height;
+    border:0;
+    border-right: $li-divider-border;
+    padding: $li-divider-padding;
+    margin:$li-divider-margin;
+    @if $divider != null{
+      @extend %#{$divider}-border !optional;
+    }
+  }
+  &>menu-item-dropdown{
+    @include flexbox($alignment:center,$justification:flex-start);
+    position:relative;
+    margin:$li-margin;
+    padding:$li-padding;
+    height:100%;
+    &>.ui-dropdown,ui-dropdown,ui-mega-dropdown{
+      display:none;
+    }
+    &>a{
+      @extend %#{$component}-font !optional;
+      font-size:1em;
+    }
+    &:hover,&:focus{
+      cursor:pointer;
+      @extend %#{$component}-background-hover !optional;
+      &>a{
+        @extend %#{$component}-font-hover !optional;
+      }
+    }
+  }
+  &>menu-item-search{
+    padding:$li-search-padding;
+    margin-left:auto;
+  }
+  &.flex-start,&.left{
+    margin-right:auto;
+
+  }
+  &.flex-end,&.right{
+    margin-left:auto;
+  }
+}
+
+
+/* public ------------------------------------------------------------------------------------------------------------*/
+
+@mixin ui-menu($class:null,$component:null,$divider:null,
+$margin:0,
+$padding:0,
+$width:auto,
+$height:inherit,
+$li-margin:0,
+$li-padding:1em,
+$li-divider-border:1px solid,
+$li-divider-padding:0,
+$li-divider-margin:0,
+$li-divider-height:100%,
+$li-label-font-size:1em,
+$li-label-padding:$li-padding,
+$li-search-padding:$li-padding,
+$z-index:$global-z-index + 4,
+$top:0,
+$left:0,
+$li-stacked-padding:.5em 0 .5em 0
+
+){
+
+  .ui-menu,ui-menu {
+    @if $class != null{
+      &.#{$class} {
+        @include _ui-menu($component,$divider,
+          $margin,
+          $padding,
+          $width,
+          $height,
+          $li-margin,
+          $li-padding,
+          $li-divider-border,
+          $li-divider-padding,
+          $li-divider-margin,
+          $li-divider-height,
+          $li-label-font-size,
+          $li-label-padding,
+          $li-search-padding,
+          $z-index,
+          $top,
+          $left,
+          $li-stacked-padding
+        );
+        @content;
+      }
+    } @else {
+      @include _ui-menu($component,$divider,
+        $margin,
+        $padding,
+        $width,
+        $height,
+        $li-margin,
+        $li-padding,
+        $li-divider-border,
+        $li-divider-padding,
+        $li-divider-margin,
+        $li-divider-height,
+        $li-label-font-size,
+        $li-label-padding,
+        $li-search-padding,
+        $z-index,
+        $top,
+        $left,
+        $li-stacked-padding
+      );
+      @content;
+    }
+
+  }
+
+  @media #{$breakpoint-touch}{
+    .ui-menu,ui-menu{
+      display:none;
+    }
+  }
+
+}
+
+
+@mixin touch-ui-menu($class:null,$component:css-touch-menu,
+$z-index:$global-z-index + 98,
+$padding:58px 0 0 0,
+$li-border-bottom:1px solid,
+$li-padding:20px 0 20px 20px,
+$li-link-padding:0,
+$icon-font-size:1.5em,
+$icon-padding:0 10px 0 0,
+$icon-expand-top:20px,
+$icon-expand-right:20px,
+$icon-expand-font-size:1em
+
+){
+
+  @media #{$breakpoint-touch}{
+    .touch-ui-menu,touch-ui-menu{
+      @if $class != null{
+        &.#{$class} {
+          @include _touch-ui-menu($component,
+            $z-index,
+            $padding,
+            $li-border-bottom,
+            $li-padding,
+            $li-link-padding,
+            $icon-font-size,
+            $icon-padding,
+            $icon-expand-top,
+            $icon-expand-right,
+            $icon-expand-font-size
+          );
+          @content;
+        }
+      }@else{
+        @include _touch-ui-menu($component,
+          $z-index,
+          $padding,
+          $li-border-bottom,
+          $li-padding,
+          $li-link-padding,
+          $icon-font-size,
+          $icon-padding,
+          $icon-expand-top,
+          $icon-expand-right,
+          $icon-expand-font-size
+        );
+        @content;
+      }
+    }
+  }
+
+  @media #{$breakpoint-desktop}{
+    .touch-ui-menu,touch-ui-menu{
+      display:none;
+    }
+  }
+}
+