@agilekit/ui 0.0.403-alpha.0 → 0.0.406-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agilekit/ui",
-  "version": "0.0.403-alpha.0",
+  "version": "0.0.406-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": "b729673db2031a038ce54b8e4105cf519b690e1c"
+  "gitHead": "44123c4ed0da84ac499f8fe24fa4fa14093391c3"
 }

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

@@ -1,3 +1,4 @@
+@use "sass:math";
 // Variables
 //
 // Variables should follow the `$component-state-property-size` formula for
@@ -268,8 +269,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: $font-size-base * 1.25 !default;
+$font-size-sm: $font-size-base * .875 !default;
 
 $font-weight-lighter: lighter !default;
 $font-weight-light: 300 !default;
@@ -287,7 +288,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: math.div($spacer, 2) !default;
 $headings-font-family: inherit !default;
 $headings-font-weight: 500 !default;
 $headings-line-height: 1.2 !default;
@@ -304,7 +305,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: $font-size-base * 1.25 !default;
 $lead-font-weight: 300 !default;
 
 $small-font-size: 80% !default;
@@ -313,7 +314,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: $font-size-base * 1.25 !default;
 
 $hr-border-color: rgba($black, .1) !default;
 $hr-border-width: $border-width !default;
@@ -475,16 +476,16 @@ $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: $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: calc(#{$input-height-inner} + #{$input-height-border}) !default;
+$input-height-inner: ($input-btn-font-size * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
+$input-height: 36 + $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-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;
+$input-height-inner-sm: ($input-btn-font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default;
+$input-height-sm: $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-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
+$input-height-inner-lg: ($input-btn-font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default;
+$input-height-lg: $input-height-inner-lg + $input-height-border !default;
 
 $input-transition: border-color .15s ease-in-out,
 box-shadow .15s ease-in-out !default;
@@ -549,9 +550,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: $custom-control-indicator-size * 1.75 !default;
+$custom-switch-indicator-border-radius: math.div($custom-control-indicator-size, 2) !default;
+$custom-switch-indicator-size: $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 +569,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: math.div(($input-height-inner * 3), 4) + $custom-select-padding-x + $custom-select-indicator-padding !default;
+$custom-select-feedback-icon-position: center right $custom-select-padding-x + $custom-select-indicator-padding !default;
+$custom-select-feedback-icon-size: math.div($input-height-inner, 2) math.div($input-height-inner, 2) !default;
 
 $custom-select-border-width: $input-border-width !default;
 $custom-select-border-color: $input-border-color !default;
@@ -656,7 +657,7 @@ $dropdown-bg: $white !default;
 $dropdown-border-color: rgba($black, .15) !default;
 $dropdown-border-radius: $border-radius !default;
 $dropdown-border-width: $border-width !default;
-$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
+$dropdown-inner-border-radius: $dropdown-border-radius - $dropdown-border-width !default;
 $dropdown-divider-bg: $gray-200 !default;
 $dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;
 
@@ -708,21 +709,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: math.div($spacer, 2) !default;
 
 
 // Navbar
 
-$navbar-padding-y: calc(#{$spacer} / 2) !default;
+$navbar-padding-y: math.div($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: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
+$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
+$navbar-brand-padding-y: math.div((#{$nav-link-height} - #{$navbar-brand-height}), 2) !default;
 
 $navbar-toggler-padding-y: .25rem !default;
 $navbar-toggler-padding-x: .75rem !default;
@@ -793,14 +794,14 @@ $card-spacer-x: 1.25rem !default;
 $card-border-width: $border-width !default;
 $card-border-radius: $border-radius !default;
 $card-border-color: rgba($black, .125) !default;
-$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
+$card-inner-border-radius: $card-border-radius - $card-border-width !default;
 $card-cap-bg: rgba($black, .03) !default;
 $card-cap-color: inherit !default;
 $card-bg: $white !default;
 
 $card-img-overlay-padding: 1.25rem !default;
 
-$card-group-margin: calc(#{$grid-gutter-width} / 2) !default;
+$card-group-margin: math.div(#{$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

@@ -47,5 +47,5 @@
 }
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
-  margin-left: if($num == 0, 0, percentage(math.div($size, $columns)));
+  margin-left: if(math.div($size, $columns) == 0, 0, percentage(math.div($size, $columns)));
 }