Fix overflow on ID card (#1603)

* add local bezel variable to inputs * 🤖 Selenium screenshots auto-update * 🤖 Selenium screenshots auto-update --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Nicolas Mattia <nicolas.mattia@dfinity.org>
dfinity · May 15, 2023 · 3bfc3d6 · 3bfc3d6
1 parent 31a8c6f
commit 3bfc3d6
Show file tree

Hide file tree

Showing 11 changed files with 27 additions and 14 deletions.
diff --git a/screenshots/desktop/displayManage.png b/screenshots/desktop/displayManage.png
diff --git a/screenshots/desktop/displayManageSingle.png b/screenshots/desktop/displayManageSingle.png
diff --git a/screenshots/desktop/displayUserNumber.png b/screenshots/desktop/displayUserNumber.png
diff --git a/screenshots/desktop/promptCaptcha.png b/screenshots/desktop/promptCaptcha.png
diff --git a/screenshots/desktop/promptCaptchaReady.png b/screenshots/desktop/promptCaptchaReady.png
diff --git a/screenshots/mobile/displayManage.png b/screenshots/mobile/displayManage.png
diff --git a/screenshots/mobile/displayManageSingle.png b/screenshots/mobile/displayManageSingle.png
diff --git a/screenshots/mobile/displayUserNumber.png b/screenshots/mobile/displayUserNumber.png
diff --git a/screenshots/mobile/promptCaptcha.png b/screenshots/mobile/promptCaptcha.png
diff --git a/screenshots/mobile/promptCaptchaReady.png b/screenshots/mobile/promptCaptchaReady.png
diff --git a/src/frontend/src/styles/main.css b/src/frontend/src/styles/main.css
@@ -1297,10 +1297,18 @@ a:hover,
 }
 
 .c-input {
+  --bezel-top: var(--rs-input-bezel-narrow);
+  --bezel-bottom: var(--rs-input-bezel-narrow);
+  --bezel-left: calc(3 * var(--rs-input-bezel));
+  --bezel-right: calc(3 * var(--rs-input-bezel));
+
+  --bezel: var(--bezel-top) var(--bezel-right) var(--bezel-bottom)
+    var(--bezel-left);
+
   position: relative;
   display: block;
   width: 100%;
-  padding: var(--rs-input-bezel-narrow) calc(3 * var(--rs-input-bezel));
+  padding: var(--bezel);
   margin-top: var(--rs-input-stack);
   background: var(--rc-input);
   color: var(--rc-onInput);
@@ -1348,14 +1356,14 @@ a:hover,
 }
 
 .c-input--spacious {
-  padding: calc(2 * var(--rs-input-bezel)) calc(3 * var(--rs-input-bezel))
-    calc(1.8 * var(--rs-input-bezel));
+  --bezel-top: calc(2 * var(--rs-input-bezel));
+  --bezel-bottom: calc(1.8 * var(--rs-input-bezel));
 }
 
 .c-input--vip {
+  --bezel-top: calc(1.2 * var(--rs-input-bezel));
+  --bezel-bottom: var(--rs-input-bezel);
   font-size: 1.4em;
-  padding: calc(1.2 * var(--rs-input-bezel)) calc(3 * var(--rs-input-bezel))
-    var(--rs-input-bezel);
 }
 
 .c-input--vip::placeholder {
@@ -1369,21 +1377,24 @@ a:hover,
 }
 
 .c-input--textarea {
-  padding: calc(3 * var(--rs-input-bezel));
+  --bezel: calc(3 * var(--rs-input-bezel));
 }
 
 .c-input--textarea-narrow {
-  padding: calc(1.5 * var(--rs-input-bezel));
+  --bezel: calc(1.5 * var(--rs-input-bezel));
 }
 
 .c-input--recovery {
-  padding: calc(1.5 * var(--rs-input-bezel));
+  --bezel: calc(1.5 * var(--rs-input-bezel));
+
   background-color: var(--rc-line);
 }
 
 .c-input--with-button {
-  padding: calc(1.5 * var(--rs-input-bezel)) calc(1.5 * var(--rs-input-bezel))
-    calc(3 * var(--rs-input-bezel));
+  --bezel-top: calc(1.5 * var(--rs-input-bezel));
+  --bezel-bottom: calc(3 * var(--rs-input-bezel));
+  --bezel-left: calc(1.5 * var(--rs-input-bezel));
+  --bezel-right: calc(1.5 * var(--rs-input-bezel));
 }
 
 .c-input--id {
@@ -1392,8 +1403,8 @@ a:hover,
 .c-input--id__wrap {
   min-height: 10em;
   position: relative;
-  margin: calc(-4 * var(--rs-input-bezel)) calc(-3 * var(--rs-input-bezel));
-  padding: calc(4 * var(--rs-input-bezel));
+  margin: calc(-1 * var(--bezel));
+  padding: var(--bezel);
   overflow: hidden;
   border-radius: var(--rs-input-border-radius);
 }
@@ -1404,7 +1415,8 @@ a:hover,
   height: 100%;
   width: 100%;
   z-index: 0;
-  margin: calc(-4 * var(--rs-input-bezel));
+  top: 0;
+  left: 0;
 }
 
 .c-dapp-logo {
@@ -1433,7 +1445,8 @@ a:hover,
 
 .c-input--icon {
   position: relative;
-  padding-bottom: calc(4 * var(--rs-input-bezel));
+  --bezel-top: calc(4 * var(--rs-input-bezel));
+
   margin-bottom: calc(var(--rs-input-stack) * 2);
 }