fix(scss): scss config vars, missing imports and hotfixes (#76)

* chore(.gitignore): be more specific about ignored files

* refactor(global-scss-vars): new vars for scss config

* fix(scss): all _css--* files @import reset now

* fix(SCSS): fix import type for css--reset

* fix(styles.scss): set reset to true by default

* fix(scss-global-vars): change conditionals

- if var does not exist, then output CSS
- OR if var equals true, then output CSS
- User must set var equal to false to prevent output CSS

* fix(reset.scss): change conditional

- always ouputs CSS from one of the reset mixins when var does not exist
- if var equals false, then add reset CSS to each class selector
- if var equals true, then output reset CSS once at top and no where
  else

* fix(copy-button): add inline svg for icon

* chore(button): move import reset to last

* fix(file-uploader): fixes for importing by itself

- imports loading component
- fix styles for filename nodes

* fix(checkbox): add misssing form import

* fix(radio): add missing form import

* fix(toggle): add missing form import

* fix(search): center icons in buttons

* fix(inline-select): use inline svg

* fix(link): add missing import helper-mixins

* fix(number-input): add missing imports

* fix(code-snippet): add missing import

* fix(card): make scrollbars invisible

* style(mixins): remove space between first and 2nd line

* fix(modal): remove overflow-y: auto

* fix(inline-notification): add spacing between close button and text

* fix(tooltip): missing icons and fonts

* fix(iln): remove unneeded reset mixins

* fix(accordion): normalize icon size w/padding

* fix(progress-indicator): fix line spacing

* fix(toolbar): inline svg and new focus state

* fix(search): center icons in buttons

* fix(file-uploader): import css--typography

* fix(card): import css--typography

* fix(data-table): import css--typography

* fix(detail-page-header): import css--typography

* fix(dropdown): import css--typography

* fix(modal): import css--typography

* fix(module): import css--typography

* fix(notifications): import css--typography

* fix(accordion): import css--typography

* fix(breadcrumb): import css--typography

* fix(footer): import css--typography

* fix(components): import css--typography

- iln
- tabs
- tooltip
- unified-header

.gitignore

@@ -1,4 +1,3 @@
-
 # Hide package manager
 node_modules
 bower_components
@@ -28,13 +27,13 @@ tests/a11y-results
 tests/coverage
 
 # built files
-es
-umd
-scripts
-css
-scss
-html
-docs/js
+/es
+/umd
+/scripts
+/css/**
+/scss
+/html
+/docs/js
 
 # a11y testing
 .aat.yml

src/components/accordion/_accordion.scss

@@ -1,10 +1,11 @@
 @import '../../globals/scss/colors';
-@import '../../globals/scss/css--reset';
 @import '../../globals/scss/typography';
+@import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/import-once';
+@import '../../globals/scss/css--reset';
+@import '../../globals/scss/css--typography';
 
 @include exports('accordion') {
-
   .bx--accordion {
     @include reset;
     @include helvetica;
@@ -38,8 +39,8 @@
 
   .bx--accordion__arrow {
     transition: all $transition--base $bx--standard-easing;
-    height: .75rem;
-    width: .75rem;
+    height: 1.25rem;
+    width: 1.25rem;
     padding: .25rem .125rem .25rem .25rem;
     margin-left: .075rem;
     fill: $ui-05;

src/components/breadcrumb/_breadcrumb.scss

@@ -2,6 +2,7 @@
 @import '../../globals/scss/mixins';
 @import '../../globals/scss/typography';
 @import '../../globals/scss/import-once';
+@import '../../globals/scss/css--typography';
 @import '../link/link';
 
 @include exports('breadcrumb') {
@@ -42,8 +43,7 @@
     text-decoration: none;
     border-bottom: 1px solid transparent;
 
-    &:hover,
-    &:focus {
+    &:hover, &:focus {
       outline: none;
       color: $brand-01;
       border-bottom: 1px solid $brand-01;

src/components/button/_button.scss

@@ -1,9 +1,8 @@
 @import '../../globals/scss/colors';
 @import '../../globals/scss/typography';
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/import-once';
 @import 'mixins';
+@import '../../globals/scss/css--reset';
 
 @include exports('button') {
 

src/components/card/_card.scss

@@ -1,21 +1,17 @@
-//-----------------------------
-// Card
-//-----------------------------
-
 @import '../../globals/scss/colors';
 @import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/css--reset';
 @import '../../globals/scss/layout';
 @import '../../globals/scss/layer';
 @import '../../globals/scss/typography';
 @import '../../globals/scss/import-once';
 @import '../overflow-menu/overflow-menu';
+@import '../../globals/scss/css--reset';
+@import '../../globals/scss/css--typography';
 @import '../button/button';
 @import '../link/link';
 @import 'mixins';
 
 @include exports('card') {
-
   .bx--card {
     @include reset;
     @include helvetica;
@@ -85,17 +81,21 @@
     @include text-overflow(rem(180px));
     font-weight: 400;
     margin: 0;
+    line-height: 1.2;
   }
 
   .bx--about__title--link {
     @include font-size('12');
     @include text-overflow(rem(180px));
+    display: inline;
     font-weight: 400;
+    text-align: center;
   }
 
   .bx--about__title--additional-info {
     @include font-size('12');
     @include text-overflow(rem(180px));
+    display: inline;
     font-weight: 400;
     padding: 0;
     margin: 0;
@@ -117,7 +117,6 @@
     border: 1px solid $ui-04;
     border-radius: 100%;
 
-
     .bx--about__icon--img {
       width: rem(32px);
       height: rem(32px);
@@ -163,8 +162,7 @@
     background: none;
     border: none;
 
-    &:hover,
-    &:focus {
+    &:hover, &:focus {
       .bx--app-actions__button--icon {
         fill: $brand-01;
       }

src/components/checkbox/_checkbox.scss

@@ -1,12 +1,9 @@
-//-----------------------------
-// Checkbox
-//-----------------------------
-
 @import '../../globals/scss/colors';
 @import '../../globals/scss/typography';
-@import '../../globals/scss/css--reset';
 @import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/import-once';
+@import '../form/form';
+@import '../../globals/scss/css--reset';
 
 @include exports('checkbox') {
   .bx--form-item.bx--checkbox-wrapper {

src/components/code-snippet/_code-snippet.scss

@@ -1,7 +1,8 @@
 @import '../../globals/scss/colors';
-@import '../../globals/scss/css--reset';
 @import '../../globals/scss/typography';
 @import '../../globals/scss/import-once';
+@import '../../globals/scss/helper-mixins';
+@import '../../globals/scss/css--reset';
 @import 'mixins';
 
 @include exports('snippet') {

src/components/copy-button/_copy-button.scss

@@ -1,9 +1,9 @@
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/layer';
-@import '../../globals/scss/typography';
 @import '../../globals/scss/colors';
-@import '../../globals/scss/css--reset';
+@import '../../globals/scss/typography';
+@import '../../globals/scss/layer';
+@import '../../globals/scss/import-once';
 @import '../../globals/scss/helper-mixins';
+@import '../../globals/scss/css--reset';
 @import '../button/button';
 
 @include exports('copy-button') {

src/components/copy-button/copy-button.html

@@ -1,7 +1,7 @@
 <button data-copy-btn class="bx--btn bx--btn--primary bx--btn--copy bx--btn--sm">
   Copy button
-  <svg class="bx--btn__icon">
-    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--add--glyph"></use>
+  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+    <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
   </svg>
   <div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
 </button>

src/components/data-table/_data-table.scss

@@ -1,6 +1,7 @@
 @import '../../globals/scss/colors';
 @import '../../globals/scss/vars';
 @import '../../globals/scss/layout';
+@import '../../globals/scss/css--typography';
 @import '../checkbox/checkbox';
 @import '../../globals/scss/import-once';
 @import '../../components/overflow-menu/overflow-menu';
@@ -67,8 +68,7 @@
       width: auto;
       border: 2px solid $ui-04;
 
-      tr td:first-child,
-      tr th:first-child {
+      tr td:first-child, tr th:first-child {
         padding-left: 1.5rem;
       }
     }
@@ -103,8 +103,7 @@
 
   // zebra stripes
   .bx--table-body {
-    > .bx--parent-row,
-    > .bx--parent-row + .bx--expandable-row {
+    > .bx--parent-row, > .bx--parent-row + .bx--expandable-row {
       background-color: $ui-01;
 
       &--even {
@@ -116,14 +115,12 @@
   .bx--table-body .bx--table-row {
     border: 1px solid transparent;
 
-    &:first-child:hover,
-    &:first-child:focus {
+    &:first-child:hover, &:first-child:focus {
       border-left: 2px solid $brand-02;
       outline: 1px solid $brand-02;
     }
 
-    &:not(:first-child):hover,
-    &:not(:first-child):focus {
+    &:not(:first-child):hover, &:not(:first-child):focus {
       border-left: 2px solid $brand-02;
       outline: 1px solid $brand-02;
     }
@@ -167,9 +164,9 @@
     margin-left: rem(7px);
     margin-right: rem(2px);
 
-    @media all and (min--moz-device-pixel-ratio:0) and (min-resolution: 3e1dpcm) {
-        margin-top: 2px;
-      }
+    @media all and (min--moz-device-pixel-ratio: 0) and (min-resolution: 3e1dpcm) {
+      margin-top: 2px;
+    }
   }
 
   .bx--table-expand[data-previous-value='collapsed'] .bx--table-expand__svg {
@@ -205,7 +202,7 @@
       display: inline-flex;
       margin: 0;
 
-      @media all and (min--moz-device-pixel-ratio:0) and (min-resolution: 3e1dpcm) {
+      @media all and (min--moz-device-pixel-ratio: 0) and (min-resolution: 3e1dpcm) {
         margin-top: 2px;
       }
     }

src/components/detail-page-header/_detail-page-header.scss

@@ -1,11 +1,12 @@
 @import '../../globals/scss/colors';
 @import '../../globals/scss/vars';
 @import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/css--reset';
 @import '../../globals/scss/layout';
 @import '../../globals/scss/layer';
 @import '../../globals/scss/typography';
 @import '../../globals/scss/import-once';
+@import '../../globals/scss/css--reset';
+@import '../../globals/scss/css--typography';
 @import '../tabs/tabs';
 @import '../overflow-menu/overflow-menu';
 @import '../breadcrumb/breadcrumb';
@@ -45,8 +46,8 @@
   .bx--detail-page-header .bx--breadcrumb {
     display: none;
     transition: opacity $transition--base $bx--standard-easing $transition-time / 2,
-    visibility $transition--base $bx--standard-easing $transition-time / 2,
-    transform $transition--base $bx--standard-easing 0s;
+      visibility $transition--base $bx--standard-easing $transition-time / 2,
+      transform $transition--base $bx--standard-easing 0s;
     will-change: opacity, visibility, transform;
 
     @include breakpoint(bp--sm--major) {
@@ -136,7 +137,7 @@
     display: flex;
     align-items: flex-start;
     transition: top $transition--base $bx--standard-easing 0s,
-    transform $transition--base $bx--standard-easing 0s;
+      transform $transition--base $bx--standard-easing 0s;
     will-change: transform, top;
 
     @include breakpoint(bp--sm--major) {
@@ -148,7 +149,7 @@
 
   .bx--detail-page-header .bx--tabs {
     transition: opacity $transition--base $bx--standard-easing $transition-time / 2,
-    visibility $transition--base $bx--standard-easing $transition-time / 2;
+      visibility $transition--base $bx--standard-easing $transition-time / 2;
     will-change: opacity, visibility, transform;
   }
 
@@ -173,8 +174,7 @@
 
   // Scroll
   .bx--detail-page-header--scroll {
-    .bx--breadcrumb,
-    .bx--tabs {
+    .bx--breadcrumb, .bx--tabs {
       transition-delay: 0s;
 
       @include breakpoint(bp--sm--major) {

src/components/dropdown/_dropdown.scss

@@ -4,11 +4,12 @@
 
 @import '../../globals/scss/colors';
 @import '../../globals/scss/vars';
-@import '../../globals/scss/css--reset';
 @import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/layer';
 @import '../../globals/scss/typography';
 @import '../../globals/scss/import-once';
+@import '../../globals/scss/css--reset';
+@import '../../globals/scss/css--typography';
 
 @include exports('dropdown') {
   .bx--dropdown {
@@ -76,8 +77,7 @@
     padding-left: 1rem;
     padding-right: 1.5rem;
 
-    &:hover,
-    &:focus {
+    &:hover, &:focus {
       background-color: $brand-01;
       color: $inverse-01;
       outline: 1px solid transparent;

src/components/file-uploader/_file-uploader.scss

@@ -1,17 +1,14 @@
-//-----------------------------
-// File Uploader
-//-----------------------------
-
 @import '../../globals/scss/colors';
 @import '../../globals/scss/typography';
 @import '../../globals/scss/css--reset';
 @import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/import-once';
+@import '../../globals/scss/css--typography';
 @import '../button/button';
 @import '../form/form';
+@import '../loading/loading';
 
 @include exports('file-uploader') {
-
   .bx--file {
     width: 100%;
   }
@@ -58,20 +55,18 @@
   .bx--file-filename {
     @include font-size('12');
     @include text-overflow(100%);
+    display: inline-flex;
+    align-items: center;
     color: $text-01;
     margin-right: 1rem;
+    height: 1.875rem;
   }
 
-
   .bx--file__state-container {
     display: flex;
     align-items: center;
-  }
 
-  .bx--file__state-container {
     .bx--loading {
-      // width: 2rem;
-      // height: 2rem;
       width: 1.125rem;
       height: 1.125rem;
       margin-right: -7px;
@@ -82,8 +77,7 @@
     }
   }
 
-  .bx--file__state-container .bx--file-close,
-  .bx--file__state-container .bx--file-complete {
+  .bx--file__state-container .bx--file-close, .bx--file__state-container .bx--file-complete {
     width: 1rem;
     height: 1rem;
     fill: $text-01;