@shoprenter/sr-styleguide 1.0.0 → 1.1.0

package/README.md

@@ -8,14 +8,12 @@
 
 ## Használat
 
-A Styleguide stílus szabályai csak a `#sr-styleguide` css selectoron belül lesznek érvényesek. A Styleguide-ot használó Vue alkalmazás szülő DOM elemének rendelkeznie kell ezzel az attribútummal.
-
 Ahhoz, hogy a Styleguide komponenseit a saját Vue alkalmazásunkban használhassuk:
 
 - hozzá kell adnunk az alkalmazáshoz a komponenseket
 ```javascript
 import Vue from 'vue'
-import { SrStyleguideComponents } from 'sr-styleguide'
+import { SrStyleguideComponents } from '@shoprenter/sr-styleguide'
 
 Vue.use(SrStyleguideComponents)
 ```
@@ -23,7 +21,7 @@ Vue.use(SrStyleguideComponents)
 - az alkalmazást a Styleguide felkonfigurált Vuetify példányával kell inicializálnunk
 ```javascript
 import Vue from 'vue'
-import {SrStyleguide} from 'sr-styleguide'
+import {SrStyleguide} from '@shoprenter/sr-styleguide'
 
 const app = new Vue({
     vuetify: SrStyleguide,
@@ -33,5 +31,5 @@ const app = new Vue({
 - be kell töltenünk az oldalra a Styleguide stílusfájlt
 
 ```javascript
