aboutsummaryrefslogtreecommitdiffstats
path: root/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2017-02-19 12:57:33 +0200
committerMichael Lando <ml636r@att.com>2017-02-19 13:47:13 +0200
commitefa037d34be7b1570efdc767c79fad8d4005f10e (patch)
treecf1036ba2728dea8a61492b678fa91954e629403 /openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
parentf5f13c4f6b6fe3b4d98e349dfd7db59339803436 (diff)
Add new code new version
Change-Id: Ic02a76313503b526f17c3df29eb387a29fe6a42a Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'openecomp-ui/resources/scss/modules/_onboardingCatalog.scss')
-rw-r--r--openecomp-ui/resources/scss/modules/_onboardingCatalog.scss164
1 files changed, 164 insertions, 0 deletions
diff --git a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
new file mode 100644
index 0000000000..6020866d4a
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
@@ -0,0 +1,164 @@
+$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;
+ }
+ }
+ }
+ }
+}