diff --git a/addons/point_of_sale/static/src/css/customer_facing_display.css b/addons/point_of_sale/static/src/css/customer_facing_display.css
index 37d57fcbd71..335204cfbda 100644
--- a/addons/point_of_sale/static/src/css/customer_facing_display.css
+++ b/addons/point_of_sale/static/src/css/customer_facing_display.css
@@ -122,8 +122,7 @@ body .pos-customer_facing_display .pos_orderlines .pos_orderlines_item.pos_order
   box-shadow: none;
   animation: none;
 }
-body .pos-customer_facing_display .pos_orderlines .pos_orderlines_item.pos_orderlines_header > div,
-body .pos-customer_facing_display .pos_orderlines .pos_orderlines_item.pos_orderlines_header > div:last-child {
+body .pos-customer_facing_display .pos_orderlines .pos_orderlines_item.pos_orderlines_header > div, body .pos-customer_facing_display .pos_orderlines .pos_orderlines_item.pos_orderlines_header > div:last-child {
   border-left-width: 0;
   text-align: center;
   font-size: 70%;
@@ -423,7 +422,7 @@ body .pos-customer_facing_display .pos-payment_info .pos-payment_info_details .p
     text-align: center;
   }
   body .pos-customer_facing_display .pos-payment_info .pos-company_logo {
-    display: none!important;
+    display: none !important;
   }
   body .pos-customer_facing_display .pos-payment_info .pos-payment_info_details {
     -webkit-box-flex: 1 0 100%;
@@ -439,6 +438,7 @@ body .pos-customer_facing_display .pos-payment_info .pos-payment_info_details .p
     font-size: 6.5vw;
   }
 }
+
 body .pos-hidden {
   opacity: 0;
 }
@@ -463,7 +463,7 @@ body.editor_enable #oe_manipulators .oe_overlay > .oe_overlay_options > .btn-gro
 }
 body.editor_enable #oe_manipulators .oe_overlay > .oe_overlay_options > .btn-group > .dropdown.oe_options.btn-group.snippet-option-pos_palette > .dropdown-menu > a {
   position: relative;
-  padding: 14px 0!important;
+  padding: 14px 0 !important;
   margin-bottom: 1px;
 }
 body.editor_enable #oe_manipulators .oe_overlay > .oe_overlay_options > .btn-group > .dropdown.oe_options.btn-group.snippet-option-pos_palette > .dropdown-menu > a:before {
@@ -473,6 +473,7 @@ body.editor_enable #oe_manipulators .no_parent_options .snippet-option-pos_palet
 body.editor_enable #oe_manipulators .no_parent_options .o_parent_editor_header {
   display: none;
 }
+
 .pos-palette_01 .pos-payment_info {
   background: #3E3E3E;
   color: #f6f6f6;
@@ -509,6 +510,7 @@ body.editor_enable #oe_manipulators .no_parent_options .o_parent_editor_header {
 #oe_manipulators .oe_overlay > .oe_overlay_options .snippet-option-pos_palette > .dropdown-menu > .pos-palette_01:before {
   text-shadow: 0 0 1px #090909;
 }
+
 .pos-palette_02 .pos-payment_info {
   background: #364152;
   color: #e6e7e8;
@@ -545,6 +547,7 @@ body.editor_enable #oe_manipulators .no_parent_options .o_parent_editor_header {
 #oe_manipulators .oe_overlay > .oe_overlay_options .snippet-option-pos_palette > .dropdown-menu > .pos-palette_02:before {
   text-shadow: 0 0 1px #130d09;
 }
+
 .pos-palette_03 .pos-payment_info {
   background: #1BA39C;
   color: #f6f6f6;
@@ -581,6 +584,7 @@ body.editor_enable #oe_manipulators .no_parent_options .o_parent_editor_header {
 #oe_manipulators .oe_overlay > .oe_overlay_options .snippet-option-pos_palette > .dropdown-menu > .pos-palette_03:before {
   text-shadow: 0 0 1px #131313;
 }
+
 .pos-palette_04 .pos-payment_info {
   background: #0b7b6c;
   color: #f6f6f6;
@@ -617,6 +621,7 @@ body.editor_enable #oe_manipulators .no_parent_options .o_parent_editor_header {
 #oe_manipulators .oe_overlay > .oe_overlay_options .snippet-option-pos_palette > .dropdown-menu > .pos-palette_04:before {
   text-shadow: 0 0 1px #101113;
 }
+
 .pos-palette_05 .pos-payment_info {
   background: #E26868;
   color: #f6f6f6;
@@ -653,6 +658,7 @@ body.editor_enable #oe_manipulators .no_parent_options .o_parent_editor_header {
 #oe_manipulators .oe_overlay > .oe_overlay_options .snippet-option-pos_palette > .dropdown-menu > .pos-palette_05:before {
   text-shadow: 0 0 1px #131313;
 }
+
 .pos-palette_06 .pos-payment_info {
   background: #9E373B;
   color: #f6f6f6;
@@ -689,6 +695,7 @@ body.editor_enable #oe_manipulators .no_parent_options .o_parent_editor_header {
 #oe_manipulators .oe_overlay > .oe_overlay_options .snippet-option-pos_palette > .dropdown-menu > .pos-palette_06:before {
   text-shadow: 0 0 1px #090909;
 }
+
 .pos-palette_07 .pos-payment_info {
   background: #ce9934;
   color: white;
@@ -725,6 +732,7 @@ body.editor_enable #oe_manipulators .no_parent_options .o_parent_editor_header {
 #oe_manipulators .oe_overlay > .oe_overlay_options .snippet-option-pos_palette > .dropdown-menu > .pos-palette_07:before {
   text-shadow: 0 0 1px #131313;
 }
+
 .pos-palette_08 .pos-payment_info {
   background: #a48c77;
   color: #f6f6f6;
@@ -761,6 +769,7 @@ body.editor_enable #oe_manipulators .no_parent_options .o_parent_editor_header {
 #oe_manipulators .oe_overlay > .oe_overlay_options .snippet-option-pos_palette > .dropdown-menu > .pos-palette_08:before {
   text-shadow: 0 0 1px #131313;
 }
+
 .pos-palette_09 .pos-payment_info {
   background: linear-gradient(30deg, #014d43, #127e71);
   color: #f6f6f6;
@@ -797,6 +806,7 @@ body.editor_enable #oe_manipulators .no_parent_options .o_parent_editor_header {
 #oe_manipulators .oe_overlay > .oe_overlay_options .snippet-option-pos_palette > .dropdown-menu > .pos-palette_09:before {
   text-shadow: 0 0 1px #131313;
 }
+
 .pos-palette_10 .pos-payment_info {
   background: linear-gradient(30deg, #e2316c, #ea4c89);
   color: white;
@@ -833,6 +843,7 @@ body.editor_enable #oe_manipulators .no_parent_options .o_parent_editor_header {
 #oe_manipulators .oe_overlay > .oe_overlay_options .snippet-option-pos_palette > .dropdown-menu > .pos-palette_10:before {
   text-shadow: 0 0 1px #131313;
 }
+
 .pos-palette_11 .pos-payment_info {
   background: linear-gradient(30deg, #362b3d, #5b4a63);
   color: white;
@@ -869,6 +880,7 @@ body.editor_enable #oe_manipulators .no_parent_options .o_parent_editor_header {
 #oe_manipulators .oe_overlay > .oe_overlay_options .snippet-option-pos_palette > .dropdown-menu > .pos-palette_11:before {
   text-shadow: 0 0 1px #131313;
 }
+
 .pos-palette_12 .pos-payment_info {
   background: #434343;
   color: #e6e6e6;
@@ -905,6 +917,7 @@ body.editor_enable #oe_manipulators .no_parent_options .o_parent_editor_header {
 #oe_manipulators .oe_overlay > .oe_overlay_options .snippet-option-pos_palette > .dropdown-menu > .pos-palette_12:before {
   text-shadow: 0 0 1px #a4a4a4;
 }
+
 .pos-palette_13 .pos-payment_info {
   background: linear-gradient(30deg, #1a1b1f, #3d3f45);
   color: white;
diff --git a/addons/point_of_sale/static/src/scss/customer_facing_display.scss b/addons/point_of_sale/static/src/scss/customer_facing_display.scss
index 90c32119f25..c4b800aaa47 100644
--- a/addons/point_of_sale/static/src/scss/customer_facing_display.scss
+++ b/addons/point_of_sale/static/src/scss/customer_facing_display.scss
@@ -99,7 +99,8 @@ body {
         @include flex-display;
         @include flex-direction(row);
 
-        .pos-customer_products, .pos-payment_info {
+        .pos-customer_products,
+        .pos-payment_info {
             height: 100%;
             padding: 2%;
             @include flex-display;
@@ -139,11 +140,14 @@ body {
                     box-shadow: none;
                     animation: none;
 
-                    > div, > div:last-child {
-                        border-left-width: 0;
-                        text-align: center;
-                        font-size: 70%;
-                        font-weight: normal;
+                    > div {
+                        &,
+                        &:last-child {
+                            border-left-width: 0;
+                            text-align: center;
+                            font-size: 70%;
+                            font-weight: normal;
+                        }
                     }
 
                     > div:last-child {
@@ -194,7 +198,8 @@ body {
             @include flex-direction(column);
             @include justify-content(space-between);
 
-            .pos-adv, .pos-company_logo {
+            .pos-adv,
+            .pos-company_logo {
                 @include pos-bg;
             }
 
@@ -212,7 +217,8 @@ body {
             }
 
             .pos-payment_info_details{
-                .pos-total, .pos-paymentlines {
+                .pos-total,
+                .pos-paymentlines {
                     @include flex-direction(row);
                     @include flex-display;
                     @include flex-wrap(wrap);
@@ -221,6 +227,7 @@ body {
 
                     > div {
                         @include flex(1 0 48%);
+
                         &:nth-child(even) {
                             font-weight: bold;
                             font-size: 120%;
@@ -440,7 +447,7 @@ body {
             }
         }
 
-        #oe_manipulators .oe_overlay > .oe_overlay_options > .btn-group> .dropdown.oe_options.btn-group.snippet-option-pos_palette > ul {
+        #oe_manipulators .oe_overlay > .oe_overlay_options > .btn-group> .dropdown.oe_options.btn-group.snippet-option-pos_palette > .dropdown-menu {
             min-width: 100px;
             max-width: 100px;
 
@@ -448,7 +455,7 @@ body {
                 display: none;
             }
 
-            > li > a {
+            > a {
                 position: relative;
                 padding: 14px 0!important;
                 margin-bottom: 1px;
@@ -460,7 +467,8 @@ body {
         }
 
         #oe_manipulators .no_parent_options {
-            .snippet-option-pos_palette, .o_parent_editor_header {
+            .snippet-option-pos_palette,
+            .o_parent_editor_header {
                 display: none;
             }
         }
@@ -469,7 +477,7 @@ body {
 
 
 // =========== PALETTE GENERATOR ===========
-.palette_variant (
+@mixin palette-variant (
     $bg-info: $color-gray-dark,
     $text-info: $color-gray-lighter,
     $bg-products: $color-gray-lighter,
@@ -504,7 +512,7 @@ body {
     }
 
     // Editor dropdown buttons
-    #oe_manipulators .oe_overlay > .oe_overlay_options .snippet-option-pos_palette > ul > li > & {
+    #oe_manipulators .oe_overlay > .oe_overlay_options .snippet-option-pos_palette > .dropdown-menu > & {
         background: $bg-products!important;
 
         &:after {
@@ -518,7 +526,7 @@ body {
         }
 
         &:before {
-            text-shadow: 0 0 1px (#fff - $bg-products);
+            text-shadow: 0 0 1px invert($bg-products);
         }
     }
 };