UNPKG

jquery-kpiwidgets

Version:

Inneractive jQuery widgets for presenting data in a KPI box

118 lines (100 loc) 2.24 kB
@font-face { font-family: KPIWidget; src: url('fonts/Gotham-Medium.otf'); } @font-face { font-family: KPIWidgetNumber; src: url('fonts/PT_DIN_Condensed_Cyrillic.ttf'); } .kpi-container-div{ display: table; } .kpi-item{ display: table-cell; padding-left: 13px; } .kpi-title { background-color: #f4f4f4; box-shadow: inset 0 -5px 20px rgba(0,0,0,.05); color: #3e3e3e; display: table; font-size: 14px; font-weight: bold; width: 100%; vertical-align: middle; } .kpi-title-text { display: table-cell; text-align: center; vertical-align: middle; } .kpi-footer-text { display: table-cell; font-size: 12px; color: #939393; text-align: center; vertical-align: middle; } .kpi-footer-text a{ color: #939393; } .kpi-trend-up { background: url("images/trend_up.png") no-repeat scroll right center rgba(0, 0, 0, 0); width: 30px; } .kpi-trend-down { background: url("images/trend_down.png") no-repeat scroll right center rgba(0, 0, 0, 0); width: 30px; } .kpi-trend-flat { width: 30px; } .kpi-trend-up-small { background: url("images/trend_up_small.png") no-repeat scroll center right rgba(0, 0, 0, 0); background-position: 5px; display: table-cell; height: 100%; width: 20px; } .kpi-trend-down-small { background: url("images/trend_down_small.png") no-repeat scroll center right rgba(0, 0, 0, 0); background-position: 5px; display: table-cell; height: 100%; width: 20px; } .kpi-trend-flat-small { display: table-cell; height: 100%; width: 20px; } .kpi-delta-up { display: table-cell; font-family: KPIWidgetNumber; font-size: 0.35em; height: 100%; vertical-align: middle; width: 34px; color: #9dd07c; text-align: center; /*border: 1px solid;*/ } .kpi-delta-down { display: table-cell; font-family: KPIWidgetNumber; font-size: 0.35em; height: 100%; vertical-align: middle; width: 34px; color: #e05d63; text-align: center; } .kpi-delta-flat { font-family: KPIWidgetNumber; font-size: 0.35em; height: 100%; vertical-align: middle; width: 34px; color: #fff; text-align: center; }