Repository navigation
Expand file tree
/
Copy pathtypes-stack.json
More file actions
1 lines (1 loc) · 11.1 KB
/
Copy pathtypes-stack.json
File metadata and controls
1 lines (1 loc) · 11.1 KB
1
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/avatar/types/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"sample_container avatar-types\">\n <div class=\"avatar-block\">\n <!-- Card Component -->\n <div class=\"e-card e-avatar-showcase\">\n <div class=\"e-card-content\">\n <!-- XLarge Circle Avatar Component -->\n <div class=\"e-avatar e-avatar-xlarge e-avatar-circle\">\n <img class=\"image\" src=\"//ej2.syncfusion.com/javascript/demos/src/avatar/images/pic01.png\" alt=\"avatar\">\n </div>\n </div>\n <div class=\"e-card-content\">\n <div>Image</div>\n </div>\n </div>\n </div>\n\n <div class=\"avatar-block\">\n <!-- Card Component -->\n <div class=\"e-card e-avatar-showcase\">\n <div class=\"e-card-content\">\n <!-- XLarge Circle Avatar Component -->\n <div class=\"e-avatar e-avatar-xlarge e-avatar-circle\">\n <div class=\"svg_icons chrome\"></div>\n </div>\n </div>\n <div class=\"e-card-content\">\n <div>SVG</div>\n </div>\n </div>\n </div>\n\n <div class=\"avatar-block\">\n <!-- Card Component -->\n <div class=\"e-card e-avatar-showcase\">\n <div class=\"e-card-content\">\n <!-- XLarge Circle Avatar Component -->\n <div class=\"e-avatar e-avatar-xlarge e-avatar-circle\">GR</div>\n </div>\n <div class=\"e-card-content\">\n <div>Initial</div>\n </div>\n </div>\n </div>\n\n <div class=\"avatar-block\">\n <!-- Card Component -->\n <div class=\"e-card e-avatar-showcase\">\n <div class=\"e-card-content\">\n <!-- XLarge Circle Avatar Component -->\n <div class=\"e-avatar e-avatar-xlarge e-avatar-circle\">\n <div class=\"e-people icons\"></div>\n </div>\n </div>\n <div class=\"e-card-content\">\n <div>Font Icon</div>\n </div>\n </div>\n </div>\n\n <div class=\"avatar-block\">\n <!-- Card Component -->\n <div class=\"e-card e-avatar-showcase\">\n <div class=\"e-card-content\">\n <!-- XLarge Circle Avatar Component -->\n <div class=\"e-avatar e-avatar-xlarge e-avatar-circle\">User</div>\n </div>\n <div class=\"e-card-content\">\n <div>Word</div>\n </div>\n </div>\n </div>\n\n <div class=\"avatar-block\">\n <!-- Card Component -->\n <div class=\"e-card e-avatar-showcase\">\n <div class=\"e-card-content\">\n <!-- XLarge Circle Avatar Component -->\n <div class=\"e-avatar e-avatar-xlarge e-avatar-circle custom\">\n <div class=\"e-people icons\"></div>\n </div>\n </div>\n <div class=\"e-card-content\">\n <div>Custom</div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n\n\n<style>\n .control-section {\n overflow: auto;\n }\n\n /* Media Quries for various devices */\n\n @media only screen and (max-width: 965px) {\n .sample_container.avatar-types {\n max-width: 265px;\n margin: auto;\n margin-top: 0;\n }\n .e-avatar-showcase.e-card {\n width: 120px;\n }\n }\n\n @media only screen and (min-width: 965px) {\n .sample_container.avatar-types {\n max-width: 488px;\n margin: auto;\n margin-top: 35px;\n }\n .e-avatar-showcase.e-card {\n width: 150px;\n }\n }\n\n @media only screen and (max-width: 340px) {\n .sample_container.avatar-types {\n max-width: 131px;\n }\n }\n\n .sample_container.avatar-types .avatar-block {\n display: inline-block;\n vertical-align: top;\n }\n\n /* Avatar image source */\n\n .e-avatar img.image {\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n }\n\n /* SVG Icons */\n\n .chrome {\n background: transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23ffffff' d='M16.033 11.049a5.155 5.155 0 1 1 0 10.312 5.156 5.156 0 0 1 0-10.312zM16.124 0c1.281-.003 9.659.318 14.268 9.043h-.016l.01.018c.33.578 3.745 6.94-.485 14.969 0 0-4.215 8.107-14.565 7.968l-.452-.012-.004.007-.004.007.02-.037c.564-.98 5.112-8.884 6.357-11.067l.016-.028.007-.008.04-.069.11-.127a7.085 7.085 0 0 0 1.457-2.967l.01-.046.035-.151c.088-.424.148-.944.128-1.549l-.006-.117v-.004l-.007-.143-.006-.07-.005-.079-.012-.116v-.01l-.001-.008-.016-.158a7.2 7.2 0 0 0-.096-.572l-.018-.081-.013-.064a9.801 9.801 0 0 0-.692-2.016c-.165-.243-.332-.489-.512-.733l-.142-.187 8.728-2.554s-10.538-.01-13.018-.001l.021.005H16.642l-.14-.013a7.034 7.034 0 0 0-1.132-.003l-.167.016h-.047l-.034-.001c-.193.002-1.213.045-2.492.764l-.005.003-.033.016a7.158 7.158 0 0 0-3.25 3.533l-.059.148-6.485-6.404s4.74 8.311 6.165 10.779l.065.113.023.088a7.14 7.14 0 0 0 7.777 5.118l.144-.02L14.854 32h-.027c-.667-.005-7.894-.234-12.744-7.906 0 0-4.925-7.698.37-16.573l.252-.411.001-.002C2.822 6.904 6.58.374 15.958.003c0 0 .057-.003.166-.003z'/%3E%3C/svg%3E\") no-repeat 100% 100%;\n }\n\n .svg_icons {\n width: 32px;\n height: 32px;\n display: inline-block;\n }\n\n /* Card Customization */\n\n .e-avatar-showcase.e-card {\n height: 113px;\n padding: 5px;\n margin: 5px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n border-radius: 8px;\n }\n\n .e-avatar-showcase.e-card .e-card-header .e-card-header-title {\n align-self: center;\n font-size: 18px;\n letter-spacing: 1px;\n text-shadow: #eaeaea 1px 1px 2px;\n }\n\n .e-avatar-showcase.e-card .e-card-header .e-card-sub-title {\n color: rgba(0, 0, 0, 0.75);\n white-space: pre-line;\n font-size: 14px;\n text-shadow: #eaeaea 1px 1px 2px;\n }\n\n .e-avatar-showcase.e-card .e-card-header .e-card-sub-title p {\n margin: 0;\n }\n\n .e-avatar-showcase.e-card .e-card-content {\n overflow: visible;\n align-self: center;\n padding: 10px 0 10px 0;\n }\n\n .e-avatar-showcase.e-card .e-card-content .e-avatar {\n font-size: 18px;\n }\n\n /* Font Icons */\n\n @font-face {\n font-family: 'Contacts';\n src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRgAAAEoAAAAVmNtYXDnEOdaAAABjAAAADhnbHlmiAnWagAAAcwAAADwaGVhZBD04psAAADQAAAANmhoZWEHiwNuAAAArAAAACRobXR4C9AAAAAAAYAAAAAMbG9jYQAwAHgAAAHEAAAACG1heHABDwA1AAABCAAAACBuYW1lby+ImAAAArwAAAIxcG9zdGUbI4AAAATwAAAAOwABAAADUv9qAFoEAAAAAAAD3QABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAAWW9ja18PPPUACwPoAAAAANb8zuYAAAAA1vzO5gAAAAAD3QPqAAAACAACAAAAAAAAAAEAAAADACkAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPwAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAQNS/2oAWgPqAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAkAAAABAAEAAEAAOcB//8AAOcA//8AAAABAAQAAAABAAIAAAAAADAAeAACAAAAAAO+A+oADQAZAAA3FBYXIT4BNS4BJyEOARMeARc+ATcuAScOAS4YFwMzFxgDq4H+zYGr4QOCY2KCAwOCYmGCnCtOISFOK3qiAwOiAe1igwICg2JjggICggAAAAACAAAAAAPdA+oAFAAoAAABDgEHIicjDgEHLgEnLgEnPgE3HgEFFBYfARYfATcXFhc2JDcmJCcGBAOkBfK3KioXEFcpBBEMRUsBBfK3tvL8cVRLDggBBsQKLDDPARMFBf7tz87+7QI+ndEEBwI/Izh2DS+RVZ3RBATRnWCmN3BIETecAgcBBPK1tfIEBPIAAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAgAAQABAAAAAAACAAcACQABAAAAAAADAAgAEAABAAAAAAAEAAgAGAABAAAAAAAFAAsAIAABAAAAAAAGAAgAKwABAAAAAAAKACwAMwABAAAAAAALABIAXwADAAEECQAAAAIAcQADAAEECQABABAAcwADAAEECQACAA4AgwADAAEECQADABAAkQADAAEECQAEABAAoQADAAEECQAFABYAsQADAAEECQAGABAAxwADAAEECQAKAFgA1wADAAEECQALACQBLyBDb250YWN0c1JlZ3VsYXJDb250YWN0c0NvbnRhY3RzVmVyc2lvbiAxLjBDb250YWN0c0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAQwBvAG4AdABhAGMAdABzAFIAZQBnAHUAbABhAHIAQwBvAG4AdABhAGMAdABzAEMAbwBuAHQAYQBjAHQAcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAQwBvAG4AdABhAGMAdABzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBAgEDAQQABHVzZXIKY2hhdC0wMS13ZgAAAA==) format('truetype');\n font-weight: normal;\n font-style: normal;\n }\n\n .people,\n .e-people {\n font-family: 'Contacts';\n }\n\n .e-people:before {\n content: '\\e700';\n }\n\n .e-avatar .e-people.icons {\n font-size: 24px;\n }\n\n /* Custom Avatar Background Color */\n\n .e-avatar.custom {\n background-color: blueviolet;\n }\n\n .bootstrap4 .e-avatar.custom {\n background-color: #cfd5ff;\n }\n\n .bootstrap4 .e-avatar .chrome {\n background: transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23666666' d='M16.033 11.049a5.155 5.155 0 1 1 0 10.312 5.156 5.156 0 0 1 0-10.312zM16.124 0c1.281-.003 9.659.318 14.268 9.043h-.016l.01.018c.33.578 3.745 6.94-.485 14.969 0 0-4.215 8.107-14.565 7.968l-.452-.012-.004.007-.004.007.02-.037c.564-.98 5.112-8.884 6.357-11.067l.016-.028.007-.008.04-.069.11-.127a7.085 7.085 0 0 0 1.457-2.967l.01-.046.035-.151c.088-.424.148-.944.128-1.549l-.006-.117v-.004l-.007-.143-.006-.07-.005-.079-.012-.116v-.01l-.001-.008-.016-.158a7.2 7.2 0 0 0-.096-.572l-.018-.081-.013-.064a9.801 9.801 0 0 0-.692-2.016c-.165-.243-.332-.489-.512-.733l-.142-.187 8.728-2.554s-10.538-.01-13.018-.001l.021.005H16.642l-.14-.013a7.034 7.034 0 0 0-1.132-.003l-.167.016h-.047l-.034-.001c-.193.002-1.213.045-2.492.764l-.005.003-.033.016a7.158 7.158 0 0 0-3.25 3.533l-.059.148-6.485-6.404s4.74 8.311 6.165 10.779l.065.113.023.088a7.14 7.14 0 0 0 7.777 5.118l.144-.02L14.854 32h-.027c-.667-.005-7.894-.234-12.744-7.906 0 0-4.925-7.698.37-16.573l.252-.411.001-.002C2.822 6.904 6.58.374 15.958.003c0 0 .057-.003.166-.003z'/%3E%3C/svg%3E\") no-repeat 100% 100%;\n }\n</style>\n</div></body></html>","index.js":"{{ripple}}/**\n * Sample for CSS Basic Layout Badge\n */\n\n //\n"}