nitro_sg 3.0.0 → 3.0.1

data/sass-mixins/nitro-ui/_fixed-confirmation-toast.scss

@@ -0,0 +1,48 @@
+.fixed-confirmation-toast {
+  $height: 30px;
+  $spacing-sizes: (
+    "xs": 20px,
+    "sm": 40px,
+    "md": 50px,
+    "lg": 70px,
+    "xl": 100px,
+  );
+  $colors: (
+    "success": $power-green,
+    "tip": $ink-lightest,
+    "error": $power-red,
+  );
+  min-height: $height;
+  display: flex;
+  background: $sky;
+  border-radius: $border-rad-mega;
+  box-shadow: $shadow-deep;
+  color: $white;
+  padding-left: $space-small;
+  padding-right: $space-large;
+  align-items: center;
+  &-icon {
+    font-size: $font-base;
+    margin-right: $space-small;
+  }
+  &-message {
+    font-size: $font-small;
+    font-weight: $bold;
+    flex: 1;
+    text-align: center;
+  }
+  @each $name, $color in $colors {
+    &-#{$name} {
+      background: $color;
+    }
+  }
+  &-bottom {
+    @each $name, $size in $spacing-sizes {
+      &-#{$name} {
+        position: fixed;
+        @include center;
+        bottom: $size;
+      }
+    }
+  }
+}

data/sass-mixins/nitro-ui/_full-menu.scss

