Merge pull request #408 from ebs-integrator/development

Development

README.md

@@ -139,7 +139,7 @@ import 'ebs-design/dist/styles/scrollbar.scss';
 
 ```scss
 // Default base size & colors of scrollbar
-$scrollbar-size: calc($gutter-size / 2);
+$scrollbar-size: 8px;
 $scrollbar-track-background-color: $background-content;
 $scrollbar-thumb-background-color: $border-color;
 $scrollbar-thumb-hover-background-color: var(--primary-color);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ebs-design",
-  "version": "0.0.1-beta.131",
+  "version": "0.0.1-beta.132",
   "description": "EBS Design System React UI elements.",
   "author": "EBS Integrator <[email protected]> (https://ebs-integrator.com/)",
   "maintainers": [

src/components/ReadMe.stories.mdx

@@ -122,7 +122,7 @@ import 'ebs-design/dist/styles/scrollbar.scss';
 
 ```scss
 // Default base size & colors of scrollbar
-$scrollbar-size: calc($gutter-size / 2);
+$scrollbar-size: 8px;
 $scrollbar-track-background-color: $background-content;
 $scrollbar-thumb-background-color: $border-color;
 $scrollbar-thumb-hover-background-color: var(--primary-color);

src/components/Variables.stories.mdx

@@ -311,7 +311,7 @@ $label-padding: 0 12px !default;
 $label-color: $text-color !default;
 $label-border: 1px solid !default;
 $label-border-radius: $border-radius !default;
-$label-circle-border-radius: calc($label-height / 2) !default;
+$label-circle-border-radius: 12px !default;
 
 // Sidebar
 //
@@ -362,7 +362,7 @@ $sort-by-text-hover-color: $white !default;
 // Scrollbar
 //
 // Define base size & colors of scrollbar
-$scrollbar-size: calc($gutter-size / 2) !default;
+$scrollbar-size: 8px !default;
 $scrollbar-track-background-color: $background-content !default;
 $scrollbar-thumb-background-color: $border-color !default;
 $scrollbar-thumb-hover-background-color: $primary-color !default;

src/components/atoms/Avatar/Avatar.scss

@@ -118,7 +118,7 @@
 
     &-alt {
       color: #333;
-      padding: rem(0 calc($gutter-size / 2));
+      padding: 0 calc(#{rem($gutter-size)} / 2);
       border-top-right-radius: rem($border-radius);
       border-bottom-right-radius: rem($border-radius);
       font-size: rem(9px);

src/components/atoms/Input/Input.scss

@@ -108,7 +108,7 @@
   }
 
   &__wrapper:not(.has-prefix) &__prefix + &__container {
-    padding-left: rem($gutter-size + calc($gutter-size / 2));
+    padding-left: calc(#{rem($gutter-size)} + #{rem($gutter-size)} / 2);
   }
 
   &__suffix {

src/components/molecules/Loader/Loader.scss

@@ -62,18 +62,18 @@
     &--small {
       border: 2px solid $grey-500;
       border-top: 2px solid var(--primary-color);
-      width: rem(#{calc($base-size / 2)});
-      height: rem(#{calc($base-size / 2)});
-      top: calc(50% - $base-size / 4);
+      width: calc(#{rem($base-size)} / 2);
+      height: calc(#{rem($base-size)} / 2);
+      top: calc(50% - #{rem($base-size)} / 4);
     }
 
     &--middle {
       border: 2px solid $grey-500;
       border-top: 2px solid var(--primary-color);
       width: rem(#{$base-size - $gutter-size});
       height: rem(#{$base-size - $gutter-size});
-      top: calc(50% - ($base-size - $gutter-size) / 2);
-      left: calc(50% - ($base-size - $gutter-size) / 2);
+      top: calc(50% - #{$base-size - $gutter-size} / 2);
+      left: calc(50% - #{$base-size - $gutter-size} / 2);
     }
 
     &--regular {

src/components/molecules/Select/components/Options/Options.scss

@@ -8,7 +8,7 @@
   overflow: hidden;
 
   &--multiple &-item-text {
-    padding-right: rem($gutter-size + calc($gutter-size / 2));
+    padding-right: calc(#{rem($gutter-size)} + #{rem($gutter-size)} / 2);
   }
 
   & > &-search,

src/components/organisms/Layout/Layout.scss

@@ -139,7 +139,7 @@
 
     &--toggled .ebs-label {
       @include text-ellipsis;
-      padding: rem(0 calc($gutter-size / 3));
+      padding: rem(0 calc(#{$gutter-size} / 3));
     }
   }
 

src/components/organisms/Modal/Modal.scss

@@ -57,7 +57,7 @@
     background-color: $white;
 
     &-container {
-      margin-right: rem($base-size + calc($gutter-size / 2));
+      margin-right: calc(#{rem($base-size)} + #{rem($gutter-size)} / 2);
     }
 
     &--close {

src/components/organisms/Table/Table.scss

@@ -112,7 +112,7 @@
       }
 
       &-title {
-        padding: rem($gutter-size $gutter-size calc($gutter-size / 2));
+        padding: rem($gutter-size $gutter-size) calc(#{rem($gutter-size)} / 2);
         font-size: rem($table-body-font-size);
         width: 100%;
       }

src/styles/mixins/media-queries.scss

@@ -26,7 +26,7 @@ $mq-media-type: all !default;
   } @else if unit($px) == em {
     @return $px;
   }
-  @return calc($px / $font-size-base * 1em);
+  @return ($px / $font-size-base) * 1em;
 }
 
 @function mq-get-breakpoint-width($name, $breakpoints: $mq-breakpoints) {

src/styles/mixins/rem-to-px.scss

@@ -21,7 +21,7 @@ $rem-px-only: false !default;
     @if type-of($value) == 'number' and unit($value) == 'rem' and $to== 'px' {
       $result: append($result, $value / 1rem * $font-size-base, $separator);
     } @else if type-of($value) == 'number' and unit($value) == 'px' and $to== 'rem' {
-      $result: append($result, calc($value / ($font-size-base / 1rem)), $separator);
+      $result: append($result, ($value / ($font-size-base / 1rem)), $separator);
     } @else if type-of($value) == 'list' {
       $result: append($result, rem-convert($to, $value...), $separator);
     } @else {

src/styles/variables.scss

@@ -306,7 +306,7 @@ $label-padding: 0 12px !default;
 $label-color: $text-color !default;
 $label-border: 1px solid !default;
 $label-border-radius: $border-radius !default;
-$label-circle-border-radius: calc($label-height / 2) !default;
+$label-circle-border-radius: 12px !default;
 
 // Sidebar
 //
@@ -357,7 +357,7 @@ $sort-by-text-hover-color: $white !default;
 // Scrollbar
 //
 // Define base size & colors of scrollbar
-$scrollbar-size: calc($gutter-size / 2) !default;
+$scrollbar-size: 8px !default;
 $scrollbar-track-background-color: $background-content !default;
 $scrollbar-thumb-background-color: $border-color !default;
 $scrollbar-thumb-hover-background-color: var(--primary-color) !default;