ecomp-portal-FE/client/app/views/catalog/catalog.less

   1 /*-
   2  * ================================================================================
   3  * eCOMP Portal
   4  * ================================================================================
   5  * Copyright (C) 2017 AT&T Intellectual Property
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ================================================================================
  19  */
  20 .w-ecomp-app-catalog {
  21   //.bg_u;//white for 1702
  22   .bg_w;  // gray for 1610
  23   position: @page-main-position;
  24   top: @page-main-top;
  25   left: @page-main-left;
  26   right: @page-main-right;
  27   bottom: @page-main-bottom;
  28   padding-top: @padding-top;
  29   overflow-y: @page-main-overflow-y;
  30   padding-left: @padding-left-side;
  31
  32   .gridster-item-container .gridster-item-body {
  33     overflow-y:auto;
  34     overflow-x:hidden;
  35   }
  36
  37   .app-catalog-container {
  38     .content_justify;
  39     position: relative;
  40     padding: 0 0 32px 0;
  41     width: 100%;
  42
  43     .app-catalog-title {
  44       .a24r;
  45       margin: auto;
  46       .content_justify;
  47     }
  48     .app-catalog-list {
  49       min-height: 90vh;
  50       //display: flex;
  51       justify-content: center;
  52       flex-flow: row wrap;
  53       width: 1170px;
  54
  55       margin: auto;
  56       margin-bottom: 63px;
  57
  58       .app-gridster-header {
  59         background-color: @u;
  60         font-size:12px;
  61         overflow:hidden
  62       }
  63
  64       .app-gridster-footer {
  65         background-color: @u;
  66       }
  67
  68     }
  69   }
  70 }
  71
  72 .build-number {
  73   .o12i;
  74 }
  75
  76 @keyframes fadein {
  77   from {
  78     opacity: 0;
  79   }
  80   to {
  81     opacity: 1;
  82   }
  83 }
  84
  85 .slide.ng-hide-add,
  86 .slide.ng-hide-remove,
  87 .slide.ng-enter,
  88 .slide.ng-leave {
  89   transition: all 0.5s ease;
  90 }
  91 .slide.ng-hide,
  92 .slide.ng-enter {
  93   transform: translate(-100%, 0);
  94 }
  95 .slide.ng-enter-active {
  96   transform: translate(0, 0);
  97 }
  98 .slide.ng-leave {
  99   transform: translate(0, 0);
 100 }
 101 .slide.ng-leave-active {
 102   transform: translate(+100%, 0);
 103 }
 104 .appCatalogue-boarder{
 105         // border: 2px solid #ccc!important;
 106         // border-radius: 16px!important;
 107           height: 800px;
 108     overflow: auto;
 109 }
 110 .app-visibility.false {
 111         opacity: 0.5;
 112 }
 113
 114 .dock ul{
 115 display: inline-block;
 116
 117 width: auto;
 118 margin: 0px;
 119 padding: 0px;
 120 list-style: none;
 121
 122 }
 123 .dock ul li {
 124 width: auto;
 125 height: auto;
 126 display: inline-block;
 127 bottom: 0;
 128 vertical-align: bottom;
 129 margin-top: -43px;
 130 }
 131 .dock ul li a {
 132 display: block;
 133 height: 150px;
 134 width: 150px;
 135 position: relative;
 136 -webkit-transition-property: width, height,margin-top;
 137 -webkit-transition-duration: 0.5s;
 138 -o-transition-property: width, height,margin-top;
 139 -o-transition-duration: 0.5s;
 140 -moz-transition-property: width, height,margin-top;
 141 -moz-transition-duration: 0.5s;
 142 }
 143 .dock ul li a:hover {
 144 width: 200px;
 145 height: 200px;
 146 margin-top: -50px;
 147 }
 148 .dock ul li a img {
 149 width: 100%;
 150 position: absolute;
 151 bottom: 0;
 152 left: 0;
 153 border: none;
 154 padding: 0px 0px 0px 30px;
 155 }
 156 .dock_left{
 157 width: 31px;
 158 -webkit-transform: rotate(33deg);
 159 -moz-transform: rotate(33deg);
 160 -o-transform: rotate(33deg);
 161 position: relative;
 162 background: #EEE;
 163 overflow: hidden;
 164 float: left;
 165 height: 100px;
 166 z-index: 2;
 167 margin: -18px;
 168 }
 169 .dock_right{
 170 width: 36px;
 171 -webkit-transform: rotate(-33deg);
 172 -moz-transform: rotate(-33deg);
 173 -o-transform: rotate(-33deg);
 174 position: relative;
 175 background: #EEE;
 176 overflow: hidden;
 177 float: left;
 178 height: 100px;
 179 z-index: 2;
 180 margin: -18px;
 181 }
 182
 183
 184
 185
 186 /*Time for the CSS*/
 187 * {margin: 0; padding: 0;}
 188 body {background: #ccc;}
 189
 190 .slider{
 191         width: 640px; /*Same as width of the large image*/
 192         position: relative;
 193         /*Instead of height we will use padding*/
 194         padding-top: 320px; /*That helps bring the labels down*/
 195
 196         margin: 50px auto;
 197
 198         /*Lets add a shadow*/
 199         box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
 200 }
 201
 202
 203 /*Last thing remaining is to add transitions*/
 204 .slider>img{
 205         position: absolute;
 206         left: 0; top: 0;
 207         transition: all 0.5s;
 208 }
 209
 210 .slider input[name='slide_switch'] {
 211         display: none;
 212 }
 213
 214 .slider label {
 215         /*Lets add some spacing for the thumbnails*/
 216         margin: 18px 0 0 18px;
 217         border: 3px solid #999;
 218
 219         float: left;
 220         cursor: pointer;
 221         transition: all 0.5s;
 222
 223         /*Default style = low opacity*/
 224         opacity: 0.6;
 225 }
 226
 227 .slider label img{
 228         display: block;
 229 }
 230
 231 /*Time to add the click effects*/
 232 .slider input[name='slide_switch']:checked+label {
 233         border-color: #666;
 234         opacity: 1;
 235 }
 236 /*Clicking any thumbnail now should change its opacity(style)*/
 237 /*Time to work on the main images*/
 238 .slider input[name='slide_switch'] ~ img {
 239         opacity: 0;
 240         transform: scale(1.1);
 241 }
 242 /*That hides all main images at a 110% size
 243 On click the images will be displayed at normal size to complete the effect
 244 */
 245 .slider input[name='slide_switch']:checked+label+img {
 246         opacity: 1;
 247         transform: scale(1);
 248 }
 249 /*Clicking on any thumbnail now should activate the image related to it*/
 250
 251 .caption {
 252         background: rgba(0, 0, 0, 0.5);
 253         position: absolute;
 254   bottom: 0;
 255         width: 640px
 256 }
 257
 258 .caption a {
 259         display: block;
 260         color: #fff;
 261         text-decoration: none;
 262   font: normal 16px 'Lato', Helvetica, Arial, sans-serif;
 263   -webkit-font-smoothing: antialiased;
 264         padding: 15px;
 265 }
 266
 267
 268 /*widgets*/
 269 .singleBtnBorder {
 270     border-radius: 6px 6px 6px 6px;
 271 }
 272
 273 .icon-anchor {
 274     color: #888;
 275 }
 276
 277 .widgetHeaderBtn:hover, .widgetHeaderBtn:focus {
 278     background: rgba(0, 0, 0, 0);
 279     color: #3a7999;
 280     box-shadow: inset 0 0 0 2px #3a7999;
 281 }
 282
 283 .box-one {
 284   -webkit-transition:all linear 0.4s;
 285   transition:all linear 0.4s;
 286   height:100px; width:200px; background:white;    border: 2px solid #ccc!important;
 287     border-radius: 16px!important;
 288 }
 289 .box-one.ng-hide {
 290 display: block!important;
 291   opacity:0;
 292 }
 293
 294 .gridsterContent{
 295         height:120px;
 296 }
 297 .gridsterAppContent{
 298         height:120px;
 299
 300 }
 301
 302  .gridsterImage{
 303         height:84px;
 304         width:168px;
 305  }
 306  .grider-content-ecomp{
 307         transition: transform 0.5s ease-out;
 308  }
 309   .grider-content-ecomp:hover{
 310     transform: scale(1.1);
 311 }
 312
 313 /*application empty div*/
 314 .app-error-block {
 315     padding-top: 10px;
 316 }
 317
 318 .text-center { text-align: center; }
 319
 320 .text-right { text-align: right; }
 321
 322 .text-justify { text-align: justify; }
 323
 324 /*widget header*/
 325 .optionsMenu{
 326             position: absolute;
 327     list-style: none;
 328     top: 25px;
 329     right: 10px;
 330     border: 1px solid #067ab4;
 331     display: none;
 332     z-index: 2;
 333     border-radius: 6px 0px 6px 6px;
 334     background: #fff;
 335     width: 130px;
 336 }
 337
 338 .optionsMenuLink {
 339     position: relative;
 340     padding-left: 8px;
 341     padding-right: 2px;
 342     font-size: 12px;
 343     line-height: 30px;
 344     color: #444444;
 345 }
 346 .optionsMenu > li:hover a {
 347     color: #ffffff !important;
 348 }
 349 .optionsMenu > li {
 350     width: 100%;
 351     text-align: left;
 352 }
 353 .optionsMenu > li:hover {
 354     background-color: #0faaf7;
 355     border-color: none !important;
 356     cursor: pointer;
 357 }
 358
 359 .simulateCatGridHeader{
 360         position: relative;
 361     height: 70px !important;
 362     border: 1px solid #d3d3d3;
 363     border-bottom: 0;
 364     background-color: #E5E5E5;
 365     white-space: nowrap;
 366     text-overflow: ellipsis;
 367     z-index: 1;
 368 }
 369
 370 .simulateCatGridHeaderTitle{
 371         line-height: 20px;
 372         margin-top: 10px;
 373          margin-left: 26px;
 374     font-family: arial;
 375     font-size: 18px;
 376     color: #444444;
 377     float: left;
 378 }
 379
 380 .simulateCatGridHeaderRadio{
 381         line-height: 20px;
 382         margin-top: 10px;
 383         margin-left: 10px;
 384     font-family: arial;
 385     font-size: 12px;
 386     color: #444444;
 387     float: left;
 388 }
 389
 390 .simulateCatGridHeaderDetails{
 391         line-height: 20px;
 392     margin-left: 10px;
 393     font-family: arial;
 394     font-size: 12px;
 395     color: #444444;
 396     float: left;
 397 }
 398
 399 .simulateGridHeaderHandle{
 400         cursor: move;
 401     margin: 12px;
 402     position: absolute;
 403     top: 0;
 404     left: 0;
 405     border: 0;
 406     vertical-align: middle;
 407     -ms-interpolation-mode: bicubic;
 408     display: block;
 409 }
 410
 411 .att-checkbox--on .att-checkbox__indicator, .att-radio--on .att-radio__indicator {
 412     opacity: 1;
 413 }
 414
 415 .animate-enter,
 416 .animate-leave
 417 {
 418     -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
 419     -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
 420     -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
 421     -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
 422     transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
 423     position: relative;
 424     display: block;
 425 }
 426
 427 .animate-enter.animate-enter-active,
 428 .animate-leave {
 429     opacity: 1;
 430     top: 0;
 431     height: 30px;
 432 }
 433
 434 .animate-leave.animate-leave-active,
 435 .animate-enter {
 436     opacity: 0;
 437     top: -50px;
 438     height: 0px;
 439 }