MDL-38016 Themes - Add a bootstrap theme to core

This theme has been contributed by:
Bas Brands <bmbrands@gmail.com>
David Scotson <david.scotson@glasgow.ac.uk>
Michael Aherne <michael.aherne@strath.ac.uk>
Stuart Lamour <thisismyrice@gmail.com>

Thanks for your hard work.
This commit is contained in:
Bas Brands 2013-04-03 08:53:27 +08:00 committed by Damyon Wiese
parent 636376947c
commit 8903b17b01
110 changed files with 15485 additions and 0 deletions

151
theme/bootstrap/README.txt Normal file
View File

@ -0,0 +1,151 @@
About this theme
================
This is the Bootstrap theme for Moodle.
* package Moodle Bootstrap theme
* copyright 2013 Bas Brands. www.sonsbeekmedia.nl
* authors Bas Brands, David Scotson
* license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
This theme has been created with the help of:
Stuart Lamour, Mark Aberdour, Paul Hibbitts, Mary Evans
This theme is based on the Twitter Bootstrap CSS framework version 2.3.
It contains all unmodified less* CSS sources from the Twitter Bootstrap CSS
framework in folder /less/bootstrap.
On top of the Bootstrap less CSS sources Moodle CSS is added to create this
theme.
HTML5 is tags are used in the /layout/general.php file. The structure of this file
provides a 2-1-3 layout when looking at your Moodle page source. This improves
accessibility and Search Engine Optimization (SEO).
*less CSS
Less CSS is a Object Oriented way of writing CSS code. All Less CSS files
for this theme are stored in the /less folder. A developer can run a command
line script to generate the single CSS file called /style/generated.css. For more
information read /less/README
JavaScript Libraries
html5shiv.js
------------
To provide backwards compatibility for HTML5 for Internet Explorer 7 (IE7) and Internet
Explorer 8 (IE8) a javascript library call /javascript/html5shiv.js was added. This
JavaScript converts HTML tags and CSS into Tag that are understood by IE7 and IE8.
The config.php makes sure these libraries are only loaded for IE7 and IE8.
bootstrapcollapse.js, bootstrapdropdown.js, bootstrapengine.js
--------------------------------------------------------------
These are the 3 out of 12 original YUI ports of the Twitter Bootstrap jQuery libraries by
Jay Shirley. The full list of the ported libraries can be found here:
https://github.com/jshirley/bootstrap/tree/master/js
moodlebootstrap.js
------------------
This file initiates the bootstrap*.js libraries.
headercollapse.js
-----------------
Workaround for the collapse button on the Moodle custom menu. Without this
Submenu items cannot be opened
Updating Twitter bootstrap and Libraries
========================================
Twitter bootstrap
-----------------
This theme uses the original unmodified version 2.3.0 Twitter bootstrap less files. These are
Object Oriented CSS files. The bootstrap repository is available on:
https://github.com/twitter/bootstrap.git
To update to the latest release of twitter bootstrap remove all files from less/bootstrap,
download the new less files and store them in less/bootstrap
Inclusion of bootstrap files is configured in less/moodle.less. To generate the new
Moodle CSS read /less/README
html5shiv.js
------------
This theme uses the original unmodified html5shiv.js JavaScript library to enable HTML5 tags in IE7 and IE8.
This library is available on:
https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js
To update to the latest release of html5shiv download and replace:
javascript/html5shiv.js
bootstrapcollapse.js, bootstrapdropdown.js, bootstrapengine.js
--------------------------------------------------------------
This them uses YUI ports of the Twitter bootstrap jQuery based libs. These ported files are available on:
https://github.com/jshirley/yui3-gallery/blob/master/src/gallery-bootstrap-collapse/js/bootstrap-collapse.js
https://github.com/jshirley/yui3-gallery/blob/master/src/gallery-bootstrap-dropdown/js/bootstrap-dropdown.js
https://github.com/jshirley/yui3-gallery/blob/master/src/gallery-bootstrap-engine/js/bootstrap-engine.js
The content of these files are slightly modified to make sure all required YUI libraries are loaded. To achieve
that the first and last line of each of these files has been modified.
The YUI port of the Twitter bootstrap libs are now longer maintained. If you need all of the Bootstrap JavaScript
functionality consider switching to the original jQuery version of these file
If you do want to update use these file locations:
javascript/bootstrap-collapse.js
javascript/bootstrap-dropdown.js
javascript/bootstrap-engine.js
Licenses & Authors
==================
Twitter Bootstrap Copyright and license
---------------------------------------
Authors: Mark Otto, Jacob Thornton
URL: http://twitter.github.com/bootstrap/
License:
Copyright 2012 Twitter, Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this work except in compliance with the License.
You may obtain a copy of the License in the LICENSE file, or at:
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Html5shiv.js
------------
Author: Sjoerd Visscher
URL: http://en.wikipedia.org/wiki/HTML5_Shiv, https://github.com/aFarkas/html5shiv
License: MIT/GPL2 Licensed
bootstrapcollapse.js, bootstrapdropdown.js, bootstrapengine.js
--------------------------------------------------------------
Author: Jay Shirley
URL: http://jshirley.github.com/bootstrap/
License:
Copyright 2012 Twitter, Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this work except in compliance with the License.
You may obtain a copy of the License in the LICENSE file, or at:
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
moodlebootstrap.js
------------------
Author: 2013 Bas Brands. www.sonsbeekmedia.nl
license: http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later

166
theme/bootstrap/config.php Normal file
View File

@ -0,0 +1,166 @@
<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* Configuration for Moodle's bootstrap theme.
*
* DO NOT MODIFY THIS THEME!
* COPY IT FIRST, THEN RENAME THE COPY AND MODIFY IT INSTEAD.
*
* For full information about creating Moodle themes, see:
* http://docs.moodle.org/dev/Themes_2.0
*
* @package Moodle Bootstrap theme
* @copyright 2013 Bas Brands. www.sonsbeekmedia.nl
* @authors Bas Brands, David Scotson
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
$THEME->doctype = 'html5';
$THEME->yuicssmodules = array();
$THEME->name = 'bootstrap';
$THEME->parents = array('');
$THEME->sheets = array('generated');
$THEME->supportscssoptimisation = false;
$THEME->editor_sheets = array('editor');
$THEME->plugins_exclude_sheets = array(
'block' => array(
'settings',
'navigation',
'html'
),
'gradereport' => array(
'grader',
),
);
$THEME->rendererfactory = 'theme_overridden_renderer_factory';
$THEME->layouts = array(
'base' => array(
'file' => 'general.php',
'regions' => array('side-pre', 'side-post'),
'defaultregion' => 'side-pre',
),
'standard' => array(
'file' => 'general.php',
'regions' => array('side-pre', 'side-post'),
'defaultregion' => 'side-pre',
),
'course' => array(
'file' => 'general.php',
'regions' => array('side-pre', 'side-post'),
'defaultregion' => 'side-pre'
),
'coursecategory' => array(
'file' => 'general.php',
'regions' => array('side-pre', 'side-post'),
'defaultregion' => 'side-pre',
),
'incourse' => array(
'file' => 'general.php',
'regions' => array('side-pre', 'side-post'),
'defaultregion' => 'side-pre',
),
'frontpage' => array(
'file' => 'general.php',
'regions' => array('side-pre'),
'defaultregion' => 'side-pre',
'options' => array('nonavbar'=>true),
),
'admin' => array(
'file' => 'general.php',
'regions' => array('side-pre'),
'defaultregion' => 'side-pre',
),
'mydashboard' => array(
'file' => 'general.php',
'regions' => array('side-pre', 'side-post'),
'defaultregion' => 'side-pre',
'options' => array('langmenu'=>true),
),
'mypublic' => array(
'file' => 'general.php',
'regions' => array('side-pre', 'side-post'),
'defaultregion' => 'side-pre',
),
'login' => array(
'file' => 'general.php',
'regions' => array(),
'options' => array('langmenu'=>true),
'options' => array('nonavbar'=>true, 'noheader'=>true),
),
'popup' => array(
'file' => 'general.php',
'regions' => array(),
'options' => array('nofooter'=>true, 'noblocks'=>true, 'nonavbar'=>true),
),
'frametop' => array(
'file' => 'general.php',
'regions' => array(),
'options' => array('nofooter'=>true),
),
'maintenance' => array(
'file' => 'general.php',
'regions' => array(),
'options' => array('nofooter'=>true, 'nonavbar'=>true),
),
'embedded' => array(
'theme' => 'canvas',
'file' => 'embedded.php',
'regions' => array(),
'options' => array('nofooter'=>true, 'nonavbar'=>true),
),
'print' => array(
'file' => 'general.php',
'regions' => array(),
'options' => array('nofooter'=>true, 'nonavbar'=>false, 'noblocks'=>true),
),
'redirect' => array(
'file' => 'general.php',
'regions' => array(),
'options' => array('nofooter'=>true, 'nonavbar'=>false, 'noblocks'=>true),
),
'report' => array(
'file' => 'general.php',
'regions' => array('side-pre'),
'defaultregion' => 'side-pre',
),
// The pagelayout used for safebrowser and securewindow.
'secure' => array(
'file' => 'general.php',
'regions' => array('side-pre', 'side-post'),
'defaultregion' => 'side-pre',
'options' => array('nofooter'=>true, 'nonavbar'=>true, 'nocustommenu'=>true,
'nologinlinks'=>true, 'nocourseheaderfooter'=>true),
),
);
$THEME->javascripts = array(
'bootstrapengine',
'moodlebootstrap',
'bootstrapcollapse',
'bootstrapdropdown',
'headercollapse',
);
if ( strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 8') || strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 7') ) {
$THEME->javascripts[] = 'html5shiv';
}

View File

@ -0,0 +1,224 @@
YUI.add('gallery-bootstrap-collapse', function(Y) {
/**
A Plugin which provides collapsing/expanding behaviors on a Node with
compatible syntax and markup from Twitter's Bootstrap project.
@module gallery-bootstrap-collapse
**/
/**
A Plugin which provides collapsing and expanding behaviors on a Node with
compatible syntax and markup from Twitter's Bootstrap project.
It possible to have dynamic behaviors without incorporating any
JavaScript by setting <code>data-toggle=collapse</code> on any element.
However, it can be manually plugged into any node or node list.
@example
var node = Y.one('.someNode');
node.plug( Y.Bootstrap.Collapse, config );
node.collapse.show();
@class Bootstrap.Collapse
**/
function CollapsePlugin(config) {
CollapsePlugin.superclass.constructor.apply(this, arguments);
}
CollapsePlugin.NAME = 'Bootstrap.Collapse';
CollapsePlugin.NS = 'collapse';
Y.extend(CollapsePlugin, Y.Plugin.Base, {
defaults : {
duration : 0.25,
easing : 'ease-in',
showClass : 'in',
hideClass : 'out',
groupSelector : '> .accordion-group > .in'
},
transitioning: false,
initializer : function(config) {
this._node = config.host;
this.config = Y.mix( config, this.defaults );
this.publish('show', { preventable : true, defaultFn : this.show });
this.publish('hide', { preventable : true, defaultFn : this.hide });
this._node.on('click', this.toggle, this);
},
_getTarget: function() {
var node = this._node,
container;
if ( node.getData('target') ) {
container = Y.one( node.getData('target') );
}
else if ( node.getAttribute('href').indexOf('#') >= 0 ) {
Y.log('No target, looking at href: ' + node.getAttribute('href'), 'debug', 'Bootstrap.Collapse');
container = Y.one( node.getAttribute('href').substr( node.getAttribute('href').indexOf('#') ) );
}
return container;
},
/**
* @method hide
* @description Hide the collapsible target, specified by the host's
* <code>data-target</code> or <code>href</code> attribute.
*/
hide: function() {
var showClass = this.config.showClass,
hideClass = this.config.hideClass,
node = this._getTarget();
if ( this.transitioning ) {
return;
}
if ( node ) {
this._hideElement(node);
}
},
/**
* @method show
* @description Show the collapsible target, specified by the host's
* <code>data-target</code> or <code>href</code> attribute.
*/
show: function() {
var showClass = this.config.showClass,
hideClass = this.config.hideClass,
node = this._getTarget(),
host = this._node,
self = this,
parent,
group_selector = this.config.groupSelector;
if ( this.transitioning ) {
return;
}
if ( host.getData('parent') ) {
parent = Y.one( host.getData('parent') );
if ( parent ) {
parent.all(group_selector).each( function(el) {
Y.log('Hiding element: ' + el, 'debug', 'Bootstrap.Collapse');
self._hideElement(el);
});
}
}
this._showElement(node);
},
/**
@method toggle
@description Toggle the state of the collapsible target, specified
by the host's <code>data-target</code> or <code>href</code>
attribute. Calls the <code>show</code> or <code>hide</code> method.
**/
toggle : function(e) {
if ( e && Y.Lang.isFunction(e.preventDefault) ) {
e.preventDefault();
}
var target = this._getTarget();
if ( target.hasClass( this.config.showClass ) ) {
this.fire('hide');
} else {
this.fire('show');
}
},
/**
@method _transition
@description Handles the transition between showing and hiding.
@protected
@param node {Node} node to apply transitions to
@param method {String} 'hide' or 'show'
**/
_transition : function(node, method) {
var self = this,
config = this.config,
duration = config.duration,
easing = config.easing,
// If we are hiding, then remove the show class.
removeClass = method === 'hide' ? config.showClass : config.hideClass,
// And if we are hiding, add the hide class.
addClass = method === 'hide' ? config.hideClass : config.showClass,
to_height = method === 'hide' ? 0 : null,
event = method === 'hide' ? 'hidden' : 'shown',
complete = function() {
node.removeClass(removeClass);
node.addClass(addClass);
self.transitioning = false;
this.fire( event );
};
if ( to_height === null ) {
to_height = 0;
node.all('> *').each(function(el) {
to_height += el.get('scrollHeight');
});
}
this.transitioning = true;
node.transition({
height : to_height +'px',
duration : duration,
easing : easing
}, complete);
},
/**
@method _hideElement
@description Calls the <code>_transition</code> method to hide a node.
@protected
@param node {Node} node to hide.
**/
_hideElement : function(node) {
this._transition(node, 'hide');
/*
var showClass = this.showClass,
hideClass = this.hideClass;
node.removeClass(showClass);
node.addClass(hideClass);
*/
},
/**
@method _showElement
@description Calls the <code>_transition</code> method to show a node.
@protected
@param node {Node} node to show.
**/
_showElement : function(node) {
this._transition(node, 'show');
/*
var showClass = this.showClass,
hideClass = this.hideClass;
node.removeClass(hideClass);
node.addClass(showClass);
*/
}
});
Y.namespace('Bootstrap').Collapse = CollapsePlugin;
}, '@VERSION@' ,{requires:['plugin','transition','event','event-delegate']});
;

View File

