Compensate for border radius when displaying progress bar (#264)

jameslittle230 · Mar 17, 2022 · eeaca67 · eeaca67
1 parent f445a09
commit eeaca67
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/themes/basic.css b/themes/basic.css
@@ -16,6 +16,8 @@
   --stork-border-color: hsl(0, 0%, 65%);
   --stork-background-color: hsla(0, 0%, 97%);
   --stork-text-color: var(--stork-gray-9);
+
+  --stork-input-border-radius: 8px;
 }
 
 .stork-wrapper *,
@@ -32,7 +34,7 @@
   position: relative;
   box-shadow: inset 0 0.1em 0.3em hsla(0, 0%, 0%, 0.1);
   border: 1px solid var(--stork-border-color);
-  border-radius: 8px;
+  border-radius: var(--stork-input-border-radius);
   background-color: var(--stork-background-color);
   color: var(--stork-text-color);
   font-family: inherit;
@@ -51,6 +53,8 @@
   box-shadow: 0 0 8px var(--stork-blue-4);
   height: 1px;
   transition: width 0.25s ease, opacity 0.4s ease 0.4s;
+  margin-left: var(--stork-input-border-radius);
+  max-width: calc(100% - 2 * var(--stork-input-border-radius));
 }
 
 .stork-wrapper .stork-output {

diff --git a/themes/dark.css b/themes/dark.css
@@ -20,6 +20,8 @@
   --stork-border-color: var(--stork-gray-7);
   --stork-background-color: var(--stork-gray-8);
   --stork-text-color: var(--stork-gray-1);
+
+  --stork-input-border-radius: 8px;
 }
 
 .stork-wrapper-dark *,
@@ -36,7 +38,7 @@
   position: relative;
   box-shadow: inset 0 0.1em 0.3em hsla(0, 0%, 0%, 0.1);
   border: 1px solid var(--stork-border-color);
-  border-radius: 8px;
+  border-radius: var(--stork-input-border-radius);
   background-color: var(--stork-background-color);
   color: var(--stork-text-color);
   font-family: inherit;
@@ -55,6 +57,8 @@
   box-shadow: 0 0 8px var(--stork-violet-4);
   height: 1px;
   transition: width 0.25s ease, opacity 0.4s ease 0.4s;
+  margin-left: var(--stork-input-border-radius);
+  max-width: calc(100% - 2 * var(--stork-input-border-radius));
 }
 
 .stork-wrapper-dark .stork-output {

diff --git a/themes/flat.css b/themes/flat.css
@@ -16,6 +16,8 @@
   --stork-border-color: hsl(0, 0%, 80%);
   --stork-background-color: hsla(0, 0%, 97%);
   --stork-text-color: var(--stork-gray-9);
+
+  --stork-input-height: 2.4em;
 }
 
 .stork-wrapper-flat *,
@@ -26,12 +28,12 @@
 
 .stork-wrapper-flat .stork-input {
   width: 100%;
-  height: 2.4em;
+  height: var(--stork-input-height);
   font-size: 1em;
   padding: 0.4em 0.8em;
   position: relative;
   border: 2px solid var(--stork-border-color);
-  border-radius: 2.4em;
+  border-radius: calc(var(--stork-input-height) / 2);
   background-color: var(--stork-background-color);
   color: var(--stork-text-color);
   font-family: inherit;
@@ -50,6 +52,8 @@
   box-shadow: 0 0 8px var(--stork-blue-4);
   height: 1px;
   transition: width 0.25s ease, opacity 0.4s ease 0.4s;
+  margin-left: calc(var(--stork-input-height) / 2);
+  max-width: calc(100% - var(--stork-input-height));
 }
 
 .stork-wrapper-flat .stork-output {