@rio-cloud/rio-uikit 0.15.0-beta-49 → 0.16.0-beta-1

package/lib/style/css/_exports/rio-uikit-core.less

@@ -1,131 +1,109 @@
-// Bootstrap // Variables
-@import (less) '../rio-theme/variables.less';
+// Variables
+@import (less) '../variables.less';
 
 // Mixins
-@import (less) '../rio-theme/mixins/_mixins.less';
-
-// Bootstrap // Reset and dependencies
-@import (less) '../rio-theme/normalize.less';
-
-// Bootstrap // Core CSS
-@import (less) '../rio-theme/code.less';
-@import (less) '../rio-theme/grid.less';
-@import (less) '../rio-theme/tables.less';
-@import (less) '../rio-theme/forms.less';
-@import (less) '../rio-theme/buttons.less';
-@import (less) '../rio-theme/scaffolding.less';
-
-// Bootstrap // Components
-@import (less) '../rio-theme/images.less';
-@import (less) '../rio-theme/dropdowns.less';
-@import (less) '../rio-theme/button-groups.less';
-@import (less) '../rio-theme/input-groups.less';
-@import (less) '../rio-theme/navs.less';
-@import (less) '../rio-theme/navbar.less';
-@import (less) '../rio-theme/breadcrumbs.less';
-@import (less) '../rio-theme/pagination.less';
-@import (less) '../rio-theme/pager.less';
-@import (less) '../rio-theme/labels.less';
-@import (less) '../rio-theme/badges.less';
-@import (less) '../rio-theme/jumbotron.less';
-@import (less) '../rio-theme/thumbnails.less';
-@import (less) '../rio-theme/alerts.less';
-@import (less) '../rio-theme/progress-bars.less';
-@import (less) '../rio-theme/media.less';
-@import (less) '../rio-theme/list-group.less';
-@import (less) '../rio-theme/panels.less';
-@import (less) '../rio-theme/responsive-embed.less';
-@import (less) '../rio-theme/wells.less';
-@import (less) '../rio-theme/close.less';
-@import (less) '../rio-theme/type.less';
-
-// Bootstrap // Components w/ JavaScript
-@import (less) '../rio-theme/modals.less';
-@import (less) '../rio-theme/tooltip.less';
-@import (less) '../rio-theme/popovers.less';
-@import (less) '../rio-theme/carousel.less';
-
-// Bootstrap // Utility classes
-@import (less) '../rio-theme/utilities.less';
-
-// START RIO Theme without BS dependencies
-
-// RIO Theme // Variables
-@import (less) '../rio-theme/colors.less';
-@import (less) '../rio-theme/screens.less';
-@import (less) '../shared/text.less';
-@import (less) '../rio-theme/zindex.less';
-
-// RIOglyph Iconfont
-@import (less) '../../fonts/rioglyph/rioglyph.less';
-
-// Font
-@import (less) '../rio-theme/fonts.less';
-
-// RIO Theme // Components
-@import (less) '../rio-theme/blockquote.less';
-@import (less) '../rio-theme/callouts.less';
-@import (less) '../rio-theme/container.less';
-@import (less) '../rio-theme/iframe.less';
-@import (less) '../rio-theme/responsive-video.less';
-@import (less) '../rio-theme/theme.less';
-
-// RIO Theme // Utils
-@import (less) '../utils/_imports.less';
-
-.import-utilities(
-  @default: true;
-  @xs: false;
-  @ls: false;
-  @sm: false;
-  @md: false;
-  @lg: false;
-  @xl: false;
-  @print: false;
-);
-
-// Bootstrap // Responsive Utilities
-@import (less) '../rio-theme/responsive-utilities.less';
-
-// RIO Theme // Utils - Animations
-@import (less) '../utils/animations/_imports.less';
-
-// RIO Theme // Print
+@import (less) '../mixins/_mixins.less';
+
+// Normalize
+@import (less) '../design/normalize.less';
+
+// Styles // right order is important
+@import (less) '../design/code.less';
+@import (less) '../design/cols.less';
+@import (less) '../design/tables.less';
+@import (less) '../design/form-inputs.less';
+@import (less) '../design/form-input-groups.less';
+@import (less) '../design/buttons.less';
+@import (less) '../design/images.less';
+@import (less) '../design/caret.less';
+@import (less) '../design/button-groups.less';
+@import (less) '../design/navs.less';
+@import (less) '../design/breadcrumbs.less';
+@import (less) '../design/pagination.less';
+@import (less) '../design/labels.less';
+@import (less) '../design/badges.less';
+@import (less) '../design/thumbnails.less';
+@import (less) '../design/alerts.less';
+@import (less) '../design/progress-bars.less';
+@import (less) '../design/list-group.less';
+@import (less) '../design/panels.less';
+@import (less) '../design/responsive-embed.less';
+@import (less) '../design/wells.less';
+@import (less) '../design/close.less';
+@import (less) '../design/type.less';
+@import (less) '../design/popovers.less';
+@import (less) '../design/utilities.less';
+@import (less) '../design/visibilty.less';
+@import (less) '../design/blockquote.less';
+@import (less) '../design/callouts.less';
+@import (less) '../design/container.less';
+@import (less) '../design/iframe.less';
+@import (less) '../design/responsive-video.less';
+@import (less) '../design/aspect-ratio.less';
+@import (less) '../design/colors.less';
+@import (less) '../design/border.less';
+@import (less) '../design/cursors.less';
+@import (less) '../design/custom.less';
+@import (less) '../design/ellipsis.less';
+@import (less) '../design/flexgrid.less';
+@import (less) '../design/opacity.less';
+@import (less) '../design/overflow.less';
+@import (less) '../design/position.less';
+@import (less) '../design/rounded.less';
+@import (less) '../design/shadows.less';
+@import (less) '../design/text.less';
+@import (less) '../design/z-index.less';
+
+// Theme
+@import (less) '../design/theme.less';
+
+// Fonts
+@import (less) '../design/rioglyph.less';
+@import (less) '../design/fonts.less';
+
+// Animations
+@import (less) '../animations/_imports.less';
+
+// Print
 @import (less) '../print/print.less';
 
