├── assets ├── img │ ├── avatar.png │ ├── avatar2.png │ ├── avatar3.png │ ├── avatar5.png │ ├── icons.png │ ├── photo1.png │ ├── photo2.png │ ├── photo3.jpg │ ├── photo4.jpg │ ├── avatar04.png │ ├── boxed-bg.jpg │ ├── boxed-bg.png │ ├── credit │ │ ├── visa.png │ │ ├── cirrus.png │ │ ├── mestro.png │ │ ├── paypal.png │ │ ├── paypal2.png │ │ ├── mastercard.png │ │ └── american-express.png │ ├── default-50x50.gif │ ├── user1-128x128.jpg │ ├── user2-160x160.jpg │ ├── user3-128x128.jpg │ ├── user4-128x128.jpg │ ├── user5-128x128.jpg │ ├── user6-128x128.jpg │ ├── user7-128x128.jpg │ └── user8-128x128.jpg ├── css │ └── skins │ │ ├── skin-red.min.css │ │ ├── skin-green.min.css │ │ ├── skin-purple.min.css │ │ ├── skin-yellow.min.css │ │ ├── skin-blue.min.css │ │ ├── skin-black.min.css │ │ ├── skin-red-light.min.css │ │ ├── skin-green-light.min.css │ │ ├── skin-purple-light.min.css │ │ ├── skin-yellow-light.min.css │ │ ├── skin-blue-light.min.css │ │ ├── skin-black-light.min.css │ │ ├── skin-red.css │ │ ├── skin-green.css │ │ ├── skin-purple.css │ │ ├── skin-yellow.css │ │ ├── skin-blue.css │ │ ├── skin-black.css │ │ ├── skin-red-light.css │ │ ├── skin-green-light.css │ │ ├── skin-purple-light.css │ │ ├── skin-yellow-light.css │ │ ├── skin-blue-light.css │ │ └── skin-black-light.css └── js │ ├── pages │ ├── dashboard.js │ └── dashboard2.js │ ├── app.min.js │ ├── demo.js │ └── app.js ├── .gitignore ├── composer.json ├── AlteAsset.php ├── widgets ├── Nav.php ├── Alert.php ├── NavBar.php ├── Sidebar.php └── Box.php ├── README.md └── views └── main-layout.php /assets/img/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fg/yii2-bootstrap-AdminLTE/master/assets/img/avatar.png -------------------------------------------------------------------------------- /assets/img/avatar2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fg/yii2-bootstrap-AdminLTE/master/assets/img/avatar2.png -------------------------------------------------------------------------------- /assets/img/avatar3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fg/yii2-bootstrap-AdminLTE/master/assets/img/avatar3.png -------------------------------------------------------------------------------- /assets/img/avatar5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fg/yii2-bootstrap-AdminLTE/master/assets/img/avatar5.png -------------------------------------------------------------------------------- /assets/img/icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fg/yii2-bootstrap-AdminLTE/master/assets/img/icons.png -------------------------------------------------------------------------------- /assets/img/photo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fg/yii2-bootstrap-AdminLTE/master/assets/img/photo1.png -------------------------------------------------------------------------------- /assets/img/photo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fg/yii2-bootstrap-AdminLTE/master/assets/img/photo2.png -------------------------------------------------------------------------------- /assets/img/photo3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fg/yii2-bootstrap-AdminLTE/master/assets/img/photo3.jpg -------------------------------------------------------------------------------- /assets/img/photo4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fg/yii2-bootstrap-AdminLTE/master/assets/img/photo4.jpg -------------------------------------------------------------------------------- /assets/img/avatar04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fg/yii2-bootstrap-AdminLTE/master/assets/img/avatar04.png -------------------------------------------------------------------------------- /assets/img/boxed-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fg/yii2-bootstrap-AdminLTE/master/assets/img/boxed-bg.jpg -------------------------------------------------------------------------------- /assets/img/boxed-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fg/yii2-bootstrap-AdminLTE/master/assets/img/boxed-bg.png -------------------------------------------------------------------------------- /assets/img/credit/visa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fg/yii2-bootstrap-AdminLTE/master/assets/img/credit/visa.png -------------------------------------------------------------------------------- /assets/img/credit/cirrus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fg/yii2-bootstrap-AdminLTE/master/assets/img/credit/cirrus.png -------------------------------------------------------------------------------- /assets/img/credit/mestro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fg/yii2-bootstrap-AdminLTE/master/assets/img/credit/mestro.png -------------------------------------------------------------------------------- /assets/img/credit/paypal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fg/yii2-bootstrap-AdminLTE/master/assets/img/credit/paypal.png -------------------------------------------------------------------------------- /assets/img/credit/paypal2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fg/yii2-bootstrap-AdminLTE/master/assets/img/credit/paypal2.png -------------------------------------------------------------------------------- /assets/img/default-50x50.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fg/yii2-bootstrap-AdminLTE/master/assets/img/default-50x50.gif -------------------------------------------------------------------------------- /assets/img/user1-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fg/yii2-bootstrap-AdminLTE/master/assets/img/user1-128x128.jpg -------------------------------------------------------------------------------- /assets/img/user2-160x160.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fg/yii2-bootstrap-AdminLTE/master/assets/img/user2-160x160.jpg -------------------------------------------------------------------------------- /assets/img/user3-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fg/yii2-bootstrap-AdminLTE/master/assets/img/user3-128x128.jpg -------------------------------------------------------------------------------- /assets/img/user4-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fg/yii2-bootstrap-AdminLTE/master/assets/img/user4-128x128.jpg -------------------------------------------------------------------------------- /assets/img/user5-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fg/yii2-bootstrap-AdminLTE/master/assets/img/user5-128x128.jpg -------------------------------------------------------------------------------- /assets/img/user6-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fg/yii2-bootstrap-AdminLTE/master/assets/img/user6-128x128.jpg -------------------------------------------------------------------------------- /assets/img/user7-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fg/yii2-bootstrap-AdminLTE/master/assets/img/user7-128x128.jpg -------------------------------------------------------------------------------- /assets/img/user8-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fg/yii2-bootstrap-AdminLTE/master/assets/img/user8-128x128.jpg -------------------------------------------------------------------------------- /assets/img/credit/mastercard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fg/yii2-bootstrap-AdminLTE/master/assets/img/credit/mastercard.png -------------------------------------------------------------------------------- /assets/img/credit/american-express.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fg/yii2-bootstrap-AdminLTE/master/assets/img/credit/american-express.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | #phpstorm 2 | .idea 3 | 4 | # netbeans project files 5 | nbproject 6 | 7 | # zend studio for eclipse project files 8 | .buildpath 9 | .project 10 | .settings 11 | 12 | # windows thumbnail cache 13 | Thumbs.db 14 | 15 | # composer vendor dir 16 | /vendor 17 | 18 | # composer itself is not needed 19 | composer.phar 20 | 21 | # Mac DS_Store Files 22 | .DS_Store 23 | 24 | # phpunit itself is not needed 25 | phpunit.phar 26 | # local phpunit config 27 | /phpunit.xml -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cszchen/alte", 3 | "description": "Widgets for AdminLTE theme", 4 | "type": "yii2-extension", 5 | "keywords": ["yii2","widget","adminlte"], 6 | "license": "MIT", 7 | "authors": [ 8 | { 9 | "name": "cartmanchen", 10 | "email": "me@csz.link" 11 | } 12 | ], 13 | "require": { 14 | "yiisoft/yii2": "*", 15 | "yiisoft/yii2-bootstrap": "*" 16 | }, 17 | "autoload": { 18 | "psr-4": { 19 | "cszchen\\alte\\": "" 20 | } 21 | } 22 | } -------------------------------------------------------------------------------- /AlteAsset.php: -------------------------------------------------------------------------------- 1 | sourcePath = __DIR__ . '/assets'; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /widgets/Nav.php: -------------------------------------------------------------------------------- 1 | items as $i => $item) { 14 | if (isset($item['visible']) && !$item['visible']) { 15 | continue; 16 | } 17 | if (isset($item['small'])) { 18 | $encodeLabel = isset($item['encode']) ? $item['encode'] : $this->encodeLabels; 19 | $small = $item['small']; 20 | $small = is_array($small) ? $small : ['label' => $small]; 21 | $class = isset($small['class']) ? $small['class'] : "label label-danger"; 22 | $item['label'] = ($encodeLabel ? Html::encode($item['label']) : $item['label']) . Html::tag("small", ArrayHelper::remove($small, 'label'), ["class" => $class]); 23 | $item['encode'] = false; 24 | } 25 | 26 | $items[] = $this->renderItem($item); 27 | } 28 | 29 | return Html::tag('ul', implode("\n", $items), $this->options); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /widgets/Alert.php: -------------------------------------------------------------------------------- 1 | icon) { 27 | switch ($this->type) { 28 | case self::TYPE_INFO: { 29 | $this->icon = 'fa fa-info'; 30 | break; 31 | } 32 | case self::TYPE_DANGER: { 33 | $this->icon = 'fa fa-ban'; 34 | break; 35 | } 36 | case self::TYPE_WARNING: { 37 | $this->icon = 'fa fa-warning'; 38 | break; 39 | } 40 | case self::TYPE_SUCCESS: { 41 | $this->icon = 'fa fa-check'; 42 | break; 43 | } 44 | default: { 45 | $this->icon = 'fa fa-question'; 46 | } 47 | } 48 | } 49 | } 50 | public function run() 51 | { 52 | Html::addCssClass($this->options, 'alert'); 53 | Html::addCssClass($this->options, 'alert-' . $this->type); 54 | if($this->closable){ 55 | Html::addCssClass($this->options, 'alert-dismissable'); 56 | } 57 | $content = (!$this->closable ? '' 58 | : ''); 59 | if ($this->header) { 60 | $content .= Html::tag('h4', Html::tag('i', '', ['class' => $this->icon]). '  ' . $this->header); 61 | } else { 62 | $content .= Html::tag('i', '', ['class' => $this->icon]) . '  '; 63 | } 64 | $content .= $this->text; 65 | echo Html::tag('div', $content, $this->options); 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # yii2-bootstrap-AdminLTE 2 | The Bootstrap template AdminLTE widgets for yii2 framework. 3 | It make it easy to build a bootstrap admin panel. 4 | 5 | 6 | Install 7 | === 8 | 9 | `composer require "cszchen/alte": ">=2.0.0"` 10 | 11 | How to Use 12 | === 13 | layout sample file: `@vendor/cszchen/alte/veiws/main-layout.php` 14 | 15 | example: 16 | --- 17 | **controllers/SiteController.php** 18 | ```php 19 | class SiteController extends \yii\web\Controller 20 | { 21 | public $layout = '@vendor/cszchen/alte/veiws/main-layout.php'; 22 | 23 | public function actionIndex() 24 | { 25 | return $this->render('index'); 26 | } 27 | } 28 | ``` 29 | 30 | **views/site/index.php** 31 | ```php 32 | use cszchen\alte\widgets\Box; 33 | 34 | $this->title = "Title here!"; 35 | Box::begin([ 36 | 'type' => 'primary', 37 | 'title' => 'Box title', 38 | 'refreshUrl' => '/userinfo', 39 | 'tools' => ['refresh', 'collapse', 'remove'], 40 | 'collapsed' => false 41 | ]); 42 | echo "cszchen/alte"; 43 | Box::end(); 44 | ``` 45 | 46 | **screen** 47 | ![](http://deeppic.b0.upaiyun.com/1605/V1u04MU7W.png) 48 | 49 | NavBar 50 | --- 51 | ```php 52 | NavBar::begin([ 53 | 'brandLabel' => 'cszchen/alte', 54 | 'brandLabelSm' => 'Alte', 55 | 'items' => [ 56 | [ 57 | 'label' => 'Home', 58 | 'url' => ['/site/index'], 59 | 'icon' => 'fa fa-dashboard test-green', 60 | 'items'=>[ 61 | ['label' => 'child#1', 'icon' => 'fa fa-user'], 62 | ['label' => 'child#2', 'url' => '#'] 63 | ] 64 | ], 65 | ['label' => 'About', 'small' => 15, 'url' => ['/site/about']] 66 | ] 67 | ]); 68 | NavBar::end(); 69 | ``` 70 | 71 | SideBar 72 | --- 73 | ```php 74 | echo Sidebar::widget([ 75 | //'search' => false, 76 | 'items' => [ 77 | [ 78 | 'label' => 'level1', 79 | 'url' => '#', 80 | 'small' => 1, 81 | 'items' => [ 82 | ['label' => 'level2', 'url' => 'sg'], 83 | ['label' => 'level2', 'url' => 'sg', 'items' => [['label' => 'level3']]] 84 | ] 85 | ] 86 | ], 87 | ]); 88 | ``` 89 | 90 | Box 91 | --- 92 | 93 | ```php 94 | Box::begin([ 95 | 'type' => 'primary', 96 | 'title' => 'Box title', 97 | 'refreshUrl' => '/userinfo', 98 | 'tools' => ['refresh', 'collapse', 'remove'], 99 | 'collapsed' => false 100 | ]); 101 | echo "cszchen/alte"; 102 | Box::end(); 103 | ``` 104 | -------------------------------------------------------------------------------- /assets/css/skins/skin-red.min.css: -------------------------------------------------------------------------------- 1 | .skin-red .main-header .navbar{background-color:#dd4b39}.skin-red .main-header .navbar .nav>li>a{color:#fff}.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:#fff}.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}@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:#fff;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:#fff;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:#fff}.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;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.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} -------------------------------------------------------------------------------- /assets/css/skins/skin-green.min.css: -------------------------------------------------------------------------------- 1 | .skin-green .main-header .navbar{background-color:#00a65a}.skin-green .main-header .navbar .nav>li>a{color:#fff}.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:#fff}.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}@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:#fff;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:#fff;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:#fff}.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;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.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} -------------------------------------------------------------------------------- /assets/css/skins/skin-purple.min.css: -------------------------------------------------------------------------------- 1 | .skin-purple .main-header .navbar{background-color:#605ca8}.skin-purple .main-header .navbar .nav>li>a{color:#fff}.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:#fff}.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}@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:#fff;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:#fff;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:#fff}.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;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.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} -------------------------------------------------------------------------------- /assets/css/skins/skin-yellow.min.css: -------------------------------------------------------------------------------- 1 | .skin-yellow .main-header .navbar{background-color:#f39c12}.skin-yellow .main-header .navbar .nav>li>a{color:#fff}.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:#fff}.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}@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:#fff;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:#fff;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:#fff}.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;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.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} -------------------------------------------------------------------------------- /assets/css/skins/skin-blue.min.css: -------------------------------------------------------------------------------- 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>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:#fff}.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}@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:#fff;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:#fff;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:#fff}.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;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.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:#fff;border-bottom:0 solid transparent}.skin-blue.layout-top-nav .main-header>.logo:hover{background-color:#3b8ab8} -------------------------------------------------------------------------------- /assets/css/skins/skin-black.min.css: -------------------------------------------------------------------------------- 1 | .skin-black .main-header{-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.05);box-shadow:0 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:#fff}.skin-black .main-header>.navbar .nav>li>a{color:#333}.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:#fff;color:#999}.skin-black .main-header>.navbar .sidebar-toggle{color:#333}.skin-black .main-header>.navbar .sidebar-toggle:hover{color:#999;background:#fff}.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:#fff;color:#333;border-bottom:0 solid transparent;border-right:1px solid #eee}.skin-black .main-header>.logo:hover{background-color:#fcfcfc}@media (max-width:767px){.skin-black .main-header>.logo{background-color:#222;color:#fff;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:#fff;background:#1e282c;border-left-color:#fff}.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:#fff}.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;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.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} -------------------------------------------------------------------------------- /views/main-layout.php: -------------------------------------------------------------------------------- 1 | 13 | beginPage() ?> 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | <?= Html::encode($this->title) ?> 22 | 23 | 24 | 28 | head() ?> 29 | 30 | 31 | beginBody();?> 32 |
33 | 34 | 'cszchen/alte', 37 | 'brandLabelSm' => 'alte', 38 | 'items' => [ 39 | ['label'=>'Dashboard', 'url' => '#', 'icon' => 'fa fa-dashboard'], 40 | [ 41 | 'label' => 'menu#2', 42 | 'items'=>[ 43 | ['label'=>'child#2-1', 'url' => '#child2-1'], 44 | ['label'=>'child#2-2', 'url' => '#child2-2'] 45 | ] 46 | ], 47 | [ 48 | 'label' => 'menu#3', 49 | 'items'=>[ 50 | ['label'=>'child#3-1', 'url' => '#child3-1'], 51 | ['label'=>'child#3-2', 'url' => '#child3-2'] 52 | ] 53 | ], 54 | ], 55 | 56 | ]); 57 | 58 | NavBar::end(); 59 | echo Sidebar::widget([ 60 | 'items' => [ 61 | ['label'=>'Dashboard', 'url' => '#', 'icon' => 'fa fa-dashboard'], 62 | [ 63 | 'label' => 'menu#2', 64 | 'items'=>[ 65 | ['label'=>'child#2-1', 'url' => '#child2-1', 'items' => [ 66 | ['label' => 'child\'s child#1'], 67 | ['label' => 'child\'s child#2'], 68 | ]], 69 | ] 70 | ] 71 | ], 72 | ]) 73 | ?> 74 | 75 |
76 |
77 | title) { 79 | echo Html::tag("h1", $this->title); 80 | } 81 | /* 82 | if (!empty($this->params['breadcrumbs'])) { 83 | echo Breadcrumbs::widget([ 84 | 'links' => $this->params['breadcrumbs'], 85 | ]); 86 | } 87 | */ 88 | ?> 89 |
90 |
91 | 92 |
93 | 94 |
95 | 96 | 97 |
98 | endBody();?> 99 | 100 | 101 | endPage() ?> 102 | -------------------------------------------------------------------------------- /widgets/NavBar.php: -------------------------------------------------------------------------------- 1 | "main-header"]); 38 | echo $this->renderBrand(); 39 | if (empty($this->options['class'])) { 40 | Html::addCssClass($this->options, ['navbar', 'navbar-static-top']); 41 | } 42 | if (empty($this->options['role'])) { 43 | $this->options['role'] = 'navigation'; 44 | } 45 | echo Html::beginTag("nav", $this->options); 46 | echo $this->renderToggleButton(); 47 | echo Html::beginTag("div", ["class"=>"navbar-custom-menu"]); 48 | if ($this->items) { 49 | echo $this->renderItems(); 50 | } 51 | } 52 | 53 | public function run() 54 | { 55 | echo Html::endTag("div"); 56 | echo Html::endTag("nav"); 57 | echo Html::endTag("header"); 58 | } 59 | 60 | protected function renderBrand() 61 | { 62 | if ($this->brandLabel === false) { 63 | return null; 64 | } 65 | $label = ''; 66 | $label .= Html::tag("span",$this->brandLabel, ["class" => "logo-lg"]); 67 | $label .= Html::tag("span",$this->brandLabelSm, ["class" => "logo-sm"]); 68 | return Html::a($label, $this->brandUrl, ["class" => "logo"]); 69 | } 70 | 71 | protected function renderToggleButton() 72 | { 73 | return Html::tag( 74 | "a", 75 | Html::tag("span", "Toggle navigation", ["class"=>"sr-only"]), 76 | [ 77 | "href" => "#", 78 | "class" => "sidebar-toggle", 79 | "data-toggle" => "offcanvas", 80 | "role" => "button" 81 | ] 82 | ); 83 | } 84 | 85 | protected function renderItems() 86 | { 87 | Html::addCssClass($this->navOptions, "navbar-nav"); 88 | return Nav::widget([ 89 | 'items' => $this->items, 90 | 'options' => $this->navOptions, 91 | 'activateParents' => true, 92 | ]); 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /assets/css/skins/skin-red-light.min.css: -------------------------------------------------------------------------------- 1 | .skin-red-light .main-header .navbar{background-color:#dd4b39}.skin-red-light .main-header .navbar .nav>li>a{color:#fff}.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:#fff}.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}@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:#fff;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:#444}.skin-red-light .sidebar-menu>li{-webkit-transition:border-left-color .3s ease;-o-transition:border-left-color .3s ease;transition:border-left-color .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:#000;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:#444}.skin-red-light .sidebar a:hover{text-decoration:none}.skin-red-light .treeview-menu>li>a{color:#777}.skin-red-light .treeview-menu>li.active>a,.skin-red-light .treeview-menu>li>a:hover{color:#000}.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;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.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}@media (min-width:768px){.skin-red-light.sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu{border-left:1px solid #d2d6de}} -------------------------------------------------------------------------------- /assets/css/skins/skin-green-light.min.css: -------------------------------------------------------------------------------- 1 | .skin-green-light .main-header .navbar{background-color:#00a65a}.skin-green-light .main-header .navbar .nav>li>a{color:#fff}.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:#fff}.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}@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:#fff;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:#444}.skin-green-light .sidebar-menu>li{-webkit-transition:border-left-color .3s ease;-o-transition:border-left-color .3s ease;transition:border-left-color .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:#000;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:#444}.skin-green-light .sidebar a:hover{text-decoration:none}.skin-green-light .treeview-menu>li>a{color:#777}.skin-green-light .treeview-menu>li.active>a,.skin-green-light .treeview-menu>li>a:hover{color:#000}.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;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.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}@media (min-width:768px){.skin-green-light.sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu{border-left:1px solid #d2d6de}} -------------------------------------------------------------------------------- /assets/css/skins/skin-purple-light.min.css: -------------------------------------------------------------------------------- 1 | .skin-purple-light .main-header .navbar{background-color:#605ca8}.skin-purple-light .main-header .navbar .nav>li>a{color:#fff}.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:#fff}.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}@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:#fff;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:#444}.skin-purple-light .sidebar-menu>li{-webkit-transition:border-left-color .3s ease;-o-transition:border-left-color .3s ease;transition:border-left-color .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:#000;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:#444}.skin-purple-light .sidebar a:hover{text-decoration:none}.skin-purple-light .treeview-menu>li>a{color:#777}.skin-purple-light .treeview-menu>li.active>a,.skin-purple-light .treeview-menu>li>a:hover{color:#000}.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;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.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}@media (min-width:768px){.skin-purple-light.sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu{border-left:1px solid #d2d6de}} -------------------------------------------------------------------------------- /assets/css/skins/skin-yellow-light.min.css: -------------------------------------------------------------------------------- 1 | .skin-yellow-light .main-header .navbar{background-color:#f39c12}.skin-yellow-light .main-header .navbar .nav>li>a{color:#fff}.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:#fff}.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}@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:#fff;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:#444}.skin-yellow-light .sidebar-menu>li{-webkit-transition:border-left-color .3s ease;-o-transition:border-left-color .3s ease;transition:border-left-color .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:#000;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:#444}.skin-yellow-light .sidebar a:hover{text-decoration:none}.skin-yellow-light .treeview-menu>li>a{color:#777}.skin-yellow-light .treeview-menu>li.active>a,.skin-yellow-light .treeview-menu>li>a:hover{color:#000}.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;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.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}@media (min-width:768px){.skin-yellow-light.sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu{border-left:1px solid #d2d6de}} -------------------------------------------------------------------------------- /assets/css/skins/skin-blue-light.min.css: -------------------------------------------------------------------------------- 1 | .skin-blue-light .main-header .navbar{background-color:#3c8dbc}.skin-blue-light .main-header .navbar .nav>li>a{color:#fff}.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:#fff}.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}@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:#fff;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:#444}.skin-blue-light .sidebar-menu>li{-webkit-transition:border-left-color .3s ease;-o-transition:border-left-color .3s ease;transition:border-left-color .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:#000;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:#444}.skin-blue-light .sidebar a:hover{text-decoration:none}.skin-blue-light .treeview-menu>li>a{color:#777}.skin-blue-light .treeview-menu>li.active>a,.skin-blue-light .treeview-menu>li>a:hover{color:#000}.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;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.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}@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:#fff;border-bottom:0 solid transparent}.skin-blue.layout-top-nav .main-header>.logo:hover{background-color:#3b8ab8} -------------------------------------------------------------------------------- /widgets/Sidebar.php: -------------------------------------------------------------------------------- 1 | \n{items}\n\n"; 18 | 19 | public $itemOptions = ['class' => 'treeview']; 20 | 21 | public $options = ["class" => "sidebar-menu"]; 22 | 23 | public $linkTemplate = '{icon}{label}{small}'; 24 | 25 | public function run() 26 | { 27 | echo Html::beginTag("aside", ["class"=>"main-sidebar"]); 28 | echo Html::beginTag("section", ["class"=>"sidebar"]); 29 | echo $this->renderSearch(); 30 | parent::run(); 31 | echo Html::endTag("section"); 32 | echo Html::endTag("aside"); 33 | } 34 | 35 | 36 | 37 | protected function renderSearch() 38 | { 39 | if ($this->search === false) { 40 | return null; 41 | } 42 | $html = ''; 43 | $defaultFormOptions = ['class' => 'sidebar-form']; 44 | $defaultInputOptions = ['name' => 'search', 'value' => '', 'placeholder' => 'Search...', 'class' => 'form-control']; 45 | $formOptions = ArrayHelper::merge(ArrayHelper::getValue($this->search, 'form', []), $defaultFormOptions); 46 | $inputOptions = ArrayHelper::merge(ArrayHelper::getValue($this->search, 'input', []), $defaultInputOptions); 47 | $action = ArrayHelper::remove($formOptions, 'action', ''); 48 | $method = ArrayHelper::remove($formOptions, 'method', 'get'); 49 | $html .= Html::beginForm($action, $method, $formOptions); 50 | $html .= Html::beginTag("div", ['class' => 'input-group']); 51 | $html .= Html::tag("input", "", $inputOptions); 52 | $html .= Html::tag( 53 | "span", 54 | Html::button(Html::tag("i", "", ['class'=>'fa fa-search']), ['type'=>'submit', 'name'=>'search', 'class'=>'btn btn-flat']), 55 | ['class' => 'input-group-btn'] 56 | ); 57 | $html .= Html::endTag("div"); 58 | $html .= Html::endTag("form"); 59 | return $html; 60 | } 61 | 62 | protected function renderItems($items) 63 | { 64 | static $setHeader = false; 65 | 66 | $header = !$setHeader && $this->header ? Html::tag("li", $this->header, ["class" => "header"]) : ''; 67 | if (!$setHeader) 68 | $setHeader = true; 69 | return $header . parent::renderItems($items); 70 | } 71 | 72 | protected function renderItem($item) 73 | { 74 | $template = ArrayHelper::getValue($item, 'template', $this->linkTemplate); 75 | 76 | if (isset($item['small'])) { 77 | $small = $item['small']; 78 | $small = is_array($small) ? $small : ['label' => $small]; 79 | $class = isset($small['class']) ? $small['class'] : "label pull-right bg-yellow"; 80 | $smallLabel = Html::tag("small", ArrayHelper::remove($small, 'label'), ["class" => $class]); 81 | } else if (!empty($item['items'])) { 82 | $smallLabel = Html::tag("i", "", ["class" => "fa fa-angle-left pull-right"]); 83 | } else { 84 | $smallLabel = null; 85 | } 86 | 87 | if (!isset($item['url'])) { 88 | $item['url'] = '#'; 89 | } 90 | if (!isset($item['icon'])) { 91 | $item['icon'] = $this->defaultIcon; 92 | } 93 | return strtr($template, [ 94 | '{url}' => Html::encode(Url::to($item['url'])), 95 | '{icon}' => !empty($item["icon"]) ? Html::tag("i", "", ['class' => $item["icon"]]) : null, 96 | '{label}' => Html::tag("span", $item['label']), 97 | '{small}' => $smallLabel, 98 | ]); 99 | } 100 | 101 | } 102 | -------------------------------------------------------------------------------- /assets/css/skins/skin-black-light.min.css: -------------------------------------------------------------------------------- 1 | .skin-black-light .main-header{-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.05);box-shadow:0 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:#fff}.skin-black-light .main-header>.navbar .nav>li>a{color:#333}.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:#fff;color:#999}.skin-black-light .main-header>.navbar .sidebar-toggle{color:#333}.skin-black-light .main-header>.navbar .sidebar-toggle:hover{color:#999;background:#fff}.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:#fff;color:#333;border-bottom:0 solid transparent;border-right:1px solid #eee}.skin-black-light .main-header>.logo:hover{background-color:#fcfcfc}@media (max-width:767px){.skin-black-light .main-header>.logo{background-color:#222;color:#fff;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:#444}.skin-black-light .sidebar-menu>li{-webkit-transition:border-left-color .3s ease;-o-transition:border-left-color .3s ease;transition:border-left-color .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:#000;background:#f4f4f5}.skin-black-light .sidebar-menu>li.active{border-left-color:#fff}.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:#444}.skin-black-light .sidebar a:hover{text-decoration:none}.skin-black-light .treeview-menu>li>a{color:#777}.skin-black-light .treeview-menu>li.active>a,.skin-black-light .treeview-menu>li>a:hover{color:#000}.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;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.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}@media (min-width:768px){.skin-black-light.sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu{border-left:1px solid #d2d6de}} -------------------------------------------------------------------------------- /assets/css/skins/skin-red.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Skin: Red 3 | * --------- 4 | */ 5 | .skin-red .main-header .navbar { 6 | background-color: #dd4b39; 7 | } 8 | .skin-red .main-header .navbar .nav > li > a { 9 | color: #ffffff; 10 | } 11 | .skin-red .main-header .navbar .nav > li > a:hover, 12 | .skin-red .main-header .navbar .nav > li > a:active, 13 | .skin-red .main-header .navbar .nav > li > a:focus, 14 | .skin-red .main-header .navbar .nav .open > a, 15 | .skin-red .main-header .navbar .nav .open > a:hover, 16 | .skin-red .main-header .navbar .nav .open > a:focus, 17 | .skin-red .main-header .navbar .nav > .active > a { 18 | background: rgba(0, 0, 0, 0.1); 19 | color: #f6f6f6; 20 | } 21 | .skin-red .main-header .navbar .sidebar-toggle { 22 | color: #ffffff; 23 | } 24 | .skin-red .main-header .navbar .sidebar-toggle:hover { 25 | color: #f6f6f6; 26 | background: rgba(0, 0, 0, 0.1); 27 | } 28 | .skin-red .main-header .navbar .sidebar-toggle { 29 | color: #fff; 30 | } 31 | .skin-red .main-header .navbar .sidebar-toggle:hover { 32 | background-color: #d73925; 33 | } 34 | @media (max-width: 767px) { 35 | .skin-red .main-header .navbar .dropdown-menu li.divider { 36 | background-color: rgba(255, 255, 255, 0.1); 37 | } 38 | .skin-red .main-header .navbar .dropdown-menu li a { 39 | color: #fff; 40 | } 41 | .skin-red .main-header .navbar .dropdown-menu li a:hover { 42 | background: #d73925; 43 | } 44 | } 45 | .skin-red .main-header .logo { 46 | background-color: #d73925; 47 | color: #ffffff; 48 | border-bottom: 0 solid transparent; 49 | } 50 | .skin-red .main-header .logo:hover { 51 | background-color: #d33724; 52 | } 53 | .skin-red .main-header li.user-header { 54 | background-color: #dd4b39; 55 | } 56 | .skin-red .content-header { 57 | background: transparent; 58 | } 59 | .skin-red .wrapper, 60 | .skin-red .main-sidebar, 61 | .skin-red .left-side { 62 | background-color: #222d32; 63 | } 64 | .skin-red .user-panel > .info, 65 | .skin-red .user-panel > .info > a { 66 | color: #fff; 67 | } 68 | .skin-red .sidebar-menu > li.header { 69 | color: #4b646f; 70 | background: #1a2226; 71 | } 72 | .skin-red .sidebar-menu > li > a { 73 | border-left: 3px solid transparent; 74 | } 75 | .skin-red .sidebar-menu > li:hover > a, 76 | .skin-red .sidebar-menu > li.active > a { 77 | color: #ffffff; 78 | background: #1e282c; 79 | border-left-color: #dd4b39; 80 | } 81 | .skin-red .sidebar-menu > li > .treeview-menu { 82 | margin: 0 1px; 83 | background: #2c3b41; 84 | } 85 | .skin-red .sidebar a { 86 | color: #b8c7ce; 87 | } 88 | .skin-red .sidebar a:hover { 89 | text-decoration: none; 90 | } 91 | .skin-red .treeview-menu > li > a { 92 | color: #8aa4af; 93 | } 94 | .skin-red .treeview-menu > li.active > a, 95 | .skin-red .treeview-menu > li > a:hover { 96 | color: #ffffff; 97 | } 98 | .skin-red .sidebar-form { 99 | border-radius: 3px; 100 | border: 1px solid #374850; 101 | margin: 10px 10px; 102 | } 103 | .skin-red .sidebar-form input[type="text"], 104 | .skin-red .sidebar-form .btn { 105 | box-shadow: none; 106 | background-color: #374850; 107 | border: 1px solid transparent; 108 | height: 35px; 109 | -webkit-transition: all 0.3s ease-in-out; 110 | -o-transition: all 0.3s ease-in-out; 111 | transition: all 0.3s ease-in-out; 112 | } 113 | .skin-red .sidebar-form input[type="text"] { 114 | color: #666; 115 | border-top-left-radius: 2px; 116 | border-top-right-radius: 0; 117 | border-bottom-right-radius: 0; 118 | border-bottom-left-radius: 2px; 119 | } 120 | .skin-red .sidebar-form input[type="text"]:focus, 121 | .skin-red .sidebar-form input[type="text"]:focus + .input-group-btn .btn { 122 | background-color: #fff; 123 | color: #666; 124 | } 125 | .skin-red .sidebar-form input[type="text"]:focus + .input-group-btn .btn { 126 | border-left-color: #fff; 127 | } 128 | .skin-red .sidebar-form .btn { 129 | color: #999; 130 | border-top-left-radius: 0; 131 | border-top-right-radius: 2px; 132 | border-bottom-right-radius: 2px; 133 | border-bottom-left-radius: 0; 134 | } 135 | -------------------------------------------------------------------------------- /assets/css/skins/skin-green.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Skin: Green 3 | * ----------- 4 | */ 5 | .skin-green .main-header .navbar { 6 | background-color: #00a65a; 7 | } 8 | .skin-green .main-header .navbar .nav > li > a { 9 | color: #ffffff; 10 | } 11 | .skin-green .main-header .navbar .nav > li > a:hover, 12 | .skin-green .main-header .navbar .nav > li > a:active, 13 | .skin-green .main-header .navbar .nav > li > a:focus, 14 | .skin-green .main-header .navbar .nav .open > a, 15 | .skin-green .main-header .navbar .nav .open > a:hover, 16 | .skin-green .main-header .navbar .nav .open > a:focus, 17 | .skin-green .main-header .navbar .nav > .active > a { 18 | background: rgba(0, 0, 0, 0.1); 19 | color: #f6f6f6; 20 | } 21 | .skin-green .main-header .navbar .sidebar-toggle { 22 | color: #ffffff; 23 | } 24 | .skin-green .main-header .navbar .sidebar-toggle:hover { 25 | color: #f6f6f6; 26 | background: rgba(0, 0, 0, 0.1); 27 | } 28 | .skin-green .main-header .navbar .sidebar-toggle { 29 | color: #fff; 30 | } 31 | .skin-green .main-header .navbar .sidebar-toggle:hover { 32 | background-color: #008d4c; 33 | } 34 | @media (max-width: 767px) { 35 | .skin-green .main-header .navbar .dropdown-menu li.divider { 36 | background-color: rgba(255, 255, 255, 0.1); 37 | } 38 | .skin-green .main-header .navbar .dropdown-menu li a { 39 | color: #fff; 40 | } 41 | .skin-green .main-header .navbar .dropdown-menu li a:hover { 42 | background: #008d4c; 43 | } 44 | } 45 | .skin-green .main-header .logo { 46 | background-color: #008d4c; 47 | color: #ffffff; 48 | border-bottom: 0 solid transparent; 49 | } 50 | .skin-green .main-header .logo:hover { 51 | background-color: #008749; 52 | } 53 | .skin-green .main-header li.user-header { 54 | background-color: #00a65a; 55 | } 56 | .skin-green .content-header { 57 | background: transparent; 58 | } 59 | .skin-green .wrapper, 60 | .skin-green .main-sidebar, 61 | .skin-green .left-side { 62 | background-color: #222d32; 63 | } 64 | .skin-green .user-panel > .info, 65 | .skin-green .user-panel > .info > a { 66 | color: #fff; 67 | } 68 | .skin-green .sidebar-menu > li.header { 69 | color: #4b646f; 70 | background: #1a2226; 71 | } 72 | .skin-green .sidebar-menu > li > a { 73 | border-left: 3px solid transparent; 74 | } 75 | .skin-green .sidebar-menu > li:hover > a, 76 | .skin-green .sidebar-menu > li.active > a { 77 | color: #ffffff; 78 | background: #1e282c; 79 | border-left-color: #00a65a; 80 | } 81 | .skin-green .sidebar-menu > li > .treeview-menu { 82 | margin: 0 1px; 83 | background: #2c3b41; 84 | } 85 | .skin-green .sidebar a { 86 | color: #b8c7ce; 87 | } 88 | .skin-green .sidebar a:hover { 89 | text-decoration: none; 90 | } 91 | .skin-green .treeview-menu > li > a { 92 | color: #8aa4af; 93 | } 94 | .skin-green .treeview-menu > li.active > a, 95 | .skin-green .treeview-menu > li > a:hover { 96 | color: #ffffff; 97 | } 98 | .skin-green .sidebar-form { 99 | border-radius: 3px; 100 | border: 1px solid #374850; 101 | margin: 10px 10px; 102 | } 103 | .skin-green .sidebar-form input[type="text"], 104 | .skin-green .sidebar-form .btn { 105 | box-shadow: none; 106 | background-color: #374850; 107 | border: 1px solid transparent; 108 | height: 35px; 109 | -webkit-transition: all 0.3s ease-in-out; 110 | -o-transition: all 0.3s ease-in-out; 111 | transition: all 0.3s ease-in-out; 112 | } 113 | .skin-green .sidebar-form input[type="text"] { 114 | color: #666; 115 | border-top-left-radius: 2px; 116 | border-top-right-radius: 0; 117 | border-bottom-right-radius: 0; 118 | border-bottom-left-radius: 2px; 119 | } 120 | .skin-green .sidebar-form input[type="text"]:focus, 121 | .skin-green .sidebar-form input[type="text"]:focus + .input-group-btn .btn { 122 | background-color: #fff; 123 | color: #666; 124 | } 125 | .skin-green .sidebar-form input[type="text"]:focus + .input-group-btn .btn { 126 | border-left-color: #fff; 127 | } 128 | .skin-green .sidebar-form .btn { 129 | color: #999; 130 | border-top-left-radius: 0; 131 | border-top-right-radius: 2px; 132 | border-bottom-right-radius: 2px; 133 | border-bottom-left-radius: 0; 134 | } 135 | -------------------------------------------------------------------------------- /assets/css/skins/skin-purple.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Skin: Purple 3 | * ------------ 4 | */ 5 | .skin-purple .main-header .navbar { 6 | background-color: #605ca8; 7 | } 8 | .skin-purple .main-header .navbar .nav > li > a { 9 | color: #ffffff; 10 | } 11 | .skin-purple .main-header .navbar .nav > li > a:hover, 12 | .skin-purple .main-header .navbar .nav > li > a:active, 13 | .skin-purple .main-header .navbar .nav > li > a:focus, 14 | .skin-purple .main-header .navbar .nav .open > a, 15 | .skin-purple .main-header .navbar .nav .open > a:hover, 16 | .skin-purple .main-header .navbar .nav .open > a:focus, 17 | .skin-purple .main-header .navbar .nav > .active > a { 18 | background: rgba(0, 0, 0, 0.1); 19 | color: #f6f6f6; 20 | } 21 | .skin-purple .main-header .navbar .sidebar-toggle { 22 | color: #ffffff; 23 | } 24 | .skin-purple .main-header .navbar .sidebar-toggle:hover { 25 | color: #f6f6f6; 26 | background: rgba(0, 0, 0, 0.1); 27 | } 28 | .skin-purple .main-header .navbar .sidebar-toggle { 29 | color: #fff; 30 | } 31 | .skin-purple .main-header .navbar .sidebar-toggle:hover { 32 | background-color: #555299; 33 | } 34 | @media (max-width: 767px) { 35 | .skin-purple .main-header .navbar .dropdown-menu li.divider { 36 | background-color: rgba(255, 255, 255, 0.1); 37 | } 38 | .skin-purple .main-header .navbar .dropdown-menu li a { 39 | color: #fff; 40 | } 41 | .skin-purple .main-header .navbar .dropdown-menu li a:hover { 42 | background: #555299; 43 | } 44 | } 45 | .skin-purple .main-header .logo { 46 | background-color: #555299; 47 | color: #ffffff; 48 | border-bottom: 0 solid transparent; 49 | } 50 | .skin-purple .main-header .logo:hover { 51 | background-color: #545096; 52 | } 53 | .skin-purple .main-header li.user-header { 54 | background-color: #605ca8; 55 | } 56 | .skin-purple .content-header { 57 | background: transparent; 58 | } 59 | .skin-purple .wrapper, 60 | .skin-purple .main-sidebar, 61 | .skin-purple .left-side { 62 | background-color: #222d32; 63 | } 64 | .skin-purple .user-panel > .info, 65 | .skin-purple .user-panel > .info > a { 66 | color: #fff; 67 | } 68 | .skin-purple .sidebar-menu > li.header { 69 | color: #4b646f; 70 | background: #1a2226; 71 | } 72 | .skin-purple .sidebar-menu > li > a { 73 | border-left: 3px solid transparent; 74 | } 75 | .skin-purple .sidebar-menu > li:hover > a, 76 | .skin-purple .sidebar-menu > li.active > a { 77 | color: #ffffff; 78 | background: #1e282c; 79 | border-left-color: #605ca8; 80 | } 81 | .skin-purple .sidebar-menu > li > .treeview-menu { 82 | margin: 0 1px; 83 | background: #2c3b41; 84 | } 85 | .skin-purple .sidebar a { 86 | color: #b8c7ce; 87 | } 88 | .skin-purple .sidebar a:hover { 89 | text-decoration: none; 90 | } 91 | .skin-purple .treeview-menu > li > a { 92 | color: #8aa4af; 93 | } 94 | .skin-purple .treeview-menu > li.active > a, 95 | .skin-purple .treeview-menu > li > a:hover { 96 | color: #ffffff; 97 | } 98 | .skin-purple .sidebar-form { 99 | border-radius: 3px; 100 | border: 1px solid #374850; 101 | margin: 10px 10px; 102 | } 103 | .skin-purple .sidebar-form input[type="text"], 104 | .skin-purple .sidebar-form .btn { 105 | box-shadow: none; 106 | background-color: #374850; 107 | border: 1px solid transparent; 108 | height: 35px; 109 | -webkit-transition: all 0.3s ease-in-out; 110 | -o-transition: all 0.3s ease-in-out; 111 | transition: all 0.3s ease-in-out; 112 | } 113 | .skin-purple .sidebar-form input[type="text"] { 114 | color: #666; 115 | border-top-left-radius: 2px; 116 | border-top-right-radius: 0; 117 | border-bottom-right-radius: 0; 118 | border-bottom-left-radius: 2px; 119 | } 120 | .skin-purple .sidebar-form input[type="text"]:focus, 121 | .skin-purple .sidebar-form input[type="text"]:focus + .input-group-btn .btn { 122 | background-color: #fff; 123 | color: #666; 124 | } 125 | .skin-purple .sidebar-form input[type="text"]:focus + .input-group-btn .btn { 126 | border-left-color: #fff; 127 | } 128 | .skin-purple .sidebar-form .btn { 129 | color: #999; 130 | border-top-left-radius: 0; 131 | border-top-right-radius: 2px; 132 | border-bottom-right-radius: 2px; 133 | border-bottom-left-radius: 0; 134 | } 135 | -------------------------------------------------------------------------------- /assets/css/skins/skin-yellow.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Skin: Yellow 3 | * ------------ 4 | */ 5 | .skin-yellow .main-header .navbar { 6 | background-color: #f39c12; 7 | } 8 | .skin-yellow .main-header .navbar .nav > li > a { 9 | color: #ffffff; 10 | } 11 | .skin-yellow .main-header .navbar .nav > li > a:hover, 12 | .skin-yellow .main-header .navbar .nav > li > a:active, 13 | .skin-yellow .main-header .navbar .nav > li > a:focus, 14 | .skin-yellow .main-header .navbar .nav .open > a, 15 | .skin-yellow .main-header .navbar .nav .open > a:hover, 16 | .skin-yellow .main-header .navbar .nav .open > a:focus, 17 | .skin-yellow .main-header .navbar .nav > .active > a { 18 | background: rgba(0, 0, 0, 0.1); 19 | color: #f6f6f6; 20 | } 21 | .skin-yellow .main-header .navbar .sidebar-toggle { 22 | color: #ffffff; 23 | } 24 | .skin-yellow .main-header .navbar .sidebar-toggle:hover { 25 | color: #f6f6f6; 26 | background: rgba(0, 0, 0, 0.1); 27 | } 28 | .skin-yellow .main-header .navbar .sidebar-toggle { 29 | color: #fff; 30 | } 31 | .skin-yellow .main-header .navbar .sidebar-toggle:hover { 32 | background-color: #e08e0b; 33 | } 34 | @media (max-width: 767px) { 35 | .skin-yellow .main-header .navbar .dropdown-menu li.divider { 36 | background-color: rgba(255, 255, 255, 0.1); 37 | } 38 | .skin-yellow .main-header .navbar .dropdown-menu li a { 39 | color: #fff; 40 | } 41 | .skin-yellow .main-header .navbar .dropdown-menu li a:hover { 42 | background: #e08e0b; 43 | } 44 | } 45 | .skin-yellow .main-header .logo { 46 | background-color: #e08e0b; 47 | color: #ffffff; 48 | border-bottom: 0 solid transparent; 49 | } 50 | .skin-yellow .main-header .logo:hover { 51 | background-color: #db8b0b; 52 | } 53 | .skin-yellow .main-header li.user-header { 54 | background-color: #f39c12; 55 | } 56 | .skin-yellow .content-header { 57 | background: transparent; 58 | } 59 | .skin-yellow .wrapper, 60 | .skin-yellow .main-sidebar, 61 | .skin-yellow .left-side { 62 | background-color: #222d32; 63 | } 64 | .skin-yellow .user-panel > .info, 65 | .skin-yellow .user-panel > .info > a { 66 | color: #fff; 67 | } 68 | .skin-yellow .sidebar-menu > li.header { 69 | color: #4b646f; 70 | background: #1a2226; 71 | } 72 | .skin-yellow .sidebar-menu > li > a { 73 | border-left: 3px solid transparent; 74 | } 75 | .skin-yellow .sidebar-menu > li:hover > a, 76 | .skin-yellow .sidebar-menu > li.active > a { 77 | color: #ffffff; 78 | background: #1e282c; 79 | border-left-color: #f39c12; 80 | } 81 | .skin-yellow .sidebar-menu > li > .treeview-menu { 82 | margin: 0 1px; 83 | background: #2c3b41; 84 | } 85 | .skin-yellow .sidebar a { 86 | color: #b8c7ce; 87 | } 88 | .skin-yellow .sidebar a:hover { 89 | text-decoration: none; 90 | } 91 | .skin-yellow .treeview-menu > li > a { 92 | color: #8aa4af; 93 | } 94 | .skin-yellow .treeview-menu > li.active > a, 95 | .skin-yellow .treeview-menu > li > a:hover { 96 | color: #ffffff; 97 | } 98 | .skin-yellow .sidebar-form { 99 | border-radius: 3px; 100 | border: 1px solid #374850; 101 | margin: 10px 10px; 102 | } 103 | .skin-yellow .sidebar-form input[type="text"], 104 | .skin-yellow .sidebar-form .btn { 105 | box-shadow: none; 106 | background-color: #374850; 107 | border: 1px solid transparent; 108 | height: 35px; 109 | -webkit-transition: all 0.3s ease-in-out; 110 | -o-transition: all 0.3s ease-in-out; 111 | transition: all 0.3s ease-in-out; 112 | } 113 | .skin-yellow .sidebar-form input[type="text"] { 114 | color: #666; 115 | border-top-left-radius: 2px; 116 | border-top-right-radius: 0; 117 | border-bottom-right-radius: 0; 118 | border-bottom-left-radius: 2px; 119 | } 120 | .skin-yellow .sidebar-form input[type="text"]:focus, 121 | .skin-yellow .sidebar-form input[type="text"]:focus + .input-group-btn .btn { 122 | background-color: #fff; 123 | color: #666; 124 | } 125 | .skin-yellow .sidebar-form input[type="text"]:focus + .input-group-btn .btn { 126 | border-left-color: #fff; 127 | } 128 | .skin-yellow .sidebar-form .btn { 129 | color: #999; 130 | border-top-left-radius: 0; 131 | border-top-right-radius: 2px; 132 | border-bottom-right-radius: 2px; 133 | border-bottom-left-radius: 0; 134 | } 135 | -------------------------------------------------------------------------------- /assets/css/skins/skin-blue.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Skin: Blue 3 | * ---------- 4 | */ 5 | .skin-blue .main-header .navbar { 6 | background-color: #3c8dbc; 7 | } 8 | .skin-blue .main-header .navbar .nav > li > a { 9 | color: #ffffff; 10 | } 11 | .skin-blue .main-header .navbar .nav > li > a:hover, 12 | .skin-blue .main-header .navbar .nav > li > a:active, 13 | .skin-blue .main-header .navbar .nav > li > a:focus, 14 | .skin-blue .main-header .navbar .nav .open > a, 15 | .skin-blue .main-header .navbar .nav .open > a:hover, 16 | .skin-blue .main-header .navbar .nav .open > a:focus, 17 | .skin-blue .main-header .navbar .nav > .active > a { 18 | background: rgba(0, 0, 0, 0.1); 19 | color: #f6f6f6; 20 | } 21 | .skin-blue .main-header .navbar .sidebar-toggle { 22 | color: #ffffff; 23 | } 24 | .skin-blue .main-header .navbar .sidebar-toggle:hover { 25 | color: #f6f6f6; 26 | background: rgba(0, 0, 0, 0.1); 27 | } 28 | .skin-blue .main-header .navbar .sidebar-toggle { 29 | color: #fff; 30 | } 31 | .skin-blue .main-header .navbar .sidebar-toggle:hover { 32 | background-color: #367fa9; 33 | } 34 | @media (max-width: 767px) { 35 | .skin-blue .main-header .navbar .dropdown-menu li.divider { 36 | background-color: rgba(255, 255, 255, 0.1); 37 | } 38 | .skin-blue .main-header .navbar .dropdown-menu li a { 39 | color: #fff; 40 | } 41 | .skin-blue .main-header .navbar .dropdown-menu li a:hover { 42 | background: #367fa9; 43 | } 44 | } 45 | .skin-blue .main-header .logo { 46 | background-color: #367fa9; 47 | color: #ffffff; 48 | border-bottom: 0 solid transparent; 49 | } 50 | .skin-blue .main-header .logo:hover { 51 | background-color: #357ca5; 52 | } 53 | .skin-blue .main-header li.user-header { 54 | background-color: #3c8dbc; 55 | } 56 | .skin-blue .content-header { 57 | background: transparent; 58 | } 59 | .skin-blue .wrapper, 60 | .skin-blue .main-sidebar, 61 | .skin-blue .left-side { 62 | background-color: #222d32; 63 | } 64 | .skin-blue .user-panel > .info, 65 | .skin-blue .user-panel > .info > a { 66 | color: #fff; 67 | } 68 | .skin-blue .sidebar-menu > li.header { 69 | color: #4b646f; 70 | background: #1a2226; 71 | } 72 | .skin-blue .sidebar-menu > li > a { 73 | border-left: 3px solid transparent; 74 | } 75 | .skin-blue .sidebar-menu > li:hover > a, 76 | .skin-blue .sidebar-menu > li.active > a { 77 | color: #ffffff; 78 | background: #1e282c; 79 | border-left-color: #3c8dbc; 80 | } 81 | .skin-blue .sidebar-menu > li > .treeview-menu { 82 | margin: 0 1px; 83 | background: #2c3b41; 84 | } 85 | .skin-blue .sidebar a { 86 | color: #b8c7ce; 87 | } 88 | .skin-blue .sidebar a:hover { 89 | text-decoration: none; 90 | } 91 | .skin-blue .treeview-menu > li > a { 92 | color: #8aa4af; 93 | } 94 | .skin-blue .treeview-menu > li.active > a, 95 | .skin-blue .treeview-menu > li > a:hover { 96 | color: #ffffff; 97 | } 98 | .skin-blue .sidebar-form { 99 | border-radius: 3px; 100 | border: 1px solid #374850; 101 | margin: 10px 10px; 102 | } 103 | .skin-blue .sidebar-form input[type="text"], 104 | .skin-blue .sidebar-form .btn { 105 | box-shadow: none; 106 | background-color: #374850; 107 | border: 1px solid transparent; 108 | height: 35px; 109 | -webkit-transition: all 0.3s ease-in-out; 110 | -o-transition: all 0.3s ease-in-out; 111 | transition: all 0.3s ease-in-out; 112 | } 113 | .skin-blue .sidebar-form input[type="text"] { 114 | color: #666; 115 | border-top-left-radius: 2px; 116 | border-top-right-radius: 0; 117 | border-bottom-right-radius: 0; 118 | border-bottom-left-radius: 2px; 119 | } 120 | .skin-blue .sidebar-form input[type="text"]:focus, 121 | .skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn { 122 | background-color: #fff; 123 | color: #666; 124 | } 125 | .skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn { 126 | border-left-color: #fff; 127 | } 128 | .skin-blue .sidebar-form .btn { 129 | color: #999; 130 | border-top-left-radius: 0; 131 | border-top-right-radius: 2px; 132 | border-bottom-right-radius: 2px; 133 | border-bottom-left-radius: 0; 134 | } 135 | .skin-blue.layout-top-nav .main-header > .logo { 136 | background-color: #3c8dbc; 137 | color: #ffffff; 138 | border-bottom: 0 solid transparent; 139 | } 140 | .skin-blue.layout-top-nav .main-header > .logo:hover { 141 | background-color: #3b8ab8; 142 | } 143 | -------------------------------------------------------------------------------- /assets/css/skins/skin-black.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Skin: Black 3 | * ----------- 4 | */ 5 | /* skin-black navbar */ 6 | .skin-black .main-header { 7 | -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05); 8 | box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05); 9 | } 10 | .skin-black .main-header .navbar-toggle { 11 | color: #333; 12 | } 13 | .skin-black .main-header .navbar-brand { 14 | color: #333; 15 | border-right: 1px solid #eee; 16 | } 17 | .skin-black .main-header > .navbar { 18 | background-color: #ffffff; 19 | } 20 | .skin-black .main-header > .navbar .nav > li > a { 21 | color: #333333; 22 | } 23 | .skin-black .main-header > .navbar .nav > li > a:hover, 24 | .skin-black .main-header > .navbar .nav > li > a:active, 25 | .skin-black .main-header > .navbar .nav > li > a:focus, 26 | .skin-black .main-header > .navbar .nav .open > a, 27 | .skin-black .main-header > .navbar .nav .open > a:hover, 28 | .skin-black .main-header > .navbar .nav .open > a:focus, 29 | .skin-black .main-header > .navbar .nav > .active > a { 30 | background: #ffffff; 31 | color: #999999; 32 | } 33 | .skin-black .main-header > .navbar .sidebar-toggle { 34 | color: #333333; 35 | } 36 | .skin-black .main-header > .navbar .sidebar-toggle:hover { 37 | color: #999999; 38 | background: #ffffff; 39 | } 40 | .skin-black .main-header > .navbar > .sidebar-toggle { 41 | color: #333; 42 | border-right: 1px solid #eee; 43 | } 44 | .skin-black .main-header > .navbar .navbar-nav > li > a { 45 | border-right: 1px solid #eee; 46 | } 47 | .skin-black .main-header > .navbar .navbar-custom-menu .navbar-nav > li > a, 48 | .skin-black .main-header > .navbar .navbar-right > li > a { 49 | border-left: 1px solid #eee; 50 | border-right-width: 0; 51 | } 52 | .skin-black .main-header > .logo { 53 | background-color: #ffffff; 54 | color: #333333; 55 | border-bottom: 0 solid transparent; 56 | border-right: 1px solid #eee; 57 | } 58 | .skin-black .main-header > .logo:hover { 59 | background-color: #fcfcfc; 60 | } 61 | @media (max-width: 767px) { 62 | .skin-black .main-header > .logo { 63 | background-color: #222222; 64 | color: #ffffff; 65 | border-bottom: 0 solid transparent; 66 | border-right: none; 67 | } 68 | .skin-black .main-header > .logo:hover { 69 | background-color: #1f1f1f; 70 | } 71 | } 72 | .skin-black .main-header li.user-header { 73 | background-color: #222; 74 | } 75 | .skin-black .content-header { 76 | background: transparent; 77 | box-shadow: none; 78 | } 79 | .skin-black .wrapper, 80 | .skin-black .main-sidebar, 81 | .skin-black .left-side { 82 | background-color: #222d32; 83 | } 84 | .skin-black .user-panel > .info, 85 | .skin-black .user-panel > .info > a { 86 | color: #fff; 87 | } 88 | .skin-black .sidebar-menu > li.header { 89 | color: #4b646f; 90 | background: #1a2226; 91 | } 92 | .skin-black .sidebar-menu > li > a { 93 | border-left: 3px solid transparent; 94 | } 95 | .skin-black .sidebar-menu > li:hover > a, 96 | .skin-black .sidebar-menu > li.active > a { 97 | color: #ffffff; 98 | background: #1e282c; 99 | border-left-color: #ffffff; 100 | } 101 | .skin-black .sidebar-menu > li > .treeview-menu { 102 | margin: 0 1px; 103 | background: #2c3b41; 104 | } 105 | .skin-black .sidebar a { 106 | color: #b8c7ce; 107 | } 108 | .skin-black .sidebar a:hover { 109 | text-decoration: none; 110 | } 111 | .skin-black .treeview-menu > li > a { 112 | color: #8aa4af; 113 | } 114 | .skin-black .treeview-menu > li.active > a, 115 | .skin-black .treeview-menu > li > a:hover { 116 | color: #ffffff; 117 | } 118 | .skin-black .sidebar-form { 119 | border-radius: 3px; 120 | border: 1px solid #374850; 121 | margin: 10px 10px; 122 | } 123 | .skin-black .sidebar-form input[type="text"], 124 | .skin-black .sidebar-form .btn { 125 | box-shadow: none; 126 | background-color: #374850; 127 | border: 1px solid transparent; 128 | height: 35px; 129 | -webkit-transition: all 0.3s ease-in-out; 130 | -o-transition: all 0.3s ease-in-out; 131 | transition: all 0.3s ease-in-out; 132 | } 133 | .skin-black .sidebar-form input[type="text"] { 134 | color: #666; 135 | border-top-left-radius: 2px; 136 | border-top-right-radius: 0; 137 | border-bottom-right-radius: 0; 138 | border-bottom-left-radius: 2px; 139 | } 140 | .skin-black .sidebar-form input[type="text"]:focus, 141 | .skin-black .sidebar-form input[type="text"]:focus + .input-group-btn .btn { 142 | background-color: #fff; 143 | color: #666; 144 | } 145 | .skin-black .sidebar-form input[type="text"]:focus + .input-group-btn .btn { 146 | border-left-color: #fff; 147 | } 148 | .skin-black .sidebar-form .btn { 149 | color: #999; 150 | border-top-left-radius: 0; 151 | border-top-right-radius: 2px; 152 | border-bottom-right-radius: 2px; 153 | border-bottom-left-radius: 0; 154 | } 155 | -------------------------------------------------------------------------------- /widgets/Box.php: -------------------------------------------------------------------------------- 1 | options,'box'); 64 | Html::addCssClass($this->options,'box-' . $this->type); 65 | $this->options['id'] = !empty($this->options['id']) ? $this->options['id'] : $this->getId(); 66 | if($this->solid){ 67 | Html::addCssClass($this->options,'box-solid'); 68 | } 69 | if ($this->collapsed) { 70 | Html::addCssClass($this->options,'collapsed-box'); 71 | if (!in_array(self::TOOL_COLLAPSE, $this->tools)) { 72 | array_unshift($this->tools, self::TOOL_COLLAPSE); 73 | } 74 | } 75 | 76 | echo Html::beginTag("div", $this->options); 77 | echo $this->renderHeader(); 78 | echo Html::beginTag("div", ["class" => "box-body"]); 79 | } 80 | 81 | public function run() 82 | { 83 | echo Html::endTag("div"); 84 | echo $this->renderFooter(); 85 | echo Html::endTag("div"); 86 | } 87 | 88 | protected function renderHeader() 89 | { 90 | $tools = ''; 91 | foreach ($this->tools as $v) { 92 | if (in_array($v, $this->sysTools)) { 93 | $tools .= $this->$v(); 94 | } else { 95 | $tools .= $v; 96 | } 97 | } 98 | if (!$this->title && !$tools) { 99 | return ''; 100 | } 101 | $html = ''; 102 | $headerOption = ["class" => "box-header"]; 103 | $this->title = $this->title ? $this->title : ' '; 104 | if ($this->withBorder) { 105 | Html::addCssClass($headerOption, "with-border"); 106 | } 107 | $html .= Html::beginTag("div", $headerOption); 108 | $html .= Html::tag("h3", $this->title, ["class"=>"box-title"]); 109 | $html .= $tools ? Html::tag("div", $tools, ["class"=>"box-tools pull-right"]) : null; 110 | $html .= Html::endTag("div"); 111 | return $html; 112 | } 113 | 114 | protected function renderFooter() 115 | { 116 | if ($this->footer) { 117 | return Html::tag("div", $this->footer, ["class" => "box-footer"]); 118 | } 119 | return ''; 120 | } 121 | 122 | protected function collapse() 123 | { 124 | $icon = Html::tag("i", "", ["class" => "fa fa-" . ($this->collapsed ? "plus" : "minus")]); 125 | return Html::tag("button", $icon, ["class" => "btn btn-box-tool", "data-widget" => "collapse"]); 126 | } 127 | 128 | protected function remove() 129 | { 130 | $icon = Html::tag("i", "", ["class" => "fa fa-times"]); 131 | return Html::tag("button", $icon, ["class" => "btn btn-box-tool", "data-widget" => "remove"]); 132 | } 133 | 134 | protected function refresh() 135 | { 136 | if (!$this->refreshUrl) { 137 | return ''; 138 | } 139 | $icon = Html::tag("i", "", ["class" => "fa fa-repeat"]); 140 | $id = $this->options['id']; 141 | $this->getView()->registerJs("$('#$id').boxRefresh({source:'{$this->refreshUrl}'})"); 142 | return Html::tag("button", $icon, ["class" => "btn btn-box-tool refresh-btn", "id" => $id, "data-widget" => "refresh"]); 143 | } 144 | } 145 | -------------------------------------------------------------------------------- /assets/css/skins/skin-red-light.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Skin: Red 3 | * --------- 4 | */ 5 | .skin-red-light .main-header .navbar { 6 | background-color: #dd4b39; 7 | } 8 | .skin-red-light .main-header .navbar .nav > li > a { 9 | color: #ffffff; 10 | } 11 | .skin-red-light .main-header .navbar .nav > li > a:hover, 12 | .skin-red-light .main-header .navbar .nav > li > a:active, 13 | .skin-red-light .main-header .navbar .nav > li > a:focus, 14 | .skin-red-light .main-header .navbar .nav .open > a, 15 | .skin-red-light .main-header .navbar .nav .open > a:hover, 16 | .skin-red-light .main-header .navbar .nav .open > a:focus, 17 | .skin-red-light .main-header .navbar .nav > .active > a { 18 | background: rgba(0, 0, 0, 0.1); 19 | color: #f6f6f6; 20 | } 21 | .skin-red-light .main-header .navbar .sidebar-toggle { 22 | color: #ffffff; 23 | } 24 | .skin-red-light .main-header .navbar .sidebar-toggle:hover { 25 | color: #f6f6f6; 26 | background: rgba(0, 0, 0, 0.1); 27 | } 28 | .skin-red-light .main-header .navbar .sidebar-toggle { 29 | color: #fff; 30 | } 31 | .skin-red-light .main-header .navbar .sidebar-toggle:hover { 32 | background-color: #d73925; 33 | } 34 | @media (max-width: 767px) { 35 | .skin-red-light .main-header .navbar .dropdown-menu li.divider { 36 | background-color: rgba(255, 255, 255, 0.1); 37 | } 38 | .skin-red-light .main-header .navbar .dropdown-menu li a { 39 | color: #fff; 40 | } 41 | .skin-red-light .main-header .navbar .dropdown-menu li a:hover { 42 | background: #d73925; 43 | } 44 | } 45 | .skin-red-light .main-header .logo { 46 | background-color: #dd4b39; 47 | color: #ffffff; 48 | border-bottom: 0 solid transparent; 49 | } 50 | .skin-red-light .main-header .logo:hover { 51 | background-color: #dc4735; 52 | } 53 | .skin-red-light .main-header li.user-header { 54 | background-color: #dd4b39; 55 | } 56 | .skin-red-light .content-header { 57 | background: transparent; 58 | } 59 | .skin-red-light .wrapper, 60 | .skin-red-light .main-sidebar, 61 | .skin-red-light .left-side { 62 | background-color: #f9fafc; 63 | } 64 | .skin-red-light .content-wrapper, 65 | .skin-red-light .main-footer { 66 | border-left: 1px solid #d2d6de; 67 | } 68 | .skin-red-light .user-panel > .info, 69 | .skin-red-light .user-panel > .info > a { 70 | color: #444444; 71 | } 72 | .skin-red-light .sidebar-menu > li { 73 | -webkit-transition: border-left-color 0.3s ease; 74 | -o-transition: border-left-color 0.3s ease; 75 | transition: border-left-color 0.3s ease; 76 | } 77 | .skin-red-light .sidebar-menu > li.header { 78 | color: #848484; 79 | background: #f9fafc; 80 | } 81 | .skin-red-light .sidebar-menu > li > a { 82 | border-left: 3px solid transparent; 83 | font-weight: 600; 84 | } 85 | .skin-red-light .sidebar-menu > li:hover > a, 86 | .skin-red-light .sidebar-menu > li.active > a { 87 | color: #000000; 88 | background: #f4f4f5; 89 | } 90 | .skin-red-light .sidebar-menu > li.active { 91 | border-left-color: #dd4b39; 92 | } 93 | .skin-red-light .sidebar-menu > li.active > a { 94 | font-weight: 600; 95 | } 96 | .skin-red-light .sidebar-menu > li > .treeview-menu { 97 | background: #f4f4f5; 98 | } 99 | .skin-red-light .sidebar a { 100 | color: #444444; 101 | } 102 | .skin-red-light .sidebar a:hover { 103 | text-decoration: none; 104 | } 105 | .skin-red-light .treeview-menu > li > a { 106 | color: #777777; 107 | } 108 | .skin-red-light .treeview-menu > li.active > a, 109 | .skin-red-light .treeview-menu > li > a:hover { 110 | color: #000000; 111 | } 112 | .skin-red-light .treeview-menu > li.active > a { 113 | font-weight: 600; 114 | } 115 | .skin-red-light .sidebar-form { 116 | border-radius: 3px; 117 | border: 1px solid #d2d6de; 118 | margin: 10px 10px; 119 | } 120 | .skin-red-light .sidebar-form input[type="text"], 121 | .skin-red-light .sidebar-form .btn { 122 | box-shadow: none; 123 | background-color: #fff; 124 | border: 1px solid transparent; 125 | height: 35px; 126 | -webkit-transition: all 0.3s ease-in-out; 127 | -o-transition: all 0.3s ease-in-out; 128 | transition: all 0.3s ease-in-out; 129 | } 130 | .skin-red-light .sidebar-form input[type="text"] { 131 | color: #666; 132 | border-top-left-radius: 2px; 133 | border-top-right-radius: 0; 134 | border-bottom-right-radius: 0; 135 | border-bottom-left-radius: 2px; 136 | } 137 | .skin-red-light .sidebar-form input[type="text"]:focus, 138 | .skin-red-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn { 139 | background-color: #fff; 140 | color: #666; 141 | } 142 | .skin-red-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn { 143 | border-left-color: #fff; 144 | } 145 | .skin-red-light .sidebar-form .btn { 146 | color: #999; 147 | border-top-left-radius: 0; 148 | border-top-right-radius: 2px; 149 | border-bottom-right-radius: 2px; 150 | border-bottom-left-radius: 0; 151 | } 152 | @media (min-width: 768px) { 153 | .skin-red-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu { 154 | border-left: 1px solid #d2d6de; 155 | } 156 | } 157 | -------------------------------------------------------------------------------- /assets/css/skins/skin-green-light.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Skin: Green 3 | * ----------- 4 | */ 5 | .skin-green-light .main-header .navbar { 6 | background-color: #00a65a; 7 | } 8 | .skin-green-light .main-header .navbar .nav > li > a { 9 | color: #ffffff; 10 | } 11 | .skin-green-light .main-header .navbar .nav > li > a:hover, 12 | .skin-green-light .main-header .navbar .nav > li > a:active, 13 | .skin-green-light .main-header .navbar .nav > li > a:focus, 14 | .skin-green-light .main-header .navbar .nav .open > a, 15 | .skin-green-light .main-header .navbar .nav .open > a:hover, 16 | .skin-green-light .main-header .navbar .nav .open > a:focus, 17 | .skin-green-light .main-header .navbar .nav > .active > a { 18 | background: rgba(0, 0, 0, 0.1); 19 | color: #f6f6f6; 20 | } 21 | .skin-green-light .main-header .navbar .sidebar-toggle { 22 | color: #ffffff; 23 | } 24 | .skin-green-light .main-header .navbar .sidebar-toggle:hover { 25 | color: #f6f6f6; 26 | background: rgba(0, 0, 0, 0.1); 27 | } 28 | .skin-green-light .main-header .navbar .sidebar-toggle { 29 | color: #fff; 30 | } 31 | .skin-green-light .main-header .navbar .sidebar-toggle:hover { 32 | background-color: #008d4c; 33 | } 34 | @media (max-width: 767px) { 35 | .skin-green-light .main-header .navbar .dropdown-menu li.divider { 36 | background-color: rgba(255, 255, 255, 0.1); 37 | } 38 | .skin-green-light .main-header .navbar .dropdown-menu li a { 39 | color: #fff; 40 | } 41 | .skin-green-light .main-header .navbar .dropdown-menu li a:hover { 42 | background: #008d4c; 43 | } 44 | } 45 | .skin-green-light .main-header .logo { 46 | background-color: #00a65a; 47 | color: #ffffff; 48 | border-bottom: 0 solid transparent; 49 | } 50 | .skin-green-light .main-header .logo:hover { 51 | background-color: #00a157; 52 | } 53 | .skin-green-light .main-header li.user-header { 54 | background-color: #00a65a; 55 | } 56 | .skin-green-light .content-header { 57 | background: transparent; 58 | } 59 | .skin-green-light .wrapper, 60 | .skin-green-light .main-sidebar, 61 | .skin-green-light .left-side { 62 | background-color: #f9fafc; 63 | } 64 | .skin-green-light .content-wrapper, 65 | .skin-green-light .main-footer { 66 | border-left: 1px solid #d2d6de; 67 | } 68 | .skin-green-light .user-panel > .info, 69 | .skin-green-light .user-panel > .info > a { 70 | color: #444444; 71 | } 72 | .skin-green-light .sidebar-menu > li { 73 | -webkit-transition: border-left-color 0.3s ease; 74 | -o-transition: border-left-color 0.3s ease; 75 | transition: border-left-color 0.3s ease; 76 | } 77 | .skin-green-light .sidebar-menu > li.header { 78 | color: #848484; 79 | background: #f9fafc; 80 | } 81 | .skin-green-light .sidebar-menu > li > a { 82 | border-left: 3px solid transparent; 83 | font-weight: 600; 84 | } 85 | .skin-green-light .sidebar-menu > li:hover > a, 86 | .skin-green-light .sidebar-menu > li.active > a { 87 | color: #000000; 88 | background: #f4f4f5; 89 | } 90 | .skin-green-light .sidebar-menu > li.active { 91 | border-left-color: #00a65a; 92 | } 93 | .skin-green-light .sidebar-menu > li.active > a { 94 | font-weight: 600; 95 | } 96 | .skin-green-light .sidebar-menu > li > .treeview-menu { 97 | background: #f4f4f5; 98 | } 99 | .skin-green-light .sidebar a { 100 | color: #444444; 101 | } 102 | .skin-green-light .sidebar a:hover { 103 | text-decoration: none; 104 | } 105 | .skin-green-light .treeview-menu > li > a { 106 | color: #777777; 107 | } 108 | .skin-green-light .treeview-menu > li.active > a, 109 | .skin-green-light .treeview-menu > li > a:hover { 110 | color: #000000; 111 | } 112 | .skin-green-light .treeview-menu > li.active > a { 113 | font-weight: 600; 114 | } 115 | .skin-green-light .sidebar-form { 116 | border-radius: 3px; 117 | border: 1px solid #d2d6de; 118 | margin: 10px 10px; 119 | } 120 | .skin-green-light .sidebar-form input[type="text"], 121 | .skin-green-light .sidebar-form .btn { 122 | box-shadow: none; 123 | background-color: #fff; 124 | border: 1px solid transparent; 125 | height: 35px; 126 | -webkit-transition: all 0.3s ease-in-out; 127 | -o-transition: all 0.3s ease-in-out; 128 | transition: all 0.3s ease-in-out; 129 | } 130 | .skin-green-light .sidebar-form input[type="text"] { 131 | color: #666; 132 | border-top-left-radius: 2px; 133 | border-top-right-radius: 0; 134 | border-bottom-right-radius: 0; 135 | border-bottom-left-radius: 2px; 136 | } 137 | .skin-green-light .sidebar-form input[type="text"]:focus, 138 | .skin-green-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn { 139 | background-color: #fff; 140 | color: #666; 141 | } 142 | .skin-green-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn { 143 | border-left-color: #fff; 144 | } 145 | .skin-green-light .sidebar-form .btn { 146 | color: #999; 147 | border-top-left-radius: 0; 148 | border-top-right-radius: 2px; 149 | border-bottom-right-radius: 2px; 150 | border-bottom-left-radius: 0; 151 | } 152 | @media (min-width: 768px) { 153 | .skin-green-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu { 154 | border-left: 1px solid #d2d6de; 155 | } 156 | } 157 | -------------------------------------------------------------------------------- /assets/css/skins/skin-purple-light.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Skin: Purple 3 | * ------------ 4 | */ 5 | .skin-purple-light .main-header .navbar { 6 | background-color: #605ca8; 7 | } 8 | .skin-purple-light .main-header .navbar .nav > li > a { 9 | color: #ffffff; 10 | } 11 | .skin-purple-light .main-header .navbar .nav > li > a:hover, 12 | .skin-purple-light .main-header .navbar .nav > li > a:active, 13 | .skin-purple-light .main-header .navbar .nav > li > a:focus, 14 | .skin-purple-light .main-header .navbar .nav .open > a, 15 | .skin-purple-light .main-header .navbar .nav .open > a:hover, 16 | .skin-purple-light .main-header .navbar .nav .open > a:focus, 17 | .skin-purple-light .main-header .navbar .nav > .active > a { 18 | background: rgba(0, 0, 0, 0.1); 19 | color: #f6f6f6; 20 | } 21 | .skin-purple-light .main-header .navbar .sidebar-toggle { 22 | color: #ffffff; 23 | } 24 | .skin-purple-light .main-header .navbar .sidebar-toggle:hover { 25 | color: #f6f6f6; 26 | background: rgba(0, 0, 0, 0.1); 27 | } 28 | .skin-purple-light .main-header .navbar .sidebar-toggle { 29 | color: #fff; 30 | } 31 | .skin-purple-light .main-header .navbar .sidebar-toggle:hover { 32 | background-color: #555299; 33 | } 34 | @media (max-width: 767px) { 35 | .skin-purple-light .main-header .navbar .dropdown-menu li.divider { 36 | background-color: rgba(255, 255, 255, 0.1); 37 | } 38 | .skin-purple-light .main-header .navbar .dropdown-menu li a { 39 | color: #fff; 40 | } 41 | .skin-purple-light .main-header .navbar .dropdown-menu li a:hover { 42 | background: #555299; 43 | } 44 | } 45 | .skin-purple-light .main-header .logo { 46 | background-color: #605ca8; 47 | color: #ffffff; 48 | border-bottom: 0 solid transparent; 49 | } 50 | .skin-purple-light .main-header .logo:hover { 51 | background-color: #5d59a6; 52 | } 53 | .skin-purple-light .main-header li.user-header { 54 | background-color: #605ca8; 55 | } 56 | .skin-purple-light .content-header { 57 | background: transparent; 58 | } 59 | .skin-purple-light .wrapper, 60 | .skin-purple-light .main-sidebar, 61 | .skin-purple-light .left-side { 62 | background-color: #f9fafc; 63 | } 64 | .skin-purple-light .content-wrapper, 65 | .skin-purple-light .main-footer { 66 | border-left: 1px solid #d2d6de; 67 | } 68 | .skin-purple-light .user-panel > .info, 69 | .skin-purple-light .user-panel > .info > a { 70 | color: #444444; 71 | } 72 | .skin-purple-light .sidebar-menu > li { 73 | -webkit-transition: border-left-color 0.3s ease; 74 | -o-transition: border-left-color 0.3s ease; 75 | transition: border-left-color 0.3s ease; 76 | } 77 | .skin-purple-light .sidebar-menu > li.header { 78 | color: #848484; 79 | background: #f9fafc; 80 | } 81 | .skin-purple-light .sidebar-menu > li > a { 82 | border-left: 3px solid transparent; 83 | font-weight: 600; 84 | } 85 | .skin-purple-light .sidebar-menu > li:hover > a, 86 | .skin-purple-light .sidebar-menu > li.active > a { 87 | color: #000000; 88 | background: #f4f4f5; 89 | } 90 | .skin-purple-light .sidebar-menu > li.active { 91 | border-left-color: #605ca8; 92 | } 93 | .skin-purple-light .sidebar-menu > li.active > a { 94 | font-weight: 600; 95 | } 96 | .skin-purple-light .sidebar-menu > li > .treeview-menu { 97 | background: #f4f4f5; 98 | } 99 | .skin-purple-light .sidebar a { 100 | color: #444444; 101 | } 102 | .skin-purple-light .sidebar a:hover { 103 | text-decoration: none; 104 | } 105 | .skin-purple-light .treeview-menu > li > a { 106 | color: #777777; 107 | } 108 | .skin-purple-light .treeview-menu > li.active > a, 109 | .skin-purple-light .treeview-menu > li > a:hover { 110 | color: #000000; 111 | } 112 | .skin-purple-light .treeview-menu > li.active > a { 113 | font-weight: 600; 114 | } 115 | .skin-purple-light .sidebar-form { 116 | border-radius: 3px; 117 | border: 1px solid #d2d6de; 118 | margin: 10px 10px; 119 | } 120 | .skin-purple-light .sidebar-form input[type="text"], 121 | .skin-purple-light .sidebar-form .btn { 122 | box-shadow: none; 123 | background-color: #fff; 124 | border: 1px solid transparent; 125 | height: 35px; 126 | -webkit-transition: all 0.3s ease-in-out; 127 | -o-transition: all 0.3s ease-in-out; 128 | transition: all 0.3s ease-in-out; 129 | } 130 | .skin-purple-light .sidebar-form input[type="text"] { 131 | color: #666; 132 | border-top-left-radius: 2px; 133 | border-top-right-radius: 0; 134 | border-bottom-right-radius: 0; 135 | border-bottom-left-radius: 2px; 136 | } 137 | .skin-purple-light .sidebar-form input[type="text"]:focus, 138 | .skin-purple-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn { 139 | background-color: #fff; 140 | color: #666; 141 | } 142 | .skin-purple-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn { 143 | border-left-color: #fff; 144 | } 145 | .skin-purple-light .sidebar-form .btn { 146 | color: #999; 147 | border-top-left-radius: 0; 148 | border-top-right-radius: 2px; 149 | border-bottom-right-radius: 2px; 150 | border-bottom-left-radius: 0; 151 | } 152 | @media (min-width: 768px) { 153 | .skin-purple-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu { 154 | border-left: 1px solid #d2d6de; 155 | } 156 | } 157 | -------------------------------------------------------------------------------- /assets/css/skins/skin-yellow-light.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Skin: Yellow 3 | * ------------ 4 | */ 5 | .skin-yellow-light .main-header .navbar { 6 | background-color: #f39c12; 7 | } 8 | .skin-yellow-light .main-header .navbar .nav > li > a { 9 | color: #ffffff; 10 | } 11 | .skin-yellow-light .main-header .navbar .nav > li > a:hover, 12 | .skin-yellow-light .main-header .navbar .nav > li > a:active, 13 | .skin-yellow-light .main-header .navbar .nav > li > a:focus, 14 | .skin-yellow-light .main-header .navbar .nav .open > a, 15 | .skin-yellow-light .main-header .navbar .nav .open > a:hover, 16 | .skin-yellow-light .main-header .navbar .nav .open > a:focus, 17 | .skin-yellow-light .main-header .navbar .nav > .active > a { 18 | background: rgba(0, 0, 0, 0.1); 19 | color: #f6f6f6; 20 | } 21 | .skin-yellow-light .main-header .navbar .sidebar-toggle { 22 | color: #ffffff; 23 | } 24 | .skin-yellow-light .main-header .navbar .sidebar-toggle:hover { 25 | color: #f6f6f6; 26 | background: rgba(0, 0, 0, 0.1); 27 | } 28 | .skin-yellow-light .main-header .navbar .sidebar-toggle { 29 | color: #fff; 30 | } 31 | .skin-yellow-light .main-header .navbar .sidebar-toggle:hover { 32 | background-color: #e08e0b; 33 | } 34 | @media (max-width: 767px) { 35 | .skin-yellow-light .main-header .navbar .dropdown-menu li.divider { 36 | background-color: rgba(255, 255, 255, 0.1); 37 | } 38 | .skin-yellow-light .main-header .navbar .dropdown-menu li a { 39 | color: #fff; 40 | } 41 | .skin-yellow-light .main-header .navbar .dropdown-menu li a:hover { 42 | background: #e08e0b; 43 | } 44 | } 45 | .skin-yellow-light .main-header .logo { 46 | background-color: #f39c12; 47 | color: #ffffff; 48 | border-bottom: 0 solid transparent; 49 | } 50 | .skin-yellow-light .main-header .logo:hover { 51 | background-color: #f39a0d; 52 | } 53 | .skin-yellow-light .main-header li.user-header { 54 | background-color: #f39c12; 55 | } 56 | .skin-yellow-light .content-header { 57 | background: transparent; 58 | } 59 | .skin-yellow-light .wrapper, 60 | .skin-yellow-light .main-sidebar, 61 | .skin-yellow-light .left-side { 62 | background-color: #f9fafc; 63 | } 64 | .skin-yellow-light .content-wrapper, 65 | .skin-yellow-light .main-footer { 66 | border-left: 1px solid #d2d6de; 67 | } 68 | .skin-yellow-light .user-panel > .info, 69 | .skin-yellow-light .user-panel > .info > a { 70 | color: #444444; 71 | } 72 | .skin-yellow-light .sidebar-menu > li { 73 | -webkit-transition: border-left-color 0.3s ease; 74 | -o-transition: border-left-color 0.3s ease; 75 | transition: border-left-color 0.3s ease; 76 | } 77 | .skin-yellow-light .sidebar-menu > li.header { 78 | color: #848484; 79 | background: #f9fafc; 80 | } 81 | .skin-yellow-light .sidebar-menu > li > a { 82 | border-left: 3px solid transparent; 83 | font-weight: 600; 84 | } 85 | .skin-yellow-light .sidebar-menu > li:hover > a, 86 | .skin-yellow-light .sidebar-menu > li.active > a { 87 | color: #000000; 88 | background: #f4f4f5; 89 | } 90 | .skin-yellow-light .sidebar-menu > li.active { 91 | border-left-color: #f39c12; 92 | } 93 | .skin-yellow-light .sidebar-menu > li.active > a { 94 | font-weight: 600; 95 | } 96 | .skin-yellow-light .sidebar-menu > li > .treeview-menu { 97 | background: #f4f4f5; 98 | } 99 | .skin-yellow-light .sidebar a { 100 | color: #444444; 101 | } 102 | .skin-yellow-light .sidebar a:hover { 103 | text-decoration: none; 104 | } 105 | .skin-yellow-light .treeview-menu > li > a { 106 | color: #777777; 107 | } 108 | .skin-yellow-light .treeview-menu > li.active > a, 109 | .skin-yellow-light .treeview-menu > li > a:hover { 110 | color: #000000; 111 | } 112 | .skin-yellow-light .treeview-menu > li.active > a { 113 | font-weight: 600; 114 | } 115 | .skin-yellow-light .sidebar-form { 116 | border-radius: 3px; 117 | border: 1px solid #d2d6de; 118 | margin: 10px 10px; 119 | } 120 | .skin-yellow-light .sidebar-form input[type="text"], 121 | .skin-yellow-light .sidebar-form .btn { 122 | box-shadow: none; 123 | background-color: #fff; 124 | border: 1px solid transparent; 125 | height: 35px; 126 | -webkit-transition: all 0.3s ease-in-out; 127 | -o-transition: all 0.3s ease-in-out; 128 | transition: all 0.3s ease-in-out; 129 | } 130 | .skin-yellow-light .sidebar-form input[type="text"] { 131 | color: #666; 132 | border-top-left-radius: 2px; 133 | border-top-right-radius: 0; 134 | border-bottom-right-radius: 0; 135 | border-bottom-left-radius: 2px; 136 | } 137 | .skin-yellow-light .sidebar-form input[type="text"]:focus, 138 | .skin-yellow-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn { 139 | background-color: #fff; 140 | color: #666; 141 | } 142 | .skin-yellow-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn { 143 | border-left-color: #fff; 144 | } 145 | .skin-yellow-light .sidebar-form .btn { 146 | color: #999; 147 | border-top-left-radius: 0; 148 | border-top-right-radius: 2px; 149 | border-bottom-right-radius: 2px; 150 | border-bottom-left-radius: 0; 151 | } 152 | @media (min-width: 768px) { 153 | .skin-yellow-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu { 154 | border-left: 1px solid #d2d6de; 155 | } 156 | } 157 | -------------------------------------------------------------------------------- /assets/css/skins/skin-blue-light.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Skin: Blue 3 | * ---------- 4 | */ 5 | .skin-blue-light .main-header .navbar { 6 | background-color: #3c8dbc; 7 | } 8 | .skin-blue-light .main-header .navbar .nav > li > a { 9 | color: #ffffff; 10 | } 11 | .skin-blue-light .main-header .navbar .nav > li > a:hover, 12 | .skin-blue-light .main-header .navbar .nav > li > a:active, 13 | .skin-blue-light .main-header .navbar .nav > li > a:focus, 14 | .skin-blue-light .main-header .navbar .nav .open > a, 15 | .skin-blue-light .main-header .navbar .nav .open > a:hover, 16 | .skin-blue-light .main-header .navbar .nav .open > a:focus, 17 | .skin-blue-light .main-header .navbar .nav > .active > a { 18 | background: rgba(0, 0, 0, 0.1); 19 | color: #f6f6f6; 20 | } 21 | .skin-blue-light .main-header .navbar .sidebar-toggle { 22 | color: #ffffff; 23 | } 24 | .skin-blue-light .main-header .navbar .sidebar-toggle:hover { 25 | color: #f6f6f6; 26 | background: rgba(0, 0, 0, 0.1); 27 | } 28 | .skin-blue-light .main-header .navbar .sidebar-toggle { 29 | color: #fff; 30 | } 31 | .skin-blue-light .main-header .navbar .sidebar-toggle:hover { 32 | background-color: #367fa9; 33 | } 34 | @media (max-width: 767px) { 35 | .skin-blue-light .main-header .navbar .dropdown-menu li.divider { 36 | background-color: rgba(255, 255, 255, 0.1); 37 | } 38 | .skin-blue-light .main-header .navbar .dropdown-menu li a { 39 | color: #fff; 40 | } 41 | .skin-blue-light .main-header .navbar .dropdown-menu li a:hover { 42 | background: #367fa9; 43 | } 44 | } 45 | .skin-blue-light .main-header .logo { 46 | background-color: #3c8dbc; 47 | color: #ffffff; 48 | border-bottom: 0 solid transparent; 49 | } 50 | .skin-blue-light .main-header .logo:hover { 51 | background-color: #3b8ab8; 52 | } 53 | .skin-blue-light .main-header li.user-header { 54 | background-color: #3c8dbc; 55 | } 56 | .skin-blue-light .content-header { 57 | background: transparent; 58 | } 59 | .skin-blue-light .wrapper, 60 | .skin-blue-light .main-sidebar, 61 | .skin-blue-light .left-side { 62 | background-color: #f9fafc; 63 | } 64 | .skin-blue-light .content-wrapper, 65 | .skin-blue-light .main-footer { 66 | border-left: 1px solid #d2d6de; 67 | } 68 | .skin-blue-light .user-panel > .info, 69 | .skin-blue-light .user-panel > .info > a { 70 | color: #444444; 71 | } 72 | .skin-blue-light .sidebar-menu > li { 73 | -webkit-transition: border-left-color 0.3s ease; 74 | -o-transition: border-left-color 0.3s ease; 75 | transition: border-left-color 0.3s ease; 76 | } 77 | .skin-blue-light .sidebar-menu > li.header { 78 | color: #848484; 79 | background: #f9fafc; 80 | } 81 | .skin-blue-light .sidebar-menu > li > a { 82 | border-left: 3px solid transparent; 83 | font-weight: 600; 84 | } 85 | .skin-blue-light .sidebar-menu > li:hover > a, 86 | .skin-blue-light .sidebar-menu > li.active > a { 87 | color: #000000; 88 | background: #f4f4f5; 89 | } 90 | .skin-blue-light .sidebar-menu > li.active { 91 | border-left-color: #3c8dbc; 92 | } 93 | .skin-blue-light .sidebar-menu > li.active > a { 94 | font-weight: 600; 95 | } 96 | .skin-blue-light .sidebar-menu > li > .treeview-menu { 97 | background: #f4f4f5; 98 | } 99 | .skin-blue-light .sidebar a { 100 | color: #444444; 101 | } 102 | .skin-blue-light .sidebar a:hover { 103 | text-decoration: none; 104 | } 105 | .skin-blue-light .treeview-menu > li > a { 106 | color: #777777; 107 | } 108 | .skin-blue-light .treeview-menu > li.active > a, 109 | .skin-blue-light .treeview-menu > li > a:hover { 110 | color: #000000; 111 | } 112 | .skin-blue-light .treeview-menu > li.active > a { 113 | font-weight: 600; 114 | } 115 | .skin-blue-light .sidebar-form { 116 | border-radius: 3px; 117 | border: 1px solid #d2d6de; 118 | margin: 10px 10px; 119 | } 120 | .skin-blue-light .sidebar-form input[type="text"], 121 | .skin-blue-light .sidebar-form .btn { 122 | box-shadow: none; 123 | background-color: #fff; 124 | border: 1px solid transparent; 125 | height: 35px; 126 | -webkit-transition: all 0.3s ease-in-out; 127 | -o-transition: all 0.3s ease-in-out; 128 | transition: all 0.3s ease-in-out; 129 | } 130 | .skin-blue-light .sidebar-form input[type="text"] { 131 | color: #666; 132 | border-top-left-radius: 2px; 133 | border-top-right-radius: 0; 134 | border-bottom-right-radius: 0; 135 | border-bottom-left-radius: 2px; 136 | } 137 | .skin-blue-light .sidebar-form input[type="text"]:focus, 138 | .skin-blue-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn { 139 | background-color: #fff; 140 | color: #666; 141 | } 142 | .skin-blue-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn { 143 | border-left-color: #fff; 144 | } 145 | .skin-blue-light .sidebar-form .btn { 146 | color: #999; 147 | border-top-left-radius: 0; 148 | border-top-right-radius: 2px; 149 | border-bottom-right-radius: 2px; 150 | border-bottom-left-radius: 0; 151 | } 152 | @media (min-width: 768px) { 153 | .skin-blue-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu { 154 | border-left: 1px solid #d2d6de; 155 | } 156 | } 157 | .skin-blue-light .main-footer { 158 | border-top-color: #d2d6de; 159 | } 160 | .skin-blue.layout-top-nav .main-header > .logo { 161 | background-color: #3c8dbc; 162 | color: #ffffff; 163 | border-bottom: 0 solid transparent; 164 | } 165 | .skin-blue.layout-top-nav .main-header > .logo:hover { 166 | background-color: #3b8ab8; 167 | } 168 | -------------------------------------------------------------------------------- /assets/css/skins/skin-black-light.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Skin: Black 3 | * ----------- 4 | */ 5 | /* skin-black navbar */ 6 | .skin-black-light .main-header { 7 | -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05); 8 | box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05); 9 | } 10 | .skin-black-light .main-header .navbar-toggle { 11 | color: #333; 12 | } 13 | .skin-black-light .main-header .navbar-brand { 14 | color: #333; 15 | border-right: 1px solid #eee; 16 | } 17 | .skin-black-light .main-header > .navbar { 18 | background-color: #ffffff; 19 | } 20 | .skin-black-light .main-header > .navbar .nav > li > a { 21 | color: #333333; 22 | } 23 | .skin-black-light .main-header > .navbar .nav > li > a:hover, 24 | .skin-black-light .main-header > .navbar .nav > li > a:active, 25 | .skin-black-light .main-header > .navbar .nav > li > a:focus, 26 | .skin-black-light .main-header > .navbar .nav .open > a, 27 | .skin-black-light .main-header > .navbar .nav .open > a:hover, 28 | .skin-black-light .main-header > .navbar .nav .open > a:focus, 29 | .skin-black-light .main-header > .navbar .nav > .active > a { 30 | background: #ffffff; 31 | color: #999999; 32 | } 33 | .skin-black-light .main-header > .navbar .sidebar-toggle { 34 | color: #333333; 35 | } 36 | .skin-black-light .main-header > .navbar .sidebar-toggle:hover { 37 | color: #999999; 38 | background: #ffffff; 39 | } 40 | .skin-black-light .main-header > .navbar > .sidebar-toggle { 41 | color: #333; 42 | border-right: 1px solid #eee; 43 | } 44 | .skin-black-light .main-header > .navbar .navbar-nav > li > a { 45 | border-right: 1px solid #eee; 46 | } 47 | .skin-black-light .main-header > .navbar .navbar-custom-menu .navbar-nav > li > a, 48 | .skin-black-light .main-header > .navbar .navbar-right > li > a { 49 | border-left: 1px solid #eee; 50 | border-right-width: 0; 51 | } 52 | .skin-black-light .main-header > .logo { 53 | background-color: #ffffff; 54 | color: #333333; 55 | border-bottom: 0 solid transparent; 56 | border-right: 1px solid #eee; 57 | } 58 | .skin-black-light .main-header > .logo:hover { 59 | background-color: #fcfcfc; 60 | } 61 | @media (max-width: 767px) { 62 | .skin-black-light .main-header > .logo { 63 | background-color: #222222; 64 | color: #ffffff; 65 | border-bottom: 0 solid transparent; 66 | border-right: none; 67 | } 68 | .skin-black-light .main-header > .logo:hover { 69 | background-color: #1f1f1f; 70 | } 71 | } 72 | .skin-black-light .main-header li.user-header { 73 | background-color: #222; 74 | } 75 | .skin-black-light .content-header { 76 | background: transparent; 77 | box-shadow: none; 78 | } 79 | .skin-black-light .wrapper, 80 | .skin-black-light .main-sidebar, 81 | .skin-black-light .left-side { 82 | background-color: #f9fafc; 83 | } 84 | .skin-black-light .content-wrapper, 85 | .skin-black-light .main-footer { 86 | border-left: 1px solid #d2d6de; 87 | } 88 | .skin-black-light .user-panel > .info, 89 | .skin-black-light .user-panel > .info > a { 90 | color: #444444; 91 | } 92 | .skin-black-light .sidebar-menu > li { 93 | -webkit-transition: border-left-color 0.3s ease; 94 | -o-transition: border-left-color 0.3s ease; 95 | transition: border-left-color 0.3s ease; 96 | } 97 | .skin-black-light .sidebar-menu > li.header { 98 | color: #848484; 99 | background: #f9fafc; 100 | } 101 | .skin-black-light .sidebar-menu > li > a { 102 | border-left: 3px solid transparent; 103 | font-weight: 600; 104 | } 105 | .skin-black-light .sidebar-menu > li:hover > a, 106 | .skin-black-light .sidebar-menu > li.active > a { 107 | color: #000000; 108 | background: #f4f4f5; 109 | } 110 | .skin-black-light .sidebar-menu > li.active { 111 | border-left-color: #ffffff; 112 | } 113 | .skin-black-light .sidebar-menu > li.active > a { 114 | font-weight: 600; 115 | } 116 | .skin-black-light .sidebar-menu > li > .treeview-menu { 117 | background: #f4f4f5; 118 | } 119 | .skin-black-light .sidebar a { 120 | color: #444444; 121 | } 122 | .skin-black-light .sidebar a:hover { 123 | text-decoration: none; 124 | } 125 | .skin-black-light .treeview-menu > li > a { 126 | color: #777777; 127 | } 128 | .skin-black-light .treeview-menu > li.active > a, 129 | .skin-black-light .treeview-menu > li > a:hover { 130 | color: #000000; 131 | } 132 | .skin-black-light .treeview-menu > li.active > a { 133 | font-weight: 600; 134 | } 135 | .skin-black-light .sidebar-form { 136 | border-radius: 3px; 137 | border: 1px solid #d2d6de; 138 | margin: 10px 10px; 139 | } 140 | .skin-black-light .sidebar-form input[type="text"], 141 | .skin-black-light .sidebar-form .btn { 142 | box-shadow: none; 143 | background-color: #fff; 144 | border: 1px solid transparent; 145 | height: 35px; 146 | -webkit-transition: all 0.3s ease-in-out; 147 | -o-transition: all 0.3s ease-in-out; 148 | transition: all 0.3s ease-in-out; 149 | } 150 | .skin-black-light .sidebar-form input[type="text"] { 151 | color: #666; 152 | border-top-left-radius: 2px; 153 | border-top-right-radius: 0; 154 | border-bottom-right-radius: 0; 155 | border-bottom-left-radius: 2px; 156 | } 157 | .skin-black-light .sidebar-form input[type="text"]:focus, 158 | .skin-black-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn { 159 | background-color: #fff; 160 | color: #666; 161 | } 162 | .skin-black-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn { 163 | border-left-color: #fff; 164 | } 165 | .skin-black-light .sidebar-form .btn { 166 | color: #999; 167 | border-top-left-radius: 0; 168 | border-top-right-radius: 2px; 169 | border-bottom-right-radius: 2px; 170 | border-bottom-left-radius: 0; 171 | } 172 | @media (min-width: 768px) { 173 | .skin-black-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu { 174 | border-left: 1px solid #d2d6de; 175 | } 176 | } 177 | -------------------------------------------------------------------------------- /assets/js/pages/dashboard.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Abdullah A Almsaeed 3 | * Date: 4 Jan 2014 4 | * Description: 5 | * This is a demo file used only for the main dashboard (index.html) 6 | **/ 7 | 8 | $(function () { 9 | 10 | "use strict"; 11 | 12 | //Make the dashboard widgets sortable Using jquery UI 13 | $(".connectedSortable").sortable({ 14 | placeholder: "sort-highlight", 15 | connectWith: ".connectedSortable", 16 | handle: ".box-header, .nav-tabs", 17 | forcePlaceholderSize: true, 18 | zIndex: 999999 19 | }); 20 | $(".connectedSortable .box-header, .connectedSortable .nav-tabs-custom").css("cursor", "move"); 21 | 22 | //jQuery UI sortable for the todo list 23 | $(".todo-list").sortable({ 24 | placeholder: "sort-highlight", 25 | handle: ".handle", 26 | forcePlaceholderSize: true, 27 | zIndex: 999999 28 | }); 29 | 30 | //bootstrap WYSIHTML5 - text editor 31 | $(".textarea").wysihtml5(); 32 | 33 | $('.daterange').daterangepicker({ 34 | ranges: { 35 | 'Today': [moment(), moment()], 36 | 'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], 37 | 'Last 7 Days': [moment().subtract(6, 'days'), moment()], 38 | 'Last 30 Days': [moment().subtract(29, 'days'), moment()], 39 | 'This Month': [moment().startOf('month'), moment().endOf('month')], 40 | 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] 41 | }, 42 | startDate: moment().subtract(29, 'days'), 43 | endDate: moment() 44 | }, function (start, end) { 45 | window.alert("You chose: " + start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')); 46 | }); 47 | 48 | /* jQueryKnob */ 49 | $(".knob").knob(); 50 | 51 | //jvectormap data 52 | var visitorsData = { 53 | "US": 398, //USA 54 | "SA": 400, //Saudi Arabia 55 | "CA": 1000, //Canada 56 | "DE": 500, //Germany 57 | "FR": 760, //France 58 | "CN": 300, //China 59 | "AU": 700, //Australia 60 | "BR": 600, //Brazil 61 | "IN": 800, //India 62 | "GB": 320, //Great Britain 63 | "RU": 3000 //Russia 64 | }; 65 | //World map by jvectormap 66 | $('#world-map').vectorMap({ 67 | map: 'world_mill_en', 68 | backgroundColor: "transparent", 69 | regionStyle: { 70 | initial: { 71 | fill: '#e4e4e4', 72 | "fill-opacity": 1, 73 | stroke: 'none', 74 | "stroke-width": 0, 75 | "stroke-opacity": 1 76 | } 77 | }, 78 | series: { 79 | regions: [{ 80 | values: visitorsData, 81 | scale: ["#92c1dc", "#ebf4f9"], 82 | normalizeFunction: 'polynomial' 83 | }] 84 | }, 85 | onRegionLabelShow: function (e, el, code) { 86 | if (typeof visitorsData[code] != "undefined") 87 | el.html(el.html() + ': ' + visitorsData[code] + ' new visitors'); 88 | } 89 | }); 90 | 91 | //Sparkline charts 92 | var myvalues = [1000, 1200, 920, 927, 931, 1027, 819, 930, 1021]; 93 | $('#sparkline-1').sparkline(myvalues, { 94 | type: 'line', 95 | lineColor: '#92c1dc', 96 | fillColor: "#ebf4f9", 97 | height: '50', 98 | width: '80' 99 | }); 100 | myvalues = [515, 519, 520, 522, 652, 810, 370, 627, 319, 630, 921]; 101 | $('#sparkline-2').sparkline(myvalues, { 102 | type: 'line', 103 | lineColor: '#92c1dc', 104 | fillColor: "#ebf4f9", 105 | height: '50', 106 | width: '80' 107 | }); 108 | myvalues = [15, 19, 20, 22, 33, 27, 31, 27, 19, 30, 21]; 109 | $('#sparkline-3').sparkline(myvalues, { 110 | type: 'line', 111 | lineColor: '#92c1dc', 112 | fillColor: "#ebf4f9", 113 | height: '50', 114 | width: '80' 115 | }); 116 | 117 | //The Calender 118 | $("#calendar").datepicker(); 119 | 120 | //SLIMSCROLL FOR CHAT WIDGET 121 | $('#chat-box').slimScroll({ 122 | height: '250px' 123 | }); 124 | 125 | /* Morris.js Charts */ 126 | // Sales chart 127 | var area = new Morris.Area({ 128 | element: 'revenue-chart', 129 | resize: true, 130 | data: [ 131 | {y: '2011 Q1', item1: 2666, item2: 2666}, 132 | {y: '2011 Q2', item1: 2778, item2: 2294}, 133 | {y: '2011 Q3', item1: 4912, item2: 1969}, 134 | {y: '2011 Q4', item1: 3767, item2: 3597}, 135 | {y: '2012 Q1', item1: 6810, item2: 1914}, 136 | {y: '2012 Q2', item1: 5670, item2: 4293}, 137 | {y: '2012 Q3', item1: 4820, item2: 3795}, 138 | {y: '2012 Q4', item1: 15073, item2: 5967}, 139 | {y: '2013 Q1', item1: 10687, item2: 4460}, 140 | {y: '2013 Q2', item1: 8432, item2: 5713} 141 | ], 142 | xkey: 'y', 143 | ykeys: ['item1', 'item2'], 144 | labels: ['Item 1', 'Item 2'], 145 | lineColors: ['#a0d0e0', '#3c8dbc'], 146 | hideHover: 'auto' 147 | }); 148 | var line = new Morris.Line({ 149 | element: 'line-chart', 150 | resize: true, 151 | data: [ 152 | {y: '2011 Q1', item1: 2666}, 153 | {y: '2011 Q2', item1: 2778}, 154 | {y: '2011 Q3', item1: 4912}, 155 | {y: '2011 Q4', item1: 3767}, 156 | {y: '2012 Q1', item1: 6810}, 157 | {y: '2012 Q2', item1: 5670}, 158 | {y: '2012 Q3', item1: 4820}, 159 | {y: '2012 Q4', item1: 15073}, 160 | {y: '2013 Q1', item1: 10687}, 161 | {y: '2013 Q2', item1: 8432} 162 | ], 163 | xkey: 'y', 164 | ykeys: ['item1'], 165 | labels: ['Item 1'], 166 | lineColors: ['#efefef'], 167 | lineWidth: 2, 168 | hideHover: 'auto', 169 | gridTextColor: "#fff", 170 | gridStrokeWidth: 0.4, 171 | pointSize: 4, 172 | pointStrokeColors: ["#efefef"], 173 | gridLineColor: "#efefef", 174 | gridTextFamily: "Open Sans", 175 | gridTextSize: 10 176 | }); 177 | 178 | //Donut Chart 179 | var donut = new Morris.Donut({ 180 | element: 'sales-chart', 181 | resize: true, 182 | colors: ["#3c8dbc", "#f56954", "#00a65a"], 183 | data: [ 184 | {label: "Download Sales", value: 12}, 185 | {label: "In-Store Sales", value: 30}, 186 | {label: "Mail-Order Sales", value: 20} 187 | ], 188 | hideHover: 'auto' 189 | }); 190 | 191 | //Fix for charts under tabs 192 | $('.box ul.nav a').on('shown.bs.tab', function () { 193 | area.redraw(); 194 | donut.redraw(); 195 | line.redraw(); 196 | }); 197 | 198 | /* The todo list plugin */ 199 | $(".todo-list").todolist({ 200 | onCheck: function (ele) { 201 | window.console.log("The element has been checked"); 202 | return ele; 203 | }, 204 | onUncheck: function (ele) { 205 | window.console.log("The element has been unchecked"); 206 | return ele; 207 | } 208 | }); 209 | 210 | }); 211 | -------------------------------------------------------------------------------- /assets/js/app.min.js: -------------------------------------------------------------------------------- 1 | /*! AdminLTE app.js 2 | * ================ 3 | * Main JS application file for AdminLTE v2. This file 4 | * should be included in all pages. It controls some layout 5 | * options and implements exclusive AdminLTE plugins. 6 | * 7 | * @Author Almsaeed Studio 8 | * @Support 9 | * @Email 10 | * @version 2.3.2 11 | * @license MIT 12 | */ 13 | function _init(){"use strict";$.AdminLTE.layout={activate:function(){var a=this;a.fix(),a.fixSidebar(),$(window,".wrapper").resize(function(){a.fix(),a.fixSidebar()})},fix:function(){var a=$(".main-header").outerHeight()+$(".main-footer").outerHeight(),b=$(window).height(),c=$(".sidebar").height();if($("body").hasClass("fixed"))$(".content-wrapper, .right-side").css("min-height",b-$(".main-footer").outerHeight());else{var d;b>=c?($(".content-wrapper, .right-side").css("min-height",b-a),d=b-a):($(".content-wrapper, .right-side").css("min-height",c),d=c);var e=$($.AdminLTE.options.controlSidebarOptions.selector);"undefined"!=typeof e&&e.height()>d&&$(".content-wrapper, .right-side").css("min-height",e.height())}},fixSidebar:function(){return $("body").hasClass("fixed")?("undefined"==typeof $.fn.slimScroll&&window.console&&window.console.error("Error: the fixed layout requires the slimscroll plugin!"),void($.AdminLTE.options.sidebarSlimScroll&&"undefined"!=typeof $.fn.slimScroll&&($(".sidebar").slimScroll({destroy:!0}).height("auto"),$(".sidebar").slimscroll({height:$(window).height()-$(".main-header").height()+"px",color:"rgba(0,0,0,0.2)",size:"3px"})))):void("undefined"!=typeof $.fn.slimScroll&&$(".sidebar").slimScroll({destroy:!0}).height("auto"))}},$.AdminLTE.pushMenu={activate:function(a){var b=$.AdminLTE.options.screenSizes;$(document).on("click",a,function(a){a.preventDefault(),$(window).width()>b.sm-1?$("body").hasClass("sidebar-collapse")?$("body").removeClass("sidebar-collapse").trigger("expanded.pushMenu"):$("body").addClass("sidebar-collapse").trigger("collapsed.pushMenu"):$("body").hasClass("sidebar-open")?$("body").removeClass("sidebar-open").removeClass("sidebar-collapse").trigger("collapsed.pushMenu"):$("body").addClass("sidebar-open").trigger("expanded.pushMenu")}),$(".content-wrapper").click(function(){$(window).width()<=b.sm-1&&$("body").hasClass("sidebar-open")&&$("body").removeClass("sidebar-open")}),($.AdminLTE.options.sidebarExpandOnHover||$("body").hasClass("fixed")&&$("body").hasClass("sidebar-mini"))&&this.expandOnHover()},expandOnHover:function(){var a=this,b=$.AdminLTE.options.screenSizes.sm-1;$(".main-sidebar").hover(function(){$("body").hasClass("sidebar-mini")&&$("body").hasClass("sidebar-collapse")&&$(window).width()>b&&a.expand()},function(){$("body").hasClass("sidebar-mini")&&$("body").hasClass("sidebar-expanded-on-hover")&&$(window).width()>b&&a.collapse()})},expand:function(){$("body").removeClass("sidebar-collapse").addClass("sidebar-expanded-on-hover")},collapse:function(){$("body").hasClass("sidebar-expanded-on-hover")&&$("body").removeClass("sidebar-expanded-on-hover").addClass("sidebar-collapse")}},$.AdminLTE.tree=function(a){var b=this,c=$.AdminLTE.options.animationSpeed;$(a).on("click","li a",function(a){var d=$(this),e=d.next();if(e.is(".treeview-menu")&&e.is(":visible")&&!$("body").hasClass("sidebar-collapse"))e.slideUp(c,function(){e.removeClass("menu-open")}),e.parent("li").removeClass("active");else if(e.is(".treeview-menu")&&!e.is(":visible")){var f=d.parents("ul").first(),g=f.find("ul:visible").slideUp(c);g.removeClass("menu-open");var h=d.parent("li");e.slideDown(c,function(){e.addClass("menu-open"),f.find("li.active").removeClass("active"),h.addClass("active"),b.layout.fix()})}e.is(".treeview-menu")&&a.preventDefault()})},$.AdminLTE.controlSidebar={activate:function(){var a=this,b=$.AdminLTE.options.controlSidebarOptions,c=$(b.selector),d=$(b.toggleBtnSelector);d.on("click",function(d){d.preventDefault(),c.hasClass("control-sidebar-open")||$("body").hasClass("control-sidebar-open")?a.close(c,b.slide):a.open(c,b.slide)});var e=$(".control-sidebar-bg");a._fix(e),$("body").hasClass("fixed")?a._fixForFixed(c):$(".content-wrapper, .right-side").height() .box-body, > .box-footer, > form >.box-body, > form > .box-footer");c.hasClass("collapsed-box")?(a.children(":first").removeClass(b.icons.open).addClass(b.icons.collapse),d.slideDown(b.animationSpeed,function(){c.removeClass("collapsed-box")})):(a.children(":first").removeClass(b.icons.collapse).addClass(b.icons.open),d.slideUp(b.animationSpeed,function(){c.addClass("collapsed-box")}))},remove:function(a){var b=a.parents(".box").first();b.slideUp(this.animationSpeed)}}}if("undefined"==typeof jQuery)throw new Error("AdminLTE requires jQuery");$.AdminLTE={},$.AdminLTE.options={navbarMenuSlimscroll:!0,navbarMenuSlimscrollWidth:"3px",navbarMenuHeight:"200px",animationSpeed:500,sidebarToggleSelector:"[data-toggle='offcanvas']",sidebarPushMenu:!0,sidebarSlimScroll:!0,sidebarExpandOnHover:!1,enableBoxRefresh:!0,enableBSToppltip:!0,BSTooltipSelector:"[data-toggle='tooltip']",enableFastclick:!0,enableControlSidebar:!0,controlSidebarOptions:{toggleBtnSelector:"[data-toggle='control-sidebar']",selector:".control-sidebar",slide:!0},enableBoxWidget:!0,boxWidgetOptions:{boxWidgetIcons:{collapse:"fa-minus",open:"fa-plus",remove:"fa-times"},boxWidgetSelectors:{remove:'[data-widget="remove"]',collapse:'[data-widget="collapse"]'}},directChat:{enable:!0,contactToggleSelector:'[data-widget="chat-pane-toggle"]'},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"},screenSizes:{xs:480,sm:768,md:992,lg:1200}},$(function(){"use strict";$("body").removeClass("hold-transition"),"undefined"!=typeof AdminLTEOptions&&$.extend(!0,$.AdminLTE.options,AdminLTEOptions);var a=$.AdminLTE.options;_init(),$.AdminLTE.layout.activate(),$.AdminLTE.tree(".sidebar"),a.enableControlSidebar&&$.AdminLTE.controlSidebar.activate(),a.navbarMenuSlimscroll&&"undefined"!=typeof $.fn.slimscroll&&$(".navbar .menu").slimscroll({height:a.navbarMenuHeight,alwaysVisible:!1,size:a.navbarMenuSlimscrollWidth}).css("width","100%"),a.sidebarPushMenu&&$.AdminLTE.pushMenu.activate(a.sidebarToggleSelector),a.enableBSToppltip&&$("body").tooltip({selector:a.BSTooltipSelector}),a.enableBoxWidget&&$.AdminLTE.boxWidget.activate(),a.enableFastclick&&"undefined"!=typeof FastClick&&FastClick.attach(document.body),a.directChat.enable&&$(document).on("click",a.directChat.contactToggleSelector,function(){var a=$(this).parents(".direct-chat").first();a.toggleClass("direct-chat-contacts-open")}),$('.btn-group[data-toggle="btn-toggle"]').each(function(){var a=$(this);$(this).find(".btn").on("click",function(b){a.find(".btn.active").removeClass("active"),$(this).addClass("active"),b.preventDefault()})})}),function(a){"use strict";a.fn.boxRefresh=function(b){function c(a){a.append(f),e.onLoadStart.call(a)}function d(a){a.find(f).remove(),e.onLoadDone.call(a)}var e=a.extend({trigger:".refresh-btn",source:"",onLoadStart:function(a){return a},onLoadDone:function(a){return a}},b),f=a('
');return this.each(function(){if(""===e.source)return void(window.console&&window.console.log("Please specify a source first - boxRefresh()"));var b=a(this),f=b.find(e.trigger).first();f.on("click",function(a){a.preventDefault(),c(b),b.find(".box-body").load(e.source,function(){d(b)})})})}}(jQuery),function(a){"use strict";a.fn.activateBox=function(){a.AdminLTE.boxWidget.activate(this)},a.fn.toggleBox=function(){var b=a(a.AdminLTE.boxWidget.selectors.collapse,this);a.AdminLTE.boxWidget.collapse(b)},a.fn.removeBox=function(){var b=a(a.AdminLTE.boxWidget.selectors.remove,this);a.AdminLTE.boxWidget.remove(b)}}(jQuery),function(a){"use strict";a.fn.todolist=function(b){var c=a.extend({onCheck:function(a){return a},onUncheck:function(a){return a}},b);return this.each(function(){"undefined"!=typeof a.fn.iCheck?(a("input",this).on("ifChecked",function(){var b=a(this).parents("li").first();b.toggleClass("done"),c.onCheck.call(b)}),a("input",this).on("ifUnchecked",function(){var b=a(this).parents("li").first();b.toggleClass("done"),c.onUncheck.call(b)})):a("input",this).on("change",function(){var b=a(this).parents("li").first();b.toggleClass("done"),a("input",b).is(":checked")?c.onCheck.call(b):c.onUncheck.call(b)})})}}(jQuery); -------------------------------------------------------------------------------- /assets/js/pages/dashboard2.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | 3 | 'use strict'; 4 | 5 | /* ChartJS 6 | * ------- 7 | * Here we will create a few charts using ChartJS 8 | */ 9 | 10 | //----------------------- 11 | //- MONTHLY SALES CHART - 12 | //----------------------- 13 | 14 | // Get context with jQuery - using jQuery's .get() method. 15 | var salesChartCanvas = $("#salesChart").get(0).getContext("2d"); 16 | // This will get the first returned node in the jQuery collection. 17 | var salesChart = new Chart(salesChartCanvas); 18 | 19 | var salesChartData = { 20 | labels: ["January", "February", "March", "April", "May", "June", "July"], 21 | datasets: [ 22 | { 23 | label: "Electronics", 24 | fillColor: "rgb(210, 214, 222)", 25 | strokeColor: "rgb(210, 214, 222)", 26 | pointColor: "rgb(210, 214, 222)", 27 | pointStrokeColor: "#c1c7d1", 28 | pointHighlightFill: "#fff", 29 | pointHighlightStroke: "rgb(220,220,220)", 30 | data: [65, 59, 80, 81, 56, 55, 40] 31 | }, 32 | { 33 | label: "Digital Goods", 34 | fillColor: "rgba(60,141,188,0.9)", 35 | strokeColor: "rgba(60,141,188,0.8)", 36 | pointColor: "#3b8bba", 37 | pointStrokeColor: "rgba(60,141,188,1)", 38 | pointHighlightFill: "#fff", 39 | pointHighlightStroke: "rgba(60,141,188,1)", 40 | data: [28, 48, 40, 19, 86, 27, 90] 41 | } 42 | ] 43 | }; 44 | 45 | var salesChartOptions = { 46 | //Boolean - If we should show the scale at all 47 | showScale: true, 48 | //Boolean - Whether grid lines are shown across the chart 49 | scaleShowGridLines: false, 50 | //String - Colour of the grid lines 51 | scaleGridLineColor: "rgba(0,0,0,.05)", 52 | //Number - Width of the grid lines 53 | scaleGridLineWidth: 1, 54 | //Boolean - Whether to show horizontal lines (except X axis) 55 | scaleShowHorizontalLines: true, 56 | //Boolean - Whether to show vertical lines (except Y axis) 57 | scaleShowVerticalLines: true, 58 | //Boolean - Whether the line is curved between points 59 | bezierCurve: true, 60 | //Number - Tension of the bezier curve between points 61 | bezierCurveTension: 0.3, 62 | //Boolean - Whether to show a dot for each point 63 | pointDot: false, 64 | //Number - Radius of each point dot in pixels 65 | pointDotRadius: 4, 66 | //Number - Pixel width of point dot stroke 67 | pointDotStrokeWidth: 1, 68 | //Number - amount extra to add to the radius to cater for hit detection outside the drawn point 69 | pointHitDetectionRadius: 20, 70 | //Boolean - Whether to show a stroke for datasets 71 | datasetStroke: true, 72 | //Number - Pixel width of dataset stroke 73 | datasetStrokeWidth: 2, 74 | //Boolean - Whether to fill the dataset with a color 75 | datasetFill: true, 76 | //String - A legend template 77 | legendTemplate: "
    -legend\"><% for (var i=0; i
  • \"><%=datasets[i].label%>
    • <%}%>
", 78 | //Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container 79 | maintainAspectRatio: true, 80 | //Boolean - whether to make the chart responsive to window resizing 81 | responsive: true 82 | }; 83 | 84 | //Create the line chart 85 | salesChart.Line(salesChartData, salesChartOptions); 86 | 87 | //--------------------------- 88 | //- END MONTHLY SALES CHART - 89 | //--------------------------- 90 | 91 | //------------- 92 | //- PIE CHART - 93 | //------------- 94 | // Get context with jQuery - using jQuery's .get() method. 95 | var pieChartCanvas = $("#pieChart").get(0).getContext("2d"); 96 | var pieChart = new Chart(pieChartCanvas); 97 | var PieData = [ 98 | { 99 | value: 700, 100 | color: "#f56954", 101 | highlight: "#f56954", 102 | label: "Chrome" 103 | }, 104 | { 105 | value: 500, 106 | color: "#00a65a", 107 | highlight: "#00a65a", 108 | label: "IE" 109 | }, 110 | { 111 | value: 400, 112 | color: "#f39c12", 113 | highlight: "#f39c12", 114 | label: "FireFox" 115 | }, 116 | { 117 | value: 600, 118 | color: "#00c0ef", 119 | highlight: "#00c0ef", 120 | label: "Safari" 121 | }, 122 | { 123 | value: 300, 124 | color: "#3c8dbc", 125 | highlight: "#3c8dbc", 126 | label: "Opera" 127 | }, 128 | { 129 | value: 100, 130 | color: "#d2d6de", 131 | highlight: "#d2d6de", 132 | label: "Navigator" 133 | } 134 | ]; 135 | var pieOptions = { 136 | //Boolean - Whether we should show a stroke on each segment 137 | segmentShowStroke: true, 138 | //String - The colour of each segment stroke 139 | segmentStrokeColor: "#fff", 140 | //Number - The width of each segment stroke 141 | segmentStrokeWidth: 1, 142 | //Number - The percentage of the chart that we cut out of the middle 143 | percentageInnerCutout: 50, // This is 0 for Pie charts 144 | //Number - Amount of animation steps 145 | animationSteps: 100, 146 | //String - Animation easing effect 147 | animationEasing: "easeOutBounce", 148 | //Boolean - Whether we animate the rotation of the Doughnut 149 | animateRotate: true, 150 | //Boolean - Whether we animate scaling the Doughnut from the centre 151 | animateScale: false, 152 | //Boolean - whether to make the chart responsive to window resizing 153 | responsive: true, 154 | // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container 155 | maintainAspectRatio: false, 156 | //String - A legend template 157 | legendTemplate: "
    -legend\"><% for (var i=0; i
  • \"><%if(segments[i].label){%><%=segments[i].label%><%}%>
    • <%}%>
