diff --git a/lib/generators/komponent/templates/styleguide/components/container/komponent_container.css b/lib/generators/komponent/templates/styleguide/components/container/komponent_container.css
index a41d825..105003f 100644
--- a/lib/generators/komponent/templates/styleguide/components/container/komponent_container.css
+++ b/lib/generators/komponent/templates/styleguide/components/container/komponent_container.css
@@ -5,13 +5,13 @@
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
margin: 40px 60px 0 300px;
+}
- .komponent-code {
- background-color: #333;
- color: #fff;
- margin: 10px 0;
- padding: 10px;
- }
+.komponent-footer .komponent-code {
+ background-color: #333;
+ color: #fff;
+ margin: 10px 0;
+ padding: 10px;
}
/* stylelint-enable */
diff --git a/lib/generators/komponent/templates/styleguide/components/footer/komponent_footer.css b/lib/generators/komponent/templates/styleguide/components/footer/komponent_footer.css
index 95a03e4..1e517ad 100644
--- a/lib/generators/komponent/templates/styleguide/components/footer/komponent_footer.css
+++ b/lib/generators/komponent/templates/styleguide/components/footer/komponent_footer.css
@@ -8,20 +8,20 @@
position: fixed;
right: 30px;
text-align: center;
+}
- &,
- a {
- color: #999;
- }
+.komponent-footer,
+.komponent-footer a {
+ color: #999;
+}
- a {
- text-decoration: none;
+.komponent-footer a {
+ text-decoration: none;
+}
- &:hover,
- &:focus {
- color: #0038ea;
- }
- }
+.komponent-footer a:hover,
+.komponent-footer a:focus {
+ color: #0038ea;
}
/* stylelint-enable */
diff --git a/lib/generators/komponent/templates/styleguide/components/header/_komponent_header.html.erb b/lib/generators/komponent/templates/styleguide/components/header/_komponent_header.html.erb
index e4feb12..20c20d3 100644
--- a/lib/generators/komponent/templates/styleguide/components/header/_komponent_header.html.erb
+++ b/lib/generators/komponent/templates/styleguide/components/header/_komponent_header.html.erb
@@ -1,3 +1,5 @@
diff --git a/lib/generators/komponent/templates/styleguide/components/header/komponent_header.css b/lib/generators/komponent/templates/styleguide/components/header/komponent_header.css
index ac9f194..5fc10f3 100644
--- a/lib/generators/komponent/templates/styleguide/components/header/komponent_header.css
+++ b/lib/generators/komponent/templates/styleguide/components/header/komponent_header.css
@@ -12,4 +12,9 @@
padding: 0 20px;
}
+.komponent-header .logo a {
+ color: white;
+ text-decoration: none;
+}
+
/* stylelint-enable */
diff --git a/lib/generators/komponent/templates/styleguide/components/index.js b/lib/generators/komponent/templates/styleguide/components/index.js
index 878e312..495628c 100644
--- a/lib/generators/komponent/templates/styleguide/components/index.js
+++ b/lib/generators/komponent/templates/styleguide/components/index.js
@@ -1,3 +1,4 @@
+import "./style.css";
import "components/komponent/container/komponent_container";
import "components/komponent/footer/komponent_footer";
import "components/komponent/header/komponent_header";
diff --git a/lib/generators/komponent/templates/styleguide/components/sidebar/komponent_sidebar.css b/lib/generators/komponent/templates/styleguide/components/sidebar/komponent_sidebar.css
index 3ac9e59..405b5ec 100644
--- a/lib/generators/komponent/templates/styleguide/components/sidebar/komponent_sidebar.css
+++ b/lib/generators/komponent/templates/styleguide/components/sidebar/komponent_sidebar.css
@@ -11,33 +11,33 @@
position: absolute;
top: 60px;
width: 240px;
+}
- &-title {
- color: #0038ea;
- font-size: 14px;
- font-weight: bold;
- letter-spacing: 1px;
- margin: 0 0 20px;
- text-transform: uppercase;
- }
+.komponent-sidebar-title {
+ color: #0038ea;
+ font-size: 14px;
+ font-weight: bold;
+ letter-spacing: 1px;
+ margin: 0 0 20px;
+ text-transform: uppercase;
+}
- &-items {
- font-size: 14px;
- letter-spacing: 0;
- line-height: 1.25;
- list-style: none;
- margin: 0 0 30px;
- padding: 0;
- }
+.komponent-sidebar-items {
+ font-size: 14px;
+ letter-spacing: 0;
+ line-height: 1.25;
+ list-style: none;
+ margin: 0 0 30px;
+ padding: 0;
+}
- &-item {
- margin: 0 0 5px;
- }
+.komponent-sidebar-item {
+ margin: 0 0 5px;
+}
- a {
- color: #333;
- text-decoration: none;
- }
+.komponent-sidebar a {
+ color: #333;
+ text-decoration: none;
}
/* stylelint-enable */
diff --git a/lib/generators/komponent/templates/styleguide/components/style.css b/lib/generators/komponent/templates/styleguide/components/style.css
new file mode 100644
index 0000000..293d3b1
--- /dev/null
+++ b/lib/generators/komponent/templates/styleguide/components/style.css
@@ -0,0 +1,3 @@
+body {
+ margin: 0;
+}
diff --git a/lib/generators/komponent/templates/styleguide/packs/komponent.js b/lib/generators/komponent/templates/styleguide/packs/komponent.js
index c31f602..df5b3a8 100644
--- a/lib/generators/komponent/templates/styleguide/packs/komponent.js
+++ b/lib/generators/komponent/templates/styleguide/packs/komponent.js
@@ -1,2 +1,2 @@
-import 'components';
-import 'components/komponent';
+import "components";
+import "components/komponent";