dune-dashboard 1.0.0

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

@@ -0,0 +1,160 @@
+/*
+ *    Component: Buttons
+ *-------------------------
+
+.btn
+  font-weight: 500
+  +border-radius($btn-border-radius)
+  border: 1px solid transparent
+  -webkit-box-shadow: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.09)
+  -moz-box-shadow: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.09)
+  box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.09)
+  //Button color variations
+  &.btn-default
+    background-color: #fafafa
+    color: #666
+    border-color: #ddd
+    border-bottom-color: #ddd
+    &:hover, &:active, &.hover
+      background-color: #f4f4f4 !important
+    &.btn-flat
+      border-bottom-color: darken(#e6e7e8, 5%)
+  &.btn-primary
+    background-color: $light-blue
+    border-color: darken($light-blue, 5%)
+    &:hover, &:active, &.hover
+      background-color: darken($light-blue, 5%)
+  &.btn-success
+    background-color: $green
+    border-color: darken($green, 5%)
+    &:hover, &:active, &.hover
+      background-color: darken($green, 5%)
+  &.btn-info
+    background-color: $aqua
+    border-color: darken($aqua, 5%)
+    &:hover, &:active, &.hover
+      background-color: darken($aqua, 5%)
+  &.btn-danger
+    background-color: $red
+    border-color: darken($red, 5%)
+    &:hover, &:active, &.hover
+      background-color: darken($red, 5%)
+  &.btn-warning
+    background-color: $yellow
+    border-color: darken($yellow, 5%)
+    &:hover, &:active, &.hover
+      background-color: darken($yellow, 5%)
+  // Flat buttons
+  &.btn-flat
+    +border-radius(0)
+    -webkit-box-shadow: none
+    -moz-box-shadow: none
+    box-shadow: none
+    border-width: 1px
+  // Active state
+  &:active
+    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)
+    -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)
+    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)
+  &:focus
+    outline: none
+  // input file btn
+  &.btn-file
+    position: relative
+    width: 120px
+    height: 35px
+    overflow: hidden
+    > input[type='file']
+      display: block !important
+      width: 100% !important
+      height: 35px !important
+      opacity: 0 !important
+      position: absolute
+      top: -10px
+      cursor: pointer
+  // Application buttons
+  &.btn-app
+    position: relative
+    padding: 15px 5px
+    margin: 0 0 10px 10px
+    min-width: 80px
+    height: 60px
+    -webkit-box-shadow: none
+    -moz-box-shadow: none
+    box-shadow: none
+    +border-radius(0)
+    text-align: center
+    color: #666
+    border: 1px solid #ddd
+    background-color: #fafafa
+    font-size: 12px
+    //Icons within the btn
+    > .fa, > .glyphicon, > .ion
+      font-size: 20px
+      display: block
+    &:hover
+      background: #f4f4f4
+      color: #444
+      border-color: #aaa
+    &:active, &:focus
+      -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)
+      -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)
+      box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)
+    //The bandge
+    > .badge
+      position: absolute
+      top: -3px
+      right: -10px
+      font-size: 10px
+      font-weight: 400
+  //Social buttons
+  &.btn-social-old
+    -webkit-box-shadow: none
+    -moz-box-shadow: none
+    box-shadow: none
+    opacity: 0.9
+    //Only font-awesome provides social icons
+    padding: 0
+    > .fa
+      padding: 10px 0
+      width: 40px
+    > .fa + span
+      border-left: 1px solid rgba(255, 255, 255, 0.3)
+    span
+      padding: 10px
+    &:hover
+      opacity: 1
+  &.btn-circle
+    width: 30px
+    height: 30px
+    line-height: 30px
+    padding: 0
+    +border-radius(50%)
+
+
+.btn.dropdown-toggle
+  span.caret
+    margin-left: 5px
+
+.btn
+  &.online, &.pending
+    color: #fff
+    @extend .label-success
+  &.draft, &.requested_refund, &.refunded_and_canceled
+    color: #fff
+    @extend .label-default
+  &.soon, &.refunded
+    color: #fff
+    @extend .label-info
+  &.rejected, &.canceled
+    color: #fff
+    @extend .label-warning
+  &.failed, &.deleted
+    color: #fff
+    @extend .label-danger
+  &.waiting_funds, &.waiting_confirmation
+    color: #fff
+    @extend .label-warning
+  &.successful, &.confirmed
+    color: #fff
+    @extend .label-primary

data/app/assets/stylesheets/modules/dl-details.sass

@@ -0,0 +1,13 @@
+dl.details
+  dt
+    float: left
+    &:after
+      content: ':'
+      padding-right: 5px
+  dd
+    +clearfix
+    padding-bottom: 5px
+    margin-bottom: 10px
+    border-bottom: 1px solid #f1f1f1
+    &:last-child
+      border-bottom: none

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

@@ -0,0 +1,53 @@
+/*
+ *   All form elements including input, select, textarea etc.
+ *-----------------------------------------------------------------
+
+.form-control
+  +border-radius($input-radius)
+  box-shadow: none
+  &:focus
+    border-color: $light-blue !important
+    box-shadow: none
+
+.form-group
+  &.has-success
+    label
+      color: $green
+    .form-control
+      border-color: $green !important
+      box-shadow: none
+  &.has-warning
+    label
+      color: $yellow
+    .form-control
+      border-color: $yellow !important
+      box-shadow: none
+  &.has-error
+    label
+      color: $red
+    .form-control
+      border-color: $red !important
+      box-shadow: none
+
+/* Input group
+.input-group
+  .input-group-addon
+    border-radius: 0
+    background-color: #f4f4f4
+
+/* button groups
+.btn-group-vertical
+  .btn
+    &.btn-flat:first-of-type, &.btn-flat:last-of-type
+      border-radius: 0
+
+/* Checkbox and radio inputs
+.checkbox, .radio
+  padding-left: 0
+
+span.error
+  padding-left: 5px
+  color: $red
+
+textarea.form-control
+  height: 175px

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

@@ -0,0 +1,9 @@
+.no-results
+  font-style: italic
+
+.loading-section
+  opacity: 0.3
+
+table
+  hr
+    margin: 5px 0

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

@@ -0,0 +1,153 @@
+/*
+ *    Components: navbar, logo and content header
+ *-------------------------------------------------
+header.header
+  position: relative
+  max-height: 100px
+  z-index: 1030
+  .navbar
+    background: #333
+    height: 50px
+    margin-bottom: 0
+    margin-left: $left-side-width
+  //Navbar toggle button
+  .navbar .sidebar-toggle
+    float: left
+    padding: 9px 5px
+    margin-top: 8px
+    margin-right: 0
+    margin-bottom: 8px
+    margin-left: 5px
+    background-color: transparent
+    background-image: none
+    border: 1px solid transparent
+    border-radius: 0 !important
+  .navbar .sidebar-toggle:hover .icon-bar
+    background: #999 !important
+  .navbar .sidebar-toggle .icon-bar
+    display: block
+    width: 22px
+    height: 2px
+    background: #eee
+    +border-radius(4px)
+  .navbar .sidebar-toggle .icon-bar + .icon-bar
+    margin-top: 4px
+  //User image in navbar
+  .navbar .nav > li.user > a
+    font-weight: bold
+    color: #eee
+    &:hover
+      background: #444
+    .img-circle
+      border-radius: 50%
+      width: 17px
+      height: 17px
+  .nav .open > a, .nav .open > a:hover, .nav .open > a:focus, .nav > li > a:hover, .nav > li > a:focus
+    background: #444
+  .navbar .nav > li.user > a > img
+    margin-right: 5px
+  //Labels in navbar
+  .navbar .nav > li > a > .label
+    +border-radius(50%)
+    position: absolute
+    top: 7px
+    right: 2px
+    font-size: 10px
+    font-weight: normal
+    width: 15px
+    height: 15px
+    line-height: 1.0em
+    text-align: center
+    padding: 2px
+  .navbar .nav > li > a:hover > .label
+    top: 3px
+  //Logo bar - leftside
+  .name
+    background: #333333
+    margin: 0
+    float: left
+    height: 50px
+    text-align: center
+    padding: 10px 10px
+    width: $left-side-width
+    a
+      display: block
+      margin: auto
+      text-indent: -99999em
+      width: 154px
+      height: 26px
+      background: image-url('dune/dashboard/logo@2x.png') center no-repeat
+      background-size: cover
+      padding-left: 0
+
+
+// Content Header
+.right-side > .content-header
+  position: relative
+  padding: 15px 15px 10px 20px
+  // Header Text
+  > h1
+    margin: 0
+    font-size: 24px
+    > small
+      font-size: 15px
+      display: inline-block
+      padding-left: 4px
+      font-weight: 300
+  > .breadcrumb
+    float: right
+    background: transparent
+    margin-top: 0px
+    margin-bottom: 0
+    font-size: 12px
+    padding: 7px 5px
+    position: absolute
+    top: 15px
+    right: 10px
+    +border-radius(2px)
+    > li > a
+      color: #444
+      text-decoration: none
+      > .fa, > .glyphicon, > .ion
+        margin-right: 5px
+    > li + li:before
+      content: '>\00a0'
+  @media screen and (max-width: $screen-sm)
+    > .breadcrumb
+      position: relative
+      margin-top: 5px
+      top: 0
+      right: 0
+      float: none
+      background: #efefef
+
+//Control navbar scaffolding on x-small screens
+@media (max-width: $screen-sm)
+  .navbar .navbar-nav > li
+    float: left
+  //Dont't let links get full width
+  .navbar-nav
+    margin: 0
+    float: left
+  .navbar-nav > li > a
+    padding-top: 15px
+    padding-bottom: 15px
+    line-height: 20px
+  .navbar .navbar-right
+    float: right
+
+// Collapse header
+@media screen and (max-width: $screen-header-collapse)
+  header.header
+    position: relative
+    .name, .navbar
+      width: 100%
+      float: none
+      position: relative !important
+    .navbar
+      margin: 0
+  body.fixed
+    header.header
+      position: fixed
+    > .wrapper, .sidebar-offcanvas
+      margin-top: 100px !important

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

@@ -0,0 +1,3 @@
+.label-light
+  @extend .label-default
+  background: #ccc

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

@@ -0,0 +1,98 @@
+/*
+ *  Component: Navs
+
+/* NAV PILLS
+.nav.nav-pills
+  > li > a
+    border-top: 3px solid transparent
+    +border-radius(0)
+    color: #444
+    > .fa, > .glyphicon, > .ion
+      margin-right: 5px
+  > li.active > a, > li.active > a:hover
+    background-color: #f6f6f6
+    border-top-color: $light-blue
+    color: #444
+  > li.active > a
+    font-weight: 600
+  > li > a:hover
+    background-color: #f6f6f6
+  &.nav-stacked
+    > li > a
+      border-top: 0
+      border-left: 3px solid transparent
+      +border-radius(0)
+      color: #444
+    > li.active > a, > li.active > a:hover
+      background-color: #f6f6f6
+      border-left-color: $light-blue
+      color: #444
+    > li.header
+      border-bottom: 1px solid #ddd
+      color: #777
+      margin-bottom: 10px
+      padding: 5px 10px
+      text-transform: uppercase
+
+/* NAV TABS
+.nav-tabs-custom
+  margin-bottom: 20px
+  background: #fff
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1)
+  > .nav-tabs
+    margin: 0
+    border-bottom-color: #f4f4f4
+    > li
+      border-top: 3px solid transparent
+      margin-bottom: -2px
+      > a
+        border-radius: 0 !important
+        &, &:hover
+          background: transparent
+          margin: 0
+      &:not(.active)
+        > a:hover, > a:focus, > a:active
+          border-color: transparent
+      margin-right: 5px
+    > li.active
+      border-top-color: $light-blue
+      & > a, &:hover > a
+        background-color: #fff
+      > a
+        border-top: 0
+        border-left-color: #f4f4f4
+        border-right-color: #f4f4f4
+    > li:first-of-type
+      margin-left: 0px
+      &.active
+        > a
+          border-left-width: 0
+    //Pulled to the right
+    &.pull-right
+      float: none !important
+      > li
+        float: right
+      > li:first-of-type
+        margin-right: 0px
+        &.active
+          > a
+            border-left-width: 1px
+            border-right-width: 0px
+    > li.header
+      font-weight: 400
+      line-height: 35px
+      padding: 0 10px
+      font-size: 20px
+      color: #444
+      cursor: default
+      > .fa, > .glyphicon, > .ion
+        margin-right: 10px
+  > .tab-content
+    background: #fff
+    padding: 10px
+
+  .close
+    position: absolute
+    top: 2px
+    left: -20px
+    font-size: 90%