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 
}