vue-editify 0.2.3 → 0.2.5

Sign up to get free protection for your applications and to get access to all the features.
Files changed (30) hide show
  1. package/examples/App.vue +35 -10
  2. package/lib/editify/editify.vue.d.ts +9 -0
  3. package/lib/editify/props.d.ts +4 -0
  4. package/lib/editify.es.js +29 -8
  5. package/lib/editify.umd.js +2 -2
  6. package/lib/index.d.ts +10 -1
  7. package/package.json +1 -1
  8. package/src/components/button/button.less +16 -16
  9. package/src/components/checkbox/checkbox.less +14 -14
  10. package/src/components/colors/colors.less +9 -9
  11. package/src/components/insertImage/insertImage.less +13 -13
  12. package/src/components/insertLink/insertLink.less +9 -9
  13. package/src/components/insertTable/insertTable.less +4 -4
  14. package/src/components/insertVideo/insertVideo.less +13 -13
  15. package/src/components/layer/layer.less +6 -6
  16. package/src/components/menu/menu.less +7 -7
  17. package/src/components/toolbar/toolbar.less +10 -10
  18. package/src/components/tooltip/tooltip.less +1 -1
  19. package/src/components/tooltip/tooltip.vue +4 -2
  20. package/src/components/triangle/triangle.less +11 -8
  21. package/src/css/hljs.less +8 -8
  22. package/src/css/var.less +81 -0
  23. package/src/editify/editify.less +56 -55
  24. package/src/editify/editify.vue +17 -0
  25. package/src/editify/props.ts +5 -0
  26. package/src/index.ts +3 -1
  27. package/src/plugins/attachment/insertAttachment/insertAttachment.less +19 -19
  28. package/src/plugins/mathformula/insertMathformula/insertMathformula.less +9 -9
  29. package/vite.config.ts +1 -2
  30. package/src/css/base.less +0 -32
package/lib/index.d.ts CHANGED
@@ -114,6 +114,10 @@ declare const Editify: import('./core/tool').SFCWithInstall<import('vue').Define
114
114
  type: import('vue').PropType<import('./core/tool').PluginType[]>;
115
115
  default: () => never[];
116
116
  };
117
+ dark: {
118
+ type: BooleanConstructor;
119
+ default: boolean;
120
+ };
117
121
  }, {
118
122
  editor: import('vue').Ref<{
119
123
  $el: HTMLElement;
@@ -687,6 +691,10 @@ declare const Editify: import('./core/tool').SFCWithInstall<import('vue').Define
687
691
  type: import('vue').PropType<import('./core/tool').PluginType[]>;
688
692
  default: () => never[];
689
693
  };
694
+ dark: {
695
+ type: BooleanConstructor;
696
+ default: boolean;
697
+ };
690
698
  }>> & {
691
699
  onFocus?: ((...args: any[]) => any) | undefined;
692
700
  onBlur?: ((...args: any[]) => any) | undefined;
@@ -726,6 +734,7 @@ declare const Editify: import('./core/tool').SFCWithInstall<import('vue').Define
726
734
  renderRules: ((el: import('alex-editor').AlexElement) => void)[];
727
735
  tab: boolean;
728
736
  plugins: import('./core/tool').PluginType[];
737
+ dark: boolean;
729
738
  }, {}>>;
730
739
  export type { ButtonTypeType, ButtonOptionsItemType, ButtonSelectConfigType, ButtonDisplayConfigType } from './components/button/props';
731
740
  export type { InsertImageUploadErrorType } from './components/insertImage/props';
