blob: 9246b5fcbfb12427038e66d94bad4374fc2721ef [file] [log] [blame]
$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;
}
.validation-error-message.tooltip {
z-index: 1000;
.tooltip-inner {
background-color: $red;
}
}
}
}
.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;
}
}
}
}
}
}
}
}