@rio-cloud/rio-uikit 0.16.2 → 0.16.3-beta.2

package/{lib/es/AspectRatioPlaceholder.ts → AspectRatioPlaceholder.d.ts}

@@ -1,4 +1,4 @@
-declare module '@rio-cloud/rio-uikit/lib/es/AspectRatioPlaceholder' {
+declare module '@rio-cloud/rio-uikit/AspectRatioPlaceholder' {
     import React from 'react';
     import { AspectRatioPlaceholderProps } from './types';
     export default class AspectRatioPlaceholder extends React.Component<AspectRatioPlaceholderProps> {}

package/ConfirmationDialog.d.ts

@@ -7,6 +7,8 @@ declare module '@rio-cloud/rio-uikit/ConfirmationDialog' {
         static SIZE_LG = 'lg';
         static SIZE_XL = 'xl';
         static SIZE_FULL = 'full';
+        static SIZE_FULL_WIDTH = 'fullwidth';
+        static SIZE_FULL_HEIGHT = 'fullheight';
         static SIZE_FULL_SCREEN = 'fullscreen';
     }
 }

package/Dialog.d.ts

@@ -5,6 +5,8 @@ declare module '@rio-cloud/rio-uikit/Dialog' {
     export default class Dialog extends React.Component<DialogProps> {
         public static SIZE_FULL_SCREEN: 'fullscreen';
         public static SIZE_FULL: 'full';
+        public static SIZE_FULL_WIDTH: 'fullwidth';
+        public static SIZE_FULL_HEIGHT: 'fullheight';
         public static SIZE_XL: 'xl';
         public static SIZE_LG: 'lg';
         public static SIZE_MD: 'md';

package/README.md

@@ -17,6 +17,13 @@ When releasing a new version:
 1. Create new `release/${VERSION}` branch and trigger pipeline with a commit
 2. After the new uikit-demo is published, update `versionsList.json` in `master` branch.
 
+Create a new development beta version:
+
+1. Update the `package.json`. Example `0.16.3-beta.1`
+2. Update the `version.json`. Example `0.16.3-beta.1`
+3. run `npm i` or update `package-lock.json`. Example `0.16.3-beta.1`
+4. Update the `uikit-demo/package.json`. Example `0.16.3`
+
 ## Development
 
 To run the UIKIT and the UIKIT Demo locally for development, use:
@@ -69,14 +76,17 @@ We introduced a versions list containing all the versions for which a uikit-demo
 The UIKIT needs to be published to NPM for the JavaScript components and the UIKIT CDN for the CSS files.
 
 ### Publish to NPM
+
 Run `npm run build:npm` to compile the components via babel to the `package` folder. The UIKIT exports CommonJS and ESM files. Later ones are directly in the package root. CommonJS components are generated in `package/lib/es` due to backwards compatibility reasons as Services import those components from `lib/es`.
 
-__Publish__ the UIKIT __only from__ the __package__ folder. All required files like package.json, README and License files are copied there during the build.
+**Publish** the UIKIT **only from** the **package** folder. All required files like package.json, README and License files are copied there during the build.
 
 ### Publishing to UIKIT CDN
+
 Run `npm run build` to build the production bundle and compile the styles to inspect locally. When comitting to the main development branch the build outcome from `dist` is published via our internal CICD pipeline.
 
 ### Beta Versions
+
 Beta versions of the UIKIT ideally should be kept in synch in NPM and CDN. After a new beta has been released, increase the version number to avoid overwriting published stylings.
 
 ## License

package/SaveDialog.d.ts

@@ -7,6 +7,8 @@ declare module '@rio-cloud/rio-uikit/SaveDialog' {
         static SIZE_LG = 'lg';
         static SIZE_XL = 'xl';
         static SIZE_FULL = 'full';
+        static SIZE_FULL_WIDTH: 'fullwidth';
+        static SIZE_FULL_HEIGHT: 'fullheight';
         static SIZE_FULL_SCREEN = 'fullscreen';
     }
 }

package/SimpleDialog.d.ts

@@ -7,6 +7,8 @@ declare module '@rio-cloud/rio-uikit/SimpleDialog' {
         static SIZE_LG = 'lg';
         static SIZE_XL = 'xl';
         static SIZE_FULL = 'full';
+        static SIZE_FULL_WIDTH: 'fullwidth';
+        static SIZE_FULL_HEIGHT: 'fullheight';
         static SIZE_FULL_SCREEN = 'fullscreen';
     }
 }

package/SplitDialog.d.ts

@@ -7,6 +7,8 @@ declare module '@rio-cloud/rio-uikit/SplitDialog' {
         static SIZE_LG = 'lg';
         static SIZE_XL = 'xl';
         static SIZE_FULL = 'full';
+        static SIZE_FULL_WIDTH: 'fullwidth';
+        static SIZE_FULL_HEIGHT: 'fullheight';
         static SIZE_FULL_SCREEN = 'fullscreen';
     }
 }

