weekly release 4.0dev
[moodle.git] / theme / boost / scss / moodle / icons.scss
1 // The only class we need for icons is .icon
2 // Standardize the size, padding and alignment for all icons in Moodle.
4 // Size of default icons.
5 $icon-width: 16px;
6 $icon-height: 16px;
7 // Size of big icons.
8 $icon-big-width: 64px;
9 $icon-big-height: 64px;
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),
19   5: ($icon-width * 2),
20   6: ($icon-width * 2.5),
21   7: ($icon-width * 3)
22 ), $iconsizes);
23 // stylelint-enable
25 .icon {
26     font-size: $icon-height;
27     width: $icon-width;
28     height: $icon-height;
29     // vertical-align: middle;
30     margin: 0;
31     padding: 0;
32     box-sizing: content-box;
33     margin-right: 0.5rem;
35     &.spacer {
36         margin-right: 0;
37     }
39     &.iconsize-big {
40         width: $icon-big-width;
41         height: $icon-big-height;
42         font-size: $icon-big-height;
43     }
44 }
46 .navbar-dark a .icon {
47     color: $navbar-dark-color !important; /* stylelint-disable-line declaration-no-important */
48 }
50 .action-menu-item a:first-of-type > .icon {
51     margin-left: 0.5rem;
52 }
54 // YUI 2 Tree View icons must not have a margin left.
55 .ygtvcell .icon {
56     margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
57 }
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 }
67 [data-action=toggle-drawer] .icon {
68     margin: 0;
69 }
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 }
76 .icon-no-margin {
77     .icon {
78         margin-left: 0;
79         margin-right: 0;
80         margin-top: 0;
81         margin-bottom: 0;
82     }
83 }
85 .icon-large > .icon {
86     width: ($icon-width * 2);
87     height: ($icon-height * 2);
88 }
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 */
95             font-size: $length !important; /* stylelint-disable-line declaration-no-important */
96         }
97     }
98 }
100 .helplink .icon {
101     margin-left: 0.5rem;