Merge pull request #106 from Showtim3/support-details

Fixes #30 Adding support for details and summary tag

.gitignore

@@ -81,4 +81,7 @@ typings/
 .fusebox/
 
 # DynamoDB Local files
-.dynamodb/
+.dynamodb/
+
+# IntelliJ IDE
+.idea/

dist/dark-legacy.standalone.css

@@ -559,4 +559,42 @@ tbody tr:nth-child(even) {
   background-color: #161f27;
 }
 
+details {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: #1a242f;
+  padding: 10px 10px 0;
+  margin: 1em 0;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+details[open] {
+  padding: 10px;
+}
+
+details > :last-child {
+  margin-bottom: 0;
+}
+
+details[open] summary {
+  margin-bottom: 10px;
+}
+
+summary {
+  display: list-item;
+  background-color: #161f27;
+  padding: 10px;
+  margin: -10px -10px 0;
+}
+
+details > :not(summary) {
+  margin-top: 0;
+}
+
+summary::-webkit-details-marker {
+  color: #dbdbdb;
+}
+
 /*# sourceMappingURL=dark-legacy.standalone.css.map */

dist/dark.css

@@ -504,4 +504,42 @@ tbody tr:nth-child(even) {
   background-color: var(--selection);
 }
 
+details {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: var(--background-alt);
+  padding: 10px 10px 0;
+  margin: 1em 0;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+details[open] {
+  padding: 10px;
+}
+
+details > :last-child {
+  margin-bottom: 0;
+}
+
+details[open] summary {
+  margin-bottom: 10px;
+}
+
+summary {
+  display: list-item;
+  background-color: var(--background);
+  padding: 10px;
+  margin: -10px -10px 0;
+}
+
+details > :not(summary) {
+  margin-top: 0;
+}
+
+summary::-webkit-details-marker {
+  color: var(--text-main);
+}
+
 /*# sourceMappingURL=dark.css.map */

dist/dark.standalone.css

@@ -469,4 +469,42 @@ tbody tr:nth-child(even) {
   background-color: var(--selection);
 }
 
+details {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: var(--background-alt);
+  padding: 10px 10px 0;
+  margin: 1em 0;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+details[open] {
+  padding: 10px;
+}
+
+details > :last-child {
+  margin-bottom: 0;
+}
+
+details[open] summary {
+  margin-bottom: 10px;
+}
+
+summary {
+  display: list-item;
+  background-color: var(--background);
+  padding: 10px;
+  margin: -10px -10px 0;
+}
+
+details > :not(summary) {
+  margin-top: 0;
+}
+
+summary::-webkit-details-marker {
+  color: var(--text-main);
+}
+
 /*# sourceMappingURL=dark.standalone.css.map */

dist/light-legacy.standalone.css

@@ -559,4 +559,42 @@ tbody tr:nth-child(even) {
   background-color: #9e9e9e;
 }
 
+details {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: #f7f7f7;
+  padding: 10px 10px 0;
+  margin: 1em 0;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+details[open] {
+  padding: 10px;
+}
+
+details > :last-child {
+  margin-bottom: 0;
+}
+
+details[open] summary {
+  margin-bottom: 10px;
+}
+
+summary {
+  display: list-item;
+  background-color: #efefef;
+  padding: 10px;
+  margin: -10px -10px 0;
+}
+
+details > :not(summary) {
+  margin-top: 0;
+}
+
+summary::-webkit-details-marker {
+  color: #363636;
+}
+
 /*# sourceMappingURL=light-legacy.standalone.css.map */

dist/light.css

@@ -503,4 +503,42 @@ tbody tr:nth-child(even) {
 ::selection {
   background-color: var(--selection);
 }
+
+details {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: var(--background-alt);
+  padding: 10px 10px 0;
+  margin: 1em 0;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+details[open] {
+  padding: 10px;
+}
+
+details > :last-child {
+  margin-bottom: 0;
+}
+
+details[open] summary {
+  margin-bottom: 10px;
+}
+
+summary {
+  display: list-item;
+  background-color: var(--background);
+  padding: 10px;
+  margin: -10px -10px 0;
+}
+
+details > :not(summary) {
+  margin-top: 0;
+}
+
+summary::-webkit-details-marker {
+  color: var(--text-main);
+}
 /*# sourceMappingURL=light.css.map */

dist/light.standalone.css

@@ -469,4 +469,42 @@ tbody tr:nth-child(even) {
   background-color: var(--selection);
 }
 
+details {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: var(--background-alt);
+  padding: 10px 10px 0;
+  margin: 1em 0;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+details[open] {
+  padding: 10px;
+}
+
+details > :last-child {
+  margin-bottom: 0;
+}
+
+details[open] summary {
+  margin-bottom: 10px;
+}
+
+summary {
+  display: list-item;
+  background-color: var(--background);
+  padding: 10px;
+  margin: -10px -10px 0;
+}
+
+details > :not(summary) {
+  margin-top: 0;
+}
+
+summary::-webkit-details-marker {
+  color: var(--text-main);
+}
+
 /*# sourceMappingURL=light.standalone.css.map */

index.html

@@ -290,6 +290,17 @@
     <h5>Heading 5</h5>
     <h6>Heading 6</h6>
 
+    <p>The details and summary tag</p>
+    <details>
+      <summary>Click to Open...</summary>
+      <p>The HTML Details Element (details) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the summary element.</p>
+    </details>
+
+    <details open>
+      <summary>Click to Hide...</summary>
+      <p>The HTML Details Element (details) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the summary element.</p>
+    </details>
+
     <script src='https://unpkg.com/favicon-mode-switcher@^1.0.0' defer></script>
     <script src='script.js' defer></script>
   </body>

src/parts/_misc.css

@@ -54,3 +54,41 @@ tbody tr:nth-child(even) {
 ::selection {
   background-color: var(--selection);
 }
+
+details {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: var(--background-alt);
+  padding: 10px 10px 0;
+  margin: 1em 0;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+details[open] {
+  padding: 10px;
+}
+
+details > :last-child {
+  margin-bottom: 0;
+}
+
+details[open] summary {
+  margin-bottom: 10px;
+}
+
+summary {
+  display: list-item;
+  background-color: var(--background);
+  padding: 10px;
+  margin: -10px -10px 0;
+}
+
+details > :not(summary) {
+  margin-top: 0;
+}
+
+summary::-webkit-details-marker {
+  color: var(--text-main);
+}