@rio-cloud/rio-uikit 0.16.1 → 0.16.2-beta.10

package/lib/es/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;
@@ -191,7 +194,6 @@ body .module-content {
 
 .ApplicationHeader {
   .navbar-brand {
-    //background-image: url('https://@{cdnBase}/svg/common/ico_rio.svg') !important;
     background-size: cover;
   }
 
@@ -328,7 +330,7 @@ body .module-content {
         }
 
         &.navigationItem .ActionBarItemIcon {
-          color: @color-black;
+          color: var(--color-black);
         }
       }
     }
@@ -360,10 +362,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 +466,7 @@ body .module-content {
 
     &[class*="opacity-"] {
       &:before {
-        background: #000000;
+        background: var(--always-color-black);
         bottom: 0;
         content: "";
         left: 0;
@@ -534,7 +536,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 +562,7 @@ body .module-content {
 
           &.link-color-white {
             a:not(.btn) {
-              color: @color-white;
+              color: var(--color-white);
             }
           }
 
@@ -576,57 +578,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 +688,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 +703,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 +723,7 @@ body .module-content {
 
             &.panel-border-color-lighter {
               > .section-content-container.panel {
-                border-color: @gray-lighter;
+                border-color: var(--gray-lighter);
               }
             }
           }
@@ -893,7 +889,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 +988,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 +1249,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 +1328,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 +1392,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 +1411,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 +1466,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 +1477,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 +1520,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 +1560,7 @@ body .module-content {
 
                 .section-content-container {
                   flex: initial !important;
-                  background: @color-black;
+                  background: var(--color-black);
                 }
               }
             }
@@ -1696,7 +1690,7 @@ body .module-content {
       .section-content-container-background-image {
         &[class*="opacity-"] {
           &:before {
-            background: #ffffff;
+            background: var(--color-white);
           }
         }
       }
@@ -1707,7 +1701,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 +1832,7 @@ body .module-content {
 
 // Theme
 html {
-  background-color: @color-white;
+  background-color: var(--color-white);
 }
 
 body {
@@ -1849,7 +1843,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 +1879,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;
@@ -1913,6 +1938,11 @@ blockquote {
   }
 }
 
+// Rounded Images
+.rounded-image .img-responsive {
+  border-radius: 10px
+}
+
 .anchor {
   display: block;
   position: absolute;
@@ -1920,7 +1950,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 {
@@ -1936,7 +1966,6 @@ blockquote {
   }
 
   .ApplicationLayoutBody {
-
     @media (min-width: @screen-ls) {
       .module-content {
         display: flex;
@@ -1962,11 +1991,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 +2012,7 @@ blockquote {
     > .modal-header-close {
       background: none;
       border: none;
-      color: @gray-dark;
+      color: var(--gray-dark);
       float: right;
       font-size: 30px;
       line-height: 55px;
@@ -2071,12 +2099,13 @@ blockquote {
   }
 }
 
+// Button Hover
 [class*="btn-"]:hover {
   transform: none !important;
   box-shadow: none !important;
 }
 
-// cookie disclaimer
+// Cookie Disclaimer
 #cookieDisclaimer > .position-absolute {
   position: fixed !important;
 
@@ -2117,7 +2146,7 @@ form[id*="contactForm"] {
   }
 
   .column-icon {
-    color: @color-white;
+    color: var(--color-white);
     font-size: 60px;
     left: 50%;
     position: absolute;
@@ -2134,7 +2163,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;
@@ -2147,6 +2176,7 @@ form[id*="contactForm"] {
   }
 }
 
+// Tables
 body:not(.legal-documents) {
   .table-responsive {
     @media (min-width: @screen-ls) {
@@ -2165,7 +2195,7 @@ body:not(.legal-documents) {
       }
     }
 
-    @media (max-width: @screen-ls) {
+    // @media (max-width: @screen-ls) {
       > .table {
         > thead,
         > tbody,
@@ -2178,7 +2208,7 @@ body:not(.legal-documents) {
           }
         }
       }
-    }
+    // }
   }
 }
 
@@ -2197,11 +2227,11 @@ body:not(.legal-documents) {
   }
 }
 
-// section clippig
+// Section Clippig
 .section-wrapper {
   &[class*="clip-"]:after {
     content: "";
-    background: @color-white;
+    background: var(--color-white);
     width: 100%;
     position: absolute;
     z-index: 1;
@@ -2216,11 +2246,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 {