@theseam/ui-common 0.4.0-beta.1 → 0.4.0-beta.3

package/framework/side-nav/side-nav-item/side-nav-item.component.scss

@@ -0,0 +1,185 @@
+@import '../styles/utilities';
+
+seam-side-nav-item {
+  display: block;
+  transition: 250ms ease-in-out background-color;
+
+  &.seam-side-nav-item--active {
+    background-color: $seam-side-nav-item-bg-color-active;
+
+    .active,
+    &:active,
+    .side-nav-item.active:hover {
+      background-color: $seam-side-nav-item-bg-color-active;
+    }
+
+    .side-nav-item {
+      &:hover {
+        background-color: $seam-side-nav-item-bg-color-hover;
+      }
+    }
+
+    .nav-link {
+      color: $seam-side-nav-item-color-active;
+    }
+  }
+
+  .badge {
+    vertical-align: middle;
+  }
+
+  &:not(.side-nav-item--icon) {
+    .side-nav-item--badge {
+      pointer-events: all;
+      margin-left: 5px;
+      margin-right: 3px;
+    }
+  }
+
+  .side-nav-item--icon {
+    position: relative;
+    width: 24px;
+    max-width: 24px;
+    min-width: 24px;
+    height: 24px;
+    max-height: 24px;
+    min-height: 24px;
+    text-align: center;
+
+    .side-nav-item--badge {
+      top: -4px;
+      right: -4px;
+      position: absolute;
+
+      .badge:empty {
+        display: block;
+        width: 8px;
+        height: 8px;
+        padding: 0;
+      }
+
+      &.side-nav-item--badge-no-icon {
+        top: 0px;
+        right: 0px;
+      }
+    }
+  }
+
+  .side-nav-item {
+    min-height: 45px;
+    transition: 250ms ease-in-out background-color;
+
+    &:hover {
+      background-color: $seam-side-nav-item-bg-color-hover;
+    }
+
+    &.active {
+      pointer-events: none;
+      cursor: default;
+    }
+  }
+
+  a.side-nav-item:not([href]):not([tabindex]) {
+    color: $seam-side-nav-item-disabled-color;
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
+  .nav-link {
+    color: $seam-side-nav-item-color;
+    padding-right: 2px;
+    &__compact {
+      padding-right: 0;
+      padding-left: 12px;
+    }
+    &:last-child {
+      padding-right: 8px;
+    }
+  }
+
+  .side-nav-btn {
+    font-weight: $font-weight-normal;
+    color: $seam-side-nav-item-color;
+    text-decoration: $link-decoration;
+
+    @include hover {
+      color: $seam-side-nav-item-bg-color-hover;
+      text-decoration: $link-hover-decoration;
+    }
+
+    &:focus,
+    &.focus {
+      text-decoration: $link-hover-decoration;
+      box-shadow: none;
+    }
+
+    &:disabled,
+    &.disabled {
+      color: $seam-side-nav-item-disabled-color;
+      pointer-events: none;
+    }
+  }
+
+  // Add the button focus like a link when navigating with keyboard.
+  .cdk-keyboard-focused {
+    // outline: -webkit-focus-ring-color auto 1px;
+    outline: 1px dotted;
+    outline: 5px auto -webkit-focus-ring-color;
+  }
+
+  .side-nav-item--toggle-btn-container {
+    transition: 250ms ease-in-out background-color;
+    padding: 0.5rem 1rem;
+  }
+  button.side-nav-item--toggle-btn-container {
+    &:hover {
+      background-color: $seam-side-nav-item-bg-color-hover;
+    }
+  }
+
+  .side-nav-item--toggle-btn {
+    color: $seam-side-nav-item-color-active;
+
+    .svg-inline--fa {
+      transition: 100ms ease-in-out transform;
+    }
+
+    &.side-nav-item--toggle-btn-expanded {
+      .svg-inline--fa {
+        transform: rotate(-90deg);
+      }
+    }
+  }
+
+  .side-nav--group {
+    will-change: height;
+    overflow: hidden;
+  }
+
+  @for $i from 1 through 9 {
+    .side-nav--group--level-#{$i} {
+      background-color: darken($seam-side-nav-bg-color, ($i * $seam-side-nav-group-bg-variation-amount));
+    }
+  }
+
+  .side-nav-item--divider {
+    display: block;
+    border-top: $seam-side-nav-divider-size solid $seam-side-nav-divider-color;
+    width: 100%;
+  }
+
+  .side-nav-item--title {
+    color: $seam-side-nav-title-color;
+    font-size: $seam-side-nav-title-font-size;
+    padding-left: $seam-side-nav-title-padding-left;
+  }
+
+  // without a set position, these labels can cause unnecessary scrollbars
+  .sr-only {
+    top: 0;
+    left: 0;
+  }
+}
+

