This repository has been archived by the owner on May 19, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
compositor.json
90 lines (90 loc) · 13.3 KB
/
compositor.json
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
{
"name": "maliMirkec/csstabs",
"version": "0.1.4",
"libraries": {
"xv": "^1.1.25"
},
"title": "Pure CSS tabs",
"branch": "master",
"style": {
"name": "Material",
"componentSet": {
"nav": "nav/DarkAbsoluteNav",
"header": "header/GradientHeader",
"article": "article/BasicArticle",
"footer": "footer/BasicFooter"
},
"fontFamily": "Roboto, sans-serif",
"heading": {
"fontWeight": 500,
"letterSpacing": "-0.01em"
},
"colors": {
"text": "#212121",
"background": "#fff",
"primary": "#2196f3",
"secondary": "#1565c0",
"highlight": "#ff4081",
"border": "#e0e0e0",
"muted": "#f5f5f5"
},
"layout": {
"centered": true,
"bannerHeight": "80vh",
"maxWidth": 896
}
},
"content": [
{
"component": "nav",
"links": [
{
"href": "https://github.com/maliMirkec/csstabs",
"text": "GitHub"
},
{
"href": "https://npmjs.com/package/csstabs",
"text": "npm"
}
]
},
{
"component": "header",
"heading": "csstabs",
"subhead": "With disabled state.",
"children": [
{
"component": "ui/TweetButton",
"text": "csstabs: With disabled state.",
"url": ""
},
{
"component": "ui/GithubButton",
"user": "maliMirkec",
"repo": "csstabs"
}
],
"text": "v0.3.2"
},
{
"component": "article",
"metadata": {
"source": "github.readme"
},
"html": "\n\n<h2>Installation</h2>\n<p><code>bower install csstabs</code></p>\n<h2>Demo</h2>\n<p><a href=\"http://codepen.io/CiTA/full/JRpmOW/\">http://codepen.io/CiTA/full/JRpmOW/</a></p>\n<h2>Usage</h2>\n<ol>\n<li>Include and modify styling</li>\n</ol>\n<pre><span class=\"hljs-comment\">// Default variables</span>\n<span class=\"hljs-variable\">$size</span>: .<span class=\"hljs-number\">5rem</span>;\n<span class=\"hljs-variable\">$background</span>: <span class=\"hljs-number\">#e5e5e5</span>;\n<span class=\"hljs-variable\">$background--active</span>: <span class=\"hljs-number\">#fefefe</span>;\n<span class=\"hljs-variable\">$color</span>: <span class=\"hljs-number\">#4e4e4e</span>;\n<span class=\"hljs-variable\">$color--disabled</span>: <span class=\"hljs-number\">#8e8e8e</span>;\n<span class=\"hljs-variable\">$breakpoint</span>: <span class=\"hljs-number\">600px</span>;\n\n<span class=\"hljs-comment\">// include tabs styling</span>\n@<span class=\"hljs-keyword\">import</span> <span class=\"hljs-string\">'./path-to-bower-folder/csstabs/tabs.scss'</span>;\n\n<span class=\"hljs-comment\">// add custom styling</span>\n<span class=\"hljs-selector-class\">.tabs__label</span> {\n <span class=\"hljs-attribute\">text-shadow</span>: <span class=\"hljs-number\">0</span> <span class=\"hljs-number\">1px</span> <span class=\"hljs-number\">0</span> <span class=\"hljs-number\">#444</span>;\n}\n\n<span class=\"hljs-selector-class\">.tabs__content</span> {\n <span class=\"hljs-attribute\">border-bottom</span>: <span class=\"hljs-number\">#444</span>;\n}</pre><ol>\n<li>Add and modify <code>HTML</code> structure</li>\n</ol>\n<pre><div <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs"</span>>\n <<span class=\"hljs-keyword\">input</span> <span class=\"hljs-keyword\">type</span>=<span class=\"hljs-string\">"radio"</span> id=<span class=\"hljs-string\">"tab1"</span> <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__radio"</span> name=<span class=\"hljs-string\">"tabs"</span> value=<span class=\"hljs-string\">"1"</span> checked>\n <<span class=\"hljs-keyword\">input</span> <span class=\"hljs-keyword\">type</span>=<span class=\"hljs-string\">"radio"</span> id=<span class=\"hljs-string\">"tab2"</span> <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__radio"</span> name=<span class=\"hljs-string\">"tabs"</span> value=<span class=\"hljs-string\">"2"</span>>\n <<span class=\"hljs-keyword\">input</span> <span class=\"hljs-keyword\">type</span>=<span class=\"hljs-string\">"radio"</span> id=<span class=\"hljs-string\">"tab3"</span> <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__radio"</span> name=<span class=\"hljs-string\">"tabs"</span> value=<span class=\"hljs-string\">"3"</span>>\n <<span class=\"hljs-keyword\">input</span> <span class=\"hljs-keyword\">type</span>=<span class=\"hljs-string\">"radio"</span> id=<span class=\"hljs-string\">"tab4"</span> <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__radio"</span> name=<span class=\"hljs-string\">"tabs"</span> value=<span class=\"hljs-string\">"4"</span>>\n <<span class=\"hljs-keyword\">input</span> <span class=\"hljs-keyword\">type</span>=<span class=\"hljs-string\">"radio"</span> id=<span class=\"hljs-string\">"tab5"</span> <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__radio"</span> name=<span class=\"hljs-string\">"tabs"</span> value=<span class=\"hljs-string\">"5"</span>>\n <<span class=\"hljs-keyword\">input</span> <span class=\"hljs-keyword\">type</span>=<span class=\"hljs-string\">"radio"</span> id=<span class=\"hljs-string\">"tab6"</span> <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__radio"</span> name=<span class=\"hljs-string\">"tabs"</span> value=<span class=\"hljs-string\">"6"</span> disabled>\n <<span class=\"hljs-keyword\">input</span> <span class=\"hljs-keyword\">type</span>=<span class=\"hljs-string\">"radio"</span> id=<span class=\"hljs-string\">"tab7"</span> <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__radio"</span> name=<span class=\"hljs-string\">"tabs"</span> value=<span class=\"hljs-string\">"7"</span>>\n <<span class=\"hljs-keyword\">input</span> <span class=\"hljs-keyword\">type</span>=<span class=\"hljs-string\">"radio"</span> id=<span class=\"hljs-string\">"tab8"</span> <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__radio"</span> name=<span class=\"hljs-string\">"tabs"</span> value=<span class=\"hljs-string\">"8"</span>>\n <<span class=\"hljs-keyword\">input</span> <span class=\"hljs-keyword\">type</span>=<span class=\"hljs-string\">"radio"</span> id=<span class=\"hljs-string\">"tab9"</span> <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__radio"</span> name=<span class=\"hljs-string\">"tabs"</span> value=<span class=\"hljs-string\">"9"</span>>\n <<span class=\"hljs-keyword\">input</span> <span class=\"hljs-keyword\">type</span>=<span class=\"hljs-string\">"radio"</span> id=<span class=\"hljs-string\">"tab10"</span> <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__radio"</span> name=<span class=\"hljs-string\">"tabs"</span> value=<span class=\"hljs-string\">"10"</span>>\n <<span class=\"hljs-keyword\">label</span> <span class=\"hljs-keyword\">for</span>=<span class=\"hljs-string\">"tab1"</span> <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__label"</span>><span class=\"hljs-keyword\">Tab</span> 1</<span class=\"hljs-keyword\">label</span>>\n <<span class=\"hljs-keyword\">label</span> <span class=\"hljs-keyword\">for</span>=<span class=\"hljs-string\">"tab2"</span> <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__label"</span>><span class=\"hljs-keyword\">Tab</span> 2</<span class=\"hljs-keyword\">label</span>>\n <<span class=\"hljs-keyword\">label</span> <span class=\"hljs-keyword\">for</span>=<span class=\"hljs-string\">"tab3"</span> <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__label"</span>><span class=\"hljs-keyword\">Tab</span> 3</<span class=\"hljs-keyword\">label</span>>\n <<span class=\"hljs-keyword\">label</span> <span class=\"hljs-keyword\">for</span>=<span class=\"hljs-string\">"tab4"</span> <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__label"</span>><span class=\"hljs-keyword\">Tab</span> 4</<span class=\"hljs-keyword\">label</span>>\n <<span class=\"hljs-keyword\">label</span> <span class=\"hljs-keyword\">for</span>=<span class=\"hljs-string\">"tab5"</span> <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__label"</span>><span class=\"hljs-keyword\">Tab</span> 5</<span class=\"hljs-keyword\">label</span>>\n <<span class=\"hljs-keyword\">label</span> <span class=\"hljs-keyword\">for</span>=<span class=\"hljs-string\">"tab6"</span> <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__label"</span>><span class=\"hljs-keyword\">Tab</span> 6</<span class=\"hljs-keyword\">label</span>>\n <<span class=\"hljs-keyword\">label</span> <span class=\"hljs-keyword\">for</span>=<span class=\"hljs-string\">"tab7"</span> <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__label"</span>><span class=\"hljs-keyword\">Tab</span> 7</<span class=\"hljs-keyword\">label</span>>\n <<span class=\"hljs-keyword\">label</span> <span class=\"hljs-keyword\">for</span>=<span class=\"hljs-string\">"tab8"</span> <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__label"</span>><span class=\"hljs-keyword\">Tab</span> 8</<span class=\"hljs-keyword\">label</span>>\n <<span class=\"hljs-keyword\">label</span> <span class=\"hljs-keyword\">for</span>=<span class=\"hljs-string\">"tab9"</span> <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__label"</span>><span class=\"hljs-keyword\">Tab</span> 9</<span class=\"hljs-keyword\">label</span>>\n <<span class=\"hljs-keyword\">label</span> <span class=\"hljs-keyword\">for</span>=<span class=\"hljs-string\">"tab10"</span> <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__label"</span>><span class=\"hljs-keyword\">Tab</span> 10</<span class=\"hljs-keyword\">label</span>>\n <div <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__content"</span>>\n <p><span class=\"hljs-keyword\">Tab</span> content 1</p>\n </div>\n <div <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__content"</span>>\n <p><span class=\"hljs-keyword\">Tab</span> content 2</p>\n </div>\n <div <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__content"</span>>\n <p><span class=\"hljs-keyword\">Tab</span> content 3</p>\n </div>\n <div <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__content"</span>>\n <p><span class=\"hljs-keyword\">Tab</span> content 4</p>\n </div>\n <div <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__content"</span>>\n <p><span class=\"hljs-keyword\">Tab</span> content 5</p>\n </div>\n <div <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__content"</span>>\n <p><span class=\"hljs-keyword\">Tab</span> content 6</p>\n </div>\n <div <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__content"</span>>\n <p><span class=\"hljs-keyword\">Tab</span> content 7</p>\n </div>\n <div <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__content"</span>>\n <p><span class=\"hljs-keyword\">Tab</span> content 8</p>\n </div>\n <div <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__content"</span>>\n <p><span class=\"hljs-keyword\">Tab</span> content 9</p>\n </div>\n <div <span class=\"hljs-keyword\">class</span>=<span class=\"hljs-string\">"tabs__content"</span>>\n <p><span class=\"hljs-keyword\">Tab</span> content 10</p>\n </div>\n</div></pre><h2>Addition options</h2>\n<p>Add <code>hide-if-disabled</code> class to <code>.tabs__label</code> and <code>.tabs__content</code> elements if you want to hide tabs and content when input radio is disabled.</p>\n"
},
{
"component": "footer",
"links": [
{
"href": "https://github.com/maliMirkec/csstabs",
"text": "GitHub"
},
{
"href": "https://github.com/maliMirkec",
"text": "maliMirkec"
}
]
}
]
}