Proyectos de Subversion Moodle

Rev

Rev 1 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1 Rev 1441
Línea 1... Línea 1...
1 
// The only class we need for icons is .icon
 1 
// The only class we need for icons is .icon
2 
// Standardize the size, padding and alignment for all icons in Moodle.
 2 
// Standardize the size, padding and alignment for all icons in Moodle.
Línea 3... Línea 3...
3 
 
 3 
 
4 
// Size of default icons.
 4 
// Size of default icons.
5 
$icon-width: 16px;
 5 
$icon-width: 20px;
6 
$icon-height: 16px;
 6 
$icon-height: 16px;
7 
// Size of big icons.
 7 
// Size of medium icons.
8 
$icon-medium-width: 32px;
 8 
$icon-medium-width: 40px;
9 
$icon-medium-height: 32px;
 9 
$icon-medium-height: 32px;
10 
// Size of big icons.
 10 
// Size of big icons.
11 
$icon-big-width: 64px;
 11 
$icon-big-width: 80px;
12 
$icon-big-height: 64px;
 12 
$icon-big-height: 64px;
13 
// Size of icon boxes.
 13 
// Size of icon boxes.
14 
$icon-box-width: 48px;
 14 
$icon-box-width: 60px;
Línea 15... Línea 15...
15 
$icon-box-height: 48px;
 15 
$icon-box-height: 48px;
16 
 
 16 
 
17 
// stylelint-disable
 17 
// stylelint-disable
18 
$iconsizes: () !default;
 18 
$iconsizes: () !default;
- 
 
 19 
$iconsizes: map-merge((
- 
 
 20 
  0: 0,
- 
 
 21 
  1: ($icon-height * .25),
- 
 
 22 
  2: ($icon-height * .5),
- 
 
 23 
  3: $icon-height,
- 
 
 24 
  4: ($icon-height * 1.5),
- 
 
 25 
  5: ($icon-height * 2),
- 
 
 26 
  6: ($icon-height * 2.5),
- 
 
 27 
  7: ($icon-height * 3)
- 
 
 28 
), $iconsizes);
- 
 
 29 
$iconwidthsizes: () !default;
19 
$iconsizes: map-merge((
 30 
$iconwidthsizes: map-merge((
20 
  0: 0,
 31 
  0: 0,
21 
  1: ($icon-width * .25),
 32 
  1: ($icon-width * .25),
22 
  2: ($icon-width * .5),
 33 
  2: ($icon-width * .5),
23 
  3: $icon-width,
 34 
  3: $icon-width,
24 
  4: ($icon-width * 1.5),
 35 
  4: ($icon-width * 1.5),
25 
  5: ($icon-width * 2),
 36 
  5: ($icon-width * 2),
26 
  6: ($icon-width * 2.5),
 37 
  6: ($icon-width * 2.5),
- 
 
 38 
  7: ($icon-width * 3)
27 
  7: ($icon-width * 3)
 39 
), $iconwidthsizes);
Línea -... Línea 40...
- 
 
 40 
 
- 
 
 41 
// stylelint-enable
- 
 
 42 
 
- 
 
 43 
// This mixin change an icon color using filters.
- 
 
 44 
// The code is adapted from https://jsfiddle.net/Tegos/3fchp0qm/ example.
- 
 
 45 
@mixin recolor-icon($color: #000, $opacity: 1) {
- 
 
 46 
    // Extracting the color component using / 255 is deprecated in Sass.
- 
 
 47 
    // However, the alternative of using math.div is not working in moodle yet.
- 
 
 48 
    // The workaround to extract the color component is multiply by 1/255 as float.
- 
 
 49 
    $r: red($color) * 0.00392156862745098;
- 
 
 50 
    $g: green($color) * 0.00392156862745098;
- 
 
 51 
    $b: blue($color) * 0.00392156862745098;
- 
 
 52 
    $a: $opacity;
- 
 
 53 
    $svg-filter-id: "recolor";
- 
 
 54 
 
- 
 
 55 
    $svg-url: 'data:image/svg+xml;utf8,' +
- 
 
 56 
        '<svg xmlns="http://www.w3.org/2000/svg">' +
- 
 
 57 
        '<filter id="#{$svg-filter-id}" color-interpolation-filters="sRGB">' +
- 
 
 58 
        '<feColorMatrix type="matrix" values="' +
- 
 
 59 
        '0 0 0 0 #{$r} ' +
- 
 
 60 
        '0 0 0 0 #{$g} ' +
- 
 
 61 
        '0 0 0 0 #{$b} ' +
- 
 
 62 
        '0 0 0 #{$a} 0 ' +
- 
 
 63 
        '"/>' +
- 
 
 64 
        '</filter>' +
- 
 
 65 
        '</svg>' +
- 
 
 66 
        '##{$svg-filter-id}';
- 
 
 67 
 
28 
), $iconsizes);
 68 
    filter: url($svg-url);
29 
// stylelint-enable
 69 
}
30 
 
 70 
 
