[6.x] Graph LESS to SASS (#23348) #23363

NOTICE.txt

@@ -185,25 +185,3 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 
----
-This product uses "radioactive button" styles that were published on
-https://zurb.com/playground/radioactive-buttons under an "MIT" License.
-
-Copyright (c) ZURB
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in the
-Software without restriction, including without limitation the rights to use, copy,
-modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
-and to permit persons to whom the Software is furnished to do so, subject to the
-following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
-INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
-PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
-HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-

x-pack/plugins/graph/index.js

@@ -23,6 +23,7 @@ export function graph(kibana) {
         icon: 'plugins/graph/icon.png',
         description: 'Graph exploration',
         main: 'plugins/graph/app',
+        styleSheetPath: `${__dirname}/public/index.scss`,
       },
       hacks: ['plugins/graph/hacks/toggle_app_link_in_nav'],
       home: ['plugins/graph/register_feature'],

x-pack/plugins/graph/public/_main.scss

@@ -0,0 +1,104 @@
+/**
+ * Nodes
+ */
+
+.gphNode-disabled{
+  opacity:0.3;
+}
+
+.gphNode__circle {
+  fill: $euiColorMediumShade;
+
+  // SASSTODO: Can't definitively change modifier class
+  // because it's not easy to tell what's a class and what's
+  // part of the data object since they are named the same
+  &.selectedNode {
+    stroke-width: $euiSizeXS;
+    stroke: transparentize($euiColorPrimary, .25);
+  }
+}
+
+.gphNode__text {
+  fill: $euiColorDarkestShade;
+
+  &--lowOpacity{
+    fill-opacity: 0.5;
+  }
+}
+
+
+/**
+ * Forms
+ */
+
+.gphFormGroup--small {
+  margin-bottom: $euiSizeS;
+}
+
+.gphColorPicker__color,
+.gphIconPicker__icon {
+  margin: $euiSizeXS;
+  cursor: pointer;
+
+  &.selectedNode,
+  &:hover,
+  &:focus {
+    transform: scale(1.4);
+  }
+}
+
+.gphIconPicker__icon {
+  opacity: .7;
+
+  &.selectedNode,
+  &:hover,
+  &:focus {
+    opacity: 1;
+  }
+}
+
+.gphIndexSelect{
+  max-width: $euiSizeL * 10;
+  margin-right: $euiSizeXS;
+
+  &-unselected {
+    @include euiFocusRing;
+  }
+}
+
+.gphAddButton {
+  background: $euiColorPrimary;
+  color: $euiColorEmptyShade;
+  border-radius: 50%;
+  font-size: $euiFontSizeXS;
+  margin: 2px $euiSizeS 0 $euiSizeXS;
+  @include size(26px); // same as svg
+
+  &:hover:not(:disabled) {
+    background: shadeOrTint($euiColorPrimary, 10%, 10%);
+    cursor: pointer;
+  }
+
+  &:disabled {
+    background: $euiColorMediumShade;
+    cursor: not-allowed;
+  }
+
+  &-focus {
+    @include euiFocusRing;
+  }
+}
+
+.gphFieldList {
+  min-width: $euiSizeXL * 10;
+}
+
+/**
+ * Utilities
+ */
+
+.gphNoUserSelect{
+  user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+}

x-pack/plugins/graph/public/app.js

@@ -25,7 +25,6 @@ import { KibanaParsedUrl } from 'ui/url/kibana_parsed_url';
 
 import { XPackInfoProvider } from 'plugins/xpack_main/services/xpack_info';
 
-import './less/main.less';
 import appTemplate from './templates/index.html';
 
 import './angular-venn-simple.js';

x-pack/plugins/graph/public/index.scss

@@ -0,0 +1,14 @@
+// Import the EUI global scope so we can use EUI constants
+@import 'ui/public/styles/_styling_constants';
+
+/* Graph plugin styles */
+
+// Prefix all styles with "gph" to avoid conflicts.
+// Examples
+//   gphChart
+//   gphChart__legend
+//   gphChart__legend--small
+//   gphChart__legend-isLoading
+
+@import './main';
+@import './templates/index';