UNPKG

@kademi/keditor

Version:

KEditor is a jQuery plugin which provides a content editor with drag n drop, configurable contents

github.com/Kademi/keditor

Kademi/keditor

135 lines (113 loc) • 8.19 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
// Colors // ------------------------------------------------- @blue : #2eb2e4; @blueLight : #b5e4f6; @blueLighter : #dfeaf1; @black : #1b1d27; // Common colors @border-color : #ddd; @ui-color : #333; // Border radius // ------------------------------------------------- @border-radius : 5px; // Animation option // ------------------------------------------------- @animation-duration : 0.3s; // Closer // ------------------------------------------------- @closer-color : #ccc; @closer-hover-color : #aaa; // Wrapper // ------------------------------------------------- @wrapper-bg : #F6F6F6; @wrapper-shadow : 0 0 3px rgba(0, 0, 0, .2); @wrapper-bg-image : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDc0RDRBMjA4RDhFMTFFOUExMDBGMzg5QkFCNzlCMTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDc0RDRBMjE4RDhFMTFFOUExMDBGMzg5QkFCNzlCMTYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENzRENEExRThEOEUxMUU5QTEwMEYzODlCQUI3OUIxNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpENzRENEExRjhEOEUxMUU5QTEwMEYzODlCQUI3OUIxNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkwGdVcAAAAGUExUReDh4////2LjhOYAAAACdFJOU/8A5bcwSgAAAEpJREFUeNrs0MEJADAMAzF7/6X76QoNJegWEFzapo/LHuRm119IIRAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCGQCOQIMAPTHJwTdmuFCAAAAAElFTkSuQmCC'; @wrapper-bg-image2 : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAMAAABG8BK2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDdCNUFGQ0M4RDhGMTFFOUI5OEU4NzVCODUzRTM3RjYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDdCNUFGQ0Q4RDhGMTFFOUI5OEU4NzVCODUzRTM3RjYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowN0I1QUZDQThEOEYxMUU5Qjk4RTg3NUI4NTNFMzdGNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowN0I1QUZDQjhEOEYxMUU5Qjk4RTg3NUI4NTNFMzdGNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmkfBJAAAAAGUExUReDh4////2LjhOYAAAACdFJOU/8A5bcwSgAAADtJREFUeNrsz7ENADAMwzD7/6e79INmKALqAAJK2/S5/MXcdk3NMcVgMBgMBoPBYDAYDAaDwcwzR4ABAPlJExg4Hh9rAAAAAElFTkSuQmCC'; // Iframe // ------------------------------------------------- @iframe-wrapper-shadow : 0 0 35px rgba(0, 0, 0, .07); // Button // ------------------------------------------------- @btn-height : 23px; @btn-font-size : 12px; @btn-box-shadow : 1px 1px 2px rgba(0, 0, 0, 0.2); @btn-padding : 0 10px; @btn-default-color : #333; @btn-default-bg : #fff; @btn-default-border : #ddd; @btn-primary-color : #fff; @btn-primary-bg : #333; @btn-primary-border : #333; // Modal // ------------------------------------------------- @modal-zindex : 99999; @modal-bg : #fff; // Modal header @modal-header-height : 56px; @modal-header-padding : 0 15px; @modal-header-title-color : #333; @modal-header-title-font-size : 18px; // Modal footer @modal-footer-height : 54px; @modal-footer-padding : 0 15px; @modal-footer-btn-height : 30px; // Modal closer @modal-closer-size : 32px; @modal-closer-font-size : 20px; // Modal input @modal-input-bg : #eee; // Topbar // ------------------------------------------------- @topbar-height : 50px; @topbar-bg : @black; @topbar-title-size : 16px; @topbar-title-color : #fff; @topbar-btn-hover : #303443; @topbar-btn-color : #c8c9cf; @topbar-btn-icon-size : 20px; // Sidebar // ------------------------------------------------- @sidebar-bg : #f0f0f0; @sidebar-shadow-color : rgba(0, 0, 0, .15); @sidebar-width : 300px; @sidebar-close-size : 24px; @sidebar-body-padding : 10px 15px; // Snippet // ------------------------------------------------- @snippet-container-padding : 15px 7.5px 0; @snippet-bg : #ffffff; @snippet-title-height : 30px; @snippet-title-size : 12px; @snippet-margin : 0 7.5px 15px; @snippet-width : 200px; @snippet-width-mobile : ~"calc(100% - 30px)"; @snippet-border-color : #eee; @snippet-border-color-selected : @blue; @snippet-box-shadow-selected : 0 0 0 2px @blue; // Toolbar // ------------------------------------------------- @toolbar-item-size : 21px; @toolbar-item-font-size : 12px; // Component // ------------------------------------------------- @component-outline-with : 1px; @component-outline-color-hover : rgba(0, 0, 0, .5); @component-outline-color-selected : rgba(0, 0, 0, .8); // Component toolbar @component-toolbar-bg : rgba(0, 0, 0, .5); @component-toolbar-button-color : #fff; @component-toolbar-button-bg-hover : rgba(0, 0, 0, .8); @component-toolbar-outline-color : rgba(0, 0, 0, .5); // Container // ------------------------------------------------- @container-outline-with : 2px; @container-outline-offset : 0; @container-outline-color-hover : lighten(@black, 60%); @container-outline-color-selected : @black; // Container toolbar @container-toolbar-button-bg : @black; @container-toolbar-button-bg-hover : @blue; @container-toolbar-button-color : #fff; // Container content @container-content-outline-color : #e0e0e0; @container-content-outline-highlighted : @blue;