fix: fixed docs + added new note

src/components/Modal/modal.scss

@@ -12,25 +12,23 @@
 // Default modal transition
 .fdv-modal-enter {
   opacity: 0;
-  transform: scale3d(1, 1, 1) translate3d(0, -400px, 0);
 }
 
 .fdv-modal-enter-to {
-  transform: scale3d(1, 1, 1);
+  opacity: 1;
 }
 
 .fdv-modal-enter-active,
 .fdv-modal-leave-active {
-  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  opacity: 0;
 }
 
 .fdv-modal-leave {
-  transform: scale3d(1, 1, 1);
+  opacity: 1;
 }
 
 .fdv-modal-leave-to {
   opacity: 0;
-  transform: scale3d(1, 1, 1) translate3d(0, -400px, 0);
 }
 
 .fd-modal__content--overrides {

src/docs/content/en_us/master-details.md

@@ -4,6 +4,14 @@ fdRelatedComponents:
 ---
 # Master Details
 
+::: tip CSS NEEDED & BETA NOTICE
+
+The Master Details-related components require some additional CSS that is not part of Fundamental Styles. If you want to use the master detail-related components you have to inlude the extra **Fundamental Vue CSS** file. It is part of the NPM package in `dist`. It is also available at [https://unpkg.com/fundamental-vue](https://unpkg.com/fundamental-vue@latest/dist/FundamentalVue.umd.css)
+
+The Master Details-related components are in **beta**.
+
+:::
+
 This component provides a standardized master-details layout. The master section contains a list, whereas the details section's content is completely up to the developer. The `fd-master-details` component, exposes multiple props and slots allowing the consumer to customize the layout.
 
 
@@ -21,8 +29,8 @@ placed inside an `fd-modal` allowing the `master` section to take up all the ava
 
 ## Simple example
 
-The simplest way to use it, would be by passing the `master-items` prop and populating the `details-content` slot (since it is empty by default). 
-  
+The simplest way to use it, would be by passing the `master-items` prop and populating the `details-content` slot (since it is empty by default).
+
 <d-example name="default">
 </d-example>
 
@@ -31,13 +39,13 @@ The simplest way to use it, would be by passing the `master-items` prop and popu
 The component exposes `master-width` and `gap` props to control the with of the master column and that of the gap between the 2 columns. By default, the `master-width` is set to 50% and the `gap` is set to 0. The details column will always automatically take up the remaining space.
 You can pass the size that you want is either pixels or percentage, e.g: '50%', '20px'...
 
-Use the sliders in the example below to see how the layout changes when changing the aforementioned props 
+Use the sliders in the example below to see how the layout changes when changing the aforementioned props
 <d-example name="layout">
 </d-example>
 
 ## Using a Virtualized List
 
-As we have mentioned before, the component can either user `fd-list-group` or `fd-virtualized-list` under the hood. To use the virtualized list, you need to set the `use-virtualized-list` prop to `true`. You can then pass an object that contains all the props that you would usually pass to the `fd-virtualized-list`. The `fd-master-details` uses a default configuration object which means you can choose to only pass the properties that you wish to override. The defaults are:  
+As we have mentioned before, the component can either user `fd-list-group` or `fd-virtualized-list` under the hood. To use the virtualized list, you need to set the `use-virtualized-list` prop to `true`. You can then pass an object that contains all the props that you would usually pass to the `fd-virtualized-list`. The `fd-master-details` uses a default configuration object which means you can choose to only pass the properties that you wish to override. The defaults are:
 
 ```js
 defaultVirtualizedListConfig: {
@@ -61,7 +69,7 @@ defaultVirtualizedListConfig: {
 
 ## Slots
 
-This component exposes multiple slots allowing you to customize the contents of the sections' title and content. You can see how the slots are positioned in the image below. 
+This component exposes multiple slots allowing you to customize the contents of the sections' title and content. You can see how the slots are positioned in the image below.
 
 ![master-details-slots](../../../../public/images/master-details-slots.png)
 
@@ -75,7 +83,7 @@ Below is an example making full use of all the available slots (it also simulate
 In order to ensure a more responsive design, the component exposes `auto-open-modal`, `mobile-modal-styles` and `mobile-breakpoints` props allowing the developer to control when should the `details` switch to an `fd-modal` and how should the modal look like. By default, the modal will be fullscreen and will be triggered on the `Breakpoints.XSmall` breakpoint.
 
 Below is an example that makes use of these props to customize the mobile behavior of the component.
- 
+
 <d-example name="mobile">
 </d-example>
 

src/docs/index.js

@@ -24,6 +24,7 @@ import "prismjs/components/prism-markup.min";
 import "prismjs/components/prism-scss.min";
 import "prismjs/components/prism-css.min";
 import "prismjs/components/prism-bash.min";
+import "./../components/masterDetails/master-details.styles.scss";
 
 const documentedComponents = getDocumentedComponents();
 

yarn.lock

@@ -6154,7 +6154,7 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
-fundamental-styles@^0.1.0:
+[email protected]:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/fundamental-styles/-/fundamental-styles-0.1.0.tgz#6e73945112e9639a6e366a6efbf5c1bab0aa1e94"
   integrity sha512-nLC2ZMTmxhq4kvP4hypQkx7CnUlXfjYfE7KQJrX6D6zLpb1zAuIuwuEv/D2FEqDkir4T9/nYnYg+agW6T8Mt7Q==