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 +43 -37
3 changed files with 43 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit cc2d88fa1f - 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

72
sass/custom.sass
View File

@ -1,7 +1,8 @@
/* Custom configuration. */ /* Custom configuration. */
$font-path: "http://devfund-donation-box.test/dist/fonts" $font-path: "http://devfund-donation-box.test/dist/fonts"
$spacer: 8px // Sizes are pxs to not clash with root em that might vary // TODO: fix spacer not prevailing
$spacer: 16px // Sizes are pxs to not clash with root em that might vary
/* Web Assets. */ /* Web Assets. */
@import "../assets_shared/src/styles/main.sass" @import "../assets_shared/src/styles/main.sass"
@ -10,11 +11,15 @@ $spacer: 8px // Sizes are pxs to not clash with root em that might vary
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css') @import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css')
.dfdb .dfdb
--border-radius: var(--spacer) --border-radius: var(--spacer-2)
--border-radius-lg: calc(var(--spacer) * 2) --border-radius-lg: var(--spacer)
--box-text-color: var(--color-text) --box-text-color: var(--color-text)
/* Grid */
--spacer: 16px
/* Type */
--fs-h1: 32px --fs-h1: 32px
--fs-h2: 28px --fs-h2: 28px
--fs-h3: 24px --fs-h3: 24px
@ -44,7 +49,7 @@ $spacer: 8px // Sizes are pxs to not clash with root em that might vary
--color-bg-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) * 2)) saturate(1.3)
&.is-dark-mode &.is-dark-mode
// --color-bg, opacity 0.8 // --color-bg, opacity 0.8
@ -79,27 +84,27 @@ h2
.fs-1, .fs-1,
.fs-2 .fs-2
line-height: calc(var(--spacer) * 5) line-height: calc(var(--spacer) * 2.5)
.fs-3, .fs-3,
.fs-4, .fs-4,
.fs-5 .fs-5
line-height: calc(var(--spacer) * 4) line-height: calc(var(--spacer) * 2)
.fs-6 .fs-6
line-height: calc(var(--spacer) * 3) line-height: var(--spacer-5)
.fs-7 .fs-7
font-size: var(--fs-sm) font-size: var(--fs-sm)
line-height: calc(var(--spacer) * 2) line-height: var(--spacer)
.fs-xl .fs-xl
font-size: var(--fs-lg) !important font-size: var(--fs-lg) !important
line-height: calc(var(--spacer) * 7) line-height: calc(var(--spacer) * 3.5)
+media-xs +media-xs
.fs-xl .fs-xl
line-height: calc(var(--spacer) * 6) line-height: var(--spacer-5)
// TODO: add style utility to Web Assets // TODO: add style utility to Web Assets
.h-0 .h-0
@ -132,27 +137,27 @@ input
/* Custom components. */ /* Custom components. */
.box .box
+padding(4) padding: (var(--spacer) * 2)
&.donation-box-message &.donation-box-message
border-bottom-left-radius: 0 border-bottom-left-radius: 0
border-bottom-right-radius: 0 border-bottom-right-radius: 0
+padding(4, top) padding-top: (var(--spacer) * 2)
z-index: 2147483647 // z-index maximum z-index: 2147483647 // z-index maximum
// Transform column vertically to improve vertical align, while keeping msg markup and JavaScript coupled with donation-box.html // Transform column vertically to improve vertical align, while keeping msg markup and JavaScript coupled with donation-box.html
+media-lg +media-lg
.col-msg .col-msg
margin-top: calc(var(--spacer) * -9) margin-top: calc(var(--spacer) * -4.5)
.btn .btn
transition: all var(--transition-speed-slow) transition: all var(--transition-speed-slow)
.btn-lg .btn-lg
font-size: var(--fs-h4) font-size: var(--fs-h4)
line-height: calc(var(--spacer) * 2.5) !important line-height: calc(var(--spacer) * 1.25) !important
padding-bottom: var(--spacer-4) !important padding-bottom: calc(var(--spacer) * 2) !important
padding-top: var(--spacer-4) !important padding-top: calc(var(--spacer) * 2) !important
.btn-link .btn-link
border: 2px solid var(--btn-color) !important border: 2px solid var(--btn-color) !important
@ -177,14 +182,14 @@ input
+padding(3) +padding(3)
.btn-row .btn-row
gap: var(--spacer-2) gap: var(--spacer-1)
.btn-row-grid .btn-row-grid
gap: calc(var(--spacer) * 2) gap: var(--spacer)
// TODO: change to CSS grid definition // TODO: change to CSS grid definition
.btn .btn
min-width: calc(100% / 3 - var(--spacer) * 2) min-width: calc(100% / 3 - var(--spacer))
.btn-row-tabbed .btn-row-tabbed
background-color: var(--btn-color-bg) background-color: var(--btn-color-bg)
@ -206,8 +211,9 @@ input
border-radius: var(--border-radius-lg) border-radius: var(--border-radius-lg)
flex-grow: 1 flex-grow: 1
+padding(4, y) +padding(2, x)
+padding(3, x) padding-bottom: calc( var(--spacer) * 2)
padding-top: calc( var(--spacer) * 2)
&:active, &:active,
&.active, &.active,
@ -228,7 +234,7 @@ input
// TODO: consider adding style utilities for CSS grid layout to Web Assets // TODO: consider adding style utilities for CSS grid layout to Web Assets
.donate-row .donate-row
display: grid display: grid
gap: calc(var(--spacer) * 2) gap: var(--spacer)
grid-template-columns: 1fr 2fr grid-template-columns: 1fr 2fr
.form-control .form-control
@ -241,19 +247,19 @@ input
color: var(--color-accent) color: var(--color-accent)
.img-badge .img-badge
height: calc(var(--spacer) * 8) height: calc(var(--spacer) * 4)
min-width: calc(var(--spacer) * 8) min-width: calc(var(--spacer) * 4)
.img-badges .img-badges
margin-right: calc(var(--spacer) * 6) margin-right: var(--spacer-5)
.link-badge-lg-30y .link-badge-lg-30y
bottom: calc(var(--spacer) * -3) bottom: calc(var(--spacer-4) * -1)
display: none display: none
left: calc(var(--spacer) * -7) left: calc(var(--spacer) * -3.5)
img img
height: calc(var(--spacer) * 44) height: calc(var(--spacer) * 22)
max-width: none max-width: none
Pablo Vazquez commented 2024-09-16 16:15:51 +02:00
Outdated
Review
Copy Link

