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
104
sass/custom.sass
104
sass/custom.sass
@ -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
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user
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.