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() {
 106   overflow: hidden;
 107   text-overflow: ellipsis;
 108   width: 100%;
 109   white-space: nowrap;
 110   display: inline-block;
 111 }
 112
 113 @mixin gradient($from, $to) {
 114   /* fallback/image non-cover color */
 115   background-color: $from;
 116   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
 117   @include value-suffix-with-range(background-color, linear-gradient, $from, $to, $linear-gradient-prefix);
 118 }
 119
 120 /* Vertical placement of multuple lines of text */
 121 @mixin vertical-text($height) {
 122   position: absolute;
 123   top: 50%;
 124   margin-top: -$height/2;
 125 }
 126
 127 @mixin multiline-ellipsis($height, $lineheight, $ellipsiswidth: 3em) {
 128
 129   $ellipsiswidth: 3em !default;
 130
 131   .ellipsis {
 132         overflow: hidden;
 133         height: $height;
 134         line-height: $lineheight;
 135   }
 136
 137   .ellipsis:before {
 138         content: "";
 139         float: left;
 140         width: 5px;
 141         height: $height;
 142   }
 143
 144   .ellipsis > *:first-child {
 145         float: right;
 146         width: 100%;
 147         margin-left: -5px;
 148   }
 149
 150   .ellipsis:after {
 151         content: "\02026";
 152
 153         float: right;
 154         position: relative;
 155         top: -25px;
 156         left: 100%;
 157         width: $ellipsiswidth;
 158         margin-left: -$ellipsiswidth;
 159         padding-right: 5px;
 160
 161         text-align: right;
 162   }
 163
 164 }
 165
 166 @mixin text-vertical-align($align: middle) {
 167   display: table;
 168   width: 100%;
 169
 170   & > * {
 171         vertical-align: $align;
 172         display: table-cell;
 173   }
 174 }
 175
 176 @mixin center-element($width) {
 177   width: $width;
 178   margin-left: auto;
 179   margin-right: auto;
 180 }
 181
 182 @mixin center-content($width) {
 183   & > * {
 184         @include center-element($width);
 185   }
 186 }
 187
 188 /* transform-rotate */
 189 // @mixin
 190 //         Defines a 2D rotation, the angle is specified in the parameter
 191 // @param
 192 //     $deg - angle in degrees
 193 @mixin transform-rotate($deg) {
 194   transform: rotate($deg + deg); /* IE10 and Mozilla */
 195   -ms-transform: rotate($deg + deg); /* IE 9 */
 196   -webkit-transform: rotate($deg + deg); /* Safari and Chrome */
 197 }
 198
 199 /* transform-translate */
 200 // @mixin
 201 //         Defines a 2D rotation, the angle is specified in the parameter
 202 // @param
 203 //     $deg - angle in degrees
 204 @mixin transform-translate($x, $y) {
 205         transform: translate($x, $y); /* IE10 and Mozilla */
 206         -ms-transform: translate($x, $y); /* IE 9 */
 207         -webkit-transform: translate($x, $y); /* Safari and Chrome */
 208 }
 209
 210 /* transform-scale */
 211 // @mixin
 212 //         Defines a 2D scale transformation, changing the elements width and height
 213 // @param
 214 //     $width - width
 215 // @param
 216 //     $height - height
 217 @mixin transform-scale($width, $height) {
 218   transform: scale($width, $height); /* IE10 and Mozilla */
 219   -ms-transform: scale($width, $height); /* IE 9 */
 220   -webkit-transform: scale($width, $height); /* Safari and Chrome */
 221 }
 222
 223 @mixin scrollable() {
 224   ::-webkit-scrollbar {
 225         width: 8px;
 226   }
 227 }
 228
 229 /**/
 230 @mixin keyframe-animation($animationType, $properties, $fromValue, $toValue) {
 231
 232   @keyframes #{$animationType} {
 233     from {
 234       $startIndex: 1;
 235       @each $property in $properties {
 236         #{$property}: nth($fromValue, $startIndex);
 237         $startIndex: $startIndex + 1;
 238       }
 239     }
 240     to {
 241       $startIndex: 1;
 242       @each $property in $properties {
 243         #{$property}: nth($toValue, $startIndex);
 244         $startIndex: $startIndex + 1;
 245       }
 246     }
 247   }
 248   @-moz-keyframes #{$animationType}{
 249     /* Firefox */
 250     from {
 251       $startIndex: 1;
 252       @each $property in $properties {
 253         #{$property}: nth($fromValue, $startIndex);
 254         $startIndex: $startIndex + 1;
 255       }
 256     }
 257     to {
 258       $startIndex: 1;
 259       @each $property in $properties {
 260         #{$property}: nth($toValue, $startIndex);
 261         $startIndex: $startIndex + 1;
 262       }
 263     }
 264   }
 265   @-webkit-keyframes #{$animationType} {
 266     /* Safari and Chrome */
 267     from {
 268       $startIndex: 1;
 269       @each $property in $properties {
 270         #{$property}: nth($fromValue, $startIndex);
 271         $startIndex: $startIndex + 1;
 272       }
 273     }
 274     to {
 275       $startIndex: 1;
 276       @each $property in $properties {
 277         #{$property}: nth($toValue, $startIndex);
 278         $startIndex: $startIndex + 1;
 279       }
 280     }
 281   }
 282   @-o-keyframes #{$animationType} {
 283     /* Opera */
 284     from {
 285       $startIndex: 1;
 286       @each $property in $properties {
 287         #{$property}: nth($fromValue, $startIndex);
 288         $startIndex: $startIndex + 1;
 289       }
 290     }
 291     to {
 292       $startIndex: 1;
 293       @each $property in $properties {
 294         #{$property}: nth($toValue, $startIndex);
 295         $startIndex: $startIndex + 1;
 296       }
 297     }
 298   }
 299 }