Browse Source

Fix indentation

tags/8.2.0.alpha2
Erik Lumme 6 years ago
parent
commit
4210208991
1 changed files with 18 additions and 18 deletions
  1. 18
    18
      documentation/articles/CustomizingComponentThemeWithSass.asciidoc

+ 18
- 18
documentation/articles/CustomizingComponentThemeWithSass.asciidoc View File

@@ -22,7 +22,7 @@ public class SassyUI extends UI {
Layout layout = new VerticalLayout();
layout.addComponent(b);
setContent(layout);
}
}
}
....

@@ -35,8 +35,8 @@ tutorial):
....
@import "../reindeer/reindeer.scss";
@mixin sassy {
@include reindeer;
// your styles go here
@include reindeer;
// your styles go here
}
....

@@ -46,7 +46,7 @@ color of the caption like this:
[source,scss]
....
.v-button-caption {
color: red;
color: red;
}
....

@@ -65,7 +65,7 @@ css:
[source,scss]
....
.important .v-button-caption {
color: red;
color: red;
}
....

@@ -90,7 +90,7 @@ easily style this without interference from theme styles:
[source,scss]
....
.my-button {
color: red;
color: red;
}
....

@@ -102,7 +102,7 @@ styles:
....
@include base-button($primaryStyleName: my-button);
.my-button {
color: red;
color: red;
}
....

@@ -117,7 +117,7 @@ Now we have a good starting-point. Note that this might not be such a
big deal for small things, like buttons, but imagine something like
Table witout _any_ styles. Yikes.

_*NOTE* in beta10, the $primaryStyleName functionality is still only
*_NOTE_* _in beta10, the $primaryStyleName functionality is still only
available for Base and Reindeer. This will change in the near future._

Here are the full sources (using distinct colors for each button for
@@ -151,7 +151,7 @@ public class SassyUI extends UI {
layout.addComponent(b);

setContent(layout);
}
}
}
....

@@ -170,19 +170,19 @@ public class SassyUI extends UI {
@import "../reindeer/reindeer.scss";

@mixin sassy {
@include reindeer;
@include reindeer;

.v-button-caption {
color: red;
}
.v-button-caption {
color: red;
}

.important .v-button-caption {
color: green;
color: green;
}

@include base-button($name: my-button);
.my-button {
color: blue;
}
@include base-button($name: my-button);
.my-button {
color: blue;
}
}
....

Loading…
Cancel
Save