Resolve "Make project and features visibility settings less confusing"

2 files changed, 161 insertions, 35 deletions

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index becdd7ff35b..3857226cddb 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -579,6 +579,11 @@ $project-breadcrumb-color: #999;
 $project-private-forks-notice-odd: $green-600;
 $project-network-controls-color: #888;
 
+$feature-toggle-color: #fff;
+$feature-toggle-text-color: #fff;
+$feature-toggle-color-disabled: #999;
+$feature-toggle-color-enabled: #4a8bee;
+
 /*
 * Runners
 */
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index dd600a27545..94e4f4334d4 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -10,41 +10,6 @@
 .edit-project,
 .import-project {
 
-  .sharing-and-permissions {
-    .header {
-      padding-top: $gl-vert-padding;
-    }
-
-    .label-light {
-      margin-bottom: 0;
-    }
-
-    .help-block {
-      margin-top: 0;
-    }
-
-    .form-group {
-      margin-bottom: 5px;
-    }
-
-    > .form-group {
-      padding-left: 0;
-    }
-
-    select option[disabled] {
-      display: none;
-    }
-  }
-
-  select {
-    transition: background 2s ease-out;
-
-    &.highlight-changes {
-      background: $highlight-changes-color;
-      transition: none;
-    }
-  }
-
   .help-block {
     margin-bottom: 10px;
   }
@@ -90,6 +55,162 @@
   }
 }
 
+.toggle-wrapper {
+  margin-top: 5px;
+}
+
+.project-feature-row > .toggle-wrapper {
+  margin: 10px 0;
+}
+
+.project-visibility-setting,
+.project-feature-settings {
+  border: 1px solid $border-color;
+  padding: 10px 32px;
+
+  @media (max-width: $screen-xs-min) {
+    padding: 10px 20px;
+  }
+}
+
+.project-visibility-setting .request-access {
+  line-height: 2;
+}
+
+.project-feature-settings {
+  background: $gray-lighter;
+  border-top: none;
+  margin-bottom: 16px;
+}
+
+.project-repo-select {
+  transition: background 2s ease-out;
+
+  &:disabled {
+    opacity: 0.75;
+  }
+
+  .highlight-changes & {
+    background: $highlight-changes-color;
+    transition: none;
+  }
+}
+
+.project-feature-controls {
+  display: flex;
+  align-items: center;
+  margin: 8px 0;
+  max-width: 432px;
+
+  .toggle-wrapper {
+    flex: 0;
+    margin-right: 10px;
+  }
+
+  .select-wrapper {
+    flex: 1;
+  }
+}
+
+.project-feature-setting-group {
+  padding-left: 32px;
+
+  .project-feature-controls {
+    max-width: 400px;
+  }
+
+  @media (max-width: $screen-xs-min) {
+    padding-left: 20px;
+  }
+}
+
+.project-feature-toggle {
+  position: relative;
+  border: none;
+  outline: 0;
+  display: block;
+  width: 100px;
+  height: 24px;
+  cursor: pointer;
+  user-select: none;
+  background: $feature-toggle-color-disabled;
+  border-radius: 12px;
+  padding: 3px;
+  transition: all .4s ease;
+
+  &::selection,
+  &::before::selection,
+  &::after::selection {
+    background: none;
+  }
+
+  &::before {
+    color: $feature-toggle-text-color;
+    font-size: 12px;
+    line-height: 24px;
+    position: absolute;
+    top: 0;
+    left: 25px;
+    right: 5px;
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    animation: animate-disabled .2s ease-in;
+    content: attr(data-disabled-text);
+  }
+
+  &::after {
+    position: relative;
+    display: block;
+    content: "";
+    width: 22px;
+    height: 18px;
+    left: 0;
+    border-radius: 9px;
+    background: $feature-toggle-color;
+    transition: all .2s ease;
+  }
+
+  &.checked {
+    background: $feature-toggle-color-enabled;
+
+    &::before {
+      left: 5px;
+      right: 25px;
+      animation: animate-enabled .2s ease-in;
+      content: attr(data-enabled-text);
+    }
+
+    &::after {
+      left: calc(100% - 22px);
+    }
+  }
+
+  &.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  @media (max-width: $screen-xs-min) {
+    width: 50px;
+
+    &::before,
+    &.checked::before {
+      display: none;
+    }
+  }
+
+  @keyframes animate-enabled {
+    0%, 35% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+
+  @keyframes animate-disabled {
+    0%, 35% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+}
+
 .project-home-panel,
 .group-home-panel {
   padding-top: 24px;