weekly release 4.0dev
[moodle.git] / theme / boost / scss / moodle / icons.scss
CommitLineData
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}