nitro_sg 3.0.0 → 3.0.1

data/sass-mixins/nitro-ui/buttons/_button-variables.scss

@@ -0,0 +1,51 @@
+// ---------
+// Bootstrap Variables
+// ---------
+
+$btn-font-size-base:         $component-font-size-base;
+$btn-font-size-xs:           ceil($component-font-size-base * 0.80);   // ~12px
+$btn-font-size-sm:           floor($component-font-size-base * 0.867); // ~13px
+$btn-font-size-lg:           ceil($component-font-size-base * 1.133);  // ~17px
+$btn-font-size-hg:           floor($component-font-size-base * 1.467); // ~22px
+
+$btn-line-height-base:       1.4;   // ~21px
+$btn-line-height-hg:         1.227; // ~27px
+$btn-line-height-lg:         1.471; // ~25px
+$btn-line-height-sm:         1.385; // ~16px
+$btn-line-height-xs:         1.083; // ~13px
+
+$btn-social-font-size-base:   floor($component-font-size-base * 0.867); // ~13px
+$btn-social-line-height-base: 1.077;  // ~14px
+
+$btn-font-weight:            normal;
+
+$btn-default-color:          $inverse;
+$btn-default-bg:             $gray-light;
+$btn-hover-bg:               mix($gray-light, white, 80%);
+$btn-active-bg:              mix($gray-light, black, 85%);
+
+$btn-primary-hover-bg:       mix($brand-secondary, white, 80%);
+$btn-primary-active-bg:      mix($brand-secondary, black, 85%);
+
+$btn-info-hover-bg:          mix($brand-info, white, 80%);
+$btn-info-active-bg:         mix($brand-info, black, 85%);
+
+$btn-success-hover-bg:       mix($brand-success, white, 80%);
+$btn-success-active-bg:      mix($brand-success, black, 85%);
+
+$btn-danger-hover-bg:        mix($brand-danger, white, 80%);
+$btn-danger-active-bg:       mix($brand-danger, black, 85%);
+
+$btn-warning-hover-bg:       overlay($brand-warning, darken(white, 37.5%));
+$btn-warning-active-bg:      mix($brand-warning, black, 85%);
+
+$btn-inverse-hover-bg:       overlay($brand-primary, darken(white, 37.5%));
+$btn-inverse-active-bg:      mix($brand-primary, black, 85%);
+
+$btn-link-disabled-color:    $gray-light;
+
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius-base:         $border-radius-base !default;
+$btn-border-radius-large:        $border-radius-large !default;
+$btn-border-radius-small:        $border-radius-small !default;

data/sass-mixins/nitro-ui/buttons/_choice-buttons.scss

@@ -0,0 +1,9 @@
+@mixin choice-button-colors($colors-list) {
+  @each $name, $color in $colors-list {
+    &-#{$name} {
+      @include ghost-button($color);
+      border-color: $border-color;
+      background: $white;
+    }
+  }
+}

data/sass-mixins/nitro-ui/buttons/_circle-buttons.scss

@@ -0,0 +1,30 @@
+
+
+
+.circlebutton{
+  text-align: center !important;
+  border: none !important;
+  border-radius: 100% !important;
+  border: none;
+  appearance: none;
+
+}
+
+
+$circleButtonSizes:
+"md" 48px 16px,
+"lg" 56px 20px;
+
+@mixin config-sizes($prefix){
+  @each $size in $circleButtonSizes {
+    .#{$prefix}-#{nth($size,1)} {
+      text-align: center;
+      border-radius: 100%;
+      height: #{nth($size,2)} !important;
+      width: #{nth($size,2)}!important;
+      font-size: #{nth($size,3)} !important;
+    }
+  }
+}
+
+@include config-sizes("circlebutton");

data/sass-mixins/nitro-ui/buttons/_close.scss

@@ -0,0 +1,45 @@
+//== Close
+//
+//##
+
+$close-font-weight:           bold !default;
+$close-color:                 #000 !default;
+$close-text-shadow:           0 1px 0 #fff !default;
+
+
+//
+// Close icons
+// --------------------------------------------------
+
+
+.close {
+  float: right;
+  font-size: ($font-size-base * 1.5);
+  font-weight: $close-font-weight;
+  line-height: 1;
+  color: $close-color;
+  text-shadow: $close-text-shadow;
+  @include opacity(.2);
+
+  &:hover,
+  &:focus {
+    color: $close-color;
+    text-decoration: none;
+    cursor: pointer;
+    @include opacity(.5);
+  }
+
+  // [converter] extracted button& to button.close
+}
+
+// Additional properties for button version
+// iOS requires the button element instead of an anchor tag.
+// If you want the anchor version, it requires `href="#"`.
+// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+button.close {
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  -webkit-appearance: none;
+}

