Use relative CSS units (#484)

src/components/ColorPicker.css

@@ -35,7 +35,7 @@
 }
 
 .color-picker-content {
-  padding: 15px 9px 9px 15px;
+  padding: 1rem 0.5rem 0.5rem 1rem;
 }
 
 .colors-gallery {
@@ -45,12 +45,12 @@
 
 .color-picker-swatch {
   position: relative;
-  height: 30px;
+  height: 1.875rem;
-  width: 30px;
+  width: 1.875rem;
   cursor: pointer;
   outline: none;
   border-radius: 4px;
-  margin: 0px 6px 6px 0px;
+  margin: 0px 0.375rem 0.375rem 0px;
   box-sizing: border-box;
   border: 1px solid #ddd;
 }
@@ -75,8 +75,8 @@
 
 .color-picker-hash {
   background: #dee2e6;
-  height: 30px;
+  height: 1.875rem;
-  width: 30px;
+  width: 1.875rem;
   border-radius: 4px 0px 0px 4px;
   color: #495057;
   display: flex;
@@ -89,33 +89,33 @@
 }
 
 .color-picker-input {
-  width: 100px;
+  width: 6.25em;
-  font-size: 14px;
+  font-size: 1rem;
   color: #343a40;
   border: 0px;
   outline: none;
-  height: 28px;
+  height: 1.75em;
   box-shadow: #dee2e6 0px 0px 0px 1px inset;
   box-sizing: content-box;
   border-radius: 0px 4px 4px 0px;
   float: left;
-  padding-left: 8px;
+  padding-left: 0.5em;
   text-transform: lowercase;
 }
 
 .color-picker-label-swatch {
-  height: 30px;
+  height: 1.875rem;
-  width: 30px;
+  width: 1.875rem;
-  margin-right: 4px;
+  margin-right: 0.25rem;
   border: 1px solid #dee2e6;
 }
 
 .color-picker-swatch-input {
-  font-size: 16px;
+  font-size: 1rem;
   display: inline-block;
-  width: 100px;
+  width: 6.25rem;
   border-radius: 2px;
-  padding: 2px 4px;
+  padding: 0.125em 0.25em;
   border: 1px solid #dee2e6;
   text-transform: lowercase;
 }

src/components/ContextMenu.css

@@ -5,14 +5,14 @@
   padding: 0;
   list-style: none;
   user-select: none;
-  margin: -4px 0 0 1px;
+  margin: -0.25rem 0 0 0.125rem;
-  padding: 4px 0;
+  padding: 0.25rem 0;
   background-color: #f2f2f2;
   border: 1px solid #bcbcbc;
 }
 
 .context-menu__option {
-  width: 150px;
+  width: 9.5rem;
 }
 
 .context-menu-option {
@@ -21,7 +21,7 @@
   margin: 0;
   text-align: left;
   border-radius: 0;
-  padding-left: 20px;
+  padding-left: 1.25rem;
   background-color: #f2f2f2;
   border: none;
 }

src/components/EditableText.css

@@ -2,8 +2,8 @@
   display: inline-block;
   cursor: pointer;
   border: none;
-  padding: 4px;
+  padding: 0.25rem;
-  margin: -4px;
+  margin: -0.25rem;
   white-space: nowrap;
   border-radius: var(--space-factor);
 }

src/components/ExportDialog.css

@@ -35,7 +35,7 @@
 
 .ExportDialog__preview canvas {
   max-width: calc(100% - var(--preview-padding) * 2);
-  max-height: 400px;
+  max-height: 25rem;
 }
 
 .ExportDialog__actions {

src/components/FixedSideContainer.css

@@ -1,5 +1,5 @@
 .FixedSideContainer {
-  --margin: 5px;
+  --margin: 0.25rem;
   position: fixed;
   pointer-events: none;
 }

src/components/ToolIcon.scss

@@ -6,8 +6,8 @@
 .ToolIcon__icon {
   background-color: #e9ecef;
 
-  width: 41px;
+  width: 2.5rem;
-  height: 41px;
+  height: 2.5rem;
 
   display: flex;
   justify-content: center;
@@ -21,8 +21,8 @@
 }
 
 .ToolIcon_size_s .ToolIcon__icon {
-  width: 25px;
+  width: 1.4rem;
-  height: 25px;
+  height: 1.4rem;
   font-size: 0.8em;
 }
 

src/styles.scss

@@ -34,9 +34,9 @@ body {
   flex-direction: column;
 
   h5 {
-    margin-top: 4px;
+    margin-top: 0.333rem;
-    margin-bottom: 4px;
+    margin-bottom: 0.333em;
-    font-size: 12px;
+    font-size: 0.75rem;
     color: var(--text-color-primary);
   }
 
@@ -48,7 +48,8 @@ body {
     flex-wrap: wrap;
 
     button {
-      margin-right: 4px;
+      margin-right: 0.25rem;
+      font-size: 0.75rem;
     }
   }
 }
@@ -68,8 +69,8 @@ button {
   background-color: #e9ecef;
   border: 0;
   border-radius: 4px;
-  margin: 2px 0;
+  margin: 0.125rem 0;
-  padding: 5px;
+  padding: 0.25rem;
   outline: transparent;
 
   &:focus {
@@ -130,5 +131,5 @@ button {
 }
 
 .App-right-menu {
-  width: 220px;
+  width: 13.75rem;
 }

src/theme.css

@@ -3,5 +3,5 @@
   --bg-color-main: #fff;
   --shadow-island: 0 1px 5px rgba(0, 0, 0, 0.15);
   --border-radius-m: 4px;
-  --space-factor: 4px;
+  --space-factor: 0.25rem;
 }