ellipsis-compass 1.0.1

data/stylesheets/ui/_notification.scss

@@ -0,0 +1,154 @@
+/* ui-notification */
+
+/* private -----------------------------------------------------------------------------------------------------------*/
+
+@mixin _ui-notification($component: inverse,
+$padding: null,
+$font-size: null,
+$border-radius: null,
+$z-index: null,
+$width:null,
+$top:null,
+$left:null,
+$bottom:null,
+$right:null
+
+) {
+
+  display: inline-block;
+  padding: $padding;
+  font-size: $font-size;
+  border-radius:$border-radius;
+  position: fixed;
+  @if $bottom != null {
+    bottom:$bottom;
+  }@else{
+    top: $top;
+  }
+
+  @if $right != null{
+    right:$right;
+  }@else{
+    left: $left;
+  }
+
+  z-index: $z-index;
+  opacity: 0;
+
+  @if $width != null{
+    width:$width;
+  }
+
+  @extend %#{$component}-background !optional;
+  @extend %#{$component}-font !optional;
+  @extend %#{$component}-border !optional;
+  @extend %#{$component}-box-shadow !optional;
+
+  &.visible{
+    visibility: visible;
+    opacity:1;
+  }
+  &.inline{
+    position:relative;
+    top:0;
+    left:0;
+    font-size:.9em;
+  }
+  @include phone-content(){
+    left:5px;
+  }
+}
+
+/* public ------------------------------------------------------------------------------------------------------------*/
+
+@mixin ui-notification($class:null, $component: inverse,
+$padding:1em 2em 1em 2em,
+$font-size:1em,
+$border-radius:10px,
+$z-index: $global-z-index + 999999,
+$width:null,
+$top:25%,
+$left:45%,
+$bottom:null,
+$right:null
+
+) {
+
+  .ui-notification,ui-notification {
+    @if $class != null{
+      &.#{$class} {
+        @include _ui-notification($component,$padding,$font-size,$border-radius,$z-index,$width,$top,$left,$bottom,$right);
+        @content;
+      }
+    } @else {
+      @include _ui-notification($component,$padding,$font-size,$border-radius,$z-index,$width,$top,$left,$bottom,$right);
+      @content;
+    }
+    @media #{$breakpoint-phone}{
+      width:94%;
+      left:3%;
+      text-align:center;
+    }
+  }
+
+}
+
+@mixin ui-notification-label(
+$min-width:null,
+$border-radius:null,
+$margin:null,
+$padding:null
+){
+  .ui-notification-label{
+
+    @if $margin != null {
+      margin:$margin;
+    }@else{
+      margin:1rem 0 1rem 0;
+    }
+    @if $padding != null {
+      padding:$padding;
+    }@else{
+      $padding:1em 0 1em 2em;
+    }
+
+    &>div{
+      @if $min-width != null {
+        min-width:$min-width;
+      }@else{
+        min-width:20em;
+      }
+      display:inline-block;
+      &>.ui-semantic-label{
+        @if $border-radius != null{
+          border-radius:$border-radius;
+        }@else{
+          @if $global-radius != 0{
+            border-radius:10px;
+          }
+        }
+      }
+    }
+
+  }
+  @media #{$breakpoint-phone}{
+    .ui-notification-label{
+      &>div{
+        width:100%;
+        &>.ui-label{
+          border-radius:0;
+        }
+      }
+    }
+  }
+  .ui-notification-label{
+    @content;
+  }
+}
+
+@mixin ui-semantic-notification(){
+  @include ui-notification($class:info, $component:info);
+  @include ui-notification($class:success, $component:success);
+  @include ui-notification($class:error, $component:error);
+  @include ui-notification($class:warning, $component:warning);
+}

data/stylesheets/ui/_pagination.scss

