nitro_sg 3.0.0 → 3.0.1

data/sass-mixins/nitro-ui/forms/_input-groups.scss

@@ -0,0 +1,169 @@
+//
+// Input groups
+// --------------------------------------------------
+
+// Base styles
+// -------------------------
+.input-group {
+  position: relative; // For dropdowns
+  display: table;
+  border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
+  width: 100%;
+
+  // Undo padding and float of grid classes
+  &[class*="col-"] {
+    float: none;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .form-control {
+    // Ensure that the input is always above the *appended* addon button for
+    // proper border colors.
+    position: relative;
+    z-index: 2;
+
+    // IE9 fubars the placeholder attribute in text inputs and the arrows on
+    // select elements in input groups. To fix it, we float the input. Details:
+    // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
+    float: left;
+
+    width: 100%;
+    margin-bottom: 0;
+  }
+}
+
+// Sizing options
+//
+// Remix the default form control sizing classes into new ones for easier
+// manipulation.
+
+.input-group-lg > .form-control,
+.input-group-lg > .input-group-addon,
+.input-group-lg > .multi-input-group-addon,
+.input-group-lg > .input-group-btn > .btn {
+  @extend .input-lg;
+}
+.input-group-sm > .form-control,
+.input-group-sm > .input-group-addon,
+.input-group-sm > .input-group-btn > .btn {
+  @extend .input-sm;
+}
+
+
+// Display as table-cell
+// -------------------------
+.input-group-addon,
+.input-group-btn,
+.input-group .form-control {
+  display: table-cell;
+
+  &:not(:first-child):not(:last-child) {
+    border-radius: 0;
+  }
+}
+// Addon and addon wrapper for buttons
+.input-group-addon,
+.input-group-btn {
+  width: 1%;
+  white-space: nowrap;
+  vertical-align: middle; // Match the inputs
+}
+
+// Text input groups
+// -------------------------
+.input-group-addon {
+  padding: $padding-base-vertical ($padding-base-horizontal/2);
+  font-size: $font-size-base;
+  font-weight: normal;
+  line-height: 1;
+  color: $input-color;
+  text-align: center;
+  background-color: $input-group-addon-bg;
+  border: 1px solid $input-group-addon-border-color;
+  border-radius: $border-radius-base;
+
+  // Sizing
+  &.input-sm {
+    padding: $padding-small-vertical $padding-small-horizontal;
+    font-size: $font-size-small;
+    border-radius: $border-radius-small;
+  }
+  &.input-lg {
+    padding: $padding-large-vertical $padding-large-horizontal;
+    font-size: $font-size-large;
+    border-radius: $border-radius-large;
+  }
+
+  // Nuke default margins from checkboxes and radios to vertically center within.
+  input[type="radio"],
+  input[type="checkbox"] {
+    margin-top: 0;
+  }
+}
+
+// Reset rounded corners
+.input-group .form-control:first-child,
+.input-group-addon:first-child,
+.input-group-btn:first-child > .btn,
+.input-group-btn:first-child > .btn-group > .btn,
+.input-group-btn:first-child > .dropdown-toggle,
+.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
+.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
+  @include border-right-radius(0);
+}
+.input-group-addon:first-child {
+  border-right: 0;
+}
+.input-group .form-control:last-child,
+.input-group-addon:last-child,
+.input-group-btn:last-child > .btn,
+.input-group-btn:last-child > .btn-group > .btn,
+.input-group-btn:last-child > .dropdown-toggle,
+.input-group-btn:first-child > .btn:not(:first-child),
+.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
+  @include border-left-radius(0);
+}
+.input-group-addon:last-child {
+  border-left: 0;
+}
+
+// Button input groups
+// -------------------------
+.input-group-btn {
+  position: relative;
+  // Jankily prevent input button groups from wrapping with `white-space` and
+  // `font-size` in combination with `inline-block` on buttons.
+  font-size: 0;
+  white-space: nowrap;
+
+  // Negative margin for spacing, position for bringing hovered/focused/actived
+  // element above the siblings.
+  > .btn {
+    position: relative;
+    + .btn {
+      margin-left: -1px;
+    }
+    // Bring the "active" button to the front
+    &:hover,
+    &:focus,
+    &:active {
+      z-index: 2;
+    }
+  }
+
+  // Negative margin to only have a 1px border between the two
+  &:first-child {
+    > .btn,
+    > .btn-group {
+      margin-right: -1px;
+    }
+  }
+  &:last-child {
+    > .btn,
+    > .btn-group {
+      z-index: 2;
+      margin-left: -1px;
+    }
+  }
+}

data/sass-mixins/nitro-ui/forms/_label.scss

@@ -0,0 +1,29 @@
+
+label, label.label {
+  display: inline-block;
+  max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
+  margin-bottom: 5px;
+  font-weight: $bold;
+}
+
+.form-group label, .input-group label, label.label {
+  text-transform: uppercase;
+  font-size: $font-smallest;
+  line-height: $font-smallest;
+  color: $form-label-color;
+  @include smooth-font;
+}
+.form-group.label-inside, .input-group.label-inside, .label-inside {
+  position: relative;
+  padding-top: 8px;
+  label {
+    position: absolute;
+    background: $body-bg;
+    margin: 0;
+    padding: 0 4px;
+    top: 4px;
+    left: 0;
+    margin-left: (($padding-base-horizontal/1.5) - 3px);
+    z-index: 3; // Temp fix for input groups
+  }
+}

data/sass-mixins/nitro-ui/forms/_multi-input-group.scss

