[Site] Clean templates & css

Author: smnandre

ux.symfony.com/assets/styles/app.scss

@@ -11,12 +11,54 @@
 @import "../../vendor/twbs/bootstrap/scss/variables";
 @import "../../vendor/twbs/bootstrap/scss/variables-dark";
 
+// Remove Bootstrap variables/overrides
+$theme-colors: map-remove($theme-colors, "info", "light");
+
 // Boostrap remainder of required parts
 @import "../../vendor/twbs/bootstrap/scss/maps";
 @import "../../vendor/twbs/bootstrap/scss/mixins";
 @import "../../vendor/twbs/bootstrap/scss/utilities";
 @import "../../vendor/twbs/bootstrap/scss/root";
 
+// Remove multiple utilities with a comma-separated list
+// Margin
+$utilities: map-remove(
+    $utilities,
+    // Background
+    "bg-opacity",
+    "subtle-background-color",
+
+    // Negative margin
+    "negative-margin",
+    "negative-margin-x",
+    "negative-margin-y",
+    "negative-margin-top",
+    "negative-margin-end",
+    "negative-margin-bottom",
+    "negative-margin-start",
+    // Link
+    "link-opacity",
+    "link-offset",
+    "link-underline",
+    "link-underline-opacity",
+    // Border
+    "border",
+    "border-top",
+    "border-end",
+    "border-bottom",
+    "border-start",
+    "border-color",
+    "subtle-border-color",
+    "border-width",
+    "border-opacity",
+    // Position
+    "top",
+    "bottom",
+    "start",
+    "end",
+    "translate-middle",
+);
+
 // Layout & components
 @import "../../vendor/twbs/bootstrap/scss/reboot";
 @import "../../vendor/twbs/bootstrap/scss/type";
@@ -48,8 +90,23 @@
 // @import "../../vendor/twbs/bootstrap/scss/spinners";
 // @import "../../vendor/twbs/bootstrap/scss/offcanvas";
 // @import "../../vendor/twbs/bootstrap/scss/placeholders";
+
 // Helpers
-@import "../../vendor/twbs/bootstrap/scss/helpers";
+@import "../../vendor/twbs/bootstrap/scss/helpers/clearfix";
+//@import "../../vendor/twbs/bootstrap/scss/helpers/color-bg";
+//@import "../../vendor/twbs/bootstrap/scss/helpers/colored-links";
+@import "../../vendor/twbs/bootstrap/scss/helpers/focus-ring";
+//@import "../../vendor/twbs/bootstrap/scss/helpers/icon-link";
+//@import "../../vendor/twbs/bootstrap/scss/helpers/ratio";
+//@import "../../vendor/twbs/bootstrap/scss/helpers/position";
+@import "../../vendor/twbs/bootstrap/scss/helpers/stacks";
+//@import "../../vendor/twbs/bootstrap/scss/helpers/visually-hidden";
+@import "../../vendor/twbs/bootstrap/scss/helpers/stretched-link";
+//@import "../../vendor/twbs/bootstrap/scss/helpers/text-truncation";
+//@import "../../vendor/twbs/bootstrap/scss/helpers/vr";
+
+
+
 // Utilities
 @import "../../vendor/twbs/bootstrap/scss/utilities/api";
 

ux.symfony.com/templates/demos/live_component/invoice.html.twig

@@ -1,7 +1,9 @@
 {% extends 'demos/live_demo.html.twig' %}
 
 {% block code_block_full %}
-    <twig:Code:CodeWithExplanationRow filename="src/Twig/InvoiceCreator.php">
+    <twig:Code:CodeWithExplanationRow filename="src/Twig/InvoiceCreator.php" sticky class="pt-5">
+## Main Component
+
 This main component keeps track of the `Invoice` (which may be new) and
 a list of the "invoice items" - stored on a `LiveProp` called `$lineItems`.
 
@@ -16,7 +18,9 @@ This triggers the `removeLineItem()` method on this component, which
 removes the line item from the `$lineItems` array.
     </twig:Code:CodeWithExplanationRow>
 
-    <twig:Code:CodeWithExplanationRow filename="templates/components/InvoiceCreator.html.twig" reversed>
+    <twig:Code:CodeWithExplanationRow filename="templates/components/InvoiceCreator.html.twig" sticky reversed class="pt-5">
+## Main Template
+
 The template is fairly simple: rendering form fields with `data-model` to
 bind to writable `LiveProp`'s along with their validation errors.
 
@@ -26,7 +30,9 @@ data: `productId`, `quantity`, and `isEditing`. It also passes a `key`,
 which is needed so LiveComponents can track which row is which.
     </twig:Code:CodeWithExplanationRow>
 
-    <twig:Code:CodeWithExplanationRow filename="src/Twig/InvoiceCreatorLineItem.php">
+    <twig:Code:CodeWithExplanationRow filename="src/Twig/InvoiceCreatorLineItem.php" sticky class="pt-5">
+## Child Component
+
 The child component for each "line item". This handles validating, saving,
 and changing the "edit" state of the line item.
 
@@ -41,7 +47,14 @@ by emitting events - e.g. `line_item:save`.
 > "edit" mode.
     </twig:Code:CodeWithExplanationRow>
 
-    <twig:Code:CodeWithExplanationRow filename="templates/components/InvoiceCreatorLineItem.html.twig" reversed>
+    <twig:Code:CodeWithExplanationRow
+        filename="templates/components/InvoiceCreatorLineItem.html.twig"
+        sticky
+        reversed
+        class="pt-5"
+    >
+## Item template
+
 Nothing too fancy here: some `data-model` elements and `data-action="live#action"`
 buttons.
 

ux.symfony.com/templates/demos/live_component/product_form.html.twig

@@ -5,7 +5,9 @@
 {% endblock %}
 
 {% block code_block_full %}
-    <twig:Code:CodeWithExplanationRow filename="src/Twig/NewProductForm.php">
+    <twig:Code:CodeWithExplanationRow filename="src/Twig/NewProductForm.php" sticky>
+## New Product Form
+
 Live component with a form, `ValidatableComponentTrait` and a
 `saveProduct()` LiveAction for instant validation & an AJAX submit.
 
@@ -19,14 +21,20 @@ Then, thanks to the `Category` type-hint + Symfony's standard
 Symfony uses that id to query for the `Category` object.
     </twig:Code:CodeWithExplanationRow>
 
-    <twig:Code:CodeWithExplanationRow filename="templates/components/NewProductForm.html.twig" reversed>
+    <twig:Code:CodeWithExplanationRow filename="templates/components/NewProductForm.html.twig" sticky reversed>
+## New Product Template
+
 Near the bottom, this renders the `BootstrapModal` component with another
 component - `NewCategoryForm` - inside of it. Opening the modal is done entirely
 with normal Bootstrap logic: an `a` tag with `data-bs-toggle="modal"`
 and `data-bs-target="#new-category-modal"`.
     </twig:Code:CodeWithExplanationRow>
 
-    <twig:Code:CodeWithExplanationRow filename="src/Twig/NewCategoryForm.php">
+    <twig:Code:CodeWithExplanationRow
+        filename="src/Twig/NewCategoryForm.php" sticky
+    >
+## New Category Form
+
 This component opens up in the modal! It has a `#[LiveAction]` that saves
 the new `Category` to the database and then does two important things: