Improvements

- Small adjustments for table striping
- Consitent shadows for Dark mode
- Bigger Checkboxes, Radios and Switches
- Disable transitions for Checkboxes, Radios and Details
- Simplier .grids in docs
- Replace .js for internal scroll with CSS
- Better aside adjustment in .js
- Many small improvements in docs

scss/_variables.scss

@@ -26,7 +26,7 @@ $enable-classes: true !default;
 // Enable validation states for <input>
 $enable-input-states: true !default;
 
-// Enable transitions for <a>, <button>, <input>, <details>
+// Enable transitions for <a>, <button>, <input>
 $enable-transitions: true !default;
 
 

scss/components/_accordion.scss

@@ -39,10 +39,6 @@ details {
       background-repeat: no-repeat;
       background-size: 1rem auto;
       content: '';
-
-      @if $enable-transitions {
-        transition: transform $transition;
-      }
     }
 
     &:focus {

scss/content/_form-checkbox-radio.scss

@@ -5,14 +5,16 @@
 // Checkboxes & Radios
 [type="checkbox"],
 [type="radio"] {
-  font-size: 1.125rem;
   display: inline-block;
   width: 1em;
   height: 1em;
   margin-right: .375rem;
   margin-bottom: $spacing-label-input;
+  border-width: 2px;
+  font-size: 1.125rem;
   vertical-align: middle;
   cursor: pointer;
+  transition: none; // Prevent frozen state on mobile devices
 
   &::-ms-check {
     display: none; // unstyle IE checkboxes

scss/themes/default/_dark.scss

@@ -50,7 +50,7 @@
     // Card
     --card-background:   #{darken($grey-900, 2%)};
     --card-sections:     #{darken($grey-900, 4%)};
-    --card-shadow:       0 0.125rem 1rem #{rgba($black, 0.06)}, 0 0.125rem 2rem #{rgba($black, 0.12)}, 0 0 0 0.0625rem #{rgba($black, 0.09)};
+    --card-shadow:       0 0.125rem 1rem #{rgba($black, 0.08)}, 0 0.125rem 2rem #{rgba($black, 0.04)}, 0 0 0 0.0625rem #{rgba($black, 0.1)};
 
     // Code
     --code-background:   #{darken($grey-900, 4%)};
@@ -63,7 +63,7 @@
 
     // Table
     --table-border:      #{darken($grey-900, 6%)};
-    --table-stripping:   #{rgba($grey-50,.02)};
+    --table-stripping:   #{rgba($grey-500,.02)};
   }
 }
 
@@ -120,7 +120,7 @@
   // Card
   --card-background:   #{darken($grey-900, 2%)};
   --card-sections:     #{darken($grey-900, 4%)};
-  --card-shadow:       0 0.125rem 1rem #{rgba($black, 0.06)}, 0 0.125rem 2rem #{rgba($black, 0.12)}, 0 0 0 0.0625rem #{rgba($black, 0.09)};
+  --card-shadow:       0 0.125rem 1rem #{rgba($black, 0.08)}, 0 0.125rem 2rem #{rgba($black, 0.04)}, 0 0 0 0.0625rem #{rgba($black, 0.1)};
 
   // Code
   --code-background:   #{darken($grey-900, 4%)};
@@ -133,5 +133,5 @@
 
   // Table
   --table-border:      #{darken($grey-900, 6%)};
-  --table-stripping:   #{rgba($grey-50,.02)};
+  --table-stripping:   #{rgba($grey-500,.02)};
 }

scss/themes/default/_light.scss

@@ -63,5 +63,5 @@
 
   // Table
   --table-border:      #{rgba($grey-50, .75)};
-  --table-stripping:   #{rgba($grey-900,.02)};
+  --table-stripping:   #{rgba($grey-500,.04)};
 }