diff --git a/packages/react-components/src/components/Button/Button.module.scss b/packages/react-components/src/components/Button/Button.module.scss index 4452f92b0..e9f18126c 100644 --- a/packages/react-components/src/components/Button/Button.module.scss +++ b/packages/react-components/src/components/Button/Button.module.scss @@ -19,19 +19,19 @@ $base-class: 'btn'; } &--xcompact { - @include size.button-size($base-class, 2px, 12px, 24px, 24px); + @include size.button-size($base-class, 2px, 12px, 24px); } &--compact { - @include size.button-size($base-class, 6px, 16px, 32px, 32px); + @include size.button-size($base-class, 6px, 16px, 32px); } &--medium { - @include size.button-size($base-class, 8px, 16px, 36px, 36px); + @include size.button-size($base-class, 8px, 16px, 36px); } &--large { - @include size.button-size($base-class, 11px, 16px, 44px, 44px); + @include size.button-size($base-class, 11px, 16px, 44px); } &--basic { diff --git a/packages/react-components/src/components/Button/styles/base.scss b/packages/react-components/src/components/Button/styles/base.scss index e280868c5..0f6dbf936 100644 --- a/packages/react-components/src/components/Button/styles/base.scss +++ b/packages/react-components/src/components/Button/styles/base.scss @@ -14,6 +14,7 @@ text-align: center; text-decoration: none; line-height: 20px; + white-space: nowrap; font-size: 14px; font-weight: 600; user-select: none; diff --git a/packages/react-components/src/components/Button/styles/icon.scss b/packages/react-components/src/components/Button/styles/icon.scss index 173dbb852..86225f9be 100644 --- a/packages/react-components/src/components/Button/styles/icon.scss +++ b/packages/react-components/src/components/Button/styles/icon.scss @@ -1,3 +1,5 @@ +@use 'sass:map'; + @mixin icon-styles() { width: 20px; height: 20px; @@ -20,17 +22,68 @@ } @mixin icon-only($base-class) { - padding: 4px; - &.#{$base-class} { - &--xcompact { - padding: 4px; - width: 24px; - height: 24px; - - .#{$base-class}__icon { - width: 16px; - height: 16px; + $sizes: ( + 'xcompact': ( + 'padding': 4px, + 'size': 24px, + 'icon-size': 16px, + ), + 'compact': ( + 'padding': 6px, + 'size': 32px, + 'icon-size': 20px, + ), + 'medium': ( + 'padding': var(--spacing-2), + 'size': 36px, + 'icon-size': 20px, + ), + 'large': ( + 'padding': var(--spacing-3), + 'size': 44px, + 'icon-size': 20px, + ), + ); + + @each $size-name, $values in $sizes { + &--#{$size-name} { + padding: map.get($values, 'padding'); + width: map.get($values, 'size'); + height: map.get($values, 'size'); + + .#{$base-class}__icon { + width: map.get($values, 'icon-size'); + height: map.get($values, 'icon-size'); + } + } + } + + &--text-lock-black { + @each $size-name, $values in $sizes { + &.#{$base-class}--#{$size-name} { + padding: 0; + height: 24px; + } + } + } + + &--link-light, + &--link-inverted { + @each $size-name, $values in $sizes { + &.#{$base-class}--#{$size-name} { + padding: 0; + + @if $size-name == 'xcompact' { + width: 24px; + height: 24px; + } + + @else { + width: 28px; + height: 28px; + } + } } } } diff --git a/packages/react-components/src/components/Button/styles/size.scss b/packages/react-components/src/components/Button/styles/size.scss index 4fe1f74bf..b315d7d62 100644 --- a/packages/react-components/src/components/Button/styles/size.scss +++ b/packages/react-components/src/components/Button/styles/size.scss @@ -1,6 +1,5 @@ -@mixin button-size($base-class, $padding-v, $padding-h, $min-width, $height) { +@mixin button-size($base-class, $padding-v, $padding-h, $height) { padding: $padding-v $padding-h; - min-width: $min-width; height: $height; &.#{$base-class} {