LG GP1 HTML RTL Guide

HTML and CSS for RTL are automatically generated by Gulp.

• After Gulp converts the html and css files into the dist folder using pug and scss,create RTL files using compiled HTML and CSS files.
• SCSS changes for RTL
  If you need to modify the style for an RTL page, please use the following:

  - When variables are not used

  .selector {color: $black; transform: #{'/*!rtl:rotate(0)*/'} rotate($degree180);}
.selector {color: $black; transform: rotate($degree180) #{'/*!rtl:rotate(0)*/'}; /* RTL last keep semicolon */}

  - When using variables

  .selector {color: $black; transform: #{'/*!rtl:rotate(#{$degree180})*/'} rotate(0);}
.selector {color: $black; transform: rotate(0) #{'/*!rtl:rotate(#{$degree180})*/'}; /* RTL last keep semicolon */}

  * You can put a comment for RTL after the value, but it may fail because the final semicolon is deleted.

  To prevent this, place a comment for RTL before the value or add any comment after the last semicolon.

• Ignore
  If you do not want to change the left and right sides when converting CSS for RTL, you can add an ignore comment as follows..selector {
   /*!rtl:ignore*/
   text-align: right;
}