301 lines
5.4 KiB
Sass
301 lines
5.4 KiB
Sass
//DASHBOARD
|
|
.size_s
|
|
font-size: 1.1em
|
|
.size_md
|
|
font-size: 1.3em
|
|
.size_l
|
|
font-size: 1.7em
|
|
.size_xl
|
|
font-size: 2em
|
|
.size_xxl
|
|
font-size: 2.3em
|
|
|
|
.number-monospace
|
|
font-family: $font-family-mono!important
|
|
word-spacing: -0.3em
|
|
font-weight: 200
|
|
|
|
.color_success
|
|
color: $brand-success
|
|
.color_danger
|
|
color: $brand-danger
|
|
|
|
.dash_trend_down
|
|
color: $brand-danger
|
|
&:before
|
|
font-family: FontAwesome
|
|
content: "\f0ab"
|
|
@include margin-right(4px)
|
|
.dash_trend_up
|
|
color: $brand-success
|
|
&:before
|
|
font-family: FontAwesome
|
|
content: "\f0aa"
|
|
@include margin-right(4px)
|
|
.dash_trend_right
|
|
&:before
|
|
font-family: FontAwesome
|
|
content: "\f0a9"
|
|
@include margin-right(4px)
|
|
|
|
#dashboard
|
|
section > section
|
|
header
|
|
padding: 3px 8px
|
|
color: white
|
|
font-size: 1.2em
|
|
background-color: $brand-primary
|
|
@include margin(0, 0, 3px, 0)
|
|
.small
|
|
display: block
|
|
clear: both
|
|
font-variant: small-cap
|
|
text-transform: uppercase
|
|
font-size: 0.8em
|
|
font-family: $font-family-sans-serif
|
|
.data_list
|
|
@extend .list-group
|
|
padding: 0
|
|
@include margin(0, 0, 10px, 0)
|
|
li
|
|
@extend .list-group-item
|
|
position: relative
|
|
|
|
.data_value
|
|
line-height: 39px
|
|
position: absolute
|
|
top: 0
|
|
@include right(0)
|
|
@include padding(0, 10px, 0, 0)
|
|
|
|
.data_list_small
|
|
padding: 0
|
|
border-top: solid 1px #ddd
|
|
@include margin(8px, 0, 10px, 0)
|
|
li
|
|
padding: 3px 0
|
|
position: relative
|
|
border: none
|
|
margin: 0
|
|
border-bottom: dashed 1px #ddd
|
|
.data_label
|
|
text-transform: uppercase
|
|
color: #bbb
|
|
.data_value
|
|
line-height: 25px
|
|
position: absolute
|
|
top: 0
|
|
padding: 0
|
|
@include right(0)
|
|
|
|
.data_list_large
|
|
@extend .list-unstyled
|
|
padding: 0
|
|
@include margin(8px, 0, 10px, 0)
|
|
li
|
|
padding: 6px 0
|
|
position: relative
|
|
border: none
|
|
margin: 0
|
|
.data_label
|
|
line-height: 0.8em
|
|
small
|
|
font-size: 0.6em
|
|
.data_value
|
|
text-align: right
|
|
line-height: 0.6em
|
|
position: absolute
|
|
top: 0
|
|
@include right(0)
|
|
@include padding(8px, 0, 0, 0)
|
|
small
|
|
font-size: 0.5em
|
|
|
|
.data_list_vertical
|
|
@extend .list-unstyled
|
|
@extend .row
|
|
padding: 0
|
|
border: 1px solid #ddd
|
|
@include margin(0, 0, 10px, 0)
|
|
@include border-radius(3px)
|
|
li
|
|
@extend .col-xs-6
|
|
padding: 6px
|
|
@include border-left(solid 1px #ddd)
|
|
&:first-child
|
|
border: none
|
|
.data_label
|
|
min-height: 32px
|
|
display: block
|
|
line-height: 1em
|
|
text-align: center
|
|
.data_value
|
|
display: block
|
|
text-align: center
|
|
|
|
#dashtrends
|
|
header
|
|
margin-bottom: 0
|
|
#dashtrends_toolbar
|
|
margin: 0 -16px 10px
|
|
dl
|
|
@include box-shadow(0 0 0 2px white inset)
|
|
dt
|
|
color: #777
|
|
padding: 0
|
|
margin: 0
|
|
height: 2.6em
|
|
dd.data_value
|
|
color: #aaa
|
|
@extend .clearfix
|
|
small
|
|
font-size: 0.5em
|
|
dd.dash_trend
|
|
background-color: white
|
|
width: 80px
|
|
margin: 0 auto
|
|
@include border-radius(3px)
|
|
&:hover
|
|
dt, dd.data_value
|
|
color: $brand-primary
|
|
dt
|
|
text-decoration: underline
|
|
&.active
|
|
dt, dd.data_value
|
|
color: white
|
|
dl
|
|
cursor: pointer
|
|
margin: 0
|
|
min-height: 70px
|
|
text-align: center
|
|
background-color: white
|
|
padding: 10px
|
|
border-bottom: 1px solid #ddd
|
|
@include border-left(1px solid #ddd)
|
|
&:first-child
|
|
@include border-left(none)
|
|
&.active
|
|
background-color: $brand-primary
|
|
@include box-shadow(white 0 0 0 2px inset)
|
|
dt
|
|
color: white
|
|
dt
|
|
text-align: center
|
|
height: 37px
|
|
line-height: 1em
|
|
font: 400 1.1em/120% $headings-font-family
|
|
dd
|
|
span
|
|
font-size: 0.9em
|
|
white-space: nowrap
|
|
svg
|
|
height: 350px
|
|
|
|
#dashgoals
|
|
svg
|
|
height: 250px
|
|
|
|
#dashproducts
|
|
nav
|
|
margin-bottom: 10px
|
|
font: 400 1.1em/120% $headings-font-family
|
|
text-transform: uppercase
|
|
|
|
#dashaddons
|
|
background-color: white
|
|
border: 1px dashed #C0C0C0
|
|
@include border-radius(3px)
|
|
a
|
|
display: block
|
|
&:hover
|
|
text-decoration: none
|
|
padding: 10px 20px
|
|
font-size: 1.3em
|
|
text-align: center
|
|
|
|
#dashactivity
|
|
svg
|
|
height: 150px
|
|
|
|
.data_value
|
|
span, .dash_trend
|
|
@extend .data_loading
|
|
.loading
|
|
.data_value
|
|
min-width: 30px
|
|
text-align: center
|
|
&:before
|
|
@extend .icon-spin
|
|
@extend .icon
|
|
@extend .icon-refresh
|
|
font-size: 14px
|
|
color: #ccc
|
|
span, small
|
|
display: none
|
|
.data_trend
|
|
display: none
|
|
|
|
.tooltip-panel
|
|
padding: 10px
|
|
min-width: 150px
|
|
.tooltip-panel-heading
|
|
font: 400 1.2em/#{$line-height-base} $headings-font-family
|
|
text-align: center
|
|
margin-bottom: 10px
|
|
text-transform: uppercase
|
|
border-bottom: 1px solid #ccc
|
|
|
|
=animation($name,$value)
|
|
-webkit-animation-#{$name}: $value
|
|
animation-#{$name}: $value
|
|
|
|
=keyframes($name)
|
|
@-webkit-keyframes #{$name}
|
|
@content
|
|
@-moz-keyframes #{$name}
|
|
@content
|
|
@-ms-keyframes #{$name}
|
|
@content
|
|
@-o-keyframes #{$name}
|
|
@content
|
|
@keyframes #{$name}
|
|
@content
|
|
|
|
.data_loading
|
|
opacity: 1
|
|
+animation(name,bounceG)
|
|
+animation(duration,0.7s)
|
|
+animation(direction,linear)
|
|
+scaleX(0.7)
|
|
+scaleY(0.7)
|
|
|
|
+keyframes(bounceG)
|
|
0%
|
|
+opacity(0)
|
|
+scaleX(0.1)
|
|
+scaleY(0.1)
|
|
100%
|
|
+opacity(1)
|
|
+scaleX(1)
|
|
+scaleY(1)
|
|
|
|
#dash_version
|
|
@extend .panel
|
|
padding: 0!important
|
|
overflow: hidden
|
|
iframe
|
|
height: 80px
|
|
width: 100%
|
|
|
|
#calendar
|
|
button.btn-default.active
|
|
border-color: darken($brand-primary,10%)
|
|
color: white
|
|
font-weight: 700
|
|
background-color: $brand-primary
|
|
@include box-shadow(none)
|
|
@media (max-width: $screen-phone)
|
|
padding: 10px!important
|
|
button.btn-default
|
|
padding: 5px 5px
|