swedbank-pay-design-guide-jekyll-theme 2.1.13 → 2.1.14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e00256044e2bcfb1e8557ee85d12c91b34509582663d04b3d7b7ee2df6ffa4af
-  data.tar.gz: 248fa8d33d8557814c5ecc2a8eb2153657113f7046721ad5299bc5a06bcc0fe5
+  metadata.gz: bea02ffe904bba4a0d83bc959716c254270f019db2e9bdafa62d0c4588ed79d0
+  data.tar.gz: e8ca0c2770cb388138d273c1bbeea004f55d7a365ff4594d51afa25669f266b9
 SHA512:
-  metadata.gz: 41fdd35711d08ef1f2297239172ef6749d18a7dc47ef8e4854e2601768891b497d9a96a360eeef2ba0de50e76047152114f809deba6fdf38ce29cdc9c8c5f581
-  data.tar.gz: ef20a84c1e13111e323712a4025bd40c325e9ae514044f453d075780b50a0c90c583d61bb78f0ea17c75937f90461e242eff361e1913ca3b96035e0da75156df
+  metadata.gz: d632e046539d3d2a4f5f48df9878d243dcc45f732d062d3edbc3b262ec18a8709c649c21bbcb96f96de1dd298b0b55fe67a055a8657269d63ae567cb2ee04d7d
+  data.tar.gz: 482e402899cd2db7de794142cb08c76eafe832ad8f2a878d39f25d74166709a383ac8c8854800c71f465136898b5de5d31e915d2644d595c1c10af6fedb9d428

data/_layouts/default.html

@@ -70,12 +70,12 @@
                     </a>
             </header>
             <div class="documentation">
-                <div class="search-box search-expander">
+                <div class="form-group search-box search-expander">
                     {% if site.search.enabled == true %}
                     <form class="search d-flex"
                         method="get" action="{{ site.search.url | relative_url }}">
                         <input name="q" type="text" id="tipue_search_input"
-                            class="search-input"
+                            class="form-control search-input"
                             placeholder="Search in documentation"
                             onfocus="this.placeholder=''"
                             onblur="this.placeholder='Search in documentation'"

data/_sass/front-page.scss

@@ -142,7 +142,6 @@ $front-page-max-width: $breakpoint-lg;
             margin-bottom: 8rem;
             
             .front-page-intro-cards {
-                position: absolute;
                 left: 0;
                 width: 100%;
             }

data/_sass/swedbank-pay-design-guide-theme.scss

@@ -119,7 +119,7 @@ body {
     .dg-sidebar {
         border-right: 1px solid $background-gray;
 
-        @media screen and (max-width: $breakpoint-lg){
+        @media screen and (max-width: $breakpoint-lg) {
             position: fixed;
         }
 
@@ -134,9 +134,10 @@ body {
 }
 
 .documentation {
-    @media screen and (max-width: $breakpoint-lg){
+    @media screen and (max-width: $breakpoint-lg) {
         overflow-y: auto;
     }
+
     > div {
         &.row {
             margin-right: 0;
@@ -150,6 +151,7 @@ body {
             font-size: 1.75rem
         }
     }
+
     code[data-processed='true'].language-mermaid {
         background: none;
         border: none;
@@ -219,6 +221,11 @@ body {
         max-width: 880px;
     }
 
+    .row.card-list > div {
+        display: flex;
+        align-self: stretch;
+    }
+
     .language-mermaid {
         $apricot: #fbf2ea;
         $pink: #efb7b6;
@@ -367,7 +374,7 @@ body {
         top: 2rem;
         transition: opacity .3s;
 
-        @media screen and (max-width: $breakpoint-lg){
+        @media screen and (max-width: $breakpoint-lg) {
             top: 6rem;
         }
 
@@ -395,23 +402,42 @@ body {
         background-color: rgba(0,0,0,0.5); /* Black background with opacity */
         z-index: 3; /* Specify a stack order in case you're using a different order for other elements */
     }
-  }
+}
 
 .search-box {
     position: absolute;
     right: 8rem;
-    top: 2rem;
+    top: 1.5rem;
     z-index: 2;
 
+
+    .search-input {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    #search-btn {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        height: 56px;
+    }
+
     @media screen and (max-width: $breakpoint-lg) {
         position: fixed;
         right: 1rem;
-        top: 1.5rem;
+        top: 1rem;
         z-index: 401;
 
         #tipue_search_input {
             display: none;
         }
+
+        #search-btn {
+            border-top-left-radius: 8px;
+            border-top-left-radius: var(--border-radius);
+            border-bottom-left-radius: 8px;
+            border-bottom-left-radius: var(--border-radius);
+        }
     }
 }
 

data/assets/js/swedbank-pay-design-guide-theme.js

@@ -227,9 +227,12 @@ function _handleSimpleSidebar (e) {
 
         searchButton.addEventListener("click", function(e) {
             const searchInput = document.querySelector(".search-input");
+            const searchBtn = document.querySelector("#search-btn");
 
             if (searchInput.style.display !== "block") {
                 searchInput.style.display = "block";
+                searchBtn.style.borderTopLeftRadius  = "0";
+                searchBtn.style.borderBottomLeftRadius  = "0";
                 searchInput.focus();
                 e.preventDefault();
             }

data/lib/gem_version.rb

@@ -4,7 +4,7 @@ module Gem
   # Gem Specification
   class Specification
     def self.gem_version
-      '2.1.13'
+      '2.1.14'
     end
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: swedbank-pay-design-guide-jekyll-theme
 version: !ruby/object:Gem::Version
-  version: 2.1.13
+  version: 2.1.14
 platform: ruby
 authors:
 - Swedbank Pay
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-01-24 00:00:00.000000000 Z
+date: 2024-01-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: faraday