From 15147dbfc406a6fdcd493b2b51c5e3d2c490763b Mon Sep 17 00:00:00 2001
From: Alison Joseph <alisonejoseph@gmail.com>
Date: Fri, 9 Aug 2019 10:55:32 -0500
Subject: [PATCH] fix: add component styles

---
 src/gatsby-theme-carbon/styles/_global.scss |  46 ++++++++
 src/styles/_overrides.scss                  | 116 ++++++++++++++++++++
 src/styles/index.scss                       |   1 +
 3 files changed, 163 insertions(+)
 create mode 100644 src/gatsby-theme-carbon/styles/_global.scss
 create mode 100644 src/styles/_overrides.scss

diff --git a/src/gatsby-theme-carbon/styles/_global.scss b/src/gatsby-theme-carbon/styles/_global.scss
new file mode 100644
index 00000000000..9d30e39d583
--- /dev/null
+++ b/src/gatsby-theme-carbon/styles/_global.scss
@@ -0,0 +1,46 @@
+//---------------------------------------
+// Carbon components
+//---------------------------------------
+@import '~carbon-components/scss/components/button/button';
+@import '~carbon-components/scss/components/copy-button/copy-button';
+@import '~carbon-components/scss/components/file-uploader/file-uploader';
+@import '~carbon-components/scss/components/checkbox/checkbox';
+@import '~carbon-components/scss/components/combo-box/combo-box';
+@import '~carbon-components/scss/components/radio-button/radio-button';
+@import '~carbon-components/scss/components/toggle/toggle';
+@import '~carbon-components/scss/components/search/search';
+@import '~carbon-components/scss/components/select/select';
+@import '~carbon-components/scss/components/text-input/text-input';
+@import '~carbon-components/scss/components/text-area/text-area';
+@import '~carbon-components/scss/components/number-input/number-input';
+@import '~carbon-components/scss/components/form/form';
+@import '~carbon-components/scss/components/link/link';
+@import '~carbon-components/scss/components/list-box/list-box';
+@import '~carbon-components/scss/components/list/list';
+@import '~carbon-components/scss/components/data-table/data-table';
+@import '~carbon-components/scss/components/structured-list/structured-list';
+@import '~carbon-components/scss/components/code-snippet/code-snippet';
+@import '~carbon-components/scss/components/overflow-menu/overflow-menu';
+@import '~carbon-components/scss/components/content-switcher/content-switcher';
+@import '~carbon-components/scss/components/date-picker/date-picker';
+@import '~carbon-components/scss/components/dropdown/dropdown';
+@import '~carbon-components/scss/components/loading/loading';
+@import '~carbon-components/scss/components/modal/modal';
+@import '~carbon-components/scss/components/multi-select/multi-select';
+@import '~carbon-components/scss/components/notification/inline-notification';
+@import '~carbon-components/scss/components/notification/toast-notification';
+@import '~carbon-components/scss/components/tooltip/tooltip';
+@import '~carbon-components/scss/components/tabs/tabs';
+@import '~carbon-components/scss/components/tag/tag';
+@import '~carbon-components/scss/components/pagination/pagination';
+@import '~carbon-components/scss/components/accordion/accordion';
+@import '~carbon-components/scss/components/progress-indicator/progress-indicator';
+@import '~carbon-components/scss/components/breadcrumb/breadcrumb';
+@import '~carbon-components/scss/components/toolbar/toolbar';
+@import '~carbon-components/scss/components/time-picker/time-picker';
+@import '~carbon-components/scss/components/slider/slider';
+@import '~carbon-components/scss/components/tile/tile';
+@import '~carbon-components/scss/components/skeleton/skeleton';
+@import '~carbon-components/scss/components/inline-loading/inline-loading';
+@import '~carbon-components/scss/components/pagination-nav/pagination-nav';
+@import '~carbon-components/scss/components/ui-shell/ui-shell';
diff --git a/src/styles/_overrides.scss b/src/styles/_overrides.scss
new file mode 100644
index 00000000000..0125e477bc6
--- /dev/null
+++ b/src/styles/_overrides.scss
@@ -0,0 +1,116 @@
+//---------------------------------------
+// Breadcrumb
+//---------------------------------------
+.page-content .bx--breadcrumb .bx--link {
+  font-size: 0.875rem;
+}
+
+//---------------------------------------
+// Link
+//---------------------------------------
+
+.component-example .bx--link {
+  font-size: 0.875rem;
+}
+
+//---------------------------------------
+// Button
+//---------------------------------------
+
+.component-example .button .bx--btn {
+  margin: $spacing-03;
+}
+
+//---------------------------------------
+// Notification
+//---------------------------------------
+
+.component-example__live.component-example__live--notification
+  .component-example__live--rendered
+  > div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.component-example .bx--inline-notification {
+  display: inline-flex;
+}
+
+//---------------------------------------
+// Loading
+//---------------------------------------
+
+.component-example .loading .bx--loading-overlay {
+  position: absolute;
+}
+
+//---------------------------------------
+// Date Picker
+//---------------------------------------
+
+// TODO
+
+//---------------------------------------
+// Form
+//---------------------------------------
+
+.component-example__live .bx--form-item,
+.component-example .bx--form-item {
+  margin-bottom: $spacing-07;
+}
+
+.component-example .bx--form-item.bx--checkbox-wrapper {
+  margin-bottom: $spacing-03;
+}
+
+//---------------------------------------
+// Tabs
+//---------------------------------------
+
+.component-example__live--tabs .bx--tabs__nav {
+  position: static;
+}
+
+.component-example__live .tabs .bx--tabs + div {
+  margin-top: $spacing-07;
+}
+
+//---------------------------------------
+// Tile
+//---------------------------------------
+
+.component-example__live--tile .bx--grid {
+  outline: 1px dashed #97c1ff;
+}
+
+.component-example__live--tile .bx--tile-container .bx--col {
+  background: none;
+  margin-bottom: $spacing-05;
+}
+
+//---------------------------------------
+// Date picker
+//---------------------------------------
+
+.component-example .flatpickr-calendar {
+  margin-left: -1rem;
+  margin-top: -1rem;
+}
+
+//---------------------------------------
+// Tooltip
+//---------------------------------------
+
+.component-example__live .bx--tooltip {
+  margin-left: -1rem;
+  margin-top: -0.5rem;
+}
+
+//---------------------------------------
+// Modal
+//---------------------------------------
+
+.component-example__live.component-example__live--modal .bx--modal {
+  z-index: 10000;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 3317f62c35c..479e872f623 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,7 @@
 
 @import 'images';
 @import 'homepage';
+@import 'overrides';
 
 @import 'src/components/CodeExample/code-example.scss';
 @import 'src/components/ColorBlock/color-block.scss';