backend-skins 0.1.15 → 0.1.16

package/README.md

@@ -1,2 +1,36 @@
 # backend-skins
 Skins for backend-plus
+
+# Adding a skin
+
+Create a folder in dist. CSS files go in the folder css and icon images go in the folder img. For password change and login screens, the same applies inside the folder unlogged.
+
+Add the folder name to the local config of your backed-plus application
+
+```
+server:
+    skins:
+        modern:
+        local-path: node_modules/backend-skins/dist/
+```
+
+In your backend-plus application local config, set the desired skin
+
+```
+client-setup:
+  skin: modern
+```
+
+# Button styles
+In the modern skin, buttons are automatically colored via the attribute 'color'. The possible values are 'primary', 'secondary', 'success', 'warning', and 'danger'.
+Additionally, the button can be outlined by adding the attribute outlined=true.
+
+For example, when using the dialog-promise library, the buttons can be configured as follows:
+```js
+confirmPromise("Confirm prompt", {
+    buttonsDef:[
+        {label:'Accept', value:true, attributes: { color: 'primary', }},
+        {label:'Cancel', value:false, attributes: { color: 'secondary', outline: true, }},
+    ]
+})
+```

package/dist/confort/{css → unlogged/css}/chpass.styl

@@ -1,98 +1,98 @@
-body
-  background-color #D8DBE5
-  
-.chpasstable
-  background-color #F6F7FB
-  max-width 450px
-  min-width 400px
-  margin-left auto
-  margin-top 30px
-  margin-right auto
-  border 1px solid #B6BCCE
-  
-.formtd
-  width 90%
-  
-.iconostd
-  width 10% 
-  
-.formtitle
-  background-color #126da6
-  text-align center
-  padding 10px
-  
-h2
-  color white
-  font-family helvetica
-  text-transform uppercase
-  font-size 80%
-  font-weight 700
-  
-.formImg
-  padding 0px
-  width 210px
-  display block
-  margin-left auto
-  margin-right auto
-
-.chpasstableRightImg
-  display none  
-
-.formlabel
-  display none
-  
-.iconoslog
-  width 37px
-  padding 5px
-  margin-top 5px
-  margin-left 20px
-
-.iconosnewPassword
-  width 37px
-  padding 5px
-  margin-top 5px
-  margin-left 20px
-
-.iconosrepPassword
-  width 37px
-  padding 5px
-  margin-top 5px
-  margin-left 20px
-  
-input[type="text"]
-  -webkit-autofill
-  background-color white
-  border 1px solid #c2cde2
-  -webkit-box-shadow 0 0 0px 1000px white inset
-  -webkit-text-fill-color #273966
-  background-color #fff
-  padding 10px
-  width 80%   
-
-input[type=password]
-  -webkit-autofill
-  background-color white
-  border 1px solid #c2cde2
-  -webkit-box-shadow 0 0 0px 1000px white inset
-  -webkit-text-fill-color #778caa
-  background-color #fff
-  padding 10px
-  width 80%  
-
-  
-input[type=submit]
-  background-color #0088CC
-  color #FFF
-  font-weight 700
-  width 86%
-  padding 15px
-  margin-top 15px
-  margin-bottom 5px
-  border-bottom    1px solid #adb7d2
-  border-right   1px solid #adb7d2
-  
-input[type=submit]:hover
-  background-color #0ebeea
-  border-bottom    1px solid #adb7d2
-  border-right   1px solid #adb7d2
+body
+  background-color #D8DBE5
+  
+.chpasstable
+  background-color #F6F7FB
+  max-width 450px
+  min-width 400px
+  margin-left auto
+  margin-top 30px
+  margin-right auto
+  border 1px solid #B6BCCE
+  
+.formtd
+  width 90%
+  
+.iconostd
+  width 10% 
+  
+.formtitle
+  background-color #126da6
+  text-align center
+  padding 10px
+  
+h2
+  color white
+  font-family helvetica
+  text-transform uppercase
+  font-size 80%
+  font-weight 700
+  
+.formImg
+  padding 0px
+  width 210px
+  display block
+  margin-left auto
+  margin-right auto
+
+.chpasstableRightImg
+  display none  
+
+.formlabel
+  display none
+  
+.iconoslog
+  width 37px
+  padding 5px
+  margin-top 5px
+  margin-left 20px
+
+.iconosnewPassword
+  width 37px
+  padding 5px
+  margin-top 5px
+  margin-left 20px
+
+.iconosrepPassword
+  width 37px
+  padding 5px
+  margin-top 5px
+  margin-left 20px
+  
+input[type="text"]
+  -webkit-autofill
+  background-color white
+  border 1px solid #c2cde2
+  -webkit-box-shadow 0 0 0px 1000px white inset
+  -webkit-text-fill-color #273966
+  background-color #fff
+  padding 10px
+  width 80%   
+
+input[type=password]
+  -webkit-autofill
+  background-color white
+  border 1px solid #c2cde2
+  -webkit-box-shadow 0 0 0px 1000px white inset
+  -webkit-text-fill-color #778caa
+  background-color #fff
+  padding 10px
+  width 80%  
+
+  
+input[type=submit]
+  background-color #0088CC
+  color #FFF
+  font-weight 700
+  width 86%
+  padding 15px
+  margin-top 15px
+  margin-bottom 5px
+  border-bottom    1px solid #adb7d2
+  border-right   1px solid #adb7d2
+  
+input[type=submit]:hover
+  background-color #0ebeea
+  border-bottom    1px solid #adb7d2
+  border-right   1px solid #adb7d2
   cursor pointer

