nitro_sg 3.0.0 → 3.0.1

data/sass-mixins/nitro-ui/cards-panels/_collapsible-card.scss

@@ -0,0 +1,19 @@
+.collapsible-card {
+  flex-direction: row;
+  flex-wrap: wrap;
+  &-top-content {
+    flex: 1;
+  }
+  &-hidden {
+    width: 100%;
+    &-content {
+      border-top: 1px solid $sky;
+    }
+  }
+
+  .btn-card-toggle {
+    flex-basis: auto;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+}

data/sass-mixins/nitro-ui/cards-panels/_panel-collapse.scss

@@ -0,0 +1,34 @@
+// Collapsable panels (aka, accordion)
+//
+// Wrap a series of panels in `.panel-group` to turn them into an accordion with
+// the help of our collapse JavaScript plugin.
+
+.panel-group {
+  margin-bottom: $line-height-computed;
+
+  // Tighten up margin so it's only between panels
+  .panel {
+    margin-bottom: 0;
+    border-radius: $border-rad-light;
+
+    + .panel {
+      margin-top: 5px;
+    }
+  }
+
+  .panel-heading {
+    border-bottom: 0;
+
+    + .panel-collapse > .panel-body,
+    + .panel-collapse > .list-group {
+      border-top: 1px solid $border-color;
+    }
+  }
+
+  .panel-footer {
+    border-top: 0;
+    + .panel-collapse .panel-body {
+      border-bottom: 1px solid $border-color;
+    }
+  }
+}

data/sass-mixins/nitro-ui/cards-panels/_panel-list-groups.scss

@@ -0,0 +1,41 @@
+.panel {
+  > .list-group,
+  > .panel-collapse > .list-group {
+    margin-bottom: 0;
+
+    .list-group-item {
+      border-width: 1px 0;
+      border-radius: 0;
+    }
+
+    // Add border top radius for first one
+    &:first-child {
+      .list-group-item:first-child {
+        border-top: 0;
+        @include border-top-radius(($border-rad-light - 1));
+      }
+    }
+
+    // Add border bottom radius for last one
+    &:last-child {
+      .list-group-item:last-child {
+        border-bottom: 0;
+        @include border-bottom-radius(($border-rad-light - 1));
+      }
+    }
+  }
+  > .panel-heading + .panel-collapse > .list-group {
+    .list-group-item:first-child {
+      @include border-top-radius(0);
+    }
+  }
+}
+// Collapse space between when there's no additional content.
+.panel-heading + .list-group {
+  .list-group-item:first-child {
+    border-top-width: 0;
+  }
+}
+.list-group + .panel-footer {
+  border-top-width: 0;
+}

data/sass-mixins/nitro-ui/cards-panels/_panel-tables.scss

@@ -0,0 +1,111 @@
+// Tables in panels
+//
+// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
+// watch it go full width.
+
+.panel {
+  > .table,
+  > .table-responsive > .table,
+  > .panel-collapse > .table {
+    margin-bottom: 0;
+
+    caption {
+      padding-left: $space-large;
+      padding-right: $space-large;
+    }
+  }
+  // Add border top radius for first one
+  > .table:first-child,
+  > .table-responsive:first-child > .table:first-child {
+    @include border-top-radius(($border-rad-light - 1));
+
+    > thead:first-child,
+    > tbody:first-child {
+      > tr:first-child {
+        border-top-left-radius: ($border-rad-light - 1);
+        border-top-right-radius: ($border-rad-light - 1);
+
+        td:first-child,
+        th:first-child {
+          border-top-left-radius: ($border-rad-light - 1);
+        }
+        td:last-child,
+        th:last-child {
+          border-top-right-radius: ($border-rad-light - 1);
+        }
+      }
+    }
+  }
+  // Add border bottom radius for last one
+  > .table:last-child,
+  > .table-responsive:last-child > .table:last-child {
+    @include border-bottom-radius(($border-rad-light - 1));
+
+    > tbody:last-child,
+    > tfoot:last-child {
+      > tr:last-child {
+        border-bottom-left-radius: ($border-rad-light - 1);
+        border-bottom-right-radius: ($border-rad-light - 1);
+
+        td:first-child,
+        th:first-child {
+          border-bottom-left-radius: ($border-rad-light - 1);
+        }
+        td:last-child,
+        th:last-child {
+          border-bottom-right-radius: ($border-rad-light - 1);
+        }
+      }
+    }
+  }
+  > .panel-body + .table,
+  > .panel-body + .table-responsive,
+  > .table + .panel-body,
+  > .table-responsive + .panel-body {
+    border-top: 1px solid $border-color;
+  }
+  > .table > tbody:first-child > tr:first-child th,
+  > .table > tbody:first-child > tr:first-child td {
+    border-top: 0;
+  }
+  > .table-bordered,
+  > .table-responsive > .table-bordered {
+    border: 0;
+    > thead,
+    > tbody,
+    > tfoot {
+      > tr {
+        > th:first-child,
+        > td:first-child {
+          border-left: 0;
+        }
+        > th:last-child,
+        > td:last-child {
+          border-right: 0;
+        }
+      }
+    }
+    > thead,
+    > tbody {
+      > tr:first-child {
+        > td,
+        > th {
+          border-bottom: 0;
+        }
+      }
+    }
+    > tbody,
+    > tfoot {
+      > tr:last-child {
+        > td,
+        > th {
+          border-bottom: 0;
+        }
+      }
+    }
+  }
+  > .table-responsive {
+    border: 0;
+    margin-bottom: 0;
+  }
+}

data/sass-mixins/nitro-ui/cards-panels/_panels.scss

@@ -0,0 +1,120 @@
+
+// --------
+// Panels
+// --------
+
+$panel-bg:                    $white;
+$panel-body-padding:          15px;
+$panel-heading-padding:       10px 15px;
+$panel-footer-padding:        $panel-heading-padding;
+$panel-border-radius:         $border-radius-base;
+
+
+// Panels are becomming cards.
+// Style transition appropriately
+
+
+// Panels Mixins (color the panels)
+@mixin panel-variant($color) {
+  $border: shade($color, 10%);
+  border-color: $border;
+
+  & > .panel-heading {
+    @include text-color($color);
+    background-color: $color;
+    border-color: $border;
+
+    + .panel-collapse > .panel-body {
+      border-top-color: $border;
+    }
+    .badge {
+      background-color: shade($color, 20%);
+      @include text-color($color);
+    }
+  }
+  & > .panel-footer {
+    + .panel-collapse > .panel-body {
+      border-bottom-color: $border;
+    }
+  }
+}
+
+
+
+//
+// Panels
+// --------------------------------------------------
+
+
+// Base class
+.panel {
+  margin-bottom: $line-height-computed;
+  background-color: $white;
+  border: 1px solid transparent;
+  border-radius: $border-rad-light;
+  @include box-shadow(0 1px 1px rgba(0,0,0,.05));
+  &-body {
+    padding: $space-large;
+    @include clearfix;
+  }
+  &-heading {
+    padding: $space-base $space-large;
+    border-bottom: 1px solid transparent;
+    @include border-top-radius(($border-rad-light - 1));
+
+    > .dropdown .dropdown-toggle {
+      color: inherit;
+    }
+  }
+  &-title {
+    // Within heading, strip any `h*` tag of its default margins for spacing.
+    margin-top: 0;
+    margin-bottom: 0;
+    font-size: ceil(($font-base * 1.125));
+    color: inherit;
+
+    > a,
+    > small,
+    > .small,
+    > small > a,
+    > .small > a {
+      color: inherit;
+    }
+  }
+  &-footer {
+    padding: $space-base $space-large;
+    background-color: $sky-light;
+    border-top: 1px solid $border-color;
+    @include border-bottom-radius(($border-rad-light - 1));
+  }
+}
+
+
+
+@import "panel-list-groups";
+@import "panel-tables";
+@import "panel-collapse";
+
+
+
+
+
+// Contextual variations
+.panel-default {
+  @include panel-variant($white);
+}
+.panel-primary {
+  @include panel-variant($white);
+}
+.panel-success {
+  @include panel-variant($white);
+}
+.panel-info {
+  @include panel-variant($white);
+}
+.panel-warning {
+  @include panel-variant($white);
+}
+.panel-danger {
+  @include panel-variant($white);
+}

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

@@ -0,0 +1,18 @@
+// Cross Element Variables
+// @import "variables";
+// @import "mixins";
+
+// Form Elements
+@import "validation-states";
+@import "general-element-reset";
+@import "checkbox-radio";
+@import "checkbox-toggle";
+@import "static-form-text";
+@import "color-feedback";
+@import "help-block";
+@import "label";
+@import "dropdown";
+@import "horizontal-forms";
+@import "multi-input-group";
+@import "input-groups";
+@import "form-group";

data/sass-mixins/nitro-ui/forms/_checkbox-radio.scss

@@ -0,0 +1,154 @@
+// Checkboxes and radios
+//
+// Indent the labels to position radios/checkboxes as hanging controls.
+
+$label-offset: 27px;
+
+.radio, .checkbox, .form-group .radio, .form-group .checkbox, .form-group.radio, .form-group.checkbox {
+  position: relative;
+  display: block;
+  margin-top: 10px;
+  margin-bottom: 10px;
+
+  label {
+    min-height: $line-height-computed; // Ensure the input doesn't jump when there is no text
+    padding-left: $label-offset;
+    margin-bottom: 0;
+    font-weight: normal;
+    cursor: pointer;
+    font-size: $font-small;
+    text-transform: none;
+    color: $ink-light;
+    line-height: inherit;
+  }
+}
+.radio input[type="radio"],
+.radio-inline input[type="radio"],
+.checkbox input[type="checkbox"],
+.checkbox-inline input[type="checkbox"] {
+  position: absolute;
+  margin-left: -($label-offset);
+  margin-top: 2px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border: 1px solid $form-border-color;
+  cursor: pointer;
+  @include transition-property(all);
+  @include transition-duration(.2s);
+  @include transition-timing-function(cubic-bezier(.7, 0, .3, 1));
+  &:hover {
+    // transform: scale(1.1);
+  }
+}
+
+.radio input[type="radio"],
+.radio-inline input[type="radio"] {
+  border-radius: $border-rad-mega;
+  width: 17px;
+  height: 17px;
+  &:checked {
+    border-color: $power-royal;
+    background: $power-royal;
+    &:after {
+      content: " ";
+      background: $white;
+      width: 7px;
+      height: 7px;
+      display: block;
+      border-radius: $border-rad-mega;
+      left: 4px;
+      top: 4px;
+      position: absolute;
+    }
+  }
+}
+.checkbox input[type="checkbox"],
+.checkbox-inline input[type="checkbox"] {
+  border-radius: $border-rad-light;
+  background-image: linear-gradient(to bottom, $white 10%, $gray-1 100%);
+  &:checked {
+    background: $power-royal;
+    border-color: $power-royal;
+    ~ span {
+      color: $ink-light;
+      font-weight: $bold;
+    }
+    &:after {
+      content: "";
+      display: block;
+      width: 15px;
+      height: 11px;
+      background-image: image-url('pb-check.svg');
+      background-repeat: no-repeat;
+      position: absolute;
+      top: 2px;
+      @include center;
+    }
+  }
+}
+
+.radio + .radio,
+.checkbox + .checkbox {
+  margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
+}
+
+// Override for our custom columnar grouping of options.
+.form-group {
+  &.radio-checkbox-columns {
+    .checkbox,
+    .radio {
+      margin-top: -5px;
+    }
+  }
+}
+
+// Radios and checkboxes on same line
+.radio-inline,
+.checkbox-inline {
+  position: relative;
+  display: inline-block;
+  padding-left: 20px;
+  margin-bottom: 0;
+  vertical-align: middle;
+  font-weight: normal;
+  cursor: pointer;
+}
+.radio-inline + .radio-inline,
+.checkbox-inline + .checkbox-inline {
+  margin-top: 0;
+  margin-left: 10px; // space out consecutive inline controls
+}
+
+// Apply same disabled cursor tweak as for inputs
+// Some special care is needed because <label>s don't inherit their parent's `cursor`.
+//
+// Note: Neither radios nor checkboxes can be readonly.
+input[type="radio"],
+input[type="checkbox"] {
+  &[disabled],
+  &.disabled,
+  fieldset[disabled] & {
+    cursor: $cursor-disabled;
+  }
+}
+// These classes are used directly on <label>s
+.radio-inline,
+.checkbox-inline {
+  &.disabled,
+  fieldset[disabled] & {
+    cursor: $cursor-disabled;
+  }
+}
+// These classes are used on elements with <label> descendants
+.radio,
+.checkbox {
+  &.disabled,
+  fieldset[disabled] & {
+    label {
+      cursor: $cursor-disabled;
+    }
+  }
+}