openecomp-ui/resources/scss/common/_utils.scss

   1
   2
   3 /* Prefix */
   4
   5 $box-sizing-prefix: webkit moz spec;
   6 $border-radius-prefix: webkit spec;
   7 $box-shadow-radius-prefix: webkit moz spec;
   8 $text-shadow-radius-prefix: spec;
   9 $text-shadow-prefix: spec;
  10 $box-shadow-prefix: all;
  11 $linear-gradient-prefix: all;
  12 $transition-prefix: webkit moz o spec;
  13 $flex-prefix: webkit spec;
  14 $browserPrefixes: webkit moz o ms;
  15
  16 @mixin prefix($property, $value, $prefixeslist: 'all') {
  17   @if $prefixeslist == all {
  18     -webkit-#{$property}: $value;
  19     -moz-#{$property}: $value;
  20     -ms-#{$property}: $value;
  21     -o-#{$property}: $value;
  22     #{$property}: $value;
  23   } @else {
  24     @each $prefix in $prefixeslist {
  25       @if $prefix == webkit {
  26         -webkit-#{$property}: $value;
  27       } @else if $prefix == moz {
  28         -moz-#{$property}: $value;
  29       } @else if $prefix == ms {
  30         -ms-#{$property}: $value;
  31       } @else if $prefix == o {
  32         -o-#{$property}: $value;
  33       } @else if $prefix == spec {
  34         #{$property}: $value;
  35       } @else {
  36         @warn "No such prefix: #{$prefix}";
  37       }
  38     }
  39   }
  40 }
  41
  42 /* Value Prefix*/
  43 @mixin value-suffix-with-range($property, $valuesuffix, $from, $to, $prefixeslist) {
  44
  45   @if $prefixeslist == all {
  46     #{property} : -webkit-#{$valuesuffix}($from, $to);
  47     #{property} : -moz-#{$valuesuffix}($from, $to);
  48     #{property} : -o-#{$valuesuffix}($from, $to);
  49     #{property} : -ms-#{$valuesuffix}($from, $to);
  50
  51   } @else {
  52     @each $prefix in $prefixeslist {
  53       @if $prefix == webkit {
  54         #{property} : -webkit-#{$valuesuffix}($from, $to);
  55       } @else if $prefix == moz {
  56         #{property} : -moz-#{$valuesuffix}($from, $to);
  57       } @else if $prefix == ms {
  58         #{property} : -ms-#{$valuesuffix}($from, $to);
  59       } @else if $prefix == o {
  60         #{property} : -o-#{$valuesuffix}($from, $to);
  61       } @else {
  62         @warn "No such prefix: #{$prefix}";
  63       }
  64     }
  65   }
  66 }
  67
  68 /* Box sizing */
  69 @mixin box-sizing($value: border-box) {
  70   @include prefix(box-sizing, $value, $box-sizing-prefix);
  71 }
  72
  73 /* Borders & Shadows */
  74 @mixin box-shadow($value) {
  75   @include prefix(box-shadow, $value, $box-shadow-radius-prefix);
  76 }
  77
  78 @mixin text-shadow($value) {
  79   @include prefix(text-shadow, $value, $text-shadow-radius-prefix);
  80 }
  81
  82 @mixin border-radius($value, $positions: all) {
  83   @if ($positions == all) {
  84     @include prefix(border-radius, $value, $border-radius-prefix);
  85   } @else {
  86     @each $position in $positions {
  87       @include prefix(border-#{$position}-radius, $value, $border-radius-prefix);
  88     }
  89   }
  90
  91 }
  92
  93 @mixin transition($value) {
  94   @include prefix(transition, $value, $transition-prefix);
  95 }
  96
  97 /* Opacity */
  98 @mixin opacity($alpha) {
  99   $ie-opacity: round($alpha * 100);
 100   opacity: $alpha;
 101   filter: unquote("alpha(opacity = #{$ie-opacity})");
 102 }
 103
 104 /* Ellipsis */
 105 @mixin ellipsis($width: 100%, $display: inline-block, $max-width: none) {
 106   overflow: hidden;
 107   text-overflow: ellipsis;
 108   width: $width;
 109   white-space: nowrap;
 110   display: $display;
 111   max-width: $max-width;
 112 }
 113
 114 @mixin multiline-ellipsis($lineHeight: 1.3em, $lineCount: 2, $bgColor: $white){
 115   overflow: hidden;
 116   position: relative;
 117   line-height: $lineHeight;
 118   max-height: $lineHeight * $lineCount;
 119   text-align: justify;
 120   word-break: break-all;
 121   // margin-right: -1em;
 122   padding-right: 1em;
 123   &:before {
 124     content: '...';
 125     position: absolute;
 126     right: 3px;
 127     bottom: 0;
 128   }
 129   &:after {
 130     content: '';
 131     position: absolute;
 132     right: 0;
 133     width: 1em;
 134     height: 1em;
 135     margin-top: 0.2em;
 136     background: $bgColor;
 137   }
 138 }
 139
 140 @mixin gradient($from, $to) {
 141   /* fallback/image non-cover color */
 142   background-color: $from;
 143   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
 144   @include value-suffix-with-range(background-color, linear-gradient, $from, $to, $linear-gradient-prefix);
 145 }
 146
 147 /* Vertical placement of multuple lines of text */
 148 @mixin vertical-text($height) {
 149   position: absolute;
 150   top: 50%;
 151   margin-top: -$height/2;
 152 }
 153
 154 @mixin text-vertical-align($align: middle) {
 155   display: table;
 156   width: 100%;
 157
 158   & > * {
 159     vertical-align: $align;
 160     display: table-cell;
 161   }
 162 }
 163
 164 @mixin center-element($width) {
 165   width: $width;
 166   margin-left: auto;
 167   margin-right: auto;
 168 }
 169
 170 @mixin center-content($width) {
 171   & > * {
 172     @include center-element($width);
 173   }
 174 }
 175
 176 /* transform-rotate */
 177 // @mixin
 178 //         Defines a 2D rotation, the angle is specified in the parameter
 179 // @param
 180 //     $deg - angle in degrees
 181 @mixin transform-rotate($deg) {
 182   transform: rotate($deg + deg); /* IE10 and Mozilla */
 183   -ms-transform: rotate($deg + deg); /* IE 9 */
 184   -webkit-transform: rotate($deg + deg); /* Safari and Chrome */
 185 }
 186
 187 /* transform-translate */
 188 // @mixin
 189 //         Defines a 2D rotation, the angle is specified in the parameter
 190 // @param
 191 //     $deg - angle in degrees
 192 @mixin transform-translate($x, $y) {
 193   transform: translate($x, $y); /* IE10 and Mozilla */
 194   -ms-transform: translate($x, $y); /* IE 9 */
 195   -webkit-transform: translate($x, $y); /* Safari and Chrome */
 196 }
 197
 198 /* transform-scale */
 199 // @mixin
 200 //         Defines a 2D scale transformation, changing the elements width and height
 201 // @param
 202 //     $width - width
 203 // @param
 204 //     $height - height
 205 @mixin transform-scale($width, $height) {
 206   transform: scale($width, $height); /* IE10 and Mozilla */
 207   -ms-transform: scale($width, $height); /* IE 9 */
 208   -webkit-transform: scale($width, $height); /* Safari and Chrome */
 209 }
 210
 211 @mixin scrollable() {
 212   ::-webkit-scrollbar {
 213     width: 8px;
 214   }
 215 }
 216
 217 @mixin create-circle($size, $bgcolor) {
 218   border-radius: 50%;
 219   width: $size;
 220   height: $size;
 221   background: $bgcolor;
 222         border: 3px solid $bgcolor;
 223         display: flex;
 224         align-items: center;
 225         justify-content: center;
 226 }
 227
 228 /**/
 229 @mixin keyframe-animation($animationType, $properties, $fromValue, $toValue) {
 230
 231   @keyframes #{$animationType} {
 232     from {
 233       $startIndex: 1;
 234       @each $property in $properties {
 235         #{$property}: nth($fromValue, $startIndex);
 236         $startIndex: $startIndex + 1;
 237       }
 238     }
 239     to {
 240       $startIndex: 1;
 241       @each $property in $properties {
 242         #{$property}: nth($toValue, $startIndex);
 243         $startIndex: $startIndex + 1;
 244       }
 245     }
 246   }
 247   @-moz-keyframes #{$animationType}{
 248     /* Firefox */
 249     from {
 250       $startIndex: 1;
 251       @each $property in $properties {
 252         #{$property}: nth($fromValue, $startIndex);
 253         $startIndex: $startIndex + 1;
 254       }
 255     }
 256     to {
 257       $startIndex: 1;
 258       @each $property in $properties {
 259         #{$property}: nth($toValue, $startIndex);
 260         $startIndex: $startIndex + 1;
 261       }
 262     }
 263   }
 264   @-webkit-keyframes #{$animationType} {
 265     /* Safari and Chrome */
 266     from {
 267       $startIndex: 1;
 268       @each $property in $properties {
 269         #{$property}: nth($fromValue, $startIndex);
 270         $startIndex: $startIndex + 1;
 271       }
 272     }
 273     to {
 274       $startIndex: 1;
 275       @each $property in $properties {
 276         #{$property}: nth($toValue, $startIndex);
 277         $startIndex: $startIndex + 1;
 278       }
 279     }
 280   }
 281   @-o-keyframes #{$animationType} {
 282     /* Opera */
 283     from {
 284       $startIndex: 1;
 285       @each $property in $properties {
 286         #{$property}: nth($fromValue, $startIndex);
 287         $startIndex: $startIndex + 1;
 288       }
 289     }
 290     to {
 291       $startIndex: 1;
 292       @each $property in $properties {
 293         #{$property}: nth($toValue, $startIndex);
 294         $startIndex: $startIndex + 1;
 295       }
 296     }
 297   }
 298 }
 299
 300
 301 /**/
 302 @mixin border-shadow($xShadow: 0.545px, $yShadow: 0.839px, $blur: 4px, $spread: 0, $color: $light-gray, $opacity: 0.2) {
 303   @include box-shadow($xShadow $yShadow $blur $spread rgba($color, $opacity));
 304 }
 305
 306 /* percent-plus-value */
 307 // @mixin
 308 //     Calculate length property (e.g. width, margin) by adding a value (e.g. in pixels)
 309 //     to a percentage of container height/width
 310 @mixin percent-plus-value($property, $value, $percent: 100%) {
 311   $string: 'calc(' + $percent + ' + ' + $value + ')';
 312   #{$property}: unquote($string);
 313 }