pageflow-outline-navigation-bar 0.1.0

data/app/assets/stylesheets/pageflow/outline_navigation_bar/themes/default/credits_box.scss

@@ -0,0 +1,28 @@
+$navigation-credits-link-color: $main-color !default;
+
+/// Color of links in credits text.
+$outline-navigation-bar-credits-link-color: $navigation-credits-link-color !default;
+
+.credits_box {
+  font-size: 1em;
+  min-width: 230px;
+  min-height: 4px;
+  bottom: 0;
+
+  p {
+    margin: 0 0 0.5em;
+    text-align: left;
+    font-size: 1em;
+  }
+
+  a.legal,
+  a.copy {
+    float: left;
+    margin-right: 10px;
+  }
+
+  a {
+    @extend %anchor;
+    color: $outline-navigation-bar-credits-link-color;
+  }
+}

data/app/assets/stylesheets/pageflow/outline_navigation_bar/themes/default/cross_dependant_styles.css.scss

@@ -0,0 +1,6 @@
+.js .widget_outline_navigation_bar_fixed_present,
+.js .widget_outline_navigation_bar_expandable_present {
+  .navigation_mobile {
+    display: none;
+  }
+}

data/app/assets/stylesheets/pageflow/outline_navigation_bar/themes/default/icons/icon_font.scss

