You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
5.7 KiB
Plaintext
130 lines
5.7 KiB
Plaintext
<div>
|
|
<layout:Container>
|
|
<h2>Signal colors</h2>
|
|
<p>Colors can be set via special color classes:</p>
|
|
<ul>
|
|
<li><view:CodeInline>d3c-color-layer-0</view:CodeInline> This is the default color scheme.</li>
|
|
<li><view:CodeInline>d3c-color-layer-1</view:CodeInline></li>
|
|
<li><view:CodeInline>d3c-color-layer-2</view:CodeInline></li>
|
|
<li><view:CodeInline>d3c-color-accent</view:CodeInline></li>
|
|
<li><view:CodeInline>d3c-color-success</view:CodeInline></li>
|
|
<li><view:CodeInline>d3c-color-success-faded</view:CodeInline></li>
|
|
<li><view:CodeInline>d3c-color-attention</view:CodeInline></li>
|
|
<li><view:CodeInline>d3c-color-attention-faded</view:CodeInline></li>
|
|
<li><view:CodeInline>d3c-color-caution</view:CodeInline></li>
|
|
<li><view:CodeInline>d3c-color-caution-faded</view:CodeInline></li>
|
|
<li><view:CodeInline>d3c-color-critical</view:CodeInline></li>
|
|
<li><view:CodeInline>d3c-color-critical-faded</view:CodeInline></li>
|
|
</ul>
|
|
|
|
<h2>Buttons</h2>
|
|
<view:Code>
|
|
<pre vg-content='"<input:Button class=\"d3c-color-success\">\n" +
|
|
" <vg-slot name=\"IconSlot\"><icons:LPlus></icons:LPlus></vg-slot>\n" +
|
|
" <vg-slot name=\"DefaultSlot\">Successful action</vg-slot>\n" +
|
|
"</input:Button>"' style="margin: 0;"></pre>
|
|
</view:Code>
|
|
<layout:ContainerHorizontal>
|
|
<input:Button class="d3c-color-success">
|
|
<vg-slot name="IconSlot"><icons:LPlus></icons:LPlus></vg-slot>
|
|
<vg-slot name="DefaultSlot">Successful action</vg-slot>
|
|
</input:Button>
|
|
<input:Button class="d3c-color-attention">
|
|
<vg-slot name="IconSlot"><icons:LGlobe></icons:LGlobe></vg-slot>
|
|
<vg-slot name="DefaultSlot">Highlighted action</vg-slot>
|
|
</input:Button>
|
|
<input:Button class="d3c-color-caution">
|
|
<vg-slot name="IconSlot"><icons:LInfoCircle></icons:LInfoCircle></vg-slot>
|
|
<vg-slot name="DefaultSlot">Press with caution</vg-slot>
|
|
</input:Button>
|
|
<input:Button class="d3c-color-critical">
|
|
<vg-slot name="IconSlot"><icons:LWarning></icons:LWarning></vg-slot>
|
|
<vg-slot name="DefaultSlot">Dangerous action</vg-slot>
|
|
</input:Button>
|
|
</layout:ContainerHorizontal>
|
|
<layout:ContainerHorizontal>
|
|
<input:Button class="d3c-color-success-faded">
|
|
<vg-slot name="IconSlot"><icons:LPlus></icons:LPlus></vg-slot>
|
|
<vg-slot name="DefaultSlot">Successful action</vg-slot>
|
|
</input:Button>
|
|
<input:Button class="d3c-color-attention-faded">
|
|
<vg-slot name="IconSlot"><icons:LGlobe></icons:LGlobe></vg-slot>
|
|
<vg-slot name="DefaultSlot">Highlighted action</vg-slot>
|
|
</input:Button>
|
|
<input:Button class="d3c-color-caution-faded">
|
|
<vg-slot name="IconSlot"><icons:LInfoCircle></icons:LInfoCircle></vg-slot>
|
|
<vg-slot name="DefaultSlot">Press with caution</vg-slot>
|
|
</input:Button>
|
|
<input:Button class="d3c-color-critical-faded">
|
|
<vg-slot name="IconSlot"><icons:LWarning></icons:LWarning></vg-slot>
|
|
<vg-slot name="DefaultSlot">Dangerous action</vg-slot>
|
|
</input:Button>
|
|
</layout:ContainerHorizontal>
|
|
|
|
<h2>Tags</h2>
|
|
<view:Code>
|
|
<pre vg-content='"<view:Tag class=\"d3c-color-success\">This was a success</view:Tag>"' style="margin: 0;"></pre>
|
|
</view:Code>
|
|
<layout:ContainerHorizontal>
|
|
<view:Tag class="d3c-color-success">This was a success</view:Tag>
|
|
<view:Tag class="d3c-color-attention">Attention needed</view:Tag>
|
|
<view:Tag class="d3c-color-caution">Warning</view:Tag>
|
|
<view:Tag class="d3c-color-critical">Something went wrong</view:Tag>
|
|
</layout:ContainerHorizontal>
|
|
<layout:ContainerHorizontal>
|
|
<view:Tag class="d3c-color-success-faded">This was a success</view:Tag>
|
|
<view:Tag class="d3c-color-attention-faded">Attention needed</view:Tag>
|
|
<view:Tag class="d3c-color-caution-faded">Warning</view:Tag>
|
|
<view:Tag class="d3c-color-critical-faded">Something went wrong</view:Tag>
|
|
</layout:ContainerHorizontal>
|
|
|
|
<h2>Icons</h2>
|
|
<p>Icons will use the text color by default, if you need to change their stroke/fill coloring, use the <view:CodeInline>d3c-icon-use-color</view:CodeInline> class.</p>
|
|
<view:Code>
|
|
<pre vg-content='"<icons:LInfoCircle class=\"d3c-color-attention d3c-icon-use-color\"></icons:LInfoCircle>"' style="margin: 0;"></pre>
|
|
</view:Code>
|
|
<layout:ContainerHorizontal style="font-size: 2em;">
|
|
<icons:LInfoCircle class="d3c-color-attention d3c-icon-use-color"></icons:LInfoCircle>
|
|
<icons:LWarning class="d3c-color-critical d3c-icon-use-color"></icons:LWarning>
|
|
</layout:ContainerHorizontal>
|
|
|
|
<h2>Containers</h2>
|
|
<layout:LayerContainer class="d3c-color-layer-1">
|
|
<span>This container uses the <view:CodeInline class="d3c-color-layer-2">d3c-color-layer-1</view:CodeInline> class. All child elements inherit the color scheme.</span>
|
|
<layout:ContainerHorizontal>
|
|
<input:Button>
|
|
<vg-slot name="IconSlot"><icons:LPlus></icons:LPlus></vg-slot>
|
|
<vg-slot name="DefaultSlot">Does inherit color</vg-slot>
|
|
</input:Button>
|
|
<input:Button class="d3c-color-layer-0">
|
|
<vg-slot name="IconSlot"><icons:LPlus></icons:LPlus></vg-slot>
|
|
<vg-slot name="DefaultSlot">Doesn't inherit color</vg-slot>
|
|
</input:Button>
|
|
</layout:ContainerHorizontal>
|
|
</layout:LayerContainer>
|
|
<layout:LayerContainer class="d3c-color-critical-faded">
|
|
<icons:LWarning></icons:LWarning> <span>Something bad happened!</span>
|
|
</layout:LayerContainer>
|
|
</layout:Container>
|
|
</div>
|
|
|
|
<style>
|
|
.flex-container {
|
|
margin: 0.5em 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5em;
|
|
}
|
|
</style>
|
|
|
|
<script type="application/x-go">
|
|
import (
|
|
"git.d3nexus.de/Dadido3/D3vugu-components/components/layout"
|
|
"git.d3nexus.de/Dadido3/D3vugu-components/components/view"
|
|
"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
|
|
"git.d3nexus.de/Dadido3/D3vugu-components/icons"
|
|
)
|
|
|
|
type PageColors struct {}
|
|
</script>
|