Add new code new version

Change-Id: Ic02a76313503b526f17c3df29eb387a29fe6a42a
Signed-off-by: Michael Lando <ml636r@att.com>

5 files changed, 549 insertions, 0 deletions

diff --git a/openecomp-ui/resources/scss/common/_base.scss b/openecomp-ui/resources/scss/common/_base.scss
new file mode 100644
index 0000000000..aa3ffdeb2b
--- /dev/null
+++ b/openecomp-ui/resources/scss/common/_base.scss
@@ -0,0 +1,66 @@
+html {
+  font-size: 100%;
+  height: 100%;
+}
+
+body {
+  /* scrollbar styling for Internet Explorer */
+  scrollbar-face-color: $scroll-bar-color;
+  scrollbar-track-color: $scroll-bar-color;
+  height: 100%;
+  @extend %noselect;
+}
+
+/* scrollbar styling for Google Chrome | Safari | Opera */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: $light-gray;
+  border-right: 2px solid $content-background-color;
+}
+
+/* Mozilla Firefox currently doesn't support scrollbar styling */
+
+ul {
+  list-style: none;
+}
+
+h1, h2, h3, h4, h5, h6, ul {
+  margin: 0;
+  padding: 0;
+}
+
+input {
+
+  padding: 7px 10px;
+}
+
+fieldset {
+  border: none;
+}
+
+fieldset {
+  label {
+	display: inline-block;
+  }
+}
+
+.nav-tabs > li > a:focus,
+.btn:focus,
+.btn:active:focus,
+.btn.active:focus {
+  outline: none;
+}
+
+.box-hover {
+  border: 1px solid $light-blue;
+}
diff --git a/openecomp-ui/resources/scss/common/_layout.scss b/openecomp-ui/resources/scss/common/_layout.scss
new file mode 100644
index 0000000000..6d63a79f55
--- /dev/null
+++ b/openecomp-ui/resources/scss/common/_layout.scss
@@ -0,0 +1,22 @@
+.sdc-app {
+  height: 100%;
+
+}
+.flex {
+  display: flex;
+  flex: 1;
+}
+
+.flex-column {
+  @extend .flex;
+  flex-direction: column;
+}
+
+.content-area {
+  padding: 30px 60px 70px 60px;
+  overflow-y: auto;
+  height: 100%;
+  &.no-padding-content-area {
+    padding: 0;
+  }
+}
diff --git a/openecomp-ui/resources/scss/common/_typography.scss b/openecomp-ui/resources/scss/common/_typography.scss
new file mode 100644
index 0000000000..46edfb03de
--- /dev/null
+++ b/openecomp-ui/resources/scss/common/_typography.scss
@@ -0,0 +1,115 @@
+/* Fonts */
+@font-face {
+  font-family: Omnes-Light;
+  src: url('../fonts/omnes-att-light.otf');
+}
+
+@font-face {
+  font-family: Omnes-Regular;
+  src: url('../fonts/omnes-att-regular.otf');
+}
+
+@font-face {
+  font-family: Omnes-Medium;
+  src: url('../fonts/omnes-att-medium.otf');
+}
+
+@font-face {
+  font-family: Omnes-Bold;
+  src: url('../fonts/omnes-att-bold.otf');
+}
+
+$base-font-regular: omnes-regular, "Omnes-Regular";
+$base-font-light: omnes-light, "Omnes-Light";
+$base-font-medium: omnes-medium, "Omnes-Medium";
+$base-font-bold: omnes-bold, "Omnes-Bold";
+
+$heading-font-1: 36px;
+$heading-font-2: 24px;
+$heading-font-3: 20px;
+$heading-font-4: 18px;
+$heading-font-5: 16px;
+
+$body-font-1: 14px;
+$body-font-2: 13px;
+$body-font-3: 12px;
+
+$icon-font-size: 10px;
+$icon-font-family: FontAwesome;
+$radio-font-family: Arial;
+
+.heading-1 {
+  font-family: $base-font-light;
+  font-size: $heading-font-1;
+}
+
+.heading-2 {
+  font-family: $base-font-light;
+  font-size: $heading-font-2;
+}
+
+.heading-3-light {
+  font-family: $base-font-light;
+  font-size: $heading-font-3;
+}
+
+.heading-3 {
+  font-family: $base-font-regular;
+  font-size: $heading-font-3;
+}
+
+.heading-3-medium {
+  font-family: $base-font-medium;
+  font-size: $heading-font-3;
+}
+
+.heading-4 {
+  font-family: $base-font-regular;
+  font-size: $heading-font-4;
+}
+
+.heading-4-medium {
+  font-family: $base-font-medium;
+  font-size: $heading-font-4;
+}
+
+.heading-5 {
+  font-family: $base-font-regular;
+  font-size: $heading-font-5;
+}
+
+.heading-5-medium {
+  font-family: $base-font-medium;
+  font-size: $heading-font-5;
+}
+
+.body-1 {
+  font-family: $base-font-regular;
+  font-size: $body-font-1;
+}
+
+.body-1-medium {
+  font-family: $base-font-medium;
+  font-size: $body-font-1;
+}
+
+.body-2 {
+  font-family: $base-font-regular;
+  font-size: $body-font-2;
+}
+
+.body-2-medium {
+  font-family: $base-font-medium;
+  font-size: $body-font-2;
+}
+
+.body-3 {
+  font-family: $base-font-regular;
+  font-size: $body-font-3;
+}
+
+.body-3-medium {
+  font-family: $base-font-medium;
+  font-size: $body-font-3;
+}
+
diff --git a/openecomp-ui/resources/scss/common/_utils.scss b/openecomp-ui/resources/scss/common/_utils.scss
new file mode 100644
index 0000000000..70f3416e4b
--- /dev/null
+++ b/openecomp-ui/resources/scss/common/_utils.scss
@@ -0,0 +1,299 @@
+
+
+/* Prefix */
+
+$box-sizing-prefix: webkit moz spec;
+$border-radius-prefix: webkit spec;
+$box-shadow-radius-prefix: webkit moz spec;
+$text-shadow-radius-prefix: spec;
+$text-shadow-prefix: spec;
+$box-shadow-prefix: all;
+$linear-gradient-prefix: all;
+$transition-prefix: webkit moz o spec;
+$flex-prefix: webkit spec;
+$browserPrefixes: webkit moz o ms;
+
+@mixin prefix($property, $value, $prefixeslist: 'all') {
+  @if $prefixeslist == all {
+	-webkit-#{$property}: $value;
+	-moz-#{$property}: $value;
+	-ms-#{$property}: $value;
+	-o-#{$property}: $value;
+	#{$property}: $value;
+  } @else {
+	@each $prefix in $prefixeslist {
+	  @if $prefix == webkit {
+		-webkit-#{$property}: $value;
+	  } @else if $prefix == moz {
+		-moz-#{$property}: $value;
+	  } @else if $prefix == ms {
+		-ms-#{$property}: $value;
+	  } @else if $prefix == o {
+		-o-#{$property}: $value;
+	  } @else if $prefix == spec {
+		#{$property}: $value;
+	  } @else {
+		@warn "No such prefix: #{$prefix}";
+	  }
+	}
+  }
+}
+
+/* Value Prefix*/
+@mixin value-suffix-with-range($property, $valuesuffix, $from, $to, $prefixeslist) {
+
+  @if $prefixeslist == all {
+	#{property} : -webkit-#{$valuesuffix}($from, $to);
+	#{property} : -moz-#{$valuesuffix}($from, $to);
+	#{property} : -o-#{$valuesuffix}($from, $to);
+	#{property} : -ms-#{$valuesuffix}($from, $to);
+
+  } @else {
+	@each $prefix in $prefixeslist {
+	  @if $prefix == webkit {
+		#{property} : -webkit-#{$valuesuffix}($from, $to);
+	  } @else if $prefix == moz {
+		#{property} : -moz-#{$valuesuffix}($from, $to);
+	  } @else if $prefix == ms {
+		#{property} : -ms-#{$valuesuffix}($from, $to);
+	  } @else if $prefix == o {
+		#{property} : -o-#{$valuesuffix}($from, $to);
+	  } @else {
+		@warn "No such prefix: #{$prefix}";
+	  }
+	}
+  }
+}
+
+/* Box sizing */
+@mixin box-sizing($value: border-box) {
+  @include prefix(box-sizing, $value, $box-sizing-prefix);
+}
+
+/* Borders & Shadows */
+@mixin box-shadow($value) {
+  @include prefix(box-shadow, $value, $box-shadow-radius-prefix);
+}
+
+@mixin text-shadow($value) {
+  @include prefix(text-shadow, $value, $text-shadow-radius-prefix);
+}
+
+@mixin border-radius($value, $positions: all) {
+  @if ($positions == all) {
+	@include prefix(border-radius, $value, $border-radius-prefix);
+  } @else {
+	@each $position in $positions {
+	  @include prefix(border-#{$position}-radius, $value, $border-radius-prefix);
+	}
+  }
+
+}
+
+@mixin transition($value) {
+  @include prefix(transition, $value, $transition-prefix);
+}
+
+/* Opacity */
+@mixin opacity($alpha) {
+  $ie-opacity: round($alpha * 100);
+  opacity: $alpha;
+  filter: unquote("alpha(opacity = #{$ie-opacity})");
+}
+
+/* Ellipsis */
+@mixin ellipsis() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  white-space: nowrap;
+  display: inline-block;
+}
+
+@mixin gradient($from, $to) {
+  /* fallback/image non-cover color */
+  background-color: $from;
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
+  @include value-suffix-with-range(background-color, linear-gradient, $from, $to, $linear-gradient-prefix);
+}
+
+/* Vertical placement of multuple lines of text */
+@mixin vertical-text($height) {
+  position: absolute;
+  top: 50%;
+  margin-top: -$height/2;
+}
+
+@mixin multiline-ellipsis($height, $lineheight, $ellipsiswidth: 3em) {
+
+  $ellipsiswidth: 3em !default;
+
+  .ellipsis {
+	overflow: hidden;
+	height: $height;
+	line-height: $lineheight;
+  }
+
+  .ellipsis:before {
+	content: "";
+	float: left;
+	width: 5px;
+	height: $height;
+  }
+
+  .ellipsis > *:first-child {
+	float: right;
+	width: 100%;
+	margin-left: -5px;
+  }
+
+  .ellipsis:after {
+	content: "\02026";
+
+	float: right;
+	position: relative;
+	top: -25px;
+	left: 100%;
+	width: $ellipsiswidth;
+	margin-left: -$ellipsiswidth;
+	padding-right: 5px;
+
+	text-align: right;
+  }
+
+}
+
+@mixin text-vertical-align($align: middle) {
+  display: table;
+  width: 100%;
+
+  & > * {
+	vertical-align: $align;
+	display: table-cell;
+  }
+}
+
+@mixin center-element($width) {
+  width: $width;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@mixin center-content($width) {
+  & > * {
+	@include center-element($width);
+  }
+}
+
+/* transform-rotate */
+// @mixin
+//	   Defines a 2D rotation, the angle is specified in the parameter
+// @param
+//     $deg - angle in degrees
+@mixin transform-rotate($deg) {
+  transform: rotate($deg + deg); /* IE10 and Mozilla */
+  -ms-transform: rotate($deg + deg); /* IE 9 */
+  -webkit-transform: rotate($deg + deg); /* Safari and Chrome */
+}
+
+/* transform-translate */
+// @mixin
+//	   Defines a 2D rotation, the angle is specified in the parameter
+// @param
+//     $deg - angle in degrees
+@mixin transform-translate($x, $y) {
+	transform: translate($x, $y); /* IE10 and Mozilla */
+	-ms-transform: translate($x, $y); /* IE 9 */
+	-webkit-transform: translate($x, $y); /* Safari and Chrome */
+}
+
+/* transform-scale */
+// @mixin
+//	   Defines a 2D scale transformation, changing the elements width and height
+// @param
+//     $width - width
+// @param
+//     $height - height
+@mixin transform-scale($width, $height) {
+  transform: scale($width, $height); /* IE10 and Mozilla */
+  -ms-transform: scale($width, $height); /* IE 9 */
+  -webkit-transform: scale($width, $height); /* Safari and Chrome */
+}
+
+@mixin scrollable() {
+  ::-webkit-scrollbar {
+	width: 8px;
+  }
+}
+
+/**/
+@mixin keyframe-animation($animationType, $properties, $fromValue, $toValue) {
+
+  @keyframes #{$animationType} {
+    from {
+      $startIndex: 1;
+      @each $property in $properties {
+        #{$property}: nth($fromValue, $startIndex);
+        $startIndex: $startIndex + 1;
+      }
+    }
+    to {
+      $startIndex: 1;
+      @each $property in $properties {
+        #{$property}: nth($toValue, $startIndex);
+        $startIndex: $startIndex + 1;
+      }
+    }
+  }
+  @-moz-keyframes #{$animationType}{
+    /* Firefox */
+    from {
+      $startIndex: 1;
+      @each $property in $properties {
+        #{$property}: nth($fromValue, $startIndex);
+        $startIndex: $startIndex + 1;
+      }
+    }
+    to {
+      $startIndex: 1;
+      @each $property in $properties {
+        #{$property}: nth($toValue, $startIndex);
+        $startIndex: $startIndex + 1;
+      }
+    }
+  }
+  @-webkit-keyframes #{$animationType} {
+    /* Safari and Chrome */
+    from {
+      $startIndex: 1;
+      @each $property in $properties {
+        #{$property}: nth($fromValue, $startIndex);
+        $startIndex: $startIndex + 1;
+      }
+    }
+    to {
+      $startIndex: 1;
+      @each $property in $properties {
+        #{$property}: nth($toValue, $startIndex);
+        $startIndex: $startIndex + 1;
+      }
+    }
+  }
+  @-o-keyframes #{$animationType} {
+    /* Opera */
+    from {
+      $startIndex: 1;
+      @each $property in $properties {
+        #{$property}: nth($fromValue, $startIndex);
+        $startIndex: $startIndex + 1;
+      }
+    }
+    to {
+      $startIndex: 1;
+      @each $property in $properties {
+        #{$property}: nth($toValue, $startIndex);
+        $startIndex: $startIndex + 1;
+      }
+    }
+  }
+}
diff --git a/openecomp-ui/resources/scss/common/_variables.scss b/openecomp-ui/resources/scss/common/_variables.scss
new file mode 100644
index 0000000000..92c20cdfdf
--- /dev/null
+++ b/openecomp-ui/resources/scss/common/_variables.scss
@@ -0,0 +1,47 @@
+
+// primary colors
+$blue: #009fdb;
+$dark-blue: #0568ae;
+$light-blue: #71c5e8;
+$green: #4ca90c;
+$dark-green: #007a3e;
+$light-green: #b5bd00;
+$orange: #ea7400;
+$yellow: #ffb81c;
+$dark-purple: #702f8a;
+$purple: #9063cd;
+$light-purple: #caa2dd;
+$black: #000000;
+$dark-gray: #5a5a5a;
+$gray: #959595;
+$light-gray: #d2d2d2;
+$white: #ffffff;
+
+// Secondary Colors
+$red: #cf2a2a;
+
+$background-alice-blue: #e5f5fb;
+$background-gray: #f2f2f2;
+$text-black: #191919;
+$link-blue: #056bae;
+$functional-green: #007a3e;
+$functional-yellow: #ffb81c;
+$tlv-gray: #f8f8f8;
+$tlv-light-gray: #eaeaea;
+$tlv-hover: #e6f6fb;
+
+$content-background-color: $white;
+
+$scroll-bar-color: $text-black;//$light-gray;
+
+//responsive @media params
+$tablet-max-width: 1024px;
+$laptop-min-width: 1224px;
+$desktop-min-width: 1824px;
+
+/* Textures */
+$images-folder-name: "../images";
+$plus-circle-icon: $images-folder-name + "/plus-circle-icon.svg";
+$interface-icon: $images-folder-name + "/interface.svg";
+$sdc-logo: $images-folder-name + "/logo.svg";
+$warning-icon: $images-folder-name + "/warning.svg";