@paroicms/playground_demo2 0.56.0

package/README.md

@@ -0,0 +1,9 @@
+# @paroicms/playground_demo2
+
+Demonstration website for ParoiCMS.
+
+This package is part of [ParoiCMS](https://www.npmjs.com/package/@paroicms/server).
+
+## License
+
+Released under the [MIT license](https://gitlab.com/paroi/opensource/paroicms/-/blob/main/LICENSE.md).

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@paroicms/playground_demo2",
+  "version": "0.56.0",
+  "description": "Demonstration website for ParoiCMS",
+  "author": "Paroi Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.com/paroi/opensource/paroicms.git",
+    "directory": "sites/demo2"
+  },
+  "type": "module",
+  "main": "paroicms-site.js",
+  "scripts": {
+    "start": "paroicms | npm run _pino-pretty",
+    "start:dev": "nodemon --watch 'site-schema*.json' --watch config.json",
+    "clear": "rimraf theme/assets/css/*",
+    "build": "npm run scss",
+    "dev": "concurrently -n 'node,scss' -c 'yellow.bold,magenta.bold' 'npm run start:dev' 'npm run scss:watch'",
+    "scss": "npm run _scss -- --no-source-map --style=compressed",
+    "scss:watch": "npm run _scss && npm run _scss -- --watch",
+    "_scss": "sass theme/assets/scss/index.scss theme/assets/css/index.css",
+    "_pino-pretty": "pino-pretty -U false -x 'stats:25' -X 'stats:grey' -t 'yyyy-mm-dd HH:MM:ss.l' -i 'hostname,pid,fqdn'"
+  },
+  "dependencies": {
+    "@paroicms/contact-form-plugin": "0.19.0",
+    "@paroicms/content-loading-plugin": "0.12.0",
+    "@paroicms/public-menu-plugin": "0.9.0",
+    "@paroicms/quill-editor-plugin": "1.28.0",
+    "@paroicms/video-plugin": "0.26.0",
+    "@paroicms/list-field-plugin": "0.15.0",
+    "@paroicms/internal-link-plugin": "0.10.0"
+  },
+  "devDependencies": {
+    "concurrently": "~9.1.2",
+    "nodemon": "~3.1.9",
+    "pino-pretty": "~13.0.0",
+    "rimraf": "~6.0.1",
+    "sass": "~1.84.0"
+  }
+}

package/paroicms-site.js

@@ -0,0 +1,9 @@
+import { resolveModuleDirectory } from "@paroicms/public-server-lib";
+import { readFileSync } from "fs";
+import { join } from "path";
+
+const packageDir = resolveModuleDirectory(import.meta.url);
+const packageJson = JSON.parse(readFileSync(join(packageDir, 'package.json'), 'utf-8'));
+
+export const siteDir = packageDir;
+export const version = packageJson.version;

package/site-schema.json

