[ADF-1434] Theming ADF component (#2228)

* start custom theming adf

* demo shell cleaning

* login mdl cleaning

* uploader mdl cleaning

* prebuilt themes

* theme picker in demo shell

* clean custom colors and mdl

* fix rebase errors

* theming from color style guide

* dev default theme orange purple

* fix color accent inverted in picker

* fix test and add colors classes

* fix tag component theming issues

* fix datatable theming

* add theming guides

demo-shell-ng2/public/css/app.css

@@ -1,90 +0,0 @@
-/* Utils */
-body, html {
-    height: 100%;
-}
-
-.p-10 {
-    padding: 10px;
-}
-
-.m-10 {
-    margin: 10px;
-}
-
-.loader-container {
-    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
-    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
-    display: -webkit-flex; /* NEW - Chrome */
-    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-    -webkit-box-flex-direction: row;
-    -moz-box-flex-direction: row;
-    -webkit-flex-direction: row;
-    flex-direction: row;
-    height: 100%;
-}
-
-.loader-item {
-    margin: auto;
-    max-height: 100px;
-    max-width: 300px;
-}
-
-.loader-text {
-    white-space: nowrap;
-    text-align: center;
-    position: relative;
-}
-
-._dialog_overlay {
-    position: static !important;
-}
-
-.main_header_adf .mdl-layout__drawer-button {
-    right: 0 !important;
-    left: initial !important;
-    left: auto;
-}
-
-.mdl-layout__header {
-    color: rgb(255, 255, 255);
-    background-color: rgb(31, 188, 210);
-}
-
-.mdl-layout__header .material-icons {
-    color: rgb(255, 255, 255);
-}
-
-.mdl-layout__header-row .mdl-navigation__link {
-    color: rgb(255, 255, 255);
-}
-
-.md-simple-snackbar-action {
-    border: 0px;
-    cursor: pointer;
-}
-
-.adf-flag-icon-gb {
-    background-image: url(./flags/gb.svg);
-}
-
-.adf-flag-icon-it {
-    background-image: url(./flags/it.svg);
-}
-
-.adf-flag-icon-ru {
-    background-image: url(./flags/ru.svg);
-}
-
-.adf-flag-icon:before {
-    content: "\00a0";
-}
-
-.adf-flag-icon {
-    background-size: contain;
-    background-position: 50%;
-    background-repeat: no-repeat;
-    position: relative;
-    display: inline-block;
-    width: 1.33333333em;
-    line-height: 1em;
-}

demo-shell-ng2/public/css/flags/gb.svg

@@ -1,15 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640">
-  <defs>
-    <clipPath id="a">
-      <path fill-opacity=".67" d="M-85.333 0h682.67v512h-682.67z"/>
-    </clipPath>
-  </defs>
-  <g clip-path="url(#a)" transform="translate(80) scale(.94)">
-    <g stroke-width="1pt">
-      <path fill="#006" d="M-256 0H768.02v512.01H-256z"/>
-      <path d="M-256 0v57.244l909.535 454.768H768.02V454.77L-141.515 0H-256zM768.02 0v57.243L-141.515 512.01H-256v-57.243L653.535 0H768.02z" fill="#fff"/>
-      <path d="M170.675 0v512.01h170.67V0h-170.67zM-256 170.67v170.67H768.02V170.67H-256z" fill="#fff"/>
-      <path d="M-256 204.804v102.402H768.02V204.804H-256zM204.81 0v512.01h102.4V0h-102.4zM-256 512.01L85.34 341.34h76.324l-341.34 170.67H-256zM-256 0L85.34 170.67H9.016L-256 38.164V0zm606.356 170.67L691.696 0h76.324L426.68 170.67h-76.324zM768.02 512.01L426.68 341.34h76.324L768.02 473.848v38.162z" fill="#c00"/>
-    </g>
-  </g>
-</svg>

demo-shell-ng2/public/css/flags/it.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" version="1">
-  <g fill-rule="evenodd" stroke-width="1pt">
-    <path fill="#fff" d="M0 0h640v479.997H0z"/>
-    <path fill="#005700" d="M0 0h213.331v479.997H0z"/>
-    <path fill="#fc0000" d="M426.663 0h213.331v479.997H426.663z"/>
-  </g>
-</svg>

demo-shell-ng2/public/css/flags/ru.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" version="1">
-  <g fill-rule="evenodd" stroke-width="1pt">
-    <path fill="#fff" d="M0 0h640v480H0z"/>
-    <path fill="#01017e" d="M0 160.003h640V480H0z"/>
-    <path fill="#fe0101" d="M0 319.997h640V480H0z"/>
-  </g>
-</svg>