// Old Moodle stuff from base theme.
// Massive, needs broken up.
@import "moodle/core";
+@import "moodle/icons";
@import "moodle/admin";
@import "moodle/blocks";
@import "moodle/calendar";
}
.displayname {
- .pluginicon {
- margin-right: 5px;
- width: 16px;
- }
.plugindir {
@extend .text-muted;
font-size: $font-size-sm;
.action-menu {
white-space: nowrap;
}
-.action-menu img {
- width: 16px;
- height: 16px;
- box-sizing: content-box;
-}
-.action-menu .dropdown-menu img {
- padding-right: 0.5rem;
-}
.action-menu .userpicture {
width: auto;
height: auto;
width: 0.8em;
}
/* Icon styles */
-img.icon,
-img.iconhelp, .helplink img {
- height: 16px;
- vertical-align: text-bottom;
- width: 16px;
- padding-right: 0.5rem;
- box-sizing: content-box;
-}
-img.iconlarge {
+img.activityicon {
height: 24px;
width: 24px;
vertical-align: middle;
}
-img.iconsort {
- vertical-align: text-bottom;
- padding-left: .3em;
- margin-bottom: .15em;
-}
-img.icontoggle {
- height: 17px;
- vertical-align: middle;
- width: 50px;
-}
-img.iconkbhelp {
- height: 17px;
- width: 49px;
-}
.boxaligncenter {
margin-left: auto;
margin-right: auto;
table.flexible .emptyrow {
display: none;
}
-img.emoticon {
- vertical-align: middle;
- width: 15px;
- height: 15px;
-}
form.popupform,
form.popupform div {
display: inline;
input[type=radio] {
display: inline-block;
}
- .modicon {
- display: inline-block;
- }
.typename {
display: inline-block;
width: 65%;
padding-bottom: 0.4em;
}
.choosercontainer #chooseform .option .typename,
-.choosercontainer #chooseform .option span.modicon img.icon,
-.choosercontainer #chooseform .nonoption .typename,
-.choosercontainer #chooseform .nonoption span.modicon img.icon {
+.choosercontainer #chooseform .nonoption .typename {
padding: 0 0 0 0.5em;
}
-.chooserdialogue-course-modchooser .choosercontainer #chooseform .option span.modicon img.icon,
-.chooserdialogue-course-modchooser .choosercontainer #chooseform .nonoption span.modicon img.icon {
- height: 24px;
- width: 24px;
-}
.choosercontainer #chooseform .option input[type=radio],
-.choosercontainer #chooseform .option span.typename,
-.choosercontainer #chooseform .option span.modicon {
+.choosercontainer #chooseform .option span.typename {
vertical-align: middle;
}
.choosercontainer #chooseform .option label {
.section_add_menus .urlselect select {
margin-left: .2em;
}
-.section_add_menus .urlselect img.iconhelp {
- padding: 0;
- margin: 0;
- vertical-align: text-bottom;
-}
.sitetopic ul.section {
margin: 0;
display: table-cell;
padding-right: 4px;
min-height: 2em;
-
- .dimmed {
- img.activityicon {
- opacity: 0.5;
- filter: alpha(opacity=50);
- }
- }
}
}
.label {
margin-top: .2em;
padding: .3em;
}
-.dndupload-preview img.icon {
- vertical-align: text-bottom;
- padding: 0;
-}
.dndupload-progress-outer {
@extend progress;
}
margin: 0 .22em;
vertical-align: text-bottom;
}
-#page-admin-course-manage #movecourses td img.icon {
- padding: 0;
-}
#coursesearch {
margin-top: 1em;
padding:0;
margin:0;
}
-.coursebox .enrolmenticons {
- padding:3px 0;
- float:right;
-}
.coursebox .moreinfo {
padding:3px 0;
float:right;
}
-.coursebox .enrolmenticons img,
.coursebox .moreinfo img {
margin:0 .2em;
}
background-color: $table-bg-hover;
}
}
- .tree-icon {
- margin: 2px 6px 0 0;
- width:12px;
- vertical-align:inherit;
- }
&[data-selected='1'] {
> div {
background-color: $table-bg-accent;
}
}
- // Tree item indenting to represent depth.
- .tree-icon {margin-left:0;}
- li .tree-icon {margin-left:1em;}
- li li .tree-icon {margin-left:2em;}
- li li li .tree-icon {margin-left:3em;}
- li li li li .tree-icon {margin-left:4em;}
- li li li li li .tree-icon {margin-left:4.5em;}
- li li li li li li .tree-icon {margin-left:5em;}
- li li li li li li li .tree-icon {margin-left:5.5em;}
}
.item-actions {
margin: 0.5em;
padding: 1em;
border: 1px solid #aaa;
- .action-icon {
- display: inline-block;
- position: relative;
- height: 64px;
- width: 64px;
- }
.action-text {
position: relative;
top: 0.4em;
td.column-name {
padding-left: 24px;
}
- .column-name h4 img.icon {
- padding-left: 0;
- }
.category input[type="text"],
.category .column-range,
.categoryitem,
--- /dev/null
+// The only class we need for icons is .icon
+// Standardize the size, padding and alignment for all icons in Moodle.
+.icon {
+ width: 16px;
+ height: 16px;
+ vertical-align: middle;
+ margin: 0;
+ padding: 0;
+ box-sizing: content-box;
+ margin-right: 0.5rem;
+}
+
+a:first-of-type > .icon {
+ margin-left: 0.5rem;
+}
+
+// Fix the cog icon for an action menu.
+.action-menu > .dropdown {
+ margin-left: -0.5rem;
+}
+
+// Fix the first item in a drop down menu (it's a list of links and icons, but has been made vertical.
+.dropdown a.dropdown-item .icon {
+ margin-left: 0px;
+}
.message .messagearea .messagehistory .messageactive {
background-color: $table-bg-hover;
}
-.message .messagearea .messagehistory .messagecontent .deleteicon {
- width: 20px;
- position: absolute;
- top: -2px;
- right: 0;
-}
.message .messagearea .messagesend {
padding-top: 20px;
clear: both;
}
- // A little bit of visual feedback for the action menu when Javascript is disabled.
- .menu {
- .menu-action.icon {
- img {
- border-radius: 0;
- background: transparent;
- box-shadow: none;
- }
- &:hover img {
- background: #fff;
- border-radius: 4px;
- box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.125);
- }
- }
- }
- &[data-enhanced] .menu {
- .menu-action.icon,
- .menu-action.icon:hover {
- img {
- border-radius: 0;
- background: transparent;
- box-shadow: none;
- }
- }
- }
-
}
}
.jsenabled {
margin-left: 0px;
float: none;
}
- img.iconsmall {
- padding: 0;
- }
.iconcol {
padding: 3px;
}
#questionbank + .container {
width: auto;
}
-// In Moodle .hide is the eye icon
-// In Bootstrap it hides things
-img.hide {
- display: inherit;
-}
-
-// Bootstrap adds a background sprite to anything with classname starting "icon-".
-// we only want to load it if we use them in content.
-.icon-bar,
-img.icon-post,
-img.icon-info,
-img.icon-warn,
-img.icon-pre {
- background-image: none;
-}
-
-//Bootstrap needs tooltips to be specified. Moodle does not use this
-.tooltip {
- opacity: 1;
- display: inline;
-}
// Allow the custom menu to expand/collapse when the user hovers over it with JS disabled.
body:not(.jsenabled) .dropdown:hover > .dropdown-menu {
ol {
margin: 0 0 $line-height-base / 2 2.5em;
-}
\ No newline at end of file
+}
}
}
-.userlist .action-icon img {
- vertical-align: middle;
-}
.userlist #showall {
margin: 10px 0;
}
--- /dev/null
+{{!
+ This file is part of Moodle - http://moodle.org/
+
+ Moodle is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ Moodle is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with Moodle. If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+ @template core/pix_icon
+
+ Moodle pix_icon template.
+
+ The purpose of this template is to render a pix_icon.
+
+ Classes required for JS:
+ * none
+
+ Data attributes required for JS:
+ * none
+
+ Context variables required for this template:
+ * attributes Array of name / value pairs.
+
+ Example context (json):
+ {
+ "attributes": [
+ { "name": "src", "value": "http://moodle.com/wp-content/themes/moodle/images/logo-hat2.png" },
+ { "name": "class", "value": "iconsmall" }
+ ]
+ }
+
+}}
+<img class="icon" {{#attributes}}{{name}}="{{value}}" {{/attributes}}/>