git.roojs.org Git - xtuple/blob - lib/enyo-x/source/less/dashboard.less

   1
   2 /*
   3   Styles relating to the dashboard
   4 */
   5
   6 /*
   7   Variables for widths/colors
   8 */
   9 @tile-width: 500px;
  10 @tile-height: 250px;
  11 @picker-label: 100px;
  12 @bottom-border: #444;
  13 @icon-height: 32px;
  14 @title-height: 48px;
  15
  16 .dashboard {
  17   background-color: @gray;
  18
  19   .charts-panels {
  20     overflow-y: auto;
  21   }
  22
  23   /*
  24     These styles will only be used
  25     if the chart is in a dashboard
  26   */
  27   .selectable-chart {
  28     width: @tile-width;
  29     height: @tile-height;
  30
  31     .chart-title-bar {
  32       width: @tile-width;
  33     }
  34   }
  35
  36   .nvtooltip {
  37     color: black;
  38   }
  39 }
  40
  41 .selectable-chart {
  42   margin: 10px;
  43   color: @slate-blue;
  44   overflow: hidden;
  45
  46   .xv-list-item {
  47     border-bottom: 1px solid grey;
  48     box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
  49     .long {
  50       padding-left: 7px;
  51       width: 250px;
  52     }
  53   }
  54
  55   .onyx-popup {
  56     margin-top:40px;
  57     margin-left:200px;
  58   }
  59
  60   .chart-title-bar {
  61     height: @title-height;
  62     background-color: @lightest-gray;
  63     text-transform: none;
  64     .border-top-radius(10px);
  65
  66     .chart-title {
  67       padding-top: 8px;
  68       color: @black;
  69       text-align: center;
  70       /*font-size: 2em;*/
  71       font-weight: normal;
  72       font-family: Helvetica;
  73     }
  74
  75     .chart-sub-title {
  76       /*padding-top: 8px;*/
  77       color: @blue;
  78       text-align: center;
  79       font-size: small;
  80       font-weight: normal;
  81       font-family: Helvetica;
  82     }
  83
  84     .remove-icon {
  85       position: absolute;
  86       top: 0;
  87       right: 0;
  88     }
  89
  90     .icon-filter {
  91        color: @black;
  92        position: absolute;
  93        right: 35px;
  94     }
  95   }
  96
  97   .chart-bottom {
  98     background-color: @white;
  99     border: 1px solid @bottom-border;
 100     border-top: none;
 101     .border-bottom-radius(10px);
 102
 103     .xv-picker-label {
 104       width: @picker-label;
 105       color: @black;
 106     }
 107
 108     .onyx-button {
 109       width: 130px;
 110       padding: 10px 10px;
 111     }
 112   }
 113
 114   .chart-filterDrawer {
 115     top: 0px;
 116   }
 117
 118   /*  The chart-filters may not be need as we are using the class xv-pullout
 119       for styles.  Delete when finished hacking the filter styles.
 120
 121   .chart-filters {
 122           background-color: @white;
 123
 124           -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
 125           -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
 126           box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
 127   }
 128
 129   .chart-filters .xv-parameter-panel {
 130           background-color: @ghost;
 131           border: 1px solid @smoke;
 132           margin: 0 4px 6px 0;
 133           width: 100%;
 134   }
 135
 136   .chart-filters.xv-parameter-panel .onyx-groupbox-header {
 137           padding: 6px 10px;
 138           border-bottom: 1px solid @smoke;
 139           background: @lightest-gray;
 140           color: @near-black;
 141   }
 142
 143   .chart-filters.xv-parameter-panel .enyo-fittable-columns-layout {
 144           border-bottom: 1px solid @smoke;
 145           background: @white;
 146     color: @near-black;
 147     position: relative;
 148     text-align: left;
 149     white-space: nowrap;
 150   }
 151
 152   .chart-filters.xv-parameter-panel .enyo-fittable-columns-layout > * {
 153     vertical-align: middle;
 154   }
 155
 156   .chart-filters.xv-parameter-panel .xv-label {
 157     text-align: right;
 158   }
 159
 160   */
 161
 162 }