openecomp-ui/resources/scss/modules/_licenseModelOverview.scss

$list-indentation: 20px;
$arrow-margin: 30px;
$icon-margin: 30px;
$arrow-element-width: 30px;
$list-item-padding: 15px;

@mixin overview-tile-shadow() {
	@include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05));
}

// @mixin vlm-list-item-inset($color) {
// 	@include box-shadow(inset 6px 0 0 0 $color);
// }

$la-color: $dark-blue;
$fg-color: $blue;
$lkg-ep-color: $light-blue;

.license-model-overview {
  .overview-top-section {
    .overview-title{
      @extend .heading-1;
      @extend .text-uppercase !optional;
      margin-bottom: 20px;
      color: $blue;
    }
    .license-model-overview-top {
      display: flex;
      justify-content: flex-start;
      flex-direction: row;
      padding-bottom: 10px;
      min-height: 155px;
      .separator {
        width: 1px;
        border-right: 1px solid $tlv-light-gray;
        margin-left: 20px;
      }
      .vendor-data-view {
        @extend .flex-column;
        background-color: $tlv-gray;
        padding: 13px 30px;
        border: 1px solid $tlv-light-gray;
        @include overview-tile-shadow();
        .vendor-title {
          margin-top:5px;
        }
        .vendor-name {
          @extend .heading-4-semibold;
          text-transform: none;
          padding-bottom: 10px;
          border-bottom: 1px solid $tlv-light-gray;
        }
        .vendor-description, .vendor-description-readonly {
          @extend .flex;
          @extend .body-1;
          justify-content: space-between;
          overflow: hidden;
					position: relative;
					flex: initial;
        }

        &:not(.read-only) .vendor-description {
          border: 1px solid transparent;
          width: 100%;
          padding: 2px 0 2px 6px;
          margin-top: 10px;
          position: relative;
          .svg-icon-wrapper {
            position: absolute;;
            right:0;
            top:0;
            opacity: 0;
          }
          $hover-padding-right: 16px;
          @include percent-plus-value($property: width, $percent: 100%, $value: -$hover-padding-right); // compensate for padding added on hover
          &:hover {
            padding-right: $hover-padding-right;
            border: 1px solid $light-gray;
            cursor: pointer;

            background-color: $white;
            .svg-icon-wrapper {
              opacity: 1;
              z-index: 10;
            }
            .description-data:after {
              background: white;
            }
            .description-data {
              width: 100%;
            }
          }
        }

        .vendor-description-readonly {
          margin-top: 16px;
        }

				.description-data {
					@include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray);
					flex: initial;
				}

        .vendor-description-edit {
          @extend .flex;
          flex-direction: column;
          border: none;
          margin-top: 10px;
          position: relative;
          left: -6px;
          width: 101%;
          textarea {
            padding-left: 6px;
            resize: vertical;
          }
          .buttons-row {
            @extend .flex;
            justify-content: flex-end;
            flex-direction: row;
            margin-top: -25px;
            .buttons-wrapper {
              @extend .flex;
              @extend .body-3;
              border: 1px solid $light-gray;
              width: 95px;
              height: 19px;
              background-color: $tlv-light-gray;
              border-radius: 2px;
              position: relative;
              flex: 0 1 auto;
              text-align: center;
              .description-button {
                cursor: pointer;
                flex: 1;
                &:hover {
                  background-color: $white;
                }
              }
              .description-save {
                cursor: pointer;
                flex: 1;
                color:$blue;
                &:hover {
                  background-color: $white;
                }
              }
            }
          }
          .description-edit-textarea {
            height:67px;
            border: 1px solid $tlv-light-gray;
            resize: none;
            position: relative;
            left: -12px;
          }
        }
      }
      .summary-count-list {
        @extend .flex-column;
        flex: 0.6;
        margin-left: 20px;
        justify-content: space-between;
        border: 1px solid $tlv-light-gray;
        @include overview-tile-shadow();
        background-color: $tlv-gray;
        .summary-count-item {
          @extend .flex;
					@extend .heading-5-semibold;
					align-items: center;
          padding-left: 45px;
          padding-right: 45px;
          border-bottom: 1px solid $tlv-light-gray;
          &:last-child { border-bottom: none; }
          .item-count {
            flex-grow: 2;
            margin-left: 5px;
          }
          .summary-name-and-count {
            width: 100%;
          }
          .svg-icon-wrapper {

            .svg-icon {
              &.__plusCircle {
                width: 20px;
                height: 20px;
                margin-top: 3px;
                margin-left: auto;
                fill: $dark-gray;
                &:hover {
                  fill: $blue;
                }
              }
          }
          }

          .summary-name-and-count {
            &:hover {
              cursor: pointer;
              color: $blue;
            }
          }


        }
      }
      .plus-icon {
        font-size: $icon-font-size;
        border-radius: 50%;
        border: 1px solid $black;
        color: $black;
        height: 16px;
        width: 16px;
        padding: 2px 2px 2px 3px;
      }
    }
  }
  .vlm-list-tab-panel {

		@extend .flex;
		margin-bottom: 7px;
    .section-title {
      flex: 1;
    }
    .overview-buttons-section {
      margin-top: 20px;
      display: flex;
      justify-content: flex-start;
      .button-vlm-list-view {
        height: 32px;
        width: 34px;
        margin-left:10px;
        cursor: pointer;
      }
      /**
      .vlm-list-icon {
        background-size: 32px;
        background-repeat: no-repeat;
        background-image: url($vlm-summary-used);
        &.selected {
          background-image: url($vlm-summary-used-blue);
        }
      }
      .entities-list-icon {
        background-size: 32px;
        background-repeat: no-repeat;
        background-image: url($vlm-summary-orphans);
        &.selected {
          background-image: url($vlm-summary-orphans-blue);
        }
      }
      **/
    }
  }

  .overview-list-section {
    @extend .flex-column;
    margin-top: 35px;
    .section-title {
      @extend .heading-2;
      padding-top: 20px;
      margin-bottom: 15px;
      padding-bottom: 0px;
    }
    &.overview-list-orphans {
      .chevron::before
      {
        display: none;
      }
      .vlm-list-view {
        .vlm-list {
          .vlm-list-item.orphan-list-item {
						@include overview-tile-shadow();
						margin-left: 0;

						.vlm-list-item-title {

							.item-name {
								color: $dark-gray;
							}
						}
						.list-item-icon-col {
							.overview-list-icon {
								background-color: $gray;
								border-color: $gray;
							}
						}
						.list-item-section {
							&:first-child {
								display: flex;
								color: $white;
								min-width: $arrow-element-width;
							}
							&.list-item-icon-col {
								margin-left: 65px;
								margin-right: 65px - $list-item-padding;
							}
						}
          }
        }
      }
    }
    .vlm-list-view {
      flex: 1;
      .vlm-list {
        @extend .flex;
        flex-direction: column;
        .vlm-list-item {
          @include border-shadow();
          min-height: 90px;
          height: 90px;
          background-color: $tlv-gray;
          @extend .flex;
          border: 1px solid $tlv-light-gray;
          margin-bottom: 0px;
          .clickable {
						cursor: pointer;
					}

          .list-item-section {
						.count-value {
							@extend .body-3;
						}
						&.list-item-icon-col {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							padding: 0;
							margin-right: 40px - $list-item-padding;
							margin-left: $icon-margin;
							.overview-list-icon {
								@extend .body-2;
							}
						}
						padding: 15px;
						&.list-item-arrow-col {
							padding: 0;
						}
            .children-count {
              @extend .body-1;
              color: $gray;
              padding-left: 5px;
              .count-value {
                padding: 0 5px;
              }
            }
            .additional-data {
							padding-left: 60px;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							*:last-child {
								margin-top: 20px;
							}
							*:only-child {
								margin-top: 0;
							}
              .additional-data-name {
                @extend .body-2-semibold;
              }
            }
            .additional-data-col-border {
              border-left: 1px solid $tlv-light-gray;
              min-height: 100%;
              height: 100%;
            }
          }
          .list-item-additional-data-col {
            @extend .body-2;
            @extend .flex;
            align-items: stretch;
						flex: 0.8;
						margin-left: 30px;
						padding-top: 17px;
						padding-bottom: 11px;
          }
          .arrow-icon {
						align-self: center;

          }
          .vlm-item-info {
            flex: 1;
          }
          .vlm-list-item-title {
						@extend .flex;
						align-items: baseline;
            .item-name {
              @extend .heading-5-semibold;
              flex: 0 1 auto;
							margin-bottom: 4px;
							text-transform: uppercase;
            }
          }
          .vlm-list-item-description {
            @extend .body-1;
						@include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray);
            max-height: 38px;
          }
          &.vlm-list-item-la {
            margin-top: 10px;
            .la-icon {
              @include create-circle($circle-icon-size,$la-color,'LA');
              color: $white;
						}
						.vlm-list-item-title {
							.item-name {
								color: $la-color;
							}
						}
            .list-item-section {

              &:first-child {
                display: flex;
                color: $la-color;
                min-width: $arrow-element-width;
              }
            }
            .list-item-arrow-col {
              flex: 0.01;
							margin-left: $arrow-margin;
							justify-content: center;
            }
          }
          &.vlm-list-item-fg {
            margin-left: $list-indentation;
						margin-top: 10px;
						.fg-pipeline-separator {
							color: $dark-gray;
							padding: 0 5px;
						}
						.list-item-icon-col {
							margin-left: 29px;
						}
            .fg-icon {
              @include create-circle($circle-icon-size,$fg-color,'FG');
              color: $white;
						}

						.vlm-list-item-title {
							.item-name {
								color: $fg-color;
							}
						}
            .list-item-section {
              &:first-child {
                display: flex;
                color: $fg-color;
                min-width: $arrow-element-width;

              }
            }
            .list-item-arrow-col {
              flex: 0.01;
							margin-left: $arrow-margin - $list-indentation;
							padding-left: $list-indentation;
            }
          }
          &.vlm-list-item-ep {
            margin-left: $list-indentation * 2;
            margin-top: 10px;
            cursor: default;
            .ep-icon {
              @include create-circle($circle-icon-size,$lkg-ep-color,'EP');
              color: $white;
						}
						.vlm-list-item-title {
							.item-name {
								color: $lkg-ep-color;
							}
						}
            .list-item-section {
              &:first-child {
                display: none;
							}
							&.list-item-icon-col {
								margin-left: 52px;
							}
            }

          }
          &.vlm-list-item-lkg {
            margin-top: 10px;
            margin-left: $list-indentation * 2;
            cursor: default;
            .lkg-icon {
              @include create-circle($circle-icon-size,$lkg-ep-color,'KG');
              color: $white;
						}
						.vlm-list-item-title {
							.item-name {
								color: $lkg-ep-color;
							}
						}
            .list-item-section {
              &:first-child {
                display: none;
							}
							&.list-item-icon-col {
								margin-left: 52px;
							}

            }
          }
        }

      }
    }
  }

}