[SDC-29] Amdocs OnBoard 1707 initial commit.

[sdc.git] / openecomp-ui / resources / scss / modules / _onboardingCatalog.scss

diff --git a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
index 6020866..6c56d11 100644 (file)
--- a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
+++ b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
@@ -1,164 +1,24 @@
 $transitionLength: 0.6s;
 
 .catalog-view {
-  background-color: $background-gray;
-  height: 100%;
-  overflow: hidden;
-  height: 100%;
-  .catalog-header {
-    padding-top: 20px;
-    margin: 0 48px 0 20px;
-    border-bottom: 1px solid $light-gray;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    .catalog-header-title {
-      @extend .heading-2;
-      margin: 0 0 10px 0;
-    }
-    .expandable-input-wrapper {
-      margin: 0 0 10px 0;
-    }
-  }
-  .catalog-list {
-    max-height: 100%;
-    overflow: auto;
-    display: flex;
-    flex-wrap: wrap;
-    padding: 40px 10px 0 10px;
-    &:after {
-      content: ' ';
-      display:block;
-      width: 100%;
-      height: 85px;
-    }
-    .tile {
-      background-color: $white;
-      margin: 10px;
-      width: 214px;
-      height: 210px;
-      display: flex;
-      flex-direction: column;
-
-    }
-    .create-catalog-item {
-      border: 2px dashed $light-gray;
-      background-color: transparent;
-      &:hover {
-        .plus-section {
-          display: none;
-        }
-        .primary-btn {
-          display: inherit;
-        }
-      }
-      justify-content: center;
-      .plus-section {
-        align-self: center;
-        display: flex;
-        flex-direction: column;
-        .plus-icon-button {
-          align-self: center;
-          background-size: 23px;
-          width: 23px;
-          height: 23px;
-          margin-bottom: 4px;
-        }
-      }
-      .primary-btn {
-        display: none;
-        width: 176px;
-        &.new-license-model {
-          margin-bottom: 18px;
-        }
-        &:hover {
-          background-color: $background-alice-blue;
-        }
-      }
-    }
-    .catalog-tile {
-      cursor: pointer;
-      border: 1px solid $tlv-light-gray;
-      &:hover {
-        @include box-shadow(3px 3px 5px 0 rgba(24,24,25,.04));
-      }
-      &:active {
-        border: 1px solid $light-blue;
-      }
-      .catalog-tile-type {
-        padding-top: 7px;
-        border-radius: 50%;
-        width: 40px;
-        height: 40px;
-        background: white;
-        border: 4px solid #F2F2F2;
-        position: relative;
-        top: -12px;
-        left: -7px;
-        &:before {
-          @extend .body-1;
-          color: $light-blue;
-        }
-        &.license-model-type {
-          padding-left: 13px;
-          &:before {
-            content: "L"
-          }
-        }
-        &.software-product-type {
-          padding-left: 8px;
-          &:before {
-            content: "SP"
-          }
-        }
-      }
-      .catalog-tile-icon {
-        text-align: center;
-        flex-basis: 60%;
-        justify-content: center;
-        background-size: 60px 60px;
-        background-repeat: no-repeat;
-        background-position: center;
-        display: flex;
-        .icon {
-          align-self: center;
-          height: 65px;
-          width: 65px;
-          background-repeat: no-repeat;
-          margin-bottom: 27px;
-          &.license-model-type-icon {
-            background-image: url('../images/onboarding/vendor-license-model.svg');
-          }
-          &.software-product-type-icon {
-            background-image: url('../images/onboarding/vendor-software-product.svg');
-          }
-        }
-      }
-      .catalog-tile-content {
-        border-top: 1px solid $background-gray;
-        flex-basis: 30%;
-        padding: 8px;
-        display: flex;
-        justify-content: space-between;
-        .catalog-tile-item-details {
-          overflow: hidden;
-        }
-        .catalog-tile-item-name {
-          @extend .body-1-medium;
-          @include ellipsis();
-          width: 150px;
-          color: $dark-gray
-        }
-        .catalog-tile-item-version {
-          @extend .body-1;
-          color: $gray;
-        }
-        .catalog-tile-check-in-status {
-          width: 25px;
-          height: 19px;
-          align-self: center;
-        }
-      }
-    }
-  }
+       background-color: $background-gray;
+       overflow: hidden;
+       height: 100%;
+       @import "onboardingCatalog/onboardHeader";
+       @import "onboardingCatalog/catalogHeader";
+       @import "onboardingCatalog/vendorPageHeader";
+       @import "onboardingCatalog/catalogList";
+       .catalog-wrapper {
+               height: 100%;
+               overflow: auto;
+               .tab-separator {
+                 content: '';
+                 height: 25px;
+                 border-right: 1px solid $dark-gray;
+               }
+               .catalog-list {
+                       overflow: hidden;
+                       height: auto;
+               }
+       }
 }