+++ /dev/null
-/*-
- * ================================================================================
- * eCOMP Portal
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ================================================================================
- */
- .w-ecomp-tabs {
- .bg_s;
-
- position: fixed;
- left: 0;
- right: 0;
- bottom: @footer-height;
- overflow-y: hidden;
- top: @header-height;
- padding-left: 0;
-
- .go-button {
- .btn-green;
- width: 96px;
- position: absolute;
- border-radius: 0px;
- }
-
- .tabs-container {
- .content_justify;
- position: relative;
- padding: 15px 0 32px 0;
- width: 100%;
-
- .tabs-title {
- .a24r;
- margin: auto;
- .content_justify;
- }
- .portals-list {
- min-height: 70vh;
- justify-content: center;
- flex-flow: row wrap;
- width: 1170px;
-
- margin: auto;
- margin-bottom: 63px;
-
- .app-gridster-header {
- background-color: @u;
- }
-
- .app-gridster-footer {
- background-color: @u;
- }
-
- .portals-list-item {
- background-color: @u;
- border-radius: 2px;
- box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.1);
- display: inline-block;
- width: 360px;
- height: 300px;
- background-size: cover;
- cursor: pointer;
- margin: 15px;
- overflow: hidden;
-
- .portals-item-info {
- background-color: @u;
- height: 120px;
- top: 180px;
- position: relative;
- box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.1);
- padding: 16px;
-
- .info-title {
- .a24r;
- margin-bottom: 4px;
-
- text-overflow: ellipsis;
- overflow: hidden;
- }
- .info-description {
- .c16r;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- }
- .info-button {
- .btn-green;
- width: 96px;
- position: absolute;
- bottom: 16px;
- left: 16px;
- }
-
- &:hover {
- opacity: .93;
- z-index: 3;
- }
- }
- }
- }
- }
-}
-
-
-.build-number {
- .o12i;
-}
-
-@keyframes fadein {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-
-
-
-.tab-container {
- background: #8dc8fb;
- margin: 0;
- padding: 0;
- max-height: 40px;
-}
-.tab-container ul.nav-tabs {
- margin: 0;
- list-style-type: none;
- line-height: 40px;
- max-height: 40px;
- overflow: hidden;
- display: inline-block;
- display: -webkit-flex;
- display: flex;
- padding-right: 20px;
- border-bottom: 5px solid #f7f7f7;
-}
-.tab-container ul.nav-tabs > li {
- margin: 5px -14px 0;
- -moz-border-radius-topleft: 28px 145px;
- -webkit-border-top-left-radius: 28px 145px;
- border-top-left-radius: 28px 145px;
- -moz-border-radius-topright: 28px 145px;
- -webkit-border-top-right-radius: 28px 145px;
- border-top-right-radius: 28px 145px;
- padding: 0 30px 0 25px;
- height: 170px;
- background: #c3d5e6;
- position: relative;
- -moz-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
- -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
- width: 200px;
- max-width: 200px;
- min-width: 20px;
- border: 1px solid #aaa;
-}
-.tab-container ul.nav-tabs > li:first-child {
- margin-left: 0;
-}
-.tab-container ul.nav-tabs > li:last-of-type {
- margin-right: 0;
-}
-.tab-container ul.nav-tabs > li > a {
- display: block;
- max-width: 100%;
- text-decoration: none;
- color: #222;
- padding: 3px 7px;
-}
-.tab-container ul.nav-tabs > li > a span {
- overflow: hidden;
- white-space: nowrap;
- display: block;
-}
-.tab-container ul.nav-tabs > li > a:focus, .tab-container ul.nav-tabs > li > a:hover {
- background-color: transparent;
- border-color: transparent;
-}
-.tab-container ul.nav-tabs > li > a .glyphicon-remove {
- color: #777;
- display: inline-block;
- padding: 3px;
- font-size: 10px;
- position: absolute;
- z-index: 10;
- top: 7px;
- right: -10px;
- -moz-border-radius: 50%;
- -webkit-border-radius: 50%;
- border-radius: 50%;
-}
-.tab-container ul.nav-tabs > li > a .glyphicon-remove:hover {
- background: #d39ea3;
- color: white;
- -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
- -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
- text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
-}
-.tab-container ul.nav-tabs > li.active {
- z-index: 4;
- background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
- background-size: 100%;
- background-image: -webkit-gradient(linear, 50% 0%, 50% 30, color-stop(0%, #ffffff), color-stop(100%, #f7f7f7));
- background-image: -moz-linear-gradient(#ffffff, #f7f7f7 30px);
- background-image: -webkit-linear-gradient(#ffffff, #f7f7f7 30px);
- background-image: linear-gradient(#ffffff, #f7f7f7 30px);
-}
-.tab-container ul.nav-tabs > li.active > a {
- background-color: transparent;
- border-color: transparent;
- border-bottom-color: transparent;
-}
-.tab-container ul.nav-tabs > li.active > a:focus, .tab-container ul.nav-tabs > li.active > a:hover {
- background-color: transparent;
- border-color: transparent;
- border-bottom-color: transparent;
-}
-.tab-container ul.nav-tabs .btn {
- float: left;
- height: 20px;
- width: 35px;
- min-width: 35px;
- max-width: 35px;
- margin: 10px 0 0 0;
- border-color: #71a0c9;
- outline: none;
- -moz-transform: skew(30deg);
- -ms-transform: skew(30deg);
- -webkit-transform: skew(30deg);
- transform: skew(30deg);
-}
-.tab-container ul.nav-tabs .btn.btn-default {
- background: #c3d5e6;
-}
-.tab-container ul.nav-tabs .btn.btn-default:hover {
- background: #d2deeb;
-}
-.tab-container ul.nav-tabs .btn.btn-default:active {
- background: #9cb5cc;
-}
-.tab-container .tab-pane {
- padding: 0px 0px;
- text-align: center;
-}
-.tab-container .tab-pane.active {
- border-top: 1px solid #ddd;
-}
-
-.tab-container md-content {
- background-color: transparent !important; }
- .tab-container md-content md-tabs {
- border: 1px solid #e1e1e1; }
- .tab-container md-content md-tabs md-tab-content {
- background: #f6f6f6; }
- .tab-container md-content md-tabs md-tabs-canvas {
- background: white; }
- .tab-container md-content h1:first-child {
- margin-top: 0; }
-.tab-container md-input-container {
- padding-bottom: 0; }
-.tab-container .remove-tab {
- margin-bottom: 40px; }
-.tab-container .demo-tab > div > div {
- padding: 25px;
- box-sizing: border-box; }
-.tab-container .edit-form input {
- width: 100%; }
-.tab-container md-tabs {
- border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
-.tab-container md-tab[disabled] {
- opacity: 0.5; }
-.tab-container label {
- text-align: left; }
-.tab-container .long > input {
- width: 264px; }
-.tab-container .md-button.add-tab {
- transform: translateY(5px); }
-
-.md-tab{
- font-size: 13px;
- line-height: 30px;
- margin: 5px -3px 0;
- border-top-left-radius: 88px 205px;
- border-top-right-radius: 88px 205px;
- padding: 0 30px 0 25px;
- height: 40px;
- background: #c3d5e6;
- position: relative;
- box-shadow: 0 4px 6px rgba(0,0,0,.5);
- width: 180px;
- max-width: 200px;
- min-width: 20px;
- border: 1px solid #aaa;
- text-transform: capitalize;
- text-align: left;
-}
-
-md-tabs .md-tab {
- color: #222;
-}
-
-md-tabs-canvas {
- border-bottom: 5px solid #f7f7f7;
- height: 40px;
-}
-.md-tab.md-active {
- z-index: 4;
- background-color: #f5f5f5 !important;
-}
-.md-tab:first-child{
- margin-left: 10px;
-}
-md-ink-bar{
- z-index: 5 !important;
-}
-
-.glyphicon {
- position: fixed;
- line-height: 4;
-}
-.close_button {
- font-size: x-small;width: 10px;margin-left: 130px;
-}
-@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
- .close_button {
- font-size: x-small;width: 10px;margin-left: 130px;margin-top: 55px;
- }
-}
-
-*,
-*:after,
-*:before
-{
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-
-.button-default
-{
- .transition(@transitionDefault color);
- background: transparent;
- border: none;
- cursor: pointer;
- margin: 0;
- outline: none;
- position: relative;
-}
-
-.show-notifications
-{
- position: relative;
-
- &:hover,
- &:focus,
- &.active
- {
- #icon-bell
- {
- fill: @colorWetAsphalt;
- }
- }
-
- #icon-bell
- {
- fill: @colorAsbestos;
- }
-
-
-
- &.active ~ .notifications
- {
- opacity: 1;
- top: 35px;
- }
-}
-.notifications_li{
- border-top: 1px solid #bdc3c7;
- color: #7f8c8d;
- cursor: default;
- display: block;
- padding: 10px;
- position: relative;
- white-space: nowrap;
- width: 350px;
-}
-.notifications_li:hover{
- background:#eee;
-}
-.notifications_detail{
- margin-left: 10px;
- white-space: normal;
- width: 280px;
- display: inline-block;
- vertical-align: middle;
-}
-
-.notifications_empty{
- display: none;
- text-align: center;
-}
-.notifications_title{
- display: block;
-}
-
-.notifications_date{
- color: #95a5a6;
- font-size: .85em;
- margin-top: 3px;
-}
-.notifications
-{
- .border-radius(@borderRadius);
- .transition(@transitionDefault opacity);
- background: @colorClouds;
- border: 1px solid @colorSilver;
- left: 10px;
- opacity: 0;
-
- &:after
- {
- border: 10px solid transparent;
- border-bottom-color: @colorPeterRiver;
- content: '';
- display: block;
- height: 0;
- left: 10px;
- position: absolute;
- top: -20px;
- width: 0;
- }
-
- h3,
- .show-all
- {
- background: @colorPeterRiver;
- color: @colorWhite;
- margin: 0;
- padding: 10px;
- width: 350px;
- }
-
- h3
- {
- cursor: default;
- font-size: 1.05em;
- font-weight: normal;
- }
-
- .show-all
- {
- display: block;
- text-align: center;
- text-decoration: none;
-
- &:hover,
- &:focus
- {
- text-decoration: underline;
- }
- }
-
- .notifications-list
- {
- list-style: none;
- margin: 0;
- overflow: hidden;
- padding: 0;
-
- .item
- {
- .transition-transform(@transitionDefault);
- border-top: 1px solid @colorSilver;
- color: @colorAsbestos;
- cursor: default;
- display: block;
- padding: 10px;
- position: relative;
- white-space: nowrap;
- width: 350px;
-
- &:before,
- .details,
- .button-dismiss
- {
- display: inline-block;
- vertical-align: middle;
- }
-
- &:before
- {
- .border-radius(50%);
- background: @colorPeterRiver;
- content: '';
- height: 8px;
- width: 8px;
- }
-
- .details
- {
- margin-left: 10px;
- white-space: normal;
- width: 280px;
-
- .title,
- .date
- {
- display: block;
- }
-
- .date
- {
- color: @colorConcrete;
- font-size: .85em;
- margin-top: 3px;
- }
- }
-
- .button-dismiss
- {
- color: @colorSilver;
- font-size: 2.25em;
-
- &:hover,
- &:focus
- {
- color: @colorConcrete;
- }
- }
-
- &.no-data
- {
- display: none;
- text-align: center;
-
- &:before
- {
- display: none;
- }
- }
-
- &.expired
- {
- color: @colorSilver;
-
- &:before
- {
- background: @colorSilver;
- }
-
- .details
- {
- .date
- {
- color: @colorSilver;
- }
- }
- }
-
- &.dismissed
- {
- .transform(translateX(100%));
- }
- }
- }
-
- &.empty
- {
- .notifications-list
- {
- .no-data
- {
- display: block;
- padding: 10px;
- }
- }
- }
-}
-
-/* variables */
-@colorClouds: #ecf0f1;
-@colorSilver: #bdc3c7;
-@colorWhite: #fefefe;
-@colorPeterRiver: #3498db;
-@colorConcrete: #95a5a6;
-@colorAsbestos: #7f8c8d;
-@colorWetAsphalt: #34495e;
-
-@borderRadius: 2px;
-
-@transitionDefault: 0.25s ease-out 0.10s;
-
-/* mixins */
-.background-clip(@value: border-box)
-{
- -moz-background-clip: @value;
- -webkit-background-clip: @value;
- background-clip: @value;
-}
-
-.border-radius(@value: 5px)
-{
- -moz-border-radius: @value;
- -webkit-border-radius: @value;
- border-radius: @value;
- .background-clip(padding-box);
-}
-
-.transform(@value)
-{
- -webkit-transform: @value;
- -moz-transform: @value;
- -ms-transform: @value;
- -o-transform: @value;
- transform: @value;
-}
-
-.transition(@value: all 0.25s ease-out)
-{
- -webkit-transition: @value;
- -moz-transition: @value;
- -o-transition: @value;
- transition: @value;
-}
-
-.transition-transform(@transition: 0.25s ease-out)
-{
- -webkit-transition: -webkit-transform @transition;
- -moz-transition: -moz-transform @transition;
- -o-transition: -o-transform @transition;
- transition: transform @transition;
-}
-
-.tab-cross-sign{
- position:relative;
- margin-left:130px;
- font-size:9px;
- top:-30px;
- @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
- top:-70px;
- }
-}
Code Review / portal.git / blobdiff