Merge pull request #21125 from overleaf/td-bs5-scss-tidy

Bootstrap 5 Sass code tidy

GitOrigin-RevId: 550add757c5bf1476446ad31c386c0a4e5522a9e
This commit is contained in:
Tim Down 2024-10-31 11:03:06 +00:00 committed by Copybot
parent 36187aeecb
commit ce0fa69402
11 changed files with 46 additions and 40 deletions

View file

@ -125,6 +125,9 @@ $form-switch-padding-start: $spacing-03;
$form-switch-focus-color: $component-active-color;
$form-switch-checked-color: $component-active-color;
// form-group
$form-group-margin-bottom: $spacing-06;
// Form validation
// form-feedback-variables

View file

@ -6,8 +6,5 @@ $header-height: 68px;
$toolbar-height: 40px;
$toolbar-small-height: 32px;
// Forms
$form-group-margin-bottom: $spacing-06;
// List of allowed themes
$themes: ('default', 'light');

View file

@ -52,15 +52,3 @@
// Mixins
@import 'bootstrap-5/scss/mixins/breakpoints';
// Components custom style
@import '../components/all';
// Custom helpers
@import '../helpers/all';
// Modals
@import '../modals/all';
// Pages custom style
@import '../pages/all';

View file

@ -0,0 +1,18 @@
/* Website redesign */
$vivid-tangerine: #f1a695;
$ceil: #9597c9;
$caramel: #f9d38f;
$dark-jungle-green: #0f271a;
$sapphire-blue: #4354a3;
$purple-bright: #939aff;
$green-bright: #13c965;
:root {
--vivid-tangerine: #{$vivid-tangerine};
--ceil: #{$ceil};
--caramel: #{$caramel};
--dark-jungle-green: #{$dark-jungle-green};
--sapphire-blue: #{$sapphire-blue};
--green-bright: #{$green-bright};
--purple-bright: #{$purple-bright};
}

View file

@ -23,7 +23,7 @@ a {
}
.link-monospace {
@extend .dm-mono;
@include font-mono;
font-weight: 500;
color: var(--green-50);

View file

@ -78,6 +78,10 @@ samp {
color: var(--content-disabled) !important;
}
.dm-mono {
@include font-mono;
}
@include media-breakpoint-up(lg) {
.text-center-only-desktop {
text-align: center;

View file

@ -138,7 +138,7 @@
margin-bottom: var(--spacing-07);
a {
@extend .dm-mono;
@include font-mono;
text-decoration: none;
font-weight: 500;

View file

@ -1,5 +1,5 @@
.text-with-bg {
@extend .dm-mono;
@include font-mono;
padding: 0 var(--spacing-04);
border-radius: var(--border-radius-medium);
@ -28,7 +28,7 @@
}
.mono-text {
@extend .dm-mono;
@include font-mono;
@include body-lg;
color: var(--green-60);

View file

@ -55,15 +55,6 @@ $yellow-50: #8f5514;
$yellow-60: #7a4304;
$yellow-70: #633a0b;
/* Website redesign */
$vivid-tangerine: #f1a695;
$ceil: #9597c9;
$caramel: #f9d38f;
$dark-jungle-green: #0f271a;
$sapphire-blue: #4354a3;
$purple-bright: #939aff;
$green-bright: #13c965;
/* ====== Semantic Sass color variables ====== */
$bg-light-primary: $white;
$bg-light-secondary: $neutral-10;
@ -174,15 +165,6 @@ $link-ui-visited-dark: $blue-40;
--yellow-60: #{$yellow-60};
--yellow-70: #{$yellow-70};
/* Website redesign */
--vivid-tangerine: #{$vivid-tangerine};
--ceil: #{$ceil};
--caramel: #{$caramel};
--dark-jungle-green: #{$dark-jungle-green};
--sapphire-blue: #{$sapphire-blue};
--green-bright: #{$green-bright};
--purple-bright: #{$purple-bright};
/* ====== Semantic CSS color variables ====== */
--bg-light-primary: var(--white);
--bg-light-secondary: var(--neutral-10);

View file

@ -1,5 +1,4 @@
// This file provides CSS variables for font size and line height, plus Sass variables for base text size for Bootstrap
@use 'sass:math';
:root {
--font-size-01: 0.75rem; // 12px
@ -100,7 +99,7 @@
line-height: var(--line-height-01);
}
.dm-mono {
@mixin font-mono {
font-family: 'DM Mono', monospace;
// We're using the "ss05" (stylistic set 5) version of the DM Mono, by setting the `font-feature-settings` rule

View file

@ -12,7 +12,7 @@
// TODO Bootstrap 5: Check whether this works with Bootstrap 5, and whether we can replace it
@import '../vendor/select/select';
// Boostrap-related
// Bootstrap-related
// Note that files containing Bootstrap or Sass files that interact with
// Bootstrap's Sass variables must use @import rather than @use because
@ -21,9 +21,24 @@
// Include Bootstrap 5 itself, plus overrides and extend Bootstrap styles.
@import 'base/bootstrap';
// Extra colours for the website redesign
@import 'base/colors';
// Components custom style
@import 'components/all';
// Typography-related
@import 'base/typography';
// Custom helpers
@import 'helpers/all';
// Modals
@import 'modals/all';
// Pages custom style
@import 'pages/all';
// Link styles
@import 'base/links';
@import 'base/base';