@rio-cloud/rio-uikit 0.16.1-beta.24 → 0.16.2-beta.2

package/themes/Website/styles/rio-website.less

@@ -1,6 +1,9 @@
 // Core
 @import (less) '../../../styles/rio-uikit-core.less';
 
+// Theme
+// @hasDarkmode: false;
+
 // Utility Classes
 @import (less) '../../../styles/design/responsive/_imports.less';
 .import-reponsive(
@@ -32,8 +35,8 @@
 @mobile-breakpoint: @screen-ls;
 
 // Colors
-@text-color: @color-black;
-.text-color-darkest { color: @text-color !important }
+@brand-man: #e40045;
+.text-color-darkest { color: var(--color-black) !important }
 
 .svg-color-primary { filter: invert(53%) sepia(50%) saturate(562%) hue-rotate(137deg) brightness(104%) contrast(92%) }
 .svg-color-coldplay-wine { filter: invert(10%) sepia(28%) saturate(7014%) hue-rotate(287deg) brightness(100%) contrast(102%) }
@@ -59,50 +62,50 @@
 
 [class*="bg-"] { color: inherit }
 
-.bg-color-coldplay-wine { background-color: @color-coldplay-wine !important }
-.bg-color-coldplay-aubergine { background-color: @color-coldplay-aubergine !important }
-.bg-color-coldplay-kashmir { background-color: @color-coldplay-kashmir !important }
-.bg-color-coldplay-fountain { background-color: @color-coldplay-fountain !important }
-.bg-color-coldplay-turquoise { background-color: @color-coldplay-turquoise !important }
-.bg-color-coldplay-bermuda { background-color: @color-coldplay-bermuda !important }
-.bg-color-coldplay-moos { background-color: @color-coldplay-moos !important }
-.bg-color-coldplay-primrose { background-color: @color-coldplay-primrose !important }
-.bg-color-coldplay-khaki { background-color: @color-coldplay-khaki !important }
-.bg-color-warmup-crimson { background-color: @color-warmup-crimson !important }
-.bg-color-warmup-victoria { background-color: @color-warmup-victoria !important }
-.bg-color-warmup-cadillac { background-color: @color-warmup-cadillac !important }
-.bg-color-warmup-raspberry { background-color: @color-warmup-raspberry !important }
-.bg-color-warmup-cerise { background-color: @color-warmup-cerise !important }
-.bg-color-warmup-charm{ background-color: @color-warmup-charm !important }
-.bg-color-warmup-salmon { background-color: @color-warmup-salmon !important }
-.bg-color-warmup-cherokee { background-color: @color-warmup-cherokee !important }
-.bg-color-warmup-corn { background-color: @color-warmup-corn !important }
-.bg-color-black { background-color: @color-black !important }
-.bg-color-white { background-color: @color-white !important }
-.bg-color-primary { background-color: @color-highlight !important }​
+.bg-color-coldplay-wine { background-color: var(--color-coldplay-wine) !important }
+.bg-color-coldplay-aubergine { background-color: var(--color-coldplay-aubergine) !important }
+.bg-color-coldplay-kashmir { background-color: var(--color-coldplay-kashmir) !important }
+.bg-color-coldplay-fountain { background-color: var(--color-coldplay-fountain) !important }
+.bg-color-coldplay-turquoise { background-color: var(--color-coldplay-turquoise) !important }
+.bg-color-coldplay-bermuda { background-color: var(--color-coldplay-bermuda) !important }
+.bg-color-coldplay-moos { background-color: var(--color-coldplay-moos) !important }
+.bg-color-coldplay-primrose { background-color: var(--color-coldplay-primrose) !important }
+.bg-color-coldplay-khaki { background-color: var(--color-coldplay-khaki) !important }
+.bg-color-warmup-crimson { background-color: var(--color-warmup-crimson) !important }
+.bg-color-warmup-victoria { background-color: var(--color-warmup-victoria) !important }
+.bg-color-warmup-cadillac { background-color: var(--color-warmup-cadillac) !important }
+.bg-color-warmup-raspberry { background-color: var(--color-warmup-raspberry) !important }
+.bg-color-warmup-cerise { background-color: var(--color-warmup-cerise) !important }
+.bg-color-warmup-charm{ background-color: var(--color-warmup-charm) !important }
+.bg-color-warmup-salmon { background-color: var(--color-warmup-salmon) !important }
+.bg-color-warmup-cherokee { background-color: var(--color-warmup-cherokee) !important }
+.bg-color-warmup-corn { background-color: var(--color-warmup-corn) !important }
+.bg-color-black { background-color: var(--color-black) !important }
+.bg-color-white { background-color: var(--color-white) !important }
+.bg-color-primary { background-color: var(--color-highlight) !important }​
 
 .text-color-placeholder { color: transparent }
-.text-color-coldplay-wine { color: @color-coldplay-wine !important }
-.text-color-coldplay-kashmir { color: @color-coldplay-kashmir !important }
-.text-color-coldplay-aubergine { color: @color-coldplay-aubergine !important }
-.text-color-coldplay-fountain { color: @color-coldplay-fountain !important }
-.text-color-coldplay-turquoise { color: @color-coldplay-turquoise !important }
-.text-color-coldplay-bermuda { color: @color-coldplay-bermuda !important }
-.text-color-coldplay-moos { color: @color-coldplay-moos !important }
-.text-color-coldplay-primrose { color: @color-coldplay-primrose !important }
-.text-color-coldplay-khaki { color: @color-coldplay-khaki !important }
-.text-color-warmup-crimson { color: @color-warmup-crimson !important }
-.text-color-warmup-victoria { color: @color-warmup-victoria !important }
-.text-color-warmup-cadillac { color: @color-warmup-cadillac !important }
-.text-color-warmup-raspberry { color: @color-warmup-raspberry !important }
-.text-color-warmup-cerise { color: @color-warmup-cerise !important }
-.text-color-warmup-charm { color: @color-warmup-charm !important }
-.text-color-warmup-salmon { color: @color-warmup-salmon !important }
-.text-color-warmup-cherokee { color: @color-warmup-cherokee !important }
-.text-color-warmup-corn { color: @color-warmup-corn !important }
-.text-color-black { color: @color-black !important }
-.text-color-white { color: @color-white !important }
-.text-color-primary { color: @color-highlight !important }
+.text-color-coldplay-wine { color: var(--color-coldplay-wine) !important }
+.text-color-coldplay-kashmir { color: var(--color-coldplay-kashmir) !important }
+.text-color-coldplay-aubergine { color: var(--color-coldplay-aubergine) !important }
+.text-color-coldplay-fountain { color: var(--color-coldplay-fountain) !important }
+.text-color-coldplay-turquoise { color: var(--color-coldplay-turquoise) !important }
+.text-color-coldplay-bermuda { color: var(--color-coldplay-bermuda) !important }
+.text-color-coldplay-moos { color: var(--color-coldplay-moos) !important }
+.text-color-coldplay-primrose { color: var(--color-coldplay-primrose) !important }
+.text-color-coldplay-khaki { color: var(--color-coldplay-khaki) !important }
+.text-color-warmup-crimson { color: var(--color-warmup-crimson) !important }
+.text-color-warmup-victoria { color: var(--color-warmup-victoria) !important }
+.text-color-warmup-cadillac { color: var(--color-warmup-cadillac) !important }
+.text-color-warmup-raspberry { color: var(--color-warmup-raspberry) !important }
+.text-color-warmup-cerise { color: var(--color-warmup-cerise) !important }
+.text-color-warmup-charm { color: var(--color-warmup-charm) !important }
+.text-color-warmup-salmon { color: var(--color-warmup-salmon) !important }
+.text-color-warmup-cherokee { color: var(--color-warmup-cherokee) !important }
+.text-color-warmup-corn { color: var(--color-warmup-corn) !important }
+.text-color-black { color: var(--color-black) !important }
+.text-color-white { color: var(--color-white) !important }
+.text-color-primary { color: var(--color-highlight) !important }
 
 .hyphens {
   hyphens: auto;
@@ -328,7 +331,7 @@ body .module-content {
         }
 
         &.navigationItem .ActionBarItemIcon {
-          color: @color-black;
+          color: var(--color-black);
         }
       }
     }
