From 819b6c64a8c606fbeb066fe59db29c8844d7d813 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenko@soramitsu.co.jp>
Date: Wed, 28 Jul 2021 00:48:01 +0300
Subject: [PATCH 1/2] Fixed border radiuses and sizes for components.

---
 package.json                      |  2 +-
 src/styles/button.scss            | 12 +++++++++
 src/styles/checkbox.scss          | 18 ++++++++++----
 src/styles/neumorphism/radio.scss | 22 +++++++++++------
 src/styles/radio.scss             | 41 ++++++++++++++++++++++---------
 5 files changed, 71 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index 03bf50d5..6966238c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"
diff --git a/src/styles/button.scss b/src/styles/button.scss
index c9d80ba7..3df839c0 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -47,6 +47,18 @@ $s-color-button-tertiary-background-focused: var(--s-color-base-background) !def
     padding-top: 3px;
     padding-bottom: 3px;
   }
+  &--mini {
+    $mini-button-height: var(--s-size-mini);
+    $mini-button-font-size: var(--s-font-size-mini);
+    $mini-button-vertical-padding: calc(calc(#{$mini-button-height} - #{$mini-button-font-size}) / 2);
+    padding-top: $mini-button-vertical-padding;
+    padding-bottom: $mini-button-vertical-padding;
+    font-size: $mini-button-font-size;
+    line-height: 1;
+    i {
+      font-size: inherit !important;
+    }
+  }
   &.s-primary {
     background-color: var(--s-color-theme-accent);
     border-color: var(--s-color-theme-accent);
diff --git a/src/styles/checkbox.scss b/src/styles/checkbox.scss
index 67cab530..35052ec9 100644
--- a/src/styles/checkbox.scss
+++ b/src/styles/checkbox.scss
@@ -6,9 +6,7 @@
     &-#{$suffix} {
       border-radius: 0;
       &.is-bordered {
-        border-radius: $border-radius;
-      }
-      .el-checkbox__inner {
+        // Only bordered checkbox container has border radius
         border-radius: $border-radius;
       }
     }
@@ -61,6 +59,15 @@
       padding: 9px 0 7px 0;
     }
   }
