diff options
Diffstat (limited to 'ecomp-portal-FE-common/client/app/views/tabs/tabs.less')
| -rw-r--r-- | ecomp-portal-FE-common/client/app/views/tabs/tabs.less | 660 |
1 files changed, 660 insertions, 0 deletions
diff --git a/ecomp-portal-FE-common/client/app/views/tabs/tabs.less b/ecomp-portal-FE-common/client/app/views/tabs/tabs.less new file mode 100644 index 00000000..9f90d610 --- /dev/null +++ b/ecomp-portal-FE-common/client/app/views/tabs/tabs.less @@ -0,0 +1,660 @@ +.w-ecomp-tabs { + //.bg_portalWhite;//white for 1702 + .bg_portalGray; // gray for 1610 + + position: fixed; + left: 0; + right: 0; + bottom: @page-main-bottom; + overflow-y: hidden; + top: @header-height; + padding-left: 0; + height:50px; + z-index:101; + .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; + .dBlue24r; // AT&T Dark Blue + margin: auto; + .content_justify; + } + .portals-list { + min-height: 70vh; + //display: flex; + justify-content: center; + flex-flow: row wrap; + width: 1170px; + + margin: auto; + margin-bottom: 63px; + + .app-gridster-header { + background-color: @portalWhite; + } + + .app-gridster-footer { + background-color: @portalWhite; + } + + .portals-list-item { + background-color: @portalWhite; + 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: @portalWhite; + height: 120px; + top: 180px; + position: relative; + box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.1); + padding: 16px; + + .info-title { + //.a24r; + .dBlue24r; // AT&T Dark Blue + margin-bottom: 4px; + + text-overflow: ellipsis; + overflow: hidden; + } + .info-description { + .portalDBlue16r; + 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; + } + } + } + } + } +} + +.w-ecomp-main-disclaimer { + text-align: center; + .dGray14r; + bottom: -37px; + width: 100%; + line-height: 1.5em; + +} +//.build-number { +// .o12i; +//} + +@keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + + + +.tab-container { + background: @portalLGray; + 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 @funcBkgGray; +} +.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 @portalGray; +} +.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: @portalBlack; + 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: @portalDGray; + 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: @portalLPurple; + color: @portalWhite; + -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%, @portalWhite), color-stop(100%, @funcBkgGray)); + background-image: -moz-linear-gradient(@portalWhite, @funcBkgGray 30px); + background-image: -webkit-linear-gradient(@portalWhite, @funcBkgGray 30px); + background-image: linear-gradient(@portalWhite, @funcBkgGray 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: @portalLBlue; + 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: @portalLGray; + 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; + // position: absolute; + //top: -999px; + + &: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: 126px; + top:-70px; + @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + top:-70px; + } +} + +#tab-cross-sign-icon{ + margin: 48px 0px 0px 0px; + width: 16.1px; + border-bottom-width:0px; + padding: 6px 6px 6px 3px; +} |