@@ -0,0 +1,137 @@
+/* ui-pagination */
+
+/* Private -----------------------------------------------------------------------------------------------------------*/
+
+@mixin _ui-pagination($component: null, $active-component: null,
+$border-radius: null,
+$margin: null,
+$page-margin: null,
+$page-padding: null,
+$page-font-size:null,
+$box-shadow:null
+) {
+
+  list-style: none;
+  margin: $margin;
+  @include flexbox($alignment:center);
+  width:100%;
+  .page-info{
+    font-size:$page-font-size;
+    .page-no,.page-count{
+      font-weight:bold;
+    }
+  }
+  ul {
+    list-style: none;
+    & > li {
+
+      &.hide{
+        display:none;
+      }
+      &.next {
+        margin-left: .5rem
+      }
+      &.prev {
+        margin-right: .5rem;
+      }
+      & > a {
+        line-height:1 !important;
+        padding: $page-padding;
+        margin: $page-margin;
+        border-radius: $border-radius;
+        @extend %#{$component}-background !optional;
+        @extend %#{$component}-font !optional;
+        @extend %#{$component}-border !optional;
+        @extend %#{$component}-box-shadow !optional;
+        position: relative;
+        cursor: pointer;
+        @if($box-shadow == false){
+          box-shadow:none;
+        }
+
+        &:hover, &:focus {
+          @extend %#{$component}-background-hover !optional;
+          @extend %#{$component}-font-hover !optional;
+          @extend %#{$component}-border-hover !optional;
+          @extend %#{$component}-box-shadow-hover !optional;
+        }
+        &:active {
+          @extend %#{$component}-background-active !optional;
+          @extend %#{$component}-font-active !optional;
+          @extend %#{$component}-border-active !optional;
+          @extend %#{$component}-box-shadow-active !optional;
+        }
+        &.active {
+          @extend %#{$active-component}-background !optional;
+          @extend %#{$active-component}-font !optional;
+          @extend %#{$active-component}-border !optional;
+          @extend %#{$active-component}-box-shadow !optional;
+          cursor: normal !important;
+          &:hover {
+            @extend %#{$active-component}-background !optional;
+            @extend %#{$active-component}-font !optional;
+            @extend %#{$active-component}-border !optional;
+            @extend %#{$active-component}-box-shadow !optional;
+            cursor: normal !important;
+          }
+        }
+        &.small{
+
+        }
+        &.disabled {
+          @extend %#{$component}-disabled !optional;
+        }
+      }
+    }
+    &.right {
+      @include flexbox($justification:flex-end);
+      margin-left:auto;
+    }
+  }
+
+  @media #{$breakpoint-phone}{
+    .page-info{
+      display:none;
+    }
+    ul {
+      & > li {
+        &[data-touch]{
+          display:none;
+        }
+        a {
+
+          box-shadow: none;
+        }
+
+      }
+    }
+
+  }
+
+}
+
+/* Public ------------------------------------------------------------------------------------------------------------*/
+
+@mixin ui-pagination($class: null, $component: default, $active-component: inverse,
+$border-radius:$global-radius,
+$margin:1em 0 2em 0,
+$page-margin:0 0 0 .5em,
+$page-padding:.5em .7em .5em .7em,
+$page-font-size:1em,
+$box-shadow:true
+) {
+
+  .ui-pagination,ui-pagination {
+    @if $class != null{
+      &.#{$class} {
+        @include _ui-pagination($component, $active-component, $border-radius, $margin, $page-margin, $page-padding,$page-font-size,$box-shadow);
+        @content;
+      }
+    } @else {
+      @include _ui-pagination($component, $active-component, $border-radius, $margin, $page-margin, $page-padding,$page-font-size,$box-shadow);
+      @content;
+    }
+
+  }
+
+}

data/stylesheets/ui/_parallax.scss