@ -0,0 +1,115 @@
YUI.add('gallery-bootstrap-dropdown', function(Y) {
/**
A Plugin which provides dropdown behaviors for dropdown buttons and menu
groups. This utilizes the markup from the Twitter Bootstrap Project.
@module gallery-bootstrap-dropdown
**/
/**
A Plugin which provides dropdown behaviors for dropdown buttons and menu
groups. This utilizes the markup from the Twitter Bootstrap Project.
To automatically gain this functionality, you can simply add the
<code>data-toggle=dropdown</code> attribute to any element.
It can also be plugged into any node or node list.
@example
var node = Y.one('.someNode');
node.plug( Y.Bootstrap.Dropdown );
node.dropdown.show();
@class Bootstrap.Dropdown
**/
var NS = Y.namespace('Bootstrap');
function DropdownPlugin(config) {
DropdownPlugin.superclass.constructor.apply(this, arguments);
}
DropdownPlugin.NAME = 'Bootstrap.Dropdown';
DropdownPlugin.NS = 'dropdown';
Y.extend( DropdownPlugin, Y.Plugin.Base, {
defaults : {
className : 'open',
target : 'target',
selector : ''
},
initializer : function(config) {
this._node = config.host;
this.config = Y.mix( config, this.defaults );
this.publish('show', { preventable : true, defaultFn : this.show });
this.publish('hide', { preventable : true, defaultFn : this.hide });
this._node.on('click', this.toggle, this);
},
toggle : function() {
var target = this.getTarget(),
className = this.config.className;
target.toggleClass( className );
target.once('clickoutside', function(e) {
target.toggleClass( className );
});
},
show : function() {
this.getTarget().addClass( this.config.className );
},
hide : function() {
this.getTarget().removeClass( this.config.className );
},
open : function() {
this.getTarget().addClass( this.config.className );
},
close : function() {
this.getTarget().removeClass( this.config.className );
},
/**
@method getTarget
@description Fetches a Y.NodeList or Y.Node that should be used to modify class names
**/
getTarget : function() {
var node = this._node,
selector = node.getData( this.config.target ),
target;
if ( !selector ) {
selector = node.getAttribute('href');
selector = target && target.replace(/.*(?=#[^\s]*$)/, ''); //strip for ie7
}
target = Y.all(selector);
if ( target.size() === 0 ) {
target = node.get('parentNode');
}
return target;
}
});
NS.Dropdown = DropdownPlugin;
NS.dropdown_delegation = function() {
Y.delegate('click', function(e) {
var target = e.currentTarget;
e.preventDefault();
if ( typeof e.target.dropdown === 'undefined' ) {
target.plug( DropdownPlugin );
target.dropdown.toggle();
}
}, document.body, '*[data-toggle=dropdown]' );
};
}, '@VERSION@' ,{requires:['plugin','event','event-outside']});
;

View File

@ -0,0 +1,274 @@
YUI.add('gallery-bootstrap-engine', function(Y) {
/**
* Bootstrap Engine for Plug and Play widgets. This class is meant to be used in
* conjuntion with the Injection Engine (gallery-bootstrap-engine). It facilitates the use of
* an iframe as a sandbox to execute certain tasks and/or a presention element.
*
* @module gallery-bootstrap-engine
* @requires node, base-base
* @class Y.BootstrapEngine
* @param config {Object} Configuration object
* @extends Y.Base
* @constructor
*/
///////////////////////////////////////////////////////////////////////////
//
// Private shorthands, constants and variables
//
///////////////////////////////////////////////////////////////////////////
var ATTR_HOST = 'host';
///////////////////////////////////////////////////////////////////////////
//
// Class definition
//
///////////////////////////////////////////////////////////////////////////
function BootstrapEngine () {
BootstrapEngine.superclass.constructor.apply(this, arguments);
}
Y.mix(BootstrapEngine, {
/**
* The identity of the class.
* @property BootstrapEngine.NAME
* @type string
* @static
* @final
* @readOnly
* @default 'bootstrap'
*/
NAME: 'bootstrap',
/**
* Static property used to define the default attribute configuration of
* the class.
* @property BootstrapEngine.ATTRS
* @type Object
* @protected
* @static
*/
ATTRS: {
/**
* @attribute container
* @type {Selector|Node}
* @writeOnce
* @description selector or node for the iframe's container. This is relative to the parent document.
*/
container: {
getter: function (v) {
var host = this.get(ATTR_HOST);
return host && host.one( v );
}
},
/**
* @attribute iframe
* @type {Node}
* @readyOnly
* @description Node reference to the iframe on the parent document.
*/
iframe: {
getter: function () {
var c = this.get('container');
return c && c.one('iframe' );
}
},
/**
* @attribute host
* @type {Object}
* @readyOnly
* @description A "Y" reference bound to the parent document.
*/
host: {
readyOnly: true
},
/**
* @attribute ready
* @type {Boolean}
* @readyOnly
* @description A "Y" reference bound to the parent document.
*/
ready: {
value: false,
readyOnly: true
}
}
});
Y.extend(BootstrapEngine, Y.Base, {
/**
* Any extra YUI module that you want to use by default in HOST YUI instance.
* "node" module will be added automatically since it's required by bootstrap.
* @property EXTRAS
* @type Array
* @default []
*/
EXTRAS: [],
/**
* Construction logic executed during Bootstrap Engine instantiation.
*
* @method initializer
* @param cfg {Object} Initial configuration
* @protected
*/
initializer: function () {
var instance = this,
parent, win, doc,
use = Y.Array(instance.EXTRAS),
host,
callBootFn = function () {
// finishing the initialization process async to facilitate
// addons to hook into _boot/_init/_bind/_ready if needed.
// todo: after migrating to 3.4 this is not longer needed, and we can use initializer and destroyer
// in each extension
Y.later(0, instance, function() {
instance._boot();
});
};
try {
parent = Y.config.win.parent;
win = parent && parent.window;
doc = win && win.document;
} catch(e) {
Y.log ('Parent window is not available or is a different domain', 'warn', 'bootstrap');
}
Y.log ('Initialization', 'info', 'bootstrap');
// parent is optional to facilitate testing and headless execution
if (parent && win && doc) {
host = YUI({
bootstrap: false,
win: win,
doc: doc
});
use.push('node', function() {
callBootFn();
});
// Creating a new YUI instance bound to the parent window
instance._set(ATTR_HOST, host.use.apply(host, use));
} else {
callBootFn();
}
},
/**
* Basic initialization routine, styling the iframe, binding events and
* connecting the bootstrap engine with the injection engine.
*
* @method _boot
* @protected
*/
_boot: function () {
var instance = this,
auto;
Y.log ('Boot', 'info', 'bootstrap');
// connecting with the injection engine before doing anything else
auto = instance._connect();
// adjust the iframe container in preparation for the first display action
instance._styleIframe();
// create some objects and markup
instance._init();
// binding some extra events
instance._bind();
// if the connect process wants to automatically execute the _ready, it should returns true.
if (auto) {
// connecting the bootstrap with the injection engine
instance._ready();
}
// marking the system as ready
instance._set('ready', true);
},
/**
* Connects the bootstrap with the injection engine running in the parent window. This method
* defines the hand-shake process between them. This method is meant to be called by
* the bootstrap engine _init method to start the connection.
*
* @method _connect
* @protected
*/
_connect: function () {
var guid = Y.config.guid, // injection engine guid value
host = this.get(ATTR_HOST),
pwin = host && host.config.win,
// getting a reference to the parent window callback function to notify
// to the injection engine that the bootstrap is ready
callback = guid && pwin && pwin.YUI && pwin.YUI.Env[guid];
Y.log ('Bootstrap connect', 'info', 'bootstrap');
// connecting bootstrap with the injection engines
return ( callback ? callback ( this ) : false );
},
/**
* Basic initialization routine, usually to create markup, new objects and attributes, etc.
* Overrides/Extends this prototype method to do your mojo.
*
* @method _init
* @protected
*/
_init: function () {
Y.log ('Init bootstrap', 'info', 'bootstrap');
},
/**
* Defines the binding logic for the bootstrap engine, listening for some attributes
* that might change, and defining the set of events that can be exposed to the injection engine.
* Overrides/Extends this prototype method to do your mojo.
*
* @method _bind
* @protected
*/
_bind: function () {
Y.log ('Binding bootstrap', 'info', 'bootstrap');
},
/**
* This method will be called only if the connect response with "true", you can use this
* to control the state of the initialization from the injection engine since it might
* take some time to load the stuff in the iframe, and the user might interact with the page
* invalidating the initialization routine.
* Overrides/Extends this prototype method to do your mojo.
*
* @method _ready
* @protected
*/
_ready : function () {
Y.log ('Bootstrap is ready', 'info', 'bootstrap');
},
/**
* The iframe that holds the bootstrap engine sometimes is used as a UI overlay.
* In this case, you can style it through this method. By default, it will set
* border, frameBorder, marginWidth, marginHeight, leftMargin and topMargin to
* cero, and allowTransparency to true.
*
* @method _styleIframe
* @protected
*/
_styleIframe: function () {
var iframe = this.get('iframe');
// making the iframe optional to facilitate tests
if (iframe) {
Y.log ('Styling the iframe', 'info', 'bootstrap');
Y.each (['border', 'marginWidth', 'marginHeight', 'leftMargin', 'topMargin'], function (name) {
iframe.setAttribute(name, 0);
});
}
}
});
Y.BootstrapEngine = BootstrapEngine;
}, '@VERSION@' ,{requires:['node','base-base']});
;

View File

@ -0,0 +1,10 @@
YUI().use('node', function(Y) {
var toggleShow = function(e) {
// Toggle the active class on both the clicked .btn-navbar and the .nav-collapse.
// Our CSS will set the height for these
var togglemenu = Y.one('.nav-collapse');
togglemenu.toggleClass('active');
this.toggleClass('active');
};
Y.delegate('click', toggleShow, Y.config.doc, '.btn-navbar');
});

301
theme/bootstrap/javascript/html5shiv.js vendored Normal file
View File

@ -0,0 +1,301 @@
/**
* @preserve HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
*/
;(function(window, document) {
/*jshint evil:true */
/** version */
var version = '3.6.2';
/** Preset options */
var options = window.html5 || {};
/** Used to skip problem elements */
var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i;
/** Not all elements can be cloned in IE **/
var saveClones = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i;
/** Detect whether the browser supports default html5 styles */
var supportsHtml5Styles;
/** Name of the expando, to work with multiple documents or to re-shiv one document */
var expando = '_html5shiv';
/** The id for the the documents expando */
var expanID = 0;
/** Cached data for each document */
var expandoData = {};
/** Detect whether the browser supports unknown elements */
var supportsUnknownElements;
(function() {
try {
var a = document.createElement('a');
a.innerHTML = '<xyz></xyz>';
//if the hidden property is implemented we can assume, that the browser supports basic HTML5 Styles
supportsHtml5Styles = ('hidden' in a);
supportsUnknownElements = a.childNodes.length == 1 || (function() {
// assign a false positive if unable to shiv
(document.createElement)('a');
var frag = document.createDocumentFragment();
return (
typeof frag.cloneNode == 'undefined' ||
typeof frag.createDocumentFragment == 'undefined' ||
typeof frag.createElement == 'undefined'
);
}());
} catch(e) {
// assign a false positive if detection fails => unable to shiv
supportsHtml5Styles = true;
supportsUnknownElements = true;
}
}());
/*--------------------------------------------------------------------------*/
/**
* Creates a style sheet with the given CSS text and adds it to the document.
* @private
* @param {Document} ownerDocument The document.
* @param {String} cssText The CSS text.
* @returns {StyleSheet} The style element.
*/
function addStyleSheet(ownerDocument, cssText) {
var p = ownerDocument.createElement('p'),
parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement;
p.innerHTML = 'x<style>' + cssText + '</style>';
return parent.insertBefore(p.lastChild, parent.firstChild);
}
/**
* Returns the value of `html5.elements` as an array.
* @private
* @returns {Array} An array of shived element node names.
*/
function getElements() {
var elements = html5.elements;
return typeof elements == 'string' ? elements.split(' ') : elements;
}
/**
* Returns the data associated to the given document
* @private
* @param {Document} ownerDocument The document.
* @returns {Object} An object of data.
*/
function getExpandoData(ownerDocument) {
var data = expandoData[ownerDocument[expando]];
if (!data) {
data = {};
expanID++;
ownerDocument[expando] = expanID;
expandoData[expanID] = data;
}
return data;
}
/**
* returns a shived element for the given nodeName and document
* @memberOf html5
* @param {String} nodeName name of the element
* @param {Document} ownerDocument The context document.
* @returns {Object} The shived element.
*/
function createElement(nodeName, ownerDocument, data){
if (!ownerDocument) {
ownerDocument = document;
}
if(supportsUnknownElements){
return ownerDocument.createElement(nodeName);
}
if (!data) {
data = getExpandoData(ownerDocument);
}
var node;
if (data.cache[nodeName]) {
node = data.cache[nodeName].cloneNode();
} else if (saveClones.test(nodeName)) {
node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode();
} else {
node = data.createElem(nodeName);
}
// Avoid adding some elements to fragments in IE < 9 because
// * Attributes like `name` or `type` cannot be set/changed once an element
// is inserted into a document/fragment
// * Link elements with `src` attributes that are inaccessible, as with
// a 403 response, will cause the tab/window to crash
// * Script elements appended to fragments will execute when their `src`
// or `text` property is set
return node.canHaveChildren && !reSkip.test(nodeName) ? data.frag.appendChild(node) : node;
}
/**
* returns a shived DocumentFragment for the given document
* @memberOf html5
* @param {Document} ownerDocument The context document.
* @returns {Object} The shived DocumentFragment.
*/
function createDocumentFragment(ownerDocument, data){
if (!ownerDocument) {
ownerDocument = document;
}
if(supportsUnknownElements){
return ownerDocument.createDocumentFragment();
}
data = data || getExpandoData(ownerDocument);
var clone = data.frag.cloneNode(),
i = 0,
elems = getElements(),
l = elems.length;
for(;i<l;i++){
clone.createElement(elems[i]);
}
return clone;
}
/**
* Shivs the `createElement` and `createDocumentFragment` methods of the document.
* @private
* @param {Document|DocumentFragment} ownerDocument The document.
* @param {Object} data of the document.
*/
function shivMethods(ownerDocument, data) {
if (!data.cache) {
data.cache = {};
data.createElem = ownerDocument.createElement;
data.createFrag = ownerDocument.createDocumentFragment;
data.frag = data.createFrag();
}
ownerDocument.createElement = function(nodeName) {
//abort shiv
if (!html5.shivMethods) {
return data.createElem(nodeName);
}
return createElement(nodeName, ownerDocument, data);
};
ownerDocument.createDocumentFragment = Function('h,f', 'return function(){' +
'var n=f.cloneNode(),c=n.createElement;' +
'h.shivMethods&&(' +
// unroll the `createElement` calls
getElements().join().replace(/\w+/g, function(nodeName) {
data.createElem(nodeName);
data.frag.createElement(nodeName);
return 'c("' + nodeName + '")';
}) +
');return n}'
)(html5, data.frag);
}
/*--------------------------------------------------------------------------*/
/**
* Shivs the given document.
* @memberOf html5
* @param {Document} ownerDocument The document to shiv.
* @returns {Document} The shived document.
*/
function shivDocument(ownerDocument) {
if (!ownerDocument) {
ownerDocument = document;
}
var data = getExpandoData(ownerDocument);
if (html5.shivCSS && !supportsHtml5Styles && !data.hasCSS) {
data.hasCSS = !!addStyleSheet(ownerDocument,
// corrects block display not defined in IE6/7/8/9
'article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}' +
// adds styling not present in IE6/7/8/9
'mark{background:#FF0;color:#000}' +
// hides non-rendered elements
'template{display:none}'
);
}
if (!supportsUnknownElements) {
shivMethods(ownerDocument, data);
}
return ownerDocument;
}
/*--------------------------------------------------------------------------*/
/**
* The `html5` object is exposed so that more elements can be shived and
* existing shiving can be detected on iframes.
* @type Object
* @example
*
* // options can be changed before the script is included
* html5 = { 'elements': 'mark section', 'shivCSS': false, 'shivMethods': false };
*/
var html5 = {
/**
* An array or space separated string of node names of the elements to shiv.
* @memberOf html5
* @type Array|String
*/
'elements': options.elements || 'abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary template time video',
/**
* current version of html5shiv
*/
'version': version,
/**
* A flag to indicate that the HTML5 style sheet should be inserted.
* @memberOf html5
* @type Boolean
*/
'shivCSS': (options.shivCSS !== false),
/**
* Is equal to true if a browser supports creating unknown/HTML5 elements
* @memberOf html5
* @type boolean
*/
'supportsUnknownElements': supportsUnknownElements,
/**
* A flag to indicate that the document's `createElement` and `createDocumentFragment`
* methods should be overwritten.
* @memberOf html5
* @type Boolean
*/
'shivMethods': (options.shivMethods !== false),
/**
* A string to describe the type of `html5` object ("default" or "default print").
* @memberOf html5
* @type String
*/
'type': 'default',
// shivs the document according to the specified `html5` object options
'shivDocument': shivDocument,
//creates a shived element
createElement: createElement,
//creates a shived documentFragment
createDocumentFragment: createDocumentFragment
};
/*--------------------------------------------------------------------------*/
// expose html5
window.html5 = html5;
// shiv the document
shivDocument(document);
}(this, document));

View File

@ -0,0 +1,28 @@
YUI().use('gallery-bootstrap');
YUI.add('gallery-bootstrap', function(Y) {
var NS = Y.namespace('Bootstrap');
NS.initializer = function(e) {
//console.log('initializer!');
NS.dropdown_delegation();
NS.expandable_delegation();
};
NS.expandable_delegation = function() {
Y.delegate('click', function(e) {
e.preventDefault();
var target = e.currentTarget;
if ( ! target.collapse ) {
target.plug( Y.Bootstrap.Collapse );
}
target.collapse.toggle();
}, document.body, '*[data-toggle="collapse"]' );
};
Y.on('domready', NS.initializer);
}, '@VERSION@' ,{requires:[ 'gallery-bootstrap-dropdown', 'gallery-bootstrap-collapse', 'gallery-bootstrap-engine']});
;

View File

@ -0,0 +1,70 @@
<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* Strings for component 'theme_bootstrap', language 'en', branch 'MOODLE_23_STABLE'
*
* @package Bootstrap theme
* @copyright 2012 Bas Brands, www.basbrands.nl
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
$string['pluginname'] = 'Bootstrap';
$string['region-side-post'] = 'Right';
$string['region-side-pre'] = 'Left';
$string['choosereadme'] = '
<div class="clearfix"><div class="theme_screenshot"><h2>Bootstrap</h2>
<img class=img-polaroid src="bootstrap/pix/screenshot.jpg" />
<h3>Theme Credits</h3>
<p>
<h3>Moodle twitter Bootstrap theme</h3>
<p>
This theme is based on the Bootstrap CSS framework, version 2.3
</p>
<p>
<a href="http://getbootstrap.com">http://getbootstrap.com</a>
</p>
<p>
This is a GPL theme that is available on GitHub:
</p>
<p>
<a href=https://github.com/bmbrands/theme_bootstrap">https://github.com/bmbrands/theme_bootstrap</a>
</p>
<p>
Feel free to modify / improve / share
</p>
<p>
This theme has been created with the help of:
Stuart Lamour, Mark Aberdour, Paul Hibbitts, Mary Evans
</p>
<p>
Authors: Bas Brands, David Scotson<br>
Contact: bas@sonsbeekmedia.nl<br>
Website: <a href="http://www.basbrands.nl">www.basbrands.nl</a><br>
</p>
<h3>Reporting bugs</h3>
<p>You can report bugs on the <a href="https://github.com/bmbrands/theme_bootstrap/issues">github page</a> for this theme or
on the Moodle tracker</p>
<h3>More information</h3>
<ul>
<li><a href="https://github.com/bmbrands/theme_bootstrap/wiki">Wiki page for this theme</a>
<li><a href="http://docs.moodle.org/23/en/bootstrap-Theme">Bootstrap on Moodle docs</a></li>
<li><a href="http://theming.sonsbeekmedia.nl/">Theme testing playground </a></li>
</ul>';

View File

@ -0,0 +1,171 @@
<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
$hasheading = ($PAGE->heading);
$hasnavbar = (empty($PAGE->layout_options['nonavbar']) && $PAGE->has_navbar());
$hasfooter = (empty($PAGE->layout_options['nofooter']));
$hasheader = (empty($PAGE->layout_options['noheader']));
$hassidepre = (empty($PAGE->layout_options['noblocks']) && $PAGE->blocks->region_has_content('side-pre', $OUTPUT));
$hassidepost = (empty($PAGE->layout_options['noblocks']) && $PAGE->blocks->region_has_content('side-post', $OUTPUT));
$showsidepre = ($hassidepre && !$PAGE->blocks->region_completely_docked('side-pre', $OUTPUT));
$showsidepost = ($hassidepost && !$PAGE->blocks->region_completely_docked('side-post', $OUTPUT));
$custommenu = $OUTPUT->custom_menu();
$hascustommenu = (empty($PAGE->layout_options['nocustommenu']) && !empty($custommenu));
$courseheader = $coursecontentheader = $coursecontentfooter = $coursefooter = '';
if (empty($PAGE->layout_options['nocourseheaderfooter'])) {
$courseheader = $OUTPUT->course_header();
$coursecontentheader = $OUTPUT->course_content_header();
if (empty($PAGE->layout_options['nocoursefooter'])) {
$coursecontentfooter = $OUTPUT->course_content_footer();
$coursefooter = $OUTPUT->course_footer();
}
}
$layout = 'pre-and-post';
if ($showsidepre && !$showsidepost) {
if (!right_to_left()) {
$layout = 'side-pre-only';
} else {
$layout = 'side-post-only';
}
} else if ($showsidepost && !$showsidepre) {
if (!right_to_left()) {
$layout = 'side-post-only';
} else {
$layout = 'side-pre-only';
}
} else if (!$showsidepost && !$showsidepre) {
$layout = 'content-only';
}
$bodyclasses[] = $layout;
echo $OUTPUT->doctype() ?>
<html <?php echo $OUTPUT->htmlattributes() ?>>
<head>
<title><?php echo $PAGE->title ?></title>
<link rel="shortcut icon" href="<?php echo $OUTPUT->pix_url('favicon', 'theme')?>" />
<?php echo $OUTPUT->standard_head_html() ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body id="<?php p($PAGE->bodyid) ?>" class="<?php p($PAGE->bodyclasses.' '.join($bodyclasses)) ?>">
<?php echo $OUTPUT->standard_top_of_body_html() ?>
<header role="banner" class="navbar navbar-fixed-top">
<nav role="navigation" class="navbar-inner">
<div class="container-fluid">
<a class="brand" href="<?php echo $CFG->wwwroot;?>"><?php echo $SITE->shortname; ?></a>
<a class="btn btn-navbar" data-toggle="workaround-collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<?php if ($hascustommenu) {
echo $custommenu;
} ?>
<ul class="nav pull-right">
<li><?php echo $PAGE->headingmenu ?></li>
<li class="navbar-text"><?php echo $OUTPUT->login_info() ?></li>
</ul>
</div>
</div>
</nav>
</header>
<div id="page" class="container-fluid">
<?php if ($hasheader) { ?>
<header id="page-header" class="clearfix">
<?php if ($hasnavbar) { ?>
<nav class="breadcrumb-button"><?php echo $PAGE->button; ?></nav>
<?php echo $OUTPUT->navbar(); ?>
<?php } ?>
<h1><?php echo $PAGE->heading ?></h1>
<?php if (!empty($courseheader)) { ?>
<div id="course-header"><?php echo $courseheader; ?></div>
<?php } ?>
</header>
<?php } ?>
<div id="page-content" class="row-fluid">
<?php if ($layout === 'pre-and-post') { ?>
<div id="region-bs-main-and-pre" class="span9">
<div class="row-fluid">
<section id="region-bs-main" class="span8 pull-right">
<?php } else if ($layout === 'side-post-only') { ?>
<section id="region-bs-main" class="span9">
<?php } else if ($layout === 'side-pre-only') { ?>
<section id="region-bs-main" class="span9 pull-right">
<?php } else if ($layout === 'content-only') { ?>
<section id="region-bs-main" class="span12">
<?php } ?>
<?php echo $coursecontentheader; ?>
<?php echo $OUTPUT->main_content() ?>
<?php echo $coursecontentfooter; ?>
</section>
<?php if ($layout !== 'content-only') {
if ($layout === 'pre-and-post') { ?>
<aside id="region-pre" class="span4 block-region desktop-first-column region-content">
<?php } else if ($layout === 'side-pre-only') { ?>
<aside id="region-pre" class="span3 block-region desktop-first-column region-content">
<?php } ?>
<?php
if (!right_to_left()) {
echo $OUTPUT->blocks_for_region('side-pre');
} else if ($hassidepost) {
echo $OUTPUT->blocks_for_region('side-post');
}
?>
</aside>
<?php if ($layout === 'pre-and-post') {
?></div></div><?php // Close row-fluid and span9.
}
if ($layout === 'side-post-only' OR $layout === 'pre-and-post') { ?>
<aside id="region-post" class="span3 block-region region-content">
<?php if (!right_to_left()) {
echo $OUTPUT->blocks_for_region('side-post');
} else {
echo $OUTPUT->blocks_for_region('side-pre');
} ?>
</aside>
<?php } ?>
<?php } ?>
</div>
<footer id="page-footer">
<p class="helplink"><?php echo page_doc_link(get_string('moodledocslink')) ?></p>
<?php echo $OUTPUT->standard_footer_html(); ?>
</footer>
<?php echo $OUTPUT->standard_end_of_body_html() ?>
</div>
</body>
</html>

View File

@ -0,0 +1,19 @@
If you want to make changes to the .css generated from these .less files then you
need to install recess (https://github.com/twitter/recess) to compile the .less files,
then run these commands in the bootstrap/less/ folder:
recess --compile --compress moodle.less > ../style/generated.css
You can add --watch to make sure it updates every time you make a change.
And for the subset of styles of interest to the TinyMCE editor:
recess --compile --compress editor.less > ../style/editor.css
Non-command line options for .less compilation are available, see their github for more info.
If the compilation is failing and you're not getting any useful error message, try using lessc instead i.e.:
lessc moodle.less
This is the same tool that's getting called by recess, but the errors seems better if you go direct.

View File

@ -0,0 +1,34 @@
//
// Accordion
// --------------------------------------------------
// Parent container
.accordion {
margin-bottom: @baseLineHeight;
}
// Group == heading + body
.accordion-group {
margin-bottom: 2px;
border: 1px solid #e5e5e5;
.border-radius(@baseBorderRadius);
}
.accordion-heading {
border-bottom: 0;
}
.accordion-heading .accordion-toggle {
display: block;
padding: 8px 15px;
}
// General toggle styles
.accordion-toggle {
cursor: pointer;
}
// Inner needs the styles because you can't animate properly with any styles on the element
.accordion-inner {
padding: 9px 15px;
border-top: 1px solid #e5e5e5;
}

View File

@ -0,0 +1,79 @@
//
// Alerts
// --------------------------------------------------
// Base styles
// -------------------------
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: @baseLineHeight;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: @warningBackground;
border: 1px solid @warningBorder;
.border-radius(@baseBorderRadius);
}
.alert,
.alert h4 {
// Specified for the h4 to prevent conflicts of changing @headingsColor
color: @warningText;
}
.alert h4 {
margin: 0;
}
// Adjust close link position
.alert .close {
position: relative;
top: -2px;
right: -21px;
line-height: @baseLineHeight;
}
// Alternate styles
// -------------------------
.alert-success {
background-color: @successBackground;
border-color: @successBorder;
color: @successText;
}
.alert-success h4 {
color: @successText;
}
.alert-danger,
.alert-error {
background-color: @errorBackground;
border-color: @errorBorder;
color: @errorText;
}
.alert-danger h4,
.alert-error h4 {
color: @errorText;
}
.alert-info {
background-color: @infoBackground;
border-color: @infoBorder;
color: @infoText;
}
.alert-info h4 {
color: @infoText;
}
// Block alerts
// -------------------------
.alert-block {
padding-top: 14px;
padding-bottom: 14px;
}
.alert-block > p,
.alert-block > ul {
margin-bottom: 0;
}
.alert-block p + p {
margin-top: 5px;
}

View File

@ -0,0 +1,63 @@
/*!
* Bootstrap v2.3.0
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/
// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";
// CSS Reset
@import "reset.less";
// Grid system and page structure
@import "scaffolding.less";
@import "grid.less";
@import "layouts.less";
// Base CSS
@import "type.less";
@import "code.less";
@import "forms.less";
@import "tables.less";
// Components: common
@import "sprites.less";
@import "dropdowns.less";
@import "wells.less";
@import "component-animations.less";
@import "close.less";
// Components: Buttons & Alerts
@import "buttons.less";
@import "button-groups.less";
@import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
// Components: Nav
@import "navs.less";
@import "navbar.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";
// Components: Popovers
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";
// Components: Misc
@import "thumbnails.less";
@import "media.less";
@import "labels-badges.less";
@import "progress-bars.less";
@import "accordion.less";
@import "carousel.less";
@import "hero-unit.less";
// Utility classes
@import "utilities.less"; // Has to be last to override when necessary

View File

@ -0,0 +1,24 @@
//
// Breadcrumbs
// --------------------------------------------------
.breadcrumb {
padding: 8px 15px;
margin: 0 0 @baseLineHeight;
list-style: none;
background-color: #f5f5f5;
.border-radius(@baseBorderRadius);
> li {
display: inline-block;
.ie7-inline-block();
text-shadow: 0 1px 0 @white;
> .divider {
padding: 0 5px;
color: #ccc;
}
}
> .active {
color: @grayLight;
}
}

View File

@ -0,0 +1,229 @@
//
// Button groups
// --------------------------------------------------
// Make the div behave like a button
.btn-group {
position: relative;
display: inline-block;
.ie7-inline-block();
font-size: 0; // remove as part 1 of font-size inline-block hack
vertical-align: middle; // match .btn alignment given font-size hack above
white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
.ie7-restore-left-whitespace();
}
// Space out series of button groups
.btn-group + .btn-group {
margin-left: 5px;
}
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
font-size: 0; // Hack to remove whitespace that results from using inline-block
margin-top: @baseLineHeight / 2;
margin-bottom: @baseLineHeight / 2;
> .btn + .btn,
> .btn-group + .btn,
> .btn + .btn-group {
margin-left: 5px;
}
}
// Float them, remove border radius, then re-add to first and last elements
.btn-group > .btn {
position: relative;
.border-radius(0);
}
.btn-group > .btn + .btn {
margin-left: -1px;
}
.btn-group > .btn,
.btn-group > .dropdown-menu,
.btn-group > .popover {
font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack
}
// Reset fonts for other sizes
.btn-group > .btn-mini {
font-size: @fontSizeMini;
}
.btn-group > .btn-small {
font-size: @fontSizeSmall;
}
.btn-group > .btn-large {
font-size: @fontSizeLarge;
}
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group > .btn:first-child {
margin-left: 0;
.border-top-left-radius(@baseBorderRadius);
.border-bottom-left-radius(@baseBorderRadius);
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
.btn-group > .btn:last-child,
.btn-group > .dropdown-toggle {
.border-top-right-radius(@baseBorderRadius);
.border-bottom-right-radius(@baseBorderRadius);
}
// Reset corners for large buttons
.btn-group > .btn.large:first-child {
margin-left: 0;
.border-top-left-radius(@borderRadiusLarge);
.border-bottom-left-radius(@borderRadiusLarge);
}
.btn-group > .btn.large:last-child,
.btn-group > .large.dropdown-toggle {
.border-top-right-radius(@borderRadiusLarge);
.border-bottom-right-radius(@borderRadiusLarge);
}
// On hover/focus/active, bring the proper btn to front
.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active {
z-index: 2;
}
// On active and open, don't show outline
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
// Split button dropdowns
// ----------------------
// Give the line between buttons some depth
.btn-group > .btn + .dropdown-toggle {
padding-left: 8px;
padding-right: 8px;
.box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
*padding-top: 5px;
*padding-bottom: 5px;
}
.btn-group > .btn-mini + .dropdown-toggle {
padding-left: 5px;
padding-right: 5px;
*padding-top: 2px;
*padding-bottom: 2px;
}
.btn-group > .btn-small + .dropdown-toggle {
*padding-top: 5px;
*padding-bottom: 4px;
}
.btn-group > .btn-large + .dropdown-toggle {
padding-left: 12px;
padding-right: 12px;
*padding-top: 7px;
*padding-bottom: 7px;
}
.btn-group.open {
// The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state
.dropdown-toggle {
background-image: none;
.box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
}
// Keep the hover's background when dropdown is open
.btn.dropdown-toggle {
background-color: @btnBackgroundHighlight;
}
.btn-primary.dropdown-toggle {
background-color: @btnPrimaryBackgroundHighlight;
}
.btn-warning.dropdown-toggle {
background-color: @btnWarningBackgroundHighlight;
}
.btn-danger.dropdown-toggle {
background-color: @btnDangerBackgroundHighlight;
}
.btn-success.dropdown-toggle {
background-color: @btnSuccessBackgroundHighlight;
}
.btn-info.dropdown-toggle {
background-color: @btnInfoBackgroundHighlight;
}
.btn-inverse.dropdown-toggle {
background-color: @btnInverseBackgroundHighlight;
}
}
// Reposition the caret
.btn .caret {
margin-top: 8px;
margin-left: 0;
}
// Carets in other button sizes
.btn-large .caret {
margin-top: 6px;
}
.btn-large .caret {
border-left-width: 5px;
border-right-width: 5px;
border-top-width: 5px;
}
.btn-mini .caret,
.btn-small .caret {
margin-top: 8px;
}
// Upside down carets for .dropup
.dropup .btn-large .caret {
border-bottom-width: 5px;
}
// Account for other colors
.btn-primary,
.btn-warning,
.btn-danger,
.btn-info,
.btn-success,
.btn-inverse {
.caret {
border-top-color: @white;
border-bottom-color: @white;
}
}
// Vertical button groups
// ----------------------
.btn-group-vertical {
display: inline-block; // makes buttons only take up the width they need
.ie7-inline-block();
}
.btn-group-vertical > .btn {
display: block;
float: none;
max-width: 100%;
.border-radius(0);
}
.btn-group-vertical > .btn + .btn {
margin-left: 0;
margin-top: -1px;
}
.btn-group-vertical > .btn:first-child {
.border-radius(@baseBorderRadius @baseBorderRadius 0 0);
}
.btn-group-vertical > .btn:last-child {
.border-radius(0 0 @baseBorderRadius @baseBorderRadius);
}
.btn-group-vertical > .btn-large:first-child {
.border-radius(@borderRadiusLarge @borderRadiusLarge 0 0);
}
.btn-group-vertical > .btn-large:last-child {
.border-radius(0 0 @borderRadiusLarge @borderRadiusLarge);
}

View File

@ -0,0 +1,228 @@
//
// Buttons
// --------------------------------------------------
// Base styles
// --------------------------------------------------
// Core
.btn {
display: inline-block;
.ie7-inline-block();
padding: 4px 12px;
margin-bottom: 0; // For input.btn
font-size: @baseFontSize;
line-height: @baseLineHeight;
text-align: center;
vertical-align: middle;
cursor: pointer;
.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
border: 1px solid @btnBorder;
*border: 0; // Remove the border to prevent IE7's black border on input:focus
border-bottom-color: darken(@btnBorder, 10%);
.border-radius(@baseBorderRadius);
.ie7-restore-left-whitespace(); // Give IE7 some love
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
// Hover/focus state
&:hover,
&:focus {
color: @grayDark;
text-decoration: none;
background-position: 0 -15px;
// transition is only when going to hover/focus, otherwise the background
// behind the gradient (there for IE<=9 fallback) gets mismatched
.transition(background-position .1s linear);
}
// Focus state for keyboard and accessibility
&:focus {
.tab-focus();
}
// Active state
&.active,
&:active {
background-image: none;
outline: 0;
.box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
}
// Disabled state
&.disabled,
&[disabled] {
cursor: default;
background-image: none;
.opacity(65);
.box-shadow(none);
}
}
// Button Sizes
// --------------------------------------------------
// Large
.btn-large {
padding: @paddingLarge;
font-size: @fontSizeLarge;
.border-radius(@borderRadiusLarge);
}
.btn-large [class^="icon-"],
.btn-large [class*=" icon-"] {
margin-top: 4px;
}
// Small
.btn-small {
padding: @paddingSmall;
font-size: @fontSizeSmall;
.border-radius(@borderRadiusSmall);
}
.btn-small [class^="icon-"],
.btn-small [class*=" icon-"] {
margin-top: 0;
}
.btn-mini [class^="icon-"],
.btn-mini [class*=" icon-"] {
margin-top: -1px;
}
// Mini
.btn-mini {
padding: @paddingMini;
font-size: @fontSizeMini;
.border-radius(@borderRadiusSmall);
}
// Block button
// -------------------------
.btn-block {
display: block;
width: 100%;
padding-left: 0;
padding-right: 0;
.box-sizing(border-box);
}
// Vertically space out multiple block buttons
.btn-block + .btn-block {
margin-top: 5px;
}
// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
&.btn-block {
width: 100%;
}
}
// Alternate buttons
// --------------------------------------------------
// Provide *some* extra contrast for those who can get it
.btn-primary.active,
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active,
.btn-inverse.active {
color: rgba(255,255,255,.75);
}
// Set the backgrounds
// -------------------------
.btn-primary {
.buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
}
// Warning appears are orange
.btn-warning {
.buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight);
}
// Danger and error appear as red
.btn-danger {
.buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
}
// Success appears as green
.btn-success {
.buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight);
}
// Info appears as a neutral blue
.btn-info {
.buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight);
}
// Inverse appears as dark gray
.btn-inverse {
.buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
}
// Cross-browser Jank
// --------------------------------------------------
button.btn,
input[type="submit"].btn {
// Firefox 3.6 only I believe
&::-moz-focus-inner {
padding: 0;
border: 0;
}
// IE7 has some default padding on button controls
*padding-top: 3px;
*padding-bottom: 3px;
&.btn-large {
*padding-top: 7px;
*padding-bottom: 7px;
}
&.btn-small {
*padding-top: 3px;
*padding-bottom: 3px;
}
&.btn-mini {
*padding-top: 1px;
*padding-bottom: 1px;
}
}
// Link buttons
// --------------------------------------------------
// Make a button look and behave like a link
.btn-link,
.btn-link:active,
.btn-link[disabled] {
background-color: transparent;
background-image: none;
.box-shadow(none);
}
.btn-link {
border-color: transparent;
cursor: pointer;
color: @linkColor;
.border-radius(0);
}
.btn-link:hover,
.btn-link:focus {
color: @linkColorHover;
text-decoration: underline;
background-color: transparent;
}
.btn-link[disabled]:hover,
.btn-link[disabled]:focus {
color: @grayDark;
text-decoration: none;
}

View File

@ -0,0 +1,158 @@
//
// Carousel
// --------------------------------------------------
.carousel {
position: relative;
margin-bottom: @baseLineHeight;
line-height: 1;
}
.carousel-inner {
overflow: hidden;
width: 100%;
position: relative;
}
.carousel-inner {
> .item {
display: none;
position: relative;
.transition(.6s ease-in-out left);
// Account for jankitude on images
> img,
> a > img {
display: block;
line-height: 1;
}
}
> .active,
> .next,
> .prev { display: block; }
> .active {
left: 0;
}
> .next,
> .prev {
position: absolute;
top: 0;
width: 100%;
}
> .next {
left: 100%;
}
> .prev {
left: -100%;
}
> .next.left,
> .prev.right {
left: 0;
}
> .active.left {
left: -100%;
}
> .active.right {
left: 100%;
}
}
// Left/right controls for nav
// ---------------------------
.carousel-control {
position: absolute;
top: 40%;
left: 15px;
width: 40px;
height: 40px;
margin-top: -20px;
font-size: 60px;
font-weight: 100;
line-height: 30px;
color: @white;
text-align: center;
background: @grayDarker;
border: 3px solid @white;
.border-radius(23px);
.opacity(50);
// we can't have this transition here
// because webkit cancels the carousel
// animation if you trip this while
// in the middle of another animation
// ;_;
// .transition(opacity .2s linear);
// Reposition the right one
&.right {
left: auto;
right: 15px;
}
// Hover/focus state
&:hover,
&:focus {
color: @white;
text-decoration: none;
.opacity(90);
}
}
// Carousel indicator pips
// -----------------------------
.carousel-indicators {
position: absolute;
top: 15px;
right: 15px;
z-index: 5;
margin: 0;
list-style: none;
li {
display: block;
float: left;
width: 10px;
height: 10px;
margin-left: 5px;
text-indent: -999px;
background-color: #ccc;
background-color: rgba(255,255,255,.25);
border-radius: 5px;
}
.active {
background-color: #fff;
}
}
// Caption for text below images
// -----------------------------
.carousel-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 15px;
background: @grayDark;
background: rgba(0,0,0,.75);
}
.carousel-caption h4,
.carousel-caption p {
color: @white;
line-height: @baseLineHeight;
}
.carousel-caption h4 {
margin: 0 0 5px;
}
.carousel-caption p {
margin-bottom: 0;
}

View File

@ -0,0 +1,32 @@
//
// Close icons
// --------------------------------------------------
.close {
float: right;
font-size: 20px;
font-weight: bold;
line-height: @baseLineHeight;
color: @black;
text-shadow: 0 1px 0 rgba(255,255,255,1);
.opacity(20);
&:hover,
&:focus {
color: @black;
text-decoration: none;
cursor: pointer;
.opacity(40);
}
}
// Additional properties for button version
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
button.close {
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
}

View File

@ -0,0 +1,61 @@
//
// Code (inline and blocK)
// --------------------------------------------------
// Inline and block code styles
code,
pre {
padding: 0 3px 2px;
#font > #family > .monospace;
font-size: @baseFontSize - 2;
color: @grayDark;
.border-radius(3px);
}
// Inline code
code {
padding: 2px 4px;
color: #d14;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
white-space: nowrap;
}
// Blocks of code
pre {
display: block;
padding: (@baseLineHeight - 1) / 2;
margin: 0 0 @baseLineHeight / 2;
font-size: @baseFontSize - 1; // 14px to 13px
line-height: @baseLineHeight;
word-break: break-all;
word-wrap: break-word;
white-space: pre;
white-space: pre-wrap;
background-color: #f5f5f5;
border: 1px solid #ccc; // fallback for IE7-8
border: 1px solid rgba(0,0,0,.15);
.border-radius(@baseBorderRadius);
// Make prettyprint styles more spaced out for readability
&.prettyprint {
margin-bottom: @baseLineHeight;
}
// Account for some code outputs that place code tags in pre tags
code {
padding: 0;
color: inherit;
white-space: pre;
white-space: pre-wrap;
background-color: transparent;
border: 0;
}
}
// Enable scrollable blocks of code
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}

View File

@ -0,0 +1,22 @@
//
// Component animations
// --------------------------------------------------
.fade {
opacity: 0;
.transition(opacity .15s linear);
&.in {
opacity: 1;
}
}
.collapse {
position: relative;
height: 0;
overflow: hidden;
.transition(height .35s ease);
&.in {
height: auto;
}
}

View File

@ -0,0 +1,237 @@
//
// Dropdown menus
// --------------------------------------------------
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
.dropup,
.dropdown {
position: relative;
}
.dropdown-toggle {
// The caret makes the toggle a bit too tall in IE7
*margin-bottom: -3px;
}
.dropdown-toggle:active,
.open .dropdown-toggle {
outline: 0;
}
// Dropdown arrow/caret
// --------------------
.caret {
display: inline-block;
width: 0;
height: 0;
vertical-align: top;
border-top: 4px solid @black;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
}
// Place the caret
.dropdown .caret {
margin-top: 8px;
margin-left: 2px;
}
// The dropdown menu (ul)
// ----------------------
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: @zindexDropdown;
display: none; // none by default, but block on "open" of the menu
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0; // override default ul
list-style: none;
background-color: @dropdownBackground;
border: 1px solid #ccc; // Fallback for IE7-8
border: 1px solid @dropdownBorder;
*border-right-width: 2px;
*border-bottom-width: 2px;
.border-radius(6px);
.box-shadow(0 5px 10px rgba(0,0,0,.2));
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
// Aligns the dropdown menu to right
&.pull-right {
right: 0;
left: auto;
}
// Dividers (basically an hr) within the dropdown
.divider {
.nav-divider(@dropdownDividerTop, @dropdownDividerBottom);
}
// Links within the dropdown menu
> li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: @baseLineHeight;
color: @dropdownLinkColor;
white-space: nowrap;
}
}
// Hover/Focus state
// -----------
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
text-decoration: none;
color: @dropdownLinkColorHover;
#gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
}
// Active state
// ------------
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: @dropdownLinkColorActive;
text-decoration: none;
outline: 0;
#gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%));
}
// Disabled state
// --------------
// Gray out text and ensure the hover/focus state remains gray
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
color: @grayLight;
}
// Nuke hover/focus effects
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none; // Remove CSS gradient
.reset-filter();
cursor: default;
}
// Open state for the dropdown
// ---------------------------
.open {
// IE7's z-index only goes to the nearest positioned ancestor, which would
// make the menu appear below buttons that appeared later on the page
*z-index: @zindexDropdown;
& > .dropdown-menu {
display: block;
}
}
// Right aligned dropdowns
// ---------------------------
.pull-right > .dropdown-menu {
right: 0;
left: auto;
}
// Allow for dropdowns to go bottom up (aka, dropup-menu)
// ------------------------------------------------------
// Just add .dropup after the standard .dropdown class and you're set, bro.
// TODO: abstract this so that the navbar fixed styles are not placed here?
.dropup,
.navbar-fixed-bottom .dropdown {
// Reverse the caret
.caret {
border-top: 0;
border-bottom: 4px solid @black;
content: "";
}
// Different positioning for bottom up menu
.dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 1px;
}
}
// Sub menus
// ---------------------------
.dropdown-submenu {
position: relative;
}
// Default dropdowns
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
.border-radius(0 6px 6px 6px);
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
// Dropups
.dropup .dropdown-submenu > .dropdown-menu {
top: auto;
bottom: 0;
margin-top: 0;
margin-bottom: -2px;
.border-radius(5px 5px 5px 0);
}
// Caret to indicate there is a submenu
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: darken(@dropdownBackground, 20%);
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: @dropdownLinkColorHover;
}
// Left aligned submenus
.dropdown-submenu.pull-left {
// Undo the float
// Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
float: none;
// Positioning the submenu
> .dropdown-menu {
left: -100%;
margin-left: 10px;
.border-radius(6px 0 6px 6px);
}
}
// Tweak nav headers
// -----------------
// Increase padding from 15px to 20px on sides
.dropdown .dropdown-menu .nav-header {
padding-left: 20px;
padding-right: 20px;
}
// Typeahead
// ---------
.typeahead {
z-index: 1051;
margin-top: 2px; // give it some space to breathe
.border-radius(@baseBorderRadius);
}

View File

@ -0,0 +1,690 @@
//
// Forms
// --------------------------------------------------
// GENERAL STYLES
// --------------
// Make all forms have space below them
form {
margin: 0 0 @baseLineHeight;
}
fieldset {
padding: 0;
margin: 0;
border: 0;
}
// Groups of fields with labels on top (legends)
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: @baseLineHeight;
font-size: @baseFontSize * 1.5;
line-height: @baseLineHeight * 2;
color: @grayDark;
border: 0;
border-bottom: 1px solid #e5e5e5;
// Small
small {
font-size: @baseLineHeight * .75;
color: @grayLight;
}
}
// Set font for forms
label,
input,
button,
select,
textarea {
#font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here
}
input,
button,
select,
textarea {
font-family: @baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
}
// Identify controls by their labels
label {
display: block;
margin-bottom: 5px;
}
// Form controls
// -------------------------
// Shared size and type resets
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
display: inline-block;
height: @baseLineHeight;
padding: 4px 6px;
margin-bottom: @baseLineHeight / 2;
font-size: @baseFontSize;
line-height: @baseLineHeight;
color: @gray;
.border-radius(@inputBorderRadius);
vertical-align: middle;
}
// Reset appearance properties for textual inputs and textarea
// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
input,
textarea,
.uneditable-input {
width: 206px; // plus 12px padding and 2px border
}
// Reset height since textareas have rows
textarea {
height: auto;
}
// Everything else
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
background-color: @inputBackground;
border: 1px solid @inputBorder;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
.transition(~"border linear .2s, box-shadow linear .2s");
// Focus state
&:focus {
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9; /* IE6-9 */
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
}
}
// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
margin: 4px 0 0;
*margin-top: 0; /* IE7 */
margin-top: 1px \9; /* IE8-9 */
line-height: normal;
}
// Reset width of input images, buttons, radios, checkboxes
input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
width: auto; // Override of generic input selector
}
// Set the height of select and file controls to match text inputs
select,
input[type="file"] {
height: @inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
*margin-top: 4px; /* For IE7, add top margin to align select with labels */
line-height: @inputHeight;
}
// Make select elements obey height by applying a border
select {
width: 220px; // default input width + 10px of padding that doesn't get applied
border: 1px solid @inputBorder;
background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color
}
// Make multiple select elements height not fixed
select[multiple],
select[size] {
height: auto;
}
// Focus for select, file, radio, and checkbox
select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
.tab-focus();
}
// Uneditable inputs
// -------------------------
// Make uneditable inputs look inactive
.uneditable-input,
.uneditable-textarea {
color: @grayLight;
background-color: darken(@inputBackground, 1%);
border-color: @inputBorder;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
cursor: not-allowed;
}
// For text that needs to appear as an input but should not be an input
.uneditable-input {
overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
white-space: nowrap;
}
// Make uneditable textareas behave like a textarea
.uneditable-textarea {
width: auto;
height: auto;
}
// Placeholder
// -------------------------
// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
input,
textarea {
.placeholder();
}
// CHECKBOXES & RADIOS
// -------------------
// Indent the labels to position radios/checkboxes as hanging
.radio,
.checkbox {
min-height: @baseLineHeight; // clear the floating input if there is no label text
padding-left: 20px;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
float: left;
margin-left: -20px;
}
// Move the options list down to align with labels
.controls > .radio:first-child,
.controls > .checkbox:first-child {
padding-top: 5px; // has to be padding because margin collaspes
}
// Radios and checkboxes on same line
// TODO v3: Convert .inline to .control-inline
.radio.inline,
.checkbox.inline {
display: inline-block;
padding-top: 5px;
margin-bottom: 0;
vertical-align: middle;
}
.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
margin-left: 10px; // space out consecutive inline controls
}
// INPUT SIZES
// -----------
// General classes for quick sizes
.input-mini { width: 60px; }
.input-small { width: 90px; }
.input-medium { width: 150px; }
.input-large { width: 210px; }
.input-xlarge { width: 270px; }
.input-xxlarge { width: 530px; }
// Grid style input sizes
input[class*="span"],
select[class*="span"],
textarea[class*="span"],
.uneditable-input[class*="span"],
// Redeclare since the fluid row class is more specific
.row-fluid input[class*="span"],
.row-fluid select[class*="span"],
.row-fluid textarea[class*="span"],
.row-fluid .uneditable-input[class*="span"] {
float: none;
margin-left: 0;
}
// Ensure input-prepend/append never wraps
.input-append input[class*="span"],
.input-append .uneditable-input[class*="span"],
.input-prepend input[class*="span"],
.input-prepend .uneditable-input[class*="span"],
.row-fluid input[class*="span"],
.row-fluid select[class*="span"],
.row-fluid textarea[class*="span"],
.row-fluid .uneditable-input[class*="span"],
.row-fluid .input-prepend [class*="span"],
.row-fluid .input-append [class*="span"] {
display: inline-block;
}
// GRID SIZING FOR INPUTS
// ----------------------
// Grid sizes
#grid > .input(@gridColumnWidth, @gridGutterWidth);
// Control row for multiple inputs per line
.controls-row {
.clearfix(); // Clear the float from controls
}
// Float to collapse white-space for proper grid alignment
.controls-row [class*="span"],
// Redeclare the fluid grid collapse since we undo the float for inputs
.row-fluid .controls-row [class*="span"] {
float: left;
}
// Explicity set top padding on all checkboxes/radios, not just first-child
.controls-row .checkbox[class*="span"],
.controls-row .radio[class*="span"] {
padding-top: 5px;
}
// DISABLED STATE
// --------------
// Disabled and read-only inputs
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
cursor: not-allowed;
background-color: @inputDisabledBackground;
}
// Explicitly reset the colors here
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly] {
background-color: transparent;
}
// FORM FIELD FEEDBACK STATES
// --------------------------
// Warning
.control-group.warning {
.formFieldState(@warningText, @warningText, @warningBackground);
}
// Error
.control-group.error {
.formFieldState(@errorText, @errorText, @errorBackground);
}
// Success
.control-group.success {
.formFieldState(@successText, @successText, @successBackground);
}
// Success
.control-group.info {
.formFieldState(@infoText, @infoText, @infoBackground);
}
// HTML5 invalid states
// Shares styles with the .control-group.error above
input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
color: #b94a48;
border-color: #ee5f5b;
&:focus {
border-color: darken(#ee5f5b, 10%);
@shadow: 0 0 6px lighten(#ee5f5b, 20%);
.box-shadow(@shadow);
}
}
// FORM ACTIONS
// ------------
.form-actions {
padding: (@baseLineHeight - 1) 20px @baseLineHeight;
margin-top: @baseLineHeight;
margin-bottom: @baseLineHeight;
background-color: @formActionsBackground;
border-top: 1px solid #e5e5e5;
.clearfix(); // Adding clearfix to allow for .pull-right button containers
}
// HELP TEXT
// ---------
.help-block,
.help-inline {
color: lighten(@textColor, 15%); // lighten the text some for contrast
}
.help-block {
display: block; // account for any element using help-block
margin-bottom: @baseLineHeight / 2;
}
.help-inline {
display: inline-block;
.ie7-inline-block();
vertical-align: middle;
padding-left: 5px;
}
// INPUT GROUPS
// ------------
// Allow us to put symbols and text within the input field for a cleaner look
.input-append,
.input-prepend {
display: inline-block;
margin-bottom: @baseLineHeight / 2;
vertical-align: middle;
font-size: 0; // white space collapse hack
white-space: nowrap; // Prevent span and input from separating
// Reset the white space collapse hack
input,
select,
.uneditable-input,
.dropdown-menu,
.popover {
font-size: @baseFontSize;
}
input,
select,
.uneditable-input {
position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
*margin-left: 0;
vertical-align: top;
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
// Make input on top when focused so blue border and shadow always show
&:focus {
z-index: 2;
}
}
.add-on {
display: inline-block;
width: auto;
height: @baseLineHeight;
min-width: 16px;
padding: 4px 5px;
font-size: @baseFontSize;
font-weight: normal;
line-height: @baseLineHeight;
text-align: center;
text-shadow: 0 1px 0 @white;
background-color: @grayLighter;
border: 1px solid #ccc;
}
.add-on,
.btn,
.btn-group > .dropdown-toggle {
vertical-align: top;
.border-radius(0);
}
.active {
background-color: lighten(@green, 30);
border-color: @green;
}
}
.input-prepend {
.add-on,
.btn {
margin-right: -1px;
}
.add-on:first-child,
.btn:first-child {
// FYI, `.btn:first-child` accounts for a button group that's prepended
.border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
}
}
.input-append {
input,
select,
.uneditable-input {
.border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
+ .btn-group .btn:last-child {
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
}
}
.add-on,
.btn,
.btn-group {
margin-left: -1px;
}
.add-on:last-child,
.btn:last-child,
.btn-group:last-child > .dropdown-toggle {
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
}
}
// Remove all border-radius for inputs with both prepend and append
.input-prepend.input-append {
input,
select,
.uneditable-input {
.border-radius(0);
+ .btn-group .btn {
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
}
}
.add-on:first-child,
.btn:first-child {
margin-right: -1px;
.border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
}
.add-on:last-child,
.btn:last-child {
margin-left: -1px;
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
}
.btn-group:first-child {
margin-left: 0;
}
}
// SEARCH FORM
// -----------
input.search-query {
padding-right: 14px;
padding-right: 4px \9;
padding-left: 14px;
padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
margin-bottom: 0; // Remove the default margin on all inputs
.border-radius(15px);
}
/* Allow for input prepend/append in search forms */
.form-search .input-append .search-query,
.form-search .input-prepend .search-query {
.border-radius(0); // Override due to specificity
}
.form-search .input-append .search-query {
.border-radius(14px 0 0 14px);
}
.form-search .input-append .btn {
.border-radius(0 14px 14px 0);
}
.form-search .input-prepend .search-query {
.border-radius(0 14px 14px 0);
}
.form-search .input-prepend .btn {
.border-radius(14px 0 0 14px);
}
// HORIZONTAL & VERTICAL FORMS
// ---------------------------
// Common properties
// -----------------
.form-search,
.form-inline,
.form-horizontal {
input,
textarea,
select,
.help-inline,
.uneditable-input,
.input-prepend,
.input-append {
display: inline-block;
.ie7-inline-block();
margin-bottom: 0;
vertical-align: middle;
}
// Re-hide hidden elements due to specifity
.hide {
display: none;
}
}
.form-search label,
.form-inline label,
.form-search .btn-group,
.form-inline .btn-group {
display: inline-block;
}
// Remove margin for input-prepend/-append
.form-search .input-append,
.form-inline .input-append,
.form-search .input-prepend,
.form-inline .input-prepend {
margin-bottom: 0;
}
// Inline checkbox/radio labels (remove padding on left)
.form-search .radio,
.form-search .checkbox,
.form-inline .radio,
.form-inline .checkbox {
padding-left: 0;
margin-bottom: 0;
vertical-align: middle;
}
// Remove float and margin, set to inline-block
.form-search .radio input[type="radio"],
.form-search .checkbox input[type="checkbox"],
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
float: left;
margin-right: 3px;
margin-left: 0;
}
// Margin to space out fieldsets
.control-group {
margin-bottom: @baseLineHeight / 2;
}
// Legend collapses margin, so next element is responsible for spacing
legend + .control-group {
margin-top: @baseLineHeight;
-webkit-margin-top-collapse: separate;
}
// Horizontal-specific styles
// --------------------------
.form-horizontal {
// Increase spacing between groups
.control-group {
margin-bottom: @baseLineHeight;
.clearfix();
}
// Float the labels left
.control-label {
float: left;
width: @horizontalComponentOffset - 20;
padding-top: 5px;
text-align: right;
}
// Move over all input controls and content
.controls {
// Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
// don't inherit the margin of the parent, in this case .controls
*display: inline-block;
*padding-left: 20px;
margin-left: @horizontalComponentOffset;
*margin-left: 0;
&:first-child {
*padding-left: @horizontalComponentOffset;
}
}
// Remove bottom margin on block level help text since that's accounted for on .control-group
.help-block {
margin-bottom: 0;
}
// And apply it only to .help-block instances that follow a form control
input,
select,
textarea,
.uneditable-input,
.input-prepend,
.input-append {
+ .help-block {
margin-top: @baseLineHeight / 2;
}
}
// Move over buttons in .form-actions to align with .controls
.form-actions {
padding-left: @horizontalComponentOffset;
}
}

