@sencha/cmd-linux-64
Version:
Productivity and performance optimization tool for building applications with Sencha Ext JS
357 lines (312 loc) • 10.4 kB
HTML
<!--
~ Copyright (c) 2012-2015. Sencha Inc.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fashion Console</title>
<style>
* {
box-sizing: border-box;
}
#container {
margin: 20px;
display: table;
}
h1 {
color: #2B3799;
font-weight: bold;
font-size: 20px;
}
.column {
width: 25%;
padding: 10px;
display: table-cell;
}
p {
height: 50px;
}
textarea {
display: block;
height: 600px;
margin-bottom: 10px;
width: 100%;
background-color: #F1FAFF;
font-size: 14px;
}
button {
-webkit-appearance: none;
border: 1px solid #2B3799;
background-color: #4D5A99;
color: white;
}
em {
color: #394E99;
font-weight: bold;
}
</style>
<script src="../node_modules/traceur/bin/traceur.js"></script>
<!--<script src="../node_modules/systemjs/node_modules/es6-module-loader/dist/es6-module-loader.src.js"></script>-->
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<!--<script src="../dist/fashion.js" type="text/javascript" charset="utf-8"></script>-->
<script>
var Fashion;
System.config({
map: {
fs: '../src/export/Base.js'
}
});
System.import('../index.js').then(function(fashion){
Fashion = fashion;
var examplesSelect = document.getElementById('examples'),
time1, time2, time3,
builder = new Fashion.Builder();
onExampleChange = function() {
if (examplesSelect.value == 'empty') {
document.getElementById('fashion-css').value = '';
}
else {
document.getElementById('fashion-css').value = document.getElementById('example-' + examplesSelect.value).value;
}
convertfcss();
},
convertfcss = function() {
var fcss = document.getElementById('fashion-css').value,
beforeConvert = (new Date()).getTime(),
el = document.getElementById('time1');
document.getElementById('fashion-js').value = builder.getContext().convert(fcss);
// document.getElementById('fashion-js').value = JSON.stringify(Fashion.Parser.parse(fcss), undefined, 4);
time1 = (new Date()).getTime() - beforeConvert;
el.innerHTML = time1 + 'ms';
//convertfjs();
},
convertfjs = function() {
var fjs = document.getElementById('fashion-js').value,
beforeConvert = (new Date()).getTime(),
el1 = document.getElementById('time2'),
el2 = document.getElementById('time3'),
context = builder.getContext();
context.compile(fjs);
var func = context.getFunc(),
vars = builder.createVarsScope({}),
css = func(context.runtime, vars, context.preprocessor.getDynamicsMap());
css.getText(function (content, exportFn) {
content = content.join('');
document.getElementById('compiled-css').value = content;
time2 = (new Date()).getTime() - beforeConvert;
time3 = time1 + time2;
el1.innerHTML = time2 + 'ms';
el2.innerHTML = time3 + 'ms';
if (exportFn) {
document.getElementById('compiled-export-fn').value = exportFn;
}
else {
document.getElementById('compiled-export-fn').value = '';
}
}, false);
};
examplesSelect.addEventListener('change', onExampleChange);
examplesSelect.value = 'empty';
onExampleChange();
document.getElementById('convert-js').addEventListener('click', convertfcss);
document.getElementById('convert-css').addEventListener('click', convertfjs);
});
</script>
</head>
<body>
<div id="container">
<div class="column" id="column1">
<h1>Fashion CSS</h1>
<p>A SASS-like CSS implementation. It supports mixins, functions, variables, math, if/else statements and much more.</p>
<textarea id="fashion-css"></textarea>
<button id="convert-js">Generate Fashion JS</button>
Examples:
<select id="examples">
<option value="empty">Empty</option>
<option value="nested">Nested</option>
<option value="scope">Scope</option>
<option value="mixins">Mixins</option>
<option value="functions">Functions</option>
<option value="operations">Operations</option>
<option value="colors">Colors</option>
</select>
<p>Time to convert to Fashion JS: <em id="time1">n/a</em></p>
</div>
<div class="column" id="column2">
<h1>Fashion JS</h1>
<p>An in-memory representation of your CSS allowing you to dynamically change variables and recompile your css blazing fast.</p>
<textarea id="fashion-js"></textarea>
<button id="convert-css">Compile to CSS</button>
<button id="convert-json">Compile to JSON</button>
<p>Time to compile to CSS: <em id="time2">n/a</em></p>
</div>
<div class="column" id="column3">
<h1>Compiled CSS</h1>
<p>The resulting CSS.</p>
<textarea id="compiled-css"></textarea>
<p>Total time SCSS to CSS: <em id="time3">n/a</em></p>
</div>
<div class="column" id="column4">
<h1>CSS Variable Setter Fn</h1>
<p>Runtime javascript code to update css variables generated from the original sass code.</p>
<textarea id="compiled-export-fn"></textarea>
</div>
</div>
<textarea id="example-nested" style="display: none">
.x-toolbar {
border-color: green;
.x-button {
border-color: blue;
}
background-color: blue;
div.x-button {
background-color: green;
button.x-inner-button,
&.over {
background-color: yellow;
}
}
}
</textarea>
<textarea id="example-scope" style="display: none">
$background-color: green;
$background-color: red !default;
@if $background-color == red {
.x-toolbar {
background-color: $background-color;
}
}
@else {
.x-panel {
background-color: $background-color;
}
$background-color: blue;
}
.x-header {
background-color: $background-color;
}
</textarea>
<textarea id="example-mixins" style="display: none">
$background-color: green;
@mixin toolbar-ui {
$border-color: blue;
border-color: green;
.x-toolbar {
background-color: $background-color;
border-color: $border-color;
}
}
@mixin panel-ui (
$background-color: $background-color,
$border-color: blue
) {
.x-panel {
background-color: $background-color;
border-color: $border-color;
}
@include toolbar-ui;
}
.x-viewport {
@include panel-ui($border-color: orange);
}
</textarea>
<textarea id="example-functions" style="display: none">
@function min($value1, $value2) {
@if $value1 > $value2 {
@return $value2;
}
@else if $value2 > $value1 {
@return $value1;
}
@return $value1;
}
@function max($value1, $value2) {
@if $value1 > $value2 {
@return $value1;
}
@else if $value2 > $value1 {
@return $value2;
}
@return $value1;
}
@function top($box) {
@return box($box, 1);
}
@function right($box) {
@return box($box, 2);
}
@function bottom($box) {
@return box($box, 3);
}
@function left($box) {
@return box($box, 4);
}
@function vertical($box) {
@return top($box) + bottom($box);
}
@function horizontal($box) {
@return left($box) + right($box);
}
@function boxmax($box) {
@return max(max(top($box), right($box)), max(bottom($box), left($box)));
}
@function boxmin($box) {
@return min(min(top($box), right($box)), min(bottom($box), left($box)));
}
body {
height: boxmax(10px 15px 20px 25px); //25px
width: boxmin(25px 10px 20px 15px); //10px
}
</textarea>
<textarea id="example-operations" style="display: none">
$var1: 10px 5px 5px 10px;
$var2: 10px;
$var3: $var2 + 5; // 15px
$var4: $var3 + nth($var1, 1); // 25px
$var5: $var4 * 2; // 50px
$var6: $var2 / 2; // 5px
$var7: $var6 - 10px; // -5px
$var8: ($var6 + $var3) * $var2; // 200px
$var9: 5 * $var2 - 5 * $var3 / 2 + 10; // 22.5px
.test {
var1: $var1;
var2: $var2;
var3: $var3;
var4: $var4;
var5: $var5;
var6: $var6;
var7: $var7;
var8: $var8;
var9: $var9;
}
@if (($var7 < $var6) and ($var5 > $var2)) or ($var4 == 25px) {
body {
height: $var6 + $var4; // 30px;
}
}
</textarea>
<textarea id="example-colors" style="display: none">
$hue: hue(#cc3); //60deg
$saturation: saturation(#cc3); //60%
$lightness: lightness(#cc3); //50%
$color1: saturate(#cc3, 10%); //#d9d926
$color2: desaturate(#cc3, 10%); //#bfbf40
$color3: lighten(#cc3, 10%); //#d6d65c
$color4: darken(#cc3, 10%); //#a3a329
$color5: red + blue;
$color6: green + rgba(10, 255, 50, 0.5);
body {
hue: $hue;
saturation: $saturation;
lightness: $lightness;
color1: $color1;
color2: $color2;
color3: $color3;
color4: $color4;
color5: $color5;
color6: $color6;
}
</textarea>
</body>
</html>