UI: SONAR-9355 Create onboarding tutorial (#2137)

4 files changed, 93 insertions, 0 deletions

diff --git a/server/sonar-web/src/main/less/components/modals.less b/server/sonar-web/src/main/less/components/modals.less
index 2920733b485..4853c080759 100644
--- a/server/sonar-web/src/main/less/components/modals.less
+++ b/server/sonar-web/src/main/less/components/modals.less
@@ -43,6 +43,11 @@
   opacity: 1;
 }
 
+.modal-medium {
+  width: 800px;
+  margin-left: -400px;
+}
+
 .modal-large {
   width: 90vw;
   margin-left: -45vw;
diff --git a/server/sonar-web/src/main/less/components/side-tabs.less b/server/sonar-web/src/main/less/components/side-tabs.less
new file mode 100644
index 00000000000..b7cd0da337c
--- /dev/null
+++ b/server/sonar-web/src/main/less/components/side-tabs.less
@@ -0,0 +1,86 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+@import (reference) "../mixins";
+@import (reference) "../variables";
+
+.side-tabs-layout {
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+
+  .modal & {
+    padding-left: 10px;
+    background-color: @barBackgroundColor;
+  }
+}
+
+.side-tabs-main {
+  position: relative;
+  z-index: 2;
+  flex-grow: 1;
+  padding: 15px 20px;
+  border: 1px solid @barBorderColor;
+  box-sizing: border-box;
+  background-color: #fff;
+
+  .modal & {
+    border-top: none;
+    border-bottom: none;
+    border-right: none;
+  }
+}
+
+.side-tabs-side {
+  position: relative;
+  z-index: 3;
+  width: 160px;
+  flex-shrink: 0;
+  padding: 10px 0;
+  box-sizing: border-box;
+  transform: translateX(1px);
+}
+
+.side-tabs-menu > li {
+  margin-bottom: 4px;
+}
+
+.side-tabs-menu > li > a {
+  display: block;
+  padding: 10px 10px;
+  line-height: 1.5;
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+  border: 1px solid @barBorderColor;
+  border-right: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color 0.3s ease, background-color 0.3s ease;
+}
+
+.side-tabs-menu > li > a:hover,
+.side-tabs-menu > li > a:focus,
+.side-tabs-menu > li > a.active {
+  background-color: #fff;
+}
+
+.side-tabs-menu > li > a.active {
+  color: #444;
+  cursor: default;
+}
diff --git a/server/sonar-web/src/main/less/init/type.less b/server/sonar-web/src/main/less/init/type.less
index 75fe1839413..d26cae210ba 100644
--- a/server/sonar-web/src/main/less/init/type.less
+++ b/server/sonar-web/src/main/less/init/type.less
@@ -114,6 +114,7 @@ small,
 .text-top     { vertical-align: top; }
 .text-middle  { vertical-align: middle; }
 .text-bottom  { vertical-align: bottom; }
+.text-text-top { vertical-align: text-top !important; }
 
 
 // Overflow
diff --git a/server/sonar-web/src/main/less/sonar.less b/server/sonar-web/src/main/less/sonar.less
index 876ad49a4e2..29e5875e709 100644
--- a/server/sonar-web/src/main/less/sonar.less
+++ b/server/sonar-web/src/main/less/sonar.less
@@ -58,6 +58,7 @@
 @import "components/search";
 @import "components/pills";
 @import "components/react-select";
+@import "components/side-tabs";
 
 @import "pages/coding-rules";
 @import "pages/maintenance";