View File

@ -0,0 +1,21 @@
//
// Grid system
// --------------------------------------------------
// Fixed (940px)
#grid > .core(@gridColumnWidth, @gridGutterWidth);
// Fluid (940px)
#grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);
// Reset utility classes due to specificity
[class*="span"].hide,
.row-fluid [class*="span"].hide {
display: none;
}
[class*="span"].pull-right,
.row-fluid [class*="span"].pull-right {
float: right;
}

View File

@ -0,0 +1,25 @@
//
// Hero unit
// --------------------------------------------------
.hero-unit {
padding: 60px;
margin-bottom: 30px;
font-size: 18px;
font-weight: 200;
line-height: @baseLineHeight * 1.5;
color: @heroUnitLeadColor;
background-color: @heroUnitBackground;
.border-radius(6px);
h1 {
margin-bottom: 0;
font-size: 60px;
line-height: 1;
color: @heroUnitHeadingColor;
letter-spacing: -1px;
}
li {
line-height: @baseLineHeight * 1.5; // Reset since we specify in type.less
}
}

View File

@ -0,0 +1,84 @@
//
// Labels and badges
// --------------------------------------------------
// Base classes
.label,
.badge {
display: inline-block;
padding: 2px 4px;
font-size: @baseFontSize * .846;
font-weight: bold;
line-height: 14px; // ensure proper line-height if floated
color: @white;
vertical-align: baseline;
white-space: nowrap;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
background-color: @grayLight;
}
// Set unique padding and border-radii
.label {
.border-radius(3px);
}
.badge {
padding-left: 9px;
padding-right: 9px;
.border-radius(9px);
}
// Empty labels/badges collapse
.label,
.badge {
&:empty {
display: none;
}
}
// Hover/focus state, but only for links
a {
&.label:hover,
&.label:focus,
&.badge:hover,
&.badge:focus {
color: @white;
text-decoration: none;
cursor: pointer;
}
}
// Colors
// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
.label,
.badge {
// Important (red)
&-important { background-color: @errorText; }
&-important[href] { background-color: darken(@errorText, 10%); }
// Warnings (orange)
&-warning { background-color: @orange; }
&-warning[href] { background-color: darken(@orange, 10%); }
// Success (green)
&-success { background-color: @successText; }
&-success[href] { background-color: darken(@successText, 10%); }
// Info (turquoise)
&-info { background-color: @infoText; }
&-info[href] { background-color: darken(@infoText, 10%); }
// Inverse (black)
&-inverse { background-color: @grayDark; }
&-inverse[href] { background-color: darken(@grayDark, 10%); }
}
// Quick fix for labels/badges in buttons
.btn {
.label,
.badge {
position: relative;
top: -1px;
}
}
.btn-mini {
.label,
.badge {
top: 0;
}
}

View File

@ -0,0 +1,16 @@
//
// Layouts
// --------------------------------------------------
// Container (centered, fixed-width layouts)
.container {
.container-fixed();
}
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
.container-fluid {
padding-right: @gridGutterWidth;
padding-left: @gridGutterWidth;
.clearfix();
}

View File

@ -0,0 +1,55 @@
// Media objects
// Source: http://stubbornella.org/content/?p=497
// --------------------------------------------------
// Common styles
// -------------------------
// Clear the floats
.media,
.media-body {
overflow: hidden;
*overflow: visible;
zoom: 1;
}
// Proper spacing between instances of .media
.media,
.media .media {
margin-top: 15px;
}
.media:first-child {
margin-top: 0;
}
// For images and videos, set to block
.media-object {
display: block;
}
// Reset margins on headings for tighter default spacing
.media-heading {
margin: 0 0 5px;
}
// Media image alignment
// -------------------------
.media > .pull-left {
margin-right: 10px;
}
.media > .pull-right {
margin-left: 10px;
}
// Media list variation
// -------------------------
// Undo default ul/ol styles
.media-list {
margin-left: 0;
list-style: none;
}

View File

@ -0,0 +1,702 @@
//
// Mixins
// --------------------------------------------------
// UTILITY MIXINS
// --------------------------------------------------
// Clearfix
// --------
// For clearing floats like a boss h5bp.com/q
.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
// Fixes Opera/contenteditable bug:
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
line-height: 0;
}
&:after {
clear: both;
}
}
// Webkit-style focus
// ------------------
.tab-focus() {
// Default
outline: thin dotted #333;
// Webkit
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
// Center-align a block level element
// ----------------------------------
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// IE7 inline-block
// ----------------
.ie7-inline-block() {
*display: inline; /* IE7 inline-block hack */
*zoom: 1;
}
// IE7 likes to collapse whitespace on either side of the inline-block elements.
// Ems because we're attempting to match the width of a space character. Left
// version is for form buttons, which typically come after other elements, and
// right version is for icons, which come before. Applying both is ok, but it will
// mean that space between those elements will be .6em (~2 space characters) in IE7,
// instead of the 1 space in other browsers.
.ie7-restore-left-whitespace() {
*margin-left: .3em;
&:first-child {
*margin-left: 0;
}
}
.ie7-restore-right-whitespace() {
*margin-right: .3em;
}
// Sizing shortcuts
// -------------------------
.size(@height, @width) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size, @size);
}
// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
&:-moz-placeholder {
color: @color;
}
&:-ms-input-placeholder {
color: @color;
}
&::-webkit-input-placeholder {
color: @color;
}
}
// Text overflow
// -------------------------
// Requires inline-block or block for proper styling
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// CSS image replacement
// -------------------------
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
.hide-text {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
// FONTS
// --------------------------------------------------
#font {
#family {
.serif() {
font-family: @serifFontFamily;
}
.sans-serif() {
font-family: @sansFontFamily;
}
.monospace() {
font-family: @monoFontFamily;
}
}
.shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
.serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
#font > #family > .serif;
#font > .shorthand(@size, @weight, @lineHeight);
}
.sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
#font > #family > .sans-serif;
#font > .shorthand(@size, @weight, @lineHeight);
}
.monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
#font > #family > .monospace;
#font > .shorthand(@size, @weight, @lineHeight);
}
}
// FORMS
// --------------------------------------------------
// Block level inputs
.input-block-level {
display: block;
width: 100%;
min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
.box-sizing(border-box); // Makes inputs behave like true block-level elements
}
// Mixin for form field states
.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
// Set the text color
.control-label,
.help-block,
.help-inline {
color: @textColor;
}
// Style inputs accordingly
.checkbox,
.radio,
input,
select,
textarea {
color: @textColor;
}
input,
select,
textarea {
border-color: @borderColor;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
&:focus {
border-color: darken(@borderColor, 10%);
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
.box-shadow(@shadow);
}
}
// Give a small background color for input-prepend/-append
.input-prepend .add-on,
.input-append .add-on {
color: @textColor;
background-color: @backgroundColor;
border-color: @textColor;
}
}
// CSS3 PROPERTIES
// --------------------------------------------------
// Border Radius
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
// Single Corner Border Radius
.border-top-left-radius(@radius) {
-webkit-border-top-left-radius: @radius;
-moz-border-radius-topleft: @radius;
border-top-left-radius: @radius;
}
.border-top-right-radius(@radius) {
-webkit-border-top-right-radius: @radius;
-moz-border-radius-topright: @radius;
border-top-right-radius: @radius;
}
.border-bottom-right-radius(@radius) {
-webkit-border-bottom-right-radius: @radius;
-moz-border-radius-bottomright: @radius;
border-bottom-right-radius: @radius;
}
.border-bottom-left-radius(@radius) {
-webkit-border-bottom-left-radius: @radius;
-moz-border-radius-bottomleft: @radius;
border-bottom-left-radius: @radius;
}
// Single Side Border Radius
.border-top-radius(@radius) {
.border-top-right-radius(@radius);
.border-top-left-radius(@radius);
}
.border-right-radius(@radius) {
.border-top-right-radius(@radius);
.border-bottom-right-radius(@radius);
}
.border-bottom-radius(@radius) {
.border-bottom-right-radius(@radius);
.border-bottom-left-radius(@radius);
}
.border-left-radius(@radius) {
.border-top-left-radius(@radius);
.border-bottom-left-radius(@radius);
}
// Drop shadows
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
box-shadow: @shadow;
}
// Transitions
.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-o-transition: @transition;
transition: @transition;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
-moz-transition-delay: @transition-delay;
-o-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
-moz-transition-duration: @transition-duration;
-o-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
// Transformations
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-moz-transform: rotate(@degrees);
-ms-transform: rotate(@degrees);
-o-transform: rotate(@degrees);
transform: rotate(@degrees);
}
.scale(@ratio) {
-webkit-transform: scale(@ratio);
-moz-transform: scale(@ratio);
-ms-transform: scale(@ratio);
-o-transform: scale(@ratio);
transform: scale(@ratio);
}
.translate(@x, @y) {
-webkit-transform: translate(@x, @y);
-moz-transform: translate(@x, @y);
-ms-transform: translate(@x, @y);
-o-transform: translate(@x, @y);
transform: translate(@x, @y);
}
.skew(@x, @y) {
-webkit-transform: skew(@x, @y);
-moz-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885
-o-transform: skew(@x, @y);
transform: skew(@x, @y);
-webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
}
.translate3d(@x, @y, @z) {
-webkit-transform: translate3d(@x, @y, @z);
-moz-transform: translate3d(@x, @y, @z);
-o-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
.backface-visibility(@visibility){
-webkit-backface-visibility: @visibility;
-moz-backface-visibility: @visibility;
backface-visibility: @visibility;
}
// Background clipping
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
.background-clip(@clip) {
-webkit-background-clip: @clip;
-moz-background-clip: @clip;
background-clip: @clip;
}
// Background sizing
.background-size(@size) {
-webkit-background-size: @size;
-moz-background-size: @size;
-o-background-size: @size;
background-size: @size;
}
// Box sizing
.box-sizing(@boxmodel) {
-webkit-box-sizing: @boxmodel;
-moz-box-sizing: @boxmodel;
box-sizing: @boxmodel;
}
// User select
// For selecting text on the page
.user-select(@select) {
-webkit-user-select: @select;
-moz-user-select: @select;
-ms-user-select: @select;
-o-user-select: @select;
user-select: @select;
}
// Resize anything
.resizable(@direction) {
resize: @direction; // Options: horizontal, vertical, both
overflow: auto; // Safari fix
}
// CSS3 Content Columns
.content-columns(@columnCount, @columnGap: @gridGutterWidth) {
-webkit-column-count: @columnCount;
-moz-column-count: @columnCount;
column-count: @columnCount;
-webkit-column-gap: @columnGap;
-moz-column-gap: @columnGap;
column-gap: @columnGap;
}
// Optional hyphenation
.hyphens(@mode: auto) {
word-wrap: break-word;
-webkit-hyphens: @mode;
-moz-hyphens: @mode;
-ms-hyphens: @mode;
-o-hyphens: @mode;
hyphens: @mode;
}
// Opacity
.opacity(@opacity) {
opacity: @opacity / 100;
filter: ~"alpha(opacity=@{opacity})";
}
// BACKGROUNDS
// --------------------------------------------------
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
#translucent {
.background(@color: @white, @alpha: 1) {
background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
}
.border(@color: @white, @alpha: 1) {
border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
.background-clip(padding-box);
}
}
// Gradient Bar Colors for buttons and alerts
.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
color: @textColor;
text-shadow: @textShadow;
#gradient > .vertical(@primaryColor, @secondaryColor);
border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
}
// Gradients
#gradient {
.horizontal(@startColor: #555, @endColor: #333) {
background-color: @endColor;
background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
}
.vertical(@startColor: #555, @endColor: #333) {
background-color: mix(@startColor, @endColor, 60%);
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
}
.directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
background-color: @endColor;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
}
.horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
background-color: mix(@midColor, @endColor, 80%);
background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
background-image: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
}
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
background-color: mix(@midColor, @endColor, 80%);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
}
.radial(@innerColor: #555, @outerColor: #333) {
background-color: @outerColor;
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
background-repeat: no-repeat;
}
.striped(@color: #555, @angle: 45deg) {
background-color: @color;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
}
}
// Reset filters for IE
.reset-filter() {
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}
// COMPONENT MIXINS
// --------------------------------------------------
// Horizontal dividers
// -------------------------
// Dividers (basically an hr) within dropdowns and nav lists
.nav-divider(@top: #e5e5e5, @bottom: @white) {
// IE7 needs a set width since we gave a height. Restricting just
// to IE7 to keep the 1px left/right space in other browsers.
// It is unclear where IE is getting the extra space that we need
// to negative-margin away, but so it goes.
*width: 100%;
height: 1px;
margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
*margin: -5px 0 5px;
overflow: hidden;
background-color: @top;
border-bottom: 1px solid @bottom;
}
// Button backgrounds
// ------------------
.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
.gradientBar(@startColor, @endColor, @textColor, @textShadow);
*background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
.reset-filter();
// in these cases the gradient won't cover the background, so we override
&:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
color: @textColor;
background-color: @endColor;
*background-color: darken(@endColor, 5%);
}
// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
&:active,
&.active {
background-color: darken(@endColor, 10%) e("\9");
}
}
// Navbar vertical align
// -------------------------
// Vertically center elements in the navbar.
// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
.navbarVerticalAlign(@elementHeight) {
margin-top: (@navbarHeight - @elementHeight) / 2;
}
// Grid System
// -----------
// Centered container element
.container-fixed() {
margin-right: auto;
margin-left: auto;
.clearfix();
}
// Table columns
.tableColumns(@columnSpan: 1) {
float: none; // undo default grid column styles
width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
margin-left: 0; // undo default grid column styles
}
// Make a Grid
// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
.makeRow() {
margin-left: @gridGutterWidth * -1;
.clearfix();
}
.makeColumn(@columns: 1, @offset: 0) {
float: left;
margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2);
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
}
// The Grid
#grid {
.core (@gridColumnWidth, @gridGutterWidth) {
.spanX (@index) when (@index > 0) {
.span@{index} { .span(@index); }
.spanX(@index - 1);
}
.spanX (0) {}
.offsetX (@index) when (@index > 0) {
.offset@{index} { .offset(@index); }
.offsetX(@index - 1);
}
.offsetX (0) {}
.offset (@columns) {
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
}
.span (@columns) {
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
}
.row {
margin-left: @gridGutterWidth * -1;
.clearfix();
}
[class*="span"] {
float: left;
min-height: 1px; // prevent collapsing columns
margin-left: @gridGutterWidth;
}
// Set the container width, and override it for fixed navbars in media queries
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container { .span(@gridColumns); }
// generate .spanX and .offsetX
.spanX (@gridColumns);
.offsetX (@gridColumns);
}
.fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
.spanX (@index) when (@index > 0) {
.span@{index} { .span(@index); }
.spanX(@index - 1);
}
.spanX (0) {}
.offsetX (@index) when (@index > 0) {
.offset@{index} { .offset(@index); }
.offset@{index}:first-child { .offsetFirstChild(@index); }
.offsetX(@index - 1);
}
.offsetX (0) {}
.offset (@columns) {
margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2);
*margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%);
}
.offsetFirstChild (@columns) {
margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
*margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
}
.span (@columns) {
width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
*width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
}
.row-fluid {
width: 100%;
.clearfix();
[class*="span"] {
.input-block-level();
float: left;
margin-left: @fluidGridGutterWidth;
*margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
}
[class*="span"]:first-child {
margin-left: 0;
}
// Space grid-sized controls properly if multiple per line
.controls-row [class*="span"] + [class*="span"] {
margin-left: @fluidGridGutterWidth;
}
// generate .spanX and .offsetX
.spanX (@gridColumns);
.offsetX (@gridColumns);
}
}
.input(@gridColumnWidth, @gridGutterWidth) {
.spanX (@index) when (@index > 0) {
input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index} { .span(@index); }
.spanX(@index - 1);
}
.spanX (0) {}
.span(@columns) {
width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14;
}
input,
textarea,
.uneditable-input {
margin-left: 0; // override margin-left from core grid system
}
// Space grid-sized controls properly if multiple per line
.controls-row [class*="span"] + [class*="span"] {
margin-left: @gridGutterWidth;
}
// generate .spanX
.spanX (@gridColumns);
}
}

View File

@ -0,0 +1,95 @@
//
// Modals
// --------------------------------------------------
// Background
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindexModalBackdrop;
background-color: @black;
// Fade for backdrop
&.fade { opacity: 0; }
}
.modal-backdrop,
.modal-backdrop.fade.in {
.opacity(80);
}
// Base modal
.modal {
position: fixed;
top: 10%;
left: 50%;
z-index: @zindexModal;
width: 560px;
margin-left: -280px;
background-color: @white;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.3);
*border: 1px solid #999; /* IE6-7 */
.border-radius(6px);
.box-shadow(0 3px 7px rgba(0,0,0,0.3));
.background-clip(padding-box);
// Remove focus outline from opened modal
outline: none;
&.fade {
.transition(e('opacity .3s linear, top .3s ease-out'));
top: -25%;
}
&.fade.in { top: 10%; }
}
.modal-header {
padding: 9px 15px;
border-bottom: 1px solid #eee;
// Close icon
.close { margin-top: 2px; }
// Heading
h3 {
margin: 0;
line-height: 30px;
}
}
// Body (where all modal content resides)
.modal-body {
position: relative;
overflow-y: auto;
max-height: 400px;
padding: 15px;
}
// Remove bottom margin if need be
.modal-form {
margin-bottom: 0;
}
// Footer (for actions)
.modal-footer {
padding: 14px 15px 15px;
margin-bottom: 0;
text-align: right; // right align buttons
background-color: #f5f5f5;
border-top: 1px solid #ddd;
.border-radius(0 0 6px 6px);
.box-shadow(inset 0 1px 0 @white);
.clearfix(); // clear it in case folks use .pull-* classes on buttons
// Properly space out buttons
.btn + .btn {
margin-left: 5px;
margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
}
// but override that for button groups
.btn-group .btn + .btn {
margin-left: -1px;
}
// and override it for block buttons as well
.btn-block + .btn-block {
margin-left: 0;
}
}

View File

@ -0,0 +1,497 @@
//
// Navbars (Redux)
// --------------------------------------------------
// COMMON STYLES
// -------------
// Base class and wrapper
.navbar {
overflow: visible;
margin-bottom: @baseLineHeight;
// Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
*position: relative;
*z-index: 2;
}
// Inner for background effects
// Gradient is applied to its own element because overflow visible is not honored by IE when filter is present
.navbar-inner {
min-height: @navbarHeight;
padding-left: 20px;
padding-right: 20px;
#gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
border: 1px solid @navbarBorder;
.border-radius(@baseBorderRadius);
.box-shadow(0 1px 4px rgba(0,0,0,.065));
// Prevent floats from breaking the navbar
.clearfix();
}
// Set width to auto for default container
// We then reset it for fixed navbars in the #gridSystem mixin
.navbar .container {
width: auto;
}
// Override the default collapsed state
.nav-collapse.collapse {
height: auto;
overflow: visible;
}
// Brand: website or project name
// -------------------------
.navbar .brand {
float: left;
display: block;
// Vertically center the text given @navbarHeight
padding: ((@navbarHeight - @baseLineHeight) / 2) 20px ((@navbarHeight - @baseLineHeight) / 2);
margin-left: -20px; // negative indent to left-align the text down the page
font-size: 20px;
font-weight: 200;
color: @navbarBrandColor;
text-shadow: 0 1px 0 @navbarBackgroundHighlight;
&:hover,
&:focus {
text-decoration: none;
}
}
// Plain text in topbar
// -------------------------
.navbar-text {
margin-bottom: 0;
line-height: @navbarHeight;
color: @navbarText;
}
// Janky solution for now to account for links outside the .nav
// -------------------------
.navbar-link {
color: @navbarLinkColor;
&:hover,
&:focus {
color: @navbarLinkColorHover;
}
}
// Dividers in navbar
// -------------------------
.navbar .divider-vertical {
height: @navbarHeight;
margin: 0 9px;
border-left: 1px solid @navbarBackground;
border-right: 1px solid @navbarBackgroundHighlight;
}
// Buttons in navbar
// -------------------------
.navbar .btn,
.navbar .btn-group {
.navbarVerticalAlign(30px); // Vertically center in navbar
}
.navbar .btn-group .btn,
.navbar .input-prepend .btn,
.navbar .input-append .btn,
.navbar .input-prepend .btn-group,
.navbar .input-append .btn-group {
margin-top: 0; // then undo the margin here so we don't accidentally double it
}
// Navbar forms
// -------------------------
.navbar-form {
margin-bottom: 0; // remove default bottom margin
.clearfix();
input,
select,
.radio,
.checkbox {
.navbarVerticalAlign(30px); // Vertically center in navbar
}
input,
select,
.btn {
display: inline-block;
margin-bottom: 0;
}
input[type="image"],
input[type="checkbox"],
input[type="radio"] {
margin-top: 3px;
}
.input-append,
.input-prepend {
margin-top: 5px;
white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left
input {
margin-top: 0; // remove the margin on top since it's on the parent
}
}
}
// Navbar search
// -------------------------
.navbar-search {
position: relative;
float: left;
.navbarVerticalAlign(30px); // Vertically center in navbar
margin-bottom: 0;
.search-query {
margin-bottom: 0;
padding: 4px 14px;
#font > .sans-serif(13px, normal, 1);
.border-radius(15px); // redeclare because of specificity of the type attribute
}
}
// Static navbar
// -------------------------
.navbar-static-top {
position: static;
margin-bottom: 0; // remove 18px margin for default navbar
.navbar-inner {
.border-radius(0);
}
}
// Fixed navbar
// -------------------------
// Shared (top/bottom) styles
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: @zindexFixedNavbar;
margin-bottom: 0; // remove 18px margin for default navbar
}
.navbar-fixed-top .navbar-inner,
.navbar-static-top .navbar-inner {
border-width: 0 0 1px;
}
.navbar-fixed-bottom .navbar-inner {
border-width: 1px 0 0;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
padding-left: 0;
padding-right: 0;
.border-radius(0);
}
// Reset container width
// Required here as we reset the width earlier on and the grid mixins don't override early enough
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
#grid > .core > .span(@gridColumns);
}
// Fixed to top
.navbar-fixed-top {
top: 0;
}
.navbar-fixed-top,
.navbar-static-top {
.navbar-inner {
.box-shadow(~"0 1px 10px rgba(0,0,0,.1)");
}
}
// Fixed to bottom
.navbar-fixed-bottom {
bottom: 0;
.navbar-inner {
.box-shadow(~"0 -1px 10px rgba(0,0,0,.1)");
}
}
// NAVIGATION
// ----------
.navbar .nav {
position: relative;
left: 0;
display: block;
float: left;
margin: 0 10px 0 0;
}
.navbar .nav.pull-right {
float: right; // redeclare due to specificity
margin-right: 0; // remove margin on float right nav
}
.navbar .nav > li {
float: left;
}
// Links
.navbar .nav > li > a {
float: none;
// Vertically center the text given @navbarHeight
padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2);
color: @navbarLinkColor;
text-decoration: none;
text-shadow: 0 1px 0 @navbarBackgroundHighlight;
}
.navbar .nav .dropdown-toggle .caret {
margin-top: 8px;
}
// Hover/focus
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
color: @navbarLinkColorHover;
text-decoration: none;
}
// Active nav items
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: @navbarLinkColorActive;
text-decoration: none;
background-color: @navbarLinkBackgroundActive;
.box-shadow(inset 0 3px 8px rgba(0,0,0,.125));
}
// Navbar button for toggling navbar items in responsive layouts
// These definitions need to come after '.navbar .btn'
.navbar .btn-navbar {
display: none;
float: right;
padding: 7px 10px;
margin-left: 5px;
margin-right: 5px;
.buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%));
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
}
.navbar .btn-navbar .icon-bar {
display: block;
width: 18px;
height: 2px;
background-color: #f5f5f5;
.border-radius(1px);
.box-shadow(0 1px 0 rgba(0,0,0,.25));
}
.btn-navbar .icon-bar + .icon-bar {
margin-top: 3px;
}
// Dropdown menus
// --------------
// Menu position and menu carets
.navbar .nav > li > .dropdown-menu {
&:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: @dropdownBorder;
position: absolute;
top: -7px;
left: 9px;
}
&:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid @dropdownBackground;
position: absolute;
top: -6px;
left: 10px;
}
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .nav > li > .dropdown-menu {
&:before {
border-top: 7px solid #ccc;
border-top-color: @dropdownBorder;
border-bottom: 0;
bottom: -7px;
top: auto;
}
&:after {
border-top: 6px solid @dropdownBackground;
border-bottom: 0;
bottom: -6px;
top: auto;
}
}
// Caret should match text color on hover/focus
.navbar .nav li.dropdown > a:hover .caret,
.navbar .nav li.dropdown > a:focus .caret {
border-top-color: @navbarLinkColorHover;
border-bottom-color: @navbarLinkColorHover;
}
// Remove background color from open dropdown
.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
background-color: @navbarLinkBackgroundActive;
color: @navbarLinkColorActive;
}
.navbar .nav li.dropdown > .dropdown-toggle .caret {
border-top-color: @navbarLinkColor;
border-bottom-color: @navbarLinkColor;
}
.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: @navbarLinkColorActive;
border-bottom-color: @navbarLinkColorActive;
}
// Right aligned menus need alt position
.navbar .pull-right > li > .dropdown-menu,
.navbar .nav > li > .dropdown-menu.pull-right {
left: auto;
right: 0;
&:before {
left: auto;
right: 12px;
}
&:after {
left: auto;
right: 13px;
}
.dropdown-menu {
left: auto;
right: 100%;
margin-left: 0;
margin-right: -1px;
.border-radius(6px 0 6px 6px);
}
}
// Inverted navbar
// -------------------------
.navbar-inverse {
.navbar-inner {
#gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
border-color: @navbarInverseBorder;
}
.brand,
.nav > li > a {
color: @navbarInverseLinkColor;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
&:hover,
&:focus {
color: @navbarInverseLinkColorHover;
}
}
.brand {
color: @navbarInverseBrandColor;
}
.navbar-text {
color: @navbarInverseText;
}
.nav > li > a:focus,
.nav > li > a:hover {
background-color: @navbarInverseLinkBackgroundHover;
color: @navbarInverseLinkColorHover;
}
.nav .active > a,
.nav .active > a:hover,
.nav .active > a:focus {
color: @navbarInverseLinkColorActive;
background-color: @navbarInverseLinkBackgroundActive;
}
// Inline text links
.navbar-link {
color: @navbarInverseLinkColor;
&:hover,
&:focus {
color: @navbarInverseLinkColorHover;
}
}
// Dividers in navbar
.divider-vertical {
border-left-color: @navbarInverseBackground;
border-right-color: @navbarInverseBackgroundHighlight;
}
// Dropdowns
.nav li.dropdown.open > .dropdown-toggle,
.nav li.dropdown.active > .dropdown-toggle,
.nav li.dropdown.open.active > .dropdown-toggle {
background-color: @navbarInverseLinkBackgroundActive;
color: @navbarInverseLinkColorActive;
}
.nav li.dropdown > a:hover .caret,
.nav li.dropdown > a:focus .caret {
border-top-color: @navbarInverseLinkColorActive;
border-bottom-color: @navbarInverseLinkColorActive;
}
.nav li.dropdown > .dropdown-toggle .caret {
border-top-color: @navbarInverseLinkColor;
border-bottom-color: @navbarInverseLinkColor;
}
.nav li.dropdown.open > .dropdown-toggle .caret,
.nav li.dropdown.active > .dropdown-toggle .caret,
.nav li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: @navbarInverseLinkColorActive;
border-bottom-color: @navbarInverseLinkColorActive;
}
// Navbar search
.navbar-search {
.search-query {
color: @white;
background-color: @navbarInverseSearchBackground;
border-color: @navbarInverseSearchBorder;
.box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
.transition(none);
.placeholder(@navbarInverseSearchPlaceholderColor);
// Focus states (we use .focused since IE7-8 and down doesn't support :focus)
&:focus,
&.focused {
padding: 5px 15px;
color: @grayDark;
text-shadow: 0 1px 0 @white;
background-color: @navbarInverseSearchBackgroundFocus;
border: 0;
.box-shadow(0 0 3px rgba(0,0,0,.15));
outline: 0;
}
}
}
// Navbar collapse button
.btn-navbar {
.buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%));
}
}

