torproject/lego
1
0
Fork 0
mirror of https://github.com/torproject/lego.git synced 2024-11-23 09:39:44 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix deprecation warnings in SCSS

Browse Source
This commit is contained in:
kez 2022-11-02 13:43:40 -07:00
parent a9c232428d
commit 52cccb249a
13 changed files with 61 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
assets/scss/_card.scss
View File

@ -1,3 +1,5 @@
@use 'sass:math';
//
// Base styles
//
@ -43,7 +45,7 @@
}
.card-subtitle {
margin-top: -($card-spacer-y / 2);
margin-top: -1 * math.div($card-spacer-y, 2);
margin-bottom: 0;
}
@ -98,15 +100,15 @@
//
.card-header-tabs {
margin-right: -($card-spacer-x / 2);
margin-right: -1 * math.div($card-spacer-x, 2);
margin-bottom: -$card-spacer-y;
margin-left: -($card-spacer-x / 2);
margin-left: -1 * 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: -1 * math.div($card-spacer-x, 2);
margin-left: -1 * math.div($card-spacer-x, 2);
}
// Card image

6
assets/scss/_carousel.scss
View File

@ -1,3 +1,5 @@
@use 'sass:math';
// Wrapper for the slide container and indicators
.carousel {
position: relative;
@ -180,9 +182,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;

8
assets/scss/_component-examples.scss
View File

@ -1,3 +1,5 @@
@use 'sass:math';
// stylelint-disable no-duplicate-selectors, selector-no-qualifying-type
//
@ -117,7 +119,7 @@
.bd-example {
position: relative;
padding: 1rem;
margin: 1rem (-$grid-gutter-width / 2);
margin: 1rem math.div(-$grid-gutter-width, 2);
overflow: auto;
border: solid #f7f7f9;
border-width: .2rem 0 0;
@ -414,8 +416,8 @@
}
.bd-content .highlight {
margin-right: (-$grid-gutter-width / 2);
margin-left: (-$grid-gutter-width / 2);
margin-right: math.div(-$grid-gutter-width, 2);
margin-left: math.div(-$grid-gutter-width, 2);
@include media-breakpoint-up(sm) {
margin-right: 0;

4
assets/scss/_custom-forms.scss
View File

@ -1,3 +1,5 @@
@use 'sass:math';
// Embedded icons from Open Iconic.
// Released under MIT and copyright 2014 Waybury.
// https://useiconic.com/open
@ -54,7 +56,7 @@
.custom-control-indicator {
position: absolute;
top: (($line-height-base - $custom-control-indicator-size) / 2);
top: math.div(($line-height-base - $custom-control-indicator-size), 2);
left: 0;
display: block;
width: $custom-control-indicator-size;

4
assets/scss/_functions.scss
View File

@ -1,3 +1,5 @@
@use 'sass:math';
// Bootstrap functions
//
// Utility mixins and functions for evalutating source code across our variables, maps, and mixins.
@ -54,7 +56,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 >= 150) {
@return #111;

4
assets/scss/_images.scss
View File

@ -1,3 +1,5 @@
@use 'sass:math';
// Responsive images (ensure images don't scale beyond their parents)
//
// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
@ -33,7 +35,7 @@
}
.figure-img {
margin-bottom: ($spacer / 2);
margin-bottom: math.div($spacer, 2);
line-height: 1;
}

4
assets/scss/_jumbotron.scss
View File

@ -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);

4
assets/scss/_tpo.scss
View File

@ -1,3 +1,5 @@
@use 'sass:math';
/* TPO Styles
*
*/
@ -115,7 +117,7 @@ main{
position: relative;
overflow: hidden;
width: 100vw;
left: -($grid-gutter-width/2);
left: -1 * math.div($grid-gutter-width, 2);
}

10
assets/scss/_variables.scss
View File

@ -1,3 +1,5 @@
@use 'sass:math';
// Variables
//
// Variables should follow the `$component-state-property-size` formula for
@ -239,7 +241,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: ($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;
@ -536,14 +538,14 @@ $nav-pills-link-active-bg: $component-active-bg !default;
// Navbar
$navbar-padding-y: ($spacer / 2) !default;
$navbar-padding-y: math.div($spacer, 2) !default;
$navbar-padding-x: $spacer !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: ($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: ($nav-link-height - $navbar-brand-height) / 2 !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;
@ -611,7 +613,7 @@ $card-bg: $white !default;
$card-img-overlay-padding: 1.25rem !default;
$card-group-margin: ($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;

6
assets/scss/mixins/_grid-framework.scss
View File

@ -1,3 +1,5 @@
@use 'sass:math';
// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
@ -9,8 +11,8 @@
position: relative;
width: 100%;
min-height: 1px; // Prevent columns from collapsing when empty
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
padding-right: math.div($gutter, 2);
padding-left: math.div($gutter, 2);
}
@each $breakpoint in map-keys($breakpoints) {

20
assets/scss/mixins/_grid.scss
View File

@ -1,11 +1,13 @@
@use 'sass:math';
/// Grid system
//
// Generate semantic grid columns with these mixins.
@mixin make-container() {
width: 100%;
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);
margin-right: auto;
margin-left: auto;
}
@ -23,8 +25,8 @@
@mixin make-row() {
display: flex;
flex-wrap: wrap;
margin-right: ($grid-gutter-width / -2);
margin-left: ($grid-gutter-width / -2);
margin-right: math.div($grid-gutter-width, -2);
margin-left: math.div($grid-gutter-width, -2);
}
@mixin make-col-ready() {
@ -34,19 +36,19 @@
// later on to override this initial width.
width: 100%;
min-height: 1px; // Prevent collapsing
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);
}
@mixin make-col($size, $columns: $grid-columns) {
flex: 0 0 percentage($size / $columns);
flex: 0 0 percentage(math.div($size, $columns));
// Add a `max-width` to ensure content within each column does not blow out
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
// do not appear to require this.
max-width: percentage($size / $columns);
max-width: percentage(math.div($size, $columns));
}
@mixin make-col-offset($size, $columns: $grid-columns) {
$num: $size / $columns;
$num: math.div($size, $columns);
margin-left: if($num == 0, 0, percentage($num));
}

4
assets/scss/mixins/_nav-divider.scss
View File

@ -1,10 +1,12 @@
@use 'sass:math';
// Horizontal dividers
//
// Dividers (basically an hr) within dropdowns and nav lists
@mixin nav-divider($color: #e5e5e5) {
height: 0;
margin: ($spacer / 2) 0;
margin: math.div($spacer, 2) 0;
overflow: hidden;
border-top: 1px solid $color;
}

10
assets/scss/utilities/_embed.scss
View File

@ -1,3 +1,5 @@
@use 'sass:math';
// Credit: Nicolas Gallagher and SUIT CSS.
.embed-responsive {
@ -29,24 +31,24 @@
.embed-responsive-21by9 {
&::before {
padding-top: percentage(9 / 21);
padding-top: percentage(math.div(9, 21));
}
}
.embed-responsive-16by9 {
&::before {
padding-top: percentage(9 / 16);
padding-top: percentage(math.div(9, 16));
}
}
.embed-responsive-4by3 {
&::before {
padding-top: percentage(3 / 4);
padding-top: percentage(math.div(3, 4));
}
}
.embed-responsive-1by1 {
&::before {
padding-top: percentage(1 / 1);
padding-top: percentage(math.div(1, 1));
}
}