diff options
Diffstat (limited to 'openecomp-ui/resources/scss/common')
| -rw-r--r-- | openecomp-ui/resources/scss/common/_base.scss | 8 | ||||
| -rw-r--r-- | openecomp-ui/resources/scss/common/_layout.scss | 7 | ||||
| -rw-r--r-- | openecomp-ui/resources/scss/common/_typography.scss | 84 | ||||
| -rw-r--r-- | openecomp-ui/resources/scss/common/_utils.scss | 189 | ||||
| -rw-r--r-- | openecomp-ui/resources/scss/common/_variables.scss | 66 |
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"; + |