package/framework/side-nav/side-nav-toggle/side-nav-toggle.component.scss

@@ -0,0 +1,32 @@
+@import '../styles/utilities';
+
+seam-side-nav-toggle {
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+
+  // &.side-nav-toggle--compact {
+  //   width: 50px;
+  // }
+  position: relative;
+  height: 45px;
+  width: 100%;
+
+  //
+  .side-nav-toggle--content {
+    flex: 1 1 0;
+  }
+
+  .side-nav-toggle--btn {
+    // flex: 0 0 auto;
+    // align-self: flex-end;
+    position: absolute;
+    top: 0;
+    right: 5px;
+    color: $seam-side-nav-toggle-btn-color;
+
+    seam-icon {
+      padding: 5px;
+    }
+  }
+}

package/framework/side-nav/side-nav.component.scss

@@ -0,0 +1,47 @@
+@import './styles/utilities';
+
+seam-side-nav,
+.seam-side-nav {
+  display: block;
+  height: 100%;
+
+  // Prevent main page content layer overlapping the side-nav while animating.
+  position: relative;
+  z-index: 2;
+
+  .side-nav-inner-wrapper {
+    background: $seam-side-nav-bg;
+    height: 100%;
+  }
+
+  .side-nav-backdrop {
+    background: $seam-side-nav-background-bg-color;
+    width: 100vw;
+    height: 100vh;
+
+    &.side-nav-backdrop-hidden {
+      display: none;
+      width: 0;
+      height: 0;
+      padding: 0;
+      margin: 0;
+    }
+  }
+
+  overflow: hidden;
+
+  //
+  .side-nav-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    flex-wrap: nowrap;
+  }
+
+  .side-nav-items-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    flex: 1 1 100%;
+  }
+}

package/framework/side-nav/side-nav.models.d.ts

@@ -55,7 +55,7 @@ export interface ISideNavLink extends ISideNavItemBase<'link'>, Partial<Pick<Url
 export interface ISideNavButton extends ISideNavItemBase<'button'> {
     onClick: (event: MouseEvent) => void;
 }
