nitro_sg 3.0.0 → 3.0.1

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

@@ -0,0 +1,38 @@
+//
+// Thumbnails
+// --------------------------------------------------
+
+
+// Mixin and adjust the regular image class
+.thumbnail {
+  display: block;
+  padding: $thumbnail-padding;
+  margin-bottom: $line-height-computed;
+  line-height: $line-height-base;
+  background-color: $thumbnail-bg;
+  border: 1px solid $thumbnail-border;
+  border-radius: $thumbnail-border-radius;
+  @include transition(border .2s ease-in-out);
+
+  > img,
+  a > img {
+    @include img-responsive;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  // [converter] extracted a&:hover, a&:focus, a&.active to a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active
+
+  // Image captions
+  .caption {
+    padding: $thumbnail-caption-padding;
+    color: $thumbnail-caption-color;
+  }
+}
+
+// Add a hover state for linked versions only
+a.thumbnail:hover,
+a.thumbnail:focus,
+a.thumbnail.active {
+  border-color: $link-color;
+}

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

@@ -0,0 +1,124 @@
+$zindex-tooltip:           1070 !default;
+
+
+
+//== Tooltips
+//
+//##
+
+//** Tooltip max width
+$tooltip-max-width:           200px !default;
+//** Tooltip text color
+$tooltip-color:               #fff !default;
+//** Tooltip background color
+$tooltip-bg:                  #000 !default;
+$tooltip-opacity:             .9 !default;
+
+//** Tooltip arrow width
+$tooltip-arrow-width:         5px !default;
+//** Tooltip arrow color
+$tooltip-arrow-color:         $tooltip-bg !default;
+
+
+
+//
+// Tooltips
+// --------------------------------------------------
+
+
+// Base class
+.tooltip {
+  position: absolute;
+  z-index: $zindex-tooltip;
+  display: block;
+  // Our parent element can be arbitrary since tooltips 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-small;
+
+  @include opacity(0);
+
+  &.in     { @include opacity($tooltip-opacity); }
+  &.top    { margin-top:  -3px; padding: $tooltip-arrow-width 0; }
+  &.right  { margin-left:  3px; padding: 0 $tooltip-arrow-width; }
+  &.bottom { margin-top:   3px; padding: $tooltip-arrow-width 0; }
+  &.left   { margin-left: -3px; padding: 0 $tooltip-arrow-width; }
+}
+
+// Wrapper for the tooltip content
+.tooltip-inner {
+  max-width: $tooltip-max-width;
+  padding: 3px 8px;
+  color: $tooltip-color;
+  text-align: center;
+  background-color: $tooltip-bg;
+  border-radius: $border-radius-base;
+}
+
+// Arrows
+.tooltip-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+// Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
+.tooltip {
+  &.top .tooltip-arrow {
+    bottom: 0;
+    left: 50%;
+    margin-left: -$tooltip-arrow-width;
+    border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
+    border-top-color: $tooltip-arrow-color;
+  }
+  &.top-left .tooltip-arrow {
+    bottom: 0;
+    right: $tooltip-arrow-width;
+    margin-bottom: -$tooltip-arrow-width;
+    border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
+    border-top-color: $tooltip-arrow-color;
+  }
+  &.top-right .tooltip-arrow {
+    bottom: 0;
+    left: $tooltip-arrow-width;
+    margin-bottom: -$tooltip-arrow-width;
+    border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
+    border-top-color: $tooltip-arrow-color;
+  }
+  &.right .tooltip-arrow {
+    top: 50%;
+    left: 0;
+    margin-top: -$tooltip-arrow-width;
+    border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
+    border-right-color: $tooltip-arrow-color;
+  }
+  &.left .tooltip-arrow {
+    top: 50%;
+    right: 0;
+    margin-top: -$tooltip-arrow-width;
+    border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
+    border-left-color: $tooltip-arrow-color;
+  }
+  &.bottom .tooltip-arrow {
+    top: 0;
+    left: 50%;
+    margin-left: -$tooltip-arrow-width;
+    border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
+    border-bottom-color: $tooltip-arrow-color;
+  }
+  &.bottom-left .tooltip-arrow {
+    top: 0;
+    right: $tooltip-arrow-width;
+    margin-top: -$tooltip-arrow-width;
+    border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
+    border-bottom-color: $tooltip-arrow-color;
+  }
+  &.bottom-right .tooltip-arrow {
+    top: 0;
+    left: $tooltip-arrow-width;
+    margin-top: -$tooltip-arrow-width;
+    border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
+    border-bottom-color: $tooltip-arrow-color;
+  }
+}

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

@@ -0,0 +1,176 @@
+// -----------
+// Typography
+// -----------
+
+// Use modular scale to make our type relitive http://www.modularscale.com/
+
+@mixin general-heading-styles ($size: 'large') {
+  line-height: 1.1;
+  color: $ink-light;
+  small, .small {
+    font-weight: normal;
+    line-height: 1;
+    color: $ink-lightest;
+  }
+  @if $size == 'large' {
+    small, .small {
+      font-size: 65%;
+    }
+  } @else {
+    small, .small {
+      font-size: 75%;
+    }
+  }
+}
+
+// General type should not include margin. However heading tags are acceptable.
+h1, h2, h3 {
+  margin-top: $line-height-computed;
+  margin-bottom: ($line-height-computed / 2);
+  &:first-of-type {
+    margin-top: ($line-height-computed / 3);
+  }
+}
+h4, h5, h6 {
+  margin-top: ($line-height-computed / 2);
+  margin-bottom: ($line-height-computed / 2);
+  &:first-of-type {
+    margin-top: ($line-height-computed / 3);
+  }
+}
+
+.text-display, h1, .h1 {
+  font-size: $font-jumbo;
+  font-weight: $regular;
+  @include general-heading-styles;
+  @include mobile-only {
+    font-size: ($font-jumbo - 2px);
+  }
+  &-bold {
+    font-weight: $bold;
+    font-size: $font-jumbo;
+    @include general-heading-styles;
+    @include mobile-only {
+      font-size: ($font-jumbo - 2px);
+    }
+  }
+}
+
+.text-headline, h2, .h2 {
+  font-size: $font-largest;
+  font-weight: $regular;
+  @include general-heading-styles;
+  @include mobile-only {
+    font-size: ($font-largest - 2px);
+  }
+  &-bold {
+    font-weight: $bold;
+    font-size: $font-largest;
+    @include general-heading-styles;
+    @include mobile-only {
+      font-size: ($font-largest - 2px);
+    }
+  }
+}
+
+.text-title, h3, .h3 {
+  font-size: $font-larger;
+  font-weight: $regular;
+  @include general-heading-styles;
+  @include mobile-only {
+    font-size: ($font-larger - 2px);
+  }
+  &-bold {
+    font-weight: $bold;
+    font-size: $font-larger;
+    @include general-heading-styles;
+    @include mobile-only {
+      font-size: ($font-larger - 2px);
+    }
+  }
+}
+
+.text-subheader, h4, .h4 {
+  font-size: $font-large;
+  font-weight: $regular;
+  @include general-heading-styles('small');
+  @include mobile-only {
+    font-size: ($font-large - 2px);
+  }
+  &-bold {
+    font-weight: $bold;
+    font-size: $font-large;
+    @include general-heading-styles('small');
+    @include mobile-only {
+      font-size: ($font-large - 2px);
+    }
+  }
+}
+
+.text-body, h5, .h5 {
+  font-size: $font-base;
+  font-weight: $regular;
+  @include general-heading-styles('small');
+  @include mobile-only {
+    font-size: $font-small;
+  }
+  &-bold {
+    font-weight: $bold;
+    font-size: $font-base;
+    @include general-heading-styles('small');
+    @include mobile-only {
+      font-size: $font-small;
+    }
+  }
+}
+
+.text-meta, h6, .h6 {
+  font-size: $font-small;
+  font-weight: $regular;
+  @include general-heading-styles('small');
+  @include mobile-only {
+    font-size: $font-smaller;
+  }
+  &-bold {
+    font-weight: $bold;
+    font-size: $font-small;
+    @include general-heading-styles('small');
+    @include mobile-only {
+      font-size: $font-smaller;
+    }
+  }
+}
+
+.text-caption {
+  font-size: $font-smaller;
+  font-weight: $regular;
+  @include general-heading-styles('small');
+  @include mobile-only {
+    font-size: $font-smallest;
+  }
+  &-bold {
+    font-weight: $bold;
+    font-size: $font-smaller;
+    @include general-heading-styles('small');
+    @include mobile-only {
+      font-size: $font-smallest;
+    }
+  }
+}
+
+.text-discalimer {
+  font-size: $font-smallest;
+  font-weight: $regular;
+  @include general-heading-styles('small');
+  @include mobile-only {
+    font-size: ($font-smallest - 1px);
+  }
+  &-bold {
+    font-weight: $bold;
+    font-size: $font-smallest;
+    @include general-heading-styles('small');
+    @include mobile-only {
+      font-size: ($font-smallest - 1px);
+    }
+  }
+}

data/sass-mixins/nitro-ui/_value-stat.scss

@@ -0,0 +1,149 @@
+// This is a text pattern used to style up stats and values.
+
+
+.value-stat {
+  $selector: ".value-stat";
+  &-container {
+    line-height: $font-large;
+    height: $font-large;
+    position: relative;
+    font-size: 0;
+    display: block;
+  }
+  &-pre {
+    color: $ink;
+    font-size: $font-smaller;
+    position: relative;
+    top: -6px;
+    display: inline-block;
+    padding-right: 1px;
+    @include smooth-font-off;
+  }
+  &-value {
+    color: $ink;
+    font-size: $font-large;
+    font-weight: $bold;
+    display: inline-block;
+  }
+  &-post {
+    font-size: $font-smaller;
+    color: $ink-lightest;
+    display: inline-block;
+    padding-left: 1px;
+    @include smooth-font-off;
+  }
+  &-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;
+  }
+  &.mega {
+    $font-mega: 40px;
+    #{$selector}-container {
+      line-height: $font-mega;
+      height: $font-mega;
+    }
+    #{$selector}-value {
+      font-size: ($font-mega - 2px);
+    }
+    #{$selector}-pre {
+      font-size: $font-base + 4px;
+      top: -13px;
+    }
+    #{$selector}-post {
+      font-size: $font-base + 2px;
+    }
+  }
+  &.jumbo {
+    #{$selector}-container {
+      line-height: $font-jumbo;
+      height: $font-jumbo;
+    }
+    #{$selector}-value {
+      font-size: ($font-jumbo - 2px);
+    }
+    #{$selector}-pre {
+      font-size: $font-base + 2px;
+      top: -11px;
+    }
+    #{$selector}-post {
+      font-size: $font-base;
+    }
+  }
+  &.largest {
+    #{$selector}-value {
+      font-size: $font-largest;
+    }
+    #{$selector}-pre {
+      font-size: $font-base;
+      top: -9px;
+    }
+    #{$selector}-post {
+      font-size: $font-small;
+    }
+  }
+  &.large {
+    #{$selector}-value {
+      font-size: $font-larger;
+    }
+    #{$selector}-pre {
+      font-size: $font-base;
+      top: -9px;
+    }
+    #{$selector}-post {
+      font-size: $font-small;
+    }
+  }
+  &.small {
+    #{$selector}-value {
+      font-size: $font-base;
+    }
+    #{$selector}-pre {
+      font-size: $font-smaller;
+      top: -3px;
+    }
+    #{$selector}-post {
+      font-size: $font-smaller;
+      padding-left: 2px;
+    }
+  }
+  &.white {
+    #{$selector}-value, #{$selector}-pre {
+      color: $white;
+      @include smooth-font;
+    }
+    #{$selector}-post, #{$selector}-description, #{$selector}-subtext {
+      color: $white-opacity-5;
+    }
+  }
+  &.royal {
+    #{$selector}-value, #{$selector}-pre {
+      color: $power-royal;
+      @include smooth-font;
+    }
+  }
+  &.green {
+    #{$selector}-value, #{$selector}-pre {
+      color: $power-green;
+      @include smooth-font;
+    }
+  }
+  &.red {
+    #{$selector}-value, #{$selector}-pre {
+      color: $power-red;
+      @include smooth-font;
+    }
+  }
+  &.one-line {
+    #{$selector}-container {
+      display: inline-block;
+    }
+  }
+}