From d1b5abf840d425017391c34f372b5693fbab42f0 Mon Sep 17 00:00:00 2001 From: Juan Date: Thu, 14 Oct 2021 19:59:12 +0200 Subject: [PATCH] imports scss and structured builds --- .../live/session4/imports-scss/README.md | 16 +- .../live/session4/imports-scss/css/.gitignore | 4 + .../live/session4/imports-scss/fonts/icomoon.eot | Bin 0 -> 2328 bytes .../live/session4/imports-scss/fonts/icomoon.svg | 16 + .../live/session4/imports-scss/fonts/icomoon.ttf | Bin 0 -> 2504 bytes .../live/session4/imports-scss/fonts/icomoon.woff | Bin 0 -> 2580 bytes .../live/session4/imports-scss/index.html | 12 + .../live/session4/imports-scss/scss/_commons.scss | 176 +++++++++++ .../session4/imports-scss/scss/_icon-style.scss | 44 +++ .../session4/imports-scss/scss/_normalize.scss | 349 +++++++++++++++++++++ .../session4/imports-scss/scss/_variables.scss | 4 + .../scss/common-parts/_contact-form.scss | 138 ++++++++ .../imports-scss/scss/common-parts/_main-menu.scss | 75 +++++ .../live/session4/imports-scss/scss/desktop.scss | 79 +++++ .../live/session4/imports-scss/scss/print.scss | 4 + .../session4/imports-scss/scss/style-main.scss | 14 + 16 files changed, 930 insertions(+), 1 deletion(-) create mode 100644 b2-cwd/integration/live/session4/imports-scss/css/.gitignore create mode 100644 b2-cwd/integration/live/session4/imports-scss/fonts/icomoon.eot create mode 100644 b2-cwd/integration/live/session4/imports-scss/fonts/icomoon.svg create mode 100644 b2-cwd/integration/live/session4/imports-scss/fonts/icomoon.ttf create mode 100644 b2-cwd/integration/live/session4/imports-scss/fonts/icomoon.woff create mode 100644 b2-cwd/integration/live/session4/imports-scss/index.html create mode 100644 b2-cwd/integration/live/session4/imports-scss/scss/_commons.scss create mode 100644 b2-cwd/integration/live/session4/imports-scss/scss/_icon-style.scss create mode 100644 b2-cwd/integration/live/session4/imports-scss/scss/_normalize.scss create mode 100644 b2-cwd/integration/live/session4/imports-scss/scss/_variables.scss create mode 100644 b2-cwd/integration/live/session4/imports-scss/scss/common-parts/_contact-form.scss create mode 100644 b2-cwd/integration/live/session4/imports-scss/scss/common-parts/_main-menu.scss create mode 100644 b2-cwd/integration/live/session4/imports-scss/scss/desktop.scss create mode 100644 b2-cwd/integration/live/session4/imports-scss/scss/print.scss create mode 100644 b2-cwd/integration/live/session4/imports-scss/scss/style-main.scss diff --git a/b2-cwd/integration/live/session4/imports-scss/README.md b/b2-cwd/integration/live/session4/imports-scss/README.md index 04fdfb1..e7a7491 100644 --- a/b2-cwd/integration/live/session4/imports-scss/README.md +++ b/b2-cwd/integration/live/session4/imports-scss/README.md @@ -1,2 +1,16 @@ ## @import -https://sass-lang.com/documentation/at-rules/import \ No newline at end of file +https://sass-lang.com/documentation/at-rules/import + +## normalize necolas version +https://raw.githubusercontent.com/necolas/normalize.css/master/normalize.css + +## surveiller / compiler des fichiers sass : +sass --watch +.\style-main.scss:.\style-main.css .\desktop.scss:.\desktop.css .\print.scss:print.css + +## compresser des fichiers scss : +sass --style=compressed .\style-main.scss:.\style-main.css + +## compresser ne pas faire de map +sass --no-source-map --style=compressed .\style-main.scss:.\style-main.css + diff --git a/b2-cwd/integration/live/session4/imports-scss/css/.gitignore b/b2-cwd/integration/live/session4/imports-scss/css/.gitignore new file mode 100644 index 0000000..5e7d273 --- /dev/null +++ b/b2-cwd/integration/live/session4/imports-scss/css/.gitignore @@ -0,0 +1,4 @@ +# Ignore everything in this directory +* +# Except this file +!.gitignore diff --git a/b2-cwd/integration/live/session4/imports-scss/fonts/icomoon.eot b/b2-cwd/integration/live/session4/imports-scss/fonts/icomoon.eot new file mode 100644 index 0000000000000000000000000000000000000000..1f79bcc92d4fb6458d2a8e5605db39f463a4d694 GIT binary patch literal 2328 zcmb_eO>Y}T7=CAG48D*MKIr>uI5VFYO8bqI~a{X zt{1YKRrJq5zKh;j*w}t2lzaFZcI%PC*`9FV$}i zlSqc6F650$F3X2iURR=Snx{MG45?}Hrc{OpT*|L{Kce(n7Ve)jRC0~$sQ-UBur z@@2dvP514e&WV{eR59V_Xp!DT&{56JG>7K%2bkYCGi{t_M$`y~!YmXN6qIguW>gYT z;pb*vkKH&j8w|m4O7l2i7nzODO#2i{CzH1$k+HEz#jXRVlvGMVksGR&m>AAT}m*(cuLw-B{Y$SQ^TykVA7#uT^ zqAK3Aelv&}(0|qoGHOPOVf|Qqr->XikpqJk{>j0?Wyu`yQQ1XiWnyNg<;uMtnY3rM zkmlF?hTjMo3f)+_c4r*r&b5^rcAQBhZtAB`>o*gLj16Dj-Cgbec=NEE8RE(6AxA5S zvfK4W7@P^E^MJScw{(T*g&3Q1F*IT?gA*()_E77RVrLx#%+177x}-P*zUNs$?r@hB zCnEYPJI{~;{Qi>FamdXI!5XG-73UHESlfB*{v(fl z8jrn#|1xh(w|oCws9s%pd*J2Y>4Yj+`su@+NBh0CB3#H~eX`(=l6NXDNKw%4-&&F( zm#HxY;U;9ODqSqK{p6tl?XrH>V81ByGLj3QH*vqojLP2Lxamu4JVqK6=GY4Gs)adl z)WRz8mWBK974%xz0e;EC{WMG;h`U;KfpJ4)VgBXv2I}p_+<ql|u(gq`^}Y{|w2W8Eb-j=;=WE$| zeoeo=tuN*(Nz5%waruO(V-*EFD$4R + + +Generated by IcoMoon + + + + + + + + + + + + \ No newline at end of file diff --git a/b2-cwd/integration/live/session4/imports-scss/fonts/icomoon.ttf b/b2-cwd/integration/live/session4/imports-scss/fonts/icomoon.ttf new file mode 100644 index 0000000000000000000000000000000000000000..1b5be29273c010541c9e13a57731bc5e4c44c8c8 GIT binary patch literal 2504 zcmb_eUu;uV82`>a-MzG6hogTGO1aFfEehS%wY?>Cld!A=wuWWQ#uu=q>$;M)-JdQ2 z!ox_2i9q5XULY}H4?YlMd_WUl%xs7+ppy7#qKVNLsV}}L8lm-f?!AQzOp+N-dhYps z|IhcG@7!BrM6{8XiBs>9qdk%K4n+g!bIeSxl$~3>^u;zJ<^z4UkX@X^x*7BptQ!im zr>DO=QfdReLe%!4yr<6T42k%9=21#l;TgqQOZ2udyiWqOsRTit*Cx-pHkQ3*hv3CgZrK{4{;Jj_D z>{se%cA;k(4BLKu>?f+Hd97Ka{TvfQQH$14bs(aN>4VHzxvu3S8)d+EVZR)hk$U&e z-EZs9)!XZn^>p(=vk57!!DY>#J#kOe{g?Ys_owbpU~P@68|e>53_jW|Qq)b`rz=0Q zcs5V$c-ba4zMT%yYe=wDaWX|#JYGNZdio>U5YysXAQ)!BfM7xBWG{B=42bY^GPldB z9E%2mQ0!A&GW256cz?tr(PS!hJ{Ifhip9>SQj?ES*TbVbc8rD-=Z1&RB@8UdT-o4q zCBr?jSWh_Va&1t!EZt9pLJ2WBdACju3>-W-Ffh5*YsDY>QhWENd|iP+mw_akrOQOK!xxTGg9zfhy=jwC zr=eo#8e%FK2oP#~-|ai&=u<<98tP_LYxn5R!R^W2Nmp=7V^x;*vVAkc7;6<*QBs?q zH{1=+za+|s25Qz&!y5WXqv3~r^ki%3eZ)KUB^K2y)F08i$L-Q9y+sKsUd5|@v>aJbt{McC9f)B5(WLiI7d)mx!aX<5vq3J|gX<5S!?v>QM z$s2r?juLezSf8EYA?`z<2dyEt+hU5_A-6Lp6REVA;vRW+q7_7%Ehgli_^WJ)p#=P1 z;}+8-8{=HLj59}zH*Pg<;h1symle*LO=21tRt=`X#G>)mlMMJ+uhakW{Fr{<-TK}C z_wyScNf!MW#pKAi1vh@18y}w&^BJeN{FIsLf-M`i;tPbgo~0jKZ?$!I9bCyMvEbGb8cwLw@>zjsAVY`%4Twg(vH97!rde%mi(j zQVZ)E4t%ftw89RskEBlNg7g!(!lQ!<#(VN%WL@2SIO$_EE+fUX5NDuJ#^iJ0xQT7R zOD1l^KMS{sW$;H$?4WIQL45gac5s}K7+3->n3w|(n%D+>*2Hb(A=Sh(_!A~}P?SC> z<|?I1rHsE2IjT?zvqI%`eqpg#DXV?qUP@D*7HAO)5Wr6#g{gNUY?BC{N;l00G~)g#Z8m literal 0 HcmV?d00001 diff --git a/b2-cwd/integration/live/session4/imports-scss/fonts/icomoon.woff b/b2-cwd/integration/live/session4/imports-scss/fonts/icomoon.woff new file mode 100644 index 0000000000000000000000000000000000000000..0ed21c68bcb40ed37fd19e8e0556e266f5011df3 GIT binary patch literal 2580 zcmb_eO>7%Q6n?Yo?8a_zLgJs2x``VS+lAI?9NX(CBvg&!C{3(HX^6PA#7$hsRcz;1 zG*u6&R3Xt;;-?pSY7QI_LI@QkZo#TJkOGxBB7uZ}0}UKF00q(7d^5XFHa}DfV&pgb zy>H&UnfK<+u3sLC$B7Y|%|ZM4)B2gNbG)?;ooWpcu}ZMxT&inTZ6ceT0XGHx5|`EM zpVX(5^PKw;I=AIglb&8W2ksZ5ich(GJ(R7ON+l|`KW{+PW^6>xo1`U3iE`jh=k?aT_@+*plST)+Q zx2rv*bu%rh`TRlV_i+k?cJ_3WATWfVojDz5<4D-&hhdxQP+%7cN83X#iAEENE0IWZ zb0l&lkr>^gy%QWbcyJ&XyWG=rIi_Ptk=06vBOYvxL|TJ!hoe%J73pCt5QuS+$-RHH zv$LCJX zN4%zeP1P)jNcD6eAXVXEwuhn`i-uXq-MviO$l}2cggzcJJT^^qVG;Y?swzEC-I>5Gtf``5fk5$_7SBann>P?EAa8oM z4i7YT9f%)}JN$LURYehL`?8lYR!**}CTgD4-Sx~q!_$WXDix5!0_sSko{c)%UK*l~ z-l92_&@ zlPfFZ<)2*GIZb!*aD2x^!-=#~o((s+S5oPYT$ESo6j4izwOJWDejj|TC=I^dGRbd; zQqAm)hf*f_J#sao6nL0r663Du^Q@a81@eR98q*{TlV$Y=&KxCPTq~~Om~r|yR9R*g ziD@9r7EHqwlf|ps3HaEn)Bo}On7HpwargiI{DynunFh2>ym#1yi@(kc56^IU%;_!f zm}a`u6%8U7JrM zB7FFGe4=5F_&(wN#T$C=$=q!Eh)(foTsMhS#=^oz4!i|d*a`NY)FfS%z6Z-a+9<8R zCpT6W=0<0y_l+*w*e-!B44=mB7l;trb+Wjp={jI6z9 literal 0 HcmV?d00001 diff --git a/b2-cwd/integration/live/session4/imports-scss/index.html b/b2-cwd/integration/live/session4/imports-scss/index.html new file mode 100644 index 0000000..2b97429 --- /dev/null +++ b/b2-cwd/integration/live/session4/imports-scss/index.html @@ -0,0 +1,12 @@ + + + + + A hompage + + + + Coucou +
 
