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, $content) {
 218   border-radius: 50%;
 219   width: $size;
 220   height: $size;
 221   background: $bgcolor;
 222   border: 3px solid $bgcolor;
 223   &:after {
 224     content: $content;
 225     position: relative;
 226     left: 9px;
 227     top: 9px;
 228     @extend .circle-icon-text;
 229   }
 230 }
 231
 232 /**/
 233 @mixin keyframe-animation($animationType, $properties, $fromValue, $toValue) {
 234
 235   @keyframes #{$animationType} {
 236     from {
 237       $startIndex: 1;
 238       @each $property in $properties {
 239         #{$property}: nth($fromValue, $startIndex);
 240         $startIndex: $startIndex + 1;
 241       }
 242     }
 243     to {
 244       $startIndex: 1;
 245       @each $property in $properties {
 246         #{$property}: nth($toValue, $startIndex);
 247         $startIndex: $startIndex + 1;
 248       }
 249     }
 250   }
 251   @-moz-keyframes #{$animationType}{
 252     /* Firefox */
 253     from {
 254       $startIndex: 1;
 255       @each $property in $properties {
 256         #{$property}: nth($fromValue, $startIndex);
 257         $startIndex: $startIndex + 1;
 258       }
 259     }
 260     to {
 261       $startIndex: 1;
 262       @each $property in $properties {
 263         #{$property}: nth($toValue, $startIndex);
 264         $startIndex: $startIndex + 1;
 265       }
 266     }
 267   }
 268   @-webkit-keyframes #{$animationType} {
 269     /* Safari and Chrome */
 270     from {
 271       $startIndex: 1;
 272       @each $property in $properties {
 273         #{$property}: nth($fromValue, $startIndex);
 274         $startIndex: $startIndex + 1;
 275       }
 276     }
 277     to {
 278       $startIndex: 1;
 279       @each $property in $properties {
 280         #{$property}: nth($toValue, $startIndex);
 281         $startIndex: $startIndex + 1;
 282       }
 283     }
 284   }
 285   @-o-keyframes #{$animationType} {
 286     /* Opera */
 287     from {
 288       $startIndex: 1;
 289       @each $property in $properties {
 290         #{$property}: nth($fromValue, $startIndex);
 291         $startIndex: $startIndex + 1;
 292       }
 293     }
 294     to {
 295       $startIndex: 1;
 296       @each $property in $properties {
 297         #{$property}: nth($toValue, $startIndex);
 298         $startIndex: $startIndex + 1;
 299       }
 300     }
 301   }
 302 }
 303
 304
 305 /**/
 306 @mixin border-shadow($xShadow: 0.545px, $yShadow: 0.839px, $blur: 4px, $spread: 0, $color: $light-gray, $opacity: 0.2) {
 307   @include box-shadow($xShadow $yShadow $blur $spread rgba($color, $opacity));
 308 }