refactor(): encapsulating styles for a few more components (#1439)

* fix(Checkbox): updating checkbox, checklist, radio, tiles to have consistent disabled styling * minor bux fixes plus some more demos * fix(Checkbox): fixing a display bug introduced with checkboxes and adding demo * typo * feat(ng-packagr)!: tree shakable imports (#1413) * fix(Picker): setting min-width on novo entity picker results (#1406) * chore(icons): Bump icons version (#1409) Co-authored-by: Michael Dill <michael.dill@bullhorn.com> * feat(picker): add maxlength parameter for characters on input (#1411) * add maxlength parameter * BH-77751: add default value for maxlength * Revert "BH-77751: add default value for maxlength" This reverts commit 3f6b851. --------- Co-authored-by: russi.sinha <russi.sinha@bullhorn.com> * feat(ng-packagr): initial rework for tree shakable imports * missed a tsconfig update * exporting individual modules for pipes, services, utils * fixing a test config issue * fixing some import issues in unit tests * feat(EntityColor): Add compliance manager entity color (#1415) * fix(Picker): setting min-width on novo entity picker results (#1406) * chore(icons): Bump icons version (#1409) Co-authored-by: Michael Dill <michael.dill@bullhorn.com> * feat(picker): add maxlength parameter for characters on input (#1411) * add maxlength parameter * BH-77751: add default value for maxlength * Revert "BH-77751: add default value for maxlength" This reverts commit 3f6b851. --------- Co-authored-by: russi.sinha <russi.sinha@bullhorn.com> * add entity color * update bullhorn-icons * update bullhorn-icons * dont update bullhorn-icons --------- Co-authored-by: Dan Voegelin <dvoegelin@bullhorn.com> Co-authored-by: Michael Dill <mdill@bullhorn.com> Co-authored-by: Michael Dill <michael.dill@bullhorn.com> Co-authored-by: Russi Sinha <87716104+s-russi@users.noreply.github.com> Co-authored-by: russi.sinha <russi.sinha@bullhorn.com> * feat(QueryBuilder): new address picker definition for query builder (#1407) * feat(QueryBuilder): new address picker definition for query builder * changing placeholder label * fix(Picker): setting min-width on novo entity picker results (#1406) * chore(icons): Bump icons version (#1409) Co-authored-by: Michael Dill <michael.dill@bullhorn.com> * fixing a few bugs * feat(picker): add maxlength parameter for characters on input (#1411) * add maxlength parameter * BH-77751: add default value for maxlength * Revert "BH-77751: add default value for maxlength" This reverts commit 3f6b851. --------- Co-authored-by: russi.sinha <russi.sinha@bullhorn.com> * switching parent element ref for overlay to fix width issue * re-focusing on the address input when selecting an option * fixing bug with multiple location conditions open at once --------- Co-authored-by: Michael Dill <mdill@bullhorn.com> Co-authored-by: Michael Dill <michael.dill@bullhorn.com> Co-authored-by: Russi Sinha <87716104+s-russi@users.noreply.github.com> Co-authored-by: russi.sinha <russi.sinha@bullhorn.com> * fixing import issue from rebase * fix(Chips): Prevent overwriting value before labels are resolved (#1416) * fix(Chips): Prevent overwriting value before labels are resolved When altering the value of a Chips picker, if some values have a label while others do not, the items with no label are no longer removed from the value * simplify handling --------- Co-authored-by: Alyssa Bryant <alyssa.bryant@bullhorn.com> * adding ng-package files to remaining elements * fixing some build paths * cleaning up some more imports --------- Co-authored-by: Michael Dill <mdill@bullhorn.com> Co-authored-by: Michael Dill <michael.dill@bullhorn.com> Co-authored-by: Russi Sinha <87716104+s-russi@users.noreply.github.com> Co-authored-by: russi.sinha <russi.sinha@bullhorn.com> Co-authored-by: Zachary Jorn <zachary.jorn@bullhorn.com> Co-authored-by: Trent Hibbard <trent.hibbard@bullhorn.com> Co-authored-by: Alyssa Bryant <alyssa.bryant@bullhorn.com> * refactor(dragula): deprecating dragula directive and service (#1420) * refactor(dragula): deprecating dragula directive and service * feat()!: breaking change * Breaking: change * breaking(): adding breaking change release rule to semantic-release config * refactor(): moving some extended third party libs out to addons folder * splitting out form demo page into form and dynamic form * fixing remote data table demo * adding new addons package to main novo-elements package * refactor(date-fns)!: updating date-fns to v2 (#1421) * fix(Picker): setting min-width on novo entity picker results (#1406) * chore(icons): Bump icons version (#1409) Co-authored-by: Michael Dill <michael.dill@bullhorn.com> * feat(picker): add maxlength parameter for characters on input (#1411) * add maxlength parameter * BH-77751: add default value for maxlength * Revert "BH-77751: add default value for maxlength" This reverts commit 3f6b851. --------- Co-authored-by: russi.sinha <russi.sinha@bullhorn.com> * feat(ng-packagr): initial rework for tree shakable imports * missed a tsconfig update * exporting individual modules for pipes, services, utils * fixing a test config issue * fixing some import issues in unit tests * feat(EntityColor): Add compliance manager entity color (#1415) * fix(Picker): setting min-width on novo entity picker results (#1406) * chore(icons): Bump icons version (#1409) Co-authored-by: Michael Dill <michael.dill@bullhorn.com> * feat(picker): add maxlength parameter for characters on input (#1411) * add maxlength parameter * BH-77751: add default value for maxlength * Revert "BH-77751: add default value for maxlength" This reverts commit 3f6b851. --------- Co-authored-by: russi.sinha <russi.sinha@bullhorn.com> * add entity color * update bullhorn-icons * update bullhorn-icons * dont update bullhorn-icons --------- Co-authored-by: Dan Voegelin <dvoegelin@bullhorn.com> Co-authored-by: Michael Dill <mdill@bullhorn.com> Co-authored-by: Michael Dill <michael.dill@bullhorn.com> Co-authored-by: Russi Sinha <87716104+s-russi@users.noreply.github.com> Co-authored-by: russi.sinha <russi.sinha@bullhorn.com> * feat(QueryBuilder): new address picker definition for query builder (#1407) * feat(QueryBuilder): new address picker definition for query builder * changing placeholder label * fix(Picker): setting min-width on novo entity picker results (#1406) * chore(icons): Bump icons version (#1409) Co-authored-by: Michael Dill <michael.dill@bullhorn.com> * fixing a few bugs * feat(picker): add maxlength parameter for characters on input (#1411) * add maxlength parameter * BH-77751: add default value for maxlength * Revert "BH-77751: add default value for maxlength" This reverts commit 3f6b851. --------- Co-authored-by: russi.sinha <russi.sinha@bullhorn.com> * switching parent element ref for overlay to fix width issue * re-focusing on the address input when selecting an option * fixing bug with multiple location conditions open at once --------- Co-authored-by: Michael Dill <mdill@bullhorn.com> Co-authored-by: Michael Dill <michael.dill@bullhorn.com> Co-authored-by: Russi Sinha <87716104+s-russi@users.noreply.github.com> Co-authored-by: russi.sinha <russi.sinha@bullhorn.com> * fixing import issue from rebase * fix(Chips): Prevent overwriting value before labels are resolved (#1416) * fix(Chips): Prevent overwriting value before labels are resolved When altering the value of a Chips picker, if some values have a label while others do not, the items with no label are no longer removed from the value * simplify handling --------- Co-authored-by: Alyssa Bryant <alyssa.bryant@bullhorn.com> * adding ng-package files to remaining elements * fixing some build paths * cleaning up some more imports * refactor(date-fns)!: updating date-fns to v2 * fixing import * fixing build error * removing some unused imports --------- Co-authored-by: Michael Dill <mdill@bullhorn.com> Co-authored-by: Michael Dill <michael.dill@bullhorn.com> Co-authored-by: Russi Sinha <87716104+s-russi@users.noreply.github.com> Co-authored-by: russi.sinha <russi.sinha@bullhorn.com> Co-authored-by: Zachary Jorn <zachary.jorn@bullhorn.com> Co-authored-by: Trent Hibbard <trent.hibbard@bullhorn.com> Co-authored-by: Alyssa Bryant <alyssa.bryant@bullhorn.com> * refactor(): adding refactor release rule to semantic-release config * refactor(rxjs): updating rxjs to 7.8.1 (#1419) * fix(Picker): setting min-width on novo entity picker results (#1406) * chore(icons): Bump icons version (#1409) Co-authored-by: Michael Dill <michael.dill@bullhorn.com> * feat(picker): add maxlength parameter for characters on input (#1411) * add maxlength parameter * BH-77751: add default value for maxlength * Revert "BH-77751: add default value for maxlength" This reverts commit 3f6b851. --------- Co-authored-by: russi.sinha <russi.sinha@bullhorn.com> * feat(ng-packagr): initial rework for tree shakable imports * missed a tsconfig update * exporting individual modules for pipes, services, utils * fixing a test config issue * fixing some import issues in unit tests * feat(EntityColor): Add compliance manager entity color (#1415) * fix(Picker): setting min-width on novo entity picker results (#1406) * chore(icons): Bump icons version (#1409) Co-authored-by: Michael Dill <michael.dill@bullhorn.com> * feat(picker): add maxlength parameter for characters on input (#1411) * add maxlength parameter * BH-77751: add default value for maxlength * Revert "BH-77751: add default value for maxlength" This reverts commit 3f6b851. --------- Co-authored-by: russi.sinha <russi.sinha@bullhorn.com> * add entity color * update bullhorn-icons * update bullhorn-icons * dont update bullhorn-icons --------- Co-authored-by: Dan Voegelin <dvoegelin@bullhorn.com> Co-authored-by: Michael Dill <mdill@bullhorn.com> Co-authored-by: Michael Dill <michael.dill@bullhorn.com> Co-authored-by: Russi Sinha <87716104+s-russi@users.noreply.github.com> Co-authored-by: russi.sinha <russi.sinha@bullhorn.com> * feat(QueryBuilder): new address picker definition for query builder (#1407) * feat(QueryBuilder): new address picker definition for query builder * changing placeholder label * fix(Picker): setting min-width on novo entity picker results (#1406) * chore(icons): Bump icons version (#1409) Co-authored-by: Michael Dill <michael.dill@bullhorn.com> * fixing a few bugs * feat(picker): add maxlength parameter for characters on input (#1411) * add maxlength parameter * BH-77751: add default value for maxlength * Revert "BH-77751: add default value for maxlength" This reverts commit 3f6b851. --------- Co-authored-by: russi.sinha <russi.sinha@bullhorn.com> * switching parent element ref for overlay to fix width issue * re-focusing on the address input when selecting an option * fixing bug with multiple location conditions open at once --------- Co-authored-by: Michael Dill <mdill@bullhorn.com> Co-authored-by: Michael Dill <michael.dill@bullhorn.com> Co-authored-by: Russi Sinha <87716104+s-russi@users.noreply.github.com> Co-authored-by: russi.sinha <russi.sinha@bullhorn.com> * fixing import issue from rebase * fix(Chips): Prevent overwriting value before labels are resolved (#1416) * fix(Chips): Prevent overwriting value before labels are resolved When altering the value of a Chips picker, if some values have a label while others do not, the items with no label are no longer removed from the value * simplify handling --------- Co-authored-by: Alyssa Bryant <alyssa.bryant@bullhorn.com> * adding ng-package files to remaining elements * fixing some build paths * cleaning up some more imports * build(rxjs): updating rxjs to 7.8.1 * updated data table refresh subscription to match new typing * updating project package.json --------- Co-authored-by: Michael Dill <mdill@bullhorn.com> Co-authored-by: Michael Dill <michael.dill@bullhorn.com> Co-authored-by: Russi Sinha <87716104+s-russi@users.noreply.github.com> Co-authored-by: russi.sinha <russi.sinha@bullhorn.com> Co-authored-by: Zachary Jorn <zachary.jorn@bullhorn.com> Co-authored-by: Trent Hibbard <trent.hibbard@bullhorn.com> Co-authored-by: Alyssa Bryant <alyssa.bryant@bullhorn.com> * removing unnecessary config property * removing unnecessary semicolon from scss file * reorganizing ace-editor and ckeditor examples * fix(): fixing style encapsulation for a few components * fixing some scss warnings * reverting header scss filename * reverting radio scss filename * refactor(): moving some extended third party libs out to addons folder (#1430) * refactor(): moving some extended third party libs out to addons folder * splitting out form demo page into form and dynamic form * fixing remote data table demo * adding new addons package to main novo-elements package * removing unnecessary semicolon from scss file * reorganizing ace-editor and ckeditor examples * adding style encapsulation to a few more components * adding style encapsulation to a few more components * feat(DataTable): making data tables emit scroll events through the cdk (#1431) * adding NovoDragulaService to FormExtras providers for FileInput * feat(Places): adding keyboard support to places component (#1433) * feat(Places): adding keyboard support to places component * giving query builder definition chips a max width and overflow ellipsis * rebase and fixing merge conflicts * adding style encapsulation to a few more components * adding style encapsulation to a few more components * adding style encapsulation to a few more components * adding style encapsulation to a few more components * adding style encapsulation to a few more components * refactor(): encapsulating styles for a few more components * adding style encapsulation to a few more components * adding style encapsulation to a few more components * fixing merge conflict resolution issue * increasing specificity of another item-content text color * fixing some form styles * setting encapsulation to none for picker component * setting encapsulation to none for form component * applying PickerResults styles globally due to components extending BasePickerResults directive needing them --------- Co-authored-by: Michael Dill <mdill@bullhorn.com> Co-authored-by: Michael Dill <michael.dill@bullhorn.com> Co-authored-by: Russi Sinha <87716104+s-russi@users.noreply.github.com> Co-authored-by: russi.sinha <russi.sinha@bullhorn.com> Co-authored-by: Zachary Jorn <zachary.jorn@bullhorn.com> Co-authored-by: Trent Hibbard <trent.hibbard@bullhorn.com> Co-authored-by: Alyssa Bryant <alyssa.bryant@bullhorn.com>
bullhorn · Jul 21, 2023 · 2afcae9 · 2afcae9
1 parent f37d8fb
commit 2afcae9
Show file tree

Hide file tree

Showing 56 changed files with 699 additions and 711 deletions.
diff --git a/projects/novo-elements/src/addons/ace-editor/AceEditor.scss b/projects/novo-elements/src/addons/ace-editor/AceEditor.scss
@@ -1,4 +1,4 @@
-novo-ace-editor {
+:host {
   display: block;
   width: 100%;
   min-height: 200px;

diff --git a/projects/novo-elements/src/addons/ace-editor/AceEditor.ts b/projects/novo-elements/src/addons/ace-editor/AceEditor.ts
@@ -21,6 +21,7 @@ const ACE_VALUE_ACCESSOR = {
 @Component({
   selector: 'novo-ace-editor',
   template: '',
+  styleUrls: ['./AceEditor.scss'],
   providers: [ACE_VALUE_ACCESSOR],
 })
 export class NovoAceEditor implements ControlValueAccessor, OnInit, OnDestroy {

diff --git a/projects/novo-elements/src/addons/ckeditor/CKEditor.scss b/projects/novo-elements/src/addons/ckeditor/CKEditor.scss
@@ -1,5 +1,8 @@
-novo-editor {
-  .cke {
+@import "../../styles/variables.scss";
+
+// novo-editor {
+:host {
+  ::ng-deep .cke {
     font: inherit !important;
     box-shadow: none;
     border-color: var(--background-muted);
@@ -36,11 +39,11 @@ novo-editor {
   }
 }
 
-.theme-dark {
-  .cke_button {
+:host-context(.theme-dark) {
+  ::ng-deep .cke_button {
     filter: invert(1);
   }
-  .cke_combo {
+  ::ng-deep .cke_combo {
     a.cke_combo_button {
       &:hover,
       &:active,

diff --git a/projects/novo-elements/src/addons/ckeditor/CKEditor.ts b/projects/novo-elements/src/addons/ckeditor/CKEditor.ts
@@ -25,6 +25,7 @@ declare global {
   selector: 'novo-editor',
   providers: [CKEDITOR_CONTROL_VALUE_ACCESSOR],
   template: '<textarea [name]="name" [id]="name" #host></textarea>',
+  styleUrls: ['./CKEditor.scss'],
 })
 export class NovoCKEditorElement implements OnDestroy, AfterViewInit, ControlValueAccessor {
   @Input()

diff --git a/projects/novo-elements/src/elements/category-dropdown/CategoryDropdown.scss b/projects/novo-elements/src/elements/category-dropdown/CategoryDropdown.scss
@@ -1,4 +1,6 @@
-novo-category-dropdown {
+@import "../../styles/variables.scss";
+
+:host {
   display: block;
   position: relative;
   button {

diff --git a/projects/novo-elements/src/elements/category-dropdown/CategoryDropdown.ts b/projects/novo-elements/src/elements/category-dropdown/CategoryDropdown.ts
@@ -49,6 +49,7 @@ import { Helpers, Key, OutsideClick } from 'novo-elements/utils';
       </footer>
     </div>
   `,
+  styleUrls: ['./CategoryDropdown.scss'],
   host: {
     '(keydown)': 'onKeyDown($event)',
     '[class.active]': 'active',

diff --git a/projects/novo-elements/src/elements/chips/Chip.scss b/projects/novo-elements/src/elements/chips/Chip.scss
@@ -41,15 +41,10 @@ $chip-spacing: (
   box-sizing: border-box;
   -webkit-tap-highlight-color: transparent;
   // Chips could be set on buttons so we need to reset the user agent styles.
-  border: none;
   -webkit-appearance: none;
   -moz-appearance: none;
-}
-
-.novo-chip {
   @include novo-body-text();
   background: var(--background-main);
-  box-sizing: border-box;
   border: 1px solid transparent;
   transition: all 200ms ease-in-out;
   display: inline-flex;
@@ -106,22 +101,6 @@ $chip-spacing: (
     }
   }
 
-  // &.novo-chip-with-trailing-icon.novo-chip-with-avatar,
-  // &.novo-chip-with-avatar {
-  //   padding-top: $novo-chip-avatar-vertical-padding;
-  //   padding-bottom: $novo-chip-avatar-vertical-padding;
-  // }
-
-  // &.novo-chip-with-trailing-icon.novo-chip-with-avatar {
-  //   padding-right: $novo-chip-remove-after-padding;
-  //   padding-left: $novo-chip-avatar-before-padding;
-  // }
-
-  // &.novo-chip-with-avatar {
-  //   padding-left: $novo-chip-avatar-before-padding;
-  //   padding-right: $novo-chip-horizontal-padding;
-  // }
-
   .novo-chip-avatar::not(novo-icon) {
     width: $novo-chip-avatar-size;
     height: $novo-chip-avatar-size;

diff --git a/projects/novo-elements/src/elements/chips/ChipList.ts b/projects/novo-elements/src/elements/chips/ChipList.ts
@@ -62,6 +62,7 @@ export class NovoChipListChange {
 @Component({
   selector: 'novo-chip-list',
   template: `<div class="novo-chip-list-wrapper"><ng-content></ng-content></div>`,
+  styleUrls: ['./ChipList.scss'],
   exportAs: 'novoChipList',
   host: {
     '[attr.tabindex]': 'disabled ? null : _tabIndex',

diff --git a/projects/novo-elements/src/elements/chips/Chips.scss b/projects/novo-elements/src/elements/chips/Chips.scss
@@ -1,10 +1,6 @@
-@import "./ChipList.scss";
 @import "../common/typography/text.mixins.scss";
 
-chips,
-novo-chips,
-entity-chips,
-novo-entity-chips {
+:host {
   width: 100%;
   display: flex;
   align-items: center;
@@ -13,7 +9,7 @@ novo-entity-chips {
   border-bottom: 1px solid lighten($dark, 45%);
   transition: all 200ms ease-in-out;
   position: relative;
-  padding: 5px 20px 5px 0;
+  padding: 2px 0;
   &.with-value {
     margin-bottom: 20px;
   }
@@ -47,15 +43,6 @@ novo-entity-chips {
     flex-flow: row wrap;
     gap: 0.4rem;
   }
-  novo-picker {
-    position: inherit;
-    > i {
-      display: none;
-    }
-    div.picker-results-container {
-      left: 0;
-    }
-  }
   label.clear-all {
     flex: 1 100%;
     position: absolute;
@@ -82,37 +69,34 @@ novo-entity-chips {
     //   bottom: 14px;
     // }
   }
-}
 
-chips,
-novo-chips,
-entity-chips,
-novo-entity-chips {
   & + i {
     position: absolute;
     right: 0;
     bottom: 7px;
   }
-  padding: 2px 0;
+  &.with-value {
+    margin-bottom: 0;
+  }
+
   novo-picker {
+    position: inherit;
     padding-bottom: 0;
-    > input {
+    > ::ng-deep input {
       border: none;
       border-bottom: none !important;
       &:disabled {
         border-bottom: none !important;
       }
     }
+    > ::ng-deep i {
+      display: none;
+    }
+    div.picker-results-container {
+      left: 0;
+    }
   }
-  &.with-value {
-    margin-bottom: 0;
-  }
-}
 
-chips,
-novo-chips,
-entity-chips,
-novo-entity-chips {
   picker-results {
     position: absolute;
     color: black;
@@ -212,71 +196,3 @@ novo-entity-chips {
 entity-chip-results {
   max-width: none !important;
 }
-
-novo-row-chips {
-  display: flex;
-  flex-flow: column;
-  gap: 0.8rem;
-
-  .novo-row-chips-columns {
-    display: flex;
-    align-items: flex-end;
-    margin-bottom: 1em;
-    .column-label {
-      @include novo-label-text();
-      display: flex;
-      flex: 1;
-      margin-right: 1em;
-      &:first-of-type {
-        flex: 0 0 275px;
-      }
-    }
-    .column-data {
-      display: flex;
-      align-items: center;
-      background: transparent !important;
-      border: none;
-      border-bottom: 1px dashed lighten($dark, 30%);
-      border-radius: 0;
-      outline: none;
-      height: 2em;
-      width: 100%;
-      margin: 0 1em 0 0;
-      &.editable {
-        border-bottom: none;
-        input {
-          background: none;
-          border: none;
-        }
-      }
-      &:first-of-type {
-        flex: 0 0 275px;
-      }
-      span {
-        color: inherit;
-        align-items: flex-start;
-        display: flex;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        -webkit-line-clamp: 2;
-        line-clamp: 2;
-        line-height: 1em;
-        max-height: 2em;
-        min-height: 1em;
-      }
-    }
-    i.bhi-delete-o {
-      color: $negative;
-    }
-  }
-  .novo-chip.novo-row-chip {
-    padding: 0;
-  }
-  .novo-row-chips-empty-message {
-    font-style: italic;
-    color: $grey;
-  }
-  i {
-    cursor: pointer;
-  }
-}
diff --git a/projects/novo-elements/src/elements/chips/Chips.ts b/projects/novo-elements/src/elements/chips/Chips.ts
@@ -59,6 +59,7 @@ const CHIPS_VALUE_ACCESSOR = {
       >{{ labels.clearAll }} <i class="bhi-times"></i
     ></label>
   `,
+  styleUrls: ['./Chips.scss'],
   host: {
     '[class.with-value]': 'items.length > 0',
     '[class.disabled]': 'disablePickerInput',

diff --git a/projects/novo-elements/src/elements/chips/RowChips.scss b/projects/novo-elements/src/elements/chips/RowChips.scss
@@ -0,0 +1,70 @@
+@import "../../styles/variables.scss";
+@import "../common/typography/text.mixins.scss";
+
+:host {
+  display: flex;
+  flex-flow: column;
+  gap: 0.8rem;
+
+  ::ng-deep .novo-row-chips-columns {
+    display: flex;
+    align-items: flex-end;
+    margin-bottom: 1em;
+    .column-label {
+      @include novo-label-text();
+      display: flex;
+      flex: 1;
+      margin-right: 1em;
+      &:first-of-type {
+        flex: 0 0 275px;
+      }
+    }
+    .column-data {
+      display: flex;
+      align-items: center;
+      background: transparent !important;
+      border: none;
+      border-bottom: 1px dashed lighten($dark, 30%);
+      border-radius: 0;
+      outline: none;
+      height: 2em;
+      width: 100%;
+      margin: 0 1em 0 0;
+      &.editable {
+        border-bottom: none;
+        input {
+          background: none;
+          border: none;
+        }
+      }
+      &:first-of-type {
+        flex: 0 0 275px;
+      }
+      span {
+        color: inherit;
+        align-items: flex-start;
+        display: flex;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        line-height: 1em;
+        max-height: 2em;
+        min-height: 1em;
+      }
+    }
+    i.bhi-delete-o {
+      color: $negative;
+    }
+  }
+  .novo-chip.novo-row-chip {
+    padding: 0;
+  }
+  .novo-row-chips-empty-message {
+    font-style: italic;
+    color: $grey;
+  }
+  i {
+    cursor: pointer;
+  }
+}
diff --git a/projects/novo-elements/src/elements/chips/RowChips.ts b/projects/novo-elements/src/elements/chips/RowChips.ts
@@ -101,6 +101,7 @@ export class NovoRowChipElement extends NovoChipElement {
       <span #preview></span>
     </div>
   `,
+  styleUrls: ['./RowChips.scss'],
 })
 export class NovoRowChipsElement extends NovoChipsElement {
   @Input()