@@ -0,0 +1,168 @@
+@import "../base-mixins/all";
+@import "../base-variables/all";
+$slideout-menu-width: 200px;
+
+.sidebar-loading {
+  margin: 10px;
+  text-align: center;
+}
+
+.full-menu {
+  @include title-font;
+  bottom: 0;
+  list-style: none;
+  overflow-y: auto;
+  padding: 0;
+  position: fixed;
+  top: 0;
+  width: $slideout-menu-width;
+  z-index: 10000;
+
+  li {
+    a {
+      background: $white;
+      border-bottom: 1px solid mix($sky, $sky-light, 50%);
+      border-right: 1px solid mix($sky, $sky-light, 50%);
+      color: $ink;
+      display: block;
+      font-size: 13px;
+      margin: 0;
+      padding: 12px 10px;
+      position: relative;
+      font-weight: $bold;
+      @include smooth-font;
+      transition-property: color, border-color, background-color;
+      transition-duration: 0.15s;
+      transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+
+      .full-menu-icon {
+        display: block;
+        left: 14px;
+        position: absolute;
+        top: 15px;
+        font-size: $font-small;
+        color: $ink-lighter;
+      }
+      span {
+        display: block;
+        float: left;
+        margin-left: 2em;
+      }
+      span.badge {
+        display: block;
+        float: right;
+        font-size: 90%;
+        line-height: 1.1em;
+        border-radius: $border-rad-mega;
+        position: relative;
+        z-index: 1;
+      }
+      .full-menu-caret {
+        border-top-color: $ink;
+        float: none;
+        margin: none;
+        position: absolute;
+        right: 5px;
+        top: 12px;
+        font-size: 17px;
+      }
+
+      &:hover {
+        background: $light-yellow;
+      }
+    }
+
+    &.active {
+      a, a:hover {
+        -webkit-box-shadow: inset 0px 2px 5px 0px #bfbfbf;
+        box-shadow: inset 0px 2px 5px 0px #bfbfbf;
+        background: #e5e5e5;
+        background: -moz-linear-gradient(top, #e5e5e5 0%, #f5f5f5 100%);
+        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#f5f5f5));
+        background: -webkit-linear-gradient(top, #e5e5e5 0%,#f5f5f5 100%);
+        background: -o-linear-gradient(top, #e5e5e5 0%,#f5f5f5 100%);
+        background: -ms-linear-gradient(top, #e5e5e5 0%,#f5f5f5 100%);
+        background: linear-gradient(to bottom, #e5e5e5 0%,#f5f5f5 100%);
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#f5f5f5',GradientType=0 );
+      }
+    }
+
+    /* VACATION STYLE */
+    &.corporate-trip {
+      a {
+        background: #fffdd5;
+        background: -moz-linear-gradient(top, #fffdd5 1%, #eee100 100%);
+        background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#fffdd5), color-stop(100%,#eee100));
+        background: -webkit-linear-gradient(top, #fffdd5 1%,#eee100 100%);
+        background: -o-linear-gradient(top, #fffdd5 1%,#eee100 100%);
+        background: -ms-linear-gradient(top, #fffdd5 1%,#eee100 100%);
+        background: linear-gradient(to bottom, #fffdd5 1%,#eee100 100%);
+        border-bottom: 1px solid #ffcd3c;
+        border-right: 1px solid #ffcd3c;
+        color: $power-red;
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffdd5', endColorstr='#eee100',GradientType=0 );
+      }
+    }
+    /* END VACATION STYLE */
+  }
+
+  /* collapsable menu items */
+  .panel-collapse {
+    li {
+      a {
+        background: $ink-light;
+        border-bottom: none;
+        color: $sky-light;
+        padding: 5px 15px;
+
+        i, svg {
+          font-size: 70%;
+          left: 20px;
+          top: 11px;
+        }
+      }
+      a:hover {
+        -webkit-box-shadow: none;
+        background: $ink-lighter;
+        box-shadow: none;
+        color:$white;
+        filter: none;
+      }
+    }
+  }
+
+}
+
+/*
+ * Off Canvas
+ * --------------------------------------------------
+ */
+@media screen and (max-width: 3000px) {
+  .row-offcanvas {
+    position: relative;
+    left: 0; /* for firefox */
+    -webkit-transition: all .4s ease-out;
+    -moz-transition: all .4s ease-out;
+    transition: all .4s ease-out;
+    web-transition: width 1s;
+
+    &.active {
+      #header {
+        left: $slideout-menu-width;
+        right: -$slideout-menu-width;
+        -webkit-transition: all .4s ease-out;
+        -moz-transition: all .4s ease-out;
+        transition: all .4s ease-out;
+        web-transition: width 1s;
+      }
+    }
+}
+
+  .row-offcanvas-right .sidebar-offcanvas { right: -$slideout-menu-width; }
+  .row-offcanvas-left  .sidebar-offcanvas { left: -$slideout-menu-width;  }
+
+  .row-offcanvas-right.active { right: $slideout-menu-width; }
+  .row-offcanvas-left.active  { left: $slideout-menu-width;  }
+
+  .sidebar-offcanvas { position: absolute; top: 0; width: $slideout-menu-width; z-index: 10000; }
+}

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

@@ -0,0 +1,92 @@
+//
+// Grid system
+// --------------------------------------------------
+
+
+// Container widths
+//
+// Set the container width, and override it for fixed navbars in media queries.
+
+.container {
+  @include container-fixed;
+
+  @media (min-width: $screen-sm-min) {
+    width: $container-sm;
+  }
+  @media (min-width: $screen-md-min) {
+    width: $container-md;
+  }
+  @media (min-width: $screen-lg-min) {
+    width: $container-lg;
+  }
+}
+
+
+// Fluid container
+//
+// Utilizes the mixin meant for fixed width containers, but without any defined
+// width for fluid, full width layouts.
+
+.container-fluid {
+  @include container-fixed;
+  width: 100%;
+}
+
+.container-tablet { max-width: $container-tablet }
+.container-sm { max-width: $container-sm }
+.container-desktop { max-width: $container-desktop }
+.container-md { max-width: $container-md }
+.container-large-desktop { max-width: $container-large-desktop }
+.container-lg { max-width: $container-lg }
+
+
+// Row
+//
+// Rows contain and clear the floats of your columns.
+
+.row {
+  @include make-row;
+}
+
+
+// Columns
+//
+// Common styles for small and large grid columns
+
+@include make-grid-columns;
+
+
+// Extra small grid
+//
+// Columns, offsets, pushes, and pulls for extra small devices like
+// smartphones.
+
+@include make-grid(xs);
+
+
+// Small grid
+//
+// Columns, offsets, pushes, and pulls for the small device range, from phones
+// to tablets.
+
+@media (min-width: $screen-sm-min) {
+  @include make-grid(sm);
+}
+
+
+// Medium grid
+//
+// Columns, offsets, pushes, and pulls for the desktop device range.
+
+@media (min-width: $screen-md-min) {
+  @include make-grid(md);
+}
+
+
+// Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+
+@media (min-width: $screen-lg-min) {
+  @include make-grid(lg);
+}

data/sass-mixins/nitro-ui/_icon-toggle.scss

@@ -0,0 +1,37 @@
+.icon-toggle input[type=checkbox]{
+
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+
+}
+  /* Toggle */
+
+
+  input[type=checkbox]:checked ~ span{
+
+    &[title="icon-1"]{
+      svg{
+        color:none !important;
+      }
+    }
+
+    &[title="icon-2"]{
+      svg{
+        color:$power-green !important;
+      }
+    }
+  }
+
+  input[type=checkbox]:not(:checked) ~ span{
+    &[title="icon-1"]{
+      svg{
+        color:$power-red !important;
+      }
+    }
+    &[title="icon-2"]{
+      svg{
+        color:none !important;
+      }
+    }
+  }

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

@@ -0,0 +1,65 @@
+//== Jumbotron
+//
+//##
+
+$jumbotron-padding:              30px !default;
+$jumbotron-color:                inherit !default;
+$jumbotron-bg:                   $gray-5 !default;
+$jumbotron-heading-color:        inherit !default;
+$jumbotron-font-size:            ceil(($font-size-base * 1.5)) !default;
+$jumbotron-heading-font-size:    ceil(($font-size-base * 4.5)) !default;
+
+
+
+//
+// Jumbotron
+// --------------------------------------------------
+
+
+.jumbotron {
+  padding-top:    $jumbotron-padding;
+  padding-bottom: $jumbotron-padding;
+  margin-bottom: $jumbotron-padding;
+  color: $jumbotron-color;
+  background-color: $jumbotron-bg;
+
+  h1,
+  .h1 {
+    color: $jumbotron-heading-color;
+  }
+
+  p {
+    margin-bottom: ($jumbotron-padding / 2);
+    font-size: $jumbotron-font-size;
+    font-weight: 200;
+  }
+
+  > hr {
+    border-top-color: darken($jumbotron-bg, 10%);
+  }
+
+  .container &,
+  .container-fluid & {
+    border-radius: $border-radius-large; // Only round corners at higher resolutions if contained in a container
+  }
+
+  .container {
+    max-width: 100%;
+  }
+
+  @media screen and (min-width: $screen-sm-min) {
+    padding-top:    ($jumbotron-padding * 1.6);
+    padding-bottom: ($jumbotron-padding * 1.6);
+
+    .container &,
+    .container-fluid & {
+      padding-left:  ($jumbotron-padding * 2);
+      padding-right: ($jumbotron-padding * 2);
+    }
+
+    h1,
+    .h1 {
+      font-size: $jumbotron-heading-font-size;
+    }
+  }
+}

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

@@ -0,0 +1,69 @@
+// MIXINS
+@mixin link($color, $dark: false, $underline: false) {
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+  cursor: pointer;
+  transition-property: border, color;
+  transition-duration: 0.15s;
+  transition-timing-function: $bezier;
+  @if $dark {
+    color: $white;
+    @if $underline {
+      border-bottom: 1px solid $color;
+    }
+  }
+  @else {
+    color: $color;
+    @if $underline {
+      border-bottom: 1px solid shade($color, 30%);
+    }
+  }
+  &:hover, &:active, &:focus {
+    outline: 0;
+    text-decoration: none;
+    @if $dark {
+      color: tint(saturate($color, 60%), 20%);
+      border-bottom: 1px solid tint($color, 70%);
+    }
+    @else {
+      color: shade(saturate($color, 60%), 20%);
+      @if $underline {
+        border-bottom: 1px solid shade($color, 100%);
+      }
+      @else {
+        border-bottom: 1px solid shade($color, 30%);
+      }
+    }
+  }
+}
+
+@mixin link-colors($colors-list, $dark: false, $underline: false) {
+  @each $name, $color in $colors-list {
+    &-#{$name} {
+      @include link($color: $color, $dark: $dark, $underline: $underline);
+    }
+  }
+}
+
+// BASE STYLE
+a {
+  @include link($power-royal);
+  border-color: transparent;
+  &:hover, &:active, &:focus {
+    border-color: transparent;
+  }
+}
+
+.link {
+  @include link-colors($power-colors);
+  &-inverted {
+    @include link-colors($power-colors, $dark: true);
+  }
+}
+
+.link-underline {
+  @include link-colors($power-colors, $underline: true);
+  &-inverted {
+    @include link-colors($power-colors, true, true);
+  }
+}