Repository: 720kb/hubuntu-ui
Branch: master
Commit: 5ac3145c542e
Files: 20
Total size: 25.1 KB

Directory structure:
gitextract_3h02d8vz/

├── .gitignore
├── Readme.md
├── bower.json
├── css/
│   └── style.css
├── gulpfile.js
├── index.html
├── package.json
└── sass/
    ├── _base.scss
    ├── _colors.scss
    ├── hubuntu.scss
    └── modules/
        ├── _animations.scss
        ├── _breadcrumb.scss
        ├── _card-header.scss
        ├── _chart.scss
        ├── _loading.scss
        ├── _logo.scss
        ├── _media.scss
        ├── _shell.scss
        ├── _side-nav.scss
        └── _toast.scss

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
.DS_Store
bower_components/
.idea
.sass-cache/
node_modules/


================================================
FILE: Readme.md
================================================
# Hubuntu UI

<br>

![Ubuntu-material-dashboard-admin](http://i.imgur.com/HtL6qUq.png)

Hubuntu UI is a Material _Ubuntu style_ , very basic , starter template for admin dashboards (materialize.css).

The Hubuntu UI is developed by [720kb](http://720kb.net).

### Requirements
 
You need [Bower](http://bower.io/) installed on your pc.

### Install

```bash
git clone git@github.com:720kb/hubuntu-ui.git hubuntu-ui
```

```bash
cd hubuntu-ui/
```

```bash
bower install
```
#### npm

```bash
npm install hubuntu-ui
```
#### Bower
```bash
bower install hubuntu-ui
```

### Run it
```bash
python -m SimpleHTTPServer
```
then go to http://localhost:8000

****With Gulp****
```bash
npm install && gulp serve
```
then go to http://localhost:8100

### Live demo

[https://720kb.github.io/hubuntu-ui/](https://720kb.github.io/hubuntu-ui/)

### Sass
A Sass version of Hubuntu UI is included for convenience.  
To generate a compiled css version simply run:
 
```bash
sass sass/hubuntu.scss:css/main.css
```
To test the compiled Sass version remove all the style tags in the sample index.html and replace them with:

```
<link href="css/main.css" type="text/css" rel="stylesheet" media="screen, projection">
```

### Theming
For any changes to the theme please look at the materialize.css [documentation](http://materializecss.com/).

### Contributing

We will be much grateful if you help us making this project to grow up.
Feel free to contribute by forking, opening issues, pull requests etc.

### License

The MIT License (MIT)

Copyright (c) 2015 Filippo Oretti

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


================================================
FILE: bower.json
================================================
{
  "name": "hubuntu-ui",
  "version": "1.0.1",
  "dependencies": {
    "Materialize": "materialize#~0.97.1",
    "chartist": "~0.9.4"
  },
  "homepage": "https://github.com/720kb/hubuntu-ui",
  "authors": [
    "720kb",
    "http://720kb.net"
  ],
  "description": "Material Design Admin Dashboard Template, ubuntu Style.",
  "main": "",
  "moduleType": [],
  "keywords": [
    "material",
    "design",
    "css",
    "admin",
    "dashboard",
    "linux",
    "ubuntu",
    "style",
    "template"
  ],
  "license": "MIT"
}


================================================
FILE: css/style.css
================================================
/*
* Hubuntu UI
* https://github.com/720kb/hubuntu-ui
* brought to you by 720kb
* Support 720kb.net
* License - MIT
*/
html {
  font-family: 'Ubuntu', sans-serif; }

header, main, footer {
  padding-left: 240px; }

.content {
  padding: 1% 2%; }

.brand-logo.page-title {
  padding-left: 2%;
  margin-top: 8px; }

.nav-badge {
  margin-left: -8px;
  position: absolute;
  line-height: 15px;
  top: 8px;
  font-size: 12px;
  text-align: center;
  border-radius: 3px;
  padding: 1px 5px 1px 4px;
  background: rgba(0, 0, 0, 0.87); }

.user {
  padding: 2%;
  line-height: 54px;
  text-align: center; }

.side-nav.custom-side-nav {
  background: #333333; }
  .side-nav.custom-side-nav li {
    padding: 0; }
    .side-nav.custom-side-nav li:hover {
      background: none; }
    .side-nav.custom-side-nav li a {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.5);
      width: 100%;
      padding: 0 4% 0 4%;
      line-height: 55px;
      height: 55px; }
      .side-nav.custom-side-nav li a:active, .side-nav.custom-side-nav li a:hover {
        color: white;
        background: rgba(0, 0, 0, 0.1); }
      .side-nav.custom-side-nav li a i {
        position: relative;
        top: 15px;
        float: right; }
  .side-nav.custom-side-nav .badge {
    margin-right: 25px;
    height: 19px;
    line-height: 18px;
    margin-top: 18px;
    border-radius: 3px;
    width: auto;
    min-width: auto;
    font-size: 11.5px;
    text-align: center;
    padding: 1px  5px 0 4px; }

.ct-chart {
  margin: 0;
  margin-left: -17px; }

.ct-grid {
  stroke: none; }

.ct-area {
  fill-opacity: .6; }

.ct-series-a .ct-area, .ct-series-a .ct-slice-pie {
  fill: #ff3d00;
  fill-opacity: .3; }

.ct-series-b .ct-area, .ct-series-b .ct-slice-pie {
  fill: #ff1744;
  fill-opacity: .8; }

.ct-series-c .ct-area, .ct-series-c .ct-slice-pie {
  fill: lightgrey; }

.shell-header {
  background: #43423e;
  background: -moz-linear-gradient(top, #43423e 0%, #33322e 100%);
  background: -webkit-linear-gradient(top, #43423e 0%, #33322e 100%);
  background: linear-gradient(to bottom, #43423e 0%, #33322e 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#43423e', endColorstr='#33322e',GradientType=0 );
  width: 100%;
  height: 30px;
  box-shadow: 0px -1px rgba(0, 0, 0, 0.1);
  border-bottom: 2px solid rgba(0, 0, 0, 0.3); }

.shell-header a {
  height: 20px;
  width: 20px;
  display: inline-block;
  border-radius: 15px;
  text-align: center;
  line-height: 16.5px;
  margin-left: 4px;
  margin-top: 5px;
  text-shadow: 0 1px rgba(255, 255, 255, 0.3); }

.shell-header a:last-child {
  text-indent: .5px; }

.shell-header a i {
  font-size: 12.5px;
  vertical-align: text-bottom; }

.shell {
  font-family: Monaco;
  font-size: 13px;
  line-height: 20px;
  margin-top: 10vmin; }

.shell-content {
  background: #350125;
  padding: 1% 2%;
  padding-bottom: 50px; }

.blink {
  font-weight: bolder;
  font-family: Arial;
  animation: blinker .8s linear infinite; }

.breadcrumb {
  height: 55px;
  padding: 0 2% 0 2%; }
  .breadcrumb h6 {
    font-weight: 500;
    line-height: 55px;
    margin: 0;
    color: rgba(0, 0, 0, 0.87); }

.card-header {
  margin-top: 0; }
  .card-header .card-content {
    padding-bottom: 0;
    padding-top: 10px; }

.logo {
  height: 64px;
  text-align: center; }
  .logo img {
    margin-top: 10px; }

.loading {
  position: fixed;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 99999;
  text-align: center; }
  .loading img {
    margin-top: 16%; }

.toast {
  background: rgba(0, 0, 0, 0.79); }

@media only screen and (max-width: 600px) {
  .toast {
    margin-top: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2); } }
@media only screen and (max-width: 992px) {
  header, main, footer {
    padding-left: 0; }

  .brand-logo.page-title {
    padding: inherit; } }
@media only screen and (min-width: 993px) {
  #toast-container {
    right: 3%;
    top: 11%; } }
@keyframes blinker {
  50% {
    opacity: 0.0; } }

@-webkit-keyframes blinker {
  50% {
    opacity: 0.0; } }

@-moz-keyframes blinker {
  50% {
    opacity: 0.0; } }


================================================
FILE: gulpfile.js
================================================
/*global console,__dirname,require*/
(function serveTask(console, __dirname, require) {
  'use strict';

  var gulp = require('gulp')
    , browserSync = require('browser-sync')
    , historyApiFallback = require('connect-history-api-fallback');

  gulp.task('serve', [/*maybe a watcher*/], function runBrowserSync(done) {

    browserSync({
      'open': true,
      'ui': false,
      'port': 8100,
      'server': {
        'baseDir': ['.'],
        'middleware': [
          historyApiFallback()
        ]
      }
    }, done);
  });
}(console, __dirname, require));


================================================
FILE: index.html
================================================

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
  <title>Hubuntu - material admin dashboard Ubuntu like starter template</title>
  <link href='https://fonts.googleapis.com/css?family=Ubuntu:400,700italic,700,500italic,500,400italic,300,300italic' rel='stylesheet' type='text/css'>
  <link href="bower_components/Materialize/dist/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection">
  <link href="bower_components/chartist/dist/chartist.min.css" type="text/css" rel="stylesheet" media="screen,projection">
  <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <div class="loading pink darken-4">
    <img src="img/logo.png" width="160" class="hide"/>
    <br>
    <div class="preloader-wrapper big active">
      <div class="spinner-layer spinner-red">
        <div class="circle-clipper left">
          <div class="circle"></div>
        </div>
        <div class="gap-patch">
          <div class="circle"></div>
        </div>
        <div class="circle-clipper right">
          <div class="circle"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="page hide">
  <header>
    <nav class="pink darken-4">
      <div class="nav-wrapper">
        <a href="#" data-activates="nav-mobile" class="button-collapse top-nav full hide-on-large-only">
          <i class="mdi-navigation-menu"></i>
        </a>
        <span href="#" class="brand-logo page-title">
          <img src="img/logo.png" width="160"/>
        </span>
        <ul class="right hide-on-med-and-down">
          <li>
            <a href="#">
              <span class="nav-badge">3</span>
              <i class="material-icons">chat_bubble</i>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="material-icons">settings</i>
            </a>
          </li>
          <li>
            <a href="#" class="tooltipped" data-position="left" data-delay="50" data-tooltip="Logout">
              <i class="material-icons">exit_to_app</i>
            </a>
          </li>
        </ul>
      </div>
    </nav>
    <ul id="nav-mobile" class="side-nav custom-side-nav fixed">
      <li class="grey darken-4">
        <div class="user">
          <div class="chip grey darken-3 white-text">
            <img src="http://blogs-images.forbes.com/jasonevangelho/files/2013/03/Linus-Torvalds.jpg" alt="Contact Person">
            Jeremy Lean
          </div>
        </div>
      </li>
      <li>
        <a class="grey white-text darken-3 waves-effect waves-grey">
          <i class="material-icons deep-orange-text">airplay</i>
          <span>Dashboard</span>
        </a>
      </li>
      <li>
        <a class="waves-effect waves-grey">
          <i class="material-icons">perm_identity</i>
          <span class="badge deep-orange darken-1 white-text">33</span> Users
        </a>
      </li>

      <li>
        <a class="waves-effect waves-grey">
          <i class="material-icons">clear_all</i>
          Reports
        </a>
      </li>
      <li>
        <a class="waves-effect waves-grey">
          <i class="material-icons">trending_up</i>
          Analytics
        </a>
      </li>
      <li>
        <a class="waves-effect waves-grey">
          <i class="material-icons">layers</i>
          Servers
        </a>
      </li>
      <li>
        <a class="waves-effect waves-grey">
          <i class="material-icons">storage</i>
          Database
        </a>
      </li>
      <li>
        <a class="waves-effect waves-grey">
          <i class="material-icons">public</i>
          Domains
        </a>
      </li>
      <li>
        <a class="waves-effect waves-grey">
          <i class="material-icons">cloud_queue</i>
          Network
        </a>
      </li>

      <li>
        <a class="waves-effect waves-grey">
          <i class="material-icons">notifications_none</i>
          Alerts
        </a>
      </li>
      <li>
        <a class="waves-effect waves-grey">
          <i class="material-icons">message</i>
          Messages
        </a>
      </li>
    </ul>
  </header>
  <main>
    <div class="breadcrumb grey lighten-3">
      <h6>
        Dashboard
      </h6>
    </div>
    <div class="card card-header">
      <div class="card-content">
        <span class="card-title black-text">
          Visitors
        </span>
        <div class="ct-chart"></div>
      </div>
    </div>
    <div class="row">
      <div class="col s12 m6 l3">
        <div class="card">
          <div class="card-content black-text">
            <p ><i class="mdi-social-group-add"></i> New Users</p>
            <h4 class="card-stats-number">56.000</h4>
            <p class="card-stats-compare"><i class="mdi-hardware-keyboard-arrow-up"></i> 15% <span class="deep-orange-text text-lighten-2">from yesterday</span>
            </p>
          </div>
        </div>
      </div>
      <div class="col s12 m6 l3">
        <div class="card">
          <div class="card-content black-text">
            <p ><i class="mdi-editor-attach-money"></i>Total Sales</p>
            <h4 class="card-stats-number">$1990.63</h4>
            <p class="card-stats-compare"><i class="mdi-hardware-keyboard-arrow-up"></i> 70% <span class="deep-orange-text text-lighten-2">last month</span>
            </p>
          </div>
        </div>
      </div>
      <div class="col s12 m6 l3">
        <div class="card">
          <div class="card-content black-text">
            <p ><i class="mdi-action-trending-up"></i> Your Profit</p>
            <h4 class="card-stats-number">$500.52</h4>
            <p class="card-stats-compare"><i class="mdi-hardware-keyboard-arrow-up"></i> 80% <span class="deep-orange-text text-lighten-2">from yesterday</span>
            </p>
          </div>
        </div>
      </div>
      <div class="col s12 m6 l3">
        <div class="card">
          <div class="card-content black-text">
            <p ><i class="mdi-editor-insert-drive-file"></i> New Requests</p>
            <h4 class="card-stats-number">25</h4>
            <p class="card-stats-compare"><i class="mdi-hardware-keyboard-arrow-down"></i> 3% <span class="deep-orange-text text-lighten-2">from last month</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col s12 m12 l6">
        <ul id="projects-collection" class="collection">
          <li class="collection-item avatar">
            <i class="material-icons circle pink darken-4">clear_all</i>
            <span class="collection-header">System Process</span>
            <p>
              Queued
            </p>
            <a href="#" class="secondary-content">
              <i class="material-icons grey-text">refresh</i>
            </a>
          </li>
          <li class="collection-item">
            <small>Checking queue</small>
            <div class="progress grey lighten-3">
              <div class="indeterminate grey"></div>
            </div>
          </li>
        </ul>
      </div>
      <div class="col s12 m12 l6">
        <ul id="projects-collection" class="collection">
          <li class="collection-item avatar">
            <i class="material-icons circle pink darken-4">bug_report</i>
            <span class="collection-header">Issues</span>
            <p>
              <span class="pink-text darken-text-4">4</span>
              Detected
            </p>
            <a href="#" class="secondary-content">
              <i class="material-icons grey-text">refresh</i>
            </a>
          </li>
          <li class="collection-item">
            <small>Tracking issues</small>
            <div class="progress grey lighten-3">
              <div class="indeterminate grey"></div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </main>
  <main>
    <div id="shell" class="shell">
      <div class="shell-header">
        <a href="#" class="deep-orange black-text">
          <i class="material-icons">clear</i>
        </a>
        <a class="grey darken-2 black-text" href="#">
          <i class="material-icons">remove</i>
        </a>
        <a class="grey darken-2 black-text" href="#">
          <i class="material-icons">crop_square</i>
        </a>
      </div>
      <div class="shell-content">
        <h6 class="red-text text-accent-3">HUBUNTU UI SHELL v1.0.2</h6>
        <div class="grey-text">Brought to you by <a href="http://720kb.net" target="_blank" class="white-text">720kb</a></div>
      <div class="white-text text-lighten-3">
        Welcome back Jeremy!
      </div>
      <div class="deep-orange-text text-accent-1">host01:jeremy root$</div>
      <div class="deep-orange-text text-accent-1">host01:jeremy root$ sudo</div>
      <div class="deep-orange-text text-accent-1">Your password:</div>
      <div class="deep-orange-text text-accent-1">host01:jeremy root$ <span class="deep-orange-text text-lighten-4"> ls -la</span></div>
      <div class="deep-orange-text text-accent-1">host01:jeremy root$ <span class="deep-orange-text text-lighten-4">usr/ bin/ etc/ var/ .git .gitignore</span></div>
      <div class="deep-orange-text text-accent-1">host01:jeremy root$ <span class="deep-orange-text text-lighten-4">git clone git@github.com:720kb/hubuntu-ui.git hubuntu-ui</span></div>
      <div class="deep-orange-text text-accent-1">host01:jeremy root$ <span class="deep-orange-text text-lighten-4">cd hubuntu-ui/</span></div>
      <div class="deep-orange-text text-accent-1">host01:jeremy root$ <span class="deep-orange-text text-lighten-4">bower install</span></div>
      <div class="deep-orange-text text-accent-1">host01:jeremy root$ <span class="deep-orange-text text-lighten-4">python -m SimpleHTTPServer</span> <span class="blink white-text">|</span></div>
    </div>
    </div>
  </main>
  </div>
    <div class="fixed-action-btn">
     <a href="#shell" class="btn-floating btn-large pink darken-4">
       <i class="large white-text material-icons">code</i>
     </a>
   </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
  <script src="bower_components/chartist/dist/chartist.min.js"></script>
  <script type="text/javascript" src="bower_components/Materialize/dist/js/materialize.min.js"></script>
  <script type="text/javascript">
  (function () {
    //buttons
    $(".button-collapse").sideNav();
    //loader and loading
    $('.loading img').fadeIn(600).removeClass('hide');
    //boot
    var bootTimeout = window.setTimeout(function setBootTimeout() {
      //chart
      new Chartist.Line('.ct-chart', {
        labels:[1,2,3,4],
        series: [
          [10, 9, 16, 1, 6, 10, 5, 10],
          [13, 2, 10, 6, 17, 2, 11, 4],
          [2, 15, 13, 1, 1, 5, 18, 10]
        ]
      }, {
        high:18,
        height:220,
        low:0,
        showArea: true,
        showLine: false,
        showPoint: false,
        axisX: {
          showLabel: false,
          showGrid: false
        }
      });
      $('.page').removeClass('hide');
      $('.loading').fadeOut(1000);
      window.clearTimeout(bootTimeout);
    }, 2000)
    , toastTimeout = window.setTimeout(function setToastTimeout() {
      //Some toast
      Materialize.toast('Welcome back Jeremy', 4000);
      window.clearTimeout(toastTimeout);
    }, 3000)
    , secondToastTimeout = window.setTimeout(function setSecondToastTimeout() {
      //Some toast
      Materialize.toast('Hubuntu UI is available on &nbsp;<a class="deep-orange-text text-lighten-1" href="https://github.com/720kb/hubuntu-ui" target="_blank">Github</a>', 60000);
      window.clearTimeout(secondToastTimeout);
    }, 5000);
  })();
  </script>
</body>
</html>


================================================
FILE: package.json
================================================
{
  "name": "hubuntu-ui",
  "version": "1.0.1",
  "description": "Material Admin Dashboard Template, Ubuntu Style.",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/720kb/hubuntu-ui.git"
  },
  "keywords": [
    "material",
    "css",
    "design",
    "template",
    "dashboard",
    "admin",
    "ubuntu",
    "style",
    "linux"
  ],
  "author": "720kb",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/720kb/hubuntu-ui/issues"
  },
  "homepage": "https://github.com/720kb/hubuntu-ui#readme",
  "dependencies": {},
  "devDependencies": {
    "browser-sync": "^2.11.1",
    "connect-history-api-fallback": "^1.1.0",
    "gulp": "^3.9.1",
    "gulp-webserver": "^0.9.1"
  }
}


================================================
FILE: sass/_base.scss
================================================
html {
  font-family: 'Ubuntu', sans-serif;
}
header, main, footer {
  padding-left: 240px;
}

.content {
  padding: 1% 2%;
}

.brand-logo.page-title {
  padding-left: 2%;
  margin-top: 8px;
}

.nav-badge {
  margin-left: -8px;
  position: absolute;
  line-height: 15px;
  top: 8px;
  font-size: 12px;
  text-align: center;
  border-radius: 3px;
  padding: 1px 5px 1px 4px;
  background: $shaded-black;
}

.user {
  padding: 2%;
  line-height: 54px;
  text-align: center;
}


================================================
FILE: sass/_colors.scss
================================================
$light-grey: lightgrey;
$dark-grey: #333;

$ubuntu-shell-color: #350125;
$shaded-black: rgba(0, 0, 0, 0.87);
$ghost-black: rgba(0,0,0, .1);


$clear-white: rgba(255,255,255,.5);

$chart-color-a: #ff3d00;
$chart-color-b: #ff1744;
$chart-color-c: $light-grey;


================================================
FILE: sass/hubuntu.scss
================================================
/*
* Hubuntu UI
* https://github.com/720kb/hubuntu-ui
* brought to you by 720kb
* Support 720kb.net
* License - MIT
*/
@import "colors";
@import "base";
@import "modules/side-nav";
@import "modules/chart";
@import "modules/shell";
@import "modules/breadcrumb";
@import "modules/card-header";
@import "modules/logo";
@import "modules/loading";
@import "modules/toast";
@import "modules/media";
@import "modules/animations";


================================================
FILE: sass/modules/_animations.scss
================================================
@keyframes blinker {
  50% { opacity: 0.0; }
}
@-webkit-keyframes blinker {
  50% { opacity: 0.0; }
}
@-moz-keyframes blinker {
  50% { opacity: 0.0; }
}


================================================
FILE: sass/modules/_breadcrumb.scss
================================================
.breadcrumb {
  height: 55px;
  padding: 0 2% 0 2%;

  h6 {
    font-weight: 500;
    line-height: 55px;
    margin: 0;
    color: $shaded-black;
  }
}

================================================
FILE: sass/modules/_card-header.scss
================================================
.card-header {
  margin-top:0;

  .card-content {
    padding-bottom:0;
    padding-top:10px;
  }
}

================================================
FILE: sass/modules/_chart.scss
================================================
.ct-chart {
  margin: 0;
  margin-left: -17px;
}

.ct-grid{
  stroke: none;
}

.ct-area {
  fill-opacity: .6;
}

.ct-series-a .ct-area, .ct-series-a .ct-slice-pie {
  fill: $chart-color-a;
  fill-opacity: .3;
}

.ct-series-b .ct-area, .ct-series-b .ct-slice-pie {
  fill: $chart-color-b;
  fill-opacity: .8;
}

.ct-series-c .ct-area, .ct-series-c .ct-slice-pie {
  fill: $chart-color-c;
}


================================================
FILE: sass/modules/_loading.scss
================================================
.loading {
  position: fixed;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 99999;
  text-align: center;

  img {
    margin-top: 16%;
  }
}

================================================
FILE: sass/modules/_logo.scss
================================================
.logo {
  height: 64px;
  text-align: center;

  img {
    margin-top: 10px;
  }
}

================================================
FILE: sass/modules/_media.scss
================================================
$small-screen-up: 601px !default;
$medium-screen-up: 993px !default;
$large-screen-up: 1201px !default;
$small-screen: 600px !default;
$medium-screen: 992px !default;
$large-screen: 1200px !default;

$medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default;
$large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;
$small-and-down: "only screen and (max-width : #{$small-screen})" !default;
$medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;

@media #{$small-and-down} {
  // styles for small screens and down
  .toast{
    margin-top:0;
    border-bottom:1px solid rgba(0,0,0, .2);
  }
}
@media #{$medium-and-up} {
  // styles for medium screens and larger
}
@media #{$medium-and-down} {
  // styles for medium screens and down
  header, main, footer {
    padding-left: 0;
  }
  .brand-logo.page-title{
    padding:inherit;
  }
}
@media #{$large-and-up} {
  #toast-container{
    right:3%;
    top:11%;
  }
}