@@ -0,0 +1,177 @@
+@mixin outline-navigation-bar-icons-icon-font(
+  $button-background-color,
+  $active-button-background-color,
+
+  $button-icon-color,
+  $active-button-icon-color,
+  $deactivated-button-icon-color,
+
+  $share-icon-color,
+  $active-share-icon-color
+) {
+  .toggle.buttons,
+  .buttons_menu_item {
+    > a {
+      display: block;
+      position: relative;
+      padding: 10px 0;
+      text-decoration: none;
+
+      > .button {
+        display: block;
+        width: 28px;
+        height: 28px;
+        border-radius: 18px;
+        line-height: 28px;
+        margin: 0 auto 5px auto;
+        position: relative;
+        background-color: $button-background-color;
+        box-shadow: 1px 2px 1px 0 rgba(0, 0, 0, 0.2);
+        color: $button-icon-color;
+        font-size: 16px;
+        text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.6);
+        text-align: center;
+      }
+
+      &:hover > .button,
+      &.active > .button {
+        background-color: $active-button-background-color;
+        color: $active-button-icon-color;
+        text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+      }
+
+      &:active > .button {
+        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
+        @include transform(translate(1px, 1px));
+      }
+    }
+  }
+
+  .buttons_menu_item.top {
+    padding-top: 0;
+
+    .button {
+      font-weight: bold;
+      @include fa-arrow-circle-up-icon;
+    }
+  }
+
+  .buttons_menu_item.home {
+    padding-top: 0;
+
+    .button {
+      font-weight: bold;
+      @include fa-home-icon;
+    }
+  }
+
+  .buttons_menu_item.toggle_overview {
+    .button {
+      @include fa-th-icon;
+    }
+  }
+
+  .buttons_menu_item.fullscreen {
+    .button {
+      font-weight: bold;
+      @include fa-expand-icon;
+    }
+  }
+
+  .buttons_menu_item.hide_text {
+    .button {
+      font-weight: bold;
+      @include fa-photo-icon;
+    }
+  }
+
+  .buttons_menu_item.share {
+    > a > .button {
+      font-weight: bold;
+      @include fa-share-icon;
+    }
+  }
+
+  .buttons_menu_item.credits {
+    .button {
+      font-weight: bold;
+      @include fa-info-icon;
+    }
+  }
+
+  .share_box {
+    .share {
+      width: 45px;
+
+      &:hover,
+      &.active {
+        .button:before {
+          color: $active-share-icon-color;
+        }
+      }
+    }
+
+    .button {
+      display: block;
+      text-align: center;
+    }
+  }
+
+  .share_box {
+    .button.share_google,
+    .button.share_facebook,
+    .button.share_twitter {
+      font-size: 1.5em;
+
+      &:before {
+        color: $share-icon-color;
+      }
+    }
+
+    .button.share_google {
+      @include fa-google-plus-icon;
+    }
+
+    .button.share_facebook {
+      @include fa-facebook-icon;
+    }
+
+    .button.share_twitter {
+      @include fa-twitter-icon;
+    }
+  }
+
+  .volume-control:before,
+  .volume-slider:before {
+    color: $button-background-color;
+    position: absolute;
+
+    @include small-height {
+      display: none;
+    }
+  }
+
+  .volume-control {
+    @include fa-volume-down-icon;
+
+    &:before {
+      right: 25px;
+      top: 80%;
+    }
+  }
+
+  .volume-slider {
+    @include fa-volume-up-icon;
+
+    &:before {
+      right: -5px;
+      top: -30%;
+    }
+  }
+
+  .toggle.buttons {
+    .button {
+      @include fa-reorder-icon;
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/outline_navigation_bar/themes/default/icons/sprite.scss

@@ -0,0 +1,140 @@
+@mixin outline-navigation-bar-icons-sprite {
+  .menu_item {
+    > a {
+      display: block;
+      height: 100%;
+      text-decoration: none;
+      margin: 0 4px;
+    }
+
+    .button {
+      @extend %pageflow_sprite_icon;
+      display: block;
+      width: 40px;
+      height: 40px;
+      margin: 0 auto;
+    }
+  }
+
+  .home {
+    @include pageflow-sprite-icon-home($target: ".button");
+  }
+
+  .top {
+    @include pageflow-sprite-icon-top($target: ".button");
+
+    &.deactivated {
+      @include pageflow-sprite-icon-top("disabled", $target: ".button");
+    }
+  }
+
+  .toggle_overview {
+    @include pageflow-sprite-icon-overview($target: ".button");
+  }
+
+  .toggle_overview {
+    &.deactivated {
+      @include pageflow-sprite-icon-overview("disabled", $target: ".button");
+    }
+  }
+
+  .fullscreen {
+    @include pageflow-sprite-icon-fullscreen($target: ".button");
+
+    &.active {
+      @include pageflow-sprite-icon-fullscreen("active", $target: ".button");
+    }
+  }
+
+  .hide_text {
+    @include pageflow-sprite-icon-hide-text($target: ".button");
+
+    &.active {
+      @include pageflow-sprite-icon-hide-text("active", $target: ".button");
+    }
+  }
+
+  .share {
+    @include pageflow-sprite-icon-share($target: ".navigation_share.button");
+  }
+
+  .buttons_menu_item.credits {
+    @include pageflow-sprite-icon-credits($target: ".button");
+  }
+
+  .share.google {
+    @include pageflow-sprite-icon-google($target: ".button");
+
+    &.active {
+      @include pageflow-sprite-icon-google("active", $target: ".button");
+    }
+  }
+
+  .share.twitter {
+    @include pageflow-sprite-icon-twitter($target: ".button");
+
+    &.active {
+      @include pageflow-sprite-icon-twitter("active", $target: ".button");
+    }
+  }
+
+  .share.facebook {
+    @include pageflow-sprite-icon-facebook($target: ".button");
+
+    &.active {
+      @include pageflow-sprite-icon-facebook("active", $target: ".button");
+    }
+  }
+
+  .share_box {
+    a.share {
+      width: 39px;
+    }
+
+    .button {
+      margin-left: 5px;
+    }
+  }
+
+  .volume-control {
+    &:before,
+    &:after,
+    .volume-level:before {
+      content: " ";
+      @extend %pageflow_sprite_icon;
+      background-repeat: no-repeat;
+      position: absolute;
+      width: 28px;
+      height: 19px;
+    }
+
+    &:after,
+    &:before {
+      @include small-height {
+        display: none;
+      }
+    }
+
+    &:before {
+      @include pageflow-sprite-icon-volume-down;
+      top: 80%;
+    }
+
+    &:after {
+      @include pageflow-sprite-icon-volume-up;
+      top: 7%;
+    }
+  }
+
+  .toggle.buttons {
+    .button {
+      @extend %pageflow_sprite_icon;
+    }
+
+    @include pageflow-sprite-icon-menu($target: ".button");
+
+    .active {
+      @include pageflow-sprite-icon-menu("active", $target: ".button");
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/outline_navigation_bar/themes/default/menu_item.scss

@@ -0,0 +1,107 @@
+.menu_item {
+  position: relative;
+  list-style: none;
+  height: 10%;
+  min-height: 63px;
+  max-height: 70px;
+
+  p,
+  .label {
+    text-align: center;
+    color: $basic-text-color;
+    font-size: 11px;
+    display: block;
+    padding: 0;
+  }
+
+  a {
+    @include hover {
+      p,
+      .label {
+        color: $main-color;
+      }
+    }
+
+    &.active {
+      p,
+      .label {
+        color: $main-color;
+      }
+    }
+
+    &.deactivated {
+      pointer-events: none;
+      opacity: 0.4;
+
+      .label {
+        color: $basic-text-color;
+      }
+    }
+  }
+
+  @include small-height {
+    .label {
+      display: none;
+    }
+  }
+
+  .menu_box {
+    position: absolute;
+    right: 70px;
+    z-index: 4;
+    visibility: hidden;
+    background-color: $outline-navigation-bar-menu-box-background-color;
+    padding: 15px;
+
+    p {
+      color: $outline-navigation-bar-menu-box-color;
+    }
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: -5px;
+      width: 5px;
+      height: 100%;
+    }
+
+    .menu_item {
+      display: inline-block;
+    }
+  }
+
+  @include hover {
+    .menu_box {
+      visibility: visible;
+    }
+  }
+
+  &:focus,
+  &.open,
+  &.focused {
+    .menu_box {
+      visibility: visible;
+    }
+  }
+}
+
+@mixin menu-item-shadow {
+  .button:after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    box-shadow: 0 0 20px 12px rgba(0, 0, 0, 0.4);
+    z-index: -1;
+  }
+}
+
+@mixin menu-item-shadow-off {
+  .button:after {
+    display: none;
+  }
+}