infrastructure/devfund-donation-box
0
1
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

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
Conversation 0 Commits 26 Files Changed 18 +56 -56
3 changed files with 56 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit fcd66a665c - Show all commits

4
dist/donation-box-message.html vendored
View File

File diff suppressed because one or more lines are too long

4
dist/donation-box.html vendored
View File

File diff suppressed because one or more lines are too long

104
sass/custom.sass
View File

@ -3,12 +3,12 @@ $font-body: var(--font-family-body)
$font-path: "https://fund.blender.org/static/fonts" $font-path: "https://fund.blender.org/static/fonts"
// Sass variables h*-font-size are needed as are used in Web Assets component rules // Sass variables h*-font-size are needed as are used in Web Assets component rules
$h1-font-size: var(--font-size-h1) $h1-font-size: var(--fs-h1)
$h2-font-size: var(--font-size-h2) $h2-font-size: var(--fs-h2)
$h3-font-size: var(--font-size-h3) $h3-font-size: var(--fs-h3)
$h4-font-size: var(--font-size-h4) $h4-font-size: var(--fs-h4)
$h5-font-size: var(--font-size-h5) $h5-font-size: var(--fs-h5)
$h6-font-size: var(--font-size-base) $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
@ -33,22 +33,22 @@ $spacer: 8px // Sizes are pxs to not clash with root em that might vary
--font-family-body: 'Inter', sans-serif --font-family-body: 'Inter', sans-serif
+media-lg +media-lg
--font-size-base: 16px --fs-base: 16px
+media-sm +media-sm
--font-size-small: 14px --fs-sm: 14px
--font-size-h1: 32px --fs-h1: 32px
--font-size-h2: 28px --fs-h2: 28px
--font-size-h3: 24px --fs-h3: 24px
--font-size-h4: 21px --fs-h4: 21px
--font-size-h5: 18px --fs-h5: 18px
--font-size-h6: var(--font-size-base) --fs-h6: var(--fs-base)
--font-size-large: 48px --fs-lg: 48px
--font-weight-bold: 700 --fw-bold: 700
+media-xs +media-xs
--font-size-large: 32px --fs-lg: 32px
// Map --spacer to $spacer. // Map --spacer to $spacer.
--spacer: #{$spacer} --spacer: #{$spacer}
@ -64,34 +64,34 @@ $spacer: 8px // Sizes are pxs to not clash with root em that might vary
color: var(--text-color) color: var(--text-color)
font-family: var(--font-family-body) font-family: var(--font-family-body)
font-size: var(--font-size-base) font-size: var(--fs-base)
font-weight: var(--font-weight) font-weight: var(--font-weight)
text-align: left text-align: left
&.is-bg-glossy &.is-bg-glossy
// --background-color, opacity 0.8 // --color-bg, opacity 0.8
--background-color-primary: rgba(242, 242, 243, 0.8) --color-bg-primary: rgba(242, 242, 243, 0.8)
.box .box
backdrop-filter: blur(calc(var(--spacer) * 4)) saturate(1.3) backdrop-filter: blur(calc(var(--spacer) * 4)) saturate(1.3)
&.is-dark-mode &.is-dark-mode
// --background-color, opacity 0.8 // --color-bg, opacity 0.8
--background-color-primary: rgba(41, 45, 50, 0.8) --color-bg-primary: rgba(41, 45, 50, 0.8)
// TODO: consider changing to Sass include from Web Assets instead // TODO: consider changing to Sass include from Web Assets instead
&.is-dark-mode &.is-dark-mode
--background-color: hsl(213, 10%, 18%) --color-bg: hsl(213, 10%, 18%)
--background-color-primary: hsl(213, 10%, 21%) --color-bg-primary: hsl(213, 10%, 21%)
--background-color-secondary: hsl(213, 10%, 16%) --color-bg-secondary: hsl(213, 10%, 16%)
--background-color-tertiary: hsl(213, 10%, 14%) --color-bg-tertiary: hsl(213, 10%, 14%)
--text-color: hsl(213, 10%, 80%) --text-color: hsl(213, 10%, 80%)
--text-color-primary: hsl(213, 10%, 98%) --text-color-primary: hsl(213, 10%, 98%)
--text-color-secondary: hsl(213, 10%, 58%) --text-color-secondary: hsl(213, 10%, 58%)
--text-color-tertiary: hsl(213, 10%, 48%) --text-color-tertiary: hsl(213, 10%, 48%)
--code-bg: hsl(297deg, 70%, 50%, .08) --code-color-bg: hsl(297deg, 70%, 50%, .08)
--code-color: hsl(297deg, 30%, 78%) --code-color: hsl(297deg, 30%, 78%)
--color-info: hsl(207deg, 95%, 65%) --color-info: hsl(207deg, 95%, 65%)
@ -110,31 +110,31 @@ $spacer: 8px // Sizes are pxs to not clash with root em that might vary
--btn-bg-hover: hsl(213, 10%, 30%) --btn-bg-hover: hsl(213, 10%, 30%)
--btn-color: hsl(213, 16%, 78%) --btn-color: hsl(213, 16%, 78%)
--navbar-bg: var(--background-color) --navbar-bg: var(--color-bg)
--navbar-link-color-active: #fff --navbar-link-color-active: #fff
&.smaller &.smaller
--spacer: #{$spacer * 0.8} --spacer: #{$spacer * 0.8}
--font-size-base: 14px --fs-base: 14px
--font-size-h1: 28px --fs-h1: 28px
--font-size-h2: 24px --fs-h2: 24px
--font-size-h3: 21px --fs-h3: 21px
--font-size-h4: 18px --fs-h4: 18px
--font-size-h5: 16px --fs-h5: 16px
--font-size-large: 42px --fs-lg: 42px
+media-xs +media-xs
--font-size-large: 28px --fs-lg: 28px
h2 h2
font-variation-settings: "wght" var(--font-weight-normal) font-variation-settings: "wght" var(--fw-normal)
/* Custom utilities. */ /* Custom utilities. */
.fade .fade
transition-duration: var(--transition-duration) transition-duration: var(--transition-duration)
.fs-0 .fs-0
font-size: var(--font-size-large) font-size: var(--fs-lg)
line-height: calc(var(--spacer) * 7) line-height: calc(var(--spacer) * 7)
+media-xs +media-xs
@ -154,7 +154,7 @@ h2
line-height: calc(var(--spacer) * 3) line-height: calc(var(--spacer) * 3)
.fs-7 .fs-7
font-size: var(--font-size-small) font-size: var(--fs-sm)
line-height: calc(var(--spacer) * 2) line-height: calc(var(--spacer) * 2)
.h-0 .h-0
@ -204,13 +204,13 @@ h2
&:active, &:active,
&:focus, &:focus,
&:hover &:hover
border-color: var(--color-primary) !important border-color: var(--color-accent) !important
--btn-color: var(--color-primary) --btn-color: var(--color-accent)
&.active &.active
border-color: var(--color-primary) !important border-color: var(--color-accent) !important
// '!important' is needed for Wiki // '!important' is needed for Wiki
--btn-bg-color: var(--color-primary) !important --btn-color-bg: var(--color-accent) !important
--btn-color: white !important --btn-color: white !important
.btn-sm .btn-sm
@ -231,24 +231,24 @@ h2
min-width: calc(100% / 3 - var(--spacer) * 2) min-width: calc(100% / 3 - var(--spacer) * 2)
.btn-row-tabbed .btn-row-tabbed
background-color: var(--btn-bg-color) background-color: var(--btn-color-bg)
padding: var(--spacer-2) padding: var(--spacer-2)
.btn-primary .btn-primary
--btn-bg-color: var(--color-primary) --btn-color-bg: var(--color-accent)
--btn-color: white --btn-color: white
.btn-tabbed .btn-tabbed
@extend .btn-primary @extend .btn-primary
@extend .fs-5 @extend .fs-5
border-radius: var(--border-radius-lg) border-radius: var(--border-radius-lg)
--btn-bg-color: transparent --btn-color-bg: transparent
--btn-color: var(--color-primary) --btn-color: var(--color-accent)
flex-grow: 1 flex-grow: 1
padding: var(--spacer-4) var(--spacer) padding: var(--spacer-4) var(--spacer)
&.active &.active
background-color: var(--color-primary) background-color: var(--color-accent)
color: white color: white
+media-sm +media-sm
@ -265,10 +265,10 @@ h2
height: auto height: auto
&.input-one-time-donate &.input-one-time-donate
color: var(--color-primary) color: var(--color-accent)
&:focus &:focus
color: var(--color-primary) color: var(--color-accent)
.img-badge .img-badge
height: calc(var(--spacer) * 8) height: calc(var(--spacer) * 8)
@ -314,13 +314,13 @@ li
select select
&.form-control &.form-control
background-color: var(--background-color-secondary) background-color: var(--color-bg-secondary)
color: var(--text-color) color: var(--text-color)
&:active, &:active,
&:focus, &:focus,
&:hover &:hover
background-color: var(--background-color-secondary) background-color: var(--color-bg-secondary)
color: var(--text-color) color: var(--text-color)
ul ul