@@ -360,10 +363,10 @@ body .module-content {
       }
 
       .SubmoduleNavigation {
-        background: white;
-        border-bottom: 1px solid @gray-light;
-        border-left: 1px solid @gray-light;
-        border-right: 1px solid @gray-light;
+        background: var(--color-white);
+        border-bottom: 1px solid var(--gray-light);
+        border-left: 1px solid var(--gray-light);
+        border-right: 1px solid var(--gray-light);
         display: none;
         left: 0;
         position: absolute;
@@ -464,7 +467,7 @@ body .module-content {
 
     &[class*="opacity-"] {
       &:before {
-        background: #000000;
+        background: var(--always-color-black);
         bottom: 0;
         content: "";
         left: 0;
@@ -534,7 +537,7 @@ body .module-content {
 
           &.box-shadow-inner {
             > .section-content-container {
-              box-shadow: 0 0 10px 5px rgba(0,0,0,.25) !important
+              box-shadow: 0 0 10px 5px .hsla(@color-black-hsl, 0.25)[@result] !important
             }
           }
 
@@ -560,7 +563,7 @@ body .module-content {
 
           &.link-color-white {
             a:not(.btn) {
-              color: @color-white;
+              color: var(--color-white);
             }
           }
 
@@ -576,57 +579,51 @@ body .module-content {
 
           &.btn-default {
             .btn {
-              .button-variant(
-                ~'!important';
-                @btn-default-bg;
-                @btn-default-border;
-                @btn-default-color;
-                @btn-default-color;
-                @btn-default-color;
-                @btn-default-color;
-                darken(@btn-default-color, 17%);
-                darken(@btn-default-border, 12%);
-                darken(@btn-default-border, 12%);
-                darken(@btn-default-border, 25%);
-                darken(@btn-default-border, 25%);
-                @btn-default-bg;
-                @btn-default-bg;
-                @btn-default-bg;
-                @btn-default-bg;
+              .button-style(
+                ~'';
+                @brand-primary;
+                .hex-to-LESS-hsl(@color-white)[@result];
+                .hex-to-LESS-hsl(@brand-primary)[@result];
+
+                var(--brand-primary);
+                darken(@brand-primary, @btn-active-brightness);
+
+                var(--brand-primary);
+                darken(@brand-primary, @btn-active-border-brightness);
+
+                @color-white;
+                @color-white;
               );
             }
           }
 
           &.btn-white {
             .btn {
-              .button-variant(
+              .button-style(
                 ~'!important';
-                @color-white;
-                darken(@color-white, 5%);
                 @color-black;
-                darken(@color-white, 3%);
+                .hex-to-LESS-hsl(@color-white)[@result];
+                .hex-to-LESS-hsl(@color-white)[@result];
               );
             }
           }
 
           &.btn-primary {
             .btn {
-              .button-variant(
+              .button-style(
                 ~'!important';
-                @btn-primary-bg;
-                @btn-primary-border;
-                @btn-primary-color;
+                @color-white;
+                .hex-to-LESS-hsl(@brand-primary)[@result];
               );
             }
           }
 
           &.btn-man {
             .btn {
-              .button-variant(
+              .button-style(
                 ~'!important';
-                #e40045;
-                darken(#e40045, 5%);
                 @color-white;
+                .hex-to-LESS-hsl(@brand-man)[@result];
               );
 
               font-family: "MANEurope", sans-serif !important;
@@ -692,7 +689,7 @@ body .module-content {
 
               .section-content-container-headline {
                 padding: 10px 20px;
-                background: @color-black;
+                background: var(--color-black);
                 text-transform: uppercase;
                 width: fit-content;
 
@@ -707,7 +704,7 @@ body .module-content {
                   transform: translate(-100%, -100%);
                   text-align: center;
                   line-height: 20px;
-                  color: @color-black;
+                  color: var(--color-black);
                   font-size: 40px;
                 }
               }
@@ -727,7 +724,7 @@ body .module-content {
 
             &.panel-border-color-lighter {
               > .section-content-container.panel {
-                border-color: @gray-lighter;
+                border-color: var(--gray-lighter);
               }
             }
           }
@@ -893,7 +890,7 @@ body .module-content {
 
               .section-content-container {
                 flex: initial !important;
-                background: @color-black;
+                background: var(--color-black);
 
                 .section-content-container-row {
                   font-family: 'Red Ring Bold', Helvetica, Arial, sans-serif;
@@ -992,11 +989,11 @@ body .module-content {
         }
 
         &:not(.marketplace) a {
-          color: @color-white;
+          color: var(--color-white);
         }
 
         &.marketplace a {
-          color: @color-black
+          color: var(--color-black)
         }
 
         &.minimal ul.text-center {
@@ -1253,12 +1250,12 @@ body .module-content {
 
                     @media (max-width: @screen-ls) {
                       width: 100%;
-                      background: rgba(0, 0, 0, 0.5);
+                      background: .hsla(@always-color-black-hsl, 0.5)[@result];
                     }
 
                     @media (min-width: @screen-ls) {
                       width: 75%;
-                      background: linear-gradient(90deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
+                      background: linear-gradient(90deg, .hsla(@always-color-black-hsl, 0.65)[@result], .hsla(@always-color-black-hsl, 0)[@result]);
                     }
                   }
                 }
@@ -1332,8 +1329,8 @@ body .module-content {
 
                     li {
                       padding: 5px 7px;
-                      border: 1px solid @gray-light;
-                      background: @gray-lightest;
+                      border: 1px solid var(--gray-light);
+                      background: var(--gray-lightest);
                       border-radius: 3px;
 
                       &:last-child {
@@ -1396,11 +1393,10 @@ body .module-content {
 
                   // reset to primary because of default btn-black
                   .btn {
-                    .button-variant(
+                    .button-style(
                       ~'!important';
-                      @btn-primary-bg;
-                      @btn-primary-border;
-                      @btn-primary-color;
+                      @color-white;
+                      .hex-to-LESS-hsl(@brand-primary)[@result];
                     );
                   }
                 }
@@ -1416,12 +1412,12 @@ body .module-content {
 
                     @media (max-width: @screen-ls) {
                       width: 100%;
-                      background: rgba(0, 0, 0, 0.5);
+                      background: .hsla(@always-color-black-hsl, 0.5)[@result];
                     }
 
                     @media (min-width: @screen-ls) {
                       width: 75%;
-                      background: linear-gradient(90deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
+                      background: linear-gradient(90deg, .hsla(@always-color-black-hsl, 0.65)[@result], .hsla(@always-color-black-hsl, 0)[@result]);
                     }
                   }
                 }
@@ -1471,8 +1467,8 @@ body .module-content {
       &-details-buyframe {
         .section-layout-container {
           .section-layout-container-row {
-            background-color: @color-white;
-            border: 1px solid @gray-light;
+            background-color: var(--color-white);
+            border: 1px solid var(--gray-light);
             margin: 0 0 -1px 0;
             padding: 3% 5%;
           }
@@ -1482,8 +1478,8 @@ body .module-content {
       &-details-panel {
         .section-layout-container {
           .section-layout-container-row {
-            background-color: @color-white;
-            border: 1px solid @gray-light;
+            background-color: var(--color-white);
+            border: 1px solid var(--gray-light);
             margin: 0 0 20px 0;
             padding: 5%;
 
@@ -1525,11 +1521,10 @@ body .module-content {
                   }
 
                   .btn {
-                    .button-variant(
+                    .button-style(
                       ~'!important';
-                      #e40045;
-                      darken(#e40045, 5%);
                       @color-white;
+                      .hex-to-LESS-hsl(@brand-man)[@result];
                     );
 
                     font-family: "MANEurope", sans-serif !important;
@@ -1566,7 +1561,7 @@ body .module-content {
 
                 .section-content-container {
                   flex: initial !important;
-                  background: @color-black;
+                  background: var(--color-black);
                 }
               }
             }
@@ -1696,7 +1691,7 @@ body .module-content {
       .section-content-container-background-image {
         &[class*="opacity-"] {
           &:before {
-            background: #ffffff;
+            background: var(--color-white);
           }
         }
       }
@@ -1707,7 +1702,7 @@ body .module-content {
     @media (max-width: @screen-md) {
       .marketplace-search-header {
         &:before {
-          background: linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,.50));
+          background: linear-gradient(0deg,.hsla(@always-color-black-hsl, 0.85)[@result],.hsla(@always-color-black-hsl, 0.5)[@result]);
           bottom: 0;
           content: "";
           left: 0;
@@ -1838,7 +1833,7 @@ body .module-content {
 
 // Theme
 html {
-  background-color: @color-white;
+  background-color: var(--color-white);
 }
 
 body {
@@ -1849,7 +1844,7 @@ body {
   @media (min-width: @responsive-font-breakpoint) { font-size: @font-size-16 * 1.25 }
 }
 
-.box-shadow { box-shadow: 0 0 10px 5px rgba(0,0,0,.25) !important }
+.box-shadow { box-shadow: 0 0 10px 5px .hsla(@always-color-black-hsl, 0.25)[@result] !important }
 
 iframe {
   border: none;
@@ -1885,6 +1880,37 @@ blockquote {
   }
 }
 
+.btn.btn-dynamic {
+  font-size: inherit !important;
+  line-height: inherit !important;
+  padding: 10px 20px !important;
+  height: auto !important;
+  text-transform: none !important;
+
+  &.btn-black {
+    .button-style(
+      ~'!important';
+      @color-white;
+      .hex-to-LESS-hsl(@color-black)[@result];
+      .hex-to-LESS-hsl(@color-black)[@result];
+
+      lighten(@color-black, 5%);
+      lighten(@color-black, 10%);
+
+      @color-black
+      @color-black
+    );
+  }
+
+  &.btn-white {
+    .button-style(
+      ~'!important';
+      @color-black;
+      .hex-to-LESS-hsl(@color-white)[@result];
+    );
+  }
+}
+
 @media (max-width: @screen-ls) {
   .btn.btn-dynamic {
     display: inline-block;
@@ -1920,7 +1946,7 @@ blockquote {
 }
 
 .text-shadow {
-  text-shadow: 1px 1px 3px rgba(0,0,0,0.85);
+  text-shadow: 1px 1px 3px .hsla(@always-color-black-hsl, 0.85)[@result];
 
   .btn,
   .input-group {
@@ -1962,11 +1988,10 @@ blockquote {
       > .btn {
         border-radius: 4px;
 
-        .button-variant(
+        .button-style(
           ~'!important';
-          @btn-primary-bg;
           @color-white;
-          @btn-primary-color;
+          .hex-to-LESS-hsl(@brand-primary)[@result];
         );
       }
 
@@ -1984,7 +2009,7 @@ blockquote {
     > .modal-header-close {
       background: none;
       border: none;
-      color: @gray-dark;
+      color: var(--gray-dark);
       float: right;
       font-size: 30px;
       line-height: 55px;
@@ -2117,7 +2142,7 @@ form[id*="contactForm"] {
   }
 
   .column-icon {
-    color: @color-white;
+    color: var(--color-white);
     font-size: 60px;
     left: 50%;
     position: absolute;
@@ -2134,7 +2159,7 @@ form[id*="contactForm"] {
 
     &.scroll-horizontal {
       &:before {
-        background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1));
+        background: linear-gradient(90deg, .hsla(@color-white-hsl, 0)[@result], .hsla(@color-white-hsl, 1)[@result]);
         bottom: 1px;
         content: "";
         position: absolute;
@@ -2165,7 +2190,7 @@ body:not(.legal-documents) {
       }
     }
 
-    @media (max-width: @screen-ls) {
+    // @media (max-width: @screen-ls) {
       > .table {
         > thead,
         > tbody,
@@ -2178,7 +2203,7 @@ body:not(.legal-documents) {
           }
         }
       }
-    }
+    // }
   }
 }
 
@@ -2201,7 +2226,7 @@ body:not(.legal-documents) {
 .section-wrapper {
   &[class*="clip-"]:after {
     content: "";
-    background: @color-white;
+    background: var(--color-white);
     width: 100%;
     position: absolute;
     z-index: 1;
@@ -2216,11 +2241,11 @@ body:not(.legal-documents) {
   }
 
   &[class*="clip-white"]:after {
-    background: @color-white
+    background: var(--color-white)
   }
 
   &[class*="clip-lightest"]::after {
-    background: @gray-lightest
+    background: var(--gray-lightest)
   }
 
   &.clip-top-ltr:after {

package/themes/Xmas/styles/rio-xmas.less

@@ -1,36 +1,66 @@
-/* Backgrounds - Map Marker */
+// Theme
+@hasDarkmode: false;
+
+// adding a new xmas map marker
+@color-white: #ffffff;
 @color-map-marker-xmas: #dd0a2c;
 
-.rio-map-marker {
-    &.active {
-        .rio-map-icon {
-            &:before {
-                color: @color-map-marker-xmas;
-            }
-        }
-    }
+@colors-map-marker-custom: {
+  map-marker-xmas: @color-map-marker-xmas;
 }
 
-@rioglyph-truck: "\f17b";
-.rioglyph-truck:before,
-.hover-rioglyph-truck:hover:before {
-	content: "\f17b";
-}
+each(@colors-map-marker-custom, {
+  .bg-@{key} {
+    color: @color-white !important;
+    background-color: @value !important;
+  }
+  .hover-bg-@{key}:hover {
+    background-color: @value !important;
+  }
+  .fill-@{key} {
+    fill: @value !important;
+  }
+})
 
-@rioglyph-bus: "\f17b";
-.rioglyph-bus:before,
-.hover-rioglyph-bus:hover:before {
-	content: "\f17b";
-}
+each(@colors-map-marker-custom, {
+  .border-color-@{key} {
+    border-color: @value !important;
+  }
+})
 
-@rioglyph-van: "\f17b";
-.rioglyph-van:before,
-.hover-rioglyph-van:hover:before {
-	content: "\f17b";
-}
 
-@rioglyph-user: "\f17c";
-.rioglyph-user:before,
-.hover-rioglyph-user:hover:before {
-	content: "\f17c";
-}
+// replacing all TRUCK, BUS, VAN and User icons
+
+// .rio-map-marker {
+//     &.active {
+//         .rio-map-icon {
+//             &:before {
+//                 color: @color-map-marker-xmas;
+//             }
+//         }
+//     }
+// }
+
+// @rioglyph-truck: "\f17b";
+// .rioglyph-truck:before,
+// .hover-rioglyph-truck:hover:before {
+// 	content: "\f17b";
+// }
+
+// @rioglyph-bus: "\f17b";
+// .rioglyph-bus:before,
+// .hover-rioglyph-bus:hover:before {
+// 	content: "\f17b";
+// }
+
+// @rioglyph-van: "\f17b";
+// .rioglyph-van:before,
+// .hover-rioglyph-van:hover:before {
+// 	content: "\f17b";
+// }
+
+// @rioglyph-user: "\f17c";
+// .rioglyph-user:before,
+// .hover-rioglyph-user:hover:before {
+// 	content: "\f17c";
+// }