Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1
@import 'variables';
2
@import 'mixins';
3
 
4
%title-bar-base {
5
  visibility: inherit;
6
  cursor: pointer;
7
}
8
%title-bar-importance-high {
9
  background: $form-item-importance-high-background;
10
  border: 1px solid $form-item-importance-high-border-color;
11
  height: $form-item-height-large;
12
}
13
%title-bar-text-importance-high {
14
  font-size: $font-size-normal;
15
  font-weight: 600;
16
  line-height: $form-item-height-large;
17
  // Fix white text on dark background blockiness
18
  -webkit-font-smoothing: antialiased;
19
  -moz-osx-font-smoothing: grayscale;
20
}
21
%title-bar-importance-medium {
22
  background: $form-item-importance-medium-background;
23
  border: 1px solid $form-item-importance-medium-border-color;
24
  height: $form-item-height-normal;
25
}
26
%title-bar-text-importance-medium {
27
  font-size: $font-size-normal;
28
  font-weight: 600;
29
  color: $white;
30
  line-height: $form-item-height-normal;
31
  // Fix white text on dark background blockiness
32
  -webkit-font-smoothing: antialiased;
33
  -moz-osx-font-smoothing: grayscale;
34
}
35
 
36
%title-bar-importance-low {
37
  background: $form-item-importance-low-background;
38
  height: $form-item-height-normal;
39
  border: 1px solid $form-border-color;
40
}
41
%title-bar-text-importance-low {
42
  font-size: $font-size-normal;
43
  font-weight: 400;
44
  color: $text-color;
45
  line-height: $form-item-height-normal;
46
}
47
 
48
.group {
49
  border: none;
50
 
51
  & > .title {
52
    @extend %title-bar-base;
53
    @extend %title-bar-importance-medium;
54
    @extend %title-bar-text-importance-medium;
55
    padding: 0 $min-padding;
56
    outline: none;
57
  }
58
 
59
  & > .content {
60
    position: relative;
61
    display: none;
62
    margin: 0;
63
    padding: $padding;
64
    border: 1px solid $form-border-color;
65
    border-top: none;
66
    background: $form-content-background;
67
  }
68
 
69
  &.importance-high > .title {
70
    @extend %title-bar-importance-high;
71
    @extend %title-bar-text-importance-high;
72
    color: $white;
73
  }
74
 
75
  &.importance-low > .title {
76
    @extend %title-bar-importance-low;
77
    @extend %title-bar-text-importance-low;
78
    color: $text-color;
79
 
80
    &:focus:before {
81
      outline: 1px dashed;
82
    }
83
  }
84
}
85
 
86
// Zebra pattern for lists and groups
87
.common, .content {
88
  .content {
89
    background-color: $form-background;
90
 
91
    .content {
92
      background-color: $white;
93
 
94
     .content {
95
       background-color: $form-background;
96
 
97
       .content {
98
         background-color: $white;
99
 
100
         .content {
101
           background-color: $form-background;
102
 
103
           .content {
104
             background-color: $white;
105
           }
106
         }
107
       }
108
     }
109
   }
110
  }
111
}
112
 
113
.h5p-li > .list-item-title-bar {
114
  @extend %title-bar-base;
115
  @extend %title-bar-importance-medium;
116
  color: $white;
117
 
118
  & > .h5peditor-label {
119
    @extend %title-bar-text-importance-medium;
120
 
121
    overflow: hidden;
122
    margin: 0 $form-item-buttons-width-normal 0 0;
123
    padding: 0 $min-padding;
124
    white-space: nowrap;
125
    line-height: $form-item-height-normal;
126
    outline: none;
127
    text-overflow: ellipsis;
128
  }
129
 
130
  &.importance-high > .h5peditor-label {
131
    @extend %title-bar-text-importance-high;
132
  }
133
 
134
  &.importance-medium > .h5peditor-label {
135
    @extend %title-bar-text-importance-medium;
136
  }
137
 
138
  &.importance-low > .h5peditor-label {
139
    @extend %title-bar-text-importance-low;
140
  }
141
 
142
  & > .list-actions {
143
    height: 100%;
144
    float: right;
145
    position: relative;
146
  }
147
 
148
  .remove {
149
    cursor: pointer;
150
    width: 1.25em;
151
    height: $form-item-height-normal;
152
    font-size: 1.75em;
153
    display: inline-block;
154
 
155
    &:hover {
156
      opacity: 1;
157
      text-decoration: none;
158
    }
159
  }
160
 
161
  .remove:after {
162
    font-family: $icon-font-family;
163
    content: "\e890";
164
    opacity: 0.7;
165
    display: inline-block;
166
    line-height: $form-item-height-normal;
167
  }
168
 
169
  .remove:hover:after {
170
    opacity: 1;
171
  }
172
 
173
  .order-group {
174
    text-align: center;
175
    float: right;
176
    background: $form-item-importance-medium-border-color;
177
    font-size: $font-size-normal;
178
    cursor: pointer;
179
  }
180
 
181
  .order-up, .order-down {
182
    width: $form-item-height-normal / 2;
183
    height: $form-item-height-normal / 2;
184
    line-height: $form-item-height-normal / 2;
185
 
186
    &:hover {
187
      background: $form-item-importance-medium-background-hover;
188
    }
189
 
190
    &:after {
191
      font-family: $icon-font-family;
192
      content: "\e58e";
193
      display: inline-block;
194
    }
195
  }
196
 
197
  .order-down:after {
198
    content: "\e58f";
199
  }
200
 
201
  &.importance-high {
202
    @extend %title-bar-importance-high;
203
 
204
    & > .title {
205
      @extend %title-bar-text-importance-high;
206
      border: none;
207
      margin: 0 $form-item-buttons-width-large 0 0;
208
    }
209
 
210
    .remove {
211
      height: $form-item-height-large;
212
      line-height: $form-item-height-large;
213
      font-size: 40px;
214
 
215
      &:after {
216
        line-height: $form-item-height-large;
217
        opacity: 0.7;
218
      }
219
      &:hover:after {
220
        opacity: 1;
221
      }
222
    }
223
 
224
    .order-group {
225
      background: $form-item-importance-high-border-color;
226
      font-size: $font-size-large;
227
    }
228
 
229
    .order-up, .order-down {
230
      width: $form-item-height-large / 2;
231
      height: $form-item-height-large / 2;
232
      line-height: $form-item-height-large / 2;
233
 
234
      &:hover {
235
        background: $form-item-importance-high-background-hover;
236
      }
237
    }
238
  }
239
 
240
  &.importance-low {
241
    @extend %title-bar-importance-low;
242
 
243
    & > .title {
244
      @extend %title-bar-text-importance-low;
245
      border: none;
246
      margin: 0 $form-item-buttons-width-normal 0 0;
247
 
248
      &:before {
249
        color: $text-color;
250
      }
251
      &:focus:before {
252
        outline: 1px dashed $text-color;
253
      }
254
    }
255
 
256
    .remove {
257
      height: $form-item-height-normal;
258
      line-height: $form-item-height-normal;
259
      font-size: 30px;
260
 
261
      &:after {
262
        line-height: $form-item-height-normal;
263
      }
264
    }
265
    .remove:after {
266
      color: $text-color;
267
      opacity: 0.7;
268
    }
269
    .remove:hover:after {
270
      opacity: 1;
271
    }
272
 
273
    .order-up, .order-down {
274
      width: $form-item-height-normal / 2;
275
      height: $form-item-height-normal / 2;
276
      background: $form-item-importance-low-border-color;
277
      font-size: $font-size-normal;
278
      line-height: $form-item-height-normal / 2;
279
 
280
      &:hover {
281
        background: $form-item-importance-low-background-hover;
282
      }
283
 
284
      &:after {
285
        color: $text-color;
286
      }
287
    }
288
  }
289
}
290
.group.expanded,
291
.listgroup.expanded {
292
  & > .content {
293
    display: block;
294
  }
295
}
296
 
