nitro_sg 3.0.0 → 3.0.1

data/sass-mixins/nitro-ui/_notify.scss

@@ -0,0 +1,56 @@
+.nitro-notify {
+  $notifyHeight: 64px;
+  position: fixed;
+  left: 0;
+  top: -$notifyHeight;
+  right: 0;
+  z-index: 1000;
+  text-align: center;
+  height: $notifyHeight;
+  padding: $space-base * 1.5 $space-base * 2;
+  color: white;
+  font-size: $font-large;
+  @include transition-property(top);
+  @include transition-duration(.5s);
+  @include transition-timing-function(ease);
+
+  @include tablet-and-below {
+    font-size: $font-base;
+    padding: $space-base * 2;
+    .close {
+      font-size: $font-small;
+    }
+  }
+
+  a {
+    color: #fff;
+    text-decoration: underline;
+  }
+
+  .close {
+    color: #fff;
+    opacity: 1;
+    font-size: $font-largest;
+    font-weight: 300;
+  }
+
+  &.show {
+    top: 0px;
+  }
+  &.hide {
+    top: -$notifyHeight;
+  }
+
+  &-info {
+    background: $power-blue;
+  }
+  &-success {
+    background: $power-green;
+  }
+  &-warning {
+    background: $dark-orange;
+  }
+  &-error {
+    background: $power-red;
+  }
+}

data/sass-mixins/nitro-ui/_popovers.scss

@@ -0,0 +1,167 @@
+$zindex-popover:           1060 !default;
+
+
+
+//== Popovers
+//
+//##
+
+//** Popover body background color
+$popover-bg:                          #fff !default;
+//** Popover maximum width
+$popover-max-width:                   276px !default;
+//** Popover border color
+$popover-border-color:                rgba(0,0,0,.2) !default;
+//** Popover fallback border color
+$popover-fallback-border-color:       #ccc !default;
+
+//** Popover title background color
+$popover-title-bg:                    darken($popover-bg, 3%) !default;
+
+//** Popover arrow width
+$popover-arrow-width:                 10px !default;
+//** Popover arrow color
+$popover-arrow-color:                 $popover-bg !default;
+
+//** Popover outer arrow width
+$popover-arrow-outer-width:           ($popover-arrow-width + 1) !default;
+//** Popover outer arrow color
+$popover-arrow-outer-color:           fade_in($popover-border-color, 0.05) !default;
+//** Popover outer arrow fallback color
+$popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%) !default;
+
+
+
+
+
+//
+// Popovers
+// --------------------------------------------------
+
+
+.popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: $zindex-popover;
+  display: none;
+  max-width: $popover-max-width;
+  padding: 1px;
+  // Our parent element can be arbitrary since popovers are by default inserted as a sibling of their target element.
+  // So reset our font and text properties to avoid inheriting weird values.
+  @include reset-text;
+  font-size: $font-size-base;
+
+  background-color: $popover-bg;
+  background-clip: padding-box;
+  border: 1px solid $popover-fallback-border-color;
+  border: 1px solid $popover-border-color;
+  border-radius: $border-radius-large;
+  @include box-shadow(0 5px 10px rgba(0,0,0,.2));
+
+  // Offset the popover to account for the popover arrow
+  &.top     { margin-top: -$popover-arrow-width; }
+  &.right   { margin-left: $popover-arrow-width; }
+  &.bottom  { margin-top: $popover-arrow-width; }
+  &.left    { margin-left: -$popover-arrow-width; }
+}
+
+.popover-title {
+  margin: 0; // reset heading margin
+  padding: 8px 14px;
+  font-size: $font-size-base;
+  background-color: $popover-title-bg;
+  border-bottom: 1px solid darken($popover-title-bg, 5%);
+  border-radius: ($border-radius-large - 1) ($border-radius-large - 1) 0 0;
+}
+
+.popover-content {
+  padding: 9px 14px;
+}
+
+// Arrows
+//
+// .arrow is outer, .arrow:after is inner
+
+.popover > .arrow {
+  &,
+  &:after {
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+  }
+}
+.popover > .arrow {
+  border-width: $popover-arrow-outer-width;
+}
+.popover > .arrow:after {
+  border-width: $popover-arrow-width;
+  content: "";
+}
+
+.popover {
+  &.top > .arrow {
+    left: 50%;
+    margin-left: -$popover-arrow-outer-width;
+    border-bottom-width: 0;
+    border-top-color: $popover-arrow-outer-fallback-color; // IE8 fallback
+    border-top-color: $popover-arrow-outer-color;
+    bottom: -$popover-arrow-outer-width;
+    &:after {
+      content: " ";
+      bottom: 1px;
+      margin-left: -$popover-arrow-width;
+      border-bottom-width: 0;
+      border-top-color: $popover-arrow-color;
+    }
+  }
+  &.right > .arrow {
+    top: 50%;
+    left: -$popover-arrow-outer-width;
+    margin-top: -$popover-arrow-outer-width;
+    border-left-width: 0;
+    border-right-color: $popover-arrow-outer-fallback-color; // IE8 fallback
+    border-right-color: $popover-arrow-outer-color;
+    &:after {
+      content: " ";
+      left: 1px;
+      bottom: -$popover-arrow-width;
+      border-left-width: 0;
+      border-right-color: $popover-arrow-color;
+    }
+  }
+  &.bottom > .arrow {
+    left: 50%;
+    margin-left: -$popover-arrow-outer-width;
+    border-top-width: 0;
+    border-bottom-color: $popover-arrow-outer-fallback-color; // IE8 fallback
+    border-bottom-color: $popover-arrow-outer-color;
+    top: -$popover-arrow-outer-width;
+    &:after {
+      content: " ";
+      top: 1px;
+      margin-left: -$popover-arrow-width;
+      border-top-width: 0;
+      border-bottom-color: $popover-arrow-color;
+    }
+  }
+
+  &.left > .arrow {
+    top: 50%;
+    right: -$popover-arrow-outer-width;
+    margin-top: -$popover-arrow-outer-width;
+    border-right-width: 0;
+    border-left-color: $popover-arrow-outer-fallback-color; // IE8 fallback
+    border-left-color: $popover-arrow-outer-color;
+    &:after {
+      content: " ";
+      right: 1px;
+      border-right-width: 0;
+      border-left-color: $popover-arrow-color;
+      bottom: -$popover-arrow-width;
+    }
+  }
+}

