Add experimental machine learning

app/assets/stylesheets/admin/machine_learning/help.scss

@@ -0,0 +1,7 @@
+.admin .machine-learning-help {
+
+  > code {
+    display: block;
+    white-space: pre-wrap;
+  }
+}

app/assets/stylesheets/admin/machine_learning/scripts.scss

@@ -0,0 +1,60 @@
+.admin .machine-learning-scripts {
+
+  .alert > :first-child {
+    @include has-fa-icon(ban, solid);
+  }
+
+  .success > :first-child {
+    @include has-fa-icon(check-circle, solid);
+  }
+
+  .warning > :first-child {
+    @include has-fa-icon(hourglass-half, solid);
+  }
+
+  .alert,
+  .success,
+  .warning {
+    > :first-child::before {
+      margin-right: $font-icon-margin;
+    }
+  }
+
+  dl {
+    font-size: $base-font-size;
+
+    dt,
+    dd {
+      display: inline;
+    }
+
+    * + dt::before {
+      content: "";
+      display: block;
+    }
+  }
+
+  form {
+    max-width: $global-width * 3 / 4;
+  }
+
+  select {
+    max-width: 100%;
+    width: auto;
+  }
+
+  [type=submit] {
+    @include regular-button;
+    display: block;
+    margin-bottom: 0;
+    margin-top: $line-height;
+
+    &:focus {
+      outline: $outline-focus;
+    }
+
+    &.cancel {
+      @include hollow-button($alert-color);
+    }
+  }
+}

app/assets/stylesheets/admin/machine_learning/setting.scss

@@ -0,0 +1,68 @@
+.admin .machine-learning-setting {
+
+  .card-divider {
+    background: $primary-color;
+    color: $white;
+
+    h3 {
+      margin-top: 0;
+    }
+  }
+
+  [aria-pressed] {
+    @include regular-button;
+    border-radius: $line-height;
+    font-weight: bold;
+    min-width: rem-calc(100);
+    position: relative;
+
+    &:focus {
+      outline: $outline-focus;
+    }
+
+    &::after {
+      background: $white;
+      border-radius: 100%;
+      content: "";
+      display: block;
+      height: 1.75em;
+      position: absolute;
+      transform: translateY(-50%);
+      top: 50%;
+      width: 1.75em;
+    }
+
+    &[aria-pressed=true] {
+      background: $primary-color;
+      padding-right: 2.5em;
+      text-align: left;
+
+      &::after {
+        right: 0.5em;
+      }
+    }
+
+    &[aria-pressed=false] {
+      background: $dark-gray;
+      padding-left: 2.5em;
+      text-align: right;
+
+      &::after {
+        left: 0.5em;
+      }
+    }
+  }
+
+  dl {
+    @include callout-size(map-get($callout-sizes, small));
+  }
+
+  dt {
+    font-weight: normal;
+    margin-bottom: 0;
+  }
+
+  * + dt {
+    margin-top: $line-height;
+  }
+}

app/assets/stylesheets/admin/machine_learning/settings.scss

@@ -0,0 +1,24 @@
+.admin .machine-learning-settings {
+
+  .settings-management {
+    $gap: rem-calc(map-get($grid-column-gutter, medium));
+    display: flex;
+    flex-wrap: wrap;
+    margin-left: -$gap;
+
+    > * {
+      margin-left: $gap;
+      flex-basis: calc((#{rem-calc(720)} - 100%) * 999);
+      flex-grow: 1;
+    }
+
+    .card-section {
+      display: flex;
+      flex-direction: column;
+
+      > :last-child {
+        margin-top: auto;
+      }
+    }
+  }
+}

app/assets/stylesheets/admin/machine_learning/show.scss

@@ -0,0 +1,6 @@
+.admin {
+
+  .experimental-feature {
+    @include has-fa-icon(flask, solid);
+  }
+}

app/assets/stylesheets/admin/menu.scss

@@ -108,6 +108,10 @@
     &.users-link {
       @include icon(user, solid);
     }
+
+    &.ml-link {
+      @include icon(brain, solid);
+    }
   }
 
   li {

app/assets/stylesheets/application.scss

@@ -40,6 +40,7 @@
 @import "budgets/**/*";
 @import "debates/**/*";
 @import "layout/**/*";
+@import "machine_learning/**/*";
 @import "proposals/**/*";
 @import "relationable/**/*";
 @import "sdg/**/*";

app/assets/stylesheets/machine_learning/comments_summary.scss

@@ -0,0 +1,7 @@
+.machine-learning-comments-summary {
+  border-bottom: 1px solid $medium-gray;
+
+  + * {
+    margin-top: $line-height * 1.5;
+  }
+}

app/assets/stylesheets/machine_learning/info.scss

@@ -0,0 +1,5 @@
+.machine-learning-info {
+  @include has-fa-icon(info-circle, solid);
+  float: left;
+  margin-right: $font-icon-margin;
+}