reverend/scss-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Playground for stylus

Browse Source
This commit is contained in:
reverend 2021-01-02 20:27:47 +01:00
parent d5f4fb3190
commit 2c2cbf2d79
6 changed files with 170 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/10_Examples/playground/playground.config.json Normal file
View File

@ -0,0 +1 @@
{}

9
components/10_Examples/playground/playground.hbs Normal file
View File

@ -0,0 +1,9 @@
<p class="wred">Red</p>
<p class="button">button</p>
<p class="wred button">css combo</p>
<p class="bluebutton">mixin combo</p>
<p class="field">field</p>
<div class="wurst">
<p class="field">wurst field</p>
</div>

5
components/_preview.hbs
View File

@ -3,15 +3,20 @@
<head> <head>
<meta contentType="text/html; charset=UTF-8"/> <meta contentType="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="{{ path '/rcss.css' }}"> <link rel="stylesheet" href="{{ path '/rcss.css' }}">
<link rel="stylesheet" href="{{ path '/playground.css' }}">
<title>Preview</title> <title>Preview</title>
<style> <style>
.red{ .red{
background-color: firebrick; background-color: firebrick;
margin: -2px;
border: 1px black solid;
} }
.green { .green {
background-color: forestgreen; background-color: forestgreen;
margin: -2px;
border: 1px black solid;
} }
.square { .square {

75
components/playground.styl Normal file
View File

@ -0,0 +1,75 @@
_selector_maps = {}
_catched = {}
throw(id, callback)
if id in _selector_maps
hook = _selector_maps[id]
else
hook = {}
hook[selector()] = callback
_selector_maps[id] = hook
catch(id, params)
if selector() in _catched
_catches = _catched[selector()]
else
_catches = {}
_catches[id] = params
_catched[selector()] = _catches
_generate_hooks()
for catched_selector, config in _catched
for id, parameter in config
if id in _selector_maps
hook = _selector_maps[id]
for thrown_selector, callback in hook
{thrown_selector}{catched_selector}
callback(parameter)
red()
color red
catch('button', green)
catch('field', red)
field()
display inline
padding 10px
border-bottom 2px solid blue
throw('field', @(){
border-bottom 2px solid red
color blue
})
button()
padding 5px
background-color orange
border 1px solid black
display inline
throw('button', @(c){color c})
.bluebutton
red()
button()
.button
button()
.wred
red()
.field
field()
.wurst
.field
field()
red()
.debug
--one _selector_maps
--two _catched
_generate_hooks()

12
package.json
View File

@ -4,15 +4,17 @@
"devDependencies": { "devDependencies": {
"@frctl/fractal": "^1.2.1", "@frctl/fractal": "^1.2.1",
"fractal": "0.0.3", "fractal": "0.0.3",
"sass": "^1.30.0", "sass": "^1.30.0",
"node-sass": "^4.14.1", "node-sass": "^4.14.1",
"sass-loader": "^10.0.5", "sass-loader": "^10.0.5",
"scss-bundle": "^3.1.2" "scss-bundle": "^3.1.2"
}, },
"scripts": { "scripts": {
"sass": "node-sass -w components/rcss.scss -o public/ --recursive", "sass": "sass components/rcss.scss public/rcss.css --watch",
"styleguide": "fractal start --sync", "styleguide": "fractal start --sync",
"stylus": "stylus -w components/* -o public/playground.css",
"suite": "npm run sass & npm run styleguide", "suite": "npm run sass & npm run styleguide",
"bundle": "scss-bundel" "suiteStylus": "npm run stylus & npm run styleguide",
"bundle": "scss-bundel"
} }
} }

73
public/playground.css Normal file
View File

@ -0,0 +1,73 @@
.bluebutton {
color: red;
padding: 5px;
background-color: #ffa500;
border: 1px solid #000;
display: inline;
}
.button {
padding: 5px;
background-color: #ffa500;
border: 1px solid #000;
display: inline;
}
.wred {
color: red;
}
.field {
display: inline;
padding: 10px;
border-bottom: 2px solid #00f;
}
.wurst .field {
display: inline;
padding: 10px;
border-bottom: 2px solid #00f;
color: red;
}
.debug {
--one: {"button":"({\".bluebutton\":\"(anonymous(c))\",\".button\":\"(anonymous(c))\"})","field":"({\".field\":\"(anonymous())\",\".wurst .field\":\"(anonymous())\"})"};
--two: {".bluebutton":"({\"button\":\"(#008000)\",\"field\":\"(red())\"})",".wred":"({\"button\":\"(#008000)\",\"field\":\"(red())\"})",".wurst .field":"({\"button\":\"(#008000)\",\"field\":\"(red())\"})"};
}
.bluebutton.bluebutton {
color: #008000;
}
.button.bluebutton {
color: #008000;
}
.field.bluebutton {
border-bottom: 2px solid red;
color: #00f;
}
.wurst .field.bluebutton {
border-bottom: 2px solid red;
color: #00f;
}
.bluebutton.wred {
color: #008000;
}
.button.wred {
color: #008000;
}
.field.wred {
border-bottom: 2px solid red;
color: #00f;
}
.wurst .field.wred {
border-bottom: 2px solid red;
color: #00f;
}
.bluebutton.wurst .field {
color: #008000;
}
.button.wurst .field {
color: #008000;
}
.field.wurst .field {
border-bottom: 2px solid red;
color: #00f;
}
.wurst .field.wurst .field {
border-bottom: 2px solid red;
color: #00f;
}