Skip to content

Handle Sass 1.33 and math.div #1221

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
glebm merged 2 commits into from
Feb 26, 2022
Merged

Handle Sass 1.33 and math.div #1221

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3c90d07
handle math.div
AprilArcus Oct 19, 2021
dd38faa
rake convert[v3.4.1]
AprilArcus Feb 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions assets/javascripts/bootstrap-sprockets.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
//= require ./bootstrap/affix
//= require ./bootstrap/transition
//= require ./bootstrap/alert
//= require ./bootstrap/button
//= require ./bootstrap/carousel
//= require ./bootstrap/collapse
//= require ./bootstrap/dropdown
//= require ./bootstrap/modal
//= require ./bootstrap/scrollspy
//= require ./bootstrap/tab
//= require ./bootstrap/transition
//= require ./bootstrap/affix
//= require ./bootstrap/scrollspy
//= require ./bootstrap/tooltip
//= require ./bootstrap/popover
7 changes: 4 additions & 3 deletions assets/stylesheets/bootstrap/_carousel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@use "sass:math";
//
// Carousel
// --------------------------------------------------
Expand Down Expand Up @@ -244,16 +245,16 @@
.icon-next {
width: ($carousel-control-font-size * 1.5);
height: ($carousel-control-font-size * 1.5);
margin-top: ($carousel-control-font-size / -2);
margin-top: math.div($carousel-control-font-size, -2);
font-size: ($carousel-control-font-size * 1.5);
}
.glyphicon-chevron-left,
.icon-prev {
margin-left: ($carousel-control-font-size / -2);
margin-left: math.div($carousel-control-font-size, -2);
}
.glyphicon-chevron-right,
.icon-next {
margin-right: ($carousel-control-font-size / -2);
margin-right: math.div($carousel-control-font-size, -2);
}
}

Expand Down
5 changes: 3 additions & 2 deletions assets/stylesheets/bootstrap/_code.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@use "sass:math";
//
// Code (inline and block)
// --------------------------------------------------
Expand Down Expand Up @@ -40,8 +41,8 @@ kbd {
// Blocks of code
pre {
display: block;
padding: (($line-height-computed - 1) / 2);
margin: 0 0 ($line-height-computed / 2);
padding: (math.div($line-height-computed - 1), 2);
margin: 0 0 math.div($line-height-computed, 2);
font-size: ($font-size-base - 1); // 14px to 13px
line-height: $line-height-base;
color: $pre-color;
Expand Down
3 changes: 2 additions & 1 deletion assets/stylesheets/bootstrap/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@use "sass:math";
//
// Forms
// --------------------------------------------------
Expand Down Expand Up @@ -581,7 +582,7 @@ textarea.form-control {
// Reposition the icon because it's now within a grid column and columns have
// `position: relative;` on them. Also accounts for the grid gutter padding.
.has-feedback .form-control-feedback {
right: floor(($grid-gutter-width / 2));
right: floor(math.div($grid-gutter-width, 2));
}

// Form group sizes
Expand Down
7 changes: 4 additions & 3 deletions assets/stylesheets/bootstrap/_jumbotron.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@use "sass:math";
//
// Jumbotron
// --------------------------------------------------
Expand All @@ -16,7 +17,7 @@
}

p {
margin-bottom: ($jumbotron-padding / 2);
margin-bottom: math.div($jumbotron-padding, 2);
font-size: $jumbotron-font-size;
font-weight: 200;
}
Expand All @@ -27,8 +28,8 @@

.container &,
.container-fluid & {
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
padding-right: math.div($grid-gutter-width, 2);
padding-left: math.div($grid-gutter-width, 2);
border-radius: $border-radius-large; // Only round corners at higher resolutions if contained in a container
}

Expand Down
3 changes: 2 additions & 1 deletion assets/stylesheets/bootstrap/_navbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@use "sass:math";
//
// Navbars
// --------------------------------------------------
Expand Down Expand Up @@ -228,7 +229,7 @@
// the nav the full height of the horizontal nav (above 768px).

.navbar-nav {
margin: ($navbar-padding-vertical / 2) (-$navbar-padding-horizontal);
margin: math.div($navbar-padding-vertical, 2) (-$navbar-padding-horizontal);

> li > a {
padding-top: 10px;
Expand Down
19 changes: 10 additions & 9 deletions assets/stylesheets/bootstrap/_type.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@use "sass:math";
//
// Typography
// --------------------------------------------------
Expand Down Expand Up @@ -25,7 +26,7 @@ h1, .h1,
h2, .h2,
h3, .h3 {
margin-top: $line-height-computed;
margin-bottom: ($line-height-computed / 2);
margin-bottom: math.div($line-height-computed, 2);

small,
.small {
Expand All @@ -35,8 +36,8 @@ h3, .h3 {
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: ($line-height-computed / 2);
margin-bottom: ($line-height-computed / 2);
margin-top: math.div($line-height-computed, 2);
margin-bottom: math.div($line-height-computed, 2);

small,
.small {
Expand All @@ -56,7 +57,7 @@ h6, .h6 { font-size: $font-size-h6; }
// -------------------------

p {
margin: 0 0 ($line-height-computed / 2);
margin: 0 0 math.div($line-height-computed, 2);
}

.lead {
Expand All @@ -74,10 +75,10 @@ p {
// Emphasis & misc
// -------------------------

// Ex: (12px small font / 14px base font) * 100% = about 85%
// Ex: math.div(12px small font, 14px base font) * 100% = about 85%
small,
.small {
font-size: floor((100% * $font-size-small / $font-size-base));
font-size: floor(math.div(100% * $font-size-small, $font-size-base));
}

mark,
Expand Down Expand Up @@ -136,7 +137,7 @@ mark,
// -------------------------

.page-header {
padding-bottom: (($line-height-computed / 2) - 1);
padding-bottom: (math.div($line-height-computed, 2) - 1);
margin: ($line-height-computed * 2) 0 $line-height-computed;
border-bottom: 1px solid $page-header-border-color;
}
Expand All @@ -149,7 +150,7 @@ mark,
ul,
ol {
margin-top: 0;
margin-bottom: ($line-height-computed / 2);
margin-bottom: math.div($line-height-computed, 2);
ul,
ol {
margin-bottom: 0;
Expand Down Expand Up @@ -239,7 +240,7 @@ abbr[data-original-title] {

// Blockquotes
blockquote {
padding: ($line-height-computed / 2) $line-height-computed;
padding: math.div($line-height-computed, 2) $line-height-computed;
margin: 0 0 $line-height-computed;
font-size: $blockquote-font-size;
border-left: 5px solid $blockquote-border-color;
Expand Down
13 changes: 7 additions & 6 deletions assets/stylesheets/bootstrap/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
$bootstrap-sass-asset-helper: false !default;
@use "sass:math";
//
// Variables
// --------------------------------------------------
Expand Down Expand Up @@ -334,24 +335,24 @@ $grid-gutter-width: 30px !default;
//** Point at which the navbar becomes uncollapsed.
$grid-float-breakpoint: $screen-sm-min !default;
//** Point at which the navbar begins collapsing.
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
$grid-float-breakpoint-max: math.div($grid-float-breakpoint - 1) !default;
Copy link
Copy Markdown

@francesco-caveglia-deltatre francesco-caveglia-deltatre Feb 26, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this correct?
I'm getting this error
(same thing @ line 351)

SassError: Missing argument $number2.
  ┌──> node_modules\bootstrap-sass\assets\stylesheets\bootstrap\_variables.scss
338│ $grid-float-breakpoint-max: math.div($grid-float-breakpoint - 1) !default;
  │                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ invocation
  ╵
  ┌──> sass:math
1 │ @function div($number1, $number2) {
  │           ━━━━━━━━━━━━━━━━━━━━━━━ declaration

Copy link
Copy Markdown
Member

@glebm glebm Feb 26, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep looks wrong. @AprilArcus Can you please fix?

Copy link
Copy Markdown
Contributor Author

@AprilArcus AprilArcus Feb 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, will address this right away.

Copy link
Copy Markdown
Contributor Author

@AprilArcus AprilArcus Feb 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR: #1225



//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.

// Small screen / tablet
// Small screen, tablet
$container-tablet: (720px + $grid-gutter-width) !default;
//** For `$screen-sm-min` and up.
$container-sm: $container-tablet !default;

// Medium screen / desktop
$container-desktop: (940px + $grid-gutter-width) !default;
$container-desktop: math.div(940px + $grid-gutter-width) !default;
//** For `$screen-md-min` and up.
$container-md: $container-desktop !default;

// Large screen / wide desktop
// Large screen, wide desktop
$container-large-desktop: (1140px + $grid-gutter-width) !default;
//** For `$screen-lg-min` and up.
$container-lg: $container-large-desktop !default;
Expand All @@ -365,8 +366,8 @@ $container-lg: $container-large-desktop !default;
$navbar-height: 50px !default;
$navbar-margin-bottom: $line-height-computed !default;
$navbar-border-radius: $border-radius-base !default;
$navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default;
$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2) !default;
$navbar-padding-horizontal: floor(math.div($grid-gutter-width, 2)) !default;
$navbar-padding-vertical: (math.div($navbar-height - $line-height-computed), 2) !default;
Copy link
Copy Markdown

@francesco-caveglia-deltatre francesco-caveglia-deltatre Feb 26, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
$navbar-padding-vertical: (math.div($navbar-height - $line-height-computed), 2) !default;
$navbar-padding-vertical: math.div(($navbar-height - $line-height-computed), 2) !default;

$navbar-collapse-max-height: 340px !default;

$navbar-default-color: #777 !default;
Expand Down
13 changes: 7 additions & 6 deletions assets/stylesheets/bootstrap/mixins/_grid-framework.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@use "sass:math";
// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
Expand All @@ -13,8 +14,8 @@
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-right: floor(($grid-gutter-width / 2));
padding-left: ceil(($grid-gutter-width / 2));
padding-right: floor(math.div($grid-gutter-width, 2));
padding-left: ceil(math.div($grid-gutter-width, 2));
}
}

Expand All @@ -33,12 +34,12 @@
@mixin calc-grid-column($index, $class, $type) {
@if ($type == width) and ($index > 0) {
.col-#{$class}-#{$index} {
width: percentage(($index / $grid-columns));
width: percentage(math.div($index, $grid-columns));
}
}
@if ($type == push) and ($index > 0) {
.col-#{$class}-push-#{$index} {
left: percentage(($index / $grid-columns));
left: percentage(math.div($index, $grid-columns));
}
}
@if ($type == push) and ($index == 0) {
Expand All @@ -48,7 +49,7 @@
}
@if ($type == pull) and ($index > 0) {
.col-#{$class}-pull-#{$index} {
right: percentage(($index / $grid-columns));
right: percentage(math.div($index, $grid-columns));
}
}
@if ($type == pull) and ($index == 0) {
Expand All @@ -58,7 +59,7 @@
}
@if ($type == offset) {
.col-#{$class}-offset-#{$index} {
margin-left: percentage(($index / $grid-columns));
margin-left: percentage(math.div($index, $grid-columns));
}
}
}
Expand Down
Loading
⚡