mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-20 07:56:06 +02:00
Code Issues Projects Releases Wiki Activity

MDL-54701 message: renamed mdl-popover to popover-region

Browse Source
This commit is contained in:
Ryan Wyllie 2016-07-21 03:24:47 +00:00 committed by Mark Nelson
parent 6b2657d981
commit d4555a3d03
9 changed files with 500 additions and 501 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
lib/amd/src/mdl_popover_controller.js → lib/amd/src/popover_region_controller.js
View File

@ -14,12 +14,12 @@
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* Controls the mdl popover element.
* Controls the popover region element.
*
* See template: core/mdl_popover
* See template: core/popover_region
*
* @module core/mdl_popover_controller
* @class mdl_popover_controller
* @module core/popover_region_controller
* @class popover_region_controller
* @package core
* @copyright 2015 Ryan Wyllie <ryan@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
@ -29,19 +29,19 @@ define(['jquery', 'core/str', 'core/custom_interaction_events'],
function($, str, customEvents) {
var SELECTORS = {
CONTENT: '.mdl-popover-content',
CONTENT_CONTAINER: '.mdl-popover-content-container',
MENU_CONTAINER: '.mdl-popover-container',
MENU_TOGGLE: '.mdl-popover-toggle',
CONTENT: '.popover-region-content',
CONTENT_CONTAINER: '.popover-region-content-container',
MENU_CONTAINER: '.popover-region-container',
MENU_TOGGLE: '.popover-region-toggle',
};
/**
* Constructor for the MdlPopoverController.
* Constructor for the PopoverRegionController.
*
* @param element jQuery object root element of the popover
* @return object MdlPopoverController
* @return object PopoverRegionController
*/
var MdlPopoverController = function(element) {
var PopoverRegionController = function(element) {
this.root = $(element);
this.content = this.root.find(SELECTORS.CONTENT);
this.contentContainer = this.root.find(SELECTORS.CONTENT_CONTAINER);
@ -53,12 +53,12 @@ define(['jquery', 'core/str', 'core/custom_interaction_events'],
/**
* The collection of events triggered by this controller.
*/
MdlPopoverController.prototype.events = function() {
PopoverRegionController.prototype.events = function() {
return {
menuOpened: 'mdlpopover:menuopened',
menuClosed: 'mdlpopover:menuclosed',
startLoading: 'mdlpopover:startLoading',
stopLoading: 'mdlpopover:stopLoading',
menuOpened: 'popoverregion:menuopened',
menuClosed: 'popoverregion:menuclosed',
startLoading: 'popoverregion:startLoading',
stopLoading: 'popoverregion:stopLoading',
};
};
@ -68,7 +68,7 @@ define(['jquery', 'core/str', 'core/custom_interaction_events'],
* @method getContentContainer
* @return jQuery object
*/
MdlPopoverController.prototype.getContentContainer = function() {
PopoverRegionController.prototype.getContentContainer = function() {
return this.contentContainer;
};
@ -78,7 +78,7 @@ define(['jquery', 'core/str', 'core/custom_interaction_events'],
* @method getContent
* @return jQuery object
*/
MdlPopoverController.prototype.getContent = function() {
PopoverRegionController.prototype.getContent = function() {
return this.content;
};
@ -88,7 +88,7 @@ define(['jquery', 'core/str', 'core/custom_interaction_events'],
* @method isMenuOpen
* @return bool
*/
MdlPopoverController.prototype.isMenuOpen = function() {
PopoverRegionController.prototype.isMenuOpen = function() {
return !this.root.hasClass('collapsed');
};
@ -97,7 +97,7 @@ define(['jquery', 'core/str', 'core/custom_interaction_events'],
*
* @method toggleMenu
*/
MdlPopoverController.prototype.toggleMenu = function() {
PopoverRegionController.prototype.toggleMenu = function() {
if (this.isMenuOpen()) {
this.closeMenu();
} else {
@ -112,7 +112,7 @@ define(['jquery', 'core/str', 'core/custom_interaction_events'],
*
* @method closeMenu
*/
MdlPopoverController.prototype.closeMenu = function() {
PopoverRegionController.prototype.closeMenu = function() {
// We're already closed.
if (!this.isMenuOpen()) {
return;
@ -132,7 +132,7 @@ define(['jquery', 'core/str', 'core/custom_interaction_events'],
*
* @method openMenu
*/
MdlPopoverController.prototype.openMenu = function() {
PopoverRegionController.prototype.openMenu = function() {
// We're already open.
if (this.isMenuOpen()) {
return;
@ -150,7 +150,7 @@ define(['jquery', 'core/str', 'core/custom_interaction_events'],
*
* @method updateButtonAriaLabel
*/
MdlPopoverController.prototype.updateButtonAriaLabel = function() {
PopoverRegionController.prototype.updateButtonAriaLabel = function() {
if (this.isMenuOpen()) {
str.get_string('hidepopoverwindow').done(function(string) {
this.menuToggle.attr('aria-label', string);
@ -169,7 +169,7 @@ define(['jquery', 'core/str', 'core/custom_interaction_events'],
*
* @method startLoading
*/
MdlPopoverController.prototype.startLoading = function() {
PopoverRegionController.prototype.startLoading = function() {
this.isLoading = true;
this.getContentContainer().addClass('loading');
this.getContentContainer().attr('aria-busy', 'true');
@ -183,7 +183,7 @@ define(['jquery', 'core/str', 'core/custom_interaction_events'],
*
* @method stopLoading
*/
MdlPopoverController.prototype.stopLoading = function() {
PopoverRegionController.prototype.stopLoading = function() {
this.isLoading = false;
this.getContentContainer().removeClass('loading');
this.getContentContainer().attr('aria-busy', 'false');
@ -195,7 +195,7 @@ define(['jquery', 'core/str', 'core/custom_interaction_events'],
*
* @method focusMenuToggle
*/
MdlPopoverController.prototype.focusMenuToggle = function() {
PopoverRegionController.prototype.focusMenuToggle = function() {
this.menuToggle.focus();
};
@ -205,7 +205,7 @@ define(['jquery', 'core/str', 'core/custom_interaction_events'],
* @method contentItemHasFocus
* @return bool
*/
MdlPopoverController.prototype.contentItemHasFocus = function() {
PopoverRegionController.prototype.contentItemHasFocus = function() {
return this.getContentItemWithFocus().length > 0;
};
@ -215,7 +215,7 @@ define(['jquery', 'core/str', 'core/custom_interaction_events'],
* @method getContentItemWithFocus
* @return jQuery object
*/
MdlPopoverController.prototype.getContentItemWithFocus = function() {
PopoverRegionController.prototype.getContentItemWithFocus = function() {
var currentFocus = $(document.activeElement);
var items = this.getContent().children();
var currentItem = items.filter(currentFocus);
@ -232,7 +232,7 @@ define(['jquery', 'core/str', 'core/custom_interaction_events'],
*
* @method focusFirstContentItem
*/
MdlPopoverController.prototype.focusFirstContentItem = function() {
PopoverRegionController.prototype.focusFirstContentItem = function() {
this.getContent().children().first().focus();
};
@ -241,7 +241,7 @@ define(['jquery', 'core/str', 'core/custom_interaction_events'],
*
* @method focusLastContentItem
*/
MdlPopoverController.prototype.focusLastContentItem = function() {
PopoverRegionController.prototype.focusLastContentItem = function() {
this.getContent().children().last().focus();
};
@ -251,7 +251,7 @@ define(['jquery', 'core/str', 'core/custom_interaction_events'],
*
* @method focusNextContentItem
*/
MdlPopoverController.prototype.focusNextContentItem = function() {
PopoverRegionController.prototype.focusNextContentItem = function() {
var currentItem = this.getContentItemWithFocus();
if (currentItem.length && currentItem.next()) {
@ -265,7 +265,7 @@ define(['jquery', 'core/str', 'core/custom_interaction_events'],
*
* @method focusPreviousContentItem
*/
MdlPopoverController.prototype.focusPreviousContentItem = function() {
PopoverRegionController.prototype.focusPreviousContentItem = function() {
var currentItem = this.getContentItemWithFocus();
if (currentItem.length && currentItem.prev()) {
@ -278,7 +278,7 @@ define(['jquery', 'core/str', 'core/custom_interaction_events'],
*
* @method registerBaseEventListeners
*/
MdlPopoverController.prototype.registerBaseEventListeners = function() {
PopoverRegionController.prototype.registerBaseEventListeners = function() {
customEvents.define(this.root, [
customEvents.events.activate,
customEvents.events.escape,
@ -313,7 +313,7 @@ define(['jquery', 'core/str', 'core/custom_interaction_events'],
*
* @method registerListNavigationEventListeners
*/
MdlPopoverController.prototype.registerListNavigationEventListeners = function() {
PopoverRegionController.prototype.registerListNavigationEventListeners = function() {
customEvents.define(this.root, [
customEvents.events.down,
customEvents.events.up,
@ -352,5 +352,5 @@ define(['jquery', 'core/str', 'core/custom_interaction_events'],
}.bind(this));
};
return MdlPopoverController;
return PopoverRegionController;
});

30
lib/templates/mdl_popover.mustache → lib/templates/popover_region.mustache
View File

@ -15,9 +15,9 @@
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template core/mdl_popover
@template core/popover_region
This template will render a mdl popover
This template will render a popover region
Classes required for JS:
* none
@ -33,37 +33,37 @@
}
}}
<div class="mdl-popover mdl-popover-{{uniqid}} collapsed {{$classes}}{{/classes}}" {{$attributes}}{{/attributes}}>
<div class="mdl-popover-toggle"
<div class="popover-region popover-region-{{uniqid}} collapsed {{$classes}}{{/classes}}" {{$attributes}}{{/attributes}}>
<div class="popover-region-toggle"
aria-role="button"
aria-controls="mdl-popover-container-{{uniqid}}"
aria-controls="popover-region-container-{{uniqid}}"
aria-haspopup="true"
aria-label="{{$togglelabel}}{{#str}}showpopovermenu{{/str}}{{/togglelabel}}"
tabindex="0">
{{$togglecontent}}{{/togglecontent}}
</div>
<div {{$containerattributes}}{{/containerattributes}}
id="mdl-popover-container-{{uniqid}}"
class="mdl-popover-container"
id="popover-region-container-{{uniqid}}"
class="popover-region-container"
aria-expanded="false"
aria-hidden="true"
aria-label="{{$containerlabel}}{{/containerlabel}}"
role="region">
<div class="mdl-popover-header-container">
<h3 class="mdl-popover-header-text">{{$headertext}}{{/headertext}}</h3>
<div class="mdl-popover-header-actions">{{$headeractions}}{{/headeractions}}</div>
<div class="popover-region-header-container">
<h3 class="popover-region-header-text">{{$headertext}}{{/headertext}}</h3>
<div class="popover-region-header-actions">{{$headeractions}}{{/headeractions}}</div>
</div>
<div class="mdl-popover-content-container">
<div class="mdl-popover-content">
<div class="popover-region-content-container">
<div class="popover-region-content">
{{$content}}{{/content}}
</div>
<div class="loading-icon">{{#pix}} y/loading, core, {{#str}} loading, mod_assign {{/str}} {{/pix}}</div>
{{> core/loading }}
</div>
</div>
</div>
{{#js}}
require(['jquery', 'core/mdl_popover_controller'], function($, controller) {
var container = $(".mdl-popover-{{uniqid}}");
require(['jquery', 'core/popover_region_controller'], function($, controller) {
var container = $(".popover-region-{{uniqid}}");
var controller = new controller(container);
controller.registerBaseEventListeners();
});

6
message/amd/src/message_popover_controller.js
View File

@ -26,7 +26,7 @@
* @since 3.2
*/
define(['jquery', 'theme_bootstrapbase/bootstrap', 'core/ajax', 'core/templates', 'core/str',
'core/notification', 'core/custom_interaction_events', 'core/mdl_popover_controller',
'core/notification', 'core/custom_interaction_events', 'core/popover_region_controller',
'core_message/message_repository', 'core/url'],
function($, bootstrap, ajax, templates, str, debugNotification, customEvents,
PopoverController, messageRepo, URL) {
@ -34,7 +34,7 @@ define(['jquery', 'theme_bootstrapbase/bootstrap', 'core/ajax', 'core/templates'
var SELECTORS = {
MARK_ALL_READ_BUTTON: '.mark-all-read-button',
USER_ID: 'data-userid',
MODE_TOGGLE: '.mdl-popover-header-actions .fancy-toggle',
MODE_TOGGLE: '.popover-region-header-actions .fancy-toggle',
CONTENT: '.messages',
CONTENT_ITEM_CONTAINER: '.content-item-container',
EMPTY_MESSAGE: '.empty-message',
@ -43,7 +43,7 @@ define(['jquery', 'theme_bootstrapbase/bootstrap', 'core/ajax', 'core/templates'
/**
* Constructor for the MessagePopoverController.
* Extends MdlPopoverController.
* Extends PopoverRegionController.
*
* @param element jQuery object root element of the popover
* @return object MessagePopoverController

14
message/amd/src/notification_popover_controller.js
View File

@ -26,7 +26,7 @@
* @since 3.2
*/
define(['jquery', 'theme_bootstrapbase/bootstrap', 'core/ajax', 'core/templates', 'core/str',
'core/notification', 'core/custom_interaction_events', 'core/mdl_popover_controller',
'core/notification', 'core/custom_interaction_events', 'core/popover_region_controller',
'core_message/notification_repository'],
function($, bootstrap, ajax, templates, str, debugNotification, customEvents,
popoverController, notificationRepo) {
@ -34,7 +34,7 @@ define(['jquery', 'theme_bootstrapbase/bootstrap', 'core/ajax', 'core/templates'
var SELECTORS = {
MARK_ALL_READ_BUTTON: '.mark-all-read-button',
USER_ID: 'data-userid',
MODE_TOGGLE: '.mdl-popover-header-actions .fancy-toggle',
MODE_TOGGLE: '.popover-region-header-actions .fancy-toggle',
UNREAD_NOTIFICATIONS_CONTAINER: '.unread-notifications',
ALL_NOTIFICATIONS_CONTAINER: '.all-notifications',
BLOCK_BUTTON: '.block-button',
@ -51,7 +51,7 @@ define(['jquery', 'theme_bootstrapbase/bootstrap', 'core/ajax', 'core/templates'
/**
* Constructor for the NotificationPopoverController.
* Extends MdlPopoverController.
* Extends PopoverRegionController.
*
* @param element jQuery object root element of the popover
* @return object NotificationPopoverController
@ -387,7 +387,7 @@ define(['jquery', 'theme_bootstrapbase/bootstrap', 'core/ajax', 'core/templates'
* list current contains focus, otherwise the first item in the list is
* given focus.
*
* Overrides MdlPopoverController.focusNextContentItem
* Overrides PopoverRegionController.focusNextContentItem
* @method focusNextContentItem
*/
NotificationPopoverController.prototype.focusNextContentItem = function() {
@ -406,7 +406,7 @@ define(['jquery', 'theme_bootstrapbase/bootstrap', 'core/ajax', 'core/templates'
* Shift focus to the previous content item in the content item list, if the
* content item list contains focus.
*
* Overrides MdlPopoverController.focusPreviousContentItem
* Overrides PopoverRegionController.focusPreviousContentItem
* @method focusPreviousContentItem
*/
NotificationPopoverController.prototype.focusPreviousContentItem = function() {
@ -422,7 +422,7 @@ define(['jquery', 'theme_bootstrapbase/bootstrap', 'core/ajax', 'core/templates'
/**
* Give focus to the first item in the list of content items.
*
* Overrides MdlPopoverController.focusFirstContentItem
* Overrides PopoverRegionController.focusFirstContentItem
* @method focusFirstContentItem
*/
NotificationPopoverController.prototype.focusFirstContentItem = function() {
@ -442,7 +442,7 @@ define(['jquery', 'theme_bootstrapbase/bootstrap', 'core/ajax', 'core/templates'
* Give focus to the last item in the list of content items, that is the list
* of notifications that have already been loaded.
*
* Overrides MdlPopoverController.focusLastContentItem
* Overrides PopoverRegionController.focusLastContentItem
* @method focusLastContentItem
*/
NotificationPopoverController.prototype.focusLastContentItem = function() {

8
message/templates/message_popover.mustache
View File

@ -17,7 +17,7 @@
{{!
@template message/message_popover
This template will render the notification popover for the navigation bar.
This template will render the message popover for the navigation bar.
Classes required for JS:
* none
@ -33,8 +33,8 @@
}
}}
{{< core/mdl_popover }}
{{$classes}}mdl-popover-messages{{/classes}}
{{< core/popover_region }}
{{$classes}}popover-region-messages{{/classes}}
{{$attributes}}id="nav-message-popover-container" data-userid="{{userid}}"{{/attributes}}
{{$togglelabel}}{{#str}} showmessagewindownonew, message {{/str}}{{/togglelabel}}
@ -68,7 +68,7 @@
<div class="messages" role="log" aria-busy="false" aria-atomic="false" aria-relevant="additions"></div>
<div class="empty-message" tabindex="0">{{#str}} nomessagesfound, message {{/str}}</div>
{{/content}}
{{/ core/mdl_popover }}
{{/ core/popover_region }}
{{#js}}
require(['jquery', 'core_message/message_popover_controller'], function($, controller) {
var container = $('#nav-message-popover-container');

6
message/templates/notification_popover.mustache
View File

@ -33,8 +33,8 @@
}
}}
{{< core/mdl_popover }}
{{$classes}}mdl-popover-notifications unread-only{{/classes}}
{{< core/popover_region }}
{{$classes}}popover-region-notifications unread-only{{/classes}}
{{$attributes}}id="nav-notification-popover-container" data-userid="{{userid}}"{{/attributes}}
{{$togglelabel}}{{#str}} shownotificationwindownonew, message {{/str}}{{/togglelabel}}
@ -75,7 +75,7 @@
<div class="unread-notifications" role="log" aria-busy="false" aria-atomic="false" aria-relevant="additions"></div>
<div class="empty-message" tabindex="0">{{#str}} nonewnotifications, message {{/str}}</div>
{{/content}}
{{/ core/mdl_popover }}
{{/ core/popover_region }}
{{#js}}
require(['jquery', 'core_message/notification_popover_controller'], function($, controller) {
var container = $('#nav-notification-popover-container');

2
theme/bootstrapbase/less/moodle.less
View File

@ -12,7 +12,7 @@
@import "moodle/question";
@import "moodle/user";
@import "moodle/search";
@import "moodle/popover";
@import "moodle/popover_region";
// Upstream Bootstrap.

607
theme/bootstrapbase/less/moodle/popover.less → theme/bootstrapbase/less/moodle/popover_region.less
View File

@ -1,8 +1,8 @@
.mdl-popover {
.popover-region {
float: right;
position: relative;
.mdl-popover-toggle {
.popover-region-toggle {
cursor: pointer;
.count-container {
@ -18,7 +18,7 @@
}
}
.mdl-popover-container {
.popover-region-container {
position: absolute;
right: 0;
top: 0;
@ -31,7 +31,7 @@
background-color: #fff;
z-index: 10000;
.mdl-popover-header-container {
.popover-region-header-container {
height: 25px;
line-height: 24px;
padding-left: 5px;
@ -39,14 +39,14 @@
border-bottom: 1px solid #ddd;
box-sizing: border-box;
.mdl-popover-header-text {
.popover-region-header-text {
float: left;
margin: 0;
font-size: 14px;
line-height: 25px;
}
.mdl-popover-header-actions {
.popover-region-header-actions {
float: right;
> * {
@ -55,7 +55,7 @@
}
}
.mdl-popover-content-container {
.popover-region-content-container {
height: ~"calc(100% - 25px)";
width: 100%;
overflow-y: auto;
@ -99,7 +99,7 @@
}
&.collapsed {
.mdl-popover-container {
.popover-region-container {
height: 0;
overflow: hidden;
opacity: 0;
@ -110,10 +110,10 @@
}
.navbar {
.mdl-popover {
.popover-region {
float: right;
.mdl-popover-toggle {
.popover-region-toggle {
height: 42px;
line-height: 42px;
padding-left: 10px;
@ -136,7 +136,7 @@
right: 0;
}
}
.mdl-popover-container {
.popover-region-container {
top: 42px;
&::before {
@ -161,7 +161,7 @@
}
}
&.collapsed {
.mdl-popover-container {
.popover-region-container {
height: 0;
overflow: hidden;
opacity: 0;
@ -172,11 +172,11 @@
}
}
.mdl-popover-notifications {
&.mdl-popover {
.mdl-popover-container {
.mdl-popover-header-container {
.mdl-popover-header-actions {
.popover-region-notifications {
&.popover-region {
.popover-region-container {
.popover-region-header-container {
.popover-region-header-actions {
.fancy-toggle {
position: relative;
display: inline-block;
@ -275,10 +275,265 @@
}
}
}
.mdl-popover-container {
.mdl-popover-content-container {
.popover-region-container {
.popover-region-content-container {
.popover-region-content {
.unread-notifications,
.all-notifications {
&:empty + .empty-message,
& + .empty-message {
display: none;
}
}
}
}
.popover-region-content {
.unread-notifications {
opacity: 0;
visibility: hidden;
height: 0;
overflow: hidden;
transition: opacity 0.25s, visibility 101ms 0.25s, height 101ms 0.25s;
& + .empty-message {
display: none;
}
}
.all-notifications {
opacity: 1;
visibility: visible;
height: auto;
overflow: hidden;
transition: opacity 0.25s 0.25s, visibility 101ms 0.5s, height 101ms 0.5s;
&:empty + .empty-message {
display: block;
}
}
.content-item-container {
width: 100%;
border-bottom: 1px solid #ddd;
box-sizing: border-box;
padding: 5px;
&:hover {
opacity: 0.8;
}
.content-item-link {
color: inherit;
text-decoration: none;
&:hover {
color: inherit;
text-decoration: none;
}
}
.content-item {
width: ~"calc(100% - 45px)";
display: inline-block;
box-sizing: border-box;
.content-item-header {
height: 20px;
margin-bottom: 5px;
box-sizing: border-box;
h3 {
font-size: 14px;
line-height: 14px;
float: left;
margin: 0;
max-width: 80%;
}
}
.content-item-body {
box-sizing: border-box;
.content-body-short {
max-height: 1000px;
width: 100%;
height: 30px;
opacity: 1;
visibility: visible;
transition: opacity 101ms 0.5s, visibility 101ms 0.5s, max-height 1s 0.5s;
.notification-image {
display: inline-block;
width: 10%;
img {
height: 30px;
}
}
.notification-message {
display: inline-block;
font-size: 12px;
line-height: 15px;
margin: 0;
vertical-align: top;
max-width: 80%;
}
}
.content-body-full {
overflow: hidden;
width: 100%;
max-height: 0;
opacity: 0;
visibility: hidden;
transition: max-height 0.5s, opacity 101ms 0.5s, visibility 101ms 0.5s;
pre {
word-break: normal;
word-wrap: normal;
font-size: 12px;
margin: 0;
}
}
}
.content-item-footer {
text-align: left;
margin: 5px 0 0;
box-sizing: border-box;
p {
font-size: 10px;
line-height: 10px;
margin: 0;
}
}
}
.content-item-controls {
width: 40px;
height: 100%;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
text-align: right;
.block-button {
img {
height: 15px;
}
.loading-icon {
padding: 0;
}
&.loading {
.loading-icon {
display: inline-block;
}
.block-icon {
display: none;
}
}
}
.mark-read-button {
img {
height: 15px;
}
}
.expand-buttons {
display: inline-block;
height: 30px;
width: 100%;
vertical-align: top;
float: right;
text-align: center;
margin-top: 20px;
img {
vertical-align: middle;
height: 100%;
}
.show-button {
width: 100%;
height: 100%;
display: block;
}
.hide-button {
width: 100%;
height: 100%;
display: none;
}
}
.block-button + .expand-buttons {
margin-top: 0;
}
}
&.expanded {
.content-item {
.content-item-body {
.content-body-short {
opacity: 0;
visibility: hidden;
max-height: 0;
overflow: hidden;
transition: opacity 101ms 0.25s, visibility 101ms 0.25s, max-height 0.25s;
}
.content-body-full {
max-height: 1000px;
opacity: 1;
visibility: visible;
transition: max-height 2s 0.25s, opacity 101ms 0.25s, visibility 101ms 0.25s;
}
}
}
.content-item-controls {
.expand-buttons {
.show-button {
display: none;
}
.hide-button {
display: block;
}
}
}
}
&:last-child {
border-bottom: none;
}
}
}
}
}
&.unread-only {
.popover-region-container {
.popover-region-content-container {
.popover-region-content {
.all-notifications {
opacity: 0;
visibility: hidden;
height: 0;
transition: opacity 0.25s, visibility 101ms 0.25s, height 101ms 0.25s;
& + .empty-message {
display: none;
}
}
.unread-notifications {
opacity: 1;
visibility: visible;
height: auto;
transition: opacity 0.25s 0.25s, visibility 101ms 0.5s, height 101ms 0.5s;
&:empty + .empty-message {
display: block;
}
}
}
&.loading {
.mdl-popover-content {
.popover-region-content {
.unread-notifications,
.all-notifications {
&:empty + .empty-message,
@ -288,273 +543,17 @@
}
}
}
.mdl-popover-content {
.unread-notifications {
opacity: 0;
visibility: hidden;
height: 0;
overflow: hidden;
transition: opacity 0.25s, visibility 101ms 0.25s, height 101ms 0.25s;
& + .empty-message {
display: none;
}
}
.all-notifications {
opacity: 1;
visibility: visible;
height: auto;
overflow: hidden;
transition: opacity 0.25s 0.25s, visibility 101ms 0.5s, height 101ms 0.5s;
&:empty + .empty-message {
display: block;
}
}
.content-item-container {
width: 100%;
border-bottom: 1px solid #ddd;
box-sizing: border-box;
padding: 5px;
&:hover {
opacity: 0.8;
}
.content-item-link {
color: inherit;
text-decoration: none;
&:hover {
color: inherit;
text-decoration: none;
}
}
.content-item {
width: ~"calc(100% - 45px)";
display: inline-block;
box-sizing: border-box;
.content-item-header {
height: 20px;
margin-bottom: 5px;
box-sizing: border-box;
h3 {
font-size: 14px;
line-height: 14px;
float: left;
margin: 0;
max-width: 80%;
}
}
.content-item-body {
box-sizing: border-box;
.content-body-short {
max-height: 1000px;
width: 100%;
height: 30px;
opacity: 1;
visibility: visible;
transition: opacity 101ms 0.5s, visibility 101ms 0.5s, max-height 1s 0.5s;
.notification-image {
display: inline-block;
width: 10%;
img {
height: 30px;
}
}
.notification-message {
display: inline-block;
font-size: 12px;
line-height: 15px;
margin: 0;
vertical-align: top;
max-width: 80%;
}
}
.content-body-full {
overflow: hidden;
width: 100%;
max-height: 0;
opacity: 0;
visibility: hidden;
transition: max-height 0.5s, opacity 101ms 0.5s, visibility 101ms 0.5s;
pre {
word-break: normal;
word-wrap: normal;
font-size: 12px;
margin: 0;
}
}
}
.content-item-footer {
text-align: left;
margin: 5px 0 0;
box-sizing: border-box;
p {
font-size: 10px;
line-height: 10px;
margin: 0;
}
}
}
.content-item-controls {
width: 40px;
height: 100%;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
text-align: right;
.block-button {
img {
height: 15px;
}
.loading-icon {
padding: 0;
}
&.loading {
.loading-icon {
display: inline-block;
}
.block-icon {
display: none;
}
}
}
.mark-read-button {
img {
height: 15px;
}
}
.expand-buttons {
display: inline-block;
height: 30px;
width: 100%;
vertical-align: top;
float: right;
text-align: center;
margin-top: 20px;
img {
vertical-align: middle;
height: 100%;
}
.show-button {
width: 100%;
height: 100%;
display: block;
}
.hide-button {
width: 100%;
height: 100%;
display: none;
}
}
.block-button + .expand-buttons {
margin-top: 0;
}
}
&.expanded {
.content-item {
.content-item-body {
.content-body-short {
opacity: 0;
visibility: hidden;
max-height: 0;
overflow: hidden;
transition: opacity 101ms 0.25s, visibility 101ms 0.25s, max-height 0.25s;
}
.content-body-full {
max-height: 1000px;
opacity: 1;
visibility: visible;
transition: max-height 2s 0.25s, opacity 101ms 0.25s, visibility 101ms 0.25s;
}
}
}
.content-item-controls {
.expand-buttons {
.show-button {
display: none;
}
.hide-button {
display: block;
}
}
}
}
&:last-child {
border-bottom: none;
}
}
}
}
}
&.unread-only {
.mdl-popover-container {
.mdl-popover-content-container {
.mdl-popover-content {
.all-notifications {
opacity: 0;
visibility: hidden;
height: 0;
transition: opacity 0.25s, visibility 101ms 0.25s, height 101ms 0.25s;
& + .empty-message {
display: none;
}
}
.unread-notifications {
opacity: 1;
visibility: visible;
height: auto;
transition: opacity 0.25s 0.25s, visibility 101ms 0.5s, height 101ms 0.5s;
&:empty + .empty-message {
display: block;
}
}
}
&.loading {
.mdl-popover-content {
.unread-notifications,
.all-notifications {
&:empty + .empty-message,
& + .empty-message {
display: none;
}
}
}
}
}
}
}
}
}
.mdl-popover-messages {
&.mdl-popover {
.mdl-popover-container {
.mdl-popover-header-container {
.mdl-popover-header-actions {
.popover-region-messages {
&.popover-region {
.popover-region-container {
.popover-region-header-container {
.popover-region-header-actions {
.mark-all-read-button {
.normal-icon {
display: inline-block;
@ -576,8 +575,8 @@
}
}
}
.mdl-popover-content-container {
.mdl-popover-content {
.popover-region-content-container {
.popover-region-content {
.messages {
&:empty + .empty-message {
display: block;
@ -650,7 +649,7 @@
}
}
&.loading {
.mdl-popover-content {
.popover-region-content {
.messages {
&:empty + .empty-message {
display: none;
@ -664,22 +663,22 @@
}
.dir-rtl {
.mdl-popover {
.mdl-popover-container {
.popover-region {
.popover-region-container {
left: 0;
right: auto;
.mdl-popover-header-container {
.mdl-popover-header-text {
.popover-region-header-container {
.popover-region-header-text {
float: right;
}
.mdl-popover-header-actions {
.popover-region-header-actions {
float: left;
}
}
.mdl-popover-content-container {
.mdl-popover-content {
.popover-region-content-container {
.popover-region-content {
.content-item-container {
.content-item {
.content-item-header {
@ -700,10 +699,10 @@
}
}
.navbar {
.mdl-popover {
.popover-region {
float: left;
.mdl-popover-container {
.popover-region-container {
&::before {
right: auto;
left: 7px;
@ -713,22 +712,22 @@
left: 8px;
}
.mdl-popover-header-container {
.mdl-popover-header-text {
.popover-region-header-container {
.popover-region-header-text {
float: right;
}
.mdl-popover-header-actions {
.popover-region-header-actions {
float: left;
}
}
}
}
}
.mdl-popover-notifications {
.mdl-popover {
.mdl-popover-container {
.mdl-popover-header-container {
.mdl-popover-header-actions {
.popover-region-notifications {
.popover-region {
.popover-region-container {
.popover-region-header-container {
.popover-region-header-actions {
.fancy-toggle {
&.off {
.slider-container {
@ -751,8 +750,8 @@
}
}
}
.mdl-popover-content-container {
.mdl-popover-content {
.popover-region-content-container {
.popover-region-content {
.content-item-container {
.content-item {
.content-item-header {

258
theme/bootstrapbase/style/moodle.css
View File

@ -7034,14 +7034,14 @@ body.path-question-type .mform fieldset.hidden {
.search-areas-actions > div {
display: inline-block;
}
.mdl-popover {
.popover-region {
float: right;
position: relative;
}
.mdl-popover .mdl-popover-toggle {
.popover-region .popover-region-toggle {
cursor: pointer;
}
.mdl-popover .mdl-popover-toggle .count-container {
.popover-region .popover-region-toggle .count-container {
padding: 2px;
border-radius: 2px;
background-color: red;
@ -7052,7 +7052,7 @@ body.path-question-type .mform fieldset.hidden {
top: 5px;
right: 0;
}
.mdl-popover .mdl-popover-container {
.popover-region .popover-region-container {
position: absolute;
right: 0;
top: 0;
@ -7065,7 +7065,7 @@ body.path-question-type .mform fieldset.hidden {
background-color: #fff;
z-index: 10000;
}
.mdl-popover .mdl-popover-container .mdl-popover-header-container {
.popover-region .popover-region-container .popover-region-header-container {
height: 25px;
line-height: 24px;
padding-left: 5px;
@ -7073,74 +7073,74 @@ body.path-question-type .mform fieldset.hidden {
border-bottom: 1px solid #ddd;
box-sizing: border-box;
}
.mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-text {
.popover-region .popover-region-container .popover-region-header-container .popover-region-header-text {
float: left;
margin: 0;
font-size: 14px;
line-height: 25px;
}
.mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-actions {
.popover-region .popover-region-container .popover-region-header-container .popover-region-header-actions {
float: right;
}
.mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-actions > * {
.popover-region .popover-region-container .popover-region-header-container .popover-region-header-actions > * {
margin-left: 5px;
}
.mdl-popover .mdl-popover-container .mdl-popover-content-container {
.popover-region .popover-region-container .popover-region-content-container {
height: calc(100% - 25px);
width: 100%;
overflow-y: auto;
}
.mdl-popover .mdl-popover-container .mdl-popover-content-container .loading-icon {
.popover-region .popover-region-container .popover-region-content-container .loading-icon {
display: none;
text-align: center;
padding: 5px;
box-sizing: border-box;
}
.mdl-popover .mdl-popover-container .mdl-popover-content-container .empty-message {
.popover-region .popover-region-container .popover-region-content-container .empty-message {
display: none;
text-align: center;
padding: 10px;
}
.mdl-popover .mdl-popover-container .mdl-popover-content-container.loading .loading-icon {
.popover-region .popover-region-container .popover-region-content-container.loading .loading-icon {
display: block;
}
.mdl-popover .mdl-popover-container .mdl-popover-content-container.loading .empty-message {
.popover-region .popover-region-container .popover-region-content-container.loading .empty-message {
display: none;
}
.mdl-popover [data-link-url] {
.popover-region [data-link-url] {
cursor: pointer;
color: #0070a8;
}
.mdl-popover [data-link-url]:hover,
.mdl-popover [data-link-url]:active {
.popover-region [data-link-url]:hover,
.popover-region [data-link-url]:active {
outline: 0;
}
.mdl-popover [data-link-url]:hover,
.mdl-popover [data-link-url]:focus {
.popover-region [data-link-url]:hover,
.popover-region [data-link-url]:focus {
color: #003d5c;
text-decoration: underline;
}
.mdl-popover.collapsed .mdl-popover-container {
.popover-region.collapsed .popover-region-container {
height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: height 0.25s, opacity 101ms 0.25s, visibility 101ms 0.25s;
}
.navbar .mdl-popover {
.navbar .popover-region {
float: right;
}
.navbar .mdl-popover .mdl-popover-toggle {
.navbar .popover-region .popover-region-toggle {
height: 42px;
line-height: 42px;
padding-left: 10px;
padding-right: 10px;
}
.navbar .mdl-popover .mdl-popover-toggle img {
.navbar .popover-region .popover-region-toggle img {
height: 16px;
width: 16px;
}
.navbar .mdl-popover .mdl-popover-toggle .count-container {
.navbar .popover-region .popover-region-toggle .count-container {
padding: 2px;
border-radius: 2px;
background-color: red;
@ -7151,10 +7151,10 @@ body.path-question-type .mform fieldset.hidden {
top: 5px;
right: 0;
}
.navbar .mdl-popover .mdl-popover-container {
.navbar .popover-region .popover-region-container {
top: 42px;
}
.navbar .mdl-popover .mdl-popover-container::before {
.navbar .popover-region .popover-region-container::before {
content: '';
display: inline-block;
border-left: 10px solid transparent;
@ -7164,7 +7164,7 @@ body.path-question-type .mform fieldset.hidden {
top: -10px;
right: 7px;
}
.navbar .mdl-popover .mdl-popover-container::after {
.navbar .popover-region .popover-region-container::after {
content: '';
display: inline-block;
border-left: 9px solid transparent;
@ -7174,14 +7174,14 @@ body.path-question-type .mform fieldset.hidden {
top: -9px;
right: 8px;
}
.navbar .mdl-popover.collapsed .mdl-popover-container {
.navbar .popover-region.collapsed .popover-region-container {
height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: height 0.25s, opacity 101ms 0.25s, visibility 101ms 0.25s;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-actions .fancy-toggle {
.popover-region-notifications.popover-region .popover-region-container .popover-region-header-container .popover-region-header-actions .fancy-toggle {
position: relative;
display: inline-block;
border-radius: 4px;
@ -7192,12 +7192,12 @@ body.path-question-type .mform fieldset.hidden {
cursor: pointer;
overflow: hidden;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-actions .fancy-toggle .slider-container {
.popover-region-notifications.popover-region .popover-region-container .popover-region-header-container .popover-region-header-actions .fancy-toggle .slider-container {
width: 100%;
height: 100%;
position: absolute;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-actions .fancy-toggle .slider-container .slider {
.popover-region-notifications.popover-region .popover-region-container .popover-region-header-container .popover-region-header-actions .fancy-toggle .slider-container .slider {
width: 10px;
height: calc(100% - 2px);
background-color: #fff;
@ -7205,129 +7205,129 @@ body.path-question-type .mform fieldset.hidden {
margin: 1px;
display: inline-block;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-actions .fancy-toggle .on-text {
.popover-region-notifications.popover-region .popover-region-container .popover-region-header-container .popover-region-header-actions .fancy-toggle .on-text {
padding: 2px 5px 2px 14px;
box-sizing: border-box;
line-height: 16px;
vertical-align: top;
display: inline-block;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-actions .fancy-toggle .off-text {
.popover-region-notifications.popover-region .popover-region-container .popover-region-header-container .popover-region-header-actions .fancy-toggle .off-text {
padding: 2px 14px 2px 5px;
box-sizing: border-box;
line-height: 16px;
vertical-align: top;
display: inline-block;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-actions .fancy-toggle.on {
.popover-region-notifications.popover-region .popover-region-container .popover-region-header-container .popover-region-header-actions .fancy-toggle.on {
background-color: green;
color: #fff;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-actions .fancy-toggle.on .slider-container {
.popover-region-notifications.popover-region .popover-region-container .popover-region-header-container .popover-region-header-actions .fancy-toggle.on .slider-container {
transform: translateX(0);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-actions .fancy-toggle.on .on-text {
.popover-region-notifications.popover-region .popover-region-container .popover-region-header-container .popover-region-header-actions .fancy-toggle.on .on-text {
display: block;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-actions .fancy-toggle.on .off-text {
.popover-region-notifications.popover-region .popover-region-container .popover-region-header-container .popover-region-header-actions .fancy-toggle.on .off-text {
display: none;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-actions .fancy-toggle.off {
.popover-region-notifications.popover-region .popover-region-container .popover-region-header-container .popover-region-header-actions .fancy-toggle.off {
background-color: red;
color: #fff;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-actions .fancy-toggle.off .slider-container {
.popover-region-notifications.popover-region .popover-region-container .popover-region-header-container .popover-region-header-actions .fancy-toggle.off .slider-container {
transform: translateX(100%);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-actions .fancy-toggle.off .slider-container .slider {
.popover-region-notifications.popover-region .popover-region-container .popover-region-header-container .popover-region-header-actions .fancy-toggle.off .slider-container .slider {
transform: translateX(-110%);
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-actions .fancy-toggle.off .on-text {
.popover-region-notifications.popover-region .popover-region-container .popover-region-header-container .popover-region-header-actions .fancy-toggle.off .on-text {
display: none;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-actions .fancy-toggle.off .off-text {
.popover-region-notifications.popover-region .popover-region-container .popover-region-header-container .popover-region-header-actions .fancy-toggle.off .off-text {
display: block;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-header-container .mark-all-read-button .normal-icon {
.popover-region-notifications.popover-region .popover-region-container .popover-region-header-container .mark-all-read-button .normal-icon {
display: inline-block;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-header-container .mark-all-read-button .loading-icon {
.popover-region-notifications.popover-region .popover-region-container .popover-region-header-container .mark-all-read-button .loading-icon {
display: none;
height: 12px;
width: 12px;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-header-container .mark-all-read-button.loading .normal-icon {
.popover-region-notifications.popover-region .popover-region-container .popover-region-header-container .mark-all-read-button.loading .normal-icon {
display: none;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-header-container .mark-all-read-button.loading .loading-icon {
.popover-region-notifications.popover-region .popover-region-container .popover-region-header-container .mark-all-read-button.loading .loading-icon {
display: inline-block;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container.loading .mdl-popover-content .unread-notifications:empty + .empty-message,
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container.loading .mdl-popover-content .all-notifications:empty + .empty-message,
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container.loading .mdl-popover-content .unread-notifications + .empty-message,
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container.loading .mdl-popover-content .all-notifications + .empty-message {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content-container .popover-region-content .unread-notifications:empty + .empty-message,
.popover-region-notifications.popover-region .popover-region-container .popover-region-content-container .popover-region-content .all-notifications:empty + .empty-message,
.popover-region-notifications.popover-region .popover-region-container .popover-region-content-container .popover-region-content .unread-notifications + .empty-message,
.popover-region-notifications.popover-region .popover-region-container .popover-region-content-container .popover-region-content .all-notifications + .empty-message {
display: none;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .unread-notifications {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .unread-notifications {
opacity: 0;
visibility: hidden;
height: 0;
overflow: hidden;
transition: opacity 0.25s, visibility 101ms 0.25s, height 101ms 0.25s;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .unread-notifications + .empty-message {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .unread-notifications + .empty-message {
display: none;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .all-notifications {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .all-notifications {
opacity: 1;
visibility: visible;
height: auto;
overflow: hidden;
transition: opacity 0.25s 0.25s, visibility 101ms 0.5s, height 101ms 0.5s;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .all-notifications:empty + .empty-message {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .all-notifications:empty + .empty-message {
display: block;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container {
width: 100%;
border-bottom: 1px solid #ddd;
box-sizing: border-box;
padding: 5px;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container:hover {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container:hover {
opacity: 0.8;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item-link {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container .content-item-link {
color: inherit;
text-decoration: none;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item-link:hover {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container .content-item-link:hover {
color: inherit;
text-decoration: none;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container .content-item {
width: calc(100% - 45px);
display: inline-block;
box-sizing: border-box;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item .content-item-header {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container .content-item .content-item-header {
height: 20px;
margin-bottom: 5px;
box-sizing: border-box;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item .content-item-header h3 {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container .content-item .content-item-header h3 {
font-size: 14px;
line-height: 14px;
float: left;
margin: 0;
max-width: 80%;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item .content-item-body {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container .content-item .content-item-body {
box-sizing: border-box;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item .content-item-body .content-body-short {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container .content-item .content-item-body .content-body-short {
max-height: 1000px;
width: 100%;
height: 30px;
@ -7335,14 +7335,14 @@ body.path-question-type .mform fieldset.hidden {
visibility: visible;
transition: opacity 101ms 0.5s, visibility 101ms 0.5s, max-height 1s 0.5s;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item .content-item-body .content-body-short .notification-image {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container .content-item .content-item-body .content-body-short .notification-image {
display: inline-block;
width: 10%;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item .content-item-body .content-body-short .notification-image img {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container .content-item .content-item-body .content-body-short .notification-image img {
height: 30px;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item .content-item-body .content-body-short .notification-message {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container .content-item .content-item-body .content-body-short .notification-message {
display: inline-block;
font-size: 12px;
line-height: 15px;
@ -7350,7 +7350,7 @@ body.path-question-type .mform fieldset.hidden {
vertical-align: top;
max-width: 80%;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item .content-item-body .content-body-full {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container .content-item .content-item-body .content-body-full {
overflow: hidden;
width: 100%;
max-height: 0;
@ -7358,23 +7358,23 @@ body.path-question-type .mform fieldset.hidden {
visibility: hidden;
transition: max-height 0.5s, opacity 101ms 0.5s, visibility 101ms 0.5s;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item .content-item-body .content-body-full pre {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container .content-item .content-item-body .content-body-full pre {
word-break: normal;
word-wrap: normal;
font-size: 12px;
margin: 0;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item .content-item-footer {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container .content-item .content-item-footer {
text-align: left;
margin: 5px 0 0;
box-sizing: border-box;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item .content-item-footer p {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container .content-item .content-item-footer p {
font-size: 10px;
line-height: 10px;
margin: 0;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item-controls {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container .content-item-controls {
width: 40px;
height: 100%;
display: inline-block;
@ -7382,22 +7382,22 @@ body.path-question-type .mform fieldset.hidden {
box-sizing: border-box;
text-align: right;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item-controls .block-button img {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container .content-item-controls .block-button img {
height: 15px;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item-controls .block-button .loading-icon {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container .content-item-controls .block-button .loading-icon {
padding: 0;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item-controls .block-button.loading .loading-icon {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container .content-item-controls .block-button.loading .loading-icon {
display: inline-block;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item-controls .block-button.loading .block-icon {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container .content-item-controls .block-button.loading .block-icon {
display: none;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item-controls .mark-read-button img {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container .content-item-controls .mark-read-button img {
height: 15px;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item-controls .expand-buttons {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container .content-item-controls .expand-buttons {
display: inline-block;
height: 30px;
width: 100%;
@ -7406,87 +7406,87 @@ body.path-question-type .mform fieldset.hidden {
text-align: center;
margin-top: 20px;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item-controls .expand-buttons img {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container .content-item-controls .expand-buttons img {
vertical-align: middle;
height: 100%;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item-controls .expand-buttons .show-button {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container .content-item-controls .expand-buttons .show-button {
width: 100%;
height: 100%;
display: block;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item-controls .expand-buttons .hide-button {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container .content-item-controls .expand-buttons .hide-button {
width: 100%;
height: 100%;
display: none;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item-controls .block-button + .expand-buttons {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container .content-item-controls .block-button + .expand-buttons {
margin-top: 0;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container.expanded .content-item .content-item-body .content-body-short {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container.expanded .content-item .content-item-body .content-body-short {
opacity: 0;
visibility: hidden;
max-height: 0;
overflow: hidden;
transition: opacity 101ms 0.25s, visibility 101ms 0.25s, max-height 0.25s;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container.expanded .content-item .content-item-body .content-body-full {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container.expanded .content-item .content-item-body .content-body-full {
max-height: 1000px;
opacity: 1;
visibility: visible;
transition: max-height 2s 0.25s, opacity 101ms 0.25s, visibility 101ms 0.25s;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container.expanded .content-item-controls .expand-buttons .show-button {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container.expanded .content-item-controls .expand-buttons .show-button {
display: none;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container.expanded .content-item-controls .expand-buttons .hide-button {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container.expanded .content-item-controls .expand-buttons .hide-button {
display: block;
}
.mdl-popover-notifications.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container:last-child {
.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container:last-child {
border-bottom: none;
}
.mdl-popover-notifications.mdl-popover.unread-only .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .all-notifications {
.popover-region-notifications.unread-only .popover-region-container .popover-region-content-container .popover-region-content .all-notifications {
opacity: 0;
visibility: hidden;
height: 0;
transition: opacity 0.25s, visibility 101ms 0.25s, height 101ms 0.25s;
}
.mdl-popover-notifications.mdl-popover.unread-only .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .all-notifications + .empty-message {
.popover-region-notifications.unread-only .popover-region-container .popover-region-content-container .popover-region-content .all-notifications + .empty-message {
display: none;
}
.mdl-popover-notifications.mdl-popover.unread-only .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .unread-notifications {
.popover-region-notifications.unread-only .popover-region-container .popover-region-content-container .popover-region-content .unread-notifications {
opacity: 1;
visibility: visible;
height: auto;
transition: opacity 0.25s 0.25s, visibility 101ms 0.5s, height 101ms 0.5s;
}
.mdl-popover-notifications.mdl-popover.unread-only .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .unread-notifications:empty + .empty-message {
.popover-region-notifications.unread-only .popover-region-container .popover-region-content-container .popover-region-content .unread-notifications:empty + .empty-message {
display: block;
}
.mdl-popover-notifications.mdl-popover.unread-only .mdl-popover-container .mdl-popover-content-container.loading .mdl-popover-content .unread-notifications:empty + .empty-message,
.mdl-popover-notifications.mdl-popover.unread-only .mdl-popover-container .mdl-popover-content-container.loading .mdl-popover-content .all-notifications:empty + .empty-message,
.mdl-popover-notifications.mdl-popover.unread-only .mdl-popover-container .mdl-popover-content-container.loading .mdl-popover-content .unread-notifications + .empty-message,
.mdl-popover-notifications.mdl-popover.unread-only .mdl-popover-container .mdl-popover-content-container.loading .mdl-popover-content .all-notifications + .empty-message {
.popover-region-notifications.unread-only .popover-region-container .popover-region-content-container.loading .popover-region-content .unread-notifications:empty + .empty-message,
.popover-region-notifications.unread-only .popover-region-container .popover-region-content-container.loading .popover-region-content .all-notifications:empty + .empty-message,
.popover-region-notifications.unread-only .popover-region-container .popover-region-content-container.loading .popover-region-content .unread-notifications + .empty-message,
.popover-region-notifications.unread-only .popover-region-container .popover-region-content-container.loading .popover-region-content .all-notifications + .empty-message {
display: none;
}
.mdl-popover-messages.mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-actions .mark-all-read-button .normal-icon {
.popover-region-messages.popover-region .popover-region-container .popover-region-header-container .popover-region-header-actions .mark-all-read-button .normal-icon {
display: inline-block;
}
.mdl-popover-messages.mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-actions .mark-all-read-button .loading-icon {
.popover-region-messages.popover-region .popover-region-container .popover-region-header-container .popover-region-header-actions .mark-all-read-button .loading-icon {
display: none;
height: 12px;
width: 12px;
}
.mdl-popover-messages.mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-actions .mark-all-read-button.loading .normal-icon {
.popover-region-messages.popover-region .popover-region-container .popover-region-header-container .popover-region-header-actions .mark-all-read-button.loading .normal-icon {
display: none;
}
.mdl-popover-messages.mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-actions .mark-all-read-button.loading .loading-icon {
.popover-region-messages.popover-region .popover-region-container .popover-region-header-container .popover-region-header-actions .mark-all-read-button.loading .loading-icon {
display: inline-block;
}
.mdl-popover-messages.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .messages:empty + .empty-message {
.popover-region-messages.popover-region .popover-region-container .popover-region-content-container .popover-region-content .messages:empty + .empty-message {
display: block;
}
.mdl-popover-messages.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container {
.popover-region-messages.popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container {
width: 100%;
border-bottom: 1px solid #ddd;
box-sizing: border-box;
@ -7494,112 +7494,112 @@ body.path-question-type .mform fieldset.hidden {
height: 85px;
cursor: pointer;
}
.mdl-popover-messages.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container:hover {
.popover-region-messages.popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container:hover {
opacity: 0.8;
}
.mdl-popover-messages.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item-link {
.popover-region-messages.popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container .content-item-link {
color: inherit;
text-decoration: none;
}
.mdl-popover-messages.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item-link:hover {
.popover-region-messages.popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container .content-item-link:hover {
color: inherit;
text-decoration: none;
}
.mdl-popover-messages.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item {
.popover-region-messages.popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container .content-item {
height: 100%;
width: 100%;
}
.mdl-popover-messages.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item .profile-image-container {
.popover-region-messages.popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container .content-item .profile-image-container {
height: 100%;
width: 20%;
display: inline-block;
}
.mdl-popover-messages.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item .profile-image-container img {
.popover-region-messages.popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container .content-item .profile-image-container img {
height: 100%;
display: inline-block;
vertical-align: middle;
border-radius: 50%;
}
.mdl-popover-messages.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item .content-item-body {
.popover-region-messages.popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container .content-item .content-item-body {
display: inline-block;
box-sizing: border-box;
vertical-align: middle;
width: 75%;
height: 100%;
}
.mdl-popover-messages.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item .content-item-body h3 {
.popover-region-messages.popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container .content-item .content-item-body h3 {
font-size: 14px;
line-height: 14px;
margin: 0;
width: 100%;
}
.mdl-popover-messages.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item .content-item-body p {
.popover-region-messages.popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container .content-item .content-item-body p {
margin: 0;
}
.mdl-popover-messages.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container:last-child {
.popover-region-messages.popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container:last-child {
border-bottom: none;
}
.mdl-popover-messages.mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container.unread {
.popover-region-messages.popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container.unread {
background-color: #effaff;
}
.mdl-popover-messages.mdl-popover .mdl-popover-container .mdl-popover-content-container.loading .mdl-popover-content .messages:empty + .empty-message {
.popover-region-messages.popover-region .popover-region-container .popover-region-content-container.loading .popover-region-content .messages:empty + .empty-message {
display: none;
}
.dir-rtl .mdl-popover .mdl-popover-container {
.dir-rtl .popover-region .popover-region-container {
left: 0;
right: auto;
}
.dir-rtl .mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-text {
.dir-rtl .popover-region .popover-region-container .popover-region-header-container .popover-region-header-text {
float: right;
}
.dir-rtl .mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-actions {
.dir-rtl .popover-region .popover-region-container .popover-region-header-container .popover-region-header-actions {
float: left;
}
.dir-rtl .mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item .content-item-header h3 {
.dir-rtl .popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container .content-item .content-item-header h3 {
float: right;
}
.dir-rtl .mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item .content-item-footer {
.dir-rtl .popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container .content-item .content-item-footer {
text-align: right;
}
.dir-rtl .mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item-controls {
.dir-rtl .popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container .content-item-controls {
text-align: left;
}
.dir-rtl .navbar .mdl-popover {
.dir-rtl .navbar .popover-region {
float: left;
}
.dir-rtl .navbar .mdl-popover .mdl-popover-container::before {
.dir-rtl .navbar .popover-region .popover-region-container::before {
right: auto;
left: 7px;
}
.dir-rtl .navbar .mdl-popover .mdl-popover-container::after {
.dir-rtl .navbar .popover-region .popover-region-container::after {
right: auto;
left: 8px;
}
.dir-rtl .navbar .mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-text {
.dir-rtl .navbar .popover-region .popover-region-container .popover-region-header-container .popover-region-header-text {
float: right;
}
.dir-rtl .navbar .mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-actions {
.dir-rtl .navbar .popover-region .popover-region-container .popover-region-header-container .popover-region-header-actions {
float: left;
}
.dir-rtl .mdl-popover-notifications .mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-actions .fancy-toggle.off .slider-container {
.dir-rtl .popover-region-notifications .popover-region .popover-region-container .popover-region-header-container .popover-region-header-actions .fancy-toggle.off .slider-container {
transform: translateX(0);
}
.dir-rtl .mdl-popover-notifications .mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-actions .fancy-toggle.off .slider-container .slider {
.dir-rtl .popover-region-notifications .popover-region .popover-region-container .popover-region-header-container .popover-region-header-actions .fancy-toggle.off .slider-container .slider {
transform: translateX(0);
}
.dir-rtl .mdl-popover-notifications .mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-actions .fancy-toggle.on .slider-container {
.dir-rtl .popover-region-notifications .popover-region .popover-region-container .popover-region-header-container .popover-region-header-actions .fancy-toggle.on .slider-container {
transform: translateX(-100%);
}
.dir-rtl .mdl-popover-notifications .mdl-popover .mdl-popover-container .mdl-popover-header-container .mdl-popover-header-actions .fancy-toggle.on .slider-container .slider {
.dir-rtl .popover-region-notifications .popover-region .popover-region-container .popover-region-header-container .popover-region-header-actions .fancy-toggle.on .slider-container .slider {
transform: translateX(110%);
}
.dir-rtl .mdl-popover-notifications .mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item .content-item-header h3 {
.dir-rtl .popover-region-notifications .popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container .content-item .content-item-header h3 {
float: right;
}
.dir-rtl .mdl-popover-notifications .mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item .content-item-footer {
.dir-rtl .popover-region-notifications .popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container .content-item .content-item-footer {
text-align: right;
}
.dir-rtl .mdl-popover-notifications .mdl-popover .mdl-popover-container .mdl-popover-content-container .mdl-popover-content .content-item-container .content-item-controls {
.dir-rtl .popover-region-notifications .popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container .content-item-controls {
text-align: left;
}
/*!