{"version":3,"sources":["webpack:///./src/components/Documentation.vue","webpack:///./src/components/Documentation.vue?ad66","webpack:///./src/components/Documentation.vue?b2cd"],"names":["class","href","src","alt","style","script","__exports__","render"],"mappings":"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","file":"js/chunk-268df900.9db8e55f.js","sourcesContent":["<template>\n    <div class=\"grid\">\n        <div class=\"col-12\">\n            <div class=\"card docs\">\n                <h5>Current Version</h5>\n                <p>Vue 3 and PrimeVue 3.x</p>\n\n                <h5>Dependencies</h5>\n\t\t\t\t<p>\n\t\t\t\t\tUltima has no direct dependency other than PrimeVue. More\n\t\t\t\t\tinformation about dependencies is available at\n\t\t\t\t\t<a href=\"https://www.primefaces.org/primevue-3-0-0-final-released-for-vue-3/\">PrimeVue 3.0.0 Is Ready For PrimeTime</a>\n\t\t\t\t\tarticle.\n\t\t\t\t</p>\n\n                <h5>Getting Started</h5>\n                <p>Ultima is an application template for Vue based on the <a href=\"https://www.primefaces.org/primevue-3-0-0-final-released-for-vue-3/\">PrimeVue 3.0.0 Is Ready For PrimeTime</a>\n\t\t\t\t\tarticle.\n                </p>\n<pre v-code><code>\nnpm install -g @vue/cli\n\n# OR\n\nyarn global add @vue/cli\n\n</code></pre>\n\n                <p>Once CLI is ready in your system, extract the contents of the Ultima zip file distribution, cd to the directory and install the libraries from npm.</p>\n\n<pre v-code><code>\ncd ultima\nnpm install\nnpm run serve\n\n</code></pre>\n\n                <p>The application should run at http://localhost:8080/, you may now start with the development of your application.</p>\n\n                <h5>Important CLI Commands</h5>\n                <p>Following commands are derived from CLI.</p>\n<pre v-code><code>\n\"npm run serve\": Starts the development server\n\"npm run build\": Builds the application for deployment.\n\"npm run lint\": Executes the lint checks.\n\"npm run test:unit\": Runs the tests.\n\n</code></pre>\n\n                <h5>Structure</h5>\n                <p>Ultima consists of 2 main parts; the application layout and the resources. <i>App.vue</i> inside src folder is the main component containing the template for the base layout\n                    whereas required resources such as SASS structure for the layout are placed inside the <b>src/assets/sass/layout</b> folder.</p>\n\n                <h5>Template</h5>\n                <p>Main layout is the template of the <i>App.vue</i>, it is divided into a couple of child components such as topbar, content, menu and footer. Here is template of the\n                    <i>App.vue</i> component that implements the logic such as menu state, layout modes and other configurable options.\n                </p>\n<pre v-code><code>\n&lt;template&gt;\n\t&lt;div :class=\"layoutContainerClass\" @click=\"onDocumentClick\"&gt;\n\t\t&lt;AppTopBar :horizontal=\"menuMode==='horizontal'\" :topbarMenuActive=\"topbarMenuActive\" :activeTopbarItem=\"activeTopbarItem\" :mobileTopbarActive=\"mobileTopbarActive\" @topbar-mobileactive=\"onTopbarMobileButtonClick\"\n\t\t\t@menubutton-click=\"onMenuButtonClick\" @topbar-menubutton-click=\"onTopbarMenuButtonClick\" @topbaritem-click=\"onTopbarItemClick\" @rightpanel-button-click=\"onRightPanelButtonClick\"&gt;&lt;/AppTopBar&gt;\n\n\t\t\t&lt;div class=\"menu-wrapper\"&gt;\n\t\t\t\t&lt;div class=\"layout-menu-container\" @click=\"onMenuClick\"&gt;\n\t\t\t\t\t\t&lt;AppInlineMenu v-if=\"inlineMenuPosition === 'top' || inlineMenuPosition === 'both'\" v-model:active=\"inlineMenuTopActive\" @change-inlinemenu=\"onChangeInlineMenu\" inlineMenuKey=\"top\" :menuMode=\"menuMode\"&gt;&lt;/AppInlineMenu&gt;\n\t\t\t\t\t\t&lt;AppMenu :model=\"menu\" :menuMode=\"menuMode\" :active=\"menuActive\" @menuitem-click=\"onMenuItemClick\" @root-menuitem-click=\"onRootMenuItemClick\"&gt;&lt;/AppMenu&gt;\n\t\t\t\t\t\t&lt;AppInlineMenu v-if=\"inlineMenuPosition === 'bottom' || inlineMenuPosition === 'both'\" v-model:active=\"inlineMenuBottomActive\" @change-inlinemenu=\"onChangeInlineMenu\" inlineMenuKey=\"bottom\" :menuMode=\"menuMode\"&gt;&lt;/AppInlineMenu&gt;\n\t\t\t\t&lt;/div&gt;\n\t\t\t&lt;/div&gt;\n\n\t\t&lt;div class=\"layout-main\"&gt;\n\n\t\t\t&lt;AppBreadcrumb&gt;&lt;/AppBreadcrumb&gt;\n\n\t\t\t&lt;div class=\"layout-content\"&gt;\n\t\t\t\t&lt;router-view /&gt;\n\t\t\t&lt;/div&gt;\n\n\t\t\t&lt;AppFooter :layoutMode=\"layoutMode\" /&gt;\n\t\t&lt;/div&gt;\n\n\t\t&lt;AppConfig :menuMode=\"menuMode\" @menu-mode-change=\"onMenuModeChange\" @menu-color-change=\"onMenuColorChange\" @menu-theme=\"onMenuTheme\"\n\t\t\t\t:layoutMode=\"d_layoutMode\" @topbar-theme=\"onTopbarThemeChange\"\n\t\t\t\tv-model:inlineMenuPosition=\"inlineMenuPosition\" @inlinemenu-change=\"onInlineMenuPositionChange\"\n\t\t\t\t:theme=\"theme\" :themes=\"themes\" @theme-change=\"changeTheme\" :menuTheme=\"d_menuTheme\" :menuThemes=\"menuThemes\"\n\t\t\t\t:topbarTheme=\"d_topbarTheme\" :topbarThemes=\"topbarThemes\"&gt;&lt;/AppConfig&gt;\n\n\t\t&lt;AppRightPanel :expanded=\"rightPanelActive\" @content-click=\"onRightPanelClick\"&gt;&lt;/AppRightPanel&gt;\n\n\t\t&lt;div v-if=\"mobileMenuActive\" class=\"layout-mask modal-in\"&gt;&lt;/div&gt;\n\t&lt;/div&gt;\n&lt;/template&gt;\n\n</code></pre>\n\n                <h5>Topbar</h5>\n                <img src=\"/layout/images/doc/topbar-doc.jpg\" alt=\"topbar\" class=\"mb-3\" style=\"max-width: 60%;\"/>\n                <p>It is a separate component defined in AppTopbar.vue file. This menu can be fully customized according to the application's needs.\n                    There are special classes in the topbar to provide some interactions such as hover, expand/collapse state etc. The pseudo code is as follows.</p>\n\n<pre v-code><code>\n&lt;elementTag class=&quot;layout-topbar&quot;&gt;\n    &lt;elementTag class=&quot;layout-topbar-left&quot;&gt;\n        &lt;elementTag class=&quot;layout-topbar-logo&quot;&gt;\n            // custom implementation to add logo\n        &lt;/elementTag&gt;\n\n        &lt;elementTag class=&quot;layout-menu-button&quot; @click=&quot;onMenuButtonClick($event)&quot; v-ripple&gt;\n            // custom implementation to add menu button\n        &lt;/elementTag&gt;\n\n        &lt;elementTag class=&quot;layout-topbar-mobile-button&quot; @click=&quot;onTopbarMobileButtonClick($event)&quot; v-ripple&gt;\n            // custom implementation to add mobile menu button\n        &lt;/elementTag&gt;\n    &lt;/elementTag&gt;\n\n    &lt;elementTag class=&quot;layout-topbar-right&quot; :class=&quot;&#123;'layout-topbar-mobile-active': mobileTopbarActive&#125;&quot;&gt;\n        &lt;elementTag class=&quot;layout-topbar-actions-left&quot;&gt;\n            // custom implementation. Maybe, a megaMenu component can be added.\n        &lt;/elementTag&gt;\n        &lt;elementTag class=&quot;layout-topbar-actions-right&quot;&gt;\n            &lt;elementTag class=&quot;layout-topbar-items&quot;&gt;\n                &lt;elementTag class=&quot;layout-topbar-item layout-search-item&quot;&gt;\n                    &lt;elementTag class=&quot;layout-topbar-action&quot; @click=&quot;onTopbarItemClick($event, 'search')&quot; v-ripple&gt;\n                        // custom implementation\n                    &lt;/elementTag&gt;\n\n                    &lt;elementTag class=&quot;layout-search-panel&quot; v-if=&quot;search&quot; &gt;\n                        // custom implementation\n                        &lt;InputText type=&quot;text&quot; placeholder=&quot;Search&quot; @click=&quot;searchClick = true;&quot; @keydown=&quot;onSearchKeydown($event)&quot;/&gt;\n                    &lt;/elementTag&gt;\n                &lt;/elementTag&gt;\n                // A unique class can be defined to keep track of the expanded/collapsed states of each item. For example, The 'custom-class' is defined for this item.\n                &lt;elementTag class=&quot;layout-topbar-item custom-class&quot;&gt;\n                    &lt;elementTag class=&quot;layout-topbar-action&quot; @click=&quot;onTopbarItemClick($event, 'custom-class')&quot; v-ripple&gt;\n                        // custom implementation. Used to open this action panel.\n                    &lt;/elementTag&gt;\n\n                    &lt;elementTag class=&quot;layout-topbar-action-panel&quot;&gt;\n                        &lt;elementTag&gt;\n                            // custom implementation\n                        &lt;/elementTag&gt;\n                        //OR\n                        // The 'layout-topbar-action-item' class is defined so that an element can have hover state.\n                        &lt;elementTag class=&quot;layout-topbar-action-item&quot;&gt;\n                            // custom implementation\n                        &lt;/elementTag&gt;\n                    &lt;/elementTag&gt;\n                &lt;/elementTag&gt;\n            &lt;/elementTag&gt;\n        &lt;/elementTag&gt;\n    &lt;/elementTag&gt;\n&lt;/elementTag&gt;\n</code></pre>\n                <small class=\"muted-text\">(* Note: The &lt;elementTag&gt; tag can be an html element or a component tag. It can be changed according to need.)</small>\n\n\n\n            <h5>Right Menu</h5>\n            <img src=\"/layout/images/doc/rightmenu-doc.jpg\" alt=\"rightmenu\" class=\"mb-3\" style=\"max-width: 60%; height: 300px;\"/>\n            <p>It is a separate component defined in AppRightMenu.vue file based on PrimeVue <a href=\"https://primefaces.org/primevue/showcase/#/sidebar\">Sidebar</a> component.\n                All properties of the sidebar component are available. The menu can be fully customized according to the application's needs.\n                There are special methods and classes in the right menu to provide some interactions. The pseudo code is as follows.</p>\n\n<pre v-code><code>\n// in AppTopbar.vue or elsewhere\n&lt;elementTag @click=&quot;onRightMenuButtonClick($event)&quot; v-ripple&gt;\n    // custom implementation\n&lt;/elementTag&gt;\n\n// in AppRightMenu.vue\n&lt;Sidebar v-model:visible=&quot;rightMenuActive&quot; :baseZIndex=&quot;1000&quot; :class=&quot;'layout-rightmenu p-sidebar-sm'&quot;&gt;\n    // custom implementation\n&lt;/Sidebar&gt;\n\n</code></pre>\n<small class=\"muted-text\">(* Note: The &lt;elementTag&gt; tag can be an html element or a component tag. It can be changed according to need.)</small>\n\n            <h5>Inline Menu</h5>\n            <img src=\"/layout/images/doc/inlinemenu-doc.jpg\" alt=\"rightmenu\" class=\"mb-3\" style=\"max-width: 60%; height: 450px;\"/>\n            <p>It is a separate component defined in AppInlineMenu.vue file. This menu can be fully customized according to the application's needs and it is created according to its location within the element with the layout-menu-container class.\n                There are special classes in the inline menu to provide some interactions. The pseudo code is as follows.</p>\n<pre v-code><code>\n&lt;elementTag :class=&quot;&#123;'layout-inline-menu-active': active&#125;&quot;&gt;\n    &lt;elementTag class=&quot;layout-inline-menu-action&quot; @click=&quot;onClick($event)&quot;&gt;\n        // custom implementation\n        &lt;elementTag class=&quot;layout-inline-menu-icon&quot;&gt;&lt;/elementTag&gt; // custom icon\n    &lt;/elementTag&gt;\n\n    &lt;elementTag class=&quot;layout-inline-menu-action-panel&quot;&gt;\n        &lt;elementTag class=&quot;layout-inline-menu-action-item&quot;&gt;\n            // custom implementation\n        &lt;/elementTag&gt;\n    &lt;/elementTag&gt;\n&lt;/elementTag&gt;\n</code></pre>\n<small class=\"muted-text\">(* Note: The &lt;elementTag&gt; tag can be an html element or a component tag. It can be changed according to need.)</small>\n\n                <h5>Menu</h5>\n                <p>Menu is a separate component defined in <i>AppMenu.vue</i> file. In order to define the menuitems,\n                    navigate to data section of <i>App.vue</i> file and define your own model as a nested structure using the menu property.\n                    Here is the menu component from the demo application. Notice that menu object is bound to the model property of AppMenu component as shown above.</p>\n\n<div style=\"overflow: auto; height: 400px; margin-bottom: 10px\">\n<pre v-code.script><code>\ndata() &#123;\n    return &#123;\n        menu: [\n\t\t\t{\n\t\t\t\tlabel: 'Favorites',\n\t\t\t\ticon: 'pi pi-fw pi-home',\n\t\t\t\titems: [\n\t\t\t\t\t{label: 'Dashboard Sales', icon: 'pi pi-fw pi-home', to: '/', badge: 4, badgeStyleClass: 'p-badge-info'},\n\t\t\t\t\t{label: 'Dashboard Analytics', icon: 'pi pi-fw pi-home',\n\t\t\t\t\t\tto: '/favorites/dashboardanalytics', badge:2, badgeStyleClass: 'p-badge-success'}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'UI Kit', icon: 'pi pi-fw pi-star-fill',\n\t\t\t\titems: [\n\t\t\t\t\t{label: 'Input', icon: 'pi pi-fw pi-check-square', to: '/input', badge: 6, badgeStyleClass: 'p-badge-danger'},\n\t\t\t\t\t{label: \"Float Label\", icon: \"pi pi-fw pi-bookmark\", to: \"/floatlabel\"},\n\t\t\t\t\t{label: 'Invalid State', icon: 'pi pi-fw pi-exclamation-circle', to: '/invalidstate'},\n\t\t\t\t\t{label: 'Button', icon: 'pi pi-fw pi-mobile', to: '/button', class: 'rotated-icon'},\n\t\t\t\t\t{label: 'Table', icon: 'pi pi-fw pi-table', to: '/table', badge: 6, badgeStyleClass: 'p-badge-help'},\n\t\t\t\t\t{label: 'List', icon: 'pi pi-fw pi-list', to: '/list'},\n\t\t\t\t\t{label: 'Tree', icon: 'pi pi-fw pi-share-alt', to: '/tree'},\n\t\t\t\t\t{label: 'Panel', icon: 'pi pi-fw pi-tablet', to: '/panel'},\n\t\t\t\t\t{label: 'Overlay', icon: 'pi pi-fw pi-clone', to: '/overlay'},\n\t\t\t\t\t{label: \"Media\", icon: \"pi pi-fw pi-image\", to: \"/media\"},\n\t\t\t\t\t{label: 'Menu', icon: 'pi pi-fw pi-bars', to: '/menus'},\n\t\t\t\t\t{label: 'Message', icon: 'pi pi-fw pi-comment', to: '/messages'},\n\t\t\t\t\t{label: 'File', icon: 'pi pi-fw pi-file', to: '/file'},\n\t\t\t\t\t{label: 'Chart', icon: 'pi pi-fw pi-chart-bar', to: '/chart'},\n\t\t\t\t\t{label: 'Misc', icon: 'pi pi-fw pi-circle-off', to: '/misc'},\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: \"Utilities\", icon:'pi pi-fw pi-compass',\n\t\t\t\titems: [\n\t\t\t\t\t{label: 'Form Layout', icon: 'pi pi-fw pi-id-card', to: '/formlayout', badge: '6', badgeStyleClass: 'p-badge-warning'},\n\t\t\t\t\t{label: 'Display', icon:'pi pi-fw pi-desktop', to:'/display'},\n\t\t\t\t\t{label: 'Elevation', icon:'pi pi-fw pi-external-link', to:'/elevation'},\n\t\t\t\t\t{label: 'Flexbox', icon:'pi pi-fw pi-directions', to:'/flexbox'},\n\t\t\t\t\t{label: 'Icons', icon:'pi pi-fw pi-search', to:'/icons'},\n\t\t\t\t\t{label: 'Text', icon:'pi pi-fw pi-pencil', to:'/text'},\n\t\t\t\t\t{label: 'Widgets', icon:'pi pi-fw pi-star', to:'/widgets'},\n\t\t\t\t\t{label: 'Grid System', icon:'pi pi-fw pi-th-large', to:'/grid'},\n\t\t\t\t\t{label: 'Spacing', icon:'pi pi-fw pi-arrow-right', to:'/spacing'},\n\t\t\t\t\t{label: 'Typography', icon:'pi pi-fw pi-align-center', to:'/typography'}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Pages', icon: 'pi pi-fw pi-briefcase',\n\t\t\t\titems: [\n\t\t\t\t\t{label: 'Crud', icon: 'pi pi-fw pi-pencil', to: '/crud'},\n\t\t\t\t\t{label: 'Calendar', icon: 'pi pi-fw pi-calendar-plus', to: '/calendar'},\n\t\t\t\t\t{label: 'Timeline', icon: 'pi pi-fw pi-calendar', to: '/timeline'},\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: 'Landing',\n\t\t\t\t\t\ticon: 'pi pi-fw pi-globe',\n\t\t\t\t\t\tbadge: '2', badgeStyleClass: 'p-badge-warning',\n\t\t\t\t\t\titems: [\n\t\t\t\t\t\t\t{label: 'Static', icon: 'pi pi-fw pi-globe', url: 'pages/landing.html', target: '_blank'},\n\t\t\t\t\t\t\t{label: 'Component', icon: 'pi pi-fw pi-globe', to: '/landing'}\n\t\t\t\t\t\t]\n\t\t\t\t\t},\n\t\t\t\t\t{label: 'Login', icon: 'pi pi-fw pi-sign-in', to: '/login'},\n\t\t\t\t\t{label: 'Invoice', icon: 'pi pi-fw pi-dollar', to: '/invoice'},\n\t\t\t\t\t{label: 'Help', icon: 'pi pi-fw pi-question-circle', to: '/help'},\n\t\t\t\t\t{label: 'Error', icon: 'pi pi-fw pi-times-circle', to: '/error'},\n\t\t\t\t\t{label: 'Not Found', icon: 'pi pi-fw pi-exclamation-circle', to: '/notfound'},\n\t\t\t\t\t{label: 'Access Denied', icon: 'pi pi-fw pi-lock', to: '/access'},\n\t\t\t\t\t{label: 'Contact Us', icon: 'pi pi-fw pi-pencil', to: '/contactus'},\n\t\t\t\t\t{label: 'Empty', icon: 'pi pi-fw pi-circle-off', to: '/empty'}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Hierarchy', icon: 'pi pi-fw pi-align-left',\n\t\t\t\titems: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: 'Submenu 1', icon: 'pi pi-fw pi-align-left',\n\t\t\t\t\t\titems: [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Submenu 1.1', icon: 'pi pi-fw pi-align-left',\n\t\t\t\t\t\t\t\titems: [\n\t\t\t\t\t\t\t\t\t{label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-align-left'},\n\t\t\t\t\t\t\t\t\t{label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-align-left'},\n\t\t\t\t\t\t\t\t\t{label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-align-left'},\n\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Submenu 1.2', icon: 'pi pi-fw pi-align-left',\n\t\t\t\t\t\t\t\titems: [\n\t\t\t\t\t\t\t\t\t{label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-align-left'},\n\t\t\t\t\t\t\t\t\t{label: 'Submenu 1.2.2', icon: 'pi pi-fw pi-align-left'}\n\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t]\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: 'Submenu 2', icon: 'pi pi-fw pi-align-left',\n\t\t\t\t\t\titems: [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Submenu 2.1', icon: 'pi pi-fw pi-align-left',\n\t\t\t\t\t\t\t\titems: [\n\t\t\t\t\t\t\t\t\t{label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-align-left'},\n\t\t\t\t\t\t\t\t\t{label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-align-left'},\n\t\t\t\t\t\t\t\t\t{label: 'Submenu 2.1.3', icon: 'pi pi-fw pi-align-left'},\n\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: 'Submenu 2.2', icon: 'pi pi-fw pi-align-left',\n\t\t\t\t\t\t\t\titems: [\n\t\t\t\t\t\t\t\t\t{label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-align-left'},\n\t\t\t\t\t\t\t\t\t{label: 'Submenu 2.2.2', icon: 'pi pi-fw pi-align-left'}\n\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t]\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Start', icon: 'pi pi-fw pi-download',\n\t\t\t\titems: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: 'Buy Now', icon: 'pi pi-fw pi-shopping-cart', command: () => { window.location = \"https://www.primefaces.org/store\"}\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: 'Documentation', icon: 'pi pi-fw pi-info-circle', to: '/documentation'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n        ]\n    &#125;\n&#125;\n\n</code></pre>\n</div>\n\n                            <h5>Breadcrumb</h5>\n            <img src=\"/layout/images/doc/breadcrumb-doc.jpg\" alt=\"breadcrumb\" class=\"mb-3\" style=\"max-width: 60%;\"/>\n            <p>It is a separate component defined in AppBreadcrumb.vue file based on PrimeVue <a href=\"https://primefaces.org/primevue/showcase/#/breadcrumb\">Breadcrumb</a> component.\n                All properties of the breadcrumb component are available. The pseudo code is as follows.</p>\n<pre v-code><code>\n&lt;elementTag class=&quot;layout-breadcrumb-container&quot;&gt;\n    &lt;Breadcrumb :home=\"home\" :model=&quot;items&quot; class=&quot;layout-breadcrumb&quot;&gt;&lt;/Breadcrumb&gt;\n    &lt;elementTag class=&quot;layout-breadcrumb-buttons&quot;&gt;\n        // custom implementation for right buttons\n    &lt;/elementTag&gt;\n&lt;/elementTag&gt;\n</code></pre>\n<small class=\"muted-text\">(* Note: The &lt;elementTag&gt; tag can be an html element or a component tag. It can be changed according to need.)</small>\n\n            <h5>Footer</h5>\n            <p>It is a separate component defined in AppFooter.vue file. The pseudo code is as follows.</p>\n<pre v-code><code>\n&lt;elementTag class=&quot;layout-footer&quot;&gt;\n    // custom implementation\n&lt;/elementTag&gt;\n</code></pre>\n<small class=\"muted-text\">(* Note: The &lt;elementTag&gt; tag can be an html element or a component tag. It can be changed according to need.)</small>\n\n                <h5>Integration with an Existing CLI Project</h5>\n\t\t\t\t<p>\n\t\t\t\t\tTo setup Ultima in an existing project, follow the steps\n\t\t\t\t\tbelow;\n\t\t\t\t</p>\n\n\t\t\t\t<ul>\n\t\t\t\t\t<li>Copy the <i>public</i> and <i>src/assets</i> folder to your projects folder with the same name</li>\n\t\t\t\t\t<li>Copy all <i>src/App*.vue</i> files to the src folder of your application.</li>\n\t\t\t\t</ul>\n\n\t\t\t\t<p>Install PrimeVue</p>\n\n<pre v-code><code>\nnpm install primevue@latest --save\nnpm install\tprimeicons@latest --save\n\n</code></pre>\n\n                <p>Add PrimeVue CSS at styles section in main.js.</p>\n\n<pre v-code><code>\nimport 'primevue/resources/primevue.min.css';   \t//required: PrimeVue components\nimport 'primeicons/primeicons.css';\t \t\t\t\t//required: PrimeIcons\nimport './App.scss'; \t                            //your styles and overrides\n\n</code></pre>\n\n                <p>Last part is adding theme and layout css files, in the CLI app they are defined using link tags in index.html so the demo can switch them on the fly by changing the path however\n                    if this is not a requirement, you may also add them to the styles configuration above so they go inside the bundle.</p>\n\n                <h5>Integration with an Existing Non-CLI Project</h5>\n                <p>For an existing project that do not use CLI, setup steps are more or less similar. Start with installing the dependencies listed above in package.json</p>\n                <p>Copy the <i>src/assets</i> folder to your application and include the resources listed above with a module bundler like webpack or using link-script tags.</p>\n                <p>Finally copy the contents of App.vue to your application's main component template such as <i>app/index.html</i> along\n                    with the sub components which are AppMenu.vue, AppTopbar.vue and AppFooter.vue.</p>\n\n                <h5>Theme</h5>\n                <p>Ultima provides 34 PrimeVue themes out of the box, setup of a theme simple including the css of theme to your page that are located inside src/assets/sass/theme folder.</p>\n                <p>In the demo application, theme css file is added to the index page to enable themeswitcher functionality however since VueCLI supports\n                    SASS compilation via webpack, you may also import the sass of the theme to App.vue as well.</p>\n                <ul>\n                    <li>amber/theme-light</li>\n                    <li>amber/theme-dark</li>\n                    <li>blue/theme-light</li>\n                    <li>blue/theme-dark</li>\n                    <li>bluegrey/theme-light</li>\n                    <li>bluegrey/theme-dark</li>\n                    <li>brown/theme-light</li>\n                    <li>brown/theme-dark</li>\n                    <li>cyan/theme-light</li>\n                    <li>cyan/theme-dark</li>\n                    <li>deeporange/theme-light</li>\n                    <li>deeporange/theme-dark</li>\n                    <li>deeppurple/theme-light</li>\n                    <li>deeppurple/theme-dark</li>\n                    <li>green/theme-light</li>\n                    <li>green/theme-dark</li>\n                    <li>indigo/theme-light</li>\n                    <li>indigo/theme-dark</li>\n                    <li>lightblue/theme-light</li>\n                    <li>lightblue/theme-dark</li>\n                    <li>lightgreen/theme-light</li>\n                    <li>lightgreen/theme-dark</li>\n                    <li>lime/theme-light</li>\n                    <li>lime/theme-dark</li>\n                    <li>orange/theme-light</li>\n                    <li>orange/theme-dark</li>\n                    <li>pink/theme-light</li>\n                    <li>pink/theme-dark</li>\n                    <li>purple/theme-light</li>\n                    <li>purple/theme-dark</li>\n                    <li>teal/theme-light</li>\n                    <li>teal/theme-dark</li>\n                    <li>yellow/theme-light</li>\n                    <li>yellow/theme-dark</li>\n                </ul>\n\n                <p>A custom theme can be developed by the following steps.</p>\n                <ul>\n                    <li>Choose a custom theme name such as theme-myown.</li>\n                    <li>Create a file named theme-myown.scss under <i>public/theme folder</i>.</li>\n                    <li>Define the variables listed below and import the <i>src/assets/sass/theme/_theme_light.scss</i> file.</li>\n                    <li>Build the scss to generate css.</li>\n                    <li>Include the theme file to your application.</li>\n                </ul>\n\n                <p>Here are the variables required to create a theme which are the primary and accent colors along with their shades.</p>\n\n<pre v-code.css><code>\n$primaryColor:#2196F3;\n$primaryLightestColor: #E3F2FD;\n$primaryMenuTextColor: $primaryColor;\n$primaryTextColor:#ffffff;\n$accentColor:#f37f21;\n$accentTextColor:#212121;\n\n@import '../../../src/assets/sass/theme/_theme_light';\n\n</code></pre>\n\n                <p>If you prefer to compile manually, an example sass command to compile the css would be;</p>\n\n<pre v-code><code>\nsass public/theme/theme-myown/theme.scss:public/theme/theme-myown/theme.css\n\n</code></pre>\n\n                <p>Watch mode is handy to avoid compiling everytime when a change is made, instead use the following command\n                so that sass generates the file whenever you make a customization. This builds all css files whenever a change is made to any scss file.</p>\n<pre v-code><code>\nsass --update public/layout/css/:public/layout/css/\nsass --update public/theme/:public/theme/\n\n</code></pre>\n\n                <p>For both cases, several .scss files such as _layout.scss, _theme.scss or _variables.scss has to be present relative to your scss files, these are available inside the src/assets/sass folder in the distribution.</p>\n                <p>In case you'd like to customize the structure not just the colors, the _variables.scss is where the structural variables (e.g. font size, paddings) for the layout are defined.</p>\n\n                <h6>src/assets/sass/variables/layout/_layout_common.scss</h6>\n<pre v-code.css><code>\n//general\n$fontSize:14px !default;\n$fontFamily: 'Roboto' !default;\n$borderRadius:5px !default;\n$animationDuration:.2s !default;\n$animationTimingFunction:cubic-bezier(.05,.74,.2,.99) !default;\n$letterSpacing:normal !default;\n$transitionDuration:.2s !default;\n$mobileBreakpoint:991px !default;\n\n</code></pre>\n\n                <h6>src/assets/sass/variables/theme/_theme_light.scss</h6>\n<div style=\"height:400px;overflow: auto;\">\n<pre v-code.css><code>\n$colors: (\n    \"blue\": #2196F3,\n    \"green\": #689F38,\n    \"yellow\": #FBC02D,\n    \"cyan\": #00BCD4,\n    \"pink\": #E91E63,\n    \"indigo\": #4E5FBB,\n    \"teal\": #009688,\n    \"orange\": #FF9800,\n    \"bluegray\": #607D8B,\n    \"purple\": #9C27B0\n);\n\n$emphasis-high:rgba(0,0,0,.87) !default;\n$emphasis-medium:rgba(0,0,0,.60) !default;\n$emphasis-low:rgba(0,0,0,.38) !default;\n$emphasis-lower:rgba(0,0,0,.12) !default;\n$overlayColor:#000000 !default;\n\n//global\n$fontFamily:Roboto,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif !default;\n$fontSize:1rem !default;\n$fontWeight:normal !default;\n$textColor:$emphasis-high !default;\n$textSecondaryColor:$emphasis-medium !default;\n$borderRadius:4px !default;\n$transitionDuration:.2s !default;\n$formElementTransition:background-color $transitionDuration, border-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1) !default;\n$actionIconTransition:background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;\n$listItemTransition:none !default;\n$primeIconFontSize:1rem !default;\n$divider:1px solid rgba(0,0,0,.12) !default;\n$inlineSpacing:.5rem !default;\n$disabledOpacity:.38 !default;\n$maskBg:rgba(0, 0, 0, 0.32) !default;\n$loadingIconFontSize:2rem !default;\n$errorColor:#B00020 !default;\n\n//selected state\n$highlightBg:rgba($primaryColor, .12) !default;\n$highlightTextColor:$primaryColor !default;\n\n//scale\n$scaleSM:0.875 !default;\n$scaleLG:1.25 !default;\n\n//focus\n$focusOutlineColor:transparent !default;\n$focusOutline:0 none !default;\n$focusOutlineOffset:0 !default;\n$focusShadow:none !default;\n\n//action icons\n$actionIconWidth:2.5rem !default;\n$actionIconHeight:2.5rem !default;\n$actionIconBg:transparent !default;\n$actionIconBorder:0 none !default;\n$actionIconColor:$textSecondaryColor !default;\n$actionIconHoverBg:rgba(0,0,0,.04) !default;\n$actionIconHoverBorderColor:transparent !default;\n$actionIconHoverColor:$textSecondaryColor !default;\n$actionIconBorderRadius:50% !default;\n\n//input field (e.g. inputtext, spinner, inputmask)\n$inputPadding:1rem 1rem !default;\n$inputTextFontSize:1rem !default;\n$inputBg:#ffffff !default;\n$inputTextColor:$emphasis-high !default;\n$inputIconColor:$emphasis-medium !default;\n$inputBorder:1px solid $emphasis-low !default;\n$inputHoverBorderColor:$emphasis-high !default;\n$inputFocusBorderColor:$primaryColor !default;\n$inputErrorBorderColor:$errorColor !default;\n$inputPlaceholderTextColor:$emphasis-medium !default;\n$inputFilledBg:#f5f5f5 !default;\n$inputFilledHoverBg:#ececec !default;\n$inputFilledFocusBg:#dcdcdc !default;\n\n//input groups\n$inputGroupBg:$inputBg !default;\n$inputGroupTextColor:$emphasis-medium !default;\n$inputGroupAddOnMinWidth:2.357rem !default;\n\n//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)\n$inputListBg:#ffffff !default;\n$inputListTextColor:$textColor !default;\n$inputListBorder:$inputBorder !default;\n$inputListPadding:0 !default;\n$inputListItemPadding:1rem 1rem !default;\n$inputListItemBg:transparent !default;\n$inputListItemTextColor:$textColor !default;\n$inputListItemHoverBg:rgba(0,0,0,.04) !default;\n$inputListItemTextHoverColor:$textColor !default;\n$inputListItemBorder:0 none !default;\n$inputListItemBorderRadius:0 !default;\n$inputListItemMargin:0 !default;\n$inputListItemFocusShadow:none !default;\n$inputListHeaderPadding:1rem !default;\n$inputListHeaderMargin:0 !default;\n$inputListHeaderBg:#ffffff !default;\n$inputListHeaderTextColor:$textColor !default;\n$inputListHeaderBorder:1px solid rgba(0,0,0,.12) !default;\n\n//inputs with overlays (e.g. autocomplete, dropdown, multiselect)\n$inputOverlayBg:$inputListBg !default;\n$inputOverlayHeaderBg:$inputListHeaderBg !default;\n$inputOverlayBorder:0 none !default;\n$inputOverlayShadow:0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12) !default;\n\n//password\n$passwordMeterBg:rgba($primaryColor, .32) !default;\n$passwordWeakBg:#D32F2F !default;\n$passwordMediumBg:#FBC02D !default;\n$passwordStrongBg:#689F38 !default;\n\n//button\n$buttonPadding:0.714rem 1rem !default;\n$buttonIconOnlyWidth:3rem !default;\n$buttonIconOnlyPadding:0.714rem !default;\n$buttonBg:$primaryColor !default;\n$buttonTextColor:$primaryTextColor !default;\n$buttonBorder:0 none !default;\n$buttonHoverBg:rgba($primaryColor, .92) !default;\n$buttonTextHoverColor:$primaryTextColor !default;\n$buttonHoverBorderColor:transparent !default;\n$buttonActiveBg:rgba($primaryColor, .68) !default;\n$buttonTextActiveColor:$primaryTextColor !default;\n$buttonActiveBorderColor:transparent !default;\n$raisedButtonShadow:0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12) !default;\n$roundedButtonBorderRadius:2rem !default;\n\n$textButtonHoverBgOpacity:.04 !default;\n$textButtonActiveBgOpacity:.16 !default;\n$outlinedButtonBorder:1px solid !default;\n$plainButtonTextColor:$textSecondaryColor !default;\n$plainButtonHoverBgColor:rgba(0,0,0,.04) !default;\n$plainButtonActiveBgColor:rgba(0,0,0,.16) !default;\n\n$secondaryButtonBg:$accentColor !default;\n$secondaryButtonTextColor:$accentTextColor !default;\n$secondaryButtonBorder:0 none !default;\n$secondaryButtonHoverBg:rgba($accentColor, .92) !default;\n$secondaryButtonTextHoverColor:$accentTextColor !default;\n$secondaryButtonHoverBorderColor:transparent !default;\n$secondaryButtonActiveBg:rgba($accentColor, .68) !default;\n$secondaryButtonTextActiveColor:$accentTextColor !default;\n$secondaryButtonActiveBorderColor:transparent !default;\n$secondaryButtonFocusShadow:none !default;\n\n$infoButtonBg:#2196F3 !default;\n$infoButtonTextColor:#ffffff !default;\n$infoButtonBorder:0 none !default;\n$infoButtonHoverBg:rgba(#2196F3, .92) !default;\n$infoButtonTextHoverColor:#ffffff !default;\n$infoButtonHoverBorderColor:transparent !default;\n$infoButtonActiveBg:rgba(#2196F3, .68) !default;\n$infoButtonTextActiveColor:#ffffff !default;\n$infoButtonActiveBorderColor:transparent !default;\n$infoButtonFocusShadow:none !default;\n\n$successButtonBg:#689F38 !default;\n$successButtonTextColor:#ffffff !default;\n$successButtonBorder:0 none !default;\n$successButtonHoverBg:rgba(#689F38, .92) !default;\n$successButtonTextHoverColor:#ffffff !default;\n$successButtonHoverBorderColor:transparent !default;\n$successButtonActiveBg:rgba(#689F38, .68) !default;\n$successButtonTextActiveColor:#ffffff !default;\n$successButtonActiveBorderColor:transparent !default;\n$successButtonFocusShadow:none !default;\n\n$warningButtonBg:#FBC02D !default;\n$warningButtonTextColor:#212529 !default;\n$warningButtonBorder:0 none !default;\n$warningButtonHoverBg:rgba(#FBC02D, .92) !default;\n$warningButtonTextHoverColor:#212529 !default;\n$warningButtonHoverBorderColor:transparent !default;\n$warningButtonActiveBg:rgba(#FBC02D, .68) !default;\n$warningButtonTextActiveColor:#212529 !default;\n$warningButtonActiveBorderColor:transparent !default;\n$warningButtonFocusShadow:none !default;\n\n$helpButtonBg:#9C27B0 !default;\n$helpButtonTextColor:#ffffff !default;\n$helpButtonBorder:0 none !default;\n$helpButtonHoverBg:rgba(#9C27B0, .92) !default;\n$helpButtonTextHoverColor:#ffffff !default;\n$helpButtonHoverBorderColor:transparent !default;\n$helpButtonActiveBg:rgba(#9C27B0, .68) !default;\n$helpButtonTextActiveColor:#ffffff !default;\n$helpButtonActiveBorderColor:transparent !default;\n$helpButtonFocusShadow:none !default;\n\n$dangerButtonBg:#D32F2F !default;\n$dangerButtonTextColor:#ffffff !default;\n$dangerButtonBorder:0 none !default;\n$dangerButtonHoverBg:rgba(#D32F2F, .92) !default;\n$dangerButtonTextHoverColor:#ffffff !default;\n$dangerButtonHoverBorderColor:transparent !default;\n$dangerButtonActiveBg:rgba(#D32F2F, .68) !default;\n$dangerButtonTextActiveColor:#ffffff !default;\n$dangerButtonActiveBorderColor:transparent !default;\n$dangerButtonFocusShadow:none !default;\n\n$linkButtonColor:$primaryColor !default;\n$linkButtonHoverColor:$primaryColor !default;\n$linkButtonTextHoverDecoration:underline !default;\n$linkButtonFocusShadow:none !default;\n\n//checkbox\n$checkboxWidth:18px !default;\n$checkboxHeight:18px !default;\n$checkboxBorder:2px solid #757575 !default;\n$checkboxIconFontSize:14px !default;\n$checkboxActiveBorderColor:$primaryColor !default;\n$checkboxActiveBg:$primaryColor !default;\n$checkboxIconActiveColor:$primaryTextColor !default;\n$checkboxActiveHoverBg:$primaryColor !default;\n$checkboxIconActiveHoverColor:$primaryTextColor !default;\n$checkboxActiveHoverBorderColor:$primaryColor !default;\n\n//radiobutton\n$radiobuttonWidth:20px !default;\n$radiobuttonHeight:20px !default;\n$radiobuttonBorder:2px solid #757575 !default;\n$radiobuttonIconSize:10px !default;\n$radiobuttonActiveBorderColor:$primaryColor !default;\n$radiobuttonActiveBg:$primaryTextColor !default;\n$radiobuttonIconActiveColor:$primaryColor !default;\n$radiobuttonActiveHoverBg:$primaryTextColor !default;\n$radiobuttonIconActiveHoverColor:$primaryColor !default;\n$radiobuttonActiveHoverBorderColor:$primaryColor !default;\n\n//colorpicker\n$colorPickerPreviewWidth:2rem !default;\n$colorPickerPreviewHeight:2rem !default;\n$colorPickerBg:#323232 !default;\n$colorPickerBorderColor:#191919 !default;\n$colorPickerHandleColor:#ffffff !default;\n\n//togglebutton\n$toggleButtonBg:#ffffff !default;\n$toggleButtonBorder:1px solid rgba(0,0,0,.12) !default;\n$toggleButtonTextColor:$textColor !default;\n$toggleButtonIconColor:$textSecondaryColor !default;\n$toggleButtonHoverBg:#f6f6f6 !default;\n$toggleButtonHoverBorderColor:rgba(0,0,0,.12) !default;\n$toggleButtonTextHoverColor:$textColor !default;\n$toggleButtonIconHoverColor:$textSecondaryColor !default;\n$toggleButtonActiveBg:#e0e0e1 !default;\n$toggleButtonActiveBorderColor:#e0e0e1 !default;\n$toggleButtonTextActiveColor:$textColor !default;\n$toggleButtonIconActiveColor:$textSecondaryColor !default;\n$toggleButtonActiveHoverBg:#d9d8d9 !default;\n$toggleButtonActiveHoverBorderColor:#d9d8d9 !default;\n$toggleButtonTextActiveHoverColor:$textColor !default;\n$toggleButtonIconActiveHoverColor:$textSecondaryColor !default;\n\n//inplace\n$inplacePadding:$inputPadding !default;\n$inplaceHoverBg:rgba(0,0,0,.04) !default;\n$inplaceTextHoverColor:$textColor !default;\n\n//rating\n$ratingIconFontSize:1.143rem !default;\n$ratingCancelIconColor:#B00020 !default;\n$ratingCancelIconHoverColor:#B00020 !default;\n$ratingStarIconOffColor:$primaryColor !default;\n$ratingStarIconOnColor:$primaryColor !default;\n$ratingStarIconHoverColor:$primaryColor !default;\n\n//slider\n$sliderBg:#c1c1c1 !default;\n$sliderBorder:0 none !default;\n$sliderHorizontalHeight:2px !default;\n$sliderVerticalWidth:2px !default;\n$sliderHandleWidth:20px !default;\n$sliderHandleHeight:20px !default;\n$sliderHandleBg:$primaryColor !default;\n$sliderHandleBorder:0 none !default;\n$sliderHandleBorderRadius:50% !default;\n$sliderHandleHoverBorderColor:0 none !default;\n$sliderHandleHoverBg:$primaryColor !default;\n$sliderRangeBg:$primaryColor !default;\n\n//calendar\n$calendarTableMargin:.5rem 0 !default;\n$calendarPadding:.5rem !default;\n$calendarBg:#ffffff !default;\n$calendarInlineBg:$calendarBg !default;\n$calendarTextColor:$textColor !default;\n$calendarBorder:$inputListBorder !default;\n$calendarOverlayBorder:$inputOverlayBorder !default;\n\n$calendarHeaderPadding:.5rem !default;\n$calendarHeaderBg:#ffffff !default;\n$calendarInlineHeaderBg:$calendarBg !default;\n$calendarHeaderBorder:$divider !default;\n$calendarHeaderTextColor:$textColor !default;\n$calendarHeaderFontWeight:500 !default;\n$calendarHeaderCellPadding:.5rem !default;\n\n$calendarCellDatePadding:.5rem !default;\n$calendarCellDateWidth:2.5rem !default;\n$calendarCellDateHeight:2.5rem !default;\n$calendarCellDateBorderRadius:50% !default;\n$calendarCellDateBorder:1px solid transparent !default;\n$calendarCellDateHoverBg:rgba(0,0,0,.04) !default;\n$calendarCellDateTodayBg:#ffffff !default;\n$calendarCellDateTodayBorderColor: rgba(0,0,0,12) !default;\n$calendarCellDateTodayTextColor:$textColor !default;\n\n$calendarButtonBarPadding:1rem 0 !default;\n$calendarTimePickerPadding:.5rem !default;\n$calendarTimePickerElementPadding:0 .5rem !default;\n$calendarTimePickerTimeFontSize:1.25rem !default;\n\n$calendarBreakpoint:769px !default;\n$calendarCellDatePaddingSM:0 !default;\n\n//input switch\n$inputSwitchWidth:2.75rem !default;\n$inputSwitchHeight:1rem !default;\n$inputSwitchBorderRadius:.5rem !default;\n$inputSwitchHandleWidth:1.50rem !default;\n$inputSwitchHandleHeight:1.50rem !default;\n$inputSwitchHandleBorderRadius:50% !default;\n$inputSwitchSliderPadding:-1px !default;\n$inputSwitchSliderOffBg:rgba(0,0,0,.38) !default;\n$inputSwitchHandleOffBg:#ffffff !default;\n$inputSwitchSliderOffHoverBg:rgba(0,0,0,.38) !default;\n$inputSwitchSliderOnBg:rgba($primaryColor, .5) !default;\n$inputSwitchSliderOnHoverBg:rgba($primaryColor, .5) !default;\n$inputSwitchHandleOnBg:$primaryColor !default;\n\n//panel\n$panelHeaderBorderColor: #e0e0e0 !default;\n$panelHeaderBorder:1px solid #e0e0e0 !default;\n$panelHeaderBg:#ffffff !default;\n$panelHeaderTextColor:$textColor !default;\n$panelHeaderFontWeight:500 !default;\n$panelHeaderPadding:1rem !default;\n$panelToggleableHeaderPadding:.5rem 1rem !default;\n\n$panelHeaderHoverBg:rgba(0,0,0,.04) !default;\n$panelHeaderHoverBorderColor:#e0e0e0 !default;\n$panelHeaderTextHoverColor:$textColor !default;\n\n$panelContentBorderColor: #e0e0e0 !default;\n$panelContentBorder:1px solid #e0e0e0 !default;\n$panelContentBg:#ffffff !default;\n$panelContentTextColor:$textColor !default;\n$panelContentPadding:1rem !default;\n\n$panelFooterBorder:1px solid #e0e0e0 !default;\n$panelFooterBg:#ffffff !default;\n$panelFooterTextColor:$textColor !default;\n$panelFooterPadding:1rem 1rem !default;\n\n//accordion\n$accordionSpacing:0 !default;\n$accordionHeaderBorder:0 none !default;\n$accordionHeaderBg:#ffffff !default;\n$accordionHeaderTextColor:$textColor !default;\n$accordionHeaderFontWeight:400 !default;\n$accordionHeaderPadding:1.5rem !default;\n\n$accordionHeaderHoverBg:#f6f6f6 !default;\n$accordionHeaderHoverBorderColor:transparent !default;\n$accordionHeaderTextHoverColor:$textColor !default;\n\n$accordionHeaderActiveBg:#ffffff !default;\n$accordionHeaderActiveBorderColor:transparent !default;\n$accordionHeaderTextActiveColor:$textColor !default;\n\n$accordionHeaderActiveHoverBg:#ffffff !default;\n$accordionHeaderActiveHoverBorderColor:transparent !default;\n$accordionHeaderTextActiveHoverColor:$textColor !default;\n\n$accordionContentBorder:0 none !default;\n$accordionContentBg:#ffffff !default;\n$accordionContentTextColor:$textColor !default;\n$accordionContentPadding:1rem 1.5rem !default;\n\n//tabview\n$tabviewNavBorder:solid rgba(0,0,0,.12) !default;\n$tabviewNavBorderWidth:0 0 1px 0 !default;\n$tabviewNavBg:#ffffff !default;\n\n$tabviewHeaderSpacing:0 !default;\n$tabviewHeaderBorder:solid rgba(0,0,0,.12) !default;\n$tabviewHeaderBorderWidth:0 0 1px 0 !default;\n$tabviewHeaderBorderColor:transparent transparent rgba(0,0,0,.12) transparent !default;\n$tabviewHeaderBg:#ffffff !default;\n$tabviewHeaderTextColor:$textSecondaryColor !default;\n$tabviewHeaderFontWeight:500 !default;\n$tabviewHeaderPadding:1rem 1.5rem !default;\n$tabviewHeaderMargin:0 0 -1px 0 !default;\n\n$tabviewHeaderHoverBg:rgba($primaryColor,.04) !default;\n$tabviewHeaderHoverBorderColor:rgba(0,0,0,.12) !default;\n$tabviewHeaderTextHoverColor:$textSecondaryColor !default;\n\n$tabviewHeaderActiveBg:#ffffff !default;\n$tabviewHeaderActiveBorderColor:rgba(0,0,0,.12) !default;\n$tabviewHeaderTextActiveColor:$primaryColor !default;\n\n$tabviewContentBorder:0 none !default;\n$tabviewContentBg:#ffffff !default;\n$tabviewContentTextColor:$textColor !default;\n$tabviewContentPadding:$panelContentPadding !default;\n\n//upload\n$fileUploadProgressBarHeight:4px !default;\n$fileUploadContentPadding:2rem 1rem !default;\n\n//scrollpanel\n$scrollPanelTrackBorder:0 none !default;\n$scrollPanelTrackBg:rgba(0,0,0,.12) !default;\n\n//card\n$cardBodyPadding:1rem !default;\n$cardTitleFontSize:1.5rem !default;\n$cardTitleFontWeight:700 !default;\n$cardSubTitleFontWeight:400 !default;\n$cardSubTitleColor:$textSecondaryColor !default;\n$cardContentPadding:1rem 0 !default;\n$cardFooterPadding:1rem 0 0 0 !default;\n$cardShadow:0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12) !default;\n\n//editor\n$editorToolbarBg:$panelHeaderBg !default;\n$editorToolbarBorder:$panelHeaderBorder !default;\n$editorToolbarPadding:$panelHeaderPadding !default;\n$editorToolbarIconColor:$textSecondaryColor !default;\n$editorToolbarIconHoverColor:$textColor !default;\n$editorIconActiveColor:$primaryColor !default;\n$editorContentBorder:$panelContentBorder !default;\n$editorContentBg:$panelContentBg !default;\n\n//paginator\n$paginatorBg:#ffffff !default;\n$paginatorTextColor:$textColor !default;\n$paginatorBorder:solid #e4e4e4 !default;\n$paginatorBorderWidth:0 !default;\n$paginatorPadding:.5rem 1rem !default;\n$paginatorElementWidth:$buttonIconOnlyWidth !default;\n$paginatorElementHeight:$buttonIconOnlyWidth !default;\n$paginatorElementBg:transparent !default;\n$paginatorElementBorder:0 none !default;\n$paginatorElementIconColor:$textSecondaryColor !default;\n$paginatorElementHoverBg:rgba(0,0,0,.04) !default;\n$paginatorElementHoverBorderColor:transparent !default;\n$paginatorElementIconHoverColor:$textSecondaryColor !default;\n$paginatorElementBorderRadius:50% !default;\n$paginatorElementMargin:.143rem !default;\n$paginatorElementPadding:0 !default;\n\n//table\n$tableHeaderBorder:1px solid #e4e4e4 !default;\n$tableHeaderBorderWidth:0 0 1px 0 !default;\n$tableHeaderBg:#ffffff !default;\n$tableHeaderTextColor:$textColor !default;\n$tableHeaderFontWeight:500 !default;\n$tableHeaderPadding:1rem 1rem !default;\n\n$tableHeaderCellPadding:1rem 1rem !default;\n$tableHeaderCellBg:#ffffff !default;\n$tableHeaderCellTextColor:$textColor !default;\n$tableHeaderCellFontWeight:500 !default;\n$tableHeaderCellBorder:1px solid #e4e4e4 !default;\n$tableHeaderCellBorderWidth:0 0 1px 0 !default;\n$tableHeaderCellHoverBg:rgba(0,0,0,.04) !default;\n$tableHeaderCellTextHoverColor:$textColor !default;\n$tableHeaderCellIconColor:$textSecondaryColor !default;\n$tableHeaderCellIconHoverColor:$textSecondaryColor !default;\n$tableHeaderCellHighlightBg:#ffffff !default;\n$tableHeaderCellHighlightTextColor:$textColor !default;\n$tableHeaderCellHighlightHoverBg:rgba(0,0,0,.04) !default;\n$tableHeaderCellHighlightTextHoverColor:$textColor !default;\n$tableSortableColumnBadgeSize:1.143rem !default;\n\n$tableBodyRowBg:#ffffff !default;\n$tableBodyRowTextColor:$textColor !default;\n$tableBodyRowEvenBg:rgba(0,0,0,.02) !default;\n$tableBodyRowHoverBg:rgba(0,0,0,.04) !default;\n$tableBodyRowTextHoverColor:$textColor !default;\n$tableBodyCellBorder:1px solid #e4e4e4 !default;\n$tableBodyCellBorderWidth:0 0 1px 0 !default;\n$tableBodyCellPadding:1rem 1rem !default;\n\n$tableFooterCellPadding:1rem 1rem !default;\n$tableFooterCellBg:#ffffff !default;\n$tableFooterCellTextColor:$textColor !default;\n$tableFooterCellFontWeight:500 !default;\n$tableFooterCellBorder:1px solid #e4e4e4 !default;\n$tableFooterCellBorderWidth:0 0 1px 0 !default;\n$tableResizerHelperBg:$primaryColor !default;\n\n$tableFooterBorder:1px solid #e4e4e4 !default;\n$tableFooterBorderWidth:0 0 1px 0 !default;\n$tableFooterBg:#ffffff !default;\n$tableFooterTextColor:$textColor !default;\n$tableFooterFontWeight:500 !default;\n$tableFooterPadding:1rem 1rem !default;\n\n$tableCellContentAlignment:left !default;\n$tableTopPaginatorBorderWidth:0 0 1px 0 !default;\n$tableBottomPaginatorBorderWidth:0 0 1px 0 !default;\n\n$tableScaleSM:0.5 !default;\n$tableScaleLG:1.25 !default;\n\n//dataview\n$dataViewContentPadding:1rem 0 !default;\n$dataViewContentBorder:0 none !default;\n$dataViewListItemBorder:solid rgba(0,0,0,.12) !default;\n$dataViewListItemBorderWidth:0 0 1px 0 !default;\n\n//schedule\n$fullCalendarEventBg:$highlightBg !default;\n$fullCalendarEventBorderColor:$highlightBg !default;\n$fullCalendarEventBorder:1px solid $highlightBg !default;\n$fullCalendarEventTextColor:$highlightTextColor !default;\n\n//tree\n$treeNodePadding:.25rem !default;\n$treeNodeContentPadding:.5rem !default;\n$treeNodeChildrenPadding:0 0 0 1rem !default;\n$treeNodeIconColor:$textSecondaryColor !default;\n\n//timeline\n$timelineVerticalEventContentPadding:0 1rem !default;\n$timelineHorizontalEventContentPadding:1rem 0 !default;\n$timelineEventMarkerWidth:1rem !default;\n$timelineEventMarkerHeight:1rem !default;\n$timelineEventMarkerBorderRadius:50% !default;\n$timelineEventMarkerBorder:0 none !default;\n$timelineEventMarkerBackground:#bdbdbd !default;\n$timelineEventConnectorSize:2px !default;\n$timelineEventColor:#bdbdbd !default;\n\n//org chart\n$organizationChartConnectorColor:rgba(0,0,0,.12) !default;\n\n//message\n$messageMargin:1rem 0 !default;\n$messagePadding: 1.25rem 1.5rem !default;\n$messageBorderWidth:0 0 0 0 !default;\n$messageIconFontSize:1.5rem !default;\n$messageTextFontSize:1rem !default;\n$messageTextFontWeight:500 !default;\n\n//inline message\n$inlineMessagePadding:$inputPadding !default;\n$inlineMessageMargin:0 !default;\n$inlineMessageIconFontSize:1rem !default;\n$inlineMessageTextFontSize:1rem !default;\n$inlineMessageBorderWidth:1px !default;\n\n//toast\n$toastIconFontSize:2rem !default;\n$toastMessageTextMargin:0 0 0 1rem !default;\n$toastMargin:0 0 1rem 0 !default;\n$toastPadding:1.5rem !default;\n$toastBorderWidth:0 0 0 0 !default;\n$toastShadow:0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12) !default;\n$toastOpacity:.9 !default;\n$toastTitleFontWeight:700 !default;\n$toastDetailMargin:$inlineSpacing 0 0 0 !default;\n\n//severities\n$infoMessageBg:#B3E5FC !default;\n$infoMessageBorder:solid transparent !default;\n$infoMessageTextColor:#01579B !default;\n$infoMessageIconColor:#01579B !default;\n$successMessageBg:#C8E6C9 !default;\n$successMessageBorder:solid transparent !default;\n$successMessageTextColor:#1B5E20 !default;\n$successMessageIconColor:#1B5E20 !default;\n$warningMessageBg:#FFECB3 !default;\n$warningMessageBorder:solid transparent !default;\n$warningMessageTextColor:#7f6003 !default;\n$warningMessageIconColor:#7f6003 !default;\n$errorMessageBg:#FFCDD2 !default;\n$errorMessageBorder:solid transparent !default;\n$errorMessageTextColor:#B71C1C !default;\n$errorMessageIconColor:#B71C1C !default;\n\n//overlays\n$overlayContentBorder:0 none !default;\n$overlayContentBg:$panelContentBg !default;\n$overlayContainerShadow:0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12) !default;\n\n//dialog\n$dialogHeaderBg:#ffffff !default;\n$dialogHeaderBorder:0 none !default;\n$dialogHeaderTextColor:$textColor !default;\n$dialogHeaderFontWeight:500 !default;\n$dialogHeaderFontSize:1.25rem !default;\n$dialogHeaderPadding:1.5rem !default;\n$dialogContentPadding:0 1.5rem 1.5rem 1.5rem !default;\n$dialogFooterBorder:0 none !default;\n$dialogFooterPadding:1rem 1.5rem !default;\n\n//confirmpopup\n$confirmPopupContentPadding:1.5rem !default;\n$confirmPopupFooterPadding:0 1.5rem 1rem 1.5rem !default;\n\n//tooltip\n$tooltipBg:rgba(97,97,97,.9) !default;\n$tooltipTextColor:#ffffff !default;\n$tooltipPadding:.5rem !default;\n\n//steps\n$stepsItemBg:transparent !default;\n$stepsItemBorder:1px solid transparent !default;\n$stepsItemTextColor:$textColor !default;\n$stepsItemNumberWidth:2rem !default;\n$stepsItemNumberHeight:2rem !default;\n$stepsItemNumberFontSize:1.143rem !default;\n$stepsItemNumberColor:$textColor !default;\n$stepsItemNumberBorderRadius:50% !default;\n$stepsItemActiveFontWeight:500 !default;\n\n//progressbar\n$progressBarHeight:4px !default;\n$progressBarBorder:0 none !default;\n$progressBarBg:rgba($primaryColor, .32) !default;\n$progressBarValueBg:$primaryColor !default;\n\n//menu (e.g. menu, menubar, tieredmenu)\n$menuWidth:12.5rem !default;\n$menuBg:#ffffff !default;\n$menuBorder:1px solid #e5e5e5 !default;\n$menuTextColor:$textColor !default;\n$menuitemPadding:1rem 1rem !default;\n$menuitemBorderRadius:0 !default;\n$menuitemTextColor:$textColor !default;\n$menuitemIconColor:$textSecondaryColor !default;\n$menuitemTextHoverColor:$textColor !default;\n$menuitemIconHoverColor:$textSecondaryColor !default;\n$menuitemHoverBg:rgba(0,0,0,.04) !default;\n$menuitemTextActiveColor:$textColor !default;\n$menuitemIconActiveColor:$textSecondaryColor !default;\n$menuitemActiveBg:rgba(0,0,0,.04) !default;\n$menuitemSubmenuIconFontSize:.875rem !default;\n$submenuHeaderMargin:0 !default;\n$submenuHeaderPadding:1rem !default;\n$submenuHeaderBg:#ffffff !default;\n$submenuHeaderTextColor:$textSecondaryColor !default;\n$submenuHeaderBorderRadius:0 !default;\n$submenuHeaderFontWeight:400 !default;\n$overlayMenuBg:$menuBg !default;\n$overlayMenuBorder:0 none !default;\n$overlayMenuShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;\n$verticalMenuitemMargin:0 !default;\n$verticalMenuPadding:.5rem 0 !default;\n$menuSeparatorMargin:.5rem 0 !default;\n\n$breadcrumbPadding:1rem !default;\n$breadcrumbBg:#ffffff !default;\n$breadcrumbBorder:1px solid #e5e5e5 !default;\n$breadcrumbItemTextColor:$textColor !default;\n$breadcrumbItemIconColor:$textSecondaryColor !default;\n$breadcrumbLastItemTextColor:$textColor !default;\n$breadcrumbLastItemIconColor:$textSecondaryColor !default;\n$breadcrumbSeparatorColor:$textSecondaryColor !default;\n\n$horizontalMenuPadding:1rem !default;\n$horizontalMenuBg:transparent !default;\n$horizontalMenuBorder:1px solid #e5e5e5 !default;\n$horizontalMenuTextColor:$textColor !default;\n$horizontalMenuRootMenuitemPadding:1rem !default;\n$horizontalMenuRootMenuitemBorderRadius:$borderRadius !default;\n$horizontalMenuRootMenuitemTextColor:$textColor !default;\n$horizontalMenuRootMenuitemIconColor:$textSecondaryColor !default;\n$horizontalMenuRootMenuitemTextHoverColor:$textColor !default;\n$horizontalMenuRootMenuitemIconHoverColor:$textSecondaryColor !default;\n$horizontalMenuRootMenuitemHoverBg:rgba(0,0,0,.04) !default;\n$horizontalMenuRootMenuitemTextActiveColor:$textColor !default;\n$horizontalMenuRootMenuitemIconActiveColor:$textSecondaryColor !default;\n$horizontalMenuRootMenuitemActiveBg:rgba(0,0,0,.04) !default;\n\n//badge and tag\n$badgeBg:$primaryColor !default;\n$badgeTextColor:$primaryTextColor !default;\n$badgeMinWidth:1.5rem !default;\n$badgeHeight:1.5rem !default;\n$badgeFontWeight:700 !default;\n$badgeFontSize:.75rem !default;\n\n$tagPadding:.25rem .4rem !default;\n\n//carousel\n$carouselIndicatorsPadding:1rem !default;\n$carouselIndicatorBg:#dcdcdc !default;\n$carouselIndicatorHoverBg:#ececec !default;\n$carouselIndicatorBorderRadius:0 !default;\n$carouselIndicatorWidth:2rem !default;\n$carouselIndicatorHeight:.5rem !default;\n\n//galleria\n$galleriaMaskBg:rgba(0,0,0,0.9) !default;\n$galleriaCloseIconMargin:.5rem !default;\n$galleriaCloseIconFontSize:2rem !default;\n$galleriaCloseIconBg:transparent !default;\n$galleriaCloseIconColor:rgba(255,255,255,.87) !default;\n$galleriaCloseIconHoverBg:rgba(255,255,255,0.1) !default;\n$galleriaCloseIconHoverColor:rgba(255,255,255,.87) !default;\n$galleriaCloseIconWidth:4rem !default;\n$galleriaCloseIconHeight:4rem !default;\n$galleriaCloseIconBorderRadius:50% !default;\n\n$galleriaItemNavigatorBg:transparent !default;\n$galleriaItemNavigatorColor:#f6f6f6 !default;\n$galleriaItemNavigatorMargin:0 .5rem !default;\n$galleriaItemNavigatorFontSize:2rem !default;\n$galleriaItemNavigatorHoverBg:rgba(255,255,255,0.1) !default;\n$galleriaItemNavigatorHoverColor:rgba(255,255,255,.87) !default;\n$galleriaItemNavigatorWidth:4rem !default;\n$galleriaItemNavigatorHeight:4rem !default;\n$galleriaItemNavigatorBorderRadius:50% !default;\n\n$galleriaCaptionBg:rgba(0,0,0,.5) !default;\n$galleriaCaptionTextColor:rgba(255,255,255,.87) !default;\n$galleriaCaptionPadding:1rem !default;\n\n$galleriaIndicatorsPadding:1rem !default;\n$galleriaIndicatorBg:#dcdcdc !default;\n$galleriaIndicatorHoverBg:#ececec !default;\n$galleriaIndicatorBorderRadius:50% !default;\n$galleriaIndicatorWidth:1.25rem !default;\n$galleriaIndicatorHeight:1.25rem !default;\n$galleriaIndicatorsBgOnItem:rgba(0,0,0,.5) !default;\n$galleriaIndicatorBgOnItem:rgba(255,255,255,.4) !default;\n$galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6) !default;\n\n$galleriaThumbnailContainerBg:rgba(0,0,0,.9) !default;\n$galleriaThumbnailContainerPadding:1rem .25rem !default;\n$galleriaThumbnailNavigatorBg:transparent !default;\n$galleriaThumbnailNavigatorColor:rgba(255,255,255,.87) !default;\n$galleriaThumbnailNavigatorHoverBg:rgba(255,255,255,0.1) !default;\n$galleriaThumbnailNavigatorHoverColor:rgba(255,255,255,.87) !default;\n$galleriaThumbnailNavigatorBorderRadius:50% !default;\n$galleriaThumbnailNavigatorWidth:2rem !default;\n$galleriaThumbnailNavigatorHeight:2rem !default;\n\n//divider\n$dividerHorizontalMargin:1.25rem 0 !default;\n$dividerHorizontalPadding:0 1.25rem !default;\n$dividerVerticalMargin:0 1.25rem !default;\n$dividerVerticalPadding:1.25rem 0 !default;\n$dividerSize:1px !default;\n$dividerColor:rgba(0,0,0,.12) !default;\n\n//avatar\n$avatarBg:rgba(0,0,0,.12) !default;\n$avatarTextColor:$textColor !default;\n\n//chip\n$chipBg:rgba(0,0,0,.12) !default;\n$chipTextColor:$textColor !default;\n$chipBorderRadius: 16px !default;\n\n//scrollTop\n$scrollTopBg:$accentColor !default;\n$scrollTopHoverBg:rgba($accentColor, .92) !default;\n$scrollTopWidth:3rem !default;\n$scrollTopHeight:3rem !default;\n$scrollTopBorderRadius:50% !default;\n$scrollTopFontSize:1.5rem !default;\n$scrollTopTextColor:$accentTextColor !default;\n\n//skeleton\n$skeletonBg:rgba(0,0,0,.08) !default;\n$skeletonAnimationBg:rgba(255,255,255,0.4) !default;\n\n//splitter\n$splitterGutterBg:rgba(0,0,0,.04) !default;\n$splitterGutterHandleBg:rgba(0,0,0,.12) !default;\n\n//speeddial\n$speedDialButtonWidth: 4rem !default;\n$speedDialButtonHeight: 4rem !default;\n$speedDialButtonIconFontSize: 2rem !default;\n$speedDialActionWidth: 3rem !default;\n$speedDialActionHeight: 3rem !default;\n$speedDialActionBg: $accentColor !default;\n$speedDialActionHoverBg: rgba($accentColor, .92) !default;\n$speedDialActionTextColor: #fff !default;\n$speedDialActionTextHoverColor: #fff !default;\n\n//dock\n$dockActionWidth: 4rem !default;\n$dockActionHeight: 4rem !default;\n$dockItemPadding: .5rem !default;\n$dockCurrentItemMargin: 1.5rem !default;\n$dockFirstItemsMargin: 1.3rem !default;\n$dockSecondItemsMargin: 0.9rem !default;\n$dockBg: rgba(255,255,255,.1) !default;\n$dockBorder: 1px solid rgba(255,255,255,0.2) !default;\n$dockPadding: .5rem .5rem !default;\n$dockBorderRadius: .5rem !default;\n\n//image\n$imageMaskBg:rgba(0,0,0,0.9) !default;\n$imagePreviewToolbarPadding:1rem !default;\n$imagePreviewIndicatorColor:#f8f9fa !default;\n$imagePreviewIndicatorBg:rgba(0,0,0,0.5) !default;\n$imagePreviewActionIconBg:transparent !default;\n$imagePreviewActionIconColor:#f8f9fa !default;\n$imagePreviewActionIconHoverBg:rgba(255,255,255,0.1) !default;\n$imagePreviewActionIconHoverColor:#f8f9fa !default;\n$imagePreviewActionIconWidth:3rem !default;\n$imagePreviewActionIconHeight:3rem !default;\n$imagePreviewActionIconFontSize:1.5rem !default;\n$imagePreviewActionIconBorderRadius:50% !default;\n\n:root {\n    --surface-a:#ffffff;\n    --surface-b:#fafafa;\n    --surface-c:rgba(0,0,0,.04);\n    --surface-d:rgba(0,0,0,.12);\n    --surface-e:#ffffff;\n    --surface-f:#ffffff;\n    --text-color:#{$textColor};\n    --text-color-secondary:#{$textSecondaryColor};\n    --primary-color:#{$primaryColor};\n    --primary-menu-text-color:#{$primaryMenuTextColor};\n    --primary-lightest-color:#{$primaryLightestColor};\n    --primary-color-text:#{$primaryTextColor};\n    --font-family:#{$fontFamily};\n    --surface-0: #ffffff;\n    --surface-50: #FAFAFA;\n    --surface-100: #F5F5F5;\n    --surface-200: #EEEEEE;\n    --surface-300: #E0E0E0;\n    --surface-400: #BDBDBD;\n    --surface-500: #9E9E9E;\n    --surface-600: #757575;\n    --surface-700: #616161;\n    --surface-800: #424242;\n    --surface-900: #212121;\n    --gray-50: #FAFAFA;\n    --gray-100: #F5F5F5;\n    --gray-200: #EEEEEE;\n    --gray-300: #E0E0E0;\n    --gray-400: #BDBDBD;\n    --gray-500: #9E9E9E;\n    --gray-600: #757575;\n    --gray-700: #616161;\n    --gray-800: #424242;\n    --gray-900: #212121;\n    --content-padding:#{$panelContentPadding};\n    --inline-spacing:#{$inlineSpacing};\n    --border-radius:#{$borderRadius};\n    --surface-ground:#fafafa;\n    --surface-section:#ffffff;\n    --surface-card:#ffffff;\n    --surface-overlay:#ffffff;\n    --surface-border:rgba(0,0,0,.12);\n    --surface-hover:rgba(0,0,0,.04);\n}\n\n</code></pre>\n</div>\n\n                <h5>Menu Modes</h5>\n                <p>Menu has 4 modes, static, overlay, slim and horizontal. Main layout container element in App.vue is used to define which mode to use by adding specific classes. List\n                    below indicates the style classes for each mode.</p>\n\n                <ul>\n                    <li>Static: \"layout-wrapper layout-menu-static\"</li>\n                    <li>Overlay: \"layout-wrapper layout-menu-overlay\"</li>\n                    <li>Slim: \"layout-wrapper layout-menu-slim\"</li>\n                    <li>Horizontal: \"layout-wrapper layout-menu-horizontal\"</li>\n                </ul>\n\n                <p>For example to create a horizontal menu, the div element should be in following form;</p>\n<pre v-code><code>\n&lt;div class=\"layout-wrapper layout-menu-horizontal\"&gt;\n\n</code></pre>\n\n                <p>It is also possible to leave the choice to the user by keeping the preference at a component and using an expression to bind it so that user can switch between modes. Sample\n                    application has an example implementation of such use case. Refer to App.vue for an example.</p>\n\n                <h5>Customizing Styles</h5>\n                <p>It is suggested to add your customizations in the following sass files under the override folder instead of adding them to the\n                    scss files under sass folder to avoid maintenance issues after an update.</p>\n\n                <ul>\n                    <li><b>_layout_variables</b>: Variables of the layout.</li>\n                    <li><b>_layout_styles</b>: Styles for the layout.</li>\n                    <li><b>_theme_variables</b>: Variables of the theme.</li>\n                    <li><b>_theme_styles</b>: Styles for the theme.</li>\n                </ul>\n\n                <h5>Migration Guide</h5>\n                <p>Every change is included in <b>CHANGELOG.md</b> file at the root folder of the distribution along with the instructions to update.</p>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\n</script>\n\n<style scoped lang=\"scss\">\n    ::v-deep(pre[class*=\"language-\"]) {\n        &:before, &:after {\n            display: none !important;\n        }\n\n        code {\n            border-left: 10px solid var(--surface-d) !important;\n            box-shadow: none !important;\n            background: var(--surface-b) !important;\n            margin: 1em 0;\n            color: var(--text-color);\n            font-size: 14px;\n\n            .token {\n                &.tag,\n                &.keyword {\n                    color: #2196F3 !important;\n                }\n\n                &.attr-name,\n                &.attr-string {\n                    color: #2196F3 !important;\n                }\n\n                &.attr-value {\n                    color: #4CAF50 !important;\n                }\n\n                &.punctuation {\n                    color: var(--text-color);\n                }\n\n                &.operator,\n                &.string {\n                    background: transparent;\n                }\n            }\n        }\n    }\n\n    .docs i {\n        font-family: monaco,Consolas,Lucida Console,monospace;\n        font-weight: 700;\n        font-style: italic;\n        font-size: 14px;\n        padding: 2px;\n    }\n\n    .docs li {\n        line-height: 1.5;\n    }\n</style>\n","import { render } from \"./Documentation.vue?vue&type=template&id=4b20a1df&scoped=true\"\nconst script = {}\n\nimport \"./Documentation.vue?vue&type=style&index=0&id=4b20a1df&scoped=true&lang=scss\"\n\nimport exportComponent from \"/var/www/html/smart/vue/node_modules/vue-loader-v16/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-4b20a1df\"]])\n\nexport default __exports__","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./Documentation.vue?vue&type=style&index=0&id=4b20a1df&scoped=true&lang=scss\""],"sourceRoot":""}