chore: update docs and style (#269)

assets/css/_mixin/_details.scss

@@ -0,0 +1,7 @@
+@mixin details-transition-open {
+  @include transition(max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s);
+}
+
+@mixin details-transition-close {
+  @include transition(max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s);
+}

assets/css/_mixin/_index.scss

@@ -2,3 +2,4 @@
 @import "_link";
 @import "_blur";
 @import "_summary";
+@import "_details";

assets/css/_mixin/_link.scss

@@ -2,7 +2,7 @@
   a {
     color: if($light, $global-link-color, $single-link-color);
 
-    .dark & {
+    [theme=dark] & {
       color: if($dark, $global-link-color-dark, $single-link-color-dark);
     }
 
@@ -10,7 +10,7 @@
     &:hover {
       color: if($light, $global-link-hover-color, $single-link-hover-color);
 
-      .dark & {
+      [theme=dark] & {
         color: if($dark, $global-link-hover-color-dark, $single-link-hover-color-dark);
       }
     }

assets/css/_mixin/_summary.scss

@@ -5,7 +5,7 @@
     color: $global-font-color;
     border-bottom: 1px dashed $global-border-color;
 
-    .dark & {
+    [theme=dark] & {
       color: $global-font-color-dark;
       border-bottom: 1px dashed $global-border-color-dark;
     }
@@ -47,7 +47,7 @@
       overflow-wrap: break-word;
       color: $global-font-secondary-color;
 
-      .dark & {
+      [theme=dark] & {
         color: $global-font-secondary-color-dark;
       }
 
@@ -78,7 +78,7 @@
           margin-right: .3125rem;
           color: $global-link-color;
 
-          .dark & {
+          [theme=dark] & {
             color: $global-link-color-dark;
           }
         }
@@ -95,7 +95,7 @@
       @include link(true, true);
 
       b, strong {
-        .dark & {
+        [theme=dark] & {
           color: $global-font-secondary-color-dark;
         }
       }