source: pro-violet-viettel/sourcecode/assets/css/less/thirdparty-wysiwyg.less @ 692

Last change on this file since 692 was 313, checked in by dungnv, 11 years ago
File size: 6.3 KB
Line 
1.wysiwyg-editor {
2        max-height: 250px;
3        height: 250px;
4        background-color: #F7F8FA;
5        border-collapse: separate;
6        border: 1px solid #BBC0CA;
7        padding: 4px;
8        box-sizing: content-box;
9        overflow-y: scroll;
10        overflow-x:hidden;
11        outline: none;
12       
13        &:focus {
14                background-color:#FFF;
15        }
16}
17
18
19.wysiwyg-toolbar {
20        line-height:32px;
21        margin:0 !important;
22       
23        .dropdown-menu {
24                text-align:left;
25        }
26       
27        .btn-group {
28                float:none;
29                font-size:0;
30        }
31        .btn-group > .btn , .btn-group > .inline > .btn { /* sometimes we need to put .btn inside an .inline.position-relative for dropdowns to show up in correct position */
32                float:none;
33               
34                padding-left:0;
35                padding-right:0;
36                text-align:center;
37                border-width:2px;
38                margin-left:1px;
39               
40                > [class*="icon-"]:first-child {
41                        font-size:14px;
42                        width:25px; max-width:25px;
43                        display:inline-block;
44                        border-width:1px !important;
45                }
46                &.dropdown-toggle > [class*="icon-"]:last-child {
47                        margin-right:4px;
48                }
49               
50                &.active:after {
51                        border-color: transparent;
52                        border-style: solid;
53                        border-top-color: inherit;
54                        border-width: 6px 14px;
55                        bottom: -13px;
56                        left: 0;
57                        right: 0;
58                }
59        }
60}
61
62
63.wysiwyg-style1 , .wysiwyg-style2 {
64        .btn-group > .btn , .btn-group > .inline > .btn {
65                margin:0 !important;
66                background:#FFF !important;
67                border:none !important;
68                color:#ADB3BE !important;
69                text-shadow:none !important;
70               
71                &.active {
72                        color:#5B80CE !important;
73                        &:after {
74                                display:none;
75                        }
76                }
77        }
78       
79        .btn-group {
80                position:relative;
81                &:after {
82                        display:block;
83                        content:"";
84                        position:absolute;
85                        left:-2px; width:0px; max-width:0;
86                        top:6px; bottom:6px;
87                        border-left:1px solid #E1E6EA;
88                }
89                &:first-child:after {
90                        display:none;
91                }
92        }
93}
94
95
96.wysiwyg-style2 {
97        background-color:#E5E5E5;
98       
99        & + .wysiwyg-editor {
100                border-color:#DDD;
101                background-color:#FFF;
102                border-top:none;
103        }
104       
105        .btn-group > .btn , .btn-group > .inline > .btn  {
106                margin:0 1px 0 0 !important;
107                background:#FFF !important;
108                border:none !important;
109                color:#8D939E !important;
110                text-shadow:none !important;
111               
112                &.active  {
113                        color:#FFF !important;
114                        background:#6AAEDF !important;
115                }
116        }
117        .btn-group:after {
118                display:none;
119        }
120       
121}
122
123
124
125
126.wysiwyg-toolbar {
127        .btn-colorpicker {
128                width:24px; height:24px;
129                position:relative;
130
131                background: #87B87F; /* Old browsers */
132                background: -moz-linear-gradient(top, #CF3E73 10%, #FFFFFF 20%, #2283C5 30%, #FFFFFF 40%, #87B87F 50%, #FFFFFF 60%, #FFB752 70%, #FFFFFF 80%, #D15B47 90%, #FFFFFF 100%); /*  FF3.6+ */
133                background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,#CF3E73), color-stop(20%,#FFFFFF), color-stop(30%,#2283C5), color-stop(40%,#FFFFFF), color-stop(50%,#87B87F), color-stop(60%,#FFFFFF), color-stop(70%,#FFB752), color-stop(80%,#FFFFFF), color-stop(90%,#D15B47), color-stop(100%,#FFFFFF)); /* Chrome,Safari4+ */
134                background: -webkit-linear-gradient(top, #CF3E73 10%, #FFFFFF 20%, #2283C5 30%, #FFFFFF 40%, #87B87F 50%, #FFFFFF 60%, #FFB752 70%, #FFFFFF 80%, #D15B47 90%, #FFFFFF 100%); /* Chrome10+,Safari5.1+ */
135                background: -o-linear-gradient(top, #CF3E73 10%, #FFFFFF 20%, #2283C5 30%, #FFFFFF 40%, #87B87F 50%, #FFFFFF 60%, #FFB752 70%, #FFFFFF 80%, #D15B47 90%, #FFFFFF 100%); /* Opera11.10+ */
136                background: -ms-linear-gradient(top, #CF3E73 10%, #FFFFFF 20%, #2283C5 30%, #FFFFFF 40%, #87B87F 50%, #FFFFFF 60%, #FFB752 70%, #FFFFFF 80%, #D15B47 90%, #FFFFFF 100%); /* IE10+ */
137                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CF3E73', endColorstr='#FFB752',GradientType=0 ); /* IE6-9 */
138                background: linear-gradient(top, #CF3E73 10%, #FFFFFF 20%, #2283C5 30%, #FFFFFF 40%, #87B87F 50%, #FFFFFF 60%, #FFB752 70%, #FFFFFF 80%, #D15B47 90%, #FFFFFF 100%); /* W3C */
139        }
140        .dropdown-colorpicker > .dropdown-menu {
141                top:inherit;
142        }
143
144        input[type=file]  {
145                position:fixed;
146                z-index:-10;
147                opacity:0;
148                //inside modals the z-index:-10 does not work as expected
149                max-width:0;
150                max-height:0;
151                display:block;
152        }
153        .wysiwyg-choose-file {
154                display:inline-block;
155                width:auto;
156                margin:4px auto 0;
157                padding-left:5px;
158                padding-right:5px;
159        }
160        .dropdown-menu {
161                input[type=text] {
162                        margin-left:8px;
163                        margin-bottom:0;
164                        &.form-control {
165                                min-width: 150px;
166                        }
167                }
168                .btn {
169                        margin-right:8px;
170                        margin-left:1px;
171                }
172        }
173}
174.wysiwyg-style1 .btn-colorpicker {
175        width:20px; height:20px;
176}
177
178@media screen and (-webkit-min-device-pixel-ratio: 0) {
179 /* for adding image resize functionality in chrome and safari */
180 .wysiwyg-editor {
181        img {
182                display:inline !important;
183        }
184        .ui-wrapper {
185          border:1px dotted #D00;
186          overflow:visible !important;/* because it's image only, so it's ok */
187          display:inline-block !important;
188          vertical-align:middle;
189          &:after {
190                  content:"";
191                  display:block;
192                  position:absolute;
193                  right:-3px; bottom:-3px;
194                  width:7px; height:7px;
195                  border:1px solid #D00;
196                  background-color:#FFF;
197                  z-index:1;
198           }
199        }
200 }
201}
202
203
204
205
206/* inside widget */
207.widget-header .wysiwyg-toolbar {
208        background-color:transparent;
209        .btn-group > .btn , .btn-group > .inline > .btn {
210                border-color:transparent;
211                background:rgba(255,255,255,0.25) !important;
212                color:#FFF !important;
213                //margin-top:1px;
214                border-width:1px;
215                &.active {
216                        background:rgba(0,0,0,0.25) !important;
217                }
218        }
219}
220
221.widget-body .wysiwyg-editor {
222        border:none;
223}
224
225.wysiwyg-speech-input {
226        width: 20px !important;
227        color: transparent !important;
228        background: transparent none !important;
229        border: none !important;
230
231        .transform(~"scale(2.0, 2.0)");
232        .box-shadow(none) !important;
233       
234        cursor: pointer;
235        &:focus {
236                .box-shadow(none) !important;
237        }
238}
239
240
241
242
243
244/* Markdown Editor */
245.widget-body .md-header {
246        margin-top:-30px;
247        margin-left:9px;
248
249        .btn {
250                border-color:transparent;
251                background:rgba(255,255,255,0.25) !important;
252                color:#FFF !important;
253               
254                text-align:center;
255                padding-left:0; padding-right:0;
256                border-width:1px !important;
257               
258                padding-top: 2px;
259                padding-bottom: 4px;
260               
261                > [class*="icon-"] {
262                        font-size:14px;
263                        width:25px; max-width:25px;
264                        display:inline-block;
265                }
266        }
267
268        .btn-inverse {
269                background:rgba(0,0,0,0.25) !important;
270                padding-right:5px;
271                margin-left:4px;
272        }
273}
274
275.widget-body {
276        .md-preview {
277                padding:8px;
278                min-height:200px;
279        }
280       
281        .md-input {
282                border:none !important;
283                box-shadow:none !important;
284                display:block;
285                margin-bottom:0;
286                background-color:rgba(48, 126, 204, 0.07);
287                padding:8px;
288                width: 100%;
289               
290                &:focus {
291                        background-color:#FFF;
292                        box-shadow:none !important;
293                }
294        }
295}
296
297
298
299
300
301
Note: See TracBrowser for help on using the repository browser.