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