diff --git a/new-grid-for-keycloack/README.md b/new-grid-for-keycloack/README.md new file mode 100644 index 0000000..6193994 --- /dev/null +++ b/new-grid-for-keycloack/README.md @@ -0,0 +1,17 @@ +# CSS pie charts + +Recherche sur un positionnement grid flexible + +## css build / watch : + +``` +sass grid.scss:grid.css +``` + +``` +sass --watch grid.scss:grid.css +``` + + + + \ No newline at end of file diff --git a/new-grid-for-keycloack/_global.scss b/new-grid-for-keycloack/_global.scss new file mode 100644 index 0000000..7e762c4 --- /dev/null +++ b/new-grid-for-keycloack/_global.scss @@ -0,0 +1,3 @@ +:root{ + font-family: sans-serif; +} diff --git a/new-grid-for-keycloack/_main.scss b/new-grid-for-keycloack/_main.scss new file mode 100644 index 0000000..a337854 --- /dev/null +++ b/new-grid-for-keycloack/_main.scss @@ -0,0 +1,96 @@ +/* +.pj-popin-big-authent { + .pj-popin-authent { + max-width: 96rem; + } + .authent-container { + display: grid; + grid-template-columns: 43rem auto; + grid-template-rows: 1fr; + gap: 1px 1px; + grid-template-areas: + "authent-banner authent-footer"; + height: 100%; + } + .authent-banner { + background-color:yellow; + grid-area: authent-banner; + padding: 13rem 6rem 6rem; + background-image: url('../images/boussole.svg'), url('../images/coeur.svg'), url('../images/poi.svg'); + background-position: -1.6rem -1.6rem,110% 35rem, -10px 104%; + background-size: 15rem, 15rem, 11rem; + } + .authent-footer { + grid-area: authent-footer; + padding: 9rem 4rem 2rem; + } +} +.authent-banner { + background-size: 15rem; + padding: 7rem; +} +.authent-footer { + padding: 14rem; +} +*/ + +.pj-popin-big-authent { + .pj-popin-authent { + max-width: 96rem; + } + .authent-container { + } + .authent-banner { + background-color:yellow; + } + #kc-content-wrapper { + display: grid; + grid-template-columns: calc(50% - 20px) 40px calc(50% - 20px); + grid-template-rows: 1fr 1fr; + grid-template-areas: "auth-left auth-divide auth-right" "auth-info auth-info auth-info"; + height: 100%; + .pj-form { + position: relative; + background-color: azure; + grid-area: auth-right; + } + hr,.hr { + text-align: center; + width:100%; + display: block; + color: transparent; + background-color: transparent; + border:none; + position: relative; + grid-area: auth-divide; + &:before { + content: ""; + position: absolute; + display:block; + width:2px; + height: 100%; + left:calc(50% - 1px); + background-color: black; + } + &:after { + color:black; + position: absolute; + content: "OU"; + display:block; + background-color: white; + height:40px; + line-height: 40px; + bottom:calc(50% - 20px); + left:0; + right:0; + } + } + #kc-info { + grid-area: auth-info; + } + .social-providers { + position: relative; + grid-area: auth-left; + } + } +} diff --git a/new-grid-for-keycloack/grid.css b/new-grid-for-keycloack/grid.css new file mode 100644 index 0000000..9294819 --- /dev/null +++ b/new-grid-for-keycloack/grid.css @@ -0,0 +1,87 @@ +:root { + font-family: sans-serif; } + +/* +.pj-popin-big-authent { + .pj-popin-authent { + max-width: 96rem; + } + .authent-container { + display: grid; + grid-template-columns: 43rem auto; + grid-template-rows: 1fr; + gap: 1px 1px; + grid-template-areas: + "authent-banner authent-footer"; + height: 100%; + } + .authent-banner { + background-color:yellow; + grid-area: authent-banner; + padding: 13rem 6rem 6rem; + background-image: url('../images/boussole.svg'), url('../images/coeur.svg'), url('../images/poi.svg'); + background-position: -1.6rem -1.6rem,110% 35rem, -10px 104%; + background-size: 15rem, 15rem, 11rem; + } + .authent-footer { + grid-area: authent-footer; + padding: 9rem 4rem 2rem; + } +} +.authent-banner { + background-size: 15rem; + padding: 7rem; +} +.authent-footer { + padding: 14rem; +} +*/ +.pj-popin-big-authent .pj-popin-authent { + max-width: 96rem; } +.pj-popin-big-authent .authent-banner { + background-color: yellow; } +.pj-popin-big-authent #kc-content-wrapper { + display: grid; + grid-template-columns: calc(50% - 20px) 40px calc(50% - 20px); + grid-template-rows: 1fr 1fr; + grid-template-areas: "auth-left auth-divide auth-right" "auth-info auth-info auth-info"; + height: 100%; } + .pj-popin-big-authent #kc-content-wrapper .pj-form { + position: relative; + background-color: azure; + grid-area: auth-right; } + .pj-popin-big-authent #kc-content-wrapper hr, .pj-popin-big-authent #kc-content-wrapper .hr { + text-align: center; + width: 100%; + display: block; + color: transparent; + background-color: transparent; + border: none; + position: relative; + grid-area: auth-divide; } + .pj-popin-big-authent #kc-content-wrapper hr:before, .pj-popin-big-authent #kc-content-wrapper .hr:before { + content: ""; + position: absolute; + display: block; + width: 2px; + height: 100%; + left: calc(50% - 1px); + background-color: black; } + .pj-popin-big-authent #kc-content-wrapper hr:after, .pj-popin-big-authent #kc-content-wrapper .hr:after { + color: black; + position: absolute; + content: "OU"; + display: block; + background-color: white; + height: 40px; + line-height: 40px; + bottom: calc(50% - 20px); + left: 0; + right: 0; } + .pj-popin-big-authent #kc-content-wrapper #kc-info { + grid-area: auth-info; } + .pj-popin-big-authent #kc-content-wrapper .social-providers { + position: relative; + grid-area: auth-left; } + +/*# sourceMappingURL=grid.css.map */ diff --git a/new-grid-for-keycloack/grid.css.map b/new-grid-for-keycloack/grid.css.map new file mode 100644 index 0000000..cba51f2 --- /dev/null +++ b/new-grid-for-keycloack/grid.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAAA,KAAK;EACH,WAAW,EAAE,UAAU;;ACDzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkCE;AAGD,uCAAkB;EACjB,SAAS,EAAE,KAAK;AAIjB,qCAAgB;EACb,gBAAgB,EAAC,MAAM;AAE1B,yCAAoB;EACnB,OAAO,EAAE,IAAI;EACb,qBAAqB,EAAE,sCAAsC;EAC7D,kBAAkB,EAAE,OAAO;EAC3B,mBAAmB,EAAE,kEAAkE;EACvF,MAAM,EAAE,IAAI;EACV,kDAAS;IACP,QAAQ,EAAE,QAAQ;IAClB,gBAAgB,EAAE,KAAK;IACvB,SAAS,EAAE,UAAU;EAEvB,2FAAO;IACL,UAAU,EAAE,MAAM;IAClB,KAAK,EAAC,IAAI;IACV,OAAO,EAAE,KAAK;IACd,KAAK,EAAE,WAAW;IAClB,gBAAgB,EAAE,WAAW;IAC7B,MAAM,EAAC,IAAI;IACX,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,WAAW;IACtB,yGAAS;MACP,OAAO,EAAE,EAAE;MACX,QAAQ,EAAE,QAAQ;MAClB,OAAO,EAAC,KAAK;MACb,KAAK,EAAC,GAAG;MACT,MAAM,EAAE,IAAI;MACZ,IAAI,EAAC,eAAe;MACpB,gBAAgB,EAAE,KAAK;IAEzB,uGAAQ;MACN,KAAK,EAAC,KAAK;MACX,QAAQ,EAAE,QAAQ;MAClB,OAAO,EAAE,IAAI;MACb,OAAO,EAAC,KAAK;MACb,gBAAgB,EAAE,KAAK;MACvB,MAAM,EAAC,IAAI;MACX,WAAW,EAAE,IAAI;MACjB,MAAM,EAAC,gBAAgB;MACvB,IAAI,EAAC,CAAC;MACN,KAAK,EAAC,CAAC;EAGX,kDAAS;IACP,SAAS,EAAE,SAAS;EAEtB,2DAAkB;IAChB,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,SAAS", +"sources": ["_global.scss","_main.scss"], +"names": [], +"file": "grid.css" +} \ No newline at end of file diff --git a/new-grid-for-keycloack/grid.scss b/new-grid-for-keycloack/grid.scss new file mode 100644 index 0000000..742e043 --- /dev/null +++ b/new-grid-for-keycloack/grid.scss @@ -0,0 +1,2 @@ +@import "global"; +@import "main"; \ No newline at end of file diff --git a/new-grid-for-keycloack/index.html b/new-grid-for-keycloack/index.html new file mode 100644 index 0000000..bebc921 --- /dev/null +++ b/new-grid-for-keycloack/index.html @@ -0,0 +1,170 @@ + + + + + + + + + Grid + + + + + + + + + \ No newline at end of file