@@ -0,0 +1,288 @@
+{
+  "version": "7",
+  "languages": ["fr", "en"],
+  "plugins": [
+    {
+      "name": "@paroicms/quill-editor-plugin",
+      "configuration": {
+        "backOffice": {
+          "code": true
+        }
+      }
+    },
+    "@paroicms/contact-form-plugin",
+    "@paroicms/content-loading-plugin",
+    "@paroicms/internal-link-plugin",
+    "@paroicms/list-field-plugin",
+    "@paroicms/public-menu-plugin",
+    "@paroicms/video-plugin"
+  ],
+  "configuration": {
+    "backOffice": {
+      "enableMetaKeywords": true
+    }
+  },
+  "nodeTypes": [
+    {
+      "kind": "site",
+      "fields": ["logo", "slogan", "phone"]
+    },
+    {
+      "typeName": "home",
+      "kind": "document",
+      "documentKind": "routing",
+      "withFeaturedImage": true,
+      "fields": [
+        "video",
+        {
+          "name": "myList",
+          "localized": true,
+          "storedAs": "text",
+          "dataType": "json",
+          "plugin": "@paroicms/list-field-plugin"
+        },
+        "featuredDocument"
+      ],
+      "lists": [
+        {
+          "listName": "partners",
+          "parts": ["partner"],
+          "sorting": "publishDate desc",
+          "limit": 5
+        },
+        {
+          "listName": "sections",
+          "parts": ["partner", "sideImage"],
+          "sorting": "manual"
+        }
+      ],
+      "routingChildren": ["pages", "posts", "aboutPage", "contactPage", "searchPage", "exhibition"],
+      "backOffice": {
+        "defaultTab": "edit"
+      }
+    },
+    {
+      "typeName": "partner",
+      "kind": "part",
+      "fields": [
+        "title",
+        "image",
+        {
+          "name": "url",
+          "localized": false,
+          "storedAs": "varchar",
+          "dataType": "string"
+        },
+        "htmlContent",
+        {
+          "name": "color",
+          "localized": false,
+          "storedAs": "varchar",
+          "dataType": "string",
+          "visibility": ["table", "overview", "feed"]
+        },
+        {
+          "name": "myList2",
+          "localized": true,
+          "storedAs": "varchar",
+          "dataType": "json",
+          "plugin": "@paroicms/list-field-plugin"
+        }
+      ],
+      "list": {
+        "parts": ["sideImage"],
+        "sorting": "manual"
+      }
+    },
+    {
+      "typeName": "sideImage",
+      "kind": "part",
+      "fields": ["image", "htmlContent"],
+      "list": {
+        "parts": ["sideImage", "partner"],
+        "sorting": "manual"
+      }
+    },
+    {
+      "typeName": "exhibition",
+      "kind": "document",
+      "documentKind": "routing",
+      "route": "exhibition",
+      "withFeaturedImage": true,
+      "regularChildren": ["shelf"],
+      "regularChildrenSorting": "title asc"
+    },
+    {
+      "typeName": "shelf",
+      "kind": "document",
+      "documentKind": "regular",
+      "route": ":relativeId-:slug",
+      "withFeaturedImage": true,
+      "regularChildren": ["page", "videoPage"],
+      "regularChildrenSorting": "title asc",
+      "fields": [
+        {
+          "name": "color",
+          "localized": false,
+          "storedAs": "varchar",
+          "dataType": "string",
+          "visibility": ["table", "overview", "feed"]
+        }
+      ]
+    },
+    {
+      "typeName": "videoPage",
+      "kind": "document",
+      "documentKind": "regular",
+      "route": ":relativeId-:slug",
+      "withFeaturedImage": true,
+      "fields": [
+        {
+          "name": "video",
+          "localized": true,
+          "storedAs": "varchar",
+          "dataType": "string",
+          "plugin": "@paroicms/video-plugin"
+        },
+        "htmlContent"
+      ]
+    },
+    {
+      "typeName": "pages",
+      "kind": "document",
+      "documentKind": "routing",
+      "route": "pages",
+      "withFeaturedImage": true,
+      "regularChildren": ["page"],
+      "regularChildrenSorting": "title asc"
+    },
+    {
+      "typeName": "page",
+      "kind": "document",
+      "documentKind": "regular",
+      "route": ":relativeId-:slug",
+      "withFeaturedImage": true,
+      "fields": [
+        "gallery",
+        "htmlContent",
+        "updateDateTime",
+        {
+          "name": "testTime",
+          "localized": true,
+          "storedAs": "varchar",
+          "dataType": "time"
+        },
+        {
+          "name": "testDate",
+          "localized": true,
+          "storedAs": "varchar",
+          "dataType": "date"
+        }
+      ]
+    },
+    {
+      "typeName": "posts",
+      "kind": "document",
+      "documentKind": "routing",
+      "route": {
+        "en": "posts",
+        "fr": "articles"
+      },
+      "withFeaturedImage": true,
+      "routingChildren": ["tags"],
+      "regularChildren": ["post"],
+      "regularChildrenSorting": "publishDate desc"
+    },
+    {
+      "typeName": "post",
+      "kind": "document",
+      "documentKind": "regular",
+      "ogType": "article",
+      "route": ":yyyy/:mm/:dd/:relativeId-:slug",
+      "relativeIdGenerator": ["default", 6],
+      "withFeaturedImage": true,
+      "fields": ["leadParagraph", "htmlContent"],
+      "labeling": [
+        {
+          "taxonomy": "tags",
+          "relation": "multiple"
+        }
+      ]
+    },
+    {
+      "typeName": "tags",
+      "kind": "document",
+      "documentKind": "routing",
+      "route": {
+        "en": "tag",
+        "fr": "tag"
+      },
+      "redirectTo": "parent",
+      "withFeaturedImage": true,
+      "regularChildren": ["tag"],
+      "regularChildrenSorting": "title asc",
+      "backOffice": {
+        "menuPlacement": "popup"
+      }
+    },
+    {
+      "typeName": "tag",
+      "kind": "document",
+      "documentKind": "regular",
+      "route": ":relativeId-:slug",
+      "withFeaturedImage": true,
+      "fields": ["htmlContent"],
+      "autoPublish": true
+    },
+    {
+      "typeName": "aboutPage",
+      "kind": "document",
+      "documentKind": "routing",
+      "route": {
+        "en": "about-us",
+        "fr": "a-propos"
+      },
+      "withFeaturedImage": true,
+      "fields": [
+        "htmlContent",
+        "updateDateTime",
+        {
+          "name": "testTime",
+          "localized": true,
+          "storedAs": "varchar",
+          "dataType": "time",
+          "visibility": ["table", "overview", "feed"]
+        },
+        {
+          "name": "testDate",
+          "localized": true,
+          "storedAs": "varchar",
+          "dataType": "date",
+          "visibility": ["table", "overview", "feed"]
+        }
+      ]
+    },
+    {
+      "typeName": "contactPage",
+      "kind": "document",
+      "documentKind": "routing",
+      "route": {
+        "en": "contact-us",
+        "fr": "contactez-nous"
+      },
+      "withFeaturedImage": false,
+      "fields": ["shortTitle", "htmlContent"]
+    },
+    {
+      "typeName": "searchPage",
+      "kind": "document",
+      "documentKind": "routing",
+      "route": {
+        "en": "search",
+        "fr": "recherche"
+      },
+      "withFeaturedImage": false,
+      "fields": ["htmlContent"]
+    }
+  ]
+}

package/site-schema.l10n.en.json

@@ -0,0 +1,94 @@
+{
+  "nodeTypes": {
+    "home": {
+      "label": "Home page",
+      "lists": {
+        "partners": {
+          "label": "Partners",
+          "addPart": "Add a partner",
+          "reorderParts": "Reorder partners"
+        }
+      }
+    },
+    "partner": {
+      "label": "Partner",
+      "fields": {
+        "url": {
+          "label": "URL"
+        },
+        "color": {
+          "label": "Color"
+        }
+      },
+      "list": {
+        "addPart": "Add a side image"
+      }
+    },
+    "sideImage": {
+      "label": "Side image"
+    },
+    "exhibition": {
+      "label": "Exhibition",
+      "addChild": "Add a shelf"
+    },
+    "shelf": {
+      "label": "Shelf",
+      "addChild": "Add an article",
+      "fields": {
+        "color": {
+          "label": "Color"
+        }
+      }
+    },
+    "videoPage": {
+      "label": "Video page"
+    },
+    "pages": {
+      "label": "Pages",
+      "addChild": "Add a page"
+    },
+    "page": {
+      "label": "Page",
+      "fields": {
+        "testTime": {
+          "label": "Update time (Test)",
+          "validateBtn": "Validate"
+        },
+        "testDate": {
+          "label": "Update date (Test)"
+        }
+      }
+    },
+    "posts": {
+      "label": "Posts",
+      "addChild": "Add a post"
+    },
+    "post": {
+      "label": "Post"
+    },
+    "tags": {
+      "label": "Tags",
+      "addChild": "Add a tag"
+    },
+    "tag": {
+      "label": "Post Tag"
+    },
+    "aboutPage": {
+      "label": "About page",
+      "fields": {
+        "testTime": {
+          "label": "Update time (Test)"
+        },
+        "testDate": {
+          "label": "Update date (Test)"
+        }
+      }
+    },
+    "contactPage": {
+      "label": "Contact page"
+    },
+    "searchPage": {
+      "label": "Search page"
+    }
+  }
+}

package/site-schema.l10n.fr.json

@@ -0,0 +1,94 @@
+{
+  "nodeTypes": {
+    "home": {
+      "label": "Page d'accueil",
+      "lists": {
+        "partners": {
+          "label": "Partenaires",
+          "addPart": "Ajouter un partenaire",
+          "reorderParts": "Réordonner les partenaires"
+        }
+      }
+    },
+    "partner": {
+      "label": "Partenaire",
+      "fields": {
+        "url": {
+          "label": "URL"
+        },
+        "color": {
+          "label": "Couleur"
+        }
+      },
+      "list": {
+        "addPart": "Ajouter une image de côté"
+      }
+    },
+    "sideImage": {
+      "label": "Image de côté"
+    },
+    "exhibition": {
+      "label": "Exposition",
+      "addChild": "Ajouter un rayon"
+    },
+    "shelf": {
+      "label": "Rayon",
+      "addChild": "Ajouter un article",
+      "fields": {
+        "color": {
+          "label": "Couleur"
+        }
+      }
+    },
+    "videoPage": {
+      "label": "Page vidéo"
+    },
+    "pages": {
+      "label": "Pages",
+      "addChild": "Ajouter une page"
+    },
+    "page": {
+      "label": "Page",
+      "fields": {
+        "testTime": {
+          "label": "Heure de mise à jour (Test)"
+        },
+        "testDate": {
+          "label": "Date de mise à jour (Test)"
+        }
+      }
+    },
+    "posts": {
+      "label": "Articles",
+      "addChild": "Ajouter un article"
+    },
+    "post": {
+      "label": "Article"
+    },
+    "tags": {
+      "label": "Tags",
+      "addChild": "Ajouter un tag"
+    },
+    "tag": {
+      "label": "Tag d'article"
+    },
+    "aboutPage": {
+      "label": "Page à propos",
+      "fields": {
+        "testTime": {
+          "label": "Heure de mise à jour (Test)",
+          "validateBtn": "Valider"
+        },
+        "testDate": {
+          "label": "Date de mise à jour (Test)"
+        }
+      }
+    },
+    "contactPage": {
+      "label": "Page de contact"
+    },
+    "searchPage": {
+      "label": "Page de recherche"
+    }
+  }
+}

package/theme/assets/css/index.css

@@ -0,0 +1 @@
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,button{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}:root{--siteAppBtnBgColor: "";--siteAppSearchIconColor: "";--siteAppBtnFgColor: "";--siteAppMobileMenuMaxWidth: 992px;--transitionDuration: 0.2s}.Container{margin-left:auto;margin-right:auto;max-width:1200px}.Container.text{max-width:700px}@media not all and (min-width: 640px){.Container{width:90%}}@media(min-width: 640px){.Container.pad{max-width:1240px;padding-left:20px;padding-right:20px}.Container.pad.text{max-width:740px}}@media(min-width: 640px){.Grid6,.Grid9,.Grid12{column-gap:25px;display:grid;row-gap:25px}.Grid6{grid-template-columns:repeat(6, 1fr)}.Grid9{grid-template-columns:repeat(9, 1fr)}.Grid12{grid-template-columns:repeat(12, 1fr)}.Span2{grid-column-end:span 2}.Span3{grid-column-end:span 3}.Span4{grid-column-end:span 4}.Span6{grid-column-end:span 6}.Span12{grid-column-end:span 12}.Column3{grid-column-start:3}.Column7{grid-column-start:7}@media not all and (min-width: 992px){.Span4Tablet{grid-column-end:span 4}}}.Text{hyphens:auto;overflow-wrap:break-word}@media not all and (min-width: 640px){.Text{hyphens:auto}}.Text.justified p,.Text.justified li{text-align:justify}.Text.selfContained::after{clear:both;content:"";display:block}.Text a{text-decoration:underline}.Text a:hover{text-decoration:none}.Text h1,.Text h2{clear:both;font-size:1.75rem;font-weight:bold;margin:2rem 0}.Text h3{font-size:1.125rem;font-weight:bold;margin:1.5rem 0}.Text h4,.Text h5{font-size:1rem;font-weight:bold}.Text blockquote,.Text h4,.Text h5,.Text ol,.Text p,.Text table,.Text ul{margin-bottom:10px}.Text blockquote{margin-left:50px;margin-right:20px}.Text ul,.Text ol{margin-left:20px}.Text li{margin-bottom:5px}.Text ul{list-style:disc}.Text ol{list-style:decimal}.Text ul ul,.Text ol ul{list-style:circle}.Text ul ol,.Text ol ol{list-style:lower-alpha}.Text img,.Text svg{height:auto;max-width:100%}.Text .Img.left{float:left;margin:5px 20px 10px 0}.Text .Img.right{float:right;margin:5px 0 10px 20px}.Text .Img.center{display:block;margin:20px auto}.Text .ql-align-center{text-align:center !important}.Text .ql-align-right{text-align:right !important}.Text .ql-size-small{font-size:.5625rem}.Text .ql-size-large{font-size:1.125rem}.Text .ql-size-huge{font-size:2rem}.Text .hljs{background-color:#f5f5f5;border-left:15px solid #ddd;font-family:monospace;font-size:.875rem;line-height:1.35;margin:20px 10px;overflow-x:auto;padding:10px 20px 10px 15px}.Text code{background-color:#f5f5f5;border:1px dotted #ccc;color:#785454;font-family:sans-serif;font-size:.9375rem;padding:1px 3px}.Breadcrumb{align-items:center;display:flex;margin-bottom:20px}.Breadcrumb-imgIcon{height:24px;width:24px}.Breadcrumb-span{display:inline-block;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Breadcrumb-a{color:#6c98e2 !important}.HeaderBar{align-items:center;display:flex;justify-content:space-between;margin-bottom:30px}.HeaderBar-logoTitle{align-items:center;display:flex}.HeaderBar-siteLogo{margin-right:10px}.HeaderBar-siteTitle{font-size:18px;font-weight:bold}.HeaderBar nav ul{display:flex}.HeaderBar nav li{list-style:none;padding:5px 10px}.HeaderBar nav li>a{text-decoration:none}@media not all and (min-width: 992px){.HeaderBar nav li{list-style:none;margin-bottom:10px}.HeaderBar nav li a{align-items:center;display:flex;height:50px;text-decoration:none}}.HeaderBar>div:nth-last-child(1){align-items:center;display:flex}.HeaderBar-searchBtn{margin-right:10px}.HeaderBar .SearchOpenerBtn{padding:8px 10px}.Tile{background-color:#f0f0f0}.Tile-img{display:block;height:auto;object-fit:cover;width:100%}@media not all and (min-width: 640px){.Tile{margin-bottom:20px}.Tile-text{padding:10px}}.Tile2{background-color:#f0f0f0}.Tile2-img{display:block;height:auto;width:100%}.Tile2-text{padding:10px}@media not all and (min-width: 640px){.Tile2{margin-bottom:20px}}.Tile-tags{display:flex;flex-wrap:wrap}.Tile-tags>span{border:1px solid #000;border-radius:15px;margin-bottom:10px;margin-right:5px;padding:5px 10px}.HeroBanner-img{height:545px;object-fit:cover;width:100%}@media not all and (min-width: 992px){.HeroBanner-img{height:300px}}@media not all and (min-width: 640px){.HeroBanner-img{height:200px}}.SiteFooter{background-color:#fafafa;margin-top:10px;padding:15px 0;text-align:center}.SiteFooter>span:nth-child(1){font-weight:bold;margin-right:15px}.ResultItem{margin-bottom:20px}.Paginate-left{text-align:left}.Paginate-next{text-align:right}.Gallery{display:flex;flex-wrap:wrap}.Gallery-item{height:150px;margin:10px;object-fit:cover;width:280px}.ContactForm-error{background-color:#f7c9c9;border:1px solid #bdaeae;color:#504848}.ContactForm-ended{background-color:#e7ffd7}.ContactForm-btn{border:2px solid #8bdda0;padding:20px}.ContactForm-btn,.ContactForm-btn:visited{color:#674002}.ContactForm-btn:not(:disabled):not(.inProgress):focus,.ContactForm-btn:not(:disabled):not(.inProgress):hover{background-color:#b77306;color:#fff}.ContactForm-btn.inProgress::before{border:6px solid #ddbe8b;border-color:#ddbe8b rgba(0,0,0,0) #ddbe8b rgba(0,0,0,0)}.List{display:flex;flex-direction:column;margin-top:20px}.PartItem{margin:0 auto}.PartItem img{margin-bottom:10px}.PartItem.partner{margin-bottom:20px;max-width:300px}.PartItem.partner p{margin-top:10px}.PartItem.sideImage{display:flex;width:100%}.PartItem.sideImage p{margin-left:10px}

package/theme/assets/icons/arrow-grey.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#7f7f84" d="M8 5v14l11-7z"/></svg>

package/theme/assets/js/main.js

@@ -0,0 +1,3 @@
+document.addEventListener("DOMContentLoaded", () => {
+  
+});

package/theme/assets/scss/_Breadcrumb.scss

@@ -0,0 +1,22 @@
+.Breadcrumb {
+  align-items: center;
+  display: flex;
+  margin-bottom: 20px;
+
+  &-imgIcon {
+    height: 24px;
+    width: 24px;
+  }
+
+  &-span {
+    display: inline-block;
+    max-width: 300px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &-a {
+    color: #6c98e2 !important;
+  }
+}

package/theme/assets/scss/_ContactForm.scss

@@ -0,0 +1,34 @@
+.ContactForm {
+  &-error {
+    background-color: rgb(247, 201, 201);
+    border: 1px solid rgb(189, 174, 174);
+    color: rgb(80, 72, 72);
+  }
+
+  &-ended {
+    background-color: rgb(231, 255, 215);
+  }
+
+
+  &-btn {
+    border: 2px solid #8bdda0;
+    padding: 20px;
+  }
+
+  &-btn,
+  &-btn:visited {
+    color: #674002;
+  }
+
+
+  &-btn:not(:disabled):not(.inProgress):focus,
+  &-btn:not(:disabled):not(.inProgress):hover {
+    background-color: #b77306;
+    color: white;
+  }
+
+  &-btn.inProgress::before {
+    border: 6px solid #ddbe8b;
+    border-color: #ddbe8b transparent #ddbe8b transparent;
+  }
+}

package/theme/assets/scss/_Gallery.scss

@@ -0,0 +1,11 @@
+.Gallery {
+  display: flex;
+  flex-wrap: wrap;
+
+  &-item {
+    height: 150px;
+    margin: 10px;
+    object-fit: cover;
+    width: 280px;
+  }
+}

package/theme/assets/scss/_HeaderBar.scss

@@ -0,0 +1,64 @@
+@use "constants";
+
+.HeaderBar {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 30px;
+
+  &-logoTitle {
+    align-items: center;
+    display: flex;
+  }
+
+  &-siteLogo {
+    margin-right: 10px;
+  }
+
+  &-siteTitle {
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  nav {
+    ul {
+      display: flex;
+    }
+
+    li {
+      list-style: none;
+      padding: 5px 10px;
+    }
+
+    li>a {
+      text-decoration: none;
+    }
+  }
+
+  @include constants.for-phone-and-tablet {
+    nav li {
+      list-style: none;
+      margin-bottom: 10px;
+
+      a {
+        align-items: center;
+        display: flex;
+        height: 50px;
+        text-decoration: none;
+      }
+    }
+  }
+
+  &>div:nth-last-child(1) {
+    align-items: center;
+    display: flex;
+  }
+
+  &-searchBtn {
+    margin-right: 10px;
+  }
+
+  .SearchOpenerBtn {
+    padding: 8px 10px;
+  }
+}