SONAR-10671 Reduce render-blocking stylesheets (#297)

1 files changed, 542 insertions, 0 deletions

diff --git a/server/sonar-web/src/main/js/components/search-navigator.css b/server/sonar-web/src/main/js/components/search-navigator.css
new file mode 100644
index 00000000000..f468de3ee13
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/search-navigator.css
@@ -0,0 +1,542 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2018 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.
+ */
+
+/* TODO this file is HUGE and should be cut into smaller components */
+
+.search-navigator.sticky .search-navigator-workspace-header {
+  position: fixed;
+  z-index: 50;
+  top: 0;
+  left: 300px;
+  right: 0;
+}
+
+.search-navigator.sticky .search-navigator-workspace-list,
+.search-navigator.sticky .search-navigator-workspace-details {
+  padding-top: 43px;
+}
+
+.search-navigator-facet-box {
+  background-color: var(--barBackgroundColor);
+  font-size: var(--baseFontSize);
+}
+
+.search-navigator-facet-box.leak-facet-box {
+  background-color: var(--leakColor);
+  border: 1px solid var(--leakBorderColor);
+}
+
+.leak-facet-box:not(.hidden) + .leak-facet-box {
+  border-top: none;
+}
+
+.search-navigator-facet-box-forbidden {
+  background-color: transparent;
+  opacity: 0.5;
+}
+
+.search-navigator-facet-box-forbidden .search-navigator-facet-list,
+.search-navigator-facet-box-forbidden .search-navigator-facet-empty,
+.search-navigator-facet-box-forbidden .search-navigator-facet-container {
+  display: none;
+}
+
+.search-navigator-facet-box-forbidden .search-navigator-facet-header {
+  color: var(--secondFontColor);
+}
+
+.search-navigator-facet-box-forbidden .search-navigator-facet-header:hover {
+  color: var(--blue);
+}
+
+.search-navigator-facet-box-forbidden .search-navigator-facet-header {
+  cursor: default;
+}
+
+.search-navigator-facet-box-forbidden .search-navigator-facet-header:hover {
+  color: var(--secondFontColor);
+}
+
+.search-navigator-facet {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  width: 100%;
+  margin: 0 0 1px 0;
+  padding: 4px 6px;
+  border: none;
+  border-radius: 2px;
+  box-sizing: border-box;
+  white-space: normal;
+  overflow: hidden;
+  font-size: 0;
+  opacity: 0.3;
+  cursor: not-allowed;
+  transition: none;
+}
+
+a.search-navigator-facet {
+  opacity: 1;
+  cursor: pointer;
+}
+
+a.search-navigator-facet .facet-name {
+  color: var(--baseFontColor);
+}
+
+a.search-navigator-facet:hover,
+a.search-navigator-facet:focus {
+  border: 1px solid var(--blue);
+  padding: 3px 5px;
+}
+
+a.search-navigator-facet:hover .facet-stat,
+a.search-navigator-facet:focus .facet-stat {
+  top: -1px;
+  right: -1px;
+}
+
+.search-navigator-facet.facet-category {
+  opacity: 1;
+  cursor: default;
+}
+
+.search-navigator-facet.facet-category .facet-name {
+  color: var(--secondFontColor);
+}
+
+.search-navigator-facet .facet-name {
+  line-height: 16px;
+  background-color: var(--barBackgroundColor);
+  color: var(--secondFontColor);
+  font-size: var(--smallFontSize);
+  white-space: nowrap;
+}
+
+.search-navigator-facet .facet-stat {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin-left: 5px;
+  padding: 5px 5px;
+  background-color: var(--barBackgroundColor);
+  color: var(--secondFontColor);
+  font-size: var(--smallFontSize);
+}
+
+.search-navigator-facet .facet-stat:before {
+  content: ' ';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 100%;
+  width: 10px;
+  background-image: linear-gradient(
+    to right,
+    rgba(243, 243, 243, 0),
+    var(--barBackgroundColor) 75%
+  );
+}
+
+.search-navigator-facet .facet-toggle {
+  display: none;
+  float: left;
+  height: 16px;
+  line-height: 16px;
+  margin-top: -1px;
+  padding: 0 5px;
+  border-radius: 2px;
+  font-size: 11px;
+  text-transform: lowercase;
+}
+
+.search-navigator-facet .facet-toggle:hover {
+  color: var(--baseFontColor);
+}
+
+.search-navigator-facet .facet-toggle-active.facet-toggle-green {
+  background-color: var(--green);
+  color: #ffffff;
+}
+
+.search-navigator-facet .facet-toggle-active.facet-toggle-red {
+  background-color: var(--red);
+  color: #ffffff;
+}
+
+.leak-facet-box .search-navigator-facet .facet-name {
+  background-color: var(--leakColor);
+}
+
+.leak-facet-box .search-navigator-facet .facet-stat {
+  background-color: var(--leakColor);
+}
+
+.leak-facet-box .search-navigator-facet .facet-stat:before {
+  background-image: linear-gradient(to right, rgba(251, 243, 213, 0), var(--leakColor) 75%);
+}
+
+.search-navigator-facet.active {
+  border: 1px solid var(--blue);
+  padding: 3px 5px;
+  background-color: var(--lightBlue);
+  text-decoration: none;
+}
+
+.search-navigator-facet.active .facet-name {
+  background-color: var(--lightBlue);
+}
+
+.search-navigator-facet.active .facet-stat {
+  border-color: var(--blue);
+  background-color: var(--lightBlue);
+  top: -1px;
+  right: -1px;
+}
+
+.search-navigator-facet.active .facet-stat:before {
+  background-image: linear-gradient(to right, rgba(202, 227, 242, 0), var(--lightBlue) 75%);
+}
+
+.search-navigator-facet.active .facet-toggle {
+  display: inline;
+}
+
+.search-navigator-facet.compare .facet-toggle {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.search-navigator-facet.compare .facet-toggle.facet-toggle-green {
+  background-color: var(--green);
+  color: #ffffff;
+}
+
+.search-navigator-facet.compare .facet-toggle.facet-toggle-red {
+  background-color: transparent;
+  color: var(--secondFontColor);
+}
+
+.search-navigator-facet-half {
+  width: 45%;
+}
+
+.search-navigator-facet-half:nth-child(odd) {
+  margin-right: 10%;
+}
+
+.search-navigator-facet-highlight-under-container {
+  margin-bottom: 1px;
+}
+
+.search-navigator-facet-highlight-under-container .search-navigator-facet {
+  margin-bottom: 0;
+}
+
+.search-navigator-facet-highlight-under-container .search-navigator-facet:hover,
+.search-navigator-facet-highlight-under-container .search-navigator-facet.active {
+  border-bottom: none;
+  padding-bottom: 4px;
+  border-radius: 2px 2px 0 0;
+}
+
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet:hover
+  ~ .search-navigator-facet,
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet {
+  padding-left: 5px;
+  padding-right: 5px;
+  border-left: 1px solid var(--blue);
+  border-right: 1px solid var(--blue);
+  border-radius: 0;
+}
+
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet:hover
+  ~ .search-navigator-facet
+  .facet-stat,
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet
+  .facet-stat {
+  right: -1px;
+}
+
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet:hover
+  ~ .search-navigator-facet:last-of-type,
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet:last-of-type {
+  padding-bottom: 3px;
+  border-bottom: 1px solid var(--blue);
+  border-radius: 0 0 2px 2px;
+}
+
+.search-navigator-facet-highlight-under-container .search-navigator-facet:hover:last-of-type,
+.search-navigator-facet-highlight-under-container .search-navigator-facet.active:last-of-type {
+  padding-bottom: 3px;
+  border-bottom: 1px solid var(--blue);
+  border-radius: 2px;
+}
+
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet {
+  background-color: var(--lightBlue);
+  text-decoration: none;
+}
+
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet
+  .facet-name {
+  background-color: var(--lightBlue);
+}
+
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet
+  .facet-stat {
+  border-color: var(--blue);
+  background-color: var(--lightBlue);
+}
+
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet
+  .facet-stat:before {
+  background-image: linear-gradient(to right, rgba(202, 227, 242, 0), var(--lightBlue) 75%);
+}
+
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet
+  .facet-toggle {
+  display: inline;
+}
+
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet:hover,
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet:hover
+  ~ .search-navigator-facet {
+  background-color: #a1cde8;
+  text-decoration: none;
+}
+
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet:hover
+  .facet-name,
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet:hover
+  ~ .search-navigator-facet
+  .facet-name {
+  background-color: #a1cde8;
+}
+
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet:hover
+  .facet-stat,
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet:hover
+  ~ .search-navigator-facet
+  .facet-stat {
+  border-color: var(--blue);
+  background-color: #a1cde8;
+}
+
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet:hover
+  .facet-stat:before,
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet:hover
+  ~ .search-navigator-facet
+  .facet-stat:before {
+  background-image: linear-gradient(to right, rgba(161, 205, 232, 0), #a1cde8 75%);
+}
+
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet:hover
+  .facet-toggle,
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet:hover
+  ~ .search-navigator-facet
+  .facet-toggle {
+  display: inline;
+}
+
+.search-navigator-facet-header {
+  display: block;
+  flex-shrink: 0;
+  padding: 8px 0;
+  color: var(--baseFontColor);
+  font-weight: 600;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.search-navigator-facet-header > a {
+  border-bottom: none;
+  color: var(--baseFontColor);
+}
+
+.search-navigator-facet-header > a:hover {
+  color: var(--blue);
+}
+
+.search-navigator-facet-header > .note {
+  font-weight: 400;
+}
+
+.search-navigator-facet-header-value {
+  display: block;
+  overflow: hidden;
+}
+
+.search-navigator-facet-header-value > .badge {
+  display: block;
+}
+
+.search-navigator-facet-header-button {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.search-navigator-facet-header-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.search-navigator-facet-list {
+  padding-bottom: var(--gridSize);
+  font-size: 0;
+}
+
+.search-navigator-facet-empty {
+  margin: 0 0 0 0;
+  padding: 0 10px 10px;
+  color: var(--baseFontColor);
+  font-size: var(--smallFontSize);
+  white-space: nowrap;
+}
+
+.search-navigator-facet-footer {
+  display: block;
+  padding-bottom: var(--gridSize);
+  border-bottom: none;
+}
+
+.search-navigator-facet-container {
+  margin-top: 6px;
+  padding: 0 10px 16px;
+}
+
+.search-navigator-date-facet-selection {
+  position: relative;
+  padding-left: var(--gridSize);
+  font-size: var(--smallFontSize);
+}
+
+.search-navigator-date-facet-selection:before,
+.search-navigator-date-facet-selection:after {
+  display: table;
+  content: '';
+  line-height: 0;
+}
+
+.search-navigator-date-facet-selection:after {
+  clear: both;
+}
+
+.search-navigator-date-facet-selection .date-input-control-input {
+  width: 115px !important;
+}
+
+.search-navigator-date-facet-selection-dropdown-left {
+  float: left;
+  border-bottom: none;
+}
+
+.search-navigator-date-facet-selection-dropdown-right {
+  float: right;
+  border-bottom: none;
+}
+
+.search-navigator-date-facet-selection-input-left {
+  position: absolute;
+  left: 0;
+  width: 100px;
+  visibility: hidden;
+}
+
+.search-navigator-date-facet-selection-input-right {
+  position: absolute;
+  right: 0;
+  width: 100px;
+  visibility: hidden;
+}
+
+.search-navigator-date-facet-selection
+  .date-input-control:not(:nth-of-type(1))
+  .date-input-calendar {
+  left: auto;
+  right: 0;
+}
+
+.search-navigator-filters {
+  position: relative;
+  padding: 5px 10px;
+  background-color: var(--barBackgroundColor);
+}
+
+.search-navigator-filters:before,
+.search-navigator-filters:after {
+  display: table;
+  content: '';
+  line-height: 0;
+}
+
+.search-navigator-filters:after {
+  clear: both;
+}
+
+.search-navigator-filters-header {
+  margin-bottom: 12px;
+  padding-bottom: 11px;
+  border-bottom: 1px solid var(--barBorderColor);
+}
+.search-navigator-intro {
+  width: 500px;
+  margin: 0 auto;
+  padding-top: 100px;
+}