View File

@ -0,0 +1,409 @@
//
// Navs
// --------------------------------------------------
// BASE CLASS
// ----------
.nav {
margin-left: 0;
margin-bottom: @baseLineHeight;
list-style: none;
}
// Make links block level
.nav > li > a {
display: block;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: @grayLighter;
}
// Prevent IE8 from misplacing imgs
// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
.nav > li > a > img {
max-width: none;
}
// Redeclare pull classes because of specifity
.nav > .pull-right {
float: right;
}
// Nav headers (for dropdowns and lists)
.nav-header {
display: block;
padding: 3px 15px;
font-size: 11px;
font-weight: bold;
line-height: @baseLineHeight;
color: @grayLight;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
text-transform: uppercase;
}
// Space them out when they follow another list item (link)
.nav li + .nav-header {
margin-top: 9px;
}
// NAV LIST
// --------
.nav-list {
padding-left: 15px;
padding-right: 15px;
margin-bottom: 0;
}
.nav-list > li > a,
.nav-list .nav-header {
margin-left: -15px;
margin-right: -15px;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.nav-list > li > a {
padding: 3px 15px;
}
.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
color: @white;
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
background-color: @linkColor;
}
.nav-list [class^="icon-"],
.nav-list [class*=" icon-"] {
margin-right: 2px;
}
// Dividers (basically an hr) within the dropdown
.nav-list .divider {
.nav-divider();
}
// TABS AND PILLS
// -------------
// Common styles
.nav-tabs,
.nav-pills {
.clearfix();
}
.nav-tabs > li,
.nav-pills > li {
float: left;
}
.nav-tabs > li > a,
.nav-pills > li > a {
padding-right: 12px;
padding-left: 12px;
margin-right: 2px;
line-height: 14px; // keeps the overall height an even number
}
// TABS
// ----
// Give the tabs something to sit on
.nav-tabs {
border-bottom: 1px solid #ddd;
}
// Make the list-items overlay the bottom border
.nav-tabs > li {
margin-bottom: -1px;
}
// Actual tabs (as links)
.nav-tabs > li > a {
padding-top: 8px;
padding-bottom: 8px;
line-height: @baseLineHeight;
border: 1px solid transparent;
.border-radius(4px 4px 0 0);
&:hover,
&:focus {
border-color: @grayLighter @grayLighter #ddd;
}
}
// Active state, and it's :hover/:focus to override normal :hover/:focus
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
color: @gray;
background-color: @bodyBackground;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
// PILLS
// -----
// Links rendered as pills
.nav-pills > li > a {
padding-top: 8px;
padding-bottom: 8px;
margin-top: 2px;
margin-bottom: 2px;
.border-radius(5px);
}
// Active state
.nav-pills > .active > a,
.nav-pills > .active > a:hover,
.nav-pills > .active > a:focus {
color: @white;
background-color: @linkColor;
}
// STACKED NAV
// -----------
// Stacked tabs and pills
.nav-stacked > li {
float: none;
}
.nav-stacked > li > a {
margin-right: 0; // no need for the gap between nav items
}
// Tabs
.nav-tabs.nav-stacked {
border-bottom: 0;
}
.nav-tabs.nav-stacked > li > a {
border: 1px solid #ddd;
.border-radius(0);
}
.nav-tabs.nav-stacked > li:first-child > a {
.border-top-radius(4px);
}
.nav-tabs.nav-stacked > li:last-child > a {
.border-bottom-radius(4px);
}
.nav-tabs.nav-stacked > li > a:hover,
.nav-tabs.nav-stacked > li > a:focus {
border-color: #ddd;
z-index: 2;
}
// Pills
.nav-pills.nav-stacked > li > a {
margin-bottom: 3px;
}
.nav-pills.nav-stacked > li:last-child > a {
margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
}
// DROPDOWNS
// ---------
.nav-tabs .dropdown-menu {
.border-radius(0 0 6px 6px); // remove the top rounded corners here since there is a hard edge above the menu
}
.nav-pills .dropdown-menu {
.border-radius(6px); // make rounded corners match the pills
}
// Default dropdown links
// -------------------------
// Make carets use linkColor to start
.nav .dropdown-toggle .caret {
border-top-color: @linkColor;
border-bottom-color: @linkColor;
margin-top: 6px;
}
.nav .dropdown-toggle:hover .caret,
.nav .dropdown-toggle:focus .caret {
border-top-color: @linkColorHover;
border-bottom-color: @linkColorHover;
}
/* move down carets for tabs */
.nav-tabs .dropdown-toggle .caret {
margin-top: 8px;
}
// Active dropdown links
// -------------------------
.nav .active .dropdown-toggle .caret {
border-top-color: #fff;
border-bottom-color: #fff;
}
.nav-tabs .active .dropdown-toggle .caret {
border-top-color: @gray;
border-bottom-color: @gray;
}
// Active:hover/:focus dropdown links
// -------------------------
.nav > .dropdown.active > a:hover,
.nav > .dropdown.active > a:focus {
cursor: pointer;
}
// Open dropdowns
// -------------------------
.nav-tabs .open .dropdown-toggle,
.nav-pills .open .dropdown-toggle,
.nav > li.dropdown.open.active > a:hover,
.nav > li.dropdown.open.active > a:focus {
color: @white;
background-color: @grayLight;
border-color: @grayLight;
}
.nav li.dropdown.open .caret,
.nav li.dropdown.open.active .caret,
.nav li.dropdown.open a:hover .caret,
.nav li.dropdown.open a:focus .caret {
border-top-color: @white;
border-bottom-color: @white;
.opacity(100);
}
// Dropdowns in stacked tabs
.tabs-stacked .open > a:hover,
.tabs-stacked .open > a:focus {
border-color: @grayLight;
}
// TABBABLE
// --------
// COMMON STYLES
// -------------
// Clear any floats
.tabbable {
.clearfix();
}
.tab-content {
overflow: auto; // prevent content from running below tabs
}
// Remove border on bottom, left, right
.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
border-bottom: 0;
}
// Show/hide tabbable areas
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}
.tab-content > .active,
.pill-content > .active {
display: block;
}
// BOTTOM
// ------
.tabs-below > .nav-tabs {
border-top: 1px solid #ddd;
}
.tabs-below > .nav-tabs > li {
margin-top: -1px;
margin-bottom: 0;
}
.tabs-below > .nav-tabs > li > a {
.border-radius(0 0 4px 4px);
&:hover,
&:focus {
border-bottom-color: transparent;
border-top-color: #ddd;
}
}
.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
border-color: transparent #ddd #ddd #ddd;
}
// LEFT & RIGHT
// ------------
// Common styles
.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
float: none;
}
.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
min-width: 74px;
margin-right: 0;
margin-bottom: 3px;
}
// Tabs on the left
.tabs-left > .nav-tabs {
float: left;
margin-right: 19px;
border-right: 1px solid #ddd;
}
.tabs-left > .nav-tabs > li > a {
margin-right: -1px;
.border-radius(4px 0 0 4px);
}
.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
border-color: @grayLighter #ddd @grayLighter @grayLighter;
}
.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
border-color: #ddd transparent #ddd #ddd;
*border-right-color: @white;
}
// Tabs on the right
.tabs-right > .nav-tabs {
float: right;
margin-left: 19px;
border-left: 1px solid #ddd;
}
.tabs-right > .nav-tabs > li > a {
margin-left: -1px;
.border-radius(0 4px 4px 0);
}
.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
border-color: @grayLighter @grayLighter @grayLighter #ddd;
}
.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
border-color: #ddd #ddd #ddd transparent;
*border-left-color: @white;
}
// DISABLED STATES
// ---------------
// Gray out text
.nav > .disabled > a {
color: @grayLight;
}
// Nuke hover/focus effects
.nav > .disabled > a:hover,
.nav > .disabled > a:focus {
text-decoration: none;
background-color: transparent;
cursor: default;
}

View File

@ -0,0 +1,43 @@
//
// Pager pagination
// --------------------------------------------------
.pager {
margin: @baseLineHeight 0;
list-style: none;
text-align: center;
.clearfix();
}
.pager li {
display: inline;
}
.pager li > a,
.pager li > span {
display: inline-block;
padding: 5px 14px;
background-color: #fff;
border: 1px solid #ddd;
.border-radius(15px);
}
.pager li > a:hover,
.pager li > a:focus {
text-decoration: none;
background-color: #f5f5f5;
}
.pager .next > a,
.pager .next > span {
float: right;
}
.pager .previous > a,
.pager .previous > span {
float: left;
}
.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span {
color: @grayLight;
background-color: #fff;
cursor: default;
}

View File

@ -0,0 +1,123 @@
//
// Pagination (multiple pages)
// --------------------------------------------------
// Space out pagination from surrounding content
.pagination {
margin: @baseLineHeight 0;
}
.pagination ul {
// Allow for text-based alignment
display: inline-block;
.ie7-inline-block();
// Reset default ul styles
margin-left: 0;
margin-bottom: 0;
// Visuals
.border-radius(@baseBorderRadius);
.box-shadow(0 1px 2px rgba(0,0,0,.05));
}
.pagination ul > li {
display: inline; // Remove list-style and block-level defaults
}
.pagination ul > li > a,
.pagination ul > li > span {
float: left; // Collapse white-space
padding: 4px 12px;
line-height: @baseLineHeight;
text-decoration: none;
background-color: @paginationBackground;
border: 1px solid @paginationBorder;
border-left-width: 0;
}
.pagination ul > li > a:hover,
.pagination ul > li > a:focus,
.pagination ul > .active > a,
.pagination ul > .active > span {
background-color: @paginationActiveBackground;
}
.pagination ul > .active > a,
.pagination ul > .active > span {
color: @grayLight;
cursor: default;
}
.pagination ul > .disabled > span,
.pagination ul > .disabled > a,
.pagination ul > .disabled > a:hover,
.pagination ul > .disabled > a:focus {
color: @grayLight;
background-color: transparent;
cursor: default;
}
.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span {
border-left-width: 1px;
.border-left-radius(@baseBorderRadius);
}
.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span {
.border-right-radius(@baseBorderRadius);
}
// Alignment
// --------------------------------------------------
.pagination-centered {
text-align: center;
}
.pagination-right {
text-align: right;
}
// Sizing
// --------------------------------------------------
// Large
.pagination-large {
ul > li > a,
ul > li > span {
padding: @paddingLarge;
font-size: @fontSizeLarge;
}
ul > li:first-child > a,
ul > li:first-child > span {
.border-left-radius(@borderRadiusLarge);
}
ul > li:last-child > a,
ul > li:last-child > span {
.border-right-radius(@borderRadiusLarge);
}
}
// Small and mini
.pagination-mini,
.pagination-small {
ul > li:first-child > a,
ul > li:first-child > span {
.border-left-radius(@borderRadiusSmall);
}
ul > li:last-child > a,
ul > li:last-child > span {
.border-right-radius(@borderRadiusSmall);
}
}
// Small
.pagination-small {
ul > li > a,
ul > li > span {
padding: @paddingSmall;
font-size: @fontSizeSmall;
}
}
// Mini
.pagination-mini {
ul > li > a,
ul > li > span {
padding: @paddingMini;
font-size: @fontSizeMini;
}
}

View File

@ -0,0 +1,133 @@
//
// Popovers
// --------------------------------------------------
.popover {
position: absolute;
top: 0;
left: 0;
z-index: @zindexPopover;
display: none;
max-width: 276px;
padding: 1px;
text-align: left; // Reset given new insertion method
background-color: @popoverBackground;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
.border-radius(6px);
.box-shadow(0 5px 10px rgba(0,0,0,.2));
// Overrides for proper insertion
white-space: normal;
// Offset the popover to account for the popover arrow
&.top { margin-top: -10px; }
&.right { margin-left: 10px; }
&.bottom { margin-top: 10px; }
&.left { margin-left: -10px; }
}
.popover-title {
margin: 0; // reset heading margin
padding: 8px 14px;
font-size: 14px;
font-weight: normal;
line-height: 18px;
background-color: @popoverTitleBackground;
border-bottom: 1px solid darken(@popoverTitleBackground, 5%);
.border-radius(5px 5px 0 0);
&:empty {
display: none;
}
}
.popover-content {
padding: 9px 14px;
}
// Arrows
//
// .arrow is outer, .arrow:after is inner
.popover .arrow,
.popover .arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.popover .arrow {
border-width: @popoverArrowOuterWidth;
}
.popover .arrow:after {
border-width: @popoverArrowWidth;
content: "";
}
.popover {
&.top .arrow {
left: 50%;
margin-left: -@popoverArrowOuterWidth;
border-bottom-width: 0;
border-top-color: #999; // IE8 fallback
border-top-color: @popoverArrowOuterColor;
bottom: -@popoverArrowOuterWidth;
&:after {
bottom: 1px;
margin-left: -@popoverArrowWidth;
border-bottom-width: 0;
border-top-color: @popoverArrowColor;
}
}
&.right .arrow {
top: 50%;
left: -@popoverArrowOuterWidth;
margin-top: -@popoverArrowOuterWidth;
border-left-width: 0;
border-right-color: #999; // IE8 fallback
border-right-color: @popoverArrowOuterColor;
&:after {
left: 1px;
bottom: -@popoverArrowWidth;
border-left-width: 0;
border-right-color: @popoverArrowColor;
}
}
&.bottom .arrow {
left: 50%;
margin-left: -@popoverArrowOuterWidth;
border-top-width: 0;
border-bottom-color: #999; // IE8 fallback
border-bottom-color: @popoverArrowOuterColor;
top: -@popoverArrowOuterWidth;
&:after {
top: 1px;
margin-left: -@popoverArrowWidth;
border-top-width: 0;
border-bottom-color: @popoverArrowColor;
}
}
&.left .arrow {
top: 50%;
right: -@popoverArrowOuterWidth;
margin-top: -@popoverArrowOuterWidth;
border-right-width: 0;
border-left-color: #999; // IE8 fallback
border-left-color: @popoverArrowOuterColor;
&:after {
right: 1px;
border-right-width: 0;
border-left-color: @popoverArrowColor;
bottom: -@popoverArrowWidth;
}
}
}

View File

@ -0,0 +1,122 @@
//
// Progress bars
// --------------------------------------------------
// ANIMATIONS
// ----------
// Webkit
@-webkit-keyframes progress-bar-stripes {
from { background-position: 40px 0; }
to { background-position: 0 0; }
}
// Firefox
@-moz-keyframes progress-bar-stripes {
from { background-position: 40px 0; }
to { background-position: 0 0; }
}
// IE9
@-ms-keyframes progress-bar-stripes {
from { background-position: 40px 0; }
to { background-position: 0 0; }
}
// Opera
@-o-keyframes progress-bar-stripes {
from { background-position: 0 0; }
to { background-position: 40px 0; }
}
// Spec
@keyframes progress-bar-stripes {
from { background-position: 40px 0; }
to { background-position: 0 0; }
}
// THE BARS
// --------
// Outer container
.progress {
overflow: hidden;
height: @baseLineHeight;
margin-bottom: @baseLineHeight;
#gradient > .vertical(#f5f5f5, #f9f9f9);
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
.border-radius(@baseBorderRadius);
}
// Bar of progress
.progress .bar {
width: 0%;
height: 100%;
color: @white;
float: left;
font-size: 12px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
#gradient > .vertical(#149bdf, #0480be);
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
.box-sizing(border-box);
.transition(width .6s ease);
}
.progress .bar + .bar {
.box-shadow(~"inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)");
}
// Striped bars
.progress-striped .bar {
#gradient > .striped(#149bdf);
.background-size(40px 40px);
}
// Call animation for the active one
.progress.active .bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-moz-animation: progress-bar-stripes 2s linear infinite;
-ms-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
// COLORS
// ------
// Danger (red)
.progress-danger .bar, .progress .bar-danger {
#gradient > .vertical(#ee5f5b, #c43c35);
}
.progress-danger.progress-striped .bar, .progress-striped .bar-danger {
#gradient > .striped(#ee5f5b);
}
// Success (green)
.progress-success .bar, .progress .bar-success {
#gradient > .vertical(#62c462, #57a957);
}
.progress-success.progress-striped .bar, .progress-striped .bar-success {
#gradient > .striped(#62c462);
}
// Info (teal)
.progress-info .bar, .progress .bar-info {
#gradient > .vertical(#5bc0de, #339bb9);
}
.progress-info.progress-striped .bar, .progress-striped .bar-info {
#gradient > .striped(#5bc0de);
}
// Warning (orange)
.progress-warning .bar, .progress .bar-warning {
#gradient > .vertical(lighten(@orange, 15%), @orange);
}
.progress-warning.progress-striped .bar, .progress-striped .bar-warning {
#gradient > .striped(lighten(@orange, 15%));
}

View File

@ -0,0 +1,216 @@
//
// Reset CSS
// Adapted from http://github.com/necolas/normalize.css
// --------------------------------------------------
// Display in IE6-9 and FF3
// -------------------------
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
// Display block in IE6-9 and FF3
// -------------------------
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
// Prevents modern browsers from displaying 'audio' without controls
// -------------------------
audio:not([controls]) {
display: none;
}
// Base settings
// -------------------------
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
// Focus states
a:focus {
.tab-focus();
}
// Hover & Active
a:hover,
a:active {
outline: 0;
}
// Prevents sub and sup affecting line-height in all browsers
// -------------------------
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
// Img border in a's and image quality
// -------------------------
img {
/* Responsive images (ensure images don't scale beyond their parents) */
max-width: 100%; /* Part 1: Set a maxium relative to the parent */
width: auto\9; /* IE7-8 need help adjusting responsive images */
height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
// Prevent max-width from affecting Google Maps
#map_canvas img,
.google-maps img {
max-width: none;
}
// Forms
// -------------------------
// Font size in all browsers, margin changes, misc consistency
button,
input,
select,
textarea {
margin: 0;
font-size: 100%;
vertical-align: middle;
}
button,
input {
*overflow: visible; // Inner spacing ie IE6/7
line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
}
button::-moz-focus-inner,
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
padding: 0;
border: 0;
}
button,
html input[type="button"], // Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls.
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; // Corrects inability to style clickable `input` types in iOS.
cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others.
}
label,
select,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"] {
cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others.
}
input[type="search"] { // Appearance in Safari/Chrome
.box-sizing(content-box);
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
}
textarea {
overflow: auto; // Remove vertical scrollbar in IE6-9
vertical-align: top; // Readability and alignment cross-browser
}
// Printing
// -------------------------
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
@media print {
* {
text-shadow: none !important;
color: #000 !important; // Black prints faster: h5bp.com/s
background: transparent !important;
box-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
// Don't show links for images, or javascript/internal links
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; // h5bp.com/t
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}

View File

@ -0,0 +1,28 @@
//
// Responsive: Large desktop and up
// --------------------------------------------------
@media (min-width: 1200px) {
// Fixed grid
#grid > .core(@gridColumnWidth1200, @gridGutterWidth1200);
// Fluid grid
#grid > .fluid(@fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
// Input grid
#grid > .input(@gridColumnWidth1200, @gridGutterWidth1200);
// Thumbnails
.thumbnails {
margin-left: -@gridGutterWidth1200;
}
.thumbnails > li {
margin-left: @gridGutterWidth1200;
}
.row-fluid .thumbnails {
margin-left: 0;
}
}

View File

@ -0,0 +1,193 @@
//
// Responsive: Landscape phone to desktop/tablet
// --------------------------------------------------
@media (max-width: 767px) {
// Padding to set content in a bit
body {
padding-left: 20px;
padding-right: 20px;
}
// Negative indent the now static "fixed" navbar
.navbar-fixed-top,
.navbar-fixed-bottom,
.navbar-static-top {
margin-left: -20px;
margin-right: -20px;
}
// Remove padding on container given explicit padding set on body
.container-fluid {
padding: 0;
}
// TYPOGRAPHY
// ----------
// Reset horizontal dl
.dl-horizontal {
dt {
float: none;
clear: none;
width: auto;
text-align: left;
}
dd {
margin-left: 0;
}
}
// GRID & CONTAINERS
// -----------------
// Remove width from containers
.container {
width: auto;
}
// Fluid rows
.row-fluid {
width: 100%;
}
// Undo negative margin on rows and thumbnails
.row,
.thumbnails {
margin-left: 0;
}
.thumbnails > li {
float: none;
margin-left: 0; // Reset the default margin for all li elements when no .span* classes are present
}
// Make all grid-sized elements block level again
[class*="span"],
.uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing
.row-fluid [class*="span"] {
float: none;
display: block;
width: 100%;
margin-left: 0;
.box-sizing(border-box);
}
.span12,
.row-fluid .span12 {
width: 100%;
.box-sizing(border-box);
}
.row-fluid [class*="offset"]:first-child {
margin-left: 0;
}
// FORM FIELDS
// -----------
// Make span* classes full width
.input-large,
.input-xlarge,
.input-xxlarge,
input[class*="span"],
select[class*="span"],
textarea[class*="span"],
.uneditable-input {
.input-block-level();
}
// But don't let it screw up prepend/append inputs
.input-prepend input,
.input-append input,
.input-prepend input[class*="span"],
.input-append input[class*="span"] {
display: inline-block; // redeclare so they don't wrap to new lines
width: auto;
}
.controls-row [class*="span"] + [class*="span"] {
margin-left: 0;
}
// Modals
.modal {
position: fixed;
top: 20px;
left: 20px;
right: 20px;
width: auto;
margin: 0;
&.fade { top: -100px; }
&.fade.in { top: 20px; }
}
}
// UP TO LANDSCAPE PHONE
// ---------------------
@media (max-width: 480px) {
// Smooth out the collapsing/expanding nav
.nav-collapse {
-webkit-transform: translate3d(0, 0, 0); // activate the GPU
}
// Block level the page header small tag for readability
.page-header h1 small {
display: block;
line-height: @baseLineHeight;
}
// Update checkboxes for iOS
input[type="checkbox"],
input[type="radio"] {
border: 1px solid #ccc;
}
// Remove the horizontal form styles
.form-horizontal {
.control-label {
float: none;
width: auto;
padding-top: 0;
text-align: left;
}
// Move over all input controls and content
.controls {
margin-left: 0;
}
// Move the options list down to align with labels
.control-list {
padding-top: 0; // has to be padding because margin collaspes
}
// Move over buttons in .form-actions to align with .controls
.form-actions {
padding-left: 10px;
padding-right: 10px;
}
}
// Medias
// Reset float and spacing to stack
.media .pull-left,
.media .pull-right {
float: none;
display: block;
margin-bottom: 10px;
}
// Remove side margins since we stack instead of indent
.media-object {
margin-right: 0;
margin-left: 0;
}
// Modals
.modal {
top: 10px;
left: 10px;
right: 10px;
}
.modal-header .close {
padding: 10px;
margin: -10px;
}
// Carousel
.carousel-caption {
position: static;
}
}

View File

@ -0,0 +1,19 @@
//
// Responsive: Tablet to desktop
// --------------------------------------------------
@media (min-width: 768px) and (max-width: 979px) {
// Fixed grid
#grid > .core(@gridColumnWidth768, @gridGutterWidth768);
// Fluid grid
#grid > .fluid(@fluidGridColumnWidth768, @fluidGridGutterWidth768);
// Input grid
#grid > .input(@gridColumnWidth768, @gridGutterWidth768);
// No need to reset .thumbnails here since it's the same @gridGutterWidth
}

View File

@ -0,0 +1,189 @@
//
// Responsive: Navbar
// --------------------------------------------------
// TABLETS AND BELOW
// -----------------
@media (max-width: @navbarCollapseWidth) {
// UNFIX THE TOPBAR
// ----------------
// Remove any padding from the body
body {
padding-top: 0;
}
// Unfix the navbars
.navbar-fixed-top,
.navbar-fixed-bottom {
position: static;
}
.navbar-fixed-top {
margin-bottom: @baseLineHeight;
}
.navbar-fixed-bottom {
margin-top: @baseLineHeight;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
padding: 5px;
}
.navbar .container {
width: auto;
padding: 0;
}
// Account for brand name
.navbar .brand {
padding-left: 10px;
padding-right: 10px;
margin: 0 0 0 -5px;
}
// COLLAPSIBLE NAVBAR
// ------------------
// Nav collapse clears brand
.nav-collapse {
clear: both;
}
// Block-level the nav
.nav-collapse .nav {
float: none;
margin: 0 0 (@baseLineHeight / 2);
}
.nav-collapse .nav > li {
float: none;
}
.nav-collapse .nav > li > a {
margin-bottom: 2px;
}
.nav-collapse .nav > .divider-vertical {
display: none;
}
.nav-collapse .nav .nav-header {
color: @navbarText;
text-shadow: none;
}
// Nav and dropdown links in navbar
.nav-collapse .nav > li > a,
.nav-collapse .dropdown-menu a {
padding: 9px 15px;
font-weight: bold;
color: @navbarLinkColor;
.border-radius(3px);
}
// Buttons
.nav-collapse .btn {
padding: 4px 10px 4px;
font-weight: normal;
.border-radius(@baseBorderRadius);
}
.nav-collapse .dropdown-menu li + li a {
margin-bottom: 2px;
}
.nav-collapse .nav > li > a:hover,
.nav-collapse .nav > li > a:focus,
.nav-collapse .dropdown-menu a:hover,
.nav-collapse .dropdown-menu a:focus {
background-color: @navbarBackground;
}
.navbar-inverse .nav-collapse .nav > li > a,
.navbar-inverse .nav-collapse .dropdown-menu a {
color: @navbarInverseLinkColor;
}
.navbar-inverse .nav-collapse .nav > li > a:hover,
.navbar-inverse .nav-collapse .nav > li > a:focus,
.navbar-inverse .nav-collapse .dropdown-menu a:hover,
.navbar-inverse .nav-collapse .dropdown-menu a:focus {
background-color: @navbarInverseBackground;
}
// Buttons in the navbar
.nav-collapse.in .btn-group {
margin-top: 5px;
padding: 0;
}
// Dropdowns in the navbar
.nav-collapse .dropdown-menu {
position: static;
top: auto;
left: auto;
float: none;
display: none;
max-width: none;
margin: 0 15px;
padding: 0;
background-color: transparent;
border: none;
.border-radius(0);
.box-shadow(none);
}
.nav-collapse .open > .dropdown-menu {
display: block;
}
.nav-collapse .dropdown-menu:before,
.nav-collapse .dropdown-menu:after {
display: none;
}
.nav-collapse .dropdown-menu .divider {
display: none;
}
.nav-collapse .nav > li > .dropdown-menu {
&:before,
&:after {
display: none;
}
}
// Forms in navbar
.nav-collapse .navbar-form,
.nav-collapse .navbar-search {
float: none;
padding: (@baseLineHeight / 2) 15px;
margin: (@baseLineHeight / 2) 0;
border-top: 1px solid @navbarBackground;
border-bottom: 1px solid @navbarBackground;
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)");
}
.navbar-inverse .nav-collapse .navbar-form,
.navbar-inverse .nav-collapse .navbar-search {
border-top-color: @navbarInverseBackground;
border-bottom-color: @navbarInverseBackground;
}
// Pull right (secondary) nav content
.navbar .nav-collapse .nav.pull-right {
float: none;
margin-left: 0;
}
// Hide everything in the navbar save .brand and toggle button */
.nav-collapse,
.nav-collapse.collapse {
overflow: hidden;
height: 0;
}
// Navbar button
.navbar .btn-navbar {
display: block;
}
// STATIC NAVBAR
// -------------
.navbar-static .navbar-inner {
padding-left: 10px;
padding-right: 10px;
}
}
// DEFAULT DESKTOP
// ---------------
@media (min-width: @navbarCollapseDesktopWidth) {
// Required to make the collapsing navbar work on regular desktops
.nav-collapse.collapse {
height: auto !important;
overflow: visible !important;
}
}

View File

@ -0,0 +1,59 @@
//
// Responsive: Utility classes
// --------------------------------------------------
// IE10 Metro responsive
// Required for Windows 8 Metro split-screen snapping with IE10
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
@-ms-viewport{
width: device-width;
}
// Hide from screenreaders and browsers
// Credit: HTML5 Boilerplate
.hidden {
display: none;
visibility: hidden;
}
// Visibility utilities
// For desktops
.visible-phone { display: none !important; }
.visible-tablet { display: none !important; }
.hidden-phone { }
.hidden-tablet { }
.hidden-desktop { display: none !important; }
.visible-desktop { display: inherit !important; }
// Tablets & small desktops only
@media (min-width: 768px) and (max-width: 979px) {
// Hide everything else
.hidden-desktop { display: inherit !important; }
.visible-desktop { display: none !important ; }
// Show
.visible-tablet { display: inherit !important; }
// Hide
.hidden-tablet { display: none !important; }
}
// Phones only
@media (max-width: 767px) {
// Hide everything else
.hidden-desktop { display: inherit !important; }
.visible-desktop { display: none !important; }
// Show
.visible-phone { display: inherit !important; } // Use inherit to restore previous behavior
// Hide
.hidden-phone { display: none !important; }
}
// Print utilities
.visible-print { display: none !important; }
.hidden-print { }
@media print {
.visible-print { display: inherit !important; }
.hidden-print { display: none !important; }
}

View File

