nitro_sg 3.0.0 → 3.0.1

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

@@ -0,0 +1,87 @@
+// Code
+//
+//##
+
+$code-color:                  #c7254e;
+$code-bg:                     #f9f2f4;
+
+$kbd-color:                   $inverse;
+$kbd-bg:                      $brand-primary;
+
+$pre-bg:                      $inverse;
+$pre-color:                   inherit;
+$pre-border-color:            mix($brand-primary, $inverse, 12%);
+$pre-scrollable-max-height:   340px;
+$pre-border-radius:           $border-radius-large;
+
+
+
+//
+// Code (inline and block)
+// --------------------------------------------------
+
+
+// Inline and block code styles
+code,
+kbd,
+pre,
+samp {
+  font-family: $font-family-monospace;
+}
+
+// Inline code
+code {
+  padding: 2px 4px;
+  font-size: 90%;
+  color: $code-color;
+  background-color: $code-bg;
+  border-radius: $border-radius-base;
+}
+
+// User input typically entered via keyboard
+kbd {
+  padding: 2px 4px;
+  font-size: 90%;
+  color: $kbd-color;
+  background-color: $kbd-bg;
+  border-radius: $border-radius-small;
+  box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
+
+  kbd {
+    padding: 0;
+    font-size: 100%;
+    font-weight: bold;
+    box-shadow: none;
+  }
+}
+
+// Blocks of code
+pre {
+  display: block;
+  padding: (($line-height-computed - 1) / 2);
+  margin: 0 0 ($line-height-computed / 2);
+  font-size: ($font-size-base - 1); // 14px to 13px
+  line-height: $line-height-base;
+  word-break: break-all;
+  word-wrap: break-word;
+  color: $pre-color;
+  background-color: $pre-bg;
+  border: 1px solid $pre-border-color;
+  border-radius: $border-radius-base;
+
+  // Account for some code outputs that place code tags in pre tags
+  code {
+    padding: 0;
+    font-size: inherit;
+    color: inherit;
+    white-space: pre-wrap;
+    background-color: transparent;
+    border-radius: 0;
+  }
+}
+
+// Enable scrollable blocks of code
+.pre-scrollable {
+  max-height: $pre-scrollable-max-height;
+  overflow-y: scroll;
+}

data/sass-mixins/nitro-ui/_connect-cards.scss

