resources/scss/common/_utils.scss

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