| Commit | Line | Data |
|---|---|---|
| 072364df DW |
1 | // The only class we need for icons is .icon |
| 2 | // Standardize the size, padding and alignment for all icons in Moodle. | |
| 0eb85562 | 3 | |
| 750bbb68 | 4 | // Size of default icons. |
| 0eb85562 RW |
5 | $icon-width: 16px; |
| 6 | $icon-height: 16px; | |
| 750bbb68 DM |
7 | // Size of big icons. |
| 8 | $icon-big-width: 64px; | |
| 9 | $icon-big-height: 64px; | |
| 0eb85562 | 10 | |
| 9d1d5ae0 RW |
11 | // stylelint-disable |
| 12 | $iconsizes: () !default; | |
| 13 | $iconsizes: map-merge(( | |
| 14 | 0: 0, | |
| 15 | 1: ($icon-width * .25), | |
| 16 | 2: ($icon-width * .5), | |
| 17 | 3: $icon-width, | |
| 18 | 4: ($icon-width * 1.5), | |
| 5fe7bcdb BB |
19 | 5: ($icon-width * 2), |
| 20 | 6: ($icon-width * 2.5), | |
| 21 | 7: ($icon-width * 3) | |
| 9d1d5ae0 RW |
22 | ), $iconsizes); |
| 23 | // stylelint-enable | |
| 24 | ||
| 072364df | 25 | .icon { |
| 0eb85562 RW |
26 | font-size: $icon-height; |
| 27 | width: $icon-width; | |
| 28 | height: $icon-height; | |
| 3ec69c2e | 29 | // vertical-align: middle; |
| 072364df DW |
30 | margin: 0; |
| 31 | padding: 0; | |
| 32 | box-sizing: content-box; | |
| 33 | margin-right: 0.5rem; | |
| b9b409cf DW |
34 | |
| 35 | &.spacer { | |
| 36 | margin-right: 0; | |
| 37 | } | |
| 750bbb68 DM |
38 | |
| 39 | &.iconsize-big { | |
| 40 | width: $icon-big-width; | |
| 41 | height: $icon-big-height; | |
| 37c47e32 | 42 | font-size: $icon-big-height; |
| 750bbb68 | 43 | } |
| 072364df DW |
44 | } |
| 45 | ||
| d3d2f09c | 46 | .navbar-dark a .icon { |
| b9b409cf | 47 | color: $navbar-dark-color !important; /* stylelint-disable-line declaration-no-important */ |
| a26ce248 DW |
48 | } |
| 49 | ||
| c706699a BB |
50 | .action-menu-item a:first-of-type > .icon { |
| 51 | margin-left: 0.5rem; | |
| 52 | } | |
| 53 | ||
| b843914d FM |
54 | // YUI 2 Tree View icons must not have a margin left. |
| 55 | .ygtvcell .icon { | |
| 5142f564 | 56 | margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */ |
| b843914d | 57 | } |
| 137c289a FM |
58 | |
| 59 | // In the navigation, tree icons should not have margins. | |
| 60 | .block_navigation, | |
| 61 | .block_settings { | |
| 62 | .tree_item .icon { | |
| 63 | margin-left: 0; | |
| 64 | } | |
| 65 | } | |
| 99061152 DW |
66 | |
| 67 | [data-action=toggle-drawer] .icon { | |
| 947970fc | 68 | margin: 0; |
| 99061152 | 69 | } |
| 71fa2be9 SL |
70 | |
| 71 | // Apply in special cases where the default icons styles does not work properly. Eg file picker buttons. | |
| 72 | .icon-no-spacing a > .icon { | |
| 73 | margin: 0; | |
| 74 | } | |
| 0eb85562 | 75 | |
| 9d1d5ae0 RW |
76 | .icon-no-margin { |
| 77 | .icon { | |
| 78 | margin-left: 0; | |
| 79 | margin-right: 0; | |
| 80 | margin-top: 0; | |
| 81 | margin-bottom: 0; | |
| 82 | } | |
| 83 | } | |
| 84 | ||
| 0eb85562 RW |
85 | .icon-large > .icon { |
| 86 | width: ($icon-width * 2); | |
| 87 | height: ($icon-height * 2); | |
| 88 | } | |
| 540ea1bc | 89 | |
| 9d1d5ae0 RW |
90 | @each $size, $length in $iconsizes { |
| 91 | .icon-size-#{$size} { | |
| 92 | .icon { | |
| 93 | height: $length !important; /* stylelint-disable-line declaration-no-important */ | |
| 94 | width: $length !important; /* stylelint-disable-line declaration-no-important */ | |
| 7b91dcf2 | 95 | font-size: $length !important; /* stylelint-disable-line declaration-no-important */ |
| 9d1d5ae0 RW |
96 | } |
| 97 | } | |
| 98 | } | |
| 99 | ||
| 540ea1bc BB |
100 | .helplink .icon { |
| 101 | margin-left: 0.5rem; | |
| 102 | } |