@ -0,0 +1,48 @@
/*!
* Bootstrap Responsive v2.3.0
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/
// Responsive.less
// For phone and tablet devices
// -------------------------------------------------------------
// REPEAT VARIABLES & MIXINS
// -------------------------
// Required since we compile the responsive stuff separately
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";
// RESPONSIVE CLASSES
// ------------------
@import "responsive-utilities.less";
// MEDIA QUERIES
// ------------------
// Large desktops
@import "responsive-1200px-min.less";
// Tablets to regular desktops
@import "responsive-768px-979px.less";
// Phones to portrait tablets and narrow desktops
@import "responsive-767px-max.less";
// RESPONSIVE NAVBAR
// ------------------
// From 979px and below, show a button to toggle navbar contents
@import "responsive-navbar.less";

View File

@ -0,0 +1,53 @@
//
// Scaffolding
// --------------------------------------------------
// Body reset
// -------------------------
body {
margin: 0;
font-family: @baseFontFamily;
font-size: @baseFontSize;
line-height: @baseLineHeight;
color: @textColor;
background-color: @bodyBackground;
}
// Links
// -------------------------
a {
color: @linkColor;
text-decoration: none;
}
a:hover,
a:focus {
color: @linkColorHover;
text-decoration: underline;
}
// Images
// -------------------------
// Rounded corners
.img-rounded {
.border-radius(6px);
}
// Add polaroid-esque trim
.img-polaroid {
padding: 4px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
.box-shadow(0 1px 3px rgba(0,0,0,.1));
}
// Perfect circle
.img-circle {
.border-radius(500px); // crank the border-radius so it works with most reasonably sized images
}

View File

@ -0,0 +1,197 @@
//
// Sprites
// --------------------------------------------------
// ICONS
// -----
// All icons receive the styles of the <i> tag with a base class
// of .i and are then given a unique class to add width, height,
// and background-position. Your resulting HTML will look like
// <i class="icon-inbox"></i>.
// For the white version of the icons, just add the .icon-white class:
// <i class="icon-inbox icon-white"></i>
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
.ie7-restore-right-whitespace();
line-height: 14px;
vertical-align: text-top;
background-image: url("@{iconSpritePath}");
background-position: 14px 14px;
background-repeat: no-repeat;
margin-top: 1px;
}
/* White icons with optional class, or on hover/focus/active states of certain elements */
.icon-white,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:focus > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > li > a:focus > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:focus > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"],
.dropdown-submenu:focus > a > [class*=" icon-"] {
background-image: url("@{iconWhiteSpritePath}");
}
.icon-glass { background-position: 0 0; }
.icon-music { background-position: -24px 0; }
.icon-search { background-position: -48px 0; }
.icon-envelope { background-position: -72px 0; }
.icon-heart { background-position: -96px 0; }
.icon-star { background-position: -120px 0; }
.icon-star-empty { background-position: -144px 0; }
.icon-user { background-position: -168px 0; }
.icon-film { background-position: -192px 0; }
.icon-th-large { background-position: -216px 0; }
.icon-th { background-position: -240px 0; }
.icon-th-list { background-position: -264px 0; }
.icon-ok { background-position: -288px 0; }
.icon-remove { background-position: -312px 0; }
.icon-zoom-in { background-position: -336px 0; }
.icon-zoom-out { background-position: -360px 0; }
.icon-off { background-position: -384px 0; }
.icon-signal { background-position: -408px 0; }
.icon-cog { background-position: -432px 0; }
.icon-trash { background-position: -456px 0; }
.icon-home { background-position: 0 -24px; }
.icon-file { background-position: -24px -24px; }
.icon-time { background-position: -48px -24px; }
.icon-road { background-position: -72px -24px; }
.icon-download-alt { background-position: -96px -24px; }
.icon-download { background-position: -120px -24px; }
.icon-upload { background-position: -144px -24px; }
.icon-inbox { background-position: -168px -24px; }
.icon-play-circle { background-position: -192px -24px; }
.icon-repeat { background-position: -216px -24px; }
.icon-refresh { background-position: -240px -24px; }
.icon-list-alt { background-position: -264px -24px; }
.icon-lock { background-position: -287px -24px; } // 1px off
.icon-flag { background-position: -312px -24px; }
.icon-headphones { background-position: -336px -24px; }
.icon-volume-off { background-position: -360px -24px; }
.icon-volume-down { background-position: -384px -24px; }
.icon-volume-up { background-position: -408px -24px; }
.icon-qrcode { background-position: -432px -24px; }
.icon-barcode { background-position: -456px -24px; }
.icon-tag { background-position: 0 -48px; }
.icon-tags { background-position: -25px -48px; } // 1px off
.icon-book { background-position: -48px -48px; }
.icon-bookmark { background-position: -72px -48px; }
.icon-print { background-position: -96px -48px; }
.icon-camera { background-position: -120px -48px; }
.icon-font { background-position: -144px -48px; }
.icon-bold { background-position: -167px -48px; } // 1px off
.icon-italic { background-position: -192px -48px; }
.icon-text-height { background-position: -216px -48px; }
.icon-text-width { background-position: -240px -48px; }
.icon-align-left { background-position: -264px -48px; }
.icon-align-center { background-position: -288px -48px; }
.icon-align-right { background-position: -312px -48px; }
.icon-align-justify { background-position: -336px -48px; }
.icon-list { background-position: -360px -48px; }
.icon-indent-left { background-position: -384px -48px; }
.icon-indent-right { background-position: -408px -48px; }
.icon-facetime-video { background-position: -432px -48px; }
.icon-picture { background-position: -456px -48px; }
.icon-pencil { background-position: 0 -72px; }
.icon-map-marker { background-position: -24px -72px; }
.icon-adjust { background-position: -48px -72px; }
.icon-tint { background-position: -72px -72px; }
.icon-edit { background-position: -96px -72px; }
.icon-share { background-position: -120px -72px; }
.icon-check { background-position: -144px -72px; }
.icon-move { background-position: -168px -72px; }
.icon-step-backward { background-position: -192px -72px; }
.icon-fast-backward { background-position: -216px -72px; }
.icon-backward { background-position: -240px -72px; }
.icon-play { background-position: -264px -72px; }
.icon-pause { background-position: -288px -72px; }
.icon-stop { background-position: -312px -72px; }
.icon-forward { background-position: -336px -72px; }
.icon-fast-forward { background-position: -360px -72px; }
.icon-step-forward { background-position: -384px -72px; }
.icon-eject { background-position: -408px -72px; }
.icon-chevron-left { background-position: -432px -72px; }
.icon-chevron-right { background-position: -456px -72px; }
.icon-plus-sign { background-position: 0 -96px; }
.icon-minus-sign { background-position: -24px -96px; }
.icon-remove-sign { background-position: -48px -96px; }
.icon-ok-sign { background-position: -72px -96px; }
.icon-question-sign { background-position: -96px -96px; }
.icon-info-sign { background-position: -120px -96px; }
.icon-screenshot { background-position: -144px -96px; }
.icon-remove-circle { background-position: -168px -96px; }
.icon-ok-circle { background-position: -192px -96px; }
.icon-ban-circle { background-position: -216px -96px; }
.icon-arrow-left { background-position: -240px -96px; }
.icon-arrow-right { background-position: -264px -96px; }
.icon-arrow-up { background-position: -289px -96px; } // 1px off
.icon-arrow-down { background-position: -312px -96px; }
.icon-share-alt { background-position: -336px -96px; }
.icon-resize-full { background-position: -360px -96px; }
.icon-resize-small { background-position: -384px -96px; }
.icon-plus { background-position: -408px -96px; }
.icon-minus { background-position: -433px -96px; }
.icon-asterisk { background-position: -456px -96px; }
.icon-exclamation-sign { background-position: 0 -120px; }
.icon-gift { background-position: -24px -120px; }
.icon-leaf { background-position: -48px -120px; }
.icon-fire { background-position: -72px -120px; }
.icon-eye-open { background-position: -96px -120px; }
.icon-eye-close { background-position: -120px -120px; }
.icon-warning-sign { background-position: -144px -120px; }
.icon-plane { background-position: -168px -120px; }
.icon-calendar { background-position: -192px -120px; }
.icon-random { background-position: -216px -120px; width: 16px; }
.icon-comment { background-position: -240px -120px; }
.icon-magnet { background-position: -264px -120px; }
.icon-chevron-up { background-position: -288px -120px; }
.icon-chevron-down { background-position: -313px -119px; } // 1px, 1px off
.icon-retweet { background-position: -336px -120px; }
.icon-shopping-cart { background-position: -360px -120px; }
.icon-folder-close { background-position: -384px -120px; width: 16px; }
.icon-folder-open { background-position: -408px -120px; width: 16px; }
.icon-resize-vertical { background-position: -432px -119px; } // 1px, 1px off
.icon-resize-horizontal { background-position: -456px -118px; } // 1px, 2px off
.icon-hdd { background-position: 0 -144px; }
.icon-bullhorn { background-position: -24px -144px; }
.icon-bell { background-position: -48px -144px; }
.icon-certificate { background-position: -72px -144px; }
.icon-thumbs-up { background-position: -96px -144px; }
.icon-thumbs-down { background-position: -120px -144px; }
.icon-hand-right { background-position: -144px -144px; }
.icon-hand-left { background-position: -168px -144px; }
.icon-hand-up { background-position: -192px -144px; }
.icon-hand-down { background-position: -216px -144px; }
.icon-circle-arrow-right { background-position: -240px -144px; }
.icon-circle-arrow-left { background-position: -264px -144px; }
.icon-circle-arrow-up { background-position: -288px -144px; }
.icon-circle-arrow-down { background-position: -312px -144px; }
.icon-globe { background-position: -336px -144px; }
.icon-wrench { background-position: -360px -144px; }
.icon-tasks { background-position: -384px -144px; }
.icon-filter { background-position: -408px -144px; }
.icon-briefcase { background-position: -432px -144px; }
.icon-fullscreen { background-position: -456px -144px; }

View File

@ -0,0 +1,244 @@
//
// Tables
// --------------------------------------------------
// BASE TABLES
// -----------------
table {
max-width: 100%;
background-color: @tableBackground;
border-collapse: collapse;
border-spacing: 0;
}
// BASELINE STYLES
// ---------------
.table {
width: 100%;
margin-bottom: @baseLineHeight;
// Cells
th,
td {
padding: 8px;
line-height: @baseLineHeight;
text-align: left;
vertical-align: top;
border-top: 1px solid @tableBorder;
}
th {
font-weight: bold;
}
// Bottom align for column headings
thead th {
vertical-align: bottom;
}
// Remove top border from thead by default
caption + thead tr:first-child th,
caption + thead tr:first-child td,
colgroup + thead tr:first-child th,
colgroup + thead tr:first-child td,
thead:first-child tr:first-child th,
thead:first-child tr:first-child td {
border-top: 0;
}
// Account for multiple tbody instances
tbody + tbody {
border-top: 2px solid @tableBorder;
}
// Nesting
.table {
background-color: @bodyBackground;
}
}
// CONDENSED TABLE W/ HALF PADDING
// -------------------------------
.table-condensed {
th,
td {
padding: 4px 5px;
}
}
// BORDERED VERSION
// ----------------
.table-bordered {
border: 1px solid @tableBorder;
border-collapse: separate; // Done so we can round those corners!
*border-collapse: collapse; // IE7 can't round corners anyway
border-left: 0;
.border-radius(@baseBorderRadius);
th,
td {
border-left: 1px solid @tableBorder;
}
// Prevent a double border
caption + thead tr:first-child th,
caption + tbody tr:first-child th,
caption + tbody tr:first-child td,
colgroup + thead tr:first-child th,
colgroup + tbody tr:first-child th,
colgroup + tbody tr:first-child td,
thead:first-child tr:first-child th,
tbody:first-child tr:first-child th,
tbody:first-child tr:first-child td {
border-top: 0;
}
// For first th/td in the first row in the first thead or tbody
thead:first-child tr:first-child > th:first-child,
tbody:first-child tr:first-child > td:first-child,
tbody:first-child tr:first-child > th:first-child {
.border-top-left-radius(@baseBorderRadius);
}
// For last th/td in the first row in the first thead or tbody
thead:first-child tr:first-child > th:last-child,
tbody:first-child tr:first-child > td:last-child,
tbody:first-child tr:first-child > th:last-child {
.border-top-right-radius(@baseBorderRadius);
}
// For first th/td (can be either) in the last row in the last thead, tbody, and tfoot
thead:last-child tr:last-child > th:first-child,
tbody:last-child tr:last-child > td:first-child,
tbody:last-child tr:last-child > th:first-child,
tfoot:last-child tr:last-child > td:first-child,
tfoot:last-child tr:last-child > th:first-child {
.border-bottom-left-radius(@baseBorderRadius);
}
// For last th/td (can be either) in the last row in the last thead, tbody, and tfoot
thead:last-child tr:last-child > th:last-child,
tbody:last-child tr:last-child > td:last-child,
tbody:last-child tr:last-child > th:last-child,
tfoot:last-child tr:last-child > td:last-child,
tfoot:last-child tr:last-child > th:last-child {
.border-bottom-right-radius(@baseBorderRadius);
}
// Clear border-radius for first and last td in the last row in the last tbody for table with tfoot
tfoot + tbody:last-child tr:last-child td:first-child {
.border-bottom-left-radius(0);
}
tfoot + tbody:last-child tr:last-child td:last-child {
.border-bottom-right-radius(0);
}
// Special fixes to round the left border on the first td/th
caption + thead tr:first-child th:first-child,
caption + tbody tr:first-child td:first-child,
colgroup + thead tr:first-child th:first-child,
colgroup + tbody tr:first-child td:first-child {
.border-top-left-radius(@baseBorderRadius);
}
caption + thead tr:first-child th:last-child,
caption + tbody tr:first-child td:last-child,
colgroup + thead tr:first-child th:last-child,
colgroup + tbody tr:first-child td:last-child {
.border-top-right-radius(@baseBorderRadius);
}
}
// ZEBRA-STRIPING
// --------------
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
tbody {
> tr:nth-child(odd) > td,
> tr:nth-child(odd) > th {
background-color: @tableBackgroundAccent;
}
}
}
// HOVER EFFECT
// ------------
// Placed here since it has to come after the potential zebra striping
.table-hover {
tbody {
tr:hover > td,
tr:hover > th {
background-color: @tableBackgroundHover;
}
}
}
// TABLE CELL SIZING
// -----------------
// Reset default grid behavior
table td[class*="span"],
table th[class*="span"],
.row-fluid table td[class*="span"],
.row-fluid table th[class*="span"] {
display: table-cell;
float: none; // undo default grid column styles
margin-left: 0; // undo default grid column styles
}
// Change the column widths to account for td/th padding
.table td,
.table th {
&.span1 { .tableColumns(1); }
&.span2 { .tableColumns(2); }
&.span3 { .tableColumns(3); }
&.span4 { .tableColumns(4); }
&.span5 { .tableColumns(5); }
&.span6 { .tableColumns(6); }
&.span7 { .tableColumns(7); }
&.span8 { .tableColumns(8); }
&.span9 { .tableColumns(9); }
&.span10 { .tableColumns(10); }
&.span11 { .tableColumns(11); }
&.span12 { .tableColumns(12); }
}
// TABLE BACKGROUNDS
// -----------------
// Exact selectors below required to override .table-striped
.table tbody tr {
&.success > td {
background-color: @successBackground;
}
&.error > td {
background-color: @errorBackground;
}
&.warning > td {
background-color: @warningBackground;
}
&.info > td {
background-color: @infoBackground;
}
}
// Hover states for .table-hover
.table-hover tbody tr {
&.success:hover > td {
background-color: darken(@successBackground, 5%);
}
&.error:hover > td {
background-color: darken(@errorBackground, 5%);
}
&.warning:hover > td {
background-color: darken(@warningBackground, 5%);
}
&.info:hover > td {
background-color: darken(@infoBackground, 5%);
}
}

View File

@ -0,0 +1,53 @@
//
// Thumbnails
// --------------------------------------------------
// Note: `.thumbnails` and `.thumbnails > li` are overriden in responsive files
// Make wrapper ul behave like the grid
.thumbnails {
margin-left: -@gridGutterWidth;
list-style: none;
.clearfix();
}
// Fluid rows have no left margin
.row-fluid .thumbnails {
margin-left: 0;
}
// Float li to make thumbnails appear in a row
.thumbnails > li {
float: left; // Explicity set the float since we don't require .span* classes
margin-bottom: @baseLineHeight;
margin-left: @gridGutterWidth;
}
// The actual thumbnail (can be `a` or `div`)
.thumbnail {
display: block;
padding: 4px;
line-height: @baseLineHeight;
border: 1px solid #ddd;
.border-radius(@baseBorderRadius);
.box-shadow(0 1px 3px rgba(0,0,0,.055));
.transition(all .2s ease-in-out);
}
// Add a hover/focus state for linked versions only
a.thumbnail:hover,
a.thumbnail:focus {
border-color: @linkColor;
.box-shadow(0 1px 4px rgba(0,105,214,.25));
}
// Images and captions
.thumbnail > img {
display: block;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.thumbnail .caption {
padding: 9px;
color: @gray;
}

View File

@ -0,0 +1,70 @@
//
// Tooltips
// --------------------------------------------------
// Base class
.tooltip {
position: absolute;
z-index: @zindexTooltip;
display: block;
visibility: visible;
font-size: 11px;
line-height: 1.4;
.opacity(0);
&.in { .opacity(80); }
&.top { margin-top: -3px; padding: 5px 0; }
&.right { margin-left: 3px; padding: 0 5px; }
&.bottom { margin-top: 3px; padding: 5px 0; }
&.left { margin-left: -3px; padding: 0 5px; }
}
// Wrapper for the tooltip content
.tooltip-inner {
max-width: 200px;
padding: 8px;
color: @tooltipColor;
text-align: center;
text-decoration: none;
background-color: @tooltipBackground;
.border-radius(@baseBorderRadius);
}
// Arrows
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip {
&.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -@tooltipArrowWidth;
border-width: @tooltipArrowWidth @tooltipArrowWidth 0;
border-top-color: @tooltipArrowColor;
}
&.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -@tooltipArrowWidth;
border-width: @tooltipArrowWidth @tooltipArrowWidth @tooltipArrowWidth 0;
border-right-color: @tooltipArrowColor;
}
&.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -@tooltipArrowWidth;
border-width: @tooltipArrowWidth 0 @tooltipArrowWidth @tooltipArrowWidth;
border-left-color: @tooltipArrowColor;
}
&.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -@tooltipArrowWidth;
border-width: 0 @tooltipArrowWidth @tooltipArrowWidth;
border-bottom-color: @tooltipArrowColor;
}
}

View File

@ -0,0 +1,247 @@
//
// Typography
// --------------------------------------------------
// Body text
// -------------------------
p {
margin: 0 0 @baseLineHeight / 2;
}
.lead {
margin-bottom: @baseLineHeight;
font-size: @baseFontSize * 1.5;
font-weight: 200;
line-height: @baseLineHeight * 1.5;
}
// Emphasis & misc
// -------------------------
// Ex: 14px base font * 85% = about 12px
small { font-size: 85%; }
strong { font-weight: bold; }
em { font-style: italic; }
cite { font-style: normal; }
// Utility classes
.muted { color: @grayLight; }
a.muted:hover,
a.muted:focus { color: darken(@grayLight, 10%); }
.text-warning { color: @warningText; }
a.text-warning:hover,
a.text-warning:focus { color: darken(@warningText, 10%); }
.text-error { color: @errorText; }
a.text-error:hover,
a.text-error:focus { color: darken(@errorText, 10%); }
.text-info { color: @infoText; }
a.text-info:hover,
a.text-info:focus { color: darken(@infoText, 10%); }
.text-success { color: @successText; }
a.text-success:hover,
a.text-success:focus { color: darken(@successText, 10%); }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
// Headings
// -------------------------
h1, h2, h3, h4, h5, h6 {
margin: (@baseLineHeight / 2) 0;
font-family: @headingsFontFamily;
font-weight: @headingsFontWeight;
line-height: @baseLineHeight;
color: @headingsColor;
text-rendering: optimizelegibility; // Fix the character spacing for headings
small {
font-weight: normal;
line-height: 1;
color: @grayLight;
}
}
h1,
h2,
h3 { line-height: @baseLineHeight * 2; }
h1 { font-size: @baseFontSize * 2.75; } // ~38px
h2 { font-size: @baseFontSize * 2.25; } // ~32px
h3 { font-size: @baseFontSize * 1.75; } // ~24px
h4 { font-size: @baseFontSize * 1.25; } // ~18px
h5 { font-size: @baseFontSize; }
h6 { font-size: @baseFontSize * 0.85; } // ~12px
h1 small { font-size: @baseFontSize * 1.75; } // ~24px
h2 small { font-size: @baseFontSize * 1.25; } // ~18px
h3 small { font-size: @baseFontSize; }
h4 small { font-size: @baseFontSize; }
// Page header
// -------------------------
.page-header {
padding-bottom: (@baseLineHeight / 2) - 1;
margin: @baseLineHeight 0 (@baseLineHeight * 1.5);
border-bottom: 1px solid @grayLighter;
}
// Lists
// --------------------------------------------------
// Unordered and Ordered lists
ul, ol {
padding: 0;
margin: 0 0 @baseLineHeight / 2 25px;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin-bottom: 0;
}
li {
line-height: @baseLineHeight;
}
// Remove default list styles
ul.unstyled,
ol.unstyled {
margin-left: 0;
list-style: none;
}
// Single-line list items
ul.inline,
ol.inline {
margin-left: 0;
list-style: none;
> li {
display: inline-block;
.ie7-inline-block();
padding-left: 5px;
padding-right: 5px;
}
}
// Description Lists
dl {
margin-bottom: @baseLineHeight;
}
dt,
dd {
line-height: @baseLineHeight;
}
dt {
font-weight: bold;
}
dd {
margin-left: @baseLineHeight / 2;
}
// Horizontal layout (like forms)
.dl-horizontal {
.clearfix(); // Ensure dl clears floats if empty dd elements present
dt {
float: left;
width: @horizontalComponentOffset - 20;
clear: left;
text-align: right;
.text-overflow();
}
dd {
margin-left: @horizontalComponentOffset;
}
}
// MISC
// ----
// Horizontal rules
hr {
margin: @baseLineHeight 0;
border: 0;
border-top: 1px solid @hrBorder;
border-bottom: 1px solid @white;
}
// Abbreviations and acronyms
abbr[title],
// Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted @grayLight;
}
abbr.initialism {
font-size: 90%;
text-transform: uppercase;
}
// Blockquotes
blockquote {
padding: 0 0 0 15px;
margin: 0 0 @baseLineHeight;
border-left: 5px solid @grayLighter;
p {
margin-bottom: 0;
font-size: @baseFontSize * 1.25;
font-weight: 300;
line-height: 1.25;
}
small {
display: block;
line-height: @baseLineHeight;
color: @grayLight;
&:before {
content: '\2014 \00A0';
}
}
// Float right with text-align: right
&.pull-right {
float: right;
padding-right: 15px;
padding-left: 0;
border-right: 5px solid @grayLighter;
border-left: 0;
p,
small {
text-align: right;
}
small {
&:before {
content: '';
}
&:after {
content: '\00A0 \2014';
}
}
}
}
// Quotes
q:before,
q:after,
blockquote:before,
blockquote:after {
content: "";
}
// Addresses
address {
display: block;
margin-bottom: @baseLineHeight;
font-style: normal;
line-height: @baseLineHeight;
}

View File

@ -0,0 +1,30 @@
//
// Utility classes
// --------------------------------------------------
// Quick floats
.pull-right {
float: right;
}
.pull-left {
float: left;
}
// Toggling content
.hide {
display: none;
}
.show {
display: block;
}
// Visibility
.invisible {
visibility: hidden;
}
// For Affix plugin
.affix {
position: fixed;
}

View File

@ -0,0 +1,301 @@
//
// Variables
// --------------------------------------------------
// Global values
// --------------------------------------------------
// Grays
// -------------------------
@black: #000;
@grayDarker: #222;
@grayDark: #333;
@gray: #555;
@grayLight: #999;
@grayLighter: #eee;
@white: #fff;
// Accent colors
// -------------------------
@blue: #049cdb;
@blueDark: #0064cd;
@green: #46a546;
@red: #9d261d;
@yellow: #ffc40d;
@orange: #f89406;
@pink: #c3325f;
@purple: #7a43b6;
// Scaffolding
// -------------------------
@bodyBackground: @white;
@textColor: @grayDark;
// Links
// -------------------------
@linkColor: #08c;
@linkColorHover: darken(@linkColor, 15%);
// Typography
// -------------------------
@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily: Georgia, "Times New Roman", Times, serif;
@monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace;
@baseFontSize: 14px;
@baseFontFamily: @sansFontFamily;
@baseLineHeight: 20px;
@altFontFamily: @serifFontFamily;
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
@headingsFontWeight: bold; // instead of browser default, bold
@headingsColor: inherit; // empty to use BS default, @textColor
// Component sizing
// -------------------------
// Based on 14px font-size and 20px line-height
@fontSizeLarge: @baseFontSize * 1.25; // ~18px
@fontSizeSmall: @baseFontSize * 0.85; // ~12px
@fontSizeMini: @baseFontSize * 0.75; // ~11px
@paddingLarge: 11px 19px; // 44px
@paddingSmall: 2px 10px; // 26px
@paddingMini: 0 6px; // 22px
@baseBorderRadius: 4px;
@borderRadiusLarge: 6px;
@borderRadiusSmall: 3px;
// Tables
// -------------------------
@tableBackground: transparent; // overall background-color
@tableBackgroundAccent: #f9f9f9; // for striping
@tableBackgroundHover: #f5f5f5; // for hover
@tableBorder: #ddd; // table and cell border
// Buttons
// -------------------------
@btnBackground: @white;
@btnBackgroundHighlight: darken(@white, 10%);
@btnBorder: #ccc;
@btnPrimaryBackground: @linkColor;
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
@btnInfoBackground: #5bc0de;
@btnInfoBackgroundHighlight: #2f96b4;
@btnSuccessBackground: #62c462;
@btnSuccessBackgroundHighlight: #51a351;
@btnWarningBackground: lighten(@orange, 15%);
@btnWarningBackgroundHighlight: @orange;
@btnDangerBackground: #ee5f5b;
@btnDangerBackgroundHighlight: #bd362f;
@btnInverseBackground: #444;
@btnInverseBackgroundHighlight: @grayDarker;
// Forms
// -------------------------
@inputBackground: @white;
@inputBorder: #ccc;
@inputBorderRadius: @baseBorderRadius;
@inputDisabledBackground: @grayLighter;
@formActionsBackground: #f5f5f5;
@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
// Dropdowns
// -------------------------
@dropdownBackground: @white;
@dropdownBorder: rgba(0,0,0,.2);
@dropdownDividerTop: #e5e5e5;
@dropdownDividerBottom: @white;
@dropdownLinkColor: @grayDark;
@dropdownLinkColorHover: @white;
@dropdownLinkColorActive: @white;
@dropdownLinkBackgroundActive: @linkColor;
@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive;
// COMPONENT VARIABLES
// --------------------------------------------------
// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zindexDropdown: 1000;
@zindexPopover: 1010;
@zindexTooltip: 1030;
@zindexFixedNavbar: 1030;
@zindexModalBackdrop: 1040;
@zindexModal: 1050;
// Sprite icons path
// -------------------------
@iconSpritePath: "../img/glyphicons-halflings.png";
@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
// Input placeholder text color
// -------------------------
@placeholderText: @grayLight;
// Hr border color
// -------------------------
@hrBorder: @grayLighter;
// Horizontal forms & lists
// -------------------------
@horizontalComponentOffset: 180px;
// Wells
// -------------------------
@wellBackground: #f5f5f5;
// Navbar
// -------------------------
@navbarCollapseWidth: 979px;
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
@navbarHeight: 40px;
@navbarBackgroundHighlight: #ffffff;
@navbarBackground: darken(@navbarBackgroundHighlight, 5%);
@navbarBorder: darken(@navbarBackground, 12%);
@navbarText: #777;
@navbarLinkColor: #777;
@navbarLinkColorHover: @grayDark;
@navbarLinkColorActive: @gray;
@navbarLinkBackgroundHover: transparent;
@navbarLinkBackgroundActive: darken(@navbarBackground, 5%);
@navbarBrandColor: @navbarLinkColor;
// Inverted navbar
@navbarInverseBackground: #111111;
@navbarInverseBackgroundHighlight: #222222;
@navbarInverseBorder: #252525;
@navbarInverseText: @grayLight;
@navbarInverseLinkColor: @grayLight;
@navbarInverseLinkColorHover: @white;
@navbarInverseLinkColorActive: @navbarInverseLinkColorHover;
@navbarInverseLinkBackgroundHover: transparent;
@navbarInverseLinkBackgroundActive: @navbarInverseBackground;
@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%);
@navbarInverseSearchBackgroundFocus: @white;
@navbarInverseSearchBorder: @navbarInverseBackground;
@navbarInverseSearchPlaceholderColor: #ccc;
@navbarInverseBrandColor: @navbarInverseLinkColor;
// Pagination
// -------------------------
@paginationBackground: #fff;
@paginationBorder: #ddd;
@paginationActiveBackground: #f5f5f5;
// Hero unit
// -------------------------
@heroUnitBackground: @grayLighter;
@heroUnitHeadingColor: inherit;
@heroUnitLeadColor: inherit;
// Form states and alerts
// -------------------------
@warningText: #c09853;
@warningBackground: #fcf8e3;
@warningBorder: darken(spin(@warningBackground, -10), 3%);
@errorText: #b94a48;
@errorBackground: #f2dede;
@errorBorder: darken(spin(@errorBackground, -10), 3%);
@successText: #468847;
@successBackground: #dff0d8;
@successBorder: darken(spin(@successBackground, -10), 5%);
@infoText: #3a87ad;
@infoBackground: #d9edf7;
@infoBorder: darken(spin(@infoBackground, -10), 7%);
// Tooltips and popovers
// -------------------------
@tooltipColor: #fff;
@tooltipBackground: #000;
@tooltipArrowWidth: 5px;
@tooltipArrowColor: @tooltipBackground;
@popoverBackground: #fff;
@popoverArrowWidth: 10px;
@popoverArrowColor: #fff;
@popoverTitleBackground: darken(@popoverBackground, 3%);
// Special enhancement for popovers
@popoverArrowOuterWidth: @popoverArrowWidth + 1;
@popoverArrowOuterColor: rgba(0,0,0,.25);
// GRID
// --------------------------------------------------
// Default 940px grid
// -------------------------
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// 1200px min
@gridColumnWidth1200: 70px;
@gridGutterWidth1200: 30px;
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
// 768px-979px
@gridColumnWidth768: 42px;
@gridGutterWidth768: 20px;
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
// Fluid grid
// -------------------------
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
// 1200px min
@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
// 768px-979px
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);

View File

@ -0,0 +1,29 @@
//
// Wells
// --------------------------------------------------
// Base class
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: @wellBackground;
border: 1px solid darken(@wellBackground, 7%);
.border-radius(@baseBorderRadius);
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
blockquote {
border-color: #ddd;
border-color: rgba(0,0,0,.15);
}
}
// Sizes
.well-large {
padding: 24px;
.border-radius(@borderRadiusLarge);
}
.well-small {
padding: 9px;
.border-radius(@borderRadiusSmall);
}

View File

@ -0,0 +1,30 @@
// strip down core bootstrap for editor
// Core variables and mixins
@import "bootstrap/variables.less"; // Modify this for custom colors, font-sizes, etc
@import "bootstrap/mixins.less";
// CSS Reset
@import "bootstrap/reset.less";
// Base CSS
@import "bootstrap/type.less";
@import "bootstrap/code.less";
@import "bootstrap/tables.less";
// Components: common
@import "bootstrap/sprites.less";
@iconSpritePath: ~"[[pix:theme|glyphicons-halflings]]";
@iconWhiteSpritePath: ~"[[pix:theme|glyphicons-halflings-white]]";
@import "bootstrap/wells.less";
// Components: Buttons & Alerts
@import "bootstrap/buttons.less";
@import "bootstrap/alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
// Components: Misc
@import "bootstrap/thumbnails.less";
@import "bootstrap/labels-badges.less";
// Utility classes
@import "bootstrap/utilities.less"; // Has to be last to override when necessary

View File

@ -0,0 +1,55 @@
// Old Moodle stuff from base theme.
@import "moodle/core"; // Massive, needs broken up
@import "moodle/admin";
@import "moodle/calendar";
@import "moodle/course";
@import "moodle/filemanager";
@import "moodle/grade";
@import "moodle/message";
@import "moodle/question";
@import "moodle/user";
// Upstream Bootstrap
@import "bootstrap/bootstrap";
// Set image location
@iconSpritePath: ~"[[pix:theme|glyphicons-halflings]]";
@iconWhiteSpritePath: ~"[[pix:theme|glyphicons-halflings-white]]";
// Roll back nameclashes
@import "moodle/undo";
// extra padding for fixed nav
// needs to be between bootstrap/bootstrap and
// bootstrap/responsive
body {
padding-top: 60px;
}
// New Moodle stuff that builds on Bootstrap
@import "moodle/blocks";
@import "moodle/forms";
@import "moodle/tabs";
@import "moodle/modules";
@import "moodle/backup-restore";
@import "moodle/tables";
@import "moodle/buttons";
// anything below this line is considered expendable,
// so it doesn't matter if it doesn't show up in ie < 9
// though at current time (2013-03-13) the whole file is
// picked up in IE8, and IE9 fails at some point during the
// responsive section, cutting off the last 400 selectors.
// the following responsive imports are copied in
// from @import "bootstrap/responsive";
@import "bootstrap/responsive-utilities.less";
@import "bootstrap/responsive-1200px-min.less";
@import "bootstrap/responsive-768px-979px.less";
@import "bootstrap/responsive-767px-max.less";
@import "bootstrap/responsive-navbar.less";
@import "moodle/responsive";
@import "moodle/debug";
@import "moodle/expendable";

View File

@ -0,0 +1,720 @@
/* admin.less */
.formtable tbody th {
font-weight: normal;
text-align: right;
}
.path-admin #assignrole {
width: 60%;
margin-left: auto;
margin-right: auto;
}
.path-admin .admintable .leftalign {
text-align: left;
}
.environmenttable {
p.warn {
background-color : @warningBackground;
color: @warningText;
}
.error,
span.warn,
.ok {
.label;
}
.error {
background-color : @errorText;
}
span.warn {
background-color : @orange;
}
.ok {
background-color: @successText;
}
}
.path-admin .admintable.environmenttable .name,
.path-admin .admintable.environmenttable .info,
.path-admin #assignrole .admintable .role,
.path-admin #assignrole .admintable .userrole,
.path-admin #assignrole .admintable .roleholder {
white-space: nowrap;
}
.path-admin .incompatibleblockstable td.c0 {
font-weight: bold;
}
#page-admin-course-category .addcategory {
padding: 10px;
}
#page-admin-course-index .editcourse {
margin: 20px auto;
}
#page-admin-course-index .editcourse th,
#page-admin-course-index .editcourse td {
padding-left: 10px;
padding-right: 10px;
}
//#page-admin-report-security-index
.timewarninghidden {
display: none;
}
.statusok,
.statuswarning,
.statusserious,
.statuscritical {
.label;
}
.statusok {
background-color: @successText;
}
.statuswarning {
background-color: @warningText;
}
.statusserious {
background-color: @orange;
}
.statuscritical {
background-color: @errorText;
}
#page-admin-report-capability-index #capabilitysearch {
width: 30em;
}
#page-admin-report-backups-index .backup-error,
#page-admin-report-backups-index .backup-unfinished {
color: @errorText;
}
#page-admin-report-backups-index .backup-skipped,
#page-admin-report-backups-index .backup-ok {
color: @successText;
}
#page-admin-report-backups-index .backup-warning {
color: @warningText;
}
#page-admin-qtypes .disabled,
#page-admin-qbehaviours .disabled {
.muted;
}
#page-admin-qtypes #qtypes div,
#page-admin-qtypes #qtypes form,
#page-admin-qbehaviours #qbehaviours div,
#page-admin-qbehaviours #qbehaviours form {
display: inline;
}
#page-admin-qtypes #qtypes img.spacer,
#page-admin-qbehaviours #qbehaviours img.spacer {
width: 16px;
}
// make them more finger friendly
img.iconsmall {
margin: 0;
padding: 0.3em;
}
#page-admin-qbehaviours .cell.c3,
#page-admin-qtypes .cell.c3 {
font-size: @fontSizeMini;
}
#page-admin-lang .generalbox,
#page-admin-course-index .singlebutton,
#page-admin-course-index .addcategory,
#page-course-index .buttons,
#page-course-category .buttons,
#page-admin-course-category .addcategory,
#page-admin-stickyblocks .generalbox,
#page-admin-maintenance .buttons,
#page-admin-course-index .buttons,
#page-admin-course-category .buttons,
#page-admin-index .copyright,
#page-admin-index .copyrightnotice,
#page-admin-index .adminerror,
#page-admin-index .availableupdatesinfo,
#page-admin-index .adminerror .singlebutton,
#page-admin-index .adminwarning .singlebutton,
#page-admin-index #layout-table .singlebutton {
text-align: center;
margin-bottom: 1em;
}
.path-admin-roles .capabilitysearchui {
text-align: left;
margin-left: auto;
margin-right: auto;
}
#page-admin-roles-define .topfields {
margin: 1em 0 2em;
}
#page-admin-roles-define .capdefault {
background-color: #eee;
border: 1px solid #cecece;
}
#page-filter-manage .backlink,
.path-admin-roles .backlink {
margin-top: 1em;
}
#page-admin-roles-explain #chooseuser h3,
#page-admin-roles-usersroles .contextname {
margin-top: 0;
}
#page-admin-roles-explain #chooseusersubmit {
margin-top: 0;
text-align: center;
}
#page-admin-roles-usersroles p {
margin: 0;
}
#page-admin-roles-override .cell.c1,
#page-admin-roles-assign .cell.c3,
#page-admin-roles-assign .cell.c1 {
padding-top: 0.75em;
}
#page-admin-roles-override .overridenotice,
#page-admin-roles-define .definenotice {
margin: 1em 10% 2em 10%;
text-align: left;
}
#notice {
// would like the use the alert stuff below for this,
// but the way buttons are used makes it tricky
width: 60%;
min-width: 220px;
margin: auto;
}
#page-admin-index .releasenoteslink,
#page-admin-index .adminwarning,
#page-admin-index .maturitywarning,
#page-admin-index .maturityinfo {
.alert;
width: 60%;
min-width: 220px;
margin: auto;
}
#page-admin-index .maturitywarning,
#page-admin-index .adminwarning.maturityinfo.maturity50 {
.alert-error;
}
#page-admin-index .adminwarning.availableupdatesinfo,
#page-admin-index .releasenoteslink {
.alert-info;
}
#page-admin-index .adminwarning.availableupdatesinfo .moodleupdateinfo span {
display: block;
}
#page-admin-index .updateplugin div,
#page-admin-plugins .updateplugin div {
margin-bottom: 0.5em;
}
#page-admin-index .updateplugin .updatepluginconfirmexternal,
#page-admin-plugins .updateplugin .updatepluginconfirmexternal {
padding: 1em;
background-color: @errorBackground;
border: 1px solid @errorBorder;
}
#page-admin-user-user_bulk #users .fgroup {
white-space: nowrap;
}
#page-admin-report-stats-index .graph {
text-align: center;
margin-bottom: 1em;
}
#page-admin-report-courseoverview-index .graph {
text-align: center;
margin-bottom: 1em;
}
#page-admin-lang .translator {
border-width: 1px;
border-style: solid;
}
// This is the CSS for the role assignment control
.path-admin .roleassigntable {
width: 100%;
}
.path-admin .roleassigntable td {
vertical-align: top;
padding: 0.2em 0.3em
}
.path-admin .roleassigntable p {
text-align: left;
margin: 0.2em 0;
}
.path-admin .roleassigntable #existingcell,
.path-admin .roleassigntable #potentialcell {
width: 42%;
}
// targetting the label at the top
.path-admin .roleassigntable #existingcell p > label:first-child,
.path-admin .roleassigntable #potentialcell p > label:first-child {
font-weight: bold;
}
.path-admin .roleassigntable #buttonscell {
width: 16%;
}
.path-admin .roleassigntable #buttonscell #assignoptions {
font-size: @fontSizeMini;
}
.path-admin .roleassigntable #removeselect_wrapper,
.path-admin .roleassigntable #addselect_wrapper {
width: 100%;
}
.path-admin table.rolecap tr.rolecap th {
text-align: left;
font-weight: normal;
}
.path-admin.dir-rtl table.rolecap tr.rolecap th {
text-align: right;
}
.path-admin .rolecap .hiddenrow {
display: none;
}
.path-admin #defineroletable {
.rolecap {
.inherit,
.allow,
.prevent,
.prohibit {
text-align: center;
padding: 0;
min-width: 3.5em;
}
}
}
.path-admin .rolecap .cap-name,
.path-admin .rolecap .note {
display: block;
font-size: @fontSizeMini;
white-space: nowrap;
font-weight: normal;
}
.path-admin .rolecap label {
display: block;
text-align: center;
padding: 0.5em;
margin: 0;
}
.plugincheckwrapper {
width: 100%;
}
.environmentbox {
margin-top: 1em;
}
#mnetconfig table {
margin-left: auto;
margin-right: auto;
}
.environmenttable .cell {
padding: .15em .5em;
}
.environmenttable img.iconhelp {
padding-right: .3em;
}
.dir-rtl .environmenttable img.iconhelp {
padding-left: .3em;
padding-right: 0
}
#trustedhosts .generaltable {
margin-left: auto;
margin-right: auto;
width: 500px;
}
#trustedhosts .standard {
width: auto;
}
// This usage of legend is a bit weird,
// seems to be using them as error text
// that's only sometimes visible. Should
// look into sorting it
#adminsettings legend {
display: none;
}
#adminsettings fieldset.error {
margin: .2em 0 .5em 0;
}
#adminsettings fieldset.error legend {
display: block;
}
.dir-rtl #admin-spelllanguagelist textarea,
#page-admin-setting-editorsettingstinymce.dir-rtl .form-textarea textarea {
text-align: left;
direction: ltr;
}
.form-item .form-setting .form-htmlarea {
width: 640px;
display: inline;
}
.form-item .form-setting .form-htmlarea .htmlarea {
width: 640px;
display: block;
}
.form-item .form-setting .form-multicheckbox ul {
list-style: none;
padding: 0;
margin: 7px 0 0 0;
}
.form-item .form-setting .defaultsnext {
margin-right: 0.5em;
display: inline;
}
.form-item .form-setting .locked-checkbox {
margin-right: 0.2em;
margin-left: 0.5em;
display: inline;
}
.dir-rtl .form-item .form-setting .locked-checkbox {
margin-right: 0.5em;
margin-left: 0.2em;
display: inline;
}
.form-item .form-setting .form-password .unmask,
.form-item .form-setting .form-defaultinfo {
display: inline-block;
}
.form-item .pathok,
.form-item .patherror {
margin-left: 0.5em;
}
#admin-devicedetectregex table {
border: none;
// override a table border=1 in the HTML
}
#admin-emoticons td input {
width: 8em;
}
#admin-emoticons td.c0 input {
width: 4em;
}
#adminthemeselector .selectedtheme td.c0 {
border: 1px solid;
border-right-width: 0;
}
#adminthemeselector .selectedtheme td.c1 {
border: 1px solid;
border-left-width: 0;
}
.admin_colourpicker,
.admin_colourpicker_preview {
display: none;
}
.jsenabled .admin_colourpicker_preview {
display: inline;
}
.jsenabled .admin_colourpicker {
display: block;
height: 102px;
width: 410px;
margin-bottom: 10px;
}
.admin_colourpicker .loadingicon {
vertical-align: middle;
margin-left: auto;
}
.admin_colourpicker .colourdialogue {
float: left;
border: 1px solid #000;
}
.admin_colourpicker .previewcolour {
border: 1px solid #000;
margin-left: 301px;
}
.admin_colourpicker .currentcolour {
border: 1px solid #000;
margin-left: 301px;
border-top-width: 0;
}
/** Overide for RTL layout **/
.dir-rtl .form-item .form-setting,
.dir-rtl .form-item .form-label,
.dir-rtl .form-item .form-description,
.dir-rtl.path-admin .roleassigntable p {
text-align: right
}
// Plugins check
#page-admin-index #notice .checkforupdates {
text-align: center;
}
#plugins-check-info {
text-align: center;
margin: 1em;
}
#plugins-check .displayname .pluginicon {
width: 16px;
}
#plugins-check .status-new .status {
background-color: @successBackground;
}
#page-admin-index .adminwarning.availableupdatesinfo .moodleupdateinfo.maturity200 .info.release,
#plugins-check .status-upgrade .status,
#plugins-check .status-delete .status {
background-color: @infoBackground;
}
#plugins-control-panel .extension .source,
#page-admin-index .adminwarning.availableupdatesinfo .moodleupdateinfo.maturity100 .info.release,
#page-admin-index .adminwarning.availableupdatesinfo .moodleupdateinfo.maturity150 .info.release,
.pluginupdateinfo.maturity100,
.pluginupdateinfo.maturity150,
#plugins-check .extension .source {
background-color: @warningBackground;
}
#page-admin-index .adminwarning.availableupdatesinfo .moodleupdateinfo.maturity50 .info.release,
#plugins-control-panel .missingfromdisk .pluginname,
.pluginupdateinfo.maturity50,
#plugins-check .requires-failed,
#plugins-check .missingfromdisk .displayname,
#plugins-check .status-missing .status,
#plugins-check .status-downgrade .status {
background-color: @errorBackground;
}
#plugins-control-panel .disabled .availability {
background-color: @inputDisabledBackground;
}
#plugins-check .standard .source,
#plugins-check .status-nodb .status,
#plugins-check .status-uptodate .status,
#plugins-check .requires-ok {
.muted
}
#plugins-check .requires ul {
font-size: @fontSizeMini;
margin: 0;
}
#plugins-check .status .pluginupdateinfo {
padding: 5px 10px;
margin: 10px;
background-color: @infoBackground;
.border-radius(10px);
}
#plugins-check .status .pluginupdateinfo span,
#plugins-check .status .pluginupdateinfo a {
padding-right: 1em;
}
#page-admin-index .upgradepluginsinfo {
text-align: center;
}
#page-admin-plugins .checkforupdates {
margin: 0 auto 1em;
text-align: center;
}
#plugins-control-panel .requiredby,
#plugins-control-panel .pluginname .componentname {
font-size: @fontSizeSmall;
.muted
}
#plugins-control-panel .pluginname .componentname {
margin-left: 22px;
}
#plugins-overview-filter .filter-item,
#plugins-overview-panel .info,
#plugins-control-panel .actions a {
padding: 0 10px;
}
#page-admin-index .adminwarning.availableupdatesinfo .moodleupdateinfo .separator,
#plugins-check .status .pluginupdateinfo .separator,
#page-admin-plugins .separator {
border-left: 1px dotted #999;
}
#plugins-control-panel .msg td {
text-align: center;
}
#plugins-overview-filter,
#plugins-overview-panel {
margin: 1em auto;
text-align: center;
}
#plugins-overview-panel .info.updatable {
margin-left: 10px;
background-color: @infoBackground;
font-weight: bold;
.border-radius(10px);
}
#plugins-overview-filter .filter-item.active {
font-weight: bold;
}
#plugins-control-panel .displayname img.icon {
padding-top: 0;
padding-bottom: 0;
}
#plugins-control-panel .actions .uninstall {
color: @errorText;
}
#plugins-control-panel .notes .pluginupdateinfo {
padding: 5px 10px;
margin: 10px;
background-color: @infoBackground;
.border-radius(10px);
}
#plugins-control-panel .notes .pluginupdateinfo span,
#plugins-control-panel .notes .pluginupdateinfo a {
padding-right: 1em;
}
.dir-rtl {
#plugins-check .pluginupdateinfo {
text-align: center;
direction: ltr;
}
#plugins-check .rootdir,
#plugins-check .requires-ok {
text-align: left;
direction: ltr;
}
}
/** MNet networking */
#page-admin-mnet-peers .box.deletedhosts {
margin-bottom: 1em;
font-size: @fontSizeSmall;
}
#page-admin-mnet-peers .mform .certdetails {
background-color: white;
}
#page-admin-mnet-peers .mform .deletedhostinfo {
background-color: @errorBackground;
border: 2px solid @errorBorder;
padding: 4px;
margin-bottom: 5px;
}
#core-cache-plugin-summaries table,
#core-cache-store-summaries table {
width: 100%;
}
#core-cache-lock-summary table,
#core-cache-definition-summaries table,
#core-cache-mode-mappings table {
margin: 0 auto;
}
#core-cache-store-summaries .default-store td {
color: #333;
font-style: italic;
}
#core-cache-rescan-definitions,
#core-cache-mode-mappings .edit-link {
margin-top: 0.5em;
text-align: center;
}
.tinymcesubplugins img.icon {
padding-top: 0;
padding-bottom: 0;
}
// hacks for badly marked up admin warnings
#page-admin-roles-assign div.box.generalbox {
.alert;
.alert-danger;
}

View File

@ -0,0 +1,164 @@
.path-backup .mform .grouped_settings.section_level {
.well;
padding: 10px 0 0 0;
clear: both;
}
.path-backup .mform .grouped_settings {
clear: both;
overflow: hidden;
}
.path-backup .include_setting,
.path-backup .grouped_settings .normal_setting {
display: inline-block;
}
.path-backup .include_setting.section_level label {
font-weight: bold;
}
.path-backup .mform .fitem .fitemtitle {
width: 260px;
}
.path-backup .mform .fitem .felement {
margin-left: 280px;
}
.path-backup .notification.dependencies_enforced {
text-align: center;
color: @errorText;
font-weight: bold;
}
.path-backup .backup_progress {
text-align: center;
}
.path-backup .backup_progress .backup_stage {
.muted
}
.path-backup .backup_progress .backup_stage.backup_stage_current {
font-weight: bold;
color: inherit;
}
.path-backup .backup_progress .backup_stage.backup_stage_next {
}
.path-backup .backup_progress span.backup_stage.backup_stage_complete {
color: inherit;
}
#page-backup-restore .filealiasesfailures {
background-color: @errorBackground;
}
#page-backup-restore .filealiasesfailures .aliaseslist {
width: 90%;
margin: 0.8em auto;
background-color: @bodyBackground;
border: 1px dotted #666;
}
.path-backup .fitem .smallicon {
vertical-align: text-bottom;
}
.backup-restore .backup-section > h2.header,
.backup-restore .backup-section .backup-sub-section h3 {
// Copied from bootstrap/forms.less tag legend
display: block;
width: 100%;
padding: 0;
margin-bottom: @baseLineHeight;
font-size: @baseFontSize * 1.5;
line-height: @baseLineHeight * 2;
color: @grayDark;
border: 0;
border-bottom: 1px solid #e5e5e5;
}
.backup-restore .backup-section .noticebox {
margin: 1em auto;
width: 60%;
text-align: center;
}
.backup-restore .backup-section.settings-section .detail-pair {
width: 50%;
display: inline-block;
.ie7-inline-block();
}
.backup-restore .backup-section.settings-section .detail-pair-label {
width: 65%;
}
.backup-restore .backup-section.settings-section .detail-pair-value {
width: 25%;
}
.backup-restore .activitytable {
min-width: 500px;
}
.backup-restore .activitytable .modulename {
width: 100px;
}
.backup-restore .activitytable .moduleincluded {
width: 50px;
}
.backup-restore .activitytable .userinfoincluded {
width: 50px;
}
.backup-restore .detail-pair-label {
display: inline-block;
.ie7-inline-block();
width: 25%;
padding: 8px;
margin: 0;
text-align: right;
font-weight: bold;
vertical-align: top;
}
.backup-restore .detail-pair-value {
display: inline-block;
.ie7-inline-block();
width: 65%;
padding: 8px;
margin: 0;
}
.backup-restore .detail-pair-value > .sub-detail {
display: block;
font-size: @fontSizeSmall;
.muted
}
.backup-restore > .singlebutton {
text-align: right;
}
.path-backup .mform .fgroup .proceedbutton {
float: right;
margin-right: 5%;
}
.restore-course-search .rcs-results {
width: 70%;
min-width: 400px;
}
.restore-course-search .rcs-results table {
width: 100%;
margin: 0;
border-width: 0;
}
.restore-course-search .rcs-results table .no-overflow {
max-width: 600px;
}
.restore-course-search .rcs-results .paging {
text-align: left;
margin: 0;
background-color: #eee;
padding: 3px;
}
.restore-course-category .rcs-results {
width: 70%;
min-width: 400px;
border: 1px solid #ddd;
margin: 5px 0;
}
.restore-course-category .rcs-results table {
width: 100%;
margin: 0;
border-width: 0;
}
.restore-course-category .rcs-results table .no-overflow {
max-width: 600px;
}
.restore-course-category .rcs-results .paging {
text-align: left;
margin: 0;
background-color: #eee;
padding: 3px;
}

View File

@ -0,0 +1,313 @@
.block {
.well;
padding: 8px 0;
}
.block .header h2 {
padding: .2em 0 0 .2em;
margin: 0;
}
.block .header .title h2,
.block h3.main {
.nav-header;
font-size: 1.1em;
}
.block .header .title .commands,
.block_adminblock .content,
.block .footer,
.block .block_tree li>p>a,
.block .block_tree li>p>span
{
display: block;
padding: 3px 15px;
}
.block .header .block_action {
float: right;
}
.block .header .commands {
clear: both;
text-align: right;
}
.block .header .commands > a {
margin: 0 3px;
}
.block .header .commands .icon img {
width: 12px;
height: 12px;
}
.block .content {
padding: 4px 14px;
}
.block.hidden .content {
display: none;
}
.block .content .userpicture {
width: 16px;
height: 16px;
margin-right: 6px;
}
.block .content .list li.listentry {
clear: both;
}
.block .content .list .c0 {
display: inline;
}
.block .content .list .c1 {
margin-left: 5px;
display: inline;
}
.block .footer {
margin-bottom: 4px;
}
.block .blockannotation {
font-size: 0.75em;
margin: -1em 0 1em;
}
.block.list_block .unlist > li > .column {
display: inline-block;
.ie7-inline-block();
}
.blockmovetarget,
.block.beingmoved {
border-width: 2px;
border-style: dashed;
}
.blockmovetarget {
display: block;
height: 1em;
margin-bottom: 1em;
}
.block.invisible {
.opacity(50);
}
.block .block-hider-show,
.block .block-hider-hide {
cursor: pointer;
padding-right: 5px;
padding-left: 5px;
}
.block .block-hider-show,
.block.hidden .block-hider-hide {
display: none;
}
.block.hidden .block-hider-show {
display: inline;
}
.jsenabled .block_tree .tree_item.branch {
cursor: pointer;
}
.jsenabled .block_tree .collapsed ul {
display: none;
}
.jsenabled .dock_on_load,
.block_tree_box .requiresjs {
display: none;
}
.jsenabled .block_tree_box .requiresjs {
display: inline;
}
// Individual block styles
.block_navigation .content,
.block_settings .content {
padding: 0;
}
.block_settings li > hr {
margin: 4px 0;
}
.block_settings .leaf img,
.block_navigation p.tree_item a img.smallicon {
display: none;
}
.block_calendar_upcoming .footer {
margin-top: .5em;
}
.block_adminblock select {
width: 100%;
}
// Overide for RTL layout.
.dir-rtl {
.block .header,
.block h2.header {
text-align:right;
}
.block .header .commands {
text-align: left;
}
.block .header .block_action {
float: left;
}
}
// the rest is block settings and nav stuff, can stil be tidied up a great deal
ul.block_tree ul {
margin: 0;
}
.block_tree .tree_item.branch a:before,
.block_tree .tree_item.branch span:before {
content: "▼ ";
}
.block_tree .collapsed .tree_item.branch a:before,
.block_tree .collapsed .tree_item.branch span:before,
.block_tree .collapsed .tree_item.emptybranch a:before,
.block_tree .collapsed .tree_item.emptybranch span:before {
content: "► ";
}
.dir-rtl {
.block_tree .tree_item.branch a:before,
.block_tree .tree_item.branch span:before {
content: " ▼"; // Space on opposite side.
}
.block_tree .collapsed .tree_item.branch a:before,
.block_tree .collapsed .tree_item.branch span:before,
.block_tree .collapsed .tree_item.emptybranch a:before,
.block_tree .collapsed .tree_item.emptybranch span:before {
content: " ◄";
}
}
.block_navigation .block_tree .tree_item.branch.navigation_node a:before {
content: none;
}
.block_tree .collapsed .tree_item.emptybranch a:before,
.block_tree .collapsed .tree_item.emptybranch span:before {
.muted
}
.block_settings .block_tree .tree_item,
.block_navigation .block_tree .tree_item {
margin: 0;
}
.block_tree>li>p>a,
.block_tree>li>p>span,
.block_tree .nav-header {
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.block .block_tree li > p > span:hover,
.block .block_tree li > p > a:hover {
text-decoration: none;
background-color: @grayLighter;
}
.block_tree li p.active_tree_node a,
.block_tree li p.active_tree_node a:hover {
color: @white;
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
background-color: @linkColor;
}
.block_settings .block_tree li ul,
.block_settings .block_tree li.depth_2 ul,
.block_navigation .block_tree li ul,
.block_navigation .block_tree li.depth_2 ul
{
padding-left: 0;
}
.block_settings ul.block_tree.list li ul li a,
.block_settings ul.block_tree.list li ul li span,
.block_navigation ul.block_tree.list li ul li ul li a,
.block_navigation ul.block_tree.list li ul li ul li span
{
padding-left: 33px;
}
.block_settings ul.block_tree.list li ul li ul li a,
.block_settings ul.block_tree.list li ul li ul li span,
.block_navigation ul.block_tree.list li ul li ul li ul li a,
.block_navigation ul.block_tree.list li ul li ul li ul li span
{
padding-left: 49.5px;
}
.block_settings ul.block_tree.list li ul li ul li ul li a,
.block_settings ul.block_tree.list li ul li ul li ul li span,
.block_navigation ul.block_tree.list li ul li ul li ul li ul li a,
.block_navigation ul.block_tree.list li ul li ul li ul li ul li span
{
padding-left: 66px;
}
.block_settings ul.block_tree.list li ul li ul li ul li ul li a,
.block_settings ul.block_tree.list li ul li ul li ul li ul li span,
.block_navigation ul.block_tree.list li ul li ul li ul li ul li ul li a,
.block_navigation ul.block_tree.list li ul li ul li ul li ul li ul li span
{
padding-left: 83.5px;
}
.block_navigation ul.block_tree.list li ul li ul li ul li ul li ul li ul li a,
.block_navigation ul.block_tree.list li ul li ul li ul li ul li ul li ul li span
{
padding-left: 99px;
}
.dir-rtl {
.block_settings .block_tree li ul,
.block_settings .block_tree li.depth_2 ul,
.block_navigation .block_tree li ul,
.block_navigation .block_tree li.depth_2 ul
{
padding-right: 0;
padding-left: 0;
}
.block_settings ul.block_tree.list li ul li a,
.block_settings ul.block_tree.list li ul li span,
.block_navigation ul.block_tree.list li ul li ul li a,
.block_navigation ul.block_tree.list li ul li ul li span
{
padding-right: 33px;
}
.block_settings ul.block_tree.list li ul li ul li a,
.block_settings ul.block_tree.list li ul li ul li span,
.block_navigation ul.block_tree.list li ul li ul li ul li a,
.block_navigation ul.block_tree.list li ul li ul li ul li span
{
padding-right: 49.5px;
}
.block_settings ul.block_tree.list li ul li ul li ul li a,
.block_settings ul.block_tree.list li ul li ul li ul li span,
.block_navigation ul.block_tree.list li ul li ul li ul li ul li a,
.block_navigation ul.block_tree.list li ul li ul li ul li ul li span
{
padding-right: 66px;
}
.block_settings ul.block_tree.list li ul li ul li ul li ul li a,
.block_settings ul.block_tree.list li ul li ul li ul li ul li span,
.block_navigation ul.block_tree.list li ul li ul li ul li ul li ul li a,
.block_navigation ul.block_tree.list li ul li ul li ul li ul li ul li span
{
padding-right: 83.5px;
}
.block_navigation ul.block_tree.list li ul li ul li ul li ul li ul li ul li a,
.block_navigation ul.block_tree.list li ul li ul li ul li ul li ul li ul li span
{
padding-right: 99px;
}
}

View File

@ -0,0 +1,62 @@
.singlebutton div {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
}
.continuebutton {
text-align: center;
}
input[name="searchwikicontent"] + input[type="submit"],
select + input[type="submit"],
input[type="text"] + input[type="button"],
input[type="password"] + input[type="submit"],
input[type="text"] + button,
input[type="text"] + input[type="submit"] {
margin: 0 0 10px 5px;
}
p.arrow_button {
margin-top: 5em;
text-align: center;
#remove {
margin: 3em auto 5em;
}
input {
.btn-block;
}
}
#addcontrols {
margin-top: 5em;
text-align: center;
margin-bottom: 3em;
}
#addcontrols input,
#removecontrols input {
.btn-block;
}
button,
input.form-submit,
input[type="button"],
input[type="submit"],
input[type="reset"],
{
.btn
}
button.yui3-button.closebutton,
button.yui3-button.closebutton:hover {
background-position: 0 0;
// Because we assign button looks to every button tag above,
// we need to remove some styles from non-standard looking
// buttons. Correct fix, assign .btn class to every actual
// button in Moodle so we don't need to carpet bomb the
// bare button tag.
}
input.fp-btn-choose {
.btn-small;
}
.user-enroller-panel .uep-search-results .user .options .enrol {
.btn-mini
}

View File

@ -0,0 +1,186 @@
/* calendar.less */
.calendartable {
width: 100%;
}
.calendartable th,
.calendartable td {
width: 14%;
vertical-align: top;
text-align: center;
border: 0;
}
.calendar_event_course {
background-color: #FFD3BD;
}
.calendar_event_global {
background-color: #D6F8CD;
}
.calendar_event_group {
background-color: #FEE7AE;
}
.calendar_event_user {
background-color: #DCE7EC;
}
.path-calendar .calendar-controls .previous,
.path-calendar .calendar-controls .next,
.path-calendar .calendar-controls .current {
display: block;
float: left;
width: 12%;
}
.path-calendar .calendar-controls .previous {
text-align: left;
}
.path-calendar .calendar-controls .current {
text-align: center;
width: 76%;
}
.path-calendar .calendar-controls .next {
text-align: right;
}
.path-calendar .maincalendar {
vertical-align: top;
padding: 0;
}
.path-calendar .maincalendar .bottom {
text-align: center;
padding: 5px 0 0 0;
}
.path-calendar .maincalendar .heightcontainer {
height: 100%;
position: relative;
}
.path-calendar .maincalendar .calendarmonth {
width: 98%;
margin: 10px auto;
}
.path-calendar .maincalendar .calendarmonth ul {
margin: 0;
}
.path-calendar .maincalendar .calendarmonth ul li {
list-style-type: none;
margin-top: 4px;
}
.path-calendar .maincalendar .calendarmonth td {
height: 5em;
}
.path-calendar .maincalendar .calendar-controls .previous,
.path-calendar .maincalendar .calendar-controls .next{
width: 30%;
}
.path-calendar .maincalendar .calendar-controls .current {
width: 39.95%;
}
.path-calendar .maincalendar .controls {
width: 98%;
margin: 10px auto;
}
.path-calendar .maincalendar .eventlist .event {
width: 100%;
margin-bottom: 10px;
border-spacing: 0;
border-collapse: separate;
border-width: 1px;
border-style: solid;
}
.path-calendar .maincalendar .eventlist .event .topic .name {
float: left;
}
.dir-rtl.path-calendar .maincalendar .eventlist .event .topic .name,
.path-calendar .maincalendar .eventlist .event .topic .date {
float: right;
}
.dir-rtl.path-calendar .maincalendar .eventlist .event .topic .date {
float: left;
}
.path-calendar .maincalendar .eventlist .event .subscription,
.path-calendar .maincalendar .eventlist .event .course {
float: left;
clear: left;
}
.dir-rtl.path-calendar .maincalendar .eventlist .event .subscription,
.dir-rtl.path-calendar .maincalendar .eventlist .event .course {
float: right;
clear: right;
}
.path-calendar .maincalendar .eventlist .event .side {
width: 32px;
}
.path-calendar .maincalendar .eventlist .event .commands a {
margin: 0 3px;
}
.path-calendar .maincalendar .header {
overflow: hidden;
}
.path-calendar .maincalendar .header .buttons {
float: right;
}
.dir-rtl.path-calendar .maincalendar .header .buttons {
float: left;
}
.path-calendar .filters table {
border-collapse: separate;
border-spacing: 2px;
width: 100%;
}
#page-calendar-export .indent {
padding-left: 20px;
}
.path-calendar .cal_courses_flt label {
margin-right: .45em;
}
.dir-rtl.path-calendar .cal_courses_flt label {
margin-left: .45em;
margin-right: 0;
}
.block .minicalendar th,
.block .minicalendar td {
padding: 2px;
font-size: 0.8em;
}
.block .minicalendar {
max-width: 280px;
margin-left: auto;
margin-right: auto;
}
.block .minicalendar td.weekend {
color: #A00;
}
.block .calendar-controls .previous {
text-align: left;
display: block;
float: left;
width: 12%;
}
.block .calendar-controls .current {
float: left;
text-align: center;
display: block;
width: 76%;
}
.block .calendar-controls .next {
text-align: right;
display: block;
float: left;
width: 12%;
}
.block .calendar_filters ul {
list-style: none;
margin: 0;
}
.block .calendar_filters li {
margin-bottom: .2em;
}
.block .calendar_filters li span img {
padding: 0 .2em;
}
.block .calendar_filters .eventname {
padding-left: .2em;
}
.dir-rtl .block .calendar_filters .eventname {
padding-right: .2em;
padding-left: 0;
}
.block .content h3.eventskey {
margin-top: 0.5em;
}

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,565 @@
/* course.less */
.section_add_menus {
text-align: right;
}
.dir-rtl .section_add_menus {
text-align: left;
}
.section_add_menus .horizontal div,
.section_add_menus .horizontal form {
display: inline;
}
.section_add_menus optgroup {
font-weight: normal;
font-style: italic;
}
.section_add_menus .urlselect {
margin-left: .4em;
}
.dir-rtl .section_add_menus .urlselect {
margin-right: .4em;
margin-left: 0;
}
.section_add_menus .urlselect select {
margin-left: .2em;
}
.dir-rtl .section_add_menus .urlselect select {
margin-right: .2em;
margin-left: 0;
}
.section_add_menus .urlselect img.iconhelp {
padding: 0;
margin: 0;
vertical-align: text-bottom;
}
.site-topic ul.section,
.course-content ul.section {
margin: 1em;
}
.section .activity img.activityicon {
vertical-align: text-bottom;
margin-right: 6px;
}
.dir-rtl .section .activity img.activityicon {
margin-left: 6px;
margin-right: 0;
}
.section .activity .activityinstance,
.section .activity .activityinstance div {
display: inline-block;
}
.editing .section .activity .activityinstance {
min-width: 40%;
}
.section .activity .activityinstance > a {
display: block;
}
.editing_show + .editing_assign,
.editing_hide + .editing_assign {
// if roles icon missing, add space
margin-left: 20px;
}
.section .activity .commands {
white-space: nowrap;
display: inline;
}
.section .activity.modtype_label .commands {
margin-left: 40%;
padding-left: 22px;
}
.section li.activity {
padding: .2em;
clear: both;
}
.section .activity .activityinstance .groupinglabel {
padding-left: .45em;
}
.section .activity .availabilityinfo,
.section .activity .contentafterlink {
margin-top: 0.5em;
margin-left: 30px;
}
.dir-rtl .section .activity .availabilityinfo,
.dir-rtl .section .activity .contentafterlink {
margin-left: 0;
margin-right: 30px;
}
.section .activity .contentafterlink p {
margin: .5em 0;
}
.editing .section .activity:hover {
background-color: @grayLighter;
}
.course-content .section-summary {
border: 1px solid #DDD;
margin-top: 5px;
list-style: none;
}
.course-content .section-summary .section-title {
margin: 2px 5px 10px 5px;
}
.course-content .section-summary .summarytext {
margin: 2px 5px 2px 5px;
}
.course-content .section-summary .section-summary-activities .activity-count {
.muted;
font-size: @fontSizeSmall;
margin: 3px;
white-space: nowrap;
display: inline-block;
}
.course-content .section-summary .summary {
margin-top: 5px;
}
.course-content .single-section {
margin-top: 1em;
}
.course-content .single-section .section-navigation {
display: block;
padding: 0.5em;
margin-bottom: -0.5em;
}
.course-content .single-section .section-navigation .title {
font-weight: bold;
font-size: 108%;
clear: both;
}
.course-content .single-section .section-navigation .mdl-left {
font-weight: normal;
float: left;
margin-right: 1em;
}
.dir-rtl .course-content .single-section .section-navigation .mdl-left {
float: right;
}
.course-content .single-section .section-navigation .mdl-left .larrow {
margin-right: 0.1em;
}
.course-content .single-section .section-navigation .mdl-right {
font-weight: normal;
float: right;
margin-left: 1em;
}
.dir-rtl .course-content .single-section .section-navigation .mdl-right {
float: left;
}
.course-content .single-section .section-navigation .mdl-right .rarrow {
margin-left: 0.1em;
}
.course-content .single-section .section-navigation .mdl-bottom {
margin-top: 0;
}
.course-content ul li.section.main {
border-bottom: 2px solid #eee;
margin-top: 0;
}
.course-content ul li.section.hidden {
opacity: 0.5;
}
.course-content ul.topics li.section .content,
.course-content ul.weeks li.section .content {
margin-right: 20px;
margin-left: 20px;
padding: 0;
}
.course-content {
margin-top: 0;
}
.course-content ul.topics li.section {
padding-bottom: 20px;
}
.course-content ul.topics li.section .summary {
margin-left: 25px;
}
.path-course-view .completionprogress {
margin-left: 25px
}
.path-course-view .completionprogress {
display: block;
float: right;
height: 20px;
position: relative;
z-index: 1000;
}
#page-site-index .subscribelink {
text-align: right;
}
#page-site-index .headingblock {
margin-bottom: 9px;
}
.path-course-view a.reduce-sections {
padding-left: 0.2em;
}
.path-course-view .headingblock {
margin-bottom: 9px;
}
.path-course-view .subscribelink {
text-align: right;
}
.path-course-view .unread {
margin-left: 3em;
}
.path-course-view .block.drag .header {
cursor: move;
}
.path-course-view .completionprogress {
text-align: right;
}
.dir-rtl.path-course-view .completionprogress {
text-align: left;
}
.path-course-view .single-section .completionprogress {
margin-right: 5px;
}
.path-course-view .section .summary {
line-height: normal;
}
.path-site li.activity > div,
.path-course-view li.activity > div {
position: relative;
}
.path-course-view li.activity span.autocompletion,
.path-course-view li.activity form.togglecompletion {
float: right;
}
.path-course-view li.activity form.togglecompletion .ajaxworking {
width: 16px;
height: 16px;
background: url([[pix:i/ajaxloader]]) no-repeat;
}
.dir-rtl.path-course-view li.activity form.togglecompletion,
.dir-rtl.path-course-view li.activity span.autocompletion {
float: left;
}
.dir-rtl.path-course-view .completionprogress {
float: none;
}
.dir-rtl.path-course-view li.activity form.togglecompletion .ajaxworking {
right: -22px;
}
li.section.hidden span.commands a.editing_hide,
li.section.hidden span.commands a.editing_show {
cursor: default;
}
ul.weeks h3.sectionname {
white-space: nowrap;
}
.editing ul.weeks h3.sectionname {
white-space: normal;
}
.section img.movetarget {
height: 16px;
width: 80px;
}
#page-course-enrol .generalbox,
#page-course-enrol .coursebox {
margin-top: 20px;
}
#page-course-pending .singlebutton,
#page-course-category #renameform,
#page-course-category #themeform,
#page-course-category #coursesearch,
#page-course-category .singlebutton,
#page-course-editsection .singlebutton {
text-align: center;
}
#page-course-category #movecourses td img {
margin: 0 .22em;
vertical-align: text-bottom;
}
#page-course-category #movecourses td img.icon {
padding: 0;
}
#coursesearch,
#coursesearch2 {
margin-top: 1em;
text-align: center;
}
#page-course-info .generalbox.icons {
text-align: center;
}
#page-course-info .generalbox.info {
margin-left: auto;
margin-right: auto;
}
#page-course-pending .pendingcourserequests {
margin-bottom: 1em;
}
#page-course-pending .pendingcourserequests .singlebutton {
display: inline;
}
#page-course-pending .pendingcourserequests .cell {
padding: 0 5px;
}
#page-course-pending .pendingcourserequests .cell.c6 {
white-space: nowrap;
}
.coursebox {
margin-bottom: 15px;
border: 1px dotted #ddd;
.border-radius(4px);
padding: 5px;
}
.coursebox .summary .category {
text-align: right;
}
.coursebox .teachers li {
list-style-type: none;
padding: 0;
margin: 0;
}
.coursebox .enrolmenticons img {
margin-right: .45em;
}
.coursebox .enrolmenticons {
border: 1px dotted #DDDDDD;
.border-radius(3px);
margin-top: 0.3em;
padding: 3px;
}
.coursebox h3.name {
margin: 0;
}
.coursebox .info,
.coursebox .summary {
border: 0;
margin: 0;
padding: 0;
float: none;
width: none;
.box-sizing(border-box);
display: block;
float: left;
margin-left: 2.76243%;
min-height: 30px;
}
.coursebox .summary {
margin-top: 5px;
}
.categorylist .category .numberofcourse {
font-size: @fontSizeSmall;
}
.categorylist .category {
padding-top: 5px;
padding-bottom: 5px;
}
.categorylist .info,
.categorylist .name,
.categorylist .category .image {
display: inline-block;
margin-left: .2em;
margin-right: .2em;
}
.categorylist .course {
padding-left: 24px;
margin-bottom: .5em;
line-height: 1.5em;
}
.categorylist .indentation {
margin-left: 24px;
}
.course ul.section {
margin: 5px;
padding: 0;
}
.weeks-format,
.topics-format {
margin-top: 8px;
min-width: 763px;
}
.categoryboxcontent {
border-width: 1px;
border-style: solid;
}
/* Course and category combo list on front page */
.course_category_tree .controls {
visibility: hidden;
}
.course_category_tree .controls div {
display: inline;
cursor: pointer;
}
.course_category_tree .category.with_children>.category_label {
background-image: url([[pix:moodle|t/expanded]]);
background-repeat: no-repeat;
}
.course_category_tree .category_label {
padding-left: 13px;
}
.course_category_tree .category .category {
margin: 5px 0;
}
.course_category_tree .category .courses {
padding-left: 16px;
}
.course_category_tree .category .courses .course_link {
display: block;
background-image: url([[pix:moodle|i/course]]);
background-repeat: no-repeat;
padding-left: 21px;
}
.course_category_tree .category .course {
position: relative;
}
.course_category_tree .category .course_info {
position: absolute;
right: 0;
top: 0;
}
.dir-rtl .course_category_tree .category .course_info {
position: static;
}
.dir-rtl .course_category_tree .category .course_info a,
.dir-rtl .course_category_tree .category .course_info div {
float: right;
}
.dir-rtl .course_category_tree .controls div {
padding: 7px;
}
.course_category_tree .category .course_info img {
margin-left: .45em;
}
.dir-rtl .course_category_tree .category .course_info img {
margin-right: .45em;
margin-left: 0;
}
.jsenabled .course_category_tree .controls {
visibility: visible;
}
.jsenabled .course_category_tree .category.with_children.collapsed .category_label {
background-image: url([[pix:moodle|t/collapsed]]);
}
.jsenabled .course_category_tree .category.with_children.collapsed .subcategories,
.jsenabled .course_category_tree .category.with_children.collapsed .courses {
display: none;
}
/**
* Overide for RTL layout
*/
.dir-rtl .coursebox .info {
float: right;
text-align: right;
}
.dir-rtl .coursebox .summary {
text-align: right;
}
.dir-rtl .course_category_tree .category.with_children > .category_label {
background-position: center right;
padding-right: 18px;
}
.dir-rtl .course_category_tree .category_label, .dir-rtl .course_category_tree .category .course {
padding-right: 18px;
}
.dir-rtl.jsenabled .course_category_tree .category.with_children.collapsed .category_label {
background-image: url([[pix:moodle|t/collapsed_rtl]]);
}
.dir-rtl .course_category_tree .category .courses .course_link {
background-position: center right;
padding-right: 18px;
}
.dir-rtl .categorylist .course {
padding-right: 18px;
}
#page-course-index.dir-rtl .category .image {
padding-left: 5px;
padding-right: 0;
}
#page-course-index.dir-rtl .indentation {
padding-left: 0;
padding-right: 30px;
}
table.category_subcategories {
margin-bottom: 1em;
}
table.category_subcategories td {
white-space: nowrap;
}
span.editinstructions {
position: absolute;
top: 0;
left: 0;
margin-top: -22px;
margin-left: 30px;
line-height: 16px;
font-size: @fontSizeSmall;
padding: .1em .4em;
background-color: @infoBackground;
color: @infoText;
text-decoration: none;
z-index: 9999;
.box-shadow(2px 2px 5px 1px #ccc);
border: 1px solid @infoBorder;
}
.dir-rtl span.editinstructions {
left: auto;
right: 32px;
}
input.titleeditor {
width: 330px;
vertical-align: text-bottom;
}
/* Course drag and drop upload styles */
#dndupload-status {
width: 40%;
margin: 0 30%;
padding: 6px;
border: 1px solid @infoBorder;
text-align: center;
background: @infoBackground;
color: @infoText;
position: absolute;
z-index: 9999;
.box-shadow(2px 2px 5px 1px #ccc);
.border-bottom-radius(8px);
z-index: 0;
}
.dndupload-preview {
color: #909090;
border: 1px dashed #909090;
list-style: none;
margin-top: .2em;
padding: .3em;
}
.dndupload-preview img.icon {
vertical-align: text-bottom;
padding: 0;
}
.dndupload-progress-outer {
.progress;
}
.dndupload-progress-inner {
.progress .bar;
}
.dndupload-hidden {
display: none;
}

View File

@ -0,0 +1,67 @@
.phpinfo table,
.phpinfo th,
.phpinfo h2 {
margin: auto;
text-align: left;
}
.phpinfo h2 {
width: 600px;
}
.phpinfo .e,
.phpinfo .v,
.phpinfo .h {
border: 1px solid #000000;
font-size: 0.8em;
vertical-align: baseline;
color: #000000;
background-color: #cccccc;
}
.phpinfo .e {
background-color: #ccccff;
font-weight: bold;
}
.phpinfo .h {
background-color: #9999cc;
font-weight: bold;
}
#page-footer .performanceinfo {
text-align: center;
margin: 10px 20%;
}
#page-footer .performanceinfo span {
display: block;
}
#page-footer .validators {
margin-top: 40px;
padding-top: 5px;
border-top: 1px dotted gray;
}
#page-footer .validators ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#page-footer .validators ul li {
display: inline;
margin-right: 10px;
margin-left: 10px;
}
.performanceinfo .cachesused {
margin-top: 1em;
}
.performanceinfo .cachesused .cache-stats-heading {
font-weight: bold;
text-decoration: underline;
font-size: 110%;
}
.performanceinfo .cachesused .cache-definition-stats {
font-weight: bold;
margin-top: 0.3em;
}
.performanceinfo .cachesused .cache-store-stats {
text-indent: 1em;
}
.performanceinfo .cachesused .cache-total-stats {
font-weight: bold;
margin-top: 0.3em;
}

View File

@ -0,0 +1,76 @@
table#explaincaps,
table#defineroletable,
table.grading-report,
table#listdirectories,
table.rolecaps,
table.userenrolment,
table#form,
form#movecourses table,
#page-admin-course-index .editcourse,
.forumheaderlist,
table.flexible,
.generaltable {
.table-striped;
}
#page-report-loglive-index .generaltable,
#page-admin-report-log-index .generaltable,
#page-report-log-user .generaltable,
#page-admin-user table,
.environmenttable,
.category_subcategories,
.rcs-results,
table#listdirectories {
.table-condensed
}
.user-enroller-panel .uep-search-results .users,
table.grading-report,
.forumheaderlist,
.generaltable,
table.flexible,
.category_subcategories,
table#modules,
table#permissions {
.table-hover
}
// language editing progress bar
// copied in because the styles are set on the HTML
div[id^="bar_pbar_"] {
overflow: hidden !important;
height: @baseLineHeight !important;
margin-bottom: @baseLineHeight !important;
#gradient > .vertical(#f5f5f5, #f9f9f9) !important;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1)) !important;
.border-radius(@baseBorderRadius) !important;
border: none !important;
}
div[id^="progress_pbar_"] {
height: 100% !important;
color: @white !important;
float: left !important;
font-size: 12px !important;
text-align: center !important;
text-shadow: 0 -1px 0 rgba(0,0,0,.25) !important;
#gradient > .vertical(#149bdf, #0480be) !important;
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)) !important;
.box-sizing(border-box) !important;
.transition(width .6s ease) !important;
padding-top: 0 !important;
border: none !important;
}
// colored buttons
input.form-submit,
input#id_submitbutton,
input#id_submitbutton2,
.path-admin .buttons input[type="submit"],
td.submit input {
.btn-primary
}
// override .btn-primary
#notice .singlebutton + .singlebutton input,
.submit.buttons input[name="cancel"] {
.btn;
}
input[id$="_clearbutton"],
input[type="reset"] {
.btn-warning
}

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,318 @@
/**
* Moodle forms HTML isn't changeable via renderers (yet?) so this
* .less file imports styles from the bootstrap @variables file and
* adds them to the existing Moodle form CSS ids and classes.
*
*/
form {
margin: 0;
}
.mform fieldset .advancedbutton {
text-align: right;
}
.mform fieldset.group {
margin-bottom: 0
}
.mform fieldset.error {
border: 1px solid @errorText;
}
.mform fieldset.collapsible legend a.fheader {
padding: 0 5px 0 20px;
margin-left: -20px;
background: url([[pix:t/expanded]]) 2px center no-repeat;
}
.mform fieldset.collapsed legend a.fheader {
background: url([[pix:t/collapsed]]) 2px center no-repeat;
}
.jsenabled .mform .collapsed .fcontainer {
display: none;
}
.mform .collapsible-actions {
display: none;
text-align: right;
}
.dir-rtl .mform .collapsible-actions {
text-align: left;
}
.jsenabled .mform .collapsible-actions {
display: block;
}
.mform .fitem .fitemtitle div {
display: inline;
}
.loginpanel .error,
.mform .error {
color: @errorText;
}
.mform .fdescription.required {
margin-left: @horizontalComponentOffset;
}
.mform .fpassword .unmask {
display: inline-block;
margin-left: 0.5em;
& > input {
margin: 0;
}
& > label {
display: inline-block;
}
}
.mform .ftextarea #id_alltext {
width: 100%;
}
.mform ul.file-list {
padding: 0;
margin: 0;
list-style: none;
}
.mform label .req,
.mform label .adv {
cursor: help;
}
.mform .fcheckbox input {
margin-left: 0;
margin-top: 5px;
}
.mform .fitem fieldset.fgroup label,
.mform fieldset.fdate_selector label {
display: inline;
float: none;
width: auto;
}
.mform .ftags label.accesshide {
display: block;
position: static;
}
.mform .ftags select {
margin-bottom: 0.7em;
min-width: 22em;
}
.mform .helplink img {
margin: 0 .45em;
padding: 0;
}
.mform legend .helplink img {
margin: 0 .2em;
}
.singleselect label {
margin-right: .3em;
}
.dir-rtl .singleselect label {
margin-left: .3em;
margin-right: 0;
}
input#id_externalurl {
direction: ltr;
}
#portfolio-add-button {
display: inline;
}
// copying in Bootstrap styles
.form-item,
.mform .fitem {
.form-horizontal .control-group;
margin-bottom: 10px;
// Theres's a mysterious extra 10px inside this item,
// so reduce margin by 10px from 20px standard to compensate;
}
.form-item .form-label,
.mform .fitem div.fitemtitle {
.form-horizontal .control-label
}
.form-defaultinfo,
.form-label .form-shortname {
.muted;
}
.form-label .form-shortname {
font-size: @fontSizeMini;
display: block;
}
.dir-rtl .form-label .form-shortname {
text-align: left;
}
.form-item .form-setting,
.form-item .form-description,
.mform .fitem .felement,
#page-mod-forum-search .c1 {
.form-horizontal .controls
}
.formsettingheading {
.form-horizontal .help-block
}
// Moodle doesn't differentiate between what Bootstrap calls
// .uneditable-inputs and form help text. Styling them both as
// uneditable looks ugly, styling both as form help is fairly
// subtle in it's impact. Going for the latter as the best option.
.form-item .form-description,
.felement.fstatic {
.help-block;
padding-top: 5px;
}
.form-item .form-description {
padding-top: 0;
}
// Pale grey container for submit buttons.
table#form td.submit,
.form-buttons,
.path-admin .buttons,
#fitem_id_submitbutton,
.fp-content-center form + div,
div.backup-section + form,
#fgroup_id_buttonar {
.form-actions;
padding-left: 0;
}
.path-admin .buttons,
.form-buttons {
padding-left: @horizontalComponentOffset;
// add back the padding it would usually get from being inside a .form-horizontal
}
.form-item .form-setting .form-checkbox.defaultsnext {
// need to specify .defaultsnext and the .form-checkbox class
// is somewhat randomly re-used on various actual checkboxes
// throughout the admin forms, instead of on the wrapper div
margin-top: 5px; // Push down checkboxes to align.
display: inline-block; // So above style sticks.
}
#adminsettings h3.main {
// Copied from bootstrap/forms.less tag legend
display: block;
width: 100%;
padding: 0;
margin-bottom: @baseLineHeight;
font-size: @baseFontSize * 1.5;
line-height: @baseLineHeight * 2;
color: @grayDark;
border: 0;
border-bottom: 1px solid #e5e5e5;
}
.mform legend a,
.mform legend a:hover {
color: @grayDark;
text-decoration: none;
}
.dir-rtl .mform .fitem .fitemtitle {
float: right;
}
.dir-rtl .mform .fitem .felement {
margin-right: 16%;
margin-left: auto;
text-align: right;
}
// I think this could be avoided (or at least tidied up) ifr
// we used HTML5 input types like url, phone, email, number etc.
.dir-rtl .mform .fitem .felement input[name=email],
.dir-rtl .mform .fitem .felement input[name=email2],
.dir-rtl .mform .fitem .felement input[name=url],
.dir-rtl .mform .fitem .felement input[name=idnumber],
.dir-rtl .mform .fitem .felement input[name=phone1],
.dir-rtl .mform .fitem .felement input[name=phone2] {
text-align: left;
direction: ltr;
}
.dir-rtl #id_s__pathtodu,
.dir-rtl #id_s__aspellpath,
.dir-rtl #id_s__pathtodot,
.dir-rtl #id_s__supportemail,
.dir-rtl #id_s__supportpage,
.dir-rtl #id_s__sessioncookie,
.dir-rtl #id_s__sessioncookiepath,
.dir-rtl #id_s__sessioncookiedomain,
.dir-rtl #id_s__proxyhost,
.dir-rtl #id_s__proxyuser,
.dir-rtl #id_s__proxypassword,
.dir-rtl #id_s__proxybypass,
.dir-rtl #id_s__jabberhost,
.dir-rtl #id_s__jabberserver,
.dir-rtl #id_s__jabberusername,
.dir-rtl #id_s__jabberpassword,
.dir-rtl #id_s__additionalhtmlhead,
.dir-rtl #id_s__additionalhtmltopofbody,
.dir-rtl #id_s__additionalhtmlfooter,
.dir-rtl #id_s__docroot,
.dir-rtl #id_s__filter_tex_latexpreamble,
.dir-rtl #id_s__filter_tex_latexbackground,
.dir-rtl #id_s__filter_tex_pathlatex,
.dir-rtl #id_s__filter_tex_pathdvips,
.dir-rtl #id_s__filter_tex_pathconvert,
.dir-rtl #id_s__blockedip,
.dir-rtl #id_s__pathtoclam,
.dir-rtl #id_s__quarantinedir,
.dir-rtl #id_s__sitepolicy,
.dir-rtl #id_s__sitepolicyguest,
.dir-rtl #id_s__cronremotepassword,
.dir-rtl #id_s__allowedip,
.dir-rtl #id_s__blockedip,
.dir-rtl #id_s_enrol_meta_nosyncroleids,
.dir-rtl #id_s_enrol_ldap_host_url,
.dir-rtl #id_s_enrol_ldap_ldapencoding,
.dir-rtl #id_s_enrol_ldap_bind_dn,
.dir-rtl #id_s_enrol_ldap_bind_pw,
.dir-rtl #admin-emoticons .form-text,
.dir-rtl #admin-role_mapping input[type=text],
.dir-rtl #id_s_enrol_paypal_paypalbusiness,
.dir-rtl #id_s_enrol_flatfile_location,
#page-admin-setting-enrolsettingsflatfile.dir-rtl input[type=text],
#page-admin-setting-enrolsettingsdatabase.dir-rtl input[type=text],
#page-admin-auth-db.dir-rtl input[type=text] {
direction: ltr;
}
#page-admin-setting-enrolsettingsflatfile.dir-rtl .informationbox {
direction: ltr;
text-align: left;
}
#page-admin-grade-edit-scale-edit.dir-rtl .error input#id_name {
margin-right: 170px;
}
/* Install Process' text fields Forms, should always be justified to the left */
#installform #id_wwwroot,
#installform #id_dirroot,
#installform #id_dataroot,
#installform #id_dbhost,
#installform #id_dbname,
#installform #id_dbuser,
#installform #id_dbpass,
#installform #id_prefix {
direction: ltr;
}
.mdl-right > label {
// Workaround for repository pop-up because the : are outside the label,
// can/should be fixed in filemanager renderers
display: inline-block;
}
// checkbox labels. Bootstrap puts the associated checkbox inside the label
// Moodle puts it beside the label, so wee need to make it inline-block
// to keep it on the same horizontal level
input[type="radio"] + label,
input[type="checkbox"] + label {
display: inline;
padding-left: 0.2em;
}
input[type="radio"],
input[type="checkbox"] {
margin-top: -4px; // dodgy hack, must be better way
}
.singleselect {
display: inline-block;
form,
select{
margin: 0;
}
}
.form-item .form-label label {
margin-bottom: 0;
}
.felement.ffilepicker {
margin-top: 5px;
}

View File

@ -0,0 +1,588 @@
/* grades.less */
.allcoursegrades {
width: 100%;
text-align: right;
padding: 4px 0 5px 0;
}
.path-grade-edit .buttons {
text-align: center;
}
.path-grade-edit-tree .idnumber {
margin-left: 15px;
}
.path-grade-edit-tree .movetarget {
position: relative;
width: 80px;
height: 16px;
}
.path-grade-edit-tree ul#grade_tree {
width: auto;
}
.path-grade-edit-tree ul#grade_tree li {
list-style: none;
}
.path-grade-edit-tree ul#grade_tree li.category {
margin-bottom: 6px;
}
.path-grade-edit-tree .iconsmall {
margin-left: 4px;
}
#grade-report-toggles {
text-align: center;
}
#grade-aggregation-help dt {
margin-top: 15px;
}
#grade-aggregation-help dd.example {
margin-top: 7px;
}
#grade-aggregation-help code {
display: block;
margin-top: 7px;
}
.gradeexportlink {
padding: 2em;
text-align: center;
}
.gradetreebox {
margin-top: 10px;
overflow-x: auto;
overflow-y: hidden;
}
.gradetreebox table {
font-size: 0.8em;
width: 100%;
}
.gradetreebox td.colspan,
.gradetreebox tr.category .cell {
background-color: #DDD;
}
.gradetreebox th.actions {
white-space: nowrap;
width: 105px;
}
.gradetreebox td.name {
white-space: nowrap;
}
.gradetreebox td.name h4 {
display: inline;
}
.gradetreebox td.range {
white-space: nowrap;
}
.gradetreebox span.actionlink {
color: blue;
}
.gradetreebox span.actionlink:hover {
text-decoration: underline;
cursor: pointer;
}
.gradetreebox img.iconsmall {
margin-left: 4px;
}
.gradetreebox img.icon {
margin-right: 5px;
}
.gradetreebox #gradetreesubmit {
margin-bottom: 1em;
text-align: center;
}
.gradetreebox .hidden {
display: none;
}
/** Advanced grading **/
#page-grade-grading-manage #activemethodselector {
text-align: center;
margin-bottom: 1em;
}
#page-grade-grading-manage #activemethodselector select {
margin: 0 1em;
}
#page-grade-grading-manage .actions {
text-align: center;
}
#page-grade-grading-manage .action {
display: inline-block;
width: 150px;
background-color: #eee;
border: 2px solid #ccc;
margin: 0.5em;
padding: 0.5em;
text-align: center;
.border-radius(5px);
}
#page-grade-grading-manage .action:hover {
text-decoration: none;
background-color: #F6F6F6;
}
#page-grade-grading-manage #actionresultmessagebox {
background-color: #D2EBFF;
width: 60%;
margin: 1em auto;
text-align: center;
padding: 0.5em;
border: 2px solid #CCC;
text-align: center;
.border-radius(5px);
position: relative;
}
#page-grade-grading-manage #actionresultmessagebox span {
position: absolute;
right: 0;
top: -1.2em;
color: #666;
font-size: 80%}
#page-grade-grading-manage .definition-name .status {
font-weight: normal;
text-transform: uppercase;
font-size: 60%;
padding: 0.25em;
border: 1px solid #EEE;
.border-radius(5px);
}
#page-grade-grading-manage .definition-name .status.ready {
background-color: #e7f1c3;
border-color: #AAEEAA;
}
#page-grade-grading-manage .definition-name .status.draft {
background-color: #f3f2aa;
border-color: #EEEE22;
}
#page-grade-grading-manage .definition-preview {
width: 50%;
margin: 1em auto;
border: 1px solid #EEE;
padding: 1em;
}
#page-grade-grading-pick .template-name {
clear: both;
padding: 3px;
background-color: #F6F6F6;
}
#page-grade-grading-pick .template-name .type {
font-weight: normal;
text-transform: uppercase;
font-size: 60%;
padding: 0.25em;
border: 1px solid #eee;
.border-radius(5px);
}
#page-grade-grading-pick .template-name .type.shared {
background-color: #e7f1c3;
border-color: #AAEEAA;
}
#page-grade-grading-pick .template-name .type.ownform {
background-color: #d2ebff;
border-color: #AACCEE;
}
#page-grade-grading-pick .template-description {
margin-bottom: 1em;
padding: 0 2em 0 0px;
margin-right: 51%;
}
#page-grade-grading-pick .template-preview {
width: 50%;
float: right;
border: 1px solid #EEE;
padding: 1em;
margin-bottom: 1em;
}
#page-grade-grading-pick .template-actions {
margin-bottom: 1em;
padding: 0 2em 0 0px;
margin-right: 51%;
}
#page-grade-grading-pick .template-actions .action {
display: inline-block;
margin: 0.25em;
padding: 0.25em;
border: 2px solid transparent;
}
#page-grade-grading-pick .template-actions .action.pick {
background-color: #EEE;
border: 2px solid #CCC;
.border-radius(3px);
}
#page-grade-grading-pick .template-actions .action:hover {
text-decoration: none;
background-color: #F6F6F6;
border: 2px solid #CCC;
.border-radius(3px);
}
#page-grade-grading-pick .template-actions .action .action-text {
display: inline;
}
#page-grade-grading-pick .template-actions .action .action-icon {
margin: 0 3px;
}
#page-grade-grading-pick .template-preview-confirm {
width: 50%;
margin: 1em auto;
border: 1px solid #EEE;
padding: 1em;
}
#page-grade-grading-pick .singlebutton {
clear: both;
}
// replaces grades/report/grader/styles.css
table#user-grades tr td.overridden {
background-color:#F3E4C0;
}
table#user-grades tr.odd td.overridden {
background-color:#EFD9A4;
}
table#user-grades tr td.ajaxoverridden {
background-color:#FFE3A0;
}
table#user-grades tr.odd td.ajaxoverridden {
background-color:#FFDA83;
}
table#user-grades tr.even td.excluded {
background-color:#EABFFF;
}
table#user-grades tr.odd td.excluded {
background-color:#E5AFFF;
}
table#user-grades tr.groupavg td.cell {
background-color:#efffef;
font-weight:700;
color:#006400;
}
table#user-grades td.cat,
table#user-grades td.course {
font-weight:700;
}
.path-grade-report-grader #overDiv table {
margin:0;
}
.path-grade-report-grader #overDiv table td.feedback {
border:0;
}
.path-grade-report-grader #overDiv .feedback {
font-size: @fontSizeMini;
background-color:#ABF;
font-weight:400;
}
.path-grade-report-grader #overDiv .caption {
font-size: @fontSizeMini;
background-color:#56C;
color:#CCF;
font-weight:700;
}
.path-grade-report-grader #overDiv .intersection {
font-size: @fontSizeMini;
background-color:#ABF;
color:#000;
font-weight:400;
}
.path-grade-report-grader #overDiv .intersectioncaption {
background-color:#56C;
color:#CCF;
font-weight:700;
}
.path-grade-report-grader div.gradeparent,
table#user-grades td.ajax {
text-align:left;
}
.path-grade-report-grader.dir-rtl div.gradeparent,
.dir-rtl table#user-grades td.ajax {
text-align: right;
}
table#user-grades td,
table#user-grades th {
text-align: right;
}
table#user-grades .courseitem {
white-space: nowrap;
text-align: right;
}
table#user-grades th.category,
table#user-grades th#studentheader,
table#user-grades th.user {
text-align: left;
}
div.gradertoggle {
display: inline;
margin-left: 20px;
}
table#user-grades .userpic {
margin-right: 10px;
}
table#user-grades .quickfeedback {
border:1px dashed #000;
margin-left: 10px;
}
.dir-rtl table#user-grades .quickfeedback {
margin-left: 0;
margin-right: 10px;
}
.path-grade-report-grader #siteconfiglink {
text-align:right;
}
table#user-grades .hidden,
table#user-grades .hidden a {
.muted
}
table#user-grades .datesubmitted {
font-size: @fontSizeMini;
}
.path-grade-report-grader span.inclusion-links {
margin: 0 5px 0 10px;
}
.path-grade-report-grader th.user img.userpicture {
margin-right: 0.5em;
}
.path-grade-report-grader a.quickedit {
line-height:1em;
display:block;
float:right;
clear:none;
font-size:9px;
background-color:transparent;
margin:.1em 0 0;
}
.path-grade-report-grader a.quickedit2 {
display:block;
float:right;
clear:none;
background-color:transparent;
margin:1.3em 0 0;
}
.path-grade-report-grader table#quick_edit {
border:1px solid #cecece;
margin:0 auto;
}
.path-grade-report-grader table#quick_edit td {
vertical-align:middle;
border:1px solid #cecece;
text-align:left;
margin:0;
padding:5px;
}
.path-grade-report-grader table#quick_edit td img {
border:3px double #cecece;
vertical-align:middle;
padding:0;
}
.path-grade-report-grader table#quick_edit td.fullname {
border-left:0;
padding-left:5px;
}
.path-grade-report-grader table#quick_edit td.picture {
border-right:0;
}
.path-grade-report-grader table#quick_edit td.finalgrade input {
width:5em;
}
.path-grade-report-grader h1 {
text-align:center;
clear:both;
}
.path-grade-report-grader input.center {
margin:10px auto 0;
}
.path-grade-report-grader .lefttbody {
width:auto;
vertical-align:middle;
}
.path-grade-report-grader .left_scroller {
float:left;
clear:none;
#fixed_column .heading th.header,
#fixed_column td,
#fixed_column th {
height: 4em;
}
#fixed_column td.controls {
height: 2em;
}
}
.path-grade-report-grader.dir-rtl .left_scroller {
float: right;
}
.path-grade-report-grader .right_scroller {
width: auto;
clear: none;
overflow-x: scroll;
tr.heading_name_row th,
table#user-grades td.grade {
height: 4em;
}
.path-grade-report-grader .left_scroller .topleft,
tr.avg td,
tr.groupavg,
tr.controls_row,
div.right_scroller tr {
height: 2em;
}
}
table#fixed_column,
table#user-grades,
table#fixed_column th,
table#fixed_column td,
table#user-grades td,
table#user-grades th,
table#user-grades input {
font-size:10px;
margin: 0;
padding: 0 2px;
vertical-align: middle;
}
.path-grade-report-grader form td.excluded {
color: @errorText;
}
.path-grade-report-grader .excludedfloater {
font-weight: 700;
color: @errorText;
font-size: 9px;
float: left;
}
.path-grade-report-grader span.gradepass {
color:#298721;
}
.path-grade-report-grader span.gradefail {
color:#890d0d;
}
.path-grade-report-grader .gradeweight {
color:#461d7c;
font-weight:700;
}
.path-grade-report-grader td select {
font-size: 100%;
padding: 0;
}
.path-grade-report-grader .right_scroller td select {
font-size: @fontSizeSmall;
}
.path-grade-report-grader .grade_icons img.ajax {
float:right;
}
.path-grade-report-grader .gradestable th.user,
.path-grade-report-grader .gradestable th.range,
.path-grade-report-grader .flexible th,
.path-grade-report-grader .flexible td,
.path-grade-report-grader .flexible th a,
.path-grade-report-grader .flexible td a,
.path-grade-report-grader .gradestable th.range,
.path-grade-report-grader th,
.path-grade-report-grader td {
white-space: nowrap;
}
table#user-grades td.vmarked {
background-color: #fc3;
}
table#user-grades td.hmarked {
background-color: #ff9;
}
table#user-grades td.hmarked.vmarked {
background-color: #fc9;
}
.path-grade-report-grader .gradeparent {
overflow: auto;
}
table#fixed_column tr.controls td,
table#user-grades tr.controls td,
.path-grade-report-grader table tr.avg,
.path-grade-report-grader table tr.avg:hover {
background-color: @infoBackground;
}
.path-grade-report-grader table th.user,
.path-grade-report-grader table td.userfield {
text-align:left;
}
.path-grade-report-grader .usersuspended a:link,
.path-grade-report-grader .usersuspended a:visited {
.muted
}
.path-grade-report-grader table th.usersuspended img.usersuspendedicon {
vertical-align: text-bottom;
margin-left: .45em;
}
.path-grade-report-grader .yui3-overlay {
background-color: #FFEE69;
border-color: #D4C237 #A6982B #A6982B;
border-style: solid;
border-width: 1px;
left: 0;
padding: 2px 5px;
font-size: 0.7em;
}
.path-grade-report-grader .yui3-overlay .fullname {
color: #5F3E00;
font-weight: bold;
}
.path-grade-report-grader .yui3-overlay .itemname {
color: #194F3E;
font-weight: bold;
}
.path-grade-report-grader .yui3-overlay .feedback {
color: #5F595E;
}
.path-grade-report-grader #tooltipPanel {
text-align: left;
}
.path-grade-report-grader .yui3-overlay a.container-close {
margin-top: -3px;
}
.path-grade-report-grader #hiddentooltiproot, .tooltipDiv {
display: none;
}