@@ -734,7 +743,7 @@ export type { MenuButtonType, MenuSelectButtonType, MenuDisplayButtonType, MenuI
734
743
  export type { ElementMatchConfigType } from './core/function';
735
744
  export { elementIsMatch, getMatchElementByElement, getMatchElementByRange, isList, isTask, elementIsInList, elementIsInTask, hasPreInRange, hasQuoteInRange, hasListInRange, hasTaskInRange, hasLinkInRange, hasTableInRange, hasImageInRange, hasVideoInRange, isRangeInQuote, isRangeInList, isRangeInTask, queryTextStyle, queryTextMark, getRangeText, setIndentIncrease, setIndentDecrease, setQuote, setAlign, setList, setTask, setTextStyle, setTextMark, removeTextStyle, removeTextMark, setLineHeight, insertLink, insertImage, insertVideo, insertTable, insertCodeBlock, insertSeparator } from './core/function';
736
745
  declare const install: (app: App) => void;
737
- declare const version = "0.2.3";
746
+ declare const version = "0.2.5";
738
747
  export { AlexElement } from 'alex-editor';
739
748
  export type { AttachmentOptionsType } from './plugins/attachment';
740
749
  export type { InsertAttachmentUploadErrorType } from './plugins/attachment/insertAttachment/props';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue-editify",
3
- "version": "0.2.3",
3
+ "version": "0.2.5",
4
4
  "private": false,
5
5
  "sideEffects": [
6
6
  "*.css"
package/src/components/button/button.less CHANGED
@@ -3,8 +3,8 @@
3
3
  justify-content: center;
4
4
  align-items: center;
5
5
  position: relative;
6
- color: @font-color;
7
- font-size: @font-size;
6
+ color: var(--editify-font-color);
7
+ font-size: var(--font-size);
8
8
 
9
9
  .editify-button-wrap {
10
10
  padding: 2px 4px;
@@ -18,7 +18,7 @@
18
18
  transform: translateY(-50%);
19
19
  height: 18px;
20
20
  width: 1px;
21
- background-color: @border-color;
21
+ background-color: var(--editify-border-color);
22
22
  }
23
23
 
24
24
  &.editify-left-border::before {
@@ -29,7 +29,7 @@
29
29
  transform: translateY(-50%);
30
30
  height: 18px;
31
31
  width: 1px;
32
- background-color: @border-color;
32
+ background-color: var(--editify-border-color);
33
33
  }
34
34
 
35
35
  .editify-button-el {
@@ -39,8 +39,8 @@
39
39
  white-space: nowrap;
40
40
  height: 28px;
41
41
  line-height: 1;
42
- transition: all 200ms;
43
- background-color: @background;
42
+ transition: all 300ms;
43
+ background-color: var(--editify-background);
44
44
  padding: 0 8px;
45
45
  border-radius: 2px;
46
46
 
@@ -53,8 +53,8 @@
53
53
  .editify-button-caret {
54
54
  margin-left: 2px;
55
55
  transform: scale(0.6);
56
- transition: transform 200ms;
57
- font-size: 14px;
56
+ transition: transform 300ms;
57
+ font-size: var(--font-size);
58
58
 
59
59
  &.editify-rotate {
60
60
  transform: scale(0.6) rotate(180deg);
@@ -63,18 +63,18 @@
63
63
 
64
64
  &:hover {
65
65
  cursor: pointer;
66
- background-color: @background-dark;
66
+ background-color: var(--editify-background-dark);
67
67
  }
68
68
 
69
69
  &:active,
70
70
  &.editify-active {
71
- background-color: @background-darker;
71
+ background-color: var(--editify-background-darker);
72
72
  }
73
73
 
74
74
  &.editify-disabled {
75
- color: @font-color-disabled;
75
+ color: var(--editify-font-color-disabled);
76
76
  cursor: not-allowed;
77
- background-color: @background;
77
+ background-color: var(--editify-background);
78
78
  }
79
79
  }
80
80
  }
@@ -100,7 +100,7 @@
100
100
  align-items: center;
101
101
  width: 100%;
102
102
  padding: 6px 12px;
103
- transition: all 200ms;
103
+ transition: all 300ms;
104
104
  opacity: 0.8;
105
105
  white-space: nowrap;
106
106
  text-overflow: ellipsis;
@@ -110,17 +110,17 @@
110
110
  &:hover {
111
111
  opacity: 1;
112
112
  cursor: pointer;
113
- background-color: @background-dark;
113
+ background-color: var(--editify-background-dark);
114
114
  }
115
115
 
116
116
  &:active {
117
117
  opacity: 1;
118
- background-color: @background-darker;
118
+ background-color: var(--editify-background-darker);
119
119
  }
120
120
 
121
121
  &.editify-active {
122
122
  opacity: 1;
123
- background-color: @background-darker;
123
+ background-color: var(--editify-background-darker);
124
124
  }
125
125
 
126
126
  .editify-button-option-flex {
package/src/components/checkbox/checkbox.less CHANGED
@@ -8,7 +8,7 @@
8
8
  align-items: center;
9
9
  cursor: pointer;
10
10
  user-select: none;
11
- font-size: @font-size;
11
+ font-size: var(--font-size);
12
12
 
13
13
  input[type='checkbox'] {
14
14
  width: 0;
@@ -26,10 +26,10 @@
26
26
  position: relative;
27
27
  margin: 0;
28
28
  padding: 1px;
29
- border: 1px solid @border-color;
30
- background-color: @background;
29
+ border: 1px solid var(--editify-border-color);
30
+ background-color: var(--editify-background);
31
31
  border-radius: 2px;
32
- color: @background;
32
+ color: var(--editify-background);
33
33
  transition: border-color 0.1s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.1s cubic-bezier(0.71, -0.46, 0.29, 1.46), color 0.1s cubic-bezier(0.71, -0.46, 0.29, 1.46);
34
34
 
35
35
  &.editify-round {
@@ -37,13 +37,13 @@
37
37
  }
38
38
 
39
39
  &.editify-checked {
40
- background-color: @font-color;
41
- border-color: @font-color;
40
+ background-color: var(--editify-font-color);
41
+ border-color: var(--editify-font-color);
42
42
 
43
43
  &.editify-reverse {
44
- background-color: @background;
45
- color: @font-color-light;
46
- border-color: @border-color;
44
+ background-color: var(--editify-background);
45
+ color: var(--editify-font-color-light);
46
+ border-color: var(--editify-border-color);
47
47
  }
48
48
  }
49
49
 
@@ -55,7 +55,7 @@
55
55
 
56
56
  .editify-checkbox-label {
57
57
  vertical-align: middle;
58
- color: @font-color;
58
+ color: var(--editify-font-color);
59
59
  user-select: none;
60
60
  line-height: 1;
61
61
 
@@ -72,13 +72,13 @@
72
72
  cursor: not-allowed;
73
73
  .editify-checkbox-item,
74
74
  .editify-checkbox-item.check {
75
- background-color: @background-darker;
76
- border-color: @border-color;
77
- color: @font-color-disabled;
75
+ background-color: var(--editify-background-darker);
76
+ border-color: var(--editify-border-color);
77
+ color: var(--editify-font-color-disabled);
78
78
  }
79
79
 
80
80
  .editify-checkbox-label {
81
- color: @font-color-disabled;
81
+ color: var(--editify-font-color-disabled);
82
82
  }
83
83
  }
84
84
  }
package/src/components/colors/colors.less CHANGED
@@ -1,7 +1,7 @@
1
1
  .editify-colors {
2
2
  display: block;
3
- color: @font-color;
4
- font-size: @font-size;
3
+ color: var(--editify-font-color);
4
+ font-size: var(--font-size);
5
5
  padding: 6px 10px;
6
6
  box-sizing: border-box;
7
7
  width: 244px;
@@ -12,7 +12,7 @@
12
12
  align-items: center;
13
13
  position: relative;
14
14
  padding: 6px 10px;
15
- transition: all 200ms;
15
+ transition: all 300ms;
16
16
  margin-bottom: 10px;
17
17
  opacity: 0.8;
18
18
 
@@ -20,7 +20,7 @@
20
20
  content: '';
21
21
  width: 100%;
22
22
  height: 1px;
23
- background-color: @background-darker;
23
+ background-color: var(--editify-background-darker);
24
24
  position: absolute;
25
25
  left: 0;
26
26
  bottom: -5px;
@@ -32,13 +32,13 @@
32
32
 
33
33
  &:hover {
34
34
  cursor: pointer;
35
- background-color: @background-dark;
35
+ background-color: var(--editify-background-dark);
36
36
  opacity: 1;
37
37
  }
38
38
 
39
39
  &:active {
40
40
  opacity: 1;
41
- background-color: @background-darker;
41
+ background-color: var(--editify-background-darker);
42
42
  }
43
43
  }
44
44
 
@@ -54,17 +54,17 @@
54
54
  border-radius: 2px;
55
55
 
56
56
  &.editify-active {
57
- border-color: @font-color-light;
57
+ border-color: var(--editify-font-color-light);
58
58
  }
59
59
 
60
60
  .editify-color-el {
61
61
  display: block;
62
62
  width: 16px;
63
63
  height: 16px;
64
- border: 1px solid @border-color;
64
+ border: 1px solid var(--editify-border-color);
65
65
  border-radius: 2px;
66
66
  cursor: pointer;
67
- transition: all 200ms;
67
+ transition: all 300ms;
68
68
 
69
69
  &:hover {
70
70
  transform: scale(1.2);
package/src/components/insertImage/insertImage.less CHANGED
@@ -20,7 +20,7 @@
20
20
  border-radius: 2px;
21
21
  left: 0;
22
22
  bottom: 0;
23
- transition: left 200ms;
23
+ transition: left 300ms;
24
24
 
25
25
  &.editify-upload {
26
26
  left: 5px;
@@ -34,10 +34,10 @@
34
34
  .editify-image-header-item {
35
35
  display: block;
36
36
  text-align: center;
37
- font-size: @font-size;
38
- color: @font-color;
37
+ font-size: var(--font-size);
38
+ color: var(--editify-font-color);
39
39
  opacity: 0.8;
40
- transition: all 200ms;
40
+ transition: all 300ms;
41
41
  width: 60px;
42
42
  overflow: hidden;
43
43
  white-space: nowrap;
@@ -54,7 +54,7 @@
54
54
 
55
55
  &.editify-active {
56
56
  opacity: 1;
57
- color: @font-color-dark;
57
+ color: var(--editify-font-color-dark);
58
58
  }
59
59
  }
60
60
  }
@@ -72,11 +72,11 @@
72
72
  margin: 0 0 10px 0;
73
73
  padding: 4px 2px;
74
74
  border: none;
75
- font-size: @font-size;
76
- color: @font-color;
77
- border-bottom: 1px solid @border-color;
75
+ font-size: var(--font-size);
76
+ color: var(--editify-font-color);
77
+ border-bottom: 1px solid var(--editify-border-color);
78
78
  line-height: 1.5;
79
- transition: border-color 500ms;
79
+ transition: border-color 300ms;
80
80
  background-color: transparent;
81
81
  outline: none;
82
82
  box-sizing: border-box;
@@ -84,7 +84,7 @@
84
84
 
85
85
  &::-webkit-input-placeholder,
86
86
  &::placeholder {
87
- color: @font-color-disabled;
87
+ color: var(--editify-font-color-disabled);
88
88
  font-family: inherit;
89
89
  font-size: inherit;
90
90
  vertical-align: middle;
@@ -96,9 +96,9 @@
96
96
  justify-content: flex-end;
97
97
  align-items: center;
98
98
  width: 100%;
99
- font-size: @font-size;
99
+ font-size: var(--font-size);
100
100
  opacity: 0.8;
101
- transition: all 200ms;
101
+ transition: all 300ms;
102
102
 
103
103
  &:hover {
104
104
  cursor: pointer;
@@ -115,7 +115,7 @@
115
115
  padding: 15px 0;
116
116
  font-size: 36px;
117
117
  opacity: 0.8;
118
- transition: all 200ms;
118
+ transition: all 300ms;
119
119
  position: relative;
120
120
 
121
121
  &:hover {
package/src/components/insertLink/insertLink.less CHANGED
@@ -7,8 +7,8 @@
7
7
  display: block;
8
8
  text-align: left;
9
9
  margin-bottom: 10px;
10
- font-size: @font-size;
11
- color: @font-color;
10
+ font-size: var(--font-size);
11
+ color: var(--editify-font-color);
12
12
  }
13
13
 
14
14
  input {
@@ -20,11 +20,11 @@
20
20
  margin: 0 0 10px 0;
21
21
  padding: 4px 2px;
22
22
  border: none;
23
- font-size: @font-size;
24
- color: @font-color;
25
- border-bottom: 1px solid @border-color;
23
+ font-size: var(--font-size);
24
+ color: var(--editify-font-color);
25
+ border-bottom: 1px solid var(--editify-border-color);
26
26
  line-height: 1.5;
27
- transition: border-color 500ms;
27
+ transition: border-color 300ms;
28
28
  background-color: transparent;
29
29
  outline: none;
30
30
  box-sizing: border-box;
@@ -32,7 +32,7 @@
32
32
 
33
33
  &::-webkit-input-placeholder,
34
34
  &::placeholder {
35
- color: @font-color-disabled;
35
+ color: var(--editify-font-color-disabled);
36
36
  font-family: inherit;
37
37
  font-size: inherit;
38
38
  vertical-align: middle;
@@ -53,8 +53,8 @@
53
53
  & > span {
54
54
  cursor: pointer;
55
55
  opacity: 0.8;
56
- transition: all 200ms;
57
- font-size: @font-size;
56
+ transition: all 300ms;
57
+ font-size: var(--font-size);
58
58
 
59
59
  &:hover {
60
60
  opacity: 1;
package/src/components/insertTable/insertTable.less CHANGED
@@ -5,7 +5,7 @@
5
5
  box-sizing: border-box;
6
6
 
7
7
  table {
8
- border: 1px solid @border-color;
8
+ border: 1px solid var(--editify-border-color);
9
9
  margin: 0;
10
10
  padding: 0;
11
11
  border-collapse: collapse;
@@ -17,7 +17,7 @@
17
17
  td {
18
18
  margin: 0;
19
19
  padding: 0;
20
- border: 1px solid @border-color;
20
+ border: 1px solid var(--editify-border-color);
21
21
 
22
22
  span {
23
23
  display: block;
@@ -30,7 +30,7 @@
30
30
  }
31
31
 
32
32
  &.editify-inside {
33
- background-color: @background-darker;
33
+ background-color: var(--editify-background-darker);
34
34
  }
35
35
  }
36
36
  }
@@ -38,7 +38,7 @@
38
38
 
39
39
  .editify-table-footer {
40
40
  text-align: center;
41
- color: @font-color-light;
41
+ color: var(--editify-font-color-light);
42
42
  line-height: 1;
43
43
  font-size: 12px;
44
44
  position: absolute;
package/src/components/insertVideo/insertVideo.less CHANGED
@@ -20,7 +20,7 @@
20
20
  border-radius: 2px;
21
21
  left: 0;
22
22
  bottom: 0;
23
- transition: left 200ms;
23
+ transition: left 300ms;
24
24
 
25
25
  &.editify-upload {
26
26
  left: 5px;
@@ -34,10 +34,10 @@
34
34
  .editify-video-header-item {
35
35
  display: block;
36
36
  text-align: center;
37
- font-size: @font-size;
38
- color: @font-color;
37
+ font-size: var(--font-size);
38
+ color: var(--editify-font-color);
39
39
  opacity: 0.8;
40
- transition: all 200ms;
40
+ transition: all 300ms;
41
41
  width: 60px;
42
42
  overflow: hidden;
43
43
  white-space: nowrap;
@@ -54,7 +54,7 @@
54
54
 
55
55
  &.editify-active {
56
56
  opacity: 1;
57
- color: @font-color-dark;
57
+ color: var(--editify-font-color-dark);
58
58
  }
59
59
  }
60
60
  }
@@ -72,11 +72,11 @@
72
72
  margin: 0 0 10px 0;
73
73
  padding: 4px 2px;
74
74
  border: none;
75
- font-size: @font-size;
76
- color: @font-color;
77
- border-bottom: 1px solid @border-color;
75
+ font-size: var(--font-size);
76
+ color: var(--editify-font-color);
77
+ border-bottom: 1px solid var(--editify-border-color);
78
78
  line-height: 1.5;
79
- transition: border-color 500ms;
79
+ transition: border-color 300ms;
80
80
  background-color: transparent;
81
81
  outline: none;
82
82
  box-sizing: border-box;
@@ -84,7 +84,7 @@
84
84
 
85
85
  &::-webkit-input-placeholder,
86
86
  &::placeholder {
87
- color: @font-color-disabled;
87
+ color: var(--editify-font-color-disabled);
88
88
  font-family: inherit;
89
89
  font-size: inherit;
90
90
  vertical-align: middle;
@@ -96,9 +96,9 @@
96
96
  justify-content: flex-end;
97
97
  align-items: center;
98
98
  width: 100%;
99
- font-size: @font-size;
99
+ font-size: var(--font-size);
100
100
  opacity: 0.8;
101
- transition: all 200ms;
101
+ transition: all 300ms;
102
102
 
103
103
  &:hover {
104
104
  cursor: pointer;
@@ -115,7 +115,7 @@
115
115
  padding: 15px 0;
116
116
  font-size: 36px;
117
117
  opacity: 0.8;
118
- transition: all 200ms;
118
+ transition: all 300ms;
119
119
  position: relative;
120
120
 
121
121
  &:hover {
package/src/components/layer/layer.less CHANGED
@@ -4,7 +4,7 @@
4
4
  }
5
5
  .editify-layer-fade-enter-active,
6
6
  .editify-layer-fade-leave-active {
7
- transition: opacity 200ms linear;
7
+ transition: opacity 300ms linear;
8
8
  }
9
9
 
10
10
  .editify-layer-translate-enter-from,
@@ -15,15 +15,15 @@
15
15
 
16
16
  .editify-layer-translate-enter-active,
17
17
  .editify-layer-translate-leave-active {
18
- transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
18
+ transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
19
19
  }
20
20
 
21
21
  .editify-layer {
22
22
  display: block;
23
23
  position: absolute;
24
24
  padding: 0 0 10px 0;
25
- font-size: @font-size;
26
- color: @font-color;
25
+ font-size: var(--font-size);
26
+ color: var(--editify-font-color);
27
27
 
28
28
  &[data-editify-placement='bottom'],
29
29
  &[data-editify-placement='bottom-start'],
@@ -38,12 +38,12 @@
38
38
 
39
39
  .editify-layer-wrap {
40
40
  display: block;
41
- background-color: @background;
41
+ background-color: var(--editify-background);
42
42
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
43
43
  border-radius: 4px;
44
44
 
45
45
  &.editify-border {
46
- border: 1px solid @border-color;
46
+ border: 1px solid var(--editify-border-color);
47
47
  }
48
48
  }
49
49
  }
package/src/components/menu/menu.less CHANGED
@@ -3,7 +3,7 @@
3
3
  justify-content: flex-start;
4
4
  flex-wrap: wrap;
5
5
  width: 100%;
6
- background-color: @background;
6
+ background-color: var(--editify-background);
7
7
  position: relative;
8
8
  z-index: 2;
9
9
 
@@ -14,13 +14,13 @@
14
14
 
15
15
  //默认菜单模式显示边框，同时显示圆角
16
16
  &.editify-border {
17
- border: 1px solid @border-color;
17
+ border: 1px solid var(--editify-border-color);
18
18
  border-radius: 4px;
19
19
  }
20
20
 
21
21
  //全屏模式下，默认菜单的边框失效，此时加一个下边框
22
22
  &.editify-fullscreen {
23
- border-bottom: 1px solid @border-color;
23
+ border-bottom: 1px solid var(--editify-border-color);
24
24
  }
25
25
  }
26
26
 
@@ -31,10 +31,10 @@
31
31
 
32
32
  //inner菜单模式显示边框，同时显示圆角
33
33
  &.editify-border {
34
- border: 1px solid @border-color;
34
+ border: 1px solid var(--editify-border-color);
35
35
  border-bottom: none;
36
36
  border-radius: 4px 4px 0 0;
37
- transition: all 500ms;
37
+ transition: all 300ms;
38
38
  }
39
39
 
40
40
  //inner菜单模式加一个下边框，此边框在代码视图下不显示
@@ -43,7 +43,7 @@
43
43
  content: '';
44
44
  width: calc(100% - 20px);
45
45
  height: 1px;
46
- background-color: @border-color;
46
+ background-color: var(--editify-border-color);
47
47
  left: 50%;
48
48
  transform: translateX(-50%);
49
49
  bottom: 0;
@@ -57,7 +57,7 @@
57
57
  left: 0;
58
58
  top: 0;
59
59
  width: 100%;
60
- border-bottom: 1px solid @border-color;
60
+ border-bottom: 1px solid var(--editify-border-color);
61
61
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
62
62
  }
63
63
  }
package/src/components/toolbar/toolbar.less CHANGED
@@ -18,8 +18,8 @@
18
18
  display: block;
19
19
  text-align: left;
20
20
  margin-bottom: 10px;
21
- font-size: @font-size;
22
- color: @font-color;
21
+ font-size: var(--font-size);
22
+ color: var(--editify-font-color);
23
23
  }
24
24
 
25
25
  input {
@@ -31,17 +31,17 @@
31
31
  margin: 0 0 10px 0;
32
32
  padding: 4px 2px;
33
33
  border: none;
34
- font-size: @font-size;
35
- color: @font-color;
36
- border-bottom: 1px solid @border-color;
34
+ font-size: var(--font-size);
35
+ color: var(--editify-font-color);
36
+ border-bottom: 1px solid var(--editify-border-color);
37
37
  line-height: 1.5;
38
- transition: all 500ms;
38
+ transition: all 300ms;
39
39
  background-color: transparent;
40
40
  outline: none;
41
41
 
42
42
  &::-webkit-input-placeholder,
43
43
  &::placeholder {
44
- color: @font-color-disabled;
44
+ color: var(--editify-font-color-disabled);
45
45
  font-family: inherit;
46
46
  font-size: inherit;
47
47
  vertical-align: middle;
@@ -58,8 +58,8 @@
58
58
  justify-content: space-between;
59
59
  align-items: center;
60
60
  width: 100%;
61
- font-size: @font-size;
62
- color: @font-color-light;
61
+ font-size: var(--font-size);
62
+ color: var(--editify-font-color-light);
63
63
 
64
64
  .editify-toolbar-link-operations {
65
65
  display: flex;
@@ -70,7 +70,7 @@
70
70
  & > a {
71
71
  cursor: pointer;
72
72
  opacity: 0.8;
73
- transition: all 200ms;
73
+ transition: all 300ms;
74
74
 
75
75
  &:hover {
76
76
  opacity: 1;
package/src/components/tooltip/tooltip.less CHANGED
@@ -9,7 +9,7 @@
9
9
  .editify-tooltip-content {
10
10
  display: block;
11
11
  padding: 4px 6px;
12
- font-size: @font-size-small;
12
+ font-size: 12px;
13
13
  white-space: nowrap;
14
14
  }
15
15