[frontend] Externalize HueButton styles

cloudera · Mar 15, 2021 · 1a84a8c · 1a84a8c
1 parent c81dbce
commit 1a84a8c
Show file tree

Hide file tree

Showing 2 changed files with 132 additions and 114 deletions.
diff --git a/desktop/core/src/desktop/js/components/HueButton.scss b/desktop/core/src/desktop/js/components/HueButton.scss
@@ -0,0 +1,129 @@
+/*
+ Licensed to Cloudera, Inc. under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  Cloudera, Inc. licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+@import './styles/colors';
+@import './styles/variables';
+
+.hue-btn {
+  height: 32px;
+  border-radius: $fluid-border-radius;
+  border: solid 1px $fluid-gray-300;
+  background-color: $fluid-white;
+  color: $fluid-blue-500;
+  padding: 0 12px;
+
+  &.hue-btn-small {
+    font-size: 12px;
+    height: 24px;
+    padding: 0 8px;
+  }
+
+  &.hue-btn-large {
+    font-size: 16px;
+    height: 40px;
+    padding: 0 20px;
+  }
+
+  &:hover {
+    border: solid 1px $fluid-blue-700;
+  }
+
+  &:active {
+    border: solid 1px $fluid-blue-800;
+  }
+
+  &[disabled] {
+    cursor: default;
+    color: $fluid-gray-400;
+    border: solid 1px $fluid-gray-200;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    border: solid 1px $fluid-blue-800;
+    outline: $fluid-blue-100 auto 4px;
+  }
+
+  &.hue-btn-primary:not([disabled]) {
+    color: $fluid-white;
+    background-color: $fluid-blue-500;
+    border: solid 1px $fluid-blue-500;
+
+    &:hover {
+      background-color: $fluid-blue-700;
+      border: solid 1px $fluid-blue-700;
+    }
+
+    &.active {
+      background-color: $fluid-blue-800;
+      border: solid 1px $fluid-blue-800;
+    }
+
+    &:focus-visible {
+      border: solid 1px $fluid-gray-900;
+    }
+  }
+
+  &.hue-btn-alert:not([disabled]) {
+    color: $fluid-white;
+    background-color: $fluid-red-500;
+    border: solid 1px $fluid-red-500;
+
+    &:hover {
+      background-color: $fluid-red-700;
+      border: solid 1px $fluid-red-700;
+    }
+
+    &:active {
+      background-color: $fluid-red-800;
+      border: solid 1px $fluid-red-800;
+    }
+
+    &:focus-visible {
+      border: solid 1px $fluid-red-800;
+      outline-color: $fluid-red-100;
+      outline-width: 4px;
+    }
+  }
+
+  &.hue-btn-borderless:not([disabled]) {
+    border: solid 1px transparent;
+
+    &:hover {
+      border: solid 1px $fluid-gray-300;
+    }
+
+    &:active {
+      border: solid 1px $fluid-gray-400;
+    }
+  }
+
+  &.hue-btn-borderless[disabled] {
+    border: solid 1px transparent;
+    color: $fluid-gray-400;
+  }
+
+  &.hue-btn-alert[disabled],
+  &.hue-btn-primary[disabled] {
+    background-color: $fluid-gray-200;
+    border: solid 1px $fluid-gray-200;
+  }
+}
diff --git a/desktop/core/src/desktop/js/components/HueButton.vue b/desktop/core/src/desktop/js/components/HueButton.vue
@@ -18,6 +18,7 @@
 
 <template>
   <button
+    v-bind="$attrs"
     class="hue-btn"
     type="button"
     :class="{
@@ -37,6 +38,8 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
 
+  import './HueButton.scss';
+
   export default defineComponent({
     name: 'HueButton',
     props: {
@@ -69,117 +72,3 @@
     emits: ['click']
   });
 </script>
-
-<style lang="scss" scoped>
-  @import './styles/colors';
-  @import './styles/variables';
-
-  .hue-btn {
-    height: 32px;
-    border-radius: $fluid-border-radius;
-    border: solid 1px $fluid-gray-300;
-    background-color: $fluid-white;
-    color: $fluid-blue-500;
-    padding: 0 12px;
-
-    &.hue-btn-small {
-      font-size: 12px;
-      height: 24px;
-      padding: 0 8px;
-    }
-
-    &.hue-btn-large {
-      font-size: 16px;
-      height: 40px;
-      padding: 0 20px;
-    }
-
-    &:hover {
-      border: solid 1px $fluid-blue-700;
-    }
-
-    &:active {
-      border: solid 1px $fluid-blue-800;
-    }
-
-    &[disabled] {
-      cursor: default;
-      color: $fluid-gray-400;
-      border: solid 1px $fluid-gray-200;
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    &:focus-visible {
-      border: solid 1px $fluid-blue-800;
-      outline: $fluid-blue-100 auto 4px;
-    }
-
-    &.hue-btn-primary:not([disabled]) {
-      color: $fluid-white;
-      background-color: $fluid-blue-500;
-      border: solid 1px $fluid-blue-500;
-
-      &:hover {
-        background-color: $fluid-blue-700;
-        border: solid 1px $fluid-blue-700;
-      }
-
-      &.active {
-        background-color: $fluid-blue-800;
-        border: solid 1px $fluid-blue-800;
-      }
-
-      &:focus-visible {
-        border: solid 1px $fluid-gray-900;
-      }
-    }
-
-    &.hue-btn-alert:not([disabled]) {
-      color: $fluid-white;
-      background-color: $fluid-red-500;
-      border: solid 1px $fluid-red-500;
-
-      &:hover {
-        background-color: $fluid-red-700;
-        border: solid 1px $fluid-red-700;
-      }
-
-      &:active {
-        background-color: $fluid-red-800;
-        border: solid 1px $fluid-red-800;
-      }
-
-      &:focus-visible {
-        border: solid 1px $fluid-red-800;
-        outline-color: $fluid-red-100;
-        outline-width: 4px;
-      }
-    }
-
-    &.hue-btn-borderless:not([disabled]) {
-      border: solid 1px transparent;
-
-      &:hover {
-        border: solid 1px $fluid-gray-300;
-      }
-
-      &:active {
-        border: solid 1px $fluid-gray-400;
-      }
-    }
-
-    &.hue-btn-borderless[disabled] {
-      border: solid 1px transparent;
-      color: $fluid-gray-400;
-    }
-
-    &.hue-btn-alert[disabled],
-    &.hue-btn-primary[disabled] {
-      background-color: $fluid-gray-200;
-      border: solid 1px $fluid-gray-200;
-    }
-  }
-</style>