data/sass-mixins/nitro-ui/buttons/_dropdowns.scss

@@ -0,0 +1,270 @@
+//== Dropdowns
+//
+//## Dropdown menu container and contents.
+
+//** Background for the dropdown menu.
+$dropdown-bg:                    #fff !default;
+//** Dropdown menu `border-color`.
+$dropdown-border:                rgba(0,0,0,.15) !default;
+//** Dropdown menu `border-color` **for IE8**.
+$dropdown-fallback-border:       #ccc !default;
+//** Divider color for between dropdown items.
+$dropdown-divider-bg:            #e5e5e5 !default;
+
+//** Dropdown link text color.
+$dropdown-link-color:            $gray-7 !default;
+//** Hover color for dropdown links.
+$dropdown-link-hover-color:      darken($gray-7, 5%) !default;
+//** Hover background for dropdown links.
+$dropdown-link-hover-bg:         #f5f5f5 !default;
+
+//** Active dropdown menu item text color.
+$dropdown-link-active-color:     $component-active-color !default;
+//** Active dropdown menu item background color.
+$dropdown-link-active-bg:        $component-active-bg !default;
+
+//** Disabled dropdown menu item background color.
+$dropdown-link-disabled-color:   $gray-light !default;
+
+//** Text color for headers within dropdown menus.
+$dropdown-header-color:          $gray-light !default;
+
+//** Deprecated `$dropdown-caret-color` as of v3.1.0
+$dropdown-caret-color:           #000 !default;
+
+
+
+
+
+
+//
+// Dropdown menus
+// --------------------------------------------------
+
+
+// Dropdown arrow/caret
+.caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-left: 2px;
+  vertical-align: middle;
+  border-top:   $caret-width-base dashed;
+  border-top:   $caret-width-base solid \9; // IE8
+  border-right: $caret-width-base solid transparent;
+  border-left:  $caret-width-base solid transparent;
+}
+
+// The dropdown wrapper (div)
+.dropup,
+.dropdown {
+  position: relative;
+}
+
+// Prevent the focus on the dropdown toggle when closing dropdowns
+.dropdown-toggle:focus {
+  outline: 0;
+}
+
+// The dropdown menu (ul)
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: z-index-for("header") - 1;
+  display: none; // none by default, but block on "open" of the menu
+  float: left;
+  min-width: 160px;
+  padding: 5px 0;
+  margin: 2px 0 0; // override default ul
+  list-style: none;
+  font-size: $font-size-base;
+  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
+  background-color: $dropdown-bg;
+  border: 1px solid $dropdown-fallback-border; // IE8 fallback
+  border: 1px solid $dropdown-border;
+  border-radius: $border-radius-base;
+  @include box-shadow(0 6px 12px rgba(0,0,0,.175));
+  background-clip: padding-box;
+
+  // Aligns the dropdown menu to right
+  //
+  // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]`
+  &.pull-right {
+    right: 0;
+    left: auto;
+  }
+
+  // Dividers (basically an hr) within the dropdown
+  .divider {
+    @include nav-divider($dropdown-divider-bg);
+  }
+
+  &.grouped {
+    > li {
+      > a {
+        font-size: 16px;
+        line-height: 1.25em;
+      }
+      > h4 {
+        font-size: 0.75em;
+        text-transform: uppercase;
+        padding: 3px 10px;
+        margin: 0;
+      }
+    }
+  }
+
+  // Links within the dropdown menu
+  > li > a {
+    display: block;
+    padding: 3px 20px;
+    clear: both;
+    font-weight: normal;
+    line-height: $line-height-base;
+    color: $dropdown-link-color;
+    white-space: nowrap; // prevent links from randomly breaking onto new lines
+  }
+}
+
+// Hover/Focus state
+.dropdown-menu > li > a {
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    color: $dropdown-link-hover-color;
+    background-color: $dropdown-link-hover-bg;
+  }
+}
+
+// Active state
+.dropdown-menu > .active > a {
+  &,
+  &:hover,
+  &:focus {
+    color: $dropdown-link-active-color;
+    text-decoration: none;
+    outline: 0;
+    background-color: $dropdown-link-active-bg;
+  }
+}
+
+// Disabled state
+//
+// Gray out text and ensure the hover/focus state remains gray
+
+.dropdown-menu > .disabled > a {
+  &,
+  &:hover,
+  &:focus {
+    color: $dropdown-link-disabled-color;
+  }
+
+  // Nuke hover/focus effects
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    background-color: transparent;
+    background-image: none; // Remove CSS gradient
+    @include reset-filter;
+    cursor: $cursor-disabled;
+  }
+}
+
+// Open state for the dropdown
+.open {
+  // Show the menu
+  > .dropdown-menu {
+    display: block;
+  }
+
+  // Remove the outline when :focus is triggered
+  > a {
+    outline: 0;
+  }
+}
+
+// Menu positioning
+//
+// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
+// menu with the parent.
+.dropdown-menu-right {
+  left: auto; // Reset the default from `.dropdown-menu`
+  right: 0;
+}
+// With v3, we enabled auto-flipping if you have a dropdown within a right
+// aligned nav component. To enable the undoing of that, we provide an override
+// to restore the default dropdown menu alignment.
+//
+// This is only for left-aligning a dropdown menu within a `.navbar-right` or
+// `.pull-right` nav component.
+.dropdown-menu-left {
+  left: 0;
+  right: auto;
+}
+
+// Dropdown section headers
+.dropdown-header {
+  display: block;
+  padding: 3px 20px;
+  font-size: $font-size-small;
+  line-height: $line-height-base;
+  color: $dropdown-header-color;
+  white-space: nowrap; // as with > li > a
+}
+
+// Backdrop to catch body clicks on mobile, etc.
+.dropdown-backdrop {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  z-index: (1000 - 10);
+}
+
+// Right aligned dropdowns
+.pull-right > .dropdown-menu {
+  right: 0;
+  left: auto;
+}
+
+// Allow for dropdowns to go bottom up (aka, dropup-menu)
+//
+// Just add .dropup after the standard .dropdown class and you're set, bro.
+// TODO: abstract this so that the navbar fixed styles are not placed here?
+
+.dropup,
+.navbar-fixed-bottom .dropdown {
+  // Reverse the caret
+  .caret {
+    border-top: 0;
+    border-bottom: $caret-width-base dashed;
+    border-bottom: $caret-width-base solid \9; // IE8
+    content: "";
+  }
+  // Different positioning for bottom up menu
+  .dropdown-menu {
+    top: auto;
+    bottom: 100%;
+    margin-bottom: 2px;
+  }
+}
+
+
+// Component alignment
+//
+// Reiterate per navbar.less and the modified component alignment there.
+
+@media (min-width: $grid-float-breakpoint) {
+  .navbar-right {
+    .dropdown-menu {
+      right: 0; left: auto;
+    }
+    // Necessary for overrides of the default right aligned menu.
+    // Will remove come v4 in all likelihood.
+    .dropdown-menu-left {
+      left: 0; right: auto;
+    }
+  }
+}

