Skip to content

R
react-ag-qeditor
Commit a67a4dc7 by Рамис
Options

Initial commit

parent f0704801
Showing with 895 additions and 59 deletions
.editorconfig
......@@ -3,7 +3,7 @@ root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
.idea/.gitignore 0 → 100644
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml
.idea/codeStyles/Project.xml 0 → 100644
<component name="ProjectCodeStyleConfiguration">
<code_scheme name="Project" version="173">
<JSCodeStyleSettings version="0">
<option name="REFORMAT_C_STYLE_COMMENTS" value="true" />
<option name="SPACES_WITHIN_IMPORTS" value="true" />
<option name="INDENT_CHAINED_CALLS" value="false" />
<option name="CHAINED_CALL_DOT_ON_NEW_LINE" value="false" />
<option name="SPACE_BEFORE_UNARY_NOT" value="true" />
<option name="SPACE_AFTER_UNARY_NOT" value="true" />
</JSCodeStyleSettings>
<codeStyleSettings language="JavaScript">
<option name="BLOCK_COMMENT_ADD_SPACE" value="true" />
<option name="KEEP_FIRST_COLUMN_COMMENT" value="false" />
<option name="KEEP_BLANK_LINES_IN_CODE" value="1" />
<option name="ALIGN_MULTILINE_PARAMETERS" value="false" />
<option name="SPACE_BEFORE_METHOD_PARENTHESES" value="true" />
<option name="KEEP_SIMPLE_METHODS_IN_ONE_LINE" value="true" />
</codeStyleSettings>
<codeStyleSettings language="SASS">
<indentOptions>
<option name="INDENT_SIZE" value="4" />
</indentOptions>
</codeStyleSettings>
<codeStyleSettings language="SCSS">
<indentOptions>
<option name="INDENT_SIZE" value="4" />
</indentOptions>
</codeStyleSettings>
</code_scheme>
</component>
\ No newline at end of file
.idea/codeStyles/codeStyleConfig.xml 0 → 100644
<component name="ProjectCodeStyleConfiguration">
<state>
<option name="USE_PER_PROJECT_SETTINGS" value="true" />
</state>
</component>
\ No newline at end of file
.idea/misc.xml 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectRootManager">
<output url="file://$PROJECT_DIR$/out" />
</component>
</project>
\ No newline at end of file
.idea/modules.xml 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/react-ag-qeditor.iml" filepath="$PROJECT_DIR$/.idea/react-ag-qeditor.iml" />
</modules>
</component>
</project>
\ No newline at end of file
.idea/react-ag-qeditor.iml 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<module type="JAVA_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
\ No newline at end of file
.idea/vcs.xml 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>
\ No newline at end of file
example/src/App.js
import React from 'react'
import { ExampleComponent } from 'react-ag-qeditor'
import QEditor from 'react-ag-qeditor'
import 'react-ag-qeditor/dist/index.css'
const App = () => {
return <ExampleComponent text="Create React Library Example 😄" />
return <div style={{padding:40}}>
<QEditor />
</div>
}
export default App
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
{
"name": "react-ag-qeditor",
"version": "1.0.0",
"description": "Made with create-react-library",
"author": "atma",
"license": "MIT",
"repository": "atma/react-ag-qeditor",
"main": "dist/index.js",
"module": "dist/index.modern.js",
"source": "src/index.js",
"engines": {
"node": ">=10"
},
"scripts": {
"build": "microbundle-crl --no-compress --format modern,cjs",
"start": "microbundle-crl watch --no-compress --format modern,cjs",
"prepare": "run-s build",
"test": "run-s test:unit test:lint test:build",
"test:build": "run-s build",
"test:lint": "eslint .",
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
"test:watch": "react-scripts test --env=jsdom",
"predeploy": "cd example && npm install && npm run build",
"deploy": "gh-pages -d example/build"
},
"peerDependencies": {
"react": "^16.0.0"
},
"devDependencies": {
"microbundle-crl": "^0.13.10",
"babel-eslint": "^10.0.3",
"cross-env": "^7.0.2",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.7.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-standard": "^4.0.1",
"gh-pages": "^2.2.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.0.4",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "^3.4.1"
},
"files": [
"dist"
]
"name": "react-ag-qeditor",
"version": "0.0.1",
"description": "WYSIWYG html editor",
"author": "atma",
"license": "MIT",
"repository": "atma/react-ag-qeditor",
"main": "dist/index.js",
"module": "dist/index.modern.js",
"source": "src/index.js",
"engines": {
"node": ">=10"
},
"scripts": {
"build": "microbundle-crl --no-compress --format modern,cjs --css-modules false",
"start": "microbundle-crl watch --no-compress --format modern,cjs ",
"prepare": "run-s build",
"test": "run-s test:unit test:lint test:build",
"test:build": "run-s build",
"test:lint": "eslint .",
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
"test:watch": "react-scripts test --env=jsdom",
"predeploy": "cd example && npm install && npm run build",
"deploy": "gh-pages -d example/build"
},
"peerDependencies": {
"react": "^16.0.0",
"katex": "^0.15.3",
"rc-upload": "^4.3.3",
"react-quill": "^1.3.5",
"sass": "^1.49.9"
},
"devDependencies": {
"microbundle-crl": "^0.13.10",
"babel-eslint": "^10.0.3",
"cross-env": "^7.0.2",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.7.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-standard": "^4.0.1",
"gh-pages": "^2.2.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.0.4",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "^3.4.1"
},
"files": [
"dist"
]
}
src/QEditor.jsx 0 → 100644
import React, { Fragment } from 'react'
import ReactQuill, { Quill } from 'react-quill';
import './index.scss';
import 'react-quill/dist/quill.snow.css';
import VideoBlot from "./blots/VideoBlot";
import VideoLocalBlot from "./blots/VideoLocalBlot";
import EditorModal from "./components/EditorModal";
import Uploader from "./components/Uploader";
import "katex/dist/katex.min.css";
import katex from "katex";
export default class QEditor extends React.Component {
constructor (props) {
super(props)
this.state = {
init: false,
modalIsOpen: false,
innerModalType: null,
quillRef: null,
uploadedPaths: [],
uploaderUid: 'uid' + new Date(),
embedContent: ''
}
Quill.register('formats/video', VideoBlot)
Quill.register('formats/videoLocal', VideoLocalBlot)
}
componentDidMount () {
this.setState({
init: true
})
}
modules = {
toolbar: {
container: [
[{header: [2, 3, 4, false]}],
['bold', 'italic', 'underline', 'strike', 'blockquote'],
[
{list: 'ordered'},
{list: 'bullet'},
{indent: '-1'},
{indent: '+1'}
],
[{align: []}, {color: []}, {background: []}],
['link', 'image', 'video', 'videoLocal'],
['formula'],
['clean']
],
handlers: {
video: (a) => {
this.setState(
{
innerModalType: 'video'
},
() => this.editorModal.show({title: 'Видео по ссылке'})
)
},
videoLocal: () => {
this.setState({
innerModalType: 'videoLocal'
}, () => this.editorModal.show({title: 'Загрузить видео'}));
},
image: () => {
this.setState({
innerModalType: 'image'
}, () => this.editorModal.show({title: 'Загрузить изображение'}));
}
}
},
}
formats = [
'header',
'bold', 'italic', 'underline', 'strike', 'blockquote',
'list', 'bullet', 'indent',
'align',
'link', 'image', 'video', 'color', 'background', 'videoLocal',
'formula'/*'imageHandler',*/
]
buildActionsModal (buttons = []) {
if (buttons.length === 0) {
return null;
}
return (
<div className={'atma-editor-modal-action'}>
{
buttons.map((btn, i) => (
<button key={'mAction' + i} className={'atma-editor-btn' + btn.className}
onClick={btn.onClick}>{btn.title}</button>
))
}
</div>
)
}
getInnerModal () {
switch (this.state.innerModalType) {
case 'video':
return (
<Fragment>
<input type="text" value={this.state.embedContent} placeholder={'https://'} onInput={(e) => {
this.setState({
embedContent: e.target.value
})
}}/>
<ul className={'atma-editor-soc-video'}>
<li className={'youtube'}/>
<li className={'vimeo'}/>
<li className={'vk'}/>
<li className={'ok'}/>
</ul>
</Fragment>
)
case 'videoLocal':
return (
<Fragment>
<Uploader
key={this.state.uploaderUid}
accept={'video/*'}
action={'https://cdn.atmaguru.online/upload/?sid=test&md5=UN8SUwWR8m5XUm9v8uDtew&expires=1652081782'}
onSuccess={(file) => {
let uploadedPaths = this.state.uploadedPaths;
uploadedPaths.push(file);
this.setState({uploadedPaths});
}}
multiple={true}
/>
</Fragment>
)
case 'image':
return (
<Fragment>
<Uploader
key={this.state.uploaderUid}
accept={'image/*'}
action={'https://cdn.atmaguru.online/upload/?sid=test&md5=UN8SUwWR8m5XUm9v8uDtew&expires=1652081782'}
onSuccess={(file) => {
let uploadedPaths = this.state.uploadedPaths;
uploadedPaths.push(file);
this.setState({uploadedPaths});
}}
multiple={true}
/>
</Fragment>
)
default:
return <div>Пусто</div>
}
}
quillInsert () {
const quill = this.quillRef.getEditor();
let range = quill.getSelection();
let index = range ? range.index : 0;
switch (this.state.innerModalType) {
case 'image':
case 'videoLocal':
this.state.uploadedPaths.map((file, i) => {
quill.insertEmbed(index, this.state.innerModalType, file.path, Quill.sources.USER);
quill.setSelection(index + 1);
});
break
default:
quill.insertEmbed(index, this.state.innerModalType, this.state.embedContent, Quill.sources.USER);
quill.setSelection(index + 1);
}
this.setState({
uploaderUid: `uid${new Date()}`,
embedContent: ''
}, () => this.editorModal.hide());
}
render () {
let {init, innerModalType, modalIsOpen} = this.state;
let {maxWidth, maxHeight, value} = this.props;
window.katex = katex;
if ( ! this.state.init) {
return null;
}
return (
<Fragment>
<div className="atma-editor-wrap" style={{maxWidth}}>
<div className={'atma-editor'}>
<ReactQuill
ref={ref => this.quillRef = ref}
defaultValue={value}
theme="snow"
onChange={(value) => {console.log(value)}}
modules={this.modules}
formats={this.formats}
onChangeSelection={(range, source, editor) => {
// console.log(range, source, editor.getText());
}}
/>
</div>
<EditorModal
isOpen={modalIsOpen}
ref={ref => this.editorModal = ref}
>
{this.getInnerModal()}
{this.buildActionsModal([
{
title: 'Отмена',
className: ' atma-editor-cancel',
onClick: () => {
this.setState(
{
uploaderUid: `uid${new Date()}`
},
() => this.editorModal.hide()
)
}
},
{
title: 'Вставить',
className: ' atma-editor-complete',
onClick: () => this.quillInsert()
}
])
}
</EditorModal>
</div>
</Fragment>
)
}
}
QEditor.defaultProps = {
maxWidth: 'auto',
maxHeight: 1000
}
src/blots/VideoBlot.js 0 → 100644
import { Quill } from 'react-quill'
const Video = Quill.import('formats/video')
export default class VideoBlot extends Video {
static tagName = 'iframe'
static blotName = 'video';
static create (value) {
let type = '';
let node = null;
const url = new URL(value);
let id = url.pathname.replace(/\/$/ig, '').split('/').pop();
switch (url.hostname){
case 'rutube.ru':
case 'www.rutube.ru':
value = `//rutube.ru/play/embed/${id}`;
break
case 'ok.ru':
case 'www.ok.ru':
value = `//ok.ru/videoembed/${id}`;
break
case 'youtu.be':
case 'youtube.com':
case 'www.youtube.com':
if(url.hostname.indexOf('youtu.be') === -1 && url.search !== ''){
id = url.searchParams.get('v');
}
value = `https://www.youtube.com/embed/${id}`;
// console.log(id);
break
}
node = super.create(value);
node.setAttribute('style', 'width:1280px;height:auto;aspect-ratio: 16 / 9;');
return node;
}
}
src/blots/VideoLocalBlot.js 0 → 100644
import { Quill } from 'react-quill';
const BlockEmbed = Quill.import('blots/block/embed');
export default class VideoLocalBlot extends BlockEmbed {
static tagName = 'video';
static blotName = 'videoLocal';
static create (value){
console.log(value);
let node = super.create(value);
node.setAttribute('class', 'ql-video');
node.setAttribute('src', value);
node.setAttribute('controls', true);
return node;
}
static value(node){
return node.getAttribute('src');
}
}
src/components/EditorModal.js 0 → 100644
import React from "react";
export default class EditorModal extends React.Component {
constructor (props) {
super(props);
this.state = {
isShow: false,
title: ''
}
this.show = this.show.bind(this);
this.hide = this.hide.bind(this);
}
show = ({ title }) => {
// this.resolve = resolve;
// this.reject = reject;
this.setState({
isShow: true,
title
})
}
hide(){
// this.setState({ isShow: false }, this.reject('ab'));
this.setState({ isShow: false });
}
render () {
return (
<div className="atma-editor-modal" style={{ display: this.state.isShow ? 'flex' : 'none' }}>
<div className="atma-editor-modal-box">
{
this.state.title &&
<div className="atma-editor-modal-box-header">{ this.state.title }</div>
}
{/*<div className={'atma-editor-modal-close'} onClick={ this.hide }>×</div>*/}
{ this.props.children && this.props.children }
</div>
</div>
)
}
}
EditorModal.defaultProps = {
title: null
};
src/components/Uploader.js 0 → 100644
import React, { Fragment } from "react";
import Upload from "rc-upload";
class Item extends React.Component {
get src () {
return this.props.src;
}
render () {
switch (this.src) {
default:
return null;
}
}
}
Item.defaultProps = {
src: null
};
export default class Uploader extends React.Component {
constructor (props) {
super(props);
this.state = {
disabledFileUpload: false,
files: {
/* 'first': {
uid: 'first',
percent: 10,
uploaded: false
},
'second': {
uid: 'second',
percent: 80
}*/
},
dropFiles: [],
progress: 0,
isUpload: false,
isSuccess: false,
}
this.files = {};
}
componentDidUpdate (prevProps, prevState, snapshot) {
console.log(this.state.files);
}
get action () {
return this.props.action;
}
get multiple () {
return this.props.multiple;
}
get accept () {
return this.props.accept;
}
get type () {
return this.props.type;
}
get onSuccess () {
return this.props.onSuccess;
}
mediaItem(){
}
render () {
let {disabledFileUpload, isUpload, progress, dropFiles} = this.state;
return (
<Fragment>
<div className={'atma-editor-uploader-uitems'}>
{
Object.keys(this.state.files).map((uid, i) => (
<div
className={ 'atma-editor-uploader-uitems-elem' }
style={{ backgroundImage: `url(${this.state.files[uid].path})` }}
>
<div className={'atma-editor-uploader-uitems-del'}></div>
{
this.state.files[uid].uploaded !== true ? (
<div className={ 'atma-editor-uploader-progress-wrap' }>
<div className={ 'atma-editor-uploader-progress' }>
<div style={{ width: this.state.files[uid].percent + '%' }} />
</div>
</div>
) : null
}
</div>
))
}
</div>
<Upload
accept={this.accept}
action={this.action}
multiple={this.multiple}
disabled={disabledFileUpload}
beforeUpload={(a, files) => {
this.files[a.uid] = {...a, percent: 0, uploaded: false};
this.setState({
isUpload: true,
files: this.files
});
}}
onStart={(a) => {
this.setState({disabledFileUpload: true, isUpload: true});
console.log('start');
}}
onSuccess={(resp, file) => {
if (resp.state === 'success' && resp.file_path) {
let curFile = this.files[file.uid];
curFile['uploaded'] = true;
curFile['path'] = resp.poster || resp.file_path;
this.setState({
uploaderSuccess: true,
isUpload: false,
disabledFileUpload: false
}, () => this.onSuccess({path: resp.file_path, uid: file.uid}))
}
}}
onProgress={(o, file) => {
if (this.files[file.uid]) {
this.files[file.uid].percent = parseInt(o.percent);
}
//
this.setState({
files: this.files
})
// console.log(o, file);
}}
component={'div'}
type="drag"
className={ 'atma-editor-uploader-drop' }
>
<div className={'atma-editor-uploader-placeholder'}>Нажмите или перетащите файлы сюда</div>
</Upload>
</Fragment>
)
}
}
Uploader.defaultProps = {
action: null,
multiple: false,
accept: '*',
type: '',
onSuccess: ()=>{}
};
src/index.js
import React from 'react'
import styles from './styles.module.css'
import QEditor from './QEditor';
export const ExampleComponent = ({ text }) => {
return <div className={styles.test}>Example Component: {text}</div>
}
export default QEditor;
src/index.scss 0 → 100644
.atma-editor {
position: relative;
&-wrap{
//overflow-y: auto;
*{
box-sizing: border-box;
color: #434A53;
}
}
.ql-toolbar{
&.ql-snow{
position: sticky;
top: 0;
z-index: 10;
background-color: #fff;
.ql-videoLocal:after{
content:'';
display: inline-block;
width: 18px;
height: 18px;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2249%22%20height%3D%2242%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M16.844%2024.038c.151%200%20.296-.026.435-.079.14-.053.29-.127.451-.221l8.66-5.015c.318-.181.541-.348.67-.5a.824.824%200%200%200%20.195-.551.827.827%200%200%200-.194-.548c-.13-.155-.353-.322-.671-.503l-8.66-5.014a3.08%203.08%200%200%200-.45-.222%201.21%201.21%200%200%200-.436-.08.876.876%200%200%200-.698.306c-.175.204-.263.48-.263.826v10.471c0%20.345.088.62.263.824a.876.876%200%200%200%20.698.306z%22%20fill%3D%22%23444%22%20fill-rule%3D%22nonzero%22%2F%3E%3Crect%20stroke%3D%22%23444%22%20stroke-width%3D%226%22%20x%3D%223%22%20y%3D%223%22%20width%3D%2236%22%20height%3D%2230%22%20rx%3D%223%22%2F%3E%3Ccircle%20stroke%3D%22%23FFF%22%20stroke-width%3D%222.2%22%20fill%3D%22%23444%22%20cx%3D%2239%22%20cy%3D%2232%22%20r%3D%228.9%22%2F%3E%3Cpath%20d%3D%22M34.917%2032.498a.959.959%200%200%200%20.704.291c.275%200%20.51-.097.703-.291l.433-.432%201.316-1.538-.1%204.844a.96.96%200%200%200%20.291.754c.208.208.462.315.764.322a.975.975%200%200%200%20.749-.317.974.974%200%200%200%20.296-.749l-.11-4.814%201.296%201.478.432.432a.97.97%200%200%200%20.699.296.935.935%200%200%200%20.698-.286.935.935%200%200%200%20.286-.699.97.97%200%200%200-.296-.698l-3.236-3.236c-.563-.563-1.122-.566-1.678-.01l-3.247%203.246a.959.959%200%200%200-.291.703c0%20.275.097.51.291.704z%22%20fill%3D%22%23FFF%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
}
}
.ql-editor{
min-height: 350px;
max-height: 800px;
}
&-modal{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.9);
text-align: center;
z-index: 10;
&-box{
display: inline-block;
position: fixed;
top: 50%;
min-height: 200px;
background: #fff;
transform: translate(0, -50%);
border-radius: 8px;
max-width: 90%;
min-width: 560px;
padding: 48px;
&-header{
display: block;
text-align: left;
font-size: 21px;
font-weight: bold;
margin-bottom: 35px;
}
}
&-close {
position: absolute;
top: 0;
right: 0;
}
&-action {
width: 100%;
padding: 24px 0 0;
text-align: right;
}
input[type="text"]{
background-color: #F5F7FA;
font-size: 18px;
border: none;
padding: 19px 25px;
border-radius: 16px;
width: 100%;
margin-bottom: 24px;
}
}
&-uploader{
&-drop{
display: flex;
width: 490px;
height: 154px;
background-color: #F5F7FA;
border-radius: 16px;
border: 2px dashed #CCD1D9;
box-shadow: 0 0 0 1px #F5F7FA;
justify-content: center;
align-items: center;
}
&-placeholder{
display: inline-block;
color: #656D77;
}
&-uitems{
display: block;
text-align: left;
margin-bottom: 32px;
&-elem{
position: relative;
display: inline-block;
width: 116px;
background-color: lightgrey;
border-radius: 4px;
margin-right: 16px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
aspect-ratio: 16 / 9;
}
&-del{
}
}
&-progress{
position: relative;
width: 40px;
height: 8px;
background-color: #ffffff;
border-radius: 4px;
&-wrap{
display: flex;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(67,74,83,0.5);
border-radius: inherit;
justify-content: center;
align-items: center;
}
& > div{
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: #1790FF;
border-radius: 4px;
}
}
}
&-btn{
font-size: 16px;
-webkit-appearance: none;
outline: none;
border: none;
background: none;
padding: 16px 24px;
&:hover{
cursor: pointer;
opacity: 0.7;
}
&.atma-editor-complete{
background-color: #1790FF;
border-radius: 24px;
color: #ffffff;
}
&.atma-editor-cancel{
}
}
&-soc-video{
display: block;
list-style: none;
margin: 0 0 35px 0;
padding: 0;
text-align: left;
li{
display: inline-block;
vertical-align: middle;
background-position: center center;
background-repeat: no-repeat;
margin-right: 12px;
&.youtube{
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2226%22%20height%3D%2218%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M24.776%202.966A3.17%203.17%200%200%200%2022.539.729C20.565.2%2012.652.2%2012.652.2S4.74.2%202.766.73A3.17%203.17%200%200%200%20.529%202.966C0%204.939%200%209.056%200%209.056s0%204.118.529%206.091a3.169%203.169%200%200%200%202.237%202.237c1.973.53%209.886.53%209.886.53s7.913%200%209.887-.53a3.169%203.169%200%200%200%202.237-2.237c.528-1.973.528-6.09.528-6.09s0-4.118-.528-6.091%22%20fill%3D%22%23FF0100%22%2F%3E%3Cpath%20fill%3D%22%23FFFFFE%22%20d%3D%22m10.122%2012.852%206.574-3.795-6.574-3.796v7.591%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
width: 26px;
height: 18px;
}
&.vimeo{
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2216%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.544%203.114c-.069%201.514-1.127%203.588-3.172%206.22-2.114%202.749-3.903%204.124-5.367%204.124-.906%200-1.673-.837-2.3-2.512L3.45%206.342C2.985%204.668%202.486%203.83%201.952%203.83c-.116%200-.524.245-1.221.733L0%203.62c.767-.674%201.524-1.35%202.269-2.025C3.293.71%204.061.245%204.574.198%205.784.082%206.529.91%206.809%202.68c.302%201.912.511%203.1.628%203.566.349%201.586.733%202.378%201.152%202.378.326%200%20.815-.515%201.467-1.543.651-1.03%201-1.812%201.047-2.35.093-.887-.256-1.332-1.047-1.332-.373%200-.757.085-1.151.255.764-2.504%202.224-3.721%204.38-3.652%201.598.047%202.351%201.084%202.259%203.11%22%20fill%3D%22%231AB7EA%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
width: 16px;
height: 18px;
}
&.vk{
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M8.392.151h7.3c6.663%200%208.24%201.578%208.24%208.24v7.301c0%206.663-1.577%208.24-8.24%208.24h-7.3c-6.663%200-8.241-1.577-8.241-8.24v-7.3C.151%201.729%201.729.15%208.391.15%22%20fill%3D%22%234680C2%22%2F%3E%3Cpath%20d%3D%22M19.62%208.341c.117-.369%200-.638-.52-.638h-1.73c-.436%200-.637.235-.755.487%200%200-.89%202.148-2.131%203.541-.403.403-.587.538-.806.538-.117%200-.268-.135-.268-.504v-3.44c0-.437-.134-.638-.504-.638h-2.719c-.268%200-.436.201-.436.403%200%20.42.621.52.688%201.695v2.55c0%20.555-.1.655-.319.655-.587%200-2.014-2.165-2.87-4.632-.167-.487-.335-.671-.772-.671H4.733c-.504%200-.588.235-.588.486%200%20.454.588%202.736%202.736%205.757%201.427%202.064%203.457%203.172%205.287%203.172%201.108%200%201.242-.252%201.242-.671V14.87c0-.504.1-.587.453-.587.252%200%20.705.134%201.729%201.124%201.174%201.175%201.376%201.712%202.03%201.712h1.729c.504%200%20.739-.252.604-.739-.15-.486-.721-1.191-1.46-2.03-.403-.47-1.007-.99-1.192-1.242-.251-.336-.184-.47%200-.772-.016%200%202.098-2.988%202.317-3.995%22%20fill%3D%22%23FFF%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
width: 24px;
height: 24px;
}
&.ok{
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M23.913%2012.054C23.913%2018.652%2018.565%2024%2011.967%2024S.021%2018.652.021%2012.054%205.369.108%2011.967.108s11.946%205.348%2011.946%2011.946%22%20fill%3D%22%23EE8208%22%2F%3E%3Cpath%20d%3D%22M12%207.194c.82%200%201.488.668%201.488%201.489A1.49%201.49%200%200%201%2012%2010.17a1.49%201.49%200%200%201-1.488-1.488c0-.821.668-1.489%201.488-1.489m0%205.082a3.598%203.598%200%200%200%203.594-3.593A3.598%203.598%200%200%200%2012%205.088a3.599%203.599%200%200%200-3.594%203.595A3.598%203.598%200%200%200%2012%2012.276M13.455%2015.205a6.724%206.724%200%200%200%202.09-.867c.492-.311.64-.963.33-1.456a1.052%201.052%200%200%200-1.454-.332%204.56%204.56%200%200%201-4.843%200%201.052%201.052%200%200%200-1.453.332%201.057%201.057%200%200%200%20.33%201.456c.65.409%201.357.7%202.09.867L8.532%2017.22a1.058%201.058%200%200%200%20.746%201.803c.27%200%20.54-.103.745-.31L12%2016.734l1.977%201.98c.41.413%201.078.413%201.49%200a1.056%201.056%200%200%200%200-1.493l-2.012-2.015%22%20fill%3D%22%23FFFFFE%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
width: 24px;
height: 24px;
}
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment