@agilekit/ui 0.0.402-alpha.0 → 0.0.405-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agilekit/ui",
-  "version": "0.0.402-alpha.0",
+  "version": "0.0.405-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": "f1530711ed938fb7c8df6efbb01ee19e8348f6bc"
+  "gitHead": "6ab5e2992a8ddcc44c2d10a8c2ca7d4dc655c8dd"
 }

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

@@ -1,3 +1,4 @@
+@use "sass:math";
 //
 // Base styles
 //
@@ -43,7 +44,7 @@
 }
 
 .card-subtitle {
-  margin-top: -$card-spacer-y / 2;
+  margin-top: math.div(-$card-spacer-y, 2);
   margin-bottom: 0;
 }
 
@@ -99,15 +100,15 @@
 //
 
 .card-header-tabs {
-  margin-right: -$card-spacer-x / 2;
+  margin-right: math.div(-$card-spacer-x, 2);
   margin-bottom: -$card-spacer-y;
-  margin-left: -$card-spacer-x / 2;
+  margin-left: math.div(-$card-spacer-x, 2);
   border-bottom: 0;
 }
 
 .card-header-pills {
-  margin-right: -$card-spacer-x / 2;
-  margin-left: -$card-spacer-x / 2;
+  margin-right: math.div(-$card-spacer-x, 2);
+  margin-left: math.div(-$card-spacer-x, 2);
 }
 
 // Card image

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

@@ -1,3 +1,4 @@
+@use "sass:math";
 // Notes on the classes:
 //
 // 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
@@ -187,9 +188,9 @@
 
 .carousel-caption {
   position: absolute;
-  right: (100% - $carousel-caption-width) / 2;
+  right: math.div((100% - $carousel-caption-width), 2);
   bottom: 20px;
-  left: (100% - $carousel-caption-width) / 2;
+  left: math.div((100% - $carousel-caption-width), 2);
   z-index: 10;
   padding-top: 20px;
   padding-bottom: 20px;

package/src/assets/styles/global/bootstrap/_custom-forms.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 // Embedded icons from Open Iconic.
 // Released under MIT and copyright 2014 Waybury.
 // https://useiconic.com/open
@@ -74,7 +75,7 @@
   // Background-color and (when enabled) gradient
   &::before {
     position: absolute;
-    top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
+    top: math.div(($font-size-base * $line-height-base - $custom-control-indicator-size), 2);
     left: -($custom-control-gutter + $custom-control-indicator-size);
     display: block;
     width: $custom-control-indicator-size;
@@ -89,7 +90,7 @@
   // Foreground (icon)
   &::after {
     position: absolute;
-    top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
+    top: math.div(($font-size-base * $line-height-base - $custom-control-indicator-size), 2);
     left: -($custom-control-gutter + $custom-control-indicator-size);
     display: block;
     width: $custom-control-indicator-size;
@@ -387,7 +388,7 @@
   &::-webkit-slider-thumb {
     width: $custom-range-thumb-width;
     height: $custom-range-thumb-height;
-    margin-top: ($custom-range-track-height - $custom-range-thumb-height) / 2; // Webkit specific
+    margin-top: math.div(($custom-range-track-height - $custom-range-thumb-height), 2); // Webkit specific
     @include gradient-bg($custom-range-thumb-bg);
     border: $custom-range-thumb-border;
     @include border-radius($custom-range-thumb-border-radius);
@@ -462,7 +463,7 @@
     cursor: $custom-range-track-cursor;
     background-color: transparent;
     border-color: transparent;
-    border-width: $custom-range-thumb-height / 2;
+    border-width: math.div($custom-range-thumb-height, 2);
     @include box-shadow($custom-range-track-box-shadow);
   }
 

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

@@ -1,3 +1,4 @@
+@use "sass:math";
 // stylelint-disable selector-no-qualifying-type
 
 //
@@ -190,13 +191,13 @@ textarea.form-control {
 .form-row {
   display: flex;
   flex-wrap: wrap;
-  margin-right: -$form-grid-gutter-width / 2;
-  margin-left: -$form-grid-gutter-width / 2;
+  margin-right: calc(-#{$form-grid-gutter-width} / 2);
+  margin-left: calc(-#{$form-grid-gutter-width} / 2);
 
   > .col,
   > [class*="col-"] {
-    padding-right: $form-grid-gutter-width / 2;
-    padding-left: $form-grid-gutter-width / 2;
+    padding-right: math.div($form-grid-gutter-width, 2);
+    padding-left: math.div($form-grid-gutter-width, 2);
   }
 }
 

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

@@ -1,3 +1,4 @@
+@use "sass:math";
 // Bootstrap functions
 //
 // Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
@@ -54,7 +55,7 @@
   $g: green($color);
   $b: blue($color);
 
-  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
+  $yiq: math.div((($r * 299) + ($g * 587) + ($b * 114)), 1000);
 
   @if ($yiq >= $yiq-contrasted-threshold) {
     @return $dark;

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

@@ -1,5 +1,7 @@
+@use "sass:math";
+
 .jumbotron {
-  padding: $jumbotron-padding ($jumbotron-padding / 2);
+  padding: $jumbotron-padding (math.div($jumbotron-padding, 2));
   margin-bottom: $jumbotron-padding;
   background-color: $jumbotron-bg;
   @include border-radius($border-radius-lg);

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

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .popover {
   position: absolute;
   top: 0;
@@ -44,7 +46,7 @@
 
   .arrow::before,
   .arrow::after {
-    border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
+    border-width: $popover-arrow-height (math.div($popover-arrow-width, 2)) 0;
   }
 
   .arrow::before {
@@ -70,7 +72,7 @@
 
   .arrow::before,
   .arrow::after {
-    border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
+    border-width: (math.div($popover-arrow-width, 2)) $popover-arrow-height (math.div($popover-arrow-width, 2)) 0;
   }
 
   .arrow::before {
@@ -93,7 +95,7 @@
 
   .arrow::before,
   .arrow::after {
-    border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
+    border-width: 0 (math.div($popover-arrow-width, 2)) $popover-arrow-height (math.div($popover-arrow-width, 2));
   }
 
   .arrow::before {
@@ -113,7 +115,7 @@
     left: 50%;
     display: block;
     width: $popover-arrow-width;
-    margin-left: -$popover-arrow-width / 2;
+    margin-left: math.div(-$popover-arrow-width, 2);
     content: "";
     border-bottom: $popover-border-width solid $popover-header-bg;
   }
@@ -131,7 +133,7 @@
 
   .arrow::before,
   .arrow::after {
-    border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
+    border-width: (math.div($popover-arrow-width, 2)) 0 (math.div($popover-arrow-width, 2)) $popover-arrow-height;
   }
 
   .arrow::before {

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

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 // Base class
 .tooltip {
   position: absolute;
@@ -37,7 +39,7 @@
 
     &::before {
       top: 0;
-      border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
+      border-width: $tooltip-arrow-height (math.div($tooltip-arrow-width, 2)) 0;
       border-top-color: $tooltip-arrow-color;
     }
   }
@@ -53,7 +55,7 @@
 
     &::before {
       right: 0;
-      border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
+      border-width: (math.div($tooltip-arrow-width, 2)) $tooltip-arrow-height (math.div($tooltip-arrow-width, 2)) 0;
       border-right-color: $tooltip-arrow-color;
     }
   }
@@ -67,7 +69,7 @@
 
     &::before {
       bottom: 0;
-      border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
+      border-width: 0 (math.div($tooltip-arrow-width, 2)) $tooltip-arrow-height;
       border-bottom-color: $tooltip-arrow-color;
     }
   }
@@ -83,7 +85,7 @@
 
     &::before {
       left: 0;
-      border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
+      border-width: (math.div($tooltip-arrow-width, 2)) 0 (math.div($tooltip-arrow-width, 2)) $tooltip-arrow-height;
       border-left-color: $tooltip-arrow-color;
     }
   }

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: $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-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,6 +47,5 @@
 }
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
-  $num: $size / $columns;
-  margin-left: if($num == 0, 0, percentage($num));
+  margin-left: if(math.div($size, $columns) == 0, 0, percentage(math.div($size, $columns)));
 }

package/src/assets/styles/global/bootstrap/utilities/_embed.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 // Credit: Nicolas Gallagher and SUIT CSS.
 
 .embed-responsive {
@@ -33,7 +34,7 @@
 
   .embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} {
     &::before {
-      padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x);
+      padding-top: percentage(math.div($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x));
     }
   }
 }