data/sass-mixins/nitro-ui/buttons/_ghost-buttons.scss

@@ -0,0 +1,58 @@
+@mixin ghost-button-hover($color, $active: false) {
+  text-decoration: none;
+  outline: 0;
+  @if $active {
+    background: tint($color, 10%);
+    @include text-color(tint($color, 10%), $more_contrast: true);
+    border-color: tint($color, 10%);
+  }
+  @else {
+    background: $color;
+    @include text-color($color, false, $more_contrast: true);
+    border-color: $color;
+  }
+}
+
+@mixin ghost-button-disabled($color) {
+  cursor: not-allowed;
+  opacity: $opacity-7;
+  background: none;
+  color: $color;
+  text-decoration: none;
+}
+
+@mixin ghost-button($color: white) {
+  @include button-base;
+  @include btn-styles;
+  background: none;
+  border-color: $color;
+  color: $black;
+  &:focus, &.focus {
+    @include ghost-button-hover($color);
+  }
+  &:hover {
+    @include ghost-button-hover($color);
+  }
+  &:active, &.active, .open > &.dropdown-toggle {
+    @include ghost-button-hover($color);
+    &:hover, &:focus, &.focus {
+      @include btn-hover($color);
+    }
+  }
+  &:active, &.active, .open > &.dropdown-toggle {
+    background-image: none;
+  }
+  &.disabled, &[disabled], fieldset[disabled] & {
+    &, &:hover, &:focus, &.focus, &:active, &.active {
+      @include ghost-button-disabled($color);
+    }
+  }
+}
+
+@mixin ghost-button-colors($colors-list) {
+  @each $name, $color in $colors-list {
+    &-#{$name} {
+      @include ghost-button($color);
+    }
+  }
+}