scrollreveal
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
@@ -0,0 +1,64 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="10mm"
|
||||
height="10mm"
|
||||
viewBox="0 0 10.531931 10.531931"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:export-filename="noun-arrow-download.svg"
|
||||
inkscape:export-xdpi="300"
|
||||
inkscape:export-ydpi="300"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
sodipodi:docname="noun-arrow-download.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="0.72337262"
|
||||
inkscape:cx="8.9856871"
|
||||
inkscape:cy="215.65649"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1016"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="36"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Calque 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-102.65834,-91.281253)">
|
||||
<circle
|
||||
style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.529167;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
|
||||
id="path3"
|
||||
cx="107.9243"
|
||||
cy="96.547218"
|
||||
r="5.0013819" />
|
||||
<g
|
||||
id="g3"
|
||||
transform="matrix(0.20537675,0,0,0.20537675,101.21124,91.670331)">
|
||||
<path
|
||||
d="m 41.028293,36.984814 h -16.69492 a 0.702944,0.702944 0 0 0 0,1.405888 h 16.69492 a 0.702944,0.702944 0 1 0 0,-1.405888 z"
|
||||
id="path1"
|
||||
style="fill:#ffffff;stroke-width:0.292893" />
|
||||
<path
|
||||
d="m 42.46347,24.507558 -9.079693,8.874668 V 9.804313 a 0.702944,0.702944 0 1 0 -1.405888,0 v 23.577913 l -9.079693,-8.874668 a 0.70294398,0.70294398 0 0 0 -0.966548,0 0.73223332,0.73223332 0 0 0 0,0.995837 l 10.251267,10.046241 a 0.79081198,0.79081198 0 0 0 0.995837,0 L 43.430018,25.503395 a 0.70294398,0.70294398 0 0 0 0,-0.995837 0.70294398,0.70294398 0 0 0 -0.966548,0 z"
|
||||
id="path2"
|
||||
style="fill:#ffffff;stroke-width:0.292893" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
@@ -0,0 +1,53 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="7mm"
|
||||
height="7mm"
|
||||
viewBox="0 0 10.531931 10.531931"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
sodipodi:docname="noun-arrow-to-right.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="0.86234568"
|
||||
inkscape:cx="20.293486"
|
||||
inkscape:cy="19.713672"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1172"
|
||||
inkscape:window-x="1920"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Calque 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-99.747912,-143.13958)">
|
||||
<circle
|
||||
style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.529167;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
|
||||
id="path3-3"
|
||||
cx="105.01388"
|
||||
cy="148.40555"
|
||||
r="5.0013819" />
|
||||
<path
|
||||
d="m 105.44397,146.39759 1.82265,1.86476 h -4.84236 a 0.14436835,0.14436835 0 1 0 0,0.28873 h 4.84236 l -1.82265,1.86476 a 0.14436835,0.14436835 0 0 0 0,0.19851 0.1503837,0.1503837 0 0 0 0.20452,0 l 2.06326,-2.10537 a 0.1624144,0.1624144 0 0 0 0,-0.20452 l -2.06326,-2.10538 a 0.14436835,0.14436835 0 0 0 -0.20452,0 0.14436835,0.14436835 0 0 0 0,0.19851 z"
|
||||
id="path2-2"
|
||||
style="fill:#ffffff;stroke-width:0.0601533" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
@@ -0,0 +1,52 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
version="1.0"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 100 125"
|
||||
style="enable-background:new 0 0 100 100;"
|
||||
xml:space="preserve"
|
||||
id="svg2"
|
||||
sodipodi:docname="noun-loop-3037049.svg"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><defs
|
||||
id="defs2" /><sodipodi:namedview
|
||||
id="namedview2"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:zoom="4.1365747"
|
||||
inkscape:cx="41.217677"
|
||||
inkscape:cy="56.810288"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1012"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg2" /><g
|
||||
id="g1"
|
||||
transform="matrix(-1,0,0,1,99.722674,0)"><path
|
||||
d="M 86.85,13.47 C 81.61,8.34 74.67,5.51 67.35,5.63 c -7.34,0.08 -14.2,3 -19.34,8.24 -8.48,8.65 -10.23,21.81 -4.45,32.36 l -7.58,7.74 -2.3,-2.26 c -0.24,-0.23 -0.57,-0.37 -0.89,-0.36 -0.33,0 -0.65,0.14 -0.88,0.38 L 5.01,79.17 c -0.23,0.24 -0.36,0.56 -0.36,0.89 0,0.33 0.14,0.65 0.38,0.88 l 14.11,13.83 c 0.24,0.24 0.56,0.36 0.88,0.36 0.32,0 0.65,-0.13 0.89,-0.38 l 26.9,-27.44 c 0.23,-0.24 0.36,-0.56 0.36,-0.89 0,-0.33 -0.14,-0.65 -0.38,-0.88 l -2.3,-2.26 7.1,-7.24 c 0.43,0.28 0.86,0.56 1.32,0.82 4.29,2.48 9.02,3.69 13.73,3.69 7.19,0 14.3,-2.83 19.61,-8.25 C 97.83,41.5 97.66,24.07 86.85,13.47 Z M 20,92.11 7.67,80.03 32.82,54.37 45.14,66.45 Z m 23.7,-30.58 -5.94,-5.82 7.11,-7.26 c 0.04,0.06 0.08,0.11 0.12,0.17 0.09,0.14 0.19,0.27 0.29,0.4 0.21,0.3 0.43,0.6 0.66,0.89 0.11,0.15 0.23,0.29 0.34,0.43 0.23,0.29 0.47,0.57 0.71,0.84 0.11,0.12 0.21,0.25 0.32,0.37 0.35,0.39 0.72,0.77 1.09,1.14 0.46,0.45 0.93,0.87 1.42,1.28 0.12,0.1 0.24,0.2 0.36,0.3 0.12,0.1 0.23,0.2 0.34,0.29 z M 85.46,50.56 c -7.98,8.15 -20.44,9.85 -30.3,4.14 -0.7,-0.41 -1.36,-0.84 -2.01,-1.3 -1.04,-0.75 -2.05,-1.59 -2.98,-2.51 -1.49,-1.46 -2.8,-3.1 -3.91,-4.95 -0.02,-0.05 -0.05,-0.1 -0.08,-0.15 -5.78,-9.7 -4.28,-22.11 3.63,-30.19 4.67,-4.76 10.91,-7.42 17.58,-7.49 0.09,0 0.18,0 0.26,0 6.57,0 12.76,2.53 17.46,7.13 9.82,9.65 9.97,25.49 0.35,35.32 z"
|
||||
id="path1" /></g><g
|
||||
id="g2"
|
||||
transform="translate(0.48349182,-0.48349182)"><rect
|
||||
style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:1.59149;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
|
||||
id="rect2"
|
||||
width="0.68201739"
|
||||
height="26.391418"
|
||||
x="31.111984"
|
||||
y="20.342749" /><rect
|
||||
style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:1.59149;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
|
||||
id="rect2-5"
|
||||
width="0.68201739"
|
||||
height="26.391418"
|
||||
x="-33.879463"
|
||||
y="18.257284"
|
||||
transform="rotate(-90)" /></g></svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@@ -0,0 +1,53 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="48.346359mm"
|
||||
height="48.607445mm"
|
||||
viewBox="0 0 48.346359 48.607445"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs1">
|
||||
<clipPath
|
||||
id="Clip0-5">
|
||||
<path
|
||||
d="M 0,0 H 137.045 V 137.783 H 0 Z"
|
||||
id="path1-6" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g
|
||||
id="layer1"
|
||||
transform="translate(-14.845658,-79.045126)">
|
||||
<g
|
||||
clip-path="url(#Clip0-5)"
|
||||
style="fill:none;stroke:none"
|
||||
transform="matrix(0.35277777,0,0,0.35277777,14.845653,79.045124)"
|
||||
clip-rule="evenodd"
|
||||
id="Groupe 143">
|
||||
<path
|
||||
style="fill:none;stroke:#a8b7ec;stroke-width:15.8528;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none"
|
||||
transform="translate(7.92641,7.92641)"
|
||||
d="M 121.192,60.9649 C 121.192,94.6361 94.0635,121.93 60.596,121.93 27.1298,121.93 0,94.6361 0,60.9649 0,27.2949 27.1298,0 60.596,0 c 33.4675,0 60.596,27.2949 60.596,60.9649 z"
|
||||
id="path37" />
|
||||
<g
|
||||
transform="translate(0.0632929,26.8707)"
|
||||
id="g38">
|
||||
<path
|
||||
id="use37"
|
||||
d="m 68.6784,60.3954 h 3.2574 v -37.38 h -3.4176 l -12.816,6.8352 1.8156,2.403 11.1606,-5.9274 z"
|
||||
style="fill:#171615;stroke:none;stroke-width:5.34" />
|
||||
<path
|
||||
style="fill:none;stroke:none"
|
||||
d="M 0,0 H 135.625 V 105.055 H 0 Z"
|
||||
id="path38" />
|
||||
</g>
|
||||
</g>
|
||||
<path
|
||||
id="path37-3"
|
||||
style="color:#000000;clip-rule:evenodd;fill:#0632c2;fill-opacity:1;-inkscape-stroke:none"
|
||||
d="m 14.846185,103.34862 c 5.61e-4,13.37996 10.845546,24.30395 24.17165,24.30395 h 0.001 v -5.59398 h -0.001 c -10.285402,0 -18.579708,-8.33404 -18.580261,-18.70997 z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1,61 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="48.607449mm"
|
||||
height="48.346363mm"
|
||||
viewBox="0 0 48.607449 48.346363"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs1">
|
||||
<clipPath
|
||||
id="Clip0-5-1">
|
||||
<path
|
||||
d="M 0,0 H 137.045 V 137.783 H 0 Z"
|
||||
id="path1-6-8" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g
|
||||
id="layer1"
|
||||
transform="translate(-81.077257,-79.175665)">
|
||||
<g
|
||||
clip-path="url(#Clip0-5-1)"
|
||||
style="fill:none;stroke:none"
|
||||
transform="matrix(0,0.35277777,-0.35277777,0,129.68471,79.175666)"
|
||||
clip-rule="evenodd"
|
||||
id="Groupe 143-9">
|
||||
<path
|
||||
style="fill:none;stroke:#a8b7ec;stroke-width:15.8528;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none"
|
||||
transform="translate(7.92641,7.92641)"
|
||||
d="M 121.192,60.9649 C 121.192,94.6361 94.0635,121.93 60.596,121.93 27.1298,121.93 0,94.6361 0,60.9649 0,27.2949 27.1298,0 60.596,0 c 33.4675,0 60.596,27.2949 60.596,60.9649 z"
|
||||
id="path37-2" />
|
||||
<g
|
||||
transform="translate(0.0632929,26.8707)"
|
||||
id="g38-0">
|
||||
<path
|
||||
style="fill:none;stroke:none"
|
||||
d="M 0,0 H 135.625 V 105.055 H 0 Z"
|
||||
id="path38-3" />
|
||||
</g>
|
||||
</g>
|
||||
<path
|
||||
id="path37-3-7"
|
||||
style="color:#000000;clip-rule:evenodd;fill:#0632c2;fill-opacity:1;-inkscape-stroke:none"
|
||||
d="M 105.38121,79.176198 C 92.001242,79.176759 81.077257,90.021745 81.077257,103.34785 v 0.001 h 5.59398 v -0.001 c 0,-10.285403 8.334035,-18.579709 18.709973,-18.580262 z" />
|
||||
<g
|
||||
transform="matrix(0.35277777,0,0,0.35277777,81.077257,88.524262)"
|
||||
id="g429">
|
||||
<path
|
||||
id="use429"
|
||||
d="M 55.63,60.3954 H 80.0872 V 57.405 H 59.6884 L 70.6888,45.924 c 5.073,-5.34 8.277,-9.0246 8.277,-14.151 0,-5.874 -4.7526,-9.8256 -10.7868,-9.8256 -5.3934,0 -9.345,2.4564 -12.282,6.9954 l 2.7768,1.7088 c 2.2962,-3.8448 5.1264,-5.6604 9.2916,-5.6604 4.272,0 7.5828,2.4564 7.5828,6.942 0,4.4322 -2.136,6.6216 -7.3692,12.1752 L 55.63,57.405 Z"
|
||||
style="fill:#171615;stroke:none;stroke-width:5.34" />
|
||||
<path
|
||||
style="fill:none;stroke:none"
|
||||
d="M 0,0 H 135.625 V 105.055 H 0 Z"
|
||||
id="path429" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
@@ -0,0 +1,61 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="48.346352mm"
|
||||
height="48.607452mm"
|
||||
viewBox="0 0 48.346352 48.607452"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs1">
|
||||
<clipPath
|
||||
id="Clip0-5-1-2">
|
||||
<path
|
||||
d="M 0,0 H 137.045 V 137.783 H 0 Z"
|
||||
id="path1-6-8-2" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g
|
||||
id="layer1"
|
||||
transform="translate(-146.21314,-79.045126)">
|
||||
<g
|
||||
clip-path="url(#Clip0-5-1-2)"
|
||||
style="fill:none;stroke:none"
|
||||
transform="matrix(-0.35277777,0,0,-0.35277777,194.5595,127.65258)"
|
||||
clip-rule="evenodd"
|
||||
id="Groupe 143-9-9">
|
||||
<path
|
||||
style="fill:none;stroke:#a8b7ec;stroke-width:15.8528;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none"
|
||||
transform="translate(7.92641,7.92641)"
|
||||
d="M 121.192,60.9649 C 121.192,94.6361 94.0635,121.93 60.596,121.93 27.1298,121.93 0,94.6361 0,60.9649 0,27.2949 27.1298,0 60.596,0 c 33.4675,0 60.596,27.2949 60.596,60.9649 z"
|
||||
id="path37-2-7" />
|
||||
<g
|
||||
transform="translate(0.0632929,26.8707)"
|
||||
id="g38-0-3">
|
||||
<path
|
||||
style="fill:none;stroke:none"
|
||||
d="M 0,0 H 135.625 V 105.055 H 0 Z"
|
||||
id="path38-3-6" />
|
||||
</g>
|
||||
</g>
|
||||
<path
|
||||
id="path37-3-7-1"
|
||||
style="color:#000000;clip-rule:evenodd;fill:#0632c2;fill-opacity:1;-inkscape-stroke:none"
|
||||
d="M 194.55896,103.34908 C 194.5584,89.969116 183.71342,79.045126 170.38731,79.045126 h -0.001 v 5.59398 h 0.001 c 10.28541,0 18.57971,8.33404 18.58026,18.709974 z" />
|
||||
<g
|
||||
transform="matrix(0.35277777,0,0,0.35277777,146.6265,88.524262)"
|
||||
id="g428">
|
||||
<path
|
||||
id="use428"
|
||||
d="m 80.2474,50.3028 c 0,-4.539 -2.5098,-8.4372 -7.209,-9.9858 3.5778,-1.7088 5.5002,-4.9662 5.5002,-8.6508 0,-5.8206 -4.6458,-9.7188 -10.947,-9.7188 -5.073,0 -8.811,2.403 -11.4276,6.7284 l 2.7768,1.7088 c 1.9758,-3.6846 4.8594,-5.3934 8.544,-5.3934 4.3254,0 7.5828,2.403 7.5828,6.8352 0,4.1118 -2.9904,7.209 -7.9566,7.209 h -5.5536 v 2.937 h 6.5148 c 5.4468,0 8.7576,3.471 8.7576,8.2236 0,5.2332 -4.005,8.2236 -9.2916,8.2236 -4.4322,0 -7.743,-1.6554 -10.1994,-5.8206 l -2.8836,1.8156 c 2.8836,4.6992 6.9954,7.0488 13.1364,7.0488 7.3158,0 12.6558,-4.539 12.6558,-11.1606 z"
|
||||
style="fill:#171615;stroke:none;stroke-width:5.34" />
|
||||
<path
|
||||
style="fill:none;stroke:none"
|
||||
d="M 0,0 H 135.625 V 105.055 H 0 Z"
|
||||
id="path428" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg fill="#000000" height="50px" width="50px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 330 330" xml:space="preserve">
|
||||
<path id="XMLID_224_" d="M325.606,229.393l-150.004-150C172.79,76.58,168.974,75,164.996,75c-3.979,0-7.794,1.581-10.607,4.394
|
||||
l-149.996,150c-5.858,5.858-5.858,15.355,0,21.213c5.857,5.857,15.355,5.858,21.213,0l139.39-139.393l139.397,139.393
|
||||
C307.322,253.536,311.161,255,315,255c3.839,0,7.678-1.464,10.607-4.394C331.464,244.748,331.464,235.251,325.606,229.393z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 692 B |
@@ -0,0 +1,104 @@
|
||||
|
||||
function setLogoContainerSize() {
|
||||
let svgContainer = document.querySelector('#logo-animated');
|
||||
let svgElement = document.querySelector('#logo-animated svg');
|
||||
svgContainer.style.height = `${svgElement.clientHeight}px`;
|
||||
}
|
||||
setLogoContainerSize();
|
||||
window.addEventListener('resize', setLogoContainerSize);
|
||||
console.log('animated');
|
||||
|
||||
let chemins = document.querySelectorAll('#logo-animated svg path');
|
||||
for (let chemin of chemins) {
|
||||
let length = chemin.getTotalLength();
|
||||
chemin.style.strokeDasharray = length;
|
||||
chemin.style.strokeDashoffset = length;
|
||||
}
|
||||
|
||||
|
||||
let consultationCouleur = document.querySelector('#consultation-couleur');
|
||||
let consultationNoir = document.querySelector('#consultation-noir');
|
||||
|
||||
let quartierCouleur = document.querySelector('#quartier-couleur');
|
||||
let quartierNoir = document.querySelector('#quartier-noir');
|
||||
|
||||
let consultationTranslate = 200;
|
||||
let quartierTranslate = -200;
|
||||
|
||||
function startCountdown() {
|
||||
let startTime;
|
||||
let animationTime = 1800;
|
||||
|
||||
function animate(timestamp) {
|
||||
if (!startTime) startTime = timestamp;
|
||||
const elapsedTime = timestamp - startTime;
|
||||
|
||||
if (elapsedTime <= animationTime) {
|
||||
const animationPercent = elapsedTime / animationTime;
|
||||
animateLogo(animationPercent);
|
||||
requestAnimationFrame(animate);
|
||||
} else {
|
||||
animateLogo(1);
|
||||
}
|
||||
|
||||
}
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
// function animateLogo(animationPercent) {
|
||||
// for (let i = 0; i < chemins.length; i++) {
|
||||
// let draw = chemins[i].getTotalLength() * animationPercent;
|
||||
// chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw;
|
||||
// chemins[i].style.opacity = Math.min(animationPercent * ((chemins.length - 1) / i), 1);
|
||||
// }
|
||||
// let animationPercentCouleur = Math.min(animationPercent / 0.5, 1);
|
||||
// let animationPercentNoir = Math.max((animationPercent - 0.4) / 0.6, 0);
|
||||
|
||||
// consultationCouleur.style.opacity = animationPercentCouleur;
|
||||
// consultationNoir.style.opacity = animationPercentNoir;
|
||||
// quartierCouleur.style.opacity = animationPercentCouleur;
|
||||
// quartierNoir.style.opacity = animationPercentNoir;
|
||||
|
||||
// consultationNoir.style.transform = `translate(${consultationTranslate * (animationPercent - 1)}px, ${consultationTranslate * (animationPercent - 1)}px)`;
|
||||
|
||||
// quartierNoir.style.transform = `translate(${quartierTranslate * (animationPercent - 1)}px, ${quartierTranslate * (animationPercent - 1)}px)`;
|
||||
// }
|
||||
|
||||
function animateLogo(animationPercent) {
|
||||
// Calcul du pourcentage de l'animation principale
|
||||
let mainAnimationPercent = animationPercent;
|
||||
|
||||
// Décalage pour l'animation des éléments noir
|
||||
let noirDelay = 0.7; // Exemple de décalage de 30% de l'animation principale
|
||||
let noirQuartierDelay = 0.1; // Exemple de décalage de 30% de l'animation principale
|
||||
|
||||
// Calcul du pourcentage de l'animation pour les éléments noir avec décalage
|
||||
let animationPercentNoir = Math.max((mainAnimationPercent - noirDelay) / (1 - noirDelay), 0);
|
||||
|
||||
for (let i = 0; i < chemins.length; i++) {
|
||||
let draw = chemins[i].getTotalLength() * mainAnimationPercent;
|
||||
chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw;
|
||||
chemins[i].style.opacity = Math.min(mainAnimationPercent * ((chemins.length - 1) / i), 1);
|
||||
}
|
||||
let animationPercentCouleur = Math.min(mainAnimationPercent / 0.5, 1);
|
||||
|
||||
let animationPercentNoirQuartier = Math.max((mainAnimationPercent - noirQuartierDelay) / (1 - noirQuartierDelay), 0);
|
||||
|
||||
for (let i = 0; i < chemins.length; i++) {
|
||||
let draw = chemins[i].getTotalLength() * mainAnimationPercent;
|
||||
chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw;
|
||||
chemins[i].style.opacity = Math.min(mainAnimationPercent * ((chemins.length - 1) / i), 1);
|
||||
}
|
||||
consultationCouleur.style.opacity = animationPercentCouleur;
|
||||
consultationNoir.style.opacity = animationPercentNoir;
|
||||
quartierCouleur.style.opacity = animationPercentCouleur;
|
||||
quartierNoir.style.opacity = animationPercentNoirQuartier;
|
||||
|
||||
// Décalage des éléments noir dans le temps
|
||||
consultationNoir.style.transform = `translate(${consultationTranslate * (mainAnimationPercent - 1)}px, ${consultationTranslate * (mainAnimationPercent - 1)}px)`;
|
||||
quartierNoir.style.transform = `translate(${quartierTranslate * (mainAnimationPercent - 1)}px, ${quartierTranslate * (mainAnimationPercent - 1)}px)`;
|
||||
}
|
||||
|
||||
|
||||
|
||||
window.addEventListener('load', startCountdown);
|
||||
@@ -0,0 +1,134 @@
|
||||
/**
|
||||
* @file
|
||||
* quartiers_de_demain behaviors.
|
||||
*/
|
||||
(function (Drupal) {
|
||||
|
||||
'use strict';
|
||||
|
||||
Drupal.behaviors.quartiers_de_demain = {
|
||||
attach: function (context, settings) {
|
||||
console.log('It works!');
|
||||
}
|
||||
};
|
||||
} (Drupal));
|
||||
|
||||
|
||||
jQuery(document).ready(function($){
|
||||
|
||||
$('.open-block').click(function(){
|
||||
$(this).toggleClass('opened');
|
||||
|
||||
$('.header_nav_container').toggleClass('display-nav-opened');
|
||||
|
||||
if(mobile == true){
|
||||
$("body").css("overflow","hidden");
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Hide the header_nav_container when a link inside it is clicked
|
||||
$('.header_nav_container li').click(function() {
|
||||
$('.header_nav_container').fadeOut();
|
||||
});
|
||||
|
||||
|
||||
|
||||
//////////// agrandissement du shema
|
||||
|
||||
$('#paragraph-id--9 img').click(function() {
|
||||
$(this).toggleClass('zoom_in');
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
// /////////////////
|
||||
//// ancre dans texte au click parragraphe correspondant arrive en dessous du header
|
||||
|
||||
|
||||
(function($, window) {
|
||||
var adjustAnchor = function() {
|
||||
var $anchor = $('.sidebar_first_container'),
|
||||
fixedElementHeight = 350;
|
||||
if ($anchor.length > 0) {
|
||||
$('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);
|
||||
}
|
||||
};
|
||||
|
||||
$(window).on('hashchange', function() {
|
||||
adjustAnchor();
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function scrollReaveal(){
|
||||
|
||||
const nodes = {
|
||||
logo : document.querySelectorAll('#logo-animated-container'),
|
||||
chapeau : document.querySelectorAll('.field_body'),
|
||||
paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),
|
||||
// article : document.querySelectorAll('.home #txt_present, article#presentation'),
|
||||
// blocs : document.querySelectorAll('#block-colloque2024-views-block-slide-programme-block-1, #block-colloque2024-views-block-dernieres-publications-block-1, .__ressources > *'),
|
||||
// p : document.querySelectorAll('article#presentation p, .letter-sort, .participant_full .content > *'),
|
||||
// programme: document.querySelectorAll('.programme.container'),
|
||||
// thumbnails : document.querySelectorAll('.programme .thumbnails, .views.__publications .thumbnails, .les_intervenants .thumbnails_participants'),
|
||||
// node_moment : document.querySelectorAll('#moments .__title, #moments .__wrapper, #moments .__wrap_content .__content > *, #moments .__wrap_side')
|
||||
|
||||
}
|
||||
|
||||
const showUp = {
|
||||
origin: 'bottom',
|
||||
delay: 100,
|
||||
duration: 1000,
|
||||
distance: '50px',
|
||||
easing: 'cubic-bezier(0.5, 0, 0, 1)'
|
||||
}
|
||||
|
||||
const Show = {
|
||||
delay: 100,
|
||||
duration: 600,
|
||||
easing: 'cubic-bezier(0.5, 0, 0, 1)'
|
||||
}
|
||||
|
||||
// const showleft = {
|
||||
// origin: 'left',
|
||||
// delay: 100,
|
||||
// duration: 600,
|
||||
// distance: '50px',
|
||||
// easing: 'cubic-bezier(0.5, 0, 0, 1)'
|
||||
// }
|
||||
|
||||
console.log(nodes);
|
||||
|
||||
ScrollReveal().reveal(nodes.logo, Show);
|
||||
// ScrollReveal().reveal(nodes.hero_participant, showleft);
|
||||
ScrollReveal().reveal(nodes.chapeau, showUp);
|
||||
ScrollReveal().reveal(nodes.paragraph, showUp);
|
||||
// ScrollReveal().reveal(nodes.p, showUp);
|
||||
// ScrollReveal().reveal(nodes.programme, showUp);
|
||||
// ScrollReveal().reveal(nodes.thumbnails, showUp);
|
||||
// ScrollReveal().reveal(nodes.views, showUp);
|
||||
// ScrollReveal().reveal(nodes.title_participant, Show);
|
||||
// ScrollReveal().reveal(nodes.node_moment, showUp);
|
||||
}
|
||||
|
||||
|
||||
$( document ).ready(function() {
|
||||
// currenturl();
|
||||
scrollReaveal();
|
||||
// notes();
|
||||
// slide();
|
||||
// burger();
|
||||
// replaceAny();
|
||||
// select_custom();
|
||||
// remove_isactive();
|
||||
// hidden_morelinkMoment();
|
||||
// pagination();
|
||||
// Light();
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,108 @@
|
||||
|
||||
/*marianne*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Marianne';
|
||||
src: url('../fonts/Marianne/Marianne-Thin.woff2') format('woff2'),
|
||||
url('../fonts/Marianne/Marianne-Thin.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Marianne';
|
||||
src: url('../fonts/Marianne/Marianne-Thin_Italic.woff2') format('woff2'),
|
||||
url('../fonts/Marianne/Marianne-Thin_Italic.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Marianne';
|
||||
src: url('../fonts/Marianne/Marianne-Light.woff2') format('woff2'),
|
||||
url('../fonts/Marianne/Marianne-Light.woff') format('woff');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Marianne';
|
||||
src: url('../fonts/Marianne/Marianne-Light_Italic.woff2') format('woff2'),
|
||||
url('../fonts/Marianne/Marianne-Light_Italic.woff') format('woff');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Marianne';
|
||||
src: url('../fonts/Marianne/Marianne-Regular.woff2') format('woff2'),
|
||||
url('../fonts/Marianne/Marianne-Regular.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Marianne';
|
||||
src: url('../fonts/Marianne/Marianne-Regular_Italic.woff2') format('woff2'),
|
||||
url('../fonts/Marianne/Marianne-Regular_Italic.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Marianne';
|
||||
src: url('../fonts/Marianne/Marianne-Medium.woff2') format('woff2'),
|
||||
url('../fonts/Marianne/Marianne-Medium.woff') format('woff');
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Marianne';
|
||||
src: url('../fonts/Marianne/Marianne-Medium_Italic.woff2') format('woff2'),
|
||||
url('../fonts/Marianne/Marianne-Medium_Italic.woff') format('woff');
|
||||
font-weight: 800;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Marianne';
|
||||
src: url('../fonts/Marianne/Marianne-Bold.woff2') format('woff2'),
|
||||
url('../fonts/Marianne/Marianne-Bold.woff') format('woff');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Marianne';
|
||||
src: url('../fonts/Marianne/Marianne-Bold_Italic.woff2') format('woff2'),
|
||||
url('../fonts/Marianne/Marianne-Bold_Italic.woff') format('woff');
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Marianne';
|
||||
src: url('../fonts/Marianne/Marianne-ExtraBold.woff2') format('woff2'),
|
||||
url('../fonts/Marianne/Marianne-ExtraBold.woff') format('woff');
|
||||
font-weight: 1000;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Marianne';
|
||||
src: url('../fonts/Marianne/Marianne-ExtraBold_Italic.woff2') format('woff2'),
|
||||
url('../fonts/Marianne/Marianne-ExtraBold_Italic.woff') format('woff');
|
||||
font-weight: 1000;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/*Font Awesome*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome';
|
||||
src: url('../fonts/Font Awesome/fontawesome-webfont.woff2') format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
|
||||
$header-height : 125px;
|
||||
$header-height-pad : 110px;
|
||||
$header-height-small : 70px;
|
||||
$header-height-ultrasmall : 50px;
|
||||
$width-menu-slidedown : 550px;
|
||||
|
||||
.layout-container {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
background-color: $background-home;
|
||||
font-family: $font-family-default;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: $font-medium;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
header{
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
footer{
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
main{
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
}
|
||||
.content_container{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.layout-content{
|
||||
grid-column: 1 / span 12;
|
||||
padding-top: $header-height;
|
||||
@media(max-width: 500px){
|
||||
padding-top: $header-height-ultrasmall;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
|
||||
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
|
||||
// html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
|
||||
|
||||
ul{
|
||||
list-style-type: none;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
:link{
|
||||
color: black;
|
||||
}
|
||||
|
||||
:visited{
|
||||
color: black;
|
||||
}
|
||||
|
||||
html.js body{
|
||||
margin: 0 !important;
|
||||
}
|
||||
html.js body div.dialog-off-canvas-main-canvas div.layout-container{
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
svg.mailto{
|
||||
display: none;
|
||||
}
|
||||
svg.ext{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,897 @@
|
||||
// Foundation for Sites Settings
|
||||
// -----------------------------
|
||||
//
|
||||
// Table of Contents:
|
||||
//
|
||||
// 1. Global
|
||||
// 2. Breakpoints
|
||||
// 3. The Grid
|
||||
// 4. Base Typography
|
||||
// 5. Typography Helpers
|
||||
// 6. Abide
|
||||
// 7. Accordion
|
||||
// 8. Accordion Menu
|
||||
// 9. Badge
|
||||
// 10. Breadcrumbs
|
||||
// 11. Button
|
||||
// 12. Button Group
|
||||
// 13. Callout
|
||||
// 14. Card
|
||||
// 15. Close Button
|
||||
// 16. Drilldown
|
||||
// 17. Dropdown
|
||||
// 18. Dropdown Menu
|
||||
// 19. Flexbox Utilities
|
||||
// 20. Forms
|
||||
// 21. Label
|
||||
// 22. Media Object
|
||||
// 23. Menu
|
||||
// 24. Meter
|
||||
// 25. Off-canvas
|
||||
// 26. Orbit
|
||||
// 27. Pagination
|
||||
// 28. Progress Bar
|
||||
// 29. Prototype Arrow
|
||||
// 30. Prototype Border-Box
|
||||
// 31. Prototype Border-None
|
||||
// 32. Prototype Bordered
|
||||
// 33. Prototype Display
|
||||
// 34. Prototype Font-Styling
|
||||
// 35. Prototype List-Style-Type
|
||||
// 36. Prototype Overflow
|
||||
// 37. Prototype Position
|
||||
// 38. Prototype Rounded
|
||||
// 39. Prototype Separator
|
||||
// 40. Prototype Shadow
|
||||
// 41. Prototype Sizing
|
||||
// 42. Prototype Spacing
|
||||
// 43. Prototype Text-Decoration
|
||||
// 44. Prototype Text-Transformation
|
||||
// 45. Prototype Text-Utilities
|
||||
// 46. Responsive Embed
|
||||
// 47. Reveal
|
||||
// 48. Slider
|
||||
// 49. Switch
|
||||
// 50. Table
|
||||
// 51. Tabs
|
||||
// 52. Thumbnail
|
||||
// 53. Title Bar
|
||||
// 54. Tooltip
|
||||
// 55. Top Bar
|
||||
// 56. Xy Grid
|
||||
|
||||
@import 'util/util';
|
||||
|
||||
// 1. Global
|
||||
// ---------
|
||||
|
||||
$global-font-size: 100%;
|
||||
|
||||
$global-width: 100%; // old value : rem-calc(1200)
|
||||
|
||||
$global-lineheight: 1.5;
|
||||
$foundation-palette: (
|
||||
primary: #1779ba,
|
||||
secondary: #767676,
|
||||
success: #3adb76,
|
||||
warning: #ffae00,
|
||||
alert: #cc4b37,
|
||||
);
|
||||
$light-gray: #e6e6e6;
|
||||
$medium-gray: #cacaca;
|
||||
$dark-gray: #8a8a8a;
|
||||
$black: #0a0a0a;
|
||||
$white: #fefefe;
|
||||
$body-background: $white;
|
||||
$body-font-color: $black;
|
||||
$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
|
||||
$body-antialiased: true;
|
||||
$global-margin: 1rem;
|
||||
$global-padding: 1rem;
|
||||
$global-position: 1rem;
|
||||
$global-weight-normal: normal;
|
||||
$global-weight-bold: bold;
|
||||
$global-radius: 0;
|
||||
$global-menu-padding: 0.7rem 1rem;
|
||||
$global-menu-nested-margin: 1rem;
|
||||
$global-text-direction: ltr;
|
||||
$global-flexbox: true;
|
||||
$global-prototype-breakpoints: false;
|
||||
$global-button-cursor: auto;
|
||||
$global-color-pick-contrast-tolerance: 0;
|
||||
$print-transparent-backgrounds: true;
|
||||
$print-hrefs: true;
|
||||
|
||||
@include add-foundation-colors;
|
||||
|
||||
// 2. Breakpoints
|
||||
// --------------
|
||||
|
||||
$breakpoints: (
|
||||
small: 0,
|
||||
medium: 640px,
|
||||
large: 1024px,
|
||||
xlarge: 1200px,
|
||||
xxlarge: 1440px,
|
||||
);
|
||||
$breakpoints-hidpi: (
|
||||
hidpi-1: 1,
|
||||
hidpi-1-5: 1.5,
|
||||
hidpi-2: 2,
|
||||
retina: 2,
|
||||
hidpi-3: 3
|
||||
);
|
||||
$print-breakpoint: large;
|
||||
$breakpoint-classes: (small medium large);
|
||||
|
||||
// 3. The Grid
|
||||
// -----------
|
||||
|
||||
$grid-row-width: $global-width;
|
||||
$grid-column-count: 12;
|
||||
$grid-column-gutter: (
|
||||
small: 20px,
|
||||
medium: 30px,
|
||||
);
|
||||
$grid-column-align-edge: true;
|
||||
$grid-column-alias: 'columns';
|
||||
$block-grid-max: 8;
|
||||
|
||||
// 4. Base Typography
|
||||
// ------------------
|
||||
|
||||
$header-font-family: $body-font-family;
|
||||
$header-font-weight: $global-weight-normal;
|
||||
$header-font-style: normal;
|
||||
$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
|
||||
$header-color: inherit;
|
||||
$header-lineheight: 1.4;
|
||||
$header-margin-bottom: 0.5rem;
|
||||
$header-styles: (
|
||||
small: (
|
||||
'h1': ('font-size': 24),
|
||||
'h2': ('font-size': 20),
|
||||
'h3': ('font-size': 19),
|
||||
'h4': ('font-size': 18),
|
||||
'h5': ('font-size': 17),
|
||||
'h6': ('font-size': 16),
|
||||
),
|
||||
medium: (
|
||||
'h1': ('font-size': 48),
|
||||
'h2': ('font-size': 40),
|
||||
'h3': ('font-size': 31),
|
||||
'h4': ('font-size': 25),
|
||||
'h5': ('font-size': 20),
|
||||
'h6': ('font-size': 16),
|
||||
),
|
||||
);
|
||||
$header-text-rendering: optimizeLegibility;
|
||||
$small-font-size: 80%;
|
||||
$header-small-font-color: $medium-gray;
|
||||
$paragraph-lineheight: 1.6;
|
||||
$paragraph-margin-bottom: 1rem;
|
||||
$paragraph-text-rendering: optimizeLegibility;
|
||||
$enable-code-inline: true;
|
||||
$anchor-color: $primary-color;
|
||||
$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
|
||||
$anchor-text-decoration: none;
|
||||
$anchor-text-decoration-hover: none;
|
||||
$hr-width: $global-width;
|
||||
$hr-border: 1px solid $medium-gray;
|
||||
$hr-margin: rem-calc(20) auto;
|
||||
$list-lineheight: $paragraph-lineheight;
|
||||
$list-margin-bottom: $paragraph-margin-bottom;
|
||||
$list-style-type: disc;
|
||||
$list-style-position: outside;
|
||||
$list-side-margin: 1.25rem;
|
||||
$list-nested-side-margin: 1.25rem;
|
||||
$defnlist-margin-bottom: 1rem;
|
||||
$defnlist-term-weight: $global-weight-bold;
|
||||
$defnlist-term-margin-bottom: 0.3rem;
|
||||
$blockquote-color: $dark-gray;
|
||||
$blockquote-padding: rem-calc(9 20 0 19);
|
||||
$blockquote-border: 1px solid $medium-gray;
|
||||
$enable-cite-block: true;
|
||||
$keystroke-font: $font-family-monospace;
|
||||
$keystroke-color: $black;
|
||||
$keystroke-background: $light-gray;
|
||||
$keystroke-padding: rem-calc(2 4 0);
|
||||
$keystroke-radius: $global-radius;
|
||||
$abbr-underline: 1px dotted $black;
|
||||
|
||||
// 5. Typography Helpers
|
||||
// ---------------------
|
||||
|
||||
$lead-font-size: $global-font-size * 1.25;
|
||||
$lead-lineheight: 1.6;
|
||||
$subheader-lineheight: 1.4;
|
||||
$subheader-color: $dark-gray;
|
||||
$subheader-font-weight: $global-weight-normal;
|
||||
$subheader-margin-top: 0.2rem;
|
||||
$subheader-margin-bottom: 0.5rem;
|
||||
$stat-font-size: 2.5rem;
|
||||
$cite-color: $dark-gray;
|
||||
$cite-font-size: rem-calc(13);
|
||||
$cite-pseudo-content: '\2014 \0020';
|
||||
$code-color: $black;
|
||||
$code-font-family: $font-family-monospace;
|
||||
$code-font-weight: $global-weight-normal;
|
||||
$code-background: $light-gray;
|
||||
$code-border: 1px solid $medium-gray;
|
||||
$code-padding: rem-calc(2 5 1);
|
||||
$code-block-padding: 1rem;
|
||||
$code-block-margin-bottom: 1.5rem;
|
||||
|
||||
// 6. Abide
|
||||
// --------
|
||||
|
||||
$abide-inputs: true;
|
||||
$abide-labels: true;
|
||||
$input-background-invalid: get-color(alert);
|
||||
$form-label-color-invalid: get-color(alert);
|
||||
$input-error-color: get-color(alert);
|
||||
$input-error-font-size: rem-calc(12);
|
||||
$input-error-font-weight: $global-weight-bold;
|
||||
|
||||
// 7. Accordion
|
||||
// ------------
|
||||
|
||||
$accordion-background: $white;
|
||||
$accordion-plusminus: true;
|
||||
$accordion-plus-content: '\002B';
|
||||
$accordion-minus-content: '\2013';
|
||||
$accordion-title-font-size: rem-calc(12);
|
||||
$accordion-item-color: $primary-color;
|
||||
$accordion-item-background-hover: $light-gray;
|
||||
$accordion-item-padding: 1.25rem 1rem;
|
||||
$accordion-content-background: $white;
|
||||
$accordion-content-border: 1px solid $light-gray;
|
||||
$accordion-content-color: $body-font-color;
|
||||
$accordion-content-padding: 1rem;
|
||||
|
||||
// 8. Accordion Menu
|
||||
// -----------------
|
||||
|
||||
$accordionmenu-padding: $global-menu-padding;
|
||||
$accordionmenu-nested-margin: $global-menu-nested-margin;
|
||||
$accordionmenu-submenu-padding: $accordionmenu-padding;
|
||||
$accordionmenu-arrows: true;
|
||||
$accordionmenu-arrow-color: $primary-color;
|
||||
$accordionmenu-item-background: null;
|
||||
$accordionmenu-border: null;
|
||||
$accordionmenu-submenu-toggle-background: null;
|
||||
$accordion-submenu-toggle-border: $accordionmenu-border;
|
||||
$accordionmenu-submenu-toggle-width: 40px;
|
||||
$accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width;
|
||||
$accordionmenu-arrow-size: 6px;
|
||||
|
||||
// 9. Badge
|
||||
// --------
|
||||
|
||||
$badge-background: $primary-color;
|
||||
$badge-color: $white;
|
||||
$badge-color-alt: $black;
|
||||
$badge-palette: $foundation-palette;
|
||||
$badge-padding: 0.3em;
|
||||
$badge-minwidth: 2.1em;
|
||||
$badge-font-size: 0.6rem;
|
||||
|
||||
// 10. Breadcrumbs
|
||||
// ---------------
|
||||
|
||||
$breadcrumbs-margin: 0 0 $global-margin 0;
|
||||
$breadcrumbs-item-font-size: rem-calc(11);
|
||||
$breadcrumbs-item-color: $primary-color;
|
||||
$breadcrumbs-item-color-current: $black;
|
||||
$breadcrumbs-item-color-disabled: $medium-gray;
|
||||
$breadcrumbs-item-margin: 0.75rem;
|
||||
$breadcrumbs-item-uppercase: true;
|
||||
$breadcrumbs-item-separator: true;
|
||||
$breadcrumbs-item-separator-item: '/';
|
||||
$breadcrumbs-item-separator-item-rtl: '\\';
|
||||
$breadcrumbs-item-separator-color: $medium-gray;
|
||||
|
||||
// 11. Button
|
||||
// ----------
|
||||
|
||||
$button-font-family: inherit;
|
||||
$button-font-weight: null;
|
||||
$button-padding: 0.85em 1em;
|
||||
$button-margin: 0 0 $global-margin 0;
|
||||
$button-fill: solid;
|
||||
$button-background: $primary-color;
|
||||
$button-background-hover: scale-color($button-background, $lightness: -15%);
|
||||
$button-color: $white;
|
||||
$button-color-alt: $black;
|
||||
$button-radius: $global-radius;
|
||||
$button-border: 1px solid transparent;
|
||||
$button-hollow-border-width: 1px;
|
||||
$button-sizes: (
|
||||
tiny: 0.6rem,
|
||||
small: 0.75rem,
|
||||
default: 0.9rem,
|
||||
large: 1.25rem,
|
||||
);
|
||||
$button-palette: $foundation-palette;
|
||||
$button-opacity-disabled: 0.25;
|
||||
$button-background-hover-lightness: -20%;
|
||||
$button-hollow-hover-lightness: -50%;
|
||||
$button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
|
||||
$button-responsive-expanded: false;
|
||||
|
||||
// 12. Button Group
|
||||
// ----------------
|
||||
|
||||
$buttongroup-margin: 1rem;
|
||||
$buttongroup-spacing: 1px;
|
||||
$buttongroup-child-selector: '.button';
|
||||
$buttongroup-expand-max: 6;
|
||||
$buttongroup-radius-on-each: true;
|
||||
|
||||
// 13. Callout
|
||||
// -----------
|
||||
|
||||
$callout-background: $white;
|
||||
$callout-background-fade: 85%;
|
||||
$callout-border: 1px solid rgba($black, 0.25);
|
||||
$callout-margin: 0 0 1rem 0;
|
||||
$callout-sizes: (
|
||||
small: 0.5rem,
|
||||
default: 1rem,
|
||||
large: 3rem,
|
||||
);
|
||||
$callout-font-color: $body-font-color;
|
||||
$callout-font-color-alt: $body-background;
|
||||
$callout-radius: $global-radius;
|
||||
$callout-link-tint: 30%;
|
||||
|
||||
// 14. Card
|
||||
// --------
|
||||
|
||||
$card-background: $white;
|
||||
$card-font-color: $body-font-color;
|
||||
$card-divider-background: $light-gray;
|
||||
$card-border: 1px solid $light-gray;
|
||||
$card-shadow: none;
|
||||
$card-border-radius: $global-radius;
|
||||
$card-padding: $global-padding;
|
||||
$card-margin-bottom: $global-margin;
|
||||
|
||||
// 15. Close Button
|
||||
// ----------------
|
||||
|
||||
$closebutton-position: right top;
|
||||
$closebutton-z-index: 10;
|
||||
$closebutton-default-size: medium;
|
||||
$closebutton-offset-horizontal: (
|
||||
small: 0.66rem,
|
||||
medium: 1rem,
|
||||
);
|
||||
$closebutton-offset-vertical: (
|
||||
small: 0.33em,
|
||||
medium: 0.5rem,
|
||||
);
|
||||
$closebutton-size: (
|
||||
small: 1.5em,
|
||||
medium: 2em,
|
||||
);
|
||||
$closebutton-lineheight: 1;
|
||||
$closebutton-color: $dark-gray;
|
||||
$closebutton-color-hover: $black;
|
||||
|
||||
// 16. Drilldown
|
||||
// -------------
|
||||
|
||||
$drilldown-transition: transform 0.15s linear;
|
||||
$drilldown-arrows: true;
|
||||
$drilldown-padding: $global-menu-padding;
|
||||
$drilldown-nested-margin: 0;
|
||||
$drilldown-background: $white;
|
||||
$drilldown-submenu-padding: $drilldown-padding;
|
||||
$drilldown-submenu-background: $white;
|
||||
$drilldown-arrow-color: $primary-color;
|
||||
$drilldown-arrow-size: 6px;
|
||||
|
||||
// 17. Dropdown
|
||||
// ------------
|
||||
|
||||
$dropdown-padding: 1rem;
|
||||
$dropdown-background: $body-background;
|
||||
$dropdown-border: 1px solid $medium-gray;
|
||||
$dropdown-font-size: 1rem;
|
||||
$dropdown-width: 300px;
|
||||
$dropdown-radius: $global-radius;
|
||||
$dropdown-sizes: (
|
||||
tiny: 100px,
|
||||
small: 200px,
|
||||
large: 400px,
|
||||
);
|
||||
|
||||
// 18. Dropdown Menu
|
||||
// -----------------
|
||||
|
||||
$dropdownmenu-arrows: true;
|
||||
$dropdownmenu-arrow-color: $anchor-color;
|
||||
$dropdownmenu-arrow-size: 6px;
|
||||
$dropdownmenu-arrow-padding: 1.5rem;
|
||||
$dropdownmenu-min-width: 200px;
|
||||
$dropdownmenu-background: null;
|
||||
$dropdownmenu-submenu-background: $white;
|
||||
$dropdownmenu-padding: $global-menu-padding;
|
||||
$dropdownmenu-nested-margin: 0;
|
||||
$dropdownmenu-submenu-padding: $dropdownmenu-padding;
|
||||
$dropdownmenu-border: 1px solid $medium-gray;
|
||||
$dropdown-menu-item-color-active: get-color(primary);
|
||||
$dropdown-menu-item-background-active: transparent;
|
||||
|
||||
// 19. Flexbox Utilities
|
||||
// ---------------------
|
||||
|
||||
$flex-source-ordering-count: 6;
|
||||
$flexbox-responsive-breakpoints: true;
|
||||
|
||||
// 20. Forms
|
||||
// ---------
|
||||
|
||||
$fieldset-border: 1px solid $medium-gray;
|
||||
$fieldset-padding: rem-calc(20);
|
||||
$fieldset-margin: rem-calc(18 0);
|
||||
$legend-padding: rem-calc(0 3);
|
||||
$form-spacing: rem-calc(16);
|
||||
$helptext-color: $black;
|
||||
$helptext-font-size: rem-calc(13);
|
||||
$helptext-font-style: italic;
|
||||
$input-prefix-color: $black;
|
||||
$input-prefix-background: $light-gray;
|
||||
$input-prefix-border: 1px solid $medium-gray;
|
||||
$input-prefix-padding: 1rem;
|
||||
$form-label-color: $black;
|
||||
$form-label-font-size: rem-calc(14);
|
||||
$form-label-font-weight: $global-weight-normal;
|
||||
$form-label-line-height: 1.8;
|
||||
$select-background: $white;
|
||||
$select-triangle-color: $dark-gray;
|
||||
$select-radius: $global-radius;
|
||||
$input-color: $black;
|
||||
$input-placeholder-color: $medium-gray;
|
||||
$input-font-family: inherit;
|
||||
$input-font-size: rem-calc(16);
|
||||
$input-font-weight: $global-weight-normal;
|
||||
$input-line-height: $global-lineheight;
|
||||
$input-background: $white;
|
||||
$input-background-focus: $white;
|
||||
$input-background-disabled: $light-gray;
|
||||
$input-border: 1px solid $medium-gray;
|
||||
$input-border-focus: 1px solid $dark-gray;
|
||||
$input-padding: $form-spacing * 0.5;
|
||||
$input-shadow: inset 0 1px 2px rgba($black, 0.1);
|
||||
$input-shadow-focus: 0 0 5px $medium-gray;
|
||||
$input-cursor-disabled: not-allowed;
|
||||
$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
|
||||
$input-number-spinners: true;
|
||||
$input-radius: $global-radius;
|
||||
$form-button-radius: $global-radius;
|
||||
|
||||
// 21. Label
|
||||
// ---------
|
||||
|
||||
$label-background: $primary-color;
|
||||
$label-color: $white;
|
||||
$label-color-alt: $black;
|
||||
$label-palette: $foundation-palette;
|
||||
$label-font-size: 0.8rem;
|
||||
$label-padding: 0.33333rem 0.5rem;
|
||||
$label-radius: $global-radius;
|
||||
|
||||
// 22. Media Object
|
||||
// ----------------
|
||||
|
||||
$mediaobject-margin-bottom: $global-margin;
|
||||
$mediaobject-section-padding: $global-padding;
|
||||
$mediaobject-image-width-stacked: 100%;
|
||||
|
||||
// 23. Menu
|
||||
// --------
|
||||
|
||||
$menu-margin: 0;
|
||||
$menu-nested-margin: $global-menu-nested-margin;
|
||||
$menu-items-padding: $global-menu-padding;
|
||||
$menu-simple-margin: 1rem;
|
||||
$menu-item-color-active: $white;
|
||||
$menu-item-color-alt-active: $black;
|
||||
$menu-item-background-active: get-color(primary);
|
||||
$menu-icon-spacing: 0.25rem;
|
||||
$menu-state-back-compat: true;
|
||||
$menu-centered-back-compat: true;
|
||||
$menu-icons-back-compat: true;
|
||||
|
||||
// 24. Meter
|
||||
// ---------
|
||||
|
||||
$meter-height: 1rem;
|
||||
$meter-radius: $global-radius;
|
||||
$meter-background: $medium-gray;
|
||||
$meter-fill-good: $success-color;
|
||||
$meter-fill-medium: $warning-color;
|
||||
$meter-fill-bad: $alert-color;
|
||||
|
||||
// 25. Off-canvas
|
||||
// --------------
|
||||
|
||||
$offcanvas-sizes: (
|
||||
small: 250px,
|
||||
);
|
||||
$offcanvas-vertical-sizes: (
|
||||
small: 250px,
|
||||
);
|
||||
$offcanvas-background: $light-gray;
|
||||
$offcanvas-shadow: 0 0 10px rgba($black, 0.7);
|
||||
$offcanvas-inner-shadow-size: 20px;
|
||||
$offcanvas-inner-shadow-color: rgba($black, 0.25);
|
||||
$offcanvas-overlay-zindex: 11;
|
||||
$offcanvas-push-zindex: 12;
|
||||
$offcanvas-overlap-zindex: 13;
|
||||
$offcanvas-reveal-zindex: 12;
|
||||
$offcanvas-transition-length: 0.5s;
|
||||
$offcanvas-transition-timing: ease;
|
||||
$offcanvas-fixed-reveal: true;
|
||||
$offcanvas-exit-background: rgba($white, 0.25);
|
||||
$maincontent-class: 'off-canvas-content';
|
||||
|
||||
// 26. Orbit
|
||||
// ---------
|
||||
|
||||
$orbit-bullet-background: $medium-gray;
|
||||
$orbit-bullet-background-active: $dark-gray;
|
||||
$orbit-bullet-diameter: 1.2rem;
|
||||
$orbit-bullet-margin: 0.1rem;
|
||||
$orbit-bullet-margin-top: 0.8rem;
|
||||
$orbit-bullet-margin-bottom: 0.8rem;
|
||||
$orbit-caption-background: rgba($black, 0.5);
|
||||
$orbit-caption-padding: 1rem;
|
||||
$orbit-control-background-hover: rgba($black, 0.5);
|
||||
$orbit-control-padding: 1rem;
|
||||
$orbit-control-zindex: 10;
|
||||
|
||||
// 27. Pagination
|
||||
// --------------
|
||||
|
||||
$pagination-font-size: rem-calc(14);
|
||||
$pagination-margin-bottom: $global-margin;
|
||||
$pagination-item-color: $black;
|
||||
$pagination-item-padding: rem-calc(3 10);
|
||||
$pagination-item-spacing: rem-calc(1);
|
||||
$pagination-radius: $global-radius;
|
||||
$pagination-item-background-hover: $light-gray;
|
||||
$pagination-item-background-current: $primary-color;
|
||||
$pagination-item-color-current: $white;
|
||||
$pagination-item-color-disabled: $medium-gray;
|
||||
$pagination-ellipsis-color: $black;
|
||||
$pagination-mobile-items: false;
|
||||
$pagination-mobile-current-item: false;
|
||||
$pagination-arrows: true;
|
||||
$pagination-arrow-previous: '\00AB';
|
||||
$pagination-arrow-next: '\00BB';
|
||||
|
||||
// 28. Progress Bar
|
||||
// ----------------
|
||||
|
||||
$progress-height: 1rem;
|
||||
$progress-background: $medium-gray;
|
||||
$progress-margin-bottom: $global-margin;
|
||||
$progress-meter-background: $primary-color;
|
||||
$progress-radius: $global-radius;
|
||||
|
||||
// 29. Prototype Arrow
|
||||
// -------------------
|
||||
|
||||
$prototype-arrow-directions: (
|
||||
down,
|
||||
up,
|
||||
right,
|
||||
left
|
||||
);
|
||||
$prototype-arrow-size: 0.4375rem;
|
||||
$prototype-arrow-color: $black;
|
||||
|
||||
// 30. Prototype Border-Box
|
||||
// ------------------------
|
||||
|
||||
$prototype-border-box-breakpoints: $global-prototype-breakpoints;
|
||||
|
||||
// 31. Prototype Border-None
|
||||
// -------------------------
|
||||
|
||||
$prototype-border-none-breakpoints: $global-prototype-breakpoints;
|
||||
|
||||
// 32. Prototype Bordered
|
||||
// ----------------------
|
||||
|
||||
$prototype-bordered-breakpoints: $global-prototype-breakpoints;
|
||||
$prototype-border-width: rem-calc(1);
|
||||
$prototype-border-type: solid;
|
||||
$prototype-border-color: $medium-gray;
|
||||
|
||||
// 33. Prototype Display
|
||||
// ---------------------
|
||||
|
||||
$prototype-display-breakpoints: $global-prototype-breakpoints;
|
||||
$prototype-display: (
|
||||
inline,
|
||||
inline-block,
|
||||
block,
|
||||
table,
|
||||
table-cell
|
||||
);
|
||||
|
||||
// 34. Prototype Font-Styling
|
||||
// --------------------------
|
||||
|
||||
$prototype-font-breakpoints: $global-prototype-breakpoints;
|
||||
$prototype-wide-letter-spacing: rem-calc(4);
|
||||
$prototype-font-normal: $global-weight-normal;
|
||||
$prototype-font-bold: $global-weight-bold;
|
||||
|
||||
// 35. Prototype List-Style-Type
|
||||
// -----------------------------
|
||||
|
||||
$prototype-list-breakpoints: $global-prototype-breakpoints;
|
||||
$prototype-style-type-unordered: (
|
||||
disc,
|
||||
circle,
|
||||
square
|
||||
);
|
||||
$prototype-style-type-ordered: (
|
||||
decimal,
|
||||
lower-alpha,
|
||||
lower-latin,
|
||||
lower-roman,
|
||||
upper-alpha,
|
||||
upper-latin,
|
||||
upper-roman
|
||||
);
|
||||
|
||||
// 36. Prototype Overflow
|
||||
// ----------------------
|
||||
|
||||
$prototype-overflow-breakpoints: $global-prototype-breakpoints;
|
||||
$prototype-overflow: (
|
||||
visible,
|
||||
hidden,
|
||||
scroll
|
||||
);
|
||||
|
||||
// 37. Prototype Position
|
||||
// ----------------------
|
||||
|
||||
$prototype-position-breakpoints: $global-prototype-breakpoints;
|
||||
$prototype-position: (
|
||||
static,
|
||||
relative,
|
||||
absolute,
|
||||
fixed
|
||||
);
|
||||
$prototype-position-z-index: 975;
|
||||
|
||||
// 38. Prototype Rounded
|
||||
// ---------------------
|
||||
|
||||
$prototype-rounded-breakpoints: $global-prototype-breakpoints;
|
||||
$prototype-border-radius: rem-calc(3);
|
||||
|
||||
// 39. Prototype Separator
|
||||
// -----------------------
|
||||
|
||||
$prototype-separator-breakpoints: $global-prototype-breakpoints;
|
||||
$prototype-separator-align: center;
|
||||
$prototype-separator-height: rem-calc(2);
|
||||
$prototype-separator-width: 3rem;
|
||||
$prototype-separator-background: $primary-color;
|
||||
$prototype-separator-margin-top: $global-margin;
|
||||
|
||||
// 40. Prototype Shadow
|
||||
// --------------------
|
||||
|
||||
$prototype-shadow-breakpoints: $global-prototype-breakpoints;
|
||||
$prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),
|
||||
0 2px 10px 0 rgba(0,0,0,.12);
|
||||
|
||||
// 41. Prototype Sizing
|
||||
// --------------------
|
||||
|
||||
$prototype-sizing-breakpoints: $global-prototype-breakpoints;
|
||||
$prototype-sizing: (
|
||||
width,
|
||||
height
|
||||
);
|
||||
$prototype-sizes: (
|
||||
25: 25%,
|
||||
50: 50%,
|
||||
75: 75%,
|
||||
100: 100%
|
||||
);
|
||||
|
||||
// 42. Prototype Spacing
|
||||
// ---------------------
|
||||
|
||||
$prototype-spacing-breakpoints: $global-prototype-breakpoints;
|
||||
$prototype-spacers-count: 3;
|
||||
|
||||
// 43. Prototype Text-Decoration
|
||||
// -----------------------------
|
||||
|
||||
$prototype-decoration-breakpoints: $global-prototype-breakpoints;
|
||||
$prototype-text-decoration: (
|
||||
overline,
|
||||
underline,
|
||||
line-through,
|
||||
);
|
||||
|
||||
// 44. Prototype Text-Transformation
|
||||
// ---------------------------------
|
||||
|
||||
$prototype-transformation-breakpoints: $global-prototype-breakpoints;
|
||||
$prototype-text-transformation: (
|
||||
lowercase,
|
||||
uppercase,
|
||||
capitalize
|
||||
);
|
||||
|
||||
// 45. Prototype Text-Utilities
|
||||
// ----------------------------
|
||||
|
||||
$prototype-utilities-breakpoints: $global-prototype-breakpoints;
|
||||
$prototype-text-overflow: ellipsis;
|
||||
|
||||
// 46. Responsive Embed
|
||||
// --------------------
|
||||
|
||||
$responsive-embed-margin-bottom: rem-calc(16);
|
||||
$responsive-embed-ratios: (
|
||||
default: 4 by 3,
|
||||
widescreen: 16 by 9,
|
||||
);
|
||||
|
||||
// 47. Reveal
|
||||
// ----------
|
||||
|
||||
$reveal-background: $white;
|
||||
$reveal-width: 600px;
|
||||
$reveal-max-width: $global-width;
|
||||
$reveal-padding: $global-padding;
|
||||
$reveal-border: 1px solid $medium-gray;
|
||||
$reveal-radius: $global-radius;
|
||||
$reveal-zindex: 1005;
|
||||
$reveal-overlay-background: rgba($black, 0.45);
|
||||
|
||||
// 48. Slider
|
||||
// ----------
|
||||
|
||||
$slider-width-vertical: 0.5rem;
|
||||
$slider-transition: all 0.2s ease-in-out;
|
||||
$slider-height: 0.5rem;
|
||||
$slider-background: $light-gray;
|
||||
$slider-fill-background: $medium-gray;
|
||||
$slider-handle-height: 1.4rem;
|
||||
$slider-handle-width: 1.4rem;
|
||||
$slider-handle-background: $primary-color;
|
||||
$slider-opacity-disabled: 0.25;
|
||||
$slider-radius: $global-radius;
|
||||
|
||||
// 49. Switch
|
||||
// ----------
|
||||
|
||||
$switch-background: $medium-gray;
|
||||
$switch-background-active: $primary-color;
|
||||
$switch-height: 2rem;
|
||||
$switch-height-tiny: 1.5rem;
|
||||
$switch-height-small: 1.75rem;
|
||||
$switch-height-large: 2.5rem;
|
||||
$switch-radius: $global-radius;
|
||||
$switch-margin: $global-margin;
|
||||
$switch-paddle-background: $white;
|
||||
$switch-paddle-offset: 0.25rem;
|
||||
$switch-paddle-radius: $global-radius;
|
||||
$switch-paddle-transition: all 0.25s ease-out;
|
||||
$switch-opacity-disabled: .5;
|
||||
$switch-cursor-disabled: not-allowed;
|
||||
|
||||
// 50. Table
|
||||
// ---------
|
||||
|
||||
$table-background: $white;
|
||||
$table-color-scale: 5%;
|
||||
$table-border: 1px solid smart-scale($table-background, $table-color-scale);
|
||||
$table-padding: rem-calc(8 10 10);
|
||||
$table-hover-scale: 2%;
|
||||
$table-row-hover: darken($table-background, $table-hover-scale);
|
||||
$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
|
||||
$table-is-striped: true;
|
||||
$table-striped-background: smart-scale($table-background, $table-color-scale);
|
||||
$table-stripe: even;
|
||||
$table-head-background: smart-scale($table-background, $table-color-scale * 0.5);
|
||||
$table-head-row-hover: darken($table-head-background, $table-hover-scale);
|
||||
$table-foot-background: smart-scale($table-background, $table-color-scale);
|
||||
$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
|
||||
$table-head-font-color: $body-font-color;
|
||||
$table-foot-font-color: $body-font-color;
|
||||
$show-header-for-stacked: false;
|
||||
$table-stack-breakpoint: medium;
|
||||
|
||||
// 51. Tabs
|
||||
// --------
|
||||
|
||||
$tab-margin: 0;
|
||||
$tab-background: $white;
|
||||
$tab-color: $primary-color;
|
||||
$tab-background-active: $light-gray;
|
||||
$tab-active-color: $primary-color;
|
||||
$tab-item-font-size: rem-calc(12);
|
||||
$tab-item-background-hover: $white;
|
||||
$tab-item-padding: 1.25rem 1.5rem;
|
||||
$tab-content-background: $white;
|
||||
$tab-content-border: $light-gray;
|
||||
$tab-content-color: $body-font-color;
|
||||
$tab-content-padding: 1rem;
|
||||
|
||||
// 52. Thumbnail
|
||||
// -------------
|
||||
|
||||
$thumbnail-border: 4px solid $white;
|
||||
$thumbnail-margin-bottom: $global-margin;
|
||||
$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
|
||||
$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
|
||||
$thumbnail-transition: box-shadow 200ms ease-out;
|
||||
$thumbnail-radius: $global-radius;
|
||||
|
||||
// 53. Title Bar
|
||||
// -------------
|
||||
|
||||
$titlebar-background: $black;
|
||||
$titlebar-color: $white;
|
||||
$titlebar-padding: 0.5rem;
|
||||
$titlebar-text-font-weight: bold;
|
||||
$titlebar-icon-color: $white;
|
||||
$titlebar-icon-color-hover: $medium-gray;
|
||||
$titlebar-icon-spacing: 0.25rem;
|
||||
|
||||
// 54. Tooltip
|
||||
// -----------
|
||||
|
||||
$has-tip-cursor: help;
|
||||
$has-tip-font-weight: $global-weight-bold;
|
||||
$has-tip-border-bottom: dotted 1px $dark-gray;
|
||||
$tooltip-background-color: $black;
|
||||
$tooltip-color: $white;
|
||||
$tooltip-padding: 0.75rem;
|
||||
$tooltip-max-width: 10rem;
|
||||
$tooltip-font-size: $small-font-size;
|
||||
$tooltip-pip-width: 0.75rem;
|
||||
$tooltip-pip-height: $tooltip-pip-width * 0.866;
|
||||
$tooltip-radius: $global-radius;
|
||||
|
||||
// 55. Top Bar
|
||||
// -----------
|
||||
|
||||
$topbar-padding: 0.5rem;
|
||||
$topbar-background: $light-gray;
|
||||
$topbar-submenu-background: $topbar-background;
|
||||
$topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
|
||||
$topbar-input-width: 200px;
|
||||
$topbar-unstack-breakpoint: medium;
|
||||
|
||||
// 56. Xy Grid
|
||||
// -----------
|
||||
|
||||
$xy-grid: true;
|
||||
$grid-container: $global-width;
|
||||
$grid-columns: 12;
|
||||
$grid-margin-gutters: (
|
||||
small: 20px,
|
||||
medium: 30px
|
||||
);
|
||||
$grid-padding-gutters: $grid-margin-gutters;
|
||||
$grid-container-padding: $grid-padding-gutters;
|
||||
$grid-container-max: $global-width;
|
||||
$xy-block-grid-max: 8;
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
|
||||
// // home
|
||||
|
||||
// %buttonwithborder {
|
||||
// text-transform: uppercase;
|
||||
// padding: 1rem;
|
||||
// border: solid black 1px;
|
||||
// margin-bottom: 1rem;
|
||||
// background-color: $white-button;
|
||||
// @media (max-width:891px) {
|
||||
// font-size: 1rem;
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
// // %hoveryellow{
|
||||
// // :hover{
|
||||
// // background-color: $yellow-puca;
|
||||
// // }
|
||||
// // }
|
||||
|
||||
|
||||
// .field--type-link {
|
||||
// @extend %buttonwithborder;
|
||||
// width: fit-content;
|
||||
|
||||
// }
|
||||
// .bouton{
|
||||
// background-color: $white-button !important;
|
||||
// border: none !important;
|
||||
// cursor: pointer;
|
||||
// }
|
||||
|
||||
|
||||
|
||||
// .field--type-file{
|
||||
// @extend %buttonwithborder;
|
||||
// }
|
||||
|
||||
// .links{
|
||||
// @extend %buttonwithborder;
|
||||
// }
|
||||
|
||||
|
||||
// .views-field-edit-node{
|
||||
// @extend %buttonwithborder;
|
||||
// width: fit-content;
|
||||
// margin-top: 1rem;
|
||||
// }
|
||||
|
||||
// .views-field-edit-user{
|
||||
// @extend %buttonwithborder;
|
||||
// width: fit-content;
|
||||
// margin-top: 1rem;
|
||||
// }
|
||||
|
||||
// .views-field-edit-user:hover{
|
||||
// background-color: $yellow-puca;
|
||||
// }
|
||||
|
||||
// #edit-unlock{
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
// #edit-submit:hover{
|
||||
// background-color: $yellow-puca;
|
||||
// }
|
||||
// .views-field-edit-node:hover{
|
||||
// background-color: $yellow-puca;
|
||||
// }
|
||||
|
||||
// .form-submit:hover{
|
||||
// background-color: $yellow-puca;
|
||||
|
||||
// }
|
||||
@@ -0,0 +1,14 @@
|
||||
|
||||
/* Colors used for quartiers_de_demain */
|
||||
|
||||
|
||||
|
||||
$background-home: rgb(255, 255, 255);
|
||||
$white-button: rgb(255, 255, 255);
|
||||
$white-header:rgb(255, 255, 255);
|
||||
$bleu_fond_header: rgb(232, 235, 244);
|
||||
$red_QDD: rgb(247, 0, 43);
|
||||
$blue_QDD: rgb(7, 50, 194);
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
@media (min-width: 48rem) {
|
||||
:root {
|
||||
font-size: calc(1rem + ((1vw - .48rem) * 1.389));
|
||||
/* .48rem = viewportWidthMinimum /100 */
|
||||
/* 1.389rem = 100 * fontSizeDifference / viewportWidthDifference */
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 120em) {
|
||||
:root {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,897 @@
|
||||
// // Foundation for Sites Settings
|
||||
// // -----------------------------
|
||||
// //
|
||||
// // Table of Contents:
|
||||
// //
|
||||
// // 1. Global
|
||||
// // 2. Breakpoints
|
||||
// // 3. The Grid
|
||||
// // 4. Base Typography
|
||||
// // 5. Typography Helpers
|
||||
// // 6. Abide
|
||||
// // 7. Accordion
|
||||
// // 8. Accordion Menu
|
||||
// // 9. Badge
|
||||
// // 10. Breadcrumbs
|
||||
// // 11. Button
|
||||
// // 12. Button Group
|
||||
// // 13. Callout
|
||||
// // 14. Card
|
||||
// // 15. Close Button
|
||||
// // 16. Drilldown
|
||||
// // 17. Dropdown
|
||||
// // 18. Dropdown Menu
|
||||
// // 19. Flexbox Utilities
|
||||
// // 20. Forms
|
||||
// // 21. Label
|
||||
// // 22. Media Object
|
||||
// // 23. Menu
|
||||
// // 24. Meter
|
||||
// // 25. Off-canvas
|
||||
// // 26. Orbit
|
||||
// // 27. Pagination
|
||||
// // 28. Progress Bar
|
||||
// // 29. Prototype Arrow
|
||||
// // 30. Prototype Border-Box
|
||||
// // 31. Prototype Border-None
|
||||
// // 32. Prototype Bordered
|
||||
// // 33. Prototype Display
|
||||
// // 34. Prototype Font-Styling
|
||||
// // 35. Prototype List-Style-Type
|
||||
// // 36. Prototype Overflow
|
||||
// // 37. Prototype Position
|
||||
// // 38. Prototype Rounded
|
||||
// // 39. Prototype Separator
|
||||
// // 40. Prototype Shadow
|
||||
// // 41. Prototype Sizing
|
||||
// // 42. Prototype Spacing
|
||||
// // 43. Prototype Text-Decoration
|
||||
// // 44. Prototype Text-Transformation
|
||||
// // 45. Prototype Text-Utilities
|
||||
// // 46. Responsive Embed
|
||||
// // 47. Reveal
|
||||
// // 48. Slider
|
||||
// // 49. Switch
|
||||
// // 50. Table
|
||||
// // 51. Tabs
|
||||
// // 52. Thumbnail
|
||||
// // 53. Title Bar
|
||||
// // 54. Tooltip
|
||||
// // 55. Top Bar
|
||||
// // 56. Xy Grid
|
||||
|
||||
// @import 'util/util';
|
||||
|
||||
// // 1. Global
|
||||
// // ---------
|
||||
|
||||
// $global-font-size: 100%;
|
||||
|
||||
// $global-width: 100%; // old value : rem-calc(1200)
|
||||
|
||||
// $global-lineheight: 1.5;
|
||||
// $foundation-palette: (
|
||||
// primary: #1779ba,
|
||||
// secondary: #767676,
|
||||
// success: #3adb76,
|
||||
// warning: #ffae00,
|
||||
// alert: #cc4b37,
|
||||
// );
|
||||
// $light-gray: #e6e6e6;
|
||||
// $medium-gray: #cacaca;
|
||||
// $dark-gray: #8a8a8a;
|
||||
// $black: #0a0a0a;
|
||||
// $white: #fefefe;
|
||||
// $body-background: $white;
|
||||
// $body-font-color: $black;
|
||||
// $body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
|
||||
// $body-antialiased: true;
|
||||
// $global-margin: 1rem;
|
||||
// $global-padding: 1rem;
|
||||
// $global-position: 1rem;
|
||||
// $global-weight-normal: normal;
|
||||
// $global-weight-bold: bold;
|
||||
// $global-radius: 0;
|
||||
// $global-menu-padding: 0.7rem 1rem;
|
||||
// $global-menu-nested-margin: 1rem;
|
||||
// $global-text-direction: ltr;
|
||||
// $global-flexbox: true;
|
||||
// $global-prototype-breakpoints: false;
|
||||
// $global-button-cursor: auto;
|
||||
// $global-color-pick-contrast-tolerance: 0;
|
||||
// $print-transparent-backgrounds: true;
|
||||
// $print-hrefs: true;
|
||||
|
||||
// @include add-foundation-colors;
|
||||
|
||||
// // 2. Breakpoints
|
||||
// // --------------
|
||||
|
||||
$breakpoints: (
|
||||
small: 0,
|
||||
medium: 640px,
|
||||
large: 1024px,
|
||||
xlarge: 1200px,
|
||||
xxlarge: 1440px,
|
||||
);
|
||||
$breakpoints-hidpi: (
|
||||
hidpi-1: 1,
|
||||
hidpi-1-5: 1.5,
|
||||
hidpi-2: 2,
|
||||
retina: 2,
|
||||
hidpi-3: 3
|
||||
);
|
||||
$print-breakpoint: large;
|
||||
$breakpoint-classes: (small medium large);
|
||||
|
||||
// // 3. The Grid
|
||||
// // -----------
|
||||
|
||||
// $grid-row-width: $global-width;
|
||||
// $grid-column-count: 12;
|
||||
// $grid-column-gutter: (
|
||||
// small: 20px,
|
||||
// medium: 30px,
|
||||
// );
|
||||
// $grid-column-align-edge: true;
|
||||
// $grid-column-alias: 'columns';
|
||||
// $block-grid-max: 8;
|
||||
|
||||
// // 4. Base Typography
|
||||
// // ------------------
|
||||
|
||||
// $header-font-family: $body-font-family;
|
||||
// $header-font-weight: $global-weight-normal;
|
||||
// $header-font-style: normal;
|
||||
// $font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
|
||||
// $header-color: inherit;
|
||||
// $header-lineheight: 1.4;
|
||||
// $header-margin-bottom: 0.5rem;
|
||||
// $header-styles: (
|
||||
// small: (
|
||||
// 'h1': ('font-size': 24),
|
||||
// 'h2': ('font-size': 20),
|
||||
// 'h3': ('font-size': 19),
|
||||
// 'h4': ('font-size': 18),
|
||||
// 'h5': ('font-size': 17),
|
||||
// 'h6': ('font-size': 16),
|
||||
// ),
|
||||
// medium: (
|
||||
// 'h1': ('font-size': 48),
|
||||
// 'h2': ('font-size': 40),
|
||||
// 'h3': ('font-size': 31),
|
||||
// 'h4': ('font-size': 25),
|
||||
// 'h5': ('font-size': 20),
|
||||
// 'h6': ('font-size': 16),
|
||||
// ),
|
||||
// );
|
||||
// $header-text-rendering: optimizeLegibility;
|
||||
// $small-font-size: 80%;
|
||||
// $header-small-font-color: $medium-gray;
|
||||
// $paragraph-lineheight: 1.6;
|
||||
// $paragraph-margin-bottom: 1rem;
|
||||
// $paragraph-text-rendering: optimizeLegibility;
|
||||
// $enable-code-inline: true;
|
||||
// $anchor-color: $primary-color;
|
||||
// $anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
|
||||
// $anchor-text-decoration: none;
|
||||
// $anchor-text-decoration-hover: none;
|
||||
// $hr-width: $global-width;
|
||||
// $hr-border: 1px solid $medium-gray;
|
||||
// $hr-margin: rem-calc(20) auto;
|
||||
// $list-lineheight: $paragraph-lineheight;
|
||||
// $list-margin-bottom: $paragraph-margin-bottom;
|
||||
// $list-style-type: disc;
|
||||
// $list-style-position: outside;
|
||||
// $list-side-margin: 1.25rem;
|
||||
// $list-nested-side-margin: 1.25rem;
|
||||
// $defnlist-margin-bottom: 1rem;
|
||||
// $defnlist-term-weight: $global-weight-bold;
|
||||
// $defnlist-term-margin-bottom: 0.3rem;
|
||||
// $blockquote-color: $dark-gray;
|
||||
// $blockquote-padding: rem-calc(9 20 0 19);
|
||||
// $blockquote-border: 1px solid $medium-gray;
|
||||
// $enable-cite-block: true;
|
||||
// $keystroke-font: $font-family-monospace;
|
||||
// $keystroke-color: $black;
|
||||
// $keystroke-background: $light-gray;
|
||||
// $keystroke-padding: rem-calc(2 4 0);
|
||||
// $keystroke-radius: $global-radius;
|
||||
// $abbr-underline: 1px dotted $black;
|
||||
|
||||
// // 5. Typography Helpers
|
||||
// // ---------------------
|
||||
|
||||
// $lead-font-size: $global-font-size * 1.25;
|
||||
// $lead-lineheight: 1.6;
|
||||
// $subheader-lineheight: 1.4;
|
||||
// $subheader-color: $dark-gray;
|
||||
// $subheader-font-weight: $global-weight-normal;
|
||||
// $subheader-margin-top: 0.2rem;
|
||||
// $subheader-margin-bottom: 0.5rem;
|
||||
// $stat-font-size: 2.5rem;
|
||||
// $cite-color: $dark-gray;
|
||||
// $cite-font-size: rem-calc(13);
|
||||
// $cite-pseudo-content: '\2014 \0020';
|
||||
// $code-color: $black;
|
||||
// $code-font-family: $font-family-monospace;
|
||||
// $code-font-weight: $global-weight-normal;
|
||||
// $code-background: $light-gray;
|
||||
// $code-border: 1px solid $medium-gray;
|
||||
// $code-padding: rem-calc(2 5 1);
|
||||
// $code-block-padding: 1rem;
|
||||
// $code-block-margin-bottom: 1.5rem;
|
||||
|
||||
// // 6. Abide
|
||||
// // --------
|
||||
|
||||
// $abide-inputs: true;
|
||||
// $abide-labels: true;
|
||||
// $input-background-invalid: get-color(alert);
|
||||
// $form-label-color-invalid: get-color(alert);
|
||||
// $input-error-color: get-color(alert);
|
||||
// $input-error-font-size: rem-calc(12);
|
||||
// $input-error-font-weight: $global-weight-bold;
|
||||
|
||||
// // 7. Accordion
|
||||
// // ------------
|
||||
|
||||
// $accordion-background: $white;
|
||||
// $accordion-plusminus: true;
|
||||
// $accordion-plus-content: '\002B';
|
||||
// $accordion-minus-content: '\2013';
|
||||
// $accordion-title-font-size: rem-calc(12);
|
||||
// $accordion-item-color: $primary-color;
|
||||
// $accordion-item-background-hover: $light-gray;
|
||||
// $accordion-item-padding: 1.25rem 1rem;
|
||||
// $accordion-content-background: $white;
|
||||
// $accordion-content-border: 1px solid $light-gray;
|
||||
// $accordion-content-color: $body-font-color;
|
||||
// $accordion-content-padding: 1rem;
|
||||
|
||||
// // 8. Accordion Menu
|
||||
// // -----------------
|
||||
|
||||
// $accordionmenu-padding: $global-menu-padding;
|
||||
// $accordionmenu-nested-margin: $global-menu-nested-margin;
|
||||
// $accordionmenu-submenu-padding: $accordionmenu-padding;
|
||||
// $accordionmenu-arrows: true;
|
||||
// $accordionmenu-arrow-color: $primary-color;
|
||||
// $accordionmenu-item-background: null;
|
||||
// $accordionmenu-border: null;
|
||||
// $accordionmenu-submenu-toggle-background: null;
|
||||
// $accordion-submenu-toggle-border: $accordionmenu-border;
|
||||
// $accordionmenu-submenu-toggle-width: 40px;
|
||||
// $accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width;
|
||||
// $accordionmenu-arrow-size: 6px;
|
||||
|
||||
// // 9. Badge
|
||||
// // --------
|
||||
|
||||
// $badge-background: $primary-color;
|
||||
// $badge-color: $white;
|
||||
// $badge-color-alt: $black;
|
||||
// $badge-palette: $foundation-palette;
|
||||
// $badge-padding: 0.3em;
|
||||
// $badge-minwidth: 2.1em;
|
||||
// $badge-font-size: 0.6rem;
|
||||
|
||||
// // 10. Breadcrumbs
|
||||
// // ---------------
|
||||
|
||||
// $breadcrumbs-margin: 0 0 $global-margin 0;
|
||||
// $breadcrumbs-item-font-size: rem-calc(11);
|
||||
// $breadcrumbs-item-color: $primary-color;
|
||||
// $breadcrumbs-item-color-current: $black;
|
||||
// $breadcrumbs-item-color-disabled: $medium-gray;
|
||||
// $breadcrumbs-item-margin: 0.75rem;
|
||||
// $breadcrumbs-item-uppercase: true;
|
||||
// $breadcrumbs-item-separator: true;
|
||||
// $breadcrumbs-item-separator-item: '/';
|
||||
// $breadcrumbs-item-separator-item-rtl: '\\';
|
||||
// $breadcrumbs-item-separator-color: $medium-gray;
|
||||
|
||||
// // 11. Button
|
||||
// // ----------
|
||||
|
||||
// $button-font-family: inherit;
|
||||
// $button-font-weight: null;
|
||||
// $button-padding: 0.85em 1em;
|
||||
// $button-margin: 0 0 $global-margin 0;
|
||||
// $button-fill: solid;
|
||||
// $button-background: $primary-color;
|
||||
// $button-background-hover: scale-color($button-background, $lightness: -15%);
|
||||
// $button-color: $white;
|
||||
// $button-color-alt: $black;
|
||||
// $button-radius: $global-radius;
|
||||
// $button-border: 1px solid transparent;
|
||||
// $button-hollow-border-width: 1px;
|
||||
// $button-sizes: (
|
||||
// tiny: 0.6rem,
|
||||
// small: 0.75rem,
|
||||
// default: 0.9rem,
|
||||
// large: 1.25rem,
|
||||
// );
|
||||
// $button-palette: $foundation-palette;
|
||||
// $button-opacity-disabled: 0.25;
|
||||
// $button-background-hover-lightness: -20%;
|
||||
// $button-hollow-hover-lightness: -50%;
|
||||
// $button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
|
||||
// $button-responsive-expanded: false;
|
||||
|
||||
// // 12. Button Group
|
||||
// // ----------------
|
||||
|
||||
// $buttongroup-margin: 1rem;
|
||||
// $buttongroup-spacing: 1px;
|
||||
// $buttongroup-child-selector: '.button';
|
||||
// $buttongroup-expand-max: 6;
|
||||
// $buttongroup-radius-on-each: true;
|
||||
|
||||
// // 13. Callout
|
||||
// // -----------
|
||||
|
||||
// $callout-background: $white;
|
||||
// $callout-background-fade: 85%;
|
||||
// $callout-border: 1px solid rgba($black, 0.25);
|
||||
// $callout-margin: 0 0 1rem 0;
|
||||
// $callout-sizes: (
|
||||
// small: 0.5rem,
|
||||
// default: 1rem,
|
||||
// large: 3rem,
|
||||
// );
|
||||
// $callout-font-color: $body-font-color;
|
||||
// $callout-font-color-alt: $body-background;
|
||||
// $callout-radius: $global-radius;
|
||||
// $callout-link-tint: 30%;
|
||||
|
||||
// // 14. Card
|
||||
// // --------
|
||||
|
||||
// $card-background: $white;
|
||||
// $card-font-color: $body-font-color;
|
||||
// $card-divider-background: $light-gray;
|
||||
// $card-border: 1px solid $light-gray;
|
||||
// $card-shadow: none;
|
||||
// $card-border-radius: $global-radius;
|
||||
// $card-padding: $global-padding;
|
||||
// $card-margin-bottom: $global-margin;
|
||||
|
||||
// // 15. Close Button
|
||||
// // ----------------
|
||||
|
||||
// $closebutton-position: right top;
|
||||
// $closebutton-z-index: 10;
|
||||
// $closebutton-default-size: medium;
|
||||
// $closebutton-offset-horizontal: (
|
||||
// small: 0.66rem,
|
||||
// medium: 1rem,
|
||||
// );
|
||||
// $closebutton-offset-vertical: (
|
||||
// small: 0.33em,
|
||||
// medium: 0.5rem,
|
||||
// );
|
||||
// $closebutton-size: (
|
||||
// small: 1.5em,
|
||||
// medium: 2em,
|
||||
// );
|
||||
// $closebutton-lineheight: 1;
|
||||
// $closebutton-color: $dark-gray;
|
||||
// $closebutton-color-hover: $black;
|
||||
|
||||
// // 16. Drilldown
|
||||
// // -------------
|
||||
|
||||
// $drilldown-transition: transform 0.15s linear;
|
||||
// $drilldown-arrows: true;
|
||||
// $drilldown-padding: $global-menu-padding;
|
||||
// $drilldown-nested-margin: 0;
|
||||
// $drilldown-background: $white;
|
||||
// $drilldown-submenu-padding: $drilldown-padding;
|
||||
// $drilldown-submenu-background: $white;
|
||||
// $drilldown-arrow-color: $primary-color;
|
||||
// $drilldown-arrow-size: 6px;
|
||||
|
||||
// // 17. Dropdown
|
||||
// // ------------
|
||||
|
||||
// $dropdown-padding: 1rem;
|
||||
// $dropdown-background: $body-background;
|
||||
// $dropdown-border: 1px solid $medium-gray;
|
||||
// $dropdown-font-size: 1rem;
|
||||
// $dropdown-width: 300px;
|
||||
// $dropdown-radius: $global-radius;
|
||||
// $dropdown-sizes: (
|
||||
// tiny: 100px,
|
||||
// small: 200px,
|
||||
// large: 400px,
|
||||
// );
|
||||
|
||||
// // 18. Dropdown Menu
|
||||
// // -----------------
|
||||
|
||||
// $dropdownmenu-arrows: true;
|
||||
// $dropdownmenu-arrow-color: $anchor-color;
|
||||
// $dropdownmenu-arrow-size: 6px;
|
||||
// $dropdownmenu-arrow-padding: 1.5rem;
|
||||
// $dropdownmenu-min-width: 200px;
|
||||
// $dropdownmenu-background: null;
|
||||
// $dropdownmenu-submenu-background: $white;
|
||||
// $dropdownmenu-padding: $global-menu-padding;
|
||||
// $dropdownmenu-nested-margin: 0;
|
||||
// $dropdownmenu-submenu-padding: $dropdownmenu-padding;
|
||||
// $dropdownmenu-border: 1px solid $medium-gray;
|
||||
// $dropdown-menu-item-color-active: get-color(primary);
|
||||
// $dropdown-menu-item-background-active: transparent;
|
||||
|
||||
// // 19. Flexbox Utilities
|
||||
// // ---------------------
|
||||
|
||||
// $flex-source-ordering-count: 6;
|
||||
// $flexbox-responsive-breakpoints: true;
|
||||
|
||||
// // 20. Forms
|
||||
// // ---------
|
||||
|
||||
// $fieldset-border: 1px solid $medium-gray;
|
||||
// $fieldset-padding: rem-calc(20);
|
||||
// $fieldset-margin: rem-calc(18 0);
|
||||
// $legend-padding: rem-calc(0 3);
|
||||
// $form-spacing: rem-calc(16);
|
||||
// $helptext-color: $black;
|
||||
// $helptext-font-size: rem-calc(13);
|
||||
// $helptext-font-style: italic;
|
||||
// $input-prefix-color: $black;
|
||||
// $input-prefix-background: $light-gray;
|
||||
// $input-prefix-border: 1px solid $medium-gray;
|
||||
// $input-prefix-padding: 1rem;
|
||||
// $form-label-color: $black;
|
||||
// $form-label-font-size: rem-calc(14);
|
||||
// $form-label-font-weight: $global-weight-normal;
|
||||
// $form-label-line-height: 1.8;
|
||||
// $select-background: $white;
|
||||
// $select-triangle-color: $dark-gray;
|
||||
// $select-radius: $global-radius;
|
||||
// $input-color: $black;
|
||||
// $input-placeholder-color: $medium-gray;
|
||||
// $input-font-family: inherit;
|
||||
// $input-font-size: rem-calc(16);
|
||||
// $input-font-weight: $global-weight-normal;
|
||||
// $input-line-height: $global-lineheight;
|
||||
// $input-background: $white;
|
||||
// $input-background-focus: $white;
|
||||
// $input-background-disabled: $light-gray;
|
||||
// $input-border: 1px solid $medium-gray;
|
||||
// $input-border-focus: 1px solid $dark-gray;
|
||||
// $input-padding: $form-spacing * 0.5;
|
||||
// $input-shadow: inset 0 1px 2px rgba($black, 0.1);
|
||||
// $input-shadow-focus: 0 0 5px $medium-gray;
|
||||
// $input-cursor-disabled: not-allowed;
|
||||
// $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
|
||||
// $input-number-spinners: true;
|
||||
// $input-radius: $global-radius;
|
||||
// $form-button-radius: $global-radius;
|
||||
|
||||
// // 21. Label
|
||||
// // ---------
|
||||
|
||||
// $label-background: $primary-color;
|
||||
// $label-color: $white;
|
||||
// $label-color-alt: $black;
|
||||
// $label-palette: $foundation-palette;
|
||||
// $label-font-size: 0.8rem;
|
||||
// $label-padding: 0.33333rem 0.5rem;
|
||||
// $label-radius: $global-radius;
|
||||
|
||||
// // 22. Media Object
|
||||
// // ----------------
|
||||
|
||||
// $mediaobject-margin-bottom: $global-margin;
|
||||
// $mediaobject-section-padding: $global-padding;
|
||||
// $mediaobject-image-width-stacked: 100%;
|
||||
|
||||
// // 23. Menu
|
||||
// // --------
|
||||
|
||||
// $menu-margin: 0;
|
||||
// $menu-nested-margin: $global-menu-nested-margin;
|
||||
// $menu-items-padding: $global-menu-padding;
|
||||
// $menu-simple-margin: 1rem;
|
||||
// $menu-item-color-active: $white;
|
||||
// $menu-item-color-alt-active: $black;
|
||||
// $menu-item-background-active: get-color(primary);
|
||||
// $menu-icon-spacing: 0.25rem;
|
||||
// $menu-state-back-compat: true;
|
||||
// $menu-centered-back-compat: true;
|
||||
// $menu-icons-back-compat: true;
|
||||
|
||||
// // 24. Meter
|
||||
// // ---------
|
||||
|
||||
// $meter-height: 1rem;
|
||||
// $meter-radius: $global-radius;
|
||||
// $meter-background: $medium-gray;
|
||||
// $meter-fill-good: $success-color;
|
||||
// $meter-fill-medium: $warning-color;
|
||||
// $meter-fill-bad: $alert-color;
|
||||
|
||||
// // 25. Off-canvas
|
||||
// // --------------
|
||||
|
||||
// $offcanvas-sizes: (
|
||||
// small: 250px,
|
||||
// );
|
||||
// $offcanvas-vertical-sizes: (
|
||||
// small: 250px,
|
||||
// );
|
||||
// $offcanvas-background: $light-gray;
|
||||
// $offcanvas-shadow: 0 0 10px rgba($black, 0.7);
|
||||
// $offcanvas-inner-shadow-size: 20px;
|
||||
// $offcanvas-inner-shadow-color: rgba($black, 0.25);
|
||||
// $offcanvas-overlay-zindex: 11;
|
||||
// $offcanvas-push-zindex: 12;
|
||||
// $offcanvas-overlap-zindex: 13;
|
||||
// $offcanvas-reveal-zindex: 12;
|
||||
// $offcanvas-transition-length: 0.5s;
|
||||
// $offcanvas-transition-timing: ease;
|
||||
// $offcanvas-fixed-reveal: true;
|
||||
// $offcanvas-exit-background: rgba($white, 0.25);
|
||||
// $maincontent-class: 'off-canvas-content';
|
||||
|
||||
// // 26. Orbit
|
||||
// // ---------
|
||||
|
||||
// $orbit-bullet-background: $medium-gray;
|
||||
// $orbit-bullet-background-active: $dark-gray;
|
||||
// $orbit-bullet-diameter: 1.2rem;
|
||||
// $orbit-bullet-margin: 0.1rem;
|
||||
// $orbit-bullet-margin-top: 0.8rem;
|
||||
// $orbit-bullet-margin-bottom: 0.8rem;
|
||||
// $orbit-caption-background: rgba($black, 0.5);
|
||||
// $orbit-caption-padding: 1rem;
|
||||
// $orbit-control-background-hover: rgba($black, 0.5);
|
||||
// $orbit-control-padding: 1rem;
|
||||
// $orbit-control-zindex: 10;
|
||||
|
||||
// // 27. Pagination
|
||||
// // --------------
|
||||
|
||||
// $pagination-font-size: rem-calc(14);
|
||||
// $pagination-margin-bottom: $global-margin;
|
||||
// $pagination-item-color: $black;
|
||||
// $pagination-item-padding: rem-calc(3 10);
|
||||
// $pagination-item-spacing: rem-calc(1);
|
||||
// $pagination-radius: $global-radius;
|
||||
// $pagination-item-background-hover: $light-gray;
|
||||
// $pagination-item-background-current: $primary-color;
|
||||
// $pagination-item-color-current: $white;
|
||||
// $pagination-item-color-disabled: $medium-gray;
|
||||
// $pagination-ellipsis-color: $black;
|
||||
// $pagination-mobile-items: false;
|
||||
// $pagination-mobile-current-item: false;
|
||||
// $pagination-arrows: true;
|
||||
// $pagination-arrow-previous: '\00AB';
|
||||
// $pagination-arrow-next: '\00BB';
|
||||
|
||||
// // 28. Progress Bar
|
||||
// // ----------------
|
||||
|
||||
// $progress-height: 1rem;
|
||||
// $progress-background: $medium-gray;
|
||||
// $progress-margin-bottom: $global-margin;
|
||||
// $progress-meter-background: $primary-color;
|
||||
// $progress-radius: $global-radius;
|
||||
|
||||
// // 29. Prototype Arrow
|
||||
// // -------------------
|
||||
|
||||
// $prototype-arrow-directions: (
|
||||
// down,
|
||||
// up,
|
||||
// right,
|
||||
// left
|
||||
// );
|
||||
// $prototype-arrow-size: 0.4375rem;
|
||||
// $prototype-arrow-color: $black;
|
||||
|
||||
// // 30. Prototype Border-Box
|
||||
// // ------------------------
|
||||
|
||||
// $prototype-border-box-breakpoints: $global-prototype-breakpoints;
|
||||
|
||||
// // 31. Prototype Border-None
|
||||
// // -------------------------
|
||||
|
||||
// $prototype-border-none-breakpoints: $global-prototype-breakpoints;
|
||||
|
||||
// // 32. Prototype Bordered
|
||||
// // ----------------------
|
||||
|
||||
// $prototype-bordered-breakpoints: $global-prototype-breakpoints;
|
||||
// $prototype-border-width: rem-calc(1);
|
||||
// $prototype-border-type: solid;
|
||||
// $prototype-border-color: $medium-gray;
|
||||
|
||||
// // 33. Prototype Display
|
||||
// // ---------------------
|
||||
|
||||
// $prototype-display-breakpoints: $global-prototype-breakpoints;
|
||||
// $prototype-display: (
|
||||
// inline,
|
||||
// inline-block,
|
||||
// block,
|
||||
// table,
|
||||
// table-cell
|
||||
// );
|
||||
|
||||
// // 34. Prototype Font-Styling
|
||||
// // --------------------------
|
||||
|
||||
// $prototype-font-breakpoints: $global-prototype-breakpoints;
|
||||
// $prototype-wide-letter-spacing: rem-calc(4);
|
||||
// $prototype-font-normal: $global-weight-normal;
|
||||
// $prototype-font-bold: $global-weight-bold;
|
||||
|
||||
// // 35. Prototype List-Style-Type
|
||||
// // -----------------------------
|
||||
|
||||
// $prototype-list-breakpoints: $global-prototype-breakpoints;
|
||||
// $prototype-style-type-unordered: (
|
||||
// disc,
|
||||
// circle,
|
||||
// square
|
||||
// );
|
||||
// $prototype-style-type-ordered: (
|
||||
// decimal,
|
||||
// lower-alpha,
|
||||
// lower-latin,
|
||||
// lower-roman,
|
||||
// upper-alpha,
|
||||
// upper-latin,
|
||||
// upper-roman
|
||||
// );
|
||||
|
||||
// // 36. Prototype Overflow
|
||||
// // ----------------------
|
||||
|
||||
// $prototype-overflow-breakpoints: $global-prototype-breakpoints;
|
||||
// $prototype-overflow: (
|
||||
// visible,
|
||||
// hidden,
|
||||
// scroll
|
||||
// );
|
||||
|
||||
// // 37. Prototype Position
|
||||
// // ----------------------
|
||||
|
||||
// $prototype-position-breakpoints: $global-prototype-breakpoints;
|
||||
// $prototype-position: (
|
||||
// static,
|
||||
// relative,
|
||||
// absolute,
|
||||
// fixed
|
||||
// );
|
||||
// $prototype-position-z-index: 975;
|
||||
|
||||
// // 38. Prototype Rounded
|
||||
// // ---------------------
|
||||
|
||||
// $prototype-rounded-breakpoints: $global-prototype-breakpoints;
|
||||
// $prototype-border-radius: rem-calc(3);
|
||||
|
||||
// // 39. Prototype Separator
|
||||
// // -----------------------
|
||||
|
||||
// $prototype-separator-breakpoints: $global-prototype-breakpoints;
|
||||
// $prototype-separator-align: center;
|
||||
// $prototype-separator-height: rem-calc(2);
|
||||
// $prototype-separator-width: 3rem;
|
||||
// $prototype-separator-background: $primary-color;
|
||||
// $prototype-separator-margin-top: $global-margin;
|
||||
|
||||
// // 40. Prototype Shadow
|
||||
// // --------------------
|
||||
|
||||
// $prototype-shadow-breakpoints: $global-prototype-breakpoints;
|
||||
// $prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),
|
||||
// 0 2px 10px 0 rgba(0,0,0,.12);
|
||||
|
||||
// // 41. Prototype Sizing
|
||||
// // --------------------
|
||||
|
||||
// $prototype-sizing-breakpoints: $global-prototype-breakpoints;
|
||||
// $prototype-sizing: (
|
||||
// width,
|
||||
// height
|
||||
// );
|
||||
// $prototype-sizes: (
|
||||
// 25: 25%,
|
||||
// 50: 50%,
|
||||
// 75: 75%,
|
||||
// 100: 100%
|
||||
// );
|
||||
|
||||
// // 42. Prototype Spacing
|
||||
// // ---------------------
|
||||
|
||||
// $prototype-spacing-breakpoints: $global-prototype-breakpoints;
|
||||
// $prototype-spacers-count: 3;
|
||||
|
||||
// // 43. Prototype Text-Decoration
|
||||
// // -----------------------------
|
||||
|
||||
// $prototype-decoration-breakpoints: $global-prototype-breakpoints;
|
||||
// $prototype-text-decoration: (
|
||||
// overline,
|
||||
// underline,
|
||||
// line-through,
|
||||
// );
|
||||
|
||||
// // 44. Prototype Text-Transformation
|
||||
// // ---------------------------------
|
||||
|
||||
// $prototype-transformation-breakpoints: $global-prototype-breakpoints;
|
||||
// $prototype-text-transformation: (
|
||||
// lowercase,
|
||||
// uppercase,
|
||||
// capitalize
|
||||
// );
|
||||
|
||||
// // 45. Prototype Text-Utilities
|
||||
// // ----------------------------
|
||||
|
||||
// $prototype-utilities-breakpoints: $global-prototype-breakpoints;
|
||||
// $prototype-text-overflow: ellipsis;
|
||||
|
||||
// // 46. Responsive Embed
|
||||
// // --------------------
|
||||
|
||||
// $responsive-embed-margin-bottom: rem-calc(16);
|
||||
// $responsive-embed-ratios: (
|
||||
// default: 4 by 3,
|
||||
// widescreen: 16 by 9,
|
||||
// );
|
||||
|
||||
// // 47. Reveal
|
||||
// // ----------
|
||||
|
||||
// $reveal-background: $white;
|
||||
// $reveal-width: 600px;
|
||||
// $reveal-max-width: $global-width;
|
||||
// $reveal-padding: $global-padding;
|
||||
// $reveal-border: 1px solid $medium-gray;
|
||||
// $reveal-radius: $global-radius;
|
||||
// $reveal-zindex: 1005;
|
||||
// $reveal-overlay-background: rgba($black, 0.45);
|
||||
|
||||
// // 48. Slider
|
||||
// // ----------
|
||||
|
||||
// $slider-width-vertical: 0.5rem;
|
||||
// $slider-transition: all 0.2s ease-in-out;
|
||||
// $slider-height: 0.5rem;
|
||||
// $slider-background: $light-gray;
|
||||
// $slider-fill-background: $medium-gray;
|
||||
// $slider-handle-height: 1.4rem;
|
||||
// $slider-handle-width: 1.4rem;
|
||||
// $slider-handle-background: $primary-color;
|
||||
// $slider-opacity-disabled: 0.25;
|
||||
// $slider-radius: $global-radius;
|
||||
|
||||
// // 49. Switch
|
||||
// // ----------
|
||||
|
||||
// $switch-background: $medium-gray;
|
||||
// $switch-background-active: $primary-color;
|
||||
// $switch-height: 2rem;
|
||||
// $switch-height-tiny: 1.5rem;
|
||||
// $switch-height-small: 1.75rem;
|
||||
// $switch-height-large: 2.5rem;
|
||||
// $switch-radius: $global-radius;
|
||||
// $switch-margin: $global-margin;
|
||||
// $switch-paddle-background: $white;
|
||||
// $switch-paddle-offset: 0.25rem;
|
||||
// $switch-paddle-radius: $global-radius;
|
||||
// $switch-paddle-transition: all 0.25s ease-out;
|
||||
// $switch-opacity-disabled: .5;
|
||||
// $switch-cursor-disabled: not-allowed;
|
||||
|
||||
// // 50. Table
|
||||
// // ---------
|
||||
|
||||
// $table-background: $white;
|
||||
// $table-color-scale: 5%;
|
||||
// $table-border: 1px solid smart-scale($table-background, $table-color-scale);
|
||||
// $table-padding: rem-calc(8 10 10);
|
||||
// $table-hover-scale: 2%;
|
||||
// $table-row-hover: darken($table-background, $table-hover-scale);
|
||||
// $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
|
||||
// $table-is-striped: true;
|
||||
// $table-striped-background: smart-scale($table-background, $table-color-scale);
|
||||
// $table-stripe: even;
|
||||
// $table-head-background: smart-scale($table-background, $table-color-scale * 0.5);
|
||||
// $table-head-row-hover: darken($table-head-background, $table-hover-scale);
|
||||
// $table-foot-background: smart-scale($table-background, $table-color-scale);
|
||||
// $table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
|
||||
// $table-head-font-color: $body-font-color;
|
||||
// $table-foot-font-color: $body-font-color;
|
||||
// $show-header-for-stacked: false;
|
||||
// $table-stack-breakpoint: medium;
|
||||
|
||||
// // 51. Tabs
|
||||
// // --------
|
||||
|
||||
// $tab-margin: 0;
|
||||
// $tab-background: $white;
|
||||
// $tab-color: $primary-color;
|
||||
// $tab-background-active: $light-gray;
|
||||
// $tab-active-color: $primary-color;
|
||||
// $tab-item-font-size: rem-calc(12);
|
||||
// $tab-item-background-hover: $white;
|
||||
// $tab-item-padding: 1.25rem 1.5rem;
|
||||
// $tab-content-background: $white;
|
||||
// $tab-content-border: $light-gray;
|
||||
// $tab-content-color: $body-font-color;
|
||||
// $tab-content-padding: 1rem;
|
||||
|
||||
// // 52. Thumbnail
|
||||
// // -------------
|
||||
|
||||
// $thumbnail-border: 4px solid $white;
|
||||
// $thumbnail-margin-bottom: $global-margin;
|
||||
// $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
|
||||
// $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
|
||||
// $thumbnail-transition: box-shadow 200ms ease-out;
|
||||
// $thumbnail-radius: $global-radius;
|
||||
|
||||
// // 53. Title Bar
|
||||
// // -------------
|
||||
|
||||
// $titlebar-background: $black;
|
||||
// $titlebar-color: $white;
|
||||
// $titlebar-padding: 0.5rem;
|
||||
// $titlebar-text-font-weight: bold;
|
||||
// $titlebar-icon-color: $white;
|
||||
// $titlebar-icon-color-hover: $medium-gray;
|
||||
// $titlebar-icon-spacing: 0.25rem;
|
||||
|
||||
// // 54. Tooltip
|
||||
// // -----------
|
||||
|
||||
// $has-tip-cursor: help;
|
||||
// $has-tip-font-weight: $global-weight-bold;
|
||||
// $has-tip-border-bottom: dotted 1px $dark-gray;
|
||||
// $tooltip-background-color: $black;
|
||||
// $tooltip-color: $white;
|
||||
// $tooltip-padding: 0.75rem;
|
||||
// $tooltip-max-width: 10rem;
|
||||
// $tooltip-font-size: $small-font-size;
|
||||
// $tooltip-pip-width: 0.75rem;
|
||||
// $tooltip-pip-height: $tooltip-pip-width * 0.866;
|
||||
// $tooltip-radius: $global-radius;
|
||||
|
||||
// // 55. Top Bar
|
||||
// // -----------
|
||||
|
||||
// $topbar-padding: 0.5rem;
|
||||
// $topbar-background: $light-gray;
|
||||
// $topbar-submenu-background: $topbar-background;
|
||||
// $topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
|
||||
// $topbar-input-width: 200px;
|
||||
// $topbar-unstack-breakpoint: medium;
|
||||
|
||||
// // 56. Xy Grid
|
||||
// // -----------
|
||||
|
||||
// $xy-grid: true;
|
||||
// $grid-container: $global-width;
|
||||
// $grid-columns: 12;
|
||||
// $grid-margin-gutters: (
|
||||
// small: 20px,
|
||||
// medium: 30px
|
||||
// );
|
||||
// $grid-padding-gutters: $grid-margin-gutters;
|
||||
// $grid-container-padding: $grid-padding-gutters;
|
||||
// $grid-container-max: $global-width;
|
||||
// $xy-block-grid-max: 8;
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
// Font Family
|
||||
$font-family-default: "Marianne", sans-serif;
|
||||
$font-family-header: "Marianne", sans-serif;
|
||||
$font-family-chapeau: "Marianne", sans-serif;
|
||||
|
||||
|
||||
$font-extra: 2.3rem;
|
||||
$font-large: 1.6rem;
|
||||
$font-big: 1rem;
|
||||
$font-medium: .8rem;
|
||||
$font-normal: .6rem;
|
||||
$font-small: .45rem;
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
.home footer{
|
||||
span.totop {
|
||||
display: inline-flex;
|
||||
width: 100vw;
|
||||
background: $bleu_fond_header;
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
.partenaires{
|
||||
.layout-content{
|
||||
.content_container{
|
||||
#block-quartiers-de-demain-titredepage{
|
||||
grid-column: 3 /span 9;
|
||||
grid-row: 1;
|
||||
margin-top: 3rem;
|
||||
@media(max-width: 500px){
|
||||
margin-top: 1rem;
|
||||
grid-column: 2 /span 9;
|
||||
}
|
||||
|
||||
h1{
|
||||
text-transform: uppercase;
|
||||
color: $red_QDD ;
|
||||
font-size: $font-large;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
.views-element-container{
|
||||
grid-column: 3 /span 9;
|
||||
grid-row: 2;
|
||||
@media(max-width: 500px){
|
||||
grid-column: 2 /span 9;
|
||||
}
|
||||
|
||||
.node-type-partenaire{
|
||||
width: 100%;
|
||||
padding-bottom: 3rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(9, 1fr);
|
||||
grid-template-rows: repeat(auto-fill);
|
||||
// grid-gap: 10px;
|
||||
@media (max-width: 810px){
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.field_field_logo{
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1 /span 3;
|
||||
padding-right: 1rem;
|
||||
margin: auto;
|
||||
img{
|
||||
object-fit: contain;
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
}
|
||||
}
|
||||
.field_title{
|
||||
grid-column: 3 /span 8;
|
||||
grid-row: 1;
|
||||
font-weight: 500;
|
||||
font-size: $font-normal;
|
||||
margin-left: 1rem;
|
||||
@media (max-width:810px) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.field_body{
|
||||
grid-column: 3 /span 8;
|
||||
grid-row: 2;
|
||||
margin-left: 1rem;
|
||||
@media (max-width:810px) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
.field_field_lien{
|
||||
grid-column: 3 /span 8;
|
||||
grid-row: 3;
|
||||
border-bottom: 2px solid $blue_QDD;
|
||||
width: fit-content;
|
||||
padding-bottom: 0.5rem;
|
||||
margin-left: 1rem;
|
||||
@media (max-width:810px) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
a{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
svg{
|
||||
display: none;
|
||||
}
|
||||
&::before{
|
||||
display: inline-block;
|
||||
content: url("../images/noun-arrow-to-right.svg");
|
||||
padding-right: 0.5rem;
|
||||
padding-top: 0.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -0,0 +1,252 @@
|
||||
|
||||
#presentation, #home{
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
padding-top: 3rem;
|
||||
#block-quartiers-de-demain-views-block-statics-fields-block-1{
|
||||
order: 2;
|
||||
border-top: 2px solid $blue_QDD;
|
||||
padding-top: 0.3rem;
|
||||
.views-field-field-pieces-jointes{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
&::before{
|
||||
content: url(../images/noun-arrow-download.svg);
|
||||
padding-right: 00.3rem;
|
||||
}
|
||||
.field-content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0.5rem;
|
||||
font-weight: 800;
|
||||
span{
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-content{
|
||||
grid-row: 1;
|
||||
order: 2;
|
||||
@media (max-width:500px) {
|
||||
padding-top: 50px;
|
||||
}
|
||||
.content_container{
|
||||
display: flex;
|
||||
margin-bottom: 0;
|
||||
#block-quartiers-de-demain-titredepage{
|
||||
display: none;
|
||||
}
|
||||
|
||||
article.node-type-static{
|
||||
width: 100%;
|
||||
|
||||
.field_body{
|
||||
padding-left: 20%;
|
||||
padding-right: 20%;
|
||||
@media (max-width:810px) {
|
||||
padding-left: 13%;
|
||||
padding-right: 13%;
|
||||
}
|
||||
@media (max-width:640px) {
|
||||
padding-left: 10%;
|
||||
padding-right: 10%;
|
||||
}
|
||||
|
||||
// width: 80%;
|
||||
h2{
|
||||
font-size: $font-medium;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.paragraph{
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
padding-left: 20%;
|
||||
padding-right: 20%;
|
||||
@media (max-width:810px) {
|
||||
padding-left: 13%;
|
||||
padding-right: 13%;
|
||||
}
|
||||
@media (max-width:640px) {
|
||||
padding-left: 10%;
|
||||
padding-right: 10%;
|
||||
}
|
||||
}
|
||||
.field_field_textes{
|
||||
.field_field_title{
|
||||
text-transform: uppercase;
|
||||
font-size: $font-big;
|
||||
font-weight: 400;
|
||||
}
|
||||
#paragraph-id--1, #paragraph-id--2, #paragraph-id--6, #paragraph-id--7, #paragraph-id--8{
|
||||
.field_field_title{
|
||||
color: $blue_QDD;
|
||||
}
|
||||
}
|
||||
#paragraph-id--3, #paragraph-id--4{
|
||||
.field_field_title{
|
||||
color: $red_QDD;
|
||||
}
|
||||
}
|
||||
#paragraph-id--1, #paragraph-id--2, #paragraph-id--3, #paragraph-id--4, #paragraph-id--6, #paragraph-id--8{
|
||||
background-color: $bleu_fond_header;
|
||||
}
|
||||
#paragraph-id--1, #paragraph-id--2, #paragraph-id--3, #paragraph-id--4{
|
||||
padding-top: 1rem;
|
||||
}
|
||||
#paragraph-id--1, #paragraph-id--2, #paragraph-id--3{
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
#paragraph-id--7, #paragraph-id--8{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#paragraph-id--7{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.field_field_title{
|
||||
width: 60%;
|
||||
margin: auto;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.field_field_texte div:nth-child(2){
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start !important;
|
||||
@media(max-width: 500px){
|
||||
flex-direction: column;
|
||||
}
|
||||
p{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-right: 30px;
|
||||
text-align: left;
|
||||
color: $blue_QDD;
|
||||
width: calc(100vw / 3);
|
||||
@media(max-width: 500px){
|
||||
padding-right: 0px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
img{
|
||||
width: 70%;
|
||||
height: auto;
|
||||
padding-bottom: 1rem;
|
||||
margin: auto;
|
||||
@media (max-width: 500px){
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
#paragraph-id--8{
|
||||
padding-bottom: 4rem;
|
||||
.field_field_title{
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.field_field_texte div:nth-child(2){
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
&.flex-start{
|
||||
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
@media(max-width: 500px){
|
||||
flex-direction: column;
|
||||
}
|
||||
p{
|
||||
width: calc(100vw / 3);
|
||||
padding-right: 30px;
|
||||
text-align: left;
|
||||
@media(max-width: 500px){
|
||||
padding-right: 0px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
p{
|
||||
margin-bottom: 0;
|
||||
// padding-bottom: 1.5rem;
|
||||
}
|
||||
.field_field_picto{
|
||||
height: auto;
|
||||
float: inline-start;
|
||||
padding-right: 0.5rem;
|
||||
img{
|
||||
width: 40px;
|
||||
height: auto;
|
||||
margin: auto;
|
||||
@media(max-width: 891px){
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
#paragraph-id--9{
|
||||
img{
|
||||
width: -moz-available;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
// z-index: 100;
|
||||
&:hover{
|
||||
filter: brightness(75%);
|
||||
transition: 0.2s;
|
||||
cursor: url(../images/noun-loop-3037049.svg), auto;
|
||||
cursor: zoom-in;
|
||||
cursor: -moz-zoom-in;
|
||||
cursor: -webkit-zoom-in;
|
||||
@media(max-width: 500px){
|
||||
filter: brightness(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zoom_in{
|
||||
-ms-transform: scale(1.7); /* IE 9 */
|
||||
-webkit-transform: scale(1.7); /* Safari 3-8 */
|
||||
transform: scale(1.7);
|
||||
max-width: 100vw;
|
||||
overflow-x: scroll;
|
||||
position: relative;
|
||||
z-index: 98;
|
||||
&:hover{
|
||||
filter: brightness(100%);
|
||||
transition: 0.2s;
|
||||
overflow-x: scroll;
|
||||
cursor: zoom-out;
|
||||
cursor: -moz-zoom-out;
|
||||
cursor: -webkit-zoom-out;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.presentation footer{
|
||||
span.totop {
|
||||
display: inline-flex;
|
||||
width: 100vw;
|
||||
background: $bleu_fond_header;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
.node-type-static{
|
||||
.layout-content{
|
||||
// grid-column: 1 / span 12;
|
||||
grid-row: 1;
|
||||
.content_container{
|
||||
margin-bottom: 3rem;
|
||||
#block-quartiers-de-demain-titredepage{
|
||||
grid-column: 3 /span 9;
|
||||
grid-row: 1;
|
||||
margin-top: 3rem;
|
||||
@media(max-width: 500px){
|
||||
margin-top: 1rem;
|
||||
grid-column: 2 /span 9;
|
||||
}
|
||||
|
||||
h1{
|
||||
text-transform: uppercase;
|
||||
color: $red_QDD ;
|
||||
font-size: $font-large;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
article.node-type-static{
|
||||
grid-column: 3 /span 9;
|
||||
grid-row: 2;
|
||||
@media(max-width: 500px){
|
||||
grid-column: 2 /span 9;
|
||||
}
|
||||
|
||||
div.field_body{
|
||||
h2{
|
||||
font-size: $font-medium;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
p{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
.layout-sidebar-first{
|
||||
width: 25%;
|
||||
// display: flex;
|
||||
position: fixed;
|
||||
left: 3%;
|
||||
top: 200px;
|
||||
z-index: 98;
|
||||
|
||||
@media(max-width:891px){
|
||||
margin-left: 5%;
|
||||
margin-top: 9rem;
|
||||
}
|
||||
@media (max-width:500px) {
|
||||
width: 80%;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
#toTop-aside{
|
||||
margin: auto;
|
||||
background-color: #fff;
|
||||
border-top-left-radius: 10%;
|
||||
border-top-right-radius: 10%;
|
||||
padding-bottom: 0.5rem;
|
||||
.arrow-up{
|
||||
font-size: 1.7rem;
|
||||
line-height: 2.5rem;
|
||||
text-align: center;
|
||||
width: 3rem;
|
||||
height: 2rem;
|
||||
display: inline-block;
|
||||
text-align: top;
|
||||
&::before{
|
||||
content:url(../images/up-arrow.svg) ;
|
||||
width: 50%;
|
||||
}
|
||||
// .fa{
|
||||
// color: #fff;
|
||||
// }
|
||||
}
|
||||
|
||||
}
|
||||
.sidebar_first_container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 50%;
|
||||
font-weight: 400;
|
||||
.field-content{
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
@media (max-width: 810px){
|
||||
display: none;
|
||||
}
|
||||
|
||||
#block-quartiers-de-demain-views-block-statics-block-1{
|
||||
order: 1;
|
||||
text-transform: uppercase;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .sticky-menu{
|
||||
// position: sticky;
|
||||
// position: -webkit-sticky;
|
||||
// top: 10rem;
|
||||
// }
|
||||
@@ -0,0 +1,162 @@
|
||||
footer{
|
||||
z-index: 100;
|
||||
span.totop {
|
||||
display: inline-flex;
|
||||
width: 100vw;
|
||||
#toTop{
|
||||
margin: auto;
|
||||
background-color: #fff;
|
||||
border-top-left-radius: 10%;
|
||||
border-top-right-radius: 10%;
|
||||
padding-bottom: 0.5rem;
|
||||
.arrow-up{
|
||||
font-size: 1.7rem;
|
||||
line-height: 2.5rem;
|
||||
text-align: center;
|
||||
width: 4rem;
|
||||
height: 2rem;
|
||||
display: inline-block;
|
||||
text-align: top;
|
||||
|
||||
&::before{
|
||||
content:url("../images/up-arrow.svg") ;
|
||||
// width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
grid-template-rows: repeat(1, 1fr);
|
||||
background-color: $white-header;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
section{width: fit-content;}
|
||||
h2, ul{margin: 0;}
|
||||
border-top: 1px solid #808080;
|
||||
@media(max-width: 700px){
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@media(max-width: 600px){
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
#footer-left{
|
||||
grid-column: 1 /span 5;
|
||||
grid-row: 1;
|
||||
@media (max-width: 500px){
|
||||
max-width: 25%;
|
||||
}
|
||||
.footer_left_container{
|
||||
padding-left: 5%;
|
||||
@media(max-width: 700px){
|
||||
max-width: 50vw;
|
||||
}
|
||||
@media (max-width: 500px){
|
||||
padding-left: 15%;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
#block-quartiers-de-demain-logoepau{
|
||||
height: $header-height;
|
||||
@media(max-width: 700px){
|
||||
height: $header-height-pad;
|
||||
}
|
||||
// > div {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// > a {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// > img {
|
||||
// padding: 0 2rem;
|
||||
// width: 100%;
|
||||
// height: auto;
|
||||
// @media(max-width: 700px){
|
||||
// padding: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
img{
|
||||
width: auto;
|
||||
height: $header-height;
|
||||
@media(max-width: 700px){
|
||||
height: $header-height-pad;
|
||||
}
|
||||
@media(max-width: 660px){
|
||||
height: $header-height-small;
|
||||
}
|
||||
@media(max-width: 450px){
|
||||
height: $header-height-ultrasmall;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
#footer-middle{
|
||||
grid-column: 6 /span 7;
|
||||
grid-row: 1;
|
||||
#block-quartiers-de-demain-pieddepage{
|
||||
ul li{
|
||||
padding-bottom: 0.2rem;
|
||||
}
|
||||
@media(max-width: 700px){
|
||||
ul{
|
||||
padding-left: 00.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
#footer-right{
|
||||
grid-column: 10 / 12;
|
||||
grid-row: 1;
|
||||
@media (max-width: 700px){
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
max-width: 35%;
|
||||
}
|
||||
#block-quartiers-de-demain-socialmedialinks{
|
||||
flex-direction: column;
|
||||
h2{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: $font-medium;
|
||||
font-weight: 400;
|
||||
&::before{
|
||||
content: "Nous contacter";
|
||||
padding-bottom: 0.6rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
padding-bottom: 0.6rem;
|
||||
font-size: 0.6rem;
|
||||
|
||||
}
|
||||
.fa-3x{
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div{
|
||||
@media(max-width: 700px){
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@media(max-width: 520px){
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -0,0 +1,196 @@
|
||||
header{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
// grid-gap: 10px;
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
height: $header-height;
|
||||
background-color: $white-header;
|
||||
z-index: 99;
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
border-bottom: 1px solid #808080;
|
||||
@media (max-width:810px) {
|
||||
// width: 800px;
|
||||
height: $header-height-pad;
|
||||
}
|
||||
@media(max-width: 660px){
|
||||
height: $header-height-small;
|
||||
}
|
||||
@media(max-width: 450px){
|
||||
display: flex;
|
||||
height: $header-height-ultrasmall;
|
||||
}
|
||||
.contextual-region{
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.header_left_container{
|
||||
grid-column: 1 /span 11;
|
||||
grid-row: 1 /span 3;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-right: 1px solid #808080;
|
||||
padding-left: 2%;
|
||||
padding-right: 2%;
|
||||
@media(max-width: 660px){
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
#block-quartiers-de-demain-logorepu-2{
|
||||
|
||||
@media(max-width: 891px){
|
||||
height: $header-height-pad;
|
||||
}
|
||||
}
|
||||
#block-quartiers-de-demain-logoepau-2{
|
||||
|
||||
height: $header-height;
|
||||
@media(max-width: 891px){
|
||||
height: $header-height-pad;
|
||||
}
|
||||
|
||||
}
|
||||
#block-quartiers-de-demain-logoquartiersdedemain{
|
||||
margin-left: auto;
|
||||
padding-right: 5%;
|
||||
|
||||
}
|
||||
img{
|
||||
width: auto;
|
||||
height: $header-height;
|
||||
@media(max-width: 891px){
|
||||
height: $header-height-pad;
|
||||
}
|
||||
@media(max-width: 660px){
|
||||
height: $header-height-small;
|
||||
}
|
||||
@media(max-width: 450px){
|
||||
height: $header-height-ultrasmall;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header_right_container{
|
||||
margin: auto;
|
||||
@media(max-width: 660px){
|
||||
padding-right: 0;
|
||||
}
|
||||
.language-switcher-language-url{
|
||||
text-transform: uppercase;
|
||||
ul{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: $font-normal;
|
||||
padding: 0;
|
||||
@media(max-width: 660px){
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@media(max-width: 500px){
|
||||
flex-direction: column;
|
||||
// margin-bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
li:nth-child(1){
|
||||
&::after{
|
||||
content: " / ";
|
||||
white-space: pre;
|
||||
@media(max-width: 660px){
|
||||
content:none ;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-active{
|
||||
font-weight: 600;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.header_nav_container{
|
||||
display: none;
|
||||
grid-row: 3;
|
||||
grid-column: 1 /span 12;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
background: $bleu_fond_header;
|
||||
border-bottom: 1px solid #808080;
|
||||
border-top: 1px solid #808080;
|
||||
font-size: $font-big;
|
||||
text-align: center;
|
||||
#block-quartiers-de-demain-entete{
|
||||
grid-column: 1 /span 11;
|
||||
order: 2;
|
||||
margin: auto;
|
||||
h2{
|
||||
display: none;
|
||||
}
|
||||
@media(max-width: 660px){
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.display-nav-opened{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
|
||||
.open-block, .open-block.opened{
|
||||
cursor:pointer;
|
||||
span{
|
||||
display: block;
|
||||
width: 58px;
|
||||
height: 2px;
|
||||
position: relative;
|
||||
background: black;
|
||||
border-radius: 3px;
|
||||
z-index: 1;
|
||||
@media(max-width: 660px){
|
||||
width: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.open-block{
|
||||
height: 100%;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
margin: auto;
|
||||
@media(max-width: 450px){
|
||||
height: $header-height-ultrasmall;
|
||||
}
|
||||
span{
|
||||
margin-bottom: 13px;
|
||||
transform-origin: 4px 0px;
|
||||
@media(max-width: 660px){
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.open-block.opened {
|
||||
margin: auto;
|
||||
span {
|
||||
transform-origin: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&>div>span:first-child {
|
||||
transform: translateY(57%) rotate(45deg);
|
||||
}
|
||||
&>div>span:nth-child(2) {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
&>div>span:nth-child(3) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
#logo-animated-container {
|
||||
width: 60%;
|
||||
margin-left: 20%;
|
||||
margin-right: 20%;
|
||||
}
|
||||
@media (max-width:810px) {
|
||||
#logo-animated-container {
|
||||
width: 74%;
|
||||
margin-left: 13%;
|
||||
margin-right: 13%;
|
||||
}
|
||||
}
|
||||
@media (max-width:640px) {
|
||||
#logo-animated-container {
|
||||
width: 80%;
|
||||
margin-left: 10%;
|
||||
margin-right: 10%;
|
||||
}
|
||||
}
|
||||
#logo-animated {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
max-width: 1300px;
|
||||
max-height: 1000px;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
#logo-animated svg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-width: 1030px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
#logo-animated img {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
}
|
||||
#consultation-couleur {
|
||||
left: min(17%, 180px);
|
||||
top: 0.5%;
|
||||
width: 32%;
|
||||
max-width: 330px;
|
||||
}
|
||||
#consultation-noir {
|
||||
left: min(17%, 180px);
|
||||
top: 0.5%;
|
||||
width: 32%;
|
||||
max-width: 330px;
|
||||
}
|
||||
#quartier-couleur {
|
||||
width: 60%;
|
||||
max-width: 620px;
|
||||
left: min(30%, 310px);
|
||||
top: 3%;
|
||||
}
|
||||
#quartier-noir {
|
||||
width: 60%;
|
||||
max-width: 620px;
|
||||
left: min(30%, 310px);
|
||||
top: 3%;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
|
||||
/*quartiers_de_demain*/
|
||||
|
||||
// @import "configuration/_breakpoints.scss";
|
||||
// @import "functions/mixins/_breakpoints.scss";
|
||||
|
||||
/*global*/
|
||||
|
||||
@import "global/variables/colors";
|
||||
@import "global/variables/typography";
|
||||
// @import "global/variables/buttons";
|
||||
@import "global/variables/core";
|
||||
@import "global/variables/settings";
|
||||
@import "global/fonts";
|
||||
@import "global/layout";
|
||||
@import "global/reset";
|
||||
@import "global/mediaquerries";
|
||||
// @import "global/_animated-logo";
|
||||
|
||||
|
||||
|
||||
|
||||
/*partials*/
|
||||
@import "partials/header";
|
||||
@import "partials/footer";
|
||||
@import "partials/aside";
|
||||
@import "partials/animation-logo";
|
||||
|
||||
/*pages*/
|
||||
@import "pages/home";
|
||||
@import "pages/partenaires";
|
||||
@import "pages/presentation";
|
||||
@import "pages/static";
|
||||
|
||||
Reference in New Issue
Block a user