title: Change the width of the JQM panels
body: <p>I ma trying to figure out how to change the width of the JQM panel animation. I can change the width of the content in the panel, but the animation still opens in a predefined width I don't know how to change.</p>
  
  <p>Here is what I have tried and which changes the content.</p>
  
  <pre><code>.ui-panel {
      width: 150px;
  }
  </code></pre>
  
  <p>I have looked through the JQM docs but havent found the solution. Hoping for help :-)</p>
  
  <h1>EDIT</h1>
  
  <p>Well, actually, I found this script which does the work, but... Only if I change all the @left-panel-width with an actual width like 150px? Why wont the @left-panel-width work?</p>
  
  <pre><code>@left-panel-width: 100px;
  @right-panel-width: 100px;
  
  .ui-panel {
      width: @left-panel-width;
  }
  
  .ui-panel.ui-panel-position-right {
      width: @right-panel-width;
  }
  
  .ui-panel.ui-panel-closed {
      width: 0;
  }
  
  .ui-panel-position-left {
      left: -@left-panel-width;
  }
  
  .ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay, .ui-panel-animate.ui-panel-position-left.ui-panel-display-push {
      -webkit-transform: translate3d(-@left-panel-width, 0, 0);
      -moz-transform: translate3d(-@left-panel-width, 0, 0);
      transform: translate3d(-@left-panel-width, 0, 0)
  }
  
  .ui-panel-position-right {
      right: -@right-panel-width
  }
  
  .ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay, .ui-panel-animate.ui-panel-position-right.ui-panel-display-push {
      -webkit-transform: translate3d(@right-panel-width, 0, 0);
      -moz-transform: translate3d(@right-panel-width, 0, 0);
      transform: translate3d(@right-panel-width, 0, 0)
  }
  
  .ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open, .ui-panel-content-wrap-position-left.ui-panel-content-wrap-open, .ui-panel-dismiss-position-left.ui-panel-dismiss-open {
      left: @left-panel-width;
      right: -@right-panel-width
  }
  
  .ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, .ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push {
      -webkit-transform: translate3d(@left-panel-width, 0, 0);
      -moz-transform: translate3d(@left-panel-width, 0, 0);
      transform: translate3d(@left-panel-width, 0, 0)
  }
  
  .ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open, .ui-panel-content-wrap-position-right.ui-panel-content-wrap-open, .ui-panel-dismiss-position-right.ui-panel-dismiss-open {
      left: -@left-panel-width;
      right: @right-panel-width
  }
  
  .ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, .ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, .ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, .ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push {
      -webkit-transform: translate3d(-@right-panel-width, 0, 0);
      -moz-transform: translate3d(-@right-panel-width, 0, 0);
      transform: translate3d(-@right-panel-width, 0, 0)
  }
  
  @media (min-width:55em) {
      .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-left, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-left {
          margin-right: @right-panel-width
      }
  
      .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-right, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
          margin-left: @left-panel-width
      }
  }
  </code></pre>
  
  <p>Thanks in advance ;-)</p>