switch to rem units

mucsi96 · May 9, 2024 · 4623072 · 4623072
1 parent 361be98
commit 4623072
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 13 deletions.
diff --git a/src/Avatar/Avatar.css b/src/Avatar/Avatar.css
@@ -3,8 +3,8 @@ button[bt-avatar] {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
+  width: 2.5rem;
+  height: 2.5rem;
   overflow: hidden;
   background-color: hsl(215, 14%, 34%);
   border-radius: 9999px;

diff --git a/src/InputLabel/InputLabel.css b/src/InputLabel/InputLabel.css
@@ -1,6 +1,6 @@
 label[bt] {
   display: flex;
-  gap: 8px;
+  gap: 0.5rem;
   flex-direction: column;
 
   color: var(--bt-strong-text-color);
@@ -12,8 +12,8 @@ label[bt] {
     color: var(--bt-strong-text-color);
     font-weight: 400;
     font-family: inherit;
-    padding: 10px;
-    border-radius: 8px;
+    padding: 0.625rem;
+    border-radius: 0.5rem;
     outline: none;
 
     &:focus {

diff --git a/src/Loader/Loader.css b/src/Loader/Loader.css
@@ -1,16 +1,16 @@
 [role='progressbar'][bt] {
   display: grid;
   justify-content: center;
-  height: 300px;
+  height: 18.75rem;
   align-items: center;
   grid-template-columns: repeat(5, auto);
-  gap: 3px;
+  gap: 0.25rem;
 
   div {
     background-color: var(--bt-strong-text-color);
     opacity: 0.85;
-    height: 60px;
-    width: 7px;
+    height: 3.75rem;
+    width: 0.5rem;
     display: inline-block;
     animation: bt-stretch-delay 1.2s infinite ease-in-out;
 

diff --git a/src/Notifications/Notifications.css b/src/Notifications/Notifications.css
@@ -9,7 +9,7 @@ section[bt-notifications] {
   max-width: calc(100vw - 1rem);
   display: flex;
   flex-direction: column-reverse;
-  gap: 16px;
+  gap: 1rem;
   background-color: unset;
   border: none;
 }
diff --git a/src/Table/Table.css b/src/Table/Table.css
@@ -4,7 +4,7 @@ table[bt] {
   font-size: 0.85em;
 
   th {
-    padding: 12px 24px;
+    padding: 0.75rem 1.5rem;
     font-weight: 600;
     background-color: hsl(217, 19%, 27%);
     color: var(--bt-text-color);
@@ -35,11 +35,11 @@ table[bt] {
   }
 
   td {
-    padding: 0 24px;
+    padding: 0 1.5rem;
     border-bottom: 1px solid hsl(217, 19%, 27%);
 
     &:not([bt-row-selector]) {
-      line-height: 52px;
+      line-height: 3.25rem;
     }
 
     [aria-selected='true'] &[bt-row-selector] {