View File

@ -0,0 +1,183 @@
/** Message **/
.message-discussion-noframes h1 {
font-size: 1em;
}
.message-discussion-noframes #userinfo .commands,
.message .noframesjslink,
.message .link {
font-size: @fontSizeSmall;
}
.message .heading {
font-size: 1em;
font-weight: bold;
}
.message .author {
font-weight: bold;
}
.message .time {
font-style: italic;
}
#page-message-user .commands span {
font-size: 0.7em;
}
#page-message-user .name {
font-weight: bold;
font-size: 1.1em;
}
table.message_search_results td {
border-color: #ddd;
}
.message .time,
.message.me .author {
color: #999;
}
.message.other .author {
color: #88c;
}
#page-message-messages {
padding: 10px;
}
#page-message-send .notifysuccess {
padding: 1px;
}
#page-message-send td.fixeditor {
text-align: center;
}
.message .note {
padding: 10px;
}
table.message .searchresults td {
padding: 5px;
}
.message .contactselector {
width: 24%;
float: left;
}
.message .contactselector .contact {
text-align: left;
}
.message .contactselector .messageselecteduser {
font-weight: bold;
}
.message .contactselector .paging {
z-index: 1;
position: relative;
}
.message .messagearea {
padding-left: 1%;
border-left: 1px solid #d3d3d3;
width: 74%;
float: right;
min-height: 200px;
}
.message .messagearea .messagehistorytype {
clear: both;
padding-bottom: 20px;
}
.message .messagearea .messagehistory .message_user_pictures {
margin-left: auto;
margin-right: auto;
}
.message .messagearea .messagehistory .message_user_pictures #user1 {
vertical-align: top;
width: 200px;
}
.message .messagearea .messagehistory .message_user_pictures #user2 {
vertical-align: top;
width: 200px;
}
.message .messagearea .messagehistory .message_user_pictures .useractionlinks {
font-size: 0.9em;
}
.message .messagearea .messagehistory .heading {
width: 100%;
clear: both;
}
.message .messagearea .messagehistory .left {
padding-bottom: 10px;
width: 50%;
float: left;
clear: both;
}
.message .messagearea .messagehistory .right {
padding-bottom: 10px;
width: 50%;
float: right;
clear: both;
}
.message .messagearea .messagehistory .notification {
padding: 10px;
background-color: #eee;
margin-top: 5px;
}
.message .messagearea .messagesend {
padding-top: 20px;
clear: both;
}
.message .messagearea .messagesend .messagesendbox {
width: 100%;
}
.message .messagearea .messagesend fieldset {
padding: 0;
margin: 0;
}
// Bring the message send button closer to the message box.
.message .messagearea .messagerecent {
text-align: left;
width: 100%;
}
.message .messagearea .messagerecent .singlemessage {
border-bottom: 1px solid #d3d3d3;
padding: 10px;
}
.message .messagearea .messagerecent .singlemessage .otheruser span {
padding: 5px;
}
.message .messagearea .messagerecent .singlemessage .messagedate {
float: right;
}
.message .hiddenelement {
display: none;
}
// not just using hidden as mform adds that class to its fieldset */
.message .visible {
display: inline;
}
.message #usergroupselector.fieldset, .message #viewing {
width: 100%;
}
.messagesearchresults {
margin-bottom: 40px;
}
.messagesearchresults td {
padding: 0 10px 0 20px;
}
.messagesearchresults td span {
white-space: nowrap;
}
.messagesearchresults td img.userpicture {
padding-right: .45em;
vertical-align: text-bottom;
}
.dir-rtl .messagesearchresults td img.userpicture {
padding-left: .45em;
padding-right: 0;
}
.messagesearchresults td span img {
padding: 0 0 0 .45em;
vertical-align: text-bottom;
}
.dir-rtl .messagesearchresults td span img {
padding: 0 .45em 0 0;
}
#newmessageoverlay {
background-color: #d3d3d3;
border: 1px solid black;
padding: 20px;
position: fixed;
bottom: 0;
right: 0;
}
#newmessageoverlay #usermessage {
padding: 10px;
}

View File

@ -0,0 +1,133 @@
/* modules.less */
// The home for small tweaks to modules that don't require
// changes drastic enough to pull in the full module css
// and replace it completely
// Plus some misc. odds and ends
select {
width: auto;
}
.path-mod-forum .forumheaderlist,
.path-mod-forum .forumheaderlist td {
border: none;
}
.forumpost {
.well;
padding: 6px;
}
.forumpost .row .left {
width: auto;
}
.forumpost .options .commands {
margin-left: 0;
}
.forumpost .subject {
font-weight: bold;
}
// Override hardcoded forum modules styling
.forumsearch input[type=text] {
margin-bottom: 0 !important;
}
#page-mod-forum-discuss .discussioncontrol.displaymode {
text-align: left;
}
#page-mod-forum-discuss .discussioncontrols .discussioncontrol {
float: left;
}
#page-footer {
margin-top: 1em;
padding: 1em 0;
border-top: 2px solid #eee;
}
.maincalendar .calendarmonth td,.maincalendar .calendarmonth th {
border: 1px dotted #ddd;
}
.path-grade-report-grader h1 {
text-align: inherit;
}
#page-mod-chat-gui_basic input#message {
max-width: 100%;
}
#page-mod-data-view #singleimage {
width: auto;
}
.path-mod-data form {
margin-top: 10px;
}
.template_heading {
margin-top: 10px;
}
.breadcrumb-button {
float: right;
margin-top: 3px;
}
.dir-rtl .navbar .brand {
float: right;
}
.navbar .logininfo a {
color: @navbarLinkColor;
}
.navbar .logininfo a:hover {
background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
color: @navbarLinkColorHover;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
z-index: 4030;
}
.dir-rtl .breadcrumb-button,
.dir-rtl .navbar .btn-navbar {
float: left;
}
.ie .row-fluid .desktop-first-column {
margin-left: 0;
}
.langmenu form {
margin: 0;
}
.container-fluid {
max-width: 1680px;
margin: 0 auto;
}
// contributed by Paul Hibbitts, see http://msdn.microsoft.com/en-us/library/ie/jj583807(v=vs.85).aspx
canvas {
-ms-touch-action: auto;
}
div#dock {
display: none;
}
.path-mod-choice .horizontal .choices {
margin: 0;
.option {
display: inline-block;
padding: 10px;
}
}
.path-mod-lesson .firstpageoptions {
margin: auto;
min-width: 280px;
width: 60%;
}

View File

@ -0,0 +1,394 @@
/* Question */
.questionbank h2 {
margin-top: 0;
}
.questioncategories h3 {
margin-top: 0;
}
#chooseqtypebox {
margin-top: 1em;
}
#chooseqtype h3 {
margin: 0 0 0.3em;
}
#chooseqtype .instruction {
display: none;
}
#chooseqtype .fakeqtypes {
border-top: 1px solid silver;
}
#chooseqtype .qtypeoption {
margin-bottom: 0.5em;
}
#chooseqtype label {
display: block;
}
#chooseqtype .qtypename img {
padding: 0 0.3em;
}
#chooseqtype .qtypesummary {
display: block;
margin: 0 2em;
}
#chooseqtype .submitbuttons {
margin: 0.7em 0;
text-align: center;
}
#qtypechoicecontainer {
display: none;
}
#qtypechoicecontainer_c.yui-panel-container.shadow .underlay {
background: none;
}
#qtypechoicecontainer.yui-panel .hd {
color: #333;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #fff;
.border-top-radius(10px);
border: 1px solid #ccc;
border-bottom: 1px solid #bbb;
#gradient > .vertical(#fff, #ccc);
}
#qtypechoicecontainer {
font-size: 12px;
color: #333;
background: #F2F2F2;
.border-radius(10px);
border: 1px solid #ccc;
border-top: 0 none;
.box-shadow(5px 5px 20px 0 #666);
}
//#qtypechoicecontainer
#chooseqtype {
width: 35em;
}
#chooseqtypehead h3 {
margin: 0;
font-weight: normal;
}
#chooseqtype .qtypes {
position: relative;
border-bottom: 1px solid #bbb;
padding: 0.24em 0;
}
#chooseqtype .qtypeoption {
margin-bottom: 0;
padding: 0.3em 0.3em 0.3em 1.6em;
}
#chooseqtype .qtypeoption img {
vertical-align: text-bottom;
padding-left: 1em;
padding-right: 0.5em;
}
#chooseqtype .selected {
background-color: #fff;
.box-shadow(0px 0 10px 0 #ccc);
}
#chooseqtype .instruction,
#chooseqtype .qtypesummary {
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 60%;
margin: 0;
padding: 1.5em 1.6em;
background-color: #fff;
}
#chooseqtype .instruction,
#chooseqtype .selected .qtypesummary {
display: block;
}
#categoryquestions {
margin: 0;
}
#categoryquestions td,
#categoryquestions th {
padding: 0 0.2em;
}
#categoryquestions th {
text-align: left;
font-weight: normal;
}
#categoryquestions .checkbox {
padding-left: 20px;
}
.dir-rtl #categoryquestions th {
text-align: right;
}
.questionbank .singleselect {
margin: 0;
}
/* Question editing form */
#combinedfeedbackhdr div.fhtmleditor {
padding: 0;
}
#combinedfeedbackhdr div.fcheckbox {
margin-bottom: 1em;
}
#multitriesheader div.fitem_feditor {
margin-top: 1em;
}
#multitriesheader div.fitem_fgroup {
margin-bottom: 1em;
}
#multitriesheader div.fitem_fgroup fieldset.felement label {
margin-left: 0.3em;
margin-right: 0.3em;
}
.que {
clear: left;
text-align: left;
margin: 0 auto 1.8em auto;
}
.dir-rtl .que {
text-align: right;
}
.que .info {
float: left;
width: 7em;
padding: 0.5em;
margin-bottom: 1.8em;
background-color: @grayLighter;
border: 1px solid darken(spin(@grayLighter, -10), 7%);
.border-radius(2px);
}
.que h2.no {
margin: 0;
font-size: 0.8em;
line-height: 1;
}
.que span.qno {
font-size: 1.5em;
font-weight: bold;
}
.que .info > div {
font-size: 0.8em;
margin-top: 0.7em;
}
.que .info .questionflag.editable {
cursor: pointer;
}
.que .info .editquestion img,
.que .info .questionflag img,
.que .info .questionflag input {
vertical-align: bottom;
}
.que .content {
margin: 0 0 0 8.5em;
}
.que .formulation,
.que .outcome,
.que .comment,
.que .history {
.alert
}
.que .formulation {
.alert-info;
color: @textColor;
}
.que .outcome {
}
.que .comment {
.alert-success;
}
.que .history {
color: @textColor;
background: @grayLighter;
}
.que .ablock {
margin: 0.7em 0 0.3em 0;
}
.que .im-controls {
margin-top: 0.5em;
text-align: left;
}
.dir-rtl .que .im-controls {
text-align: right;
}
.que .specificfeedback,
.que .generalfeedback,
.que .rightanswer,
.que .im-feedback,
.que .feedback,
.que p {
margin: 0 0 0.5em;
}
.que .qtext {
margin-bottom: 1.5em;
}
.que .correct {
.label;
background-color: @successText;
}
.que .notanswered,
.que .incorrect {
.label;
background-color: @errorText;
}
.que .partiallycorrect {
background-color: @warningBackground;
}
.que .validationerror {
color: @errorText;
}
.que .grading,
.que .comment,
.que .commentlink,
.que .history {
margin-top: 0.5em;
}
.que .history h3 {
margin: 0 0 0.2em;
font-size: 1em;
}
.que .history table {
width: 100%;
margin: 0;
}
.que .history .current {
font-weight: bold;
}
.que .questioncorrectnessicon {
vertical-align: text-bottom;
}
.que input.questionflagimage {
padding-right: 3px;
}
.dir-rtl .que input.questionflagimage {
padding-left: 3px;
padding-right: 0;
}
.importerror {
margin-top: 10px;
border-bottom: 1px solid #555;
}
.mform .que.comment .fitemtitle {
width: 20%;
}
#page-question-preview #techinfo {
margin: 1em 0;
}
/** Overide for RTL layout **/
.dir-rtl #chooseqtype .instruction,
.dir-rtl #chooseqtype .qtypesummary {
right: 60%;
left: 0%;
border-left: 0;
border-right: 1px solid grey;
}
// imported from quiz.css
#page-mod-quiz-edit .questionbankwindow div.header {
color: #444;
text-shadow: none;
padding: 3px;
.border-top-radius(4px);
margin: 0 -10px 0 -10px;
padding: 2px 10px 2px 10px;
background: transparent; /* Old browsers */
}
#page-mod-quiz-edit .questionbankwindow div.header a:link,
#page-mod-quiz-edit .questionbankwindow div.header a:visited {
color: @linkColor;
}
#page-mod-quiz-edit .questionbankwindow div.header a:hover {
color: @linkColorHover;
}
#page-mod-quiz-edit .questionbankwindow div.header .title {
color: @textColor;
}
#page-mod-quiz-edit div.container div.generalbox {
background-color: transparent;
padding: 1.5em;
}
#page-mod-quiz-edit .categoryinfo {
background-color: @bodyBackground;
border-bottom: none;
}
#page-mod-quiz-edit div.questionbank .categoryquestionscontainer,
#page-mod-quiz-edit div.questionbank .categorysortopotionscontainer,
#page-mod-quiz-edit div.questionbank .categorypagingbarcontainer,
#page-mod-quiz-edit div.questionbank .categoryselectallcontainer {
padding: 0 0 1.5em 0;
}
#page-mod-quiz-edit div.questionbank .categorypagingbarcontainer {
padding: 1em;
background-color: transparent;
margin: 0 -1.2em;
border-top: none;
border-bottom: none;
}
#page-mod-quiz-edit div.questionbank .categoryquestionscontainer {
margin: 0 -1.2em -1em -1.2em;
}
#page-mod-quiz-edit div.question div.content div.questioncontrols {
background-color: @bodyBackground;
}
#page-mod-quiz-edit div.question div.content div.points {
margin-top: -0.5em;
padding-bottom: 0.5em;
border: none;
background-color: @bodyBackground;
}
#page-mod-quiz-edit div.quizpage .pagecontent .pagestatus {
background-color: @bodyBackground;
}
#page-mod-quiz-edit .quizpagedelete,
#page-mod-quiz-edit .quizpagedelete img {
background-color: transparent;
}
#page-mod-quiz-edit div.quizpage .pagecontent {
border: 1px solid #ddd;
.border-radius(2px);
overflow: hidden;
}
#page-mod-quiz-edit .modulespecificbuttonscontainer {
width: 220px;
}
.questionbankwindow .module {
width: auto;
}
#page-mod-quiz-edit div.editq div.question div.content {
background-color: @bodyBackground;
border: 1px solid #ddd;
.border-radius(2px);
overflow: hidden;
}
.path-mod-quiz .statedetails {
display: block;
font-size: 0.9em;
}
a#hidebankcmd {
color: @linkColor;
}
// override question plugins
// qtype_shortanswer
.que.shortanswer .answer {
padding: 0;
}
.que label {
display: inline;
}

View File

@ -0,0 +1,5 @@
Analyzing the following files: style/generated.css
Error reading file: style/generated.css

View File

@ -0,0 +1,367 @@
/* responsive.less */
// Should probably be moved to relevant .less files
// after 4095 selector issue is solved
@media (min-width: 980px) {
.dir-rtl .navbar .nav.pull-right,
.dir-rtl .navbar .logininfo {
float: left;
}
.dir-rtl .navbar .nav {
float: right;
& > li {
float: right;
}
}
}
// login page
@media (min-width: 1200px) {
.loginbox.twocolumns .loginpanel {
margin-left: 0;
}
.loginbox.twocolumns .loginpanel,
.loginbox.twocolumns .signuppanel {
width: 48.717948717948715%;
*width: 48.664757228587014%;
}
}
@media (min-width: 980px) {
.loginbox.twocolumns .loginpanel {
margin-left: 0;
}
.loginbox.twocolumns .loginpanel,
.loginbox.twocolumns .signuppanel {
width: 48.617948717948715%;
*width: 48.664757228587014%;
}
}
@media (min-width: 768px) and (max-width: 979px) {
.loginbox.twocolumns .loginpanel {
margin-left: 0;
}
.loginbox.twocolumns .loginpanel,
.loginbox.twocolumns .signuppanel {
width: 48.61878453038674%;
*width: 48.56559304102504%;
}
}
@media (max-width: 767px) {
.loginbox.twocolumns .loginpanel,
.loginbox.twocolumns .signuppanel {
display: block;
float: none;
width: 100%;
margin-left: 0;
.box-sizing(border-box);
}
}
// Course
@media (min-width: 1200px) {
.coursebox .info,
.coursebox .summary {
width: 48.717948717948715%;
*width: 48.664757228587014%;
}
}
@media (min-width: 980px) {
.coursebox .info,
.coursebox .summary {
width: 48.617948717948715%;
*width: 48.664757228587014%;
}
}
@media (min-width: 768px) and (max-width: 979px) {
.coursebox .info,
.coursebox .summary {
width: 48.61878453038674%;
*width: 48.56559304102504%;
}
}
@media ( max-width : 767px) {
.coursebox .info,
.coursebox .summary {
display: block;
float: none;
width: 100%;
margin-left: 0;
.box-sizing(border-box);
}
}
@media (max-width: 480px) {
// copied from tabs.less stacked-navs
.tabtree > ul {
border: none;
}
.tabtree > ul > li {
float: none;
}
.tabtree > ul > li > a {
border: 1px solid #ddd;
.border-radius(0);
}
.tabtree > ul > li.first > a {
.border-top-radius(4px);
}
.tabtree > ul > li.last > a,
.tabtree > ul > li.last > a:hover {
border: 1px solid #ddd;
.border-bottom-radius(4px);
}
.tabtree > ul > li > a:hover,
.tabtree > ul > li > a:focus {
border-color: #ddd;
z-index: 2;
}
.file-picker .fp-repo-items,
.file-picker .fp-repo-area {
position: relative;
display: block;
width: auto;
top: 0;
bottom: 0;
border: none;
margin: 0;
}
.file-picker .fp-content {
width: 100%;
height: 100%;
}
.fp-content-center {
display: block;
vertical-align: top;
}
.fp-upload-form td.mdl-right,
.fp-upload-form td.mdl-left,
.fp-login-form .input,
.file-picker .fp-login-form .fp-login-input label,
.file-picker td.label {
display: block;
text-align: left;
}
.file-picker .fp-login-form table,
.file-picker td,
.file-picker td.label,
.file-picker .fp-upload-form table {
margin: 0;
padding: 0;
}
.course-content ul.topics li.section,
.course-content ul.topics li.section .content,
.course-content ul.weeks li.section .content,
.course-content ul.weeks li.section,
.course-content ul.section {
margin-right: 0;
margin-left: 0;
padding: 0;
}
.activityinstance {
display: block;
}
.editing .course-content .section .activity {
margin-bottom: 0.2em;
padding-bottom: 0.2em;
border-bottom: thin solid #eee;
}
.course-content .section .activity .commands {
display: block;
text-align: right;
}
.jsenabled .visibleifjs.addresourcemodchooser {
display: none;
}
.jsenabled .hiddenifjs.addresourcedropdown {
display: block;
.iconhelp {
display: inline-block;
padding: 6px;
vertical-align: top;
}
div.urlselect {
display: block;
form {
margin: 0;
}
}
}
.que .info {
float: none;
width: auto;
}
.que .content {
margin: 0;
}
.path-mod-choice .horizontal .choices .option {
display: block;
}
.path-mod-forum .forumsearch #search {
width: 120px;
}
}
// Stuart's 2,1,3 layout
@media (min-width : 768px) {
.row-fluid .desktop-first-column {
margin-left: 0;
}
}
@media (max-width : 767px) {
.row-fluid .desktop-first-column {
clear: right;
}
}
// Forms
@media (max-width: 767px) {
// Remove the horizontal form styles
.form-item .form-label,
.mform .fitem div.fitemtitle {
// copied from .control-label {
float: none;
width: auto;
padding-top: 0;
text-align: left;
}
.form-item .form-label label{
display: inline-block;
margin-right: .5em;
}
.form-item .form-setting .form-checkbox {
margin-top: 0;
}
.form-label span.form-shortname {
display: inline-block;
}
.form-item .form-setting,
.mform .fitem .felement,
.path-backup .mform .fitem .felement,
.mform .fdescription.required,
.form-item .form-description {
margin-left: 0;
}
table#form td.submit,
.form-buttons,
#fitem_id_submitbutton,
.fp-content-center form + div,
#fgroup_id_buttonar,
.form-horizontal .form-actions,
.fitem_fsubmit .felement.fsubmit {
padding-left: 10px;
padding-right: 10px;
}
#helppopupbox {
width: auto !important;
left: 0 !important;
}
}
// Shrink calender when short on space in block
@media (min-width : 768px) and (max-width: 979px) {
.block_calendar_month .content,
.block .minicalendar td {
padding-left: 0;
padding-right: 0;
}
}
@media (max-width: 979px) {
.nav-collapse {
height: 0;
.nav > li > a {
color: @grayDark;
}
.nav > li > a:hover,
.nav > li > a:focus,
.dropdown-menu a:hover,
.dropdown-menu a:focus,
.dropdown-submenu a:focus,
.dropdown-submenu a:hover,
.dropdown-submenu a:active,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
{
background-image: none;
color: @grayDark;
}
}
.nav-collapse.active {
height: auto;
}
}
@media (max-width: 768px) {
// Resize, reflow file-picker on small devices
#filesskin .yui3-panel,
#filesskin .file-picker.fp-generallayout {
width: 100%;
left: 0;
}
.userprofile dl.list {
// copied from dl-horizontal in bootstrap/repsonsive.less
dt {
float: none;
clear: none;
width: auto;
text-align: left;
}
dd {
margin-left: 0;
}
}
// Hide broken drag'n'drop options on touch devices MDL-38371
// Not a great workaround, landscape iPads are wider than this,
// and a resized window on a netbook could be smaller, but best
// we can do with CSS. There might be a JS-based solution.
.section .side,
.editing_move {
display: none;
}
.activityinstance > a {
display: block;
}
// GRID & CONTAINERS
// -----------------
// Remove width from containers
.container {
width: auto;
}
// Fluid rows
.row-fluid {
width: 100%;
}
.row-fluid .span8.pull-right,
.row-fluid .span9.pull-right {
float: none;
}
// Undo negative margin on rows and thumbnails
.row {
margin-left: 0;
}
// Make all grid-sized elements block level again
[class*="span"],
.row-fluid [class*="span"] {
float: none;
display: block;
width: 100%;
margin-left: 0;
.box-sizing(border-box);
}
.row-fluid .span12 {
width: 100%;
.box-sizing(border-box);
}
.row-fluid [class*="offset"]:first-child {
margin-left: 0;
}
div[role=main] {
margin-bottom: 2em;
}
}

View File

@ -0,0 +1,6 @@
table.flexible,
.generaltable {
.table;
}
// fancier table styles moved to expendable.less
// to shift after 4096 selector break

View File

@ -0,0 +1,65 @@
/* tabs.less */
// This is an opinionated file. It intentionally doesn't add code if it's
// only purpose is to support some of the wackier features of the
// Moodle tabs API i.e. having the current tab name also be a link,
// having multiple selected tabs at the same time, or having disabled tabs.
// There's some code in core that suggests these features are used, but some manual
// testing suggests they aren't. Some bugs to follow on those issues.
.tabtree {
margin: 1em 0;
}
.tabtree ul {
border-left: 0;
border-right: 0;
border-bottom: 1px solid #ddd;
border-top: 0;
padding: 0;
margin: 0;
}
.tabtree:after,
.tabtree:before,
.tabtree ul:before,
.tabtree ul:after {
display: table;
content: "";
}
.tabtree:after,
.tabtree ul:after {
clear: both;
}
.tabtree li {
display: block;
float: left;
margin-bottom: -1px;
}
.tabtree a {
display: block;
padding-right: 12px;
padding-left: 12px;
margin-right: 2px;
padding-top: 8px;
padding-bottom: 8px;
text-decoration: none;
line-height: @baseLineHeight;
border: 1px solid transparent;
.border-radius(4px 4px 0 0);
&:hover,
&:focus {
border-color: @grayLighter @grayLighter #ddd;
background-color: @grayLighter;
text-decoration: none;
}
}
.tabtree .here > a,
.tabtree .here > a:hover,
.tabtree .here > a:focus {
color: @gray;
background-color: @bodyBackground;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
.tabtree .here .empty { // empty second level
display: none;
}

View File

@ -0,0 +1,187 @@
/* some very targetted corrections to roll back nameclashes between
* Moodle and Bootstrap like .row, .label, .content, .controls
*
* Mostly relies on these styles being more specific than the Bootstrap
* ones in order to overule them.
*/
// .label vs .label
li.activity.label,
.file-picker td.label {
background: inherit;
color: inherit;
border: inherit;
text-shadow: none;
padding: 8px;
white-space: normal;
display: block;
font-size: inherit;
line-height: inherit;
}
.file-picker td.label {
display: table-cell;
text-align: right;
}
// Some of this dialog is sized in ems so a different font size
// effects the whole layout.
.choosercontainer #chooseform .option label {
font-size: 12px;
}
/* block.invisible vs .invisible
* block.hidden vs .invisible
*
* uses .invisible where the rest of Moodle uses .dimmed
* fixible in block renderer?
*
* There's seems to be even more naming confusion here since,
* blocks can be actually 'visible' (or not) to students,
* marked 'visible' but really just dimmed to indicate to editors
* that students can't see them or 'visible' to the user who
* collapses them, 'visible' if you have the right role and in
* different circumstances different sections of a block can
* be 'visible' or not.
*
* currently worked around in renderers.php function block{}
* by rewriting the class name "invisible" to "dimmed",
* though the blocks don't look particularly different apart
* from their contents disappearing. Maybe try .muted? or
* dimming all the edit icons apart from unhide, might be a
* nice effect, though they'd still be active. Maybe reverse
* it to white?
*/
li.section.hidden,
.block.hidden,
.block.invisible {
visibility: visible;
display: block;
}
/* .row vs .row
*
* very tricky to track down this when it goes wrong,
* since the styles are applied to generated content
*
* basically if you see things shifted left or right compared
* with where they should be check for a .row
*/
#turnitintool_style .row,
.forumpost .row {
margin-left: 0 !important;
// not sure if this needs !important
}
#turnitintool_style .row:before,
#turnitintool_style .row:after,
.forumpost .row:before,
.forumpost .row:after {
content: none;
}
/* fieldset.hidden vs .hidden
*
* Moodle uses fieldset.hidden for mforms, to signify a collection of
* form elements that don't have a box drawn round them. Bootstrap
* uses hidden for stuff that is hidden in various responsive modes.
*
* Relatedly, there is also fieldset.invisiblefieldset which hides the
* border and sets the display to inline.
*
* Originally this just set block and visible, but it is used
* in random question dialogue in Quiz,
* that dialogue is hidden and shown, so when hidden the
* above workaround leaves you with a button floating around
*/
fieldset.hidden {
display: inherit;
visibility: inherit;
}
/* .controls vs .controls
*
* in expanding course list, can be fixed in renderer though
*/
/* .btn vs .btn
*
* links, inputs and buttons are commonly styled with .btn in
* bootstrap but it seems that some buttons in Moodle are
* wrapped in div.btn e.g. the login block's "login" button
*/
div.c1.btn {
display: block;
padding: 0;
margin-bottom: 0;
font-size: inherit;
line-height: inherit;
text-align: inherit;
vertical-align: inherit;
cursor: default;
color: inherit;
text-shadow: inherit;
background-color: inherit;
background-image: none;
background-repeat: none;
border: none;
border-radius: none;
box-shadow: none;
}
/* .container vs .container
*
* bootstrap uses .container to set the width of the layout at 960px or so, Moodle uses it
* in the Quiz to contain the questions to add. If you don't overule the Bootstrap code,
* it becomes near unuseable.
*/
#questionbank + .container {
width: auto;
}
// In Moodle .hide is the eye icon
// In Bootstrap it hides things
img.hide {
display: inherit;
}
// Bootstrap adds a background sprite to anything with classname starting "icon-".
// we only want to load it if we use them in content.
.icon-bar,
img.icon-post,
img.icon-info,
img.icon-warn,
img.icon-pre {
background-image: none;
}
// Homepage course listing fix
.coursebox .summary {
margin-left: 0px;
}
// Weird big margins on login page
.loginbox.twocolumns,
.loginbox.twocolumns {
.signuppanel,
.loginpanel {
padding: 0px;
margin: 0px;
}
}
//Use nice Bootstrap alert boxes for login errors
.loginerrors .error {
.alert;
.alert-error;
}
//Bootstrap needs tooltips to be specified. Moodle does not use this
.tooltip {
.opacity(100);
display: inline;
}

View File

@ -0,0 +1,172 @@
/* user.less */
.userprofile .fullprofilelink {
text-align: center;
margin: 10px;
}
.userprofile .description {
margin-bottom: 20px;
}
.userprofile dl.list {
.dl-horizontal;
}
.user-box {
margin: 8px;
width: 115px;
height: 160px;
text-align: center;
float: left;
clear: none;
}
.userlist .main .action-icon img {
vertical-align: middle;
}
.userlist #showall {
margin: 10px 0;
}
.userlist .buttons {
text-align: center;
}
.userlist .buttons label {
padding: 0 3px;
}
.userlist table#participants {
text-align: center;
}
.userlist table#participants td,
.userlist table#participants th {
vertical-align: middle;
text-align: left;
padding: 4px;
}
.userlist table.controls {
width: 100%;
}
.userlist table.controls tr {
vertical-align: top;
}
.userlist table.controls td.right,
.userlist table.controls td.left {
padding: 4px;
}
.userlist table.controls .right {
text-align: right;
}
.userinfobox {
width: 100%;
border: 1px solid;
border-collapse: separate;
padding: 10px;
}
.userinfobox .left,
.userinfobox .side {
width: 100px;
vertical-align: top;
}
.userinfobox .userpicture {
width: 100px;
height: 100px;
}
.userinfobox .content {
vertical-align: top;
}
.userinfobox .links {
width: 100px;
padding: 5px;
vertical-align: bottom;
}
.userinfobox .links a {
display: block;
}
.userinfobox .list td {
padding: 3px;
}
.userinfobox .username {
padding-bottom: 20px;
font-weight: bold;
}
.userinfobox td.label {
text-align: right;
white-space: nowrap;
vertical-align: top;
font-weight: bold;
}
.groupinfobox {
border: 1px solid;
}
.groupinfobox .left {
padding: 10px;
width: 100px;
vertical-align: top;
}
.course-participation #showall {
text-align: center;
margin: 10px 0;
}
#user-policy .noticebox {
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
width: 80%;
height: 250px;
}
#user-policy #policyframe {
width: 100%;
height: 100%;
}
.iplookup #map {
margin: auto;
}
.userselector select {
width: 100%;
}
.userselector div {
margin-top: 0.2em;
}
.userselector div label {
margin-right: 0.3em;
}
/* Next style does not work in all browsers but looks nicer when it does */
.userselector .userselector-infobelow {
font-size: 0.8em;
}
#userselector_options {
padding: 0.3em 0;
}
#userselector_options .collapsibleregioncaption {
font-weight: bold;
}
#userselector_options p {
margin: 0.2em 0;
text-align: left;
}
.dir-rtl #userselector_options p {
text-align: right;
}
/** user full profile */
#page-user-profile .messagebox {
text-align: center;
margin-left: auto;
margin-right: auto;
}
/** user course profile */
#page-course-view-weeks .messagebox {
text-align: center;
margin-left: auto;
margin-right: auto;
}
/** Overide for RTL layout **/
.dir-rtl .descriptionbox {
margin-right: 110px;
margin-left: 0;
}
.dir-rtl .userlist table#participants td,
.dir-rtl .userlist table#participants th {
text-align: right;
}
.dir-rtl .userlist table#participants {
margin: 0 auto;
}
#page-my-index.dir-rtl .block h3.main {
text-align: right;
}

View File

@ -0,0 +1,10 @@
// we might be able to just turn these off for 2.5 see bug MDL-????
input[type=text],input[type=password],textarea {
width:auto;
}
th,
td {
border: 0 solid #fff;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 592 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 499 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 879 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 89 KiB

Some files were not shown because too many files have changed in this diff Show More