", 158 | //String - A tooltip template 159 | tooltipTemplate: "<%=value %> <%=label%> users" 160 | }; 161 | //Create pie or douhnut chart 162 | // You can switch between pie and douhnut using the method below. 163 | pieChart.Doughnut(PieData, pieOptions); 164 | //----------------- 165 | //- END PIE CHART - 166 | //----------------- 167 | 168 | /* jVector Maps 169 | * ------------ 170 | * Create a world map with markers 171 | */ 172 | $('#world-map-markers').vectorMap({ 173 | map: 'world_mill_en', 174 | normalizeFunction: 'polynomial', 175 | hoverOpacity: 0.7, 176 | hoverColor: false, 177 | backgroundColor: 'transparent', 178 | regionStyle: { 179 | initial: { 180 | fill: 'rgba(210, 214, 222, 1)', 181 | "fill-opacity": 1, 182 | stroke: 'none', 183 | "stroke-width": 0, 184 | "stroke-opacity": 1 185 | }, 186 | hover: { 187 | "fill-opacity": 0.7, 188 | cursor: 'pointer' 189 | }, 190 | selected: { 191 | fill: 'yellow' 192 | }, 193 | selectedHover: {} 194 | }, 195 | markerStyle: { 196 | initial: { 197 | fill: '#00a65a', 198 | stroke: '#111' 199 | } 200 | }, 201 | markers: [ 202 | {latLng: [41.90, 12.45], name: 'Vatican City'}, 203 | {latLng: [43.73, 7.41], name: 'Monaco'}, 204 | {latLng: [-0.52, 166.93], name: 'Nauru'}, 205 | {latLng: [-8.51, 179.21], name: 'Tuvalu'}, 206 | {latLng: [43.93, 12.46], name: 'San Marino'}, 207 | {latLng: [47.14, 9.52], name: 'Liechtenstein'}, 208 | {latLng: [7.11, 171.06], name: 'Marshall Islands'}, 209 | {latLng: [17.3, -62.73], name: 'Saint Kitts and Nevis'}, 210 | {latLng: [3.2, 73.22], name: 'Maldives'}, 211 | {latLng: [35.88, 14.5], name: 'Malta'}, 212 | {latLng: [12.05, -61.75], name: 'Grenada'}, 213 | {latLng: [13.16, -61.23], name: 'Saint Vincent and the Grenadines'}, 214 | {latLng: [13.16, -59.55], name: 'Barbados'}, 215 | {latLng: [17.11, -61.85], name: 'Antigua and Barbuda'}, 216 | {latLng: [-4.61, 55.45], name: 'Seychelles'}, 217 | {latLng: [7.35, 134.46], name: 'Palau'}, 218 | {latLng: [42.5, 1.51], name: 'Andorra'}, 219 | {latLng: [14.01, -60.98], name: 'Saint Lucia'}, 220 | {latLng: [6.91, 158.18], name: 'Federated States of Micronesia'}, 221 | {latLng: [1.3, 103.8], name: 'Singapore'}, 222 | {latLng: [1.46, 173.03], name: 'Kiribati'}, 223 | {latLng: [-21.13, -175.2], name: 'Tonga'}, 224 | {latLng: [15.3, -61.38], name: 'Dominica'}, 225 | {latLng: [-20.2, 57.5], name: 'Mauritius'}, 226 | {latLng: [26.02, 50.55], name: 'Bahrain'}, 227 | {latLng: [0.33, 6.73], name: 'São Tomé and Príncipe'} 228 | ] 229 | }); 230 | 231 | /* SPARKLINE CHARTS 232 | * ---------------- 233 | * Create a inline charts with spark line 234 | */ 235 | 236 | //----------------- 237 | //- SPARKLINE BAR - 238 | //----------------- 239 | $('.sparkbar').each(function () { 240 | var $this = $(this); 241 | $this.sparkline('html', { 242 | type: 'bar', 243 | height: $this.data('height') ? $this.data('height') : '30', 244 | barColor: $this.data('color') 245 | }); 246 | }); 247 | 248 | //----------------- 249 | //- SPARKLINE PIE - 250 | //----------------- 251 | $('.sparkpie').each(function () { 252 | var $this = $(this); 253 | $this.sparkline('html', { 254 | type: 'pie', 255 | height: $this.data('height') ? $this.data('height') : '90', 256 | sliceColors: $this.data('color') 257 | }); 258 | }); 259 | 260 | //------------------ 261 | //- SPARKLINE LINE - 262 | //------------------ 263 | $('.sparkline').each(function () { 264 | var $this = $(this); 265 | $this.sparkline('html', { 266 | type: 'line', 267 | height: $this.data('height') ? $this.data('height') : '90', 268 | width: '100%', 269 | lineColor: $this.data('linecolor'), 270 | fillColor: $this.data('fillcolor'), 271 | spotColor: $this.data('spotcolor') 272 | }); 273 | }); 274 | }); 275 | -------------------------------------------------------------------------------- /assets/js/demo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * AdminLTE Demo Menu 3 | * ------------------ 4 | * You should not use this file in production. 5 | * This file is for demo purposes only. 6 | */ 7 | (function ($, AdminLTE) { 8 | 9 | "use strict"; 10 | 11 | /** 12 | * List of all the available skins 13 | * 14 | * @type Array 15 | */ 16 | var my_skins = [ 17 | "skin-blue", 18 | "skin-black", 19 | "skin-red", 20 | "skin-yellow", 21 | "skin-purple", 22 | "skin-green", 23 | "skin-blue-light", 24 | "skin-black-light", 25 | "skin-red-light", 26 | "skin-yellow-light", 27 | "skin-purple-light", 28 | "skin-green-light" 29 | ]; 30 | 31 | //Create the new tab 32 | var tab_pane = $("
", { 33 | "id": "control-sidebar-theme-demo-options-tab", 34 | "class": "tab-pane active" 35 | }); 36 | 37 | //Create the tab button 38 | var tab_button = $("
  • ", {"class": "active"}) 39 | .html("" 40 | + "" 41 | + ""); 42 | 43 | //Add the tab button to the right sidebar tabs 44 | $("[href='#control-sidebar-home-tab']") 45 | .parent() 46 | .before(tab_button); 47 | 48 | //Create the menu 49 | var demo_settings = $("
    "); 50 | 51 | //Layout options 52 | demo_settings.append( 53 | "

    " 54 | + "Layout Options" 55 | + "

    " 56 | //Fixed layout 57 | + "
    " 58 | + "" 62 | + "

    Activate the fixed layout. You can't use fixed and boxed layouts together

    " 63 | + "
    " 64 | //Boxed layout 65 | + "
    " 66 | + "" 70 | + "

    Activate the boxed layout

    " 71 | + "
    " 72 | //Sidebar Toggle 73 | + "
    " 74 | + "" 78 | + "

    Toggle the left sidebar's state (open or collapse)

    " 79 | + "
    " 80 | //Sidebar mini expand on hover toggle 81 | + "
    " 82 | + "" 86 | + "

    Let the sidebar mini expand on hover

    " 87 | + "
    " 88 | //Control Sidebar Toggle 89 | + "
    " 90 | + "" 94 | + "

    Toggle between slide over content and push content effects

    " 95 | + "
    " 96 | //Control Sidebar Skin Toggle 97 | + "
    " 98 | + "" 102 | + "

    Toggle between dark and light skins for the right sidebar

    " 103 | + "
    " 104 | ); 105 | var skins_list = $("
      ", {"class": 'list-unstyled clearfix'}); 106 | 107 | //Dark sidebar skins 108 | var skin_blue = 109 | $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) 110 | .append("" 111 | + "
      " 112 | + "
      " 113 | + "      " 114 | + "

      Blue

      "); 115 | skins_list.append(skin_blue); 116 | var skin_black = 117 | $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) 118 | .append("" 119 | + "
      " 120 | + "
      " 121 | + "      " 122 | + "

      Black

      "); 123 | skins_list.append(skin_black); 124 | var skin_purple = 125 | $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) 126 | .append("" 127 | + "
      " 128 | + "
      " 129 | + "      " 130 | + "

      Purple

      "); 131 | skins_list.append(skin_purple); 132 | var skin_green = 133 | $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) 134 | .append("" 135 | + "
      " 136 | + "
      " 137 | + "      " 138 | + "

      Green

      "); 139 | skins_list.append(skin_green); 140 | var skin_red = 141 | $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) 142 | .append("" 143 | + "
      " 144 | + "
      " 145 | + "      " 146 | + "

      Red

      "); 147 | skins_list.append(skin_red); 148 | var skin_yellow = 149 | $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) 150 | .append("" 151 | + "
      " 152 | + "
      " 153 | + "      " 154 | + "

      Yellow

      "); 155 | skins_list.append(skin_yellow); 156 | 157 | //Light sidebar skins 158 | var skin_blue_light = 159 | $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) 160 | .append("" 161 | + "
      " 162 | + "
      " 163 | + "      " 164 | + "

      Blue Light

      "); 165 | skins_list.append(skin_blue_light); 166 | var skin_black_light = 167 | $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) 168 | .append("" 169 | + "
      " 170 | + "
      " 171 | + "      " 172 | + "

      Black Light

      "); 173 | skins_list.append(skin_black_light); 174 | var skin_purple_light = 175 | $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) 176 | .append("" 177 | + "
      " 178 | + "
      " 179 | + "      " 180 | + "

      Purple Light

      "); 181 | skins_list.append(skin_purple_light); 182 | var skin_green_light = 183 | $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) 184 | .append("" 185 | + "
      " 186 | + "
      " 187 | + "      " 188 | + "

      Green Light

      "); 189 | skins_list.append(skin_green_light); 190 | var skin_red_light = 191 | $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) 192 | .append("" 193 | + "
      " 194 | + "
      " 195 | + "      " 196 | + "

      Red Light

      "); 197 | skins_list.append(skin_red_light); 198 | var skin_yellow_light = 199 | $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) 200 | .append("" 201 | + "
      " 202 | + "
      " 203 | + "      " 204 | + "

      Yellow Light

      "); 205 | skins_list.append(skin_yellow_light); 206 | 207 | demo_settings.append("

      Skins

      "); 208 | demo_settings.append(skins_list); 209 | 210 | tab_pane.append(demo_settings); 211 | $("#control-sidebar-home-tab").after(tab_pane); 212 | 213 | setup(); 214 | 215 | /** 216 | * Toggles layout classes 217 | * 218 | * @param String cls the layout class to toggle 219 | * @returns void 220 | */ 221 | function change_layout(cls) { 222 | $("body").toggleClass(cls); 223 | AdminLTE.layout.fixSidebar(); 224 | //Fix the problem with right sidebar and layout boxed 225 | if (cls == "layout-boxed") 226 | AdminLTE.controlSidebar._fix($(".control-sidebar-bg")); 227 | if ($('body').hasClass('fixed') && cls == 'fixed') { 228 | AdminLTE.pushMenu.expandOnHover(); 229 | AdminLTE.layout.activate(); 230 | } 231 | AdminLTE.controlSidebar._fix($(".control-sidebar-bg")); 232 | AdminLTE.controlSidebar._fix($(".control-sidebar")); 233 | } 234 | 235 | /** 236 | * Replaces the old skin with the new skin 237 | * @param String cls the new skin class 238 | * @returns Boolean false to prevent link's default action 239 | */ 240 | function change_skin(cls) { 241 | $.each(my_skins, function (i) { 242 | $("body").removeClass(my_skins[i]); 243 | }); 244 | 245 | $("body").addClass(cls); 246 | store('skin', cls); 247 | return false; 248 | } 249 | 250 | /** 251 | * Store a new settings in the browser 252 | * 253 | * @param String name Name of the setting 254 | * @param String val Value of the setting 255 | * @returns void 256 | */ 257 | function store(name, val) { 258 | if (typeof (Storage) !== "undefined") { 259 | localStorage.setItem(name, val); 260 | } else { 261 | window.alert('Please use a modern browser to properly view this template!'); 262 | } 263 | } 264 | 265 | /** 266 | * Get a prestored setting 267 | * 268 | * @param String name Name of of the setting 269 | * @returns String The value of the setting | null 270 | */ 271 | function get(name) { 272 | if (typeof (Storage) !== "undefined") { 273 | return localStorage.getItem(name); 274 | } else { 275 | window.alert('Please use a modern browser to properly view this template!'); 276 | } 277 | } 278 | 279 | /** 280 | * Retrieve default settings and apply them to the template 281 | * 282 | * @returns void 283 | */ 284 | function setup() { 285 | var tmp = get('skin'); 286 | if (tmp && $.inArray(tmp, my_skins)) 287 | change_skin(tmp); 288 | 289 | //Add the change skin listener 290 | $("[data-skin]").on('click', function (e) { 291 | e.preventDefault(); 292 | change_skin($(this).data('skin')); 293 | }); 294 | 295 | //Add the layout manager 296 | $("[data-layout]").on('click', function () { 297 | change_layout($(this).data('layout')); 298 | }); 299 | 300 | $("[data-controlsidebar]").on('click', function () { 301 | change_layout($(this).data('controlsidebar')); 302 | var slide = !AdminLTE.options.controlSidebarOptions.slide; 303 | AdminLTE.options.controlSidebarOptions.slide = slide; 304 | if (!slide) 305 | $('.control-sidebar').removeClass('control-sidebar-open'); 306 | }); 307 | 308 | $("[data-sidebarskin='toggle']").on('click', function () { 309 | var sidebar = $(".control-sidebar"); 310 | if (sidebar.hasClass("control-sidebar-dark")) { 311 | sidebar.removeClass("control-sidebar-dark") 312 | sidebar.addClass("control-sidebar-light") 313 | } else { 314 | sidebar.removeClass("control-sidebar-light") 315 | sidebar.addClass("control-sidebar-dark") 316 | } 317 | }); 318 | 319 | $("[data-enable='expandOnHover']").on('click', function () { 320 | $(this).attr('disabled', true); 321 | AdminLTE.pushMenu.expandOnHover(); 322 | if (!$('body').hasClass('sidebar-collapse')) 323 | $("[data-layout='sidebar-collapse']").click(); 324 | }); 325 | 326 | // Reset options 327 | if ($('body').hasClass('fixed')) { 328 | $("[data-layout='fixed']").attr('checked', 'checked'); 329 | } 330 | if ($('body').hasClass('layout-boxed')) { 331 | $("[data-layout='layout-boxed']").attr('checked', 'checked'); 332 | } 333 | if ($('body').hasClass('sidebar-collapse')) { 334 | $("[data-layout='sidebar-collapse']").attr('checked', 'checked'); 335 | } 336 | 337 | } 338 | })(jQuery, $.AdminLTE); 339 | -------------------------------------------------------------------------------- /assets/js/app.js: -------------------------------------------------------------------------------- 1 | /*! AdminLTE app.js 2 | * ================ 3 | * Main JS application file for AdminLTE v2. This file 4 | * should be included in all pages. It controls some layout 5 | * options and implements exclusive AdminLTE plugins. 6 | * 7 | * @Author Almsaeed Studio 8 | * @Support 9 | * @Email 10 | * @version 2.3.2 11 | * @license MIT 12 | */ 13 | 14 | //Make sure jQuery has been loaded before app.js 15 | if (typeof jQuery === "undefined") { 16 | throw new Error("AdminLTE requires jQuery"); 17 | } 18 | 19 | /* AdminLTE 20 | * 21 | * @type Object 22 | * @description $.AdminLTE is the main object for the template's app. 23 | * It's used for implementing functions and options related 24 | * to the template. Keeping everything wrapped in an object 25 | * prevents conflict with other plugins and is a better 26 | * way to organize our code. 27 | */ 28 | $.AdminLTE = {}; 29 | 30 | /* -------------------- 31 | * - AdminLTE Options - 32 | * -------------------- 33 | * Modify these options to suit your implementation 34 | */ 35 | $.AdminLTE.options = { 36 | //Add slimscroll to navbar menus 37 | //This requires you to load the slimscroll plugin 38 | //in every page before app.js 39 | navbarMenuSlimscroll: true, 40 | navbarMenuSlimscrollWidth: "3px", //The width of the scroll bar 41 | navbarMenuHeight: "200px", //The height of the inner menu 42 | //General animation speed for JS animated elements such as box collapse/expand and 43 | //sidebar treeview slide up/down. This options accepts an integer as milliseconds, 44 | //'fast', 'normal', or 'slow' 45 | animationSpeed: 500, 46 | //Sidebar push menu toggle button selector 47 | sidebarToggleSelector: "[data-toggle='offcanvas']", 48 | //Activate sidebar push menu 49 | sidebarPushMenu: true, 50 | //Activate sidebar slimscroll if the fixed layout is set (requires SlimScroll Plugin) 51 | sidebarSlimScroll: true, 52 | //Enable sidebar expand on hover effect for sidebar mini 53 | //This option is forced to true if both the fixed layout and sidebar mini 54 | //are used together 55 | sidebarExpandOnHover: false, 56 | //BoxRefresh Plugin 57 | enableBoxRefresh: true, 58 | //Bootstrap.js tooltip 59 | enableBSToppltip: true, 60 | BSTooltipSelector: "[data-toggle='tooltip']", 61 | //Enable Fast Click. Fastclick.js creates a more 62 | //native touch experience with touch devices. If you 63 | //choose to enable the plugin, make sure you load the script 64 | //before AdminLTE's app.js 65 | enableFastclick: true, 66 | //Control Sidebar Options 67 | enableControlSidebar: true, 68 | controlSidebarOptions: { 69 | //Which button should trigger the open/close event 70 | toggleBtnSelector: "[data-toggle='control-sidebar']", 71 | //The sidebar selector 72 | selector: ".control-sidebar", 73 | //Enable slide over content 74 | slide: true 75 | }, 76 | //Box Widget Plugin. Enable this plugin 77 | //to allow boxes to be collapsed and/or removed 78 | enableBoxWidget: true, 79 | //Box Widget plugin options 80 | boxWidgetOptions: { 81 | boxWidgetIcons: { 82 | //Collapse icon 83 | collapse: 'fa-minus', 84 | //Open icon 85 | open: 'fa-plus', 86 | //Remove icon 87 | remove: 'fa-times' 88 | }, 89 | boxWidgetSelectors: { 90 | //Remove button selector 91 | remove: '[data-widget="remove"]', 92 | //Collapse button selector 93 | collapse: '[data-widget="collapse"]' 94 | } 95 | }, 96 | //Direct Chat plugin options 97 | directChat: { 98 | //Enable direct chat by default 99 | enable: true, 100 | //The button to open and close the chat contacts pane 101 | contactToggleSelector: '[data-widget="chat-pane-toggle"]' 102 | }, 103 | //Define the set of colors to use globally around the website 104 | colors: { 105 | lightBlue: "#3c8dbc", 106 | red: "#f56954", 107 | green: "#00a65a", 108 | aqua: "#00c0ef", 109 | yellow: "#f39c12", 110 | blue: "#0073b7", 111 | navy: "#001F3F", 112 | teal: "#39CCCC", 113 | olive: "#3D9970", 114 | lime: "#01FF70", 115 | orange: "#FF851B", 116 | fuchsia: "#F012BE", 117 | purple: "#8E24AA", 118 | maroon: "#D81B60", 119 | black: "#222222", 120 | gray: "#d2d6de" 121 | }, 122 | //The standard screen sizes that bootstrap uses. 123 | //If you change these in the variables.less file, change 124 | //them here too. 125 | screenSizes: { 126 | xs: 480, 127 | sm: 768, 128 | md: 992, 129 | lg: 1200 130 | } 131 | }; 132 | 133 | /* ------------------ 134 | * - Implementation - 135 | * ------------------ 136 | * The next block of code implements AdminLTE's 137 | * functions and plugins as specified by the 138 | * options above. 139 | */ 140 | $(function () { 141 | "use strict"; 142 | 143 | //Fix for IE page transitions 144 | $("body").removeClass("hold-transition"); 145 | 146 | //Extend options if external options exist 147 | if (typeof AdminLTEOptions !== "undefined") { 148 | $.extend(true, 149 | $.AdminLTE.options, 150 | AdminLTEOptions); 151 | } 152 | 153 | //Easy access to options 154 | var o = $.AdminLTE.options; 155 | 156 | //Set up the object 157 | _init(); 158 | 159 | //Activate the layout maker 160 | $.AdminLTE.layout.activate(); 161 | 162 | //Enable sidebar tree view controls 163 | $.AdminLTE.tree('.sidebar'); 164 | 165 | //Enable control sidebar 166 | if (o.enableControlSidebar) { 167 | $.AdminLTE.controlSidebar.activate(); 168 | } 169 | 170 | //Add slimscroll to navbar dropdown 171 | if (o.navbarMenuSlimscroll && typeof $.fn.slimscroll != 'undefined') { 172 | $(".navbar .menu").slimscroll({ 173 | height: o.navbarMenuHeight, 174 | alwaysVisible: false, 175 | size: o.navbarMenuSlimscrollWidth 176 | }).css("width", "100%"); 177 | } 178 | 179 | //Activate sidebar push menu 180 | if (o.sidebarPushMenu) { 181 | $.AdminLTE.pushMenu.activate(o.sidebarToggleSelector); 182 | } 183 | 184 | //Activate Bootstrap tooltip 185 | if (o.enableBSToppltip) { 186 | $('body').tooltip({ 187 | selector: o.BSTooltipSelector 188 | }); 189 | } 190 | 191 | //Activate box widget 192 | if (o.enableBoxWidget) { 193 | $.AdminLTE.boxWidget.activate(); 194 | } 195 | 196 | //Activate fast click 197 | if (o.enableFastclick && typeof FastClick != 'undefined') { 198 | FastClick.attach(document.body); 199 | } 200 | 201 | //Activate direct chat widget 202 | if (o.directChat.enable) { 203 | $(document).on('click', o.directChat.contactToggleSelector, function () { 204 | var box = $(this).parents('.direct-chat').first(); 205 | box.toggleClass('direct-chat-contacts-open'); 206 | }); 207 | } 208 | 209 | /* 210 | * INITIALIZE BUTTON TOGGLE 211 | * ------------------------ 212 | */ 213 | $('.btn-group[data-toggle="btn-toggle"]').each(function () { 214 | var group = $(this); 215 | $(this).find(".btn").on('click', function (e) { 216 | group.find(".btn.active").removeClass("active"); 217 | $(this).addClass("active"); 218 | e.preventDefault(); 219 | }); 220 | 221 | }); 222 | }); 223 | 224 | /* ---------------------------------- 225 | * - Initialize the AdminLTE Object - 226 | * ---------------------------------- 227 | * All AdminLTE functions are implemented below. 228 | */ 229 | function _init() { 230 | 'use strict'; 231 | /* Layout 232 | * ====== 233 | * Fixes the layout height in case min-height fails. 234 | * 235 | * @type Object 236 | * @usage $.AdminLTE.layout.activate() 237 | * $.AdminLTE.layout.fix() 238 | * $.AdminLTE.layout.fixSidebar() 239 | */ 240 | $.AdminLTE.layout = { 241 | activate: function () { 242 | var _this = this; 243 | _this.fix(); 244 | _this.fixSidebar(); 245 | $(window, ".wrapper").resize(function () { 246 | _this.fix(); 247 | _this.fixSidebar(); 248 | }); 249 | }, 250 | fix: function () { 251 | //Get window height and the wrapper height 252 | var neg = $('.main-header').outerHeight() + $('.main-footer').outerHeight(); 253 | var window_height = $(window).height(); 254 | var sidebar_height = $(".sidebar").height(); 255 | //Set the min-height of the content and sidebar based on the 256 | //the height of the document. 257 | if ($("body").hasClass("fixed")) { 258 | $(".content-wrapper, .right-side").css('min-height', window_height - $('.main-footer').outerHeight()); 259 | } else { 260 | var postSetWidth; 261 | if (window_height >= sidebar_height) { 262 | $(".content-wrapper, .right-side").css('min-height', window_height - neg); 263 | postSetWidth = window_height - neg; 264 | } else { 265 | $(".content-wrapper, .right-side").css('min-height', sidebar_height); 266 | postSetWidth = sidebar_height; 267 | } 268 | 269 | //Fix for the control sidebar height 270 | var controlSidebar = $($.AdminLTE.options.controlSidebarOptions.selector); 271 | if (typeof controlSidebar !== "undefined") { 272 | if (controlSidebar.height() > postSetWidth) 273 | $(".content-wrapper, .right-side").css('min-height', controlSidebar.height()); 274 | } 275 | 276 | } 277 | }, 278 | fixSidebar: function () { 279 | //Make sure the body tag has the .fixed class 280 | if (!$("body").hasClass("fixed")) { 281 | if (typeof $.fn.slimScroll != 'undefined') { 282 | $(".sidebar").slimScroll({destroy: true}).height("auto"); 283 | } 284 | return; 285 | } else if (typeof $.fn.slimScroll == 'undefined' && window.console) { 286 | window.console.error("Error: the fixed layout requires the slimscroll plugin!"); 287 | } 288 | //Enable slimscroll for fixed layout 289 | if ($.AdminLTE.options.sidebarSlimScroll) { 290 | if (typeof $.fn.slimScroll != 'undefined') { 291 | //Destroy if it exists 292 | $(".sidebar").slimScroll({destroy: true}).height("auto"); 293 | //Add slimscroll 294 | $(".sidebar").slimscroll({ 295 | height: ($(window).height() - $(".main-header").height()) + "px", 296 | color: "rgba(0,0,0,0.2)", 297 | size: "3px" 298 | }); 299 | } 300 | } 301 | } 302 | }; 303 | 304 | /* PushMenu() 305 | * ========== 306 | * Adds the push menu functionality to the sidebar. 307 | * 308 | * @type Function 309 | * @usage: $.AdminLTE.pushMenu("[data-toggle='offcanvas']") 310 | */ 311 | $.AdminLTE.pushMenu = { 312 | activate: function (toggleBtn) { 313 | //Get the screen sizes 314 | var screenSizes = $.AdminLTE.options.screenSizes; 315 | 316 | //Enable sidebar toggle 317 | $(document).on('click', toggleBtn, function (e) { 318 | e.preventDefault(); 319 | 320 | //Enable sidebar push menu 321 | if ($(window).width() > (screenSizes.sm - 1)) { 322 | if ($("body").hasClass('sidebar-collapse')) { 323 | $("body").removeClass('sidebar-collapse').trigger('expanded.pushMenu'); 324 | } else { 325 | $("body").addClass('sidebar-collapse').trigger('collapsed.pushMenu'); 326 | } 327 | } 328 | //Handle sidebar push menu for small screens 329 | else { 330 | if ($("body").hasClass('sidebar-open')) { 331 | $("body").removeClass('sidebar-open').removeClass('sidebar-collapse').trigger('collapsed.pushMenu'); 332 | } else { 333 | $("body").addClass('sidebar-open').trigger('expanded.pushMenu'); 334 | } 335 | } 336 | }); 337 | 338 | $(".content-wrapper").click(function () { 339 | //Enable hide menu when clicking on the content-wrapper on small screens 340 | if ($(window).width() <= (screenSizes.sm - 1) && $("body").hasClass("sidebar-open")) { 341 | $("body").removeClass('sidebar-open'); 342 | } 343 | }); 344 | 345 | //Enable expand on hover for sidebar mini 346 | if ($.AdminLTE.options.sidebarExpandOnHover 347 | || ($('body').hasClass('fixed') 348 | && $('body').hasClass('sidebar-mini'))) { 349 | this.expandOnHover(); 350 | } 351 | }, 352 | expandOnHover: function () { 353 | var _this = this; 354 | var screenWidth = $.AdminLTE.options.screenSizes.sm - 1; 355 | //Expand sidebar on hover 356 | $('.main-sidebar').hover(function () { 357 | if ($('body').hasClass('sidebar-mini') 358 | && $("body").hasClass('sidebar-collapse') 359 | && $(window).width() > screenWidth) { 360 | _this.expand(); 361 | } 362 | }, function () { 363 | if ($('body').hasClass('sidebar-mini') 364 | && $('body').hasClass('sidebar-expanded-on-hover') 365 | && $(window).width() > screenWidth) { 366 | _this.collapse(); 367 | } 368 | }); 369 | }, 370 | expand: function () { 371 | $("body").removeClass('sidebar-collapse').addClass('sidebar-expanded-on-hover'); 372 | }, 373 | collapse: function () { 374 | if ($('body').hasClass('sidebar-expanded-on-hover')) { 375 | $('body').removeClass('sidebar-expanded-on-hover').addClass('sidebar-collapse'); 376 | } 377 | } 378 | }; 379 | 380 | /* Tree() 381 | * ====== 382 | * Converts the sidebar into a multilevel 383 | * tree view menu. 384 | * 385 | * @type Function 386 | * @Usage: $.AdminLTE.tree('.sidebar') 387 | */ 388 | $.AdminLTE.tree = function (menu) { 389 | var _this = this; 390 | var animationSpeed = $.AdminLTE.options.animationSpeed; 391 | $(menu).on('click', 'li a', function (e) { 392 | //Get the clicked link and the next element 393 | var $this = $(this); 394 | var checkElement = $this.next(); 395 | 396 | //Check if the next element is a menu and is visible 397 | if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible')) && (!$('body').hasClass('sidebar-collapse'))) { 398 | //Close the menu 399 | checkElement.slideUp(animationSpeed, function () { 400 | checkElement.removeClass('menu-open'); 401 | //Fix the layout in case the sidebar stretches over the height of the window 402 | //_this.layout.fix(); 403 | }); 404 | checkElement.parent("li").removeClass("active"); 405 | } 406 | //If the menu is not visible 407 | else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) { 408 | //Get the parent menu 409 | var parent = $this.parents('ul').first(); 410 | //Close all open menus within the parent 411 | var ul = parent.find('ul:visible').slideUp(animationSpeed); 412 | //Remove the menu-open class from the parent 413 | ul.removeClass('menu-open'); 414 | //Get the parent li 415 | var parent_li = $this.parent("li"); 416 | 417 | //Open the target menu and add the menu-open class 418 | checkElement.slideDown(animationSpeed, function () { 419 | //Add the class active to the parent li 420 | checkElement.addClass('menu-open'); 421 | parent.find('li.active').removeClass('active'); 422 | parent_li.addClass('active'); 423 | //Fix the layout in case the sidebar stretches over the height of the window 424 | _this.layout.fix(); 425 | }); 426 | } 427 | //if this isn't a link, prevent the page from being redirected 428 | if (checkElement.is('.treeview-menu')) { 429 | e.preventDefault(); 430 | } 431 | }); 432 | }; 433 | 434 | /* ControlSidebar 435 | * ============== 436 | * Adds functionality to the right sidebar 437 | * 438 | * @type Object 439 | * @usage $.AdminLTE.controlSidebar.activate(options) 440 | */ 441 | $.AdminLTE.controlSidebar = { 442 | //instantiate the object 443 | activate: function () { 444 | //Get the object 445 | var _this = this; 446 | //Update options 447 | var o = $.AdminLTE.options.controlSidebarOptions; 448 | //Get the sidebar 449 | var sidebar = $(o.selector); 450 | //The toggle button 451 | var btn = $(o.toggleBtnSelector); 452 | 453 | //Listen to the click event 454 | btn.on('click', function (e) { 455 | e.preventDefault(); 456 | //If the sidebar is not open 457 | if (!sidebar.hasClass('control-sidebar-open') 458 | && !$('body').hasClass('control-sidebar-open')) { 459 | //Open the sidebar 460 | _this.open(sidebar, o.slide); 461 | } else { 462 | _this.close(sidebar, o.slide); 463 | } 464 | }); 465 | 466 | //If the body has a boxed layout, fix the sidebar bg position 467 | var bg = $(".control-sidebar-bg"); 468 | _this._fix(bg); 469 | 470 | //If the body has a fixed layout, make the control sidebar fixed 471 | if ($('body').hasClass('fixed')) { 472 | _this._fixForFixed(sidebar); 473 | } else { 474 | //If the content height is less than the sidebar's height, force max height 475 | if ($('.content-wrapper, .right-side').height() < sidebar.height()) { 476 | _this._fixForContent(sidebar); 477 | } 478 | } 479 | }, 480 | //Open the control sidebar 481 | open: function (sidebar, slide) { 482 | //Slide over content 483 | if (slide) { 484 | sidebar.addClass('control-sidebar-open'); 485 | } else { 486 | //Push the content by adding the open class to the body instead 487 | //of the sidebar itself 488 | $('body').addClass('control-sidebar-open'); 489 | } 490 | }, 491 | //Close the control sidebar 492 | close: function (sidebar, slide) { 493 | if (slide) { 494 | sidebar.removeClass('control-sidebar-open'); 495 | } else { 496 | $('body').removeClass('control-sidebar-open'); 497 | } 498 | }, 499 | _fix: function (sidebar) { 500 | var _this = this; 501 | if ($("body").hasClass('layout-boxed')) { 502 | sidebar.css('position', 'absolute'); 503 | sidebar.height($(".wrapper").height()); 504 | $(window).resize(function () { 505 | _this._fix(sidebar); 506 | }); 507 | } else { 508 | sidebar.css({ 509 | 'position': 'fixed', 510 | 'height': 'auto' 511 | }); 512 | } 513 | }, 514 | _fixForFixed: function (sidebar) { 515 | sidebar.css({ 516 | 'position': 'fixed', 517 | 'max-height': '100%', 518 | 'overflow': 'auto', 519 | 'padding-bottom': '50px' 520 | }); 521 | }, 522 | _fixForContent: function (sidebar) { 523 | $(".content-wrapper, .right-side").css('min-height', sidebar.height()); 524 | } 525 | }; 526 | 527 | /* BoxWidget 528 | * ========= 529 | * BoxWidget is a plugin to handle collapsing and 530 | * removing boxes from the screen. 531 | * 532 | * @type Object 533 | * @usage $.AdminLTE.boxWidget.activate() 534 | * Set all your options in the main $.AdminLTE.options object 535 | */ 536 | $.AdminLTE.boxWidget = { 537 | selectors: $.AdminLTE.options.boxWidgetOptions.boxWidgetSelectors, 538 | icons: $.AdminLTE.options.boxWidgetOptions.boxWidgetIcons, 539 | animationSpeed: $.AdminLTE.options.animationSpeed, 540 | activate: function (_box) { 541 | var _this = this; 542 | if (!_box) { 543 | _box = document; // activate all boxes per default 544 | } 545 | //Listen for collapse event triggers 546 | $(_box).on('click', _this.selectors.collapse, function (e) { 547 | e.preventDefault(); 548 | _this.collapse($(this)); 549 | }); 550 | 551 | //Listen for remove event triggers 552 | $(_box).on('click', _this.selectors.remove, function (e) { 553 | e.preventDefault(); 554 | _this.remove($(this)); 555 | }); 556 | }, 557 | collapse: function (element) { 558 | var _this = this; 559 | //Find the box parent 560 | var box = element.parents(".box").first(); 561 | //Find the body and the footer 562 | var box_content = box.find("> .box-body, > .box-footer, > form >.box-body, > form > .box-footer"); 563 | if (!box.hasClass("collapsed-box")) { 564 | //Convert minus into plus 565 | element.children(":first") 566 | .removeClass(_this.icons.collapse) 567 | .addClass(_this.icons.open); 568 | //Hide the content 569 | box_content.slideUp(_this.animationSpeed, function () { 570 | box.addClass("collapsed-box"); 571 | }); 572 | } else { 573 | //Convert plus into minus 574 | element.children(":first") 575 | .removeClass(_this.icons.open) 576 | .addClass(_this.icons.collapse); 577 | //Show the content 578 | box_content.slideDown(_this.animationSpeed, function () { 579 | box.removeClass("collapsed-box"); 580 | }); 581 | } 582 | }, 583 | remove: function (element) { 584 | //Find the box parent 585 | var box = element.parents(".box").first(); 586 | box.slideUp(this.animationSpeed); 587 | } 588 | }; 589 | } 590 | 591 | /* ------------------ 592 | * - Custom Plugins - 593 | * ------------------ 594 | * All custom plugins are defined below. 595 | */ 596 | 597 | /* 598 | * BOX REFRESH BUTTON 599 | * ------------------ 600 | * This is a custom plugin to use with the component BOX. It allows you to add 601 | * a refresh button to the box. It converts the box's state to a loading state. 602 | * 603 | * @type plugin 604 | * @usage $("#box-widget").boxRefresh( options ); 605 | */ 606 | (function ($) { 607 | 608 | "use strict"; 609 | 610 | $.fn.boxRefresh = function (options) { 611 | 612 | // Render options 613 | var settings = $.extend({ 614 | //Refresh button selector 615 | trigger: ".refresh-btn", 616 | //File source to be loaded (e.g: ajax/src.php) 617 | source: "", 618 | //Callbacks 619 | onLoadStart: function (box) { 620 | return box; 621 | }, //Right after the button has been clicked 622 | onLoadDone: function (box) { 623 | return box; 624 | } //When the source has been loaded 625 | 626 | }, options); 627 | 628 | //The overlay 629 | var overlay = $('
      '); 630 | 631 | return this.each(function () { 632 | //if a source is specified 633 | if (settings.source === "") { 634 | if (window.console) { 635 | window.console.log("Please specify a source first - boxRefresh()"); 636 | } 637 | return; 638 | } 639 | //the box 640 | var box = $(this); 641 | //the button 642 | var rBtn = box.find(settings.trigger).first(); 643 | 644 | //On trigger click 645 | rBtn.on('click', function (e) { 646 | e.preventDefault(); 647 | //Add loading overlay 648 | start(box); 649 | 650 | //Perform ajax call 651 | box.find(".box-body").load(settings.source, function () { 652 | done(box); 653 | }); 654 | }); 655 | }); 656 | 657 | function start(box) { 658 | //Add overlay and loading img 659 | box.append(overlay); 660 | 661 | settings.onLoadStart.call(box); 662 | } 663 | 664 | function done(box) { 665 | //Remove overlay and loading img 666 | box.find(overlay).remove(); 667 | 668 | settings.onLoadDone.call(box); 669 | } 670 | 671 | }; 672 | 673 | })(jQuery); 674 | 675 | /* 676 | * EXPLICIT BOX CONTROLS 677 | * ----------------------- 678 | * This is a custom plugin to use with the component BOX. It allows you to activate 679 | * a box inserted in the DOM after the app.js was loaded, toggle and remove box. 680 | * 681 | * @type plugin 682 | * @usage $("#box-widget").activateBox(); 683 | * @usage $("#box-widget").toggleBox(); 684 | * @usage $("#box-widget").removeBox(); 685 | */ 686 | (function ($) { 687 | 688 | 'use strict'; 689 | 690 | $.fn.activateBox = function () { 691 | $.AdminLTE.boxWidget.activate(this); 692 | }; 693 | 694 | $.fn.toggleBox = function(){ 695 | var button = $($.AdminLTE.boxWidget.selectors.collapse, this); 696 | $.AdminLTE.boxWidget.collapse(button); 697 | }; 698 | 699 | $.fn.removeBox = function(){ 700 | var button = $($.AdminLTE.boxWidget.selectors.remove, this); 701 | $.AdminLTE.boxWidget.remove(button); 702 | }; 703 | 704 | })(jQuery); 705 | 706 | /* 707 | * TODO LIST CUSTOM PLUGIN 708 | * ----------------------- 709 | * This plugin depends on iCheck plugin for checkbox and radio inputs 710 | * 711 | * @type plugin 712 | * @usage $("#todo-widget").todolist( options ); 713 | */ 714 | (function ($) { 715 | 716 | 'use strict'; 717 | 718 | $.fn.todolist = function (options) { 719 | // Render options 720 | var settings = $.extend({ 721 | //When the user checks the input 722 | onCheck: function (ele) { 723 | return ele; 724 | }, 725 | //When the user unchecks the input 726 | onUncheck: function (ele) { 727 | return ele; 728 | } 729 | }, options); 730 | 731 | return this.each(function () { 732 | 733 | if (typeof $.fn.iCheck != 'undefined') { 734 | $('input', this).on('ifChecked', function () { 735 | var ele = $(this).parents("li").first(); 736 | ele.toggleClass("done"); 737 | settings.onCheck.call(ele); 738 | }); 739 | 740 | $('input', this).on('ifUnchecked', function () { 741 | var ele = $(this).parents("li").first(); 742 | ele.toggleClass("done"); 743 | settings.onUncheck.call(ele); 744 | }); 745 | } else { 746 | $('input', this).on('change', function () { 747 | var ele = $(this).parents("li").first(); 748 | ele.toggleClass("done"); 749 | if ($('input', ele).is(":checked")) { 750 | settings.onCheck.call(ele); 751 | } else { 752 | settings.onUncheck.call(ele); 753 | } 754 | }); 755 | } 756 | }); 757 | }; 758 | }(jQuery)); 759 | --------------------------------------------------------------------------------