package/dist/confort-bis/{css → unlogged/css}/chpass.styl

@@ -1,113 +1,113 @@
-body
-  background-color #D8DBE5
-  
-.chpasstable
-  background-color #F6F7FB
-  max-width 450px
-  min-width 400px
-  margin-left auto
-  margin-top 30px
-  margin-right auto
-  border 1px solid #b6bcce
-  
-.formtd
-  width 90%
-  
-.iconostd
-  width 10% 
-  
-.formtitle
-  background #535387
-  background -webkit-linear-gradient(#535387, #7e6ea1)
-  background -o-linear-gradient(#535387, #7e6ea1)
-  background -moz-linear-gradient(#535387, #7e6ea1)
-  background linear-gradient(#535387, #7e6ea1)
-  text-align center
-  padding 10px
-    
-h2
-  color white
-  font-family helvetica
-  text-transform uppercase
-  font-size 80%
-  font-weight 700
-  
-.formImg
-  padding 0px
-  width 210px
-  display block
-  margin-left auto
-  margin-right auto
-
-.chpasstableRightImg
-  display none  
-
-.formlabel
-  display none
-  
-.iconoslog
-  width 37px
-  padding 5px
-  margin-top 5px
-  margin-left 20px
-
-.iconosnewPassword
-  width 37px
-  padding 5px
-  margin-top 5px
-  margin-left 20px
-
-.iconosrepPassword
-  width 37px
-  padding 5px
-  margin-top 5px
-  margin-left 20px
-  
-input[type="text"]
-  -webkit-autofill
-  background-color white
-  border 1px solid #c2cde2
-  -webkit-box-shadow 0 0 0px 1000px white inset
-  -webkit-text-fill-color #6b698f
-  background-color #fff
-  padding 10px
-  width 80%   
-
-input[type=password]
-  -webkit-autofill
-  background-color white
-  border 1px solid #c2cde2
-  -webkit-box-shadow 0 0 0px 1000px white inset
-  -webkit-text-fill-color #6b698f
-  background-color #fff
-  padding 10px
-  width 80%  
-  
-input[type=submit]
-  background #8080a3
-  background -webkit-linear-gradient(#8080a3, #9898c4)
-  background -o-linear-gradient(#8080a3, #9898c4)
-  background -moz-linear-gradient(#8080a3, #9898c4)
-  background linear-gradient(#8080a3, #9898c4)
-  border-right  2px solid #7573a5
-  border-bottom 2px solid #7573a5
-  border-left  2px solid #7573a5
-  border-top 2px solid #7573a5
-  color #FFF
-  font-weight 700
-  width 86%
-  padding 15px
-  margin-top 5px
-  margin-bottom 5px
-  
-input[type=submit]:hover
-  background #7372a1
-  background -webkit-linear-gradient(#585789, #799dae)
-  background -o-linear-gradient(#585789, #799dae)
-  background -moz-linear-gradient(#585789, #799dae)
-  background linear-gradient(#585789, #799dae)
-  border-right  2px solid #646791
-  border-bottom 2px solid #646791
-  border-left  2px solid #646791
-  border-top 2px solid #646791
+body
+  background-color #D8DBE5
+  
+.chpasstable
+  background-color #F6F7FB
+  max-width 450px
+  min-width 400px
+  margin-left auto
+  margin-top 30px
+  margin-right auto
+  border 1px solid #b6bcce
+  
+.formtd
+  width 90%
+  
+.iconostd
+  width 10% 
+  
+.formtitle
+  background #535387
+  background -webkit-linear-gradient(#535387, #7e6ea1)
+  background -o-linear-gradient(#535387, #7e6ea1)
+  background -moz-linear-gradient(#535387, #7e6ea1)
+  background linear-gradient(#535387, #7e6ea1)
+  text-align center
+  padding 10px
+    
+h2
+  color white
+  font-family helvetica
+  text-transform uppercase
+  font-size 80%
+  font-weight 700
+  
+.formImg
+  padding 0px
+  width 210px
+  display block
+  margin-left auto
+  margin-right auto
+
+.chpasstableRightImg
+  display none  
+
+.formlabel
+  display none
+  
+.iconoslog
+  width 37px
+  padding 5px
+  margin-top 5px
+  margin-left 20px
+
+.iconosnewPassword
+  width 37px
+  padding 5px
+  margin-top 5px
+  margin-left 20px
+
+.iconosrepPassword
+  width 37px
+  padding 5px
+  margin-top 5px
+  margin-left 20px
+  
+input[type="text"]
+  -webkit-autofill
+  background-color white
+  border 1px solid #c2cde2
+  -webkit-box-shadow 0 0 0px 1000px white inset
+  -webkit-text-fill-color #6b698f
+  background-color #fff
+  padding 10px
+  width 80%   
+
+input[type=password]
+  -webkit-autofill
+  background-color white
+  border 1px solid #c2cde2
+  -webkit-box-shadow 0 0 0px 1000px white inset
+  -webkit-text-fill-color #6b698f
+  background-color #fff
+  padding 10px
+  width 80%  
+  
+input[type=submit]
+  background #8080a3
+  background -webkit-linear-gradient(#8080a3, #9898c4)
+  background -o-linear-gradient(#8080a3, #9898c4)
+  background -moz-linear-gradient(#8080a3, #9898c4)
+  background linear-gradient(#8080a3, #9898c4)
+  border-right  2px solid #7573a5
+  border-bottom 2px solid #7573a5
+  border-left  2px solid #7573a5
+  border-top 2px solid #7573a5
+  color #FFF
+  font-weight 700
+  width 86%
+  padding 15px
+  margin-top 5px
+  margin-bottom 5px
+  
+input[type=submit]:hover
+  background #7372a1
+  background -webkit-linear-gradient(#585789, #799dae)
+  background -o-linear-gradient(#585789, #799dae)
+  background -moz-linear-gradient(#585789, #799dae)
+  background linear-gradient(#585789, #799dae)
+  border-right  2px solid #646791
+  border-bottom 2px solid #646791
+  border-left  2px solid #646791
+  border-top 2px solid #646791
   cursor pointer