9 |
12 |
13 | Welcome
10 |Learn about building Web apps with ASP.NET Core.
11 |14 | 15 |
Hello World Component
16 | 17 |20 |
21 | 22 |
Simple Parameter Component
23 | 24 |27 |
28 | 29 |
Parameter Component with Children
30 | 31 |Child html
33 | 36 | 37 |
Parameter Component with Children - Fallback
38 | 39 |42 | 43 |
Slotted Component
44 | 45 |This is your first slot.
48 |Child Content
50 |This is your second slot.
52 |56 | 57 |
Slotted Component with nested component (which also has slots)
58 | 59 |This is your first slot.
62 |This is your first nested slot.
67 |This is your second nested slot.
70 |Child html
73 | 80 | 81 |
Slotted Component with nested component (which doesn't have slots)
82 |This is your first slot.
85 |This is your second slot.
89 |Slotted Component with Fallback
93 | 94 |This is your first slot.
97 |
34 |
35 | @RenderBody()
36 |
37 |
38 |
39 |
44 |
45 |
46 |
47 |
48 |
49 | @await RenderSectionAsync("Scripts", required: false)
50 |
51 |
--------------------------------------------------------------------------------
/Pages/Shared/_Layout.cshtml.css:
--------------------------------------------------------------------------------
1 | /* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
2 | for details on configuring this project to bundle and minify static web assets. */
3 |
4 | a.navbar-brand {
5 | white-space: normal;
6 | text-align: center;
7 | word-break: break-all;
8 | }
9 |
10 | a {
11 | color: #0077cc;
12 | }
13 |
14 | .btn-primary {
15 | color: #fff;
16 | background-color: #1b6ec2;
17 | border-color: #1861ac;
18 | }
19 |
20 | .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
21 | color: #fff;
22 | background-color: #1b6ec2;
23 | border-color: #1861ac;
24 | }
25 |
26 | .border-top {
27 | border-top: 1px solid #e5e5e5;
28 | }
29 | .border-bottom {
30 | border-bottom: 1px solid #e5e5e5;
31 | }
32 |
33 | .box-shadow {
34 | box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
35 | }
36 |
37 | button.accept-policy {
38 | font-size: 1rem;
39 | line-height: inherit;
40 | }
41 |
42 | .footer {
43 | position: absolute;
44 | bottom: 0;
45 | width: 100%;
46 | white-space: nowrap;
47 | line-height: 60px;
48 | }
49 |
--------------------------------------------------------------------------------
/Pages/Shared/_ValidationScriptsPartial.cshtml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/Pages/_ViewImports.cshtml:
--------------------------------------------------------------------------------
1 | @using RazorComponentTagHelpers
2 | @namespace RazorComponentTagHelpers.Pages
3 | @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
4 | @addTagHelper *, TechGems.RazorComponentTagHelpers
5 | @addTagHelper *, RazorComponentTagHelpers.Web
6 |
--------------------------------------------------------------------------------
/Pages/_ViewStart.cshtml:
--------------------------------------------------------------------------------
1 | @{
2 | Layout = "_Layout";
3 | }
4 |
--------------------------------------------------------------------------------
/Program.cs:
--------------------------------------------------------------------------------
1 | var builder = WebApplication.CreateBuilder(args);
2 |
3 | // Add services to the container.
4 | builder.Services.AddRazorPages();
5 |
6 | var app = builder.Build();
7 |
8 | // Configure the HTTP request pipeline.
9 | if (!app.Environment.IsDevelopment())
10 | {
11 | app.UseExceptionHandler("/Error");
12 | // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
13 | app.UseHsts();
14 | }
15 |
16 | app.UseHttpsRedirection();
17 | app.UseStaticFiles();
18 |
19 | app.UseRouting();
20 |
21 | app.UseAuthorization();
22 |
23 | app.MapRazorPages();
24 |
25 | app.Run();
26 |
--------------------------------------------------------------------------------
/Properties/launchSettings.json:
--------------------------------------------------------------------------------
1 | {
2 | "iisSettings": {
3 | "windowsAuthentication": false,
4 | "anonymousAuthentication": true,
5 | "iisExpress": {
6 | "applicationUrl": "http://localhost:60839",
7 | "sslPort": 44391
8 | }
9 | },
10 | "profiles": {
11 | "ServerComponents": {
12 | "commandName": "Project",
13 | "dotnetRunMessages": true,
14 | "launchBrowser": true,
15 | "applicationUrl": "https://localhost:7278;http://localhost:5278",
16 | "environmentVariables": {
17 | "ASPNETCORE_ENVIRONMENT": "Development"
18 | }
19 | },
20 | "IIS Express": {
21 | "commandName": "IISExpress",
22 | "launchBrowser": true,
23 | "environmentVariables": {
24 | "ASPNETCORE_ENVIRONMENT": "Development"
25 | }
26 | }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/RazorComponentTagHelpers.Web.csproj:
--------------------------------------------------------------------------------
1 |
5 |
38 |
--------------------------------------------------------------------------------
/Views/CardSampleComponent.cs:
--------------------------------------------------------------------------------
1 | using Microsoft.AspNetCore.Razor.TagHelpers;
2 | using TechGems.RazorComponentTagHelpers;
3 |
4 | namespace RazorComponentTagHelpers.Views;
5 |
6 | [HtmlTargetElement("card-sample")]
7 | public class CardSampleComponent : RazorComponentTagHelper
8 | {
9 | public CardSampleComponent() : base("~/Views/CardSample.cshtml")
10 | {
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/Views/HelloWorld.cshtml:
--------------------------------------------------------------------------------
1 | @using RazorComponentTagHelpers.Views;
2 | @model HelloWorldComponent
3 |
4 | Hello world!
5 |
--------------------------------------------------------------------------------
/Views/HelloWorldComponent.cs:
--------------------------------------------------------------------------------
1 | using Microsoft.AspNetCore.Razor.TagHelpers;
2 | using TechGems.RazorComponentTagHelpers;
3 |
4 | namespace RazorComponentTagHelpers.Views;
5 |
6 | [HtmlTargetElement("hello-world")]
7 | public class HelloWorldComponent : RazorComponentTagHelper
8 | {
9 | public HelloWorldComponent() : base("~/Views/HelloWorld.cshtml")
10 | {
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/Views/ParametersWithChildren.cshtml:
--------------------------------------------------------------------------------
1 | @using RazorComponentTagHelpers.Views;
2 | @model ParametersWithChildrenComponent
3 |
4 | @Model.Sample
5 |
6 |
6 | @if (Model.IsSlotContentNullOrEmpty("cardHeader"))
7 | {
8 |
15 | slot1 Fallback
9 | } 10 | else 11 | { 12 | @Model.RenderSlot("cardHeader") 13 | } 14 |
16 |
17 | @if (Model.IsChildContentNullOrEmpty)
18 | {
19 | @: Child Content Fallback here
20 | }
21 | else
22 | {
23 | @Model.ChildContent
24 | }
25 |
26 |
27 |
37 |
7 | @if (Model.IsChildContentNullOrEmpty)
8 | {
9 |
--------------------------------------------------------------------------------
/Views/ParametersWithChildrenComponent.cs:
--------------------------------------------------------------------------------
1 | using Microsoft.AspNetCore.Razor.TagHelpers;
2 | using TechGems.RazorComponentTagHelpers;
3 |
4 | namespace RazorComponentTagHelpers.Views;
5 |
6 | [HtmlTargetElement("parameters-children")]
7 | public class ParametersWithChildrenComponent : RazorComponentTagHelper
8 | {
9 | public ParametersWithChildrenComponent() : base("~/Views/ParametersWithChildren.cshtml")
10 | {
11 | }
12 |
13 | [HtmlAttributeName("sample")]
14 | public string Sample { get; set; } = string.Empty;
15 | }
16 |
--------------------------------------------------------------------------------
/Views/SimpleParameters.cshtml:
--------------------------------------------------------------------------------
1 | @using RazorComponentTagHelpers.Views;
2 | @model SimpleParametersComponent
3 |
4 | @Model.Sample
--------------------------------------------------------------------------------
/Views/SimpleParametersComponent.cs:
--------------------------------------------------------------------------------
1 | using Microsoft.AspNetCore.Razor.TagHelpers;
2 | using TechGems.RazorComponentTagHelpers;
3 |
4 |
5 | namespace RazorComponentTagHelpers.Views;
6 |
7 | [HtmlTargetElement("simple-parameters")]
8 | public class SimpleParametersComponent : RazorComponentTagHelper
9 | {
10 | public SimpleParametersComponent() : base("~/Views/SimpleParameters.cshtml")
11 | {
12 | }
13 |
14 | [HtmlAttributeName("sample")]
15 | public string Sample { get; set; } = string.Empty;
16 |
17 | }
18 |
--------------------------------------------------------------------------------
/appsettings.Development.json:
--------------------------------------------------------------------------------
1 | {
2 | "DetailedErrors": true,
3 | "Logging": {
4 | "LogLevel": {
5 | "Default": "Information",
6 | "Microsoft.AspNetCore": "Warning"
7 | }
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/appsettings.json:
--------------------------------------------------------------------------------
1 | {
2 | "Logging": {
3 | "LogLevel": {
4 | "Default": "Information",
5 | "Microsoft.AspNetCore": "Warning"
6 | }
7 | },
8 | "AllowedHosts": "*"
9 | }
10 |
--------------------------------------------------------------------------------
/docs/.hugo_build.lock:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techgems/razor-component-tag-helpers/ea38ac9ec0627bb309ddf84643c3f92644c937ee/docs/.hugo_build.lock
--------------------------------------------------------------------------------
/docs/archetypes/default.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "{{ replace .Name "-" " " | title }}"
3 | date: {{ .Date }}
4 | draft: true
5 | ---
6 |
7 |
--------------------------------------------------------------------------------
/docs/archetypes/docs.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "{{ replace .TranslationBaseName "-" " " | title }}"
3 | date: {{ .Date }}
4 | draft: false
5 | weight: 100
6 | ---
7 |
8 | Lorem markdownum aequalis strigis. Saetigeri iubeas, vultu huic alvum nondum
9 | de obside ut laniavit arbor palmis, cum quin. Rupes vetat videndo, armigerae
10 | crimen habet Priamum nec.
11 |
--------------------------------------------------------------------------------
/docs/config.toml:
--------------------------------------------------------------------------------
1 | baseURL = "/"
2 | themesDir = "themes"
3 | theme = "hugo-whisper-theme"
4 | languageCode = 'en-us'
5 | title = 'Razor Component Tag Helpers'
6 |
7 | pygmentsCodeFences = true
8 | pygmentsCodefencesGuessSyntax = true
9 | pygmentsUseClasses = true
10 |
11 | summaryLength = 30
12 |
13 | [[menu.main]]
14 | name = "Home"
15 | url = "/"
16 | weight = 1
17 |
18 | [[menu.main]]
19 | name = "Docs"
20 | url = "/docs/"
21 | weight = 2
22 |
23 | [params]
24 | google_analytics_id=""
25 | homepage_button_link = '/docs'
26 | homepage_button_text = 'Go to Documentation'
27 | homepage_intro = 'Razor Component Tag Helpers is a minimalistic ASP.NET Core library that allows you to write UI components while maintaining compatibility with Razor Pages and MVC.'
28 |
29 | ## You can enable to add anchor links to header elements
30 | enable_anchor_link = true
31 |
32 | [params.homepage_meta_tags]
33 | meta_description = "Razor Component Tag Helpers is an extension upon ASP.NET Core Tag Helpers to allow proper component-like UI composition without any external dependencies."
34 | meta_og_title = "Razor Component Tag Helpers - TechGems"
35 | meta_og_type = "website"
36 | meta_og_url = "https://tag-helper-components.techgems.net"
37 | meta_og_image = "https://raw.githubusercontent.com/JugglerX/hugo-whisper-theme/master/images/tn.png"
38 | meta_og_description = "Hugo Whisper is a documentation theme built with Hugo."
39 |
40 | [params.logo]
41 | mobile = "/images/logo-rcth-mobile.svg"
42 | standard = "/images/logo-rcth.svg"
--------------------------------------------------------------------------------
/docs/content/_index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Razor Component Tag Helpers'
3 | date: 2022-09-28T15:14:39+10:00
4 | ---
5 |
6 | Razor Component Tag Helpers is a minimalistic ASP.NET Core library that allows you to write UI components while maintaining compatibility with Razor Pages and MVC.
7 |
--------------------------------------------------------------------------------
/docs/content/docs/_index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Overview'
3 | date: 2022-09-28T15:14:39+10:00
4 | weight: 1
5 | ---
6 |
7 | ## Razor Component Tag Helpers
8 |
9 | Razor Component Tag Helpers is a minimalistic ASP.NET Core library that allows you to write UI components while maintaining compatibility with Razor Pages and MVC. With this library you can create your own component-like tag helpers using Razor syntax that receive and render child elements effortlessly.
10 |
11 | If you wish to see a functional application of this library in a dashboard template, please look at [this](https://github.com/techgems/dotnet-6-custom-db-identity) repository.
12 |
13 | ## What is the use case of this library?
14 |
15 | This library will work for you if you're working on an MVC or Razor Pages only project and you wish to have better UI composition. It can be of help both in modernizing and organizing older projects as well as starting new ones where using a single page application framework is considered unnecessary due to lack of heavy UI interactions or simply familiarity with the MVC pattern.
16 |
17 | While Blazor is a great alternative, it is a dependency that relies either on a SignalR connection or a Web Assembly packaged application that is very heavy to download. If your use case doesn't need strong UI interactions but you still want some way of writing components, then this is a good way to do so.
18 |
19 | It should be noted that you can easily add bits of UI interaction where needed with a low JS approach, but there are more details on that in [Advanced Usage](/docs/advanced-usage).
20 |
21 | ## Doesn't using Blazor inside MVC make this obsolete?
22 |
23 | No, it doesn't. Nor does it make obsolete partial views or view components for that matter. Blazor components can be rendered in normal MVC or Razor pages, but they do not support tag helpers, which makes their sinergize poorly with an MVC approach. There are also circumstances in which you might not want or need all the functionality and power of Blazor.
24 |
25 | Blazor is an awesome project, but as with all things in tech, there are tradeoffs you have to consider. If all you need is UI encapsulation in MVC or Razor pages, then using Razor Tag Helpers will let you get the same benefits with zero additional dependencies and no overhead.
26 |
27 | Additionally, ASP.NET Core is very customizable in the approaches you have for building a server. You could easily justify having one MVC page use Blazor WASM for a complex rich UI piece and have the rest of the app which is just forms use MVC with Razor Tag Helpers.
28 |
29 | You can find a more detailed dissertation about pros and cons of different approaches to UI composition [here](https://techgems.net/posts/2022/2022-09-10-ui-composition-in-asp-net-core/).
--------------------------------------------------------------------------------
/docs/content/docs/basic-usage/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Basic Usage'
3 | date: 2022-09-28T19:27:37+10:00
4 | weight: 3
5 | ---
6 |
7 | Razor Component Tag Helpers is used by inheriting the base class `RazorComponentTagHelper`. This class itself inherits from `TagHelperBase` which is necessary for any class to be a tag helper.
8 |
9 | In code a simple example looks like this:
10 |
11 | ```csharp
12 | using Microsoft.AspNetCore.Razor.TagHelpers;
13 | using TechGems.RazorComponentTagHelpers;
14 |
15 | namespace Sample.Views;
16 |
17 | [HtmlTargetElement("hello-world")]
18 | public class HelloWorldComponent : RazorComponentTagHelper
19 | {
20 | public HelloWorldComponent()
21 | {
22 | }
23 | }
24 | ```
25 |
26 | This will immediately and with no additional configuration search and render it's corresponding View in `Views/TagHelpers/HelloWorldComponent/Default.cshtml`. If it's not found an error will be thrown.
27 |
28 | It is possible to override the default view route by specifying the route to the razor view of your choosing in the base constructor, like this:
29 |
30 | ```csharp
31 | using Microsoft.AspNetCore.Razor.TagHelpers;
32 | using TechGems.RazorComponentTagHelpers;
33 |
34 | namespace Sample.Views;
35 |
36 | [HtmlTargetElement("hello-world")]
37 | public class HelloWorldComponent : RazorComponentTagHelper
38 | {
39 | public HelloWorldComponent() : base("~/Views/HelloWorld.cshtml")
40 | {
41 | }
42 | }
43 | ```
44 |
45 | It's important to note that your razor template will be rendered as a partial that by default will receive the class `HelloWorldComponent` as it's view model. This is instrumental to be able to receive parameters and render child content like you would be able to do in any other tag helper.
46 |
47 | In this example we will expect both one parameter and some child content.
48 |
49 | ```csharp
50 | using Microsoft.AspNetCore.Razor.TagHelpers;
51 | using TechGems.RazorComponentTagHelpers;
52 |
53 | namespace Sample.Views;
54 |
55 | [HtmlTargetElement("parameters-children")]
56 | public class ParametersWithChildrenComponent : RazorComponentTagHelper
57 | {
58 | public ParametersWithChildrenComponent() : base("~/Views/ParametersWithChildren.cshtml")
59 | {
60 | }
61 |
62 | [HtmlAttributeName("sample")]
63 | public string Sample { get; set; } = string.Empty;
64 | }
65 | ```
66 |
67 | The html in the view would look something like this:
68 |
69 | ```html
70 | @model Sample.Views.ParametersWithChildrenComponent
71 |
72 | @Model.Sample
73 |
74 | This is the fallback.
10 | } 11 | else 12 | { 13 | @Model.ChildContent 14 | } 15 |
75 | @Model.ChildContent
76 |
77 | ```
78 |
79 | and you'd be able to invoke it in your code like this:
80 |
81 | ```html
82 | Child html
84 | - `s. The `::before` pseudo-element generates an element
26 | // *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
27 | //
28 | // To trick IE into suppressing the underline, we give the pseudo-element an
29 | // underline and then immediately remove it.
30 | + .breadcrumb-item:hover::before {
31 | text-decoration: underline;
32 | }
33 | // stylelint-disable-next-line no-duplicate-selectors
34 | + .breadcrumb-item:hover::before {
35 | text-decoration: none;
36 | }
37 |
38 | &.active {
39 | color: $breadcrumb-active-color;
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/docs/themes/hugo-whisper-theme/assets/scss/bootstrap/_buttons.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable selector-no-qualifying-type
2 |
3 | //
4 | // Base styles
5 | //
6 |
7 | .btn {
8 | display: inline-block;
9 | font-family: $btn-font-family;
10 | font-weight: $btn-font-weight;
11 | color: $body-color;
12 | text-align: center;
13 | vertical-align: middle;
14 | user-select: none;
15 | background-color: transparent;
16 | border: $btn-border-width solid transparent;
17 | @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
18 | @include transition($btn-transition);
19 |
20 | @include hover {
21 | color: $body-color;
22 | text-decoration: none;
23 | }
24 |
25 | &:focus,
26 | &.focus {
27 | outline: 0;
28 | box-shadow: $btn-focus-box-shadow;
29 | }
30 |
31 | // Disabled comes first so active can properly restyle
32 | &.disabled,
33 | &:disabled {
34 | opacity: $btn-disabled-opacity;
35 | @include box-shadow(none);
36 | }
37 |
38 | &:not(:disabled):not(.disabled):active,
39 | &:not(:disabled):not(.disabled).active {
40 | @include box-shadow($btn-active-box-shadow);
41 |
42 | &:focus {
43 | @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
44 | }
45 | }
46 | }
47 |
48 | // Future-proof disabling of clicks on `` elements
49 | a.btn.disabled,
50 | fieldset:disabled a.btn {
51 | pointer-events: none;
52 | }
53 |
54 |
55 | //
56 | // Alternate buttons
57 | //
58 |
59 | @each $color, $value in $theme-colors {
60 | .btn-#{$color} {
61 | @include button-variant($value, $value);
62 | }
63 | }
64 |
65 | @each $color, $value in $theme-colors {
66 | .btn-outline-#{$color} {
67 | @include button-outline-variant($value);
68 | }
69 | }
70 |
71 |
72 | //
73 | // Link buttons
74 | //
75 |
76 | // Make a button look and behave like a link
77 | .btn-link {
78 | font-weight: $font-weight-normal;
79 | color: $link-color;
80 | text-decoration: $link-decoration;
81 |
82 | @include hover {
83 | color: $link-hover-color;
84 | text-decoration: $link-hover-decoration;
85 | }
86 |
87 | &:focus,
88 | &.focus {
89 | text-decoration: $link-hover-decoration;
90 | box-shadow: none;
91 | }
92 |
93 | &:disabled,
94 | &.disabled {
95 | color: $btn-link-disabled-color;
96 | pointer-events: none;
97 | }
98 |
99 | // No need for an active state here
100 | }
101 |
102 |
103 | //
104 | // Button Sizes
105 | //
106 |
107 | .btn-lg {
108 | @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
109 | }
110 |
111 | .btn-sm {
112 | @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
113 | }
114 |
115 |
116 | //
117 | // Block button
118 | //
119 |
120 | .btn-block {
121 | display: block;
122 | width: 100%;
123 |
124 | // Vertically space out multiple block buttons
125 | + .btn-block {
126 | margin-top: $btn-block-spacing-y;
127 | }
128 | }
129 |
130 | // Specificity overrides
131 | input[type="submit"],
132 | input[type="reset"],
133 | input[type="button"] {
134 | &.btn-block {
135 | width: 100%;
136 | }
137 | }
138 |
--------------------------------------------------------------------------------
/docs/themes/hugo-whisper-theme/assets/scss/bootstrap/_close.scss:
--------------------------------------------------------------------------------
1 | .close {
2 | float: right;
3 | @include font-size($close-font-size);
4 | font-weight: $close-font-weight;
5 | line-height: 1;
6 | color: $close-color;
7 | text-shadow: $close-text-shadow;
8 | opacity: .5;
9 |
10 | // Override 's hover style
11 | @include hover {
12 | color: $close-color;
13 | text-decoration: none;
14 | }
15 |
16 | &:not(:disabled):not(.disabled) {
17 | @include hover-focus {
18 | opacity: .75;
19 | }
20 | }
21 | }
22 |
23 | // Additional properties for button version
24 | // iOS requires the button element instead of an anchor tag.
25 | // If you want the anchor version, it requires `href="#"`.
26 | // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
27 |
28 | // stylelint-disable-next-line selector-no-qualifying-type
29 | button.close {
30 | padding: 0;
31 | background-color: transparent;
32 | border: 0;
33 | appearance: none;
34 | }
35 |
36 | // Future-proof disabling of clicks on `` elements
37 |
38 | // stylelint-disable-next-line selector-no-qualifying-type
39 | a.close.disabled {
40 | pointer-events: none;
41 | }
42 |
--------------------------------------------------------------------------------
/docs/themes/hugo-whisper-theme/assets/scss/bootstrap/_code.scss:
--------------------------------------------------------------------------------
1 | // Inline code
2 | code {
3 | @include font-size($code-font-size);
4 | color: $code-color;
5 | word-break: break-word;
6 |
7 | // Streamline the style when inside anchors to avoid broken underline and more
8 | a > & {
9 | color: inherit;
10 | }
11 | }
12 |
13 | // User input typically entered via keyboard
14 | kbd {
15 | padding: $kbd-padding-y $kbd-padding-x;
16 | @include font-size($kbd-font-size);
17 | color: $kbd-color;
18 | background-color: $kbd-bg;
19 | @include border-radius($border-radius-sm);
20 | @include box-shadow($kbd-box-shadow);
21 |
22 | kbd {
23 | padding: 0;
24 | @include font-size(100%);
25 | font-weight: $nested-kbd-font-weight;
26 | @include box-shadow(none);
27 | }
28 | }
29 |
30 | // Blocks of code
31 | pre {
32 | display: block;
33 | @include font-size($code-font-size);
34 | color: $pre-color;
35 |
36 | // Account for some code outputs that place code tags in pre tags
37 | code {
38 | @include font-size(inherit);
39 | color: inherit;
40 | word-break: normal;
41 | }
42 | }
43 |
44 | // Enable scrollable blocks of code
45 | .pre-scrollable {
46 | max-height: $pre-scrollable-max-height;
47 | overflow-y: scroll;
48 | }
49 |
--------------------------------------------------------------------------------
/docs/themes/hugo-whisper-theme/assets/scss/bootstrap/_functions.scss:
--------------------------------------------------------------------------------
1 | // Bootstrap functions
2 | //
3 | // Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
4 |
5 | // Ascending
6 | // Used to evaluate Sass maps like our grid breakpoints.
7 | @mixin _assert-ascending($map, $map-name) {
8 | $prev-key: null;
9 | $prev-num: null;
10 | @each $key, $num in $map {
11 | @if $prev-num == null or unit($num) == "%" {
12 | // Do nothing
13 | } @else if not comparable($prev-num, $num) {
14 | @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
15 | } @else if $prev-num >= $num {
16 | @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
17 | }
18 | $prev-key: $key;
19 | $prev-num: $num;
20 | }
21 | }
22 |
23 | // Starts at zero
24 | // Used to ensure the min-width of the lowest breakpoint starts at 0.
25 | @mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
26 | $values: map-values($map);
27 | $first-value: nth($values, 1);
28 | @if $first-value != 0 {
29 | @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
30 | }
31 | }
32 |
33 | // Replace `$search` with `$replace` in `$string`
34 | // Used on our SVG icon backgrounds for custom forms.
35 | //
36 | // @author Hugo Giraudel
37 | // @param {String} $string - Initial string
38 | // @param {String} $search - Substring to replace
39 | // @param {String} $replace ('') - New value
40 | // @return {String} - Updated string
41 | @function str-replace($string, $search, $replace: "") {
42 | $index: str-index($string, $search);
43 |
44 | @if $index {
45 | @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
46 | }
47 |
48 | @return $string;
49 | }
50 |
51 | // Color contrast
52 | @function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
53 | $r: red($color);
54 | $g: green($color);
55 | $b: blue($color);
56 |
57 | $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
58 |
59 | @if ($yiq >= $yiq-contrasted-threshold) {
60 | @return $dark;
61 | } @else {
62 | @return $light;
63 | }
64 | }
65 |
66 | // Retrieve color Sass maps
67 | @function color($key: "blue") {
68 | @return map-get($colors, $key);
69 | }
70 |
71 | @function theme-color($key: "primary") {
72 | @return map-get($theme-colors, $key);
73 | }
74 |
75 | @function gray($key: "100") {
76 | @return map-get($grays, $key);
77 | }
78 |
79 | // Request a theme color level
80 | @function theme-color-level($color-name: "primary", $level: 0) {
81 | $color: theme-color($color-name);
82 | $color-base: if($level > 0, $black, $white);
83 | $level: abs($level);
84 |
85 | @return mix($color-base, $color, $level * $theme-color-interval);
86 | }
87 |
--------------------------------------------------------------------------------
/docs/themes/hugo-whisper-theme/assets/scss/bootstrap/_grid.scss:
--------------------------------------------------------------------------------
1 | // Container widths
2 | //
3 | // Set the container width, and override it for fixed navbars in media queries.
4 |
5 | @if $enable-grid-classes {
6 | .container {
7 | @include make-container();
8 | @include make-container-max-widths();
9 | }
10 | }
11 |
12 | // Fluid container
13 | //
14 | // Utilizes the mixin meant for fixed width containers, but with 100% width for
15 | // fluid, full width layouts.
16 |
17 | @if $enable-grid-classes {
18 | .container-fluid {
19 | @include make-container();
20 | }
21 | }
22 |
23 | // Row
24 | //
25 | // Rows contain and clear the floats of your columns.
26 |
27 | @if $enable-grid-classes {
28 | .row {
29 | @include make-row();
30 | }
31 |
32 | // Remove the negative margin from default .row, then the horizontal padding
33 | // from all immediate children columns (to prevent runaway style inheritance).
34 | .no-gutters {
35 | margin-right: 0;
36 | margin-left: 0;
37 |
38 | > .col,
39 | > [class*="col-"] {
40 | padding-right: 0;
41 | padding-left: 0;
42 | }
43 | }
44 | }
45 |
46 | // Columns
47 | //
48 | // Common styles for small and large grid columns
49 |
50 | @if $enable-grid-classes {
51 | @include make-grid-columns();
52 | }
53 |
--------------------------------------------------------------------------------
/docs/themes/hugo-whisper-theme/assets/scss/bootstrap/_images.scss:
--------------------------------------------------------------------------------
1 | // Responsive images (ensure images don't scale beyond their parents)
2 | //
3 | // This is purposefully opt-in via an explicit class rather than being the default for all `