+ + \ No newline at end of file diff --git a/b2-cwd/integration/live/session4/imports-scss/scss/_commons.scss b/b2-cwd/integration/live/session4/imports-scss/scss/_commons.scss new file mode 100644 index 0000000..fdbc679 --- /dev/null +++ b/b2-cwd/integration/live/session4/imports-scss/scss/_commons.scss @@ -0,0 +1,176 @@ + +body +{ + font-family: $font; + font-size:$normalfontsize; +} + +h4 +{ + font-size:$normalfontsize + 2px; +} + +body,figure,img +{ + padding:0; + border:none; + margin:0; +} + +#switch:checked ~ p +{ + background-color:green; +} + +.img-wrap img +{ + // avec interpolation + width:calc(100% - (#{$marge}*2)); + height:auto; + margin:$marge; + top:50%; + transform: translateY(-25%); +} + +picture +{ + position:relative; + display:block; + max-height:40vh; + overflow:hidden; +} + +main, h1 +{ + margin:1rem; + padding:1rem; +} + +@import "common-parts/main-menu"; +@import "common-parts/contact-form"; + +.hidden, +*[aria-hidden] +{ + display:none!important; +} + + +////////////////////// style a propos +.grand-L +{ + height:16px; +} +main, aside +{ + box-sizing: border-box; +} +main +{ + width:calc(100% - 27vw); +} +.main-stat +{ + max-width: 73vw; + float:left; + margin:10px 0 10px -2rem; +} +aside +{ + width:25vw; + right:0; + top:75px; + position:fixed; + img + { + max-width:100%; + } +} + +// https://contrastchecker.com/ +footer +{ + color:#a9a9a9; + border-top: solid 1px #000; + padding:10px; +} + +a[lang=fr],a[target=_blank] +{ + &:after + { + color:blueviolet; + } +} + +a[lang=fr] +{ + &::after + { + content :' [fr]'; + } +} + +a[target=_blank] +{ + &::after + { + content :' [^]'; + } +} + +#loaded +{ + background-color: #ccF; + border-left: solid 3px blue; + color:darkblue; + padding:3px; +} +#warning +{ + background-color: #Fed; + border-left: solid 3px red; + color:darkred; + padding:3px; +} + +li +{ + &[lang] + { + color:#ccc; + } + &[lang=fr] + { + color:darkblue; + } + // commence par + &[lang^=fr] + { + color:darkblue; + } + // se termine par + &[lang$=CA] + { + color:blue; + } + //contient + &[lang*="-"] + { + font-weight: bold; + } + +} + +span +{ + //contient + &[class~="red"] + { + color:red; + } + &[class|=red] + { + color:darkred; + } +} \ No newline at end of file diff --git a/b2-cwd/integration/live/session4/imports-scss/scss/_icon-style.scss b/b2-cwd/integration/live/session4/imports-scss/scss/_icon-style.scss new file mode 100644 index 0000000..eb40aa1 --- /dev/null +++ b/b2-cwd/integration/live/session4/imports-scss/scss/_icon-style.scss @@ -0,0 +1,44 @@ +@font-face { + font-family: 'icomoon'; + src: + url('/fonts/icomoon.ttf?k3kmik') format('truetype'), + url('/fonts/icomoon.woff?k3kmik') format('woff'), + url('/fonts/icomoon.svg?k3kmik#icomoon') format('svg'); + font-weight: normal; + font-style: normal; + font-display: block; +} + +[class^="icon-"], [class*=" icon-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'icomoon' !important; + speak: never; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-eye:before { + content: "\e9ce"; +} +.icon-eye-blocked:before { + content: "\e9d1"; +} +.icon-close-circle:before { + content: "\ea0d"; +} +.icon-close:before { + content: "\ea0f"; +} +.icon-radio-checked:before { + content: "\ea54"; +} +.icon-radio-unchecked:before { + content: "\ea56"; +} diff --git a/b2-cwd/integration/live/session4/imports-scss/scss/_normalize.scss b/b2-cwd/integration/live/session4/imports-scss/scss/_normalize.scss new file mode 100644 index 0000000..c45a85f --- /dev/null +++ b/b2-cwd/integration/live/session4/imports-scss/scss/_normalize.scss @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + + html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + } + + /* Sections + ========================================================================== */ + + /** + * Remove the margin in all browsers. + */ + + body { + margin: 0; + } + + /** + * Render the `main` element consistently in IE. + */ + + main { + display: block; + } + + /** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + + h1 { + font-size: 2em; + margin: 0.67em 0; + } + + /* Grouping content + ========================================================================== */ + + /** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + + hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /* Text-level semantics + ========================================================================== */ + + /** + * Remove the gray background on active links in IE 10. + */ + + a { + background-color: transparent; + } + + /** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + + abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + } + + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + + b, + strong { + font-weight: bolder; + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + code, + kbd, + samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /** + * Add the correct font size in all browsers. + */ + + small { + font-size: 80%; + } + + /** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + /* Embedded content + ========================================================================== */ + + /** + * Remove the border on images inside links in IE 10. + */ + + img { + border-style: none; + } + + /* Forms + ========================================================================== */ + + /** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + + button, + input, + optgroup, + select, + textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ + } + + /** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + + button, + input { /* 1 */ + overflow: visible; + } + + /** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + + button, + select { /* 1 */ + text-transform: none; + } + + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + + button, + [type="button"], + [type="reset"], + [type="submit"] { + -webkit-appearance: button; + } + + /** + * Remove the inner border and padding in Firefox. + */ + + button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; + } + + /** + * Restore the focus styles unset by the previous rule. + */ + + button:-moz-focusring, + [type="button"]:-moz-focusring, + [type="reset"]:-moz-focusring, + [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; + } + + /** + * Correct the padding in Firefox. + */ + + fieldset { + padding: 0.35em 0.75em 0.625em; + } + + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + + legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ + } + + /** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + + progress { + vertical-align: baseline; + } + + /** + * Remove the default vertical scrollbar in IE 10+. + */ + + textarea { + overflow: auto; + } + + /** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + + [type="checkbox"], + [type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + } + + /** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + + [type="number"]::-webkit-inner-spin-button, + [type="number"]::-webkit-outer-spin-button { + height: auto; + } + + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + + [type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ + } + + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + + [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + } + + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + + ::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ + } + + /* Interactive + ========================================================================== */ + + /* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + + details { + display: block; + } + + /* + * Add the correct display in all browsers. + */ + + summary { + display: list-item; + } + + /* Misc + ========================================================================== */ + + /** + * Add the correct display in IE 10+. + */ + + template { + display: none; + } + + /** + * Add the correct display in IE 10. + */ + + [hidden] { + display: none; + } \ No newline at end of file diff --git a/b2-cwd/integration/live/session4/imports-scss/scss/_variables.scss b/b2-cwd/integration/live/session4/imports-scss/scss/_variables.scss new file mode 100644 index 0000000..9942c9f --- /dev/null +++ b/b2-cwd/integration/live/session4/imports-scss/scss/_variables.scss @@ -0,0 +1,4 @@ + +$font : Arial, Helvetica, sans-serif; +$normalfontsize : 12px; +$marge : 8px; \ No newline at end of file diff --git a/b2-cwd/integration/live/session4/imports-scss/scss/common-parts/_contact-form.scss b/b2-cwd/integration/live/session4/imports-scss/scss/common-parts/_contact-form.scss new file mode 100644 index 0000000..2b3ca24 --- /dev/null +++ b/b2-cwd/integration/live/session4/imports-scss/scss/common-parts/_contact-form.scss @@ -0,0 +1,138 @@ +////////// FORMULAIRE DE CONTACT + +// switch por afficher le conteneur du formulaire +.contact-form-wrap +{ + display:none; +} + +#show-contact:checked ~ .contact-form-wrap +{ + display:block; +} + +// je positionne le fond en fixed pour lui faire occuper toute la page +.contact-form-wrap +{ + position:fixed; + //fond noir à 25% ce qui donne la transparence + background-color:rgba(0,0,0,0.25); + top:0; + bottom:0; + left:0; + right:0; + .h3 + { + color:white; + text-align: center; + margin-top:120px; + } +} + +//je préfixe les éléments du formulaire pour les regrouper dans mon sas +.cf +{ + //je centre le formulaire dans son conteneur (.contact-form-wrap) + &-form + { + background-color: white; + position: absolute; + top:50%; + left:50%; + transform: translate(-50%,-50%); + padding: 20px; + border-radius: 20px; + } + //je normalise tous les inputs / labels + &-input, &-label + { + min-height: 20px; + line-height: 20px; + box-sizing: border-box; + width:100%; + min-width:30vh; + } + &-input + { + border: solid 1px #666; + border-radius: 4px; + padding:4px; + } + &-label + { + line-height: 30px; + box-sizing: border-box; + } + &-btn + { + background-color: black; + color:white; + padding-left:10px; + padding-right:10px; + margin-top:4px; + &:hover + { + background-color: white; + color:black; + transition: color 0.5s; + } + } + &-input-group + { + &:after + { + content:""; + display: table; + clear:both; + overflow: auto; + } + } + &-close-wrap + { + margin:-10px -10px 0 -20px; + } + &-close + { + display: block; + position:relative; + box-sizing: border-box; + float:right; + clear:both; + font-size:20px; + } + +} + +.icon-radio-checked +{ + display:none; + color:green; +} +.icon-radio-unchecked +{ + color:red; +} + +#abonnement-oui:checked ~ .ct-radio +{ + .icon-radio-checked + { + display:inline; + } + .icon-radio-unchecked + { + display:none; + } +} +#abonnement-non:checked ~ .ct-radio +{ + .icon-radio-checked + { + display:inline; + } + .icon-radio-unchecked + { + display:none; + } +} + diff --git a/b2-cwd/integration/live/session4/imports-scss/scss/common-parts/_main-menu.scss b/b2-cwd/integration/live/session4/imports-scss/scss/common-parts/_main-menu.scss new file mode 100644 index 0000000..bb5d5fb --- /dev/null +++ b/b2-cwd/integration/live/session4/imports-scss/scss/common-parts/_main-menu.scss @@ -0,0 +1,75 @@ +#main-menu +{ + text-align:center; + ul + { + list-style:none; + } + + li + { + text-align: left; + } + + li a, + li span, + li label + { + color:black; + text-decoration:none; + font-size:1.1rem; + } + + li span + { + color:#666; + } + + .menu-label + { + font-size:1.5rem; + color:black; + text-decoration:none; + font-weight:bold; + display:inline-block; + line-height:2rem; + } +} +.burger +{ + float:left; + margin: 3px 8px; + b,i + { + display: block; + width: 20px; + } + b + { + height: 2px; + margin-bottom: 5px; + position: relative; + background: #000; + border-radius: 2px; + z-index: 1; + &:first-of-type + { + margin-top:5px; + } + } + i + { + color:blue; + } +} + +//switch pour afficher le menu +#main-menu ul +{ + display:none; +} + +#main-menu #switch:checked ~ ul +{ + display:block; +} diff --git a/b2-cwd/integration/live/session4/imports-scss/scss/desktop.scss b/b2-cwd/integration/live/session4/imports-scss/scss/desktop.scss new file mode 100644 index 0000000..cad9ea7 --- /dev/null +++ b/b2-cwd/integration/live/session4/imports-scss/scss/desktop.scss @@ -0,0 +1,79 @@ +#main-menu +{ + .menu-label + { + display:none; + } + ul + { + display:block; + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 0px; + margin-inline-end: 0px; + padding-inline-start: 0px; + margin:0px; + li + { + display:inline-block; + width:24%; + } + } +} + + +////// FORUMULAIRE +.cf +{ + &-label,&-input + { + min-width: auto; + width: auto; + } + &-label + { + float:left; + clear:left; + padding-right:20px; + } + &-input + { + min-height: 20px; + line-height: 20px; + min-width: 20vw; + float:right; + clear:right; + box-sizing: border-box; + + } + &-textarea + { + margin:8px 0; + display:block; + width:100%; + clear: both; + } + &-input-group + { + padding:4px; + margin:4px; + } + &-close-wrap + { + margin:-20px -20px 0 -20px; + } + &-btn + { + background-color: black; + color:white; + padding-left:10px; + padding-right:10px; + } +} + +.main-stat +{ + max-width: 300px; + float:left; + margin:10px; +} \ No newline at end of file diff --git a/b2-cwd/integration/live/session4/imports-scss/scss/print.scss b/b2-cwd/integration/live/session4/imports-scss/scss/print.scss new file mode 100644 index 0000000..39a403f --- /dev/null +++ b/b2-cwd/integration/live/session4/imports-scss/scss/print.scss @@ -0,0 +1,4 @@ +#main-menu +{ + display: none!important; +} \ No newline at end of file diff --git a/b2-cwd/integration/live/session4/imports-scss/scss/style-main.scss b/b2-cwd/integration/live/session4/imports-scss/scss/style-main.scss new file mode 100644 index 0000000..ded5fd0 --- /dev/null +++ b/b2-cwd/integration/live/session4/imports-scss/scss/style-main.scss @@ -0,0 +1,14 @@ +@import "normalize.scss"; +@import "icon-style.scss"; +@import "variables.scss"; +@import "commons.scss"; + +@media screen and (min-width: 480px) +{ + @import "desktop.scss"; +} + +@media print +{ + @import "print.scss"; +} \ No newline at end of file