2 * ============LICENSE_START=======================================================
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
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=========================================================
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;
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;
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 {
54 @warn "No such prefix: #{$prefix}";
61 @mixin value-suffix-with-range($property, $valuesuffix, $from, $to, $prefixeslist) {
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);
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);
80 @warn "No such prefix: #{$prefix}";
87 @mixin box-sizing($value: border-box) {
88 @include prefix(box-sizing, $value, $box-sizing-prefix);
91 /* Borders & Shadows */
92 @mixin box-shadow($value) {
93 @include prefix(box-shadow, $value, $box-shadow-radius-prefix);
96 @mixin text-shadow($value) {
97 @include prefix(text-shadow, $value, $text-shadow-radius-prefix);
100 @mixin border-radius($value, $positions: all) {
101 @if ($positions == all) {
102 @include prefix(border-radius, $value, $border-radius-prefix);
104 @each $position in $positions {
105 @include prefix(border-#{$position}-radius, $value, $border-radius-prefix);
111 @mixin transition($value) {
112 @include prefix(transition, $value, $transition-prefix);
116 @mixin opacity($alpha) {
117 $ie-opacity: round($alpha * 100);
119 filter: unquote("alpha(opacity = #{$ie-opacity})");
125 text-overflow: ellipsis;
128 display: inline-block;
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);
138 /* Vertical placement of multuple lines of text */
139 @mixin vertical-text($height) {
142 margin-top: -$height/2;
145 @mixin multiline-ellipsis($height, $lineheight, $ellipsiswidth: 3em) {
147 $ellipsiswidth: 3em !default;
152 line-height: $lineheight;
162 .ellipsis > *:first-child {
175 width: $ellipsiswidth;
176 margin-left: -$ellipsiswidth;
184 @mixin text-vertical-align($align: middle) {
189 vertical-align: $align;
194 @mixin center-element($width) {
200 @mixin center-content($width) {
202 @include center-element($width);
206 /* transform-rotate */
208 // Defines a 2D rotation, the angle is specified in the parameter
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 */
217 /* transform-translate */
219 // Defines a 2D rotation, the angle is specified in the parameter
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 */
228 /* transform-scale */
230 // Defines a 2D scale transformation, changing the elements width and 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 */
241 @mixin scrollable() {
242 ::-webkit-scrollbar {
248 @mixin keyframe-animation($animationType, $properties, $fromValue, $toValue) {
250 @keyframes #{$animationType} {
253 @each $property in $properties {
254 #{$property}: nth($fromValue, $startIndex);
255 $startIndex: $startIndex + 1;
260 @each $property in $properties {
261 #{$property}: nth($toValue, $startIndex);
262 $startIndex: $startIndex + 1;
266 @-moz-keyframes #{$animationType}{
270 @each $property in $properties {
271 #{$property}: nth($fromValue, $startIndex);
272 $startIndex: $startIndex + 1;
277 @each $property in $properties {
278 #{$property}: nth($toValue, $startIndex);
279 $startIndex: $startIndex + 1;
283 @-webkit-keyframes #{$animationType} {
284 /* Safari and Chrome */
287 @each $property in $properties {
288 #{$property}: nth($fromValue, $startIndex);
289 $startIndex: $startIndex + 1;
294 @each $property in $properties {
295 #{$property}: nth($toValue, $startIndex);
296 $startIndex: $startIndex + 1;
300 @-o-keyframes #{$animationType} {
304 @each $property in $properties {
305 #{$property}: nth($fromValue, $startIndex);
306 $startIndex: $startIndex + 1;
311 @each $property in $properties {
312 #{$property}: nth($toValue, $startIndex);
313 $startIndex: $startIndex + 1;