package/components/dialog/Dialog.js

@@ -84,7 +84,7 @@ var Dialog = function Dialog(props) {
     dialogWrapperRef && dialogWrapperRef.current && dialogWrapperRef.current.focus();
   };
   var modalClasses = classNames('modal', 'show', className);
-  var modalDialogClasses = classNames(MODAL_DIALOG_CLASS, useOverflow && 'modal-overflow', bsSize === Dialog.SIZE_SM && 'modal-sm', bsSize === Dialog.SIZE_LG && 'modal-lg', bsSize === Dialog.SIZE_XL && 'modal-xl', bsSize === Dialog.SIZE_FULL && 'modal-full', bsSize === Dialog.SIZE_FULL_SCREEN && 'modal-fullscreen');
+  var modalDialogClasses = classNames(MODAL_DIALOG_CLASS, useOverflow && 'modal-overflow', bsSize === Dialog.SIZE_SM && 'modal-sm', bsSize === Dialog.SIZE_LG && 'modal-lg', bsSize === Dialog.SIZE_XL && 'modal-xl', bsSize === Dialog.SIZE_FULL && 'modal-full-width', bsSize === Dialog.SIZE_FULL_WIDTH && 'modal-full-width', bsSize === Dialog.SIZE_FULL_HEIGHT && 'modal-full-height', bsSize === Dialog.SIZE_FULL_SCREEN && 'modal-fullscreen');
   var backdropClasses = classNames('modal-backdrop');
   return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(CSSTransition, {
     "in": open,
@@ -121,6 +121,8 @@ Dialog.SIZE_MD = 'md'; // default
 Dialog.SIZE_LG = 'lg';
 Dialog.SIZE_XL = 'xl';
 Dialog.SIZE_FULL = 'full';
+Dialog.SIZE_FULL_WIDTH = 'fullwidth';
+Dialog.SIZE_FULL_HEIGHT = 'fullheight';
 Dialog.SIZE_FULL_SCREEN = 'fullscreen';
 Dialog.defaultProps = {
   show: false,

package/index.d.ts

@@ -158,6 +158,8 @@ declare module '@rio-cloud/rio-uikit' {
     export class Dialog extends React.Component<DialogProps> {
         public static SIZE_FULL_SCREEN: 'fullscreen';
         public static SIZE_FULL: 'full';
+        public static SIZE_FULL_WIDTH = 'fullwidth';
+        public static SIZE_FULL_HEIGHT = 'fullheight';
         public static SIZE_XL: 'xl';
         public static SIZE_LG: 'lg';
         public static SIZE_MD: 'md';

package/lib/es/ConfirmationDialog.d.ts

@@ -7,6 +7,8 @@ declare module '@rio-cloud/rio-uikit/lib/es/ConfirmationDialog' {
         static SIZE_LG = 'lg';
         static SIZE_XL = 'xl';
         static SIZE_FULL = 'full';
+        static SIZE_FULL_WIDTH = 'fullwidth';
+        static SIZE_FULL_HEIGHT = 'fullheight';
         static SIZE_FULL_SCREEN = 'fullscreen';
     }
 }

package/lib/es/Dialog.d.ts

@@ -5,6 +5,8 @@ declare module '@rio-cloud/rio-uikit/lib/es/Dialog' {
     export default class Dialog extends React.Component<DialogProps> {
         public static SIZE_FULL_SCREEN: 'fullscreen';
         public static SIZE_FULL: 'full';
+        public static SIZE_FULL_WIDTH: 'fullwidth';
+        public static SIZE_FULL_HEIGHT: 'fullheight';
         public static SIZE_XL: 'xl';
         public static SIZE_LG: 'lg';
         public static SIZE_MD: 'md';

package/lib/es/SaveDialog.d.ts

@@ -7,6 +7,8 @@ declare module '@rio-cloud/rio-uikit/lib/es/SaveDialog' {
         static SIZE_LG = 'lg';
         static SIZE_XL = 'xl';
         static SIZE_FULL = 'full';
+        static SIZE_FULL_WIDTH: 'fullwidth';
+        static SIZE_FULL_HEIGHT: 'fullheight';
         static SIZE_FULL_SCREEN = 'fullscreen';
     }
 }

package/lib/es/SimpleDialog.d.ts

@@ -7,6 +7,8 @@ declare module '@rio-cloud/rio-uikit/lib/es/SimpleDialog' {
         static SIZE_LG = 'lg';
         static SIZE_XL = 'xl';
         static SIZE_FULL = 'full';
+        static SIZE_FULL_WIDTH: 'fullwidth';
+        static SIZE_FULL_HEIGHT: 'fullheight';
         static SIZE_FULL_SCREEN = 'fullscreen';
     }
 }

package/lib/es/SplitDialog.d.ts

@@ -7,6 +7,8 @@ declare module '@rio-cloud/rio-uikit/lib/es/SplitDialog' {
         static SIZE_LG = 'lg';
         static SIZE_XL = 'xl';
         static SIZE_FULL = 'full';
+        static SIZE_FULL_WIDTH: 'fullwidth';
+        static SIZE_FULL_HEIGHT: 'fullheight';
         static SIZE_FULL_SCREEN = 'fullscreen';
     }
 }

package/lib/es/components/dialog/Dialog.js

@@ -94,7 +94,7 @@ var Dialog = function Dialog(props) {
     dialogWrapperRef && dialogWrapperRef.current && dialogWrapperRef.current.focus();
   };
   var modalClasses = (0, _classnames["default"])('modal', 'show', className);
-  var modalDialogClasses = (0, _classnames["default"])(MODAL_DIALOG_CLASS, useOverflow && 'modal-overflow', bsSize === Dialog.SIZE_SM && 'modal-sm', bsSize === Dialog.SIZE_LG && 'modal-lg', bsSize === Dialog.SIZE_XL && 'modal-xl', bsSize === Dialog.SIZE_FULL && 'modal-full', bsSize === Dialog.SIZE_FULL_SCREEN && 'modal-fullscreen');
+  var modalDialogClasses = (0, _classnames["default"])(MODAL_DIALOG_CLASS, useOverflow && 'modal-overflow', bsSize === Dialog.SIZE_SM && 'modal-sm', bsSize === Dialog.SIZE_LG && 'modal-lg', bsSize === Dialog.SIZE_XL && 'modal-xl', bsSize === Dialog.SIZE_FULL && 'modal-full-width', bsSize === Dialog.SIZE_FULL_WIDTH && 'modal-full-width', bsSize === Dialog.SIZE_FULL_HEIGHT && 'modal-full-height', bsSize === Dialog.SIZE_FULL_SCREEN && 'modal-fullscreen');
   var backdropClasses = (0, _classnames["default"])('modal-backdrop');
   return /*#__PURE__*/_reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, {
     "in": open,
@@ -131,6 +131,8 @@ Dialog.SIZE_MD = 'md'; // default
 Dialog.SIZE_LG = 'lg';
 Dialog.SIZE_XL = 'xl';
 Dialog.SIZE_FULL = 'full';
+Dialog.SIZE_FULL_WIDTH = 'fullwidth';
+Dialog.SIZE_FULL_HEIGHT = 'fullheight';
 Dialog.SIZE_FULL_SCREEN = 'fullscreen';
 Dialog.defaultProps = {
   show: false,

package/lib/es/index.d.ts

@@ -158,6 +158,8 @@ declare module '@rio-cloud/lib/es/rio-uikit' {
     export class Dialog extends React.Component<DialogProps> {
         public static SIZE_FULL_SCREEN: 'fullscreen';
         public static SIZE_FULL: 'full';
+        public static SIZE_FULL_WIDTH = 'fullwidth';
+        public static SIZE_FULL_HEIGHT = 'fullheight';
         public static SIZE_XL: 'xl';
         public static SIZE_LG: 'lg';
         public static SIZE_MD: 'md';

package/lib/es/styles/components/ApplicationHeader.less

@@ -456,6 +456,8 @@
   }
 
   .CollapsedDropdown {
+    display: block;
+    
     > .dropdown-menu {
       left: auto;
       right: 0;

package/lib/es/styles/components/Dialog.less

@@ -1,6 +1,7 @@
 @modal-outer-margin: 30px;
 @modal-inner-padding: 20px;
-@modal-title-padding: 15px;
+@modal-title-y-padding: 15px;
+@modal-title-x-padding: 20px;
 @modal-content-bg: var(--color-white);
 @modal-content-border-color: var(--gray-light);
 @modal-backdrop-bg: var(--always-color-black);
@@ -40,7 +41,6 @@ body {
   top: 0;
   width: 100% !important;
   z-index: @zindex-modal;
-  backdrop-filter: blur(1px);
 
   // When fading in the modal, animate it to slide down
   &.fade .modal-dialog {
@@ -134,7 +134,6 @@ body {
         border-bottom: 1px solid @modal-header-border-color;
         display: flex;
         justify-content: space-between;
-        padding: @modal-title-padding;
         padding: 0;
         position: relative;
         z-index: 1;
@@ -146,7 +145,7 @@ body {
           float: left;
           font-weight: @font-light;
           justify-content: center;
-          padding: 15px;
+          padding: @modal-title-y-padding @modal-title-x-padding;
           width: calc(~'100% - 60px');
           word-break: break-word;
 
@@ -251,16 +250,12 @@ body {
         width: @modal-xl;
       }
 
-      &.modal-full {
-        width: calc(~'100vw - @{modal-outer-margin} * 2');
-      }
-
-      &.modal-fullscreen {
+      &.modal-fullscreen, &.modal-full, &.modal-full-width {
         width: calc(~'100vw - @{modal-outer-margin} * 2');
       }
     }
 
-    &.modal-fullscreen {
+    &.modal-fullscreen, &.modal-full-height {
       .modal-content {
         height: calc(~'100vh - (@{modal-outer-margin} * 2)'); // --vh fallback
         height: calc(~'var(--vh, 1vh) * 100 - (@{modal-outer-margin} * 2)');
@@ -275,6 +270,7 @@ body {
         .modal-body {
           flex: 1 1 0; // instead "auto" we 0 for safari
           position: relative;
+          overflow-y: auto;
 
           .iframe-wrapper {
             overflow: hidden;
@@ -303,12 +299,6 @@ body {
         .modal-body {
           overflow-y: auto;
 
-          // &:after {
-          //   content: '';
-          //   display: block;
-          //   height: 30px;
-          // }
-
           &.no-overflow-gradient {
             + .modal-footer:before {
               display: none;
@@ -350,13 +340,12 @@ body {
     // Fade for backdrop
     &.fade { opacity: 0 }
     &.in { opacity: 0.5 }
-  }
 
-  &.backdrop-blured .modal-backdrop {
+    // Bluring
     @supports ((-webkit-backdrop-filter: blur()) or (backdrop-filter: blur())) {
       opacity: 0.99;
-      background-color: .hsla(@always-color-black-hsl, 0.3)[@result];
-      backdrop-filter: blur(5px);
+      background-color: .hsla(@always-color-black-hsl, 0.5)[@result];
+      backdrop-filter: blur(1px);
     }
   }
 
@@ -423,7 +412,8 @@ body {
 
     .modal-lg &,
     .modal-xl &,
-    .modal-full & {
+    .modal-full &,
+    .modal-full-width & {
       @media (min-width: @splitWrapperBreakpoint) {
         width: 20%;
       }
@@ -456,7 +446,8 @@ body {
 
     .modal-lg &,
     .modal-xl &,
-    .modal-full & {
+    .modal-full &,
+    .modal-full-width & {
       @media (min-width: @splitWrapperBreakpoint) {
         max-width: 80%;
       }
@@ -464,7 +455,7 @@ body {
   }
 }
 
-/* Animation classes for dialogs triggered by "react-transition-group" component */
+// Animation classes for dialogs triggered by "react-transition-group" component
 .modal-enter {
   .modal-content {
     display: block;
@@ -501,4 +492,26 @@ body {
   .modal-backdrop {
     opacity: 0;
   }
-}
+}
+
+// modal-body atomic vh classes for iframes with unknown height
+// .modal-body {
+//   &.height-100vh {
+//     height: calc(~"var(--vh, 1vh) * 100 - 190px") !important;
+
+//     @media (max-width: @modal-sm) {
+//       height: calc(~"var(--vh, 1vh) * 100 - 170px") !important;
+//     }
+//   }
+
+//   // no modal-footer version
+//   &:last-child {
+//     &.height-100vh {
+//       height: calc(~"var(--vh, 1vh) * 100 - 120px") !important;
+
+//       @media (max-width: @modal-sm) {
+//         height: calc(~"var(--vh, 1vh) * 100 - 90px") !important;
+//       }
+//     }
+//   }
+// }

package/lib/es/types.ts

@@ -277,7 +277,7 @@ export interface BarChartProps {
 
 export type bsStyle = 'default' | 'primary' | 'info' | 'warning' | 'danger' | 'success' | 'link';
 
-export type bsSizeDialog = 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fullscreen';
+export type bsSizeDialog = 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fullwidth' | 'fullheight' | 'fullscreen';
 
 export type bsSize = 'xs' | 'sm' | 'lg';
 
@@ -1551,7 +1551,7 @@ export interface SelectProps {
     useClear?: boolean;
     noItemMessage?: string | React.ReactNode;
     showSelectedItemIcon?: boolean;
-    showUnselectedIdemIcons?: boolean;
+    showUnselectedItemIcons?: boolean;
     value?: string[] | undefined;
     className?: string;
     btnClassName?: string;

package/lib/es/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.2"
+    "version": "0.16.3-beta.2"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "0.16.2",
+    "version": "0.16.3-beta.2",
     "description": "The RIO UIKIT component library",
     "repository": "https://collaboration.msi.audi.com/stash/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {

package/styles/components/ApplicationHeader.less

@@ -456,6 +456,8 @@
   }
 
   .CollapsedDropdown {
+    display: block;
+    
     > .dropdown-menu {
       left: auto;
       right: 0;

package/styles/components/Dialog.less

@@ -1,6 +1,7 @@
 @modal-outer-margin: 30px;
 @modal-inner-padding: 20px;
-@modal-title-padding: 15px;
+@modal-title-y-padding: 15px;
+@modal-title-x-padding: 20px;
 @modal-content-bg: var(--color-white);
 @modal-content-border-color: var(--gray-light);
 @modal-backdrop-bg: var(--always-color-black);
@@ -40,7 +41,6 @@ body {
   top: 0;
   width: 100% !important;
   z-index: @zindex-modal;
-  backdrop-filter: blur(1px);
 
   // When fading in the modal, animate it to slide down
   &.fade .modal-dialog {
@@ -134,7 +134,6 @@ body {
         border-bottom: 1px solid @modal-header-border-color;
         display: flex;
         justify-content: space-between;
-        padding: @modal-title-padding;
         padding: 0;
         position: relative;
         z-index: 1;
@@ -146,7 +145,7 @@ body {
           float: left;
           font-weight: @font-light;
           justify-content: center;
-          padding: 15px;
+          padding: @modal-title-y-padding @modal-title-x-padding;
           width: calc(~'100% - 60px');
           word-break: break-word;
 
@@ -251,16 +250,12 @@ body {
         width: @modal-xl;
       }
 
-      &.modal-full {
-        width: calc(~'100vw - @{modal-outer-margin} * 2');
-      }
-
-      &.modal-fullscreen {
+      &.modal-fullscreen, &.modal-full, &.modal-full-width {
         width: calc(~'100vw - @{modal-outer-margin} * 2');
       }
     }
 
-    &.modal-fullscreen {
+    &.modal-fullscreen, &.modal-full-height {
       .modal-content {
         height: calc(~'100vh - (@{modal-outer-margin} * 2)'); // --vh fallback
         height: calc(~'var(--vh, 1vh) * 100 - (@{modal-outer-margin} * 2)');
@@ -275,6 +270,7 @@ body {
         .modal-body {
           flex: 1 1 0; // instead "auto" we 0 for safari
           position: relative;
+          overflow-y: auto;
 
           .iframe-wrapper {
             overflow: hidden;
@@ -303,12 +299,6 @@ body {
         .modal-body {
           overflow-y: auto;
 
-          // &:after {
-          //   content: '';
-          //   display: block;
-          //   height: 30px;
-          // }
-
           &.no-overflow-gradient {
             + .modal-footer:before {
               display: none;
@@ -350,13 +340,12 @@ body {
     // Fade for backdrop
     &.fade { opacity: 0 }
     &.in { opacity: 0.5 }
-  }
 
-  &.backdrop-blured .modal-backdrop {
+    // Bluring
     @supports ((-webkit-backdrop-filter: blur()) or (backdrop-filter: blur())) {
       opacity: 0.99;
-      background-color: .hsla(@always-color-black-hsl, 0.3)[@result];
-      backdrop-filter: blur(5px);
+      background-color: .hsla(@always-color-black-hsl, 0.5)[@result];
+      backdrop-filter: blur(1px);
     }
   }
 
@@ -423,7 +412,8 @@ body {
 
     .modal-lg &,
     .modal-xl &,
-    .modal-full & {
+    .modal-full &,
+    .modal-full-width & {
       @media (min-width: @splitWrapperBreakpoint) {
         width: 20%;
       }
@@ -456,7 +446,8 @@ body {
 
     .modal-lg &,
     .modal-xl &,
-    .modal-full & {
+    .modal-full &,
+    .modal-full-width & {
       @media (min-width: @splitWrapperBreakpoint) {
         max-width: 80%;
       }
@@ -464,7 +455,7 @@ body {
   }
 }
 
-/* Animation classes for dialogs triggered by "react-transition-group" component */
+// Animation classes for dialogs triggered by "react-transition-group" component
 .modal-enter {
   .modal-content {
     display: block;
@@ -501,4 +492,26 @@ body {
   .modal-backdrop {
     opacity: 0;
   }
-}
+}
+
+// modal-body atomic vh classes for iframes with unknown height
+// .modal-body {
+//   &.height-100vh {
+//     height: calc(~"var(--vh, 1vh) * 100 - 190px") !important;
+
+//     @media (max-width: @modal-sm) {
+//       height: calc(~"var(--vh, 1vh) * 100 - 170px") !important;
+//     }
+//   }
+
+//   // no modal-footer version
+//   &:last-child {
+//     &.height-100vh {
+//       height: calc(~"var(--vh, 1vh) * 100 - 120px") !important;
+
+//       @media (max-width: @modal-sm) {
+//         height: calc(~"var(--vh, 1vh) * 100 - 90px") !important;
+//       }
+//     }
+//   }
+// }

package/types.ts

@@ -277,7 +277,7 @@ export interface BarChartProps {
 
 export type bsStyle = 'default' | 'primary' | 'info' | 'warning' | 'danger' | 'success' | 'link';
 
-export type bsSizeDialog = 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fullscreen';
+export type bsSizeDialog = 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fullwidth' | 'fullheight' | 'fullscreen';
 
 export type bsSize = 'xs' | 'sm' | 'lg';
 
@@ -1551,7 +1551,7 @@ export interface SelectProps {
     useClear?: boolean;
     noItemMessage?: string | React.ReactNode;
     showSelectedItemIcon?: boolean;
-    showUnselectedIdemIcons?: boolean;
+    showUnselectedItemIcons?: boolean;
     value?: string[] | undefined;
     className?: string;
     btnClassName?: string;

package/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.2"
+    "version": "0.16.3-beta.2"
 }

package/lib/es/styles/design/divide.less

@@ -1,165 +0,0 @@
-[class*="divider-y"] > :not([hidden]) ~ :not([hidden]) {
-  border-bottom-width: 0;
-  border-top-style: solid;
-}
-
-[class*="divider-x"] > :not([hidden]) ~ :not([hidden]) {
-  border-right-width: 0;
-  border-left-style: solid;
-}
-
-.divider-y-1 {
-  &> :not([hidden]) ~ :not([hidden]) {
-    border-top-width: 1px;
-  }
-}
-
-.divider-y-2 > :not([hidden]) ~ :not([hidden]) {
-  border-top-width: 2px;
-}
-
-.divider-y-3 > :not([hidden]) ~ :not([hidden]) {
-  border-top-width: 3px;
-}
-
-.divider-x-1 {
-  &> :not([hidden]) ~ :not([hidden]) {
-    border-left-width: 1px;
-  }
-}
-
-.divider-x-2 > :not([hidden]) ~ :not([hidden]) {
-  border-left-width: 2px;
-}
-
-.divider-x-3 > :not([hidden]) ~ :not([hidden]) {
-  border-left-width: 3px;
-}
-
-// coloring
-
-.divider-color {
-  // white
-  // black
-  each(@colors-text-map, {
-    &-@{key} > :not([hidden]) ~ :not([hidden]) {
-      border-color: @value !important;
-    }
-  })
-
-  // primary
-  // secondary
-  each(@colors-brand-map, {
-    &-@{key} > :not([hidden]) ~ :not([hidden]) {
-      border-color: @value !important;
-    }
-  })
-
-  // info
-  // success
-  // warning
-  // danger
-  each(@colors-status-map, {
-    &-@{key} > :not([hidden]) ~ :not([hidden]) {
-      border-color: @value !important;
-    }
-  })
-
-  // darkest
-  // darker
-  // dark
-  // gray
-  // light
-  // lighter
-  // lightest
-  each(@colors-gray-map, {
-    &-@{key} > :not([hidden]) ~ :not([hidden]) {
-      border-color: @value !important;
-    }
-  })
-
-  // map-marker-asset
-  // map-marker-poi
-  // map-marker-geofence
-  // map-marker-route
-  each(@colors-map-marker-map, {
-    &-@{key} > :not([hidden]) ~ :not([hidden]) {
-      border-color: @value !important;
-    }
-  })
-
-  each(@colors-map-marker-night-map, {
-    &-@{key} > :not([hidden]) ~ :not([hidden]) {
-      border-color: @value !important;
-    }
-  })
-
-  // rating-1
-  // rating-2
-  // rating-3
-  // rating-4
-  // rating-5
-  each(@colors-rating-map, {
-    &-@{key} > :not([hidden]) ~ :not([hidden]) {
-      border-color: @value !important;
-    }
-  })
-
-  // status-available
-  // status-driving
-  // status-resting
-  // status-working
-  each(@colors-driving-status-map, {
-    &-@{key} > :not([hidden]) ~ :not([hidden]) {
-      border-color: @value !important;
-    }
-  })
-
-  // highlight-darkest
-  // highlight-darker
-  // highlight-dark
-  // highlight
-  // highlight-light
-  // highlight-lighter
-  // highlight-lightest
-  // highlight-decent
-  each(@colors-highlight-map, {
-    &-@{key} > :not([hidden]) ~ :not([hidden]) {
-      border-color: @value !important;
-    }
-  })
-
-  // coldplay-wine
-  // coldplay-aubergine
-  // coldplay-kashmir
-  // coldplay-fountain
-  // coldplay-turquoise
-  // coldplay-bermuda
-  // coldplay-moos
-  // coldplay-primrose
-  // coldplay-khaki
-  // & when (@buildColdplayColors = true) {
-  //   each(@colors-coldplay-map, {
-  //     &-@{key} > :not([hidden]) ~ :not([hidden]) {
-  //       border-color: @value !important;
-  //     }
-  //   })
-  // }
-
-  // warmup-crimson
-  // warmup-victoria
-  // warmup-cadillac
-  // warmup-raspberry
-  // warmup-cerise
-  // warmup-charm
-  // warmup-salmon
-  // warmup-cherokee
-  // warmup-corn
-  // & when (@buildWarmupColors = true) {
-  //   each(@colors-warmup-map, {
-  //     &-@{key} > :not([hidden]) ~ :not([hidden]) {
-  //       border-color: @value !important;
-  //     }
-  //   })
-  // }
-}

package/styles/design/divide.less

@@ -1,165 +0,0 @@
-[class*="divider-y"] > :not([hidden]) ~ :not([hidden]) {
-  border-bottom-width: 0;
-  border-top-style: solid;
-}
-
-[class*="divider-x"] > :not([hidden]) ~ :not([hidden]) {
-  border-right-width: 0;
-  border-left-style: solid;
-}
-
-.divider-y-1 {
-  &> :not([hidden]) ~ :not([hidden]) {
-    border-top-width: 1px;
-  }
-}
-
-.divider-y-2 > :not([hidden]) ~ :not([hidden]) {
-  border-top-width: 2px;
-}
-
-.divider-y-3 > :not([hidden]) ~ :not([hidden]) {
-  border-top-width: 3px;
-}
-
-.divider-x-1 {
-  &> :not([hidden]) ~ :not([hidden]) {
-    border-left-width: 1px;
-  }
-}
-
-.divider-x-2 > :not([hidden]) ~ :not([hidden]) {
-  border-left-width: 2px;
-}
-
-.divider-x-3 > :not([hidden]) ~ :not([hidden]) {
-  border-left-width: 3px;
-}
-
-// coloring
-
-.divider-color {
-  // white
-  // black
-  each(@colors-text-map, {
-    &-@{key} > :not([hidden]) ~ :not([hidden]) {
-      border-color: @value !important;
-    }
-  })
-
-  // primary
-  // secondary
-  each(@colors-brand-map, {
-    &-@{key} > :not([hidden]) ~ :not([hidden]) {
-      border-color: @value !important;
-    }
-  })
-
-  // info
-  // success
-  // warning
-  // danger
-  each(@colors-status-map, {
-    &-@{key} > :not([hidden]) ~ :not([hidden]) {
-      border-color: @value !important;
-    }
-  })
-
-  // darkest
-  // darker
-  // dark
-  // gray
-  // light
-  // lighter
-  // lightest
-  each(@colors-gray-map, {
-    &-@{key} > :not([hidden]) ~ :not([hidden]) {
-      border-color: @value !important;
-    }
-  })
-
-  // map-marker-asset
-  // map-marker-poi
-  // map-marker-geofence
-  // map-marker-route
-  each(@colors-map-marker-map, {
-    &-@{key} > :not([hidden]) ~ :not([hidden]) {
-      border-color: @value !important;
-    }
-  })
-
-  each(@colors-map-marker-night-map, {
-    &-@{key} > :not([hidden]) ~ :not([hidden]) {
-      border-color: @value !important;
-    }
-  })
-
-  // rating-1
-  // rating-2
-  // rating-3
-  // rating-4
-  // rating-5
-  each(@colors-rating-map, {
-    &-@{key} > :not([hidden]) ~ :not([hidden]) {
-      border-color: @value !important;
-    }
-  })
-
-  // status-available
-  // status-driving
-  // status-resting
-  // status-working
-  each(@colors-driving-status-map, {
-    &-@{key} > :not([hidden]) ~ :not([hidden]) {
-      border-color: @value !important;
-    }
-  })
-
-  // highlight-darkest
-  // highlight-darker
-  // highlight-dark
-  // highlight
-  // highlight-light
-  // highlight-lighter
-  // highlight-lightest
-  // highlight-decent
-  each(@colors-highlight-map, {
-    &-@{key} > :not([hidden]) ~ :not([hidden]) {
-      border-color: @value !important;
-    }
-  })
-
-  // coldplay-wine
-  // coldplay-aubergine
-  // coldplay-kashmir
-  // coldplay-fountain
-  // coldplay-turquoise
-  // coldplay-bermuda
-  // coldplay-moos
-  // coldplay-primrose
-  // coldplay-khaki
-  // & when (@buildColdplayColors = true) {
-  //   each(@colors-coldplay-map, {
-  //     &-@{key} > :not([hidden]) ~ :not([hidden]) {
-  //       border-color: @value !important;
-  //     }
-  //   })
-  // }
-
-  // warmup-crimson
-  // warmup-victoria
-  // warmup-cadillac
-  // warmup-raspberry
-  // warmup-cerise
-  // warmup-charm
-  // warmup-salmon
-  // warmup-cherokee
-  // warmup-corn
-  // & when (@buildWarmupColors = true) {
-  //   each(@colors-warmup-map, {
-  //     &-@{key} > :not([hidden]) ~ :not([hidden]) {
-  //       border-color: @value !important;
-  //     }
-  //   })
-  // }
-}