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

© 2017 ONAP. Copyright © The Linux Foundation ®. All Rights Reserved.
The Linux Foundation has registered trademarks and uses trademarks.
For a list of trademarks of The Linux Foundation, please see our Trademark Usage page.
Linux is a registered trademark of Linus Torvalds.
Privacy Policy and Terms of Use