-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
65 lines (54 loc) · 11.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en" ng-app="scfc">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sass Colour Function Calculator</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="styles/main.css?v=3" rel="stylesheet">
</head>
<body>
<header>
<h1>Sass Colour Function Calculator</h1>
<h2>A tool for calculating the SASS colour function required to get from one colour to another.</h2>
</header>
<main class="wrapper" ng-controller="ScfcController">
<section class="colours-container">
<div style="background:{{scfc.colorA}}">
<div>
<label>Original Colour</label>
<input type="text" ng-model="scfc.colorA" ng-model-options="{ getterSetter: true }">
</div>
</div>
<div style="background:{{scfc.colorB}};">
<div>
<label>Target Colour</label>
<input type="text" ng-model="scfc.colorB" ng-model-options="{ getterSetter: true }">
</div>
</div>
</section>
<div class="result-container">
<pre class="result" ng-bind="scfc.adjustmentString()" onfocus="this.select()"></pre>
</div>
</main>
<footer>
<p>
Created by <address><a href="https://www.razor.co.uk">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1812.7 737.4" enable-background="new 0 0 1812.7 737.4" preserveAspectRatio="xMidYMid meet" class="rj-logo">
<g id="logotype">
<path d="M426.8 391.8l18.5-52.2h124.6l99.8-36.4-109.8-299.6h-39l-150.5 408.7 56.4-20.5zm114.2-321.7l80.6 229.5h-162.4l81.8-229.5zM646.2 340.6h4l34.7 98h49.3l-41.5-113.1zM380.6 426.1l-4.6 12.5h49.5l10.7-30.5zM1002.6 51.6l-105.1 171 66.5-24.6 91-148.9v-1.3l-19.2-38.2h-241.8v.3l21 41.7zM850.7 402.6l100-163.6-64.6 21.1-86.1 140v1.4l21.7 43.1h246.9l-21.2-42zM1164.9 122.9c2-10.9 5-20.4 9-28.3 4.1-8.1 9.6-15.7 16.5-22.6 20.3-20.3 45.4-30.5 75.1-30.5 24.7 0 46.2 7.1 64.5 21.2l46.5-17c-1-1-1.9-2-3-3-13.4-13.4-29.1-23.9-47-31.4s-38.3-11.3-61-11.3c-22.8 0-43.2 3.8-61.3 11.3-18.1 7.5-33.9 18-47.3 31.4-10.2 10.2-18.2 20.6-24.1 31.1-5.9 10.6-10.3 22.6-13.1 36-2 9.3-3.4 19.7-4.3 31.2l49.5-18.1zM1425.8 109.9c-1.5-7-3.4-13.7-5.8-19.9l-43.9 14.2c2.1 5.9 3.8 12.4 5.1 19.5 2 11.2 3.4 24.6 4 40.3.6 15.7.9 34.7.9 57.1s-.3 41.4-.9 57.1c-.6 15.7-1.9 29.1-4 40.3-2 11.2-5.1 20.9-9.2 29-4.1 8.1-9.6 15.7-16.5 22.6-20.4 20.4-45.4 30.5-75.1 30.5-29.7 0-54.7-10.2-75.1-30.5-6.9-6.9-12.4-14.4-16.5-22.6-4.1-8.1-7.1-17.8-9.2-29-2-11.2-3.4-24.6-4-40.3-.6-15.7-.9-34.7-.9-57.1 0-20.1.2-37.4.7-52.1l-46.9 15.1c-.2 11.3-.3 23.6-.3 36.9 0 24.8.3 46.2.9 64.1.6 17.9 2.3 33.6 5.2 47 2.8 13.4 7.2 25.4 13.1 36 5.9 10.6 13.9 21 24.1 31.1 13.4 13.4 29.2 23.9 47.3 31.4 18.1 7.5 38.5 11.3 61.3 11.3 22.8 0 43.1-3.8 61-11.3 17.9-7.5 33.6-18 47-31.4 10.2-10.2 18.2-20.5 24.1-31.1 5.9-10.6 10.3-22.6 13.1-36 2.8-13.4 4.7-29.1 5.5-47 .8-17.9 1.2-39.3 1.2-64.1 0-24.8-.4-46.2-1.2-64.1-.3-17.9-2.2-33.6-5-47zM1778 202.7c17.5-20.1 26.2-46.1 26.2-77.8 0-18.7-3.2-35.6-9.5-50.7-6.3-15-15.2-27.8-26.5-38.1-11.4-10.4-25-18.3-40.9-23.8-12.8-4.4-26.6-7-41.3-7.9l-127.4 41.2h112.1c25.6 0 46.4 6.6 62.4 19.8 16 13.2 24.1 33.2 24.1 60s-8 46.7-24.1 59.7c-16 13-36.9 19.5-62.4 19.5h-115.7v-158.3l-46 15v377.2h46v-193h103.5l98.1 193h56.2l-103.1-197.1c28-5.6 50.8-18.6 68.3-38.7zM263.6 438.6h37.2l16.4-6-100.2-191.4c28.1-5.7 50.9-18.6 68.4-38.8 17.5-20.2 26.3-46.1 26.3-77.9 0-18.7-3.2-35.6-9.5-50.7-6.3-15.1-15.2-27.8-26.6-38.2-11.4-10.4-25-18.3-40.9-23.8-15.9-5.5-33.2-8.2-51.9-8.2h-166.8v435h46v-193h103.5l98.1 193zm-201.6-393h115.7c25.6 0 46.4 6.6 62.4 19.8 16 13.2 24.1 33.2 24.1 60s-8 46.7-24.1 59.7c-16 13-36.9 19.5-62.4 19.5h-115.7v-159z"></path>
</g>
<g id="strapline">
<path d="M52 560.6v130h-11v-130h-41v-9h94v9h-42zM177 691.6v-58.6c0-9.2-2.2-16.1-6.6-21-4.4-4.8-10.9-7.3-19.6-7.3-8.7 0-15.3 2.4-19.9 7.3-4.6 4.8-6.9 11.8-6.9 21v58.6h-10v-140h10v56.4c7.1-8.3 16.4-12.4 28-12.4 11 0 19.6 3.1 25.8 9.3 6.2 6.2 9.3 14.9 9.3 26.1v60.6h-10.1zM223.3 645.6c0 12.2 2.6 21.4 7.7 27.8 5.2 6.3 12.8 9.5 23 9.5 5.6 0 10.4-.9 14.2-2.6 3.9-1.8 7.8-4.7 11.9-8.7l7.5 5.9c-2.4 2.4-4.7 4.4-7.2 6.3-2.4 1.8-5 3.4-7.6 4.6-2.7 1.2-5.6 2.2-8.7 2.7-3.1.6-6.7.9-10.6.9-13.1 0-23-4.1-29.9-12.4s-10.3-20.3-10.3-36.1c0-15.4 3.3-27.4 10-35.8 6.7-8.4 16-12.7 27.9-12.7 11.9 0 21.2 4 27.9 12.1 6.7 8 10 19.4 10 34v4.5h-65.8zm55.5-8c-.1-2.2-.3-4.1-.4-5.8-.1-1.6-.3-3.1-.5-4.4-.2-1.3-.5-2.5-.9-3.7-.4-1.2-.9-2.5-1.6-3.9-2.1-5-5.3-8.9-9.7-11.7-4.4-2.8-9.3-4.2-14.8-4.2s-10.4 1.4-14.7 4.2c-4.3 2.8-7.6 6.7-9.8 11.7-.7 1.4-1.2 2.7-1.6 3.9-.4 1.2-.7 2.4-.9 3.7-.2 1.3-.4 2.8-.5 4.4-.1 1.6-.3 3.6-.4 5.8h55.8zM401 560.6v130h-11v-130h-42v-9h94v9h-41zM451.3 645.6c0 12.2 2.6 21.4 7.7 27.8 5.2 6.3 12.8 9.5 23 9.5 5.6 0 10.4-.9 14.2-2.6 3.9-1.8 7.8-4.7 11.9-8.7l7.5 5.9c-2.4 2.4-4.7 4.4-7.2 6.3-2.4 1.8-5 3.4-7.6 4.6-2.7 1.2-5.6 2.2-8.7 2.7-3.1.6-6.7.9-10.6.9-13.1 0-23-4.1-29.9-12.4s-10.3-20.3-10.3-36.1c0-15.4 3.3-27.4 10-35.8 6.7-8.4 16-12.7 27.9-12.7 11.9 0 21.2 4 27.9 12.1 6.7 8 10 19.4 10 34v4.5h-65.8zm55.4-8c-.1-2.2-.3-4.1-.4-5.8-.1-1.6-.3-3.1-.5-4.4-.2-1.3-.5-2.5-.9-3.7-.4-1.2-.9-2.5-1.6-3.9-2.1-5-5.3-8.9-9.7-11.7-4.4-2.8-9.3-4.2-14.8-4.2s-10.4 1.4-14.7 4.2c-4.3 2.8-7.6 6.7-9.8 11.7-.7 1.4-1.2 2.7-1.6 3.9-.4 1.2-.7 2.4-.9 3.7-.2 1.3-.4 2.8-.5 4.4-.1 1.6-.3 3.6-.4 5.8h55.8zM611.4 677.6c-5 5.6-9.8 9.4-14.5 11.5s-10.3 3-16.7 3c-6.5 0-12.4-1.1-17.5-3.3-5.1-2.2-9.4-5.4-13-9.6-3.6-4.2-6.3-9.3-8.2-15.3-1.9-6-2.8-12.7-2.8-20.2s.9-14.2 2.8-20.2 4.6-11.1 8.2-15.3c3.6-4.2 7.9-7.4 13-9.6 5.1-2.2 10.9-3.3 17.5-3.3 6.4 0 12 1 16.7 3 4.7 2 9.5 5.9 14.5 11.5l-6.9 6.3c-4.1-4.4-7.9-7.6-11.5-9.3-3.6-1.8-7.9-2.6-12.8-2.6-11.1 0-19.5 4.2-25.1 12.6-2.4 3.4-4 7.2-5 11.3-1 4.1-1.5 9.4-1.5 15.8s.5 11.7 1.5 15.8c1 4.1 2.6 7.9 5 11.3 5.6 8.4 14 12.6 25.1 12.6 5 0 9.2-.9 12.8-2.6 3.6-1.8 7.4-4.9 11.5-9.3l6.9 5.9zM699 691.6v-58.6c0-9.2-2.2-16.1-6.6-21-4.4-4.8-10.9-7.3-19.6-7.3s-15.3 2.4-19.9 7.3c-4.6 4.8-6.9 11.8-6.9 21v58.6h-10v-140h10v56.4c7.1-8.3 16.4-12.4 28-12.4 11 0 19.6 3.1 25.8 9.3 6.2 6.2 9.3 14.9 9.3 26.1v60.6h-10.1zM804 691.6v-58.6c0-9.2-2.2-16.1-6.6-21-4.4-4.8-10.9-7.3-19.6-7.3s-15.3 2.5-19.9 7.4c-4.6 4.9-6.9 11.9-6.9 20.9v58.6h-10v-95h10v11.2c7.1-8.3 16.4-12.4 28-12.4 10.6 0 19 3 25.2 9.1 6.6 6.3 9.8 15.1 9.8 26.4v60.7h-10zM916 643.6c0 6.8-.7 13.6-2.2 20.4-1.4 6.8-4.6 12.7-9.6 17.7-6.9 6.9-15.7 10.4-26.3 10.4-10.6 0-19.4-3.5-26.3-10.4-5-5-8.2-10.9-9.6-17.7-1.4-6.8-2.2-13.6-2.2-20.4 0-6.8.7-13.6 2.2-20.4 1.4-6.8 4.6-12.7 9.6-17.7 6.9-6.9 15.7-10.4 26.3-10.4 10.6 0 19.3 3.5 26.3 10.4 5 5 8.2 10.9 9.6 17.7 1.5 6.8 2.2 13.6 2.2 20.4zm-10 0c0-2.7-.1-5.6-.2-8.4-.1-2.9-.5-5.7-1.1-8.5-.6-2.8-1.4-5.5-2.5-7.9-1.1-2.5-2.6-4.7-4.6-6.7-5.4-5.4-11.9-8-19.6-8-7.7 0-14.3 2.7-19.6 8-2 2-3.5 4.2-4.6 6.7-1.1 2.5-2 5.1-2.5 7.9-.6 2.8-1 5.7-1.1 8.5-.1 2.9-.2 5.7-.2 8.4s.1 5.6.2 8.4c.1 2.9.5 5.7 1.1 8.5.6 2.8 1.4 5.5 2.5 7.9 1.1 2.5 2.6 4.7 4.6 6.7 5.4 5.4 11.9 8 19.6 8 7.7 0 14.2-2.7 19.6-8 2-2 3.5-4.2 4.6-6.7 1.1-2.5 2-5.1 2.5-7.9.6-2.8.9-5.7 1.1-8.5.1-2.8.2-5.6.2-8.4zM965.5 690.6c-7.8 0-13.4-2.3-17-6.8-3.6-4.5-5.4-10.6-5.4-18.2v-114h10v114.2c0 5.5 1 9.5 3 12s5.8 3.8 11.5 3.8h6.5v9h-8.6zM1065.7 643.6c0 6.8-.7 13.6-2.2 20.4-1.4 6.8-4.6 12.7-9.6 17.7-6.9 6.9-15.7 10.4-26.3 10.4-10.6 0-19.4-3.5-26.3-10.4-5-5-8.2-10.9-9.6-17.7-1.4-6.8-2.2-13.6-2.2-20.4 0-6.8.7-13.6 2.2-20.4 1.4-6.8 4.6-12.7 9.6-17.7 6.9-6.9 15.7-10.4 26.3-10.4 10.6 0 19.3 3.5 26.3 10.4 5 5 8.2 10.9 9.6 17.7 1.4 6.8 2.2 13.6 2.2 20.4zm-10 0c0-2.7-.1-5.6-.2-8.4-.1-2.9-.5-5.7-1.1-8.5-.6-2.8-1.4-5.5-2.5-7.9-1.1-2.5-2.6-4.7-4.6-6.7-5.4-5.4-11.9-8-19.6-8-7.7 0-14.3 2.7-19.6 8-2 2-3.5 4.2-4.6 6.7-1.1 2.5-2 5.1-2.5 7.9-.6 2.8-1 5.7-1.1 8.5-.1 2.9-.2 5.7-.2 8.4s.1 5.6.2 8.4c.1 2.9.5 5.7 1.1 8.5.6 2.8 1.4 5.5 2.5 7.9 1.1 2.5 2.6 4.7 4.6 6.7 5.4 5.4 11.9 8 19.6 8 7.7 0 14.2-2.7 19.6-8 2-2 3.5-4.2 4.6-6.7 1.1-2.5 2-5.1 2.5-7.9.6-2.8.9-5.7 1.1-8.5.1-2.8.2-5.6.2-8.4zM1161 696.4c0 5.9-.9 11.3-2.5 16.4-1.7 5-4.2 9.4-7.5 13-3.3 3.7-7.4 6.5-12.2 8.5-4.8 2-10.2 3-16.4 3-3.5 0-6.7-.2-9.4-.7-2.7-.5-5.3-1.2-7.7-2.3-2.4-1-4.7-2.4-7-3.9-2.2-1.6-4.6-3.5-7.1-5.7l6.7-6.7c1.8 1.7 3.6 3.2 5.3 4.5 1.7 1.3 3.5 2.4 5.3 3.2 1.8.8 3.9 1.5 6.1 2 2.2.5 4.8.7 7.8.7 5 0 9.2-.8 12.8-2.5 3.6-1.6 6.6-3.9 8.9-6.9 2.4-2.9 4.1-6.4 5.2-10.4 1.1-4 1.7-8.3 1.7-13v-16.9c-4.2 5.5-8.5 9.1-13 10.8-4.5 1.7-9.5 2.5-15 2.5-5 0-9.4-.8-13.4-2.3-4-1.5-7.2-3.5-9.7-6-4.8-4.8-8.1-10.9-9.7-18.1-1.6-7.3-2.5-14.6-2.5-22.1s.8-14.8 2.5-22.1c1.6-7.3 4.9-13.3 9.7-18.1 2.5-2.5 5.7-4.5 9.7-6 4-1.5 8.5-2.3 13.4-2.3 5.5 0 10.5.9 15 2.5 4.5 1.7 8.9 5.3 13 10.8v-12.2h10v100.3zm-9.8-52.8c0-4.8-.3-9.6-.9-14.4-.6-4.8-1.8-9-3.7-12.7-1.9-3.7-4.6-6.7-8.1-9s-8.2-3.4-13.9-3.4c-5.8 0-10.4 1.1-13.9 3.4s-6.2 5.3-8.1 9c-1.9 3.7-3.1 8-3.7 12.7-.6 4.8-.9 9.6-.9 14.4 0 5 .3 9.8.9 14.5.6 4.7 1.8 8.9 3.7 12.7 1.9 3.7 4.6 6.7 8.1 9s8.2 3.4 13.9 3.4c5.8 0 10.4-1.1 13.9-3.4s6.2-5.3 8.1-9c1.9-3.7 3.1-7.9 3.7-12.7.6-4.7.9-9.5.9-14.5zM1213 716.5c-1.8 5.2-4 8.9-6.5 11-2.3 2.2-5.1 3.8-8.3 4.7-3.2.9-6.4 1.4-9.5 1.4h-4.7v-9h3.7c2.7 0 5-.2 6.7-.7 1.8-.5 3.3-1.2 4.6-2.2 1.3-1 2.4-2.4 3.3-4 .9-1.6 1.8-3.6 2.5-6l7.6-20.9-34.4-94.2h11l28.4 82.6 28.4-82.6h11l-43.8 119.9zM1426.3 691.6h-10.8l-33-121.9-33 121.9h-10.8l-35-140h11.2l29.5 121.7 32.6-121.7h11l32.6 121.7 29.5-121.7h11.2l-35 140zM1541.9 643.6c0 6.8-.7 13.6-2.2 20.4-1.4 6.8-4.6 12.7-9.6 17.7-6.9 6.9-15.7 10.4-26.3 10.4-10.6 0-19.4-3.5-26.3-10.4-5-5-8.2-10.9-9.6-17.7-1.4-6.8-2.2-13.6-2.2-20.4 0-6.8.7-13.6 2.2-20.4 1.4-6.8 4.6-12.7 9.6-17.7 6.9-6.9 15.7-10.4 26.3-10.4 10.6 0 19.3 3.5 26.3 10.4 5 5 8.2 10.9 9.6 17.7 1.5 6.8 2.2 13.6 2.2 20.4zm-10 0c0-2.7-.1-5.6-.2-8.4-.1-2.9-.5-5.7-1.1-8.5-.6-2.8-1.4-5.5-2.5-7.9-1.1-2.5-2.6-4.7-4.6-6.7-5.4-5.4-11.9-8-19.6-8-7.7 0-14.3 2.7-19.6 8-2 2-3.5 4.2-4.6 6.7-1.1 2.5-2 5.1-2.5 7.9-.6 2.8-1 5.7-1.1 8.5-.1 2.9-.2 5.7-.2 8.4s.1 5.6.2 8.4c.1 2.9.5 5.7 1.1 8.5.6 2.8 1.4 5.5 2.5 7.9 1.1 2.5 2.6 4.7 4.6 6.7 5.4 5.4 11.9 8 19.6 8 7.7 0 14.2-2.7 19.6-8 2-2 3.5-4.2 4.6-6.7 1.1-2.5 2-5.1 2.5-7.9.6-2.8.9-5.7 1.1-8.5.1-2.8.2-5.6.2-8.4zM1623.1 611.7c-2.9-2.9-5.6-4.9-8.1-5.9s-5.8-1.6-9.7-1.6c-4.1 0-7.6.8-10.8 2.4-3.1 1.6-5.8 3.7-7.9 6.3-2.2 2.6-3.8 5.7-4.9 9.2-1.1 3.5-1.7 7.1-1.7 10.9v58.5h-10v-95h10v12.6c2.7-4.5 6.6-7.9 11.7-10.2 5-2.4 10.4-3.5 16-3.5 4.6 0 8.7.7 12.3 2 3.6 1.3 7.1 3.7 10.5 7.1l-7.4 7.2zM1709.4 691.6l-32.7-52.2-21.7 25v27.2h-10v-140h10v98.6l47.1-53.6h12.8l-31.3 35.5 38.2 59.5h-12.4zM1804.3 664c0 8.6-3.4 15.5-10.1 20.5-6.7 5-16 7.6-27.8 7.6-8.2 0-15.5-1.1-21.7-3.3-6.2-2.2-11.7-5.6-16.6-10.2l6.9-6.9c7.3 7.7 17.7 11.6 31 11.6 19 0 28.4-6.4 28.4-19.2 0-5-1.4-8.7-4.3-11.2s-7.5-4.1-13.7-4.7l-15.7-1.4c-19-1.6-28.4-9.8-28.4-24.7 0-8.2 3.1-14.8 9.2-19.6 6.1-4.8 14.4-7.3 24.7-7.3 6.7 0 12.8.9 18.4 2.6 5.6 1.8 10.5 4.2 14.7 7.4l-6.7 6.7c-7.3-5.4-16.2-8-26.5-8-7.8 0-13.8 1.6-17.9 4.7-4.1 3.1-6.2 7.6-6.2 13.5 0 5 1.5 8.7 4.6 11.2 3.1 2.5 7.9 4.1 14.6 4.7l15.3 1.4c3.9.4 7.6 1 11 2 3.4.9 6.3 2.3 8.7 4.1 2.4 1.8 4.3 4.2 5.8 7.3 1.6 2.9 2.3 6.7 2.3 11.2z"></path>
</g>
</svg>
</a></address>
</p>
<p>Using <a href="https://github.com/bgrins/TinyColor">tinycolor.js</a> and work by <a href="http://thesassway.com/advanced/how-to-programtically-go-from-one-color-to-another-in-sass">Hugo Giraudel</a></p>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="js/vendor/tinycolor.js"></script>
<script src="js/app.js"></script>
</body>
</html>