catalog-ui/src/app/view-models/workspace/tabs/distribution/distribution.less

   1
   2 .w-sdc-distribution-view {
   3     text-align: left;
   4
   5     .g_1;
   6     min-height: 500px;
   7
   8     .w-sdc-distribution-view-distributed-green-text {
   9         .l_9;
  10         .bold;
  11     }
  12     .w-sdc-distribution-view-distributed-error-red-text {
  13         .h_9;
  14         .bold;
  15     }
  16
  17     .bg_c;
  18     vertical-align: top;
  19     padding: 30px 10px;
  20     width: 100%;
  21
  22     .w-sdc-distribution-view-header {
  23         display: flex;
  24         -webkit-justify-content: space-between;
  25         margin: 0 25px 5px 40px;
  26
  27         .header-spacer {
  28             flex-grow: 5;
  29         }
  30     }
  31
  32     .top-search {
  33         position: relative;
  34         input {
  35             &.search-text {
  36                 height: 26px;
  37                 line-height: 26px;
  38                 margin: 0 18px 4px 20px;
  39                 padding-right: 25px;
  40             }
  41
  42         }
  43         .magnification {
  44             top: 8px;
  45             right: 25px;
  46         }
  47     }
  48
  49     .w-sdc-distribution-view-content {
  50         .perfect-scrollbar;
  51         padding: 0 25px 0 0px;
  52         margin-bottom: 25px;
  53         height: 700px;
  54         overflow: hidden;
  55         position: relative;
  56
  57     }
  58
  59     .w-sdc-distribution-view-title {
  60         .s_14_r;
  61
  62         line-height: 30px;
  63
  64         span {
  65             padding-left: 5px;
  66         }
  67     }
  68
  69     .blue-font {
  70         .a_14_m;
  71
  72     }
  73
  74     .red-font {
  75         .q_14_m;
  76     }
  77
  78     .w-sdc-distribution-view-block {
  79         div {
  80             display: inline-block;
  81         }
  82     }
  83
  84     .w-sdc-distribution-view-content-section {
  85         ul {
  86             list-style-type: none;
  87         }
  88
  89         .distribution-bth {
  90             .hand;
  91             &.disabled {
  92                 cursor: none;
  93             }
  94         }
  95
  96         .copy-link {
  97             padding-right: 19px;
  98             margin-left: 8px;
  99             cursor: pointer;
 100
 101         }
 102
 103         .w-sdc-distribute-row-extends {
 104             border-Left: solid 4px transparent;
 105             &.extends {
 106                 border-left: solid 4px @main_color_c;
 107                 border-bottom: 1px solid @border_color_f;
 108                 margin-bottom: 10px;
 109             }
 110         }
 111         .w-sdc-distribute-parent-block {
 112             border: 1px solid @main_color_o;;
 113             width: 100%;
 114             margin-bottom: 6px;
 115
 116             .status-icon {
 117                 vertical-align: middle;
 118                 margin-bottom: 4px;
 119             }
 120
 121             &.extends {
 122                 background-color: @tlv_color_t;
 123             }
 124
 125             :not(.disable-hover):hover {
 126                 background-color: @tlv_color_u;
 127             }
 128
 129             .title-section {
 130                 display: inline-block;
 131                 margin-right: 10px;
 132                 flex-basis: 0;
 133             }
 134
 135             .title {
 136                 .l_12_m;
 137                 font-weight: bold;
 138             }
 139             .w-sdc-distribute-content {
 140                 display: flex;
 141                 align-items: center;
 142                 justify-content: space-between;
 143                 margin-left: 10px;
 144             }
 145
 146             .w-sdc-distribution-arrow-btn {
 147                 .sprite-new;
 148                 .arrow-up-small;
 149                 margin: 0 6px;
 150                 display: inline-table;
 151             }
 152             .extends.w-sdc-distribution-arrow-btn {
 153                 -webkit-transform: rotate(180deg);
 154                 -ms-transform: rotate(180deg);
 155                 transform: rotate(180deg);
 156             }
 157
 158             .w-sdc-distribute-row {
 159                 display: flex;
 160                 align-items: center;
 161                 justify-content: space-between;
 162
 163                 .w-sdc-distribute-row-content {
 164                     margin: 15px 31px 10px 0;
 165                     width: 100%;
 166                     .w-sdc-distribute-status-block {
 167                         border-top: solid 1px @main_color_o;
 168                     }
 169                     .item-1 {
 170                         flex-grow: 2;
 171                     }
 172                     .item-2 {
 173                         flex-grow: 1;
 174                     }
 175                     .item-3 {
 176                         flex-grow: 1;
 177                     }
 178                     .item-4 {
 179                         flex-grow: 1;
 180                     }
 181                     .item-5 {
 182                         flex-grow: 1;
 183                     }
 184                 }
 185             }
 186
 187             .w-sdc-distribute-status-block {
 188                 display: flex;
 189                 align-items: center;
 190                 justify-content: space-between;
 191                 margin: 10px 5px 0 5px;
 192                 padding: 5px 5px 0 5px;;
 193                 width: 100%;
 194                 div {
 195                     border-left: 1px solid @main_color_o;
 196                     padding: 0 12px;
 197                 }
 198
 199                 .link {
 200                     .a_14_m;
 201                     cursor: pointer;
 202                     &:hover{
 203                         text-decoration: underline;
 204                         .b_14_m;
 205                     }
 206                 }
 207
 208                 span {
 209                     padding: 2px;
 210                 }
 211
 212                 .deployed {
 213                     margin-left: 10px;
 214                     .sprite-new;
 215                     .success-circle-small;
 216                 }
 217
 218                 .error {
 219                     .q_14_m;
 220                     margin-left: 10px;
 221                     .sprite-new;
 222                     .error-icon;
 223                 }
 224
 225                 .status-item-1 {
 226                     border-left: 0;
 227                 }
 228
 229                 .status-item-6 {
 230                     flex-grow: 1;
 231                     border-left: none;
 232                     text-align: right;
 233                 }
 234             }
 235
 236             .w-sdc-distribute-components-block {
 237                 padding: 0;
 238                 padding-bottom: 5px;
 239                 list-style-type: none;
 240
 241                 li {
 242                     margin: 5px 2px;
 243                 }
 244
 245                 .omf-component-row {
 246                     border: 1px solid @border_color_f;
 247                     padding-left: 3px;
 248                     background-color: white;
 249                     margin: 0 30px;
 250                     &.extends {
 251                         padding-left: 0;
 252                         border-Left: solid 4px @main_color_c;
 253
 254                     }
 255
 256                     .w-sdc-distribute-status-block {
 257                         margin: 5px;
 258                         padding: 5px;
 259                     }
 260
 261                     .blue-font {
 262                         .a_16_m;
 263
 264                     }
 265
 266                     &:hover {
 267                         background-color: @tlv_color_u;
 268                     }
 269
 270                 }
 271
 272             }
 273
 274             .w-sdc-distribute-omfComponent-block {
 275                 background-color: white;
 276                 margin: 0 30px;
 277                 padding: 8px 10px;
 278                 border: 1px solid @border_color_f;
 279
 280                 .omfComponent-table-head {
 281                     margin-bottom: 5px;
 282                     background-color: @tlv_color_u;
 283                     .title {
 284                         padding: 6px 10px;
 285                         border-left: 1px solid @border_color_f;
 286                         &:first-child {
 287                             border: none;
 288                         }
 289                     }
 290                 }
 291
 292                 .omfComponent-table-row {
 293                     border-bottom: 1px solid @border_color_f;
 294                     &.row-0 {
 295                         border-top: 1px solid @border_color_f;
 296                     }
 297                     .w-sdc-distribute-cell {
 298                         padding: 10px;
 299                         border-left: 1px solid @border_color_f;
 300                         &:last-child {
 301                             border-right: 1px solid @border_color_f;
 302                         }
 303                         &.item-5 {
 304                             .m_14_m;
 305                         }
 306                     }
 307                 }
 308
 309                 .distribution-url {
 310
 311                 }
 312
 313                 .w-sdc-distribute-row.extends {
 314                     border-Left: solid 4px @main_color_c;
 315                     .item-1 {
 316                         border: none;
 317                     }
 318
 319                 }
 320
 321                 .item-1 {
 322                     width: 20%;
 323                 }
 324                 .item-2 {
 325                     width: 20%;
 326                 }
 327
 328                 .item-3 {
 329                     width: 24%;
 330                     display: flex;
 331                 }
 332
 333                 .item-4 {
 334                     width: 18%;
 335                 }
 336
 337                 .item-5 {
 338                     width: 18%;
 339                 }
 340             }
 341
 342             .w-sdc-distribute-url-block {
 343
 344                 padding: 10px 15px;
 345                 border: none;
 346                 border-right: 1px solid @border_color_f;
 347                 border-bottom: 1px solid @border_color_f;
 348                 width: 100%;
 349                 li {
 350                     border: none;
 351                     span {
 352                         padding-right: 30px;
 353                         .m_12_r;
 354                     }
 355                 }
 356
 357             }
 358         }
 359
 360     }
 361 }
 362