-// RIO Theme // Component styles
-@import (less) '../../../components/activity/Activity.less';
-@import (less) '../../../components/applicationLayout/ApplicationLayout.less';
-@import (less) '../../../components/assetTree/AssetTree.less';
-@import (less) '../../../components/autosuggest/AutoSuggest.less';
-@import (less) '../../../components/checkbox/Checkbox.less';
-@import (less) '../../../components/clearableInput/ClearableInput.less';
-@import (less) '../../../components/counter/Counter.less';
-@import (less) '../../../components/dataTabs/DataTabs.less';
-@import (less) '../../../components/datepicker/DatePicker.less';
-@import (less) '../../../components/dropdown/DropdownSubmenu.less';
-@import (less) '../../../components/expander/Expander.less';
-@import (less) '../../../components/filepicker/FilePicker.less';
-@import (less) '../../../components/listMenu/ListMenu.less';
-@import (less) '../../../components/map/components/features/settings/MapSettings.less';
-@import (less) '../../../components/map/Here.less';
-@import (less) '../../../components/mapMarker/MapMarker.less';
-@import (less) '../../../components/noData/NoData.less';
-@import (less) '../../../components/notification/Notification.less';
-@import (less) '../../../components/radiobutton/RadioButton.less';
-@import (less) '../../../components/resizer/Resizer.less';
-@import (less) '../../../components/selects/Select.less';
-@import (less) '../../../components/sidebars/Sidebar.less';
-@import (less) '../../../components/slider/Slider.less';
-@import (less) '../../../components/spinner/Spinner.less';
-@import (less) '../../../components/statsWidget/StatsWidget.less';
-@import (less) '../../../components/steppedProgressBar/SteppedProgressBar.less';
-@import (less) '../../../components/supportMarker/SupportMarker.less';
-@import (less) '../../../components/switch/Switch.less';
-@import (less) '../../../components/table/SortArrows.less';
-@import (less) '../../../components/table/TableSettingsDialog.less';
-@import (less) '../../../components/tag/Tag.less';
-@import (less) '../../../components/tagManager/TagManager.less';
-@import (less) '../../../components/teaser/Teaser.less';
-@import (less) '../../../components/timeline/Timeline.less';
-@import (less) '../../../components/tooltip/Tooltip.less';
+// Component styles
+@import (less) '../components/Activity.less';
+@import (less) '../components/ApplicationLayout.less';
+@import (less) '../components/ApplicationHeader.less';
+@import (less) '../components/AssetTree.less';
+@import (less) '../components/AutoSuggest.less';
+@import (less) '../components/BottomSheet.less';
+@import (less) '../components/Carousel.less';
+@import (less) '../components/Checkbox.less';
+@import (less) '../components/ClearableInput.less';
+@import (less) '../components/Counter.less';
+@import (less) '../components/DataTabs.less';
+@import (less) '../components/DatePicker.less';
+@import (less) '../components/Dialog.less';
+@import (less) '../components/Dropdown.less';
+@import (less) '../components/Expander.less';
+@import (less) '../components/FilePicker.less';
+@import (less) '../components/ListMenu.less';
+@import (less) '../components/MapSettings.less';
+@import (less) '../components/MapHere.less';
+@import (less) '../components/MapMarker.less';
+@import (less) '../components/NoData.less';
+@import (less) '../components/Notification.less';
+@import (less) '../components/RadioButton.less';
+@import (less) '../components/Resizer.less';
+@import (less) '../components/Select.less';
+@import (less) '../components/Sidebar.less';
+@import (less) '../components/Slider.less';
+@import (less) '../components/Spinner.less';
+@import (less) '../components/StatsWidget.less';
+@import (less) '../components/SteppedProgressBar.less';
+@import (less) '../components/SupportMarker.less';
+@import (less) '../components/Switch.less';
+@import (less) '../components/TableSortArrows.less';
+@import (less) '../components/TableSettingsDialog.less';
+@import (less) '../components/Tag.less';
+@import (less) '../components/TagManager.less';
+@import (less) '../components/Teaser.less';
+@import (less) '../components/Tooltip.less';
+@import (less) '../components/Timeline.less';

package/lib/style/css/_exports/rio-uikit-print-utilities.less

@@ -1,15 +1,10 @@
-// RIO Theme Imports
-@import (less) '../rio-theme/variables.less';
-@import (less) '../rio-theme/colors.less';
-@import (less) '../rio-theme/screens.less';
-@import (less) '../shared/text.less';
-@import (less) '../rio-theme/mixins/_mixins.less';
+// Styles
+@import (less) '../variables.less';
+@import (less) '../mixins/_mixins.less';
 
-// RIO Theme // Utils
-@import (less) '../utils/_imports.less';
-
-// RIO Theme // Utility Classes
-.import-utilities(
+// Utility Classes
+@import (less) '../design/responsive/_imports.less';
+.import-reponsive(
   @default: false;
   @xs: false;
   @ls: false;

package/lib/style/css/_exports/rio-uikit-responsive-utilities.less

@@ -1,15 +1,10 @@
-// RIO Theme Imports
-@import (less) '../rio-theme/variables.less';
-@import (less) '../rio-theme/colors.less';
-@import (less) '../rio-theme/screens.less';
-@import (less) '../shared/text.less';
-@import (less) '../rio-theme/mixins/_mixins.less';
+// Styles
+@import (less) '../variables.less';
+@import (less) '../mixins/_mixins.less';
 
-// RIO Theme // Utils
-@import (less) '../utils/_imports.less';
-
-// RIO Theme // Utility Classes
-.import-utilities(
+// Utility Classes
+@import (less) '../design/responsive/_imports.less';
+.import-reponsive(
   @default: false;
   @xs: true;
   @ls: true;

package/lib/style/css/_exports/rio-uikit.less

@@ -1,8 +1,9 @@
-// RIO Theme // Core
+// Styles
 @import (less) 'rio-uikit-core.less';
 
-// RIO Theme // Utility Classes
-.import-utilities(
+// Utility Classes
+@import (less) '../design/responsive/_imports.less';
+.import-reponsive(
   @default: true;
   @xs: true;
   @ls: true;
@@ -13,7 +14,7 @@
   @print: false;
 );
 
-// RIO Theme // Fonts
+// Fonts
 @font-source-sans: true;
 @font-san-francisco: true;
 @font-roboto: true;

package/lib/style/css/_exports/rio-website.less

@@ -1,8 +1,9 @@
-// RIO Theme // Core
+// Core
 @import (less) 'rio-uikit-core.less';
 
-// RIO Theme // Utility Classes
-.import-utilities(
+// Utility Classes
+@import (less) '../design/responsive/_imports.less';
+.import-reponsive(
   @default: true;
   @xs: true;
   @ls: true;
@@ -13,7 +14,7 @@
   @print: false;
 );
 
-// RIO Theme // Fonts
+// Fonts
 @font-source-sans: true;
 @font-man: true;
 @font-redring: true;
@@ -184,6 +185,10 @@ html.show-handheld-navigation {
   }
 }
 
+body .module-content {
+  overflow: hidden;
+}
+
 .ApplicationHeader {
   .navbar-brand {
     background-image: url('@{cdnBase}/svg/common/ico_rio.svg') !important;
@@ -277,7 +282,7 @@ html.show-handheld-navigation {
       li {
         &#login {
           .login-text {
-            font-weight: @text-medium;
+            font-weight: @font-medium;
           }
 
           @media (max-width: @screen-ls) {
@@ -509,7 +514,7 @@ html.show-handheld-navigation {
 
           &.rounded {
             > .section-content-container {
-              border-radius: (@border-radius-base * 4) !important
+              border-radius: (@border-radius-default * 4) !important
             }
           }
 
@@ -521,7 +526,7 @@ html.show-handheld-navigation {
             .section-content-container {
               .section-content-container-row {
                 .section-content-container-headline {
-                  font-weight: @text-light;
+                  font-weight: @font-light;
                 }
               }
             }
@@ -693,7 +698,7 @@ html.show-handheld-navigation {
 
               // Section Wrapper Inner Container Headline
               .section-content-container-headline {
-                font-weight: @text-bold;
+                font-weight: @font-bold;
                 line-height: 1.20;
 
                 // hyphens
@@ -820,7 +825,7 @@ html.show-handheld-navigation {
                   padding: 20px 30px 20px 30px;
 
                   .section-content-container-headline {
-                    font-weight: @text-bold;
+                    font-weight: @font-bold;
                     margin-bottom: 0 !important;
                     // hyphens
                     // hyphens: auto;
@@ -1103,7 +1108,7 @@ html.show-handheld-navigation {
                   padding: 10px;
 
                   .section-content-container-headline {
-                    font-weight: @text-normal;
+                    font-weight: @font-normal;
                     font-size: @font-size-18;
                     line-height: 1.15;
                     // hyphens
@@ -1112,7 +1117,7 @@ html.show-handheld-navigation {
                   }
 
                   .section-content-container-body {
-                    font-weight: @text-normal;
+                    font-weight: @font-normal;
                     font-size: @font-size-14;
                     @media (min-width: @responsive-font-breakpoint) { font-size: @font-size-14 * 1.35 }
 
@@ -1237,7 +1242,7 @@ html.show-handheld-navigation {
                 margin-bottom: 20px;
 
                 .teaser-headline {
-                  font-weight: 700;
+                  font-weight: @font-bold;
                   font-size: @font-size-16;
                   @media (min-width: @responsive-font-breakpoint) { font-size: @font-size-16 * 1.35 }
                 }
@@ -1517,6 +1522,20 @@ html.show-handheld-navigation {
       }
     }
 
+    &-marketplace-details-panel {
+      &-rimless-bottom {
+        .section-layout-container-row {
+          padding-bottom: 0 !important;
+        }
+      }
+
+      &-rimless-top {
+        .section-layout-container-row {
+          padding-top: 0 !important;
+        }
+      }
+    }
+
     &-marketplace-col-4-as-col-6 {
       .section-layout {
         .section-layout-container {
@@ -1656,6 +1675,16 @@ html.show-handheld-navigation {
                     word-wrap: normal !important;
                   }
                 }
+
+                &.headline-max-width {
+                  .section-content-container-headline {
+                    margin-left: auto;
+                    margin-right: auto;
+                    max-width: 300px;
+
+                    @media (min-width: @responsive-font-breakpoint) { max-width: 400px; }
+                  }
+                }
               }
             }
 
@@ -1710,7 +1739,7 @@ html {
 }
 
 body {
-  font-weight: @text-light;
+  font-weight: @font-light;
   line-height: 1.35;
 
   font-size: @font-size-16;
@@ -1914,6 +1943,10 @@ blockquote {
   background: @color-black;
 
   .data-privacy-modal {
+    &.hide {
+      display: none !important;
+    }
+
     @media (max-width: @screen-ls) {
       p {
         display: none;
@@ -1925,6 +1958,13 @@ blockquote {
         white-space: pre-wrap;
       }
     }
+    @media (min-width: @screen-ls) {
+      z-index: 1;
+
+      .btn {
+        min-height: auto;
+      }
+    }
   }
 }
 
@@ -2050,4 +2090,61 @@ form[id*="contactForm"] {
       padding-bottom: 56.25%;
     }
   }
+}
+
+// section clippig
+
+.section-wrapper {
+  &[class*="clip-"]:after {
+    content: "";
+    background: @color-white;
+    width: 100%;
+    position: absolute;
+    z-index: 1;
+  }
+
+  &[class*="clip-top"]:after {
+    top: 0;
+  }
+
+  &[class*="clip-bottom"]::after {
+    bottom: 0;
+  }
+
+  &[class*="clip-white"]:after {
+    background: @color-white
+  }
+
+  &[class*="clip-lightest"]::after {
+    background: @gray-lightest
+  }
+
+  &.clip-top-ltr:after {
+    clip-path: polygon(0 0, 100% 0, 100% 100%);
+  }
+
+  &.clip-top-rtl:after {
+    clip-path: polygon(0 0, 100% 0, 0 100%);
+  }
+
+  &.clip-bottom-ltr:after {
+    clip-path: polygon(0 100%, 100% 0, 100% 100%);
+  }
+
+  &.clip-bottom-rtl:after {
+    clip-path: polygon(0 0, 100% 100%, 0 100%);
+  }
+}
+
+@media (max-width: @screen-ls) {
+  .section-wrapper[class*="clip-"]:after {
+    height: 0;
+    padding-bottom: 5%;
+  }
+}
+
+@media (min-width: @screen-ls) {
+  .section-wrapper[class*="clip-"]:after {
+    height: 50px;
+  }
 }

package/lib/style/css/_exports/vw-uikit.less

@@ -1,8 +1,9 @@
-// RIO Theme // Core
+// Core
 @import (less) 'rio-uikit-core.less';
 
-// RIO Theme // Utility Classes
-.import-utilities(
+// Utility Classes
+@import (less) '../design/responsive/_imports.less';
+.import-reponsive(
   @default: true;
   @xs: true;
   @ls: true;
@@ -13,15 +14,16 @@
   @print: false;
 );
 
-// RIO Theme // Fonts
+// Fonts
 @font-vw: true;
-
 @font-family-base: VWAGTheSans, 'serif';
 
+// ApplicationHeader
 @logo-height: 42px;
 @logo-width: 204px;
 @navbar-height: 178px;
 
+// Colors - Text
 @color-white: #ffffff;
 @color-black: #000000;
 
@@ -79,9 +81,9 @@
 @color-highlight-lightest: #ebf9fa; //lighten(@brand-primary, 48%);
 @color-highlight-decent: #f3fbfc; //lighten(@brand-primary, 50%);
 
-@border-radius-small: 0;
-@border-radius-base: 0;
-@border-radius-large: 0;
+@border-radius-sm: 0;
+@border-radius-default: 0;
+@border-radius-lg: 0;
 
 .btn.btn-default {
   .button-variant(

package/lib/style/css/animations/_imports.less

@@ -0,0 +1,9 @@
+@import (less) "collapse.less";
+@import (less) "fade.less";
+@import (less) "pinging.less";
+@import (less) "rotate.less";
+@import (less) "scale.less";
+@import (less) "slide.less";
+@import (less) "spinning.less";
+@import (less) "transition.less";
+@import (less) "translate.less";

package/lib/style/css/animations/collapse.less

@@ -0,0 +1,16 @@
+.collapse {
+  display: none;
+
+  &.in      { display: block; }
+  tr&.in    { display: table-row; }
+  tbody&.in { display: table-row-group; }
+}
+
+.collapsing {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  transition-property:height~","visibility;
+  transition-duration:.35s;
+  transition-timing-function:ease;
+}

package/lib/style/css/animations/fade.less

@@ -0,0 +1,28 @@
+.fade {
+  opacity: 0;
+  transition:opacity .15s linear;
+
+  &.in, &.show {
+    opacity: 1;
+  }
+}
+
+// .ani-fade-in, // TODO remove with v1.0 (downward compatibility) - remove when cleanup
+.fade-in {
+  animation: fade-in 0.15s
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+// .ani-fade-out, // TODO remove with v1.0 (downward compatibility) - remove when cleanup
+.fade-out {
+  animation: fade-out 0.15s
+}
+
+@keyframes fade-out {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}

package/lib/style/css/animations/pinging.less

@@ -0,0 +1,7 @@
+@keyframes pinging {
+  75%,
+  to {
+   transform:scale(2);
+   opacity:0
+  }
+ }