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

   1 /**
   2   Styles relating to Lists
   3 */
   4 .xv-list-header {
   5   background-color: @gray;
   6   color: @white;
   7   font-size: .6em;
   8   font-weight: bold;
   9   text-transform: uppercase;
  10   padding-top: 4px;
  11   padding-bottom: 4px;
  12   border-bottom: 1px solid @silver;
  13
  14   .xv-list-column {
  15     &.last {
  16       border-right: none;
  17     }
  18     &.name-column, &.first, &.second, &.third, &.short, &.small, &.medium, &.descr {
  19       padding-left: 7px;
  20     }
  21   }
  22 }
  23
  24 /* List */
  25 .xv-list-column {
  26   &.line-number {
  27     width: 30px;
  28     text-align: right;
  29   }
  30   &.name-column {
  31     width: 200px
  32   }
  33   &.right-column {
  34     width: 100px;
  35     text-align: right;
  36   }
  37   &.short {
  38     width: 100px;
  39   }
  40   &.small {
  41     width: 125px;
  42   }
  43   &.medium {
  44     width: 150px;
  45   }
  46   &.first {
  47     width: 300px;
  48   }
  49   &.second {
  50     width: 200px;
  51   }
  52   &.third {
  53     width: 100px;
  54   }
  55   &.money, &.quantity {
  56     width: 75px;
  57     text-align: right;
  58   }
  59   &.descr {
  60     width: 200px;
  61   }
  62   &.icon {
  63     width: 10px;
  64   }
  65 }
  66
  67 .xv-list {
  68   background: @ghost;
  69   .xv-list-item > * {
  70     display: inline-block;
  71     vertical-align: middle;
  72   }
  73
  74   .xv-list-item {
  75     background-color: @white;
  76     border-bottom: 1px solid @smoke;
  77     min-height: 32px;
  78     &.header {
  79       padding-top: 0;
  80     }
  81     &.inactive {
  82       background-color: @gray;
  83       color: @black;
  84       .xv-list-column {
  85         .xv-list-attr {
  86           background: transparent;
  87           &.placeholder {
  88             color: @gray;
  89           }
  90         }
  91       }
  92     }
  93     .xv-list-column {
  94       .list-icon {
  95         padding: 2px;
  96         color: @charcoal;
  97         vertical-align: sub;
  98         border: 1px solid @lightest-gray;
  99         .border-radius(2px);
 100       }
 101     }
 102     &.item-selected {
 103       background: @item-hilite-background;
 104       #gradient > .vertical(@item-hilite-background, @dark-slate-blue);
 105
 106       .xv-list-attr {
 107         color: @white;
 108         &.placeholder {
 109           font-style: italic;
 110           color: @sky-blue;
 111         }
 112         &.hyperlink {
 113           color: @bright-orange;
 114         }
 115         &.header {
 116           background: @sky-blue;
 117         }
 118       }
 119     }
 120     .xv-list-item-gear {
 121       position: absolute;
 122       right: 0px;
 123       z-index: 999;
 124     }
 125   }
 126   &.xv-grid-list {
 127     background: @ghost;
 128     .xv-list-item > * {
 129       vertical-align: top;
 130     }
 131     .xv-list-item {
 132       padding-top: 7px !important;
 133       padding-bottom: 9px !important;
 134       border-bottom: 1px solid @silver !important;
 135       background: @ghost;
 136       &.item-selected {
 137         background: @item-hilite-background;
 138         #gradient > .vertical(@item-hilite-background, @dark-slate-blue);
 139
 140         .xv-list-attr {
 141           color: @white;
 142           &.placeholder {
 143             font-style: italic;
 144             color: @sky-blue;
 145           }
 146           &.hyperlink {
 147             color: @bright-orange;
 148           }
 149           &.header {
 150             background: @sky-blue;
 151           }
 152         }
 153       }
 154       .xv-list-column {
 155         .xv-list-attr {
 156           font-size: 12px;
 157         }
 158         vertical-align: top;
 159         &.last {
 160           border-right: none;
 161         }
 162         &.name-column {
 163           padding-left: 7px;
 164         }
 165         &.first {
 166           padding-left: 7px;
 167         }
 168         &.second {
 169           padding-left: 7px;
 170         }
 171         &.third {
 172           padding-left: 7px;
 173         }
 174         &.short {
 175           padding-left: 7px;
 176         }
 177         &.small {
 178           padding-left: 7px;
 179         }
 180         &.medium {
 181           padding-left: 7px;
 182         }
 183         &.descr {
 184           padding-left: 7px;
 185         }
 186         .xv-list-attr {
 187           padding: 0px;
 188         }
 189       }
 190     }
 191   }
 192 }
 193
 194 .xv-list-attr {
 195   padding: 5px;
 196   font-size: .8em;
 197   white-space: nowrap;
 198   overflow: hidden;
 199   text-overflow: ellipsis;
 200   color: @black;
 201   &.header {
 202     padding: 4px;
 203     background: @gray;
 204     font-size: .7em;
 205     font-weight: bold;
 206     text-transform: uppercase;
 207     color: @white;
 208   }
 209   &.footer {
 210     padding: 4px;
 211     background: @gray;
 212     font-size: .7em;
 213     font-weight: bold;
 214     text-transform: uppercase;
 215     color: @black;
 216   }
 217   &.right {
 218     // TODO: get rid of this absolute positioning
 219     position: absolute;
 220     right: 10px;
 221   }
 222   &.text-align-right {
 223     text-align: right;
 224   }
 225   &.bold {
 226     font-weight: bold;
 227   }
 228   &.error {
 229     color: @bright-red;
 230   }
 231   &.emphasis {
 232     color: @green;
 233   }
 234   &.warn {
 235     color: @light-orange;
 236   }
 237   &.italic {
 238     font-style: italic;
 239   }
 240   &.placeholder {
 241     font-style: italic;
 242     color: @dim-gray;
 243   }
 244   &.hyperlink {
 245     color: @slate-blue;
 246     cursor: pointer;
 247   }
 248   &.disabled {
 249     color: @dim-gray;
 250   }
 251 }
 252
 253 /* Navigator */
 254 .xv-navigator-header {
 255   font-size: small;
 256   font-weight: bold;
 257   text-transform: uppercase;
 258   color: @orange;
 259   padding-left: 20px;
 260   border-bottom: 1px solid @near-black;
 261 }
 262
 263 .xv-workspace-header {
 264   color: @white;
 265   white-space: nowrap;
 266   overflow: hidden;
 267   text-overflow: ellipsis;
 268   padding: 8px 0 0 8px;
 269 }