@createiq/swagger-ui-scss 5.31.2 → 5.32.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@createiq/swagger-ui-scss",
-  "version": "5.31.2",
+  "version": "5.32.1",
   "main": "./style/main.scss",
   "homepage": "https://github.com/swagger-api/swagger-ui",
   "repository": {

package/style/_dark-mode.scss

@@ -1,41 +1,87 @@
 @use "sass:list";
 
 // Variables for consistent theme
-$neutral-10: #F0F1F1;
-$neutral-20: #E4E6E6;
-$neutral-30: #D2D6D7;
-$neutral-40: #B7BCBF;
-$neutral-50: #8C969A;
-$neutral-60: #6B757A;
-$neutral-80: #545D61;
-$neutral-85: #434B4F;
-$neutral-95: #2A2E30;
-$neutral-98: #1C2022;
-$neutral-100: #080A0B;
-
-$success-30: #4AC966;
-$error-30: #FF5F5F;
-
-$authorize-button: #3ECE90;
-$link: #51A8FF;
-$markdown-code: #B68AE1;
-$textarea: #0D1014;
+$neutral-10: #f0f1f1;
+$neutral-20: #e4e6e6;
+$neutral-30: #d2d6d7;
+$neutral-40: #b7bcbf;
+$neutral-50: #8c969a;
+$neutral-60: #6b757a;
+$neutral-80: #545d61;
+$neutral-85: #434b4f;
+$neutral-95: #2a2e30;
+$neutral-98: #1c2022;
+$neutral-100: #080a0b;
+
+$success-30: #4ac966;
+$error-30: #ff5f5f;
+
+$authorize-button: #3ece90;
+$link: #51a8ff;
+$markdown-code: #b68ae1;
+$textarea: #0d1014;
 $textarea-disabled: #202225;
-$info-version-stamp: #1D632E;
-$curl-command-button: #3B424D;
-$curl-command-button-text: #EBEBEB;
-$json-schema-2020-12__attribute--primary: #9898FF;
-$json-schema-2020-12__constraint--string: #D4AA53;
+$info-version-stamp: #1d632e;
+$curl-command-button: #3b424d;
+$curl-command-button-text: #ebebeb;
+$json-schema-2020-12__attribute--primary: #9898ff;
+$json-schema-2020-12__constraint--string: #d4aa53;
 
 $opblock_colors: (
-  post: (#112929, #104834, #14392C, #00B572),
-  deprecated: (#272C34, #495361, #262E36, #6A6A6A),
-  put: (#27201E, #523524, #9a5b3e, #FF7D35),
-  get: (#182536, #294262, #1C3043, #55A1FF),
-  delete: (#241A20, #4B2420, #2F2020, #EB6156),
-  patch: (#11282F, #16494B, #113239, #03B7BF),
-  head: (#282231, #44336A, #352C45, #B889FF),
-  options: (#202C3C, #33465E, #314558, #6895C8),
+  post: (
+    #112929,
+    #104834,
+    #14392c,
+    #00b572,
+  ),
+  deprecated: (
+    #272c34,
+    #495361,
+    #262e36,
+    #6a6a6a,
+  ),
+  put: (
+    #27201e,
+    #523524,
+    #9a5b3e,
+    #ff7d35,
+  ),
+  get: (
+    #182536,
+    #294262,
+    #1c3043,
+    #55a1ff,
+  ),
+  delete: (
+    #241a20,
+    #4b2420,
+    #2f2020,
+    #eb6156,
+  ),
+  patch: (
+    #11282f,
+    #16494b,
+    #113239,
+    #03b7bf,
+  ),
+  head: (
+    #282231,
+    #44336a,
+    #352c45,
+    #b889ff,
+  ),
+  options: (
+    #202c3c,
+    #33465e,
+    #314558,
+    #6895c8,
+  ),
+  query: (
+    #2a1a28,
+    #4a2848,
+    #3a2238,
+    #d977c6,
+  ),
 );
 
 html.dark-mode {
@@ -57,13 +103,16 @@ html.dark-mode {
     }
 
     table thead tr {
-      td, th {
+      td,
+      th {
         color: $neutral-20;
       }
     }
 
-    .markdown, .renderedMarkdown {
-      p, pre {
+    .markdown,
+    .renderedMarkdown {
+      p,
+      pre {
         color: $neutral-20;
       }
 
@@ -109,7 +158,7 @@ html.dark-mode {
         right 10px center no-repeat;
       color: $neutral-10;
       border-color: $neutral-40;
-      box-shadow: none; 
+      box-shadow: none;
       outline: none;
 
       &[multiple] {
@@ -121,12 +170,15 @@ html.dark-mode {
       }
     }
 
-    input::placeholder, textarea::placeholder {
+    input::placeholder,
+    textarea::placeholder {
       color: $neutral-10;
       opacity: 0.5;
     }
 
-    input.invalid, select.invalid, textarea.invalid {
+    input.invalid,
+    select.invalid,
+    textarea.invalid {
       background: $neutral-98;
       border-color: $error-30;
     }
@@ -158,17 +210,22 @@ html.dark-mode {
       .modal-ux {
         background-color: $neutral-95;
         color: $neutral-20;
-        border: none; 
+        border: none;
 
         &-header {
           border-color: $neutral-80;
 
-          .close-modal svg { 
+          .close-modal svg {
             fill: $neutral-20;
           }
         }
 
-        h2, h3, h4, h5, p, label {
+        h2,
+        h3,
+        h4,
+        h5,
+        p,
+        label {
           color: $neutral-20;
         }
 
@@ -207,8 +264,8 @@ html.dark-mode {
         }
       }
     }
-    
-    // ------ LOADING SPINNER ------ 
+
+    // ------ LOADING SPINNER ------
 
     .loading-container .loading {
       &::before {
@@ -221,7 +278,7 @@ html.dark-mode {
       }
     }
 
-    // ------ SCHEMES / SERVERS ------ 
+    // ------ SCHEMES / SERVERS ------
 
     .scheme-container {
       background: $neutral-98;
@@ -241,14 +298,22 @@ html.dark-mode {
       }
     }
 
-    // ------ INFO ------ 
+    // ------ INFO ------
 
     .info {
-      h1, h2, h3, h4, h5, .title {
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      .title {
         color: $neutral-30;
       }
 
-      li, p, table, .base-url {
+      li,
+      p,
+      table,
+      .base-url {
         color: $neutral-20;
       }
 
@@ -268,7 +333,8 @@ html.dark-mode {
         background: $neutral-85;
         border-color: $error-30;
 
-        h4, span {
+        h4,
+        span {
           color: $neutral-20;
         }
 
@@ -281,7 +347,8 @@ html.dark-mode {
 
     // ------ COPY / DOWNLOAD BUTTONS ------
 
-    .copy-to-clipboard, .download-contents {
+    .copy-to-clipboard,
+    .download-contents {
       background: $neutral-80;
       color: $neutral-20;
 
@@ -476,7 +543,8 @@ html.dark-mode {
       }
 
       .responses-inner {
-        h4, h5 {
+        h4,
+        h5 {
           color: $neutral-20;
         }
       }
@@ -507,7 +575,12 @@ html.dark-mode {
         color: $markdown-code;
       }
 
-      .property-row, .brace-open, .brace-close, .prop-format, .property, .description {
+      .property-row,
+      .brace-open,
+      .brace-close,
+      .prop-format,
+      .property,
+      .description {
         color: $neutral-20;
       }
 
@@ -519,7 +592,8 @@ html.dark-mode {
     .model-box {
       background: $neutral-95;
 
-      .model-title, .model {
+      .model-title,
+      .model {
         color: $neutral-20;
       }
 
@@ -527,7 +601,7 @@ html.dark-mode {
         &:focus {
           outline: none;
         }
-        
+
         &:not(.prop) {
           color: $neutral-20;
         }
@@ -555,7 +629,10 @@ html.dark-mode {
         color: $neutral-20;
       }
 
-      &-property--required > .json-schema-2020-12:first-of-type > .json-schema-2020-12-head .json-schema-2020-12__title::after {
+      &-property--required
+        > .json-schema-2020-12:first-of-type
+        > .json-schema-2020-12-head
+        .json-schema-2020-12__title::after {
         color: $error-30;
       }
 
@@ -596,10 +673,10 @@ html.dark-mode {
         }
 
         &--patternProperties {
-          .json-schema-2020-12__title::before, 
+          .json-schema-2020-12__title::before,
           .json-schema-2020-12__title::after {
             color: $json-schema-2020-12__attribute--primary;
-          } 
+          }
         }
       }
 
@@ -618,7 +695,8 @@ html.dark-mode {
       }
 
       &-json-viewer {
-        &__name--secondary, &__value--secondary {
+        &__name--secondary,
+        &__value--secondary {
           color: $neutral-40;
         }
       }

package/style/_form.scss

@@ -33,10 +33,10 @@ select {
 
 .opblock-body select {
   min-width: 230px;
-  @media (max-width: 768px) {
+  @container swagger-ui (max-width: 768px) {
     min-width: 180px;
   }
-  @media (max-width: 640px) {
+  @container swagger-ui (max-width: 640px) {
     width: 100%;
     min-width: 100%;
   }
@@ -58,7 +58,7 @@ input[type="email"],
 input[type="file"] {
   line-height: 1;
 
-  @media (max-width: 768px) {
+  @container swagger-ui (max-width: 768px) {
     max-width: 175px;
   }
 }

package/style/_layout.scss

@@ -78,7 +78,7 @@
     font-weight: 400;
   }
 
-  @media (max-width: 640px) {
+  @container swagger-ui (max-width: 640px) {
     small {
       flex: 1;
     }
@@ -262,7 +262,7 @@
 
     @include type.text_headline($opblock-summary-method-font-color);
 
-    @media (max-width: 768px) {
+    @container swagger-ui (max-width: 768px) {
       font-size: 12px;
     }
   }
@@ -279,7 +279,7 @@
 
     @include type.text_code();
 
-    @media (max-width: 768px) {
+    @container swagger-ui (max-width: 768px) {
       font-size: 12px;
     }
   }
@@ -288,7 +288,7 @@
     flex-shrink: 1;
   }
 
-  @media (max-width: 640px) {
+  @container swagger-ui (max-width: 640px) {
     .opblock-summary-path {
       max-width: 100%;
     }
@@ -322,7 +322,7 @@
     flex-grow: 1;
   }
 
-  @media (max-width: 550px) {
+  @container swagger-ui (max-width: 550px) {
     .opblock-summary-path-description-wrapper {
       flex-direction: column;
       align-items: flex-start;
@@ -388,6 +388,10 @@
     @include mixins.method($color-options);
   }
 
+  &.opblock-query {
+    @include mixins.method($color-query);
+  }
+
   &.opblock-deprecated {
     opacity: 0.6;
 

package/style/_mixins.scss

@@ -112,22 +112,22 @@ $browser-context: 16;
 }
 
 @mixin maxHeight($height) {
-  @media (max-height: $height) {
+  @container swagger-ui (max-height: $height) {
     @content;
   }
 }
 
 @mixin breakpoint($class) {
   @if $class == tablet {
-    @media (min-width: 768px) and (max-width: 1024px) {
+    @container swagger-ui (min-width: 768px) and (max-width: 1024px) {
       @content;
     }
   } @else if $class == mobile {
-    @media (min-width: 320px) and (max-width: 736px) {
+    @container swagger-ui (min-width: 320px) and (max-width: 736px) {
       @content;
     }
   } @else if $class == desktop {
-    @media (min-width: 1400px) {
+    @container swagger-ui (min-width: 1400px) {
       @content;
     }
   } @else {

package/style/_topbar.scss

@@ -11,7 +11,7 @@
     flex-wrap: wrap;
     gap: 10px;
   }
-  @media (max-width: 550px) {
+  @container swagger-ui (max-width: 550px) {
     .topbar-wrapper {
       flex-direction: column;
       align-items: start;
@@ -97,7 +97,7 @@
       @include type.text_headline($topbar-download-url-button-font-color);
     }
   }
-  @media (max-width: 550px) {
+  @container swagger-ui (max-width: 550px) {
     .download-url-wrapper {
       width: 100%;
     }
@@ -106,7 +106,7 @@
   .dark-mode-toggle {
     margin-left: 10px;
     opacity: 0.8;
-    transition: all .2s;
+    transition: all 0.2s;
     cursor: pointer;
 
     button {
@@ -115,7 +115,7 @@
       padding: 0;
 
       svg {
-        fill: #E4E6E6;
+        fill: #e4e6e6;
       }
     }
 

package/style/_variables.scss

@@ -53,6 +53,7 @@ $color-head: #9012fe !default;
 $color-patch: #50e3c2 !default;
 $color-disabled: #ebebeb !default;
 $color-options: #0d5aa7 !default;
+$color-query: #9d408a !default; // OAS 3.2 QUERY method
 
 // Authorize
 

package/style/main.scss

@@ -2,6 +2,9 @@
 @use "type";
 
 .swagger-ui {
+  container-name: swagger-ui;
+  container-type: inline-size;
+  
   @include type.text_body();
   @include meta.load-css("~tachyons-sass/tachyons.scss");
   @include meta.load-css("mixins");