================================================
FILE: sass/modules/_shell.scss
================================================
.shell-header{
  background: rgb(67,66,62);
  background: -moz-linear-gradient(top,  rgba(67,66,62,1) 0%, rgba(51,50,46,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(67,66,62,1) 0%,rgba(51,50,46,1) 100%);
  background: linear-gradient(to bottom,  rgba(67,66,62,1) 0%,rgba(51,50,46,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#43423e', endColorstr='#33322e',GradientType=0 );
  width: 100%;
  height: 30px;
  box-shadow: 0px -1px rgba(0,0,0, .1);
  border-bottom: 2px solid rgba(0,0,0, .3);
}
.shell-header a{
  height:20px;
  width:20px;
  display:inline-block;
  border-radius:15px;
  text-align: center;
  line-height: 16.5px;
  margin-left:4px;
  margin-top:5px;
  text-shadow: 0 1px rgba(255,255,255, .3);
}
.shell-header a:last-child{
  text-indent: .5px;
}
.shell-header a i{
  font-size: 12.5px;
  vertical-align: text-bottom;
}
.shell {
  font-family: Monaco;
  font-size: 13px;
  line-height: 20px;
  margin-top: 10vmin;
}
.shell-content{
  background: $ubuntu-shell-color;
  padding:1% 2%;
  padding-bottom:50px;
}
.blink {
  font-weight: bolder;
  font-family: Arial;
  animation: blinker .8s linear infinite;
}


================================================
FILE: sass/modules/_side-nav.scss
================================================
.side-nav.custom-side-nav {
  background: $dark-grey;

  li {
    padding: 0;

    &:hover {
      background: none;
    }

    a {
      font-size: 16px;
      color: $clear-white;
      width:100%;
      padding:0 4% 0 4%;
      line-height: 55px;
      height:55px;

      &:active, &:hover {
        color:white;
        background: $ghost-black;
      }

      i {
        position: relative;
        top:15px;
        float:right;
      }
    }
  }

  .badge {
    margin-right: 25px;
    height: 19px;
    line-height: 18px;
    margin-top: 18px;
    border-radius: 3px;
    width: auto;
    min-width: auto;
    font-size: 11.5px;
    text-align: center;
    padding: 1px  5px 0 4px;
  }
}

================================================
FILE: sass/modules/_toast.scss
================================================
.toast{
  background: rgba(0,0,0, .79);
}