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

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