summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/resources/scss/common
diff options
context:
space:
mode:
authorAviZi <avi.ziv@amdocs.com>2017-06-09 02:39:56 +0300
committerAviZi <avi.ziv@amdocs.com>2017-06-09 02:39:56 +0300
commit280f8015d06af1f41a3ef12e8300801c7a5e0d54 (patch)
tree9c1d3978c04cd28068f02073038c936bb49ca9e0 /openecomp-ui/resources/scss/common
parentfd3821dad11780d33c5373d74c957c442489945e (diff)
[SDC-29] Amdocs OnBoard 1707 initial commit.
Change-Id: Ie4d12a3f574008b792899b368a0902a8b46b5370 Signed-off-by: AviZi <avi.ziv@amdocs.com>
Diffstat (limited to 'openecomp-ui/resources/scss/common')
-rw-r--r--openecomp-ui/resources/scss/common/_base.scss8
-rw-r--r--openecomp-ui/resources/scss/common/_layout.scss7
-rw-r--r--openecomp-ui/resources/scss/common/_typography.scss84
-rw-r--r--openecomp-ui/resources/scss/common/_utils.scss189
-rw-r--r--openecomp-ui/resources/scss/common/_variables.scss66
5 files changed, 226 insertions, 128 deletions
diff --git a/openecomp-ui/resources/scss/common/_base.scss b/openecomp-ui/resources/scss/common/_base.scss
index aa3ffdeb2b..e901db000e 100644
--- a/openecomp-ui/resources/scss/common/_base.scss
+++ b/openecomp-ui/resources/scss/common/_base.scss
@@ -44,6 +44,10 @@ input {
padding: 7px 10px;
}
+.disabled {
+ opacity: 0.7 !important;
+}
+
fieldset {
border: none;
}
@@ -64,3 +68,7 @@ fieldset {
.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
index 6d63a79f55..dc2a33ccc7 100644
--- a/openecomp-ui/resources/scss/common/_layout.scss
+++ b/openecomp-ui/resources/scss/common/_layout.scss
@@ -15,8 +15,15 @@
.content-area {
padding: 30px 60px 70px 60px;
overflow-y: auto;
+ overflow-x: hidden;
height: 100%;
&.no-padding-content-area {
padding: 0;
}
}
+
+.onborading-modal {
+ .modal-title {
+ text-transform: uppercase;
+ }
+} \ No newline at end of file
diff --git a/openecomp-ui/resources/scss/common/_typography.scss b/openecomp-ui/resources/scss/common/_typography.scss
index 46edfb03de..1543f0adcd 100644
--- a/openecomp-ui/resources/scss/common/_typography.scss
+++ b/openecomp-ui/resources/scss/common/_typography.scss
@@ -1,28 +1,20 @@
/* 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');
+@mixin base-font-regular() {
+ font-family: omnes-regular, Arial, sans-serif;
}
-@font-face {
- font-family: Omnes-Medium;
- src: url('../fonts/omnes-att-medium.otf');
+@mixin base-font-light() {
+ font-family: omnes-light, Arial, sans-serif;
}
-@font-face {
- font-family: Omnes-Bold;
- src: url('../fonts/omnes-att-bold.otf');
+@mixin base-font-medium() {
+ font-family: omnes-medium, Arial, sans-serif;
}
-$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";
+@mixin base-font-bold() {
+ font-family: omnes-bold, Arial, sans-serif;
+}
$heading-font-1: 36px;
$heading-font-2: 24px;
@@ -34,82 +26,106 @@ $body-font-1: 14px;
$body-font-2: 13px;
$body-font-3: 12px;
-$icon-font-size: 10px;
-$icon-font-family: FontAwesome;
+$icon-font-size: 11px;
+$icon-font-family: Arial;
$radio-font-family: Arial;
.heading-1 {
- font-family: $base-font-light;
+ @include base-font-light;
font-size: $heading-font-1;
}
.heading-2 {
- font-family: $base-font-light;
+ @include base-font-light;
font-size: $heading-font-2;
}
.heading-3-light {
- font-family: $base-font-light;
+ @include base-font-light;
font-size: $heading-font-3;
+ @extend .text-uppercase !optional;
}
.heading-3 {
- font-family: $base-font-regular;
+ @include base-font-regular;
font-size: $heading-font-3;
+ @extend .text-uppercase !optional;
}
.heading-3-medium {
- font-family: $base-font-medium;
+ @include base-font-medium;
font-size: $heading-font-3;
+ @extend .text-uppercase !optional;
}
.heading-4 {
- font-family: $base-font-regular;
+ @include base-font-regular;
font-size: $heading-font-4;
}
.heading-4-medium {
- font-family: $base-font-medium;
+ @include base-font-medium;
font-size: $heading-font-4;
}
.heading-5 {
- font-family: $base-font-regular;
+ @include base-font-regular;
font-size: $heading-font-5;
}
.heading-5-medium {
- font-family: $base-font-medium;
+ @include base-font-medium;
font-size: $heading-font-5;
}
.body-1 {
- font-family: $base-font-regular;
+ @include base-font-regular;
font-size: $body-font-1;
}
.body-1-medium {
- font-family: $base-font-medium;
+ @include base-font-medium;
+ font-size: $body-font-1;
+}
+
+.body-1-light {
+ @include base-font-light;
font-size: $body-font-1;
}
.body-2 {
- font-family: $base-font-regular;
+ @include base-font-regular;
font-size: $body-font-2;
}
.body-2-medium {
- font-family: $base-font-medium;
+ @include base-font-medium;
font-size: $body-font-2;
}
.body-3 {
- font-family: $base-font-regular;
+ @include base-font-regular;
font-size: $body-font-3;
}
.body-3-medium {
- font-family: $base-font-medium;
+ @include base-font-medium;
font-size: $body-font-3;
}
+.body-3-light {
+ @include base-font-light;
+ font-size: $body-font-3;
+}
+
+.circle-icon-text {
+ @include base-font-medium;
+ font-size: $body-font-1;
+}
+
+.warning-text {
+ color: $orange;
+}
+.error-text {
+ color: $red;
+}
diff --git a/openecomp-ui/resources/scss/common/_utils.scss b/openecomp-ui/resources/scss/common/_utils.scss
index 70f3416e4b..dce623e15d 100644
--- a/openecomp-ui/resources/scss/common/_utils.scss
+++ b/openecomp-ui/resources/scss/common/_utils.scss
@@ -15,27 +15,27 @@ $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;
+ -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}";
- }
- }
+ @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}";
+ }
+ }
}
}
@@ -43,25 +43,25 @@ $browserPrefixes: webkit moz o ms;
@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);
+ #{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}";
- }
- }
+ @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}";
+ }
+ }
}
}
@@ -81,11 +81,11 @@ $browserPrefixes: webkit moz o ms;
@mixin border-radius($value, $positions: all) {
@if ($positions == all) {
- @include prefix(border-radius, $value, $border-radius-prefix);
+ @include prefix(border-radius, $value, $border-radius-prefix);
} @else {
- @each $position in $positions {
- @include prefix(border-#{$position}-radius, $value, $border-radius-prefix);
- }
+ @each $position in $positions {
+ @include prefix(border-#{$position}-radius, $value, $border-radius-prefix);
+ }
}
}
@@ -102,12 +102,39 @@ $browserPrefixes: webkit moz o ms;
}
/* Ellipsis */
-@mixin ellipsis() {
+@mixin ellipsis($width: 100%, $display: inline-block, $max-width: none) {
overflow: hidden;
text-overflow: ellipsis;
- width: 100%;
+ width: $width;
white-space: nowrap;
- display: inline-block;
+ display: $display;
+ max-width: $max-width;
+}
+
+@mixin multiline-ellipsis($lineHeight: 1.3em, $lineCount: 2, $bgColor: $white){
+ overflow: hidden;
+ position: relative;
+ line-height: $lineHeight;
+ max-height: $lineHeight * $lineCount;
+ text-align: justify;
+ word-break: break-all;
+ // margin-right: -1em;
+ padding-right: 1em;
+ &:before {
+ content: '...';
+ position: absolute;
+ right: 3px;
+ bottom: 0;
+ }
+ &:after {
+ content: '';
+ position: absolute;
+ right: 0;
+ width: 1em;
+ height: 1em;
+ margin-top: 0.2em;
+ background: $bgColor;
+ }
}
@mixin gradient($from, $to) {
@@ -124,52 +151,13 @@ $browserPrefixes: webkit moz o ms;
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;
+ vertical-align: $align;
+ display: table-cell;
}
}
@@ -181,7 +169,7 @@ $browserPrefixes: webkit moz o ms;
@mixin center-content($width) {
& > * {
- @include center-element($width);
+ @include center-element($width);
}
}
@@ -202,9 +190,9 @@ $browserPrefixes: webkit moz o ms;
// @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: translate($x, $y); /* IE10 and Mozilla */
+ -ms-transform: translate($x, $y); /* IE 9 */
+ -webkit-transform: translate($x, $y); /* Safari and Chrome */
}
/* transform-scale */
@@ -222,7 +210,22 @@ $browserPrefixes: webkit moz o ms;
@mixin scrollable() {
::-webkit-scrollbar {
- width: 8px;
+ width: 8px;
+ }
+}
+
+@mixin create-circle($size, $bgcolor, $content) {
+ border-radius: 50%;
+ width: $size;
+ height: $size;
+ background: $bgcolor;
+ border: 3px solid $bgcolor;
+ &:after {
+ content: $content;
+ position: relative;
+ left: 9px;
+ top: 9px;
+ @extend .circle-icon-text;
}
}
@@ -297,3 +300,9 @@ $browserPrefixes: webkit moz o ms;
}
}
}
+
+
+/**/
+@mixin border-shadow($xShadow: 0.545px, $yShadow: 0.839px, $blur: 4px, $spread: 0, $color: $light-gray, $opacity: 0.2) {
+ @include box-shadow($xShadow $yShadow $blur $spread rgba($color, $opacity));
+}
diff --git a/openecomp-ui/resources/scss/common/_variables.scss b/openecomp-ui/resources/scss/common/_variables.scss
index 92c20cdfdf..2162b0b1b0 100644
--- a/openecomp-ui/resources/scss/common/_variables.scss
+++ b/openecomp-ui/resources/scss/common/_variables.scss
@@ -19,6 +19,7 @@ $white: #ffffff;
// Secondary Colors
$red: #cf2a2a;
+$crimson: #a94442;
$background-alice-blue: #e5f5fb;
$background-gray: #f2f2f2;
@@ -29,10 +30,15 @@ $functional-yellow: #ffb81c;
$tlv-gray: #f8f8f8;
$tlv-light-gray: #eaeaea;
$tlv-hover: #e6f6fb;
+$highlight-gray: #eceff3;
$content-background-color: $white;
$scroll-bar-color: $text-black;//$light-gray;
+$vc-status-text-color: #42b72a;
+
+// sizes
+$circle-icon-size: 40px;
//responsive @media params
$tablet-max-width: 1024px;
@@ -41,7 +47,59 @@ $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";
+
+/* Icons */
+$icons-folder: "../images/icons";
+$artifacts-icon: $images-folder-name + "/artifacts_icon.png";
+$check-icon: $images-folder-name + "/v_icon.png";
+$base-module-icon: $images-folder-name + "/base_icon.png";
+$module-icon: $images-folder-name + "/module_icon.png";
+$pencil-icon: $images-folder-name + "/pencil_icon-01.svg";
+$vc-check-in-icon: $icons-folder + "/checked_in.png";
+$vc-checkout-icon: $icons-folder + "/checked_out.png";
+$vc-revert-icon: $icons-folder + "/reverticon.png";
+$vc-revert-disabled-icon: $icons-folder + "/revert_icon_disabled.png";
+$vc-save-icon: $icons-folder + "/saveicon.png";
+$vc-save-disabled-icon: $icons-folder + "/save_icon_disable.png";
+$vc-submit-icon: $icons-folder + "/submiticonactive.png";
+$vc-submit-disabled-icon: $icons-folder + "/submit_icon_disable.png";
+$trash-icon: $images-folder-name + "/trash_icon.png";
+$download-icon: $images-folder-name + "/download_icon.png";
+$upload-icon: $images-folder-name + "/upload_icon.png";
+
+
+/* catalog icons */
+$back-icon: $icons-folder + "/back_icon.png";
+/* validation icons */
+$artifacts-selected-icon: $icons-folder + "/artifacts_blue_icon.png";
+$artifacts-regular-icon: $icons-folder + "/artifacts_grey_icon.png";
+$chevron_down: $icons-folder + "/down_chevron.png";
+$error-icon-lg: $icons-folder + "/error_icon_big.png";
+$error-icon-sm: $icons-folder + "/error_icon_small.png";
+$go-to-overview-icon: $icons-folder + "/go_to_overview_icon.png";
+$go-to-overview-disabled-icon: $icons-folder + "/go_to_overview_disable_icon.png";
+$network-selected-icon: $icons-folder + "/network_blue_icon.png";
+$network-icon: $icons-folder + "/network_icon.png";
+$others-selected-icon: $icons-folder + "/others_blue_icon.png";
+$others-icon: $icons-folder + "/others_icon.png";
+$volume-selected-icon: $icons-folder + "/volume_blue_icon.png";
+$volume-icon: $icons-folder + "/volume_icon.png";
+$warning-icon-lg: $icons-folder + "/warning_icon_big.png";
+$warning-icon-sm: $icons-folder + "/warning_icon_small.png";
+$zip-icon: $icons-folder + "/ZIP_icon.png";
+$zip-selected-icon: $icons-folder + "/ZIP_blue_icon.png";
+$heat-icon: $icons-folder + "/nested_heat_icon.png";
+$heat-selected-icon: $icons-folder + "/nested_HEAT_icon_blue.png";
+$env-icon: $icons-folder + "/env_icon.png";
+$env-selected-icon: $icons-folder + "/env_icon_blue.png";
+
+/* vlm summary icons */
+
+$vlm-summary-plus-blue: $icons-folder + "/plus_vlm_summary_icon_blue.png";
+$vlm-summary-plus: $icons-folder + "/plus_vlm_summary_icon.png";
+$vlm-summary-plus-disabled: $icons-folder + "/plus_vlm_summary_disabled_icon.png";
+$vlm-summary-orphans: $icons-folder + "/orphans_grey_icon.png";
+$vlm-summary-orphans-blue: $icons-folder + "/orphans_blue_icon-n.png";
+$vlm-summary-used: $icons-folder + "/vlm_list_view_grey_icon.png";
+$vlm-summary-used-blue: $icons-folder + "/vlm_list_view_blue_icon.png";
+