297
.listgroup > .list-item-title-bar > .h5peditor-label {
298
  cursor: pointer;
299
}
300
.list-item-title-bar > .title,
301
.group > .title  {
302
  &:before {
303
    content: "\e566";
304
    font-family: $icon-font-family;
305
    margin-right: $min-padding/2;
306
  }
307
 
308
  &:focus:before {
309
    outline: 1px dashed $white;
310
  }
311
}
312
.listgroup.expanded > .list-item-title-bar > .h5peditor-label:before,
313
.expanded > .title:before {
314
  content: "\e565";
315
}
316
.listgroup > .group.field {
317
  margin: 0;
318
  padding: 0;
319
  min-width: 0;
320
}
321
.content {
322
  display: block;
323
  margin: 0;
324
  padding: $padding;
325
  border: 1px solid $form-border-color;
326
  border-top: none;
327
  background: $form-content-background;
328
}
329
 
330
.common {
331
  margin-top: $padding;
332
 
333
  & > .h5peditor-label {
334
    @extend %title-bar-base;
335
    @extend %title-bar-importance-low;
336
    @extend %title-bar-text-importance-low;
337
    margin: 0;
338
    padding: 0 $min-padding;
339
    cursor: pointer;
340
    font-size: 1em;
341
 
342
    & > .icon:before {
343
      content: "\e565";
344
      font-family: $icon-font-family;
345
      margin-right: 5px;
346
    }
347
    &:hover > .icon {
348
      opacity: 1;
349
    }
350
 
351
    &:focus {
352
      outline: none;
353
    }
354
 
355
    &:focus > .icon:before {
356
      outline: 1px dashed;
357
    }
358
  }
359
  & > .fields {
360
    min-height: 2em;
361
    padding: $padding;
362
    border: 1px solid $form-border-color;
363
    border-top: none;
364
    background: $form-content-background;
365
    position: relative;
366
 
367
    & > .desc {
368
      margin: 0;
369
      font-size: 0.875em;
370
      color: #666;
371
      float: left;
372
    }
373
 
374
    p:first-child {
375
      margin-bottom: $padding;
376
    }
377
  }
378
 
379
  &.collapsed {
380
    & > .h5peditor-label > .icon:before {
381
      content: "\e566";
382
    }
383
    & > .fields {
384
      display: none;
385
    }
386
  }
387
 
388
  &.hidden {
389
    display: none;
390
  }
391
}
392
 
393
.h5peditor-button[aria-label] {
394
 
395
  &:before {
396
    content: attr(aria-label);
397
    visibility: hidden;
398
 
399
    position: absolute;
400
    top: 115%;
401
    right: -10%;
402
    z-index: 2;
403
 
404
    padding: 0.25em 0.75em;
405
    background: $text-color;
406
    color: $white;
407
    white-space: nowrap;
408
    font-size: $font-size-small;
409
    line-height: 1.5;
410
    box-shadow: 0 0 0.5em $form-input-placeholder-color;
411
  }
412
 
413
  &:hover:before {
414
    visibility: visible;
415
  }
416
 
417
  &[aria-disabled="true"]:before {
418
    display: none;
419
  }
420
}