2 * ============LICENSE_START=======================================================
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
12 * http://www.apache.org/licenses/LICENSE-2.0
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=========================================================
21 * ECOMP is a trademark and service mark of AT&T Intellectual Property.
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;
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;
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 {
57 @warn "No such prefix: #{$prefix}";
64 @mixin value-suffix-with-range($property, $valuesuffix, $from, $to, $prefixeslist) {
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);
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);
83 @warn "No such prefix: #{$prefix}";
90 @mixin box-sizing($value: border-box) {
91 @include prefix(box-sizing, $value, $box-sizing-prefix);
94 /* Borders & Shadows */
95 @mixin box-shadow($value) {
96 @include prefix(box-shadow, $value, $box-shadow-radius-prefix);
99 @mixin text-shadow($value) {
100 @include prefix(text-shadow, $value, $text-shadow-radius-prefix);
103 @mixin border-radius($value, $positions: all) {
104 @if ($positions == all) {
105 @include prefix(border-radius, $value, $border-radius-prefix);
107 @each $position in $positions {
108 @include prefix(border-#{$position}-radius, $value, $border-radius-prefix);
114 @mixin transition($value) {
115 @include prefix(transition, $value, $transition-prefix);
119 @mixin opacity($alpha) {
120 $ie-opacity: round($alpha * 100);
122 filter: unquote("alpha(opacity = #{$ie-opacity})");
128 text-overflow: ellipsis;
131 display: inline-block;
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);
141 /* Vertical placement of multuple lines of text */
142 @mixin vertical-text($height) {
145 margin-top: -$height/2;
148 @mixin multiline-ellipsis($height, $lineheight, $ellipsiswidth: 3em) {
150 $ellipsiswidth: 3em !default;
155 line-height: $lineheight;
165 .ellipsis > *:first-child {
178 width: $ellipsiswidth;
179 margin-left: -$ellipsiswidth;
187 @mixin text-vertical-align($align: middle) {
192 vertical-align: $align;
197 @mixin center-element($width) {
203 @mixin center-content($width) {
205 @include center-element($width);
209 /* transform-rotate */
211 // Defines a 2D rotation, the angle is specified in the parameter
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 */
220 /* transform-translate */
222 // Defines a 2D rotation, the angle is specified in the parameter
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 */
231 /* transform-scale */
233 // Defines a 2D scale transformation, changing the elements width and 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 */
244 @mixin scrollable() {
245 ::-webkit-scrollbar {
251 @mixin keyframe-animation($animationType, $properties, $fromValue, $toValue) {
253 @keyframes #{$animationType} {
256 @each $property in $properties {
257 #{$property}: nth($fromValue, $startIndex);
258 $startIndex: $startIndex + 1;
263 @each $property in $properties {
264 #{$property}: nth($toValue, $startIndex);
265 $startIndex: $startIndex + 1;
269 @-moz-keyframes #{$animationType}{
273 @each $property in $properties {
274 #{$property}: nth($fromValue, $startIndex);
275 $startIndex: $startIndex + 1;
280 @each $property in $properties {
281 #{$property}: nth($toValue, $startIndex);
282 $startIndex: $startIndex + 1;
286 @-webkit-keyframes #{$animationType} {
287 /* Safari and Chrome */
290 @each $property in $properties {
291 #{$property}: nth($fromValue, $startIndex);
292 $startIndex: $startIndex + 1;
297 @each $property in $properties {
298 #{$property}: nth($toValue, $startIndex);
299 $startIndex: $startIndex + 1;
303 @-o-keyframes #{$animationType} {
307 @each $property in $properties {
308 #{$property}: nth($fromValue, $startIndex);
309 $startIndex: $startIndex + 1;
314 @each $property in $properties {
315 #{$property}: nth($toValue, $startIndex);
316 $startIndex: $startIndex + 1;