@gataca/qr 2.0.9 → 2.0.11

package/dist/collection/components/gataca-qrws/gataca-qrws.css

@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@100;300;400;500;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700&display=swap");
 /* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
@@ -78,9 +80,14 @@ img {
   margin-right: 10px;
 }
 
+.popUpContainer .large-modal {
+  width: 300px;
+  min-height: 350px;
+}
 .popUpContainer .modal-window {
   position: relative;
   border-radius: 6px;
+  overflow: hidden;
   color: rgba(24, 27, 94, 0.8);
   box-shadow: 0px 3px 10px rgba(48, 48, 48, 0.1);
   display: flex;
@@ -89,8 +96,6 @@ img {
   align-items: center;
   display: flex;
   z-index: 1001;
-  width: 300px;
-  min-height: 408px;
   padding: 1px;
   background-color: white;
   border-radius: 12px;
@@ -104,12 +109,17 @@ img {
   height: 100%;
   text-align: left;
 }
-.popUpContainer .modal-window p {
-  font-family: "Work Sans", "Helvetica Neue", sans-serif;
-  font-weight: normal;
-  font-size: 12px;
+.popUpContainer .modal-window__content .hidenText {
+  display: none;
+}
+.popUpContainer .modal-window .modalText {
+  font-family: "Ubuntu", "Work Sans", "Helvetica Neue", sans-serif;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 24px;
+  margin-top: 10px;
   letter-spacing: 1px;
-  color: #1e1e20;
 }
 .popUpContainer .modal-window .qrTitleContainer {
   padding: 14px 24px;
@@ -121,12 +131,12 @@ img {
   line-height: 23.5px;
 }
 .popUpContainer .modal-window .qrDescription {
-  font-weight: 400;
+  font-family: "Poppins", "Ubuntu", "Work Sans", "Helvetica Neue", sans-serif;
   font-size: 14px;
-  line-height: 16.5px;
-  padding-top: 12px;
-  padding-bottom: 5px;
-  color: #A1A1A1;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  color: #707074;
 }
 .popUpContainer .modal-window .bold {
   font-weight: 600;
@@ -147,105 +157,120 @@ img {
   width: 252px;
   height: 252px;
 }
-.popUpContainer .reload {
+.popUpContainer .noBoxShadow {
+  box-shadow: none;
+}
+.popUpContainer .is-visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.is-transparent {
+  opacity: 0;
+}
+
+.success {
+  display: flex;
+  height: 300px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0px;
+}
+.success > img {
+  padding-bottom: 12px;
+}
+.success > .successMsg {
+  line-height: 23.5px;
+  color: var(--neutral-1000, #1e1e20);
+  text-align: center;
+  font-family: "Ubuntu", "Work Sans", "Helvetica Neue", sans-serif;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 24px;
+}
+
+.reload {
   height: 252px;
   width: 252px;
-  border: 1px dashed #A1A1A1;
+  border: 1px dashed #a1a1a1;
   border-radius: 12px;
   position: relative;
-  margin: 24px;
+  top: 24px;
+  margin: 0 24px 24px;
   display: flex;
+  overflow: hidden;
   justify-content: center;
   align-items: center;
 }
-.popUpContainer #qrwait {
+
+#qrwait {
   display: flex;
   justify-content: center;
 }
-.popUpContainer #qrwait,
-.popUpContainer #notify {
+
+#qrwait,
+#notify {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   border-radius: 20px;
 }
-.popUpContainer #notify {
+
+#notify {
   z-index: 10;
-  background-color: gray;
   position: absolute;
   justify-self: center;
   justify-items: center;
   justify-content: center;
   align-items: center;
   align-content: center;
-  align-self: center;
   display: flex;
   flex-direction: column;
-  padding: 24px;
   box-sizing: border-box;
-  /* Auto layout */
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
   padding: 20px;
-  background: rgba(255, 255, 255, 0.9);
-  /* Grey Colors/Grey 400 */
+  background: rgba(255, 255, 255, 0.95);
 }
-.popUpContainer .notify-text {
-  font-family: "Work Sans";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 16px;
-  text-align: center;
-  font-feature-settings: "salt" on;
-  color: #8B8B8B;
-  flex: none;
-  order: 1;
-  align-self: stretch;
-  flex-grow: 0;
-}
-.popUpContainer .alert {
+#notify > img {
+  padding-bottom: 12px;
+}
+
+.alert {
   display: flex;
   flex-direction: row;
-  align-items: center;
   justify-content: start;
   width: 252px;
   position: absolute;
-  bottom: 0;
-  background: #FFE5E5;
-  border-radius: 12px;
+  bottom: 0px;
+  border: 1px solid #ee888c;
+  background: #ffdedf;
+  border-radius: 11px;
+  box-sizing: border-box;
+  padding: 12px;
+  align-items: center;
+  gap: 12px;
 }
-.popUpContainer .alert img {
-  margin: 12px;
+.alert > img {
+  margin: 0;
 }
-.popUpContainer .alert p {
-  font-weight: 400;
+.alert > p {
+  font-family: "Poppins", "Ubuntu", "Work Sans", "Helvetica Neue", sans-serif;
   font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  margin-top: 0;
   line-height: 16px;
-  color: black;
-}
-.popUpContainer .success {
-  display: flex;
-  height: 300px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 0px;
-}
-.popUpContainer .success .successMsg {
-  margin-top: 20px;
-  font-size: 20px;
-  font-weight: 600;
-  line-height: 23.5px;
-}
-.popUpContainer .is-visible {
-  opacity: 1;
-  visibility: visible;
+  color: #1e1e20;
 }
 
-.is-transparent {
-  opacity: 0;
+.notify-text {
+  font-family: "Poppins", "Ubuntu", "Work Sans", "Helvetica Neue", sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  color: #707074;
+  text-align: center;
 }