Improve scss styles

mrmelon54 · Oct 28, 2022 · bf3319e · bf3319e
1 parent 7cf6938
commit bf3319e
Show file tree

Hide file tree

Showing 12 changed files with 131 additions and 118 deletions.
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
  "dotenv": "^16.0.3",
  "svelte": "^3.52.0",
  "svelte-check": "^2.9.2",
+ "svelte-navigator": "^3.2.2",
  "svelte-preprocess": "^4.10.7",
  "tslib": "^2.4.0",
  "typescript": "^4.6.4",

diff --git a/src/App.svelte b/src/App.svelte
@@ -1,8 +1,7 @@
 <script>
- import {onMount} from "svelte";
+ import { onMount } from "svelte";
  import Definition from "./Definition.svelte";
  import Selector from "./components/Selector.svelte";
- import "svelte-highlight/styles/github.css";
 
  async function fetchConfig() {
  const resp = await fetch(window.CONFIG_URL || "config.json");
@@ -41,33 +40,33 @@
  {#if specUrl === "" || specUrl === undefined}
  <div>No OpenAPI spec selected</div>
  {:else}
- <Definition spec={new URL(specUrl, location)} />
+ <Definition spec={new URL(specUrl, window.location.href)} />
  {/if}
  <footer>
  Powered by <a href="https://github.com/MrMelon54/waffle" target="_blank">Waffle</a>
  </footer>
 </div>
 
-<style>
+<style lang="scss">
  #app {
  max-width: 1000px;
  margin: auto;
- }
 
- header {
- padding: 0 60px;
- box-sizing: border-box;
- display: flex;
- align-items: center;
- justify-content: space-between;
- height: 80px;
- min-height: 80px;
- max-height: 80px;
- background-color: #252832;
- border-radius: 0 0 16px 16px;
- }
+  > header {
+  padding: 0 60px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 80px;
+  min-height: 80px;
+  max-height: 80px;
+  background-color: #252832;
+  border-radius: 0 0 16px 16px;
+  }
 
- footer {
- padding: 16px;
+ > footer {
+ padding: 16px;
+ }
  }
 </style>
diff --git a/src/components/Dropdown.svelte b/src/components/Dropdown.svelte
@@ -8,6 +8,7 @@
 </script>
 
 <div class="dropdown {open ? 'dropdown-open' : 'dropdown-closed'}">
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
  <div class="dropdown-title" on:click={handleClick}>
  <h4>{title}</h4>
  </div>
@@ -18,31 +19,31 @@
  {/if}
 </div>
 
-<style>
+<style lang="scss">
  .dropdown {
  background: #252832;
  padding: 8px 16px;
  border-radius: 16px;
- }
 
- .dropdown > .dropdown-title {
- position: relative;
- }
+ > .dropdown-title {
+ position: relative;
 
- .dropdown > .dropdown-title::after {
- content: "";
- position: absolute;
- background: transparent url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="%23c7c2bb" d="M13.418 7.859a.695.695 0 0 1 .978 0 .68.68 0 0 1 0 .969l-3.908 3.83a.697.697 0 0 1-.979 0l-3.908-3.83a.68.68 0 0 1 0-.969.695.695 0 0 1 .978 0L10 11l3.418-3.141z"/></svg>') right 10px center no-repeat;
- background-size: 40px;
- width: 60px;
- height: 60px;
- top: 50%;
- right: 0;
- transform: translateY(-50%);
- transition: ease-in-out transform 500ms;
- }
+ &::after {
+ content: "";
+ position: absolute;
+ background: transparent url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="%23c7c2bb" d="M13.418 7.859a.695.695 0 0 1 .978 0 .68.68 0 0 1 0 .969l-3.908 3.83a.697.697 0 0 1-.979 0l-3.908-3.83a.68.68 0 0 1 0-.969.695.695 0 0 1 .978 0L10 11l3.418-3.141z"/></svg>') right 10px center no-repeat;
+ background-size: 40px;
+ width: 60px;
+ height: 60px;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ transition: ease-in-out transform 500ms;
+ }
+ }
 
- .dropdown.dropdown-open > .dropdown-title::after {
- transform: translateY(-50%) rotate(180deg);
+ &.dropdown-open > .dropdown-title::after {
+ transform: translateY(-50%) rotate(180deg);
+ }
  }
 </style>
diff --git a/src/components/request-view/MediaTypeTab.svelte b/src/components/request-view/MediaTypeTab.svelte
@@ -4,6 +4,7 @@
  export let f: (a: number) => () => void;
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="media-type-tab" on:click={f(i)}>
  {#if tab === i}
  <b style="color: #25a05c;"><slot /></b>

diff --git a/src/components/request-view/Parameter.svelte b/src/components/request-view/Parameter.svelte
@@ -49,13 +49,13 @@
  text-align: left;
  padding-left: 0.76em;
 
- :first-child {
+ &:first-child {
  padding-left: 0;
  }
  }
 
  .info-required {
- ::after {
+ &::after {
  content: "required";
  color: #ff1a1a99;
  font-size: 10px;

diff --git a/src/components/request-view/RequestView.svelte b/src/components/request-view/RequestView.svelte
@@ -110,18 +110,16 @@
  margin: 8px 0;
  background-color: var(--method-bg-color);
 
- > .request-summary > .request-summary-inner {
- padding: 4px;
- cursor: pointer;
- position: relative;
- }
-
  > .request-content {
  border-radius: 0 0 8px 8px;
  }
 
  > .request-summary {
  > .request-summary-inner {
+ padding: 4px;
+ cursor: pointer;
+ position: relative;
+
  &::after {
  content: "";
  position: absolute;
@@ -170,23 +168,23 @@
  transform: translateY(-50%) rotate(180deg);
  }
  }
- }
 
- .request.request-deprecated {
- --method-color: #232628 !important;
- --method-high-color: #363a3c !important;
- --method-bg-color: #565a5c1a !important;
- color: #bcb6ad;
-
- > .request-summary > .request-summary-inner > h5 {
- > .request-summary-path {
- text-decoration: line-through;
- text-decoration-color: currentColor;
- color: #bcb6ad;
- }
+  &.request-deprecated {
+  --method-color: #232628 !important;
+  --method-high-color: #363a3c !important;
+  --method-bg-color: #565a5c1a !important;
+  color: #bcb6ad;
+
+  > .request-summary > .request-summary-inner > h5 {
+  > .request-summary-path {
+  text-decoration: line-through;
+  text-decoration-color: currentColor;
+  color: #bcb6ad;
+  }
 
- > .request-summary-text {
- color: #a19c93;
+ > .request-summary-text {
+ color: #a19c93;
+ }
  }
  }
  }
@@ -196,7 +194,7 @@
  text-align: left;
  padding-left: 0.76em;
 
- :first-child {
+ &:first-child {
  padding-left: 0;
  }
  }
@@ -210,7 +208,7 @@
  text-align: left;
  padding-left: 0.76em;
 
- :first-child {
+ &:first-child {
  padding-left: 0;
  }
  }

diff --git a/src/components/request-view/Response.svelte b/src/components/request-view/Response.svelte
@@ -55,19 +55,19 @@
 </tr>
 
 <style lang="scss">
- tr.resp-row:nth-of-type(n + 3) {
- border-top: 2px solid #8e8880;
- }
-
  tr.resp-row {
+ &:nth-of-type(n + 3) {
+ border-top: 2px solid #8e8880;
+ }
+
  > td {
  vertical-align: top;
  text-align: left;
  padding-left: 0.76em;
- }
 
- > td:first-child {
- padding-left: 0;
+ &:first-child {
+ padding-left: 0;
+ }
  }
  }
 

diff --git a/src/components/request-view/bubble/RequestInfoHeader.svelte b/src/components/request-view/bubble/RequestInfoHeader.svelte
@@ -18,18 +18,18 @@
 
  > .request-info-header-tab {
  position: relative;
- }
 
- > .request-info-header-tab::after {
- content: " ";
- background-color: var(--method-high-color);
- display: block;
- width: 120%;
- height: 4px;
- position: absolute;
- bottom: -16px;
- left: 50%;
- transform: translateX(-50%);
+ &::after {
+ content: " ";
+ background-color: var(--method-high-color);
+ display: block;
+ width: 120%;
+ height: 4px;
+ position: absolute;
+ bottom: -16px;
+ left: 50%;
+ transform: translateX(-50%);
+ }
  }
 
  > .request-info-extra {

diff --git a/src/components/schema-formatter/SchemaCollapse.svelte b/src/components/schema-formatter/SchemaCollapse.svelte
@@ -33,20 +33,20 @@
  margin: 0;
  cursor: pointer;
  height: 20px;
- }
 
- > h5::before {
- content: "";
- position: absolute;
- background: transparent url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="%23c7c2bb" d="M13.418 7.859a.695.695 0 0 1 .978 0 .68.68 0 0 1 0 .969l-3.908 3.83a.697.697 0 0 1-.979 0l-3.908-3.83a.68.68 0 0 1 0-.969.695.695 0 0 1 .978 0L10 11l3.418-3.141z"/></svg>') right 10px center no-repeat;
- background-size: 40px;
- background-position: center;
- width: 20px;
- height: 20px;
- top: 50%;
- right: 0;
- transform: translateY(-50%) rotate(-90deg);
- transition: ease-in-out transform 250ms;
+ &::before {
+ content: "";
+ position: absolute;
+ background: transparent url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="%23c7c2bb" d="M13.418 7.859a.695.695 0 0 1 .978 0 .68.68 0 0 1 0 .969l-3.908 3.83a.697.697 0 0 1-.979 0l-3.908-3.83a.68.68 0 0 1 0-.969.695.695 0 0 1 .978 0L10 11l3.418-3.141z"/></svg>') right 10px center no-repeat;
+ background-size: 40px;
+ background-position: center;
+ width: 20px;
+ height: 20px;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%) rotate(-90deg);
+ transition: ease-in-out transform 250ms;
+ }
  }
 
  > .schema-content {
@@ -64,17 +64,17 @@
 
  > h5 {
  padding: 0 60px 0 0;
- }
 
- > h5::before {
- right: 30px;
- transform: translateY(-50%);
- }
+  &::before {
+  right: 30px;
+  transform: translateY(-50%);
+  }
 
- > h5::after {
- content: attr(data-bracket-before);
- position: absolute;
- right: 12px;
+ &::after {
+ content: attr(data-bracket-before);
+ position: absolute;
+ right: 12px;
+ }
  }
  }
 </style>
diff --git a/src/components/schema-formatter/SchemaProperty.svelte b/src/components/schema-formatter/SchemaProperty.svelte
@@ -10,13 +10,15 @@
  </td>
 </tr>
 
-<style>
- .schema-property-row .schema-inner-key {
- text-align: left;
- vertical-align: top;
- }
+<style lang="scss">
+ .schema-property-row {
+ > .schema-inner-key {
+ text-align: left;
+ vertical-align: top;
+ }
 
- .schema-property-row td:first-child {
- padding-right: 16px;
+ > td:first-child {
+ padding-right: 16px;
+ }
  }
 </style>