@agilekit/ui 0.0.395-alpha.0 → 0.0.396-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agilekit/ui",
-  "version": "0.0.395-alpha.0",
+  "version": "0.0.396-alpha.0",
   "description": "Agile's product component library",
   "author": "Michael de Lima Alves <michaelalves@outlook.com>",
   "license": "MIT",
@@ -143,5 +143,5 @@
     "react-spring": "*"
   },
   "bugs": {},
-  "gitHead": "0e5c0ad012980424c2d0ae177a07fe1d1063b547"
+  "gitHead": "68cbc7534ff02fd2bf2790b354dfb9de387b35c2"
 }

package/src/assets/styles/global/bootstrap/_variables.scss

@@ -268,8 +268,8 @@ $font-family-base: $font-family-sans-serif !default;
 // stylelint-enable value-keyword-case
 
 $font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
-$font-size-lg: calc($font-size-base * 1.25) !default;
-$font-size-sm: calc($font-size-base * .875) !default;
+$font-size-lg: calc(#{$font-size-base} * 1.25) !default;
+$font-size-sm: calc(#{$font-size-base} * .875) !default;
 
 $font-weight-lighter: lighter !default;
 $font-weight-light: 300 !default;
@@ -287,7 +287,7 @@ $h4-font-size: $font-size-base * 1.5 !default;
 $h5-font-size: $font-size-base * 1.25 !default;
 $h6-font-size: $font-size-base !default;
 
-$headings-margin-bottom: calc($spacer / 2) !default;
+$headings-margin-bottom: calc(#{$spacer} / 2) !default;
 $headings-font-family: inherit !default;
 $headings-font-weight: 500 !default;
 $headings-line-height: 1.2 !default;
@@ -304,7 +304,7 @@ $display3-weight: 300 !default;
 $display4-weight: 300 !default;
 $display-line-height: $headings-line-height !default;
 
-$lead-font-size: calc($font-size-base * 1.25) !default;
+$lead-font-size: calc(#{$font-size-base} * 1.25) !default;
 $lead-font-weight: 300 !default;
 
 $small-font-size: 80% !default;
@@ -313,7 +313,7 @@ $text-muted: $gray-600 !default;
 
 $blockquote-small-color: $gray-600 !default;
 $blockquote-small-font-size: $small-font-size !default;
-$blockquote-font-size: calc($font-size-base * 1.25) !default;
+$blockquote-font-size: calc(#{$font-size-base} * 1.25) !default;
 
 $hr-border-color: rgba($black, .1) !default;
 $hr-border-width: $border-width !default;
@@ -475,15 +475,15 @@ $input-focus-box-shadow: $input-btn-focus-box-shadow !default;
 $input-placeholder-color: $gray-600 !default;
 $input-plaintext-color: $body-color !default;
 
-$input-height-border: calc($input-border-width * 2) !default;
+$input-height-border: calc(#{$input-border-width} * 2) !default;
 
-$input-height-inner: calc(($input-btn-font-size * $input-btn-line-height) + ($input-btn-padding-y * 2)) !default;
+$input-height-inner: calc((#{$input-btn-font-size} * #{$input-btn-line-height}) + (#{$input-btn-padding-y} * 2)) !default;
 $input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default;
 
-$input-height-inner-sm: calc(($input-btn-font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2)) !default;
+$input-height-inner-sm: calc((#{$input-btn-font-size-sm} * #{$input-btn-line-height-sm}) + (#{$input-btn-padding-y-sm} * 2)) !default;
 $input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;
 
-$input-height-inner-lg: calc(($input-btn-font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2)) !default;
+$input-height-inner-lg: calc((#{$input-btn-font-size-lg} * #{$input-btn-line-height-lg}) + (#{$input-btn-padding-y-lg} * 2)) !default;
 $input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
 
 $input-transition: border-color .15s ease-in-out,
@@ -549,9 +549,9 @@ $custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicato
 $custom-radio-indicator-border-radius: 50% !default;
 $custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3e%3c/svg%3e"), "#", "%23") !default;
 
-$custom-switch-width: calc($custom-control-indicator-size * 1.75) !default;
-$custom-switch-indicator-border-radius: calc($custom-control-indicator-size / 2) !default;
-$custom-switch-indicator-size: calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}) !default;
+$custom-switch-width: calc(#{$custom-control-indicator-size} * 1.75) !default;
+$custom-switch-indicator-border-radius: calc(#{$custom-control-indicator-size} / 2) !default;
+$custom-switch-indicator-size: calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width} * 4) !default;
 
 $custom-select-padding-y: $input-btn-padding-y !default;
 $custom-select-padding-x: $input-btn-padding-x !default;
@@ -568,9 +568,9 @@ $custom-select-indicator-color: $gray-800 !default;
 $custom-select-indicator: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"), "#", "%23") !default;
 $custom-select-background: $custom-select-indicator no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
 
-$custom-select-feedback-icon-padding-right: calc($input-height-inner * 3 / 4 + $custom-select-padding-x + $custom-select-indicator-padding) !default;
-$custom-select-feedback-icon-position: center right calc($custom-select-padding-x + $custom-select-indicator-padding) !default;
-$custom-select-feedback-icon-size: calc($input-height-inner / 2) calc($input-height-inner / 2) !default;
+$custom-select-feedback-icon-padding-right: calc(#{$input-height-inner} * 3 / 4 + #{$custom-select-padding-x} + #{$custom-select-indicator-padding}) !default;
+$custom-select-feedback-icon-position: center right calc(#{$custom-select-padding-x} + #{$custom-select-indicator-padding}) !default;
+$custom-select-feedback-icon-size: calc(#{$input-height-inner} / 2) calc(#{$input-height-inner} / 2) !default;
 
 $custom-select-border-width: $input-border-width !default;
 $custom-select-border-color: $input-border-color !default;
@@ -708,21 +708,21 @@ $nav-pills-link-active-color: $component-active-color !default;
 $nav-pills-link-active-bg: $component-active-bg !default;
 
 $nav-divider-color: $gray-200 !default;
-$nav-divider-margin-y: calc($spacer / 2) !default;
+$nav-divider-margin-y: calc(#{$spacer} / 2) !default;
 
 
 // Navbar
 
-$navbar-padding-y: calc($spacer / 2) !default;
+$navbar-padding-y: calc(#{$spacer} / 2) !default;
 $navbar-padding-x: $spacer !default;
 
 $navbar-nav-link-padding-x: .5rem !default;
 
 $navbar-brand-font-size: $font-size-lg !default;
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
-$nav-link-height: calc($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
-$navbar-brand-height: calc($navbar-brand-font-size * $line-height-base) !default;
-$navbar-brand-padding-y: calc(($nav-link-height - $navbar-brand-height) / 2) !default;
+$nav-link-height: calc(#{$font-size-base} * #{$line-height-base} + #{$nav-link-padding-y} * 2) !default;
+$navbar-brand-height: calc(#{$navbar-brand-font-size} * #{$line-height-base}) !default;
+$navbar-brand-padding-y: calc((#{$nav-link-height} - #{$navbar-brand-height}) / 2) !default;
 
 $navbar-toggler-padding-y: .25rem !default;
 $navbar-toggler-padding-x: .75rem !default;
@@ -800,7 +800,7 @@ $card-bg: $white !default;
 
 $card-img-overlay-padding: 1.25rem !default;
 
-$card-group-margin: calc($grid-gutter-width / 2) !default;
+$card-group-margin: calc(#{$grid-gutter-width} / 2) !default;
 $card-deck-margin: $card-group-margin !default;
 
 $card-columns-count: 3 !default;

package/src/assets/styles/global/bootstrap/mixins/_grid.scss

@@ -4,8 +4,8 @@
 
 @mixin make-container($gutter: $grid-gutter-width) {
   width: 100%;
-  padding-right: calc($gutter / 2);
-  padding-left: calc($gutter / 2);
+  padding-right: calc(#{$gutter} / 2);
+  padding-left: calc(#{$gutter} / 2);
   margin-right: auto;
   margin-left: auto;
 }
@@ -23,8 +23,8 @@
 @mixin make-row($gutter: $grid-gutter-width) {
   display: flex;
   flex-wrap: wrap;
-  margin-right: calc(-$gutter / 2);
-  margin-left: calc(-$gutter / 2);
+  margin-right: calc(-#{$gutter} / 2);
+  margin-left: calc(-#{$gutter} / 2);
 }
 
 @mixin make-col-ready($gutter: $grid-gutter-width) {
@@ -33,8 +33,8 @@
   // always setting `width: 100%;`. This works because we use `flex` values
   // later on to override this initial width.
   width: 100%;
-  padding-right: calc($gutter / 2);
-  padding-left: calc($gutter / 2);
+  padding-right: calc(#{$gutter} / 2);
+  padding-left: calc(#{$gutter} / 2);
 }
 
 @mixin make-col($size, $columns: $grid-columns) {
@@ -46,6 +46,6 @@
 }
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
-  $num: calc($size / $columns);
+  $num: calc(#{$size} / #{$columns});
   margin-left: if($num == 0, 0, percentage($num));
 }