Started the migration of the setting views

resources/assets/sass/_buttons.scss

@@ -31,7 +31,8 @@ $button-border-radius: 2px;
   font-size: $fs-m;
   line-height: 1.4em;
   padding: $-xs*1.3 $-m;
-  margin: $-xs $-xs $-xs 0;
+  margin-top: $-xs;
+  margin-bottom: $-xs;
   display: inline-block;
   border: none;
   font-weight: 400;
@@ -62,6 +63,10 @@ $button-border-radius: 2px;
   }
 }
 
+.button + .button {
+  margin-left: $-s;
+}
+
 .button.outline {
   background-color: transparent;
   color: #888;

resources/assets/sass/_forms.scss

@@ -139,64 +139,68 @@ input[type=date] {
 }
 
 .toggle-switch {
-  display: inline-block;
-  background-color: #BBB;
-  width: 36px;
-  height: 14px;
-  border-radius: 7px;
-  position: relative;
-  transition: all ease-in-out 120ms;
-  cursor: pointer;
   user-select: none;
-  &:after {
-    content: '';
-    display: block;
-    position: relative;
-    left: 0;
-    margin-top: -3px;
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    background-color: #fafafa;
-    border: 1px solid #CCC;
-    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
-    transition: all ease-in-out 120ms;
-  }
-  &.active {
-    background-color: rgba($positive, 0.4);
-    &:after {
-      left: 16px;
-      background-color: $positive;
-      border: darken($positive, 20%);
+  display: inline-grid;
+  grid-template-columns: (16px + $-s) 1fr;
+  align-items: center;
+  margin: $-m 0;
+  .custom-checkbox {
+    width: 16px;
+    height: 16px;
+    border-radius: 2px;
+    display: inline-block;
+    border: 2px solid #999;
+    overflow: hidden;
+    fill: #888;
+    .svg-icon {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      bottom: auto;
+      top: -1.5px;
+      left: 0;
+      transition: transform ease-in-out 120ms;
+      transform: scale(0);
+      transform-origin: center center;
     }
   }
-}
-.toggle-switch-checkbox {
-  display: none;
-}
-input:checked + .toggle-switch {
-  background-color: rgba($positive, 0.4);
-  &:after {
-    left: 16px;
-    background-color: $positive;
-    border: darken($positive, 20%);
+  input[type=checkbox] {
+    display: none;
+  }
+  input[type=checkbox]:checked + .custom-checkbox .svg-icon {
+    transform: scale(1);
+  }
+  .custom-checkbox:hover {
+    background-color: rgba(0, 0, 0, 0.05);
   }
 }
 
 .form-group {
   margin-bottom: $-s;
-  textarea {
-    display: block;
-    width: 100%;
-    min-height: 64px;
+}
+
+.setting-list > div {
+  border-bottom: 1px solid #DDD;
+  padding: $-xl 0;
+  &:last-child {
+    border-bottom: none;
   }
 }
+.setting-list-label {
+  color: #444;
+  font-size: 1rem;
+}
+.setting-list-label + p.small {
+  margin-bottom: 0;
+}
 
 .simple-code-input {
   background-color: #F8F8F8;
   font-family: monospace;
   font-size: 12px;
   min-height: 100px;
+  display: block;
+  width: 100%;
 }
 
 .form-group {

resources/assets/sass/_grid.scss

@@ -60,6 +60,9 @@ body.flexbox {
   &.auto-height {
     min-height: 0;
   }
+  &.fill-width {
+    width: 100%;
+  }
 }
 
 .tri-layout-container {
@@ -211,7 +214,6 @@ div[class^="col-"] img {
   &.large-gap {
     grid-column-gap: $-xl;
     grid-row-gap: $-xl;
-    justify-items: start;
   }
 }
 
@@ -272,6 +274,12 @@ div[class^="col-"] img {
   .grid.left-focus, .grid.right-focus {
     grid-template-columns: 1fr;
   }
+  .grid.right-focus.reverse-collapse > *:nth-child(2) {
+    order: 0;
+  }
+  .grid.right-focus.reverse-collapse > *:nth-child(1) {
+    order: 1;
+  }
 }
 
 @include smaller-than($s) {

resources/assets/sass/_lists.scss

@@ -396,3 +396,18 @@ ul.pagination {
   padding: $-m 0;
 }
 
+.active-link-list {
+  a {
+    display: inline-block;
+    padding: $-s;
+  }
+  a:not(.active) {
+    color: #444;
+    fill: #444;
+  }
+  a:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+    border-radius: 3px;
+    text-decoration: none;
+  }
+}

resources/assets/sass/_tables.scss

@@ -19,13 +19,13 @@ table {
 
 table.table {
   width: 100%;
-  tr {
-    border-bottom: 1px solid #DDD;
+  tr td, tr th {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   }
   th, td {
     text-align: left;
     border: none;
-    padding: $-xs $-xs;
+    padding: $-s $-s;
     vertical-align: middle;
     margin: 0;
   }
@@ -44,6 +44,9 @@ table.table {
   td.actions {
     overflow: visible;
   }
+  a {
+    display: inline-block;
+  }
 }
 
 table.no-style {

resources/assets/sass/_text.scss

@@ -83,6 +83,10 @@ h5, h6 {
   font-size: 2rem;
 }
 
+h2.list-heading {
+  font-size: 1.333rem;
+}
+
 /*
  * Link styling
  */