[med-svn] [r-cran-shinydashboard] 01/02: New upstream version 0.6.1
Andreas Tille
tille at debian.org
Tue Oct 10 21:00:24 UTC 2017
This is an automated email from the git hooks/post-receive script.
tille pushed a commit to branch master
in repository r-cran-shinydashboard.
commit d8f1c73a8176ffd04671cb13116c0e9c1a1f6c73
Author: Andreas Tille <tille at debian.org>
Date: Tue Oct 10 22:59:34 2017 +0200
New upstream version 0.6.1
---
DESCRIPTION | 28 +
LICENSE | 125 +
MD5 | 66 +
NAMESPACE | 32 +
NEWS.md | 116 +
R/boxes.R | 406 ++
R/dashboardBody.R | 17 +
R/dashboardHeader.R | 314 ++
R/dashboardPage.R | 73 +
R/dashboardSidebar.R | 487 ++
R/deps.R | 39 +
R/menuOutput.R | 159 +
R/shinydashboard-package.r | 6 +
R/tabs.R | 83 +
R/utils.R | 221 +
R/valueBoxOutput.R | 82 +
README.md | 16 +
inst/AdminLTE/AdminLTE.css | 5005 +++++++++++++++++++++
inst/AdminLTE/AdminLTE.min.css | 7 +
inst/AdminLTE/_all-skins.css | 1770 ++++++++
inst/AdminLTE/_all-skins.min.css | 1 +
inst/AdminLTE/app.js | 793 ++++
inst/AdminLTE/app.js.map | 1 +
inst/AdminLTE/app.min.js | 2 +
inst/AdminLTE/app.min.js.map | 1 +
inst/AdminLTE/fonts/Source_Sans_Pro_300.ttf | Bin 0 -> 35368 bytes
inst/AdminLTE/fonts/Source_Sans_Pro_300italic.ttf | Bin 0 -> 33996 bytes
inst/AdminLTE/fonts/Source_Sans_Pro_400.ttf | Bin 0 -> 35064 bytes
inst/AdminLTE/fonts/Source_Sans_Pro_400italic.ttf | Bin 0 -> 33864 bytes
inst/AdminLTE/fonts/Source_Sans_Pro_600.ttf | Bin 0 -> 34808 bytes
inst/AdminLTE/fonts/Source_Sans_Pro_600italic.ttf | Bin 0 -> 33592 bytes
inst/AdminLTE/fonts/Source_Sans_Pro_700.ttf | Bin 0 -> 34908 bytes
inst/shinydashboard.css | 70 +
inst/shinydashboard.js | 322 ++
inst/shinydashboard.js.map | 1 +
inst/shinydashboard.min.js | 4 +
inst/shinydashboard.min.js.map | 1 +
man/box.Rd | 173 +
man/dashboardBody.Rd | 18 +
man/dashboardHeader.Rd | 102 +
man/dashboardPage.Rd | 45 +
man/dashboardSidebar.Rd | 74 +
man/dropdownMenu.Rd | 44 +
man/dropdownMenuOutput.Rd | 23 +
man/infoBox.Rd | 47 +
man/menuItemOutput.Rd | 23 +
man/menuOutput.Rd | 30 +
man/messageItem.Rd | 32 +
man/notificationItem.Rd | 28 +
man/renderDropdownMenu.Rd | 20 +
man/renderMenu.Rd | 104 +
man/renderValueBox.Rd | 64 +
man/shinydashboard.Rd | 10 +
man/sidebarMenu.Rd | 95 +
man/sidebarMenuOutput.Rd | 23 +
man/sidebarSearchForm.Rd | 28 +
man/sidebarUserPanel.Rd | 26 +
man/tabBox.Rd | 89 +
man/tabItem.Rd | 21 +
man/tabItems.Rd | 19 +
man/tagAssert.Rd | 24 +
man/taskItem.Rd | 27 +
man/updateTabItems.Rd | 60 +
man/validColors.Rd | 30 +
man/validStatuses.Rd | 21 +
man/valueBox.Rd | 38 +
man/valueBoxOutput.Rd | 28 +
67 files changed, 11614 insertions(+)
diff --git a/DESCRIPTION b/DESCRIPTION
new file mode 100644
index 0000000..b0c8347
--- /dev/null
+++ b/DESCRIPTION
@@ -0,0 +1,28 @@
+Package: shinydashboard
+Title: Create Dashboards with 'Shiny'
+Version: 0.6.1
+Authors at R: c(
+ person("Winston", "Chang", role = c("aut", "cre"), email = "winston at rstudio.com"),
+ person("Barbara", "Borges Ribeiro", role = "aut", email = "barbara at rstudio.com"),
+ person(family = "RStudio", role = "cph"),
+ person(family = "Almasaeed Studio", role = c("ctb", "cph"), comment = "AdminLTE theme for Bootstrap"),
+ person(family = "Adobe Systems Incorporated", role = c("ctb", "cph"), comment = "Source Sans Pro font")
+ )
+Description: Create dashboards with 'Shiny'. This package provides
+ a theme on top of 'Shiny', making it easy to create attractive dashboards.
+URL: http://rstudio.github.io/shinydashboard/
+Depends: R (>= 3.0)
+License: GPL-2 | file LICENSE
+Imports: utils, shiny (>= 1.0.0), htmltools (>= 0.2.6)
+BugReports: https://github.com/rstudio/shinydashboard
+RoxygenNote: 6.0.1
+NeedsCompilation: no
+Packaged: 2017-06-14 17:18:24 UTC; barbaraborges
+Author: Winston Chang [aut, cre],
+ Barbara Borges Ribeiro [aut],
+ RStudio [cph],
+ Almasaeed Studio [ctb, cph] (AdminLTE theme for Bootstrap),
+ Adobe Systems Incorporated [ctb, cph] (Source Sans Pro font)
+Maintainer: Winston Chang <winston at rstudio.com>
+Repository: CRAN
+Date/Publication: 2017-06-14 23:37:34 UTC
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..9251ce4
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,125 @@
+The shinydashboard package as a whole is distributed under GPL-2 (GNU GENERAL
+PUBLIC LICENSE version 2).
+
+The shinydashboard package inludes other GPL-2 compatible software components.
+The following is a list of these components (full copies of the license
+agreements used by these components are included below):
+
+- AdminLTE, https://github.com/almasaeed2010/AdminLTE
+- Google Web Fonts, https://www.google.com/fonts/attribution
+
+
+AdminLTE
+----------------------------------------------------------------------
+
+The MIT License (MIT)
+
+Copyright (c) 2013 almasaeed2010
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+
+Source Sans Pro Font
+----------------------------------------------------------------------
+
+SIL OPEN FONT LICENSE
+
+Version 1.1 - 26 February 2007
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting — in part or in whole — any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/MD5 b/MD5
new file mode 100644
index 0000000..5740f1f
--- /dev/null
+++ b/MD5
@@ -0,0 +1,66 @@
+57d0382e19f666648e6ef8ad7232cc71 *DESCRIPTION
+d8eaa11f2d7c4e0258486389013752bc *LICENSE
+7b13e6353f630a4c48c686b647499740 *NAMESPACE
+9d946ae7618aef6ff255d7a593b8730e *NEWS.md
+ae7df0830983f1875480b034166802e5 *R/boxes.R
+58fdd0dc699149e29df8b3d771587339 *R/dashboardBody.R
+1a7ab967b3934e943027d9760a7eb268 *R/dashboardHeader.R
+817e836016742b74c77b7d0215cb47e1 *R/dashboardPage.R
+e3471eaad31958f085ab4edbf3ac6b0c *R/dashboardSidebar.R
+cb891d9053b4a362498493a182c2803d *R/deps.R
+e86f2a08d970d384a09e5679a318eac3 *R/menuOutput.R
+ebc1be5aa29851745caae82ebb9fb079 *R/shinydashboard-package.r
+06dfe5299d316dff12aa0922c420f74f *R/tabs.R
+981edce26cbd0fc2b2ec9ac37e70c09c *R/utils.R
+9f4eeb3824ce81195dcbec6dae879953 *R/valueBoxOutput.R
+1d098e8b2656eed5b053bfb94fd04a27 *README.md
+3a4b5a55318954feac6af22b80fecba9 *inst/AdminLTE/AdminLTE.css
+e5ea9c4e413ecfea964dc64db7ad0e96 *inst/AdminLTE/AdminLTE.min.css
+65e2c158a4f5b6b21a19c132aa7dc1c0 *inst/AdminLTE/_all-skins.css
+12c46f89ff41528f2b582452c4afdd97 *inst/AdminLTE/_all-skins.min.css
+1682e10d10f326db6820ac192570a106 *inst/AdminLTE/app.js
+13a1126fea61fcff2d49cebafa87b879 *inst/AdminLTE/app.js.map
+6414f8d1446eb1e295f7afd7283393d0 *inst/AdminLTE/app.min.js
+40bce2772171502d7ed3f73ac23c5924 *inst/AdminLTE/app.min.js.map
+6a9d4d28a117a8364376de2f17ee5ff9 *inst/AdminLTE/fonts/Source_Sans_Pro_300.ttf
+aa250dd5d8932a8497ac5cbf13d9274e *inst/AdminLTE/fonts/Source_Sans_Pro_300italic.ttf
+f2d83436dcf3f53375518292e917643c *inst/AdminLTE/fonts/Source_Sans_Pro_400.ttf
+b5a02317c3d2de0275cfd1efef086f6f *inst/AdminLTE/fonts/Source_Sans_Pro_400italic.ttf
+39d8befcdcde91747d1b75ab6cadffbd *inst/AdminLTE/fonts/Source_Sans_Pro_600.ttf
+e7dc82fa8534c925644f9af433214d20 *inst/AdminLTE/fonts/Source_Sans_Pro_600italic.ttf
+206f41ff7cdb7df5dbfeda33c847b793 *inst/AdminLTE/fonts/Source_Sans_Pro_700.ttf
+02c24fb3f5504d1bfc8f050d0392571b *inst/shinydashboard.css
+fe5211d2e9ac7cca4f7eccdfccb5d3c8 *inst/shinydashboard.js
+99a317ddfdacd13efb7debf79d711b04 *inst/shinydashboard.js.map
+d3b4b8ff39569a5a29f213651bead0f3 *inst/shinydashboard.min.js
+1044c5f8a67f299792d17d336808f601 *inst/shinydashboard.min.js.map
+ecdb22b85accfb4a1e13b81be547ef5c *man/box.Rd
+e03b63c24d7af853adcd8ebf34cc8e69 *man/dashboardBody.Rd
+01c05320aa21ed88f4eae4477f006339 *man/dashboardHeader.Rd
+96028ce63360b162a5c6119a0d6046b9 *man/dashboardPage.Rd
+b1ceeae29b1bd2a142322a13fa95eee7 *man/dashboardSidebar.Rd
+f4d42e732868a68e8296f5ee9190dff8 *man/dropdownMenu.Rd
+b8a5e0dbf87a159e2aba3c2e3a43859e *man/dropdownMenuOutput.Rd
+37ce9fbf7c44b7a1583a0391109505f2 *man/infoBox.Rd
+1b35c4931f18cec8ae6fa46ec49be2df *man/menuItemOutput.Rd
+ce8e208fd60d1e2edcfbd138301bc6f5 *man/menuOutput.Rd
+f0df3322a1409d2da597a4951eb97703 *man/messageItem.Rd
+a4594ca98d7b72ca257bf46d6ee4bf24 *man/notificationItem.Rd
+60bb888325f6afebeb16772c86667188 *man/renderDropdownMenu.Rd
+7eca92a0c918652eeac7168ef11bba28 *man/renderMenu.Rd
+afbedaf6a9b0f8446acce30f4386a50e *man/renderValueBox.Rd
+c58fe33da411a5b20744a15cd6f247f8 *man/shinydashboard.Rd
+733b5b30ae7b1d8e63ba4dae845bd95f *man/sidebarMenu.Rd
+1d8c55cecf78c6fcec7350a94790e162 *man/sidebarMenuOutput.Rd
+1e7b589c034cc4f53d7e8bcac4f8e73a *man/sidebarSearchForm.Rd
+6ed90f5244f69aae3a7c047182bd0938 *man/sidebarUserPanel.Rd
+f4ad91a99a1c723b682b4eccb6dcbcec *man/tabBox.Rd
+e08b37333e02ea38d93ec96540ea5f7e *man/tabItem.Rd
+4dd79530fc12d0bd3c342977d3763d37 *man/tabItems.Rd
+fc76753b62042a3acf118676837d3b12 *man/tagAssert.Rd
+102cb79aa0aae5e2a90af681ec245d5e *man/taskItem.Rd
+560033206d7e27114f58b76064f81956 *man/updateTabItems.Rd
+c3bfa2203719351c903c3a73de376fba *man/validColors.Rd
+856fce151386abd64e4fcdb18dba8af9 *man/validStatuses.Rd
+f4cc33ccf71dc8b3c91f02c00938e917 *man/valueBox.Rd
+a67067685a9fe987271a47098ce2cc11 *man/valueBoxOutput.Rd
diff --git a/NAMESPACE b/NAMESPACE
new file mode 100644
index 0000000..d3773d3
--- /dev/null
+++ b/NAMESPACE
@@ -0,0 +1,32 @@
+# Generated by roxygen2: do not edit by hand
+
+export(box)
+export(dashboardBody)
+export(dashboardHeader)
+export(dashboardPage)
+export(dashboardSidebar)
+export(dropdownMenu)
+export(dropdownMenuOutput)
+export(infoBox)
+export(infoBoxOutput)
+export(menuItem)
+export(menuItemOutput)
+export(menuSubItem)
+export(messageItem)
+export(notificationItem)
+export(renderDropdownMenu)
+export(renderInfoBox)
+export(renderMenu)
+export(renderValueBox)
+export(sidebarMenu)
+export(sidebarMenuOutput)
+export(sidebarSearchForm)
+export(sidebarUserPanel)
+export(tabBox)
+export(tabItem)
+export(tabItems)
+export(taskItem)
+export(updateTabItems)
+export(valueBox)
+export(valueBoxOutput)
+import(htmltools)
diff --git a/NEWS.md b/NEWS.md
new file mode 100644
index 0000000..18acc05
--- /dev/null
+++ b/NEWS.md
@@ -0,0 +1,116 @@
+shinydashboard 0.6.1.9000
+=========================
+
+## Full changelog
+
+### New features
+
+### Minor new features and improvements
+
+### Bug fixes
+
+### Library updates
+
+shinydashboard 0.6.1
+====================
+
+This is a hotfix release of shinydashboard, meant to fix a few edge cases that have surfaced since the last release.
+
+## Full changelog
+
+* Fixed [#214](https://github.com/rstudio/shinydashboard/issues/214): make sure that the `data-value` attribute of `.sidebarMenuSelectedTabItem` is always set in the body of the `ensureActivatedTab()` function. ([#216](https://github.com/rstudio/shinydashboard/pull/216))
+
+* Fixed [#217](https://github.com/rstudio/shinydashboard/issues/217): correct `input$sidebarCollapsed` value for edge cases by attaching the change event to the end of the sidebar CSS transitions (instead of when the toggle button is clicked). Also make sure that `input$sidebarCollapsed` is set to `FALSE` when the app starts up with the sidebar already collapsed. ([#222](https://github.com/rstudio/shinydashboard/pull/222))
+
+shinydashboard 0.6.0
+====================
+
+This release of shinydashboard was aimed at both fixing bugs and also bringing the package up to speed with users' requests and Shiny itself (especially fully bringing [bookmarkable state](https://shiny.rstudio.com/articles/bookmarking-state.html) to shinydashboard's sidebar). In addition to the changes listed below, we also added a [new "Behavior" section to the shinydashboard website](https://rstudio.github.io/shinydashboard/behavior.html) to explain this release's two biggest new features.
+
+## Full changelog
+
+### New features
+
+* Address [#179](https://github.com/rstudio/shinydashboard/issues/179) support for bookmarking the expanded/collapsed state of the whole sidebar. (commit [e71c93f](https://github.com/rstudio/shinydashboard/commit/e71c93fa7a71f229e725efd4a7867e431cd57679))
+
+* Added Shiny input to keep track of which sidebar `menuItem` is expanded (if any), which makes bookmarking the exact state of the sidebar trivial. (commit [6901b90](https://github.com/rstudio/shinydashboard/commit/6901b90b8c866b89d02514cfc01fdfab88175602))
+
+### Minor new features and improvements
+
+* Addressed [#165](https://github.com/rstudio/shinydashboard/issues/165): added a new optional argument, called `headerText` to the `dropdownMenu()` function. If provided by the user, this text (instead of the default) will be shown on the header of the menu (only visible when the menu is expanded). See `?dropdownMenu` for more details. [#207](https://github.com/rstudio/shinydashboard/pull/207)
+
+* Split JS files. (commit [ea91503](https://github.com/rstudio/shinydashboard/commit/ea915038ae2126f48c15e3aac41782a22b16c506)). More updates to Gruntfile and structure. (commit [4e80616](https://github.com/rstudio/shinydashboard/commit/4e80616c5b3aa0dc73022dc815288b5ba7c35be0))
+
+* Better shown/hidden mechanic for Shiny inputs inside collapsible `menuItem`s. (commit [6901b90](https://github.com/rstudio/shinydashboard/commit/6901b90b8c866b89d02514cfc01fdfab88175602))
+
+* Added hack on adminLTE/app.js in order to make the `slideUp`/`slideDown` css transitions look reasonable when its content is initially empty (use case is for hidden Shiny outputs that are not rendered until the first time the `menuItem` is expanded and reveal them -- i.e. first time that `trigger("shown")` is called). (commit [25725a6](https://github.com/rstudio/shinydashboard/commit/25725a67ce3dd841786dd82b0e46624c6a7d4722))
+
+* Added manual tests for bookmarking and the shown/hidden events that happen on the sidebar. (commit [9e3e55d](https://github.com/rstudio/shinydashboard/commit/9e3e55de8cc63d4bdd179251cd53eeb845441d3d))
+
+### Bug fixes
+
+* Fixed [#71](https://github.com/rstudio/shinydashboard/issues/71) and [#87](https://github.com/rstudio/shinydashboard/issues/87): detect and enforce selected tab for dynamic sidebar menus by calling `ensureActivatedTab()` for these. (commit [9b88a79](https://github.com/rstudio/shinydashboard/commit/9b88a790df058432165ca3b483b5bbfe1d267326))
+
+* Fixed [#127](https://github.com/rstudio/shinydashboard/issues/127) and [#177](https://github.com/rstudio/shinydashboard/issues/177): previously, if `dashboardSidebar()` was called with an explicit `width` parameter, mobile rendering would look weird (the sidebar wouldn't completely disappear when it was collapsed, and content in the dashboard body would be hidden under the still-visible sidebar). ([#204](https://github.com/rstudio/shinydashboard/pull/204))
+
+* Fixed [#79](https://github.com/rstudio/shinydashboard/issues/79): Re-enable slight css transition when the sidebar is expanded/collapsed. ([#205](https://github.com/rstudio/shinydashboard/pull/205)).
+
+* Fixed [#89](https://github.com/rstudio/shinydashboard/issues/89): We claimed that `dashboardPage()` would try to extract the page's title from `dashboardHeader()` (if the title is not provided directly to `dashboardPage()`); however, we were selecting the wrong child of the header tag object ([#203](https://github.com/rstudio/shinydashboard/pull/203))
+
+* Fixed [#129](https://github.com/rstudio/shinydashboard/issues/129): Trigger shown/hidden event for Shiny outputs in the sidebar. ([#194](https://github.com/rstudio/shinydashboard/pull/194))
+
+* Fixed [#73](https://github.com/rstudio/shinydashboard/issues/73): add `collapsed` argument to `dashboardSidebar()`, which allows it to start off collapsed. ([#186](https://github.com/rstudio/shinydashboard/pull/186))
+
+* Fixed [#62](https://github.com/rstudio/shinydashboard/issues/62): make images resize when the sidebar collapses/expands. [#185](https://github.com/rstudio/shinydashboard/pull/185)
+
+* Fixed [#176](https://github.com/rstudio/shinydashboard/issues/176) (making buttons look good on the sidebar) by giving Shiny action buttons and links some margin space. ([#182](https://github.com/rstudio/shinydashboard/pull/182))
+
+### Library updates
+
+* Update documentation to newest version of roxygen. (commit [#541d3c1](https://github.com/rstudio/shinydashboard/commit/541d3c13467446c8e89b178d95b0984729559059))
+
+* Addressed [#178](https://github.com/rstudio/shinydashboard/issues/178): switch from `npm` to `yarn`. Also upgraded all yarn packages to the `latest` tag (all major changes). [#184](https://github.com/rstudio/shinydashboard/pull/184)
+
+* Updated to AdminLTE 2.3.11. ([#181](https://github.com/rstudio/shinydashboard/pull/181))
+
+shinydashboard 0.5.3
+=========================
+
+* Fixed ([#160](https://github.com/rstudio/shinydashboard/issues/160): Using a dynamically-created `sidebarMenu` without an `id` argument would cause the app to not start, when used with Shiny 0.14.
+
+shinydashboard 0.5.2
+====================
+
+* Added ability to bookmark and restore tabs, when used with Shiny 0.14 and above. ([#152](https://github.com/rstudio/shinydashboard/issues/152), [#157](https://github.com/rstudio/shinydashboard/pull/157))
+
+* Fixed issue with R CMD check and Shiny version 0.14.
+
+* Updated to AdminLTE 2.3.2 (1ee281b).
+
+shinydashboard 0.5.1
+====================
+
+* Logout panels from Shiny Server Pro were previously not visible, but now they are.
+
+* If a `sidebarUserPanel` doesn't have an image, space for the image is no longer allocated.
+
+* `tabNames` are now validated so that illegal characters result in an error early. (#66)
+
+* `sidebarUserPanel` now displays properly. (#70)
+
+* `radioButtons` did not wrap, but now they do. (#60)
+
+shinydashboard 0.5.0
+====================
+
+* Updated to AdminLTE 2.1.2 (406de4e). Please note that some CSS selectors have changed, so if you are using custom CSS, it may require modification. The documentation at http://rstudio.github.io/shinydashboard/appearance.html has some updated examples.
+
+* shinydashboard now respects the `shiny.minified` option.
+
+* Collapse buttons on boxes trigger `shown` and `hidden` events. Previously they did not, which resulted in dynamic content not working for boxes that started collapsed. (#17, #42)
+
+* Dynamic menuSubItems now work in the sidebar. (#54)
+
+* Arbitrary content may now be used in a `sidebarMenu()`, not just `menuItem`s. (#44)
+
+* Added options to set the width of `dashboardHeader()` and `dashboardSidebar()`. (#43, #45, #54)
diff --git a/R/boxes.R b/R/boxes.R
new file mode 100644
index 0000000..4f287ec
--- /dev/null
+++ b/R/boxes.R
@@ -0,0 +1,406 @@
+#' Create a value box for the main body of a dashboard.
+#'
+#' A value box displays a value (usually a number) in large text, with a smaller
+#' subtitle beneath, and a large icon on the right side. Value boxes are meant
+#' to be placed in the main body of a dashboard.
+#'
+#' @inheritParams box
+#' @param value The value to display in the box. Usually a number or short text.
+#' @param subtitle Subtitle text.
+#' @param icon An icon tag, created by \code{\link[shiny]{icon}}.
+#' @param color A color for the box. Valid colors are listed in
+#' \link{validColors}.
+#' @param href An optional URL to link to.
+#'
+#' @family boxes
+#' @seealso \code{\link{box}} for usage examples.
+#'
+#' @export
+valueBox <- function(value, subtitle, icon = NULL, color = "aqua", width = 4,
+ href = NULL)
+{
+ validateColor(color)
+ if (!is.null(icon)) tagAssert(icon, type = "i")
+
+ boxContent <- div(class = paste0("small-box bg-", color),
+ div(class = "inner",
+ h3(value),
+ p(subtitle)
+ ),
+ if (!is.null(icon)) div(class = "icon-large", icon)
+ )
+
+ if (!is.null(href))
+ boxContent <- a(href = href, boxContent)
+
+ div(class = if (!is.null(width)) paste0("col-sm-", width),
+ boxContent
+ )
+}
+
+
+#' Create an info box for the main body of a dashboard.
+#'
+#' An info box displays a large icon on the left side, and a title, value
+#' (usually a number), and an optional smaller subtitle on the right side. Info
+#' boxes are meant to be placed in the main body of a dashboard.
+#'
+#' @inheritParams box
+#' @param title Title text.
+#' @param value The value to display in the box. Usually a number or short text.
+#' @param subtitle Subtitle text (optional).
+#' @param icon An icon tag, created by \code{\link[shiny]{icon}}.
+#' @param color A color for the box. Valid colors are listed in
+#' \link{validColors}.
+#' @param fill If \code{FALSE} (the default), use a white background for the
+#' content, and the \code{color} argument for the background of the icon. If
+#' \code{TRUE}, use the \code{color} argument for the background of the
+#' content; the icon will use the same color with a slightly darkened
+#' background.
+#' @param href An optional URL to link to.
+#'
+#' @family boxes
+#' @seealso \code{\link{box}} for usage examples.
+#'
+#' @export
+infoBox <- function(title, value = NULL, subtitle = NULL,
+ icon = shiny::icon("bar-chart"), color = "aqua", width = 4, href = NULL,
+ fill = FALSE) {
+
+ validateColor(color)
+ tagAssert(icon, type = "i")
+
+ colorClass <- paste0("bg-", color)
+
+ boxContent <- div(
+ class = "info-box",
+ class = if (fill) colorClass,
+ span(
+ class = "info-box-icon",
+ class = if (!fill) colorClass,
+ icon
+ ),
+ div(class = "info-box-content",
+ span(class = "info-box-text", title),
+ if (!is.null(value)) span(class = "info-box-number", value),
+ if (!is.null(subtitle)) p(subtitle)
+ )
+ )
+
+ if (!is.null(href))
+ boxContent <- a(href = href, boxContent)
+
+ div(class = if (!is.null(width)) paste0("col-sm-", width),
+ boxContent
+ )
+}
+
+
+#' Create a box for the main body of a dashboard
+#'
+#' Boxes can be used to hold content in the main body of a dashboard.
+#'
+#' @param title Optional title.
+#' @param footer Optional footer text.
+#' @param status The status of the item This determines the item's background
+#' color. Valid statuses are listed in \link{validStatuses}.
+#' @param solidHeader Should the header be shown with a solid color background?
+#' @param background If NULL (the default), the background of the box will be
+#' white. Otherwise, a color string. Valid colors are listed in
+#' \link{validColors}.
+#' @param width The width of the box, using the Bootstrap grid system. This is
+#' used for row-based layouts. The overall width of a region is 12, so the
+#' default valueBox width of 4 occupies 1/3 of that width. For column-based
+#' layouts, use \code{NULL} for the width; the width is set by the column that
+#' contains the box.
+#' @param height The height of a box, in pixels or other CSS unit. By default
+#' the height scales automatically with the content.
+#' @param collapsible If TRUE, display a button in the upper right that allows
+#' the user to collapse the box.
+#' @param collapsed If TRUE, start collapsed. This must be used with
+#' \code{collapsible=TRUE}.
+#' @param ... Contents of the box.
+#'
+#' @family boxes
+#'
+#' @examples
+#' ## Only run this example in interactive R sessions
+#' if (interactive()) {
+#' library(shiny)
+#'
+#' # A dashboard body with a row of infoBoxes and valueBoxes, and two rows of boxes
+#' body <- dashboardBody(
+#'
+#' # infoBoxes
+#' fluidRow(
+#' infoBox(
+#' "Orders", uiOutput("orderNum2"), "Subtitle", icon = icon("credit-card")
+#' ),
+#' infoBox(
+#' "Approval Rating", "60%", icon = icon("line-chart"), color = "green",
+#' fill = TRUE
+#' ),
+#' infoBox(
+#' "Progress", uiOutput("progress2"), icon = icon("users"), color = "purple"
+#' )
+#' ),
+#'
+#' # valueBoxes
+#' fluidRow(
+#' valueBox(
+#' uiOutput("orderNum"), "New Orders", icon = icon("credit-card"),
+#' href = "http://google.com"
+#' ),
+#' valueBox(
+#' tagList("60", tags$sup(style="font-size: 20px", "%")),
+#' "Approval Rating", icon = icon("line-chart"), color = "green"
+#' ),
+#' valueBox(
+#' htmlOutput("progress"), "Progress", icon = icon("users"), color = "purple"
+#' )
+#' ),
+#'
+#' # Boxes
+#' fluidRow(
+#' box(status = "primary",
+#' sliderInput("orders", "Orders", min = 1, max = 2000, value = 650),
+#' selectInput("progress", "Progress",
+#' choices = c("0%" = 0, "20%" = 20, "40%" = 40, "60%" = 60, "80%" = 80,
+#' "100%" = 100)
+#' )
+#' ),
+#' box(title = "Histogram box title",
+#' status = "warning", solidHeader = TRUE, collapsible = TRUE,
+#' plotOutput("plot", height = 250)
+#' )
+#' ),
+#'
+#' # Boxes with solid color, using `background`
+#' fluidRow(
+#' # Box with textOutput
+#' box(
+#' title = "Status summary",
+#' background = "green",
+#' width = 4,
+#' textOutput("status")
+#' ),
+#'
+#' # Box with HTML output, when finer control over appearance is needed
+#' box(
+#' title = "Status summary 2",
+#' width = 4,
+#' background = "red",
+#' uiOutput("status2")
+#' ),
+#'
+#' box(
+#' width = 4,
+#' background = "light-blue",
+#' p("This is content. The background color is set to light-blue")
+#' )
+#' )
+#' )
+#'
+#' server <- function(input, output) {
+#' output$orderNum <- renderText({
+#' prettyNum(input$orders, big.mark=",")
+#' })
+#'
+#' output$orderNum2 <- renderText({
+#' prettyNum(input$orders, big.mark=",")
+#' })
+#'
+#' output$progress <- renderUI({
+#' tagList(input$progress, tags$sup(style="font-size: 20px", "%"))
+#' })
+#'
+#' output$progress2 <- renderUI({
+#' paste0(input$progress, "%")
+#' })
+#'
+#' output$status <- renderText({
+#' paste0("There are ", input$orders,
+#' " orders, and so the current progress is ", input$progress, "%.")
+#' })
+#'
+#' output$status2 <- renderUI({
+#' iconName <- switch(input$progress,
+#' "100" = "ok",
+#' "0" = "remove",
+#' "road"
+#' )
+#' p("Current status is: ", icon(iconName, lib = "glyphicon"))
+#' })
+#'
+#'
+#' output$plot <- renderPlot({
+#' hist(rnorm(input$orders))
+#' })
+#' }
+#'
+#' shinyApp(
+#' ui = dashboardPage(
+#' dashboardHeader(),
+#' dashboardSidebar(),
+#' body
+#' ),
+#' server = server
+#' )
+#' }
+#' @export
+box <- function(..., title = NULL, footer = NULL, status = NULL,
+ solidHeader = FALSE, background = NULL, width = 6,
+ height = NULL, collapsible = FALSE, collapsed = FALSE) {
+
+ boxClass <- "box"
+ if (solidHeader || !is.null(background)) {
+ boxClass <- paste(boxClass, "box-solid")
+ }
+ if (!is.null(status)) {
+ validateStatus(status)
+ boxClass <- paste0(boxClass, " box-", status)
+ }
+ if (collapsible && collapsed) {
+ boxClass <- paste(boxClass, "collapsed-box")
+ }
+ if (!is.null(background)) {
+ validateColor(background)
+ boxClass <- paste0(boxClass, " bg-", background)
+ }
+
+ style <- NULL
+ if (!is.null(height)) {
+ style <- paste0("height: ", validateCssUnit(height))
+ }
+
+ titleTag <- NULL
+ if (!is.null(title)) {
+ titleTag <- h3(class = "box-title", title)
+ }
+
+ collapseTag <- NULL
+ if (collapsible) {
+ buttonStatus <- status %OR% "default"
+
+ collapseIcon <- if (collapsed) "plus" else "minus"
+
+ collapseTag <- div(class = "box-tools pull-right",
+ tags$button(class = paste0("btn btn-box-tool"),
+ `data-widget` = "collapse",
+ shiny::icon(collapseIcon)
+ )
+ )
+ }
+
+ headerTag <- NULL
+ if (!is.null(titleTag) || !is.null(collapseTag)) {
+ headerTag <- div(class = "box-header",
+ titleTag,
+ collapseTag
+ )
+ }
+
+ div(class = if (!is.null(width)) paste0("col-sm-", width),
+ div(class = boxClass,
+ style = if (!is.null(style)) style,
+ headerTag,
+ div(class = "box-body", ...),
+ if (!is.null(footer)) div(class = "box-footer", footer)
+ )
+ )
+}
+
+#' Create a tabbed box
+#'
+#' @inheritParams shiny::tabsetPanel
+#' @inheritParams box
+#' @param title Title for the tabBox.
+#' @param side Which side of the box the tabs should be on (\code{"left"} or
+#' \code{"right"}). When \code{side="right"}, the order of tabs will be
+#' reversed.
+#'
+#' @family boxes
+#'
+#' @examples
+#' ## Only run this example in interactive R sessions
+#' if (interactive()) {
+#' library(shiny)
+#'
+#' body <- dashboardBody(
+#' fluidRow(
+#' tabBox(
+#' title = "First tabBox",
+#' # The id lets us use input$tabset1 on the server to find the current tab
+#' id = "tabset1", height = "250px",
+#' tabPanel("Tab1", "First tab content"),
+#' tabPanel("Tab2", "Tab content 2")
+#' ),
+#' tabBox(
+#' side = "right", height = "250px",
+#' selected = "Tab3",
+#' tabPanel("Tab1", "Tab content 1"),
+#' tabPanel("Tab2", "Tab content 2"),
+#' tabPanel("Tab3", "Note that when side=right, the tab order is reversed.")
+#' )
+#' ),
+#' fluidRow(
+#' tabBox(
+#' # Title can include an icon
+#' title = tagList(shiny::icon("gear"), "tabBox status"),
+#' tabPanel("Tab1",
+#' "Currently selected tab from first box:",
+#' verbatimTextOutput("tabset1Selected")
+#' ),
+#' tabPanel("Tab2", "Tab content 2")
+#' )
+#' )
+#' )
+#'
+#' shinyApp(
+#' ui = dashboardPage(dashboardHeader(title = "tabBoxes"), dashboardSidebar(), body),
+#' server = function(input, output) {
+#' # The currently selected tab from the first box
+#' output$tabset1Selected <- renderText({
+#' input$tabset1
+#' })
+#' }
+#' )
+#' }
+#' @export
+tabBox <- function(..., id = NULL, selected = NULL, title = NULL,
+ width = 6, height = NULL, side = c("left", "right"))
+{
+ side <- match.arg(side)
+
+ # The content is basically a tabsetPanel with some custom modifications
+ content <- shiny::tabsetPanel(..., id = id, selected = selected)
+ content$attribs$class <- "nav-tabs-custom"
+
+ # Set height
+ if (!is.null(height)) {
+ content <- tagAppendAttributes(content,
+ style = paste0("height: ", validateCssUnit(height))
+ )
+ }
+
+ # Move tabs to right side if needed
+ if (side == "right") {
+ content$children[[1]] <- tagAppendAttributes(content$children[[1]],
+ class = "pull-right"
+ )
+ }
+
+ # Add title
+ if (!is.null(title)) {
+ if (side == "left")
+ titleClass <- "pull-right"
+ else
+ titleClass <- "pull-left"
+
+ content$children[[1]] <- htmltools::tagAppendChild(content$children[[1]],
+ tags$li(class = paste("header", titleClass), title)
+ )
+ }
+
+ div(class = paste0("col-sm-", width), content)
+}
diff --git a/R/dashboardBody.R b/R/dashboardBody.R
new file mode 100644
index 0000000..c57edd2
--- /dev/null
+++ b/R/dashboardBody.R
@@ -0,0 +1,17 @@
+#' The main body of a dashboard page.
+#'
+#' The main body typically contains \code{\link{box}}es. Another common use
+#' pattern is for the main body to contain \code{\link{tabItems}}.
+#'
+#' @param ... Items to put in the dashboard body.
+#'
+#' @seealso \code{\link{tabItems}}, \code{\link{box}}, \code{\link{valueBox}}.
+#'
+#' @export
+dashboardBody <- function(...) {
+ div(class = "content-wrapper",
+ tags$section(class = "content",
+ ...
+ )
+ )
+}
diff --git a/R/dashboardHeader.R b/R/dashboardHeader.R
new file mode 100644
index 0000000..80dbbbb
--- /dev/null
+++ b/R/dashboardHeader.R
@@ -0,0 +1,314 @@
+#' Create a header for a dashboard page
+#'
+#' A dashboard header can be left blank, or it can include dropdown menu items
+#' on the right side.
+#'
+#' @param title An optional title to show in the header bar.. By default, this
+#' will also be used as the title shown in the browser's title bar. If you
+#' want that to be different from the text in the dashboard header bar, set
+#' the \code{title} in \code{\link{dashboardPage}}.
+#' @param titleWidth The width of the title area. This must either be a number
+#' which specifies the width in pixels, or a string that specifies the width
+#' in CSS units.
+#' @param disable If \code{TRUE}, don't display the header bar.
+#' @param ... Items to put in the header. Should be \code{\link{dropdownMenu}}s.
+#' @param .list An optional list containing items to put in the header. Same as
+#' the \code{...} arguments, but in list format. This can be useful when
+#' working with programmatically generated items.
+#'
+#' @seealso \code{\link{dropdownMenu}}
+#'
+#' @examples
+#' ## Only run this example in interactive R sessions
+#' if (interactive()) {
+#' library(shiny)
+#'
+#' # A dashboard header with 3 dropdown menus
+#' header <- dashboardHeader(
+#' title = "Dashboard Demo",
+#'
+#' # Dropdown menu for messages
+#' dropdownMenu(type = "messages", badgeStatus = "success",
+#' messageItem("Support Team",
+#' "This is the content of a message.",
+#' time = "5 mins"
+#' ),
+#' messageItem("Support Team",
+#' "This is the content of another message.",
+#' time = "2 hours"
+#' ),
+#' messageItem("New User",
+#' "Can I get some help?",
+#' time = "Today"
+#' )
+#' ),
+#'
+#' # Dropdown menu for notifications
+#' dropdownMenu(type = "notifications", badgeStatus = "warning",
+#' notificationItem(icon = icon("users"), status = "info",
+#' "5 new members joined today"
+#' ),
+#' notificationItem(icon = icon("warning"), status = "danger",
+#' "Resource usage near limit."
+#' ),
+#' notificationItem(icon = icon("shopping-cart", lib = "glyphicon"),
+#' status = "success", "25 sales made"
+#' ),
+#' notificationItem(icon = icon("user", lib = "glyphicon"),
+#' status = "danger", "You changed your username"
+#' )
+#' ),
+#'
+#' # Dropdown menu for tasks, with progress bar
+#' dropdownMenu(type = "tasks", badgeStatus = "danger",
+#' taskItem(value = 20, color = "aqua",
+#' "Refactor code"
+#' ),
+#' taskItem(value = 40, color = "green",
+#' "Design new layout"
+#' ),
+#' taskItem(value = 60, color = "yellow",
+#' "Another task"
+#' ),
+#' taskItem(value = 80, color = "red",
+#' "Write documentation"
+#' )
+#' )
+#' )
+#'
+#' shinyApp(
+#' ui = dashboardPage(
+#' header,
+#' dashboardSidebar(),
+#' dashboardBody()
+#' ),
+#' server = function(input, output) { }
+#' )
+#' }
+#' @export
+dashboardHeader <- function(..., title = NULL, titleWidth = NULL, disable = FALSE, .list = NULL) {
+ items <- c(list(...), .list)
+ lapply(items, tagAssert, type = "li", class = "dropdown")
+
+ titleWidth <- validateCssUnit(titleWidth)
+
+ # Set up custom CSS for custom width.
+ custom_css <- NULL
+ if (!is.null(titleWidth)) {
+ # This CSS is derived from the header-related instances of '230px' (the
+ # default sidebar width) from inst/AdminLTE/AdminLTE.css. One change is that
+ # instead making changes to the global settings, we've put them in a media
+ # query (min-width: 768px), so that it won't override other media queries
+ # (like max-width: 767px) that work for narrower screens.
+ custom_css <- tags$head(tags$style(HTML(gsub("_WIDTH_", titleWidth, fixed = TRUE, '
+ @media (min-width: 768px) {
+ .main-header > .navbar {
+ margin-left: _WIDTH_;
+ }
+ .main-header .logo {
+ width: _WIDTH_;
+ }
+ }
+ '))))
+ }
+
+ tags$header(class = "main-header",
+ custom_css,
+ style = if (disable) "display: none;",
+ span(class = "logo", title),
+ tags$nav(class = "navbar navbar-static-top", role = "navigation",
+ # Embed hidden icon so that we get the font-awesome dependency
+ span(shiny::icon("bars"), style = "display:none;"),
+ # Sidebar toggle button
+ a(href="#", class="sidebar-toggle", `data-toggle`="offcanvas",
+ role="button",
+ span(class="sr-only", "Toggle navigation")
+ ),
+ div(class = "navbar-custom-menu",
+ tags$ul(class = "nav navbar-nav",
+ items
+ )
+ )
+ )
+ )
+}
+
+
+#' Create a dropdown menu to place in a dashboard header
+#'
+#' @param type The type of menu. Should be one of "messages", "notifications",
+#' "tasks".
+#' @param badgeStatus The status of the badge which displays the number of items
+#' in the menu. This determines the badge's color. Valid statuses are listed
+#' in \link{validStatuses}. A value of \code{NULL} means to not display a
+#' badge.
+#' @param ... Items to put in the menu. Typically, message menus should contain
+#' \code{\link{messageItem}}s, notification menus should contain
+#' \code{\link{notificationItem}}s, and task menus should contain
+#' \code{\link{taskItem}}s.
+#' @param icon An icon to display in the header. By default, the icon is
+#' automatically selected depending on \code{type}, but it can be overriden
+#' with this argument.
+#' @param headerText An optional text argument used for the header of the
+#' dropdown menu (this is only visible when the menu is expanded). If none is
+#' provided by the user, the default is "You have \code{x} messages," where
+#' \code{x} is the number of items in the menu (if the \code{type} is
+#' specified to be "notifications" or "tasks," the default text shows "You
+#' have \code{x} notifications" or "You have \code{x} tasks," respectively).
+#' @param .list An optional list containing items to put in the menu Same as the
+#' \code{...} arguments, but in list format. This can be useful when working
+#' with programmatically generated items.
+#'
+#' @seealso \code{\link{dashboardHeader}} for example usage.
+#'
+#' @export
+dropdownMenu <- function(...,
+ type = c("messages", "notifications", "tasks"),
+ badgeStatus = "primary", icon = NULL, headerText = NULL,
+ .list = NULL)
+{
+ type <- match.arg(type)
+ if (!is.null(badgeStatus)) validateStatus(badgeStatus)
+ items <- c(list(...), .list)
+
+ # Make sure the items are li tags
+ lapply(items, tagAssert, type = "li")
+
+ dropdownClass <- paste0("dropdown ", type, "-menu")
+
+ if (is.null(icon)) {
+ icon <- switch(type,
+ messages = shiny::icon("envelope"),
+ notifications = shiny::icon("warning"),
+ tasks = shiny::icon("tasks")
+ )
+ }
+
+ numItems <- length(items)
+ if (is.null(badgeStatus)) {
+ badge <- NULL
+ } else {
+ badge <- span(class = paste0("label label-", badgeStatus), numItems)
+ }
+
+ if (is.null(headerText)) {
+ headerText <- paste("You have", numItems, type)
+ }
+
+ tags$li(class = dropdownClass,
+ a(href = "#", class = "dropdown-toggle", `data-toggle` = "dropdown",
+ icon,
+ badge
+ ),
+ tags$ul(class = "dropdown-menu",
+ tags$li(class = "header", headerText),
+ tags$li(
+ tags$ul(class = "menu",
+ items
+ )
+ )
+ # TODO: This would need to be added to the outer ul
+ # tags$li(class = "footer", a(href="#", "View all"))
+ )
+ )
+
+}
+
+
+
+#' Create a message item to place in a dropdown message menu
+#'
+#' @param from Who the message is from.
+#' @param message Text of the message.
+#' @param icon An icon tag, created by \code{\link[shiny]{icon}}.
+#' @param time String representing the time the message was sent. Any string may
+#' be used. For example, it could be a relative date/time like "5 minutes",
+#' "today", or "12:30pm yesterday", or an absolute time, like "2014-12-01 13:45".
+#' If NULL, no time will be displayed.
+#' @param href An optional URL to link to.
+#'
+#' @family menu items
+#' @seealso \code{\link{dashboardHeader}} for example usage.
+#' @export
+messageItem <- function(from, message, icon = shiny::icon("user"), time = NULL,
+ href = NULL)
+{
+ tagAssert(icon, type = "i")
+ if (is.null(href)) href <- "#"
+
+ tags$li(
+ a(href = href,
+ icon,
+ h4(
+ from,
+ if (!is.null(time)) tags$small(shiny::icon("clock-o"), time)
+ ),
+ p(message)
+ )
+ )
+}
+
+
+#' Create a notification item to place in a dropdown notification menu
+#'
+#' @param text The notification text.
+#' @param icon An icon tag, created by \code{\link[shiny]{icon}}.
+#' @param status The status of the item This determines the item's background
+#' color. Valid statuses are listed in \link{validStatuses}.
+#' @param href An optional URL to link to.
+#'
+#' @family menu items
+#' @seealso \code{\link{dashboardHeader}} for example usage.
+#' @export
+notificationItem <- function(text, icon = shiny::icon("warning"),
+ status = "success", href = NULL)
+{
+ tagAssert(icon, type = "i")
+ validateStatus(status)
+ if (is.null(href)) href <- "#"
+
+ # Add the status as another HTML class to the icon
+ icon <- tagAppendAttributes(icon, class = paste0("text-", status))
+
+ tags$li(
+ a(href = href, icon, text)
+ )
+}
+
+
+#' Create a task item to place in a dropdown task menu
+#'
+#' @param text The task text.
+#' @param value A percent value to use for the bar.
+#' @param color A color for the bar. Valid colors are listed in
+#' \link{validColors}.
+#' @param href An optional URL to link to.
+#'
+#' @family menu items
+#' @seealso \code{\link{dashboardHeader}} for example usage.
+#' @export
+taskItem <- function(text, value = 0, color = "aqua", href = NULL) {
+ validateColor(color)
+ if (is.null(href)) href <- "#"
+
+ tags$li(
+ a(href = href,
+ h3(text,
+ tags$small(class = "pull-right", paste0(value, "%"))
+ ),
+ div(class = "progress xs",
+ div(
+ class = paste0("progress-bar progress-bar-", color),
+ style = paste0("width: ", value, "%"),
+ role = "progressbar",
+ `aria-valuenow` = value,
+ `aria-valuemin` = "0",
+ `aria-valuemax` = "100",
+ span(class = "sr-only", paste0(value, "% complete"))
+ )
+ )
+ )
+ )
+}
+
+
diff --git a/R/dashboardPage.R b/R/dashboardPage.R
new file mode 100644
index 0000000..e35c9ec
--- /dev/null
+++ b/R/dashboardPage.R
@@ -0,0 +1,73 @@
+#' Dashboard page
+#'
+#' This creates a dashboard page for use in a Shiny app.
+#'
+#' @param header A header created by \code{dashboardHeader}.
+#' @param sidebar A sidebar created by \code{dashboardSidebar}.
+#' @param body A body created by \code{dashboardBody}.
+#' @param title A title to display in the browser's title bar. If no value is
+#' provided, it will try to extract the title from the \code{dashboardHeader}.
+#' @param skin A color theme. One of \code{"blue"}, \code{"black"},
+#' \code{"purple"}, \code{"green"}, \code{"red"}, or \code{"yellow"}.
+#'
+#' @seealso \code{\link{dashboardHeader}}, \code{\link{dashboardSidebar}},
+#' \code{\link{dashboardBody}}.
+#' @examples
+#' ## Only run this example in interactive R sessions
+#' if (interactive()) {
+#' # Basic dashboard page template
+#' library(shiny)
+#' shinyApp(
+#' ui = dashboardPage(
+#' dashboardHeader(),
+#' dashboardSidebar(),
+#' dashboardBody(),
+#' title = "Dashboard example"
+#' ),
+#' server = function(input, output) { }
+#' )
+#' }
+#' @export
+dashboardPage <- function(header, sidebar, body, title = NULL,
+ skin = c("blue", "black", "purple", "green", "red", "yellow")) {
+
+ tagAssert(header, type = "header", class = "main-header")
+ tagAssert(sidebar, type = "aside", class = "main-sidebar")
+ tagAssert(body, type = "div", class = "content-wrapper")
+ skin <- match.arg(skin)
+
+ extractTitle <- function(header) {
+ x <- header$children[[2]]
+ if (x$name == "span" &&
+ !is.null(x$attribs$class) &&
+ x$attribs$class == "logo" &&
+ length(x$children) != 0)
+ {
+ x$children[[1]]
+ } else {
+ ""
+ }
+ }
+
+ title <- title %OR% extractTitle(header)
+
+ content <- div(class = "wrapper",
+ header,
+ sidebar,
+ body
+ )
+
+ # if the sidebar has the attribute `data-collapsed = "true"`, it means that
+ # the user set the `collapsed` argument of `dashboardSidebar` to TRUE
+ collapsed <- findAttribute(sidebar, "data-collapsed", "true")
+
+ addDeps(
+ tags$body(
+ # the "sidebar-collapse" class on the body means that the sidebar should
+ # the collapsed (AdminLTE code)
+ class = paste0("skin-", skin, if (collapsed) " sidebar-collapse"),
+ style = "min-height: 611px;",
+ shiny::bootstrapPage(content, title = title)
+ )
+ )
+}
diff --git a/R/dashboardSidebar.R b/R/dashboardSidebar.R
new file mode 100644
index 0000000..1f6be3f
--- /dev/null
+++ b/R/dashboardSidebar.R
@@ -0,0 +1,487 @@
+#' Create a dashboard sidebar.
+#'
+#' A dashboard sidebar typically contains a \code{\link{sidebarMenu}}, although
+#' it may also contain a \code{\link{sidebarSearchForm}}, or other Shiny inputs.
+#'
+#' @param ... Items to put in the sidebar.
+#' @param disable If \code{TRUE}, the sidebar will be disabled.
+#' @param width The width of the sidebar. This must either be a number which
+#' specifies the width in pixels, or a string that specifies the width in CSS
+#' units.
+#' @param collapsed If \code{TRUE}, the sidebar will be collapsed on app startup.
+#'
+#' @seealso \code{\link{sidebarMenu}}
+#'
+#' @examples
+#' ## Only run this example in interactive R sessions
+#' if (interactive()) {
+#' header <- dashboardHeader()
+#'
+#' sidebar <- dashboardSidebar(
+#' sidebarUserPanel("User Name",
+#' subtitle = a(href = "#", icon("circle", class = "text-success"), "Online"),
+#' # Image file should be in www/ subdir
+#' image = "userimage.png"
+#' ),
+#' sidebarSearchForm(label = "Enter a number", "searchText", "searchButton"),
+#' sidebarMenu(
+#' # Setting id makes input$tabs give the tabName of currently-selected tab
+#' id = "tabs",
+#' menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
+#' menuItem("Widgets", icon = icon("th"), tabName = "widgets", badgeLabel = "new",
+#' badgeColor = "green"),
+#' menuItem("Charts", icon = icon("bar-chart-o"),
+#' menuSubItem("Sub-item 1", tabName = "subitem1"),
+#' menuSubItem("Sub-item 2", tabName = "subitem2")
+#' )
+#' )
+#' )
+#'
+#' body <- dashboardBody(
+#' tabItems(
+#' tabItem("dashboard",
+#' div(p("Dashboard tab content"))
+#' ),
+#' tabItem("widgets",
+#' "Widgets tab content"
+#' ),
+#' tabItem("subitem1",
+#' "Sub-item 1 tab content"
+#' ),
+#' tabItem("subitem2",
+#' "Sub-item 2 tab content"
+#' )
+#' )
+#' )
+#'
+#' shinyApp(
+#' ui = dashboardPage(header, sidebar, body),
+#' server = function(input, output) { }
+#' )
+#' }
+#' @export
+dashboardSidebar <- function(..., disable = FALSE, width = NULL, collapsed = FALSE) {
+ width <- validateCssUnit(width)
+
+ # Set up custom CSS for custom width
+ custom_css <- NULL
+ if (!is.null(width)) {
+ # This CSS is derived from the sidebar-related instances of '230px' (the
+ # default sidebar width) from inst/AdminLTE/AdminLTE.css. One difference is
+ # that instead making changes to the global settings, we've put them in a
+ # media query (min-width: 768px), so that it won't override other media
+ # queries (like max-width: 767px) that work for narrower screens.
+ custom_css <- tags$head(tags$style(HTML(gsub("_WIDTH_", width, fixed = TRUE, '
+ .main-sidebar, .left-side {
+ width: _WIDTH_;
+ }
+ @media (min-width: 768px) {
+ .content-wrapper,
+ .right-side,
+ .main-footer {
+ margin-left: _WIDTH_;
+ }
+ .main-sidebar,
+ .left-side {
+ width: _WIDTH_;
+ }
+ }
+ @media (max-width: 767px) {
+ .sidebar-open .content-wrapper,
+ .sidebar-open .right-side,
+ .sidebar-open .main-footer {
+ -webkit-transform: translate(_WIDTH_, 0);
+ -ms-transform: translate(_WIDTH_, 0);
+ -o-transform: translate(_WIDTH_, 0);
+ transform: translate(_WIDTH_, 0);
+ }
+ }
+ @media (max-width: 767px) {
+ .main-sidebar,
+ .left-side {
+ -webkit-transform: translate(-_WIDTH_, 0);
+ -ms-transform: translate(-_WIDTH_, 0);
+ -o-transform: translate(-_WIDTH_, 0);
+ transform: translate(-_WIDTH_, 0);
+ }
+ }
+ @media (min-width: 768px) {
+ .sidebar-collapse .main-sidebar,
+ .sidebar-collapse .left-side {
+ -webkit-transform: translate(-_WIDTH_, 0);
+ -ms-transform: translate(-_WIDTH_, 0);
+ -o-transform: translate(-_WIDTH_, 0);
+ transform: translate(-_WIDTH_, 0);
+ }
+ }
+ '))))
+ }
+
+ # If we're restoring a bookmarked app, this holds the value of whether or not the
+ # sidebar was collapsed. If this is not the case, the default is whatever the user
+ # specified in the `collapsed` argument.
+ dataValue <- shiny::restoreInput(id = "sidebarCollapsed", default = collapsed)
+ if (disable) dataValue <- TRUE # this is a workaround to fix #209
+ dataValueString <- if (dataValue) "true" else "false"
+
+ # The expanded/collapsed state of the sidebar is actually set by adding a
+ # class to the body (not to the sidebar). However, it makes sense for the
+ # `collapsed` argument to belong in this function. So this information is
+ # just passed through (as the `data-collapsed` attribute) to the
+ # `dashboardPage()` function
+ tags$aside(
+ class = "main-sidebar", `data-collapsed` = dataValueString, custom_css,
+ tags$section(
+ class = "sidebar",
+ `data-disable` = if (disable) 1 else NULL,
+ list(...)
+ )
+ )
+}
+
+#' A panel displaying user information in a sidebar
+#'
+#' @param name Name of the user.
+#' @param subtitle Text or HTML to be shown below the name.
+#' @param image A filename or URL to use for an image of the person. If it is a
+#' local file, the image should be contained under the www/ subdirectory of
+#' the application.
+#'
+#' @family sidebar items
+#'
+#' @seealso \code{\link{dashboardSidebar}} for example usage.
+#'
+#' @export
+sidebarUserPanel <- function(name, subtitle = NULL, image = NULL) {
+ div(class = "user-panel",
+ if (!is.null(image)) {
+ div(class = "pull-left image",
+ img(src = image, class = "img-circle", alt = "User Image")
+ )
+ },
+ div(class = "pull-left info",
+ # If no image, move text to the left: by overriding default left:55px
+ style = if (is.null(image)) "left: 4px",
+ p(name),
+ subtitle
+ )
+ )
+}
+
+#' Create a search form to place in a sidebar
+#'
+#' A search form consists of a text input field and a search button.
+#'
+#' @param textId Shiny input ID for the text input box.
+#' @param buttonId Shiny input ID for the search button (which functions like an
+#' \code{\link[shiny]{actionButton}}).
+#' @param label Text label to display inside the search box.
+#' @param icon An icon tag, created by \code{\link[shiny]{icon}}.
+#'
+#' @family sidebar items
+#'
+#' @seealso \code{\link{dashboardSidebar}} for example usage.
+#'
+#' @export
+sidebarSearchForm <- function(textId, buttonId, label = "Search...",
+ icon = shiny::icon("search")) {
+ tags$form(class = "sidebar-form",
+ div(class = "input-group",
+ tags$input(id = textId, type = "text", class = "form-control",
+ placeholder = label
+ ),
+ span(class = "input-group-btn",
+ tags$button(id = buttonId, type = "button",
+ class = "btn btn-flat action-button",
+ icon
+ )
+ )
+ )
+ )
+}
+
+#' Create a dashboard sidebar menu and menu items.
+#'
+#' A \code{dashboardSidebar} can contain a \code{sidebarMenu}. A
+#' \code{sidebarMenu} contains \code{menuItem}s, and they can in turn contain
+#' \code{menuSubItem}s.
+#'
+#' Menu items (and similarly, sub-items) should have a value for either
+#' \code{href} or \code{tabName}; otherwise the item would do nothing. If it has
+#' a value for \code{href}, then the item will simply be a link to that value.
+#'
+#' If a \code{menuItem} has a non-NULL \code{tabName}, then the \code{menuItem}
+#' will behave like a tab -- in other words, clicking on the \code{menuItem}
+#' will bring a corresponding \code{tabItem} to the front, similar to a
+#' \code{\link[shiny]{tabPanel}}. One important difference between a
+#' \code{menuItem} and a \code{tabPanel} is that, for a \code{menuItem}, you
+#' must also supply a corresponding \code{tabItem} with the same value for
+#' \code{tabName}, whereas for a \code{tabPanel}, no \code{tabName} is needed.
+#' (This is because the structure of a \code{tabPanel} is such that the tab name
+#' can be automatically generated.) Sub-items are also able to activate
+#' \code{tabItem}s.
+#'
+#' Menu items (but not sub-items) also may have an optional badge. A badge is a
+#' colored oval containing text.
+#'
+#' @param text Text to show for the menu item.
+#' @param id For \code{sidebarMenu}, if \code{id} is present, this id will be
+#' used for a Shiny input value, and it will report which tab is selected. For
+#' example, if \code{id="tabs"}, then \code{input$tabs} will be the
+#' \code{tabName} of the currently-selected tab. If you want to be able to
+#' bookmark and restore the selected tab, an \code{id} is required.
+#' @param icon An icon tag, created by \code{\link[shiny]{icon}}. If
+#' \code{NULL}, don't display an icon.
+#' @param badgeLabel A label for an optional badge. Usually a number or a short
+#' word like "new".
+#' @param badgeColor A color for the badge. Valid colors are listed in
+#' \link{validColors}.
+#' @param href An link address. Not compatible with \code{tabName}.
+#' @param tabName The name of a tab that this menu item will activate. Not
+#' compatible with \code{href}.
+#' @param newtab If \code{href} is supplied, should the link open in a new
+#' browser tab?
+#' @param selected If \code{TRUE}, this \code{menuItem} or \code{menuSubItem}
+#' will start selected. If no item have \code{selected=TRUE}, then the first
+#' \code{menuItem} will start selected.
+#' @param expandedName A unique name given to each \code{menuItem} that serves
+#' to indicate which one (if any) is currently expanded. (This is only applicable
+#' to \code{menuItem}s that have children and it is mostly only useful for
+#' bookmarking state.)
+#' @param startExpanded Should this \code{menuItem} be expanded on app startup?
+#' (This is only applicable to \code{menuItem}s that have children, and only
+#' one of these can be expanded at any given time).
+#' @param ... For menu items, this may consist of \code{\link{menuSubItem}}s.
+#' @param .list An optional list containing items to put in the menu Same as the
+#' \code{...} arguments, but in list format. This can be useful when working
+#' with programmatically generated items.
+#'
+#' @family sidebar items
+#'
+#' @seealso \code{\link{dashboardSidebar}} for example usage. For
+#' dynamically-generated sidebar menus, see \code{\link{renderMenu}} and
+#' \code{\link{sidebarMenuOutput}}.
+#'
+#' @export
+sidebarMenu <- function(..., id = NULL, .list = NULL) {
+ items <- c(list(...), .list)
+
+ # Restore a selected tab from bookmarked state. Bookmarking was added in Shiny
+ # 0.14.
+ if (utils::packageVersion("shiny") >= "0.14" && !is.null(id)) {
+ selectedTabName <- shiny::restoreInput(id = id, default = NULL)
+ if (!is.null(selectedTabName)) {
+ # Find the menuItem or menuSubItem with a `tabname` that matches
+ # `selectedTab`. Then set `data-start-selected` to 1 for that tab and 0
+ # for all others.
+
+ # Given a menuItem and a logical value for `selected`, set the
+ # data-start-selected attribute to the appropriate value (1 or 0).
+ selectItem <- function(item, selected) {
+
+ # in the cases that the children of menuItems are NOT menuSubItems
+ if (is.atomic(item) || length(item$children) == 0) {
+ return(item)
+ }
+
+ if (selected) value <- 1
+ else value <- NULL
+
+ # Try to find the child <a data-toggle="tab"> tag and then set
+ # data-start-selected="1". The []<- assignment is to preserve
+ # attributes.
+ item$children[] <- lapply(item$children, function(child) {
+
+ # Find the appropriate <a> child
+ if (tagMatches(child, name = "a", `data-toggle` = "tab")) {
+ child$attribs[["data-start-selected"]] <- value
+ }
+
+ child
+ })
+
+ item
+ }
+
+ # Given a menuItem and a tabName (string), return TRUE if the menuItem has
+ # that tabName, FALSE otherwise.
+ itemHasTabName <- function(item, tabName) {
+ # Must be a <li> tag
+ if (!tagMatches(item, name = "li")) {
+ return(FALSE)
+ }
+
+ # Look for an <a> child with data-value=tabName
+ found <- FALSE
+ lapply(item$children, function(child) {
+ if (tagMatches(child, name = "a", `data-value` = tabName)) {
+ found <<- TRUE
+ }
+ })
+
+ found
+ }
+
+ # Actually do the work of marking selected tabs and unselected ones.
+ items <- lapply(items, function(item) {
+ if (tagMatches(item, name = "li", class = "treeview")) {
+ # Search in menuSubItems
+ item$children[] <- lapply(item$children[], function(subItem) {
+
+ if (tagMatches(subItem, name = "ul", class = "treeview-menu")) {
+ subItem$children[] <- lapply(subItem$children, function(subSubItem) {
+ selected <- itemHasTabName(subSubItem, selectedTabName)
+ selectItem(subSubItem, selected)
+ })
+ }
+ subItem
+ })
+
+ } else {
+ # Regular menuItems
+ selected <- itemHasTabName(item, selectedTabName)
+ item <- selectItem(item, selected)
+ }
+
+ item
+ })
+ }
+ # This is a 0 height div, whose only purpose is to hold the tabName of the currently
+ # selected menuItem in its `data-value` attribute. This is the DOM element that is
+ # bound to tabItemInputBinding in the JS side.
+ items[[length(items) + 1]] <- div(id = id,
+ class = "sidebarMenuSelectedTabItem", `data-value` = selectedTabName %OR% "null")
+ }
+
+ # Use do.call so that we don't add an extra list layer to the children of the
+ # ul tag. This makes it a little easier to traverse the tree to search for
+ # selected items to restore.
+ do.call(tags$ul, c(class = "sidebar-menu", items))
+}
+
+#' @rdname sidebarMenu
+#' @export
+menuItem <- function(text, ..., icon = NULL, badgeLabel = NULL, badgeColor = "green",
+ tabName = NULL, href = NULL, newtab = TRUE, selected = NULL,
+ expandedName = as.character(gsub("[[:space:]]", "", text)),
+ startExpanded = FALSE) {
+ subItems <- list(...)
+
+ if (!is.null(icon)) tagAssert(icon, type = "i")
+ if (!is.null(href) + !is.null(tabName) + (length(subItems) > 0) != 1 ) {
+ stop("Must have either href, tabName, or sub-items (contained in ...).")
+ }
+
+ if (!is.null(badgeLabel) && length(subItems) != 0) {
+ stop("Can't have both badge and subItems")
+ }
+ validateColor(badgeColor)
+
+ # If there's a tabName, set up the correct href and <a> target
+ isTabItem <- FALSE
+ target <- NULL
+ if (!is.null(tabName)) {
+ validateTabName(tabName)
+ isTabItem <- TRUE
+ href <- paste0("#shiny-tab-", tabName)
+ } else if (is.null(href)) {
+ href <- "#"
+ } else {
+ # If supplied href, set up <a> tag's target
+ if (newtab)
+ target <- "_blank"
+ }
+
+ # Generate badge if needed
+ if (!is.null(badgeLabel)) {
+ badgeTag <- tags$small(
+ class = paste0("badge pull-right bg-", badgeColor),
+ badgeLabel
+ )
+ } else {
+ badgeTag <- NULL
+ }
+
+ # If no subitems, return a pretty simple tag object
+ if (length(subItems) == 0) {
+ return(
+ tags$li(
+ a(href = href,
+ `data-toggle` = if (isTabItem) "tab",
+ `data-value` = if (!is.null(tabName)) tabName,
+ `data-start-selected` = if (isTRUE(selected)) 1 else NULL,
+ target = target,
+ icon,
+ span(text),
+ badgeTag
+ )
+ )
+ )
+ }
+
+ # If we're restoring a bookmarked app, this holds the value of what menuItem (if any)
+ # was expanded (this has be to stored separately from the selected menuItem, since
+ # these actually independent in AdminLTE). If no menuItem was expanded, `dataExpanded`
+ # is NULL. However, we want to this input to get passed on (and not dropped), so we
+ # do `%OR% ""` to assure this.
+ default <- if (startExpanded) expandedName else ""
+ dataExpanded <- shiny::restoreInput(id = "sidebarItemExpanded", default) %OR% ""
+
+ # If `dataExpanded` is not the empty string, we need to check that it is eqaul to the
+ # this menuItem's `expandedName``
+ isExpanded <- nzchar(dataExpanded) && (dataExpanded == expandedName)
+
+ tags$li(class = "treeview",
+ a(href = href,
+ icon,
+ span(text),
+ shiny::icon("angle-left", class = "pull-right")
+ ),
+ # Use do.call so that we don't add an extra list layer to the children of the
+ # ul tag. This makes it a little easier to traverse the tree to search for
+ # selected items to restore.
+ do.call(tags$ul, c(
+ class = paste0("treeview-menu", if (isExpanded) " menu-open" else ""),
+ style = paste0("display: ", if (isExpanded) "block;" else "none;"),
+ `data-expanded` = expandedName,
+ subItems))
+ )
+}
+
+#' @rdname sidebarMenu
+#' @export
+menuSubItem <- function(text, tabName = NULL, href = NULL, newtab = TRUE,
+ icon = shiny::icon("angle-double-right"), selected = NULL)
+{
+
+ if (!is.null(href) && !is.null(tabName)) {
+ stop("Can't specify both href and tabName")
+ }
+
+ # If there's a tabName, set up the correct href
+ isTabItem <- FALSE
+ target <- NULL
+ if (!is.null(tabName)) {
+ validateTabName(tabName)
+ isTabItem <- TRUE
+ href <- paste0("#shiny-tab-", tabName)
+ } else if (is.null(href)) {
+ href <- "#"
+ } else {
+ # If supplied href, set up <a> tag's target
+ if (newtab)
+ target <- "_blank"
+ }
+
+
+ tags$li(
+ a(href = href,
+ `data-toggle` = if (isTabItem) "tab",
+ `data-value` = if (!is.null(tabName)) tabName,
+ `data-start-selected` = if (isTRUE(selected)) 1 else NULL,
+ target = target,
+ icon,
+ text
+ )
+ )
+}
diff --git a/R/deps.R b/R/deps.R
new file mode 100644
index 0000000..8376d43
--- /dev/null
+++ b/R/deps.R
@@ -0,0 +1,39 @@
+# Add an html dependency, without overwriting existing ones
+appendDependencies <- function(x, value) {
+ if (inherits(value, "html_dependency"))
+ value <- list(value)
+
+ old <- attr(x, "html_dependencies", TRUE)
+
+ htmlDependencies(x) <- c(old, value)
+ x
+}
+
+# Add dashboard dependencies to a tag object
+addDeps <- function(x) {
+ if (getOption("shiny.minified", TRUE)) {
+ adminLTE_js <- "app.min.js"
+ shinydashboard_js <- "shinydashboard.min.js"
+ adminLTE_css <- c("AdminLTE.min.css", "_all-skins.min.css")
+ } else {
+ adminLTE_js <- "app.js"
+ shinydashboard_js <- "shinydashboard.js"
+ adminLTE_css <- c("AdminLTE.css", "_all-skins.css")
+ }
+
+ dashboardDeps <- list(
+ htmlDependency("AdminLTE", "2.0.6",
+ c(file = system.file("AdminLTE", package = "shinydashboard")),
+ script = adminLTE_js,
+ stylesheet = adminLTE_css
+ ),
+ htmlDependency("shinydashboard",
+ as.character(utils::packageVersion("shinydashboard")),
+ c(file = system.file(package = "shinydashboard")),
+ script = shinydashboard_js,
+ stylesheet = "shinydashboard.css"
+ )
+ )
+
+ appendDependencies(x, dashboardDeps)
+}
diff --git a/R/menuOutput.R b/R/menuOutput.R
new file mode 100644
index 0000000..ceea76d
--- /dev/null
+++ b/R/menuOutput.R
@@ -0,0 +1,159 @@
+#' Create a dynamic menu output for shinydashboard (client side)
+#'
+#' This can be used as a placeholder for dynamically-generated
+#' \code{\link{dropdownMenu}}, \code{\link{notificationItem}},
+#' \code{\link{messageItem}}, \code{\link{taskItem}} \code{\link{sidebarMenu}},
+#' or \code{\link{menuItem}}. If called directly, you must make sure to supply
+#' the correct type of tag. It is simpler to use the wrapper functions if
+#' present; for example, \code{\link{dropdownMenuOutput}} and
+#' \code{\link{sidebarMenuOutput}}.
+#'
+#' @param outputId Output variable name.
+#' @param tag A tag function, like \code{tags$li} or \code{tags$ul}.
+#'
+#' @family menu outputs
+#' @seealso \code{\link{renderMenu}} for the corresponding server side function
+#' and examples.
+menuOutput <- function(outputId, tag = tags$li) {
+ tag(id = outputId, class = "shinydashboard-menu-output")
+}
+
+
+#' Create a dropdown menu output (client side)
+#'
+#' This is the UI-side function for creating a dynamic dropdown menu.
+#'
+#' @inheritParams menuOutput
+#' @family menu outputs
+#' @seealso \code{\link{renderMenu}} for the corresponding server-side function
+#' and examples, and \code{\link{dropdownMenu}} for the corresponding function
+#' for generating static menus.
+#' @export
+dropdownMenuOutput <- function(outputId) {
+ menuOutput(outputId = outputId, tag = tags$li)
+}
+
+
+#' Create a sidebar menu output (client side)
+#'
+#' This is the UI-side function for creating a dynamic sidebar menu.
+#'
+#' @inheritParams menuOutput
+#' @family menu outputs
+#' @seealso \code{\link{renderMenu}} for the corresponding server-side function
+#' and examples, and \code{\link{sidebarMenu}} for the corresponding function
+#' for generating static sidebar menus.
+#' @export
+sidebarMenuOutput <- function(outputId) {
+ menuOutput(outputId = outputId, tag = tags$ul)
+}
+
+#' Create a sidebar menu item output (client side)
+#'
+#' This is the UI-side function for creating a dynamic sidebar menu item.
+#'
+#' @inheritParams menuOutput
+#' @family menu outputs
+#' @seealso \code{\link{renderMenu}} for the corresponding server-side function
+#' and examples, and \code{\link{menuItem}} for the corresponding function
+#' for generating static sidebar menus.
+#' @export
+menuItemOutput <- function(outputId) {
+ menuOutput(outputId = outputId, tag = tags$li)
+}
+
+
+#' Create dynamic menu output (server side)
+#'
+#' @inheritParams shiny::renderUI
+#'
+#' @seealso \code{\link{menuOutput}} for the corresponding client side function
+#' and examples.
+#' @family menu outputs
+#' @export
+#' @examples
+#' ## Only run these examples in interactive R sessions
+#'
+#' if (interactive()) {
+#' library(shiny)
+#' # ========== Dynamic sidebarMenu ==========
+#' ui <- dashboardPage(
+#' dashboardHeader(title = "Dynamic sidebar"),
+#' dashboardSidebar(
+#' sidebarMenuOutput("menu")
+#' ),
+#' dashboardBody()
+#' )
+#'
+#' server <- function(input, output) {
+#' output$menu <- renderMenu({
+#' sidebarMenu(
+#' menuItem("Menu item", icon = icon("calendar"))
+#' )
+#' })
+#' }
+#'
+#' shinyApp(ui, server)
+#'
+#' # ========== Dynamic dropdownMenu ==========
+#' # Example message data in a data frame
+#' messageData <- data.frame(
+#' from = c("Admininstrator", "New User", "Support"),
+#' message = c(
+#' "Sales are steady this month.",
+#' "How do I register?",
+#' "The new server is ready."
+#' ),
+#' stringsAsFactors = FALSE
+#' )
+#'
+#' ui <- dashboardPage(
+#' dashboardHeader(
+#' title = "Dynamic menus",
+#' dropdownMenuOutput("messageMenu")
+#' ),
+#' dashboardSidebar(),
+#' dashboardBody(
+#' fluidRow(
+#' box(
+#' title = "Controls",
+#' sliderInput("slider", "Number of observations:", 1, 100, 50)
+#' )
+#' )
+#' )
+#' )
+#'
+#' server <- function(input, output) {
+#' output$messageMenu <- renderMenu({
+#' # Code to generate each of the messageItems here, in a list. messageData
+#' # is a data frame with two columns, 'from' and 'message'.
+#' # Also add on slider value to the message content, so that messages update.
+#' msgs <- apply(messageData, 1, function(row) {
+#' messageItem(
+#' from = row[["from"]],
+#' message = paste(row[["message"]], input$slider)
+#' )
+#' })
+#'
+#' dropdownMenu(type = "messages", .list = msgs)
+#' })
+#' }
+#'
+#' shinyApp(ui, server)
+#' }
+renderMenu <- shiny::renderUI
+
+# R CMD check thinks that shiny::renderUI has an undeclared global variable
+# called "func".
+globalVariables("func")
+
+#' Create a dropdown menu output (server side; deprecated)
+#'
+#' This is the server-side function for creating a dynamic dropdown menu.
+#'
+#' @inheritParams shiny::renderUI
+#' @export
+renderDropdownMenu <- function(expr, env = parent.frame(), quoted = FALSE) {
+ .Deprecated("renderMenu")
+ shiny::renderUI(expr, env, quoted, func = FALSE)
+}
diff --git a/R/shinydashboard-package.r b/R/shinydashboard-package.r
new file mode 100644
index 0000000..c8dc35c
--- /dev/null
+++ b/R/shinydashboard-package.r
@@ -0,0 +1,6 @@
+#' shinydashboard
+#'
+#' @name shinydashboard
+#' @import htmltools
+#' @docType package
+NULL
diff --git a/R/tabs.R b/R/tabs.R
new file mode 100644
index 0000000..bdfbd94
--- /dev/null
+++ b/R/tabs.R
@@ -0,0 +1,83 @@
+#' A container for tab items
+#'
+#' @param ... Items to put in the container. Each item should be a
+#' \code{\link{tabItem}}.
+#'
+#' @seealso \code{\link{menuItem}}, \code{\link{menuSubItem}},
+#' \code{\link{tabItem}}. See \code{\link{sidebarMenu}} for a usage example.
+#' @export
+tabItems <- function(...) {
+ lapply(list(...), tagAssert, class = "tab-pane")
+
+ div(class = "tab-content", ...)
+}
+
+#' One tab to put inside a tab items container
+#'
+#' @param tabName The name of a tab. This must correspond to the \code{tabName}
+#' of a \code{\link{menuItem}} or \code{\link{menuSubItem}}.
+#' @param ... Contents of the tab.
+#'
+#' @seealso \code{\link{menuItem}}, \code{\link{menuSubItem}},
+#' \code{\link{tabItems}}. See \code{\link{sidebarMenu}} for a usage example.
+#' @export
+tabItem <- function(tabName = NULL, ...) {
+ if (is.null(tabName))
+ stop("Need tabName")
+
+ validateTabName(tabName)
+
+ div(
+ role = "tabpanel",
+ class = "tab-pane",
+ id = paste0("shiny-tab-", tabName),
+ ...
+ )
+}
+
+#' Change the selected tab on the client
+#'
+#' This function controls the active tab of \code{\link{tabItems}} from the
+#' server. It behaves just like \code{\link[shiny]{updateTabsetPanel}}.
+#'
+#' @inheritParams shiny::updateTabsetPanel
+#' @examples
+#' ## Only run this example in interactive R sessions
+#' if (interactive()) {
+#'
+#' ui <- dashboardPage(
+#' dashboardHeader(title = "Simple tabs"),
+#' dashboardSidebar(
+#' sidebarMenu(
+#' id = "tabs",
+#' menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
+#' menuItem("Widgets", tabName = "widgets", icon = icon("th"))
+#' ),
+#' actionButton('switchtab', 'Switch tab')
+#' ),
+#' dashboardBody(
+#' tabItems(
+#' tabItem(tabName = "dashboard",
+#' h2("Dashboard tab content")
+#' ),
+#' tabItem(tabName = "widgets",
+#' h2("Widgets tab content")
+#' )
+#' )
+#' )
+#' )
+#'
+#' server <- function(input, output, session) {
+#' observeEvent(input$switchtab, {
+#' newtab <- switch(input$tabs,
+#' "dashboard" = "widgets",
+#' "widgets" = "dashboard"
+#' )
+#' updateTabItems(session, "tabs", newtab)
+#' })
+#' }
+#'
+#' shinyApp(ui, server)
+#' }
+#' @export
+updateTabItems <- shiny::updateTabsetPanel
diff --git a/R/utils.R b/R/utils.R
new file mode 100644
index 0000000..5f7563a
--- /dev/null
+++ b/R/utils.R
@@ -0,0 +1,221 @@
+#' Assert that a tag has specified properties
+#' @param tag A tag object.
+#' @param type The type of a tag, like "div", "a", "span".
+#' @param class An HTML class.
+#' @param allowUI If TRUE (the default), allow dynamic outputs generated by
+#' \code{\link[shiny]{uiOutput}} or \code{\link[shiny]{htmlOutput}}. When a
+#' dynamic output is provided, \code{tagAssert} won't try to validate the the
+#' contents.
+#' @keywords internal
+tagAssert <- function(tag, type = NULL, class = NULL, allowUI = TRUE) {
+ if (!inherits(tag, "shiny.tag")) {
+ print(tag)
+ stop("Expected an object with class 'shiny.tag'.")
+ }
+
+ # Skip dynamic output elements
+ if (allowUI &&
+ (hasCssClass(tag, "shiny-html-output") ||
+ hasCssClass(tag, "shinydashboard-menu-output"))) {
+ return()
+ }
+
+ if (!is.null(type) && tag$name != type) {
+ stop("Expected tag to be of type ", type)
+ }
+
+ if (!is.null(class)) {
+ if (is.null(tag$attribs$class)) {
+ stop("Expected tag to have class '", class, "'")
+
+ } else {
+ tagClasses <- strsplit(tag$attribs$class, " ")[[1]]
+ if (!(class %in% tagClasses)) {
+ stop("Expected tag to have class '", class, "'")
+ }
+ }
+ }
+}
+
+# Given the name of an icon, like "fa-dashboard" or "glyphicon-user",
+# return CSS classnames, like "fa fa-dashboard" or "glyphicon glyphicon-user".
+getIconClass <- function(icon) {
+ iconGroup <- sub("^((glyphicon)|(fa))-.*", "\\1", icon)
+ paste(iconGroup, icon)
+}
+
+
+# Returns TRUE if a color is a valid color defined in AdminLTE, throws error
+# otherwise.
+validateColor <- function(color) {
+ if (color %in% validColors) {
+ return(TRUE)
+ }
+
+ stop("Invalid color: ", color, ". Valid colors are: ",
+ paste(validColors, collapse = ", "), ".")
+}
+
+#' Valid colors
+#'
+#' These are valid colors for various dashboard components. Valid colors are
+#' listed below.
+#'
+#' \itemize{
+#' \item \code{red}
+#' \item \code{yellow}
+#' \item \code{aqua}
+#' \item \code{blue}
+#' \item \code{light-blue}
+#' \item \code{green}
+#' \item \code{navy}
+#' \item \code{teal}
+#' \item \code{olive}
+#' \item \code{lime}
+#' \item \code{orange}
+#' \item \code{fuchsia}
+#' \item \code{purple}
+#' \item \code{maroon}
+#' \item \code{black}
+#' }
+#'
+#' @usage NULL
+#' @format NULL
+#'
+#' @keywords internal
+validColors <- c("red", "yellow", "aqua", "blue", "light-blue", "green",
+ "navy", "teal", "olive", "lime", "orange", "fuchsia",
+ "purple", "maroon", "black")
+
+
+# Returns TRUE if a status is valid; throws error otherwise.
+validateStatus <- function(status) {
+
+ if (status %in% validStatuses) {
+ return(TRUE)
+ }
+
+ stop("Invalid status: ", status, ". Valid statuses are: ",
+ paste(validStatuses, collapse = ", "), ".")
+}
+
+
+#' Valid statuses
+#'
+#' These status strings correspond to colors as defined in Bootstrap's CSS.
+#' Although the colors can vary depending on the particular CSS selector, they
+#' generally appear as follows:
+#'
+#' \itemize{
+#' \item \code{primary} Blue (sometimes dark blue)
+#' \item \code{success} Green
+#' \item \code{info} Blue
+#' \item \code{warning} Orange
+#' \item \code{danger} Red
+#' }
+#'
+#' @usage NULL
+#' @format NULL
+#'
+#' @keywords internal
+validStatuses <- c("primary", "success", "info", "warning", "danger")
+
+
+"%OR%" <- function(a, b) if (!is.null(a)) a else b
+
+# Return TRUE if a shiny.tag object has a CSS class, FALSE otherwise.
+hasCssClass <- function(tag, class) {
+ if (is.null(tag$attribs) || is.null(tag$attribs$class))
+ return(FALSE)
+
+ classes <- strsplit(tag$attribs$class, " +")[[1]]
+ return(class %in% classes)
+}
+
+
+# Make sure a tab name is valid (there's no "." in it).
+validateTabName <- function(name) {
+ if (grepl(".", name, fixed = TRUE)) {
+ stop("tabName must not have a '.' in it.")
+ }
+}
+
+
+# This is like a==b, except that if a or b is NULL or an empty vector, it won't
+# return logical(0). If a AND b are NULL/length-0, this will return TRUE; if
+# just one of them is NULL/length-0, this will FALSE. This is for use in
+# conditionals where `if(logical(0))` would cause an error. Similar to using
+# identical(a,b), but less stringent about types: `equals(1, 1L)` is TRUE, but
+# `identical(1, 1L)` is FALSE.
+equals <- function(a, b) {
+ alen <- length(a)
+ blen <- length(b)
+ if (alen==0 && blen==0) {
+ return(TRUE)
+ }
+ if (alen > 1 || blen > 1) {
+ stop("Can only compare objects of length 0 or 1")
+ }
+ if (alen==0 || blen==0) {
+ return(FALSE)
+ }
+
+ a == b
+}
+
+
+# Return TRUE if a tag object matches a specific id, and/or tag name, and/or
+# class, and or other arbitrary tag attributes. Put the args after ... so that
+# caller must use named arguments.
+tagMatches <- function(item, ..., id = NULL, name = NULL, class = NULL) {
+ dots <- list(...)
+ if (!inherits(item, "shiny.tag")) {
+ return(FALSE)
+ }
+ if (!is.null(id) && !equals(item$attribs$id, id)) {
+ return(FALSE)
+ }
+ if (!is.null(name) && !equals(item$name, name)) {
+ return(FALSE)
+ }
+ if (!is.null(class)) {
+ if (is.null(item$attribs$class)) {
+ return(FALSE)
+ }
+ classes <- strsplit(item$attribs$class, " ")[[1]]
+ if (! class %in% classes) {
+ return(FALSE)
+ }
+ }
+
+ for (i in seq_along(dots)) {
+ arg <- dots[[i]]
+ argName <- names(dots)[[i]]
+ if (!equals(item$attribs[[argName]], arg)) {
+ return(FALSE)
+ }
+ }
+
+ TRUE
+}
+
+# This function takes a DOM element/tag object and reccurs within it until
+# it finds a child which has an attribute called `attr` and with value `val`
+# (and returns TRUE). If it finds an element with an attribute called `attr`
+# whose value is NOT `val`, it returns FALSE. If it exhausts all children
+# and it doesn't find an element with an attribute called `attr`, it also
+# returns FALSE
+findAttribute <- function(x, attr, val) {
+ if (is.atomic(x)) return(FALSE) # exhausted this branch of the tree
+
+ if (!is.null(x$attribs[[attr]])) { # found attribute called `attr`
+ if (identical(x$attribs[[attr]], val)) return(TRUE)
+ else return(FALSE)
+ }
+
+ if (length(x$children) > 0) { # recursion
+ return(any(unlist(lapply(x$children, findAttribute, attr, val))))
+ }
+
+ return(FALSE) # found no attribute called `attr`
+}
diff --git a/R/valueBoxOutput.R b/R/valueBoxOutput.R
new file mode 100644
index 0000000..34a159a
--- /dev/null
+++ b/R/valueBoxOutput.R
@@ -0,0 +1,82 @@
+#' Create an info or value box output (client side)
+#'
+#' This is the UI-side function for creating a dynamic \code{\link{valueBox}} or
+#' \code{\link{infoBox}}.
+#'
+#' @inheritParams valueBox
+#' @param outputId Output variable name.
+#' @seealso \code{\link{renderValueBox}} for the corresponding server-side
+#' function and examples.
+#' @export
+valueBoxOutput <- function(outputId, width = 4) {
+ shiny::uiOutput(outputId, class = paste0("col-sm-", width))
+}
+
+#' @rdname valueBoxOutput
+#' @export
+infoBoxOutput <- valueBoxOutput
+
+
+#' Create an info or value box output (server side)
+#'
+#' This is the server-side function for creating a dynamic
+#' \code{\link{valueBox}} or \code{\link{infoBox}}.
+#'
+#' @inheritParams shiny::renderUI
+#' @seealso \code{\link{valueBoxOutput}} for the corresponding UI-side function.
+#'
+#' @examples
+#' ## Only run this example in interactive R sessions
+#' if (interactive()) {
+#' library(shiny)
+#'
+#' ui <- dashboardPage(
+#' dashboardHeader(title = "Dynamic boxes"),
+#' dashboardSidebar(),
+#' dashboardBody(
+#' fluidRow(
+#' box(width = 2, actionButton("count", "Count")),
+#' infoBoxOutput("ibox"),
+#' valueBoxOutput("vbox")
+#' )
+#' )
+#' )
+#'
+#' server <- function(input, output) {
+#' output$ibox <- renderInfoBox({
+#' infoBox(
+#' "Title",
+#' input$count,
+#' icon = icon("credit-card")
+#' )
+#' })
+#' output$vbox <- renderValueBox({
+#' valueBox(
+#' "Title",
+#' input$count,
+#' icon = icon("credit-card")
+#' )
+#' })
+#' }
+#'
+#' shinyApp(ui, server)
+#' }
+#' @export
+renderValueBox <- function(expr, env = parent.frame(), quoted = FALSE) {
+ # Convert the expression to a function
+ vbox_fun <- shiny::exprToFunction(expr, env, quoted)
+
+ # Wrap that function in another function which strips off the outer div and
+ # send it to renderUI.
+ shiny::renderUI({
+ vbox <- vbox_fun()
+ tagAssert(vbox, type = "div")
+
+ # Strip off outer div, since it's already present in output
+ vbox$children[[1]]
+ })
+}
+
+#' @rdname renderValueBox
+#' @export
+renderInfoBox <- renderValueBox
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..1ffcf59
--- /dev/null
+++ b/README.md
@@ -0,0 +1,16 @@
+Shiny Dashboard
+===============
+
+*Travis:* [](https://travis-ci.org/rstudio/shinydashboard)
+
+*AppVeyor:* [](https://ci.appveyor.com/project/rstudio/shinydashboard)
+
+## Installation
+
+To install from CRAN:
+
+```R
+install.packages("shinydashboard")
+```
+
+See the documentation at http://rstudio.github.io/shinydashboard/
diff --git a/inst/AdminLTE/AdminLTE.css b/inst/AdminLTE/AdminLTE.css
new file mode 100755
index 0000000..66881c3
--- /dev/null
+++ b/inst/AdminLTE/AdminLTE.css
@@ -0,0 +1,5005 @@
+ at font-face {
+ font-family: 'Source Sans Pro';
+ font-style: normal;
+ font-weight: 300;
+ src:
+ local('Source Sans Pro Light'),
+ local('SourceSansPro-Light'),
+ url('fonts/Source_Sans_Pro_300.ttf') format('truetype');
+}
+ at font-face {
+ font-family: 'Source Sans Pro';
+ font-style: normal;
+ font-weight: 400;
+ src:
+ local('Source Sans Pro'),
+ local('SourceSansPro-Regular'),
+ url('fonts/Source_Sans_Pro_400.ttf') format('truetype');
+}
+ at font-face {
+ font-family: 'Source Sans Pro';
+ font-style: normal;
+ font-weight: 600;
+ src:
+ local('Source Sans Pro Semibold'),
+ local('SourceSansPro-Semibold'),
+ url('fonts/Source_Sans_Pro_600.ttf') format('truetype');
+}
+ at font-face {
+ font-family: 'Source Sans Pro';
+ font-style: normal;
+ font-weight: 700;
+ src:
+ local('Source Sans Pro Bold'),
+ local('SourceSansPro-Bold'),
+ url('fonts/Source_Sans_Pro_700.ttf') format('truetype');
+}
+ at font-face {
+ font-family: 'Source Sans Pro';
+ font-style: italic;
+ font-weight: 300;
+ src:
+ local('Source Sans Pro Light Italic'),
+ local('SourceSansPro-LightIt'),
+ url('fonts/Source_Sans_Pro_300italic.ttf') format('truetype');
+}
+ at font-face {
+ font-family: 'Source Sans Pro';
+ font-style: italic;
+ font-weight: 400;
+ src:
+ local('Source Sans Pro Italic'),
+ local('SourceSansPro-It'),
+ url('fonts/Source_Sans_Pro_400italic.ttf') format('truetype');
+}
+ at font-face {
+ font-family: 'Source Sans Pro';
+ font-style: italic;
+ font-weight: 600;
+ src:
+ local('Source Sans Pro Semibold Italic'),
+ local('SourceSansPro-SemiboldIt'),
+ url('fonts/Source_Sans_Pro_600italic.ttf') format('truetype');
+}
+
+/*!
+ * AdminLTE v2.3.11
+ * Author: Almsaeed Studio
+ * Website: Almsaeed Studio <http://almsaeedstudio.com>
+ * License: Open source - MIT
+ * Please visit http://opensource.org/licenses/MIT for more information
+!*/
+/*
+ * Core: General Layout Style
+ * -------------------------
+ */
+html,
+body {
+ height: 100%;
+}
+.layout-boxed html,
+.layout-boxed body {
+ height: 100%;
+}
+body {
+ font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ font-weight: 400;
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+/* Layout */
+.wrapper {
+ height: 100%;
+ position: relative;
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+.wrapper:before,
+.wrapper:after {
+ content: " ";
+ display: table;
+}
+.wrapper:after {
+ clear: both;
+}
+.layout-boxed .wrapper {
+ max-width: 1250px;
+ margin: 0 auto;
+ min-height: 100%;
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
+ position: relative;
+}
+.layout-boxed {
+ background: url('../img/boxed-bg.jpg') repeat fixed;
+}
+/*
+ * Content Wrapper - contains the main content
+ * ```.right-side has been deprecated as of v2.0.0 in favor of .content-wrapper ```
+ */
+.content-wrapper,
+.right-side,
+.main-footer {
+ -webkit-transition: -webkit-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
+ -moz-transition: -moz-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
+ -o-transition: -o-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
+ transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;
+ margin-left: 230px;
+ z-index: 820;
+}
+.layout-top-nav .content-wrapper,
+.layout-top-nav .right-side,
+.layout-top-nav .main-footer {
+ margin-left: 0;
+}
+ at media (max-width: 767px) {
+ .content-wrapper,
+ .right-side,
+ .main-footer {
+ margin-left: 0;
+ }
+}
+ at media (min-width: 768px) {
+ .sidebar-collapse .content-wrapper,
+ .sidebar-collapse .right-side,
+ .sidebar-collapse .main-footer {
+ margin-left: 0;
+ }
+}
+ at media (max-width: 767px) {
+ .sidebar-open .content-wrapper,
+ .sidebar-open .right-side,
+ .sidebar-open .main-footer {
+ -webkit-transform: translate(230px, 0);
+ -ms-transform: translate(230px, 0);
+ -o-transform: translate(230px, 0);
+ transform: translate(230px, 0);
+ }
+}
+.content-wrapper,
+.right-side {
+ min-height: 100%;
+ background-color: #ecf0f5;
+ z-index: 800;
+}
+.main-footer {
+ background: #fff;
+ padding: 15px;
+ color: #444;
+ border-top: 1px solid #d2d6de;
+}
+/* Fixed layout */
+.fixed .main-header,
+.fixed .main-sidebar,
+.fixed .left-side {
+ position: fixed;
+}
+.fixed .main-header {
+ top: 0;
+ right: 0;
+ left: 0;
+}
+.fixed .content-wrapper,
+.fixed .right-side {
+ padding-top: 50px;
+}
+ at media (max-width: 767px) {
+ .fixed .content-wrapper,
+ .fixed .right-side {
+ padding-top: 100px;
+ }
+}
+.fixed.layout-boxed .wrapper {
+ max-width: 100%;
+}
+body.hold-transition .content-wrapper,
+body.hold-transition .right-side,
+body.hold-transition .main-footer,
+body.hold-transition .main-sidebar,
+body.hold-transition .left-side,
+body.hold-transition .main-header .navbar,
+body.hold-transition .main-header .logo {
+ /* Fix for IE */
+ -webkit-transition: none;
+ -o-transition: none;
+ transition: none;
+}
+/* Content */
+.content {
+ min-height: 250px;
+ padding: 15px;
+ margin-right: auto;
+ margin-left: auto;
+ padding-left: 15px;
+ padding-right: 15px;
+}
+/* H1 - H6 font */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+ font-family: 'Source Sans Pro', sans-serif;
+}
+/* General Links */
+a {
+ color: #3c8dbc;
+}
+a:hover,
+a:active,
+a:focus {
+ outline: none;
+ text-decoration: none;
+ color: #72afd2;
+}
+/* Page Header */
+.page-header {
+ margin: 10px 0 20px 0;
+ font-size: 22px;
+}
+.page-header > small {
+ color: #666;
+ display: block;
+ margin-top: 5px;
+}
+/*
+ * Component: Main Header
+ * ----------------------
+ */
+.main-header {
+ position: relative;
+ max-height: 100px;
+ z-index: 1030;
+}
+.main-header .navbar {
+ -webkit-transition: margin-left 0.3s ease-in-out;
+ -o-transition: margin-left 0.3s ease-in-out;
+ transition: margin-left 0.3s ease-in-out;
+ margin-bottom: 0;
+ margin-left: 230px;
+ border: none;
+ min-height: 50px;
+ border-radius: 0;
+}
+.layout-top-nav .main-header .navbar {
+ margin-left: 0;
+}
+.main-header #navbar-search-input.form-control {
+ background: rgba(255, 255, 255, 0.2);
+ border-color: transparent;
+}
+.main-header #navbar-search-input.form-control:focus,
+.main-header #navbar-search-input.form-control:active {
+ border-color: rgba(0, 0, 0, 0.1);
+ background: rgba(255, 255, 255, 0.9);
+}
+.main-header #navbar-search-input.form-control::-moz-placeholder {
+ color: #ccc;
+ opacity: 1;
+}
+.main-header #navbar-search-input.form-control:-ms-input-placeholder {
+ color: #ccc;
+}
+.main-header #navbar-search-input.form-control::-webkit-input-placeholder {
+ color: #ccc;
+}
+.main-header .navbar-custom-menu,
+.main-header .navbar-right {
+ float: right;
+}
+ at media (max-width: 991px) {
+ .main-header .navbar-custom-menu a,
+ .main-header .navbar-right a {
+ color: inherit;
+ background: transparent;
+ }
+}
+ at media (max-width: 767px) {
+ .main-header .navbar-right {
+ float: none;
+ }
+ .navbar-collapse .main-header .navbar-right {
+ margin: 7.5px -15px;
+ }
+ .main-header .navbar-right > li {
+ color: inherit;
+ border: 0;
+ }
+}
+.main-header .sidebar-toggle {
+ float: left;
+ background-color: transparent;
+ background-image: none;
+ padding: 15px 15px;
+ font-family: fontAwesome;
+}
+.main-header .sidebar-toggle:before {
+ content: "\f0c9";
+}
+.main-header .sidebar-toggle:hover {
+ color: #fff;
+}
+.main-header .sidebar-toggle:focus,
+.main-header .sidebar-toggle:active {
+ background: transparent;
+}
+.main-header .sidebar-toggle .icon-bar {
+ display: none;
+}
+.main-header .navbar .nav > li.user > a > .fa,
+.main-header .navbar .nav > li.user > a > .glyphicon,
+.main-header .navbar .nav > li.user > a > .ion {
+ margin-right: 5px;
+}
+.main-header .navbar .nav > li > a > .label {
+ position: absolute;
+ top: 9px;
+ right: 7px;
+ text-align: center;
+ font-size: 9px;
+ padding: 2px 3px;
+ line-height: .9;
+}
+.main-header .logo {
+ -webkit-transition: width 0.3s ease-in-out;
+ -o-transition: width 0.3s ease-in-out;
+ transition: width 0.3s ease-in-out;
+ display: block;
+ float: left;
+ height: 50px;
+ font-size: 20px;
+ line-height: 50px;
+ text-align: center;
+ width: 230px;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ padding: 0 15px;
+ font-weight: 300;
+ overflow: hidden;
+}
+.main-header .logo .logo-lg {
+ display: block;
+}
+.main-header .logo .logo-mini {
+ display: none;
+}
+.main-header .navbar-brand {
+ color: #fff;
+}
+.content-header {
+ position: relative;
+ padding: 15px 15px 0 15px;
+}
+.content-header > h1 {
+ margin: 0;
+ font-size: 24px;
+}
+.content-header > h1 > small {
+ font-size: 15px;
+ display: inline-block;
+ padding-left: 4px;
+ font-weight: 300;
+}
+.content-header > .breadcrumb {
+ float: right;
+ background: transparent;
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 12px;
+ padding: 7px 5px;
+ position: absolute;
+ top: 15px;
+ right: 10px;
+ border-radius: 2px;
+}
+.content-header > .breadcrumb > li > a {
+ color: #444;
+ text-decoration: none;
+ display: inline-block;
+}
+.content-header > .breadcrumb > li > a > .fa,
+.content-header > .breadcrumb > li > a > .glyphicon,
+.content-header > .breadcrumb > li > a > .ion {
+ margin-right: 5px;
+}
+.content-header > .breadcrumb > li + li:before {
+ content: '>\00a0';
+}
+ at media (max-width: 991px) {
+ .content-header > .breadcrumb {
+ position: relative;
+ margin-top: 5px;
+ top: 0;
+ right: 0;
+ float: none;
+ background: #d2d6de;
+ padding-left: 10px;
+ }
+ .content-header > .breadcrumb li:before {
+ color: #97a0b3;
+ }
+}
+.navbar-toggle {
+ color: #fff;
+ border: 0;
+ margin: 0;
+ padding: 15px 15px;
+}
+ at media (max-width: 991px) {
+ .navbar-custom-menu .navbar-nav > li {
+ float: left;
+ }
+ .navbar-custom-menu .navbar-nav {
+ margin: 0;
+ float: left;
+ }
+ .navbar-custom-menu .navbar-nav > li > a {
+ padding-top: 15px;
+ padding-bottom: 15px;
+ line-height: 20px;
+ }
+}
+ at media (max-width: 767px) {
+ .main-header {
+ position: relative;
+ }
+ .main-header .logo,
+ .main-header .navbar {
+ width: 100%;
+ float: none;
+ }
+ .main-header .navbar {
+ margin: 0;
+ }
+ .main-header .navbar-custom-menu {
+ float: right;
+ }
+}
+ at media (max-width: 991px) {
+ .navbar-collapse.pull-left {
+ float: none !important;
+ }
+ .navbar-collapse.pull-left + .navbar-custom-menu {
+ display: block;
+ position: absolute;
+ top: 0;
+ right: 40px;
+ }
+}
+/*
+ * Component: Sidebar
+ * ------------------
+ */
+.main-sidebar,
+.left-side {
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding-top: 50px;
+ min-height: 100%;
+ width: 230px;
+ z-index: 810;
+ -webkit-transition: -webkit-transform 0.3s ease-in-out, width 0.3s ease-in-out;
+ -moz-transition: -moz-transform 0.3s ease-in-out, width 0.3s ease-in-out;
+ -o-transition: -o-transform 0.3s ease-in-out, width 0.3s ease-in-out;
+ transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
+}
+ at media (max-width: 767px) {
+ .main-sidebar,
+ .left-side {
+ padding-top: 100px;
+ }
+}
+ at media (max-width: 767px) {
+ .main-sidebar,
+ .left-side {
+ -webkit-transform: translate(-230px, 0);
+ -ms-transform: translate(-230px, 0);
+ -o-transform: translate(-230px, 0);
+ transform: translate(-230px, 0);
+ }
+}
+ at media (min-width: 768px) {
+ .sidebar-collapse .main-sidebar,
+ .sidebar-collapse .left-side {
+ -webkit-transform: translate(-230px, 0);
+ -ms-transform: translate(-230px, 0);
+ -o-transform: translate(-230px, 0);
+ transform: translate(-230px, 0);
+ }
+}
+ at media (max-width: 767px) {
+ .sidebar-open .main-sidebar,
+ .sidebar-open .left-side {
+ -webkit-transform: translate(0, 0);
+ -ms-transform: translate(0, 0);
+ -o-transform: translate(0, 0);
+ transform: translate(0, 0);
+ }
+}
+.sidebar {
+ padding-bottom: 10px;
+}
+.sidebar-form input:focus {
+ border-color: transparent;
+}
+.user-panel {
+ position: relative;
+ width: 100%;
+ padding: 10px;
+ overflow: hidden;
+}
+.user-panel:before,
+.user-panel:after {
+ content: " ";
+ display: table;
+}
+.user-panel:after {
+ clear: both;
+}
+.user-panel > .image > img {
+ width: 100%;
+ max-width: 45px;
+ height: auto;
+}
+.user-panel > .info {
+ padding: 5px 5px 5px 15px;
+ line-height: 1;
+ position: absolute;
+ left: 55px;
+}
+.user-panel > .info > p {
+ font-weight: 600;
+ margin-bottom: 9px;
+}
+.user-panel > .info > a {
+ text-decoration: none;
+ padding-right: 5px;
+ margin-top: 3px;
+ font-size: 11px;
+}
+.user-panel > .info > a > .fa,
+.user-panel > .info > a > .ion,
+.user-panel > .info > a > .glyphicon {
+ margin-right: 3px;
+}
+.sidebar-menu {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+.sidebar-menu > li {
+ position: relative;
+ margin: 0;
+ padding: 0;
+}
+.sidebar-menu > li > a {
+ padding: 12px 5px 12px 15px;
+ display: block;
+}
+.sidebar-menu > li > a > .fa,
+.sidebar-menu > li > a > .glyphicon,
+.sidebar-menu > li > a > .ion {
+ width: 20px;
+}
+.sidebar-menu > li .label,
+.sidebar-menu > li .badge {
+ margin-right: 5px;
+}
+.sidebar-menu > li .badge {
+ margin-top: 3px;
+}
+.sidebar-menu li.header {
+ padding: 10px 25px 10px 15px;
+ font-size: 12px;
+}
+.sidebar-menu li > a > .fa-angle-left,
+.sidebar-menu li > a > .pull-right-container > .fa-angle-left {
+ width: auto;
+ height: auto;
+ padding: 0;
+ margin-right: 10px;
+}
+.sidebar-menu li > a > .fa-angle-left {
+ position: absolute;
+ top: 50%;
+ right: 10px;
+ margin-top: -8px;
+}
+.sidebar-menu li.active > a > .fa-angle-left,
+.sidebar-menu li.active > a > .pull-right-container > .fa-angle-left {
+ -webkit-transform: rotate(-90deg);
+ -ms-transform: rotate(-90deg);
+ -o-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+}
+.sidebar-menu li.active > .treeview-menu {
+ display: block;
+}
+.sidebar-menu .treeview-menu {
+ display: none;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ padding-left: 5px;
+}
+.sidebar-menu .treeview-menu .treeview-menu {
+ padding-left: 20px;
+}
+.sidebar-menu .treeview-menu > li {
+ margin: 0;
+}
+.sidebar-menu .treeview-menu > li > a {
+ padding: 5px 5px 5px 15px;
+ display: block;
+ font-size: 14px;
+}
+.sidebar-menu .treeview-menu > li > a > .fa,
+.sidebar-menu .treeview-menu > li > a > .glyphicon,
+.sidebar-menu .treeview-menu > li > a > .ion {
+ width: 20px;
+}
+.sidebar-menu .treeview-menu > li > a > .pull-right-container > .fa-angle-left,
+.sidebar-menu .treeview-menu > li > a > .pull-right-container > .fa-angle-down,
+.sidebar-menu .treeview-menu > li > a > .fa-angle-left,
+.sidebar-menu .treeview-menu > li > a > .fa-angle-down {
+ width: auto;
+}
+/*
+ * Component: Sidebar Mini
+ */
+ at media (min-width: 768px) {
+ .sidebar-mini.sidebar-collapse .content-wrapper,
+ .sidebar-mini.sidebar-collapse .right-side,
+ .sidebar-mini.sidebar-collapse .main-footer {
+ margin-left: 50px !important;
+ z-index: 840;
+ }
+ .sidebar-mini.sidebar-collapse .main-sidebar {
+ -webkit-transform: translate(0, 0);
+ -ms-transform: translate(0, 0);
+ -o-transform: translate(0, 0);
+ transform: translate(0, 0);
+ width: 50px !important;
+ z-index: 850;
+ }
+ .sidebar-mini.sidebar-collapse .sidebar-menu > li {
+ position: relative;
+ }
+ .sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
+ margin-right: 0;
+ }
+ .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span {
+ border-top-right-radius: 4px;
+ }
+ .sidebar-mini.sidebar-collapse .sidebar-menu > li:not(.treeview) > a > span {
+ border-bottom-right-radius: 4px;
+ }
+ .sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
+ padding-top: 5px;
+ padding-bottom: 5px;
+ border-bottom-right-radius: 4px;
+ }
+ .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right),
+ .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
+ display: block !important;
+ position: absolute;
+ width: 180px;
+ left: 50px;
+ }
+ .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span {
+ top: 0;
+ margin-left: -3px;
+ padding: 12px 5px 12px 20px;
+ background-color: inherit;
+ }
+ .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > .pull-right-container {
+ position: relative!important;
+ float: right;
+ width: auto!important;
+ left: 180px !important;
+ top: -22px !important;
+ z-index: 900;
+ }
+ .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > .pull-right-container > .label:not(:first-of-type) {
+ display: none;
+ }
+ .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
+ top: 44px;
+ margin-left: 0;
+ }
+ .sidebar-mini.sidebar-collapse .main-sidebar .user-panel > .info,
+ .sidebar-mini.sidebar-collapse .sidebar-form,
+ .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span,
+ .sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu,
+ .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .pull-right,
+ .sidebar-mini.sidebar-collapse .sidebar-menu li.header {
+ display: none !important;
+ -webkit-transform: translateZ(0);
+ }
+ .sidebar-mini.sidebar-collapse .main-header .logo {
+ width: 50px;
+ }
+ .sidebar-mini.sidebar-collapse .main-header .logo > .logo-mini {
+ display: block;
+ margin-left: -15px;
+ margin-right: -15px;
+ font-size: 18px;
+ }
+ .sidebar-mini.sidebar-collapse .main-header .logo > .logo-lg {
+ display: none;
+ }
+ .sidebar-mini.sidebar-collapse .main-header .navbar {
+ margin-left: 50px;
+ }
+}
+.sidebar-menu,
+.main-sidebar .user-panel,
+.sidebar-menu > li.header {
+ white-space: nowrap;
+ overflow: hidden;
+}
+.sidebar-menu:hover {
+ overflow: visible;
+}
+.sidebar-form,
+.sidebar-menu > li.header {
+ overflow: hidden;
+ text-overflow: clip;
+}
+.sidebar-menu li > a {
+ position: relative;
+}
+.sidebar-menu li > a > .pull-right-container {
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ margin-top: -7px;
+}
+/*
+ * Component: Control sidebar. By default, this is the right sidebar.
+ */
+.control-sidebar-bg {
+ position: fixed;
+ z-index: 1000;
+ bottom: 0;
+}
+.control-sidebar-bg,
+.control-sidebar {
+ top: 0;
+ right: -230px;
+ width: 230px;
+ -webkit-transition: right 0.3s ease-in-out;
+ -o-transition: right 0.3s ease-in-out;
+ transition: right 0.3s ease-in-out;
+}
+.control-sidebar {
+ position: absolute;
+ padding-top: 50px;
+ z-index: 1010;
+}
+ at media (max-width: 768px) {
+ .control-sidebar {
+ padding-top: 100px;
+ }
+}
+.control-sidebar > .tab-content {
+ padding: 10px 15px;
+}
+.control-sidebar.control-sidebar-open,
+.control-sidebar.control-sidebar-open + .control-sidebar-bg {
+ right: 0;
+}
+.control-sidebar-open .control-sidebar-bg,
+.control-sidebar-open .control-sidebar {
+ right: 0;
+}
+ at media (min-width: 768px) {
+ .control-sidebar-open .content-wrapper,
+ .control-sidebar-open .right-side,
+ .control-sidebar-open .main-footer {
+ margin-right: 230px;
+ }
+}
+.nav-tabs.control-sidebar-tabs > li:first-of-type > a,
+.nav-tabs.control-sidebar-tabs > li:first-of-type > a:hover,
+.nav-tabs.control-sidebar-tabs > li:first-of-type > a:focus {
+ border-left-width: 0;
+}
+.nav-tabs.control-sidebar-tabs > li > a {
+ border-radius: 0;
+}
+.nav-tabs.control-sidebar-tabs > li > a,
+.nav-tabs.control-sidebar-tabs > li > a:hover {
+ border-top: none;
+ border-right: none;
+ border-left: 1px solid transparent;
+ border-bottom: 1px solid transparent;
+}
+.nav-tabs.control-sidebar-tabs > li > a .icon {
+ font-size: 16px;
+}
+.nav-tabs.control-sidebar-tabs > li.active > a,
+.nav-tabs.control-sidebar-tabs > li.active > a:hover,
+.nav-tabs.control-sidebar-tabs > li.active > a:focus,
+.nav-tabs.control-sidebar-tabs > li.active > a:active {
+ border-top: none;
+ border-right: none;
+ border-bottom: none;
+}
+ at media (max-width: 768px) {
+ .nav-tabs.control-sidebar-tabs {
+ display: table;
+ }
+ .nav-tabs.control-sidebar-tabs > li {
+ display: table-cell;
+ }
+}
+.control-sidebar-heading {
+ font-weight: 400;
+ font-size: 16px;
+ padding: 10px 0;
+ margin-bottom: 10px;
+}
+.control-sidebar-subheading {
+ display: block;
+ font-weight: 400;
+ font-size: 14px;
+}
+.control-sidebar-menu {
+ list-style: none;
+ padding: 0;
+ margin: 0 -15px;
+}
+.control-sidebar-menu > li > a {
+ display: block;
+ padding: 10px 15px;
+}
+.control-sidebar-menu > li > a:before,
+.control-sidebar-menu > li > a:after {
+ content: " ";
+ display: table;
+}
+.control-sidebar-menu > li > a:after {
+ clear: both;
+}
+.control-sidebar-menu > li > a > .control-sidebar-subheading {
+ margin-top: 0;
+}
+.control-sidebar-menu .menu-icon {
+ float: left;
+ width: 35px;
+ height: 35px;
+ border-radius: 50%;
+ text-align: center;
+ line-height: 35px;
+}
+.control-sidebar-menu .menu-info {
+ margin-left: 45px;
+ margin-top: 3px;
+}
+.control-sidebar-menu .menu-info > .control-sidebar-subheading {
+ margin: 0;
+}
+.control-sidebar-menu .menu-info > p {
+ margin: 0;
+ font-size: 11px;
+}
+.control-sidebar-menu .progress {
+ margin: 0;
+}
+.control-sidebar-dark {
+ color: #b8c7ce;
+}
+.control-sidebar-dark,
+.control-sidebar-dark + .control-sidebar-bg {
+ background: #222d32;
+}
+.control-sidebar-dark .nav-tabs.control-sidebar-tabs {
+ border-bottom: #1c2529;
+}
+.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a {
+ background: #181f23;
+ color: #b8c7ce;
+}
+.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a,
+.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:hover,
+.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:focus {
+ border-left-color: #141a1d;
+ border-bottom-color: #141a1d;
+}
+.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:hover,
+.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:focus,
+.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:active {
+ background: #1c2529;
+}
+.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:hover {
+ color: #fff;
+}
+.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li.active > a,
+.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li.active > a:hover,
+.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li.active > a:focus,
+.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li.active > a:active {
+ background: #222d32;
+ color: #fff;
+}
+.control-sidebar-dark .control-sidebar-heading,
+.control-sidebar-dark .control-sidebar-subheading {
+ color: #fff;
+}
+.control-sidebar-dark .control-sidebar-menu > li > a:hover {
+ background: #1e282c;
+}
+.control-sidebar-dark .control-sidebar-menu > li > a .menu-info > p {
+ color: #b8c7ce;
+}
+.control-sidebar-light {
+ color: #5e5e5e;
+}
+.control-sidebar-light,
+.control-sidebar-light + .control-sidebar-bg {
+ background: #f9fafc;
+ border-left: 1px solid #d2d6de;
+}
+.control-sidebar-light .nav-tabs.control-sidebar-tabs {
+ border-bottom: #d2d6de;
+}
+.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a {
+ background: #e8ecf4;
+ color: #444444;
+}
+.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a,
+.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a:hover,
+.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a:focus {
+ border-left-color: #d2d6de;
+ border-bottom-color: #d2d6de;
+}
+.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a:hover,
+.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a:focus,
+.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a:active {
+ background: #eff1f7;
+}
+.control-sidebar-light .nav-tabs.control-sidebar-tabs > li.active > a,
+.control-sidebar-light .nav-tabs.control-sidebar-tabs > li.active > a:hover,
+.control-sidebar-light .nav-tabs.control-sidebar-tabs > li.active > a:focus,
+.control-sidebar-light .nav-tabs.control-sidebar-tabs > li.active > a:active {
+ background: #f9fafc;
+ color: #111;
+}
+.control-sidebar-light .control-sidebar-heading,
+.control-sidebar-light .control-sidebar-subheading {
+ color: #111;
+}
+.control-sidebar-light .control-sidebar-menu {
+ margin-left: -14px;
+}
+.control-sidebar-light .control-sidebar-menu > li > a:hover {
+ background: #f4f4f5;
+}
+.control-sidebar-light .control-sidebar-menu > li > a .menu-info > p {
+ color: #5e5e5e;
+}
+/*
+ * Component: Dropdown menus
+ * -------------------------
+ */
+/*Dropdowns in general*/
+.dropdown-menu {
+ box-shadow: none;
+ border-color: #eee;
+}
+.dropdown-menu > li > a {
+ color: #777;
+}
+.dropdown-menu > li > a > .glyphicon,
+.dropdown-menu > li > a > .fa,
+.dropdown-menu > li > a > .ion {
+ margin-right: 10px;
+}
+.dropdown-menu > li > a:hover {
+ background-color: #e1e3e9;
+ color: #333;
+}
+.dropdown-menu > .divider {
+ background-color: #eee;
+}
+.navbar-nav > .notifications-menu > .dropdown-menu,
+.navbar-nav > .messages-menu > .dropdown-menu,
+.navbar-nav > .tasks-menu > .dropdown-menu {
+ width: 280px;
+ padding: 0 0 0 0;
+ margin: 0;
+ top: 100%;
+}
+.navbar-nav > .notifications-menu > .dropdown-menu > li,
+.navbar-nav > .messages-menu > .dropdown-menu > li,
+.navbar-nav > .tasks-menu > .dropdown-menu > li {
+ position: relative;
+}
+.navbar-nav > .notifications-menu > .dropdown-menu > li.header,
+.navbar-nav > .messages-menu > .dropdown-menu > li.header,
+.navbar-nav > .tasks-menu > .dropdown-menu > li.header {
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+ background-color: #ffffff;
+ padding: 7px 10px;
+ border-bottom: 1px solid #f4f4f4;
+ color: #444444;
+ font-size: 14px;
+}
+.navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a,
+.navbar-nav > .messages-menu > .dropdown-menu > li.footer > a,
+.navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 4px;
+ border-bottom-left-radius: 4px;
+ font-size: 12px;
+ background-color: #fff;
+ padding: 7px 10px;
+ border-bottom: 1px solid #eeeeee;
+ color: #444 !important;
+ text-align: center;
+}
+ at media (max-width: 991px) {
+ .navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a,
+ .navbar-nav > .messages-menu > .dropdown-menu > li.footer > a,
+ .navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a {
+ background: #fff !important;
+ color: #444 !important;
+ }
+}
+.navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a:hover,
+.navbar-nav > .messages-menu > .dropdown-menu > li.footer > a:hover,
+.navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a:hover {
+ text-decoration: none;
+ font-weight: normal;
+}
+.navbar-nav > .notifications-menu > .dropdown-menu > li .menu,
+.navbar-nav > .messages-menu > .dropdown-menu > li .menu,
+.navbar-nav > .tasks-menu > .dropdown-menu > li .menu {
+ max-height: 200px;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ overflow-x: hidden;
+}
+.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a,
+.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a,
+.navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a {
+ display: block;
+ white-space: nowrap;
+ /* Prevent text from breaking */
+ border-bottom: 1px solid #f4f4f4;
+}
+.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a:hover,
+.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:hover,
+.navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a:hover {
+ background: #f4f4f4;
+ text-decoration: none;
+}
+.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a {
+ color: #444444;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ padding: 10px;
+}
+.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .glyphicon,
+.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .fa,
+.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion {
+ width: 20px;
+}
+.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a {
+ margin: 0;
+ padding: 10px 10px;
+}
+.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > div > img {
+ margin: auto 10px auto auto;
+ width: 40px;
+ height: 40px;
+}
+.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4 {
+ padding: 0;
+ margin: 0 0 0 45px;
+ color: #444444;
+ font-size: 15px;
+ position: relative;
+}
+.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4 > small {
+ color: #999999;
+ font-size: 10px;
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > p {
+ margin: 0 0 0 45px;
+ font-size: 12px;
+ color: #888888;
+}
+.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:before,
+.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:after {
+ content: " ";
+ display: table;
+}
+.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:after {
+ clear: both;
+}
+.navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a {
+ padding: 10px;
+}
+.navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a > h3 {
+ font-size: 14px;
+ padding: 0;
+ margin: 0 0 10px 0;
+ color: #666666;
+}
+.navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a > .progress {
+ padding: 0;
+ margin: 0;
+}
+.navbar-nav > .user-menu > .dropdown-menu {
+ border-top-right-radius: 0;
+ border-top-left-radius: 0;
+ padding: 1px 0 0 0;
+ border-top-width: 0;
+ width: 280px;
+}
+.navbar-nav > .user-menu > .dropdown-menu,
+.navbar-nav > .user-menu > .dropdown-menu > .user-body {
+ border-bottom-right-radius: 4px;
+ border-bottom-left-radius: 4px;
+}
+.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
+ height: 175px;
+ padding: 10px;
+ text-align: center;
+}
+.navbar-nav > .user-menu > .dropdown-menu > li.user-header > img {
+ z-index: 5;
+ height: 90px;
+ width: 90px;
+ border: 3px solid;
+ border-color: transparent;
+ border-color: rgba(255, 255, 255, 0.2);
+}
+.navbar-nav > .user-menu > .dropdown-menu > li.user-header > p {
+ z-index: 5;
+ color: #fff;
+ color: rgba(255, 255, 255, 0.8);
+ font-size: 17px;
+ margin-top: 10px;
+}
+.navbar-nav > .user-menu > .dropdown-menu > li.user-header > p > small {
+ display: block;
+ font-size: 12px;
+}
+.navbar-nav > .user-menu > .dropdown-menu > .user-body {
+ padding: 15px;
+ border-bottom: 1px solid #f4f4f4;
+ border-top: 1px solid #dddddd;
+}
+.navbar-nav > .user-menu > .dropdown-menu > .user-body:before,
+.navbar-nav > .user-menu > .dropdown-menu > .user-body:after {
+ content: " ";
+ display: table;
+}
+.navbar-nav > .user-menu > .dropdown-menu > .user-body:after {
+ clear: both;
+}
+.navbar-nav > .user-menu > .dropdown-menu > .user-body a {
+ color: #444 !important;
+}
+ at media (max-width: 991px) {
+ .navbar-nav > .user-menu > .dropdown-menu > .user-body a {
+ background: #fff !important;
+ color: #444 !important;
+ }
+}
+.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
+ background-color: #f9f9f9;
+ padding: 10px;
+}
+.navbar-nav > .user-menu > .dropdown-menu > .user-footer:before,
+.navbar-nav > .user-menu > .dropdown-menu > .user-footer:after {
+ content: " ";
+ display: table;
+}
+.navbar-nav > .user-menu > .dropdown-menu > .user-footer:after {
+ clear: both;
+}
+.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default {
+ color: #666666;
+}
+ at media (max-width: 991px) {
+ .navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default:hover {
+ background-color: #f9f9f9;
+ }
+}
+.navbar-nav > .user-menu .user-image {
+ float: left;
+ width: 25px;
+ height: 25px;
+ border-radius: 50%;
+ margin-right: 10px;
+ margin-top: -2px;
+}
+ at media (max-width: 767px) {
+ .navbar-nav > .user-menu .user-image {
+ float: none;
+ margin-right: 0;
+ margin-top: -8px;
+ line-height: 10px;
+ }
+}
+/* Add fade animation to dropdown menus by appending
+ the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)*/
+.open:not(.dropup) > .animated-dropdown-menu {
+ backface-visibility: visible !important;
+ -webkit-animation: flipInX 0.7s both;
+ -o-animation: flipInX 0.7s both;
+ animation: flipInX 0.7s both;
+}
+ at keyframes flipInX {
+ 0% {
+ transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+ transition-timing-function: ease-in;
+ opacity: 0;
+ }
+ 40% {
+ transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+ transition-timing-function: ease-in;
+ }
+ 60% {
+ transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+ opacity: 1;
+ }
+ 80% {
+ transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+ }
+ 100% {
+ transform: perspective(400px);
+ }
+}
+ at -webkit-keyframes flipInX {
+ 0% {
+ -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+ -webkit-transition-timing-function: ease-in;
+ opacity: 0;
+ }
+ 40% {
+ -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+ -webkit-transition-timing-function: ease-in;
+ }
+ 60% {
+ -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+ opacity: 1;
+ }
+ 80% {
+ -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+ }
+ 100% {
+ -webkit-transform: perspective(400px);
+ }
+}
+/* Fix dropdown menu in navbars */
+.navbar-custom-menu > .navbar-nav > li {
+ position: relative;
+}
+.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
+ position: absolute;
+ right: 0;
+ left: auto;
+}
+ at media (max-width: 991px) {
+ .navbar-custom-menu > .navbar-nav {
+ float: right;
+ }
+ .navbar-custom-menu > .navbar-nav > li {
+ position: static;
+ }
+ .navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
+ position: absolute;
+ right: 5%;
+ left: auto;
+ border: 1px solid #ddd;
+ background: #fff;
+ }
+}
+/*
+ * Component: Form
+ * ---------------
+ */
+.form-control {
+ border-radius: 0;
+ box-shadow: none;
+ border-color: #d2d6de;
+}
+.form-control:focus {
+ border-color: #3c8dbc;
+ box-shadow: none;
+}
+.form-control::-moz-placeholder,
+.form-control:-ms-input-placeholder,
+.form-control::-webkit-input-placeholder {
+ color: #bbb;
+ opacity: 1;
+}
+.form-control:not(select) {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+}
+.form-group.has-success label {
+ color: #00a65a;
+}
+.form-group.has-success .form-control,
+.form-group.has-success .input-group-addon {
+ border-color: #00a65a;
+ box-shadow: none;
+}
+.form-group.has-success .help-block {
+ color: #00a65a;
+}
+.form-group.has-warning label {
+ color: #f39c12;
+}
+.form-group.has-warning .form-control,
+.form-group.has-warning .input-group-addon {
+ border-color: #f39c12;
+ box-shadow: none;
+}
+.form-group.has-warning .help-block {
+ color: #f39c12;
+}
+.form-group.has-error label {
+ color: #dd4b39;
+}
+.form-group.has-error .form-control,
+.form-group.has-error .input-group-addon {
+ border-color: #dd4b39;
+ box-shadow: none;
+}
+.form-group.has-error .help-block {
+ color: #dd4b39;
+}
+/* Input group */
+.input-group .input-group-addon {
+ border-radius: 0;
+ border-color: #d2d6de;
+ background-color: #fff;
+}
+/* button groups */
+.btn-group-vertical .btn.btn-flat:first-of-type,
+.btn-group-vertical .btn.btn-flat:last-of-type {
+ border-radius: 0;
+}
+.icheck > label {
+ padding-left: 0;
+}
+/* support Font Awesome icons in form-control */
+.form-control-feedback.fa {
+ line-height: 34px;
+}
+.input-lg + .form-control-feedback.fa,
+.input-group-lg + .form-control-feedback.fa,
+.form-group-lg .form-control + .form-control-feedback.fa {
+ line-height: 46px;
+}
+.input-sm + .form-control-feedback.fa,
+.input-group-sm + .form-control-feedback.fa,
+.form-group-sm .form-control + .form-control-feedback.fa {
+ line-height: 30px;
+}
+/*
+ * Component: Progress Bar
+ * -----------------------
+ */
+.progress,
+.progress > .progress-bar {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.progress,
+.progress > .progress-bar,
+.progress .progress-bar,
+.progress > .progress-bar .progress-bar {
+ border-radius: 1px;
+}
+/* size variation */
+.progress.sm,
+.progress-sm {
+ height: 10px;
+}
+.progress.sm,
+.progress-sm,
+.progress.sm .progress-bar,
+.progress-sm .progress-bar {
+ border-radius: 1px;
+}
+.progress.xs,
+.progress-xs {
+ height: 7px;
+}
+.progress.xs,
+.progress-xs,
+.progress.xs .progress-bar,
+.progress-xs .progress-bar {
+ border-radius: 1px;
+}
+.progress.xxs,
+.progress-xxs {
+ height: 3px;
+}
+.progress.xxs,
+.progress-xxs,
+.progress.xxs .progress-bar,
+.progress-xxs .progress-bar {
+ border-radius: 1px;
+}
+/* Vertical bars */
+.progress.vertical {
+ position: relative;
+ width: 30px;
+ height: 200px;
+ display: inline-block;
+ margin-right: 10px;
+}
+.progress.vertical > .progress-bar {
+ width: 100%;
+ position: absolute;
+ bottom: 0;
+}
+.progress.vertical.sm,
+.progress.vertical.progress-sm {
+ width: 20px;
+}
+.progress.vertical.xs,
+.progress.vertical.progress-xs {
+ width: 10px;
+}
+.progress.vertical.xxs,
+.progress.vertical.progress-xxs {
+ width: 3px;
+}
+.progress-group .progress-text {
+ font-weight: 600;
+}
+.progress-group .progress-number {
+ float: right;
+}
+/* Remove margins from progress bars when put in a table */
+.table tr > td .progress {
+ margin: 0;
+}
+.progress-bar-light-blue,
+.progress-bar-primary {
+ background-color: #3c8dbc;
+}
+.progress-striped .progress-bar-light-blue,
+.progress-striped .progress-bar-primary {
+ background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+ background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+ background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+}
+.progress-bar-green,
+.progress-bar-success {
+ background-color: #00a65a;
+}
+.progress-striped .progress-bar-green,
+.progress-striped .progress-bar-success {
+ background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+ background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+ background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+}
+.progress-bar-aqua,
+.progress-bar-info {
+ background-color: #00c0ef;
+}
+.progress-striped .progress-bar-aqua,
+.progress-striped .progress-bar-info {
+ background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+ background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+ background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+}
+.progress-bar-yellow,
+.progress-bar-warning {
+ background-color: #f39c12;
+}
+.progress-striped .progress-bar-yellow,
+.progress-striped .progress-bar-warning {
+ background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+ background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+ background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+}
+.progress-bar-red,
+.progress-bar-danger {
+ background-color: #dd4b39;
+}
+.progress-striped .progress-bar-red,
+.progress-striped .progress-bar-danger {
+ background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+ background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+ background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+}
+/*
+ * Component: Small Box
+ * --------------------
+ */
+.small-box {
+ border-radius: 2px;
+ position: relative;
+ display: block;
+ margin-bottom: 20px;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+.small-box > .inner {
+ padding: 10px;
+}
+.small-box > .small-box-footer {
+ position: relative;
+ text-align: center;
+ padding: 3px 0;
+ color: #fff;
+ color: rgba(255, 255, 255, 0.8);
+ display: block;
+ z-index: 10;
+ background: rgba(0, 0, 0, 0.1);
+ text-decoration: none;
+}
+.small-box > .small-box-footer:hover {
+ color: #fff;
+ background: rgba(0, 0, 0, 0.15);
+}
+.small-box h3 {
+ font-size: 38px;
+ font-weight: bold;
+ margin: 0 0 10px 0;
+ white-space: nowrap;
+ padding: 0;
+}
+.small-box p {
+ font-size: 15px;
+}
+.small-box p > small {
+ display: block;
+ color: #f9f9f9;
+ font-size: 13px;
+ margin-top: 5px;
+}
+.small-box h3,
+.small-box p {
+ z-index: 5;
+}
+.small-box .icon {
+ -webkit-transition: all 0.3s linear;
+ -o-transition: all 0.3s linear;
+ transition: all 0.3s linear;
+ position: absolute;
+ top: -10px;
+ right: 10px;
+ z-index: 0;
+ font-size: 90px;
+ color: rgba(0, 0, 0, 0.15);
+}
+.small-box:hover {
+ text-decoration: none;
+ color: #f9f9f9;
+}
+.small-box:hover .icon {
+ font-size: 95px;
+}
+ at media (max-width: 767px) {
+ .small-box {
+ text-align: center;
+ }
+ .small-box .icon {
+ display: none;
+ }
+ .small-box p {
+ font-size: 12px;
+ }
+}
+/*
+ * Component: Box
+ * --------------
+ */
+.box {
+ position: relative;
+ border-radius: 3px;
+ background: #ffffff;
+ border-top: 3px solid #d2d6de;
+ margin-bottom: 20px;
+ width: 100%;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+.box.box-primary {
+ border-top-color: #3c8dbc;
+}
+.box.box-info {
+ border-top-color: #00c0ef;
+}
+.box.box-danger {
+ border-top-color: #dd4b39;
+}
+.box.box-warning {
+ border-top-color: #f39c12;
+}
+.box.box-success {
+ border-top-color: #00a65a;
+}
+.box.box-default {
+ border-top-color: #d2d6de;
+}
+.box.collapsed-box .box-body,
+.box.collapsed-box .box-footer {
+ display: none;
+}
+.box .nav-stacked > li {
+ border-bottom: 1px solid #f4f4f4;
+ margin: 0;
+}
+.box .nav-stacked > li:last-of-type {
+ border-bottom: none;
+}
+.box.height-control .box-body {
+ max-height: 300px;
+ overflow: auto;
+}
+.box .border-right {
+ border-right: 1px solid #f4f4f4;
+}
+.box .border-left {
+ border-left: 1px solid #f4f4f4;
+}
+.box.box-solid {
+ border-top: 0;
+}
+.box.box-solid > .box-header .btn.btn-default {
+ background: transparent;
+}
+.box.box-solid > .box-header .btn:hover,
+.box.box-solid > .box-header a:hover {
+ background: rgba(0, 0, 0, 0.1);
+}
+.box.box-solid.box-default {
+ border: 1px solid #d2d6de;
+}
+.box.box-solid.box-default > .box-header {
+ color: #444444;
+ background: #d2d6de;
+ background-color: #d2d6de;
+}
+.box.box-solid.box-default > .box-header a,
+.box.box-solid.box-default > .box-header .btn {
+ color: #444444;
+}
+.box.box-solid.box-primary {
+ border: 1px solid #3c8dbc;
+}
+.box.box-solid.box-primary > .box-header {
+ color: #ffffff;
+ background: #3c8dbc;
+ background-color: #3c8dbc;
+}
+.box.box-solid.box-primary > .box-header a,
+.box.box-solid.box-primary > .box-header .btn {
+ color: #ffffff;
+}
+.box.box-solid.box-info {
+ border: 1px solid #00c0ef;
+}
+.box.box-solid.box-info > .box-header {
+ color: #ffffff;
+ background: #00c0ef;
+ background-color: #00c0ef;
+}
+.box.box-solid.box-info > .box-header a,
+.box.box-solid.box-info > .box-header .btn {
+ color: #ffffff;
+}
+.box.box-solid.box-danger {
+ border: 1px solid #dd4b39;
+}
+.box.box-solid.box-danger > .box-header {
+ color: #ffffff;
+ background: #dd4b39;
+ background-color: #dd4b39;
+}
+.box.box-solid.box-danger > .box-header a,
+.box.box-solid.box-danger > .box-header .btn {
+ color: #ffffff;
+}
+.box.box-solid.box-warning {
+ border: 1px solid #f39c12;
+}
+.box.box-solid.box-warning > .box-header {
+ color: #ffffff;
+ background: #f39c12;
+ background-color: #f39c12;
+}
+.box.box-solid.box-warning > .box-header a,
+.box.box-solid.box-warning > .box-header .btn {
+ color: #ffffff;
+}
+.box.box-solid.box-success {
+ border: 1px solid #00a65a;
+}
+.box.box-solid.box-success > .box-header {
+ color: #ffffff;
+ background: #00a65a;
+ background-color: #00a65a;
+}
+.box.box-solid.box-success > .box-header a,
+.box.box-solid.box-success > .box-header .btn {
+ color: #ffffff;
+}
+.box.box-solid > .box-header > .box-tools .btn {
+ border: 0;
+ box-shadow: none;
+}
+.box.box-solid[class*='bg'] > .box-header {
+ color: #fff;
+}
+.box .box-group > .box {
+ margin-bottom: 5px;
+}
+.box .knob-label {
+ text-align: center;
+ color: #333;
+ font-weight: 100;
+ font-size: 12px;
+ margin-bottom: 0.3em;
+}
+.box > .overlay,
+.overlay-wrapper > .overlay,
+.box > .loading-img,
+.overlay-wrapper > .loading-img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+.box .overlay,
+.overlay-wrapper .overlay {
+ z-index: 50;
+ background: rgba(255, 255, 255, 0.7);
+ border-radius: 3px;
+}
+.box .overlay > .fa,
+.overlay-wrapper .overlay > .fa {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin-left: -15px;
+ margin-top: -15px;
+ color: #000;
+ font-size: 30px;
+}
+.box .overlay.dark,
+.overlay-wrapper .overlay.dark {
+ background: rgba(0, 0, 0, 0.5);
+}
+.box-header:before,
+.box-body:before,
+.box-footer:before,
+.box-header:after,
+.box-body:after,
+.box-footer:after {
+ content: " ";
+ display: table;
+}
+.box-header:after,
+.box-body:after,
+.box-footer:after {
+ clear: both;
+}
+.box-header {
+ color: #444;
+ display: block;
+ padding: 10px;
+ position: relative;
+}
+.box-header.with-border {
+ border-bottom: 1px solid #f4f4f4;
+}
+.collapsed-box .box-header.with-border {
+ border-bottom: none;
+}
+.box-header > .fa,
+.box-header > .glyphicon,
+.box-header > .ion,
+.box-header .box-title {
+ display: inline-block;
+ font-size: 18px;
+ margin: 0;
+ line-height: 1;
+}
+.box-header > .fa,
+.box-header > .glyphicon,
+.box-header > .ion {
+ margin-right: 5px;
+}
+.box-header > .box-tools {
+ position: absolute;
+ right: 10px;
+ top: 5px;
+}
+.box-header > .box-tools [data-toggle="tooltip"] {
+ position: relative;
+}
+.box-header > .box-tools.pull-right .dropdown-menu {
+ right: 0;
+ left: auto;
+}
+.box-header > .box-tools .dropdown-menu > li > a {
+ color: #444!important;
+}
+.btn-box-tool {
+ padding: 5px;
+ font-size: 12px;
+ background: transparent;
+ color: #97a0b3;
+}
+.open .btn-box-tool,
+.btn-box-tool:hover {
+ color: #606c84;
+}
+.btn-box-tool.btn:active {
+ box-shadow: none;
+}
+.box-body {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 3px;
+ border-bottom-left-radius: 3px;
+ padding: 10px;
+}
+.no-header .box-body {
+ border-top-right-radius: 3px;
+ border-top-left-radius: 3px;
+}
+.box-body > .table {
+ margin-bottom: 0;
+}
+.box-body .fc {
+ margin-top: 5px;
+}
+.box-body .full-width-chart {
+ margin: -19px;
+}
+.box-body.no-padding .full-width-chart {
+ margin: -9px;
+}
+.box-body .box-pane {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 3px;
+}
+.box-body .box-pane-right {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 3px;
+ border-bottom-left-radius: 0;
+}
+.box-footer {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 3px;
+ border-bottom-left-radius: 3px;
+ border-top: 1px solid #f4f4f4;
+ padding: 10px;
+ background-color: #ffffff;
+}
+.chart-legend {
+ margin: 10px 0;
+}
+ at media (max-width: 991px) {
+ .chart-legend > li {
+ float: left;
+ margin-right: 10px;
+ }
+}
+.box-comments {
+ background: #f7f7f7;
+}
+.box-comments .box-comment {
+ padding: 8px 0;
+ border-bottom: 1px solid #eee;
+}
+.box-comments .box-comment:before,
+.box-comments .box-comment:after {
+ content: " ";
+ display: table;
+}
+.box-comments .box-comment:after {
+ clear: both;
+}
+.box-comments .box-comment:last-of-type {
+ border-bottom: 0;
+}
+.box-comments .box-comment:first-of-type {
+ padding-top: 0;
+}
+.box-comments .box-comment img {
+ float: left;
+}
+.box-comments .comment-text {
+ margin-left: 40px;
+ color: #555;
+}
+.box-comments .username {
+ color: #444;
+ display: block;
+ font-weight: 600;
+}
+.box-comments .text-muted {
+ font-weight: 400;
+ font-size: 12px;
+}
+/* Widget: TODO LIST */
+.todo-list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ overflow: auto;
+}
+.todo-list > li {
+ border-radius: 2px;
+ padding: 10px;
+ background: #f4f4f4;
+ margin-bottom: 2px;
+ border-left: 2px solid #e6e7e8;
+ color: #444;
+}
+.todo-list > li:last-of-type {
+ margin-bottom: 0;
+}
+.todo-list > li > input[type='checkbox'] {
+ margin: 0 10px 0 5px;
+}
+.todo-list > li .text {
+ display: inline-block;
+ margin-left: 5px;
+ font-weight: 600;
+}
+.todo-list > li .label {
+ margin-left: 10px;
+ font-size: 9px;
+}
+.todo-list > li .tools {
+ display: none;
+ float: right;
+ color: #dd4b39;
+}
+.todo-list > li .tools > .fa,
+.todo-list > li .tools > .glyphicon,
+.todo-list > li .tools > .ion {
+ margin-right: 5px;
+ cursor: pointer;
+}
+.todo-list > li:hover .tools {
+ display: inline-block;
+}
+.todo-list > li.done {
+ color: #999;
+}
+.todo-list > li.done .text {
+ text-decoration: line-through;
+ font-weight: 500;
+}
+.todo-list > li.done .label {
+ background: #d2d6de !important;
+}
+.todo-list .danger {
+ border-left-color: #dd4b39;
+}
+.todo-list .warning {
+ border-left-color: #f39c12;
+}
+.todo-list .info {
+ border-left-color: #00c0ef;
+}
+.todo-list .success {
+ border-left-color: #00a65a;
+}
+.todo-list .primary {
+ border-left-color: #3c8dbc;
+}
+.todo-list .handle {
+ display: inline-block;
+ cursor: move;
+ margin: 0 5px;
+}
+/* Chat widget (DEPRECATED - this will be removed in the next major release. Use Direct Chat instead)*/
+.chat {
+ padding: 5px 20px 5px 10px;
+}
+.chat .item {
+ margin-bottom: 10px;
+}
+.chat .item:before,
+.chat .item:after {
+ content: " ";
+ display: table;
+}
+.chat .item:after {
+ clear: both;
+}
+.chat .item > img {
+ width: 40px;
+ height: 40px;
+ border: 2px solid transparent;
+ border-radius: 50%;
+}
+.chat .item > .online {
+ border: 2px solid #00a65a;
+}
+.chat .item > .offline {
+ border: 2px solid #dd4b39;
+}
+.chat .item > .message {
+ margin-left: 55px;
+ margin-top: -40px;
+}
+.chat .item > .message > .name {
+ display: block;
+ font-weight: 600;
+}
+.chat .item > .attachment {
+ border-radius: 3px;
+ background: #f4f4f4;
+ margin-left: 65px;
+ margin-right: 15px;
+ padding: 10px;
+}
+.chat .item > .attachment > h4 {
+ margin: 0 0 5px 0;
+ font-weight: 600;
+ font-size: 14px;
+}
+.chat .item > .attachment > p,
+.chat .item > .attachment > .filename {
+ font-weight: 600;
+ font-size: 13px;
+ font-style: italic;
+ margin: 0;
+}
+.chat .item > .attachment:before,
+.chat .item > .attachment:after {
+ content: " ";
+ display: table;
+}
+.chat .item > .attachment:after {
+ clear: both;
+}
+.box-input {
+ max-width: 200px;
+}
+.modal .panel-body {
+ color: #444;
+}
+/*
+ * Component: Info Box
+ * -------------------
+ */
+.info-box {
+ display: block;
+ min-height: 90px;
+ background: #fff;
+ width: 100%;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+ border-radius: 2px;
+ margin-bottom: 15px;
+}
+.info-box small {
+ font-size: 14px;
+}
+.info-box .progress {
+ background: rgba(0, 0, 0, 0.2);
+ margin: 5px -10px 5px -10px;
+ height: 2px;
+}
+.info-box .progress,
+.info-box .progress .progress-bar {
+ border-radius: 0;
+}
+.info-box .progress .progress-bar {
+ background: #fff;
+}
+.info-box-icon {
+ border-top-left-radius: 2px;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 2px;
+ display: block;
+ float: left;
+ height: 90px;
+ width: 90px;
+ text-align: center;
+ font-size: 45px;
+ line-height: 90px;
+ background: rgba(0, 0, 0, 0.2);
+}
+.info-box-icon > img {
+ max-width: 100%;
+}
+.info-box-content {
+ padding: 5px 10px;
+ margin-left: 90px;
+}
+.info-box-number {
+ display: block;
+ font-weight: bold;
+ font-size: 18px;
+}
+.progress-description,
+.info-box-text {
+ display: block;
+ font-size: 14px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.info-box-text {
+ text-transform: uppercase;
+}
+.info-box-more {
+ display: block;
+}
+.progress-description {
+ margin: 0;
+}
+/*
+ * Component: Timeline
+ * -------------------
+ */
+.timeline {
+ position: relative;
+ margin: 0 0 30px 0;
+ padding: 0;
+ list-style: none;
+}
+.timeline:before {
+ content: '';
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 4px;
+ background: #ddd;
+ left: 31px;
+ margin: 0;
+ border-radius: 2px;
+}
+.timeline > li {
+ position: relative;
+ margin-right: 10px;
+ margin-bottom: 15px;
+}
+.timeline > li:before,
+.timeline > li:after {
+ content: " ";
+ display: table;
+}
+.timeline > li:after {
+ clear: both;
+}
+.timeline > li > .timeline-item {
+ -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+ border-radius: 3px;
+ margin-top: 0;
+ background: #fff;
+ color: #444;
+ margin-left: 60px;
+ margin-right: 15px;
+ padding: 0;
+ position: relative;
+}
+.timeline > li > .timeline-item > .time {
+ color: #999;
+ float: right;
+ padding: 10px;
+ font-size: 12px;
+}
+.timeline > li > .timeline-item > .timeline-header {
+ margin: 0;
+ color: #555;
+ border-bottom: 1px solid #f4f4f4;
+ padding: 10px;
+ font-size: 16px;
+ line-height: 1.1;
+}
+.timeline > li > .timeline-item > .timeline-header > a {
+ font-weight: 600;
+}
+.timeline > li > .timeline-item > .timeline-body,
+.timeline > li > .timeline-item > .timeline-footer {
+ padding: 10px;
+}
+.timeline > li > .fa,
+.timeline > li > .glyphicon,
+.timeline > li > .ion {
+ width: 30px;
+ height: 30px;
+ font-size: 15px;
+ line-height: 30px;
+ position: absolute;
+ color: #666;
+ background: #d2d6de;
+ border-radius: 50%;
+ text-align: center;
+ left: 18px;
+ top: 0;
+}
+.timeline > .time-label > span {
+ font-weight: 600;
+ padding: 5px;
+ display: inline-block;
+ background-color: #fff;
+ border-radius: 4px;
+}
+.timeline-inverse > li > .timeline-item {
+ background: #f0f0f0;
+ border: 1px solid #ddd;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.timeline-inverse > li > .timeline-item > .timeline-header {
+ border-bottom-color: #ddd;
+}
+/*
+ * Component: Button
+ * -----------------
+ */
+.btn {
+ border-radius: 3px;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ border: 1px solid transparent;
+}
+.btn.uppercase {
+ text-transform: uppercase;
+}
+.btn.btn-flat {
+ border-radius: 0;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+ border-width: 1px;
+}
+.btn:active {
+ -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+ -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+ box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+}
+.btn:focus {
+ outline: none;
+}
+.btn.btn-file {
+ position: relative;
+ overflow: hidden;
+}
+.btn.btn-file > input[type='file'] {
+ position: absolute;
+ top: 0;
+ right: 0;
+ min-width: 100%;
+ min-height: 100%;
+ font-size: 100px;
+ text-align: right;
+ opacity: 0;
+ filter: alpha(opacity=0);
+ outline: none;
+ background: white;
+ cursor: inherit;
+ display: block;
+}
+.btn-default {
+ background-color: #f4f4f4;
+ color: #444;
+ border-color: #ddd;
+}
+.btn-default:hover,
+.btn-default:active,
+.btn-default.hover {
+ background-color: #e7e7e7;
+}
+.btn-primary {
+ background-color: #3c8dbc;
+ border-color: #367fa9;
+}
+.btn-primary:hover,
+.btn-primary:active,
+.btn-primary.hover {
+ background-color: #367fa9;
+}
+.btn-success {
+ background-color: #00a65a;
+ border-color: #008d4c;
+}
+.btn-success:hover,
+.btn-success:active,
+.btn-success.hover {
+ background-color: #008d4c;
+}
+.btn-info {
+ background-color: #00c0ef;
+ border-color: #00acd6;
+}
+.btn-info:hover,
+.btn-info:active,
+.btn-info.hover {
+ background-color: #00acd6;
+}
+.btn-danger {
+ background-color: #dd4b39;
+ border-color: #d73925;
+}
+.btn-danger:hover,
+.btn-danger:active,
+.btn-danger.hover {
+ background-color: #d73925;
+}
+.btn-warning {
+ background-color: #f39c12;
+ border-color: #e08e0b;
+}
+.btn-warning:hover,
+.btn-warning:active,
+.btn-warning.hover {
+ background-color: #e08e0b;
+}
+.btn-outline {
+ border: 1px solid #fff;
+ background: transparent;
+ color: #fff;
+}
+.btn-outline:hover,
+.btn-outline:focus,
+.btn-outline:active {
+ color: rgba(255, 255, 255, 0.7);
+ border-color: rgba(255, 255, 255, 0.7);
+}
+.btn-link {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.btn[class*='bg-']:hover {
+ -webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.2);
+ box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.2);
+}
+.btn-app {
+ border-radius: 3px;
+ position: relative;
+ padding: 15px 5px;
+ margin: 0 0 10px 10px;
+ min-width: 80px;
+ height: 60px;
+ text-align: center;
+ color: #666;
+ border: 1px solid #ddd;
+ background-color: #f4f4f4;
+ font-size: 12px;
+}
+.btn-app > .fa,
+.btn-app > .glyphicon,
+.btn-app > .ion {
+ font-size: 20px;
+ display: block;
+}
+.btn-app:hover {
+ background: #f4f4f4;
+ color: #444;
+ border-color: #aaa;
+}
+.btn-app:active,
+.btn-app:focus {
+ -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+ -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+ box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+}
+.btn-app > .badge {
+ position: absolute;
+ top: -3px;
+ right: -10px;
+ font-size: 10px;
+ font-weight: 400;
+}
+/*
+ * Component: Callout
+ * ------------------
+ */
+.callout {
+ border-radius: 3px;
+ margin: 0 0 20px 0;
+ padding: 15px 30px 15px 15px;
+ border-left: 5px solid #eee;
+}
+.callout a {
+ color: #fff;
+ text-decoration: underline;
+}
+.callout a:hover {
+ color: #eee;
+}
+.callout h4 {
+ margin-top: 0;
+ font-weight: 600;
+}
+.callout p:last-child {
+ margin-bottom: 0;
+}
+.callout code,
+.callout .highlight {
+ background-color: #fff;
+}
+.callout.callout-danger {
+ border-color: #c23321;
+}
+.callout.callout-warning {
+ border-color: #c87f0a;
+}
+.callout.callout-info {
+ border-color: #0097bc;
+}
+.callout.callout-success {
+ border-color: #00733e;
+}
+/*
+ * Component: alert
+ * ----------------
+ */
+.alert {
+ border-radius: 3px;
+}
+.alert h4 {
+ font-weight: 600;
+}
+.alert .icon {
+ margin-right: 10px;
+}
+.alert .close {
+ color: #000;
+ opacity: 0.2;
+ filter: alpha(opacity=20);
+}
+.alert .close:hover {
+ opacity: 0.5;
+ filter: alpha(opacity=50);
+}
+.alert a {
+ color: #fff;
+ text-decoration: underline;
+}
+.alert-success {
+ border-color: #008d4c;
+}
+.alert-danger,
+.alert-error {
+ border-color: #d73925;
+}
+.alert-warning {
+ border-color: #e08e0b;
+}
+.alert-info {
+ border-color: #00acd6;
+}
+/*
+ * Component: Nav
+ * --------------
+ */
+.nav > li > a:hover,
+.nav > li > a:active,
+.nav > li > a:focus {
+ color: #444;
+ background: #f7f7f7;
+}
+/* NAV PILLS */
+.nav-pills > li > a {
+ border-radius: 0;
+ border-top: 3px solid transparent;
+ color: #444;
+}
+.nav-pills > li > a > .fa,
+.nav-pills > li > a > .glyphicon,
+.nav-pills > li > a > .ion {
+ margin-right: 5px;
+}
+.nav-pills > li.active > a,
+.nav-pills > li.active > a:hover,
+.nav-pills > li.active > a:focus {
+ border-top-color: #3c8dbc;
+}
+.nav-pills > li.active > a {
+ font-weight: 600;
+}
+/* NAV STACKED */
+.nav-stacked > li > a {
+ border-radius: 0;
+ border-top: 0;
+ border-left: 3px solid transparent;
+ color: #444;
+}
+.nav-stacked > li.active > a,
+.nav-stacked > li.active > a:hover {
+ background: transparent;
+ color: #444;
+ border-top: 0;
+ border-left-color: #3c8dbc;
+}
+.nav-stacked > li.header {
+ border-bottom: 1px solid #ddd;
+ color: #777;
+ margin-bottom: 10px;
+ padding: 5px 10px;
+ text-transform: uppercase;
+}
+/* NAV TABS */
+.nav-tabs-custom {
+ margin-bottom: 20px;
+ background: #fff;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+ border-radius: 3px;
+}
+.nav-tabs-custom > .nav-tabs {
+ margin: 0;
+ border-bottom-color: #f4f4f4;
+ border-top-right-radius: 3px;
+ border-top-left-radius: 3px;
+}
+.nav-tabs-custom > .nav-tabs > li {
+ border-top: 3px solid transparent;
+ margin-bottom: -2px;
+ margin-right: 5px;
+}
+.nav-tabs-custom > .nav-tabs > li > a {
+ color: #444;
+ border-radius: 0;
+}
+.nav-tabs-custom > .nav-tabs > li > a.text-muted {
+ color: #999;
+}
+.nav-tabs-custom > .nav-tabs > li > a,
+.nav-tabs-custom > .nav-tabs > li > a:hover {
+ background: transparent;
+ margin: 0;
+}
+.nav-tabs-custom > .nav-tabs > li > a:hover {
+ color: #999;
+}
+.nav-tabs-custom > .nav-tabs > li:not(.active) > a:hover,
+.nav-tabs-custom > .nav-tabs > li:not(.active) > a:focus,
+.nav-tabs-custom > .nav-tabs > li:not(.active) > a:active {
+ border-color: transparent;
+}
+.nav-tabs-custom > .nav-tabs > li.active {
+ border-top-color: #3c8dbc;
+}
+.nav-tabs-custom > .nav-tabs > li.active > a,
+.nav-tabs-custom > .nav-tabs > li.active:hover > a {
+ background-color: #fff;
+ color: #444;
+}
+.nav-tabs-custom > .nav-tabs > li.active > a {
+ border-top-color: transparent;
+ border-left-color: #f4f4f4;
+ border-right-color: #f4f4f4;
+}
+.nav-tabs-custom > .nav-tabs > li:first-of-type {
+ margin-left: 0;
+}
+.nav-tabs-custom > .nav-tabs > li:first-of-type.active > a {
+ border-left-color: transparent;
+}
+.nav-tabs-custom > .nav-tabs.pull-right {
+ float: none !important;
+}
+.nav-tabs-custom > .nav-tabs.pull-right > li {
+ float: right;
+}
+.nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type {
+ margin-right: 0;
+}
+.nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type > a {
+ border-left-width: 1px;
+}
+.nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type.active > a {
+ border-left-color: #f4f4f4;
+ border-right-color: transparent;
+}
+.nav-tabs-custom > .nav-tabs > li.header {
+ line-height: 35px;
+ padding: 0 10px;
+ font-size: 20px;
+ color: #444;
+}
+.nav-tabs-custom > .nav-tabs > li.header > .fa,
+.nav-tabs-custom > .nav-tabs > li.header > .glyphicon,
+.nav-tabs-custom > .nav-tabs > li.header > .ion {
+ margin-right: 5px;
+}
+.nav-tabs-custom > .tab-content {
+ background: #fff;
+ padding: 10px;
+ border-bottom-right-radius: 3px;
+ border-bottom-left-radius: 3px;
+}
+.nav-tabs-custom .dropdown.open > a:active,
+.nav-tabs-custom .dropdown.open > a:focus {
+ background: transparent;
+ color: #999;
+}
+.nav-tabs-custom.tab-primary > .nav-tabs > li.active {
+ border-top-color: #3c8dbc;
+}
+.nav-tabs-custom.tab-info > .nav-tabs > li.active {
+ border-top-color: #00c0ef;
+}
+.nav-tabs-custom.tab-danger > .nav-tabs > li.active {
+ border-top-color: #dd4b39;
+}
+.nav-tabs-custom.tab-warning > .nav-tabs > li.active {
+ border-top-color: #f39c12;
+}
+.nav-tabs-custom.tab-success > .nav-tabs > li.active {
+ border-top-color: #00a65a;
+}
+.nav-tabs-custom.tab-default > .nav-tabs > li.active {
+ border-top-color: #d2d6de;
+}
+/* PAGINATION */
+.pagination > li > a {
+ background: #fafafa;
+ color: #666;
+}
+.pagination.pagination-flat > li > a {
+ border-radius: 0 !important;
+}
+/*
+ * Component: Products List
+ * ------------------------
+ */
+.products-list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+.products-list > .item {
+ border-radius: 3px;
+ -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+ padding: 10px 0;
+ background: #fff;
+}
+.products-list > .item:before,
+.products-list > .item:after {
+ content: " ";
+ display: table;
+}
+.products-list > .item:after {
+ clear: both;
+}
+.products-list .product-img {
+ float: left;
+}
+.products-list .product-img img {
+ width: 50px;
+ height: 50px;
+}
+.products-list .product-info {
+ margin-left: 60px;
+}
+.products-list .product-title {
+ font-weight: 600;
+}
+.products-list .product-description {
+ display: block;
+ color: #999;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+.product-list-in-box > .item {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ border-radius: 0;
+ border-bottom: 1px solid #f4f4f4;
+}
+.product-list-in-box > .item:last-of-type {
+ border-bottom-width: 0;
+}
+/*
+ * Component: Table
+ * ----------------
+ */
+.table > thead > tr > th,
+.table > tbody > tr > th,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > tbody > tr > td,
+.table > tfoot > tr > td {
+ border-top: 1px solid #f4f4f4;
+}
+.table > thead > tr > th {
+ border-bottom: 2px solid #f4f4f4;
+}
+.table tr td .progress {
+ margin-top: 5px;
+}
+.table-bordered {
+ border: 1px solid #f4f4f4;
+}
+.table-bordered > thead > tr > th,
+.table-bordered > tbody > tr > th,
+.table-bordered > tfoot > tr > th,
+.table-bordered > thead > tr > td,
+.table-bordered > tbody > tr > td,
+.table-bordered > tfoot > tr > td {
+ border: 1px solid #f4f4f4;
+}
+.table-bordered > thead > tr > th,
+.table-bordered > thead > tr > td {
+ border-bottom-width: 2px;
+}
+.table.no-border,
+.table.no-border td,
+.table.no-border th {
+ border: 0;
+}
+/* .text-center in tables */
+table.text-center,
+table.text-center td,
+table.text-center th {
+ text-align: center;
+}
+.table.align th {
+ text-align: left;
+}
+.table.align td {
+ text-align: right;
+}
+/*
+ * Component: Label
+ * ----------------
+ */
+.label-default {
+ background-color: #d2d6de;
+ color: #444;
+}
+/*
+ * Component: Direct Chat
+ * ----------------------
+ */
+.direct-chat .box-body {
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+ position: relative;
+ overflow-x: hidden;
+ padding: 0;
+}
+.direct-chat.chat-pane-open .direct-chat-contacts {
+ -webkit-transform: translate(0, 0);
+ -ms-transform: translate(0, 0);
+ -o-transform: translate(0, 0);
+ transform: translate(0, 0);
+}
+.direct-chat-messages {
+ -webkit-transform: translate(0, 0);
+ -ms-transform: translate(0, 0);
+ -o-transform: translate(0, 0);
+ transform: translate(0, 0);
+ padding: 10px;
+ height: 250px;
+ overflow: auto;
+}
+.direct-chat-msg,
+.direct-chat-text {
+ display: block;
+}
+.direct-chat-msg {
+ margin-bottom: 10px;
+}
+.direct-chat-msg:before,
+.direct-chat-msg:after {
+ content: " ";
+ display: table;
+}
+.direct-chat-msg:after {
+ clear: both;
+}
+.direct-chat-messages,
+.direct-chat-contacts {
+ -webkit-transition: -webkit-transform 0.5s ease-in-out;
+ -moz-transition: -moz-transform 0.5s ease-in-out;
+ -o-transition: -o-transform 0.5s ease-in-out;
+ transition: transform 0.5s ease-in-out;
+}
+.direct-chat-text {
+ border-radius: 5px;
+ position: relative;
+ padding: 5px 10px;
+ background: #d2d6de;
+ border: 1px solid #d2d6de;
+ margin: 5px 0 0 50px;
+ color: #444444;
+}
+.direct-chat-text:after,
+.direct-chat-text:before {
+ position: absolute;
+ right: 100%;
+ top: 15px;
+ border: solid transparent;
+ border-right-color: #d2d6de;
+ content: ' ';
+ height: 0;
+ width: 0;
+ pointer-events: none;
+}
+.direct-chat-text:after {
+ border-width: 5px;
+ margin-top: -5px;
+}
+.direct-chat-text:before {
+ border-width: 6px;
+ margin-top: -6px;
+}
+.right .direct-chat-text {
+ margin-right: 50px;
+ margin-left: 0;
+}
+.right .direct-chat-text:after,
+.right .direct-chat-text:before {
+ right: auto;
+ left: 100%;
+ border-right-color: transparent;
+ border-left-color: #d2d6de;
+}
+.direct-chat-img {
+ border-radius: 50%;
+ float: left;
+ width: 40px;
+ height: 40px;
+}
+.right .direct-chat-img {
+ float: right;
+}
+.direct-chat-info {
+ display: block;
+ margin-bottom: 2px;
+ font-size: 12px;
+}
+.direct-chat-name {
+ font-weight: 600;
+}
+.direct-chat-timestamp {
+ color: #999;
+}
+.direct-chat-contacts-open .direct-chat-contacts {
+ -webkit-transform: translate(0, 0);
+ -ms-transform: translate(0, 0);
+ -o-transform: translate(0, 0);
+ transform: translate(0, 0);
+}
+.direct-chat-contacts {
+ -webkit-transform: translate(101%, 0);
+ -ms-transform: translate(101%, 0);
+ -o-transform: translate(101%, 0);
+ transform: translate(101%, 0);
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ height: 250px;
+ width: 100%;
+ background: #222d32;
+ color: #fff;
+ overflow: auto;
+}
+.contacts-list > li {
+ border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+ padding: 10px;
+ margin: 0;
+}
+.contacts-list > li:before,
+.contacts-list > li:after {
+ content: " ";
+ display: table;
+}
+.contacts-list > li:after {
+ clear: both;
+}
+.contacts-list > li:last-of-type {
+ border-bottom: none;
+}
+.contacts-list-img {
+ border-radius: 50%;
+ width: 40px;
+ float: left;
+}
+.contacts-list-info {
+ margin-left: 45px;
+ color: #fff;
+}
+.contacts-list-name,
+.contacts-list-status {
+ display: block;
+}
+.contacts-list-name {
+ font-weight: 600;
+}
+.contacts-list-status {
+ font-size: 12px;
+}
+.contacts-list-date {
+ color: #aaa;
+ font-weight: normal;
+}
+.contacts-list-msg {
+ color: #999;
+}
+.direct-chat-danger .right > .direct-chat-text {
+ background: #dd4b39;
+ border-color: #dd4b39;
+ color: #ffffff;
+}
+.direct-chat-danger .right > .direct-chat-text:after,
+.direct-chat-danger .right > .direct-chat-text:before {
+ border-left-color: #dd4b39;
+}
+.direct-chat-primary .right > .direct-chat-text {
+ background: #3c8dbc;
+ border-color: #3c8dbc;
+ color: #ffffff;
+}
+.direct-chat-primary .right > .direct-chat-text:after,
+.direct-chat-primary .right > .direct-chat-text:before {
+ border-left-color: #3c8dbc;
+}
+.direct-chat-warning .right > .direct-chat-text {
+ background: #f39c12;
+ border-color: #f39c12;
+ color: #ffffff;
+}
+.direct-chat-warning .right > .direct-chat-text:after,
+.direct-chat-warning .right > .direct-chat-text:before {
+ border-left-color: #f39c12;
+}
+.direct-chat-info .right > .direct-chat-text {
+ background: #00c0ef;
+ border-color: #00c0ef;
+ color: #ffffff;
+}
+.direct-chat-info .right > .direct-chat-text:after,
+.direct-chat-info .right > .direct-chat-text:before {
+ border-left-color: #00c0ef;
+}
+.direct-chat-success .right > .direct-chat-text {
+ background: #00a65a;
+ border-color: #00a65a;
+ color: #ffffff;
+}
+.direct-chat-success .right > .direct-chat-text:after,
+.direct-chat-success .right > .direct-chat-text:before {
+ border-left-color: #00a65a;
+}
+/*
+ * Component: Users List
+ * ---------------------
+ */
+.users-list > li {
+ width: 25%;
+ float: left;
+ padding: 10px;
+ text-align: center;
+}
+.users-list > li img {
+ border-radius: 50%;
+ max-width: 100%;
+ height: auto;
+}
+.users-list > li > a:hover,
+.users-list > li > a:hover .users-list-name {
+ color: #999;
+}
+.users-list-name,
+.users-list-date {
+ display: block;
+}
+.users-list-name {
+ font-weight: 600;
+ color: #444;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+.users-list-date {
+ color: #999;
+ font-size: 12px;
+}
+/*
+ * Component: Carousel
+ * -------------------
+ */
+.carousel-control.left,
+.carousel-control.right {
+ background-image: none;
+}
+.carousel-control > .fa {
+ font-size: 40px;
+ position: absolute;
+ top: 50%;
+ z-index: 5;
+ display: inline-block;
+ margin-top: -20px;
+}
+/*
+ * Component: modal
+ * ----------------
+ */
+.modal {
+ background: rgba(0, 0, 0, 0.3);
+}
+.modal-content {
+ border-radius: 0;
+ -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.125);
+ box-shadow: 0 2px 3px rgba(0, 0, 0, 0.125);
+ border: 0;
+}
+ at media (min-width: 768px) {
+ .modal-content {
+ -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.125);
+ box-shadow: 0 2px 3px rgba(0, 0, 0, 0.125);
+ }
+}
+.modal-header {
+ border-bottom-color: #f4f4f4;
+}
+.modal-footer {
+ border-top-color: #f4f4f4;
+}
+.modal-primary .modal-header,
+.modal-primary .modal-footer {
+ border-color: #307095;
+}
+.modal-warning .modal-header,
+.modal-warning .modal-footer {
+ border-color: #c87f0a;
+}
+.modal-info .modal-header,
+.modal-info .modal-footer {
+ border-color: #0097bc;
+}
+.modal-success .modal-header,
+.modal-success .modal-footer {
+ border-color: #00733e;
+}
+.modal-danger .modal-header,
+.modal-danger .modal-footer {
+ border-color: #c23321;
+}
+/*
+ * Component: Social Widgets
+ * -------------------------
+ */
+.box-widget {
+ border: none;
+ position: relative;
+}
+.widget-user .widget-user-header {
+ padding: 20px;
+ height: 120px;
+ border-top-right-radius: 3px;
+ border-top-left-radius: 3px;
+}
+.widget-user .widget-user-username {
+ margin-top: 0;
+ margin-bottom: 5px;
+ font-size: 25px;
+ font-weight: 300;
+ text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+}
+.widget-user .widget-user-desc {
+ margin-top: 0;
+}
+.widget-user .widget-user-image {
+ position: absolute;
+ top: 65px;
+ left: 50%;
+ margin-left: -45px;
+}
+.widget-user .widget-user-image > img {
+ width: 90px;
+ height: auto;
+ border: 3px solid #fff;
+}
+.widget-user .box-footer {
+ padding-top: 30px;
+}
+.widget-user-2 .widget-user-header {
+ padding: 20px;
+ border-top-right-radius: 3px;
+ border-top-left-radius: 3px;
+}
+.widget-user-2 .widget-user-username {
+ margin-top: 5px;
+ margin-bottom: 5px;
+ font-size: 25px;
+ font-weight: 300;
+}
+.widget-user-2 .widget-user-desc {
+ margin-top: 0;
+}
+.widget-user-2 .widget-user-username,
+.widget-user-2 .widget-user-desc {
+ margin-left: 75px;
+}
+.widget-user-2 .widget-user-image > img {
+ width: 65px;
+ height: auto;
+ float: left;
+}
+/*
+ * Page: Mailbox
+ * -------------
+ */
+.mailbox-messages > .table {
+ margin: 0;
+}
+.mailbox-controls {
+ padding: 5px;
+}
+.mailbox-controls.with-border {
+ border-bottom: 1px solid #f4f4f4;
+}
+.mailbox-read-info {
+ border-bottom: 1px solid #f4f4f4;
+ padding: 10px;
+}
+.mailbox-read-info h3 {
+ font-size: 20px;
+ margin: 0;
+}
+.mailbox-read-info h5 {
+ margin: 0;
+ padding: 5px 0 0 0;
+}
+.mailbox-read-time {
+ color: #999;
+ font-size: 13px;
+}
+.mailbox-read-message {
+ padding: 10px;
+}
+.mailbox-attachments li {
+ float: left;
+ width: 200px;
+ border: 1px solid #eee;
+ margin-bottom: 10px;
+ margin-right: 10px;
+}
+.mailbox-attachment-name {
+ font-weight: bold;
+ color: #666;
+}
+.mailbox-attachment-icon,
+.mailbox-attachment-info,
+.mailbox-attachment-size {
+ display: block;
+}
+.mailbox-attachment-info {
+ padding: 10px;
+ background: #f4f4f4;
+}
+.mailbox-attachment-size {
+ color: #999;
+ font-size: 12px;
+}
+.mailbox-attachment-icon {
+ text-align: center;
+ font-size: 65px;
+ color: #666;
+ padding: 20px 10px;
+}
+.mailbox-attachment-icon.has-img {
+ padding: 0;
+}
+.mailbox-attachment-icon.has-img > img {
+ max-width: 100%;
+ height: auto;
+}
+/*
+ * Page: Lock Screen
+ * -----------------
+ */
+/* ADD THIS CLASS TO THE <BODY> TAG */
+.lockscreen {
+ background: #d2d6de;
+}
+.lockscreen-logo {
+ font-size: 35px;
+ text-align: center;
+ margin-bottom: 25px;
+ font-weight: 300;
+}
+.lockscreen-logo a {
+ color: #444;
+}
+.lockscreen-wrapper {
+ max-width: 400px;
+ margin: 0 auto;
+ margin-top: 10%;
+}
+/* User name [optional] */
+.lockscreen .lockscreen-name {
+ text-align: center;
+ font-weight: 600;
+}
+/* Will contain the image and the sign in form */
+.lockscreen-item {
+ border-radius: 4px;
+ padding: 0;
+ background: #fff;
+ position: relative;
+ margin: 10px auto 30px auto;
+ width: 290px;
+}
+/* User image */
+.lockscreen-image {
+ border-radius: 50%;
+ position: absolute;
+ left: -10px;
+ top: -25px;
+ background: #fff;
+ padding: 5px;
+ z-index: 10;
+}
+.lockscreen-image > img {
+ border-radius: 50%;
+ width: 70px;
+ height: 70px;
+}
+/* Contains the password input and the login button */
+.lockscreen-credentials {
+ margin-left: 70px;
+}
+.lockscreen-credentials .form-control {
+ border: 0;
+}
+.lockscreen-credentials .btn {
+ background-color: #fff;
+ border: 0;
+ padding: 0 10px;
+}
+.lockscreen-footer {
+ margin-top: 10px;
+}
+/*
+ * Page: Login & Register
+ * ----------------------
+ */
+.login-logo,
+.register-logo {
+ font-size: 35px;
+ text-align: center;
+ margin-bottom: 25px;
+ font-weight: 300;
+}
+.login-logo a,
+.register-logo a {
+ color: #444;
+}
+.login-page,
+.register-page {
+ background: #d2d6de;
+}
+.login-box,
+.register-box {
+ width: 360px;
+ margin: 7% auto;
+}
+ at media (max-width: 768px) {
+ .login-box,
+ .register-box {
+ width: 90%;
+ margin-top: 20px;
+ }
+}
+.login-box-body,
+.register-box-body {
+ background: #fff;
+ padding: 20px;
+ border-top: 0;
+ color: #666;
+}
+.login-box-body .form-control-feedback,
+.register-box-body .form-control-feedback {
+ color: #777;
+}
+.login-box-msg,
+.register-box-msg {
+ margin: 0;
+ text-align: center;
+ padding: 0 20px 20px 20px;
+}
+.social-auth-links {
+ margin: 10px 0;
+}
+/*
+ * Page: 400 and 500 error pages
+ * ------------------------------
+ */
+.error-page {
+ width: 600px;
+ margin: 20px auto 0 auto;
+}
+ at media (max-width: 991px) {
+ .error-page {
+ width: 100%;
+ }
+}
+.error-page > .headline {
+ float: left;
+ font-size: 100px;
+ font-weight: 300;
+}
+ at media (max-width: 991px) {
+ .error-page > .headline {
+ float: none;
+ text-align: center;
+ }
+}
+.error-page > .error-content {
+ margin-left: 190px;
+ display: block;
+}
+ at media (max-width: 991px) {
+ .error-page > .error-content {
+ margin-left: 0;
+ }
+}
+.error-page > .error-content > h3 {
+ font-weight: 300;
+ font-size: 25px;
+}
+ at media (max-width: 991px) {
+ .error-page > .error-content > h3 {
+ text-align: center;
+ }
+}
+/*
+ * Page: Invoice
+ * -------------
+ */
+.invoice {
+ position: relative;
+ background: #fff;
+ border: 1px solid #f4f4f4;
+ padding: 20px;
+ margin: 10px 25px;
+}
+.invoice-title {
+ margin-top: 0;
+}
+/*
+ * Page: Profile
+ * -------------
+ */
+.profile-user-img {
+ margin: 0 auto;
+ width: 100px;
+ padding: 3px;
+ border: 3px solid #d2d6de;
+}
+.profile-username {
+ font-size: 21px;
+ margin-top: 5px;
+}
+.post {
+ border-bottom: 1px solid #d2d6de;
+ margin-bottom: 15px;
+ padding-bottom: 15px;
+ color: #666;
+}
+.post:last-of-type {
+ border-bottom: 0;
+ margin-bottom: 0;
+ padding-bottom: 0;
+}
+.post .user-block {
+ margin-bottom: 15px;
+}
+/*
+ * Social Buttons for Bootstrap
+ *
+ * Copyright 2013-2015 Panayiotis Lipiridis
+ * Licensed under the MIT License
+ *
+ * https://github.com/lipis/bootstrap-social
+ */
+.btn-social {
+ position: relative;
+ padding-left: 44px;
+ text-align: left;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.btn-social > :first-child {
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 32px;
+ line-height: 34px;
+ font-size: 1.6em;
+ text-align: center;
+ border-right: 1px solid rgba(0, 0, 0, 0.2);
+}
+.btn-social.btn-lg {
+ padding-left: 61px;
+}
+.btn-social.btn-lg > :first-child {
+ line-height: 45px;
+ width: 45px;
+ font-size: 1.8em;
+}
+.btn-social.btn-sm {
+ padding-left: 38px;
+}
+.btn-social.btn-sm > :first-child {
+ line-height: 28px;
+ width: 28px;
+ font-size: 1.4em;
+}
+.btn-social.btn-xs {
+ padding-left: 30px;
+}
+.btn-social.btn-xs > :first-child {
+ line-height: 20px;
+ width: 20px;
+ font-size: 1.2em;
+}
+.btn-social-icon {
+ position: relative;
+ padding-left: 44px;
+ text-align: left;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ height: 34px;
+ width: 34px;
+ padding: 0;
+}
+.btn-social-icon > :first-child {
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 32px;
+ line-height: 34px;
+ font-size: 1.6em;
+ text-align: center;
+ border-right: 1px solid rgba(0, 0, 0, 0.2);
+}
+.btn-social-icon.btn-lg {
+ padding-left: 61px;
+}
+.btn-social-icon.btn-lg > :first-child {
+ line-height: 45px;
+ width: 45px;
+ font-size: 1.8em;
+}
+.btn-social-icon.btn-sm {
+ padding-left: 38px;
+}
+.btn-social-icon.btn-sm > :first-child {
+ line-height: 28px;
+ width: 28px;
+ font-size: 1.4em;
+}
+.btn-social-icon.btn-xs {
+ padding-left: 30px;
+}
+.btn-social-icon.btn-xs > :first-child {
+ line-height: 20px;
+ width: 20px;
+ font-size: 1.2em;
+}
+.btn-social-icon > :first-child {
+ border: none;
+ text-align: center;
+ width: 100%;
+}
+.btn-social-icon.btn-lg {
+ height: 45px;
+ width: 45px;
+ padding-left: 0;
+ padding-right: 0;
+}
+.btn-social-icon.btn-sm {
+ height: 30px;
+ width: 30px;
+ padding-left: 0;
+ padding-right: 0;
+}
+.btn-social-icon.btn-xs {
+ height: 22px;
+ width: 22px;
+ padding-left: 0;
+ padding-right: 0;
+}
+.btn-adn {
+ color: #ffffff;
+ background-color: #d87a68;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-adn:focus,
+.btn-adn.focus {
+ color: #ffffff;
+ background-color: #ce563f;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-adn:hover {
+ color: #ffffff;
+ background-color: #ce563f;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-adn:active,
+.btn-adn.active,
+.open > .dropdown-toggle.btn-adn {
+ color: #ffffff;
+ background-color: #ce563f;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-adn:active,
+.btn-adn.active,
+.open > .dropdown-toggle.btn-adn {
+ background-image: none;
+}
+.btn-adn .badge {
+ color: #d87a68;
+ background-color: #ffffff;
+}
+.btn-bitbucket {
+ color: #ffffff;
+ background-color: #205081;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-bitbucket:focus,
+.btn-bitbucket.focus {
+ color: #ffffff;
+ background-color: #163758;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-bitbucket:hover {
+ color: #ffffff;
+ background-color: #163758;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-bitbucket:active,
+.btn-bitbucket.active,
+.open > .dropdown-toggle.btn-bitbucket {
+ color: #ffffff;
+ background-color: #163758;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-bitbucket:active,
+.btn-bitbucket.active,
+.open > .dropdown-toggle.btn-bitbucket {
+ background-image: none;
+}
+.btn-bitbucket .badge {
+ color: #205081;
+ background-color: #ffffff;
+}
+.btn-dropbox {
+ color: #ffffff;
+ background-color: #1087dd;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-dropbox:focus,
+.btn-dropbox.focus {
+ color: #ffffff;
+ background-color: #0d6aad;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-dropbox:hover {
+ color: #ffffff;
+ background-color: #0d6aad;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-dropbox:active,
+.btn-dropbox.active,
+.open > .dropdown-toggle.btn-dropbox {
+ color: #ffffff;
+ background-color: #0d6aad;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-dropbox:active,
+.btn-dropbox.active,
+.open > .dropdown-toggle.btn-dropbox {
+ background-image: none;
+}
+.btn-dropbox .badge {
+ color: #1087dd;
+ background-color: #ffffff;
+}
+.btn-facebook {
+ color: #ffffff;
+ background-color: #3b5998;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-facebook:focus,
+.btn-facebook.focus {
+ color: #ffffff;
+ background-color: #2d4373;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-facebook:hover {
+ color: #ffffff;
+ background-color: #2d4373;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-facebook:active,
+.btn-facebook.active,
+.open > .dropdown-toggle.btn-facebook {
+ color: #ffffff;
+ background-color: #2d4373;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-facebook:active,
+.btn-facebook.active,
+.open > .dropdown-toggle.btn-facebook {
+ background-image: none;
+}
+.btn-facebook .badge {
+ color: #3b5998;
+ background-color: #ffffff;
+}
+.btn-flickr {
+ color: #ffffff;
+ background-color: #ff0084;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-flickr:focus,
+.btn-flickr.focus {
+ color: #ffffff;
+ background-color: #cc006a;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-flickr:hover {
+ color: #ffffff;
+ background-color: #cc006a;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-flickr:active,
+.btn-flickr.active,
+.open > .dropdown-toggle.btn-flickr {
+ color: #ffffff;
+ background-color: #cc006a;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-flickr:active,
+.btn-flickr.active,
+.open > .dropdown-toggle.btn-flickr {
+ background-image: none;
+}
+.btn-flickr .badge {
+ color: #ff0084;
+ background-color: #ffffff;
+}
+.btn-foursquare {
+ color: #ffffff;
+ background-color: #f94877;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-foursquare:focus,
+.btn-foursquare.focus {
+ color: #ffffff;
+ background-color: #f71752;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-foursquare:hover {
+ color: #ffffff;
+ background-color: #f71752;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-foursquare:active,
+.btn-foursquare.active,
+.open > .dropdown-toggle.btn-foursquare {
+ color: #ffffff;
+ background-color: #f71752;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-foursquare:active,
+.btn-foursquare.active,
+.open > .dropdown-toggle.btn-foursquare {
+ background-image: none;
+}
+.btn-foursquare .badge {
+ color: #f94877;
+ background-color: #ffffff;
+}
+.btn-github {
+ color: #ffffff;
+ background-color: #444444;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-github:focus,
+.btn-github.focus {
+ color: #ffffff;
+ background-color: #2b2b2b;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-github:hover {
+ color: #ffffff;
+ background-color: #2b2b2b;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-github:active,
+.btn-github.active,
+.open > .dropdown-toggle.btn-github {
+ color: #ffffff;
+ background-color: #2b2b2b;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-github:active,
+.btn-github.active,
+.open > .dropdown-toggle.btn-github {
+ background-image: none;
+}
+.btn-github .badge {
+ color: #444444;
+ background-color: #ffffff;
+}
+.btn-google {
+ color: #ffffff;
+ background-color: #dd4b39;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-google:focus,
+.btn-google.focus {
+ color: #ffffff;
+ background-color: #c23321;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-google:hover {
+ color: #ffffff;
+ background-color: #c23321;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-google:active,
+.btn-google.active,
+.open > .dropdown-toggle.btn-google {
+ color: #ffffff;
+ background-color: #c23321;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-google:active,
+.btn-google.active,
+.open > .dropdown-toggle.btn-google {
+ background-image: none;
+}
+.btn-google .badge {
+ color: #dd4b39;
+ background-color: #ffffff;
+}
+.btn-instagram {
+ color: #ffffff;
+ background-color: #3f729b;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-instagram:focus,
+.btn-instagram.focus {
+ color: #ffffff;
+ background-color: #305777;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-instagram:hover {
+ color: #ffffff;
+ background-color: #305777;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-instagram:active,
+.btn-instagram.active,
+.open > .dropdown-toggle.btn-instagram {
+ color: #ffffff;
+ background-color: #305777;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-instagram:active,
+.btn-instagram.active,
+.open > .dropdown-toggle.btn-instagram {
+ background-image: none;
+}
+.btn-instagram .badge {
+ color: #3f729b;
+ background-color: #ffffff;
+}
+.btn-linkedin {
+ color: #ffffff;
+ background-color: #007bb6;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-linkedin:focus,
+.btn-linkedin.focus {
+ color: #ffffff;
+ background-color: #005983;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-linkedin:hover {
+ color: #ffffff;
+ background-color: #005983;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-linkedin:active,
+.btn-linkedin.active,
+.open > .dropdown-toggle.btn-linkedin {
+ color: #ffffff;
+ background-color: #005983;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-linkedin:active,
+.btn-linkedin.active,
+.open > .dropdown-toggle.btn-linkedin {
+ background-image: none;
+}
+.btn-linkedin .badge {
+ color: #007bb6;
+ background-color: #ffffff;
+}
+.btn-microsoft {
+ color: #ffffff;
+ background-color: #2672ec;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-microsoft:focus,
+.btn-microsoft.focus {
+ color: #ffffff;
+ background-color: #125acd;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-microsoft:hover {
+ color: #ffffff;
+ background-color: #125acd;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-microsoft:active,
+.btn-microsoft.active,
+.open > .dropdown-toggle.btn-microsoft {
+ color: #ffffff;
+ background-color: #125acd;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-microsoft:active,
+.btn-microsoft.active,
+.open > .dropdown-toggle.btn-microsoft {
+ background-image: none;
+}
+.btn-microsoft .badge {
+ color: #2672ec;
+ background-color: #ffffff;
+}
+.btn-openid {
+ color: #ffffff;
+ background-color: #f7931e;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-openid:focus,
+.btn-openid.focus {
+ color: #ffffff;
+ background-color: #da7908;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-openid:hover {
+ color: #ffffff;
+ background-color: #da7908;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-openid:active,
+.btn-openid.active,
+.open > .dropdown-toggle.btn-openid {
+ color: #ffffff;
+ background-color: #da7908;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-openid:active,
+.btn-openid.active,
+.open > .dropdown-toggle.btn-openid {
+ background-image: none;
+}
+.btn-openid .badge {
+ color: #f7931e;
+ background-color: #ffffff;
+}
+.btn-pinterest {
+ color: #ffffff;
+ background-color: #cb2027;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-pinterest:focus,
+.btn-pinterest.focus {
+ color: #ffffff;
+ background-color: #9f191f;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-pinterest:hover {
+ color: #ffffff;
+ background-color: #9f191f;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-pinterest:active,
+.btn-pinterest.active,
+.open > .dropdown-toggle.btn-pinterest {
+ color: #ffffff;
+ background-color: #9f191f;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-pinterest:active,
+.btn-pinterest.active,
+.open > .dropdown-toggle.btn-pinterest {
+ background-image: none;
+}
+.btn-pinterest .badge {
+ color: #cb2027;
+ background-color: #ffffff;
+}
+.btn-reddit {
+ color: #000000;
+ background-color: #eff7ff;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-reddit:focus,
+.btn-reddit.focus {
+ color: #000000;
+ background-color: #bcddff;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-reddit:hover {
+ color: #000000;
+ background-color: #bcddff;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-reddit:active,
+.btn-reddit.active,
+.open > .dropdown-toggle.btn-reddit {
+ color: #000000;
+ background-color: #bcddff;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-reddit:active,
+.btn-reddit.active,
+.open > .dropdown-toggle.btn-reddit {
+ background-image: none;
+}
+.btn-reddit .badge {
+ color: #eff7ff;
+ background-color: #000000;
+}
+.btn-soundcloud {
+ color: #ffffff;
+ background-color: #ff5500;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-soundcloud:focus,
+.btn-soundcloud.focus {
+ color: #ffffff;
+ background-color: #cc4400;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-soundcloud:hover {
+ color: #ffffff;
+ background-color: #cc4400;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-soundcloud:active,
+.btn-soundcloud.active,
+.open > .dropdown-toggle.btn-soundcloud {
+ color: #ffffff;
+ background-color: #cc4400;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-soundcloud:active,
+.btn-soundcloud.active,
+.open > .dropdown-toggle.btn-soundcloud {
+ background-image: none;
+}
+.btn-soundcloud .badge {
+ color: #ff5500;
+ background-color: #ffffff;
+}
+.btn-tumblr {
+ color: #ffffff;
+ background-color: #2c4762;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-tumblr:focus,
+.btn-tumblr.focus {
+ color: #ffffff;
+ background-color: #1c2d3f;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-tumblr:hover {
+ color: #ffffff;
+ background-color: #1c2d3f;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-tumblr:active,
+.btn-tumblr.active,
+.open > .dropdown-toggle.btn-tumblr {
+ color: #ffffff;
+ background-color: #1c2d3f;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-tumblr:active,
+.btn-tumblr.active,
+.open > .dropdown-toggle.btn-tumblr {
+ background-image: none;
+}
+.btn-tumblr .badge {
+ color: #2c4762;
+ background-color: #ffffff;
+}
+.btn-twitter {
+ color: #ffffff;
+ background-color: #55acee;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-twitter:focus,
+.btn-twitter.focus {
+ color: #ffffff;
+ background-color: #2795e9;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-twitter:hover {
+ color: #ffffff;
+ background-color: #2795e9;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-twitter:active,
+.btn-twitter.active,
+.open > .dropdown-toggle.btn-twitter {
+ color: #ffffff;
+ background-color: #2795e9;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-twitter:active,
+.btn-twitter.active,
+.open > .dropdown-toggle.btn-twitter {
+ background-image: none;
+}
+.btn-twitter .badge {
+ color: #55acee;
+ background-color: #ffffff;
+}
+.btn-vimeo {
+ color: #ffffff;
+ background-color: #1ab7ea;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-vimeo:focus,
+.btn-vimeo.focus {
+ color: #ffffff;
+ background-color: #1295bf;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-vimeo:hover {
+ color: #ffffff;
+ background-color: #1295bf;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-vimeo:active,
+.btn-vimeo.active,
+.open > .dropdown-toggle.btn-vimeo {
+ color: #ffffff;
+ background-color: #1295bf;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-vimeo:active,
+.btn-vimeo.active,
+.open > .dropdown-toggle.btn-vimeo {
+ background-image: none;
+}
+.btn-vimeo .badge {
+ color: #1ab7ea;
+ background-color: #ffffff;
+}
+.btn-vk {
+ color: #ffffff;
+ background-color: #587ea3;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-vk:focus,
+.btn-vk.focus {
+ color: #ffffff;
+ background-color: #466482;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-vk:hover {
+ color: #ffffff;
+ background-color: #466482;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-vk:active,
+.btn-vk.active,
+.open > .dropdown-toggle.btn-vk {
+ color: #ffffff;
+ background-color: #466482;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-vk:active,
+.btn-vk.active,
+.open > .dropdown-toggle.btn-vk {
+ background-image: none;
+}
+.btn-vk .badge {
+ color: #587ea3;
+ background-color: #ffffff;
+}
+.btn-yahoo {
+ color: #ffffff;
+ background-color: #720e9e;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-yahoo:focus,
+.btn-yahoo.focus {
+ color: #ffffff;
+ background-color: #500a6f;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-yahoo:hover {
+ color: #ffffff;
+ background-color: #500a6f;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-yahoo:active,
+.btn-yahoo.active,
+.open > .dropdown-toggle.btn-yahoo {
+ color: #ffffff;
+ background-color: #500a6f;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-yahoo:active,
+.btn-yahoo.active,
+.open > .dropdown-toggle.btn-yahoo {
+ background-image: none;
+}
+.btn-yahoo .badge {
+ color: #720e9e;
+ background-color: #ffffff;
+}
+/*
+ * Plugin: Full Calendar
+ * ---------------------
+ */
+.fc-button {
+ background: #f4f4f4;
+ background-image: none;
+ color: #444;
+ border-color: #ddd;
+ border-bottom-color: #ddd;
+}
+.fc-button:hover,
+.fc-button:active,
+.fc-button.hover {
+ background-color: #e9e9e9;
+}
+.fc-header-title h2 {
+ font-size: 15px;
+ line-height: 1.6em;
+ color: #666;
+ margin-left: 10px;
+}
+.fc-header-right {
+ padding-right: 10px;
+}
+.fc-header-left {
+ padding-left: 10px;
+}
+.fc-widget-header {
+ background: #fafafa;
+}
+.fc-grid {
+ width: 100%;
+ border: 0;
+}
+.fc-widget-header:first-of-type,
+.fc-widget-content:first-of-type {
+ border-left: 0;
+ border-right: 0;
+}
+.fc-widget-header:last-of-type,
+.fc-widget-content:last-of-type {
+ border-right: 0;
+}
+.fc-toolbar {
+ padding: 10px;
+ margin: 0;
+}
+.fc-day-number {
+ font-size: 20px;
+ font-weight: 300;
+ padding-right: 10px;
+}
+.fc-color-picker {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+.fc-color-picker > li {
+ float: left;
+ font-size: 30px;
+ margin-right: 5px;
+ line-height: 30px;
+}
+.fc-color-picker > li .fa {
+ -webkit-transition: -webkit-transform linear 0.3s;
+ -moz-transition: -moz-transform linear 0.3s;
+ -o-transition: -o-transform linear 0.3s;
+ transition: transform linear 0.3s;
+}
+.fc-color-picker > li .fa:hover {
+ -webkit-transform: rotate(30deg);
+ -ms-transform: rotate(30deg);
+ -o-transform: rotate(30deg);
+ transform: rotate(30deg);
+}
+#add-new-event {
+ -webkit-transition: all linear 0.3s;
+ -o-transition: all linear 0.3s;
+ transition: all linear 0.3s;
+}
+.external-event {
+ padding: 5px 10px;
+ font-weight: bold;
+ margin-bottom: 4px;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+ text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+ border-radius: 3px;
+ cursor: move;
+}
+.external-event:hover {
+ box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.2);
+}
+/*
+ * Plugin: Select2
+ * ---------------
+ */
+.select2-container--default.select2-container--focus,
+.select2-selection.select2-container--focus,
+.select2-container--default:focus,
+.select2-selection:focus,
+.select2-container--default:active,
+.select2-selection:active {
+ outline: none;
+}
+.select2-container--default .select2-selection--single,
+.select2-selection .select2-selection--single {
+ border: 1px solid #d2d6de;
+ border-radius: 0;
+ padding: 6px 12px;
+ height: 34px;
+}
+.select2-container--default.select2-container--open {
+ border-color: #3c8dbc;
+}
+.select2-dropdown {
+ border: 1px solid #d2d6de;
+ border-radius: 0;
+}
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+ background-color: #3c8dbc;
+ color: white;
+}
+.select2-results__option {
+ padding: 6px 12px;
+ user-select: none;
+ -webkit-user-select: none;
+}
+.select2-container .select2-selection--single .select2-selection__rendered {
+ padding-left: 0;
+ padding-right: 0;
+ height: auto;
+ margin-top: -4px;
+}
+.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
+ padding-right: 6px;
+ padding-left: 20px;
+}
+.select2-container--default .select2-selection--single .select2-selection__arrow {
+ height: 28px;
+ right: 3px;
+}
+.select2-container--default .select2-selection--single .select2-selection__arrow b {
+ margin-top: 0;
+}
+.select2-dropdown .select2-search__field,
+.select2-search--inline .select2-search__field {
+ border: 1px solid #d2d6de;
+}
+.select2-dropdown .select2-search__field:focus,
+.select2-search--inline .select2-search__field:focus {
+ outline: none;
+ border: 1px solid #3c8dbc;
+}
+.select2-container--default .select2-results__option[aria-disabled=true] {
+ color: #999;
+}
+.select2-container--default .select2-results__option[aria-selected=true] {
+ background-color: #ddd;
+}
+.select2-container--default .select2-results__option[aria-selected=true],
+.select2-container--default .select2-results__option[aria-selected=true]:hover {
+ color: #444;
+}
+.select2-container--default .select2-selection--multiple {
+ border: 1px solid #d2d6de;
+ border-radius: 0;
+}
+.select2-container--default .select2-selection--multiple:focus {
+ border-color: #3c8dbc;
+}
+.select2-container--default.select2-container--focus .select2-selection--multiple {
+ border-color: #d2d6de;
+}
+.select2-container--default .select2-selection--multiple .select2-selection__choice {
+ background-color: #3c8dbc;
+ border-color: #367fa9;
+ padding: 1px 10px;
+ color: #fff;
+}
+.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
+ margin-right: 5px;
+ color: rgba(255, 255, 255, 0.7);
+}
+.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
+ color: #fff;
+}
+.select2-container .select2-selection--single .select2-selection__rendered {
+ padding-right: 10px;
+}
+/*
+ * General: Miscellaneous
+ * ----------------------
+ */
+.pad {
+ padding: 10px;
+}
+.margin {
+ margin: 10px;
+}
+.margin-bottom {
+ margin-bottom: 20px;
+}
+.margin-bottom-none {
+ margin-bottom: 0;
+}
+.margin-r-5 {
+ margin-right: 5px;
+}
+.inline {
+ display: inline;
+}
+.description-block {
+ display: block;
+ margin: 10px 0;
+ text-align: center;
+}
+.description-block.margin-bottom {
+ margin-bottom: 25px;
+}
+.description-block > .description-header {
+ margin: 0;
+ padding: 0;
+ font-weight: 600;
+ font-size: 16px;
+}
+.description-block > .description-text {
+ text-transform: uppercase;
+}
+.bg-red,
+.bg-yellow,
+.bg-aqua,
+.bg-blue,
+.bg-light-blue,
+.bg-green,
+.bg-navy,
+.bg-teal,
+.bg-olive,
+.bg-lime,
+.bg-orange,
+.bg-fuchsia,
+.bg-purple,
+.bg-maroon,
+.bg-black,
+.bg-red-active,
+.bg-yellow-active,
+.bg-aqua-active,
+.bg-blue-active,
+.bg-light-blue-active,
+.bg-green-active,
+.bg-navy-active,
+.bg-teal-active,
+.bg-olive-active,
+.bg-lime-active,
+.bg-orange-active,
+.bg-fuchsia-active,
+.bg-purple-active,
+.bg-maroon-active,
+.bg-black-active,
+.callout.callout-danger,
+.callout.callout-warning,
+.callout.callout-info,
+.callout.callout-success,
+.alert-success,
+.alert-danger,
+.alert-error,
+.alert-warning,
+.alert-info,
+.label-danger,
+.label-info,
+.label-warning,
+.label-primary,
+.label-success,
+.modal-primary .modal-body,
+.modal-primary .modal-header,
+.modal-primary .modal-footer,
+.modal-warning .modal-body,
+.modal-warning .modal-header,
+.modal-warning .modal-footer,
+.modal-info .modal-body,
+.modal-info .modal-header,
+.modal-info .modal-footer,
+.modal-success .modal-body,
+.modal-success .modal-header,
+.modal-success .modal-footer,
+.modal-danger .modal-body,
+.modal-danger .modal-header,
+.modal-danger .modal-footer {
+ color: #fff !important;
+}
+.bg-gray {
+ color: #000;
+ background-color: #d2d6de !important;
+}
+.bg-gray-light {
+ background-color: #f7f7f7;
+}
+.bg-black {
+ background-color: #111111 !important;
+}
+.bg-red,
+.callout.callout-danger,
+.alert-danger,
+.alert-error,
+.label-danger,
+.modal-danger .modal-body {
+ background-color: #dd4b39 !important;
+}
+.bg-yellow,
+.callout.callout-warning,
+.alert-warning,
+.label-warning,
+.modal-warning .modal-body {
+ background-color: #f39c12 !important;
+}
+.bg-aqua,
+.callout.callout-info,
+.alert-info,
+.label-info,
+.modal-info .modal-body {
+ background-color: #00c0ef !important;
+}
+.bg-blue {
+ background-color: #0073b7 !important;
+}
+.bg-light-blue,
+.label-primary,
+.modal-primary .modal-body {
+ background-color: #3c8dbc !important;
+}
+.bg-green,
+.callout.callout-success,
+.alert-success,
+.label-success,
+.modal-success .modal-body {
+ background-color: #00a65a !important;
+}
+.bg-navy {
+ background-color: #001f3f !important;
+}
+.bg-teal {
+ background-color: #39cccc !important;
+}
+.bg-olive {
+ background-color: #3d9970 !important;
+}
+.bg-lime {
+ background-color: #01ff70 !important;
+}
+.bg-orange {
+ background-color: #ff851b !important;
+}
+.bg-fuchsia {
+ background-color: #f012be !important;
+}
+.bg-purple {
+ background-color: #605ca8 !important;
+}
+.bg-maroon {
+ background-color: #d81b60 !important;
+}
+.bg-gray-active {
+ color: #000;
+ background-color: #b5bbc8 !important;
+}
+.bg-black-active {
+ background-color: #000000 !important;
+}
+.bg-red-active,
+.modal-danger .modal-header,
+.modal-danger .modal-footer {
+ background-color: #d33724 !important;
+}
+.bg-yellow-active,
+.modal-warning .modal-header,
+.modal-warning .modal-footer {
+ background-color: #db8b0b !important;
+}
+.bg-aqua-active,
+.modal-info .modal-header,
+.modal-info .modal-footer {
+ background-color: #00a7d0 !important;
+}
+.bg-blue-active {
+ background-color: #005384 !important;
+}
+.bg-light-blue-active,
+.modal-primary .modal-header,
+.modal-primary .modal-footer {
+ background-color: #357ca5 !important;
+}
+.bg-green-active,
+.modal-success .modal-header,
+.modal-success .modal-footer {
+ background-color: #008d4c !important;
+}
+.bg-navy-active {
+ background-color: #001a35 !important;
+}
+.bg-teal-active {
+ background-color: #30bbbb !important;
+}
+.bg-olive-active {
+ background-color: #368763 !important;
+}
+.bg-lime-active {
+ background-color: #00e765 !important;
+}
+.bg-orange-active {
+ background-color: #ff7701 !important;
+}
+.bg-fuchsia-active {
+ background-color: #db0ead !important;
+}
+.bg-purple-active {
+ background-color: #555299 !important;
+}
+.bg-maroon-active {
+ background-color: #ca195a !important;
+}
+[class^="bg-"].disabled {
+ opacity: 0.65;
+ filter: alpha(opacity=65);
+}
+.text-red {
+ color: #dd4b39 !important;
+}
+.text-yellow {
+ color: #f39c12 !important;
+}
+.text-aqua {
+ color: #00c0ef !important;
+}
+.text-blue {
+ color: #0073b7 !important;
+}
+.text-black {
+ color: #111111 !important;
+}
+.text-light-blue {
+ color: #3c8dbc !important;
+}
+.text-green {
+ color: #00a65a !important;
+}
+.text-gray {
+ color: #d2d6de !important;
+}
+.text-navy {
+ color: #001f3f !important;
+}
+.text-teal {
+ color: #39cccc !important;
+}
+.text-olive {
+ color: #3d9970 !important;
+}
+.text-lime {
+ color: #01ff70 !important;
+}
+.text-orange {
+ color: #ff851b !important;
+}
+.text-fuchsia {
+ color: #f012be !important;
+}
+.text-purple {
+ color: #605ca8 !important;
+}
+.text-maroon {
+ color: #d81b60 !important;
+}
+.link-muted {
+ color: #7a869d;
+}
+.link-muted:hover,
+.link-muted:focus {
+ color: #606c84;
+}
+.link-black {
+ color: #666;
+}
+.link-black:hover,
+.link-black:focus {
+ color: #999;
+}
+.hide {
+ display: none !important;
+}
+.no-border {
+ border: 0 !important;
+}
+.no-padding {
+ padding: 0 !important;
+}
+.no-margin {
+ margin: 0 !important;
+}
+.no-shadow {
+ box-shadow: none !important;
+}
+.list-unstyled,
+.chart-legend,
+.contacts-list,
+.users-list,
+.mailbox-attachments {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+.list-group-unbordered > .list-group-item {
+ border-left: 0;
+ border-right: 0;
+ border-radius: 0;
+ padding-left: 0;
+ padding-right: 0;
+}
+.flat {
+ border-radius: 0 !important;
+}
+.text-bold,
+.text-bold.table td,
+.text-bold.table th {
+ font-weight: 700;
+}
+.text-sm {
+ font-size: 12px;
+}
+.jqstooltip {
+ padding: 5px !important;
+ width: auto !important;
+ height: auto !important;
+}
+.bg-teal-gradient {
+ background: #39cccc !important;
+ background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #39cccc), color-stop(1, #7adddd)) !important;
+ background: -ms-linear-gradient(bottom, #39cccc, #7adddd) !important;
+ background: -moz-linear-gradient(center bottom, #39cccc 0%, #7adddd 100%) !important;
+ background: -o-linear-gradient(#7adddd, #39cccc) !important;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7adddd', endColorstr='#39cccc', GradientType=0) !important;
+ color: #fff;
+}
+.bg-light-blue-gradient {
+ background: #3c8dbc !important;
+ background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3c8dbc), color-stop(1, #67a8ce)) !important;
+ background: -ms-linear-gradient(bottom, #3c8dbc, #67a8ce) !important;
+ background: -moz-linear-gradient(center bottom, #3c8dbc 0%, #67a8ce 100%) !important;
+ background: -o-linear-gradient(#67a8ce, #3c8dbc) !important;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#67a8ce', endColorstr='#3c8dbc', GradientType=0) !important;
+ color: #fff;
+}
+.bg-blue-gradient {
+ background: #0073b7 !important;
+ background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0073b7), color-stop(1, #0089db)) !important;
+ background: -ms-linear-gradient(bottom, #0073b7, #0089db) !important;
+ background: -moz-linear-gradient(center bottom, #0073b7 0%, #0089db 100%) !important;
+ background: -o-linear-gradient(#0089db, #0073b7) !important;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0089db', endColorstr='#0073b7', GradientType=0) !important;
+ color: #fff;
+}
+.bg-aqua-gradient {
+ background: #00c0ef !important;
+ background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #00c0ef), color-stop(1, #14d1ff)) !important;
+ background: -ms-linear-gradient(bottom, #00c0ef, #14d1ff) !important;
+ background: -moz-linear-gradient(center bottom, #00c0ef 0%, #14d1ff 100%) !important;
+ background: -o-linear-gradient(#14d1ff, #00c0ef) !important;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#14d1ff', endColorstr='#00c0ef', GradientType=0) !important;
+ color: #fff;
+}
+.bg-yellow-gradient {
+ background: #f39c12 !important;
+ background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #f39c12), color-stop(1, #f7bc60)) !important;
+ background: -ms-linear-gradient(bottom, #f39c12, #f7bc60) !important;
+ background: -moz-linear-gradient(center bottom, #f39c12 0%, #f7bc60 100%) !important;
+ background: -o-linear-gradient(#f7bc60, #f39c12) !important;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7bc60', endColorstr='#f39c12', GradientType=0) !important;
+ color: #fff;
+}
+.bg-purple-gradient {
+ background: #605ca8 !important;
+ background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #605ca8), color-stop(1, #9491c4)) !important;
+ background: -ms-linear-gradient(bottom, #605ca8, #9491c4) !important;
+ background: -moz-linear-gradient(center bottom, #605ca8 0%, #9491c4 100%) !important;
+ background: -o-linear-gradient(#9491c4, #605ca8) !important;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9491c4', endColorstr='#605ca8', GradientType=0) !important;
+ color: #fff;
+}
+.bg-green-gradient {
+ background: #00a65a !important;
+ background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #00a65a), color-stop(1, #00ca6d)) !important;
+ background: -ms-linear-gradient(bottom, #00a65a, #00ca6d) !important;
+ background: -moz-linear-gradient(center bottom, #00a65a 0%, #00ca6d 100%) !important;
+ background: -o-linear-gradient(#00ca6d, #00a65a) !important;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ca6d', endColorstr='#00a65a', GradientType=0) !important;
+ color: #fff;
+}
+.bg-red-gradient {
+ background: #dd4b39 !important;
+ background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #dd4b39), color-stop(1, #e47365)) !important;
+ background: -ms-linear-gradient(bottom, #dd4b39, #e47365) !important;
+ background: -moz-linear-gradient(center bottom, #dd4b39 0%, #e47365 100%) !important;
+ background: -o-linear-gradient(#e47365, #dd4b39) !important;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e47365', endColorstr='#dd4b39', GradientType=0) !important;
+ color: #fff;
+}
+.bg-black-gradient {
+ background: #111111 !important;
+ background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #111111), color-stop(1, #2b2b2b)) !important;
+ background: -ms-linear-gradient(bottom, #111111, #2b2b2b) !important;
+ background: -moz-linear-gradient(center bottom, #111111 0%, #2b2b2b 100%) !important;
+ background: -o-linear-gradient(#2b2b2b, #111111) !important;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2b2b2b', endColorstr='#111111', GradientType=0) !important;
+ color: #fff;
+}
+.bg-maroon-gradient {
+ background: #d81b60 !important;
+ background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #d81b60), color-stop(1, #e73f7c)) !important;
+ background: -ms-linear-gradient(bottom, #d81b60, #e73f7c) !important;
+ background: -moz-linear-gradient(center bottom, #d81b60 0%, #e73f7c 100%) !important;
+ background: -o-linear-gradient(#e73f7c, #d81b60) !important;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e73f7c', endColorstr='#d81b60', GradientType=0) !important;
+ color: #fff;
+}
+.description-block .description-icon {
+ font-size: 16px;
+}
+.no-pad-top {
+ padding-top: 0;
+}
+.position-static {
+ position: static !important;
+}
+.list-header {
+ font-size: 15px;
+ padding: 10px 4px;
+ font-weight: bold;
+ color: #666;
+}
+.list-seperator {
+ height: 1px;
+ background: #f4f4f4;
+ margin: 15px 0 9px 0;
+}
+.list-link > a {
+ padding: 4px;
+ color: #777;
+}
+.list-link > a:hover {
+ color: #222;
+}
+.font-light {
+ font-weight: 300;
+}
+.user-block:before,
+.user-block:after {
+ content: " ";
+ display: table;
+}
+.user-block:after {
+ clear: both;
+}
+.user-block img {
+ width: 40px;
+ height: 40px;
+ float: left;
+}
+.user-block .username,
+.user-block .description,
+.user-block .comment {
+ display: block;
+ margin-left: 50px;
+}
+.user-block .username {
+ font-size: 16px;
+ font-weight: 600;
+}
+.user-block .description {
+ color: #999;
+ font-size: 13px;
+}
+.user-block.user-block-sm .username,
+.user-block.user-block-sm .description,
+.user-block.user-block-sm .comment {
+ margin-left: 40px;
+}
+.user-block.user-block-sm .username {
+ font-size: 14px;
+}
+.img-sm,
+.img-md,
+.img-lg,
+.box-comments .box-comment img,
+.user-block.user-block-sm img {
+ float: left;
+}
+.img-sm,
+.box-comments .box-comment img,
+.user-block.user-block-sm img {
+ width: 30px !important;
+ height: 30px !important;
+}
+.img-sm + .img-push {
+ margin-left: 40px;
+}
+.img-md {
+ width: 60px;
+ height: 60px;
+}
+.img-md + .img-push {
+ margin-left: 70px;
+}
+.img-lg {
+ width: 100px;
+ height: 100px;
+}
+.img-lg + .img-push {
+ margin-left: 110px;
+}
+.img-bordered {
+ border: 3px solid #d2d6de;
+ padding: 3px;
+}
+.img-bordered-sm {
+ border: 2px solid #d2d6de;
+ padding: 2px;
+}
+.attachment-block {
+ border: 1px solid #f4f4f4;
+ padding: 5px;
+ margin-bottom: 10px;
+ background: #f7f7f7;
+}
+.attachment-block .attachment-img {
+ max-width: 100px;
+ max-height: 100px;
+ height: auto;
+ float: left;
+}
+.attachment-block .attachment-pushed {
+ margin-left: 110px;
+}
+.attachment-block .attachment-heading {
+ margin: 0;
+}
+.attachment-block .attachment-text {
+ color: #555;
+}
+.connectedSortable {
+ min-height: 100px;
+}
+.ui-helper-hidden-accessible {
+ border: 0;
+ clip: rect(0 0 0 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
+}
+.sort-highlight {
+ background: #f4f4f4;
+ border: 1px dashed #ddd;
+ margin-bottom: 10px;
+}
+.full-opacity-hover {
+ opacity: 0.65;
+ filter: alpha(opacity=65);
+}
+.full-opacity-hover:hover {
+ opacity: 1;
+ filter: alpha(opacity=100);
+}
+.chart {
+ position: relative;
+ overflow: hidden;
+ width: 100%;
+}
+.chart svg,
+.chart canvas {
+ width: 100% !important;
+}
+/*
+ * Misc: print
+ * -----------
+ */
+ at media print {
+ .no-print,
+ .main-sidebar,
+ .left-side,
+ .main-header,
+ .content-header {
+ display: none !important;
+ }
+ .content-wrapper,
+ .right-side,
+ .main-footer {
+ margin-left: 0 !important;
+ min-height: 0 !important;
+ -webkit-transform: translate(0, 0) !important;
+ -ms-transform: translate(0, 0) !important;
+ -o-transform: translate(0, 0) !important;
+ transform: translate(0, 0) !important;
+ }
+ .fixed .content-wrapper,
+ .fixed .right-side {
+ padding-top: 0 !important;
+ }
+ .invoice {
+ width: 100%;
+ border: 0;
+ margin: 0;
+ padding: 0;
+ }
+ .invoice-col {
+ float: left;
+ width: 33.3333333%;
+ }
+ .table-responsive {
+ overflow: auto;
+ }
+ .table-responsive > .table tr th,
+ .table-responsive > .table tr td {
+ white-space: normal !important;
+ }
+}
diff --git a/inst/AdminLTE/AdminLTE.min.css b/inst/AdminLTE/AdminLTE.min.css
new file mode 100644
index 0000000..f1056e5
--- /dev/null
+++ b/inst/AdminLTE/AdminLTE.min.css
@@ -0,0 +1,7 @@
+ at font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:300;src:local('Source Sans Pro Light'),local('SourceSansPro-Light'),url(fonts/Source_Sans_Pro_300.ttf) format('truetype')}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;src:local('Source Sans Pro'),local('SourceSansPro-Regular'),url(fonts/Source_Sans_Pro_400.ttf) format('truetype')}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;src:local('Source Sans Pro Semibold [...]
+ * AdminLTE v2.3.11
+ * Author: Almsaeed Studio
+ * Website: Almsaeed Studio <http://almsaeedstudio.com>
+ * License: Open source - MIT
+ * Please visit http://opensource.org/licenses/MIT for more information
+!*/body,html{height:100%}.layout-boxed body,.layout-boxed html{height:100%}body{font-family:'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:400;overflow-x:hidden;overflow-y:auto}.wrapper{height:100%;position:relative;overflow-x:hidden;overflow-y:auto}.wrapper:after,.wrapper:before{content:" ";display:table}.wrapper:after{clear:both}.layout-boxed .wrapper{max-width:1250px;margin:0 auto;min-height:100%;box-shadow:0 0 8px rgba(0,0,0,.5);position:relative}.layout-bo [...]
\ No newline at end of file
diff --git a/inst/AdminLTE/_all-skins.css b/inst/AdminLTE/_all-skins.css
new file mode 100755
index 0000000..53577c4
--- /dev/null
+++ b/inst/AdminLTE/_all-skins.css
@@ -0,0 +1,1770 @@
+/*
+ * Skin: Blue
+ * ----------
+ */
+.skin-blue .main-header .navbar {
+ background-color: #3c8dbc;
+}
+.skin-blue .main-header .navbar .nav > li > a {
+ color: #ffffff;
+}
+.skin-blue .main-header .navbar .nav > li > a:hover,
+.skin-blue .main-header .navbar .nav > li > a:active,
+.skin-blue .main-header .navbar .nav > li > a:focus,
+.skin-blue .main-header .navbar .nav .open > a,
+.skin-blue .main-header .navbar .nav .open > a:hover,
+.skin-blue .main-header .navbar .nav .open > a:focus,
+.skin-blue .main-header .navbar .nav > .active > a {
+ background: rgba(0, 0, 0, 0.1);
+ color: #f6f6f6;
+}
+.skin-blue .main-header .navbar .sidebar-toggle {
+ color: #ffffff;
+}
+.skin-blue .main-header .navbar .sidebar-toggle:hover {
+ color: #f6f6f6;
+ background: rgba(0, 0, 0, 0.1);
+}
+.skin-blue .main-header .navbar .sidebar-toggle {
+ color: #fff;
+}
+.skin-blue .main-header .navbar .sidebar-toggle:hover {
+ background-color: #367fa9;
+}
+ at media (max-width: 767px) {
+ .skin-blue .main-header .navbar .dropdown-menu li.divider {
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+ .skin-blue .main-header .navbar .dropdown-menu li a {
+ color: #fff;
+ }
+ .skin-blue .main-header .navbar .dropdown-menu li a:hover {
+ background: #367fa9;
+ }
+}
+.skin-blue .main-header .logo {
+ background-color: #367fa9;
+ color: #ffffff;
+ border-bottom: 0 solid transparent;
+}
+.skin-blue .main-header .logo:hover {
+ background-color: #357ca5;
+}
+.skin-blue .main-header li.user-header {
+ background-color: #3c8dbc;
+}
+.skin-blue .content-header {
+ background: transparent;
+}
+.skin-blue .wrapper,
+.skin-blue .main-sidebar,
+.skin-blue .left-side {
+ background-color: #222d32;
+}
+.skin-blue .user-panel > .info,
+.skin-blue .user-panel > .info > a {
+ color: #fff;
+}
+.skin-blue .sidebar-menu > li.header {
+ color: #4b646f;
+ background: #1a2226;
+}
+.skin-blue .sidebar-menu > li > a {
+ border-left: 3px solid transparent;
+}
+.skin-blue .sidebar-menu > li:hover > a,
+.skin-blue .sidebar-menu > li.active > a {
+ color: #ffffff;
+ background: #1e282c;
+ border-left-color: #3c8dbc;
+}
+.skin-blue .sidebar-menu > li > .treeview-menu {
+ margin: 0 1px;
+ background: #2c3b41;
+}
+.skin-blue .sidebar a {
+ color: #b8c7ce;
+}
+.skin-blue .sidebar a:hover {
+ text-decoration: none;
+}
+.skin-blue .treeview-menu > li > a {
+ color: #8aa4af;
+}
+.skin-blue .treeview-menu > li.active > a,
+.skin-blue .treeview-menu > li > a:hover {
+ color: #ffffff;
+}
+.skin-blue .sidebar-form {
+ border-radius: 3px;
+ border: 1px solid #374850;
+ margin: 10px 10px;
+}
+.skin-blue .sidebar-form input[type="text"],
+.skin-blue .sidebar-form .btn {
+ box-shadow: none;
+ background-color: #374850;
+ border: 1px solid transparent;
+ height: 35px;
+}
+.skin-blue .sidebar-form input[type="text"] {
+ color: #666;
+ border-top-left-radius: 2px;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 2px;
+}
+.skin-blue .sidebar-form input[type="text"]:focus,
+.skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+ background-color: #fff;
+ color: #666;
+}
+.skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+ border-left-color: #fff;
+}
+.skin-blue .sidebar-form .btn {
+ color: #999;
+ border-top-left-radius: 0;
+ border-top-right-radius: 2px;
+ border-bottom-right-radius: 2px;
+ border-bottom-left-radius: 0;
+}
+.skin-blue.layout-top-nav .main-header > .logo {
+ background-color: #3c8dbc;
+ color: #ffffff;
+ border-bottom: 0 solid transparent;
+}
+.skin-blue.layout-top-nav .main-header > .logo:hover {
+ background-color: #3b8ab8;
+}
+/*
+ * Skin: Blue
+ * ----------
+ */
+.skin-blue-light .main-header .navbar {
+ background-color: #3c8dbc;
+}
+.skin-blue-light .main-header .navbar .nav > li > a {
+ color: #ffffff;
+}
+.skin-blue-light .main-header .navbar .nav > li > a:hover,
+.skin-blue-light .main-header .navbar .nav > li > a:active,
+.skin-blue-light .main-header .navbar .nav > li > a:focus,
+.skin-blue-light .main-header .navbar .nav .open > a,
+.skin-blue-light .main-header .navbar .nav .open > a:hover,
+.skin-blue-light .main-header .navbar .nav .open > a:focus,
+.skin-blue-light .main-header .navbar .nav > .active > a {
+ background: rgba(0, 0, 0, 0.1);
+ color: #f6f6f6;
+}
+.skin-blue-light .main-header .navbar .sidebar-toggle {
+ color: #ffffff;
+}
+.skin-blue-light .main-header .navbar .sidebar-toggle:hover {
+ color: #f6f6f6;
+ background: rgba(0, 0, 0, 0.1);
+}
+.skin-blue-light .main-header .navbar .sidebar-toggle {
+ color: #fff;
+}
+.skin-blue-light .main-header .navbar .sidebar-toggle:hover {
+ background-color: #367fa9;
+}
+ at media (max-width: 767px) {
+ .skin-blue-light .main-header .navbar .dropdown-menu li.divider {
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+ .skin-blue-light .main-header .navbar .dropdown-menu li a {
+ color: #fff;
+ }
+ .skin-blue-light .main-header .navbar .dropdown-menu li a:hover {
+ background: #367fa9;
+ }
+}
+.skin-blue-light .main-header .logo {
+ background-color: #3c8dbc;
+ color: #ffffff;
+ border-bottom: 0 solid transparent;
+}
+.skin-blue-light .main-header .logo:hover {
+ background-color: #3b8ab8;
+}
+.skin-blue-light .main-header li.user-header {
+ background-color: #3c8dbc;
+}
+.skin-blue-light .content-header {
+ background: transparent;
+}
+.skin-blue-light .wrapper,
+.skin-blue-light .main-sidebar,
+.skin-blue-light .left-side {
+ background-color: #f9fafc;
+}
+.skin-blue-light .content-wrapper,
+.skin-blue-light .main-footer {
+ border-left: 1px solid #d2d6de;
+}
+.skin-blue-light .user-panel > .info,
+.skin-blue-light .user-panel > .info > a {
+ color: #444444;
+}
+.skin-blue-light .sidebar-menu > li {
+ -webkit-transition: border-left-color 0.3s ease;
+ -o-transition: border-left-color 0.3s ease;
+ transition: border-left-color 0.3s ease;
+}
+.skin-blue-light .sidebar-menu > li.header {
+ color: #848484;
+ background: #f9fafc;
+}
+.skin-blue-light .sidebar-menu > li > a {
+ border-left: 3px solid transparent;
+ font-weight: 600;
+}
+.skin-blue-light .sidebar-menu > li:hover > a,
+.skin-blue-light .sidebar-menu > li.active > a {
+ color: #000000;
+ background: #f4f4f5;
+}
+.skin-blue-light .sidebar-menu > li.active {
+ border-left-color: #3c8dbc;
+}
+.skin-blue-light .sidebar-menu > li.active > a {
+ font-weight: 600;
+}
+.skin-blue-light .sidebar-menu > li > .treeview-menu {
+ background: #f4f4f5;
+}
+.skin-blue-light .sidebar a {
+ color: #444444;
+}
+.skin-blue-light .sidebar a:hover {
+ text-decoration: none;
+}
+.skin-blue-light .treeview-menu > li > a {
+ color: #777777;
+}
+.skin-blue-light .treeview-menu > li.active > a,
+.skin-blue-light .treeview-menu > li > a:hover {
+ color: #000000;
+}
+.skin-blue-light .treeview-menu > li.active > a {
+ font-weight: 600;
+}
+.skin-blue-light .sidebar-form {
+ border-radius: 3px;
+ border: 1px solid #d2d6de;
+ margin: 10px 10px;
+}
+.skin-blue-light .sidebar-form input[type="text"],
+.skin-blue-light .sidebar-form .btn {
+ box-shadow: none;
+ background-color: #fff;
+ border: 1px solid transparent;
+ height: 35px;
+}
+.skin-blue-light .sidebar-form input[type="text"] {
+ color: #666;
+ border-top-left-radius: 2px;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 2px;
+}
+.skin-blue-light .sidebar-form input[type="text"]:focus,
+.skin-blue-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+ background-color: #fff;
+ color: #666;
+}
+.skin-blue-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+ border-left-color: #fff;
+}
+.skin-blue-light .sidebar-form .btn {
+ color: #999;
+ border-top-left-radius: 0;
+ border-top-right-radius: 2px;
+ border-bottom-right-radius: 2px;
+ border-bottom-left-radius: 0;
+}
+ at media (min-width: 768px) {
+ .skin-blue-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
+ border-left: 1px solid #d2d6de;
+ }
+}
+.skin-blue-light .main-footer {
+ border-top-color: #d2d6de;
+}
+.skin-blue.layout-top-nav .main-header > .logo {
+ background-color: #3c8dbc;
+ color: #ffffff;
+ border-bottom: 0 solid transparent;
+}
+.skin-blue.layout-top-nav .main-header > .logo:hover {
+ background-color: #3b8ab8;
+}
+/*
+ * Skin: Black
+ * -----------
+ */
+/* skin-black navbar */
+.skin-black .main-header {
+ -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
+ box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
+}
+.skin-black .main-header .navbar-toggle {
+ color: #333;
+}
+.skin-black .main-header .navbar-brand {
+ color: #333;
+ border-right: 1px solid #eee;
+}
+.skin-black .main-header .navbar {
+ background-color: #ffffff;
+}
+.skin-black .main-header .navbar .nav > li > a {
+ color: #333333;
+}
+.skin-black .main-header .navbar .nav > li > a:hover,
+.skin-black .main-header .navbar .nav > li > a:active,
+.skin-black .main-header .navbar .nav > li > a:focus,
+.skin-black .main-header .navbar .nav .open > a,
+.skin-black .main-header .navbar .nav .open > a:hover,
+.skin-black .main-header .navbar .nav .open > a:focus,
+.skin-black .main-header .navbar .nav > .active > a {
+ background: #ffffff;
+ color: #999999;
+}
+.skin-black .main-header .navbar .sidebar-toggle {
+ color: #333333;
+}
+.skin-black .main-header .navbar .sidebar-toggle:hover {
+ color: #999999;
+ background: #ffffff;
+}
+.skin-black .main-header .navbar > .sidebar-toggle {
+ color: #333;
+ border-right: 1px solid #eee;
+}
+.skin-black .main-header .navbar .navbar-nav > li > a {
+ border-right: 1px solid #eee;
+}
+.skin-black .main-header .navbar .navbar-custom-menu .navbar-nav > li > a,
+.skin-black .main-header .navbar .navbar-right > li > a {
+ border-left: 1px solid #eee;
+ border-right-width: 0;
+}
+.skin-black .main-header > .logo {
+ background-color: #ffffff;
+ color: #333333;
+ border-bottom: 0 solid transparent;
+ border-right: 1px solid #eee;
+}
+.skin-black .main-header > .logo:hover {
+ background-color: #fcfcfc;
+}
+ at media (max-width: 767px) {
+ .skin-black .main-header > .logo {
+ background-color: #222222;
+ color: #ffffff;
+ border-bottom: 0 solid transparent;
+ border-right: none;
+ }
+ .skin-black .main-header > .logo:hover {
+ background-color: #1f1f1f;
+ }
+}
+.skin-black .main-header li.user-header {
+ background-color: #222;
+}
+.skin-black .content-header {
+ background: transparent;
+ box-shadow: none;
+}
+.skin-black .wrapper,
+.skin-black .main-sidebar,
+.skin-black .left-side {
+ background-color: #222d32;
+}
+.skin-black .user-panel > .info,
+.skin-black .user-panel > .info > a {
+ color: #fff;
+}
+.skin-black .sidebar-menu > li.header {
+ color: #4b646f;
+ background: #1a2226;
+}
+.skin-black .sidebar-menu > li > a {
+ border-left: 3px solid transparent;
+}
+.skin-black .sidebar-menu > li:hover > a,
+.skin-black .sidebar-menu > li.active > a {
+ color: #ffffff;
+ background: #1e282c;
+ border-left-color: #ffffff;
+}
+.skin-black .sidebar-menu > li > .treeview-menu {
+ margin: 0 1px;
+ background: #2c3b41;
+}
+.skin-black .sidebar a {
+ color: #b8c7ce;
+}
+.skin-black .sidebar a:hover {
+ text-decoration: none;
+}
+.skin-black .treeview-menu > li > a {
+ color: #8aa4af;
+}
+.skin-black .treeview-menu > li.active > a,
+.skin-black .treeview-menu > li > a:hover {
+ color: #ffffff;
+}
+.skin-black .sidebar-form {
+ border-radius: 3px;
+ border: 1px solid #374850;
+ margin: 10px 10px;
+}
+.skin-black .sidebar-form input[type="text"],
+.skin-black .sidebar-form .btn {
+ box-shadow: none;
+ background-color: #374850;
+ border: 1px solid transparent;
+ height: 35px;
+}
+.skin-black .sidebar-form input[type="text"] {
+ color: #666;
+ border-top-left-radius: 2px;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 2px;
+}
+.skin-black .sidebar-form input[type="text"]:focus,
+.skin-black .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+ background-color: #fff;
+ color: #666;
+}
+.skin-black .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+ border-left-color: #fff;
+}
+.skin-black .sidebar-form .btn {
+ color: #999;
+ border-top-left-radius: 0;
+ border-top-right-radius: 2px;
+ border-bottom-right-radius: 2px;
+ border-bottom-left-radius: 0;
+}
+.skin-black .pace .pace-progress {
+ background: #222;
+}
+.skin-black .pace .pace-activity {
+ border-top-color: #222;
+ border-left-color: #222;
+}
+/*
+ * Skin: Black
+ * -----------
+ */
+/* skin-black navbar */
+.skin-black-light .main-header {
+ -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
+ box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
+}
+.skin-black-light .main-header .navbar-toggle {
+ color: #333;
+}
+.skin-black-light .main-header .navbar-brand {
+ color: #333;
+ border-right: 1px solid #eee;
+}
+.skin-black-light .main-header .navbar {
+ background-color: #ffffff;
+}
+.skin-black-light .main-header .navbar .nav > li > a {
+ color: #333333;
+}
+.skin-black-light .main-header .navbar .nav > li > a:hover,
+.skin-black-light .main-header .navbar .nav > li > a:active,
+.skin-black-light .main-header .navbar .nav > li > a:focus,
+.skin-black-light .main-header .navbar .nav .open > a,
+.skin-black-light .main-header .navbar .nav .open > a:hover,
+.skin-black-light .main-header .navbar .nav .open > a:focus,
+.skin-black-light .main-header .navbar .nav > .active > a {
+ background: #ffffff;
+ color: #999999;
+}
+.skin-black-light .main-header .navbar .sidebar-toggle {
+ color: #333333;
+}
+.skin-black-light .main-header .navbar .sidebar-toggle:hover {
+ color: #999999;
+ background: #ffffff;
+}
+.skin-black-light .main-header .navbar > .sidebar-toggle {
+ color: #333;
+ border-right: 1px solid #eee;
+}
+.skin-black-light .main-header .navbar .navbar-nav > li > a {
+ border-right: 1px solid #eee;
+}
+.skin-black-light .main-header .navbar .navbar-custom-menu .navbar-nav > li > a,
+.skin-black-light .main-header .navbar .navbar-right > li > a {
+ border-left: 1px solid #eee;
+ border-right-width: 0;
+}
+.skin-black-light .main-header > .logo {
+ background-color: #ffffff;
+ color: #333333;
+ border-bottom: 0 solid transparent;
+ border-right: 1px solid #eee;
+}
+.skin-black-light .main-header > .logo:hover {
+ background-color: #fcfcfc;
+}
+ at media (max-width: 767px) {
+ .skin-black-light .main-header > .logo {
+ background-color: #222222;
+ color: #ffffff;
+ border-bottom: 0 solid transparent;
+ border-right: none;
+ }
+ .skin-black-light .main-header > .logo:hover {
+ background-color: #1f1f1f;
+ }
+}
+.skin-black-light .main-header li.user-header {
+ background-color: #222;
+}
+.skin-black-light .content-header {
+ background: transparent;
+ box-shadow: none;
+}
+.skin-black-light .wrapper,
+.skin-black-light .main-sidebar,
+.skin-black-light .left-side {
+ background-color: #f9fafc;
+}
+.skin-black-light .content-wrapper,
+.skin-black-light .main-footer {
+ border-left: 1px solid #d2d6de;
+}
+.skin-black-light .user-panel > .info,
+.skin-black-light .user-panel > .info > a {
+ color: #444444;
+}
+.skin-black-light .sidebar-menu > li {
+ -webkit-transition: border-left-color 0.3s ease;
+ -o-transition: border-left-color 0.3s ease;
+ transition: border-left-color 0.3s ease;
+}
+.skin-black-light .sidebar-menu > li.header {
+ color: #848484;
+ background: #f9fafc;
+}
+.skin-black-light .sidebar-menu > li > a {
+ border-left: 3px solid transparent;
+ font-weight: 600;
+}
+.skin-black-light .sidebar-menu > li:hover > a,
+.skin-black-light .sidebar-menu > li.active > a {
+ color: #000000;
+ background: #f4f4f5;
+}
+.skin-black-light .sidebar-menu > li.active {
+ border-left-color: #ffffff;
+}
+.skin-black-light .sidebar-menu > li.active > a {
+ font-weight: 600;
+}
+.skin-black-light .sidebar-menu > li > .treeview-menu {
+ background: #f4f4f5;
+}
+.skin-black-light .sidebar a {
+ color: #444444;
+}
+.skin-black-light .sidebar a:hover {
+ text-decoration: none;
+}
+.skin-black-light .treeview-menu > li > a {
+ color: #777777;
+}
+.skin-black-light .treeview-menu > li.active > a,
+.skin-black-light .treeview-menu > li > a:hover {
+ color: #000000;
+}
+.skin-black-light .treeview-menu > li.active > a {
+ font-weight: 600;
+}
+.skin-black-light .sidebar-form {
+ border-radius: 3px;
+ border: 1px solid #d2d6de;
+ margin: 10px 10px;
+}
+.skin-black-light .sidebar-form input[type="text"],
+.skin-black-light .sidebar-form .btn {
+ box-shadow: none;
+ background-color: #fff;
+ border: 1px solid transparent;
+ height: 35px;
+}
+.skin-black-light .sidebar-form input[type="text"] {
+ color: #666;
+ border-top-left-radius: 2px;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 2px;
+}
+.skin-black-light .sidebar-form input[type="text"]:focus,
+.skin-black-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+ background-color: #fff;
+ color: #666;
+}
+.skin-black-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+ border-left-color: #fff;
+}
+.skin-black-light .sidebar-form .btn {
+ color: #999;
+ border-top-left-radius: 0;
+ border-top-right-radius: 2px;
+ border-bottom-right-radius: 2px;
+ border-bottom-left-radius: 0;
+}
+ at media (min-width: 768px) {
+ .skin-black-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
+ border-left: 1px solid #d2d6de;
+ }
+}
+/*
+ * Skin: Green
+ * -----------
+ */
+.skin-green .main-header .navbar {
+ background-color: #00a65a;
+}
+.skin-green .main-header .navbar .nav > li > a {
+ color: #ffffff;
+}
+.skin-green .main-header .navbar .nav > li > a:hover,
+.skin-green .main-header .navbar .nav > li > a:active,
+.skin-green .main-header .navbar .nav > li > a:focus,
+.skin-green .main-header .navbar .nav .open > a,
+.skin-green .main-header .navbar .nav .open > a:hover,
+.skin-green .main-header .navbar .nav .open > a:focus,
+.skin-green .main-header .navbar .nav > .active > a {
+ background: rgba(0, 0, 0, 0.1);
+ color: #f6f6f6;
+}
+.skin-green .main-header .navbar .sidebar-toggle {
+ color: #ffffff;
+}
+.skin-green .main-header .navbar .sidebar-toggle:hover {
+ color: #f6f6f6;
+ background: rgba(0, 0, 0, 0.1);
+}
+.skin-green .main-header .navbar .sidebar-toggle {
+ color: #fff;
+}
+.skin-green .main-header .navbar .sidebar-toggle:hover {
+ background-color: #008d4c;
+}
+ at media (max-width: 767px) {
+ .skin-green .main-header .navbar .dropdown-menu li.divider {
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+ .skin-green .main-header .navbar .dropdown-menu li a {
+ color: #fff;
+ }
+ .skin-green .main-header .navbar .dropdown-menu li a:hover {
+ background: #008d4c;
+ }
+}
+.skin-green .main-header .logo {
+ background-color: #008d4c;
+ color: #ffffff;
+ border-bottom: 0 solid transparent;
+}
+.skin-green .main-header .logo:hover {
+ background-color: #008749;
+}
+.skin-green .main-header li.user-header {
+ background-color: #00a65a;
+}
+.skin-green .content-header {
+ background: transparent;
+}
+.skin-green .wrapper,
+.skin-green .main-sidebar,
+.skin-green .left-side {
+ background-color: #222d32;
+}
+.skin-green .user-panel > .info,
+.skin-green .user-panel > .info > a {
+ color: #fff;
+}
+.skin-green .sidebar-menu > li.header {
+ color: #4b646f;
+ background: #1a2226;
+}
+.skin-green .sidebar-menu > li > a {
+ border-left: 3px solid transparent;
+}
+.skin-green .sidebar-menu > li:hover > a,
+.skin-green .sidebar-menu > li.active > a {
+ color: #ffffff;
+ background: #1e282c;
+ border-left-color: #00a65a;
+}
+.skin-green .sidebar-menu > li > .treeview-menu {
+ margin: 0 1px;
+ background: #2c3b41;
+}
+.skin-green .sidebar a {
+ color: #b8c7ce;
+}
+.skin-green .sidebar a:hover {
+ text-decoration: none;
+}
+.skin-green .treeview-menu > li > a {
+ color: #8aa4af;
+}
+.skin-green .treeview-menu > li.active > a,
+.skin-green .treeview-menu > li > a:hover {
+ color: #ffffff;
+}
+.skin-green .sidebar-form {
+ border-radius: 3px;
+ border: 1px solid #374850;
+ margin: 10px 10px;
+}
+.skin-green .sidebar-form input[type="text"],
+.skin-green .sidebar-form .btn {
+ box-shadow: none;
+ background-color: #374850;
+ border: 1px solid transparent;
+ height: 35px;
+}
+.skin-green .sidebar-form input[type="text"] {
+ color: #666;
+ border-top-left-radius: 2px;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 2px;
+}
+.skin-green .sidebar-form input[type="text"]:focus,
+.skin-green .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+ background-color: #fff;
+ color: #666;
+}
+.skin-green .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+ border-left-color: #fff;
+}
+.skin-green .sidebar-form .btn {
+ color: #999;
+ border-top-left-radius: 0;
+ border-top-right-radius: 2px;
+ border-bottom-right-radius: 2px;
+ border-bottom-left-radius: 0;
+}
+/*
+ * Skin: Green
+ * -----------
+ */
+.skin-green-light .main-header .navbar {
+ background-color: #00a65a;
+}
+.skin-green-light .main-header .navbar .nav > li > a {
+ color: #ffffff;
+}
+.skin-green-light .main-header .navbar .nav > li > a:hover,
+.skin-green-light .main-header .navbar .nav > li > a:active,
+.skin-green-light .main-header .navbar .nav > li > a:focus,
+.skin-green-light .main-header .navbar .nav .open > a,
+.skin-green-light .main-header .navbar .nav .open > a:hover,
+.skin-green-light .main-header .navbar .nav .open > a:focus,
+.skin-green-light .main-header .navbar .nav > .active > a {
+ background: rgba(0, 0, 0, 0.1);
+ color: #f6f6f6;
+}
+.skin-green-light .main-header .navbar .sidebar-toggle {
+ color: #ffffff;
+}
+.skin-green-light .main-header .navbar .sidebar-toggle:hover {
+ color: #f6f6f6;
+ background: rgba(0, 0, 0, 0.1);
+}
+.skin-green-light .main-header .navbar .sidebar-toggle {
+ color: #fff;
+}
+.skin-green-light .main-header .navbar .sidebar-toggle:hover {
+ background-color: #008d4c;
+}
+ at media (max-width: 767px) {
+ .skin-green-light .main-header .navbar .dropdown-menu li.divider {
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+ .skin-green-light .main-header .navbar .dropdown-menu li a {
+ color: #fff;
+ }
+ .skin-green-light .main-header .navbar .dropdown-menu li a:hover {
+ background: #008d4c;
+ }
+}
+.skin-green-light .main-header .logo {
+ background-color: #00a65a;
+ color: #ffffff;
+ border-bottom: 0 solid transparent;
+}
+.skin-green-light .main-header .logo:hover {
+ background-color: #00a157;
+}
+.skin-green-light .main-header li.user-header {
+ background-color: #00a65a;
+}
+.skin-green-light .content-header {
+ background: transparent;
+}
+.skin-green-light .wrapper,
+.skin-green-light .main-sidebar,
+.skin-green-light .left-side {
+ background-color: #f9fafc;
+}
+.skin-green-light .content-wrapper,
+.skin-green-light .main-footer {
+ border-left: 1px solid #d2d6de;
+}
+.skin-green-light .user-panel > .info,
+.skin-green-light .user-panel > .info > a {
+ color: #444444;
+}
+.skin-green-light .sidebar-menu > li {
+ -webkit-transition: border-left-color 0.3s ease;
+ -o-transition: border-left-color 0.3s ease;
+ transition: border-left-color 0.3s ease;
+}
+.skin-green-light .sidebar-menu > li.header {
+ color: #848484;
+ background: #f9fafc;
+}
+.skin-green-light .sidebar-menu > li > a {
+ border-left: 3px solid transparent;
+ font-weight: 600;
+}
+.skin-green-light .sidebar-menu > li:hover > a,
+.skin-green-light .sidebar-menu > li.active > a {
+ color: #000000;
+ background: #f4f4f5;
+}
+.skin-green-light .sidebar-menu > li.active {
+ border-left-color: #00a65a;
+}
+.skin-green-light .sidebar-menu > li.active > a {
+ font-weight: 600;
+}
+.skin-green-light .sidebar-menu > li > .treeview-menu {
+ background: #f4f4f5;
+}
+.skin-green-light .sidebar a {
+ color: #444444;
+}
+.skin-green-light .sidebar a:hover {
+ text-decoration: none;
+}
+.skin-green-light .treeview-menu > li > a {
+ color: #777777;
+}
+.skin-green-light .treeview-menu > li.active > a,
+.skin-green-light .treeview-menu > li > a:hover {
+ color: #000000;
+}
+.skin-green-light .treeview-menu > li.active > a {
+ font-weight: 600;
+}
+.skin-green-light .sidebar-form {
+ border-radius: 3px;
+ border: 1px solid #d2d6de;
+ margin: 10px 10px;
+}
+.skin-green-light .sidebar-form input[type="text"],
+.skin-green-light .sidebar-form .btn {
+ box-shadow: none;
+ background-color: #fff;
+ border: 1px solid transparent;
+ height: 35px;
+}
+.skin-green-light .sidebar-form input[type="text"] {
+ color: #666;
+ border-top-left-radius: 2px;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 2px;
+}
+.skin-green-light .sidebar-form input[type="text"]:focus,
+.skin-green-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+ background-color: #fff;
+ color: #666;
+}
+.skin-green-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+ border-left-color: #fff;
+}
+.skin-green-light .sidebar-form .btn {
+ color: #999;
+ border-top-left-radius: 0;
+ border-top-right-radius: 2px;
+ border-bottom-right-radius: 2px;
+ border-bottom-left-radius: 0;
+}
+ at media (min-width: 768px) {
+ .skin-green-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
+ border-left: 1px solid #d2d6de;
+ }
+}
+/*
+ * Skin: Red
+ * ---------
+ */
+.skin-red .main-header .navbar {
+ background-color: #dd4b39;
+}
+.skin-red .main-header .navbar .nav > li > a {
+ color: #ffffff;
+}
+.skin-red .main-header .navbar .nav > li > a:hover,
+.skin-red .main-header .navbar .nav > li > a:active,
+.skin-red .main-header .navbar .nav > li > a:focus,
+.skin-red .main-header .navbar .nav .open > a,
+.skin-red .main-header .navbar .nav .open > a:hover,
+.skin-red .main-header .navbar .nav .open > a:focus,
+.skin-red .main-header .navbar .nav > .active > a {
+ background: rgba(0, 0, 0, 0.1);
+ color: #f6f6f6;
+}
+.skin-red .main-header .navbar .sidebar-toggle {
+ color: #ffffff;
+}
+.skin-red .main-header .navbar .sidebar-toggle:hover {
+ color: #f6f6f6;
+ background: rgba(0, 0, 0, 0.1);
+}
+.skin-red .main-header .navbar .sidebar-toggle {
+ color: #fff;
+}
+.skin-red .main-header .navbar .sidebar-toggle:hover {
+ background-color: #d73925;
+}
+ at media (max-width: 767px) {
+ .skin-red .main-header .navbar .dropdown-menu li.divider {
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+ .skin-red .main-header .navbar .dropdown-menu li a {
+ color: #fff;
+ }
+ .skin-red .main-header .navbar .dropdown-menu li a:hover {
+ background: #d73925;
+ }
+}
+.skin-red .main-header .logo {
+ background-color: #d73925;
+ color: #ffffff;
+ border-bottom: 0 solid transparent;
+}
+.skin-red .main-header .logo:hover {
+ background-color: #d33724;
+}
+.skin-red .main-header li.user-header {
+ background-color: #dd4b39;
+}
+.skin-red .content-header {
+ background: transparent;
+}
+.skin-red .wrapper,
+.skin-red .main-sidebar,
+.skin-red .left-side {
+ background-color: #222d32;
+}
+.skin-red .user-panel > .info,
+.skin-red .user-panel > .info > a {
+ color: #fff;
+}
+.skin-red .sidebar-menu > li.header {
+ color: #4b646f;
+ background: #1a2226;
+}
+.skin-red .sidebar-menu > li > a {
+ border-left: 3px solid transparent;
+}
+.skin-red .sidebar-menu > li:hover > a,
+.skin-red .sidebar-menu > li.active > a {
+ color: #ffffff;
+ background: #1e282c;
+ border-left-color: #dd4b39;
+}
+.skin-red .sidebar-menu > li > .treeview-menu {
+ margin: 0 1px;
+ background: #2c3b41;
+}
+.skin-red .sidebar a {
+ color: #b8c7ce;
+}
+.skin-red .sidebar a:hover {
+ text-decoration: none;
+}
+.skin-red .treeview-menu > li > a {
+ color: #8aa4af;
+}
+.skin-red .treeview-menu > li.active > a,
+.skin-red .treeview-menu > li > a:hover {
+ color: #ffffff;
+}
+.skin-red .sidebar-form {
+ border-radius: 3px;
+ border: 1px solid #374850;
+ margin: 10px 10px;
+}
+.skin-red .sidebar-form input[type="text"],
+.skin-red .sidebar-form .btn {
+ box-shadow: none;
+ background-color: #374850;
+ border: 1px solid transparent;
+ height: 35px;
+}
+.skin-red .sidebar-form input[type="text"] {
+ color: #666;
+ border-top-left-radius: 2px;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 2px;
+}
+.skin-red .sidebar-form input[type="text"]:focus,
+.skin-red .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+ background-color: #fff;
+ color: #666;
+}
+.skin-red .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+ border-left-color: #fff;
+}
+.skin-red .sidebar-form .btn {
+ color: #999;
+ border-top-left-radius: 0;
+ border-top-right-radius: 2px;
+ border-bottom-right-radius: 2px;
+ border-bottom-left-radius: 0;
+}
+/*
+ * Skin: Red
+ * ---------
+ */
+.skin-red-light .main-header .navbar {
+ background-color: #dd4b39;
+}
+.skin-red-light .main-header .navbar .nav > li > a {
+ color: #ffffff;
+}
+.skin-red-light .main-header .navbar .nav > li > a:hover,
+.skin-red-light .main-header .navbar .nav > li > a:active,
+.skin-red-light .main-header .navbar .nav > li > a:focus,
+.skin-red-light .main-header .navbar .nav .open > a,
+.skin-red-light .main-header .navbar .nav .open > a:hover,
+.skin-red-light .main-header .navbar .nav .open > a:focus,
+.skin-red-light .main-header .navbar .nav > .active > a {
+ background: rgba(0, 0, 0, 0.1);
+ color: #f6f6f6;
+}
+.skin-red-light .main-header .navbar .sidebar-toggle {
+ color: #ffffff;
+}
+.skin-red-light .main-header .navbar .sidebar-toggle:hover {
+ color: #f6f6f6;
+ background: rgba(0, 0, 0, 0.1);
+}
+.skin-red-light .main-header .navbar .sidebar-toggle {
+ color: #fff;
+}
+.skin-red-light .main-header .navbar .sidebar-toggle:hover {
+ background-color: #d73925;
+}
+ at media (max-width: 767px) {
+ .skin-red-light .main-header .navbar .dropdown-menu li.divider {
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+ .skin-red-light .main-header .navbar .dropdown-menu li a {
+ color: #fff;
+ }
+ .skin-red-light .main-header .navbar .dropdown-menu li a:hover {
+ background: #d73925;
+ }
+}
+.skin-red-light .main-header .logo {
+ background-color: #dd4b39;
+ color: #ffffff;
+ border-bottom: 0 solid transparent;
+}
+.skin-red-light .main-header .logo:hover {
+ background-color: #dc4735;
+}
+.skin-red-light .main-header li.user-header {
+ background-color: #dd4b39;
+}
+.skin-red-light .content-header {
+ background: transparent;
+}
+.skin-red-light .wrapper,
+.skin-red-light .main-sidebar,
+.skin-red-light .left-side {
+ background-color: #f9fafc;
+}
+.skin-red-light .content-wrapper,
+.skin-red-light .main-footer {
+ border-left: 1px solid #d2d6de;
+}
+.skin-red-light .user-panel > .info,
+.skin-red-light .user-panel > .info > a {
+ color: #444444;
+}
+.skin-red-light .sidebar-menu > li {
+ -webkit-transition: border-left-color 0.3s ease;
+ -o-transition: border-left-color 0.3s ease;
+ transition: border-left-color 0.3s ease;
+}
+.skin-red-light .sidebar-menu > li.header {
+ color: #848484;
+ background: #f9fafc;
+}
+.skin-red-light .sidebar-menu > li > a {
+ border-left: 3px solid transparent;
+ font-weight: 600;
+}
+.skin-red-light .sidebar-menu > li:hover > a,
+.skin-red-light .sidebar-menu > li.active > a {
+ color: #000000;
+ background: #f4f4f5;
+}
+.skin-red-light .sidebar-menu > li.active {
+ border-left-color: #dd4b39;
+}
+.skin-red-light .sidebar-menu > li.active > a {
+ font-weight: 600;
+}
+.skin-red-light .sidebar-menu > li > .treeview-menu {
+ background: #f4f4f5;
+}
+.skin-red-light .sidebar a {
+ color: #444444;
+}
+.skin-red-light .sidebar a:hover {
+ text-decoration: none;
+}
+.skin-red-light .treeview-menu > li > a {
+ color: #777777;
+}
+.skin-red-light .treeview-menu > li.active > a,
+.skin-red-light .treeview-menu > li > a:hover {
+ color: #000000;
+}
+.skin-red-light .treeview-menu > li.active > a {
+ font-weight: 600;
+}
+.skin-red-light .sidebar-form {
+ border-radius: 3px;
+ border: 1px solid #d2d6de;
+ margin: 10px 10px;
+}
+.skin-red-light .sidebar-form input[type="text"],
+.skin-red-light .sidebar-form .btn {
+ box-shadow: none;
+ background-color: #fff;
+ border: 1px solid transparent;
+ height: 35px;
+}
+.skin-red-light .sidebar-form input[type="text"] {
+ color: #666;
+ border-top-left-radius: 2px;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 2px;
+}
+.skin-red-light .sidebar-form input[type="text"]:focus,
+.skin-red-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+ background-color: #fff;
+ color: #666;
+}
+.skin-red-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+ border-left-color: #fff;
+}
+.skin-red-light .sidebar-form .btn {
+ color: #999;
+ border-top-left-radius: 0;
+ border-top-right-radius: 2px;
+ border-bottom-right-radius: 2px;
+ border-bottom-left-radius: 0;
+}
+ at media (min-width: 768px) {
+ .skin-red-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
+ border-left: 1px solid #d2d6de;
+ }
+}
+/*
+ * Skin: Yellow
+ * ------------
+ */
+.skin-yellow .main-header .navbar {
+ background-color: #f39c12;
+}
+.skin-yellow .main-header .navbar .nav > li > a {
+ color: #ffffff;
+}
+.skin-yellow .main-header .navbar .nav > li > a:hover,
+.skin-yellow .main-header .navbar .nav > li > a:active,
+.skin-yellow .main-header .navbar .nav > li > a:focus,
+.skin-yellow .main-header .navbar .nav .open > a,
+.skin-yellow .main-header .navbar .nav .open > a:hover,
+.skin-yellow .main-header .navbar .nav .open > a:focus,
+.skin-yellow .main-header .navbar .nav > .active > a {
+ background: rgba(0, 0, 0, 0.1);
+ color: #f6f6f6;
+}
+.skin-yellow .main-header .navbar .sidebar-toggle {
+ color: #ffffff;
+}
+.skin-yellow .main-header .navbar .sidebar-toggle:hover {
+ color: #f6f6f6;
+ background: rgba(0, 0, 0, 0.1);
+}
+.skin-yellow .main-header .navbar .sidebar-toggle {
+ color: #fff;
+}
+.skin-yellow .main-header .navbar .sidebar-toggle:hover {
+ background-color: #e08e0b;
+}
+ at media (max-width: 767px) {
+ .skin-yellow .main-header .navbar .dropdown-menu li.divider {
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+ .skin-yellow .main-header .navbar .dropdown-menu li a {
+ color: #fff;
+ }
+ .skin-yellow .main-header .navbar .dropdown-menu li a:hover {
+ background: #e08e0b;
+ }
+}
+.skin-yellow .main-header .logo {
+ background-color: #e08e0b;
+ color: #ffffff;
+ border-bottom: 0 solid transparent;
+}
+.skin-yellow .main-header .logo:hover {
+ background-color: #db8b0b;
+}
+.skin-yellow .main-header li.user-header {
+ background-color: #f39c12;
+}
+.skin-yellow .content-header {
+ background: transparent;
+}
+.skin-yellow .wrapper,
+.skin-yellow .main-sidebar,
+.skin-yellow .left-side {
+ background-color: #222d32;
+}
+.skin-yellow .user-panel > .info,
+.skin-yellow .user-panel > .info > a {
+ color: #fff;
+}
+.skin-yellow .sidebar-menu > li.header {
+ color: #4b646f;
+ background: #1a2226;
+}
+.skin-yellow .sidebar-menu > li > a {
+ border-left: 3px solid transparent;
+}
+.skin-yellow .sidebar-menu > li:hover > a,
+.skin-yellow .sidebar-menu > li.active > a {
+ color: #ffffff;
+ background: #1e282c;
+ border-left-color: #f39c12;
+}
+.skin-yellow .sidebar-menu > li > .treeview-menu {
+ margin: 0 1px;
+ background: #2c3b41;
+}
+.skin-yellow .sidebar a {
+ color: #b8c7ce;
+}
+.skin-yellow .sidebar a:hover {
+ text-decoration: none;
+}
+.skin-yellow .treeview-menu > li > a {
+ color: #8aa4af;
+}
+.skin-yellow .treeview-menu > li.active > a,
+.skin-yellow .treeview-menu > li > a:hover {
+ color: #ffffff;
+}
+.skin-yellow .sidebar-form {
+ border-radius: 3px;
+ border: 1px solid #374850;
+ margin: 10px 10px;
+}
+.skin-yellow .sidebar-form input[type="text"],
+.skin-yellow .sidebar-form .btn {
+ box-shadow: none;
+ background-color: #374850;
+ border: 1px solid transparent;
+ height: 35px;
+}
+.skin-yellow .sidebar-form input[type="text"] {
+ color: #666;
+ border-top-left-radius: 2px;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 2px;
+}
+.skin-yellow .sidebar-form input[type="text"]:focus,
+.skin-yellow .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+ background-color: #fff;
+ color: #666;
+}
+.skin-yellow .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+ border-left-color: #fff;
+}
+.skin-yellow .sidebar-form .btn {
+ color: #999;
+ border-top-left-radius: 0;
+ border-top-right-radius: 2px;
+ border-bottom-right-radius: 2px;
+ border-bottom-left-radius: 0;
+}
+/*
+ * Skin: Yellow
+ * ------------
+ */
+.skin-yellow-light .main-header .navbar {
+ background-color: #f39c12;
+}
+.skin-yellow-light .main-header .navbar .nav > li > a {
+ color: #ffffff;
+}
+.skin-yellow-light .main-header .navbar .nav > li > a:hover,
+.skin-yellow-light .main-header .navbar .nav > li > a:active,
+.skin-yellow-light .main-header .navbar .nav > li > a:focus,
+.skin-yellow-light .main-header .navbar .nav .open > a,
+.skin-yellow-light .main-header .navbar .nav .open > a:hover,
+.skin-yellow-light .main-header .navbar .nav .open > a:focus,
+.skin-yellow-light .main-header .navbar .nav > .active > a {
+ background: rgba(0, 0, 0, 0.1);
+ color: #f6f6f6;
+}
+.skin-yellow-light .main-header .navbar .sidebar-toggle {
+ color: #ffffff;
+}
+.skin-yellow-light .main-header .navbar .sidebar-toggle:hover {
+ color: #f6f6f6;
+ background: rgba(0, 0, 0, 0.1);
+}
+.skin-yellow-light .main-header .navbar .sidebar-toggle {
+ color: #fff;
+}
+.skin-yellow-light .main-header .navbar .sidebar-toggle:hover {
+ background-color: #e08e0b;
+}
+ at media (max-width: 767px) {
+ .skin-yellow-light .main-header .navbar .dropdown-menu li.divider {
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+ .skin-yellow-light .main-header .navbar .dropdown-menu li a {
+ color: #fff;
+ }
+ .skin-yellow-light .main-header .navbar .dropdown-menu li a:hover {
+ background: #e08e0b;
+ }
+}
+.skin-yellow-light .main-header .logo {
+ background-color: #f39c12;
+ color: #ffffff;
+ border-bottom: 0 solid transparent;
+}
+.skin-yellow-light .main-header .logo:hover {
+ background-color: #f39a0d;
+}
+.skin-yellow-light .main-header li.user-header {
+ background-color: #f39c12;
+}
+.skin-yellow-light .content-header {
+ background: transparent;
+}
+.skin-yellow-light .wrapper,
+.skin-yellow-light .main-sidebar,
+.skin-yellow-light .left-side {
+ background-color: #f9fafc;
+}
+.skin-yellow-light .content-wrapper,
+.skin-yellow-light .main-footer {
+ border-left: 1px solid #d2d6de;
+}
+.skin-yellow-light .user-panel > .info,
+.skin-yellow-light .user-panel > .info > a {
+ color: #444444;
+}
+.skin-yellow-light .sidebar-menu > li {
+ -webkit-transition: border-left-color 0.3s ease;
+ -o-transition: border-left-color 0.3s ease;
+ transition: border-left-color 0.3s ease;
+}
+.skin-yellow-light .sidebar-menu > li.header {
+ color: #848484;
+ background: #f9fafc;
+}
+.skin-yellow-light .sidebar-menu > li > a {
+ border-left: 3px solid transparent;
+ font-weight: 600;
+}
+.skin-yellow-light .sidebar-menu > li:hover > a,
+.skin-yellow-light .sidebar-menu > li.active > a {
+ color: #000000;
+ background: #f4f4f5;
+}
+.skin-yellow-light .sidebar-menu > li.active {
+ border-left-color: #f39c12;
+}
+.skin-yellow-light .sidebar-menu > li.active > a {
+ font-weight: 600;
+}
+.skin-yellow-light .sidebar-menu > li > .treeview-menu {
+ background: #f4f4f5;
+}
+.skin-yellow-light .sidebar a {
+ color: #444444;
+}
+.skin-yellow-light .sidebar a:hover {
+ text-decoration: none;
+}
+.skin-yellow-light .treeview-menu > li > a {
+ color: #777777;
+}
+.skin-yellow-light .treeview-menu > li.active > a,
+.skin-yellow-light .treeview-menu > li > a:hover {
+ color: #000000;
+}
+.skin-yellow-light .treeview-menu > li.active > a {
+ font-weight: 600;
+}
+.skin-yellow-light .sidebar-form {
+ border-radius: 3px;
+ border: 1px solid #d2d6de;
+ margin: 10px 10px;
+}
+.skin-yellow-light .sidebar-form input[type="text"],
+.skin-yellow-light .sidebar-form .btn {
+ box-shadow: none;
+ background-color: #fff;
+ border: 1px solid transparent;
+ height: 35px;
+}
+.skin-yellow-light .sidebar-form input[type="text"] {
+ color: #666;
+ border-top-left-radius: 2px;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 2px;
+}
+.skin-yellow-light .sidebar-form input[type="text"]:focus,
+.skin-yellow-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+ background-color: #fff;
+ color: #666;
+}
+.skin-yellow-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+ border-left-color: #fff;
+}
+.skin-yellow-light .sidebar-form .btn {
+ color: #999;
+ border-top-left-radius: 0;
+ border-top-right-radius: 2px;
+ border-bottom-right-radius: 2px;
+ border-bottom-left-radius: 0;
+}
+ at media (min-width: 768px) {
+ .skin-yellow-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
+ border-left: 1px solid #d2d6de;
+ }
+}
+/*
+ * Skin: Purple
+ * ------------
+ */
+.skin-purple .main-header .navbar {
+ background-color: #605ca8;
+}
+.skin-purple .main-header .navbar .nav > li > a {
+ color: #ffffff;
+}
+.skin-purple .main-header .navbar .nav > li > a:hover,
+.skin-purple .main-header .navbar .nav > li > a:active,
+.skin-purple .main-header .navbar .nav > li > a:focus,
+.skin-purple .main-header .navbar .nav .open > a,
+.skin-purple .main-header .navbar .nav .open > a:hover,
+.skin-purple .main-header .navbar .nav .open > a:focus,
+.skin-purple .main-header .navbar .nav > .active > a {
+ background: rgba(0, 0, 0, 0.1);
+ color: #f6f6f6;
+}
+.skin-purple .main-header .navbar .sidebar-toggle {
+ color: #ffffff;
+}
+.skin-purple .main-header .navbar .sidebar-toggle:hover {
+ color: #f6f6f6;
+ background: rgba(0, 0, 0, 0.1);
+}
+.skin-purple .main-header .navbar .sidebar-toggle {
+ color: #fff;
+}
+.skin-purple .main-header .navbar .sidebar-toggle:hover {
+ background-color: #555299;
+}
+ at media (max-width: 767px) {
+ .skin-purple .main-header .navbar .dropdown-menu li.divider {
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+ .skin-purple .main-header .navbar .dropdown-menu li a {
+ color: #fff;
+ }
+ .skin-purple .main-header .navbar .dropdown-menu li a:hover {
+ background: #555299;
+ }
+}
+.skin-purple .main-header .logo {
+ background-color: #555299;
+ color: #ffffff;
+ border-bottom: 0 solid transparent;
+}
+.skin-purple .main-header .logo:hover {
+ background-color: #545096;
+}
+.skin-purple .main-header li.user-header {
+ background-color: #605ca8;
+}
+.skin-purple .content-header {
+ background: transparent;
+}
+.skin-purple .wrapper,
+.skin-purple .main-sidebar,
+.skin-purple .left-side {
+ background-color: #222d32;
+}
+.skin-purple .user-panel > .info,
+.skin-purple .user-panel > .info > a {
+ color: #fff;
+}
+.skin-purple .sidebar-menu > li.header {
+ color: #4b646f;
+ background: #1a2226;
+}
+.skin-purple .sidebar-menu > li > a {
+ border-left: 3px solid transparent;
+}
+.skin-purple .sidebar-menu > li:hover > a,
+.skin-purple .sidebar-menu > li.active > a {
+ color: #ffffff;
+ background: #1e282c;
+ border-left-color: #605ca8;
+}
+.skin-purple .sidebar-menu > li > .treeview-menu {
+ margin: 0 1px;
+ background: #2c3b41;
+}
+.skin-purple .sidebar a {
+ color: #b8c7ce;
+}
+.skin-purple .sidebar a:hover {
+ text-decoration: none;
+}
+.skin-purple .treeview-menu > li > a {
+ color: #8aa4af;
+}
+.skin-purple .treeview-menu > li.active > a,
+.skin-purple .treeview-menu > li > a:hover {
+ color: #ffffff;
+}
+.skin-purple .sidebar-form {
+ border-radius: 3px;
+ border: 1px solid #374850;
+ margin: 10px 10px;
+}
+.skin-purple .sidebar-form input[type="text"],
+.skin-purple .sidebar-form .btn {
+ box-shadow: none;
+ background-color: #374850;
+ border: 1px solid transparent;
+ height: 35px;
+}
+.skin-purple .sidebar-form input[type="text"] {
+ color: #666;
+ border-top-left-radius: 2px;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 2px;
+}
+.skin-purple .sidebar-form input[type="text"]:focus,
+.skin-purple .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+ background-color: #fff;
+ color: #666;
+}
+.skin-purple .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+ border-left-color: #fff;
+}
+.skin-purple .sidebar-form .btn {
+ color: #999;
+ border-top-left-radius: 0;
+ border-top-right-radius: 2px;
+ border-bottom-right-radius: 2px;
+ border-bottom-left-radius: 0;
+}
+/*
+ * Skin: Purple
+ * ------------
+ */
+.skin-purple-light .main-header .navbar {
+ background-color: #605ca8;
+}
+.skin-purple-light .main-header .navbar .nav > li > a {
+ color: #ffffff;
+}
+.skin-purple-light .main-header .navbar .nav > li > a:hover,
+.skin-purple-light .main-header .navbar .nav > li > a:active,
+.skin-purple-light .main-header .navbar .nav > li > a:focus,
+.skin-purple-light .main-header .navbar .nav .open > a,
+.skin-purple-light .main-header .navbar .nav .open > a:hover,
+.skin-purple-light .main-header .navbar .nav .open > a:focus,
+.skin-purple-light .main-header .navbar .nav > .active > a {
+ background: rgba(0, 0, 0, 0.1);
+ color: #f6f6f6;
+}
+.skin-purple-light .main-header .navbar .sidebar-toggle {
+ color: #ffffff;
+}
+.skin-purple-light .main-header .navbar .sidebar-toggle:hover {
+ color: #f6f6f6;
+ background: rgba(0, 0, 0, 0.1);
+}
+.skin-purple-light .main-header .navbar .sidebar-toggle {
+ color: #fff;
+}
+.skin-purple-light .main-header .navbar .sidebar-toggle:hover {
+ background-color: #555299;
+}
+ at media (max-width: 767px) {
+ .skin-purple-light .main-header .navbar .dropdown-menu li.divider {
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+ .skin-purple-light .main-header .navbar .dropdown-menu li a {
+ color: #fff;
+ }
+ .skin-purple-light .main-header .navbar .dropdown-menu li a:hover {
+ background: #555299;
+ }
+}
+.skin-purple-light .main-header .logo {
+ background-color: #605ca8;
+ color: #ffffff;
+ border-bottom: 0 solid transparent;
+}
+.skin-purple-light .main-header .logo:hover {
+ background-color: #5d59a6;
+}
+.skin-purple-light .main-header li.user-header {
+ background-color: #605ca8;
+}
+.skin-purple-light .content-header {
+ background: transparent;
+}
+.skin-purple-light .wrapper,
+.skin-purple-light .main-sidebar,
+.skin-purple-light .left-side {
+ background-color: #f9fafc;
+}
+.skin-purple-light .content-wrapper,
+.skin-purple-light .main-footer {
+ border-left: 1px solid #d2d6de;
+}
+.skin-purple-light .user-panel > .info,
+.skin-purple-light .user-panel > .info > a {
+ color: #444444;
+}
+.skin-purple-light .sidebar-menu > li {
+ -webkit-transition: border-left-color 0.3s ease;
+ -o-transition: border-left-color 0.3s ease;
+ transition: border-left-color 0.3s ease;
+}
+.skin-purple-light .sidebar-menu > li.header {
+ color: #848484;
+ background: #f9fafc;
+}
+.skin-purple-light .sidebar-menu > li > a {
+ border-left: 3px solid transparent;
+ font-weight: 600;
+}
+.skin-purple-light .sidebar-menu > li:hover > a,
+.skin-purple-light .sidebar-menu > li.active > a {
+ color: #000000;
+ background: #f4f4f5;
+}
+.skin-purple-light .sidebar-menu > li.active {
+ border-left-color: #605ca8;
+}
+.skin-purple-light .sidebar-menu > li.active > a {
+ font-weight: 600;
+}
+.skin-purple-light .sidebar-menu > li > .treeview-menu {
+ background: #f4f4f5;
+}
+.skin-purple-light .sidebar a {
+ color: #444444;
+}
+.skin-purple-light .sidebar a:hover {
+ text-decoration: none;
+}
+.skin-purple-light .treeview-menu > li > a {
+ color: #777777;
+}
+.skin-purple-light .treeview-menu > li.active > a,
+.skin-purple-light .treeview-menu > li > a:hover {
+ color: #000000;
+}
+.skin-purple-light .treeview-menu > li.active > a {
+ font-weight: 600;
+}
+.skin-purple-light .sidebar-form {
+ border-radius: 3px;
+ border: 1px solid #d2d6de;
+ margin: 10px 10px;
+}
+.skin-purple-light .sidebar-form input[type="text"],
+.skin-purple-light .sidebar-form .btn {
+ box-shadow: none;
+ background-color: #fff;
+ border: 1px solid transparent;
+ height: 35px;
+}
+.skin-purple-light .sidebar-form input[type="text"] {
+ color: #666;
+ border-top-left-radius: 2px;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 2px;
+}
+.skin-purple-light .sidebar-form input[type="text"]:focus,
+.skin-purple-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+ background-color: #fff;
+ color: #666;
+}
+.skin-purple-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+ border-left-color: #fff;
+}
+.skin-purple-light .sidebar-form .btn {
+ color: #999;
+ border-top-left-radius: 0;
+ border-top-right-radius: 2px;
+ border-bottom-right-radius: 2px;
+ border-bottom-left-radius: 0;
+}
+ at media (min-width: 768px) {
+ .skin-purple-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
+ border-left: 1px solid #d2d6de;
+ }
+}
diff --git a/inst/AdminLTE/_all-skins.min.css b/inst/AdminLTE/_all-skins.min.css
new file mode 100644
index 0000000..ec31488
--- /dev/null
+++ b/inst/AdminLTE/_all-skins.min.css
@@ -0,0 +1 @@
+.skin-blue .main-header .navbar{background-color:#3c8dbc}.skin-blue .main-header .navbar .nav>li>a{color:#fff}.skin-blue .main-header .navbar .nav .open>a,.skin-blue .main-header .navbar .nav .open>a:focus,.skin-blue .main-header .navbar .nav .open>a:hover,.skin-blue .main-header .navbar .nav>.active>a,.skin-blue .main-header .navbar .nav>li>a:active,.skin-blue .main-header .navbar .nav>li>a:focus,.skin-blue .main-header .navbar .nav>li>a:hover{background:rgba(0,0,0,.1);color:#f6f6f6}.sk [...]
\ No newline at end of file
diff --git a/inst/AdminLTE/app.js b/inst/AdminLTE/app.js
new file mode 100644
index 0000000..4df0117
--- /dev/null
+++ b/inst/AdminLTE/app.js
@@ -0,0 +1,793 @@
+//---------------------------------------------------------------------
+// Source file: ../srcjs/AdminLTE/app.js
+
+/*! AdminLTE app.js
+ * ================
+ * Main JS application file for AdminLTE v2. This file
+ * should be included in all pages. It controls some layout
+ * options and implements exclusive AdminLTE plugins.
+ *
+ * @Author Almsaeed Studio
+ * @Support <http://www.almsaeedstudio.com>
+ * @Email <abdullah at almsaeedstudio.com>
+ * @version 2.3.11
+ * @license MIT <http://opensource.org/licenses/MIT>
+ */
+
+//Make sure jQuery has been loaded before app.js
+if (typeof jQuery === "undefined") {
+ throw new Error("AdminLTE requires jQuery");
+}
+
+/* AdminLTE
+ *
+ * @type Object
+ * @description $.AdminLTE is the main object for the template's app.
+ * It's used for implementing functions and options related
+ * to the template. Keeping everything wrapped in an object
+ * prevents conflict with other plugins and is a better
+ * way to organize our code.
+ */
+$.AdminLTE = {};
+
+/* --------------------
+ * - AdminLTE Options -
+ * --------------------
+ * Modify these options to suit your implementation
+ */
+$.AdminLTE.options = {
+ //Add slimscroll to navbar menus
+ //This requires you to load the slimscroll plugin
+ //in every page before app.js
+ navbarMenuSlimscroll: true,
+ navbarMenuSlimscrollWidth: "3px", //The width of the scroll bar
+ navbarMenuHeight: "200px", //The height of the inner menu
+ //General animation speed for JS animated elements such as box collapse/expand and
+ //sidebar treeview slide up/down. This options accepts an integer as milliseconds,
+ //'fast', 'normal', or 'slow'
+ animationSpeed: 500,
+ //Sidebar push menu toggle button selector
+ sidebarToggleSelector: "[data-toggle='offcanvas']",
+ //Activate sidebar push menu
+ sidebarPushMenu: true,
+ //Activate sidebar slimscroll if the fixed layout is set (requires SlimScroll Plugin)
+ sidebarSlimScroll: true,
+ //Enable sidebar expand on hover effect for sidebar mini
+ //This option is forced to true if both the fixed layout and sidebar mini
+ //are used together
+ sidebarExpandOnHover: false,
+ //BoxRefresh Plugin
+ enableBoxRefresh: true,
+ //Bootstrap.js tooltip
+ enableBSToppltip: true,
+ BSTooltipSelector: "[data-toggle='tooltip']",
+ //Enable Fast Click. Fastclick.js creates a more
+ //native touch experience with touch devices. If you
+ //choose to enable the plugin, make sure you load the script
+ //before AdminLTE's app.js
+ enableFastclick: false,
+ //Control Sidebar Tree views
+ enableControlTreeView: true,
+ //Control Sidebar Options
+ enableControlSidebar: true,
+ controlSidebarOptions: {
+ //Which button should trigger the open/close event
+ toggleBtnSelector: "[data-toggle='control-sidebar']",
+ //The sidebar selector
+ selector: ".control-sidebar",
+ //Enable slide over content
+ slide: true
+ },
+ //Box Widget Plugin. Enable this plugin
+ //to allow boxes to be collapsed and/or removed
+ enableBoxWidget: true,
+ //Box Widget plugin options
+ boxWidgetOptions: {
+ boxWidgetIcons: {
+ //Collapse icon
+ collapse: 'fa-minus',
+ //Open icon
+ open: 'fa-plus',
+ //Remove icon
+ remove: 'fa-times'
+ },
+ boxWidgetSelectors: {
+ //Remove button selector
+ remove: '[data-widget="remove"]',
+ //Collapse button selector
+ collapse: '[data-widget="collapse"]'
+ }
+ },
+ //Direct Chat plugin options
+ directChat: {
+ //Enable direct chat by default
+ enable: true,
+ //The button to open and close the chat contacts pane
+ contactToggleSelector: '[data-widget="chat-pane-toggle"]'
+ },
+ //Define the set of colors to use globally around the website
+ colors: {
+ lightBlue: "#3c8dbc",
+ red: "#f56954",
+ green: "#00a65a",
+ aqua: "#00c0ef",
+ yellow: "#f39c12",
+ blue: "#0073b7",
+ navy: "#001F3F",
+ teal: "#39CCCC",
+ olive: "#3D9970",
+ lime: "#01FF70",
+ orange: "#FF851B",
+ fuchsia: "#F012BE",
+ purple: "#8E24AA",
+ maroon: "#D81B60",
+ black: "#222222",
+ gray: "#d2d6de"
+ },
+ //The standard screen sizes that bootstrap uses.
+ //If you change these in the variables.less file, change
+ //them here too.
+ screenSizes: {
+ xs: 480,
+ sm: 768,
+ md: 992,
+ lg: 1200
+ }
+};
+
+/* ------------------
+ * - Implementation -
+ * ------------------
+ * The next block of code implements AdminLTE's
+ * functions and plugins as specified by the
+ * options above.
+ */
+$(function () {
+ "use strict";
+
+ //Fix for IE page transitions
+ $("body").removeClass("hold-transition");
+
+ //Extend options if external options exist
+ if (typeof AdminLTEOptions !== "undefined") {
+ $.extend(true,
+ $.AdminLTE.options,
+ AdminLTEOptions);
+ }
+
+ //Easy access to options
+ var o = $.AdminLTE.options;
+
+ //Set up the object
+ _init();
+
+ //Activate the layout maker
+ $.AdminLTE.layout.activate();
+
+ //Enable sidebar tree view controls
+ if (o.enableControlTreeView) {
+ $.AdminLTE.tree('.sidebar');
+ }
+
+ //Enable control sidebar
+ if (o.enableControlSidebar) {
+ $.AdminLTE.controlSidebar.activate();
+ }
+
+ //Add slimscroll to navbar dropdown
+ if (o.navbarMenuSlimscroll && typeof $.fn.slimscroll != 'undefined') {
+ $(".navbar .menu").slimscroll({
+ height: o.navbarMenuHeight,
+ alwaysVisible: false,
+ size: o.navbarMenuSlimscrollWidth
+ }).css("width", "100%");
+ }
+
+ //Activate sidebar push menu
+ if (o.sidebarPushMenu) {
+ $.AdminLTE.pushMenu.activate(o.sidebarToggleSelector);
+ }
+
+ //Activate Bootstrap tooltip
+ if (o.enableBSToppltip) {
+ $('body').tooltip({
+ selector: o.BSTooltipSelector,
+ container: 'body'
+ });
+ }
+
+ //Activate box widget
+ if (o.enableBoxWidget) {
+ $.AdminLTE.boxWidget.activate();
+ }
+
+ //Activate fast click
+ if (o.enableFastclick && typeof FastClick != 'undefined') {
+ FastClick.attach(document.body);
+ }
+
+ //Activate direct chat widget
+ if (o.directChat.enable) {
+ $(document).on('click', o.directChat.contactToggleSelector, function () {
+ var box = $(this).parents('.direct-chat').first();
+ box.toggleClass('direct-chat-contacts-open');
+ });
+ }
+
+ /*
+ * INITIALIZE BUTTON TOGGLE
+ * ------------------------
+ */
+ $('.btn-group[data-toggle="btn-toggle"]').each(function () {
+ var group = $(this);
+ $(this).find(".btn").on('click', function (e) {
+ group.find(".btn.active").removeClass("active");
+ $(this).addClass("active");
+ e.preventDefault();
+ });
+
+ });
+});
+
+/* ----------------------------------
+ * - Initialize the AdminLTE Object -
+ * ----------------------------------
+ * All AdminLTE functions are implemented below.
+ */
+function _init() {
+ 'use strict';
+ /* Layout
+ * ======
+ * Fixes the layout height in case min-height fails.
+ *
+ * @type Object
+ * @usage $.AdminLTE.layout.activate()
+ * $.AdminLTE.layout.fix()
+ * $.AdminLTE.layout.fixSidebar()
+ */
+ $.AdminLTE.layout = {
+ activate: function () {
+ var _this = this;
+ _this.fix();
+ _this.fixSidebar();
+ $('body, html, .wrapper').css('height', 'auto');
+ $(window, ".wrapper").resize(function () {
+ _this.fix();
+ _this.fixSidebar();
+ });
+ },
+ fix: function () {
+ // Remove overflow from .wrapper if layout-boxed exists
+ $(".layout-boxed > .wrapper").css('overflow', 'hidden');
+ //Get window height and the wrapper height
+ var footer_height = $('.main-footer').outerHeight() || 0;
+ var neg = $('.main-header').outerHeight() + footer_height;
+ var window_height = $(window).height();
+ var sidebar_height = $(".sidebar").height() || 0;
+ //Set the min-height of the content and sidebar based on the
+ //the height of the document.
+ if ($("body").hasClass("fixed")) {
+ $(".content-wrapper, .right-side").css('min-height', window_height - footer_height);
+ } else {
+ var postSetWidth;
+ if (window_height >= sidebar_height) {
+ $(".content-wrapper, .right-side").css('min-height', window_height - neg);
+ postSetWidth = window_height - neg;
+ } else {
+ $(".content-wrapper, .right-side").css('min-height', sidebar_height);
+ postSetWidth = sidebar_height;
+ }
+
+ //Fix for the control sidebar height
+ var controlSidebar = $($.AdminLTE.options.controlSidebarOptions.selector);
+ if (typeof controlSidebar !== "undefined") {
+ if (controlSidebar.height() > postSetWidth)
+ $(".content-wrapper, .right-side").css('min-height', controlSidebar.height());
+ }
+
+ }
+ },
+ fixSidebar: function () {
+ //Make sure the body tag has the .fixed class
+ if (!$("body").hasClass("fixed")) {
+ if (typeof $.fn.slimScroll != 'undefined') {
+ $(".sidebar").slimScroll({destroy: true}).height("auto");
+ }
+ return;
+ } else if (typeof $.fn.slimScroll == 'undefined' && window.console) {
+ window.console.error("Error: the fixed layout requires the slimscroll plugin!");
+ }
+ //Enable slimscroll for fixed layout
+ if ($.AdminLTE.options.sidebarSlimScroll) {
+ if (typeof $.fn.slimScroll != 'undefined') {
+ //Destroy if it exists
+ $(".sidebar").slimScroll({destroy: true}).height("auto");
+ //Add slimscroll
+ $(".sidebar").slimScroll({
+ height: ($(window).height() - $(".main-header").height()) + "px",
+ color: "rgba(0,0,0,0.2)",
+ size: "3px"
+ });
+ }
+ }
+ }
+ };
+
+ /* PushMenu()
+ * ==========
+ * Adds the push menu functionality to the sidebar.
+ *
+ * @type Function
+ * @usage: $.AdminLTE.pushMenu("[data-toggle='offcanvas']")
+ */
+ $.AdminLTE.pushMenu = {
+ activate: function (toggleBtn) {
+ //Get the screen sizes
+ var screenSizes = $.AdminLTE.options.screenSizes;
+
+ //Enable sidebar toggle
+ $(document).on('click', toggleBtn, function (e) {
+ e.preventDefault();
+
+ //Enable sidebar push menu
+ if ($(window).width() > (screenSizes.sm - 1)) {
+ if ($("body").hasClass('sidebar-collapse')) {
+ $("body").removeClass('sidebar-collapse').trigger('expanded.pushMenu');
+ } else {
+ $("body").addClass('sidebar-collapse').trigger('collapsed.pushMenu');
+ }
+ }
+ //Handle sidebar push menu for small screens
+ else {
+ if ($("body").hasClass('sidebar-open')) {
+ $("body").removeClass('sidebar-open').removeClass('sidebar-collapse').trigger('collapsed.pushMenu');
+ } else {
+ $("body").addClass('sidebar-open').trigger('expanded.pushMenu');
+ }
+ }
+ });
+
+ $(".content-wrapper").click(function () {
+ //Enable hide menu when clicking on the content-wrapper on small screens
+ if ($(window).width() <= (screenSizes.sm - 1) && $("body").hasClass("sidebar-open")) {
+ $("body").removeClass('sidebar-open');
+ }
+ });
+
+ //Enable expand on hover for sidebar mini
+ if ($.AdminLTE.options.sidebarExpandOnHover
+ || ($('body').hasClass('fixed')
+ && $('body').hasClass('sidebar-mini'))) {
+ this.expandOnHover();
+ }
+ },
+ expandOnHover: function () {
+ var _this = this;
+ var screenWidth = $.AdminLTE.options.screenSizes.sm - 1;
+ //Expand sidebar on hover
+ $('.main-sidebar').hover(function () {
+ if ($('body').hasClass('sidebar-mini')
+ && $("body").hasClass('sidebar-collapse')
+ && $(window).width() > screenWidth) {
+ _this.expand();
+ }
+ }, function () {
+ if ($('body').hasClass('sidebar-mini')
+ && $('body').hasClass('sidebar-expanded-on-hover')
+ && $(window).width() > screenWidth) {
+ _this.collapse();
+ }
+ });
+ },
+ expand: function () {
+ $("body").removeClass('sidebar-collapse').addClass('sidebar-expanded-on-hover');
+ },
+ collapse: function () {
+ if ($('body').hasClass('sidebar-expanded-on-hover')) {
+ $('body').removeClass('sidebar-expanded-on-hover').addClass('sidebar-collapse');
+ }
+ }
+ };
+
+ /* Tree()
+ * ======
+ * Converts the sidebar into a multilevel
+ * tree view menu.
+ *
+ * @type Function
+ * @Usage: $.AdminLTE.tree('.sidebar')
+ */
+ $.AdminLTE.tree = function (menu) {
+ var _this = this;
+ var animationSpeed = $.AdminLTE.options.animationSpeed;
+ $(document).off('click', menu + ' li a')
+ .on('click', menu + ' li a', function (e) {
+ //Get the clicked link and the next element
+ var $this = $(this);
+ var checkElement = $this.next();
+
+ //Check if the next element is a menu and is visible
+ if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible')) && (!$('body').hasClass('sidebar-collapse'))) {
+ //Close the menu
+ checkElement.slideUp(animationSpeed, function () {
+ checkElement.removeClass('menu-open');
+ //Fix the layout in case the sidebar stretches over the height of the window
+ //_this.layout.fix();
+ });
+ checkElement.parent("li").removeClass("active");
+ }
+ //If the menu is not visible
+ else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
+ //Get the parent menu
+ var parent = $this.parents('ul').first();
+ //Close all open menus within the parent
+ var ul = parent.find('ul:visible').slideUp(animationSpeed);
+ //Remove the menu-open class from the parent
+ ul.removeClass('menu-open');
+ //Get the parent li
+ var parent_li = $this.parent("li");
+
+ // shiny-mod (see README-shiny-mods.md)
+ var shinyOutput = checkElement.find('.shiny-bound-output');
+ if (shinyOutput.length !== 0 && shinyOutput.first().html().length === 0) {
+ shinyOutput.first().html('<br/>');
+ }
+
+ //Open the target menu and add the menu-open class
+ checkElement.slideDown(animationSpeed, function () {
+ //Add the class active to the parent li
+ checkElement.addClass('menu-open');
+ parent.find('li.active').removeClass('active');
+ parent_li.addClass('active');
+ //Fix the layout in case the sidebar stretches over the height of the window
+ _this.layout.fix();
+ });
+ }
+ //if this isn't a link, prevent the page from being redirected
+ if (checkElement.is('.treeview-menu')) {
+ e.preventDefault();
+ }
+ });
+ };
+
+ /* ControlSidebar
+ * ==============
+ * Adds functionality to the right sidebar
+ *
+ * @type Object
+ * @usage $.AdminLTE.controlSidebar.activate(options)
+ */
+ $.AdminLTE.controlSidebar = {
+ //instantiate the object
+ activate: function () {
+ //Get the object
+ var _this = this;
+ //Update options
+ var o = $.AdminLTE.options.controlSidebarOptions;
+ //Get the sidebar
+ var sidebar = $(o.selector);
+ //The toggle button
+ var btn = $(o.toggleBtnSelector);
+
+ //Listen to the click event
+ btn.on('click', function (e) {
+ e.preventDefault();
+ //If the sidebar is not open
+ if (!sidebar.hasClass('control-sidebar-open')
+ && !$('body').hasClass('control-sidebar-open')) {
+ //Open the sidebar
+ _this.open(sidebar, o.slide);
+ } else {
+ _this.close(sidebar, o.slide);
+ }
+ });
+
+ //If the body has a boxed layout, fix the sidebar bg position
+ var bg = $(".control-sidebar-bg");
+ _this._fix(bg);
+
+ //If the body has a fixed layout, make the control sidebar fixed
+ if ($('body').hasClass('fixed')) {
+ _this._fixForFixed(sidebar);
+ } else {
+ //If the content height is less than the sidebar's height, force max height
+ if ($('.content-wrapper, .right-side').height() < sidebar.height()) {
+ _this._fixForContent(sidebar);
+ }
+ }
+ },
+ //Open the control sidebar
+ open: function (sidebar, slide) {
+ //Slide over content
+ if (slide) {
+ sidebar.addClass('control-sidebar-open');
+ } else {
+ //Push the content by adding the open class to the body instead
+ //of the sidebar itself
+ $('body').addClass('control-sidebar-open');
+ }
+ },
+ //Close the control sidebar
+ close: function (sidebar, slide) {
+ if (slide) {
+ sidebar.removeClass('control-sidebar-open');
+ } else {
+ $('body').removeClass('control-sidebar-open');
+ }
+ },
+ _fix: function (sidebar) {
+ var _this = this;
+ if ($("body").hasClass('layout-boxed')) {
+ sidebar.css('position', 'absolute');
+ sidebar.height($(".wrapper").height());
+ if (_this.hasBindedResize) {
+ return;
+ }
+ $(window).resize(function () {
+ _this._fix(sidebar);
+ });
+ _this.hasBindedResize = true;
+ } else {
+ sidebar.css({
+ 'position': 'fixed',
+ 'height': 'auto'
+ });
+ }
+ },
+ _fixForFixed: function (sidebar) {
+ sidebar.css({
+ 'position': 'fixed',
+ 'max-height': '100%',
+ 'overflow': 'auto',
+ 'padding-bottom': '50px'
+ });
+ },
+ _fixForContent: function (sidebar) {
+ $(".content-wrapper, .right-side").css('min-height', sidebar.height());
+ }
+ };
+
+ /* BoxWidget
+ * =========
+ * BoxWidget is a plugin to handle collapsing and
+ * removing boxes from the screen.
+ *
+ * @type Object
+ * @usage $.AdminLTE.boxWidget.activate()
+ * Set all your options in the main $.AdminLTE.options object
+ */
+ $.AdminLTE.boxWidget = {
+ selectors: $.AdminLTE.options.boxWidgetOptions.boxWidgetSelectors,
+ icons: $.AdminLTE.options.boxWidgetOptions.boxWidgetIcons,
+ animationSpeed: $.AdminLTE.options.animationSpeed,
+ activate: function (_box) {
+ var _this = this;
+ if (!_box) {
+ _box = document; // activate all boxes per default
+ }
+ //Listen for collapse event triggers
+ $(_box).on('click', _this.selectors.collapse, function (e) {
+ e.preventDefault();
+ _this.collapse($(this));
+ });
+
+ //Listen for remove event triggers
+ $(_box).on('click', _this.selectors.remove, function (e) {
+ e.preventDefault();
+ _this.remove($(this));
+ });
+ },
+ collapse: function (element) {
+ var _this = this;
+ //Find the box parent
+ var box = element.parents(".box").first();
+ //Find the body and the footer
+ var box_content = box.find("> .box-body, > .box-footer, > form >.box-body, > form > .box-footer");
+ if (!box.hasClass("collapsed-box")) {
+ //Convert minus into plus
+ element.children(":first")
+ .removeClass(_this.icons.collapse)
+ .addClass(_this.icons.open);
+ //Hide the content
+ box_content.slideUp(_this.animationSpeed, function () {
+ box.addClass("collapsed-box");
+ box.trigger("hidden.bs.collapse");
+ });
+ } else {
+ //Convert plus into minus
+ element.children(":first")
+ .removeClass(_this.icons.open)
+ .addClass(_this.icons.collapse);
+
+ // Technically, it should be 'show' which is triggered here, and
+ // 'shown' which is triggered later. However, this works better because
+ // of the slow expansion transition -- the box would fully expand, and
+ // only then trigger 'shown', which then results in an update of the
+ // content. This would allow users to see the old content during the
+ // expansion.
+ box.trigger("shown.bs.collapse");
+
+ //Show the content
+ box_content.slideDown(_this.animationSpeed, function () {
+ box.removeClass("collapsed-box");
+ });
+ }
+ },
+ remove: function (element) {
+ //Find the box parent
+ var box = element.parents(".box").first();
+ box.slideUp(this.animationSpeed);
+ }
+ };
+}
+
+/* ------------------
+ * - Custom Plugins -
+ * ------------------
+ * All custom plugins are defined below.
+ */
+
+/*
+ * BOX REFRESH BUTTON
+ * ------------------
+ * This is a custom plugin to use with the component BOX. It allows you to add
+ * a refresh button to the box. It converts the box's state to a loading state.
+ *
+ * @type plugin
+ * @usage $("#box-widget").boxRefresh( options );
+ */
+(function ($) {
+
+ "use strict";
+
+ $.fn.boxRefresh = function (options) {
+
+ // Render options
+ var settings = $.extend({
+ //Refresh button selector
+ trigger: ".refresh-btn",
+ //File source to be loaded (e.g: ajax/src.php)
+ source: "",
+ //Callbacks
+ onLoadStart: function (box) {
+ return box;
+ }, //Right after the button has been clicked
+ onLoadDone: function (box) {
+ return box;
+ } //When the source has been loaded
+
+ }, options);
+
+ //The overlay
+ var overlay = $('<div class="overlay"><div class="fa fa-refresh fa-spin"></div></div>');
+
+ return this.each(function () {
+ //if a source is specified
+ if (settings.source === "") {
+ if (window.console) {
+ window.console.log("Please specify a source first - boxRefresh()");
+ }
+ return;
+ }
+ //the box
+ var box = $(this);
+ //the button
+ var rBtn = box.find(settings.trigger).first();
+
+ //On trigger click
+ rBtn.on('click', function (e) {
+ e.preventDefault();
+ //Add loading overlay
+ start(box);
+
+ //Perform ajax call
+ box.find(".box-body").load(settings.source, function () {
+ done(box);
+ });
+ });
+ });
+
+ function start(box) {
+ //Add overlay and loading img
+ box.append(overlay);
+
+ settings.onLoadStart.call(box);
+ }
+
+ function done(box) {
+ //Remove overlay and loading img
+ box.find(overlay).remove();
+
+ settings.onLoadDone.call(box);
+ }
+
+ };
+
+})(jQuery);
+
+/*
+ * EXPLICIT BOX CONTROLS
+ * -----------------------
+ * This is a custom plugin to use with the component BOX. It allows you to activate
+ * a box inserted in the DOM after the app.js was loaded, toggle and remove box.
+ *
+ * @type plugin
+ * @usage $("#box-widget").activateBox();
+ * @usage $("#box-widget").toggleBox();
+ * @usage $("#box-widget").removeBox();
+ */
+(function ($) {
+
+ 'use strict';
+
+ $.fn.activateBox = function () {
+ $.AdminLTE.boxWidget.activate(this);
+ };
+
+ $.fn.toggleBox = function () {
+ var button = $($.AdminLTE.boxWidget.selectors.collapse, this);
+ $.AdminLTE.boxWidget.collapse(button);
+ };
+
+ $.fn.removeBox = function () {
+ var button = $($.AdminLTE.boxWidget.selectors.remove, this);
+ $.AdminLTE.boxWidget.remove(button);
+ };
+
+})(jQuery);
+
+/*
+ * TODO LIST CUSTOM PLUGIN
+ * -----------------------
+ * This plugin depends on iCheck plugin for checkbox and radio inputs
+ *
+ * @type plugin
+ * @usage $("#todo-widget").todolist( options );
+ */
+(function ($) {
+
+ 'use strict';
+
+ $.fn.todolist = function (options) {
+ // Render options
+ var settings = $.extend({
+ //When the user checks the input
+ onCheck: function (ele) {
+ return ele;
+ },
+ //When the user unchecks the input
+ onUncheck: function (ele) {
+ return ele;
+ }
+ }, options);
+
+ return this.each(function () {
+
+ if (typeof $.fn.iCheck != 'undefined') {
+ $('input', this).on('ifChecked', function () {
+ var ele = $(this).parents("li").first();
+ ele.toggleClass("done");
+ settings.onCheck.call(ele);
+ });
+
+ $('input', this).on('ifUnchecked', function () {
+ var ele = $(this).parents("li").first();
+ ele.toggleClass("done");
+ settings.onUncheck.call(ele);
+ });
+ } else {
+ $('input', this).on('change', function () {
+ var ele = $(this).parents("li").first();
+ ele.toggleClass("done");
+ if ($('input', ele).is(":checked")) {
+ settings.onCheck.call(ele);
+ } else {
+ settings.onUncheck.call(ele);
+ }
+ });
+ }
+ });
+ };
+}(jQuery));
+
+//# sourceMappingURL=app.js.map
\ No newline at end of file
diff --git a/inst/AdminLTE/app.js.map b/inst/AdminLTE/app.js.map
new file mode 100644
index 0000000..eecfaa7
--- /dev/null
+++ b/inst/AdminLTE/app.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../../srcjs/AdminLTE/app.js"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;AACxC;AACA,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;AACnB,CAAC,CAAC,CAAC,gBAAgB;AACnB,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;AACtD,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM;AAC3D,CAAC,CAAC [...]
\ No newline at end of file
diff --git a/inst/AdminLTE/app.min.js b/inst/AdminLTE/app.min.js
new file mode 100644
index 0000000..377d604
--- /dev/null
+++ b/inst/AdminLTE/app.min.js
@@ -0,0 +1,2 @@
+function _init(){"use strict";$.AdminLTE.layout={activate:function(){var a=this;a.fix(),a.fixSidebar(),$("body, html, .wrapper").css("height","auto"),$(window,".wrapper").resize(function(){a.fix(),a.fixSidebar()})},fix:function(){$(".layout-boxed > .wrapper").css("overflow","hidden");var a=$(".main-footer").outerHeight()||0,b=$(".main-header").outerHeight()+a,c=$(window).height(),d=$(".sidebar").height()||0;if($("body").hasClass("fixed"))$(".content-wrapper, .right-side").css("min-height [...]
+//# sourceMappingURL=app.min.js.map
\ No newline at end of file
diff --git a/inst/AdminLTE/app.min.js.map b/inst/AdminLTE/app.min.js.map
new file mode 100644
index 0000000..93c78bb
--- /dev/null
+++ b/inst/AdminLTE/app.min.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../../srcjs/AdminLTE/app.js"],"names":["_init","$","AdminLTE","layout","activate","_this","this","fix","fixSidebar","css","window","resize","footer_height","outerHeight","neg","window_height","height","sidebar_height","hasClass","postSetWidth","controlSidebar","options","controlSidebarOptions","selector","fn","slimScroll","console","error","sidebarSlimScroll","destroy","color","size","pushMenu","toggleBtn","screenSizes","document","on","e","preventDefault","width [...]
\ No newline at end of file
diff --git a/inst/AdminLTE/fonts/Source_Sans_Pro_300.ttf b/inst/AdminLTE/fonts/Source_Sans_Pro_300.ttf
new file mode 100644
index 0000000..5d8a996
Binary files /dev/null and b/inst/AdminLTE/fonts/Source_Sans_Pro_300.ttf differ
diff --git a/inst/AdminLTE/fonts/Source_Sans_Pro_300italic.ttf b/inst/AdminLTE/fonts/Source_Sans_Pro_300italic.ttf
new file mode 100644
index 0000000..f28c3c1
Binary files /dev/null and b/inst/AdminLTE/fonts/Source_Sans_Pro_300italic.ttf differ
diff --git a/inst/AdminLTE/fonts/Source_Sans_Pro_400.ttf b/inst/AdminLTE/fonts/Source_Sans_Pro_400.ttf
new file mode 100644
index 0000000..950ff8b
Binary files /dev/null and b/inst/AdminLTE/fonts/Source_Sans_Pro_400.ttf differ
diff --git a/inst/AdminLTE/fonts/Source_Sans_Pro_400italic.ttf b/inst/AdminLTE/fonts/Source_Sans_Pro_400italic.ttf
new file mode 100644
index 0000000..0cf2e43
Binary files /dev/null and b/inst/AdminLTE/fonts/Source_Sans_Pro_400italic.ttf differ
diff --git a/inst/AdminLTE/fonts/Source_Sans_Pro_600.ttf b/inst/AdminLTE/fonts/Source_Sans_Pro_600.ttf
new file mode 100644
index 0000000..c81e192
Binary files /dev/null and b/inst/AdminLTE/fonts/Source_Sans_Pro_600.ttf differ
diff --git a/inst/AdminLTE/fonts/Source_Sans_Pro_600italic.ttf b/inst/AdminLTE/fonts/Source_Sans_Pro_600italic.ttf
new file mode 100644
index 0000000..dc909fa
Binary files /dev/null and b/inst/AdminLTE/fonts/Source_Sans_Pro_600italic.ttf differ
diff --git a/inst/AdminLTE/fonts/Source_Sans_Pro_700.ttf b/inst/AdminLTE/fonts/Source_Sans_Pro_700.ttf
new file mode 100644
index 0000000..cfe7065
Binary files /dev/null and b/inst/AdminLTE/fonts/Source_Sans_Pro_700.ttf differ
diff --git a/inst/shinydashboard.css b/inst/shinydashboard.css
new file mode 100644
index 0000000..1bee045
--- /dev/null
+++ b/inst/shinydashboard.css
@@ -0,0 +1,70 @@
+/* A replacement for .small-box .icon, where the icon is smaller and doesn't
+ change size when moused over. */
+.small-box .icon-large {
+ position: absolute;
+ top: auto;
+ bottom: 5px;
+ right: 5px;
+ font-size: 70px;
+ color: rgba(0, 0, 0, 0.15);
+}
+
+/* So that selectize dropdowns are visible if they go off the bottom. */
+.content {
+ overflow: visible;
+}
+
+.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > .glyphicon,
+.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > .fa,
+.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > .ion {
+ float: left;
+ font-size: 30px;
+ width: 50px;
+ text-align: center;
+ margin-right: 5px;
+ color: #000;
+}
+
+/* Sidebar user panel needs a minimum height when there's no image. */
+section.sidebar .user-panel {
+ min-height: 65px;
+}
+
+/* Inputs in the sidebar */
+section.sidebar .shiny-input-container {
+ /* Proper spacing around inputs. */
+ padding: 12px 15px 0px 15px;
+ /* Wrap content (important for inline inputs). */
+ white-space: normal;
+}
+
+/* Make action buttons/links look good on the sidebar panel */
+section.sidebar .shiny-bound-input.action-button,
+section.sidebar .shiny-bound-input.action-link {
+ margin: 6px 5px 6px 15px;
+ display: block;
+}
+
+/* Shiny inputs in boxes should span full width. */
+div.box-body .shiny-input-container {
+ width: auto;
+}
+
+/* Sidebar is dark, so make text light by default. */
+.sidebar {
+ color: #fff;
+}
+/* Slider min and max in sidebar. */
+.sidebar .irs-min, .sidebar .irs-max {
+ color: #aaa;
+}
+
+/* Don't highlight text when info box is in <a> tag */
+a > .info-box {
+ color: #333;
+}
+
+/* Shiny Server Pro logout panel needs to be raised above menu bar */
+.shiny-server-account {
+ z-index: 2000;
+}
diff --git a/inst/shinydashboard.js b/inst/shinydashboard.js
new file mode 100644
index 0000000..27bd8ab
--- /dev/null
+++ b/inst/shinydashboard.js
@@ -0,0 +1,322 @@
+//---------------------------------------------------------------------
+// Source file: ../srcjs/_start.js
+
+$(function() {
+
+//---------------------------------------------------------------------
+// Source file: ../srcjs/tabs.js
+
+// This function handles a special case in the AdminLTE sidebar: when there
+// is a sidebar-menu with items, and one of those items has sub-items, and
+// they are used for tab navigation. Normally, if one of the items is
+// selected and then a sub-item is clicked, both the item and sub-item will
+// retain the "active" class, so they will both be highlighted. This happens
+// because they're not designed to be used together for tab panels. This
+// code ensures that only one item will have the "active" class.
+var deactivateOtherTabs = function() {
+ // Find all tab links under sidebar-menu even if they don't have a
+ // tabName (which is why the second selector is necessary)
+ var $tablinks = $(".sidebar-menu a[data-toggle='tab']," +
+ ".sidebar-menu li.treeview > a");
+
+ // If any other items are active, deactivate them
+ $tablinks.not($(this)).parent("li").removeClass("active");
+
+ // Trigger event for the tabItemInputBinding
+ var $obj = $('.sidebarMenuSelectedTabItem');
+ var inputBinding = $obj.data('shiny-input-binding');
+ if (typeof inputBinding !== 'undefined') {
+ inputBinding.setValue($obj, $(this).attr('data-value'));
+ $obj.trigger('change');
+ }
+};
+
+$(document).on('shown.bs.tab', '.sidebar-menu a[data-toggle="tab"]',
+ deactivateOtherTabs);
+
+// When document is ready, if there is a sidebar menu with no activated tabs,
+// activate the one specified by `data-start-selected`, or if that's not
+// present, the first one.
+var ensureActivatedTab = function() {
+ var $tablinks = $(".sidebar-menu a[data-toggle='tab']");
+
+ // If there's a `data-start-selected` attribute and we can find a tab with
+ // that name, activate it.
+ var $startTab = $tablinks.filter("[data-start-selected='1']");
+ if ($startTab.length === 0) {
+ // If no tab starts selected, use the first one, if present
+ $startTab = $tablinks.first();
+ }
+
+ // If there are no tabs, $startTab.length will be 0.
+ if ($startTab.length !== 0) {
+ $startTab.tab("show");
+
+ // This is indirectly setting the value of the Shiny input by setting
+ // an attribute on the html element it is bound to. We cannot use the
+ // inputBinding's setValue() method here because this is called too
+ // early (before Shiny has fully initialized)
+ $(".sidebarMenuSelectedTabItem").attr("data-value",
+ $startTab.attr("data-value"));
+ }
+};
+
+ensureActivatedTab();
+
+//---------------------------------------------------------------------
+// Source file: ../srcjs/sidebar.js
+
+// Optionally disable sidebar (set through the `disable` argument
+// to the `dashboardSidebar` function)
+if ($("section.sidebar").data("disable")) {
+ $("body").addClass("sidebar-collapse");
+ $(".navbar > .sidebar-toggle").hide();
+}
+
+// Get the correct value for `input$sidebarCollapsed`, depending on
+// whether or not the left offset on the sidebar is negative (hidden
+// - so `input$sidebarCollapsed` should be TRUE) or 0 (shown - so
+// `input$sidebarCollapsed` should be FALSE). That we know of,
+// `$(".main-sidebar").is(":visible")` is always true, so there is
+// no need to check for that.
+var sidebarCollapsedValue = function() {
+ if ($(".main-sidebar").offset().left < 0) return(true);
+ else return(false);
+};
+
+// Whenever the sidebar changes from collapsed to expanded and vice versa,
+// call this function, so that we can trigger the resize event on the rest
+// of the window and also update the value for the sidebar's input binding.
+var sidebarChange = function() {
+ // 1) Trigger the resize event (so images are responsive and resize)
+ $(window).trigger("resize");
+
+ // 2) Update the value for the sidebar's input binding
+ var $obj = $('.main-sidebar.shiny-bound-input');
+ var inputBinding = $obj.data('shiny-input-binding');
+ inputBinding.setValue($obj, sidebarCollapsedValue());
+ $obj.trigger('change');
+};
+
+// Whenever the sidebar finishes a transition (which it does every time it
+// changes from collapsed to expanded and vice versa), call sidebarChange()
+$(".main-sidebar").on(
+ 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
+ sidebarChange);
+
+// This fixes an edge case: when the app starts up with the sidebar already
+// collapsed (either because the screen is small or because
+// `dashboardSidebar(disable = TRUE`), make sure that `input$sidebarCollapsed`
+// is set to `FALSE`. Whenever this is the case, `$(".main-sidebar").offset().left`
+// is negative. That we know of, `$(".main-sidebar").is(":visible")` is always
+// true, so there is no need to check for that.
+if ($(".main-sidebar").offset().left < 0) {
+ // This is indirectly setting the value of the Shiny input by setting
+ // an attribute on the html element it is bound to. We cannot use the
+ // inputBinding's setValue() method here because this is called too
+ // early (before Shiny has fully initialized)
+ $(".main-sidebar").attr("data-collapsed", "true");
+}
+
+// Whenever we expand a menuItem (to be expandable, it must have children),
+// update the value for the expandedItem's input binding (this is the
+// tabName of the fist subMenuItem inside the menuItem that is currently
+// expanded)
+$(document).on("click", ".treeview > a", function() {
+ var $menu = $(this).next();
+ // If this menuItem was already open, then clicking on it again,
+ // should trigger the "hidden" event, so Shiny doesn't worry about
+ // it while it's hidden (and vice versa).
+ if ($menu.hasClass("menu-open")) $menu.trigger("hidden");
+ else if ($menu.hasClass("treeview-menu")) $menu.trigger("shown");
+
+ // need to set timeout to account for the slideUp/slideDown animation
+ var $obj = $('section.sidebar.shiny-bound-input');
+ setTimeout(function() { $obj.trigger('change'); }, 600);
+});
+
+//---------------------------------------------------------------------
+// Source file: ../srcjs/output_binding_menu.js
+
+/* global Shiny */
+
+// menuOutputBinding
+// ------------------------------------------------------------------
+// Based on Shiny.htmlOutputBinding, but instead of putting the result in a
+// wrapper div, it replaces the origin DOM element with the new DOM elements,
+// copying over the ID and class.
+var menuOutputBinding = new Shiny.OutputBinding();
+$.extend(menuOutputBinding, {
+ find: function(scope) {
+ return $(scope).find('.shinydashboard-menu-output');
+ },
+ onValueError: function(el, err) {
+ Shiny.unbindAll(el);
+ this.renderError(el, err);
+ },
+ renderValue: function(el, data) {
+ Shiny.unbindAll(el);
+
+ var html;
+ var dependencies = [];
+ if (data === null) {
+ return;
+ } else if (typeof(data) === 'string') {
+ html = data;
+ } else if (typeof(data) === 'object') {
+ html = data.html;
+ dependencies = data.deps;
+ }
+
+ var $html = $($.parseHTML(html));
+
+ // Convert the inner contents to HTML, and pass to renderHtml
+ Shiny.renderHtml($html.html(), el, dependencies);
+
+ // Extract class of wrapper, and add them to the wrapper element
+ el.className = 'shinydashboard-menu-output shiny-bound-output ' +
+ $html.attr('class');
+
+ Shiny.initializeInputs(el);
+ Shiny.bindAll(el);
+ ensureActivatedTab(); // eslint-disable-line
+ }
+});
+Shiny.outputBindings.register(menuOutputBinding,
+ "shinydashboard.menuOutputBinding");
+
+//---------------------------------------------------------------------
+// Source file: ../srcjs/input_binding_tabItem.js
+
+/* global Shiny */
+
+// tabItemInputBinding
+// ------------------------------------------------------------------
+// Based on Shiny.tabItemInputBinding, but customized for tabItems in
+// shinydashboard, which have a slightly different structure.
+var tabItemInputBinding = new Shiny.InputBinding();
+$.extend(tabItemInputBinding, {
+ find: function(scope) {
+ return $(scope).find('.sidebarMenuSelectedTabItem');
+ },
+ getValue: function(el) {
+ var value = $(el).attr('data-value');
+ if (value === "null") return null;
+ return value;
+ },
+ setValue: function(el, value) {
+ var self = this;
+ var anchors = $(el).parent('ul.sidebar-menu').find('li:not(.treeview)').children('a');
+ anchors.each(function() { // eslint-disable-line consistent-return
+ if (self._getTabName($(this)) === value) {
+ $(this).tab('show');
+ $(el).attr('data-value', self._getTabName($(this)));
+ return false;
+ }
+ });
+ },
+ receiveMessage: function(el, data) {
+ if (data.hasOwnProperty('value'))
+ this.setValue(el, data.value);
+ },
+ subscribe: function(el, callback) {
+ // This event is triggered by deactivateOtherTabs, which is triggered by
+ // shown. The deactivation of other tabs must occur before Shiny gets the
+ // input value.
+ $(el).on('change.tabItemInputBinding', function() {
+ callback();
+ });
+ },
+ unsubscribe: function(el) {
+ $(el).off('.tabItemInputBinding');
+ },
+ _getTabName: function(anchor) {
+ return anchor.attr('data-value');
+ }
+});
+
+Shiny.inputBindings.register(tabItemInputBinding, 'shinydashboard.tabItemInput');
+
+//---------------------------------------------------------------------
+// Source file: ../srcjs/input_binding_sidebarCollapsed.js
+
+/* global Shiny */
+
+// sidebarCollapsedInputBinding
+// ------------------------------------------------------------------
+// This keeps tracks of whether the sidebar is expanded (default)
+// or collapsed
+var sidebarCollapsedInputBinding = new Shiny.InputBinding();
+$.extend(sidebarCollapsedInputBinding, {
+ find: function(scope) {
+ return $(scope).find('.main-sidebar').first();
+ },
+ getId: function(el) {
+ return "sidebarCollapsed";
+ },
+ getValue: function(el) {
+ return $(el).attr("data-collapsed") === "true";
+ },
+ setValue: function(el, value) {
+ $(el).attr("data-collapsed", value);
+ },
+ toggleValue: function(el) {
+ var current = this.getValue(el);
+ var newVal = current ? "false" : "true";
+ this.setValue(el, newVal);
+ },
+ receiveMessage: function(el, data) {
+ if (data.hasOwnProperty('value'))
+ this.setValue(el, data.value);
+ },
+ subscribe: function(el, callback) {
+ $(el).on('change.sidebarCollapsedInputBinding', function() {
+ callback();
+ });
+ },
+ unsubscribe: function(el) {
+ $(el).off('.sidebarCollapsedInputBinding');
+ }
+});
+Shiny.inputBindings.register(sidebarCollapsedInputBinding,
+ 'shinydashboard.sidebarCollapsedInputBinding');
+
+//---------------------------------------------------------------------
+// Source file: ../srcjs/input_binding_sidebarmenuExpanded.js
+
+/* global Shiny */
+
+// sidebarmenuExpandedInputBinding
+// ------------------------------------------------------------------
+// This keeps tracks of what menuItem (if any) is expanded
+var sidebarmenuExpandedInputBinding = new Shiny.InputBinding();
+$.extend(sidebarmenuExpandedInputBinding, {
+ find: function(scope) {
+ return $(scope).find('section.sidebar');
+ },
+ getId: function(el) {
+ return "sidebarItemExpanded";
+ },
+ getValue: function(el) {
+ var $open = $(el).find('li ul.menu-open');
+ if ($open.length === 1) return $open.attr('data-expanded');
+ else return null;
+ },
+ subscribe: function(el, callback) {
+ $(el).on('change.sidebarmenuExpandedInputBinding', function() {
+ callback();
+ });
+ },
+ unsubscribe: function(el) {
+ $(el).off('.sidebarmenuExpandedInputBinding');
+ }
+});
+Shiny.inputBindings.register(sidebarmenuExpandedInputBinding,
+ 'shinydashboard.sidebarmenuExpandedInputBinding');
+
+//---------------------------------------------------------------------
+// Source file: ../srcjs/_end.js
+
+});
+
+//# sourceMappingURL=shinydashboard.js.map
\ No newline at end of file
diff --git a/inst/shinydashboard.js.map b/inst/shinydashboard.js.map
new file mode 100644
index 0000000..f736e67
--- /dev/null
+++ b/inst/shinydashboard.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../srcjs/_start.js","../srcjs/tabs.js","../srcjs/sidebar.js","../srcjs/output_binding_menu.js","../srcjs/input_binding_tabItem.js","../srcjs/input_binding_sidebarCollapsed.js","../srcjs/input_binding_sidebarmenuExpanded.js","../srcjs/_end.js"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,EAAE;AAClC;AACA,EAAE,QAAQ,EAAE,CAAC,CAAC;;ACHd,uEAAuE;AACvE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,EA [...]
\ No newline at end of file
diff --git a/inst/shinydashboard.min.js b/inst/shinydashboard.min.js
new file mode 100644
index 0000000..954d32e
--- /dev/null
+++ b/inst/shinydashboard.min.js
@@ -0,0 +1,4 @@
+/*! shinydashboard 0.6.1 | (c) 2017-2017 RStudio, Inc. | License: GPL-2 | file LICENSE */
+
+$(function(){var a=function(){var a=$(".sidebar-menu a[data-toggle='tab'],.sidebar-menu li.treeview > a");a.not($(this)).parent("li").removeClass("active");var b=$(".sidebarMenuSelectedTabItem"),c=b.data("shiny-input-binding");"undefined"!=typeof c&&(c.setValue(b,$(this).attr("data-value")),b.trigger("change"))};$(document).on("shown.bs.tab",'.sidebar-menu a[data-toggle="tab"]',a);var b=function(){var a=$(".sidebar-menu a[data-toggle='tab']"),b=a.filter("[data-start-selected='1']");0===b [...]
+//# sourceMappingURL=shinydashboard.min.js.map
\ No newline at end of file
diff --git a/inst/shinydashboard.min.js.map b/inst/shinydashboard.min.js.map
new file mode 100644
index 0000000..9850159
--- /dev/null
+++ b/inst/shinydashboard.min.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../srcjs/_start.js","../srcjs/tabs.js","../srcjs/sidebar.js","../srcjs/output_binding_menu.js","../srcjs/input_binding_tabItem.js","../srcjs/input_binding_sidebarCollapsed.js","../srcjs/input_binding_sidebarmenuExpanded.js"],"names":["$","deactivateOtherTabs","$tablinks","not","this","parent","removeClass","$obj","inputBinding","data","setValue","attr","trigger","document","on","ensureActivatedTab","$startTab","filter","length","first","tab","addClass","hide","si [...]
\ No newline at end of file
diff --git a/man/box.Rd b/man/box.Rd
new file mode 100644
index 0000000..d1a0b9f
--- /dev/null
+++ b/man/box.Rd
@@ -0,0 +1,173 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/boxes.R
+\name{box}
+\alias{box}
+\title{Create a box for the main body of a dashboard}
+\usage{
+box(..., title = NULL, footer = NULL, status = NULL,
+ solidHeader = FALSE, background = NULL, width = 6, height = NULL,
+ collapsible = FALSE, collapsed = FALSE)
+}
+\arguments{
+\item{...}{Contents of the box.}
+
+\item{title}{Optional title.}
+
+\item{footer}{Optional footer text.}
+
+\item{status}{The status of the item This determines the item's background
+color. Valid statuses are listed in \link{validStatuses}.}
+
+\item{solidHeader}{Should the header be shown with a solid color background?}
+
+\item{background}{If NULL (the default), the background of the box will be
+white. Otherwise, a color string. Valid colors are listed in
+\link{validColors}.}
+
+\item{width}{The width of the box, using the Bootstrap grid system. This is
+used for row-based layouts. The overall width of a region is 12, so the
+default valueBox width of 4 occupies 1/3 of that width. For column-based
+layouts, use \code{NULL} for the width; the width is set by the column that
+contains the box.}
+
+\item{height}{The height of a box, in pixels or other CSS unit. By default
+the height scales automatically with the content.}
+
+\item{collapsible}{If TRUE, display a button in the upper right that allows
+the user to collapse the box.}
+
+\item{collapsed}{If TRUE, start collapsed. This must be used with
+\code{collapsible=TRUE}.}
+}
+\description{
+Boxes can be used to hold content in the main body of a dashboard.
+}
+\examples{
+## Only run this example in interactive R sessions
+if (interactive()) {
+library(shiny)
+
+# A dashboard body with a row of infoBoxes and valueBoxes, and two rows of boxes
+body <- dashboardBody(
+
+ # infoBoxes
+ fluidRow(
+ infoBox(
+ "Orders", uiOutput("orderNum2"), "Subtitle", icon = icon("credit-card")
+ ),
+ infoBox(
+ "Approval Rating", "60\%", icon = icon("line-chart"), color = "green",
+ fill = TRUE
+ ),
+ infoBox(
+ "Progress", uiOutput("progress2"), icon = icon("users"), color = "purple"
+ )
+ ),
+
+ # valueBoxes
+ fluidRow(
+ valueBox(
+ uiOutput("orderNum"), "New Orders", icon = icon("credit-card"),
+ href = "http://google.com"
+ ),
+ valueBox(
+ tagList("60", tags$sup(style="font-size: 20px", "\%")),
+ "Approval Rating", icon = icon("line-chart"), color = "green"
+ ),
+ valueBox(
+ htmlOutput("progress"), "Progress", icon = icon("users"), color = "purple"
+ )
+ ),
+
+ # Boxes
+ fluidRow(
+ box(status = "primary",
+ sliderInput("orders", "Orders", min = 1, max = 2000, value = 650),
+ selectInput("progress", "Progress",
+ choices = c("0\%" = 0, "20\%" = 20, "40\%" = 40, "60\%" = 60, "80\%" = 80,
+ "100\%" = 100)
+ )
+ ),
+ box(title = "Histogram box title",
+ status = "warning", solidHeader = TRUE, collapsible = TRUE,
+ plotOutput("plot", height = 250)
+ )
+ ),
+
+ # Boxes with solid color, using `background`
+ fluidRow(
+ # Box with textOutput
+ box(
+ title = "Status summary",
+ background = "green",
+ width = 4,
+ textOutput("status")
+ ),
+
+ # Box with HTML output, when finer control over appearance is needed
+ box(
+ title = "Status summary 2",
+ width = 4,
+ background = "red",
+ uiOutput("status2")
+ ),
+
+ box(
+ width = 4,
+ background = "light-blue",
+ p("This is content. The background color is set to light-blue")
+ )
+ )
+)
+
+server <- function(input, output) {
+ output$orderNum <- renderText({
+ prettyNum(input$orders, big.mark=",")
+ })
+
+ output$orderNum2 <- renderText({
+ prettyNum(input$orders, big.mark=",")
+ })
+
+ output$progress <- renderUI({
+ tagList(input$progress, tags$sup(style="font-size: 20px", "\%"))
+ })
+
+ output$progress2 <- renderUI({
+ paste0(input$progress, "\%")
+ })
+
+ output$status <- renderText({
+ paste0("There are ", input$orders,
+ " orders, and so the current progress is ", input$progress, "\%.")
+ })
+
+ output$status2 <- renderUI({
+ iconName <- switch(input$progress,
+ "100" = "ok",
+ "0" = "remove",
+ "road"
+ )
+ p("Current status is: ", icon(iconName, lib = "glyphicon"))
+ })
+
+
+ output$plot <- renderPlot({
+ hist(rnorm(input$orders))
+ })
+}
+
+shinyApp(
+ ui = dashboardPage(
+ dashboardHeader(),
+ dashboardSidebar(),
+ body
+ ),
+ server = server
+)
+}
+}
+\seealso{
+Other boxes: \code{\link{infoBox}}, \code{\link{tabBox}},
+ \code{\link{valueBox}}
+}
diff --git a/man/dashboardBody.Rd b/man/dashboardBody.Rd
new file mode 100644
index 0000000..532e646
--- /dev/null
+++ b/man/dashboardBody.Rd
@@ -0,0 +1,18 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/dashboardBody.R
+\name{dashboardBody}
+\alias{dashboardBody}
+\title{The main body of a dashboard page.}
+\usage{
+dashboardBody(...)
+}
+\arguments{
+\item{...}{Items to put in the dashboard body.}
+}
+\description{
+The main body typically contains \code{\link{box}}es. Another common use
+pattern is for the main body to contain \code{\link{tabItems}}.
+}
+\seealso{
+\code{\link{tabItems}}, \code{\link{box}}, \code{\link{valueBox}}.
+}
diff --git a/man/dashboardHeader.Rd b/man/dashboardHeader.Rd
new file mode 100644
index 0000000..c31a01c
--- /dev/null
+++ b/man/dashboardHeader.Rd
@@ -0,0 +1,102 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/dashboardHeader.R
+\name{dashboardHeader}
+\alias{dashboardHeader}
+\title{Create a header for a dashboard page}
+\usage{
+dashboardHeader(..., title = NULL, titleWidth = NULL, disable = FALSE,
+ .list = NULL)
+}
+\arguments{
+\item{...}{Items to put in the header. Should be \code{\link{dropdownMenu}}s.}
+
+\item{title}{An optional title to show in the header bar.. By default, this
+will also be used as the title shown in the browser's title bar. If you
+want that to be different from the text in the dashboard header bar, set
+the \code{title} in \code{\link{dashboardPage}}.}
+
+\item{titleWidth}{The width of the title area. This must either be a number
+which specifies the width in pixels, or a string that specifies the width
+in CSS units.}
+
+\item{disable}{If \code{TRUE}, don't display the header bar.}
+
+\item{.list}{An optional list containing items to put in the header. Same as
+the \code{...} arguments, but in list format. This can be useful when
+working with programmatically generated items.}
+}
+\description{
+A dashboard header can be left blank, or it can include dropdown menu items
+on the right side.
+}
+\examples{
+## Only run this example in interactive R sessions
+if (interactive()) {
+library(shiny)
+
+# A dashboard header with 3 dropdown menus
+header <- dashboardHeader(
+ title = "Dashboard Demo",
+
+ # Dropdown menu for messages
+ dropdownMenu(type = "messages", badgeStatus = "success",
+ messageItem("Support Team",
+ "This is the content of a message.",
+ time = "5 mins"
+ ),
+ messageItem("Support Team",
+ "This is the content of another message.",
+ time = "2 hours"
+ ),
+ messageItem("New User",
+ "Can I get some help?",
+ time = "Today"
+ )
+ ),
+
+ # Dropdown menu for notifications
+ dropdownMenu(type = "notifications", badgeStatus = "warning",
+ notificationItem(icon = icon("users"), status = "info",
+ "5 new members joined today"
+ ),
+ notificationItem(icon = icon("warning"), status = "danger",
+ "Resource usage near limit."
+ ),
+ notificationItem(icon = icon("shopping-cart", lib = "glyphicon"),
+ status = "success", "25 sales made"
+ ),
+ notificationItem(icon = icon("user", lib = "glyphicon"),
+ status = "danger", "You changed your username"
+ )
+ ),
+
+ # Dropdown menu for tasks, with progress bar
+ dropdownMenu(type = "tasks", badgeStatus = "danger",
+ taskItem(value = 20, color = "aqua",
+ "Refactor code"
+ ),
+ taskItem(value = 40, color = "green",
+ "Design new layout"
+ ),
+ taskItem(value = 60, color = "yellow",
+ "Another task"
+ ),
+ taskItem(value = 80, color = "red",
+ "Write documentation"
+ )
+ )
+)
+
+shinyApp(
+ ui = dashboardPage(
+ header,
+ dashboardSidebar(),
+ dashboardBody()
+ ),
+ server = function(input, output) { }
+)
+}
+}
+\seealso{
+\code{\link{dropdownMenu}}
+}
diff --git a/man/dashboardPage.Rd b/man/dashboardPage.Rd
new file mode 100644
index 0000000..2e29f3e
--- /dev/null
+++ b/man/dashboardPage.Rd
@@ -0,0 +1,45 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/dashboardPage.R
+\name{dashboardPage}
+\alias{dashboardPage}
+\title{Dashboard page}
+\usage{
+dashboardPage(header, sidebar, body, title = NULL, skin = c("blue", "black",
+ "purple", "green", "red", "yellow"))
+}
+\arguments{
+\item{header}{A header created by \code{dashboardHeader}.}
+
+\item{sidebar}{A sidebar created by \code{dashboardSidebar}.}
+
+\item{body}{A body created by \code{dashboardBody}.}
+
+\item{title}{A title to display in the browser's title bar. If no value is
+provided, it will try to extract the title from the \code{dashboardHeader}.}
+
+\item{skin}{A color theme. One of \code{"blue"}, \code{"black"},
+\code{"purple"}, \code{"green"}, \code{"red"}, or \code{"yellow"}.}
+}
+\description{
+This creates a dashboard page for use in a Shiny app.
+}
+\examples{
+## Only run this example in interactive R sessions
+if (interactive()) {
+# Basic dashboard page template
+library(shiny)
+shinyApp(
+ ui = dashboardPage(
+ dashboardHeader(),
+ dashboardSidebar(),
+ dashboardBody(),
+ title = "Dashboard example"
+ ),
+ server = function(input, output) { }
+)
+}
+}
+\seealso{
+\code{\link{dashboardHeader}}, \code{\link{dashboardSidebar}},
+ \code{\link{dashboardBody}}.
+}
diff --git a/man/dashboardSidebar.Rd b/man/dashboardSidebar.Rd
new file mode 100644
index 0000000..20aa54e
--- /dev/null
+++ b/man/dashboardSidebar.Rd
@@ -0,0 +1,74 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/dashboardSidebar.R
+\name{dashboardSidebar}
+\alias{dashboardSidebar}
+\title{Create a dashboard sidebar.}
+\usage{
+dashboardSidebar(..., disable = FALSE, width = NULL, collapsed = FALSE)
+}
+\arguments{
+\item{...}{Items to put in the sidebar.}
+
+\item{disable}{If \code{TRUE}, the sidebar will be disabled.}
+
+\item{width}{The width of the sidebar. This must either be a number which
+specifies the width in pixels, or a string that specifies the width in CSS
+units.}
+
+\item{collapsed}{If \code{TRUE}, the sidebar will be collapsed on app startup.}
+}
+\description{
+A dashboard sidebar typically contains a \code{\link{sidebarMenu}}, although
+it may also contain a \code{\link{sidebarSearchForm}}, or other Shiny inputs.
+}
+\examples{
+## Only run this example in interactive R sessions
+if (interactive()) {
+header <- dashboardHeader()
+
+sidebar <- dashboardSidebar(
+ sidebarUserPanel("User Name",
+ subtitle = a(href = "#", icon("circle", class = "text-success"), "Online"),
+ # Image file should be in www/ subdir
+ image = "userimage.png"
+ ),
+ sidebarSearchForm(label = "Enter a number", "searchText", "searchButton"),
+ sidebarMenu(
+ # Setting id makes input$tabs give the tabName of currently-selected tab
+ id = "tabs",
+ menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
+ menuItem("Widgets", icon = icon("th"), tabName = "widgets", badgeLabel = "new",
+ badgeColor = "green"),
+ menuItem("Charts", icon = icon("bar-chart-o"),
+ menuSubItem("Sub-item 1", tabName = "subitem1"),
+ menuSubItem("Sub-item 2", tabName = "subitem2")
+ )
+ )
+)
+
+body <- dashboardBody(
+ tabItems(
+ tabItem("dashboard",
+ div(p("Dashboard tab content"))
+ ),
+ tabItem("widgets",
+ "Widgets tab content"
+ ),
+ tabItem("subitem1",
+ "Sub-item 1 tab content"
+ ),
+ tabItem("subitem2",
+ "Sub-item 2 tab content"
+ )
+ )
+)
+
+shinyApp(
+ ui = dashboardPage(header, sidebar, body),
+ server = function(input, output) { }
+)
+}
+}
+\seealso{
+\code{\link{sidebarMenu}}
+}
diff --git a/man/dropdownMenu.Rd b/man/dropdownMenu.Rd
new file mode 100644
index 0000000..2307cd0
--- /dev/null
+++ b/man/dropdownMenu.Rd
@@ -0,0 +1,44 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/dashboardHeader.R
+\name{dropdownMenu}
+\alias{dropdownMenu}
+\title{Create a dropdown menu to place in a dashboard header}
+\usage{
+dropdownMenu(..., type = c("messages", "notifications", "tasks"),
+ badgeStatus = "primary", icon = NULL, headerText = NULL, .list = NULL)
+}
+\arguments{
+\item{...}{Items to put in the menu. Typically, message menus should contain
+\code{\link{messageItem}}s, notification menus should contain
+\code{\link{notificationItem}}s, and task menus should contain
+\code{\link{taskItem}}s.}
+
+\item{type}{The type of menu. Should be one of "messages", "notifications",
+"tasks".}
+
+\item{badgeStatus}{The status of the badge which displays the number of items
+in the menu. This determines the badge's color. Valid statuses are listed
+in \link{validStatuses}. A value of \code{NULL} means to not display a
+badge.}
+
+\item{icon}{An icon to display in the header. By default, the icon is
+automatically selected depending on \code{type}, but it can be overriden
+with this argument.}
+
+\item{headerText}{An optional text argument used for the header of the
+dropdown menu (this is only visible when the menu is expanded). If none is
+provided by the user, the default is "You have \code{x} messages," where
+\code{x} is the number of items in the menu (if the \code{type} is
+specified to be "notifications" or "tasks," the default text shows "You
+have \code{x} notifications" or "You have \code{x} tasks," respectively).}
+
+\item{.list}{An optional list containing items to put in the menu Same as the
+\code{...} arguments, but in list format. This can be useful when working
+with programmatically generated items.}
+}
+\description{
+Create a dropdown menu to place in a dashboard header
+}
+\seealso{
+\code{\link{dashboardHeader}} for example usage.
+}
diff --git a/man/dropdownMenuOutput.Rd b/man/dropdownMenuOutput.Rd
new file mode 100644
index 0000000..a8cf541
--- /dev/null
+++ b/man/dropdownMenuOutput.Rd
@@ -0,0 +1,23 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/menuOutput.R
+\name{dropdownMenuOutput}
+\alias{dropdownMenuOutput}
+\title{Create a dropdown menu output (client side)}
+\usage{
+dropdownMenuOutput(outputId)
+}
+\arguments{
+\item{outputId}{Output variable name.}
+}
+\description{
+This is the UI-side function for creating a dynamic dropdown menu.
+}
+\seealso{
+\code{\link{renderMenu}} for the corresponding server-side function
+ and examples, and \code{\link{dropdownMenu}} for the corresponding function
+ for generating static menus.
+
+Other menu outputs: \code{\link{menuItemOutput}},
+ \code{\link{menuOutput}}, \code{\link{renderMenu}},
+ \code{\link{sidebarMenuOutput}}
+}
diff --git a/man/infoBox.Rd b/man/infoBox.Rd
new file mode 100644
index 0000000..eb9aaf3
--- /dev/null
+++ b/man/infoBox.Rd
@@ -0,0 +1,47 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/boxes.R
+\name{infoBox}
+\alias{infoBox}
+\title{Create an info box for the main body of a dashboard.}
+\usage{
+infoBox(title, value = NULL, subtitle = NULL,
+ icon = shiny::icon("bar-chart"), color = "aqua", width = 4,
+ href = NULL, fill = FALSE)
+}
+\arguments{
+\item{title}{Title text.}
+
+\item{value}{The value to display in the box. Usually a number or short text.}
+
+\item{subtitle}{Subtitle text (optional).}
+
+\item{icon}{An icon tag, created by \code{\link[shiny]{icon}}.}
+
+\item{color}{A color for the box. Valid colors are listed in
+\link{validColors}.}
+
+\item{width}{The width of the box, using the Bootstrap grid system. This is
+used for row-based layouts. The overall width of a region is 12, so the
+default valueBox width of 4 occupies 1/3 of that width. For column-based
+layouts, use \code{NULL} for the width; the width is set by the column that
+contains the box.}
+
+\item{href}{An optional URL to link to.}
+
+\item{fill}{If \code{FALSE} (the default), use a white background for the
+content, and the \code{color} argument for the background of the icon. If
+\code{TRUE}, use the \code{color} argument for the background of the
+content; the icon will use the same color with a slightly darkened
+background.}
+}
+\description{
+An info box displays a large icon on the left side, and a title, value
+(usually a number), and an optional smaller subtitle on the right side. Info
+boxes are meant to be placed in the main body of a dashboard.
+}
+\seealso{
+\code{\link{box}} for usage examples.
+
+Other boxes: \code{\link{box}}, \code{\link{tabBox}},
+ \code{\link{valueBox}}
+}
diff --git a/man/menuItemOutput.Rd b/man/menuItemOutput.Rd
new file mode 100644
index 0000000..cd981ca
--- /dev/null
+++ b/man/menuItemOutput.Rd
@@ -0,0 +1,23 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/menuOutput.R
+\name{menuItemOutput}
+\alias{menuItemOutput}
+\title{Create a sidebar menu item output (client side)}
+\usage{
+menuItemOutput(outputId)
+}
+\arguments{
+\item{outputId}{Output variable name.}
+}
+\description{
+This is the UI-side function for creating a dynamic sidebar menu item.
+}
+\seealso{
+\code{\link{renderMenu}} for the corresponding server-side function
+ and examples, and \code{\link{menuItem}} for the corresponding function
+ for generating static sidebar menus.
+
+Other menu outputs: \code{\link{dropdownMenuOutput}},
+ \code{\link{menuOutput}}, \code{\link{renderMenu}},
+ \code{\link{sidebarMenuOutput}}
+}
diff --git a/man/menuOutput.Rd b/man/menuOutput.Rd
new file mode 100644
index 0000000..4868a60
--- /dev/null
+++ b/man/menuOutput.Rd
@@ -0,0 +1,30 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/menuOutput.R
+\name{menuOutput}
+\alias{menuOutput}
+\title{Create a dynamic menu output for shinydashboard (client side)}
+\usage{
+menuOutput(outputId, tag = tags$li)
+}
+\arguments{
+\item{outputId}{Output variable name.}
+
+\item{tag}{A tag function, like \code{tags$li} or \code{tags$ul}.}
+}
+\description{
+This can be used as a placeholder for dynamically-generated
+\code{\link{dropdownMenu}}, \code{\link{notificationItem}},
+\code{\link{messageItem}}, \code{\link{taskItem}} \code{\link{sidebarMenu}},
+or \code{\link{menuItem}}. If called directly, you must make sure to supply
+the correct type of tag. It is simpler to use the wrapper functions if
+present; for example, \code{\link{dropdownMenuOutput}} and
+\code{\link{sidebarMenuOutput}}.
+}
+\seealso{
+\code{\link{renderMenu}} for the corresponding server side function
+ and examples.
+
+Other menu outputs: \code{\link{dropdownMenuOutput}},
+ \code{\link{menuItemOutput}}, \code{\link{renderMenu}},
+ \code{\link{sidebarMenuOutput}}
+}
diff --git a/man/messageItem.Rd b/man/messageItem.Rd
new file mode 100644
index 0000000..0a54071
--- /dev/null
+++ b/man/messageItem.Rd
@@ -0,0 +1,32 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/dashboardHeader.R
+\name{messageItem}
+\alias{messageItem}
+\title{Create a message item to place in a dropdown message menu}
+\usage{
+messageItem(from, message, icon = shiny::icon("user"), time = NULL,
+ href = NULL)
+}
+\arguments{
+\item{from}{Who the message is from.}
+
+\item{message}{Text of the message.}
+
+\item{icon}{An icon tag, created by \code{\link[shiny]{icon}}.}
+
+\item{time}{String representing the time the message was sent. Any string may
+be used. For example, it could be a relative date/time like "5 minutes",
+"today", or "12:30pm yesterday", or an absolute time, like "2014-12-01 13:45".
+If NULL, no time will be displayed.}
+
+\item{href}{An optional URL to link to.}
+}
+\description{
+Create a message item to place in a dropdown message menu
+}
+\seealso{
+\code{\link{dashboardHeader}} for example usage.
+
+Other menu items: \code{\link{notificationItem}},
+ \code{\link{taskItem}}
+}
diff --git a/man/notificationItem.Rd b/man/notificationItem.Rd
new file mode 100644
index 0000000..3095571
--- /dev/null
+++ b/man/notificationItem.Rd
@@ -0,0 +1,28 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/dashboardHeader.R
+\name{notificationItem}
+\alias{notificationItem}
+\title{Create a notification item to place in a dropdown notification menu}
+\usage{
+notificationItem(text, icon = shiny::icon("warning"), status = "success",
+ href = NULL)
+}
+\arguments{
+\item{text}{The notification text.}
+
+\item{icon}{An icon tag, created by \code{\link[shiny]{icon}}.}
+
+\item{status}{The status of the item This determines the item's background
+color. Valid statuses are listed in \link{validStatuses}.}
+
+\item{href}{An optional URL to link to.}
+}
+\description{
+Create a notification item to place in a dropdown notification menu
+}
+\seealso{
+\code{\link{dashboardHeader}} for example usage.
+
+Other menu items: \code{\link{messageItem}},
+ \code{\link{taskItem}}
+}
diff --git a/man/renderDropdownMenu.Rd b/man/renderDropdownMenu.Rd
new file mode 100644
index 0000000..74737c6
--- /dev/null
+++ b/man/renderDropdownMenu.Rd
@@ -0,0 +1,20 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/menuOutput.R
+\name{renderDropdownMenu}
+\alias{renderDropdownMenu}
+\title{Create a dropdown menu output (server side; deprecated)}
+\usage{
+renderDropdownMenu(expr, env = parent.frame(), quoted = FALSE)
+}
+\arguments{
+\item{expr}{An expression that returns a Shiny tag object, \code{\link{HTML}},
+or a list of such objects.}
+
+\item{env}{The environment in which to evaluate \code{expr}.}
+
+\item{quoted}{Is \code{expr} a quoted expression (with \code{quote()})? This
+is useful if you want to save an expression in a variable.}
+}
+\description{
+This is the server-side function for creating a dynamic dropdown menu.
+}
diff --git a/man/renderMenu.Rd b/man/renderMenu.Rd
new file mode 100644
index 0000000..caef628
--- /dev/null
+++ b/man/renderMenu.Rd
@@ -0,0 +1,104 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/menuOutput.R
+\name{renderMenu}
+\alias{renderMenu}
+\title{Create dynamic menu output (server side)}
+\usage{
+renderMenu(expr, env = parent.frame(), quoted = FALSE,
+ outputArgs = list())
+}
+\arguments{
+\item{expr}{An expression that returns a Shiny tag object, \code{\link{HTML}},
+or a list of such objects.}
+
+\item{env}{The environment in which to evaluate \code{expr}.}
+
+\item{quoted}{Is \code{expr} a quoted expression (with \code{quote()})? This
+is useful if you want to save an expression in a variable.}
+
+\item{outputArgs}{A list of arguments to be passed through to the implicit
+call to \code{\link{uiOutput}} when \code{renderUI} is used in an
+interactive R Markdown document.}
+}
+\description{
+Create dynamic menu output (server side)
+}
+\examples{
+## Only run these examples in interactive R sessions
+
+if (interactive()) {
+library(shiny)
+# ========== Dynamic sidebarMenu ==========
+ui <- dashboardPage(
+ dashboardHeader(title = "Dynamic sidebar"),
+ dashboardSidebar(
+ sidebarMenuOutput("menu")
+ ),
+ dashboardBody()
+)
+
+server <- function(input, output) {
+ output$menu <- renderMenu({
+ sidebarMenu(
+ menuItem("Menu item", icon = icon("calendar"))
+ )
+ })
+}
+
+shinyApp(ui, server)
+
+# ========== Dynamic dropdownMenu ==========
+# Example message data in a data frame
+messageData <- data.frame(
+ from = c("Admininstrator", "New User", "Support"),
+ message = c(
+ "Sales are steady this month.",
+ "How do I register?",
+ "The new server is ready."
+ ),
+ stringsAsFactors = FALSE
+)
+
+ui <- dashboardPage(
+ dashboardHeader(
+ title = "Dynamic menus",
+ dropdownMenuOutput("messageMenu")
+ ),
+ dashboardSidebar(),
+ dashboardBody(
+ fluidRow(
+ box(
+ title = "Controls",
+ sliderInput("slider", "Number of observations:", 1, 100, 50)
+ )
+ )
+ )
+)
+
+server <- function(input, output) {
+ output$messageMenu <- renderMenu({
+ # Code to generate each of the messageItems here, in a list. messageData
+ # is a data frame with two columns, 'from' and 'message'.
+ # Also add on slider value to the message content, so that messages update.
+ msgs <- apply(messageData, 1, function(row) {
+ messageItem(
+ from = row[["from"]],
+ message = paste(row[["message"]], input$slider)
+ )
+ })
+
+ dropdownMenu(type = "messages", .list = msgs)
+ })
+}
+
+shinyApp(ui, server)
+}
+}
+\seealso{
+\code{\link{menuOutput}} for the corresponding client side function
+ and examples.
+
+Other menu outputs: \code{\link{dropdownMenuOutput}},
+ \code{\link{menuItemOutput}}, \code{\link{menuOutput}},
+ \code{\link{sidebarMenuOutput}}
+}
diff --git a/man/renderValueBox.Rd b/man/renderValueBox.Rd
new file mode 100644
index 0000000..0eb5ab6
--- /dev/null
+++ b/man/renderValueBox.Rd
@@ -0,0 +1,64 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/valueBoxOutput.R
+\name{renderValueBox}
+\alias{renderValueBox}
+\alias{renderInfoBox}
+\title{Create an info or value box output (server side)}
+\usage{
+renderValueBox(expr, env = parent.frame(), quoted = FALSE)
+
+renderInfoBox(expr, env = parent.frame(), quoted = FALSE)
+}
+\arguments{
+\item{expr}{An expression that returns a Shiny tag object, \code{\link{HTML}},
+or a list of such objects.}
+
+\item{env}{The environment in which to evaluate \code{expr}.}
+
+\item{quoted}{Is \code{expr} a quoted expression (with \code{quote()})? This
+is useful if you want to save an expression in a variable.}
+}
+\description{
+This is the server-side function for creating a dynamic
+\code{\link{valueBox}} or \code{\link{infoBox}}.
+}
+\examples{
+## Only run this example in interactive R sessions
+if (interactive()) {
+library(shiny)
+
+ui <- dashboardPage(
+ dashboardHeader(title = "Dynamic boxes"),
+ dashboardSidebar(),
+ dashboardBody(
+ fluidRow(
+ box(width = 2, actionButton("count", "Count")),
+ infoBoxOutput("ibox"),
+ valueBoxOutput("vbox")
+ )
+ )
+)
+
+server <- function(input, output) {
+ output$ibox <- renderInfoBox({
+ infoBox(
+ "Title",
+ input$count,
+ icon = icon("credit-card")
+ )
+ })
+ output$vbox <- renderValueBox({
+ valueBox(
+ "Title",
+ input$count,
+ icon = icon("credit-card")
+ )
+ })
+}
+
+shinyApp(ui, server)
+}
+}
+\seealso{
+\code{\link{valueBoxOutput}} for the corresponding UI-side function.
+}
diff --git a/man/shinydashboard.Rd b/man/shinydashboard.Rd
new file mode 100644
index 0000000..6fb3314
--- /dev/null
+++ b/man/shinydashboard.Rd
@@ -0,0 +1,10 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/shinydashboard-package.r
+\docType{package}
+\name{shinydashboard}
+\alias{shinydashboard}
+\alias{shinydashboard-package}
+\title{shinydashboard}
+\description{
+shinydashboard
+}
diff --git a/man/sidebarMenu.Rd b/man/sidebarMenu.Rd
new file mode 100644
index 0000000..cb85f30
--- /dev/null
+++ b/man/sidebarMenu.Rd
@@ -0,0 +1,95 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/dashboardSidebar.R
+\name{sidebarMenu}
+\alias{sidebarMenu}
+\alias{menuItem}
+\alias{menuSubItem}
+\title{Create a dashboard sidebar menu and menu items.}
+\usage{
+sidebarMenu(..., id = NULL, .list = NULL)
+
+menuItem(text, ..., icon = NULL, badgeLabel = NULL, badgeColor = "green",
+ tabName = NULL, href = NULL, newtab = TRUE, selected = NULL,
+ expandedName = as.character(gsub("[[:space:]]", "", text)),
+ startExpanded = FALSE)
+
+menuSubItem(text, tabName = NULL, href = NULL, newtab = TRUE,
+ icon = shiny::icon("angle-double-right"), selected = NULL)
+}
+\arguments{
+\item{...}{For menu items, this may consist of \code{\link{menuSubItem}}s.}
+
+\item{id}{For \code{sidebarMenu}, if \code{id} is present, this id will be
+used for a Shiny input value, and it will report which tab is selected. For
+example, if \code{id="tabs"}, then \code{input$tabs} will be the
+\code{tabName} of the currently-selected tab. If you want to be able to
+bookmark and restore the selected tab, an \code{id} is required.}
+
+\item{.list}{An optional list containing items to put in the menu Same as the
+\code{...} arguments, but in list format. This can be useful when working
+with programmatically generated items.}
+
+\item{text}{Text to show for the menu item.}
+
+\item{icon}{An icon tag, created by \code{\link[shiny]{icon}}. If
+\code{NULL}, don't display an icon.}
+
+\item{badgeLabel}{A label for an optional badge. Usually a number or a short
+word like "new".}
+
+\item{badgeColor}{A color for the badge. Valid colors are listed in
+\link{validColors}.}
+
+\item{tabName}{The name of a tab that this menu item will activate. Not
+compatible with \code{href}.}
+
+\item{href}{An link address. Not compatible with \code{tabName}.}
+
+\item{newtab}{If \code{href} is supplied, should the link open in a new
+browser tab?}
+
+\item{selected}{If \code{TRUE}, this \code{menuItem} or \code{menuSubItem}
+will start selected. If no item have \code{selected=TRUE}, then the first
+\code{menuItem} will start selected.}
+
+\item{expandedName}{A unique name given to each \code{menuItem} that serves
+to indicate which one (if any) is currently expanded. (This is only applicable
+to \code{menuItem}s that have children and it is mostly only useful for
+bookmarking state.)}
+
+\item{startExpanded}{Should this \code{menuItem} be expanded on app startup?
+(This is only applicable to \code{menuItem}s that have children, and only
+one of these can be expanded at any given time).}
+}
+\description{
+A \code{dashboardSidebar} can contain a \code{sidebarMenu}. A
+\code{sidebarMenu} contains \code{menuItem}s, and they can in turn contain
+\code{menuSubItem}s.
+}
+\details{
+Menu items (and similarly, sub-items) should have a value for either
+\code{href} or \code{tabName}; otherwise the item would do nothing. If it has
+a value for \code{href}, then the item will simply be a link to that value.
+
+If a \code{menuItem} has a non-NULL \code{tabName}, then the \code{menuItem}
+will behave like a tab -- in other words, clicking on the \code{menuItem}
+will bring a corresponding \code{tabItem} to the front, similar to a
+\code{\link[shiny]{tabPanel}}. One important difference between a
+\code{menuItem} and a \code{tabPanel} is that, for a \code{menuItem}, you
+must also supply a corresponding \code{tabItem} with the same value for
+\code{tabName}, whereas for a \code{tabPanel}, no \code{tabName} is needed.
+(This is because the structure of a \code{tabPanel} is such that the tab name
+can be automatically generated.) Sub-items are also able to activate
+\code{tabItem}s.
+
+Menu items (but not sub-items) also may have an optional badge. A badge is a
+colored oval containing text.
+}
+\seealso{
+\code{\link{dashboardSidebar}} for example usage. For
+ dynamically-generated sidebar menus, see \code{\link{renderMenu}} and
+ \code{\link{sidebarMenuOutput}}.
+
+Other sidebar items: \code{\link{sidebarSearchForm}},
+ \code{\link{sidebarUserPanel}}
+}
diff --git a/man/sidebarMenuOutput.Rd b/man/sidebarMenuOutput.Rd
new file mode 100644
index 0000000..71b35f9
--- /dev/null
+++ b/man/sidebarMenuOutput.Rd
@@ -0,0 +1,23 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/menuOutput.R
+\name{sidebarMenuOutput}
+\alias{sidebarMenuOutput}
+\title{Create a sidebar menu output (client side)}
+\usage{
+sidebarMenuOutput(outputId)
+}
+\arguments{
+\item{outputId}{Output variable name.}
+}
+\description{
+This is the UI-side function for creating a dynamic sidebar menu.
+}
+\seealso{
+\code{\link{renderMenu}} for the corresponding server-side function
+ and examples, and \code{\link{sidebarMenu}} for the corresponding function
+ for generating static sidebar menus.
+
+Other menu outputs: \code{\link{dropdownMenuOutput}},
+ \code{\link{menuItemOutput}}, \code{\link{menuOutput}},
+ \code{\link{renderMenu}}
+}
diff --git a/man/sidebarSearchForm.Rd b/man/sidebarSearchForm.Rd
new file mode 100644
index 0000000..0231f7b
--- /dev/null
+++ b/man/sidebarSearchForm.Rd
@@ -0,0 +1,28 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/dashboardSidebar.R
+\name{sidebarSearchForm}
+\alias{sidebarSearchForm}
+\title{Create a search form to place in a sidebar}
+\usage{
+sidebarSearchForm(textId, buttonId, label = "Search...",
+ icon = shiny::icon("search"))
+}
+\arguments{
+\item{textId}{Shiny input ID for the text input box.}
+
+\item{buttonId}{Shiny input ID for the search button (which functions like an
+\code{\link[shiny]{actionButton}}).}
+
+\item{label}{Text label to display inside the search box.}
+
+\item{icon}{An icon tag, created by \code{\link[shiny]{icon}}.}
+}
+\description{
+A search form consists of a text input field and a search button.
+}
+\seealso{
+\code{\link{dashboardSidebar}} for example usage.
+
+Other sidebar items: \code{\link{sidebarMenu}},
+ \code{\link{sidebarUserPanel}}
+}
diff --git a/man/sidebarUserPanel.Rd b/man/sidebarUserPanel.Rd
new file mode 100644
index 0000000..13c2f5a
--- /dev/null
+++ b/man/sidebarUserPanel.Rd
@@ -0,0 +1,26 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/dashboardSidebar.R
+\name{sidebarUserPanel}
+\alias{sidebarUserPanel}
+\title{A panel displaying user information in a sidebar}
+\usage{
+sidebarUserPanel(name, subtitle = NULL, image = NULL)
+}
+\arguments{
+\item{name}{Name of the user.}
+
+\item{subtitle}{Text or HTML to be shown below the name.}
+
+\item{image}{A filename or URL to use for an image of the person. If it is a
+local file, the image should be contained under the www/ subdirectory of
+the application.}
+}
+\description{
+A panel displaying user information in a sidebar
+}
+\seealso{
+\code{\link{dashboardSidebar}} for example usage.
+
+Other sidebar items: \code{\link{sidebarMenu}},
+ \code{\link{sidebarSearchForm}}
+}
diff --git a/man/tabBox.Rd b/man/tabBox.Rd
new file mode 100644
index 0000000..eae27ee
--- /dev/null
+++ b/man/tabBox.Rd
@@ -0,0 +1,89 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/boxes.R
+\name{tabBox}
+\alias{tabBox}
+\title{Create a tabbed box}
+\usage{
+tabBox(..., id = NULL, selected = NULL, title = NULL, width = 6,
+ height = NULL, side = c("left", "right"))
+}
+\arguments{
+\item{...}{\code{\link{tabPanel}} elements to include in the tabset}
+
+\item{id}{If provided, you can use \code{input$}\emph{\code{id}} in your
+server logic to determine which of the current tabs is active. The value
+will correspond to the \code{value} argument that is passed to
+\code{\link{tabPanel}}.}
+
+\item{selected}{The \code{value} (or, if none was supplied, the \code{title})
+of the tab that should be selected by default. If \code{NULL}, the first
+tab will be selected.}
+
+\item{title}{Title for the tabBox.}
+
+\item{width}{The width of the box, using the Bootstrap grid system. This is
+used for row-based layouts. The overall width of a region is 12, so the
+default valueBox width of 4 occupies 1/3 of that width. For column-based
+layouts, use \code{NULL} for the width; the width is set by the column that
+contains the box.}
+
+\item{height}{The height of a box, in pixels or other CSS unit. By default
+the height scales automatically with the content.}
+
+\item{side}{Which side of the box the tabs should be on (\code{"left"} or
+\code{"right"}). When \code{side="right"}, the order of tabs will be
+reversed.}
+}
+\description{
+Create a tabbed box
+}
+\examples{
+## Only run this example in interactive R sessions
+if (interactive()) {
+library(shiny)
+
+body <- dashboardBody(
+ fluidRow(
+ tabBox(
+ title = "First tabBox",
+ # The id lets us use input$tabset1 on the server to find the current tab
+ id = "tabset1", height = "250px",
+ tabPanel("Tab1", "First tab content"),
+ tabPanel("Tab2", "Tab content 2")
+ ),
+ tabBox(
+ side = "right", height = "250px",
+ selected = "Tab3",
+ tabPanel("Tab1", "Tab content 1"),
+ tabPanel("Tab2", "Tab content 2"),
+ tabPanel("Tab3", "Note that when side=right, the tab order is reversed.")
+ )
+ ),
+ fluidRow(
+ tabBox(
+ # Title can include an icon
+ title = tagList(shiny::icon("gear"), "tabBox status"),
+ tabPanel("Tab1",
+ "Currently selected tab from first box:",
+ verbatimTextOutput("tabset1Selected")
+ ),
+ tabPanel("Tab2", "Tab content 2")
+ )
+ )
+)
+
+shinyApp(
+ ui = dashboardPage(dashboardHeader(title = "tabBoxes"), dashboardSidebar(), body),
+ server = function(input, output) {
+ # The currently selected tab from the first box
+ output$tabset1Selected <- renderText({
+ input$tabset1
+ })
+ }
+)
+}
+}
+\seealso{
+Other boxes: \code{\link{box}}, \code{\link{infoBox}},
+ \code{\link{valueBox}}
+}
diff --git a/man/tabItem.Rd b/man/tabItem.Rd
new file mode 100644
index 0000000..e7bcada
--- /dev/null
+++ b/man/tabItem.Rd
@@ -0,0 +1,21 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/tabs.R
+\name{tabItem}
+\alias{tabItem}
+\title{One tab to put inside a tab items container}
+\usage{
+tabItem(tabName = NULL, ...)
+}
+\arguments{
+\item{tabName}{The name of a tab. This must correspond to the \code{tabName}
+of a \code{\link{menuItem}} or \code{\link{menuSubItem}}.}
+
+\item{...}{Contents of the tab.}
+}
+\description{
+One tab to put inside a tab items container
+}
+\seealso{
+\code{\link{menuItem}}, \code{\link{menuSubItem}},
+ \code{\link{tabItems}}. See \code{\link{sidebarMenu}} for a usage example.
+}
diff --git a/man/tabItems.Rd b/man/tabItems.Rd
new file mode 100644
index 0000000..0b2fe4d
--- /dev/null
+++ b/man/tabItems.Rd
@@ -0,0 +1,19 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/tabs.R
+\name{tabItems}
+\alias{tabItems}
+\title{A container for tab items}
+\usage{
+tabItems(...)
+}
+\arguments{
+\item{...}{Items to put in the container. Each item should be a
+\code{\link{tabItem}}.}
+}
+\description{
+A container for tab items
+}
+\seealso{
+\code{\link{menuItem}}, \code{\link{menuSubItem}},
+ \code{\link{tabItem}}. See \code{\link{sidebarMenu}} for a usage example.
+}
diff --git a/man/tagAssert.Rd b/man/tagAssert.Rd
new file mode 100644
index 0000000..14b55be
--- /dev/null
+++ b/man/tagAssert.Rd
@@ -0,0 +1,24 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/utils.R
+\name{tagAssert}
+\alias{tagAssert}
+\title{Assert that a tag has specified properties}
+\usage{
+tagAssert(tag, type = NULL, class = NULL, allowUI = TRUE)
+}
+\arguments{
+\item{tag}{A tag object.}
+
+\item{type}{The type of a tag, like "div", "a", "span".}
+
+\item{class}{An HTML class.}
+
+\item{allowUI}{If TRUE (the default), allow dynamic outputs generated by
+\code{\link[shiny]{uiOutput}} or \code{\link[shiny]{htmlOutput}}. When a
+dynamic output is provided, \code{tagAssert} won't try to validate the the
+contents.}
+}
+\description{
+Assert that a tag has specified properties
+}
+\keyword{internal}
diff --git a/man/taskItem.Rd b/man/taskItem.Rd
new file mode 100644
index 0000000..c4a78b7
--- /dev/null
+++ b/man/taskItem.Rd
@@ -0,0 +1,27 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/dashboardHeader.R
+\name{taskItem}
+\alias{taskItem}
+\title{Create a task item to place in a dropdown task menu}
+\usage{
+taskItem(text, value = 0, color = "aqua", href = NULL)
+}
+\arguments{
+\item{text}{The task text.}
+
+\item{value}{A percent value to use for the bar.}
+
+\item{color}{A color for the bar. Valid colors are listed in
+\link{validColors}.}
+
+\item{href}{An optional URL to link to.}
+}
+\description{
+Create a task item to place in a dropdown task menu
+}
+\seealso{
+\code{\link{dashboardHeader}} for example usage.
+
+Other menu items: \code{\link{messageItem}},
+ \code{\link{notificationItem}}
+}
diff --git a/man/updateTabItems.Rd b/man/updateTabItems.Rd
new file mode 100644
index 0000000..c264fa5
--- /dev/null
+++ b/man/updateTabItems.Rd
@@ -0,0 +1,60 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/tabs.R
+\name{updateTabItems}
+\alias{updateTabItems}
+\title{Change the selected tab on the client}
+\usage{
+updateTabItems(session, inputId, selected = NULL)
+}
+\arguments{
+\item{session}{The \code{session} object passed to function given to
+\code{shinyServer}.}
+
+\item{inputId}{The id of the \code{tabsetPanel}, \code{navlistPanel},
+or \code{navbarPage} object.}
+
+\item{selected}{The name of the tab to make active.}
+}
+\description{
+This function controls the active tab of \code{\link{tabItems}} from the
+server. It behaves just like \code{\link[shiny]{updateTabsetPanel}}.
+}
+\examples{
+## Only run this example in interactive R sessions
+if (interactive()) {
+
+ui <- dashboardPage(
+ dashboardHeader(title = "Simple tabs"),
+ dashboardSidebar(
+ sidebarMenu(
+ id = "tabs",
+ menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
+ menuItem("Widgets", tabName = "widgets", icon = icon("th"))
+ ),
+ actionButton('switchtab', 'Switch tab')
+ ),
+ dashboardBody(
+ tabItems(
+ tabItem(tabName = "dashboard",
+ h2("Dashboard tab content")
+ ),
+ tabItem(tabName = "widgets",
+ h2("Widgets tab content")
+ )
+ )
+ )
+)
+
+server <- function(input, output, session) {
+ observeEvent(input$switchtab, {
+ newtab <- switch(input$tabs,
+ "dashboard" = "widgets",
+ "widgets" = "dashboard"
+ )
+ updateTabItems(session, "tabs", newtab)
+ })
+}
+
+shinyApp(ui, server)
+}
+}
diff --git a/man/validColors.Rd b/man/validColors.Rd
new file mode 100644
index 0000000..2bb839b
--- /dev/null
+++ b/man/validColors.Rd
@@ -0,0 +1,30 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/utils.R
+\docType{data}
+\name{validColors}
+\alias{validColors}
+\title{Valid colors}
+\description{
+These are valid colors for various dashboard components. Valid colors are
+listed below.
+}
+\details{
+\itemize{
+ \item \code{red}
+ \item \code{yellow}
+ \item \code{aqua}
+ \item \code{blue}
+ \item \code{light-blue}
+ \item \code{green}
+ \item \code{navy}
+ \item \code{teal}
+ \item \code{olive}
+ \item \code{lime}
+ \item \code{orange}
+ \item \code{fuchsia}
+ \item \code{purple}
+ \item \code{maroon}
+ \item \code{black}
+}
+}
+\keyword{internal}
diff --git a/man/validStatuses.Rd b/man/validStatuses.Rd
new file mode 100644
index 0000000..011cae1
--- /dev/null
+++ b/man/validStatuses.Rd
@@ -0,0 +1,21 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/utils.R
+\docType{data}
+\name{validStatuses}
+\alias{validStatuses}
+\title{Valid statuses}
+\description{
+These status strings correspond to colors as defined in Bootstrap's CSS.
+Although the colors can vary depending on the particular CSS selector, they
+generally appear as follows:
+}
+\details{
+\itemize{
+ \item \code{primary} Blue (sometimes dark blue)
+ \item \code{success} Green
+ \item \code{info} Blue
+ \item \code{warning} Orange
+ \item \code{danger} Red
+}
+}
+\keyword{internal}
diff --git a/man/valueBox.Rd b/man/valueBox.Rd
new file mode 100644
index 0000000..d8ca53b
--- /dev/null
+++ b/man/valueBox.Rd
@@ -0,0 +1,38 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/boxes.R
+\name{valueBox}
+\alias{valueBox}
+\title{Create a value box for the main body of a dashboard.}
+\usage{
+valueBox(value, subtitle, icon = NULL, color = "aqua", width = 4,
+ href = NULL)
+}
+\arguments{
+\item{value}{The value to display in the box. Usually a number or short text.}
+
+\item{subtitle}{Subtitle text.}
+
+\item{icon}{An icon tag, created by \code{\link[shiny]{icon}}.}
+
+\item{color}{A color for the box. Valid colors are listed in
+\link{validColors}.}
+
+\item{width}{The width of the box, using the Bootstrap grid system. This is
+used for row-based layouts. The overall width of a region is 12, so the
+default valueBox width of 4 occupies 1/3 of that width. For column-based
+layouts, use \code{NULL} for the width; the width is set by the column that
+contains the box.}
+
+\item{href}{An optional URL to link to.}
+}
+\description{
+A value box displays a value (usually a number) in large text, with a smaller
+subtitle beneath, and a large icon on the right side. Value boxes are meant
+to be placed in the main body of a dashboard.
+}
+\seealso{
+\code{\link{box}} for usage examples.
+
+Other boxes: \code{\link{box}}, \code{\link{infoBox}},
+ \code{\link{tabBox}}
+}
diff --git a/man/valueBoxOutput.Rd b/man/valueBoxOutput.Rd
new file mode 100644
index 0000000..6f8e56b
--- /dev/null
+++ b/man/valueBoxOutput.Rd
@@ -0,0 +1,28 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/valueBoxOutput.R
+\name{valueBoxOutput}
+\alias{valueBoxOutput}
+\alias{infoBoxOutput}
+\title{Create an info or value box output (client side)}
+\usage{
+valueBoxOutput(outputId, width = 4)
+
+infoBoxOutput(outputId, width = 4)
+}
+\arguments{
+\item{outputId}{Output variable name.}
+
+\item{width}{The width of the box, using the Bootstrap grid system. This is
+used for row-based layouts. The overall width of a region is 12, so the
+default valueBox width of 4 occupies 1/3 of that width. For column-based
+layouts, use \code{NULL} for the width; the width is set by the column that
+contains the box.}
+}
+\description{
+This is the UI-side function for creating a dynamic \code{\link{valueBox}} or
+\code{\link{infoBox}}.
+}
+\seealso{
+\code{\link{renderValueBox}} for the corresponding server-side
+ function and examples.
+}
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/debian-med/r-cran-shinydashboard.git
More information about the debian-med-commit
mailing list