workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss

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