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

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