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

   1 .w-ecomp-app-catalog {
   2   .bg_portalWhite;//white for 1702
   3   position: @page-main-position;
   4   top: @page-main-top;
   5   left: @page-main-left;
   6   right: @page-main-right;
   7   bottom: @page-main-bottom;
   8   padding-top: @padding-top;
   9   overflow-y: @page-main-overflow-y;
  10   padding-left: @padding-left-side;
  11    input:not([type="button"]) {
  12     height: 13px;
  13 }
  14
  15   .gridster-item-container .gridster-item-body {
  16     overflow-y:auto;
  17     overflow-x:hidden;
  18   }
  19
  20   .appCatalogue-boarder{
  21   background-color: #eee;
  22   border: 1px dashed white;
  23   overflow-y: auto;
  24   overflow-x: hidden;
  25   }
  26
  27   .app-catalog-container {
  28     .content_justify;
  29     position: relative;
  30     padding: 0 0 32px 0;
  31     width: 100%;
  32
  33     .app-catalog-title {
  34       //.a24r;
  35       margin: auto;
  36      // margin-left: 230px;
  37       .content_justify;
  38     }
  39
  40     .app-catalog-list {
  41       min-height: 70vh;
  42       //display: flex;
  43       justify-content: center;
  44       flex-flow: row wrap;
  45       width: @table-width;
  46       //margin-left: 230px;
  47       margin-bottom: 63px;
  48           margin:auto;
  49       .app-gridster-header {
  50         background-color: @u;
  51         font-size:12px;
  52         overflow:hidden
  53       }
  54
  55       .app-gridster-footer {
  56         background-color: @u;
  57       }
  58
  59     }
  60   }
  61 }
  62
  63 @keyframes fadein {
  64   from {
  65     opacity: 0;
  66   }
  67   to {
  68     opacity: 1;
  69   }
  70 }
  71
  72 .slide.ng-hide-add,
  73 .slide.ng-hide-remove,
  74 .slide.ng-enter,
  75 .slide.ng-leave {
  76   transition: all 0.5s ease;
  77 }
  78 .slide.ng-hide,
  79 .slide.ng-enter {
  80   transform: translate(-100%, 0);
  81 }
  82 .slide.ng-enter-active {
  83   transform: translate(0, 0);
  84 }
  85 .slide.ng-leave {
  86   transform: translate(0, 0);
  87 }
  88 .slide.ng-leave-active {
  89   transform: translate(+100%, 0);
  90 }
  91 .appCatalogue-boarder{
  92         // border: 2px solid #ccc!important;
  93         // border-radius: 16px!important;
  94           height: 800px;
  95     overflow: auto;
  96 }
  97 .app-visibility.false {
  98         opacity: 0.5;
  99 }
 100
 101 .dock ul{
 102 display: inline-block;
 103
 104 width: auto;
 105 margin: 0px;
 106 padding: 0px;
 107 list-style: none;
 108
 109 }
 110 .dock ul li {
 111 width: auto;
 112 height: auto;
 113 display: inline-block;
 114 bottom: 0;
 115 vertical-align: bottom;
 116 margin-top: -43px;
 117 }
 118 .dock ul li a {
 119 display: block;
 120 height: 150px;
 121 width: 150px;
 122 position: relative;
 123 -webkit-transition-property: width, height,margin-top;
 124 -webkit-transition-duration: 0.5s;
 125 -o-transition-property: width, height,margin-top;
 126 -o-transition-duration: 0.5s;
 127 -moz-transition-property: width, height,margin-top;
 128 -moz-transition-duration: 0.5s;
 129 }
 130 .dock ul li a:hover {
 131 width: 200px;
 132 height: 200px;
 133 margin-top: -50px;
 134 }
 135 .dock ul li a img {
 136 width: 100%;
 137 position: absolute;
 138 bottom: 0;
 139 left: 0;
 140 border: none;
 141 padding: 0px 0px 0px 30px;
 142 }
 143 .dock_left{
 144 width: 31px;
 145 -webkit-transform: rotate(33deg);
 146 -moz-transform: rotate(33deg);
 147 -o-transform: rotate(33deg);
 148 position: relative;
 149 background: #EEE;
 150 overflow: hidden;
 151 float: left;
 152 height: 100px;
 153 z-index: 2;
 154 margin: -18px;
 155 }
 156 .dock_right{
 157 width: 36px;
 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
 170
 171
 172
 173 /*Time for the CSS*/
 174 * {margin: 0; padding: 0;}
 175 body {background: #ccc;}
 176
 177 .caption {
 178         background: rgba(0, 0, 0, 0.5);
 179         position: absolute;
 180   bottom: 0;
 181         width: 640px
 182 }
 183
 184 .caption a {
 185         display: block;
 186         color: #fff;
 187         text-decoration: none;
 188   font: normal 16px 'Lato', Helvetica, Arial, sans-serif;
 189   -webkit-font-smoothing: antialiased;
 190         padding: 15px;
 191 }
 192
 193
 194 /*widgets*/
 195 .singleBtnBorder {
 196     border-radius: 6px 6px 6px 6px;
 197 }
 198
 199 .icon-anchor {
 200     color: #888;
 201 }
 202
 203 .widgetHeaderBtn:hover, .widgetHeaderBtn:focus {
 204     background: rgba(0, 0, 0, 0);
 205     color: #3a7999;
 206     box-shadow: inset 0 0 0 2px #3a7999;
 207 }
 208
 209 .box-one {
 210   -webkit-transition:all linear 0.4s;
 211   transition:all linear 0.4s;
 212   height:100px; width:200px; background:white;    border: 2px solid #ccc!important;
 213     border-radius: 16px!important;
 214 }
 215 .box-one.ng-hide {
 216 display: block!important;
 217   opacity:0;
 218 }
 219
 220 .gridsterContent{
 221         height:120px;
 222 }
 223 .gridsterAppContent{
 224         height:120px;
 225 }
 226  .gridsterImage{
 227         height:84px;
 228         width:168px;
 229  }
 230
 231 /*application empty div*/
 232 .app-error-block {
 233     padding-top: 10px;
 234 }
 235
 236 .text-center { text-align: center; }
 237
 238 .text-right { text-align: right; }
 239
 240 .text-justify { text-align: justify; }
 241
 242 /*widget header*/
 243 .optionsMenu{
 244         position: absolute;
 245     list-style: none;
 246     top: 25px;
 247     right: 10px;
 248     border: 1px solid #067ab4;
 249     display: none;
 250     z-index: 2;
 251     border-radius: 6px 0px 6px 6px;
 252     background: #fff;
 253     width: 130px;
 254 }
 255
 256 .optionsMenuLink {
 257     position: relative;
 258     padding-left: 8px;
 259     padding-right: 2px;
 260     font-size: 12px;
 261     line-height: 30px;
 262     color: #444444;
 263 }
 264 .optionsMenu > li:hover a {
 265     color: #ffffff !important;
 266 }
 267 .optionsMenu > li {
 268     width: 100%;
 269     text-align: left;
 270 }
 271 .optionsMenu > li:hover {
 272     background-color: #0faaf7;
 273     border-color: none !important;
 274     cursor: pointer;
 275 }
 276
 277 .simulateCatGridHeader{
 278         position: relative;
 279     height: 70px !important;
 280     border: 1px solid #d3d3d3;
 281     border-bottom: 0;
 282     background-color: #E5E5E5;
 283     white-space: nowrap;
 284     text-overflow: ellipsis;
 285     z-index: 1;
 286 }
 287
 288 .simulateCatGridHeaderTitle{
 289         line-height: 20px;
 290         margin-top: 10px;
 291          margin-left: 26px;
 292     font-family: "Omnes-ECOMP-W02", Arial;
 293     font-size: 18px;
 294     color: #444444;
 295     float: left;
 296 }
 297
 298 .simulateCatGridHeaderRadio{
 299     line-height: 20px;
 300     margin-top: 10px;
 301     margin-left: 10px;
 302     font-family: "Omnes-ECOMP-W02", Arial;
 303     font-size: 12px;
 304     color: #444444;
 305     float: left;
 306 }
 307
 308 .simulateCatGridHeaderDetails{
 309         line-height: 20px;
 310     margin-left: 10px;
 311     font-family: "Omnes-ECOMP-W02", Arial;
 312     font-size: 12px;
 313     color: #444444;
 314     float: left;
 315 }
 316
 317 .simulateGridHeaderHandle{
 318         cursor: move;
 319     margin: 12px;
 320     position: absolute;
 321     top: 0;
 322     left: 0;
 323     border: 0;
 324     vertical-align: middle;
 325     -ms-interpolation-mode: bicubic;
 326     display: block;
 327 }
 328
 329 .portal-checkbox--on .portal-checkbox__indicator, .portal-radio--on .portal-radio__indicator {
 330     opacity: 1;
 331 }
 332
 333 .animate-enter,
 334 .animate-leave
 335 {
 336     -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
 337     -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
 338     -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
 339     -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
 340     transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
 341     position: relative;
 342     display: block;
 343 }
 344
 345 .animate-enter.animate-enter-active,
 346 .animate-leave {
 347     opacity: 1;
 348     top: 0;
 349     height: 30px;
 350 }
 351
 352 .animate-leave.animate-leave-active,
 353 .animate-enter {
 354     opacity: 0;
 355     top: -50px;
 356     height: 0px;
 357 }
 358
 359 /** gridster style**/
 360 ul {
 361     list-style: none;
 362 }
 363 .gridster-box {
 364     height: 100%;
 365     border: 1px solid #ccc;
 366     background-color: #fff;
 367         transition: transform 0.5s ease-out;
 368 }
 369 .gridster-box-header {
 370     background-color: #fff;
 371     padding: 0 0px 0 10px;
 372     border-bottom: 1px solid #ccc;
 373     position: relative;
 374     height: 50px !important;
 375 }
 376 .gridster-box-header h3 {
 377     margin-top: 15px;
 378     display: inline-block;
 379     font-family: "Omnes-ECOMP-W02", Arial;
 380 }
 381 .gridster-box-content {
 382     padding: 59px;
 383 }
 384 .gridster-box:hover{
 385     transform: scale(1.1);
 386 }
 387 .gridster-box-header-btns {
 388     top: 15px;
 389     right: 10px;
 390     position: absolute;
 391 }
 392 .checkbox .skin {
 393     left: 125px;
 394     top: -24px;
 395 }
 396 .form-row {
 397     margin-top: -14px;
 398 }
 399
 400 .icon-content-gridguide{
 401 cursor:move;
 402 font-size: 22px;
 403 }
 404 .icon-tickets-contested{
 405 font-size: 20px;
 406 margin-left: 126px;
 407 }
 408
 409 .checkbox, .radio {
 410     min-height: 0px;
 411     padding-left: 0px;
 412
 413 }