Jelte, that CSS is a good starting point, but it actually causes the widget to not display. I ended up using following:
.slideout-control {
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: rotate(-90deg) translate(0%, -50%);
-moz-transform: rotate(-90deg) translate(0%, -50%);
-ms-transform: rotate(-90deg) translate(0%, -50%);
-o-transform: rotate(-90deg) translate(0%, -50%);
transform: rotate(-90deg) translate(0%, -50%);
}
You'll probably have to add some css to your custom.css in your theme folder (or the sass if you are doing other styling). Add this:
.slideout-control {
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: rotate(-90deg) translate(50%, 50%);
-moz-transform: rotate(-90deg) translate(50%, 50%);
-ms-transform: rotate(-90deg) translate(50%, 50%);
-o-transform: rotate(-90deg) translate(50%, 50%);
transform: rotate(-90deg) translate(50%, 50%);
}
I've copied and edited it from here: https://github.com/appronto/-Slide-In-Slide-Out-widget/blob/master/src/SlideOut/widget/ui/SlideOutContext.css
(Assuming it is this widget)
Hello Eric,
kindly use the below code inside the custom.css file in order to reflect the text to bottom->top readable, and please change the number of "right" as you see fit.
.slideout-control {
-webkit-transform: rotate(-180deg) translate(50%, 50%);
transform: rotate(-180deg) translate(50%, 50%);
right: -20px;
}