diff --git a/src/sass/styleguide/_typo.scss b/src/sass/styleguide/_typo.scss
index f7cff04..7291cc6 100644
--- a/src/sass/styleguide/_typo.scss
+++ b/src/sass/styleguide/_typo.scss
@@ -6,7 +6,7 @@
text-align: center;
font-size: $font-size-bigger;
color: $color-main;
- margin: 0 0 20px;
+ margin: 0;
@include respond-to(md) {
font-size: $font-size-huge;
diff --git a/src/styleguide/helpers/strip-file-extension.js b/src/styleguide/helpers/strip-file-extension.js
index 5bef48b..f8eb727 100644
--- a/src/styleguide/helpers/strip-file-extension.js
+++ b/src/styleguide/helpers/strip-file-extension.js
@@ -2,10 +2,10 @@
module.exports.register = function(Handlebars) {
- // Customize this helper
- Handlebars.registerHelper('stripFileExtension', function(str) {
- var content = str.replace(/\.[^\.]*$/, '');
- return new Handlebars.SafeString(content);
- });
+ // Customize this helper
+ Handlebars.registerHelper('stripFileExtension', function(str) {
+ var content = str.replace(/\.[^\.]*$/, '');
+ return new Handlebars.SafeString(content);
+ });
};
\ No newline at end of file
diff --git a/src/styleguide/index.hbs b/src/styleguide/index.hbs
index ff08bce..475dd88 100644
--- a/src/styleguide/index.hbs
+++ b/src/styleguide/index.hbs
@@ -1,26 +1,66 @@
---
title: Styleguide
+sections:
+ - title: Typography
+ src: src/styleguide/sections/typo/*.hbs
+ - title: Buttons
+ src: src/styleguide/sections/buttons/*.hbs
+ - title: Forms
+ src: src/styleguide/sections/form/*.hbs
+ - title: Labels
+ src: src/styleguide/sections/labels.hbs
+ - title: Spinners
+ src: src/styleguide/sections/spinner/*.hbs
+ - title: Attachments
+ src: src/styleguide/sections/attachments.hbs
+ - title: Dropdowns
+ src: src/styleguide/sections/dropdown.hbs
+ - title: Tooltips
+ src: src/styleguide/sections/Tooltip.hbs
+ - title: Mail addresses
+ src: src/styleguide/sections/mail_addresses.hbs
+ - title: Tags input
+ src: src/styleguide/sections/tags_input.hbs
+ - title: Toolbars
+ src: src/styleguide/sections/toolbars/*.hbs
---
+ All icons are available via inline svg and the
- All icons are available via inline svg and the {{{@description}}}Icons
- Icons
+ Available icons
+ xlink:href
+ attribute of the <use>
tag.
+ {{title}}
+ {{#compose src=src}}
+ Available icons
- xlink:href
- attribute of the <use>
tag.
- {{@title}}
+
disabled
or
+ aria-disabled="true"
.
+---
+
+
+
diff --git a/src/styleguide/sections/buttons/btn_big.hbs b/src/styleguide/sections/buttons/btn_big.hbs
new file mode 100644
index 0000000..ea69422
--- /dev/null
+++ b/src/styleguide/sections/buttons/btn_big.hbs
@@ -0,0 +1,9 @@
+---
+title: Big button
+description:
+---
+
+
diff --git a/src/styleguide/sections/buttons/btn_icon.hbs b/src/styleguide/sections/buttons/btn_icon.hbs
new file mode 100644
index 0000000..9034170
--- /dev/null
+++ b/src/styleguide/sections/buttons/btn_icon.hbs
@@ -0,0 +1,8 @@
+---
+title: Icon button
+description:
+---
+
+
diff --git a/src/styleguide/sections/buttons/btn_icon_light.hbs b/src/styleguide/sections/buttons/btn_icon_light.hbs
new file mode 100644
index 0000000..0e7848f
--- /dev/null
+++ b/src/styleguide/sections/buttons/btn_icon_light.hbs
@@ -0,0 +1,8 @@
+---
+title: Light icon button
+description:
+---
+
+
diff --git a/src/styleguide/sections/buttons/btn_icon_very_light.hbs b/src/styleguide/sections/buttons/btn_icon_very_light.hbs
new file mode 100644
index 0000000..6ff5d40
--- /dev/null
+++ b/src/styleguide/sections/buttons/btn_icon_very_light.hbs
@@ -0,0 +1,8 @@
+---
+title: Very light icon button
+description:
+---
+
+
diff --git a/src/styleguide/sections/buttons/btn_invalid.hbs b/src/styleguide/sections/buttons/btn_invalid.hbs
new file mode 100644
index 0000000..48cc821
--- /dev/null
+++ b/src/styleguide/sections/buttons/btn_invalid.hbs
@@ -0,0 +1,10 @@
+---
+title: Invalid button
+description: >
+ Use to show invalid state of a form.
+---
+
+
diff --git a/src/styleguide/sections/buttons/btn_light.hbs b/src/styleguide/sections/buttons/btn_light.hbs
new file mode 100644
index 0000000..3378d94
--- /dev/null
+++ b/src/styleguide/sections/buttons/btn_light.hbs
@@ -0,0 +1,9 @@
+---
+title: Light button
+description:
+---
+
+
diff --git a/src/styleguide/sections/buttons/btn_light_dropdown.hbs b/src/styleguide/sections/buttons/btn_light_dropdown.hbs
new file mode 100644
index 0000000..eb8da92
--- /dev/null
+++ b/src/styleguide/sections/buttons/btn_light_dropdown.hbs
@@ -0,0 +1,10 @@
+---
+title: Light dropbown button
+description: >
+ Use in combination with JavaScript and .dropdown
.
+---
+
+
diff --git a/src/styleguide/sections/buttons/btn_navicon.hbs b/src/styleguide/sections/buttons/btn_navicon.hbs
new file mode 100644
index 0000000..f0d2367
--- /dev/null
+++ b/src/styleguide/sections/buttons/btn_navicon.hbs
@@ -0,0 +1,9 @@
+---
+title: Navicon button
+description: >
+ Main menu button
+---
+
+
diff --git a/src/styleguide/sections/buttons/btn_secondary.hbs b/src/styleguide/sections/buttons/btn_secondary.hbs
new file mode 100644
index 0000000..c491f8d
--- /dev/null
+++ b/src/styleguide/sections/buttons/btn_secondary.hbs
@@ -0,0 +1,10 @@
+---
+title: Secondary button
+description: >
+ Use in conjuction with another primary regular button.
+---
+
+
diff --git a/src/styleguide/sections/dropdown.hbs b/src/styleguide/sections/dropdown.hbs
new file mode 100644
index 0000000..28af589
--- /dev/null
+++ b/src/styleguide/sections/dropdown.hbs
@@ -0,0 +1,10 @@
+---
+title: Dropdown
+description: >
+ The dropdown list is positioned absolutely within the application via JavaScript.
+---
+
+<label>
.
+---
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/styleguide/sections/form/form.hbs b/src/styleguide/sections/form/form.hbs
new file mode 100644
index 0000000..f3101df
--- /dev/null
+++ b/src/styleguide/sections/form/form.hbs
@@ -0,0 +1,43 @@
+---
+title: Form layout
+description: >
+ Basic form layout with multicolumn support.
+---
+
+
diff --git a/src/styleguide/sections/form/form_fieldset.hbs b/src/styleguide/sections/form/form_fieldset.hbs
new file mode 100644
index 0000000..060d219
--- /dev/null
+++ b/src/styleguide/sections/form/form_fieldset.hbs
@@ -0,0 +1,15 @@
+---
+title: Form fieldset
+description: >
+ Use to group form inputs.
+---
+
+
diff --git a/src/styleguide/sections/form/form_input_with_button.hbs b/src/styleguide/sections/form/form_input_with_button.hbs
new file mode 100644
index 0000000..7dad30d
--- /dev/null
+++ b/src/styleguide/sections/form/form_input_with_button.hbs
@@ -0,0 +1,10 @@
+---
+title: Form input with button
+description: >
+ Use to group form inputs.
+---
+
+
diff --git a/src/styleguide/sections/form/input_checkbox.hbs b/src/styleguide/sections/form/input_checkbox.hbs
new file mode 100644
index 0000000..15f2725
--- /dev/null
+++ b/src/styleguide/sections/form/input_checkbox.hbs
@@ -0,0 +1,13 @@
+---
+title: Checkbox input
+description: >
+ Custom checkbox input constists of custom checkbox plus label.
+---
+
+
diff --git a/src/styleguide/sections/form/input_email_fixed_domain.hbs b/src/styleguide/sections/form/input_email_fixed_domain.hbs
new file mode 100644
index 0000000..71168b4
--- /dev/null
+++ b/src/styleguide/sections/form/input_email_fixed_domain.hbs
@@ -0,0 +1,9 @@
+---
+title: Email input with fixed domain
+description:
+---
+
+1234-1234-1234-1234
diff --git a/src/styleguide/sections/typo/typo_paragraph.hbs b/src/styleguide/sections/typo/typo_paragraph.hbs
new file mode 100644
index 0000000..6b863fe
--- /dev/null
+++ b/src/styleguide/sections/typo/typo_paragraph.hbs
@@ -0,0 +1,14 @@
+---
+title: Paragraph
+description: >
+ Paragraph with margin bottom and additional styles for
+ strong
, em
,
+ and a
.
+---
+
++ Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Accusamus possimus officiis quia perferendis quo assumenda, + recusandae repellat? Iusto vero, temporibus debitis eveniet + qui libero excepturi, architecto laborum assumenda, modi aperiam. +
diff --git a/src/styleguide/sections/typo/typo_title.hbs b/src/styleguide/sections/typo/typo_title.hbs new file mode 100644 index 0000000..9fa651a --- /dev/null +++ b/src/styleguide/sections/typo/typo_title.hbs @@ -0,0 +1,6 @@ +--- +title: Title +description: Use as main page title. +--- + +