diff --git a/wagtail/wagtailadmin/__init__.py b/wagtail/wagtailadmin/__init__.py new file mode 100644 index 000000000..e69de29bb diff --git a/wagtail/wagtailadmin/edit_handlers.py b/wagtail/wagtailadmin/edit_handlers.py new file mode 100644 index 000000000..cdcae4110 --- /dev/null +++ b/wagtail/wagtailadmin/edit_handlers.py @@ -0,0 +1,639 @@ +from django.template.loader import render_to_string +from django.template.defaultfilters import addslashes +from django.utils.safestring import mark_safe +from django import forms +from django.db import models +from django.forms.models import fields_for_model +from django.contrib.contenttypes.models import ContentType +from django.core.exceptions import ObjectDoesNotExist, ImproperlyConfigured, ValidationError +from django.core.urlresolvers import reverse + +import copy + +from wagtail.wagtailcore.models import Page +from wagtail.wagtailcore.util import camelcase_to_underscore +from wagtail.wagtailcore.fields import RichTextArea +from cluster.forms import ClusterForm, ClusterFormMetaclass +from taggit.forms import TagWidget + +import re +import datetime + + +class FriendlyDateInput(forms.DateInput): + """ + A custom DateInput widget that formats dates as "05 Oct 2013" + and adds class="friendly_date" to be picked up by jquery datepicker. + """ + def __init__(self, attrs=None): + default_attrs = {'class': 'friendly_date'} + if attrs: + default_attrs.update(attrs) + + super(FriendlyDateInput, self).__init__(attrs=default_attrs, format='%d %b %Y') + + +class FriendlyTimeInput(forms.TimeInput): + """ + A custom TimeInput widget that formats dates as "5.30pm" + and adds class="friendly_time" to be picked up by jquery timepicker. + """ + def __init__(self, attrs=None): + default_attrs = {'class': 'friendly_time'} + if attrs: + default_attrs.update(attrs) + + super(FriendlyTimeInput, self).__init__(attrs=default_attrs, format='%I.%M%p') + + +class FriendlyTimeField(forms.CharField): + def to_python(self, time_string): + # Check if the string is blank + if not time_string: + return None + + # Look for time in the string + expr = re.compile("^(?P\d+)(?:(?:.|:)(?P\d+))?(?Pam|pm)") + match = expr.match(time_string.lower()) + if match: + # Pull out values from string + hour_string, minute_string, am_pm = match.groups() + + # Convert hours and minutes to integers + hour = int(hour_string) + if minute_string: + minute = int(minute_string) + else: + minute = 0 + + # Create python time + if am_pm == "pm" and hour < 12: + hour += 12 + + if am_pm == "am" and hour >= 12: + hour -= 12 + + return datetime.time(hour=hour, minute=minute) + else: + raise ValidationError("Please type a valid time") + + +FORM_FIELD_OVERRIDES = { + models.DateField: {'widget': FriendlyDateInput}, + models.TimeField: {'widget': FriendlyTimeInput, 'form_class': FriendlyTimeField}, +} + +WIDGET_JS = { + FriendlyDateInput: (lambda id: "initDateChooser(fixPrefix('%s'));" % id), + FriendlyTimeInput: (lambda id: "initTimeChooser(fixPrefix('%s'));" % id), + RichTextArea: (lambda id: "makeRichTextEditable(fixPrefix('%s'));" % id), + TagWidget: ( + lambda id: "initTagField(fixPrefix('%s'), '%s');" % ( + id, addslashes(reverse('wagtailadmin_tag_autocomplete')) + ) + ), +} + + +# Callback to allow us to override the default form fields provided for each model field. +def formfield_for_dbfield(db_field, **kwargs): + # snarfed from django/contrib/admin/options.py + + # If we've got overrides for the formfield defined, use 'em. **kwargs + # passed to formfield_for_dbfield override the defaults. + for klass in db_field.__class__.mro(): + if klass in FORM_FIELD_OVERRIDES: + kwargs = dict(copy.deepcopy(FORM_FIELD_OVERRIDES[klass]), **kwargs) + return db_field.formfield(**kwargs) + + # For any other type of field, just call its formfield() method. + return db_field.formfield(**kwargs) + + +class VerdantAdminModelFormMetaclass(ClusterFormMetaclass): + # Override the behaviour of the regular ModelForm metaclass - + # which handles the translation of model fields to form fields - + # to use our own formfield_for_dbfield function to do that translation. + # This is done by sneaking a formfield_callback property into the class + # being defined (unless the class already provides a formfield_callback + # of its own). + + # while we're at it, we'll also set extra_form_count to 0, as we're creating + # extra forms in JS + extra_form_count = 0 + + def __new__(cls, name, bases, attrs): + if 'formfield_callback' not in attrs or attrs['formfield_callback'] is None: + attrs['formfield_callback'] = formfield_for_dbfield + + new_class = super(VerdantAdminModelFormMetaclass, cls).__new__(cls, name, bases, attrs) + return new_class + +VerdantAdminModelForm = VerdantAdminModelFormMetaclass('VerdantAdminModelForm', (ClusterForm,), {}) + +# Now, any model forms built off VerdantAdminModelForm instead of ModelForm should pick up +# the nice form fields defined in FORM_FIELD_OVERRIDES. + + +def get_form_for_model(model, fields=None, exclude=None, formsets=None, exclude_formsets=None, + widgets=None): + + # django's modelform_factory with a bit of custom behaviour + # (dealing with Treebeard's tree-related fields that really should have + # been editable=False) + attrs = {'model': model} + + if fields is not None: + attrs['fields'] = fields + + if exclude is not None: + attrs['exclude'] = exclude + if issubclass(model, Page): + attrs['exclude'] = attrs.get('exclude', []) + ['content_type', 'path', 'depth', 'numchild'] + + if widgets is not None: + attrs['widgets'] = widgets + + if formsets is not None: + attrs['formsets'] = formsets + + if exclude_formsets is not None: + attrs['exclude_formsets'] = exclude_formsets + + # Give this new form class a reasonable name. + class_name = model.__name__ + str('Form') + form_class_attrs = { + 'Meta': type('Meta', (object,), attrs) + } + + return VerdantAdminModelFormMetaclass(class_name, (VerdantAdminModelForm,), form_class_attrs) + + +def extract_panel_definitions_from_model_class(model, exclude=None): + if hasattr(model, 'panels'): + return model.panels + + panels = [] + + _exclude = [] + if exclude: + _exclude.extend(exclude) + if issubclass(model, Page): + _exclude = ['content_type', 'path', 'depth', 'numchild'] + + fields = fields_for_model(model, exclude=_exclude, formfield_callback=formfield_for_dbfield) + + for field_name, field in fields.items(): + try: + panel_class = field.widget.get_panel() + except AttributeError: + panel_class = FieldPanel + + panel = panel_class(field_name) + panels.append(panel) + + return panels + + +class EditHandler(object): + """ + Abstract class providing sensible default behaviours for objects implementing + the EditHandler API + """ + + # return list of widget overrides that this EditHandler wants to be in place + # on the form it receives + @classmethod + def widget_overrides(cls): + return {} + + # return list of formset names that this EditHandler requires to be present + # as children of the ClusterForm + @classmethod + def required_formsets(cls): + return [] + + # the top-level edit handler is responsible for providing a form class that can produce forms + # acceptable to the edit handler + _form_class = None + @classmethod + def get_form_class(cls, model): + if cls._form_class is None: + cls._form_class = get_form_for_model(model, + formsets=cls.required_formsets(), widgets=cls.widget_overrides()) + return cls._form_class + + def __init__(self, instance=None, form=None): + if not instance: + raise ValueError("EditHandler did not receive an instance object") + self.instance = instance + + if not form: + raise ValueError("EditHandler did not receive a form object") + self.form = form + + + # Heading / help text to display to the user + heading = "" + help_text = "" + + def object_classnames(self): + """ + Additional classnames to add to the
  • when rendering this + within an ObjectList + """ + return "" + + def field_classnames(self): + """ + Additional classnames to add to the
  • when rendering this within a +
      + """ + return "" + + + def field_type(self): + """ + The kind of field it is e.g boolean_field. Useful for better semantic markup of field display based on type + """ + return "" + + def render_as_object(self): + """ + Render this object as it should appear within an ObjectList. Should not + include the

      heading or help text - ObjectList will supply those + """ + # by default, assume that the subclass provides a catch-all render() method + return self.render() + + def render_as_field(self): + """ + Render this object as it should appear within a
        list item + """ + # by default, assume that the subclass provides a catch-all render() method + return self.render() + + def render_js(self): + """ + Render a snippet of Javascript code to be executed when this object's rendered + HTML is inserted into the DOM. (This won't necessarily happen on page load...) + """ + return "" + + def rendered_fields(self): + """ + return a list of the fields of the passed form which are rendered by this + EditHandler. + """ + return [] + + def render_missing_fields(self): + """ + Helper function: render all of the fields of the form that are not accounted for + in rendered_fields + """ + rendered_fields = self.rendered_fields() + missing_fields_html = [ + unicode(self.form[field_name]) + for field_name in self.form.fields + if field_name not in rendered_fields + ] + + return mark_safe(u''.join(missing_fields_html)) + + def render_form_content(self): + """ + Render this as an 'object', along with any unaccounted-for fields to make this + a valid submittable form + """ + return mark_safe(self.render_as_object() + self.render_missing_fields()) + + +class BaseCompositeEditHandler(EditHandler): + """ + Abstract class for EditHandlers that manage a set of sub-EditHandlers. + Concrete subclasses must attach a 'children' property + """ + _widget_overrides = None + @classmethod + def widget_overrides(cls): + if cls._widget_overrides is None: + # build a collated version of all its children's widget lists + widgets = {} + for handler_class in cls.children: + widgets.update(handler_class.widget_overrides()) + cls._widget_overrides = widgets + + return cls._widget_overrides + + _required_formsets = None + @classmethod + def required_formsets(cls): + if cls._required_formsets is None: + formsets = [] + for handler_class in cls.children: + formsets.extend(handler_class.required_formsets()) + cls._required_formsets = formsets + + return cls._required_formsets + + def __init__(self, instance=None, form=None): + super(BaseCompositeEditHandler, self).__init__(instance=instance, form=form) + + self.children = [ + handler_class(instance=self.instance, form=self.form) + for handler_class in self.__class__.children + ] + + def render(self): + return mark_safe(render_to_string(self.template, { + 'self': self + })) + + def render_js(self): + return mark_safe(u'\n'.join([handler.render_js() for handler in self.children])) + + def rendered_fields(self): + result = [] + for handler in self.children: + result += handler.rendered_fields() + + return result + +class BaseTabbedInterface(BaseCompositeEditHandler): + template = "wagtailadmin/edit_handlers/tabbed_interface.html" + +def TabbedInterface(children): + return type('_TabbedInterface', (BaseTabbedInterface,), {'children': children}) + + +class BaseObjectList(BaseCompositeEditHandler): + template = "wagtailadmin/edit_handlers/object_list.html" + +def ObjectList(children, heading=""): + return type('_ObjectList', (BaseObjectList,), { + 'children': children, + 'heading': heading, + }) + + +class BaseMultiFieldPanel(BaseCompositeEditHandler): + template = "wagtailadmin/edit_handlers/multi_field_panel.html" + +def MultiFieldPanel(children, heading=""): + return type('_MultiFieldPanel', (BaseMultiFieldPanel,), { + 'children': children, + 'heading': heading, + }) + + +class BaseFieldPanel(EditHandler): + def __init__(self, instance=None, form=None): + super(BaseFieldPanel, self).__init__(instance=instance, form=form) + self.bound_field = self.form[self.field_name] + + self.heading = self.bound_field.label + self.help_text = self.bound_field.help_text + + def object_classnames(self): + try: + return "single-field " + self.classname + except (AttributeError, TypeError): + return "single-field" + + def field_type(self): + return camelcase_to_underscore(self.bound_field.field.__class__.__name__) + + def field_classnames(self): + classname = self.field_type() + if self.bound_field.field.required: + classname += " required" + if self.bound_field.errors: + classname += " error" + + return classname + + object_template = "wagtailadmin/edit_handlers/field_panel_object.html" + def render_as_object(self): + return mark_safe(render_to_string(self.object_template, { + 'self': self, + 'field_content': self.render_as_field(show_help_text=False), + })) + + def render_js(self): + try: + # see if there's an entry for this widget type in WIDGET_JS + js_func = WIDGET_JS[self.bound_field.field.widget.__class__] + except KeyError: + return '' + + return mark_safe(js_func(self.bound_field.id_for_label)) + + + field_template = "wagtailadmin/edit_handlers/field_panel_field.html" + def render_as_field(self, show_help_text=True): + return mark_safe(render_to_string(self.field_template, { + 'field': self.bound_field, + 'field_type': self.field_type(), + 'show_help_text': show_help_text, + })) + + def rendered_fields(self): + return [self.field_name] + +def FieldPanel(field_name, classname=None): + return type('_FieldPanel', (BaseFieldPanel,), { + 'field_name': field_name, + 'classname': classname, + }) + + +class BaseRichTextFieldPanel(BaseFieldPanel): + def render_js(self): + return mark_safe("makeRichTextEditable(fixPrefix('%s'));" % self.bound_field.id_for_label) + +def RichTextFieldPanel(field_name): + return type('_RichTextFieldPanel', (BaseRichTextFieldPanel,), { + 'field_name': field_name, + }) + + +class BaseChooserPanel(BaseFieldPanel): + """ + Abstract superclass for panels that provide a modal interface for choosing (or creating) + a database object such as an image, resulting in an ID that is used to populate + a hidden foreign key input. + + Subclasses provide: + * field_template + * object_type_name - something like 'image' which will be used as the var name + for the object instance in the field_template + * js_function_name - a JS function responsible for the modal workflow; this receives + the ID of the hidden field as a parameter, and should ultimately populate that field + with the appropriate object ID. If the function requires any other parameters, the + subclass will need to override render_js instead. + """ + @classmethod + def widget_overrides(cls): + return {cls.field_name: forms.HiddenInput} + + def get_chosen_item(self): + try: + return getattr(self.instance, self.field_name) + except ObjectDoesNotExist: + # if the ForeignKey is null=False, Django decides to raise + # a DoesNotExist exception here, rather than returning None + # like every other unpopulated field type. Yay consistency! + return None + + def render_as_field(self, show_help_text=True): + instance_obj = self.get_chosen_item() + return mark_safe(render_to_string(self.field_template, { + 'field': self.bound_field, + self.object_type_name: instance_obj, + 'is_chosen': bool(instance_obj), + 'show_help_text': show_help_text, + })) + + def render_js(self): + return mark_safe("%s(fixPrefix('%s'));" % (self.js_function_name, self.bound_field.id_for_label)) + +class BasePageChooserPanel(BaseChooserPanel): + field_template = "wagtailadmin/edit_handlers/page_chooser_panel.html" + object_type_name = "page" + + _target_content_type = None + @classmethod + def target_content_type(cls): + if cls._target_content_type is None: + if cls.page_type: + if isinstance(cls.page_type, basestring): + # translate the passed model name into an actual model class + from django.db.models import get_model + try: + app_label, model_name = cls.page_type.split('.') + except ValueError: + raise ImproperlyConfigured("The page_type passed to PageChooserPanel must be of the form 'app_label.model_name'") + + page_type = get_model(app_label, model_name) + if page_type is None: + raise ImproperlyConfigured("PageChooserPanel refers to model '%s' that has not been installed" % cls.page_type) + else: + page_type = cls.page_type + + cls._target_content_type = ContentType.objects.get_for_model(page_type) + else: + # TODO: infer the content type by introspection on the foreign key + cls._target_content_type = ContentType.objects.get_by_natural_key('wagtailcore', 'page') + + return cls._target_content_type + + def render_js(self): + page = getattr(self.instance, self.field_name) + parent = page.get_parent() if page else None + content_type = self.__class__.target_content_type() + + return mark_safe("createPageChooser(fixPrefix('%s'), '%s.%s', %s);" % ( + self.bound_field.id_for_label, + content_type.app_label, + content_type.model, + (parent.id if parent else 'null'), + )) + +def PageChooserPanel(field_name, page_type=None): + return type('_PageChooserPanel', (BasePageChooserPanel,), { + 'field_name': field_name, + 'page_type': page_type, + }) + + +class BaseInlinePanel(EditHandler): + @classmethod + def get_panel_definitions(cls): + # Look for a panels definition in the InlinePanel declaration + if cls.panels is not None: + return cls.panels + # Failing that, get it from the model + else: + return extract_panel_definitions_from_model_class(cls.related.model, exclude=[cls.related.field.name]) + + _child_edit_handler_class = None + @classmethod + def get_child_edit_handler_class(cls): + if cls._child_edit_handler_class is None: + panels = cls.get_panel_definitions() + cls._child_edit_handler_class = MultiFieldPanel(panels, heading=cls.heading) + + return cls._child_edit_handler_class + + @classmethod + def required_formsets(cls): + return [cls.relation_name] + + @classmethod + def widget_overrides(cls): + overrides = cls.get_child_edit_handler_class().widget_overrides() + if overrides: + return {cls.relation_name: overrides} + else: + return {} + + + def __init__(self, instance=None, form=None): + super(BaseInlinePanel, self).__init__(instance=instance, form=form) + + self.formset = form.formsets[self.__class__.relation_name] + + child_edit_handler_class = self.__class__.get_child_edit_handler_class() + self.children = [] + for subform in self.formset.forms: + # override the DELETE field to have a hidden input + subform.fields['DELETE'].widget = forms.HiddenInput() + + # ditto for the ORDER field, if present + if self.formset.can_order: + subform.fields['ORDER'].widget = forms.HiddenInput() + + self.children.append( + child_edit_handler_class(instance=subform.instance, form=subform) + ) + + empty_form = self.formset.empty_form + empty_form.fields['DELETE'].widget = forms.HiddenInput() + if self.formset.can_order: + empty_form.fields['ORDER'].widget = forms.HiddenInput() + + self.empty_child = child_edit_handler_class(instance=empty_form.instance, form=empty_form) + + template = "wagtailadmin/edit_handlers/inline_panel.html" + def render(self): + return mark_safe(render_to_string(self.template, { + 'self': self, + 'can_order': self.formset.can_order, + })) + + js_template = "wagtailadmin/edit_handlers/inline_panel.js" + def render_js(self): + return mark_safe(render_to_string(self.js_template, { + 'self': self, + 'can_order': self.formset.can_order, + })) + +def InlinePanel(base_model, relation_name, panels=None, label='', help_text=''): + rel = getattr(base_model, relation_name).related + return type('_InlinePanel', (BaseInlinePanel,), { + 'relation_name': relation_name, + 'related': rel, + 'panels': panels, + 'heading': label, + 'help_text': help_text, # TODO: can we pick this out of the foreign key definition as an alternative? (with a bit of help from the inlineformset object, as we do for label/heading) + }) + + +# Now that we've defined EditHandlers, we can set up wagtailcore.Page to have some. +Page.content_panels = [ + FieldPanel('title'), + FieldPanel('slug'), +] +Page.promote_panels = [ +] diff --git a/wagtail/wagtailadmin/forms.py b/wagtail/wagtailadmin/forms.py new file mode 100644 index 000000000..9073e57c1 --- /dev/null +++ b/wagtail/wagtailadmin/forms.py @@ -0,0 +1,30 @@ +from django import forms +from django.contrib.auth.forms import AuthenticationForm + +class SearchForm(forms.Form): + q = forms.CharField(label="Search term") + + +class ExternalLinkChooserForm(forms.Form): + url = forms.URLField(required=True) + +class ExternalLinkChooserWithLinkTextForm(forms.Form): + url = forms.URLField(required=True) + link_text = forms.CharField(required=True) + +class EmailLinkChooserForm(forms.Form): + email_address = forms.EmailField(required=True) + +class EmailLinkChooserWithLinkTextForm(forms.Form): + email_address = forms.EmailField(required=True) + link_text = forms.CharField(required=False) + + +class LoginForm(AuthenticationForm): + username = forms.CharField( + max_length=254, + widget=forms.TextInput(attrs={'placeholder': "Enter your username"}), + ) + password = forms.CharField( + widget=forms.PasswordInput(attrs={'placeholder': "Enter password"}), + ) diff --git a/wagtail/wagtailadmin/hooks.py b/wagtail/wagtailadmin/hooks.py new file mode 100644 index 000000000..2dd2cd686 --- /dev/null +++ b/wagtail/wagtailadmin/hooks.py @@ -0,0 +1,31 @@ +from django.conf import settings +from django.utils.importlib import import_module + +_hooks = {} + +# TODO: support 'register' as a decorator: +# @hooks.register('construct_main_menu') +# def construct_main_menu(menu_items): +# ... + +def register(hook_name, fn): + if hook_name not in _hooks: + _hooks[hook_name] = [] + _hooks[hook_name].append(fn) + +_searched_for_hooks = False +def search_for_hooks(): + global _searched_for_hooks + if not _searched_for_hooks: + for app_module in settings.INSTALLED_APPS: + try: + import_module('%s.verdant_hooks' % app_module) + except ImportError: + continue + + _searched_for_hooks = True + + +def get_hooks(hook_name): + search_for_hooks() + return _hooks.get(hook_name, []) diff --git a/wagtail/wagtailadmin/menu.py b/wagtail/wagtailadmin/menu.py new file mode 100644 index 000000000..23b787567 --- /dev/null +++ b/wagtail/wagtailadmin/menu.py @@ -0,0 +1,14 @@ +from django.utils.text import slugify +from django.utils.html import format_html + +class MenuItem(object): + def __init__(self, label, url, name=None, classnames='', order=1000): + self.label = label + self.url = url + self.classnames = classnames + self.name = (name or slugify(unicode(label))) + self.order = order + + def render_html(self): + return format_html(u"""
      • {3}
        • """, + self.name, self.url, self.classnames, self.label) diff --git a/wagtail/wagtailadmin/modal_workflow.py b/wagtail/wagtailadmin/modal_workflow.py new file mode 100644 index 000000000..fabb5a38e --- /dev/null +++ b/wagtail/wagtailadmin/modal_workflow.py @@ -0,0 +1,25 @@ +from django.http import HttpResponse +from django.template import RequestContext +from django.template.loader import render_to_string + +import json + +def render_modal_workflow(request, html_template, js_template, template_vars={}): + """" + Render a response consisting of an HTML chunk and a JS onload chunk + in the format required by the modal-workflow framework. + """ + response_keyvars = [] + context = RequestContext(request) + + if html_template: + html = render_to_string(html_template, template_vars, context) + response_keyvars.append("'html': %s" % json.dumps(html)) + + if js_template: + js = render_to_string(js_template, template_vars, context) + response_keyvars.append("'onload': %s" % js) + + response_text = "{%s}" % ','.join(response_keyvars) + + return HttpResponse(response_text, mimetype="text/javascript") diff --git a/wagtail/wagtailadmin/models.py b/wagtail/wagtailadmin/models.py new file mode 100644 index 000000000..71a836239 --- /dev/null +++ b/wagtail/wagtailadmin/models.py @@ -0,0 +1,3 @@ +from django.db import models + +# Create your models here. diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/dropdowns.less b/wagtail/wagtailadmin/static/wagtailadmin/css/components/dropdowns.less new file mode 100644 index 000000000..08ee663f0 --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/components/dropdowns.less @@ -0,0 +1,223 @@ +.dropdown{ + position:relative; + .clearfix(); + + .dropdown-toggle{ + cursor:pointer; + } + + ul{ + .unlist(); + background-color:@color-teal; + position:absolute; + overflow:hidden; + top:100%; + left:-2000px; + z-index:500; + opacity:0; + + li{ + float:none; + border-top:1px solid rgba(255,255,255,0.2); + } + li:first-child{ + border-top:0; + } + + a{ + box-sizing:border-box; + white-space: nowrap; + position:relative; + text-decoration:none; + text-transform:uppercase; + display:block; + color:white; + padding:1em; + font-weight:normal; + + &:hover{ + background-color:@color-teal-darker; + } + &.icon{ + padding-right:5em; + + &:before, + &:after{ + right:1em; + } + } + &.shortcut{ + padding-right:7em; + } + } + + a, input[type=submit], input[type=reset], input[type=button], .button, button{ + font-size:0.95em; + -webkit-font-smoothing: auto; + } + + label{ + padding:1.3em; + } + + .kbd{ + position:absolute; + right:1em; + font-weight:600; + font-size:0.8em; + color:rgba(0,0,0,0.3); + } + + } + + &.open ul{ + .box-shadow(0px 3px 3px 0 rgba(0,0,0,0.2)); + opacity:1; + left:0; + display:block; + } + + &.match-width ul{ + width:100%; + min-width:110px; + + li{ + white-space: nowrap; + } + } + + + &.dropup ul{ + .box-shadow(0px -3px 3px 0 rgba(0,0,0,0.2)); + top:auto; + bottom:100%; + } + + input[type=button], input[type=submit], button{ + padding:1em 0; + .border-radius(0); + display:block; + width:100%; + text-align:left; + padding-left:1em; + } + + .button{ + float:left; + + &:hover{ + background-color:@color-teal-darker; + } + } + + & > .button + .dropdown-toggle{ + border-left:1px solid rgba(255,255,255,0.2); + position:absolute; + right:0; + height:100%; + padding:0 0.5em; + text-align:center; + + &:before{ + width:1em; + } + + &:hover{ + background-color:@color-teal-darker; + } + } + &.open > .button + .dropdown-toggle{ + background-color:@color-teal-darker; + } +} + +.dropdown.white{ + ul{ + background-color:white; + + li{ + border-top:1px solid rgba(0,0,0,0.1); + } + + a{ + color:@color-grey-2; + + &:hover{ + background-color:@color-grey-3; + } + } + } +} + +h2 .dropdown{ + display:inline-block; + font-size:0.7em; + margin-right:0.5em; + vertical-align:middle; + + .dropdown-toggle{ + padding:0.5em 0; + border-right:1px solid @color-grey-3; + + /* icon */ + &:before{ + opacity:0.5; + padding:0.2em; + height:1.1em; + text-align:left; + } + &:hover{ + background-color:@color-teal; + border-color:transparent; + } + } + &.open{ + .dropdown-toggle{ + background-color:@color-teal; + } + + ul{ + left:auto; + } + } + + .dropdown-toggle:hover{ + background-color:@color-grey-3; + &:before{ + color:white; + opacity:1; + } + } + &.open .dropdown-toggle:before{ + background-color:@color-teal; + color:white; + opacity:1; + } + + +} + +footer .actions .dropdown-toggle{ + text-transform:uppercase; + background-color:@color-teal; + line-height:3em; + color:white; + padding-left:1em; + padding-right:1em; + + &:before, + &:after{ + right:1em !important; + } +} + +footer .actions .dropdown ul li{ + border-bottom:1px solid rgba(255,255,255,0.2); + border-top:0; +} + + +/* Transitions */ +.dropdown ul{ + .transition(opacity 0.2s linear); +} \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/explorer.less b/wagtail/wagtailadmin/static/wagtailadmin/css/components/explorer.less new file mode 100644 index 000000000..b82109a5a --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/components/explorer.less @@ -0,0 +1,924 @@ +/* +min z-index: 500; +max z-index: unknown; +*/ + + +@explorer-z-index:500; + +.explorer { + pointer-events:none; + width: 100%; + position: relative; + top:0; + left:0; + display:none; + -webkit-perspective: 1000px; + -moz-perspective: 1000px; + perspective: 1000px; + -webkit-perspective-origin: 50% 200%; + -moz-perspective-origin: 50% 200%; + perspective-origin: 50% 200%; + ul { + background: @color-grey-1; + padding: 0; + margin:0; + list-style: none; + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + transform-style: preserve-3d; + } + + li { + position: relative; + border-top:1px solid @color-grey-1-1; + + &:first-child{ + border-top:0; + } + } + + a { + text-decoration:none; + padding:0.9em; + color:white; + display: block; + position: relative; + outline: none; + white-space: nowrap; + text-overflow:ellipsis; + overflow:hidden; + + &:before{ + opacity:0.5; + left:1em; + + } + + &:hover{ + background:@color-teal; + color:white; + } + } + + .has-children a{ + padding-right:5em; + } + + + .children{ + position:absolute; + z-index:@explorer-z-index + 1; + right:0; + top:0; + width:4em; + text-align:center; + height:100%; + color:white; + background-color:@color-grey-1; + cursor:pointer; + border-left:1px solid rgba(255,255,255,0.2); + + &:before{ + padding:0.55em 0; + } + + &:hover{ + background:@color-teal + } + } + .dl-subviewopen > .children, + .dl-subview > .children{ + display:none; + } + + /*.no-touch .explorer li a:hover { + background: rgba(255,248,213,0.1); + }*/ + + li.dl-back a { + /* .icon.arrow-left;*/ + + } + + li.dl-back:after { + + } + + li > a:after { + + } + + .dl-menu { + position: relative; + width: 100%; + opacity: 0; + pointer-events: none; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + backface-visibility: hidden; + + &.dl-menuopen { + opacity: 1; + pointer-events: auto; + } + } + + /* Hide the inner submenus */ + li .dl-submenu { + display: none; + } + + /* + When a submenu is openend, we will hide all li siblings. + For that we give a class to the parent menu called "dl-subview". + We also hide the submenu link. + The opened submenu will get the class "dl-subviewopen". + All this is done for any sub-level being entered. + */ + .dl-menu.dl-subview li, + .dl-menu.dl-subview li.dl-subviewopen > a, + .dl-menu.dl-subview li.dl-subview > a { + display: none; + } + + .dl-menu.dl-subview li.dl-subview, + .dl-menu.dl-subview li.dl-subview .dl-submenu, + .dl-menu.dl-subview li.dl-subviewopen, + .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu, + .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li { + display: block; + } + + /* Dynamically added submenu outside of the menu context */ + > .dl-submenu { + position: absolute; + width: 100%; + top: 0px; + left: 0; + } +} + + +/* Animation classes for moving out and in */ + +.dl-menu.dl-animate-out-1 { + -webkit-animation: MenuAnimOut1 0.4s; + -moz-animation: MenuAnimOut1 0.4s; + animation: MenuAnimOut1 0.4s; +} + +.dl-menu.dl-animate-out-2 { + -webkit-animation: MenuAnimOut2 0.3s ease-in-out; + -moz-animation: MenuAnimOut2 0.3s ease-in-out; + animation: MenuAnimOut2 0.3s ease-in-out; +} + +.dl-menu.dl-animate-out-3 { + -webkit-animation: MenuAnimOut3 0.4s ease; + -moz-animation: MenuAnimOut3 0.4s ease; + animation: MenuAnimOut3 0.4s ease; +} + +.dl-menu.dl-animate-out-4 { + -webkit-animation: MenuAnimOut4 0.4s ease; + -moz-animation: MenuAnimOut4 0.4s ease; + animation: MenuAnimOut4 0.4s ease; +} + +.dl-menu.dl-animate-out-5 { + -webkit-animation: MenuAnimOut5 0.4s ease; + -moz-animation: MenuAnimOut5 0.4s ease; + animation: MenuAnimOut5 0.4s ease; +} + +@-webkit-keyframes MenuAnimOut1 { + 50% { + -webkit-transform: translateZ(-250px) rotateY(30deg); + } + 75% { + -webkit-transform: translateZ(-372.5px) rotateY(15deg); + opacity: .5; + } + 100% { + -webkit-transform: translateZ(-500px) rotateY(0deg); + opacity: 0; + } +} + +@-webkit-keyframes MenuAnimOut2 { + 100% { + -webkit-transform: translateX(-100%); + opacity: 0; + } +} + +@-webkit-keyframes MenuAnimOut3 { + 100% { + -webkit-transform: translateZ(300px); + opacity: 0; + } +} + +@-webkit-keyframes MenuAnimOut4 { + 100% { + -webkit-transform: translateZ(-300px); + opacity: 0; + } +} + +@-webkit-keyframes MenuAnimOut5 { + 100% { + -webkit-transform: translateY(40%); + opacity: 0; + } +} + +@-moz-keyframes MenuAnimOut1 { + 50% { + -moz-transform: translateZ(-250px) rotateY(30deg); + } + 75% { + -moz-transform: translateZ(-372.5px) rotateY(15deg); + opacity: .5; + } + 100% { + -moz-transform: translateZ(-500px) rotateY(0deg); + opacity: 0; + } +} + +@-moz-keyframes MenuAnimOut2 { + 100% { + -moz-transform: translateX(-100%); + opacity: 0; + } +} + +@-moz-keyframes MenuAnimOut3 { + 100% { + -moz-transform: translateZ(300px); + opacity: 0; + } +} + +@-moz-keyframes MenuAnimOut4 { + 100% { + -moz-transform: translateZ(-300px); + opacity: 0; + } +} + +@-moz-keyframes MenuAnimOut5 { + 100% { + -moz-transform: translateY(40%); + opacity: 0; + } +} + +@keyframes MenuAnimOut1 { + 50% { + transform: translateZ(-250px) rotateY(30deg); + } + 75% { + transform: translateZ(-372.5px) rotateY(15deg); + opacity: .5; + } + 100% { + transform: translateZ(-500px) rotateY(0deg); + opacity: 0; + } +} + +@keyframes MenuAnimOut2 { + 100% { + transform: translateX(-100%); + opacity: 0; + } +} + +@keyframes MenuAnimOut3 { + 100% { + transform: translateZ(300px); + opacity: 0; + } +} + +@keyframes MenuAnimOut4 { + 100% { + transform: translateZ(-300px); + opacity: 0; + } +} + +@keyframes MenuAnimOut5 { + 100% { + transform: translateY(40%); + opacity: 0; + } +} + +.dl-menu.dl-animate-in-1 { + -webkit-animation: MenuAnimIn1 0.3s; + -moz-animation: MenuAnimIn1 0.3s; + animation: MenuAnimIn1 0.3s; +} + +.dl-menu.dl-animate-in-2 { + -webkit-animation: MenuAnimIn2 0.3s ease-in-out; + -moz-animation: MenuAnimIn2 0.3s ease-in-out; + animation: MenuAnimIn2 0.3s ease-in-out; +} + +.dl-menu.dl-animate-in-3 { + -webkit-animation: MenuAnimIn3 0.4s ease; + -moz-animation: MenuAnimIn3 0.4s ease; + animation: MenuAnimIn3 0.4s ease; +} + +.dl-menu.dl-animate-in-4 { + -webkit-animation: MenuAnimIn4 0.4s ease; + -moz-animation: MenuAnimIn4 0.4s ease; + animation: MenuAnimIn4 0.4s ease; +} + +.dl-menu.dl-animate-in-5 { + -webkit-animation: MenuAnimIn5 0.4s ease; + -moz-animation: MenuAnimIn5 0.4s ease; + animation: MenuAnimIn5 0.4s ease; +} + +@-webkit-keyframes MenuAnimIn1 { + 0% { + -webkit-transform: translateZ(-500px) rotateY(0deg); + opacity: 0; + } + 20% { + -webkit-transform: translateZ(-250px) rotateY(30deg); + opacity: 0.5; + } + 100% { + -webkit-transform: translateZ(0px) rotateY(0deg); + opacity: 1; + } +} + +@-webkit-keyframes MenuAnimIn2 { + 0% { + -webkit-transform: translateX(-100%); + opacity: 0; + } + 100% { + -webkit-transform: translateX(0px); + opacity: 1; + } +} + +@-webkit-keyframes MenuAnimIn3 { + 0% { + -webkit-transform: translateZ(300px); + opacity: 0; + } + 100% { + -webkit-transform: translateZ(0px); + opacity: 1; + } +} + +@-webkit-keyframes MenuAnimIn4 { + 0% { + -webkit-transform: translateZ(-300px); + opacity: 0; + } + 100% { + -webkit-transform: translateZ(0px); + opacity: 1; + } +} + +@-webkit-keyframes MenuAnimIn5 { + 0% { + -webkit-transform: translateY(40%); + opacity: 0; + } + 100% { + -webkit-transform: translateY(0); + opacity: 1; + } +} + +@-moz-keyframes MenuAnimIn1 { + 0% { + -moz-transform: translateZ(-500px) rotateY(0deg); + opacity: 0; + } + 20% { + -moz-transform: translateZ(-250px) rotateY(30deg); + opacity: 0.5; + } + 100% { + -moz-transform: translateZ(0px) rotateY(0deg); + opacity: 1; + } +} + +@-moz-keyframes MenuAnimIn2 { + 0% { + -moz-transform: translateX(-100%); + opacity: 0; + } + 100% { + -moz-transform: translateX(0px); + opacity: 1; + } +} + +@-moz-keyframes MenuAnimIn3 { + 0% { + -moz-transform: translateZ(300px); + opacity: 0; + } + 100% { + -moz-transform: translateZ(0px); + opacity: 1; + } +} + +@-moz-keyframes MenuAnimIn4 { + 0% { + -moz-transform: translateZ(-300px); + opacity: 0; + } + 100% { + -moz-transform: translateZ(0px); + opacity: 1; + } +} + +@-moz-keyframes MenuAnimIn5 { + 0% { + -moz-transform: translateY(40%); + opacity: 0; + } + 100% { + -moz-transform: translateY(0); + opacity: 1; + } +} + +@keyframes MenuAnimIn1 { + 0% { + transform: translateZ(-500px) rotateY(0deg); + opacity: 0; + } + 20% { + transform: translateZ(-250px) rotateY(30deg); + opacity: 0.5; + } + 100% { + transform: translateZ(0px) rotateY(0deg); + opacity: 1; + } +} + +@keyframes MenuAnimIn2 { + 0% { + transform: translateX(-100%); + opacity: 0; + } + 100% { + transform: translateX(0px); + opacity: 1; + } +} + +@keyframes MenuAnimIn3 { + 0% { + transform: translateZ(300px); + opacity: 0; + } + 100% { + transform: translateZ(0px); + opacity: 1; + } +} + +@keyframes MenuAnimIn4 { + 0% { + transform: translateZ(-300px); + opacity: 0; + } + 100% { + transform: translateZ(0px); + opacity: 1; + } +} + +@keyframes MenuAnimIn5 { + 0% { + transform: translateY(40%); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } +} + +.explorer > .dl-submenu.dl-animate-in-1 { + -webkit-animation: SubMenuAnimIn1 0.4s ease; + -moz-animation: SubMenuAnimIn1 0.4s ease; + animation: SubMenuAnimIn1 0.4s ease; +} + +.explorer > .dl-submenu.dl-animate-in-2 { + -webkit-animation: SubMenuAnimIn2 0.3s ease-in-out; + -moz-animation: SubMenuAnimIn2 0.3s ease-in-out; + animation: SubMenuAnimIn2 0.3s ease-in-out; +} + +.explorer > .dl-submenu.dl-animate-in-3 { + -webkit-animation: SubMenuAnimIn3 0.4s ease; + -moz-animation: SubMenuAnimIn3 0.4s ease; + animation: SubMenuAnimIn3 0.4s ease; +} + +.explorer > .dl-submenu.dl-animate-in-4 { + -webkit-animation: SubMenuAnimIn4 0.4s ease; + -moz-animation: SubMenuAnimIn4 0.4s ease; + animation: SubMenuAnimIn4 0.4s ease; +} + +.explorer > .dl-submenu.dl-animate-in-5 { + -webkit-animation: SubMenuAnimIn5 0.4s ease; + -moz-animation: SubMenuAnimIn5 0.4s ease; + animation: SubMenuAnimIn5 0.4s ease; +} + +@-webkit-keyframes SubMenuAnimIn1 { + 0% { + -webkit-transform: translateX(50%); + opacity: 0; + } + 100% { + -webkit-transform: translateX(0px); + opacity: 1; + } +} + +@-webkit-keyframes SubMenuAnimIn2 { + 0% { + -webkit-transform: translateX(100%); + opacity: 0; + } + 100% { + -webkit-transform: translateX(0px); + opacity: 1; + } +} + +@-webkit-keyframes SubMenuAnimIn3 { + 0% { + -webkit-transform: translateZ(-300px); + opacity: 0; + } + 100% { + -webkit-transform: translateZ(0px); + opacity: 1; + } +} + +@-webkit-keyframes SubMenuAnimIn4 { + 0% { + -webkit-transform: translateZ(300px); + opacity: 0; + } + 100% { + -webkit-transform: translateZ(0px); + opacity: 1; + } +} + +@-webkit-keyframes SubMenuAnimIn5 { + 0% { + -webkit-transform: translateZ(-200px); + opacity: 0; + } + 100% { + -webkit-transform: translateZ(0); + opacity: 1; + } +} + +@-moz-keyframes SubMenuAnimIn1 { + 0% { + -moz-transform: translateX(50%); + opacity: 0; + } + 100% { + -moz-transform: translateX(0px); + opacity: 1; + } +} + +@-moz-keyframes SubMenuAnimIn2 { + 0% { + -moz-transform: translateX(100%); + opacity: 0; + } + 100% { + -moz-transform: translateX(0px); + opacity: 1; + } +} + +@-moz-keyframes SubMenuAnimIn3 { + 0% { + -moz-transform: translateZ(-300px); + opacity: 0; + } + 100% { + -moz-transform: translateZ(0px); + opacity: 1; + } +} + +@-moz-keyframes SubMenuAnimIn4 { + 0% { + -moz-transform: translateZ(300px); + opacity: 0; + } + 100% { + -moz-transform: translateZ(0px); + opacity: 1; + } +} + +@-moz-keyframes SubMenuAnimIn5 { + 0% { + -moz-transform: translateZ(-200px); + opacity: 0; + } + 100% { + -moz-transform: translateZ(0); + opacity: 1; + } +} + +@keyframes SubMenuAnimIn1 { + 0% { + transform: translateX(50%); + opacity: 0; + } + 100% { + transform: translateX(0px); + opacity: 1; + } +} + +@keyframes SubMenuAnimIn2 { + 0% { + transform: translateX(100%); + opacity: 0; + } + 100% { + transform: translateX(0px); + opacity: 1; + } +} + +@keyframes SubMenuAnimIn3 { + 0% { + transform: translateZ(-300px); + opacity: 0; + } + 100% { + transform: translateZ(0px); + opacity: 1; + } +} + +@keyframes SubMenuAnimIn4 { + 0% { + transform: translateZ(300px); + opacity: 0; + } + 100% { + transform: translateZ(0px); + opacity: 1; + } +} + +@keyframes SubMenuAnimIn5 { + 0% { + transform: translateZ(-200px); + opacity: 0; + } + 100% { + transform: translateZ(0); + opacity: 1; + } +} + +.explorer > .dl-submenu.dl-animate-out-1 { + -webkit-animation: SubMenuAnimOut1 0.4s ease; + -moz-animation: SubMenuAnimOut1 0.4s ease; + animation: SubMenuAnimOut1 0.4s ease; +} + +.explorer > .dl-submenu.dl-animate-out-2 { + -webkit-animation: SubMenuAnimOut2 0.3s ease-in-out; + -moz-animation: SubMenuAnimOut2 0.3s ease-in-out; + animation: SubMenuAnimOut2 0.3s ease-in-out; +} + +.explorer > .dl-submenu.dl-animate-out-3 { + -webkit-animation: SubMenuAnimOut3 0.4s ease; + -moz-animation: SubMenuAnimOut3 0.4s ease; + animation: SubMenuAnimOut3 0.4s ease; +} + +.explorer > .dl-submenu.dl-animate-out-4 { + -webkit-animation: SubMenuAnimOut4 0.4s ease; + -moz-animation: SubMenuAnimOut4 0.4s ease; + animation: SubMenuAnimOut4 0.4s ease; +} + +.explorer > .dl-submenu.dl-animate-out-5 { + -webkit-animation: SubMenuAnimOut5 0.4s ease; + -moz-animation: SubMenuAnimOut5 0.4s ease; + animation: SubMenuAnimOut5 0.4s ease; +} + +@-webkit-keyframes SubMenuAnimOut1 { + 0% { + -webkit-transform: translateX(0%); + opacity: 1; + } + 100% { + -webkit-transform: translateX(50%); + opacity: 0; + } +} + +@-webkit-keyframes SubMenuAnimOut2 { + 0% { + -webkit-transform: translateX(0%); + opacity: 1; + } + 100% { + -webkit-transform: translateX(100%); + opacity: 0; + } +} + +@-webkit-keyframes SubMenuAnimOut3 { + 0% { + -webkit-transform: translateZ(0px); + opacity: 1; + } + 100% { + -webkit-transform: translateZ(-300px); + opacity: 0; + } +} + +@-webkit-keyframes SubMenuAnimOut4 { + 0% { + -webkit-transform: translateZ(0px); + opacity: 1; + } + 100% { + -webkit-transform: translateZ(300px); + opacity: 0; + } +} + +@-webkit-keyframes SubMenuAnimOut5 { + 0% { + -webkit-transform: translateZ(0); + opacity: 1; + } + 100% { + -webkit-transform: translateZ(-200px); + opacity: 0; + } +} + +@-moz-keyframes SubMenuAnimOut1 { + 0% { + -moz-transform: translateX(0%); + opacity: 1; + } + 100% { + -moz-transform: translateX(50%); + opacity: 0; + } +} + +@-moz-keyframes SubMenuAnimOut2 { + 0% { + -moz-transform: translateX(0%); + opacity: 1; + } + 100% { + -moz-transform: translateX(100%); + opacity: 0; + } +} + +@-moz-keyframes SubMenuAnimOut3 { + 0% { + -moz-transform: translateZ(0px); + opacity: 1; + } + 100% { + -moz-transform: translateZ(-300px); + opacity: 0; + } +} + +@-moz-keyframes SubMenuAnimOut4 { + 0% { + -moz-transform: translateZ(0px); + opacity: 1; + } + 100% { + -moz-transform: translateZ(300px); + opacity: 0; + } +} + +@-moz-keyframes SubMenuAnimOut5 { + 0% { + -moz-transform: translateZ(0); + opacity: 1; + } + 100% { + -moz-transform: translateZ(-200px); + opacity: 0; + } +} + +@keyframes SubMenuAnimOut1 { + 0% { + transform: translateX(0%); + opacity: 1; + } + 100% { + transform: translateX(50%); + opacity: 0; + } +} + +@keyframes SubMenuAnimOut2 { + 0% { + transform: translateX(0%); + opacity: 1; + } + 100% { + transform: translateX(100%); + opacity: 0; + } +} + +@keyframes SubMenuAnimOut3 { + 0% { + transform: translateZ(0px); + opacity: 1; + } + 100% { + transform: translateZ(-300px); + opacity: 0; + } +} + +@keyframes SubMenuAnimOut4 { + 0% { + transform: translateZ(0px); + opacity: 1; + } + 100% { + transform: translateZ(300px); + opacity: 0; + } +} + +@keyframes SubMenuAnimOut5 { + 0% { + transform: translateZ(0); + opacity: 1; + } + 100% { + transform: translateZ(-200px); + opacity: 0; + } +} + +/* Transitions */ +.children{ + .transition(all 0.2s linear); +} +.dl-menu.dl-menu-toggle { + .transition(all 0.3s ease); +} \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/formatters.less b/wagtail/wagtailadmin/static/wagtailadmin/css/components/formatters.less new file mode 100644 index 000000000..45407c89b --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/components/formatters.less @@ -0,0 +1,136 @@ +.avatar{ + .border-radius(100%); + position:relative; + display:inline-block; + width:50px; + height:50px; + + &:before{ + .border-radius(100%); + color:@color-grey-3; + border: 2px solid @color-grey-3; + text-align:center; + display:block; + width:42px; + height:42px; + margin:2px 0 0 2px; + line-height:42px; + position:absolute; + z-index:1; + left:0; + } + a{ + position:absolute; + z-index:2; + left:0; + display:block; + width:100%; + height:50px; + } + img{ + .border-radius(100%); + } + &:hover{ + &:before{ + color:@color-teal; + border-color:@color-teal; + } + } +} + +.media-placeholder { + width: 600px; + height: 400px; + background-color: #CCC; + padding: 5px; + h3, p { + margin: 0; + } + img { + max-width: 350px; + max-height: 350px; + margin: 20px; + } +} + +/* Displays "timesince" formatted date with full date on hover */ +.human-readable-date{ + overflow:hidden; + display:block; + position:relative; + + &:before{ + position:absolute; + display:none; + content:attr(title); + } + + &:hover{ + visibility:hidden; + + &:before{ + visibility:visible; + display:block; + } + } +} + +/* makes a link look like regular text */ +.nolink{ + color:@color-text-base; +} + +/* Status tags */ +.status-tag{ + text-align:center; + display:inline-block; + .border-radius(2px); + text-transform:uppercase; + padding:0em 0.5em; + border:1px solid @color-grey-3; + color:@color-grey-3; + -webkit-font-smoothing: auto; + font-size:0.80em; + margin:0 0.5em; + + &.primary{ + color:@color-grey-2; + border:1px solid @color-grey-2; + } +} + +/* tags */ +.tag{ + background-color:@color-teal; + padding-right:0.5em; + padding:0.2em 0.5em; + color:white; + line-height:2em; + white-space: nowrap; + .border-radius(2px); + + + &:before{ + font-family:verdant; + display:inline-block; + color:white; + content:"u"; + padding-right:0.5em; + } + a&:hover{ + background-color:@color-teal-darker; + color:white; + } + + .taglist &{ + margin-right:0.8em; + } +} +.taglist { + font-size:0.9em; + line-height:2.4em; + h3{ + display:inline; + margin-right:1em; + } +} \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/forms.less b/wagtail/wagtailadmin/static/wagtailadmin/css/components/forms.less new file mode 100644 index 000000000..a3572371c --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/components/forms.less @@ -0,0 +1,626 @@ +form { + ul, li{ + list-style-type:none; + } + ul{ + margin:0; + padding:0; + } + li{ + .row(); + } +} + +fieldset{ + border:0; + padding:2em 0; + margin:0; + /* position:relative; See if we can get away without this */ +} + + + +legend{ + .visuallyhidden(); +} + +.fields li{ + padding-top:0.5em; + padding-bottom:0.5em; +} + +.field{ + padding:0 0 0.5em 0; +} + +label{ + font-weight:normal; + display:block; + padding:0 0 0.5em 0; + line-height:1em; + + .checkbox &, + .radio &{ + display:inline; + } +} + +input, textarea, select, .richtext, .tagit{ + .border-radius(6px); + .border-box(); + font-family:Open Sans,Arial,sans-serif; + width:100%; + border:1px dashed @color-input-border; + padding:1.2em; + background-color:white; + -webkit-appearance: none; + color:@color-text-input; + font-size:1.1em; + outline:none; + + &:hover{ + background-color:@color-fieldset-hover; + } + &:focus{ + border-color: darken(@color-input-focus, 40%); + outline:none; + background-color:@color-input-focus; + } +} + +.full .richtext{ + border:0; +} + +input[type=radio],input[type=checkbox]{ + .border-radius(0); + cursor:pointer; + float:left; + border:0; +} + +input[type=radio]{ + -webkit-appearance: radio; + width:auto; + position:relative; + margin-right:15px; +} + +input[type=radio]:before{ + .border-radius(100%); + font-family: verdant; + font-style: normal; + text-align:center; + position:absolute; + top:-5px; + left:-2px; + cursor:pointer; + display:block; + content:"K"; + width: 1em; + line-height: 1.1em; + padding: 4px; + background-color: white; + color:@color-grey-4; + border: 1px solid @color-grey-4; +} +input[type=radio]:checked:before{ + content:"K"; + color:@color-teal; +} + +input[type=checkbox]{ + -webkit-appearance: checkbox; + width:auto; + position:relative; + margin-right:15px; +} + +input[type=checkbox]:before{ + font-family: verdant; + font-style: normal; + text-align:center; + position:absolute; + top:-5px; + cursor:pointer; + display:block; + content:"x"; + line-height:20px; + width:20px; + height:20px; + background-color:white; + border:1px solid @color-grey-4; + color:#EEE; +} +input[type=checkbox]:checked:before{ + color:@color-teal; +} + +input[type=submit], input[type=reset], input[type=button], .button, button{ + .border-radius(2px); + width:auto; + padding:0.6em 1.2em; + border:none; + background-color: @color-button; + color:white; + text-decoration:none; + text-transform:uppercase; + font-size:1em; + white-space: nowrap; + position:relative; + -webkit-font-smoothing: auto; + vertical-align: middle; + line-height:1em; + display:inline-block; + + &.icon:before{ + font-size:1.5em; + } + &.icon.text-replace:before{ + font-size:auto; + } + + &.button-small{ + font-size:0.85em; + padding:1em 1.8em; + } + + &.button-secondary{ + border:1px solid @color-button; + color:@color-button; + background-color:transparent; + } + + &:hover{ + background-color: @color-button-hover; + color:white; + border-color:transparent; + } + + &.yes{ + background-color: @color-button-yes; + + &.button-secondary{ + border:1px solid @color-button-yes; + color:@color-button-yes; + background-color:transparent; + } + &:hover{ + color:white; + border-color:transparent; + background-color: @color-button-yes-hover; + } + } + &.no, &.serious{ + background-color: @color-button-no; + + &.button-secondary{ + border:1px solid @color-button-no; + color:@color-button-no; + background-color:transparent; + } + &:hover{ + color:white; + border-color:transparent; + background-color: @color-button-no-hover; + } + } + + /* special consideration for buttons with icons in them, to make them smaller */ + &.icon{ + padding:1em 2.4em; + padding:0.6em 1.2em; + } + + + input[type=submit], + + input[type=reset], + + input[type=button], + + .button, + + button{ + margin-left:1em; + } +} + +/* multiple-item forms where groups of fields can be added */ +.multiple { + + + > li{ + position:relative; + border-bottom: 1px solid @color-input-border; + + &:first-child fieldset{ + padding-top:0; + } + } + + /* styles applied to an element as it is being reordered */ + &.moving{ + position:relative; + } + li.moving{ + position:absolute; + width:100%; + } + + /* Object controls */ + .controls{ + position:absolute; + right:0; + top:2em; + text-transform:uppercase; + color:@color-grey-2; + -webkit-border-radius: 3px; + border-radius: 3px; + overflow:hidden; + line-height:0em; + + li{ + background-color: @color-grey-4; + display:inline-block; + cursor:pointer; + } + .icon{ + padding:0.3em; + } + .icon:before{ + vertical-align:middle; + line-height:2em; + } + .icon:hover{ + background-color:@color-teal; + + &:before{ + color:white; + } + } + .disabled{ + display:none; + } + } + > li:first-child .controls{ + top:0; + } +} + +/* wrapper around add button for mutliple objects */ +p.add{ + font-weight:700; + cursor:pointer; + margin-top:0; + margin-bottom:0; + padding-top:2.5em; + padding-bottom:2em; +} + +/* Other text */ +.help, .error-message{ + font-size:0.85em; + font-weight:normal; + margin:0 0 0.5em 0; +} +.help{ + color:@color-grey-2; + opacity:0; +} + +/* permanently show checkbox/radio help as they have no focus state */ +.boolean_field .help, .radio .help{ + opacity:1; +} + + +fieldset:hover > .help, +.field.focused + .help, +.field:focus + .help, +.field:hover + .help, +li.focused > .help{ + opacity:1; +} + +.required label:after{ + content:"*"; + color:@color-red; + font-weight:bold; + display:inline-block; + margin-left:0.5em; + line-height:1em; + font-size:13px; +} + +.error-message{ + margin:0; + color:@color-red; + clear:both; +} +.error input[type=text], .error input[type=email], .error input[type=tel], .error textarea, .error select, .error .tagit{ + border-color:@color-red; + background-color:@color-input-error-bg; +} + +/* field sizing */ +.field{ + &.col1, + &.col2, + &.col3, + &.col4, + &.col5, + &.col6, + &.col7, + &.col8, + &.col9, + &.col10, + &.col11, + &.col12{clear:both;} +} + +li.inline .field{ + &.col1, + &.col2, + &.col3, + &.col4, + &.col5, + &.col6, + &.col7, + &.col8, + &.col9, + &.col10, + &.col11, + &.col12{clear:none;} +} + +/* solve gutter issues of inline fields */ +ul.inline li:first-child, li.inline:first-child{ + margin-left:-@grid-gutter-width / 2; +} + + +/* TODO this chooser style has been made more generic based on two identical methods for choosing pages and images that were previously included in their own less files in each app directory (and since deleted). It would be best if an admin "theme" provided all the design for a UI in a single place, but should that be a series of overrides to the css provided from an app? If so, perhaps those two previous less files should be re-instated and then overriden here? hmm. */ + +.chooser { + /* We show the 'chosen' state...*/ + .clearfix(); + + input[type=text]{ + float:left; + width:50%; + margin-right:1em; + } + .chosen { + display: block; + } + .unchosen, .chosen{ + position:relative; + padding-left:@thumbnail-width+15; + + &:before{ + font-family:verdant; + content:""; + position:absolute; + top:0; + left:0; + margin-top:auto; + margin-bottom:auto; + display:inline-block; + opacity:0.1; + font-size:7.5em; + line-height:1em; + } + &:hover:before{ + opacity:0.2; + } + } + .unchosen { + display: none; + } + + /* ...unless the .page-chooser has the 'blank' class set */ + &.blank { + .chosen { display: none; } + .unchosen { display: block; } + } + + input[type=button]{ + font-size:0.85em; + padding:0.9em 1.4em; + } +} + +/* standard way of doing a chooser where the chosen object's title is overlayed */ +.page-chooser, +.snippet-chooser, +.document-chooser { + .unchosen, .chosen{ + height:100px; + + &:before{ + content:"c"; + left:0.2em; + } + } + .chosen{ + &:before{ + content:"b"; + } + .title{ + z-index:0; + float: left; + margin-left: -146px; + width: 126px; + max-height: 40px; + overflow: hidden; + font-size: 0.7em; + padding: 30px 10px 0px 10px; + display: block; + top: 0px; + position: absolute; + line-height: 1.4em; + text-align: center; + color: black; + white-space:nowrap; + text-overflow:ellipsis; + } + &:hover .title{ + } + } +} + +.snippet-chooser { + .unchosen:before, + .chosen:before{ + content:"D"; + } +} + +.document-chooser { + .unchosen, .chosen{ + height:100px; + + &:before{ + content:"h"; + left:0.2em; + } + } + .chosen:before{ + content:"r"; + } +} + +.image-chooser { + .unchosen, .chosen{ + .clearfix; + min-height:95px; + + &:before{ + content:"o"; + font-size:120px; + line-height:97px; + } + } + .chosen{ + &:before{ + content:""; + } + .preview-image{ + float:left; + margin-left:-(@thumbnail-width)-15; + } + } +} + +/* Tags */ + +.tagit{ + padding:0.6saem 1.2em; + + .tagit-choice{ + border:0; + } + + ul& input[type="text"]{ + padding: 0.2em 0.5em !important; /* having to use important, FML*/ + } + ul& li.tagit-choice-editable{ + padding:0 23px 0 0 !important; /* having to use important, FML*/ + } +} + +.tagit-close{ + .ui-icon-close{ + margin-left:1em; + text-indent:0; + background:none; + } + + .ui-icon-close:before{ + font-family:verdant; + display:block; + color:@color-grey-3; + content:"g"; + } + .ui-icon-close:hover:before{ + color:@color-red + } +} + + +/* search bars (search integrated into header area) */ +.search-bar{ + margin-top:-2em; + padding-top:1em; + padding-bottom:1em; + margin-bottom:2em; + + &.full-width{ + .nice-padding(); + background-color:@color-header-bg; + border-bottom:1px solid @color-grey-4; + } + + .fields{ + position:relative; + + .field label{ + display:none; + } + .field input{ + padding-left:3em; + } + .field:before{ + position:absolute; + left:0.5em; + top:1em; + font-family:verdant; + content:"f"; + font-size:25px; + color:@color-grey-3; + } + } + .submit{ + display:none; + position:absolute; + right:0; + top:0; + input{ + padding:1.55em 2em; + } + } + .taglist{ + font-size:0.9em; + line-height:2.4em; + h3{ + display:inline; + } + a{ + white-space: nowrap + } + } +} + +/* Transitions */ +fieldset, input, textarea, select{ + .transition(background-color 0.2s ease); +} +input[type=submit], input[type=reset], input[type=button], .button, button{ + .transition(~"background-color 0.2s ease, color 0.2s ease"); +} +.help{ + /* TODO: This transitionmakes the browser go nuts and the left menu jerk around. Find way to solve */ + .transition(opacity 0.2s ease); +} +.chooser { + .unchosen:before, .chosen:before{ + .transition(opacity 0.3s ease); + } +} + +@media screen and (min-width: @breakpoint-mobile){ + input[type=submit], input[type=reset], input[type=button], .button, button{ + font-size:0.95em; + padding:1.3em 2.2em; + + &.icon{ + padding:1em 2.4em; + } + } +} \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/icons.less b/wagtail/wagtailadmin/static/wagtailadmin/css/components/icons.less new file mode 100644 index 000000000..5cdb4439e --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/components/icons.less @@ -0,0 +1,225 @@ +@font-face { + font-family: "verdant"; + src:url("@{css-root}fonts/verdant.eot"); + src:url("@{css-root}fonts/verdant.eot?#iefix") format("embedded-opentype"), + url("@{css-root}fonts/verdant.ttf") format("truetype"), + url("@{css-root}fonts/verdant.svg#verdant") format("svg"), + url("@{css-root}fonts/verdant.woff") format("woff"); + font-weight: normal; + font-style: normal; +} + +.icon.teal{ + color:@color-teal; +} +.icon.white{ + color:white +} + +.icon:before, +.icon:after, +.hallotoolbar [class^="icon-"], +.hallotoolbar [class*=" icon-"]:before, +.hallotoolbar [class^="icon-"]:before{ + font-family: "verdant"; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none !important; + speak: none; + display: inline-block; + text-decoration: none; + width: 1.3em; + line-height: 1em; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + vertical-align: -20%; + font-size:20px; + text-align:left; +} +.icon:after, +.hallotoolbar [class^="icon-"]:after, +.hallotoolbar [class^="icon-"]:after{ + text-align:right; +} + +.hallotoolbar [class^="icon-"], +.hallotoolbar [class*=" icon-"]:before, +.hallotoolbar [class*=" icon-"]:before, +.hallotoolbar [class^="icon-"]:before{ + font-size:1.1em; + vertical-align:-10%; + font-size:1.05em; +} + + +.icon-cogs:before, { + content: "a"; +} +.icon-doc-empty-inverse:before { + content: "b"; +} +.icon-doc-empty:before{ + content: "c"; +} +.icon-edit:before { + content: "d"; +} +.icon-arrow-up:before, +.icon-arrow-up-after:after { + content: "e"; +} +.icon-arrow-down:before, +.icon-arrow-down-after:after { + content: "q"; +} +.icon-search:before { + content: "f"; +} +.icon-cross:before { + content: "g"; +} +.icon-folder-open-1:before { + content: "i"; +} +.icon-folder-inverse:before { + content: "j"; +} +.icon-mail:before { + content: "k"; +} +.icon-arrows-up-down:before { + content: "l"; +} +.icon-locked:before { + content: "m"; +} +.icon-arrow-right:before, +.icon-arrow-right-after:after { + content: "n"; +} +.icon-doc-full:before, +.icon-file-text-alt:before { + content: "h"; +} +.icon-image:before, +.icon-picture:before { + content: "o"; +} +.icon-unlocked:before { + content: "p"; +} + +.icon-doc-full-inverse:before { + content: "r"; +} +.icon-folder:before { + content: "s"; +} +.icon-plus:before { + content: "t"; +} +.icon-tag:before { + content: "u"; +} +.icon-folder-open-inverse:before { + content: "v"; +} +.icon-cog:before { + content: "w"; +} +.icon-tick:before { + content: "x"; +} +.icon-user:before { + content: "y"; +} +.icon-arrow-left:before { + content: "z"; +} +.icon-tick-inverse:before { + content: "A"; +} +.icon-plus-inverse:before { + content: "B"; +} +.icon-snippet:before { + content: "D"; +} +.icon-verdant:before { + content: "V"; +} +.icon-bold:before{ + content:"C"; +} +.icon-italic:before{ + content:"E"; +} +.icon-undo:before{ + content:"H"; +} +.icon-repeat:before{ + content:"I"; +} +.icon-list-ol:before{ + content:"G"; +} +.icon-list-ul:before{ + content:"F"; +} +.icon-link:before{ + content:"J"; +} +.icon-radio-full:before{ + content:"K"; +} +.icon-radio-empty:before{ + content:"L"; +} +.icon-arrow-up-big:before{ + content:"M"; +} +.icon-arrow-down-big:before{ + content:"N"; +} +.icon-group:before{ + content:"O"; +} +.icon-media:before{ + content:"P"; +} +.icon-horizontalrule{ + &:before{ + font-family: Open Sans,Arial,sans-serif !important; // FML + content:"—"; + } +} +.icon-password:before{ + content:"Q"; +} +.icon-download:before{ + content:"S"; +} +.icon-home:before{ + content:"W"; +} +.icon-order:before{ + content:"T"; +} +.icon-grip:before{ + content:"U"; +} + +.icon.text-replace{ + font-size:0em; + line-height:0; + overflow:hidden; + + &:before{ + font-size:1rem; + display:inline-block; + width:100%; + line-height:1.2em; + text-align:center; + } +} \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/listing.less b/wagtail/wagtailadmin/static/wagtailadmin/css/components/listing.less new file mode 100644 index 000000000..370cc2d8b --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/components/listing.less @@ -0,0 +1,446 @@ +/* General listings, like for pages, images or snippets */ +ul.listing{ + .unlist(); +} + +.listing{ + margin-bottom:2em; + ul&{ + border-top:1px dashed @color-input-border; + margin-bottom:2em; + } + ul{ + .unlist(); + } + > li{ + padding:1em 0; + border-bottom:1px dashed @color-input-border; + } + + h3{ + margin:0; + font-size:0.95em; + } + + table&{ + width:100%; + } + + td, th{ + padding:1.5em 1em; + } + + &.small td, th{ + padding:0.6em 1em; + } + + thead{ + color: @color-grey-2; + border-bottom:1px solid @color-grey-4; + + th{ + font-size:0.85em; + text-align:left; + font-weight:normal; + white-space: nowrap; + text-transform:uppercase; + } + th.children{ + border:0; + } + + th a{ + text-decoration:none; + color:inherit; + position:relative; + + &.icon:after{ + opacity:0.5; + right:0; + } + } + + .dropdown{ + padding:0; + } + .dropdown-toggle{ + display:block; + padding:1.5em; + } + .dropdown:hover, + .dropdown.open{ + .box-shadow(0px 0px 3px 0 rgba(0,0,0,0.2)); + background-color:white; + margin-left:-@grid-gutter-width * 2; + } + } + + &.full-width td:first-child, + &.full-width th:first-child{ + .push-padding(@grid-content-indent); + } + + &.full-width{ + margin-bottom:-3em; /* this negates the padding added to the bottom of .content */ + } + &.full-width th{ + background-color:@color-thead-bg; + } + + .table-headers{ + border-bottom:1px solid @color-grey-4 + } + + tbody{ + border-bottom:1px dashed @color-input-border; + } + tbody tr{ + border-top:1px dashed @color-input-border; + &:first-child{ + border-top:1px dashed @color-input-border; + } + + } + &.full-width tbody{ + border:0; + } + &.full-width tbody tr:hover{ + background-color:#FDFDFD; + } + &.chooser tr.can-choose:hover{ + background-color:@color-teal; + color:white; + + a,a:hover{ + color:white; + } + .status-tag{ + border-color:white; + color:white; + } + } + + &.small tbody tr{ + font-size:1em; + } + + + .divider{ + text-transform:uppercase; + font-size:0.8em; + background-color:@color-grey-3; + td{ + + padding-top:0.5em; + padding-bottom:0.5em; + } + } + + &.full-width .divider td{ + .push-padding(@grid-content-indent); + } + + .index { + background-color:@color-header-bg; + .title h2{ + font-size:1.2em; + } + a{ + color:auto; + } + } + + + /* specific columns */ + .bulk{ + padding-right:0; + + label{ + font-size:1em; + display:block; + width:100%; + position:relative; + } + label span{ + .visuallyhidden(); + } + input{ + margin-top:3px; + + } + + } + .title{ + h2{ + text-transform:none; + margin:0; + font-size:1.1em; + font-weight:700; + color:@color-grey-2; + line-height:1.5em; + + a{ + color:inherit; + text-decoration:none; + display: block; + + &:hover{ + color:@color-link; + } + } + } + } + + .actions{ + margin-top:0.5em; + text-transform:uppercase; + font-size:0.85em; + + a{ + text-decoration:none; + } + + li{ + display:inline-block; + padding:0 0.5em; + border-left:1px solid @color-grey-3; + line-height:1em; + + &:first-child{ + border:0; + padding-left:0; + } + &.no-border{ + border:0; + } + } + + .button-small{ + font-size:1em; + padding:0.6em 1.2em; + margin-right:1em; + + &:before{ + font-size:1.7em; + } + } + } + + .moderate-actions form{ + float:left; + margin:0 1em 1em 0; + } + + .children, + .no-children{ + padding:0 !important; + border-left:1px dashed @color-input-border; + &:hover{ + background-color:@color-header-bg; + } + } + .children a, + .no-children a{ + color:@color-grey-3; + display:block; + padding:2em 0; + } + + .children a{ + display:block; + &:before{ + font-size:3rem; + } + } + .no-children a{ + display:block; + &:before{ + font-size:1.5rem; + } + } + &.small .children a:before{ + font-size:30px; + } + + .ord{ + padding-left:10px !important; + } + th.ord a:before{ + width:1em; + font-size:15px; + } + th.ord a:hover:before{ + color:@color-teal; + } + .handle{ + cursor:move; + width:20px; + + &:before{ + font-size:20px; + color:@color-grey-3; + width:1em; + } + &:hover:before{ + color:@color-text-base; + } + } + + .ui-sortable-helper{ + border:1px dashed @color-input-border; + border-width:1px 0; + + + td{ + display:none; + + } + .ord,.title{ + display:table-cell; + } + .ord{ + + } + } + .dropzone{ + height:80px; + background-color:@color-grey-1; + + &:hover{ + background-color:@color-grey-1; + } + td{ + padding: 0 !important; + } + } + + + td.children:hover{ + background-color:@color-teal; + + a:before{ + color:white; + } + } + + table .no-results-message{ + .push-padding(@grid-content-indent); + } + + .inactive h2{ + opacity:0.5; + } +} + + +.pagination{ + text-align:center; + p{ + margin:0; + } + ul{ + .unlist(); + } + ul{ + margin-top:-1.7em; + } + li{ + line-height:1em; + } + .prev{ + float:left; + } + .next{ + float:right; + } +} + +@media screen and (min-width: @breakpoint-mobile){ + .listing{ + &.horiz > li{ + float:left; + } + &.images { + .clearfix(); + border: 1px solid @color-grey-4; + border-width:0 0 0 1px !important; + + > li{ + padding:@grid-gutter-width/2; + width:200px; + height:220px; + text-align:center; + margin-top:-1px; + border:1px solid @color-grey-4; + border-width:1px 1px 1px 0px; + + .image{ + text-align:center; + height:180px; + + &:before { + content: ''; + display: inline-block; + height: 100%; + vertical-align: middle; + margin-right: -0.25em; + } + + img{ + border:3px solid transparent; + display:inline-block; + vertical-align: middle; + } + } + + &:hover{ + background-color:#FDFDFD; + + img{ + border-color:@color-teal; + } + } + } + a{ + color:inherit; + } + + } + .actions{ + visibility: hidden; + } + .index .actions{ + visibility:visible; + } + td:hover .actions{ + visibility:visible; + } + .no-children { + border-color:transparent; + } + .no-children a{ + color:@color-teal; + opacity:0; + } + .no-children:hover{ + border-color:@color-input-border; + a{opacity:1;} + } + } + +} + + +/* Transitions */ +.listing { + thead .dropdown ul{ + .transition(none); + } + .children, .no-children{ + .transition(background-color 0.2s ease); + } + .children a, + .no-children a{ + .transition(all 0.2s ease); + } +} \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/messages.less b/wagtail/wagtailadmin/static/wagtailadmin/css/components/messages.less new file mode 100644 index 000000000..59b5f6189 --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/components/messages.less @@ -0,0 +1,54 @@ +.messages{ + position:relative; + + z-index:5; + + background-color:@color-grey-5; + + ul{ + .unlist(); + margin-left:-15px; + padding-left:10px; + position:relative; + top:-100px; + + &:before{ + content: ""; + height: 0; + width: 0; + display: block; + position: absolute; + bottom: -15px; + left: 0; + border-top: 15px solid #000; + border-left: 15px solid transparent; + } + } + li{ + .nice-padding; + padding-top:1.3em; + padding-bottom:1.3em; + color:white; + } + .error{ + background-color:@color-red; + } + .warning{ + background-color:@color-orange; + } + .success{ + background-color:@color-teal-dark; + } +} +.ready .messages ul{ + .transition-immediate(~"top 0.5s ease, max-height 1.2s ease"); + top:0px; +} +.messages.new ul{ + .transition-immediate(none); + top:-100px; +} +.messages.appear ul{ + .transition-immediate(~"top 0.5s ease, max-height 1.2s ease"); + top:0; +} \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/modals.less b/wagtail/wagtailadmin/static/wagtailadmin/css/components/modals.less new file mode 100644 index 000000000..ddba2803b --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/components/modals.less @@ -0,0 +1,96 @@ +@zindex-modal-background: 500; + +// Kill the scroll on the body +.modal-open { + overflow: hidden; + + .content-wrapper{ + -webkit-transform:none; + transform:none; + } +} + +// Container that the modal scrolls within +.modal { + .border-box(); + display: none; + overflow: auto; + overflow-y: scroll; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: @zindex-modal-background; +} + +// Shell div to position the modal with bottom padding +.modal-dialog { + .border-box(); + margin-left: auto; + margin-right: auto; + width: auto; + padding: 0px; + z-index: (@zindex-modal-background + 10); + height:90%; + width:85%; + + &:before{ + content: ''; + display: inline-block; + height: 100%; + vertical-align: middle; + margin-right: -0.25em; + } +} + +// Actual modal +.modal-content { + .border-box(); + .border-radius(3px); + width:99.70%; + position: relative; + background-color: white; + outline: none; + margin-top:2em; + padding-bottom:3em; + display:inline-block; + vertical-align: middle; + overflow:hidden; +} + +// Modal background +.modal-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: (@zindex-modal-background - 10); + background-color: black; + // Fade for backdrop + &.fade { opacity:0; } + &.in { opacity:0.7; } +} + +.modal .close{ + padding:0; + position:absolute; + width:50px; + height:50px; + top:10px; + right:10px; + z-index:1; +} + +// Where all modal content resides +.modal-body { + position: relative; + padding-bottom:2em; +} + +@media screen and (min-width: @breakpoint-mobile) { + .modal-dialog { + padding:0px 0 2em @menu-width; + } +} \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/tabs.less b/wagtail/wagtailadmin/static/wagtailadmin/css/components/tabs.less new file mode 100644 index 000000000..83dda6dbf --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/components/tabs.less @@ -0,0 +1,76 @@ +.tab-nav{ + .clearfix(); + border:1px solid @color-grey-4; + border-width:0 0 1px 1px; + padding:0; + + li{ + border:1px solid @color-grey-4; + border-width:1px 1px 0px 1px; + text-align:center; + } + a{ + outline:none; + line-height:3em; + text-transform:uppercase; + font-weight:700; + font-size:1.2em; + text-decoration:none; + background-color:@color-grey-5; + display:block; + padding:0 1em; + color:@color-grey-2; + border-top:0.3em solid @color-grey-3; + border-bottom:1px solid transparent; + + &:hover{ + color:inherit; + border-top-color:@color-grey-3; + } + + &.active{ + background-color:white; + .box-shadow(none); + color:@color-grey-1; + border-top:0.3em solid @color-grey-1; + border-bottom:2px solid white; + margin-bottom:-1px; + z-index:1; + position:relative; + } + } + + /* For cases where tab-nav should merge with header */ + &.merged{ + background-color:@color-header-bg; + margin-top:0; + } +} +.tab-content{ + section{ + display:none; + padding-top:1em; + + &.active{ + display:block; + } + } +} + + + +@media screen and (min-width: @breakpoint-mobile){ + .tab-nav li{ + .column(2); + padding:0; + } + + .modal-content .tab-nav li{ + .column(2); + padding:0; + min-width:110px; + } + .modal-content .tab-nav li{ + min-width:0; + } +} \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/core.less b/wagtail/wagtailadmin/static/wagtailadmin/css/core.less new file mode 100644 index 000000000..2043f951f --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/core.less @@ -0,0 +1,727 @@ +/* +min z-index: 1; +max z-index: 5; +*/ + +@import "variables.less"; +@import "mixins.less"; +@import "grid.less"; + +@import "components/explorer.less"; +@import "components/icons.less"; +@import "components/tabs.less"; +@import "components/dropdowns.less"; +@import "components/modals.less"; +@import "components/forms.less"; +@import "components/listing.less"; +@import "components/messages.less"; +@import "components/formatters.less"; + +html{ + background-color:@color-header-bg; +} + +body{ + -webkit-font-smoothing: antialiased; /* Do not remove! */ + font-family:Open Sans,Arial,sans-serif; + font-size:80%; + line-height:1.5em; + color:@color-text-base; + overflow-x: hidden; + position: relative; + + &.reordering{ + overflow:visible; + } +} + +h1,h2,h3,h4,h5,h6{ + font-weight:normal; + -webkit-font-smoothing: auto; +} + +h1{ + line-height:1.3em; + font-size:1.5em; + text-transform:uppercase; + color:@color-grey-2; + font-weight:700; + + span{ + text-transform:none; + font-weight:300; + } + + .homepage &{ + text-transform:none; + } +} +h2{ + text-transform:uppercase; + font-size:1.3em; + font-family:Open Sans; + font-weight:600; + color:@color-grey-2; + + .page-explorer &{ + text-transform:none; + } +} +a{ + color:@color-link; + text-decoration:none; + + &:hover{ + color:@color-link-hover; + } +} + +code{ + .box-shadow(inset 0px 0px 4px 0px rgba(0, 0, 0, 0.2)); + background-color:@color-fieldset-hover; + padding:2px 5px; +} + +kbd{ + .border-radius(3px); + font-family:Open Sans, Arial, sans-serif; + border:1px solid @color-grey-2; + border-color:rgba(0,0,0,0.2); + padding:0.3em 0.5em; +} + +img{ + max-width:100%; + height:auto; +} + +.browsermessage{ + background-color:@color-red; + color:white; + padding:1em 2em; + margin:0; + position:relative; + left:0; + top:0; + right:0; + + a{ + color:white; + text-decoration:underline; + } +} + +.wrapper{ + .clearfix(); +} + +.nav-wrapper{ + .box-shadow(inset -2px 0px 10px 0px rgba(0, 0, 0, 0.5)); + position:relative; + background: @color-grey-1; + margin-left: -100%; + width: 80%; + float: left; + height:100%; + min-height:800px; +} + .logo{ + display:block; + margin:2em auto; + text-align:center; + text-decoration:none; + color:white; + opacity:0.4; + + em{ + font-family: verdant; + font-style: normal; + font-size:7.7em; + line-height:1em; + } + span{ + display:none; + } + &:hover{ + opacity:1; + } + } + + #nav-toggle{ + .push(0.65); + .box-shadow(0px 0px 10px 5px rgba(255, 255, 255, 0.5)); + cursor:pointer; + position:fixed; + background: @color-grey-1; + width:40px; + opacity:0.8; + + &:before{ + font-size:30px; + color:white; + line-height:40px; + } + } + + .nav-main{ + position:absolute; + top: 150px; + bottom: 0px; + overflow: auto; + width:100%; + + ul, li{ + margin:0; + padding:0; + list-style-type:none; + } + + ul{ + border-top:1px solid @color-grey-1-1; + } + + li{ + border-bottom:1px solid @color-grey-1-1; + position:relative; + + &.selected{ + background-color:@color-grey-1; + } + + .menu-snippets &.menu-snippets, + .menu-users &.menu-users, + .menu-snippets &.menu-snippets, + .menu-documents &.menu-documents, + .menu-images &.menu-images, + .menu-search &.menu-search, + .menu-explorer &.menu-explorer{ + background:#222; + + &:after{ + content: " "; + width: 0px; + height: 0px; + display: block; + position: absolute; + right: 0; + top: 0.9em; + border: 0.7em solid #fff; + border-color: transparent #fff transparent transparent; + } + } + } + + a { + -webkit-font-smoothing: auto; + text-decoration:none; + text-transform:uppercase; + display: block; + color: #AAA; + padding: 0.9em 1.2em; + position:relative; + font-size:0.9em; + font-weight:400; + white-space:nowrap; + + &:before{ + margin-right:0.3em; + } + &:hover{ + color:white; + } + } + + .more > a{ + &:before{ + margin-right:0.4em; + } + font-size:0.8em; + padding:0.2em 1.2em; + background-color:@color-grey-1-1; + } + .more{ + border:0; + } + + .avatar{ + display:none; + } + + /* search form */ + #menu-search{ + position:relative; + .fields{ + .transition(background-color 0.2s ease); + background-color:@color-grey-1; + border:0; + li{ + border:0; + } + } + .field{ + padding:0; + color: #AAA; + + &:before{ + position:absolute; + left:0.75em; + top:0.45em; + } + } + .submit{ + .visuallyhidden(); + } + label{ + -webkit-font-smoothing: auto; + line-height:inherit; + text-transform:uppercase; + padding: 0.9em 1.2em 0.9em 3.5em; + } + input{ + float:left; + margin-top:-1000px; + text-transform:uppercase; + font-size:1em; + padding: 0.9em 1.2em 0.9em 3.5em; + border:0; + border-radius:0; + background-color:transparent; + line-height:inherit; + } + + &:hover{ + .field, input{ + color:white; + } + } + + &.focussed{ + label{ + display:none; + } + .fields{ + background-color:@color-grey-4; + } + .field{ + color: @color-grey-1; + } + input{ + margin-top:0px; + color:@color-grey-1; + } + } + } + } + + .js .nav-main .more ul{ + display:none; + } + + .explorer{ + position:absolute; + margin-top:150px; /* same as .nav-main */ + } + +.content-wrapper{ + width:100%; + float: right; + position: relative; + background-color:white; + border-bottom:1px solid @color-grey-4; + transform: translate3d(0,0,0); + -webkit-transform: translate3d(0,0,0); +} + .content{ + .row(); + border-top:40px solid @color-grey-5; /* this top border provides space for the floating logo to toggle the menu */ + padding-bottom:3em; + } + +body.nav-open .nav-wrapper{ + margin-left:0; +} + +body.nav-open .content-wrapper{ + transform: translate3d(80%,0,0); + -webkit-transform: translate3d(80%,0,0); + + position:fixed; +} + +body.nav-open #nav-toggle{ + left:80%; + &:before{ + content:"z"; + } +} + +body.explorer-open .explorer{ + display:block; + border-top:1px solid rgba(200,200,200,0.1); + + &:before{ + position:absolute; + top:-3em; + content:"Close explorer"; + padding:0.9em; + } +} + +body.explorer-open .nav-main{ + display:none; +} + +header{ + .nice-padding(); + padding-top:2em; + padding-bottom:1em; + background-color: @color-grey-5; + border-bottom:1px solid @color-grey-4; + margin-bottom:2em; + + h1, h2{ + margin:0; + } + + .left{ + float:left; + } + .right{ + float:right; + text-align:right; + } + + /* For case where content below header should merge with it */ + &.merged{ + margin-bottom:0; + } + &.tab-merged, &.no-border{ + border:0; + } + &.merged.no-border{ + padding-bottom:0; + } +} + +.page-explorer header{ + margin-bottom:0; + padding-bottom:1em; +} + + +footer{ + .row(); + background: @color-grey-1; + background: rgba(0,0,0,0.7); + position:fixed; + bottom:0; + height:3.4em; + padding:0.3em; + width:90%; + margin:0 5%; + color:white; + + ul{ + .unlist(); + } + li{ + float:left; + } + + .actions{ + width:250px; + margin-right:@grid-gutter-width/2; + + .button{ + padding-top:1em; + padding-bottom:1em; + } + } + + .meta{ + float:right; + text-align:right; + padding-right:@grid-gutter-width/2; + line-height:3.5em; + font-size:0.85em; + + span{ + margin-right:@grid-gutter-width; + } + + } +} + +::-webkit-scrollbar { + height: 10px; + width: 10px; + background: @color-grey-1; +} +::-webkit-scrollbar-thumb { + background: @color-grey-2; + -webkit-border-radius: 1ex; +} +::-webkit-scrollbar-corner { + background: @color-grey-1; +} + + +/* Z-indexes */ +#nav-toggle{ + z-index:5; +} +.nav-wrapper{ + z-index:2; +} +.content-wrapper{ + z-index:3; +} +footer, .logo{ + z-index:1; +} + +.breadcrumb{ + .unlist(); + .clearfix(); + + font-size:0.85em; + margin-top:1em !important; + + li { + display: block; + float: left; + background: @color-grey-3; + padding: 0.5em 1em 0.5em 2em; + position: relative; + margin: 0 4px 4px 0; + text-decoration: none; + color: #fff; + line-height:1em; + white-space: nowrap; + max-width:30em; + line-height:1.5em; + + a{ + color:@color-grey-2; + display:block; + max-width:25em; + white-space: nowrap; + text-overflow:ellipsis; + overflow:hidden; + line-height:1.6em; + } + + &:after, &:before{ + content: ""; + border-top: 1.3em solid transparent; + border-bottom: 1.3em solid transparent; + } + &:after { + border-left: 1em solid @color-grey-3; + position: absolute; right: -0.9em; top: 0; + z-index: 1; + } + &:before { + border-left: 1em solid @color-header-bg; + position: absolute; left: 0; top: 0; + } + + &:hover { + background: @color-teal; + + a{ + color:white; + } + } + &:hover:after { + border-left-color: @color-teal; + } + + &:first-child { + padding:0.5em; + .border-radius(3px 0px 0px 3px); + + &:before{ + display:none; + width:1em; + } + a { + width:2em; + font-size:1em; + &:before{ + line-height:1em; + font-size:1.7em; + } + } + } + } +} + +@media screen and (min-width: @breakpoint-mobile){ + .col1{ + .column(1); + } + .col2{ + .column(2); + } + .col3{ + .column(3); + } + .col4{ + .column(4); + } + .col5{ + .column(5); + } + .col6{ + .column(6); + } + .col7{ + .column(7); + } + .col8{ + .column(8); + } + .col9{ + .column(9); + } + .col10{ + .column(10); + } + .col11{ + .column(11); + } + .col12{ + .column(12); + } + + body{ + margin-left:@menu-width; + } + + .browsermessage{ + margin:0 0 0 -150px; + } + .content-wrapper{ + z-index:0; + -webkit-transform:none; + transform:none; + } + + .nav-wrapper{ + /* heigt and position necessary to force it to 100% height of screen (with some JS help) */ + position:absolute; + left:0; + height:100%; + width:@menu-width; + margin-left: -@menu-width; + } + + .content{ + border-top:0; + background-color:none; + padding-top:0; + } + + .inner{ /* inner only serves a purpose to position content */ + height:100%; + position:fixed; + width:@menu-width; + } + + #nav-toggle{ + display:none; + } + + .nav-main{ + margin-bottom: 116px; /* WARNING: magic number - the height of the .footer */ + + li{ + z-index:1; + } + .footer{ + padding-top:1em; + background-color:@color-grey-1; + position:fixed; + width:@menu-width - 7; + bottom:0; + text-align:center; + z-index:2; + } + .avatar{ + display:block; + margin:auto; + text-align:center; + margin-bottom:1em; + + a{ + padding:0 0 1em 0; + border-bottom:1px solid rgba(200,200,200,0.1); + } + &:before{ + color:@color-grey-2; + border: 2px solid @color-grey-2; + } + &:hover{ + .box-shadow(0px 0px 6px 0px rgba(0,0,0,1)); + } + } + } + + .explorer { + width: 400px; + position: absolute; + z-index:@explorer-z-index; + top:0; + left:99%; + } + .dl-menu { + position: absolute; + } + + /* UN-set the transformations used on mobile */ + body.nav-open .content-wrapper{ + position:relative; + transform: none; + -webkit-transform: none; + } + body.nav-open .nav-wrapper{ + margin-left: -@menu-width; + } + body.nav-open .nav-wrapper, + body.nav-open .nav-main{ + width:@menu-width; + } + + body.explorer-open .explorer:before{ + display:none; + } + body.explorer-open .nav-main{ + display:block; + } + + header{ + padding-top:2em; + padding-bottom:2em; + .nice-padding(); + } + footer{ + width:80%; + margin-left:40px; + } +} + +/* Transitions */ +.content-wrapper, +.nav-main, +#nav-toggle, +footer, +.logo{ + .transition(all 0.2s ease); /* TODO: ensure that nav-wrapper can't be seen to be gradually expanding to fill height of screen, by removing unnecessary transitions */ +} +.nav-wrapper{ + .transition-transform(0.2s ease); +} +.nav-main a, a{ + .transition(~"color 0.2s ease, background-color 0.2s ease"); +} \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/fonts/verdant.eot b/wagtail/wagtailadmin/static/wagtailadmin/css/fonts/verdant.eot new file mode 100644 index 000000000..5156f60b3 Binary files /dev/null and b/wagtail/wagtailadmin/static/wagtailadmin/css/fonts/verdant.eot differ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/fonts/verdant.svg b/wagtail/wagtailadmin/static/wagtailadmin/css/fonts/verdant.svg new file mode 100644 index 000000000..7fcbdd94a --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/fonts/verdant.svg @@ -0,0 +1,62 @@ + + + +This SVG font generated by Fontastic.me + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +<<<<<<< HEAD + +======= +>>>>>>> feature/ordering-integrated + + \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/fonts/verdant.ttf b/wagtail/wagtailadmin/static/wagtailadmin/css/fonts/verdant.ttf new file mode 100644 index 000000000..59f9617e7 Binary files /dev/null and b/wagtail/wagtailadmin/static/wagtailadmin/css/fonts/verdant.ttf differ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/fonts/verdant.woff b/wagtail/wagtailadmin/static/wagtailadmin/css/fonts/verdant.woff new file mode 100644 index 000000000..9fba4530b Binary files /dev/null and b/wagtail/wagtailadmin/static/wagtailadmin/css/fonts/verdant.woff differ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/grid.less b/wagtail/wagtailadmin/static/wagtailadmin/css/grid.less new file mode 100644 index 000000000..70bc427d8 --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/grid.less @@ -0,0 +1,88 @@ +/* Utility variable — you should never need to modify this */ +@gridsystem_width: @grid-columns * 1px; +@padding: @grid-gutter-width*0.5; +@correction: 0.5 / @grid-max-width * 100 * 1%; // NOTE: Check this in IE + +/* Ensure grid columns are set to border-boxes. This is essential */ +.border-box(){ + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.content-box(){ + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} + +/* Our row container */ +.row(@padding:0){ + .clearfix(); + .border-box(); + + display:block; + /*max-width: @grid-max-width; NO MAX WIDTH*/ + margin-right: auto; + margin-left: auto; + padding-right: @padding; + padding-left: @padding; +} + +.row-flush(){ + margin-left:-@padding; + margin-right:-@padding; +} + +/* Our column container */ +.column(@x, @padding:@padding, @grid-columns:@grid-columns){ + .border-box(); + + display: inline; + float: left; + width: 100%*(@x / @grid-columns); + padding-right: @padding; + padding-left: @padding; +} + +.table-column(@x, @padding:@padding, @grid-columns:@grid-columns){ + .border-box(); + + width: 100%*(@x / @grid-columns); + /*padding-right: @padding; + padding-left: @padding;*/ +} + +/* Push adds left padding */ +.push(@offset:1, @grid-columns:@grid-columns) { + margin-left: 100%*(@offset / @grid-columns); +} +.push-padding(@offset:1, @grid-columns:@grid-columns) { + padding-left:100%*(@offset / @grid-columns); +} + +/* Pull adds right padding */ +.pull(@offset:1, @grid-columns:@grid-columns) { + margin-right: 100%*(@offset / @grid-columns); +} +.pull-padding(@offset:1, @grid-columns:@grid-columns){ + padding-right: 100%*(@offset / @grid-columns); +} + +.row{ + .row(); +} +.row-flush{ + .row-flush(); +} + +/* must come after row/row-flush */ +.nice-padding{ + .push-padding(@grid-content-indent); + .pull-padding(@grid-content-indent); +} +.nice-margin{ + .push(@grid-content-indent); + .pull(@grid-content-indent); +} + diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/home.less b/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/home.less new file mode 100644 index 000000000..81204c369 --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/home.less @@ -0,0 +1,58 @@ +@import "../variables.less"; +@import "../mixins.less"; +@import "../grid.less"; + +h1{ + font-weight:300; + font-size:2.2em; +} +header{ + .col1{ + width:50px; + margin-right:1em; + padding:0; + } + h2{ + text-transform:none; + } +} + +.panel{ + margin-bottom:4em; +} + +.summary{ + .row(); + background-color:@color-header-bg; + + h2{ + .visuallyhidden(); + } + ul{ + .unlist(); + width:100%; + } + li{ + .column(4); + padding-top:3em; + padding-bottom:3em; + + &:first-child{ + .push-padding(@grid-content-indent); + } + } + + li:before{ + opacity:0.2; + font-size:6em; + float:left; + } + + span{ + font-family:Bitter, Georgia, serif; + display:block; + font-size:4em; + line-height:1em; + font-weight:300; + } +} diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/login.less b/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/login.less new file mode 100644 index 000000000..aac755ee4 --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/login.less @@ -0,0 +1,175 @@ +@import "../variables.less"; +@import "../mixins.less"; +@import "../grid.less"; + +html{ + background-color:@color-grey-1; + height:100%; +} +body{ + margin-left: 0px; + height:100%; +} +h1{ + .nice-padding(); + font-weight:300; + font-size:2em; + line-height:1em; + color:white; + text-transform: none; + white-space: nowrap; + + span{ + color:white; + font-weight:normal; + font-family:verdant; + font-size:1.8em; + line-height:1em; + display:inline-block; + margin:0 -0.3em; + vertical-align: -15%; + } +} +form{ + width:100%; + ul{ + .unlist(); + } + .fields li{ + .nice-padding(); + padding-top:1em; + padding-bottom:1em; + } + .fields .checkbox{ + padding-top:2em; + padding-bottom:2em; + } +} +label{ + color:white; +} +input[type=submit]{ + font-size:1.5em; + padding:1.1em 2.4em; +} +input[type=checkbox]:before{ + background-color:#333; + color:#555; + border:1px solid #555; +} +.fields li.full{ + position:relative; + padding:0; + + label{ + display:none; + } + input{ + border-top: 1px dashed @color-input-border; + } +} +.fields li:first-child input{ + border-top:0; +} + +.field{ + padding:0; +} +.field.icon:before{ + display:none; +} + + +.full label{ + .border-radius(2px); + text-transform:uppercase; + padding:2px 5px; + position:absolute; + top:0; + left:0; + margin-top:-1px; + font-size:0.7em; + z-index:1; + margin:0.2em 0; + line-height:1.5em; + font-weight:normal; +} + +/* Special full-width, one-off fields i.e a single text or textarea input */ +.full input{ + .nice-padding; + .border-radius(0px); + font-weight:300; + border:0; + padding-top:1.5em; + padding-bottom:1.5em; + font-size:1.6em; + line-height:1.6em; +} +.help{ + opacity:1; + position:absolute; + font-size:1.3em; + top:50%; + margin-top:-0.5em; + right:5%; +} + +@media screen and (min-width: @breakpoint-mobile){ + body{ + font-size:85%; + } + + /* centres login form vertically */ + .wrapper{ + height:100%; + + &:before { + content: ''; + display: inline-block; + height: 100%; + vertical-align: middle; + margin-left:-4px; + } + } + form{ + width:100%; + display:inline-block; + vertical-align: middle; + + .fields li{ + padding-left:10%; + } + } + + h1{ + padding-left:10%; + font-weight:300; + font-size:4em; + line-height:1em; + } + .full input{ + padding-left:10%; + } + .field.icon:before{ + display:inline-block; + position: absolute; + color:@color-grey-4; + border: 2px solid @color-grey-4; + border-radius: 100%; + width: 1em; + padding: 0.3em; + left: 12%; + margin-left: 80px; + margin-left: -25px; + top: 50%; + margin-top: -25px; + } + .full input{ + padding-left:15%; + } + + .messages li{ + padding-left:11%; + } +} \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/page-editor.less b/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/page-editor.less new file mode 100644 index 000000000..44a58cf3d --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/page-editor.less @@ -0,0 +1,158 @@ +@import "../variables.less"; +@import "../mixins.less"; +@import "../grid.less"; + +.page-editor .tab-nav li{ + .column(6); + padding:0; +} + +.objects{ + .object{ + .push-padding(@grid-content-indent); + padding-right:@grid-gutter-width/2; + position:relative; + border:1px solid @color-grey-4; + border-width:1px 0 0 0; + + &:first-child{ + border:0; + } + + &.focused{ + border-color: darken(@color-input-focus, 40%); + } + + fieldset{ + .column(10); + padding-left:0; + } + + .object-help{ + .column(2); + display:block; + position:absolute; + z-index:1; + right:0; + top:0; + padding-right:@grid-gutter-width/2; + float:right; + margin-top:4em; + text-align:right; + opacity:0; + } + + &:hover .object-help{ + opacity:1; + } + } + + .preview{ + padding-top:1em; + padding-bottom:0.5em; + } + + .single-field{ + h2, .object-help{ + display:none; /* The field label is used instead */ + } + } + + /* Special full-width, one-off fields i.e a single text or textarea input */ + .full{ + padding:0; + + h2{ + display:none; /* The field label is used instead */ + } + + .object-help{ + display:block; + } + + fieldset{ + display:block; + float:none; + width:auto; + padding:0; + + .help{ + display:none; + } + } + li{ + padding:0; + } + + .field{ + padding:0; + } + + input, textarea, .richtext{ + .nice-padding; + .pull-padding(2); + font-family:Bitter, Georgia, serif; + .border-radius(0px); + border:0; + padding-top:3em; + padding-bottom:2em; + font-size:1.2em; + line-height:1.6em; + } + + + .error-message{ + .push(@grid-content-indent); + .pull(@grid-content-indent); + padding-bottom:2em; + } + + .error, + .error input, + .error textarea{ + background-color:@color-input-error-bg; + } + } + + .object > h2, .single-field label{ + -webkit-font-smoothing: auto; + .border-radius(2px); + background-color:@color-grey-4; + text-transform:uppercase; + padding:2px 5px; + position:absolute; + top:0; + left:0; + font-size:0.85em; + z-index:1; + margin:0 0 0.2em 0; + line-height:1.5em; + font-weight:normal; + } + + .title input, + .title textarea{ + font-size:2em; + padding-top:2em; + } + + .multiple > li{ + border-bottom: 1px dashed @color-input-border; + } + + .multiple .controls{ + top:auto; + -webkit-border-radius: 0 0 3px 3px; + border-radius: 0 0 3px 3px; + } + + +} + +@media screen and (min-width: @breakpoint-mobile){ + .page-editor .tab-nav li{ + .column(2); + padding:0; + min-width:110px; + } +} diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/mixins.less b/wagtail/wagtailadmin/static/wagtailadmin/css/mixins.less new file mode 100644 index 000000000..9eb711a27 --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/mixins.less @@ -0,0 +1,91 @@ +.clearfix() { + &:before, + &:after { + content: " "; /* 1 */ + display: table; /* 2 */ + } + &:after { + clear: both; + } +} + +.unlist(){ + &, ul, li{ + list-style-type:none; + font-style: normal; + } + &, ul{ + margin-top:0; + margin-bottom:0; + padding-left:0; + } +} + +.transition(@transition){ + body.ready &{ + -webkit-transition: @transition; + -moz-transition: @transition; + -o-transition: @transition; + transition: @transition; + } +} +.transition-immediate(@transition){ + -webkit-transition: @transition; + -moz-transition: @transition; + -o-transition: @transition; + transition: @transition; +} + +.transition-transform(@transition) { + -webkit-transition: -webkit-transform @transition; + -moz-transition: -moz-transform @transition; + -o-transition: -o-transform @transition; + transition: transform @transition; +} + +.notransition() { + -webkit-transition: none !important; + -moz-transition: none !important; + -o-transition: none !important; + -ms-transition: none !important; + transition: none !important; +} + +.border-radius(@radius){ + -webkit-border-radius: @radius; + border-radius: @radius; +} + +.box-shadow(@shadow){ + -webkit-box-shadow: @shadow; //inset 2px 2px 3px 2px rgba(0, 0, 0, 1) + box-shadow: @shadow; //inset 2px 2px 3px 2px rgba(0, 0, 0, 1) +} + +.visuallyhidden() { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + + &:active, &:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + width: auto; + } +} + +.visuallyvisible(){ + clip:none; + height:auto; + width:auto; + margin:auto; + overflow:visible; + position:initial; +} \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/normalize.css b/wagtail/wagtailadmin/static/wagtailadmin/css/normalize.css new file mode 100755 index 000000000..8d57e3c96 --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/normalize.css @@ -0,0 +1,533 @@ +/*! normalize.css v1.1.1 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/** + * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. + */ + +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. + * Known issue: no IE 6 support. + */ + +[hidden] { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/** + * 1. Prevent system color scheme's background color being used in Firefox, IE, + * and Opera. + * 2. Prevent system color scheme's text color being used in Firefox, IE, and + * Opera. + * 3. Correct text resizing oddly in IE 6/7 when body `font-size` is set using + * `em` units. + * 4. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + background: #fff; /* 1 */ + color: #000; /* 2 */ + font-size: 100%; /* 3 */ + -webkit-text-size-adjust: 100%; /* 4 */ + -ms-text-size-adjust: 100%; /* 4 */ +} + +/** + * Address `font-family` inconsistency between `textarea` and other form + * elements. + */ + +html, +button, +input, +select, +textarea { + font-family: sans-serif; +} + +/** + * Address margins handled incorrectly in IE 6/7. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/** + * Address `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/** + * Address font sizes and margins set differently in IE 6/7. + * Address font sizes within `section` and `article` in Firefox 4+, Safari 5, + * and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +h2 { + font-size: 1.5em; + margin: 0.83em 0; +} + +h3 { + font-size: 1.17em; + margin: 1em 0; +} + +h4 { + font-size: 1em; + margin: 1.33em 0; +} + +h5 { + font-size: 0.83em; + margin: 1.67em 0; +} + +h6 { + font-size: 0.67em; + margin: 2.33em 0; +} + +/** + * Address styling not present in IE 7/8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +blockquote { + margin: 1em 40px; +} + +/** + * Address styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address differences between Firefox and other browsers. + * Known issue: no IE 6/7 normalization. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Address styling not present in IE 6/7/8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Address margins set differently in IE 6/7. + */ + +p, +pre { + margin: 1em 0; +} + +/** + * Correct font family set oddly in IE 6, Safari 4/5, and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + _font-family: 'courier new', monospace; + font-size: 1em; +} + +/** + * Improve readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +/** + * Address CSS quotes not supported in IE 6/7. + */ + +q { + quotes: none; +} + +/** + * Address `quotes` property not supported in Safari 4. + */ + +q:before, +q:after { + content: ''; + content: none; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Lists + ========================================================================== */ + +/** + * Address margins set differently in IE 6/7. + */ + +dl, +menu, +ol, +ul { + margin: 1em 0; +} + +dd { + margin: 0 0 0 40px; +} + +/** + * Address paddings set differently in IE 6/7. + */ + +menu, +ol, +ul { + padding: 0 0 0 40px; +} + +/** + * Correct list images handled incorrectly in IE 7. + */ + +nav ul, +nav ol { + list-style: none; + list-style-image: none; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/** + * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. + * 2. Improve image quality when scaled in IE 7. + */ + +img { + border: 0; /* 1 */ + -ms-interpolation-mode: bicubic; /* 2 */ +} + +/** + * Correct overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/** + * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/** + * Correct margin displayed oddly in IE 6/7. + */ + +form { + margin: 0; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct color not being inherited in IE 6/7/8/9. + * 2. Correct text not wrapping in Firefox 3. + * 3. Correct alignment displayed oddly in IE 6/7. + */ + +legend { + border: 0; /* 1 */ + padding: 0; + white-space: normal; /* 2 */ + *margin-left: -7px; /* 3 */ +} + +/** + * 1. Correct font size not being inherited in all browsers. + * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, + * and Chrome. + * 3. Improve appearance and consistency in all browsers. + */ + +button, +input, +select, +textarea { + font-size: 100%; /* 1 */ + margin: 0; /* 2 */ + vertical-align: baseline; /* 3 */ + *vertical-align: middle; /* 3 */ +} + +/** + * Address Firefox 3+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + * 4. Remove inner spacing in IE 7 without affecting normal text inputs. + * Known issue: inner spacing remains in IE 6. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ + *overflow: visible; /* 4 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * 1. Address box sizing set to content-box in IE 8/9. + * 2. Remove excess padding in IE 8/9. + * 3. Remove excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + *height: 13px; /* 3 */ + *width: 13px; /* 3 */ +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Remove inner padding and border in Firefox 3+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * 1. Remove default vertical scrollbar in IE 6/7/8/9. + * 2. Improve readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/panels/rich-text.less b/wagtail/wagtailadmin/static/wagtailadmin/css/panels/rich-text.less new file mode 100644 index 000000000..22b431edf --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/panels/rich-text.less @@ -0,0 +1,141 @@ +@import "../variables.less"; + +.hallotoolbar{ + position:absolute; + left:5.83%; +} +.hallotoolbar.affixed{ + position:fixed; + left:5.83%; + margin-left:140px; +} + +.richtext { + min-height:50px; + overflow: hidden; + + /* Resetting various html tags that have been messed with by Verdant's main css */ + h1{ + text-transform:none; + } + h2 { + text-transform:none; + display:block !important; + } + h1 span { + font-weight: normal; + color: inherit; + } + *:before, + *:after{ + display:none; + } + + ol, + ul { + margin: 1em 0; + padding: 0 0 0 40px; + } + li{ + display:list-item !important; + } + ul li{ + list-style-type:disc !important; + } + ol li{ + list-style-type:decimal !important; + } + + /* Delete controls on embedded blocks with contenteditable="false" */ + .rich-text-deletable { + position: relative; + a.delete-control { + position: absolute; + right: 0; + cursor: pointer; + display: none; + + &:before{ + background-color:rgba(255,255,255,0.8); + } + &:hover:before{ + background-color:white; + } + } + } + &.inEditMode { + .rich-text-deletable a.delete-control { + display: block; + } + } + + /* === CSS BELOW THIS POINT IS CUSTOM TO RCA === */ + /* TODO: find extensible way for developers to style rich text to suit their implementation, without making changes to anything within wagtailadmin */ + + h1,h2,h3,h4,h5,h6{ + font-family:inherit; + } + h1{} /* shouldn't be used */ + + h2 { + font-size: 2em; + line-height: 1.2em; + padding-top:0.5em; + border-top:1px solid #CCC; + clear:both + } + h3 { + font-size: 1.7em; + line-height: 1.194em; + } + h4 { + font-size: 1.5em; + line-height: 1.267em; + } + h5 { + /* used for large body text, not really heading */ + font-size: 1.200em; + line-height: 1.278em; + } + + hr { + border-bottom: 1px solid #ccc; + border-top: none; + border-left: none; + } + + /* + These styles correspond to the image formats defined in verdantimages/formats.py, + so that images displayed in the rich text field receive more or less the same + styling that they would receive on the site front-end. + TODO: when we implement a mechanism to configure the image format list on a + per-installation / per-site basis, we'll need a way to insert the corresponding + CSS here. + */ + + .bodytext-image { + margin-top: 3px; /* close as possible to match line-height space above p */ + img { + width:100%; + } + figcaption { + display: block; + width: 100%; + text-align: left; + margin-top: 16px; + margin-bottom: 16px; + } + &.small { + max-width: 45%; + } + &.left { + float: left; + margin-right: 16px; + } + &.right { + float: right; + margin-left: 16px; + } + } + +} diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/variables.less b/wagtail/wagtailadmin/static/wagtailadmin/css/variables.less new file mode 100644 index 000000000..fcacfb40c --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/variables.less @@ -0,0 +1,51 @@ +@static-root: "/static/wagtailadmin/images/"; +@css-root: "/static/wagtailadmin/css/"; + +@grid-columns: 12; +@grid-gutter-width: 3%; +@grid-max-width: 1200px; +@grid-content-indent:0.7; + +@breakpoint-mobile:50em; /* 800px */ +@breakpoint-desktop-small:56.25em; /* 900px */ +@breakpoint-desktop-large:75em; /* 1200px */ +@breakpoint-desktop-larger:100em; /* 1600px */ + +// generic colours +@color-teal: #43b1b0; +@color-teal-darker: darken(@color-teal, 10%); +@color-teal-dark: #246060; +@color-red: #f7474e; +@color-orange:#e9b04d; +@color-green: #00FF00; + +/* greys, darker to lighter */ +@color-grey-1: #333333; +@color-grey-1-1: #404040; +@color-grey-2: #666666; +@color-grey-3: #d9d9d9; +@color-grey-4: #e6e6e6; +@color-grey-5: #fafafa; + +@color-thead-bg: @color-grey-5; +@color-header-bg: @color-grey-5; +@color-fieldset-hover: @color-grey-5; +@color-input-border: @color-grey-3; +@color-input-focus: #f4fcfc; +@color-input-error-bg: #feedee; +@color-button: @color-teal; +@color-button-hover: @color-teal-darker; +@color-button-yes: @color-green; +@color-button-yes-hover: darken(@color-button-yes, 8%); +@color-button-no: @color-red; +@color-button-no-hover: darken(@color-button-no, 20%); +@color-link: @color-teal; +@color-link-hover: darken(@color-button, 8%); + +@color-text-base: @color-grey-2; +@color-text-input: @color-grey-1; + + +@thumbnail-width:130px; + +@menu-width: 150px; \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/animated-overlay.gif b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/animated-overlay.gif new file mode 100755 index 000000000..d441f75eb Binary files /dev/null and b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/animated-overlay.gif differ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_0_aaaaaa_40x100.png b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_0_aaaaaa_40x100.png new file mode 100755 index 000000000..88ce02b1a Binary files /dev/null and b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_0_aaaaaa_40x100.png differ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_246060_40x100.png b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_246060_40x100.png new file mode 100755 index 000000000..84acb340d Binary files /dev/null and b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_246060_40x100.png differ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_49c0c1_40x100.png b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_49c0c1_40x100.png new file mode 100755 index 000000000..249cbd15c Binary files /dev/null and b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_49c0c1_40x100.png differ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_e8f8f9_40x100.png b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_e8f8f9_40x100.png new file mode 100755 index 000000000..41354d93e Binary files /dev/null and b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_e8f8f9_40x100.png differ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_f7474e_40x100.png b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_f7474e_40x100.png new file mode 100755 index 000000000..96b52b857 Binary files /dev/null and b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_f7474e_40x100.png differ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_ffffff_40x100.png b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_ffffff_40x100.png new file mode 100755 index 000000000..7fe582a82 Binary files /dev/null and b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_ffffff_40x100.png differ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_75_ffffff_40x100.png b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_75_ffffff_40x100.png new file mode 100755 index 000000000..577ee285a Binary files /dev/null and b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_75_ffffff_40x100.png differ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_55_fbf9ee_1x400.png b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_55_fbf9ee_1x400.png new file mode 100755 index 000000000..a14fc17a3 Binary files /dev/null and b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_55_fbf9ee_1x400.png differ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_65_ffffff_1x400.png b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_65_ffffff_1x400.png new file mode 100755 index 000000000..521a0332a Binary files /dev/null and b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_65_ffffff_1x400.png differ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_75_dadada_1x400.png b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_75_dadada_1x400.png new file mode 100755 index 000000000..4c025741a Binary files /dev/null and b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_75_dadada_1x400.png differ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png new file mode 100755 index 000000000..da46f6ca5 Binary files /dev/null and b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png differ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_95_fef1ec_1x400.png b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_95_fef1ec_1x400.png new file mode 100755 index 000000000..f0589a9bd Binary files /dev/null and b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_95_fef1ec_1x400.png differ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_highlight-soft_75_cccccc_1x100.png b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_highlight-soft_75_cccccc_1x100.png new file mode 100755 index 000000000..40704500f Binary files /dev/null and b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_highlight-soft_75_cccccc_1x100.png differ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_222222_256x240.png b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_222222_256x240.png new file mode 100755 index 000000000..c1cb1170c Binary files /dev/null and b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_222222_256x240.png differ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_2e83ff_256x240.png b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_2e83ff_256x240.png new file mode 100755 index 000000000..84b601bf0 Binary files /dev/null and b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_2e83ff_256x240.png differ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_454545_256x240.png b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_454545_256x240.png new file mode 100755 index 000000000..b6db1acdd Binary files /dev/null and b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_454545_256x240.png differ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_49c0c1_256x240.png b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_49c0c1_256x240.png new file mode 100755 index 000000000..fe9adc4d5 Binary files /dev/null and b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_49c0c1_256x240.png differ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_888888_256x240.png b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_888888_256x240.png new file mode 100755 index 000000000..feea0e202 Binary files /dev/null and b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_888888_256x240.png differ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_cd0a0a_256x240.png b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_cd0a0a_256x240.png new file mode 100755 index 000000000..ed5b6b093 Binary files /dev/null and b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_cd0a0a_256x240.png differ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_ffffff_256x240.png b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_ffffff_256x240.png new file mode 100755 index 000000000..4f624bb2b Binary files /dev/null and b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_ffffff_256x240.png differ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/jquery-ui-1.10.3.verdant.css b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/jquery-ui-1.10.3.verdant.css new file mode 100755 index 000000000..871cda747 --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/jquery-ui-1.10.3.verdant.css @@ -0,0 +1,1177 @@ +/*! jQuery UI - v1.10.3 - 2013-09-26 +* http://jqueryui.com +* Includes: jquery.ui.core.css, jquery.ui.resizable.css, jquery.ui.selectable.css, jquery.ui.accordion.css, jquery.ui.autocomplete.css, jquery.ui.button.css, jquery.ui.datepicker.css, jquery.ui.dialog.css, jquery.ui.menu.css, jquery.ui.progressbar.css, jquery.ui.slider.css, jquery.ui.spinner.css, jquery.ui.tabs.css, jquery.ui.tooltip.css, jquery.ui.theme.css +* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Open Sans%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.4em&cornerRadius=0&bgColorHeader=%23246060&bgTextureHeader=flat&bgImgOpacityHeader=100&borderColorHeader=%23246060&fcHeader=%23ffffff&iconColorHeader=%23ffffff&bgColorContent=%23ffffff&bgTextureContent=flat&bgImgOpacityContent=100&borderColorContent=%23d8d8d8&fcContent=%23222222&iconColorContent=%23222222&bgColorDefault=%23ffffff&bgTextureDefault=flat&bgImgOpacityDefault=100&borderColorDefault=%23d3d3d3&fcDefault=%23555555&iconColorDefault=%23ffffff&bgColorHover=%2349c0c1&bgTextureHover=flat&bgImgOpacityHover=100&borderColorHover=%2349c0c1&fcHover=%23ffffff&iconColorHover=%23ffffff&bgColorActive=%23ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=%23aaaaaa&fcActive=%23212121&iconColorActive=%23454545&bgColorHighlight=%23e8f8f9&bgTextureHighlight=flat&bgImgOpacityHighlight=100&borderColorHighlight=%23e8f8f9&fcHighlight=%23363636&iconColorHighlight=%2349c0c1&bgColorError=%23f7474e&bgTextureError=flat&bgImgOpacityError=100&borderColorError=%23f7474e&fcError=%23ffffff&iconColorError=%23ffffff&bgColorOverlay=%23aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=%23aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px +* Copyright 2013 jQuery Foundation and other contributors; Licensed MIT */ + +/* Layout helpers +----------------------------------*/ +.ui-helper-hidden { + display: none; +} +.ui-helper-hidden-accessible { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} +.ui-helper-reset { + margin: 0; + padding: 0; + border: 0; + outline: 0; + line-height: 1.3; + text-decoration: none; + font-size: 100%; + list-style: none; +} +.ui-helper-clearfix:before, +.ui-helper-clearfix:after { + content: ""; + display: table; + border-collapse: collapse; +} +.ui-helper-clearfix:after { + clear: both; +} +.ui-helper-clearfix { + min-height: 0; /* support: IE7 */ +} +.ui-helper-zfix { + width: 100%; + height: 100%; + top: 0; + left: 0; + position: absolute; + opacity: 0; + filter:Alpha(Opacity=0); +} + +.ui-front { + z-index: 100; +} + + +/* Interaction Cues +----------------------------------*/ +.ui-state-disabled { + cursor: default !important; +} + + +/* Icons +----------------------------------*/ + +/* states and images */ +.ui-icon { + display: block; + text-indent: -99999px; + overflow: hidden; + background-repeat: no-repeat; +} + + +/* Misc visuals +----------------------------------*/ + +/* Overlays */ +.ui-widget-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.ui-resizable { + position: relative; +} +.ui-resizable-handle { + position: absolute; + font-size: 0.1px; + display: block; +} +.ui-resizable-disabled .ui-resizable-handle, +.ui-resizable-autohide .ui-resizable-handle { + display: none; +} +.ui-resizable-n { + cursor: n-resize; + height: 7px; + width: 100%; + top: -5px; + left: 0; +} +.ui-resizable-s { + cursor: s-resize; + height: 7px; + width: 100%; + bottom: -5px; + left: 0; +} +.ui-resizable-e { + cursor: e-resize; + width: 7px; + right: -5px; + top: 0; + height: 100%; +} +.ui-resizable-w { + cursor: w-resize; + width: 7px; + left: -5px; + top: 0; + height: 100%; +} +.ui-resizable-se { + cursor: se-resize; + width: 12px; + height: 12px; + right: 1px; + bottom: 1px; +} +.ui-resizable-sw { + cursor: sw-resize; + width: 9px; + height: 9px; + left: -5px; + bottom: -5px; +} +.ui-resizable-nw { + cursor: nw-resize; + width: 9px; + height: 9px; + left: -5px; + top: -5px; +} +.ui-resizable-ne { + cursor: ne-resize; + width: 9px; + height: 9px; + right: -5px; + top: -5px; +} +.ui-selectable-helper { + position: absolute; + z-index: 100; + border: 1px dotted black; +} +.ui-accordion .ui-accordion-header { + display: block; + cursor: pointer; + position: relative; + margin-top: 2px; + padding: .5em .5em .5em .7em; + min-height: 0; /* support: IE7 */ +} +.ui-accordion .ui-accordion-icons { + padding-left: 2.2em; +} +.ui-accordion .ui-accordion-noicons { + padding-left: .7em; +} +.ui-accordion .ui-accordion-icons .ui-accordion-icons { + padding-left: 2.2em; +} +.ui-accordion .ui-accordion-header .ui-accordion-header-icon { + position: absolute; + left: .5em; + top: 50%; + margin-top: -8px; +} +.ui-accordion .ui-accordion-content { + padding: 1em 2.2em; + border-top: 0; + overflow: auto; +} +.ui-autocomplete { + position: absolute; + top: 0; + left: 0; + cursor: default; +} +.ui-button { + display: inline-block; + position: relative; + padding: 0; + line-height: normal; + margin-right: .1em; + cursor: pointer; + vertical-align: middle; + text-align: center; + overflow: visible; /* removes extra width in IE */ +} +.ui-button, +.ui-button:link, +.ui-button:visited, +.ui-button:hover, +.ui-button:active { + text-decoration: none; +} +/* to make room for the icon, a width needs to be set here */ +.ui-button-icon-only { + width: 2.2em; +} +/* button elements seem to need a little more width */ +button.ui-button-icon-only { + width: 2.4em; +} +.ui-button-icons-only { + width: 3.4em; +} +button.ui-button-icons-only { + width: 3.7em; +} + +/* button text element */ +.ui-button .ui-button-text { + display: block; + line-height: normal; +} +.ui-button-text-only .ui-button-text { + padding: .4em 1em; +} +.ui-button-icon-only .ui-button-text, +.ui-button-icons-only .ui-button-text { + padding: .4em; + text-indent: -9999999px; +} +.ui-button-text-icon-primary .ui-button-text, +.ui-button-text-icons .ui-button-text { + padding: .4em 1em .4em 2.1em; +} +.ui-button-text-icon-secondary .ui-button-text, +.ui-button-text-icons .ui-button-text { + padding: .4em 2.1em .4em 1em; +} +.ui-button-text-icons .ui-button-text { + padding-left: 2.1em; + padding-right: 2.1em; +} +/* no icon support for input elements, provide padding by default */ +input.ui-button { + padding: .4em 1em; +} + +/* button icon element(s) */ +.ui-button-icon-only .ui-icon, +.ui-button-text-icon-primary .ui-icon, +.ui-button-text-icon-secondary .ui-icon, +.ui-button-text-icons .ui-icon, +.ui-button-icons-only .ui-icon { + position: absolute; + top: 50%; + margin-top: -8px; +} +.ui-button-icon-only .ui-icon { + left: 50%; + margin-left: -8px; +} +.ui-button-text-icon-primary .ui-button-icon-primary, +.ui-button-text-icons .ui-button-icon-primary, +.ui-button-icons-only .ui-button-icon-primary { + left: .5em; +} +.ui-button-text-icon-secondary .ui-button-icon-secondary, +.ui-button-text-icons .ui-button-icon-secondary, +.ui-button-icons-only .ui-button-icon-secondary { + right: .5em; +} + +/* button sets */ +.ui-buttonset { + margin-right: 7px; +} +.ui-buttonset .ui-button { + margin-left: 0; + margin-right: -.3em; +} + +/* workarounds */ +/* reset extra padding in Firefox, see h5bp.com/l */ +input.ui-button::-moz-focus-inner, +button.ui-button::-moz-focus-inner { + border: 0; + padding: 0; +} +.ui-datepicker { + width: 17em; + padding: .2em .2em 0; + display: none; +} +.ui-datepicker .ui-datepicker-header { + position: relative; + padding: .2em 0; +} +.ui-datepicker .ui-datepicker-prev, +.ui-datepicker .ui-datepicker-next { + position: absolute; + top: 2px; + width: 1.8em; + height: 1.8em; +} +.ui-datepicker .ui-datepicker-prev-hover, +.ui-datepicker .ui-datepicker-next-hover { + top: 1px; +} +.ui-datepicker .ui-datepicker-prev { + left: 2px; +} +.ui-datepicker .ui-datepicker-next { + right: 2px; +} +.ui-datepicker .ui-datepicker-prev-hover { + left: 1px; +} +.ui-datepicker .ui-datepicker-next-hover { + right: 1px; +} +.ui-datepicker .ui-datepicker-prev span, +.ui-datepicker .ui-datepicker-next span { + display: block; + position: absolute; + left: 50%; + margin-left: -8px; + top: 50%; + margin-top: -8px; +} +.ui-datepicker .ui-datepicker-title { + margin: 0 2.3em; + line-height: 1.8em; + text-align: center; +} +.ui-datepicker .ui-datepicker-title select { + font-size: 1em; + margin: 1px 0; +} +.ui-datepicker select.ui-datepicker-month-year { + width: 100%; +} +.ui-datepicker select.ui-datepicker-month, +.ui-datepicker select.ui-datepicker-year { + width: 49%; +} +.ui-datepicker table { + width: 100%; + font-size: .9em; + border-collapse: collapse; + margin: 0 0 .4em; +} +.ui-datepicker th { + padding: .7em .3em; + text-align: center; + font-weight: bold; + border: 0; +} +.ui-datepicker td { + border: 0; + padding: 1px; +} +.ui-datepicker td span, +.ui-datepicker td a { + display: block; + padding: .2em; + text-align: right; + text-decoration: none; +} +.ui-datepicker .ui-datepicker-buttonpane { + background-image: none; + margin: .7em 0 0 0; + padding: 0 .2em; + border-left: 0; + border-right: 0; + border-bottom: 0; +} +.ui-datepicker .ui-datepicker-buttonpane button { + float: right; + margin: .5em .2em .4em; + cursor: pointer; + padding: .2em .6em .3em .6em; + width: auto; + overflow: visible; +} +.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { + float: left; +} + +/* with multiple calendars */ +.ui-datepicker.ui-datepicker-multi { + width: auto; +} +.ui-datepicker-multi .ui-datepicker-group { + float: left; +} +.ui-datepicker-multi .ui-datepicker-group table { + width: 95%; + margin: 0 auto .4em; +} +.ui-datepicker-multi-2 .ui-datepicker-group { + width: 50%; +} +.ui-datepicker-multi-3 .ui-datepicker-group { + width: 33.3%; +} +.ui-datepicker-multi-4 .ui-datepicker-group { + width: 25%; +} +.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, +.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { + border-left-width: 0; +} +.ui-datepicker-multi .ui-datepicker-buttonpane { + clear: left; +} +.ui-datepicker-row-break { + clear: both; + width: 100%; + font-size: 0; +} + +/* RTL support */ +.ui-datepicker-rtl { + direction: rtl; +} +.ui-datepicker-rtl .ui-datepicker-prev { + right: 2px; + left: auto; +} +.ui-datepicker-rtl .ui-datepicker-next { + left: 2px; + right: auto; +} +.ui-datepicker-rtl .ui-datepicker-prev:hover { + right: 1px; + left: auto; +} +.ui-datepicker-rtl .ui-datepicker-next:hover { + left: 1px; + right: auto; +} +.ui-datepicker-rtl .ui-datepicker-buttonpane { + clear: right; +} +.ui-datepicker-rtl .ui-datepicker-buttonpane button { + float: left; +} +.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, +.ui-datepicker-rtl .ui-datepicker-group { + float: right; +} +.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, +.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { + border-right-width: 0; + border-left-width: 1px; +} +.ui-dialog { + position: absolute; + top: 0; + left: 0; + padding: .2em; + outline: 0; +} +.ui-dialog .ui-dialog-titlebar { + padding: .4em 1em; + position: relative; +} +.ui-dialog .ui-dialog-title { + float: left; + margin: .1em 0; + white-space: nowrap; + width: 90%; + overflow: hidden; + text-overflow: ellipsis; +} +.ui-dialog .ui-dialog-titlebar-close { + position: absolute; + right: .3em; + top: 50%; + width: 21px; + margin: -10px 0 0 0; + padding: 1px; + height: 20px; +} +.ui-dialog .ui-dialog-content { + position: relative; + border: 0; + padding: .5em 1em; + background: none; + overflow: auto; +} +.ui-dialog .ui-dialog-buttonpane { + text-align: left; + border-width: 1px 0 0 0; + background-image: none; + margin-top: .5em; + padding: .3em 1em .5em .4em; +} +.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { + float: right; +} +.ui-dialog .ui-dialog-buttonpane button { + margin: .5em .4em .5em 0; + cursor: pointer; +} +.ui-dialog .ui-resizable-se { + width: 12px; + height: 12px; + right: -5px; + bottom: -5px; + background-position: 16px 16px; +} +.ui-draggable .ui-dialog-titlebar { + cursor: move; +} +.ui-menu { + list-style: none; + padding: 2px; + margin: 0; + display: block; + outline: none; +} +.ui-menu .ui-menu { + margin-top: -3px; + position: absolute; +} +.ui-menu .ui-menu-item { + margin: 0; + padding: 0; + width: 100%; + /* support: IE10, see #8844 */ + list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); +} +.ui-menu .ui-menu-divider { + margin: 5px -2px 5px -2px; + height: 0; + font-size: 0; + line-height: 0; + border-width: 1px 0 0 0; +} +.ui-menu .ui-menu-item a { + text-decoration: none; + display: block; + padding: 2px .4em; + line-height: 1.5; + min-height: 0; /* support: IE7 */ + font-weight: normal; +} +.ui-menu .ui-menu-item a.ui-state-focus, +.ui-menu .ui-menu-item a.ui-state-active { + font-weight: normal; + margin: -1px; +} + +.ui-menu .ui-state-disabled { + font-weight: normal; + margin: .4em 0 .2em; + line-height: 1.5; +} +.ui-menu .ui-state-disabled a { + cursor: default; +} + +/* icon support */ +.ui-menu-icons { + position: relative; +} +.ui-menu-icons .ui-menu-item a { + position: relative; + padding-left: 2em; +} + +/* left-aligned */ +.ui-menu .ui-icon { + position: absolute; + top: .2em; + left: .2em; +} + +/* right-aligned */ +.ui-menu .ui-menu-icon { + position: static; + float: right; +} +.ui-progressbar { + height: 2em; + text-align: left; + overflow: hidden; +} +.ui-progressbar .ui-progressbar-value { + margin: -1px; + height: 100%; +} +.ui-progressbar .ui-progressbar-overlay { + background: url("images/animated-overlay.gif"); + height: 100%; + filter: alpha(opacity=25); + opacity: 0.25; +} +.ui-progressbar-indeterminate .ui-progressbar-value { + background-image: none; +} +.ui-slider { + position: relative; + text-align: left; +} +.ui-slider .ui-slider-handle { + position: absolute; + z-index: 2; + width: 1.2em; + height: 1.2em; + cursor: default; +} +.ui-slider .ui-slider-range { + position: absolute; + z-index: 1; + font-size: .7em; + display: block; + border: 0; + background-position: 0 0; +} + +/* For IE8 - See #6727 */ +.ui-slider.ui-state-disabled .ui-slider-handle, +.ui-slider.ui-state-disabled .ui-slider-range { + filter: inherit; +} + +.ui-slider-horizontal { + height: .8em; +} +.ui-slider-horizontal .ui-slider-handle { + top: -.3em; + margin-left: -.6em; +} +.ui-slider-horizontal .ui-slider-range { + top: 0; + height: 100%; +} +.ui-slider-horizontal .ui-slider-range-min { + left: 0; +} +.ui-slider-horizontal .ui-slider-range-max { + right: 0; +} + +.ui-slider-vertical { + width: .8em; + height: 100px; +} +.ui-slider-vertical .ui-slider-handle { + left: -.3em; + margin-left: 0; + margin-bottom: -.6em; +} +.ui-slider-vertical .ui-slider-range { + left: 0; + width: 100%; +} +.ui-slider-vertical .ui-slider-range-min { + bottom: 0; +} +.ui-slider-vertical .ui-slider-range-max { + top: 0; +} +.ui-spinner { + position: relative; + display: inline-block; + overflow: hidden; + padding: 0; + vertical-align: middle; +} +.ui-spinner-input { + border: none; + background: none; + color: inherit; + padding: 0; + margin: .2em 0; + vertical-align: middle; + margin-left: .4em; + margin-right: 22px; +} +.ui-spinner-button { + width: 16px; + height: 50%; + font-size: .5em; + padding: 0; + margin: 0; + text-align: center; + position: absolute; + cursor: default; + display: block; + overflow: hidden; + right: 0; +} +/* more specificity required here to overide default borders */ +.ui-spinner a.ui-spinner-button { + border-top: none; + border-bottom: none; + border-right: none; +} +/* vertical centre icon */ +.ui-spinner .ui-icon { + position: absolute; + margin-top: -8px; + top: 50%; + left: 0; +} +.ui-spinner-up { + top: 0; +} +.ui-spinner-down { + bottom: 0; +} + +/* TR overrides */ +.ui-spinner .ui-icon-triangle-1-s { + /* need to fix icons sprite */ + background-position: -65px -16px; +} +.ui-tabs { + position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ + padding: .2em; +} +.ui-tabs .ui-tabs-nav { + margin: 0; + padding: .2em .2em 0; +} +.ui-tabs .ui-tabs-nav li { + list-style: none; + float: left; + position: relative; + top: 0; + margin: 1px .2em 0 0; + border-bottom-width: 0; + padding: 0; + white-space: nowrap; +} +.ui-tabs .ui-tabs-nav li a { + float: left; + padding: .5em 1em; + text-decoration: none; +} +.ui-tabs .ui-tabs-nav li.ui-tabs-active { + margin-bottom: -1px; + padding-bottom: 1px; +} +.ui-tabs .ui-tabs-nav li.ui-tabs-active a, +.ui-tabs .ui-tabs-nav li.ui-state-disabled a, +.ui-tabs .ui-tabs-nav li.ui-tabs-loading a { + cursor: text; +} +.ui-tabs .ui-tabs-nav li a, /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ +.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a { + cursor: pointer; +} +.ui-tabs .ui-tabs-panel { + display: block; + border-width: 0; + padding: 1em 1.4em; + background: none; +} +.ui-tooltip { + padding: 8px; + position: absolute; + z-index: 9999; + max-width: 300px; + -webkit-box-shadow: 0 0 5px #aaa; + box-shadow: 0 0 5px #aaa; +} +body .ui-tooltip { + border-width: 2px; +} + +/* Component containers +----------------------------------*/ +.ui-widget { + font-family: Open Sans,Arial,sans-serif; + font-size: 1.2em; +} +.ui-widget .ui-widget { + font-size: 1em; +} +.ui-widget input, +.ui-widget select, +.ui-widget textarea, +.ui-widget button { + font-family: Open Sans,Arial,sans-serif; + font-size: 1em; +} +.ui-widget-content { + border: 1px solid #d8d8d8; + background: #ffffff url(images/ui-bg_flat_100_ffffff_40x100.png) 50% 50% repeat-x; + color: #222222; +} +.ui-widget-content a { + color: #222222; +} +.ui-widget-header { + border: 1px solid #246060; + background: #246060 url(images/ui-bg_flat_100_246060_40x100.png) 50% 50% repeat-x; + color: #ffffff; + font-weight: bold; +} +.ui-widget-header a { + color: #ffffff; +} + +/* Interaction states +----------------------------------*/ +.ui-state-default, +.ui-widget-content .ui-state-default, +.ui-widget-header .ui-state-default { + border: 1px solid #d3d3d3; + background: #ffffff url(images/ui-bg_flat_100_ffffff_40x100.png) 50% 50% repeat-x; + font-weight: normal; + color: #555555; +} +.ui-state-default a, +.ui-state-default a:link, +.ui-state-default a:visited { + color: #555555; + text-decoration: none; +} +.ui-state-hover, +.ui-widget-content .ui-state-hover, +.ui-widget-header .ui-state-hover, +.ui-state-focus, +.ui-widget-content .ui-state-focus, +.ui-widget-header .ui-state-focus { + border: 1px solid #49c0c1; + background: #49c0c1 url(images/ui-bg_flat_100_49c0c1_40x100.png) 50% 50% repeat-x; + font-weight: normal; + color: #ffffff; +} +.ui-state-hover a, +.ui-state-hover a:hover, +.ui-state-hover a:link, +.ui-state-hover a:visited { + color: #ffffff; + text-decoration: none; +} +.ui-state-active, +.ui-widget-content .ui-state-active, +.ui-widget-header .ui-state-active { + border: 1px solid #aaaaaa; + background: #49c0c1 url(images/ui-bg_glass_65_49c0c1_1x400.png) 50% 50% repeat-x !important; + font-weight: normal; + color: white; +} +.ui-state-active a, +.ui-state-active a:link, +.ui-state-active a:visited { + color: #212121; + text-decoration: none; +} + +/* Interaction Cues +----------------------------------*/ +.ui-state-highlight, +.ui-widget-content .ui-state-highlight, +.ui-widget-header .ui-state-highlight { + border: 1px solid #e8f8f9; + background: #e8f8f9 url(images/ui-bg_flat_100_e8f8f9_40x100.png) 50% 50% repeat-x; + color: #363636; +} +.ui-state-highlight a, +.ui-widget-content .ui-state-highlight a, +.ui-widget-header .ui-state-highlight a { + color: #363636; +} +.ui-state-error, +.ui-widget-content .ui-state-error, +.ui-widget-header .ui-state-error { + border: 1px solid #f7474e; + background: #f7474e url(images/ui-bg_flat_100_f7474e_40x100.png) 50% 50% repeat-x; + color: #ffffff; +} +.ui-state-error a, +.ui-widget-content .ui-state-error a, +.ui-widget-header .ui-state-error a { + color: #ffffff; +} +.ui-state-error-text, +.ui-widget-content .ui-state-error-text, +.ui-widget-header .ui-state-error-text { + color: #ffffff; +} +.ui-priority-primary, +.ui-widget-content .ui-priority-primary, +.ui-widget-header .ui-priority-primary { + font-weight: bold; +} +.ui-priority-secondary, +.ui-widget-content .ui-priority-secondary, +.ui-widget-header .ui-priority-secondary { + opacity: .7; + filter:Alpha(Opacity=70); + font-weight: normal; +} +.ui-state-disabled, +.ui-widget-content .ui-state-disabled, +.ui-widget-header .ui-state-disabled { + opacity: .35; + filter:Alpha(Opacity=35); + background-image: none; +} +.ui-state-disabled .ui-icon { + filter:Alpha(Opacity=35); /* For IE8 - See #6059 */ +} + +/* Icons +----------------------------------*/ + +/* states and images */ +.ui-icon { + width: 16px; + height: 16px; +} +.ui-icon, +.ui-widget-content .ui-icon { + background-image: url(images/ui-icons_222222_256x240.png); +} +.ui-widget-header .ui-icon { + background-image: url(images/ui-icons_ffffff_256x240.png); +} +.ui-state-default .ui-icon { + background-image: url(images/ui-icons_ffffff_256x240.png); +} +.ui-state-hover .ui-icon, +.ui-state-focus .ui-icon { + background-image: url(images/ui-icons_ffffff_256x240.png); +} +.ui-state-active .ui-icon { + background-image: url(images/ui-icons_454545_256x240.png); +} +.ui-state-highlight .ui-icon { + background-image: url(images/ui-icons_49c0c1_256x240.png); +} +.ui-state-error .ui-icon, +.ui-state-error-text .ui-icon { + background-image: url(images/ui-icons_ffffff_256x240.png); +} + +/* positioning */ +.ui-icon-blank { background-position: 16px 16px; } +.ui-icon-carat-1-n { background-position: 0 0; } +.ui-icon-carat-1-ne { background-position: -16px 0; } +.ui-icon-carat-1-e { background-position: -32px 0; } +.ui-icon-carat-1-se { background-position: -48px 0; } +.ui-icon-carat-1-s { background-position: -64px 0; } +.ui-icon-carat-1-sw { background-position: -80px 0; } +.ui-icon-carat-1-w { background-position: -96px 0; } +.ui-icon-carat-1-nw { background-position: -112px 0; } +.ui-icon-carat-2-n-s { background-position: -128px 0; } +.ui-icon-carat-2-e-w { background-position: -144px 0; } +.ui-icon-triangle-1-n { background-position: 0 -16px; } +.ui-icon-triangle-1-ne { background-position: -16px -16px; } +.ui-icon-triangle-1-e { background-position: -32px -16px; } +.ui-icon-triangle-1-se { background-position: -48px -16px; } +.ui-icon-triangle-1-s { background-position: -64px -16px; } +.ui-icon-triangle-1-sw { background-position: -80px -16px; } +.ui-icon-triangle-1-w { background-position: -96px -16px; } +.ui-icon-triangle-1-nw { background-position: -112px -16px; } +.ui-icon-triangle-2-n-s { background-position: -128px -16px; } +.ui-icon-triangle-2-e-w { background-position: -144px -16px; } +.ui-icon-arrow-1-n { background-position: 0 -32px; } +.ui-icon-arrow-1-ne { background-position: -16px -32px; } +.ui-icon-arrow-1-e { background-position: -32px -32px; } +.ui-icon-arrow-1-se { background-position: -48px -32px; } +.ui-icon-arrow-1-s { background-position: -64px -32px; } +.ui-icon-arrow-1-sw { background-position: -80px -32px; } +.ui-icon-arrow-1-w { background-position: -96px -32px; } +.ui-icon-arrow-1-nw { background-position: -112px -32px; } +.ui-icon-arrow-2-n-s { background-position: -128px -32px; } +.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } +.ui-icon-arrow-2-e-w { background-position: -160px -32px; } +.ui-icon-arrow-2-se-nw { background-position: -176px -32px; } +.ui-icon-arrowstop-1-n { background-position: -192px -32px; } +.ui-icon-arrowstop-1-e { background-position: -208px -32px; } +.ui-icon-arrowstop-1-s { background-position: -224px -32px; } +.ui-icon-arrowstop-1-w { background-position: -240px -32px; } +.ui-icon-arrowthick-1-n { background-position: 0 -48px; } +.ui-icon-arrowthick-1-ne { background-position: -16px -48px; } +.ui-icon-arrowthick-1-e { background-position: -32px -48px; } +.ui-icon-arrowthick-1-se { background-position: -48px -48px; } +.ui-icon-arrowthick-1-s { background-position: -64px -48px; } +.ui-icon-arrowthick-1-sw { background-position: -80px -48px; } +.ui-icon-arrowthick-1-w { background-position: -96px -48px; } +.ui-icon-arrowthick-1-nw { background-position: -112px -48px; } +.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } +.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } +.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } +.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } +.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } +.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } +.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } +.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } +.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } +.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } +.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } +.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } +.ui-icon-arrowreturn-1-w { background-position: -64px -64px; } +.ui-icon-arrowreturn-1-n { background-position: -80px -64px; } +.ui-icon-arrowreturn-1-e { background-position: -96px -64px; } +.ui-icon-arrowreturn-1-s { background-position: -112px -64px; } +.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } +.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } +.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } +.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } +.ui-icon-arrow-4 { background-position: 0 -80px; } +.ui-icon-arrow-4-diag { background-position: -16px -80px; } +.ui-icon-extlink { background-position: -32px -80px; } +.ui-icon-newwin { background-position: -48px -80px; } +.ui-icon-refresh { background-position: -64px -80px; } +.ui-icon-shuffle { background-position: -80px -80px; } +.ui-icon-transfer-e-w { background-position: -96px -80px; } +.ui-icon-transferthick-e-w { background-position: -112px -80px; } +.ui-icon-folder-collapsed { background-position: 0 -96px; } +.ui-icon-folder-open { background-position: -16px -96px; } +.ui-icon-document { background-position: -32px -96px; } +.ui-icon-document-b { background-position: -48px -96px; } +.ui-icon-note { background-position: -64px -96px; } +.ui-icon-mail-closed { background-position: -80px -96px; } +.ui-icon-mail-open { background-position: -96px -96px; } +.ui-icon-suitcase { background-position: -112px -96px; } +.ui-icon-comment { background-position: -128px -96px; } +.ui-icon-person { background-position: -144px -96px; } +.ui-icon-print { background-position: -160px -96px; } +.ui-icon-trash { background-position: -176px -96px; } +.ui-icon-locked { background-position: -192px -96px; } +.ui-icon-unlocked { background-position: -208px -96px; } +.ui-icon-bookmark { background-position: -224px -96px; } +.ui-icon-tag { background-position: -240px -96px; } +.ui-icon-home { background-position: 0 -112px; } +.ui-icon-flag { background-position: -16px -112px; } +.ui-icon-calendar { background-position: -32px -112px; } +.ui-icon-cart { background-position: -48px -112px; } +.ui-icon-pencil { background-position: -64px -112px; } +.ui-icon-clock { background-position: -80px -112px; } +.ui-icon-disk { background-position: -96px -112px; } +.ui-icon-calculator { background-position: -112px -112px; } +.ui-icon-zoomin { background-position: -128px -112px; } +.ui-icon-zoomout { background-position: -144px -112px; } +.ui-icon-search { background-position: -160px -112px; } +.ui-icon-wrench { background-position: -176px -112px; } +.ui-icon-gear { background-position: -192px -112px; } +.ui-icon-heart { background-position: -208px -112px; } +.ui-icon-star { background-position: -224px -112px; } +.ui-icon-link { background-position: -240px -112px; } +.ui-icon-cancel { background-position: 0 -128px; } +.ui-icon-plus { background-position: -16px -128px; } +.ui-icon-plusthick { background-position: -32px -128px; } +.ui-icon-minus { background-position: -48px -128px; } +.ui-icon-minusthick { background-position: -64px -128px; } +.ui-icon-close { background-position: -80px -128px; } +.ui-icon-closethick { background-position: -96px -128px; } +.ui-icon-key { background-position: -112px -128px; } +.ui-icon-lightbulb { background-position: -128px -128px; } +.ui-icon-scissors { background-position: -144px -128px; } +.ui-icon-clipboard { background-position: -160px -128px; } +.ui-icon-copy { background-position: -176px -128px; } +.ui-icon-contact { background-position: -192px -128px; } +.ui-icon-image { background-position: -208px -128px; } +.ui-icon-video { background-position: -224px -128px; } +.ui-icon-script { background-position: -240px -128px; } +.ui-icon-alert { background-position: 0 -144px; } +.ui-icon-info { background-position: -16px -144px; } +.ui-icon-notice { background-position: -32px -144px; } +.ui-icon-help { background-position: -48px -144px; } +.ui-icon-check { background-position: -64px -144px; } +.ui-icon-bullet { background-position: -80px -144px; } +.ui-icon-radio-on { background-position: -96px -144px; } +.ui-icon-radio-off { background-position: -112px -144px; } +.ui-icon-pin-w { background-position: -128px -144px; } +.ui-icon-pin-s { background-position: -144px -144px; } +.ui-icon-play { background-position: 0 -160px; } +.ui-icon-pause { background-position: -16px -160px; } +.ui-icon-seek-next { background-position: -32px -160px; } +.ui-icon-seek-prev { background-position: -48px -160px; } +.ui-icon-seek-end { background-position: -64px -160px; } +.ui-icon-seek-start { background-position: -80px -160px; } +/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */ +.ui-icon-seek-first { background-position: -80px -160px; } +.ui-icon-stop { background-position: -96px -160px; } +.ui-icon-eject { background-position: -112px -160px; } +.ui-icon-volume-off { background-position: -128px -160px; } +.ui-icon-volume-on { background-position: -144px -160px; } +.ui-icon-power { background-position: 0 -176px; } +.ui-icon-signal-diag { background-position: -16px -176px; } +.ui-icon-signal { background-position: -32px -176px; } +.ui-icon-battery-0 { background-position: -48px -176px; } +.ui-icon-battery-1 { background-position: -64px -176px; } +.ui-icon-battery-2 { background-position: -80px -176px; } +.ui-icon-battery-3 { background-position: -96px -176px; } +.ui-icon-circle-plus { background-position: 0 -192px; } +.ui-icon-circle-minus { background-position: -16px -192px; } +.ui-icon-circle-close { background-position: -32px -192px; } +.ui-icon-circle-triangle-e { background-position: -48px -192px; } +.ui-icon-circle-triangle-s { background-position: -64px -192px; } +.ui-icon-circle-triangle-w { background-position: -80px -192px; } +.ui-icon-circle-triangle-n { background-position: -96px -192px; } +.ui-icon-circle-arrow-e { background-position: -112px -192px; } +.ui-icon-circle-arrow-s { background-position: -128px -192px; } +.ui-icon-circle-arrow-w { background-position: -144px -192px; } +.ui-icon-circle-arrow-n { background-position: -160px -192px; } +.ui-icon-circle-zoomin { background-position: -176px -192px; } +.ui-icon-circle-zoomout { background-position: -192px -192px; } +.ui-icon-circle-check { background-position: -208px -192px; } +.ui-icon-circlesmall-plus { background-position: 0 -208px; } +.ui-icon-circlesmall-minus { background-position: -16px -208px; } +.ui-icon-circlesmall-close { background-position: -32px -208px; } +.ui-icon-squaresmall-plus { background-position: -48px -208px; } +.ui-icon-squaresmall-minus { background-position: -64px -208px; } +.ui-icon-squaresmall-close { background-position: -80px -208px; } +.ui-icon-grip-dotted-vertical { background-position: 0 -224px; } +.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } +.ui-icon-grip-solid-vertical { background-position: -32px -224px; } +.ui-icon-grip-solid-horizontal { background-position: -48px -224px; } +.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } +.ui-icon-grip-diagonal-se { background-position: -80px -224px; } + + +/* Misc visuals +----------------------------------*/ + +/* Corner radius */ +.ui-corner-all, +.ui-corner-top, +.ui-corner-left, +.ui-corner-tl { + border-top-left-radius: 0; +} +.ui-corner-all, +.ui-corner-top, +.ui-corner-right, +.ui-corner-tr { + border-top-right-radius: 0; +} +.ui-corner-all, +.ui-corner-bottom, +.ui-corner-left, +.ui-corner-bl { + border-bottom-left-radius: 0; +} +.ui-corner-all, +.ui-corner-bottom, +.ui-corner-right, +.ui-corner-br { + border-bottom-right-radius: 0; +} + +/* Overlays */ +.ui-widget-overlay { + background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; + opacity: .3; + filter: Alpha(Opacity=30); +} +.ui-widget-shadow { + margin: -8px 0 0 -8px; + padding: 8px; + background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; + opacity: .3; + filter: Alpha(Opacity=30); + border-radius: 8px; +} diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/jquery-ui-smoothness.css b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/jquery-ui-smoothness.css new file mode 100755 index 000000000..39ec82f20 --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/jquery-ui-smoothness.css @@ -0,0 +1,1177 @@ +/*! jQuery UI - v1.10.3 - 2013-09-18 +* http://jqueryui.com +* Includes: jquery.ui.core.css, jquery.ui.resizable.css, jquery.ui.selectable.css, jquery.ui.accordion.css, jquery.ui.autocomplete.css, jquery.ui.button.css, jquery.ui.datepicker.css, jquery.ui.dialog.css, jquery.ui.menu.css, jquery.ui.progressbar.css, jquery.ui.slider.css, jquery.ui.spinner.css, jquery.ui.tabs.css, jquery.ui.tooltip.css, jquery.ui.theme.css +* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=highlight_soft&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=flat&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=glass&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=glass&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=glass&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=glass&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px +* Copyright 2013 jQuery Foundation and other contributors; Licensed MIT */ + +/* Layout helpers +----------------------------------*/ +.ui-helper-hidden { + display: none; +} +.ui-helper-hidden-accessible { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} +.ui-helper-reset { + margin: 0; + padding: 0; + border: 0; + outline: 0; + line-height: 1.3; + text-decoration: none; + font-size: 100%; + list-style: none; +} +.ui-helper-clearfix:before, +.ui-helper-clearfix:after { + content: ""; + display: table; + border-collapse: collapse; +} +.ui-helper-clearfix:after { + clear: both; +} +.ui-helper-clearfix { + min-height: 0; /* support: IE7 */ +} +.ui-helper-zfix { + width: 100%; + height: 100%; + top: 0; + left: 0; + position: absolute; + opacity: 0; + filter:Alpha(Opacity=0); +} + +.ui-front { + z-index: 100; +} + + +/* Interaction Cues +----------------------------------*/ +.ui-state-disabled { + cursor: default !important; +} + + +/* Icons +----------------------------------*/ + +/* states and images */ +.ui-icon { + display: block; + text-indent: -99999px; + overflow: hidden; + background-repeat: no-repeat; +} + + +/* Misc visuals +----------------------------------*/ + +/* Overlays */ +.ui-widget-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.ui-resizable { + position: relative; +} +.ui-resizable-handle { + position: absolute; + font-size: 0.1px; + display: block; +} +.ui-resizable-disabled .ui-resizable-handle, +.ui-resizable-autohide .ui-resizable-handle { + display: none; +} +.ui-resizable-n { + cursor: n-resize; + height: 7px; + width: 100%; + top: -5px; + left: 0; +} +.ui-resizable-s { + cursor: s-resize; + height: 7px; + width: 100%; + bottom: -5px; + left: 0; +} +.ui-resizable-e { + cursor: e-resize; + width: 7px; + right: -5px; + top: 0; + height: 100%; +} +.ui-resizable-w { + cursor: w-resize; + width: 7px; + left: -5px; + top: 0; + height: 100%; +} +.ui-resizable-se { + cursor: se-resize; + width: 12px; + height: 12px; + right: 1px; + bottom: 1px; +} +.ui-resizable-sw { + cursor: sw-resize; + width: 9px; + height: 9px; + left: -5px; + bottom: -5px; +} +.ui-resizable-nw { + cursor: nw-resize; + width: 9px; + height: 9px; + left: -5px; + top: -5px; +} +.ui-resizable-ne { + cursor: ne-resize; + width: 9px; + height: 9px; + right: -5px; + top: -5px; +} +.ui-selectable-helper { + position: absolute; + z-index: 100; + border: 1px dotted black; +} +.ui-accordion .ui-accordion-header { + display: block; + cursor: pointer; + position: relative; + margin-top: 2px; + padding: .5em .5em .5em .7em; + min-height: 0; /* support: IE7 */ +} +.ui-accordion .ui-accordion-icons { + padding-left: 2.2em; +} +.ui-accordion .ui-accordion-noicons { + padding-left: .7em; +} +.ui-accordion .ui-accordion-icons .ui-accordion-icons { + padding-left: 2.2em; +} +.ui-accordion .ui-accordion-header .ui-accordion-header-icon { + position: absolute; + left: .5em; + top: 50%; + margin-top: -8px; +} +.ui-accordion .ui-accordion-content { + padding: 1em 2.2em; + border-top: 0; + overflow: auto; +} +.ui-autocomplete { + position: absolute; + top: 0; + left: 0; + cursor: default; +} +.ui-button { + display: inline-block; + position: relative; + padding: 0; + line-height: normal; + margin-right: .1em; + cursor: pointer; + vertical-align: middle; + text-align: center; + overflow: visible; /* removes extra width in IE */ +} +.ui-button, +.ui-button:link, +.ui-button:visited, +.ui-button:hover, +.ui-button:active { + text-decoration: none; +} +/* to make room for the icon, a width needs to be set here */ +.ui-button-icon-only { + width: 2.2em; +} +/* button elements seem to need a little more width */ +button.ui-button-icon-only { + width: 2.4em; +} +.ui-button-icons-only { + width: 3.4em; +} +button.ui-button-icons-only { + width: 3.7em; +} + +/* button text element */ +.ui-button .ui-button-text { + display: block; + line-height: normal; +} +.ui-button-text-only .ui-button-text { + padding: .4em 1em; +} +.ui-button-icon-only .ui-button-text, +.ui-button-icons-only .ui-button-text { + padding: .4em; + text-indent: -9999999px; +} +.ui-button-text-icon-primary .ui-button-text, +.ui-button-text-icons .ui-button-text { + padding: .4em 1em .4em 2.1em; +} +.ui-button-text-icon-secondary .ui-button-text, +.ui-button-text-icons .ui-button-text { + padding: .4em 2.1em .4em 1em; +} +.ui-button-text-icons .ui-button-text { + padding-left: 2.1em; + padding-right: 2.1em; +} +/* no icon support for input elements, provide padding by default */ +input.ui-button { + padding: .4em 1em; +} + +/* button icon element(s) */ +.ui-button-icon-only .ui-icon, +.ui-button-text-icon-primary .ui-icon, +.ui-button-text-icon-secondary .ui-icon, +.ui-button-text-icons .ui-icon, +.ui-button-icons-only .ui-icon { + position: absolute; + top: 50%; + margin-top: -8px; +} +.ui-button-icon-only .ui-icon { + left: 50%; + margin-left: -8px; +} +.ui-button-text-icon-primary .ui-button-icon-primary, +.ui-button-text-icons .ui-button-icon-primary, +.ui-button-icons-only .ui-button-icon-primary { + left: .5em; +} +.ui-button-text-icon-secondary .ui-button-icon-secondary, +.ui-button-text-icons .ui-button-icon-secondary, +.ui-button-icons-only .ui-button-icon-secondary { + right: .5em; +} + +/* button sets */ +.ui-buttonset { + margin-right: 7px; +} +.ui-buttonset .ui-button { + margin-left: 0; + margin-right: -.3em; +} + +/* workarounds */ +/* reset extra padding in Firefox, see h5bp.com/l */ +input.ui-button::-moz-focus-inner, +button.ui-button::-moz-focus-inner { + border: 0; + padding: 0; +} +.ui-datepicker { + width: 17em; + padding: .2em .2em 0; + display: none; +} +.ui-datepicker .ui-datepicker-header { + position: relative; + padding: .2em 0; +} +.ui-datepicker .ui-datepicker-prev, +.ui-datepicker .ui-datepicker-next { + position: absolute; + top: 2px; + width: 1.8em; + height: 1.8em; +} +.ui-datepicker .ui-datepicker-prev-hover, +.ui-datepicker .ui-datepicker-next-hover { + top: 1px; +} +.ui-datepicker .ui-datepicker-prev { + left: 2px; +} +.ui-datepicker .ui-datepicker-next { + right: 2px; +} +.ui-datepicker .ui-datepicker-prev-hover { + left: 1px; +} +.ui-datepicker .ui-datepicker-next-hover { + right: 1px; +} +.ui-datepicker .ui-datepicker-prev span, +.ui-datepicker .ui-datepicker-next span { + display: block; + position: absolute; + left: 50%; + margin-left: -8px; + top: 50%; + margin-top: -8px; +} +.ui-datepicker .ui-datepicker-title { + margin: 0 2.3em; + line-height: 1.8em; + text-align: center; +} +.ui-datepicker .ui-datepicker-title select { + font-size: 1em; + margin: 1px 0; +} +.ui-datepicker select.ui-datepicker-month-year { + width: 100%; +} +.ui-datepicker select.ui-datepicker-month, +.ui-datepicker select.ui-datepicker-year { + width: 49%; +} +.ui-datepicker table { + width: 100%; + font-size: .9em; + border-collapse: collapse; + margin: 0 0 .4em; +} +.ui-datepicker th { + padding: .7em .3em; + text-align: center; + font-weight: bold; + border: 0; +} +.ui-datepicker td { + border: 0; + padding: 1px; +} +.ui-datepicker td span, +.ui-datepicker td a { + display: block; + padding: .2em; + text-align: right; + text-decoration: none; +} +.ui-datepicker .ui-datepicker-buttonpane { + background-image: none; + margin: .7em 0 0 0; + padding: 0 .2em; + border-left: 0; + border-right: 0; + border-bottom: 0; +} +.ui-datepicker .ui-datepicker-buttonpane button { + float: right; + margin: .5em .2em .4em; + cursor: pointer; + padding: .2em .6em .3em .6em; + width: auto; + overflow: visible; +} +.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { + float: left; +} + +/* with multiple calendars */ +.ui-datepicker.ui-datepicker-multi { + width: auto; +} +.ui-datepicker-multi .ui-datepicker-group { + float: left; +} +.ui-datepicker-multi .ui-datepicker-group table { + width: 95%; + margin: 0 auto .4em; +} +.ui-datepicker-multi-2 .ui-datepicker-group { + width: 50%; +} +.ui-datepicker-multi-3 .ui-datepicker-group { + width: 33.3%; +} +.ui-datepicker-multi-4 .ui-datepicker-group { + width: 25%; +} +.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, +.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { + border-left-width: 0; +} +.ui-datepicker-multi .ui-datepicker-buttonpane { + clear: left; +} +.ui-datepicker-row-break { + clear: both; + width: 100%; + font-size: 0; +} + +/* RTL support */ +.ui-datepicker-rtl { + direction: rtl; +} +.ui-datepicker-rtl .ui-datepicker-prev { + right: 2px; + left: auto; +} +.ui-datepicker-rtl .ui-datepicker-next { + left: 2px; + right: auto; +} +.ui-datepicker-rtl .ui-datepicker-prev:hover { + right: 1px; + left: auto; +} +.ui-datepicker-rtl .ui-datepicker-next:hover { + left: 1px; + right: auto; +} +.ui-datepicker-rtl .ui-datepicker-buttonpane { + clear: right; +} +.ui-datepicker-rtl .ui-datepicker-buttonpane button { + float: left; +} +.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, +.ui-datepicker-rtl .ui-datepicker-group { + float: right; +} +.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, +.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { + border-right-width: 0; + border-left-width: 1px; +} +.ui-dialog { + position: absolute; + top: 0; + left: 0; + padding: .2em; + outline: 0; +} +.ui-dialog .ui-dialog-titlebar { + padding: .4em 1em; + position: relative; +} +.ui-dialog .ui-dialog-title { + float: left; + margin: .1em 0; + white-space: nowrap; + width: 90%; + overflow: hidden; + text-overflow: ellipsis; +} +.ui-dialog .ui-dialog-titlebar-close { + position: absolute; + right: .3em; + top: 50%; + width: 21px; + margin: -10px 0 0 0; + padding: 1px; + height: 20px; +} +.ui-dialog .ui-dialog-content { + position: relative; + border: 0; + padding: .5em 1em; + background: none; + overflow: auto; +} +.ui-dialog .ui-dialog-buttonpane { + text-align: left; + border-width: 1px 0 0 0; + background-image: none; + margin-top: .5em; + padding: .3em 1em .5em .4em; +} +.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { + float: right; +} +.ui-dialog .ui-dialog-buttonpane button { + margin: .5em .4em .5em 0; + cursor: pointer; +} +.ui-dialog .ui-resizable-se { + width: 12px; + height: 12px; + right: -5px; + bottom: -5px; + background-position: 16px 16px; +} +.ui-draggable .ui-dialog-titlebar { + cursor: move; +} +.ui-menu { + list-style: none; + padding: 2px; + margin: 0; + display: block; + outline: none; +} +.ui-menu .ui-menu { + margin-top: -3px; + position: absolute; +} +.ui-menu .ui-menu-item { + margin: 0; + padding: 0; + width: 100%; + /* support: IE10, see #8844 */ + list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); +} +.ui-menu .ui-menu-divider { + margin: 5px -2px 5px -2px; + height: 0; + font-size: 0; + line-height: 0; + border-width: 1px 0 0 0; +} +.ui-menu .ui-menu-item a { + text-decoration: none; + display: block; + padding: 2px .4em; + line-height: 1.5; + min-height: 0; /* support: IE7 */ + font-weight: normal; +} +.ui-menu .ui-menu-item a.ui-state-focus, +.ui-menu .ui-menu-item a.ui-state-active { + font-weight: normal; + margin: -1px; +} + +.ui-menu .ui-state-disabled { + font-weight: normal; + margin: .4em 0 .2em; + line-height: 1.5; +} +.ui-menu .ui-state-disabled a { + cursor: default; +} + +/* icon support */ +.ui-menu-icons { + position: relative; +} +.ui-menu-icons .ui-menu-item a { + position: relative; + padding-left: 2em; +} + +/* left-aligned */ +.ui-menu .ui-icon { + position: absolute; + top: .2em; + left: .2em; +} + +/* right-aligned */ +.ui-menu .ui-menu-icon { + position: static; + float: right; +} +.ui-progressbar { + height: 2em; + text-align: left; + overflow: hidden; +} +.ui-progressbar .ui-progressbar-value { + margin: -1px; + height: 100%; +} +.ui-progressbar .ui-progressbar-overlay { + background: url("images/animated-overlay.gif"); + height: 100%; + filter: alpha(opacity=25); + opacity: 0.25; +} +.ui-progressbar-indeterminate .ui-progressbar-value { + background-image: none; +} +.ui-slider { + position: relative; + text-align: left; +} +.ui-slider .ui-slider-handle { + position: absolute; + z-index: 2; + width: 1.2em; + height: 1.2em; + cursor: default; +} +.ui-slider .ui-slider-range { + position: absolute; + z-index: 1; + font-size: .7em; + display: block; + border: 0; + background-position: 0 0; +} + +/* For IE8 - See #6727 */ +.ui-slider.ui-state-disabled .ui-slider-handle, +.ui-slider.ui-state-disabled .ui-slider-range { + filter: inherit; +} + +.ui-slider-horizontal { + height: .8em; +} +.ui-slider-horizontal .ui-slider-handle { + top: -.3em; + margin-left: -.6em; +} +.ui-slider-horizontal .ui-slider-range { + top: 0; + height: 100%; +} +.ui-slider-horizontal .ui-slider-range-min { + left: 0; +} +.ui-slider-horizontal .ui-slider-range-max { + right: 0; +} + +.ui-slider-vertical { + width: .8em; + height: 100px; +} +.ui-slider-vertical .ui-slider-handle { + left: -.3em; + margin-left: 0; + margin-bottom: -.6em; +} +.ui-slider-vertical .ui-slider-range { + left: 0; + width: 100%; +} +.ui-slider-vertical .ui-slider-range-min { + bottom: 0; +} +.ui-slider-vertical .ui-slider-range-max { + top: 0; +} +.ui-spinner { + position: relative; + display: inline-block; + overflow: hidden; + padding: 0; + vertical-align: middle; +} +.ui-spinner-input { + border: none; + background: none; + color: inherit; + padding: 0; + margin: .2em 0; + vertical-align: middle; + margin-left: .4em; + margin-right: 22px; +} +.ui-spinner-button { + width: 16px; + height: 50%; + font-size: .5em; + padding: 0; + margin: 0; + text-align: center; + position: absolute; + cursor: default; + display: block; + overflow: hidden; + right: 0; +} +/* more specificity required here to overide default borders */ +.ui-spinner a.ui-spinner-button { + border-top: none; + border-bottom: none; + border-right: none; +} +/* vertical centre icon */ +.ui-spinner .ui-icon { + position: absolute; + margin-top: -8px; + top: 50%; + left: 0; +} +.ui-spinner-up { + top: 0; +} +.ui-spinner-down { + bottom: 0; +} + +/* TR overrides */ +.ui-spinner .ui-icon-triangle-1-s { + /* need to fix icons sprite */ + background-position: -65px -16px; +} +.ui-tabs { + position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ + padding: .2em; +} +.ui-tabs .ui-tabs-nav { + margin: 0; + padding: .2em .2em 0; +} +.ui-tabs .ui-tabs-nav li { + list-style: none; + float: left; + position: relative; + top: 0; + margin: 1px .2em 0 0; + border-bottom-width: 0; + padding: 0; + white-space: nowrap; +} +.ui-tabs .ui-tabs-nav li a { + float: left; + padding: .5em 1em; + text-decoration: none; +} +.ui-tabs .ui-tabs-nav li.ui-tabs-active { + margin-bottom: -1px; + padding-bottom: 1px; +} +.ui-tabs .ui-tabs-nav li.ui-tabs-active a, +.ui-tabs .ui-tabs-nav li.ui-state-disabled a, +.ui-tabs .ui-tabs-nav li.ui-tabs-loading a { + cursor: text; +} +.ui-tabs .ui-tabs-nav li a, /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ +.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a { + cursor: pointer; +} +.ui-tabs .ui-tabs-panel { + display: block; + border-width: 0; + padding: 1em 1.4em; + background: none; +} +.ui-tooltip { + padding: 8px; + position: absolute; + z-index: 9999; + max-width: 300px; + -webkit-box-shadow: 0 0 5px #aaa; + box-shadow: 0 0 5px #aaa; +} +body .ui-tooltip { + border-width: 2px; +} + +/* Component containers +----------------------------------*/ +.ui-widget { + font-family: Verdana,Arial,sans-serif; + font-size: 1.1em; +} +.ui-widget .ui-widget { + font-size: 1em; +} +.ui-widget input, +.ui-widget select, +.ui-widget textarea, +.ui-widget button { + font-family: Verdana,Arial,sans-serif; + font-size: 1em; +} +.ui-widget-content { + border: 1px solid #aaaaaa; + background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; + color: #222222; +} +.ui-widget-content a { + color: #222222; +} +.ui-widget-header { + border: 1px solid #aaaaaa; + background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x; + color: #222222; + font-weight: bold; +} +.ui-widget-header a { + color: #222222; +} + +/* Interaction states +----------------------------------*/ +.ui-state-default, +.ui-widget-content .ui-state-default, +.ui-widget-header .ui-state-default { + border: 1px solid #d3d3d3; + background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x; + font-weight: normal; + color: #555555; +} +.ui-state-default a, +.ui-state-default a:link, +.ui-state-default a:visited { + color: #555555; + text-decoration: none; +} +.ui-state-hover, +.ui-widget-content .ui-state-hover, +.ui-widget-header .ui-state-hover, +.ui-state-focus, +.ui-widget-content .ui-state-focus, +.ui-widget-header .ui-state-focus { + border: 1px solid #999999; + background: #dadada url(images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x; + font-weight: normal; + color: #212121; +} +.ui-state-hover a, +.ui-state-hover a:hover, +.ui-state-hover a:link, +.ui-state-hover a:visited { + color: #212121; + text-decoration: none; +} +.ui-state-active, +.ui-widget-content .ui-state-active, +.ui-widget-header .ui-state-active { + border: 1px solid #aaaaaa; + background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; + font-weight: normal; + color: #212121; +} +.ui-state-active a, +.ui-state-active a:link, +.ui-state-active a:visited { + color: #212121; + text-decoration: none; +} + +/* Interaction Cues +----------------------------------*/ +.ui-state-highlight, +.ui-widget-content .ui-state-highlight, +.ui-widget-header .ui-state-highlight { + border: 1px solid #fcefa1; + background: #fbf9ee url(images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x; + color: #363636; +} +.ui-state-highlight a, +.ui-widget-content .ui-state-highlight a, +.ui-widget-header .ui-state-highlight a { + color: #363636; +} +.ui-state-error, +.ui-widget-content .ui-state-error, +.ui-widget-header .ui-state-error { + border: 1px solid #cd0a0a; + background: #fef1ec url(images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x; + color: #cd0a0a; +} +.ui-state-error a, +.ui-widget-content .ui-state-error a, +.ui-widget-header .ui-state-error a { + color: #cd0a0a; +} +.ui-state-error-text, +.ui-widget-content .ui-state-error-text, +.ui-widget-header .ui-state-error-text { + color: #cd0a0a; +} +.ui-priority-primary, +.ui-widget-content .ui-priority-primary, +.ui-widget-header .ui-priority-primary { + font-weight: bold; +} +.ui-priority-secondary, +.ui-widget-content .ui-priority-secondary, +.ui-widget-header .ui-priority-secondary { + opacity: .7; + filter:Alpha(Opacity=70); + font-weight: normal; +} +.ui-state-disabled, +.ui-widget-content .ui-state-disabled, +.ui-widget-header .ui-state-disabled { + opacity: .35; + filter:Alpha(Opacity=35); + background-image: none; +} +.ui-state-disabled .ui-icon { + filter:Alpha(Opacity=35); /* For IE8 - See #6059 */ +} + +/* Icons +----------------------------------*/ + +/* states and images */ +.ui-icon { + width: 16px; + height: 16px; +} +.ui-icon, +.ui-widget-content .ui-icon { + background-image: url(images/ui-icons_222222_256x240.png); +} +.ui-widget-header .ui-icon { + background-image: url(images/ui-icons_222222_256x240.png); +} +.ui-state-default .ui-icon { + background-image: url(images/ui-icons_888888_256x240.png); +} +.ui-state-hover .ui-icon, +.ui-state-focus .ui-icon { + background-image: url(images/ui-icons_454545_256x240.png); +} +.ui-state-active .ui-icon { + background-image: url(images/ui-icons_454545_256x240.png); +} +.ui-state-highlight .ui-icon { + background-image: url(images/ui-icons_2e83ff_256x240.png); +} +.ui-state-error .ui-icon, +.ui-state-error-text .ui-icon { + background-image: url(images/ui-icons_cd0a0a_256x240.png); +} + +/* positioning */ +.ui-icon-blank { background-position: 16px 16px; } +.ui-icon-carat-1-n { background-position: 0 0; } +.ui-icon-carat-1-ne { background-position: -16px 0; } +.ui-icon-carat-1-e { background-position: -32px 0; } +.ui-icon-carat-1-se { background-position: -48px 0; } +.ui-icon-carat-1-s { background-position: -64px 0; } +.ui-icon-carat-1-sw { background-position: -80px 0; } +.ui-icon-carat-1-w { background-position: -96px 0; } +.ui-icon-carat-1-nw { background-position: -112px 0; } +.ui-icon-carat-2-n-s { background-position: -128px 0; } +.ui-icon-carat-2-e-w { background-position: -144px 0; } +.ui-icon-triangle-1-n { background-position: 0 -16px; } +.ui-icon-triangle-1-ne { background-position: -16px -16px; } +.ui-icon-triangle-1-e { background-position: -32px -16px; } +.ui-icon-triangle-1-se { background-position: -48px -16px; } +.ui-icon-triangle-1-s { background-position: -64px -16px; } +.ui-icon-triangle-1-sw { background-position: -80px -16px; } +.ui-icon-triangle-1-w { background-position: -96px -16px; } +.ui-icon-triangle-1-nw { background-position: -112px -16px; } +.ui-icon-triangle-2-n-s { background-position: -128px -16px; } +.ui-icon-triangle-2-e-w { background-position: -144px -16px; } +.ui-icon-arrow-1-n { background-position: 0 -32px; } +.ui-icon-arrow-1-ne { background-position: -16px -32px; } +.ui-icon-arrow-1-e { background-position: -32px -32px; } +.ui-icon-arrow-1-se { background-position: -48px -32px; } +.ui-icon-arrow-1-s { background-position: -64px -32px; } +.ui-icon-arrow-1-sw { background-position: -80px -32px; } +.ui-icon-arrow-1-w { background-position: -96px -32px; } +.ui-icon-arrow-1-nw { background-position: -112px -32px; } +.ui-icon-arrow-2-n-s { background-position: -128px -32px; } +.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } +.ui-icon-arrow-2-e-w { background-position: -160px -32px; } +.ui-icon-arrow-2-se-nw { background-position: -176px -32px; } +.ui-icon-arrowstop-1-n { background-position: -192px -32px; } +.ui-icon-arrowstop-1-e { background-position: -208px -32px; } +.ui-icon-arrowstop-1-s { background-position: -224px -32px; } +.ui-icon-arrowstop-1-w { background-position: -240px -32px; } +.ui-icon-arrowthick-1-n { background-position: 0 -48px; } +.ui-icon-arrowthick-1-ne { background-position: -16px -48px; } +.ui-icon-arrowthick-1-e { background-position: -32px -48px; } +.ui-icon-arrowthick-1-se { background-position: -48px -48px; } +.ui-icon-arrowthick-1-s { background-position: -64px -48px; } +.ui-icon-arrowthick-1-sw { background-position: -80px -48px; } +.ui-icon-arrowthick-1-w { background-position: -96px -48px; } +.ui-icon-arrowthick-1-nw { background-position: -112px -48px; } +.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } +.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } +.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } +.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } +.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } +.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } +.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } +.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } +.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } +.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } +.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } +.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } +.ui-icon-arrowreturn-1-w { background-position: -64px -64px; } +.ui-icon-arrowreturn-1-n { background-position: -80px -64px; } +.ui-icon-arrowreturn-1-e { background-position: -96px -64px; } +.ui-icon-arrowreturn-1-s { background-position: -112px -64px; } +.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } +.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } +.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } +.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } +.ui-icon-arrow-4 { background-position: 0 -80px; } +.ui-icon-arrow-4-diag { background-position: -16px -80px; } +.ui-icon-extlink { background-position: -32px -80px; } +.ui-icon-newwin { background-position: -48px -80px; } +.ui-icon-refresh { background-position: -64px -80px; } +.ui-icon-shuffle { background-position: -80px -80px; } +.ui-icon-transfer-e-w { background-position: -96px -80px; } +.ui-icon-transferthick-e-w { background-position: -112px -80px; } +.ui-icon-folder-collapsed { background-position: 0 -96px; } +.ui-icon-folder-open { background-position: -16px -96px; } +.ui-icon-document { background-position: -32px -96px; } +.ui-icon-document-b { background-position: -48px -96px; } +.ui-icon-note { background-position: -64px -96px; } +.ui-icon-mail-closed { background-position: -80px -96px; } +.ui-icon-mail-open { background-position: -96px -96px; } +.ui-icon-suitcase { background-position: -112px -96px; } +.ui-icon-comment { background-position: -128px -96px; } +.ui-icon-person { background-position: -144px -96px; } +.ui-icon-print { background-position: -160px -96px; } +.ui-icon-trash { background-position: -176px -96px; } +.ui-icon-locked { background-position: -192px -96px; } +.ui-icon-unlocked { background-position: -208px -96px; } +.ui-icon-bookmark { background-position: -224px -96px; } +.ui-icon-tag { background-position: -240px -96px; } +.ui-icon-home { background-position: 0 -112px; } +.ui-icon-flag { background-position: -16px -112px; } +.ui-icon-calendar { background-position: -32px -112px; } +.ui-icon-cart { background-position: -48px -112px; } +.ui-icon-pencil { background-position: -64px -112px; } +.ui-icon-clock { background-position: -80px -112px; } +.ui-icon-disk { background-position: -96px -112px; } +.ui-icon-calculator { background-position: -112px -112px; } +.ui-icon-zoomin { background-position: -128px -112px; } +.ui-icon-zoomout { background-position: -144px -112px; } +.ui-icon-search { background-position: -160px -112px; } +.ui-icon-wrench { background-position: -176px -112px; } +.ui-icon-gear { background-position: -192px -112px; } +.ui-icon-heart { background-position: -208px -112px; } +.ui-icon-star { background-position: -224px -112px; } +.ui-icon-link { background-position: -240px -112px; } +.ui-icon-cancel { background-position: 0 -128px; } +.ui-icon-plus { background-position: -16px -128px; } +.ui-icon-plusthick { background-position: -32px -128px; } +.ui-icon-minus { background-position: -48px -128px; } +.ui-icon-minusthick { background-position: -64px -128px; } +.ui-icon-close { background-position: -80px -128px; } +.ui-icon-closethick { background-position: -96px -128px; } +.ui-icon-key { background-position: -112px -128px; } +.ui-icon-lightbulb { background-position: -128px -128px; } +.ui-icon-scissors { background-position: -144px -128px; } +.ui-icon-clipboard { background-position: -160px -128px; } +.ui-icon-copy { background-position: -176px -128px; } +.ui-icon-contact { background-position: -192px -128px; } +.ui-icon-image { background-position: -208px -128px; } +.ui-icon-video { background-position: -224px -128px; } +.ui-icon-script { background-position: -240px -128px; } +.ui-icon-alert { background-position: 0 -144px; } +.ui-icon-info { background-position: -16px -144px; } +.ui-icon-notice { background-position: -32px -144px; } +.ui-icon-help { background-position: -48px -144px; } +.ui-icon-check { background-position: -64px -144px; } +.ui-icon-bullet { background-position: -80px -144px; } +.ui-icon-radio-on { background-position: -96px -144px; } +.ui-icon-radio-off { background-position: -112px -144px; } +.ui-icon-pin-w { background-position: -128px -144px; } +.ui-icon-pin-s { background-position: -144px -144px; } +.ui-icon-play { background-position: 0 -160px; } +.ui-icon-pause { background-position: -16px -160px; } +.ui-icon-seek-next { background-position: -32px -160px; } +.ui-icon-seek-prev { background-position: -48px -160px; } +.ui-icon-seek-end { background-position: -64px -160px; } +.ui-icon-seek-start { background-position: -80px -160px; } +/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */ +.ui-icon-seek-first { background-position: -80px -160px; } +.ui-icon-stop { background-position: -96px -160px; } +.ui-icon-eject { background-position: -112px -160px; } +.ui-icon-volume-off { background-position: -128px -160px; } +.ui-icon-volume-on { background-position: -144px -160px; } +.ui-icon-power { background-position: 0 -176px; } +.ui-icon-signal-diag { background-position: -16px -176px; } +.ui-icon-signal { background-position: -32px -176px; } +.ui-icon-battery-0 { background-position: -48px -176px; } +.ui-icon-battery-1 { background-position: -64px -176px; } +.ui-icon-battery-2 { background-position: -80px -176px; } +.ui-icon-battery-3 { background-position: -96px -176px; } +.ui-icon-circle-plus { background-position: 0 -192px; } +.ui-icon-circle-minus { background-position: -16px -192px; } +.ui-icon-circle-close { background-position: -32px -192px; } +.ui-icon-circle-triangle-e { background-position: -48px -192px; } +.ui-icon-circle-triangle-s { background-position: -64px -192px; } +.ui-icon-circle-triangle-w { background-position: -80px -192px; } +.ui-icon-circle-triangle-n { background-position: -96px -192px; } +.ui-icon-circle-arrow-e { background-position: -112px -192px; } +.ui-icon-circle-arrow-s { background-position: -128px -192px; } +.ui-icon-circle-arrow-w { background-position: -144px -192px; } +.ui-icon-circle-arrow-n { background-position: -160px -192px; } +.ui-icon-circle-zoomin { background-position: -176px -192px; } +.ui-icon-circle-zoomout { background-position: -192px -192px; } +.ui-icon-circle-check { background-position: -208px -192px; } +.ui-icon-circlesmall-plus { background-position: 0 -208px; } +.ui-icon-circlesmall-minus { background-position: -16px -208px; } +.ui-icon-circlesmall-close { background-position: -32px -208px; } +.ui-icon-squaresmall-plus { background-position: -48px -208px; } +.ui-icon-squaresmall-minus { background-position: -64px -208px; } +.ui-icon-squaresmall-close { background-position: -80px -208px; } +.ui-icon-grip-dotted-vertical { background-position: 0 -224px; } +.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } +.ui-icon-grip-solid-vertical { background-position: -32px -224px; } +.ui-icon-grip-solid-horizontal { background-position: -48px -224px; } +.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } +.ui-icon-grip-diagonal-se { background-position: -80px -224px; } + + +/* Misc visuals +----------------------------------*/ + +/* Corner radius */ +.ui-corner-all, +.ui-corner-top, +.ui-corner-left, +.ui-corner-tl { + border-top-left-radius: 4px; +} +.ui-corner-all, +.ui-corner-top, +.ui-corner-right, +.ui-corner-tr { + border-top-right-radius: 4px; +} +.ui-corner-all, +.ui-corner-bottom, +.ui-corner-left, +.ui-corner-bl { + border-bottom-left-radius: 4px; +} +.ui-corner-all, +.ui-corner-bottom, +.ui-corner-right, +.ui-corner-br { + border-bottom-right-radius: 4px; +} + +/* Overlays */ +.ui-widget-overlay { + background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; + opacity: .3; + filter: Alpha(Opacity=30); +} +.ui-widget-shadow { + margin: -8px 0 0 -8px; + padding: 8px; + background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; + opacity: .3; + filter: Alpha(Opacity=30); + border-radius: 8px; +} diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery.tagit.css b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery.tagit.css new file mode 100755 index 000000000..a5fde3951 --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery.tagit.css @@ -0,0 +1,66 @@ +ul.tagit { + overflow: auto; + margin-left: inherit; /* usually we don't want the regular ul margins. */ + margin-right: inherit; +} +ul.tagit li { + display: block; + float: left; + margin: 2px 5px 2px 0; +} +ul.tagit li.tagit-choice { + position: relative; + line-height: inherit; +} + +ul.tagit li.tagit-choice-read-only { + padding: .2em .5em .2em .5em; +} + +ul.tagit li.tagit-choice-editable { + padding: .2em 18px .2em .5em; +} + +ul.tagit li.tagit-new { + padding: .25em 4px .25em 0; +} + +ul.tagit li.tagit-choice a.tagit-label { + cursor: pointer; + text-decoration: none; +} +ul.tagit li.tagit-choice .tagit-close { + cursor: pointer; + position: absolute; + right: .1em; + top: 50%; + margin-top: -8px; + line-height: 17px; +} + +/* used for some custom themes that don't need image icons */ +ul.tagit li.tagit-choice .tagit-close .text-icon { + display: none; +} + +ul.tagit li.tagit-choice input { + display: block; + float: left; + margin: 2px 5px 2px 0; +} +ul.tagit input[type="text"] { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; + + border: none; + margin: 0; + padding: 0; + width: inherit; + background-color: inherit; + outline: none; +} diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery.timepicker.css b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery.timepicker.css new file mode 100755 index 000000000..87c7987c0 --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery.timepicker.css @@ -0,0 +1,67 @@ +.ui-timepicker-wrapper { + overflow-y: auto; + height: 150px; + width: 6.5em; + background: #fff; + border: 1px solid #ddd; + -webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2); + -moz-box-shadow:0 5px 10px rgba(0,0,0,0.2); + box-shadow:0 5px 10px rgba(0,0,0,0.2); + outline: none; + z-index: 10001; + margin: 0; +} + +.ui-timepicker-wrapper.ui-timepicker-with-duration { + width: 11em; +} + +.ui-timepicker-list { + margin: 0; + padding: 0; + list-style: none; +} + +.ui-timepicker-duration { + margin-left: 5px; color: #888; +} + +.ui-timepicker-list:hover .ui-timepicker-duration { + color: #888; +} + +.ui-timepicker-list li { + padding: 3px 0 3px 5px; + cursor: pointer; + white-space: nowrap; + color: #000; + list-style: none; + margin: 0; +} + +.ui-timepicker-list:hover .ui-timepicker-selected { + background: #fff; color: #000; +} + +li.ui-timepicker-selected, +.ui-timepicker-list li:hover, +.ui-timepicker-list .ui-timepicker-selected:hover { + background: #1980EC; color: #fff; +} + +li.ui-timepicker-selected .ui-timepicker-duration, +.ui-timepicker-list li:hover .ui-timepicker-duration { + color: #ccc; +} + +.ui-timepicker-list li.ui-timepicker-disabled, +.ui-timepicker-list li.ui-timepicker-disabled:hover, +.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled { + color: #888; + cursor: default; +} + +.ui-timepicker-list li.ui-timepicker-disabled:hover, +.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled { + background: #f2f2f2; +} diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/tagit.ui-zendesk.css b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/tagit.ui-zendesk.css new file mode 100755 index 000000000..c4138b6db --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/tagit.ui-zendesk.css @@ -0,0 +1,56 @@ + +/* Optional scoped theme for tag-it which mimics the zendesk widget. */ + + +ul.tagit { + border-style: solid; + border-width: 1px; + border-color: #C6C6C6; + background: inherit; +} +ul.tagit li.tagit-choice { + -moz-border-radius: 6px; + border-radius: 6px; + -webkit-border-radius: 6px; + border: 1px solid #CAD8F3; + + background: none; + background-color: #DEE7F8; + + font-weight: normal; +} +ul.tagit li.tagit-choice .tagit-label:not(a) { + color: #555; +} +ul.tagit li.tagit-choice a.tagit-close { + text-decoration: none; +} +ul.tagit li.tagit-choice .tagit-close { + right: .4em; +} +ul.tagit li.tagit-choice .ui-icon { + display: none; +} +ul.tagit li.tagit-choice .tagit-close .text-icon { + display: inline; + font-family: arial, sans-serif; + font-size: 16px; + line-height: 16px; + color: #777; +} +ul.tagit li.tagit-choice:hover, ul.tagit li.tagit-choice.remove { + background-color: #bbcef1; + border-color: #6d95e0; +} +ul.tagit li.tagit-choice a.tagLabel:hover, +ul.tagit li.tagit-choice a.tagit-close .text-icon:hover { + color: #222; +} +ul.tagit input[type="text"] { + color: #333333; + background: none; +} +.ui-widget { + font-size: 1.1em; +} + diff --git a/wagtail/wagtailadmin/static/wagtailadmin/images/spinner.gif b/wagtail/wagtailadmin/static/wagtailadmin/images/spinner.gif new file mode 100644 index 000000000..e0bc9f402 Binary files /dev/null and b/wagtail/wagtailadmin/static/wagtailadmin/images/spinner.gif differ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/js/core.js b/wagtail/wagtailadmin/static/wagtailadmin/js/core.js new file mode 100644 index 000000000..5506736d3 --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/js/core.js @@ -0,0 +1,105 @@ +/* generic function for adding a message to message area through JS alone */ +function addMessage(status,text){ + $('.messages').addClass('new').empty().append('
        • ' + text + '
        '); + var addMsgTimeout = setTimeout(function(){ + $('.messages').addClass('appear'); + clearTimeout(addMsgTimeout); + }, 100) +} + +$(function(){ + // Add class to the body from which transitions may be hung so they don't appear to transition as the page loads + $('body').addClass('ready'); + + // Enable toggle to open/close nav + $('#nav-toggle').click(function(){ + $('body').toggleClass('nav-open'); + }); + + // Enable swishy section navigation menu + $('.explorer').addClass('dl-menuwrapper').dlmenu({ + animationClasses : { + classin : 'dl-animate-in-2', + classout : 'dl-animate-out-2' + } + }); + + // Resize nav to fit height of window. This is an unimportant bell/whistle to make it look nice + var fitNav = function(){ + $('.nav-wrapper').css('min-height',$(window).height()); + $('.nav-main').each(function(){ + var thisHeight = $(this).height(); + var footerHeight = $('.footer', $(this)).height(); + + // $(this).css({'height':thisHeight - footerHeight, 'overflow-y':'scroll'}); + // $('> ul', $(this)).height(thisHeight) + }); + } + fitNav(); + $(window).resize(function(){ + fitNav(); + }) + + // Apply auto-height sizing to text areas + // NB .richtext (hallo.js-enabled) divs do not need this as they expand to fit their content by default + // $('.page-editor textarea').autosize(); + + // Enable nice focus effects on all fields. This enables help text on hover. + $(document).on('focus mouseover', 'input,textarea,select', function(){ + $(this).closest('.field').addClass('focused') + $(this).closest('fieldset').addClass('focused') + $(this).closest('li').addClass('focused') + }) + $(document).on('blur mouseout', 'input,textarea,select', function(){ + $(this).closest('.field').removeClass('focused') + $(this).closest('fieldset').removeClass('focused') + $(this).closest('li').removeClass('focused') + }); + + /* tabs */ + $(document).on('click', '.tab-nav a', function (e) { + e.preventDefault() + $(this).tab('show'); + }); + $(document).on('click', '.tab-toggle', function(e){ + e.preventDefault() + $('.tab-nav a[href="'+ $(this).attr('href') +'"]').click(); + }) + + + $('.dropdown-toggle').bind('click', function(){ + $(this).closest('.dropdown').toggleClass('open'); + + // Stop event propagating so the "close all dropdowns on body clicks" code (below) doesn't immediately close the dropdown + return false; + }); + + /* close all dropdowns on body clicks */ + $(document).on('click', function(e){ + var relTarg = e.relatedTarget || e.toElement; + if(!$(relTarg).hasClass('dropdown-toggle')){ + $('.dropdown').removeClass('open'); + } + }) + + /* Bulk-selection */ + $(document).on('click', 'thead .bulk', function(){ + $(this).closest('table').find('tbody .bulk input').each(function(){ + $(this).prop('checked', !$(this).prop('checked')); + }) + }); + + $(".nav-main .more > a").bind('click keydown', function(){ + $(this).parent().find('ul').toggle('fast'); + return false; + }); + + $('#menu-search input').bind('focus', function(){ + $('#menu-search').addClass('focussed'); + }).bind('blur', function(){ + $('#menu-search').removeClass('focussed'); + }) + $('#menu-search').bind('focus click', function(){ + $(this).addClass('focussed'); + }) +}) \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/js/expanding_formset.js b/wagtail/wagtailadmin/static/wagtailadmin/js/expanding_formset.js new file mode 100644 index 000000000..9c6007dfd --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/js/expanding_formset.js @@ -0,0 +1,28 @@ +function buildExpandingFormset(prefix, opts) { + if (!opts) { + opts = {}; + } + + var addButton = $('#' + prefix + '-ADD'); + var formContainer = $('#' + prefix + '-FORMS'); + var totalFormsInput = $('#' + prefix + '-TOTAL_FORMS'); + var formCount = parseInt(totalFormsInput.val(), 10); + + var emptyFormTemplate = document.getElementById(prefix + '-EMPTY_FORM_TEMPLATE'); + if (emptyFormTemplate.innerText) { + emptyFormTemplate = emptyFormTemplate.innerText; + } else if (emptyFormTemplate.textContent) { + emptyFormTemplate = emptyFormTemplate.textContent; + } + + addButton.click(function() { + var newFormHtml = emptyFormTemplate.replace(/__prefix__/g, formCount); + formContainer.append(newFormHtml); + if (opts.onAdd) { + opts.onAdd(formCount); + } + + formCount++; + totalFormsInput.val(formCount); + }); +} diff --git a/wagtail/wagtailadmin/static/wagtailadmin/js/hallo-plugins/hallo-hr.coffee b/wagtail/wagtailadmin/static/wagtailadmin/js/hallo-plugins/hallo-hr.coffee new file mode 100644 index 000000000..76eb5a04c --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/js/hallo-plugins/hallo-hr.coffee @@ -0,0 +1,28 @@ +# Hallo - a rich text editing jQuery UI widget +# (c) 2011 Henri Bergius, IKS Consortium +# Hallo may be freely distributed under the MIT license +((jQuery) -> + jQuery.widget "IKS.hallohr", + options: + editable: null + toolbar: null + uuid: '' + buttonCssClass: null + + populateToolbar: (toolbar) -> + buttonset = jQuery "" + + buttonElement = jQuery '' + buttonElement.hallobutton + uuid: @options.uuid + editable: @options.editable + label: "Horizontal rule" + command: "insertHorizontalRule" + icon: "icon-horizontalrule" + cssClass: @options.buttonCssClass + buttonset.append buttonElement + + buttonset.hallobuttonset() + toolbar.append buttonset + +)(jQuery) diff --git a/wagtail/wagtailadmin/static/wagtailadmin/js/hallo-plugins/hallo-verdant-toolbar.js b/wagtail/wagtailadmin/static/wagtailadmin/js/hallo-plugins/hallo-verdant-toolbar.js new file mode 100644 index 000000000..8e93b8543 --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/js/hallo-plugins/hallo-verdant-toolbar.js @@ -0,0 +1,97 @@ +(function(jQuery) { + return jQuery.widget('IKS.halloToolbarFixed', { + toolbar: null, + options: { + parentElement: 'body', + editable: null, + toolbar: null, + affix: true, + affixTopOffset: 2 + }, + _create: function() { + var el, widthToAdd, + _this = this; + this.toolbar = this.options.toolbar; + this.toolbar.show(); + jQuery(this.options.parentElement).append(this.toolbar); + this._bindEvents(); + jQuery(window).resize(function(event) { + return _this.setPosition(); + }); + jQuery(window).scroll(function(event) { + return _this.setPosition(); + }); + if (this.options.parentElement === 'body') { + el = jQuery(this.element); + widthToAdd = parseFloat(el.css('padding-left')); + widthToAdd += parseFloat(el.css('padding-right')); + widthToAdd += parseFloat(el.css('border-left-width')); + widthToAdd += parseFloat(el.css('border-right-width')); + widthToAdd += (parseFloat(el.css('outline-width'))) * 2; + widthToAdd += (parseFloat(el.css('outline-offset'))) * 2; + return jQuery(this.toolbar).css("width", el.width() + widthToAdd); + } + }, + _getPosition: function(event, selection) { + var offset, position, width; + if (!event) { + return; + } + width = parseFloat(this.element.css('outline-width')); + offset = width + parseFloat(this.element.css('outline-offset')); + return position = { + top: this.element.offset().top - this.toolbar.outerHeight() - offset, + left: this.element.offset().left - offset + }; + }, + _getCaretPosition: function(range) { + var newRange, position, tmpSpan; + tmpSpan = jQuery(""); + newRange = rangy.createRange(); + newRange.setStart(range.endContainer, range.endOffset); + newRange.insertNode(tmpSpan.get(0)); + position = { + top: tmpSpan.offset().top, + left: tmpSpan.offset().left + }; + tmpSpan.remove(); + return position; + }, + setPosition: function() { + var elementBottom, elementTop, height, offset, scrollTop, topOffset; + if (this.options.parentElement !== 'body') { + return; + } + + this.toolbar.css('top', this.element.offset().top - this.toolbar.outerHeight()); + + if (this.options.affix) { + this.toolbar.removeClass('affixed'); + scrollTop = jQuery(window).scrollTop(); + offset = this.element.offset(); + height = this.element.height(); + topOffset = this.options.affixTopOffset; + elementTop = offset.top - (this.toolbar.height() + this.options.affixTopOffset); + elementBottom = (height - topOffset) + (offset.top - this.toolbar.height()); + if (scrollTop > elementTop && scrollTop < elementBottom) { + this.toolbar.addClass('affixed'); + this.toolbar.css('top', this.options.affixTopOffset); + } + } else { + + } + return this.toolbar; + }, + _updatePosition: function(position) {}, + _bindEvents: function() { + var _this = this; + this.element.on('halloactivated', function(event, data) { + _this.setPosition(); + return _this.toolbar.show(); + }); + return this.element.on('hallodeactivated', function(event, data) { + return _this.toolbar.hide(); + }); + } + }); +})(jQuery); \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/js/hallo-plugins/hallo-verdantlink.coffee b/wagtail/wagtailadmin/static/wagtailadmin/js/hallo-plugins/hallo-verdantlink.coffee new file mode 100644 index 000000000..ef7963690 --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/js/hallo-plugins/hallo-verdantlink.coffee @@ -0,0 +1,68 @@ +# plugin for hallo.js to allow inserting links using Verdant's page chooser + +(($) -> + $.widget "IKS.halloverdantlink", + options: + uuid: '' + editable: null + + populateToolbar: (toolbar) -> + widget = this + + getEnclosingLink = () -> + # if cursor is currently within a link element, return it, otherwise return null + node = widget.options.editable.getSelection().commonAncestorContainer + return $(node).parents('a').get(0) + + # Create an element for holding the button + button = $('') + button.hallobutton + uuid: @options.uuid + editable: @options.editable + label: 'Links' + icon: 'icon-link' + command: null + queryState: (event) -> + button.hallobutton('checked', !!getEnclosingLink()) + + # Append the button to toolbar + toolbar.append button + + button.on "click", (event) -> + enclosingLink = getEnclosingLink() + if enclosingLink + # remove existing link + $(enclosingLink).replaceWith(enclosingLink.innerHTML) + button.hallobutton('checked', false) + widget.options.editable.element.trigger('change') + else + # commence workflow to add a link + lastSelection = widget.options.editable.getSelection() + + if lastSelection.collapsed + # TODO: don't hard-code this, as it may be changed in urls.py + url = '/admin/choose-page/?allow_external_link=true&allow_email_link=true&prompt_for_link_text=true' + else + url = '/admin/choose-page/?allow_external_link=true&allow_email_link=true' + + ModalWorkflow + url: url + responses: + pageChosen: (pageData) -> + a = document.createElement('a') + a.setAttribute('href', pageData.url) + if pageData.id + a.setAttribute('data-id', pageData.id) + a.setAttribute('data-linktype', 'page') + + if (not lastSelection.collapsed) and lastSelection.canSurroundContents() + # use the selected content as the link text + lastSelection.surroundContents(a) + else + # no text is selected, so use the page title as link text + a.appendChild(document.createTextNode pageData.title) + lastSelection.insertNode(a) + + widget.options.editable.element.trigger('change') + +)(jQuery) diff --git a/wagtail/wagtailadmin/static/wagtailadmin/js/modal-workflow.js b/wagtail/wagtailadmin/static/wagtailadmin/js/modal-workflow.js new file mode 100644 index 000000000..de88192fe --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/js/modal-workflow.js @@ -0,0 +1,78 @@ +/* A framework for modal popups that are loaded via AJAX, allowing navigation to other +subpages to happen within the lightbox, and returning a response to the calling page, +possibly after several navigation steps +*/ + +function ModalWorkflow(opts) { + /* options passed in 'opts': + 'url' (required): initial + 'responses' (optional): dict of callbacks to be called when the modal content + calls modal.respond(callbackName, params) + */ + + var self = {}; + var responseCallbacks = opts.responses || {}; + + /* remove any previous modals before continuing (closing doesn't remove them from the dom) */ + $('body > .modal').remove(); + + var container = $(''); + $('body').append(container); + container.modal(); + + self.body = container.find('.modal-body'); + + self.loadUrl = function(url, urlParams) { + $.get(url, urlParams, self.loadResponseText, 'text'); + }; + + self.postForm = function(url, formData) { + $.post(url, formData, self.loadResponseText, 'text'); + }; + + self.ajaxifyForm = function(formSelector) { + $(formSelector).each(function() { + var action = this.action; + if (this.method.toLowerCase() == 'get') { + $(this).submit(function() { + self.loadUrl(action, $(this).serialize()); + return false; + }); + } else { + $(this).submit(function() { + self.postForm(action, $(this).serialize()); + return false; + }); + } + }); + }; + + self.loadResponseText = function(responseText) { + var response = eval('(' + responseText + ')'); + self.loadBody(response); + }; + + self.loadBody = function(body) { + if (body.html) { + self.body.html(body.html); + } + if (body.onload) { + body.onload(self); + } + }; + + self.respond = function(responseType) { + if (responseType in responseCallbacks) { + args = Array.prototype.slice.call(arguments, 1); + responseCallbacks[responseType].apply(self, args); + } + }; + + self.close = function() { + container.modal('hide'); + }; + + self.loadUrl(opts.url, opts.urlParams); + + return self; +} diff --git a/wagtail/wagtailadmin/static/wagtailadmin/js/page-chooser.js b/wagtail/wagtailadmin/static/wagtailadmin/js/page-chooser.js new file mode 100644 index 000000000..337fc30be --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/js/page-chooser.js @@ -0,0 +1,31 @@ +function createPageChooser(id, pageType, openAtParentId) { + var chooserElement = $('#' + id + '-chooser'); + var pageTitle = chooserElement.find('.title'); + var input = $('#' + id); + + $('.action-choose', chooserElement).click(function() { + var initialUrl = '/admin/choose-page/'; + /* TODO: don't hard-code this URL, as it may be changed in urls.py */ + if (openAtParentId) { + initialUrl += openAtParentId + '/'; + } + ModalWorkflow({ + 'url': initialUrl, + 'urlParams': {'page_type': pageType}, + 'responses': { + 'pageChosen': function(pageData) { + input.val(pageData.id); + openAtParentId = pageData.parentId; + pageTitle.text(pageData.title); + chooserElement.removeClass('blank'); + } + } + }); + }); + + $('.action-clear', chooserElement).click(function() { + input.val(''); + openAtParentId = null; + chooserElement.addClass('blank'); + }); +} \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/js/page-editor.js b/wagtail/wagtailadmin/static/wagtailadmin/js/page-editor.js new file mode 100644 index 000000000..3af65aae2 --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/js/page-editor.js @@ -0,0 +1,251 @@ +function makeRichTextEditable(id) { + var input = $('#' + id); + var richText = $('
        ').html(input.val()); + richText.insertBefore(input); + input.hide(); + + var removeStylingPending = false; + function removeStyling() { + /* Strip the 'style' attribute from spans that have no other attributes. + (we don't remove the span entirely as that messes with the cursor position, + and spans will be removed anyway by our whitelisting) + */ + $('span[style]', richText).filter(function() { + return this.attributes.length === 1; + }).removeAttr('style'); + removeStylingPending = false; + } + + richText.hallo({ + toolbar: 'halloToolbarFixed', + toolbarcssClass: 'testy', + plugins: { + 'halloformat': {}, + 'halloheadings': {formatBlocks: ["p", "h2", "h3", "h4", "h5"]}, + 'hallolists': {}, + 'hallohr': {}, + 'halloreundo': {}, + 'halloverdantimage': {}, + 'halloverdantembeds': {}, + 'halloverdantlink': {}, + 'halloverdantdoclink': {}, + } + }).bind('hallomodified', function(event, data) { + input.val(data.content); + if (!removeStylingPending) { + setTimeout(removeStyling, 100); + removeStylingPending = true; + } + }).bind('paste', function(event, data) { + setTimeout(removeStyling, 1); + }); +} + +function insertRichTextDeleteControl(elem) { + var a = $('Delete'); + $(elem).addClass('rich-text-deletable').prepend(a); + a.click(function() { + $(elem).fadeOut(function() { + $(elem).remove(); + }); + }) +} + +function initDateChoosers(context) { + $('input.friendly_date', context).datepicker({ + dateFormat: 'd M yy', constrainInput: false, /* showOn: 'button', */ firstDay: 1 + }); +} +function initDateChooser(id) { + $('#' + id).datepicker({ + dateFormat: 'd M yy', constrainInput: false, /* showOn: 'button', */ firstDay: 1 + }); +} + +function initTimeChoosers(context) { + $('input.friendly_time', context).timepicker({ + timeFormat: 'g.ia' + }); +} +function initTimeChooser(id) { + $('#' + id).timepicker({ + timeFormat: 'g.ia' + }); +} + +function initTagField(id, autocompleteUrl) { + $('#' + id).tagit({ + autocomplete: {source: autocompleteUrl} + }); +} + +function InlinePanel(opts) { + var self = {}; + + self.initChildControls = function (prefix) { + var childId = 'inline_child_' + prefix; + var deleteInputId = 'id_' + prefix + '-DELETE'; + $('#' + deleteInputId + '-button').click(function() { + /* set 'deleted' form field to true */ + $('#' + deleteInputId).val('1'); + $('#' + childId).fadeOut(function() { + self.updateMoveButtonDisabledStates(); + }); + }); + if (opts.canOrder) { + $('#' + prefix + '-move-up').click(function() { + var currentChild = $('#' + childId); + var currentChildOrderElem = currentChild.find('input[name$="-ORDER"]'); + var currentChildOrder = currentChildOrderElem.val(); + + /* find the previous visible 'inline_child' li before this one */ + var prevChild = currentChild.prev(':visible'); + if (!prevChild.length) return; + var prevChildOrderElem = prevChild.find('input[name$="-ORDER"]'); + var prevChildOrder = prevChildOrderElem.val(); + + // async swap animation must run before the insertBefore line below, but doesn't need to finish first + self.animateSwap(currentChild, prevChild); + + currentChild.insertBefore(prevChild); + currentChildOrderElem.val(prevChildOrder); + prevChildOrderElem.val(currentChildOrder); + + self.updateMoveButtonDisabledStates(); + }); + + $('#' + prefix + '-move-down').click(function() { + var currentChild = $('#' + childId); + var currentChildOrderElem = currentChild.find('input[name$="-ORDER"]'); + var currentChildOrder = currentChildOrderElem.val(); + + /* find the next visible 'inline_child' li after this one */ + var nextChild = currentChild.next(':visible'); + if (!nextChild.length) return; + var nextChildOrderElem = nextChild.find('input[name$="-ORDER"]'); + var nextChildOrder = nextChildOrderElem.val(); + + // async swap animation must run before the insertAfter line below, but doesn't need to finish first + self.animateSwap(currentChild, nextChild); + + currentChild.insertAfter(nextChild); + currentChildOrderElem.val(nextChildOrder); + nextChildOrderElem.val(currentChildOrder); + + self.updateMoveButtonDisabledStates(); + }); + } + }; + + self.formsUl = $('#' + opts.formsetPrefix + '-FORMS'); + + self.updateMoveButtonDisabledStates = function() { + if (opts.canOrder) { + forms = self.formsUl.children('li:visible'); + forms.each(function(i) { + $('ul.controls .inline-child-move-up', this).toggleClass('disabled', i == 0).toggleClass('enabled', i != 0); + $('ul.controls .inline-child-move-down', this).toggleClass('disabled', i == forms.length - 1).toggleClass('enabled', i != forms.length - 1); + }); + } + } + + self.animateSwap = function(item1, item2){ + var parent = self.formsUl; + var children = parent.children('li:visible'); + + // Apply moving class to container (ul.multiple) so it can assist absolute positioning of it's children + // Also set it's relatively calculated height to be an absolute one, to prevent the container collapsing while its children go absolute + parent.addClass('moving').css('height', parent.height()); + + children.each(function(){ + // console.log($(this)); + $(this).css('top', $(this).position().top); + }).addClass('moving'); + + // animate swapping around + item1.animate({ + top:item2.position().top + }, 200, function(){ + parent.removeClass('moving').removeAttr('style'); + children.removeClass('moving').removeAttr('style'); + }); + item2.animate({ + top:item1.position().top + }, 200, function(){ + parent.removeClass('moving').removeAttr('style'); + children.removeClass('moving').removeAttr('style'); + }) + } + + buildExpandingFormset(opts.formsetPrefix, { + onAdd: function(formCount) { + function fixPrefix(str) { + return str.replace(/__prefix__/g, formCount); + } + self.initChildControls(fixPrefix(opts.emptyChildFormPrefix)); + if (opts.canOrder) { + $(fixPrefix('#id_' + opts.emptyChildFormPrefix + '-ORDER')).val(formCount); + } + self.updateMoveButtonDisabledStates(); + opts.onAdd(fixPrefix); + } + }); + + return self; +} + +function cleanForSlug(val){ + return val.replace(/\s/g,"-").replace(/[^A-Za-z0-9\-]/g,"").toLowerCase(); +} + +function initSlugAutoPopulate(){ + $('#id_title').on('focus', function(){ + $('#id_slug').data('previous-val', $('#id_slug').val()); + $(this).data('previous-val', $(this).val()); + }); + $('#id_title').on('keyup keydown keypress blur', function(){ + if($('body').hasClass('create') || (!$('#id_slug').data('previous-val').length || cleanForSlug($('#id_title').data('previous-val')) === $('#id_slug').data('previous-val'))){ + // only update slug if the page is being created from scratch, if slug is completely blank, or if title and slug prior to typing were identical + $('#id_slug').val(cleanForSlug($('#id_title').val())); + } + }); +} + +function initSlugCleaning(){ + $('#id_slug').on('keyup blur', function(){ + $(this).val(cleanForSlug($(this).val())); + }) +} + +$(function() { + initDateChoosers(); + initTimeChoosers(); + initSlugAutoPopulate(); + initSlugCleaning(); + + + $('.richtext [contenteditable="false"]').each(function() { + insertRichTextDeleteControl(this); + }); + + /* Set up behaviour of preview button */ + $('#action-preview').click(function() { + var previewWindow = window.open($(this).data('placeholder'), $(this).data('windowname')); + $.post( + $(this).data('action'), + $('#page-edit-form').serialize(), + function(data, textStatus, request) { + if (request.getResponseHeader('X-Verdant-Preview') == 'ok') { + previewWindow.document.open(); + previewWindow.document.write(data); + previewWindow.document.close(); + } else { + previewWindow.close(); + document.open(); + document.write(data); + document.close(); + } + } + ); + }); +}); diff --git a/wagtail/wagtailadmin/static/wagtailadmin/js/vendor/bootstrap-modal.js b/wagtail/wagtailadmin/static/wagtailadmin/js/vendor/bootstrap-modal.js new file mode 100644 index 000000000..6684c865b --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/js/vendor/bootstrap-modal.js @@ -0,0 +1,246 @@ +/* ======================================================================== + * Bootstrap: modal.js v3.0.0 + * http://twbs.github.com/bootstrap/javascript.html#modals + * ======================================================================== + * Copyright 2012 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ======================================================================== */ + + ++function ($) { "use strict"; + + // MODAL CLASS DEFINITION + // ====================== + + var Modal = function (element, options) { + this.options = options + this.$element = $(element) + this.$backdrop = + this.isShown = null + + if (this.options.remote) this.$element.load(this.options.remote) + } + + Modal.DEFAULTS = { + backdrop: true + , keyboard: true + , show: true + } + + Modal.prototype.toggle = function (_relatedTarget) { + return this[!this.isShown ? 'show' : 'hide'](_relatedTarget) + } + + Modal.prototype.show = function (_relatedTarget) { + var that = this + var e = $.Event('show.bs.modal', { relatedTarget: _relatedTarget }) + + this.$element.trigger(e) + + if (this.isShown || e.isDefaultPrevented()) return + + this.isShown = true + + this.escape() + + this.$element.on('click.dismiss.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this)) + + this.backdrop(function () { + var transition = $.support.transition && that.$element.hasClass('fade') + + if (!that.$element.parent().length) { + that.$element.appendTo(document.body) // don't move modals dom position + } + + that.$element.show() + + if (transition) { + that.$element[0].offsetWidth // force reflow + } + + that.$element + .addClass('in') + .attr('aria-hidden', false) + + that.enforceFocus() + + var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget }) + + transition ? + that.$element.find('.modal-dialog') // wait for modal to slide in + .one($.support.transition.end, function () { + that.$element.focus().trigger(e) + }) + .emulateTransitionEnd(300) : + that.$element.focus().trigger(e) + }) + } + + Modal.prototype.hide = function (e) { + if (e) e.preventDefault() + + e = $.Event('hide.bs.modal') + + this.$element.trigger(e) + + if (!this.isShown || e.isDefaultPrevented()) return + + this.isShown = false + + this.escape() + + $(document).off('focusin.bs.modal') + + this.$element + .removeClass('in') + .attr('aria-hidden', true) + .off('click.dismiss.modal') + + $.support.transition && this.$element.hasClass('fade') ? + this.$element + .one($.support.transition.end, $.proxy(this.hideModal, this)) + .emulateTransitionEnd(300) : + this.hideModal() + } + + Modal.prototype.enforceFocus = function () { + $(document) + .off('focusin.bs.modal') // guard against infinite focus loop + .on('focusin.bs.modal', $.proxy(function (e) { + if (this.$element[0] !== e.target && !this.$element.has(e.target).length) { + this.$element.focus() + } + }, this)) + } + + Modal.prototype.escape = function () { + if (this.isShown && this.options.keyboard) { + this.$element.on('keyup.dismiss.bs.modal', $.proxy(function (e) { + e.which == 27 && this.hide() + }, this)) + } else if (!this.isShown) { + this.$element.off('keyup.dismiss.bs.modal') + } + } + + Modal.prototype.hideModal = function () { + var that = this + this.$element.hide() + this.backdrop(function () { + that.removeBackdrop() + that.$element.trigger('hidden.bs.modal') + }) + } + + Modal.prototype.removeBackdrop = function () { + this.$backdrop && this.$backdrop.remove() + this.$backdrop = null + } + + Modal.prototype.backdrop = function (callback) { + var that = this + var animate = this.$element.hasClass('fade') ? 'fade' : '' + + if (this.isShown && this.options.backdrop) { + var doAnimate = $.support.transition && animate + + this.$backdrop = $('
        ') + .appendTo(document.body) + + this.$element.on('click.dismiss.modal', $.proxy(function (e) { + if (e.target !== e.currentTarget) return + this.options.backdrop == 'static' + ? this.$element[0].focus.call(this.$element[0]) + : this.hide.call(this) + }, this)) + + if (doAnimate) this.$backdrop[0].offsetWidth // force reflow + + this.$backdrop.addClass('in') + + if (!callback) return + + doAnimate ? + this.$backdrop + .one($.support.transition.end, callback) + .emulateTransitionEnd(150) : + callback() + + } else if (!this.isShown && this.$backdrop) { + this.$backdrop.removeClass('in') + + $.support.transition && this.$element.hasClass('fade')? + this.$backdrop + .one($.support.transition.end, callback) + .emulateTransitionEnd(150) : + callback() + + } else if (callback) { + callback() + } + } + + + // MODAL PLUGIN DEFINITION + // ======================= + + var old = $.fn.modal + + $.fn.modal = function (option, _relatedTarget) { + return this.each(function () { + var $this = $(this) + var data = $this.data('bs.modal') + var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option) + + if (!data) $this.data('bs.modal', (data = new Modal(this, options))) + if (typeof option == 'string') data[option](_relatedTarget) + else if (options.show) data.show(_relatedTarget) + }) + } + + $.fn.modal.Constructor = Modal + + + // MODAL NO CONFLICT + // ================= + + $.fn.modal.noConflict = function () { + $.fn.modal = old + return this + } + + + // MODAL DATA-API + // ============== + + $(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) { + var $this = $(this) + var href = $this.attr('href') + var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7 + var option = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data()) + + e.preventDefault() + + $target + .modal(option, this) + .one('hide', function () { + $this.is(':visible') && $this.focus() + }) + }) + + $(document) + .on('show.bs.modal', '.modal', function () { $(document.body).addClass('modal-open') }) + .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open') }) + +}(window.jQuery); \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/js/vendor/bootstrap-tab.js b/wagtail/wagtailadmin/static/wagtailadmin/js/vendor/bootstrap-tab.js new file mode 100644 index 000000000..2115c447d --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/js/vendor/bootstrap-tab.js @@ -0,0 +1,138 @@ +/* ======================================================================== + * Bootstrap: tab.js v3.0.0 + * http://twbs.github.com/bootstrap/javascript.html#tabs + * ======================================================================== + * Copyright 2012 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ======================================================================== */ + + ++function ($) { "use strict"; + + // TAB CLASS DEFINITION + // ==================== + + var Tab = function (element) { + this.element = $(element) + } + + Tab.prototype.show = function () { + var $this = this.element + var $ul = $this.closest('ul:not(.dropdown-menu)') + var selector = $this.attr('data-target') + + if (!selector) { + selector = $this.attr('href') + selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 + } + + if ($this.parent('li').hasClass('active')) return + + var previous = $ul.find('.active:last a')[0] + var e = $.Event('show.bs.tab', { + relatedTarget: previous + }) + + $this.trigger(e) + + if (e.isDefaultPrevented()) return + + var $target = $(selector) + + this.activate($this, $this.parent('li'), $ul) + this.activate($this, $target, $target.parent(), function () { + $this.trigger({ + type: 'shown.bs.tab' + , relatedTarget: previous + }) + }) + } + + Tab.prototype.activate = function (trigger, element, container, callback) { + var $active = container.find('> .active') + var transition = callback + && $.support.transition + && $active.hasClass('fade') + + function next() { + element.parent().find('.active').removeClass('active'); + $active + .removeClass('active') + .find('> .dropdown-menu > .active') + .removeClass('active') + + + trigger.addClass('active'); + element.addClass('active'); + + if (transition) { + element[0].offsetWidth // reflow for transition + element.addClass('in') + } else { + element.removeClass('fade') + } + + if (element.parent('.dropdown-menu')) { + element.closest('li.dropdown').addClass('active') + } + + callback && callback() + } + + transition ? + $active + .one($.support.transition.end, next) + .emulateTransitionEnd(150) : + next() + + $active.removeClass('in') + } + + + // TAB PLUGIN DEFINITION + // ===================== + + var old = $.fn.tab + + $.fn.tab = function ( option ) { + return this.each(function () { + var $this = $(this) + var data = $this.data('bs.tab') + + if (!data) $this.data('bs.tab', (data = new Tab(this))) + if (typeof option == 'string') data[option]() + }) + } + + $.fn.tab.Constructor = Tab + + + // TAB NO CONFLICT + // =============== + + $.fn.tab.noConflict = function () { + $.fn.tab = old + return this + } + + + // TAB DATA-API + // ============ + + $(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { + e.preventDefault() + $(this).tab('show') + }) + +}(window.jQuery); \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/js/vendor/hallo.js b/wagtail/wagtailadmin/static/wagtailadmin/js/vendor/hallo.js new file mode 100644 index 000000000..7ba3ff2c0 --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/js/vendor/hallo.js @@ -0,0 +1,2949 @@ +// Generated by CoffeeScript 1.3.3 +(function() { + + $.widget("ncri.hallohtml", { + options: { + editable: null, + toolbar: null, + uuid: "", + lang: 'en', + dialogOpts: { + autoOpen: false, + width: 600, + height: 'auto', + modal: false, + resizable: true, + draggable: true, + dialogClass: 'htmledit-dialog' + }, + dialog: null, + buttonCssClass: null + }, + translations: { + en: { + title: 'Edit HTML', + update: 'Update' + }, + de: { + title: 'HTML bearbeiten', + update: 'Aktualisieren' + } + }, + texts: null, + populateToolbar: function($toolbar) { + var $buttonHolder, $buttonset, id, widget; + widget = this; + this.texts = this.translations[this.options.lang]; + this.options.toolbar = $toolbar; + this.options.dialog = $("
        ").attr('id', "" + this.options.uuid + "-htmledit-dialog"); + $buttonset = $("").addClass(widget.widgetName); + id = "" + this.options.uuid + "-htmledit"; + $buttonHolder = $(''); + $buttonHolder.hallobutton({ + label: this.texts.title, + icon: 'icon-list-alt', + editable: this.options.editable, + command: null, + queryState: false, + uuid: this.options.uuid, + cssClass: this.options.buttonCssClass + }); + $buttonset.append($buttonHolder); + this.button = $buttonHolder; + this.button.click(function() { + if (widget.options.dialog.dialog("isOpen")) { + widget._closeDialog(); + } else { + widget._openDialog(); + } + return false; + }); + this.options.editable.element.on("hallodeactivated", function() { + return widget._closeDialog(); + }); + $toolbar.append($buttonset); + this.options.dialog.dialog(this.options.dialogOpts); + return this.options.dialog.dialog("option", "title", this.texts.title); + }, + _openDialog: function() { + var $editableEl, html, widget, xposition, yposition, + _this = this; + widget = this; + $editableEl = $(this.options.editable.element); + xposition = $editableEl.offset().left + $editableEl.outerWidth() + 10; + yposition = this.options.toolbar.offset().top - $(document).scrollTop(); + this.options.dialog.dialog("option", "position", [xposition, yposition]); + this.options.editable.keepActivated(true); + this.options.dialog.dialog("open"); + this.options.dialog.on('dialogclose', function() { + $('label', _this.button).removeClass('ui-state-active'); + _this.options.editable.element.focus(); + return _this.options.editable.keepActivated(false); + }); + this.options.dialog.html($("