nav tabs on admin dashboard

node_modules/style-loader/README.md

@@ -14,11 +14,11 @@
 
 <h2 align="center">Install</h2>
 
-```
+```bash
 npm install style-loader --save-dev
 ```
 
-<h2 align="center"><a href="https://webpack.js.org/concepts/loaders">Usage</a></h2>
+<h2 align="center">Usage</h2>
 
 It's recommended to combine `style-loader` with the [`css-loader`](https://github.com/webpack/css-loader)
 
@@ -57,7 +57,7 @@ style.className === "z849f98ca812"
 
 ### `Url`
 
-It's also possible to add a URL `<link href="path/to/file.css" rel="stylesheet">` instead of a inlining the CSS `{String}` with `<style></style>` tag.
+It's also possible to add a URL `<link href="path/to/file.css" rel="stylesheet">` instead of inlining the CSS `{String}` with `<style></style>` tag.
 
 ```js
 import url from 'file.css'
@@ -84,10 +84,12 @@ import url from 'file.css'
 <link rel="stylesheet" href="path/to/file.css">
 ```
 
-> :information_source: Source maps and assets referenced with `url`: when style loader is used with `{ options: { sourceMap: true } }` option, the CSS modules will be generated as `Blob`s, so relative paths don't work (they would be relative to `chrome:blob` or `chrome:devtools`). In order for assets to maintain correct paths setting `output.publicPath` property of webpack configuration must be set, so that absolute paths are generated. Alternatively you can enable the `convertToAbsoluteUrls` option mentioned above.
+> ℹ️ Source maps and assets referenced with `url`: when style loader is used with `{ options: { sourceMap: true } }` option, the CSS modules will be generated as `Blob`s, so relative paths don't work (they would be relative to `chrome:blob` or `chrome:devtools`). In order for assets to maintain correct paths setting `output.publicPath` property of webpack configuration must be set, so that absolute paths are generated. Alternatively you can enable the `convertToAbsoluteUrls` option mentioned above.
 
 ### `Useable`
 
+The `style-loader` injects the styles lazily making them useable on-demand via `style.use()` / `style.unuse()`
+
 By convention the `Reference Counter API` should be bound to `.useable.css` and the `.css` should be loaded with basic `style-loader` usage.(similar to other file types, i.e. `.useable.less` and `.less`).
 
 **webpack.config.js**
@@ -128,19 +130,36 @@ style.unuse(); // = style.unref();
 
 Styles are not added on `import/require()`, but instead on call to `use`/`ref`. Styles are removed from page if `unuse`/`unref` is called exactly as often as `use`/`ref`.
 
-:warning: Behavior is undefined when `unuse`/`unref` is called more often than `use`/`ref`. Don't do that.
+> ⚠️  Behavior is undefined when `unuse`/`unref` is called more often than `use`/`ref`. Don't do that.
 
 <h2 align="center">Options</h2>
 
 |Name|Type|Default|Description|
 |:--:|:--:|:-----:|:----------|
+|**`hmr`**|`{Boolean}`|`true`|Enable/disable Hot Module Replacement (HMR), if disabled no HMR Code will be added (good for non local development/production)|
 |**`base`** |`{Number}`|`true`|Set module ID base (DLLPlugin)|
 |**`attrs`**|`{Object}`|`{}`|Add custom attrs to `<style></style>`|
 |**`transform`** |`{Function}`|`false`|Transform/Conditionally load CSS by passing a transform/condition function|
-|**`insertAt`**|`{String}`|`bottom`|Inserts `<style></style>` at the given position|
-|**`insertInto`**|`{String}`|`<head>`|Inserts `<style></style>` into the given position|
+|**`insertAt`**|`{String\|Object}`|`bottom`|Inserts `<style></style>` at the given position|
+|**`insertInto`**|`{String\|Function}`|`<head>`|Inserts `<style></style>` into the given position|
+|**`singleton`**|`{Boolean}`|`undefined`|Reuses a single `<style></style>` element, instead of adding/removing individual elements for each required module.|
 |**`sourceMap`**|`{Boolean}`|`false`|Enable/Disable Sourcemaps|
-|**`convertToAbsoluteUrls`**|`{Boolean}`|`false`|Coverts relative URLs to absolute urls, when source maps are enabled|
+|**`convertToAbsoluteUrls`**|`{Boolean}`|`false`|Converts relative URLs to absolute urls, when source maps are enabled|
+
+### `hmr`
+
+Enable/disable Hot Module Replacement (HMR), if disabled no HMR Code will be added.
+This could be used for non local development and production.
+
+**webpack.config.js**
+```js
+{
+  loader: 'style-loader',
+  options: {
+    hmr: false
+  }
+}
+```
 
 ### `base`
 
@@ -227,10 +246,12 @@ A `transform` is a function that can modify the css just before it is loaded int
 This function will be called on the css that is about to be loaded and the return value of the function will be loaded into the page instead of the original css.
 If the return value of the `transform` function is falsy, the css will not be loaded into the page at all.
 
+> ⚠️ In case you are using ES Module syntax in `tranform.js` then, you **need to transpile** it or otherwise it will throw an `{Error}`.
+
 **webpack.config.js**
 ```js
 {
-  loader: 'style-loader'
+  loader: 'style-loader',
   options: {
     transform: 'path/to/transform.js'
   }
@@ -252,7 +273,7 @@ module.exports = function (css) {
 **webpack.config.js**
 ```js
 {
-  loader: 'style-loader'
+  loader: 'style-loader',
   options: {
     transform: 'path/to/conditional.js'
   }
@@ -278,36 +299,64 @@ By default, the style-loader appends `<style>` elements to the end of the style
 **webpack.config.js**
 ```js
 {
-  loader: 'style-loader'
+  loader: 'style-loader',
   options: {
     insertAt: 'top'
   }
 }
 ```
 
-### `insertInto`
-By default, the style-loader inserts the `<style>` elements into the `<head>` tag of the page. If you want the tags to be inserted somewhere else, e.g. into a [ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot), you can specify a CSS selector for that element here, e.g
+A new `<style>` element can be inserted before a specific element by passing an object, e.g.
 
 **webpack.config.js**
 ```js
 {
-  loader: 'style-loader'
+  loader: 'style-loader',
   options: {
-    insertAt: '#host::shadow>#root'
+    insertAt: {
+        before: '#id'
+    }
+  }
+}
+```
+
+### `insertInto`
+By default, the style-loader inserts the `<style>` elements into the `<head>` tag of the page. If you want the tags to be inserted somewhere else you can specify a CSS selector for that element here. If you target an [IFrame](https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement) make sure you have sufficient access rights, the styles will be injected into the content document head.
+
+You can also pass function to override default behavior and insert styles in your container, e.g
+
+**webpack.config.js**
+```js
+{
+  loader: 'style-loader',
+  options: {
+    insertInto: () => document.querySelector("#root"),
+  }
+}
+```
+
+Using function you can insert the styles into a [ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot), e.g
+
+**webpack.config.js**
+```js
+{
+  loader: 'style-loader',
+  options: {
+    insertInto: () => document.querySelector("#root").shadowRoot,
   }
 }
 ```
 
 ### `singleton`
 
-If defined, the style-loader will reuse a single `<style>` element, instead of adding/removing individual elements for each required module.
+If defined, the style-loader will reuse a single `<style></style>` element, instead of adding/removing individual elements for each required module.
 
 > ℹ️  This option is on by default in IE9, which has strict limitations on the number of style tags allowed on a page. You can enable or disable it with the singleton option.
 
 **webpack.config.js**
 ```js
 {
-  loader: 'style-loader'
+  loader: 'style-loader',
   options: {
     singleton: true
   }
@@ -321,7 +370,7 @@ Enable/Disable source map loading
 **webpack.config.js**
 ```js
 {
-  loader: 'style-loader'
+  loader: 'style-loader',
   options: {
     sourceMap: true
   }
@@ -335,7 +384,7 @@ If convertToAbsoluteUrls and sourceMaps are both enabled, relative urls will be
 **webpack.config.js**
 ```js
 {
-  loader: 'style-loader'
+  loader: 'style-loader',
   options: {
     sourceMap: true,
     convertToAbsoluteUrls: true