( function ( $, wp, _, rwmb, i18n ) {
'use strict';
var views = rwmb.views = rwmb.views || {},
models = rwmb.models = rwmb.models || {},
media = wp.media,
MediaFrame = media.view.MediaFrame,
MediaCollection, Controller, MediaField, MediaList, MediaItem, MediaButton, MediaStatus, EditMedia,
MediaDetails, MediaLibrary, MediaSelect;
MediaCollection = Backbone.Collection.extend( {
model: wp.media.model.Attachment,
initialize: function ( models, options ) {
this.controller = options.controller || new models.Controller;
this.on( 'add remove reset', function () {
var max = this.controller.get( 'maxFiles' );
this.controller.set( 'length', this.length );
this.controller.set( 'full', max > 0 && this.length >= max );
} );
},
add: function ( models, options ) {
var max = this.controller.get( 'maxFiles' ),
left = max - this.length;
if ( ! models || ( max > 0 && left <= 0 ) ) {
return this;
}
if ( ! models.hasOwnProperty( 'length' ) ) {
models = [models];
} else if ( models instanceof media.model.Attachments ) {
models = models.models;
}
models = _.difference( models, this.models );
if ( left > 0 ) {
models = _.first( models, left );
}
Backbone.Collection.prototype.add.call( this, models, options );
},
remove: function ( models, options ) {
// Don't remove models if event is not fired from MB plugin.
if( ! $( event.target ).closest( '.rwmb-field, [data-class="rwmb-field"]' ).length ) {
return;
}
models = Backbone.Collection.prototype.remove.call( this, models, options );
if ( this.controller.get( 'forceDelete' ) === true ) {
models = ! _.isArray( models ) ? [models] : models;
_.each( models, function ( model ) {
model.destroy();
} );
}
},
destroyAll: function () {
_.each( _.clone( this.models ), function ( model ) {
model.destroy();
} );
}
} );
/***
* Controller Model
* Manages data of media field and media models. Most of the media views will use this to manage the media
*/
Controller = models.Controller = Backbone.Model.extend( {
//Default options
defaults: {
maxFiles: 0,
ids: [],
mimeType: '',
forceDelete: false,
maxStatus: true,
length: 0
},
//Initialize Controller model
initialize: function () {
// All numbers, no 0 ids
this.set( 'ids', _.without( _.map( this.get( 'ids' ), Number ), 0, - 1 ) );
// Create items collection
this.set( 'items', new MediaCollection( [], {controller: this} ) );
// Listen for destroy event on controller, delete all models when triggered
this.on( 'destroy', function () {
if ( this.get( 'forceDelete' ) ) {
this.get( 'items' ).destroyAll();
}
} );
}
} );
/***
* MediaField
* Sets up media field view and subviews
*/
MediaField = views.MediaField = Backbone.View.extend( {
className: 'rwmb-media-view',
initialize: function ( options ) {
var that = this,
fieldName = options.input.name;
this.$input = $( options.input );
if ( 1 != this.$input.attr( 'data-single-image' ) ) {
fieldName += '[]';
}
this.controller = new Controller( _.extend(
{
fieldName: fieldName,
ids: this.$input.val().split( ',' )
},
this.$input.data( 'options' )
) );
// Create views
this.createList();
this.createAddButton();
this.createStatus();
this.render();
this.loadInitialAttachments();
// Listen for destroy event on input
this.$input.on( 'remove', function () {
that.controller.destroy();
} );
var collection = this.controller.get( 'items' );
this.$input.on( 'media:reset', function() {
collection.reset();
} );
collection.on( 'all', _.debounce( function() {
var ids = collection.pluck( 'id' ).join( ',' );
that.$input.val( ids ).trigger( 'change', [that.$( '.rwmb-media-input' )] );
}, 500 ) );
},
loadInitialAttachments: function () {
if ( ! this.$input.val() ) {
return;
}
var models = this.$input.data( 'attachments' ).map( function( attachment ) {
return wp.media.model.Attachment.create( attachment );
} );
this.controller.get( 'items' ).add( models );
},
// Creates media list
createList: function () {
this.list = new MediaList( {controller: this.controller} );
},
// Creates button that adds media
createAddButton: function () {
this.addButton = new MediaButton( {controller: this.controller} );
},
// Creates status
createStatus: function () {
this.status = new MediaStatus( {controller: this.controller} );
},
// Render field and adds sub fields
render: function () {
// Empty then add parts
this.$el.empty().append(
this.list.el,
this.status.el,
this.addButton.el
);
}
} );
/***
* Media List
* lists media
*/
MediaList = views.MediaList = Backbone.View.extend( {
tagName: 'ul',
className: 'rwmb-media-list',
initialize: function ( options ) {
this.controller = options.controller;
this.collection = this.controller.get( 'items' );
this.itemView = options.itemView || MediaItem;
this.getItemView = _.memoize( function ( item ) {
var itemView = new this.itemView( {
model: item,
controller: this.controller
} );
this.listenToItemView( itemView );
return itemView;
},
function ( item ) {
return item.cid;
}
);
this.listenTo( this.collection, 'add', this.addItemView );
this.listenTo( this.collection, 'remove', this.removeItemView );
this.listenTo( this.collection, 'reset', this.resetItemViews );
// Sort items using helper 'clone' to prevent trigger click on the image, which means reselect.
this.$el.sortable( {
helper : 'clone',
start: function ( event, ui ) {
ui.placeholder.height( ui.helper.outerHeight() );
ui.placeholder.width( ui.helper.outerWidth() );
},
update: function( event, ui ) {
ui.item.find( rwmb.inputSelectors ).first().trigger( 'mb_change' );
}
} );
},
listenToItemView: function ( itemView ) {
this.listenTo( itemView, 'click:remove', this.removeItem );
this.listenTo( itemView, 'click:switch', this.switchItem );
this.listenTo( itemView, 'click:edit', this.editItem );
},
addItemView: function ( item ) {
var index = this.collection.indexOf( item ),
itemEl = this.getItemView( item ).el,
$children = this.$el.children();
if ( 0 >= index ) {
this.$el.prepend( itemEl );
} else if ( $children.length <= index ) {
this.$el.append( itemEl )
} else {
$children.eq( index - 1 ).after( itemEl );
}
},
// Remove item view
removeItemView: function ( item ) {
this.getItemView( item ).$el.detach();
},
removeItem: function ( item ) {
this.collection.remove( item );
},
resetItemViews: function( items ){
var that = this;
_.each( that.models, that.removeItemView );
items.each( that.addItemView );
},
switchItem: function ( item ) {
if ( this._switchFrame ) {
this._switchFrame.dispose();
}
this._switchFrame = new MediaSelect( {
multiple: false,
editing: true,
library: {
type: this.controller.get( 'mimeType' )
},
edit: this.collection
} );
// Refresh content when frame opens
this._switchFrame.on( 'open', function() {
var frameContent = this._switchFrame.content.get();
if ( frameContent && frameContent.collection ) {
frameContent.collection.mirroring._hasMore = true;
frameContent.collection.more();
}
}, this );
this._switchFrame.on( 'select', function () {
var selection = this._switchFrame.state().get( 'selection' ),
collection = this.collection,
index = collection.indexOf( item );
if ( ! _.isEmpty( selection ) ) {
collection.remove( item );
collection.add( selection, {at: index} );
}
}, this );
this._switchFrame.open();
return false;
},
editItem: function ( item ) {
if ( this._editFrame ) {
this._editFrame.dispose();
}
// Trigger the media frame to open the correct item.
this._editFrame = new EditMedia( {
frame: 'edit-attachments',
controller: {
gridRouter: new wp.media.view.MediaFrame.Manage.Router()
},
library: this.collection,
model: item
} );
this._editFrame.open();
}
} );
/***
* MediaStatus view.
* Show number of selected/uploaded files and number of files remain if "maxStatus" parameter is true.
*/
MediaStatus = views.MediaStatus = Backbone.View.extend( {
tagName: 'div',
className: 'rwmb-media-status',
template: wp.template( 'rwmb-media-status' ),
initialize: function ( options ) {
this.controller = options.controller;
// Auto hide if maxStatus is false
if ( ! this.controller.get( 'maxStatus' ) ) {
this.$el.hide();
return;
}
// Re-render if changes happen in controller
this.listenTo( this.controller.get( 'items' ), 'update', this.render );
this.listenTo( this.controller.get( 'items' ), 'reset', this.render );
// Render
this.render();
},
render: function () {
this.$el.html( this.template( this.controller.toJSON() ) );
}
} );
/***
* Media Button
* Selects and adds media to controller
*/
MediaButton = views.MediaButton = Backbone.View.extend( {
tagName: 'div',
className: 'rwmb-media-add',
template: wp.template( 'rwmb-media-button' ),
events: {
'click .button': function () {
if ( this._frame ) {
this._frame.dispose();
}
var maxFiles = this.controller.get( 'maxFiles' );
this._frame = new MediaSelect( {
multiple: maxFiles > 1 || maxFiles <= 0 ? 'add' : false,
editing: true,
library: {
type: this.controller.get( 'mimeType' )
},
edit: this.collection
} );
// Refresh content when frame opens
this._frame.on( 'open', function() {
var frameContent = this._frame.content.get();
if ( frameContent && frameContent.collection ) {
frameContent.collection.mirroring._hasMore = true;
frameContent.collection.more();
}
}, this );
this._frame.on( 'select', function () {
var selection = this._frame.state().get( 'selection' );
if ( this.controller.get( 'addTo' ) === 'beginning' ) {
this.collection.add( selection.models, {at: 0} );
} else {
this.collection.add( selection.models );
}
}, this );
this._frame.open();
}
},
render: function () {
this.$el.html( this.template( {text: i18n.add} ) );
return this;
},
initialize: function ( options ) {
this.controller = options.controller;
this.collection = this.controller.get( 'items' );
// Auto hide if you reach the max number of media
this.listenTo( this.controller, 'change:full', function () {
this.$el.toggle( ! this.controller.get( 'full' ) );
} );
this.render();
}
} );
/***
* MediaItem
* View for individual media items
*/
MediaItem = views.MediaItem = Backbone.View.extend( {
tagName: 'li',
className: 'rwmb-file',
template: wp.template( 'rwmb-media-item' ),
initialize: function ( options ) {
this.controller = options.controller;
this.collection = this.controller.get( 'items' );
this.render();
this.listenTo( this.model, 'change', this.render );
this.$el.data( 'id', this.model.cid );
},
events: {
'click .rwmb-image-overlay': function ( e ) {
e.preventDefault();
this.trigger( 'click:switch', this.model );
},
'click .rwmb-remove-media': function ( e ) {
e.preventDefault();
this.trigger( 'click:remove', this.model );
},
'click .rwmb-edit-media': function ( e ) {
e.preventDefault();
this.trigger( 'click:edit', this.model );
}
},
render: function () {
var data = this.model.toJSON();
data.controller = this.controller.toJSON();
this.$el.html( this.template( data ) );
return this;
}
} );
/**
* Extend media frames to make things work right
*/
/**
* MediaDetails
* Custom version of TwoColumn view to prevent all video and audio from being unset
*/
MediaDetails = views.MediaDetails = media.view.Attachment.Details.TwoColumn.extend( {
render: function () {
var that = this;
media.view.Attachment.Details.prototype.render.apply( this, arguments );
this.players = this.players || [];
media.mixin.unsetPlayers.call( this );
this.$( 'audio, video' ).each( function ( i, elem ) {
var el = media.view.MediaDetails.prepareSrc( elem );
that.players.push( new window.MediaElementPlayer( el, media.mixin.mejsSettings ) );
} );
}
} );
/**
* MediaLibrary
* Custom version of Library to exclude already selected media in a media frame
*/
MediaLibrary = media.controller.Library.extend( {
defaults: _.defaults( {
multiple: 'add',
filterable: 'all',
priority: 100,
syncSelection: false
}, media.controller.Library.prototype.defaults ),
activate: function () {
var library = this.get( 'library' ),
edit = this.frame.options.edit;
if ( this.editLibrary && this.editLibrary !== edit ) {
library.unobserve( this.editLibrary );
}
// Accepts attachments that exist in the original library and
// that do not exist in gallery's library.
library.validator = function ( attachment ) {
return ! ! this.mirroring.get( attachment.cid ) && ! edit.get( attachment.cid ) && media.model.Selection.prototype.validator.apply( this, arguments );
};
// Reset the library to ensure that all attachments are re-added
// to the collection. Do so silently, as calling `observe` will
// trigger the `reset` event.
library.reset( library.mirroring.models, {silent: true} );
library.observe( edit );
this.editLibrary = edit;
media.controller.Library.prototype.activate.apply( this, arguments );
}
} );
/**
* MediaSelect
* Custom version of Select media frame that uses MediaLibrary
*/
MediaSelect = views.MediaSelect = MediaFrame.Select.extend( {
/**
* Create the default states on the frame.
*/
createStates: function () {
var options = this.options;
// Add reference so we know MediaFrame belongs to MB plugin.
this.$el.attr( 'data-class', 'rwmb-field' );
if ( this.options.states ) {
return;
}
// Add the default states.
this.states.add( [
// Main states.
new MediaLibrary( {
library: media.query( options.library ),
multiple: options.multiple,
priority: 20
} )
] );
}
} );
/***
* EditMedia
* Custom version of EditAttachments frame to prevent all video and audio from being unset
*/
EditMedia = views.EditMedia = MediaFrame.EditAttachments.extend( {
/**
* Content region rendering callback for the `edit-metadata` mode.
*
* @param {Object} contentRegion Basic object with a `view` property, which
* should be set with the proper region view.
*/
editMetadataMode: function ( contentRegion ) {
contentRegion.view = new MediaDetails( {
controller: this,
model: this.model
} );
/**
* Attach a subview to display fields added via the
* `attachment_fields_to_edit` filter.
*/
contentRegion.view.views.set( '.attachment-compat', new media.view.AttachmentCompat( {
controller: this,
model: this.model
} ) );
},
resetRoute: function() {}
} );
function initMediaField() {
var $this = $( this ),
view = $this.data( 'view' );
if ( view ) {
return;
}
view = new MediaField( { input: this } );
$this.siblings( '.rwmb-media-view' ).remove();
$this.after( view.el );
$this.data( 'view', view );
}
function init( e ) {
$( e.target ).find( '.rwmb-file_advanced' ).each( initMediaField );
}
rwmb.$document
.on( 'mb_ready', init )
.on( 'clone', '.rwmb-file_advanced', initMediaField );
} )( jQuery, wp, _, rwmb, i18nRwmbMedia );
.select2-container {
box-sizing: border-box;
display: inline-block;
margin: 0;
position: relative;
vertical-align: middle; }
.select2-container .select2-selection--single {
box-sizing: border-box;
cursor: pointer;
display: block;
height: 28px;
user-select: none;
-webkit-user-select: none; }
.select2-container .select2-selection--single .select2-selection__rendered {
display: block;
padding-left: 8px;
padding-right: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
.select2-container .select2-selection--single .select2-selection__clear {
position: relative; }
.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
padding-right: 8px;
padding-left: 20px; }
.select2-container .select2-selection--multiple {
box-sizing: border-box;
cursor: pointer;
display: block;
min-height: 32px;
user-select: none;
-webkit-user-select: none; }
.select2-container .select2-selection--multiple .select2-selection__rendered {
display: inline-block;
overflow: hidden;
padding-left: 8px;
text-overflow: ellipsis;
white-space: nowrap; }
.select2-container .select2-search--inline {
float: left; }
.select2-container .select2-search--inline .select2-search__field {
box-sizing: border-box;
border: none;
font-size: 100%;
margin-top: 5px;
padding: 0; }
.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
-webkit-appearance: none; }
.select2-dropdown {
background-color: white;
border: 1px solid #aaa;
border-radius: 4px;
box-sizing: border-box;
display: block;
position: absolute;
left: -100000px;
width: 100%;
z-index: 1051; }
.select2-results {
display: block; }
.select2-results__options {
list-style: none;
margin: 0;
padding: 0; }
.select2-results__option {
padding: 6px;
user-select: none;
-webkit-user-select: none; }
.select2-results__option[aria-selected] {
cursor: pointer; }
.select2-container--open .select2-dropdown {
left: 0; }
.select2-container--open .select2-dropdown--above {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.select2-container--open .select2-dropdown--below {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0; }
.select2-search--dropdown {
display: block;
padding: 4px; }
.select2-search--dropdown .select2-search__field {
padding: 4px;
width: 100%;
box-sizing: border-box; }
.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
-webkit-appearance: none; }
.select2-search--dropdown.select2-search--hide {
display: none; }
.select2-close-mask {
border: 0;
margin: 0;
padding: 0;
display: block;
position: fixed;
left: 0;
top: 0;
min-height: 100%;
min-width: 100%;
height: auto;
width: auto;
opacity: 0;
z-index: 99;
background-color: #fff;
filter: alpha(opacity=0); }
.select2-hidden-accessible {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important; }
.select2-container--default .select2-selection--single {
background-color: #fff;
border: 1px solid #aaa;
border-radius: 4px; }
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: #444;
line-height: 28px; }
.select2-container--default .select2-selection--single .select2-selection__clear {
cursor: pointer;
float: right;
font-weight: bold; }
.select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #999; }
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 26px;
position: absolute;
top: 1px;
right: 1px;
width: 20px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: #888 transparent transparent transparent;
border-style: solid;
border-width: 5px 4px 0 4px;
height: 0;
left: 50%;
margin-left: -4px;
margin-top: -2px;
position: absolute;
top: 50%;
width: 0; }
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
float: left; }
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
left: 1px;
right: auto; }
.select2-container--default.select2-container--disabled .select2-selection--single {
background-color: #eee;
cursor: default; }
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
display: none; }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent #888 transparent;
border-width: 0 4px 5px 4px; }
.select2-container--default .select2-selection--multiple {
background-color: white;
border: 1px solid #aaa;
border-radius: 4px;
cursor: text; }
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
box-sizing: border-box;
list-style: none;
margin: 0;
padding: 0 5px;
width: 100%; }
.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
list-style: none; }
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
color: #999;
margin-top: 5px;
float: left; }
.select2-container--default .select2-selection--multiple .select2-selection__clear {
cursor: pointer;
float: right;
font-weight: bold;
margin-top: 5px;
margin-right: 10px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #e4e4e4;
border: 1px solid #aaa;
border-radius: 4px;
cursor: default;
float: left;
margin-right: 5px;
margin-top: 5px;
padding: 0 5px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
color: #999;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-right: 2px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
color: #333; }
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline {
float: right; }
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
margin-left: 5px;
margin-right: auto; }
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
margin-left: 2px;
margin-right: auto; }
.select2-container--default.select2-container--focus .select2-selection--multiple {
border: solid black 1px;
outline: 0; }
.select2-container--default.select2-container--disabled .select2-selection--multiple {
background-color: #eee;
cursor: default; }
.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
display: none; }
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
border-top-left-radius: 0;
border-top-right-radius: 0; }
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.select2-container--default .select2-search--dropdown .select2-search__field {
border: 1px solid #aaa; }
.select2-container--default .select2-search--inline .select2-search__field {
background: transparent;
border: none;
outline: 0;
box-shadow: none;
-webkit-appearance: textfield; }
.select2-container--default .select2-results > .select2-results__options {
max-height: 200px;
overflow-y: auto; }
.select2-container--default .select2-results__option[role=group] {
padding: 0; }
.select2-container--default .select2-results__option[aria-disabled=true] {
color: #999; }
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: #ddd; }
.select2-container--default .select2-results__option .select2-results__option {
padding-left: 1em; }
.select2-container--default .select2-results__option .select2-results__option .select2-results__group {
padding-left: 0; }
.select2-container--default .select2-results__option .select2-results__option .select2-results__option {
margin-left: -1em;
padding-left: 2em; }
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -2em;
padding-left: 3em; }
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -3em;
padding-left: 4em; }
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -4em;
padding-left: 5em; }
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -5em;
padding-left: 6em; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #5897fb;
color: white; }
.select2-container--default .select2-results__group {
cursor: default;
display: block;
padding: 6px; }
.select2-container--classic .select2-selection--single {
background-color: #f7f7f7;
border: 1px solid #aaa;
border-radius: 4px;
outline: 0;
background-image: -webkit-linear-gradient(top, white 50%, #eeeeee 100%);
background-image: -o-linear-gradient(top, white 50%, #eeeeee 100%);
background-image: linear-gradient(to bottom, white 50%, #eeeeee 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); }
.select2-container--classic .select2-selection--single:focus {
border: 1px solid #5897fb; }
.select2-container--classic .select2-selection--single .select2-selection__rendered {
color: #444;
line-height: 28px; }
.select2-container--classic .select2-selection--single .select2-selection__clear {
cursor: pointer;
float: right;
font-weight: bold;
margin-right: 10px; }
.select2-container--classic .select2-selection--single .select2-selection__placeholder {
color: #999; }
.select2-container--classic .select2-selection--single .select2-selection__arrow {
background-color: #ddd;
border: none;
border-left: 1px solid #aaa;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
height: 26px;
position: absolute;
top: 1px;
right: 1px;
width: 20px;
background-image: -webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0); }
.select2-container--classic .select2-selection--single .select2-selection__arrow b {
border-color: #888 transparent transparent transparent;
border-style: solid;
border-width: 5px 4px 0 4px;
height: 0;
left: 50%;
margin-left: -4px;
margin-top: -2px;
position: absolute;
top: 50%;
width: 0; }
.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear {
float: left; }
.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow {
border: none;
border-right: 1px solid #aaa;
border-radius: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
left: 1px;
right: auto; }
.select2-container--classic.select2-container--open .select2-selection--single {
border: 1px solid #5897fb; }
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
background: transparent;
border: none; }
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent #888 transparent;
border-width: 0 4px 5px 4px; }
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
background-image: -webkit-linear-gradient(top, white 0%, #eeeeee 50%);
background-image: -o-linear-gradient(top, white 0%, #eeeeee 50%);
background-image: linear-gradient(to bottom, white 0%, #eeeeee 50%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); }
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background-image: -webkit-linear-gradient(top, #eeeeee 50%, white 100%);
background-image: -o-linear-gradient(top, #eeeeee 50%, white 100%);
background-image: linear-gradient(to bottom, #eeeeee 50%, white 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0); }
.select2-container--classic .select2-selection--multiple {
background-color: white;
border: 1px solid #aaa;
border-radius: 4px;
cursor: text;
outline: 0; }
.select2-container--classic .select2-selection--multiple:focus {
border: 1px solid #5897fb; }
.select2-container--classic .select2-selection--multiple .select2-selection__rendered {
list-style: none;
margin: 0;
padding: 0 5px; }
.select2-container--classic .select2-selection--multiple .select2-selection__clear {
display: none; }
.select2-container--classic .select2-selection--multiple .select2-selection__choice {
background-color: #e4e4e4;
border: 1px solid #aaa;
border-radius: 4px;
cursor: default;
float: left;
margin-right: 5px;
margin-top: 5px;
padding: 0 5px; }
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
color: #888;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-right: 2px; }
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
color: #555; }
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
float: right; }
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
margin-left: 5px;
margin-right: auto; }
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
margin-left: 2px;
margin-right: auto; }
.select2-container--classic.select2-container--open .select2-selection--multiple {
border: 1px solid #5897fb; }
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0; }
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.select2-container--classic .select2-search--dropdown .select2-search__field {
border: 1px solid #aaa;
outline: 0; }
.select2-container--classic .select2-search--inline .select2-search__field {
outline: 0;
box-shadow: none; }
.select2-container--classic .select2-dropdown {
background-color: white;
border: 1px solid transparent; }
.select2-container--classic .select2-dropdown--above {
border-bottom: none; }
.select2-container--classic .select2-dropdown--below {
border-top: none; }
.select2-container--classic .select2-results > .select2-results__options {
max-height: 200px;
overflow-y: auto; }
.select2-container--classic .select2-results__option[role=group] {
padding: 0; }
.select2-container--classic .select2-results__option[aria-disabled=true] {
color: grey; }
.select2-container--classic .select2-results__option--highlighted[aria-selected] {
background-color: #3875d7;
color: white; }
.select2-container--classic .select2-results__group {
cursor: default;
display: block;
padding: 6px; }
.select2-container--classic.select2-container--open .select2-dropdown {
border-color: #5897fb; }