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

   1 @panelSpacing: 4px;
   2 @labelWidth: 120px;
   3 @decoratorPadding: 8px;
   4 @fieldDecoratorWidth: 180px;
   5 @fieldWidth: @fieldDecoratorWidth - (2 * @decoratorPadding);
   6 @iconWidth: 16px;
   7 @iconPadding: 4px;
   8 @iconFieldWidth: @fieldWidth - @iconWidth - (2 * @iconPadding);
   9
  10 .xv-workspace-container {
  11
  12   background: @white;
  13   .box-shadow(-2px -2px 6px rgba(0,0,0,0.20));
  14
  15   .xv-content-panel {
  16     .xv-header {
  17       .xv-navigator > .xv-header;
  18       padding: 6px 12px;
  19       border: none;
  20     }
  21   }
  22
  23   >.xv-menu-container {
  24     .xv-navigator > .xv-menu-container;
  25     .xv-header {
  26       .xv-navigator > .xv-header;
  27     }
  28   }
  29
  30   .xv-workspace {
  31     background-color: @white;
  32
  33     >.enyo-panels {
  34       width: 100% !important;
  35       height: 100% !important;
  36     }
  37
  38     // Standard button styling
  39     .xv-buttons {
  40       .onyx-button {
  41         border: 1px solid @smoke;
  42         &[disabled] {
  43           opacity: 0.6;
  44           cursor: default;
  45         }
  46       }
  47     }
  48
  49     // Inside the panel, the buttons are in a bar
  50     .panel {
  51       .xv-buttons {
  52         background-color: @lightest-gray;
  53         margin: 0;
  54         .onyx-button {
  55           border-radius: 0;
  56           margin: 0;
  57         }
  58       }
  59     }
  60
  61     .xv-workspace-panel {
  62
  63       .onyx-groupbox-header {
  64         padding: 6px 10px;
  65         border-bottom: 1px solid @smoke;
  66         background: @lightest-gray;
  67         color: @near-black;
  68         i {
  69           margin-right: 10px;
  70         }
  71       }
  72
  73       width: @defaultPanelWidth;
  74       margin: 0 @panelSpacing 0 2px;
  75       padding: 0;
  76       background: @ghost;
  77       text-overflow: ellipsis;
  78       border: 1px solid @smoke;
  79
  80       &.small-panel {
  81         width: 600px;
  82       }
  83       &.medium-panel {
  84         width: 700px;
  85       }
  86       &.large-panel {
  87         width: 800px;
  88       }
  89
  90       // fix labels with widget refactor
  91       .xv-label, .xv-decorated-label, .xv-flexible-label {
  92         width: @labelWidth !important;
  93         max-width: 100%;
  94         padding: 0 8px 0 6px;
  95         text-align: right;
  96         vertical-align: middle;
  97       }
  98       &.xv-assignment-box {
  99         .xv-flexible-label, .xv-label {
 100           width: 200px !important;
 101         }
 102       }
 103
 104       .xv-input {
 105         border-bottom: 1px solid @smoke;
 106         margin: 0px;
 107       }
 108
 109       .xv-relationwidget {
 110         .xv-description {
 111           overflow: hidden;
 112
 113           // This gives them 4 lines of description
 114           display: -webkit-box;
 115           -webkit-line-clamp: 4;
 116           -webkit-box-orient: vertical;
 117
 118           max-width: 250px;
 119           margin: 5px 5px 5px 80px;
 120           font-size: 0.9em;
 121
 122           &.disabled {
 123             color: @dim-gray;
 124           }
 125         }
 126       }
 127
 128       .enyo-fittable-columns-layout > * {
 129         vertical-align: middle;
 130       }
 131     }
 132
 133     .onyx-input-decorator {
 134       &.onyx-disabled {
 135         .disabled;
 136       }
 137     }
 138
 139     .xv-totals-panel {
 140       .onyx-input-decorator > input, * {
 141         font-size: @totalsFontSize;
 142       }
 143       .xv-input {
 144         border: none;
 145       }
 146     }
 147   }
 148 }