Conflicts: doc/apiv3-documentation.apibpull/2345/head
Jan Sandbrink
10 years ago
commit
d3fe5ea094
@ -1,2 +1,2 @@ |
||||
https://github.com/heroku/heroku-buildpack-nodejs.git#v58 |
||||
https://github.com/heroku/heroku-buildpack-nodejs.git#v71 |
||||
https://github.com/pkgr/heroku-buildpack-ruby.git#universal |
||||
|
||||
@ -0,0 +1,10 @@ |
||||
root = true |
||||
|
||||
[*] |
||||
end_of_line = lf |
||||
insert_final_newline = true |
||||
|
||||
[*.{js,rb}] |
||||
charset = utf-8 |
||||
indent_style = space |
||||
indent_size = 2 |
||||
@ -0,0 +1,37 @@ |
||||
#-- copyright |
||||
# OpenProject is a project management system. |
||||
# Copyright (C) 2012-2015 the OpenProject Foundation (OPF) |
||||
# |
||||
# This program is free software; you can redistribute it and/or |
||||
# modify it under the terms of the GNU General Public License version 3. |
||||
# |
||||
# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows: |
||||
# Copyright (C) 2006-2013 Jean-Philippe Lang |
||||
# Copyright (C) 2010-2013 the ChiliProject Team |
||||
# |
||||
# This program is free software; you can redistribute it and/or |
||||
# modify it under the terms of the GNU General Public License |
||||
# as published by the Free Software Foundation; either version 2 |
||||
# of the License, or (at your option) any later version. |
||||
# |
||||
# This program is distributed in the hope that it will be useful, |
||||
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
# GNU General Public License for more details. |
||||
# |
||||
# You should have received a copy of the GNU General Public License |
||||
# along with this program; if not, write to the Free Software |
||||
# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. |
||||
# |
||||
# See doc/COPYRIGHT.rdoc for more details. |
||||
#++ |
||||
|
||||
# If you place a .env file into the root directory of OpenProject |
||||
# you can override some default settings that foreman will use |
||||
# to start OpenProject |
||||
|
||||
# override the default bind address |
||||
HOST=0.0.0.0 |
||||
|
||||
# override the default port |
||||
PORT=1337 |
||||
@ -0,0 +1,6 @@ |
||||
SimpleCov.start :rails |
||||
|
||||
if ENV['CI'] == 'true' |
||||
require 'codecov' |
||||
SimpleCov.formatter = SimpleCov::Formatter::Codecov |
||||
end |
||||
@ -0,0 +1,13 @@ |
||||
### Contributor Code of Conduct |
||||
|
||||
As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities. |
||||
|
||||
We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, age, or religion. |
||||
|
||||
Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct. |
||||
|
||||
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team. |
||||
|
||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers. |
||||
|
||||
This Code of Conduct is adapted from the [Contributor Covenant](http:contributor-covenant.org), version 1.0.0, available at [http://contributor-covenant.org/version/1/0/0/](http://contributor-covenant.org/version/1/0/0/). By participating in this project you agree to abide by its terms. |
||||
@ -1,7 +1,99 @@ |
||||
OpenProject is an open source project and we encourage you to help us out. We'd be happy if you do one of these things: |
||||
OpenProject is an open source project and we encourage you to help us out. For contributing to OpenProject, please read the following guidelines. |
||||
|
||||
* Create a [new work package on openproject.org](https://www.openproject.org/projects/openproject/work_packages) if you find a bug or need a feature |
||||
* Help out other people on our [forums](https://www.openproject.org/projects/openproject/boards) |
||||
* Help us [translate OpenProject to more languages](https://www.openproject.org/projects/openproject/wiki/Translations) |
||||
* Contribute code via GitHub Pull Requests, see our [contribution page](https://www.openproject.org/projects/openproject/wiki/Contribution) for more information |
||||
* See [Git Flow](https://www.openproject.org/projects/openproject/wiki/Git_Branching_Model) |
||||
*Please also note that these rules should be acknowledged by everyone, but repository contributors might occasionally deviate from them for practical purposes, e.g. not fork the repo, but have a branch on the main repository. This should however stay an exception.* |
||||
|
||||
## Contributors License Agreement |
||||
|
||||
External contributors have to sign a CLA before contributing to OpenProject. |
||||
The [CLA can be found here](https://www.openproject.org/wp-content/uploads/2014/09/OPF-Contributor-License-Agreement_v.2.pdf) and has to be filled out and sent to cla@openproject.org. Additionally, a GPG signature has to be provided. |
||||
|
||||
## Development flow |
||||
|
||||
For contributing source code, please follow the git workflow below: |
||||
|
||||
- **Fork** OpenProject on GitHub |
||||
- Clone your fork to your development machine: |
||||
|
||||
``` |
||||
git clone git@github.com/<username>/openproject |
||||
``` |
||||
|
||||
- Optional: Add the original OpenProject repository as a remote, so you can fetch changes: |
||||
|
||||
``` |
||||
git remote add upstream git@github.com:opf/openproject |
||||
``` |
||||
|
||||
- Make sure you're on the right branch. The main development branch is `dev`: |
||||
|
||||
``` |
||||
git checkout dev |
||||
``` |
||||
|
||||
- Create a feature branch: |
||||
|
||||
``` |
||||
git checkout -b feature/<short description of your feature> |
||||
``` |
||||
|
||||
- Make your changes, then push the branch into your ***own*** repository: |
||||
|
||||
``` |
||||
git push origin <your feature branch> |
||||
``` |
||||
|
||||
- Create a pull request against a branch of of the <opf/openproject> repository, containing a ***clear description*** of what the pull request attempts to change and/or fix. |
||||
|
||||
If your pull request **does not contain a description** for what it does and what it's intentions are, we will reject it. If you are working on a specific work package from the [list](https://community.openproject.org/projects/openproject/work_packages?query_props=%7B%22c%22:%5B%22type%22,%22status%22,%22subject%22,%22assigned_to%22%5D,%22t%22:%22parent:desc%22,%22f%22:%5B%7B%22n%22:%22status_id%22,%22o%22:%22!%22,%22t%22:%22list_status%22,%22v%22:%5B%2217%22,%2223%22,%223%22,%2214%22,%226%22%5D%7D%5D,%22pa%22:1,%22pp%22:20%7D), you may include a link to that work package in the description, so we can track your work. |
||||
|
||||
We will then review your pull request. Please note that you can add commits after the pull request has been created by pushing to the branch in your fork. |
||||
|
||||
## Important notes |
||||
|
||||
To ensure a smooth workflow for everyone, please take note of the following: |
||||
|
||||
### Testing |
||||
|
||||
Please add tests to your code to verify functionality, especially if it is a new feature. |
||||
|
||||
Pull requests will be verified by TravisCI as well, but please run them locally as well and make sure they are green before creating your pull request. We have a lot of pull requests coming in and it takes some time to run the complete suite for each one. |
||||
|
||||
### Branching model |
||||
|
||||
The main development branch for upcoming releases is `dev`. If in doubt, create your pull request against `dev`. All new features, gem updates and bugfixes for the upcoming release should go into the `dev` branch. |
||||
|
||||
#### Bugs and hotfixes |
||||
|
||||
Bugfixes for one of the actively supported versions of OpenProject should be issued against the respective branch. A fix for the current version (called "Hotfix" and the branch ideally being named `hotfix/XYZ`) should target `release/*` and a fix for the former version (called "Backport" and the branch ideally being named `backport/XYZ`) should target `backport/*`. We will try to merge hotfixes into dev branch but if that is no trivial task, we might ask you to create another PR for that. |
||||
|
||||
#### Travis CI |
||||
|
||||
If you push to your branch in quick sucession, please consider stopping the associated Travis builds, as Travis will run for each commit. This is especially true if you force push to the branch. |
||||
|
||||
Please also use `[ci skip]` in your commit message to suppress builds which are not necessary (e.g. after fixing a typo in the `README`). |
||||
|
||||
### Inactive pull requests |
||||
|
||||
We want to keep the Pull request list as cleaned up as possible - we will aim close pull requests after an **inactivity period of 72 hours** (no comments, no further pushes) which are not labelled as `work in progress` by us. |
||||
|
||||
### Issue tracking and coordination |
||||
|
||||
We use OpenProject for development coordination - please have a look at [the work packages list](https://community.openproject.org/projects/openproject/work_packages?query_props=%7B%22c%22:%5B%22type%22,%22status%22,%22subject%22,%22assigned_to%22%5D,%22t%22:%22parent:desc%22,%22f%22:%5B%7B%22n%22:%22status_id%22,%22o%22:%22!%22,%22t%22:%22list_status%22,%22v%22:%5B%2217%22,%2223%22,%223%22,%2214%22,%226%22%5D%7D%5D,%22pa%22:1,%22pp%22:20%7D) for upcoming features and reported bugs. |
||||
|
||||
### Contributor Code of Conduct |
||||
|
||||
As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities. |
||||
|
||||
We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, age, or religion. |
||||
|
||||
Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct. |
||||
|
||||
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team. |
||||
|
||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers. |
||||
|
||||
This Code of Conduct is adapted from the [Contributor Covenant](http:contributor-covenant.org), version 1.0.0, available at [http://contributor-covenant.org/version/1/0/0/](http://contributor-covenant.org/version/1/0/0/) |
||||
|
||||
### Get in touch |
||||
|
||||
If you want to get in touch with us, there is also a [Gitter channel](https://gitter.im/opf/openproject) to talk to us directly. |
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 83 KiB After Width: | Height: | Size: 85 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 18 KiB |
@ -0,0 +1,54 @@ |
||||
//-- copyright
|
||||
// OpenProject is a project management system.
|
||||
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
|
||||
//
|
||||
// This program is free software; you can redistribute it and/or
|
||||
// modify it under the terms of the GNU General Public License version 3.
|
||||
//
|
||||
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
|
||||
// Copyright (C) 2006-2013 Jean-Philippe Lang
|
||||
// Copyright (C) 2010-2013 the ChiliProject Team
|
||||
//
|
||||
// This program is free software; you can redistribute it and/or
|
||||
// modify it under the terms of the GNU General Public License
|
||||
// as published by the Free Software Foundation; either version 2
|
||||
// of the License, or (at your option) any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with this program; if not, write to the Free Software
|
||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
||||
//
|
||||
// See doc/COPYRIGHT.rdoc for more details.
|
||||
//++
|
||||
|
||||
(function ($) { |
||||
$(function() { |
||||
$('.timelines-x-update-color').each(function() { |
||||
var preview, input, func, target; |
||||
|
||||
preview = $(this); |
||||
target = preview.data('target'); |
||||
if(target) { |
||||
input = $(target); |
||||
} else { |
||||
input = preview.next('input'); |
||||
} |
||||
|
||||
if (input.length === 0) { |
||||
return; |
||||
} |
||||
|
||||
func = function () { |
||||
preview.css('background-color', input.val()); |
||||
}; |
||||
|
||||
input.keyup(func).change(func).focus(func); |
||||
func(); |
||||
}); |
||||
}); |
||||
}(jQuery)); |
||||
@ -0,0 +1,129 @@ |
||||
//-- copyright
|
||||
// OpenProject is a project management system.
|
||||
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
|
||||
//
|
||||
// This program is free software; you can redistribute it and/or
|
||||
// modify it under the terms of the GNU General Public License version 3.
|
||||
//
|
||||
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
|
||||
// Copyright (C) 2006-2013 Jean-Philippe Lang
|
||||
// Copyright (C) 2010-2013 the ChiliProject Team
|
||||
//
|
||||
// This program is free software; you can redistribute it and/or
|
||||
// modify it under the terms of the GNU General Public License
|
||||
// as published by the Free Software Foundation; either version 2
|
||||
// of the License, or (at your option) any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with this program; if not, write to the Free Software
|
||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
||||
//
|
||||
// See doc/COPYRIGHT.rdoc for more details.
|
||||
//++
|
||||
(function($) { |
||||
/* |
||||
* @see /app/views/custom_fields/_form.html.erb |
||||
*/ |
||||
$(function() { |
||||
var customFieldForm = $('#custom_field_form'); |
||||
|
||||
if (customFieldForm.length === 0) { |
||||
return; |
||||
} |
||||
|
||||
// collect the nodes involved
|
||||
var format = $('#custom_field_field_format'), |
||||
lengthField = $('#custom_field_length'), |
||||
regexpField = $('#custom_field_regexp'), |
||||
possibleValues = $('#custom_field_possible_values_attributes'), |
||||
defaultValueFields = $('#custom_field_default_value_attributes'), |
||||
spanDefaultTextMulti = $('#default_value_text_multi'), |
||||
spanDefaultTextSingle = $('#default_value_text_single'), |
||||
spanDefaultBool = $('#default_value_bool'); |
||||
|
||||
var deactivate = function(element) { |
||||
element.hide().find('input, textarea').not('.destroy_flag').attr('disabled', true); |
||||
}, |
||||
activate = function(element) { |
||||
element.show().find('input, textarea').not('.destroy_flag').removeAttr('disabled'); |
||||
}, |
||||
toggleVisibility = function(method, args) { |
||||
var fields = Array.prototype.slice.call(args); |
||||
$.each(fields, function(idx, field) { |
||||
field.closest('.form--field, .form--grouping')[method](); |
||||
}); |
||||
}, |
||||
hide = function() { toggleVisibility('hide', arguments); }, |
||||
show = function() { toggleVisibility('show', arguments); }, |
||||
toggleFormat = function() { |
||||
var searchable = $('#searchable_container'), |
||||
unsearchable = function() { searchable.attr('checked', false).hide(); }; |
||||
|
||||
// defaults (reset these fields before doing anything else)
|
||||
$.each([spanDefaultBool, spanDefaultTextSingle], function(idx, element) { |
||||
deactivate(element); |
||||
}); |
||||
show(defaultValueFields); |
||||
activate(spanDefaultTextMulti); |
||||
|
||||
switch (format.val()) { |
||||
case 'list': |
||||
hide(lengthField, regexpField); |
||||
show(searchable); |
||||
activate(possibleValues); |
||||
break; |
||||
case 'bool': |
||||
activate(spanDefaultBool); |
||||
deactivate(spanDefaultTextMulti); |
||||
deactivate(possibleValues); |
||||
hide(lengthField, regexpField, searchable); |
||||
unsearchable(); |
||||
break; |
||||
case 'date': |
||||
activate(spanDefaultTextSingle); |
||||
deactivate(spanDefaultTextMulti); |
||||
deactivate(possibleValues); |
||||
hide(lengthField, regexpField); |
||||
unsearchable(); |
||||
break; |
||||
case 'float': |
||||
case 'int': |
||||
activate(spanDefaultTextSingle); |
||||
deactivate(spanDefaultTextMulti); |
||||
deactivate(possibleValues); |
||||
show(lengthField, regexpField); |
||||
unsearchable(); |
||||
break; |
||||
case 'user': |
||||
case 'version': |
||||
deactivate(defaultValueFields); |
||||
deactivate(possibleValues); |
||||
hide(lengthField, regexpField, defaultValueFields); |
||||
unsearchable(); |
||||
break; |
||||
default: |
||||
show(lengthField, regexpField, searchable); |
||||
deactivate(possibleValues); |
||||
break; |
||||
} |
||||
}; |
||||
|
||||
// assign the switch format function to the select field
|
||||
format.on('change', toggleFormat).trigger('change'); |
||||
}); |
||||
|
||||
$(function() { |
||||
var localeSelectors = $('.locale_selector'); |
||||
|
||||
localeSelectors.change(function () { |
||||
var lang = $(this).val(), |
||||
span = $(this).closest('.translation'); |
||||
span.attr('lang', lang); |
||||
}).trigger('change'); |
||||
}); |
||||
}(jQuery)); |
||||
@ -0,0 +1,53 @@ |
||||
//-- copyright
|
||||
// OpenProject is a project management system.
|
||||
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
|
||||
//
|
||||
// This program is free software; you can redistribute it and/or
|
||||
// modify it under the terms of the GNU General Public License version 3.
|
||||
//
|
||||
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
|
||||
// Copyright (C) 2006-2013 Jean-Philippe Lang
|
||||
// Copyright (C) 2010-2013 the ChiliProject Team
|
||||
//
|
||||
// This program is free software; you can redistribute it and/or
|
||||
// modify it under the terms of the GNU General Public License
|
||||
// as published by the Free Software Foundation; either version 2
|
||||
// of the License, or (at your option) any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with this program; if not, write to the Free Software
|
||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
||||
//
|
||||
// See doc/COPYRIGHT.rdoc for more details.
|
||||
//++
|
||||
(function($) { |
||||
$(function() { |
||||
/* |
||||
* See /app/views/timelog/_date_range.html.erb |
||||
*/ |
||||
if ($('#date-range').length < 1) { |
||||
return; |
||||
} |
||||
var intervalInputs = $('#to, #from'), |
||||
// select
|
||||
period = $('#period'), |
||||
// radio buttons
|
||||
periodOptionList = $('#period_type_list'), |
||||
periodOptionInterval = $('#period_type_interval'); |
||||
|
||||
var activateRadiobutton = function(radioButton) { |
||||
return function() { |
||||
radioButton.attr('checked', true); |
||||
}; |
||||
}; |
||||
|
||||
|
||||
intervalInputs.on('click focus', activateRadiobutton(periodOptionInterval)); |
||||
period.on('click focus', activateRadiobutton(periodOptionList)); |
||||
}); |
||||
}(jQuery)); |
||||
@ -1,196 +0,0 @@ |
||||
//-- copyright
|
||||
// OpenProject is a project management system.
|
||||
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
|
||||
//
|
||||
// This program is free software; you can redistribute it and/or
|
||||
// modify it under the terms of the GNU General Public License version 3.
|
||||
//
|
||||
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
|
||||
// Copyright (C) 2006-2013 Jean-Philippe Lang
|
||||
// Copyright (C) 2010-2013 the ChiliProject Team
|
||||
//
|
||||
// This program is free software; you can redistribute it and/or
|
||||
// modify it under the terms of the GNU General Public License
|
||||
// as published by the Free Software Foundation; either version 2
|
||||
// of the License, or (at your option) any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with this program; if not, write to the Free Software
|
||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
||||
//
|
||||
// See doc/COPYRIGHT.rdoc for more details.
|
||||
//++
|
||||
|
||||
//= require mousetrap
|
||||
|
||||
(function($){ |
||||
|
||||
var accessibleListSelector = "table.list, table.keyboard-accessible-list"; |
||||
var accessibleRowSelector = "table.list tr, table.keyboard-accessible-list tr"; |
||||
|
||||
|
||||
var menu_sidebar = function() { |
||||
return $('div#menu-sidebar'); |
||||
}; |
||||
|
||||
var we_are_in_project = function() { |
||||
return menu_sidebar().size() === 1; |
||||
}; |
||||
|
||||
var show_help_modal = function(){ |
||||
var relative_url_root = jQuery('body').data('relative_url_root'); |
||||
var template_path = relative_url_root + 'help/keyboard_shortcuts'; |
||||
modalHelperInstance.createModal(template_path); |
||||
}; |
||||
|
||||
var go_overview = function(){ |
||||
if (we_are_in_project()) { |
||||
menu_sidebar().find('.overview')[0].click(); |
||||
} |
||||
}; |
||||
|
||||
var go_my_page = function(){ |
||||
var my_page = $('.account-nav .my-page'); |
||||
if (my_page.size() === 1) { |
||||
my_page[0].click(); |
||||
} |
||||
}; |
||||
|
||||
var go_work_packages = function(){ |
||||
if (we_are_in_project()) { |
||||
menu_sidebar().find('.work-packages')[0].click(); |
||||
} |
||||
}; |
||||
|
||||
var go_timelines = function(){ |
||||
if (we_are_in_project()) { |
||||
menu_sidebar().find('.timelines')[0].click(); |
||||
} |
||||
}; |
||||
|
||||
var go_wiki = function(){ |
||||
if (we_are_in_project()) { |
||||
menu_sidebar().find('.Wiki')[0].click(); |
||||
} |
||||
}; |
||||
|
||||
var go_activity = function(){ |
||||
if (we_are_in_project()) { |
||||
menu_sidebar().find('.activity')[0].click(); |
||||
} |
||||
}; |
||||
|
||||
var go_calendar = function(){ |
||||
if (we_are_in_project()) { |
||||
menu_sidebar().find('.calendar')[0].click(); |
||||
} |
||||
}; |
||||
|
||||
var go_news = function(){ |
||||
if (we_are_in_project()) { |
||||
menu_sidebar().find('.news')[0].click(); |
||||
} |
||||
}; |
||||
|
||||
var go_edit = function(){ |
||||
edit_link = $('[accesskey=3]')[0]; |
||||
if (edit_link !== undefined) { |
||||
edit_link.click(); |
||||
} |
||||
}; |
||||
|
||||
var open_more_menu = function(){ |
||||
more_menu = $('[accesskey=7]')[0]; |
||||
if (more_menu !== undefined) { |
||||
more_menu.click(); |
||||
} |
||||
}; |
||||
|
||||
var go_preview = function(){ |
||||
preview_link = $('[accesskey=1]')[0]; |
||||
if (preview_link !== undefined) { |
||||
preview_link.click(); |
||||
} |
||||
}; |
||||
|
||||
var new_work_package = function(){ |
||||
if (we_are_in_project()) { |
||||
menu_sidebar().find('.new-work-package')[0].click(); |
||||
} |
||||
}; |
||||
|
||||
var search_project = function(){ |
||||
$('#project-search-container').parents('li.drop-down').click(); |
||||
}; |
||||
|
||||
var search_global = function(){ |
||||
$('#search_wrap .search_field').focus(); |
||||
}; |
||||
|
||||
var find_list_in_page = function(){ |
||||
var dom_lists, focus_elements; |
||||
focus_elements = []; |
||||
dom_lists = $(accessibleListSelector); |
||||
dom_lists.find('tbody tr').each(function(index, tr){ |
||||
var first_link = $(tr).find('a:visible')[0]; |
||||
if ( first_link !== undefined ) { focus_elements.push(first_link); } |
||||
}); |
||||
return focus_elements; |
||||
}; |
||||
|
||||
var focus_item_offset = function(offset){ |
||||
var list, index; |
||||
list = find_list_in_page(); |
||||
if (list === null) { return; } |
||||
index = list.indexOf($(document.activeElement).parents(accessibleRowSelector).find('a:visible')[0]); |
||||
$(list[(index+offset+list.length) % list.length]).focus(); |
||||
}; |
||||
|
||||
var focus_next_item = function(){ |
||||
focus_item_offset(1); |
||||
}; |
||||
|
||||
var focus_previous_item = function(){ |
||||
focus_item_offset(-1); |
||||
}; |
||||
|
||||
|
||||
Mousetrap.bind('?', function(){ show_help_modal(); return false; }); |
||||
|
||||
Mousetrap.bind('g o', function(){ go_overview(); return false; }); |
||||
Mousetrap.bind('g m', function(){ go_my_page(); return false; }); |
||||
Mousetrap.bind('g w p', function(){ go_work_packages(); return false; }); |
||||
Mousetrap.bind('g w i', function(){ go_wiki(); return false; }); |
||||
Mousetrap.bind('g a', function(){ go_activity(); return false; }); |
||||
Mousetrap.bind('g c', function(){ go_calendar(); return false; }); |
||||
Mousetrap.bind('g n', function(){ go_news(); return false; }); |
||||
Mousetrap.bind('g t', function(){ go_timelines(); return false; }); |
||||
Mousetrap.bind('g e', function(){ go_edit(); return false; }); |
||||
Mousetrap.bind('g p', function(){ go_preview(); return false; }); |
||||
|
||||
Mousetrap.bind('n w p', function(){ new_work_package(); return false; }); |
||||
Mousetrap.bind('j', function(){ focus_next_item(); return false; }); |
||||
Mousetrap.bind('k', function(){ focus_previous_item(); return false; }); |
||||
Mousetrap.bind('m', function(){ open_more_menu(); return false; }); |
||||
|
||||
Mousetrap.bind('p', function(){ search_project(); return false; }); |
||||
Mousetrap.bind('s', function(){ search_global(); return false; }); |
||||
|
||||
jQuery(function(){ |
||||
// simulated hover effect on table lists when using the keyboard
|
||||
var tables = jQuery(accessibleListSelector); |
||||
if (tables.size() === 0) { return; } |
||||
tables.on('blur', 'tr *', function(){ |
||||
jQuery(this).parents(accessibleRowSelector).removeClass('keyboard_hover'); |
||||
}); |
||||
tables.on('focus', 'tr *', function(){ |
||||
jQuery(this).parents(accessibleRowSelector).addClass('keyboard_hover'); |
||||
}); |
||||
}); |
||||
|
||||
})(jQuery); |
||||
@ -0,0 +1,150 @@ |
||||
//-- copyright |
||||
// OpenProject is a project management system. |
||||
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF) |
||||
// |
||||
// This program is free software; you can redistribute it and/or |
||||
// modify it under the terms of the GNU General Public License version 3. |
||||
// |
||||
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows: |
||||
// Copyright (C) 2006-2013 Jean-Philippe Lang |
||||
// Copyright (C) 2010-2013 the ChiliProject Team |
||||
// |
||||
// This program is free software; you can redistribute it and/or |
||||
// modify it under the terms of the GNU General Public License |
||||
// as published by the Free Software Foundation; either version 2 |
||||
// of the License, or (at your option) any later version. |
||||
// |
||||
// This program is distributed in the hope that it will be useful, |
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
// GNU General Public License for more details. |
||||
// |
||||
// You should have received a copy of the GNU General Public License |
||||
// along with this program; if not, write to the Free Software |
||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. |
||||
// |
||||
// See doc/COPYRIGHT.rdoc for more details. |
||||
//++ |
||||
|
||||
@import open_project_global/all |
||||
@import fonts/openproject_icon_font |
||||
|
||||
$jstoolbar--icon-background: #fff |
||||
$jstoolbar--icon-hover-border: #ccc |
||||
$jstoolbar--icon-border: #fff |
||||
$jstoolbar--icon-active-border: #bbb |
||||
$jstoolbar--icon-active-background: #eee |
||||
|
||||
.jstEditor |
||||
padding-left: 0 |
||||
|
||||
textarea, iframe |
||||
margin: 0 |
||||
|
||||
.jstHandle |
||||
height: 10px |
||||
font-size: 0.1em |
||||
cursor: s-resize |
||||
|
||||
.jstElements |
||||
@include grid-block |
||||
text-align: center |
||||
margin-bottom: 0.25rem |
||||
line-height: 1.6rem |
||||
justify-content: flex-end |
||||
|
||||
button |
||||
@include grid-content |
||||
flex: 0 1 2rem |
||||
padding: 0.25rem |
||||
margin-left: 0.25rem |
||||
height: 1.625rem |
||||
width: 1.625rem |
||||
max-width: 1.625rem |
||||
border: 1px solid $jstoolbar--icon-border |
||||
background-color: $jstoolbar--icon-background |
||||
color: $body-font-color |
||||
border-radius: 2px |
||||
overflow-y: hidden |
||||
line-height: 1.3rem |
||||
|
||||
&:before |
||||
@include icon-common |
||||
|
||||
&:hover |
||||
border-color: $jstoolbar--icon-hover-border |
||||
cursor: pointer |
||||
|
||||
&:focus |
||||
border-color: $jstoolbar--icon-hover-border |
||||
|
||||
&.-active |
||||
border-color: $jstoolbar--icon-hover-border |
||||
box-shadow: inset 0px 0px 3px $jstoolbar--icon-active-border |
||||
background: $jstoolbar--icon-active-background |
||||
|
||||
span |
||||
display: none |
||||
|
||||
.jstb_help |
||||
font-size: 0.8125rem |
||||
padding: 0.35rem |
||||
line-height: 1rem |
||||
|
||||
&:before |
||||
color: $body-font-color |
||||
padding: 0 |
||||
|
||||
span |
||||
display: inline |
||||
|
||||
|
||||
.jstSpacer |
||||
width: 0 |
||||
font-size: 1px |
||||
margin-right: 4px |
||||
|
||||
.jstb_strong:before |
||||
content: "\e042" |
||||
|
||||
.jstb_em:before |
||||
content: "\e070" |
||||
|
||||
.jstb_ins:before |
||||
content: "\e0b3" |
||||
|
||||
.jstb_del:before |
||||
content: "\e072" |
||||
|
||||
.jstb_code:before |
||||
content: "\e050" |
||||
|
||||
.jstb_h1:before |
||||
content: "\e0d6" |
||||
|
||||
.jstb_h2:before |
||||
content: "\e0d7" |
||||
|
||||
.jstb_h3:before |
||||
content: "\e0d8" |
||||
|
||||
.jstb_ul:before |
||||
content: "\e07b" |
||||
|
||||
.jstb_ol:before |
||||
content: "\e07d" |
||||
|
||||
.jstb_bq:before |
||||
content: "\e08d" |
||||
|
||||
.jstb_unbq:before |
||||
content: "\e08e" |
||||
|
||||
.jstb_pre:before |
||||
content: "\e0d9" |
||||
|
||||
.jstb_link:before |
||||
content: "\e013" |
||||
|
||||
.jstb_img:before |
||||
content: "\e06c" |
||||
@ -0,0 +1,731 @@ |
||||
//-- copyright |
||||
// OpenProject is a project management system. |
||||
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF) |
||||
// |
||||
// This program is free software; you can redistribute it and/or |
||||
// modify it under the terms of the GNU General Public License version 3. |
||||
// |
||||
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows: |
||||
// Copyright (C) 2006-2013 Jean-Philippe Lang |
||||
// Copyright (C) 2010-2013 the ChiliProject Team |
||||
// |
||||
// This program is free software; you can redistribute it and/or |
||||
// modify it under the terms of the GNU General Public License |
||||
// as published by the Free Software Foundation; either version 2 |
||||
// of the License, or (at your option) any later version. |
||||
// |
||||
// This program is distributed in the hope that it will be useful, |
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
// GNU General Public License for more details. |
||||
// |
||||
// You should have received a copy of the GNU General Public License |
||||
// along with this program; if not, write to the Free Software |
||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. |
||||
// |
||||
// See doc/COPYRIGHT.rdoc for more details. |
||||
//++ |
||||
|
||||
|
||||
// IMPORTANT! |
||||
|
||||
// This is a "junk-drawer" containing CSS rule sets that could not be easily |
||||
// placed elsewhere. Pleade DO NOT add to this file. Instead MOVE, refactor or |
||||
// REMOVE with ruthlessness. |
||||
|
||||
|
||||
#watchers |
||||
ul |
||||
margin: 0 |
||||
padding: 0 |
||||
|
||||
a.delete |
||||
opacity: 0.4 |
||||
&:hover |
||||
opacity: 1 |
||||
|
||||
.highlight |
||||
background-color: #FCFD8D |
||||
&.token-1 |
||||
background-color: #faa |
||||
&.token-2 |
||||
background-color: #afa |
||||
&.token-3 |
||||
background-color: #aaf |
||||
|
||||
.contextual |
||||
float: right |
||||
white-space: nowrap |
||||
line-height: 1.4em |
||||
margin-top: 8px |
||||
padding-left: 10px |
||||
input, select |
||||
font-size: 0.9em |
||||
|
||||
.message .contextual |
||||
margin-top: 0 |
||||
|
||||
form |
||||
display: inline |
||||
|
||||
hr |
||||
width: 100% |
||||
height: 1px |
||||
background: #ccc |
||||
border: 0 |
||||
|
||||
blockquote |
||||
font-style: italic |
||||
border-left: 3px solid #e0e0e0 |
||||
padding-left: 0.6em |
||||
margin-left: 2.4em |
||||
blockquote |
||||
margin-left: 0 |
||||
|
||||
li p |
||||
margin-top: 0 |
||||
|
||||
p |
||||
&.breadcrumb |
||||
font-size: 0.9em |
||||
margin: 4px 0 4px 0 |
||||
&.footnote |
||||
font-size: 0.9em |
||||
margin-top: 0 |
||||
margin-bottom: 0 |
||||
|
||||
div.issue div.subject |
||||
div div |
||||
padding-left: 16px |
||||
p |
||||
margin: 0 |
||||
margin-bottom: 0.1em |
||||
font-size: 90% |
||||
color: #999 |
||||
> div > p |
||||
margin-top: 0.5em |
||||
|
||||
.buttons |
||||
margin-bottom: 1.4em |
||||
margin-top: 1em |
||||
|
||||
div |
||||
&#work_package-changesets |
||||
float: right |
||||
width: 45% |
||||
margin: 1em 0 1em 1em |
||||
background: #fff |
||||
padding-left: 1em |
||||
h3 |
||||
margin-top: 0 |
||||
div.changeset |
||||
padding: 4px |
||||
border-bottom: 1px solid #ddd |
||||
p |
||||
margin-top: 0 |
||||
margin-bottom: 1em |
||||
&#activity dl |
||||
margin-left: 2em |
||||
|
||||
#search-results |
||||
margin-left: 2em |
||||
|
||||
div#activity dd, #search-results dd |
||||
margin-bottom: 1em |
||||
padding-left: 18px |
||||
font-size: 0.9em |
||||
|
||||
div#activity |
||||
dt |
||||
&.me .time |
||||
border-bottom: 1px solid #999 |
||||
.time |
||||
color: #777 |
||||
font-size: 80% |
||||
dd .description |
||||
font-style: italic |
||||
|
||||
#search-results dd .description |
||||
font-style: italic |
||||
|
||||
div#activity span.project:after, #search-results span.project:after |
||||
content: " -" |
||||
|
||||
div#activity dd span.description |
||||
display: block |
||||
color: #808080 |
||||
|
||||
#search-results dd |
||||
span.description |
||||
display: block |
||||
color: #808080 |
||||
margin-bottom: 1em |
||||
padding-left: 20px |
||||
margin-left: 0 |
||||
|
||||
div#search-results-counts |
||||
float: right |
||||
ul |
||||
margin-top: 0.5em |
||||
li |
||||
list-style-type: none |
||||
float: left |
||||
margin-left: 1em |
||||
|
||||
.search-pagination |
||||
text-align: center |
||||
a |
||||
padding: 0 5px |
||||
|
||||
#project-search-container .select2-container |
||||
display: block |
||||
|
||||
div |
||||
&#roadmap |
||||
.related-issues |
||||
border: 0 |
||||
margin-bottom: 1em |
||||
td.checkbox |
||||
display: none |
||||
.wiki |
||||
h1 |
||||
&:first-child |
||||
display: none |
||||
font-size: 120% |
||||
h2 |
||||
font-size: 110% |
||||
&#version-summary |
||||
float: right |
||||
width: 380px |
||||
margin-left: 16px |
||||
margin-bottom: 16px |
||||
background-color: #fff |
||||
.total-hours |
||||
text-align: right |
||||
|
||||
.top-page |
||||
width: 100% |
||||
border-bottom: 1px solid #bbbbbb |
||||
margin: 0 0 10px |
||||
h2 |
||||
padding-right: 0 !important |
||||
border: none |
||||
margin: 0 |
||||
text-align: left |
||||
display: block |
||||
text-overflow: ellipsis |
||||
white-space: nowrap |
||||
overflow: hidden |
||||
ul |
||||
margin: 0 |
||||
text-align: right |
||||
white-space: nowrap |
||||
|
||||
ul.projects |
||||
margin: 0 |
||||
padding-left: 1em |
||||
&.root |
||||
margin: 0 |
||||
padding: 0 |
||||
ul |
||||
border: none |
||||
&.projects |
||||
border-left: 3px solid #e0e0e0 |
||||
li |
||||
&.root |
||||
list-style-type: none |
||||
margin-bottom: 1em |
||||
&.child |
||||
list-style-type: none |
||||
margin-top: 1em |
||||
div.root a.project |
||||
font-weight: bold |
||||
margin: 0 0 10px 0 |
||||
|
||||
#type_project_ids |
||||
ul |
||||
margin: 0 |
||||
padding-left: 1em |
||||
li |
||||
list-style-type: none |
||||
|
||||
ul.properties |
||||
padding: 0 |
||||
font-size: 0.9em |
||||
color: #333 |
||||
li |
||||
list-style-type: none |
||||
span |
||||
font-style: italic |
||||
|
||||
.total-hours |
||||
font-size: 110% |
||||
font-weight: bold |
||||
span.hours-int |
||||
font-size: 120% |
||||
|
||||
.autoscroll |
||||
overflow-x: auto |
||||
padding: 1px |
||||
margin-bottom: 1.2em |
||||
|
||||
#workflow_copy_form select |
||||
width: 200px |
||||
|
||||
textarea#custom_field_possible_values |
||||
width: 99% |
||||
|
||||
|
||||
div.attachments |
||||
margin-top: 12px |
||||
p |
||||
margin: 4px 0 2px 0 |
||||
img |
||||
vertical-align: middle |
||||
span.author |
||||
font-size: 0.9em |
||||
color: #888 |
||||
|
||||
p.other-formats |
||||
font-size: 0.9em |
||||
color: #666 |
||||
|
||||
.other-formats span + span:before |
||||
content: "| " |
||||
|
||||
/* Project members tab */ |
||||
|
||||
div#tab-content-members |
||||
.user.status_registered, label.status_registered |
||||
opacity: 0.8 |
||||
|
||||
input#user_search |
||||
width: 100% |
||||
|
||||
.quick_info |
||||
padding-bottom: 0.5em |
||||
&.attributes .label |
||||
font-weight: bold |
||||
|
||||
#activity dt |
||||
clear: left |
||||
|
||||
.journal-link |
||||
float: right |
||||
|
||||
h2 img |
||||
vertical-align: middle |
||||
|
||||
h1.title |
||||
margin: 12px 24px 9px |
||||
|
||||
form#issue-list |
||||
position: relative |
||||
|
||||
div.issue hr |
||||
margin-top: 10px |
||||
margin-bottom: 10px |
||||
clear: both |
||||
|
||||
#content div.issue h3, div.issue h3 |
||||
border: 0 |
||||
margin-top: -6px |
||||
margin-bottom: 0 |
||||
|
||||
#content div.issue table |
||||
td |
||||
background: none |
||||
border: 0 none |
||||
padding: 0 3px |
||||
padding-left: 0 |
||||
th |
||||
background: none |
||||
border: 0 none |
||||
padding: 0 3px |
||||
padding-left: 0 |
||||
font-weight: bold |
||||
|
||||
.attachments h4 |
||||
margin-bottom: 6px |
||||
background: image-url("files-showhide.png") no-repeat right bottom |
||||
cursor: pointer |
||||
&.closed |
||||
background-position: right 5px |
||||
|
||||
table.files |
||||
display: table |
||||
|
||||
#content table.files |
||||
td |
||||
border: 0 |
||||
background: none |
||||
th |
||||
border: 0 |
||||
background: none |
||||
font-weight: bold |
||||
padding: 1px |
||||
border: 0 |
||||
background: none |
||||
td |
||||
color: #555 |
||||
padding: 1px |
||||
.opt-desc |
||||
width: 60% |
||||
td a |
||||
position: relative |
||||
|
||||
#content blockquote |
||||
padding-left: 22px |
||||
|
||||
.wiki |
||||
ol, ul |
||||
padding-left: 22px |
||||
|
||||
blockquote |
||||
font-style: italic |
||||
background: image-url("blockquote-bg.png") no-repeat 5px 3px |
||||
|
||||
#project-links |
||||
right: 30px |
||||
color: #ccc |
||||
font-weight: bold |
||||
|
||||
.nosidebar |
||||
blockquote |
||||
margin: 1em 0 |
||||
p |
||||
margin-bottom: 1em |
||||
|
||||
li |
||||
&.root |
||||
margin-bottom: 24px |
||||
|
||||
.nosidebar ul.projects |
||||
margin: 24px 0 0 |
||||
ul |
||||
margin: 0 |
||||
|
||||
ul.projects .description |
||||
|
||||
.nosidebar ul.projects li |
||||
list-style: none outside none |
||||
background: none |
||||
|
||||
ul.projects |
||||
a |
||||
font-weight: bold |
||||
li div.root |
||||
margin-bottom: 12px |
||||
|
||||
.profile-wrap |
||||
float: right |
||||
position: relative |
||||
width: 42px |
||||
height: 42px |
||||
top: 7px |
||||
right: 14px |
||||
|
||||
/* file table hovers */ |
||||
|
||||
a.has-thumb |
||||
img |
||||
position: absolute |
||||
display: none |
||||
border: 1px solid #a6c6cf |
||||
padding: 4px |
||||
background: #fff |
||||
border-radius: 3px |
||||
&.active |
||||
left: -10px |
||||
background: image-url("thumb-arrow-right.png") no-repeat left center |
||||
padding-left: 10px |
||||
margin-right: -10px |
||||
|
||||
td.issue div.issue-wrap-outer |
||||
position: relative |
||||
|
||||
.menu li |
||||
position: relative |
||||
&:first-child |
||||
border-top: 0 |
||||
&:last-child |
||||
border-bottom: 0 |
||||
|
||||
.inline |
||||
display: inline |
||||
|
||||
form#issue-list |
||||
display: block |
||||
|
||||
.js-tooltip |
||||
width: 100% |
||||
|
||||
.js-tooltip-inner |
||||
width: 100% |
||||
max-height: none |
||||
|
||||
.js-tooltip .issue-tooltip-description |
||||
max-height: 200px |
||||
overflow: hidden |
||||
|
||||
/* roadmap breathing */ |
||||
|
||||
#roadmap h3 |
||||
margin: 21px 0 12px |
||||
|
||||
tr.context-menu-selection td.priority |
||||
background: none !important |
||||
|
||||
ul.projects div.root a.project |
||||
font-family: inherit |
||||
|
||||
div.issue div#relations |
||||
margin-top: 25px |
||||
|
||||
/* all kinds of wonderful tweaks*/ |
||||
|
||||
.question pre |
||||
color: #111 |
||||
|
||||
div.issue hr |
||||
width: auto |
||||
|
||||
.question .wiki |
||||
margin: 0 |
||||
|
||||
.wiki |
||||
ol, ul |
||||
margin-bottom: 6px |
||||
|
||||
#content |
||||
h3 |
||||
margin: 12px 0 6px |
||||
h2 + h3 |
||||
margin-top: 12px |
||||
|
||||
.nosidebar |
||||
ol.ui-sortable li |
||||
list-style: none outside none |
||||
|
||||
tr.time-entry |
||||
white-space: normal |
||||
|
||||
/* comments */ |
||||
|
||||
.wiki ol li |
||||
list-style: decimal inside |
||||
|
||||
/* scm */ |
||||
|
||||
#content table .changeset td.id a:hover |
||||
text-decoration: underline |
||||
|
||||
#content table.files .opt-desc |
||||
width: 45% |
||||
|
||||
/* member settings [pc] */ |
||||
|
||||
select#member_role_id |
||||
width: 75px |
||||
|
||||
/* fix for thumbnail jankiness */ |
||||
|
||||
a.has-thumb |
||||
&.active |
||||
left: auto |
||||
margin-left: -10px |
||||
margin-right: 0 |
||||
*left: -10px |
||||
/* IE6 & 7 hacks */ |
||||
*margin-left: 0 |
||||
img |
||||
z-index: 1001 |
||||
|
||||
#more-menu.drop-down ul li a.projects |
||||
border-top: 1px solid #555 |
||||
|
||||
.reorder-icons img |
||||
padding-right: 3px |
||||
padding-left: 3px |
||||
|
||||
|
||||
|
||||
/* Cut of text with '...' - working on all major browsers and IE6+ |
||||
* not working for Firefox < 7 */ |
||||
|
||||
.ellipsis |
||||
white-space: nowrap |
||||
overflow: hidden |
||||
text-overflow: ellipsis |
||||
-o-text-overflow: ellipsis |
||||
-ms-text-overflow: ellipsis |
||||
|
||||
label.label-with-input |
||||
display: block |
||||
white-space: nowrap |
||||
zoom: 1 |
||||
margin-left: 0 |
||||
float: none |
||||
|
||||
#query_form_content |
||||
padding-top: 10px |
||||
|
||||
#lower-title-bar |
||||
div.contextual |
||||
margin-top: -8px |
||||
margin-top: 30px |
||||
margin-left: 10px |
||||
|
||||
#watchers .contextual |
||||
margin-top: 0 |
||||
|
||||
div |
||||
&.issues.box > p, &.mypage-box p |
||||
margin-top: 15px |
||||
|
||||
&.overview |
||||
padding: 6px |
||||
margin-bottom: 10px |
||||
line-height: 1.5em |
||||
|
||||
td.table-buttons |
||||
vertical-align: middle |
||||
|
||||
select#available_columns |
||||
margin-right: 0 |
||||
|
||||
.pages-hierarchy |
||||
padding-left: 10px |
||||
list-style-type: disc |
||||
list-style-position: inside |
||||
|
||||
#menu-sidebar.hidden |
||||
display: none |
||||
|
||||
div#watchers |
||||
margin-top: 25px |
||||
> form > p |
||||
margin-top: 5px |
||||
|
||||
a > img.imgtag-icon |
||||
float: left |
||||
margin-right: 3px |
||||
|
||||
th.checkbox img |
||||
margin-left: 3px |
||||
margin-top: 3px |
||||
|
||||
p.buttons |
||||
margin-left: 10px |
||||
|
||||
div.contextual > a.icon, p.buttons > a, ul.action_menu_main > li |
||||
padding-right: 10px |
||||
|
||||
strong.related-issues-heading |
||||
display: block |
||||
margin-top: 10px |
||||
|
||||
div.indent |
||||
padding-left: 10px |
||||
|
||||
/* Menu item configuration */ |
||||
|
||||
.menu-item-form |
||||
p |
||||
padding-left: 0 |
||||
label |
||||
display: inline-block |
||||
margin-bottom: 10px |
||||
margin-left: 0 |
||||
width: auto |
||||
font-weight: bold |
||||
select#parent_wiki_menu_item |
||||
margin-left: 7px |
||||
margin-top: -1px |
||||
#item-name |
||||
float: left |
||||
padding-left: 3px |
||||
margin-right: 4px |
||||
line-height: 21px |
||||
label#with-select |
||||
margin-left: 0 |
||||
select#parent_wiki_menu_item_wiki_page |
||||
margin-bottom: 10px |
||||
p |
||||
&.item-name |
||||
padding-top: 10px |
||||
&.main_item |
||||
padding-bottom: 0 |
||||
&.wiki_menu_item_optional_links |
||||
margin-left: 10px |
||||
padding-top: 0 |
||||
|
||||
#content |
||||
#history |
||||
background: image-url("dotted-separator.gif") repeat-x scroll 0 bottom transparent |
||||
.wiki-content |
||||
p, li |
||||
width: 700px |
||||
|
||||
.required |
||||
color: #008BD0 |
||||
|
||||
/*Gannt chart fix IE 6 */ |
||||
|
||||
.task |
||||
line-height: 1em |
||||
|
||||
/*Cost-Plugin specific styles */ |
||||
|
||||
.icon-pieces |
||||
background-image: image-url("webalys/units.png") !important |
||||
|
||||
.icon-pieces-time |
||||
background-image: image-url("webalys/time.png") !important |
||||
|
||||
body |
||||
&.theme-Bsp .buttons .apply, &.theme-Dtag .buttons .apply |
||||
background-color: #24b3e7 |
||||
|
||||
input::-webkit-input-placeholder, :-moz-placeholder |
||||
color: #000000 |
||||
|
||||
#ui-dialog-closer |
||||
background-image: image-url("modal_close.png") |
||||
cursor: pointer |
||||
height: 33px |
||||
position: absolute |
||||
right: -15px |
||||
top: -15px |
||||
width: 33px |
||||
z-index: 5000 |
||||
|
||||
.ui-datepicker .ui-priority-secondary |
||||
opacity: 1 |
||||
filter: Alpha(Opacity = 100) |
||||
font-weight: bold |
||||
|
||||
h4.comment |
||||
margin-bottom: 8px |
||||
margin-top: 18px |
||||
img |
||||
margin-right: 3px |
||||
|
||||
.atwho-view |
||||
z-index: 25 |
||||
.cur |
||||
background: #FFFFBB |
||||
color: #4B4B4B |
||||
strong |
||||
color: black |
||||
|
||||
/* |
||||
* Legacy headings to create headings which are similiar to the toolbar |
||||
* but cannot use the toolbar yet (e.g Legacy forms) |
||||
*/ |
||||
.legacy-heading |
||||
// this will harmonize the headings in the old legacy form |
||||
// to be the same as if using a toolbar component |
||||
// TODO: once WP full screen create hits, remove this |
||||
padding-top: 12px |
||||
border: 0 |
||||
@ -0,0 +1,613 @@ |
||||
// |
||||
// FOUNDATION FOR APPS SETTINGS |
||||
// ---------------------------- |
||||
// |
||||
// Table of Contents: |
||||
// |
||||
// 1. CSS Exports |
||||
// 2. Global Styles |
||||
// 3. Breakpoints |
||||
// 4. Typography |
||||
// 5. Grid |
||||
// 6. Button |
||||
// 7. Accordion |
||||
// 8. Action Sheet |
||||
// 9. Block List |
||||
// 10. Button Group |
||||
// 11. Card |
||||
// 12. Extras |
||||
// 13. Forms |
||||
// 14. Iconic |
||||
// 15. Label |
||||
// 16. Menu Bar |
||||
// 17. Modal |
||||
// 18. Motion UI |
||||
// 19. Notification |
||||
// 20. Off-canvas |
||||
// 21. Panel |
||||
// 22. Popup |
||||
// 23. Switch |
||||
// 24. Tabs |
||||
// 25. Title Bar |
||||
|
||||
@import "helpers/functions"; |
||||
|
||||
// 1. CSS Exports |
||||
// - - - - - - - - - - - - - - - |
||||
|
||||
// Change any value in this map from "true" to "false" to disable that component's CSS class output. You'll still be able to use the component's mixins, but none of our pre-written classes will be in your CSS. |
||||
|
||||
$include-css: ( |
||||
accordion: false, |
||||
action-sheet: false, |
||||
block-list: false, |
||||
button: false, |
||||
button-group: false, |
||||
card: true, |
||||
coloring: false, |
||||
extras: false, |
||||
forms: false, |
||||
grid: true, |
||||
iconic: false, |
||||
label: true, |
||||
badge: false, |
||||
list: false, |
||||
menu-bar: false, |
||||
modal: false, |
||||
motion: false, |
||||
notification: false, |
||||
off-canvas: false, |
||||
panel: false, |
||||
popup: false, |
||||
switch: false, |
||||
tabs: false, |
||||
title-bar: false, |
||||
typography: true, |
||||
utilities: true, |
||||
); |
||||
|
||||
// 2. Global Styles |
||||
// - - - - - - - - - - - - - - - |
||||
|
||||
// This sets 1rem to be 16px |
||||
// $rem-base: 16px; |
||||
|
||||
// The default font-size is set to 100% of the browser style sheet (usually 16px) |
||||
// for compatibility with browser-based text zoom or user-set defaults. |
||||
|
||||
// Since the typical default browser font-size is 16px, that makes the calculation for grid size. |
||||
// If you want your base font-size to be different and not have it affect the grid breakpoints, |
||||
// set $rem-base to $base-font-size and make sure $base-font-size is a px value. |
||||
// $base-font-size: 100%; |
||||
|
||||
// $base-line-height is 24px while $base-font-size is 16px |
||||
// $base-line-height: 1.5; |
||||
|
||||
// Text selector helpers |
||||
// $headers: "h1,h2,h3,h4,h5,h6"; |
||||
|
||||
// We use these to define default font weights |
||||
// $font-weight-normal: normal; |
||||
// $font-weight-bold: bold; |
||||
|
||||
// We use these to control various global styles |
||||
// $body-background: #fff; |
||||
// $body-font-color: #222; |
||||
// $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; |
||||
// $body-font-weight: $font-weight-normal; |
||||
// $body-font-style: normal; |
||||
// $body-antialiased: true; |
||||
|
||||
// Application Colors |
||||
// $primary-color: #00558b; |
||||
// $secondary-color: #f1f1f1; |
||||
// $alert-color: #F04124; |
||||
// $info-color: #A0D3E8; |
||||
// $success-color: #43AC6A; |
||||
// $warning-color: #F08A24; |
||||
// $dark-color: #232323; |
||||
|
||||
// We use these to make sure border radius matches unless we want it different. |
||||
// $global-radius: 4px; |
||||
// $global-rounded: 1000px; |
||||
|
||||
// We use this for default spacing |
||||
// $global-padding: 1rem; |
||||
// $global-spacing: rem-calc(15); |
||||
|
||||
// 3. Breakpoints |
||||
// - - - - - - - - - - - - - - - |
||||
|
||||
// These are our named breakpoints. You can use them in our breakpoint function like this: @include breakpoint(medium) { // Medium and larger styles } |
||||
$breakpoints: ( |
||||
small: rem-calc(300), |
||||
medium: rem-calc(640), |
||||
large: rem-calc(1200), |
||||
xlarge: rem-calc(1440), |
||||
xxlarge: rem-calc(1920), |
||||
xxxlarge: rem-calc(2048), |
||||
); |
||||
|
||||
// All of the names in this list will be output as classes in your CSS, like small-12, medium-6, and so on. |
||||
// $breakpoint-classes: (small medium large); |
||||
|
||||
// 4. Typography |
||||
// - - - - - - - - - - - - - - - |
||||
|
||||
// We use these to control header font styles |
||||
// $header-font-family: $body-font-family; |
||||
// $header-font-weight: $font-weight-normal; |
||||
// $header-font-style: $font-weight-normal; |
||||
// $header-font-color: #222; |
||||
// $header-line-height: 1.4; |
||||
// $header-top-margin: .2rem; |
||||
// $header-bottom-margin: .5rem; |
||||
// $header-text-rendering: optimizeLegibility; |
||||
|
||||
// We use these to control header font sizes |
||||
// $h1-font-size: rem-calc(44); |
||||
// $h2-font-size: rem-calc(37); |
||||
// $h3-font-size: rem-calc(27); |
||||
// $h4-font-size: rem-calc(23); |
||||
// $h5-font-size: rem-calc(18); |
||||
// $h6-font-size: 1rem; |
||||
|
||||
// We use these to control header size reduction on small screens |
||||
// $h1-font-reduction: rem-calc(10); |
||||
// $h2-font-reduction: rem-calc(10); |
||||
// $h3-font-reduction: rem-calc(5); |
||||
// $h4-font-reduction: rem-calc(5); |
||||
// $h5-font-reduction: 0; |
||||
// $h6-font-reduction: 0; |
||||
|
||||
// These control how subheaders are styled. |
||||
// $subheader-line-height: 1.4; |
||||
// $subheader-font-color: scale-color($header-font-color, $lightness: 35%); |
||||
// $subheader-font-weight: $font-weight-normal; |
||||
// $subheader-top-margin: .2rem; |
||||
// $subheader-bottom-margin: .5rem; |
||||
|
||||
// A general <small> styling |
||||
// $small-font-size: 60%; |
||||
// $small-font-color: scale-color($header-font-color, $lightness: 35%); |
||||
|
||||
// We use these to style paragraphs |
||||
// $paragraph-font-family: inherit; |
||||
// $paragraph-font-weight: $font-weight-normal; |
||||
// $paragraph-font-size: 1rem; |
||||
// $paragraph-line-height: 1.6; |
||||
// $paragraph-margin-bottom: rem-calc(20); |
||||
// $paragraph-aside-font-size: rem-calc(14); |
||||
// $paragraph-aside-line-height: 1.35; |
||||
// $paragraph-aside-font-style: italic; |
||||
// $paragraph-text-rendering: optimizeLegibility; |
||||
|
||||
// We use these to style <code> tags |
||||
// $code-color: grayscale($primary-color); |
||||
// $code-font-family: Consolas, 'Liberation Mono', Courier, monospace; |
||||
// $code-font-weight: $font-weight-normal; |
||||
// $code-background-color: scale-color($secondary-color, $lightness: 70%); |
||||
// $code-border-size: 1px; |
||||
// $code-border-style: solid; |
||||
// $code-border-color: scale-color($code-background-color, $lightness: -10%); |
||||
// $code-padding: rem-calc(2) rem-calc(5) rem-calc(1); |
||||
|
||||
// We use these to style anchors |
||||
// $anchor-text-decoration: none; |
||||
// $anchor-text-decoration-hover: none; |
||||
// $anchor-font-color: $primary-color; |
||||
// $anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%); |
||||
|
||||
// We use these to style the <hr> element |
||||
// $hr-border-width: 1px; |
||||
// $hr-border-style: solid; |
||||
// $hr-border-color: #ddd; |
||||
// $hr-margin: rem-calc(20); |
||||
|
||||
// We use these to style lists |
||||
// $list-font-family: $paragraph-font-family; |
||||
// $list-font-size: $paragraph-font-size; |
||||
// $list-line-height: $paragraph-line-height; |
||||
// $list-margin-bottom: $paragraph-margin-bottom; |
||||
// $list-style-position: outside; |
||||
// $list-side-margin: 1.1rem; |
||||
// $list-ordered-side-margin: 1.4rem; |
||||
// $list-side-margin-no-bullet: 0; |
||||
// $list-nested-margin: rem-calc(20); |
||||
// $definition-list-header-weight: $font-weight-bold; |
||||
// $definition-list-header-margin-bottom: .3rem; |
||||
// $definition-list-margin-bottom: rem-calc(12); |
||||
|
||||
// We use these to style blockquotes |
||||
// $blockquote-font-color: scale-color($header-font-color, $lightness: 35%); |
||||
// $blockquote-padding: rem-calc(9 20 0 19); |
||||
// $blockquote-border: 1px solid #ddd; |
||||
// $blockquote-cite-font-size: rem-calc(13); |
||||
// $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%); |
||||
// $blockquote-cite-link-color: $blockquote-cite-font-color; |
||||
|
||||
// Acronym styles |
||||
// $acronym-underline: 1px dotted #ddd; |
||||
|
||||
// 5. Grid |
||||
// - - - - - - - - - - - - - - - |
||||
|
||||
// $container-width: rem-calc(900); |
||||
// $block-padding: $global-padding; |
||||
// $total-columns: 12; |
||||
// $block-grid-max-size: 6; |
||||
|
||||
// 6. Button |
||||
// - - - - - - - - - - - - - - - |
||||
|
||||
$button-padding: 0.65em; |
||||
// $button-margin: 0 $global-padding $global-padding 0; |
||||
// $button-style: solid; |
||||
// $button-background: $primary-color; |
||||
// $button-background-hover: scale-color($button-background, $lightness: -15%); |
||||
// $button-color: auto; |
||||
$button-radius: 2px; |
||||
// $button-sizes: ( |
||||
// tiny: 0.7, |
||||
// small: 0.8, |
||||
// medium: 1, |
||||
// large: 1.3, |
||||
// ); |
||||
// $button-font-size: 0.9rem; |
||||
// $button-opacity-disabled: 0.5; |
||||
// $button-tag-selector: false; |
||||
|
||||
// 7. Accordion |
||||
// - - - - - - - - - - - - - - - |
||||
|
||||
// $accordion-border: 1px solid $gray-dark; |
||||
|
||||
// $accordion-title-background: $gray-light; |
||||
// $accordion-title-background-hover: smartscale($accordion-title-background, 5%); |
||||
// $accordion-title-background-active: smartscale($accordion-title-background, 3%); |
||||
// $accordion-title-color: isitlight($accordion-title-background); |
||||
// $accordion-title-color-active: isitlight($accordion-title-background); |
||||
|
||||
// $accordion-title-padding: $global-padding; |
||||
// $accordion-content-padding: $global-padding; |
||||
|
||||
// 8. Action Sheet |
||||
// - - - - - - - - - - - - - - - |
||||
|
||||
// $actionsheet-background: white; |
||||
// $actionsheet-border-color: #ccc; |
||||
// $actionsheet-animate: transform opacity; |
||||
// $actionsheet-animation-speed: 0.25s; |
||||
// $actionsheet-width: 300px; |
||||
// $actionsheet-radius: 4px; |
||||
// $actionsheet-shadow: 0 -3px 10px rgba(black, 0.25); |
||||
// $actionsheet-padding: $global-padding; |
||||
// $actionsheet-tail-size: 10px; |
||||
|
||||
// $actionsheet-popup-shadow: 0 0 10px rgba(black, 0.25); |
||||
|
||||
// $actionsheet-link-color: #000; |
||||
// $actionsheet-link-background-hover: smartscale($actionsheet-background); |
||||
|
||||
// 9. Block List |
||||
// - - - - - - - - - - - - - - - |
||||
|
||||
// $blocklist-background: #fff; |
||||
// $blocklist-fullbleed: true; |
||||
// $blocklist-fontsize: 1rem; |
||||
|
||||
// $blocklist-item-padding: 0.8rem 1rem; |
||||
// $blocklist-item-color: isitlight($blocklist-background, #000, #fff); |
||||
// $blocklist-item-background-hover: smartscale($blocklist-background, 4.5%); |
||||
// $blocklist-item-color-disabled: #999; |
||||
// $blocklist-item-border: 1px solid smartscale($blocklist-background, 18.5%); |
||||
|
||||
// $blocklist-item-label-color: scale-color($blocklist-item-color, $lightness: 60%); |
||||
// $blocklist-item-icon-size: 0.8; |
||||
|
||||
// $blocklist-header-fontsize: 0.8em; |
||||
// $blocklist-header-color: smartscale($blocklist-item-color, 40%); |
||||
// $blocklist-header-uppercase: true; |
||||
|
||||
// $blocklist-check-icons: true; |
||||
|
||||
// 10. Button Group |
||||
// - - - - - - - - - - - - - - - |
||||
|
||||
// $btngroup-background: $primary-color; |
||||
// $btngroup-color: #fff; |
||||
// $btngroup-radius: $button-radius; |
||||
|
||||
// 11. Card |
||||
// - - - - - - - - - - - - - - - |
||||
|
||||
$card-background: #fff; |
||||
$card-color: isitlight($card-background); |
||||
$card-border: 1px solid; |
||||
$card-radius: 0; |
||||
$card-shadow: none; |
||||
$card-padding: 10px; |
||||
$card-margin: 0.5rem; |
||||
|
||||
$card-divider-background: smartscale($card-background, 7%); |
||||
|
||||
// 12. Extras |
||||
// - - - - - - - - - - - - - - - |
||||
|
||||
// $closebutton-position: (top right); |
||||
// $closebutton-size: 2em; |
||||
// $closebutton-lineheight: 0.5; |
||||
// $closebutton-color: #999; |
||||
// $closebutton-color-hover: #333; |
||||
|
||||
// $thumbnail-padding: 0.5rem; |
||||
// $thumbnail-shadow: 0 3px 15px rgba(black, 0.25); |
||||
|
||||
// 13. Forms |
||||
// - - - - - - - - - - - - - - - |
||||
|
||||
// Basic form variables |
||||
// $form-fontsize: 1rem; |
||||
$form-padding: 0.375rem; |
||||
|
||||
// Text fields |
||||
// $input-color: #000; |
||||
// $input-color-hover: $input-color; |
||||
// $input-color-focus: $input-color; |
||||
// $input-background: #fff; |
||||
// $input-background-hover: $input-background; |
||||
// $input-background-focus: $input-background; |
||||
// $input-background-disabled: smartscale($input-background); |
||||
// $input-border: 1px solid #ccc; |
||||
// $input-border-hover: 1px solid #bbb; |
||||
// $input-border-focus: 1px solid #999; |
||||
// $input-cursor-disabled: not-allowed; |
||||
|
||||
// Select menus |
||||
// $select-color: #000; |
||||
// $select-background: #fafafa; |
||||
// $select-background-hover: smartscale($select-background, 4%); |
||||
// $select-arrow: true; |
||||
// $select-arrow-color: $select-color; |
||||
|
||||
// Labels |
||||
// $form-label-fontsize: 0.9rem; |
||||
// $form-label-margin: 0.5rem; |
||||
// $form-label-color: #333; |
||||
|
||||
// Inline labels |
||||
// $inlinelabel-color: #333; |
||||
// $inlinelabel-background: #eee; |
||||
// $inlinelabel-border: $input-border; |
||||
|
||||
// Range slider |
||||
// $slider-background: #ddd; |
||||
// $slider-height: 1rem; |
||||
// $slider-radius: 0px; |
||||
// $slider-thumb-height: 1.5rem; |
||||
// $slider-thumb-color: $primary-color; |
||||
// $slider-thumb-radius: 0px; |
||||
|
||||
// Progress and meter |
||||
// $meter-height: 1.5rem; |
||||
// $meter-background: #ccc; |
||||
// $meter-fill: $primary-color; |
||||
// $meter-fill-high: $success-color; |
||||
// $meter-fill-medium: #e7cf00; |
||||
// $meter-fill-low: $alert-color; |
||||
// $meter-radius: 0; |
||||
|
||||
// 14. Iconic |
||||
// - - - - - - - - - - - - - - - |
||||
|
||||
// $iconic-primary-fill: $primary-color; |
||||
// $iconic-primary-stroke: $primary-color; |
||||
// $iconic-accent-fill: $iconic-primary-fill; |
||||
// $iconic-accent-stroke: $iconic-accent-fill; |
||||
|
||||
// 15. Label |
||||
// - - - - - - - - - - - - - - - |
||||
|
||||
$label-fontsize: 1em; |
||||
$label-padding: 10px; |
||||
$label-radius: 10px; |
||||
$label-background: $gray; |
||||
$label-color: $gray-dark; |
||||
|
||||
// $badge-fontsize: 0.8em; |
||||
// $badge-diameter: 1.5rem; |
||||
// $badge-background: $primary-color; |
||||
// $badge-color: #fff; |
||||
|
||||
// 16. Menu Bar |
||||
// - - - - - - - - - - - - - - - |
||||
|
||||
// $menubar-fontsize: 1rem; |
||||
// $menubar-background: #fff; |
||||
// $menubar-background-hover: smartscale($menubar-background, 7%); |
||||
// $menubar-background-active: $menubar-background-hover; |
||||
// $menubar-color: isitlight($menubar-background); |
||||
// $menubar-color-hover: $menubar-color; |
||||
// $menubar-color-active: $menubar-color-hover; |
||||
|
||||
// $menubar-item-padding: $global-padding; |
||||
// $menubar-icon-size: 25px; |
||||
// $menubar-icon-spacing: $menubar-item-padding; |
||||
|
||||
// 17. Modal |
||||
// - - - - - - - - - - - - - - - |
||||
|
||||
// $modal-background: #fff; |
||||
// $modal-border: 0; |
||||
// $modal-radius: 0px; |
||||
// $modal-shadow: none; |
||||
// $modal-zindex: 1000; |
||||
// $modal-sizes: ( |
||||
// tiny: 300px, |
||||
// small: 500px, |
||||
// medium: 600px, |
||||
// large: 800px, |
||||
// ); |
||||
|
||||
// $modal-overlay-class: 'modal-overlay'; |
||||
// $modal-overlay-background: rgba(#333, 0.7); |
||||
|
||||
// 18. Motion UI |
||||
// - - - - - - - - - - - - - - - |
||||
|
||||
// Classes to use when triggering in/out animations |
||||
// $motion-class: ( |
||||
// in: "ng-enter", |
||||
// out: "ng-leave", |
||||
// ); |
||||
// $motion-class-active: ( |
||||
// in: "ng-enter-active", |
||||
// out: "ng-leave-active", |
||||
// ); |
||||
// $motion-class-stagger: ( |
||||
// in: "ng-enter-stagger", |
||||
// out: "ng-leave-stagger", |
||||
// ); |
||||
// $motion-class-showhide: ( |
||||
// in: "ng-hide-remove", |
||||
// out: "ng-hide-add", |
||||
// ); |
||||
// $motion-class-showhide-active: ( |
||||
// in: "ng-hide-remove-active", |
||||
// out: "ng-hide-add-active", |
||||
// ); |
||||
|
||||
// Set if movement-based transitions should also fade the element in and out |
||||
// $motion-slide-and-fade: false; |
||||
// $motion-hinge-and-fade: true; |
||||
// $motion-scale-and-fade: true; |
||||
// $motion-spin-and-fade: true; |
||||
|
||||
// Default speed for transitions and animations |
||||
// $motion-duration-default: 500ms; |
||||
|
||||
// Slow and fast modifiders |
||||
// $motion-duration-slow: 750ms; |
||||
// $motion-duration-fast: 250ms; |
||||
// $motion-stagger-duration-default: 150ms; |
||||
// $motion-stagger-duration-short: 50ms; |
||||
// $motion-stagger-duration-long: 300ms; |
||||
|
||||
// Default timing function for transitions and animations |
||||
// $motion-timing-default: ease; |
||||
|
||||
// Built-in and custom easing functions |
||||
// Every item in this map becomes a CSS class |
||||
// $motion-timings: ( |
||||
// linear: linear, |
||||
// ease: ease, |
||||
// easeIn: ease-in, |
||||
// easeOut: ease-out, |
||||
// easeInOut: ease-in-out, |
||||
// bounceIn: cubic-bezier(0.485, 0.155, 0.240, 1.245), |
||||
// bounceOut: cubic-bezier(0.485, 0.155, 0.515, 0.845), |
||||
// bounceInOut: cubic-bezier(0.760, -0.245, 0.240, 1.245), |
||||
// ); |
||||
|
||||
// Default delay for all transitions and animations |
||||
// $motion-delay-default: 0; |
||||
// Short and long delay modifiers |
||||
// $motion-delay-short: 300ms; |
||||
// $motion-delay-long: 700ms; |
||||
|
||||
// 19. Notification |
||||
// - - - - - - - - - - - - - - - |
||||
|
||||
// $notification-default-position: right top; |
||||
// $notification-width: rem-calc(400); |
||||
// $notification-offset: $global-padding; |
||||
|
||||
// $notification-background: $primary-color; |
||||
// $notification-color: white; |
||||
// $notification-padding: $global-padding; |
||||
// $notification-radius: 4px; |
||||
|
||||
// $notification-icon-size: 60px; |
||||
// $notification-icon-margin: $global-padding; |
||||
// $notification-icon-align: top; |
||||
|
||||
|
||||
// 20. Off-canvas |
||||
// - - - - - - - - - - - - - - - |
||||
|
||||
// $offcanvas-size-horizontal: 250px; |
||||
// $offcanvas-size-vertical: 250px; |
||||
|
||||
// $offcanvas-background: #fff; |
||||
// $offcanvas-color: isitlight($offcanvas-background); |
||||
// $offcanvas-padding: 0; |
||||
// $offcanvas-shadow: 3px 0 10px rgba(black, 0.25); |
||||
// $offcanvas-animation-speed: 0.25s; |
||||
|
||||
// $offcanvas-frame-selector: '.grid-frame'; |
||||
|
||||
// 21. Panel |
||||
// - - - - - - - - - - - - - - - |
||||
|
||||
// $panel-size-horizontal: 300px; |
||||
// $panel-size-vertical: 300px; |
||||
// $panel-padding: 0; |
||||
|
||||
// $panel-background: #fff; |
||||
// $panel-shadow: 3px 0 10px rgba(black, 0.25); |
||||
|
||||
// DEPRECATED: these variables will be removed in a future version. |
||||
// $panel-animation-speed: 0.25s; |
||||
|
||||
// 22. Popup |
||||
// - - - - - - - - - - - - - - - |
||||
|
||||
// $popup-width: rem-calc(300); |
||||
// $popup-background: #fff; |
||||
// $popup-border: 0; |
||||
// $popup-radius: 0; |
||||
// $popup-shadow: 0 0 10px rgba(#000, 0.25); |
||||
|
||||
// 23. Switch |
||||
// - - - - - - - - - - - - - - - |
||||
|
||||
// $switch-width: rem-calc(50); |
||||
// $switch-height: rem-calc(32); |
||||
// $switch-background: #ccc; |
||||
// $switch-background-active: $primary-color; |
||||
// $switch-border: 0; |
||||
// $switch-radius: 9999px; |
||||
// $switch-animation-speed: 0.15s; |
||||
|
||||
// $switch-paddle-color: white; |
||||
// $switch-paddle-offset: 4px; |
||||
|
||||
// 24. Tabs |
||||
// - - - - - - - - - - - - - - - |
||||
|
||||
// $tabstrip-background: transparent; |
||||
|
||||
// $tab-title-background: $gray-light; |
||||
// $tab-title-background-hover: smartscale($tab-title-background, 5%); |
||||
// $tab-title-background-active: smartscale($tab-title-background, 3%); |
||||
// $tab-title-color: isitlight($tab-title-background); |
||||
// $tab-title-color-active: $tab-title-color; |
||||
|
||||
// $tab-title-padding: $global-padding; |
||||
// $tab-content-padding: $global-padding; |
||||
|
||||
// 25. Title Bar |
||||
// - - - - - - - - - - - - - - - |
||||
|
||||
// $titlebar-center-width: 50%; |
||||
// $titlebar-side-width: (100% - $titlebar-center-width) / 2; |
||||
// $titlebar-background: #eee; |
||||
// $titlebar-color: #000; |
||||
// $titlebar-border: 1px solid #ccc; |
||||
// $titlebar-padding: $global-padding; |
||||
// $titlebar-item-classes: ( |
||||
// center: 'center', |
||||
// left: 'left', |
||||
// right: 'right', |
||||
// title: 'title', |
||||
// ); |
||||
@ -0,0 +1,8 @@ |
||||
# Typography |
||||
|
||||
Typography is divided into content and UI, depending on where the styles are applied. |
||||
|
||||
Content refers to user generated information, such as wiki-syntax based entries, e.g. the description of a work package |
||||
|
||||
UI is everything relating to the application itself. |
||||
|
||||
@ -1 +1,22 @@ |
||||
# Accounts |
||||
|
||||
|
||||
``` |
||||
<div class="login-auth-providers"> |
||||
<h3 class="login-auth-providers-title"><span> |
||||
or sign in with your existing account |
||||
</span></h3> |
||||
|
||||
<div class="login-auth-provider-list"> |
||||
<a href="/auth/developer" class="auth-provider auth-provider-developer"> |
||||
<span class="auth-provider-name">Omniauth Developer</span> |
||||
</a> |
||||
<a href="/auth/developer" class="auth-provider auth-provider-developer"> |
||||
<span class="auth-provider-name">Omniauth Developer</span> |
||||
</a> |
||||
<a href="/auth/developer" class="auth-provider auth-provider-developer"> |
||||
<span class="auth-provider-name">Omniauth Developer</span> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
``` |
||||
|
||||
@ -0,0 +1,343 @@ |
||||
# Advanced filters |
||||
|
||||
``` |
||||
@full-width |
||||
|
||||
<fieldset class="advanced-filters--container"> |
||||
<legend>Selected filters</legend> |
||||
<ul class="advanced-filters--filters"> |
||||
<li class="advanced-filters--filter"> |
||||
<label for="operators-status_id" class="advanced-filters--filter-name">Status</label> |
||||
<div class="advanced-filters--filter-operator"> |
||||
<select class="advanced-filters--select" style="vertical-align: top;"> |
||||
<option value="o" label="open">open</option> |
||||
<option value="=" label="is">is</option> |
||||
<option value="!" label="is not" selected="selected">is not</option> |
||||
<option value="c" label="closed">closed</option> |
||||
<option value="*" label="all">all</option> |
||||
</select> |
||||
</div> |
||||
<div class="advanced-filters--filter-value"> |
||||
<div> |
||||
<span class="inline-label"> |
||||
<select class="form--select -small" style="vertical-align: top;"> |
||||
<option value="1" label="New">New</option> |
||||
<option value="3" label="Resolved" selected="selected">Resolved</option> |
||||
<option value="4" label="Feedback">Feedback</option> |
||||
<option value="5" label="Closed">Closed</option> |
||||
<option value="6" label="Rejected">Rejected</option> |
||||
<option value="2" label="In Progress">In Progress</option> |
||||
</select> |
||||
<a href="" class="form-label no-decoration-on-hover -transparent" ng-click="toggleMultiselect()" tabindex="0"> |
||||
<span class="icon-context icon-button icon-add icon4" title="Enable multiselect" icon-name="add" icon-title="Enable multiselect" css-class="icon4"> |
||||
<span class="hidden-for-sighted ng-binding">Enable multiselect</span> |
||||
</span> |
||||
</a> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<div class="advanced-filters--remove-filter"> |
||||
<span> |
||||
<a href="" class=""> |
||||
<span class="icon-context icon-button icon-close advanced-filters--remove-filter-icon" title="Delete" icon-name="close" icon-title="Delete" css-class="advanced-filters--remove-filter-icon"> |
||||
<span class="hidden-for-sighted ng-binding">Delete</span> |
||||
</span> |
||||
</a> |
||||
</span> |
||||
</div> |
||||
</li> |
||||
<li class="advanced-filters--filter"> |
||||
<label for="operators-assigned_to_id" class="advanced-filters--filter-name">Assignee</label> |
||||
<div class="advanced-filters--filter-operator"> |
||||
<select class="advanced-filters--select" style="vertical-align: top;" > |
||||
<option value="=" label="is" selected="selected">is</option> |
||||
<option value="!" label="is not"> is not</option> |
||||
<option value="!*" label="none">none</option> |
||||
<option value="*" label="all">all</option> |
||||
</select> |
||||
</div> |
||||
<div class="advanced-filters--filter-value"> |
||||
<div> |
||||
<span class="inline-label"><select id="values-assigned_to_id" class="form--select -small" style="vertical-align: top;"> |
||||
<option value="me" label="<< me >>"> |
||||
<< me >> |
||||
</option> |
||||
<option value="13" label="Chadrick Schmidt"> |
||||
Chadrick Schmidt |
||||
</option> |
||||
<option value="25" label="Deron Feil"> |
||||
Deron Feil |
||||
</option> |
||||
<option value="4" label="Irma Rice"> |
||||
Irma Rice |
||||
</option> |
||||
<option value="20" label="Loraine Runolfsdottir"> |
||||
Loraine Runolfsdottir |
||||
</option> |
||||
<option value="23" label="Toney Hyatt"> |
||||
Toney Hyatt |
||||
</option> |
||||
<option value="15" label="Zena Labadie"> |
||||
Zena Labadie |
||||
</option> |
||||
<option value="35" label="est consequatur qui est eos t"> |
||||
est consequatur qui est eos t |
||||
</option> |
||||
<option value="36" label="GROPWITHREALLYRELLAYLONGNAMEA"> |
||||
GROPWITHREALLYRELLAYLONGNAMEA |
||||
</option> |
||||
</select> |
||||
<a href="" class="form-label no-decoration-on-hover -transparent" ng-click="toggleMultiselect()" tabindex="0"> |
||||
<span class="icon-context icon-button icon-add icon4" title="Enable multiselect" icon-name="add" icon-title="Enable multiselect" css-class="icon4"> |
||||
<span class="hidden-for-sighted ng-binding">Enable multiselect</span> |
||||
</span> |
||||
</a> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<div class="advanced-filters--remove-filter"> |
||||
<span> |
||||
<a href="" class=""> |
||||
<span class="icon-context icon-button icon-close advanced-filters--remove-filter-icon" title="Delete" icon-name="close" icon-title="Delete" css-class="advanced-filters--remove-filter-icon"> |
||||
<span class="hidden-for-sighted ng-binding">Delete</span> |
||||
</span> |
||||
</a> |
||||
</span> |
||||
</div> |
||||
</li> |
||||
<li id="filter_due_date" class="advanced-filters--filter"> |
||||
<label for="operators-due_date" class="advanced-filters--filter-name">Due date</label> |
||||
<div class="advanced-filters--filter-operator"> |
||||
<select class="advanced-filters--select " id="operators-due_date" style="vertical-align: top;"> |
||||
<option value="<t+" label="in less than" selected="selected">in less than</option> |
||||
<option value=">t+" label="in more than">in more than</option> |
||||
<option value="t+" label="in">in</option> |
||||
<option value="t" label="today">today</option> |
||||
<option value="w" label="this week">this week</option> |
||||
<option value=">t-" label="less than days ago">less than days ago</option> |
||||
<option value="<t-" label="more than days ago">more than days ago</option> |
||||
<option value="t-" label="days ago">days ago</option> |
||||
</select> |
||||
</div> |
||||
<div class="advanced-filters--filter-value"> |
||||
<div id="div-values-due_date"> |
||||
<span class="inline-label"><input class="advanced-filters--text-field" id="values-due_date" size="3" type="text" required><label for="values_" class="form-label -transparent">days</label></span> |
||||
</div> |
||||
</div> |
||||
<div class="advanced-filters--remove-filter"> |
||||
<span> |
||||
<a href="" class=""> |
||||
<span class="icon-context icon-button icon-close advanced-filters--remove-filter-icon" title="Delete" icon-name="close" icon-title="Delete" css-class="advanced-filters--remove-filter-icon"> |
||||
<span class="hidden-for-sighted ng-binding">Delete</span> |
||||
</span> |
||||
</a> |
||||
</span> |
||||
</div> |
||||
</li> |
||||
<li id="filter_start_date" class="advanced-filters--filter"> |
||||
<label for="operators-start_date" class="advanced-filters--filter-name">Start date</label> |
||||
<div class="advanced-filters--filter-operator"> |
||||
<select class="advanced-filters--select " id="operators-start_date" style="vertical-align: top;"> |
||||
<option value="<t+" label="in less than" selected="selected">in less than</option> |
||||
<option value=">t+" label="in more than">in more than</option> |
||||
<option value="t+" label="in">in</option> |
||||
<option value="t" label="today">today</option> |
||||
<option value="w" label="this week">this week</option> |
||||
<option value=">t-" label="less than days ago">less than days ago</option> |
||||
<option value="<t-" label="more than days ago">more than days ago</option> |
||||
<option value="t-" label="days ago">days ago</option> |
||||
</select> |
||||
</div> |
||||
<div class="advanced-filters--filter-value"> |
||||
<div id="div-values-start_date"> |
||||
<span class="inline-label" ><input class="advanced-filters--text-field" id="values-start_date" size="3" type="text" required> <label for="values_" class="form-label -transparent">days</label></span> |
||||
</div> |
||||
</div> |
||||
<div class="advanced-filters--remove-filter"> |
||||
<span> |
||||
<a href="" class=""> |
||||
<span class="icon-context icon-button icon-close advanced-filters--remove-filter-icon" title="Delete" icon-name="close" icon-title="Delete" css-class="advanced-filters--remove-filter-icon"> |
||||
<span class="hidden-for-sighted ng-binding">Delete</span> |
||||
</span> |
||||
</a> |
||||
</span> |
||||
</div> |
||||
</li> |
||||
<li id="filter_priority_id" class="advanced-filters--filter ng-hide"> |
||||
<label for="operators-priority_id" class="advanced-filters--filter-name">Priority</label> |
||||
<div class="advanced-filters--filter-operator"> |
||||
<select class="advanced-filters--select " id="operators-priority_id" style="vertical-align: top;"> |
||||
<option value="=" label="is" selected="selected">is</option> |
||||
<option value="!" label="is not">is not</option> |
||||
</select> |
||||
</div> |
||||
<div class="advanced-filters--filter-value"> |
||||
<div> |
||||
<span class="inline-label"><select id="values-priority_id" class="form--select -small" multiple="true" style="vertical-align: top;"> |
||||
<option value="1" label="Low"> |
||||
Low |
||||
</option> |
||||
<option value="2" label="Normal"> |
||||
Normal |
||||
</option> |
||||
<option value="3" label="High"> |
||||
High |
||||
</option> |
||||
<option value="4" label="Urgent"> |
||||
Urgent |
||||
</option> |
||||
<option value="5" label="Immediate"> |
||||
Immediate |
||||
</option> |
||||
</select> |
||||
<a href="" class="form-label no-decoration-on-hover -transparent" tabindex="0"> |
||||
<span class="icon-context icon-button icon-minus2 icon4" title="Disable multiselect" icon-name="minus2" icon-title="Disable multiselect" ng-if="isMultiselect" css-class="icon4"> |
||||
<span class="hidden-for-sighted ng-binding">Disable multiselect</span> |
||||
</span> |
||||
</a> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<div class="advanced-filters--remove-filter"> |
||||
<span> |
||||
<a href="" class=""> |
||||
<span class="icon-context icon-button icon-close advanced-filters--remove-filter-icon" title="Delete" icon-name="close" icon-title="Delete" css-class="advanced-filters--remove-filter-icon"> |
||||
<span class="hidden-for-sighted ng-binding">Delete</span> |
||||
</span> |
||||
</a> |
||||
</span> |
||||
</div> |
||||
</li> |
||||
<li id="filter_cf_8" class="advanced-filters--filter ng-hide"> |
||||
<label for="operators-cf_8" class="advanced-filters--filter-name">Custom User</label> |
||||
<div class="advanced-filters--filter-operator"> |
||||
<select class="advanced-filters--select" id="operators-cf_8" style="vertical-align: top;"> |
||||
<option value="=" label="is" selected="selected">is</option> |
||||
<option value="!" label="is not">is not</option> |
||||
<option value="!*" label="none">none</option> |
||||
<option value="*" label="all">all</option> |
||||
</select> |
||||
</div> |
||||
<div class="advanced-filters--filter-value"> |
||||
<div> |
||||
<span class="inline-label"><select id="values-cf_8" class="form--select -small" style="vertical-align: top;"> |
||||
<option value="13" label="Chadrick Schmidt"> |
||||
Chadrick Schmidt |
||||
</option> |
||||
<option value="25" label="Deron Feil"> |
||||
Deron Feil |
||||
</option> |
||||
<option value="4" label="Irma Rice"> |
||||
Irma Rice |
||||
</option> |
||||
<option value="20" label="Loraine Runolfsdottir"> |
||||
Loraine Runolfsdottir |
||||
</option> |
||||
<option value="23" label="Toney Hyatt"> |
||||
Toney Hyatt |
||||
</option> |
||||
<option value="15" label="Zena Labadie"> |
||||
Zena Labadie |
||||
</option> |
||||
</select> |
||||
<a href="" class="form-label no-decoration-on-hover -transparent" ng-click="toggleMultiselect()" tabindex="0"> |
||||
<span class="icon-context icon-button icon-add icon4" title="Enable multiselect" icon-name="add" icon-title="Enable multiselect" css-class="icon4"> |
||||
<span class="hidden-for-sighted ng-binding">Enable multiselect</span> |
||||
</span> |
||||
</a> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<div class="advanced-filters--remove-filter"> |
||||
<span> |
||||
<a href="" class=""> |
||||
<span class="icon-context icon-button icon-close advanced-filters--remove-filter-icon" title="Delete" icon-name="close" icon-title="Delete" css-class="advanced-filters--remove-filter-icon"> |
||||
<span class="hidden-for-sighted ng-binding">Delete</span> |
||||
</span> |
||||
</a> |
||||
</span> |
||||
</div> |
||||
</li> |
||||
<li id="filter_done_ratio" class="advanced-filters--filter ng-hide"> |
||||
<label for="operators-done_ratio" class="advanced-filters--filter-name">% done</label> |
||||
<div class="advanced-filters--filter-operator"> |
||||
<select class="advanced-filters--select " id="operators-done_ratio" style="vertical-align: top;" > |
||||
<option value="=" label="is" selected="selected">is</option> |
||||
<option value=">=" label=">=">>=</option> |
||||
<option value="<=" label="<="><=</option> |
||||
<option value="!*" label="none">none</option> |
||||
<option value="*" label="all">all</option> |
||||
</select> |
||||
</div> |
||||
<div class="advanced-filters--filter-value"> |
||||
<div id="div-values-done_ratio"> |
||||
<input class="advanced-filters--text-field -min" id="values-done_ratio" min="0" type="number" value="" required> |
||||
<label for="values_" class="hidden-for-sighted">Enter text</label> |
||||
</div> |
||||
</div> |
||||
<div class="advanced-filters--remove-filter"> |
||||
<span> |
||||
<a href="" class=""> |
||||
<span class="icon-context icon-button icon-close advanced-filters--remove-filter-icon" title="Delete" icon-name="close" icon-title="Delete" css-class="advanced-filters--remove-filter-icon"> |
||||
<span class="hidden-for-sighted ng-binding">Delete</span> |
||||
</span> |
||||
</a> |
||||
</span> |
||||
</div> |
||||
</li> |
||||
<li class="advanced-filters--spacer"></li> |
||||
<li class="advanced-filters--add-filter"> |
||||
<label for="add_filter_select" class="advanced-filters--add-filter-label">Add filter:</label> |
||||
<div class="advanced-filters--add-filter-value"> |
||||
<select class="advanced-filters--select" id="add_filter_select"> |
||||
<option value="0" label="% done"> |
||||
% done |
||||
</option> |
||||
<option value="1" label="Assignee's group"> |
||||
Assignee's group |
||||
</option> |
||||
<option value="2" label="Assignee's role"> |
||||
Assignee's role |
||||
</option> |
||||
<option value="3" label="Author"> |
||||
Author |
||||
</option> |
||||
<option value="4" label="Created on"> |
||||
Created on |
||||
</option> |
||||
<option value="5" label="Estimated time"> |
||||
Estimated time |
||||
</option> |
||||
<option value="6" label="Priority"> |
||||
Priority |
||||
</option> |
||||
<option value="7" label="Responsible"> |
||||
Responsible |
||||
</option> |
||||
<option value="8" label="Subject"> |
||||
Subject |
||||
</option> |
||||
<option value="9" label="Subproject"> |
||||
Subproject |
||||
</option> |
||||
<option value="10" label="Custom User"> |
||||
Custom User |
||||
</option> |
||||
<option value="11" label="Type"> |
||||
Type |
||||
</option> |
||||
<option value="12" label="Updated on"> |
||||
Updated on |
||||
</option> |
||||
<option value="13" label="Version"> |
||||
Version |
||||
</option> |
||||
<option value="14" label="Watcher"> |
||||
Watcher |
||||
</option> |
||||
</select> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
</fieldset> |
||||
``` |
||||
@ -0,0 +1,129 @@ |
||||
//-- copyright |
||||
// OpenProject is a project management system. |
||||
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF) |
||||
// |
||||
// This program is free software; you can redistribute it and/or |
||||
// modify it under the terms of the GNU General Public License version 3. |
||||
// |
||||
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows: |
||||
// Copyright (C) 2006-2013 Jean-Philippe Lang |
||||
// Copyright (C) 2010-2013 the ChiliProject Team |
||||
// |
||||
// This program is free software; you can redistribute it and/or |
||||
// modify it under the terms of the GNU General Public License |
||||
// as published by the Free Software Foundation; either version 2 |
||||
// of the License, or (at your option) any later version. |
||||
// |
||||
// This program is distributed in the hope that it will be useful, |
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
// GNU General Public License for more details. |
||||
// |
||||
// You should have received a copy of the GNU General Public License |
||||
// along with this program; if not, write to the Free Software |
||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. |
||||
// |
||||
// See doc/COPYRIGHT.rdoc for more details. |
||||
//++ |
||||
|
||||
.advanced-filters--container |
||||
@extend %filters--container |
||||
padding: rem-calc(10px) |
||||
max-height: 50vh |
||||
overflow-y: auto |
||||
|
||||
@mixin advanced-filters--sizing() |
||||
@include grid-block() |
||||
|
||||
@include breakpoint(medium) |
||||
@include grid-size(12) |
||||
|
||||
@include breakpoint(large) |
||||
@include grid-size(10) |
||||
|
||||
@include breakpoint(xlarge) |
||||
@include grid-size(8) |
||||
|
||||
@include breakpoint(xxlarge) |
||||
@include grid-size(6) |
||||
|
||||
@include breakpoint(xxxlarge) |
||||
@include grid-size(5) |
||||
|
||||
.advanced-filters--filters |
||||
list-style-type: none |
||||
margin: 0 |
||||
|
||||
.advanced-filters--filter |
||||
@include advanced-filters--sizing |
||||
align-items: center |
||||
padding: 0.5rem 0 |
||||
|
||||
.advanced-filters--text-field |
||||
@extend .form--text-field, .form--text-field.-small |
||||
&:required |
||||
box-shadow: none |
||||
|
||||
.advanced-filters--select |
||||
@extend .form--select, .form--select.-small, .form--select.-narrow |
||||
margin-bottom: 0 |
||||
|
||||
.advanced-filters--number-field |
||||
@extend .form--text-field, .form--text-field.-small |
||||
|
||||
%advanced-filters--filter-part |
||||
.inline-label |
||||
margin-bottom: 0 |
||||
// adding the input rules to be more specific than the resets of |
||||
// foundation. |
||||
input, select |
||||
margin-bottom: 0 |
||||
|
||||
.advanced-filters--filter-name |
||||
@include grid-content(3) |
||||
@extend %advanced-filters--filter-part |
||||
overflow-y: hidden |
||||
white-space: nowrap |
||||
text-overflow: ellipsis |
||||
|
||||
.advanced-filters--filter-operator |
||||
@include grid-content(3) |
||||
@extend %advanced-filters--filter-part |
||||
|
||||
.advanced-filters--filter-value |
||||
@include grid-content(5) |
||||
@extend %advanced-filters--filter-part |
||||
|
||||
.advanced-filters--remove-filter |
||||
@include grid-content($size: shrink) |
||||
@include grid-visible-overflow |
||||
padding: 0 |
||||
|
||||
.advanced-filters--remove-filter-icon |
||||
@extend .icon-close, .icon4 |
||||
@include grid-content(1) |
||||
@include grid-visible-overflow |
||||
|
||||
.advanced-filters--add-filter |
||||
@include advanced-filters--sizing |
||||
@extend %advanced-filters--filter-part |
||||
align-items: center |
||||
padding: 0.25rem 0 |
||||
|
||||
.advanced-filters--add-filter-label |
||||
@include grid-content(shrink) |
||||
|
||||
.advanced-filters--add-filter-label-icon |
||||
@extend .icon-add, .icon4 |
||||
|
||||
.advanced-filters--add-filter-value |
||||
@include grid-content(3) |
||||
|
||||
.advanced-filters--spacer |
||||
border-top: 1px solid $filters--border-color |
||||
height: 1px |
||||
margin: 0.75rem 1rem |
||||
|
||||
|
||||
fieldset#date-range p |
||||
margin: 2px 0 2px 0 |
||||
@ -0,0 +1,108 @@ |
||||
# Attributes Groups |
||||
|
||||
## with Attribute Lists |
||||
|
||||
``` |
||||
<div class="attributes-group"> |
||||
<div class="attributes-group--header"> |
||||
<div class="attributes-group--header-container"> |
||||
<h3 class="attributes-group--header-text">Details</h3> |
||||
</div> |
||||
<div class="attributes-group--header-toggle"> |
||||
<a href="#" class="button -small -transparent">Show all</a> |
||||
</div> |
||||
</div> |
||||
|
||||
<dl class="attributes-key-value"> |
||||
<dt class="attributes-key-value--key">Status</dt> |
||||
<dd class="attributes-key-value--value-container"> |
||||
<div class="attributes-key-value--value -text"> |
||||
<span title="New">New</span> |
||||
</div> |
||||
</dd> |
||||
<dt class="attributes-key-value--key">Percentage done</dt> |
||||
<dd class="attributes-key-value--value-container"> |
||||
<div class="attributes-key-value--value -text"> |
||||
<span title="0">0</span> |
||||
</div> |
||||
</dd> |
||||
<dt class="attributes-key-value--key">Date</dt> |
||||
<dd class="attributes-key-value--value-container"> |
||||
<div class="attributes-key-value--value -text"> |
||||
<span title="">-</span> |
||||
</div> |
||||
</dd> |
||||
<dt class="attributes-key-value--key">Priority</dt> |
||||
<dd class="attributes-key-value--value-container"> |
||||
<div class="attributes-key-value--value -text"> |
||||
<span title="Normal">Normal</span> |
||||
</div> |
||||
</dd> |
||||
</dl> |
||||
</div> |
||||
|
||||
<div class="attributes-group"> |
||||
<div class="attributes-group--header"> |
||||
<div class="attributes-group--header-container"> |
||||
<h3 class="attributes-group--header-text">People</h3> |
||||
</div> |
||||
</div> |
||||
|
||||
<dl class="attributes-key-value"> |
||||
<dt class="attributes-key-value--key">Assignee</dt> |
||||
<dd class="attributes-key-value--value-container"> |
||||
<div class="attributes-key-value--value -user"> |
||||
<span class="user-avatar--container"> |
||||
<img class="user-avatar--avatar" alt="Avatar" title="testing.long.emails@openproject.org" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&secure=false"> |
||||
<span class="user-avatar--user-with-role"> |
||||
<span class="user-avatar--user"> |
||||
<a class="user-avatar--user-link" href="#">testing.long.emails@openproject.org</a> |
||||
</span> |
||||
</span> |
||||
</span> |
||||
</div> |
||||
</dd> |
||||
<dt class="attributes-key-value--key">Responsible</dt> |
||||
<dd class="attributes-key-value--value-container"> |
||||
<div class="attributes-key-value--value -user"> |
||||
<span class="user-avatar--container"> |
||||
<img class="user-avatar--avatar" alt="Avatar" title="testing.long.emails+filter-junk-away@openproject.org" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&secure=false"> |
||||
<span class="user-avatar--user-with-role"> |
||||
<span class="user-avatar--user"> |
||||
<a class="user-avatar--link" href="#">Karl-Theodor zu Guttenberg (copy)</a> |
||||
</span> |
||||
<span class="user-avatar--role"> |
||||
Distinguished Statesman. |
||||
Former Minister for Economics and Technology. |
||||
</span> |
||||
</span> |
||||
</span> |
||||
</div> |
||||
</dd> |
||||
</dl> |
||||
</div> |
||||
``` |
||||
|
||||
## with Single Attribute |
||||
|
||||
``` |
||||
<div class="attributes-group"> |
||||
<div class="attributes-group--header"> |
||||
<div class="attributes-group--header-container"> |
||||
<h3 class="attributes-group--header-text">Description</h3> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="single-attribute wiki-text"> |
||||
<h2>Capítulo uno</h2> |
||||
<p>En un lugar <em>de la Mancha</em>, de cuyo nombre no quiero acordarme, |
||||
no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, |
||||
adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que |
||||
carnero, salpicón las más noches, duelos y quebrantos los sábados, lantejas |
||||
los viernes, algún palomino de añadidura los domingos, consumían las tres |
||||
partes de su hacienda. El resto della concluían sayo de velarte, calzas de |
||||
velludo para las fiestas, con sus pantuflos de lo mesmo, y los días de |
||||
entresemana se honraba con su vellorí de lo <strong>más fino</strong>.</p> |
||||
</div> |
||||
</div> |
||||
``` |
||||
@ -0,0 +1,50 @@ |
||||
# Attribute Lists (keys and values) |
||||
|
||||
``` |
||||
<dl class="attributes-key-value"> |
||||
<dt class="attributes-key-value--key">Custom Float</dt> |
||||
<dd class="attributes-key-value--value-container"> |
||||
<div class="attributes-key-value--value -float"> |
||||
<span title="12.00">12.00</span> |
||||
</div> |
||||
</dd> |
||||
<dt class="attributes-key-value--key">Custom Integer</dt> |
||||
<dd class="attributes-key-value--value-container"> |
||||
<div class="attributes-key-value--value -int"> |
||||
<span title="69">69</span> |
||||
</div> |
||||
</dd> |
||||
<dt class="attributes-key-value--key">Custom Description</dt> |
||||
<dd class="attributes-key-value--value-container"> |
||||
<div class="attributes-key-value--value -text"> |
||||
<span title="Praesent id est eu velit molestie tincidunt. Quisque non dolor diam. Mauris vitae nunc felis. Integer vehicula molestie vehicula. Aliquam in magna eu lorem interdum tincidunt. Fusce egestas, enim vel luctus vulputate, augue tellus aliquam sem, tincidunt lacinia ante mauris at nisi. Vestibulum a magna et magna viverra efficitur. Vestibulum rhoncus ac ligula eget tristique. Vestibulum enim urna, varius eu turpis eget, pretium placerat neque. Vivamus et facilisis eros. Sed gravida lectus ac velit rutrum euismod. Etiam at ex condimentum, vestibulum elit non, aliquam ex."> |
||||
Praesent id est eu velit molestie tincidunt. Quisque non dolor diam. Mauris vitae nunc felis. Integer vehicula molestie vehicula. Aliquam in magna eu lorem interdum tincidunt. Fusce egestas, enim vel luctus vulputate, augue tellus aliquam sem, tincidunt lacinia ante mauris at nisi. Vestibulum a magna et magna viverra efficitur. Vestibulum rhoncus ac ligula eget tristique. Vestibulum enim urna, varius eu turpis eget, pretium placerat neque. Vivamus et facilisis eros. Sed gravida lectus ac velit rutrum euismod. Etiam at ex condimentum, vestibulum elit non, aliquam ex. |
||||
</span> |
||||
</div> |
||||
</dd> |
||||
<dt class="attributes-key-value--key">Custom Description with Long Label</dt> |
||||
<dd class="attributes-key-value--value-container"> |
||||
<div class="attributes-key-value--value -text"> |
||||
<span title="Praesent id est eu velit molestie tincidunt. Quisque non dolor diam. Mauris vitae nunc felis. Integer vehicula molestie vehicula."> |
||||
Praesent id est eu velit molestie tincidunt. Quisque non dolor diam. Mauris vitae nunc felis. Integer vehicula molestie vehicula. |
||||
</span> |
||||
</div> |
||||
</dd> |
||||
<dt class="attributes-key-value--key">Custom User</dt> |
||||
<dd class="attributes-key-value--value-container"> |
||||
<div class="attributes-key-value--value -user"> |
||||
<span class="user-avatar--container"> |
||||
<img class="user-avatar--avatar" alt="Avatar" title="Max Mustermann" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&secure=false"> |
||||
<span class="user-avatar--user-with-role"> |
||||
<span class="user-avatar--user"> |
||||
<a class="user-avatar--user-link" href="#">Max Mustermann</a> |
||||
</span> |
||||
<span class="user-avatar--role"> |
||||
Fully Generic Person |
||||
</span> |
||||
</span> |
||||
</span> |
||||
</div> |
||||
</dd> |
||||
</dl> |
||||
``` |
||||
@ -0,0 +1,35 @@ |
||||
# Attributes Tables |
||||
|
||||
``` |
||||
<table class="attributes-table"> |
||||
<thead> |
||||
<tr> |
||||
<td>Subject</td> |
||||
<td>Status</td> |
||||
<td>Assignee</td> |
||||
<td></td> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr> |
||||
<td><a href="#">Lorem ipsum</a></td> |
||||
<td>Resolved</td> |
||||
<td><a href="#">John Doe</a></td> |
||||
<td><i title="Delete relation" class="delete-item icon-delete"></i></td> |
||||
</tr> |
||||
<tr> |
||||
<td><a href="#">Lorem ipsum evvrevrevrevrebrebreberberbrebbreevrvrevrebre</a></td> |
||||
<td>Resolved</td> |
||||
<td><a href="#">John Doe</a></td> |
||||
<td><i title="Delete relation" class="delete-item icon-delete"></i></td> |
||||
</tr> |
||||
<tr> |
||||
<td><a href="#">Lorem ipsum</a></td> |
||||
<td>Resolved</td> |
||||
<td><a href="#">John Doe</a></td> |
||||
<td><i title="Delete relation" class="delete-item icon-delete"></i></td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
|
||||
``` |
||||
@ -0,0 +1,57 @@ |
||||
//-- copyright |
||||
// OpenProject is a project management system. |
||||
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF) |
||||
// |
||||
// This program is free software; you can redistribute it and/or |
||||
// modify it under the terms of the GNU General Public License version 3. |
||||
// |
||||
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows: |
||||
// Copyright (C) 2006-2013 Jean-Philippe Lang |
||||
// Copyright (C) 2010-2013 the ChiliProject Team |
||||
// |
||||
// This program is free software; you can redistribute it and/or |
||||
// modify it under the terms of the GNU General Public License |
||||
// as published by the Free Software Foundation; either version 2 |
||||
// of the License, or (at your option) any later version. |
||||
// |
||||
// This program is distributed in the hope that it will be useful, |
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
// GNU General Public License for more details. |
||||
// |
||||
// You should have received a copy of the GNU General Public License |
||||
// along with this program; if not, write to the Free Software |
||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. |
||||
// |
||||
// See doc/COPYRIGHT.rdoc for more details. |
||||
//++ |
||||
|
||||
.attributes-table |
||||
width: 100% |
||||
table-layout: fixed |
||||
border-collapse: collapse |
||||
margin: 0 |
||||
font-size: 0.9rem |
||||
line-height: 1.5 |
||||
|
||||
td, th |
||||
padding: 0.25rem 0.5rem 0.25rem 0 |
||||
text-align: left |
||||
|
||||
thead |
||||
font-weight: bold |
||||
text-transform: uppercase |
||||
|
||||
tbody |
||||
td |
||||
white-space: nowrap |
||||
overflow: hidden |
||||
text-overflow: ellipsis |
||||
|
||||
&.-hidden |
||||
display: none |
||||
|
||||
.delete-item |
||||
cursor: pointer |
||||
float: right |
||||
height: 1em |
||||
@ -0,0 +1,13 @@ |
||||
# Badges |
||||
|
||||
``` |
||||
<span class="badge">0</span> |
||||
<span class="badge">1</span> |
||||
<span class="badge">2</span> |
||||
``` |
||||
|
||||
``` |
||||
<span class="badge -secondary">0</span> |
||||
<span class="badge -secondary">1</span> |
||||
<span class="badge -secondary">2</span> |
||||
``` |
||||
@ -1,21 +1,137 @@ |
||||
# Buttons |
||||
|
||||
## Default buttons |
||||
|
||||
``` |
||||
<a href="#" class="button">Click me</a> |
||||
<a href="#" class="button_highlight">Click me</a> |
||||
<button class="***button***"><i class="button--icon icon-watch-1"></i><span class="button--text">Watch</span></button> |
||||
<button class="***button***"><i class="button--icon icon-watch-1"></i></button> |
||||
<button class="***button***">Watch</button> |
||||
<button class="***button***" disabled> |
||||
<i class="button--icon icon-watch-1"></i><span class="button--text">Watch</span> |
||||
</button> |
||||
<br> |
||||
|
||||
<a href="#" class="***button*** -with-icon icon-watch-1">Watch</a> |
||||
<a href="#" class="***button***">Click to watch</a> |
||||
|
||||
<input type="submit" class="***button***" value="Submit to watch"/> |
||||
<input type="submit" class="***button***" value="Do not watch" disabled /> |
||||
``` |
||||
|
||||
## Highlight buttons |
||||
|
||||
``` |
||||
<input type="submit" class="button" value="Submit me"/> |
||||
<input type="submit" class="button" value="Do not submit" disabled /> |
||||
<button class="button ***-highlight***"><i class="button--icon icon-yes"></i><span class="button--text">Apply</span></button> |
||||
<button class="button ***-highlight***"><i class="button--icon icon-yes"></i></button> |
||||
<button class="button ***-highlight***">Apply</button> |
||||
<button class="button ***-highlight***" disabled> |
||||
<i class="button--icon icon-yes"></i><span class="button--text">Apply</span> |
||||
</button> |
||||
<br> |
||||
|
||||
<a href="#" class="button ***-highlight*** -with-icon icon-yes">Apply</a> |
||||
<a href="#" class="button ***-highlight***">Click to apply</a> |
||||
|
||||
<input type="submit" class="button ***-highlight***" value="Submit to apply"/> |
||||
<input type="submit" class="button ***-highlight***" value="Do not apply" disabled /> |
||||
``` |
||||
|
||||
|
||||
## Alternative highlight buttons |
||||
|
||||
``` |
||||
<input type="submit" class="button_highlight" value="Submit me"/> |
||||
<input type="submit" class="button_highlight" value="Do not submit" disabled /> |
||||
<button class="button ***-alt-highlight***"><i class="button--icon icon-add"></i><span class="button--text">Create</span></button> |
||||
<button class="button ***-alt-highlight***"><i class="button--icon icon-add"></i></button> |
||||
<button class="button ***-alt-highlight***">Create</button> |
||||
<button class="button ***-alt-highlight***" disabled> |
||||
<i class="button--icon icon-add"></i><span class="button--text">Create</span> |
||||
</button> |
||||
<br> |
||||
|
||||
<a href="#" class="button ***-alt-highlight*** -with-icon icon-add">Create</a> |
||||
<a href="#" class="button ***-alt-highlight***">Click to create</a> |
||||
|
||||
<input type="submit" class="button ***-alt-highlight***" value="Submit to create"/> |
||||
<input type="submit" class="button ***-alt-highlight***" value="Do not create" disabled /> |
||||
``` |
||||
|
||||
|
||||
## Active (depressed) buttons |
||||
|
||||
``` |
||||
<button class="button ***-active***"><i class="button--icon icon-fire"></i><span class="button--text">Connect</span></button> |
||||
<button class="button ***-active***"><i class="button--icon icon-fire"></i></button> |
||||
<button class="button ***-active***">Connect</button> |
||||
<button class="button ***-active***" disabled> |
||||
<i class="button--icon icon-fire"></i><span class="button--text">Connect</span> |
||||
</button> |
||||
<br> |
||||
|
||||
<a href="#" class="button ***-active*** -with-icon icon-fire">Connect</a> |
||||
<a href="#" class="button ***-active***">Click to connect</a> |
||||
|
||||
<input type="submit" class="button ***-active***" value="Submit to connect"/> |
||||
<input type="submit" class="button ***-active***" value="Do not connect" disabled /> |
||||
``` |
||||
|
||||
## Transparent buttons |
||||
|
||||
``` |
||||
<button class="button ***-transparent***"><i class="button--icon icon-bubble3"></i><span class="button--text">Comment</span></button> |
||||
<button class="button ***-transparent***"><i class="button--icon icon-bubble3"></i></button> |
||||
<button class="button ***-transparent***">Comment</button> |
||||
<button class="button ***-transparent***" disabled> |
||||
<i class="button--icon icon-bubble3"></i><span class="button--text">Comment</span> |
||||
</button> |
||||
<br> |
||||
|
||||
<a href="#" class="button ***-transparent*** -with-icon icon-bubble3">Comment</a> |
||||
<a href="#" class="button ***-transparent***">Click to comment</a> |
||||
|
||||
<input type="submit" class="button ***-transparent***" value="Submit to comment"/> |
||||
<input type="submit" class="button ***-transparent***" value="Do not comment" disabled /> |
||||
``` |
||||
|
||||
## Button sizes |
||||
|
||||
``` |
||||
<button class="button ***-tiny***"><i class="button--icon icon-star1"></i></button> |
||||
<button class="button ***-tiny***"><i class="button--icon icon-star1"></i><span class="button--text">Tiny</span></button> |
||||
<button class="button ***-tiny***">Tiny</button> |
||||
<button class="button ***-tiny*** -with-icon icon-star1">Tiny</button> |
||||
``` |
||||
|
||||
``` |
||||
<button class="button ***-small***"><i class="button--icon icon-star1"></i></button> |
||||
<button class="button ***-small***"><i class="button--icon icon-star1"></i><span class="button--text">Small</span></button> |
||||
<button class="button ***-small***">Small</button> |
||||
<button class="button ***-small*** -with-icon icon-star1">Small</button> |
||||
``` |
||||
|
||||
``` |
||||
<button class="***button***"><i class="button--icon icon-star1"></i></button> |
||||
<button class="***button***"><i class="button--icon icon-star1"></i><span class="button--text">Default</span></button> |
||||
<button class="***button***">Default</button> |
||||
<button class="***button*** -with-icon icon-star1">Default</button> |
||||
``` |
||||
|
||||
``` |
||||
<button class="button ***-large***"><i class="button--icon icon-star1"></i></button> |
||||
<button class="button ***-large***"><i class="button--icon icon-star1"></i><span class="button--text">Large</span></button> |
||||
<button class="button ***-large***">Large</button> |
||||
<button class="button ***-large*** -with-icon icon-star1">Large</button> |
||||
``` |
||||
|
||||
## Expanded buttons |
||||
|
||||
``` |
||||
<button class="button ***-expand***">Expanded button</button> |
||||
<a href="#" class="button ***-expand***">Expanded button as link</a> |
||||
``` |
||||
|
||||
## Rounded buttons |
||||
|
||||
``` |
||||
<input type="submit" class="button_active" value="Submit me"/> |
||||
<input type="submit" class="button_active" value="Do not submit" disabled /> |
||||
<button class="button ***-round***">Rounded button</button> |
||||
<a href="#" class="button ***-round***">Rounded button as link</a> |
||||
``` |
||||
|
||||
@ -0,0 +1,48 @@ |
||||
# Choice |
||||
|
||||
For selection from a list without having to use a form. This can be reused for selects which have no association to any type of form. |
||||
|
||||
``` |
||||
<div class="choice"> |
||||
<div class="choice--select"> |
||||
<select class="select2"> |
||||
<option value="">one</option> |
||||
<option value="">two</option> |
||||
<option value="">three</option> |
||||
</select> |
||||
</div> |
||||
<div class="choice--button"> |
||||
<button class="button"> |
||||
<i class="icon-edit"></i> Edit |
||||
</button> |
||||
</div> |
||||
</div> |
||||
<div class="clearfix"></div> |
||||
``` |
||||
|
||||
## Choice with inline label and input |
||||
|
||||
A more complex example for a choice combined with further inputs. |
||||
|
||||
``` |
||||
<div class="choice"> |
||||
<div class="choice--select"> |
||||
<span class="inline-label"> |
||||
<select class="select2"> |
||||
<option value="">one</option> |
||||
<option value="">two</option> |
||||
<option value="">three</option> |
||||
<option value="">over nine thousand!!!</option> |
||||
</select> |
||||
<span class="form-label">multiplied by</span> |
||||
<input class="form--text-field" size="10" type="text"> |
||||
</span> |
||||
</div> |
||||
<div class="choice--button"> |
||||
<button class="button"> |
||||
<i class="icon-edit"></i> Edit |
||||
</button> |
||||
</div> |
||||
</div> |
||||
<div class="clearfix"></div> |
||||
``` |
||||
@ -0,0 +1,54 @@ |
||||
//-- copyright |
||||
// OpenProject is a project management system. |
||||
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF) |
||||
// |
||||
// This program is free software; you can redistribute it and/or |
||||
// modify it under the terms of the GNU General Public License version 3. |
||||
// |
||||
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows: |
||||
// Copyright (C) 2006-2013 Jean-Philippe Lang |
||||
// Copyright (C) 2010-2013 the ChiliProject Team |
||||
// |
||||
// This program is free software; you can redistribute it and/or |
||||
// modify it under the terms of the GNU General Public License |
||||
// as published by the Free Software Foundation; either version 2 |
||||
// of the License, or (at your option) any later version. |
||||
// |
||||
// This program is distributed in the hope that it will be useful, |
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
// GNU General Public License for more details. |
||||
// |
||||
// You should have received a copy of the GNU General Public License |
||||
// along with this program; if not, write to the Free Software |
||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. |
||||
// |
||||
// See doc/COPYRIGHT.rdoc for more details. |
||||
//++ |
||||
|
||||
//a hack for IE, the width will be just fine for this element |
||||
$choice-parent-relation-select-width: 375px |
||||
|
||||
//resolve the problem if inside are elements with float |
||||
.detail-panel-description-content |
||||
.relation |
||||
clear: both |
||||
|
||||
.choice |
||||
overflow: visible |
||||
.choice--select, .choice--button |
||||
@extend .form--field |
||||
float: left |
||||
display: block |
||||
.choice--select |
||||
overflow: visible |
||||
margin-top: 3px |
||||
margin-right: 1rem |
||||
width: $choice-parent-relation-select-width |
||||
.select2 |
||||
width: inherit |
||||
.select2-drop |
||||
width: inherit |
||||
.choice--button |
||||
.button |
||||
margin: 2px |
||||
@ -0,0 +1,18 @@ |
||||
## Datepicker |
||||
|
||||
``` |
||||
<input type="text" id="datepicker-input"> |
||||
|
||||
<div id="datepicker-inline"></div> |
||||
|
||||
``` |
||||
|
||||
``` |
||||
@javascript |
||||
|
||||
jQuery(function($) { |
||||
$("#datepicker-inline").datepicker(); |
||||
$("#datepicker-input").datepicker(); |
||||
}); |
||||
|
||||
``` |
||||
@ -0,0 +1,172 @@ |
||||
//-- copyright |
||||
// OpenProject is a project management system. |
||||
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF) |
||||
// |
||||
// This program is free software; you can redistribute it and/or |
||||
// modify it under the terms of the GNU General Public License version 3. |
||||
// |
||||
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows: |
||||
// Copyright (C) 2006-2013 Jean-Philippe Lang |
||||
// Copyright (C) 2010-2013 the ChiliProject Team |
||||
// |
||||
// This program is free software; you can redistribute it and/or |
||||
// modify it under the terms of the GNU General Public License |
||||
// as published by the Free Software Foundation; either version 2 |
||||
// of the License, or (at your option) any later version. |
||||
// |
||||
// This program is distributed in the hope that it will be useful, |
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
// GNU General Public License for more details. |
||||
// |
||||
// You should have received a copy of the GNU General Public License |
||||
// along with this program; if not, write to the Free Software |
||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. |
||||
// |
||||
// See doc/COPYRIGHT.rdoc for more details. |
||||
//++ |
||||
|
||||
//$dp- var prefix for date picker |
||||
|
||||
$dp-theme-color: #CCCCCC |
||||
$dp-theme-lines-color1: #FFFFFF |
||||
$dp-theme-lines-color2: #F8F8F8 |
||||
$dp-theme-border-color: #DDDDDD |
||||
|
||||
$dp-header-elements-height: 30px |
||||
$dp-header-top: 5px |
||||
$dp-header-padding: .2em 0 |
||||
|
||||
$dp-hover-normalisation: 2px |
||||
$dp-round-corners-radius: 0 |
||||
$dp-cell-corner-radius: 3px |
||||
$dp-day-margin: 2px |
||||
$dp-day-margin-hover: 1px |
||||
$dp-days-text-color: #535353 |
||||
|
||||
$dp-week-padding-top: 7px |
||||
$dp-week-padding-bottom: 7px |
||||
$dp-week-text-color: #CCCCCC |
||||
|
||||
$dp-border: 1px solid $dp-theme-border-color |
||||
|
||||
$dp-font-size-rewrite: .9em |
||||
|
||||
$dp-number-of-columns: 8 |
||||
$dp-table-width: 100% |
||||
|
||||
$dp-month-year-width: 40% |
||||
$dp-month-year-margin: 0 4.5% |
||||
|
||||
$dp-shadow-box: 1px 1px 5px 0 |
||||
$dp-shadow-box-opacity: 1 |
||||
|
||||
@mixin set-table-cells-width($table-width, $columns-number) |
||||
width: $table-width/$columns-number |
||||
table-layout: fixed |
||||
|
||||
.ui-datepicker |
||||
border: $dp-border |
||||
padding: 0 |
||||
background-color: $dp-theme-lines-color2 |
||||
box-shadow: $dp-shadow-box rgba($dp-theme-color, $dp-shadow-box-opacity) |
||||
&.ui-datepicker-inline |
||||
box-shadow: none |
||||
&.ui-corner-all |
||||
border-radius: $dp-round-corners-radius |
||||
|
||||
//[class^="ui-corner"] this selector is not working... |
||||
//a list is used |
||||
$corner-types: tl tr lf br top bottom right left all |
||||
@each $corner-type in $corner-types |
||||
.ui-corner-#{$corner-type} |
||||
border-radius: $dp-round-corners-radius |
||||
|
||||
.ui-datepicker-header |
||||
padding: $dp-header-padding |
||||
border: none |
||||
background-color: $dp-theme-lines-color1 |
||||
|
||||
.ui-icon.ui-icon-circle-triangle-w |
||||
background-position: -96px -16px |
||||
@include user-select(none) |
||||
|
||||
.ui-icon.ui-icon-circle-triangle-e |
||||
background-position: -32px -16px |
||||
@include user-select(none) |
||||
|
||||
.ui-state-hover |
||||
border-width: 0 !important |
||||
background-color: transparent |
||||
cursor: pointer !important |
||||
|
||||
.ui-datepicker-prev-hover |
||||
left: $dp-hover-normalisation |
||||
|
||||
.ui-datepicker-next-hover |
||||
right: $dp-hover-normalisation |
||||
|
||||
.ui-datepicker-prev, |
||||
.ui-datepicker-next |
||||
top: $dp-header-top |
||||
|
||||
.ui-datepicker-title |
||||
.ui-datepicker-month, |
||||
.ui-datepicker-year |
||||
width: $dp-month-year-width |
||||
select |
||||
@extend .form--select |
||||
height: $dp-header-elements-height |
||||
font-size: $dp-font-size-rewrite |
||||
font-weight: normal |
||||
padding-top: 0 |
||||
padding-bottom: 0 |
||||
margin: $dp-month-year-margin |
||||
border: $dp-border |
||||
|
||||
.ui-datepicker-calendar |
||||
margin-bottom: 0 |
||||
border-spacing: 0 |
||||
border-collapse: collapse |
||||
background-color: $dp-theme-lines-color1 |
||||
|
||||
th |
||||
background-color: $dp-theme-lines-color2 |
||||
font-weight: normal |
||||
border-top: $dp-border |
||||
border-bottom: $dp-border |
||||
padding-top: $dp-week-padding-top |
||||
padding-bottom: $dp-week-padding-bottom |
||||
@include set-table-cells-width($dp-table-width, $dp-number-of-columns) |
||||
|
||||
td |
||||
padding: 0 |
||||
color: $dp-days-text-color |
||||
@include set-table-cells-width($dp-table-width, $dp-number-of-columns) |
||||
|
||||
a |
||||
border: none |
||||
text-align: center |
||||
background-color: #FFFFFF |
||||
margin: $dp-day-margin |
||||
&.ui-state-highlight, |
||||
&.ui-state-active, |
||||
&:hover |
||||
margin: $dp-day-margin-hover |
||||
border: $dp-border |
||||
border-radius: $dp-cell-corner-radius |
||||
|
||||
.ui-datepicker-week-col |
||||
color: $dp-week-text-color |
||||
text-align: center |
||||
|
||||
.ui-datepicker-buttonpane |
||||
border-top: $dp-border |
||||
margin-top: 0 |
||||
|
||||
button |
||||
font-weight: normal |
||||
font-size: $dp-font-size-rewrite |
||||
border: none |
||||
background-color: transparent |
||||
|
||||
@ -1,18 +0,0 @@ |
||||
# [Form elements] - Input, Textarea |
||||
|
||||
``` |
||||
<div id="work-packages-index"> |
||||
|
||||
<input class="wide"></input> |
||||
<br /><br /> |
||||
<input class="small"></input> |
||||
<br /><br / > |
||||
<textarea rows="4"></textarea> |
||||
<br /><br /> |
||||
<input placeholder="with placeholder text"></input> |
||||
<br /><br /> |
||||
<textarea rows="4" placeholder="with placeholder text"></textarea> |
||||
|
||||
</div> |
||||
|
||||
``` |
||||
File diff suppressed because it is too large
Load Diff
@ -1,13 +1,19 @@ |
||||
# Headings |
||||
|
||||
Headings throughout the application, apart from user generated content (See wiki styles) |
||||
|
||||
``` |
||||
<h1>Headline H1</h1> |
||||
<span class="sample-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<br /><br /></span> |
||||
|
||||
<h2>Headline H2</h2> |
||||
<span class="sample-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<br /><br /></span> |
||||
|
||||
<h3>Headline H3</h3> |
||||
<span class="sample-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<br /><br /></span> |
||||
|
||||
<h4>Headline H4</h4> |
||||
<span class="sample-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<br /><br /></span> |
||||
|
||||
<h5>Headline H5</h5> |
||||
|
||||
<h6>Headline H6</h6> |
||||
``` |
||||
|
||||
|
||||
|
||||
@ -0,0 +1,55 @@ |
||||
# Icon Controls |
||||
|
||||
``` |
||||
<div style="padding: 0.25rem"> |
||||
<span class="icon-control"> |
||||
<span class="icon-control--icon icon-star1" title="Star"> |
||||
<span class="hidden-for-sighted">Star</span> |
||||
</span> |
||||
</span> |
||||
Nur e kian landonomo, ol ind duona anstataŭa. |
||||
</div> |
||||
<div style="padding: 0.25rem"> |
||||
<span class="icon-control -active"> |
||||
<span class="icon-control--icon icon-star1" title="Unstar"> |
||||
<span class="hidden-for-sighted">Unstar</span> |
||||
</span> |
||||
</span> |
||||
Far ki aliam samideano noniliono. |
||||
</div> |
||||
|
||||
<div style="padding: 0.25rem; background-color: #eee"> |
||||
<span class="icon-control"> |
||||
<span class="icon-control--icon icon-watch-1" title="Watch"> |
||||
<span class="hidden-for-sighted">Watch</span> |
||||
</span> |
||||
</span> |
||||
Περπετυα περσεκυερις υθ ηας |
||||
</div> |
||||
<div style="padding: 0.25rem; background-color: #eee"> |
||||
<span class="icon-control -active"> |
||||
<span class="icon-control--icon icon-watch-1" title="Unwatch"> |
||||
<span class="hidden-for-sighted">Unwatch</span> |
||||
</span> |
||||
</span> |
||||
Ηας παρτεμ λεγενδως δεφινιθιονεμ νο, συμ ευ λαυδεμ εσεντ εκυιδεμ |
||||
</div> |
||||
|
||||
<div style="padding: 0.25rem"> |
||||
<span class="icon-control"> |
||||
<span class="icon-control--icon icon-heart" title="Love"> |
||||
<span class="hidden-for-sighted">Love</span> |
||||
</span> |
||||
</span> |
||||
Зыд ут выльёт ножтро нужквюам. |
||||
</div> |
||||
<div style="padding: 0.25rem"> |
||||
<span class="icon-control -active"> |
||||
<span class="icon-control--icon icon-heart" title="Fall out of love"> |
||||
<span class="hidden-for-sighted">Fall out of love</span> |
||||
</span> |
||||
</span> |
||||
Хаж ут нихйл тамквюам. |
||||
</div> |
||||
|
||||
``` |
||||
@ -0,0 +1,52 @@ |
||||
//-- copyright |
||||
// OpenProject is a project management system. |
||||
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF) |
||||
// |
||||
// This program is free software; you can redistribute it and/or |
||||
// modify it under the terms of the GNU General Public License version 3. |
||||
// |
||||
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows: |
||||
// Copyright (C) 2006-2013 Jean-Philippe Lang |
||||
// Copyright (C) 2010-2013 the ChiliProject Team |
||||
// |
||||
// This program is free software; you can redistribute it and/or |
||||
// modify it under the terms of the GNU General Public License |
||||
// as published by the Free Software Foundation; either version 2 |
||||
// of the License, or (at your option) any later version. |
||||
// |
||||
// This program is distributed in the hope that it will be useful, |
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
// GNU General Public License for more details. |
||||
// |
||||
// You should have received a copy of the GNU General Public License |
||||
// along with this program; if not, write to the Free Software |
||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. |
||||
// |
||||
// See doc/COPYRIGHT.rdoc for more details. |
||||
//++ |
||||
|
||||
.icon-control |
||||
display: inline-block |
||||
height: rem-calc(19px) |
||||
width: rem-calc(19px) |
||||
margin-left: -1px |
||||
padding: 1px |
||||
vertical-align: middle |
||||
text-align: center |
||||
cursor: pointer |
||||
border-radius: 50% |
||||
color: $gray-dark |
||||
|
||||
&:hover, &.-active |
||||
text-decoration: none |
||||
color: white |
||||
background: $button--highlight-background-color |
||||
|
||||
&.-active:hover |
||||
color: $gray-dark |
||||
background: white |
||||
|
||||
.icon-control--icon |
||||
@include icon-common |
||||
font-size: rem-calc(17px) |
||||
@ -0,0 +1,310 @@ |
||||
# In place editing |
||||
|
||||
## In place editing: Multiple lines of text |
||||
|
||||
### Read mode |
||||
|
||||
``` |
||||
<div class="attributes-group"> |
||||
|
||||
<div class="attributes-group--header"> |
||||
<div class="attributes-group--header-container"> |
||||
<h3 class="attributes-group--header-text"> |
||||
Description |
||||
</h3> |
||||
</div> |
||||
</div> |
||||
<div class="inplace-edit type-wiki_textarea attribute-description"> |
||||
<accessible-by-keyboard execute="startEditing()" |
||||
class="inplace-editing--trigger-container"> |
||||
<a href="" |
||||
tabindex="0" |
||||
class="inplace-editing--trigger-link"> |
||||
<span class="inplace-editing--container"> |
||||
<span class="inplace-edit--read-value"> |
||||
<span class="inplace-edit--read" > |
||||
<span> |
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt |
||||
</span> |
||||
</span> |
||||
</span> |
||||
<span class="inplace-edit--icon-wrapper"> |
||||
<span class="icon-context icon-button icon-edit " |
||||
title="Description: Edit" |
||||
icon-name="edit" |
||||
icon-title="Description: Edit"> |
||||
<span class="hidden-for-sighted"> |
||||
Description: Edit |
||||
</span> |
||||
</span> |
||||
</span> |
||||
</span> |
||||
</a> |
||||
</accessible-by-keyboard> |
||||
</div> |
||||
</div> |
||||
|
||||
``` |
||||
|
||||
### Edit mode |
||||
|
||||
``` |
||||
|
||||
<div class="attributes-group "> |
||||
|
||||
<div class="attributes-group--header"> |
||||
<div class="attributes-group--header-container"> |
||||
<h3 class="attributes-group--header-text "> |
||||
Description |
||||
</h3> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="single-attribute wiki"> |
||||
<span inplace-editor="" placeholder="Click to enter description..." autocomplete-path="/work_packages/auto_complete.json?project_id=undefined" > |
||||
<div class="inplace-edit type-wiki_textarea attribute-description" aria-busy="false" > |
||||
|
||||
<div class="inplace-edit--write " > |
||||
<form class="inplace-edit--form " name="editForm" novalidate=""> |
||||
<div class="inplace-edit--write-value"> |
||||
<div class="jstElements"> |
||||
<button type="button" class="jstb_strong" title="Strong"> |
||||
<span>Strong</span> |
||||
</button> |
||||
<button type="button" class="jstb_em" title="Italic"> |
||||
<span>Italic</span> |
||||
</button> |
||||
<button type="button" class="jstb_ins" title="Underline"> |
||||
<span>Underline</span> |
||||
</button> |
||||
<button type="button" class="jstb_del" title="Deleted"> |
||||
<span>Deleted</span></button><button type="button" class="jstb_code" title="Inline Code"> |
||||
<span>Inline Code</span></button><span id="space1" class="jstSpacer"> </span> |
||||
<button type="button" class="jstb_h1" title="Heading 1"> |
||||
<span>Heading 1</span> |
||||
</button> |
||||
<button type="button" class="jstb_h2" title="Heading 2"> |
||||
<span>Heading 2</span> |
||||
</button> |
||||
<button type="button" class="jstb_h3" title="Heading 3"> |
||||
<span>Heading 3</span> |
||||
</button> |
||||
<span id="space2" class="jstSpacer"> </span> |
||||
<button type="button" class="jstb_ul" title="Unordered List"> |
||||
<span>Unordered List</span> |
||||
</button> |
||||
<button type="button" class="jstb_ol" title="Ordered List"> |
||||
<span>Ordered List</span> |
||||
</button> |
||||
<span id="space3" class="jstSpacer"> </span> |
||||
<button type="button" class="jstb_bq" title="Quote"> |
||||
<span>Quote</span></button> |
||||
<button type="button" class="jstb_unbq" title="Unquote"> |
||||
<span>Unquote</span> |
||||
</button> |
||||
<button type="button" class="jstb_pre" title="Preformatted Text"> |
||||
<span>Preformatted Text</span></button><span id="space4" class="jstSpacer"> </span> |
||||
<button type="button" class="jstb_link" title="Link to a Wiki page"> |
||||
<span>Link to a Wiki page</span> |
||||
</button> |
||||
<button type="button" class="jstb_img" title="Image"> |
||||
<span>Image</span> |
||||
</button> |
||||
<div class="jstb_help"> |
||||
<a href="/help/wiki_syntax" title="Text formatting" class="icon icon-help" onclick="window.open("/help/wiki_syntax", "", "resizable=yes, location=no, width=600, height=640, menubar=no, status=no, scrollbars=yes"); return false;"> |
||||
<span class="hidden-for-sighted"> |
||||
Text formatting |
||||
</span> |
||||
</a> |
||||
</div> |
||||
<button class="jstb_preview icon-issue-watched" type="button" title="Preview"> |
||||
</button> |
||||
</div> |
||||
|
||||
<div class="jstEditor"> |
||||
<textarea wiki-toolbar="" class="focus-input inplace-edit--textarea " preview-toggle="togglePreview()" name="value" title="Description: Edit" data-wp_autocomplete_url="/work_packages/auto_complete.json?project_id=undefined" aria-multiline="true" tabindex="0" aria-hidden="false" aria-disabled="false" aria-invalid="false" rows="5"> |
||||
</textarea> |
||||
</div> |
||||
|
||||
<div class="jstHandle"></div> |
||||
</div> |
||||
<div class="inplace-edit--dashboard"> |
||||
<div class="inplace-edit--errors " role="alert" aria-live="polite" aria-hidden="true"> |
||||
</div> |
||||
<div class="inplace-edit--controls" aria-hidden="false"> |
||||
<div class="inplace-edit--control inplace-edit--control--save"> |
||||
<accessible-by-keyboard execute="editForm.$valid && submit(false)" > |
||||
<a execute-on-enter="execute()" default-event-handling="defaultEventHandling" href="" tabindex="0"> |
||||
<span > |
||||
<span class="icon-context icon-button icon-yes " title="Description: Save" icon-name="yes" icon-title="Description: Save"> |
||||
<span class="hidden-for-sighted ">Description: Save</span> |
||||
</span> |
||||
</span> |
||||
</a></accessible-by-keyboard> |
||||
</div> |
||||
<div class="inplace-edit--control -icons-2 inplace-edit--control--send"> |
||||
<accessible-by-keyboard execute="editForm.$valid && submit(true)" > |
||||
<a execute-on-enter="execute()" default-event-handling="defaultEventHandling" href="" tabindex="0"> |
||||
<span > |
||||
<span title="Description: Save and send email" > |
||||
<i class="icon-yes"></i> |
||||
<i class="icon-mail"></i> |
||||
</span> |
||||
</span> |
||||
</a> |
||||
</accessible-by-keyboard> |
||||
</div> |
||||
<div class="inplace-edit--control inplace-edit--control--cancel"> |
||||
<accessible-by-keyboard execute="discardEditing()" > |
||||
<a execute-on-enter="execute()" default-event-handling="defaultEventHandling" href="" tabindex="0"> |
||||
<span > |
||||
<span class="icon-context icon-button icon-close2 " title="Description: Cancel" icon-name="close2" icon-title="Description: Cancel"> |
||||
<span class="hidden-for-sighted ">Description: Cancel</span> |
||||
</span> |
||||
</span> |
||||
</a> |
||||
</accessible-by-keyboard> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
|
||||
</span> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
<div style="height: 100px;"> |
||||
</div> |
||||
|
||||
``` |
||||
|
||||
## In place editing: Single line of text |
||||
|
||||
### Read mode |
||||
|
||||
``` |
||||
<div class="attributes-group"> |
||||
<div class="attributes-group--header"> |
||||
<div class="attributes-group--header-container"> |
||||
<h3 class="attributes-group--header-text"> |
||||
Details |
||||
</h3> |
||||
</div> |
||||
</div> |
||||
<dl class="attributes-key-value"> |
||||
<dt class="attributes-key-value--key"> |
||||
Status |
||||
</dt> |
||||
<dd class="attributes-key-value--value-container"> |
||||
<div class="attributes-key-value--value -status"> |
||||
<div class="inplace-edit type-select2 attribute-status.name"> |
||||
<accessible-by-keyboard execute="startEditing()" |
||||
class="inplace-editing--trigger-container"> |
||||
<a href="" |
||||
tabindex="0" |
||||
class="inplace-editing--trigger-link"> |
||||
<span class="inplace-editing--container"> |
||||
<span class="inplace-edit--read-value"> |
||||
<span class="inplace-edit--read" > |
||||
<span > |
||||
New |
||||
</span> |
||||
</span> |
||||
</span> |
||||
<span class="inplace-edit--icon-wrapper"> |
||||
<span class="icon-context icon-button icon-edit " title="Status: Edit" icon-name="edit" icon-title="Status: Edit"> |
||||
<span class="hidden-for-sighted"> |
||||
Status: Edit |
||||
</span> |
||||
</span> |
||||
</span> |
||||
</span> |
||||
</a> |
||||
</accessible-by-keyboard> |
||||
</div> |
||||
</div> |
||||
</dd> |
||||
</dl> |
||||
</div> |
||||
``` |
||||
|
||||
### Edit mode |
||||
|
||||
``` |
||||
<div class="attributes-group"> |
||||
|
||||
<div class="attributes-group--header"> |
||||
<div class="attributes-group--header-container"> |
||||
<h3 class="attributes-group--header-text "> |
||||
Details |
||||
</h3> |
||||
</div> |
||||
</div> |
||||
|
||||
<dl class="attributes-key-value"> |
||||
<dt class="attributes-key-value--key ">Status</dt> |
||||
<dd class="attributes-key-value--value-container" > |
||||
<div class="attributes-key-value--value -status"> |
||||
<div inplace-edit=""> |
||||
<div class="inplace-edit type-select2 attribute-status.name" aria-busy="false" aria-disabled="false"> |
||||
<div class="inplace-edit--write" > |
||||
<form name="editForm" class="inplace-edit--form"> |
||||
<div class="inplace-edit--write-value"> |
||||
<input type="text" class="focus-input inplace-edit--text-field" aria-label="Status: Edit focus" aria-haspopup="true" role="button" aria-disabled="false" value="New"> |
||||
</div> |
||||
<div class="inplace-edit--dashboard"> |
||||
<div class="inplace-edit--errors " role="alert" aria-live="polite" aria-hidden="true"> |
||||
</div> |
||||
<div class="inplace-edit--controls" aria-hidden="false"> |
||||
<div class="inplace-edit--control inplace-edit--control--save"> |
||||
<accessible-by-keyboard execute="editForm.$valid && submit(false)" > |
||||
<a execute-on-enter="execute()" default-event-handling="defaultEventHandling" href="" tabindex="0"> |
||||
<span > |
||||
<span class="icon-context icon-button icon-yes " title="Description: Save" icon-name="yes" icon-title="Description: Save"> |
||||
<span class="hidden-for-sighted ">Description: Save</span> |
||||
</span> |
||||
</span> |
||||
</a></accessible-by-keyboard> |
||||
</div> |
||||
<div class="inplace-edit--control -icons-2 inplace-edit--control--send"> |
||||
<accessible-by-keyboard execute="editForm.$valid && submit(true)" > |
||||
<a execute-on-enter="execute()" default-event-handling="defaultEventHandling" href="" tabindex="0"> |
||||
<span > |
||||
<span title="Description: Save and send email" > |
||||
<i class="icon-yes"></i> |
||||
<i class="icon-mail"></i> |
||||
</span> |
||||
</span> |
||||
</a> |
||||
</accessible-by-keyboard> |
||||
</div> |
||||
<div class="inplace-edit--control inplace-edit--control--cancel"> |
||||
<accessible-by-keyboard execute="discardEditing()" > |
||||
<a execute-on-enter="execute()" default-event-handling="defaultEventHandling" href="" tabindex="0"> |
||||
<span > |
||||
<span class="icon-context icon-button icon-close2 " title="Description: Cancel" icon-name="close2" icon-title="Description: Cancel"> |
||||
<span class="hidden-for-sighted ">Description: Cancel</span> |
||||
</span> |
||||
</span> |
||||
</a> |
||||
</accessible-by-keyboard> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</dd> |
||||
</dl> |
||||
</div> |
||||
|
||||
<div style="height: 50px;"> |
||||
</div> |
||||
``` |
||||
@ -1,167 +1,267 @@ |
||||
.inplace-editor |
||||
display: inline |
||||
.ined-input-wrapper-inner |
||||
display: inline |
||||
&.busy |
||||
//-- copyright |
||||
// OpenProject is a project management system. |
||||
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF) |
||||
// |
||||
// This program is free software; you can redistribute it and/or |
||||
// modify it under the terms of the GNU General Public License version 3. |
||||
// |
||||
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows: |
||||
// Copyright (C) 2006-2013 Jean-Philippe Lang |
||||
// Copyright (C) 2010-2013 the ChiliProject Team |
||||
// |
||||
// This program is free software; you can redistribute it and/or |
||||
// modify it under the terms of the GNU General Public License |
||||
// as published by the Free Software Foundation; either version 2 |
||||
// of the License, or (at your option) any later version. |
||||
// |
||||
// This program is distributed in the hope that it will be useful, |
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
// GNU General Public License for more details. |
||||
// |
||||
// You should have received a copy of the GNU General Public License |
||||
// along with this program; if not, write to the Free Software |
||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. |
||||
// |
||||
// See doc/COPYRIGHT.rdoc for more details. |
||||
//++ |
||||
|
||||
$inplace-edit--border-color: #ddd |
||||
$inplace-edit--dark-background: #f8f8f8 |
||||
$inplace-edit--color--very-dark: #cacaca |
||||
$inplace-edit--color-highlight: #0a97dd |
||||
$inplace-edit--selected-date-border-color: #008bd0 |
||||
$inplace-edit--color-highlight: #0a97dd |
||||
|
||||
|
||||
%inline-date-picker-container-position-absolute |
||||
display: none |
||||
z-index: 99999 |
||||
position: absolute |
||||
|
||||
.inplace-edit |
||||
@extend .form--field.-full-width |
||||
|
||||
.-preview |
||||
button |
||||
visibility: hidden |
||||
.jstb_preview |
||||
visibility: visible |
||||
|
||||
&.-busy |
||||
opacity: 0.5 |
||||
.jstElements button |
||||
opacity: 0.5 |
||||
* |
||||
cursor: wait!important |
||||
&.preview |
||||
button, .help |
||||
visibility: hidden |
||||
.btn-preview |
||||
visibility: visible |
||||
&.type-wiki_textarea .ined-controls |
||||
bottom: -34px |
||||
.hidden-but-focusable |
||||
position: absolute |
||||
left: -10000px |
||||
top: auto |
||||
width: 1px |
||||
height: 1px |
||||
overflow: hidden |
||||
.visible-on-focus |
||||
left: 0 |
||||
position: inherit |
||||
width: auto |
||||
height: auto |
||||
float: inherit |
||||
.editing-link-wrapper |
||||
position: absolute |
||||
margin-left: 4px |
||||
a |
||||
@extend .hidden-but-focusable |
||||
&:focus |
||||
@extend .visible-on-focus |
||||
|
||||
.ined-input-wrapper |
||||
display: inline |
||||
input, textarea |
||||
width: 370px |
||||
textarea |
||||
min-height: 200px |
||||
.ined-read-value |
||||
display: inline |
||||
&.default |
||||
span |
||||
font-style: italic |
||||
&.editable:hover |
||||
outline: 1px solid #cacaca |
||||
cursor: pointer |
||||
.editing-link-wrapper a |
||||
@extend .visible-on-focus |
||||
form |
||||
inplace-edit--write |
||||
|
||||
.inplace-edit--date |
||||
margin: 0 |
||||
position: relative |
||||
display: inline |
||||
.ng-invalid |
||||
background: lightpink!important |
||||
.ined-errors |
||||
position: absolute |
||||
font-size: 13px |
||||
line-height: 1.2em |
||||
width: 251px |
||||
padding: 5px |
||||
left: 0px |
||||
bottom: -49px |
||||
background: white |
||||
border: 1px solid #cacaca |
||||
height: 42px |
||||
.ined-controls |
||||
position: absolute |
||||
bottom: -35px |
||||
right: 0px |
||||
width: 120px |
||||
font-size: 13px |
||||
background: white |
||||
border: 1px solid #cacaca |
||||
text-align: center |
||||
a |
||||
width: 36px |
||||
display: inline-block |
||||
text-align: center |
||||
text-decoration: none |
||||
&:hover |
||||
background: #f0f0f0 |
||||
&.type-wiki_textarea |
||||
.ined-input-wrapper-inner |
||||
display: block!important |
||||
form |
||||
display: block |
||||
.ined-read-value |
||||
display: block |
||||
.read-value-wrapper |
||||
display: inline-block |
||||
width: 400px |
||||
.editing-link-wrapper |
||||
position: relative |
||||
display: inline-block |
||||
float: right |
||||
.ined-controls |
||||
bottom: -6px |
||||
.ined-errors |
||||
bottom: -26px |
||||
width: 307px |
||||
.jstElements |
||||
display: inline |
||||
bottom: -31px |
||||
width: 307px |
||||
button |
||||
display: none |
||||
&.btn-preview |
||||
float: right |
||||
font-size: 12px |
||||
height: 32px |
||||
width: auto |
||||
display: inline |
||||
margin-right: 0 |
||||
.help |
||||
display: inline |
||||
float: none |
||||
position: relative |
||||
top: -4px |
||||
left: -12px |
||||
a |
||||
padding-left: 0px |
||||
.jstb_strong, .jstb_em, .jstb_ins, .jstb_del, .jstb_ul, .jstb_ol |
||||
display: inline |
||||
&.type-select |
||||
.ined-controls |
||||
right: auto |
||||
left: 0px |
||||
bottom: -23px |
||||
.ined-errors |
||||
bottom: -44px |
||||
left: 119px |
||||
&.type-select2 |
||||
display: inline-block |
||||
width: 344px |
||||
.select2-display-none |
||||
display: none |
||||
.ui-select-choices |
||||
max-height: 100px |
||||
input[type='text'] |
||||
width: 100% |
||||
.ined-errors |
||||
bottom: -41px |
||||
left: 119px |
||||
width: 225px |
||||
.ined-controls |
||||
bottom: -27px |
||||
& > * |
||||
margin-bottom: 0 |
||||
& > .inplace-edit--date-picker |
||||
@extend %inline-date-picker-container-position-absolute |
||||
left: 0 |
||||
.ined-edit |
||||
height: 175px |
||||
.ined-read-value |
||||
position: relative |
||||
display: block |
||||
margin: 3px |
||||
&.editable:hover |
||||
outline: 1px solid #cacaca |
||||
.editing-link-wrapper |
||||
position: absolute |
||||
right: -13px |
||||
top: 1px |
||||
width: 30px |
||||
.icon-context:before |
||||
padding: 0 1px 1px 0 |
||||
.inplace-edit--date-range |
||||
display: table |
||||
position: relative |
||||
& > * |
||||
display: table-cell |
||||
margin-bottom: 0 |
||||
& > .delimeter |
||||
padding-right: 5px |
||||
padding-left: 5px |
||||
& > .inplace-edit--date-range-start-date-picker |
||||
@extend %inline-date-picker-container-position-absolute |
||||
left: 0 |
||||
& > .inplace-edit--date-range-end-date-picker |
||||
@extend %inline-date-picker-container-position-absolute |
||||
right: 0 |
||||
.ui-datepicker .ui-datepicker-calendar td a.ui-state-active |
||||
border-color: $inplace-edit--selected-date-border-color |
||||
|
||||
#ui-datepicker-div |
||||
z-index: 9999 !important |
||||
|
||||
.inplace-edit--form |
||||
display: block |
||||
position: relative |
||||
|
||||
//todo: Move to something more specific |
||||
.jstHandle, .jstSpacer |
||||
display: none |
||||
.jstElements |
||||
button |
||||
display: none |
||||
.jstb_strong, |
||||
.jstb_em, |
||||
.jstb_ins, |
||||
.jstb_del, |
||||
.jstb_ul, |
||||
.jstb_ol, |
||||
.jstb_preview, |
||||
.jstb_help |
||||
display: flex |
||||
|
||||
.inplace-edit--select |
||||
.select2-display-none |
||||
display: none |
||||
|
||||
.inplace-edit--textarea |
||||
min-height: 200px |
||||
width: 100% |
||||
margin-bottom: -1px |
||||
|
||||
.inplace-edit--text-field |
||||
margin-bottom: 0!important |
||||
padding: 0.375rem |
||||
font-size: inherit |
||||
line-height: inherit |
||||
|
||||
.inplace-edit--dashboard |
||||
position: relative |
||||
width: 100% |
||||
z-index: 100 |
||||
font-size: 0.875rem |
||||
|
||||
.inplace-edit--errors |
||||
line-height: 1.2em |
||||
width: 100% |
||||
padding: 5px |
||||
left: 251px |
||||
bottom: -11px |
||||
background: rgb(254, 208, 209) |
||||
border: 1px solid $inplace-edit--color--very-dark |
||||
min-height: 42px |
||||
color: $body-font-color |
||||
.inplace-edit--errors--icon |
||||
position: absolute |
||||
top: 8px |
||||
.inplace-edit--errors--text |
||||
white-space: pre-line |
||||
padding-left: 18px |
||||
|
||||
.inplace-edit--controls |
||||
display: inline-block |
||||
width: 115px |
||||
height: 35px |
||||
background: $inplace-edit--dark-background |
||||
border: 1px solid $inplace-edit--color--very-dark |
||||
box-shadow: 1px 1px 2px $inplace-edit--border-color |
||||
text-align: center |
||||
float: right |
||||
padding: 5px |
||||
line-height: 1.6rem |
||||
margin-top: -1px |
||||
// Having to get the element out of the normal dom flow to |
||||
// prevent the element overlapping and thereby blocking the click on |
||||
// inplace-editable elements below the current one. |
||||
position: absolute |
||||
right: 0 |
||||
|
||||
.inplace-edit--read |
||||
@extend .form--field-container |
||||
|
||||
.inplace-edit--read-value |
||||
@include grid-block |
||||
padding: 0.375rem |
||||
|
||||
&.-default |
||||
font-style: italic |
||||
|
||||
.inplace-edit--preview |
||||
border: 1px solid $inplace-edit--border-color |
||||
padding: 0.375rem |
||||
|
||||
.inplace-edit--icon-wrapper |
||||
@include grid-block(shrink) |
||||
text-align: center |
||||
width: 33px |
||||
background: $gray-light |
||||
border-left: 1px solid $inplace-edit--border-color |
||||
align-items: center |
||||
justify-content: center |
||||
visibility: hidden |
||||
font-size: rem-calc(14px) |
||||
|
||||
.icon-edit::before |
||||
// HACK: overriding default padding here |
||||
padding-right: 0 |
||||
|
||||
a |
||||
color: $body-font-color |
||||
|
||||
a:hover |
||||
color: $body-font-color |
||||
text-decoration: none |
||||
|
||||
.inplace-editing--trigger-container |
||||
@include grid-block |
||||
|
||||
// need to specify the a explicitly as otherwise |
||||
// the default class will win |
||||
a.inplace-editing--trigger-link, |
||||
.inplace-editing--trigger-link |
||||
@include grid-block |
||||
color: $body-font-color |
||||
font-weight: inherit |
||||
|
||||
&:hover, |
||||
&:focus, |
||||
text-decoration: none |
||||
color: $body-font-color |
||||
|
||||
.inplace-editing--container |
||||
border-color: $inplace-edit--border-color |
||||
.inplace-edit--icon-wrapper |
||||
visibility: visible |
||||
|
||||
.inplace-editing--container |
||||
@include grid-block |
||||
border-color: #fff |
||||
border-style: solid |
||||
border-radius: 2px |
||||
border-width: 1px |
||||
|
||||
.inplace-edit--read |
||||
@include grid-block |
||||
|
||||
.inplace-edit--control |
||||
background: $inplace-edit--color--very-dark |
||||
width: 1.5rem |
||||
height: 1.5rem |
||||
line-height: 1.5rem |
||||
border: 1px solid $inplace-edit--dark-background |
||||
display: inline-block |
||||
border-radius: 0.75rem |
||||
font-size: 0.75rem |
||||
|
||||
&.-icons-2 |
||||
width: 2.875rem |
||||
|
||||
a |
||||
color: $body-font-color |
||||
text-decoration: none |
||||
&:hover |
||||
|
||||
.icon-context::before |
||||
padding: 0 |
||||
|
||||
// custom hack to have the jsToolbar in the same line as the "Description" title |
||||
|
||||
.inplace-edit.attribute-description |
||||
.inplace-edit--write |
||||
margin-top: -48px |
||||
// for non-textile description we need to not overlap the 'Description' header |
||||
// which in textile is shown due to edit buttons on the right side |
||||
&.edit-strategy-textarea |
||||
margin-top: auto |
||||
|
||||
// this aligns the title for the WP |
||||
.work-packages--details--title |
||||
margin-left: -0.375rem |
||||
|
||||
.inplace-edit--highlight |
||||
border-color: $inplace-edit--color-highlight !important |
||||
|
||||
@ -0,0 +1 @@ |
||||
# jQuery UI Components |
||||
@ -0,0 +1,431 @@ |
||||
//-- copyright |
||||
// OpenProject is a project management system. |
||||
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF) |
||||
// |
||||
// This program is free software; you can redistribute it and/or |
||||
// modify it under the terms of the GNU General Public License version 3. |
||||
// |
||||
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows: |
||||
// Copyright (C) 2006-2013 Jean-Philippe Lang |
||||
// Copyright (C) 2010-2013 the ChiliProject Team |
||||
// |
||||
// This program is free software; you can redistribute it and/or |
||||
// modify it under the terms of the GNU General Public License |
||||
// as published by the Free Software Foundation; either version 2 |
||||
// of the License, or (at your option) any later version. |
||||
// |
||||
// This program is distributed in the hope that it will be useful, |
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
// GNU General Public License for more details. |
||||
// |
||||
// You should have received a copy of the GNU General Public License |
||||
// along with this program; if not, write to the Free Software |
||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. |
||||
// |
||||
// See doc/COPYRIGHT.rdoc for more details. |
||||
//++ |
||||
|
||||
/*! |
||||
* jQuery UI CSS Framework 1.10.4 |
||||
* http://jqueryui.com |
||||
* |
||||
* Copyright 2014 jQuery Foundation and other contributors |
||||
* Released under the MIT license. |
||||
* http://jquery.org/license |
||||
* |
||||
* http://api.jqueryui.com/category/theming/ |
||||
* |
||||
* To view and modify this theme, visit http://jqueryui.com/themeroller/ |
||||
*/ |
||||
|
||||
|
||||
/* Component containers |
||||
----------------------------------*/ |
||||
.ui-widget { |
||||
font-family: $body-font-family; |
||||
font-size: rem-calc(15px); |
||||
} |
||||
.ui-widget .ui-widget { |
||||
font-size: 1em; |
||||
} |
||||
.ui-widget input, |
||||
.ui-widget select, |
||||
.ui-widget textarea, |
||||
.ui-widget button { |
||||
font-family: $body-font-family; |
||||
font-size: 1em; |
||||
} |
||||
.ui-widget-content { |
||||
border: 1px solid #aaaaaa/*{borderColorContent}*/; |
||||
background: #ffffff/*{bgColorContent}*/; |
||||
color: #222222/*{fcContent}*/; |
||||
} |
||||
.ui-widget-content a { |
||||
color: #222222/*{fcContent}*/; |
||||
} |
||||
.ui-widget-header { |
||||
border: 1px solid #aaaaaa/*{borderColorHeader}*/; |
||||
background: #cccccc/*{bgColorHeader}*/; |
||||
color: #222222/*{fcHeader}*/; |
||||
font-weight: bold; |
||||
} |
||||
.ui-widget-header a { |
||||
color: #222222/*{fcHeader}*/; |
||||
} |
||||
|
||||
/* Interaction states |
||||
----------------------------------*/ |
||||
.ui-state-default, |
||||
.ui-widget-content .ui-state-default, |
||||
.ui-widget-header .ui-state-default { |
||||
border: 1px solid #d3d3d3/*{borderColorDefault}*/; |
||||
background: #e6e6e6/*{bgColorDefault}*/; |
||||
font-weight: normal/*{fwDefault}*/; |
||||
color: #555555/*{fcDefault}*/; |
||||
} |
||||
.ui-state-default a, |
||||
.ui-state-default a:link, |
||||
.ui-state-default a:visited { |
||||
color: #555555/*{fcDefault}*/; |
||||
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/*{borderColorHover}*/; |
||||
background: #dadada/*{bgColorHover}*/; |
||||
font-weight: normal/*{fwDefault}*/; |
||||
color: #212121/*{fcHover}*/; |
||||
} |
||||
.ui-state-hover a, |
||||
.ui-state-hover a:hover, |
||||
.ui-state-hover a:link, |
||||
.ui-state-hover a:visited, |
||||
.ui-state-focus a, |
||||
.ui-state-focus a:hover, |
||||
.ui-state-focus a:link, |
||||
.ui-state-focus a:visited { |
||||
color: #212121/*{fcHover}*/; |
||||
text-decoration: none; |
||||
} |
||||
.ui-state-active, |
||||
.ui-widget-content .ui-state-active, |
||||
.ui-widget-header .ui-state-active { |
||||
border: 1px solid #aaaaaa/*{borderColorActive}*/; |
||||
background: #ffffff/*{bgColorActive}*/; |
||||
font-weight: normal/*{fwDefault}*/; |
||||
color: #212121/*{fcActive}*/; |
||||
} |
||||
.ui-state-active a, |
||||
.ui-state-active a:link, |
||||
.ui-state-active a:visited { |
||||
color: #212121/*{fcActive}*/; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
/* Interaction Cues |
||||
----------------------------------*/ |
||||
.ui-state-highlight, |
||||
.ui-widget-content .ui-state-highlight, |
||||
.ui-widget-header .ui-state-highlight { |
||||
border: 1px solid #fcefa1/*{borderColorHighlight}*/; |
||||
background: #fbf9ee/*{bgColorHighlight}*/; |
||||
color: #363636/*{fcHighlight}*/; |
||||
} |
||||
.ui-state-highlight a, |
||||
.ui-widget-content .ui-state-highlight a, |
||||
.ui-widget-header .ui-state-highlight a { |
||||
color: #363636/*{fcHighlight}*/; |
||||
} |
||||
.ui-state-error, |
||||
.ui-widget-content .ui-state-error, |
||||
.ui-widget-header .ui-state-error { |
||||
border: 1px solid #cd0a0a/*{borderColorError}*/; |
||||
background: #fef1ec/*{bgColorError}*/; |
||||
color: #cd0a0a/*{fcError}*/; |
||||
} |
||||
.ui-state-error a, |
||||
.ui-widget-content .ui-state-error a, |
||||
.ui-widget-header .ui-state-error a { |
||||
color: #cd0a0a/*{fcError}*/; |
||||
} |
||||
.ui-state-error-text, |
||||
.ui-widget-content .ui-state-error-text, |
||||
.ui-widget-header .ui-state-error-text { |
||||
color: #cd0a0a/*{fcError}*/; |
||||
} |
||||
.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; |
||||
font-weight: normal; |
||||
} |
||||
.ui-state-disabled, |
||||
.ui-widget-content .ui-state-disabled, |
||||
.ui-widget-header .ui-state-disabled { |
||||
opacity: .35; |
||||
background-image: none; |
||||
} |
||||
|
||||
/* Icons |
||||
----------------------------------*/ |
||||
|
||||
/* states and images */ |
||||
.ui-icon { |
||||
width: 16px; |
||||
height: 16px; |
||||
} |
||||
.ui-icon, |
||||
.ui-widget-content .ui-icon { |
||||
background-image: image-url('jquery-ui/ui-icons_222222_256x240.png')/*{iconsContent}*/; |
||||
} |
||||
.ui-widget-header .ui-icon { |
||||
background-image: image-url('jquery-ui/ui-icons_222222_256x240.png')/*{iconsHeader}*/; |
||||
} |
||||
.ui-state-default .ui-icon { |
||||
background-image: image-url('jquery-ui/ui-icons_888888_256x240.png')/*{iconsDefault}*/; |
||||
} |
||||
.ui-state-hover .ui-icon, |
||||
.ui-state-focus .ui-icon { |
||||
background-image: image-url('jquery-ui/ui-icons_454545_256x240.png')/*{iconsHover}*/; |
||||
} |
||||
.ui-state-active .ui-icon { |
||||
background-image: image-url('jquery-ui/ui-icons_454545_256x240.png')/*{iconsActive}*/; |
||||
} |
||||
.ui-state-highlight .ui-icon { |
||||
background-image: image-url('jquery-ui/ui-icons_2e83ff_256x240.png')/*{iconsHighlight}*/; |
||||
} |
||||
.ui-state-error .ui-icon, |
||||
.ui-state-error-text .ui-icon { |
||||
background-image: image-url('jquery-ui/ui-icons_cd0a0a_256x240.png')/*{iconsError}*/; |
||||
} |
||||
|
||||
/* 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/*{cornerRadius}*/; |
||||
} |
||||
.ui-corner-all, |
||||
.ui-corner-top, |
||||
.ui-corner-right, |
||||
.ui-corner-tr { |
||||
border-top-right-radius: 4px/*{cornerRadius}*/; |
||||
} |
||||
.ui-corner-all, |
||||
.ui-corner-bottom, |
||||
.ui-corner-left, |
||||
.ui-corner-bl { |
||||
border-bottom-left-radius: 4px/*{cornerRadius}*/; |
||||
} |
||||
.ui-corner-all, |
||||
.ui-corner-bottom, |
||||
.ui-corner-right, |
||||
.ui-corner-br { |
||||
border-bottom-right-radius: 4px/*{cornerRadius}*/; |
||||
} |
||||
|
||||
/* Overlays */ |
||||
.ui-widget-overlay { |
||||
background: #aaaaaa/*{bgColorOverlay}*/; |
||||
opacity: .3/*{opacityOverlay}*/; |
||||
} |
||||
.ui-widget-shadow { |
||||
margin: -8px/*{offsetTopShadow}*/ 0 0 -8px/*{offsetLeftShadow}*/; |
||||
padding: 8px/*{thicknessShadow}*/; |
||||
background: #aaaaaa/*{bgColorShadow}*/; |
||||
opacity: .3/*{opacityShadow}*/; |
||||
border-radius: 8px/*{cornerRadiusShadow}*/; |
||||
} |
||||
@ -0,0 +1,18 @@ |
||||
# Legacy Pagination |
||||
|
||||
``` |
||||
<p class="legacy-pagination"> |
||||
<a class="previous_page" rel="prev start" href="/users?page=1">Previous</a> |
||||
<a rel="prev start" href="/users?page=1">1</a> |
||||
<em class="current">2</em> |
||||
<a rel="next" href="/users?page=3">3</a> <a href="/users?page=4">4</a> <a class="next_page" rel="next" href="/users?page=3">Next</a> |
||||
<span class="range">(11 - 20/33)</span> |
||||
<span class="per_page_options"> |
||||
Per page: |
||||
<span class="current">10</span>, |
||||
<a href="/users?page=1&per_page=20">20</a>, |
||||
<a href="/users?page=1&per_page=50">50</a>, |
||||
<a href="/users?page=1&per_page=100">100</a> |
||||
</span> |
||||
</p> |
||||
``` |
||||
@ -0,0 +1,60 @@ |
||||
//-- copyright |
||||
// OpenProject is a project management system. |
||||
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF) |
||||
// |
||||
// This program is free software; you can redistribute it and/or |
||||
// modify it under the terms of the GNU General Public License version 3. |
||||
// |
||||
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows: |
||||
// Copyright (C) 2006-2013 Jean-Philippe Lang |
||||
// Copyright (C) 2010-2013 the ChiliProject Team |
||||
// |
||||
// This program is free software; you can redistribute it and/or |
||||
// modify it under the terms of the GNU General Public License |
||||
// as published by the Free Software Foundation; either version 2 |
||||
// of the License, or (at your option) any later version. |
||||
// |
||||
// This program is distributed in the hope that it will be useful, |
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
// GNU General Public License for more details. |
||||
// |
||||
// You should have received a copy of the GNU General Public License |
||||
// along with this program; if not, write to the Free Software |
||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. |
||||
// |
||||
// See doc/COPYRIGHT.rdoc for more details. |
||||
//++ |
||||
|
||||
.legacy-pagination |
||||
font-size: 90% |
||||
|
||||
p.legacy-pagination |
||||
margin-top: 8px |
||||
|
||||
.legacy-pagination, |
||||
.other-formats |
||||
margin: 10px 0 |
||||
|
||||
.legacy-pagination a |
||||
padding: 1px 2px |
||||
|
||||
.legacy-pagination |
||||
.previous_page |
||||
width: 100% |
||||
height: 15px |
||||
padding-left: 18px |
||||
.next_page |
||||
width: 100% |
||||
height: 15px |
||||
padding-right: 18px |
||||
&.disabled |
||||
display: none |
||||
.previous_page.disabled |
||||
display: none |
||||
.range |
||||
padding-left: 0.5em |
||||
.per_page_options |
||||
padding-left: 0.5em |
||||
border-left: 1px solid #4B4B4B |
||||
margin-left: 0.5em |
||||
@ -0,0 +1,13 @@ |
||||
# News |
||||
|
||||
``` |
||||
<div class="news"> |
||||
<a href="/projects/seeded_project">Seeded Project</a>: |
||||
<h4 class="overview"><a href="/news/507-sed-ex-ipsa-recusandae-quibusdam">sed ex ipsa recusandae quibusdam</a></h4> |
||||
<p class="author additional-information">Added by <a href="/users/34">Reinhold Weber</a> <time class="timestamp" title="03/10/2014 05:20 PM">9 months</time> ago</p> |
||||
<div> |
||||
|
||||
<div class="summary">Curtus absorbeo causa adficio aegrus sed deserunt. Dolores quo abeo quos ante aestivus coerceo ullus.</div> |
||||
</div> |
||||
</div> |
||||
``` |
||||
@ -0,0 +1,52 @@ |
||||
//-- copyright |
||||
// OpenProject is a project management system. |
||||
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF) |
||||
// |
||||
// This program is free software; you can redistribute it and/or |
||||
// modify it under the terms of the GNU General Public License version 3. |
||||
// |
||||
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows: |
||||
// Copyright (C) 2006-2013 Jean-Philippe Lang |
||||
// Copyright (C) 2010-2013 the ChiliProject Team |
||||
// |
||||
// This program is free software; you can redistribute it and/or |
||||
// modify it under the terms of the GNU General Public License |
||||
// as published by the Free Software Foundation; either version 2 |
||||
// of the License, or (at your option) any later version. |
||||
// |
||||
// This program is distributed in the hope that it will be useful, |
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
// GNU General Public License for more details. |
||||
// |
||||
// You should have received a copy of the GNU General Public License |
||||
// along with this program; if not, write to the Free Software |
||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. |
||||
// |
||||
// See doc/COPYRIGHT.rdoc for more details. |
||||
//++ |
||||
|
||||
.news |
||||
margin-bottom: 30px |
||||
|
||||
&.box > p |
||||
margin-top: -15px |
||||
|
||||
.timestamp |
||||
border-bottom: 1px dotted |
||||
cursor: help |
||||
|
||||
.additional-information |
||||
font-size: 11px |
||||
|
||||
h4.overview |
||||
margin-bottom: 0 |
||||
border: 0 |
||||
|
||||
.summary |
||||
font-style: italic |
||||
|
||||
p.author |
||||
font-style: italic |
||||
/* to accomodate the .profile-wrap class |
||||
height: 42px |
||||
@ -0,0 +1,49 @@ |
||||
# Notifications |
||||
|
||||
``` |
||||
<div class="notification-box"> |
||||
<a href="#" class="notification-box--close">×</a> |
||||
<div class="notification-box--content"> |
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia laudantium ea delectus incidunt accusantium repudiandae deserunt excepturi non esse vero distinctio et reprehenderit, cupiditate quidem consectetur rerum iste magnam voluptatibus.</p> |
||||
</div> |
||||
</div> |
||||
``` |
||||
|
||||
## Error |
||||
|
||||
``` |
||||
<div class="notification-box -error"> |
||||
<a href="#" class="notification-box--close">×</a> |
||||
<div class="notification-box--content"> |
||||
<p>An error occured, here are the facts:</p> |
||||
<ul> |
||||
<li>Fact 1: You made a mistake</li> |
||||
<li>Fact 2: You <em>really</em> made a mistake</li> |
||||
<li>Fact 3: You <strong>should fix it</strong></li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
``` |
||||
|
||||
## Warning |
||||
|
||||
``` |
||||
<div class="notification-box -warning"> |
||||
<a href="#" class="notification-box--close">×</a> |
||||
<div class="notification-box--content"> |
||||
<p>This is a warning. You may ignore it, but bad things might happen.</p> |
||||
</div> |
||||
</div> |
||||
``` |
||||
|
||||
## Success |
||||
|
||||
``` |
||||
<div class="notification-box -success"> |
||||
<div class="notification-box--icon -check"></div> |
||||
<a href="#" class="notification-box--close">×</a> |
||||
<div class="notification-box--content"> |
||||
<p>Successful update. <a href="#">A link to the past</a></p> |
||||
</div> |
||||
</div> |
||||
``` |
||||
@ -0,0 +1,60 @@ |
||||
//-- copyright |
||||
// OpenProject is a project management system. |
||||
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF) |
||||
// |
||||
// This program is free software; you can redistribute it and/or |
||||
// modify it under the terms of the GNU General Public License version 3. |
||||
// |
||||
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows: |
||||
// Copyright (C) 2006-2013 Jean-Philippe Lang |
||||
// Copyright (C) 2010-2013 the ChiliProject Team |
||||
// |
||||
// This program is free software; you can redistribute it and/or |
||||
// modify it under the terms of the GNU General Public License |
||||
// as published by the Free Software Foundation; either version 2 |
||||
// of the License, or (at your option) any later version. |
||||
// |
||||
// This program is distributed in the hope that it will be useful, |
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
// GNU General Public License for more details. |
||||
// |
||||
// You should have received a copy of the GNU General Public License |
||||
// along with this program; if not, write to the Free Software |
||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. |
||||
// |
||||
// See doc/COPYRIGHT.rdoc for more details. |
||||
//++ |
||||
|
||||
// NOTE: these are demo ski |
||||
|
||||
.notification-box |
||||
|
||||
box-shadow: 1px 2px 3px #ddd |
||||
border-width: 1px |
||||
border-style: solid |
||||
padding: 10px 10px |
||||
|
||||
&.-error |
||||
background: #fedada |
||||
border-color: #ca3f3f |
||||
&.-success |
||||
background: #d8fdd1 |
||||
border-color: #35c53f |
||||
&.-warning |
||||
background: #f4f4aa |
||||
border-color: #000 |
||||
|
||||
.notification-box--icon |
||||
width: 20px |
||||
height: 20px |
||||
float: left |
||||
margin: 3px |
||||
|
||||
&.-check::after |
||||
content: '\2714' |
||||
|
||||
.notification-box--close |
||||
float: right |
||||
|
||||
|
||||
@ -1 +1,17 @@ |
||||
# Preview |
||||
|
||||
``` |
||||
<fieldset class="preview"> |
||||
<legend class="preview--legend">Preview - Description</legend> |
||||
<div class="wiki"> |
||||
<h2>An article that's still being written.</h2> |
||||
</div> |
||||
</fieldset> |
||||
``` |
||||
|
||||
``` |
||||
<fieldset class="preview"> |
||||
<legend class="preview--legend">Preview - Description</legend> |
||||
<span class="preview--nothing-to-preview">Nothing to preview</span> |
||||
</fieldset> |
||||
``` |
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue