Jquery mobile changing panel width

mobile-panel-size.less

@left-panel-width: 17em;
@right-panel-width: 35em;

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

Here is what fixed it. The dismiss was positioned incorrectly. Here is the fixed rules.

.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: -@left-panel-width
}

.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: -@right-panel-width;
right: @right-panel-width
}

Really useful GIST. I added :

.ui-panel-animate.ui-panel-page-content-position-left {
    left: 0;
        right: 0;
        -webkit-transform: translate3d(@left-panel-width,0,0);
        -moz-transform: translate3d(@left-panel-width,0,0);
        transform: translate3d(@left-panel-width,0,0);
}

to push also the content correctly to the right when the left panel is open. I guess same should be done to the left push.

I needed to add this to modify the right panel, thanks to dawez for the pattern and suggestion ;)

.ui-panel-animate.ui-panel-page-content-position-right {
  left: 0;
  right: 0;
  -webkit-transform: translate3d(-@right-panel-width,0,0);
  -moz-transform: translate3d(-@right-panel-width,0,0);
  transform: translate3d(-@right-panel-width,0,0);
}