+  &.s-small,
+  &.s-mini {
+    &.is-bordered {
+      .el-checkbox__inner {
+        height: 14px;
+        width: 14px;
+      }
+    }
+  }
   &.s-small {
     @extend .s-small;
     .el-checkbox__label {
@@ -70,8 +77,6 @@
     &.is-bordered {
       padding: 5px 15px 5px 10px;
       .el-checkbox__inner {
-        height: 14px;
-        width: 14px;
         &::after {
           top: 1px;
           left: 4px;
@@ -84,6 +89,9 @@
       padding: 5px 0;
     }
   }
+  &.s-mini {
+    @extend .s-small;
+  }
 }
 .el-checkbox__inner {
   border-color: var(--s-color-base-border-primary);
diff --git a/src/styles/neumorphism/radio.scss b/src/styles/neumorphism/radio.scss
index 5500e4ba..72e762da 100644
--- a/src/styles/neumorphism/radio.scss
+++ b/src/styles/neumorphism/radio.scss
@@ -1,17 +1,25 @@
-@mixin inner-size ($size: 'big', $value: 32px) {
-  &.s-#{$size} {
+$radio-button-border-width: 1px;
+
+@mixin inner-size ($size-label: 'big', $size: var(--s-size-small)) {
+  $vertical-padding: calc(calc(var(--s-size-#{$size-label}) - #{$size} - #{$radio-button-border-width * 2}) / 2);
+  &.s-#{$size-label} {
     > .el-radio__input {
       .el-radio__inner {
-        width: $value;
-        height: $value;
+        width: $size;
+        height: $size;
 
         &::after {
-          width: $value - 10;
-          height: $value - 10;
+          $mark-size: calc(#{$size} - 10px);
+          width: $mark-size;
+          height: $mark-size;
         }
       }
     }
   }
+  &.is-bordered.s-#{$size-label} {
+    padding-top: $vertical-padding;
+    padding-bottom: $vertical-padding;
+  }
 }
 
 .s-radio.neumorphic {
@@ -27,7 +35,7 @@
     }
   }
 
-  @include inner-size('big', 32px);
+  @include inner-size;
   @include inner-size('medium', 28px);
   @include inner-size('small', 24px);
   @include inner-size('mini', 20px);
diff --git a/src/styles/radio.scss b/src/styles/radio.scss
index b9c13c32..e2491a25 100644
--- a/src/styles/radio.scss
+++ b/src/styles/radio.scss
@@ -1,6 +1,9 @@
 $radio-button-class: ".el-radio-button";
 $radio-button-border-width: 1px;
 $radio-button-border-color: var(--s-color-theme-accent);
+$radio-button-font-size: var(--s-font-size-small);
+$radio-button-line-height: var(--s-line-height-big);
+$radio-small-label-font-size: var(--s-font-size-mini);
 
 @mixin radio-button-size(
   $modifier: "small",
@@ -21,17 +24,27 @@ $radio-button-border-color: var(--s-color-theme-accent);
   }
 }
 
+@mixin radio-button-vertical-padding(
+  $size: 'small',
+  $font-size: $radio-button-font-size,
+  $line-height: $radio-button-line-height
+) {
+  $vertical-padding: calc(calc(var(--s-size-#{$size}) - #{$font-size} * #{$line-height} - #{$radio-button-border-width * 2}) / 2);
+  &.is-bordered {
+    padding-top: $vertical-padding;
+    padding-bottom: $vertical-padding;
+  }
+}
+
 .el-radio {
   color: var(--s-color-base-content-primary);
   &__label {
-    line-height: var(--s-line-height-big);
+    line-height: $radio-button-line-height;
   }
   &.s-big {
     @extend .s-big;
     line-height: $s-size-big;
-    &.is-bordered {
-      padding-top: 18px;
-    }
+    @include radio-button-vertical-padding('big');
     > .el-radio__input .el-radio__inner {
       width: 20px;
       height: 20px;
@@ -45,6 +58,7 @@ $radio-button-border-color: var(--s-color-theme-accent);
   &.s-medium {
     @extend .s-medium;
     line-height: $s-size-medium;
+    @include radio-button-vertical-padding('medium');
     > .el-radio__input .el-radio__inner {
       width: 16px;
       height: 16px;
@@ -55,14 +69,10 @@ $radio-button-border-color: var(--s-color-theme-accent);
       }
     }
   }
-  &.s-small {
-    @extend .s-small;
-    line-height: $s-size-small;
-    &.is-bordered {
-      padding-top: 9px;
-    }
+  &.s-small,
+  &.s-mini {
     > .el-radio__label {
-      font-size: var(--s-font-size-mini);
+      font-size: $radio-small-label-font-size;
     }
     > .el-radio__input .el-radio__inner {
       width: 14px;
@@ -74,6 +84,15 @@ $radio-button-border-color: var(--s-color-theme-accent);
       }
     }
   }
+  &.s-small {
+    @extend .s-small;
+    line-height: $s-size-small;
+    @include radio-button-vertical-padding($font-size: $radio-small-label-font-size);
+  }
+  &.s-mini {
+    height: var(--s-size-mini);
+    @include radio-button-vertical-padding('mini');
+  }
   &.is-bordered {
     border-color: var(--s-color-base-border-primary);
     line-height: 0;

From e2edb32a36ae19d8895d4dcb814e77d21e704a70 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenko@soramitsu.co.jp>
Date: Mon, 2 Aug 2021 18:00:52 +0300
Subject: [PATCH 2/2] Fixed small and mini checkbox types.

---
 src/styles/checkbox.scss | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/styles/checkbox.scss b/src/styles/checkbox.scss
index 35052ec9..4d5ade9f 100644
--- a/src/styles/checkbox.scss
+++ b/src/styles/checkbox.scss
@@ -61,18 +61,19 @@
   }
   &.s-small,
   &.s-mini {
+    &,
     &.is-bordered {
       .el-checkbox__inner {
         height: 14px;
         width: 14px;
       }
     }
-  }
-  &.s-small {
     @extend .s-small;
     .el-checkbox__label {
       font-size: var(--s-font-size-mini);
     }
+  }
+  &.s-small {
     &,
     &.is-bordered {
       padding: 5px 15px 5px 10px;
@@ -89,9 +90,6 @@
       padding: 5px 0;
     }
   }
-  &.s-mini {
-    @extend .s-small;
-  }
 }
 .el-checkbox__inner {
   border-color: var(--s-color-base-border-primary);