--- /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