summaryrefslogtreecommitdiffstats
path: root/catalog-ui/app/scripts/view-models/dashboard/dashboard.less
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/app/scripts/view-models/dashboard/dashboard.less')
-rw-r--r--catalog-ui/app/scripts/view-models/dashboard/dashboard.less420
1 files changed, 420 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/view-models/dashboard/dashboard.less b/catalog-ui/app/scripts/view-models/dashboard/dashboard.less
new file mode 100644
index 0000000000..7b2522113b
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/dashboard/dashboard.less
@@ -0,0 +1,420 @@
+.sdc-dashboard-container {
+ .tlv-loader {
+ top: -110px;
+ left: 80px;
+ }
+ .sdc-hide-popover {
+ .popover {
+ display: none !important;
+ }
+ }
+}
+
+.w-sdc-left-sidebar-nav {
+ margin-top: 46px;
+}
+
+.w-sdc-main-right-container-element {
+ float: left;
+ height: 217px;
+ width: 217px;
+ margin: 10px;
+ position: relative;
+}
+
+.w-sdc-main-right-container-element-details-container {
+ position: absolute;
+ top: 165px;
+ left: 50px;
+}
+
+.w-sdc-main-right-container-element-name {
+ font-weight: bold;
+}
+
+.w-sdc-main-right-container-element-owner {
+
+}
+
+//////////////////////////////Cards////////////////////
+.w-sdc-dashboard-card-new {
+ border: 2px dashed @color_m;
+ .border-radius(2px);
+ cursor: pointer;
+ display: inline-block;
+ height: 200px;
+ margin: 9px;
+ position: relative;
+ vertical-align: middle;
+ width: 204px;
+}
+
+.w-sdc-dashboard-card-new-content {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ height: 100%;
+}
+
+.w-sdc-dashboard-card-new-content-plus {
+ .sprite-new;
+ .add-icon;
+ position: relative;
+ margin-bottom: 20px;
+
+ &:after {
+ .n_14_m;
+ content: 'ADD';
+ position: absolute;
+ top: 25px;
+ left: -3px;
+ vertical-align: -50%;
+ }
+}
+
+.w-sdc-dashboard-card-import-content-plus {
+ .sprite-new;
+ .import-icon;
+ position: relative;
+ margin-bottom: 20px;
+
+ &:after {
+ .n_14_m;
+ content: 'IMPORT';
+ position: absolute;
+ top: 25px;
+ left: -16px;
+ vertical-align: -50%;
+ }
+}
+
+.sdc-dashboard-create-element-container,
+.sdc-dashboard-import-element-container {
+
+ width: 140px;
+
+ .tlv-btn.import-dcae {
+ padding: 0;
+ }
+
+ .tlv-btn {
+ position: relative;
+ width: 100%;
+ margin-bottom: 10px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ input[type="file"] {
+ cursor: inherit;
+ filter: alpha(opacity=0);
+ opacity: 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 138px;
+ height: 30px;
+ }
+}
+
+.w-sdc-dashboard-card {
+ width: 204px;
+ height: 200px;
+ background-color: @main_color_p;
+ .border-radius(2px);
+ .box-shadow(0px 2px 2px 0px rgba(24, 24, 25, 0.05));
+ display: inline-block;
+ margin: 10px;
+ position: relative;
+ vertical-align: middle;
+ border: solid 1px @main_color_p;
+
+ &:hover {
+ border: solid 1px @main_color_o;
+ .box-shadow(3px 3px 2px 0px rgba(24, 24, 25, 0.05));
+ }
+
+ &:active {
+ border: solid 1px @main_color_c;
+ .box-shadow(3px 3px 2px 0px rgba(24, 24, 25, 0.05));
+ }
+}
+
+.w-sdc-dashboard-card-body {
+ .hand;
+ border-bottom: 1px solid @color_j;
+ height: 155px;
+ position: relative;
+ text-align: center;
+}
+
+.w-sdc-dashboard-card-description {
+ .c_3;
+ .hand;
+ background-color: rgba(57, 73, 84, 0.9);
+ border-radius: 4px 4px 0 0;
+ bottom: 0;
+ left: 0;
+ opacity: 0;
+ padding: 10px;
+ position: absolute;
+ right: 0;
+ text-align: left;
+ top: 0;
+ word-wrap: break-word;
+ z-index: 4;
+ min-height: 100px;
+ overflow: hidden;
+}
+
+
+.w-sdc-dashboard-card-schema {
+ margin-top: 30px;
+}
+
+.w-sdc-dashboard-card-edit {
+ .hand;
+ position: absolute;
+ right: 13px;
+ top: 15px;
+ z-index: 2;
+}
+
+.w-sdc-dashboard-card-footer {
+ padding: 3px 12px 10px 12px;
+ position: relative;
+}
+
+.w-sdc-dashboard-card-avatar {
+ .uppercase;
+ border-radius: 50%;
+ display: inline-block;
+ position: absolute;
+ left: -6px;
+ text-align: center;
+ top: -6px;
+
+ span {
+
+ background-color: @main_color_p;
+ .border-radius(15px);
+ color: @color_c;
+ content: '';
+ height: 30px;
+ text-align: center;
+ display: block;
+ border: solid 2px #ECEFF3;
+ padding: 3px 10px 2px 10px;
+
+ &.VF {
+ .j_14_m;
+ &::before {
+ content: 'VF';
+ }
+ }
+
+ &.VFC {
+ .j_14_m;
+ &::before {
+ content: 'VFC';
+ }
+ }
+
+ &.CP {
+ .j_14_m;
+ &::before {
+ content: 'CP';
+ }
+ }
+
+ &.VL {
+ .j_14_m;
+ &::before {
+ content: 'VL';
+ }
+ }
+
+ &.SERVICE {
+ .c_14_m;
+ &::before {
+ content: 'S';
+ }
+ }
+
+ &.PRODUCT {
+ .b_14_m;
+ &::before {
+ content: 'P';
+ }
+ }
+
+ &.green {
+ .d_12;
+ &::before {
+ content: 'R';
+ }
+ }
+ &.red {
+ .r_12;
+ &::before {
+ content: 'S';
+ }
+ }
+ &.dblack {
+ .s_12;
+ &::before {
+ content: 'P';
+ }
+ }
+ }
+}
+
+.w-sdc-dashboard-card-info {
+ display: inline-block;
+ vertical-align: middle;
+ max-width: 165px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.w-sdc-dashboard-card-info-name-container{
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ margin: 0 0 2px 10px;
+}
+.w-sdc-dashboard-card-info-name {
+ .m_14_m;
+ display: inline-block;
+ vertical-align: middle;
+ max-width: 165px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.w-sdc-dashboard-card-info-lifecycleState {
+ .m_13_m;
+ display: inline-block;
+ vertical-align: middle;
+ max-width: 165px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.w-sdc-dashboard-card-info-user {
+ .n_13_r;
+ line-height: 18px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: 100%;
+}
+
+.w-sdc-dashboard-card-menu-button {
+ display: inline-block;
+ padding: 12px 0 0 10px;
+ position: absolute;
+ right: 12px;
+ top: 8px;
+ border-left: solid 1px @color_k;
+ height: 42px;
+
+ &:hover {
+ .w-sdc-dashboard-card-menu {
+ display: block;
+ }
+ }
+}
+
+.w-sdc-dashboard-card-menu {
+ .bg_c;
+ border-radius: 0 0 4px 4px;
+ border-top: 3px solid @color_a;
+ box-shadow: 0 2px 2px 0px rgba(0, 0, 0, 0.2);
+ color: @color_s;
+ display: none;
+ min-height: 30px;
+ padding: 9px 0;
+ position: absolute;
+ right: -27px;
+ width: 208px;
+ z-index: 9;
+ max-height: 164px;
+
+ &::before {
+ //TODO: Missing image for small blue triangle.
+ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE1OTIzNDI1MENFQjExRTU4ODRERTI1MDM2REZCOUYzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE1OTIzNDI2MENFQjExRTU4ODRERTI1MDM2REZCOUYzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTU5MjM0MjMwQ0VCMTFFNTg4NERFMjUwMzZERkI5RjMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTU5MjM0MjQwQ0VCMTFFNTg4NERFMjUwMzZERkI5RjMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4gBXTlAAAAOElEQVR42mK0rp7NgASMgZgFiE/CBJjQJPcA8U4gNkdXAJMUAGJ+ZEVMaJIwAFfEhEUSRRFAgAEAVtgJyiLAPWAAAAAASUVORK5CYII=');
+ content: '';
+ display: block;
+ height: 21px;
+ position: absolute;
+ right: 24px;
+ top: -24px;
+ width: 184px;
+ background-repeat: no-repeat;
+ background-position: 175px 16px;
+ }
+}
+
+.i-sdc-dashboard-card-menu-item {
+ .hand;
+ line-height: 24px;
+ padding: 0 10px;
+ &:hover { .a_7; }
+}
+
+.w-sdc-dashboard-card-info-lifecycleState-icon{
+ position:absolute;
+ bottom:18px;
+ right:10px;
+}
+
+// Same for dashboard and catalog view.
+.w-sdc-dashboard-card-schema-image {
+ position: absolute;
+ top: 41%;
+
+ //TODO: Israel - remove this after getting the services sprite.
+ height: 45px;
+ width: 53px;
+ background-repeat: no-repeat;
+
+ // Center the icon vertical and horizontal.
+ margin: auto;
+ left: 0;
+ right: 0;
+ top: -10px;
+ bottom: 0;
+}
+
+/* dashboard card main icons */
+.w-sdc-dashboard-card-schema-image.service { .s-sdc-service }
+.w-sdc-dashboard-card-schema-image.resource { .s-sdc-resource }
+
+/* dashboard card statuses icons */
+.w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKIN { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKIN; }
+.w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKOUT { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKOUT; }
+.w-sdc-dashboard-card-edit.CERTIFIED { .sprite; .s-sdc-state.CERTIFIED; }
+.w-sdc-dashboard-card-edit.READY_FOR_CERTIFICATION { .sprite; .s-sdc-state.READY_FOR_CERTIFICATION; }
+.w-sdc-dashboard-card-edit.CERTIFICATION_IN_PROGRESS { .sprite; .s-sdc-state.CERTIFICATION_IN_PROGRESS; }
+.w-sdc-dashboard-card-edit.DISTRIBUTED { .sprite; .s-sdc-state.DISTRIBUTED; }
+
+.w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKIN { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKIN.green; }
+.w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKOUT { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKOUT.green; }
+.w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.CERTIFIED { .sprite; .s-sdc-state.CERTIFIED.green; }
+.w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.READY_FOR_CERTIFICATION { .sprite; .s-sdc-state.READY_FOR_CERTIFICATION.green; }
+.w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.CERTIFICATION_IN_PROGRESS { .sprite; .s-sdc-state.CERTIFICATION_IN_PROGRESS.green; }
+.w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.DISTRIBUTED { .sprite; .s-sdc-state.DISTRIBUTED.green; }
+
+.w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKIN { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKIN.red; }
+.w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKOUT { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKOUT.red; }
+.w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.CERTIFIED { .sprite; .s-sdc-state.CERTIFIED.red; }
+.w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.READY_FOR_CERTIFICATION { .sprite; .s-sdc-state.READY_FOR_CERTIFICATION.red; }
+.w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.CERTIFICATION_IN_PROGRESS { .sprite; .s-sdc-state.CERTIFICATION_IN_PROGRESS.red; }
+.w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.DISTRIBUTED { .sprite; .s-sdc-state.DISTRIBUTED.red; }