// TODO: Move to Web Assets

Isn't that in https://projects.blender.org/infrastructure/web-assets/src/branch/v2/src/styles/bootstrap-5/dist/css/bootstrap-utilities.css#L1274 ?

> // TODO: Move to Web Assets Isn't that in https://projects.blender.org/infrastructure/web-assets/src/branch/v2/src/styles/bootstrap-5/dist/css/bootstrap-utilities.css#L1274 ?
Márton Lente commented 2024-09-16 16:41:10 +02:00
Outdated
Review
Copy Link

It is, but Web Assets also applies font-variation-settings rules on top, to make font-weight settings consistently work with variable fonts as well. (The +fw-title mixin should be added – combining font-variation-settings and font-weight rules – to Web Assets similarily to +fw-bold, that already exists.)

It is, but Web Assets also applies `font-variation-settings` rules on top, to make font-weight settings consistently work with variable fonts as well. (The `+fw-title` mixin should be added – combining `font-variation-settings` and `font-weight` rules – to Web Assets similarily to `+fw-bold`, that already exists.)
@media (min-width: 1600px) @media (min-width: 1600px)
@ -262,11 +268,11 @@ input
@media (min-width: 1920px) @media (min-width: 1920px)
.link-badge-lg-30y .link-badge-lg-30y
bottom: calc(var(--spacer) * -4) bottom: calc(var(--spacer) * -2)
left: calc(var(--spacer) * -8) left: calc(var(--spacer) * -4)
img img
height: calc(var(--spacer) * 52) height: calc(var(--spacer) * 26)
max-width: none max-width: none
input[type=number] input[type=number]
@ -277,10 +283,10 @@ input[type=number]::-webkit-outer-spin-button
-webkit-appearance: none -webkit-appearance: none
.input-one-time-donate-value-symbol .input-one-time-donate-value-symbol
line-height: calc(var(--spacer) * 7) line-height: calc(var(--spacer) * 3.5)
li li
line-height: calc(var(--spacer) * 4) line-height: calc(var(--spacer) * 2)
select select
&.form-control &.form-control