data/sass-mixins/nitro-ui/_progress-bars.scss

@@ -0,0 +1,125 @@
+//== Progress bars
+//
+//##
+
+//** Background color of the whole progress component
+$progress-bg:                 #f5f5f5 !default;
+//** Progress bar text color
+$progress-bar-color:          #fff !default;
+//** Variable for setting rounded corners on progress bar.
+$progress-border-radius:      $border-radius-base !default;
+
+//** Default progress bar color
+$progress-bar-bg:             $brand-primary !default;
+//** Success progress bar color
+$progress-bar-success-bg:     $brand-success !default;
+//** Warning progress bar color
+$progress-bar-warning-bg:     $brand-warning !default;
+//** Danger progress bar color
+$progress-bar-danger-bg:      $brand-danger !default;
+//** Info progress bar color
+$progress-bar-info-bg:        $brand-info !default;
+
+
+
+
+
+@mixin progress-bar-variant($color) {
+  background-color: $color;
+
+  // Deprecated parent class requirement as of v3.2.0
+  .progress-striped & {
+    @include gradient-striped;
+  }
+}
+
+
+
+//
+// Progress bars
+// --------------------------------------------------
+
+
+// Bar animations
+// Move to animations
+// -------------------------
+
+// WebKit
+@-webkit-keyframes progress-bar-stripes {
+  from  { background-position: 40px 0; }
+  to    { background-position: 0 0; }
+}
+
+// Spec and IE10+
+@keyframes progress-bar-stripes {
+  from  { background-position: 40px 0; }
+  to    { background-position: 0 0; }
+}
+
+
+// Bar itself
+// -------------------------
+
+// Outer container
+.progress {
+  overflow: hidden;
+  height: $line-height-computed;
+  margin-bottom: $line-height-computed;
+  background-color: $progress-bg;
+  border-radius: $progress-border-radius;
+  @include box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
+}
+
+// Bar of progress
+.progress-bar {
+  float: left;
+  width: 0%;
+  height: 100%;
+  font-size: $font-size-small;
+  line-height: $line-height-computed;
+  color: $progress-bar-color;
+  text-align: center;
+  background-color: $progress-bar-bg;
+  @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
+  @include transition(width .6s ease);
+}
+
+// Striped bars
+//
+// `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the
+// `.progress-bar-striped` class, which you just add to an existing
+// `.progress-bar`.
+.progress-striped .progress-bar,
+.progress-bar-striped {
+  @include gradient-striped;
+  background-size: 40px 40px;
+}
+
+// Call animation for the active one
+//
+// `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the
+// `.progress-bar.active` approach.
+.progress.active .progress-bar,
+.progress-bar.active {
+  @include animation(progress-bar-stripes 2s linear infinite);
+}
+
+
+// Variations
+// -------------------------
+
+.progress-bar-success {
+  @include progress-bar-variant($progress-bar-success-bg);
+}
+
+.progress-bar-info {
+  @include progress-bar-variant($progress-bar-info-bg);
+}
+
+.progress-bar-warning {
+  @include progress-bar-variant($progress-bar-warning-bg);
+}
+
+.progress-bar-danger {
+  @include progress-bar-variant($progress-bar-danger-bg);
+}

