UI: Devfund-donation-box Web Assets v2 upgrade #1
8
dist/donation-box-message.html
vendored
8
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,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)
|
||||||
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
|
||||||
|
Loading…
Reference in New Issue
Block a user