UI: Devfund-donation-box Web Assets v2 upgrade #1
4
dist/donation-box-message.html
vendored
4
dist/donation-box-message.html
vendored
File diff suppressed because one or more lines are too long
4
dist/donation-box.html
vendored
4
dist/donation-box.html
vendored
File diff suppressed because one or more lines are too long
@ -1,7 +1,8 @@
|
||||
/* Custom configuration. */
|
||||
$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. */
|
||||
@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')
|
||||
|
||||
.dfdb
|
||||
--border-radius: var(--spacer)
|
||||
--border-radius-lg: calc(var(--spacer) * 2)
|
||||
--border-radius: var(--spacer-2)
|
||||
--border-radius-lg: var(--spacer)
|
||||
|
||||
--box-text-color: var(--color-text)
|
||||
|
||||
/* Grid */
|
||||
--spacer: 16px
|
||||
|
||||
/* Type */
|
||||
--fs-h1: 32px
|
||||
--fs-h2: 28px
|
||||
--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)
|
||||
|
||||
.box
|
||||
backdrop-filter: blur(calc(var(--spacer) * 4)) saturate(1.3)
|
||||
backdrop-filter: blur(calc(var(--spacer) * 2)) saturate(1.3)
|
||||
|
||||
&.is-dark-mode
|
||||
// --color-bg, opacity 0.8
|
||||
@ -79,27 +84,27 @@ h2
|
||||
|
||||
.fs-1,
|
||||
.fs-2
|
||||
line-height: calc(var(--spacer) * 5)
|
||||
line-height: calc(var(--spacer) * 2.5)
|
||||
|
||||
.fs-3,
|
||||
.fs-4,
|
||||
.fs-5
|
||||
line-height: calc(var(--spacer) * 4)
|
||||
line-height: calc(var(--spacer) * 2)
|
||||
|
||||
.fs-6
|
||||
line-height: calc(var(--spacer) * 3)
|
||||
line-height: var(--spacer-5)
|
||||
|
||||
.fs-7
|
||||
font-size: var(--fs-sm)
|
||||
line-height: calc(var(--spacer) * 2)
|
||||
line-height: var(--spacer)
|
||||
|
||||
.fs-xl
|
||||
font-size: var(--fs-lg) !important
|
||||
line-height: calc(var(--spacer) * 7)
|
||||
line-height: calc(var(--spacer) * 3.5)
|
||||
|
||||
+media-xs
|
||||
.fs-xl
|
||||
line-height: calc(var(--spacer) * 6)
|
||||
line-height: var(--spacer-5)
|
||||
|
||||
// TODO: add style utility to Web Assets
|
||||
.h-0
|
||||
@ -132,27 +137,27 @@ input
|
||||
|
||||
/* Custom components. */
|
||||
.box
|
||||
+padding(4)
|
||||
padding: (var(--spacer) * 2)
|
||||
|
||||
&.donation-box-message
|
||||
border-bottom-left-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
+padding(4, top)
|
||||
padding-top: (var(--spacer) * 2)
|
||||
z-index: 2147483647 // z-index maximum
|
||||
|
||||
// Transform column vertically to improve vertical align, while keeping msg markup and JavaScript coupled with donation-box.html
|
||||
+media-lg
|
||||
.col-msg
|
||||
margin-top: calc(var(--spacer) * -9)
|
||||
margin-top: calc(var(--spacer) * -4.5)
|
||||
|
||||
.btn
|
||||
transition: all var(--transition-speed-slow)
|
||||
|
||||
.btn-lg
|
||||
font-size: var(--fs-h4)
|
||||
line-height: calc(var(--spacer) * 2.5) !important
|
||||
padding-bottom: var(--spacer-4) !important
|
||||
padding-top: var(--spacer-4) !important
|
||||
line-height: calc(var(--spacer) * 1.25) !important
|
||||
padding-bottom: calc(var(--spacer) * 2) !important
|
||||
padding-top: calc(var(--spacer) * 2) !important
|
||||
|
||||
.btn-link
|
||||
border: 2px solid var(--btn-color) !important
|
||||
@ -177,14 +182,14 @@ input
|
||||
+padding(3)
|
||||
|
||||
.btn-row
|
||||
gap: var(--spacer-2)
|
||||
gap: var(--spacer-1)
|
||||
|
||||
.btn-row-grid
|
||||
gap: calc(var(--spacer) * 2)
|
||||
gap: var(--spacer)
|
||||
|
||||
// TODO: change to CSS grid definition
|
||||
.btn
|
||||
min-width: calc(100% / 3 - var(--spacer) * 2)
|
||||
min-width: calc(100% / 3 - var(--spacer))
|
||||
|
||||
.btn-row-tabbed
|
||||
background-color: var(--btn-color-bg)
|
||||
@ -206,8 +211,9 @@ input
|
||||
|
||||
border-radius: var(--border-radius-lg)
|
||||
flex-grow: 1
|
||||
+padding(4, y)
|
||||
+padding(3, x)
|
||||
+padding(2, x)
|
||||
padding-bottom: calc( var(--spacer) * 2)
|
||||
padding-top: calc( var(--spacer) * 2)
|
||||
|
||||
&:active,
|
||||
&.active,
|
||||
@ -228,7 +234,7 @@ input
|
||||
// TODO: consider adding style utilities for CSS grid layout to Web Assets
|
||||
.donate-row
|
||||
display: grid
|
||||
gap: calc(var(--spacer) * 2)
|
||||
gap: var(--spacer)
|
||||
grid-template-columns: 1fr 2fr
|
||||
|
||||
.form-control
|
||||
@ -241,19 +247,19 @@ input
|
||||
color: var(--color-accent)
|
||||
|
||||
.img-badge
|
||||
height: calc(var(--spacer) * 8)
|
||||
min-width: calc(var(--spacer) * 8)
|
||||
height: calc(var(--spacer) * 4)
|
||||
min-width: calc(var(--spacer) * 4)
|
||||
|
||||
.img-badges
|
||||
margin-right: calc(var(--spacer) * 6)
|
||||
margin-right: var(--spacer-5)
|
||||
|
||||
.link-badge-lg-30y
|
||||
bottom: calc(var(--spacer) * -3)
|
||||
bottom: calc(var(--spacer-4) * -1)
|
||||
display: none
|
||||
left: calc(var(--spacer) * -7)
|
||||
left: calc(var(--spacer) * -3.5)
|
||||
|
||||
img
|
||||
height: calc(var(--spacer) * 44)
|
||||
height: calc(var(--spacer) * 22)
|
||||
max-width: none
|
||||
|
||||
|
|
||||
@media (min-width: 1600px)
|
||||
@ -262,11 +268,11 @@ input
|
||||
|
||||
@media (min-width: 1920px)
|
||||
.link-badge-lg-30y
|
||||
bottom: calc(var(--spacer) * -4)
|
||||
left: calc(var(--spacer) * -8)
|
||||
bottom: calc(var(--spacer) * -2)
|
||||
left: calc(var(--spacer) * -4)
|
||||
|
||||
img
|
||||
height: calc(var(--spacer) * 52)
|
||||
height: calc(var(--spacer) * 26)
|
||||
max-width: none
|
||||
|
||||
input[type=number]
|
||||
@ -277,10 +283,10 @@ input[type=number]::-webkit-outer-spin-button
|
||||
-webkit-appearance: none
|
||||
|
||||
.input-one-time-donate-value-symbol
|
||||
line-height: calc(var(--spacer) * 7)
|
||||
line-height: calc(var(--spacer) * 3.5)
|
||||
|
||||
li
|
||||
line-height: calc(var(--spacer) * 4)
|
||||
line-height: calc(var(--spacer) * 2)
|
||||
|
||||
select
|
||||
&.form-control
|
||||
|
||||
Loading…
Reference in New Issue
Block a user
Isn't that in https://projects.blender.org/infrastructure/web-assets/src/branch/v2/src/styles/bootstrap-5/dist/css/bootstrap-utilities.css#L1274 ?
It is, but Web Assets also applies
font-variation-settingsrules on top, to make font-weight settings consistently work with variable fonts as well. (The+fw-titlemixin should be added – combiningfont-variation-settingsandfont-weightrules – to Web Assets similarily to+fw-bold, that already exists.)