data/sass-mixins/nitro-ui/_responsive-embed.scss

@@ -0,0 +1,35 @@
+// Embeds responsive
+//
+// Credit: Nicolas Gallagher and SUIT CSS.
+
+.embed-responsive {
+  position: relative;
+  display: block;
+  height: 0;
+  padding: 0;
+  overflow: hidden;
+
+  .embed-responsive-item,
+  iframe,
+  embed,
+  object,
+  video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    height: 100%;
+    width: 100%;
+    border: 0;
+  }
+}
+
+// Modifier class for 16:9 aspect ratio
+.embed-responsive-16by9 {
+  padding-bottom: 56.25%;
+}
+
+// Modifier class for 4:3 aspect ratio
+.embed-responsive-4by3 {
+  padding-bottom: 75%;
+}

data/sass-mixins/nitro-ui/_side-modal.scss

@@ -0,0 +1,92 @@
+$modalSides:
+  "leftModal" 0 auto -25%,
+  "rightModal" auto 0 25%;
+
+@each $side in $modalSides{
+  .#{nth($side,1)}{
+    .modal-dialog {
+      position: fixed;
+      margin: 0;
+      right: #{nth($side,3)};
+      top: 0;
+      left: #{nth($side,2)};
+      bottom: auto;
+      height: 100vh;
+      width: 100%;
+      max-width: 40vw;
+
+
+      .mobile_close {
+        display: none;
+      }
+      @include media-max-width($screen-sm-min) {
+        max-width: 100%;
+
+        .mobile_close {
+          display: block;
+        }
+      }
+
+      .modal-content {
+        height: 100%;
+        border-radius: 0;
+        overflow-y: auto;
+      }
+
+
+    }
+
+
+    &.fade:not(.in) .modal-dialog {
+      -webkit-transform: translate3d(#{nth($side,4)},0,0);
+      transform: translate3d(#{nth($side,4)}, 0, 0);
+    }
+
+
+
+  //Sizes
+    $screenSizes:
+      "-xxs" 80px,
+      "-xs" 250px,
+      "-sm" 400px,
+      "-md" 60vw,
+      "-lg" 75vw,
+      "-xl" 85vw,
+      "-full" 100vw,
+      "-600" 600px
+      "-1000" 1000px;
+
+    $collapsedSizes:
+      "-xs",
+      "-sm",
+      "-md",
+      "-lg";
+
+     @each $size in $screenSizes{
+       &#{nth($size,1)} {
+         .modal-dialog {
+           max-width: #{nth($size,2)} !important;
+         }
+       }
+     }
+
+     @each $size in $collapsedSizes{
+       $collapseAt:"-collapse#{$size}" "$screen#{$size}-min" ;
+       &#{nth($collapseAt,1)}{
+         @include media-max-width(#{nth($collapseAt,2)}) {
+           .modal-dialog {
+             max-width: 100% !important ;
+
+             .mobile_close {
+               display: block;
+             }
+           }
+         }
+       }
+     }
+   }
+ }
+
+
+
+//starting edits