Commit 224ceb0a by Torkel Ödegaard

feat(thresholds): updated design for grab handles

parent 89ca15f3
......@@ -19,12 +19,13 @@ export class ThresholdControls {
colorClass = 'warn';
}
return `<div class="alert-handle-wrapper alert-handle-wrapper--T${handleIndex}">
return `
<div class="alert-handle-wrapper alert-handle-wrapper--T${handleIndex}">
<div class="alert-handle-line alert-handle-line--${colorClass}">
</div>
<div class="alert-handle" data-handle-index="${handleIndex}">
<i class="icon-gf icon-gf-${colorClass} alert-icon-${colorClass}"></i>
<span class="alert-handle-value">${valueStr}</span>
<span class="alert-handle-value">${valueStr}<i class="alert-handle-grip"></i></span>
</div>
</div>`;
......
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="32" viewBox="0 0 12 32">
<g id="icomoon-ignore">
</g>
<path d="M0 2h4v4h-4v-4z" fill="#414141"></path>
<path d="M0 10h4v4h-4v-4z" fill="#414141"></path>
<path d="M0 18h4v4h-4v-4z" fill="#414141"></path>
<path d="M0 26h4v4h-4v-4z" fill="#414141"></path>
<path d="M8 2h4v4h-4v-4z" fill="#414141"></path>
<path d="M8 10h4v4h-4v-4z" fill="#414141"></path>
<path d="M8 18h4v4h-4v-4z" fill="#414141"></path>
<path d="M8 26h4v4h-4v-4z" fill="#414141"></path>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="32" viewBox="0 0 12 32">
<g id="icomoon-ignore">
</g>
<path d="M0 2h4v4h-4v-4z" fill="#CCC"></path>
<path d="M0 10h4v4h-4v-4z" fill="#CCC"></path>
<path d="M0 18h4v4h-4v-4z" fill="#CCC"></path>
<path d="M0 26h4v4h-4v-4z" fill="#CCC"></path>
<path d="M8 2h4v4h-4v-4z" fill="#CCC"></path>
<path d="M8 10h4v4h-4v-4z" fill="#CCC"></path>
<path d="M8 18h4v4h-4v-4z" fill="#CCC"></path>
<path d="M8 26h4v4h-4v-4z" fill="#CCC"></path>
</svg>
......@@ -152,8 +152,10 @@ $btn-link-color: $gray-3;
$iconContainerBackground: $black;
$btn-divider-left: $dark-5;
$btn-divider-right: $dark-1;
$btn-divider-left: $dark-4;
$btn-divider-right: $dark-2;
$btn-drag-image: '../img/grab_dark.svg';
// Forms
// -------------------------
......
......@@ -157,8 +157,9 @@ $btn-inverse-text-color: $dark-4;
$btn-link-color: $gray-1;
$btn-divider-left: $dark-5;
$btn-divider-right: $dark-1;
$btn-divider-left: $gray-4;
$btn-divider-right: $gray-7;
$btn-drag-image: '../img/grab_light.svg';
$iconContainerBackground: $white;
......
......@@ -350,6 +350,15 @@
border-left: 1px solid $btn-divider-right;
padding: 0.5rem;
line-height: 2rem;
.alert-handle-grip {
background: url($btn-drag-image) no-repeat 50% 50%;
background-size: 8px;
float: right;
width: 1rem;
height: 2rem;
margin-right: 2px;
}
}
&--T1 {
......
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