@@ -0,0 +1,150 @@
+.connect-card {
+  $card-border: $sky;
+  border-radius: $border-rad-heaviest + 1px;
+  border: 1px solid $card-border;
+  box-shadow: $shadow-shallow;
+  background: $white;
+  min-height: $space-base;
+  overflow: hidden;
+  width: 250px;
+  .new-style & .btn {
+    margin-bottom: 0;
+  }
+  &-stat {
+    padding: $space-larger $space-base;
+    background: $white;
+    border-bottom: 1px solid $card-border;
+    &.bg-power-green, &.bg-ink, &.bg-power-navy, &.bg-power-navy-darker {
+      border: 0;
+    }
+  }
+  &-image {
+    img, .image {
+      display: block;
+      height: 155px;
+      width: 100%;
+      object-fit: cover;
+      background-size: cover;
+      background-position: center;
+    }
+  }
+  &-text {
+    padding: $space-larger $space-base;
+    background: $white;
+    border-bottom: 1px solid $card-border;
+    &-title {
+      font-size: $font-small;
+      color: $ink;
+    }
+    &-description {
+      color: $ink-lightest;
+      font-size: $font-smaller;
+      display: block;
+    }
+    &-subtext {
+      color: $ink-lightest;
+      font-size: $font-smaller;
+      font-style: italic;
+      font-weight: $light;
+      display: block;
+    }
+
+  }
+  &-list {
+    padding: $space-large $space-large $space-base $space-large;
+    .progress {
+      margin-bottom: 0;
+      &.small {
+        height: 10px;
+      }
+    }
+    &-title {
+      text-transform: uppercase;
+      color: $ink;
+      font-size: $font-base;
+      line-height: $font-base + 2px;
+      margin-bottom: $space-large;
+      svg {
+        float: left;
+        margin: 0 $space-base 0 0
+      }
+      small {
+        text-transform: none;
+        font-size: $font-smaller;
+        line-height: $font-smaller + 1px;
+        display: block;
+        color: $ink-lighter;
+      }
+    }
+    .one-line {
+      display: inline-block;
+    }
+    &-avatar {
+      width: 30px;
+      height: 30px;
+      border-radius: $border-rad-lighter;
+      object-fit: cover;
+      margin-right: $space-small;
+      display: block;
+    }
+    &-item {
+      display: block;
+      font-weight: $bold;
+      font-size: $font-small;
+      line-height: $font-base;
+      color: $ink;
+      margin-right: $space-small;
+      svg {
+        margin-right: $space-small;
+      }
+      small {
+        text-transform: uppercase;
+        font-weight: $regular;
+        font-size: $font-smaller;
+        color: $ink-lighter
+      }
+    }
+    &-value {
+      text-align: center;
+      margin-left: auto;
+      white-space: nowrap;
+      color: $ink-lighter;
+      font-size: $font-small;
+    }
+    ul, ol {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+    ol {
+      counter-reset: connect-list-counter;
+      li:before {
+        content: counter(connect-list-counter);
+        counter-increment: connect-list-counter;
+        display: block;
+        width: 20px;
+        flex: 0 0 20px;
+        text-align: center;
+        color: $ink-lightest;
+        font-weight: $bold;
+        margin-right: $space-small;
+      }
+    }
+    li {
+      border-bottom: 1px solid $card-border;
+      padding: $space-base 0;
+      display: flex;
+      align-items: center;
+      &:last-child {
+        border-bottom: 0;
+        padding-bottom: 0;
+      }
+    }
+    &.no-borders li {
+      border-bottom: 0;
+    }
+  }
+  div:last-child {
+    border-bottom: 0;
+  }
+}

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

@@ -0,0 +1,516 @@
+$dashboard-container: transparent;
+$dashboard-region: transparent;
+$dashboard-border-width: 1px;
+$dashboard-border-color: $sky;
+
+@mixin flexbox {
+	display: -webkit-box;
+	display: -webkit-flex;
+	display: -moz-flex;
+	display: -ms-flexbox;
+	display: flex;
+}
+
+@mixin flex-direction($value: row) {
+	@if $value == row-reverse {
+		-webkit-box-direction: reverse;
+		-webkit-box-orient: horizontal;
+	} @else if $value == column {
+		-webkit-box-direction: normal;
+		-webkit-box-orient: vertical;
+	} @else if $value == column-reverse {
+		-webkit-box-direction: reverse;
+		-webkit-box-orient: vertical;
+	} @else {
+		-webkit-box-direction: normal;
+		-webkit-box-orient: horizontal;
+	}
+	-webkit-flex-direction: $value;
+	-moz-flex-direction: $value;
+	-ms-flex-direction: $value;
+	flex-direction: $value;
+}
+
+@mixin flex-grow($int: 0) {
+	-webkit-box-flex: $int;
+	-webkit-flex-grow: $int;
+	-moz-flex-grow: $int;
+	-ms-flex-positive: $int;
+	flex-grow: $int;
+}
+
+@mixin flex-shrink($int: 1) {
+	-webkit-flex-shrink: $int;
+	-moz-flex-shrink: $int;
+	-ms-flex-negative: $int;
+	flex-shrink: $int;
+}
+
+@mixin flex-wrap($value: nowrap) {
+	// No Webkit Box fallback.
+	-webkit-flex-wrap: $value;
+	-moz-flex-wrap: $value;
+	@if $value == nowrap {
+		-ms-flex-wrap: none;
+	} @else {
+		-ms-flex-wrap: $value;
+	}
+	flex-wrap: $value;
+}
+
+.dashboard_container {
+  box-sizing: border-box;
+  @include flexbox;
+  @include flex-direction(row);
+  @include flex-grow(1);
+  @include flex-shrink(0);
+  @include flex-wrap(wrap);
+  margin: 0;
+  margin: 0;
+
+  &> div {
+    @include flexbox;
+    @include flex-grow(1);
+    @include flex-shrink(0);
+    align-items: stretch;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+
+    &> * {
+      @include flex-shrink(0);
+      width: 100%;
+    }
+  }
+
+  .expand {
+    @include flexbox;
+    justify-content: center;
+    height: 100%;
+  }
+
+  .dashboard_region {
+    @include flexbox;
+    @include flex-direction(column);
+    @include flex-wrap(nowrap);
+    @include flex-grow(1);
+    @include flex-shrink(0);
+    height: 100%;
+    margin: 0;
+
+    &> div {
+      @include flex-grow(1);
+      @include flex-shrink(0);
+      @include flexbox;
+      @include flex-direction(column);
+      align-items: stretch;
+      justify-content: center;
+      margin: 0;
+      padding: 0;
+			background: $dashboard-region;
+      width: 100%;
+
+      &> * {
+        @include flex-shrink(0);
+        // width: 100%;
+      }
+
+      iframe {
+        width: 100%;
+        border: 0;
+      }
+    }
+
+    .dashboard_flex_row {
+      clear: both;
+      float: none;
+      width: 100%;
+      @include flexbox;
+      @include flex-direction(row);
+      @include flex-grow(0);
+      @include flex-shrink(0);
+
+      &> div {
+        @include flexbox;
+        @include flex-grow(1);
+        @include flex-shrink(0);
+        align-items: stretch;
+        justify-content: center;
+        margin: 0;
+        padding: 0;
+
+        &> * {
+          @include flex-shrink(0);
+          width: 100%;
+        }
+      }
+
+      &.grid {
+        @include flex-wrap(wrap);
+      }
+    }
+
+    .dashboard_flex_column {
+      clear: both;
+      float: none;
+      width: 100%;
+      @include flexbox;
+      @include flex-direction(column);
+      @include flex-grow(1);
+      @include flex-shrink(0);
+
+      &> div {
+        @include flex-grow(1);
+        @include flex-shrink(0);
+        @include flexbox;
+        align-items: stretch;
+        justify-content: center;
+        margin: 0;
+        padding: 0;
+
+        &> * {
+          @include flex-shrink(0);
+          width: 100%;
+        }
+      }
+    }
+
+    &.flip {
+      @include flex-direction(column-reverse);
+    }
+  }
+
+  &.flip {
+    .dashboard_region {
+      @include flex-direction(column-reverse);
+    }
+  }
+  &.reverse {
+    @include flex-direction(row-reverse);
+  }
+
+	&.dashboard_bordered {
+		.dashboard_region {
+			& > div {
+        border-width: $dashboard-border-width;
+        border-bottom-width: 0;
+        border-color: $dashboard-border-color;
+        border-style: solid;
+
+        &.dashboard_flex_row {
+          border-width: 0;
+
+          & > div {
+            border-width: $dashboard-border-width;
+            border-right-width: 0;
+            border-bottom-width: 0;
+            border-color: $dashboard-border-color;
+            border-style: solid;
+
+            &:last-child {
+              border-right-width: $dashboard-border-width;
+            }
+          }
+        }
+
+        &:last-child {
+          border-bottom-width: $dashboard-border-width;
+
+          &.dashboard_flex_row {
+            border-bottom-width: $dashboard-border-width;
+          }
+          .dashboard_flex_column {
+            border-width: 0;
+          }
+        }
+      }
+      .dashboard_flex_column {
+        border-width: 0;
+
+        & > div {
+          border-width: 0;
+          border-bottom-width: $dashboard-border-width;
+          border-color: $dashboard-border-color;
+          border-style: solid;
+
+          &:last-child {
+            border-bottom-width: 0;
+          }
+        }
+      }
+		}
+	}
+  @for $i from 1 through 10 {
+     &.border-width-#{$i} {
+       .dashboard_region {
+          & > div {
+           border-width: #{$i}px;
+           border-bottom-width: 0;
+
+           &.dashboard_flex_row {
+             border-width: 0;
+
+             & > div {
+               border-width: #{$i}px;
+               border-right-width: 0;
+               border-bottom-width: 0;
+
+               &:last-child {
+                 border-right-width: #{$i}px;
+               }
+             }
+           }
+
+           &:last-child {
+             border-bottom-width: #{$i}px;
+
+             &.dashboard_flex_row {
+               border-bottom-width: #{$i}px;
+             }
+             .dashboard_flex_column {
+               border-width: 0;
+             }
+           }
+          }
+          .dashboard_flex_column {
+           border-width: 0;
+
+           & > div {
+             border-width: 0;
+             border-bottom-width: #{$i}px;
+
+             &:last-child {
+               border-bottom-width: 0;
+             }
+           }
+          }
+        }
+     }
+  }
+
+  &.kiosk {
+    height: 100vh;
+    width: 100vw;
+
+    .dashboard_flex_row {
+      flex-grow: 1;
+    }
+
+    .flex-no-grow {
+      flex-grow: 0;
+    }
+    .flex-no-shrink {
+      flex-shrink: 0;
+    }
+  }
+
+  .border-right {
+    border-right-style: solid;
+    border-right-width: 1px;
+  }
+  .border-left {
+    border-right-style: solid;
+    border-left-width: 1px;
+  }
+  .border-top {
+    border-right-style: solid;
+    border-top-width: 1px;
+  }
+  .border-bottom {
+    border-right-style: solid;
+    border-bottom-width: 1px;
+  }
+
+  .border-right-0 {
+    border-right-width: 0;
+  }
+  .border-left-0 {
+    border-left-width: 0;
+  }
+  .border-top-0 {
+    border-top-width: 0;
+  }
+  .border-bottom-0 {
+    border-bottom-width: 0;
+  }
+}
+
+@media (max-width: 575px) {
+  .dashboard_container {
+    .xs-flex-nowrap {
+      @include flex-wrap(nowrap);
+    }
+    .xs-flex-wrap {
+      @include flex-wrap(wrap);
+    }
+    .xs-text-center {
+      text-align: center;
+    }
+    .xs-text-left {
+      text-align: left;
+    }
+    .xs-text-right {
+      text-align: right;
+    }
+    .xs-border-right {
+      border-right-style: solid;
+      border-right-width: 1px;
+    }
+    .xs-border-left {
+      border-left-style: solid;
+      border-left-width: 1px;
+    }
+    .xs-border-top {
+      border-top-style: solid;
+      border-top-width: 1px;
+    }
+    .xs-border-bottom {
+      border-bottom-style: solid;
+      border-bottom-width: 1px;
+    }
+  }
+}
+
+@media (min-width: 576px) and (max-width: 768px) {
+  .dashboard_container {
+    .sm-flex-nowrap {
+      @include flex-wrap(nowrap);
+    }
+    .sm-flex-wrap {
+      @include flex-wrap(wrap);
+    }
+    .sm-text-center {
+      text-align: center;
+    }
+    .sm-text-left {
+      text-align: left;
+    }
+    .sm-text-right {
+      text-align: right;
+    }
+    .sm-border-right {
+      border-right-style: solid;
+      border-right-width: 1px;
+    }
+    .sm-border-left {
+      border-left-style: solid;
+      border-left-width: 1px;
+    }
+    .sm-border-top {
+      border-top-style: solid;
+      border-top-width: 1px;
+    }
+    .sm-border-bottom {
+      border-bottom-style: solid;
+      border-bottom-width: 1px;
+    }
+  }
+}
+
+@media (min-width: 769px) and (max-width: 992px) {
+  .dashboard_container {
+    .md-flex-nowrap {
+      @include flex-wrap(nowrap);
+    }
+    .md-flex-wrap {
+      @include flex-wrap(wrap);
+    }
+    .md-text-center {
+      text-align: center;
+    }
+    .md-text-left {
+      text-align: left;
+    }
+    .md-text-right {
+      text-align: right;
+    }
+    .md-border-right {
+      border-right-style: solid;
+      border-right-width: 1px;
+    }
+    .md-border-left {
+      border-left-style: solid;
+      border-left-width: 1px;
+    }
+    .md-border-top {
+      border-top-style: solid;
+      border-top-width: 1px;
+    }
+    .md-border-bottom {
+      border-bottom-style: solid;
+      border-bottom-width: 1px;
+    }
+  }
+}
+
+@media (min-width: 993px) and (max-width: 1200px) {
+  .dashboard_container {
+    .lg-flex-nowrap {
+      @include flex-wrap(nowrap);
+    }
+    .lg-flex-wrap {
+      @include flex-wrap(wrap);
+    }
+    .lg-text-center {
+      text-align: center;
+    }
+    .lg-text-left {
+      text-align: left;
+    }
+    .lg-text-right {
+      text-align: right;
+    }
+    .lg-border-right {
+      border-right-style: solid;
+      border-right-width: 1px;
+    }
+    .lg-border-left {
+      border-left-style: solid;
+      border-left-width: 1px;
+    }
+    .lg-border-top {
+      border-top-style: solid;
+      border-top-width: 1px;
+    }
+    .lg-border-bottom {
+      border-bottom-style: solid;
+      border-bottom-width: 1px;
+    }
+  }
+}
+
+@media (min-width: 1201px) {
+  .dashboard_container {
+    .xl-flex-nowrap {
+      @include flex-wrap(nowrap);
+    }
+    .xl-flex-wrap {
+      @include flex-wrap(wrap);
+    }
+    .xl-text-center {
+      text-align: center;
+    }
+    .xl-text-left {
+      text-align: left;
+    }
+    .xl-text-right {
+      text-align: right;
+    }
+    .xl-border-right {
+      border-right-style: solid;
+      border-right-width: 1px;
+    }
+    .xl-border-left {
+      border-left-style: solid;
+      border-left-width: 1px;
+    }
+    .xl-border-top {
+      border-top-style: solid;
+      border-top-width: 1px;
+    }
+    .xl-border-bottom {
+      border-bottom-style: solid;
+      border-bottom-width: 1px;
+    }
+  }
+}