merge

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/globals.scss

@@ -0,0 +1,41 @@
+@import './modules/_variables.scss';
+
+$dist: './fonts/Montserrat-Regular';
+@font-face {
+    font-family: Montserrat;
+    font-weight: 400;
+    src: url("./fonts/Montserrat-Regular.eot?") format("eot"),url("./fonts/Montserrat-Regular.woff") format("woff"),url("./fonts/Montserrat-Regular.ttf") format("truetype"),url("./fonts/Montserrat-Regular.svg#Montserrat") format("svg")
+}
+
+@font-face {
+    font-family: Montserrat;
+    font-weight: 700;
+    src: url("./fonts/Montserrat-Bold.eot?") format("eot"),url("./fonts/Montserrat-Bold.woff") format("woff"),url("./fonts/Montserrat-Bold.ttf") format("truetype"),url("./fonts/Montserrat-Bold.svg#Montserrat") format("svg")
+}
+
+html,
+body {
+    font-family: Montserrat,sans-serif;
+    font-size: 16px;
+    font-weight: $font-weight-normal;
+    z-index: 10;
+}
+*,
+*::after,
+*::before {
+    box-sizing: border-box;
+}
+
+.preloading {
+    color: $color-brand;
+    display: block;
+    font-size: $font-size-xl;
+    left: 50%;
+    position: fixed;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+select::-ms-expand {
+    display: none;
+}

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/_variables.scss

@@ -6,14 +6,14 @@ $color-brand-bright: lighten($color-brand, 10%);
 $color-brand-brighter: lighten($color-brand, 20%);
 
 $color-secondary: #83D01B;
-$color-secondary-dark: darken($color-secondary, 10%);
+$color-secondary-dark: darken($color-secondary, 5%);
 $color-secondary-darker: darken($color-secondary, 20%);
 $color-secondary-bright: lighten($color-secondary, 10%);
 $color-secondary-brighter: lighten($color-secondary, 20%);
 
 $color-background-dark: #333333;
 $color-background-darker: #000000;
-$color-background-bright: #EEEEEE;
+$color-background-bright: #EEEEFF;
 $color-background-brighter: #FFFFFF;
 
 $color-foreground-dark: #333333;
@@ -33,7 +33,7 @@ $font-weight-normal: 400;
 $font-weight-semibold: 600;
 $font-weight-bold: 700;
 
-$font-size-xs: .5rem;    // 8px
+$font-size-xs: .65rem;    // 10.4px
 $font-size-s: .85rem;    // 13.6px
 $font-size-m: 1rem;      // 16px
 $font-size-l: 1.25rem;   // 20px
@@ -49,8 +49,5 @@ $media-screen-xl: 1440px;
 $media-screen-xxl: 1680px;
 $media-screen-xxxl: 1920px;
 
-// Margins
-$margin-center: 10vw;
-
-$medias: xxs, xs, s, m, l, xl, xxl, xxxl;
-$mediavalues: $media-screen-xxs, $media-screen-xs, $media-screen-s, $media-screen-m, $media-screen-l, $media-screen-xl, $media-screen-xxl, $media-screen-xxxl;
+// Borders
+$border-light: 1px;

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.html

@@ -1,44 +1,38 @@
-<div class="app">
-    <header class="navbar navbar-light navbar-static-top">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-10">
-                    <a class="navbar-brand" routerLink="catalog">
-                        <img src="../images/brand.png" />
-                    </a>
-                </div>
-                <div class="col-sm-2">
-                    <esh-basket-status *ngIf="Authenticated"></esh-basket-status>
-                    <esh-identity></esh-identity>
-                </div>
-            </div>
-        </div>
-    </header>
-
-
-
-    <!-- component routing placeholder -->
-    <router-outlet></router-outlet>
-
-
-    <footer class="app-footer">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-6">
-                    <br>
-                    <div class="app-footer-brand">
-                        <img src="../images/brand_dark.png" />
-                    </div>
-                </div>
-                <div class="col-sm-6">
-                    <br>
-                    <br>
-                    <br>
-                    <div class="app-footer-text hidden-xs">e-ShoponContainers. All right reserved</div>
-                </div>
-            </div>
-        </div>
-    </footer>
-</div>
+<header class="navbar navbar-light navbar-static-top">
+    <div class="container">
+        <article class="row">
 
+            <section class="col-sm-10">
+                <a class="navbar-brand" routerLink="catalog">
+                    <img src="../images/brand.png" />
+                </a>
+            </section>
+
+            <section class="col-sm-2">
+                <esh-basket-status *ngIf="Authenticated"></esh-basket-status>
+                <esh-identity></esh-identity>
+            </section>
+
+        </article>
+    </div>
+</header>
+
+<!-- component routing placeholder -->
+<router-outlet></router-outlet>
+
+<footer class="esh-app-footer">
+    <div class="container">
+        <article class="row">
+
+            <section class="col-sm-6">
+                <img class="esh-app-footer-brand" src="../images/brand_dark.png" />
+            </section>
+
+            <section class="col-sm-6">
+                <div class="esh-app-footer-text hidden-xs"> e-ShoponContainers. All right reserved </div>
+            </section>
+
+        </article>
+    </div>
+</footer>
 

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.scss

@@ -1,44 +1,28 @@
 @import './_variables.scss';
 
-@font-face {
-    font-family: Montserrat;
-    font-weight: 400;
-    src: url("../dist/fonts/Montserrat-Regular.eot?") format("eot"),url("../dist/fonts/Montserrat-Regular.woff") format("woff"),url("../dist/fonts/Montserrat-Regular.ttf") format("truetype"),url("../dist/fonts/Montserrat-Regular.svg#Montserrat") format("svg")
-}
-
-@font-face {
-    font-family: Montserrat;
-    font-weight: 700;
-    src: url("../dist/fonts/Montserrat-Bold.eot?") format("eot"),url("../dist/fonts/Montserrat-Bold.woff") format("woff"),url("../dist/fonts/Montserrat-Bold.ttf") format("truetype"),url("../dist/fonts/Montserrat-Bold.svg#Montserrat") format("svg")
-}
-
-.app {
-    font-family: Montserrat,sans-serif;
-
+.esh-app {
     &-footer {
-        padding-top: 40px;
-        padding-bottom: 40px;
-        margin-top: 40px;
-        border-top: 1px solid #eee;
-        background-color: black;
+        $margin: 2.5rem;
+        $padding: 2.5rem;
+
+        background-color: $color-background-darker;
+        border-top: $border-light solid $color-foreground-bright;
+        margin-top: $margin;
+        padding-bottom: $padding;
+        padding-top: $padding;
         width: 100%;
 
+        $height: 50px;
         &-brand {
-            margin-top: 25px;
-            max-width: 231px;
-            height: 52px;
-            margin-left: 0px !important;
+            height: $height;
+            width: 230px;
         }
 
         &-text {
+            color: $color-secondary;
+            line-height: $height;
             text-align: right;
             width: 100%;
-            height: 100%;
-            color: #83d01b;
-            margin-top: 10px;
         }
     }
 }
-
-
-

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.ts

@@ -12,7 +12,7 @@ import { SecurityService } from './shared/services/security.service';
  */
 
 @Component({
-    selector: 'appc-app',
+    selector: 'esh-app.esh-app',
     styleUrls: ['./app.component.scss'],
     templateUrl: './app.component.html'
 })

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.html

@@ -1,41 +1,46 @@
-<div class="container">
-    <div class="catalog-banner">
-        <img class="catalog-banner-image" src="../../images/main_banner.png" />
-        <div class="container">
-            <img src="../../images/main_banner_text.png" class="catalog-banner-text" />
-        </div>
+<section class="esh-catalog-hero">
+    <div class="container">
+        <img class="esh-catalog-title" src="../../images/main_banner_text.png" />
     </div>
-    <div class="catalog-filter">
-        <div class="catalog-filter-container">
-            <div class="container">
-                <div data-name="brand" class="catalog-filter-wrapper">
-                    <select class="catalog-filter-select" (change)="onBrandFilterChanged($event, $event.target.value)">
-                        <option *ngFor="let brand of brands" [value]="brand.id">{{brand.brand}}</option>
-                    </select>
-                </div>
-                <div data-name="type" class="catalog-filter-wrapper">
-                    <select class="catalog-filter-select" (change)="onTypeFilterChanged($event, $event.target.value)">
-                        <option *ngFor="let type of types" [value]="type.id">{{type.type}}</option>
-                    </select>
-                </div>
-                <button class="catalog-filter-button" (click)="onFilterApplied($event)">
-                    <img src="../../images/arrow-right.svg">
-                </button>
-            </div>
-        </div>
+</section>
+
+<section class="esh-catalog-filters">
+    <div class="container">
+        <label class="esh-catalog-label" data-title="brand">
+            <select class="esh-catalog-filter" (change)="onBrandFilterChanged($event, $event.target.value)">
+                <option *ngFor="let brand of brands" [value]="brand.id">{{brand.brand}}</option>
+            </select>
+        </label>
+        <label class="esh-catalog-label" data-title="type">
+            <select class="esh-catalog-filter" (change)="onTypeFilterChanged($event, $event.target.value)">
+                <option *ngFor="let type of types" [value]="type.id">{{type.type}}</option>
+            </select>
+        </label>
+        <img class="esh-catalog-send" (click)="onFilterApplied($event)" src="../../images/arrow-right.svg" />
     </div>
-    <esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
-    <div class="catalog-content row">
-        <div class="col-md-4 catalog-content-item" *ngFor="let item of catalog?.data">
-            <img src="{{item.pictureUri}}" />
-            <button (click)="addToCart(item)" class="catalog-content-item-button">[ ADD TO CART ]</button>
-            <div class="catalog-content-item-title">
+</section>
+
+<div class="container">
+    <esh-pager class="esh-pager" [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
+
+    <div class="esh-catalog-items row">
+        <div class="esh-catalog-item col-md-4"
+             *ngFor="let item of catalog?.data">
+
+            <img class="esh-catalog-thumbnail" src="{{item.pictureUri}}" />
+            <button class="esh-catalog-button" (click)="addToCart(item)">
+                [ ADD TO CART ]
+            </button>
+
+            <div class="esh-catalog-name">
                 <span>{{item.name}}</span>
             </div>
-            <div class="catalog-content-item-price">
+            <div class="esh-catalog-price">
                 <span>{{item.price}}</span>
             </div>
         </div>
     </div>
-    <esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
-</div>
+
+    <esh-pager class="esh-pager" [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
+</div>
+

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.scss

@@ -1,125 +1,148 @@
-@import '../_variables.scss';
+@import '../variables';
 
-select::-ms-expand {
-    display: none;
-}
+.esh-catalog {
 
-.catalog {
-    &-banner {
-        height: 258px;
-        vertical-align: middle;
+    $banner-height: 260px;
 
-        &-image {
-            width: 100%;
-            position: absolute;
-            left: 0;
-            height: 258px;
-        }
+    &-hero {
+        background-image: url('../../images/main_banner.png');
+        background-size: cover;
+        height: $banner-height;
+        width: 100%;
+    }
 
-        &-text {
-            position: relative;
-            top: 75px;
-        }
+    &-title {
+        position: relative;
+        top: $banner-height / 3.5;
+    }
+
+    $filter-height: 65px;
+
+    &-filters {
+        background-color: $color-brand;
+        height: $filter-height;
     }
 
+    $filter-padding: .5rem;
+
     &-filter {
-        height: 65px;
+        background-color: transparent;
+        border-color: $color-brand-bright;
+        color: $color-foreground-brighter;
+        cursor: pointer;
+        margin-right: 1rem;
+        margin-top: .5rem;
+        outline-color: $color-secondary;
+        padding-bottom: 0;
+        padding-left: $filter-padding;
+        padding-right: $filter-padding;
+        padding-top: $filter-padding * 3;
+        min-width: 140px;
+        -webkit-appearance: none;
+
+        option {
+            background-color: $color-brand;
+        }
+    }
 
-        &-container {
+    &-label {
+        display: inline-block;
+        position: relative;
+        z-index: 0;
+
+        &::before {
+            color: rgba($color-foreground-brighter, .5);
+            content: attr(data-title);
+            font-size: $font-size-xs;
+            margin-top: $font-size-xs;
+            margin-left: $filter-padding;
             position: absolute;
-            width: 100%;
-            background-color: $color-brand;
-            left: 0;
-            height: 65px;
+            text-transform: uppercase;
+            z-index: 1;
         }
 
-        &-button {
-            width: 45px;
-            height: 45px;
-            padding: 6px 20px 10px 8px;
-            background-color: $color-secondary;
-            color: white;
-            font-size: 16px;
-            margin: 10px 0;
-            border: none;
+        &::after {
+            background-image: url('../../images/arrow-down.png');
+            height: 7px; //png height
+            content: '';
             position: absolute;
+            right: $filter-padding * 3;
+            top: $filter-padding * 5;
+            width: 10px; //png width
+            z-index: 1;
         }
+    }
 
-        &-select {
-            background-color: transparent;
-            padding: 10px;
-            margin: 10px;
-            margin-right: 20px;
-            color: #fff;
-            padding-top: 20px;
-            padding-bottom: 3px;
-            min-width: 140px;
-            border-color: #37c7ca;
-            max-height: 43px;
-            -webkit-appearance: none;
-
-            & option {
-                background-color: #00a69c;
-            }
+    &-send {
+        background-color: $color-secondary;
+        color: $color-foreground-brighter;
+        cursor: pointer;
+        font-size: $font-size-m;
+        margin-top: -$filter-padding * 3;
+        padding: $filter-padding;
+        transition: all $animation-speed-default;
+
+        &:hover {
+            background-color: $color-secondary-darker;
+            transition: all $animation-speed-default;
         }
+    }
+
+    &-items {
+        margin-top: 1rem;
+    }
+
+    &-item {
+        text-align: center;
+        margin-bottom: 1.5rem;
+        width: 33%;
 
-        &-wrapper {
-            z-index: 0;
-            display: inline-block;
-            margin-left: -10px;
+        @media screen and (max-width: $media-screen-m) {
+            width: 50%;
         }
 
-        &-wrapper::before {
-            content: attr(data-name);
-            opacity: 0.5;
-            z-index: 1;
-            text-transform: uppercase;
-            position: absolute;
-            font-size: 10px;
-            margin-top: 15px;
-            margin-left: 21px;
-            color: white;
+        @media screen and (max-width: $media-screen-s) {
+            width: 100%;
         }
     }
 
-    &-content {
-        margin-top: 10px;
-
-        &-item {
-            text-align: center;
-            margin-bottom: 20px;
-
-            &-image {
-            }
-
-            &-button {
-                width: 255px;
-                height: 45px;
-                padding: 10px 20px 10px 20px;
-                background-color: $color-secondary;
-                color: white;
-                font-size: 16px;
-                margin: 10px 0;
-                border: none;
-                cursor: pointer;
-            }
-
-            &-title {
-                text-align: center;
-                text-transform: uppercase;
-                font-weight: 300;
-                font-size: 16px;
-            }
-
-            &-price {
-                text-align: center;
-                font-weight: 900;
-                font-size: 28px;
-            }
-
-            &-price::before {
-                content: '$';
-            }
+    &-thumbnail {
+        max-width: 370px;
+        width: 100%;
+    }
+
+    &-button {
+        background-color: $color-secondary;
+        border: none;
+        color: $color-foreground-brighter;
+        cursor: pointer;
+        font-size: $font-size-m;
+        height: 3rem;
+        margin-top: 1rem;
+        transition: all $animation-speed-default;
+        width: 80%;
+
+        &:hover {
+            background-color: $color-secondary-darker;
+            transition: all $animation-speed-default;
+        }
+    }
+
+    &-name {
+        font-size: $font-size-m;
+        font-weight: $font-weight-semilight;
+        margin-top: .5rem;
+        text-align: center;
+        text-transform: uppercase;
+    }
+
+    &-price {
+        text-align: center;
+        font-weight: 900;
+        font-size: 28px;
+
+        &::before {
+            content: '$';
         }
     }
 }

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.ts

@@ -8,7 +8,7 @@ import { IPager }               from '../shared/models/pager.model';
 import { BasketWrapperService}  from '../shared/services/basket.wrapper.service';
 
 @Component({
-    selector: 'esh-catalog .catalog',
+    selector: 'esh-catalog .esh-catalog',
     styleUrls: ['./catalog.component.scss'],
     templateUrl: './catalog.component.html'
 })

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.html

@@ -1,31 +1,25 @@
-<div class="row pager">
-    <div class="col-xs-4">
+<div class="container">
+    <article class="esh-pager-wrapper row">
         <nav>
-            <ul>
-                <li class="page-item">
-                    <span class="pager-text pager-previous" id="Previous"
-                       [hidden]="buttonStates?.previousDisabled"
-                       (click)="onPreviousCliked($event)"
-                       aria-label="Previous">
-                        Previous
-                    </span>
-                </li>
-            </ul>
+            <span class="esh-pager-item esh-pager-item--navigable"
+                  id="Previous"
+                  [hidden]="buttonStates?.previousDisabled"
+                  (click)="onPreviousCliked($event)"
+                  aria-label="Previous">
+                Previous
+            </span>
+
+            <span class="esh-pager-item">
+                Showing {{model?.items}} of {{model?.totalItems}} products - Page {{model?.actualPage + 1}} - {{model?.totalPages}}
+            </span>
+
+            <span class="esh-pager-item esh-pager-item--navigable"
+                  id="Next"
+                  [hidden]="buttonStates?.nextDisabled"
+                  (click)="onNextClicked($event)"
+                  aria-label="Next">
+                Next
+            </span>
         </nav>
-    </div>
-    <div class="col-xs-4 u-align-center"><span>Showing {{model?.items}} of {{model?.totalItems}} products - Page {{model?.actualPage + 1}} - {{model?.totalPages}}</span></div>
-    <div class="col-xs-4">
-        <nav>
-            <ul>
-                <li class="page-item">
-                    <span class="pager-text pager-next" id="Next"
-                       [hidden]="buttonStates?.nextDisabled"
-                       (click)="onNextClicked($event)"
-                       aria-label="Next">
-                        Next
-                    </span>
-                </li>
-            </ul>
-        </nav>
-    </div>
+    </article>
 </div>

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.scss

@@ -1,30 +1,30 @@
-.pager {
-    margin-bottom: 20px;
-    margin-top: 20px;
-    margin-left: 0px;
-    margin-right: -30px;
+@import "../../../variables";
 
-    &-previous {
-        position: absolute;
-        left: 0;
-        top: 0;
-        cursor: pointer;
-    }
+.esh-pager {
 
-    &-text {
-        color: #83d01b;
+    &-wrapper {
+        padding-top: 1rem;
+        text-align: center;
     }
 
-    &-next {
-        position: absolute;
-        right: 15px;
-        top: 0;
-        cursor: pointer;
-    }
+    &-item {
+        $margin: 8vw;
+        margin: 0 $margin;
+
+        &--navigable {
+            cursor: pointer;
+
+            &:hover {
+                color: $color-secondary;
+            }
+        }
+
+        @media screen and (max-width: $media-screen-l) {
+            font-size: $font-size-s;
+        }
 
-    &-isDisabled {
-        cursor: not-allowed;
-        opacity: .5;
-        pointer-events: none;
+        @media screen and (max-width: $media-screen-m) {
+            margin: 0 $margin / 2;
+        }
     }
-}
+}

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.ts

@@ -3,7 +3,7 @@ import { Component, OnInit, OnChanges, Output, Input, EventEmitter } from '@angu
 import { IPager } from '../../models/pager.model';
 
 @Component({
-    selector: 'esh-pager',
+    selector: 'esh-pager .esh-pager',
     templateUrl: './pager.html',
     styleUrls: ['./pager.scss']
 })

src/Web/WebSPA/eShopOnContainers.WebSPA/Views/Home/Index.cshtml

@@ -1,16 +1,8 @@
-<style>
-    div.app-spinner {
-        position: fixed;
-        top: 50%;
-        left: 50%;
-    }
-</style>
-
-<appc-app asp-prerender-webpack-config="config/webpack.config.js">
-    <div class="app-spinner">
+<esh-app class="esh-app" asp-prerender-webpack-config="config/webpack.config.js">
+    <div class="preloading">
         <i class="fa fa-spinner fa-spin fa-5x" aria-hidden="true"></i>
     </div>
-</appc-app>
+</esh-app>
 
 <script>
     window.user = '@ViewBag.user';

src/Web/WebSPA/eShopOnContainers.WebSPA/config/webpack.config.js

@@ -22,31 +22,25 @@ module.exports = merge({
                 loaders: ['awesome-typescript-loader?forkChecker=true ', 'angular2-template-loader', 'angular2-router-loader']
             },
             { test: /\.html$/, loader: "html" },
-            { test: /\.css/, loader: extractCSS.extract(['css']) },
-            { test: /\.scss$/, loaders: ['raw-loader', 'sass-loader?sourceMap'] },
+            { test: /\.scss$/, loader: 'exports-loader?module.exports.toString()!css-loader!sass-loader' },
             { test: /\.json$/, loader: 'json-loader' },
             {
                 test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
-                loader: "file"
+                loader: "file-loader"
             }, {
                 test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
-                loader: "file"
+                loader: "file-loader"
             }, {
                 test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
-                loader: "file"
+                loader: "file-loader"
             }, {
                 test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
-                loader: "file"
+                loader: "file-loader"
             }, 
             {
                 test: /\.(png|jpg|gif|svg)$/,
-                loader: "file"
+                loader: "file-loader?name=images/[name].[ext]"
             }
-
-            //        {
-            //        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-            //loader: "url?limit=10000&mimetype=image/svg+xml"
-            //}
         ]
     },
     entry: {

src/Web/WebSPA/eShopOnContainers.WebSPA/config/webpack.config.vendor.js

@@ -44,7 +44,8 @@ module.exports = {
             '@angular/forms',
             '@angular/platform-browser',
             '@angular/platform-browser-dynamic',
-            '@angular/router'
+            '@angular/router',
+            './Client/globals.scss'
         ]
     },
     output: {

src/Web/WebSPA/eShopOnContainers.WebSPA/package.json

@@ -17,8 +17,6 @@
   },
   "scripts": {
     "rimraf": "rimraf",
-    "tslint": "tslint",
-    "typedoc": "typedoc",
     "typings": "typings",
     "webpack": "webpack",
     "clean": "npm cache clean && npm run rimraf -- node_modules doc typings coverage wwwroot/dist",
@@ -33,8 +31,6 @@
     "setprod": "set ASPNETCORE_ENVIRONMENT=Production",
     "build:dev": "npm run setdev && npm run clean:dist && npm run build:vendor && npm run build:main",
     "build:prod": "npm run setprod && npm run clean:dist && npm run build:vendor && npm run build:main",
-    "lint": "npm run tslint \"Client/**/*.ts\"",
-    "docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./Client/",
     "version": "npm run build"
   },
   "dependencies": {
@@ -53,6 +49,7 @@
     "aspnet-webpack": "1.0.24",
     "bootstrap": "4.0.0-alpha.5",
     "core-js": "2.4.1",
+    "file-loader": "^0.9.0",
     "font-awesome": "4.6.3",
     "isomorphic-fetch": "2.2.1",
     "normalize.css": "5.0.0",
@@ -80,7 +77,7 @@
     "css-loader": "0.25.0",
     "es6-promise": "3.2.1",
     "es6-promise-loader": "1.0.2",
-    "expose-loader": "0.7.1",
+    "exports-loader": "^0.6.3",
     "extendify": "1.0.0",
     "extract-text-webpack-plugin": "2.0.0-beta.4",
     "file-loader": "0.9.0",
@@ -89,18 +86,14 @@
     "json-loader": "0.5.4",
     "node-sass": "3.9.3",
     "parse5": "2.1.5",
-    "raw-loader": "0.5.1",
     "rimraf": "2.5.4",
     "sass-loader": "4.0.2",
-    "source-map-loader": "0.1.5",
-    "style-loader": "0.13.1",
     "ts-helpers": "1.1.1",
     "ts-node": "1.4.3",
     "tslint": "3.15.1",
-    "tslint-loader": "2.1.5",
     "typedoc": "0.5.0",
     "typescript": "2.0.6",
-    "url-loader": "0.5.7",
+    "url-loader": "^0.5.7",
     "webpack": "2.1.0-beta.25",
     "webpack-externals-plugin": "1.0.0",
     "webpack-hot-middleware": "2.13.0",