feat: button styles

packages/grafnode-run/src/pages/_app.js

@@ -6,6 +6,8 @@ import 'react-tabs/style/react-tabs.css';
 import 'codemirror/lib/codemirror.css';
 import 'graphiql/graphiql.min.css';
 
+import '../styles/app.scss';
+
 function SafeHydrate({ children }) {
   return (
     <div suppressHydrationWarning>

packages/grafnode-run/src/styles/_buttons.scss

@@ -0,0 +1,90 @@
+.btn {
+  text-align: center;
+  white-space: nowrap;
+  outline: none;
+  box-shadow: none;
+  border-radius: 3px;
+}
+
+.btn-sm {
+  padding: .215rem .6rem .215rem .6rem;
+}
+
+.btn-md {
+  padding: .4rem 1.1rem;
+  line-height: 1.47;
+}
+
+.btn-default {
+  &:active,
+  &:hover,
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
+}
+
+.btn-close {
+  color: #212529;
+  background: white;
+  border: solid 1px white;
+  padding: .215rem .6rem .215rem .6rem;
+
+  &:hover,
+  &:focus {
+    outline: none;
+    box-shadow: none;
+    border: solid 1px #696969;
+  }
+}
+
+.btn-secondary {
+  color: #212529;
+  background: #e2e6ea;
+  border: solid 1px #dae0e5;
+
+  .btn-icon {
+    color: #3f3f3f;
+  }
+
+  &:hover,
+  &:focus {
+    border-color: #696969;
+    outline: none;
+    box-shadow: none;
+  }
+
+  &:disabled {
+    color: #545454;
+    background: #efefef;
+    border: solid 1px rgb(234, 234, 234);
+    cursor: not-allowed;
+  }
+
+  &:disabled.btn-icon {
+    color: #545454;
+  }
+
+  &.btn-gradient {
+    background: linear-gradient(#fff, #e0e0e0);
+    border: solid 1px rgb(191, 191, 191);
+
+    &:hover {
+      border: solid 1px rgb(179, 179, 179);
+      background: linear-gradient(#f6f6f6, #e0e0e0);
+    }
+
+    &:focus,
+    &:active {
+      border: solid 1px rgb(129, 129, 129);
+      outline: none;
+      box-shadow: 0 8px 6px -11px black;
+    }
+
+    &:disabled {
+      color: #545454;
+      background: linear-gradient(#fff, #ececec);
+      border: solid 1px rgb(234, 234, 234);
+    }
+  }
+}

packages/grafnode-run/src/styles/app.scss

@@ -0,0 +1 @@
+@import "buttons";