CSS variables fixed

dnsimple · Dec 19, 2024 · 1c71b77 · 1c71b77
1 parent b1fcd20
commit 1c71b77
Show file tree

Hide file tree

Showing 25 changed files with 433 additions and 569 deletions.
diff --git a/_widget/old_src/App.vue b/_widget/old_src/App.vue
diff --git a/_widget/old_src/assets/vue.svg b/_widget/old_src/assets/vue.svg
diff --git a/_widget/old_src/components/HelloWorld.vue b/_widget/old_src/components/HelloWorld.vue
diff --git a/_widget/old_src/main.js b/_widget/old_src/main.js
diff --git a/_widget/old_src/style.css b/_widget/old_src/style.css
diff --git a/_widget/src/components/app/component.vue b/_widget/src/components/app/component.vue
@@ -19,8 +19,8 @@ import Articles from '../articles/component.vue';
 import Prompt from '../prompt/component.vue';
 import Welcome from '../welcome/component.vue';
 
-import "./reset.scss"
 import "./variables.scss"
+import "./reset.scss"
 import "./style.scss"
 
 const ANIMATION_TIMEOUT = 500;

diff --git a/_widget/src/components/app/style.scss b/_widget/src/components/app/style.scss
@@ -1,42 +1,31 @@
-@import './variables.scss';
-@import './reset.scss';
-
 #dnsimple-support {
   position: fixed;
   bottom: 0;
   right: 0;
   width: 480px;
-  font-size: $rem;
+  font-size: var(--dnsimple-support-widget-rem);
   font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   line-height: 1.6;
   color: #222;
   z-index: 999;
 
-  @media ($desktop-only) {
+  @media (var(--dnsimple-support-widget-desktop-only)) {
     display: none;
   }
 }
 
-
 #dnsimple-support {
-    @import '../article/style.scss';
-    @import '../articles/style.scss';
-    @import '../footer/style.scss';
-    @import '../header/style.scss';
-    @import '../prompt/style.scss';
-    @import '../welcome/style.scss';
-
     .relative {
       position: relative;
-      box-shadow: $box-shadow;
+      box-shadow: var(--dnsimple-support-widget-box-shadow);
     }
 
     .route {
       height: 475px;
-      border-left: 1px solid $line-color;
+      border-left: 1px solid var(--dnsimple-support-widget-line-color);
       overflow-y: auto;
       -webkit-overflow-scrolling: touch;
-      padding: $padding;
-      background: $white;
+      padding: var(--dnsimple-support-widget-padding);
+      background: var(--dnsimple-support-widget-white);
     }
 }
diff --git a/_widget/src/components/app/variables.scss b/_widget/src/components/app/variables.scss
@@ -1,15 +1,18 @@
-$blue: #1A5EC6;
-$dark-gray: #333;
-$medium-gray: #7e7e7e;
-$light-gray: #eaeaea;
-$yellow: #f8c939;
-$orange: #ff7f2a;
-$green: #43a047;
-$white: #fff;
-$rem: 16px;
-$padding: 15px;
-$line-color: #ddd;
-$desktop-only: "max-width: 640px";
-$font-monospace: Menlo,Monaco,Consolas,"Courier New",monospace;
-$font-size-monospace: 13px;
-$box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+#dnsimple-support {
+  --dnsimple-support-widget-blue: #1A5EC6;
+  --dnsimple-support-widget-dark-gray: #333;
+  --dnsimple-support-widget-medium-gray: #7e7e7e;
+  --dnsimple-support-widget-light-gray: #eaeaea;
+  --dnsimple-support-widget-yellow: #f8c939;
+  --dnsimple-support-widget-orange: #ff7f2a;
+  --dnsimple-support-widget-green: #43a047;
+  --dnsimple-support-widget-white: #fff;
+  --dnsimple-support-widget-rem: 16px;
+  --dnsimple-support-widget-padding: 15px;
+  --dnsimple-support-widget-line-color: #ddd;
+  --dnsimple-support-widget-desktop-only: "max-width: 640px";
+  --dnsimple-support-widget-font-monospace: Menlo,Monaco,Consolas,"Courier New",monospace;
+  --dnsimple-support-widget-font-size-monospace: 13px;
+  --dnsimple-support-widget-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  --dnsimple-support-widget-prompt-padding: 7px;
+}
diff --git a/_widget/src/components/article/component.vue b/_widget/src/components/article/component.vue
@@ -16,6 +16,11 @@
 import { backIcon } from '../../assets/svgs';
 import Footer from '../footer/component.vue';
 
+import "./style.scss"
+import "./resolving.scss"
+import "./syntax.scss"
+import "./tables.scss"
+
 const NO_TRAILING_SLASH = /\/?$/;
 
 export default {

diff --git a/_widget/src/components/article/resolving.scss b/_widget/src/components/article/resolving.scss
@@ -1,17 +1,21 @@
 // Derived from support.dnsimple.com/content/assets/css/_resolving
 
-.resolving {
-  padding: $padding;
-  margin-bottom: $padding;
-}
+#dnsimple-support {
+  .article {
+    .resolving {
+      padding: var(--dnsimple-support-widget-padding);
+      margin-bottom: var(--dnsimple-support-widget-padding);
+    }
 
-.resolving-light {
-  background: #eee;
-}
+    .resolving-light {
+      background: #eee;
+    }
 
-.resolving-dark {
-  background: #000;
-  a {
-    color: #fff;
+    .resolving-dark {
+      background: #000;
+      a {
+        color: #fff;
+      }
+    }
   }
 }