@everymatrix/player-kyc-verification 1.0.69

package/dist/collection/components/player-kyc-verification/player-kyc-verification.css

@@ -0,0 +1,173 @@
+:host {
+  font-family: inherit;
+}
+
+button, select {
+  font-family: inherit;
+}
+
+.ModalContainer {
+  container-type: inline-size;
+}
+
+.player-kyc-verification-widget {
+  padding: 20px;
+  align-items: center;
+}
+.player-kyc-verification-widget h2 {
+  margin: 15px;
+}
+.player-kyc-verification-widget .widget-description {
+  margin: 24px 0px;
+}
+.player-kyc-verification-widget .verification-types {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 34px;
+}
+.player-kyc-verification-widget .verification-types .verification-box {
+  transition: height 0.3s, border-color 0.3s;
+  border: solid 1px var(--emfe-w-color-gray-100, #E6E6E6);
+  border-radius: 2px;
+  display: flex;
+  flex-direction: column;
+  padding: 0px 14px;
+  border-width: 2px 2px 8px 2px;
+  align-self: start;
+}
+.player-kyc-verification-widget .verification-types .verification-box .box {
+  flex-shrink: 0;
+}
+.player-kyc-verification-widget .verification-types .verification-box .box-header {
+  display: flex;
+  padding: 14px 0px;
+  justify-content: space-between;
+  cursor: pointer;
+  align-items: center;
+}
+.player-kyc-verification-widget .verification-types .verification-box .box-header .box-icon {
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+}
+.player-kyc-verification-widget .verification-types .verification-box .box-header .box-icon svg {
+  height: 24px;
+  width: 24px;
+}
+.player-kyc-verification-widget .verification-types .verification-box .box-header .box-title {
+  flex-grow: 1;
+  font-size: 18px;
+}
+.player-kyc-verification-widget .verification-types .verification-box .box-header .chevron-icon {
+  flex-grow: 10;
+  width: 14px;
+  height: 14px;
+  display: flex;
+  justify-content: flex-end;
+}
+.player-kyc-verification-widget .verification-types .verification-box .box-header .chevron-icon svg {
+  width: 20px;
+  height: 22px;
+}
+.player-kyc-verification-widget .verification-types .verification-box .box-content {
+  display: none;
+  flex-grow: 1;
+  border-top: 0.4px solid var(--emfe-w-color-gray-100, #E6E6E6);
+  padding: 10px 0px;
+  flex-grow: 1;
+}
+.player-kyc-verification-widget .verification-types .verification-box .box-content .upload-status {
+  text-align: center;
+  padding: 20px;
+}
+.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: center;
+}
+.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown svg {
+  margin: 16px;
+  cursor: pointer;
+}
+.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .nice-select {
+  cursor: pointer;
+  width: 100%;
+  height: 30px;
+  padding: 4px 14px;
+  font-size: 14px;
+  border: 1px solid var(--emfe-w-color-gray-150, #828282);
+  border-radius: 2px;
+  background-color: var(--emfe-w-color-white, #FFFFFF);
+  color: #333;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  padding-right: 30px;
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="%23333" d="M10 18.4l-6.5-6.5h13z"/><path fill="%23333" d="M10 1.6l6.5 6.5H3.5z"/></svg>');
+}
+.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .sample-file .download-button {
+  font-family: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--emfe-w-color-white, #FFFFFF);
+  color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
+  border: none;
+  font-size: 16px;
+  padding: 10px 0px 0px 0px;
+  cursor: pointer;
+}
+.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .sample-file .download-button svg {
+  margin-right: 10px;
+}
+.player-kyc-verification-widget .verification-types .verification-box.expanded {
+  border-color: var(--emfe-w-color-valid var(--emfe-w-color-green, #48952a));
+  min-height: 120px;
+}
+.player-kyc-verification-widget .verification-types .verification-box.failed {
+  border-color: var(--emfe-w-color-error var(--emfe-w-color-red, #FD2839));
+}
+.player-kyc-verification-widget .verification-types .verification-box.success {
+  border-color: var(--emfe-w-color-valid var(--emfe-w-color-green, #48952a));
+}
+.player-kyc-verification-widget .verification-types .verification-box.expanded .box-content {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+.player-kyc-verification-widget .verification-types .verification-box.expanded .box-content .verification-status {
+  margin: 12px 0px 16px;
+  font-size: 18px;
+  text-align: center;
+  color: var(--emfe-w-color-gray-150, #828282);
+}
+
+.MenuReturnButton {
+  display: flex;
+  align-items: center;
+}
+
+@container (min-width: 700px) {
+  .player-kyc-verification-widget {
+    padding: 100px 60px;
+  }
+}
+@container (max-width: 700px) {
+  .player-kyc-verification-widget h2 {
+    margin: 15px;
+    text-align: center;
+  }
+  .player-kyc-verification-widget .verification-types {
+    grid-template-columns: 1fr;
+    grid-gap: 16px;
+  }
+}
+@container (max-width: 1240px) and (min-width: 701px) {
+  .player-kyc-verification-widget .verification-types {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}