resources/scss/common/_utils.scss

   1 /*
   2 * ============LICENSE_START=======================================================
   3 * SPARKY (AAI UI service)
   4 * ================================================================================
   5 * Copyright © 2017 AT&T Intellectual Property.
   6 * Copyright © 2017 Amdocs
   7 * All rights reserved.
   8 * ================================================================================
   9 * Licensed under the Apache License, Version 2.0 (the "License");
  10 * you may not use this file except in compliance with the License.
  11 * You may obtain a copy of the License at
  12 *
  13 *      http://www.apache.org/licenses/LICENSE-2.0
  14 *
  15 * Unless required by applicable law or agreed to in writing, software
  16 * distributed under the License is distributed on an "AS IS" BASIS,
  17 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  18 * See the License for the specific language governing permissions and
  19 * limitations under the License.
  20 * ============LICENSE_END=========================================================
  21 *
  22 * ECOMP and OpenECOMP are trademarks
  23 * and service marks of AT&T Intellectual Property.
  24 */
  25
  26 /* Prefix */
  27
  28 $box-sizing-prefix: webkit moz spec;
  29 $border-radius-prefix: webkit spec;
  30 $box-shadow-radius-prefix: webkit moz spec;
  31 $text-shadow-radius-prefix: spec;
  32 $text-shadow-prefix: spec;
  33 $box-shadow-prefix: all;
  34 $linear-gradient-prefix: all;
  35 $transition-prefix: webkit moz o spec;
  36 $flex-prefix: webkit spec;
  37 $browserPrefixes: webkit moz o ms;
  38
  39 @mixin prefix($property, $value, $prefixeslist: 'all') {
  40   @if $prefixeslist == all {
  41         -webkit-#{$property}: $value;
  42         -moz-#{$property}: $value;
  43         -ms-#{$property}: $value;
  44         -o-#{$property}: $value;
  45         #{$property}: $value;
  46   } @else {
  47         @each $prefix in $prefixeslist {
  48           @if $prefix == webkit {
  49                 -webkit-#{$property}: $value;
  50           } @else if $prefix == moz {
  51                 -moz-#{$property}: $value;
  52           } @else if $prefix == ms {
  53                 -ms-#{$property}: $value;
  54           } @else if $prefix == o {
  55                 -o-#{$property}: $value;
  56           } @else if $prefix == spec {
  57                 #{$property}: $value;
  58           } @else {
  59                 @warn "No such prefix: #{$prefix}";
  60           }
  61         }
  62   }
  63 }
  64
  65 /* Value Prefix*/
  66 @mixin value-suffix-with-range($property, $valuesuffix, $from, $to, $prefixeslist) {
  67
  68   @if $prefixeslist == all {
  69         #{property} : -webkit-#{$valuesuffix}($from, $to);
  70         #{property} : -moz-#{$valuesuffix}($from, $to);
  71         #{property} : -o-#{$valuesuffix}($from, $to);
  72         #{property} : -ms-#{$valuesuffix}($from, $to);
  73
  74   } @else {
  75         @each $prefix in $prefixeslist {
  76           @if $prefix == webkit {
  77                 #{property} : -webkit-#{$valuesuffix}($from, $to);
  78           } @else if $prefix == moz {
  79                 #{property} : -moz-#{$valuesuffix}($from, $to);
  80           } @else if $prefix == ms {
  81                 #{property} : -ms-#{$valuesuffix}($from, $to);
  82           } @else if $prefix == o {
  83                 #{property} : -o-#{$valuesuffix}($from, $to);
  84           } @else {
  85                 @warn "No such prefix: #{$prefix}";
  86           }
  87         }
  88   }
  89 }
  90
  91 /* Box sizing */
  92 @mixin box-sizing($value: border-box) {
  93   @include prefix(box-sizing, $value, $box-sizing-prefix);
  94 }
  95
  96 /* Borders & Shadows */
  97 @mixin box-shadow($value) {
  98   @include prefix(box-shadow, $value, $box-shadow-radius-prefix);
  99 }
 100
 101 @mixin text-shadow($value) {
 102   @include prefix(text-shadow, $value, $text-shadow-radius-prefix);
 103 }
 104
 105 @mixin border-radius($value, $positions: all) {
 106   @if ($positions == all) {
 107         @include prefix(border-radius, $value, $border-radius-prefix);
 108   } @else {
 109         @each $position in $positions {
 110           @include prefix(border-#{$position}-radius, $value, $border-radius-prefix);
 111         }
 112   }
 113
 114 }
 115
 116 @mixin transition($value) {
 117   @include prefix(transition, $value, $transition-prefix);
 118 }
 119
 120 /* Opacity */
 121 @mixin opacity($alpha) {
 122   $ie-opacity: round($alpha * 100);
 123   opacity: $alpha;
 124   filter: unquote("alpha(opacity = #{$ie-opacity})");
 125 }
 126
 127 /* Ellipsis */
 128 @mixin ellipsis() {
 129   overflow: hidden;
 130   text-overflow: ellipsis;
 131   width: 100%;
 132   white-space: nowrap;
 133   display: inline-block;
 134 }
 135
 136 @mixin gradient($from, $to) {
 137   /* fallback/image non-cover color */
 138   background-color: $from;
 139   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
 140   @include value-suffix-with-range(background-color, linear-gradient, $from, $to, $linear-gradient-prefix);
 141 }
 142
 143 /* Vertical placement of multuple lines of text */
 144 @mixin vertical-text($height) {
 145   position: absolute;
 146   top: 50%;
 147   margin-top: -$height/2;
 148 }
 149
 150 @mixin multiline-ellipsis($height, $lineheight, $ellipsiswidth: 3em) {
 151
 152   $ellipsiswidth: 3em !default;
 153
 154   .ellipsis {
 155         overflow: hidden;
 156         height: $height;
 157         line-height: $lineheight;
 158   }
 159
 160   .ellipsis:before {
 161         content: "";
 162         float: left;
 163         width: 5px;
 164         height: $height;
 165   }
 166
 167   .ellipsis > *:first-child {
 168         float: right;
 169         width: 100%;
 170         margin-left: -5px;
 171   }
 172
 173   .ellipsis:after {
 174         content: "\02026";
 175
 176         float: right;
 177         position: relative;
 178         top: -25px;
 179         left: 100%;
 180         width: $ellipsiswidth;
 181         margin-left: -$ellipsiswidth;
 182         padding-right: 5px;
 183
 184         text-align: right;
 185   }
 186
 187 }
 188
 189 @mixin text-vertical-align($align: middle) {
 190   display: table;
 191   width: 100%;
 192
 193   & > * {
 194         vertical-align: $align;
 195         display: table-cell;
 196   }
 197 }
 198
 199 @mixin center-element($width) {
 200   width: $width;
 201   margin-left: auto;
 202   margin-right: auto;
 203 }
 204
 205 @mixin center-content($width) {
 206   & > * {
 207         @include center-element($width);
 208   }
 209 }
 210
 211 /* transform-rotate */
 212 // @mixin
 213 //         Defines a 2D rotation, the angle is specified in the parameter
 214 // @param
 215 //     $deg - angle in degrees
 216 @mixin transform-rotate($deg) {
 217   transform: rotate($deg + deg); /* IE10 and Mozilla */
 218   -ms-transform: rotate($deg + deg); /* IE 9 */
 219   -webkit-transform: rotate($deg + deg); /* Safari and Chrome */
 220 }
 221
 222 /* transform-translate */
 223 // @mixin
 224 //         Defines a 2D rotation, the angle is specified in the parameter
 225 // @param
 226 //     $deg - angle in degrees
 227 @mixin transform-translate($x, $y) {
 228         transform: translate($x, $y); /* IE10 and Mozilla */
 229         -ms-transform: translate($x, $y); /* IE 9 */
 230         -webkit-transform: translate($x, $y); /* Safari and Chrome */
 231 }
 232
 233 /* transform-scale */
 234 // @mixin
 235 //         Defines a 2D scale transformation, changing the elements width and height
 236 // @param
 237 //     $width - width
 238 // @param
 239 //     $height - height
 240 @mixin transform-scale($width, $height) {
 241   transform: scale($width, $height); /* IE10 and Mozilla */
 242   -ms-transform: scale($width, $height); /* IE 9 */
 243   -webkit-transform: scale($width, $height); /* Safari and Chrome */
 244 }
 245
 246 @mixin scrollable() {
 247   ::-webkit-scrollbar {
 248         width: 8px;
 249   }
 250 }
 251
 252 /**/
 253 @mixin keyframe-animation($animationType, $properties, $fromValue, $toValue) {
 254
 255   @keyframes #{$animationType} {
 256     from {
 257       $startIndex: 1;
 258       @each $property in $properties {
 259         #{$property}: nth($fromValue, $startIndex);
 260         $startIndex: $startIndex + 1;
 261       }
 262     }
 263     to {
 264       $startIndex: 1;
 265       @each $property in $properties {
 266         #{$property}: nth($toValue, $startIndex);
 267         $startIndex: $startIndex + 1;
 268       }
 269     }
 270   }
 271   @-moz-keyframes #{$animationType}{
 272     /* Firefox */
 273     from {
 274       $startIndex: 1;
 275       @each $property in $properties {
 276         #{$property}: nth($fromValue, $startIndex);
 277         $startIndex: $startIndex + 1;
 278       }
 279     }
 280     to {
 281       $startIndex: 1;
 282       @each $property in $properties {
 283         #{$property}: nth($toValue, $startIndex);
 284         $startIndex: $startIndex + 1;
 285       }
 286     }
 287   }
 288   @-webkit-keyframes #{$animationType} {
 289     /* Safari and Chrome */
 290     from {
 291       $startIndex: 1;
 292       @each $property in $properties {
 293         #{$property}: nth($fromValue, $startIndex);
 294         $startIndex: $startIndex + 1;
 295       }
 296     }
 297     to {
 298       $startIndex: 1;
 299       @each $property in $properties {
 300         #{$property}: nth($toValue, $startIndex);
 301         $startIndex: $startIndex + 1;
 302       }
 303     }
 304   }
 305   @-o-keyframes #{$animationType} {
 306     /* Opera */
 307     from {
 308       $startIndex: 1;
 309       @each $property in $properties {
 310         #{$property}: nth($fromValue, $startIndex);
 311         $startIndex: $startIndex + 1;
 312       }
 313     }
 314     to {
 315       $startIndex: 1;
 316       @each $property in $properties {
 317         #{$property}: nth($toValue, $startIndex);
 318         $startIndex: $startIndex + 1;
 319       }
 320     }
 321   }
 322 }