feat: organizando estilos da main

src/main/webapp/resources/demo/css/demo-light.css

@@ -1,5 +1,5 @@
 :root {
-  --content-alt-bg-color:#E8F1F8;
+  --content-alt-bg-color:#ffffff;
 }
 
 .order-badge {

src/main/webapp/resources/poseidon-layout/css/layout-light.css

@@ -1,5 +1,5 @@
 :root {
-  --content-alt-bg-color: #e8f1f8;
+  --content-alt-bg-color: #ffffff;
 }
 
 /* din-next-ultra-light - latin */
@@ -6574,7 +6574,7 @@ body {
   height: 100%;
 }
 body.main-body {
-  background: linear-gradient(99deg, #f6f9fe 0%, #e8f1f8 100%);
+  background: #ffffff;
 }
 body a {
   color: #2c84d8;

src/main/webapp/resources/sass/layout/_main.scss

@@ -4,7 +4,7 @@ html {
 }
  
 body {
-    font-family: 'Open Sans';
+    font-family: 'DIN Next';
     font-size: $fontSize;
     color: $textColor;
     -webkit-font-smoothing: antialiased;

src/main/webapp/resources/sass/layout/_typography.scss

@@ -38,7 +38,7 @@ mark {
     background: #FFF8E1;
     padding: .25rem .4rem;
     border-radius: $borderRadius;
-    font-family: 'Open Sans';
+    font-family: 'DIN Next';
 }
 
 blockquote {

src/main/webapp/resources/sass/variables/layout/_layout_common.scss

@@ -1,6 +1,6 @@
 //general
 $fontSize:14px !default;
-$fontFamily: 'Open Sans' !default;
+$fontFamily: 'DIN Next' !default;
 $mobileBreakpoint:991px !default;
 $borderRadius:5px !default;
 $animationDuration:.2s !default;

src/main/webapp/resources/sass/variables/layout/_layout_light.scss

@@ -3,7 +3,7 @@ $textColor:#515C66 !default;
 $textSecondaryColor:#657380 !default;
 
 $contentBgColor:#FDFEFF !default;
-$contentAltBgColor:#E8F1F8 !default;
+$contentAltBgColor:#ffffff !default;
 $dividerColor: #E8F1F8 !default;
 
 $menuTooltipBgColor:#1c202c !default;

src/main/webapp/resources/sass/variables/theme/_theme_dark.scss

@@ -29,7 +29,7 @@ $hoverBg:rgba(#4E565F,.7) !default;
 
 //global 
 $fontSize:1rem !default;
-$fontFamily:'Open Sans' !default;
+$fontFamily:'DIN Next' !default;
 $textColor:$shade000 !default;
 $transitionDuration:.2s !default;
 $transition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;

src/main/webapp/resources/sass/variables/theme/_theme_dim.scss

@@ -29,7 +29,7 @@ $hoverBg: rgba(#495771,.7) !default;
 
 //global 
 $fontSize:1rem !default;
-$fontFamily:'Open Sans' !default;
+$fontFamily:'DIN Next' !default;
 $textColor:$shade000 !default;
 $transitionDuration:.2s !default;
 $transition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;

src/main/webapp/resources/sass/variables/theme/_theme_light.scss

@@ -27,7 +27,7 @@ $shade900:#252F44 !default;    //unused
 
 //global 
 $fontSize:1rem !default;
-$fontFamily:'Open Sans' !default;
+$fontFamily:'DIN Next' !default;
 $textColor:$shade700 !default;
 $transitionDuration:.2s !default;
 $transition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;

src/main/webapp/template/config.xhtml

@@ -1,109 +1,210 @@
-<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
+<ui:composition
-    xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"
+  xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:p="http://primefaces.org/ui">
+  xmlns:f="http://java.sun.com/jsf/core"
-
+  xmlns:h="http://java.sun.com/jsf/html"
-    <div id="layout-config" class="layout-config">
+  xmlns:ui="http://java.sun.com/jsf/facelets"
-        <div class="layout-config-content">
+  xmlns:p="http://primefaces.org/ui"
-            <a href="#" id="layout-config-button" class="layout-config-button">
+>
-                <i class="pi pi-cog"/>
+  <div id="layout-config" class="layout-config">
-            </a>
+    <div class="layout-config-content">
-            <h:form id="config-form" styleClass="layout-config-form">
+      <a href="#" id="layout-config-button" class="layout-config-button">
-                <div class="layout-config-header">
+        <i class="pi pi-cog" />
-                    <h5>Theme Customization</h5>
+      </a>
-                    <span>Poseidon offers different themes for layout, topbar, menu etc.</span>
+      <h:form id="config-form" styleClass="layout-config-form">
-                </div>
+        <div class="layout-config-header">
-
+          <h5>Theme Customization</h5>
-                <p:outputPanel id="lightdark-panel" styleClass="layout-config-section options">
+          <span
-                    <span class="section-name">Layout Mode</span>
+            >Poseidon offers different themes for layout, topbar, menu
-                    <div class="grid layout-config-options">
+            etc.</span
-                        <p:selectOneRadio layout="responsive" columns="3" value="#{guestPreferences.darkMode}" onchange="PrimeFaces.PoseidonConfigurator.changeLayout('#{guestPreferences.componentTheme}', event.target.value)"   >
+          >
-                            <f:selectItem itemLabel="Light" itemValue="light" />
-                            <f:selectItem itemLabel="Dark" itemValue="dark" />
-                            <f:selectItem itemLabel="Dim" itemValue="dim" />
-                            <p:ajax onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()" update="config-form logolink footerlogolink"/>
-                        </p:selectOneRadio>
-                    </div>
-                </p:outputPanel>
-
-                <p:outputPanel id="menumodes-panel" styleClass="layout-config-section options">
-                    <span class="section-name">Menu Mode</span>
-                    <div class="grid layout-config-options">
-                        <p:selectOneRadio layout="responsive" columns="2" value="#{guestPreferences.menuMode}" onchange="PrimeFaces.PoseidonConfigurator.changeMenuMode(event.target.value)" >
-                            <f:selectItem itemLabel="Static" itemValue="layout-static layout-static-active" />
-                            <f:selectItem itemLabel="Overlay" itemValue="layout-overlay" />
-                            <f:selectItem itemLabel="Horizontal" itemValue="layout-horizontal" />
-                            <p:ajax update="menumodes-panel" />
-                        </p:selectOneRadio>
-                    </div>
-                </p:outputPanel>
-
-                <p:outputPanel id="menuthemes-panel" styleClass="layout-config-section options">
-                    <span class="section-name">Menu Theme</span>
-                    <div class="grid layout-config-options">
-                        <p:selectOneRadio layout="responsive" columns="3" value="#{guestPreferences.menuTheme}" onchange="PrimeFaces.PoseidonConfigurator.changeSectionTheme(event.target.value , 'layout-menu')"   >
-                            <f:selectItem itemLabel="Light" itemValue="light" itemDisabled="#{guestPreferences.darkMode != 'light'}"  />
-                            <f:selectItem itemLabel="Dark" itemValue="dark" itemDisabled="#{guestPreferences.darkMode != 'light'}"  />
-                            <f:selectItem itemLabel="Dim" itemValue="dim" itemDisabled="#{guestPreferences.darkMode != 'light'}" />
-                            <p:ajax update="logolink menuthemes-panel"/>
-                        </p:selectOneRadio>
-                    </div>
-                </p:outputPanel>
-
-                <p:outputPanel id="topbarthemes-panel" styleClass="layout-config-section options">
-                    <span class="section-name">Topbar Mode</span>
-                    <div class="grid layout-config-options">
-                        <p:selectOneRadio layout="responsive" columns="3" value="#{guestPreferences.topbarTheme}" onchange="PrimeFaces.PoseidonConfigurator.changeSectionTheme(event.target.value , 'layout-topbar')"   >
-                            <f:selectItem itemLabel="Light" itemValue="light" itemDisabled="#{guestPreferences.darkMode != 'light'}"  />
-                            <f:selectItem itemLabel="Dark" itemValue="dark" itemDisabled="#{guestPreferences.darkMode != 'light'}" />
-                            <f:selectItem itemLabel="Dim" itemValue="dim" itemDisabled="#{guestPreferences.darkMode != 'light'}" />
-                            <p:ajax update="logolink config-form"/>
-                        </p:selectOneRadio>
-                    </div>
-                </p:outputPanel>
-
-                <p:outputPanel id="outlined-panel" styleClass="layout-config-section options">
-                    <span class="section-name">Form Type</span>
-                    <div class="grid layout-config-options">
-                        <p:selectOneRadio layout="responsive" columns="2" value="#{guestPreferences.inputStyle}"
-                                          onchange="PrimeFaces.PoseidonConfigurator.updateInputStyle(event.target.value)">
-                            <f:selectItem itemLabel="Outlined" itemValue="outlined" />
-                            <f:selectItem itemLabel="Filled" itemValue="filled" />
-                            <p:ajax />
-                        </p:selectOneRadio>
-                    </div>
-                </p:outputPanel>
-
-                <p:outputPanel id="orientation-panel" styleClass="layout-config-section dark">
-                    <span class="section-name">RTL Mode</span>
-                    <p:inputSwitch id="layout-switch-2" value="#{guestPreferences.orientationRTL}" onchange="PrimeFaces.PoseidonConfigurator.changeMenuToRTL()">
-                        <p:ajax onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()" update="config-form" />
-                    </p:inputSwitch>
-                </p:outputPanel>
-
-                <p:outputPanel id="componentthemes-panel" styleClass="layout-config-section colors">
-                    <span class="section-name">Component Colors</span>
-                    <div class="grid layout-config-colors">
-                        <ui:repeat value="#{guestPreferences.componentThemes}" var="componentTheme">
-                            <div class="col col-fixed">
-                                <p:commandLink styleClass="layout-config-option" 
-                                    actionListener="#{guestPreferences.setComponentTheme(componentTheme.file)}" process="@this"
-                                    update=":config-form"
-                                    onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()"
-                                    oncomplete="PrimeFaces.PoseidonConfigurator.changeComponentsTheme('#{componentTheme.file}', '#{guestPreferences.darkMode}')">
-                                    <span class="layout-config-option-color"
-                                        style="background-color: #{componentTheme.color};" title="#{componentTheme.name}"></span>
-                                    <ui:fragment rendered="#{componentTheme.file eq guestPreferences.componentTheme}">
-                                        <span class="layout-config-option-check-mask">
-                                            <i class="pi pi-check"></i>
-                                        </span>
-                                    </ui:fragment>
-                                </p:commandLink>
-                            </div>
-                        </ui:repeat>
-                    </div>
-                </p:outputPanel>
-
-            </h:form>
         </div>
+
+        <p:outputPanel
+          id="lightdark-panel"
+          styleClass="layout-config-section options"
+        >
+          <span class="section-name">Layout Mode</span>
+          <div class="grid layout-config-options">
+            <p:selectOneRadio
+              layout="responsive"
+              columns="3"
+              value="#{guestPreferences.darkMode}"
+              onchange="PrimeFaces.PoseidonConfigurator.changeLayout('#{guestPreferences.componentTheme}', event.target.value)"
+            >
+              <f:selectItem itemLabel="Light" itemValue="light" />
+              <f:selectItem itemLabel="Dark" itemValue="dark" />
+              <f:selectItem itemLabel="Dim" itemValue="dim" />
+              <p:ajax
+                onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()"
+                update="config-form logolink"
+              />
+            </p:selectOneRadio>
+          </div>
+        </p:outputPanel>
+
+        <p:outputPanel
+          id="menumodes-panel"
+          styleClass="layout-config-section options"
+        >
+          <span class="section-name">Menu Mode</span>
+          <div class="grid layout-config-options">
+            <p:selectOneRadio
+              layout="responsive"
+              columns="2"
+              value="#{guestPreferences.menuMode}"
+              onchange="PrimeFaces.PoseidonConfigurator.changeMenuMode(event.target.value)"
+            >
+              <f:selectItem
+                itemLabel="Static"
+                itemValue="layout-static layout-static-active"
+              />
+              <f:selectItem itemLabel="Overlay" itemValue="layout-overlay" />
+              <f:selectItem
+                itemLabel="Horizontal"
+                itemValue="layout-horizontal"
+              />
+              <p:ajax update="menumodes-panel" />
+            </p:selectOneRadio>
+          </div>
+        </p:outputPanel>
+
+        <p:outputPanel
+          id="menuthemes-panel"
+          styleClass="layout-config-section options"
+        >
+          <span class="section-name">Menu Theme</span>
+          <div class="grid layout-config-options">
+            <p:selectOneRadio
+              layout="responsive"
+              columns="3"
+              value="#{guestPreferences.menuTheme}"
+              onchange="PrimeFaces.PoseidonConfigurator.changeSectionTheme(event.target.value , 'layout-menu')"
+            >
+              <f:selectItem
+                itemLabel="Light"
+                itemValue="light"
+                itemDisabled="#{guestPreferences.darkMode != 'light'}"
+              />
+              <f:selectItem
+                itemLabel="Dark"
+                itemValue="dark"
+                itemDisabled="#{guestPreferences.darkMode != 'light'}"
+              />
+              <f:selectItem
+                itemLabel="Dim"
+                itemValue="dim"
+                itemDisabled="#{guestPreferences.darkMode != 'light'}"
+              />
+              <p:ajax update="logolink menuthemes-panel" />
+            </p:selectOneRadio>
+          </div>
+        </p:outputPanel>
+
+        <p:outputPanel
+          id="topbarthemes-panel"
+          styleClass="layout-config-section options"
+        >
+          <span class="section-name">Topbar Mode</span>
+          <div class="grid layout-config-options">
+            <p:selectOneRadio
+              layout="responsive"
+              columns="3"
+              value="#{guestPreferences.topbarTheme}"
+              onchange="PrimeFaces.PoseidonConfigurator.changeSectionTheme(event.target.value , 'layout-topbar')"
+            >
+              <f:selectItem
+                itemLabel="Light"
+                itemValue="light"
+                itemDisabled="#{guestPreferences.darkMode != 'light'}"
+              />
+              <f:selectItem
+                itemLabel="Dark"
+                itemValue="dark"
+                itemDisabled="#{guestPreferences.darkMode != 'light'}"
+              />
+              <f:selectItem
+                itemLabel="Dim"
+                itemValue="dim"
+                itemDisabled="#{guestPreferences.darkMode != 'light'}"
+              />
+              <p:ajax update="logolink config-form" />
+            </p:selectOneRadio>
+          </div>
+        </p:outputPanel>
+
+        <p:outputPanel
+          id="outlined-panel"
+          styleClass="layout-config-section options"
+        >
+          <span class="section-name">Form Type</span>
+          <div class="grid layout-config-options">
+            <p:selectOneRadio
+              layout="responsive"
+              columns="2"
+              value="#{guestPreferences.inputStyle}"
+              onchange="PrimeFaces.PoseidonConfigurator.updateInputStyle(event.target.value)"
+            >
+              <f:selectItem itemLabel="Outlined" itemValue="outlined" />
+              <f:selectItem itemLabel="Filled" itemValue="filled" />
+              <p:ajax />
+            </p:selectOneRadio>
+          </div>
+        </p:outputPanel>
+
+        <p:outputPanel
+          id="orientation-panel"
+          styleClass="layout-config-section dark"
+        >
+          <span class="section-name">RTL Mode</span>
+          <p:inputSwitch
+            id="layout-switch-2"
+            value="#{guestPreferences.orientationRTL}"
+            onchange="PrimeFaces.PoseidonConfigurator.changeMenuToRTL()"
+          >
+            <p:ajax
+              onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()"
+              update="config-form"
+            />
+          </p:inputSwitch>
+        </p:outputPanel>
+
+        <p:outputPanel
+          id="componentthemes-panel"
+          styleClass="layout-config-section colors"
+        >
+          <span class="section-name">Component Colors</span>
+          <div class="grid layout-config-colors">
+            <ui:repeat
+              value="#{guestPreferences.componentThemes}"
+              var="componentTheme"
+            >
+              <div class="col col-fixed">
+                <p:commandLink
+                  styleClass="layout-config-option"
+                  actionListener="#{guestPreferences.setComponentTheme(componentTheme.file)}"
+                  process="@this"
+                  update=":config-form"
+                  onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()"
+                  oncomplete="PrimeFaces.PoseidonConfigurator.changeComponentsTheme('#{componentTheme.file}', '#{guestPreferences.darkMode}')"
+                >
+                  <span
+                    class="layout-config-option-color"
+                    style="background-color: #{componentTheme.color}"
+                    title="#{componentTheme.name}"
+                  ></span>
+                  <ui:fragment
+                    rendered="#{componentTheme.file eq guestPreferences.componentTheme}"
+                  >
+                    <span class="layout-config-option-check-mask">
+                      <i class="pi pi-check"></i>
+                    </span>
+                  </ui:fragment>
+                </p:commandLink>
+              </div>
+            </ui:repeat>
+          </div>
+        </p:outputPanel>
+      </h:form>
     </div>
+  </div>
 </ui:composition>

src/main/webapp/template/template.xhtml

@@ -5,7 +5,7 @@
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:p="http://primefaces.org/ui"
-  >
+>
   <h:head>
     <f:facet name="first">
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -13,7 +13,7 @@
       <meta
         name="viewport"
         content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
-        />
+      />
       <meta name="apple-mobile-web-app-capable" content="yes" />
     </f:facet>
     <title>
@@ -94,7 +94,7 @@
   <h:body styleClass="main-body #{guestPreferences.inputStyleClass}">
     <div
       class="layout-wrapper layout-topbar-#{guestPreferences.topbarTheme} layout-static-active layout-menu-#{guestPreferences.menuTheme} #{guestPreferences.menuMode} #{guestPreferences.orientationRTL ? 'layout-rtl' : null}"
-      >
+    >
       <ui:include src="./topbar.xhtml" />
       <ui:include src="./menutemplate.xhtml" />
 
@@ -125,7 +125,7 @@
                       id="messages"
                       showSummary="true"
                       closable="true"
-                      />
+                    />
                     <h:panelGroup layout="block" id="panel_formulario">
                       <ui:insert name="FORMULARIO"></ui:insert>
                     </h:panelGroup>
@@ -139,20 +139,20 @@
                     message="Deseja excluir?"
                     header="Confirmar"
                     severity="warn"
-                    >
+                  >
                     <p:commandButton
                       value="Sim"
                       icon="pi pi-check"
                       process="@this"
                       oncomplete="PF('deleteDialog').hide()"
-                      />
+                    />
                     <p:commandButton
                       value="Não"
                       type="button"
                       styleClass="ui-button-secondary"
                       icon="pi pi-times"
                       onclick="PF('deleteDialog').hide()"
-                      />
+                    />
                   </p:confirmDialog>
 
                   <p:confirmDialog global="true" showEffect="fade" width="300">
@@ -161,13 +161,13 @@
                       type="button"
                       styleClass="ui-confirmdialog-yes"
                       icon="pi pi-check"
-                      />
+                    />
                     <p:commandButton
                       value="Não"
                       type="button"
                       styleClass="ui-confirmdialog-no ui-button-secondary"
                       icon="pi pi-times"
-                      />
+                    />
                   </p:confirmDialog>
                 </div>
               </div>
@@ -175,8 +175,7 @@
           </h:form>
         </div>
       </div>
-    </div>
+      <div class="layout-mask modal-in"></div>
-    <div class="layout-mask modal-in"></div>
     </div>
 
     <p:ajaxStatus styleClass="layout-ajax-loader">
@@ -184,7 +183,7 @@
         <i
           class="pi pi-spin pi-spinner layout-ajax-loader-icon"
           aria-hidden="true"
-          />
+        />
       </f:facet>
 
       <f:facet name="complete">
@@ -195,16 +194,16 @@
     <h:outputStylesheet
       name="css/primeflex.min.css"
       library="poseidon-layout"
-      />
+    />
     <h:outputStylesheet name="css/primeicons.css" library="poseidon-layout" />
     <h:outputStylesheet
       name="css/demo-#{guestPreferences.darkMode}.css"
       library="demo"
-      />
+    />
     <h:outputStylesheet
       name="css/layout-#{guestPreferences.darkMode}.css"
       library="poseidon-layout"
-      />
+    />
     <h:outputStylesheet name="css/framework.css" library="framework" />
     <p:log id="log" rendered="false" />
   </h:body>

target/agtemplate-1.0.0/resources/demo/css/demo-light.css

@@ -1,5 +1,5 @@
 :root {
-  --content-alt-bg-color:#E8F1F8;
+  --content-alt-bg-color:#ffffff;
 }
 
 .order-badge {

target/agtemplate-1.0.0/resources/poseidon-layout/css/layout-light.css

@@ -1,5 +1,5 @@
 :root {
-  --content-alt-bg-color: #e8f1f8;
+  --content-alt-bg-color: #ffffff;
 }
 
 /* din-next-ultra-light - latin */
@@ -6574,7 +6574,7 @@ body {
   height: 100%;
 }
 body.main-body {
-  background: linear-gradient(99deg, #f6f9fe 0%, #e8f1f8 100%);
+  background: #ffffff;
 }
 body a {
   color: #2c84d8;

target/agtemplate-1.0.0/resources/sass/layout/_main.scss

@@ -4,7 +4,7 @@ html {
 }
  
 body {
-    font-family: 'Open Sans';
+    font-family: 'DIN Next';
     font-size: $fontSize;
     color: $textColor;
     -webkit-font-smoothing: antialiased;

target/agtemplate-1.0.0/resources/sass/layout/_typography.scss

@@ -38,7 +38,7 @@ mark {
     background: #FFF8E1;
     padding: .25rem .4rem;
     border-radius: $borderRadius;
-    font-family: 'Open Sans';
+    font-family: 'DIN Next';
 }
 
 blockquote {

target/agtemplate-1.0.0/resources/sass/variables/layout/_layout_common.scss

@@ -1,6 +1,6 @@
 //general
 $fontSize:14px !default;
-$fontFamily: 'Open Sans' !default;
+$fontFamily: 'DIN Next' !default;
 $mobileBreakpoint:991px !default;
 $borderRadius:5px !default;
 $animationDuration:.2s !default;

target/agtemplate-1.0.0/resources/sass/variables/layout/_layout_light.scss

@@ -3,7 +3,7 @@ $textColor:#515C66 !default;
 $textSecondaryColor:#657380 !default;
 
 $contentBgColor:#FDFEFF !default;
-$contentAltBgColor:#E8F1F8 !default;
+$contentAltBgColor:#ffffff !default;
 $dividerColor: #E8F1F8 !default;
 
 $menuTooltipBgColor:#1c202c !default;

target/agtemplate-1.0.0/resources/sass/variables/theme/_theme_dark.scss

@@ -29,7 +29,7 @@ $hoverBg:rgba(#4E565F,.7) !default;
 
 //global 
 $fontSize:1rem !default;
-$fontFamily:'Open Sans' !default;
+$fontFamily:'DIN Next' !default;
 $textColor:$shade000 !default;
 $transitionDuration:.2s !default;
 $transition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;

target/agtemplate-1.0.0/resources/sass/variables/theme/_theme_dim.scss

@@ -29,7 +29,7 @@ $hoverBg: rgba(#495771,.7) !default;
 
 //global 
 $fontSize:1rem !default;
-$fontFamily:'Open Sans' !default;
+$fontFamily:'DIN Next' !default;
 $textColor:$shade000 !default;
 $transitionDuration:.2s !default;
 $transition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;

target/agtemplate-1.0.0/resources/sass/variables/theme/_theme_light.scss

@@ -27,7 +27,7 @@ $shade900:#252F44 !default;    //unused
 
 //global 
 $fontSize:1rem !default;
-$fontFamily:'Open Sans' !default;
+$fontFamily:'DIN Next' !default;
 $textColor:$shade700 !default;
 $transitionDuration:.2s !default;
 $transition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;

target/agtemplate-1.0.0/template/config.xhtml

@@ -1,109 +1,210 @@
-<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
+<ui:composition
-    xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"
+  xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:p="http://primefaces.org/ui">
+  xmlns:f="http://java.sun.com/jsf/core"
-
+  xmlns:h="http://java.sun.com/jsf/html"
-    <div id="layout-config" class="layout-config">
+  xmlns:ui="http://java.sun.com/jsf/facelets"
-        <div class="layout-config-content">
+  xmlns:p="http://primefaces.org/ui"
-            <a href="#" id="layout-config-button" class="layout-config-button">
+>
-                <i class="pi pi-cog"/>
+  <div id="layout-config" class="layout-config">
-            </a>
+    <div class="layout-config-content">
-            <h:form id="config-form" styleClass="layout-config-form">
+      <a href="#" id="layout-config-button" class="layout-config-button">
-                <div class="layout-config-header">
+        <i class="pi pi-cog" />
-                    <h5>Theme Customization</h5>
+      </a>
-                    <span>Poseidon offers different themes for layout, topbar, menu etc.</span>
+      <h:form id="config-form" styleClass="layout-config-form">
-                </div>
+        <div class="layout-config-header">
-
+          <h5>Theme Customization</h5>
-                <p:outputPanel id="lightdark-panel" styleClass="layout-config-section options">
+          <span
-                    <span class="section-name">Layout Mode</span>
+            >Poseidon offers different themes for layout, topbar, menu
-                    <div class="grid layout-config-options">
+            etc.</span
-                        <p:selectOneRadio layout="responsive" columns="3" value="#{guestPreferences.darkMode}" onchange="PrimeFaces.PoseidonConfigurator.changeLayout('#{guestPreferences.componentTheme}', event.target.value)"   >
+          >
-                            <f:selectItem itemLabel="Light" itemValue="light" />
-                            <f:selectItem itemLabel="Dark" itemValue="dark" />
-                            <f:selectItem itemLabel="Dim" itemValue="dim" />
-                            <p:ajax onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()" update="config-form logolink footerlogolink"/>
-                        </p:selectOneRadio>
-                    </div>
-                </p:outputPanel>
-
-                <p:outputPanel id="menumodes-panel" styleClass="layout-config-section options">
-                    <span class="section-name">Menu Mode</span>
-                    <div class="grid layout-config-options">
-                        <p:selectOneRadio layout="responsive" columns="2" value="#{guestPreferences.menuMode}" onchange="PrimeFaces.PoseidonConfigurator.changeMenuMode(event.target.value)" >
-                            <f:selectItem itemLabel="Static" itemValue="layout-static layout-static-active" />
-                            <f:selectItem itemLabel="Overlay" itemValue="layout-overlay" />
-                            <f:selectItem itemLabel="Horizontal" itemValue="layout-horizontal" />
-                            <p:ajax update="menumodes-panel" />
-                        </p:selectOneRadio>
-                    </div>
-                </p:outputPanel>
-
-                <p:outputPanel id="menuthemes-panel" styleClass="layout-config-section options">
-                    <span class="section-name">Menu Theme</span>
-                    <div class="grid layout-config-options">
-                        <p:selectOneRadio layout="responsive" columns="3" value="#{guestPreferences.menuTheme}" onchange="PrimeFaces.PoseidonConfigurator.changeSectionTheme(event.target.value , 'layout-menu')"   >
-                            <f:selectItem itemLabel="Light" itemValue="light" itemDisabled="#{guestPreferences.darkMode != 'light'}"  />
-                            <f:selectItem itemLabel="Dark" itemValue="dark" itemDisabled="#{guestPreferences.darkMode != 'light'}"  />
-                            <f:selectItem itemLabel="Dim" itemValue="dim" itemDisabled="#{guestPreferences.darkMode != 'light'}" />
-                            <p:ajax update="logolink menuthemes-panel"/>
-                        </p:selectOneRadio>
-                    </div>
-                </p:outputPanel>
-
-                <p:outputPanel id="topbarthemes-panel" styleClass="layout-config-section options">
-                    <span class="section-name">Topbar Mode</span>
-                    <div class="grid layout-config-options">
-                        <p:selectOneRadio layout="responsive" columns="3" value="#{guestPreferences.topbarTheme}" onchange="PrimeFaces.PoseidonConfigurator.changeSectionTheme(event.target.value , 'layout-topbar')"   >
-                            <f:selectItem itemLabel="Light" itemValue="light" itemDisabled="#{guestPreferences.darkMode != 'light'}"  />
-                            <f:selectItem itemLabel="Dark" itemValue="dark" itemDisabled="#{guestPreferences.darkMode != 'light'}" />
-                            <f:selectItem itemLabel="Dim" itemValue="dim" itemDisabled="#{guestPreferences.darkMode != 'light'}" />
-                            <p:ajax update="logolink config-form"/>
-                        </p:selectOneRadio>
-                    </div>
-                </p:outputPanel>
-
-                <p:outputPanel id="outlined-panel" styleClass="layout-config-section options">
-                    <span class="section-name">Form Type</span>
-                    <div class="grid layout-config-options">
-                        <p:selectOneRadio layout="responsive" columns="2" value="#{guestPreferences.inputStyle}"
-                                          onchange="PrimeFaces.PoseidonConfigurator.updateInputStyle(event.target.value)">
-                            <f:selectItem itemLabel="Outlined" itemValue="outlined" />
-                            <f:selectItem itemLabel="Filled" itemValue="filled" />
-                            <p:ajax />
-                        </p:selectOneRadio>
-                    </div>
-                </p:outputPanel>
-
-                <p:outputPanel id="orientation-panel" styleClass="layout-config-section dark">
-                    <span class="section-name">RTL Mode</span>
-                    <p:inputSwitch id="layout-switch-2" value="#{guestPreferences.orientationRTL}" onchange="PrimeFaces.PoseidonConfigurator.changeMenuToRTL()">
-                        <p:ajax onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()" update="config-form" />
-                    </p:inputSwitch>
-                </p:outputPanel>
-
-                <p:outputPanel id="componentthemes-panel" styleClass="layout-config-section colors">
-                    <span class="section-name">Component Colors</span>
-                    <div class="grid layout-config-colors">
-                        <ui:repeat value="#{guestPreferences.componentThemes}" var="componentTheme">
-                            <div class="col col-fixed">
-                                <p:commandLink styleClass="layout-config-option" 
-                                    actionListener="#{guestPreferences.setComponentTheme(componentTheme.file)}" process="@this"
-                                    update=":config-form"
-                                    onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()"
-                                    oncomplete="PrimeFaces.PoseidonConfigurator.changeComponentsTheme('#{componentTheme.file}', '#{guestPreferences.darkMode}')">
-                                    <span class="layout-config-option-color"
-                                        style="background-color: #{componentTheme.color};" title="#{componentTheme.name}"></span>
-                                    <ui:fragment rendered="#{componentTheme.file eq guestPreferences.componentTheme}">
-                                        <span class="layout-config-option-check-mask">
-                                            <i class="pi pi-check"></i>
-                                        </span>
-                                    </ui:fragment>
-                                </p:commandLink>
-                            </div>
-                        </ui:repeat>
-                    </div>
-                </p:outputPanel>
-
-            </h:form>
         </div>
+
+        <p:outputPanel
+          id="lightdark-panel"
+          styleClass="layout-config-section options"
+        >
+          <span class="section-name">Layout Mode</span>
+          <div class="grid layout-config-options">
+            <p:selectOneRadio
+              layout="responsive"
+              columns="3"
+              value="#{guestPreferences.darkMode}"
+              onchange="PrimeFaces.PoseidonConfigurator.changeLayout('#{guestPreferences.componentTheme}', event.target.value)"
+            >
+              <f:selectItem itemLabel="Light" itemValue="light" />
+              <f:selectItem itemLabel="Dark" itemValue="dark" />
+              <f:selectItem itemLabel="Dim" itemValue="dim" />
+              <p:ajax
+                onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()"
+                update="config-form logolink"
+              />
+            </p:selectOneRadio>
+          </div>
+        </p:outputPanel>
+
+        <p:outputPanel
+          id="menumodes-panel"
+          styleClass="layout-config-section options"
+        >
+          <span class="section-name">Menu Mode</span>
+          <div class="grid layout-config-options">
+            <p:selectOneRadio
+              layout="responsive"
+              columns="2"
+              value="#{guestPreferences.menuMode}"
+              onchange="PrimeFaces.PoseidonConfigurator.changeMenuMode(event.target.value)"
+            >
+              <f:selectItem
+                itemLabel="Static"
+                itemValue="layout-static layout-static-active"
+              />
+              <f:selectItem itemLabel="Overlay" itemValue="layout-overlay" />
+              <f:selectItem
+                itemLabel="Horizontal"
+                itemValue="layout-horizontal"
+              />
+              <p:ajax update="menumodes-panel" />
+            </p:selectOneRadio>
+          </div>
+        </p:outputPanel>
+
+        <p:outputPanel
+          id="menuthemes-panel"
+          styleClass="layout-config-section options"
+        >
+          <span class="section-name">Menu Theme</span>
+          <div class="grid layout-config-options">
+            <p:selectOneRadio
+              layout="responsive"
+              columns="3"
+              value="#{guestPreferences.menuTheme}"
+              onchange="PrimeFaces.PoseidonConfigurator.changeSectionTheme(event.target.value , 'layout-menu')"
+            >
+              <f:selectItem
+                itemLabel="Light"
+                itemValue="light"
+                itemDisabled="#{guestPreferences.darkMode != 'light'}"
+              />
+              <f:selectItem
+                itemLabel="Dark"
+                itemValue="dark"
+                itemDisabled="#{guestPreferences.darkMode != 'light'}"
+              />
+              <f:selectItem
+                itemLabel="Dim"
+                itemValue="dim"
+                itemDisabled="#{guestPreferences.darkMode != 'light'}"
+              />
+              <p:ajax update="logolink menuthemes-panel" />
+            </p:selectOneRadio>
+          </div>
+        </p:outputPanel>
+
+        <p:outputPanel
+          id="topbarthemes-panel"
+          styleClass="layout-config-section options"
+        >
+          <span class="section-name">Topbar Mode</span>
+          <div class="grid layout-config-options">
+            <p:selectOneRadio
+              layout="responsive"
+              columns="3"
+              value="#{guestPreferences.topbarTheme}"
+              onchange="PrimeFaces.PoseidonConfigurator.changeSectionTheme(event.target.value , 'layout-topbar')"
+            >
+              <f:selectItem
+                itemLabel="Light"
+                itemValue="light"
+                itemDisabled="#{guestPreferences.darkMode != 'light'}"
+              />
+              <f:selectItem
+                itemLabel="Dark"
+                itemValue="dark"
+                itemDisabled="#{guestPreferences.darkMode != 'light'}"
+              />
+              <f:selectItem
+                itemLabel="Dim"
+                itemValue="dim"
+                itemDisabled="#{guestPreferences.darkMode != 'light'}"
+              />
+              <p:ajax update="logolink config-form" />
+            </p:selectOneRadio>
+          </div>
+        </p:outputPanel>
+
+        <p:outputPanel
+          id="outlined-panel"
+          styleClass="layout-config-section options"
+        >
+          <span class="section-name">Form Type</span>
+          <div class="grid layout-config-options">
+            <p:selectOneRadio
+              layout="responsive"
+              columns="2"
+              value="#{guestPreferences.inputStyle}"
+              onchange="PrimeFaces.PoseidonConfigurator.updateInputStyle(event.target.value)"
+            >
+              <f:selectItem itemLabel="Outlined" itemValue="outlined" />
+              <f:selectItem itemLabel="Filled" itemValue="filled" />
+              <p:ajax />
+            </p:selectOneRadio>
+          </div>
+        </p:outputPanel>
+
+        <p:outputPanel
+          id="orientation-panel"
+          styleClass="layout-config-section dark"
+        >
+          <span class="section-name">RTL Mode</span>
+          <p:inputSwitch
+            id="layout-switch-2"
+            value="#{guestPreferences.orientationRTL}"
+            onchange="PrimeFaces.PoseidonConfigurator.changeMenuToRTL()"
+          >
+            <p:ajax
+              onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()"
+              update="config-form"
+            />
+          </p:inputSwitch>
+        </p:outputPanel>
+
+        <p:outputPanel
+          id="componentthemes-panel"
+          styleClass="layout-config-section colors"
+        >
+          <span class="section-name">Component Colors</span>
+          <div class="grid layout-config-colors">
+            <ui:repeat
+              value="#{guestPreferences.componentThemes}"
+              var="componentTheme"
+            >
+              <div class="col col-fixed">
+                <p:commandLink
+                  styleClass="layout-config-option"
+                  actionListener="#{guestPreferences.setComponentTheme(componentTheme.file)}"
+                  process="@this"
+                  update=":config-form"
+                  onstart="PrimeFaces.PoseidonConfigurator.beforeResourceChange()"
+                  oncomplete="PrimeFaces.PoseidonConfigurator.changeComponentsTheme('#{componentTheme.file}', '#{guestPreferences.darkMode}')"
+                >
+                  <span
+                    class="layout-config-option-color"
+                    style="background-color: #{componentTheme.color}"
+                    title="#{componentTheme.name}"
+                  ></span>
+                  <ui:fragment
+                    rendered="#{componentTheme.file eq guestPreferences.componentTheme}"
+                  >
+                    <span class="layout-config-option-check-mask">
+                      <i class="pi pi-check"></i>
+                    </span>
+                  </ui:fragment>
+                </p:commandLink>
+              </div>
+            </ui:repeat>
+          </div>
+        </p:outputPanel>
+      </h:form>
     </div>
+  </div>
 </ui:composition>

target/agtemplate-1.0.0/template/template.xhtml

@@ -5,7 +5,7 @@
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:p="http://primefaces.org/ui"
-  >
+>
   <h:head>
     <f:facet name="first">
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -13,7 +13,7 @@
       <meta
         name="viewport"
         content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
-        />
+      />
       <meta name="apple-mobile-web-app-capable" content="yes" />
     </f:facet>
     <title>
@@ -94,7 +94,7 @@
   <h:body styleClass="main-body #{guestPreferences.inputStyleClass}">
     <div
       class="layout-wrapper layout-topbar-#{guestPreferences.topbarTheme} layout-static-active layout-menu-#{guestPreferences.menuTheme} #{guestPreferences.menuMode} #{guestPreferences.orientationRTL ? 'layout-rtl' : null}"
-      >
+    >
       <ui:include src="./topbar.xhtml" />
       <ui:include src="./menutemplate.xhtml" />
 
@@ -125,7 +125,7 @@
                       id="messages"
                       showSummary="true"
                       closable="true"
-                      />
+                    />
                     <h:panelGroup layout="block" id="panel_formulario">
                       <ui:insert name="FORMULARIO"></ui:insert>
                     </h:panelGroup>
@@ -139,20 +139,20 @@
                     message="Deseja excluir?"
                     header="Confirmar"
                     severity="warn"
-                    >
+                  >
                     <p:commandButton
                       value="Sim"
                       icon="pi pi-check"
                       process="@this"
                       oncomplete="PF('deleteDialog').hide()"
-                      />
+                    />
                     <p:commandButton
                       value="Não"
                       type="button"
                       styleClass="ui-button-secondary"
                       icon="pi pi-times"
                       onclick="PF('deleteDialog').hide()"
-                      />
+                    />
                   </p:confirmDialog>
 
                   <p:confirmDialog global="true" showEffect="fade" width="300">
@@ -161,13 +161,13 @@
                       type="button"
                       styleClass="ui-confirmdialog-yes"
                       icon="pi pi-check"
-                      />
+                    />
                     <p:commandButton
                       value="Não"
                       type="button"
                       styleClass="ui-confirmdialog-no ui-button-secondary"
                       icon="pi pi-times"
-                      />
+                    />
                   </p:confirmDialog>
                 </div>
               </div>
@@ -175,8 +175,7 @@
           </h:form>
         </div>
       </div>
-    </div>
+      <div class="layout-mask modal-in"></div>
-    <div class="layout-mask modal-in"></div>
     </div>
 
     <p:ajaxStatus styleClass="layout-ajax-loader">
@@ -184,7 +183,7 @@
         <i
           class="pi pi-spin pi-spinner layout-ajax-loader-icon"
           aria-hidden="true"
-          />
+        />
       </f:facet>
 
       <f:facet name="complete">
@@ -195,16 +194,16 @@
     <h:outputStylesheet
       name="css/primeflex.min.css"
       library="poseidon-layout"
-      />
+    />
     <h:outputStylesheet name="css/primeicons.css" library="poseidon-layout" />
     <h:outputStylesheet
       name="css/demo-#{guestPreferences.darkMode}.css"
       library="demo"
-      />
+    />
     <h:outputStylesheet
       name="css/layout-#{guestPreferences.darkMode}.css"
       library="poseidon-layout"
-      />
+    />
     <h:outputStylesheet name="css/framework.css" library="framework" />
     <p:log id="log" rendered="false" />
   </h:body>