31 
.icon {
 71 
.icon {
32 
    max-width: map-get($iconsizes, 4);
 72 
    max-width: map-get($iconwidthsizes, 4);
33 
    max-height: map-get($iconsizes, 4);
 73 
    max-height: map-get($iconsizes, 4);
34 
    margin: 0;
 - 
 
Línea 35... Línea 74...
35 
    padding: 0;
 74 
    margin: 0 map-get($spacers, 2) 0 0;
36 
    box-sizing: content-box;
 75 
    padding: 0;
37 
    margin-right: 0.5rem;
 76 
    box-sizing: content-box;
Línea 38... Línea 77...
38 
 
 77 
 
39 
    &.spacer {
 78 
    &.spacer {
40 
        margin-right: 0;
 79 
        margin-right: 0;
41 
    }
 80 
    }
- 
 
 81 
 
- 
 
 82 
    &.iconsize-medium {
42 
 
 83 
        font-size: $icon-medium-height;
Línea 43... Línea 84...
43 
    &.iconsize-medium {
 84 
        width: $icon-medium-width;
44 
        font-size: $icon-medium-height;
 85 
        height: $icon-medium-height;
45 
        width: $icon-medium-width;
 86 
        max-width: $icon-medium-width;
- 
 
 87 
        max-height: $icon-medium-height;
- 
 
 88 
    }
46 
        height: $icon-medium-height;
 89 
 
47 
    }
 90 
    &.iconsize-big {
- 
 
 91 
        width: $icon-big-width;
- 
 
 92 
        height: $icon-big-height;
- 
 
 93 
        max-width: $icon-big-width;
- 
 
 94 
        max-height: $icon-big-height;
- 
 
 95 
        font-size: $icon-big-height;
- 
 
 96 
    }
- 
 
 97 
 
- 
 
 98 
    &.emoticon {
- 
 
 99 
        width: map-get($iconsizes, 3);
- 
 
 100 
        height: map-get($iconsizes, 3);
- 
 
 101 
    }
48 
 
 102 
}
Línea 49... Línea 103...
49 
    &.iconsize-big {
 103 
 
50 
        width: $icon-big-width;
 104 
// Force size for the SVG icons.
51 
        height: $icon-big-height;
 105 
img.icon {
Línea 99... Línea 153...
99 
 
 153 
 
100 
@each $size, $length in $iconsizes {
 154 
@each $size, $length in $iconsizes {
101 
    .icon-size-#{$size} {
 155 
    .icon-size-#{$size} {
102 
        .icon {
 156 
        .icon {
- 
 
 157 
            height: $length !important; /* stylelint-disable-line declaration-no-important */
103 
            height: $length !important; /* stylelint-disable-line declaration-no-important */
 158 
            width: map-get($iconwidthsizes, $size) !important; /* stylelint-disable-line declaration-no-important */
- 
 
 159 
            max-height: $length !important; /* stylelint-disable-line declaration-no-important */
104 
            width: $length !important; /* stylelint-disable-line declaration-no-important */
 160 
            max-width: map-get($iconwidthsizes, $size) !important; /* stylelint-disable-line declaration-no-important */
105 
            font-size: $length !important; /* stylelint-disable-line declaration-no-important */
 161 
            font-size: $length !important; /* stylelint-disable-line declaration-no-important */
106 
        }
 162 
        }
107 
    }
 163 
    }
Línea 136... Línea 192...
136 
}
 192 
}
Línea 137... Línea 193...
137 
 
 193 
 
138 
// Revisit these styles when MDL-78284 lands with new icons.
 194 
// Revisit these styles when MDL-78284 lands with new icons.
139 
// Icon container will be removed and icons will be used directly.
 195 
// Icon container will be removed and icons will be used directly.
140 
.activityiconcontainer {
 - 
 
141 
    width: $activity-iconcontainer-width;
 - 
 
142 
    height: $activity-iconcontainer-height;
 196 
.activityiconcontainer {
143 
    display: inline-flex;
 197 
    display: inline-flex;
144 
    justify-content: center;
 198 
    justify-content: center;
145 
    align-items: center;
 199 
    align-items: center;
146 
    border-radius: 4px;
 - 
 
147 
    padding: 0.7rem;
 200 
    border-radius: 4px;
148 
    .activityicon,
 201 
    .activityicon,
149 
    .icon {
 202 
    .icon {
150 
        margin: 0;
 203 
        margin: 0;
151 
        font-size: $icon-medium-width;
 204 
        font-size: $icon-medium-height;
152 
        height: $icon-medium-width;
 205 
        height: $icon-medium-height;
153 
        width: $icon-medium-height;
 206 
        width: $icon-medium-width;
154 
        max-height: $icon-medium-width;
 207 
        max-height: $icon-medium-height;
155 
        max-width: $icon-medium-height;
 208 
        max-width: $icon-medium-width;
156 
    }
 209 
    }
157 
    &.small {
 210 
    &.small {
158 
        width: $activity-iconcontainer-width - 10px;
 211 
        width: $activity-iconcontainer-width - 10px;
159 
        height: $activity-iconcontainer-height - 10px;
 212 
        height: $activity-iconcontainer-height - 10px;
160 
        max-width: $activity-iconcontainer-width - 10px;
 213 
        max-width: $activity-iconcontainer-width - 10px;
161 
        max-height: $activity-iconcontainer-height - 10px;
 214 
        max-height: $activity-iconcontainer-height - 10px;
162 
    }
 215 
    }
163 
    &.smaller {
 216 
    &.smaller {
164 
        width: $activity-iconcontainer-width - 20px;
 217 
        width: $activity-iconcontainer-width - 20px;
165 
        height: $activity-iconcontainer-width - 20px;
 218 
        height: $activity-iconcontainer-height - 20px;
166 
        max-width: $activity-iconcontainer-width - 20px;
 219 
        max-width: $activity-iconcontainer-width - 20px;
167 
        max-height: $activity-iconcontainer-width - 20px;
 220 
        max-height: $activity-iconcontainer-height - 20px;
168 
        .activityicon {
 221 
        .activityicon {
169 
            width: $icon-medium-width;
 222 
            width: $icon-medium-width;
170 
            height: $icon-medium-height;
 223 
            height: $icon-medium-height;
171 
            max-width: $icon-medium-width;
 224 
            max-width: $icon-medium-width;
Línea 178... Línea 231...
178 
    .activityiconcontainer.#{$type} {
 231 
    .activityiconcontainer.#{$type} {
179 
        &:not(.isbranded) {
 232 
        &:not(.isbranded) {
180 
            .activityicon,
 233 
            .activityicon,
181 
            .icon {
 234 
            .icon {
182 
                &:not(.nofilter) {
 235 
                &:not(.nofilter) {
183 
                    filter: $value;
 236 
                    @include recolor-icon($value, 1);
184 
                }
 237 
                }
185 
            }
 238 
            }
186 
        }
 239 
        }
187 
    }
 240 
    }
188 
}
 241 
}