Commit 7661fe6d authored by benjaminParisel's avatar benjaminParisel
Browse files

chore: troubleshooting synthax

* Adding template to create a troubleshooting section
parent 488971d7
......@@ -190,3 +190,120 @@ while (true) {
----
<1> The word `toto` is commonly used in examples, it probably refers to our inner self.
====
== How to write a clean troubleshooting section
[.troubleshooting-title]
== Troubleshooting 2
=== Troubleshooting 2 Without icon
[.troubleshooting-title]
=== Troubleshooting 3
=== Troubleshooting 3 Without icon
[.troubleshooting-title]
==== Troubleshooting 4
[.troubleshooting-section]
--
[.symptom]
I can't wake up in the morning, 9AM is too early for me!!!
[.symptom-description]
Here enter a symptom description
[.cause]#Potential cause#
This is probably because I often go to bed at 3AM :'(
[.solution]#Possible solution#
I should just stop watching netflix for hours...
[source,java]
----
@BonitaTests
class ProcessIT {
@Test
void should_retrieve_user(BonitaTestToolkit toolkit) {
User user = toolkit.getUser("walter.bates");
...
}
}
----
--
.Click to see *code example*
[%collapsible]
====
[source,text]
------
[.troubleshooting-section]
--
[.symptom]
I can't wake up in the morning, 9AM is too early for me!!!
[.symptom-description]
Here enter a symptom description
[.cause]#Potential cause#
This is probably because I often go to bed at 3AM :'(
[.solution]#Possible solution#
I should just stop watching netflix for hours...
[source,java]
----
@BonitaTests
class ProcessIT {
@Test
void should_retrieve_user(BonitaTestToolkit toolkit) {
User user = toolkit.getUser("walter.bates");
...
}
}
----
------
====
[.troubleshooting-section]
--
[.symptom]
I don't want display potential cause as title
[.symptom-description]
When i sure about the cause, I want to remove potential on title
[.cause]#Cause#
This is probably because I often go to bed at 3AM :'(
[.solution]#Possible solution#
Just write `Cause` as title
--
.Click to see *code example*
[%collapsible]
====
[source,text]
----
[.troubleshooting-section]
--
[.symptom]
I don't want display potential cause as title
[.symptom-description]
When i sure about the cause, I want to remove potential on title
[.cause]#Cause#
This is probably because I often go to bed at 3AM :'(
[.solution]#Possible solution#
Just write `Cause` as title
--
----
====
<?xml version="1.0" encoding="utf-8"?>
<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
<g><path d="M574,487.1c-17.3,0-31.6-14.2-31.6-31.6l-25.3-225.7c0-17.3,14.2-31.6,31.6-31.6h90.2c17.3,0,31.6,14.2,31.6,31.6l-25.2,225.7c0,17.3-14.2,31.6-31.6,31.6H574L574,487.1z"/><path d="M638.2,591c0,13.9-11.4,25.2-25.2,25.2h-38.3c-13.9,0-25.2-11.4-25.2-25.2v-38.3c0-13.9,11.4-25.2,25.2-25.2H613c13.9,0,25.2,11.4,25.2,25.2V591z"/><path d="M384.8,615.2c-114.6-114.5-114.6-301,0-415.5c114.5-114.5,301-114.5,415.5,0c114.6,114.6,114.6,301,0,415.5C685.7,729.8,499.3,729.8,384.8,615.2 M873.7,688.7c155.1-155.1,155.1-407.3,0-562.4c-155-155.1-407.3-155.1-562.4,0c-131.5,131.5-151.4,327.2-59.8,479.9c0,0,6.6,11-2.3,19.9C198.5,676.8,46.3,829,46.3,829C6,869.4-3.6,925.9,32.2,961.7l6.2,6.2c35.8,35.8,92.3,26.2,132.7-14.2l202.5-202.5c9.3-9.3,20.3-2.7,20.3-2.7C546.5,840.1,742.2,820.2,873.7,688.7"/></g>
</svg>
.troubleshooting-title > :first-child {
.anchor {
margin-left: -4em;
}
&::before {
content: "";
display: inline-block;
height: 2em;
width: 2.2em;
background: url(../img/troubleshooting.png) no-repeat;
background-size: contain;
vertical-align: middle;
}
}
.troubleshooting-section {
border-left: 2px solid var(--color-troobleshooting-border);
padding-left: 1em;
margin-top: 2em;
margin-bottom: 2em;
.symptom {
color: var(--color-higlight);
font-weight: var(--body-font-weight-bold);
::before {
content: "";
display: inline-block;
height: 1.5em;
width: 1.5em;
margin-right: 0.5em;
background: url(../img/loupe.svg) no-repeat;
background-size: contain;
vertical-align: middle;
filter: var(--filter-fire-icon);
}
}
.symptom-description {
margin-top: revert;
}
.cause,
.solution {
position: relative;
font-weight: var(--body-font-weight-bold);
color: var(--color-higlight);
&::after{
content: '\A';
white-space: pre-wrap;
}
}
}
......@@ -48,6 +48,7 @@
--color-card-border: #ebf2f2;
--color-code-background: #f9f2f4;
--color-code-font: #c7254e;
--color-troobleshooting-border: var(--color-admonition-important-bg);
// Search colors
--docsearch-primary-color: var(--color-blue-bonita);
......@@ -175,6 +176,7 @@
// Light icon set
--filter-icon: invert(0%) sepia(98%) saturate(9%) hue-rotate(152deg) brightness(100%) contrast(102%); // black
--filter-logo-footer: invert(0); // keep it as it is
--filter-fire-icon: invert(9%) sepia(91%) saturate(5800%) hue-rotate(2deg) brightness(101%) contrast(115%);
}
......@@ -227,12 +229,14 @@ html[data-theme='dark'] {
--color-card-border: #9ba9c6;
--color-code-background: #30334b;
--color-code-font: #f7962e;
--color-troobleshooting-border: #f5c80071;
//Icon filter definitions, generated from https://codepen.io/sosuke/pen/Pjoqqp
// Dark icon set
--filter-icon: invert(100%) sepia(0%) saturate(7500%) hue-rotate(39deg) brightness(112%) contrast(112%); // white
--filter-icon-search: invert(100%) sepia(0%) saturate(7500%) hue-rotate(39deg) brightness(112%) contrast(112%); // White
--filter-logo-footer: brightness(0) invert(1); // full white
--filter-fire-icon: invert(72%) sepia(92%) saturate(1187%) hue-rotate(3deg) brightness(100%) contrast(100%);
// Search colors
--color-search-mark-highlight: var(--color-higlight);
......
......@@ -17,3 +17,4 @@
@import "components/cards";
@import "search.scss";
@import "loader.scss";
@import "components/troubleshooting.scss";
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment