12479: Add Selectize via npm package

[arvados.git] / apps / workbench / app / assets / stylesheets / application.css.scss

diff --git a/apps/workbench/app/assets/stylesheets/application.css.scss b/apps/workbench/app/assets/stylesheets/application.css.scss
index c986f034bcc6a0e19f8525659201a3fe8f6cb74c..b0c0100161b0eb7e26dddfe74bda32443985c472 100644 (file)
--- a/apps/workbench/app/assets/stylesheets/application.css.scss
+++ b/apps/workbench/app/assets/stylesheets/application.css.scss
@@ -1,3 +1,7 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
 /*
  * This is a manifest file that'll be compiled into application.css, which will include all the files
  * listed below.
@@ -11,6 +15,9 @@
  *= require_self
  *= require bootstrap
  *= require bootstrap3-editable/bootstrap-editable
+ *= require morris
+ *= require selectize
+ *= require selectize.default
  *= require_tree .
  */
 
@@ -47,6 +54,9 @@ table.table-justforlayout {
     font-size: .8em;
     color: #888;
 }
+.lighten {
+    color: #888;
+}
 .arvados-filename,
 .arvados-uuid {
     font-size: .8em;
@@ -89,6 +99,16 @@ form.small-form-margin {
 .nowrap {
     white-space: nowrap;
 }
+input.select-on-focus {
+    font-family: monospace;
+    background: inherit;
+    border: thin #ccc solid;
+    border-radius: .2em;
+    padding: .15em .5em;
+}
+input.select-on-focus:focus {
+    border-color: #9bf;
+}
 
 /* top nav */
 $top-nav-bg: #3c163d;
@@ -150,6 +170,10 @@ nav.navbar-fixed-top .navbar-nav.navbar-right > li > a:hover {
     color: #800;
 }
 
+th[data-sort-order] {
+    cursor: pointer;
+}
+
 .inline-progress-container div.progress {
     margin-bottom: 0;
 }
@@ -181,6 +205,10 @@ li.notification {
     padding: 10px;
 }
 
+td.trash-project-msg {
+    white-space: normal;
+}
+
 // See HeaderRowFixer in application.js
 table.table-fixed-header-row {
     width: 100%;
@@ -196,14 +224,15 @@ table.table-fixed-header-row tbody {
     top:1.5em;
 }
 
-/* Setting the height needs to be fixed with javascript. */
 .dropdown-menu {
-    padding-right: 20px;
-    max-height: 440px;
-    width: 400px;
+    max-height: 30em;
     overflow-y: auto;
 }
 
+.dropdown-menu a {
+    cursor: pointer;
+}
+
 .row-fill-height, .row-fill-height>div[class*='col-'] {
     display: flex;
 }
@@ -244,3 +273,52 @@ div.pane-content iframe {
   width: 100%;
   border: none;
 }
+span.editable-textile {
+  display: inline-block;
+}
+.text-overflow-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.time-label-divider {
+  font-size: 80%;
+  min-width: 1em;
+  padding: 0px 2px 0px 0px;
+}
+.task-summary-status {
+  font-size: 80%;
+}
+#page-wrapper > div > h2 {
+  margin-top: 0px;
+}
+
+.compute-summary-numbers td {
+  font-size: 150%;
+}
+
+.arv-log-refresh-control {
+  display: none;
+}
+
+/* Hide Angular content until Angular is ready */
+[ng\:cloak], [ng-cloak], .ng-cloak {
+    display: none !important;
+}
+
+/* tabs */
+ul.nav.nav-tabs {
+    font-size: 90%
+}
+
+.hover-dropdown:hover .dropdown-menu {
+  display: block;
+}
+
+.arv-description-as-subtitle .editable-inline,
+.arv-description-as-subtitle .editable-inline .form-group,
+.arv-description-as-subtitle .editable-inline .form-group .editable-input,
+.arv-description-as-subtitle .editable-inline .form-group .editable-input textarea,
+{
+    width: 98%!important;
+}