Merge branch 'MDL-56640-master' of git://github.com/danpoltawski/moodle
[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.
3.icon {
4 width: 16px;
5 height: 16px;
6 vertical-align: middle;
7 margin: 0;
8 padding: 0;
9 box-sizing: content-box;
10 margin-right: 0.5rem;
11}
12
894b1825
JP
13a:first-of-type > .icon,
14span:first-of-type > .icon {
072364df
DW
15 margin-left: 0.5rem;
16}
17
60ff24c0
RW
18// Fix the first icon for an action menu. This rule exists to reverse the
19// icon margin defined in the a:first-of-type > .icon rule.
20.action-menu .dropdown a:first-of-type > .icon {
21 margin-left: 0;
22}
23
4821f459 24.pull-xs-right {
12f72021
RW
25 // Now we need to override the .action-menu .dropdown a:first-of-type > .icon
26 // rule above for when actions menus are in the pull-xs-right class.
27 .action-menu .dropdown a:first-of-type > .icon {
28 margin-left: 0.5rem;
29 }
30
4821f459
DW
31 .icon {
32 margin-right: 0;
33 margin-left: 0.5rem;
34 }
35}
36
6321934c
FM
37// Fix the space between the dropdown icon and the caret.
38.action-menu {
39 .dropdown-toggle {
40 .icon {
41 // Use a negative margin on the icon to ensure that the dropdown toggle
42 // is an icon and not just text in which case the margin is needed.
43 margin-right: -$caret-width;
44 }
45 }
072364df 46}
b843914d
FM
47
48// YUI 2 Tree View icons must not have a margin left.
49.ygtvcell .icon {
5142f564 50 margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
b843914d 51}
137c289a
FM
52
53// In the navigation, tree icons should not have margins.
54.block_navigation,
55.block_settings {
56 .tree_item .icon {
57 margin-left: 0;
58 }
59}
99061152
DW
60
61[data-action=toggle-drawer] .icon {
947970fc 62 margin: 0;
99061152 63}