mirror of
https://github.com/go-gitea/gitea.git
synced 2026-10-22 19:13:57 +09:00
254e18107e
Backport #39861 by @silverwind Hovering a button in a primary or red button group showed a grey frame, because the generic group hover border applied to colored groups too. Green groups had no colors at all. Colored groups now let the hover background fill the border, and green groups get the same colors as primary and red. The devtest page shows all three. <img width="569" height="304" alt="Hovered buttons in uncolored, primary, red and green button groups, before and after" src="https://github.com/user-attachments/assets/e0fb6b16-f1f1-459b-9848-9386cd9453c9" /> Extracted from https://github.com/go-gitea/gitea/pull/38404 Co-authored-by: silverwind <me@silverwind.io>
162 lines
6.9 KiB
Handlebars
162 lines
6.9 KiB
Handlebars
{{template "devtest/devtest-header"}}
|
|
<div class="page-content devtest ui container">
|
|
<div>
|
|
<h1>Link</h1>
|
|
<div>
|
|
<a href="#">normal</a>
|
|
<a class="muted" href="#">muted</a>
|
|
<a class="suppressed" href="#">suppressed</a>
|
|
<a class="silenced" href="#">silenced</a>
|
|
</div>
|
|
<h1>Button</h1>
|
|
".ui.button" styles:
|
|
<div class="flex-text-block tw-gap-4">
|
|
<label class="gt-checkbox"><input type="radio" name="button-style-size" value="">(normal)</label>
|
|
<label class="gt-checkbox"><input type="radio" name="button-style-size" value="small">small</label>
|
|
<label class="gt-checkbox"><input type="radio" name="button-style-size" value="tiny">tiny</label>
|
|
<label class="gt-checkbox"><input type="radio" name="button-style-size" value="mini">mini</label>
|
|
</div>
|
|
<div class="flex-text-block tw-gap-4">
|
|
<label class="gt-checkbox"><input type="checkbox" name="button-style-compact" value="compact">compact</label>
|
|
<label class="gt-checkbox"><input type="checkbox" name="button-state-disabled" value="disabled">disabled</label>
|
|
</div>
|
|
<div id="devtest-button-samples">
|
|
<ul class="button-sample-groups">
|
|
<li class="sample-group">
|
|
<h2>General purpose:</h2>
|
|
<button type="button" class="ui button">Unclassed</button>
|
|
<button type="button" class="ui basic button">Basic Unclassed</button>
|
|
<button type="button" class="ui primary button">Primary</button>
|
|
<button type="button" class="ui basic primary button">Basic Primary</button>
|
|
</li>
|
|
<li class="sample-group">
|
|
<h2>Recommended colors:</h2>
|
|
<button type="button" class="ui red button">Red</button>
|
|
<button type="button" class="ui basic red button">Basic Red</button>
|
|
<button type="button" class="ui green button">Green</button>
|
|
<button type="button" class="ui basic green button">Basic Green</button>
|
|
</li>
|
|
<li class="sample-group">
|
|
<h2>Inline / Plain:</h2>
|
|
<div class="tw-my-1">
|
|
<button type="button" class="btn tw-p-2">Plain button</button>
|
|
<button type="button" class="btn interact-fg tw-p-2">Plain button with interact fg</button>
|
|
<button type="button" class="btn interact-bg tw-p-2">Plain button with interact bg</button>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h1>Buttons</h1>
|
|
<div class="ui buttons"><button type="button" class="ui button">1</button><button type="button" class="ui button">2</button><button type="button" class="ui button">3</button></div>
|
|
<div class="ui buttons"><button type="button" class="ui button active">1</button><button type="button" class="ui button">2</button><button type="button" class="ui button">3</button></div>
|
|
<div class="ui buttons"><button type="button" class="ui button">1</button><button type="button" class="ui button active">2</button><button type="button" class="ui button">3</button></div>
|
|
<div class="ui buttons"><button type="button" class="ui button">1</button><button type="button" class="ui button">2</button><button type="button" class="ui button active">3</button></div>
|
|
<div class="ui primary buttons"><button type="button" class="ui button">1</button><button type="button" class="ui button">2</button><button type="button" class="ui button">3</button></div>
|
|
<div class="ui red buttons"><button type="button" class="ui button">1</button><button type="button" class="ui button">2</button><button type="button" class="ui button">3</button></div>
|
|
<div class="ui green buttons"><button type="button" class="ui button">1</button><button type="button" class="ui button">2</button><button type="button" class="ui button">3</button></div>
|
|
</div>
|
|
|
|
<div>
|
|
<h1>Tooltip</h1>
|
|
<div><span data-tooltip-content="test tooltip">text with tooltip</span></div>
|
|
<div><span data-tooltip-content="test tooltip" data-tooltip-interactive="true">text with interactive tooltip</span></div>
|
|
</div>
|
|
|
|
<div>
|
|
<h1>Loading</h1>
|
|
<div class="is-loading loading-icon-2px tw-border tw-border-secondary tw-py-1"><span>loading ...</span></div>
|
|
<div class="is-loading tw-border tw-border-secondary tw-py-4">
|
|
<p>loading ...</p>
|
|
<p>loading ...</p>
|
|
<p>loading ...</p>
|
|
<p>loading ...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h1><overflow-menu></h1>
|
|
<overflow-menu class="ui secondary pointing tabular borderless menu">
|
|
<div class="overflow-menu-items">
|
|
<a class="active item">item</a>
|
|
<a class="item">item 1</a>
|
|
<a class="item">item 2</a>
|
|
<a class="item">item 3</a>
|
|
<a class="item">item 4</a>
|
|
<a class="item">item 5</a>
|
|
<a class="item">item 6</a>
|
|
<a class="item">item 7</a>
|
|
<a class="item">item 8</a>
|
|
<a class="item">item 9</a>
|
|
<a class="item">item 10</a>
|
|
<a class="item">item 11</a>
|
|
<a class="item">item 12</a>
|
|
<a class="item">item 13</a>
|
|
<a class="item">item 14</a>
|
|
<a class="item">item 15</a>
|
|
<a class="item">item 16</a>
|
|
<a class="item">item 17</a>
|
|
<a class="item">item 18</a>
|
|
</div>
|
|
</overflow-menu>
|
|
</div>
|
|
|
|
<div>
|
|
<h1>LocaleNumber</h1>
|
|
<div>{{ctx.Locale.PrettyNumber 1}}</div>
|
|
<div>{{ctx.Locale.PrettyNumber 12}}</div>
|
|
<div>{{ctx.Locale.PrettyNumber 123}}</div>
|
|
<div>{{ctx.Locale.PrettyNumber 1234}}</div>
|
|
<div>{{ctx.Locale.PrettyNumber 12345}}</div>
|
|
<div>{{ctx.Locale.PrettyNumber 123456}}</div>
|
|
<div>{{ctx.Locale.PrettyNumber 1234567}}</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h1>SVG alignment</h1>
|
|
|
|
<h2>Text with SVG</h2>
|
|
<div class="flex-text-block">{{svg "octicon-alert"}} {{svg "octicon-x"}} text (block)</div>
|
|
<div><div class="flex-text-inline">{{svg "octicon-alert"}} {{svg "octicon-x"}} text</div> (inline)</div>
|
|
|
|
<div class="flex-text-block">{{svg "octicon-alert"}} flex item with very very very very very very very very long content</div>
|
|
|
|
<div class="flex-items-block">
|
|
<div class="item">{{svg "octicon-alert"}} flex every line</div>
|
|
<div class="item">{{svg "octicon-alert"}} flex every item</div>
|
|
<div class="item">{{svg "octicon-alert"}} flex item with very very very very very very very very long content</div>
|
|
</div>
|
|
|
|
<h2>Button with SVG</h2>
|
|
<div>
|
|
<button type="button" class="ui red button">{{svg "octicon-alert" 24}} {{svg "octicon-x" 24}} text</button>
|
|
<div class="ui labeled button">
|
|
<button type="button" class="ui basic button">labeled button</button>
|
|
<a class="ui basic label">123</a>
|
|
</div>
|
|
<button type="button" class="ui button">{{svg "octicon-x" 16}} button with very very very very very very very very long text</button>
|
|
</div>
|
|
|
|
<h2>Input with SVG</h2>
|
|
<div>
|
|
<div class="ui icon search input">
|
|
<i class="icon">{{svg "octicon-search"}}</i>
|
|
<input type="text" placeholder="place holder">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h1>ComboMarkdownEditor</h1>
|
|
{{template "shared/combomarkdowneditor" dict "MarkdownEditorContext" (ctx.MiscUtils.MarkdownEditorGeneral nil)}}
|
|
</div>
|
|
|
|
<h1>Tailwind CSS Demo</h1>
|
|
<div>
|
|
<button type="button" class="{{if true}}tw-bg-red{{end}} tw-p-5 tw-border tw-rounded hover:tw-bg-blue active:tw-bg-yellow">Button</button>
|
|
</div>
|
|
</div>
|
|
{{template "devtest/devtest-footer"}}
|