resources/scss/common/_utils.scss

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