-.software-product-attachments {
+
+.vsp-attachments-view {
+ position: relative;
+ #attachments-tabs {
+ .nav-tabs {
+ background-color: $tlv-gray;
+ box-shadow: none;
+ border-bottom: 1px solid $light-gray;
+ & > li {
+ & > a {
+ font-size: 24px;
+ font-weight: lighter;
+ padding-left: 0;
+ padding-right: 0;
+ margin-right: 40px;
+ };
+ &.active > a {color: $blue;};
+ }
+ }
+ }
+ .attachments-view-controllers {
+ position: absolute;
+ right: 40px;
+ top: 15px;
+ display: flex;
+ .icon-label {
+ color: $dark-gray;
+ }
+
+ .go-to-overview-icon {
+ .icon-label {
+ color: $blue;
+ }
+ &.disabled {
+ .icon-label {
+ color: $gray;
+ }
+ }
+ }
+
+ .icon-component {
+ margin-right: 30px;
+
+ }
+
+ input[type="file"] {
+ visibility: hidden;
+ width: 1px;
+ padding: 0;
+ margin-left: -1px;
+ }
+ }
+}
+
+.vsp-attachments-heat-validation {
@extend .body-1;
- width: 100%;
- height: 100%;
display: flex;
-
- .software-product-attachments-tree {
+ .svg-icon.exclamation-triangle-line {
+ fill: $orange;
+ width: 15px;
+ height: 15px;
+ &.large {
+ width: 20px;
+ height: 20px;
+ }
+ }
+ .validation-tree-section {
display: flex;
- border-right: 1px solid $light-gray;
- margin: 0px;
- padding: 5px 3px 10px 3px;
+ width: 400px;
+ justify-content: space-between;
+ }
+ .vsp-attachments-heat-validation-tree {
+ @extend .flex-column;
+ margin: 0;
overflow: auto;
height: 100%;
-
+ .attachments-tree-header {
+ display: flex;
+ justify-content: space-between;
+ height: 55px;
+ align-items: center;
+ &.header-selected {
+ background: $tlv-gray;
+ }
+ .header-icon {
+ top: -3px;
+ position: relative;
+ margin-left: 20px;
+ }
+ .tree-header-title-text {
+ @extend .heading-4-medium;
+ padding-left: 32px;
+ cursor: pointer;
+ &.tree-header-title-selected{
+ color: $blue;
+ }
+ }
+ .tree-header-title {
+ display: flex;
+ }
+ }
+ .counters {
+ display: flex;
+ justify-content: space-between;
+ z-index: 1;
+ padding-right: 20px;
+ .counter {
+ display: flex;
+ &:first-child {
+ margin-right: 20px;
+ }
+ &:only-child {
+ margin-right: 0;
+ }
+ .svg-icon-wrapper {
+ margin-right: 5px;
+ }
+ .counter-icon {
+ margin-right: 5px;
+ }
+ .error-text, .warning-text {
+ @extend .body-3;
+ &.large {
+ @extend .heading-4-medium;
+ }
+ }
+ }
+ }
.tree-wrapper {
flex: 1 1;
position: relative;
padding-bottom: 10px;
+ @-moz-document url-prefix() {
+ .tree-block-inside {
+ top: 0;
+ position: relative;
+ }
+ }
.tree-block-inside {
- padding-left: 17px;
- padding-top: 8px;
- padding-bottom: 1px;
+ padding-left: 20px;
.tree-node-row {
cursor: default;
white-space: nowrap;
- &.tree-node-selected::before {
+ display: flex;
+ justify-content: space-between;
+ height: 40px;
+ align-items: center;
+ .svg-icon.chevron-down, .svg-icon.chevron-up {
+ height: 10px;
+ width: 10px;
+ }
+
+ &:after {
+ border-top: 1px solid $tlv-gray;
+ height: 40px;
position: absolute;
left: 0;
right: 0;
- height: 20px;
- display: inline-block;
content: ' ';
- background-color: $light-gray;
}
-
- &.tree-node-clicked::before {
+ @-moz-document url-prefix() {
+ &:after {
+ top: 0;
+ }
+ }
+ &.tree-node-selected::before {
position: absolute;
- left: 4px;
- right: 4px;
+ left: 0;
+ right: 0;
height: 20px;
display: inline-block;
content: ' ';
- font-weight: bold;
- background-color: $white;
+ background-color: $tlv-gray;
+ color: $blue;
}
+ &.tree-node-clicked {
+ color: $blue;
+ &:after {
+ background: $tlv-gray;
+ height: 40px;
+ position: absolute;
+ left: 0;
+ right: 0;
+ content: ' ';
+ }
+ }
+ .tree-node-name {
+ cursor: pointer;
+ }
+ .name-section {
+ z-index: 1;
+ flex: 1;
+ @include ellipsis(auto);
+ }
.tree-node-expander {
position: relative;
display: inline-block;
cursor: pointer;
- .fa {
- position: absolute;
- left: -7px;
- top: -11px;
- @include transition(transform 0.3s);
- }
- &.tree-node-expander-collapsed .fa {
- @include transform-rotate(-90);
- }
}
-
.tree-node-icon {
margin: 0 7px;
- color: $text-black;
- opacity: .5;
- .tree-node-validation-error::after {
- content: "!";
- font-weight: bold;
- position: absolute;
- color: $red;
- font-size: large;
- left: -7px;
- bottom: -5px;
- }
- }
-
- .error-status {
- color: $red;
- &.error-status-selected {
- font-weight: bold;
- }
- &.error-status-hovered {
- font-weight: bold;
- background-color: $blue;
- }
- }
-
- .tree-element-text {
- @extend %noselect;
- position: relative;
- padding-right: 5px;
- &.error-status-selected {
- font-weight: bold;
- }
}
}
-
}
}
}
- .software-product-attachments-separator {
- border: 1px solid $tlv-light-gray;
+ .vsp-attachments-heat-validation-separator {
+ border-left: 1px solid $tlv-light-gray;
height: 100%;
width: 5px;
cursor: e-resize;
}
- .software-product-attachments-error-list {
- text-align: center;
- margin-top: 12px;
- display: flex;
- align-content: flex-start;
- flex-direction: column;
- padding-left: 70px;
- padding-right: 50px;
+ .message-board-section {
+ @extend .flex-column;
+ padding-left: 25px;
+ padding-top: 10px;
+ padding-right: 60px;
overflow: auto;
margin-bottom: 70px;
.error-item {
- &.selected {
- background-color: $light-gray;
- }
- &.clicked {
- color: $blue;
- }
- &.shifted {
- margin-top: 20px;
- }
- text-align: left;
- .error-item-file-name {
- font-weight: bold;
- }
+ display: flex;
+ margin: 10px 0;
.error-item-file-type {
+ margin-left: 15px;
+ }
+ .error-file-name {
+ @extend .body-1-medium;
margin-right: 5px;
- &.strong {
- font-weight: bold;
- }
- &.ERROR {
- color: $red;
- }
- &.WARNING {
- color: $yellow;
- }
}
}
- .error-item:hover {
- cursor: default;
- background-color: $tlv-hover;
- }
}
}
Code Review / sdc.git / blobdiff