@rio-cloud/rio-uikit 0.15.1 → 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;
@@ -281,7 +282,7 @@ body .module-content {
       li {
         &#login {
           .login-text {
-            font-weight: @text-medium;
+            font-weight: @font-medium;
           }
 
           @media (max-width: @screen-ls) {
@@ -513,7 +514,7 @@ body .module-content {
 
           &.rounded {
             > .section-content-container {
-              border-radius: (@border-radius-base * 4) !important
+              border-radius: (@border-radius-default * 4) !important
             }
           }
 
@@ -525,7 +526,7 @@ body .module-content {
             .section-content-container {
               .section-content-container-row {
                 .section-content-container-headline {
-                  font-weight: @text-light;
+                  font-weight: @font-light;
                 }
               }
             }
@@ -697,7 +698,7 @@ body .module-content {
 
               // Section Wrapper Inner Container Headline
               .section-content-container-headline {
-                font-weight: @text-bold;
+                font-weight: @font-bold;
                 line-height: 1.20;
 
                 // hyphens
@@ -824,7 +825,7 @@ body .module-content {
                   padding: 20px 30px 20px 30px;
 
                   .section-content-container-headline {
-                    font-weight: @text-bold;
+                    font-weight: @font-bold;
                     margin-bottom: 0 !important;
                     // hyphens
                     // hyphens: auto;
@@ -1107,7 +1108,7 @@ body .module-content {
                   padding: 10px;
 
                   .section-content-container-headline {
-                    font-weight: @text-normal;
+                    font-weight: @font-normal;
                     font-size: @font-size-18;
                     line-height: 1.15;
                     // hyphens
@@ -1116,7 +1117,7 @@ body .module-content {
                   }
 
                   .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 }
 
@@ -1241,7 +1242,7 @@ body .module-content {
                 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 }
                 }
@@ -1674,6 +1675,16 @@ body .module-content {
                     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; }
+                  }
+                }
               }
             }
 
@@ -1728,7 +1739,7 @@ html {
 }
 
 body {
-  font-weight: @text-light;
+  font-weight: @font-light;
   line-height: 1.35;
 
   font-size: @font-size-16;
@@ -1932,6 +1943,10 @@ blockquote {
   background: @color-black;
 
   .data-privacy-modal {
+    &.hide {
+      display: none !important;
+    }
+
     @media (max-width: @screen-ls) {
       p {
         display: none;
@@ -1943,6 +1958,13 @@ blockquote {
         white-space: pre-wrap;
       }
     }
+    @media (min-width: @screen-ls) {
+      z-index: 1;
+
+      .btn {
+        min-height: auto;
+      }
+    }
   }
 }
 

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
+  }
+ }

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

@@ -0,0 +1,52 @@
+.rotate {
+  &-0 { transform:rotate(0deg) !important }
+  &-45 { transform:rotate(45deg) !important }
+  &-90 { transform:rotate(90deg) !important }
+  &-135 { transform:rotate(135deg) !important }
+  &-180 { transform:rotate(180deg) !important }
+  &-225 { transform:rotate(225deg) !important }
+  &-270 { transform:rotate(270deg) !important }
+  &-315 { transform:rotate(315deg) !important }
+  &-360 { transform:rotate(360deg) !important }
+
+  &-1 { transform:rotate(1deg) !important }
+  &-2 { transform:rotate(2deg) !important }
+  &-3 { transform:rotate(3deg) !important }
+  &-4 { transform:rotate(4deg) !important }
+  &-5 { transform:rotate(5deg) !important }
+
+  &--1 { transform:rotate(-1deg) !important }
+  &--2 { transform:rotate(-2deg) !important }
+  &--3 { transform:rotate(-3deg) !important }
+  &--4 { transform:rotate(-4deg) !important }
+  &--5 { transform:rotate(-5deg) !important }
+}
+
+.hover-rotate {
+  &-0 { &:hover { transform:rotate(0deg) !important } }
+}
+
+// transform-origin
+.transform-origin {
+  &-center { transform-origin: center !important }
+
+  &-top { transform-origin: top !important;
+    &-left { transform-origin: top left !important }
+    &-right { transform-origin: top right !important }
+  }
+
+  &-right { transform-origin: right !important;
+    &-top { transform-origin: right top !important }
+    &-bottom { transform-origin: right bottom !important }
+  }
+
+  &-bottom { transform-origin: bottom !important;
+    &-left { transform-origin: bottom left !important }
+    &-right { transform-origin: bottom right !important }
+  }
+
+  &-left { transform-origin: left !important;
+    &-top { transform-origin: left top !important }
+    &-bottom { transform-origin: left bottom !important }
+  }
+}

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

@@ -0,0 +1,35 @@
+.scale {
+  &-50 { transform: scale(0.5) !important }
+  &-80 { transform: scale(0.8) !important }
+  &-90 { transform: scale(0.9) !important }
+  &-100 { transform: scale(1.0) !important }
+  &-105 { transform: scale(1.05) !important }
+  &-110 { transform: scale(1.1) !important }
+  &-120 { transform: scale(1.2) !important }
+  &-130 { transform: scale(1.3) !important }
+  &-140 { transform: scale(1.4) !important }
+  &-150 { transform: scale(1.5) !important }
+  &-160 { transform: scale(1.6) !important }
+  &-170 { transform: scale(1.7) !important }
+  &-180 { transform: scale(1.8) !important }
+  &-190 { transform: scale(1.9) !important }
+  &-200 { transform: scale(2.0) !important }
+}
+
+.hover-scale {
+  &-50 { &:hover { transform: scale(0.5) !important } }
+  &-80 { &:hover { transform: scale(0.8) !important } }
+  &-90 { &:hover { transform: scale(0.9) !important } }
+  &-100 { &:hover { transform: scale(1.0) !important } }
+  &-105 { &:hover { transform: scale(1.05) !important } }
+  &-110 { &:hover { transform: scale(1.1) !important } }
+  &-120 { &:hover { transform: scale(1.2) !important } }
+  &-130 { &:hover { transform: scale(1.3) !important } }
+  &-140 { &:hover { transform: scale(1.4) !important } }
+  &-150 { &:hover { transform: scale(1.5) !important } }
+  &-160 { &:hover { transform: scale(1.6) !important } }
+  &-170 { &:hover { transform: scale(1.7) !important } }
+  &-180 { &:hover { transform: scale(1.8) !important } }
+  &-190 { &:hover { transform: scale(1.9) !important } }
+  &-200 { &:hover { transform: scale(2.0) !important } }
+}