Fix information icon size and position (#29)

* Some websites will set max-width in svg. Remove the restriction
* Fix infomation icon position

Co-authored-by: Bill Chou <v-tincho@microsoft.com>

README.md

@@ -254,7 +254,7 @@ There are six data types: `ICookieCategory`, `ITextResources`, `ICookieCategorie
 
     + `stylesNonce` is the `nonce` attribute for `<style>` tag.
     
-    The `nonce` attribute enables you to **whitelist** certain inline script and style elements, while avoiding use of the Content Security Policy ([CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)) unsafe-inline directive (which would allow all inline script/style), so that you still retain the key CSP feature of disallowing inline script/style in general. Also see [CSP: style-src](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) for more information. This library includes a built in hard-coded `nonce` attribute, which was generated by random number generator with base64-value, in all the generated `<style>` tags.
+    The `nonce` attribute enables you to **whitelist** certain inline script and style elements, while avoiding use of the Content Security Policy ([CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)) unsafe-inline directive (which would allow all inline script/style), so that you still retain the key CSP feature of disallowing inline script/style in general. Also see [CSP: style-src](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) for more information. If `stylesNonce` is undefined, the `nonce` attribute will not be added to `<style>` tag.
 
 + `IThemes` is a collections of themes. The properties names are the names of each themes, and the values are the theme objects.
 
@@ -382,7 +382,7 @@ cc.hidePreferences();
 
 1. Change the width of buttons in banner: Change `$bannerBtnWidth` in `styles.scss`
 
-2. `webpack.config.js` file is for development purpose, and `webpack.production.config.js` is for production. The only difference between `webpack.config.js` and `webpack.production.config.js` is `localIdentName` in `use/options/modules` under `module/rules`. 
+2. `webpack.dev.js` file is for development purpose, and `webpack.prod.js` is for production. `webpack.common.js` is the common parts in both `webpack.dev.js` and `webpack.prod.js`. Both `webpack.dev.js` and `webpack.prod.js` require `webpack.common.js`. There are two differences between `webpack.dev.js` and `webpack.prod.js`. `localIdentName` in `use/options/modules` under `module/rules` only uses hash in production mode. Only development mode contains `devServer`. The `headers` in `devServer` can be used to set `CSP`. The default `nonce` is `test1`.
 
 ## Contributing
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "consent-banner",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "description": "The library which will generate a banner at the specified position for asking the cookie preferences.",
   "main": "dist/consent-banner.js",
   "types": "dist/consent-banner.d.ts",

src/styles.scss

@@ -63,17 +63,20 @@ $radio-button-disabled-border-color: rgba(0, 0, 0, 0.2);
 }
 
 .bannerInform {
-  margin : {
+  margin: 0;
+  padding : {
     left: 5%;
     top: 8px;
     bottom: 8px;
   }
   
-  @include rtlDesign(8px 5% 8px 0, 0);
+  @include rtlDesign(0, 8px 5% 8px 0);
 }
 
 .bannerBody svg {
   fill: none;
+  max-width: none;
+  max-height: none;
 }
 
 .infoIcon {
@@ -85,12 +88,13 @@ $radio-button-disabled-border-color: rgba(0, 0, 0, 0.2);
   @include bannerFont(normal, 24px);
   
   /* identical to box height */
-  line-height: 24px;
+  line-height: 0;
 }
 
 .bannerInformBody {
   display: table-cell;
   vertical-align: middle;
+  padding: 0;
   
   @include bannerFont(normal, 13px);
   line-height: 16px;
@@ -503,12 +507,13 @@ input[type="radio"].cookieItemRadioBtn {
   /* For mobile phones: */
   
   .buttonGroup, .bannerInform {
-    margin : {
-      top: 0;
-      bottom: 16px;
+    padding : {
+      top: 8px;
+      bottom: 12px;
       left: 3.75%;
       right: 3.75%;
     }
+    margin: 0;
 
     width: 92.5%;
   }