diff options
Diffstat (limited to 'catalog-ui/src/assets/styles')
17 files changed, 111 insertions, 76 deletions
diff --git a/catalog-ui/src/assets/styles/app.less b/catalog-ui/src/assets/styles/app.less index 1ce1801d9b..fde4cc8888 100644 --- a/catalog-ui/src/assets/styles/app.less +++ b/catalog-ui/src/assets/styles/app.less @@ -11,7 +11,6 @@ @import 'sprite-old.less'; @import 'sprite.less'; -@import 'sprite-product-icons.less'; @import 'sprite-resource-icons.less'; @import 'sprite-services-icons.less'; @@ -35,6 +34,7 @@ @import 'welcome-sprite.less'; @import 'welcome-style.less'; @import 'sdc-ui.css'; +@import 'notification-template.less'; // Less insides specific files. @import '../../app/directives/ecomp-footer/ecomp-footer.less'; @@ -90,6 +90,7 @@ @import '../../app/view-models/modals/message-modal/message-client-modal/client-message-modal.less'; @import '../../app/view-models/modals/message-modal/message-server-modal/server-message-modal.less'; @import '../../app/view-models/modals/onboarding-modal/onboarding-modal.less'; +@import '../../app/view-models/modals/icons-modal/icons-modal-view.less'; @import '../../app/view-models/onboard-vendor/onboard-vendor.less'; @import '../../app/view-models/support/support.less'; @import '../../app/view-models/tabs/general-tab.less'; @@ -107,12 +108,10 @@ @import '../../app/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal.less'; @import '../../app/view-models/workspace/tabs/distribution/distribution.less'; @import '../../app/view-models/workspace/tabs/general/general.less'; -@import '../../app/view-models/workspace/tabs/icons/icons.less'; @import '../../app/view-models/workspace/tabs/information-artifacts/information-artifacts.less'; @import '../../app/view-models/workspace/tabs/inputs/inputs.less'; @import '../../app/view-models/workspace/tabs/inputs/resource-input/resource-inputs.less'; @import '../../app/view-models/workspace/tabs/inputs/service-input/service-inputs.less'; -@import '../../app/view-models/workspace/tabs/product-hierarchy/product-hierarchy.less'; @import '../../app/view-models/workspace/tabs/properties/properties.less'; @import '../../app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities.less'; @import '../../app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less'; diff --git a/catalog-ui/src/assets/styles/images/resource-icons/vnfconfiguration.png b/catalog-ui/src/assets/styles/images/resource-icons/vnfconfiguration.png Binary files differnew file mode 100644 index 0000000000..66c64c3fe6 --- /dev/null +++ b/catalog-ui/src/assets/styles/images/resource-icons/vnfconfiguration.png diff --git a/catalog-ui/src/assets/styles/images/sprites/sprite-global.png b/catalog-ui/src/assets/styles/images/sprites/sprite-global.png Binary files differindex 7a795c7a91..87e5d43b4d 100644 --- a/catalog-ui/src/assets/styles/images/sprites/sprite-global.png +++ b/catalog-ui/src/assets/styles/images/sprites/sprite-global.png diff --git a/catalog-ui/src/assets/styles/images/sprites/sprite-product-icons.png b/catalog-ui/src/assets/styles/images/sprites/sprite-product-icons.png Binary files differdeleted file mode 100644 index e85467a09c..0000000000 --- a/catalog-ui/src/assets/styles/images/sprites/sprite-product-icons.png +++ /dev/null diff --git a/catalog-ui/src/assets/styles/images/sprites/sprite-resource-icons.png b/catalog-ui/src/assets/styles/images/sprites/sprite-resource-icons.png Binary files differindex 7d520a8628..27e96f3ba2 100644 --- a/catalog-ui/src/assets/styles/images/sprites/sprite-resource-icons.png +++ b/catalog-ui/src/assets/styles/images/sprites/sprite-resource-icons.png diff --git a/catalog-ui/src/assets/styles/mixins.less b/catalog-ui/src/assets/styles/mixins.less index 4a0356d810..fbc5f83df1 100644 --- a/catalog-ui/src/assets/styles/mixins.less +++ b/catalog-ui/src/assets/styles/mixins.less @@ -34,6 +34,10 @@ font-family: @font-opensans-light; font-size: 36px; } + ._28 { + font-family: @font-opensans-light; + font-size: 28px; + } ._24 { font-family: @font-opensans-light; font-size: 24px; diff --git a/catalog-ui/src/assets/styles/modal.less b/catalog-ui/src/assets/styles/modal.less index eb9de92f80..3307bfc56a 100644 --- a/catalog-ui/src/assets/styles/modal.less +++ b/catalog-ui/src/assets/styles/modal.less @@ -33,6 +33,10 @@ MODAL SIZES width: 552px; } +.modal-dialog.modal-sdc-auto { + width: auto; +} + .modal-dialog.modal-sdc-xsm { width: 432px; } @@ -324,7 +328,8 @@ NEW DESIGN MODAL .modal-sdc-l, .modal-sdc-md, .modal-sdc-sm, -.modal-sdc-xsm { +.modal-sdc-xsm, +.modal-sdc-auto { .w-sdc-classic-top-line-modal { padding: 0 30px; diff --git a/catalog-ui/src/assets/styles/notification-template.less b/catalog-ui/src/assets/styles/notification-template.less new file mode 100644 index 0000000000..5baf10d411 --- /dev/null +++ b/catalog-ui/src/assets/styles/notification-template.less @@ -0,0 +1,53 @@ +.notification-container{ + display: flex; + padding: 15px 11px; + float: left; + .icon-container{ + flex-grow: 1; + margin-right: 20px; + .icon-circle{ + background-color: black; + height: 40px; + width: 40px; + border-radius: 50%; + display: flex; + align-items: center; + margin-right: 0; + background-color: rgba(255, 255, 255, 0.3); + .icon{ + margin: 0 auto; + display: block; + } + } + } + .msg-content{ + flex-grow: 3; + h3{ + border-bottom: none; + font-weight: 400; + .f-type._18_m; + } + .message{ + font-weight: 300; + .f-type._14_m; + } + } +} +.ui-notification.success{ + background-color: @main_color_d; + .icon{ + .notification-success-icon; + } +} +.ui-notification.error{ + background-color: @func_color_q; + .icon{ + .notification-error-icon; + } +} +.ui-notification.info{ + background-color: @main_color_a; + .icon{ + .notification-process-icon; + } +} diff --git a/catalog-ui/src/assets/styles/sprite-product-icons.less b/catalog-ui/src/assets/styles/sprite-product-icons.less deleted file mode 100644 index 3485ec89a3..0000000000 --- a/catalog-ui/src/assets/styles/sprite-product-icons.less +++ /dev/null @@ -1,71 +0,0 @@ -.sprite-product-icons { - background-image: url('images/sprites/sprite-product-icons.png'); - display: inline-block; -} - -.sprite-product-icons.disable { opacity:0.5;} - -.sprite-product-icons.setting { background-position: -291px -102px; width: 61px; height: 67px;} -.sprite-product-icons.setting.small { background-position: -217px -142px; width: 29px; height: 28px;} -.sprite-product-icons.setting.medium { background-position: -148px -130px; width: 41px; height: 40px;} -.sprite-product-icons.setting.large { background-position: -77px -110px; width: 60px; height: 60px;} - -.sprite-product-icons.cloud { background-position: -290px -215px; width: 64px; height: 43px;} -.sprite-product-icons.cloud.small { background-position: -217px -232px; width: 29px; height: 28px;} -.sprite-product-icons.cloud.medium { background-position: -148px -220px; width: 41px; height: 40px;} -.sprite-product-icons.cloud.large { background-position: -77px -200px; width: 60px; height: 60px;} - -.sprite-product-icons.security { background-position: -289px -293px; width: 50px; height: 57px;} -.sprite-product-icons.security.small { background-position: -217px -321px; width: 29px; height: 28px;} -.sprite-product-icons.security.medium { background-position: -148px -310px; width: 41px; height: 40px;} -.sprite-product-icons.security.large { background-position: -77px -290px; width: 60px; height: 60px;} - -.sprite-product-icons.network { background-position: -290px -383px; width: 56px; height: 57px;} -.sprite-product-icons.network.small { background-position: -217px -411px; width: 29px; height: 29px;} -.sprite-product-icons.network.medium { background-position: -148px -399px; width: 41px; height: 41px;} -.sprite-product-icons.network.large { background-position: -77px -380px; width: 60px; height: 60px;} - -.sprite-product-icons.orphan { background-position: -290px -478px; width: 52px; height: 52px;} -.sprite-product-icons.orphan.small { background-position: -217px -500px; width: 29px; height: 29px;} -.sprite-product-icons.orphan.medium { background-position: -148px -488px; width: 41px; height: 41px;} -.sprite-product-icons.orphan.large { background-position: -77px -470px; width: 60px; height: 60px;} - -.sprite-product-icons.defaulticon { background-position: -290px -478px; width: 52px; height: 52px;} -.sprite-product-icons.defaulticon.small { background-position: -217px -500px; width: 29px; height: 29px;} -.sprite-product-icons.defaulticon.medium { background-position: -148px -488px; width: 41px; height: 41px;} -.sprite-product-icons.defaulticon.large { background-position: -77px -470px; width: 60px; height: 60px;} - -.sprite-product-icons.vfw { background-position: -289px -548px; width: 73px; height: 73px;} -.sprite-product-icons.vfw.small { background-position: -217px -591px; width: 29px; height: 29px;} -.sprite-product-icons.vfw.medium { background-position: -148px -580px; width: 41px; height: 41px;} -.sprite-product-icons.vfw.large { background-position: -77px -560px; width: 60px; height: 61px;} - -.sprite-product-icons.wanx { background-position: -290px -664px; width: 59px; height: 47px;} -.sprite-product-icons.wanx.small { background-position: -217px -681px; width: 30px; height: 30px;} -.sprite-product-icons.wanx.medium { background-position: -148px -670px; width: 41px; height: 41px;} -.sprite-product-icons.wanx.large { background-position: -77px -651px; width: 60px; height: 60px;} - -.sprite-product-icons.vrouter { background-position: -289px -758px; width: 69px; height: 43px;} -.sprite-product-icons.vrouter.small { background-position: -217px -772px; width: 29px; height: 29px;} -.sprite-product-icons.vrouter.medium { background-position: -148px -760px; width: 41px; height: 41px;} -.sprite-product-icons.vrouter.large { background-position: -77px -741px; width: 60px; height: 60px;} - -.sprite-product-icons.ucpe { background-position: -289px -832px; width: 59px; height: 60px;} -.sprite-product-icons.ucpe.small { background-position: -217px -862px; width: 28px; height: 29px;} -.sprite-product-icons.ucpe.medium { background-position: -148px -849px; width: 41px; height: 41px;} -.sprite-product-icons.ucpe.large { background-position: -77px -831px; width: 60px; height: 61px;} - -.sprite-product-icons.mobility { background-position: -288px -919px; width: 64px; height: 62px;} -.sprite-product-icons.mobility.small { background-position: -216px -952px; width: 29px; height: 29px;} -.sprite-product-icons.mobility.medium { background-position: -147px -940px; width: 41px; height: 41px;} -.sprite-product-icons.mobility.large { background-position: -76px -921px; width: 60px; height: 60px;} - -.sprite-product-icons.wanx_customer_managed { background-position: -290px -1024px; width: 58px; height: 62px;} -.sprite-product-icons.wanx.small_customer_managed { background-position: -217px -1041px; width: 30px; height: 38px;} -.sprite-product-icons.wanx.medium_customer_managed { background-position: -148px -1030px; width: 42px; height: 47px;} -.sprite-product-icons.wanx.large_customer_managed { background-position: -77px -1011px; width: 61px; height: 66px;} - -.sprite-product-icons.wanx_attr_managed { background-position: -290px -1114px; width: 59px; height: 62px;} -.sprite-product-icons.wanx.small_att_managed { background-position: -218px -1131px; width: 31px; height: 36px;} -.sprite-product-icons.wanx.medium_att_managed { background-position: -149px -1120px; width: 42px; height: 47px;} -.sprite-product-icons.wanx.large_att_managed { background-position: -77px -1101px; width: 60px; height: 67px;} diff --git a/catalog-ui/src/assets/styles/sprite-resource-icons.less b/catalog-ui/src/assets/styles/sprite-resource-icons.less index 153e8c042c..2c19ee3291 100644 --- a/catalog-ui/src/assets/styles/sprite-resource-icons.less +++ b/catalog-ui/src/assets/styles/sprite-resource-icons.less @@ -266,3 +266,4 @@ .sprite-resource-icons.allotted_resource.medium { background-position: -141px -4898px; width: 41px; height: 41px;} .sprite-resource-icons.allotted_resource.large { background-position: -70px -4879px; width: 60px; height: 60px;} +.sprite-resource-icons.vnfconfiguration.large { background-position: -70px -4959px; width: 60px; height: 60px;} diff --git a/catalog-ui/src/assets/styles/sprite.less b/catalog-ui/src/assets/styles/sprite.less index 0c0f538388..3f82e488db 100644 --- a/catalog-ui/src/assets/styles/sprite.less +++ b/catalog-ui/src/assets/styles/sprite.less @@ -238,6 +238,12 @@ .round-expand-icon:hover { background-position: -100px -1188px; width: 15px; height: 15px; } .round-expand-icon.open { background-position: -50px -1216px; width: 15px; height: 15px; } .round-expand-icon.open:hover { background-position: -100px -1216px; width: 15px; height: 15px; } +.update-component-icon { background-position: -140px -1213px; width: 20px; height: 20px;} +.update-component-icon:hover { background-position: -169px -1213px; width: 20px; height: 20px;} +.notification-user-icon{ background-position: -206px -1211px; width: 18px; height: 22px;} +.notification-error-icon{ background-position: -244px -1216px; width: 17px; height: 17px;} +.notification-success-icon{ background-position: -281px -1215px; width: 21px; height: 19px;} +.notification-process-icon{ background-position: -322px -1206px; width: 28px; height: 28px;} /* .sprite-new.expand-asset-icon { background-position: -740px -590px; width: 40px; height: 40px; } .sprite-new.view-info-icon { background-position: -739px -621px; width: 40px; height: 40px; } @@ -257,3 +263,20 @@ .sprite-new.vl-icon:active, .sprite-new.vl-icon.disabled-icon { background-position: -820px -682px; } .sprite-new.trash-icon:active, .sprite-new.trash-icon.disabled-icon { background-position: -820px -712px; } */ + + +.sprite-new.magnify-search { background-position: -206px -1276px; width: 30px; height: 30px; } +.sprite-new.magnify-search:hover { background-position: -125px -1276px; } +.sprite-new.magnify-search:active { background-position: -46px -1275px; } + +.sprite-new.zoom-plus { background-position: -208px -1380px; width: 30px; height: 30px; } +.sprite-new.zoom-plus:hover { background-position: -128px -1380px; } +.sprite-new.zoom-plus:active { background-position: -47px -1379px; } + +.sprite-new.zoom-minus { background-position: -208px -1433px; width: 30px; height: 30px; } +.sprite-new.zoom-minus:hover { background-position: -128px -1433px; } +.sprite-new.zoom-minus:active { background-position: -47px -1432px; } + +.sprite-new.canvas-fit-all { background-position: -208px -1326px; width: 30px; height: 30px;} +.sprite-new.canvas-fit-all:hover { background-position: -128px -1326px; } +.sprite-new.canvas-fit-all:active { background-position: -47px -1325px;} diff --git a/catalog-ui/src/assets/styles/svg/source/fit-all.svg b/catalog-ui/src/assets/styles/svg/source/fit-all.svg new file mode 100644 index 0000000000..dbea90963f --- /dev/null +++ b/catalog-ui/src/assets/styles/svg/source/fit-all.svg @@ -0,0 +1,5 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="18px" height="19px" viewBox="0 0 18 19"> +<path fillRule="evenodd" d="M 17.94 18.86C 17.77 18.92 17.63 19 17.4 18.94 16.03 18.93 12.86 19 12.86 19 12.5 19 11.92 18.85 12 18 12.08 17.07 12.5 17 12.86 17 12.86 17 14.79 17 14.79 17 14.79 17 10.44 11.98 10.44 11.98 10.44 11.98 11.77 10.51 11.77 10.51 11.77 10.51 16.33 15.76 16.33 15.76 16.33 15.76 16.33 12.99 16.33 12.99 16.23 12.09 17.03 11.99 17.4 11.99 17.77 11.99 18.01 12.27 18.01 12.69 18.01 12.69 18.01 18.23 18.01 18.23 18.01 17.81 18 18.55 17.94 18.86ZM 17.33 7.36C 16.92 7.36 16.04 7.25 16.15 6.31 16.15 6.31 16.15 3.62 16.15 3.62 16.15 3.62 11.37 9 11.37 9 11.37 9 10.01 7.53 10.01 7.53 10.01 7.53 14.82 2.1 14.82 2.1 14.82 2.1 12.33 2.1 12.33 2.1 11.92 2.1 11.47 2.02 11.37 1.05 11.29 0.16 11.92-0 12.33-0 12.33-0 15.82 0.07 17.33 0.06 17.59 0 17.74 0.08 17.93 0.15 17.99 0.47 18 1.25 18 0.8 18 0.8 18 6.62 18 6.62 18 7.06 17.73 7.36 17.33 7.36ZM 5.67 16.9C 6.08 16.9 6.53 16.98 6.63 17.95 6.71 18.84 6.08 19 5.67 19 5.67 19 2.18 18.93 0.67 18.94 0.41 19 0.26 18.92 0.07 18.85 0.01 18.53-0 17.75-0 18.2-0 18.2-0 12.38-0 12.38-0 11.94 0.27 11.64 0.67 11.64 1.08 11.64 1.96 11.75 1.85 12.69 1.85 12.69 1.85 15.38 1.85 15.38 1.85 15.38 6.63 10 6.63 10 6.63 10 7.99 11.47 7.99 11.47 7.99 11.47 3.18 16.9 3.18 16.9 3.18 16.9 5.67 16.9 5.67 16.9ZM 6.63 9C 6.63 9 1.85 3.62 1.85 3.62 1.85 3.62 1.85 6.31 1.85 6.31 1.96 7.25 1.08 7.36 0.67 7.36 0.27 7.36-0 7.06-0 6.62-0 6.62-0 0.8-0 0.8-0 1.25 0.01 0.47 0.07 0.15 0.26 0.08 0.41 0 0.67 0.06 2.18 0.07 5.67-0 5.67-0 6.08-0 6.71 0.16 6.63 1.05 6.53 2.02 6.08 2.1 5.67 2.1 5.67 2.1 3.18 2.1 3.18 2.1 3.18 2.1 7.99 7.53 7.99 7.53 7.99 7.53 6.63 9 6.63 9Z" fill="rgb(89,89,89)"/></svg>
\ No newline at end of file diff --git a/catalog-ui/src/assets/styles/svg/source/minus.svg b/catalog-ui/src/assets/styles/svg/source/minus.svg new file mode 100644 index 0000000000..4ced110098 --- /dev/null +++ b/catalog-ui/src/assets/styles/svg/source/minus.svg @@ -0,0 +1,5 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="16px" height="2px" viewBox="0 0 16 2"> +<path fillRule="evenodd" d="M 1-0C 1-0 15-0 15-0 15.55-0 16 0.45 16 1 16 1.55 15.55 2 15 2 15 2 1 2 1 2 0.45 2 0 1.55 0 1 0 0.45 0.45-0 1-0Z" fill="rgb(99,99,99)"/></svg>
\ No newline at end of file diff --git a/catalog-ui/src/assets/styles/svg/source/plus.svg b/catalog-ui/src/assets/styles/svg/source/plus.svg new file mode 100644 index 0000000000..dff172c54d --- /dev/null +++ b/catalog-ui/src/assets/styles/svg/source/plus.svg @@ -0,0 +1,5 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="18px" height="18px" viewBox="0 0 18 18"> +<path fillRule="evenodd" d="M 17 10C 17 10 10 10 10 10 10 10 10 17 10 17 10 17.55 9.55 18 9 18 8.45 18 8 17.55 8 17 8 17 8 10 8 10 8 10 1 10 1 10 0.45 10 0 9.55 0 9 0 8.45 0.45 8 1 8 1 8 8 8 8 8 8 8 8 1 8 1 8 0.45 8.45 0 9 0 9.55 0 10 0.45 10 1 10 1 10 8 10 8 10 8 17 8 17 8 17.55 8 18 8.45 18 9 18 9.55 17.55 10 17 10Z" fill="rgb(99,99,99)"/></svg>
\ No newline at end of file diff --git a/catalog-ui/src/assets/styles/svg/source/search-magnify.svg b/catalog-ui/src/assets/styles/svg/source/search-magnify.svg new file mode 100644 index 0000000000..279c13fd52 --- /dev/null +++ b/catalog-ui/src/assets/styles/svg/source/search-magnify.svg @@ -0,0 +1,5 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="23px" height="26px" viewBox="0 0 23 26"> +<path fillRule="evenodd" d="M 17.53 4.53C 14.5 0.28 8.55-0.71 4.3 2.32 0.05 5.36-0.94 11.31 2.09 15.56 3.56 17.63 5.74 18.99 8.25 19.41 10.42 19.77 12.58 19.38 14.48 18.32 14.48 18.32 20.28 25.23 20.28 25.23 20.44 25.47 20.7 25.61 20.93 25.65 21.16 25.69 21.45 25.64 21.68 25.47 22.15 25.13 22.26 24.5 21.92 24.06 21.92 24.06 16.11 17.15 16.11 17.15 17.73 15.7 18.81 13.79 19.17 11.61 19.58 9.14 19.01 6.6 17.53 4.53ZM 3.76 14.4C 1.37 11.04 2.14 6.4 5.5 4 7.18 2.8 9.16 2.41 11.07 2.73 12.97 3.05 14.73 4.07 15.92 5.74 17.09 7.38 17.52 9.34 17.19 11.32 16.86 13.29 15.79 15 14.18 16.17 12.58 17.35 10.58 17.77 8.61 17.44 6.65 17.08 4.9 16.03 3.76 14.4Z" fill="rgb(99,99,99)"/></svg>
\ No newline at end of file diff --git a/catalog-ui/src/assets/styles/variables-old.less b/catalog-ui/src/assets/styles/variables-old.less index 57f3fc24b8..d16252dab4 100644 --- a/catalog-ui/src/assets/styles/variables-old.less +++ b/catalog-ui/src/assets/styles/variables-old.less @@ -2,7 +2,7 @@ @images: "images"; /* Colors */ -@color_a: #3b7b9b; // product category +@color_a: #3b7b9b; @color_b: #666666; @color_c: #ffffff; @color_d: #1d9a95; // dashboard service (S at the top left of the card) diff --git a/catalog-ui/src/assets/styles/variables.less b/catalog-ui/src/assets/styles/variables.less index 3c23bdbe5e..163737466e 100644 --- a/catalog-ui/src/assets/styles/variables.less +++ b/catalog-ui/src/assets/styles/variables.less @@ -47,5 +47,6 @@ @top_nav_height: 50px; @top_nav_admin_height: 44px; @action_nav_height: 53px; +@tab_title: 110px; @footer_height: 89px; @border_color_view-mode: #ededed; |
