Skip to content

Commit 53c61af

Browse files
mythzmythz
committed
Update blazor styles
1 parent 10da493 commit 53c61af

6 files changed

Lines changed: 48 additions & 6 deletions

File tree

‎ServiceStack.Blazor/src/ServiceStack.Blazor/dist/tailwind.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ServiceStack.Blazor/src/ServiceStack.Blazor/dist/tailwind.html‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -943,7 +943,7 @@ <h2 class=@HeadingClass id="slide-over-title">@Title</h2>
943943
</span>
944944
</button>
945945
<script>
946-
window.toggleDarkMode = (function () {
946+
window.toggleDarkMode = (function() {
947947
let isDark = localStorage.getItem('color-scheme') === 'dark'
948948
const html = document.documentElement
949949
function renderDarkMode() {
@@ -1757,6 +1757,20 @@ <h3 class="text-base font-medium text-gray-900 dark:text-gray-100">
17571757
@ChildContent
17581758
</button>
17591759
}
1760+
@code {
1761+
public static string BaseClass { get; set; } = "inline-flex justify-center rounded-md border border-transparent py-2 px-4 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-black";
1762+
public static string GetStyleClass(ButtonStyle style) => style switch
1763+
{
1764+
ButtonStyle.Blue => "text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",
1765+
ButtonStyle.Purple => "text-white bg-purple-600 hover:bg-purple-700 focus:ring-purple-500 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800",
1766+
ButtonStyle.Red => "focus:ring-red-500 text-white bg-red-600 hover:bg-red-700 focus:ring-red-500 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-500",
1767+
ButtonStyle.Green => "focus:ring-green-300 text-white bg-green-600 hover:bg-green-700 focus:ring-green-500 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-500",
1768+
ButtonStyle.Sky => "focus:ring-sky-300 text-white bg-sky-600 hover:bg-sky-700 focus:ring-sky-500 dark:bg-sky-600 dark:hover:bg-sky-700 dark:focus:ring-sky-500",
1769+
ButtonStyle.Cyan => "focus:ring-cyan-300 text-white bg-cyan-600 hover:bg-cyan-700 focus:ring-cyan-500 dark:bg-cyan-600 dark:hover:bg-cyan-700 dark:focus:ring-cyan-500",
1770+
_ => "focus:ring-2 focus:ring-offset-2 text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800"
1771+
};
1772+
public static string Classes(ButtonStyle style) => BaseClass + " " + GetStyleClass(style);
1773+
}
17601774
@inherits UiComponentBase
17611775
@if (!string.IsNullOrEmpty(href))
17621776
{

‎ServiceStack.Blazor/tests/ServiceStack.Blazor.Server.Tests/Server/wwwroot/tailwind/ServiceStack.Blazor.html‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -943,7 +943,7 @@ <h2 class=@HeadingClass id="slide-over-title">@Title</h2>
943943
</span>
944944
</button>
945945
<script>
946-
window.toggleDarkMode = (function () {
946+
window.toggleDarkMode = (function() {
947947
let isDark = localStorage.getItem('color-scheme') === 'dark'
948948
const html = document.documentElement
949949
function renderDarkMode() {
@@ -1757,6 +1757,20 @@ <h3 class="text-base font-medium text-gray-900 dark:text-gray-100">
17571757
@ChildContent
17581758
</button>
17591759
}
1760+
@code {
1761+
public static string BaseClass { get; set; } = "inline-flex justify-center rounded-md border border-transparent py-2 px-4 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-black";
1762+
public static string GetStyleClass(ButtonStyle style) => style switch
1763+
{
1764+
ButtonStyle.Blue => "text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",
1765+
ButtonStyle.Purple => "text-white bg-purple-600 hover:bg-purple-700 focus:ring-purple-500 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800",
1766+
ButtonStyle.Red => "focus:ring-red-500 text-white bg-red-600 hover:bg-red-700 focus:ring-red-500 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-500",
1767+
ButtonStyle.Green => "focus:ring-green-300 text-white bg-green-600 hover:bg-green-700 focus:ring-green-500 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-500",
1768+
ButtonStyle.Sky => "focus:ring-sky-300 text-white bg-sky-600 hover:bg-sky-700 focus:ring-sky-500 dark:bg-sky-600 dark:hover:bg-sky-700 dark:focus:ring-sky-500",
1769+
ButtonStyle.Cyan => "focus:ring-cyan-300 text-white bg-cyan-600 hover:bg-cyan-700 focus:ring-cyan-500 dark:bg-cyan-600 dark:hover:bg-cyan-700 dark:focus:ring-cyan-500",
1770+
_ => "focus:ring-2 focus:ring-offset-2 text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800"
1771+
};
1772+
public static string Classes(ButtonStyle style) => BaseClass + " " + GetStyleClass(style);
1773+
}
17601774
@inherits UiComponentBase
17611775
@if (!string.IsNullOrEmpty(href))
17621776
{

‎ServiceStack.Blazor/tests/UI.Gallery/Gallery.Server/wwwroot/tailwind/ServiceStack.Blazor.html‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -943,7 +943,7 @@ <h2 class=@HeadingClass id="slide-over-title">@Title</h2>
943943
</span>
944944
</button>
945945
<script>
946-
window.toggleDarkMode = (function () {
946+
window.toggleDarkMode = (function() {
947947
let isDark = localStorage.getItem('color-scheme') === 'dark'
948948
const html = document.documentElement
949949
function renderDarkMode() {
@@ -1757,6 +1757,20 @@ <h3 class="text-base font-medium text-gray-900 dark:text-gray-100">
17571757
@ChildContent
17581758
</button>
17591759
}
1760+
@code {
1761+
public static string BaseClass { get; set; } = "inline-flex justify-center rounded-md border border-transparent py-2 px-4 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-black";
1762+
public static string GetStyleClass(ButtonStyle style) => style switch
1763+
{
1764+
ButtonStyle.Blue => "text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",
1765+
ButtonStyle.Purple => "text-white bg-purple-600 hover:bg-purple-700 focus:ring-purple-500 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800",
1766+
ButtonStyle.Red => "focus:ring-red-500 text-white bg-red-600 hover:bg-red-700 focus:ring-red-500 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-500",
1767+
ButtonStyle.Green => "focus:ring-green-300 text-white bg-green-600 hover:bg-green-700 focus:ring-green-500 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-500",
1768+
ButtonStyle.Sky => "focus:ring-sky-300 text-white bg-sky-600 hover:bg-sky-700 focus:ring-sky-500 dark:bg-sky-600 dark:hover:bg-sky-700 dark:focus:ring-sky-500",
1769+
ButtonStyle.Cyan => "focus:ring-cyan-300 text-white bg-cyan-600 hover:bg-cyan-700 focus:ring-cyan-500 dark:bg-cyan-600 dark:hover:bg-cyan-700 dark:focus:ring-cyan-500",
1770+
_ => "focus:ring-2 focus:ring-offset-2 text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800"
1771+
};
1772+
public static string Classes(ButtonStyle style) => BaseClass + " " + GetStyleClass(style);
1773+
}
17601774
@inherits UiComponentBase
17611775
@if (!string.IsNullOrEmpty(href))
17621776
{

‎ServiceStack.Blazor/tests/UI.Gallery/Gallery.Wasm/Gallery.Wasm.Client/wwwroot/css/app.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ServiceStack/src/ServiceStack/css/ui.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)