SONAR-14617 Embed the sonar-ui-common library

1 files changed, 322 insertions, 0 deletions

diff --git a/server/sonar-ui-common/components/controls/buttons.css b/server/sonar-ui-common/components/controls/buttons.css
new file mode 100644
index 00000000000..25a6944a348
--- /dev/null
+++ b/server/sonar-ui-common/components/controls/buttons.css
@@ -0,0 +1,322 @@
+/*
+ * Sonar UI Common
+ * Copyright (C) 2019-2020 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.
+ */
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  height: var(--controlHeight);
+  line-height: calc(var(--controlHeight) - 2px);
+  padding: 0 var(--gridSize);
+  border: 1px solid var(--darkBlue);
+  border-radius: 2px;
+  box-sizing: border-box;
+  background: transparent;
+  color: var(--darkBlue);
+  font-weight: 600;
+  font-size: var(--smallFontSize);
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+}
+
+.button:hover,
+.button.button-active {
+  background: var(--darkBlue);
+  color: var(--white);
+}
+
+.button:active {
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+}
+
+.button:focus {
+  box-shadow: 0 0 0 3px rgba(35, 106, 151, 0.25);
+}
+
+.button-primary {
+  background: var(--darkBlue);
+  border-color: var(--darkBlue);
+  color: var(--white);
+}
+
+.button-primary:hover {
+  background: var(--veryDarkBlue);
+  border-color: var(--veryDarkBlue);
+}
+
+.button-primary.button-light {
+  background: var(--blue);
+  border-color: var(--blue);
+  color: var(--white);
+}
+
+.button-primary.button-light:hover {
+  background: var(--darkBlue);
+  border-color: var(--darkBlue);
+}
+
+.button.disabled {
+  color: var(--disableGrayText) !important;
+  border-color: var(--disableGrayBorder) !important;
+  background: var(--disableGrayBg) !important;
+  cursor: not-allowed !important;
+  box-shadow: none !important;
+}
+
+/* #region .button-red */
+.button-red {
+  border-color: var(--red);
+  color: var(--red);
+}
+
+.button-red:hover,
+.button-red.active {
+  background: var(--red);
+  color: var(--white);
+}
+
+.button-red:focus {
+  box-shadow: 0 0 0 3px rgba(212, 51, 63, 0.25);
+}
+
+/* #endregion */
+
+/* #region .button-success */
+.button-success {
+  border-color: var(--green);
+  color: var(--green);
+}
+
+.button-success:hover,
+.button-success.active {
+  background: var(--green);
+  color: var(--white);
+}
+
+.button-success:focus {
+  box-shadow: 0 0 0 3px rgba(0, 170, 0, 0.25);
+}
+
+/* #endregion */
+
+/* #region .button-link */
+.button-link {
+  display: inline-flex;
+  height: auto;
+  /* Keep this to not inherit the height from .button */
+  line-height: 1;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: var(--darkBlue);
+  border-bottom: 1px solid var(--lightBlue);
+  font-weight: 400;
+  font-size: inherit;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-bottom 0.2s ease;
+}
+
+.dropdown .button-link {
+  border-bottom: none;
+}
+
+.button-link:hover {
+  background: transparent;
+  color: var(--blue);
+}
+
+.button-link:active,
+.button-link:focus {
+  box-shadow: none;
+  outline: 1px dotted var(--blue);
+}
+
+.button-link.disabled {
+  color: var(--secondFontColor);
+  background: transparent !important;
+  cursor: default;
+}
+
+/* #endregion */
+
+.button-small {
+  height: var(--smallControlHeight);
+  line-height: 18px;
+  padding: 0 6px;
+  font-size: 11px;
+}
+
+.button-tiny {
+  height: var(--tinyControlHeight);
+  line-height: var(--tinyControlHeight);
+  padding: 0 calc(var(--gridSize) / 2);
+}
+
+.button-large {
+  height: var(--largeControlHeight);
+  padding: 0 16px;
+  font-size: var(--mediumFontSize);
+}
+
+.button-huge {
+  flex-direction: column;
+  padding: calc(2 * var(--gridSize));
+  width: 200px;
+  height: 200px;
+  background-color: var(--white);
+  border: solid 1px var(--white);
+  border-radius: 3px;
+  transition: all 0.2s ease;
+  box-shadow: 0 1px 1px 1px var(--barBorderColor);
+}
+
+.button-huge:hover,
+.button-huge:focus,
+.button-huge:active {
+  background-color: var(--white);
+  color: var(--darkBlue);
+  box-shadow: var(--defaultShadow);
+  transform: translateY(-2px);
+}
+
+/* #region .button-group */
+/* TODO drop usage of this class in SQ (already dropped from SC) */
+.button-group {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 0;
+  white-space: nowrap;
+}
+
+.button-group > button,
+.button-group > .button {
+  position: relative;
+  z-index: var(--normalZIndex);
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0;
+  cursor: pointer;
+}
+
+.button-group > .button:hover:not(.disabled),
+.button-group > .button:focus:not(.disabled),
+.button-group > .button:active:not(.disabled),
+.button-group > .button.active:not(.disabled) {
+  z-index: var(--aboveNormalZIndex);
+}
+
+.button-group > .button.disabled {
+  z-index: var(--belowNormalZIndex);
+}
+
+.button-group > .button:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.button-group > .button:not(:last-child):not(.dropdown-toggle) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.button-group > .button + .button {
+  margin-left: -1px;
+}
+
+.button-group > a:not(.button) {
+  vertical-align: middle;
+  margin: 0 8px;
+  font-size: var(--smallFontSize);
+}
+
+/* #endregion */
+
+/* #region .button-icon */
+.button-icon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  vertical-align: middle;
+  width: var(--controlHeight);
+  height: var(--controlHeight);
+  padding: 0;
+  border: none;
+  color: inherit;
+}
+
+.button-icon.button-small {
+  width: var(--smallControlHeight);
+  height: var(--smallControlHeight);
+  padding: 0;
+}
+
+.button-icon.button-small svg {
+  margin-top: 0;
+}
+
+.button-icon.button-tiny {
+  width: var(--tinyControlHeight);
+  height: var(--tinyControlHeight);
+  padding: 0;
+}
+
+.button-icon.button-tiny svg {
+  margin-top: 0;
+}
+
+.button-icon:hover,
+.button-icon:focus {
+  background-color: currentColor;
+}
+
+.button-icon:not(.disabled):hover svg,
+.button-icon:not(.disabled):focus svg {
+  color: var(--white);
+}
+
+.button.button-icon.disabled {
+  background: transparent !important;
+}
+
+/* #endregion */
+
+.button-list {
+  display: inline-flex;
+  justify-content: space-between;
+  height: auto;
+  border: 1px solid var(--barBorderColor);
+  padding: var(--gridSize);
+  margin: calc(var(--gridSize) / 2);
+  color: var(--secondFontColor);
+  font-weight: normal;
+}
+
+.button-list:hover {
+  background-color: white;
+  border-color: var(--blue);
+  color: var(--darkBlue);
+}
+
+.no-select {
+  user-select: none !important;
+}