Skip to content

GitLab

Commit 93dba3fa authored by Zéfling's avatar Zéfling 🎨
Browse files

Fix demo for Blink Browsers

parent ce8dfa4f
Hide whitespace changes
Inline Side-by-side
Showing with 119 additions and 114 deletions
src/app/app.component.html
View file @ 93dba3fa
......@@ -5,131 +5,136 @@
<form>
<fieldset class="source-fieldset">
<legend>Base</legend>
<label>Color: <input type="text"
[(value)]="baseColor"
(change)="baseColor = $event.target.value"
placeholder="black, #000, rgb(0,0,0), hsl(0,0%,0%)"
title="black, #000, rgb(0,0,0), hsl(0,0%,0%)"></label>
<div class="source"
*ngIf="baseColor">
<div [style.background-color]="baseColor">&nbsp;</div>
<div>
<label>Color: <input type="text"
[(value)]="baseColor"
(change)="baseColor = $event.target.value"
placeholder="black, #000, rgb(0,0,0), hsl(0,0%,0%)"
title="black, #000, rgb(0,0,0), hsl(0,0%,0%)"></label>
<div class="source"
*ngIf="baseColor">
<div [style.background-color]="baseColor">&nbsp;</div>
</div>
</div>
</fieldset>
<fieldset class="additionnal">
<legend>Additionnal</legend>
<div class="luminosity">
<label> <span>Luminosity [-1; 1]:</span><input type="number"
min="-1.000"
max="1.000"
step="0.001"
[value]="luminosity"
(change)="luminosity = $event.target.value"></label>
</div>
<div class="red">
<label><span>Red [-256; 256]:</span><input type="number"
min="-256"
max="256"
step="1"
[value]="red"
(change)="red = $event.target.value"></label>
</div>
<div class="green">
<label><span>Green [-256; 256]:</span><input type="number"
min="-255"
max="256"
step="1"
[value]="green"
(change)="green = $event.target.value"></label>
</div>
<div class="blue">
<label><span>Blue [-256; 256]:</span><input type="number"
min="-255"
max="256"
step="1"
[value]="blue"
(change)="blue = $event.target.value"></label>
</div>
<div class="hue">
<label><span>Hue [-360; 360]°:</span><input type="number"
max="-360"
max="360"
step="1"
[value]="hue"
(change)="hue = $event.target.value"></label>
</div>
<div class="saturation">
<label><span>Saluration [-100; 100]%:</span><input type="number"
min="-100"
max="100"
step="1"
[value]="saturation"
(change)="saturation = $event.target.value"></label>
</div>
<div class="value">
<label><span>Value [-100; 100]%:</span><input type="number"
min="-100"
max="100"
step="1"
[value]="value"
(change)="value = $event.target.value"></label>
</div>
<div class="maskColor">
<label><span>Mask color:</span><input type="text"
[value]="maskColor"
(change)="maskColor = $event.target.value"
placeholder="black, #000, rgb(0,0,0), hsl(0,0%,0%)"
title="black, #000, rgb(0,0,0), hsl(0,0%,0%)"></label>
</div>
<div class="maskOpacity">
<label><span>+ Mask opacity [0; 1]:</span><input type="number"
min="0"
max="1"
step="0.001"
[value]="maskOpacity"
(change)="maskOpacity = $event.target.value"></label>
</div>
<div class="alpha">
<label><span>Alpha [-1; 1]:</span><input type="number"
min="-1.000"
max="1.000"
step="0.001"
[value]="alpha"
(change)="alpha = $event.target.value"></label>
</div>
<div class="button">
<button type="button"
(click)="change()">Change</button>
<div>
<div class="luminosity">
<label> <span>Luminosity [-1; 1]:</span><input type="number"
min="-1.000"
max="1.000"
step="0.001"
[value]="luminosity"
(change)="luminosity = $event.target.value"></label>
</div>
<div class="red">
<label><span>Red [-256; 256]:</span><input type="number"
min="-256"
max="256"
step="1"
[value]="red"
(change)="red = $event.target.value"></label>
</div>
<div class="green">
<label><span>Green [-256; 256]:</span><input type="number"
min="-255"
max="256"
step="1"
[value]="green"
(change)="green = $event.target.value"></label>
</div>
<div class="blue">
<label><span>Blue [-256; 256]:</span><input type="number"
min="-255"
max="256"
step="1"
[value]="blue"
(change)="blue = $event.target.value"></label>
</div>
<div class="hue">
<label><span>Hue [-360; 360]°:</span><input type="number"
max="-360"
max="360"
step="1"
[value]="hue"
(change)="hue = $event.target.value"></label>
</div>
<div class="saturation">
<label><span>Saluration [-100; 100]%:</span><input type="number"
min="-100"
max="100"
step="1"
[value]="saturation"
(change)="saturation = $event.target.value"></label>
</div>
<div class="value">
<label><span>Value [-100; 100]%:</span><input type="number"
min="-100"
max="100"
step="1"
[value]="value"
(change)="value = $event.target.value"></label>
</div>
<div class="maskColor">
<label><span>Mask color:</span><input type="text"
[value]="maskColor"
(change)="maskColor = $event.target.value"
placeholder="black, #000, rgb(0,0,0), hsl(0,0%,0%)"
title="black, #000, rgb(0,0,0), hsl(0,0%,0%)"></label>
</div>
<div class="maskOpacity">
<label><span>+ Mask opacity [0; 1]:</span><input type="number"
min="0"
max="1"
step="0.001"
[value]="maskOpacity"
(change)="maskOpacity = $event.target.value"></label>
</div>
<div class="alpha">
<label><span>Alpha [-1; 1]:</span><input type="number"
min="-1.000"
max="1.000"
step="0.001"
[value]="alpha"
(change)="alpha = $event.target.value"></label>
</div>
<div class="button">
<button type="button"
(click)="change()">Change</button>
</div>
</div>
</fieldset>
</form>
<aside>
<fieldset class="result-fieldset">
<legend>Result</legend>
<div class="result">
<div [style.background-image]="gradient">
&nbsp;
</div>
</div>
<div class="value-result">
<span>Hexa:</span>
<textarea readonly>{{colorHex || '--'}}</textarea>
<div>
<div class="result">
<div [style.background-color]="colorHex">&nbsp;</div>
<div [style.background-image]="gradient">
&nbsp;
</div>
</div>
</div>
<div class="value-result">
<span>RGB:</span>
<textarea readonly>{{colorRgb || '--'}}</textarea>
<div class="result">
<div [style.background-color]="colorRgb">&nbsp;</div>
<div class="value-result">
<span>Hexa:</span>
<textarea readonly>{{colorHex || '--'}}</textarea>
<div class="result">
<div [style.background-color]="colorHex">&nbsp;</div>
</div>
</div>
</div>
<div class="value-result">
<span>HSL:</span>
<textarea readonly>{{colorHsl || '--'}}</textarea>
<div class="result">
<div [style.background-color]="colorHsl">&nbsp;</div>
<div class="value-result">
<span>RGB:</span>
<textarea readonly>{{colorRgb || '--'}}</textarea>
<div class="result">
<div [style.background-color]="colorRgb">&nbsp;</div>
</div>
</div>
<div class="value-result">
<span>HSL:</span>
<textarea readonly>{{colorHsl || '--'}}</textarea>
<div class="result">
<div [style.background-color]="colorHsl">&nbsp;</div>
</div>
</div>
</div>
</fieldset>
......
src/app/app.component.scss
View file @ 93dba3fa
......@@ -30,7 +30,7 @@ aside {
padding: 0 15px
}
.additionnal {
.additionnal > div {
display: grid;
width: 100%;
grid-template:
......@@ -106,7 +106,7 @@ button {
}
}
.source-fieldset {
.source-fieldset > div {
display: flex;
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment