aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorIsrael Lavi <israel.lavi@intl.att.com>2018-08-07 11:36:58 +0300
committerIsrael Lavi <il0695@att.com>2018-08-07 11:48:04 +0300
commit75dc1476d6d592c6c2c54f8d08d3047c90c8f9dc (patch)
treeb1412c3c7616b07852c941fd21fc9836f2d43e86
parent57a7853903df631a2031b5b57ce4d131364006f6 (diff)
Initial commit
Change-Id: I061d81a33aebadb83ba0e085e8e34339fed5ed53 Issue-ID: SDC-1609 Signed-off-by: Israel Lavi <il0695@att.com>
-rw-r--r--.gitignore15
-rw-r--r--.gitreview4
-rw-r--r--.travis.yml14
-rw-r--r--LICENSE.TXT20
-rw-r--r--README.md38
-rw-r--r--assets/README.md9
-rw-r--r--assets/icons/angleDoubleLeft.svg15
-rw-r--r--assets/icons/angleDoubleRight.svg11
-rw-r--r--assets/icons/angleLeft.svg9
-rw-r--r--assets/icons/angleRight.svg9
-rw-r--r--assets/icons/archiveBox.svg23
-rw-r--r--assets/icons/artifacts.svg1
-rw-r--r--assets/icons/back.svg6
-rw-r--r--assets/icons/base.svg1
-rw-r--r--assets/icons/calendar.svg1
-rw-r--r--assets/icons/caretDown.svg6
-rw-r--r--assets/icons/check.svg9
-rw-r--r--assets/icons/checkCircle.svg1
-rw-r--r--assets/icons/chevronDown.svg9
-rw-r--r--assets/icons/chevronUp.svg9
-rw-r--r--assets/icons/close.svg10
-rw-r--r--assets/icons/download.svg1
-rw-r--r--assets/icons/empty.txt0
-rw-r--r--assets/icons/env.svg1
-rw-r--r--assets/icons/error.svg1
-rw-r--r--assets/icons/errorCircle.svg1
-rw-r--r--assets/icons/exclamationTriangleFull.svg9
-rw-r--r--assets/icons/exclamationTriangleLine.svg25
-rw-r--r--assets/icons/expand.svg1
-rw-r--r--assets/icons/filter.svg9
-rw-r--r--assets/icons/infoСircleO.svg3
-rw-r--r--assets/icons/locked.svg3
-rw-r--r--assets/icons/module.svg1
-rw-r--r--assets/icons/nestedHeat.svg1
-rw-r--r--assets/icons/network.svg1
-rw-r--r--assets/icons/notificationBell.svg18
-rw-r--r--assets/icons/notificationFullBell.svg11
-rw-r--r--assets/icons/others.svg1
-rw-r--r--assets/icons/pencil.svg17
-rw-r--r--assets/icons/plus.svg9
-rw-r--r--assets/icons/plusCircle.svg9
-rw-r--r--assets/icons/plusThin.svg7
-rw-r--r--assets/icons/proceedToOverview.svg1
-rw-r--r--assets/icons/questionMark.svg1
-rw-r--r--assets/icons/search.svg8
-rw-r--r--assets/icons/sliders.svg19
-rw-r--r--assets/icons/trashO.svg17
-rw-r--r--assets/icons/unlocked.svg3
-rw-r--r--assets/icons/upload.svg1
-rw-r--r--assets/icons/user.svg10
-rw-r--r--assets/icons/vendor.svg1
-rw-r--r--assets/icons/versionControllerCommit.svg1
-rw-r--r--assets/icons/versionControllerLockClosed.svg17
-rw-r--r--assets/icons/versionControllerLockOpen.svg17
-rw-r--r--assets/icons/versionControllerPermissions.svg1
-rw-r--r--assets/icons/versionControllerRevert.svg14
-rw-r--r--assets/icons/versionControllerSave.svg10
-rw-r--r--assets/icons/versionControllerSubmit.svg10
-rw-r--r--assets/icons/versionControllerSync.svg1
-rw-r--r--assets/icons/versionControllerUndo.svg1
-rw-r--r--assets/icons/viewModule.svg9
-rw-r--r--assets/icons/vlm.svg1
-rw-r--r--assets/icons/vsp.svg1
-rw-r--r--assets/icons/zip.svg1
-rw-r--r--assets/images/empty.txt0
-rw-r--r--assets/images/illustration.pngbin0 -> 29534 bytes
-rw-r--r--assets/images/logo_onap.pngbin0 -> 21360 bytes
-rw-r--r--assets/images/logo_onap_2017.pngbin0 -> 21360 bytes
-rw-r--r--assets/sdc-icons/Setting_24px.svg1
-rw-r--r--assets/sdc-icons/Setting_60px.svg1
-rw-r--r--assets/sdc-icons/common/README.md9
-rw-r--r--assets/sdc-icons/common/alert-triangle-o.svg3
-rw-r--r--assets/sdc-icons/common/alert-triangle.svg5
-rw-r--r--assets/sdc-icons/common/api-o.svg3
-rw-r--r--assets/sdc-icons/common/arrow2-right-child.svg3
-rw-r--r--assets/sdc-icons/common/arrow2-right.svg3
-rw-r--r--assets/sdc-icons/common/arrow3-down-o.svg3
-rw-r--r--assets/sdc-icons/common/arrow3-up-o.svg3
-rw-r--r--assets/sdc-icons/common/attachment.svg3
-rw-r--r--assets/sdc-icons/common/bedge.svg5
-rw-r--r--assets/sdc-icons/common/browse.svg3
-rw-r--r--assets/sdc-icons/common/calendar-o.svg3
-rw-r--r--assets/sdc-icons/common/camera-o.svg3
-rw-r--r--assets/sdc-icons/common/caret1-down-o.svg3
-rw-r--r--assets/sdc-icons/common/caret2-right-circle-o.svg3
-rw-r--r--assets/sdc-icons/common/caret2-right-circle.svg4
-rw-r--r--assets/sdc-icons/common/caret3-right.svg3
-rw-r--r--assets/sdc-icons/common/close.svg3
-rw-r--r--assets/sdc-icons/common/commit-o.svg3
-rw-r--r--assets/sdc-icons/common/composition-o.svg3
-rw-r--r--assets/sdc-icons/common/copy-o.svg3
-rw-r--r--assets/sdc-icons/common/deployment-artifacts-o.svg3
-rw-r--r--assets/sdc-icons/common/description-o.svg3
-rw-r--r--assets/sdc-icons/common/distributed.svg3
-rw-r--r--assets/sdc-icons/common/download-o.svg3
-rw-r--r--assets/sdc-icons/common/edit-file-o.svg3
-rw-r--r--assets/sdc-icons/common/edit-o.svg3
-rw-r--r--assets/sdc-icons/common/expand-o.svg3
-rw-r--r--assets/sdc-icons/common/eye-o.svg3
-rw-r--r--assets/sdc-icons/common/filter-o.svg3
-rw-r--r--assets/sdc-icons/common/info-circle-o.svg3
-rw-r--r--assets/sdc-icons/common/info-circle.svg5
-rw-r--r--assets/sdc-icons/common/info-square-o.svg3
-rw-r--r--assets/sdc-icons/common/inputs-o.svg3
-rw-r--r--assets/sdc-icons/common/locked.svg3
-rw-r--r--assets/sdc-icons/common/minus-circle.svg3
-rw-r--r--assets/sdc-icons/common/minus.svg3
-rw-r--r--assets/sdc-icons/common/notifications-o.svg3
-rw-r--r--assets/sdc-icons/common/plus-circle-o.svg3
-rw-r--r--assets/sdc-icons/common/plus-circle.svg5
-rw-r--r--assets/sdc-icons/common/plus.svg3
-rw-r--r--assets/sdc-icons/common/profile-o.svg3
-rw-r--r--assets/sdc-icons/common/profiles-o.svg3
-rw-r--r--assets/sdc-icons/common/question-mark-circle-o.svg3
-rw-r--r--assets/sdc-icons/common/question-mark-circle.svg5
-rw-r--r--assets/sdc-icons/common/req-capabilities-o.svg3
-rw-r--r--assets/sdc-icons/common/revert-o.svg3
-rw-r--r--assets/sdc-icons/common/save-o.svg3
-rw-r--r--assets/sdc-icons/common/search-o.svg3
-rw-r--r--assets/sdc-icons/common/settings-o.svg3
-rw-r--r--assets/sdc-icons/common/spinner.svg50
-rw-r--r--assets/sdc-icons/common/success-circle-o.svg3
-rw-r--r--assets/sdc-icons/common/success.svg3
-rw-r--r--assets/sdc-icons/common/sync-o.svg3
-rw-r--r--assets/sdc-icons/common/trash-o.svg3
-rw-r--r--assets/sdc-icons/common/undo-o.svg3
-rw-r--r--assets/sdc-icons/common/unlocked-o.svg3
-rw-r--r--assets/sdc-icons/common/upload-o.svg3
-rw-r--r--assets/sdc-icons/common/v-circle-o.svg3
-rw-r--r--assets/sdc-icons/common/v-circle.svg3
-rw-r--r--assets/sdc-icons/common/x-circle-o.svg3
-rw-r--r--assets/sdc-icons/common/x-circle.svg5
-rw-r--r--assets/sdc-icons/components/checkbox_checked.svg3
-rw-r--r--assets/sdc-icons/components/checkbox_disabled.svg9
-rw-r--r--assets/sdc-icons/components/radio_checked .svg6
-rw-r--r--assets/sdc-icons/components/radio_disabled.svg6
-rw-r--r--assets/sdc-icons/d_24px.svg1
-rw-r--r--assets/sdc-icons/d_60px.svg1
-rw-r--r--assets/sdc-icons/resources_24/allotted_resource.svg1
-rw-r--r--assets/sdc-icons/resources_24/applicationServer.svg1
-rw-r--r--assets/sdc-icons/resources_24/borderElement.svg1
-rw-r--r--assets/sdc-icons/resources_24/call_controll.svg1
-rw-r--r--assets/sdc-icons/resources_24/cloudep.svg1
-rw-r--r--assets/sdc-icons/resources_24/collaboration.svg1
-rw-r--r--assets/sdc-icons/resources_24/compute.svg1
-rw-r--r--assets/sdc-icons/resources_24/connector.svg1
-rw-r--r--assets/sdc-icons/resources_24/cp.svg1
-rw-r--r--assets/sdc-icons/resources_24/dcae_analytics.svg1
-rw-r--r--assets/sdc-icons/resources_24/dcae_collector.svg1
-rw-r--r--assets/sdc-icons/resources_24/dcae_database.svg1
-rw-r--r--assets/sdc-icons/resources_24/dcae_machineLearning.svg1
-rw-r--r--assets/sdc-icons/resources_24/dcae_microservice.svg1
-rw-r--r--assets/sdc-icons/resources_24/dcae_source.svg1
-rw-r--r--assets/sdc-icons/resources_24/dcae_utilty.svg1
-rw-r--r--assets/sdc-icons/resources_24/defaulticon.svg1
-rw-r--r--assets/sdc-icons/resources_24/firewall.svg1
-rw-r--r--assets/sdc-icons/resources_24/fortinet.svg1
-rw-r--r--assets/sdc-icons/resources_24/gateway.svg1
-rw-r--r--assets/sdc-icons/resources_24/loadBalancer.svg1
-rw-r--r--assets/sdc-icons/resources_24/mobility.svg1
-rw-r--r--assets/sdc-icons/resources_24/monitoring_template.svg1
-rw-r--r--assets/sdc-icons/resources_24/network.svg1
-rw-r--r--assets/sdc-icons/resources_24/network_cloud.svg1
-rw-r--r--assets/sdc-icons/resources_24/networkrules.svg1
-rw-r--r--assets/sdc-icons/resources_24/notification.svg1
-rw-r--r--assets/sdc-icons/resources_24/objectStorage.svg1
-rw-r--r--assets/sdc-icons/resources_24/ossep.svg1
-rw-r--r--assets/sdc-icons/resources_24/pmc.svg1
-rw-r--r--assets/sdc-icons/resources_24/port.svg1
-rw-r--r--assets/sdc-icons/resources_24/premisesep.svg1
-rw-r--r--assets/sdc-icons/resources_24/router.svg1
-rw-r--r--assets/sdc-icons/resources_24/security.svg1
-rw-r--r--assets/sdc-icons/resources_24/securityrules.svg1
-rw-r--r--assets/sdc-icons/resources_24/server.svg1
-rw-r--r--assets/sdc-icons/resources_24/ucpe.svg1
-rw-r--r--assets/sdc-icons/resources_24/vRouter.svg1
-rw-r--r--assets/sdc-icons/resources_24/vfw.svg1
-rw-r--r--assets/sdc-icons/resources_24/vl.svg1
-rw-r--r--assets/sdc-icons/resources_24/vnfconfiguration.svg1
-rw-r--r--assets/sdc-icons/resources_24/wanx.svg1
-rw-r--r--assets/sdc-icons/resources_60/allotted_resource.svg1
-rw-r--r--assets/sdc-icons/resources_60/applicationServer.svg1
-rw-r--r--assets/sdc-icons/resources_60/borderElement.svg1
-rw-r--r--assets/sdc-icons/resources_60/call_controll.svg1
-rw-r--r--assets/sdc-icons/resources_60/cloudep.svg1
-rw-r--r--assets/sdc-icons/resources_60/collaboration.svg1
-rw-r--r--assets/sdc-icons/resources_60/compute.svg1
-rw-r--r--assets/sdc-icons/resources_60/connector.svg1
-rw-r--r--assets/sdc-icons/resources_60/cp.svg1
-rw-r--r--assets/sdc-icons/resources_60/dcae_analytics.svg1
-rw-r--r--assets/sdc-icons/resources_60/dcae_collector.svg1
-rw-r--r--assets/sdc-icons/resources_60/dcae_database.svg1
-rw-r--r--assets/sdc-icons/resources_60/dcae_machineLearning.svg1
-rw-r--r--assets/sdc-icons/resources_60/dcae_microservice.svg1
-rw-r--r--assets/sdc-icons/resources_60/dcae_source.svg1
-rw-r--r--assets/sdc-icons/resources_60/dcae_utilty.svg1
-rw-r--r--assets/sdc-icons/resources_60/defaulticon.svg1
-rw-r--r--assets/sdc-icons/resources_60/firewall.svg1
-rw-r--r--assets/sdc-icons/resources_60/fortinet.svg1
-rw-r--r--assets/sdc-icons/resources_60/gateway.svg1
-rw-r--r--assets/sdc-icons/resources_60/loadBalancer.svg1
-rw-r--r--assets/sdc-icons/resources_60/mobility.svg1
-rw-r--r--assets/sdc-icons/resources_60/monitoring_template.svg1
-rw-r--r--assets/sdc-icons/resources_60/network.svg1
-rw-r--r--assets/sdc-icons/resources_60/network_cloud.svg1
-rw-r--r--assets/sdc-icons/resources_60/networkrules.svg1
-rw-r--r--assets/sdc-icons/resources_60/notification.svg1
-rw-r--r--assets/sdc-icons/resources_60/objectStorage.svg1
-rw-r--r--assets/sdc-icons/resources_60/ossep.svg1
-rw-r--r--assets/sdc-icons/resources_60/personep.svg1
-rw-r--r--assets/sdc-icons/resources_60/pmc.svg1
-rw-r--r--assets/sdc-icons/resources_60/port.svg1
-rw-r--r--assets/sdc-icons/resources_60/premisesep.svg1
-rw-r--r--assets/sdc-icons/resources_60/router.svg1
-rw-r--r--assets/sdc-icons/resources_60/security.svg1
-rw-r--r--assets/sdc-icons/resources_60/securityrules.svg1
-rw-r--r--assets/sdc-icons/resources_60/server.svg1
-rw-r--r--assets/sdc-icons/resources_60/ucpe.svg1
-rw-r--r--assets/sdc-icons/resources_60/vRouter.svg1
-rw-r--r--assets/sdc-icons/resources_60/vfw.svg1
-rw-r--r--assets/sdc-icons/resources_60/vl.svg1
-rw-r--r--assets/sdc-icons/resources_60/vnfconfiguration.svg1
-rw-r--r--assets/sdc-icons/resources_60/wanx.svg1
-rw-r--r--assets/sdc-icons/services_24/call_controll.svg1
-rw-r--r--assets/sdc-icons/services_24/collaboration.svg1
-rw-r--r--assets/sdc-icons/services_24/collaboration1.svg1
-rw-r--r--assets/sdc-icons/services_24/compute.svg1
-rw-r--r--assets/sdc-icons/services_24/defaulticon.svg1
-rw-r--r--assets/sdc-icons/services_24/messaging.svg1
-rw-r--r--assets/sdc-icons/services_24/mobility.svg1
-rw-r--r--assets/sdc-icons/services_24/network_l_1-3.svg1
-rw-r--r--assets/sdc-icons/services_24/network_l_4.svg1
-rw-r--r--assets/sdc-icons/services_24/notification.svg1
-rw-r--r--assets/sdc-icons/services_24/personep.svg1
-rw-r--r--assets/sdc-icons/services_24/platform.svg1
-rw-r--r--assets/sdc-icons/services_24/storage.svg1
-rw-r--r--assets/sdc-icons/services_60/call_controll.svg1
-rw-r--r--assets/sdc-icons/services_60/collaboration.svg1
-rw-r--r--assets/sdc-icons/services_60/collaboration1.svg1
-rw-r--r--assets/sdc-icons/services_60/compute.svg1
-rw-r--r--assets/sdc-icons/services_60/defaulticon.svg1
-rw-r--r--assets/sdc-icons/services_60/messaging.svg1
-rw-r--r--assets/sdc-icons/services_60/mobility.svg1
-rw-r--r--assets/sdc-icons/services_60/network_l_1-3.svg1
-rw-r--r--assets/sdc-icons/services_60/network_l_4.svg1
-rw-r--r--assets/sdc-icons/services_60/notification.svg1
-rw-r--r--assets/sdc-icons/services_60/platform.svg1
-rw-r--r--assets/sdc-icons/services_60/storage.svg1
-rw-r--r--assets/sdc-icons/vendors_24/alcatelLucent.svg1
-rw-r--r--assets/sdc-icons/vendors_24/aricent.svg1
-rw-r--r--assets/sdc-icons/vendors_24/att.svg1
-rw-r--r--assets/sdc-icons/vendors_24/brocade.svg1
-rw-r--r--assets/sdc-icons/vendors_24/cisco.svg1
-rw-r--r--assets/sdc-icons/vendors_24/cloud.svg1
-rw-r--r--assets/sdc-icons/vendors_24/ericsson.svg1
-rw-r--r--assets/sdc-icons/vendors_24/juniper.svg1
-rw-r--r--assets/sdc-icons/vendors_24/mysql.svg1
-rw-r--r--assets/sdc-icons/vendors_24/nokia_siemens.svg1
-rw-r--r--assets/sdc-icons/vendors_24/oracle.svg1
-rw-r--r--assets/sdc-icons/vendors_24/tropo.svg1
-rw-r--r--assets/sdc-icons/vendors_60/alcatelLucent.svg1
-rw-r--r--assets/sdc-icons/vendors_60/aricent.svg1
-rw-r--r--assets/sdc-icons/vendors_60/att.svg1
-rw-r--r--assets/sdc-icons/vendors_60/brocade.svg1
-rw-r--r--assets/sdc-icons/vendors_60/cisco.svg1
-rw-r--r--assets/sdc-icons/vendors_60/cloud.svg1
-rw-r--r--assets/sdc-icons/vendors_60/ericsson.svg1
-rw-r--r--assets/sdc-icons/vendors_60/juniper.svg1
-rw-r--r--assets/sdc-icons/vendors_60/mysql.svg1
-rw-r--r--assets/sdc-icons/vendors_60/nokia_siemens.svg1
-rw-r--r--assets/sdc-icons/vendors_60/oracle.svg1
-rw-r--r--components/accordion/accordion-basic.html22
-rw-r--r--components/accordion/accordion.scss50
-rw-r--r--components/autocomplete/_autocomplete.scss43
-rw-r--r--components/autocomplete/autocomlete-close.html22
-rw-r--r--components/autocomplete/autocomplete-open.html24
-rw-r--r--components/button/_button.scss232
-rw-r--r--components/button/button-link-auto.html3
-rw-r--r--components/button/button-link-disabled.html3
-rw-r--r--components/button/button-link-extra-small.html3
-rw-r--r--components/button/button-link-large.html3
-rw-r--r--components/button/button-link-medium.html3
-rw-r--r--components/button/button-link-small.html3
-rw-r--r--components/button/button-link.html3
-rw-r--r--components/button/button-primary-auto.html3
-rw-r--r--components/button/button-primary-disabled.html3
-rw-r--r--components/button/button-primary-extra-small.html3
-rw-r--r--components/button/button-primary-large.html3
-rw-r--r--components/button/button-primary-medium.html3
-rw-r--r--components/button/button-primary-small.html3
-rw-r--r--components/button/button-primary.html3
-rw-r--r--components/button/button-secondary-auto.html3
-rw-r--r--components/button/button-secondary-disabled.html3
-rw-r--r--components/button/button-secondary-extra-small.html3
-rw-r--r--components/button/button-secondary-large.html3
-rw-r--r--components/button/button-secondary-medium.html3
-rw-r--r--components/button/button-secondary-small.html3
-rw-r--r--components/button/button-secondary.html3
-rw-r--r--components/checkbox/_checkbox.scss66
-rw-r--r--components/checkbox/checkbox-checked.html6
-rw-r--r--components/checkbox/checkbox-disabled-checked.html6
-rw-r--r--components/checkbox/checkbox-disabled.html6
-rw-r--r--components/checkbox/checkbox-unchecked.html6
-rw-r--r--components/checklist/_checklist.scss21
-rw-r--r--components/checklist/checklist-with-checked-items.html24
-rw-r--r--components/checklist/checklist-with-disabled-items.html25
-rw-r--r--components/checklist/multi-levels-checklist.html50
-rw-r--r--components/checklist/simple-checklist.html24
-rw-r--r--components/dropdown/_dropdown.scss346
-rw-r--r--components/dropdown/dropdown-disabled.html11
-rw-r--r--components/dropdown/dropdown-groups.html10
-rw-r--r--components/dropdown/dropdown-requiered.html18
-rw-r--r--components/dropdown/dropdown.html9
-rw-r--r--components/filter-bar/_filter-bar.scss51
-rw-r--r--components/filter-bar/filter-bar-with-text.html16
-rw-r--r--components/filter-bar/filter-bar.html17
-rw-r--r--components/icon/_icon.scss250
-rw-r--r--components/input/_input.scss78
-rw-r--r--components/input/input-disabled.html4
-rw-r--r--components/input/input-error.html17
-rw-r--r--components/input/input-number.html6
-rw-r--r--components/input/input-placeholder.html4
-rw-r--r--components/input/input-required.html4
-rw-r--r--components/input/input-view-only.html4
-rw-r--r--components/input/input.html8
-rw-r--r--components/loader/_loader.scss255
-rw-r--r--components/loader/global-loader.html5
-rw-r--r--components/loader/loader.html5
-rw-r--r--components/menu/_menu.scss68
-rw-r--r--components/menu/popup-menu.html8
-rw-r--r--components/menu/relative-popup-menu.html8
-rw-r--r--components/modal/_modal.scss233
-rw-r--r--components/modal/alert-modal.html45
-rw-r--r--components/modal/custom-modal.html27
-rw-r--r--components/modal/error-modal.html32
-rw-r--r--components/modal/standard-modal.html46
-rw-r--r--components/multiline-ellipsis/_multiline_ellipsis.scss25
-rw-r--r--components/notification/_notification.scss78
-rw-r--r--components/notification/notification-error.html21
-rw-r--r--components/notification/notification-info.html21
-rw-r--r--components/notification/notification-success.html21
-rw-r--r--components/notification/notification-warning.html21
-rw-r--r--components/notifications-container/_notifications-container.scss8
-rw-r--r--components/panel/basic-panel.html21
-rw-r--r--components/panel/panel.scss8
-rw-r--r--components/radio/_radio.scss69
-rw-r--r--components/radio/radio-checked.html4
-rw-r--r--components/radio/radio-disabled-checked.html4
-rw-r--r--components/radio/radio-disabled.html4
-rw-r--r--components/radio/radio-unchecked.html4
-rw-r--r--components/radioGroup/_radioGroup.scss20
-rw-r--r--components/radioGroup/radio-group-disabled.html13
-rw-r--r--components/radioGroup/radio-group-no-title.html12
-rw-r--r--components/radioGroup/radio-group-value.html13
-rw-r--r--components/radioGroup/radio-group.html13
-rw-r--r--components/search-bar/_search-bar.scss61
-rw-r--r--components/search-bar/search-bar-with-text.html17
-rw-r--r--components/search-bar/search-bar.html16
-rw-r--r--components/tabs/tabs-disabled.html8
-rw-r--r--components/tabs/tabs-header.html8
-rw-r--r--components/tabs/tabs-menu.html8
-rw-r--r--components/tabs/tabs.scss35
-rw-r--r--components/tag-cloud/_tag-cloud.scss116
-rw-r--r--components/tag-cloud/disabled-list.html31
-rw-r--r--components/tag-cloud/list-with-active-add-button.html50
-rw-r--r--components/tag-cloud/list-with-some-read-only-items.html61
-rw-r--r--components/tag-cloud/list-with-unique-error.html52
-rw-r--r--components/tag-cloud/simple-list.html50
-rw-r--r--components/textarea/_textarea.scss77
-rw-r--r--components/textarea/textarea-disabled.html3
-rw-r--r--components/textarea/textarea-error.html3
-rw-r--r--components/textarea/textarea-maxlength.html3
-rw-r--r--components/textarea/textarea-placeholder.html3
-rw-r--r--components/textarea/textarea-required.html4
-rw-r--r--components/textarea/textarea.html4
-rw-r--r--components/tile/_tile.scss172
-rw-r--r--components/tile/tile-without-footer.html14
-rw-r--r--components/tile/vendor-tile.html26
-rw-r--r--components/tile/vfc-tile.html17
-rw-r--r--components/tile/vlm-tile.html22
-rw-r--r--components/tile/vsp-tile.html17
-rw-r--r--components/tooltip/_tooltip.scss124
-rw-r--r--components/validation/_validation.scss9
-rw-r--r--index.js7
-rw-r--r--package.json34
-rw-r--r--styles/_common.scss7
-rw-r--r--styles/_components.scss25
-rw-r--r--styles/common/_animation.scss149
-rw-r--r--styles/common/_icons.scss19
-rw-r--r--styles/common/_normalize.scss578
-rw-r--r--styles/common/_typography.scss96
-rw-r--r--styles/common/base.scss96
-rw-r--r--styles/common/mixins.scss342
-rw-r--r--styles/common/variables.scss39
-rw-r--r--styles/style.scss2
-rw-r--r--utils/create-svg-icons-map.js114
-rw-r--r--utils/delete-folders.js3
-rw-r--r--version.properties13
398 files changed, 6097 insertions, 0 deletions
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..ad88e60
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,15 @@
+/dist
+/tmp
+/lib
+/build
+/node_modules
+npm-debug.log*
+Thumbs.db
+
+# IDEA files
+.idea
+.vscode
+.history
+package-lock.json
+# build files
+.out
diff --git a/.gitreview b/.gitreview
new file mode 100644
index 0000000..1ab9ad7
--- /dev/null
+++ b/.gitreview
@@ -0,0 +1,4 @@
+[gerrit]
+host=gerrit.onap.org
+port=29418
+project=sdc/onap-ui-common.git
diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 0000000..dae34f8
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,14 @@
+language: node_js
+node_js:
+- 6
+install: npm install
+script:
+- npm run build
+deploy:
+ - provider: npm
+ email: onap.sdc@gmail.com
+ api_key: $NPM_TOKEN
+ skip_cleanup: true
+ on:
+ tags: true
+ repo: onap-sdc/onap-ui-common
diff --git a/LICENSE.TXT b/LICENSE.TXT
new file mode 100644
index 0000000..f2eb9ea
--- /dev/null
+++ b/LICENSE.TXT
@@ -0,0 +1,20 @@
+/*
+* ============LICENSE_START==========================================
+* ===================================================================
+* Copyright © 2018 AT&T Intellectual Property.
+* Copyright © 2018 Amdocs
+* All rights reserved.
+* ===================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END============================================
+*/ \ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..a07a0b7
--- /dev/null
+++ b/README.md
@@ -0,0 +1,38 @@
+# ONAP-UI-COMMON
+
+This project aims to create a unified UI styled components for multiple development teams who work on the same web-based applications.
+This repository contains the components HTML files and SCSS files.
+The project is used by ONAP-UI-ANGULAR and ONAP-UI-REACT that implements components according to the HTML in this project.
+
+
+### Installation
+```js
+npm install onap-ui-common
+```
+
+### Usage
+
+You can use the scss files (for styling) and icons-map.js file (for using icons).
+To use the icons just import the iconsMap
+```js
+import { iconsMap } from 'onap-ui-common';
+```
+
+To use the SCSS files you need to reference them from your local SCSS file and compile them.
+```scss
+@import '../../../node_modules/onap-ui-common/styles/style.scss';
+```
+
+### See also
+[ONAP-UI-ANGULAR](https://github.com/onap-sdc/onap-ui-angular)
+
+[ONAP-UI-REACT](https://github.com/onap-sdc/onap-ui-react)
+
+### Having some trouble? Have an issue?
+For bugs and issues, please use the [issues](https://github.com/onap-sdc/onap-ui-common/issues) page
+
+### How to Contribute
+**Contribution can be made only by following these guide lines**
+* Every change in the basic HTML files structure, must be followed by changes on the frameworks projects (ONAP-UI-ANGULAR and ONAP-UI-REACT).
+* There will be no any 3rd party UI framework imported (i.e. `Bootstrap`, `Material`, `Foundation`... etc.).
+* Contribution are done only by the [contribution guide](https://github.com/onap-sdc/onap-ui-common/wiki/Contribution-guide). Contributions submitted not in this format and guidelines will not be considered.
diff --git a/assets/README.md b/assets/README.md
new file mode 100644
index 0000000..5f2681b
--- /dev/null
+++ b/assets/README.md
@@ -0,0 +1,9 @@
+
+# Folder Structure
+
+### icons
+Contains `svg` icons **ONLY**
+
+
+### images
+Contains large images (if any...)
diff --git a/assets/icons/angleDoubleLeft.svg b/assets/icons/angleDoubleLeft.svg
new file mode 100644
index 0000000..9e1591a
--- /dev/null
+++ b/assets/icons/angleDoubleLeft.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="angle-double-left_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 9 9.9" style="enable-background:new 0 0 9 9.9;" xml:space="preserve">
+<g>
+ <g transform="translate(0,-952.36218)">
+ <path d="M8.5,952.4c-0.1,0-0.2,0-0.2,0.1l-5.5,4.6c-0.2,0.1-0.2,0.4,0,0.5l0,0l5.5,4.6c0.2,0.1,0.4,0.1,0.5,0
+ c0.1-0.2,0.1-0.4,0-0.5l0,0l-5.2-4.3l5.2-4.3c0.2-0.1,0.2-0.4,0.1-0.5C8.7,952.4,8.6,952.4,8.5,952.4z"/>
+ </g>
+ <g transform="translate(0,-952.36218)">
+ <path d="M5.8,952.4c-0.1,0-0.2,0-0.2,0.1l-5.5,4.6c-0.2,0.1-0.2,0.4,0,0.5l0,0l5.5,4.6c0.2,0.1,0.4,0.1,0.5,0
+ c0.1-0.2,0.1-0.4,0-0.5l0,0l-5.2-4.3l5.2-4.3c0.2-0.1,0.2-0.4,0.1-0.5C6,952.4,5.9,952.4,5.8,952.4z"/>
+ </g>
+</g>
+</svg>
diff --git a/assets/icons/angleDoubleRight.svg b/assets/icons/angleDoubleRight.svg
new file mode 100644
index 0000000..e77031a
--- /dev/null
+++ b/assets/icons/angleDoubleRight.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="angle-double-right_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 9 10" style="enable-background:new 0 0 9 10;" xml:space="preserve">
+<g>
+ <path d="M6.2,4.8C6.2,4.7,6.1,4.7,6.2,4.8L0.6,0.1C0.5,0,0.2,0,0.1,0.1C0,0.3,0,0.5,0.1,0.7L5.3,5L0.1,9.3C0,9.5,0,9.7,0.1,9.9
+ C0.2,10,0.3,10,0.4,10s0.2,0,0.2-0.1l5.5-4.6C6.3,5.2,6.3,4.9,6.2,4.8z"/>
+ <path d="M8.9,4.8C8.9,4.7,8.9,4.7,8.9,4.8L3.4,0.1C3.2,0,3,0,2.8,0.1c-0.1,0.2-0.1,0.4,0,0.5L8,5L2.9,9.3C2.7,9.5,2.7,9.7,2.8,9.9
+ C2.9,10,3,10,3.1,10s0.2,0,0.2-0.1l5.5-4.6C9,5.2,9,4.9,8.9,4.8z"/>
+</g>
+</svg>
diff --git a/assets/icons/angleLeft.svg b/assets/icons/angleLeft.svg
new file mode 100644
index 0000000..b2d2f81
--- /dev/null
+++ b/assets/icons/angleLeft.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="angle-left_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 6.3 9.9" style="enable-background:new 0 0 6.3 9.9;" xml:space="preserve">
+<g transform="translate(0,-952.36218)">
+ <path d="M5.8,952.4c-0.1,0-0.2,0-0.2,0.1l-5.5,4.6c-0.2,0.1-0.2,0.4,0,0.5l0,0l5.5,4.6c0.2,0.1,0.4,0.1,0.5,0
+ c0.1-0.2,0.1-0.4,0-0.5l0,0l-5.2-4.3l5.2-4.3c0.2-0.1,0.2-0.4,0.1-0.5C6,952.4,5.9,952.4,5.8,952.4z"/>
+</g>
+</svg>
diff --git a/assets/icons/angleRight.svg b/assets/icons/angleRight.svg
new file mode 100644
index 0000000..f8e6efc
--- /dev/null
+++ b/assets/icons/angleRight.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="angle-right_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 6.3 9.9" style="enable-background:new 0 0 6.3 9.9;" xml:space="preserve">
+<g transform="translate(0,-952.36218)">
+ <path d="M0.5,962.2c0.1,0,0.2,0,0.2-0.1l5.5-4.6c0.2-0.1,0.2-0.4,0-0.5l0,0l-5.5-4.6c-0.2-0.1-0.4-0.1-0.5,0
+ c-0.1,0.2-0.1,0.4,0,0.5l0,0l5.2,4.3l-5.2,4.3C0,961.6,0,961.9,0.1,962C0.3,962.1,0.4,962.2,0.5,962.2z"/>
+</g>
+</svg>
diff --git a/assets/icons/archiveBox.svg b/assets/icons/archiveBox.svg
new file mode 100644
index 0000000..41c1415
--- /dev/null
+++ b/assets/icons/archiveBox.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 20">
+ <defs>
+ <style>
+ .a {
+ fill: #fff;
+ }
+
+ .b {
+ mask: url(#a);
+ }
+ </style>
+ <mask id="a" x="0" y="0" width="22" height="20" maskUnits="userSpaceOnUse">
+ <g transform="translate(0 0)">
+ <path class="a" d="M21,0H1A1,1,0,0,0,0,1V6A1,1,0,0,0,1,7H2V19a1,1,0,0,0,1,1H19a1,1,0,0,0,1-1V7h1a.94.94,0,0,0,1-1V1A.92.92,0,0,0,21,0ZM17,18H5.05a1,1,0,0,1-1-1V7.17H18V17A1,1,0,0,1,17,18ZM20,5H2V2.05H20ZM8,11h6c.55,0,1-.3,1-.67V9.67C15,9.3,14.55,9,14,9H8c-.55,0-1,.3-1,.67v.67C7,10.7,7.45,11,8,11Z"/>
+ </g>
+ </mask>
+ </defs>
+ <title>archive box</title>
+ <g>
+ <path d="M8,11h6c.55,0,1-.3,1-.67V9.67C15,9.3,14.55,9,14,9H8c-.55,0-1,.3-1,.67v.67C7,10.7,7.45,11,8,11Z" transform="translate(0 0)"/>
+ <path d="M22,6V1a.92.92,0,0,0-1-1H1A1,1,0,0,0,0,1V6A1,1,0,0,0,1,7H2V19a1,1,0,0,0,1,1H19a1,1,0,0,0,1-1V7h1A.94.94,0,0,0,22,6ZM18,17a1,1,0,0,1-1,1H5.05a1,1,0,0,1-1-1V7.17H18ZM20,5H2V2.05H20Z" transform="translate(0 0)"/>
+ </g>
+</svg>
diff --git a/assets/icons/artifacts.svg b/assets/icons/artifacts.svg
new file mode 100644
index 0000000..41e6c8e
--- /dev/null
+++ b/assets/icons/artifacts.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 20"><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M0,0V20H16V0ZM15,19H1V3H15Z"/><rect x="3" y="6" width="10" height="1"/><rect x="3" y="9" width="10" height="1"/><rect x="3" y="12" width="10" height="1"/><rect x="3" y="15" width="10" height="1"/></g></g></svg> \ No newline at end of file
diff --git a/assets/icons/back.svg b/assets/icons/back.svg
new file mode 100644
index 0000000..287355f
--- /dev/null
+++ b/assets/icons/back.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="back_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 9.2 19.9" style="enable-background:new 0 0 9.2 19.9;" xml:space="preserve">
+<polygon points="7.6,19.9 0,10 7.6,0 9.2,1.2 2.5,10 9.2,18.7 "/>
+</svg>
diff --git a/assets/icons/base.svg b/assets/icons/base.svg
new file mode 100644
index 0000000..89fbd43
--- /dev/null
+++ b/assets/icons/base.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.95 19.24"><title>base.volume</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M10,1c5,0,8.5,2.11,8.5,4S15,9,10,9s-8.5-2.11-8.5-4S5,1,10,1m0-1C4.73,0,.47,2.24.47,5s4.25,5,9.5,5,9.5-2.24,9.5-5S15.22,0,10,0Z"/><path d="M10,13.24C4.38,13.24,0,10.94,0,8A.5.5,0,0,1,1,8c0,2.3,4.11,4.24,9,4.24s9-1.94,9-4.24a.5.5,0,0,1,1,0C19.95,10.94,15.57,13.24,10,13.24Z"/><path d="M10,16.24c-5.59,0-10-2.3-10-5.24a.5.5,0,0,1,1,0c0,2.3,4.11,4.24,9,4.24s9-1.94,9-4.24a.5.5,0,0,1,1,0C19.95,13.94,15.57,16.24,10,16.24Z"/><path d="M10,19.24c-5.59,0-10-2.3-10-5.24a.5.5,0,0,1,1,0c0,2.3,4.11,4.24,9,4.24s9-1.94,9-4.24a.5.5,0,0,1,1,0C19.95,16.94,15.57,19.24,10,19.24Z"/></g></g></svg> \ No newline at end of file
diff --git a/assets/icons/calendar.svg b/assets/icons/calendar.svg
new file mode 100644
index 0000000..9c05902
--- /dev/null
+++ b/assets/icons/calendar.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 18" id="calendar_icon"><title>Asset 1</title><g data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M15.5,2H13V0H12V2H9V0H8V2H5V0H4V2H1.5A1.5,1.5,0,0,0,0,3.5v13A1.5,1.5,0,0,0,1.5,18h14A1.5,1.5,0,0,0,17,16.5V3.5A1.5,1.5,0,0,0,15.5,2ZM16,16.5a.5.5,0,0,1-.5.5H1.5a.5.5,0,0,1-.5-.5V8H16ZM1,7V3.5A.5.5,0,0,1,1.5,3H4V5H5V3H8V5H9V3h3V5h1V3h2.5a.5.5,0,0,1,.5.5V7Z"/><path d="M4.52,13.65l.7-.09a1.55,1.55,0,0,0,.41.86,1,1,0,0,0,.71.26,1.14,1.14,0,0,0,.84-.34,1.16,1.16,0,0,0,.34-.85,1.08,1.08,0,0,0-.32-.8,1.09,1.09,0,0,0-.8-.31,2,2,0,0,0-.5.08L6,11.84H6.1a1.45,1.45,0,0,0,.81-.23.8.8,0,0,0,.36-.72A.85.85,0,0,0,7,10.25.93.93,0,0,0,6.33,10a1,1,0,0,0-.68.26A1.29,1.29,0,0,0,5.3,11l-.7-.12a1.81,1.81,0,0,1,.59-1.1,1.69,1.69,0,0,1,1.14-.39,1.86,1.86,0,0,1,.86.2,1.45,1.45,0,0,1,.6.55A1.41,1.41,0,0,1,8,10.9a1.21,1.21,0,0,1-.2.68,1.36,1.36,0,0,1-.59.48,1.33,1.33,0,0,1,.79.49,1.48,1.48,0,0,1,.28.92,1.69,1.69,0,0,1-.55,1.27,1.92,1.92,0,0,1-1.38.52,1.8,1.8,0,0,1-1.25-.45A1.74,1.74,0,0,1,4.52,13.65Z"/><path d="M11.62,15.17h-.7V10.69a3.68,3.68,0,0,1-.67.48,4.77,4.77,0,0,1-.74.36v-.68a4.26,4.26,0,0,0,1-.67,2.66,2.66,0,0,0,.63-.77h.45Z"/></g></g></svg> \ No newline at end of file
diff --git a/assets/icons/caretDown.svg b/assets/icons/caretDown.svg
new file mode 100644
index 0000000..cfd3c57
--- /dev/null
+++ b/assets/icons/caretDown.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="caret-down_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 10 5" style="enable-background:new 0 0 10 5;" xml:space="preserve">
+<path d="M0,0l5,5l5-5H0z"/>
+</svg>
diff --git a/assets/icons/check.svg b/assets/icons/check.svg
new file mode 100644
index 0000000..43d1881
--- /dev/null
+++ b/assets/icons/check.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="check_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 14 10" style="enable-background:new 0 0 14 10;" xml:space="preserve">
+<g transform="translate(0,-952.36218)">
+ <path d="M13.6,952.4c-0.1,0-0.2,0.1-0.3,0.2c-2.8,2.9-5.6,5.8-8.4,8.7l-4-3.5c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7l0,0l4.4,3.7
+ c0.2,0.2,0.5,0.1,0.6,0c2.9-3,5.8-6,8.7-9.1c0.2-0.2,0.2-0.5,0-0.7C13.8,952.4,13.6,952.4,13.6,952.4L13.6,952.4z"/>
+</g>
+</svg>
diff --git a/assets/icons/checkCircle.svg b/assets/icons/checkCircle.svg
new file mode 100644
index 0000000..313657e
--- /dev/null
+++ b/assets/icons/checkCircle.svg
@@ -0,0 +1 @@
+<svg id="check-circle_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M8,16A8,8,0,1,0,0,8,8,8,0,0,0,8,16ZM4.5,6.8,6.7,9l4.4-4.3,1.2,1.2L6.7,11.5,3.2,8Z"/></g></g></svg>
diff --git a/assets/icons/chevronDown.svg b/assets/icons/chevronDown.svg
new file mode 100644
index 0000000..1ebd094
--- /dev/null
+++ b/assets/icons/chevronDown.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="chevron-down_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 10 6.3" style="enable-background:new 0 0 10 6.3;" xml:space="preserve">
+<g transform="translate(0,-952.36218)">
+ <path d="M0.1,952.8c0,0.1,0,0.2,0.1,0.2l4.6,5.5c0.1,0.2,0.4,0.2,0.5,0l0,0l4.6-5.5c0.1-0.2,0.1-0.4,0-0.5s-0.4-0.1-0.5,0l0,0
+ l-4.3,5.2l-4.3-5.2c-0.1-0.2-0.4-0.2-0.5-0.1C0.1,952.5,0.1,952.6,0.1,952.8z"/>
+</g>
+</svg>
diff --git a/assets/icons/chevronUp.svg b/assets/icons/chevronUp.svg
new file mode 100644
index 0000000..7fce935
--- /dev/null
+++ b/assets/icons/chevronUp.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="chevron-up_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 10 6.3" style="enable-background:new 0 0 10 6.3;" xml:space="preserve">
+<g transform="translate(0,-952.36218)">
+ <path d="M10,958.2c0-0.1,0-0.2-0.1-0.2l-4.6-5.5c-0.1-0.2-0.4-0.2-0.5,0l0,0L0.1,958c-0.1,0.2-0.1,0.4,0,0.5s0.4,0.1,0.5,0l0,0
+ l4.3-5.2l4.3,5.2c0.1,0.2,0.4,0.2,0.5,0.1C10,958.5,10,958.3,10,958.2z"/>
+</g>
+</svg>
diff --git a/assets/icons/close.svg b/assets/icons/close.svg
new file mode 100644
index 0000000..0decc7c
--- /dev/null
+++ b/assets/icons/close.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="close_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 10.1 10.1" style="enable-background:new 0 0 10.1 10.1;" xml:space="preserve">
+<g transform="translate(0,-952.36218)">
+ <path d="M0.5,952.4c-0.2,0-0.4,0.2-0.4,0.5c0,0.1,0.1,0.2,0.1,0.3l4.3,4.3l-4.3,4.3c-0.2,0.2-0.2,0.4,0,0.6c0.2,0.2,0.4,0.2,0.6,0
+ l0,0l4.3-4.4l4.3,4.3c0.2,0.2,0.4,0.2,0.6,0s0.2-0.4,0-0.6l0,0l-4.3-4.3l4.3-4.3c0.2-0.2,0.2-0.4,0-0.6c-0.1-0.1-0.2-0.1-0.4-0.1
+ c-0.1,0-0.2,0.1-0.3,0.1l-4.2,4.3l-4.3-4.3C0.8,952.4,0.6,952.4,0.5,952.4z"/>
+</g>
+</svg>
diff --git a/assets/icons/download.svg b/assets/icons/download.svg
new file mode 100644
index 0000000..dd64605
--- /dev/null
+++ b/assets/icons/download.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 11"><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon points="14 6 14 10 1 10 1 6 0 6 0 11 15 11 15 6 14 6"/><polygon points="11.29 3.79 10.58 3.08 8 5.66 8 0 7 0 7 5.66 4.42 3.08 3.71 3.79 7.5 7.58 11.29 3.79"/></g></g></svg> \ No newline at end of file
diff --git a/assets/icons/empty.txt b/assets/icons/empty.txt
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/assets/icons/empty.txt
diff --git a/assets/icons/env.svg b/assets/icons/env.svg
new file mode 100644
index 0000000..ac68ae6
--- /dev/null
+++ b/assets/icons/env.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 14"><title>env</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><rect x="3" y="6" width="9" height="1"/><rect x="3" y="8" width="9" height="1"/><rect x="5" y="10" width="5" height="1"/><path d="M8,2V0H7V2H0V14H15V2Zm6,11H1V3H7V4H8V3h6Z"/></g></g></svg> \ No newline at end of file
diff --git a/assets/icons/error.svg b/assets/icons/error.svg
new file mode 100644
index 0000000..bafb73b
--- /dev/null
+++ b/assets/icons/error.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><title>error</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M8.5,1A7.5,7.5,0,1,1,1,8.5,7.51,7.51,0,0,1,8.5,1m0-1A8.5,8.5,0,1,0,17,8.5,8.5,8.5,0,0,0,8.5,0Z"/><polygon points="11.6 6.1 10.9 5.4 8.5 7.79 6.1 5.4 5.4 6.1 7.79 8.5 5.4 10.9 6.1 11.6 8.5 9.21 10.9 11.6 11.6 10.9 9.21 8.5 11.6 6.1"/></g></g></svg> \ No newline at end of file
diff --git a/assets/icons/errorCircle.svg b/assets/icons/errorCircle.svg
new file mode 100644
index 0000000..8234753
--- /dev/null
+++ b/assets/icons/errorCircle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="error-circle_icon" viewBox="0 0 16 16"><title>Asset 4</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0Zm.9,12.4H7.1V10.6H8.9Zm0-3.6H7.1V3.5H8.9Z"/></g></g></svg> \ No newline at end of file
diff --git a/assets/icons/exclamationTriangleFull.svg b/assets/icons/exclamationTriangleFull.svg
new file mode 100644
index 0000000..7cab121
--- /dev/null
+++ b/assets/icons/exclamationTriangleFull.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="exclamation-triangle-full_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 19.9 18" style="enable-background:new 0 0 19.9 18;" xml:space="preserve">
+<path d="M19.6,14.3L12,1.3c-0.3-0.6-0.8-1-1.4-1.2C10-0.1,9.3,0,8.7,0.3c-0.4,0.3-0.6,0.6-0.9,1l-7.6,13c-0.3,0.5-0.4,1.2-0.2,1.8
+ c0.2,0.6,0.6,1.1,1.1,1.4C1.6,17.8,1.9,18,2.4,18h15.1c1.3,0,2.4-1.1,2.4-2.4C19.9,15.1,19.8,14.7,19.6,14.3z M10.5,14.2
+ c0,0.3-0.2,0.5-0.5,0.5s-0.5-0.2-0.5-0.5l0-1c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5L10.5,14.2z M10.5,9.9c0,0.3-0.2,0.5-0.5,0.5
+ s-0.5-0.2-0.5-0.5l0-5.2c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5L10.5,9.9z"/>
+</svg>
diff --git a/assets/icons/exclamationTriangleLine.svg b/assets/icons/exclamationTriangleLine.svg
new file mode 100644
index 0000000..eae6825
--- /dev/null
+++ b/assets/icons/exclamationTriangleLine.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="exclamation-triangle-line_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 19.9 18" style="enable-background:new 0 0 19.9 18;" xml:space="preserve">
+<g>
+ <path d="M17.6,18H2.4c-0.5,0-0.9-0.1-1.3-0.4c-0.5-0.3-0.9-0.8-1.1-1.4c-0.2-0.6-0.1-1.3,0.2-1.8l7.6-13c0.2-0.3,0.5-0.7,0.9-1
+ C9.3,0,10-0.1,10.6,0.1c0.6,0.2,1.1,0.6,1.4,1.2l7.5,13c0.2,0.4,0.4,0.8,0.4,1.3C19.9,16.9,18.9,18,17.6,18z M9.9,1
+ C9.7,1,9.4,1.1,9.2,1.2C9.1,1.3,8.9,1.6,8.7,1.8l-7.5,13C1,15.1,1,15.5,1,15.9c0.1,0.4,0.3,0.7,0.6,0.8C1.9,16.9,2.1,17,2.4,17
+ h15.1c0.9,0,1.4-0.7,1.4-1.4c0-0.2-0.1-0.5-0.2-0.7l0,0l-7.6-13c-0.2-0.4-0.5-0.6-0.8-0.7C10.2,1,10.1,1,9.9,1z"/>
+ <g>
+ <g>
+ <g>
+ <path d="M10,10.4L10,10.4c-0.3,0-0.5-0.2-0.5-0.5l0-5.2c0-0.3,0.2-0.5,0.5-0.5l0,0c0.3,0,0.5,0.2,0.5,0.5l0,5.2
+ C10.5,10.2,10.2,10.4,10,10.4z"/>
+ </g>
+ </g>
+ <g>
+ <g>
+ <path d="M10,14.7L10,14.7c-0.3,0-0.5-0.2-0.5-0.5l0-1c0-0.3,0.2-0.5,0.5-0.5l0,0c0.3,0,0.5,0.2,0.5,0.5l0,1
+ C10.5,14.5,10.2,14.7,10,14.7z"/>
+ </g>
+ </g>
+ </g>
+</g>
+</svg>
diff --git a/assets/icons/expand.svg b/assets/icons/expand.svg
new file mode 100644
index 0000000..4095ef5
--- /dev/null
+++ b/assets/icons/expand.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon points="0 6 1 6 1 1.71 5.15 5.85 5.85 5.15 1.71 1 6 1 6 0 0 0 0 6"/><polygon points="10 0 10 1 14.29 1 10.15 5.15 10.85 5.85 15 1.71 15 6 16 6 16 0 10 0"/><polygon points="15 14.29 10.85 10.15 10.15 10.85 14.29 15 10 15 10 16 16 16 16 10 15 10 15 14.29"/><polygon points="5.85 10.85 5.15 10.15 1 14.29 1 10 0 10 0 16 6 16 6 15 1.71 15 5.85 10.85"/></g></g></svg> \ No newline at end of file
diff --git a/assets/icons/filter.svg b/assets/icons/filter.svg
new file mode 100644
index 0000000..1c493f4
--- /dev/null
+++ b/assets/icons/filter.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="filter_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<path d="M8.9,20c-0.2,0-0.4,0-0.6-0.1c-0.6-0.3-1-0.8-1-1.5V9L0.5,3.2C0.2,2.9,0,2.4,0,2V1.6C0,0.7,0.7,0,1.6,0h16.9
+ c0.9,0,1.6,0.7,1.6,1.6v0.7c0,0.5-0.2,0.9-0.6,1.2l-7,5.5v7.5c0,0.4-0.2,0.9-0.4,1.2l-2,1.9C9.7,19.9,9.3,20,8.9,20z M1.6,1
+ C1.3,1,1,1.3,1,1.6V2c0,0.2,0.1,0.4,0.2,0.4l7.1,6.1v9.8c0,0.4,0.3,0.5,0.4,0.6c0.1,0,0.4,0.1,0.7-0.1l2-1.9
+ c0.1-0.1,0.1-0.3,0.1-0.4V8.6l7.4-5.9c0.1-0.1,0.2-0.2,0.2-0.4V1.6c0-0.3-0.3-0.6-0.6-0.6H1.6z"/>
+</svg>
diff --git a/assets/icons/infoСircleO.svg b/assets/icons/infoСircleO.svg
new file mode 100644
index 0000000..4d91259
--- /dev/null
+++ b/assets/icons/infoСircleO.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="info-a" d="M11,20 C6,20 2,16 2,11 C2,6 6,2 11,2 C16,2 20,6 20,11 C20,16 16,20 11,20 M11,0 C4.9,0 0,4.9 0,11 C0,17.101 4.9,22 11,22 C17.1,22 22,17.101 22,11 C22,4.9 17.1,0 11,0 M11,10 C10.4,10 10,10.4 10,11 L10,15 C10,15.601 10.4,16 11,16 C11.6,16 12,15.601 12,15 L12,11 C12,10.4 11.6,10 11,10 M10.2998,6.2998 C10.0998,6.4998 9.9998,6.6998 9.9998,6.9998 C9.9998,7.2998 10.0998,7.4998 10.2998,7.6998 C10.4998,7.9008 10.6998,7.9998 10.9998,7.9998 C11.2998,7.9998 11.4998,7.9008 11.6998,7.6998 C11.9008,7.4998 11.9998,7.2998 11.9998,6.9998 C11.9998,6.6998 11.9008,6.4998 11.6998,6.2998 C11.2998,5.9008 10.6998,5.9008 10.2998,6.2998"/>
+</svg>
diff --git a/assets/icons/locked.svg b/assets/icons/locked.svg
new file mode 100644
index 0000000..ab9f0b9
--- /dev/null
+++ b/assets/icons/locked.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11" height="15" viewBox="0 0 11 15" id="locked_icon">
+ <path id="Shape_77_copy_10" data-name="Shape 77 copy 10" class="cls-1" d="M445,359a16.71,16.71,0,0,0-2.1-.009c-1.945.045-3.195,0.049-3.9,0.009v-5a1.743,1.743,0,0,1,2-2h1a1.743,1.743,0,0,1,2,2v5c0.474,0.063.343-.073,1,0,0.266,0.029,0,.279,0,0v-5a2.726,2.726,0,0,0-3-3h-1.142c-1.72-.125-2.715,1.562-2.858,3,0.088,0.009,0,7.338,0,5h0a1.891,1.891,0,0,0-2,1.689v3.461A1.823,1.823,0,0,0,437.775,366h7.448A1.823,1.823,0,0,0,447,364.15v-3.461A2.018,2.018,0,0,0,445,359Z" transform="translate(-436 -351)"/>
+</svg>
diff --git a/assets/icons/module.svg b/assets/icons/module.svg
new file mode 100644
index 0000000..fa3901c
--- /dev/null
+++ b/assets/icons/module.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>module</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M20,20H3V14A3,3,0,0,1,3,8V3H8a3,3,0,0,1,6,0h6V9.32l-.64-.19C17.57,8.59,16,9.68,16,11s1.57,2.4,3.36,1.87l.64-.19ZM4,19H19V14c-2.12.29-4-1.17-4-3a3.35,3.35,0,0,1,4-3V4H12.84L13,3.4A2,2,0,0,0,13,3,2,2,0,0,0,9,3a2,2,0,0,0,0,.4l.12.6H4V9.16L3.4,9A2,2,0,0,0,3,9a2,2,0,0,0,0,4,2,2,0,0,0,.4,0l.6-.12Z"/></g></g></svg> \ No newline at end of file
diff --git a/assets/icons/nestedHeat.svg b/assets/icons/nestedHeat.svg
new file mode 100644
index 0000000..7e33068
--- /dev/null
+++ b/assets/icons/nestedHeat.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 13"><title>nested_heat</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M4.16,1,5.48,2.63l.3.37H14v9H1V1H4.16m.48-1H0V13H15V2H6.26L4.64,0Z"/><rect x="4" y="7" width="7" height="1"/></g></g></svg> \ No newline at end of file
diff --git a/assets/icons/network.svg b/assets/icons/network.svg
new file mode 100644
index 0000000..018cd3f
--- /dev/null
+++ b/assets/icons/network.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13"><title>network</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M10.5,8a2.48,2.48,0,0,0-1.38.42l-.54-.54a2.48,2.48,0,0,0,0-2.75l.54-.54a2.51,2.51,0,1,0-.71-.71l-.54.54a2.48,2.48,0,0,0-2.75,0l-.54-.54a2.51,2.51,0,1,0-.71.71l.54.54a2.48,2.48,0,0,0,0,2.75l-.54.54a2.51,2.51,0,1,0,.71.71l.54-.54a2.48,2.48,0,0,0,2.75,0l.54.54A2.5,2.5,0,1,0,10.5,8Zm0-7A1.5,1.5,0,1,1,9,2.5,1.5,1.5,0,0,1,10.5,1Zm-8,3A1.5,1.5,0,1,1,4,2.5,1.5,1.5,0,0,1,2.5,4Zm0,8A1.5,1.5,0,1,1,4,10.5,1.5,1.5,0,0,1,2.5,12Zm4-4A1.5,1.5,0,1,1,8,6.5,1.5,1.5,0,0,1,6.5,8Zm4,4A1.5,1.5,0,1,1,12,10.5,1.5,1.5,0,0,1,10.5,12Z"/></g></g></svg> \ No newline at end of file
diff --git a/assets/icons/notificationBell.svg b/assets/icons/notificationBell.svg
new file mode 100644
index 0000000..6001d59
--- /dev/null
+++ b/assets/icons/notificationBell.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="notification_bell_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 18 21.9" style="enable-background:new 0 0 18 21.9;" xml:space="preserve">
+<title>notification_icon</title>
+<g>
+ <path d="M17.7,16.6c-1.8-2.3-1.8-4-1.8-6.7c0-0.2,0-0.4,0-0.6c-0.2-1.8-1-3.5-2.5-4.7c-0.8-0.7-1.8-1.2-2.8-1.4
+ C10.8,2.8,11,2.4,11,2c0-1.1-0.9-2-2-2S7,0.9,7,2c0,0.4,0.1,0.8,0.4,1.2C4.2,4,2,6.8,2.1,10.1c0,2.6-0.1,4.3-1.8,6.5l0,0.1
+ c-0.1,0.2-0.2,0.3-0.2,0.5C0,18,0.6,18.8,1.4,18.9l4.1,0c0.2,1.7,1.7,3,3.5,3c1.8,0,3.2-1.3,3.5-3l4.2,0c0.2,0,0.5-0.1,0.6-0.2
+ C18,18.2,18.2,17.3,17.7,16.6z M9,1c0.6,0,1,0.4,1,1c0,0.5-0.3,0.8-0.7,0.9c-0.2,0-0.3,0-0.5,0C8.3,2.8,8,2.5,8,2C8,1.4,8.4,1,9,1z
+ M9,20.9c-1.2,0-2.2-0.9-2.5-2l4.9,0C11.2,20.1,10.2,20.9,9,20.9z M16.7,17.8c-0.1,0-0.1,0.1-0.2,0.1l-15.1,0
+ c-0.3,0-0.5-0.3-0.4-0.6c0-0.1,0-0.1,0-0.2c1.9-2.5,1.9-4.6,1.9-7C3,7,5.4,4.3,8.5,4c0,0,0,0,0.1,0C8.7,4,8.8,4,9,4
+ c0.1,0,0.3,0,0.4,0c1.3,0.1,2.4,0.5,3.4,1.4c1.2,1,2,2.4,2.1,4c0,0.2,0,0.4,0,0.5c0,2.7,0,4.8,1.9,7.3C17,17.4,17,17.7,16.7,17.8z"
+ />
+ <path d="M8.5,5.8c-2.2,0.2-3.8,2.1-3.7,4.2c0,0.3,0.2,0.5,0.5,0.5c0,0,0,0,0,0c0.3,0,0.5-0.2,0.5-0.5c0-1.7,1.2-3,2.8-3.2
+ c0.3,0,0.5-0.3,0.4-0.6C9.1,6,8.8,5.8,8.5,5.8z"/>
+</g>
+</svg>
diff --git a/assets/icons/notificationFullBell.svg b/assets/icons/notificationFullBell.svg
new file mode 100644
index 0000000..6e7e7cc
--- /dev/null
+++ b/assets/icons/notificationFullBell.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.98 21.94" id="notification_full_bell_icon">
+ <defs>
+ <style></style>
+ </defs>
+ <title>notification_full</title>
+ <g id="Layer_2" data-name="Layer 2">
+ <g id="Layer_2-2" data-name="Layer 2">
+ <path class="cls-1" d="M17.67,16.61c-1.75-2.29-1.75-4.06-1.75-6.74a7,7,0,0,0-2.24-5.1,6.88,6.88,0,0,0-3.06-1.64,2,2,0,1,0-3.28,0,7.19,7.19,0,0,0-5.29,7c0,2.59-.09,4.29-1.76,6.47a1.45,1.45,0,0,0-.15,1.53,1.43,1.43,0,0,0,1.29.8H5.53a3.48,3.48,0,0,0,6.9,0h4.1a1.43,1.43,0,0,0,1.29-.8A1.46,1.46,0,0,0,17.67,16.61ZM4.8,10.06A4.2,4.2,0,0,1,8.55,5.83a.51.51,0,0,1,.54.46.5.5,0,0,1-.46.54A3.2,3.2,0,0,0,5.8,10.06a.5.5,0,0,1-1,0Z"/>
+ </g>
+ </g>
+</svg>
diff --git a/assets/icons/others.svg b/assets/icons/others.svg
new file mode 100644
index 0000000..9a18e4a
--- /dev/null
+++ b/assets/icons/others.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><title>others</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M5,5H0V0H5ZM1,4H4V1H1Z"/><path d="M5,12H0V7H5ZM1,11H4V8H1Z"/><path d="M12,5H7V0h5ZM8,4h3V1H8Z"/><path d="M12,12H7V7h5ZM8,11h3V8H8Z"/></g></g></svg> \ No newline at end of file
diff --git a/assets/icons/pencil.svg b/assets/icons/pencil.svg
new file mode 100644
index 0000000..6701a3a
--- /dev/null
+++ b/assets/icons/pencil.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="pencil_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 31.7 32" style="enable-background:new 0 0 31.7 32;" xml:space="preserve">
+<g>
+ <path style="fill:#5A5A5A;" d="M9.8,29.4l-7.5-7.5L23.4,0.8C23.9,0.3,24.6,0,25.2,0c0.7,0,1.3,0.3,1.8,0.8l3.9,3.9c1,1,1,2.7,0,3.7
+ L9.8,29.4z M3.5,21.9l6.3,6.3L30.3,7.7C31,7,31,5.9,30.3,5.3l-3.9-3.9c-0.7-0.7-1.8-0.7-2.4,0L3.5,21.9z"/>
+
+ <rect x="23.7" y="2.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 1.7119 19.3109)" style="fill:#5A5A5A;" width="0.9" height="9.8"/>
+
+ <rect x="2.6" y="16.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.2669 15.5571)" style="fill:#5A5A5A;" width="25.1" height="0.9"/>
+ <path style="fill:#5A5A5A;" d="M1.3,32c-0.3,0-0.6-0.1-0.9-0.4s-0.5-0.8-0.4-1.3l2.3-8.5L3.2,22l-2.3,8.5C0.8,30.8,1,30.9,1,31
+ c0.1,0,0.2,0.2,0.4,0.1l8.1-2.5l0.3,0.8l-8.1,2.5C1.5,32,1.4,32,1.3,32z"/>
+
+ <rect x="2.6" y="26.5" transform="matrix(0.6865 -0.7271 0.7271 0.6865 -20.0013 11.2276)" style="fill:#5A5A5A;" width="0.9" height="4.6"/>
+</g>
+</svg>
diff --git a/assets/icons/plus.svg b/assets/icons/plus.svg
new file mode 100644
index 0000000..36f3486
--- /dev/null
+++ b/assets/icons/plus.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="plus_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 19 19" style="enable-background:new 0 0 19 19;" xml:space="preserve">
+<g>
+ <rect y="8" width="19" height="3"/>
+ <path id="Rectangle_2139_copy" d="M8,19V0h3v19H8z"/>
+</g>
+</svg>
diff --git a/assets/icons/plusCircle.svg b/assets/icons/plusCircle.svg
new file mode 100644
index 0000000..63781f5
--- /dev/null
+++ b/assets/icons/plusCircle.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 19">
+ <g>
+ <g>
+ <polygon points="10 14 9 14 9 10 5 10 5 9 9 9 9 5 10 5 10 9 14 9 14 10 10 10 10 14"/>
+ <polygon points="10 14 9 14 9 10 5 10 5 9 9 9 9 5 10 5 10 9 14 9 14 10 10 10 10 14"/>
+ <path d="M9.5,1A8.5,8.5,0,1,1,1,9.5,8.51,8.51,0,0,1,9.5,1m0-1A9.5,9.5,0,1,0,19,9.5,9.5,9.5,0,0,0,9.5,0Z"/>
+ </g>
+ </g>
+</svg>
diff --git a/assets/icons/plusThin.svg b/assets/icons/plusThin.svg
new file mode 100644
index 0000000..571c303
--- /dev/null
+++ b/assets/icons/plusThin.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9">
+ <g>
+ <g>
+ <polygon points="5 9 4 9 4 5 0 5 0 4 4 4 4 0 5 0 5 4 9 4 9 5 5 5 5 9"/>
+ </g>
+ </g>
+</svg>
diff --git a/assets/icons/proceedToOverview.svg b/assets/icons/proceedToOverview.svg
new file mode 100644
index 0000000..4788106
--- /dev/null
+++ b/assets/icons/proceedToOverview.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.04 20"><title>proceed_to_overview</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon points="16.83 20 0 20 0 0 20 0 20 10 19 10 19 1 1 1 1 19 16.83 19 16.83 20"/><rect x="3" y="10" width="14" height="1"/><rect x="3" y="13" width="14" height="1"/><path d="M17,8H3V3H17ZM4,7H16V4H4Z"/><polygon points="20.85 13.32 20.15 14.03 22.12 16 13 16 13 17 22.12 17 20.15 18.98 20.85 19.68 24.04 16.5 20.85 13.32"/></g></g></svg> \ No newline at end of file
diff --git a/assets/icons/questionMark.svg b/assets/icons/questionMark.svg
new file mode 100644
index 0000000..3b1c7bc
--- /dev/null
+++ b/assets/icons/questionMark.svg
@@ -0,0 +1 @@
+<svg id='question-mark_icon' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M8,0a8,8,0,1,0,8,8A7.9,7.9,0,0,0,8,0ZM8,13.1A1.1,1.1,0,1,1,9.1,12,1,1,0,0,1,8,13.1Zm2.3-6.6-.4.4L9.8,7l-.2.2c-.1.1-.3.2-.3.3l-.2.3a1.45,1.45,0,0,0-.2.7v.7H7.3V8.3a2.2,2.2,0,0,1,.1-.8A2,2,0,0,1,8,6.8l.9-.9a.62.62,0,0,0,.2-.7.91.91,0,0,0-.3-.7,1,1,0,0,0-1.4,0,.91.91,0,0,0-.3.7v.1H5.4V5.2a2.43,2.43,0,0,1,.9-1.8,3,3,0,0,1,1.9-.7h.1a2.79,2.79,0,0,1,1.8.6,2,2,0,0,1,.7,1.8A2,2,0,0,1,10.3,6.5Z"/></g></g></svg> \ No newline at end of file
diff --git a/assets/icons/search.svg b/assets/icons/search.svg
new file mode 100644
index 0000000..ce83104
--- /dev/null
+++ b/assets/icons/search.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="search_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 14 14.1" style="enable-background:new 0 0 14 14.1;" xml:space="preserve">
+<path d="M13.9,13.3l-3.6-3.6c0.9-1,1.4-2.4,1.4-3.8C11.7,2.6,9.1,0,5.9,0S0,2.6,0,5.9s2.6,5.9,5.9,5.9c1.5,0,2.8-0.5,3.8-1.4
+ l3.6,3.6c0.1,0.1,0.2,0.1,0.3,0.1s0.2,0,0.3-0.1C14,13.7,14,13.4,13.9,13.3z M5.9,10.9c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5
+ S8.6,10.9,5.9,10.9z"/>
+</svg>
diff --git a/assets/icons/sliders.svg b/assets/icons/sliders.svg
new file mode 100644
index 0000000..ade9de2
--- /dev/null
+++ b/assets/icons/sliders.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="sliders_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 20 17" style="enable-background:new 0 0 20 17;" xml:space="preserve">
+<g>
+ <rect y="8" width="2.8" height="1"/>
+ <rect y="2" width="10.9" height="1"/>
+ <rect x="15" y="2" width="5" height="1"/>
+ <rect x="6.9" y="8" width="13.1" height="1"/>
+ <rect y="14" width="13" height="1"/>
+ <rect x="17.1" y="14" width="2.9" height="1"/>
+ <path d="M13,5c-1.4,0-2.5-1.1-2.5-2.5S11.6,0,13,0s2.5,1.1,2.5,2.5S14.4,5,13,5z M13,1c-0.8,0-1.5,0.7-1.5,1.5S12.2,4,13,4
+ s1.5-0.7,1.5-1.5S13.8,1,13,1z"/>
+ <path d="M15,17c-1.4,0-2.5-1.1-2.5-2.5S13.6,12,15,12s2.5,1.1,2.5,2.5S16.4,17,15,17z M15,13c-0.8,0-1.5,0.7-1.5,1.5S14.2,16,15,16
+ s1.5-0.7,1.5-1.5S15.8,13,15,13z"/>
+ <path d="M4.9,11c-1.4,0-2.5-1.1-2.5-2.5C2.4,7.1,3.5,6,4.9,6s2.5,1.1,2.5,2.5C7.4,9.9,6.3,11,4.9,11z M4.9,7C4.1,7,3.4,7.7,3.4,8.5
+ S4.1,10,4.9,10s1.5-0.7,1.5-1.5S5.7,7,4.9,7z"/>
+</g>
+</svg>
diff --git a/assets/icons/trashO.svg b/assets/icons/trashO.svg
new file mode 100644
index 0000000..26336f1
--- /dev/null
+++ b/assets/icons/trashO.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="trash-o_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 18.9 19.9" style="enable-background:new 0 0 18.9 19.9;" xml:space="preserve">
+<g>
+ <path d="M16.1,19.9H2.8c-0.8,0-1.5-0.7-1.5-1.5V3h1v15.4c0,0.3,0.3,0.5,0.5,0.5h13.3c0.3,0,0.5-0.3,0.5-0.5V3h1v15.4
+ C17.6,19.2,16.9,19.9,16.1,19.9z"/>
+ <path d="M13.7,3h-1V1.7C12.7,1.4,12.4,1,12,1H6.9C6.6,1,6.2,1.3,6.2,1.7V3h-1V1.7c0-1,0.9-1.7,1.7-1.7H12c1,0,1.7,0.9,1.7,1.7V3z"
+ />
+ <rect y="2.5" width="18.9" height="1"/>
+ <g>
+ <rect x="5.2" y="6.1" width="1" height="10.1"/>
+ <rect x="9" y="6.1" width="1" height="10.1"/>
+ <rect x="12.8" y="6.1" width="1" height="10.1"/>
+ </g>
+</g>
+</svg>
diff --git a/assets/icons/unlocked.svg b/assets/icons/unlocked.svg
new file mode 100644
index 0000000..1e341bd
--- /dev/null
+++ b/assets/icons/unlocked.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11" height="18" viewBox="0 0 11 18" id="unlocked_icon">
+ <path id="Shape_77_copy_16" data-name="Shape 77 copy 16" class="cls-1" d="M663,358a16.723,16.723,0,0,0-2.1-.009c-1.944.045-3.194,0.049-3.9,0.009v-7a1.743,1.743,0,0,1,2-2h1a1.743,1.743,0,0,1,2,2v2c0.474,0.064.343-.073,1,0,0.266,0.029,0,.279,0,0v-2a2.726,2.726,0,0,0-3-3h-1.142c-1.72-.125-2.715,1.562-2.858,3,0.088,0.009,0,9.338,0,7h0a1.891,1.891,0,0,0-2,1.689v4.461a1.823,1.823,0,0,0,1.775,1.85h7.448A1.823,1.823,0,0,0,665,364.15v-4.461A2.018,2.018,0,0,0,663,358Zm1.05,6.15a0.827,0.827,0,0,1-.8.836H655.8a0.827,0.827,0,0,1-.8-0.836l0-4.15a1.164,1.164,0,0,1,.8-1.147h7.448A1.129,1.129,0,0,1,664,360Z" transform="translate(-654 -348)"/>
+</svg>
diff --git a/assets/icons/upload.svg b/assets/icons/upload.svg
new file mode 100644
index 0000000..72e64ff
--- /dev/null
+++ b/assets/icons/upload.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 11"><title>upload</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon points="14 6 14 10 1 10 1 6 0 6 0 11 15 11 15 6 14 6"/><polygon points="3.71 3.79 4.42 4.5 7 1.91 7 7.58 8 7.58 8 1.91 10.58 4.5 11.29 3.79 7.5 0 3.71 3.79"/></g></g></svg> \ No newline at end of file
diff --git a/assets/icons/user.svg b/assets/icons/user.svg
new file mode 100644
index 0000000..3363f57
--- /dev/null
+++ b/assets/icons/user.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="user_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 18 20" style="enable-background:new 0 0 18 20;" xml:space="preserve">
+
+<g>
+ <ellipse class="st1" cx="9" cy="6" rx="5.5" ry="5.5"/>
+ <path class="st1" d="M0.7,20c0-4.6,3.7-8.3,8.3-8.3s8.3,3.7,8.3,8.3"/>
+</g>
+</svg>
diff --git a/assets/icons/vendor.svg b/assets/icons/vendor.svg
new file mode 100644
index 0000000..a3b8f5f
--- /dev/null
+++ b/assets/icons/vendor.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53 47" id="vendor_icon"><title>vendor</title><g id="Layer_2" data-name="Layer 2"><g id="vlm_icon" data-name="vlm icon"><path d="M49,7,38.5,7V5.92A5.92,5.92,0,0,0,32.58,0H20.42A5.92,5.92,0,0,0,14.5,5.92V7.15L4,7.2a3.8,3.8,0,0,0-4,3.5V43.5C0,45.4,2,47,4.2,47L49,46.8a3.8,3.8,0,0,0,4-3.5V10.5A3.8,3.8,0,0,0,49,7ZM16.5,5.92A3.92,3.92,0,0,1,20.42,2H32.58A3.92,3.92,0,0,1,36.5,5.92V7.06l-20,.09ZM2,10.8A1.9,1.9,0,0,1,4,9l45-.2a1.9,1.9,0,0,1,2,1.8v8.87L32.94,24.18a6.49,6.49,0,0,0-12.89,0L2,19.51V10.8ZM31,25a4.5,4.5,0,1,1-4.5-4.5A4.5,4.5,0,0,1,31,25ZM49,45,4,45.2A1.9,1.9,0,0,1,2,43.4V21.57l18.13,4.73a6.5,6.5,0,0,0,12.74,0L51,21.53V43.21A1.9,1.9,0,0,1,49,45Z"/></g></g></svg>
diff --git a/assets/icons/versionControllerCommit.svg b/assets/icons/versionControllerCommit.svg
new file mode 100644
index 0000000..5847c69
--- /dev/null
+++ b/assets/icons/versionControllerCommit.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="version-controller-commit_icon" viewBox="0 0 28 19.24"><title>Asset 5</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M27.5,18.24c-7.13,0-12.5-5.8-12.5-13.5V2.41l2.54,2.54.71-.71L14,0,9.76,4.24l.71.71L13,2.41V4.74c0,7.7-5.37,13.5-12.5,13.5H0v1H.5C8.2,19.24,14,13,14,4.74c0,8.27,5.8,14.5,13.5,14.5H28v-1Z"/></g></g></svg> \ No newline at end of file
diff --git a/assets/icons/versionControllerLockClosed.svg b/assets/icons/versionControllerLockClosed.svg
new file mode 100644
index 0000000..73aae7d
--- /dev/null
+++ b/assets/icons/versionControllerLockClosed.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="version-controller-lock-closed_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ x="0px" y="0px" viewBox="0 0 22.1 24" style="enable-background:new 0 0 22.1 24;" xml:space="preserve">
+<g>
+ <path d="M16.1,8h-1V5c0-2.2-1.8-4-4-4s-4,1.8-4,4v3h-1V5c0-2.8,2.2-5,5-5s5,2.2,5,5V8z"/>
+ <g id="Rounded_Rectangle_1267">
+ <path d="M19.3,24.1H2.7c-1.5,0-2.8-1.3-2.8-2.8V10.7C0,9.2,1.3,8,2.7,8h16.6c1.5,0,2.8,1.3,2.8,2.8v10.5
+ C22.1,22.8,20.8,24.1,19.3,24.1z M2.7,9C1.8,9,1,9.8,0.9,10.7v10.6c0,1,0.8,1.8,1.8,1.8h16.6c1,0,1.8-0.8,1.8-1.8V10.8
+ c0-1-0.8-1.8-1.8-1.8H2.7z"/>
+ </g>
+ <g>
+ <path d="M10.9,18.6c-1.8,0-3.3-1.5-3.3-3.3S9.1,12,10.9,12s3.3,1.5,3.3,3.3S12.7,18.6,10.9,18.6z M10.9,13c-1.3,0-2.3,1-2.3,2.3
+ s1,2.3,2.3,2.3s2.3-1,2.3-2.3S12.2,13,10.9,13z"/>
+ </g>
+</g>
+</svg>
diff --git a/assets/icons/versionControllerLockOpen.svg b/assets/icons/versionControllerLockOpen.svg
new file mode 100644
index 0000000..52e0b8b
--- /dev/null
+++ b/assets/icons/versionControllerLockOpen.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="version-controller-lock-open_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 25 24.1" style="enable-background:new 0 0 25 24.1;" xml:space="preserve">
+<g>
+ <path d="M10,8H9V5c0-2.2-1.8-4-4-4S1,2.8,1,5v3H0V5c0-2.8,2.2-5,5-5s5,2.2,5,5V8z"/>
+ <g id="Rounded_Rectangle_1267_1_">
+ <path d="M22.2,24.1H5.6c-1.5,0-2.8-1.3-2.8-2.8V10.7C2.9,9.2,4.2,8,5.6,8h16.6c1.5,0,2.8,1.3,2.8,2.8v10.5
+ C25,22.8,23.7,24.1,22.2,24.1z M5.6,9c-0.9,0-1.7,0.8-1.8,1.7v10.6c0,1,0.8,1.8,1.8,1.8h16.6c1,0,1.8-0.8,1.8-1.8V10.8
+ c0-1-0.8-1.8-1.8-1.8H5.6z"/>
+ </g>
+ <g>
+ <path d="M13.8,18.6c-1.8,0-3.3-1.5-3.3-3.3S12,12,13.8,12s3.3,1.5,3.3,3.3S15.6,18.6,13.8,18.6z M13.8,13c-1.3,0-2.3,1-2.3,2.3
+ s1,2.3,2.3,2.3s2.3-1,2.3-2.3S15.1,13,13.8,13z"/>
+ </g>
+</g>
+</svg>
diff --git a/assets/icons/versionControllerPermissions.svg b/assets/icons/versionControllerPermissions.svg
new file mode 100644
index 0000000..91ea9f4
--- /dev/null
+++ b/assets/icons/versionControllerPermissions.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="version-controller-permissions_icon" viewBox="0 0 31.11 20"><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M24.48,11.67a6,6,0,1,0-3.84,0,8.57,8.57,0,0,0-5.08,3.43,8.57,8.57,0,0,0-5.08-3.43A6,6,0,1,0,2.59,6a6,6,0,0,0,4,5.67A8.56,8.56,0,0,0,0,20H1a7.55,7.55,0,0,1,15.11,0h1a8.49,8.49,0,0,0-1-4,7.55,7.55,0,0,1,14,4h1A8.56,8.56,0,0,0,24.48,11.67ZM3.59,6a5,5,0,1,1,5,5A5,5,0,0,1,3.59,6Zm14,0a5,5,0,1,1,5,5A5,5,0,0,1,17.59,6Z"/></g></g></svg> \ No newline at end of file
diff --git a/assets/icons/versionControllerRevert.svg b/assets/icons/versionControllerRevert.svg
new file mode 100644
index 0000000..f9f02f9
--- /dev/null
+++ b/assets/icons/versionControllerRevert.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1"
+ id="version-controller-revert_icon" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 89 87"
+ style="enable-background:new 0 0 89 87;" xml:space="preserve">
+<g transform="translate(0,-952.36218)">
+ <path d="M45.8,952.4c-1,0-2,1-1.9,2.1c0,1,1,2,2.1,1.9c21.6,0,39,17.4,39,39s-17.4,39-39,39s-39-17.4-39-39
+ c0-9.6,4.5-19.4,10.5-26.5l1.5,11.8c0.1,1,1.2,1.9,2.3,1.8s1.9-1.2,1.8-2.3l-2-16c-0.1-1.1-1.2-1.9-2.3-1.8l-16.1,3
+ c-1.1,0.1-2,1.3-1.8,2.4c0.2,1.1,1.5,1.9,2.5,1.5l10.1-1.9C7.3,975,3,985.1,3,995.4c0,23.7,19.3,43,43,43s43-19.3,43-43
+ c0-23.7-19.3-43-43-43C45.9,952.4,45.9,952.4,45.8,952.4z M42.8,968.1c-1,0.1-1.8,1-1.8,2v28.2c0,1,1,2,2,2h21.8c1.1,0,2-0.9,2-2
+ s-1-2-2-2H45v-26.2C45,969,43.9,968,42.8,968.1z"/>
+</g>
+</svg>
diff --git a/assets/icons/versionControllerSave.svg b/assets/icons/versionControllerSave.svg
new file mode 100644
index 0000000..4a05425
--- /dev/null
+++ b/assets/icons/versionControllerSave.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="version-controller-save_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+ y="0px" viewBox="0 0 22 21" style="enable-background:new 0 0 22 21;" xml:space="preserve">
+<g>
+ <path d="M22,21H0V0h17.7L22,4.3V21z M1,20h20V4.7L17.3,1H1V20z"/>
+ <polygon points="17,8 4,8 4,0.5 5,0.5 5,7 16,7 16,0.5 17,0.5 "/>
+ <polygon points="17,20.5 16,20.5 16,14 5,14 5,20.5 4,20.5 4,13 17,13 "/>
+</g>
+</svg>
diff --git a/assets/icons/versionControllerSubmit.svg b/assets/icons/versionControllerSubmit.svg
new file mode 100644
index 0000000..9909ab3
--- /dev/null
+++ b/assets/icons/versionControllerSubmit.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="version-controller-submit_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+ y="0px" viewBox="0 0 21 21" style="enable-background:new 0 0 21 21;" xml:space="preserve">
+<g>
+ <path d="M10.5,21C4.7,21,0,16.3,0,10.5C0,4.7,4.7,0,10.5,0C16.3,0,21,4.7,21,10.5C21,16.3,16.3,21,10.5,21z M10.5,1
+ C5.3,1,1,5.3,1,10.5S5.3,20,10.5,20s9.5-4.3,9.5-9.5S15.7,1,10.5,1z"/>
+ <path id="Shape_637_copy" d="M9.1,12.9L5.8,9.6l-0.7,0.6l4,4l6.7-6.7l-0.7-0.6L9.1,12.9z"/>
+</g>
+</svg>
diff --git a/assets/icons/versionControllerSync.svg b/assets/icons/versionControllerSync.svg
new file mode 100644
index 0000000..dfd42d3
--- /dev/null
+++ b/assets/icons/versionControllerSync.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="version-controller-sync_icon" viewBox="0 0 27.11 20"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M13.72,19a9,9,0,0,1-9-9,8.9,8.9,0,0,1,.61-3.23L8.4,9.93l.71-.71L4.55,4.67,0,9.22l.71.71L4.55,6.08h0a9.82,9.82,0,0,0-.84,4A10,10,0,0,0,17.86,19.1l-.72-.72A9,9,0,0,1,13.72,19Z"/><path d="M26.41,10.07l-3.85,3.85h0a9.82,9.82,0,0,0,.84-4A10,10,0,0,0,9.25.9l.72.72A9,9,0,0,1,22.44,10a8.9,8.9,0,0,1-.61,3.23l-3.12-3.12-.71.71,4.55,4.55,4.55-4.55Z"/></g></g></svg> \ No newline at end of file
diff --git a/assets/icons/versionControllerUndo.svg b/assets/icons/versionControllerUndo.svg
new file mode 100644
index 0000000..8745f54
--- /dev/null
+++ b/assets/icons/versionControllerUndo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="version-controller-undo_icon" viewBox="0 0 20 20"><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M10,0A10,10,0,0,0,1,5.66V1H0V7H6V6H1.9a9,9,0,1,1-.72,6H.2A10,10,0,1,0,10,0Z"/></g></g></svg> \ No newline at end of file
diff --git a/assets/icons/viewModule.svg b/assets/icons/viewModule.svg
new file mode 100644
index 0000000..e121d40
--- /dev/null
+++ b/assets/icons/viewModule.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.37 20.39">
+ <title>viewModule</title>
+ <g>
+ <path class="a" d="M26.95,19.49H21.06a1.57,1.57,0,0,0-1.57,1.57V27a1.57,1.57,0,0,0,1.57,1.57h5.89A1.57,1.57,0,0,0,28.52,27V21.06A1.57,1.57,0,0,0,26.95,19.49ZM27.52,27a.57.57,0,0,1-.57.57H21.06a.57.57,0,0,1-.57-.57V21.06a.57.57,0,0,1,.57-.57h5.89a.57.57,0,0,1,.57.57Z" transform="translate(-8.15 -8.14)"/>
+ <path class="a" d="M26.95,8.14H21.06a1.57,1.57,0,0,0-1.57,1.57V15.6a1.57,1.57,0,0,0,1.57,1.57h5.89a1.57,1.57,0,0,0,1.57-1.57V9.71A1.57,1.57,0,0,0,26.95,8.14Zm.57,7.46a.57.57,0,0,1-.57.57H21.06a.57.57,0,0,1-.57-.57V9.71a.57.57,0,0,1,.57-.57h5.89a.57.57,0,0,1,.57.57Z" transform="translate(-8.15 -8.14)"/>
+ <path class="a" d="M15.61,19.49H9.72a1.57,1.57,0,0,0-1.57,1.57V27a1.57,1.57,0,0,0,1.57,1.57h5.89A1.57,1.57,0,0,0,17.18,27V21.06A1.57,1.57,0,0,0,15.61,19.49ZM16.18,27a.57.57,0,0,1-.57.57H9.72A.57.57,0,0,1,9.15,27V21.06a.57.57,0,0,1,.57-.57h5.89a.57.57,0,0,1,.57.57Z" transform="translate(-8.15 -8.14)"/>
+ <path class="a" d="M15.61,8.14H9.72A1.57,1.57,0,0,0,8.15,9.71V15.6a1.57,1.57,0,0,0,1.57,1.57h5.89a1.57,1.57,0,0,0,1.57-1.57V9.71A1.57,1.57,0,0,0,15.61,8.14Zm.57,7.46a.57.57,0,0,1-.57.57H9.72a.57.57,0,0,1-.57-.57V9.71a.57.57,0,0,1,.57-.57h5.89a.57.57,0,0,1,.57.57Z" transform="translate(-8.15 -8.14)"/>
+ </g>
+</svg>
diff --git a/assets/icons/vlm.svg b/assets/icons/vlm.svg
new file mode 100644
index 0000000..79b4625
--- /dev/null
+++ b/assets/icons/vlm.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 53"><title>vlm_new_icon</title><g id="Layer_2" data-name="Layer 2"><g id="vlm_icon" data-name="vlm icon"><path d="M41,2a2,2,0,0,1,2,2l.19,45a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2L1.81,4a2,2,0,0,1,2-2H41m-.15-2H4A4.2,4.2,0,0,0,0,4.24L.19,49a4,4,0,0,0,4,4H41a4,4,0,0,0,4-4L44.81,4a4,4,0,0,0-4-4Z"/><rect x="14" y="11" width="17" height="2"/><rect x="14" y="18" width="10" height="2"/><polygon points="20.56 38.85 13.87 33.14 15.16 31.62 20.39 36.08 29.08 26.63 30.55 27.98 20.56 38.85"/></g></g></svg> \ No newline at end of file
diff --git a/assets/icons/vsp.svg b/assets/icons/vsp.svg
new file mode 100644
index 0000000..344755c
--- /dev/null
+++ b/assets/icons/vsp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59.5 40" id="vsp_icon"><title>vsp_new_icon</title><g id="Layer_2" data-name="Layer 2"><g id="vlm_icon" data-name="vlm icon"><path d="M58.28,30.74c-1.49-1.82-3-2.7-4.67-2.74a8.5,8.5,0,0,0-16.22-2.44,6.93,6.93,0,0,0-4.06.66A7.23,7.23,0,0,0,36.42,40H53.5a6,6,0,0,0,6-6A5.18,5.18,0,0,0,58.28,30.74ZM53.5,38H36.42a5.25,5.25,0,0,1-5.21-5.91,5.32,5.32,0,0,1,3-4.06,5,5,0,0,1,2.21-.53,5.25,5.25,0,0,1,1.35.18l.92.24L39,27A6.5,6.5,0,0,1,51.67,29v1.3l1.17-.2c1-.17,2.17-.17,3.91,2a3.18,3.18,0,0,1,.76,2A4,4,0,0,1,53.5,38Z"/><path d="M49,0,4,.17A3.79,3.79,0,0,0,0,3.69V7.94H0v2H0V36.31C0,38.35,2,40,4.25,40l20.84-.08a1,1,0,0,0,0-1.92L4,38.08a1.89,1.89,0,0,1-2-1.76V10H51v7a1,1,0,0,0,2,0V3.53A3.79,3.79,0,0,0,49,0ZM2,8V3.76A1.89,1.89,0,0,1,4,2l45-.16a1.89,1.89,0,0,1,2,1.76V8Z"/></g></g></svg>
diff --git a/assets/icons/zip.svg b/assets/icons/zip.svg
new file mode 100644
index 0000000..51ce7fa
--- /dev/null
+++ b/assets/icons/zip.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 23"><title>zip</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M9.47,1l2.83,2.72L12.6,4H28V22H1V1H9.47m.4-1H0V23H29V3H13L9.88,0Z"/><path d="M11.65,16.61H6.25V15.9l4.17-6.32h-4V8.76h5.15v.71L7.37,15.78h4.29Z"/><path d="M14,16.61V8.76h.91v7.85Z"/><path d="M22.87,11a2.2,2.2,0,0,1-.81,1.83,3.68,3.68,0,0,1-2.33.64H18.8v3.09h-.91V8.76h2Q22.87,8.76,22.87,11ZM18.8,12.74h.82a3,3,0,0,0,1.76-.39,1.44,1.44,0,0,0,.54-1.26,1.36,1.36,0,0,0-.51-1.16,2.66,2.66,0,0,0-1.59-.38h-1Z"/></g></g></svg> \ No newline at end of file
diff --git a/assets/images/empty.txt b/assets/images/empty.txt
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/assets/images/empty.txt
diff --git a/assets/images/illustration.png b/assets/images/illustration.png
new file mode 100644
index 0000000..c0ff99a
--- /dev/null
+++ b/assets/images/illustration.png
Binary files differ
diff --git a/assets/images/logo_onap.png b/assets/images/logo_onap.png
new file mode 100644
index 0000000..c6f6857
--- /dev/null
+++ b/assets/images/logo_onap.png
Binary files differ
diff --git a/assets/images/logo_onap_2017.png b/assets/images/logo_onap_2017.png
new file mode 100644
index 0000000..c6f6857
--- /dev/null
+++ b/assets/images/logo_onap_2017.png
Binary files differ
diff --git a/assets/sdc-icons/Setting_24px.svg b/assets/sdc-icons/Setting_24px.svg
new file mode 100644
index 0000000..a893f22
--- /dev/null
+++ b/assets/sdc-icons/Setting_24px.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Setting_24px</title><path d="M19.58,10.51l-1.86-.31a6.37,6.37,0,0,0-.4-1l1.1-1.53a.5.5,0,0,0-.06-.65L17,5.64a.5.5,0,0,0-.65-.06l-1.53,1.1a6.37,6.37,0,0,0-1-.4l-.31-1.86A.5.5,0,0,0,13,4H11a.5.5,0,0,0-.49.42L10.2,6.28a6.37,6.37,0,0,0-1,.4L7.7,5.58a.5.5,0,0,0-.65.06L5.64,7.05a.5.5,0,0,0-.06.65l1.1,1.53a6.37,6.37,0,0,0-.4,1l-1.86.31A.5.5,0,0,0,4,11v2a.5.5,0,0,0,.42.49l1.86.31a6.37,6.37,0,0,0,.4,1L5.58,16.3a.5.5,0,0,0,.06.65l1.41,1.41a.5.5,0,0,0,.65.06l1.53-1.1a6.37,6.37,0,0,0,1,.4l.31,1.86A.5.5,0,0,0,11,20h2a.5.5,0,0,0,.49-.42l.31-1.86a6.37,6.37,0,0,0,1-.4l1.53,1.1a.5.5,0,0,0,.65-.06L18.36,17a.49.49,0,0,0,.06-.64l-1.1-1.54a6.37,6.37,0,0,0,.4-1l1.86-.31A.5.5,0,0,0,20,13V11A.5.5,0,0,0,19.58,10.51ZM19,12.58l-1.76.29a.51.51,0,0,0-.4.37,5,5,0,0,1-.54,1.3.52.52,0,0,0,0,.55l1,1.45-.82.82-1.45-1a.52.52,0,0,0-.55,0,5,5,0,0,1-1.3.54.51.51,0,0,0-.37.4L12.58,19H11.42l-.29-1.76a.51.51,0,0,0-.37-.4,5,5,0,0,1-1.3-.54.52.52,0,0,0-.55,0l-1.45,1-.82-.82,1-1.45a.52.52,0,0,0,0-.55,5,5,0,0,1-.54-1.3.51.51,0,0,0-.4-.37L5,12.58V11.42l1.76-.29a.51.51,0,0,0,.4-.37,5,5,0,0,1,.54-1.3.52.52,0,0,0,0-.55l-1-1.45.82-.82,1.45,1a.52.52,0,0,0,.55,0,5,5,0,0,1,1.3-.54.51.51,0,0,0,.37-.4L11.42,5h1.16l.29,1.76a.51.51,0,0,0,.37.4,5,5,0,0,1,1.3.54.52.52,0,0,0,.55,0l1.45-1,.82.82-1,1.45a.52.52,0,0,0,0,.55,5,5,0,0,1,.54,1.3.51.51,0,0,0,.4.37l1.76.29Z"/><path d="M12,9a3,3,0,1,0,3,3A3,3,0,0,0,12,9Zm0,5a2,2,0,1,1,2-2A2,2,0,0,1,12,14Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/Setting_60px.svg b/assets/sdc-icons/Setting_60px.svg
new file mode 100644
index 0000000..6a1a9dd
--- /dev/null
+++ b/assets/sdc-icons/Setting_60px.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Setting_60px</title><path d="M46.24,26.94l-4.08-1a13,13,0,0,0-.68-1.63l2.17-3.61a1,1,0,0,0-.15-1.22l-3-3a1,1,0,0,0-1.22-.15l-3.61,2.17a13,13,0,0,0-1.63-.68l-1-4.08a1,1,0,0,0-1-.76H27.91a1,1,0,0,0-1,.76l-1,4.08a13,13,0,0,0-1.63.68l-3.61-2.17a1,1,0,0,0-1.22.15l-3,3a1,1,0,0,0-.15,1.22l2.17,3.61a13,13,0,0,0-.68,1.63l-4.08,1a1,1,0,0,0-.76,1v4.18a1,1,0,0,0,.76,1l4.08,1a13,13,0,0,0,.68,1.63l-2.17,3.61a1,1,0,0,0,.15,1.22l3,3a1,1,0,0,0,1.22.15l3.61-2.17a13,13,0,0,0,1.63.68l1,4.08a1,1,0,0,0,1,.76h4.18a1,1,0,0,0,1-.76l1-4.08a13,13,0,0,0,1.63-.68l3.61,2.17a1,1,0,0,0,1.22-.15l3-3a1,1,0,0,0,.15-1.22l-2.17-3.61a13,13,0,0,0,.68-1.63l4.08-1a1,1,0,0,0,.76-1V27.91A1,1,0,0,0,46.24,26.94ZM45,31.31l-3.88,1a1,1,0,0,0-.72.7,9.77,9.77,0,0,1-.94,2.28,1,1,0,0,0,0,1.06v0l2,3.35-1.85,1.85-3.33-2,0,0a1,1,0,0,0-1.06,0A9.77,9.77,0,0,1,33,40.4a1,1,0,0,0-.7.72l-1,3.88H28.69l-1-3.88a1,1,0,0,0-.7-.72,9.77,9.77,0,0,1-2.28-.94,1,1,0,0,0-1.06,0h0l-3.35,2-1.85-1.85,2-3.33,0,0a1,1,0,0,0,0-1.06A9.77,9.77,0,0,1,19.6,33a1,1,0,0,0-.72-.7l-3.88-1V28.69l3.88-1a1,1,0,0,0,.72-.7,9.77,9.77,0,0,1,.94-2.28,1,1,0,0,0,0-1.06l0,0-2-3.33,1.85-1.85,3.33,2,0,0a1,1,0,0,0,1.06,0A9.77,9.77,0,0,1,27,19.6a1,1,0,0,0,.7-.72l1-3.88h2.62l1,3.88a1,1,0,0,0,.7.72,9.77,9.77,0,0,1,2.28.94,1,1,0,0,0,1.06,0h0l3.35-2,1.85,1.85-2,3.33,0,0a1,1,0,0,0,0,1.06A9.77,9.77,0,0,1,40.4,27a1,1,0,0,0,.72.7l3.88,1Z"/><path d="M30,23a7,7,0,1,0,7,7A7,7,0,0,0,30,23Zm0,12a5,5,0,1,1,5-5A5,5,0,0,1,30,35Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/common/README.md b/assets/sdc-icons/common/README.md
new file mode 100644
index 0000000..dc3e798
--- /dev/null
+++ b/assets/sdc-icons/common/README.md
@@ -0,0 +1,9 @@
+components folder contain icon that are not part of sdc-icon component.
+-Icon naming:
+------------------
+-
+-<name>-<type>-<o>
+-
+-name = if contains multiple words, use "_"
+-type = circle/square/triangle
+-o = outline (for all icons that have white background)
diff --git a/assets/sdc-icons/common/alert-triangle-o.svg b/assets/sdc-icons/common/alert-triangle-o.svg
new file mode 100644
index 0000000..c1d8d0a
--- /dev/null
+++ b/assets/sdc-icons/common/alert-triangle-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="alert-a" d="M20.5815,18.7997 C20.3815,18.9997 20.0815,19.0997 19.8815,19.0997 L2.8815,19.0997 C2.6815,19.0997 2.5815,19.0997 2.3815,18.9997 C1.8815,18.6997 1.7815,18.0997 1.9815,17.5997 L10.4815,3.4997 C10.5815,3.4007 10.6815,3.1997 10.7815,3.1997 C11.2815,2.9007 11.8815,3.0997 12.1815,3.4997 L20.6825,17.5997 C20.7815,17.6997 20.7815,17.9007 20.7815,18.0997 C20.8815,18.4007 20.6825,18.5997 20.5815,18.7997 M22.3815,16.5997 L13.9815,2.4007 C13.5815,1.6997 12.8815,1.1997 12.0815,0.9997 C11.2815,0.7997 10.4815,0.9007 9.7815,1.2997 C9.3815,1.4997 8.9815,1.9007 8.7815,2.2997 L0.3815,16.5997 C-0.4185,17.9997 0.0815,19.9007 1.4815,20.6997 C1.8815,20.9997 2.3815,21.0997 2.8815,21.0997 L19.8815,21.0997 C20.6825,21.0997 21.4815,20.7997 21.9815,20.1997 C22.5815,19.5997 22.8815,18.9007 22.8815,18.0997 C22.7815,17.5997 22.6825,16.9997 22.3815,16.5997 M11,7 C10.4,7 10,7.4 10,8 L10,12 C10,12.601 10.4,13 11,13 C11.6,13 12,12.601 12,12 L12,8 C12,7.4 11.6,7 11,7 M10.3,15.3 C10.1,15.499 10,15.699 10,15.999 C10,16.3 10.1,16.499 10.3,16.699 C10.5,16.9 10.7,16.999 11,16.999 C11.3,16.999 11.5,16.9 11.7,16.699 C11.9,16.499 12,16.199 12,15.999 C12,15.8 11.9,15.499 11.7,15.3 C11.3,14.9 10.7,14.9 10.3,15.3"/>
+</svg>
diff --git a/assets/sdc-icons/common/alert-triangle.svg b/assets/sdc-icons/common/alert-triangle.svg
new file mode 100644
index 0000000..ed3f6f8
--- /dev/null
+++ b/assets/sdc-icons/common/alert-triangle.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <g fill-rule="evenodd" transform="translate(1 1)">
+ <path id="alert-copy-a" d="M22.3815,16.5997 L13.9815,2.4007 C13.5815,1.6997 12.8815,1.1997 12.0815,0.9997 C11.2815,0.7997 10.4815,0.9007 9.7815,1.2997 C9.3815,1.4997 8.9815,1.9007 8.7815,2.2997 L0.3815,16.5997 C-0.4185,17.9997 0.0815,19.9007 1.4815,20.6997 C1.8815,20.9997 2.3815,21.0997 2.8815,21.0997 L19.8815,21.0997 C20.6825,21.0997 21.4815,20.7997 21.9815,20.1997 C22.5815,19.5997 22.8815,18.9007 22.8815,18.0997 C22.7815,17.5997 22.6825,16.9997 22.3815,16.5997 M11,7 C10.4,7 10,7.4 10,8 L10,12 C10,12.601 10.4,13 11,13 C11.6,13 12,12.601 12,12 L12,8 C12,7.4 11.6,7 11,7 M10.3,15.3 C10.1,15.499 10,15.699 10,15.999 C10,16.3 10.1,16.499 10.3,16.699 C10.5,16.9 10.7,16.999 11,16.999 C11.3,16.999 11.5,16.9 11.7,16.699 C11.9,16.499 12,16.199 12,15.999 C12,15.8 11.9,15.499 11.7,15.3 C11.3,14.9 10.7,14.9 10.3,15.3"/>
+ </g>
+</svg>
diff --git a/assets/sdc-icons/common/api-o.svg b/assets/sdc-icons/common/api-o.svg
new file mode 100644
index 0000000..169630a
--- /dev/null
+++ b/assets/sdc-icons/common/api-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="api-a" d="M18,17 C18,17.6 17.6,18 17,18 L3,18 C2.4,18 2,17.6 2,17 L2,3 C2,2.4 2.4,2 3,2 L17,2 C17.6,2 18,2.4 18,3 L18,17 Z M17,0 L3,0 C1.3,0 0,1.3 0,3 L0,17 C0,18.7 1.3,20 3,20 L17,20 C18.7,20 20,18.7 20,17 L20,3 C20,1.3 18.7,0 17,0 Z M16.707,9.293 L12.707,5.293 C12.316,4.902 11.684,4.902 11.293,5.293 C10.902,5.684 10.902,6.316 11.293,6.707 L14.586,10 L11.293,13.293 C10.902,13.684 10.902,14.316 11.293,14.707 C11.488,14.902 11.744,15 12,15 C12.256,15 12.512,14.902 12.707,14.707 L16.707,10.707 C17.098,10.316 17.098,9.684 16.707,9.293 M3.293,9.293 L7.293,5.293 C7.684,4.902 8.316,4.902 8.707,5.293 C9.098,5.684 9.098,6.316 8.707,6.707 L5.414,10 L8.707,13.293 C9.098,13.684 9.098,14.316 8.707,14.707 C8.512,14.902 8.256,15 8,15 C7.744,15 7.488,14.902 7.293,14.707 L3.293,10.707 C2.902,10.316 2.902,9.684 3.293,9.293"/>
+</svg>
diff --git a/assets/sdc-icons/common/arrow2-right-child.svg b/assets/sdc-icons/common/arrow2-right-child.svg
new file mode 100644
index 0000000..0123a82
--- /dev/null
+++ b/assets/sdc-icons/common/arrow2-right-child.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <path d="M22.9435415,14.3344739 C23.0188195,14.1839179 23.0188195,13.9580838 22.9435415,13.7322498 C22.8682635,13.6569718 22.8682635,13.5816938 22.7929855,13.5064157 L19.0290847,9.74251497 C18.7279726,9.44140291 18.2763045,9.44140291 17.9751925,9.74251497 C17.6740804,10.043627 17.6740804,10.4952951 17.9751925,10.7964072 L20.459367,13.2805817 L4.76390077,13.2805817 C3.48417451,13.2805817 2.50556031,12.3019675 2.50556031,11.0222412 L2.50556031,5.75278015 C2.50556031,5.30111206 2.20444825,5 1.75278015,5 C1.30111206,5 1,5.30111206 1,5.75278015 L1,11.0222412 C1,13.1300257 2.65611634,14.786142 4.76390077,14.786142 L20.459367,14.786142 L17.9751925,17.2703165 C17.6740804,17.5714286 17.6740804,18.0230967 17.9751925,18.3242087 C18.1257485,18.4747648 18.3515825,18.5500428 18.5021386,18.5500428 C18.6526946,18.5500428 18.8785287,18.4747648 19.0290847,18.3242087 L22.7929855,14.560308 C22.8682635,14.4850299 22.9435415,14.4097519 22.9435415,14.3344739 Z"/>
+</svg>
diff --git a/assets/sdc-icons/common/arrow2-right.svg b/assets/sdc-icons/common/arrow2-right.svg
new file mode 100644
index 0000000..b8b808a
--- /dev/null
+++ b/assets/sdc-icons/common/arrow2-right.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <path d="M22.9435415,14.3344739 C23.0188195,14.1839179 23.0188195,13.9580838 22.9435415,13.7322498 C22.8682635,13.6569718 22.8682635,13.5816938 22.7929855,13.5064157 L19.0290847,9.74251497 C18.7279726,9.44140291 18.2763045,9.44140291 17.9751925,9.74251497 C17.6740804,10.043627 17.6740804,10.4952951 17.9751925,10.7964072 L20.459367,13.2805817 L2.06347656,13.2805817 C1.51468328,13.2805817 1.37585449,14.560308 2.06347656,14.786142 L20.459367,14.786142 L17.9751925,17.2703165 C17.6740804,17.5714286 17.6740804,18.0230967 17.9751925,18.3242087 C18.1257485,18.4747648 18.3515825,18.5500428 18.5021386,18.5500428 C18.6526946,18.5500428 18.8785287,18.4747648 19.0290847,18.3242087 L22.7929855,14.560308 C22.8682635,14.4850299 22.9435415,14.4097519 22.9435415,14.3344739 Z"/>
+</svg>
diff --git a/assets/sdc-icons/common/arrow3-down-o.svg b/assets/sdc-icons/common/arrow3-down-o.svg
new file mode 100644
index 0000000..401a7f8
--- /dev/null
+++ b/assets/sdc-icons/common/arrow3-down-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="filterdown-a" d="M11.29925,18.7 C11.40025,18.8 11.49925,18.9 11.59925,18.9 C11.69925,19 11.90025,19 11.99925,19 C12.09925,19 12.29925,19 12.40025,18.9 C12.49925,18.8 12.59925,18.8 12.69925,18.7 L16.69925,14.7 C17.09925,14.3 17.09925,13.7 16.69925,13.3 C16.29925,12.9 15.69925,12.9 15.29925,13.3 L12.99925,15.599 L12.99925,4 C12.99925,3.4 12.59925,3 11.99925,3 C11.40025,3 10.99925,3.4 10.99925,4 L10.99925,15.599 L8.69925,13.3 C8.29925,12.9 7.69925,12.9 7.29925,13.3 C6.90025,13.7 6.90025,14.3 7.29925,14.7 L11.29925,18.7 Z"/>
+</svg>
diff --git a/assets/sdc-icons/common/arrow3-up-o.svg b/assets/sdc-icons/common/arrow3-up-o.svg
new file mode 100644
index 0000000..331634f
--- /dev/null
+++ b/assets/sdc-icons/common/arrow3-up-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="filterup-a" d="M11.29925,18.7 C11.40025,18.8 11.49925,18.9 11.59925,18.9 C11.69925,19 11.90025,19 11.99925,19 C12.09925,19 12.29925,19 12.40025,18.9 C12.49925,18.8 12.59925,18.8 12.69925,18.7 L16.69925,14.7 C17.09925,14.3 17.09925,13.7 16.69925,13.3 C16.29925,12.9 15.69925,12.9 15.29925,13.3 L12.99925,15.599 L12.99925,4 C12.99925,3.4 12.59925,3 11.99925,3 C11.40025,3 10.99925,3.4 10.99925,4 L10.99925,15.599 L8.69925,13.3 C8.29925,12.9 7.69925,12.9 7.29925,13.3 C6.90025,13.7 6.90025,14.3 7.29925,14.7 L11.29925,18.7 Z"/>
+</svg>
diff --git a/assets/sdc-icons/common/attachment.svg b/assets/sdc-icons/common/attachment.svg
new file mode 100644
index 0000000..a1d7768
--- /dev/null
+++ b/assets/sdc-icons/common/attachment.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="attach-a" d="M20.67425,9.292 C20.28125,8.92 19.69125,8.92 19.29825,9.292 L10.25125,17.841 C8.28425,19.699 5.23625,19.699 3.27025,17.841 C1.30325,15.982 1.30325,13.102 3.27025,11.243 L12.31725,2.694 C13.39825,1.673 15.36425,1.673 16.44625,2.694 C17.62625,3.81 17.62625,5.575 16.44625,6.598 L7.40025,15.146 C7.00625,15.518 6.41625,15.518 6.02325,15.146 C5.92525,15.053 5.82625,14.867 5.82625,14.589 C5.82625,14.31 5.92525,14.124 6.12125,13.938 L14.48025,6.04 C14.87325,5.668 14.87325,5.11 14.48025,4.739 C14.08625,4.367 13.49625,4.367 13.10325,4.739 L4.74425,12.637 C4.15425,13.102 3.86025,13.845 3.86025,14.589 C3.86025,15.332 4.15425,16.075 4.74425,16.54 C5.92525,17.655 7.79325,17.655 8.87425,16.54 L17.92125,7.991 C19.88825,6.133 19.88825,3.252 17.92125,1.394 C17.03625,0.558 15.75825,0 14.48025,0 C13.20125,0 11.92325,0.465 11.03825,1.394 L1.99125,9.942 C-0.66375,12.451 -0.66375,16.633 1.99125,19.142 C3.36825,20.442 5.13825,21 6.90825,21 C8.67825,21 10.44725,20.35 11.82425,19.142 L20.87125,10.593 C21.06825,10.314 21.06825,9.664 20.67425,9.292"/>
+</svg>
diff --git a/assets/sdc-icons/common/bedge.svg b/assets/sdc-icons/common/bedge.svg
new file mode 100644
index 0000000..f43ac9b
--- /dev/null
+++ b/assets/sdc-icons/common/bedge.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30 20">
+ <g fill-rule="evenodd">
+ <rect id="bedge-a" width="30" height="20" rx="8"/>
+ </g>
+</svg>
diff --git a/assets/sdc-icons/common/browse.svg b/assets/sdc-icons/common/browse.svg
new file mode 100644
index 0000000..c63620f
--- /dev/null
+++ b/assets/sdc-icons/common/browse.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="browse-a" d="M1.55555556,3.11111111 C0.696445945,3.11111111 0,2.41466517 0,1.55555556 C0,0.696445945 0.696445945,0 1.55555556,0 C2.41466517,0 3.11111111,0.696445945 3.11111111,1.55555556 C3.11111111,2.41466517 2.41466517,3.11111111 1.55555556,3.11111111 Z M12.4444444,3.11111111 C11.5853348,3.11111111 10.8888889,2.41466517 10.8888889,1.55555556 C10.8888889,0.696445945 11.5853348,0 12.4444444,0 C13.3035541,0 14,0.696445945 14,1.55555556 C14,2.41466517 13.3035541,3.11111111 12.4444444,3.11111111 Z M7,3.11111111 C6.14089039,3.11111111 5.44444444,2.41466517 5.44444444,1.55555556 C5.44444444,0.696445945 6.14089039,0 7,0 C7.85910961,0 8.55555556,0.696445945 8.55555556,1.55555556 C8.55555556,2.41466517 7.85910961,3.11111111 7,3.11111111 Z"/>
+</svg>
diff --git a/assets/sdc-icons/common/calendar-o.svg b/assets/sdc-icons/common/calendar-o.svg
new file mode 100644
index 0000000..93f8719
--- /dev/null
+++ b/assets/sdc-icons/common/calendar-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="calendar-a" d="M17,20 L3,20 C2.4,20 2,19.6 2,19 L2,10 L18,10 L18,19 C18,19.6 17.6,20 17,20 M3,4 L5,4 L5,5 C5,5.6 5.4,6 6,6 C6.6,6 7,5.6 7,5 L7,4 L13,4 L13,5 C13,5.6 13.4,6 14,6 C14.6,6 15,5.6 15,5 L15,4 L17,4 C17.6,4 18,4.4 18,5 L18,8 L2,8 L2,5 C2,4.4 2.4,4 3,4 M17,2 L15,2 L15,1 C15,0.4 14.6,0 14,0 C13.4,0 13,0.4 13,1 L13,2 L7,2 L7,1 C7,0.4 6.6,0 6,0 C5.4,0 5,0.4 5,1 L5,2 L3,2 C1.3,2 0,3.3 0,5 L0,19 C0,20.7 1.3,22 3,22 L17,22 C18.7,22 20,20.7 20,19 L20,5 C20,3.3 18.7,2 17,2"/>
+</svg>
diff --git a/assets/sdc-icons/common/camera-o.svg b/assets/sdc-icons/common/camera-o.svg
new file mode 100644
index 0000000..86f1f13
--- /dev/null
+++ b/assets/sdc-icons/common/camera-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="camera-a" d="M22,17 C22,17.6 21.6,18 21,18 L3,18 C2.4,18 2,17.6 2,17 L2,6 C2,5.4 2.4,5 3,5 L7,5 C7.3,5 7.6,4.8 7.8,4.6 L9.5,2 L14.4,2 L16.1,4.6 C16.4,4.8 16.7,5 17,5 L21,5 C21.6,5 22,5.4 22,6 L22,17 Z M21,3 L17.5,3 L15.8,0.4 C15.6,0.2 15.3,0 15,0 L9,0 C8.7,0 8.4,0.2 8.2,0.4 L6.5,3 L3,3 C1.3,3 0,4.3 0,6 L0,17 C0,18.7 1.3,20 3,20 L21,20 C22.7,20 24,18.7 24,17 L24,6 C24,4.3 22.7,3 21,3 Z M12,15 C10.3,15 9,13.7 9,12 C9,10.3 10.3,9 12,9 C13.7,9 15,10.3 15,12 C15,13.7 13.7,15 12,15 M12,7 C9.2,7 7,9.2 7,12 C7,14.8 9.2,17 12,17 C14.8,17 17,14.8 17,12 C17,9.2 14.8,7 12,7"/>
+</svg>
diff --git a/assets/sdc-icons/common/caret1-down-o.svg b/assets/sdc-icons/common/caret1-down-o.svg
new file mode 100644
index 0000000..724152a
--- /dev/null
+++ b/assets/sdc-icons/common/caret1-down-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 14 14">
+ <path id="chevron-a" d="M5.2998,6.7002 C5.4998,6.9002 5.7998,7.0002 5.9998,7.0002 C6.1998,7.0002 6.4998,6.9002 6.6998,6.7002 L11.6998,1.7002 C12.0998,1.3002 12.0998,0.7002 11.6998,0.3002 C11.2998,-0.0998 10.6998,-0.0998 10.2998,0.3002 L5.9998,4.6002 L1.6998,0.3002 C1.2998,-0.0998 0.6998,-0.0998 0.2998,0.3002 C-0.1002,0.7002 -0.1002,1.3002 0.2998,1.7002 L5.2998,6.7002 Z"/>
+</svg>
diff --git a/assets/sdc-icons/common/caret2-right-circle-o.svg b/assets/sdc-icons/common/caret2-right-circle-o.svg
new file mode 100644
index 0000000..2715dad
--- /dev/null
+++ b/assets/sdc-icons/common/caret2-right-circle-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <path fill-rule="evenodd" d="M10.7522453,15.1960146 C10.5111563,15.4453129 10.5111563,15.8494423 10.7522453,16.0987406 C10.9933343,16.3480389 11.384156,16.3480389 11.625245,16.0987406 L15.1525166,12.451363 C15.3936056,12.2020647 15.3936056,11.7979353 15.1525166,11.548637 L11.625245,7.90125941 C11.384156,7.65196115 10.9933343,7.65196115 10.7522453,7.90125941 C10.5111563,8.15055767 10.5111563,8.55468711 10.7522453,8.80398537 L13.8447807,12.0018237 L10.7522453,15.1960146 Z M12,21 C7,21 3,17 3,12 C3,7 7,3 12,3 C17,3 21,7 21,12 C21,17 17,21 12,21 M12,1 C5.9,1 1,5.9 1,12 C1,18.1 5.9,23 12,23 C18.1,23 23,18.1 23,12 C23,5.9 18.1,1 12,1"/>
+</svg>
diff --git a/assets/sdc-icons/common/caret2-right-circle.svg b/assets/sdc-icons/common/caret2-right-circle.svg
new file mode 100644
index 0000000..e585c1d
--- /dev/null
+++ b/assets/sdc-icons/common/caret2-right-circle.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <circle cx="10" cy="10" r="10" fill="#000"/>
+ <path fill="#FFF" d="M8.75224533,13.1960146 C8.51115632,13.4453129 8.51115632,13.8494423 8.75224533,14.0987406 C8.99333434,14.3480389 9.38415603,14.3480389 9.62524504,14.0987406 L13.1525166,10.451363 C13.3936056,10.2020647 13.3936056,9.79793528 13.1525166,9.54863702 L9.62524504,5.90125941 C9.38415603,5.65196115 8.99333434,5.65196115 8.75224533,5.90125941 C8.51115632,6.15055767 8.51115632,6.55468711 8.75224533,6.80398537 L11.8447807,10.0018237 L8.75224533,13.1960146 Z"/>
+</svg>
diff --git a/assets/sdc-icons/common/caret3-right.svg b/assets/sdc-icons/common/caret3-right.svg
new file mode 100644
index 0000000..1eefc47
--- /dev/null
+++ b/assets/sdc-icons/common/caret3-right.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
+ <polygon fill-rule="evenodd" points="10 7 5 12 5 2"/>
+</svg>
diff --git a/assets/sdc-icons/common/close.svg b/assets/sdc-icons/common/close.svg
new file mode 100644
index 0000000..3c884d2
--- /dev/null
+++ b/assets/sdc-icons/common/close.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/>
+</svg>
diff --git a/assets/sdc-icons/common/commit-o.svg b/assets/sdc-icons/common/commit-o.svg
new file mode 100644
index 0000000..e71c18e
--- /dev/null
+++ b/assets/sdc-icons/common/commit-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="commit-a" d="M19.0020067,16.993 C11.0730067,16.966 11.0170067,6.35 11.0180067,5.894 L11.0180067,3.389 L13.3420067,5.67 C13.5370067,5.862 13.7890067,5.957 14.0420067,5.957 C14.3030067,5.957 14.5620067,5.856 14.7590067,5.656 C15.1450067,5.26 15.1390067,4.624 14.7430067,4.237 L10.7160067,0.286 C10.7080067,0.279 10.6970067,0.277 10.6890067,0.269 C10.6060067,0.192 10.5130067,0.124 10.4030067,0.078 C10.3980067,0.076 10.3950067,0.076 10.3910067,0.075 C10.3740067,0.068 10.3570067,0.068 10.3410067,0.062 C10.2440067,0.029 10.1470067,0.011 10.0480067,0.008 C10.0300067,0.008 10.0140067,0.002 9.99600669,0.002 C9.99200669,0.002 9.98800669,0 9.98400669,0 C9.95900669,0 9.93800669,0.013 9.91300669,0.014 C9.85200669,0.021 9.79300669,0.033 9.73300669,0.051 C9.52300669,0.106 9.34600669,0.221 9.21400669,0.386 L5.32800669,4.217 C4.93400669,4.606 4.92800669,5.241 5.31600669,5.637 C5.70400669,6.031 6.33800669,6.036 6.73200669,5.648 L8.98200669,3.429 L8.98200669,5.899 C8.98300669,6.35 8.92700669,16.966 0.998006685,16.993 C0.445006685,16.995 -0.00199331469,17.446 6.68530859e-06,18 C0.00200668531,18.553 0.450006685,19 1.00200669,19 L1.00600669,19 C3.51500669,18.991 5.62200669,18.142 7.27100669,16.477 C8.60300669,15.131 9.45200669,13.422 10.0000067,11.771 C10.5490067,13.422 11.3980067,15.131 12.7300067,16.477 C14.3780067,18.142 16.4850067,18.991 18.9940067,19 L18.9980067,19 C19.5500067,19 19.9980067,18.553 20.0000067,18 C20.0020067,17.446 19.5550067,16.995 19.0020067,16.993"/>
+</svg>
diff --git a/assets/sdc-icons/common/composition-o.svg b/assets/sdc-icons/common/composition-o.svg
new file mode 100644
index 0000000..5648cda
--- /dev/null
+++ b/assets/sdc-icons/common/composition-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="composition-a" d="M17,18.05 C16.448,18.05 16,17.602 16,17.05 C16,16.498 16.448,16.05 17,16.05 C17.552,16.05 18,16.498 18,17.05 C18,17.602 17.552,18.05 17,18.05 M3,18.05 C2.448,18.05 2,17.602 2,17.05 C2,16.498 2.448,16.05 3,16.05 C3.552,16.05 4,16.498 4,17.05 C4,17.602 3.552,18.05 3,18.05 M3,2.05 C3.552,2.05 4,2.498 4,3.05 C4,3.602 3.552,4.05 3,4.05 C2.448,4.05 2,3.602 2,3.05 C2,2.498 2.448,2.05 3,2.05 M10,9.05 C10.552,9.05 11,9.498 11,10.05 C11,10.602 10.552,11.05 10,11.05 C9.448,11.05 9,10.602 9,10.05 C9,9.498 9.448,9.05 10,9.05 M17,14.05 C15.695,14.05 14.597,14.888 14.184,16.05 L5.816,16.05 C5.515,15.201 4.849,14.535 4,14.234 L4,11.05 L7.184,11.05 C7.597,12.212 8.695,13.05 10,13.05 C11.657,13.05 13,11.707 13,10.05 C13,8.393 11.657,7.05 10,7.05 C8.695,7.05 7.597,7.888 7.184,9.05 L4,9.05 L4,5.866 C5.162,5.453 6,4.355 6,3.05 C6,1.393 4.657,0.05 3,0.05 C1.343,0.05 0,1.393 0,3.05 C0,4.355 0.838,5.453 2,5.866 L2,14.234 C0.838,14.647 0,15.745 0,17.05 C0,18.707 1.343,20.05 3,20.05 C4.305,20.05 5.403,19.212 5.816,18.05 L14.184,18.05 C14.597,19.212 15.695,20.05 17,20.05 C18.657,20.05 20,18.707 20,17.05 C20,15.393 18.657,14.05 17,14.05"/>
+</svg>
diff --git a/assets/sdc-icons/common/copy-o.svg b/assets/sdc-icons/common/copy-o.svg
new file mode 100644
index 0000000..eeee9aa
--- /dev/null
+++ b/assets/sdc-icons/common/copy-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="copy-a" d="M2,19 C2,19.6 2.4,20 3,20 L12,20 C12.6,20 13,19.6 13,19 L13,10 C13,9.4 12.6,9 12,9 L3,9 C2.4,9 2,9.4 2,10 L2,19 Z M3,7 L12,7 C13.7,7 15,8.3 15,10 L15,19 C15,20.7 13.7,22 12,22 L3,22 C1.3,22 0,20.7 0,19 L0,10 C0,8.3 1.3,7 3,7 Z M18,13 L19,13 C19.6,13 20,12.6 20,12 L20,3 C20,2.4 19.6,2 19,2 L10,2 C9.4,2 9,2.4 9,3 L9,4 C9,4.6 8.6,5 8,5 C7.4,5 7,4.6 7,4 L7,3 C7,1.3 8.3,0 10,0 L19,0 C20.7,0 22,1.3 22,3 L22,12 C22,13.7 20.7,15 19,15 L18,15 C17.4,15 17,14.6 17,14 C17,13.4 17.4,13 18,13 Z"/>
+</svg>
diff --git a/assets/sdc-icons/common/deployment-artifacts-o.svg b/assets/sdc-icons/common/deployment-artifacts-o.svg
new file mode 100644
index 0000000..e5091cd
--- /dev/null
+++ b/assets/sdc-icons/common/deployment-artifacts-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="deployment_artifacts-a" d="M18,17 C18,17.6 17.6,18 17,18 L3,18 C2.4,18 2,17.6 2,17 L2,3 C2,2.4 2.4,2 3,2 L17,2 C17.6,2 18,2.4 18,3 L18,17 Z M17,0 L3,0 C1.3,0 0,1.3 0,3 L0,17 C0,18.7 1.3,20 3,20 L17,20 C18.7,20 20,18.7 20,17 L20,3 C20,1.3 18.7,0 17,0 Z M5,14 C5,13.448 5.448,13 6,13 C6.552,13 7,13.448 7,14 C7,14.552 6.552,15 6,15 C5.448,15 5,14.552 5,14 M10,5 C10.552,5 11,5.448 11,6 C11,6.552 10.552,7 10,7 C9.448,7 9,6.552 9,6 C9,5.448 9.448,5 10,5 M15,14 C15,14.552 14.552,15 14,15 C13.448,15 13,14.552 13,14 C13,13.448 13.448,13 14,13 C14.552,13 15,13.448 15,14 M7.513,11.423 L9.064,8.836 C9.36,8.935 9.671,9 10,9 C10.159,9 10.312,8.977 10.465,8.953 L12.367,11.488 C11.82,11.845 11.406,12.375 11.184,13 L8.816,13 C8.579,12.331 8.115,11.777 7.513,11.423 M8.816,15 L11.184,15 C11.597,16.162 12.695,17 14,17 C15.657,17 17,15.657 17,14 C17,12.528 15.938,11.31 14.54,11.055 L12.236,7.982 C12.706,7.453 13,6.764 13,6 C13,4.343 11.657,3 10,3 C8.343,3 7,4.343 7,6 C7,6.591 7.177,7.139 7.472,7.603 L5.397,11.061 C4.029,11.34 3,12.55 3,14 C3,15.657 4.343,17 6,17 C7.305,17 8.403,16.162 8.816,15"/>
+</svg>
diff --git a/assets/sdc-icons/common/description-o.svg b/assets/sdc-icons/common/description-o.svg
new file mode 100644
index 0000000..d4e4345
--- /dev/null
+++ b/assets/sdc-icons/common/description-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="description-a" d="M10,9 C10.6,9 11,9.4 11,10 L11,14 C11,14.601 10.6,15 10,15 C9.4,15 9,14.601 9,14 L9,10 C9,9.4 9.4,9 10,9 Z M9.3,5.29925 C9.7,4.90025 10.3,4.90025 10.7,5.29925 C10.901,5.49925 11,5.69925 11,5.99925 C11,6.29925 10.901,6.49925 10.7,6.69925 C10.5,6.90025 10.3,6.99925 10,6.99925 C9.7,6.99925 9.5,6.90025 9.3,6.69925 C9.1,6.49925 9,6.29925 9,5.99925 C9,5.69925 9.1,5.49925 9.3,5.29925 Z M18,17 C18,17.6 17.6,18 17,18 L3,18 C2.4,18 2,17.6 2,17 L2,3 C2,2.4 2.4,2 3,2 L17,2 C17.6,2 18,2.4 18,3 L18,17 Z M17,0 L3,0 C1.3,0 0,1.3 0,3 L0,17 C0,18.7 1.3,20 3,20 L17,20 C18.7,20 20,18.7 20,17 L20,3 C20,1.3 18.7,0 17,0 Z"/>
+</svg>
diff --git a/assets/sdc-icons/common/distributed.svg b/assets/sdc-icons/common/distributed.svg
new file mode 100644
index 0000000..956c51f
--- /dev/null
+++ b/assets/sdc-icons/common/distributed.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="distributed-a" d="M18.5,13 C17.672,13 17,12.329 17,11.5 C17,10.671 17.672,10 18.5,10 C19.328,10 20,10.671 20,11.5 C20,12.329 19.328,13 18.5,13 M16.5,18 C15.672,18 15,17.329 15,16.5 C15,15.671 15.672,15 16.5,15 C17.328,15 18,15.671 18,16.5 C18,17.329 17.328,18 16.5,18 M11.5,20 C10.672,20 10,19.329 10,18.5 C10,17.671 10.672,17 11.5,17 C12.328,17 13,17.671 13,18.5 C13,19.329 12.328,20 11.5,20 M16.5,5 C17.328,5 18,5.671 18,6.5 C18,7.329 17.328,8 16.5,8 C15.672,8 15,7.329 15,6.5 C15,5.671 15.672,5 16.5,5 M6.5,18 C5.672,18 5,17.329 5,16.5 C5,15.671 5.672,15 6.5,15 C7.328,15 8,15.671 8,16.5 C8,17.329 7.328,18 6.5,18 M11,0 C8.061,0 10.968,6.138 9,8 C6.884,10.001 0,7.84 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0"/>
+</svg>
diff --git a/assets/sdc-icons/common/download-o.svg b/assets/sdc-icons/common/download-o.svg
new file mode 100644
index 0000000..f54dba7
--- /dev/null
+++ b/assets/sdc-icons/common/download-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="download-a" d="M19,15 C19.6,15 20,15.4 20,16 L20,19 C20,20.7 18.7,22 17,22 L3,22 C1.3,22 0,20.7 0,19 L0,16 C0,15.4 0.4,15 1,15 C1.6,15 2,15.4 2,16 L2,19 C2,19.6 2.4,20 3,20 L17,20 C17.6,20 18,19.6 18,19 L18,16 C18,15.4 18.4,15 19,15 Z M9.29925,15.7 L5.29925,11.7 C4.90025,11.3 4.90025,10.7 5.29925,10.3 C5.69925,9.9 6.29925,9.9 6.69925,10.3 L8.99925,12.599 L8.99925,1 C8.99925,0.4 9.40025,0 9.99925,0 C10.59925,0 10.99925,0.4 10.99925,1 L10.99925,12.599 L13.29925,10.3 C13.69925,9.9 14.29925,9.9 14.69925,10.3 C15.09925,10.7 15.09925,11.3 14.69925,11.7 L10.69925,15.7 C10.59925,15.8 10.49925,15.8 10.40025,15.9 C10.29925,16 10.09925,16 9.99925,16 C9.90025,16 9.69925,16 9.59925,15.9 C9.49925,15.9 9.40025,15.8 9.29925,15.7 Z"/>
+</svg>
diff --git a/assets/sdc-icons/common/edit-file-o.svg b/assets/sdc-icons/common/edit-file-o.svg
new file mode 100644
index 0000000..9f17daa
--- /dev/null
+++ b/assets/sdc-icons/common/edit-file-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="edit_file-a" d="M19,12.7001 C19.6,12.7001 20,13.0991 20,13.7001 L20,19.0001 C20,20.7001 18.7,22.0001 17,22.0001 L3,22.0001 C1.3,22.0001 0,20.7001 0,19.0001 L0,5.0001 C0,3.3001 1.3,2.0001 3,2.0001 L8.3,2.0001 C8.9,2.0001 9.3,2.4001 9.3,3.0001 C9.3,3.5991 8.9,4.0001 8.3,4.0001 L3,4.0001 C2.4,4.0001 2,4.4001 2,5.0001 L2,19.0001 C2,19.5991 2.4,20.0001 3,20.0001 L17,20.0001 C17.6,20.0001 18,19.5991 18,19.0001 L18,13.7001 C18,13.0991 18.4,12.7001 19,12.7001 Z M10.5996,13.9999 L7.9996,13.9999 L7.9996,11.3999 L16.9996,2.3999 L19.5996,4.9999 L10.5996,13.9999 Z M21.7006,4.2999 L17.7006,0.2999 C17.2996,-0.1001 16.7006,-0.1001 16.2996,0.2999 L6.2996,10.2999 C6.0996,10.4999 5.9996,10.6999 5.9996,10.9999 L5.9996,14.9999 C5.9996,15.5999 6.4006,15.9999 6.9996,15.9999 L10.9996,15.9999 C11.2996,15.9999 11.4996,15.8999 11.7006,15.6999 L21.7006,5.6999 C22.0996,5.2999 22.0996,4.6999 21.7006,4.2999 Z"/>
+</svg>
diff --git a/assets/sdc-icons/common/edit-o.svg b/assets/sdc-icons/common/edit-o.svg
new file mode 100644
index 0000000..bfa434e
--- /dev/null
+++ b/assets/sdc-icons/common/edit-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="edit-a" d="M2,12.3999 L12,2.3999 L14.6,4.9999 L4.6,14.9999 L2,14.9999 L2,12.3999 Z M1,16.9999 C0.4,16.9999 0,16.5999 0,15.9999 L0,11.9999 C0,11.6999 0.1,11.4999 0.3,11.2999 L11.3,0.2999 C11.7,-0.1001 12.3,-0.1001 12.7,0.2999 L16.7,4.2999 C17.1,4.6999 17.1,5.2999 16.7,5.6999 L5.7,16.6999 C5.5,16.8999 5.3,16.9999 5,16.9999 L1,16.9999 Z M19,20 C19.6,20 20,20.4 20,21 C20,21.6 19.6,22 19,22 L1,22 C0.4,22 0,21.6 0,21 C0,20.4 0.4,20 1,20 L19,20 Z"/>
+</svg>
diff --git a/assets/sdc-icons/common/expand-o.svg b/assets/sdc-icons/common/expand-o.svg
new file mode 100644
index 0000000..c7127d7
--- /dev/null
+++ b/assets/sdc-icons/common/expand-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="expand-a" d="M19.9006,0.6 C20.0006,0.701 20.0006,0.901 20.0006,1 L20.0006,7 C20.0006,7.6 19.5996,8 19.0006,8 C18.4006,8 18.0006,7.6 18.0006,7 L18.0006,3.401 L12.7006,8.701 C12.5006,8.901 12.2006,9 12.0006,9 C11.7996,9 11.5006,8.901 11.2996,8.701 C10.9006,8.3 10.9006,7.701 11.2996,7.3 L16.5996,2 L13.0006,2 C12.4006,2 12.0006,1.6 12.0006,1 C12.0006,0.401 12.4006,0 13.0006,0 L19.0006,0 C19.0996,0 19.2996,0 19.4006,0.1 C19.5996,0.201 19.7996,0.401 19.9006,0.6 Z M7.3,11.3002 C7.7,10.9012 8.3,10.9012 8.7,11.3002 C9.1,11.7002 9.1,12.3002 8.7,12.7002 L3.401,18.0002 L7,18.0002 C7.6,18.0002 8,18.4012 8,19.0002 C8,19.6002 7.6,20.0002 7,20.0002 L1,20.0002 C0.901,20.0002 0.7,20.0002 0.6,19.9012 C0.401,19.8002 0.2,19.6002 0.1,19.4012 C0,19.3002 0,19.1002 0,19.0002 L0,13.0002 C0,12.4012 0.401,12.0002 1,12.0002 C1.6,12.0002 2,12.4012 2,13.0002 L2,16.6002 L7.3,11.3002 Z M19.4006,19.9008 C19.2996,20.0008 19.0996,20.0008 19.0006,20.0008 L13.0006,20.0008 C12.4006,20.0008 12.0006,19.5998 12.0006,19.0008 C12.0006,18.4008 12.4006,18.0008 13.0006,18.0008 L16.5996,18.0008 L11.2996,12.7008 C11.0996,12.5008 11.0006,12.2008 11.0006,12.0008 C11.0006,11.7998 11.0996,11.5008 11.2996,11.2998 C11.7006,10.9008 12.2996,10.9008 12.7006,11.2998 L18.0006,16.5998 L18.0006,13.0008 C18.0006,12.4008 18.4006,12.0008 19.0006,12.0008 C19.5996,12.0008 20.0006,12.4008 20.0006,13.0008 L20.0006,19.0008 C20.0006,19.0998 20.0006,19.2998 19.9006,19.4008 C19.7996,19.5998 19.5996,19.7998 19.4006,19.9008 Z M8.7004,7.3002 C9.0994,7.7002 9.0994,8.3002 8.7004,8.7002 C8.3004,9.1002 7.7004,9.1002 7.3004,8.7002 L2.0004,3.4012 L2.0004,7.0002 C2.0004,7.6002 1.5994,8.0002 1.0004,8.0002 C0.4004,8.0002 0.0004,7.6002 0.0004,7.0002 L0.0004,1.0002 C0.0004,0.9012 0.0004,0.7002 0.0994,0.6002 C0.2004,0.4012 0.4004,0.2002 0.5994,0.1002 C0.7004,0.0002 0.9004,0.0002 1.0004,0.0002 L7.0004,0.0002 C7.5994,0.0002 8.0004,0.4012 8.0004,1.0002 C8.0004,1.6002 7.5994,2.0002 7.0004,2.0002 L3.4004,2.0002 L8.7004,7.3002 Z"/>
+</svg>
diff --git a/assets/sdc-icons/common/eye-o.svg b/assets/sdc-icons/common/eye-o.svg
new file mode 100644
index 0000000..35cf012
--- /dev/null
+++ b/assets/sdc-icons/common/eye-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="view-a" d="M11.975,16 C6.575,16 3.075,10.6 2.075,9 C2.975,7.4 6.575,2 11.975,2 C17.375,2 20.875,7.4 21.875,9 C20.875,10.6 17.375,16 11.975,16 M23.875,8.6 C23.675,8.2 19.475,0 11.975,0 C4.475,0 0.275,8.2 0.075,8.6 C-0.025,8.9 -0.025,9.2 0.075,9.5 C0.275,9.8 4.475,18 11.975,18 C19.475,18 23.675,9.8 23.875,9.4 C23.975,9.2 23.975,8.8 23.875,8.6 M12,11 C10.9,11 10,10.1 10,9 C10,7.9 10.9,7 12,7 C13.1,7 14,7.9 14,9 C14,10.1 13.1,11 12,11 M12,5 C9.8,5 8,6.8 8,9 C8,11.2 9.8,13 12,13 C14.2,13 16,11.2 16,9 C16,6.8 14.2,5 12,5"/>
+</svg>
diff --git a/assets/sdc-icons/common/filter-o.svg b/assets/sdc-icons/common/filter-o.svg
new file mode 100644
index 0000000..1364bc5
--- /dev/null
+++ b/assets/sdc-icons/common/filter-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="filter-a" d="M12.2092536,9.8 C12.1082536,10 12.0092536,10.2 12.0092536,10.5 L12.0092536,17.401 L10.0092536,16.401 L10.0092536,10.5 C10.0092536,10.3 9.90925355,10 9.80925355,9.901 L3.20925355,2 L18.9092536,2 L12.2092536,9.8 Z M21.9092536,0.6 C21.7092536,0.2 21.4092536,0 21.0092536,0 L1.00925355,0 C0.608253553,0 0.309253553,0.2 0.108253553,0.6 C-0.0907464471,0.901 0.00925355294,1.3 0.209253553,1.6 L8.00925355,10.8 L8.00925355,17 C8.00925355,17.401 8.20925355,17.7 8.60825355,17.901 L12.6082536,19.901 C12.7092536,20 12.8092536,20 13.0092536,20 C13.2092536,20 13.4092536,20 13.5092536,19.901 C13.8092536,19.7 14.0092536,19.401 14.0092536,19 L14.0092536,10.8 L21.8092536,1.6 C22.0092536,1.3 22.1082536,0.901 21.9092536,0.6 Z"/>
+</svg>
diff --git a/assets/sdc-icons/common/info-circle-o.svg b/assets/sdc-icons/common/info-circle-o.svg
new file mode 100644
index 0000000..4d91259
--- /dev/null
+++ b/assets/sdc-icons/common/info-circle-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="info-a" d="M11,20 C6,20 2,16 2,11 C2,6 6,2 11,2 C16,2 20,6 20,11 C20,16 16,20 11,20 M11,0 C4.9,0 0,4.9 0,11 C0,17.101 4.9,22 11,22 C17.1,22 22,17.101 22,11 C22,4.9 17.1,0 11,0 M11,10 C10.4,10 10,10.4 10,11 L10,15 C10,15.601 10.4,16 11,16 C11.6,16 12,15.601 12,15 L12,11 C12,10.4 11.6,10 11,10 M10.2998,6.2998 C10.0998,6.4998 9.9998,6.6998 9.9998,6.9998 C9.9998,7.2998 10.0998,7.4998 10.2998,7.6998 C10.4998,7.9008 10.6998,7.9998 10.9998,7.9998 C11.2998,7.9998 11.4998,7.9008 11.6998,7.6998 C11.9008,7.4998 11.9998,7.2998 11.9998,6.9998 C11.9998,6.6998 11.9008,6.4998 11.6998,6.2998 C11.2998,5.9008 10.6998,5.9008 10.2998,6.2998"/>
+</svg>
diff --git a/assets/sdc-icons/common/info-circle.svg b/assets/sdc-icons/common/info-circle.svg
new file mode 100644
index 0000000..551966a
--- /dev/null
+++ b/assets/sdc-icons/common/info-circle.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <g fill-rule="evenodd" transform="translate(1 1)">
+ <path id="info-copy-a" d="M11,0 C4.9,0 0,4.9 0,11 C0,17.101 4.9,22 11,22 C17.1,22 22,17.101 22,11 C22,4.9 17.1,0 11,0 M11,10 C10.4,10 10,10.4 10,11 L10,15 C10,15.601 10.4,16 11,16 C11.6,16 12,15.601 12,15 L12,11 C12,10.4 11.6,10 11,10 M10.2998,6.2998 C10.0998,6.4998 9.9998,6.6998 9.9998,6.9998 C9.9998,7.2998 10.0998,7.4998 10.2998,7.6998 C10.4998,7.9008 10.6998,7.9998 10.9998,7.9998 C11.2998,7.9998 11.4998,7.9008 11.6998,7.6998 C11.9008,7.4998 11.9998,7.2998 11.9998,6.9998 C11.9998,6.6998 11.9008,6.4998 11.6998,6.2998 C11.2998,5.9008 10.6998,5.9008 10.2998,6.2998"/>
+ </g>
+</svg>
diff --git a/assets/sdc-icons/common/info-square-o.svg b/assets/sdc-icons/common/info-square-o.svg
new file mode 100644
index 0000000..40a85c6
--- /dev/null
+++ b/assets/sdc-icons/common/info-square-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="information_artifacts-a" d="M10,9 C10.6,9 11,9.4 11,10 L11,14 C11,14.601 10.6,15 10,15 C9.4,15 9,14.601 9,14 L9,10 C9,9.4 9.4,9 10,9 Z M9.3,5.29925 C9.7,4.90025 10.3,4.90025 10.7,5.29925 C10.901,5.49925 11,5.69925 11,5.99925 C11,6.29925 10.901,6.49925 10.7,6.69925 C10.5,6.90025 10.3,6.99925 10,6.99925 C9.7,6.99925 9.5,6.90025 9.3,6.69925 C9.1,6.49925 9,6.29925 9,5.99925 C9,5.69925 9.1,5.49925 9.3,5.29925 Z M18,17 C18,17.6 17.6,18 17,18 L3,18 C2.4,18 2,17.6 2,17 L2,3 C2,2.4 2.4,2 3,2 L17,2 C17.6,2 18,2.4 18,3 L18,17 Z M17,0 L3,0 C1.3,0 0,1.3 0,3 L0,17 C0,18.7 1.3,20 3,20 L17,20 C18.7,20 20,18.7 20,17 L20,3 C20,1.3 18.7,0 17,0 Z"/>
+</svg>
diff --git a/assets/sdc-icons/common/inputs-o.svg b/assets/sdc-icons/common/inputs-o.svg
new file mode 100644
index 0000000..5120b24
--- /dev/null
+++ b/assets/sdc-icons/common/inputs-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="inputs-a" d="M18,17.05 C18,17.65 17.6,18.05 17,18.05 L3,18.05 C2.4,18.05 2,17.65 2,17.05 L2,3.05 C2,2.45 2.4,2.05 3,2.05 L17,2.05 C17.6,2.05 18,2.45 18,3.05 L18,17.05 Z M17,0.05 L3,0.05 C1.3,0.05 0,1.35 0,3.05 L0,17.05 C0,18.75 1.3,20.05 3,20.05 L17,20.05 C18.7,20.05 20,18.75 20,17.05 L20,3.05 C20,1.35 18.7,0.05 17,0.05 Z M15,5.05 L5,5.05 C4.45,5.05 4,5.5 4,6.05 C4,6.6 4.45,7.05 5,7.05 L15,7.05 C15.55,7.05 16,6.6 16,6.05 C16,5.5 15.55,5.05 15,5.05 M15,9.05 L5,9.05 C4.45,9.05 4,9.5 4,10.05 C4,10.6 4.45,11.05 5,11.05 L15,11.05 C15.55,11.05 16,10.6 16,10.05 C16,9.5 15.55,9.05 15,9.05"/>
+</svg>
diff --git a/assets/sdc-icons/common/locked.svg b/assets/sdc-icons/common/locked.svg
new file mode 100644
index 0000000..5c0939f
--- /dev/null
+++ b/assets/sdc-icons/common/locked.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="locked-a" d="M6,6 C6,3.8 7.8,2 10,2 C12.2,2 14,3.8 14,6 L14,9 L6,9 L6,6 Z M17,9 L16,9 L16,6 C16,2.7 13.3,0 10,0 C6.7,0 4,2.7 4,6 L4,9 L3,9 C1.3,9 0,10.3 0,12 L0,19 C0,20.7 1.3,22 3,22 L17,22 C18.7,22 20,20.7 20,19 L20,12 C20,10.3 18.7,9 17,9 Z"/>
+</svg>
diff --git a/assets/sdc-icons/common/minus-circle.svg b/assets/sdc-icons/common/minus-circle.svg
new file mode 100644
index 0000000..d7755dc
--- /dev/null
+++ b/assets/sdc-icons/common/minus-circle.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="sub_2-a" d="M11,20 C6,20 2,16 2,11 C2,6 6,2 11,2 C16,2 20,6 20,11 C20,16 16,20 11,20 M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M15,10 L7,10 C6.4,10 6,10.4 6,11 C6,11.6 6.4,12 7,12 L15,12 C15.6,12 16,11.6 16,11 C16,10.4 15.6,10 15,10"/>
+</svg>
diff --git a/assets/sdc-icons/common/minus.svg b/assets/sdc-icons/common/minus.svg
new file mode 100644
index 0000000..48fdcae
--- /dev/null
+++ b/assets/sdc-icons/common/minus.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <rect id="sub-a" width="16" height="2" rx="1"/>
+</svg>
diff --git a/assets/sdc-icons/common/notifications-o.svg b/assets/sdc-icons/common/notifications-o.svg
new file mode 100644
index 0000000..f52a4e3
--- /dev/null
+++ b/assets/sdc-icons/common/notifications-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="notifications-a" d="M4.5,15 C4.8,14.4 5,13.7 5,13 L5,8 C5,4.7 7.7,2 11,2 C14.3,2 17,4.7 17,8 L17,13 C17,13.7 17.2,14.4 17.5,15 L4.5,15 Z M21,15 C21.6,15 22,15.4 22,16 C22,16.6 21.6,17 21,17 L1,17 C0.4,17 0,16.6 0,16 C0,15.4 0.4,15 1,15 C2.1,15 3,14.1 3,13 L3,8 C3,3.6 6.6,0 11,0 C15.4,0 19,3.6 19,8 L19,13 C19,14.1 19.9,15 21,15 Z M14.0968122,19.141054 C14.5968122,19.441054 14.7968122,20.041054 14.2968122,20.541054 C13.6968122,21.541054 12.6968122,22.041054 11.6968122,22.041054 C11.1968122,22.041054 10.6968122,21.941054 10.1968122,21.641054 C9.69681223,21.341054 9.39681223,21.041054 9.09681223,20.541054 C8.89681223,20.041054 8.99581223,19.441054 9.49581223,19.141054 C9.99581223,18.941054 10.5968122,19.041054 10.8968122,19.541054 C10.9958122,19.741054 11.0968122,19.841054 11.2968122,19.941054 C11.7968122,20.141054 12.3968122,20.041054 12.6968122,19.541054 C12.9958122,19.041054 13.5968122,18.841054 14.0968122,19.141054 Z"/>
+</svg>
diff --git a/assets/sdc-icons/common/plus-circle-o.svg b/assets/sdc-icons/common/plus-circle-o.svg
new file mode 100644
index 0000000..c87e574
--- /dev/null
+++ b/assets/sdc-icons/common/plus-circle-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="add_2-a" d="M11,20 C6,20 2,16 2,11 C2,6 6,2 11,2 C16,2 20,6 20,11 C20,16 16,20 11,20 M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M15,10 L12,10 L12,7 C12,6.4 11.6,6 11,6 C10.4,6 10,6.4 10,7 L10,10 L7,10 C6.4,10 6,10.4 6,11 C6,11.6 6.4,12 7,12 L10,12 L10,15 C10,15.6 10.4,16 11,16 C11.6,16 12,15.6 12,15 L12,12 L15,12 C15.6,12 16,11.6 16,11 C16,10.4 15.6,10 15,10"/>
+</svg>
diff --git a/assets/sdc-icons/common/plus-circle.svg b/assets/sdc-icons/common/plus-circle.svg
new file mode 100644
index 0000000..62840b5
--- /dev/null
+++ b/assets/sdc-icons/common/plus-circle.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <g fill-rule="evenodd" transform="translate(1 1)">
+ <path id="add-copy-a" d="M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M15,10 L12,10 L12,7 C12,6.4 11.6,6 11,6 C10.4,6 10,6.4 10,7 L10,10 L7,10 C6.4,10 6,10.4 6,11 C6,11.6 6.4,12 7,12 L10,12 L10,15 C10,15.6 10.4,16 11,16 C11.6,16 12,15.6 12,15 L12,12 L15,12 C15.6,12 16,11.6 16,11 C16,10.4 15.6,10 15,10"/>
+ </g>
+</svg>
diff --git a/assets/sdc-icons/common/plus.svg b/assets/sdc-icons/common/plus.svg
new file mode 100644
index 0000000..00a6673
--- /dev/null
+++ b/assets/sdc-icons/common/plus.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="add-a" d="M15,7 L9,7 L9,1 C9,0.4 8.6,0 8,0 C7.4,0 7,0.4 7,1 L7,7 L1,7 C0.4,7 0,7.4 0,8 C0,8.6 0.4,9 1,9 L7,9 L7,15 C7,15.6 7.4,16 8,16 C8.6,16 9,15.6 9,15 L9,9 L15,9 C15.6,9 16,8.6 16,8 C16,7.4 15.6,7 15,7"/>
+</svg>
diff --git a/assets/sdc-icons/common/profile-o.svg b/assets/sdc-icons/common/profile-o.svg
new file mode 100644
index 0000000..802715e
--- /dev/null
+++ b/assets/sdc-icons/common/profile-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="profile-a" d="M13,12 L5,12 C2.2,12 0,14.2 0,17 L0,19 C0,19.6 0.4,20 1,20 C1.6,20 2,19.6 2,19 L2,17 C2,15.3 3.3,14 5,14 L13,14 C14.7,14 16,15.3 16,17 L16,19 C16,19.6 16.4,20 17,20 C17.6,20 18,19.6 18,19 L18,17 C18,14.2 15.8,12 13,12 M9,2 C10.7,2 12,3.3 12,5 C12,6.7 10.7,8 9,8 C7.3,8 6,6.7 6,5 C6,3.3 7.3,2 9,2 M9,10 C11.8,10 14,7.8 14,5 C14,2.2 11.8,0 9,0 C6.2,0 4,2.2 4,5 C4,7.8 6.2,10 9,10"/>
+</svg>
diff --git a/assets/sdc-icons/common/profiles-o.svg b/assets/sdc-icons/common/profiles-o.svg
new file mode 100644
index 0000000..ac9c673
--- /dev/null
+++ b/assets/sdc-icons/common/profiles-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="permissions-a" d="M13,12 L5,12 C2.2,12 0,14.2 0,17 L0,19 C0,19.6 0.4,20 1,20 C1.6,20 2,19.6 2,19 L2,17 C2,15.3 3.3,14 5,14 L13,14 C14.7,14 16,15.3 16,17 L16,19 C16,19.6 16.4,20 17,20 C17.6,20 18,19.6 18,19 L18,17 C18,14.2 15.8,12 13,12 M9,2 C10.7,2 12,3.3 12,5 C12,6.7 10.7,8 9,8 C7.3,8 6,6.7 6,5 C6,3.3 7.3,2 9,2 M9,10 C11.8,10 14,7.8 14,5 C14,2.2 11.8,0 9,0 C6.2,0 4,2.2 4,5 C4,7.8 6.2,10 9,10 M20.2191602,12.0191602 C19.7191602,11.9191602 19.1181602,12.2191602 19.0191602,12.7191602 C18.9191602,13.2191602 19.2191602,13.8191602 19.7191602,13.9191602 C21.0191602,14.2191602 21.9191602,15.4191602 21.9191602,16.8191602 L21.9191602,18.8191602 C21.9191602,19.4191602 22.3191602,19.8191602 22.9191602,19.8191602 C23.5191602,19.8191602 23.9191602,19.4191602 23.9191602,18.8191602 L23.9191602,16.8191602 C24.0191602,14.5191602 22.5191602,12.5191602 20.2191602,12.0191602 M16.2525961,0.0617044797 C15.7525961,-0.13829552 15.2525961,0.16170448 15.0525961,0.76170448 C14.9525961,1.26170448 15.2525961,1.86170448 15.7525961,1.96170448 C17.3525961,2.36170448 18.3525961,3.96170448 17.9525961,5.66170448 C17.6515961,6.76170448 16.8525961,7.56170448 15.7525961,7.86170448 C15.2525961,7.96170448 14.8525961,8.56170448 15.0525961,9.06170448 C15.1515961,9.56170448 15.5525961,9.86170448 16.0525961,9.86170448 L16.2525961,9.86170448 C18.0525961,9.36170448 19.4525961,8.06170448 19.8525961,6.26170448 C20.5525961,3.46170448 18.9525961,0.66170448 16.2525961,0.0617044797"/>
+</svg>
diff --git a/assets/sdc-icons/common/question-mark-circle-o.svg b/assets/sdc-icons/common/question-mark-circle-o.svg
new file mode 100644
index 0000000..59dabde
--- /dev/null
+++ b/assets/sdc-icons/common/question-mark-circle-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="?-a" d="M12.1251444,5.21141885 C10.0241444,4.51141885 7.72514439,5.61041885 7.02414439,7.61141885 C6.92514439,8.21141885 7.12514439,8.81141885 7.72514439,8.91141885 C8.22514439,9.11141885 8.82514439,8.81141885 9.02414439,8.31141885 C9.42514439,7.31141885 10.5241444,6.71141885 11.6251444,7.11141885 C12.4251444,7.41141885 12.9251444,8.11141885 12.9251444,9.01141885 C12.9251444,10.0114188 11.2251444,10.8114188 10.6251444,11.1114188 C10.1251444,11.3114188 9.82514439,11.8114188 10.0241444,12.4114188 C10.1251444,12.8114188 10.5241444,13.1114188 10.9251444,13.1114188 C11.0241444,13.1114188 11.1251444,13.1114188 11.2251444,13.0114188 C11.6251444,12.9114188 14.9251444,11.7114188 14.9251444,9.11141885 C14.8251444,7.31141885 13.7251444,5.81141885 12.1251444,5.21141885 M11,20 C6,20 2,16 2,11 C2,6 6,2 11,2 C16,2 20,6 20,11 C20,16 16,20 11,20 M11,0 C4.9,0 0,4.9 0,11 C0,17.101 4.9,22 11,22 C17.1,22 22,17.101 22,11 C22,4.9 17.1,0 11,0 M10.3,15.29925 C10.1,15.49925 10,15.69925 10,15.99925 C10,16.29925 10.1,16.49925 10.3,16.69925 C10.5,16.90025 10.7,16.99925 11,16.99925 C11.3,16.99925 11.5,16.90025 11.7,16.69925 C11.901,16.49925 12,16.19925 12,15.99925 C12,15.79925 11.901,15.49925 11.7,15.29925 C11.3,14.90025 10.7,14.90025 10.3,15.29925"/>
+</svg>
diff --git a/assets/sdc-icons/common/question-mark-circle.svg b/assets/sdc-icons/common/question-mark-circle.svg
new file mode 100644
index 0000000..ae5541a
--- /dev/null
+++ b/assets/sdc-icons/common/question-mark-circle.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+ <g fill-rule="evenodd" transform="translate(1 1)">
+ <path id="?-copy-a" d="M12.1251444,5.21141885 C10.0241444,4.51141885 7.72514439,5.61041885 7.02414439,7.61141885 C6.92514439,8.21141885 7.12514439,8.81141885 7.72514439,8.91141885 C8.22514439,9.11141885 8.82514439,8.81141885 9.02414439,8.31141885 C9.42514439,7.31141885 10.5241444,6.71141885 11.6251444,7.11141885 C12.4251444,7.41141885 12.9251444,8.11141885 12.9251444,9.01141885 C12.9251444,10.0114188 11.2251444,10.8114188 10.6251444,11.1114188 C10.1251444,11.3114188 9.82514439,11.8114188 10.0241444,12.4114188 C10.1251444,12.8114188 10.5241444,13.1114188 10.9251444,13.1114188 C11.0241444,13.1114188 11.1251444,13.1114188 11.2251444,13.0114188 C11.6251444,12.9114188 14.9251444,11.7114188 14.9251444,9.11141885 C14.8251444,7.31141885 13.7251444,5.81141885 12.1251444,5.21141885 M11,0 C4.9,0 0,4.9 0,11 C0,17.101 4.9,22 11,22 C17.1,22 22,17.101 22,11 C22,4.9 17.1,0 11,0 M10.3,15.29925 C10.1,15.49925 10,15.69925 10,15.99925 C10,16.29925 10.1,16.49925 10.3,16.69925 C10.5,16.90025 10.7,16.99925 11,16.99925 C11.3,16.99925 11.5,16.90025 11.7,16.69925 C11.901,16.49925 12,16.19925 12,15.99925 C12,15.79925 11.901,15.49925 11.7,15.29925 C11.3,14.90025 10.7,14.90025 10.3,15.29925"/>
+ </g>
+</svg>
diff --git a/assets/sdc-icons/common/req-capabilities-o.svg b/assets/sdc-icons/common/req-capabilities-o.svg
new file mode 100644
index 0000000..88ace7d
--- /dev/null
+++ b/assets/sdc-icons/common/req-capabilities-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="req.&amp;capabilities-a" d="M19,20 C19,20.6 18.6,21 18,21 L6,21 C5.4,21 5,20.6 5,20 L5,6 C5,5.4 5.4,5 6,5 L7,5 C7,6.1 7.9,7 9,7 L15,7 C16.1,7 17,6.1 17,5 L18,5 C18.6,5 19,5.4 19,6 L19,20 Z M9,3 L15,3 L15,5 L9,5 L9,4 L9,3 Z M18,3 L17,3 C17,1.9 16.1,1 15,1 L9,1 C7.9,1 7,1.9 7,3 L6,3 C4.3,3 3,4.3 3,6 L3,20 C3,21.7 4.3,23 6,23 L18,23 C19.7,23 21,21.7 21,20 L21,6 C21,4.3 19.7,3 18,3 Z M17,10 L7,10 C6.45,10 6,10.45 6,11 C6,11.55 6.45,12 7,12 L17,12 C17.55,12 18,11.55 18,11 C18,10.45 17.55,10 17,10 M17,14 L7,14 C6.45,14 6,14.45 6,15 C6,15.55 6.45,16 7,16 L17,16 C17.55,16 18,15.55 18,15 C18,14.45 17.55,14 17,14"/>
+</svg>
diff --git a/assets/sdc-icons/common/revert-o.svg b/assets/sdc-icons/common/revert-o.svg
new file mode 100644
index 0000000..d48b8d0
--- /dev/null
+++ b/assets/sdc-icons/common/revert-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="revert-a" d="M13,10.6 L15.7,13.3 C16.1,13.7 16.1,14.3 15.7,14.7 C15.5,14.9 15.2,15 15,15 C14.8,15 14.5,14.9 14.3,14.7 L11.3,11.7 C11.1,11.5 11,11.3 11,11 L11,5 C11,4.4 11.4,4 12,4 C12.6,4 13,4.4 13,5 L13,10.6 Z M21.4037815,6.69868189 C23.3027815,11.8986819 20.5037815,17.5986819 15.3027815,19.3986819 C14.2037815,19.7986819 13.1027815,19.9986819 12.0037815,19.9986819 C7.90378148,19.9986819 4.00378148,17.3986819 2.50378148,13.2986819 C2.30278148,12.7986819 2.60278148,12.1986819 3.10278148,11.9986819 C3.60278148,11.7986819 4.20378148,12.0986819 4.40378148,12.5986819 C5.90378148,16.7986819 10.4037815,18.9986819 14.6027815,17.4986819 C16.7037815,16.7986819 18.3027815,15.2986819 19.2037815,13.3986819 C20.1027815,11.4986819 20.2037815,9.29868189 19.5037815,7.29868189 C18.8027815,5.19868189 17.3027815,3.59868189 15.4037815,2.69868189 C13.5037815,1.79868189 11.3027815,1.69868189 9.30278148,2.39868189 C8.20378148,2.79868189 7.10278148,3.49868189 6.30278148,4.29868189 L3.50378148,6.99868189 L7.00378148,6.99868189 C7.60278148,6.99868189 7.80278148,7.19868189 7.80278148,7.79868189 C7.80278148,8.39868189 7.40378148,8.79868189 6.80278148,8.79868189 L0.802781478,8.79868189 L0.602781478,8.79868189 L0.503781478,8.79868189 L0.403781478,8.69868189 C0.302781478,8.69868189 0.302781478,8.69868189 0.203781478,8.59868189 C0.102781478,8.59868189 0.102781478,8.49868189 0.102781478,8.49868189 C0.102781478,8.39868189 0.00378147753,8.39868189 0.00378147753,8.29868189 L0.00378147753,8.09868189 L0.00378147753,7.99868189 L0.00378147753,1.99868189 C0.00378147753,1.39868189 0.403781478,0.998681894 1.00378148,0.998681894 C1.60278148,0.998681894 2.00378148,1.39868189 2.00378148,1.99868189 L2.00378148,5.69868189 L5.00378148,2.89868189 C6.00378148,1.89868189 7.30278148,1.09868189 8.70378148,0.598681894 C11.2037815,-0.301318106 13.9037815,-0.201318106 16.3027815,0.998681894 C18.7037815,2.19868189 20.5037815,4.19868189 21.4037815,6.69868189 Z"/>
+</svg>
diff --git a/assets/sdc-icons/common/save-o.svg b/assets/sdc-icons/common/save-o.svg
new file mode 100644
index 0000000..3b95518
--- /dev/null
+++ b/assets/sdc-icons/common/save-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="save-a" d="M18,17 C18,17.6 17.6,18 17,18 L16,18 L16,11 C16,10.4 15.6,10 15,10 L5,10 C4.4,10 4,10.4 4,11 L4,18 L3,18 C2.4,18 2,17.6 2,17 L2,3 C2,2.4 2.4,2 3,2 L4,2 L4,6 C4,6.6 4.4,7 5,7 L13,7 C13.6,7 14,6.6 14,6 C14,5.4 13.6,5 13,5 L6,5 L6,2 L13.6,2 L18,6.4 L18,17 Z M6,18 L14,18 L14,12 L6,12 L6,18 Z M19.7,5.3 L14.7,0.3 C14.5,0.1 14.3,0 14,0 L3,0 C1.3,0 0,1.3 0,3 L0,17 C0,18.7 1.3,20 3,20 L17,20 C18.7,20 20,18.7 20,17 L20,6 C20,5.7 19.9,5.5 19.7,5.3 Z"/>
+</svg>
diff --git a/assets/sdc-icons/common/search-o.svg b/assets/sdc-icons/common/search-o.svg
new file mode 100644
index 0000000..312e21a
--- /dev/null
+++ b/assets/sdc-icons/common/search-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="search-a" d="M2,8.5 C2,4.9 4.9,2 8.5,2 C12.1,2 15,4.9 15,8.5 C15,10.3 14.3,11.9 13.1,13.1 C11.9,14.3 10.3,15 8.5,15 C4.9,15 2,12.1 2,8.5 M19.7,18.3 L15.2,13.8 C16.3,12.4 17,10.5 17,8.5 C17,3.8 13.2,0 8.5,0 C3.8,0 0,3.8 0,8.5 C0,13.2 3.8,17 8.5,17 C10.5,17 12.3,16.3 13.8,15.2 L18.3,19.7 C18.5,19.9 18.8,20 19,20 C19.2,20 19.5,19.9 19.7,19.7 C20.1,19.3 20.1,18.7 19.7,18.3"/>
+</svg>
diff --git a/assets/sdc-icons/common/settings-o.svg b/assets/sdc-icons/common/settings-o.svg
new file mode 100644
index 0000000..888be2e
--- /dev/null
+++ b/assets/sdc-icons/common/settings-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="settings-a" d="M12.0004,14.0004 C10.9004,14.0004 10.0004,13.1004 10.0004,12.0004 C10.0004,10.8994 10.9004,10.0004 12.0004,10.0004 C13.1004,10.0004 14.0004,10.8994 14.0004,12.0004 C14.0004,13.1004 13.1004,14.0004 12.0004,14.0004 M12.0004,8.0004 C9.8004,8.0004 8.0004,9.8004 8.0004,12.0004 C8.0004,14.2004 9.8004,16.0004 12.0004,16.0004 C14.2004,16.0004 16.0004,14.2004 16.0004,12.0004 C16.0004,9.8004 14.2004,8.0004 12.0004,8.0004 M19.1,17.6 C19.3,17.8 19.401,18 19.401,18.3 C19.401,18.6 19.3,18.8 19.1,19 C18.901,19.201 18.701,19.3 18.401,19.3 C18.1,19.3 17.901,19.201 17.6,18.9 C16.8,18.1 15.701,17.9 14.701,18.4 C13.701,18.8 13.1,19.8 13.1,20.8 L13.1,21 C13.1,21.6 12.701,22 12.1,22 C11.5,22 11.1,21.6 11.1,21 L11.1,20.9 C11.1,19.8 10.401,18.9 9.401,18.5 C9.1,18.3 8.701,18.3 8.3,18.3 C7.6,18.3 6.901,18.6 6.401,19.1 C6,19.5 5.5,19.5 5.1,19.201 L4.901,18.8 L4.8,18.8 C4.701,18.701 4.701,18.5 4.701,18.4 C4.701,18.1 4.8,17.9 5.1,17.6 C5.901,16.8 6.1,15.701 5.6,14.701 C5.201,13.701 4.201,13.1 3.201,13.1 L3,13.1 C2.401,13.1 2,12.701 2,12.1 C2,11.5 2.401,11.1 3,11.1 L3.1,11.1 C4.201,11.1 5.1,10.4 5.5,9.4 C5.901,8.4 5.701,7.3 4.901,6.4 C4.5,6 4.5,5.4 4.901,5 C5.3,4.6 5.901,4.6 6.401,5.1 C7.1,5.8 8.201,6 9.1,5.701 L9.401,5.6 C10.401,5.201 11,4.201 11,3.201 L11,3 C11,2.4 11.401,2 12,2 C12.6,2 13,2.4 13,3.1 C13,4.201 13.6,5.1 14.6,5.5 C15.6,5.9 16.701,5.701 17.6,4.9 C17.8,4.701 18,4.6 18.3,4.6 C18.6,4.6 18.8,4.701 19,4.9 C19.401,5.3 19.401,5.9 18.901,6.4 C18.201,7.1 18,8.201 18.3,9.1 L18.401,9.4 C18.8,10.4 19.8,11 20.8,11 L21,11 C21.6,11 22,11.4 22,12 C22,12.6 21.6,13 20.901,13 C19.8,13 18.901,13.6 18.5,14.6 C18,15.6 18.3,16.701 19.1,17.6 M20.3,15.4 C20.401,15.201 20.6,15 21,15 C22.701,15 24,13.701 24,12 C24,10.3 22.701,9 21,9 L20.8,9 C20.6,9 20.401,8.9 20.3,8.701 L20.201,8.5 C20.1,8.3 20.1,8 20.401,7.701 C21.5,6.6 21.6,5 20.701,3.8 L20.701,3.5 L20.3,3.3 C19.8,2.8 19.1,2.5 18.3,2.5 C17.5,2.5 16.701,2.8 16.1,3.4 C15.901,3.6 15.6,3.6 15.401,3.5 C15.201,3.6 15,3.3 15,3 C15,1.3 13.701,0 12,0 C10.3,0 9,1.3 9,3 L9,3.201 C9,3.4 8.901,3.6 8.701,3.701 L8.5,3.8 C8.3,3.9 8,3.8 7.701,3.6 C6.5,2.4 4.6,2.4 3.5,3.6 C2.3,4.8 2.3,6.701 3.6,7.9 C3.8,8.1 3.8,8.4 3.701,8.701 C3.6,8.9 3.3,9.1 3,9.1 C1.3,9.1 0,10.4 0,12.1 C0,13.8 1.3,15.1 3,15.1 L3.201,15.1 C3.5,15.1 3.701,15.3 3.8,15.5 C3.901,15.701 3.901,16 3.6,16.3 C3,16.9 2.701,17.6 2.701,18.4 C2.701,19.1 3,19.8 3.5,20.4 L3.6,20.5 L3.901,20.8 C5.1,21.701 6.701,21.6 7.901,20.5 C8.1,20.3 8.401,20.3 8.701,20.4 C9,20.5 9.1,20.701 9.1,21.1 C9.1,22.8 10.401,24.1 12.1,24.1 C13.8,24.1 15.1,22.8 15.1,21.1 L15.1,20.9 C15.1,20.6 15.3,20.4 15.5,20.3 C15.701,20.201 16,20.201 16.3,20.5 C17.5,21.701 19.401,21.701 20.5,20.5 C21.701,19.3 21.701,17.4 20.401,16.201 C20.3,15.9 20.201,15.6 20.3,15.4"/>
+</svg>
diff --git a/assets/sdc-icons/common/spinner.svg b/assets/sdc-icons/common/spinner.svg
new file mode 100644
index 0000000..9d0efb8
--- /dev/null
+++ b/assets/sdc-icons/common/spinner.svg
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg id="master-artboard" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" style="enable-background:new 0 0 850.4 1133.9;" width="24px" height="24px"><rect id="ee-background" x="0" y="0" width="24" height="24" style="fill: white; fill-opacity: 0; pointer-events: none;"/><g transform="matrix(0.3846159279346466, 0, 0, 0.3846159875392914, -7.18846321105957, -7.272071838378907)"><g transform="rotate(0 50 50)">
+ <path d="M 50 24 H 50 A 3 4.8 0 0 1 53 28.8 V 31.2 A 3 4.8 0 0 1 50 36 H 50 A 3 4.8 0 0 1 47 31.2 V 28.8 A 3 4.8 0 0 1 50 24 Z" fill="#0568ae">
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"/>
+ </path>
+</g><g transform="rotate(30 50 50)">
+ <path d="M 50 24 H 50 A 3 4.8 0 0 1 53 28.8 V 31.2 A 3 4.8 0 0 1 50 36 H 50 A 3 4.8 0 0 1 47 31.2 V 28.8 A 3 4.8 0 0 1 50 24 Z" fill="#0568ae">
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"/>
+ </path>
+</g><g transform="rotate(60 50 50)">
+ <path d="M 50 24 H 50 A 3 4.8 0 0 1 53 28.8 V 31.2 A 3 4.8 0 0 1 50 36 H 50 A 3 4.8 0 0 1 47 31.2 V 28.8 A 3 4.8 0 0 1 50 24 Z" fill="#0568ae">
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"/>
+ </path>
+</g><g transform="rotate(90 50 50)">
+ <path d="M 50 24 H 50 A 3 4.8 0 0 1 53 28.8 V 31.2 A 3 4.8 0 0 1 50 36 H 50 A 3 4.8 0 0 1 47 31.2 V 28.8 A 3 4.8 0 0 1 50 24 Z" fill="#0568ae">
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"/>
+ </path>
+</g><g transform="rotate(120 50 50)">
+ <path d="M 50 24 H 50 A 3 4.8 0 0 1 53 28.8 V 31.2 A 3 4.8 0 0 1 50 36 H 50 A 3 4.8 0 0 1 47 31.2 V 28.8 A 3 4.8 0 0 1 50 24 Z" fill="#0568ae">
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"/>
+ </path>
+</g><g transform="rotate(150 50 50)">
+ <path d="M 50 24 H 50 A 3 4.8 0 0 1 53 28.8 V 31.2 A 3 4.8 0 0 1 50 36 H 50 A 3 4.8 0 0 1 47 31.2 V 28.8 A 3 4.8 0 0 1 50 24 Z" fill="#0568ae">
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"/>
+ </path>
+</g><g transform="rotate(180 50 50)">
+ <path d="M 50 24 H 50 A 3 4.8 0 0 1 53 28.8 V 31.2 A 3 4.8 0 0 1 50 36 H 50 A 3 4.8 0 0 1 47 31.2 V 28.8 A 3 4.8 0 0 1 50 24 Z" fill="#0568ae">
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"/>
+ </path>
+</g><g transform="rotate(210 50 50)">
+ <path d="M 50 24 H 50 A 3 4.8 0 0 1 53 28.8 V 31.2 A 3 4.8 0 0 1 50 36 H 50 A 3 4.8 0 0 1 47 31.2 V 28.8 A 3 4.8 0 0 1 50 24 Z" fill="#0568ae">
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"/>
+ </path>
+</g><g transform="rotate(240 50 50)">
+ <path d="M 50 24 H 50 A 3 4.8 0 0 1 53 28.8 V 31.2 A 3 4.8 0 0 1 50 36 H 50 A 3 4.8 0 0 1 47 31.2 V 28.8 A 3 4.8 0 0 1 50 24 Z" fill="#0568ae">
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"/>
+ </path>
+</g><g transform="rotate(270 50 50)">
+ <path d="M 50 24 H 50 A 3 4.8 0 0 1 53 28.8 V 31.2 A 3 4.8 0 0 1 50 36 H 50 A 3 4.8 0 0 1 47 31.2 V 28.8 A 3 4.8 0 0 1 50 24 Z" fill="#0568ae">
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"/>
+ </path>
+</g><g transform="rotate(300 50 50)">
+ <path d="M 50 24 H 50 A 3 4.8 0 0 1 53 28.8 V 31.2 A 3 4.8 0 0 1 50 36 H 50 A 3 4.8 0 0 1 47 31.2 V 28.8 A 3 4.8 0 0 1 50 24 Z" fill="#0568ae">
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"/>
+ </path>
+</g><g transform="rotate(330 50 50)">
+ <path d="M 50 24 H 50 A 3 4.8 0 0 1 53 28.8 V 31.2 A 3 4.8 0 0 1 50 36 H 50 A 3 4.8 0 0 1 47 31.2 V 28.8 A 3 4.8 0 0 1 50 24 Z" fill="#0568ae">
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"/>
+ </path>
+</g></g></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/common/success-circle-o.svg b/assets/sdc-icons/common/success-circle-o.svg
new file mode 100644
index 0000000..2d58e6c
--- /dev/null
+++ b/assets/sdc-icons/common/success-circle-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="success+20-a" d="M20.1825992,10.445793 C20.6735306,10.445793 21.0008182,10.7730806 21.0008182,11.264012 L21.0008182,12.0004091 C21.0008182,16.9915451 16.9915451,21 12.0004091,21 C7.00927315,21 3,16.9915451 3,12.0004091 C3,7.00927315 7.00927315,3 12.0004091,3 C13.3095595,3 14.536888,3.3272876 15.6823947,3.81821901 C16.0915042,3.98186281 16.255148,4.47279422 16.0915042,4.88190372 C15.9278604,5.29101323 15.436929,5.45465703 15.0278194,5.29101323 C14.0459566,4.88190372 13.0640938,4.63643802 12.0004091,4.63643802 C7.90931406,4.63643802 4.63643802,7.90931406 4.63643802,12.0004091 C4.63643802,16.0906859 7.90931406,19.363562 12.0004091,19.363562 C16.0915042,19.363562 19.3643802,16.0906859 19.3643802,12.0004091 L19.3643802,11.264012 C19.3643802,10.7730806 19.6916678,10.445793 20.1825992,10.445793 Z M21.5737352,4.06343925 C21.9002046,4.39072685 21.9002046,4.88165826 21.5737352,5.20894586 L12.5733261,14.209355 C12.4096823,14.3729988 12.1642166,14.4548207 12.0005728,14.4548207 C11.836929,14.4548207 11.5914632,14.3729988 11.4278194,14.209355 L8.97316242,11.7546979 C8.64587481,11.4274103 8.64587481,10.9364789 8.97316242,10.6091913 C9.30045002,10.2819037 9.79138143,10.2819037 10.118669,10.6091913 L12.0005728,12.491095 L20.4282286,4.06343925 C20.7555162,3.73615164 21.2464476,3.73615164 21.5737352,4.06343925 Z"/>
+</svg>
diff --git a/assets/sdc-icons/common/success.svg b/assets/sdc-icons/common/success.svg
new file mode 100644
index 0000000..918833b
--- /dev/null
+++ b/assets/sdc-icons/common/success.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="success-a" d="M16.667,0.3232 C16.223,-0.1078 15.556,-0.1078 15.111,0.3232 L6.667,12.4152 L1.889,7.7842 C1.444,7.3542 0.777,7.3542 0.333,7.7842 C-0.111,8.2152 -0.111,8.8612 0.333,9.2922 L5.889,14.6772 C6.111,14.8922 6.333,15.0002 6.667,15.0002 C7,15.0002 7.223,14.8922 7.444,14.6772 L16.667,1.8302 C17.111,1.4002 17.111,0.7542 16.667,0.3232"/>
+</svg>
diff --git a/assets/sdc-icons/common/sync-o.svg b/assets/sdc-icons/common/sync-o.svg
new file mode 100644
index 0000000..88a64d1
--- /dev/null
+++ b/assets/sdc-icons/common/sync-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="sync-a" d="M20.6,12.1 C21.1,12.2 21.401,12.8 21.3,13.4 C20.8,14.8 19.901,16.1 18.901,17.1 C17,19 14.5,20 11.8,20 C9.1,20 6.6,19 4.901,17.1 L2,14.3 L2,18 C2,18.6 1.6,19 1,19 C0.401,19 0,18.6 0,18 L0,12 L0,11.9 L0,11.7 C0,11.6 0.1,11.6 0.1,11.5 C0.201,11.5 0.201,11.4 0.201,11.4 C0.201,11.3 0.3,11.2 0.401,11.2 C0.401,11.1 0.5,11.1 0.5,11.1 L0.6,11.1 C0.6,11 0.701,11 0.8,11 L6.8,11 C7.401,11 7.8,11.4 7.8,12 C7.8,12.6 7.401,13 6.8,13 L3.3,13 L6.1,15.6 C7.701,17.2 9.701,18 11.8,18 C13.901,18 16,17.2 17.401,15.7 C18.3,14.9 18.901,13.8 19.3,12.7 C19.5,12.2 20.1,11.9 20.6,12.1 Z M22.4626462,1.01696034 C23.0626462,1.01696034 23.4626462,1.41696034 23.4626462,2.01696034 L23.4626462,8.01696034 L23.4626462,8.11696034 C23.4626462,8.21696034 23.4626462,8.31696034 23.3626462,8.41696034 C23.3626462,8.51696034 23.2626462,8.51696034 23.2626462,8.61696034 C23.1626462,8.61696034 23.1626462,8.71696034 23.1626462,8.71696034 C23.0626462,8.81696034 22.9626462,8.81696034 22.8626462,8.91696034 C22.7626462,9.01696034 22.5626462,9.01696034 22.4626462,9.01696034 L16.4626462,9.01696034 C15.8626462,9.01696034 15.4626462,8.61696034 15.4626462,8.01696034 C15.4626462,7.41696034 15.8626462,7.01696034 16.4626462,7.01696034 L19.9626462,7.01696034 L17.1626462,4.31696034 C16.3626462,3.41696034 15.2626462,2.81696034 14.1626462,2.41696034 C12.1626462,1.71696034 9.96264622,1.81696034 8.06264622,2.71696034 C6.16264622,3.71696034 4.66264622,5.31696034 3.96264622,7.31696034 C3.76264622,7.81696034 3.16264622,8.11696034 2.66264622,7.91696034 C2.16264622,7.81696034 1.86264622,7.21696034 2.06264622,6.71696034 C2.96264622,4.11696034 4.76264622,2.11696034 7.16264622,1.01696034 C9.56264622,-0.183039661 12.2626462,-0.283039661 14.8626462,0.516960339 C16.2626462,1.01696034 17.5626462,1.91696034 18.5626462,2.91696034 L21.4626462,5.71696034 L21.4626462,2.01696034 C21.4626462,1.41696034 21.8626462,1.01696034 22.4626462,1.01696034 Z"/>
+</svg>
diff --git a/assets/sdc-icons/common/trash-o.svg b/assets/sdc-icons/common/trash-o.svg
new file mode 100644
index 0000000..7a841fb
--- /dev/null
+++ b/assets/sdc-icons/common/trash-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="trash-a" d="M16,19 C16,19.6 15.6,20 15,20 L5,20 C4.4,20 4,19.6 4,19 L4,6 L16,6 L16,19 Z M7,3 C7,2.4 7.4,2 8,2 L12,2 C12.6,2 13,2.4 13,3 L13,4 L7,4 L7,3 Z M19,4 L15,4 L15,3 C15,1.3 13.7,0 12,0 L8,0 C6.3,0 5,1.3 5,3 L5,4 L1,4 C0.4,4 0,4.4 0,5 C0,5.6 0.4,6 1,6 L2,6 L2,19 C2,20.7 3.3,22 5,22 L15,22 C16.7,22 18,20.7 18,19 L18,6 L19,6 C19.6,6 20,5.6 20,5 C20,4.4 19.6,4 19,4 Z M8,17.0001 C8.6,17.0001 9,16.6001 9,16.0001 L9,10.0001 C9,9.4001 8.6,9.0001 8,9.0001 C7.4,9.0001 7,9.4001 7,10.0001 L7,16.0001 C7,16.6001 7.4,17.0001 8,17.0001 M12,17.0001 C12.6,17.0001 13,16.6001 13,16.0001 L13,10.0001 C13,9.4001 12.6,9.0001 12,9.0001 C11.4,9.0001 11,9.4001 11,10.0001 L11,16.0001 C11,16.6001 11.4,17.0001 12,17.0001"/>
+</svg>
diff --git a/assets/sdc-icons/common/undo-o.svg b/assets/sdc-icons/common/undo-o.svg
new file mode 100644
index 0000000..f6f0dd1
--- /dev/null
+++ b/assets/sdc-icons/common/undo-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="undo-a" d="M21.4,6.69868189 C20.5,4.19868189 18.7,2.19868189 16.299,0.998681894 C13.9,-0.201318106 11.2,-0.301318106 8.7,0.598681894 C7.299,1.09868189 6,1.89868189 5,2.89868189 L2,5.69868189 L2,1.99868189 C2,1.39868189 1.599,0.998681894 1,0.998681894 C0.4,0.998681894 0,1.39868189 0,1.99868189 L0,7.99868189 L0,8.09868189 L0,8.29868189 C0,8.39868189 0.099,8.39868189 0.099,8.49868189 C0.099,8.49868189 0.099,8.59868189 0.2,8.59868189 C0.299,8.69868189 0.299,8.69868189 0.4,8.69868189 L0.5,8.79868189 L0.599,8.79868189 L0.799,8.79868189 L6.799,8.79868189 C7.4,8.79868189 7.799,8.39868189 7.799,7.79868189 C7.799,7.19868189 7.599,6.99868189 7,6.99868189 L3.5,6.99868189 L6.299,4.29868189 C7.099,3.49868189 8.2,2.79868189 9.299,2.39868189 C11.299,1.69868189 13.5,1.79868189 15.4,2.69868189 C17.299,3.59868189 18.799,5.19868189 19.5,7.29868189 C20.2,9.29868189 20.099,11.4986819 19.2,13.3986819 C18.299,15.2986819 16.7,16.7986819 14.599,17.4986819 C10.4,18.9986819 5.9,16.7986819 4.4,12.5986819 C4.2,12.0986819 3.599,11.7986819 3.099,11.9986819 C2.599,12.1986819 2.299,12.7986819 2.5,13.2986819 C4,17.3986819 7.9,19.9986819 12,19.9986819 C13.099,19.9986819 14.2,19.7986819 15.299,19.3986819 C20.5,17.5986819 23.299,11.8986819 21.4,6.69868189"/>
+</svg>
diff --git a/assets/sdc-icons/common/unlocked-o.svg b/assets/sdc-icons/common/unlocked-o.svg
new file mode 100644
index 0000000..6e677e0
--- /dev/null
+++ b/assets/sdc-icons/common/unlocked-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="unlocked-a" d="M18,18.9999 C18,19.5999 17.6,19.9999 17,19.9999 L3,19.9999 C2.4,19.9999 2,19.5999 2,18.9999 L2,11.9999 C2,11.3999 2.4,10.9999 3,10.9999 L17,10.9999 C17.6,10.9999 18,11.3999 18,11.9999 L18,18.9999 Z M17,8.9999 L6,8.9999 L6,5.9999 C6,4.8999 6.4,3.8999 7.2,3.1999 C7.9,2.3999 8.9,1.9999 10,1.9999 C11.9,1.9999 13.5,3.2999 13.9,5.1999 C14,5.6999 14.6,6.0999 15.1,5.9999 C15.6,5.8999 16,5.3999 15.9,4.7999 C15.3,1.9999 12.8,-0.0001 10,-0.0001 C8.4,-0.0001 6.9,0.5999 5.8,1.7999 C4.6,2.8999 4,4.3999 4,5.9999 L4,8.9999 L3,8.9999 C1.3,8.9999 0,10.2999 0,11.9999 L0,18.9999 C0,20.6999 1.3,21.9999 3,21.9999 L17,21.9999 C18.7,21.9999 20,20.6999 20,18.9999 L20,11.9999 C20,10.2999 18.7,8.9999 17,8.9999 Z"/>
+</svg>
diff --git a/assets/sdc-icons/common/upload-o.svg b/assets/sdc-icons/common/upload-o.svg
new file mode 100644
index 0000000..bf62707
--- /dev/null
+++ b/assets/sdc-icons/common/upload-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="upload-a" d="M19,15 C19.6,15 20,15.4 20,16 L20,19 C20,20.7 18.7,22 17,22 L3,22 C1.3,22 0,20.7 0,19 L0,16 C0,15.4 0.4,15 1,15 C1.6,15 2,15.4 2,16 L2,19 C2,19.6 2.4,20 3,20 L17,20 C17.6,20 18,19.6 18,19 L18,16 C18,15.4 18.4,15 19,15 Z M6.7,5.67525 C6.3,6.07425 5.7,6.07425 5.3,5.67525 C4.9,5.27525 4.9,4.67525 5.3,4.27525 L9.3,0.27525 C9.4,0.17525 9.5,0.17525 9.599,0.07425 C9.9,-0.02475 10.2,-0.02475 10.4,0.07425 C10.5,0.07425 10.599,0.17525 10.7,0.27525 L14.7,4.27525 C15.099,4.67525 15.099,5.27525 14.7,5.67525 C14.5,5.87525 14.3,5.97525 14,5.97525 C13.7,5.97525 13.5,5.87525 13.3,5.67525 L11,3.37525 L11,14.97525 C11,15.57425 10.599,15.97525 10,15.97525 C9.4,15.97525 9,15.57425 9,14.97525 L9,3.37525 L6.7,5.67525 Z"/>
+</svg>
diff --git a/assets/sdc-icons/common/v-circle-o.svg b/assets/sdc-icons/common/v-circle-o.svg
new file mode 100644
index 0000000..1d6f737
--- /dev/null
+++ b/assets/sdc-icons/common/v-circle-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="success-a" d="M11,20 C6,20 2,16 2,11 C2,6 6,2 11,2 C16,2 20,6 20,11 C20,16 16,20 11,20 M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M15.2471,6.3413 L8.9511,13.5373 L5.7071,10.2933 C5.3161,9.9023 4.6841,9.9023 4.2931,10.2933 C3.9021,10.6833 3.9021,11.3163 4.2931,11.7073 L8.2931,15.7073 C8.4801,15.8953 8.7351,16.0003 9.0001,16.0003 C9.0111,16.0003 9.0221,16.0003 9.0331,15.9993 C9.3101,15.9903 9.5701,15.8663 9.7531,15.6583 L16.7531,7.6583 C17.1161,7.2423 17.0741,6.6113 16.6581,6.2473 C16.2441,5.8833 15.6111,5.9243 15.2471,6.3413"/>
+</svg>
diff --git a/assets/sdc-icons/common/v-circle.svg b/assets/sdc-icons/common/v-circle.svg
new file mode 100644
index 0000000..9baa0f2
--- /dev/null
+++ b/assets/sdc-icons/common/v-circle.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="success-copy-a" d="M16.753,7.659 L9.753,15.659 C9.57,15.867 9.31,15.991 9.033,16 C9.023,16 9.011,16 9,16 C8.735,16 8.481,15.895 8.293,15.707 L4.293,11.707 C3.902,11.317 3.902,10.684 4.293,10.293 C4.684,9.903 5.316,9.903 5.707,10.293 L8.951,13.537 L15.247,6.342 C15.611,5.925 16.244,5.884 16.658,6.248 C17.074,6.612 17.116,7.243 16.753,7.659 M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0"/>
+</svg>
diff --git a/assets/sdc-icons/common/x-circle-o.svg b/assets/sdc-icons/common/x-circle-o.svg
new file mode 100644
index 0000000..ec0d80b
--- /dev/null
+++ b/assets/sdc-icons/common/x-circle-o.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+ <path id="x_o_20-a" d="M9,16.3636364 C4.90909091,16.3636364 1.63636364,13.0909091 1.63636364,9 C1.63636364,4.90909091 4.90909091,1.63636364 9,1.63636364 C13.0909091,1.63636364 16.3636364,4.90909091 16.3636364,9 C16.3636364,13.0909091 13.0909091,16.3636364 9,16.3636364 M9,0 C4.00909091,0 0,4.00909091 0,9 C0,13.9909091 4.00909091,18 9,18 C13.9909091,18 18,13.9909091 18,9 C18,4.00909091 13.9909091,0 9,0 M12.0272727,5.97211364 C11.7,5.64565909 11.2090909,5.64565909 10.8818182,5.97211364 L9,7.85393182 L7.11818182,5.97211364 C6.79090909,5.64565909 6.3,5.64565909 5.97272727,5.97211364 C5.64545455,6.29938636 5.64545455,6.79029545 5.97272727,7.11756818 L7.85372727,8.99938636 L5.97272727,10.8812045 C5.64545455,11.2084773 5.64545455,11.6993864 5.97272727,12.0266591 C6.13636364,12.1911136 6.3,12.2721136 6.54545455,12.2721136 C6.79090909,12.2721136 6.95454545,12.1911136 7.11818182,12.0266591 L9,10.1456591 L10.8818182,12.0266591 C11.0454545,12.1911136 11.2909091,12.2721136 11.4545455,12.2721136 C11.6181818,12.2721136 11.8636364,12.1911136 12.0272727,12.0266591 C12.3537273,11.6993864 12.3537273,11.2084773 12.0272727,10.8812045 L10.1454545,8.99938636 L12.0272727,7.11756818 C12.3537273,6.79029545 12.3537273,6.29938636 12.0272727,5.97211364"/>
+</svg>
diff --git a/assets/sdc-icons/common/x-circle.svg b/assets/sdc-icons/common/x-circle.svg
new file mode 100644
index 0000000..15982ce
--- /dev/null
+++ b/assets/sdc-icons/common/x-circle.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+ <g fill-rule="evenodd" transform="translate(1 1)">
+ <path id="x-copy-a" d="M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M14.2591,7.29935 C13.8591,6.90035 13.2591,6.90035 12.8591,7.29935 L10.5591,9.59935 L8.2591,7.29935 C7.8591,6.90035 7.2591,6.90035 6.8591,7.29935 C6.4591,7.69935 6.4591,8.29935 6.8591,8.69935 L9.1581,10.99935 L6.8591,13.29935 C6.4591,13.69935 6.4591,14.29935 6.8591,14.69935 C7.0591,14.90035 7.2591,14.99935 7.5591,14.99935 C7.8591,14.99935 8.0591,14.90035 8.2591,14.69935 L10.5591,12.40035 L12.8591,14.69935 C13.0591,14.90035 13.3591,14.99935 13.5591,14.99935 C13.7591,14.99935 14.0591,14.90035 14.2591,14.69935 C14.6581,14.29935 14.6581,13.69935 14.2591,13.29935 L11.9591,10.99935 L14.2591,8.69935 C14.6581,8.29935 14.6581,7.69935 14.2591,7.29935"/>
+ </g>
+</svg>
diff --git a/assets/sdc-icons/components/checkbox_checked.svg b/assets/sdc-icons/components/checkbox_checked.svg
new file mode 100644
index 0000000..520c7b6
--- /dev/null
+++ b/assets/sdc-icons/components/checkbox_checked.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+ <path fill-rule="evenodd" d="M2,0 L12,-2.22044605e-16 C13.1045695,5.56104062e-16 14,0.8954305 14,2 L14,12 C14,13.1045695 13.1045695,14 12,14 L2,14 C0.8954305,14 8.94280938e-16,13.1045695 -2.22044605e-16,12 L-2.22044605e-16,2 C-3.57315355e-16,0.8954305 0.8954305,-1.91384796e-17 2,-2.22044605e-16 Z M3.85355339,7.54977605 C3.65829124,7.35451391 3.34170876,7.35451391 3.14644661,7.54977605 C2.95118446,7.7450382 2.95118446,8.06162069 3.14644661,8.25688283 L5.71469032,10.8251265 C5.93114093,11.0415771 6.28952386,11.0144698 6.47095446,10.7679244 L10.8653572,4.79638422 C11.0290275,4.57397322 10.9814087,4.26099251 10.7589977,4.09732224 C10.5365867,3.93365198 10.223606,3.98127076 10.0599357,4.20368177 L6.01038326,9.70660592 L3.85355339,7.54977605 Z"/>
+</svg>
diff --git a/assets/sdc-icons/components/checkbox_disabled.svg b/assets/sdc-icons/components/checkbox_disabled.svg
new file mode 100644
index 0000000..a032573
--- /dev/null
+++ b/assets/sdc-icons/components/checkbox_disabled.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14">
+
+ <path id="disabled-a" d="M2,0 L12,-2.22044605e-16 C13.1045695,5.56104062e-16 14,0.8954305 14,2 L14,12 C14,13.1045695 13.1045695,14 12,14 L2,14 C0.8954305,14 8.94280938e-16,13.1045695 -2.22044605e-16,12 L-2.22044605e-16,2 C-3.57315355e-16,0.8954305 0.8954305,-1.91384796e-17 2,-2.22044605e-16 Z"/>
+
+ <g fill-rule="evenodd">
+ <use fill="#FFF" xlink:href="#disabled-a"/>
+ <path stroke="#000" d="M2,0.5 C1.17157288,0.5 0.5,1.17157288 0.5,2 L0.5,12 C0.5,12.8284271 1.17157288,13.5 2,13.5 L12,13.5 C12.8284271,13.5 13.5,12.8284271 13.5,12 L13.5,2 C13.5,1.17157288 12.8284271,0.5 12,0.5 L2,0.5 Z"/>
+
+</svg>
diff --git a/assets/sdc-icons/components/radio_checked .svg b/assets/sdc-icons/components/radio_checked .svg
new file mode 100644
index 0000000..534d05d
--- /dev/null
+++ b/assets/sdc-icons/components/radio_checked .svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+ <g fill-rule="evenodd">
+ <path fill-rule="nonzero" d="M7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 Z M7,13.1764706 C10.4111705,13.1764706 13.1764706,10.4111705 13.1764706,7 C13.1764706,3.58882949 10.4111705,0.823529412 7,0.823529412 C3.58882949,0.823529412 0.823529412,3.58882949 0.823529412,7 C0.823529412,10.4111705 3.58882949,13.1764706 7,13.1764706 Z"/>
+ <circle cx="7" cy="7" r="4"/>
+
+</svg>
diff --git a/assets/sdc-icons/components/radio_disabled.svg b/assets/sdc-icons/components/radio_disabled.svg
new file mode 100644
index 0000000..0906f66
--- /dev/null
+++ b/assets/sdc-icons/components/radio_disabled.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+ <g fill-rule="evenodd">
+ <path d="M7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 C8.35813029,0 9.62592397,0.386776975 10.699241,1.0561909 C12.6811805,2.29230086 14,4.49213704 14,7 C14,10.8659932 10.8659932,14 7,14 Z"/>
+ <path fill="#FFF" d="M7,13 C10.3137085,13 13,10.3137085 13,7 C13,3.6862915 10.3137085,1 7,1 C3.6862915,1 1,3.6862915 1,7 C1,10.3137085 3.6862915,13 7,13 Z"/>
+
+</svg>
diff --git a/assets/sdc-icons/d_24px.svg b/assets/sdc-icons/d_24px.svg
new file mode 100644
index 0000000..0edeb03
--- /dev/null
+++ b/assets/sdc-icons/d_24px.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>D_24px </title><path d="M15.2,11.92a4,4,0,0,1-1.08,3A4.3,4.3,0,0,1,11,16H8.8V8h2.43a4,4,0,0,1,2.93,1A3.89,3.89,0,0,1,15.2,11.92ZM13.84,12q0-2.88-2.64-2.88H10.09V14.9H11C12.9,14.9,13.84,13.92,13.84,12Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/d_60px.svg b/assets/sdc-icons/d_60px.svg
new file mode 100644
index 0000000..cd9eb3d
--- /dev/null
+++ b/assets/sdc-icons/d_60px.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>D_60px </title><path d="M36.8,29.84a8.55,8.55,0,0,1-2.3,6.43q-2.3,2.23-6.62,2.23H23.2v-17h5.17a8.46,8.46,0,0,1,6.21,2.19A8.22,8.22,0,0,1,36.8,29.84Zm-2.88.09q0-6.1-5.62-6.11H25.93V36.16h1.95Q33.91,36.16,33.92,29.93Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/allotted_resource.svg b/assets/sdc-icons/resources_24/allotted_resource.svg
new file mode 100644
index 0000000..6807bd0
--- /dev/null
+++ b/assets/sdc-icons/resources_24/allotted_resource.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Aloted_24px</title><path d="M17,12H14.25V10H15a1,1,0,0,0,1-1V7a1,1,0,0,0-1-1H13a1,1,0,0,0-1,1v.76H10V7A1,1,0,0,0,9,6H7A1,1,0,0,0,6,7V9a1,1,0,0,0,1,1h.76v2H7a1,1,0,0,0-1,1v2a1,1,0,0,0,1,1H9a1,1,0,0,0,1-1v-.76h2V17a1,1,0,0,0,1,1h4a1,1,0,0,0,1-1V13A1,1,0,0,0,17,12ZM15,7V9H13V7ZM7,7H9V9H7Zm2,8H7V13H9Zm3-2v.76H10V13a1,1,0,0,0-1-1H8.25V10H9a1,1,0,0,0,1-1V8.25h2V9a1,1,0,0,0,1,1h.76v2H13A1,1,0,0,0,12,13Zm5,4H13V13h4Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/applicationServer.svg b/assets/sdc-icons/resources_24/applicationServer.svg
new file mode 100644
index 0000000..1510f4c
--- /dev/null
+++ b/assets/sdc-icons/resources_24/applicationServer.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Applcation Server-24px</title><path d="M10.5,8h3a.5.5,0,0,0,0-1h-3a.5.5,0,0,0,0,1Z"/><path d="M10.5,10h3a.5.5,0,0,0,0-1h-3a.5.5,0,0,0,0,1Z"/><path d="M10.5,12h3a.5.5,0,0,0,0-1h-3a.5.5,0,0,0,0,1Z"/><circle cx="12" cy="16" r="1"/><path d="M17.5,12H16V4.75A.76.76,0,0,0,15.25,4H8.75A.76.76,0,0,0,8,4.75v14.5a.76.76,0,0,0,.75.75h6.5a.76.76,0,0,0,.75-.75V17h1.5a.5.5,0,0,0,.5-.5v-4A.5.5,0,0,0,17.5,12ZM15,12h-.5a.5.5,0,0,0-.5.5v4a.5.5,0,0,0,.5.5H15v2H9V5h6Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/borderElement.svg b/assets/sdc-icons/resources_24/borderElement.svg
new file mode 100644
index 0000000..789a5c7
--- /dev/null
+++ b/assets/sdc-icons/resources_24/borderElement.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Border Element_24px</title><path d="M22.88,11.15,18,2.37A.72.72,0,0,0,17.37,2H6.63A.72.72,0,0,0,6,2.37L1.12,11.15a.73.73,0,0,0,0,.7L6,20.63a.72.72,0,0,0,.63.37H17.37a.72.72,0,0,0,.63-.37l4.88-8.78A.73.73,0,0,0,22.88,11.15ZM17.21,20H6.79L2.07,11.5,6.79,3H17.21l4.72,8.5Z"/><path d="M6.17,8.12a.5.5,0,0,0,0,.71L7.2,10H4.5a.5.5,0,0,0,0,1H7.18l-1,1.16a.51.51,0,0,0,0,.71.5.5,0,0,0,.34.13.51.51,0,0,0,.37-.17L9,10.48,6.88,8.16A.51.51,0,0,0,6.17,8.12Z"/><path d="M15,11.51l2.12,2.32a.5.5,0,0,0,.37.17.5.5,0,0,0,.37-.84L16.81,12H19.5a.5.5,0,0,0,0-1H16.82l1.05-1.17a.5.5,0,1,0-.74-.67Z"/><path d="M13.17,16.14,12,17.2V14.5a.5.5,0,0,0-1,0v2.68l-1.16-1a.5.5,0,0,0-.71,0,.5.5,0,0,0,0,.71L11.52,19l2.32-2.11a.5.5,0,1,0-.67-.74Z"/><path d="M12.49,4,10.16,6.14a.5.5,0,0,0,.68.74L12,5.82V8.5a.5.5,0,0,0,1,0V5.82l1.17,1.06A.55.55,0,0,0,14.5,7a.5.5,0,0,0,.34-.88Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/call_controll.svg b/assets/sdc-icons/resources_24/call_controll.svg
new file mode 100644
index 0000000..b531db2
--- /dev/null
+++ b/assets/sdc-icons/resources_24/call_controll.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill-rule:evenodd;}</style></defs><title>Call control_24px </title><path class="cls-1" d="M15.92,13h-.58c-.54,0-1.05,0-1.59,0a1.25,1.25,0,0,0-1,.29l-.12.19a3,3,0,0,1-.16.36,2.19,2.19,0,0,1-1.7-.52,3.9,3.9,0,0,1-1.51-2.68,3.64,3.64,0,0,1,.44-.31l.1-.07a1.14,1.14,0,0,0,.27-1.14,6.18,6.18,0,0,1-.32-2A1.12,1.12,0,0,0,8.62,6H6.11A1.11,1.11,0,0,0,5,7.11,10.89,10.89,0,0,0,15.9,18,1.11,1.11,0,0,0,17,16.85V14.31A1.26,1.26,0,0,0,15.92,13ZM16,16.85a.11.11,0,0,1-.11.11A9.89,9.89,0,0,1,6,7.11.11.11,0,0,1,6.11,7H8.62a.12.12,0,0,1,.12.11,7.23,7.23,0,0,0,.37,2.32s0,.06,0,.09c-.84.51-.85.79-.85,1a4.75,4.75,0,0,0,1.89,3.64,3,3,0,0,0,2.71.67c.11,0,.37-.11.64-.78h.19c.58,0,1.11,0,1.67,0h.52a.44.44,0,0,1,.14.29Z"/><polygon class="cls-1" points="15 10.99 14.25 10.25 16 8.5 15.5 8 13.75 9.75 13 9 13 10.99 15 10.99"/><polygon class="cls-1" points="13.5 8 15.25 6.25 16 7 16 5 14 5 14.75 5.75 13 7.5 13.5 8"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/cloudep.svg b/assets/sdc-icons/resources_24/cloudep.svg
new file mode 100644
index 0000000..86e6402
--- /dev/null
+++ b/assets/sdc-icons/resources_24/cloudep.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Network Cloud_24px</title><path d="M17.93,10.07A5.22,5.22,0,0,0,13,6C9.8,5.84,8.53,7.16,8,8.3A.5.5,0,1,0,9,8.7c.53-1.23,1.9-1.81,3.95-1.69h.14A4.1,4.1,0,0,1,17,10.58L17,11h.45A2.7,2.7,0,0,1,20,13.62a2.3,2.3,0,0,1-.73,1.67A2.56,2.56,0,0,1,17.5,16h-11A2.58,2.58,0,0,1,4,13.5,2.5,2.5,0,0,1,6.5,11,2.85,2.85,0,0,1,9,12.68a.5.5,0,0,0,.64.29.5.5,0,0,0,.3-.64A3.88,3.88,0,0,0,6.5,10,3.5,3.5,0,0,0,3,13.5,3.6,3.6,0,0,0,6.5,17h11A3.61,3.61,0,0,0,20,16a3.38,3.38,0,0,0,1-2.4A3.71,3.71,0,0,0,17.93,10.07Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/collaboration.svg b/assets/sdc-icons/resources_24/collaboration.svg
new file mode 100644
index 0000000..60463f8
--- /dev/null
+++ b/assets/sdc-icons/resources_24/collaboration.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Collaboration_24px </title><path d="M18,10l-.19,0-2.1-3.16A2,2,0,1,0,13,5a1.85,1.85,0,0,0,.15.74L8,7.68A2,2,0,1,0,6,10a1,1,0,0,0,.25,0V13A1,1,0,0,0,6,13a2,2,0,1,0,1.76,2.93L11,16.4a2,2,0,0,0,4-.4,2.05,2.05,0,0,0-.09-.56l1.87-1.87A2,2,0,0,0,18,14a2,2,0,0,0,0-4Zm-.71.14a2,2,0,0,0-.83.59l-2.14-.53L14.62,7A1.58,1.58,0,0,0,15,7l.19,0ZM13,14a2,2,0,0,0-1.08.32L9.75,11.84,11.26,10l2.53.63-.32,3.48A1.84,1.84,0,0,0,13,14ZM7.69,9.06l3,.75L9.42,11.45,7.52,9.29C7.58,9.21,7.64,9.14,7.69,9.06Zm3.92.46,2.28-2.86.24.13-.3,3.29Zm1.91-3.19L11.07,9.39,7.9,8.59A2.33,2.33,0,0,0,8,8.21l5.41-2ZM6.75,9.85a1.94,1.94,0,0,0,.4-.22L9.1,11.85,7.56,13.77a2,2,0,0,0-.81-.62Zm1.09,4.37,1.59-2,2.11,2.41A2,2,0,0,0,11,15.89l-3.07-.44A1.63,1.63,0,0,0,8,15,2,2,0,0,0,7.84,14.22Zm6.12,0,.32-3.55,1.9.48A2,2,0,0,0,16,12a2,2,0,0,0,.43,1.22L14.7,15A2.16,2.16,0,0,0,14,14.25Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/compute.svg b/assets/sdc-icons/resources_24/compute.svg
new file mode 100644
index 0000000..d28715c
--- /dev/null
+++ b/assets/sdc-icons/resources_24/compute.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Compute-24px</title><path d="M9.75,15h4.5a.76.76,0,0,0,.75-.75V9.75A.76.76,0,0,0,14.25,9H9.75A.76.76,0,0,0,9,9.75v4.5A.76.76,0,0,0,9.75,15ZM10,10h4v4H10Z"/><path d="M19.5,12a.5.5,0,0,0,0-1H18V9h1.5a.5.5,0,0,0,0-1H18V6.75A.76.76,0,0,0,17.25,6H15V4.5a.5.5,0,0,0-1,0V6H12V4.5a.5.5,0,0,0-1,0V6H9V4.5a.5.5,0,0,0-1,0V6H6.75A.76.76,0,0,0,6,6.75V9H4.5a.5.5,0,0,0,0,1H6v2H4.5a.5.5,0,0,0,0,1H6v2H4.5a.5.5,0,0,0,0,1H6v1.25a.76.76,0,0,0,.75.75H9v1.5a.5.5,0,0,0,1,0V18h2v1.5a.5.5,0,0,0,1,0V18h2v1.5a.5.5,0,0,0,1,0V18h1.25a.76.76,0,0,0,.75-.75V15h1.5a.5.5,0,0,0,0-1H18V12ZM17,17H7V7H17Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/connector.svg b/assets/sdc-icons/resources_24/connector.svg
new file mode 100644
index 0000000..052c50e
--- /dev/null
+++ b/assets/sdc-icons/resources_24/connector.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Connector_24px_</title><path d="M14,4.5a.5.5,0,0,0-.5-.5H13V3H12V4h-.5a.5.5,0,0,0-.5.5V6h3Z"/><polygon points="16 15 13 15 13 9 14 9 14 7 11 7 11 9 12 9 12 15 9 15 9 14 7 14 7 17 9 17 9 16 16 16 16 17 18 17 18 14 16 14 16 15"/><path d="M21,15v-.5a.5.5,0,0,0-.5-.5H19v3h1.5a.5.5,0,0,0,.5-.5V16h1V15Z"/><path d="M4,14.5V15H3v1H4v.5a.5.5,0,0,0,.5.5H6V14H4.5A.5.5,0,0,0,4,14.5Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/cp.svg b/assets/sdc-icons/resources_24/cp.svg
new file mode 100644
index 0000000..9a51f97
--- /dev/null
+++ b/assets/sdc-icons/resources_24/cp.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>cp_24px</title><path d="M9.4,9.09a2.17,2.17,0,0,0-1.77.78A3.25,3.25,0,0,0,7,12a3.3,3.3,0,0,0,.62,2.17,2.24,2.24,0,0,0,1.8.73,5.36,5.36,0,0,0,1-.09c.31-.07.64-.15,1-.26v1.09A6.2,6.2,0,0,1,9.24,16a3.47,3.47,0,0,1-2.7-1,4.21,4.21,0,0,1-.94-3,4.6,4.6,0,0,1,.46-2.12A3.12,3.12,0,0,1,7.38,8.49a4,4,0,0,1,2-.49,5.24,5.24,0,0,1,2.27.5l-.47,1.06c-.27-.12-.56-.23-.86-.33A3.31,3.31,0,0,0,9.4,9.09Z"/><path d="M18.4,10.46a2.22,2.22,0,0,1-.82,1.87,3.66,3.66,0,0,1-2.34.65h-.83v2.91H13.1V8.11h2.3a3.55,3.55,0,0,1,2.25.6A2.1,2.1,0,0,1,18.4,10.46Zm-4,1.45h.69a2.51,2.51,0,0,0,1.48-.34,1.2,1.2,0,0,0,.47-1.06,1.19,1.19,0,0,0-.42-1,2.12,2.12,0,0,0-1.31-.33h-.91Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/dcae_analytics.svg b/assets/sdc-icons/resources_24/dcae_analytics.svg
new file mode 100644
index 0000000..6afaffd
--- /dev/null
+++ b/assets/sdc-icons/resources_24/dcae_analytics.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Analitics_24px</title><g id="Layer_2" data-name="Layer 2"><path d="M17.5,17H16v-.5a.5.5,0,0,0-1,0V17H13v-.5a.5.5,0,0,0-1,0V17H10v-.5a.5.5,0,0,0-1,0V17H7V12.81l1.91-1.93A1.45,1.45,0,0,0,9.5,11a1.64,1.64,0,0,0,.5-.09l1.36,1.63a1.48,1.48,0,0,0-.36,1,1.5,1.5,0,0,0,3,0,1.52,1.52,0,0,0-.38-1l2.47-3.57A1.84,1.84,0,0,0,16.5,9a1.5,1.5,0,1,0-1.06-.44L13,12.09a1.64,1.64,0,0,0-.5-.09,1.51,1.51,0,0,0-.53.1l-1.35-1.62a1.48,1.48,0,0,0,.38-1,1.5,1.5,0,0,0-3,0,1.46,1.46,0,0,0,.32.91L7,11.74V6.5a.5.5,0,0,0-1,0V18H17.5a.5.5,0,0,0,0-1Zm-1-10a.5.5,0,1,1-.5.5A.5.5,0,0,1,16.5,7ZM13,13.5a.5.5,0,1,1-.5-.5A.5.5,0,0,1,13,13.5ZM9.5,9a.5.5,0,1,1-.5.5A.5.5,0,0,1,9.5,9Z"/></g></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/dcae_collector.svg b/assets/sdc-icons/resources_24/dcae_collector.svg
new file mode 100644
index 0000000..fa3b8d5
--- /dev/null
+++ b/assets/sdc-icons/resources_24/dcae_collector.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Collector_24px</title><g id="Layer_2" data-name="Layer 2"><path d="M20,8a2,2,0,0,0-1.93,1.5H15a3,3,0,0,0-5.9,0H5.93a2,2,0,1,0,0,1H9.05A3,3,0,0,0,11.5,13v3.12a2,2,0,1,0,1,0V13A3,3,0,0,0,15,10.5h3.12A2,2,0,1,0,20,8ZM4,11a1,1,0,1,1,1-1A1,1,0,0,1,4,11Zm9,7a1,1,0,1,1-1-1A1,1,0,0,1,13,18Zm-1-6a2,2,0,1,1,2-2A2,2,0,0,1,12,12Zm8-1a1,1,0,1,1,1-1A1,1,0,0,1,20,11Z"/></g></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/dcae_database.svg b/assets/sdc-icons/resources_24/dcae_database.svg
new file mode 100644
index 0000000..ab47aa2
--- /dev/null
+++ b/assets/sdc-icons/resources_24/dcae_database.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Database-24px</title><path d="M18.5,9H5.5A1.5,1.5,0,0,0,4,10.5v2A1.5,1.5,0,0,0,5.5,14h13A1.5,1.5,0,0,0,20,12.5v-2A1.5,1.5,0,0,0,18.5,9Zm.5,3.5a.5.5,0,0,1-.5.5H5.5a.5.5,0,0,1-.5-.5v-2a.5.5,0,0,1,.5-.5h13a.5.5,0,0,1,.5.5Z"/><path d="M18.5,15H5.5A1.5,1.5,0,0,0,4,16.5v1a.5.5,0,0,0,1,0v-1a.53.53,0,0,1,.15-.35A.47.47,0,0,1,5.5,16h13a.5.5,0,0,1,.5.5v2a.5.5,0,0,1-.5.5H8.5a.5.5,0,0,0,0,1h10A1.5,1.5,0,0,0,20,18.5v-2A1.5,1.5,0,0,0,18.5,15Z"/><path d="M17.5,11h-5a.5.5,0,0,0,0,1h5a.5.5,0,0,0,0-1Z"/><path d="M17.5,18a.5.5,0,0,0,0-1h-5a.5.5,0,0,0,0,1Z"/><path d="M18.5,3H5.5A1.5,1.5,0,0,0,4,4.5v2A1.5,1.5,0,0,0,5.5,8h13A1.5,1.5,0,0,0,20,6.5v-2A1.5,1.5,0,0,0,18.5,3ZM19,6.5a.5.5,0,0,1-.5.5H5.5A.5.5,0,0,1,5,6.5v-2A.5.5,0,0,1,5.5,4h13a.5.5,0,0,1,.5.5Z"/><path d="M17.5,5h-5a.5.5,0,0,0,0,1h5a.5.5,0,0,0,0-1Z"/><circle cx="6.5" cy="11.5" r="0.5"/><circle cx="6.5" cy="17.5" r="0.5"/><circle cx="6.5" cy="5.5" r="0.5"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/dcae_machineLearning.svg b/assets/sdc-icons/resources_24/dcae_machineLearning.svg
new file mode 100644
index 0000000..8e64914
--- /dev/null
+++ b/assets/sdc-icons/resources_24/dcae_machineLearning.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><defs><style>.cls-1{fill:none;clip-rule:evenodd;}.cls-2{clip-path:url(#clip-path);}</style><clipPath id="clip-path"><path class="cls-1" d="M-15.17-16a1.54,1.54,0,0,1-1.54-1.53,1.54,1.54,0,0,1,1.54-1.54,1.54,1.54,0,0,1,1.54,1.54A1.54,1.54,0,0,1-15.17-16Zm2.05-.69.85-.84-.85-.85v-1.21h-1.2l-.85-.84-.85.84h-1.2v1.21l-.85.85.85.84v1.21H-16l.85.85.85-.85h1.2Z"/></clipPath></defs><title>Rules Security_24px copy 5</title><path d="M19,9.69V9.24A6.28,6.28,0,0,0,12.7,3h-.46A6.49,6.49,0,0,0,7.6,5,5.6,5.6,0,0,0,6,9.1a.61.61,0,0,1-.09.35L4.09,12.19a.51.51,0,0,0-.07.23s0,0,0,.07,0,.06,0,.09a.5.5,0,0,0,.49.43H5.84a.14.14,0,0,1,.11.05.13.13,0,0,1,0,.11L6,14.7a1.29,1.29,0,0,0,.38.92,1.26,1.26,0,0,0,.91.39H8.65a1.24,1.24,0,0,1,.85.45l1.58,2.3a.48.48,0,0,0,.41.21.46.46,0,0,0,.28-.08.5.5,0,0,0,.13-.7l-1.57-2.3A2.21,2.21,0,0,0,8.66,15H7.28a.31.31,0,0,1-.3-.3l0-1.54a1.17,1.17,0,0,0-.34-.83A1.15,1.15,0,0,0,5.84,12H5.41L6.7,10A1.58,1.58,0,0,0,7,9.06,4.62,4.62,0,0,1,8.32,5.67,5.54,5.54,0,0,1,12.24,4h.46A5.29,5.29,0,0,1,18,9.24v.45a7.3,7.3,0,0,1-.66,2.71c-.67,1.75-1.36,3.56.76,6.33a.5.5,0,0,0,.4.19.47.47,0,0,0,.3-.1.51.51,0,0,0,.1-.7c-1.79-2.33-1.28-3.66-.63-5.36A8.2,8.2,0,0,0,19,9.69Z"/><path d="M15.63,8.08l-1.2.13a3.81,3.81,0,0,0-.48-.5l.22-1.19-1-.44-.76,1a3.14,3.14,0,0,0-.69,0l-.68-1-1,.37.13,1.2a3.81,3.81,0,0,0-.5.48L8.52,7.83l-.44,1L9,9.55a3.14,3.14,0,0,0,0,.69l-1,.68.37,1,1.2-.13a3.81,3.81,0,0,0,.48.5l-.22,1.19,1,.44.76-.95a3.14,3.14,0,0,0,.69,0l.68,1,1-.37-.13-1.2a3.81,3.81,0,0,0,.5-.48l1.19.22.44-1L15,10.45a3.14,3.14,0,0,0,0-.69l1-.68ZM12,11.33A1.33,1.33,0,1,1,13.33,10,1.34,1.34,0,0,1,12,11.33Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/dcae_microservice.svg b/assets/sdc-icons/resources_24/dcae_microservice.svg
new file mode 100644
index 0000000..215682c
--- /dev/null
+++ b/assets/sdc-icons/resources_24/dcae_microservice.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Microservice_24px </title><path d="M9,9H6L4,12l2,3H9l2-3Zm-.52,5H6.53L5.2,12l1.34-2H8.45L9.8,12Z"/><path d="M13,13l-2,3,2,3h3l2-3-2-3Zm2.46,5H13.53L12.2,16l1.34-2h1.91l1.35,2Z"/><path d="M16,11l2-3L16,5H13L11,8l2,3ZM13.54,6h1.91L16.8,8l-1.34,2H13.53L12.2,8Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/dcae_source.svg b/assets/sdc-icons/resources_24/dcae_source.svg
new file mode 100644
index 0000000..72ba861
--- /dev/null
+++ b/assets/sdc-icons/resources_24/dcae_source.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Source_24px </title><path d="M10.1,17.15a3,3,0,0,1-2,.85A3.12,3.12,0,0,1,5,15.06,3,3,0,0,1,8,12H10v1l1-.75,1-.75-1-.75L10,10v1H7.93A4,4,0,0,0,4,15.08,4.14,4.14,0,0,0,8.06,19h0a4.07,4.07,0,0,0,2.7-1.13.5.5,0,0,0-.69-.72Z"/><path d="M18.8,12.15a.5.5,0,0,0-.7.72,3,3,0,0,1,.89,2A3.15,3.15,0,0,1,16,18a3.09,3.09,0,0,1-2.2-.82A3,3,0,0,1,13,16h1l-.75-1-.75-1-.75,1L11,16h1a3.93,3.93,0,0,0,1.15,1.89A4.1,4.1,0,0,0,15.9,19H16a4.17,4.17,0,0,0,4-4.11A3.94,3.94,0,0,0,18.8,12.15Z"/><path d="M8.62,9.89a.5.5,0,0,0,.45-.55,3,3,0,0,1,.57-2.12,3.12,3.12,0,0,1,4.21-.61,3,3,0,0,1,.73,4L14,10v2h2l-.68-.69a4,4,0,0,0-.85-5.49,4.15,4.15,0,0,0-5.6.77,4.08,4.08,0,0,0-.79,2.85A.51.51,0,0,0,8.62,9.89Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/dcae_utilty.svg b/assets/sdc-icons/resources_24/dcae_utilty.svg
new file mode 100644
index 0000000..8ae88e2
--- /dev/null
+++ b/assets/sdc-icons/resources_24/dcae_utilty.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>default orphan_24px</title><circle cx="6.44" cy="17.5" r="0.5"/><path d="M14.79,13.15a.5.5,0,0,0-.71,0,.49.49,0,0,0,0,.7l2.75,2.72a.73.73,0,0,1-.14,1l-1.07,1.08a1,1,0,0,1-.57.29.56.56,0,0,1-.44-.14l-2.84-2.67a.5.5,0,0,0-.71,0,.49.49,0,0,0,0,.7l2.84,2.67A1.49,1.49,0,0,0,15,20h.16a2,2,0,0,0,1.19-.58l1.07-1.08a1.73,1.73,0,0,0,.14-2.42Z"/><path d="M19.65,6.12h0L19.59,6a.56.56,0,0,1-.05-.08h0a.5.5,0,0,0-.44-.12l-.11,0h0s0,0-.08.06a.25.25,0,0,0-.08,0h0L17,7.82a.62.62,0,0,1-.87,0,.64.64,0,0,1-.17-.45.65.65,0,0,1,.17-.45l1.82-1.84L18,5l0-.06h0a.58.58,0,0,0,0-.14s0,0,0,0a.43.43,0,0,0,0-.11s0,0,0-.08l0,0a.41.41,0,0,0-.07-.11h0l-.09-.06-.06-.05h0A3.44,3.44,0,0,0,16.44,4a3.5,3.5,0,0,0-3.5,3.5,3.31,3.31,0,0,0,.15.95l-3,3L7.79,9.15s0,0,0,0a.76.76,0,0,0,.19-.5V7.3a.73.73,0,0,0-.41-.65L4.24,5,3,6.3,4.59,9.59a.72.72,0,0,0,.64.4H6.57a.75.75,0,0,0,.49-.19s0,0,0,0l2.29,2.29L6.48,15h0a2.5,2.5,0,1,0,2.5,2.5s0,0,0-.05l6.57-6.59a3.62,3.62,0,0,0,.94.14,3.5,3.5,0,0,0,3.5-3.5A3.45,3.45,0,0,0,19.65,6.12ZM6.46,9h-1L4.17,6.5l.27-.27L6.93,7.47v1Zm0,10a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,6.44,19Zm2.19-2.67a2.44,2.44,0,0,0-1-1l5.92-5.87a3.49,3.49,0,0,0,1,1ZM16.44,10a2.5,2.5,0,0,1,0-5l.15,0L15.4,6.22A1.63,1.63,0,0,0,16.55,9h0a1.54,1.54,0,0,0,1.13-.48l1.23-1.23c0,.07,0,.14,0,.21A2.5,2.5,0,0,1,16.44,10Z"/><path d="M15.44,18a.5.5,0,0,0,.35-.85l-2-2a.5.5,0,0,0-.71,0,.5.5,0,0,0,0,.7l2,2A.51.51,0,0,0,15.44,18Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/defaulticon.svg b/assets/sdc-icons/resources_24/defaulticon.svg
new file mode 100644
index 0000000..24d9f09
--- /dev/null
+++ b/assets/sdc-icons/resources_24/defaulticon.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>R_24px </title><path d="M10.31,12.8V16H9V8h2.26a3.69,3.69,0,0,1,2.29.58,2.07,2.07,0,0,1,.74,1.75,2.18,2.18,0,0,1-1.55,2.13L15,16H13.51L11.6,12.8Zm0-1.08h.9a2.08,2.08,0,0,0,1.33-.34,1.23,1.23,0,0,0,.41-1,1.09,1.09,0,0,0-.44-1,2.42,2.42,0,0,0-1.34-.3h-.86Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/firewall.svg b/assets/sdc-icons/resources_24/firewall.svg
new file mode 100644
index 0000000..f3028b8
--- /dev/null
+++ b/assets/sdc-icons/resources_24/firewall.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>VIRTUAL FIREWALL 2_24px</title><path d="M6,16h4a1,1,0,0,0,1-1V14a1,1,0,0,0-1-1H6a1,1,0,0,0-1,1v1A1,1,0,0,0,6,16Zm0-2h4v1h0v0H6Z"/><path d="M13,16h1a1,1,0,0,0,1-1V14a1,1,0,0,0-1-1H13a1,1,0,0,0-1,1v1A1,1,0,0,0,13,16Zm0-2h1v1h0v0H13Z"/><path d="M6.5,17h-1a.5.5,0,0,0,0,1h1a.5.5,0,0,0,0-1Z"/><path d="M14.5,17h-6a.5.5,0,0,0,0,1h6a.5.5,0,0,0,0-1Z"/><path d="M20,12.5c0-3.37-3.6-9-4.07-9.36A.53.53,0,0,0,15.5,3c-.65.11-.55.75-.31,2.45a18,18,0,0,1,.2,1.87,1.75,1.75,0,0,1-.46,1.27A1.59,1.59,0,0,1,13.75,9c-.74,0-1.06-.83-1.38-1.83C12.17,6.55,12,6,11.47,6h0c-1,0-2.16,3.34-2.43,5H4.5A1.5,1.5,0,0,0,3,12.5v6A1.5,1.5,0,0,0,4.5,20h11A1.5,1.5,0,0,0,17,18.5V17A4.47,4.47,0,0,0,20,12.5Zm-4,6a.5.5,0,0,1-.5.5H4.5a.5.5,0,0,1-.5-.5v-6a.5.5,0,0,1,.5-.5h11a.5.5,0,0,1,.5.5Zm1-2.61V12.5A1.5,1.5,0,0,0,15.5,11H10a13.24,13.24,0,0,1,1.35-3.67s0,.1.05.15c.3.94.79,2.51,2.32,2.53a2.74,2.74,0,0,0,1.9-.7,2.77,2.77,0,0,0,.75-2,17.66,17.66,0,0,0-.21-2s0-.08,0-.12C17.28,7.05,19,10.39,19,12.5A3.43,3.43,0,0,1,17,15.89Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/fortinet.svg b/assets/sdc-icons/resources_24/fortinet.svg
new file mode 100644
index 0000000..7189e83
--- /dev/null
+++ b/assets/sdc-icons/resources_24/fortinet.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>fortinet_24px</title><path id="path4408" d="M18.26,17A2.72,2.72,0,0,0,20,14.72v-.33H15.45V17ZM20,9.61V9.32A2.67,2.67,0,0,0,18.14,7H15.45V9.61ZM4,14.39v.32A2.69,2.69,0,0,0,5.74,17H8.53V14.39ZM5.86,7A2.67,2.67,0,0,0,4,9.32v.29H8.53V7ZM20,10.7H15.45v2.61H20ZM9.77,17h4.45V14.39H9.77V17ZM14.22,7H9.77V9.61h4.45ZM4,13.31H8.53V10.7H4Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/gateway.svg b/assets/sdc-icons/resources_24/gateway.svg
new file mode 100644
index 0000000..229eb9a
--- /dev/null
+++ b/assets/sdc-icons/resources_24/gateway.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Gateway_24px</title><path d="M18.87,9.16a.5.5,0,0,0-.74.67L19.2,11h-11l2.42-4h4.62L14.13,8.17a.49.49,0,0,0,0,.7A.46.46,0,0,0,14.5,9a.52.52,0,0,0,.38-.17L17,6.48,14.87,4.16a.5.5,0,0,0-.7,0,.5.5,0,0,0,0,.71L15.2,6H10L7,11H4.91a1.5,1.5,0,1,0,0,1H7l3,5H15.2l-1.07,1.16a.5.5,0,0,0,0,.71.59.59,0,0,0,.17.1.52.52,0,0,0,.18,0,.5.5,0,0,0,.37-.16l1-1.13.8-.87s0,0,0,0L17,16.5l-.31-.33s0,0,0,0h0l-1.79-2a.5.5,0,0,0-.71,0,.49.49,0,0,0,0,.7L15.2,16H10.54L8.15,12h11l-1.07,1.17a.49.49,0,0,0,0,.7.46.46,0,0,0,.33.13.49.49,0,0,0,.37-.16L21,11.5Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/loadBalancer.svg b/assets/sdc-icons/resources_24/loadBalancer.svg
new file mode 100644
index 0000000..4ed0b88
--- /dev/null
+++ b/assets/sdc-icons/resources_24/loadBalancer.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Load Balance_24px</title><path d="M18.5,13a.5.5,0,0,0-.5.5v1.89l-3.18-2.83A3.42,3.42,0,0,0,15,11.5a3.5,3.5,0,0,0-3-3.45V6.94a1.5,1.5,0,1,0-1,0V8.05A3.5,3.5,0,0,0,8,11.5a3.42,3.42,0,0,0,.18,1.06L5,15.39V13.5a.5.5,0,0,0-1,0V17H7.5a.5.5,0,0,0,0-1H5.81l2.82-2.5A3.5,3.5,0,0,0,11,15V18.2L9.84,17.14a.5.5,0,1,0-.68.74L11.5,20l2.34-2.12a.5.5,0,1,0-.68-.74L12,18.2V15a3.5,3.5,0,0,0,2.37-1.45L17.18,16H15.5a.5.5,0,0,0,0,1H19V13.5A.5.5,0,0,0,18.5,13Zm-7,1A2.5,2.5,0,1,1,14,11.5,2.5,2.5,0,0,1,11.5,14Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/mobility.svg b/assets/sdc-icons/resources_24/mobility.svg
new file mode 100644
index 0000000..1397228
--- /dev/null
+++ b/assets/sdc-icons/resources_24/mobility.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Mobility2_24px </title><path d="M14.5,21h-4A1.5,1.5,0,0,1,9,19.5v-8A1.5,1.5,0,0,1,10.5,10h4A1.5,1.5,0,0,1,16,11.5v8A1.5,1.5,0,0,1,14.5,21Zm-4-10a.5.5,0,0,0-.5.5v8a.5.5,0,0,0,.5.5h4a.5.5,0,0,0,.5-.5v-8a.5.5,0,0,0-.5-.5Z"/><path d="M13.5,19h-2a.5.5,0,0,1,0-1h2a.5.5,0,0,1,0,1Z"/><path d="M13.25,17h-1.5a.76.76,0,0,1-.75-.75v-3.5a.76.76,0,0,1,.75-.75h1.5a.76.76,0,0,1,.75.75v3.5A.76.76,0,0,1,13.25,17ZM12,16h1V13H12Z"/><path d="M17.75,15h-.23a.5.5,0,1,1,0-1h.23a2.18,2.18,0,0,0,1.58-.72A2.71,2.71,0,0,0,20,11.5a2.67,2.67,0,0,0-.56-1.64,1.86,1.86,0,0,0-1.19-.8L18,9l-.12-.22A3.34,3.34,0,0,0,15,7H14l-.14-.22A4.15,4.15,0,0,0,10.41,5,3.52,3.52,0,0,0,7.06,8.52L7,9H6.25a2.18,2.18,0,0,0-1.58.72A2.71,2.71,0,0,0,4,11.5,2.39,2.39,0,0,0,6.25,14h.21a.5.5,0,1,1,0,1H6.25A3.39,3.39,0,0,1,3,11.5,3.74,3.74,0,0,1,3.93,9,3.24,3.24,0,0,1,6.11,8a4.43,4.43,0,0,1,4.3-4,5.2,5.2,0,0,1,4.16,2H15a4.41,4.41,0,0,1,3.67,2.13,2.93,2.93,0,0,1,1.56,1.12A3.63,3.63,0,0,1,21,11.5,3.74,3.74,0,0,1,20.07,14,3.24,3.24,0,0,1,17.75,15Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/monitoring_template.svg b/assets/sdc-icons/resources_24/monitoring_template.svg
new file mode 100644
index 0000000..b5b2abc
--- /dev/null
+++ b/assets/sdc-icons/resources_24/monitoring_template.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Rules Network Template monitor_24px</title><path d="M19,7H5A1,1,0,0,0,4,8v8a1,1,0,0,0,1,1H19a1,1,0,0,0,1-1V8A1,1,0,0,0,19,7Zm0,9H5V8H19Z"/><path d="M6.5,10h3a.5.5,0,0,0,0-1h-3a.5.5,0,0,0,0,1Z"/><path d="M6.5,12h3a.5.5,0,0,0,0-1h-3a.5.5,0,0,0,0,1Z"/><path d="M6.5,14h3a.5.5,0,0,0,0-1h-3a.5.5,0,0,0,0,1Z"/><path d="M11.29,14.92a.59.59,0,0,0,.23.05A.49.49,0,0,0,12,14.7l1.69-3.35,1.42,1.44a.42.42,0,0,0,.12.08s0,0,0,0a.45.45,0,0,0,.27.08.48.48,0,0,0,.42-.22l2-3a.51.51,0,0,0-.14-.7.5.5,0,0,0-.69.14l-1.67,2.49-1.53-1.56-.06-.05s-.05,0-.07,0h0l-.09,0-.1,0h-.07l-.12,0-.06,0a.33.33,0,0,0-.1.06h0a.16.16,0,0,0,0,.07l-.05.06-2,4A.51.51,0,0,0,11.29,14.92Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/network.svg b/assets/sdc-icons/resources_24/network.svg
new file mode 100644
index 0000000..d38a788
--- /dev/null
+++ b/assets/sdc-icons/resources_24/network.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Network_24px</title><path d="M12,4a7.92,7.92,0,0,0-2.49.4,1.46,1.46,0,0,0-1-.4A1.5,1.5,0,0,0,7,5.5a2.11,2.11,0,0,0,0,.25A8,8,0,1,0,12,4Zm6.8,6.35a22.24,22.24,0,0,1-2.58,1.9c-.24-.53-.49-1.07-.77-1.6a1.48,1.48,0,0,0-.53-2.58,17.55,17.55,0,0,0-.56-2.65A7,7,0,0,1,18.8,10.35ZM15,10.91c.28.53.53,1.07.77,1.6-.36.22-.74.44-1.15.64l.09-.29A11.07,11.07,0,0,0,15,10.91ZM13.78,5.24A16,16,0,0,1,14.4,8a1.5,1.5,0,0,0-.78.28A14.3,14.3,0,0,0,9.93,5.93,1.55,1.55,0,0,0,10,5.5a1.36,1.36,0,0,0,0-.2A7.1,7.1,0,0,1,12,5,7,7,0,0,1,13.78,5.24ZM7.52,6.63A1.47,1.47,0,0,0,8.5,7a1.5,1.5,0,0,0,1.21-.62,14.34,14.34,0,0,1,3.56,2.27A1.46,1.46,0,0,0,13,9.5,1.5,1.5,0,0,0,14.5,11h0a11.64,11.64,0,0,1-.27,1.74c-.06.24-.13.48-.2.71-.35.17-.7.32-1.07.47s-.66.24-1,.34A1.5,1.5,0,0,0,10.5,13a1.55,1.55,0,0,0-.87.28,11.21,11.21,0,0,1-1.48-1.12A9.62,9.62,0,0,1,7,10.94a8.67,8.67,0,0,1-1.2-2.15A7,7,0,0,1,7.52,6.63Zm-2,2.76A9,9,0,0,0,6.6,11.24a10.46,10.46,0,0,0,1.22,1.3,11.53,11.53,0,0,0,1.45,1.1A1.51,1.51,0,0,0,9,14.5a1.62,1.62,0,0,0,.07.44,29.71,29.71,0,0,1-3.25.34A7,7,0,0,1,5,12,6.9,6.9,0,0,1,5.51,9.39Zm.6,6.37a28.31,28.31,0,0,0,3.2-.36A1.49,1.49,0,0,0,12,14.79c.4-.12.8-.26,1.19-.41.23-.09.44-.19.66-.29a10.31,10.31,0,0,1-3.43,4.72A7,7,0,0,1,6.11,15.76ZM12,19a7.48,7.48,0,0,1-1-.07,10.87,10.87,0,0,0,3.41-5.12c.56-.27,1.06-.55,1.54-.84.66,1.53,1.12,2.9,1.33,3.56A7,7,0,0,1,12,19Zm5.69-2.94c-.25-.76-.68-2-1.26-3.35a21.88,21.88,0,0,0,2.48-1.79A7.61,7.61,0,0,1,19,12,7,7,0,0,1,17.69,16.06Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/network_cloud.svg b/assets/sdc-icons/resources_24/network_cloud.svg
new file mode 100644
index 0000000..a5e928a
--- /dev/null
+++ b/assets/sdc-icons/resources_24/network_cloud.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title> Cloud_24px</title><path d="M17.5,17H6.5A3.6,3.6,0,0,1,3,13.5,3.5,3.5,0,0,1,6.5,10,3.9,3.9,0,0,1,10,12.33a.5.5,0,0,1-.3.64A.5.5,0,0,1,9,12.68,2.85,2.85,0,0,0,6.5,11,2.5,2.5,0,0,0,4,13.5,2.57,2.57,0,0,0,6.51,16h11a2.55,2.55,0,0,0,1.77-.7A2.34,2.34,0,0,0,20,13.62,2.7,2.7,0,0,0,17.48,11H17l0-.45A4.11,4.11,0,0,0,13.05,7h-.14C10.85,6.9,9.49,7.47,9,8.7A.5.5,0,1,1,8,8.3C8.53,7.16,9.79,5.82,13,6a5.23,5.23,0,0,1,5,4.05A3.71,3.71,0,0,1,21,13.62,3.36,3.36,0,0,1,20,16,3.63,3.63,0,0,1,17.5,17Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/networkrules.svg b/assets/sdc-icons/resources_24/networkrules.svg
new file mode 100644
index 0000000..e71894a
--- /dev/null
+++ b/assets/sdc-icons/resources_24/networkrules.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Rules Security_24px copy</title><path d="M14,6.08A.24.24,0,0,0,14,6V5.18A1.18,1.18,0,0,0,12.82,4H5.18A1.18,1.18,0,0,0,4,5.18V16.82A1.18,1.18,0,0,0,5.18,18H8l.09,0A7,7,0,1,0,14,6.08ZM5,16.82V5.18A.19.19,0,0,1,5.18,5h7.64a.19.19,0,0,1,.18.18V6A7,7,0,0,0,7.26,17H5.18A.19.19,0,0,1,5,16.82ZM13,19a6,6,0,1,1,6-6A6,6,0,0,1,13,19Z"/><path d="M15.87,12.05A2.49,2.49,0,0,0,11,12H10.5a1.5,1.5,0,0,0,0,3h5a1.5,1.5,0,0,0,.37-2.95Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/notification.svg b/assets/sdc-icons/resources_24/notification.svg
new file mode 100644
index 0000000..022b8a9
--- /dev/null
+++ b/assets/sdc-icons/resources_24/notification.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Notification_24px</title><path d="M17.86,15.52l-1.85-2V11.34a4.5,4.5,0,0,0-2-3.83V6a1,1,0,0,0-1-1H11a1,1,0,0,0-1,1V7.47a4.51,4.51,0,0,0-2.07,3.87v2.19l-1.8,2a1,1,0,0,0,0,1,.91.91,0,0,0,.79.47H10a2,2,0,0,0,4,0h3.08a.91.91,0,0,0,.79-.47A1,1,0,0,0,17.86,15.52ZM11,6h2V7H11Zm1,12a1,1,0,0,1-1-1h2A1,1,0,0,1,12,18ZM7,16l1.7-1.86.06-.09a1,1,0,0,0,.14-.51v-2.2A3.39,3.39,0,0,1,11.22,8h1.5A3.38,3.38,0,0,1,15,11.34v2.2a1,1,0,0,0,.14.51L17,16Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/objectStorage.svg b/assets/sdc-icons/resources_24/objectStorage.svg
new file mode 100644
index 0000000..e0464ce
--- /dev/null
+++ b/assets/sdc-icons/resources_24/objectStorage.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Object storage icon-24px</title><path d="M15.5,12h-2a.5.5,0,0,0,0,1h2a.5.5,0,0,0,0-1Z"/><path d="M15.5,14h-2a.5.5,0,0,0,0,1h2a.5.5,0,0,0,0-1Z"/><path d="M15.5,16h-2a.5.5,0,0,0,0,1h2a.5.5,0,0,0,0-1Z"/><path d="M21,10.5a3.63,3.63,0,0,0-.77-2.25,2.93,2.93,0,0,0-1.56-1.12A4.41,4.41,0,0,0,15,5h-.43a5.2,5.2,0,0,0-4.16-2,4.43,4.43,0,0,0-4.3,4A3.24,3.24,0,0,0,3.93,8,3.74,3.74,0,0,0,3,10.5,3.39,3.39,0,0,0,6.25,14H11v5.5A1.5,1.5,0,0,0,12.5,21h4A1.5,1.5,0,0,0,18,19.5V14a3.22,3.22,0,0,0,2.07-1A3.74,3.74,0,0,0,21,10.5Zm-4,9a.5.5,0,0,1-.5.5h-4a.5.5,0,0,1-.5-.5V9.5a.5.5,0,0,1,.5-.5h4a.5.5,0,0,1,.5.5Zm2.33-7.22A2.21,2.21,0,0,1,18,13V9.5A1.5,1.5,0,0,0,16.5,8h-4A1.5,1.5,0,0,0,11,9.5V13H6.25A2.39,2.39,0,0,1,4,10.5a2.71,2.71,0,0,1,.67-1.78A2.18,2.18,0,0,1,6.25,8H7l0-.48A3.52,3.52,0,0,1,10.41,4a4.15,4.15,0,0,1,3.48,1.78L14,6h1a3.34,3.34,0,0,1,2.9,1.8L18,8l.24,0a1.86,1.86,0,0,1,1.19.8A2.67,2.67,0,0,1,20,10.5,2.71,2.71,0,0,1,19.33,12.28Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/ossep.svg b/assets/sdc-icons/resources_24/ossep.svg
new file mode 100644
index 0000000..e7267d7
--- /dev/null
+++ b/assets/sdc-icons/resources_24/ossep.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Generic OSS_24PX</title><path d="M10.59,12A2.3,2.3,0,0,1,10,13.67a2.12,2.12,0,0,1-1.61.58,2.13,2.13,0,0,1-1.61-.58A2.35,2.35,0,0,1,6.25,12a2.28,2.28,0,0,1,.56-1.66,2.16,2.16,0,0,1,1.62-.58,2.09,2.09,0,0,1,1.6.58A2.28,2.28,0,0,1,10.59,12ZM7.26,12a1.78,1.78,0,0,0,.29,1.1,1,1,0,0,0,.87.37c.77,0,1.16-.49,1.16-1.47s-.38-1.48-1.15-1.48a1,1,0,0,0-.87.37A1.75,1.75,0,0,0,7.26,12Z"/><path d="M14.23,13a1.13,1.13,0,0,1-.44.93,2,2,0,0,1-1.24.34A3.06,3.06,0,0,1,11.26,14v-.86a4.56,4.56,0,0,0,.78.27,2.12,2.12,0,0,0,.58.08.85.85,0,0,0,.49-.11.41.41,0,0,0,.17-.35.39.39,0,0,0-.07-.23A.84.84,0,0,0,13,12.6l-.59-.3a2.5,2.5,0,0,1-.63-.36,1.45,1.45,0,0,1-.34-.4,1.19,1.19,0,0,1-.12-.54,1.11,1.11,0,0,1,.41-.91,1.75,1.75,0,0,1,1.13-.34,2.48,2.48,0,0,1,.68.09,5.34,5.34,0,0,1,.68.22l-.31.72c-.25-.09-.45-.16-.61-.2a2.5,2.5,0,0,0-.47-.05.66.66,0,0,0-.42.12.39.39,0,0,0-.14.32.46.46,0,0,0,.05.21.83.83,0,0,0,.19.18,6.66,6.66,0,0,0,.62.31,2.4,2.4,0,0,1,.87.58A1.13,1.13,0,0,1,14.23,13Z"/><path d="M17.75,13a1.13,1.13,0,0,1-.44.93,2,2,0,0,1-1.24.34A3.06,3.06,0,0,1,14.78,14v-.86a4.56,4.56,0,0,0,.78.27,2.12,2.12,0,0,0,.58.08.85.85,0,0,0,.49-.11A.41.41,0,0,0,16.8,13a.39.39,0,0,0-.07-.23.84.84,0,0,0-.22-.19l-.59-.3a2.5,2.5,0,0,1-.63-.36,1.45,1.45,0,0,1-.34-.4,1.19,1.19,0,0,1-.12-.54,1.11,1.11,0,0,1,.41-.91,1.75,1.75,0,0,1,1.13-.34,2.48,2.48,0,0,1,.68.09,5.34,5.34,0,0,1,.68.22l-.31.72c-.25-.09-.45-.16-.61-.2a2.5,2.5,0,0,0-.47-.05.66.66,0,0,0-.42.12.39.39,0,0,0-.14.32.46.46,0,0,0,.05.21.83.83,0,0,0,.19.18,5.52,5.52,0,0,0,.62.31,2.4,2.4,0,0,1,.87.58A1.13,1.13,0,0,1,17.75,13Z"/><path d="M19.62,17H4.38A1.38,1.38,0,0,1,3,15.62V8.38A1.38,1.38,0,0,1,4.38,7H19.62A1.38,1.38,0,0,1,21,8.38v7.24A1.38,1.38,0,0,1,19.62,17ZM4.38,8A.38.38,0,0,0,4,8.38v7.24a.38.38,0,0,0,.38.38H19.62a.38.38,0,0,0,.38-.38V8.38A.38.38,0,0,0,19.62,8Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/pmc.svg b/assets/sdc-icons/resources_24/pmc.svg
new file mode 100644
index 0000000..75cd180
--- /dev/null
+++ b/assets/sdc-icons/resources_24/pmc.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>C_24px </title><path d="M12.8,9.09a2.37,2.37,0,0,0-1.87.78A3.16,3.16,0,0,0,10.25,12a3.15,3.15,0,0,0,.66,2.17,2.39,2.39,0,0,0,1.89.73,5.92,5.92,0,0,0,1-.09c.33-.07.68-.15,1-.26v1.09a6.81,6.81,0,0,1-2.25.35,3.75,3.75,0,0,1-2.84-1,4.15,4.15,0,0,1-1-3,4.48,4.48,0,0,1,.48-2.12,3.35,3.35,0,0,1,1.39-1.4A4.53,4.53,0,0,1,12.81,8a5.75,5.75,0,0,1,2.39.5l-.5,1.06a9.41,9.41,0,0,0-.9-.33A3.66,3.66,0,0,0,12.8,9.09Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/port.svg b/assets/sdc-icons/resources_24/port.svg
new file mode 100644
index 0000000..7a7fe38
--- /dev/null
+++ b/assets/sdc-icons/resources_24/port.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>port-24px</title><path d="M18,5H6A1,1,0,0,0,5,6v9a1,1,0,0,0,1,1H8v2a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V16h2a1,1,0,0,0,1-1V6A1,1,0,0,0,18,5Zm0,10H16a1,1,0,0,0-1,1v2H9V16a1,1,0,0,0-1-1H6V6H8V8.5a.5.5,0,0,0,1,0V6h2V8.5a.5.5,0,0,0,1,0V6h2V8.5a.5.5,0,0,0,1,0V6h3Zm0-9Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/premisesep.svg b/assets/sdc-icons/resources_24/premisesep.svg
new file mode 100644
index 0000000..74a14a9
--- /dev/null
+++ b/assets/sdc-icons/resources_24/premisesep.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>User Office_24px</title><g id="Layer_2" data-name="Layer 2"><path d="M10.25,6H8.75A.76.76,0,0,0,8,6.75v1.5A.76.76,0,0,0,8.75,9h1.5A.76.76,0,0,0,11,8.25V6.75A.76.76,0,0,0,10.25,6ZM10,8H9V7h1Z"/><path d="M14.25,6h-1.5a.76.76,0,0,0-.75.75v1.5a.76.76,0,0,0,.75.75h1.5A.76.76,0,0,0,15,8.25V6.75A.76.76,0,0,0,14.25,6ZM14,8H13V7h1Z"/><path d="M10.25,10H8.75a.76.76,0,0,0-.75.75v1.5a.76.76,0,0,0,.75.75h1.5a.76.76,0,0,0,.75-.75v-1.5A.76.76,0,0,0,10.25,10ZM10,12H9V11h1Z"/><path d="M14.25,10h-1.5a.76.76,0,0,0-.75.75v1.5a.76.76,0,0,0,.75.75h1.5a.76.76,0,0,0,.75-.75v-1.5A.76.76,0,0,0,14.25,10ZM14,12H13V11h1Z"/><path d="M14.25,14h-1.5a.76.76,0,0,0-.75.75v1.5a.76.76,0,0,0,.75.75h1.5a.76.76,0,0,0,.75-.75v-1.5A.76.76,0,0,0,14.25,14ZM14,16H13V15h1Z"/><path d="M15.5,4h-8A1.5,1.5,0,0,0,6,5.5v12A1.5,1.5,0,0,0,7.5,19h8A1.5,1.5,0,0,0,17,17.5V5.5A1.5,1.5,0,0,0,15.5,4ZM10,18H9V15h1Zm6-.5a.5.5,0,0,1-.5.5H11V14.75a.76.76,0,0,0-.75-.75H8.75a.76.76,0,0,0-.75.75V18H7.5a.5.5,0,0,1-.5-.5V5.5A.5.5,0,0,1,7.5,5h8a.5.5,0,0,1,.5.5Z"/></g></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/router.svg b/assets/sdc-icons/resources_24/router.svg
new file mode 100644
index 0000000..d781b99
--- /dev/null
+++ b/assets/sdc-icons/resources_24/router.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Router_24px</title><path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,19a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"/><path d="M6.17,9.12a.51.51,0,0,0,0,.71L7.19,11H4.5a.5.5,0,0,0-.5.5.5.5,0,0,0,.5.5H7.19L6.13,13.16a.5.5,0,0,0,0,.71A.46.46,0,0,0,6.5,14a.52.52,0,0,0,.38-.17L9,11.48,6.87,9.16A.49.49,0,0,0,6.17,9.12Z"/><path d="M13.17,17.14,12,18.2V15.5a.5.5,0,0,0-1,0v2.69L9.83,17.14a.49.49,0,0,0-.7,0,.5.5,0,0,0,0,.71L11.51,20l2.33-2.11a.5.5,0,0,0,0-.71A.49.49,0,0,0,13.17,17.14Z"/><path d="M19.5,12H16.82l1.05-1.16a.5.5,0,0,0-.75-.67L15,12.51l2.12,2.32a.5.5,0,0,0,.37.17.46.46,0,0,0,.33-.13.5.5,0,0,0,0-.71L16.8,13h2.7a.5.5,0,0,0,.5-.5A.5.5,0,0,0,19.5,12Z"/><path d="M12.49,4,10.16,6.14a.5.5,0,0,0,.67.74L12,5.81V8.5a.5.5,0,0,0,1,0V5.83l1.17,1A.51.51,0,0,0,14.5,7a.5.5,0,0,0,.37-.17.5.5,0,0,0,0-.71Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/security.svg b/assets/sdc-icons/resources_24/security.svg
new file mode 100644
index 0000000..0fc4692
--- /dev/null
+++ b/assets/sdc-icons/resources_24/security.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Security_24px</title><path d="M17,8.08a1.08,1.08,0,0,0-1-1,8.82,8.82,0,0,1-4.1-.91.72.72,0,0,0-.82,0A9,9,0,0,1,7,7,1.09,1.09,0,0,0,6,8.09c-.09,1.49-.23,9,5.17,10.87a1.26,1.26,0,0,0,.33.05,1.14,1.14,0,0,0,.33-.05C17.05,17.15,17.1,10.17,17,8.08ZM7,8.15A.68.68,0,0,1,7,8a10.31,10.31,0,0,0,4.44-1A9.85,9.85,0,0,0,16,8s0,0,0,.1,0,.4,0,.64L7.61,13.5A16.48,16.48,0,0,1,7,8.15ZM11.52,18v0A6,6,0,0,1,8,14.45l8-4.52C15.86,12.61,15.07,16.78,11.52,18Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/securityrules.svg b/assets/sdc-icons/resources_24/securityrules.svg
new file mode 100644
index 0000000..54e2470
--- /dev/null
+++ b/assets/sdc-icons/resources_24/securityrules.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Rules Security_24px copy 4</title><path d="M14,6.08A.19.19,0,0,0,14,6V5.18A1.18,1.18,0,0,0,12.82,4H5.18A1.18,1.18,0,0,0,4,5.18V16.82A1.18,1.18,0,0,0,5.18,18H8.1A6.92,6.92,0,0,0,13,20,7,7,0,0,0,14,6.08ZM5.18,17A.19.19,0,0,1,5,16.82V5.18A.19.19,0,0,1,5.18,5h7.64a.19.19,0,0,1,.18.18V6a7,7,0,0,0-7,7,6.89,6.89,0,0,0,1.26,4ZM13,19a6,6,0,1,1,6-6A6,6,0,0,1,13,19Z"/><path d="M13,17a6,6,0,0,1-3-5.71c0-.22-.09-1.27.47-1.27A3.91,3.91,0,0,0,13,9a3.86,3.86,0,0,0,2.5,1c.5,0,.5.93.51,1.14A6.33,6.33,0,0,1,13,17Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/server.svg b/assets/sdc-icons/resources_24/server.svg
new file mode 100644
index 0000000..0f60577
--- /dev/null
+++ b/assets/sdc-icons/resources_24/server.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Server-24px</title><path d="M15.25,4H8.75A.76.76,0,0,0,8,4.75v14.5a.76.76,0,0,0,.75.75h6.5a.76.76,0,0,0,.75-.75V4.75A.76.76,0,0,0,15.25,4ZM15,19H9V5h6Z"/><path d="M10.5,8h3a.5.5,0,0,0,0-1h-3a.5.5,0,0,0,0,1Z"/><path d="M10.5,10h3a.5.5,0,0,0,0-1h-3a.5.5,0,0,0,0,1Z"/><path d="M10.5,12h3a.5.5,0,0,0,0-1h-3a.5.5,0,0,0,0,1Z"/><circle cx="12" cy="16" r="1"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/ucpe.svg b/assets/sdc-icons/resources_24/ucpe.svg
new file mode 100644
index 0000000..9893d3d
--- /dev/null
+++ b/assets/sdc-icons/resources_24/ucpe.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>universal Cpe_24px</title><path d="M8.5,11H5.83l1-1.16a.48.48,0,0,0,0-.7.49.49,0,0,0-.7,0L4,11.53l2.09,2.32a.5.5,0,0,0,.37.16.54.54,0,0,0,.34-.12.5.5,0,0,0,0-.71L5.79,12H8.5a.5.5,0,0,0,.5-.5A.5.5,0,0,0,8.5,11Z"/><path d="M17.9,10.19a.49.49,0,0,0-.7,0,.5.5,0,0,0,0,.71l1,1.14H15.5a.5.5,0,0,0-.5.5.5.5,0,0,0,.5.5h2.72l-1.08,1.2a.5.5,0,0,0,0,.7.5.5,0,0,0,.33.13.52.52,0,0,0,.38-.17L20,12.51Z"/><path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,19a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"/><path d="M13.17,17.14,12,18.2V15.5a.5.5,0,0,0-1,0v2.69L9.83,17.13a.5.5,0,0,0-.67.75L11.51,20l2.33-2.11a.5.5,0,0,0,0-.71A.49.49,0,0,0,13.17,17.14Z"/><path d="M14.84,6.13,12.49,4,10.16,6.14a.5.5,0,0,0,.67.74L12,5.82V8.5a.5.5,0,0,0,1,0V5.83l1.17,1A.51.51,0,0,0,14.5,7a.5.5,0,0,0,.37-.17A.5.5,0,0,0,14.84,6.13Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/vRouter.svg b/assets/sdc-icons/resources_24/vRouter.svg
new file mode 100644
index 0000000..6ab2ee4
--- /dev/null
+++ b/assets/sdc-icons/resources_24/vRouter.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Virual Router_24px</title><circle cx="6.5" cy="15.5" r="0.5"/><circle cx="8.5" cy="15.5" r="0.5"/><circle cx="10.5" cy="15.5" r="0.5"/><path d="M15.5,13,17,10.37a.25.25,0,0,0-.43-.25L15.5,12l-1.06-1.85a.25.25,0,0,0-.34-.1.25.25,0,0,0-.09.34Z"/><path d="M18.64,13A3.49,3.49,0,1,0,12,11.5a3.45,3.45,0,0,0,.35,1.5H9V7.5a.5.5,0,0,0-1,0V13H5.5A1.5,1.5,0,0,0,4,14.5v2A1.5,1.5,0,0,0,5.5,18h13A1.5,1.5,0,0,0,20,16.5v-2A1.51,1.51,0,0,0,18.64,13ZM15.5,9A2.5,2.5,0,1,1,13,11.5,2.5,2.5,0,0,1,15.5,9ZM19,16.5a.5.5,0,0,1-.5.5H5.5a.5.5,0,0,1-.5-.5v-2a.5.5,0,0,1,.5-.5h7.56a3.48,3.48,0,0,0,4.88,0h.56a.5.5,0,0,1,.5.5Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/vfw.svg b/assets/sdc-icons/resources_24/vfw.svg
new file mode 100644
index 0000000..4bfe2a0
--- /dev/null
+++ b/assets/sdc-icons/resources_24/vfw.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1,.cls-2,.cls-3{fill:none;stroke:#000;}.cls-1,.cls-2{stroke-miterlimit:10;}.cls-2,.cls-3{stroke-linecap:round;}.cls-3{stroke-linejoin:round;}</style></defs><title>Virtual Firewall_24px </title><path class="cls-1" d="M13.5,19.5H3.75a.23.23,0,0,1-.25-.2V11.7a.23.23,0,0,1,.25-.2H13.5"/><path class="cls-1" d="M17.5,15.5a4,4,0,1,1-.8-2.4A4,4,0,0,1,17.5,15.5Z"/><polyline class="cls-2" points="12.5 14.5 13.49 16.77 14.5 14.5"/><path class="cls-3" d="M17.62,16.1A5.34,5.34,0,0,0,18.8,15a4.43,4.43,0,0,0,.7-2.52c0-3.3-3.74-9-3.92-9s.31,2.71.31,3.82a2,2,0,0,1-2.14,2.18c-1.79,0-1.79-3-2.3-3s-1.19.87-2.1,4.92"/><line class="cls-2" x1="5.5" y1="13.5" x2="9.5" y2="13.5"/><path d="M6.5,18A1.5,1.5,0,1,1,8,16.5,1.5,1.5,0,0,1,6.5,18Zm0-2a.5.5,0,1,0,.5.5A.5.5,0,0,0,6.5,16Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/vl.svg b/assets/sdc-icons/resources_24/vl.svg
new file mode 100644
index 0000000..db8068b
--- /dev/null
+++ b/assets/sdc-icons/resources_24/vl.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>LV_24px </title><path d="M10.8,8h1.4L9.31,16H7.88L5,8H6.39l1.72,5c.09.24.19.55.29.92s.17.65.2.84a8.76,8.76,0,0,1,.23-1c.1-.36.18-.63.25-.81Z"/><path d="M14,16V8h1.34v6.88H18.8V16Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/vnfconfiguration.svg b/assets/sdc-icons/resources_24/vnfconfiguration.svg
new file mode 100644
index 0000000..b95fa58
--- /dev/null
+++ b/assets/sdc-icons/resources_24/vnfconfiguration.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>vnf conduration_24px</title><path d="M17.58,10.77l-1.29-.21a4.12,4.12,0,0,0-.23-.58l.75-1.06a.49.49,0,0,0,0-.64l-1-1a.49.49,0,0,0-.64,0L14,7.94a4.12,4.12,0,0,0-.58-.23l-.21-1.29a.51.51,0,0,0-.5-.42H11.27a.51.51,0,0,0-.5.42l-.21,1.29a4.12,4.12,0,0,0-.58.23L8.92,7.19a.49.49,0,0,0-.64,0l-1,1a.49.49,0,0,0,0,.64L7.94,10a4.12,4.12,0,0,0-.23.58l-1.29.21a.51.51,0,0,0-.42.5v1.46a.51.51,0,0,0,.42.5l1.29.21a4.12,4.12,0,0,0,.23.58l-.75,1.06a.49.49,0,0,0,0,.64l1,1a.49.49,0,0,0,.64,0L10,16.06a4.12,4.12,0,0,0,.58.23l.21,1.29a.51.51,0,0,0,.5.42h1.46a.51.51,0,0,0,.5-.42l.21-1.29a4.12,4.12,0,0,0,.58-.23l1.06.75a.49.49,0,0,0,.64,0l1-1a.49.49,0,0,0,0-.64L16.06,14a4.12,4.12,0,0,0,.23-.58l1.29-.21a.51.51,0,0,0,.42-.5V11.27A.51.51,0,0,0,17.58,10.77ZM14,12a2,2,0,1,1-2-2A2,2,0,0,1,14,12Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_24/wanx.svg b/assets/sdc-icons/resources_24/wanx.svg
new file mode 100644
index 0000000..336bd0d
--- /dev/null
+++ b/assets/sdc-icons/resources_24/wanx.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>WAN accelerator_24px</title><path d="M11.16,13.87a.46.46,0,0,0,.33.13.52.52,0,0,0,.37-.16L14,11.5,11.86,9.16a.5.5,0,0,0-.74.67L12.19,11H4.37L6.78,7h3.4l-1,1.16A.51.51,0,0,0,9.5,9a.5.5,0,0,0,.37-.17L12,6.48,9.87,4.16a.5.5,0,0,0-.74.68L10.2,6h-4L3.06,11.24l0,.06,0,.1a.28.28,0,0,0,0,.09.31.31,0,0,0,0,.1.29.29,0,0,0,0,.1s0,.05,0,.07L6.19,17h4L9.15,18.16a.5.5,0,0,0,0,.71.46.46,0,0,0,.33.13.49.49,0,0,0,.37-.16L12,16.5,9.88,14.16a.5.5,0,0,0-.7,0,.5.5,0,0,0,0,.71l1,1.15H6.75L4.36,12h7.83l-1.07,1.16A.5.5,0,0,0,11.16,13.87Z"/><path d="M16.85,7.16a.49.49,0,0,0-.7,0,.5.5,0,0,0,0,.71l3,3.15H15.49a.5.5,0,0,0,0,1h3.66l-3,3.15a.5.5,0,0,0,0,.71.48.48,0,0,0,.34.13.51.51,0,0,0,.36-.15L21,11.52Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/allotted_resource.svg b/assets/sdc-icons/resources_60/allotted_resource.svg
new file mode 100644
index 0000000..2ae1048
--- /dev/null
+++ b/assets/sdc-icons/resources_60/allotted_resource.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Aloted_60px</title><path d="M43.51,30H36V25h2.51A1.49,1.49,0,0,0,40,23.51v-7A1.49,1.49,0,0,0,38.51,15h-7A1.49,1.49,0,0,0,30,16.49V19H25V16.49A1.49,1.49,0,0,0,23.51,15h-7A1.49,1.49,0,0,0,15,16.49v7A1.49,1.49,0,0,0,16.49,25H19v5H16.49A1.49,1.49,0,0,0,15,31.49v7A1.49,1.49,0,0,0,16.49,40h7A1.49,1.49,0,0,0,25,38.51V36h5v7.51A1.49,1.49,0,0,0,31.49,45h12A1.49,1.49,0,0,0,45,43.51v-12A1.49,1.49,0,0,0,43.51,30ZM32,17h6v6H32ZM17,17h6v6H17Zm6,21H17V32h6Zm2-3V31.49A1.49,1.49,0,0,0,23.51,30H20V25h3.51A1.49,1.49,0,0,0,25,23.51V20h5v3.51A1.49,1.49,0,0,0,31.49,25H35v5H31.49A1.49,1.49,0,0,0,30,31.49V35Zm18,8H32V32H43Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/applicationServer.svg b/assets/sdc-icons/resources_60/applicationServer.svg
new file mode 100644
index 0000000..9cc8458
--- /dev/null
+++ b/assets/sdc-icons/resources_60/applicationServer.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Applcation Server-60px_2px</title><path d="M27,20h6a1,1,0,0,0,0-2H27a1,1,0,0,0,0,2Z"/><path d="M31.85,40.23a2.27,2.27,0,0,0-.19-.34,2.16,2.16,0,0,0-.55-.55,2.27,2.27,0,0,0-.34-.19,1.82,1.82,0,0,0-.38-.11,2,2,0,0,0-1.8.55,1.42,1.42,0,0,0-.25.3,1.63,1.63,0,0,0-.19.34,1.82,1.82,0,0,0-.11.38A1.72,1.72,0,0,0,28,41a2,2,0,0,0,.15.77,1.88,1.88,0,0,0,.44.64A2,2,0,0,0,32,41a1.72,1.72,0,0,0,0-.39A1.82,1.82,0,0,0,31.85,40.23Z"/><path d="M42,29H39V16a3,3,0,0,0-3-3H24a3,3,0,0,0-3,3V44a3,3,0,0,0,3,3H36a3,3,0,0,0,3-3V43h3a1,1,0,0,0,1-1V30A1,1,0,0,0,42,29ZM37,44a1,1,0,0,1-1,1H24a1,1,0,0,1-1-1V16a1,1,0,0,1,1-1H36a1,1,0,0,1,1,1V29H35a1,1,0,0,0-1,1V42a1,1,0,0,0,1,1h2Z"/><path d="M27,24h6a1,1,0,0,0,0-2H27a1,1,0,0,0,0,2Z"/><path d="M33,26H27a1,1,0,0,0,0,2h6a1,1,0,0,0,0-2Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/borderElement.svg b/assets/sdc-icons/resources_60/borderElement.svg
new file mode 100644
index 0000000..638ae0d
--- /dev/null
+++ b/assets/sdc-icons/resources_60/borderElement.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Border Element_60px</title><path d="M53.72,29.25,42.51,9.75A1.52,1.52,0,0,0,41.21,9H18.79a1.52,1.52,0,0,0-1.3.75L6.28,29.25a1.49,1.49,0,0,0,0,1.5l11.21,19.5a1.52,1.52,0,0,0,1.3.75H41.21a1.52,1.52,0,0,0,1.3-.75l11.21-19.5A1.49,1.49,0,0,0,53.72,29.25ZM40.92,49H19.08L8.15,30,19.08,11H40.92L51.85,30Z"/><path d="M34.33,40.28,31,43.36V34a1,1,0,0,0-2,0v9.36l-3.31-3.07a1,1,0,0,0-1.36,1.46L30,47l5.69-5.27a1,1,0,1,0-1.35-1.47Z"/><path d="M25.69,19.74,29,16.67V26a1,1,0,0,0,2,0V16.63l3.37,3.11a1,1,0,0,0,.68.26,1,1,0,0,0,.73-.32,1,1,0,0,0-.05-1.41L30,13l-5.69,5.26a1,1,0,0,0-.06,1.41A1,1,0,0,0,25.69,19.74Z"/><path d="M40.67,24.2a1,1,0,0,0-1.41.06L34,30l5.26,5.66A1,1,0,0,0,40,36a1,1,0,0,0,.73-1.68L37.65,31H47a1,1,0,0,0,0-2H37.64l3.09-3.39A1,1,0,0,0,40.67,24.2Z"/><path d="M20.67,24.36a1,1,0,1,0-1.44,1.38L22.34,29H13a1,1,0,0,0,0,2h9.31l-3.06,3.34a1,1,0,0,0,.06,1.42A1.05,1.05,0,0,0,20,36a1,1,0,0,0,.74-.33L26,29.93Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/call_controll.svg b/assets/sdc-icons/resources_60/call_controll.svg
new file mode 100644
index 0000000..23aa857
--- /dev/null
+++ b/assets/sdc-icons/resources_60/call_controll.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60"><defs><style>.cls-1{fill:none;clip-rule:evenodd;}.cls-2{fill-rule:evenodd;}.cls-3{clip-path:url(#clip-path);}</style><clipPath id="clip-path"><path class="cls-1" d="M442.67-243.33a4,4,0,0,0-4,4,4,4,0,0,0,4,4,4,4,0,0,0,4-4A4,4,0,0,0,442.67-243.33Zm0,10a6,6,0,0,1-6-6,6,6,0,0,1,6-6,6,6,0,0,1,6,6A6,6,0,0,1,442.67-233.33Zm8-9.31v-4.69H446l-3.31-3.31-3.31,3.31h-4.69v4.69l-3.31,3.31,3.31,3.31v4.69h4.69l3.31,3.31,3.31-3.31h4.69V-236l3.31-3.31Z"/></clipPath></defs><title>Call control_60px </title><path d="M42.23,46.58a27,27,0,0,1-27-26.88,2.52,2.52,0,0,1,2.53-2.52h6.28a2.53,2.53,0,0,1,2.53,2.52,16.05,16.05,0,0,0,.82,5.12,2.54,2.54,0,0,1-.63,2.58l-.19.15a8.63,8.63,0,0,0-1.23.86,9.83,9.83,0,0,0,3.88,7,5.67,5.67,0,0,0,4.56,1.34,6.69,6.69,0,0,0,.48-1l.08-.21.16-.16a2.82,2.82,0,0,1,2.34-.65c1.36.1,2.65.09,4,.07h1.42c1.42,0,2.48,1.57,2.48,3v6.33A2.53,2.53,0,0,1,42.23,46.58ZM17.77,19.18a.53.53,0,0,0-.53.52,25,25,0,0,0,25,24.88.53.53,0,0,0,.53-.53V37.72a1.27,1.27,0,0,0-.49-1h-1.4c-1.39,0-2.72,0-4.17-.08a2.76,2.76,0,0,0-.66,0c-.67,1.69-1.27,1.86-1.5,1.93A7.3,7.3,0,0,1,28,37c-2.83-2.18-4.74-5.85-4.65-8.9,0-.31,0-1,2.07-2.19a.5.5,0,0,0,.07-.47,18.44,18.44,0,0,1-.91-5.74.54.54,0,0,0-.53-.52Zm7.48,9.33Zm.1-.35Z"/><polygon class="cls-2" points="38.13 28.13 42.5 23.75 41.26 22.5 36.88 26.88 35.01 25.01 35.01 29.99 40 30 38.13 28.13"/><polygon class="cls-2" points="42.97 15.01 37.98 15.01 39.86 16.88 35.48 21.25 36.73 22.5 41.11 18.13 42.98 20 42.97 15.01"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/cloudep.svg b/assets/sdc-icons/resources_60/cloudep.svg
new file mode 100644
index 0000000..a539878
--- /dev/null
+++ b/assets/sdc-icons/resources_60/cloudep.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Network Cloud_60px</title><path d="M43.81,26.09c-1-6-7-10-12.18-10h-.25c-8-.48-11.12,2.76-12.3,5.56a1,1,0,0,0,1.84.78c1.34-3.16,4.92-4.66,10.34-4.35l.35,0c4.5.05,9.84,3.78,10.32,9.05L42,28h.89c3.25.06,6.1,3.23,6.1,6.78a6.13,6.13,0,0,1-1.87,4.37A6.58,6.58,0,0,1,42.59,41H15.43A6.66,6.66,0,0,1,9,34.5,6.47,6.47,0,0,1,15.41,28,7.58,7.58,0,0,1,22,32.39a1,1,0,0,0,1.88-.69A9.63,9.63,0,0,0,15.41,26,8.46,8.46,0,0,0,7,34.5,8.71,8.71,0,0,0,15.41,43H42.59a8.58,8.58,0,0,0,5.93-2.4A8.1,8.1,0,0,0,51,34.8,8.76,8.76,0,0,0,43.81,26.09Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/collaboration.svg b/assets/sdc-icons/resources_60/collaboration.svg
new file mode 100644
index 0000000..a41ed31
--- /dev/null
+++ b/assets/sdc-icons/resources_60/collaboration.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Collaboration_60px </title><path d="M46,23a5.91,5.91,0,0,0-3,.83L39.18,21A5.93,5.93,0,0,0,40,18a6,6,0,0,0-12-.12L22,20a6,6,0,1,0-7,5.92v7.18A6,6,0,1,0,21.91,40L27.09,42A6,6,0,0,0,39,41a5.87,5.87,0,0,0-.78-2.94l4.29-4.19A5.94,5.94,0,0,0,46,35a6,6,0,0,0,0-12ZM35,35.35V28.77l5.12,1.44a5.94,5.94,0,0,0,1,2.24L37,36.5A5.88,5.88,0,0,0,35,35.35ZM18.19,25.58l3.6,4.64-3.32,3.32A6,6,0,0,0,17,33.09V25.91A6,6,0,0,0,18.19,25.58Zm11.57-3.34-2.31,2.32-6.16-1.73a5.69,5.69,0,0,0,.26-.56l6.76-2.38A6,6,0,0,0,29.76,22.24ZM33,23.91v2.22l-3.35-.95,1.66-1.65s.05-.09.09-.13A6.11,6.11,0,0,0,33,23.91Zm-13.07.61,5.89,1.66-2.61,2.61-3.3-4.25Zm.22,10.16L23,31.81,27.82,38a6,6,0,0,0-.71,1.86l-5.22-2A6,6,0,0,0,20.15,34.68Zm9,1.74-4.68-6L28,26.81l5,1.4V35A6,6,0,0,0,29.13,36.42Zm10.94-8.3L35,26.69V23.91a6,6,0,0,0,2.9-1.36l3.5,2.6A6.06,6.06,0,0,0,40.07,28.12ZM34,14a4,4,0,1,1-4,4A4,4,0,0,1,34,14ZM12,20a4,4,0,1,1,4,4A4,4,0,0,1,12,20Zm4,23a4,4,0,1,1,4-4A4,4,0,0,1,16,43Zm17,2a4,4,0,1,1,4-4A4,4,0,0,1,33,45ZM46,33a4,4,0,1,1,4-4A4,4,0,0,1,46,33Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/compute.svg b/assets/sdc-icons/resources_60/compute.svg
new file mode 100644
index 0000000..44313d7
--- /dev/null
+++ b/assets/sdc-icons/resources_60/compute.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Compute-60px_2px </title><path d="M22.25,39h15.5A1.25,1.25,0,0,0,39,37.75V22.25A1.25,1.25,0,0,0,37.75,21H22.25A1.25,1.25,0,0,0,21,22.25v15.5A1.25,1.25,0,0,0,22.25,39ZM23,23H37V37H23Z"/><path d="M48,28a1,1,0,0,0,0-2H44V22h4a1,1,0,0,0,0-2H44V17.25A1.25,1.25,0,0,0,42.75,16H40V12a1,1,0,0,0-2,0v4H34V12a1,1,0,0,0-2,0v4H28V12a1,1,0,0,0-2,0v4H22V12a1,1,0,0,0-2,0v4H17.25A1.25,1.25,0,0,0,16,17.25V20H12a1,1,0,0,0,0,2h4v4H12a1,1,0,0,0,0,2h4v4H12a1,1,0,0,0,0,2h4v4H12a1,1,0,0,0,0,2h4v2.75A1.25,1.25,0,0,0,17.25,44H20v4a1,1,0,0,0,2,0V44h4v4a1,1,0,0,0,2,0V44h4v4a1,1,0,0,0,2,0V44h4v4a1,1,0,0,0,2,0V44h2.75A1.25,1.25,0,0,0,44,42.75V40h4a1,1,0,0,0,0-2H44V34h4a1,1,0,0,0,0-2H44V28ZM42,42H18V18H42Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/connector.svg b/assets/sdc-icons/resources_60/connector.svg
new file mode 100644
index 0000000..b2701da
--- /dev/null
+++ b/assets/sdc-icons/resources_60/connector.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Connector_60px</title><path d="M34,16.5A1.42,1.42,0,0,0,32.67,15H31V13H29v2H27.33A1.42,1.42,0,0,0,26,16.49V21h8Z"/><polygon points="39 36 31 36 31 28 34 28 34 23 26 23 26 28 29 28 29 36 21 36 21 33 16 33 16 41 21 41 21 38 39 38 39 41 44 41 44 33 39 33 39 36"/><path d="M52,36V34.33A1.42,1.42,0,0,0,50.51,33H46v8h4.5A1.42,1.42,0,0,0,52,39.67V38h2V36Z"/><path d="M8,34.33V36H6v2H8v1.67A1.42,1.42,0,0,0,9.49,41H14V33H9.5A1.42,1.42,0,0,0,8,34.33Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/cp.svg b/assets/sdc-icons/resources_60/cp.svg
new file mode 100644
index 0000000..a888828
--- /dev/null
+++ b/assets/sdc-icons/resources_60/cp.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>cp_60px </title><path d="M24.78,23.32A4.39,4.39,0,0,0,21.15,25a7.11,7.11,0,0,0-1.32,4.56,7.13,7.13,0,0,0,1.27,4.6,4.47,4.47,0,0,0,3.68,1.56,9.52,9.52,0,0,0,2-.21c.65-.14,1.33-.32,2-.53v2.31a12,12,0,0,1-4.37.74,7,7,0,0,1-5.52-2.2A9.28,9.28,0,0,1,17,29.51,10.34,10.34,0,0,1,17.94,25a6.72,6.72,0,0,1,2.71-3,8.06,8.06,0,0,1,4.15-1,10.19,10.19,0,0,1,4.63,1.06l-1,2.25a15.17,15.17,0,0,0-1.75-.69A6.25,6.25,0,0,0,24.78,23.32Z"/><path d="M43.49,26.27a4.69,4.69,0,0,1-1.72,3.92,7.74,7.74,0,0,1-4.91,1.37H35.12v6.11H32.38V21.33h4.83a7.4,7.4,0,0,1,4.71,1.25A4.42,4.42,0,0,1,43.49,26.27Zm-8.37,3h1.46a5.31,5.31,0,0,0,3.1-.72,2.56,2.56,0,0,0,1-2.23,2.5,2.5,0,0,0-.89-2.1,4.4,4.4,0,0,0-2.75-.7H35.12Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/dcae_analytics.svg b/assets/sdc-icons/resources_60/dcae_analytics.svg
new file mode 100644
index 0000000..5ed3e77
--- /dev/null
+++ b/assets/sdc-icons/resources_60/dcae_analytics.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Analitics_60px</title><g id="Layer_2" data-name="Layer 2"><path d="M41,43H39V41a1,1,0,0,0-2,0v2H31V41a1,1,0,0,0-2,0v2H22V41a1,1,0,0,0-2,0v2H14V30.38l4.53-4a3.51,3.51,0,0,0,2,.61,3.43,3.43,0,0,0,2.11-.73l4,4.25a3.45,3.45,0,0,0-.62,2,3.5,3.5,0,0,0,7,0,3.4,3.4,0,0,0-.48-1.73l.06-.07,5.12-7.8a3.5,3.5,0,1,0-1.74-1l-4.91,7.48A3.38,3.38,0,0,0,29.5,29a3.61,3.61,0,0,0-1.32.26L23.8,24.61A3.41,3.41,0,0,0,24,23.5a3.5,3.5,0,1,0-6.73,1.34L14,27.71V16a1,1,0,0,0-2,0V44a1,1,0,0,0,1,1H41a1,1,0,0,0,0-2ZM38.5,18A1.5,1.5,0,1,1,37,19.5,1.5,1.5,0,0,1,38.5,18ZM31,32.5A1.5,1.5,0,1,1,29.5,31,1.5,1.5,0,0,1,31,32.5ZM20.5,22A1.5,1.5,0,1,1,19,23.5,1.5,1.5,0,0,1,20.5,22Z"/></g></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/dcae_collector.svg b/assets/sdc-icons/resources_60/dcae_collector.svg
new file mode 100644
index 0000000..af0f5d1
--- /dev/null
+++ b/assets/sdc-icons/resources_60/dcae_collector.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Collector_60px </title><g id="Layer_2" data-name="Layer 2"><path d="M49,23a4,4,0,0,0-3.86,3H36.92a7,7,0,0,0-13.84,0H14.86a4,4,0,1,0,0,2h8.22A7,7,0,0,0,29,33.92v7.22a4,4,0,1,0,2,0V33.92A7,7,0,0,0,36.92,28h8.22A4,4,0,1,0,49,23ZM11,29a2,2,0,1,1,2-2A2,2,0,0,1,11,29ZM32,45a2,2,0,1,1-2-2A2,2,0,0,1,32,45ZM30,32a5,5,0,1,1,5-5A5,5,0,0,1,30,32Zm19-3a2,2,0,1,1,2-2A2,2,0,0,1,49,29Z"/></g></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/dcae_database.svg b/assets/sdc-icons/resources_60/dcae_database.svg
new file mode 100644
index 0000000..ef79b3f
--- /dev/null
+++ b/assets/sdc-icons/resources_60/dcae_database.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Database-60px_2px</title><path d="M45,26H15a3,3,0,0,0-3,3v2a3,3,0,0,0,3,3H45a3,3,0,0,0,3-3V29A3,3,0,0,0,45,26Zm1,5a1,1,0,0,1-1,1H15a1,1,0,0,1-1-1V29a1,1,0,0,1,1-1H45a1,1,0,0,1,1,1Z"/><path d="M45,37H15a3,3,0,0,0-3,3v1a1,1,0,0,0,2,0V40a1,1,0,0,1,1-1H45a1,1,0,0,1,1,1v2a1,1,0,0,1-1,1H22a1,1,0,0,0,0,2H45a3,3,0,0,0,3-3V40A3,3,0,0,0,45,37Z"/><path d="M43,29H31a1,1,0,0,0,0,2H43a1,1,0,0,0,0-2Z"/><circle cx="17" cy="30" r="1"/><path d="M43,42a1,1,0,0,0,0-2H31a1,1,0,0,0,0,2Z"/><circle cx="17" cy="41" r="1"/><path d="M45,15H15a3,3,0,0,0-3,3v2a3,3,0,0,0,3,3H45a3,3,0,0,0,3-3V18A3,3,0,0,0,45,15Zm1,5a1,1,0,0,1-1,1H15a1,1,0,0,1-1-1V18a1,1,0,0,1,1-1H45a1,1,0,0,1,1,1Z"/><path d="M43,18H31a1,1,0,0,0,0,2H43a1,1,0,0,0,0-2Z"/><circle cx="17" cy="19" r="1"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/dcae_machineLearning.svg b/assets/sdc-icons/resources_60/dcae_machineLearning.svg
new file mode 100644
index 0000000..b6a400b
--- /dev/null
+++ b/assets/sdc-icons/resources_60/dcae_machineLearning.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><defs><style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:2px;}.cls-2{fill-rule:evenodd;}.cls-3{fill:#111;}</style></defs><title>Rules Security_60px copy 5</title><path class="cls-1" d="M13,34h2.86C18,34,18,34,18,35.71l0,4.65A1.62,1.62,0,0,0,19.62,42l4,0a3,3,0,0,1,2.45,1.3L30,49"/><path class="cls-1" d="M47.94,49c-7.45-9.68,0-14.61,0-22.54V25.36C47.94,17.42,41,11,33,11H31.88C24.23,11,16.74,17.41,17,25.05a2.7,2.7,0,0,1-.41,1.6L13,34"/><path class="cls-2" d="M43,30l-1-1V27H40l-1-1-1,1-2,0v2l-1,1,1,1v2h2l1,1,1-1h2V31Zm-4,2a2,2,0,1,1,2-2A2,2,0,0,1,39,32Z"/><path class="cls-3" d="M29,20.67A2.33,2.33,0,1,0,31.33,23,2.33,2.33,0,0,0,29,20.67ZM29,25a2,2,0,1,1,2-2A2,2,0,0,1,29,25Z"/><path d="M34.5,23.73V22.27L32.9,22A4,4,0,0,0,32.47,21l.94-1.32-1-1-1.32.94A4,4,0,0,0,30,19.1l-.27-1.6H28.27L28,19.1a4,4,0,0,0-1.05.43l-1.32-.94-1,1L25.53,21A4,4,0,0,0,25.1,22l-1.6.27v1.46l1.6.27a3.74,3.74,0,0,0,.43,1.05l-.94,1.32,1,1L27,26.47A3.74,3.74,0,0,0,28,26.9l.27,1.6h1.46L30,26.9a4,4,0,0,0,1.05-.43l1.32.94,1-1-.94-1.32A3.74,3.74,0,0,0,32.9,24ZM31,23a2,2,0,1,1-2-2A2,2,0,0,1,31,23Z"/><path class="cls-3" d="M34.58,21.77l-1.29-.21a4.12,4.12,0,0,0-.23-.58l.75-1.06a.49.49,0,0,0-.05-.64l-1-1a.49.49,0,0,0-.64,0L31,18.94a4.12,4.12,0,0,0-.58-.23l-.21-1.29a.51.51,0,0,0-.5-.42H28.27a.51.51,0,0,0-.5.42l-.21,1.29a4.12,4.12,0,0,0-.58.23l-1.06-.75a.49.49,0,0,0-.64,0l-1,1a.49.49,0,0,0,0,.64L24.94,21a4.12,4.12,0,0,0-.23.58l-1.29.21a.51.51,0,0,0-.42.5v1.46a.51.51,0,0,0,.42.5l1.29.21a4.12,4.12,0,0,0,.23.58l-.75,1.06a.49.49,0,0,0,0,.64l1,1a.49.49,0,0,0,.64,0L27,27.06a4.12,4.12,0,0,0,.58.23l.21,1.29a.51.51,0,0,0,.5.42h1.46a.51.51,0,0,0,.5-.42l.21-1.29a4.12,4.12,0,0,0,.58-.23l1.06.75a.49.49,0,0,0,.64,0l1-1a.49.49,0,0,0,.05-.64L33.06,25a4.12,4.12,0,0,0,.23-.58l1.29-.21a.51.51,0,0,0,.42-.5V22.27A.51.51,0,0,0,34.58,21.77ZM34,23.31l-1.18.2a.49.49,0,0,0-.4.37,3.51,3.51,0,0,1-.38.92.48.48,0,0,0,0,.54l.69,1-.43.43-1-.69a.47.47,0,0,0-.54,0,3.51,3.51,0,0,1-.92.38.48.48,0,0,0-.37.4L29.31,28h-.62l-.2-1.18a.49.49,0,0,0-.37-.4A3.51,3.51,0,0,1,27.2,26a.48.48,0,0,0-.54,0l-1,.69-.43-.43.69-1a.48.48,0,0,0,0-.54,3.51,3.51,0,0,1-.38-.92.49.49,0,0,0-.4-.37L24,23.31v-.62l1.18-.2a.48.48,0,0,0,.4-.37A3.51,3.51,0,0,1,26,21.2a.48.48,0,0,0,0-.54l-.69-1,.43-.43,1,.69a.5.5,0,0,0,.54,0,3.51,3.51,0,0,1,.92-.38.48.48,0,0,0,.37-.4l.2-1.18h.62l.2,1.18a.48.48,0,0,0,.37.4,3.51,3.51,0,0,1,.92.38.5.5,0,0,0,.54,0l1-.69.43.43-.69,1a.48.48,0,0,0,0,.54,3.51,3.51,0,0,1,.38.92.48.48,0,0,0,.4.37l1.18.2Z"/><path class="cls-2" d="M34,35l-1-1V32H31l-1-1-1,1-2,0v2l-1,1,1,1v2h2l1,1,1-1h2V36Zm-4,2a2,2,0,1,1,2-2A2,2,0,0,1,30,37Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/dcae_microservice.svg b/assets/sdc-icons/resources_60/dcae_microservice.svg
new file mode 100644
index 0000000..e62af3a
--- /dev/null
+++ b/assets/sdc-icons/resources_60/dcae_microservice.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Microservice_60px </title><path d="M24.07,23H16.92L12,30l4.88,7h7.2L29,30Zm-1,12H18l-3.48-5L18,25H23l3.5,5Z"/><path d="M31.92,32,27,39l4.88,7h7.2L44,39l-4.9-7Zm6.14,12H33l-3.48-5L33,34H38l3.5,5Z"/><path d="M39.11,28,44,21l-4.9-7H31.92L27,21l4.88,7ZM33,16H38l3.5,5-3.47,5H33l-3.48-5Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/dcae_source.svg b/assets/sdc-icons/resources_60/dcae_source.svg
new file mode 100644
index 0000000..4a00d2a
--- /dev/null
+++ b/assets/sdc-icons/resources_60/dcae_source.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Source_60px </title><path d="M25.28,42.31l-.22.23A6.87,6.87,0,0,1,20,45c-3.72,0-7.91-3-8-7.35a7.28,7.28,0,0,1,2.19-5.32A7.94,7.94,0,0,1,19.66,30l.08,0,.11,0H25v3l2.5-2,2.5-2-2.5-2-2.5-2V28H19.85a.45.45,0,0,0-.11,0,.42.42,0,0,0-.12,0,9.93,9.93,0,0,0-6.87,2.91A9.26,9.26,0,0,0,10,37.68c.1,5.58,5.25,9.32,10,9.32a8.76,8.76,0,0,0,6.57-3.1l.12-.13a1,1,0,0,0-1.37-1.46Z"/><path d="M21,24h0a1,1,0,0,0,1-1c.12-3,1.94-8,8-8a8,8,0,0,1,8,8,8.16,8.16,0,0,1-2.39,5.68L33.93,27v5h5L37,30.09A10.19,10.19,0,0,0,40,23,10,10,0,0,0,30,13c-6.59,0-9.8,5.16-10,10A1,1,0,0,0,21,24Z"/><path d="M49.68,36.1a10.44,10.44,0,0,0-7.4-9A1,1,0,0,0,41.72,29a8.53,8.53,0,0,1,6,7.26,8.15,8.15,0,0,1-1.91,5.9,7.9,7.9,0,0,1-5.46,2.79A8.06,8.06,0,0,1,32,39h3L33,36.5,31,34,29,36.5,27,39H30a10.07,10.07,0,0,0,9.77,8q.38,0,.75,0a9.88,9.88,0,0,0,6.83-3.49A10.12,10.12,0,0,0,49.68,36.1Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/dcae_utilty.svg b/assets/sdc-icons/resources_60/dcae_utilty.svg
new file mode 100644
index 0000000..f6b9e84
--- /dev/null
+++ b/assets/sdc-icons/resources_60/dcae_utilty.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>default orphan_60px</title><circle cx="18" cy="41" r="1.5"/><path d="M37.69,31.26a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42l6.47,6.21a1.21,1.21,0,0,1,.32.86,2.58,2.58,0,0,1-.82,1.79l-2.66,2.65c-.86.86-2.14,1.1-2.71.54l-6.19-6.43a1,1,0,0,0-1.44,1.38l6.21,6.46a3.24,3.24,0,0,0,2.29.88A4.66,4.66,0,0,0,41,45.62L43.69,43a4.6,4.6,0,0,0,1.41-3.22,3.17,3.17,0,0,0-.93-2.29Z"/><path d="M47.3,16.12h0v0a1.13,1.13,0,0,0-.12-.18,1,1,0,0,0-.09-.13h0a1,1,0,0,0-.3-.2l0,0a1.09,1.09,0,0,0-.44-.06,1.14,1.14,0,0,0-.32.07h0a1,1,0,0,0-.17.12.65.65,0,0,0-.15.1h0L41,20.48a1.75,1.75,0,0,1-1.25.52,1.88,1.88,0,0,1-1.28-.53,1.9,1.9,0,0,1,0-2.59l4.55-4.6a1,1,0,0,0,.11-.17l.1-.14h0a.88.88,0,0,0,.06-.27s0-.08,0-.12a1.29,1.29,0,0,0,0-.19,1.13,1.13,0,0,0,0-.18.76.76,0,0,0-.08-.11,1,1,0,0,0-.14-.22h0a1,1,0,0,0-.17-.11.67.67,0,0,0-.14-.09h0A8.28,8.28,0,0,0,39.5,11a8.5,8.5,0,0,0-7.8,11.88l-3.61,3.61L28,26.42l-8.3-8.21L18.6,14.85a.73.73,0,0,0-.37-.42l-4.79-2.35a.74.74,0,0,0-.85.13l-2.4,2.36a.72.72,0,0,0-.14.83l2.4,4.72a.73.73,0,0,0,.43.36l3.42,1.13,8.3,8.18.1.07-5.31,5.31A5.81,5.81,0,0,0,18,35a6,6,0,1,0,6,6.11L37.47,27.75A8.49,8.49,0,0,0,48,19.5,8.6,8.6,0,0,0,47.3,16.12ZM13.63,19.21l-2-4,1.65-1.62,4.05,2,1,2.83-1.75,1.73ZM17.74,21l1.37-1.35L27,27.44a.14.14,0,0,0,.08,0L25.7,28.87l-.06-.1ZM18,45a4,4,0,1,1,4-4A4,4,0,0,1,18,45Zm5.55-6.26A6,6,0,0,0,21.36,36l11.4-11.38A8.6,8.6,0,0,0,35.43,27ZM39.5,26a6.5,6.5,0,0,1,0-13,6.09,6.09,0,0,1,1,.08l-3.36,3.39A3.83,3.83,0,0,0,39.78,23h0a3.75,3.75,0,0,0,2.65-1.12L45.9,18.4a6.72,6.72,0,0,1,.1,1.1A6.51,6.51,0,0,1,39.5,26Z"/><path d="M39,42a1,1,0,0,0,.71-1.71l-5-5A1,1,0,1,0,33.3,36.7l5,5A1,1,0,0,0,39,42Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/defaulticon.svg b/assets/sdc-icons/resources_60/defaulticon.svg
new file mode 100644
index 0000000..a36fa1f
--- /dev/null
+++ b/assets/sdc-icons/resources_60/defaulticon.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>R_60px </title><path d="M26.55,32.21V39H23.88V22h4.61a7.34,7.34,0,0,1,4.67,1.23A4.51,4.51,0,0,1,34.68,27a4.65,4.65,0,0,1-3.17,4.53L36.12,39h-3l-3.91-6.79Zm0-2.3H28.4a4.11,4.11,0,0,0,2.7-.72,2.67,2.67,0,0,0,.84-2.14A2.34,2.34,0,0,0,31,25a4.77,4.77,0,0,0-2.72-.63H26.55Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/firewall.svg b/assets/sdc-icons/resources_60/firewall.svg
new file mode 100644
index 0000000..31b7462
--- /dev/null
+++ b/assets/sdc-icons/resources_60/firewall.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>VIRTUAL FIREWALL 2_60px </title><path d="M13.5,38h13A1.5,1.5,0,0,0,28,36.5v-3A1.5,1.5,0,0,0,26.5,32h-13A1.5,1.5,0,0,0,12,33.5v3A1.5,1.5,0,0,0,13.5,38Zm.5-4H26v2H14Z"/><path d="M37.5,32h-5A1.5,1.5,0,0,0,31,33.5v3A1.5,1.5,0,0,0,32.5,38h5A1.5,1.5,0,0,0,39,36.5v-3A1.5,1.5,0,0,0,37.5,32ZM37,36H33V34h4Z"/><path d="M37.5,40h-13A1.5,1.5,0,0,0,23,41.5v3A1.5,1.5,0,0,0,24.5,46h13A1.5,1.5,0,0,0,39,44.5v-3A1.5,1.5,0,0,0,37.5,40ZM37,44H25V42H37Z"/><path d="M18.5,40h-5A1.5,1.5,0,0,0,12,41.5v3A1.5,1.5,0,0,0,13.5,46h5A1.5,1.5,0,0,0,20,44.5v-3A1.5,1.5,0,0,0,18.5,40ZM18,44H14V42h4Z"/><path d="M51,31.1c0-8.33-8.87-21.8-10.08-22.82a1.28,1.28,0,0,0-.45-.23l-.11,0A.76.76,0,0,0,40,8h0c-1.37.24-1.15,1.65-.56,5.43A38.44,38.44,0,0,1,40,18.1a5.41,5.41,0,0,1-1.42,3.84A4,4,0,0,1,35.68,23c-2,0-2.87-2.42-3.66-5.08-.51-1.71-.87-2.94-2-2.94h0c-2.21,0-5.47,9-5.91,13H10a2,2,0,0,0-2,2V48a2,2,0,0,0,2,2H41a2,2,0,0,0,2-2V42.39C48.31,40.48,51,36.68,51,31.1ZM10,48V30H41V48Zm33-7.75V30a2,2,0,0,0-2-2H26.05A32.37,32.37,0,0,1,29.8,17.54c.1.32.21.68.3,1C30.82,21,32,25,35.65,25A6.08,6.08,0,0,0,40,23.36a7.23,7.23,0,0,0,2-5.26,37.57,37.57,0,0,0-.57-5c0-.33-.1-.7-.16-1.06C44,16.31,49,25.31,49,31.1,49,35.64,47.09,38.56,43,40.25Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/fortinet.svg b/assets/sdc-icons/resources_60/fortinet.svg
new file mode 100644
index 0000000..883877d
--- /dev/null
+++ b/assets/sdc-icons/resources_60/fortinet.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>fortinet_60px</title><path id="path4380" d="M36.54,32.16H35.32V27.85h3.9a2,2,0,0,1,1.17.37,1.44,1.44,0,0,1,.46,1.16v2.78H39.64V29.31s0-.29-.1-.39a.41.41,0,0,0-.29-.11H36.53v3.35Zm5.15,0V27.85h4.87v1H42.9v.73h2.54v.93H42.9v.73h3.68v1Zm-8.48,0V27.85h1.21v4.31ZM48.6,28.54v0Zm-.31,3.62V28.81H47.15v-1h4.53v1H49.5v3.35ZM29.54,28.54v0Zm-.31,3.62V28.81H28.09v-1h4.53v1H30.43v3.35Zm-3.64-2.62a1.6,1.6,0,0,0,.54,0,.23.23,0,0,0,.13-.19V29a.23.23,0,0,0-.13-.19,2.19,2.19,0,0,0-.63,0H23.15v.73h2.44Zm.65,2.62V30.69a.23.23,0,0,0-.13-.19,1.48,1.48,0,0,0-.48,0H23.15v1.7H21.94V27.85h3.77a2.13,2.13,0,0,1,1.41.35,1.21,1.21,0,0,1,.34,1v.3a1,1,0,0,1-.4.77l0,0a.5.5,0,0,1,.14.09.71.71,0,0,1,.17.56v1.23ZM8,27.85v4.31H9.21V30.47h3.65v-.93H9.21v-.73h4.24v-1Z"/><path id="path4384" d="M51.26,31.4v.19h.22c.05,0,.11,0,.12-.08s-.07-.11-.12-.11Zm-.08-.07h.29c.11,0,.2,0,.21.15s0,.1-.08.14.07.05.08.15,0,.09,0,.14h-.1l0-.08c0-.07,0-.17-.11-.17h-.22v.25h-.08v-.58Zm.22-.16a.5.5,0,0,0-.53.46.49.49,0,0,0,.53.46.5.5,0,0,0,.53-.46.5.5,0,0,0-.53-.46m0,1a.52.52,0,1,1,0-1,.57.57,0,0,1,.6.52.56.56,0,0,1-.6.52"/><path id="path4408" d="M20.29,32.2a1.21,1.21,0,0,0,.77-1v-.15h-2V32.2ZM21.06,29v-.13a1.19,1.19,0,0,0-.82-1H19.05V29ZM14,31.05v.14a1.18,1.18,0,0,0,.77,1H16V31.05Zm.82-3.25a1.16,1.16,0,0,0-.82,1V29h2V27.8Zm6.25,1.63h-2v1.14h2ZM16.54,32.2h2V31.05h-2V32.2Zm2-4.4h-2V29h2ZM14,30.57h2V29.43H14Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/gateway.svg b/assets/sdc-icons/resources_60/gateway.svg
new file mode 100644
index 0000000..315fd8d
--- /dev/null
+++ b/assets/sdc-icons/resources_60/gateway.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Gateway_60px</title><path d="M48.63,25.24a1,1,0,0,0-1.31,1.52L49.92,29H21.34l6.78-11H39.94l-2.59,2.24A1,1,0,0,0,38,22a1,1,0,0,0,.66-.24L44.15,17l-5.49-4.76a1,1,0,0,0-1.42.11,1,1,0,0,0,.11,1.41L39.94,16H27L19,28.91A.32.32,0,0,0,19,29H14a3.5,3.5,0,1,0-.3,2h5.44L27,43h11.9l-2.6,2.25a1,1,0,0,0,1.31,1.51L43.13,42l-5.5-4.75a1,1,0,0,0-1.31,1.51L38.92,41H28.1L21.48,31H49.92l-2.6,2.24a1,1,0,0,0,1.31,1.52L54.13,30Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/loadBalancer.svg b/assets/sdc-icons/resources_60/loadBalancer.svg
new file mode 100644
index 0000000..8c1d4a6
--- /dev/null
+++ b/assets/sdc-icons/resources_60/loadBalancer.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Load Balance_64px</title><path d="M49,34a1,1,0,0,0-1,1v5.72l-8.3-8.33A9.9,9.9,0,0,0,40,30a10,10,0,0,0-9-9.95V16.82a3,3,0,1,0-2,0v3.23a10,10,0,0,0-9,10,9.88,9.88,0,0,0,.3,2.38L12,40.72V35a1,1,0,0,0-2,0v9h9a1,1,0,1,0,0-2H13.53l7.53-7.55A10,10,0,0,0,29,40v7.42l-4.35-4.08a1,1,0,0,0-1.37,1.46L29.92,51l6.79-6.22a1,1,0,0,0-1.35-1.48l-4.36,4V40a10,10,0,0,0,7.94-5.49L46.46,42H41a1,1,0,0,0,0,2h9V35A1,1,0,0,0,49,34ZM30,38a8,8,0,1,1,8-8A8,8,0,0,1,30,38Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/mobility.svg b/assets/sdc-icons/resources_60/mobility.svg
new file mode 100644
index 0000000..2aad903
--- /dev/null
+++ b/assets/sdc-icons/resources_60/mobility.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Mobility2_60px </title><path d="M36,24H23a2,2,0,0,0-2,2V49a2,2,0,0,0,2,2H36a2,2,0,0,0,2-2V26A2,2,0,0,0,36,24ZM23,49V26H36V49Z"/><path d="M31,45H28a1,1,0,0,0,0,2h3a1,1,0,0,0,0-2Z"/><path d="M50.18,23a9.17,9.17,0,0,0-4.77-2.84,8.12,8.12,0,0,0-7.67-4.56,13,13,0,0,0-1.78.13A11.55,11.55,0,0,0,15.37,20a8,8,0,0,0-5.16,2.52A8.26,8.26,0,0,0,8,28.1,8.06,8.06,0,0,0,16,36a1,1,0,0,0,0-2,6.11,6.11,0,0,1-6-5.9,6.19,6.19,0,0,1,1.65-4.18,5.85,5.85,0,0,1,4-1.92L17,22l.16-.83A9.67,9.67,0,0,1,26.68,13a9.56,9.56,0,0,1,8,4.4l.38.57.67-.16a9.07,9.07,0,0,1,2-.21,6.12,6.12,0,0,1,6.06,3.86l.24.59.64,0a6.81,6.81,0,0,1,4,2.18A6.11,6.11,0,0,1,50,28.1a6.19,6.19,0,0,1-1.65,4.18A6.41,6.41,0,0,1,44,34a1,1,0,0,0,0,2,8.45,8.45,0,0,0,5.77-2.33A8.26,8.26,0,0,0,52,28.1,8.1,8.1,0,0,0,50.18,23Z"/><path d="M32,28H27a2,2,0,0,0-2,2V41a2,2,0,0,0,2,2h5a2,2,0,0,0,2-2V30A2,2,0,0,0,32,28ZM27,41V30h5V41Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/monitoring_template.svg b/assets/sdc-icons/resources_60/monitoring_template.svg
new file mode 100644
index 0000000..93417c0
--- /dev/null
+++ b/assets/sdc-icons/resources_60/monitoring_template.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Rules Network Template monitor_60px </title><path d="M48.51,18h-37A1.49,1.49,0,0,0,10,19.49v21A1.49,1.49,0,0,0,11.49,42h37A1.49,1.49,0,0,0,50,40.51v-21A1.49,1.49,0,0,0,48.51,18ZM48,40H12V20H48Z"/><path d="M16,25h8a1,1,0,0,0,0-2H16a1,1,0,0,0,0,2Z"/><path d="M28.55,36.93A1,1,0,0,0,29,37a1,1,0,0,0,.89-.55l4.44-8.81,3.94,4,.07.05s0,0,.07.06l.13.07.1.05A1,1,0,0,0,39,32h0a1,1,0,0,0,.42-.1l.11-.07a1,1,0,0,0,.17-.12.24.24,0,0,0,.06-.08l.06-.05,5-7a1,1,0,1,0-1.63-1.16l-4.3,6.05-4.08-4.17a.67.67,0,0,0-.14-.09.64.64,0,0,0-.13-.1h0l-.2-.06-.18,0a.62.62,0,0,0-.19,0,1.13,1.13,0,0,0-.18,0,.83.83,0,0,0-.16.09l-.18.12h0a.67.67,0,0,0-.09.14,1.47,1.47,0,0,0-.1.13L28.11,35.59A1,1,0,0,0,28.55,36.93Z"/><path d="M16,30h8a1,1,0,0,0,0-2H16a1,1,0,0,0,0,2Z"/><path d="M16,35h8a1,1,0,0,0,0-2H16a1,1,0,0,0,0,2Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/network.svg b/assets/sdc-icons/resources_60/network.svg
new file mode 100644
index 0000000..d614d24
--- /dev/null
+++ b/assets/sdc-icons/resources_60/network.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Network_60px</title><path d="M45,40.13A18.94,18.94,0,0,0,48,30,18.95,18.95,0,0,0,23,12,3.49,3.49,0,0,0,17,14.5a3.38,3.38,0,0,0,.08.72A18.81,18.81,0,0,0,10,30,19.07,19.07,0,0,0,29,49h.06a18.88,18.88,0,0,0,15.75-8.51A.84.84,0,0,0,45,40.13ZM24.5,38A1.5,1.5,0,1,1,26,36.5,1.5,1.5,0,0,1,24.5,38ZM28,36.42a39.57,39.57,0,0,0,4.52-2l.89-.49a24.56,24.56,0,0,1-2.14,4.18c-1.2-.22-2.34-.45-3.4-.69A3.53,3.53,0,0,0,28,36.5S28,36.45,28,36.42Zm8.08-4.1c1.32-.86,2.53-1.74,3.62-2.59,2,3.76,3.48,7.18,4.08,8.64l-.3.49a43.5,43.5,0,0,1-10.07-.41A26.35,26.35,0,0,0,36.07,32.32ZM34.36,20.53a1.46,1.46,0,0,1,.89-.51l.25,0a1.5,1.5,0,0,1,.22,3l-.22,0A1.5,1.5,0,0,1,34,21.5,1.44,1.44,0,0,1,34.36,20.53ZM37,25.06c.61,1,1.19,1.92,1.74,2.89-.63.49-1.29,1-2,1.5A24.22,24.22,0,0,0,37,25.06ZM44.9,35.91c-.8-1.86-2-4.56-3.62-7.46C43,27,44.34,25.68,45.2,24.8a16.82,16.82,0,0,1-.3,11.11Zm-.52-13.16a52.85,52.85,0,0,1-4.1,3.91c-.59-1-1.21-2-1.86-3l-.07-.11A3.46,3.46,0,0,0,36,18.05,37.39,37.39,0,0,0,34.62,14a16.84,16.84,0,0,1,9.76,8.79ZM32.16,13.3A33.82,33.82,0,0,1,34,18.37a4,4,0,0,0-.39.23,37.69,37.69,0,0,0-9.24-5A17,17,0,0,1,29,13,17.44,17.44,0,0,1,32.16,13.3ZM20.5,13A1.5,1.5,0,1,1,19,14.5,1.5,1.5,0,0,1,20.5,13Zm-2.45,4a3.48,3.48,0,0,0,5.76-1.39,36.13,36.13,0,0,1,8.48,4.53A3.54,3.54,0,0,0,32,21.5,3.5,3.5,0,0,0,35,25a20.84,20.84,0,0,1-.61,6.1c-.89.56-1.81,1.1-2.78,1.61a37.32,37.32,0,0,1-4.19,1.85A3.52,3.52,0,0,0,24.5,33a3.39,3.39,0,0,0-1.75.49.83.83,0,0,0-.21-.28,37,37,0,0,1-8.63-11.06A17,17,0,0,1,18.05,17ZM12.9,24.53a39.59,39.59,0,0,0,8.32,10.18,1,1,0,0,0,.22.13A3.48,3.48,0,0,0,21,36.47c-3,.75-5.63,1.18-7,1.39a16.92,16.92,0,0,1-1-13.33Zm2.18,15.18c1.55-.25,3.86-.66,6.48-1.32A3.5,3.5,0,0,0,24.5,40a3.44,3.44,0,0,0,2.19-.8c1,.24,2.12.48,3.29.71a27.3,27.3,0,0,1-6.8,6A17.1,17.1,0,0,1,15.08,39.71Zm14,7.29H29a16.35,16.35,0,0,1-3.3-.34,27.85,27.85,0,0,0,6.49-6.36,54.09,54.09,0,0,0,8.25.71c.51,0,1,0,1.52,0A16.85,16.85,0,0,1,29.06,47Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/network_cloud.svg b/assets/sdc-icons/resources_60/network_cloud.svg
new file mode 100644
index 0000000..a461017
--- /dev/null
+++ b/assets/sdc-icons/resources_60/network_cloud.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title> Cloud_60px</title><path d="M43.81,26.09c-1-6-7-10-12.18-10h-.25c-8-.48-11.12,2.76-12.3,5.56a1,1,0,0,0,1.84.78c1.34-3.16,4.92-4.66,10.34-4.35l.35,0c4.5.05,9.84,3.78,10.32,9.05L42,28h.89c3.25.06,6.1,3.23,6.1,6.78a6.13,6.13,0,0,1-1.87,4.37A6.58,6.58,0,0,1,42.59,41H15.43A6.66,6.66,0,0,1,9,34.5,6.47,6.47,0,0,1,15.41,28,7.58,7.58,0,0,1,22,32.39a1,1,0,0,0,1.88-.69A9.63,9.63,0,0,0,15.41,26,8.46,8.46,0,0,0,7,34.5,8.71,8.71,0,0,0,15.41,43H42.59a8.58,8.58,0,0,0,5.93-2.4A8.1,8.1,0,0,0,51,34.8,8.76,8.76,0,0,0,43.81,26.09Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/networkrules.svg b/assets/sdc-icons/resources_60/networkrules.svg
new file mode 100644
index 0000000..a5d221f
--- /dev/null
+++ b/assets/sdc-icons/resources_60/networkrules.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Rules Security_60px copy</title><path d="M39,27.12v-7.6A2.68,2.68,0,0,0,36.19,17H15.81A2.68,2.68,0,0,0,13,19.52v26A2.68,2.68,0,0,0,15.81,48H36.19a2.08,2.08,0,0,0,.36,0c.32,0,.63,0,1,0A10.49,10.49,0,0,0,39,27.12ZM15.81,46c-.49,0-.81-.31-.81-.52v-26c0-.21.32-.52.81-.52H36.19c.49,0,.81.31.81.52V27a10.33,10.33,0,0,0-4.71,1.37,1,1,0,0,0-.78-.4H23.94a1,1,0,1,0,0,2h6.23A10.41,10.41,0,0,0,28,33H23.94a1,1,0,1,0,0,2h3.37A10.83,10.83,0,0,0,27,37.5c0,.17,0,.33,0,.5H23.94a1,1,0,1,0,0,2h3.37a10.54,10.54,0,0,0,4.05,6ZM37.5,46A8.5,8.5,0,1,1,46,37.5,8.51,8.51,0,0,1,37.5,46Z"/><path d="M23.94,25h9a1,1,0,0,0,0-2h-9a1,1,0,1,0,0,2Z"/><circle cx="19" cy="24" r="1"/><circle cx="19" cy="29" r="1"/><circle cx="19" cy="34" r="1"/><circle cx="19" cy="39" r="1"/><path d="M40.5,36H40a1.22,1.22,0,0,0-2.07-.65A2,2,0,0,0,34,36s0,.06,0,.09a1.48,1.48,0,0,0-1,1.41A1.5,1.5,0,0,0,34.5,39h6a1.5,1.5,0,0,0,0-3Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/notification.svg b/assets/sdc-icons/resources_60/notification.svg
new file mode 100644
index 0000000..a76151a
--- /dev/null
+++ b/assets/sdc-icons/resources_60/notification.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Notification_60px </title><path d="M44.68,38.63,40,33.53a.28.28,0,0,1,0-.09V27.81a11.13,11.13,0,0,0-6-10.13V14.5A1.5,1.5,0,0,0,32.5,13h-5A1.5,1.5,0,0,0,26,14.5v3.12a11.14,11.14,0,0,0-6,10.21v5.63a.28.28,0,0,1,0,.09l-4.54,4.92-.13.16a2.3,2.3,0,0,0,0,2.31A2,2,0,0,0,17.07,42h8c0,.08,0,.16,0,.25a5,5,0,0,0,10,0c0-.09,0-.17,0-.25h8a2,2,0,0,0,1.77-1.06A2.3,2.3,0,0,0,44.68,38.63ZM28,15h4v2H28Zm5,27.25a3,3,0,0,1-6,0A2,2,0,0,1,27,42h6A2,2,0,0,1,33,42.25ZM42.93,40H17.08a.17.17,0,0,1-.07-.11.32.32,0,0,1,0-.17l4.55-4.92.12-.17A2.26,2.26,0,0,0,22,33.46V27.83C22,23.62,24.46,20,28,19h3.89C35.43,20,38,23.69,38,27.81v5.63a2.31,2.31,0,0,0,.32,1.17L43,39.72a.32.32,0,0,1,0,.17A.27.27,0,0,1,42.93,40Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/objectStorage.svg b/assets/sdc-icons/resources_60/objectStorage.svg
new file mode 100644
index 0000000..77b737d
--- /dev/null
+++ b/assets/sdc-icons/resources_60/objectStorage.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>object storage icon-60px_2px</title><path d="M40,32H33a1,1,0,0,0,0,2h7a1,1,0,0,0,0-2Z"/><path d="M40,37H33a1,1,0,0,0,0,2h7a1,1,0,0,0,0-2Z"/><path d="M40,42H33a1,1,0,0,0,0,2h7a1,1,0,0,0,0-2Z"/><path d="M49.16,24a6.91,6.91,0,0,0-3.84-2.73,10.52,10.52,0,0,0-8.9-5.3h-.81a3.89,3.89,0,0,1-.48,0,12.24,12.24,0,0,0-10.05-5c-5.9,0-9.41,4.91-10,10a8.41,8.41,0,0,0-5.81,2.49A9.11,9.11,0,0,0,7,29.5c0,4.69,3.5,8.5,7.8,8.5H28V50a3,3,0,0,0,3,3H42a3,3,0,0,0,3-3V37.91a6.49,6.49,0,0,0,3.76-2.44A9.06,9.06,0,0,0,49.16,24ZM43,50a1,1,0,0,1-1,1H31a1,1,0,0,1-1-1V27a1,1,0,0,1,1-1H42a1,1,0,0,1,1,1Zm4.28-15.87A5.28,5.28,0,0,1,45,35.87V27a3,3,0,0,0-3-3H31a3,3,0,0,0-3,3v9H14.8C11.6,36,9,33.08,9,29.5a7.06,7.06,0,0,1,1.72-4.63A6.51,6.51,0,0,1,15.2,23h1.72l0-1C17.2,17.57,20.06,13,25.08,13a10.2,10.2,0,0,1,8.67,4.54L34,18l.52,0c.46,0,.77,0,1.08,0h.76a8.5,8.5,0,0,1,7.37,4.63l.23.45.49.08a4.75,4.75,0,0,1,3.08,2.09A7,7,0,0,1,49,29.5,7.06,7.06,0,0,1,47.28,34.13Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/ossep.svg b/assets/sdc-icons/resources_60/ossep.svg
new file mode 100644
index 0000000..7eddfb0
--- /dev/null
+++ b/assets/sdc-icons/resources_60/ossep.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Generic OSS_60PX</title><path d="M28.8,26A3.51,3.51,0,0,0,26,27.18a5,5,0,0,0-1,3.31,5,5,0,0,0,1,3.32A3.42,3.42,0,0,0,28.8,35a3.42,3.42,0,0,0,2.79-1.16,5,5,0,0,0,1-3.31,5,5,0,0,0-1-3.32A3.45,3.45,0,0,0,28.8,26Zm0,7.4a1.72,1.72,0,0,1-1.51-.74,3.94,3.94,0,0,1-.5-2.19,3.94,3.94,0,0,1,.5-2.19,1.73,1.73,0,0,1,1.51-.75c1.34,0,2,1,2,2.94S30.14,33.43,28.8,33.43Z"/><path d="M36.94,29.84a12.32,12.32,0,0,1-1.07-.61,1.33,1.33,0,0,1-.33-.35.94.94,0,0,1-.1-.43.82.82,0,0,1,.25-.63,1.06,1.06,0,0,1,.73-.25,2.91,2.91,0,0,1,.82.12,6.48,6.48,0,0,1,1,.39l.54-1.43a8.68,8.68,0,0,0-1.17-.45A4.2,4.2,0,0,0,36.48,26a2.79,2.79,0,0,0-2,.66,2.36,2.36,0,0,0-.71,1.81A2.52,2.52,0,0,0,34,29.58a2.57,2.57,0,0,0,.58.8,4.65,4.65,0,0,0,1.09.72,10.83,10.83,0,0,1,1,.59,1.37,1.37,0,0,1,.38.38.8.8,0,0,1,.13.46.82.82,0,0,1-.29.68,1.32,1.32,0,0,1-.85.24,3.52,3.52,0,0,1-1-.16,9.42,9.42,0,0,1-1.36-.55v1.71A4.66,4.66,0,0,0,36,35a3.17,3.17,0,0,0,2.15-.68,2.35,2.35,0,0,0,.77-1.85A2.47,2.47,0,0,0,38.46,31,4.22,4.22,0,0,0,36.94,29.84Z"/><path d="M43,29.83a10.68,10.68,0,0,1-1.07-.6,1.37,1.37,0,0,1-.33-.36.93.93,0,0,1-.1-.42.87.87,0,0,1,.26-.64,1,1,0,0,1,.73-.24,3.29,3.29,0,0,1,.81.11,7.85,7.85,0,0,1,1,.4l.54-1.43a6.63,6.63,0,0,0-1.17-.45A4.2,4.2,0,0,0,42.58,26a2.79,2.79,0,0,0-2,.66,2.36,2.36,0,0,0-.71,1.81,2.55,2.55,0,0,0,.22,1.07,2.69,2.69,0,0,0,.58.8,4.65,4.65,0,0,0,1.09.72,8.09,8.09,0,0,1,1,.59,1.57,1.57,0,0,1,.39.38.85.85,0,0,1,.13.45.81.81,0,0,1-.3.69,1.32,1.32,0,0,1-.85.23,3.57,3.57,0,0,1-1-.16,8,8,0,0,1-1.35-.55v1.71a4.62,4.62,0,0,0,2.23.53,3.2,3.2,0,0,0,2.15-.68A2.32,2.32,0,0,0,45,32.43,2.46,2.46,0,0,0,44.56,31,4.24,4.24,0,0,0,43,29.83Z"/><path d="M46.85,22H39.06c.3-.5.76-1.27.8-1.32a1,1,0,0,0-.16-1.23l-3-2.95a1,1,0,0,0-1.22-.15l-3.64,2.18a11.59,11.59,0,0,0-1.66-.69l-1-4.08a1,1,0,0,0-1-.76H24a1,1,0,0,0-1,.76l-1,4.08a12.09,12.09,0,0,0-1.66.69l-3.64-2.18a1,1,0,0,0-1.22.15l-3,2.95a1,1,0,0,0-.15,1.23l2.18,3.61a13,13,0,0,0-.68,1.63l-4.12,1a1,1,0,0,0-.76,1v4.18a1,1,0,0,0,.76,1l4.12,1a13,13,0,0,0,.68,1.63l-2.18,3.61a1,1,0,0,0,.15,1.23l3,3a1,1,0,0,0,1.22.15l3.64-2.18a12.09,12.09,0,0,0,1.66.69l1,4.08A1,1,0,0,0,24,47h4.21a1,1,0,0,0,1-.76l1-4.08a11.59,11.59,0,0,0,1.66-.69l3.64,2.18a1,1,0,0,0,1.22-.15l3-3a1,1,0,0,0,.18-1.16c0-.08,0-.11-.29-.39h7.25A3,3,0,0,0,50,36.13V24.87A3,3,0,0,0,46.85,22ZM37.59,39.73l0,.06-1.76,1.74-3.36-2,0,0a1,1,0,0,0-1.06,0,9.53,9.53,0,0,1-2.3.95,1,1,0,0,0-.7.72l-1,3.88H24.79l-1-3.88a1,1,0,0,0-.7-.72,9.53,9.53,0,0,1-2.3-.95,1,1,0,0,0-1.05,0h0l-3.39,2L14.5,39.68l2-3.33,0,0a1,1,0,0,0,0-1.07A10.44,10.44,0,0,1,15.63,33a1,1,0,0,0-.72-.7L11,31.3V28.7l3.91-1a1,1,0,0,0,.72-.7,10.44,10.44,0,0,1,.95-2.28,1,1,0,0,0,0-1.07h0l-2-3.35,1.86-1.85,3.36,2,.05,0a1,1,0,0,0,1.05.05,9.53,9.53,0,0,1,2.3-.95,1,1,0,0,0,.7-.72l1-3.88h2.65l1,3.88a1,1,0,0,0,.7.72,9.53,9.53,0,0,1,2.3.95,1,1,0,0,0,1.06-.05h0l3.39-2,1.87,1.85-.64,1.05A.94.94,0,0,0,37,22H23.15A3,3,0,0,0,20,24.87V36.13A3,3,0,0,0,23.15,39H37C37.06,39.13,37.24,39.33,37.59,39.73ZM48,36.13c0,.47-.53.87-1.15.87H23.15c-.62,0-1.15-.4-1.15-.87V24.87c0-.47.53-.87,1.15-.87h23.7c.62,0,1.15.4,1.15.87Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/personep.svg b/assets/sdc-icons/resources_60/personep.svg
new file mode 100644
index 0000000..9d58de4
--- /dev/null
+++ b/assets/sdc-icons/resources_60/personep.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>User Person_60px</title><g id="Layer_2" data-name="Layer 2"><path d="M27.5,38c4.14,0,7.5-4.49,7.5-10s-3.36-10-7.5-10S20,22.49,20,28,23.36,38,27.5,38Zm0-18c3,0,5.5,3.59,5.5,8s-2.47,8-5.5,8S22,32.41,22,28,24.47,20,27.5,20Z"/><path d="M46.3,32.23A10,10,0,0,0,40,30h0a1,1,0,0,0,0,2,8,8,0,0,1,5,1.76,5.27,5.27,0,0,1,2,4V42a1,1,0,0,0,2,0V37.79A7.26,7.26,0,0,0,46.3,32.23Z"/><path d="M30,15a7,7,0,0,1,7,7,1,1,0,0,0,2,0,9,9,0,0,0-9-9,1,1,0,0,0,0,2Z"/><path d="M38.92,36a1,1,0,0,0,0,2,4.2,4.2,0,0,1,2.89,1.18A3.9,3.9,0,0,1,43,42v3.75a.26.26,0,0,1-.27.25H12.27a.26.26,0,0,1-.27-.25V42a4,4,0,0,1,4.08-4,1,1,0,0,0,0-2A6,6,0,0,0,10,42v3.75A2.26,2.26,0,0,0,12.27,48H42.73A2.26,2.26,0,0,0,45,45.75V42a5.9,5.9,0,0,0-1.79-4.25A6.17,6.17,0,0,0,38.92,36Z"/></g></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/pmc.svg b/assets/sdc-icons/resources_60/pmc.svg
new file mode 100644
index 0000000..d34ec11
--- /dev/null
+++ b/assets/sdc-icons/resources_60/pmc.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>C_60px </title><path d="M32.06,23.32A4.39,4.39,0,0,0,28.43,25a7.11,7.11,0,0,0-1.32,4.56,7.13,7.13,0,0,0,1.27,4.6,4.47,4.47,0,0,0,3.68,1.56,9.52,9.52,0,0,0,2-.21c.65-.14,1.32-.32,2-.53v2.31a12,12,0,0,1-4.37.74,7,7,0,0,1-5.52-2.2,9.28,9.28,0,0,1-1.92-6.29A10.34,10.34,0,0,1,25.22,25a6.77,6.77,0,0,1,2.71-3,8,8,0,0,1,4.15-1,10.19,10.19,0,0,1,4.63,1.06l-1,2.25A15.17,15.17,0,0,0,34,23.62,6.3,6.3,0,0,0,32.06,23.32Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/port.svg b/assets/sdc-icons/resources_60/port.svg
new file mode 100644
index 0000000..a544263
--- /dev/null
+++ b/assets/sdc-icons/resources_60/port.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>port-60px_2px</title><path d="M46.5,14h-33A1.5,1.5,0,0,0,12,15.5v21A1.5,1.5,0,0,0,13.5,38H16v2.5A1.5,1.5,0,0,0,17.5,42H20v2.5A1.5,1.5,0,0,0,21.5,46h17A1.5,1.5,0,0,0,40,44.5V42h2.5A1.5,1.5,0,0,0,44,40.5V38h2.5A1.5,1.5,0,0,0,48,36.5v-21A1.5,1.5,0,0,0,46.5,14ZM46,36H43.5A1.5,1.5,0,0,0,42,37.5V40H39.5A1.5,1.5,0,0,0,38,41.5V44H22V41.5A1.5,1.5,0,0,0,20.5,40H18V37.5A1.5,1.5,0,0,0,16.5,36H14V16h5v5a1,1,0,0,0,2,0V16h3v5a1,1,0,0,0,2,0V16h3v5a1,1,0,0,0,2,0V16h3v5a1,1,0,0,0,2,0V16h3v5a1,1,0,0,0,2,0V16h5Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/premisesep.svg b/assets/sdc-icons/resources_60/premisesep.svg
new file mode 100644
index 0000000..db5b355
--- /dev/null
+++ b/assets/sdc-icons/resources_60/premisesep.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>User Office_60px</title><g id="Layer_2" data-name="Layer 2"><path d="M27.75,17h-4.5A1.25,1.25,0,0,0,22,18.25v4.5A1.25,1.25,0,0,0,23.25,24h4.5A1.25,1.25,0,0,0,29,22.75v-4.5A1.25,1.25,0,0,0,27.75,17ZM27,22H24V19h3Z"/><path d="M37.75,17h-4.5A1.25,1.25,0,0,0,32,18.25v4.5A1.25,1.25,0,0,0,33.25,24h4.5A1.25,1.25,0,0,0,39,22.75v-4.5A1.25,1.25,0,0,0,37.75,17ZM37,22H34V19h3Z"/><path d="M27.75,27h-4.5A1.25,1.25,0,0,0,22,28.25v4.5A1.25,1.25,0,0,0,23.25,34h4.5A1.25,1.25,0,0,0,29,32.75v-4.5A1.25,1.25,0,0,0,27.75,27ZM27,32H24V29h3Z"/><path d="M37.75,27h-4.5A1.25,1.25,0,0,0,32,28.25v4.5A1.25,1.25,0,0,0,33.25,34h4.5A1.25,1.25,0,0,0,39,32.75v-4.5A1.25,1.25,0,0,0,37.75,27ZM37,32H34V29h3Z"/><path d="M37.75,37h-4.5A1.25,1.25,0,0,0,32,38.25v4.5A1.25,1.25,0,0,0,33.25,44h4.5A1.25,1.25,0,0,0,39,42.75v-4.5A1.25,1.25,0,0,0,37.75,37ZM37,42H34V39h3Z"/><path d="M41,12H20a3,3,0,0,0-3,3V46a3,3,0,0,0,3,3H41a3,3,0,0,0,3-3V15A3,3,0,0,0,41,12ZM24,47V39h3v8Zm18-1a1,1,0,0,1-1,1H29V38.25A1.25,1.25,0,0,0,27.75,37h-4.5A1.25,1.25,0,0,0,22,38.25V47H20a1,1,0,0,1-1-1V15a1,1,0,0,1,1-1H41a1,1,0,0,1,1,1Z"/></g></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/router.svg b/assets/sdc-icons/resources_60/router.svg
new file mode 100644
index 0000000..4873b6b
--- /dev/null
+++ b/assets/sdc-icons/resources_60/router.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Router_60px</title><path d="M34.33,41.28,31,44.37V36a1,1,0,0,0-2,0v8.36l-3.3-3.07a1,1,0,0,0-1.36,1.46L30,48l5.69-5.27a1,1,0,1,0-1.35-1.47Z"/><path d="M25.69,18.74,29,15.67V24a1,1,0,1,0,2,0v-8.4l3.37,3.11a1,1,0,0,0,.68.26,1,1,0,0,0,.73-.32,1,1,0,0,0-.05-1.41L30,12l-.72.66h0l-5,4.59a1,1,0,0,0-.06,1.41A1,1,0,0,0,25.69,18.74Z"/><path d="M47,29H37.64l3.09-3.39a1,1,0,0,0-1.47-1.35L34,30l5.26,5.66A1,1,0,0,0,40,36a1,1,0,0,0,.73-1.68L37.65,31H47a1,1,0,0,0,0-2Z"/><path d="M30,8A22,22,0,1,0,52,30,22,22,0,0,0,30,8Zm0,42A20,20,0,1,1,50,30,20,20,0,0,1,30,50Z"/><path d="M20.67,24.36a1,1,0,1,0-1.44,1.38L22.34,29H13a1,1,0,0,0,0,2h9.31l-3.06,3.34a1,1,0,0,0,.06,1.42A1.05,1.05,0,0,0,20,36a1,1,0,0,0,.74-.33L26,29.93Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/security.svg b/assets/sdc-icons/resources_60/security.svg
new file mode 100644
index 0000000..c78b282
--- /dev/null
+++ b/assets/sdc-icons/resources_60/security.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Security_60px</title><path d="M44,17.45A2.4,2.4,0,0,0,41.49,15a27.48,27.48,0,0,1-10.74-1.79,2.14,2.14,0,0,0-.82-.22,2.2,2.2,0,0,0-.85.23A28,28,0,0,1,18.5,15,2.49,2.49,0,0,0,16,17.47c-.22,3.77-.62,22.78,13.29,27.42A1.93,1.93,0,0,0,30,45a2.48,2.48,0,0,0,.78-.11C36.49,43,40.43,38.45,42.5,31.4A44,44,0,0,0,44,17.45ZM30.17,43h-.24a14.42,14.42,0,0,1-6.07-3.93l14.63-8.2a1,1,0,0,0-1-1.74L22.57,37.5c-5-6.92-4.72-17.31-4.57-19.91,0-.26.12-.56.5-.56a30.21,30.21,0,0,0,11.29-1.94l.13-.05.1,0A29.44,29.44,0,0,0,41.49,17c.29,0,.48,0,.51.55,0,.23,0,.51,0,.85L22.52,29.12a1,1,0,0,0-.4,1.36A1,1,0,0,0,23,31a1,1,0,0,0,.48-.12L42,20.68C41.89,27,40.28,39.61,30.17,43Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/securityrules.svg b/assets/sdc-icons/resources_60/securityrules.svg
new file mode 100644
index 0000000..cfc03d5
--- /dev/null
+++ b/assets/sdc-icons/resources_60/securityrules.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Rules Security_60px </title><path d="M39,27.12v-7.6A2.68,2.68,0,0,0,36.19,17H15.81A2.68,2.68,0,0,0,13,19.52v26A2.68,2.68,0,0,0,15.81,48H36.19a2.08,2.08,0,0,0,.36,0c.32,0,.63,0,1,0A10.49,10.49,0,0,0,39,27.12ZM15.81,46c-.49,0-.81-.31-.81-.52v-26c0-.21.32-.52.81-.52H36.19c.49,0,.81.31.81.52V27a10.33,10.33,0,0,0-4.71,1.37,1,1,0,0,0-.78-.4H23.94a1,1,0,1,0,0,2h6.23A10.41,10.41,0,0,0,28,33H23.94a1,1,0,1,0,0,2h3.37A10.83,10.83,0,0,0,27,37.5c0,.17,0,.33,0,.5H23.94a1,1,0,1,0,0,2h3.37a10.54,10.54,0,0,0,4.05,6ZM37.5,46A8.5,8.5,0,1,1,46,37.5,8.51,8.51,0,0,1,37.5,46Z"/><path d="M41.57,34a5.73,5.73,0,0,1-4.1-1,5.79,5.79,0,0,1-4.08,1c-.19,0-.39.23-.41.49-.1,1.74,0,7.07,4.39,8.45a.32.32,0,0,0,.14,0,.4.4,0,0,0,.15,0C42,41.53,42.13,36.2,42,34.47A.47.47,0,0,0,41.57,34Z"/><path d="M23.94,25h9a1,1,0,0,0,0-2h-9a1,1,0,1,0,0,2Z"/><circle cx="19" cy="24" r="1"/><circle cx="19" cy="29" r="1"/><circle cx="19" cy="34" r="1"/><circle cx="19" cy="39" r="1"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/server.svg b/assets/sdc-icons/resources_60/server.svg
new file mode 100644
index 0000000..356247b
--- /dev/null
+++ b/assets/sdc-icons/resources_60/server.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Server-60px_2px</title><path d="M36,13H24a3,3,0,0,0-3,3V44a3,3,0,0,0,3,3H36a3,3,0,0,0,3-3V16A3,3,0,0,0,36,13Zm1,31a1,1,0,0,1-1,1H24a1,1,0,0,1-1-1V16a1,1,0,0,1,1-1H36a1,1,0,0,1,1,1Z"/><path d="M33,18H27a1,1,0,0,0,0,2h6a1,1,0,0,0,0-2Z"/><path d="M33,22H27a1,1,0,0,0,0,2h6a1,1,0,0,0,0-2Z"/><path d="M33,26H27a1,1,0,0,0,0,2h6a1,1,0,0,0,0-2Z"/><path d="M31.11,39.34a1.63,1.63,0,0,0-.34-.19,1.82,1.82,0,0,0-.38-.11,2,2,0,0,0-.78,0,1.66,1.66,0,0,0-.38.11,1.63,1.63,0,0,0-.34.19,1.42,1.42,0,0,0-.3.25,2,2,0,1,0,2.82,2.82,1.42,1.42,0,0,0,.25-.3,1.63,1.63,0,0,0,.19-.34A2.2,2.2,0,0,0,32,41a2,2,0,0,0-.59-1.41A1.42,1.42,0,0,0,31.11,39.34Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/ucpe.svg b/assets/sdc-icons/resources_60/ucpe.svg
new file mode 100644
index 0000000..53bf7af
--- /dev/null
+++ b/assets/sdc-icons/resources_60/ucpe.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>universal Cpe_60px</title><path d="M34.29,40.35l-3.3,3V35a1,1,0,0,0-2,0v8.37l-3.35-3.09a1,1,0,0,0-1.35,1.47L30,47l5.65-5.18a1,1,0,0,0-1.35-1.48Z"/><path d="M25.72,19.63l3.28-3V25a1,1,0,0,0,2,0V16.6l3.37,3.11a1,1,0,0,0,.68.26,1,1,0,0,0,.73-.32,1,1,0,0,0-.05-1.42L30,13l-5.65,5.19a1,1,0,0,0,1.35,1.47Z"/><path d="M41.74,24.32a1,1,0,0,0-1.46,1.36L43.37,29H35a1,1,0,0,0,0,2h8.35l-3.07,3.32a1,1,0,0,0,0,1.41,1,1,0,0,0,1.42,0L47,30Z"/><path d="M16.59,31H25a1,1,0,0,0,0-2H16.62l3.07-3.32a1,1,0,0,0-1.47-1.36L13,30l5.27,5.66A1,1,0,0,0,19,36a1,1,0,0,0,.68-.27,1,1,0,0,0,.05-1.41Z"/><path d="M30,8A22,22,0,1,0,52,30,22,22,0,0,0,30,8Zm0,42A20,20,0,1,1,50,30,20,20,0,0,1,30,50Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/vRouter.svg b/assets/sdc-icons/resources_60/vRouter.svg
new file mode 100644
index 0000000..89e6893
--- /dev/null
+++ b/assets/sdc-icons/resources_60/vRouter.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Virual Router_60px</title><circle cx="15.5" cy="35.5" r="1.5"/><circle cx="20.5" cy="35.5" r="1.5"/><circle cx="25.5" cy="35.5" r="1.5"/><path d="M38.49,30,42,22.72a.5.5,0,1,0-.91-.43L38.5,27.68l-2.56-5.39a.5.5,0,0,0-.66-.24.5.5,0,0,0-.24.67Z"/><path d="M48,29H46.24a8.5,8.5,0,1,0-15.48,0H22V15a1,1,0,0,0-2,0V29H12a3,3,0,0,0-3,3v7a3,3,0,0,0,3,3H48a3,3,0,0,0,3-3V32A3,3,0,0,0,48,29ZM38.5,19A6.5,6.5,0,1,1,32,25.5,6.51,6.51,0,0,1,38.5,19ZM49,39a1,1,0,0,1-1,1H12a1,1,0,0,1-1-1V32a1,1,0,0,1,1-1H32A8.48,8.48,0,0,0,45,31h3a1,1,0,0,1,1,1Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/vfw.svg b/assets/sdc-icons/resources_60/vfw.svg
new file mode 100644
index 0000000..d58b011
--- /dev/null
+++ b/assets/sdc-icons/resources_60/vfw.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60"><defs><style>.cls-1{fill:none;clip-rule:evenodd;}.cls-2{clip-path:url(#clip-path);}</style><clipPath id="clip-path"><path class="cls-1" d="M442.67,72.67a4,4,0,1,0,4,4A4,4,0,0,0,442.67,72.67Zm0,10a6,6,0,1,1,6-6A6,6,0,0,1,442.67,82.67Zm8-9.31V68.67H446l-3.31-3.31-3.31,3.31h-4.69v4.69l-3.31,3.31L434.67,80v4.69h4.69L442.67,88,446,84.67h4.69V80L454,76.67Z"/></clipPath></defs><title>Virtual Firewall_60px</title><path d="M15.45,39a3.5,3.5,0,0,0,0,7h.1a3.5,3.5,0,1,0-.1-7Zm.1,5h-.1A1.5,1.5,0,1,1,17,42.55,1.45,1.45,0,0,1,15.55,44Z"/><path d="M38.53,31.13a1,1,0,0,0-1.38.33L33,38.2l-4.16-6.72a1,1,0,0,0-1.38-.32,1,1,0,0,0-.32,1.37L33,42l5.86-9.5A1,1,0,0,0,38.53,31.13Z"/><path d="M41.1,7.43a1.24,1.24,0,0,0-1-.39,1.2,1.2,0,0,0-.88.52c-.44.64-.22,1.48.13,2.87A15.81,15.81,0,0,1,40,14.22a5,5,0,0,1-1.38,3.64,4.63,4.63,0,0,1-3.33,1.23c-2.06,0-3.8-2.32-5.16-6.83C29.93,11.61,29.75,11,29,11a1,1,0,0,0-.84.46A46.22,46.22,0,0,0,22.87,24H9.5A1.42,1.42,0,0,0,8,25.5V48c0,1.18.62,2,1.5,2h23v0L33,50A13.06,13.06,0,0,0,46,37.88a9.6,9.6,0,0,0,3-3,14.14,14.14,0,0,0,2-7.15C51,19.37,42.77,8.92,41.1,7.43ZM10,48V26H26a12.65,12.65,0,0,0-3.31,3H15.5a3.5,3.5,0,0,0,0,7h4.55c0,.29,0,.58,0,.88A13.12,13.12,0,0,0,26.14,48ZM20.33,34H15.5a1.5,1.5,0,0,1,0-3h5.9A13.21,13.21,0,0,0,20.33,34ZM33,48A11.07,11.07,0,0,1,22,36.88,10.82,10.82,0,0,1,33,26a10.79,10.79,0,0,1,8.8,4.2A11.15,11.15,0,0,1,33,48ZM47.35,33.76a8.73,8.73,0,0,1-1.43,1.66A12.66,12.66,0,0,0,33,24c-.37,0-.73,0-1.09.05V24h-7a45,45,0,0,1,3.81-9.55c.93,2.61,2.85,6.59,6.53,6.64A6.61,6.61,0,0,0,40,19.28a7,7,0,0,0,2-5.06A14.46,14.46,0,0,0,41.56,11C44.3,14.55,49,21.8,49,27.73A12,12,0,0,1,47.35,33.76Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/vl.svg b/assets/sdc-icons/resources_60/vl.svg
new file mode 100644
index 0000000..27d6fa8
--- /dev/null
+++ b/assets/sdc-icons/resources_60/vl.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>LV_60px </title><path d="M29.45,21h2.91l-6,17h-3l-6-17h2.89l3.58,10.57a19.86,19.86,0,0,1,.6,2c.21.79.35,1.38.41,1.77.1-.59.26-1.27.47-2s.38-1.34.52-1.72Z"/><path d="M34.4,38V21h2.84V35.62H44.6V38Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/vnfconfiguration.svg b/assets/sdc-icons/resources_60/vnfconfiguration.svg
new file mode 100644
index 0000000..2d5eae4
--- /dev/null
+++ b/assets/sdc-icons/resources_60/vnfconfiguration.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>vnf conduration_60px</title><path d="M44,26.92l-3.23-.52A9.49,9.49,0,0,0,40.15,25L42,22.3a1.22,1.22,0,0,0-.13-1.6l-2.6-2.6A1.22,1.22,0,0,0,37.7,18l-2.65,1.88a9.53,9.53,0,0,0-1.45-.58l-.53-3.22A1.25,1.25,0,0,0,31.82,15H28.18a1.26,1.26,0,0,0-1.25,1.05l-.53,3.22a9.53,9.53,0,0,0-1.45.58L22.3,18a1.22,1.22,0,0,0-1.6.13l-2.6,2.6A1.22,1.22,0,0,0,18,22.3L19.85,25a9.49,9.49,0,0,0-.57,1.45l-3.23.52A1.28,1.28,0,0,0,15,28.17v3.66a1.28,1.28,0,0,0,1.05,1.25l3.23.52a9.49,9.49,0,0,0,.57,1.45L18,37.7a1.22,1.22,0,0,0,.12,1.6l2.6,2.6a1.22,1.22,0,0,0,1.6.13L25,40.15a9.53,9.53,0,0,0,1.45.58L26.93,44a1.26,1.26,0,0,0,1.25,1h3.64a1.25,1.25,0,0,0,1.25-1l.53-3.22a9.53,9.53,0,0,0,1.45-.58L37.7,42a1.22,1.22,0,0,0,1.6-.13l2.6-2.6A1.22,1.22,0,0,0,42,37.7l-1.88-2.65a9.49,9.49,0,0,0,.57-1.45L44,33.08a1.28,1.28,0,0,0,1-1.25V28.17A1.28,1.28,0,0,0,44,26.92ZM35,30a5,5,0,1,1-5-5A5,5,0,0,1,35,30Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/resources_60/wanx.svg b/assets/sdc-icons/resources_60/wanx.svg
new file mode 100644
index 0000000..208d136
--- /dev/null
+++ b/assets/sdc-icons/resources_60/wanx.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>WAN accelerator_60px</title><path d="M30.25,24.27a1,1,0,0,0,0,1.42L33.35,29H8.78l6.4-11h11.2l-3.1,3.36a1,1,0,0,0,0,1.41,1,1,0,0,0,.68.27,1,1,0,0,0,.74-.33L30,17l-5.3-5.63a1,1,0,0,0-1.46,1.37L26.36,16H14L6.47,29a1.09,1.09,0,0,0,0,.17,1,1,0,0,0-.49.84,1,1,0,0,0,.49.84,1,1,0,0,0,0,.16L14,44H26.37l-3.11,3.33A1,1,0,0,0,24,49a1,1,0,0,0,.73-.32L30,43l-5.32-5.69a1,1,0,0,0-1.46,1.37L26.36,42H15.11L8.78,31H33.35l-3.14,3.31a1,1,0,0,0,0,1.42,1,1,0,0,0,.69.27,1,1,0,0,0,.73-.31L37,30l-5.37-5.69A1,1,0,0,0,30.25,24.27Z"/><path d="M42.7,18.31a1,1,0,1,0-1.44,1.38l9,9.31H42a1,1,0,1,0,0,2h8.27l-9,9.31a1,1,0,0,0,0,1.41A1,1,0,0,0,42,42a1,1,0,0,0,.72-.31L54,30Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/services_24/call_controll.svg b/assets/sdc-icons/services_24/call_controll.svg
new file mode 100644
index 0000000..b531db2
--- /dev/null
+++ b/assets/sdc-icons/services_24/call_controll.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill-rule:evenodd;}</style></defs><title>Call control_24px </title><path class="cls-1" d="M15.92,13h-.58c-.54,0-1.05,0-1.59,0a1.25,1.25,0,0,0-1,.29l-.12.19a3,3,0,0,1-.16.36,2.19,2.19,0,0,1-1.7-.52,3.9,3.9,0,0,1-1.51-2.68,3.64,3.64,0,0,1,.44-.31l.1-.07a1.14,1.14,0,0,0,.27-1.14,6.18,6.18,0,0,1-.32-2A1.12,1.12,0,0,0,8.62,6H6.11A1.11,1.11,0,0,0,5,7.11,10.89,10.89,0,0,0,15.9,18,1.11,1.11,0,0,0,17,16.85V14.31A1.26,1.26,0,0,0,15.92,13ZM16,16.85a.11.11,0,0,1-.11.11A9.89,9.89,0,0,1,6,7.11.11.11,0,0,1,6.11,7H8.62a.12.12,0,0,1,.12.11,7.23,7.23,0,0,0,.37,2.32s0,.06,0,.09c-.84.51-.85.79-.85,1a4.75,4.75,0,0,0,1.89,3.64,3,3,0,0,0,2.71.67c.11,0,.37-.11.64-.78h.19c.58,0,1.11,0,1.67,0h.52a.44.44,0,0,1,.14.29Z"/><polygon class="cls-1" points="15 10.99 14.25 10.25 16 8.5 15.5 8 13.75 9.75 13 9 13 10.99 15 10.99"/><polygon class="cls-1" points="13.5 8 15.25 6.25 16 7 16 5 14 5 14.75 5.75 13 7.5 13.5 8"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/services_24/collaboration.svg b/assets/sdc-icons/services_24/collaboration.svg
new file mode 100644
index 0000000..60463f8
--- /dev/null
+++ b/assets/sdc-icons/services_24/collaboration.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Collaboration_24px </title><path d="M18,10l-.19,0-2.1-3.16A2,2,0,1,0,13,5a1.85,1.85,0,0,0,.15.74L8,7.68A2,2,0,1,0,6,10a1,1,0,0,0,.25,0V13A1,1,0,0,0,6,13a2,2,0,1,0,1.76,2.93L11,16.4a2,2,0,0,0,4-.4,2.05,2.05,0,0,0-.09-.56l1.87-1.87A2,2,0,0,0,18,14a2,2,0,0,0,0-4Zm-.71.14a2,2,0,0,0-.83.59l-2.14-.53L14.62,7A1.58,1.58,0,0,0,15,7l.19,0ZM13,14a2,2,0,0,0-1.08.32L9.75,11.84,11.26,10l2.53.63-.32,3.48A1.84,1.84,0,0,0,13,14ZM7.69,9.06l3,.75L9.42,11.45,7.52,9.29C7.58,9.21,7.64,9.14,7.69,9.06Zm3.92.46,2.28-2.86.24.13-.3,3.29Zm1.91-3.19L11.07,9.39,7.9,8.59A2.33,2.33,0,0,0,8,8.21l5.41-2ZM6.75,9.85a1.94,1.94,0,0,0,.4-.22L9.1,11.85,7.56,13.77a2,2,0,0,0-.81-.62Zm1.09,4.37,1.59-2,2.11,2.41A2,2,0,0,0,11,15.89l-3.07-.44A1.63,1.63,0,0,0,8,15,2,2,0,0,0,7.84,14.22Zm6.12,0,.32-3.55,1.9.48A2,2,0,0,0,16,12a2,2,0,0,0,.43,1.22L14.7,15A2.16,2.16,0,0,0,14,14.25Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/services_24/collaboration1.svg b/assets/sdc-icons/services_24/collaboration1.svg
new file mode 100644
index 0000000..2bc92f5
--- /dev/null
+++ b/assets/sdc-icons/services_24/collaboration1.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Collaboration2 24px</title><path d="M15.5,6A5.45,5.45,0,0,0,12,7.26,5.45,5.45,0,0,0,8.5,6a5.5,5.5,0,0,0,0,11A5.45,5.45,0,0,0,12,15.74,5.45,5.45,0,0,0,15.5,17a5.5,5.5,0,0,0,0-11Zm-7,10a4.5,4.5,0,1,1,2.77-8,5.51,5.51,0,0,0,0,7A4.47,4.47,0,0,1,8.5,16ZM11,11.5a4.42,4.42,0,0,1,1-2.79,4.39,4.39,0,0,1,0,5.58A4.42,4.42,0,0,1,11,11.5ZM15.5,16a4.47,4.47,0,0,1-2.77-1,5.51,5.51,0,0,0,0-7,4.49,4.49,0,1,1,2.77,8Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/services_24/compute.svg b/assets/sdc-icons/services_24/compute.svg
new file mode 100644
index 0000000..35b6351
--- /dev/null
+++ b/assets/sdc-icons/services_24/compute.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Compute as Service_24px </title><path d="M14.5,10h-4A1.5,1.5,0,0,0,9,11.5v8A1.5,1.5,0,0,0,10.5,21h4A1.5,1.5,0,0,0,16,19.5v-8A1.5,1.5,0,0,0,14.5,10Zm.5,9.5a.5.5,0,0,1-.5.5h-4a.5.5,0,0,1-.5-.5v-8a.5.5,0,0,1,.5-.5h4a.5.5,0,0,1,.5.5Z"/><path d="M12.85,18.15a.49.49,0,0,0-.54-.11.53.53,0,0,0-.27.27.43.43,0,0,0,0,.19.45.45,0,0,0,.15.35.36.36,0,0,0,.16.11.41.41,0,0,0,.19,0,.47.47,0,0,0,.35-.15.36.36,0,0,0,.11-.16.41.41,0,0,0,0-.19.43.43,0,0,0,0-.19A.36.36,0,0,0,12.85,18.15Z"/><path d="M13.5,12h-2a.5.5,0,0,0,0,1h2a.5.5,0,0,0,0-1Z"/><path d="M13.5,14h-2a.5.5,0,0,0,0,1h2a.5.5,0,0,0,0-1Z"/><path d="M20.23,8.25a2.93,2.93,0,0,0-1.56-1.12A4.41,4.41,0,0,0,15,5h-.43a5.2,5.2,0,0,0-4.16-2A4.46,4.46,0,0,0,6.07,7,3.27,3.27,0,0,0,3.93,8,3.74,3.74,0,0,0,3,10.5,3.39,3.39,0,0,0,6.25,14H7.5a.5.5,0,0,0,0-1H6.25A2.39,2.39,0,0,1,4,10.5a2.71,2.71,0,0,1,.67-1.78A2.18,2.18,0,0,1,6.25,8H7l0-.48A3.54,3.54,0,0,1,10.41,4a4.15,4.15,0,0,1,3.48,1.78L14,6h1a3.34,3.34,0,0,1,2.9,1.8L18,8l.24,0a1.86,1.86,0,0,1,1.19.8A2.67,2.67,0,0,1,20,10.5a2.71,2.71,0,0,1-.67,1.78,2.18,2.18,0,0,1-1.58.72H17.5a.5.5,0,0,0,0,1h.25a3.24,3.24,0,0,0,2.32-1A3.74,3.74,0,0,0,21,10.5,3.63,3.63,0,0,0,20.23,8.25Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/services_24/defaulticon.svg b/assets/sdc-icons/services_24/defaulticon.svg
new file mode 100644
index 0000000..43a6563
--- /dev/null
+++ b/assets/sdc-icons/services_24/defaulticon.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>S_24px</title><path d="M15.46,13.87a2,2,0,0,1-.83,1.73,3.88,3.88,0,0,1-2.36.61,5.67,5.67,0,0,1-2.49-.47V14.32a6.11,6.11,0,0,0,2.54.63c1,0,1.52-.3,1.52-.91a.68.68,0,0,0-.17-.49,1.9,1.9,0,0,0-.55-.41,9.36,9.36,0,0,0-1.07-.47,5.17,5.17,0,0,1-1.81-1,2,2,0,0,1-.47-1.35,1.75,1.75,0,0,1,.8-1.53,3.78,3.78,0,0,1,2.18-.55,6.13,6.13,0,0,1,2.58.55L14.8,10a5.81,5.81,0,0,0-2.1-.51c-.87,0-1.31.24-1.31.74a.76.76,0,0,0,.34.61,7.28,7.28,0,0,0,1.48.69,7.31,7.31,0,0,1,1.4.68,2,2,0,0,1,.64.71A2.06,2.06,0,0,1,15.46,13.87Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/services_24/messaging.svg b/assets/sdc-icons/services_24/messaging.svg
new file mode 100644
index 0000000..b807fa3
--- /dev/null
+++ b/assets/sdc-icons/services_24/messaging.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Messaging_24px </title><path d="M7.5,9h4a.5.5,0,0,0,0-1h-4a.5.5,0,0,0,0,1Z"/><path d="M15.5,10h-8a.5.5,0,0,0,0,1h8a.5.5,0,0,0,0-1Z"/><path d="M17.5,5H6.5A1.5,1.5,0,0,0,5,6.5v6A1.5,1.5,0,0,0,6.5,14H13v3.39a.6.6,0,0,0,.41.57.46.46,0,0,0,.19,0,.63.63,0,0,0,.5-.26L16.64,14h.86A1.5,1.5,0,0,0,19,12.5v-6A1.5,1.5,0,0,0,17.5,5Zm.5,7.5a.5.5,0,0,1-.5.5h-1a.78.78,0,0,0-.65.35L14,16.11V13.65a.65.65,0,0,0-.64-.65H6.5a.48.48,0,0,1-.35-.15A.47.47,0,0,1,6,12.5v-6A.5.5,0,0,1,6.5,6h11a.5.5,0,0,1,.5.5Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/services_24/mobility.svg b/assets/sdc-icons/services_24/mobility.svg
new file mode 100644
index 0000000..1397228
--- /dev/null
+++ b/assets/sdc-icons/services_24/mobility.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Mobility2_24px </title><path d="M14.5,21h-4A1.5,1.5,0,0,1,9,19.5v-8A1.5,1.5,0,0,1,10.5,10h4A1.5,1.5,0,0,1,16,11.5v8A1.5,1.5,0,0,1,14.5,21Zm-4-10a.5.5,0,0,0-.5.5v8a.5.5,0,0,0,.5.5h4a.5.5,0,0,0,.5-.5v-8a.5.5,0,0,0-.5-.5Z"/><path d="M13.5,19h-2a.5.5,0,0,1,0-1h2a.5.5,0,0,1,0,1Z"/><path d="M13.25,17h-1.5a.76.76,0,0,1-.75-.75v-3.5a.76.76,0,0,1,.75-.75h1.5a.76.76,0,0,1,.75.75v3.5A.76.76,0,0,1,13.25,17ZM12,16h1V13H12Z"/><path d="M17.75,15h-.23a.5.5,0,1,1,0-1h.23a2.18,2.18,0,0,0,1.58-.72A2.71,2.71,0,0,0,20,11.5a2.67,2.67,0,0,0-.56-1.64,1.86,1.86,0,0,0-1.19-.8L18,9l-.12-.22A3.34,3.34,0,0,0,15,7H14l-.14-.22A4.15,4.15,0,0,0,10.41,5,3.52,3.52,0,0,0,7.06,8.52L7,9H6.25a2.18,2.18,0,0,0-1.58.72A2.71,2.71,0,0,0,4,11.5,2.39,2.39,0,0,0,6.25,14h.21a.5.5,0,1,1,0,1H6.25A3.39,3.39,0,0,1,3,11.5,3.74,3.74,0,0,1,3.93,9,3.24,3.24,0,0,1,6.11,8a4.43,4.43,0,0,1,4.3-4,5.2,5.2,0,0,1,4.16,2H15a4.41,4.41,0,0,1,3.67,2.13,2.93,2.93,0,0,1,1.56,1.12A3.63,3.63,0,0,1,21,11.5,3.74,3.74,0,0,1,20.07,14,3.24,3.24,0,0,1,17.75,15Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/services_24/network_l_1-3.svg b/assets/sdc-icons/services_24/network_l_1-3.svg
new file mode 100644
index 0000000..c12b6dd
--- /dev/null
+++ b/assets/sdc-icons/services_24/network_l_1-3.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Network L1-3_24px </title><polygon points="6.01 16.01 4.97 16.01 4.97 21.01 8.01 21.01 8.01 20 6 20 6.01 16.01"/><polygon points="10.46 17.54 11 18.01 12 17.08 12.01 17.79 12 18.24 12 21.01 13.01 21.01 13.01 16.01 12 16.01 10.46 17.54"/><rect x="14" y="18" width="2" height="0.99"/><path d="M18.93,18.4v0a1.24,1.24,0,0,0,.69-.44,1.19,1.19,0,0,0,.25-.77,1,1,0,0,0-.39-.86,1.71,1.71,0,0,0-1.06-.3,2.2,2.2,0,0,0-1.42.48l.42.7a1.91,1.91,0,0,1,.5-.27,1.09,1.09,0,0,1,.43-.08c.41,0,.62.18.62.55a.55.55,0,0,1-.24.51,1.37,1.37,0,0,1-.73.15h-.34v.78H18a1.64,1.64,0,0,1,.8.15.52.52,0,0,1,.24.49.67.67,0,0,1-.21.55,1.05,1.05,0,0,1-.67.17,1.79,1.79,0,0,1-.6-.09,2.13,2.13,0,0,1-.56-.23v.88a3,3,0,0,0,1.26.26,1.91,1.91,0,0,0,1.29-.39A1.38,1.38,0,0,0,20,19.53a1.06,1.06,0,0,0-.27-.77A1.33,1.33,0,0,0,18.93,18.4Z"/><path d="M17.5,14A3.61,3.61,0,0,0,20,13a3.66,3.66,0,0,0,1-2.51,3.58,3.58,0,0,0-3.06-3.46,5.27,5.27,0,0,0-5-4C9.78,2.84,8.53,4.17,8,5.32A.5.5,0,1,0,9,5.71C9.49,4.49,10.83,3.9,12.86,4H13a4.2,4.2,0,0,1,4,3.54L17,8h.45A2.61,2.61,0,0,1,20,10.51,2.44,2.44,0,0,1,17.5,13H6.5A2.57,2.57,0,0,1,4,10.51a2.41,2.41,0,0,1,.85-1.64c.32-.31,2.11-1.1,4.3,1a.5.5,0,0,0,.7-.72c-2.55-2.44-4.94-1.73-5.7-1A3.38,3.38,0,0,0,3,10.51,3.54,3.54,0,0,0,6.5,14Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/services_24/network_l_4.svg b/assets/sdc-icons/services_24/network_l_4.svg
new file mode 100644
index 0000000..378e006
--- /dev/null
+++ b/assets/sdc-icons/services_24/network_l_4.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Network L4_24px</title><path d="M17.94,7.05a5.27,5.27,0,0,0-5-4C9.78,2.84,8.53,4.17,8,5.32A.5.5,0,1,0,9,5.71C9.49,4.49,10.83,3.9,12.86,4H13a4.2,4.2,0,0,1,4,3.54L17,8h.45A2.61,2.61,0,0,1,20,10.51,2.44,2.44,0,0,1,17.5,13H6.5A2.57,2.57,0,0,1,4,10.51a2.41,2.41,0,0,1,.85-1.64c.32-.31,2.11-1.1,4.3,1a.5.5,0,0,0,.7-.72c-2.55-2.44-4.94-1.73-5.7-1A3.38,3.38,0,0,0,3,10.51,3.54,3.54,0,0,0,6.5,14h11A3.61,3.61,0,0,0,20,13a3.66,3.66,0,0,0,1-2.51A3.58,3.58,0,0,0,17.94,7.05Z"/><path d="M15,16H14l-2,3.23V20h2v1h1.1V20H16V19h-.9ZM14,18.3V19H13l1-1.83Z"/><polygon points="9.01 16.01 7.97 16.01 7.97 21.01 11.01 21.01 11.01 20 9 20 9.01 16.01"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/services_24/notification.svg b/assets/sdc-icons/services_24/notification.svg
new file mode 100644
index 0000000..022b8a9
--- /dev/null
+++ b/assets/sdc-icons/services_24/notification.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Notification_24px</title><path d="M17.86,15.52l-1.85-2V11.34a4.5,4.5,0,0,0-2-3.83V6a1,1,0,0,0-1-1H11a1,1,0,0,0-1,1V7.47a4.51,4.51,0,0,0-2.07,3.87v2.19l-1.8,2a1,1,0,0,0,0,1,.91.91,0,0,0,.79.47H10a2,2,0,0,0,4,0h3.08a.91.91,0,0,0,.79-.47A1,1,0,0,0,17.86,15.52ZM11,6h2V7H11Zm1,12a1,1,0,0,1-1-1h2A1,1,0,0,1,12,18ZM7,16l1.7-1.86.06-.09a1,1,0,0,0,.14-.51v-2.2A3.39,3.39,0,0,1,11.22,8h1.5A3.38,3.38,0,0,1,15,11.34v2.2a1,1,0,0,0,.14.51L17,16Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/services_24/personep.svg b/assets/sdc-icons/services_24/personep.svg
new file mode 100644
index 0000000..0d456d3
--- /dev/null
+++ b/assets/sdc-icons/services_24/personep.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>User Person_24px</title><g id="Layer_2" data-name="Layer 2"><path d="M11,15c1.65,0,3-1.79,3-4s-1.35-4-3-4S8,8.79,8,11,9.35,15,11,15Zm0-7c1.08,0,2,1.37,2,3s-.92,3-2,3-2-1.37-2-3S9.92,8,11,8Z"/><path d="M18.94,11.84A4,4,0,0,0,16.5,11a.5.5,0,0,0,0,1,2.93,2.93,0,0,1,1.8.61A1.79,1.79,0,0,1,19,14V15.5a.5.5,0,0,0,1,0V14A2.75,2.75,0,0,0,18.94,11.84Z"/><path d="M12.5,6A2.5,2.5,0,0,1,15,8.5a.5.5,0,0,0,1,0A3.5,3.5,0,0,0,12.5,5a.5.5,0,0,0,0,1Z"/><path d="M15.5,14a.5.5,0,0,0,0,1,1.53,1.53,0,0,1,1.06.44A1.5,1.5,0,0,1,17,16.5V18H5V16.5A1.5,1.5,0,0,1,6.5,15a.5.5,0,0,0,0-1A2.5,2.5,0,0,0,4,16.5V18a1,1,0,0,0,1,1H17a1,1,0,0,0,1-1V16.5a2.49,2.49,0,0,0-.73-1.77A2.53,2.53,0,0,0,15.5,14Z"/></g></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/services_24/platform.svg b/assets/sdc-icons/services_24/platform.svg
new file mode 100644
index 0000000..b47056c
--- /dev/null
+++ b/assets/sdc-icons/services_24/platform.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Platform as Service_24px</title><g id="Layer_2" data-name="Layer 2"><path d="M20.23,8.25a2.93,2.93,0,0,0-1.56-1.12A4.41,4.41,0,0,0,15,5h-.43a5.2,5.2,0,0,0-4.16-2,4.43,4.43,0,0,0-4.3,4A3.24,3.24,0,0,0,3.93,8,3.74,3.74,0,0,0,3,10.5,3.39,3.39,0,0,0,6.25,14h.26a.5.5,0,0,0,0-1H6.25A2.39,2.39,0,0,1,4,10.5a2.71,2.71,0,0,1,.67-1.78A2.18,2.18,0,0,1,6.25,8H7l0-.48A3.52,3.52,0,0,1,10.41,4a4.15,4.15,0,0,1,3.48,1.78L14,6h1a3.34,3.34,0,0,1,2.9,1.8L18,8l.24,0a1.86,1.86,0,0,1,1.19.8A2.67,2.67,0,0,1,20,10.5a2.71,2.71,0,0,1-.67,1.78,2.18,2.18,0,0,1-1.58.72h-.26a.5.5,0,0,0,0,1h.26a3.24,3.24,0,0,0,2.32-1A3.74,3.74,0,0,0,21,10.5,3.63,3.63,0,0,0,20.23,8.25Z"/><path d="M16,14.54a.49.49,0,0,0-.38-.48l-.75-.19,0-.1.4-.66a.53.53,0,0,0-.08-.62l-.64-.64a.51.51,0,0,0-.36-.15.59.59,0,0,0-.26.07l-.66.4-.1,0-.19-.75a.49.49,0,0,0-.48-.38h-.92a.49.49,0,0,0-.48.38l-.19.75-.1,0-.66-.4a.59.59,0,0,0-.26-.07.51.51,0,0,0-.36.15l-.64.64a.53.53,0,0,0-.08.62l.4.66,0,.1-.75.19a.49.49,0,0,0-.38.48v.92a.49.49,0,0,0,.38.48l.75.19,0,.1-.4.66a.53.53,0,0,0,.08.62l.64.64a.51.51,0,0,0,.36.15.59.59,0,0,0,.26-.07l.66-.4.1,0,.19.75a.49.49,0,0,0,.48.38h.92a.49.49,0,0,0,.48-.38l.19-.75.1,0,.66.4a.59.59,0,0,0,.26.07.51.51,0,0,0,.36-.15l.64-.64a.53.53,0,0,0,.08-.62l-.4-.66,0-.1.75-.19a.49.49,0,0,0,.38-.48Zm-.5.92-1,.25a2.66,2.66,0,0,1-.23.55h0l.54.89-.65.65-.89-.54h0a2.66,2.66,0,0,1-.55.23l-.25,1h-.92l-.25-1a2.66,2.66,0,0,1-.55-.23h0l-.89.54-.65-.65.54-.89h0a2.66,2.66,0,0,1-.23-.55l-1-.25v-.92l1-.25a2.66,2.66,0,0,1,.23-.55h0l-.54-.89.65-.65.89.54h0a2.66,2.66,0,0,1,.55-.23l.25-1h.92l.25,1a2.66,2.66,0,0,1,.55.23h0l.89-.54.65.65-.54.89h0a2.66,2.66,0,0,1,.23.55l1,.25Z"/><path d="M18.56,16.44h-.62L17.5,16l-.44.44h-.62v.62L16,17.5l.44.44v.62h.62l.44.44.44-.44h.62v-.62L19,17.5l-.44-.44ZM17.5,18.3a.8.8,0,1,1,.8-.8A.8.8,0,0,1,17.5,18.3Z"/><path d="M12,14a1,1,0,1,0,1,1A1,1,0,0,0,12,14Zm0,1.5a.5.5,0,0,1-.5-.5.5.5,0,0,1,1,0A.5.5,0,0,1,12,15.49Z"/></g></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/services_24/storage.svg b/assets/sdc-icons/services_24/storage.svg
new file mode 100644
index 0000000..8fbc9c2
--- /dev/null
+++ b/assets/sdc-icons/services_24/storage.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Storage as Service_24px</title><path d="M16.25,10H7.75a.76.76,0,0,0-.75.75v1.5a.76.76,0,0,0,.75.75H8v4.25a.76.76,0,0,0,.75.75h6.5a.76.76,0,0,0,.75-.75V13h.25a.76.76,0,0,0,.75-.75v-1.5A.76.76,0,0,0,16.25,10ZM15,17H9V13h6Zm1-5H8V11h8Z"/><path d="M10.5,15h3a.5.5,0,0,0,0-1h-3a.5.5,0,0,0,0,1Z"/><path d="M20.23,9.25a2.93,2.93,0,0,0-1.56-1.12A4.41,4.41,0,0,0,15,6h-.43a5.2,5.2,0,0,0-4.16-2,4.43,4.43,0,0,0-4.3,4A3.24,3.24,0,0,0,3.93,9,3.74,3.74,0,0,0,3,11.5,3.39,3.39,0,0,0,6.25,15h.21a.5.5,0,1,0,0-1H6.25A2.39,2.39,0,0,1,4,11.5a2.71,2.71,0,0,1,.67-1.78A2.18,2.18,0,0,1,6.25,9H7l0-.48A3.52,3.52,0,0,1,10.41,5a4.15,4.15,0,0,1,3.48,1.78L14,7h1a3.34,3.34,0,0,1,2.9,1.8L18,9l.24,0a1.86,1.86,0,0,1,1.19.8A2.67,2.67,0,0,1,20,11.5a2.71,2.71,0,0,1-.67,1.78,2.18,2.18,0,0,1-1.58.72h-.23a.5.5,0,1,0,0,1h.23a3.24,3.24,0,0,0,2.32-1A3.74,3.74,0,0,0,21,11.5,3.63,3.63,0,0,0,20.23,9.25Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/services_60/call_controll.svg b/assets/sdc-icons/services_60/call_controll.svg
new file mode 100644
index 0000000..23aa857
--- /dev/null
+++ b/assets/sdc-icons/services_60/call_controll.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60"><defs><style>.cls-1{fill:none;clip-rule:evenodd;}.cls-2{fill-rule:evenodd;}.cls-3{clip-path:url(#clip-path);}</style><clipPath id="clip-path"><path class="cls-1" d="M442.67-243.33a4,4,0,0,0-4,4,4,4,0,0,0,4,4,4,4,0,0,0,4-4A4,4,0,0,0,442.67-243.33Zm0,10a6,6,0,0,1-6-6,6,6,0,0,1,6-6,6,6,0,0,1,6,6A6,6,0,0,1,442.67-233.33Zm8-9.31v-4.69H446l-3.31-3.31-3.31,3.31h-4.69v4.69l-3.31,3.31,3.31,3.31v4.69h4.69l3.31,3.31,3.31-3.31h4.69V-236l3.31-3.31Z"/></clipPath></defs><title>Call control_60px </title><path d="M42.23,46.58a27,27,0,0,1-27-26.88,2.52,2.52,0,0,1,2.53-2.52h6.28a2.53,2.53,0,0,1,2.53,2.52,16.05,16.05,0,0,0,.82,5.12,2.54,2.54,0,0,1-.63,2.58l-.19.15a8.63,8.63,0,0,0-1.23.86,9.83,9.83,0,0,0,3.88,7,5.67,5.67,0,0,0,4.56,1.34,6.69,6.69,0,0,0,.48-1l.08-.21.16-.16a2.82,2.82,0,0,1,2.34-.65c1.36.1,2.65.09,4,.07h1.42c1.42,0,2.48,1.57,2.48,3v6.33A2.53,2.53,0,0,1,42.23,46.58ZM17.77,19.18a.53.53,0,0,0-.53.52,25,25,0,0,0,25,24.88.53.53,0,0,0,.53-.53V37.72a1.27,1.27,0,0,0-.49-1h-1.4c-1.39,0-2.72,0-4.17-.08a2.76,2.76,0,0,0-.66,0c-.67,1.69-1.27,1.86-1.5,1.93A7.3,7.3,0,0,1,28,37c-2.83-2.18-4.74-5.85-4.65-8.9,0-.31,0-1,2.07-2.19a.5.5,0,0,0,.07-.47,18.44,18.44,0,0,1-.91-5.74.54.54,0,0,0-.53-.52Zm7.48,9.33Zm.1-.35Z"/><polygon class="cls-2" points="38.13 28.13 42.5 23.75 41.26 22.5 36.88 26.88 35.01 25.01 35.01 29.99 40 30 38.13 28.13"/><polygon class="cls-2" points="42.97 15.01 37.98 15.01 39.86 16.88 35.48 21.25 36.73 22.5 41.11 18.13 42.98 20 42.97 15.01"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/services_60/collaboration.svg b/assets/sdc-icons/services_60/collaboration.svg
new file mode 100644
index 0000000..a41ed31
--- /dev/null
+++ b/assets/sdc-icons/services_60/collaboration.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Collaboration_60px </title><path d="M46,23a5.91,5.91,0,0,0-3,.83L39.18,21A5.93,5.93,0,0,0,40,18a6,6,0,0,0-12-.12L22,20a6,6,0,1,0-7,5.92v7.18A6,6,0,1,0,21.91,40L27.09,42A6,6,0,0,0,39,41a5.87,5.87,0,0,0-.78-2.94l4.29-4.19A5.94,5.94,0,0,0,46,35a6,6,0,0,0,0-12ZM35,35.35V28.77l5.12,1.44a5.94,5.94,0,0,0,1,2.24L37,36.5A5.88,5.88,0,0,0,35,35.35ZM18.19,25.58l3.6,4.64-3.32,3.32A6,6,0,0,0,17,33.09V25.91A6,6,0,0,0,18.19,25.58Zm11.57-3.34-2.31,2.32-6.16-1.73a5.69,5.69,0,0,0,.26-.56l6.76-2.38A6,6,0,0,0,29.76,22.24ZM33,23.91v2.22l-3.35-.95,1.66-1.65s.05-.09.09-.13A6.11,6.11,0,0,0,33,23.91Zm-13.07.61,5.89,1.66-2.61,2.61-3.3-4.25Zm.22,10.16L23,31.81,27.82,38a6,6,0,0,0-.71,1.86l-5.22-2A6,6,0,0,0,20.15,34.68Zm9,1.74-4.68-6L28,26.81l5,1.4V35A6,6,0,0,0,29.13,36.42Zm10.94-8.3L35,26.69V23.91a6,6,0,0,0,2.9-1.36l3.5,2.6A6.06,6.06,0,0,0,40.07,28.12ZM34,14a4,4,0,1,1-4,4A4,4,0,0,1,34,14ZM12,20a4,4,0,1,1,4,4A4,4,0,0,1,12,20Zm4,23a4,4,0,1,1,4-4A4,4,0,0,1,16,43Zm17,2a4,4,0,1,1,4-4A4,4,0,0,1,33,45ZM46,33a4,4,0,1,1,4-4A4,4,0,0,1,46,33Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/services_60/collaboration1.svg b/assets/sdc-icons/services_60/collaboration1.svg
new file mode 100644
index 0000000..36a80ee
--- /dev/null
+++ b/assets/sdc-icons/services_60/collaboration1.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Collaboration2 60px</title><path d="M38.5,17A13.47,13.47,0,0,0,30,20a13.5,13.5,0,1,0,0,21,13.5,13.5,0,1,0,8.5-24ZM30,38.22a11.43,11.43,0,0,1,0-15.44,11.43,11.43,0,0,1,0,15.44ZM10,30.5a11.49,11.49,0,0,1,18.54-9.08,13.41,13.41,0,0,0,0,18.16A11.49,11.49,0,0,1,10,30.5ZM38.5,42a11.47,11.47,0,0,1-7-2.42,13.41,13.41,0,0,0,0-18.16A11.5,11.5,0,1,1,38.5,42Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/services_60/compute.svg b/assets/sdc-icons/services_60/compute.svg
new file mode 100644
index 0000000..44991d5
--- /dev/null
+++ b/assets/sdc-icons/services_60/compute.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60"><defs><style>.cls-1{fill:none;clip-rule:evenodd;}.cls-2{clip-path:url(#clip-path);}</style><clipPath id="clip-path"><path class="cls-1" d="M442.67-11.33a4,4,0,0,0-4,4,4,4,0,0,0,4,4,4,4,0,0,0,4-4A4,4,0,0,0,442.67-11.33Zm0,10a6,6,0,0,1-6-6,6,6,0,0,1,6-6,6,6,0,0,1,6,6A6,6,0,0,1,442.67-1.33Zm8-9.31v-4.69H446l-3.31-3.31-3.31,3.31h-4.69v4.69l-3.31,3.31L434.67-4V.67h4.69L442.67,4,446,.67h4.69V-4L454-7.33Z"/></clipPath></defs><title>Compute as Service_60px</title><path d="M36,25H23a2,2,0,0,0-2,2V50a2,2,0,0,0,2,2H36a2,2,0,0,0,2-2V27A2,2,0,0,0,36,25ZM23,50V27H36V50Z"/><path d="M32,30H27a1,1,0,0,0,0,2h5a1,1,0,0,0,0-2Z"/><path d="M32,34H27a1,1,0,0,0,0,2h5a1,1,0,0,0,0-2Z"/><path d="M32,38H27a1,1,0,0,0,0,2h5a1,1,0,0,0,0-2Z"/><path d="M30,46H29a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z"/><path d="M50.18,22a9.17,9.17,0,0,0-4.77-2.84,8.12,8.12,0,0,0-7.67-4.56,13,13,0,0,0-1.78.13A11.55,11.55,0,0,0,15.37,19a8,8,0,0,0-5.16,2.52A8.26,8.26,0,0,0,8,27.1,8.06,8.06,0,0,0,16,35a1,1,0,0,0,0-2,6.11,6.11,0,0,1-6-5.9,6.19,6.19,0,0,1,1.65-4.18,5.85,5.85,0,0,1,4-1.92L17,21l.16-.83A9.67,9.67,0,0,1,26.68,12a9.56,9.56,0,0,1,8,4.4l.38.57.67-.16a9.07,9.07,0,0,1,2-.21,6.12,6.12,0,0,1,6.06,3.86l.24.59.64,0a6.81,6.81,0,0,1,4,2.18A6.11,6.11,0,0,1,50,27.1a6.19,6.19,0,0,1-1.65,4.18A6.41,6.41,0,0,1,44,33a1,1,0,0,0,0,2,8.45,8.45,0,0,0,5.77-2.33A8.26,8.26,0,0,0,52,27.1,8.1,8.1,0,0,0,50.18,22Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/services_60/defaulticon.svg b/assets/sdc-icons/services_60/defaulticon.svg
new file mode 100644
index 0000000..a433566
--- /dev/null
+++ b/assets/sdc-icons/services_60/defaulticon.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>S_60px</title><path d="M36,34.14a4.36,4.36,0,0,1-1.7,3.69,8,8,0,0,1-4.86,1.28,11.22,11.22,0,0,1-5.11-1v-3a12.24,12.24,0,0,0,5.22,1.34c2.08,0,3.13-.65,3.13-1.94a1.58,1.58,0,0,0-.35-1,3.9,3.9,0,0,0-1.14-.86,17.24,17.24,0,0,0-2.2-1,10,10,0,0,1-3.72-2.2,4.11,4.11,0,0,1-1-2.84,3.79,3.79,0,0,1,1.65-3.28,7.68,7.68,0,0,1,4.48-1.16,12.4,12.4,0,0,1,5.31,1.17L34.6,25.91a11.38,11.38,0,0,0-4.33-1.1c-1.79,0-2.68.52-2.68,1.57a1.59,1.59,0,0,0,.7,1.31,15.78,15.78,0,0,0,3,1.47,13.8,13.8,0,0,1,2.86,1.43,4.29,4.29,0,0,1,1.33,1.51A4.45,4.45,0,0,1,36,34.14Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/services_60/messaging.svg b/assets/sdc-icons/services_60/messaging.svg
new file mode 100644
index 0000000..34a89e8
--- /dev/null
+++ b/assets/sdc-icons/services_60/messaging.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Messaging_60px </title><path d="M20,24h8a1,1,0,0,0,0-2H20a1,1,0,0,0,0,2Z"/><path d="M38,27H20a1,1,0,0,0,0,2H38a1,1,0,0,0,0-2Z"/><path d="M43.54,16H16.46A3.36,3.36,0,0,0,13,19.25V32.76a3.09,3.09,0,0,0,1.05,2.32,3.61,3.61,0,0,0,2.41.93H33v7.76a1.21,1.21,0,0,0,.83,1.15,1.25,1.25,0,0,0,.42.08,1.3,1.3,0,0,0,1-.52l6-8.47h2.26A3.36,3.36,0,0,0,47,32.76V19.25A3.36,3.36,0,0,0,43.54,16ZM45,32.76A1.39,1.39,0,0,1,43.54,34H41.15a1.77,1.77,0,0,0-1.41.71L35,41.41V35.34A1.35,1.35,0,0,0,33.63,34H16.46a1.66,1.66,0,0,1-1.06-.4,1.16,1.16,0,0,1-.4-.85V19.25A1.39,1.39,0,0,1,16.46,18H43.54A1.39,1.39,0,0,1,45,19.25Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/services_60/mobility.svg b/assets/sdc-icons/services_60/mobility.svg
new file mode 100644
index 0000000..2aad903
--- /dev/null
+++ b/assets/sdc-icons/services_60/mobility.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Mobility2_60px </title><path d="M36,24H23a2,2,0,0,0-2,2V49a2,2,0,0,0,2,2H36a2,2,0,0,0,2-2V26A2,2,0,0,0,36,24ZM23,49V26H36V49Z"/><path d="M31,45H28a1,1,0,0,0,0,2h3a1,1,0,0,0,0-2Z"/><path d="M50.18,23a9.17,9.17,0,0,0-4.77-2.84,8.12,8.12,0,0,0-7.67-4.56,13,13,0,0,0-1.78.13A11.55,11.55,0,0,0,15.37,20a8,8,0,0,0-5.16,2.52A8.26,8.26,0,0,0,8,28.1,8.06,8.06,0,0,0,16,36a1,1,0,0,0,0-2,6.11,6.11,0,0,1-6-5.9,6.19,6.19,0,0,1,1.65-4.18,5.85,5.85,0,0,1,4-1.92L17,22l.16-.83A9.67,9.67,0,0,1,26.68,13a9.56,9.56,0,0,1,8,4.4l.38.57.67-.16a9.07,9.07,0,0,1,2-.21,6.12,6.12,0,0,1,6.06,3.86l.24.59.64,0a6.81,6.81,0,0,1,4,2.18A6.11,6.11,0,0,1,50,28.1a6.19,6.19,0,0,1-1.65,4.18A6.41,6.41,0,0,1,44,34a1,1,0,0,0,0,2,8.45,8.45,0,0,0,5.77-2.33A8.26,8.26,0,0,0,52,28.1,8.1,8.1,0,0,0,50.18,23Z"/><path d="M32,28H27a2,2,0,0,0-2,2V41a2,2,0,0,0,2,2h5a2,2,0,0,0,2-2V30A2,2,0,0,0,32,28ZM27,41V30h5V41Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/services_60/network_l_1-3.svg b/assets/sdc-icons/services_60/network_l_1-3.svg
new file mode 100644
index 0000000..08eb6f8
--- /dev/null
+++ b/assets/sdc-icons/services_60/network_l_1-3.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Network L1-3_60px </title><polygon points="24.45 43.46 25.54 44.43 27.98 42.05 28 51.01 30 51 30 40 28 40 24.45 43.46"/><rect x="32" y="43" width="4.99" height="2"/><path d="M43.46,45.28v-.05a2.91,2.91,0,0,0,1.62-1,2.59,2.59,0,0,0,.58-1.71,2.17,2.17,0,0,0-.92-1.87A4.09,4.09,0,0,0,42.25,40a5.36,5.36,0,0,0-3.32,1.06l1,1.56A4.68,4.68,0,0,1,41.08,42a3,3,0,0,1,1-.18c1,0,1.45.41,1.45,1.22A1.18,1.18,0,0,1,43,44.17a3.48,3.48,0,0,1-1.73.33h-.79v1.74h.77a4.15,4.15,0,0,1,1.87.31,1.12,1.12,0,0,1,.58,1.07,1.44,1.44,0,0,1-.5,1.22,2.61,2.61,0,0,1-1.58.38,5.24,5.24,0,0,1-1.4-.19,6.28,6.28,0,0,1-1.3-.51v1.93a7.12,7.12,0,0,0,2.93.57,4.79,4.79,0,0,0,3-.86A3,3,0,0,0,46,47.75a2.3,2.3,0,0,0-.64-1.69A3.2,3.2,0,0,0,43.46,45.28Z"/><polygon points="16.94 40.02 15.01 40.02 15.01 51.02 23 51.02 23 49.06 17 49.03 16.94 40.02"/><path d="M44.8,20.09A12.36,12.36,0,0,0,33,10.06l-.25,0c-7.48-.42-10.5,2.8-11.71,5.58a1,1,0,1,0,1.84.8c1.39-3.2,4.66-4.69,9.75-4.38l.35,0a10.25,10.25,0,0,1,9.9,9.06L43,22l.9,0c3.65.06,7.1,3.22,7.1,6.49a6.79,6.79,0,0,1-1.91,4.65A6.89,6.89,0,0,1,44.41,35H16.59A6.71,6.71,0,0,1,10,28.52a6,6,0,0,1,2.19-4.24c1.32-1.17,5.87-3,11.09,2.41a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.42c-6.32-6.55-12.14-4-13.85-2.52A8,8,0,0,0,8,28.52,8.65,8.65,0,0,0,16.59,37H44.41a8.88,8.88,0,0,0,6.05-2.38A8.78,8.78,0,0,0,53,28.52C53,24.42,49.19,20.61,44.8,20.09Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/services_60/network_l_4.svg b/assets/sdc-icons/services_60/network_l_4.svg
new file mode 100644
index 0000000..0d433ef
--- /dev/null
+++ b/assets/sdc-icons/services_60/network_l_4.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Network L4_60px </title><path d="M36,47V40H34l-4,7v2h4v2h2V49h2V47Zm-2,0H32l2-4.11Z"/><polygon points="21.94 40.02 20 40.02 20 51.02 28 51.02 28 49.06 22 49.03 21.94 40.02"/><path d="M44.8,20.09A12.36,12.36,0,0,0,33,10.06l-.25,0c-7.48-.43-10.5,2.8-11.71,5.58a1,1,0,1,0,1.84.8c1.39-3.2,4.66-4.68,9.75-4.38l.35,0a10.25,10.25,0,0,1,9.9,9.06L43,22l.9,0c3.65.06,7.1,3.22,7.1,6.49a6.79,6.79,0,0,1-1.91,4.65A6.89,6.89,0,0,1,44.41,35H16.59A6.71,6.71,0,0,1,10,28.52a6,6,0,0,1,2.19-4.24c1.32-1.17,5.87-3,11.09,2.41a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.42c-6.32-6.55-12.14-4-13.85-2.52A8,8,0,0,0,8,28.52,8.65,8.65,0,0,0,16.59,37H44.41a8.88,8.88,0,0,0,6.05-2.38A8.78,8.78,0,0,0,53,28.52C53,24.42,49.19,20.61,44.8,20.09Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/services_60/notification.svg b/assets/sdc-icons/services_60/notification.svg
new file mode 100644
index 0000000..a76151a
--- /dev/null
+++ b/assets/sdc-icons/services_60/notification.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Notification_60px </title><path d="M44.68,38.63,40,33.53a.28.28,0,0,1,0-.09V27.81a11.13,11.13,0,0,0-6-10.13V14.5A1.5,1.5,0,0,0,32.5,13h-5A1.5,1.5,0,0,0,26,14.5v3.12a11.14,11.14,0,0,0-6,10.21v5.63a.28.28,0,0,1,0,.09l-4.54,4.92-.13.16a2.3,2.3,0,0,0,0,2.31A2,2,0,0,0,17.07,42h8c0,.08,0,.16,0,.25a5,5,0,0,0,10,0c0-.09,0-.17,0-.25h8a2,2,0,0,0,1.77-1.06A2.3,2.3,0,0,0,44.68,38.63ZM28,15h4v2H28Zm5,27.25a3,3,0,0,1-6,0A2,2,0,0,1,27,42h6A2,2,0,0,1,33,42.25ZM42.93,40H17.08a.17.17,0,0,1-.07-.11.32.32,0,0,1,0-.17l4.55-4.92.12-.17A2.26,2.26,0,0,0,22,33.46V27.83C22,23.62,24.46,20,28,19h3.89C35.43,20,38,23.69,38,27.81v5.63a2.31,2.31,0,0,0,.32,1.17L43,39.72a.32.32,0,0,1,0,.17A.27.27,0,0,1,42.93,40Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/services_60/platform.svg b/assets/sdc-icons/services_60/platform.svg
new file mode 100644
index 0000000..45d0da5
--- /dev/null
+++ b/assets/sdc-icons/services_60/platform.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60"><defs><style>.cls-1{fill:none;clip-rule:evenodd;}.cls-2{clip-path:url(#clip-path);}.cls-3{fill-rule:evenodd;}</style><clipPath id="clip-path"><path class="cls-1" d="M442.67-93.33a4,4,0,0,0-4,4,4,4,0,0,0,4,4,4,4,0,0,0,4-4A4,4,0,0,0,442.67-93.33Zm0,10a6,6,0,0,1-6-6,6,6,0,0,1,6-6,6,6,0,0,1,6,6A6,6,0,0,1,442.67-83.33Zm8-9.31v-4.69H446l-3.31-3.31-3.31,3.31h-4.69v4.69l-3.31,3.31L434.67-86v4.69h4.69L442.67-78,446-81.33h4.69V-86L454-89.33Z"/></clipPath></defs><title>Platform as Service_60px</title><g id="Layer_2" data-name="Layer 2"><path class="cls-3" d="M50.18,22a9.17,9.17,0,0,0-4.77-2.84,8.12,8.12,0,0,0-7.67-4.56,13,13,0,0,0-1.78.13A11.55,11.55,0,0,0,15.37,19a8,8,0,0,0-5.16,2.52A8.26,8.26,0,0,0,8,27.1,8.06,8.06,0,0,0,16,35a1,1,0,0,0,0-2,6.11,6.11,0,0,1-6-5.9,6.19,6.19,0,0,1,1.65-4.18,5.85,5.85,0,0,1,4-1.92L17,21l.16-.83A9.67,9.67,0,0,1,26.68,12a9.56,9.56,0,0,1,8,4.4l.38.57.67-.16a9.07,9.07,0,0,1,2-.21,6.12,6.12,0,0,1,6.06,3.86l.24.59.64,0a6.81,6.81,0,0,1,4,2.18A6.11,6.11,0,0,1,50,27.1a6.19,6.19,0,0,1-1.65,4.18A6.41,6.41,0,0,1,44,33a1,1,0,0,0,0,2,8.45,8.45,0,0,0,5.77-2.33A8.26,8.26,0,0,0,52,27.1,8.1,8.1,0,0,0,50.18,22Z"/><path class="cls-3" d="M37,40.08c0-.08.07-.17.11-.26L39,39.35a1.23,1.23,0,0,0,1-1.21V35.86a1.23,1.23,0,0,0-1-1.21l-1.87-.47c0-.09-.07-.18-.11-.26l1-1.66a1.24,1.24,0,0,0-.18-1.52l-1.62-1.62a1.24,1.24,0,0,0-.88-.36,1.26,1.26,0,0,0-.65.17l-1.65,1-.26-.11L32.31,28A1.25,1.25,0,0,0,31.1,27H28.82A1.25,1.25,0,0,0,27.6,28l-.46,1.87-.26.11-1.66-1a1.23,1.23,0,0,0-.64-.17,1.28,1.28,0,0,0-.89.36l-1.61,1.62a1.24,1.24,0,0,0-.19,1.52l1,1.66a2,2,0,0,0-.11.26l-1.87.47A1.23,1.23,0,0,0,20,35.86v2.28a1.23,1.23,0,0,0,.95,1.21l1.87.47a2,2,0,0,0,.11.26l-1,1.66a1.24,1.24,0,0,0,.19,1.52l1.61,1.62a1.28,1.28,0,0,0,.89.36,1.23,1.23,0,0,0,.64-.17l1.66-1,.26.11.46,1.87a1.25,1.25,0,0,0,1.22,1H31.1a1.25,1.25,0,0,0,1.21-1l.47-1.87.26-.11,1.65,1a1.26,1.26,0,0,0,.65.17,1.24,1.24,0,0,0,.88-.36l1.62-1.62A1.24,1.24,0,0,0,38,41.74ZM35.34,44,33.1,42.65h0a6.38,6.38,0,0,1-1.37.57l-.63,2.53H28.82l-.63-2.53a6.18,6.18,0,0,1-1.37-.57h0L24.58,44,23,42.38l1.35-2.24h0a6.18,6.18,0,0,1-.57-1.37l-2.53-.63V35.86l2.53-.63a6.18,6.18,0,0,1,.57-1.37h0L23,31.62,24.58,30l2.24,1.34h0a6.18,6.18,0,0,1,1.37-.57l.63-2.53H31.1l.63,2.53a6.38,6.38,0,0,1,1.37.57h0L35.34,30,37,31.62l-1.34,2.24h0a5.36,5.36,0,0,1,.57,1.37l2.54.63v2.28l-2.54.63a5.36,5.36,0,0,1-.57,1.37h0L37,42.38Z"/><path class="cls-3" d="M30,34a3,3,0,1,0,3,3A3,3,0,0,0,30,34Zm0,4.5A1.5,1.5,0,1,1,31.5,37,1.5,1.5,0,0,1,30,38.5Z"/><path class="cls-3" d="M46,42V40H44l-1-1-1,1H40v2l-1,1,1,1v2h2l1,1,1-1h2V44l1-1Zm-1.32,2.28a2.09,2.09,0,0,1-1.68.84,2.11,2.11,0,0,1-1.53-3.58A2.1,2.1,0,0,1,43,40.88,2.12,2.12,0,0,1,45.12,43,2.07,2.07,0,0,1,44.68,44.28Z"/></g></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/services_60/storage.svg b/assets/sdc-icons/services_60/storage.svg
new file mode 100644
index 0000000..760162b
--- /dev/null
+++ b/assets/sdc-icons/services_60/storage.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60"><defs><style>.cls-1{fill:none;clip-rule:evenodd;}.cls-2{clip-path:url(#clip-path);}</style><clipPath id="clip-path"><path class="cls-1" d="M442.67-169.33a4,4,0,0,0-4,4,4,4,0,0,0,4,4,4,4,0,0,0,4-4A4,4,0,0,0,442.67-169.33Zm0,10a6,6,0,0,1-6-6,6,6,0,0,1,6-6,6,6,0,0,1,6,6A6,6,0,0,1,442.67-159.33Zm8-9.31v-4.69H446l-3.31-3.31-3.31,3.31h-4.69v4.69l-3.31,3.31,3.31,3.31v4.69h4.69l3.31,3.31,3.31-3.31h4.69V-162l3.31-3.31Z"/></clipPath></defs><title>Storage as Service_60px</title><path d="M40.5,27h-21A1.5,1.5,0,0,0,18,28.5v3A1.5,1.5,0,0,0,19.5,33H20V44.5A1.5,1.5,0,0,0,21.5,46h17A1.5,1.5,0,0,0,40,44.5V33h.5A1.5,1.5,0,0,0,42,31.5v-3A1.5,1.5,0,0,0,40.5,27ZM38,44H22V33H38Zm2-13H20V29H40Z"/><path d="M26,37h8a1,1,0,0,0,0-2H26a1,1,0,0,0,0,2Z"/><path d="M50.18,23a9.17,9.17,0,0,0-4.77-2.84,8.12,8.12,0,0,0-7.67-4.56,13,13,0,0,0-1.78.13A11.55,11.55,0,0,0,15.37,20a8,8,0,0,0-5.16,2.52A8.26,8.26,0,0,0,8,28.1,8.06,8.06,0,0,0,16,36a1,1,0,0,0,0-2,6.11,6.11,0,0,1-6-5.9,6.19,6.19,0,0,1,1.65-4.18,5.85,5.85,0,0,1,4-1.92L17,22l.16-.83A9.67,9.67,0,0,1,26.68,13a9.56,9.56,0,0,1,8,4.4l.38.57.67-.16a9.07,9.07,0,0,1,2-.21,6.12,6.12,0,0,1,6.06,3.86l.24.59.64,0a6.81,6.81,0,0,1,4,2.18A6.11,6.11,0,0,1,50,28.1a6.19,6.19,0,0,1-1.65,4.18A6.41,6.41,0,0,1,44,34a1,1,0,0,0,0,2,8.45,8.45,0,0,0,5.77-2.33A8.26,8.26,0,0,0,52,28.1,8.1,8.1,0,0,0,50.18,23Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/vendors_24/alcatelLucent.svg b/assets/sdc-icons/vendors_24/alcatelLucent.svg
new file mode 100644
index 0000000..01e7f55
--- /dev/null
+++ b/assets/sdc-icons/vendors_24/alcatelLucent.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#fff;}</style></defs><title>alcatel lucent_24px</title><circle cx="12" cy="12" r="10"/><g id="g36"><path id="path38" class="cls-1" d="M17.28,15.22a8.5,8.5,0,0,1-3,2.26c-.89.37-1.28.37-1.32-.62-.08-1.92.77-5.48,1.65-8.67.75-2.77.86-3.25-.46-3.67-1-.32-1.7-.11-3.16,1.24a35.33,35.33,0,0,0-6.2,8.68,13.61,13.61,0,0,0,1.09.88c.33.23.59.16.83-.21a15.74,15.74,0,0,1,4.91-4.7c.09-.34.19-.67.29-1a20.52,20.52,0,0,0-3.09,1.83C10.55,8,13.1,5.4,13.57,5.6c.3.13-.72,2.73-1.46,5.39A22.53,22.53,0,0,0,11,18.06c.12,1.54,1.33,2,3.14,1.16A8.75,8.75,0,0,0,17.71,16l-.41-.84Zm-.52-6.77a5.66,5.66,0,0,0-1.55-.06l-.13.48a3,3,0,0,1,3.41,1c.8,1.15.31,2.95-.5,4.31l.35.71,0,0c2.2-4.55-.25-6.2-1.6-6.45"/></g></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/vendors_24/aricent.svg b/assets/sdc-icons/vendors_24/aricent.svg
new file mode 100644
index 0000000..e3db6a8
--- /dev/null
+++ b/assets/sdc-icons/vendors_24/aricent.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>aricent_24px</title><path d="M15.33,11.87H14.26a0,0,0,0,0,0,0V12a.49.49,0,0,0,0,.12,1.4,1.4,0,0,0,.15.54,1,1,0,0,0,.66.5,1.24,1.24,0,0,0,.27,0h.13a1.27,1.27,0,0,0,.77-.3l.05,0h0v0c-.05.16-.09.32-.13.48,0,0,0,0,0,0v0h0a1.9,1.9,0,0,1-.39.11l-.17,0h0a2.29,2.29,0,0,1-.37,0H15a1.64,1.64,0,0,1-.38-.1,1.59,1.59,0,0,1-.57-.38,1.45,1.45,0,0,1-.35-.67,1.58,1.58,0,0,1-.05-.38,2.83,2.83,0,0,1,0-.29,1.53,1.53,0,0,1,.2-.59,1.33,1.33,0,0,1,.88-.65,1.11,1.11,0,0,1,.36,0h.08a1.27,1.27,0,0,1,1,.58,1.43,1.43,0,0,1,.2.51,1.36,1.36,0,0,1,0,.29.06.06,0,0,1,0,0l0,0H15.33ZM15,11.52h.78v0a.77.77,0,0,0-.08-.27.69.69,0,0,0-.41-.34,1,1,0,0,0-.3,0,.73.73,0,0,0-.3.07.8.8,0,0,0-.46.54.13.13,0,0,0,0,.06l0,0H15Z"/><path d="M4.11,8.58l0,0c.07.17.14.34.2.51l.83,2c.22.54.44,1.08.67,1.62L6,13a2.39,2.39,0,0,0,.13.21,1,1,0,0,0,.3.29l0,0h0s0,0,0,0H5.05l.06,0,.07,0a.21.21,0,0,0,.07-.15.59.59,0,0,0,0-.13s0-.09-.05-.13c-.08-.19-.15-.39-.23-.59L3.9,9.9l-.18-.44a.09.09,0,0,1,0-.11l.36-.74S4.09,8.59,4.11,8.58Z"/><path d="M12.28,13.58h-.19l-.14,0a2,2,0,0,1-.4-.1,1.58,1.58,0,0,1-.44-.24,1.41,1.41,0,0,1-.5-.74.86.86,0,0,1,0-.23,2.32,2.32,0,0,1,0-.37,1.49,1.49,0,0,1,.25-.74,1.41,1.41,0,0,1,.46-.42,2,2,0,0,1,.56-.22l.29,0h.42l.28,0,.22.05h0c.07,0,.07,0,.07.1l0,.24v0s0,.06,0,.1a.19.19,0,0,0,0,.08s0,0,0,0h0l0,0a1.11,1.11,0,0,0-.53-.24l-.2,0h-.1a1.2,1.2,0,0,0-.45.09,1.1,1.1,0,0,0-.66,1s0,0,0,.06v.11c0,.07,0,.14,0,.21a1.17,1.17,0,0,0,.32.6,1.06,1.06,0,0,0,.41.24,1,1,0,0,0,.36.06h.14a1.09,1.09,0,0,0,.71-.28l0,0h0c0,.17-.07.35-.1.52v0s0,0,0,0l-.19,0-.3.05Z"/><path d="M21,11.85V11.1A.62.62,0,0,0,21,11a.4.4,0,0,0-.2-.29l-.15,0h-.06s0,0,0,0l0,0,.09-.08.8-.66.05,0a0,0,0,0,1,0,0v.7a0,0,0,0,0,0,0h.54a1,1,0,0,0,.24,0l.13,0h0v0l-.21.4,0,0a.05.05,0,0,1-.06,0h-.63a0,0,0,0,0,0,0v1.42a1.48,1.48,0,0,0,0,.21.53.53,0,0,0,.3.44.61.61,0,0,0,.18.05h.1a.46.46,0,0,0,.23-.05h0v0l-.25.37,0,0,0,0H22a1.31,1.31,0,0,1-.28,0,.79.79,0,0,1-.53-.24.91.91,0,0,1-.15-.23,1.17,1.17,0,0,1-.09-.32,2.45,2.45,0,0,1,0-.27v-.63Z"/><path d="M6.94,12.09v-1a.43.43,0,0,0,0-.11.35.35,0,0,0-.14-.2l-.07,0h0v0h0l.13,0,.52-.09h.11l0,0v.35s0,0,0,0h0l0,0a.61.61,0,0,1,.12-.16.81.81,0,0,1,.4-.23,1.15,1.15,0,0,1,.26,0,.68.68,0,0,1,.2,0h0c.06,0,.06,0,.06.08v.44h0A1.14,1.14,0,0,0,8.34,11,.87.87,0,0,0,8,11a.55.55,0,0,0-.36.32.9.9,0,0,0-.06.22,1.49,1.49,0,0,0,0,.21v1.16a1.94,1.94,0,0,0,0,.24l0,.14a.43.43,0,0,0,.15.18l0,0s0,0,0,0h-1s0,0,0,0h0l0,0a.41.41,0,0,0,.18-.28.69.69,0,0,0,0-.13v-1Z"/><path d="M18,11a0,0,0,0,1,0,0,1.29,1.29,0,0,1,.16-.17,1,1,0,0,1,.4-.22,1.17,1.17,0,0,1,.26,0h.13a1,1,0,0,1,.84.5,1.11,1.11,0,0,1,.16.39,1.53,1.53,0,0,1,0,.3v1.18a2.17,2.17,0,0,0,0,.26,1,1,0,0,0,0,.17.4.4,0,0,0,.13.16l.05,0s0,0,0,0a0,0,0,0,0,0,0h-1a0,0,0,0,1,0,0h0l0,0a.41.41,0,0,0,.14-.2.85.85,0,0,0,0-.17c0-.1,0-.2,0-.31v-.87a1.94,1.94,0,0,0,0-.24,1.12,1.12,0,0,0-.1-.39.87.87,0,0,0-.18-.26.72.72,0,0,0-.38-.19.76.76,0,0,0-.3,0A.86.86,0,0,0,18,11Z"/><path d="M17.81,11.83v1.09a2.09,2.09,0,0,0,0,.25.43.43,0,0,0,.05.16.38.38,0,0,0,.12.16.1.1,0,0,1,.05,0H17v0h0l0,0a.36.36,0,0,0,.16-.25.51.51,0,0,0,0-.13V11a.43.43,0,0,0,0-.11.27.27,0,0,0-.13-.17l-.06,0s0,0,0,0l0,0h0l.13,0,.39-.07.17,0h.06l0,0v1.26Z"/><path d="M9.8,11.83v1.09a2.09,2.09,0,0,0,0,.25.83.83,0,0,0,0,.15.33.33,0,0,0,.14.17l0,0H9s0,0,0,0H9l0,0,0,0a.38.38,0,0,0,.16-.25.52.52,0,0,0,0-.11,1.13,1.13,0,0,0,0-.26c0-.56,0-1.11,0-1.67V11a.38.38,0,0,0,0-.1.23.23,0,0,0-.12-.15l-.07,0H9a0,0,0,0,1,0,0H9l.12,0,.45-.08.11,0h.07l0,0v1.25Z"/><path d="M4.17,11.23a1.26,1.26,0,0,0-.5.15,3.15,3.15,0,0,0-.61.65c-.05.09-.44,1.05-.46,1.1l0,.13a.22.22,0,0,0,.08.2l.08,0,.06,0H1.52l0,0a.76.76,0,0,0,.3-.26A1.28,1.28,0,0,0,2,13l.06-.12c.1-.22.2-.43.31-.64a3.07,3.07,0,0,1,.2-.36,2,2,0,0,1,.26-.32,1.4,1.4,0,0,1,.61-.33,1.81,1.81,0,0,1,.23,0H4l.18,0Z"/><path d="M9.12,9.05a.32.32,0,0,1,.13-.27.39.39,0,0,1,.3-.09.29.29,0,0,1,.21.09A.45.45,0,0,1,9.88,9a.4.4,0,0,1-.12.36.37.37,0,0,1-.22.1.39.39,0,0,1-.41-.31A.28.28,0,0,1,9.12,9.05Z"/><polygon points="18 10.94 18 10.94 18.01 10.94 18 10.94"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/vendors_24/att.svg b/assets/sdc-icons/vendors_24/att.svg
new file mode 100644
index 0000000..c3c7db0
--- /dev/null
+++ b/assets/sdc-icons/vendors_24/att.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>at&amp;amp;t_24px</title><g id="g3"><path id="path9" d="M7.66,17.59a7.09,7.09,0,0,0,9-.26s0,0,0,0A8.54,8.54,0,0,1,12,18.5a8.75,8.75,0,0,1-4.33-.92s0,0,0,0m4.82.37a8,8,0,0,0,4.8-1.42,3.66,3.66,0,0,0,.88-1.06,5.53,5.53,0,0,0,.43-.88s0,0,0,0c-1.07,1.57-4.15,2.55-7.34,2.55-2.25,0-4.67-.72-5.62-2.1,0,0,0,0,0,0C6.49,16.93,9.17,18,12.48,18m-1.9-3.12C7,14.84,5.24,13.15,4.93,12c0,0,0,0,0,0A7.72,7.72,0,0,0,5,13.22a1.45,1.45,0,0,0,.36.62c.88.91,3.07,2.2,6.86,2.2,5.16,0,6.34-1.72,6.58-2.29A5.25,5.25,0,0,0,19.08,12c0-.15,0-.27,0-.38s0,0,0,0c-.26,1.39-4.67,3.23-8.48,3.23M5.6,9a7,7,0,0,0-.51,1.47.48.48,0,0,0,0,.34c.43.93,2.63,2.4,7.76,2.4,3.13,0,5.56-.77,5.95-2.17a1.63,1.63,0,0,0,0-.9,6.73,6.73,0,0,0-.46-1.22s0,0,0,0c.06,1.84-5.07,3-7.66,3-2.8,0-5.14-1.12-5.14-2.53A2.13,2.13,0,0,1,5.61,9s0,0,0,0M16.68,6.7a.31.31,0,0,1,0,.17c0,.78-2.41,2.18-6.24,2.18C7.67,9.05,7.14,8,7.14,7.34a1.14,1.14,0,0,1,.29-.73s0,0,0,0a7.48,7.48,0,0,0-1,1,1,1,0,0,0-.23.43c0,1.38,3.46,2.38,6.68,2.38,3.44,0,5-1.12,5-2.11,0-.35-.14-.56-.49-1a8.66,8.66,0,0,0-.67-.68s0,0,0,0m-1.06-.78a7,7,0,0,0-3.62-1,7,7,0,0,0-3.67,1c-.32.2-.5.36-.5.56,0,.6,1.39,1.24,3.87,1.24s4.35-.7,4.35-1.38c0-.16-.14-.27-.43-.44"/></g></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/vendors_24/brocade.svg b/assets/sdc-icons/vendors_24/brocade.svg
new file mode 100644
index 0000000..2d12dd9
--- /dev/null
+++ b/assets/sdc-icons/vendors_24/brocade.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Brocade_24px</title><g id="g3860"><path id="path3862" d="M16.55,9.94c-2.21,0-4.71-1-7.61-3.11h7.61a1.56,1.56,0,0,1,0,3.11m0,5.23H8.94c2.9-2.09,5.4-3.11,7.61-3.11a1.56,1.56,0,0,1,0,3.11M18.81,11A3.45,3.45,0,0,0,20,8.39,3.33,3.33,0,0,0,16.72,5H4a22.87,22.87,0,0,0,8.78,6A23,23,0,0,0,4,17H16.72A3.33,3.33,0,0,0,20,13.61,3.45,3.45,0,0,0,18.81,11"/></g></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/vendors_24/cisco.svg b/assets/sdc-icons/vendors_24/cisco.svg
new file mode 100644
index 0000000..37e72dc
--- /dev/null
+++ b/assets/sdc-icons/vendors_24/cisco.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>cisco_24px</title><g id="layer1"><g id="g53688"><path id="path53690" d="M22,10.18a.42.42,0,0,0-.43-.42.43.43,0,0,0-.44.42v.89a.43.43,0,0,0,.44.42.42.42,0,0,0,.43-.42ZM19.61,9a.44.44,0,0,0-.87,0v2.05a.44.44,0,0,0,.87,0Zm-2.39-1.6A.42.42,0,0,0,16.79,7a.43.43,0,0,0-.44.42v4.5a.43.43,0,0,0,.44.42.42.42,0,0,0,.43-.42ZM14.83,9a.44.44,0,0,0-.44-.43A.43.43,0,0,0,14,9v2.05a.42.42,0,0,0,.43.42.43.43,0,0,0,.44-.42Zm-2.4,1.16a.43.43,0,0,0-.86,0v.89a.43.43,0,0,0,.86,0ZM10.05,9a.44.44,0,0,0-.88,0v2.05a.44.44,0,0,0,.88,0Zm-2.4-1.6A.42.42,0,0,0,7.22,7a.43.43,0,0,0-.44.42v4.5a.43.43,0,0,0,.44.42.42.42,0,0,0,.43-.42ZM5.26,9a.43.43,0,0,0-.43-.43A.44.44,0,0,0,4.39,9v2.05a.43.43,0,0,0,.44.42.42.42,0,0,0,.43-.42ZM2.87,10.18a.42.42,0,0,0-.43-.42.43.43,0,0,0-.44.42v.89a.43.43,0,0,0,.44.42.42.42,0,0,0,.43-.42v-.89Zm9,3.69a3.66,3.66,0,0,0-.86-.11c-.8,0-1.29.42-1.29,1.06s.41.84.9,1l.18,0c.22.07.39.17.39.34s-.2.32-.63.32a3.23,3.23,0,0,1-.83-.13v.78a5.31,5.31,0,0,0,.94.09c.68,0,1.44-.28,1.44-1.13a1,1,0,0,0-.82-1L11,15.08c-.14,0-.4-.11-.4-.32s.19-.27.54-.27a2.76,2.76,0,0,1,.69.1v-.72Zm7.41,1.64a.91.91,0,1,1-.91-.89.89.89,0,0,1,.91.89m-.91-1.75a1.75,1.75,0,1,0,1.84,1.75,1.75,1.75,0,0,0-1.84-1.75m-11.91.12a2.9,2.9,0,0,0-.8-.12,1.75,1.75,0,1,0,0,3.5,2.88,2.88,0,0,0,.8-.12v-.91a1.57,1.57,0,0,1-.74.18.9.9,0,1,1,0-1.8,1.52,1.52,0,0,1,.74.18Zm9.15,0a2.8,2.8,0,0,0-.79-.12,1.75,1.75,0,1,0,0,3.5,2.79,2.79,0,0,0,.79-.12v-.91a1.51,1.51,0,0,1-.73.18.9.9,0,1,1,0-1.8,1.47,1.47,0,0,1,.73.18ZM8.53,17.2H7.66V13.82h.87Z"/></g></g></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/vendors_24/cloud.svg b/assets/sdc-icons/vendors_24/cloud.svg
new file mode 100644
index 0000000..f64dbf1
--- /dev/null
+++ b/assets/sdc-icons/vendors_24/cloud.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>cloud foundry_24px</title><g id="g4191"><g id="g4197"><path id="path4199" d="M10.47,13.44a2.71,2.71,0,0,0-.88-2.29l0,0a3.23,3.23,0,0,1-.74-2A3.17,3.17,0,0,1,12,5.87H12a3.17,3.17,0,0,1,3.14,3.19,3.23,3.23,0,0,1-.74,2l0,0a3.06,3.06,0,0,0-.88,2.29,4.66,4.66,0,0,0-1.27-9h-.52a4.66,4.66,0,0,0-1.27,9"/></g><g id="g4201"><path id="path4203" d="M16.41,17.14l.27-.08L17,17v-.09c0-.05,0-.12,0-.19l0-.1,0-.09-.05-.08-.33-.08a2,2,0,0,1-.29-.1,1.38,1.38,0,0,1-.41-.25.33.33,0,0,1-.12-.26.23.23,0,0,1,.06-.12.35.35,0,0,1,.11-.09l-.09-.06-.11,0-.12-.06-.24-.11-.11,0-.26,0h-.27a2.94,2.94,0,0,1-.53-.08l-.21-.08L13.73,15c-.08-.07-.14-.13-.14-.19l-.12,0-.36-.05s0,0,0,.06l0,.13a.51.51,0,0,0,.35.61,1.79,1.79,0,0,1,1.23.86c.28.75-.88,1.49-2.64,1.49s-2.91-.74-2.64-1.49a1.77,1.77,0,0,1,1.19-.85.55.55,0,0,0,.37-.63l0-.18-.24,0-.28,0-.12,0a.26.26,0,0,1-.12.19l-.15.09-.21.08-.25.06a2,2,0,0,1-.27,0,2.44,2.44,0,0,1-.54,0h0l-.08,0-.23.11-.22.12-.07,0,0,0a.29.29,0,0,1,.2.21.27.27,0,0,1-.09.26.73.73,0,0,1-.16.14,1.36,1.36,0,0,1-.24.13,3,3,0,0,1-.62.2l0,.08c0,.05,0,.12-.07.19A1.5,1.5,0,0,0,7,17a.62.62,0,0,0,0,.09,2.09,2.09,0,0,1,.62.11.84.84,0,0,1,.39.27.46.46,0,0,1,0,.41,1,1,0,0,1-.36.46l0,0,.09.07c.08.05.17.13.29.2l.33.18.12.06,0,0a2.79,2.79,0,0,1,.85-.21,2.08,2.08,0,0,1,.43,0,1.4,1.4,0,0,1,.41.05,2,2,0,0,1,.37.12,1.8,1.8,0,0,1,.31.17,1.07,1.07,0,0,1,.41.52h.24a4.81,4.81,0,0,0,.55,0l.54,0,.24,0a.76.76,0,0,1,.13-.29.58.58,0,0,1,.1-.12L13.3,19a1.49,1.49,0,0,1,.3-.18,1.59,1.59,0,0,1,.35-.13,2.93,2.93,0,0,1,.41-.07c.13,0,.28,0,.42,0a3.24,3.24,0,0,1,.86.19l.15-.09a2.16,2.16,0,0,0,.31-.19l.26-.19.1-.1a1.12,1.12,0,0,1-.39-.44.41.41,0,0,1-.05-.21.26.26,0,0,1,.05-.19.61.61,0,0,1,.34-.28"/></g></g><g id="g4205"><g id="g4207"><g id="g4213"><g id="g4215"><path id="path4229" d="M9.67,9.07a1.86,1.86,0,0,0,.73,1.48h0a3.4,3.4,0,0,1,1,2.42h0c0,1.13,0,2.44-.09,3.11h0c-.6.09-1,.29-1,.53h0c0,.31.74.67,1.66.67h0c.92,0,1.66-.36,1.66-.67h0c0-.24-.42-.44-1-.53h0c0-.67-.12-2-.09-3.11h0a3.4,3.4,0,0,1,1.05-2.42h0a1.88,1.88,0,0,0,.72-1.48h0a2.2,2.2,0,0,0-2.32-2h0a2.2,2.2,0,0,0-2.32,2"/></g></g></g></g></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/vendors_24/ericsson.svg b/assets/sdc-icons/vendors_24/ericsson.svg
new file mode 100644
index 0000000..2ba4cfe
--- /dev/null
+++ b/assets/sdc-icons/vendors_24/ericsson.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>ericcson_24px</title><path d="M8.16,10.34a1.6,1.6,0,1,1-1.11-3h0L15.84,4.1A1.59,1.59,0,0,1,17.89,5v0a1.55,1.55,0,0,1-.9,2l-.05,0Z"/><path d="M8.16,15.12a1.61,1.61,0,0,1-1.11-3h0l8.79-3.21a1.57,1.57,0,0,1,2,.9l0,.05a1.54,1.54,0,0,1-.9,2l-.05,0Z"/><path d="M8.16,19.9a1.61,1.61,0,0,1-1.11-3h0l8.78-3.22a1.58,1.58,0,0,1,2,.91l0,0a1.54,1.54,0,0,1-.9,2l-.05,0Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/vendors_24/juniper.svg b/assets/sdc-icons/vendors_24/juniper.svg
new file mode 100644
index 0000000..42980b3
--- /dev/null
+++ b/assets/sdc-icons/vendors_24/juniper.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>juniper_24px</title><path d="M11.83,13.52h.11l.57.79v-.79h.1v1h-.1l-.58-.82v.82h-.1Z"/><path d="M12.85,13.52h.63v.09H13v.32h.52V14H13v.36h.53v.09h-.63Z"/><path d="M14,13.61h-.36v-.09h.82v.09h-.36v.87H14Z"/><path d="M14.57,13.52h.11l.25.8.25-.8h.09l.26.8.25-.8h.09l-.3,1h-.09l-.26-.81-.25.81h-.09Z"/><path d="M16.82,14c0-.26-.12-.4-.38-.4s-.37.14-.37.4.12.4.37.4.38-.14.38-.4M16,14c0-.35.17-.5.47-.5a.5.5,0,0,1,0,1c-.3,0-.47-.15-.47-.5"/><path d="M17.55,14c.13,0,.21-.05.21-.2s-.08-.19-.22-.19h-.31V14Zm0,.09h-.29v.39h-.1v-1h.41c.22,0,.33.09.33.28a.26.26,0,0,1-.25.29l.23.39h-.11Z"/><path d="M18.37,14l-.19.21v.3h-.1v-1h.1v.53l.48-.53h.12l-.34.38.39.58h-.12Z"/><path d="M18.91,14.39l.05-.08a.66.66,0,0,0,.34.1c.2,0,.29-.06.29-.19s-.12-.16-.29-.19S19,14,19,13.76s.12-.26.34-.26a.5.5,0,0,1,.33.09l-.05.08a.49.49,0,0,0-.28-.08c-.17,0-.24.05-.24.17s.1.14.27.18.36.06.36.27-.13.29-.38.29a.69.69,0,0,1-.4-.11"/><path d="M20.68,9.51c-1.34,0-1.39.61-1.39,1.47V13.1h.31V11c0-.65,0-1.17,1.08-1.17l.32,0v-.3l-.32,0"/><path d="M5.06,11.72V9.58h.32v2.15c0,.62,0,1.14,1.11,1.14s1.08-.52,1.08-1.17V9.58h.31V11.7c0,.86,0,1.47-1.39,1.47s-1.43-.61-1.43-1.45"/><path d="M11.24,11V13.1h-.32V11c0-.62,0-1.14-1.11-1.14S8.73,10.33,8.73,11V13.1H8.42V11c0-.86.06-1.47,1.39-1.47s1.43.61,1.43,1.45"/><path d="M11.83,9.59h.31V13.1h-.31Z"/><path d="M14.34,11.56a.73.73,0,0,0,.83-.83.75.75,0,0,0-.85-.83H13v1.66Zm-1.62-2h1.61c.8,0,1.17.4,1.17,1.12a1,1,0,0,1-1.17,1.17H13V13.1h-.31Z"/><path d="M16.17,11.09h2.35c0-.7-.07-1.29-1.08-1.29s-1.23.53-1.27,1.29m-.31.24c0-1,.29-1.83,1.59-1.83s1.39.92,1.38,1.89H16.17c0,.85.21,1.49,1.3,1.49a1.63,1.63,0,0,0,1.13-.37l.18.23a2,2,0,0,1-1.31.43c-1.36,0-1.61-.81-1.61-1.84"/><path d="M3.12,13.86c1.34,0,1.4-.61,1.4-1.47V9.58H4.2v2.81c0,.65,0,1.17-1.08,1.17H3v.31h.12"/><path d="M20.29,12.7a.19.19,0,1,0,0,.38.19.19,0,1,0,0-.38m0,.41a.22.22,0,1,1,.22-.22.22.22,0,0,1-.22.22"/><path d="M20.31,12.89s.06,0,.06-.05,0,0-.06,0h-.07v.09Zm0,0h-.07V13h0v-.26h.12c.06,0,.08,0,.08.08s0,.07-.06.08l.06.1h0Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/vendors_24/mysql.svg b/assets/sdc-icons/vendors_24/mysql.svg
new file mode 100644
index 0000000..e85d5d7
--- /dev/null
+++ b/assets/sdc-icons/vendors_24/mysql.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>mysql_24px</title><path d="M17.47,15.56a3.94,3.94,0,0,0-1.71.25c-.13,0-.34.06-.36.22s.08.2.14.29a2.26,2.26,0,0,0,.46.56c.18.14.37.29.56.41.35.21.74.34,1.07.55s.4.29.59.43.16.19.28.23v0c-.06-.08-.08-.2-.14-.29l-.26-.27a4.41,4.41,0,0,0-.93-.9c-.28-.2-.89-.47-1-.8l0,0a3.88,3.88,0,0,0,.61-.15c.3-.08.57-.06.88-.14l.43-.12V15.7c-.16-.16-.27-.38-.45-.53a13.23,13.23,0,0,0-1.45-1.11,10,10,0,0,0-.93-.45c-.1,0-.27-.08-.34-.17a4.1,4.1,0,0,1-.36-.69c-.26-.5-.5-1-.73-1.57a8.47,8.47,0,0,0-.44-1A9.05,9.05,0,0,0,9.93,6.78,4.17,4.17,0,0,0,8.8,6.41l-.66,0c-.14,0-.28-.22-.41-.3-.5-.33-1.8-1-2.18-.11-.23.59.36,1.16.57,1.46a4.15,4.15,0,0,1,.44.68c.07.15.08.31.14.47a11.85,11.85,0,0,0,.47,1.22,4.37,4.37,0,0,0,.32.55c.07.1.2.15.22.31a2.71,2.71,0,0,0-.2.68,4,4,0,0,0,.26,3c.14.23.47.72.93.53s.31-.68.42-1.13c0-.1,0-.18.06-.24v0l.37.74a4.9,4.9,0,0,0,1.15,1.21c.21.16.37.44.64.53v0h0a.86.86,0,0,0-.2-.18,4.69,4.69,0,0,1-.46-.54,11.71,11.71,0,0,1-1-1.64c-.14-.28-.27-.58-.39-.86,0-.11,0-.28-.14-.33a3.87,3.87,0,0,0-.42.61,5.5,5.5,0,0,0-.24,1.36l0,0c-.28-.07-.38-.36-.49-.62a4,4,0,0,1-.08-2.4c.06-.19.33-.79.23-1s-.23-.27-.33-.41a2.88,2.88,0,0,1-.32-.57C7.23,9,7.13,8.4,6.91,7.89a4.54,4.54,0,0,0-.45-.69A4.33,4.33,0,0,1,6,6.5c-.05-.1-.11-.27,0-.37A.18.18,0,0,1,6.06,6c.12-.09.44,0,.56.09a4,4,0,0,1,.87.45c.13.09.26.26.42.31H8.1c.28.06.6,0,.86.1a4.84,4.84,0,0,1,1.27.62A7.86,7.86,0,0,1,13,10.65c.1.2.15.4.24.62.18.43.42.88.6,1.31a6.28,6.28,0,0,0,.63,1.21c.13.19.66.29.91.39s.44.15.6.25.6.41.89.62C17,15.15,17.45,15.38,17.47,15.56Z"/><path d="M8.46,7.73a1.79,1.79,0,0,0-.36,0v0h0a2.57,2.57,0,0,0,.28.37c.06.15.13.29.2.43l0,0a.51.51,0,0,0,.18-.45c-.05,0-.06-.12-.1-.18S8.53,7.8,8.46,7.73Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/vendors_24/nokia_siemens.svg b/assets/sdc-icons/vendors_24/nokia_siemens.svg
new file mode 100644
index 0000000..7177bb8
--- /dev/null
+++ b/assets/sdc-icons/vendors_24/nokia_siemens.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>nokia siemens_24px</title><path d="M21.8,12.86,22,13a.88.88,0,0,0,.33.05.5.5,0,0,0,.18,0l.11,0a.16.16,0,0,0,.06-.08.28.28,0,0,0,0-.09.2.2,0,0,0-.06-.15.55.55,0,0,0-.23-.1l-.2,0L22,12.43a.54.54,0,0,1-.15-.09.36.36,0,0,1-.14-.32.42.42,0,0,1,0-.2.51.51,0,0,1,.13-.16.85.85,0,0,1,.19-.1,1,1,0,0,1,.26,0,1.15,1.15,0,0,1,.33,0,1.45,1.45,0,0,1,.24.1l-.09.22-.07,0-.12,0-.14,0h-.15a.43.43,0,0,0-.26.06A.2.2,0,0,0,22,12a.19.19,0,0,0,0,.08.1.1,0,0,0,0,.07l.09,0,.15,0,.2,0,.2.06.15.09a.5.5,0,0,1,.1.14.48.48,0,0,1,0,.18.45.45,0,0,1-.17.37.73.73,0,0,1-.47.14,1.14,1.14,0,0,1-.39-.06,1.29,1.29,0,0,1-.26-.12Zm-1.34.35h-.28V10.75h.28V12.3l.69-.73h.32l-.68.72.79.92h-.37l-.75-.88Zm-.56-1.39h-.16a.43.43,0,0,0-.36.18.85.85,0,0,0-.13.5v.73H19V11.57h.26v.28a.41.41,0,0,1,.07-.11l.11-.1a.47.47,0,0,1,.15-.06.48.48,0,0,1,.18,0h.17ZM17.81,13a.42.42,0,0,0,.36-.17.78.78,0,0,0,.11-.43.88.88,0,0,0,0-.24.47.47,0,0,0-.08-.19.37.37,0,0,0-.15-.13.46.46,0,0,0-.21-.05.4.4,0,0,0-.35.17.74.74,0,0,0-.12.44.88.88,0,0,0,0,.24.68.68,0,0,0,.08.19.37.37,0,0,0,.15.13A.46.46,0,0,0,17.81,13Zm0,.26a.79.79,0,0,1-.32-.06.55.55,0,0,1-.24-.18.65.65,0,0,1-.15-.27,1,1,0,0,1-.05-.35A1,1,0,0,1,17.1,12a.59.59,0,0,1,.15-.27.55.55,0,0,1,.24-.18.88.88,0,0,1,.64,0,.61.61,0,0,1,.24.17.69.69,0,0,1,.15.28,1.25,1.25,0,0,1,0,.7.82.82,0,0,1-.14.28.81.81,0,0,1-.24.17.88.88,0,0,1-.33.06Zm-3.07-1.68H15l.33,1.32.3-1.26H16l.3,1.26.32-1.32h.29l-.47,1.64h-.3L15.8,12l-.29,1.22h-.3Zm-1.22,0h.32v-.45l.28-.08v.53h.48v.25h-.48v.88a.38.38,0,0,0,0,.16.15.15,0,0,0,.06.09l.11,0h.31l0,.22-.12,0h-.16a.56.56,0,0,1-.4-.12.49.49,0,0,1-.13-.38v-.91h-.32Zm-.5.67a.66.66,0,0,0-.11-.35.34.34,0,0,0-.29-.12.36.36,0,0,0-.31.13.71.71,0,0,0-.13.34Zm.19.89-.06,0-.11,0-.15,0-.2,0a.75.75,0,0,1-.6-.23.93.93,0,0,1-.2-.63,1.23,1.23,0,0,1,0-.35.82.82,0,0,1,.14-.28.66.66,0,0,1,.23-.17.75.75,0,0,1,.31-.06.68.68,0,0,1,.29.05.57.57,0,0,1,.22.16.68.68,0,0,1,.13.27,1.28,1.28,0,0,1,.05.41v0H12.18a.68.68,0,0,0,.14.39.5.5,0,0,0,.39.14A1,1,0,0,0,13,13l.16,0Zm-2-2.23h.28v2.31h-.28l-1-1.83v1.83H9.85V10.9h.3l1,1.82ZM8.33,13.21V13a.48.48,0,0,1-.22.17.72.72,0,0,1-.29.06.63.63,0,0,1-.19,0,.38.38,0,0,1-.17-.08A.53.53,0,0,1,7.32,13a.6.6,0,0,1-.05-.24.58.58,0,0,1,.16-.41.69.69,0,0,1,.48-.15h.4v-.1a.35.35,0,0,0-.1-.26.51.51,0,0,0-.3-.07.85.85,0,0,0-.29,0,.39.39,0,0,0-.17.07l-.09-.21.08,0,.12-.05.18-.05H8a.65.65,0,0,1,.46.14.52.52,0,0,1,.17.43v1.11Zm0-.77H7.92a.47.47,0,0,0-.17,0,.24.24,0,0,0-.12.07.21.21,0,0,0-.06.1.27.27,0,0,0,0,.13.26.26,0,0,0,.09.21.43.43,0,0,0,.24.07L8,13l.14-.07a.35.35,0,0,0,.1-.11.26.26,0,0,0,0-.15ZM6.94,11a.2.2,0,0,1-.05.14.16.16,0,0,1-.13.06.18.18,0,0,1-.14-.06.22.22,0,0,1,0-.28.17.17,0,0,1,.14-.06.16.16,0,0,1,.13.06A.2.2,0,0,1,6.94,11Zm-.32.53H6.9v1.64H6.62ZM5.24,13.21H5V10.75h.28V12.3l.69-.73h.32l-.68.72.79.92H6l-.75-.87ZM3.81,13a.4.4,0,0,0,.36-.17.78.78,0,0,0,.11-.43.88.88,0,0,0,0-.24A.47.47,0,0,0,4.17,12,.37.37,0,0,0,4,11.83a.46.46,0,0,0-.21,0,.39.39,0,0,0-.35.16.74.74,0,0,0-.12.44.88.88,0,0,0,0,.24.68.68,0,0,0,.08.19A.37.37,0,0,0,3.6,13a.46.46,0,0,0,.21,0Zm0,.26a.79.79,0,0,1-.32-.06A.55.55,0,0,1,3.25,13a.59.59,0,0,1-.15-.27,1,1,0,0,1-.05-.35A1,1,0,0,1,3.1,12a.59.59,0,0,1,.15-.27.55.55,0,0,1,.24-.18.79.79,0,0,1,.32-.06.88.88,0,0,1,.33.06.66.66,0,0,1,.23.17.69.69,0,0,1,.15.28,1.25,1.25,0,0,1,0,.7.82.82,0,0,1-.14.28.81.81,0,0,1-.24.17.88.88,0,0,1-.33.06ZM2.33,10.9h.29v2.31H2.33l-1-1.83v1.83H1V10.9h.3l1,1.82Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/vendors_24/oracle.svg b/assets/sdc-icons/vendors_24/oracle.svg
new file mode 100644
index 0000000..1c02f22
--- /dev/null
+++ b/assets/sdc-icons/vendors_24/oracle.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Oracle_24px</title><g id="layer1"><g id="g16337"><path id="path16197" d="M10.52,11.36h1.14l-.6-.86L10,12.06H9.44l1.35-1.88a.36.36,0,0,1,.27-.12.32.32,0,0,1,.26.12l1.36,1.88h-.51l-.24-.35H10.77Zm5.26.35V10.08h-.43v1.79a.16.16,0,0,0,.06.13.23.23,0,0,0,.16.06h2l.25-.35Zm-7.11-.29a.67.67,0,1,0,0-1.34H6.79v2h.43V10.43H8.64a.32.32,0,1,1,0,.64H7.43l1.28,1h.63l-.87-.64Zm-4.53.64a1.05,1.05,0,0,1-1.11-1,1.05,1.05,0,0,1,1.11-1h1.3a1.06,1.06,0,0,1,1.12,1,1.06,1.06,0,0,1-1.12,1Zm1.27-.35a.65.65,0,1,0,0-1.28H4.17a.64.64,0,1,0,0,1.28Zm8.16.35a1.05,1.05,0,0,1-1.11-1,1.05,1.05,0,0,1,1.11-1h1.55l-.25.35H13.6a.64.64,0,1,0,0,1.28h1.55l-.25.35Zm5.26-.35a.69.69,0,0,1-.69-.47H20l.26-.34H18.14a.71.71,0,0,1,.69-.47h1.26l.26-.35H18.8a1.06,1.06,0,0,0-1.12,1,1.06,1.06,0,0,0,1.12,1h1.33l.25-.35H18.83"/><path id="path16199" d="M20.58,10.29a.17.17,0,0,1,.19-.17.18.18,0,0,1,.2.17.19.19,0,0,1-.2.18A.18.18,0,0,1,20.58,10.29Zm.19.22a.22.22,0,1,0,0-.44.22.22,0,1,0,0,.44Zm0-.35h.07a.07.07,0,0,1,.06.07v0s0,0,0,0h0l.06.1h-.06l-.06-.1h0v.1h-.05v-.25Zm0,.11h.05v0l0,0h-.07v.07h0"/></g></g></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/vendors_24/tropo.svg b/assets/sdc-icons/vendors_24/tropo.svg
new file mode 100644
index 0000000..7b4a34e
--- /dev/null
+++ b/assets/sdc-icons/vendors_24/tropo.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>tropo_24px</title><path d="M19.18,8.25H15.67a5.94,5.94,0,0,1,.36,7h3.36a9,9,0,0,0-.21-7Zm-14.36,0a9,9,0,0,0-.21,7H8a5.94,5.94,0,0,1,.36-7Z"/><circle cx="12" cy="11.75" r="3.5"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/vendors_60/alcatelLucent.svg b/assets/sdc-icons/vendors_60/alcatelLucent.svg
new file mode 100644
index 0000000..81642fe
--- /dev/null
+++ b/assets/sdc-icons/vendors_60/alcatelLucent.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60"><defs><style>.cls-1{fill:none;}.cls-2{clip-path:url(#clip-path);}.cls-3{fill:#fff;}</style><clipPath id="clip-path"><rect class="cls-1" x="5" y="24.66" width="50.65" height="10.68"/></clipPath></defs><title>alcatel lucent_60px</title><g id="g12"><g id="g2902"><g class="cls-2"><g id="g30"><g id="g40"><path id="path42" d="M24.42,30a.54.54,0,0,1-1.07,0,.54.54,0,0,1,1.07,0"/></g><g id="g44"><path id="path46" d="M6.72,28.16l-.63,2.27H7.35Zm1.06,3.68L7.52,31H5.92l-.26.84H5l1.32-4.27h.82l1.3,4.27Zm14.5,0h-.62V27.57h.62ZM20.41,30a1.31,1.31,0,0,0-.1-.6.72.72,0,0,0-.66-.4.71.71,0,0,0-.47.16,1.23,1.23,0,0,0-.35.84Zm-1.57.41a.92.92,0,0,0,.06.29,1,1,0,0,0,.6.64,1.55,1.55,0,0,0,.56.09,2.14,2.14,0,0,0,.77-.14v.49a2.37,2.37,0,0,1-.86.14,2.09,2.09,0,0,1-.9-.18,1.63,1.63,0,0,1-.86-1.56,2.16,2.16,0,0,1,.13-.74,1.42,1.42,0,0,1,1.33-.93A1.33,1.33,0,0,1,21,29.94a1.74,1.74,0,0,1-.07.47Zm-.91-1.31H17v1.69a1.94,1.94,0,0,0,0,.29.5.5,0,0,0,.53.31,1.77,1.77,0,0,0,.44-.06v.51a2.6,2.6,0,0,1-.56.06,1.33,1.33,0,0,1-.61-.13c-.41-.22-.42-.66-.42-1.06V28L17,27.5v1.1h.92ZM15,30.2a1.93,1.93,0,0,0-1.18.27.55.55,0,0,0-.22.45.44.44,0,0,0,.1.3c.13.16.36.23.76.23A3.5,3.5,0,0,0,15,31.4Zm-1.74-1.4.21-.1a2.66,2.66,0,0,1,.95-.19,1.3,1.3,0,0,1,.88.26.61.61,0,0,1,.2.25,1.29,1.29,0,0,1,.1.6V31.8a6.69,6.69,0,0,1-1.16.12,3.36,3.36,0,0,1-.59-.05A.93.93,0,0,1,13,31a1,1,0,0,1,.34-.74A2.47,2.47,0,0,1,15,29.8v-.15a.88.88,0,0,0,0-.34c-.07-.16-.25-.31-.63-.31a2.28,2.28,0,0,0-.89.21l-.19.1Zm-.72.45h0l-.11-.08A1.18,1.18,0,0,0,11.9,29a1,1,0,0,0-.46.11,1.07,1.07,0,0,0-.62,1.05,1.29,1.29,0,0,0,.08.48,1.07,1.07,0,0,0,1,.71,1.24,1.24,0,0,0,.66-.2v.52a.87.87,0,0,1-.19.1,1.55,1.55,0,0,1-.59.11,1.63,1.63,0,0,1-1.63-1.72,2,2,0,0,1,.12-.69,1.53,1.53,0,0,1,1.48-1,1.71,1.71,0,0,1,.78.19ZM9.51,31.84H8.9V27.57h.61ZM42.83,29.1h-.92v1.69a1.3,1.3,0,0,0,0,.29c.09.32.44.31.52.31a1.77,1.77,0,0,0,.44-.06v.51a2.6,2.6,0,0,1-.56.06,1.33,1.33,0,0,1-.61-.13c-.41-.22-.42-.66-.42-1.06V28l.61-.47v1.1h.92Zm-4.51-.51v.64a1.48,1.48,0,0,1,.14-.25,1,1,0,0,1,.88-.47,1.23,1.23,0,0,1,.69.21A1.37,1.37,0,0,1,40.45,30v1.89h-.62V30a1,1,0,0,0-.23-.78.64.64,0,0,0-.45-.16.78.78,0,0,0-.47.17,1.35,1.35,0,0,0-.33,1.13v1.46h-.62V28.59ZM36.45,30a1.23,1.23,0,0,0-.11-.6.72.72,0,0,0-.66-.4.68.68,0,0,0-.46.16,1.21,1.21,0,0,0-.36.84Zm-1.58.41a.92.92,0,0,0,.06.29,1,1,0,0,0,.6.64,1.6,1.6,0,0,0,.56.09,2.14,2.14,0,0,0,.77-.14v.49a2.37,2.37,0,0,1-.86.14,2.13,2.13,0,0,1-.91-.18,1.62,1.62,0,0,1-.85-1.56,2.16,2.16,0,0,1,.13-.74,1.41,1.41,0,0,1,1.32-.93,1.34,1.34,0,0,1,1.36,1.43,1.74,1.74,0,0,1-.07.47ZM33.8,29.25h0l-.11-.08a1.18,1.18,0,0,0-.54-.13,1,1,0,0,0-.46.11,1.07,1.07,0,0,0-.62,1.05,1.29,1.29,0,0,0,.08.48,1.07,1.07,0,0,0,1,.71,1.24,1.24,0,0,0,.66-.2v.52a.87.87,0,0,1-.19.1,1.55,1.55,0,0,1-.59.11,1.63,1.63,0,0,1-1.63-1.72,2,2,0,0,1,.12-.69,1.53,1.53,0,0,1,1.48-1,1.71,1.71,0,0,1,.78.19v.55Zm-5-.66v1.84a.73.73,0,0,0,.76.95.71.71,0,0,0,.46-.14c.28-.22.26-.62.26-.93V28.59h.61v1.72a2.41,2.41,0,0,1-.06.75,1.09,1.09,0,0,1-.52.68,1.51,1.51,0,0,1-.77.18,1.81,1.81,0,0,1-.44-.05,1.17,1.17,0,0,1-.82-.68,2.35,2.35,0,0,1-.1-.8v-1.8Zm-2.64-1v3.7H27.8v.57H25.49V27.57Z"/></g></g></g></g></g><circle cx="50" cy="29.67" r="5"/><g id="g36"><path id="path38" class="cls-3" d="M52.64,31.28a4.34,4.34,0,0,1-1.51,1.13c-.45.18-.65.18-.67-.31a18.85,18.85,0,0,1,.83-4.34c.38-1.38.43-1.62-.23-1.84-.49-.16-.85-.05-1.58.63a17.44,17.44,0,0,0-3.1,4.34,5.6,5.6,0,0,0,.54.43c.17.12.3.09.42-.1a7.91,7.91,0,0,1,2.45-2.35l.15-.5a10.25,10.25,0,0,0-1.55.92c.88-1.62,2.16-2.93,2.39-2.82a13.67,13.67,0,0,1-.72,2.69,11.15,11.15,0,0,0-.57,3.53c.06.78.67,1,1.57.59a4.36,4.36,0,0,0,1.79-1.59l-.2-.42Zm-.26-3.39a3.27,3.27,0,0,0-.77,0c0,.07,0,.15-.07.24a1.48,1.48,0,0,1,1.7.52A2.15,2.15,0,0,1,53,30.78l.17.35h0c1.1-2.28-.13-3.1-.8-3.23"/></g></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/vendors_60/aricent.svg b/assets/sdc-icons/vendors_60/aricent.svg
new file mode 100644
index 0000000..45ac235
--- /dev/null
+++ b/assets/sdc-icons/vendors_60/aricent.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>aricent_60px</title><path d="M38.41,30.39H35.8s-.07,0-.08.08v.12c0,.1,0,.2,0,.3a3.4,3.4,0,0,0,.38,1.33,2.34,2.34,0,0,0,1.61,1.21,2.84,2.84,0,0,0,.66.08h.32a3,3,0,0,0,1.89-.74l.12-.1h0s0,0,0,0,0,.07,0,.1c-.11.4-.22.79-.32,1.19l0,.1,0,0-.06,0a4.62,4.62,0,0,1-1,.26l-.43.06h-.11c-.3,0-.61,0-.91,0l-.38,0a4.33,4.33,0,0,1-.92-.25,3.62,3.62,0,0,1-2.26-2.56,3.8,3.8,0,0,1-.11-.95,5.22,5.22,0,0,1,0-.69,4.25,4.25,0,0,1,.49-1.47,3.31,3.31,0,0,1,2.16-1.59,3.14,3.14,0,0,1,.87-.1H38a3.12,3.12,0,0,1,2.57,1.42,3.62,3.62,0,0,1,.5,1.26,4.17,4.17,0,0,1,.07.71.34.34,0,0,0,0,.1.06.06,0,0,1-.06.06H38.41Zm-.71-.87h1.89s0,0,0,0v0a1.83,1.83,0,0,0-.21-.66,1.67,1.67,0,0,0-1-.84,2.38,2.38,0,0,0-.75-.1,1.78,1.78,0,0,0-.75.16,1.91,1.91,0,0,0-1.11,1.33.89.89,0,0,0,0,.14s0,.06,0,.06H37.7Z"/><path d="M10.89,22.32a.15.15,0,0,1,0,.07l.51,1.24c.67,1.63,1.34,3.25,2,4.88.54,1.32,1.09,2.65,1.64,4a5.51,5.51,0,0,0,.31.7,4.27,4.27,0,0,0,.3.51,2.42,2.42,0,0,0,.75.71.24.24,0,0,1,.09.06s0,0,0,0l0,0H13.16l0,0s0,0,0,0,0,0,.07,0l.14-.07.16-.09a.44.44,0,0,0,.17-.35,1.13,1.13,0,0,0,0-.32,3,3,0,0,0-.11-.32c-.19-.48-.38-1-.58-1.44-.85-2.1-1.71-4.2-2.56-6.29L10,24.47c0-.13,0-.13,0-.27.29-.6.59-1.2.88-1.81C10.86,22.36,10.86,22.34,10.89,22.32Z"/><path d="M30.94,34.58h-.47l-.34,0a5.61,5.61,0,0,1-1-.24,4.35,4.35,0,0,1-1.08-.59,3.54,3.54,0,0,1-1.24-1.82,5.78,5.78,0,0,1-.12-.57,5.53,5.53,0,0,1,0-.91,3.55,3.55,0,0,1,1.76-2.85A4.4,4.4,0,0,1,29.81,27c.23-.05.47-.07.7-.1h.7l.23,0h.11c.23,0,.46.06.69.1a4.88,4.88,0,0,1,.55.12h0c.17.05.17,0,.19.23s0,.39.05.58a.53.53,0,0,1,0,.13l0,.24c0,.07,0,.15,0,.22s0,0,0,0l-.05,0a.18.18,0,0,1-.07-.05,2.76,2.76,0,0,0-1.31-.6,2,2,0,0,0-.48-.05H31a3.27,3.27,0,0,0-1.11.22,2.58,2.58,0,0,0-1.41,1.4,2.75,2.75,0,0,0-.22.93c0,.05,0,.1,0,.14a2.44,2.44,0,0,0,0,.27c0,.17,0,.34.06.51A2.68,2.68,0,0,0,29,32.85a2.56,2.56,0,0,0,1,.59,3,3,0,0,0,.88.16h.34A2.82,2.82,0,0,0,33,32.91l.09-.06h0s0,0,0,0v0c-.08.41-.17.83-.25,1.25a.14.14,0,0,1,0,.07.1.1,0,0,1-.07.07l-.46.12c-.24,0-.49.08-.74.12S31.16,34.57,30.94,34.58Z"/><path d="M52.23,30.32V28.5c0-.1,0-.21,0-.31a.94.94,0,0,0-.51-.72.87.87,0,0,0-.35-.13l-.16,0s0-.05,0-.07l.06-.06.23-.19,2-1.63.11-.08a0,0,0,0,1,.07,0s0,.07,0,.1v1.45a.91.91,0,0,0,0,.17.07.07,0,0,0,.07.07h1.33a2.94,2.94,0,0,0,.59-.05l.32-.11h0a0,0,0,0,1,0,0s0,0,0,0l0,0-.5,1,0,.07a.15.15,0,0,1-.16.09H53.72a.07.07,0,0,0-.07.07.28.28,0,0,0,0,.09v3.4c0,.17,0,.34,0,.5a1.5,1.5,0,0,0,.15.51,1.1,1.1,0,0,0,.6.58,1.36,1.36,0,0,0,.44.11,1.9,1.9,0,0,0,.25,0,1.15,1.15,0,0,0,.55-.11l.07,0h0v0l0,.05-.6.91,0,.07a.12.12,0,0,1-.07.05l-.16,0a4,4,0,0,1-.69,0,1.93,1.93,0,0,1-1.65-1.14,2.88,2.88,0,0,1-.23-.81,4.87,4.87,0,0,1,0-.66V30.32Z"/><path d="M17.83,30.91V28.4a2.48,2.48,0,0,0,0-.27.77.77,0,0,0-.36-.49l-.16-.08a0,0,0,0,1,0,0,.1.1,0,0,1,0,0l0,0,.31-.06,1.3-.22a.78.78,0,0,1,.21,0h.05a0,0,0,0,1,0,0,.71.71,0,0,1,0,.14v.72s0,.07,0,.1h0l.07-.11a1.85,1.85,0,0,1,.3-.39,2,2,0,0,1,1-.55,2.57,2.57,0,0,1,.62-.08,2.74,2.74,0,0,1,.5,0h0c.15,0,.16,0,.16.19v1s0,.05,0,.08l0,0h-.07a2.18,2.18,0,0,0-.61-.15,2.24,2.24,0,0,0-1,.08,1.41,1.41,0,0,0-.87.8,2,2,0,0,0-.16.54,4.19,4.19,0,0,0,0,.5V33a3.89,3.89,0,0,0,0,.59,1.89,1.89,0,0,0,.09.34,1,1,0,0,0,.35.45l.11.08a0,0,0,0,1,0,0l0,0H17.27l0,0a.06.06,0,0,1,0,0l.09-.06a1,1,0,0,0,.45-.68,1.73,1.73,0,0,0,0-.32V30.91Z"/><path d="M44.86,28.21a.19.19,0,0,1,0-.08,3.11,3.11,0,0,1,.4-.41,2.64,2.64,0,0,1,1-.55,2.17,2.17,0,0,1,.62-.1h.32a2.55,2.55,0,0,1,2.08,1.23,3,3,0,0,1,.37,1,3.53,3.53,0,0,1,.08.72v2.91a4.57,4.57,0,0,0,0,.64,1.8,1.8,0,0,0,.1.4,1,1,0,0,0,.32.4l.13.09s0,0,0,0l0,0H47.77s0,0,0-.05l0,0,.1-.07a1,1,0,0,0,.35-.49,1.84,1.84,0,0,0,.09-.42c0-.25,0-.51,0-.76V30.53a5.68,5.68,0,0,0,0-.59,3.18,3.18,0,0,0-.25-1,2.15,2.15,0,0,0-.44-.64,1.89,1.89,0,0,0-.93-.48,2.7,2.7,0,0,0-.75,0,2.58,2.58,0,0,0-1.08.37Z"/><path d="M44.49,30.29V33c0,.2,0,.41,0,.62a1.74,1.74,0,0,0,.11.39,1,1,0,0,0,.32.39l.12.09a0,0,0,0,1,0,0s0,0,0,0H42.53l0,0s0,0,0,0l0,0,.09-.06a1,1,0,0,0,.39-.62,1.65,1.65,0,0,0,0-.32V28.32a.8.8,0,0,0,0-.26.69.69,0,0,0-.31-.42.8.8,0,0,0-.16-.08s0,0,0,0,0,0,.05-.05h0l.33-.06,1-.17.41-.08h.16s0,0,0,0a.43.43,0,0,0,0,0v3.05Z"/><path d="M24.85,30.27V33c0,.21,0,.41,0,.62a2.11,2.11,0,0,0,.09.36,1,1,0,0,0,.34.43l.13.1v0s0,0,0,0H22.91l-.05,0a.11.11,0,0,1,0-.05l0,0,.07,0a1,1,0,0,0,.4-.62,2.7,2.7,0,0,0,0-.28c0-.21,0-.42,0-.62,0-1.37,0-2.74,0-4.1,0-.16,0-.31,0-.47a.69.69,0,0,0-.05-.24.72.72,0,0,0-.31-.38l-.18-.09v0s0,0,0,0h0l.3-.06,1.1-.19.28-.05a.55.55,0,0,1,.18,0s.05,0,.05.05,0,0,0,.05v3Z"/><path d="M11.06,28.81a3.09,3.09,0,0,0-1.23.37,7.52,7.52,0,0,0-1.49,1.59c-.13.23-1.09,2.58-1.13,2.7a1.32,1.32,0,0,0-.08.33.5.5,0,0,0,.18.48.94.94,0,0,0,.22.12l.13.06v0H4.53s0,0,0,0a0,0,0,0,1,0,0l0,0,.09,0a2.2,2.2,0,0,0,.74-.65,4.48,4.48,0,0,0,.35-.6l.15-.3c.24-.53.5-1,.76-1.58a9.5,9.5,0,0,1,.5-.88,4.48,4.48,0,0,1,.62-.76,3,3,0,0,1,1.51-.81,3.6,3.6,0,0,1,.56-.08l.26,0a3.38,3.38,0,0,1,.45,0c.15,0,.3,0,.45.06A.1.1,0,0,1,11.06,28.81Z"/><path d="M23.18,23.46a.82.82,0,0,1,.31-.65,1,1,0,0,1,.74-.23.79.79,0,0,1,.52.22.94.94,0,0,1,0,1.4.8.8,0,0,1-.55.24,1,1,0,0,1-1-.76C23.19,23.61,23.19,23.53,23.18,23.46Z"/><polygon points="44.98 28.1 44.97 28.09 44.98 28.09 44.98 28.1"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/vendors_60/att.svg b/assets/sdc-icons/vendors_60/att.svg
new file mode 100644
index 0000000..85672f2
--- /dev/null
+++ b/assets/sdc-icons/vendors_60/att.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>at&amp;amp;t_60px</title><g id="g3"><path id="path5" d="M51.26,34a.22.22,0,0,1-.23-.22V27.34H48.78a.21.21,0,0,1-.22-.22v-.89a.21.21,0,0,1,.22-.22h6a.21.21,0,0,1,.23.22v.89a.21.21,0,0,1-.23.22H52.52v6.45a.21.21,0,0,1-.22.22h-1M34,30.79l-1.18-3.3-1.19,3.3Zm2.62,3a.18.18,0,0,1-.17.26H35.4a.28.28,0,0,1-.3-.21l-.61-1.7H31.18l-.61,1.7a.28.28,0,0,1-.3.21h-1a.19.19,0,0,1-.17-.26l2.78-7.54a.29.29,0,0,1,.3-.2h1.38a.3.3,0,0,1,.31.2l2.78,7.54m8-.82a1.67,1.67,0,0,0,1.46-.84l-1.66-1.74c-.64.35-1.05.7-1.05,1.4a1.2,1.2,0,0,0,1.25,1.18m.46-5.86a.76.76,0,0,0-.84.77c0,.34.19.64.61,1.08.73-.41,1-.66,1-1.1a.73.73,0,0,0-.81-.75m4.56,6.66c.13.14,0,.28-.12.28h-1.3a.42.42,0,0,1-.38-.17L47.06,33a2.91,2.91,0,0,1-2.47,1.19,2.42,2.42,0,0,1-2.68-2.39,2.48,2.48,0,0,1,1.6-2.3,2.45,2.45,0,0,1-.69-1.58,2.06,2.06,0,0,1,2.24-2.09,2,2,0,0,1,2.22,2,2.32,2.32,0,0,1-1.52,2L46.91,31l.65-1.1a.35.35,0,0,1,.34-.18h1c.16,0,.25.11.15.28L47.9,31.9l1.74,1.83M39.38,34a.21.21,0,0,0,.23-.22V27.34h2.25a.22.22,0,0,0,.23-.22v-.89a.22.22,0,0,0-.23-.22h-6a.22.22,0,0,0-.23.22v.89a.22.22,0,0,0,.23.22h2.25v6.45a.21.21,0,0,0,.23.22Z"/><path id="path9" d="M9,37.9a10.49,10.49,0,0,0,13.07-.38s0,0,0,0a12.7,12.7,0,0,1-6.76,1.68A13.2,13.2,0,0,1,9,37.88s0,0,0,0m7,.51a11.85,11.85,0,0,0,7-2,5.48,5.48,0,0,0,1.27-1.49,9.09,9.09,0,0,0,.62-1.25s0,0,0,0c-1.55,2.22-6,3.6-10.64,3.6-3.27,0-6.79-1-8.16-3,0,0,0,0,0,0,1.28,2.65,5.17,4.1,10,4.1M13.21,34C8,34,5.47,31.62,5,30c0,0,0,0,0,0a10.29,10.29,0,0,0,.15,1.72,2.08,2.08,0,0,0,.52.88c1.27,1.29,4.45,3.1,10,3.1,7.49,0,9.21-2.43,9.56-3.23A7.12,7.12,0,0,0,25.56,30c0-.21,0-.38,0-.54s0,0,0,0c-.37,2-6.78,4.56-12.31,4.56M6,25.71a9.72,9.72,0,0,0-.73,2.07.62.62,0,0,0,0,.49c.63,1.3,3.82,3.38,11.26,3.38,4.54,0,8.06-1.08,8.63-3.06a2.29,2.29,0,0,0,0-1.27,10,10,0,0,0-.67-1.73s0,0,0,0c.09,2.6-7.36,4.28-11.11,4.28-4.07,0-7.46-1.58-7.46-3.57A2.33,2.33,0,0,1,6,25.72s0,0,0,0m16.08-3.19a.44.44,0,0,1,.06.23c0,1.11-3.49,3.08-9,3.08-4.09,0-4.86-1.48-4.86-2.42a1.61,1.61,0,0,1,.43-1s0,0,0,0a10.08,10.08,0,0,0-1.45,1.47,1.29,1.29,0,0,0-.33.6c0,1.95,5,3.36,9.7,3.36,5,0,7.21-1.59,7.21-3,0-.5-.19-.79-.7-1.35a11,11,0,0,0-1-1s0,0,0,0m-1.53-1.11a10.52,10.52,0,0,0-10.59,0c-.47.28-.73.5-.73.79,0,.84,2,1.75,5.62,1.75s6.31-1,6.31-1.95c0-.23-.2-.39-.61-.63"/></g></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/vendors_60/brocade.svg b/assets/sdc-icons/vendors_60/brocade.svg
new file mode 100644
index 0000000..8e38523
--- /dev/null
+++ b/assets/sdc-icons/vendors_60/brocade.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>brocade_60px</title><g id="g3822"><g id="g3828"><path id="path3830" d="M10.56,46.33h1.68a1,1,0,0,0,1.14-1,1,1,0,0,0-1.14-1H10.56Zm0-3h1.58a1,1,0,1,0,0-2H10.56Zm-1.23-3h2.8a2.29,2.29,0,0,1,1.94.68,1.81,1.81,0,0,1,.4,1.16,1.54,1.54,0,0,1-1.31,1.58,1.84,1.84,0,0,1,1.12.57,1.75,1.75,0,0,1,.41,1.16,1.91,1.91,0,0,1-.58,1.41,2.32,2.32,0,0,1-1.64.52H9.33Z"/></g><g id="g3832"><path id="path3834" d="M16.56,43.46h1.62c.63,0,1.38-.21,1.38-1.09,0-.53-.36-1-1.28-1H16.56Zm2.94,3.93-1.12-2.91H16.56v2.91H15.27V40.31h3.11a2.66,2.66,0,0,1,1.88.55,2,2,0,0,1,.64,1.53,1.88,1.88,0,0,1-1.29,1.88l1.26,3.12Z"/></g><g id="g3836"><path id="path3838" d="M25.52,42a1.35,1.35,0,0,0-1.29-.78c-1.36,0-1.66,1.37-1.66,2.64,0,.84.14,2.6,1.64,2.6a1.51,1.51,0,0,0,1.35-.82,3.79,3.79,0,0,0,.32-1.81A4.37,4.37,0,0,0,25.52,42M24.2,47.5c-2.26,0-3-2.07-3-3.67,0-1.92,1.1-3.63,3.08-3.63s3,1.75,3,3.65c0,2.16-1.2,3.65-3.08,3.65"/></g><g id="g3840"><path id="path3842" d="M33.22,45.07a2.61,2.61,0,0,1-2.73,2.43c-2.41,0-2.88-2.43-2.88-3.65,0-1.84.87-3.65,2.92-3.65a2.63,2.63,0,0,1,2.69,2.51L32,42.84c-.13-.57-.38-1.61-1.47-1.61-1.44,0-1.52,2-1.52,2.59,0,2,.81,2.61,1.57,2.61A1.51,1.51,0,0,0,32,44.93Z"/></g><g id="g3844"><path id="path3846" d="M37,44.69l-1-3.17-1,3.17Zm2.31,2.7H38l-.59-1.68H34.61l-.56,1.68H32.94l2.39-7.08h1.58Z"/></g><g id="g3848"><path id="path3850" d="M41,46.35h1.08c1.12,0,2.08-.85,2.08-2.56,0-1.29-.7-2.47-1.93-2.47H41Zm-1.33-6h2.65a2.94,2.94,0,0,1,2.22.88,3.71,3.71,0,0,1,1,2.66A3.26,3.26,0,0,1,42,47.39H39.67Z"/></g><g id="g3852"><path id="path3854" d="M46,47.39V40.31h4.62v1H47.3v1.92H50v1H47.3v2h3.37v1.09Z"/></g></g><g id="g3860"><path id="path3862" d="M38.3,21.51c-4,0-8.58-1.86-13.87-5.67H38.3a2.84,2.84,0,0,1,0,5.67m0,9.54H24.42c5.3-3.82,9.84-5.67,13.88-5.67a2.84,2.84,0,0,1,0,5.67m4.11-7.61a6.24,6.24,0,0,0,2.18-4.76,6.08,6.08,0,0,0-6-6.18H15.41c5.93,6.19,11.59,9.37,16,10.94-4.42,1.57-10.08,4.76-16,11H38.6a6.08,6.08,0,0,0,6-6.18,6.25,6.25,0,0,0-2.18-4.77"/></g></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/vendors_60/cisco.svg b/assets/sdc-icons/vendors_60/cisco.svg
new file mode 100644
index 0000000..8a680c2
--- /dev/null
+++ b/assets/sdc-icons/vendors_60/cisco.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>cisco_60px</title><g id="layer1"><g id="g53688"><path id="path53690" d="M50.42,25.92a.89.89,0,1,0-1.77,0v1.86a.89.89,0,1,0,1.77,0Zm-4.87-2.44a.9.9,0,0,0-1.79,0v4.3a.9.9,0,0,0,1.79,0Zm-4.89-3.35a.89.89,0,0,0-1.77,0v9.42a.89.89,0,0,0,1.77,0Zm-4.89,3.35a.89.89,0,1,0-1.77,0v4.3a.89.89,0,1,0,1.77,0Zm-4.88,2.44a.89.89,0,0,0-1.78,0v1.86a.89.89,0,0,0,1.78,0ZM26,23.48a.89.89,0,0,0-1.78,0v4.3a.89.89,0,0,0,1.78,0Zm-4.89-3.35a.89.89,0,0,0-1.78,0v9.42a.89.89,0,0,0,1.78,0Zm-4.88,3.35a.89.89,0,1,0-1.78,0v4.3a.89.89,0,0,0,1.78,0Zm-4.89,2.44a.89.89,0,1,0-1.77,0v1.86a.89.89,0,1,0,1.77,0V25.92Zm18.36,7.71A8,8,0,0,0,28,33.41c-1.65,0-2.65.89-2.65,2.21s.83,1.76,1.83,2.08l.38.12c.45.14.8.35.8.71s-.41.66-1.3.66a6.8,6.8,0,0,1-1.69-.26v1.63a10.75,10.75,0,0,0,1.93.19c1.37,0,2.94-.6,2.94-2.38a2.14,2.14,0,0,0-1.69-2L28,36.19c-.3-.1-.83-.25-.83-.68s.39-.58,1.11-.58a5.89,5.89,0,0,1,1.4.22V33.63Zm15.14,3.45A1.85,1.85,0,1,1,43,35.22a1.83,1.83,0,0,1,1.85,1.86M43,33.41a3.67,3.67,0,1,0,3.75,3.67A3.64,3.64,0,0,0,43,33.41m-24.33.25A5.53,5.53,0,0,0,17,33.41a3.67,3.67,0,1,0,0,7.34,6,6,0,0,0,1.64-.25V38.59a3.09,3.09,0,0,1-1.51.38,1.89,1.89,0,1,1,0-3.78,3.13,3.13,0,0,1,1.51.38Zm18.69,0a5.5,5.5,0,0,0-1.63-.25,3.67,3.67,0,1,0,0,7.34,5.78,5.78,0,0,0,1.63-.25V38.59a3,3,0,0,1-1.5.38,1.89,1.89,0,1,1,0-3.78,3.07,3.07,0,0,1,1.5.38Zm-14.44,7H21.13V33.54h1.79Z"/></g></g></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/vendors_60/cloud.svg b/assets/sdc-icons/vendors_60/cloud.svg
new file mode 100644
index 0000000..33d9d2a
--- /dev/null
+++ b/assets/sdc-icons/vendors_60/cloud.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>cloud foundry_60px</title><g id="g4191"><g id="g4197"><path id="path4199" d="M27.18,29s.35-1.35-1.18-3.1L26,25.79A4.34,4.34,0,0,1,25,23a4.28,4.28,0,0,1,4.25-4.3h.1A4.28,4.28,0,0,1,33.55,23a4.34,4.34,0,0,1-1,2.77l0,.06A4.15,4.15,0,0,0,31.32,29a6.29,6.29,0,0,0-1.72-12.2h-.7A6.29,6.29,0,0,0,27.18,29"/></g><g id="g4201"><path id="path4203" d="M35.2,33.94a2.74,2.74,0,0,1,.37-.11,2.68,2.68,0,0,1,.43,0l0-.12a.72.72,0,0,0-.07-.26s0-.1,0-.14a.67.67,0,0,1-.06-.12L35.74,33a3.13,3.13,0,0,1-.44-.1l-.4-.14a1.57,1.57,0,0,1-.55-.34.42.42,0,0,1-.16-.35.25.25,0,0,1,.08-.15.36.36,0,0,1,.16-.13l-.14-.08-.13-.07L34,31.59l-.32-.15-.15-.06-.35,0a2.44,2.44,0,0,1-.38,0,3.1,3.1,0,0,1-.7-.12,1.63,1.63,0,0,1-.29-.1,1,1,0,0,1-.21-.11c-.12-.09-.19-.17-.19-.26l-.17,0-.48-.07a.51.51,0,0,1,0,.09l0,.17a.7.7,0,0,0,.48.82A2.43,2.43,0,0,1,32.83,33c.37,1-1.19,2-3.56,2s-3.94-1-3.57-2a2.35,2.35,0,0,1,1.61-1.14A.73.73,0,0,0,27.8,31l-.05-.24-.32,0a2.86,2.86,0,0,0-.37.06l-.18,0c0,.08-.05.17-.16.25l-.2.12-.28.11-.33.08-.37.05a3.54,3.54,0,0,1-.73,0l0,0-.1.05-.31.15c-.12.05-.22.12-.3.16l-.1.06,0,0c.16.07.25.17.26.28a.38.38,0,0,1-.11.36,1.11,1.11,0,0,1-.23.19,1.49,1.49,0,0,1-.31.17,3.15,3.15,0,0,1-.85.26l0,.12a2.56,2.56,0,0,0-.09.26c0,.09,0,.19,0,.26a.32.32,0,0,0,0,.13,2.25,2.25,0,0,1,.84.15,1,1,0,0,1,.53.37.57.57,0,0,1,0,.54,1.22,1.22,0,0,1-.47.62l0,0a.41.41,0,0,0,.12.09c.1.07.23.18.38.27l.45.25.16.07.07,0a3.8,3.8,0,0,1,1.15-.28,3.71,3.71,0,0,1,.57,0,3.43,3.43,0,0,1,.56.07,3.26,3.26,0,0,1,.5.16,3.31,3.31,0,0,1,.42.24,1.48,1.48,0,0,1,.55.7l.33,0c.2,0,.47,0,.74,0l.73,0,.33,0a.85.85,0,0,1,.17-.39,1,1,0,0,1,.14-.17l.16-.15a1.6,1.6,0,0,1,.4-.25,2.67,2.67,0,0,1,.48-.18,4.68,4.68,0,0,1,.54-.08A3.62,3.62,0,0,1,33,36a4,4,0,0,1,1.17.25l.2-.11a3.1,3.1,0,0,0,.41-.26c.13-.1.27-.19.36-.27l.13-.13a1.53,1.53,0,0,1-.53-.6.53.53,0,0,1-.06-.27.39.39,0,0,1,.06-.26.9.9,0,0,1,.46-.38"/></g></g><g id="g4205"><g id="g4207"><g id="g4213"><g id="g4215"><path id="path4229" d="M26.1,23a2.61,2.61,0,0,0,1,2h0a4.48,4.48,0,0,1,1.41,3.26h0c0,1.53-.06,3.3-.12,4.2h0c-.81.12-1.38.39-1.38.71h0c0,.42,1,.91,2.25.91h0c1.24,0,2.24-.49,2.24-.91h0c0-.32-.57-.59-1.37-.71h0c-.07-.9-.17-2.67-.13-4.2h0a4.52,4.52,0,0,1,1.41-3.26h0a2.58,2.58,0,0,0,1-2h0a3,3,0,0,0-3.13-2.72h0A3,3,0,0,0,26.1,23"/></g></g></g></g><g id="g4233"><g id="g4239"><path id="path4241" d="M9.28,45.47a1.71,1.71,0,0,1-1.21.5,1.6,1.6,0,0,1-1.7-1.68,1.62,1.62,0,0,1,1.7-1.71,1.67,1.67,0,0,1,1.21.5l-.18.15a1.42,1.42,0,0,0-1-.42,1.46,1.46,0,1,0,0,2.92,1.5,1.5,0,0,0,1-.42Z"/></g><g id="g4243"><path id="path4245" d="M10.54,42.62v3.07H12.4v.24H10.28V42.62Z"/></g><g id="g4247"><path id="path4249" d="M13.55,44.27a1.42,1.42,0,1,0,2.84,0,1.42,1.42,0,1,0-2.84,0m3.09,0A1.67,1.67,0,1,1,15,42.56a1.62,1.62,0,0,1,1.67,1.72"/></g><g id="g4251"><path id="path4253" d="M20.34,42.62v2.06a1.27,1.27,0,1,1-2.54,0V42.62h.25v2.06a1,1,0,1,0,2,0V42.62Z"/></g><g id="g4255"><path id="path4257" d="M21.82,42.86v2.82h.87a1.36,1.36,0,0,0,1.42-1.45,1.34,1.34,0,0,0-1.42-1.37Zm2.55,1.37a1.59,1.59,0,0,1-1.68,1.7H21.57V42.62h1.12a1.59,1.59,0,0,1,1.68,1.61"/></g><g id="g4259"><path id="path4261" d="M25.86,45.93V42.62h2.38v.6H26.48v.91h1.67v.57H26.48v1.23Z"/></g><g id="g4263"><path id="path4265" d="M29.7,44.31a1.09,1.09,0,1,0,2.17,0,1.09,1.09,0,1,0-2.17,0m2.78,0a1.7,1.7,0,1,1-3.4,0,1.7,1.7,0,1,1,3.4,0"/></g><g id="g4267"><path id="path4269" d="M36.4,42.62v1.9A1.34,1.34,0,0,1,35,46a1.38,1.38,0,0,1-1.47-1.48v-1.9h.62v1.9a.81.81,0,0,0,.86.91c.51,0,.8-.34.8-.91v-1.9Z"/></g><g id="g4271"><path id="path4273" d="M39.75,42.61h.62v3.32H40L38.24,43.7v2.23h-.62V42.62h.5l1.63,2.05Z"/></g><g id="g4275"><path id="path4277" d="M42.08,45.33h.68a1.06,1.06,0,0,0,0-2.12h-.68Zm2.34-1.09a1.58,1.58,0,0,1-1.66,1.69h-1.3V42.62h1.3a1.57,1.57,0,0,1,1.66,1.62"/></g><g id="g4279"><path id="path4281" d="M46,43.2v1.06h1a.53.53,0,1,0,0-1.06Zm2.31,2.73h-.74l-1-1.11H46v1.11h-.62V42.61H47a1.1,1.1,0,0,1,1.2,1.09,1,1,0,0,1-.84,1l1,1.13Z"/></g><g id="g4283"><path id="path4285" d="M50.53,44l.88-1.36h.75v0l-1.32,1.92v1.37h-.62V44.56l-1.28-1.92v0h.75Z"/></g></g></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/vendors_60/ericsson.svg b/assets/sdc-icons/vendors_60/ericsson.svg
new file mode 100644
index 0000000..7374318
--- /dev/null
+++ b/assets/sdc-icons/vendors_60/ericsson.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>ericcson_60px</title><path d="M24.43,22.05a2.31,2.31,0,0,1-3-1.36,2.28,2.28,0,0,1,1.37-2.94h0L35.5,13.15a2.29,2.29,0,0,1,3,1.31l0,.06a2.19,2.19,0,0,1-1.29,2.84l-.08,0Z"/><path d="M24.43,28.87a2.3,2.3,0,1,1-1.6-4.31h0L35.5,20a2.28,2.28,0,0,1,3,1.3.14.14,0,0,1,0,.07,2.19,2.19,0,0,1-1.29,2.84l-.08,0Z"/><path d="M24.43,35.69a2.31,2.31,0,0,1-3-1.36,2.29,2.29,0,0,1,1.36-2.95h0L35.5,26.79a2.29,2.29,0,0,1,3,1.29.25.25,0,0,1,0,.07A2.19,2.19,0,0,1,37.18,31l-.08,0Z"/><polygon points="10.45 41.36 14.65 41.36 14.65 42.51 11.9 42.51 11.9 43.44 14.58 43.44 14.58 44.66 11.9 44.66 11.9 45.66 14.72 45.66 14.72 46.88 10.45 46.88 10.45 41.36"/><rect x="21.31" y="41.36" width="1.52" height="5.53"/><path d="M28.34,41.5l-.07,1.15C27,42,25.15,42.22,25.15,44s1.89,2.16,3.19,1.51l.07,1.22c-2.24.64-4.85,0-4.85-2.73C23.56,41.43,26.24,40.71,28.34,41.5Z"/><path d="M32.83,41.43l-.08,1.15c-.79-.43-2.24-.43-2.24.21,0,1,2.6.29,2.6,2.37s-2.46,2.08-4.05,1.58l.08-1.22c1,.43,2.46.57,2.46-.22S29,44.88,29,42.93C29,41.29,31,40.85,32.83,41.43Z"/><path d="M37.39,41.43l-.07,1.15c-.8-.43-2.25-.43-2.25.21,0,1,2.6.29,2.6,2.37s-2.45,2.08-4.05,1.58l.08-1.22c1,.43,2.46.57,2.46-.22s-2.61-.42-2.61-2.37C33.55,41.29,35.57,40.85,37.39,41.43Z"/><polygon points="44.41 41.36 46.29 41.36 48.1 44.88 48.1 41.36 49.55 41.36 49.55 46.88 47.74 46.88 45.79 43.22 45.79 46.88 44.41 46.88 44.41 41.36"/><path d="M39.7,44.09c0,.86.37,1.79,1.16,1.79s1.23-.93,1.23-1.79-.36-1.8-1.23-1.8S39.7,43.22,39.7,44.09Zm1.16-2.87a2.6,2.6,0,0,1,2.83,2.87,2.79,2.79,0,1,1-5.58,0,2.58,2.58,0,0,1,2.75-2.87Z"/><path d="M15.81,41.36h2.68c.79,0,1.81.28,1.81,1.43a1.33,1.33,0,0,1-1,1.37.77.77,0,0,1,.51.5c0,.07.8,2.15.8,2.23H19l-.57-1.73a.55.55,0,0,0-.51-.36c-.29,0-.65-.07-.65,0v2.09H15.81Zm1.45,2.29h.79a.66.66,0,0,0,.73-.59V43c0-.36-.29-.58-.73-.58h-.79Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/vendors_60/juniper.svg b/assets/sdc-icons/vendors_60/juniper.svg
new file mode 100644
index 0000000..b72849f
--- /dev/null
+++ b/assets/sdc-icons/vendors_60/juniper.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>juniper_60px</title><path d="M29.49,34.55h.33l1.71,2.39V34.55h.29v2.9h-.28L29.78,35v2.46h-.29Z"/><path d="M32.55,34.55h1.89v.29H32.85v1H34.4v.29H32.85v1.08h1.6v.28h-1.9Z"/><path d="M36,34.84H34.9v-.29h2.45v.29H36.27v2.61H36Z"/><path d="M37.72,34.55H38l.75,2.4.77-2.4h.26l.77,2.4.75-2.4h.29l-.91,2.92h-.27l-.77-2.42-.76,2.42h-.27Z"/><path d="M44.47,36c0-.78-.36-1.21-1.14-1.21S42.2,35.22,42.2,36s.36,1.21,1.13,1.21,1.14-.42,1.14-1.21M41.9,36c0-1,.52-1.5,1.43-1.5A1.31,1.31,0,0,1,44.78,36a1.31,1.31,0,0,1-1.45,1.5c-.91,0-1.43-.46-1.43-1.5"/><path d="M46.64,36c.4,0,.65-.13.65-.59s-.24-.57-.67-.57h-.93V36Zm-.09.28h-.86v1.18H45.4v-2.9h1.23c.66,0,1,.27,1,.84a.78.78,0,0,1-.74.87l.69,1.19h-.32Z"/><path d="M49.11,35.91l-.57.64v.9h-.3v-2.9h.3v1.6L50,34.55h.35l-1,1.14,1.17,1.76h-.35Z"/><path d="M50.73,37.16l.16-.24a1.8,1.8,0,0,0,1,.3c.59,0,.85-.17.85-.57s-.34-.47-.85-.57-1-.21-1-.8.36-.78,1-.78a1.65,1.65,0,0,1,1,.26l-.16.25a1.51,1.51,0,0,0-.83-.23c-.51,0-.73.15-.73.49s.29.44.8.54,1.08.2,1.08.83-.37.85-1.14.85a2.06,2.06,0,0,1-1.19-.33"/><path d="M56.05,22.54c-4,0-4.19,1.83-4.19,4.41v6.34h.94V27c0-1.95-.07-3.51,3.25-3.51a6.8,6.8,0,0,1,1,.06v-.92a9.39,9.39,0,0,0-1,0"/><path d="M9.18,29.17V22.75h1v6.44c0,1.85,0,3.41,3.31,3.41S16.7,31,16.7,29.09V22.75h.95v6.34c0,2.58-.17,4.41-4.19,4.41s-4.28-1.83-4.28-4.33"/><path d="M27.73,26.87v6.42h-1V26.85c0-1.85,0-3.41-3.32-3.41S20.2,25,20.2,27v6.34h-.94V27c0-2.58.17-4.41,4.18-4.41s4.29,1.83,4.29,4.33"/><path d="M29.49,22.77h.92V33.29h-.92Z"/><path d="M37,28.69a2.22,2.22,0,0,0,2.51-2.51A2.23,2.23,0,0,0,37,23.71H33.08v5Zm-4.86-5.92H37c2.4,0,3.49,1.21,3.49,3.37S39.41,29.63,37,29.63h-3.9v3.66h-.93Z"/><path d="M42.51,27.28h7.06c-.1-2.1-.23-3.89-3.25-3.89s-3.69,1.6-3.81,3.89m-.94.71c0-3.1.87-5.49,4.77-5.49s4.17,2.75,4.15,5.66h-8c0,2.57.64,4.47,3.92,4.47a4.92,4.92,0,0,0,3.39-1.11l.53.71a6,6,0,0,1-3.92,1.27c-4.09,0-4.85-2.41-4.85-5.51"/><path d="M3.36,35.57c4,0,4.19-1.83,4.19-4.41V22.75h-1v8.41c0,1.95.08,3.51-3.24,3.51H3v.91h.36"/><path d="M54.88,32.09a.58.58,0,0,0,0,1.16.58.58,0,0,0,0-1.16m0,1.24a.66.66,0,0,1-.66-.66.67.67,0,0,1,.66-.67.66.66,0,0,1,.65.67.65.65,0,0,1-.65.66"/><path d="M54.94,32.66c.11,0,.17,0,.17-.14s-.06-.13-.17-.13h-.23v.27Zm0,.1h-.21v.29h-.1v-.76H55c.19,0,.26.08.26.23a.2.2,0,0,1-.18.23l.17.3h-.11Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/vendors_60/mysql.svg b/assets/sdc-icons/vendors_60/mysql.svg
new file mode 100644
index 0000000..0e2223d
--- /dev/null
+++ b/assets/sdc-icons/vendors_60/mysql.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>mysql_60px</title><path d="M7.92,39.45H9.37V33.66l2.26,5.05a1.23,1.23,0,0,0,1.34.82,1.22,1.22,0,0,0,1.33-.82l2.25-5.05v5.79H18V33.66a.88.88,0,0,0-.69-1c-1.1-.35-1.85,0-2.18.7l-2.21,5-2.14-5c-.32-.75-1.08-1-2.18-.7a.87.87,0,0,0-.69,1Z"/><path d="M19.22,34.73h1.45v3.2c0,.17.06.58.85.59h3.17v-3.8h1.45s0,5.18,0,5.2c0,1.28-1.57,1.56-2.3,1.58H19.25v-1h4.6c.94-.1.83-.57.82-.72V39.4H21.58c-1.44,0-2.35-.65-2.36-1.37C19.22,38,19.25,34.76,19.22,34.73Z"/><path d="M27.27,39.45h4.18a3.18,3.18,0,0,0,1.34-.28A1.34,1.34,0,0,0,33.73,38V36.89c0-.42-.35-.82-1-1.08a3.55,3.55,0,0,0-1.24-.22H29.68c-.58,0-.86-.18-.93-.57a.32.32,0,0,1,0-.13v-.67a.25.25,0,0,1,0-.12c.07-.3.22-.39.74-.44h4.29v-1H29.7a3.76,3.76,0,0,0-1.18.12c-.86.27-1.24.7-1.24,1.46v.85c0,.66.74,1.23,2,1.36l.41,0h1.67c.46,0,.66.12.8.29a.36.36,0,0,1,.11.26v.86a.48.48,0,0,1-.21.34,1,1,0,0,1-.62.21H27.27Z"/><path d="M42.8,37.75c0,1,.75,1.57,2.24,1.68l.42,0h3.79v-1H45.43c-.85,0-1.17-.22-1.17-.73V32.68H42.8Z"/><path d="M34.66,37.8V34.31q0-1.34,1.83-1.59a2.69,2.69,0,0,1,.4,0h2.76a2.69,2.69,0,0,1,.4,0c1.22.17,1.84.7,1.84,1.59V37.8A1.26,1.26,0,0,1,41,39.15l1.44,1.31H40.77L39.61,39.4l-1.17.08H36.89a3,3,0,0,1-.86-.13C35.11,39.1,34.66,38.61,34.66,37.8Zm1.57-.09a.77.77,0,0,0,0,.15c.09.41.47.64,1,.64h1.32L37.4,37.39h1.69l1.06,1a.7.7,0,0,0,.37-.47.61.61,0,0,0,0-.14V34.4a.71.71,0,0,0,0-.14c-.09-.37-.47-.59-1-.59h-2.2c-.64,0-1.06.28-1.06.73Z"/><path d="M50.53,31.05a5.14,5.14,0,0,0-2.16.31c-.16.07-.43.07-.46.28a2,2,0,0,1,.18.36,2.85,2.85,0,0,0,.59.7c.23.17.46.36.71.51.44.27.92.42,1.35.69.24.16.49.36.73.54s.2.23.36.28v0c-.08-.11-.1-.25-.18-.36L51.32,34a5.19,5.19,0,0,0-1.17-1.12c-.35-.26-1.13-.6-1.27-1l0,0a6.18,6.18,0,0,0,.77-.18c.38-.1.72-.08,1.12-.18l.53-.15v-.11c-.2-.2-.34-.48-.56-.66a16.62,16.62,0,0,0-1.83-1.39c-.36-.22-.79-.37-1.17-.56-.13-.07-.35-.1-.43-.21a4.79,4.79,0,0,1-.46-.87c-.32-.62-.63-1.3-.92-1.95a10.49,10.49,0,0,0-.55-1.28A11.3,11.3,0,0,0,41,20.1a5.38,5.38,0,0,0-1.42-.46l-.84-.05a4.49,4.49,0,0,1-.51-.38c-.64-.41-2.27-1.29-2.75-.13-.29.73.45,1.45.72,1.82a6.81,6.81,0,0,1,.56.84c.08.2.1.39.17.59a14.52,14.52,0,0,0,.59,1.52,4.82,4.82,0,0,0,.41.69c.09.13.25.19.27.38a3.66,3.66,0,0,0-.25.85,4.92,4.92,0,0,0,.33,3.77c.18.29.6.9,1.17.67s.39-.85.54-1.41c0-.13,0-.22.07-.31v0l.46.92A6.3,6.3,0,0,0,42,31c.26.2.47.55.81.67v0h0c-.07-.1-.17-.14-.26-.23a5.17,5.17,0,0,1-.58-.66,14.67,14.67,0,0,1-1.25-2.06c-.18-.34-.33-.72-.48-1.07-.06-.14-.06-.34-.18-.41a4.36,4.36,0,0,0-.53.77,6.44,6.44,0,0,0-.31,1.69l0,0c-.35-.08-.48-.45-.61-.77a4.93,4.93,0,0,1-.1-3c.07-.23.42-1,.28-1.2s-.29-.35-.41-.51a4.62,4.62,0,0,1-.41-.72c-.27-.62-.4-1.32-.68-2a5.61,5.61,0,0,0-.56-.87,5.09,5.09,0,0,1-.61-.88c-.06-.12-.14-.33,0-.46s.06-.12.15-.15.56,0,.71.1a5.72,5.72,0,0,1,1.1.57c.16.11.33.32.53.38h.23c.36.08.76,0,1.09.13a6.4,6.4,0,0,1,1.6.77,10,10,0,0,1,3.49,3.84c.13.26.19.5.3.77.24.55.53,1.11.77,1.65a7.42,7.42,0,0,0,.78,1.51c.18.23.84.36,1.15.49a7.05,7.05,0,0,1,.76.3c.39.24.76.52,1.12.77C50,30.54,50.51,30.82,50.53,31.05Z"/><path d="M39.17,21.28a2,2,0,0,0-.46,0v0h0a4.06,4.06,0,0,0,.36.46l.25.54,0,0a.62.62,0,0,0,.23-.56c-.06-.07-.07-.15-.13-.23S39.26,21.37,39.17,21.28Z"/><path d="M49.94,38.44a1.07,1.07,0,1,0,2.14,0,1.07,1.07,0,1,0-2.14,0Zm1.9,0a.83.83,0,1,1-1.66,0,.83.83,0,1,1,1.66,0Zm-.54.62h.24l-.35-.54a.32.32,0,0,0,.33-.34c0-.25-.16-.35-.46-.35h-.48v1.23h.2v-.53H51Zm-.52-.71V38H51c.13,0,.27,0,.27.17s-.13.18-.29.18Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/vendors_60/nokia_siemens.svg b/assets/sdc-icons/vendors_60/nokia_siemens.svg
new file mode 100644
index 0000000..bebcd99
--- /dev/null
+++ b/assets/sdc-icons/vendors_60/nokia_siemens.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>nokia siemens_60px</title><path d="M52,32.11a3.42,3.42,0,0,0,.49.22,2,2,0,0,0,.74.12,2.13,2.13,0,0,0,.39,0,.67.67,0,0,0,.24-.12.27.27,0,0,0,.13-.17.45.45,0,0,0,0-.2.48.48,0,0,0-.14-.35,1,1,0,0,0-.52-.21l-.43-.1a2.1,2.1,0,0,1-.42-.12,1.33,1.33,0,0,1-.34-.22.87.87,0,0,1-.22-.31,1.1,1.1,0,0,1,0-.87,1,1,0,0,1,.28-.35,1.18,1.18,0,0,1,.43-.23,1.71,1.71,0,0,1,.57-.08,2.34,2.34,0,0,1,.73.1,2,2,0,0,1,.53.24l-.19.48-.16-.07-.26-.09-.31-.07a2,2,0,0,0-.34,0,1,1,0,0,0-.59.14.46.46,0,0,0-.18.39.48.48,0,0,0,0,.18.33.33,0,0,0,.1.14.76.76,0,0,0,.2.12,2,2,0,0,0,.33.08l.45.09a2.54,2.54,0,0,1,.44.13,1.17,1.17,0,0,1,.34.22.81.81,0,0,1,.21.3,1.1,1.1,0,0,1,.08.43,1,1,0,0,1-.38.83,1.6,1.6,0,0,1-1.06.32,2.56,2.56,0,0,1-.87-.14,2.62,2.62,0,0,1-.58-.28Zm-3,.8h-.63v-5.6H49v3.54l1.54-1.67h.71l-1.52,1.65,1.77,2.08h-.83l-1.67-2Zm-1.26-3.16-.14,0a.68.68,0,0,0-.21,0,.93.93,0,0,0-.79.4,1.93,1.93,0,0,0-.3,1.16v1.65h-.63V29.18h.58l0,.63a1.23,1.23,0,0,1,.17-.25,1.7,1.7,0,0,1,.24-.22,1.57,1.57,0,0,1,.32-.15,1.35,1.35,0,0,1,.41-.06l.23,0,.15,0Zm-4.64,2.67A.89.89,0,0,0,43.9,32a1.79,1.79,0,0,0,.26-1,1.81,1.81,0,0,0-.07-.54,1.18,1.18,0,0,0-.19-.44,1,1,0,0,0-.33-.29,1,1,0,0,0-.46-.1.91.91,0,0,0-.79.38,1.73,1.73,0,0,0-.26,1,2.4,2.4,0,0,0,.06.56,1.62,1.62,0,0,0,.19.44,1,1,0,0,0,.33.28A1.12,1.12,0,0,0,43.11,32.42Zm0,.59a1.81,1.81,0,0,1-.72-.14,1.46,1.46,0,0,1-.54-.41,1.83,1.83,0,0,1-.33-.62,2.93,2.93,0,0,1,0-1.59,2.1,2.1,0,0,1,.33-.63,1.52,1.52,0,0,1,.54-.4,1.92,1.92,0,0,1,1.44,0,1.41,1.41,0,0,1,.53.4,1.61,1.61,0,0,1,.33.62,2.53,2.53,0,0,1,.12.8,2.66,2.66,0,0,1-.12.82,1.82,1.82,0,0,1-.32.62,1.42,1.42,0,0,1-.54.39,1.81,1.81,0,0,1-.72.14Zm-6.85-3.83h.67l.74,3,.68-2.9H39l.66,2.9.73-3H41l-1,3.73h-.67l-.63-2.77L38,32.91h-.67Zm-2.71,0h.71v-1l.63-.17v1.21H36v.56H34.89v2a1.15,1.15,0,0,0,0,.36.57.57,0,0,0,.15.21.46.46,0,0,0,.23.09,1.39,1.39,0,0,0,.3,0h.26l.14,0,0,.5-.26.05-.37,0a1.2,1.2,0,0,1-.89-.28,1.14,1.14,0,0,1-.29-.86V29.74h-.71ZM32.43,30.7a1.56,1.56,0,0,0-.24-.78.74.74,0,0,0-.65-.28.81.81,0,0,0-.68.28,1.75,1.75,0,0,0-.29.78Zm.43,2-.13.07-.25.09-.34.07a2,2,0,0,1-.44,0,1.65,1.65,0,0,1-1.33-.52A2.17,2.17,0,0,1,29.92,31a2.86,2.86,0,0,1,.11-.8,1.81,1.81,0,0,1,.31-.62,1.54,1.54,0,0,1,.51-.4,1.68,1.68,0,0,1,.7-.14,1.62,1.62,0,0,1,.64.12,1.13,1.13,0,0,1,.48.36,1.55,1.55,0,0,1,.31.63,3.51,3.51,0,0,1,.11.92v.11H30.56a1.48,1.48,0,0,0,.32.87,1.09,1.09,0,0,0,.87.33,2.09,2.09,0,0,0,.61-.07l.33-.1Zm-4.53-5.08H29v5.25h-.63L26,28.74v4.17h-.63V27.66H26l2.29,4.14ZM22,32.91l0-.42a1.09,1.09,0,0,1-.48.38,1.55,1.55,0,0,1-1.07.08,1.07,1.07,0,0,1-.38-.2,1.08,1.08,0,0,1-.28-.35,1.33,1.33,0,0,1-.11-.56,1.25,1.25,0,0,1,.35-.92,1.5,1.5,0,0,1,1.07-.34h.25l.27,0,.23,0,.13,0v-.23a.67.67,0,0,0-.23-.59,1,1,0,0,0-.65-.18,2,2,0,0,0-.65.09,2,2,0,0,0-.39.16l-.19-.47.18-.1a2,2,0,0,1,.28-.12,1.93,1.93,0,0,1,.38-.09,2.49,2.49,0,0,1,.49,0,1.51,1.51,0,0,1,1,.33,1.23,1.23,0,0,1,.37,1v2.53Zm0-1.74h-.09l-.21,0-.28,0h-.27a1.1,1.1,0,0,0-.39.06.68.68,0,0,0-.26.16.61.61,0,0,0-.15.23.92.92,0,0,0,0,.29.57.57,0,0,0,.2.48.88.88,0,0,0,.53.16,1.07,1.07,0,0,0,.35-.06,1.34,1.34,0,0,0,.31-.17,1,1,0,0,0,.22-.25.62.62,0,0,0,.08-.33Zm-3-3.2a.52.52,0,0,1-.11.33.38.38,0,0,1-.3.12.35.35,0,0,1-.3-.13.5.5,0,0,1-.11-.32.47.47,0,0,1,.11-.33.38.38,0,0,1,.3-.13.35.35,0,0,1,.3.13A.49.49,0,0,1,18.9,28Zm-.72,1.21h.63v3.73h-.63Zm-3.06,3.73h-.63v-5.6h.63v3.54l1.54-1.67h.71l-1.53,1.65,1.77,2.08h-.83l-1.66-2Zm-3.19-.49a.89.89,0,0,0,.79-.38A1.79,1.79,0,0,0,13,31a1.81,1.81,0,0,0-.07-.54,1.18,1.18,0,0,0-.19-.44,1.15,1.15,0,0,0-.33-.29,1,1,0,0,0-.46-.1.9.9,0,0,0-.79.38,1.75,1.75,0,0,0-.26,1,2.49,2.49,0,0,0,.06.57,1.69,1.69,0,0,0,.19.43.93.93,0,0,0,.8.38Zm0,.59a1.9,1.9,0,0,1-.73-.14,1.52,1.52,0,0,1-.53-.4,2,2,0,0,1-.33-.62,2.56,2.56,0,0,1-.11-.81,2.48,2.48,0,0,1,.11-.79,1.93,1.93,0,0,1,.33-.62,1.55,1.55,0,0,1,.54-.41,1.92,1.92,0,0,1,1.44,0,1.52,1.52,0,0,1,.53.4,1.61,1.61,0,0,1,.33.62,2.53,2.53,0,0,1,.12.8,2.66,2.66,0,0,1-.12.82,1.68,1.68,0,0,1-.33.62,1.38,1.38,0,0,1-.53.39,1.81,1.81,0,0,1-.72.14Zm-3.3-5.35h.63v5.25H8.63L6.3,28.74v4.17H5.67V27.66h.67L8.63,31.8Z"/></svg> \ No newline at end of file
diff --git a/assets/sdc-icons/vendors_60/oracle.svg b/assets/sdc-icons/vendors_60/oracle.svg
new file mode 100644
index 0000000..5ceaf0c
--- /dev/null
+++ b/assets/sdc-icons/vendors_60/oracle.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><title>Oracle_60px</title><g id="layer1"><g id="g16337"><path id="path16197" d="M25.86,30.83H29l-1.67-2.38-3.06,4.3H22.89l3.72-5.17a.94.94,0,0,1,.73-.33.9.9,0,0,1,.72.33l3.73,5.17H30.4l-.66-1H26.55Zm14.46,1V27.3H39.14v4.93a.49.49,0,0,0,.17.36.68.68,0,0,0,.44.16h5.39l.69-1ZM20.77,31a1.85,1.85,0,1,0,0-3.68H15.6v5.45h1.18V28.26h3.91a.89.89,0,1,1,0,1.77H17.36l3.53,2.73H22.6L20.23,31ZM8.32,32.75A2.92,2.92,0,0,1,5.25,30,2.92,2.92,0,0,1,8.32,27.3H11.9A2.92,2.92,0,0,1,15,30a2.92,2.92,0,0,1-3.07,2.72Zm3.5-1a1.78,1.78,0,1,0,0-3.53H8.4a1.78,1.78,0,1,0,0,3.53Zm22.44,1A2.92,2.92,0,0,1,31.19,30a2.92,2.92,0,0,1,3.07-2.73H38.5l-.69,1H34.34a1.78,1.78,0,1,0,0,3.53H38.6l-.69,1Zm14.46-1a2,2,0,0,1-1.92-1.28h5.06l.69-1H46.8a2,2,0,0,1,1.92-1.29h3.46l.71-1H48.64A2.92,2.92,0,0,0,45.56,30a2.92,2.92,0,0,0,3.08,2.72h3.64l.7-1H48.72"/><path id="path16199" d="M53.52,27.88a.54.54,0,0,1,1.08,0,.54.54,0,0,1-1.08,0Zm.54.62a.62.62,0,1,0-.69-.62A.66.66,0,0,0,54.06,28.5Zm-.07-1a.56.56,0,0,1,.21,0,.2.2,0,0,1,.15.19.18.18,0,0,1,0,.06.2.2,0,0,1-.1.12h0l.18.29h-.17L54.06,28H54v.26H53.8v-.69Zm.06.31c.05,0,.1,0,.13,0a.14.14,0,0,0,0-.06.09.09,0,0,0-.06-.08.3.3,0,0,0-.15,0h0v.2h.1"/></g></g></svg> \ No newline at end of file
diff --git a/components/accordion/accordion-basic.html b/components/accordion/accordion-basic.html
new file mode 100644
index 0000000..fe85473
--- /dev/null
+++ b/components/accordion/accordion-basic.html
@@ -0,0 +1,22 @@
+<div class="sdc-accordion ">
+ <div class="sdc-accordion-header">
+ <div class="svg-icon-wrapper bottom">
+ <svg class="svg-icon __chevronUp" version="1.1" id="chevron-up_icon" x="0px" y="0px" viewBox="0 0 10 6.3" style="enable-background:new 0 0 10 6.3;"
+ xml:space="preserve">
+ <g transform="translate(0,-952.36218)">
+ <path d="M10,958.2c0-0.1,0-0.2-0.1-0.2l-4.6-5.5c-0.1-0.2-0.4-0.2-0.5,0l0,0L0.1,958c-0.1,0.2-0.1,0.4,0,0.5s0.4,0.1,0.5,0l0,0
+ l4.3-5.2l4.3,5.2c0.1,0.2,0.4,0.2,0.5,0.1C10,958.5,10,958.3,10,958.2z">
+ </path>
+ </g>
+ </svg>
+ </div>
+ <div class="title">
+ Accordion Title
+ </div>
+ </div>
+ <div class="sdc-accordion-body ">
+ <div>
+ Accordion body
+ </div>
+ </div>
+</div> \ No newline at end of file
diff --git a/components/accordion/accordion.scss b/components/accordion/accordion.scss
new file mode 100644
index 0000000..ef65b9c
--- /dev/null
+++ b/components/accordion/accordion.scss
@@ -0,0 +1,50 @@
+.sdc-accordion {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 10px;
+ &.disabled {
+ opacity: .4;
+ pointer-events: none;
+ }
+ &:not(.disabled) {
+ .sdc-accordion-header {
+ cursor: pointer;
+ }
+ }
+ .sdc-accordion-header {
+ display: flex;
+ flex-direction: row;
+ .svg-icon-wrapper {
+ margin-right: 20px;
+ transition: transform 0.4s;
+ &.down {
+ transform: rotate(180deg);
+ }
+ .svg-icon {
+ fill: $gray;
+ width: 14px;
+ height: 8px;
+ }
+ }
+ &.arrow-right {
+ justify-content: space-between;
+ .svg-icon-wrapper{
+ order:1;
+ margin:0;
+ }
+ }
+ }
+ .sdc-accordion-body {
+ padding-left: 10px;
+ opacity: 0;
+ overflow-y: hidden;
+ max-height: 0;
+ padding-top: 0px;
+ transition: opacity 0.33s linear, padding-top 0.3s linear;
+ &.open {
+ padding-top: 5px;
+ opacity: 1;
+ max-height: 9999px;
+ }
+ }
+}
diff --git a/components/autocomplete/_autocomplete.scss b/components/autocomplete/_autocomplete.scss
new file mode 100644
index 0000000..7275156
--- /dev/null
+++ b/components/autocomplete/_autocomplete.scss
@@ -0,0 +1,43 @@
+.sdc-autocomplete-container{
+ position: relative;
+
+ &.results-shown{
+ .sdc-input__input{
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ }
+
+ ul.autocomplete-results {
+ opacity: 0;
+ border: solid 1px $blue;
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ border-top:none;
+ background-color: $white;
+ max-height: 200px;
+ box-shadow: 0 3px 7px -3px $dark-gray;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ position: absolute;
+ box-sizing: border-box;
+ width: 100%;
+ left: 0;
+ top: 100%;
+
+ li {
+ color:$text-black;
+ text-indent: 10px;
+ line-height: 30px;
+ cursor:pointer;
+ @include body-1;
+
+ &:hover {
+ background-color: $lighter-blue;
+ color: $blue;
+ }
+ }
+
+ }
+
+ }
diff --git a/components/autocomplete/autocomlete-close.html b/components/autocomplete/autocomlete-close.html
new file mode 100644
index 0000000..93946bb
--- /dev/null
+++ b/components/autocomplete/autocomlete-close.html
@@ -0,0 +1,22 @@
+<div class="sdc-autocomplete-container">
+ <div class="search-bar-container">
+ <div class="sdc-input">
+ <label class="sdc-input__label">search by color:</label>
+ <input class="sdc-input__input" type="text" name="undefined" placeholder="search text">
+ </div>
+ <span class="search-bar-button">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+ <defs>
+ <path id="search-a" d="M2,8.5 C2,4.9 4.9,2 8.5,2 C12.1,2 15,4.9 15,8.5 C15,10.3 14.3,11.9 13.1,13.1 C11.9,14.3 10.3,15 8.5,15 C4.9,15 2,12.1 2,8.5 M19.7,18.3 L15.2,13.8 C16.3,12.4 17,10.5 17,8.5 C17,3.8 13.2,0 8.5,0 C3.8,0 0,3.8 0,8.5 C0,13.2 3.8,17 8.5,17 C10.5,17 12.3,16.3 13.8,15.2 L18.3,19.7 C18.5,19.9 18.8,20 19,20 C19.2,20 19.5,19.9 19.7,19.7 C20.1,19.3 20.1,18.7 19.7,18.3"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd" transform="translate(2 2)">
+ <use fill="#000" xlink:href="#search-a"/>
+ </g>
+ </svg>
+ </span>
+ </div>
+ <div class="autocomplete-results" style="height: 0px; opacity: 0;">
+
+ </div>
+</div>
+
diff --git a/components/autocomplete/autocomplete-open.html b/components/autocomplete/autocomplete-open.html
new file mode 100644
index 0000000..01b1f40
--- /dev/null
+++ b/components/autocomplete/autocomplete-open.html
@@ -0,0 +1,24 @@
+<div class="sdc-autocomplete-container">
+ <div class="search-bar-container">
+ <div class="sdc-input">
+ <label class="sdc-input__label">search by color:</label>
+ <input class="sdc-input__input" type="text" name="undefined" placeholder="search text">
+ </div>
+ <span class="clear-search-x">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+ <defs>
+ <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd">
+ <use fill="#000" xlink:href="#close-a"/>
+ </g>
+ </svg>
+ </span>
+ </div>
+ <div class="autocomplete-results">
+ <div class="autocomplete-result-item">red</div>
+ <div class="autocomplete-result-item">yellow</div>
+ <div class="autocomplete-result-item">orange</div>
+ <div class="autocomplete-result-item">green</div>
+ </div>
+</div>
diff --git a/components/button/_button.scss b/components/button/_button.scss
new file mode 100644
index 0000000..329f80b
--- /dev/null
+++ b/components/button/_button.scss
@@ -0,0 +1,232 @@
+.sdc-button {
+ order:1;
+ @include box-sizing;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: row;
+ outline: none;
+ border-radius: 2px;
+ padding: 0 12px;
+ height: 36px;
+ line-height: 36px;
+ width: 120px;
+ min-width: 90px;
+ cursor: pointer;
+ text-align: center;
+ text-transform: uppercase;
+ @include body-1;
+
+ &:disabled {
+ cursor: default;
+ }
+
+ // Primary button
+ &.sdc-button__primary {
+ border: 1px solid transparent;
+ background-color: $blue;
+ color: $white;
+
+ &:not(:disabled) {
+ &:hover, &:active {
+ background-color: $light-blue;
+ }
+ &:focus:not(:active) {
+ border: 1px solid $white;
+ background-color: $light-blue;
+ box-shadow: 0px 0px 0px 1px $light-blue;
+ }
+ }
+
+ &:disabled{
+ background: $disabled-blue;
+ }
+ }
+
+ // Secondary button
+ &.sdc-button__secondary {
+ border: 1px solid $blue;
+ background-color: transparent;
+ color: $blue;
+
+ &:not(:disabled) {
+ &:hover, &:active {
+ background-color: $light-blue;
+ color:$white;
+ }
+ &:focus:not(:active) {
+ color: $light-blue;
+ box-shadow: inset 0px 0px 0px 0px $dark-blue, 0px 0px 0px 1px $blue;
+ &:hover {
+ color: $white;
+ }
+ }
+ }
+
+ &:disabled {
+ color: $disabled-blue;
+ border-color: $disabled-blue;
+ }
+ }
+
+ // Link button
+ &.sdc-button__link {
+ background-color: transparent;
+ color: $blue;
+ fill: $blue;
+ border: none;
+
+ &:not(:disabled) {
+ &:hover, &:active {
+ color: $light-blue;
+ }
+ &:focus:not(:active) {
+ border: 1px solid $dark-blue;
+ color: $light-blue;
+ }
+ }
+
+ &:disabled{
+ color: $disabled-blue;
+ }
+ }
+
+ // success
+ &.sdc-button__success {
+ border: 1px solid transparent;
+ background-color: $green;
+ color: $white;
+
+ &:not(:disabled) {
+ &:hover, &:active {
+ background-color: $light-green;
+ }
+ &:focus:not(:active) {
+ border: 1px solid $white;
+ background-color: $light-green;
+ box-shadow: 0px 0px 0px 1px $light-green;
+ }
+ }
+
+ &:disabled{
+ background: $disabled-green;
+ }
+ }
+
+ // error
+ &.sdc-button__error, &.sdc-button__alert {
+ border: 1px solid transparent;
+ background-color: $red;
+ color: $white;
+
+ &:not(:disabled) {
+ &:hover, &:active {
+ background-color: $light-red;
+ }
+ &:focus:not(:active) {
+ border: 1px solid $white;
+ background-color: $light-red;
+ box-shadow: 0px 0px 0px 1px $light-red;
+ }
+ }
+
+ &:disabled{
+ background: $disabled-red;
+ }
+ }
+
+ // warning
+ &.sdc-button__warning {
+ border: 1px solid transparent;
+ background-color: $yellow;
+ color: $white;
+
+ &:not(:disabled) {
+ &:hover, &:active {
+ background-color: $light-yellow;
+ }
+ &:focus:not(:active) {
+ border: 1px solid $white;
+ background-color: $light-yellow;
+ box-shadow: 0px 0px 0px 1px $light-yellow;
+ }
+ }
+
+ &:disabled{
+ background: $disabled-yellow;
+ }
+ }
+
+ // info
+ &.sdc-button__info {
+ border: 1px solid transparent;
+ background-color: $blue;
+ color: $white;
+
+ &:not(:disabled) {
+ &:hover, &:active {
+ background-color: $light-blue;
+ }
+ &:focus:not(:active) {
+ border: 1px solid $white;
+ background-color: $light-blue;
+ box-shadow: 0px 0px 0px 1px $light-blue;
+ }
+ }
+
+ &:disabled{
+ background: $disabled-blue;
+ }
+ }
+
+ /*** Sizes ***/
+ &.btn-large{
+ width: $btn-large;
+ }
+
+ &.btn-medium{
+ width: $btn-medium;
+ }
+
+ &.btn-small{
+ width: $btn-small;
+ }
+
+ &.btn-x-small{
+ width: $btn-extra-small;
+ }
+
+ &.btn-default{
+ width: $btn-default;
+ }
+
+ /*** Buttons with icons ***/
+ &.sdc-icon-right {
+ flex-direction: row-reverse;
+ .svg-icon {
+ margin-left: 15px;
+ }
+ }
+
+ &.sdc-icon-left {
+ flex-direction: row;
+ .svg-icon {
+ margin-right: 15px;
+ }
+ }
+
+ svg {
+ display: inline-block;
+ vertical-align: middle;
+ }
+}
+.sdc-button__wrapper {
+ display: inline-flex;
+}
+.sdc-button__spinner {
+ padding-top: 6px;
+ margin:0 2px;
+ &.left {
+ order:2;
+ }
+}
diff --git a/components/button/button-link-auto.html b/components/button/button-link-auto.html
new file mode 100644
index 0000000..22ac4c8
--- /dev/null
+++ b/components/button/button-link-auto.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__link btn-default">
+ Click Me
+</button>
diff --git a/components/button/button-link-disabled.html b/components/button/button-link-disabled.html
new file mode 100644
index 0000000..9267620
--- /dev/null
+++ b/components/button/button-link-disabled.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__link" disabled>
+ Click Me
+</button>
diff --git a/components/button/button-link-extra-small.html b/components/button/button-link-extra-small.html
new file mode 100644
index 0000000..245f885
--- /dev/null
+++ b/components/button/button-link-extra-small.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__link btn-x-small">
+ Click Me
+</button>
diff --git a/components/button/button-link-large.html b/components/button/button-link-large.html
new file mode 100644
index 0000000..6d1780c
--- /dev/null
+++ b/components/button/button-link-large.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__link btn-large">
+ Click Me
+</button>
diff --git a/components/button/button-link-medium.html b/components/button/button-link-medium.html
new file mode 100644
index 0000000..cb0293d
--- /dev/null
+++ b/components/button/button-link-medium.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__link btn-medium">
+ Click Me
+</button>
diff --git a/components/button/button-link-small.html b/components/button/button-link-small.html
new file mode 100644
index 0000000..5c195fa
--- /dev/null
+++ b/components/button/button-link-small.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__link btn-small">
+ Click Me
+</button>
diff --git a/components/button/button-link.html b/components/button/button-link.html
new file mode 100644
index 0000000..5c2070b
--- /dev/null
+++ b/components/button/button-link.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__link">
+ Click Me
+</button>
diff --git a/components/button/button-primary-auto.html b/components/button/button-primary-auto.html
new file mode 100644
index 0000000..125276f
--- /dev/null
+++ b/components/button/button-primary-auto.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__primary btn-default">
+ Click Me
+</button>
diff --git a/components/button/button-primary-disabled.html b/components/button/button-primary-disabled.html
new file mode 100644
index 0000000..b2ef842
--- /dev/null
+++ b/components/button/button-primary-disabled.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__primary" disabled>
+ Click Me
+</button>
diff --git a/components/button/button-primary-extra-small.html b/components/button/button-primary-extra-small.html
new file mode 100644
index 0000000..a3be965
--- /dev/null
+++ b/components/button/button-primary-extra-small.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__primary btn-x-small">
+ Click Me
+</button>
diff --git a/components/button/button-primary-large.html b/components/button/button-primary-large.html
new file mode 100644
index 0000000..c0a41b1
--- /dev/null
+++ b/components/button/button-primary-large.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__primary btn-large">
+ Click Me
+</button>
diff --git a/components/button/button-primary-medium.html b/components/button/button-primary-medium.html
new file mode 100644
index 0000000..9ddedc5
--- /dev/null
+++ b/components/button/button-primary-medium.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__primary btn-medium">
+ Click Me
+</button>
diff --git a/components/button/button-primary-small.html b/components/button/button-primary-small.html
new file mode 100644
index 0000000..847f753
--- /dev/null
+++ b/components/button/button-primary-small.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__primary btn-small">
+ Click Me
+</button>
diff --git a/components/button/button-primary.html b/components/button/button-primary.html
new file mode 100644
index 0000000..b1524bf
--- /dev/null
+++ b/components/button/button-primary.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__primary">
+ Click Me
+</button>
diff --git a/components/button/button-secondary-auto.html b/components/button/button-secondary-auto.html
new file mode 100644
index 0000000..a183ad8
--- /dev/null
+++ b/components/button/button-secondary-auto.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__secondary btn-default">
+ Click Me
+</button>
diff --git a/components/button/button-secondary-disabled.html b/components/button/button-secondary-disabled.html
new file mode 100644
index 0000000..4125328
--- /dev/null
+++ b/components/button/button-secondary-disabled.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__secondary" disabled>
+ Click Me
+</button>
diff --git a/components/button/button-secondary-extra-small.html b/components/button/button-secondary-extra-small.html
new file mode 100644
index 0000000..92c4784
--- /dev/null
+++ b/components/button/button-secondary-extra-small.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__secondary btn-x-small">
+ Click Me
+</button>
diff --git a/components/button/button-secondary-large.html b/components/button/button-secondary-large.html
new file mode 100644
index 0000000..958c151
--- /dev/null
+++ b/components/button/button-secondary-large.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__secondary btn-large">
+ Click Me
+</button>
diff --git a/components/button/button-secondary-medium.html b/components/button/button-secondary-medium.html
new file mode 100644
index 0000000..67f9741
--- /dev/null
+++ b/components/button/button-secondary-medium.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__secondary btn-medium">
+ Click Me
+</button>
diff --git a/components/button/button-secondary-small.html b/components/button/button-secondary-small.html
new file mode 100644
index 0000000..d9d8cd7
--- /dev/null
+++ b/components/button/button-secondary-small.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__secondary btn-small">
+ Click Me
+</button>
diff --git a/components/button/button-secondary.html b/components/button/button-secondary.html
new file mode 100644
index 0000000..64967cc
--- /dev/null
+++ b/components/button/button-secondary.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__secondary">
+ Click Me
+</button>
diff --git a/components/checkbox/_checkbox.scss b/components/checkbox/_checkbox.scss
new file mode 100644
index 0000000..c35c8e0
--- /dev/null
+++ b/components/checkbox/_checkbox.scss
@@ -0,0 +1,66 @@
+.sdc-checkbox {
+ line-height: 14px;
+
+ label {
+ position: relative;
+ display: block;
+ padding-left: 14px;
+ }
+
+ .sdc-checkbox__input {
+ appearance: none;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ position: absolute;
+ z-index: -1;
+ opacity: 0;
+
+ // Checkbox not checked
+ + .sdc-checkbox__label:before {
+ display: inline-block;
+ position: absolute;
+ left: 0;
+ top: 0;
+ content: "";
+ width: 14px;
+ height: 14px;
+ box-sizing: content-box;
+ background: no-repeat url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%20%3Cdefs%3E%20%3Cpath%20id%3D%22disabled-a%22%20d%3D%22M2%2C0%20L12%2C-2.22044605e-16%20C13.1045695%2C5.56104062e-16%2014%2C0.8954305%2014%2C2%20L14%2C12%20C14%2C13.1045695%2013.1045695%2C14%2012%2C14%20L2%2C14%20C0.8954305%2C14%208.94280938e-16%2C13.1045695%20-2.22044605e-16%2C12%20L-2.22044605e-16%2C2%20C-3.57315355e-16%2C0.8954305%200.8954305%2C-1.91384796e-17%202%2C-2.22044605e-16%20Z%22%2F%3E%20%3C%2Fdefs%3E%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%3Cuse%20fill%3D%22%23FFFFFF%22%20xlink%3Ahref%3D%22%23disabled-a%22%2F%3E%20%3Cpath%20stroke%3D%22%23D2D2D2%22%20d%3D%22M2%2C0.5%20C1.17157288%2C0.5%200.5%2C1.17157288%200.5%2C2%20L0.5%2C12%20C0.5%2C12.8284271%201.17157288%2C13.5%202%2C13.5%20L12%2C13.5%20C12.8284271%2C13.5%2013.5%2C12.8284271%2013.5%2C12%20L13.5%2C2%20C13.5%2C1.17157288%2012.8284271%2C0.5%2012%2C0.5%20L2%2C0.5%20Z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E');
+ }
+
+ // Checkbox disabled and not checked
+ &:disabled {
+ + .sdc-checkbox__label {
+ color: $gray;
+ &:before {
+ background: no-repeat url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%20%3Cdefs%3E%20%3Cpath%20id%3D%22disabled-a%22%20d%3D%22M2%2C0%20L12%2C-2.22044605e-16%20C13.1045695%2C5.56104062e-16%2014%2C0.8954305%2014%2C2%20L14%2C12%20C14%2C13.1045695%2013.1045695%2C14%2012%2C14%20L2%2C14%20C0.8954305%2C14%208.94280938e-16%2C13.1045695%20-2.22044605e-16%2C12%20L-2.22044605e-16%2C2%20C-3.57315355e-16%2C0.8954305%200.8954305%2C-1.91384796e-17%202%2C-2.22044605e-16%20Z%22%2F%3E%20%3C%2Fdefs%3E%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%3Cuse%20fill%3D%22%23F2F2F2%22%20xlink%3Ahref%3D%22%23disabled-a%22%2F%3E%20%3Cpath%20stroke%3D%22%23D2D2D2%22%20d%3D%22M2%2C0.5%20C1.17157288%2C0.5%200.5%2C1.17157288%200.5%2C2%20L0.5%2C12%20C0.5%2C12.8284271%201.17157288%2C13.5%202%2C13.5%20L12%2C13.5%20C12.8284271%2C13.5%2013.5%2C12.8284271%2013.5%2C12%20L13.5%2C2%20C13.5%2C1.17157288%2012.8284271%2C0.5%2012%2C0.5%20L2%2C0.5%20Z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E');
+ }
+ }
+ }
+
+ &:checked {
+ // Checkbox checked
+ + .sdc-checkbox__label:before {
+ background: no-repeat url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22%23009fdb%22%3E%3Cpath%20d%3D%22M2%2C0%20L12%2C-2.22044605e-16%20C13.1045695%2C5.56104062e-16%2014%2C0.8954305%2014%2C2%20L14%2C12%20C14%2C13.1045695%2013.1045695%2C14%2012%2C14%20L2%2C14%20C0.8954305%2C14%208.94280938e-16%2C13.1045695%20-2.22044605e-16%2C12%20L-2.22044605e-16%2C2%20C-3.57315355e-16%2C0.8954305%200.8954305%2C-1.91384796e-17%202%2C-2.22044605e-16%20Z%20M3.85355339%2C7.54977605%20C3.65829124%2C7.35451391%203.34170876%2C7.35451391%203.14644661%2C7.54977605%20C2.95118446%2C7.7450382%202.95118446%2C8.06162069%203.14644661%2C8.25688283%20L5.71469032%2C10.8251265%20C5.93114093%2C11.0415771%206.28952386%2C11.0144698%206.47095446%2C10.7679244%20L10.8653572%2C4.79638422%20C11.0290275%2C4.57397322%2010.9814087%2C4.26099251%2010.7589977%2C4.09732224%20C10.5365867%2C3.93365198%2010.223606%2C3.98127076%2010.0599357%2C4.20368177%20L6.01038326%2C9.70660592%20L3.85355339%2C7.54977605%20Z%22%2F%3E%3C%2Fsvg%3E');
+ }
+
+ // Checkbox disabled and checked
+ &:disabled {
+ + .sdc-checkbox__label:before {
+ background: no-repeat url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cpath%20fill%3D%22%23d2d2d2%22%20fill-rule%3D%22evenodd%22%20d%3D%22M2%2C0%20L12%2C-2.22044605e-16%20C13.1045695%2C5.56104062e-16%2014%2C0.8954305%2014%2C2%20L14%2C12%20C14%2C13.1045695%2013.1045695%2C14%2012%2C14%20L2%2C14%20C0.8954305%2C14%208.94280938e-16%2C13.1045695%20-2.22044605e-16%2C12%20L-2.22044605e-16%2C2%20C-3.57315355e-16%2C0.8954305%200.8954305%2C-1.91384796e-17%202%2C-2.22044605e-16%20Z%20M3.85355339%2C7.54977605%20C3.65829124%2C7.35451391%203.34170876%2C7.35451391%203.14644661%2C7.54977605%20C2.95118446%2C7.7450382%202.95118446%2C8.06162069%203.14644661%2C8.25688283%20L5.71469032%2C10.8251265%20C5.93114093%2C11.0415771%206.28952386%2C11.0144698%206.47095446%2C10.7679244%20L10.8653572%2C4.79638422%20C11.0290275%2C4.57397322%2010.9814087%2C4.26099251%2010.7589977%2C4.09732224%20C10.5365867%2C3.93365198%2010.223606%2C3.98127076%2010.0599357%2C4.20368177%20L6.01038326%2C9.70660592%20L3.85355339%2C7.54977605%20Z%22%2F%3E%3C%2Fsvg%3E');
+ }
+ }
+ }
+
+ &:not(:disabled) {
+ + .sdc-checkbox__label {
+ cursor: pointer;
+ }
+ }
+ }
+
+ .sdc-checkbox__label:not(:empty) {
+ padding-left: 14px;
+ @include body-1;
+ }
+}
diff --git a/components/checkbox/checkbox-checked.html b/components/checkbox/checkbox-checked.html
new file mode 100644
index 0000000..de0c0d8
--- /dev/null
+++ b/components/checkbox/checkbox-checked.html
@@ -0,0 +1,6 @@
+<div class="sdc-checkbox">
+ <label>
+ <input type="checkbox" class="sdc-checkbox__input" checked>
+ <span class="sdc-checkbox__label">This is the checkbox label</span>
+ </label>
+</div>
diff --git a/components/checkbox/checkbox-disabled-checked.html b/components/checkbox/checkbox-disabled-checked.html
new file mode 100644
index 0000000..53e77ec
--- /dev/null
+++ b/components/checkbox/checkbox-disabled-checked.html
@@ -0,0 +1,6 @@
+<div class="sdc-checkbox">
+ <label>
+ <input type="checkbox" class="sdc-checkbox__input" checked disabled>
+ <span class="sdc-checkbox__label">This is the checkbox label</span>
+ </label>
+</div>
diff --git a/components/checkbox/checkbox-disabled.html b/components/checkbox/checkbox-disabled.html
new file mode 100644
index 0000000..2425218
--- /dev/null
+++ b/components/checkbox/checkbox-disabled.html
@@ -0,0 +1,6 @@
+<div class="sdc-checkbox">
+ <label>
+ <input type="checkbox" class="sdc-checkbox__input" disabled>
+ <span class="sdc-checkbox__label">This is the checkbox label</span>
+ </label>
+</div>
diff --git a/components/checkbox/checkbox-unchecked.html b/components/checkbox/checkbox-unchecked.html
new file mode 100644
index 0000000..9cc3d1c
--- /dev/null
+++ b/components/checkbox/checkbox-unchecked.html
@@ -0,0 +1,6 @@
+<div class="sdc-checkbox">
+ <label>
+ <input type="checkbox" class="sdc-checkbox__input">
+ <span class="sdc-checkbox__label">This is the checkbox label</span>
+ </label>
+</div>
diff --git a/components/checklist/_checklist.scss b/components/checklist/_checklist.scss
new file mode 100644
index 0000000..248993d
--- /dev/null
+++ b/components/checklist/_checklist.scss
@@ -0,0 +1,21 @@
+$space-lines: 14px;
+$padding-for-sub-level: 28px;
+.checkbox-item{
+ margin: $space-lines 0;
+ .sdc-checkbox__label{
+ @include body-2-emphasis;
+ }
+ .semi-checked{
+ .sdc-checkbox__label:before{
+ background: no-repeat url('data:image/svg+xml;utf8,<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M2,0 L12,-2.22044605e-16 C13.1045695,5.56104062e-16 14,0.8954305 14,2 L14,12 C14,13.1045695 13.1045695,14 12,14 L2,14 C0.8954305,14 8.94280938e-16,13.1045695 -2.22044605e-16,12 L-2.22044605e-16,2 C-3.57315355e-16,0.8954305 0.8954305,-1.91384796e-17 2,-2.22044605e-16 Z" id="path-1"></path><rect id="path-2" x="3" y="6" width="8" height="2" rx="1"></rect></defs><g id="Symbols-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="icons/checkbox/semiselected"><g id="form/checkbox_checked-copy-3"><g id="Rectangle-Copy-2"><use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use><path stroke="#D2D2D2" stroke-width="1" d="M2,0.5 C1.17157288,0.5 0.5,1.17157288 0.5,2 L0.5,12 C0.5,12.8284271 1.17157288,13.5 2,13.5 L12,13.5 C12.8284271,13.5 13.5,12.8284271 13.5,12 L13.5,2 C13.5,1.17157288 12.8284271,0.5 12,0.5 L2,0.5 Z"></path></g></g><mask id="mask-3" fill="white"><use xlink:href="#path-2"></use></mask><use id="Mask" fill="#009FDB" xlink:href="#path-2"></use></g></g></svg>');
+ }
+ }
+}
+.checkbox-sublist{
+ padding-left: $padding-for-sub-level;
+ .checkbox-item{
+ .sdc-checkbox__label{
+ @include body-2;
+ }
+ }
+}
diff --git a/components/checklist/checklist-with-checked-items.html b/components/checklist/checklist-with-checked-items.html
new file mode 100644
index 0000000..e1adbd7
--- /dev/null
+++ b/components/checklist/checklist-with-checked-items.html
@@ -0,0 +1,24 @@
+<div>
+ <div class="checkbox-item">
+ <div class="sdc-checkbox">
+ <input class="sdc-checkbox__input" type="checkbox" checked>
+ <label class="sdc-checkbox__label">apple</label>
+ </div>
+ </div>
+</div>
+<div>
+ <div class="checkbox-item">
+ <div class="sdc-checkbox">
+ <input class="sdc-checkbox__input" type="checkbox">
+ <label class="sdc-checkbox__label">banana</label>
+ </div>
+ </div>
+</div>
+<div>
+ <div class="checkbox-item">
+ <div class="sdc-checkbox">
+ <input class="sdc-checkbox__input" type="checkbox" checked>
+ <label class="sdc-checkbox__label">orange</label>
+ </div>
+ </div>
+</div>
diff --git a/components/checklist/checklist-with-disabled-items.html b/components/checklist/checklist-with-disabled-items.html
new file mode 100644
index 0000000..f001ec1
--- /dev/null
+++ b/components/checklist/checklist-with-disabled-items.html
@@ -0,0 +1,25 @@
+<div>
+ <div class="checkbox-item">
+ <div class="sdc-checkbox">
+ <input class="sdc-checkbox__input" type="checkbox" disabled>
+ <label class="sdc-checkbox__label">apple</label>
+ </div>
+ </div>
+</div>
+<div>
+ <div class="checkbox-item">
+ <div class="sdc-checkbox">
+ <input class="sdc-checkbox__input" type="checkbox" disabled>
+ <label class="sdc-checkbox__label">banana</label>
+ </div>
+ </div>
+</div>
+<div>
+ <div class="checkbox-item">
+ <div class="sdc-checkbox">
+ <input class="sdc-checkbox__input" type="checkbox">
+ <label class="sdc-checkbox__label">orange</label>
+ </div>
+ </div>
+</div>
+
diff --git a/components/checklist/multi-levels-checklist.html b/components/checklist/multi-levels-checklist.html
new file mode 100644
index 0000000..9aa136e
--- /dev/null
+++ b/components/checklist/multi-levels-checklist.html
@@ -0,0 +1,50 @@
+<div>
+ <div class="checkbox-item">
+ <div class="sdc-checkbox">
+ <input class="sdc-checkbox__input" type="checkbox">
+ <label class="sdc-checkbox__label">apple</label>
+ </div>
+ </div>
+ <div class="checkbox-sublist">
+ <div>
+ <div class="checkbox-item">
+ <div class="sdc-checkbox">
+ <input class="sdc-checkbox__input" type="checkbox">
+ <label class="sdc-checkbox__label">red</label>
+ </div>
+ </div>
+ </div>
+ <div>
+ <div class="checkbox-item">
+ <div class="sdc-checkbox">
+ <input class="sdc-checkbox__input" type="checkbox">
+ <label class="sdc-checkbox__label">green</label>
+ </div>
+ </div>
+ </div>
+ <div>
+ <div class="checkbox-item">
+ <div class="sdc-checkbox">
+ <input class="sdc-checkbox__input" type="checkbox">
+ <label class="sdc-checkbox__label">yellow</label>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+<div>
+ <div class="checkbox-item">
+ <div class="sdc-checkbox">
+ <input class="sdc-checkbox__input" type="checkbox">
+ <label class="sdc-checkbox__label">banana</label>
+ </div>
+ </div>
+</div>
+<div>
+ <div class="checkbox-item">
+ <div class="sdc-checkbox">
+ <input class="sdc-checkbox__input" type="checkbox">
+ <label class="sdc-checkbox__label">orange</label>
+ </div>
+ </div>
+</div>
diff --git a/components/checklist/simple-checklist.html b/components/checklist/simple-checklist.html
new file mode 100644
index 0000000..1fe55da
--- /dev/null
+++ b/components/checklist/simple-checklist.html
@@ -0,0 +1,24 @@
+<div>
+ <div class="checkbox-item">
+ <div class="sdc-checkbox">
+ <input class="sdc-checkbox__input" type="checkbox">
+ <label class="sdc-checkbox__label">apple</label>
+ </div>
+ </div>
+</div>
+<div>
+ <div class="checkbox-item">
+ <div class="sdc-checkbox">
+ <input class="sdc-checkbox__input" type="checkbox">
+ <label class="sdc-checkbox__label">banana</label>
+ </div>
+ </div>
+</div>
+<div>
+ <div class="checkbox-item">
+ <div class="sdc-checkbox">
+ <input class="sdc-checkbox__input" type="checkbox">
+ <label class="sdc-checkbox__label">orange</label>
+ </div>
+ </div>
+</div>
diff --git a/components/dropdown/_dropdown.scss b/components/dropdown/_dropdown.scss
new file mode 100644
index 0000000..908bbaa
--- /dev/null
+++ b/components/dropdown/_dropdown.scss
@@ -0,0 +1,346 @@
+.sdc-dropdown {
+ @include body-1;
+ position: relative;
+ display: block;
+
+ .sdc-dropdown__error--block {
+ display: none;
+ }
+
+ &.headless {
+ display: none;
+ }
+
+ /*************************************
+ SDC DropDown styles
+ *************************************/
+ .sdc-dropdown__component-container {
+ position: relative;
+ height: 40px;
+
+ .sdc-dropdown__header {
+ background: $white;
+ text-align: left;
+ position: relative;
+ color: $dark-gray;
+ @include base-font-regular;
+ font-size: 14px;
+ text-indent: 6px;
+ border: solid 1px $light-gray;
+ width: 100%;
+ height: 40px;
+ line-height: 36px;
+ box-sizing: border-box;
+ border-radius: 2px;
+
+ &.placeholder {
+ @include base-font-italic;
+ color: $gray;
+ }
+
+ &.disabled {
+ border: solid 1px $light-gray;
+ background-color: $light-silver;
+ color: $light-gray;
+ cursor: default;
+
+ &:focus {
+ border: solid 1px $light-gray;
+ outline: none;
+ .svg-icon>svg {
+ fill: $light-gray;
+ }
+ }
+ .svg-icon>svg {
+ fill: $light-gray;
+ }
+ }
+
+ &:focus {
+ border: solid 1px $light-blue;
+ outline: none;
+ .svg-icon>svg {
+ fill: $light-blue;
+ }
+ }
+
+ .sdc-dropdown-handle {
+ float: right;
+ .svg-icon>svg {
+ fill: $dark-gray;
+ }
+ }
+
+ svg-icon {
+ margin: 10px 6px;
+ float: right;
+ }
+
+ }
+
+ }
+
+ &.open-bottom {
+ .sdc-dropdown__header {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+
+ border: 1px solid $light-blue;
+ box-sizing: border-box;
+ .svg-icon>svg {
+ fill: $light-blue;
+ }
+
+ }
+ }
+
+ &.open-top {
+ .sdc-dropdown__header {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+ }
+
+ .sdc-dropdown__options-list {
+ position: relative;
+ opacity: 0;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ max-height: 0;
+ overflow-y: auto;
+ box-sizing: border-box;
+ border: 1px solid $light-blue;
+ background-color: white;
+ box-shadow: 0 3px 7px -3px $dark-gray;
+ z-index: 999;
+ &.sdc-dropdown__options-wrapper--top {
+ bottom: 40px;
+ border-top: 1px solid $light-blue;
+ }
+ &.sdc-dropdown__options-list--headless {
+ border-top: 1px solid $light-blue;
+ }
+ .sdc-dropdown__option {
+ @include base-font-regular;
+ font-size: 14px;
+ text-indent: 10px;
+ padding: 10px;
+ background: transparent;
+ cursor: pointer;
+ height: 40px;
+ box-sizing: border-box;
+ &.sdc-dropdown__option--hr {
+ height: 1px;
+ overflow: hidden;
+ border-top: 1px solid $silver;
+ padding: 0;
+ margin: 10px 20px;
+ }
+ &.sdc-dropdown__option--group {
+ text-indent: 30px;
+ }
+ &:hover {
+ background-color: $light-silver;
+ //@include base-font-semibold;
+ }
+ &.selected {
+ background-color: $lighter-blue;
+ color: $blue;
+ @include base-font-semibold;
+ }
+ &.sdc-dropdown__option--header {
+ @include base-font-semibold;
+ color: $text-black;
+ cursor: default;
+ &.sdc-dropdown__option--group {
+ text-indent: 10px;
+ }
+ &:hover {
+ background-color: transparent;
+ }
+ }
+ &.sdc-dropdown__option--disabled {
+ color: $gray;
+ cursor: default;
+ &:hover {
+ background-color: transparent;
+ }
+ &::after {
+ color: $gray;
+ }
+ &:focus {
+ border: solid 1px $light-gray;
+ outline: none;
+ }
+ }
+ }
+ }
+ .sdc-dropdown__select {
+ @include base-font-regular;
+ text-indent: 6px;
+ border: solid 1px $light-gray;
+ width: 100%;
+ &.disabled {
+ opacity: 0.7;
+ }
+ option {
+ padding: 3px;
+ }
+ }
+ .sdc-dropdown__label {
+ margin-bottom: 5px;
+ display: block;
+ @include body-3-emphasis;
+ color: $text-black;
+ &.required::before {
+ content: '*';
+ color: $red;
+ margin: 0 4px 0 0;
+ }
+ }
+
+ /*************************************
+ SDC Auto-DropDown styles
+ *************************************/
+ &.open-bottom {
+ .sdc-dropdown-auto__wrapper {
+ border: 1px solid $light-blue;
+ box-sizing: border-box;
+ .svg-icon>svg {
+ fill: $light-blue;
+ }
+ }
+ }
+
+ .sdc-dropdown-auto__wrapper {
+ display: flex;
+ border: solid 1px $light-gray;
+ border-radius: 2px;
+
+ .sdc-dropdown__header {
+ border: none;
+ color: $gray;
+
+ &:focus {
+ border: none;
+ }
+ }
+
+ svg-icon {
+ margin: 12px 10px;
+ float: right;
+ }
+ }
+
+ /*************************************
+ SDC Error styles
+ *************************************/
+ &.sdc-dropdown__error {
+ .sdc-dropdown__header {
+ border: solid 1px $red;
+ @include font-error;
+ &::after {
+ @include font-error;
+ }
+ &:focus {
+ border: solid 1px $red;
+ .sdc-dropdown-handle {
+ use {
+ fill: $red;
+ }
+ }
+ }
+ .sdc-dropdown-handle {
+ use {
+ fill: $red;
+ }
+ }
+ }
+ .sdc-dropdown__error--block {
+ display: block;
+ @include font-error;
+ margin: 4px 0;
+ @include body-3;
+ }
+ .sdc-dropdown__options-wrapper--frame {
+ .sdc-dropdown__options-list {
+ border: 1px solid $red;
+ border-top: none;
+ }
+ &.sdc-dropdown__options-wrapper--top {
+ .sdc-dropdown__options-list {
+ border-top: 1px solid $red;
+ }
+ }
+ }
+ .svg-icon.__exclamationTriangleFull {
+ width: 12px;
+ height: 10px;
+ margin-right: 6px;
+ }
+ }
+}
+
+.sdc-dropdown__error--icon {
+ fill: $red;
+}
+
+/********************************************************/
+
+/* Animation */
+
+/********************************************************/
+
+@include keyframes-expand-animation('top-to-bottom-exp', 244px);
+@include keyframes-collapse-animation('top-to-bottom', 244px);
+@include keyframes-expand-animation('bottom-to-top-exp', 244px);
+@include keyframes-collapse-animation('bottom-to-top', 244px);
+.sdc-dropdown__options-wrapper--frame {
+ overflow: hidden;
+ position: absolute;
+ top: auto;
+ width: 100%;
+ &.sdc-dropdown__options-wrapper--top {
+ bottom: 40px;
+ top: auto;
+ padding: 10px 0 0 0;
+ /* Expend animation from bottom to top */
+ .sdc-dropdown__options-list {
+ border-top: 1px solid $light-blue;
+ box-shadow: 0 0 7px -1px $dark-gray;
+ &.sdc-dropdown__options-list--animation-init {
+ border-bottom: none;
+ padding: 0;
+ animation: bottom-to-top .0s forwards;
+ }
+ }
+ &.sdc-dropdown__options-wrapper--uncollapsed {
+ .sdc-dropdown__options-list {
+ animation: bottom-to-top-exp .0s forwards;
+ }
+ }
+ }
+}
+
+/**
+Fold animation from top to bottom
+ */
+
+.sdc-dropdown {
+ .sdc-dropdown__options-list.sdc-dropdown__options-list--animation-init {
+ animation: top-to-bottom .0s forwards;
+ }
+}
+
+/**
+Expend animation from top to bottom
+ */
+
+.sdc-dropdown {
+ .sdc-dropdown__options-wrapper--uncollapsed {
+ .sdc-dropdown__options-list.sdc-dropdown__options-list--animation-init {
+ animation: top-to-bottom-exp .0s forwards;
+ }
+ }
+}
diff --git a/components/dropdown/dropdown-disabled.html b/components/dropdown/dropdown-disabled.html
new file mode 100644
index 0000000..9e0bd86
--- /dev/null
+++ b/components/dropdown/dropdown-disabled.html
@@ -0,0 +1,11 @@
+<div class="sdc-dropdown">
+ <label class="sdc-dropdown__label">DropDown example</label>
+ <button class="sdc-dropdown__header disabled">Please choose option</button>
+ <!--[This part won't be created on disabled drop-down]-->
+ <ul class="sdc-dropdown__options-list">
+ <li class="sdc-dropdown__option selected">First Option</li>
+ <li class="sdc-dropdown__option">Second Option</li>
+ <li class="sdc-dropdown__option">Third Option</li>
+ </ul>
+ <!--[...]-->
+</div>
diff --git a/components/dropdown/dropdown-groups.html b/components/dropdown/dropdown-groups.html
new file mode 100644
index 0000000..3e32f16
--- /dev/null
+++ b/components/dropdown/dropdown-groups.html
@@ -0,0 +1,10 @@
+<div class="sdc-dropdown">
+ <label class="sdc-dropdown__label">DropDown example</label>
+ <button class="sdc-dropdown__header">Please choose option</button>
+ <ul class="sdc-dropdown__options-list">
+ <li class="sdc-dropdown__option sdc-dropdown__option--group sdc-dropdown__option--header">Group 1 title</li>
+ <li class="sdc-dropdown__option sdc-dropdown__option--group selected">First Option</li>
+ <li class="sdc-dropdown__option sdc-dropdown__option--group">Second Option</li>
+ <li class="sdc-dropdown__option sdc-dropdown__option--group">Third Option</li>
+ </ul>
+</div>
diff --git a/components/dropdown/dropdown-requiered.html b/components/dropdown/dropdown-requiered.html
new file mode 100644
index 0000000..4fd555d
--- /dev/null
+++ b/components/dropdown/dropdown-requiered.html
@@ -0,0 +1,18 @@
+<div class="sdc-dropdown">
+ <label class="sdc-dropdown__label">DropDown example</label>
+ <button class="sdc-dropdown__header">Please choose option</button>
+ <ul class="sdc-dropdown__options-list">
+ <li class="sdc-dropdown__option selected">First Option</li>
+ <li class="sdc-dropdown__option">Second Option</li>
+ <li class="sdc-dropdown__option">Third Option</li>
+ </ul>
+ <div class="sdc-dropdown__error">
+ <!--[Will be replaced by the correct error icon]-->
+ <svg class="svg-icon __exclamationTriangleFull" version="1.1" id="exclamation-triangle-full_icon" x="0px" y="0px" viewBox="0 0 19.9 18" xml:space="preserve"><path class="sdc-dropdown__error--icon" d="M19.6,14.3L12,1.3c-0.3-0.6-0.8-1-1.4-1.2C10-0.1,9.3,0,8.7,0.3c-0.4,0.3-0.6,0.6-0.9,1l-7.6,13c-0.3,0.5-0.4,1.2-0.2,1.8
+ c0.2,0.6,0.6,1.1,1.1,1.4C1.6,17.8,1.9,18,2.4,18h15.1c1.3,0,2.4-1.1,2.4-2.4C19.9,15.1,19.8,14.7,19.6,14.3z M10.5,14.2
+ c0,0.3-0.2,0.5-0.5,0.5s-0.5-0.2-0.5-0.5l0-1c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5L10.5,14.2z M10.5,9.9c0,0.3-0.2,0.5-0.5,0.5
+ s-0.5-0.2-0.5-0.5l0-5.2c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5L10.5,9.9z"></path></svg>
+ Error message!
+ </div>
+</div>
+
diff --git a/components/dropdown/dropdown.html b/components/dropdown/dropdown.html
new file mode 100644
index 0000000..440f70b
--- /dev/null
+++ b/components/dropdown/dropdown.html
@@ -0,0 +1,9 @@
+<div class="sdc-dropdown">
+ <label class="sdc-dropdown__label">DropDown example</label>
+ <button class="sdc-dropdown__header">Please choose option</button>
+ <ul class="sdc-dropdown__options-list">
+ <li class="sdc-dropdown__option selected">First Option</li>
+ <li class="sdc-dropdown__option">Second Option</li>
+ <li class="sdc-dropdown__option">Third Option</li>
+ </ul>
+</div>
diff --git a/components/filter-bar/_filter-bar.scss b/components/filter-bar/_filter-bar.scss
new file mode 100644
index 0000000..f48a3df
--- /dev/null
+++ b/components/filter-bar/_filter-bar.scss
@@ -0,0 +1,51 @@
+$inputHeight: 38px;
+
+.sdc-filter-bar {
+ .sdc-input {
+ margin: 0;
+ .sdc-input__input{
+ padding-right: 40px;
+ }
+ }
+
+ .filter-button{
+ position: relative;
+ float: right;
+ bottom: $inputHeight;
+ height: $inputHeight;
+ right: 11px;
+ svg{
+ position: relative;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+ }
+
+ .magnify-button {
+ svg{
+ height: 20px;
+ width: 20px;
+ path{
+ fill: $dark-gray;
+ }
+ }
+ }
+
+ .clear-search-x {
+ cursor: pointer;
+ svg{
+ height: 14px;
+ width: 14px;
+ path{
+ fill: $dark-gray;
+ }
+ &:hover{
+ path{
+ fill: $blue;
+ }
+ }
+ }
+ }
+}
+
+
diff --git a/components/filter-bar/filter-bar-with-text.html b/components/filter-bar/filter-bar-with-text.html
new file mode 100644
index 0000000..de7a225
--- /dev/null
+++ b/components/filter-bar/filter-bar-with-text.html
@@ -0,0 +1,16 @@
+<div class="sdc-filter-bar">
+ <div class="search-bar-container">
+ <label class="sdc-input__label">search box example:</label>
+ <input class="sdc-input__input" type="text" name="undefined" placeholder="search text">
+ <span class="filter-button clear-search-x">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+ <defs>
+ <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd">
+ <use fill="#000" xlink:href="#close-a"/>
+ </g>
+ </svg>
+ </span>
+ </div>
+</div>
diff --git a/components/filter-bar/filter-bar.html b/components/filter-bar/filter-bar.html
new file mode 100644
index 0000000..90f580d
--- /dev/null
+++ b/components/filter-bar/filter-bar.html
@@ -0,0 +1,17 @@
+<div class="sdc-filter-bar">
+ <div class="search-bar-container">
+ <label class="sdc-input__label">search box example:</label>
+ <input class="sdc-input__input" type="text" name="undefined" placeholder="search text">
+ <span class="filter-button magnify-button">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+ <defs>
+ <path id="search-a" d="M2,8.5 C2,4.9 4.9,2 8.5,2 C12.1,2 15,4.9 15,8.5 C15,10.3 14.3,11.9 13.1,13.1 C11.9,14.3 10.3,15 8.5,15 C4.9,15 2,12.1 2,8.5 M19.7,18.3 L15.2,13.8 C16.3,12.4 17,10.5 17,8.5 C17,3.8 13.2,0 8.5,0 C3.8,0 0,3.8 0,8.5 C0,13.2 3.8,17 8.5,17 C10.5,17 12.3,16.3 13.8,15.2 L18.3,19.7 C18.5,19.9 18.8,20 19,20 C19.2,20 19.5,19.9 19.7,19.7 C20.1,19.3 20.1,18.7 19.7,18.3"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd" transform="translate(2 2)">
+ <use fill="#000" xlink:href="#search-a"/>
+ </g>
+ </svg>
+ </span>
+ </div>
+</div>
+
diff --git a/components/icon/_icon.scss b/components/icon/_icon.scss
new file mode 100644
index 0000000..cd94eb7
--- /dev/null
+++ b/components/icon/_icon.scss
@@ -0,0 +1,250 @@
+@mixin color-icon($primary-color, $secondary-color) {
+ color: $primary-color;
+ fill: $primary-color;
+ span{
+ color: $primary-color;
+ }
+ &:not([disabled]):hover, &:active, &:focus {
+ &.clickable {
+ color: $secondary-color;
+ fill: $secondary-color;
+ }
+ }
+}
+
+.svg-icon-wrapper {
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+
+ &[disabled] {
+ opacity: 0.7;
+ }
+
+ &.bottom {
+ flex-direction: column;
+ .svg-icon-label {
+ margin-bottom: 5px;
+ }
+ }
+
+ &.right {
+ float: none;
+ .svg-icon-label {
+ margin-left: 5px;
+ }
+ }
+
+ &.top {
+ flex-direction: column-reverse;
+ .svg-icon-label {
+ margin-top: 5px;
+ }
+ }
+
+ &.left {
+ flex-direction: row-reverse;
+ .svg-icon-label {
+ margin-right: 5px;
+ }
+ }
+
+ &.__warning {
+ @include color-icon($yellow, $yellow);
+ }
+
+ &.__primary {
+ @include color-icon($blue, $light-blue);
+ }
+
+ &.__secondary {
+ @include color-icon($gray, $dark-gray);
+ }
+
+ &.__positive {
+ @include color-icon($green, $green);
+ }
+
+ &.__negative {
+ @include color-icon($red, $red);
+ }
+}
+
+
+.svg-icon {
+ width: 20px;
+ height: 20px;
+
+ &.__angleDoubleLeft {
+ width: 14px;
+ height: 14px;
+ }
+ &.__angleDoubleRight {
+ width: 14px;
+ height: 14px;
+ }
+ &.__angleLeft {
+ width: 14px;
+ height: 14px;
+ }
+ &.__angleRight {
+ width: 14px;
+ height: 14px;
+ }
+ &.__artifacts {
+ width: 16px;
+ height: 20px;
+ }
+ &.__back {
+ width: 25px;
+ height: 25px;
+ }
+ &.__base {
+ //
+ }
+ &.__calendar {
+ //
+ }
+ &.__caretDown {
+ }
+ &.__check {
+ }
+ &.__checkCircle {
+ width: 16px;
+ height: 16px;
+ }
+ &.__chevronDown{
+ width: 10px;
+ height: 7px;
+ }
+ &.__chevronUp {
+ width: 11px;
+ height: 7px;
+ }
+ &.__close {
+ width: 10px;
+ height: 10px;
+ }
+ &.__download {
+ width: 15px;
+ height: 11px;
+ }
+ &.__env {
+ width: 15px;
+ height: 14px;
+ }
+ &.__error {
+ width: 14px;
+ height: 14px;
+ }
+ &.__errorCircle {
+ width: 16px;
+ height: 16px;
+ }
+ &.__exclamationTriangleFull {
+ width: 15px;
+ height: 13px;
+ }
+ &.__exclamationTriangleLine {
+ width: 15px;
+ height: 13px;
+ }
+ &.__filter {
+ //
+ }
+ &.__locked {
+ width: 11px;
+ }
+ &.__module {
+ //
+ }
+ &.__nestedHeat {
+ width: 15px;
+ height: 13px;
+ }
+ &.__network {
+ width: 13px;
+ height: 13px;
+ }
+ &.__others {
+ width: 12px;
+ height: 12px;
+ }
+ &.__pencil {
+ width: 15px;
+ height: 15px;
+ }
+ &.__plus {
+ width: 9px;
+ height: 9px;
+ }
+ &.__plusCircle {
+ width: 19px;
+ height: 19px;
+ }
+ &.__plusThin {
+ width: 9px;
+ height: 9px;
+ }
+ &.__proceedToOverview {
+ width: 24px;
+ height: 20px;
+ }
+ &.__search {
+ //
+ }
+ &.__sliders {
+ }
+ &.__trashO {
+ width: 15px;
+ height: 16px;
+ }
+ &.__unlocked {
+ width: 11px;
+ }
+ &.__upload {
+ width: 15px;
+ height: 11px;
+ }
+ &.__vendor {
+ width: 53px;
+ height: 47px;
+ }
+ &.__versionControllerLockClosed {
+ width: 21px;
+ height: 23px;
+ }
+ &.__versionControllerLockOpen {
+ width: 24px;
+ height: 28px;
+ }
+ &.__versionControllerRevert {
+ //
+ }
+ &.__versionControllerSave {
+ //
+ }
+ &.__versionControllerSubmit {
+ //
+ }
+ &.__versionControllerPermissions {
+ //
+ }
+ &.__vlm {
+ width: 53px;
+ height: 47px;
+ }
+ &.__vsp {
+ width: 53px;
+ height: 47px;
+ }
+ &.__zip {
+ width: 29px;
+ height: 23px;
+ }
+}
+
+.svg-icon-missing {
+ @include body-2;
+ @include font-error;
+}
diff --git a/components/input/_input.scss b/components/input/_input.scss
new file mode 100644
index 0000000..a84d312
--- /dev/null
+++ b/components/input/_input.scss
@@ -0,0 +1,78 @@
+.sdc-input {
+ margin-bottom: 10px;
+
+ .sdc-input__label {
+ margin-bottom: 5px;
+ display: block;
+ @include body-3-emphasis;
+
+ &.required::before {
+ content: '*';
+ color: $red;
+ margin: 0 4px 0 0;
+ }
+ }
+
+ .sdc-input__input {
+ @include box-sizing;
+ padding: 0 10px;
+ height: 38px;
+ width: 100%;//415px;
+ border: solid 1px $light-gray;
+ border-radius:2px;
+ color: $dark-gray;
+
+ &.error, &.error:focus, &.error:disabled {
+ border: solid 1px $red;
+ color: $red;
+ outline: none;
+ }
+
+ &:read-only{
+ border: none;
+ outline: none;
+ color: $text-black
+ }
+ &:-moz-read-only { /* For Firefox */
+ border: none;
+ outline: none;
+ color: $text-black
+ }
+
+ &:focus {
+ border-color: $blue;
+ outline: 0 none;
+ color: $text-black;
+ }
+
+ &:disabled {
+ background: $light-silver;
+ color: $gray;
+ }
+
+ &::-webkit-input-placeholder /* Chrome/Opera/Safari */ {
+ color: $gray;
+ @include base-font-italic;
+ }
+ &::-moz-placeholder /* Firefox 19+ */ {
+ color: $gray;
+ @include base-font-italic;
+ }
+ &:-moz-placeholder /* Firefox 18- */ {
+ color: $gray;
+ @include base-font-italic;
+ }
+ &:-ms-input-placeholder /* IE 10+ */
+ {
+ color: $gray;
+ @include base-font-italic;
+ }
+ }
+
+ .sdc-label__error{
+ margin-top: 2px;
+ margin-left: 2px;
+ @include body-3;
+ }
+
+} \ No newline at end of file
diff --git a/components/input/input-disabled.html b/components/input/input-disabled.html
new file mode 100644
index 0000000..bea21b4
--- /dev/null
+++ b/components/input/input-disabled.html
@@ -0,0 +1,4 @@
+<div class="sdc-input __disabled">
+ <label class="sdc-input__label">I am a label</label>
+ <input class="sdc-input__input" type="text" disabled value="Default"/>
+</div>
diff --git a/components/input/input-error.html b/components/input/input-error.html
new file mode 100644
index 0000000..aafee55
--- /dev/null
+++ b/components/input/input-error.html
@@ -0,0 +1,17 @@
+<div class="sdc-input">
+ <label class="sdc-input__label">I am a label</label>
+ <input class="sdc-input__input error" type="text" value="Default"/>
+ <div class="sdc-label__error ">
+ <div class="svg-icon-wrapper __negative">
+ <svg class="svg-icon __exclamationTriangleFull __negative" version="1.1" id="exclamation-triangle-full_icon" x="0px" y="0px" viewBox="0 0 19.9 18" style="enable-background:new 0 0 19.9 18;" xml:space="preserve">
+ <path d="M19.6,14.3L12,1.3c-0.3-0.6-0.8-1-1.4-1.2C10-0.1,9.3,0,8.7,0.3c-0.4,0.3-0.6,0.6-0.9,1l-7.6,13c-0.3,0.5-0.4,1.2-0.2,1.8
+ c0.2,0.6,0.6,1.1,1.1,1.4C1.6,17.8,1.9,18,2.4,18h15.1c1.3,0,2.4-1.1,2.4-2.4C19.9,15.1,19.8,14.7,19.6,14.3z M10.5,14.2
+ c0,0.3-0.2,0.5-0.5,0.5s-0.5-0.2-0.5-0.5l0-1c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5L10.5,14.2z M10.5,9.9c0,0.3-0.2,0.5-0.5,0.5
+ s-0.5-0.2-0.5-0.5l0-5.2c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5L10.5,9.9z">
+ </path>
+ </svg>
+ <span class="svg-icon-label __negative">This is the error message.
+ </span>
+ </div>
+ </div>
+</div> \ No newline at end of file
diff --git a/components/input/input-number.html b/components/input/input-number.html
new file mode 100644
index 0000000..59ef93c
--- /dev/null
+++ b/components/input/input-number.html
@@ -0,0 +1,6 @@
+<div class="sdc-input">
+ <label class="sdc-input__label">I am a label</label>
+ <div>
+ <input class="sdc-input__input" type="number"/>
+ </div>
+</div> \ No newline at end of file
diff --git a/components/input/input-placeholder.html b/components/input/input-placeholder.html
new file mode 100644
index 0000000..b07d75d
--- /dev/null
+++ b/components/input/input-placeholder.html
@@ -0,0 +1,4 @@
+<div class="sdc-input">
+ <label class="sdc-input__label">I am a label</label>
+ <input class="sdc-input__input" placeholder="Write Here..." type="text"/>
+</div>
diff --git a/components/input/input-required.html b/components/input/input-required.html
new file mode 100644
index 0000000..f9dbb16
--- /dev/null
+++ b/components/input/input-required.html
@@ -0,0 +1,4 @@
+<div class="sdc-input">
+ <label class="sdc-input__label required">I am a label</label>
+ <input class="sdc-input__input" value="Default" type="text"/>
+</div>
diff --git a/components/input/input-view-only.html b/components/input/input-view-only.html
new file mode 100644
index 0000000..4381b22
--- /dev/null
+++ b/components/input/input-view-only.html
@@ -0,0 +1,4 @@
+<div class="sdc-input">
+ <label class="sdc-input__label">I am a label</label>
+ <input class="sdc-input__input view-only" type="text" value="Default"/>
+</div> \ No newline at end of file
diff --git a/components/input/input.html b/components/input/input.html
new file mode 100644
index 0000000..ef2ba61
--- /dev/null
+++ b/components/input/input.html
@@ -0,0 +1,8 @@
+<div class="sdc-input">
+ <label class="sdc-input__label">I am a label</label>
+ <input
+ class="sdc-input__input"
+ value="Default"
+ type="text"
+ />
+</div> \ No newline at end of file
diff --git a/components/loader/_loader.scss b/components/loader/_loader.scss
new file mode 100644
index 0000000..76d6cbb
--- /dev/null
+++ b/components/loader/_loader.scss
@@ -0,0 +1,255 @@
+.sdc-loader-background {
+ background-color: $black;
+ position: absolute;
+ top: 0px;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 9999;
+ opacity: 0.5;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.sdc-loader-wrapper{
+ position: relative;
+ width: 100%;
+ height:100%;
+}
+
+.sdc-loader-wrapper-absolute { position: absolute; top: 0;}
+
+.sdc-loader {
+ z-index: 10002;
+}
+
+.sdc-loader-global-wrapper{
+ position:fixed;
+ width: 100%;
+ height:100%;
+}
+
+.loader-fixed {
+ display: block;
+ position:fixed;
+ top:0;
+ left:0;
+ width: 100%;
+ height:100%;
+}
+
+@keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 0.8; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 0.8; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 0.8; }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 0.8; }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 0.8; }
+}
+
+@keyframes fadeout {
+ from { opacity: 0.8; }
+ to { opacity: 0; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadeout {
+ from { opacity: 0.8; }
+ to { opacity: 0; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadeout {
+ from { opacity: 0.8; }
+ to { opacity: 0; }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadeout {
+ from { opacity: 0.8; }
+ to { opacity: 0; }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes fadeout {
+ from { opacity: 0.8; }
+ to { opacity: 0; }
+}
+
+.sdc-loader {
+ height: 63px;
+ width: 63px;
+ position: absolute;
+}
+
+.sdc-loader.small {
+ transform: scale(0.26);
+}
+
+.sdc-loader.medium {
+ transform: scale(0.5);
+}
+
+.sdc-loader.large {
+ transform: scale(1);
+}
+
+.sdc-loader::before {
+ background-color: $silver;
+ border-radius: 50%;
+ box-shadow: 21px 21px 0px 0px $silver, 0px 42px 0px 0px $silver, -21px 21px 0px 0px $silver;
+ content: '';
+ display: block;
+ height: 21px;
+ width: 21px;
+ position: absolute;
+ left: 50%;
+ margin-left: -10.5px;
+}
+
+.sdc-loader::after {
+ border-radius: 50%;
+ content: '';
+ display: block;
+ position: absolute;
+ height: 21px;
+ width: 21px;
+ animation: dot-move-2 4.5s infinite ease-in;
+}
+
+@keyframes dot-move {
+ 0% {
+ background-color: $light-blue;
+ left: 21px;
+ top: 0;
+ }
+ 25% {
+ background-color: $yellow;
+ left: 42px;
+ top: 21px;
+ }
+ 50% {
+ background-color: $light-purple;
+ left: 21px;
+ top: 42px;
+ }
+ 75% {
+ background-color: $light-yellow;
+ left: 0;
+ top: 21px;
+ }
+ 100% {
+ background-color: $light-blue;
+ left: 21px;
+ top: 0;
+ }
+}
+
+@keyframes dot-move-2 {
+ 0% {
+ background-color: $light-blue;
+ left: 21px;
+ top: 0;
+ }
+ 6.25% {
+ background-color: $light-blue;
+ left: 42px;
+ top: 21px;
+ }
+ 12.5% {
+ background-color: $light-blue;
+ left: 21px;
+ top: 42px;
+ }
+ 18.75% {
+ background-color: $light-blue;
+ left: 0;
+ top: 21px;
+ }
+ 25% {
+ background-color: $yellow;
+ left: 21px;
+ top: 0;
+ }
+ 31.25% {
+ background-color: $yellow;
+ left: 42px;
+ top: 21px;
+ }
+ 37.5% {
+ background-color: $yellow;
+ left: 21px;
+ top: 42px;
+ }
+ 43.75% {
+ background-color: $yellow;
+ left: 0;
+ top: 21px;
+ }
+ 50% {
+ background-color: $light-purple;
+ left: 21px;
+ top: 0;
+ }
+ 56.25% {
+ background-color: $light-purple;
+ left: 42px;
+ top: 21px;
+ }
+ 62.5% {
+ background-color: $light-purple;
+ left: 21px;
+ top: 42px;
+ }
+ 68.75% {
+ background-color: $light-purple;
+ left: 0;
+ top: 21px;
+ }
+ 75% {
+ background-color: $light-yellow;
+ left: 21px;
+ top: 0;
+ }
+ 81.25% {
+ background-color: $light-yellow;
+ left: 42px;
+ top: 21px;
+ }
+ 87.5% {
+ background-color: $light-yellow;
+ left: 21px;
+ top: 42px;
+ }
+ 93.75% {
+ background-color: $light-yellow;
+ left: 0;
+ top: 21px;
+ }
+ 100% {
+ background-color: $light-blue;
+ left: 21px;
+ top: 0;
+ }
+}
diff --git a/components/loader/global-loader.html b/components/loader/global-loader.html
new file mode 100644
index 0000000..2a60b8b
--- /dev/null
+++ b/components/loader/global-loader.html
@@ -0,0 +1,5 @@
+<div>
+ <div class="sdc-loader-global-wrapper sdc-loader-background" >
+ <div class="sdc-loader large"></div>
+ </div>
+</div> \ No newline at end of file
diff --git a/components/loader/loader.html b/components/loader/loader.html
new file mode 100644
index 0000000..7ea3348
--- /dev/null
+++ b/components/loader/loader.html
@@ -0,0 +1,5 @@
+<div class = "sdc-loader-wrapper">
+ <div class="sdc-loader-background">
+ <div class="sdc-loader large"></div>
+ </div>
+</div> \ No newline at end of file
diff --git a/components/menu/_menu.scss b/components/menu/_menu.scss
new file mode 100644
index 0000000..fe32f32
--- /dev/null
+++ b/components/menu/_menu.scss
@@ -0,0 +1,68 @@
+.sdc-menu-list {
+ position: static;
+ @include box-sizing;
+ @include box-shadow(0 2px 4px 0 rgba($black, 0.3));
+ @include border-radius(2px);
+ border: 1px solid $light-gray;
+ border-top: solid 3px $blue;
+ background: $white;
+ min-width: 150px;
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+
+ .sdc-menu-item:not(.separator) {
+ @include body-1;
+ height: 40px;
+ color: $dark-gray;
+ padding: 0 12px;
+ display: flex;
+ align-items: center;
+
+ svg {
+ margin-right: 16px;
+ g, path {
+ fill: $dark-gray;
+ }
+ }
+
+ &:hover {
+ &:not(.disabled) {
+ cursor: pointer;
+ &:not(.selected) {
+ background: $light-silver;
+ color: $text-black;
+ g, path {
+ fill: $dark-gray;
+ }
+ }
+ }
+ }
+
+ &.disabled {
+ color: $gray;
+ g, path {
+ fill: $light-gray;
+ }
+ }
+
+ &.selected {
+ background: $lighter-blue;
+ color: $light-blue;
+ g, path {
+ fill: $dark-gray;
+ }
+ }
+ }
+
+ &.relative {
+ position: relative;
+ }
+
+ .separator {
+ cursor: default;
+ border-top: 1px solid $silver;
+ margin: 0 0;
+ height: 0;
+ }
+}
diff --git a/components/menu/popup-menu.html b/components/menu/popup-menu.html
new file mode 100644
index 0000000..f4f1cbd
--- /dev/null
+++ b/components/menu/popup-menu.html
@@ -0,0 +1,8 @@
+
+<ul class="sdc-menu-list static">
+ <li class="sdc-menu-item selected">item 1 (selected)</li>
+ <li class="sdc-menu-item disabled">item 2</li>
+ <li class="separator"/>
+ <li class="sdc-menu-item">item 3</li>
+ <li class="sdc-menu-item">custom action</li>
+</ul> \ No newline at end of file
diff --git a/components/menu/relative-popup-menu.html b/components/menu/relative-popup-menu.html
new file mode 100644
index 0000000..e5a5449
--- /dev/null
+++ b/components/menu/relative-popup-menu.html
@@ -0,0 +1,8 @@
+<div class="sdc-popup-menu">
+ <ul class="sdc-menu-list relative" style="top: 10px; left: 10px;">
+ <li class="sdc-menu-item selected">item 1 (selected)</li>
+ <li class="sdc-menu-item disabled">item 2</li>
+ <li class="separator"/>
+ <li class="sdc-menu-item">item 3</li>
+ </ul>
+</div> \ No newline at end of file
diff --git a/components/modal/_modal.scss b/components/modal/_modal.scss
new file mode 100644
index 0000000..0bf52aa
--- /dev/null
+++ b/components/modal/_modal.scss
@@ -0,0 +1,233 @@
+.sdc-modal {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ overflow: auto;
+ margin: auto;
+ display: flex;
+ align-items: center;
+ z-index: 1000;
+ svg path {
+ fill: inherit;
+ }
+ .sdc-modal__wrapper {
+ @include body-1;
+ background: $white;
+ width: 100%;
+ @include box-shadow(0 0 4px 0 rgba(0, 0, 0, 0.50));
+ color: $text-black;
+ display: flex;
+ flex-direction: column;
+ &.sdc-modal-type-info {
+ border-top: solid 6px $blue;
+ .sdc-modal__svg-use {
+ fill: $blue;
+ }
+ .svg-icon {
+ &.__errorCircle {
+ width: 30px;
+ height: 30px;
+ }
+ }
+ }
+
+ &.sdc-modal-type-info {
+ border-top: solid 6px $blue;
+ .sdc-modal__svg-use {
+ fill: $blue;
+ }
+ .svg-icon {
+ &.__exclamationTriangleLine {
+ width: 30px;
+ height: 30px;
+ }
+ }
+ }
+
+ &.sdc-modal-type-warning, &.sdc-modal-type-alert {
+ border-top: solid 6px $yellow;
+ .sdc-modal__svg-use {
+ fill: $yellow;
+ }
+ .svg-icon {
+ &.__exclamationTriangleLine {
+ width: 30px;
+ height: 30px;
+ }
+ }
+ }
+
+ &.sdc-modal-type-success {
+ border-top: solid 6px $green;
+ .sdc-modal__svg-use {
+ fill: $green;
+ }
+ .svg-icon {
+ &.__success {
+ width: 30px;
+ height: 30px;
+ }
+ }
+ }
+
+ &.sdc-modal-type-error {
+ border-top: solid 6px $red;
+ .sdc-modal__svg-use {
+ fill: $red;
+ }
+ .svg-icon {
+ &.__error {
+ width: 30px;
+ height: 30px;
+ }
+ }
+ }
+
+ &.sdc-modal-type-custom {
+ padding: 0px;
+ border-top: none;
+ .sdc-custom__header {
+ @include box-sizing;
+ background-color: $blue;
+ color: $white;
+ height: 50px;
+ align-items: center;
+ padding-top: 0px;
+ .title {
+ color: $white;
+ padding-top: 0px;
+ @include heading-3;
+ }
+ .sdc-modal__close-button {
+ margin-top: 0px;
+ width: 16px;
+ height: 16px;
+ line-height: 16px;
+ .svg-icon > svg {
+ fill: $white;
+ color: $white;
+ }
+ &.disabled {
+ cursor: default;
+ .svg-icon > svg {
+ fill: $silver;
+ color: $silver;
+ }
+ }
+ }
+ .sdc-modal__close-button-svg {
+ width: 16px;
+ height: 16px;
+ .sdc-modal__svg-use {
+ fill: $white;
+ }
+ .svg-icon {
+ height: 16px;
+ width: 16px;
+ fill: $white;
+ }
+ }
+ }
+ .sdc-modal__content {
+ padding: 20px 40px;
+ }
+ }
+ .sdc-modal__header {
+ padding: 20px 20px 0 20px;
+ display: flex;
+ justify-content: space-between;
+ text-align: left;
+ height: 30px;
+ line-height: 30px;
+ .sdc-modal__icon {
+ margin-right: 10px;
+ }
+ .title {
+ @include heading-2;
+ flex: 1 1 auto;
+ color: $text-black;
+ }
+ .sdc-modal__close-button {
+ order: 3;
+ width: 14px;
+ height: 14px;
+ line-height: 14px;
+ cursor: pointer;
+ .sdc-modal__svg-use {
+ fill: $black;
+ }
+ &.disabled {
+ cursor: default;
+ }
+ }
+ }
+ .sdc-modal__content {
+ position: relative;
+ order: 2;
+ padding: 10px 60px 20px 60px;
+ .disabled-modal{
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: $white;
+ opacity: 0.5;
+ }
+ }
+ .sdc-modal__footer {
+ order: 3;
+ background-color: $white;
+ border-top: solid 1px $silver;
+ padding: 10px;
+ display: flex;
+ justify-content: flex-end;
+ button {
+ margin-left: 10px;
+ }
+ }
+ }
+}
+
+.modal-background {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: $black;
+ opacity: 0.70;
+ z-index: 1000;
+ &.show {
+ z-index: 1000;
+ opacity: 0.70;
+ transition: opacity .3s ease, z-index .3s;
+ }
+ &.hide {
+ z-index: -1;
+ opacity: 0;
+ transition: opacity .35s ease, z-index .35s;
+ }
+}
+
+.xl {
+ width: 1200px;
+}
+
+.l {
+ width: 875px;
+}
+
+.md {
+ width: 650px;
+}
+
+.sm {
+ width: 500px;
+}
+
+.xsm {
+ width: 432px;
+}
diff --git a/components/modal/alert-modal.html b/components/modal/alert-modal.html
new file mode 100644
index 0000000..1ed72e8
--- /dev/null
+++ b/components/modal/alert-modal.html
@@ -0,0 +1,45 @@
+<div class="sdc-modal sm">
+ <div class="sdc-modal__wrapper sdc-modal-type-alert">
+ <div class="sdc-modal__header">
+ <div class="svg-icon-wrapper sdc-modal__icon sdc-modal__svg-use bottom">
+ <svg class="svg-icon __exclamationTriangleLine" version="1.1" id="exclamation-triangle-line_icon" x="0px" y="0px" viewBox="0 0 19.9 18" xml:space="preserve">
+ <g>
+ <path d="M17.6,18H2.4c-0.5,0-0.9-0.1-1.3-0.4c-0.5-0.3-0.9-0.8-1.1-1.4c-0.2-0.6-0.1-1.3,0.2-1.8l7.6-13c0.2-0.3,0.5-0.7,0.9-1
+ C9.3,0,10-0.1,10.6,0.1c0.6,0.2,1.1,0.6,1.4,1.2l7.5,13c0.2,0.4,0.4,0.8,0.4,1.3C19.9,16.9,18.9,18,17.6,18z M9.9,1
+ C9.7,1,9.4,1.1,9.2,1.2C9.1,1.3,8.9,1.6,8.7,1.8l-7.5,13C1,15.1,1,15.5,1,15.9c0.1,0.4,0.3,0.7,0.6,0.8C1.9,16.9,2.1,17,2.4,17
+ h15.1c0.9,0,1.4-0.7,1.4-1.4c0-0.2-0.1-0.5-0.2-0.7l0,0l-7.6-13c-0.2-0.4-0.5-0.6-0.8-0.7C10.2,1,10.1,1,9.9,1z"></path>
+ <g>
+ <g>
+ <g>
+ <path d="M10,10.4L10,10.4c-0.3,0-0.5-0.2-0.5-0.5l0-5.2c0-0.3,0.2-0.5,0.5-0.5l0,0c0.3,0,0.5,0.2,0.5,0.5l0,5.2
+ C10.5,10.2,10.2,10.4,10,10.4z"></path>
+ </g>
+ </g>
+ <g>
+ <g>
+ <path d="M10,14.7L10,14.7c-0.3,0-0.5-0.2-0.5-0.5l0-1c0-0.3,0.2-0.5,0.5-0.5l0,0c0.3,0,0.5,0.2,0.5,0.5l0,1
+ C10.5,14.5,10.2,14.7,10,14.7z"></path>
+ </g>
+ </g>
+ </g>
+ </g>
+ </svg>
+ </div>
+ <div class="title ">Title</div>
+ <div class="svg-icon-wrapper sdc-modal__close-button-svg sdc-modal__close-button clickable bottom">
+ <svg class="svg-icon __close" version="1.1" id="close_icon" x="0px" y="0px" viewBox="0 0 10.1 10.1" xml:space="preserve">
+ <g transform="translate(0,-952.36218)">
+ <path d="M0.5,952.4c-0.2,0-0.4,0.2-0.4,0.5c0,0.1,0.1,0.2,0.1,0.3l4.3,4.3l-4.3,4.3c-0.2,0.2-0.2,0.4,0,0.6c0.2,0.2,0.4,0.2,0.6,0
+ l0,0l4.3-4.4l4.3,4.3c0.2,0.2,0.4,0.2,0.6,0s0.2-0.4,0-0.6l0,0l-4.3-4.3l4.3-4.3c0.2-0.2,0.2-0.4,0-0.6c-0.1-0.1-0.2-0.1-0.4-0.1
+ c-0.1,0-0.2,0.1-0.3,0.1l-4.2,4.3l-4.3-4.3C0.8,952.4,0.6,952.4,0.5,952.4z"></path>
+ </g>
+ </svg>
+ </div>
+ </div>
+ <div class="sdc-modal__content ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non,pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra</div>
+ <div class="sdc-modal__footer">
+ <div><button class="sdc-button sdc-button__primary ">Ok</button></div>
+ </div>
+ </div>
+</div>
+<div class="modal-background"></div> \ No newline at end of file
diff --git a/components/modal/custom-modal.html b/components/modal/custom-modal.html
new file mode 100644
index 0000000..1011ca6
--- /dev/null
+++ b/components/modal/custom-modal.html
@@ -0,0 +1,27 @@
+<div class="sdc-modal md">
+ <div class="sdc-modal__wrapper sdc-modal-type-custom">
+ <div class="sdc-custom__header sdc-modal__header">
+ <div class="title ">Title</div>
+ <div class="svg-icon-wrapper sdc-modal__close-button-svg sdc-modal__close-button clickable bottom">
+ <svg class="svg-icon __close" version="1.1" id="close_icon" x="0px" y="0px" viewBox="0 0 10.1 10.1" xml:space="preserve">
+ <g transform="translate(0,-952.36218)">
+ <path d="M0.5,952.4c-0.2,0-0.4,0.2-0.4,0.5c0,0.1,0.1,0.2,0.1,0.3l4.3,4.3l-4.3,4.3c-0.2,0.2-0.2,0.4,0,0.6c0.2,0.2,0.4,0.2,0.6,0
+ l0,0l4.3-4.4l4.3,4.3c0.2,0.2,0.4,0.2,0.6,0s0.2-0.4,0-0.6l0,0l-4.3-4.3l4.3-4.3c0.2-0.2,0.2-0.4,0-0.6c-0.1-0.1-0.2-0.1-0.4-0.1
+ c-0.1,0-0.2,0.1-0.3,0.1l-4.2,4.3l-4.3-4.3C0.8,952.4,0.6,952.4,0.5,952.4z"></path>
+ </g>
+ </svg>
+ </div>
+ </div>
+ <div class="sdc-modal__content ">
+ <div>
+ <div class="sdc-input "><label class="sdc-input__label " for="input1">I am a label</label><input type="text" class="sdc-input__input " id="input1" name="input1" value="Default"></div>
+ <div class="sdc-input "><label class="sdc-input__label " for="input1">I am a label</label><input type="text" class="sdc-input__input " id="input1" name="input1" value="Default"></div>
+ <div class="sdc-input "><label class="sdc-input__label " for="input1">I am a label</label><input type="text" class="sdc-input__input " id="input1" name="input1" value="Default"></div>
+ </div>
+ </div>
+ <div class="sdc-modal__footer">
+ <div><button class="sdc-button sdc-button__primary ">Ok</button><button class="sdc-button sdc-button__secondary">Close</button></div>
+ </div>
+ </div>
+</div>
+<div class="modal-background"></div> \ No newline at end of file
diff --git a/components/modal/error-modal.html b/components/modal/error-modal.html
new file mode 100644
index 0000000..5a3b5fb
--- /dev/null
+++ b/components/modal/error-modal.html
@@ -0,0 +1,32 @@
+<div class="sdc-modal sm">
+ <div class="sdc-modal__wrapper sdc-modal-type-error">
+ <div class="sdc-modal__header">
+ <div class="svg-icon-wrapper sdc-modal__icon sdc-modal__svg-use bottom">
+ <svg class="svg-icon __error" viewBox="0 0 17 17">
+ <title>error</title>
+ <g id="Layer_2" data-name="Layer 2">
+ <g id="Layer_1-2" data-name="Layer 1">
+ <path d="M8.5,1A7.5,7.5,0,1,1,1,8.5,7.51,7.51,0,0,1,8.5,1m0-1A8.5,8.5,0,1,0,17,8.5,8.5,8.5,0,0,0,8.5,0Z"></path>
+ <polygon points="11.6 6.1 10.9 5.4 8.5 7.79 6.1 5.4 5.4 6.1 7.79 8.5 5.4 10.9 6.1 11.6 8.5 9.21 10.9 11.6 11.6 10.9 9.21 8.5 11.6 6.1"></polygon>
+ </g>
+ </g>
+ </svg>
+ </div>
+ <div class="title ">Title</div>
+ <div class="svg-icon-wrapper sdc-modal__close-button-svg sdc-modal__close-button clickable bottom">
+ <svg class="svg-icon __close" version="1.1" id="close_icon" x="0px" y="0px" viewBox="0 0 10.1 10.1" xml:space="preserve">
+ <g transform="translate(0,-952.36218)">
+ <path d="M0.5,952.4c-0.2,0-0.4,0.2-0.4,0.5c0,0.1,0.1,0.2,0.1,0.3l4.3,4.3l-4.3,4.3c-0.2,0.2-0.2,0.4,0,0.6c0.2,0.2,0.4,0.2,0.6,0
+ l0,0l4.3-4.4l4.3,4.3c0.2,0.2,0.4,0.2,0.6,0s0.2-0.4,0-0.6l0,0l-4.3-4.3l4.3-4.3c0.2-0.2,0.2-0.4,0-0.6c-0.1-0.1-0.2-0.1-0.4-0.1
+ c-0.1,0-0.2,0.1-0.3,0.1l-4.2,4.3l-4.3-4.3C0.8,952.4,0.6,952.4,0.5,952.4z"></path>
+ </g>
+ </svg>
+ </div>
+ </div>
+ <div class="sdc-modal__content ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non,pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra</div>
+ <div class="sdc-modal__footer">
+ <div><button class="sdc-button sdc-button__primary ">Ok</button></div>
+ </div>
+ </div>
+</div>
+<div class="modal-background"></div> \ No newline at end of file
diff --git a/components/modal/standard-modal.html b/components/modal/standard-modal.html
new file mode 100644
index 0000000..e367900
--- /dev/null
+++ b/components/modal/standard-modal.html
@@ -0,0 +1,46 @@
+<div class="sdc-modal sm">
+ <div class="sdc-modal__wrapper sdc-modal-type-info">
+ <div class="sdc-modal__header">
+ <div class="svg-icon-wrapper sdc-modal__icon sdc-modal__svg-use bottom">
+ <svg class="svg-icon __errorCircle" id="error-circle_icon" viewBox="0 0 16 16">
+ <title>
+ Asset 4
+ </title>
+ <g id="Layer_2" data-name="Layer 2">
+ <g id="Layer_1-2" data-name="Layer 1">
+ <path d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0Zm.9,12.4H7.1V10.6H8.9Zm0-3.6H7.1V3.5H8.9Z">
+ </path>
+ </g>
+ </g>
+ </svg>
+ </div>
+ <div class="title ">
+ Standard Modal
+ </div>
+ <div class="svg-icon-wrapper sdc-modal__close-button-svg sdc-modal__close-button bottom">
+ <svg class="svg-icon __close" version="1.1" id="close_icon" x="0px" y="0px" viewBox="0 0 10.1 10.1" style="enable-background:new 0 0 10.1 10.1;" xml:space="preserve">
+ <g transform="translate(0,-952.36218)">
+ <path d="M0.5,952.4c-0.2,0-0.4,0.2-0.4,0.5c0,0.1,0.1,0.2,0.1,0.3l4.3,4.3l-4.3,4.3c-0.2,0.2-0.2,0.4,0,0.6c0.2,0.2,0.4,0.2,0.6,0
+ l0,0l4.3-4.4l4.3,4.3c0.2,0.2,0.4,0.2,0.6,0s0.2-0.4,0-0.6l0,0l-4.3-4.3l4.3-4.3c0.2-0.2,0.2-0.4,0-0.6c-0.1-0.1-0.2-0.1-0.4-0.1
+ c-0.1,0-0.2,0.1-0.3,0.1l-4.2,4.3l-4.3-4.3C0.8,952.4,0.6,952.4,0.5,952.4z">
+ </path>
+ </g>
+ </svg>
+ </div>
+ </div>
+ <div class="sdc-modal__content ">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non,pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra
+ </div>
+ <div class="sdc-modal__footer">
+ <div>
+ <button class="sdc-button sdc-button__primary ">
+ Yes
+ </button>
+ <button class="sdc-button sdc-button__secondary ">
+ Close
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="modal-background"></div>
diff --git a/components/multiline-ellipsis/_multiline_ellipsis.scss b/components/multiline-ellipsis/_multiline_ellipsis.scss
new file mode 100644
index 0000000..846e44f
--- /dev/null
+++ b/components/multiline-ellipsis/_multiline_ellipsis.scss
@@ -0,0 +1,25 @@
+.multiline-ellipsis-container {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ white-space: normal;
+ //max-height: @num_lines * @line_height;
+
+ .multiline-ellipsis-content {
+ word-break: break-all;
+ position: relative;
+ //max-height: (@num_lines + 1) * @line_height;
+
+ .multiline-ellipsis-dots {
+ display: block;
+ position: absolute;
+ right: 0;
+ //top: calc(#{@num_lines * 2} - 100%);
+
+ &::before {
+ display: block;
+ content: '...';
+ }
+ }
+ }
+}
diff --git a/components/notification/_notification.scss b/components/notification/_notification.scss
new file mode 100644
index 0000000..1c46ac2
--- /dev/null
+++ b/components/notification/_notification.scss
@@ -0,0 +1,78 @@
+@include mixin-keyframes-fade-in-vertically(-50px, 'keyframes-slide-notif-in');
+@include mixin-keyframes-fade-out-vertically(20px, 'keyframes-slide-notif-out');
+
+.sdc-notification {
+ position:relative;
+ padding: 10px;
+ width: 300px;
+ min-height: 45px;
+ animation: keyframes-slide-notif-in 1s;
+ margin: 2px;
+ box-shadow: 0 3px 7px -3px $dark-gray;
+ display:flex;
+ flex-direction:row;
+ align-items: center;
+ &.fade-out__animated {
+ animation: keyframes-slide-notif-out 0.8s
+ }
+
+ &.type-info {
+ background-color: $blue; }
+
+ &.type-error {
+ background-color: $red; }
+
+ &.type-success {
+ background-color: $green; }
+
+ &.type-warning {
+ background-color: $yellow; }
+
+
+ &.react-transition-exit-active {
+ animation: keyframes-slide-notif-out 0.8s
+ }
+
+
+
+ .sdc-notification__icon_container {
+ border-radius: 42px;
+ flex: 0 0 auto;
+ height: 38px;
+ width: 38px;
+ background-color: rgba($white, 0.3);
+ margin-right: 5px;
+ .sdc-notification_svg-icon {
+ height: 32px;
+ width: 32px;
+ fill: $white;
+ margin-left: 3px;
+ margin-top: 3px;
+ }
+ }
+
+ .sdc-notification__icon {
+ flex: 0 0 auto;
+ height: 32px;
+ width: 32px;
+ margin-left: 3px;
+ margin-top: 3px;
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' style=''%3E%3Crect id='backgroundrect' width='100%25' height='100%25' x='0' y='0' fill='none' stroke='none'/%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%2382c355;%7D.cls-2%7Bfill:none;stroke:%23ebf5e4;stroke-miterlimit:10;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Evicon%3C/title%3E%3Cg class='currentLayer' style=''%3E%3Ctitle%3ELayer 1%3C/title%3E%3Cg id='Layer_4' data-name='Layer 4'%3E%3Cpolyline class='cls-2' points='7.46 17.43 15.36 21.74 22.54 8.57' id='svg_2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
+ }
+ .sdc-notification__message {
+ flex: 1;
+ text-align: left;
+ margin-left: 20px;
+
+ .sdc-notification__title {
+ font-size:16px;
+ color: white;
+ font-weight: bolder;
+ }
+
+ .sdc-notification__text {
+ font-size: 14px;
+ color: white;
+ }
+ }
+}
diff --git a/components/notification/notification-error.html b/components/notification/notification-error.html
new file mode 100644
index 0000000..b3a6d77
--- /dev/null
+++ b/components/notification/notification-error.html
@@ -0,0 +1,21 @@
+<div class="sdc-notification type-error " data-test-id="">
+ <div class="sdc-notification__icon_container">
+ <div class="svg-icon-wrapper sdc-notification_svg-icon bottom">
+ <svg class="svg-icon __check" version="1.1" id="check_icon" x="0px" y="0px" viewBox="0 0 14 10" style="enable-background:new 0 0 14 10;" xml:space="preserve">
+ <g transform="translate(0,-952.36218)">
+ <path d="M13.6,952.4c-0.1,0-0.2,0.1-0.3,0.2c-2.8,2.9-5.6,5.8-8.4,8.7l-4-3.5c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7l0,0l4.4,3.7
+ c0.2,0.2,0.5,0.1,0.6,0c2.9-3,5.8-6,8.7-9.1c0.2-0.2,0.2-0.5,0-0.7C13.8,952.4,13.6,952.4,13.6,952.4L13.6,952.4z">
+ </path>
+ </g>
+ </svg>
+ </div>
+ </div>
+ <div class="sdc-notification__message">
+ <div class="sdc-notification__title">
+ Title
+ </div>
+ <div class="sdc-notification__text">
+ message
+ </div>
+ </div>
+</div> \ No newline at end of file
diff --git a/components/notification/notification-info.html b/components/notification/notification-info.html
new file mode 100644
index 0000000..8916947
--- /dev/null
+++ b/components/notification/notification-info.html
@@ -0,0 +1,21 @@
+<div class="sdc-notification type-info " data-test-id="">
+ <div class="sdc-notification__icon_container">
+ <div class="svg-icon-wrapper sdc-notification_svg-icon bottom">
+ <svg class="svg-icon __check" version="1.1" id="check_icon" x="0px" y="0px" viewBox="0 0 14 10" style="enable-background:new 0 0 14 10;" xml:space="preserve">
+ <g transform="translate(0,-952.36218)">
+ <path d="M13.6,952.4c-0.1,0-0.2,0.1-0.3,0.2c-2.8,2.9-5.6,5.8-8.4,8.7l-4-3.5c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7l0,0l4.4,3.7
+ c0.2,0.2,0.5,0.1,0.6,0c2.9-3,5.8-6,8.7-9.1c0.2-0.2,0.2-0.5,0-0.7C13.8,952.4,13.6,952.4,13.6,952.4L13.6,952.4z">
+ </path>
+ </g>
+ </svg>
+ </div>
+ </div>
+ <div class="sdc-notification__message">
+ <div class="sdc-notification__title">
+ Title
+ </div>
+ <div class="sdc-notification__text">
+ message
+ </div>
+ </div>
+</div> \ No newline at end of file
diff --git a/components/notification/notification-success.html b/components/notification/notification-success.html
new file mode 100644
index 0000000..a7f38fd
--- /dev/null
+++ b/components/notification/notification-success.html
@@ -0,0 +1,21 @@
+<div class="sdc-notification type-success " data-test-id="">
+ <div class="sdc-notification__icon_container">
+ <div class="svg-icon-wrapper sdc-notification_svg-icon bottom">
+ <svg class="svg-icon __check" version="1.1" id="check_icon" x="0px" y="0px" viewBox="0 0 14 10" style="enable-background:new 0 0 14 10;" xml:space="preserve">
+ <g transform="translate(0,-952.36218)">
+ <path d="M13.6,952.4c-0.1,0-0.2,0.1-0.3,0.2c-2.8,2.9-5.6,5.8-8.4,8.7l-4-3.5c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7l0,0l4.4,3.7
+ c0.2,0.2,0.5,0.1,0.6,0c2.9-3,5.8-6,8.7-9.1c0.2-0.2,0.2-0.5,0-0.7C13.8,952.4,13.6,952.4,13.6,952.4L13.6,952.4z">
+ </path>
+ </g>
+ </svg>
+ </div>
+ </div>
+ <div class="sdc-notification__message">
+ <div class="sdc-notification__title">
+ Title
+ </div>
+ <div class="sdc-notification__text">
+ message
+ </div>
+ </div>
+</div> \ No newline at end of file
diff --git a/components/notification/notification-warning.html b/components/notification/notification-warning.html
new file mode 100644
index 0000000..e0fa4d9
--- /dev/null
+++ b/components/notification/notification-warning.html
@@ -0,0 +1,21 @@
+<div class="sdc-notification type-warning " data-test-id="">
+ <div class="sdc-notification__icon_container">
+ <div class="svg-icon-wrapper sdc-notification_svg-icon bottom">
+ <svg class="svg-icon __check" version="1.1" id="check_icon" x="0px" y="0px" viewBox="0 0 14 10" style="enable-background:new 0 0 14 10;" xml:space="preserve">
+ <g transform="translate(0,-952.36218)">
+ <path d="M13.6,952.4c-0.1,0-0.2,0.1-0.3,0.2c-2.8,2.9-5.6,5.8-8.4,8.7l-4-3.5c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7l0,0l4.4,3.7
+ c0.2,0.2,0.5,0.1,0.6,0c2.9-3,5.8-6,8.7-9.1c0.2-0.2,0.2-0.5,0-0.7C13.8,952.4,13.6,952.4,13.6,952.4L13.6,952.4z">
+ </path>
+ </g>
+ </svg>
+ </div>
+ </div>
+ <div class="sdc-notification__message">
+ <div class="sdc-notification__title">
+ Title
+ </div>
+ <div class="sdc-notification__text">
+ message
+ </div>
+ </div>
+</div> \ No newline at end of file
diff --git a/components/notifications-container/_notifications-container.scss b/components/notifications-container/_notifications-container.scss
new file mode 100644
index 0000000..2db6005
--- /dev/null
+++ b/components/notifications-container/_notifications-container.scss
@@ -0,0 +1,8 @@
+.sdc-notification-container {
+
+
+ position:absolute;
+ top: 10px;
+ right: 40px;
+ width: 300px;
+}
diff --git a/components/panel/basic-panel.html b/components/panel/basic-panel.html
new file mode 100644
index 0000000..14e6461
--- /dev/null
+++ b/components/panel/basic-panel.html
@@ -0,0 +1,21 @@
+<div class="sdc-panel">
+ <h3>
+ Panel
+ </h3>
+ <div class="sdc-checkbox">
+ <label>
+ <input type="checkbox" class="sdc-checkbox__input" />
+ <span class="sdc-checkbox__label">
+ filter-item
+ </span>
+ </label>
+ </div>
+ <div class="sdc-checkbox ">
+ <label>
+ <input type="checkbox" class="sdc-checkbox__input" checked="" />
+ <span class="sdc-checkbox__label">
+ filter-item-checked
+ </span>
+ </label>
+ </div>
+</div> \ No newline at end of file
diff --git a/components/panel/panel.scss b/components/panel/panel.scss
new file mode 100644
index 0000000..921dd74
--- /dev/null
+++ b/components/panel/panel.scss
@@ -0,0 +1,8 @@
+.sdc-panel {
+ width: 280px;
+ overflow-y: auto;
+ height: 100%;
+ box-shadow: 1px 0px 4px 0px $light-gray;
+ background-color: $white;
+ padding: 0;
+} \ No newline at end of file
diff --git a/components/radio/_radio.scss b/components/radio/_radio.scss
new file mode 100644
index 0000000..9c51846
--- /dev/null
+++ b/components/radio/_radio.scss
@@ -0,0 +1,69 @@
+.sdc-radio {
+ line-height: 14px;
+
+ label {
+ position: relative;
+ display: block;
+ padding-left: 14px;
+ }
+
+ .sdc-radio__input {
+ appearance: none;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ position: absolute;
+ z-index: -1;
+ opacity: 0;
+
+ // Radio not checked
+ + .sdc-radio__label:before {
+ display: inline-block;
+ position: absolute;
+ left: 0;
+ top: 0;
+ content: "";
+ width: 14px;
+ height: 14px;
+ box-sizing: content-box;
+ background: no-repeat url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22%23d2d2d2%22%20d%3D%22M7%2C14%20C3.13400675%2C14%200%2C10.8659932%200%2C7%20C0%2C3.13400675%203.13400675%2C0%207%2C0%20C8.35813029%2C0%209.62592397%2C0.386776975%2010.699241%2C1.0561909%20C12.6811805%2C2.29230086%2014%2C4.49213704%2014%2C7%20C14%2C10.8659932%2010.8659932%2C14%207%2C14%20Z%22%2F%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M7%2C13%20C10.3137085%2C13%2013%2C10.3137085%2013%2C7%20C13%2C3.6862915%2010.3137085%2C1%207%2C1%20C3.6862915%2C1%201%2C3.6862915%201%2C7%20C1%2C10.3137085%203.6862915%2C13%207%2C13%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+ }
+
+ // Radio disabled and not checked
+ &:disabled:not(:checked) {
+ + .sdc-radio__label:before {
+ background: no-repeat url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22%23d2d2d2%22%20d%3D%22M7%2C14%20C3.13400675%2C14%200%2C10.8659932%200%2C7%20C0%2C3.13400675%203.13400675%2C0%207%2C0%20C8.35813029%2C0%209.62592397%2C0.386776975%2010.699241%2C1.0561909%20C12.6811805%2C2.29230086%2014%2C4.49213704%2014%2C7%20C14%2C10.8659932%2010.8659932%2C14%207%2C14%20Z%22%2F%3E%3Cpath%20fill%3D%22%23F2F2F2%22%20d%3D%22M7%2C13%20C10.3137085%2C13%2013%2C10.3137085%2013%2C7%20C13%2C3.6862915%2010.3137085%2C1%207%2C1%20C3.6862915%2C1%201%2C3.6862915%201%2C7%20C1%2C10.3137085%203.6862915%2C13%207%2C13%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+ }
+ }
+
+ &:checked {
+ // Radio checked
+ + .sdc-radio__label:before {
+ background: no-repeat url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cg%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22%23009fdb%22%20fill-rule%3D%22nonzero%22%20d%3D%22M7%2C14%20C3.13400675%2C14%200%2C10.8659932%200%2C7%20C0%2C3.13400675%203.13400675%2C0%207%2C0%20C10.8659932%2C0%2014%2C3.13400675%2014%2C7%20C14%2C10.8659932%2010.8659932%2C14%207%2C14%20Z%20M7%2C13.1764706%20C10.4111705%2C13.1764706%2013.1764706%2C10.4111705%2013.1764706%2C7%20C13.1764706%2C3.58882949%2010.4111705%2C0.823529412%207%2C0.823529412%20C3.58882949%2C0.823529412%200.823529412%2C3.58882949%200.823529412%2C7%20C0.823529412%2C10.4111705%203.58882949%2C13.1764706%207%2C13.1764706%20Z%22%2F%3E%3Ccircle%20fill%3D%22%23009fdb%22%20cx%3D%227%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+ }
+
+ // Radio disabled and checked
+ &:disabled {
+ + .sdc-radio__label:before {
+ background: no-repeat url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cg%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22%23d2d2d2%22%20fill-rule%3D%22nonzero%22%20d%3D%22M7%2C14%20C3.13400675%2C14%200%2C10.8659932%200%2C7%20C0%2C3.13400675%203.13400675%2C0%207%2C0%20C10.8659932%2C0%2014%2C3.13400675%2014%2C7%20C14%2C10.8659932%2010.8659932%2C14%207%2C14%20Z%20M7%2C13.1764706%20C10.4111705%2C13.1764706%2013.1764706%2C10.4111705%2013.1764706%2C7%20C13.1764706%2C3.58882949%2010.4111705%2C0.823529412%207%2C0.823529412%20C3.58882949%2C0.823529412%200.823529412%2C3.58882949%200.823529412%2C7%20C0.823529412%2C10.4111705%203.58882949%2C13.1764706%207%2C13.1764706%20Z%22%2F%3E%3Ccircle%20fill%3D%22%23d2d2d2%22%20cx%3D%227%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+ }
+ }
+ }
+
+ &:not(:disabled) {
+ + .sdc-radio__label {
+ cursor: pointer;
+ }
+ }
+
+ &:disabled {
+ + .sdc-radio__label {
+ color: $gray;
+ }
+ }
+ }
+
+ .sdc-radio__label:not(:empty) {
+ padding-left: 14px;
+ @include body-1;
+ }
+}
diff --git a/components/radio/radio-checked.html b/components/radio/radio-checked.html
new file mode 100644
index 0000000..78283b3
--- /dev/null
+++ b/components/radio/radio-checked.html
@@ -0,0 +1,4 @@
+<div class="sdc-radio">
+ <input type="radio" name="grp1" checked class="sdc-radio__input" value="1">
+ <label class="sdc-radio__label">This is the radio label</label>
+</div>
diff --git a/components/radio/radio-disabled-checked.html b/components/radio/radio-disabled-checked.html
new file mode 100644
index 0000000..9ba6f0c
--- /dev/null
+++ b/components/radio/radio-disabled-checked.html
@@ -0,0 +1,4 @@
+<div class="sdc-radio">
+ <input type="radio" name="grp3" checked class="sdc-radio__input" value="1" disabled>
+ <label class="sdc-radio__label">This is the radio label</label>
+</div>
diff --git a/components/radio/radio-disabled.html b/components/radio/radio-disabled.html
new file mode 100644
index 0000000..332435f
--- /dev/null
+++ b/components/radio/radio-disabled.html
@@ -0,0 +1,4 @@
+<div class="sdc-radio">
+ <input type="radio" name="grp2" class="sdc-radio__input" value="1" disabled>
+ <label class="sdc-radio__label">This is the radio label</label>
+</div>
diff --git a/components/radio/radio-unchecked.html b/components/radio/radio-unchecked.html
new file mode 100644
index 0000000..6f6a00d
--- /dev/null
+++ b/components/radio/radio-unchecked.html
@@ -0,0 +1,4 @@
+<div class="sdc-radio">
+ <input type="radio" name="grp4" class="sdc-radio__input" value="1">
+ <label class="sdc-radio__label">This is the radio label</label>
+</div>
diff --git a/components/radioGroup/_radioGroup.scss b/components/radioGroup/_radioGroup.scss
new file mode 100644
index 0000000..6b33a79
--- /dev/null
+++ b/components/radioGroup/_radioGroup.scss
@@ -0,0 +1,20 @@
+.sdc-radio-group {
+ .sdc-radio-group__radios {
+ display: flex;
+ }
+ .sdc-radio-group__legend {
+ @include body-2-emphasis;
+ display: inline-block;
+ margin-bottom: 5px;
+ }
+ .sdc-radio__label {
+ @include body-1;
+ margin-right: 20px;
+ }
+ .vertical{
+ flex-direction: column;
+ .sdc-radio{
+ margin-bottom: 15px;
+ }
+ }
+}
diff --git a/components/radioGroup/radio-group-disabled.html b/components/radioGroup/radio-group-disabled.html
new file mode 100644
index 0000000..3cdedc0
--- /dev/null
+++ b/components/radioGroup/radio-group-disabled.html
@@ -0,0 +1,13 @@
+<div class='sdc-radio-group'>
+ <label class='sdc-radio-group__legend'>Group D</label>
+ <div class='sdc-radio-group__radios'>
+ <div class="sdc-radio">
+ <input type="radio" name="grp4" class="sdc-radio__input" value="1" disabled>
+ <label class="sdc-radio__label">option 1</label>
+ </div>
+ <div class="sdc-radio">
+ <input type="radio" name="grp4" class="sdc-radio__input" value="2" disabled>
+ <label class="sdc-radio__label">option 2</label>
+ </div>
+ </div>
+</div>
diff --git a/components/radioGroup/radio-group-no-title.html b/components/radioGroup/radio-group-no-title.html
new file mode 100644
index 0000000..76217fe
--- /dev/null
+++ b/components/radioGroup/radio-group-no-title.html
@@ -0,0 +1,12 @@
+<div class='sdc-radio-group'>
+ <div class='sdc-radio-group__radios'>
+ <div class="sdc-radio">
+ <input type="radio" name="grp5" class="sdc-radio__input" value="1">
+ <label class="sdc-radio__label">option 1</label>
+ </div>
+ <div class="sdc-radio">
+ <input type="radio" name="grp5" class="sdc-radio__input" value="2">
+ <label class="sdc-radio__label">option 2</label>
+ </div>
+ </div>
+</div>
diff --git a/components/radioGroup/radio-group-value.html b/components/radioGroup/radio-group-value.html
new file mode 100644
index 0000000..ac604a6
--- /dev/null
+++ b/components/radioGroup/radio-group-value.html
@@ -0,0 +1,13 @@
+<div class='sdc-radio-group'>
+ <label class='sdc-radio-group__legend'>Group B</label>
+ <div class='sdc-radio-group__radios'>
+ <div class="sdc-radio">
+ <input type="radio" name="grp2" checked class="sdc-radio__input" value="1">
+ <label class="sdc-radio__label">option 1</label>
+ </div>
+ <div class="sdc-radio">
+ <input type="radio" name="grp2" class="sdc-radio__input" value="2">
+ <label class="sdc-radio__label">option 2</label>
+ </div>
+ </div>
+</div>
diff --git a/components/radioGroup/radio-group.html b/components/radioGroup/radio-group.html
new file mode 100644
index 0000000..baa1444
--- /dev/null
+++ b/components/radioGroup/radio-group.html
@@ -0,0 +1,13 @@
+<div class='sdc-radio-group'>
+ <label class='sdc-radio-group__legend'>Group C</label>
+ <div class='sdc-radio-group__radios'>
+ <div class="sdc-radio">
+ <input type="radio" name="grp3" class="sdc-radio__input" value="1">
+ <label class="sdc-radio__label">option 1</label>
+ </div>
+ <div class="sdc-radio">
+ <input type="radio" name="grp3" class="sdc-radio__input" value="2">
+ <label class="sdc-radio__label">option 2</label>
+ </div>
+ </div>
+</div>
diff --git a/components/search-bar/_search-bar.scss b/components/search-bar/_search-bar.scss
new file mode 100644
index 0000000..3e2dfad
--- /dev/null
+++ b/components/search-bar/_search-bar.scss
@@ -0,0 +1,61 @@
+$inputHeight: 38px;
+.sdc-search-bar{
+ .search-bar-container{
+ display: flex;
+ align-items: flex-end;
+ .sdc-input-wrapper{
+ flex-grow: 1;
+ .sdc-input{
+ margin: 0;
+ .sdc-input__input{
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0;
+ }
+ }
+ }
+ .search-button{
+ width: $inputHeight;
+ height: $inputHeight - 2;
+ border: solid 1px $light-gray;
+ border-left: none;
+ background-color: $light-silver;
+ cursor: auto;
+ border-top-right-radius: 2px;
+ border-bottom-right-radius: 2px;
+
+ svg{
+ height: 20px;
+ width: 20px;
+ position: relative;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%,-50% );
+ path{
+ fill: $gray;
+ }
+ }
+ }
+
+ &.not-empty{
+ .sdc-input__input {
+ border-color: $blue;
+ }
+ .search-button{
+ background-color: $lighter-blue;
+ border-color: $blue;
+ cursor: pointer;
+ svg path{
+ fill: $blue;
+ }
+ &:hover {
+ background-color: $light-blue;
+ svg{
+ path{
+ fill: $white;
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/components/search-bar/search-bar-with-text.html b/components/search-bar/search-bar-with-text.html
new file mode 100644
index 0000000..f623c2f
--- /dev/null
+++ b/components/search-bar/search-bar-with-text.html
@@ -0,0 +1,17 @@
+<div class="sdc-search-bar">
+ <div class="search-bar-container not-empty">
+ <label class="sdc-input__label">search box example:</label>
+ <input class="sdc-input__input" type="text" name="undefined" placeholder="search text">
+ <span class="search-button magnify-button">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+ <defs>
+ <path id="search-a" d="M2,8.5 C2,4.9 4.9,2 8.5,2 C12.1,2 15,4.9 15,8.5 C15,10.3 14.3,11.9 13.1,13.1 C11.9,14.3 10.3,15 8.5,15 C4.9,15 2,12.1 2,8.5 M19.7,18.3 L15.2,13.8 C16.3,12.4 17,10.5 17,8.5 C17,3.8 13.2,0 8.5,0 C3.8,0 0,3.8 0,8.5 C0,13.2 3.8,17 8.5,17 C10.5,17 12.3,16.3 13.8,15.2 L18.3,19.7 C18.5,19.9 18.8,20 19,20 C19.2,20 19.5,19.9 19.7,19.7 C20.1,19.3 20.1,18.7 19.7,18.3"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd" transform="translate(2 2)">
+ <use fill="#000" xlink:href="#search-a"/>
+ </g>
+ </svg>
+ </span>
+ </div>
+</div>
+
diff --git a/components/search-bar/search-bar.html b/components/search-bar/search-bar.html
new file mode 100644
index 0000000..d1b9171
--- /dev/null
+++ b/components/search-bar/search-bar.html
@@ -0,0 +1,16 @@
+<div class="sdc-search-bar">
+ <div class="search-bar-container">
+ <label class="sdc-input__label">search box example:</label>
+ <input class="sdc-input__input" type="text" name="undefined" placeholder="search text">
+ <span class="search-button magnify-button">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+ <defs>
+ <path id="search-a" d="M2,8.5 C2,4.9 4.9,2 8.5,2 C12.1,2 15,4.9 15,8.5 C15,10.3 14.3,11.9 13.1,13.1 C11.9,14.3 10.3,15 8.5,15 C4.9,15 2,12.1 2,8.5 M19.7,18.3 L15.2,13.8 C16.3,12.4 17,10.5 17,8.5 C17,3.8 13.2,0 8.5,0 C3.8,0 0,3.8 0,8.5 C0,13.2 3.8,17 8.5,17 C10.5,17 12.3,16.3 13.8,15.2 L18.3,19.7 C18.5,19.9 18.8,20 19,20 C19.2,20 19.5,19.9 19.7,19.7 C20.1,19.3 20.1,18.7 19.7,18.3"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd" transform="translate(2 2)">
+ <use fill="#000" xlink:href="#search-a"/>
+ </g>
+ </svg>
+ </span>
+ </div>
+</div>
diff --git a/components/tabs/tabs-disabled.html b/components/tabs/tabs-disabled.html
new file mode 100644
index 0000000..5e67f2a
--- /dev/null
+++ b/components/tabs/tabs-disabled.html
@@ -0,0 +1,8 @@
+<div class="sdc-tabs sdc-tabs-header">
+ <ul class="sdc-tabs-list" role="tablist">
+ <li class="sdc-tab sdc-tab-active" role="tab">tab 1</li>
+ <li class="sdc-tab" role="tab" disabled>tab 2</li>
+ <li class="sdc-tab" role="tab" disabled>tab 3</li>
+ </ul>
+ <div class="sdc-tab-content" role="tabpanel"><div>This is the active tab content</div></div>
+</div>
diff --git a/components/tabs/tabs-header.html b/components/tabs/tabs-header.html
new file mode 100644
index 0000000..622dc32
--- /dev/null
+++ b/components/tabs/tabs-header.html
@@ -0,0 +1,8 @@
+<div class="sdc-tabs sdc-tabs-header">
+ <ul class="sdc-tabs-list" role="tablist">
+ <li class="sdc-tab sdc-tab-active" role="tab">tab 1</li>
+ <li class="sdc-tab" role="tab">tab 2</li>
+ <li class="sdc-tab" role="tab">tab 3</li>
+ </ul>
+ <div class="sdc-tab-content" role="tabpanel"><div>This is the active tab content</div></div>
+</div>
diff --git a/components/tabs/tabs-menu.html b/components/tabs/tabs-menu.html
new file mode 100644
index 0000000..753886f
--- /dev/null
+++ b/components/tabs/tabs-menu.html
@@ -0,0 +1,8 @@
+<div class="sdc-tabs sdc-tabs-menu">
+ <ul class="sdc-tabs-list" role="tablist">
+ <li class="sdc-tab sdc-tab-active" role="tab">tab 1</li>
+ <li class="sdc-tab" role="tab">tab 2</li>
+ <li class="sdc-tab" role="tab">tab 3</li>
+ </ul>
+ <div class="sdc-tab-content" role="tabpanel"><div>This is the active tab content</div></div>
+</div>
diff --git a/components/tabs/tabs.scss b/components/tabs/tabs.scss
new file mode 100644
index 0000000..f5df0ba
--- /dev/null
+++ b/components/tabs/tabs.scss
@@ -0,0 +1,35 @@
+.sdc-tabs {
+ .sdc-tab {
+ display: inline-block;
+ cursor: pointer;
+ text-transform: capitalize;
+ color: $dark-gray;
+ padding: 0px 10px 7px 10px;
+ margin-right: 20px;
+ &:last-child {
+ margin-right: 0;
+ }
+ &.sdc-tab-active {
+ color: $blue;
+ border-bottom: 2px solid $blue;
+ }
+ &[disabled] {
+ opacity: 0.3;
+ cursor: default;
+ }
+ }
+ &.sdc-tabs-header {
+ .sdc-tab {
+ @include heading-2;
+ }
+ }
+ &.sdc-tabs-menu {
+ .sdc-tab {
+ @include body-1;
+ padding: 0px 10px 4px 10px;
+ }
+ }
+ .sdc-tab-content {
+ margin-top: 30px;
+ }
+}
diff --git a/components/tag-cloud/_tag-cloud.scss b/components/tag-cloud/_tag-cloud.scss
new file mode 100644
index 0000000..6a94a10
--- /dev/null
+++ b/components/tag-cloud/_tag-cloud.scss
@@ -0,0 +1,116 @@
+.sdc-tag-cloud-new-item-field{
+ display: flex;
+ align-items: flex-end;
+ sdc-input{
+ flex-grow: 1;
+ .sdc-input{
+ margin-bottom: 0;
+ .sdc-input__input{
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0;
+ }
+ }
+ }
+ .not-empty{
+ .sdc-input__input {
+ border-color: $blue;
+ }
+
+ }
+ .error{
+ .sdc-input__input {
+ border: solid 1px $red;
+ color: $red;
+ outline: none;
+ }
+ }
+ .add-button{
+ cursor: pointer;
+ height: 36px;
+ width: 36px;
+ text-align: center;
+ background-color: $lighter-blue;
+ border: solid 1px $blue;
+ border-left: none;
+ border-top-right-radius: 2px;
+ &.disabled{
+ cursor: default;
+ background-color: $light-silver;
+ border-color: $light-gray;
+ .plus-icon svg g{
+ fill: $gray;
+ }
+ }
+ .plus-icon{
+ line-height: 46px;
+ svg{
+ height: 20px;
+ width: 20px;
+ g{
+ fill: $blue;
+ }
+ }
+ }
+ }
+
+ &.not-empty{
+ .add-button:hover{
+ background-color: $light-blue;
+ svg{
+ g{
+ fill: $white;
+ }
+ }
+ }
+ }
+}
+
+.sdc-list-container{
+ height: 120px;
+ overflow-y: auto;
+ border: solid 1px $light-gray;
+ border-top: none;
+ border-radius: 2px;
+ background-color: $white;
+ padding: 10px 10px 0 0;
+ .sdc-tag-item{
+ padding: 0 0 10px 10px;
+ display: inline-block;
+ .tag-item{
+ min-width: 100px;
+ background-color: $white;
+ border: solid 1px $light-gray;
+ border-radius: 20px;
+ height: 28px;
+ line-height: 28px;
+ padding: 0 10px;
+ color: $text-black;
+ @include body-3;
+ &.view-only{
+ border-color: $silver;
+ }
+ .delete-item{
+ cursor: pointer;
+ padding-left: 10px;
+ float: right;
+ svg{
+ height: 12px;
+ width: 12px;
+ margin-top: 8px;
+ g{
+ fill: $dark-gray;
+ }
+ }
+ }
+ &:hover:not(.view-only){
+ background-color: $lighter-blue;
+ border-color: $lighter-blue;
+ .delete-item{
+ svg g{
+ fill: $blue;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/components/tag-cloud/disabled-list.html b/components/tag-cloud/disabled-list.html
new file mode 100644
index 0000000..6091525
--- /dev/null
+++ b/components/tag-cloud/disabled-list.html
@@ -0,0 +1,31 @@
+<div class="sdc-tag-cloud-new-item-field">
+ <div class="sdc-input">
+ <label class="sdc-input__label">Please Enter value</label>
+ <input class="sdc-input__input disabled" type="text" name="undefined" placeholder="Type a value and then click enter or '+'" disabled="disabled">
+ </div>
+ <div class="add-button disabled">
+ <span class="plus-icon">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+ <defs>
+ <path id="add-a" d="M15,7 L9,7 L9,1 C9,0.4 8.6,0 8,0 C7.4,0 7,0.4 7,1 L7,7 L1,7 C0.4,7 0,7.4 0,8 C0,8.6 0.4,9 1,9 L7,9 L7,15 C7,15.6 7.4,16 8,16 C8.6,16 9,15.6 9,15 L9,9 L15,9 C15.6,9 16,8.6 16,8 C16,7.4 15.6,7 15,7"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd" transform="translate(4 4)">
+ <use xlink:href="#add-a"/>
+ </g>
+ </svg>
+ </span>
+ </div>
+</div>
+<div class="sdc-list-container">
+ <div class="sdc-tag-item">
+ <div class="tag-item view-only">
+ <span>aaa</span>
+ </div>
+ </div>
+
+ <div class="sdc-tag-item">
+ <div class="tag-item view-only">
+ <span>bbb</span>
+ </div>
+ </div>
+</div>
diff --git a/components/tag-cloud/list-with-active-add-button.html b/components/tag-cloud/list-with-active-add-button.html
new file mode 100644
index 0000000..8bde59f
--- /dev/null
+++ b/components/tag-cloud/list-with-active-add-button.html
@@ -0,0 +1,50 @@
+<div class="sdc-tag-cloud-new-item-field">
+ <div class="sdc-input">
+ <label class="sdc-input__label">Please Enter value</label>
+ <input class="sdc-input__input" type="text" name="undefined" placeholder="Type a value and then click enter or '+'">
+ </div>
+ <div class="add-button">
+ <span class="plus-icon">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+ <defs>
+ <path id="add-a" d="M15,7 L9,7 L9,1 C9,0.4 8.6,0 8,0 C7.4,0 7,0.4 7,1 L7,7 L1,7 C0.4,7 0,7.4 0,8 C0,8.6 0.4,9 1,9 L7,9 L7,15 C7,15.6 7.4,16 8,16 C8.6,16 9,15.6 9,15 L9,9 L15,9 C15.6,9 16,8.6 16,8 C16,7.4 15.6,7 15,7"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd" transform="translate(4 4)">
+ <use xlink:href="#add-a"/>
+ </g>
+ </svg>
+ </span>
+ </div>
+</div>
+<div class="sdc-list-container">
+ <div class="sdc-tag-item">
+ <div class="tag-item">
+ <span>aaa</span>
+ <span class="delete-item">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+ <defs>
+ <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd">
+ <use xlink:href="#close-a"/>
+ </g>
+ </svg>
+ </span>
+ </div>
+ </div>
+ <div class="sdc-tag-item">
+ <div class="tag-item">
+ <span>bbb</span>
+ <span class="delete-item">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+ <defs>
+ <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd">
+ <use xlink:href="#close-a"/>
+ </g>
+ </svg>
+ </span>
+ </div>
+ </div>
+</div>
diff --git a/components/tag-cloud/list-with-some-read-only-items.html b/components/tag-cloud/list-with-some-read-only-items.html
new file mode 100644
index 0000000..0db7a07
--- /dev/null
+++ b/components/tag-cloud/list-with-some-read-only-items.html
@@ -0,0 +1,61 @@
+<div class="sdc-tag-cloud-new-item-field">
+ <div class="sdc-input">
+ <label class="sdc-input__label">Please Enter value</label>
+ <input class="sdc-input__input" type="text" name="undefined" placeholder="Type a value and then click enter or '+'">
+ </div>
+
+ <div class="add-button disabled">
+ <span class="plus-icon">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+ <defs>
+ <path id="add-a" d="M15,7 L9,7 L9,1 C9,0.4 8.6,0 8,0 C7.4,0 7,0.4 7,1 L7,7 L1,7 C0.4,7 0,7.4 0,8 C0,8.6 0.4,9 1,9 L7,9 L7,15 C7,15.6 7.4,16 8,16 C8.6,16 9,15.6 9,15 L9,9 L15,9 C15.6,9 16,8.6 16,8 C16,7.4 15.6,7 15,7"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd" transform="translate(4 4)">
+ <use xlink:href="#add-a"/>
+ </g>
+ </svg>
+ </span>
+ </div>
+</div>
+<div class="sdc-list-container">
+ <div class="sdc-tag-item">
+ <div class="tag-item">
+ <span>aaa</span>
+ <span class="delete-item">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+ <defs>
+ <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd">
+ <use xlink:href="#close-a"/>
+ </g>
+ </svg>
+ </span>
+ </div>
+ </div>
+ <div class="sdc-tag-item">
+ <div class="tag-item view-only">
+ <span>bbb</span>
+ </div>
+ </div>
+ <div class="sdc-tag-item">
+ <div class="tag-item">
+ <span>ccc</span>
+ <span class="delete-item">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+ <defs>
+ <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd">
+ <use xlink:href="#close-a"/>
+ </g>
+ </svg>
+ </span>
+ </div>
+ </div>
+ <tag class="sdc-tag-item">
+ <div class="tag-item view-only">
+ <span>ddd</span>
+ </div>
+ </tag>
+</div>
diff --git a/components/tag-cloud/list-with-unique-error.html b/components/tag-cloud/list-with-unique-error.html
new file mode 100644
index 0000000..14de80c
--- /dev/null
+++ b/components/tag-cloud/list-with-unique-error.html
@@ -0,0 +1,52 @@
+<div class="sdc-tag-cloud-new-item-field">
+ <div class="sdc-input">
+ <label class="sdc-input__label">Please Enter value</label>
+ <input class="sdc-input__input" type="text" name="undefined" placeholder="Type a value and then click enter or '+'">
+ </div>
+ <div class="add-button disabled">
+ <span class="plus-icon">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+ <defs>
+ <path id="add-a" d="M15,7 L9,7 L9,1 C9,0.4 8.6,0 8,0 C7.4,0 7,0.4 7,1 L7,7 L1,7 C0.4,7 0,7.4 0,8 C0,8.6 0.4,9 1,9 L7,9 L7,15 C7,15.6 7.4,16 8,16 C8.6,16 9,15.6 9,15 L9,9 L15,9 C15.6,9 16,8.6 16,8 C16,7.4 15.6,7 15,7"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd" transform="translate(4 4)">
+ <use xlink:href="#add-a"/>
+ </g>
+ </svg>
+ </span>
+ </div>
+</div>
+<div class="sdc-list-container">
+ <div class="sdc-tag-item">
+ <div class="tag-item">
+ <span>aaa</span>
+ <span class="delete-item">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+ <defs>
+ <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd">
+ <use xlink:href="#close-a"/>
+ </g>
+ </svg>
+ </span>
+ </div>
+ </div>
+ <div class="sdc-tag-item">
+ <div class="tag-item">
+ <span>bbb</span>
+ <span class="delete-item">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+ <defs>
+ <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd">
+ <use xlink:href="#close-a"/>
+ </g>
+ </svg>
+ </span>
+ </div>
+ </div>
+</div>
+<div class="error-message">This value is already in the list</div>
+
diff --git a/components/tag-cloud/simple-list.html b/components/tag-cloud/simple-list.html
new file mode 100644
index 0000000..075751f
--- /dev/null
+++ b/components/tag-cloud/simple-list.html
@@ -0,0 +1,50 @@
+<div class="sdc-tag-cloud-new-item-field">
+ <div class="sdc-input">
+ <label class="sdc-input__label">Please Enter value</label>
+ <input class="sdc-input__input" type="text" name="undefined" placeholder="Type a value and then click enter or '+'">
+ </div>
+ <div class="add-button disabled">
+ <span class="plus-icon">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+ <defs>
+ <path id="add-a" d="M15,7 L9,7 L9,1 C9,0.4 8.6,0 8,0 C7.4,0 7,0.4 7,1 L7,7 L1,7 C0.4,7 0,7.4 0,8 C0,8.6 0.4,9 1,9 L7,9 L7,15 C7,15.6 7.4,16 8,16 C8.6,16 9,15.6 9,15 L9,9 L15,9 C15.6,9 16,8.6 16,8 C16,7.4 15.6,7 15,7"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd" transform="translate(4 4)">
+ <use xlink:href="#add-a"/>
+ </g>
+ </svg>
+ </span>
+ </div>
+</div>
+<div class="sdc-list-container">
+ <div class="sdc-tag-item">
+ <div class="tag-item">
+ <span>aaa</span>
+ <span class="delete-item">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+ <defs>
+ <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd">
+ <use xlink:href="#close-a"/>
+ </g>
+ </svg>
+ </span>
+ </div>
+ </div>
+ <div class="sdc-tag-item">
+ <div class="tag-item">
+ <span>bbb</span>
+ <span class="delete-item">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+ <defs>
+ <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd">
+ <use xlink:href="#close-a"/>
+ </g>
+ </svg>
+ </span>
+ </div>
+ </div>
+</div>
diff --git a/components/textarea/_textarea.scss b/components/textarea/_textarea.scss
new file mode 100644
index 0000000..a666d54
--- /dev/null
+++ b/components/textarea/_textarea.scss
@@ -0,0 +1,77 @@
+.sdc-textarea {
+ margin-bottom: 10px;
+
+ .sdc-textarea__label {
+ margin-bottom: 5px;
+ display: block;
+ @include body-3-emphasis;
+
+ &.required::before {
+ content: '*';
+ color: $red;
+ margin: 0 4px 0 0;
+ }
+ }
+
+ .sdc-textarea__textarea {
+ @include box-sizing;
+ padding: 0 10px;
+ width: 100%;
+ border: solid 1px $light-gray;
+ border-radius:2px;
+ color: $dark-gray;
+
+ &.error, &.error:focus, &.error:disabled {
+ border: solid 1px $red;
+ color: $red;
+ outline: none;
+ }
+
+ &:read-only{
+ border: none;
+ outline: none;
+ color: $text-black
+ }
+ &:-moz-read-only { /* For Firefox */
+ border: none;
+ outline: none;
+ color: $text-black
+ }
+
+ &:focus {
+ border-color: $blue;
+ outline: 0 none;
+ color: $text-black;
+ }
+
+ &:disabled {
+ background: $light-silver;
+ color: $gray;
+ }
+
+ &::-webkit-input-placeholder /* Chrome/Opera/Safari */ {
+ color: $gray;
+ @include base-font-italic;
+ }
+ &::-moz-placeholder /* Firefox 19+ */ {
+ color: $gray;
+ @include base-font-italic;
+ }
+ &:-moz-placeholder /* Firefox 18- */ {
+ color: $gray;
+ @include base-font-italic;
+ }
+ &:-ms-input-placeholder /* IE 10+ */
+ {
+ color: $gray;
+ @include base-font-italic;
+ }
+ }
+
+ .sdc-label__error{
+ margin-top: 2px;
+ margin-left: 2px;
+ @include body-3;
+ }
+
+}
diff --git a/components/textarea/textarea-disabled.html b/components/textarea/textarea-disabled.html
new file mode 100644
index 0000000..fb040f9
--- /dev/null
+++ b/components/textarea/textarea-disabled.html
@@ -0,0 +1,3 @@
+<div class="sdc-textarea">
+ <textarea class="sdc-textarea__textarea disabled" disabled="disabled"></textarea>
+</div>
diff --git a/components/textarea/textarea-error.html b/components/textarea/textarea-error.html
new file mode 100644
index 0000000..4ac5dae
--- /dev/null
+++ b/components/textarea/textarea-error.html
@@ -0,0 +1,3 @@
+<div class="sdc-textarea">
+ <textarea class="sdc-textarea__textarea error"></textarea>
+</div>
diff --git a/components/textarea/textarea-maxlength.html b/components/textarea/textarea-maxlength.html
new file mode 100644
index 0000000..f432838
--- /dev/null
+++ b/components/textarea/textarea-maxlength.html
@@ -0,0 +1,3 @@
+<div class="sdc-textarea">
+ <textarea class="sdc-textarea__textarea" maxlength="5"></textarea>
+</div>
diff --git a/components/textarea/textarea-placeholder.html b/components/textarea/textarea-placeholder.html
new file mode 100644
index 0000000..89dcdc5
--- /dev/null
+++ b/components/textarea/textarea-placeholder.html
@@ -0,0 +1,3 @@
+<div class="sdc-textarea">
+ <textarea class="sdc-textarea__textarea" placeholder="Text..." data-tests-id="customTestId"></textarea>
+</div>
diff --git a/components/textarea/textarea-required.html b/components/textarea/textarea-required.html
new file mode 100644
index 0000000..0f7ed47
--- /dev/null
+++ b/components/textarea/textarea-required.html
@@ -0,0 +1,4 @@
+<div class="sdc-textarea">
+ <label class="sdc-textarea__label required">Please Enter Value</label>
+ <textarea class="sdc-textarea__textarea"> </textarea>
+</div>
diff --git a/components/textarea/textarea.html b/components/textarea/textarea.html
new file mode 100644
index 0000000..b455dd4
--- /dev/null
+++ b/components/textarea/textarea.html
@@ -0,0 +1,4 @@
+<div class="sdc-textarea">
+ <label class="sdc-textarea__label">Enter text:</label>
+ <textarea class="sdc-textarea__textarea"></textarea>
+</div>
diff --git a/components/tile/_tile.scss b/components/tile/_tile.scss
new file mode 100644
index 0000000..80629cf
--- /dev/null
+++ b/components/tile/_tile.scss
@@ -0,0 +1,172 @@
+.sdc-tile {
+ $tile-full-width: 204px;
+ $tile-full-height: 204px;
+ $tile-padding: 10px;
+
+ $header-height: $body-font-1;
+ $footer-height: 23px;
+ $content-height: 100%;
+
+ width: $tile-full-width;
+ height: $tile-full-height;
+
+ padding: $tile-padding;
+ border: 1px solid $silver;
+ @include border-radius(2px);
+ @include box-sizing;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ position: relative;
+ cursor: pointer;
+ user-select: none;
+
+ background: $white;
+ color: $text-black;
+ fill: $dark-gray;
+ transition: box-shadow 0.3s ease-in-out;
+ @include body-3;
+ @include box-shadow(0 1px 4px 0 rgba($text-black, 0.06));
+
+ &:hover {
+ border-color: $light-gray;
+ @include box-shadow( 0 10px 30px 0 rgba($text-black, 0.25));
+ }
+
+ .blue {
+ color: $blue;
+ fill: $blue;
+ }
+
+ .purple {
+ color: $purple;
+ fill: $purple;
+ }
+
+ .centered {
+ &.sdc-tile-footer, .sdc-tile-info-line {
+ text-align: center;
+ }
+ }
+
+ .sdc-tile-header {
+ height: 1.1em;
+ line-height: 1em;
+ @include ellipsis($display: block);
+
+ font-size: $body-font-1;
+ text-transform: uppercase;
+ }
+
+ .sdc-tile-content {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ height: $content-height;
+
+ .sdc-tile-content-icon {
+ margin-top: 27px;
+ text-align: center;
+
+ svg {
+ width: 50px;
+ height: 50px;
+
+ &.__vsp {
+ width: 60px;
+ height: 40px;
+ }
+ &.__vlm {
+ width: 45px;
+ height: 53px;
+ }
+ &.__vendor {
+ width: 53px;
+ height: 47px;
+ }
+ }
+ }
+
+ .sdc-tile-content-info {
+ display: flex;
+ flex-direction: column;
+
+ .sdc-tile-info-line {
+ text-transform: capitalize;
+ @include ellipsis($display: inline-block);
+
+ button {
+ height: 1.67em;
+ width: initial;
+ margin-bottom: 5px;
+ margin-top: 1px;
+ padding: 0 8px;
+ font-size: inherit;
+ }
+ &.supertitle {
+ height: 1.1em;
+ line-height: 1.2;
+ color: $gray;
+ }
+ &.title {
+ height: 1.6em;
+ line-height: 1.8;
+ color: $text-black;
+ @include heading-5;
+ }
+ &.subtitle {
+ height: 1.5em;
+ line-height: 1.6;
+ color: $dark-gray;
+ }
+ &:last-child {
+ margin-bottom: 4px;
+ }
+ }
+ }
+ }
+
+ .sdc-tile-footer {
+ height: $footer-height;
+ @include box-sizing;
+
+ border-top: 1px solid $silver;
+ padding-top: 8px;
+
+ color: $dark-gray;
+ fill: $dark-gray;
+ text-transform: capitalize;
+
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .sdc-tile-footer-cell {
+ &:first-child {
+ @include ellipsis;
+ }
+ svg{
+ width: 20px;
+ height: 12px;
+ }
+ button {
+ width: initial;
+ height: initial;
+ @include body-2;
+
+ .svg-icon-wrapper {
+ .svg-icon-label {
+ font-size: inherit;
+ }
+ svg {
+ width: 9px;
+ height: 9px;
+ }
+ }
+ }
+ }
+
+ }
+}
diff --git a/components/tile/tile-without-footer.html b/components/tile/tile-without-footer.html
new file mode 100644
index 0000000..514a19e
--- /dev/null
+++ b/components/tile/tile-without-footer.html
@@ -0,0 +1,14 @@
+<div class="sdc-tile">
+ <div class="sdc-tile-header blue">Header</div>
+ <div class="sdc-tile-content">
+ <div class="sdc-tile-content-icon blue">
+ <div class="svg-icon-wrapper">
+ <!-- insert SVG -->
+ </div>
+ </div>
+ <div class="sdc-tile-content-info">
+ <div class="sdc-tile-info-line supertitle">Supertitle</div>
+ <div class="sdc-tile-info-line title">Title</div>
+ </div>
+ </div>
+</div>
diff --git a/components/tile/vendor-tile.html b/components/tile/vendor-tile.html
new file mode 100644
index 0000000..ede3fbf
--- /dev/null
+++ b/components/tile/vendor-tile.html
@@ -0,0 +1,26 @@
+<div class="sdc-tile">
+ <div class="sdc-tile-header"></div>
+ <div class="sdc-tile-content">
+ <div class="sdc-tile-content-icon dark-gray">
+ <div class="svg-icon-wrapper">
+ <!-- insert SVG -->
+ </div>
+ </div>
+ <div class="sdc-tile-content-info centered">
+ <div class="sdc-tile-info-line title">Vendor Name</div>
+ <div class="sdc-tile-info-line">
+ <button class="sdc-button sdc-button-outline-rounded sdc-button__dark-gray">100 VSPs</button>
+ </div>
+ </div>
+ </div>
+ <div class="sdc-tile-footer centered">
+ <span class="sdc-tile-footer-cell">
+ <button class="sdc-button sdc-button-link sdc-button__primary sdc-button__with-icon">
+ <div class="svg-icon-wrapper sdc-button-icon right">
+ <!-- insert SVG -->
+ <span class="svg-icon-label sdc-button-label">Create new VSP</span>
+ </div>
+ </button>
+ </span>
+ </div>
+</div>
diff --git a/components/tile/vfc-tile.html b/components/tile/vfc-tile.html
new file mode 100644
index 0000000..7b4753e
--- /dev/null
+++ b/components/tile/vfc-tile.html
@@ -0,0 +1,17 @@
+<div class="sdc-tile">
+ <div class="sdc-tile-header purple">VFC</div>
+ <div class="sdc-tile-content">
+ <div class="sdc-tile-content-icon">
+ <div class="svg-icon-wrapper">
+ <!-- insert SVG -->
+ </div>
+ </div>
+ <div class="sdc-tile-content-info">
+ <div class="sdc-tile-info-line title">Title</div>
+ <div class="sdc-tile-info-line subtitle">V 1.0</div>
+ </div>
+ </div>
+ <div class="sdc-tile-footer">
+ <span class="sdc-tile-footer-cell">Certified</span>
+ </div>
+</div>
diff --git a/components/tile/vlm-tile.html b/components/tile/vlm-tile.html
new file mode 100644
index 0000000..be629a1
--- /dev/null
+++ b/components/tile/vlm-tile.html
@@ -0,0 +1,22 @@
+<div class="sdc-tile">
+ <div class="sdc-tile-header purple">VLM</div>
+ <div class="sdc-tile-content">
+ <div class="sdc-tile-content-icon purple">
+ <div class="svg-icon-wrapper">
+ <!-- insert SVG -->
+ </div>
+ </div>
+ <div class="sdc-tile-content-info">
+ <div class="sdc-tile-info-line title">VLM Name</div>
+ </div>
+ </div>
+ <div class="sdc-tile-footer">
+ <span class="sdc-tile-footer-cell">Certified</span>
+ <span class="sdc-tile-footer-cell">
+ <div class="svg-icon-wrapper left">
+ <!-- insert SVG -->
+ <span class="svg-icon-label">Owner</span>
+ </div>
+ </span>
+ </div>
+</div>
diff --git a/components/tile/vsp-tile.html b/components/tile/vsp-tile.html
new file mode 100644
index 0000000..1a3dc1d
--- /dev/null
+++ b/components/tile/vsp-tile.html
@@ -0,0 +1,17 @@
+<div class="sdc-tile">
+ <div class="sdc-tile-header blue">VSP</div>
+ <div class="sdc-tile-content">
+ <div class="sdc-tile-content-icon blue">
+ <div class="svg-icon-wrapper">
+ <!-- insert SVG -->
+ </div>
+ </div>
+ <div class="sdc-tile-content-info">
+ <div class="sdc-tile-info-line supertitle">VLM</div>
+ <div class="sdc-tile-info-line title">VSP Name</div>
+ </div>
+ </div>
+ <div class="sdc-tile-footer">
+ <span class="sdc-tile-footer-cell">Draft</span>
+ </div>
+</div>
diff --git a/components/tooltip/_tooltip.scss b/components/tooltip/_tooltip.scss
new file mode 100644
index 0000000..3f255ed
--- /dev/null
+++ b/components/tooltip/_tooltip.scss
@@ -0,0 +1,124 @@
+/* Tooltip animation */
+@keyframes animation-fade-in-from-bottom {
+ from {
+ transform: translateY(10px);
+ opacity: 0;
+ }
+ to {
+ transform: translateY(0px);
+ opacity: 1;
+ }
+}
+
+/* Tooltop styles */
+.sdc-tooltip {
+ @include base-font-regular;
+ line-height: 14px;
+ font-size: 12px;
+ max-width: 223px;
+ background-color: $black;
+ color: $white;
+ text-align: left;
+ border-radius: 2px;
+ padding: 5px 11px;
+ position: absolute;
+ z-index: 1000;
+ display: block;
+ opacity: 0;
+ transition: opacity 300ms;
+ border: solid 1px $black;
+ animation: animation-fade-in-from-bottom .75s ease-in-out; /* tooltip animation */
+}
+
+.sdc-tooltip-show {
+ opacity: 1;
+}
+
+.sdc-tooltip::after {
+ content: "";
+ position: absolute;
+ border-style: solid;
+}
+
+.sdc-tooltip-top::after {
+ top: 100%;
+ left: 10px;
+ margin-left: -5px;
+ border-width: 5px;
+ border-color: $black transparent transparent transparent;
+}
+.sdc-tooltip-top-right__bottom::after {
+ right: 10px;
+ left:auto;
+}
+.sdc-tooltip-top-center__middle::after {
+ left: 50%;
+}
+
+.sdc-tooltip-bottom::after {
+ bottom: 100%;
+ left: 10px;
+ margin-left: -5px;
+ border-width: 5px;
+ border-color: transparent transparent $black transparent;
+}
+.sdc-tooltip-bottom-right__bottom::after {
+ right: 10px;
+ left:auto;
+}
+.sdc-tooltip-bottom-center__middle::after {
+ left: 50%;
+}
+
+.sdc-tooltip-left::after {
+ top: 10px; /*50%;*/
+ left: 100%;
+ margin-top: -5px;
+ border-width: 5px;
+ border-color: transparent transparent transparent $black;
+}
+.sdc-tooltip-left-right__bottom::after {
+ bottom: 10px;
+ top: auto;
+}
+.sdc-tooltip-left-center__middle::after {
+ top: 50%
+}
+
+.sdc-tooltip-right::after {
+ top: 10px;
+ right: 100%;
+ margin-top: -5px;
+ border-width: 5px;
+ border-color: transparent $black transparent transparent;
+}
+.sdc-tooltip-right-right__bottom::after {
+ bottom: 10px;
+ top: auto;
+}
+.sdc-tooltip-right-center__middle::after {
+ top: 50%
+}
+
+/* Tooltip template */
+.sdc-tooltip-template-title {
+ @include base-font-regular;
+ font-size: 12px;
+ font-weight: normal;
+ background-color: $black;
+ color: $white; /* silver */
+}
+
+.sdc-tooltip-template-big-title {
+ font-size: 20px;
+ line-height: 24px;
+}
+
+.sdc-tooltip-template-content {
+ @include base-font-regular;
+ font-size: 12px;
+ font-weight: normal;
+ background-color: $black;
+ color: $white;
+ line-height: 14px;
+}
diff --git a/components/validation/_validation.scss b/components/validation/_validation.scss
new file mode 100644
index 0000000..771a242
--- /dev/null
+++ b/components/validation/_validation.scss
@@ -0,0 +1,9 @@
+.sdc-validation {
+
+ font-size: $body-font-4;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ margin-top: 10px;
+
+}
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..a7ddc43
--- /dev/null
+++ b/index.js
@@ -0,0 +1,7 @@
+var icons_map_js = require('./lib/icons-map.js');
+
+'use strict';
+
+module.exports = {
+ iconsMap: icons_map_js.default
+};
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..0569939
--- /dev/null
+++ b/package.json
@@ -0,0 +1,34 @@
+{
+ "name": "onap-ui-common",
+ "version": "1.0.57",
+ "private": false,
+ "license": "MIT",
+ "author": "",
+ "main": "index.js",
+ "description": "Onap-UI common library contains icons map and styles",
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/onap-sdc/onap-ui-common"
+ },
+ "bugs": {
+ "url": "https://github.com/onap-sdc/onap-ui-common/issues"
+ },
+ "homepage": "https://github.com/onap-sdc/onap-ui-common#readme",
+ "files": [
+ "lib",
+ "README.md"
+ ],
+ "scripts": {
+ "prebuild": "node utils/delete-folders.js",
+ "build": "npm run build:common",
+ "build:common": "npm run prebuild && npm run build:icons && npm run build:copy-files && npm run build:scss",
+ "build:icons": "node utils/create-svg-icons-map.js",
+ "build:scss": "node-sass styles/style.scss -o lib",
+ "build:copy-files": "copyfiles -f styles/common/mixins.scss lib/scss && copyfiles -f styles/common/variables.scss lib/scss"
+ },
+ "devDependencies": {
+ "copyfiles": "^2.0.0",
+ "delete": "^1.1.0",
+ "node-sass": "^4.9.2"
+ }
+}
diff --git a/styles/_common.scss b/styles/_common.scss
new file mode 100644
index 0000000..7daac20
--- /dev/null
+++ b/styles/_common.scss
@@ -0,0 +1,7 @@
+@import "common/normalize";
+@import "common/variables";
+@import "common/mixins";
+@import "common/typography";
+@import "common/base";
+@import "common/icons";
+@import "common/animation";
diff --git a/styles/_components.scss b/styles/_components.scss
new file mode 100644
index 0000000..161dc1a
--- /dev/null
+++ b/styles/_components.scss
@@ -0,0 +1,25 @@
+@import "../components/button/button";
+@import "../components/tile/tile";
+@import "../components/checkbox/checkbox";
+@import "../components/radio/radio";
+@import "../components/radioGroup/radioGroup";
+@import "../components/tabs/tabs";
+@import "../components/icon/icon";
+@import "../components/input/input";
+@import "../components/dropdown/dropdown";
+@import "../components/modal/modal";
+@import "../components/menu/menu";
+@import "../components/filter-bar/_filter-bar";
+@import "../components/search-bar/_search-bar";
+@import "../components/checklist/checklist";
+@import "../components/autocomplete/autocomplete";
+@import "../components/tooltip/tooltip";
+@import "../components/tag-cloud/_tag-cloud";
+@import "../components/notification/notification";
+@import "../components/notifications-container/notifications-container";
+@import "../components/accordion/accordion";
+@import "../components/panel/panel";
+@import "../components/validation/validation";
+@import "../components/loader/loader";
+@import "../components/multiline-ellipsis/multiline_ellipsis";
+@import "../components/textarea/textarea";
diff --git a/styles/common/_animation.scss b/styles/common/_animation.scss
new file mode 100644
index 0000000..659bd3b
--- /dev/null
+++ b/styles/common/_animation.scss
@@ -0,0 +1,149 @@
+/***********************************************************************************
+ VERTICAL COLLAPSE-EXPEND TRANSITION ANIMATION PAIR.
+
+ We use the 'transition-vertical-collapse' for the collapse/idle block element,
+ and the 'transition-vertical-expand' to expend that element.
+
+ -important: The element that will be used for the animation should be
+ a block element, adn have a content or width and height settings for it to work.
+*********************************************************************************/
+
+/**
+Enable to fold an expended block element
+@param $offsetY - The top position from which the drop down should fold
+ */
+@mixin keyframes-expand-animation($name, $maxHeight, $boxShadow:0 0 12px 0px rgba(0,0,0,.3), $margin:0){
+ @keyframes #{$name} {
+ 0% {
+ opacity: 0;
+ max-height: 0;
+ overflow: hidden;
+ box-shadow: 0 0 0px 0px rgba(0,0,0,.3);
+ margin:0;
+ }
+ 10% {
+ opacity: 1;
+ margin: $margin;
+ }
+ 50% {
+ box-shadow: $boxShadow;
+ }
+ 99%{
+ max-height:$maxHeight;
+
+ overflow: hidden;
+ }
+ 100%{
+ opacity: 1;
+ max-height:$maxHeight;
+ overflow: auto;
+ }
+ }
+}
+
+/**
+Enable to expend a folded block element
+@param $maxHeight - most of the animation is done over the max-height property
+ so we have to set the maximum height the expended element can expend to.
+ */
+@mixin keyframes-collapse-animation($name, $maxHeight, $boxShadow:0 0 12px 0px rgba(0,0,0,.3)){
+ @keyframes #{$name} {
+ 0% {
+ opacity: 1;
+ max-height:$maxHeight;
+ box-shadow: $boxShadow;
+ overflow: hidden;
+ }
+ 40%{
+ opacity: 1;
+ }
+ 99%{
+ opacity: 0;
+ max-height: 0;
+ overflow: hidden;
+ box-shadow: 0 0 0px 0px rgba(0,0,0,.3);
+ }
+ 100%{
+ opacity: 0;
+ max-height: 0;
+ overflow: auto;
+ }
+ }
+}
+
+/********************************************************************************
+ SIMPLE FADE-IN KEYFRAMES ANIMATION (Used in tooltip for example)
+
+ we use 'mixin-keyframes-fade-in-vertically' to create css @keyframes rule that
+ we later can use with animation property inside our prefered css rules:
+ .our_class {
+ ...
+ animation: keyframes-fade-in-vertically 1s ease-out;
+ ...
+ }
+*********************************************************************************/
+@mixin mixin-keyframes-fade-in-vertically($fromRelativeHeight, $keyframesName:keyframes-fade-in-vertically){
+ @keyframes #{$keyframesName} {
+ from {
+ transform: translateY($fromRelativeHeight);
+ opacity: 0;
+ }
+ to {
+ transform: translateY(0);
+ opacity: 1;
+ }
+ }
+}
+
+/********************************************************************************
+ SIMPLE FADE-OUT KEYFRAMES ANIMATION (Opposite of fade-in mixin above)
+*********************************************************************************/
+@mixin mixin-keyframes-fade-out-vertically($toRelativeHeight, $keyframesName:keyframes-fade-out-vertically){
+ @keyframes #{$keyframesName} {
+ from {
+ transform: translateY(0);
+ opacity: 1;
+ }
+ to {
+ transform: translateY($toRelativeHeight);
+ opacity: 0;
+ }
+ }
+}
+
+
+
+/********************************************************************************
+ RIPPLE ANIMATION (Used for ripple-click directive)
+*********************************************************************************/
+@keyframes ripple-animation {
+ from {
+ transform: scale(0,0);
+ opacity: 1;
+ }
+ to {
+ transform: scale(2,2);
+ opacity: 0;
+ }
+}
+
+.sdc-ripple-click__animated {
+ position:relative;
+}
+.sdc-ripple-click__animated::before{
+ display: inline-block;
+ position:absolute;
+ top: 0;
+ left: 0;
+ content: '';
+ animation: ripple-animation .3s ease-out;
+ background-color: $blue;
+ width: 14px;
+ height: 14px;
+ border-radius: 50%;
+ pointer-events: none;
+ opacity: 0;
+}
+
+
+
diff --git a/styles/common/_icons.scss b/styles/common/_icons.scss
new file mode 100644
index 0000000..00f425d
--- /dev/null
+++ b/styles/common/_icons.scss
@@ -0,0 +1,19 @@
+.sdc-icon {
+ display: inline-block;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ width: 16px;
+ height: 16px;
+}
+
+.sdc-icon-locked {background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='15' viewBox='0 0 11 15' id='locked_icon'> <metadata><?xpacket begin='' id='W5M0MpCehiHzreSzNTczkc9d'?><x:xmpmeta xmlns:x='adobe:ns:meta/' x:xmptk='Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01 '> <rdf:RDF xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#'> <rdf:Description rdf:about=''/> </rdf:RDF></x:xmpmeta><?xpacket end='w'?></metadata><defs> <style> .cls-1 { fill: #959595; fill-rule: evenodd; } </style> </defs> <path id='Shape_77_copy_10' data-name='Shape 77 copy 10' class='cls-1' d='M445,359a16.71,16.71,0,0,0-2.1-.009c-1.945.045-3.195,0.049-3.9,0.009v-5a1.743,1.743,0,0,1,2-2h1a1.743,1.743,0,0,1,2,2v5c0.474,0.063.343-.073,1,0,0.266,0.029,0,.279,0,0v-5a2.726,2.726,0,0,0-3-3h-1.142c-1.72-.125-2.715,1.562-2.858,3,0.088,0.009,0,7.338,0,5h0a1.891,1.891,0,0,0-2,1.689v3.461A1.823,1.823,0,0,0,437.775,366h7.448A1.823,1.823,0,0,0,447,364.15v-3.461A2.018,2.018,0,0,0,445,359Z' transform='translate(-436 -351)'/></svg>"); background-repeat: no-repeat;}
+.sdc-icon-plus {background-image: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><svg version='1.1' id='plus_icon' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 19 19' style='enable-background:new 0 0 19 19;' xml:space='preserve'><g><rect y='8' width='19' height='3'/><path id='Rectangle_2139_copy' d='M8,19V0h3v19H8z'/></g></svg>"); background-repeat: no-repeat;}
+.sdc-icon-unlocked {background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='18' viewBox='0 0 11 18' id='unlocked_icon'> <metadata><?xpacket begin='' id='W5M0MpCehiHzreSzNTczkc9d'?><x:xmpmeta xmlns:x='adobe:ns:meta/' x:xmptk='Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01 '> <rdf:RDF xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#'> <rdf:Description rdf:about=''/> </rdf:RDF></x:xmpmeta><?xpacket end='w'?></metadata><defs> <style> .cls-1 { fill: #959595; fill-rule: evenodd; } </style> </defs> <path id='Shape_77_copy_16' data-name='Shape 77 copy 16' class='cls-1' d='M663,358a16.723,16.723,0,0,0-2.1-.009c-1.944.045-3.194,0.049-3.9,0.009v-7a1.743,1.743,0,0,1,2-2h1a1.743,1.743,0,0,1,2,2v2c0.474,0.064.343-.073,1,0,0.266,0.029,0,.279,0,0v-2a2.726,2.726,0,0,0-3-3h-1.142c-1.72-.125-2.715,1.562-2.858,3,0.088,0.009,0,9.338,0,7h0a1.891,1.891,0,0,0-2,1.689v4.461a1.823,1.823,0,0,0,1.775,1.85h7.448A1.823,1.823,0,0,0,665,364.15v-4.461A2.018,2.018,0,0,0,663,358Zm1.05,6.15a0.827,0.827,0,0,1-.8.836H655.8a0.827,0.827,0,0,1-.8-0.836l0-4.15a1.164,1.164,0,0,1,.8-1.147h7.448A1.129,1.129,0,0,1,664,360Z' transform='translate(-654 -348)'/></svg>"); background-repeat: no-repeat;}
+.sdc-icon-vendor {background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 53 47' id='vendor_icon'><title>vendor</title><g id='Layer_2' data-name='Layer 2'><g id='vlm_icon' data-name='vlm icon'><path d='M49,7,38.5,7V5.92A5.92,5.92,0,0,0,32.58,0H20.42A5.92,5.92,0,0,0,14.5,5.92V7.15L4,7.2a3.8,3.8,0,0,0-4,3.5V43.5C0,45.4,2,47,4.2,47L49,46.8a3.8,3.8,0,0,0,4-3.5V10.5A3.8,3.8,0,0,0,49,7ZM16.5,5.92A3.92,3.92,0,0,1,20.42,2H32.58A3.92,3.92,0,0,1,36.5,5.92V7.06l-20,.09ZM2,10.8A1.9,1.9,0,0,1,4,9l45-.2a1.9,1.9,0,0,1,2,1.8v8.87L32.94,24.18a6.49,6.49,0,0,0-12.89,0L2,19.51V10.8ZM31,25a4.5,4.5,0,1,1-4.5-4.5A4.5,4.5,0,0,1,31,25ZM49,45,4,45.2A1.9,1.9,0,0,1,2,43.4V21.57l18.13,4.73a6.5,6.5,0,0,0,12.74,0L51,21.53V43.21A1.9,1.9,0,0,1,49,45Z'/></g></g></svg>"); background-repeat: no-repeat;}
+.sdc-icon-vlm {background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 53'><title>vlm_new_icon</title><g id='Layer_2' data-name='Layer 2'><g id='vlm_icon' data-name='vlm icon'><path d='M41,2a2,2,0,0,1,2,2l.19,45a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2L1.81,4a2,2,0,0,1,2-2H41m-.15-2H4A4.2,4.2,0,0,0,0,4.24L.19,49a4,4,0,0,0,4,4H41a4,4,0,0,0,4-4L44.81,4a4,4,0,0,0-4-4Z'/><rect x='14' y='11' width='17' height='2'/><rect x='14' y='18' width='10' height='2'/><polygon points='20.56 38.85 13.87 33.14 15.16 31.62 20.39 36.08 29.08 26.63 30.55 27.98 20.56 38.85'/></g></g></svg>"); background-repeat: no-repeat;}
+.sdc-icon-vsp {background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 59.5 40' id='vsp_icon'><title>vsp_new_icon</title><g id='Layer_2' data-name='Layer 2'><g id='vlm_icon' data-name='vlm icon'><path d='M58.28,30.74c-1.49-1.82-3-2.7-4.67-2.74a8.5,8.5,0,0,0-16.22-2.44,6.93,6.93,0,0,0-4.06.66A7.23,7.23,0,0,0,36.42,40H53.5a6,6,0,0,0,6-6A5.18,5.18,0,0,0,58.28,30.74ZM53.5,38H36.42a5.25,5.25,0,0,1-5.21-5.91,5.32,5.32,0,0,1,3-4.06,5,5,0,0,1,2.21-.53,5.25,5.25,0,0,1,1.35.18l.92.24L39,27A6.5,6.5,0,0,1,51.67,29v1.3l1.17-.2c1-.17,2.17-.17,3.91,2a3.18,3.18,0,0,1,.76,2A4,4,0,0,1,53.5,38Z'/><path d='M49,0,4,.17A3.79,3.79,0,0,0,0,3.69V7.94H0v2H0V36.31C0,38.35,2,40,4.25,40l20.84-.08a1,1,0,0,0,0-1.92L4,38.08a1.89,1.89,0,0,1-2-1.76V10H51v7a1,1,0,0,0,2,0V3.53A3.79,3.79,0,0,0,49,0ZM2,8V3.76A1.89,1.89,0,0,1,4,2l45-.16a1.89,1.89,0,0,1,2,1.76V8Z'/></g></g></svg>"); background-repeat: no-repeat;}
+
+.sdc-icon-transform{
+ transform: rotate(180deg);
+}
diff --git a/styles/common/_normalize.scss b/styles/common/_normalize.scss
new file mode 100644
index 0000000..9375ee9
--- /dev/null
+++ b/styles/common/_normalize.scss
@@ -0,0 +1,578 @@
+/* ==========================================================================
+ Normalize.scss settings
+ ========================================================================== */
+/**
+ * Includes legacy browser support IE6/7
+ *
+ * Set to false if you want to drop support for IE6 and IE7
+ */
+
+$legacy_browser_support: false !default;
+
+/* Base
+ ========================================================================== */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS and IE text size adjust after device orientation change,
+ * without disabling user zoom.
+ * 3. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
+ * `em` units.
+ */
+
+html {
+ font-family: sans-serif; /* 1 */
+ -ms-text-size-adjust: 100%; /* 2 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+ @if $legacy_browser_support {
+ *font-size: 100%; /* 3 */
+ }
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+ margin: 0;
+}
+
+/* HTML5 display definitions
+ ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+ display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+ display: inline-block; /* 1 */
+ vertical-align: baseline; /* 2 */
+ @if $legacy_browser_support {
+ *display: inline;
+ *zoom: 1;
+ }
+}
+
+/**
+ * Prevents modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+ display: none;
+}
+
+/* Links
+ ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+ background-color: transparent;
+}
+
+/**
+ * Improve readability of focused elements when they are also in an
+ * active/hover state.
+ */
+
+a {
+ &:active, &:hover {
+ outline: 0;
+ };
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+ border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+ font-weight: bold;
+}
+
+@if $legacy_browser_support {
+ blockquote {
+ margin: 1em 40px;
+ }
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+ font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+@if $legacy_browser_support {
+ h2 {
+ font-size: 1.5em;
+ margin: 0.83em 0;
+ }
+
+ h3 {
+ font-size: 1.17em;
+ margin: 1em 0;
+ }
+
+ h4 {
+ font-size: 1em;
+ margin: 1.33em 0;
+ }
+
+ h5 {
+ font-size: 0.83em;
+ margin: 1.67em 0;
+ }
+
+ h6 {
+ font-size: 0.67em;
+ margin: 2.33em 0;
+ }
+}
+
+/**
+ * Addresses styling not present in IE 8/9.
+ */
+
+mark {
+ background: #ff0;
+ color: #000;
+}
+
+@if $legacy_browser_support {
+
+ /**
+ * Addresses margins set differently in IE 6/7.
+ */
+
+ p,
+ pre {
+ *margin: 1em 0;
+ }
+
+ /*
+ * Addresses CSS quotes not supported in IE 6/7.
+ */
+
+ q {
+ *quotes: none;
+ }
+
+ /*
+ * Addresses `quotes` property not supported in Safari 4.
+ */
+
+ q:before,
+ q:after {
+ content: '';
+ content: none;
+ }
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sup {
+ top: -0.5em;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+@if $legacy_browser_support {
+
+ /* ==========================================================================
+ Lists
+ ========================================================================== */
+
+ /*
+ * Addresses margins set differently in IE 6/7.
+ */
+
+ dl,
+ menu,
+ ol,
+ ul {
+ *margin: 1em 0;
+ }
+
+ dd {
+ *margin: 0 0 0 40px;
+ }
+
+ /*
+ * Addresses paddings set differently in IE 6/7.
+ */
+
+ menu,
+ ol,
+ ul {
+ *padding: 0 0 0 40px;
+ }
+
+ /*
+ * Corrects list images handled incorrectly in IE 7.
+ */
+
+ nav ul,
+ nav ol {
+ *list-style: none;
+ *list-style-image: none;
+ }
+
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * 1. Remove border when inside `a` element in IE 8/9/10.
+ * 2. Improves image quality when scaled in IE 7.
+ */
+
+img {
+ border: 0;
+ @if $legacy_browser_support {
+ *-ms-interpolation-mode: bicubic; /* 2 */
+ }
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+ margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+ box-sizing: content-box;
+ height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+ overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+ font-family: monospace, monospace;
+ @if $legacy_browser_support {
+ _font-family: 'courier new', monospace;
+ }
+ font-size: 1em;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ * Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ * 4. Improves appearance and consistency in all browsers.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ color: inherit; /* 1 */
+ font: inherit; /* 2 */
+ margin: 0; /* 3 */
+ @if $legacy_browser_support {
+ vertical-align: baseline; /* 3 */
+ *vertical-align: middle; /* 3 */
+ }
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+ overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+ text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ * and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ * `input` and others.
+ * 4. Removes inner spacing in IE 7 without affecting normal text inputs.
+ * Known issue: inner spacing remains in IE 6.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+ -webkit-appearance: button; /* 2 */
+ cursor: pointer; /* 3 */
+ @if $legacy_browser_support {
+ *overflow: visible; /* 4 */
+ }
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+ cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+ line-height: normal;
+}
+
+/**
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ * Known issue: excess padding remains in IE 6.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+ @if $legacy_browser_support {
+ *height: 13px; /* 3 */
+ *width: 13px; /* 3 */
+ }
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+ */
+
+input[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ box-sizing: content-box; /* 2 */
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+ border: 1px solid #c0c0c0;
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ * 3. Corrects text not wrapping in Firefox 3.
+ * 4. Corrects alignment displayed oddly in IE 6/7.
+ */
+
+legend {
+ border: 0; /* 1 */
+ padding: 0; /* 2 */
+ @if $legacy_browser_support {
+ white-space: normal; /* 3 */
+ *margin-left: -7px; /* 4 */
+ }
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+ overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+ font-weight: bold;
+}
+
+/* Tables
+ ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+td,
+th {
+ padding: 0;
+}
diff --git a/styles/common/_typography.scss b/styles/common/_typography.scss
new file mode 100644
index 0000000..6fd59cc
--- /dev/null
+++ b/styles/common/_typography.scss
@@ -0,0 +1,96 @@
+$heading-font-1: 28px;
+$heading-font-2: 24px;
+$heading-font-3: 20px;
+$heading-font-4: 16px;
+$heading-font-5: 14px;
+
+$body-font-1: 14px;
+$body-font-2: 13px;
+$body-font-3: 12px;
+$body-font-4: 10px;
+
+@mixin base-font-regular() {
+ font-family: OpenSans-Regular, Arial, sans-serif;
+ font-style: normal;
+ font-weight: 400;
+}
+
+@mixin base-font-italic(){
+ font-family: OpenSans-Italic, OpenSans-Regular, Arial, sans-serif;
+ font-style: normal;
+ font-weight: 400;
+}
+
+@mixin base-font-semibold() {
+ font-family: OpenSans-Semibold, Arial, sans-serif;
+ font-style: normal;
+ font-weight: 400;
+}
+
+@mixin font-error() {
+ color: $red;
+}
+
+@mixin heading-1() {
+ @include base-font-regular;
+ font-size: $heading-font-1;
+}
+
+@mixin heading-2() {
+ @include base-font-regular;
+ font-size: $heading-font-2;
+}
+
+@mixin heading-3 {
+ @include base-font-regular;
+ font-size: $heading-font-3;
+}
+
+@mixin heading-4 {
+ @include base-font-regular;
+ font-size: $heading-font-4;
+}
+
+@mixin heading-4-emphasis {
+ @include base-font-semibold;
+ font-size: $heading-font-4;
+}
+
+@mixin heading-5 {
+ @include base-font-semibold;
+ font-size: $heading-font-5;
+}
+
+@mixin body-1 {
+ @include base-font-regular;
+ font-size: $body-font-1;
+}
+
+@mixin body-1-italic {
+ @include base-font-italic;
+ font-size: $body-font-1;
+}
+
+@mixin body-2 {
+ @include base-font-regular;
+ font-size: $body-font-2;
+}
+
+@mixin body-2-emphasis {
+ @include base-font-semibold;
+ font-size: $body-font-2;
+}
+
+@mixin body-3 {
+ @include base-font-regular;
+ font-size: $body-font-3;
+}
+@mixin body-3-emphasis {
+ @include base-font-semibold;
+ font-size: $body-font-3;
+}
+
+@mixin body-4 {
+ @include base-font-regular;
+ font-size: $body-font-4;
+} \ No newline at end of file
diff --git a/styles/common/base.scss b/styles/common/base.scss
new file mode 100644
index 0000000..02baf81
--- /dev/null
+++ b/styles/common/base.scss
@@ -0,0 +1,96 @@
+html {
+ font-size: 100%;
+ height: 100%;
+}
+
+body {
+ /* scrollbar styling for Internet Explorer */
+ scrollbar-face-color: $light-gray;
+ scrollbar-track-color: $white;
+ scrollbar-shadow-color:$white;
+ scrollbar-arrow-color: $gray;
+
+ height: 100%;
+ @extend %noselect;
+}
+
+/* scrollbar styling for Google Chrome | Safari | Opera */
+::-webkit-scrollbar {
+ width: 11px;
+ height: 8px;
+}
+
+::-webkit-scrollbar-track {
+ background-color: $white;
+ border: 1px solid $light-gray;
+ border-top:none;
+ border-bottom:none;
+}
+
+::-webkit-scrollbar-thumb {
+ border-radius: 6px;
+ background-color: $gray;
+ border: 2px solid rgba(0,0,0,0);
+ background-clip: padding-box;
+
+ &:hover {
+ border-width:1px 0px 1px 1px;
+ }
+}
+
+/* Mozilla Firefox currently doesn't support scrollbar styling */
+
+ul {
+ list-style: none;
+}
+
+h1, h2, h3, h4, h5, h6, ul {
+ margin: 0;
+ padding: 0;
+}
+
+input[type='text'] {
+ padding: 4px;
+ width: 100%;
+}
+
+input[type="checkbox"] {
+ width: auto;
+}
+
+input, select, button {
+ @include body-1;
+ box-sizing: border-box;
+}
+
+fieldset {
+ border: none;
+}
+
+fieldset {
+ label {
+ display: inline-block;
+ }
+}
+
+.nav-tabs > li > a:focus,
+.btn:focus,
+.btn:active:focus,
+.btn.active:focus {
+ outline: none;
+}
+
+.error-message{
+ color: $red;
+ @include body-3;
+ margin-top: 3px;
+ &:before{
+ content: "";
+ display: inline-block;
+ width: 14px;
+ height: 14px;
+ margin-right: 6px;
+ //not correct icon
+ background: no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 24 24"><defs><path id="alert-copy-a" d="M22.3815,16.5997 L13.9815,2.4007 C13.5815,1.6997 12.8815,1.1997 12.0815,0.9997 C11.2815,0.7997 10.4815,0.9007 9.7815,1.2997 C9.3815,1.4997 8.9815,1.9007 8.7815,2.2997 L0.3815,16.5997 C-0.4185,17.9997 0.0815,19.9007 1.4815,20.6997 C1.8815,20.9997 2.3815,21.0997 2.8815,21.0997 L19.8815,21.0997 C20.6825,21.0997 21.4815,20.7997 21.9815,20.1997 C22.5815,19.5997 22.8815,18.9007 22.8815,18.0997 C22.7815,17.5997 22.6825,16.9997 22.3815,16.5997 M11,7 C10.4,7 10,7.4 10,8 L10,12 C10,12.601 10.4,13 11,13 C11.6,13 12,12.601 12,12 L12,8 C12,7.4 11.6,7 11,7 M10.3,15.3 C10.1,15.499 10,15.699 10,15.999 C10,16.3 10.1,16.499 10.3,16.699 C10.5,16.9 10.7,16.999 11,16.999 C11.3,16.999 11.5,16.9 11.7,16.699 C11.9,16.499 12,16.199 12,15.999 C12,15.8 11.9,15.499 11.7,15.3 C11.3,14.9 10.7,14.9 10.3,15.3"/></defs><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><use fill="'+ $red +'" xlink:href="#alert-copy-a"/></g></svg>');
+ }
+}
diff --git a/styles/common/mixins.scss b/styles/common/mixins.scss
new file mode 100644
index 0000000..3637f13
--- /dev/null
+++ b/styles/common/mixins.scss
@@ -0,0 +1,342 @@
+/* Colors */
+.sdc-bc-white { background-color: $white; }
+.sdc-bc-blue { background-color: $blue; }
+.sdc-bc-light-blue { background-color: $light-blue; }
+.sdc-bc-lighter-blue { background-color: $lighter-blue; }
+.sdc-bc-disabled-blue { background-color: $disabled-blue; }
+.sdc-bc-dark-blue { background-color: $dark-blue; }
+.sdc-bc-darker-blue { background-color: $darker-blue; }
+.sdc-bc-black { background-color: $black; }
+.sdc-bc-text-black { background-color: $text-black; }
+.sdc-bc-dark-gray { background-color: $dark-gray; }
+.sdc-bc-gray { background-color: $gray; }
+.sdc-bc-light-gray { background-color: $light-gray; }
+.sdc-bc-silver { background-color: $silver; }
+.sdc-bc-light-silver { background-color: $light-silver; }
+.sdc-bc-green { background-color: $green; }
+.sdc-bc-light-green { background-color: $light-green; }
+.sdc-bc-disabled-green { background-color: $disabled-green; }
+.sdc-bc-red { background-color: $red; }
+.sdc-bc-disabled-red { background-color: $disabled-red; }
+.sdc-bc-light-red { background-color: $light-red; }
+.sdc-bc-yellow { background-color: $yellow; }
+.sdc-bc-light-yellow { background-color: $light-yellow; }
+.sdc-bc-disabled-yellow { background-color: $disabled-yellow; }
+.sdc-bc-dark-purple { background-color: $dark-purple; }
+.sdc-bc-purple { background-color: $purple; }
+.sdc-bc-light-purple { background-color: $light-purple; }
+.sdc-bc-lighter-silver { background-color: $lighter-silver; }
+
+/* Prefix */
+$box-sizing-prefix: webkit moz spec;
+$border-radius-prefix: webkit spec;
+$box-shadow-radius-prefix: webkit moz spec;
+$text-shadow-radius-prefix: spec;
+$text-shadow-prefix: spec;
+$box-shadow-prefix: all;
+$linear-gradient-prefix: all;
+$transition-prefix: webkit moz o spec;
+$flex-prefix: webkit spec;
+$browserPrefixes: webkit moz o ms;
+
+@mixin prefix($property, $value, $prefixeslist: 'all') {
+ @if $prefixeslist == all {
+ -webkit-#{$property}: $value;
+ -moz-#{$property}: $value;
+ -ms-#{$property}: $value;
+ -o-#{$property}: $value;
+ #{$property}: $value;
+ } @else {
+ @each $prefix in $prefixeslist {
+ @if $prefix == webkit {
+ -webkit-#{$property}: $value;
+ } @else if $prefix == moz {
+ -moz-#{$property}: $value;
+ } @else if $prefix == ms {
+ -ms-#{$property}: $value;
+ } @else if $prefix == o {
+ -o-#{$property}: $value;
+ } @else if $prefix == spec {
+ #{$property}: $value;
+ } @else {
+ @warn "No such prefix: #{$prefix}";
+ }
+ }
+ }
+}
+
+/* Value Prefix*/
+@mixin value-suffix-with-range($property, $valuesuffix, $from, $to, $prefixeslist) {
+
+ @if $prefixeslist == all {
+ #{property} : -webkit-#{$valuesuffix}($from, $to);
+ #{property} : -moz-#{$valuesuffix}($from, $to);
+ #{property} : -o-#{$valuesuffix}($from, $to);
+ #{property} : -ms-#{$valuesuffix}($from, $to);
+
+ } @else {
+ @each $prefix in $prefixeslist {
+ @if $prefix == webkit {
+ #{property} : -webkit-#{$valuesuffix}($from, $to);
+ } @else if $prefix == moz {
+ #{property} : -moz-#{$valuesuffix}($from, $to);
+ } @else if $prefix == ms {
+ #{property} : -ms-#{$valuesuffix}($from, $to);
+ } @else if $prefix == o {
+ #{property} : -o-#{$valuesuffix}($from, $to);
+ } @else {
+ @warn "No such prefix: #{$prefix}";
+ }
+ }
+ }
+}
+
+/* Box sizing */
+@mixin box-sizing($value: border-box) {
+ @include prefix(box-sizing, $value, $box-sizing-prefix);
+}
+
+/* Borders & Shadows */
+@mixin box-shadow($value) {
+ @include prefix(box-shadow, $value, $box-shadow-radius-prefix);
+}
+
+@mixin text-shadow($value) {
+ @include prefix(text-shadow, $value, $text-shadow-radius-prefix);
+}
+
+@mixin border-radius($value, $positions: all) {
+ @if ($positions == all) {
+ @include prefix(border-radius, $value, $border-radius-prefix);
+ } @else {
+ @each $position in $positions {
+ @include prefix(border-#{$position}-radius, $value, $border-radius-prefix);
+ }
+ }
+
+}
+
+@mixin transition($value) {
+ @include prefix(transition, $value, $transition-prefix);
+}
+
+/* Opacity */
+@mixin opacity($alpha) {
+ $ie-opacity: round($alpha * 100);
+ opacity: $alpha;
+ filter: unquote("alpha(opacity = #{$ie-opacity})");
+}
+
+/* Ellipsis */
+@mixin ellipsis($width: 100%, $display: inline-block, $max-width: none) {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ width: $width;
+ white-space: nowrap;
+ display: $display;
+ max-width: $max-width;
+}
+
+@mixin multiline-ellipsis($lineHeight: 1.3em, $lineCount: 2, $bgColor: $white){
+ overflow: hidden;
+ position: relative;
+ line-height: $lineHeight;
+ max-height: $lineHeight * $lineCount;
+ text-align: justify;
+ // margin-right: -1em;
+ padding-right: 1em;
+ &:before {
+ content: '...';
+ position: absolute;
+ right: 3px;
+ bottom: 0;
+ }
+ &:after {
+ content: '';
+ position: absolute;
+ right: 0;
+ width: 1em;
+ height: 1em;
+ margin-top: 0.2em;
+ background: $bgColor;
+ }
+}
+
+@mixin gradient($from, $to) {
+ /* fallback/image non-cover color */
+ background-color: $from;
+ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
+ @include value-suffix-with-range(background-color, linear-gradient, $from, $to, $linear-gradient-prefix);
+}
+
+/* Vertical placement of multuple lines of text */
+@mixin vertical-text($height) {
+ position: absolute;
+ top: 50%;
+ margin-top: -$height/2;
+}
+
+@mixin text-vertical-align($align: middle) {
+ display: table;
+ width: 100%;
+
+ & > * {
+ vertical-align: $align;
+ display: table-cell;
+ }
+}
+
+@mixin center-element($width) {
+ width: $width;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+@mixin center-content($width) {
+ & > * {
+ @include center-element($width);
+ }
+}
+
+/* transform-rotate */
+// @mixin
+// Defines a 2D rotation, the angle is specified in the parameter
+// @param
+// $deg - angle in degrees
+@mixin transform-rotate($deg) {
+ transform: rotate($deg + deg); /* IE10 and Mozilla */
+ -ms-transform: rotate($deg + deg); /* IE 9 */
+ -webkit-transform: rotate($deg + deg); /* Safari and Chrome */
+}
+
+/* transform-translate */
+// @mixin
+// Defines a 2D rotation, the angle is specified in the parameter
+// @param
+// $deg - angle in degrees
+@mixin transform-translate($x, $y) {
+ transform: translate($x, $y); /* IE10 and Mozilla */
+ -ms-transform: translate($x, $y); /* IE 9 */
+ -webkit-transform: translate($x, $y); /* Safari and Chrome */
+}
+
+/* transform-scale */
+// @mixin
+// Defines a 2D scale transformation, changing the elements width and height
+// @param
+// $width - width
+// @param
+// $height - height
+@mixin transform-scale($width, $height) {
+ transform: scale($width, $height); /* IE10 and Mozilla */
+ -ms-transform: scale($width, $height); /* IE 9 */
+ -webkit-transform: scale($width, $height); /* Safari and Chrome */
+}
+
+@mixin scrollable() {
+ ::-webkit-scrollbar {
+ width: 8px;
+ }
+}
+
+@mixin create-circle($size, $bgcolor, $content) {
+ border-radius: 50%;
+ width: $size;
+ height: $size;
+ background: $bgcolor;
+ border: 3px solid $bgcolor;
+ &:after {
+ content: $content;
+ position: relative;
+ left: 9px;
+ top: 9px;
+ @include base-font-semibold;
+ font-size: $body-font-1;
+ }
+}
+
+/**/
+@mixin keyframe-animation($animationType, $properties, $fromValue, $toValue) {
+
+ @keyframes #{$animationType} {
+ from {
+ $startIndex: 1;
+ @each $property in $properties {
+ #{$property}: nth($fromValue, $startIndex);
+ $startIndex: $startIndex + 1;
+ }
+ }
+ to {
+ $startIndex: 1;
+ @each $property in $properties {
+ #{$property}: nth($toValue, $startIndex);
+ $startIndex: $startIndex + 1;
+ }
+ }
+ }
+ @-moz-keyframes #{$animationType}{
+ /* Firefox */
+ from {
+ $startIndex: 1;
+ @each $property in $properties {
+ #{$property}: nth($fromValue, $startIndex);
+ $startIndex: $startIndex + 1;
+ }
+ }
+ to {
+ $startIndex: 1;
+ @each $property in $properties {
+ #{$property}: nth($toValue, $startIndex);
+ $startIndex: $startIndex + 1;
+ }
+ }
+ }
+ @-webkit-keyframes #{$animationType} {
+ /* Safari and Chrome */
+ from {
+ $startIndex: 1;
+ @each $property in $properties {
+ #{$property}: nth($fromValue, $startIndex);
+ $startIndex: $startIndex + 1;
+ }
+ }
+ to {
+ $startIndex: 1;
+ @each $property in $properties {
+ #{$property}: nth($toValue, $startIndex);
+ $startIndex: $startIndex + 1;
+ }
+ }
+ }
+ @-o-keyframes #{$animationType} {
+ /* Opera */
+ from {
+ $startIndex: 1;
+ @each $property in $properties {
+ #{$property}: nth($fromValue, $startIndex);
+ $startIndex: $startIndex + 1;
+ }
+ }
+ to {
+ $startIndex: 1;
+ @each $property in $properties {
+ #{$property}: nth($toValue, $startIndex);
+ $startIndex: $startIndex + 1;
+ }
+ }
+ }
+}
+
+
+/**/
+@mixin border-shadow($xShadow: 0.545px, $yShadow: 0.839px, $blur: 4px, $spread: 0, $color: $light-gray, $opacity: 0.2) {
+ @include box-shadow($xShadow $yShadow $blur $spread rgba($color, $opacity));
+}
+
+%noselect {
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
diff --git a/styles/common/variables.scss b/styles/common/variables.scss
new file mode 100644
index 0000000..2b0c71a
--- /dev/null
+++ b/styles/common/variables.scss
@@ -0,0 +1,39 @@
+// Colors
+$black: #000000;
+$darker-blue: #323943;
+$text-black: #191919;
+$blue: #009fdb;
+$dark-blue: #0568ae;
+$light-blue: #1eb9f3;
+$lighter-blue: #e6f6fb;
+$disabled-blue: #9dd9ef;
+$red: #cf2a2a;
+$light-red:#ed4141;
+$disabled-red:#f4adad;
+$purple: #9063cd;
+$dark-purple: #702f8a;
+$yellow: #ffb81c;
+$light-yellow: #f6c632;
+$disabled-yellow: #ffdb8d;
+$green: #4ca90c;
+$light-green: #57c00e;
+$disabled-green: #a5d485;
+$gray: #959595;
+$dark-gray: #5a5a5a;
+$light-gray: #d2d2d2;
+$light-silver: #f2f2f2;
+$silver: #eaeaea;
+
+
+$light-purple: #caa2dd;
+$lighter-silver: #f8f8f8;
+$white: #ffffff;
+
+$scroll-bar-color: $text-black;
+
+// Button Sizes
+$btn-extra-small: 90px;
+$btn-small: 110px;
+$btn-medium: 140px;
+$btn-large: 180px;
+$btn-default: auto;
diff --git a/styles/style.scss b/styles/style.scss
new file mode 100644
index 0000000..432d399
--- /dev/null
+++ b/styles/style.scss
@@ -0,0 +1,2 @@
+@import "common";
+@import "components";
diff --git a/utils/create-svg-icons-map.js b/utils/create-svg-icons-map.js
new file mode 100644
index 0000000..556fec8
--- /dev/null
+++ b/utils/create-svg-icons-map.js
@@ -0,0 +1,114 @@
+const fs = require('fs');
+const path = require('path');
+const svgFolder = path.resolve(__dirname + '/../assets/sdc-icons');
+const iconMapFile = path.resolve(__dirname + '/../lib/icons-map.json');
+const iconMapTSFile = path.resolve(__dirname + '/../lib/icons-map.js');
+const disallowedSvgAttributes = ['fill', 'id', 'width', 'height'];
+const disallowedSvgStyle = ['fill'];
+const disallowedSvgInlineAttributes = ['fill', 'id'];
+const disallowedSvgInlineStyle = ['fill'];
+
+function _escapeStrRegex(str) {
+ return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+function _makeSvgAttributesRegex(attrs) {
+ return new RegExp(`\s*(${attrs.map(_escapeStrRegex).join('|')})\s*=\s*("|')[^"']*\\2`, 'g');
+}
+function _makeSvgStyleRegex(attrs) {
+ return new RegExp(`\s*${attrs.map(_escapeStrRegex).join('|')}\s*:[^'";]*;?`, 'g');
+}
+
+// prepare
+const disallowedSvgAttributesRegex = _makeSvgAttributesRegex(disallowedSvgAttributes);
+const disallowedSvgStyleRegex = _makeSvgStyleRegex(disallowedSvgStyle);
+const disallowedSvgInlineAttributesRegex = _makeSvgAttributesRegex(disallowedSvgInlineAttributes);
+const disallowedSvgInlineStyleRegex = _makeSvgStyleRegex(disallowedSvgInlineStyle);
+
+function addIcon(iconsObject, category, iconName, iconPath) {
+ let iconContent = fs.readFileSync(iconPath).toString();
+ if (!iconContent) {
+ return;
+ }
+
+ let iconInfoMsg = '';
+
+ // clean the first <svg> tag
+ iconContent = iconContent.replace(/<svg\b[^>]*>/, (svgTag) => {
+ let cleanedNum = 0;
+ const disallowedSvgAttributesMatch = svgTag.match(disallowedSvgAttributesRegex);
+ if (disallowedSvgAttributesMatch) {
+ svgTag = svgTag.replace(disallowedSvgAttributesRegex, '');
+ cleanedNum += disallowedSvgAttributesMatch.length;
+ }
+ const disallowedSvgStyleMatch = svgTag.match(disallowedSvgStyleRegex);
+ if (disallowedSvgStyleMatch) {
+ svgTag = svgTag.replace(disallowedSvgStyleRegex, '');
+ cleanedNum += disallowedSvgStyleMatch.length;
+ }
+ iconInfoMsg += 'ADDED';
+ if (cleanedNum > 0) {
+ iconInfoMsg += `\n\t(cleaned ${cleanedNum} attributes and styles)`;
+ }
+ return svgTag;
+ });
+
+ const disallowedSvgInlineAttributesMatch = iconContent.match(disallowedSvgInlineAttributesRegex);
+ if (disallowedSvgInlineAttributesMatch) {
+ iconInfoMsg += `\n\t* CHECK for ${disallowedSvgInlineAttributesMatch.length} inline attributes [${disallowedSvgInlineAttributes.join(', ')}]`;
+ }
+ const disallowedSvgInlineStyleMatch = iconContent.match(disallowedSvgInlineStyleRegex);
+ if (disallowedSvgInlineStyleMatch) {
+ iconInfoMsg += `\n\t* CHECK for ${disallowedSvgInlineStyleMatch.length} inline styles [${disallowedSvgInlineStyle.join(', ')}]`;
+ }
+
+ console.log(`# ${iconName}: ${iconInfoMsg}`);
+
+ if (!iconsObject.hasOwnProperty(category)){
+ iconsObject[category] = {};
+ }
+
+ iconsObject[category][iconName] = iconContent;
+}
+
+function main() {
+ const iconMapDir = path.dirname(iconMapFile);
+ if (!fs.existsSync(iconMapDir)) {
+ fs.mkdirSync(iconMapDir);
+ }
+
+ let iconsObject = {};
+ const directories = getDirectories(svgFolder);
+ directories.map((directory) => {
+ const _path = path.resolve(__dirname + '/../assets/sdc-icons/' + directory);
+ readSvg(iconsObject, directory, _path);
+ });
+ const dataToWrite = JSON.stringify(iconsObject);
+
+ fs.writeFileSync(iconMapFile, dataToWrite);
+ fs.writeFileSync(iconMapTSFile, `export default ${dataToWrite};`);
+
+ console.log(`Icons Map JSON created! [${iconMapFile}]`);
+}
+
+function getDirectories(path) {
+ return fs.readdirSync(path).filter(function (file) {
+ return fs.statSync(path+'/'+file).isDirectory();
+ });
+}
+
+function readSvg(iconsObject, category, path) {
+ console.log("path: " + path);
+ fs.readdirSync(path).forEach((file) => {
+ console.log(file);
+ const fileName = file.split('.', 2)[0];
+ const fileExtension = file.split('.', 2)[1];
+ if (fileExtension === 'svg') {
+ const filePath = path + '/' + file;
+ if (fs.existsSync(filePath)) {
+ addIcon(iconsObject, category, fileName, filePath);
+ }
+ }
+ });
+}
+
+main();
diff --git a/utils/delete-folders.js b/utils/delete-folders.js
new file mode 100644
index 0000000..b317391
--- /dev/null
+++ b/utils/delete-folders.js
@@ -0,0 +1,3 @@
+var del = require('delete');
+
+del.sync(['lib']);
diff --git a/version.properties b/version.properties
new file mode 100644
index 0000000..b479afe
--- /dev/null
+++ b/version.properties
@@ -0,0 +1,13 @@
+###########################################################
+# Versioning variables
+# Note that these variables cannot be structured (e.g. : version.release or version.snapshot etc... )
+# because they are used in Jenkins, whose plug-in doesn't support
+
+major=1
+minor=2
+patch=0
+
+base_version=${major}.${minor}.${patch}
+
+release_version=${base_version}
+snapshot_version=${base_version}-SNAPSHOT \ No newline at end of file