Dadido3/D3vugu-components
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
cd35a61dc8
D3vugu-components/page-colors.vugu
David Vogel 114a7d893c Add input field and a lot of other fixes 
- Add input field and general data binding
- Rename SymbolSlot to IconSlot
- Remove d3c-color-accent
- Update icons page
- Add input example page
- Update button to support highlighting
- Update navigation entry to support highlighting
- Add d3c-button-only-icon to button and let sidebar use that
- Use d3c-button-transparent in sidebar
- Add focus indicator to buttons
- Rename CSS color variables and change definition of some
- Let pagination use input:Button
- Add some padding to the inline code component
2023-05-25 15:59:13 +02:00

131 lines
5.4 KiB
Plaintext
Raw Blame History

<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-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>
<div class="flex-container">
<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>
</div>
<div class="flex-container">
<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>
</div>
<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>
<div class="flex-container">
<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>
</div>
<div class="flex-container">
<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>
</div>
<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>
<div class="flex-container" 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>
</div>
<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>
<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: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;
}
.flex-container > * {
margin: 0;
}
</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>
Reference in New Issue View Git Blame Copy Permalink