-{"index.css":"/* Media Quries for various devices */\n\n@media only screen and (max-width: 965px) {\n .sample_container.avatar-default {\n max-width: 332px;\n margin: auto;\n margin-top: 0;\n }\n .circleAvatar {\n margin-top: 15px;\n }\n .e-avatar-showcase.e-card {\n width: 300px;\n }\n}\n\n@media only screen and (min-width: 965px) {\n .sample_container.avatar-default {\n max-width: 825px;\n margin: auto;\n margin-top: 70px;\n }\n .e-avatar-showcase.e-card {\n width: 400px;\n }\n}\n\n.sample_container.avatar-default .avatar-block {\n display: inline-block;\n vertical-align: top;\n}\n\n/* Assinging image for avatar in 'background-image' property */\n\n.sample_container.avatar-default .e-avatar.image {\n background-image: url(https://ej2.syncfusion.com/react/demos/src/avatar/images/pic01.png);\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n margin: 2px;\n}\n\n/* Card Customization */\n\n.sample_container.avatar-default .e-avatar-showcase.e-card {\n height: 140px;\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.sample_container.avatar-default .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.sample_container.avatar-default .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.sample_container.avatar-default .e-avatar-showcase.e-card .e-card-header .e-card-sub-title p {\n margin: 0;\n}\n\n.sample_container.avatar-default .e-avatar-showcase.e-card .e-card-content {\n align-self: center;\n padding: 10px 0 10px 0;\n overflow: visible;\n}\n\n.bootstrap4 .e-avatar-showcase.e-card {\n box-shadow: none;\n}\n","index.html":"<!DOCTYPE html>\n<html>\n<head>\n <title>Syncfusion React Sample</title>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\" />\n <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">\n <meta name=\"description\" content=\"Syncfusion React UI Components\" />\n <meta name=\"author\" content=\"Syncfusion\" />\n <link href=\"https://cdn.syncfusion.com/ej2/{{theme}}.css\" rel=\"stylesheet\">\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\" />\n</head>\n\n<body class=\"{{theme}}\">\n <div id='sample'>\n</body>\n</html>\n","index.js":"import { render } from 'react-dom';\nimport './index.css';\nimport * as React from 'react';\nimport { SampleBase } from './sample-base';\n\n// tslint:disable:max-line-length\n// * Sample for CSS avatar component\nexport class Default extends SampleBase {\n render() {\n return (<div className='control-pane'>\n <div className=\"sample_container avatar-default\">\n\n <div className=\"avatar-block\">\n <div className=\"e-card e-avatar-showcase\">\n <div className=\"e-card-content\">\n {/* <!-- xSmall Avatar--> */}\n <div className=\"e-avatar e-avatar-xsmall image\"></div>\n {/* <!-- Small Avatar--> */}\n <div className=\"e-avatar e-avatar-small image\"></div>\n {/* <!-- Avatar--> */}\n <div className=\"e-avatar image\"></div>\n {/* <!-- Large Avatar--> */}\n <div className=\"e-avatar e-avatar-large image\"></div>\n {/* <!-- xLarge Avatar--> */}\n <div className=\"e-avatar e-avatar-xlarge image\"></div>\n </div>\n <div className=\"e-card-content\">\n <div>Default</div>\n </div>\n </div>\n </div>\n\n <div className=\"circleAvatar avatar-block\">\n <div className=\"e-card e-avatar-showcase\">\n <div className=\"e-card-content\">\n {/* <!-- xSmall Circle Avatar--> */}\n <div className=\"e-avatar e-avatar-xsmall e-avatar-circle image\"></div>\n {/* <!-- Small Circle Avatar--> */}\n <div className=\"e-avatar e-avatar-small e-avatar-circle image\"></div>\n {/* <!-- Circle Avatar--> */}\n <div className=\"e-avatar e-avatar-circle image\"></div>\n {/* <!-- Large Circle Avatar--> */}\n <div className=\"e-avatar e-avatar-large e-avatar-circle image\"></div>\n {/* <!-- xLarge Circle Avatar--> */}\n <div className=\"e-avatar e-avatar-xlarge e-avatar-circle image\"></div>\n </div>\n <div className=\"e-card-content\">\n <div>Circle</div>\n </div>\n </div>\n </div>\n </div>\n\n\n </div>);\n }\n}\n\nrender(<Default />, document.getElementById('sample'));","sample-base.js":"import * as React from 'react';\n {{ripple}}\n export class SampleBase extends React.PureComponent {\n rendereComplete() {\n /**custom render complete function */\n }\n componentDidMount() {\n setTimeout(() => {\n this.rendereComplete();\n });\n }\n }\n ","dependencies":"{\"@syncfusion/ej2\": \"*\",\"@syncfusion/ej2-react-base\": \"*\",\"@syncfusion/ej2-react-layouts\": \"*\",\"@syncfusion/ej2-react-buttons\": \"*\",\"@syncfusion/ej2-react-grids\": \"*\",\"@syncfusion/ej2-react-inputs\": \"*\",\"@syncfusion/ej2-react-lists\": \"*\",\"@syncfusion/ej2-react-charts\": \"*\",\"@syncfusion/ej2-react-maps\": \"*\",\"@syncfusion/ej2-react-circulargauge\": \"*\",\"@syncfusion/ej2-react-dropdowns\": \"*\",\"@syncfusion/ej2-react-popups\": \"*\",\"@syncfusion/ej2-react-navigations\": \"*\",\"@syncfusion/ej2-react-richtexteditor\": \"*\",\"@syncfusion/ej2-react-calendars\": \"*\",\"@syncfusion/ej2-react-lineargauge\": \"*\",\"@syncfusion/ej2-react-schedule\": \"*\",\"@syncfusion/ej2-react-splitbuttons\": \"*\"}"}
0 commit comments