diff options
Diffstat (limited to 'openecomp-ui/resources/scss/common')
| -rw-r--r-- | openecomp-ui/resources/scss/common/_base.scss | 57 | ||||
| -rw-r--r-- | openecomp-ui/resources/scss/common/_layout.scss | 62 | ||||
| -rw-r--r-- | openecomp-ui/resources/scss/common/_typography.scss | 101 | ||||
| -rw-r--r-- | openecomp-ui/resources/scss/common/_utils.scss | 381 | ||||
| -rw-r--r-- | openecomp-ui/resources/scss/common/_variables.scss | 12 |
5 files changed, 317 insertions, 296 deletions
diff --git a/openecomp-ui/resources/scss/common/_base.scss b/openecomp-ui/resources/scss/common/_base.scss index e4aa23f876..b9cfd7906a 100644 --- a/openecomp-ui/resources/scss/common/_base.scss +++ b/openecomp-ui/resources/scss/common/_base.scss @@ -1,6 +1,6 @@ html { - font-size: 100%; - height: 100%; + font-size: 100%; + height: 100%; } body { @@ -16,65 +16,70 @@ $scrollbar-height: 8px; $ff-scrollbar-width: 17px; /* scrollbar styling for Google Chrome | Safari | Opera */ ::-webkit-scrollbar { - width: $scrollbar-width; - height: $scrollbar-height; + width: $scrollbar-width; + height: $scrollbar-height; } ::-webkit-scrollbar-track { - background-color: transparent; - border-radius: 10px; + background-color: transparent; + border-radius: 10px; } ::-webkit-scrollbar-thumb { - border-radius: 10px; - background-color: $light-gray; - border-right: 2px solid $content-background-color; + 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; + list-style: none; } -h1, h2, h3, h4, h5, h6, ul { - margin: 0; - padding: 0; +h1, +h2, +h3, +h4, +h5, +h6, +ul { + margin: 0; + padding: 0; } input { - - padding: 7px 10px; + padding: 7px 10px; } .disabled { - opacity: 0.7 !important; + opacity: 0.7 !important; } fieldset { - border: none; + border: none; } fieldset { - label { - display: inline-block; - } + label { + display: inline-block; + } } .nav-tabs > li > a:focus, .btn:focus, .btn:active:focus, .btn.active:focus { - outline: none; + outline: none; } .box-hover { - border: 1px solid $light-blue; + border: 1px solid $light-blue; } /* monkey patch */ .sdc-button.sdc-button__link.sdc-button.sdc-button__link { - width: initial; - &:focus { - border: none; - } + width: initial; + &:focus { + border: none; + } } diff --git a/openecomp-ui/resources/scss/common/_layout.scss b/openecomp-ui/resources/scss/common/_layout.scss index 6c6a0cf165..58ed1227ce 100644 --- a/openecomp-ui/resources/scss/common/_layout.scss +++ b/openecomp-ui/resources/scss/common/_layout.scss @@ -1,35 +1,53 @@ .sdc-app { - height: 100%; - + height: 100%; } .flex { - display: flex; - flex: 1; + display: flex; + flex: 1; } .flex-column { - @extend .flex; - flex-direction: column; + @extend .flex; + flex-direction: column; } .content-area { - padding: 30px 60px 70px 60px; - overflow-y: auto; - overflow-x: hidden; - height: 100%; - &.no-padding-content-area { - padding: 0; - } + 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; - } -} .page-title { - @extend .heading-1; - @extend .text-uppercase !optional; - margin-bottom: 20px; - color: $blue; + @extend .heading-1; + @extend .text-uppercase !optional; + margin-bottom: 20px; + color: $blue; +} +.sdc-modal { + .sdc-modal__wrapper.sdc-modal-type-custom { + .sdc-modal__content { + padding: 0; + .entitlement-pools-modal, + .license-key-groups-modal, + .manage-permissions-page { + .validation-form-content { + overflow-y: visible; + } + } + .validation-form-content { + padding: 20px 40px; + overflow-y: auto; + .no-bottom-margin { + margin-bottom: 0; + .customized-date-picker { + margin-bottom: 0; + } + } + } + } + } } diff --git a/openecomp-ui/resources/scss/common/_typography.scss b/openecomp-ui/resources/scss/common/_typography.scss index c4ae856b5f..230881022f 100644 --- a/openecomp-ui/resources/scss/common/_typography.scss +++ b/openecomp-ui/resources/scss/common/_typography.scss @@ -1,23 +1,24 @@ /* Fonts */ @mixin base-font-regular() { - font-family: OpenSans, OpenSans-Regular, 'Open Sans',omnes-regular, Arial, sans-serif; + font-family: OpenSans, OpenSans-Regular, 'Open Sans', omnes-regular, Arial, + sans-serif; } @mixin base-font-light() { - font-family: OpenSans-Light, 'Open Sans', omnes-light, Arial, sans-serif; + font-family: OpenSans-Light, 'Open Sans', omnes-light, Arial, sans-serif; } -@mixin base-font-italic(){ - font-family: OpenSans-Italic, 'Open Sans', omnes-italic, Arial, sans-serif; +@mixin base-font-italic() { + font-family: OpenSans-Italic, 'Open Sans', omnes-italic, Arial, sans-serif; } @mixin base-font-semibold() { - font-family: OpenSans-Semibold, 'Open Sans', omnes-medium, Arial, sans-serif; + font-family: OpenSans-Semibold, 'Open Sans', omnes-medium, Arial, sans-serif; } @mixin base-font-bold() { - font-family: OpenSans-Bold, 'Open Sans', omnes-bold, Arial, sans-serif; + font-family: OpenSans-Bold, 'Open Sans', omnes-bold, Arial, sans-serif; } $heading-font-1: 28px; @@ -34,109 +35,107 @@ $body-font-4: 10px; $icon-font-size: 10px; $icon-font-family: Arial; - .heading-1 { - @include base-font-light; - font-size: $heading-font-1; + @include base-font-light; + font-size: $heading-font-1; } .heading-2 { - @include base-font-light; - font-size: $heading-font-2; + @include base-font-light; + font-size: $heading-font-2; } .heading-3-light { - @include base-font-light; - font-size: $heading-font-3; - @extend .text-uppercase !optional; + @include base-font-light; + font-size: $heading-font-3; + @extend .text-uppercase !optional; } .heading-3 { - @include base-font-regular; - font-size: $heading-font-3; - @extend .text-uppercase !optional; + @include base-font-regular; + font-size: $heading-font-3; + @extend .text-uppercase !optional; } .heading-3-semibold { - @include base-font-semibold; - font-size: $heading-font-3; - @extend .text-uppercase !optional; + @include base-font-semibold; + font-size: $heading-font-3; + @extend .text-uppercase !optional; } .heading-4 { - @include base-font-regular; - font-size: $heading-font-4; + @include base-font-regular; + font-size: $heading-font-4; } .heading-4-semibold { - @include base-font-semibold; - font-size: $heading-font-4; + @include base-font-semibold; + font-size: $heading-font-4; } .heading-5 { - @include base-font-regular; - font-size: $heading-font-5; + @include base-font-regular; + font-size: $heading-font-5; } .heading-5-semibold { - @include base-font-semibold; - font-size: $heading-font-5; + @include base-font-semibold; + font-size: $heading-font-5; } .body-1 { - @include base-font-regular; - font-size: $body-font-1; + @include base-font-regular; + font-size: $body-font-1; } .body-1-semibold { - @include base-font-semibold; - font-size: $body-font-1; + @include base-font-semibold; + font-size: $body-font-1; } .body-1-light { - @include base-font-light; - font-size: $body-font-1; + @include base-font-light; + font-size: $body-font-1; } .body-2 { - @include base-font-regular; - font-size: $body-font-2; + @include base-font-regular; + font-size: $body-font-2; } .body-2-semibold { - @include base-font-semibold; - font-size: $body-font-2; + @include base-font-semibold; + font-size: $body-font-2; } .body-3 { - @include base-font-regular; - font-size: $body-font-3; + @include base-font-regular; + font-size: $body-font-3; } .body-3-semibold { - @include base-font-semibold; - font-size: $body-font-3; + @include base-font-semibold; + font-size: $body-font-3; } .body-4 { - @include base-font-regular; - font-size: $body-font-4; + @include base-font-regular; + font-size: $body-font-4; } .body-4-semibold { - @include base-font-semibold; - font-size: $body-font-4; + @include base-font-semibold; + font-size: $body-font-4; } .body-3-light { - @include base-font-light; - font-size: $body-font-3; + @include base-font-light; + font-size: $body-font-3; } - .warning-text { - color: $yellow; + color: $yellow; } .error-text { - color: $red; + color: $red; } diff --git a/openecomp-ui/resources/scss/common/_utils.scss b/openecomp-ui/resources/scss/common/_utils.scss index 99b1ff5d9a..aa1c0b6ff0 100644 --- a/openecomp-ui/resources/scss/common/_utils.scss +++ b/openecomp-ui/resources/scss/common/_utils.scss @@ -1,5 +1,3 @@ - - /* Prefix */ $box-sizing-prefix: webkit moz spec; @@ -14,163 +12,166 @@ $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 { + @if $prefixeslist == all { -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}"; - } + } @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}"; - } + @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); + @include prefix(box-sizing, $value, $box-sizing-prefix); } /* Borders & Shadows */ @mixin box-shadow($value) { - @include prefix(box-shadow, $value, $box-shadow-radius-prefix); + @include prefix(box-shadow, $value, $box-shadow-radius-prefix); } @mixin text-shadow($value) { - @include prefix(text-shadow, $value, $text-shadow-radius-prefix); + @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); + @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); + @include prefix(transition, $value, $transition-prefix); } /* Opacity */ @mixin opacity($alpha) { - $ie-opacity: round($alpha * 100); - opacity: $alpha; - filter: unquote("alpha(opacity = #{$ie-opacity})"); + $ie-opacity: round($alpha * 100); + opacity: $alpha; + filter: unquote('alpha(opacity = #{$ie-opacity})'); } /* Ellipsis */ @mixin ellipsis($width: 100%, $display: inline-block, $max-width: none) { - overflow: hidden; - text-overflow: ellipsis; - width: $width; - white-space: nowrap; - display: $display; - max-width: $max-width; + overflow: hidden; + text-overflow: ellipsis; + width: $width; + white-space: nowrap; + 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 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) { - /* 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); + /* 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; + position: absolute; + top: 50%; + margin-top: -$height/2; } @mixin text-vertical-align($align: middle) { - display: table; - width: 100%; + display: table; + width: 100%; - & > * { - vertical-align: $align; - display: table-cell; - } + & > * { + vertical-align: $align; + display: table-cell; + } } @mixin center-element($width) { - width: $width; - margin-left: auto; - margin-right: auto; + width: $width; + margin-left: auto; + margin-right: auto; } @mixin center-content($width) { - & > * { - @include center-element($width); - } + & > * { + @include center-element($width); + } } /* transform-rotate */ @@ -179,9 +180,9 @@ $browserPrefixes: webkit moz o ms; // @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: rotate($deg + deg); /* IE10 and Mozilla */ + -ms-transform: rotate($deg + deg); /* IE 9 */ + -webkit-transform: rotate($deg + deg); /* Safari and Chrome */ } /* transform-translate */ @@ -190,9 +191,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 */ @@ -203,104 +204,102 @@ $browserPrefixes: webkit moz o ms; // @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 */ + 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; - } + ::-webkit-scrollbar { + width: 8px; + } } @mixin create-circle($size, $bgcolor) { - border-radius: 50%; - width: $size; - height: $size; - background: $bgcolor; - border: 3px solid $bgcolor; - display: flex; - align-items: center; - justify-content: center; + border-radius: 50%; + width: $size; + height: $size; + background: $bgcolor; + border: 3px solid $bgcolor; + display: flex; + align-items: center; + justify-content: center; } /**/ @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; - } + @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; - } + @-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; + } + } } - 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; + } + } } - } - @-webkit-keyframes #{$animationType} { - /* Safari and Chrome */ - from { - $startIndex: 1; - @each $property in $properties { - #{$property}: nth($fromValue, $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; + } + } } - 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; - } - } - } } - /**/ @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)); + @include box-shadow($xShadow $yShadow $blur $spread rgba($color, $opacity)); } /* percent-plus-value */ @@ -308,6 +307,6 @@ $browserPrefixes: webkit moz o ms; // Calculate length property (e.g. width, margin) by adding a value (e.g. in pixels) // to a percentage of container height/width @mixin percent-plus-value($property, $value, $percent: 100%) { - $string: 'calc(' + $percent + ' + ' + $value + ')'; - #{$property}: unquote($string); + $string: 'calc(' + $percent + ' + ' + $value + ')'; + #{$property}: unquote($string); } diff --git a/openecomp-ui/resources/scss/common/_variables.scss b/openecomp-ui/resources/scss/common/_variables.scss index 6ea204aa76..48d9f4b68e 100644 --- a/openecomp-ui/resources/scss/common/_variables.scss +++ b/openecomp-ui/resources/scss/common/_variables.scss @@ -1,4 +1,3 @@ - // primary colors $blue: #009fdb; $dark-blue: #0568ae; @@ -29,7 +28,7 @@ $tlv-gray: #f8f8f8; $tlv-light-gray: #eaeaea; $tlv-hover: #e6f6fb; $highlight-gray: #eceff3; -$transparent-black: rgba(0,0,0,.3); +$transparent-black: rgba(0, 0, 0, 0.3); $content-background-color: $white; @@ -44,8 +43,9 @@ $tablet-max-width: 1024px; $laptop-min-width: 1224px; $desktop-min-width: 1824px; +$loader-background: #e1e4e6; - - - - +$action-button-active-bg: #0091c7; +$action-button-active-border: #006186; +$action-button-hover-bg: #1ec2ff; +$action-button-hover-border: #0091c8; |