2 * ============LICENSE_START==========================================
4 * ===================================================================
5 * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
6 * ===================================================================
8 * Unless otherwise specified, all software contained herein is licensed
9 * under the Apache License, Version 2.0 (the "License");
10 * you may not use this software 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.
21 * Unless otherwise specified, all documentation contained herein is licensed
22 * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
23 * you may not use this documentation except in compliance with the License.
24 * You may obtain a copy of the License at
26 * https://creativecommons.org/licenses/by/4.0/
28 * Unless required by applicable law or agreed to in writing, documentation
29 * distributed under the License is distributed on an "AS IS" BASIS,
30 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
31 * See the License for the specific language governing permissions and
32 * limitations under the License.
34 * ============LICENSE_END============================================
39 //.bg_portalWhite;//white for 1702
40 .bg_portalGray; // gray for 1610
45 bottom: @page-main-bottom;
61 padding: 15px 0 32px 0;
66 .dBlue24r; // AT&T Dark Blue
73 justify-content: center;
80 .app-gridster-header {
81 background-color: @portalWhite;
84 .app-gridster-footer {
85 background-color: @portalWhite;
89 background-color: @portalWhite;
91 box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.1);
92 display: inline-block;
95 background-size: cover;
101 background-color: @portalWhite;
105 box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.1);
110 .dBlue24r; // AT&T Dark Blue
113 text-overflow: ellipsis;
118 text-overflow: ellipsis;
140 .w-ecomp-main-disclaimer {
164 background: @portalLGray;
169 .tab-container ul.nav-tabs {
171 list-style-type: none;
175 display: inline-block;
176 display: -webkit-flex;
179 border-bottom: 5px solid @funcBkgGray;
181 .tab-container ul.nav-tabs > li {
183 -moz-border-radius-topleft: 28px 145px;
184 -webkit-border-top-left-radius: 28px 145px;
185 border-top-left-radius: 28px 145px;
186 -moz-border-radius-topright: 28px 145px;
187 -webkit-border-top-right-radius: 28px 145px;
188 border-top-right-radius: 28px 145px;
189 padding: 0 30px 0 25px;
193 -moz-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
194 -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
195 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
199 border: 1px solid @portalGray;
201 .tab-container ul.nav-tabs > li:first-child {
204 .tab-container ul.nav-tabs > li:last-of-type {
207 .tab-container ul.nav-tabs > li > a {
210 text-decoration: none;
214 .tab-container ul.nav-tabs > li > a span {
219 .tab-container ul.nav-tabs > li > a:focus, .tab-container ul.nav-tabs > li > a:hover {
220 background-color: transparent;
221 border-color: transparent;
223 .tab-container ul.nav-tabs > li > a .glyphicon-remove {
225 display: inline-block;
232 -moz-border-radius: 50%;
233 -webkit-border-radius: 50%;
236 .tab-container ul.nav-tabs > li > a .glyphicon-remove:hover {
237 background: @portalLPurple;
239 -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
240 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
241 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
242 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
244 .tab-container ul.nav-tabs > li.active {
246 background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
247 background-size: 100%;
248 background-image: -webkit-gradient(linear, 50% 0%, 50% 30, color-stop(0%, @portalWhite), color-stop(100%, @funcBkgGray));
249 background-image: -moz-linear-gradient(@portalWhite, @funcBkgGray 30px);
250 background-image: -webkit-linear-gradient(@portalWhite, @funcBkgGray 30px);
251 background-image: linear-gradient(@portalWhite, @funcBkgGray 30px);
253 .tab-container ul.nav-tabs > li.active > a {
254 background-color: transparent;
255 border-color: transparent;
256 border-bottom-color: transparent;
258 .tab-container ul.nav-tabs > li.active > a:focus, .tab-container ul.nav-tabs > li.active > a:hover {
259 background-color: transparent;
260 border-color: transparent;
261 border-bottom-color: transparent;
263 .tab-container ul.nav-tabs .btn {
270 border-color: @portalLBlue;
272 -moz-transform: skew(30deg);
273 -ms-transform: skew(30deg);
274 -webkit-transform: skew(30deg);
275 transform: skew(30deg);
277 .tab-container ul.nav-tabs .btn.btn-default {
280 .tab-container ul.nav-tabs .btn.btn-default:hover {
283 .tab-container ul.nav-tabs .btn.btn-default:active {
286 .tab-container .tab-pane {
290 .tab-container .tab-pane.active {
291 border-top: 1px solid #ddd;
294 .tab-container md-content {
295 background-color: transparent !important; }
296 .tab-container md-content md-tabs {
297 border: 1px solid #e1e1e1; }
298 .tab-container md-content md-tabs md-tab-content {
299 background: #f6f6f6; }
300 .tab-container md-content md-tabs md-tabs-canvas {
302 .tab-container md-content h1:first-child {
304 .tab-container md-input-container {
306 .tab-container .remove-tab {
307 margin-bottom: 40px; }
308 .tab-container .demo-tab > div > div {
310 box-sizing: border-box; }
311 .tab-container .edit-form input {
313 .tab-container md-tabs {
314 border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
315 .tab-container md-tab[disabled] {
317 .tab-container label {
319 .tab-container .long > input {
321 .tab-container .md-button.add-tab {
322 transform: translateY(5px); }
328 border-top-left-radius: 88px 205px;
329 border-top-right-radius: 88px 205px;
330 padding: 0 30px 0 25px;
332 background: @portalLGray;
334 box-shadow: 0 4px 6px rgba(0,0,0,.5);
338 border: 1px solid #aaa;
339 text-transform: capitalize;
348 border-bottom: 5px solid #f7f7f7;
353 background-color: #f5f5f5 !important;
359 z-index: 5 !important;
367 font-size: x-small;width: 10px;
370 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
372 font-size: x-small;width: 10px;margin-left: 130px;margin-top: 55px;
380 -moz-box-sizing: border-box;
381 -webkit-box-sizing: border-box;
382 box-sizing: border-box;
388 .transition(@transitionDefault color);
389 background: transparent;
407 fill: @colorWetAsphalt;
413 fill: @colorAsbestos;
418 &.active ~ .notifications
425 border-top: 1px solid #bdc3c7;
434 .notifications_li:hover{
437 .notifications_detail{
441 display: inline-block;
442 vertical-align: middle;
445 .notifications_empty{
449 .notifications_title{
460 .border-radius(@borderRadius);
461 .transition(@transitionDefault opacity);
462 background: @colorClouds;
463 border: 1px solid @colorSilver;
466 // position: absolute;
471 border: 10px solid transparent;
472 border-bottom-color: @colorPeterRiver;
485 background: @colorPeterRiver;
503 text-decoration: none;
508 text-decoration: underline;
521 .transition-transform(@transitionDefault);
522 border-top: 1px solid @colorSilver;
523 color: @colorAsbestos;
535 display: inline-block;
536 vertical-align: middle;
542 background: @colorPeterRiver;
562 color: @colorConcrete;
576 color: @colorConcrete;
597 background: @colorSilver;
611 .transform(translateX(100%));
630 @colorClouds: #ecf0f1;
631 @colorSilver: #bdc3c7;
632 @colorWhite: #fefefe;
633 @colorPeterRiver: #3498db;
634 @colorConcrete: #95a5a6;
635 @colorAsbestos: #7f8c8d;
636 @colorWetAsphalt: #34495e;
640 @transitionDefault: 0.25s ease-out 0.10s;
643 .background-clip(@value: border-box)
645 -moz-background-clip: @value;
646 -webkit-background-clip: @value;
647 background-clip: @value;
650 .border-radius(@value: 5px)
652 -moz-border-radius: @value;
653 -webkit-border-radius: @value;
654 border-radius: @value;
655 .background-clip(padding-box);
660 -webkit-transform: @value;
661 -moz-transform: @value;
662 -ms-transform: @value;
663 -o-transform: @value;
667 .transition(@value: all 0.25s ease-out)
669 -webkit-transition: @value;
670 -moz-transition: @value;
671 -o-transition: @value;
675 .transition-transform(@transition: 0.25s ease-out)
677 -webkit-transition: -webkit-transform @transition;
678 -moz-transition: -moz-transform @transition;
679 -o-transition: -o-transform @transition;
680 transition: transform @transition;
692 #tab-cross-sign-icon{
693 margin: 48px 0px 0px 0px;
695 border-bottom-width:0px;
696 padding: 6px 6px 6px 3px;
706 nowrap;display: block;