@pwabuilder/pwainstall
Advanced tools
Comparing version 0.9.4 to 0.9.5
{ | ||
"name": "@pwabuilder/pwainstall", | ||
"version": "0.9.4", | ||
"version": "0.9.5", | ||
"description": "", | ||
@@ -5,0 +5,0 @@ "main": "dist/pwa-install.js", |
@@ -49,1 +49,11 @@ # pwa-install | ||
| `openPrompt()` | `Opens the install modal` | | ||
### CSS Variables | ||
We recommend using our [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) to easliy tweak the style of this component to fit your project. Here are our current | ||
supported CSS variables. | ||
| name | Description | | ||
| ------------ | ------------------------- | | ||
| `--install-button-color` | `Changes the color of the install button` | | ||
| `--modal-z-index` | `Changes the z-index of the install modal`| |
@@ -35,4 +35,4 @@ import { | ||
top: 3em; | ||
left: 14em; | ||
right: 14em; | ||
left: 12em; | ||
right: 12em; | ||
font-family: sans-serif; | ||
@@ -95,3 +95,3 @@ box-shadow: 0px 25px 26px rgba(32, 36, 50, 0.25), 0px 5px 9px rgba(51, 58, 83, 0.53); | ||
display: flex; | ||
align-items: flex-start; | ||
justify-content: space-between; | ||
margin: 40px; | ||
@@ -165,5 +165,2 @@ margin-bottom: 32px; | ||
#closeButton { | ||
position: fixed; | ||
top: 5em; | ||
right: 18em; | ||
background: transparent; | ||
@@ -180,6 +177,3 @@ border: none; | ||
cursor: pointer; | ||
z-index: 1; | ||
animation-name: fadein; | ||
animation-duration: 450ms; | ||
align-self: self-end; | ||
} | ||
@@ -258,2 +252,6 @@ | ||
#logoContainer { | ||
display: flex; | ||
} | ||
infinite-carousel-wc { | ||
@@ -296,6 +294,2 @@ background: #f0f0f0; | ||
} | ||
#closeButton { | ||
right: 28em; | ||
} | ||
} | ||
@@ -308,6 +302,2 @@ | ||
} | ||
#closeButton { | ||
right: 32em; | ||
} | ||
} | ||
@@ -320,9 +310,5 @@ | ||
} | ||
#closeButton { | ||
right: 47em; | ||
} | ||
} | ||
@media(max-width: 1200px) { | ||
@media(max-width: 1220px) { | ||
#installModal { | ||
@@ -339,7 +325,2 @@ bottom: 0em; | ||
#closeButton { | ||
top: 20px; | ||
right: 20px; | ||
} | ||
#screenshots { | ||
@@ -510,8 +491,2 @@ justify-content: center; | ||
${this.openmodal ? html`<button id="closeButton" @click="${() => this.cancel()}"> | ||
<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
<path opacity="0.33" fill-rule="evenodd" clip-rule="evenodd" d="M1.11932 0.357981C1.59693 -0.119327 2.37129 -0.119327 2.8489 0.357981L11.7681 9.27152L20.6873 0.357981C21.165 -0.119327 21.9393 -0.119327 22.4169 0.357981C22.8945 0.835288 22.8945 1.60916 22.4169 2.08646L13.4977 11L22.4169 19.9135C22.8945 20.3908 22.8945 21.1647 22.4169 21.642C21.9393 22.1193 21.165 22.1193 20.6873 21.642L11.7681 12.7285L2.8489 21.642C2.37129 22.1193 1.59693 22.1193 1.11932 21.642C0.641705 21.1647 0.641705 20.3908 1.11932 19.9135L10.0385 11L1.11932 2.08646C0.641705 1.60916 0.641705 0.835288 1.11932 0.357981Z" fill="#60656D"/> | ||
</svg> | ||
</button>` : null} | ||
${ | ||
@@ -522,12 +497,19 @@ this.openmodal ? | ||
<div id="headerContainer"> | ||
<img src="${this.iconpath ? this.iconpath : this.manifestdata.icons[0].src}"></img> | ||
<div id="logoContainer"> | ||
<img src="${this.iconpath ? this.iconpath : this.manifestdata.icons[0].src}"></img> | ||
<div> | ||
<h1>${this.manifestdata.name}</h1> | ||
<div id="installTitle"> | ||
<h1>${this.manifestdata.name}</h1> | ||
<p id="desc"> | ||
<p id="desc"> | ||
${this.explainer} | ||
</p> | ||
</div> | ||
</div> | ||
<button id="closeButton" @click="${() => this.cancel()}"> | ||
<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
<path opacity="0.33" fill-rule="evenodd" clip-rule="evenodd" d="M1.11932 0.357981C1.59693 -0.119327 2.37129 -0.119327 2.8489 0.357981L11.7681 9.27152L20.6873 0.357981C21.165 -0.119327 21.9393 -0.119327 22.4169 0.357981C22.8945 0.835288 22.8945 1.60916 22.4169 2.08646L13.4977 11L22.4169 19.9135C22.8945 20.3908 22.8945 21.1647 22.4169 21.642C21.9393 22.1193 21.165 22.1193 20.6873 21.642L11.7681 12.7285L2.8489 21.642C2.37129 22.1193 1.59693 22.1193 1.11932 21.642C0.641705 21.1647 0.641705 20.3908 1.11932 19.9135L10.0385 11L1.11932 2.08646C0.641705 1.60916 0.641705 0.835288 1.11932 0.357981Z" fill="#60656D"/> | ||
</svg> | ||
</button> | ||
</div> | ||
@@ -534,0 +516,0 @@ |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
513045
15
58
3606