-export declare type ISideNavItem = ISideNavTitle | ISideNavDivider | ISideNavBasic | ISideNavLink | ISideNavButton;
+export type ISideNavItem = ISideNavTitle | ISideNavDivider | ISideNavBasic | ISideNavLink | ISideNavButton;
 export interface SideNavItemStateChanged {
     item: ISideNavItem;
     prop: string;

package/framework/side-nav/styles/_themes/light/_variables.scss

@@ -0,0 +1,29 @@
+$seam-side-nav-bg-color: $gray-200;
+
+$seam-side-nav-background-bg-color: rgba($dark, 0.6);
+
+// Group
+$seam-side-nav-group-bg-variation-amount: 3%;
+
+// Item
+$seam-side-nav-item-bg-color-active: $white;
+$seam-side-nav-item-bg-color-hover: rgba($primary, 0.4);
+
+$seam-side-nav-item-color: $black;
+$seam-side-nav-item-color-active: $black;
+
+$seam-side-nav-item-disabled-color: $text-muted;
+
+// Divider
+$seam-side-nav-divider-color: $gray-500;
+$seam-side-nav-divider-size: 1px;
+
+// Title
+$seam-side-nav-title-color: $black;
+
+$seam-side-nav-title-font-size: 24px;
+
+$seam-side-nav-title-padding-left: 10px;
+
+// Toggle
+$seam-side-nav-toggle-btn-color: $seam-side-nav-item-color;

package/framework/side-nav/styles/_themes/primary/_variables.scss

@@ -0,0 +1,31 @@
+$seam-side-nav-bg-color: $primary !default;
+$seam-side-nav-bg: $seam-side-nav-bg-color !default;
+
+// Backdrop
+$seam-side-nav-background-bg-color: rgba($dark, 0.6) !default;
+
+// Group
+$seam-side-nav-group-bg-variation-amount: 3% !default;
+
+// Item
+$seam-side-nav-item-bg-color-active: darken($seam-side-nav-bg-color, 10%) !default;
+$seam-side-nav-item-bg-color-hover: darken($seam-side-nav-bg-color, 5%) !default;
+
+$seam-side-nav-item-color: $white !default;
+$seam-side-nav-item-color-active: $seam-side-nav-item-color !default;
+
+$seam-side-nav-item-disabled-color: darken($seam-side-nav-item-color, 20%) !default;
+
+// Divider
+$seam-side-nav-divider-color: darken($seam-side-nav-bg-color, 10%) !default;
+$seam-side-nav-divider-size: 1px !default;
+
+// Title
+$seam-side-nav-title-color: $seam-side-nav-item-color !default;
+
+$seam-side-nav-title-font-size: 24px !default;
+
+$seam-side-nav-title-padding-left: 10px !default;
+
+// Toggle
+$seam-side-nav-toggle-btn-color: $seam-side-nav-item-color !default;

package/framework/side-nav/styles/_utilities.scss

@@ -0,0 +1,3 @@
+@import '../../../styles/utilities';
+
+@import './variables';

package/framework/side-nav/styles/_variables.scss

@@ -0,0 +1,2 @@
+// @import './_themes/light/_variables';
+@import './_themes/primary/_variables';

package/google-maps/google-maps/google-maps.component.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="google.maps" />
-/// <reference types="googlemaps" />
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
 import { AfterViewInit, ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';

package/google-maps/google-maps-places-autocomplete/google-maps-places-autocomplete.component.d.ts

@@ -1,8 +1,4 @@
 /// <reference types="google.maps" />
-/// <reference types="googlemaps" />
-/// <reference types="googlemaps" />
-/// <reference types="googlemaps" />
-/// <reference types="googlemaps" />
 import { BooleanInput } from '@angular/cdk/coercion';
 import { ElementRef, OnDestroy, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';

package/google-maps/google-maps-places-autocomplete/google-maps-places-autocomplete.directive.d.ts

@@ -1,8 +1,4 @@
 /// <reference types="google.maps" />
-/// <reference types="googlemaps" />
-/// <reference types="googlemaps" />
-/// <reference types="googlemaps" />
-/// <reference types="googlemaps" />
 import { ElementRef, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";

package/google-maps/google-maps.service.d.ts

@@ -1,6 +1,4 @@
 /// <reference types="google.maps" />
-/// <reference types="googlemaps" />
-/// <reference types="googlemaps" />
 import { NgZone, OnDestroy, ViewContainerRef } from '@angular/core';
 import { Observable } from 'rxjs';
 import { MenuComponent } from '@theseam/ui-common/menu';

package/google-maps/map-controls-service.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="google.maps" />
-/// <reference types="googlemaps" />
 import { InjectionToken } from '@angular/core';
 import { ComponentType } from '@theseam/ui-common/models';
 export interface MapControl<TData = any> {

package/google-maps/map-value-manager.service.d.ts

@@ -4,7 +4,7 @@ export declare enum MapValueSource {
     Input = "input",
     FeatureChange = "featurechange"
 }
-export declare type MapValue = object | undefined | null;
+export type MapValue = object | undefined | null;
 export interface MapValueChange {
     value: MapValue;
     source: MapValueSource;

package/graphql/datatable/datatable-graphql-query-ref.d.ts

@@ -10,8 +10,8 @@ export interface DatatableGraphQLDataMapperResult<TRow = EmptyObject> {
      */
     totalCount?: number;
 }
-export declare type DatatableGraphQLDataMapper<TData, TRow = EmptyObject> = (data: TData) => (DatatableGraphQLDataMapperResult<TRow> | Promise<DatatableGraphQLDataMapperResult<TRow>> | Observable<DatatableGraphQLDataMapperResult<TRow>>);
-export declare type DatatableGraphQLVariables = {
+export type DatatableGraphQLDataMapper<TData, TRow = EmptyObject> = (data: TData) => (DatatableGraphQLDataMapperResult<TRow> | Promise<DatatableGraphQLDataMapperResult<TRow>> | Observable<DatatableGraphQLDataMapperResult<TRow>>);
+export type DatatableGraphQLVariables = {
     skip?: number;
     take?: number;
 } & EmptyObject;

package/graphql/datatable/datatable-graphql.service.d.ts

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
  * rest should be common options shared by all our app's datatables. This may
  * change if it is determined to be too restrictive.
  */
-export declare type DatatableQueryOptions<TVariables = OperationVariables, TData = any> = Pick<WatchQueryOptions<TVariables, TData>, 'query'> & Pick<WatchQueryOptions<TVariables, TData>, 'variables'> & Pick<WatchQueryOptions<TVariables, TData>, 'context'>;
+export type DatatableQueryOptions<TVariables = OperationVariables, TData = any> = Pick<WatchQueryOptions<TVariables, TData>, 'query'> & Pick<WatchQueryOptions<TVariables, TData>, 'variables'> & Pick<WatchQueryOptions<TVariables, TData>, 'context'>;
 export interface DatatableGraphqlServiceConfig {
     /**
      * Polling interval time in milliseconds.

package/graphql/datatable/datatable-helpers.d.ts

@@ -5,8 +5,8 @@ import { GqlDatatableAccessor } from '../models';
 import { DatatableGraphQLQueryRef } from './datatable-graphql-query-ref';
 import { FilterStateMappers } from './map-filter-states';
 import { MapperContext } from './mapper-context';
-export declare type SortsMapperResult = {
+export type SortsMapperResult = {
     [name: string]: any;
 }[];
-export declare type SortsMapper = (sorts: SortItem[], context: MapperContext) => (SortsMapperResult | Promise<SortsMapperResult> | Observable<SortsMapperResult>);
+export type SortsMapper = (sorts: SortItem[], context: MapperContext) => (SortsMapperResult | Promise<SortsMapperResult> | Observable<SortsMapperResult>);
 export declare function observeRowsWithGqlInputsHandling<TData, TRow, GqlVariables extends EmptyObject>(queryRef: DatatableGraphQLQueryRef<TData, GqlVariables, TRow>, rows: Observable<TRow[]>, datatable: Observable<GqlDatatableAccessor | undefined> | Promise<GqlDatatableAccessor | undefined> | GqlDatatableAccessor, extraVariables: Observable<Partial<GqlVariables>> | Promise<Partial<GqlVariables>> | Partial<GqlVariables>, sortsMapper: SortsMapper, filterStateMappers: FilterStateMappers): Observable<TRow[]>;

package/graphql/datatable/map-filter-states.d.ts

@@ -7,11 +7,11 @@ export interface FilterStateMapperVariables {
 export interface FilterStateMapperFilter {
     [name: string]: any;
 }
-export declare type FilterStateMapperResult = {
+export type FilterStateMapperResult = {
     filter?: FilterStateMapperFilter | undefined | null;
     variables?: FilterStateMapperVariables | undefined | null;
 } | null;
-export declare type FilterStateMapper = (filterState: DataFilterState, context: MapperContext) => (FilterStateMapperResult | Promise<FilterStateMapperResult> | Observable<FilterStateMapperResult>);
+export type FilterStateMapper = (filterState: DataFilterState, context: MapperContext) => (FilterStateMapperResult | Promise<FilterStateMapperResult> | Observable<FilterStateMapperResult>);
 export interface FilterStateMappers {
     [filterName: string]: FilterStateMapper;
 }

package/graphql/datatable/map-page-info.d.ts

@@ -3,7 +3,7 @@ export interface PageInfoMapperResult {
     skip: number;
     take: number;
 }
-export declare type PageInfoMapper = (pageInfo: TheSeamPageInfo) => PageInfoMapperResult;
+export type PageInfoMapper = (pageInfo: TheSeamPageInfo) => PageInfoMapperResult;
 /**
  * Maps to a range that fetches the page before the current page, the current
  * page, and the page after the current page.

package/graphql/datatable/mapper-context.d.ts

@@ -1,5 +1,5 @@
 import { EmptyObject } from 'apollo-angular/types';
-export declare type MapperContext<TExtraVariables = EmptyObject> = {
+export type MapperContext<TExtraVariables = EmptyObject> = {
     extraVariables: TExtraVariables;
 } & {
     [name: string]: any;

package/graphql/models/gql-datatable-accessor.d.ts

@@ -1,5 +1,5 @@
 import { DatatableComponent } from '@theseam/ui-common/datatable';
-export declare type GqlDatatableAccessor = Pick<DatatableComponent, 'page' | 'sort' | 'sorts' | 'filterStates'> & {
+export type GqlDatatableAccessor = Pick<DatatableComponent, 'page' | 'sort' | 'sorts' | 'filterStates'> & {
     ngxDatatable: {
         offset: number;
         pageSize: number;

package/graphql/models/hint-transformer.d.ts

@@ -1,3 +1,3 @@
 import { HintTransformOperation } from './hint-transform-operation';
 import { HintsToken } from './hints-token';
-export declare type HintTransformer = (operation: HintTransformOperation, hintsToken: HintsToken) => HintTransformOperation;
+export type HintTransformer = (operation: HintTransformOperation, hintsToken: HintsToken) => HintTransformOperation;

package/icon/icon/icon.component.d.ts

@@ -2,7 +2,7 @@ import { BooleanInput } from '@angular/cdk/coercion';
 import { IconProp, SizeProp } from '@fortawesome/fontawesome-svg-core';
 import { SeamIcon } from '../icon';
 import * as i0 from "@angular/core";
-export declare type TheSeamIconType = 'borderless-styled-square' | 'styled-square' | 'image-fill' | undefined;
+export type TheSeamIconType = 'borderless-styled-square' | 'styled-square' | 'image-fill' | undefined;
 export declare class IconComponent {
     static ngAcceptInputType_grayscaleOnDisable: BooleanInput;
     static ngAcceptInputType_disabled: BooleanInput;

package/icon/icon.d.ts

@@ -1,2 +1,2 @@
 import { IconDefinition, IconProp } from '@fortawesome/fontawesome-svg-core';
-export declare type SeamIcon = IconProp | IconDefinition | string;
+export type SeamIcon = IconProp | IconDefinition | string;

package/layout/breakpoint-aliases.d.ts

@@ -17,4 +17,4 @@
  * | gt-md      | 'screen and (min-width: 1280px)'                        |
  * | gt-lg      | 'screen and (min-width: 1920px)'                        |
  */
-export declare type MediaQueryAliases = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'lt-sm' | 'lt-md' | 'lt-lg' | 'lt-xl' | 'gt-xs' | 'gt-sm' | 'gt-md' | 'gt-lg';
+export type MediaQueryAliases = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'lt-sm' | 'lt-md' | 'lt-lg' | 'lt-xl' | 'gt-xs' | 'gt-sm' | 'gt-md' | 'gt-lg';

package/loading/loading.models.d.ts

@@ -1 +1 @@
-export declare type TheSeamLoadingTheme = 'default' | 'primary';
+export type TheSeamLoadingTheme = 'default' | 'primary';

package/modal/modal-config.d.ts

@@ -3,7 +3,7 @@ import { ComponentType } from '@angular/cdk/overlay';
 import { InjectionToken, ViewContainerRef } from '@angular/core';
 import { ModalContainerComponent } from './modal-container/modal-container.component';
 /** Valid ARIA roles for a dialog element. */
-export declare type DialogRole = 'dialog' | 'alertdialog';
+export type DialogRole = 'dialog' | 'alertdialog';
 /** Possible overrides for a dialog's position. */
 export interface IModalPosition {
     top?: string;

package/models/component-type.d.ts

@@ -1,2 +1,2 @@
 /** Interface that can be used to generically type a class. */
-export declare type ComponentType<T> = new (...args: any[]) => T;
+export type ComponentType<T> = new (...args: any[]) => T;

package/models/size-prefixes.d.ts

@@ -1 +1 @@
-export declare type SizePrefixes = 'btn';
+export type SizePrefixes = 'btn';

package/models/size-types.d.ts

@@ -1 +1 @@
-export declare type SizeTypes = 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'lightgray' | 'lightblue';
+export type SizeTypes = 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'lightgray' | 'lightblue';

package/models/theme-prefixes.d.ts

@@ -1 +1 @@
-export declare type ThemePrefixes = 'btn' | 'text' | 'bg' | 'badge' | 'list-group-item';
+export type ThemePrefixes = 'btn' | 'text' | 'bg' | 'badge' | 'list-group-item';

package/models/theme-types.d.ts

@@ -1,2 +1,2 @@
-export declare type ThemeTypes = 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'lightgray' | 'lightblue';
-export declare type OutlineThemeTypes = 'outline-primary' | 'outline-secondary' | 'outline-success' | 'outline-danger' | 'outline-warning' | 'outline-info' | 'outline-light' | 'outline-dark' | 'outline-lightgray' | 'outline-lightblue';
+export type ThemeTypes = 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'lightgray' | 'lightblue';
+export type OutlineThemeTypes = 'outline-primary' | 'outline-secondary' | 'outline-success' | 'outline-danger' | 'outline-warning' | 'outline-info' | 'outline-light' | 'outline-dark' | 'outline-lightgray' | 'outline-lightblue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theseam/ui-common",
-  "version": "0.4.0-beta.1",
+  "version": "0.4.0-beta.3",
   "peerDependencies": {
     "@angular/cdk": "^15.0.0",
     "@angular/common": "^15.0.0",

package/scrollbar/overlay-scrollbars-config-model.d.ts

@@ -1,2 +1,2 @@
 import * as OverlayScrollbars from 'overlayscrollbars';
-export declare type IOverlayScrollbarsConfig = OverlayScrollbars.Options;
+export type IOverlayScrollbarsConfig = OverlayScrollbars.Options;

package/services/font-loader.service.d.ts

@@ -1,7 +1,7 @@
 import { Observable } from 'rxjs';
 import WebFont from 'webfontloader';
 import * as i0 from "@angular/core";
-export declare type TheSeamFontEvents = {
+export type TheSeamFontEvents = {
     type: 'loading';
 } | {
     type: 'active';

package/styles/bootstrap/_bootstrap.scss

@@ -6,40 +6,40 @@
 @import './bs-utilities';
 
 // Optional
-@import "node_modules/bootstrap/scss/root";
-@import "node_modules/bootstrap/scss/reboot";
-@import "node_modules/bootstrap/scss/type";
-@import "node_modules/bootstrap/scss/images";
-@import "node_modules/bootstrap/scss/code";
-@import "node_modules/bootstrap/scss/grid";
-@import "node_modules/bootstrap/scss/tables";
-@import "node_modules/bootstrap/scss/forms";
-@import "node_modules/bootstrap/scss/buttons";
-@import "node_modules/bootstrap/scss/transitions";
-@import "node_modules/bootstrap/scss/dropdown";
-@import "node_modules/bootstrap/scss/button-group";
-@import "node_modules/bootstrap/scss/input-group";
-@import "node_modules/bootstrap/scss/custom-forms";
-@import "node_modules/bootstrap/scss/nav";
-@import "node_modules/bootstrap/scss/navbar";
-@import "node_modules/bootstrap/scss/card";
-@import "node_modules/bootstrap/scss/breadcrumb";
-@import "node_modules/bootstrap/scss/pagination";
-@import "node_modules/bootstrap/scss/badge";
-@import "node_modules/bootstrap/scss/jumbotron";
-@import "node_modules/bootstrap/scss/alert";
-@import "node_modules/bootstrap/scss/progress";
-@import "node_modules/bootstrap/scss/media";
-@import "node_modules/bootstrap/scss/list-group";
-@import "node_modules/bootstrap/scss/close";
-@import "node_modules/bootstrap/scss/toasts";
-@import "node_modules/bootstrap/scss/modal";
-@import "node_modules/bootstrap/scss/tooltip";
-@import "node_modules/bootstrap/scss/popover";
-@import "node_modules/bootstrap/scss/carousel";
-@import "node_modules/bootstrap/scss/spinners";
-@import "node_modules/bootstrap/scss/utilities";
-@import "node_modules/bootstrap/scss/print";
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/code";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/input-group";
+@import "bootstrap/scss/custom-forms";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/badge";
+@import "bootstrap/scss/jumbotron";
+@import "bootstrap/scss/alert";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/media";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/close";
+@import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/popover";
+@import "bootstrap/scss/carousel";
+@import "bootstrap/scss/spinners";
+@import "bootstrap/scss/utilities";
+@import "bootstrap/scss/print";
 
 // Custom Styles
 @import './bs-styles';