UI: Devfund-donation-box Web Assets v2 upgrade #1

Merged
Márton Lente merged 26 commits from ui/web-assets-v2-upgrade into main 2024-11-04 12:49:39 +01:00
3 changed files with 11 additions and 37 deletions
Showing only changes of commit 6bd9520c10 - Show all commits

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,14 +1,6 @@
/* Custom configuration. */ /* Custom configuration. */
$font-body: var(--font-family-body) $font-body: var(--font-family-body)
$font-path: "https://fund.blender.org/static/fonts" $font-path: "http://devfund-donation-box.test/dist/fonts"
// Sass variables h*-font-size are needed as are used in Web Assets component rules
$h1-font-size: var(--fs-h1)
$h2-font-size: var(--fs-h2)
$h3-font-size: var(--fs-h3)
$h4-font-size: var(--fs-h4)
$h5-font-size: var(--fs-h5)
$h6-font-size: var(--fs-base)
$spacer: 8px // Sizes are pxs to not clash with root em that might vary $spacer: 8px // Sizes are pxs to not clash with root em that might vary
@ -22,11 +14,6 @@ $spacer: 8px // Sizes are pxs to not clash with root em that might vary
--border-radius: var(--spacer) --border-radius: var(--spacer)
--border-radius-lg: calc(var(--spacer) * 2) --border-radius-lg: calc(var(--spacer) * 2)
// Map --container-width to $container-width
--container-width: #{$container-width}
--font-family-body: 'Inter', sans-serif
+media-lg +media-lg
--fs-base: 16px --fs-base: 16px
@ -40,29 +27,17 @@ $spacer: 8px // Sizes are pxs to not clash with root em that might vary
--fs-h5: 18px --fs-h5: 18px
--fs-h6: var(--fs-base) --fs-h6: var(--fs-base)
--fs-lg: 48px --fs-lg: 48px
--fw-bold: 700
+media-xs +media-xs
--fs-lg: 32px --fs-lg: 32px
// Map --spacer to $spacer.
--spacer: #{$spacer}
--spacer-1: calc(var(--spacer) * 0.25)
--spacer-2: calc(var(--spacer) * 0.5)
--spacer-3: var(--spacer)
--spacer-4: calc(var(--spacer) * 1.5)
--spacer-5: calc(var(--spacer) * 3)
--spacer-6: calc(var(--spacer) * 6)
--spacer-7: calc(var(--spacer) * 12)
--transition-duration: 0.3s
color: var(--text-color) color: var(--text-color)
font-family: var(--font-family-body) font-family: var(--font-family-body)
font-size: var(--fs-base) font-size: var(--fs-base)
font-weight: var(--font-weight) font-weight: var(--font-weight)
text-align: left text-align: left
// TODO: add backdrop-filter to Web Assets
&.is-bg-glossy &.is-bg-glossy
// --color-bg, opacity 0.8 // --color-bg, opacity 0.8
--color-bg-primary: rgba(242, 242, 243, 0.8) --color-bg-primary: rgba(242, 242, 243, 0.8)
@ -126,12 +101,14 @@ h2
/* Custom utilities. */ /* Custom utilities. */
.fade .fade
transition-duration: var(--transition-duration) transition-duration: var(--transition-speed-slow)
// TODO: rename class 'fs-0'
.fs-0 .fs-0
font-size: var(--fs-lg) font-size: var(--fs-lg)
line-height: calc(var(--spacer) * 7) line-height: calc(var(--spacer) * 7)
// TODO: check if definitions 'line-height' are needed after Web Assets v2 upgrade
+media-xs +media-xs
.fs-0 .fs-0
line-height: calc(var(--spacer) * 6) line-height: calc(var(--spacer) * 6)
@ -152,6 +129,7 @@ h2
font-size: var(--fs-sm) font-size: var(--fs-sm)
This is also in deprecated https://projects.blender.org/infrastructure/web-assets/src/branch/v2/src/styles/bootstrap-deprecated/utilities/_borders.scss#L33

This rule is currently present both in the deprecated Boostrap partials, and also in the new BS 5 utilities partials. It's because we want to keep this utility once deprecated styles were removed. The latter weren't modified, but renamed in the v2 upgrade: that's why the duplication. *The new rules cascade.

This rule is currently present both in the deprecated Boostrap partials, and also in the new BS 5 utilities partials. It's because we want to keep this utility once deprecated styles were removed. The latter weren't modified, but renamed in the v2 upgrade: that's why the duplication. *The new rules cascade.
line-height: calc(var(--spacer) * 2) line-height: calc(var(--spacer) * 2)
// TODO: add to Web Assets
.h-0 .h-0
height: 0 height: 0
@ -185,7 +163,7 @@ h2
margin-top: calc(var(--spacer) * -9) margin-top: calc(var(--spacer) * -9)
.btn .btn
transition: all var(--transition-duration) transition: all var(--transition-speed-slow)
.btn-lg .btn-lg
@extend .fs-4 @extend .fs-4