How to apply max width on JQuery Mobile panel

Question

I want a JQM left panel to use 80% of the screen with a max width of 440px and min width of 114px.

I use the following script to resize the panel to 80% but i can't see how to apply min and max width because of the translade3d values.

The code :

@left-panel-width: 80%;
@right-panel-width: 80%;

.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)
}

Answer 1

Seems like you are over-complicating (unless you have not specified all your requirements). Given a panel:

<div data-role="panel" id="mypanel" data-display="overlay">
    I am a panel
</div><!-- /panel -->

Simply add this CSS:

#mypanel.ui-panel {
  width: 80%;
  max-width: 440px;
  min-width: 114px;
}

DEMO