dune-dashboard 1.0.0

data/app/assets/stylesheets/core/mixins.sass

@@ -0,0 +1,83 @@
+// Misc: mixins
+//==============
+
+//Changes the color and the hovering properties of the navbar
+=navbar-variant($color, $font-color: rgba(255, 255, 255, 0.8), $hover-color: #f6f6f6, $hover-bg: rgba(0, 0, 0, 0.1))
+  background-color: $color
+  //Navbar links
+  .nav a
+    color: $font-color
+  .nav > li > a:hover,
+  .nav > li > a:active,
+  .nav > li > a:focus,
+  .nav .open > a,
+  .nav .open > a:hover,
+  .nav .open > a:focus
+    background: $hover-bg
+    color: $hover-color
+  .navbar-right > .nav
+    margin-right: 10px
+  //Add color to the sidebar toggle button
+  .sidebar-toggle .icon-bar
+    background: $font-color
+  .sidebar-toggle:hover .icon-bar
+    background: $hover-color !important
+
+//Logo color variation
+=logo-variant($color)
+  background-color: $color
+  color: #f9f9f9
+  > a
+    color: #f9f9f9
+  &:hover
+    background: darken($color, 1%)
+
+//Box solid color variantion creator
+=box-solid-variant($color)
+  > .box-header
+    color: #fff
+    background: $color
+    background-color: $color
+    a
+      color: #444
+
+//Transform function that rotates eements
+=transform($degree)
+  transform: rotate($degree)
+  -ms-transform: rotate($degree)
+  /* IE 9
+  -webkit-transform: rotate($degree)
+  /* Safari and Chrome
+
+//For floating elements
+=clearfix
+  &:before,
+  &:after
+    display: table
+    content: " "
+  &:after
+    clear: both
+
+//border radius creator
+=border-radius($radius)
+  -webkit-border-radius: $radius
+  -moz-border-radius: $radius
+  border-radius: $radius
+
+//Bootstrap mixins for progress bars. You can find original copies
+//with the bootstrap assets (www.getbootstrap.com)
+=progress-bar-variant($color)
+  background-color: $color
+  .progress-striped &
+
+// Animations
+=animation($animation)
+  -webkit-animation: $animation
+  animation: $animation
+
+#gradient
+  =striped($color: rgba(255, 255, 255, 0.15), $angle: 45deg)
+    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, $color), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, $color), color-stop(0.75, $color), color-stop(0.75, transparent), to(transparent))
+    background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent)
+    background-image: -moz-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent)
+    background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent)

data/app/assets/stylesheets/core/settings.sass

@@ -0,0 +1,75 @@
+//Contains All variables
+//-----------------------
+
+//Layout
+//Side bar and logo width
+$left-side-width: 220px
+
+//Colors
+$light-blue: #3c8dbc
+
+//Primary
+$red: #f56954
+
+//Danger
+$green: #00a65a
+
+//Success
+$aqua: #00c0ef
+
+//Info
+$yellow: #f39c12
+
+//Warning
+$blue: #0073b7
+$navy: #001f3f
+$teal: #39cccc
+$olive: #27b18b
+$lime: #01ff70
+$orange: #ff851b
+$fuchsia: #f012be
+$purple: #932ab6
+$maroon: #85144b
+$black: #222222
+$gray: #eaeaec
+
+//Link colors (Aka: <a> tags)
+$link-color: $light-blue
+$link-hover-color: lighten($link-color, 15%)
+
+//Body background (Affects main content background only)
+$body-bg: #f9f9f9
+
+//Table striped color
+$table-striped-color: #f3f4f5
+
+//Sidebar skins
+//skin blue (light) sidebar vars
+$sidebar-light-bg: #f4f4f4
+$sidebar-light-hover-bg: #f9f9f9
+$sidebar-light-font: #555555
+$sidebar-light-border: #dbdbdb
+
+//Screen widths - Same as bootstrap default settings
+$screen-xs: 480px
+$screen-sm: 767px
+$screen-md: 992px
+$screen-lg: 1200px
+
+//When the logo should go to the top of the screen
+$screen-header-collapse: 560px
+
+//BOXES
+$box-border-color: #f4f4f4
+$box-border-radius: 3px
+$box-footer-bg: white
+
+//FORMS
+$input-radius: 0px
+
+//BUTTONS
+//Border radius for non flat buttons
+$btn-border-radius: 3px
+
+//CHAT widget
+$attachment-border-radius: 3px

data/app/assets/stylesheets/dune-dashboard-application.sass

@@ -0,0 +1,12 @@
+@import bootstrap
+@import font-awesome-sprockets
+@import font-awesome
+
+@import core/settings
+@import core/mixins
+@import core/core
+@import modules/**/**
+@import pages/**/**
+
+// From vendor
+@import daterangepicker

data/app/assets/stylesheets/modules/alerts.sass

@@ -0,0 +1,21 @@
+/*
+ *    Component: alert
+ *------------------------
+
+.alert
+  //Add padding to allow the icon to appear
+  padding-left: 30px
+  margin-left: 15px
+  position: relative
+  //Make icons float to the left corner
+  > .fa, > .glyphicon
+    position: absolute
+    left: -15px
+    top: -15px
+    width: 35px
+    height: 35px
+    +border-radius(50%)
+    line-height: 35px
+    text-align: center
+    background: inherit
+    border: inherit

data/app/assets/stylesheets/modules/avatar.sass

@@ -0,0 +1,13 @@
+.avatar
+  display: inline-block
+  &.organization, &.channel
+    .img-circle
+      border-radius: 0
+  &.small
+    img
+      width: 40px
+      height: 40px
+    &.organization, &.channel
+      img
+        width: 40px
+        height: 20px

data/app/assets/stylesheets/modules/boxes.sass

@@ -0,0 +1,274 @@
+/*
+ *    component: Boxes
+ *-------------------------
+
+.box
+  position: relative
+  background: #ffffff
+  border-top: 2px solid darken($box-border-color, 20%)
+  margin-bottom: 20px
+  +border-radius($box-border-radius)
+  width: 100%
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1)
+  // Box color variations
+  &.box-primary
+    border-top-color: $light-blue
+  &.box-info
+    border-top-color: $aqua
+  &.box-danger
+    border-top-color: $red
+  &.box-warning
+    border-top-color: $yellow
+  &.box-success
+    border-top-color: $green
+  // fixed height to 300px
+  &.height-control
+    .box-body
+      max-height: 300px
+      overflow: auto
+  // Box header
+  .box-header
+    position: relative
+    +clearfix
+    //Add top left and top right border radius
+    +border-radius($box-border-radius $box-border-radius 0 0)
+    border-bottom: 0px solid $box-border-color
+    color: #444
+    padding-bottom: 10px
+    // Icons and box title
+    > .fa, > .glyphicon, > .ion,
+    .box-title
+      display: inline-block
+      padding: 10px 0px 10px 10px
+      margin: 0
+      font-size: 20px
+      font-weight: 400
+      float: left
+      cursor: default
+      //text-transform: capitalize;
+    a
+      color: #444
+    // Box Tools
+    > .box-tools
+      padding: 5px 10px 5px 5px
+  // Box body
+  .box-body
+    padding: 10px
+    +border-radius(0 0 $box-border-radius $box-border-radius)
+    // Tables within the box body
+    > table, > .table
+      margin-bottom: 0
+    &.chart-responsive
+      width: 100%
+      overflow: hidden
+    // Charts
+    > .chart
+      position: relative
+      overflow: hidden
+      width: 100%
+      svg, canvas
+        width: 100% !important
+    // Calendar within the box body
+    .fc
+      margin-top: 5px
+    // Calendar title
+    .fc-header-title h2
+      font-size: 15px
+      line-height: 1.6em
+      color: #666
+      margin-left: 10px
+    .fc-header-right
+      padding-right: 10px
+    .fc-header-left
+      padding-left: 10px
+    // Calendar table header cells
+    .fc-widget-header
+      background: #fafafa
+      box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.02)
+    .fc-grid
+      width: 100%
+      border: 0
+    .fc-widget-header:first-of-type,
+    .fc-widget-content:first-of-type
+      border-left: 0
+      border-right: 0
+    .fc-widget-header:last-of-type,
+    .fc-widget-content:last-of-type
+      border-right: 0
+    // tables in the box body
+    .table
+      margin-bottom: 0
+    .full-width-chart
+      margin: -19px
+    &.no-padding .full-width-chart
+      margin: -9px
+  // Box footer
+  .box-footer
+    border-top: 1px solid $box-border-color
+    +border-radius(0 0 $box-border-radius $box-border-radius)
+    padding: 10px
+    background-color: $box-footer-bg
+  //
+  //    SOLID BOX:
+  //------------------
+  //use this class to get a colored header and borders
+  //
+  &.box-solid
+    border-top: 0px
+    > .box-header
+      padding-bottom: 0px !important
+      .btn.btn-default
+        background: transparent
+    // Box color variations
+    &.box-primary
+      +box-solid-variant($light-blue)
+    &.box-info
+      +box-solid-variant($aqua)
+    &.box-danger
+      +box-solid-variant($red)
+    &.box-warning
+      +box-solid-variant($yellow)
+    &.box-success
+      +box-solid-variant($green)
+    > .box-header > .box-tools > .btn
+      border: 0
+      box-shadow: none
+    // collapsed mode
+    &.collapsed-box
+      .box-header
+        +border-radius($box-border-radius)
+    // Fix font color for tiles
+    &[class*='bg']
+      > .box-header
+        color: #fff
+  //BOX GROUP
+  .box-group
+    > .box
+      margin-bottom: 5px
+  // jQuery Knob in a box
+  .knob-label
+    text-align: center
+    color: #333
+    font-weight: 100
+    font-size: 12px
+    margin-bottom: 0.3em
+  //
+  //  Widgets
+  //-----------
+  //
+  // Widget: TODO LIST
+  .todo-list
+    margin: 0
+    padding: 0px 0px
+    list-style: none
+    // Todo list element
+    > li
+      +border-radius(2px)
+      padding: 10px
+      background: $table-striped-color
+      margin-bottom: 2px
+      border-left: 2px solid #e6e7e8
+      color: #444
+      &:last-of-type
+        margin-bottom: 0
+      // Color varaity
+      &.danger
+        border-left-color: $red
+      &.warning
+        border-left-color: $yellow
+      &.info
+        border-left-color: $aqua
+      &.success
+        border-left-color: $green
+      &.primary
+        border-left-color: $light-blue
+      > input[type='checkbox']
+        margin: 0 10px 0 5px
+      .text
+        display: inline-block
+        margin-left: 5px
+        font-weight: 600
+      // Time labels
+      .label
+        margin-left: 10px
+        font-size: 9px
+      // Tools and options box
+      .tools
+        display: none
+        float: right
+        color: $red
+        // icons
+        > .fa, > .glyphicon, > .ion
+          margin-right: 5px
+          cursor: pointer
+      &:hover .tools
+        display: inline-block
+      &.done
+        color: #999
+        .text
+          text-decoration: line-through
+          font-weight: 500
+        .label
+          background: $gray !important
+    .handle
+      display: inline-block
+      cursor: move
+      margin: 0 5px
+  // END TODO WIDGET
+  // Chat widget
+  .chat
+    padding: 5px 20px 5px 10px
+    .item
+      +clearfix
+      margin-bottom: 10px
+      // The image
+      > img
+        //display: inline-block;
+        width: 40px
+        height: 40px
+        border: 2px solid transparent
+        border-radius: 50% !important
+        &.online
+          border: 2px solid $green
+        &.offline
+          border: 2px solid $red
+      // The message body
+      > .message
+        margin-left: 55px
+        margin-top: -40px
+        > .name
+          display: block
+          font-weight: 600
+      // The attachment
+      > .attachment
+        +border-radius($attachment-border-radius)
+        background: #f0f0f0
+        margin-left: 65px
+        margin-right: 15px
+        padding: 10px
+        > h4
+          margin: 0 0 5px 0
+          font-weight: 600
+          font-size: 14px
+        > p, > .filename
+          font-weight: 600
+          font-size: 13px
+          font-style: italic
+          margin: 0
+        +clearfix
+  // END CHAT WIDGET
+  // Box overlay for LOADING STATE effect
+  > .overlay, > .loading-img
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
+  > .overlay
+    z-index: 1010
+    background: rgba(255, 255, 255, 0.7)
+  > .overlay.dark
+    background: rgba(0, 0, 0, 0.5)
+  > .loading-img
+    z-index: 1020
+    background: transparent url("../img/ajax-loader1.gif") 50% 50% no-repeat