Commit a448f74d by Thomas Lottermann

Merge remote-tracking branch 'upstream/master'

Update
parents 7b40385d 39ecbdfc
...@@ -35,7 +35,7 @@ WEEKLY = 7 * (24 - 1) * 60 ...@@ -35,7 +35,7 @@ WEEKLY = 7 * (24 - 1) * 60
# List of intervals available. In minutes # List of intervals available. In minutes
INTERVALS = getattr(django_settings, 'NOTIFY_INTERVALS', INTERVALS = getattr(django_settings, 'NOTIFY_INTERVALS',
[(INSTANTLY, _(u'instant')), [(INSTANTLY, _(u'instantly')),
(DAILY, _(u'daily')), (DAILY, _(u'daily')),
(WEEKLY, _(u'weekly'))] (WEEKLY, _(u'weekly'))]
) )
......
...@@ -250,6 +250,8 @@ class CreateForm(forms.Form, SpamProtectionMixin): ...@@ -250,6 +250,8 @@ class CreateForm(forms.Form, SpamProtectionMixin):
slug = self.cleaned_data['slug'] slug = self.cleaned_data['slug']
if slug.startswith("_"): if slug.startswith("_"):
raise forms.ValidationError(_(u'A slug may not begin with an underscore.')) raise forms.ValidationError(_(u'A slug may not begin with an underscore.'))
if slug == 'admin':
raise forms.ValidationError(_(u"'admin' is not a permitted slug name."))
if settings.URL_CASE_SENSITIVE: if settings.URL_CASE_SENSITIVE:
already_existing_slug = models.URLPath.objects.filter(slug=slug, parent=self.urlpath_parent) already_existing_slug = models.URLPath.objects.filter(slug=slug, parent=self.urlpath_parent)
......
...@@ -13,6 +13,7 @@ from wiki.core import article_markdown, permissions ...@@ -13,6 +13,7 @@ from wiki.core import article_markdown, permissions
from wiki.core import compat from wiki.core import compat
from wiki import managers from wiki import managers
from mptt.models import MPTTModel from mptt.models import MPTTModel
from django.core.urlresolvers import reverse
class Article(models.Model): class Article(models.Model):
...@@ -174,6 +175,14 @@ class Article(models.Model): ...@@ -174,6 +175,14 @@ class Article(models.Model):
def clear_cache(self): def clear_cache(self):
cache.delete(self.get_cache_key()) cache.delete(self.get_cache_key())
def get_absolute_url(self):
urlpaths = self.urlpath_set.all()
if urlpaths.exists():
return urlpaths[0].get_absolute_url()
else:
return reverse('wiki:get', kwargs={'article_id': self.id})
class ArticleForObject(models.Model): class ArticleForObject(models.Model):
objects = managers.ArticleFkManager() objects = managers.ArticleFkManager()
......
from django import forms from django import forms
from django.forms.models import modelformset_factory, BaseModelFormSet
from django.utils.translation import ugettext as _ from django.utils.translation import ugettext as _
from django_notify.models import Settings, NotificationType from django_notify.models import Settings, NotificationType
from django_notify import settings as notify_settings
from django.contrib.contenttypes.models import ContentType from django.contrib.contenttypes.models import ContentType
from django.utils.safestring import mark_safe from django.utils.safestring import mark_safe
from wiki.plugins.notifications.settings import ARTICLE_EDIT from wiki.plugins.notifications.settings import ARTICLE_EDIT
from wiki.core.plugins.base import PluginSettingsFormMixin from wiki.core.plugins.base import PluginSettingsFormMixin
class SettingsModelChoiceField(forms.ModelChoiceField):
def label_from_instance(self, obj):
return _(u"Receive notifications %(interval)s" % {
'interval': obj.get_interval_display()
}
)
class ArticleSubscriptionModelMultipleChoiceField(forms.ModelMultipleChoiceField):
def label_from_instance(self, obj):
return _(u"%(title)s - %(url)s" % {
'title': obj.article.current_revision.title,
'url': obj.article.get_absolute_url()
}
)
class SettingsModelForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
super(SettingsModelForm, self).__init__(*args, **kwargs)
import models
instance = kwargs.get('instance', None)
self.__editing_instance = False
if instance:
self.__editing_instance = True
self.fields['delete_subscriptions'] = ArticleSubscriptionModelMultipleChoiceField(
models.ArticleSubscription.objects.filter(settings=instance),
label=_(u"Remove subscriptions"),
required=False,
help_text=_(u"Select article subscriptions to remove from notifications"),
)
self.fields['email'] = forms.TypedChoiceField(
label=_(u"Email digests"),
choices = (
(0, _(u'Unchanged (selected on each article)')),
(1, _(u'No emails')),
(2, _(u'Email on any change')),
),
coerce=lambda x: int(x) if not x is None else None,
widget=forms.RadioSelect(),
required=False,
initial=0,
)
def save(self, *args, **kwargs):
instance = super(SettingsModelForm, self).save(*args, **kwargs)
if self.__editing_instance:
self.cleaned_data['delete_subscriptions'].delete()
if self.cleaned_data['email'] == 1:
instance.subscription_set.all().update(
send_emails=False,
)
if self.cleaned_data['email'] == 2:
instance.subscription_set.all().update(
send_emails=True,
)
return instance
class BaseSettingsFormSet(BaseModelFormSet):
def __init__(self, *args, **kwargs):
self.user = kwargs.pop('user')
super(BaseSettingsFormSet, self).__init__(*args, **kwargs)
def get_queryset(self):
return Settings.objects.filter(
user=self.user,
subscription__articlesubscription__article__current_revision__deleted=False,
).prefetch_related('subscription_set__articlesubscription',)
SettingsFormSet = modelformset_factory(
Settings,
form=SettingsModelForm,
formset=BaseSettingsFormSet,
extra=0,
fields=('interval', ),
)
class SubscriptionForm(PluginSettingsFormMixin, forms.Form): class SubscriptionForm(PluginSettingsFormMixin, forms.Form):
settings_form_headline = _(u'Notifications') settings_form_headline = _(u'Notifications')
settings_order = 1 settings_order = 1
settings_write_access = False settings_write_access = False
settings = SettingsModelChoiceField(
Settings,
empty_label=None,
)
edit = forms.BooleanField( edit = forms.BooleanField(
required=False, required=False,
label=_(u'When this article is edited') label=_(u'When this article is edited')
...@@ -34,23 +119,31 @@ class SubscriptionForm(PluginSettingsFormMixin, forms.Form): ...@@ -34,23 +119,31 @@ class SubscriptionForm(PluginSettingsFormMixin, forms.Form):
self.article = article self.article = article
self.user = request.user self.user = request.user
initial = kwargs.pop('initial', None) initial = kwargs.pop('initial', None)
self.settings = Settings.objects.get_or_create(user=request.user,)[0]
self.notification_type = NotificationType.objects.get_or_create( self.notification_type = NotificationType.objects.get_or_create(
key=ARTICLE_EDIT, key=ARTICLE_EDIT,
content_type=ContentType.objects.get_for_model(article) content_type=ContentType.objects.get_for_model(article)
)[0] )[0]
self.edit_notifications = models.ArticleSubscription.objects.filter( self.edit_notifications = models.ArticleSubscription.objects.filter(
settings=self.settings,
article=article, article=article,
notification_type=self.notification_type notification_type=self.notification_type
) )
self.default_settings = Settings.objects.get_or_create(
user=request.user,
interval=notify_settings.INTERVALS_DEFAULT
)[0]
if self.edit_notifications:
self.default_settings = self.edit_notifications[0].settings
if not initial: if not initial:
initial = { initial = {
'edit': bool(self.edit_notifications), 'edit': bool(self.edit_notifications),
'edit_email': bool(self.edit_notifications.filter(send_emails=True)) 'edit_email': bool(self.edit_notifications.filter(send_emails=True)),
'settings': self.default_settings,
} }
kwargs['initial'] = initial kwargs['initial'] = initial
super(SubscriptionForm, self).__init__(*args, **kwargs) super(SubscriptionForm, self).__init__(*args, **kwargs)
self.fields['settings'].queryset = Settings.objects.filter(
user=request.user,
)
def get_usermessage(self): def get_usermessage(self):
if self.changed_data: if self.changed_data:
...@@ -68,10 +161,11 @@ class SubscriptionForm(PluginSettingsFormMixin, forms.Form): ...@@ -68,10 +161,11 @@ class SubscriptionForm(PluginSettingsFormMixin, forms.Form):
return return
if cd['edit']: if cd['edit']:
edit_notification = models.ArticleSubscription.objects.get_or_create( edit_notification = models.ArticleSubscription.objects.get_or_create(
settings=self.settings,
article=self.article, article=self.article,
notification_type=self.notification_type notification_type=self.notification_type,
settings=cd['settings'],
)[0] )[0]
edit_notification.settings = cd['settings']
edit_notification.send_emails = cd['edit_email'] edit_notification.send_emails = cd['edit_email']
edit_notification.save() edit_notification.save()
else: else:
......
...@@ -18,10 +18,12 @@ function notify_update() { ...@@ -18,10 +18,12 @@ function notify_update() {
notify_latest_id = n.pk>notify_latest_id ? n.pk:notify_latest_id; notify_latest_id = n.pk>notify_latest_id ? n.pk:notify_latest_id;
notify_oldest_id = (n.pk<notify_oldest_id || notify_oldest_id==0) ? n.pk:notify_oldest_id; notify_oldest_id = (n.pk<notify_oldest_id || notify_oldest_id==0) ? n.pk:notify_oldest_id;
if (n.occurrences > 1) { if (n.occurrences > 1) {
$('.notification-li-container').prepend($('<li><a href="'+URL_NOTIFY_GOTO+n.pk+'/"><div>'+n.message+'</div><div class="since">'+n.occurrences_msg+' - ' + n.since + '</div></a></li>')); element = $('<li><a href="'+URL_NOTIFY_GOTO+n.pk+'/"><div>'+n.message+'</div><div class="since">'+n.occurrences_msg+' - ' + n.since + '</div></a></li>')
} else { } else {
$('.notification-li-container').prepend($('<li><a href="'+URL_NOTIFY_GOTO+n.pk+'/"><div>'+n.message+'</div><div class="since">'+n.since+'</div></a></li>')); element = $('<li><a href="'+URL_NOTIFY_GOTO+n.pk+'/"><div>'+n.message+'</div><div class="since">'+n.since+'</div></a></li>');
} }
element.addClass('notification-li');
element.insertAfter('.notification-before-list');
} }
} }
}); });
......
{% comment %} {% load i18n sekizai_tags %}{% load url from future %}
<li class="dropdown"> <li class="divider notification-before-list"></li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <li class="notifications-empty"><a href="#"><em>{% trans "No notifications" %}</em></a></li>
<span class="badge notification-cnt">0</span> <li class="divider"></li>
{% trans "notifications" %} <li>
<b class="caret"></b> <a href="#" onclick="notify_mark_read()">
<i class="icon-check"></i>
{% trans "Clear notifications list" %}
</a>
</li>
<li>
<a href="{% url 'wiki:notification_settings' %}">
<i class="icon-wrench"></i>
{% trans "Notification settings" %}
</a> </a>
<ul class="dropdown-menu notification-list">
<div class="notification-li-container"></div>
<li class="notifications-empty"><a href="#"><em>{% trans "No notifications" %}</em></a></li>
<li class="divider"></li>
<li><a href="#" onclick="notify_mark_read()">{% trans "Clear notifications list" %}</a></li>
</ul>
</li> </li>
{% endcomment %}
{% load i18n sekizai_tags %}{% load url from future %}
{% addtoblock "js" %} {% addtoblock "js" %}
<script type="text/javascript"> <script type="text/javascript">
URL_NOTIFY_GET_NEW = "{% url "notify:json_get" %}"; URL_NOTIFY_GET_NEW = "{% url "notify:json_get" %}";
URL_NOTIFY_MARK_READ = "{% url "notify:json_mark_read_base" %}"; URL_NOTIFY_MARK_READ = "{% url "notify:json_mark_read_base" %}";
URL_NOTIFY_GOTO = "{% url "notify:goto_base" %}"; URL_NOTIFY_GOTO = "{% url "notify:goto_base" %}";
</script> </script>
<script type="text/javascript" src="{{ STATIC_URL }}wiki/plugins/notifications/js/ui.js"></script>
{% endaddtoblock %} {% endaddtoblock %}
{% addtoblock "js" %}<script type="text/javascript" src="{{ STATIC_URL }}wiki/plugins/notifications/js/ui.js"></script>{% endaddtoblock %}
{% extends "wiki/base.html" %}
{% load wiki_tags i18n humanize %}
{% load url from future %}
{% block wiki_pagetitle %}{% trans "Notifications" %}: {{ article.current_revision.title }}{% endblock %}
{% block wiki_contents %}
<h1>{% trans "Your notification settings" %}</h1>
<p class="lead">
{% trans "Manage how often you receive notifications" %}
</p>
<form method="POST" class="form-horizontal">
{% include "wiki/includes/formerrors.html" with form=formset.management_form %}
{% csrf_token %}
{{ formset.management_form }}
{% for form in formset %}
<fieldset>
<legend>{% trans "Settings for" %} {{ form.instance.articlesubscriptions.count }} {% trans "articles" %}</legend>
{% include "wiki/includes/formerrors.html" with form=form %}
{% for field in form %}
{% include "wiki/includes/formfield.html" %}
{% endfor %}
</fieldset>
{% empty %}
<em>{% trans "You are not subscribed to any notifications yet." %}</em>
{% endfor %}
{% if formset.forms %}
<div class="form-actions">
<button type="submit" class="btn btn-primary">
<span class="icon-ok"></span>
{% trans "Save changes" %}
</button>
</div>
{% endif %}
</form>
<div class="row-fluid">
</div>
{% endblock %}
# Create your views here. # Create your views here.
from django.contrib import messages
from django.contrib.auth.decorators import login_required from django.contrib.auth.decorators import login_required
from django.shortcuts import redirect
from django.utils.decorators import method_decorator from django.utils.decorators import method_decorator
from django.views.generic.list import ListView from django.utils.translation import ugettext as _
from django.views.generic.edit import FormView
from django_notify import models import forms
class NotificationSettings(ListView): class NotificationSettings(FormView):
template_name = 'wiki/plugins/notifications/settings.html' template_name = 'wiki/plugins/notifications/settings.html'
allow_empty = True form_class = forms.SettingsFormSet
context_object_name = 'settings'
paginate_by = 10
@method_decorator(login_required) @method_decorator(login_required)
def dispatch(self, request, *args, **kwargs): def dispatch(self, request, *args, **kwargs):
return super(NotificationSettings, self).dispatch(request, *args, **kwargs) return super(NotificationSettings, self).dispatch(request, *args, **kwargs)
def get_queryset(self): def form_valid(self, formset):
settings = models.Settings.objects.filter(user=self.request.user) for form in formset:
return settings settings = form.save()
import models
article_subscriptions = models.ArticleSubscription.objects.filter(
settings = form.instance,
article__current_revision__deleted=False,
).select_related('article', 'article__current_revision')
messages.info(
self.request,
_(u"You will receive notifications %(interval)s for "
"%(articles)d articles") %
{
'interval': settings.get_interval_display(),
'articles': article_subscriptions.count(),
}
)
return redirect('wiki:notification_settings')
def get_form_kwargs(self):
kwargs = FormView.get_form_kwargs(self)
kwargs['user'] = self.request.user
return kwargs
def get_context_data(self, **kwargs):
context = FormView.get_context_data(self, **kwargs)
context['formset'] = kwargs['form']
import models
for form in context['formset']:
if form.instance:
setattr(form.instance, 'articlesubscriptions',
models.ArticleSubscription.objects.filter(
settings = form.instance,
article__current_revision__deleted=False,
).select_related('article', 'article__current_revision')
)
return context
\ No newline at end of file
//
// 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;
}
//
// 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;
}
$(function () {
module("bootstrap-affix")
test("should provide no conflict", function () {
var affix = $.fn.affix.noConflict()
ok(!$.fn.affix, 'affix was set back to undefined (org value)')
$.fn.affix = affix
})
test("should be defined on jquery object", function () {
ok($(document.body).affix, 'affix method is defined')
})
test("should return element", function () {
ok($(document.body).affix()[0] == document.body, 'document.body returned')
})
test("should exit early if element is not visible", function () {
var $affix = $('<div style="display: none"></div>').affix()
$affix.data('affix').checkPosition()
ok(!$affix.hasClass('affix'), 'affix class was not added')
})
})
\ No newline at end of file
$(function () {
module("bootstrap-alerts")
test("should provide no conflict", function () {
var alert = $.fn.alert.noConflict()
ok(!$.fn.alert, 'alert was set back to undefined (org value)')
$.fn.alert = alert
})
test("should be defined on jquery object", function () {
ok($(document.body).alert, 'alert method is defined')
})
test("should return element", function () {
ok($(document.body).alert()[0] == document.body, 'document.body returned')
})
test("should fade element out on clicking .close", function () {
var alertHTML = '<div class="alert-message warning fade in">'
+ '<a class="close" href="#" data-dismiss="alert">×</a>'
+ '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>'
+ '</div>'
, alert = $(alertHTML).alert()
alert.find('.close').click()
ok(!alert.hasClass('in'), 'remove .in class on .close click')
})
test("should remove element when clicking .close", function () {
$.support.transition = false
var alertHTML = '<div class="alert-message warning fade in">'
+ '<a class="close" href="#" data-dismiss="alert">×</a>'
+ '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>'
+ '</div>'
, alert = $(alertHTML).appendTo('#qunit-fixture').alert()
ok($('#qunit-fixture').find('.alert-message').length, 'element added to dom')
alert.find('.close').click()
ok(!$('#qunit-fixture').find('.alert-message').length, 'element removed from dom')
})
test("should not fire closed when close is prevented", function () {
$.support.transition = false
stop();
$('<div class="alert"/>')
.bind('close', function (e) {
e.preventDefault();
ok(true);
start();
})
.bind('closed', function () {
ok(false);
})
.alert('close')
})
})
\ No newline at end of file
$(function () {
module("bootstrap-buttons")
test("should provide no conflict", function () {
var button = $.fn.button.noConflict()
ok(!$.fn.button, 'button was set back to undefined (org value)')
$.fn.button = button
})
test("should be defined on jquery object", function () {
ok($(document.body).button, 'button method is defined')
})
test("should return element", function () {
ok($(document.body).button()[0] == document.body, 'document.body returned')
})
test("should return set state to loading", function () {
var btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
equals(btn.html(), 'mdo', 'btn text equals mdo')
btn.button('loading')
equals(btn.html(), 'fat', 'btn text equals fat')
stop()
setTimeout(function () {
ok(btn.attr('disabled'), 'btn is disabled')
ok(btn.hasClass('disabled'), 'btn has disabled class')
start()
}, 0)
})
test("should return reset state", function () {
var btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
equals(btn.html(), 'mdo', 'btn text equals mdo')
btn.button('loading')
equals(btn.html(), 'fat', 'btn text equals fat')
stop()
setTimeout(function () {
ok(btn.attr('disabled'), 'btn is disabled')
ok(btn.hasClass('disabled'), 'btn has disabled class')
start()
stop()
}, 0)
btn.button('reset')
equals(btn.html(), 'mdo', 'btn text equals mdo')
setTimeout(function () {
ok(!btn.attr('disabled'), 'btn is not disabled')
ok(!btn.hasClass('disabled'), 'btn does not have disabled class')
start()
}, 0)
})
test("should toggle active", function () {
var btn = $('<button class="btn">mdo</button>')
ok(!btn.hasClass('active'), 'btn does not have active class')
btn.button('toggle')
ok(btn.hasClass('active'), 'btn has class active')
})
test("should toggle active when btn children are clicked", function () {
var btn = $('<button class="btn" data-toggle="button">mdo</button>')
, inner = $('<i></i>')
btn
.append(inner)
.appendTo($('#qunit-fixture'))
ok(!btn.hasClass('active'), 'btn does not have active class')
inner.click()
ok(btn.hasClass('active'), 'btn has class active')
})
test("should toggle active when btn children are clicked within btn-group", function () {
var btngroup = $('<div class="btn-group" data-toggle="buttons-checkbox"></div>')
, btn = $('<button class="btn">fat</button>')
, inner = $('<i></i>')
btngroup
.append(btn.append(inner))
.appendTo($('#qunit-fixture'))
ok(!btn.hasClass('active'), 'btn does not have active class')
inner.click()
ok(btn.hasClass('active'), 'btn has class active')
})
test("should check for closest matching toggle", function () {
var group = $("<div data-toggle='buttons-radio'></div>")
, btn1 = $("<button class='btn active'></button>")
, btn2 = $("<button class='btn'></button>")
, wrap = $("<div></div>")
wrap.append(btn1, btn2)
group
.append(wrap)
.appendTo($('#qunit-fixture'))
ok(btn1.hasClass('active'), 'btn1 has active class')
ok(!btn2.hasClass('active'), 'btn2 does not have active class')
btn2.click()
ok(!btn1.hasClass('active'), 'btn1 does not have active class')
ok(btn2.hasClass('active'), 'btn2 has active class')
})
})
\ No newline at end of file
$(function () {
module("bootstrap-carousel")
test("should provide no conflict", function () {
var carousel = $.fn.carousel.noConflict()
ok(!$.fn.carousel, 'carousel was set back to undefined (org value)')
$.fn.carousel = carousel
})
test("should be defined on jquery object", function () {
ok($(document.body).carousel, 'carousel method is defined')
})
test("should return element", function () {
ok($(document.body).carousel()[0] == document.body, 'document.body returned')
})
test("should not fire sliden when slide is prevented", function () {
$.support.transition = false
stop()
$('<div class="carousel"/>')
.bind('slide', function (e) {
e.preventDefault();
ok(true);
start();
})
.bind('slid', function () {
ok(false);
})
.carousel('next')
})
test("should fire slide event with direction", function () {
var template = '<div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class="item active"><img alt=""><div class="carousel-caption"><h4>{{_i}}First Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Second Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Third Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div></div><a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a><a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a></div>'
$.support.transition = false
stop()
$(template).on('slide', function (e) {
e.preventDefault()
ok(e.direction)
ok(e.direction === 'right' || e.direction === 'left')
start()
}).carousel('next')
})
test("should fire slide event with relatedTarget", function () {
var template = '<div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class="item active"><img alt=""><div class="carousel-caption"><h4>{{_i}}First Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Second Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Third Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div></div><a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a><a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a></div>'
$.support.transition = false
stop()
$(template)
.on('slide', function (e) {
e.preventDefault();
ok(e.relatedTarget);
ok($(e.relatedTarget).hasClass('item'));
start();
})
.carousel('next')
})
test("should set interval from data attribute", 3,function () {
var template = $('<div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <img alt=""> <div class="carousel-caption"> <h4>{{_i}}First Thumbnail label{{/i}}</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> <div class="item"> <img alt=""> <div class="carousel-caption"> <h4>{{_i}}Second Thumbnail label{{/i}}</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> <div class="item"> <img alt=""> <div class="carousel-caption"> <h4>{{_i}}Third Thumbnail label{{/i}}</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a> </div>');
template.attr("data-interval", 1814);
template.appendTo("body");
$('[data-slide]').first().click();
ok($('#myCarousel').data('carousel').options.interval == 1814);
$('#myCarousel').remove();
template.appendTo("body").attr("data-modal", "foobar");
$('[data-slide]').first().click();
ok($('#myCarousel').data('carousel').options.interval == 1814, "even if there is an data-modal attribute set");
$('#myCarousel').remove();
template.appendTo("body");
$('[data-slide]').first().click();
$('#myCarousel').attr('data-interval', 1860);
$('[data-slide]').first().click();
ok($('#myCarousel').data('carousel').options.interval == 1814, "attributes should be read only on intitialization");
$('#myCarousel').remove();
})
})
\ No newline at end of file
$(function () {
module("bootstrap-collapse")
test("should provide no conflict", function () {
var collapse = $.fn.collapse.noConflict()
ok(!$.fn.collapse, 'collapse was set back to undefined (org value)')
$.fn.collapse = collapse
})
test("should be defined on jquery object", function () {
ok($(document.body).collapse, 'collapse method is defined')
})
test("should return element", function () {
ok($(document.body).collapse()[0] == document.body, 'document.body returned')
})
test("should show a collapsed element", function () {
var el = $('<div class="collapse"></div>').collapse('show')
ok(el.hasClass('in'), 'has class in')
ok(/height/.test(el.attr('style')), 'has height set')
})
test("should hide a collapsed element", function () {
var el = $('<div class="collapse"></div>').collapse('hide')
ok(!el.hasClass('in'), 'does not have class in')
ok(/height/.test(el.attr('style')), 'has height set')
})
test("should not fire shown when show is prevented", function () {
$.support.transition = false
stop()
$('<div class="collapse"/>')
.bind('show', function (e) {
e.preventDefault();
ok(true);
start();
})
.bind('shown', function () {
ok(false);
})
.collapse('show')
})
test("should reset style to auto after finishing opening collapse", function () {
$.support.transition = false
stop()
$('<div class="collapse" style="height: 0px"/>')
.bind('show', function () {
ok(this.style.height == '0px')
})
.bind('shown', function () {
ok(this.style.height == 'auto')
start()
})
.collapse('show')
})
test("should add active class to target when collapse shown", function () {
$.support.transition = false
stop()
var target = $('<a data-toggle="collapse" href="#test1"></a>')
.appendTo($('#qunit-fixture'))
var collapsible = $('<div id="test1"></div>')
.appendTo($('#qunit-fixture'))
.on('show', function () {
ok(!target.hasClass('collapsed'))
start()
})
target.click()
})
test("should remove active class to target when collapse hidden", function () {
$.support.transition = false
stop()
var target = $('<a data-toggle="collapse" href="#test1"></a>')
.appendTo($('#qunit-fixture'))
var collapsible = $('<div id="test1" class="in"></div>')
.appendTo($('#qunit-fixture'))
.on('hide', function () {
ok(target.hasClass('collapsed'))
start()
})
target.click()
})
})
\ No newline at end of file
$(function () {
module("bootstrap-dropdowns")
test("should provide no conflict", function () {
var dropdown = $.fn.dropdown.noConflict()
ok(!$.fn.dropdown, 'dropdown was set back to undefined (org value)')
$.fn.dropdown = dropdown
})
test("should be defined on jquery object", function () {
ok($(document.body).dropdown, 'dropdown method is defined')
})
test("should return element", function () {
var el = $("<div />")
ok(el.dropdown()[0] === el[0], 'same element returned')
})
test("should not open dropdown if target is disabled", function () {
var dropdownHTML = '<ul class="tabs">'
+ '<li class="dropdown">'
+ '<button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>'
+ '<ul class="dropdown-menu">'
+ '<li><a href="#">Secondary link</a></li>'
+ '<li><a href="#">Something else here</a></li>'
+ '<li class="divider"></li>'
+ '<li><a href="#">Another link</a></li>'
+ '</ul>'
+ '</li>'
+ '</ul>'
, dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().click()
ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
})
test("should not open dropdown if target is disabled", function () {
var dropdownHTML = '<ul class="tabs">'
+ '<li class="dropdown">'
+ '<button href="#" class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>'
+ '<ul class="dropdown-menu">'
+ '<li><a href="#">Secondary link</a></li>'
+ '<li><a href="#">Something else here</a></li>'
+ '<li class="divider"></li>'
+ '<li><a href="#">Another link</a></li>'
+ '</ul>'
+ '</li>'
+ '</ul>'
, dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().click()
ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
})
test("should add class open to menu if clicked", function () {
var dropdownHTML = '<ul class="tabs">'
+ '<li class="dropdown">'
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
+ '<ul class="dropdown-menu">'
+ '<li><a href="#">Secondary link</a></li>'
+ '<li><a href="#">Something else here</a></li>'
+ '<li class="divider"></li>'
+ '<li><a href="#">Another link</a></li>'
+ '</ul>'
+ '</li>'
+ '</ul>'
, dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().click()
ok(dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
})
test("should test if element has a # before assuming it's a selector", function () {
var dropdownHTML = '<ul class="tabs">'
+ '<li class="dropdown">'
+ '<a href="/foo/" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
+ '<ul class="dropdown-menu">'
+ '<li><a href="#">Secondary link</a></li>'
+ '<li><a href="#">Something else here</a></li>'
+ '<li class="divider"></li>'
+ '<li><a href="#">Another link</a></li>'
+ '</ul>'
+ '</li>'
+ '</ul>'
, dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().click()
ok(dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
})
test("should remove open class if body clicked", function () {
var dropdownHTML = '<ul class="tabs">'
+ '<li class="dropdown">'
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
+ '<ul class="dropdown-menu">'
+ '<li><a href="#">Secondary link</a></li>'
+ '<li><a href="#">Something else here</a></li>'
+ '<li class="divider"></li>'
+ '<li><a href="#">Another link</a></li>'
+ '</ul>'
+ '</li>'
+ '</ul>'
, dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.dropdown()
.click()
ok(dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
$('body').click()
ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class removed')
dropdown.remove()
})
test("should remove open class if body clicked, with multiple drop downs", function () {
var dropdownHTML =
'<ul class="nav">'
+ ' <li><a href="#menu1">Menu 1</a></li>'
+ ' <li class="dropdown" id="testmenu">'
+ ' <a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu <b class="caret"></b></a>'
+ ' <ul class="dropdown-menu" role="menu">'
+ ' <li><a href="#sub1">Submenu 1</a></li>'
+ ' </ul>'
+ ' </li>'
+ '</ul>'
+ '<div class="btn-group">'
+ ' <button class="btn">Actions</button>'
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>'
+ ' <ul class="dropdown-menu">'
+ ' <li><a href="#">Action 1</a></li>'
+ ' </ul>'
+ '</div>'
, dropdowns = $(dropdownHTML).appendTo('#qunit-fixture').find('[data-toggle="dropdown"]')
, first = dropdowns.first()
, last = dropdowns.last()
ok(dropdowns.length == 2, "Should be two dropdowns")
first.click()
ok(first.parents('.open').length == 1, 'open class added on click')
ok($('#qunit-fixture .open').length == 1, 'only one object is open')
$('body').click()
ok($("#qunit-fixture .open").length === 0, 'open class removed')
last.click()
ok(last.parent('.open').length == 1, 'open class added on click')
ok($('#qunit-fixture .open').length == 1, 'only one object is open')
$('body').click()
ok($("#qunit-fixture .open").length === 0, 'open class removed')
$("#qunit-fixture").html("")
})
})
\ No newline at end of file
$(function () {
module("bootstrap-modal")
test("should provide no conflict", function () {
var modal = $.fn.modal.noConflict()
ok(!$.fn.modal, 'modal was set back to undefined (org value)')
$.fn.modal = modal
})
test("should be defined on jquery object", function () {
var div = $("<div id='modal-test'></div>")
ok(div.modal, 'modal method is defined')
})
test("should return element", function () {
var div = $("<div id='modal-test'></div>")
ok(div.modal() == div, 'document.body returned')
$('#modal-test').remove()
})
test("should expose defaults var for settings", function () {
ok($.fn.modal.defaults, 'default object exposed')
})
test("should insert into dom when show method is called", function () {
stop()
$.support.transition = false
$("<div id='modal-test'></div>")
.bind("shown", function () {
ok($('#modal-test').length, 'modal insterted into dom')
$(this).remove()
start()
})
.modal("show")
})
test("should fire show event", function () {
stop()
$.support.transition = false
$("<div id='modal-test'></div>")
.bind("show", function () {
ok(true, "show was called")
})
.bind("shown", function () {
$(this).remove()
start()
})
.modal("show")
})
test("should not fire shown when default prevented", function () {
stop()
$.support.transition = false
$("<div id='modal-test'></div>")
.bind("show", function (e) {
e.preventDefault()
ok(true, "show was called")
start()
})
.bind("shown", function () {
ok(false, "shown was called")
})
.modal("show")
})
test("should hide modal when hide is called", function () {
stop()
$.support.transition = false
$("<div id='modal-test'></div>")
.bind("shown", function () {
ok($('#modal-test').is(":visible"), 'modal visible')
ok($('#modal-test').length, 'modal insterted into dom')
$(this).modal("hide")
})
.bind("hidden", function() {
ok(!$('#modal-test').is(":visible"), 'modal hidden')
$('#modal-test').remove()
start()
})
.modal("show")
})
test("should toggle when toggle is called", function () {
stop()
$.support.transition = false
var div = $("<div id='modal-test'></div>")
div
.bind("shown", function () {
ok($('#modal-test').is(":visible"), 'modal visible')
ok($('#modal-test').length, 'modal insterted into dom')
div.modal("toggle")
})
.bind("hidden", function() {
ok(!$('#modal-test').is(":visible"), 'modal hidden')
div.remove()
start()
})
.modal("toggle")
})
test("should remove from dom when click [data-dismiss=modal]", function () {
stop()
$.support.transition = false
var div = $("<div id='modal-test'><span class='close' data-dismiss='modal'></span></div>")
div
.bind("shown", function () {
ok($('#modal-test').is(":visible"), 'modal visible')
ok($('#modal-test').length, 'modal insterted into dom')
div.find('.close').click()
})
.bind("hidden", function() {
ok(!$('#modal-test').is(":visible"), 'modal hidden')
div.remove()
start()
})
.modal("toggle")
})
test("should allow modal close with 'backdrop:false'", function () {
stop()
$.support.transition = false
var div = $("<div>", { id: 'modal-test', "data-backdrop": false })
div
.bind("shown", function () {
ok($('#modal-test').is(":visible"), 'modal visible')
div.modal("hide")
})
.bind("hidden", function() {
ok(!$('#modal-test').is(":visible"), 'modal hidden')
div.remove()
start()
})
.modal("show")
})
})
\ No newline at end of file
// Logging setup for phantom integration
// adapted from Modernizr
QUnit.begin = function () {
console.log("Starting test suite")
console.log("================================================\n")
}
QUnit.moduleDone = function (opts) {
if (opts.failed === 0) {
console.log("\u2714 All tests passed in '" + opts.name + "' module")
} else {
console.log("\u2716 " + opts.failed + " tests failed in '" + opts.name + "' module")
}
}
QUnit.done = function (opts) {
console.log("\n================================================")
console.log("Tests completed in " + opts.runtime + " milliseconds")
console.log(opts.passed + " tests of " + opts.total + " passed, " + opts.failed + " failed.")
}
\ No newline at end of file
$(function () {
module("bootstrap-popover")
test("should provide no conflict", function () {
var popover = $.fn.popover.noConflict()
ok(!$.fn.popover, 'popover was set back to undefined (org value)')
$.fn.popover = popover
})
test("should be defined on jquery object", function () {
var div = $('<div></div>')
ok(div.popover, 'popover method is defined')
})
test("should return element", function () {
var div = $('<div></div>')
ok(div.popover() == div, 'document.body returned')
})
test("should render popover element", function () {
$.support.transition = false
var popover = $('<a href="#" title="mdo" data-content="http://twitter.com/mdo">@mdo</a>')
.appendTo('#qunit-fixture')
.popover('show')
ok($('.popover').length, 'popover was inserted')
popover.popover('hide')
ok(!$(".popover").length, 'popover removed')
})
test("should store popover instance in popover data object", function () {
$.support.transition = false
var popover = $('<a href="#" title="mdo" data-content="http://twitter.com/mdo">@mdo</a>')
.popover()
ok(!!popover.data('popover'), 'popover instance exists')
})
test("should get title and content from options", function () {
$.support.transition = false
var popover = $('<a href="#">@fat</a>')
.appendTo('#qunit-fixture')
.popover({
title: function () {
return '@fat'
}
, content: function () {
return 'loves writing tests (╯°□°)╯︵ ┻━┻'
}
})
popover.popover('show')
ok($('.popover').length, 'popover was inserted')
equals($('.popover .popover-title').text(), '@fat', 'title correctly inserted')
equals($('.popover .popover-content').text(), 'loves writing tests (╯°□°)╯︵ ┻━┻', 'content correctly inserted')
popover.popover('hide')
ok(!$('.popover').length, 'popover was removed')
$('#qunit-fixture').empty()
})
test("should get title and content from attributes", function () {
$.support.transition = false
var popover = $('<a href="#" title="@mdo" data-content="loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻" >@mdo</a>')
.appendTo('#qunit-fixture')
.popover()
.popover('show')
ok($('.popover').length, 'popover was inserted')
equals($('.popover .popover-title').text(), '@mdo', 'title correctly inserted')
equals($('.popover .popover-content').text(), "loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻", 'content correctly inserted')
popover.popover('hide')
ok(!$('.popover').length, 'popover was removed')
$('#qunit-fixture').empty()
})
test("should respect custom classes", function() {
$.support.transition = false
var popover = $('<a href="#">@fat</a>')
.appendTo('#qunit-fixture')
.popover({
title: 'Test'
, content: 'Test'
, template: '<div class="popover foobar"><div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div></div>'
})
popover.popover('show')
ok($('.popover').length, 'popover was inserted')
ok($('.popover').hasClass('foobar'), 'custom class is present')
popover.popover('hide')
ok(!$('.popover').length, 'popover was removed')
$('#qunit-fixture').empty()
})
test("should destroy popover", function () {
var popover = $('<div/>').popover({trigger: 'hover'}).on('click.foo', function(){})
ok(popover.data('popover'), 'popover has data')
ok($._data(popover[0], 'events').mouseover && $._data(popover[0], 'events').mouseout, 'popover has hover event')
ok($._data(popover[0], 'events').click[0].namespace == 'foo', 'popover has extra click.foo event')
popover.popover('show')
popover.popover('destroy')
ok(!popover.hasClass('in'), 'popover is hidden')
ok(!popover.data('popover'), 'popover does not have data')
ok($._data(popover[0],'events').click[0].namespace == 'foo', 'popover still has click.foo')
ok(!$._data(popover[0], 'events').mouseover && !$._data(popover[0], 'events').mouseout, 'popover does not have any events')
})
})
\ No newline at end of file
$(function () {
module("bootstrap-scrollspy")
test("should provide no conflict", function () {
var scrollspy = $.fn.scrollspy.noConflict()
ok(!$.fn.scrollspy, 'scrollspy was set back to undefined (org value)')
$.fn.scrollspy = scrollspy
})
test("should be defined on jquery object", function () {
ok($(document.body).scrollspy, 'scrollspy method is defined')
})
test("should return element", function () {
ok($(document.body).scrollspy()[0] == document.body, 'document.body returned')
})
test("should switch active class on scroll", function () {
var sectionHTML = '<div id="masthead"></div>'
, $section = $(sectionHTML).append('#qunit-fixture')
, topbarHTML ='<div class="topbar">'
+ '<div class="topbar-inner">'
+ '<div class="container">'
+ '<h3><a href="#">Bootstrap</a></h3>'
+ '<ul class="nav">'
+ '<li><a href="#masthead">Overview</a></li>'
+ '</ul>'
+ '</div>'
+ '</div>'
+ '</div>'
, $topbar = $(topbarHTML).scrollspy()
ok($topbar.find('.active', true))
})
})
\ No newline at end of file
$(function () {
module("bootstrap-tabs")
test("should provide no conflict", function () {
var tab = $.fn.tab.noConflict()
ok(!$.fn.tab, 'tab was set back to undefined (org value)')
$.fn.tab = tab
})
test("should be defined on jquery object", function () {
ok($(document.body).tab, 'tabs method is defined')
})
test("should return element", function () {
ok($(document.body).tab()[0] == document.body, 'document.body returned')
})
test("should activate element by tab id", function () {
var tabsHTML =
'<ul class="tabs">'
+ '<li><a href="#home">Home</a></li>'
+ '<li><a href="#profile">Profile</a></li>'
+ '</ul>'
$('<ul><li id="home"></li><li id="profile"></li></ul>').appendTo("#qunit-fixture")
$(tabsHTML).find('li:last a').tab('show')
equals($("#qunit-fixture").find('.active').attr('id'), "profile")
$(tabsHTML).find('li:first a').tab('show')
equals($("#qunit-fixture").find('.active').attr('id'), "home")
})
test("should activate element by tab id", function () {
var pillsHTML =
'<ul class="pills">'
+ '<li><a href="#home">Home</a></li>'
+ '<li><a href="#profile">Profile</a></li>'
+ '</ul>'
$('<ul><li id="home"></li><li id="profile"></li></ul>').appendTo("#qunit-fixture")
$(pillsHTML).find('li:last a').tab('show')
equals($("#qunit-fixture").find('.active').attr('id'), "profile")
$(pillsHTML).find('li:first a').tab('show')
equals($("#qunit-fixture").find('.active').attr('id'), "home")
})
test("should not fire closed when close is prevented", function () {
$.support.transition = false
stop();
$('<div class="tab"/>')
.bind('show', function (e) {
e.preventDefault();
ok(true);
start();
})
.bind('shown', function () {
ok(false);
})
.tab('show')
})
test("show and shown events should reference correct relatedTarget", function () {
var dropHTML =
'<ul class="drop">'
+ '<li class="dropdown"><a data-toggle="dropdown" href="#">1</a>'
+ '<ul class="dropdown-menu">'
+ '<li><a href="#1-1" data-toggle="tab">1-1</a></li>'
+ '<li><a href="#1-2" data-toggle="tab">1-2</a></li>'
+ '</ul>'
+ '</li>'
+ '</ul>'
$(dropHTML).find('ul>li:first a').tab('show').end()
.find('ul>li:last a').on('show', function(event){
equals(event.relatedTarget.hash, "#1-1")
}).on('shown', function(event){
equals(event.relatedTarget.hash, "#1-1")
}).tab('show')
})
})
\ No newline at end of file
$(function () {
module("bootstrap-transition")
test("should be defined on jquery support object", function () {
ok($.support.transition !== undefined, 'transition object is defined')
})
test("should provide an end object", function () {
ok($.support.transition ? $.support.transition.end : true, 'end string is defined')
})
})
\ No newline at end of file
$(function () {
module("bootstrap-typeahead")
test("should provide no conflict", function () {
var typeahead = $.fn.typeahead.noConflict()
ok(!$.fn.typeahead, 'typeahead was set back to undefined (org value)')
$.fn.typeahead = typeahead
})
test("should be defined on jquery object", function () {
ok($(document.body).typeahead, 'alert method is defined')
})
test("should return element", function () {
ok($(document.body).typeahead()[0] == document.body, 'document.body returned')
})
test("should listen to an input", function () {
var $input = $('<input />')
$input.typeahead()
ok($._data($input[0], 'events').blur, 'has a blur event')
ok($._data($input[0], 'events').keypress, 'has a keypress event')
ok($._data($input[0], 'events').keyup, 'has a keyup event')
})
test("should create a menu", function () {
var $input = $('<input />')
ok($input.typeahead().data('typeahead').$menu, 'has a menu')
})
test("should listen to the menu", function () {
var $input = $('<input />')
, $menu = $input.typeahead().data('typeahead').$menu
ok($._data($menu[0], 'events').mouseover, 'has a mouseover(pseudo: mouseenter)')
ok($._data($menu[0], 'events').click, 'has a click')
})
test("should show menu when query entered", function () {
var $input = $('<input />')
.appendTo('body')
.typeahead({
source: ['aa', 'ab', 'ac']
})
, typeahead = $input.data('typeahead')
$input.val('a')
typeahead.lookup()
ok(typeahead.$menu.is(":visible"), 'typeahead is visible')
equals(typeahead.$menu.find('li').length, 3, 'has 3 items in menu')
equals(typeahead.$menu.find('.active').length, 1, 'one item is active')
$input.remove()
typeahead.$menu.remove()
})
test("should accept data source via synchronous function", function () {
var $input = $('<input />').typeahead({
source: function () {
return ['aa', 'ab', 'ac']
}
}).appendTo('body')
, typeahead = $input.data('typeahead')
$input.val('a')
typeahead.lookup()
ok(typeahead.$menu.is(":visible"), 'typeahead is visible')
equals(typeahead.$menu.find('li').length, 3, 'has 3 items in menu')
equals(typeahead.$menu.find('.active').length, 1, 'one item is active')
$input.remove()
typeahead.$menu.remove()
})
test("should accept data source via asynchronous function", function () {
var $input = $('<input />').typeahead({
source: function (query, process) {
process(['aa', 'ab', 'ac'])
}
}).appendTo('body')
, typeahead = $input.data('typeahead')
$input.val('a')
typeahead.lookup()
ok(typeahead.$menu.is(":visible"), 'typeahead is visible')
equals(typeahead.$menu.find('li').length, 3, 'has 3 items in menu')
equals(typeahead.$menu.find('.active').length, 1, 'one item is active')
$input.remove()
typeahead.$menu.remove()
})
test("should not explode when regex chars are entered", function () {
var $input = $('<input />').typeahead({
source: ['aa', 'ab', 'ac', 'mdo*', 'fat+']
}).appendTo('body')
, typeahead = $input.data('typeahead')
$input.val('+')
typeahead.lookup()
ok(typeahead.$menu.is(":visible"), 'typeahead is visible')
equals(typeahead.$menu.find('li').length, 1, 'has 1 item in menu')
equals(typeahead.$menu.find('.active').length, 1, 'one item is active')
$input.remove()
typeahead.$menu.remove()
})
test("should hide menu when query entered", function () {
stop()
var $input = $('<input />').typeahead({
source: ['aa', 'ab', 'ac']
}).appendTo('body')
, typeahead = $input.data('typeahead')
$input.val('a')
typeahead.lookup()
ok(typeahead.$menu.is(":visible"), 'typeahead is visible')
equals(typeahead.$menu.find('li').length, 3, 'has 3 items in menu')
equals(typeahead.$menu.find('.active').length, 1, 'one item is active')
$input.blur()
setTimeout(function () {
ok(!typeahead.$menu.is(":visible"), "typeahead is no longer visible")
start()
}, 200)
$input.remove()
typeahead.$menu.remove()
})
test("should set next item when down arrow is pressed", function () {
var $input = $('<input />').typeahead({
source: ['aa', 'ab', 'ac']
}).appendTo('body')
, typeahead = $input.data('typeahead')
$input.val('a')
typeahead.lookup()
ok(typeahead.$menu.is(":visible"), 'typeahead is visible')
equals(typeahead.$menu.find('li').length, 3, 'has 3 items in menu')
equals(typeahead.$menu.find('.active').length, 1, 'one item is active')
ok(typeahead.$menu.find('li').first().hasClass('active'), "first item is active")
// simulate entire key pressing event
$input.trigger({
type: 'keydown'
, keyCode: 40
})
.trigger({
type: 'keypress'
, keyCode: 40
})
.trigger({
type: 'keyup'
, keyCode: 40
})
ok(typeahead.$menu.find('li').first().next().hasClass('active'), "second item is active")
$input.trigger({
type: 'keydown'
, keyCode: 38
})
.trigger({
type: 'keypress'
, keyCode: 38
})
.trigger({
type: 'keyup'
, keyCode: 38
})
ok(typeahead.$menu.find('li').first().hasClass('active'), "first item is active")
$input.remove()
typeahead.$menu.remove()
})
test("should set input value to selected item", function () {
var $input = $('<input />').typeahead({
source: ['aa', 'ab', 'ac']
}).appendTo('body')
, typeahead = $input.data('typeahead')
, changed = false
, focus = false
, blur = false
$input.val('a')
typeahead.lookup()
$input.change(function() { changed = true });
$input.focus(function() { focus = true; blur = false });
$input.blur(function() { blur = true; focus = false });
$(typeahead.$menu.find('li')[2]).mouseover().click()
equals($input.val(), 'ac', 'input value was correctly set')
ok(!typeahead.$menu.is(':visible'), 'the menu was hidden')
ok(changed, 'a change event was fired')
ok(focus && !blur, 'focus is still set')
$input.remove()
typeahead.$menu.remove()
})
test("should start querying when minLength is met", function () {
var $input = $('<input />').typeahead({
source: ['aaaa', 'aaab', 'aaac'],
minLength: 3
}).appendTo('body')
, typeahead = $input.data('typeahead')
$input.val('aa')
typeahead.lookup()
equals(typeahead.$menu.find('li').length, 0, 'has 0 items in menu')
$input.val('aaa')
typeahead.lookup()
equals(typeahead.$menu.find('li').length, 3, 'has 3 items in menu')
$input.remove()
typeahead.$menu.remove()
})
})
/*!
* Bootstrap v2.3.1
*
* 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
//
// 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;
}
}
//
// 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);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Buttons &middot; Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 30px;
padding-bottom: 30px;
}
</style>
<link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../../docs/assets/ico/favicon.png">
</head>
<body>
<div class="container">
<h2>Dropups</h2>
<div class="btn-toolbar">
<div class="btn-group dropup">
<button class="btn">Dropup</button>
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group dropup">
<button class="btn btn-primary">Dropup</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group dropup">
<button class="btn btn-danger">Dropup</button>
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group dropup">
<button class="btn btn-warning">Dropup</button>
<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group dropup">
<button class="btn btn-success">Dropup</button>
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group dropup">
<button class="btn btn-info">Dropup</button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group dropup">
<button class="btn btn-inverse">Dropup</button>
<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../docs/assets/js/jquery.js"></script>
<script src="../../docs/assets/js/bootstrap-transition.js"></script>
<script src="../../docs/assets/js/bootstrap-alert.js"></script>
<script src="../../docs/assets/js/bootstrap-modal.js"></script>
<script src="../../docs/assets/js/bootstrap-dropdown.js"></script>
<script src="../../docs/assets/js/bootstrap-scrollspy.js"></script>
<script src="../../docs/assets/js/bootstrap-tab.js"></script>
<script src="../../docs/assets/js/bootstrap-tooltip.js"></script>
<script src="../../docs/assets/js/bootstrap-popover.js"></script>
<script src="../../docs/assets/js/bootstrap-button.js"></script>
<script src="../../docs/assets/js/bootstrap-collapse.js"></script>
<script src="../../docs/assets/js/bootstrap-carousel.js"></script>
<script src="../../docs/assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
//
// 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;
}
//
// 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;
}
//
// 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;
}
\ No newline at end of file
//
// 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;
}
\ No newline at end of file
//
// 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;
}
}
/*!
* Bootstrap CSS Tests
*/
/* Remove background image */
body {
background-image: none;
}
/* Space out subhead */
.subhead {
margin-bottom: 36px;
}
/*h4 {
margin-bottom: 5px;
}
*/
.type-test {
margin-bottom: 20px;
padding: 0 20px 20px;
background: url(../../docs/assets/img/grid-baseline-20px.png);
}
.type-test h1,
.type-test h2,
.type-test h3,
.type-test h4,
.type-test h5,
.type-test h6 {
background-color: rgba(255,0,0,.2);
}
/* colgroup tests */
.col1 {
background-color: rgba(255,0,0,.1);
}
.col2 {
background-color: rgba(0,255,0,.1);
}
.col3 {
background-color: rgba(0,0,255,.1);
}
/* Fluid row inputs */
#rowInputs .row > [class*=span],
#fluidRowInputs .row-fluid > [class*=span] {
background-color: rgba(255,0,0,.1);
}
/* Fluid grid */
.fluid-grid {
margin-bottom: 45px;
}
.fluid-grid .row {
height: 40px;
padding-top: 10px;
margin-top: 10px;
color: #ddd;
text-align: center;
}
.fluid-grid .span1 {
background-color: #999;
}
/* Gradients */
[class^="gradient-"] {
width: 100%;
height: 400px;
margin: 20px 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.gradient-horizontal {
background-color: #333333;
background-image: -moz-linear-gradient(left, #555555, #333333);
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#555555), to(#333333));
background-image: -webkit-linear-gradient(left, #555555, #333333);
background-image: -o-linear-gradient(left, #555555, #333333);
background-image: linear-gradient(to right, #555555, #333333);
background-repeat: repeat-x;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff333333', GradientType=1);
}
.gradient-vertical {
background-color: #474747;
background-image: -moz-linear-gradient(top, #555555, #333333);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#333333));
background-image: -webkit-linear-gradient(top, #555555, #333333);
background-image: -o-linear-gradient(top, #555555, #333333);
background-image: linear-gradient(to bottom, #555555, #333333);
background-repeat: repeat-x;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff333333', GradientType=0);
}
.gradient-directional {
background-color: #333333;
background-image: -moz-linear-gradient(45deg, #555555, #333333);
background-image: -webkit-linear-gradient(45deg, #555555, #333333);
background-image: -o-linear-gradient(45deg, #555555, #333333);
background-image: linear-gradient(45deg, #555555, #333333);
background-repeat: repeat-x;
}
.gradient-vertical-three {
background-color: #8940a5;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#00b3ee), color-stop(50%, #7a43b6), to(#c3325f));
background-image: -webkit-linear-gradient(#00b3ee, #7a43b6 50%, #c3325f);
background-image: -moz-linear-gradient(top, #00b3ee, #7a43b6 50%, #c3325f);
background-image: -o-linear-gradient(#00b3ee, #7a43b6 50%, #c3325f);
background-image: linear-gradient(#00b3ee, #7a43b6 50%, #c3325f);
background-repeat: no-repeat;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff00b3ee', endColorstr='#ffc3325f', GradientType=0);
}
.gradient-radial {
background-color: #333333;
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(#555555), to(#333333));
background-image: -webkit-radial-gradient(circle, #555555, #333333);
background-image: -moz-radial-gradient(circle, #555555, #333333);
background-image: -o-radial-gradient(circle, #555555, #333333);
background-repeat: no-repeat;
}
.gradient-striped {
background-color: #555555;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.gradient-horizontal-three {
background-color: #00b3ee;
background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(#00b3ee), color-stop(50%, #7a43b6), to(#c3325f));
background-image: -webkit-linear-gradient(left, #00b3ee, #7a43b6 50%, #c3325f);
background-image: -moz-linear-gradient(left, #00b3ee, #7a43b6 50%, #c3325f);
background-image: -o-linear-gradient(left, #00b3ee, #7a43b6 50%, #c3325f);
background-image: linear-gradient(to right, #00b3ee, #7a43b6 50%, #c3325f);
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b3ee', endColorstr='#c3325f', GradientType=0);
}
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
* Bootstrap!! * Bootstrap!!
*/ */
/*! /*!
* Bootstrap Responsive v2.2.2 * Bootstrap Responsive v2.3.2
* *
* Copyright 2012 Twitter, Inc * Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0 * Licensed under the Apache License v2.0
...@@ -13,9 +13,6 @@ ...@@ -13,9 +13,6 @@
* *
* Designed and built with all the love in the world @twitter by @mdo and @fat. * Designed and built with all the love in the world @twitter by @mdo and @fat.
*/ */
@-ms-viewport {
width: device-width;
}
.clearfix { .clearfix {
*zoom: 1; *zoom: 1;
} }
...@@ -43,6 +40,9 @@ ...@@ -43,6 +40,9 @@
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
@-ms-viewport {
width: device-width;
}
.hidden { .hidden {
display: none; display: none;
visibility: hidden; visibility: hidden;
...@@ -87,6 +87,17 @@ ...@@ -87,6 +87,17 @@
display: none !important; display: none !important;
} }
} }
.visible-print {
display: none !important;
}
@media print {
.visible-print {
display: inherit !important;
}
.hidden-print {
display: none !important;
}
}
@media (min-width: 1200px) { @media (min-width: 1200px) {
.row { .row {
margin-left: -30px; margin-left: -30px;
...@@ -366,40 +377,64 @@ ...@@ -366,40 +377,64 @@
.controls-row [class*="span"] + [class*="span"] { .controls-row [class*="span"] + [class*="span"] {
margin-left: 30px; margin-left: 30px;
} }
input.span12, textarea.span12, .uneditable-input.span12 { input.span12,
textarea.span12,
.uneditable-input.span12 {
width: 1156px; width: 1156px;
} }
input.span11, textarea.span11, .uneditable-input.span11 { input.span11,
textarea.span11,
.uneditable-input.span11 {
width: 1056px; width: 1056px;
} }
input.span10, textarea.span10, .uneditable-input.span10 { input.span10,
textarea.span10,
.uneditable-input.span10 {
width: 956px; width: 956px;
} }
input.span9, textarea.span9, .uneditable-input.span9 { input.span9,
textarea.span9,
.uneditable-input.span9 {
width: 856px; width: 856px;
} }
input.span8, textarea.span8, .uneditable-input.span8 { input.span8,
textarea.span8,
.uneditable-input.span8 {
width: 756px; width: 756px;
} }
input.span7, textarea.span7, .uneditable-input.span7 { input.span7,
textarea.span7,
.uneditable-input.span7 {
width: 656px; width: 656px;
} }
input.span6, textarea.span6, .uneditable-input.span6 { input.span6,
textarea.span6,
.uneditable-input.span6 {
width: 556px; width: 556px;
} }
input.span5, textarea.span5, .uneditable-input.span5 { input.span5,
textarea.span5,
.uneditable-input.span5 {
width: 456px; width: 456px;
} }
input.span4, textarea.span4, .uneditable-input.span4 { input.span4,
textarea.span4,
.uneditable-input.span4 {
width: 356px; width: 356px;
} }
input.span3, textarea.span3, .uneditable-input.span3 { input.span3,
textarea.span3,
.uneditable-input.span3 {
width: 256px; width: 256px;
} }
input.span2, textarea.span2, .uneditable-input.span2 { input.span2,
textarea.span2,
.uneditable-input.span2 {
width: 156px; width: 156px;
} }
input.span1, textarea.span1, .uneditable-input.span1 { input.span1,
textarea.span1,
.uneditable-input.span1 {
width: 56px; width: 56px;
} }
.thumbnails { .thumbnails {
...@@ -691,40 +726,64 @@ ...@@ -691,40 +726,64 @@
.controls-row [class*="span"] + [class*="span"] { .controls-row [class*="span"] + [class*="span"] {
margin-left: 20px; margin-left: 20px;
} }
input.span12, textarea.span12, .uneditable-input.span12 { input.span12,
textarea.span12,
.uneditable-input.span12 {
width: 710px; width: 710px;
} }
input.span11, textarea.span11, .uneditable-input.span11 { input.span11,
textarea.span11,
.uneditable-input.span11 {
width: 648px; width: 648px;
} }
input.span10, textarea.span10, .uneditable-input.span10 { input.span10,
textarea.span10,
.uneditable-input.span10 {
width: 586px; width: 586px;
} }
input.span9, textarea.span9, .uneditable-input.span9 { input.span9,
textarea.span9,
.uneditable-input.span9 {
width: 524px; width: 524px;
} }
input.span8, textarea.span8, .uneditable-input.span8 { input.span8,
textarea.span8,
.uneditable-input.span8 {
width: 462px; width: 462px;
} }
input.span7, textarea.span7, .uneditable-input.span7 { input.span7,
textarea.span7,
.uneditable-input.span7 {
width: 400px; width: 400px;
} }
input.span6, textarea.span6, .uneditable-input.span6 { input.span6,
textarea.span6,
.uneditable-input.span6 {
width: 338px; width: 338px;
} }
input.span5, textarea.span5, .uneditable-input.span5 { input.span5,
textarea.span5,
.uneditable-input.span5 {
width: 276px; width: 276px;
} }
input.span4, textarea.span4, .uneditable-input.span4 { input.span4,
textarea.span4,
.uneditable-input.span4 {
width: 214px; width: 214px;
} }
input.span3, textarea.span3, .uneditable-input.span3 { input.span3,
textarea.span3,
.uneditable-input.span3 {
width: 152px; width: 152px;
} }
input.span2, textarea.span2, .uneditable-input.span2 { input.span2,
textarea.span2,
.uneditable-input.span2 {
width: 90px; width: 90px;
} }
input.span1, textarea.span1, .uneditable-input.span1 { input.span1,
textarea.span1,
.uneditable-input.span1 {
width: 28px; width: 28px;
} }
} }
...@@ -943,7 +1002,9 @@ ...@@ -943,7 +1002,9 @@
margin-bottom: 2px; margin-bottom: 2px;
} }
.nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:hover,
.nav-collapse .dropdown-menu a:hover { .nav-collapse .nav > li > a:focus,
.nav-collapse .dropdown-menu a:hover,
.nav-collapse .dropdown-menu a:focus {
background-color: #f2f2f2; background-color: #f2f2f2;
} }
.navbar-inverse .nav-collapse .nav > li > a, .navbar-inverse .nav-collapse .nav > li > a,
...@@ -951,7 +1012,9 @@ ...@@ -951,7 +1012,9 @@
color: #999999; color: #999999;
} }
.navbar-inverse .nav-collapse .nav > li > a:hover, .navbar-inverse .nav-collapse .nav > li > a:hover,
.navbar-inverse .nav-collapse .dropdown-menu 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: #111111; background-color: #111111;
} }
.nav-collapse.in .btn-group { .nav-collapse.in .btn-group {
......
//
// 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);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
<link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
<style>
body {
padding-top: 30px;
padding-bottom: 30px;
}
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../../docs/assets/ico/favicon.png">
</head>
<body>
<form class="container">
<div class="page-header">
<h1>Fixed grid</h1>
</div>
<h3>Vertical alignment</h3>
<input type="text" class="span2" placeholder="span2">
<select class="span2"><option>span2</option></select>
<span class="uneditable-input span2">span1</span>
<h3>Width across elements</h3>
<div>
<input type="text" class="span2" placeholder="span2">
</div>
<div>
<select class="span2"><option>span2</option></select>
</div>
<div>
<span class="uneditable-input span2">span2</span>
</div>
<div class="page-header">
<h1>Fluid grid</h1>
</div>
<div class="row-fluid">
<input type="text" class="span2" placeholder="span2">
<select class="span2"><option>span2</option></select>
<span class="uneditable-input span2">span1</span>
</div>
</form> <!-- /container -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
<link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
<style>
body {
padding-top: 30px;
padding-bottom: 30px;
}
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="../../docs/assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<form class="container">
<div class="page-header">
<h1>Form controls</h1>
</div>
<div class="row">
<div class="span4">
<label>Select</label>
<select>
<option>Select</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<hr>
<label>textarea</label>
<textarea>Textarea</textarea>
<hr>
<label>text</label>
<input type="text" value="Text input">
<hr>
<label>password</label>
<input type="password" value="Password input">
<hr>
<label>checkbox</label>
<input type="checkbox" value="">
<hr>
<label>radio</label>
<input type="radio" value="">
<hr>
<label>button</label>
<input type="button" value="Button">
<hr>
<label>submit</label>
<input type="submit" value="Submit">
<hr>
<label>reset</label>
<input type="reset" value="Reset">
</div><!-- /span4 -->
<div class="span4">
<label>file</label>
<input type="file" value="">
<hr>
<label>hidden</label>
<input type="hidden" value="hidden">
<hr>
<label>image</label>
<input type="image" value="">
<hr>
<label>datetime</label>
<input type="datetime" value="">
<hr>
<label>datetime-local</label>
<input type="datetime-local" value="">
<hr>
<label>date</label>
<input type="date" value="">
<hr>
<label>month</label>
<input type="month" value="">
<hr>
<label>time</label>
<input type="time" value="">
<hr>
<label>week</label>
<input type="week" value="">
</div><!-- /span4 -->
<div class="span4">
<label>number</label>
<input type="number" value="">
<hr>
<label>range</label>
<input type="range" value="">
<hr>
<label>email</label>
<input type="email" value="">
<hr>
<label>url</label>
<input type="url" value="">
<hr>
<label>search</label>
<input type="search" value="">
<hr>
<label>tel</label>
<input type="tel" value="">
<hr>
<label>color</label>
<input type="color" value="">
</div><!-- /span4 -->
</div><!-- /row -->
</form> <!-- /container -->
</body>
</html>
//
// 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;
}
//
// 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
}
}
<!DOCTYPE HTML>
<html>
<head>
<title>Bootstrap Plugin Test Suite</title>
<!-- jquery -->
<!--<script src="http://code.jquery.com/jquery-1.7.min.js"></script>-->
<script src="vendor/jquery.js"></script>
<!-- qunit -->
<link rel="stylesheet" href="vendor/qunit.css" type="text/css" media="screen" />
<script src="vendor/qunit.js"></script>
<!-- phantomjs logging script-->
<script src="unit/bootstrap-phantom.js"></script>
<!-- plugin sources -->
<script src="../../js/bootstrap-transition.js"></script>
<script src="../../js/bootstrap-alert.js"></script>
<script src="../../js/bootstrap-button.js"></script>
<script src="../../js/bootstrap-carousel.js"></script>
<script src="../../js/bootstrap-collapse.js"></script>
<script src="../../js/bootstrap-dropdown.js"></script>
<script src="../../js/bootstrap-modal.js"></script>
<script src="../../js/bootstrap-scrollspy.js"></script>
<script src="../../js/bootstrap-tab.js"></script>
<script src="../../js/bootstrap-tooltip.js"></script>
<script src="../../js/bootstrap-popover.js"></script>
<script src="../../js/bootstrap-typeahead.js"></script>
<script src="../../js/bootstrap-affix.js"></script>
<!-- unit tests -->
<script src="unit/bootstrap-transition.js"></script>
<script src="unit/bootstrap-alert.js"></script>
<script src="unit/bootstrap-button.js"></script>
<script src="unit/bootstrap-carousel.js"></script>
<script src="unit/bootstrap-collapse.js"></script>
<script src="unit/bootstrap-dropdown.js"></script>
<script src="unit/bootstrap-modal.js"></script>
<script src="unit/bootstrap-scrollspy.js"></script>
<script src="unit/bootstrap-tab.js"></script>
<script src="unit/bootstrap-tooltip.js"></script>
<script src="unit/bootstrap-popover.js"></script>
<script src="unit/bootstrap-typeahead.js"></script>
<script src="unit/bootstrap-affix.js"></script>
</head>
<body>
<div>
<h1 id="qunit-header">Bootstrap Plugin Test Suite</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture"></div>
</div>
</body>
</html>
\ No newline at end of file
//
// 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;
}
}
//
// 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();
}
\ No newline at end of file
/*! /*!
* Bootstrap v2.2.2 * Bootstrap v2.3.2
* *
* Copyright 2012 Twitter, Inc * Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0 * Licensed under the Apache License v2.0
...@@ -8,13 +8,13 @@ ...@@ -8,13 +8,13 @@
* Designed and built with all the love in the world @twitter by @mdo and @fat. * Designed and built with all the love in the world @twitter by @mdo and @fat.
*/ */
// CSS Reset
@import "reset.less";
// Core variables and mixins // Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc @import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less"; @import "mixins.less";
// CSS Reset
@import "reset.less";
// Grid system and page structure // Grid system and page structure
@import "scaffolding.less"; @import "scaffolding.less";
@import "grid.less"; @import "grid.less";
......
...@@ -164,8 +164,6 @@ ...@@ -164,8 +164,6 @@
margin-left: 0; margin-left: 0;
} }
// Carets in other button sizes // Carets in other button sizes
.btn-mini .caret,
.btn-small .caret,
.btn-large .caret { .btn-large .caret {
margin-top: 6px; margin-top: 6px;
} }
...@@ -174,6 +172,10 @@ ...@@ -174,6 +172,10 @@
border-right-width: 5px; border-right-width: 5px;
border-top-width: 5px; border-top-width: 5px;
} }
.btn-mini .caret,
.btn-small .caret {
margin-top: 8px;
}
// Upside down carets for .dropup // Upside down carets for .dropup
.dropup .btn-large .caret { .dropup .btn-large .caret {
border-bottom-width: 5px; border-bottom-width: 5px;
......
...@@ -25,13 +25,14 @@ ...@@ -25,13 +25,14 @@
.ie7-restore-left-whitespace(); // Give IE7 some love .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)"); .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
// Hover state // Hover/focus state
&:hover { &:hover,
&:focus {
color: @grayDark; color: @grayDark;
text-decoration: none; text-decoration: none;
background-position: 0 -15px; background-position: 0 -15px;
// transition is only when going to hover, otherwise the background // transition is only when going to hover/focus, otherwise the background
// behind the gradient (there for IE<=9 fallback) gets mismatched // behind the gradient (there for IE<=9 fallback) gets mismatched
.transition(background-position .1s linear); .transition(background-position .1s linear);
} }
...@@ -141,11 +142,6 @@ input[type="button"] { ...@@ -141,11 +142,6 @@ input[type="button"] {
// Set the backgrounds // Set the backgrounds
// ------------------------- // -------------------------
.btn {
// reset here as of 2.0.3 due to Recess property order
border-color: #c5c5c5;
border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25);
}
.btn-primary { .btn-primary {
.buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight); .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
} }
...@@ -219,12 +215,14 @@ input[type="submit"].btn { ...@@ -219,12 +215,14 @@ input[type="submit"].btn {
color: @linkColor; color: @linkColor;
.border-radius(0); .border-radius(0);
} }
.btn-link:hover { .btn-link:hover,
.btn-link:focus {
color: @linkColorHover; color: @linkColorHover;
text-decoration: underline; text-decoration: underline;
background-color: transparent; background-color: transparent;
} }
.btn-link[disabled]:hover { .btn-link[disabled]:hover,
.btn-link[disabled]:focus {
color: @grayDark; color: @grayDark;
text-decoration: none; text-decoration: none;
} }
...@@ -21,12 +21,13 @@ ...@@ -21,12 +21,13 @@
display: none; display: none;
position: relative; position: relative;
.transition(.6s ease-in-out left); .transition(.6s ease-in-out left);
}
// Account for jankitude on images // Account for jankitude on images
> .item > img { > img,
display: block; > a > img {
line-height: 1; display: block;
line-height: 1;
}
} }
> .active, > .active,
...@@ -97,14 +98,40 @@ ...@@ -97,14 +98,40 @@
right: 15px; right: 15px;
} }
// Hover state // Hover/focus state
&:hover { &:hover,
&:focus {
color: @white; color: @white;
text-decoration: none; text-decoration: none;
.opacity(90); .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 // Caption for text below images
// ----------------------------- // -----------------------------
......
...@@ -11,7 +11,8 @@ ...@@ -11,7 +11,8 @@
color: @black; color: @black;
text-shadow: 0 1px 0 rgba(255,255,255,1); text-shadow: 0 1px 0 rgba(255,255,255,1);
.opacity(20); .opacity(20);
&:hover { &:hover,
&:focus {
color: @black; color: @black;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
......
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
} }
// Links within the dropdown menu // Links within the dropdown menu
li > a { > li > a {
display: block; display: block;
padding: 3px 20px; padding: 3px 20px;
clear: both; clear: both;
...@@ -83,11 +83,12 @@ ...@@ -83,11 +83,12 @@
} }
} }
// Hover state // Hover/Focus state
// ----------- // -----------
.dropdown-menu li > a:hover, .dropdown-menu > li > a:hover,
.dropdown-menu li > a:focus, .dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a { .dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
text-decoration: none; text-decoration: none;
color: @dropdownLinkColorHover; color: @dropdownLinkColorHover;
#gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%)); #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
...@@ -95,8 +96,9 @@ ...@@ -95,8 +96,9 @@
// Active state // Active state
// ------------ // ------------
.dropdown-menu .active > a, .dropdown-menu > .active > a,
.dropdown-menu .active > a:hover { .dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: @dropdownLinkColorActive; color: @dropdownLinkColorActive;
text-decoration: none; text-decoration: none;
outline: 0; outline: 0;
...@@ -105,13 +107,15 @@ ...@@ -105,13 +107,15 @@
// Disabled state // Disabled state
// -------------- // --------------
// Gray out text and ensure the hover state remains gray // Gray out text and ensure the hover/focus state remains gray
.dropdown-menu .disabled > a, .dropdown-menu > .disabled > a,
.dropdown-menu .disabled > a:hover { .dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
color: @grayLight; color: @grayLight;
} }
// Nuke hover effects // Nuke hover/focus effects
.dropdown-menu .disabled > a:hover { .dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
text-decoration: none; text-decoration: none;
background-color: transparent; background-color: transparent;
background-image: none; // Remove CSS gradient background-image: none; // Remove CSS gradient
...@@ -131,6 +135,17 @@ ...@@ -131,6 +135,17 @@
} }
} }
// Backdrop to catch body clicks on mobile, etc.
// ---------------------------
.dropdown-backdrop {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: @zindexDropdown - 10;
}
// Right aligned dropdowns // Right aligned dropdowns
// --------------------------- // ---------------------------
.pull-right > .dropdown-menu { .pull-right > .dropdown-menu {
......
...@@ -422,7 +422,9 @@ select:focus:invalid { ...@@ -422,7 +422,9 @@ select:focus:invalid {
// Allow us to put symbols and text within the input field for a cleaner look // Allow us to put symbols and text within the input field for a cleaner look
.input-append, .input-append,
.input-prepend { .input-prepend {
margin-bottom: 5px; display: inline-block;
margin-bottom: @baseLineHeight / 2;
vertical-align: middle;
font-size: 0; // white space collapse hack font-size: 0; // white space collapse hack
white-space: nowrap; // Prevent span and input from separating white-space: nowrap; // Prevent span and input from separating
...@@ -430,7 +432,8 @@ select:focus:invalid { ...@@ -430,7 +432,8 @@ select:focus:invalid {
input, input,
select, select,
.uneditable-input, .uneditable-input,
.dropdown-menu { .dropdown-menu,
.popover {
font-size: @baseFontSize; font-size: @baseFontSize;
} }
......
...@@ -35,10 +35,12 @@ ...@@ -35,10 +35,12 @@
} }
} }
// Hover state, but only for links // Hover/focus state, but only for links
a { a {
&.label:hover, &.label:hover,
&.badge:hover { &.label:focus,
&.badge:hover,
&.badge:focus {
color: @white; color: @white;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
......
...@@ -37,10 +37,10 @@ ...@@ -37,10 +37,10 @@
// Media image alignment // Media image alignment
// ------------------------- // -------------------------
.media .pull-left { .media > .pull-left {
margin-right: 10px; margin-right: 10px;
} }
.media .pull-right { .media > .pull-right {
margin-left: 10px; margin-left: 10px;
} }
......
...@@ -268,6 +268,12 @@ ...@@ -268,6 +268,12 @@
-o-transition-delay: @transition-delay; -o-transition-delay: @transition-delay;
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 // Transformations
.rotate(@degrees) { .rotate(@degrees) {
...@@ -437,6 +443,17 @@ ...@@ -437,6 +443,17 @@
background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10 background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10 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) { .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
background-color: mix(@midColor, @endColor, 80%); 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-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
...@@ -500,7 +517,7 @@ ...@@ -500,7 +517,7 @@
.reset-filter(); .reset-filter();
// in these cases the gradient won't cover the background, so we override // in these cases the gradient won't cover the background, so we override
&:hover, &:active, &.active, &.disabled, &[disabled] { &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
color: @textColor; color: @textColor;
background-color: @endColor; background-color: @endColor;
*background-color: darken(@endColor, 5%); *background-color: darken(@endColor, 5%);
...@@ -558,13 +575,13 @@ ...@@ -558,13 +575,13 @@
.core (@gridColumnWidth, @gridGutterWidth) { .core (@gridColumnWidth, @gridGutterWidth) {
.spanX (@index) when (@index > 0) { .spanX (@index) when (@index > 0) {
(~".span@{index}") { .span(@index); } .span@{index} { .span(@index); }
.spanX(@index - 1); .spanX(@index - 1);
} }
.spanX (0) {} .spanX (0) {}
.offsetX (@index) when (@index > 0) { .offsetX (@index) when (@index > 0) {
(~".offset@{index}") { .offset(@index); } .offset@{index} { .offset(@index); }
.offsetX(@index - 1); .offsetX(@index - 1);
} }
.offsetX (0) {} .offsetX (0) {}
...@@ -603,14 +620,14 @@ ...@@ -603,14 +620,14 @@
.fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) { .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
.spanX (@index) when (@index > 0) { .spanX (@index) when (@index > 0) {
(~".span@{index}") { .span(@index); } .span@{index} { .span(@index); }
.spanX(@index - 1); .spanX(@index - 1);
} }
.spanX (0) {} .spanX (0) {}
.offsetX (@index) when (@index > 0) { .offsetX (@index) when (@index > 0) {
(~'.offset@{index}') { .offset(@index); } .offset@{index} { .offset(@index); }
(~'.offset@{index}:first-child') { .offsetFirstChild(@index); } .offset@{index}:first-child { .offsetFirstChild(@index); }
.offsetX(@index - 1); .offsetX(@index - 1);
} }
.offsetX (0) {} .offsetX (0) {}
...@@ -658,7 +675,7 @@ ...@@ -658,7 +675,7 @@
.input(@gridColumnWidth, @gridGutterWidth) { .input(@gridColumnWidth, @gridGutterWidth) {
.spanX (@index) when (@index > 0) { .spanX (@index) when (@index > 0) {
(~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); } input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index} { .span(@index); }
.spanX(@index - 1); .spanX(@index - 1);
} }
.spanX (0) {} .spanX (0) {}
...@@ -682,5 +699,4 @@ ...@@ -682,5 +699,4 @@
.spanX (@gridColumns); .spanX (@gridColumns);
} }
} }
...@@ -56,7 +56,8 @@ ...@@ -56,7 +56,8 @@
font-weight: 200; font-weight: 200;
color: @navbarBrandColor; color: @navbarBrandColor;
text-shadow: 0 1px 0 @navbarBackgroundHighlight; text-shadow: 0 1px 0 @navbarBackgroundHighlight;
&:hover { &:hover,
&:focus {
text-decoration: none; text-decoration: none;
} }
} }
...@@ -73,7 +74,8 @@ ...@@ -73,7 +74,8 @@
// ------------------------- // -------------------------
.navbar-link { .navbar-link {
color: @navbarLinkColor; color: @navbarLinkColor;
&:hover { &:hover,
&:focus {
color: @navbarLinkColorHover; color: @navbarLinkColorHover;
} }
} }
...@@ -95,7 +97,9 @@ ...@@ -95,7 +97,9 @@
} }
.navbar .btn-group .btn, .navbar .btn-group .btn,
.navbar .input-prepend .btn, .navbar .input-prepend .btn,
.navbar .input-append .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 margin-top: 0; // then undo the margin here so we don't accidentally double it
} }
...@@ -245,13 +249,12 @@ ...@@ -245,13 +249,12 @@
} }
.navbar .nav .dropdown-toggle .caret { .navbar .nav .dropdown-toggle .caret {
margin-top: 8px; margin-top: 8px;
} }
// Hover // Hover/focus
.navbar .nav > li > a:focus, .navbar .nav > li > a:focus,
.navbar .nav > li > a:hover { .navbar .nav > li > a:hover {
background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
color: @navbarLinkColorHover; color: @navbarLinkColorHover;
text-decoration: none; text-decoration: none;
} }
...@@ -335,10 +338,11 @@ ...@@ -335,10 +338,11 @@
} }
} }
// Caret should match text color on hover // Caret should match text color on hover/focus
.navbar .nav li.dropdown > a:hover .caret { .navbar .nav li.dropdown > a:hover .caret,
border-top-color: @navbarLinkColorActive; .navbar .nav li.dropdown > a:focus .caret {
border-bottom-color: @navbarLinkColorActive; border-top-color: @navbarLinkColorHover;
border-bottom-color: @navbarLinkColorHover;
} }
// Remove background color from open dropdown // Remove background color from open dropdown
...@@ -396,7 +400,8 @@ ...@@ -396,7 +400,8 @@
.nav > li > a { .nav > li > a {
color: @navbarInverseLinkColor; color: @navbarInverseLinkColor;
text-shadow: 0 -1px 0 rgba(0,0,0,.25); text-shadow: 0 -1px 0 rgba(0,0,0,.25);
&:hover { &:hover,
&:focus {
color: @navbarInverseLinkColorHover; color: @navbarInverseLinkColorHover;
} }
} }
...@@ -425,7 +430,8 @@ ...@@ -425,7 +430,8 @@
// Inline text links // Inline text links
.navbar-link { .navbar-link {
color: @navbarInverseLinkColor; color: @navbarInverseLinkColor;
&:hover { &:hover,
&:focus {
color: @navbarInverseLinkColorHover; color: @navbarInverseLinkColorHover;
} }
} }
...@@ -443,7 +449,8 @@ ...@@ -443,7 +449,8 @@
background-color: @navbarInverseLinkBackgroundActive; background-color: @navbarInverseLinkBackgroundActive;
color: @navbarInverseLinkColorActive; color: @navbarInverseLinkColorActive;
} }
.nav li.dropdown > a:hover .caret { .nav li.dropdown > a:hover .caret,
.nav li.dropdown > a:focus .caret {
border-top-color: @navbarInverseLinkColorActive; border-top-color: @navbarInverseLinkColorActive;
border-bottom-color: @navbarInverseLinkColorActive; border-bottom-color: @navbarInverseLinkColorActive;
} }
......
...@@ -16,7 +16,8 @@ ...@@ -16,7 +16,8 @@
.nav > li > a { .nav > li > a {
display: block; display: block;
} }
.nav > li > a:hover { .nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none; text-decoration: none;
background-color: @grayLighter; background-color: @grayLighter;
} }
...@@ -68,7 +69,8 @@ ...@@ -68,7 +69,8 @@
padding: 3px 15px; padding: 3px 15px;
} }
.nav-list > .active > a, .nav-list > .active > a,
.nav-list > .active > a:hover { .nav-list > .active > a:hover,
.nav-list > .active > a:focus {
color: @white; color: @white;
text-shadow: 0 -1px 0 rgba(0,0,0,.2); text-shadow: 0 -1px 0 rgba(0,0,0,.2);
background-color: @linkColor; background-color: @linkColor;
...@@ -122,13 +124,15 @@ ...@@ -122,13 +124,15 @@
line-height: @baseLineHeight; line-height: @baseLineHeight;
border: 1px solid transparent; border: 1px solid transparent;
.border-radius(4px 4px 0 0); .border-radius(4px 4px 0 0);
&:hover { &:hover,
&:focus {
border-color: @grayLighter @grayLighter #ddd; border-color: @grayLighter @grayLighter #ddd;
} }
} }
// Active state, and it's :hover to override normal :hover // Active state, and it's :hover/:focus to override normal :hover/:focus
.nav-tabs > .active > a, .nav-tabs > .active > a,
.nav-tabs > .active > a:hover { .nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
color: @gray; color: @gray;
background-color: @bodyBackground; background-color: @bodyBackground;
border: 1px solid #ddd; border: 1px solid #ddd;
...@@ -151,7 +155,8 @@ ...@@ -151,7 +155,8 @@
// Active state // Active state
.nav-pills > .active > a, .nav-pills > .active > a,
.nav-pills > .active > a:hover { .nav-pills > .active > a:hover,
.nav-pills > .active > a:focus {
color: @white; color: @white;
background-color: @linkColor; background-color: @linkColor;
} }
...@@ -183,7 +188,8 @@ ...@@ -183,7 +188,8 @@
.nav-tabs.nav-stacked > li:last-child > a { .nav-tabs.nav-stacked > li:last-child > a {
.border-bottom-radius(4px); .border-bottom-radius(4px);
} }
.nav-tabs.nav-stacked > li > a:hover { .nav-tabs.nav-stacked > li > a:hover,
.nav-tabs.nav-stacked > li > a:focus {
border-color: #ddd; border-color: #ddd;
z-index: 2; z-index: 2;
} }
...@@ -216,7 +222,8 @@ ...@@ -216,7 +222,8 @@
border-bottom-color: @linkColor; border-bottom-color: @linkColor;
margin-top: 6px; margin-top: 6px;
} }
.nav .dropdown-toggle:hover .caret { .nav .dropdown-toggle:hover .caret,
.nav .dropdown-toggle:focus .caret {
border-top-color: @linkColorHover; border-top-color: @linkColorHover;
border-bottom-color: @linkColorHover; border-bottom-color: @linkColorHover;
} }
...@@ -236,9 +243,10 @@ ...@@ -236,9 +243,10 @@
border-bottom-color: @gray; border-bottom-color: @gray;
} }
// Active:hover dropdown links // Active:hover/:focus dropdown links
// ------------------------- // -------------------------
.nav > .dropdown.active > a:hover { .nav > .dropdown.active > a:hover,
.nav > .dropdown.active > a:focus {
cursor: pointer; cursor: pointer;
} }
...@@ -246,21 +254,24 @@ ...@@ -246,21 +254,24 @@
// ------------------------- // -------------------------
.nav-tabs .open .dropdown-toggle, .nav-tabs .open .dropdown-toggle,
.nav-pills .open .dropdown-toggle, .nav-pills .open .dropdown-toggle,
.nav > li.dropdown.open.active > a:hover { .nav > li.dropdown.open.active > a:hover,
.nav > li.dropdown.open.active > a:focus {
color: @white; color: @white;
background-color: @grayLight; background-color: @grayLight;
border-color: @grayLight; border-color: @grayLight;
} }
.nav li.dropdown.open .caret, .nav li.dropdown.open .caret,
.nav li.dropdown.open.active .caret, .nav li.dropdown.open.active .caret,
.nav li.dropdown.open a:hover .caret { .nav li.dropdown.open a:hover .caret,
.nav li.dropdown.open a:focus .caret {
border-top-color: @white; border-top-color: @white;
border-bottom-color: @white; border-bottom-color: @white;
.opacity(100); .opacity(100);
} }
// Dropdowns in stacked tabs // Dropdowns in stacked tabs
.tabs-stacked .open > a:hover { .tabs-stacked .open > a:hover,
.tabs-stacked .open > a:focus {
border-color: @grayLight; border-color: @grayLight;
} }
...@@ -311,13 +322,15 @@ ...@@ -311,13 +322,15 @@
} }
.tabs-below > .nav-tabs > li > a { .tabs-below > .nav-tabs > li > a {
.border-radius(0 0 4px 4px); .border-radius(0 0 4px 4px);
&:hover { &:hover,
&:focus {
border-bottom-color: transparent; border-bottom-color: transparent;
border-top-color: #ddd; border-top-color: #ddd;
} }
} }
.tabs-below > .nav-tabs > .active > a, .tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover { .tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
border-color: transparent #ddd #ddd #ddd; border-color: transparent #ddd #ddd #ddd;
} }
...@@ -346,11 +359,13 @@ ...@@ -346,11 +359,13 @@
margin-right: -1px; margin-right: -1px;
.border-radius(4px 0 0 4px); .border-radius(4px 0 0 4px);
} }
.tabs-left > .nav-tabs > li > a:hover { .tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
border-color: @grayLighter #ddd @grayLighter @grayLighter; border-color: @grayLighter #ddd @grayLighter @grayLighter;
} }
.tabs-left > .nav-tabs .active > a, .tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover { .tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
border-color: #ddd transparent #ddd #ddd; border-color: #ddd transparent #ddd #ddd;
*border-right-color: @white; *border-right-color: @white;
} }
...@@ -365,11 +380,13 @@ ...@@ -365,11 +380,13 @@
margin-left: -1px; margin-left: -1px;
.border-radius(0 4px 4px 0); .border-radius(0 4px 4px 0);
} }
.tabs-right > .nav-tabs > li > a:hover { .tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
border-color: @grayLighter @grayLighter @grayLighter #ddd; border-color: @grayLighter @grayLighter @grayLighter #ddd;
} }
.tabs-right > .nav-tabs .active > a, .tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover { .tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
border-color: #ddd #ddd #ddd transparent; border-color: #ddd #ddd #ddd transparent;
*border-left-color: @white; *border-left-color: @white;
} }
...@@ -383,8 +400,9 @@ ...@@ -383,8 +400,9 @@
.nav > .disabled > a { .nav > .disabled > a {
color: @grayLight; color: @grayLight;
} }
// Nuke hover effects // Nuke hover/focus effects
.nav > .disabled > a:hover { .nav > .disabled > a:hover,
.nav > .disabled > a:focus {
text-decoration: none; text-decoration: none;
background-color: transparent; background-color: transparent;
cursor: default; cursor: default;
......
...@@ -20,7 +20,8 @@ ...@@ -20,7 +20,8 @@
border: 1px solid #ddd; border: 1px solid #ddd;
.border-radius(15px); .border-radius(15px);
} }
.pager li > a:hover { .pager li > a:hover,
.pager li > a:focus {
text-decoration: none; text-decoration: none;
background-color: #f5f5f5; background-color: #f5f5f5;
} }
...@@ -34,6 +35,7 @@ ...@@ -34,6 +35,7 @@
} }
.pager .disabled > a, .pager .disabled > a,
.pager .disabled > a:hover, .pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span { .pager .disabled > span {
color: @grayLight; color: @grayLight;
background-color: #fff; background-color: #fff;
......
...@@ -32,6 +32,7 @@ ...@@ -32,6 +32,7 @@
border-left-width: 0; border-left-width: 0;
} }
.pagination ul > li > a:hover, .pagination ul > li > a:hover,
.pagination ul > li > a:focus,
.pagination ul > .active > a, .pagination ul > .active > a,
.pagination ul > .active > span { .pagination ul > .active > span {
background-color: @paginationActiveBackground; background-color: @paginationActiveBackground;
...@@ -43,7 +44,8 @@ ...@@ -43,7 +44,8 @@
} }
.pagination ul > .disabled > span, .pagination ul > .disabled > span,
.pagination ul > .disabled > a, .pagination ul > .disabled > a,
.pagination ul > .disabled > a:hover { .pagination ul > .disabled > a:hover,
.pagination ul > .disabled > a:focus {
color: @grayLight; color: @grayLight;
background-color: transparent; background-color: transparent;
cursor: default; cursor: default;
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
left: 0; left: 0;
z-index: @zindexPopover; z-index: @zindexPopover;
display: none; display: none;
width: 236px; max-width: 276px;
padding: 1px; padding: 1px;
text-align: left; // Reset given new insertion method text-align: left; // Reset given new insertion method
background-color: @popoverBackground; background-color: @popoverBackground;
...@@ -40,6 +40,10 @@ ...@@ -40,6 +40,10 @@
background-color: @popoverTitleBackground; background-color: @popoverTitleBackground;
border-bottom: 1px solid darken(@popoverTitleBackground, 5%); border-bottom: 1px solid darken(@popoverTitleBackground, 5%);
.border-radius(5px 5px 0 0); .border-radius(5px 5px 0 0);
&:empty {
display: none;
}
} }
.popover-content { .popover-content {
......
...@@ -72,8 +72,8 @@ ...@@ -72,8 +72,8 @@
.box-sizing(border-box); .box-sizing(border-box);
} }
.row-fluid [class*="offset"]:first-child { .row-fluid [class*="offset"]:first-child {
margin-left: 0; margin-left: 0;
} }
// FORM FIELDS // FORM FIELDS
// ----------- // -----------
......
...@@ -81,7 +81,9 @@ ...@@ -81,7 +81,9 @@
margin-bottom: 2px; margin-bottom: 2px;
} }
.nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:hover,
.nav-collapse .dropdown-menu a:hover { .nav-collapse .nav > li > a:focus,
.nav-collapse .dropdown-menu a:hover,
.nav-collapse .dropdown-menu a:focus {
background-color: @navbarBackground; background-color: @navbarBackground;
} }
.navbar-inverse .nav-collapse .nav > li > a, .navbar-inverse .nav-collapse .nav > li > a,
...@@ -89,7 +91,9 @@ ...@@ -89,7 +91,9 @@
color: @navbarInverseLinkColor; color: @navbarInverseLinkColor;
} }
.navbar-inverse .nav-collapse .nav > li > a:hover, .navbar-inverse .nav-collapse .nav > li > a:hover,
.navbar-inverse .nav-collapse .dropdown-menu 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; background-color: @navbarInverseBackground;
} }
// Buttons in the navbar // Buttons in the navbar
......
...@@ -3,6 +3,13 @@ ...@@ -3,6 +3,13 @@
// -------------------------------------------------- // --------------------------------------------------
// 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 // Hide from screenreaders and browsers
// Credit: HTML5 Boilerplate // Credit: HTML5 Boilerplate
.hidden { .hidden {
...@@ -41,3 +48,12 @@ ...@@ -41,3 +48,12 @@
// Hide // Hide
.hidden-phone { display: none !important; } .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; }
}
/*! /*!
* Bootstrap Responsive v2.2.2 * Bootstrap Responsive v2.3.2
* *
* Copyright 2012 Twitter, Inc * Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0 * Licensed under the Apache License v2.0
...@@ -14,15 +14,6 @@ ...@@ -14,15 +14,6 @@
// ------------------------------------------------------------- // -------------------------------------------------------------
// 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;
}
// REPEAT VARIABLES & MIXINS // REPEAT VARIABLES & MIXINS
// ------------------------- // -------------------------
// Required since we compile the responsive stuff separately // Required since we compile the responsive stuff separately
......
...@@ -23,7 +23,8 @@ a { ...@@ -23,7 +23,8 @@ a {
color: @linkColor; color: @linkColor;
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover,
a:focus {
color: @linkColorHover; color: @linkColorHover;
text-decoration: underline; text-decoration: underline;
} }
......
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
margin-top: 1px; margin-top: 1px;
} }
/* White icons with optional class, or on hover/active states of certain elements */ /* White icons with optional class, or on hover/focus/active states of certain elements */
.icon-white, .icon-white,
.nav-pills > .active > a > [class^="icon-"], .nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"], .nav-pills > .active > a > [class*=" icon-"],
...@@ -37,11 +37,15 @@ ...@@ -37,11 +37,15 @@
.navbar-inverse .nav > .active > a > [class^="icon-"], .navbar-inverse .nav > .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:hover > [class^="icon-"],
.dropdown-menu > li > a:focus > [class^="icon-"],
.dropdown-menu > li > a:hover > [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-menu > .active > a > [class*=" icon-"], .dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"], .dropdown-submenu:hover > 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}"); background-image: url("@{iconWhiteSpritePath}");
} }
...@@ -166,7 +170,7 @@ ...@@ -166,7 +170,7 @@
.icon-chevron-down { background-position: -313px -119px; } // 1px, 1px off .icon-chevron-down { background-position: -313px -119px; } // 1px, 1px off
.icon-retweet { background-position: -336px -120px; } .icon-retweet { background-position: -336px -120px; }
.icon-shopping-cart { background-position: -360px -120px; } .icon-shopping-cart { background-position: -360px -120px; }
.icon-folder-close { background-position: -384px -120px; } .icon-folder-close { background-position: -384px -120px; width: 16px; }
.icon-folder-open { background-position: -408px -120px; width: 16px; } .icon-folder-open { background-position: -408px -120px; width: 16px; }
.icon-resize-vertical { background-position: -432px -119px; } // 1px, 1px off .icon-resize-vertical { background-position: -432px -119px; } // 1px, 1px off
.icon-resize-horizontal { background-position: -456px -118px; } // 1px, 2px off .icon-resize-horizontal { background-position: -456px -118px; } // 1px, 2px off
......
...@@ -93,24 +93,32 @@ table { ...@@ -93,24 +93,32 @@ table {
tbody:first-child tr:first-child td { tbody:first-child tr:first-child td {
border-top: 0; border-top: 0;
} }
// For first th or td in the first row in the first thead or tbody // For first th/td in the first row in the first thead or tbody
thead:first-child tr:first-child > th:first-child, thead:first-child tr:first-child > th:first-child,
tbody:first-child tr:first-child > td: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); .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, thead:first-child tr:first-child > th:last-child,
tbody:first-child tr:first-child > td: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); .border-top-right-radius(@baseBorderRadius);
} }
// For first th or td in the last row in the last thead or tbody // 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, thead:last-child tr:last-child > th:first-child,
tbody:last-child tr:last-child > td:first-child, tbody:last-child tr:last-child > td:first-child,
tfoot: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); .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, thead:last-child tr:last-child > th:last-child,
tbody:last-child tr:last-child > td:last-child, tbody:last-child tr:last-child > td:last-child,
tfoot: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); .border-bottom-right-radius(@baseBorderRadius);
} }
...@@ -122,7 +130,6 @@ table { ...@@ -122,7 +130,6 @@ table {
.border-bottom-right-radius(0); .border-bottom-right-radius(0);
} }
// Special fixes to round the left border on the first td/th // Special fixes to round the left border on the first td/th
caption + thead tr:first-child th:first-child, caption + thead tr:first-child th:first-child,
caption + tbody tr:first-child td:first-child, caption + tbody tr:first-child td:first-child,
...@@ -161,8 +168,8 @@ table { ...@@ -161,8 +168,8 @@ table {
// Placed here since it has to come after the potential zebra striping // Placed here since it has to come after the potential zebra striping
.table-hover { .table-hover {
tbody { tbody {
tr:hover td, tr:hover > td,
tr:hover th { tr:hover > th {
background-color: @tableBackgroundHover; background-color: @tableBackgroundHover;
} }
} }
...@@ -206,32 +213,32 @@ table th[class*="span"], ...@@ -206,32 +213,32 @@ table th[class*="span"],
// Exact selectors below required to override .table-striped // Exact selectors below required to override .table-striped
.table tbody tr { .table tbody tr {
&.success td { &.success > td {
background-color: @successBackground; background-color: @successBackground;
} }
&.error td { &.error > td {
background-color: @errorBackground; background-color: @errorBackground;
} }
&.warning td { &.warning > td {
background-color: @warningBackground; background-color: @warningBackground;
} }
&.info td { &.info > td {
background-color: @infoBackground; background-color: @infoBackground;
} }
} }
// Hover states for .table-hover // Hover states for .table-hover
.table-hover tbody tr { .table-hover tbody tr {
&.success:hover td { &.success:hover > td {
background-color: darken(@successBackground, 5%); background-color: darken(@successBackground, 5%);
} }
&.error:hover td { &.error:hover > td {
background-color: darken(@errorBackground, 5%); background-color: darken(@errorBackground, 5%);
} }
&.warning:hover td { &.warning:hover > td {
background-color: darken(@warningBackground, 5%); background-color: darken(@warningBackground, 5%);
} }
&.info:hover td { &.info:hover > td {
background-color: darken(@infoBackground, 5%); background-color: darken(@infoBackground, 5%);
} }
} }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Buttons &middot; Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 30px;
padding-bottom: 30px;
}
</style>
<link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../../docs/assets/ico/favicon.png">
</head>
<body>
<div class="container">
<h2>Dropups</h2>
<div class="btn-toolbar">
<div class="btn-group dropup">
<button class="btn">Dropup</button>
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group dropup">
<button class="btn btn-primary">Dropup</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group dropup">
<button class="btn btn-danger">Dropup</button>
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group dropup">
<button class="btn btn-warning">Dropup</button>
<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group dropup">
<button class="btn btn-success">Dropup</button>
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group dropup">
<button class="btn btn-info">Dropup</button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group dropup">
<button class="btn btn-inverse">Dropup</button>
<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../docs/assets/js/jquery.js"></script>
<script src="../../docs/assets/js/bootstrap-transition.js"></script>
<script src="../../docs/assets/js/bootstrap-alert.js"></script>
<script src="../../docs/assets/js/bootstrap-modal.js"></script>
<script src="../../docs/assets/js/bootstrap-dropdown.js"></script>
<script src="../../docs/assets/js/bootstrap-scrollspy.js"></script>
<script src="../../docs/assets/js/bootstrap-tab.js"></script>
<script src="../../docs/assets/js/bootstrap-tooltip.js"></script>
<script src="../../docs/assets/js/bootstrap-popover.js"></script>
<script src="../../docs/assets/js/bootstrap-button.js"></script>
<script src="../../docs/assets/js/bootstrap-collapse.js"></script>
<script src="../../docs/assets/js/bootstrap-carousel.js"></script>
<script src="../../docs/assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
/*!
* Bootstrap CSS Tests
*/
/* Remove background image */
body {
background-image: none;
}
/* Space out subhead */
.subhead {
margin-bottom: 36px;
}
/*h4 {
margin-bottom: 5px;
}
*/
.type-test {
margin-bottom: 20px;
padding: 0 20px 20px;
background: url(../../docs/assets/img/grid-baseline-20px.png);
}
.type-test h1,
.type-test h2,
.type-test h3,
.type-test h4,
.type-test h5,
.type-test h6 {
background-color: rgba(255,0,0,.2);
}
/* colgroup tests */
.col1 {
background-color: rgba(255,0,0,.1);
}
.col2 {
background-color: rgba(0,255,0,.1);
}
.col3 {
background-color: rgba(0,0,255,.1);
}
/* Fluid row inputs */
#rowInputs .row > [class*=span],
#fluidRowInputs .row-fluid > [class*=span] {
background-color: rgba(255,0,0,.1);
}
/* Fluid grid */
.fluid-grid {
margin-bottom: 45px;
}
.fluid-grid .row {
height: 40px;
padding-top: 10px;
margin-top: 10px;
color: #ddd;
text-align: center;
}
.fluid-grid .span1 {
background-color: #999;
}
/* Gradients */
[class^="gradient-"] {
width: 100%;
height: 400px;
margin: 20px 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.gradient-horizontal {
background-color: #333333;
background-image: -moz-linear-gradient(left, #555555, #333333);
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#555555), to(#333333));
background-image: -webkit-linear-gradient(left, #555555, #333333);
background-image: -o-linear-gradient(left, #555555, #333333);
background-image: linear-gradient(to right, #555555, #333333);
background-repeat: repeat-x;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff333333', GradientType=1);
}
.gradient-vertical {
background-color: #474747;
background-image: -moz-linear-gradient(top, #555555, #333333);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#333333));
background-image: -webkit-linear-gradient(top, #555555, #333333);
background-image: -o-linear-gradient(top, #555555, #333333);
background-image: linear-gradient(to bottom, #555555, #333333);
background-repeat: repeat-x;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff333333', GradientType=0);
}
.gradient-directional {
background-color: #333333;
background-image: -moz-linear-gradient(45deg, #555555, #333333);
background-image: -webkit-linear-gradient(45deg, #555555, #333333);
background-image: -o-linear-gradient(45deg, #555555, #333333);
background-image: linear-gradient(45deg, #555555, #333333);
background-repeat: repeat-x;
}
.gradient-vertical-three {
background-color: #8940a5;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#00b3ee), color-stop(50%, #7a43b6), to(#c3325f));
background-image: -webkit-linear-gradient(#00b3ee, #7a43b6 50%, #c3325f);
background-image: -moz-linear-gradient(top, #00b3ee, #7a43b6 50%, #c3325f);
background-image: -o-linear-gradient(#00b3ee, #7a43b6 50%, #c3325f);
background-image: linear-gradient(#00b3ee, #7a43b6 50%, #c3325f);
background-repeat: no-repeat;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff00b3ee', endColorstr='#ffc3325f', GradientType=0);
}
.gradient-radial {
background-color: #333333;
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(#555555), to(#333333));
background-image: -webkit-radial-gradient(circle, #555555, #333333);
background-image: -moz-radial-gradient(circle, #555555, #333333);
background-image: -o-radial-gradient(circle, #555555, #333333);
background-repeat: no-repeat;
}
.gradient-striped {
background-color: #555555;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment