react 16 upgrade
Issue-ID: SDC-1762
Change-Id: I7701f12fc63bb09f8c985c7c893b984701dcbfab
Signed-off-by: Einav Keidar <einavw@amdocs.com>
diff --git a/openecomp-ui/resources/scss/common/_base.scss b/openecomp-ui/resources/scss/common/_base.scss
index e4aa23f..b9cfd79 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 @@
$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 6c6a0cf..58ed122 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 c4ae856..2308810 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 @@
$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 99b1ff5..aa1c0b6 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 @@
$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 @@
// @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 @@
// @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 @@
// @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;
- }
+ @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;
+ }
+ }
}
- 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;
+ }
+ }
}
- }
- @-moz-keyframes #{$animationType}{
- /* Firefox */
- from {
- $startIndex: 1;
- @each $property in $properties {
- #{$property}: nth($fromValue, $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;
+ }
+ }
}
- 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;
+ }
+ }
}
- }
- @-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;
- }
- }
- }
}
-
/**/
@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 @@
// 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 6ea204a..48d9f4b 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-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 @@
$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;