aboutsummaryrefslogtreecommitdiffstats
path: root/openecomp-ui/resources/scss/common
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/resources/scss/common')
-rw-r--r--openecomp-ui/resources/scss/common/_base.scss66
-rw-r--r--openecomp-ui/resources/scss/common/_layout.scss22
-rw-r--r--openecomp-ui/resources/scss/common/_typography.scss115
-rw-r--r--openecomp-ui/resources/scss/common/_utils.scss299
-rw-r--r--openecomp-ui/resources/scss/common/_variables.scss47
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";