Skip to content
This repository was archived by the owner on Jun 30, 2022. It is now read-only.

Commit 1cb7ae4

Browse files
tassoevantassoevan
authored
Chore: Replace a / b with math.div(a, b) on SCSS files (#702)
1 parent 7e6ff4b commit 1cb7ae4

File tree

11 files changed

+48
-26
lines changed

11 files changed

+48
-26
lines changed

‎src/components/Button/styles.scss‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1+
@use 'sass:math';
2+
13
@import '../../styles/colors';
24
@import '../../styles/helpers';
35
@import '../../styles/variables';
46

57
$button-border-width: $default-border;
68
$button-border-radius: $default-border-radius;
79
$button-padding: (0.75 * $default-gap - $default-border) (1.5 * $default-gap - $default-border);
8-
$button-small-padding: (0.25 * $default-gap - $default-border / 2) (1.5 * $default-gap - $default-border);
10+
$button-small-padding: (0.25 * $default-gap - math.div($default-border, 2)) (1.5 * $default-gap - $default-border);
911

1012
$button-active-displacement: 2px;
1113

@@ -22,7 +24,7 @@ $button-line-height: 1.25rem;
2224
$button-disabled-opacity: $disabled-opacity;
2325

2426
$button-loading-border-width: (2 * $default-border);
25-
$button-loading-gap: ($default-gap / 2);
27+
$button-loading-gap: math.div($default-gap, 2);
2628
$button-loading-size: $button-line-height;
2729
$button-loading-color: #ffffff;
2830

@@ -66,7 +68,7 @@ $button-icon-padding: 10px;
6668
color $default-time-animation,
6769
background-color $default-time-animation,
6870
border-color $default-time-animation,
69-
transform $default-time-animation / 2;
71+
transform math.div($default-time-animation, 2);
7072
white-space: nowrap;
7173
text-decoration: none;
7274

@@ -177,18 +179,18 @@ $button-icon-padding: 10px;
177179

178180
&__badge {
179181
position: absolute;
180-
top: (-$button-badge-size / 3);
181-
right: (-$button-badge-size / 3);
182+
top: math.div(-$button-badge-size, 3);
183+
right: math.div(-$button-badge-size, 3);
182184

183185
min-width: $button-badge-size;
184186
height: $button-badge-size;
185-
padding: 0 ($button-badge-font-size / 2);
187+
padding: 0 math.div($button-badge-font-size, 2);
186188

187189
text-align: center;
188190
letter-spacing: 0;
189191

190192
color: $button-badge-color;
191-
border-radius: ($button-badge-size / 2);
193+
border-radius: math.div($button-badge-size, 2);
192194

193195
background-color: $button-badge-background-color;
194196
box-shadow: $button-badge-shadow;

‎src/components/ButtonGroup/styles.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
@use 'sass:math';
2+
13
@import '../../styles/variables';
24

3-
$button-group-margin: ($default-gap / 4);
5+
$button-group-margin: math.div($default-gap, 4);
46

57
.button-group {
68
display: flex;

‎src/components/Form/mixins.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1+
@use 'sass:math';
2+
13
@import '../../styles/variables';
24
@import '../../styles/colors';
35

46
$form-input-border-width: $default-border;
57
$form-input-border-radius: $default-border-radius;
68
$form-input-padding: (0.75 * $default-gap - $default-border);
7-
$form-input-small-padding: (0.25 * $default-gap - $default-border / 2) (0.75 * $default-gap - $default-border);
9+
$form-input-small-padding: (0.25 * $default-gap - math.div($default-border, 2)) (0.75 * $default-gap - $default-border);
810
$form-input-color: $color-text-dark;
911
$form-input-placeholder-color: $color-text-light;
1012
$form-input-background-color: $bg-color-white;

‎src/components/Header/styles.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use 'sass:math';
2+
13
@import '../../styles/colors';
24
@import '../../styles/helpers';
35
@import '../../styles/variables';
@@ -18,7 +20,7 @@ $header-action-active-displacement: 2px;
1820

1921
width: 100%;
2022
height: $header-height;
21-
padding: 0 $header-padding / 2;
23+
padding: 0 math.div($header-padding, 2);
2224

2325
color: var(--font-color, $header-color);
2426
background-color: var(--color, $header-background-color);
@@ -31,7 +33,7 @@ $header-action-active-displacement: 2px;
3133
&__item {
3234
flex: 0 0 auto;
3335

34-
margin: 0 $header-padding / 2;
36+
margin: 0 math.div($header-padding, 2);
3537
}
3638

3739
&__picture {

‎src/components/Menu/styles.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use 'sass:math';
2+
13
@import '../../styles/colors';
24
@import '../../styles/variables';
35

@@ -11,7 +13,7 @@
1113
transition:
1214
opacity $default-time-animation,
1315
visibility $default-time-animation,
14-
transform $default-time-animation / 2;
16+
transform math.div($default-time-animation, 2);
1517

1618
border-radius: 4px;
1719
background: $bg-color-white;

‎src/components/Messages/MessageContainer/styles.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
@use 'sass:math';
2+
13
@import '../../../styles/variables';
24

35
$message-container-margin: 0 0 $default-padding 0;
4-
$message-container-compact-margin: 0 0 ($default-padding / 4) 0;
6+
$message-container-compact-margin: 0 0 math.div($default-padding, 4) 0;
57

68
.message-container {
79
display: flex;

‎src/components/Messages/MessageContent/styles.scss‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
@use 'sass:math';
2+
13
@import '../../../styles/variables';
24

3-
$message-content-gap: ($default-gap / 2);
4-
$message-content-margin: (-$message-content-gap / 2) ($default-gap / 2);
5+
$message-content-gap: math.div($default-gap, 2);
6+
$message-content-margin: math.div(-$message-content-gap, 2) math.div($default-gap, 2);
57

68
.message-content {
79
display: flex;
@@ -11,7 +13,7 @@ $message-content-margin: (-$message-content-gap / 2) ($default-gap / 2);
1113
align-items: flex-start;
1214

1315
> * {
14-
margin: ($message-content-gap / 2) 0;
16+
margin: math.div($message-content-gap, 2) 0;
1517
}
1618

1719
&--reverse {

‎src/components/Messages/MessageTime/styles.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
@use 'sass:math';
2+
13
@import '../../../styles/colors';
24
@import '../../../styles/variables';
35

4-
$message-time-margin: 0 ($default-gap / 2);
6+
$message-time-margin: 0 math.div($default-gap, 2);
57
$message-time-font-size: 0.625rem;
68
$message-time-line-height: 1rem;
79
$message-time-color: $color-text-grey;

‎src/components/Screen/styles.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
@use 'sass:math';
2+
13
@import '../../styles/colors';
24

35
$screen-padding: 16px;
4-
$screen-box-shadow: 0 ($screen-padding / 2 - 1) $screen-padding 0 rgba(0, 0, 0, 0.1);
6+
$screen-box-shadow: 0 (math.div($screen-padding, 2) - 1) $screen-padding 0 rgba(0, 0, 0, 0.1);
57
$max-lines: 12;
68

79
.screen {

‎src/components/uiKit/message/ButtonElement/styles.scss‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use 'sass:math';
2+
13
@import '../../../../styles/colors';
24
@import '../../../../styles/helpers';
35
@import '../../../../styles/variables';
@@ -17,7 +19,7 @@
1719
color $default-time-animation,
1820
background-color $default-time-animation,
1921
border-color $default-time-animation,
20-
transform $default-time-animation / 2;
22+
transform math.div($default-time-animation, 2);
2123
white-space: nowrap;
2224
text-decoration: none;
2325

@@ -58,11 +60,11 @@
5860
content: "";
5961

6062
transition:
61-
opacity $default-time-animation / 2,
62-
border-width $default-time-animation / 2,
63-
width $default-time-animation / 2,
64-
height $default-time-animation / 2,
65-
visibility $default-time-animation / 2;
63+
opacity math.div($default-time-animation, 2),
64+
border-width math.div($default-time-animation, 2),
65+
width math.div($default-time-animation, 2),
66+
height math.div($default-time-animation, 2),
67+
visibility math.div($default-time-animation, 2);
6668
animation: button-loading-rotation 1s linear infinite;
6769

6870
opacity: 0;

0 commit comments

Comments
 (0)