@@ -0,0 +1,233 @@
+/* ui-parallax */
+
+/* Public -----------------------------------------------------------------------------------------------------------*/
+
+@mixin ui-parallax($component: css-parallax-button,
+$media-height: 800px,
+$content-height: 600px,
+$content-background: $white,
+$footer-background: #e0e2e3,
+$footer-padding: 50px 0 50px 0,
+$footer-min-height: 400px,
+$scroll-button-size: 70px,
+$scroll-button-icon-size: 26px,
+$scroll-button-icon-top: 2px,
+$scroll-button-icon-left: 15px,
+$phone-media-height: 400px,
+$phone-content-padding: 80px 0 80px 0) {
+
+  $_scroll-button-margin: $scroll-button-size/2;
+
+  .ui-parallax, ui-parallax {
+    list-style: none;
+    width: 100%;
+    display: block;
+    position: relative;
+
+    & > li, & > parallax-item {
+      margin: 0;
+      padding: 0;
+      border: 0;
+      width: 100%;
+      visibility: hidden;
+      overflow: hidden;
+      & > img {
+        width: 100%;
+        height: auto;
+      }
+      & > div {
+        background-repeat: no-repeat;
+        -webkit-background-size: cover;
+        -moz-background-size: cover;
+        -o-background-size: cover;
+        background-size: cover;
+
+        @include touch-content() {
+          background-position: center center;
+        }
+      }
+      & > section {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        width: 100%;
+        height: 100%;
+        background: transparent;
+        @include display-flex();
+        @include align-items(center);
+        @include justify-content(center);
+        @include flex-direction(column);
+        color: $white;
+        h1, h2, h3, h4, h5, h6 {
+          color: $white;
+        }
+
+      }
+      &:first-child {
+        position: relative;
+        width: 100%;
+        overflow: hidden;
+        z-index: 99;
+        & > video {
+          height: auto;
+          min-width: 100%;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          position: absolute;
+        }
+
+      }
+      &.content, &[content] {
+        background: $content-background;
+        z-index: 98;
+        overflow: hidden;
+        position: relative;
+        @include phone-content() {
+          overflow: visible;
+          padding: $phone-content-padding;
+        }
+        div {
+          height: $content-height;
+          @include display-flex();
+          @include align-items(center);
+
+          @include phone-content() {
+            display: block;
+            height: auto;
+          }
+        }
+
+      }
+
+      .scroll-button,parallax-scroll-button {
+        @extend %#{$component}-background !optional;
+        position: absolute;
+        bottom: -#{$_scroll-button-margin};
+        height: $scroll-button-size;
+        width: $scroll-button-size;
+        border-radius: 50%;
+        display: block;
+        left: 50%;
+        margin-left: -#{$_scroll-button-margin};
+        cursor: pointer;
+        &:after {
+          position: absolute;
+          font-family: $global-icon-font-family;
+          content: '#{$global-icon-dropdown}';
+          font-size: $scroll-button-icon-size;
+          @extend %#{$component}-icon !optional;
+          top: $scroll-button-icon-top;
+          left: $scroll-button-icon-left;
+        }
+
+        @include touch-content() {
+          display: none;
+        }
+      }
+      .scroll-button-container,parallax-scroll-button-container {
+        margin: 2rem 0 0 0;
+        position: relative;
+        cursor: pointer;
+        @include touch-content() {
+          display: none;
+        }
+        & > span.button {
+          position: relative;
+          background: #fff;
+          opacity: .4;
+          height: $scroll-button-size;
+          width: $scroll-button-size;
+          border-radius: 50%;
+          display: block;
+          cursor: pointer;
+        }
+        & > span.arrow {
+          height: $scroll-button-size;
+          width: $scroll-button-size;
+          display: block;
+          cursor: pointer;
+          &:after {
+            position: absolute;
+            font-family: $global-icon-font-family;
+            content: '#{$global-icon-dropdown}';
+            font-size: $scroll-button-icon-size;
+            @extend %#{$component}-icon !optional;
+            top: $scroll-button-icon-top + 16;
+            left: $scroll-button-icon-left;
+            z-index: 99;
+          }
+        }
+
+      }
+
+      &.footer {
+        padding: $footer-padding;
+        min-height: $footer-min-height;
+        background: $footer-background;
+
+      }
+      &.media, &[media] {
+        height: $media-height;
+
+        @include phone-content() {
+          height: $phone-media-height;
+        }
+      }
+    }
+    &.visible {
+      & > li, & > parallax-item {
+        visibility: visible;
+      }
+    }
+    &.scroll {
+      & > li, & > parallax-item {
+        position: fixed;
+        top: 0;
+        left: 0;
+        overflow: hidden;
+        &:first-child {
+
+        }
+
+      }
+    }
+    @content;
+  }
+
+}
+
+@mixin ui-parallax-scroll-button() {
+  .scroll-button, parallax-scroll-button {
+    @content;
+  }
+
+}
+
+@mixin ui-parallax-scroll-button-container() {
+  .scroll-button-container,parallax-scroll-button-container {
+      @content;
+  }
+
+}
+
+@mixin ui-parallax-media-section() {
+  & > li,&>parallax-item {
+    &.media, &[media] {
+      & > section {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin ui-parallax-content() {
+  & > li, &>parallax-item {
+    &.content, &[content] {
+      @content;
+    }
+  }
+}