2 * ============LICENSE_START=======================================================
3 * SPARKY (AAI UI service)
4 * ================================================================================
5 * Copyright © 2017 AT&T Intellectual Property.
6 * Copyright © 2017 Amdocs
8 * ================================================================================
9 * Licensed under the Apache License, Version 2.0 (the "License");
10 * you may not use this file except in compliance with the License.
11 * You may obtain a copy of the License at
13 * http://www.apache.org/licenses/LICENSE-2.0
15 * Unless required by applicable law or agreed to in writing, software
16 * distributed under the License is distributed on an "AS IS" BASIS,
17 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
18 * See the License for the specific language governing permissions and
19 * limitations under the License.
20 * ============LICENSE_END=========================================================
22 * ECOMP and OpenECOMP are trademarks
23 * and service marks of AT&T Intellectual Property.
28 $box-sizing-prefix: webkit moz spec;
29 $border-radius-prefix: webkit spec;
30 $box-shadow-radius-prefix: webkit moz spec;
31 $text-shadow-radius-prefix: spec;
32 $text-shadow-prefix: spec;
33 $box-shadow-prefix: all;
34 $linear-gradient-prefix: all;
35 $transition-prefix: webkit moz o spec;
36 $flex-prefix: webkit spec;
37 $browserPrefixes: webkit moz o ms;
39 @mixin prefix($property, $value, $prefixeslist: 'all') {
40 @if $prefixeslist == all {
41 -webkit-#{$property}: $value;
42 -moz-#{$property}: $value;
43 -ms-#{$property}: $value;
44 -o-#{$property}: $value;
47 @each $prefix in $prefixeslist {
48 @if $prefix == webkit {
49 -webkit-#{$property}: $value;
50 } @else if $prefix == moz {
51 -moz-#{$property}: $value;
52 } @else if $prefix == ms {
53 -ms-#{$property}: $value;
54 } @else if $prefix == o {
55 -o-#{$property}: $value;
56 } @else if $prefix == spec {
59 @warn "No such prefix: #{$prefix}";
66 @mixin value-suffix-with-range($property, $valuesuffix, $from, $to, $prefixeslist) {
68 @if $prefixeslist == all {
69 #{property} : -webkit-#{$valuesuffix}($from, $to);
70 #{property} : -moz-#{$valuesuffix}($from, $to);
71 #{property} : -o-#{$valuesuffix}($from, $to);
72 #{property} : -ms-#{$valuesuffix}($from, $to);
75 @each $prefix in $prefixeslist {
76 @if $prefix == webkit {
77 #{property} : -webkit-#{$valuesuffix}($from, $to);
78 } @else if $prefix == moz {
79 #{property} : -moz-#{$valuesuffix}($from, $to);
80 } @else if $prefix == ms {
81 #{property} : -ms-#{$valuesuffix}($from, $to);
82 } @else if $prefix == o {
83 #{property} : -o-#{$valuesuffix}($from, $to);
85 @warn "No such prefix: #{$prefix}";
92 @mixin box-sizing($value: border-box) {
93 @include prefix(box-sizing, $value, $box-sizing-prefix);
96 /* Borders & Shadows */
97 @mixin box-shadow($value) {
98 @include prefix(box-shadow, $value, $box-shadow-radius-prefix);
101 @mixin text-shadow($value) {
102 @include prefix(text-shadow, $value, $text-shadow-radius-prefix);
105 @mixin border-radius($value, $positions: all) {
106 @if ($positions == all) {
107 @include prefix(border-radius, $value, $border-radius-prefix);
109 @each $position in $positions {
110 @include prefix(border-#{$position}-radius, $value, $border-radius-prefix);
116 @mixin transition($value) {
117 @include prefix(transition, $value, $transition-prefix);
121 @mixin opacity($alpha) {
122 $ie-opacity: round($alpha * 100);
124 filter: unquote("alpha(opacity = #{$ie-opacity})");
130 text-overflow: ellipsis;
133 display: inline-block;
136 @mixin gradient($from, $to) {
137 /* fallback/image non-cover color */
138 background-color: $from;
139 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
140 @include value-suffix-with-range(background-color, linear-gradient, $from, $to, $linear-gradient-prefix);
143 /* Vertical placement of multuple lines of text */
144 @mixin vertical-text($height) {
147 margin-top: -$height/2;
150 @mixin multiline-ellipsis($height, $lineheight, $ellipsiswidth: 3em) {
152 $ellipsiswidth: 3em !default;
157 line-height: $lineheight;
167 .ellipsis > *:first-child {
180 width: $ellipsiswidth;
181 margin-left: -$ellipsiswidth;
189 @mixin text-vertical-align($align: middle) {
194 vertical-align: $align;
199 @mixin center-element($width) {
205 @mixin center-content($width) {
207 @include center-element($width);
211 /* transform-rotate */
213 // Defines a 2D rotation, the angle is specified in the parameter
215 // $deg - angle in degrees
216 @mixin transform-rotate($deg) {
217 transform: rotate($deg + deg); /* IE10 and Mozilla */
218 -ms-transform: rotate($deg + deg); /* IE 9 */
219 -webkit-transform: rotate($deg + deg); /* Safari and Chrome */
222 /* transform-translate */
224 // Defines a 2D rotation, the angle is specified in the parameter
226 // $deg - angle in degrees
227 @mixin transform-translate($x, $y) {
228 transform: translate($x, $y); /* IE10 and Mozilla */
229 -ms-transform: translate($x, $y); /* IE 9 */
230 -webkit-transform: translate($x, $y); /* Safari and Chrome */
233 /* transform-scale */
235 // Defines a 2D scale transformation, changing the elements width and height
240 @mixin transform-scale($width, $height) {
241 transform: scale($width, $height); /* IE10 and Mozilla */
242 -ms-transform: scale($width, $height); /* IE 9 */
243 -webkit-transform: scale($width, $height); /* Safari and Chrome */
246 @mixin scrollable() {
247 ::-webkit-scrollbar {
253 @mixin keyframe-animation($animationType, $properties, $fromValue, $toValue) {
255 @keyframes #{$animationType} {
258 @each $property in $properties {
259 #{$property}: nth($fromValue, $startIndex);
260 $startIndex: $startIndex + 1;
265 @each $property in $properties {
266 #{$property}: nth($toValue, $startIndex);
267 $startIndex: $startIndex + 1;
271 @-moz-keyframes #{$animationType}{
275 @each $property in $properties {
276 #{$property}: nth($fromValue, $startIndex);
277 $startIndex: $startIndex + 1;
282 @each $property in $properties {
283 #{$property}: nth($toValue, $startIndex);
284 $startIndex: $startIndex + 1;
288 @-webkit-keyframes #{$animationType} {
289 /* Safari and Chrome */
292 @each $property in $properties {
293 #{$property}: nth($fromValue, $startIndex);
294 $startIndex: $startIndex + 1;
299 @each $property in $properties {
300 #{$property}: nth($toValue, $startIndex);
301 $startIndex: $startIndex + 1;
305 @-o-keyframes #{$animationType} {
309 @each $property in $properties {
310 #{$property}: nth($fromValue, $startIndex);
311 $startIndex: $startIndex + 1;
316 @each $property in $properties {
317 #{$property}: nth($toValue, $startIndex);
318 $startIndex: $startIndex + 1;