-import 'sr-styleguide/dist/stylesheet/sr-styleguide.css'
+import '@shoprenter/sr-styleguide/dist/stylesheet/sr-styleguide.css'
 ```

package/dist/demo/src/demo_bootstrap_js.css

@@ -1,5 +1,7 @@
-#sr-styleguide .vb>.vb-dragger{z-index:5;width:12px;right:0}#sr-styleguide .vb>.vb-dragger>.vb-dragger-styler{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:rotate3d(0, 0, 0, 0);transform:rotate3d(0, 0, 0, 0);-webkit-transition:background-color 100ms ease-out,margin 100ms ease-out,height 100ms ease-out;transition:background-color 100ms ease-out,margin 100ms ease-out,height 100ms ease-out;background-color:var(--sr-primary);opacity:.1;margin:5px 5px 5px 0;border-radius:20px;height:calc(100% - 10px);display:block}#sr-styleguide .vb.vb-scrolling-phantom>.vb-dragger>.vb-dragger-styler{background-color:var(--sr-primary);opacity:.3}#sr-styleguide .vb>.vb-dragger:hover>.vb-dragger-styler{background-color:var(--sr-primary);opacity:.5;margin:0px;height:100%}#sr-styleguide .vb.vb-dragging>.vb-dragger>.vb-dragger-styler{background-color:var(--sr-primary);opacity:.5;margin:0;height:100%}#sr-styleguide .vb.vb-dragging-phantom>.vb-dragger>.vb-dragger-styler{background-color:var(--sr-primary);opacity:.5}
+#sr-styleguide .admin-container{--container-padding: 0;padding:0 var(--container-padding)}@media(min-width: 600px){#sr-styleguide .admin-container{--container-padding: 20px}}@media(min-width: 960px){#sr-styleguide .admin-container{--container-padding: 30px}}@media(min-width: 1264px){#sr-styleguide .admin-container{--container-padding: 40px}}@media screen and (min-width: 1700px){#sr-styleguide .admin-container{max-width:1340px;--container-padding: 0}}#sr-styleguide .vb>.vb-dragger{z-index:5;width:12px;right:0}#sr-styleguide .vb>.vb-dragger>.vb-dragger-styler{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:rotate3d(0, 0, 0, 0);transform:rotate3d(0, 0, 0, 0);-webkit-transition:background-color 100ms ease-out,margin 100ms ease-out,height 100ms ease-out;transition:background-color 100ms ease-out,margin 100ms ease-out,height 100ms ease-out;background-color:var(--sr-primary);opacity:.1;margin:5px 5px 5px 0;border-radius:20px;height:calc(100% - 10px);display:block}#sr-styleguide .vb.vb-scrolling-phantom>.vb-dragger>.vb-dragger-styler{background-color:var(--sr-primary);opacity:.3}#sr-styleguide .vb>.vb-dragger:hover>.vb-dragger-styler{background-color:var(--sr-primary);opacity:.5;margin:0px;height:100%}#sr-styleguide .vb.vb-dragging>.vb-dragger>.vb-dragger-styler{background-color:var(--sr-primary);opacity:.5;margin:0;height:100%}#sr-styleguide .vb.vb-dragging-phantom>.vb-dragger>.vb-dragger-styler{background-color:var(--sr-primary);opacity:.5}
 #sr-styleguide .admin-style-guide-layout{display:grid;grid-gap:40px;grid-template-columns:1fr}@media only screen and (min-width: 600px){#sr-styleguide .admin-style-guide-layout{grid-template-columns:1fr}}@media only screen and (min-width: 960px){#sr-styleguide .admin-style-guide-layout{grid-template-columns:250px 1fr}}@media only screen and (min-width: 1264px){#sr-styleguide .admin-style-guide-layout{grid-template-columns:300px 1fr}}#sr-styleguide .admin-style-guide__menu{position:sticky;top:60px;height:100vh}#sr-styleguide .sg-page-header{padding:30px 0 60px 0}#sr-styleguide .sg-section{margin-top:60px;margin-bottom:40px}#sr-styleguide .sg-section-header{border-left:5px solid var(--sr-black);padding:0 0 0 15px;line-height:1.2;text-transform:uppercase}#sr-styleguide .sg-subsection{width:100%;margin-top:50px;margin-bottom:50px}#sr-styleguide .sg-subsection h2{margin-bottom:20px;font-weight:500;position:relative;padding-left:40px;text-transform:uppercase}#sr-styleguide .sg-subsection h2:before{content:"";display:block;width:30px;height:4px;background:var(--sr-black);position:absolute;left:0;top:calc(50% - 2px)}#sr-styleguide .sg-subsection h4{font-weight:400;border-left:3px solid var(--v-secondary-base);padding:0 0 0 15px;line-height:1.2;text-transform:uppercase;margin-bottom:20px}#sr-styleguide .sg-block{margin-top:50px}#sr-styleguide .sg-button-list{display:flex;justify-content:space-between}#sr-styleguide .sg-button-type{flex:0 0 20%}
+#sr-styleguide .admin-breadcrumb-container{display:flex;justify-content:space-between;align-items:center}@media(max-width: 599.98px){#sr-styleguide .admin-breadcrumb-container{display:none}}@media(max-width: 599.98px){#sr-styleguide .admin-page-header{margin-left:20px;margin-right:20px}}#sr-styleguide .admin-page-header .admin-page-header-title{display:flex;background:rgba(0,0,0,0);flex-direction:column;margin-bottom:20px}@media(min-width: 600px){#sr-styleguide .admin-page-header .admin-page-header-title{flex-direction:row;justify-content:space-between;margin-top:50px}}#sr-styleguide .admin-page-header .admin-page-header-title h1{margin:0;color:var(--sr-black)}#sr-styleguide .admin-page-header .admin-page-header-title h1 svg{display:none}@media screen and (min-width: 520px){#sr-styleguide .admin-page-header.sticky-head-active{position:fixed;width:calc(100% - var(--header-height));margin:0;top:0;display:flex;left:var(--header-height);z-index:201 !important;height:var(--header-height);background-color:var(--sr-black);padding:0 var(--container-padding);align-items:center;color:#fff}#sr-styleguide .admin-page-header.sticky-head-active .admin-page-header-title{margin:0;width:100%}#sr-styleguide .admin-page-header.sticky-head-active .admin-page-header-title h1{color:#fff;font-size:18px}#sr-styleguide .admin-page-header.sticky-head-active .admin-breadcrumb-container, #sr-styleguide .admin-page-header.sticky-head-active .admin-page-header-head, #sr-styleguide .admin-page-header.sticky-head-active .admin-page-header-foot{display:none}}@media(min-width: 960px){#sr-styleguide .admin-page-header.sticky-head-active{width:calc(100% - var(--sidebar-width));left:var(--sidebar-width)}}@media screen and (min-width: 1700px){#sr-styleguide .admin-page-header.sticky-head-active{padding:0 20px}}#sr-styleguide .admin-page-header-content{display:flex;align-items:center}@media(max-width: 959.98px){#sr-styleguide .admin-page-header-content{flex-wrap:wrap}#sr-styleguide .admin-page-header-content .v-toolbar__items{width:100%;margin-top:10px}#sr-styleguide .admin-page-header-content .v-toolbar__content{height:auto !important}}
+#sr-styleguide .admin-breadcrumbs{padding:0}#sr-styleguide .admin-breadcrumbs .v-breadcrumbs__item{transition:none;color:var(--sr-link-grey) !important}#sr-styleguide .admin-breadcrumbs .v-breadcrumbs__item:hover{color:var(--sr-dark-grey) !important}#sr-styleguide .admin-breadcrumbs .v-breadcrumbs__item .v-icon{margin-right:5px;color:inherit}#sr-styleguide .admin-breadcrumbs .v-breadcrumbs__divider{padding:0 5px}#sr-styleguide .admin-breadcrumbs li:last-child{font-weight:500}
 #sr-styleguide .sg-iconset{--icon-size: 50px;display:grid;grid-template-columns:1fr;grid-gap:20px}#sr-styleguide .sg-icon-container{height:var(--icon-size);width:var(--icon-size);background-color:var(--sr-light-grey);display:flex;justify-content:center;align-items:center;flex-shrink:0}#sr-styleguide .sg-iconset>div{display:flex;align-items:center;gap:20px}#sr-styleguide sr-code-block{flex-grow:1;min-width:300px}
 /**
  * prism.js default theme for JavaScript, CSS and HTML