ecabs-components 0.0.1

package/styles/scss/utilities/_fonts.scss

@@ -0,0 +1,26 @@
+// #Family
+$font-family-primary: 'Segment', 'sans-serif';
+$font-family-fallback: 'Lato', sans-serif;
+
+// #Weights
+$font-weight-thin: 300;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+$font-weight-extra-bold: 800;
+
+// #Sizes
+$font-size-xs: 12px;
+$font-size-sm: 14px;
+$font-size-base: 16px;
+$font-size-lg: 18px;
+
+$font-heading-xs: 22px;
+$font-heading-sm: 28px;
+$font-heading-md: 32px;
+$font-heading-base: 34px;
+$font-heading-lg: 36px;
+
+// Height
+$base-line-height: 1.5;

package/styles/scss/utilities/_functions.scss

@@ -0,0 +1,27 @@
+@use 'sass:math';
+// Converting pixel-based font-sizes to scalable REMs.
+$base-rem: 16px;
+
+@function strip-unit($num) {
+  @return math.div($num, ($num * 0 + 1));
+}
+
+@function cast-rem($value, $base-value: $base-rem) {
+  $value: math.div(strip-unit($value), strip-unit($base-value)) * 1rem;
+  @if ($value == 0rem) {
+    $value: 0;
+  } // Turn 0rem into 0
+  @return $value;
+}
+
+@function calc-rem($values, $base-value: $base-rem) {
+  $max: length($values);
+  @if $max == 1 {
+    @return cast-rem(nth($values, 1), $base-value);
+  }
+  $remValues: ();
+  @for $i from 1 through $max {
+    $remValues: append($remValues, cast-rem(nth($values, $i), $base-value));
+  }
+  @return $remValues;
+}

package/styles/scss/utilities/_helpers.scss

@@ -0,0 +1,5 @@
+// For Pseudo Elements
+%pseudos {
+  position: absolute;
+  content: '';
+}

package/styles/scss/utilities/_mixins.scss

@@ -0,0 +1,65 @@
+// Calculates font size in REMs with a pixel fallback.
+@mixin fontSize($size) {
+  font-size: $size;
+  font-size: calc-rem($size);
+}
+
+// ==========================================================================
+// BEM Naming Functions
+// ==========================================================================
+// Element Mixin
+@mixin e($element) {
+  &__#{$element} {
+    @content;
+  }
+}
+
+// Modifier Mixin
+@mixin m($modifier) {
+  &--#{$modifier} {
+    @content;
+  }
+}
+
+// Generate ::before or ::after pseudo-element shapes
+@mixin p-el($el-name, $h: 'null', $w: 'null') {
+  @if $el-name == 'before' or $el-name == 'after' {
+    &::#{$el-name} {
+      @extend %pseudos;
+      width: $w;
+      height: $h;
+      @content;
+    }
+  } @else {
+    @error '"#{$el-name}" is not a valid pseudo element.';
+  }
+}
+
+// ==========================================================================
+// Media Query Functions
+// ==========================================================================
+@mixin media-q($break) {
+  @if $break == 'small' {
+    @media (min-width: map-get($breakpoints, 'xs')) and (max-width: map-get($breakpoints, 'md')) {
+      @content;
+    }
+  } @else if $break == 'medium' {
+    @media (min-width: map-get($breakpoints, 'md') + 1) {
+      @content;
+    }
+  } @else if $break == 'large' {
+    @media (min-width: map-get($breakpoints, 'lg')) {
+      @content;
+    }
+  } @else if $break == 'x-large' {
+    @media (min-width: map-get($breakpoints, 'xl')) {
+      @content;
+    }
+  } @else if $break == 'xx-large' {
+    @media (min-width: map-get($breakpoints, 'xxl')) {
+      @content;
+    }
+  } @else {
+    @error '"#{$break}" is not a valid breakpoint. Please enter a supported value (e.g. "small", "medium" or "large")';
+  }
+}

package/styles/scss/utilities/_variables.scss

@@ -0,0 +1,19 @@
+/* #Box shadows */
+$box-shadow-default: 0px 0px 10px rgba(0, 0, 0, 0.1);
+$box-shadow-large: 0 0 25px rgba(0, 0, 0, 0.2);
+
+/* #Border settings */
+$border-radius-base: .25rem;
+
+/* #Transition */
+$trans-duration-style: .24s ease-out;
+
+/* #Viewport Breakpoints */
+$breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
+);

package/styles/scss/utilities/index.scss

@@ -0,0 +1,6 @@
+@import "./variables";
+@import "./functions";
+@import "./colors";
+@import "./fonts";
+@import "./helpers";
+@import "./mixins";

package/styles/styles.scss

@@ -0,0 +1,5 @@
+@import "./material/theme";
+@import "./scss/modules/index";
+@import "./scss/utilities/index";
+@import "./scss/base/index";
+

package/test.ts

@@ -0,0 +1,27 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().forEach(context);