@@ -0,0 +1,89 @@
+@mixin muiti-focus-fix-index {
+  &:focus {
+    position: relative;
+    z-index: 1;
+    & ~ label {
+      z-index: 1;
+    }
+  }
+}
+
+$selectors: (
+  '.btn',
+  'input[type="submit"]',
+  'input[type="reset"]',
+  'input[type="button"]',
+  'select',
+  'input[type="text"]',
+  'input[type="password"]',
+  'input[type="datetime"]',
+  'input[type="datetime-local"]',
+  'input[type="date"]',
+  'input[type="month"]',
+  'input[type="time"]',
+  'input[type="week"]',
+  'input[type="number"]',
+  'input[type="email"]',
+  'input[type="url"]',
+  'input[type="search"]',
+  'input[type="tel"]',
+  'input[type="color"]'
+);
+
+// Place labels after input if inside
+.multi-input-group {
+  display: flex;
+  align-items: stretch;
+  &-item {
+    display: flex;
+    width: auto;
+    flex-direction: column;
+    &.form-control {
+      display: flex;
+      width: auto;
+    }
+    .input-group-addon, &.input-group-addon {
+      &:not(.multi) {
+        width: auto;
+        display: block;
+        vertical-align: -webkit-baseline-middle;
+        padding-top: 9px;
+      }
+    }
+    // Everything but the last
+    &:not(:last-child)  {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      @each $class in $selectors {
+        #{$class} {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+          @include muiti-focus-fix-index;
+        }
+      }
+    }
+    // Everything but first
+    &:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      margin-left: -$input-border-size;
+      @each $class in $selectors {
+        #{$class} {
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        }
+      }
+    }
+  }
+  &.full {
+    width: 100%;
+    .multi-input-group-item {
+      flex-grow: 1;
+      flex-shrink: 1;
+      flex-basis: auto;
+    }
+    .auto, .input-group-addon.auto, .multi-input-group-item.auto {
+      width: auto;
+    }
+  }
+}

data/sass-mixins/nitro-ui/forms/_static-form-text.scss

@@ -0,0 +1,19 @@
+// Static form control text
+//
+// Apply class to a `p` element to make any string of text align with labels in
+// a horizontal form layout.
+
+.form-control-static {
+  // Size it appropriately next to real form controls
+  padding-top: ($padding-base-vertical + 1);
+  padding-bottom: ($padding-base-vertical + 1);
+  // Remove default margin from `p`
+  margin-bottom: 0;
+  min-height: ($line-height-computed + $font-size-base);
+
+  &.input-lg,
+  &.input-sm {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}

data/sass-mixins/nitro-ui/forms/_validation-states.scss

@@ -0,0 +1,78 @@
+// Form validation states
+//
+// Used in forms.less to generate the form validation CSS for warnings, errors,
+// and successes.
+
+@mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {
+  // Color the label and help text
+  .help-block,
+  .control-label,
+  .radio,
+  .checkbox,
+  .radio-inline,
+  .checkbox-inline,
+  &.radio label,
+  &.checkbox label,
+  &.radio-inline label,
+  &.checkbox-inline label  {
+    color: $text-color;
+  }
+  // Set the border and box shadow on specific inputs to match
+  .form-control {
+    border-color: $border-color;
+    // @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
+    color: $power-red;
+    @include style-placeholder {
+      color: $power-red;
+  	}
+    &:focus {
+      border-color: darken($border-color, 10%);
+      // $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);
+      // @include box-shadow($shadow);
+    }
+  }
+  // Set validation states also for addons
+  .input-group-addon, #input-dropdown-addon {
+    color: $text-color;
+    border-color: $border-color;
+    background-color: $background-color;
+  }
+
+  // Optional feedback icon
+  .form-control-feedback {
+    color: $text-color;
+  }
+}
+
+@mixin form-control-validation-corner($color: #555) {
+  &:before {
+    background: transparent;
+    border-top: 7px solid transparent;
+    border-left: 7px solid $color;
+    border-right: 7px solid transparent;
+    border-bottom: 7px solid $color;
+    content: " ";
+    display: block;
+    width: 7px;
+    height: 7px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    border-radius: 3px;
+  }
+}
+
+// Feedback states
+.has-success {
+  @include form-control-validation($state-success-text, $state-success-text, $state-success-bg);
+}
+.has-warning {
+  @include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);
+}
+.has-error {
+  @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
+  &-corner {
+    @include form-control-validation-corner($state-danger-text);
+    z-index: 1;
+  }
+}

data/sass-mixins/nitro-ui/layouts/_sidebar-layout.scss

@@ -0,0 +1,59 @@
+$md-col: 250px;
+
+.sidebar-layout {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  position: relative;
+  &.no-scroll .sidebar-layout-container{
+    flex: auto;
+  }
+  &-container {
+    display: flex;
+    flex: 1 0 auto;
+    flex-direction: row;
+    @each $name, $size in $grid-breakpoints {
+      @include media-max-width($size) {
+        &.collapse-#{$name} {
+          flex-direction: column;
+          .sidebar-layout-nav {
+            border-width: 0 0 1px 0;
+            flex-basis: auto;
+          }
+        }
+      }
+    }
+  }
+  &-content {
+    box-orient: vertical;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    &-container {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+  }
+  &-nav {
+    order: -1;
+    flex: 0 0 $md-col;
+    border-width: 0 1px 0 0;
+    border-style: solid;
+    z-index: 0;
+    &-item {
+      display: block;
+      padding: $space-small $space-smallest $space-small $space-base;
+      color: $ink-lighter;
+      &:hover {
+        background: $p-blue-opacity-6;
+        color: $white;
+      }
+      &.active {
+        background: $power-blue;
+        color: $white;
+      }
+    }
+
+  }
+}