styles.scss 103 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476347734783479348034813482348334843485348634873488348934903491349234933494349534963497349834993500350135023503350435053506350735083509351035113512351335143515351635173518351935203521352235233524352535263527352835293530353135323533353435353536353735383539354035413542354335443545354635473548354935503551355235533554355535563557355835593560356135623563356435653566356735683569357035713572357335743575357635773578357935803581358235833584358535863587358835893590359135923593359435953596359735983599360036013602360336043605360636073608360936103611361236133614361536163617361836193620362136223623362436253626362736283629363036313632363336343635363636373638363936403641364236433644364536463647364836493650365136523653365436553656365736583659366036613662366336643665366636673668366936703671367236733674367536763677367836793680368136823683368436853686368736883689369036913692369336943695369636973698369937003701370237033704370537063707370837093710371137123713371437153716371737183719372037213722372337243725372637273728372937303731373237333734373537363737373837393740374137423743374437453746374737483749375037513752375337543755375637573758375937603761376237633764376537663767376837693770377137723773377437753776377737783779378037813782378337843785378637873788378937903791379237933794379537963797379837993800380138023803380438053806380738083809381038113812381338143815381638173818381938203821382238233824382538263827382838293830383138323833383438353836383738383839384038413842384338443845384638473848384938503851385238533854385538563857385838593860386138623863386438653866386738683869387038713872387338743875387638773878387938803881388238833884388538863887388838893890389138923893389438953896389738983899390039013902390339043905390639073908390939103911391239133914391539163917391839193920392139223923392439253926392739283929393039313932393339343935393639373938393939403941394239433944394539463947
  1. /**
  2. * Primary Drupal Styles
  3. * Author: g-u-i.net
  4. */
  5. //@charset "UTF-8";
  6. @import "../bower_components/foundation/scss/normalize.scss";
  7. @import "../bower_components/foundation/scss/foundation/functions";
  8. // $row-width: rem-calc(1250);
  9. // $total-columns: 12;
  10. // $column-gutter: rem-calc(20);
  11. //@import "../bower_components/foundation/scss/foundation/settings"; // this is not working, causing an error on compilation
  12. @import "../bower_components/foundation/scss/foundation/components/global";
  13. @import "../bower_components/foundation/scss/foundation/components/type";
  14. @import "../bower_components/foundation/scss/foundation/components/clearing";
  15. @import "../bower_components/foundation/scss/foundation/components/inline-lists";
  16. @import "../bower_components/foundation/scss/foundation/components/buttons";
  17. @import "../bower_components/foundation/scss/foundation/components/button-groups";
  18. @import "../bower_components/foundation/scss/foundation/components/grid";
  19. // @import "../bower_components/foundation/scss/foundation/components/top-bar";
  20. // @import "../bower_components/foundation/scss/foundation/components/block-grid";
  21. @import "gui.scss";
  22. @import "colors.scss";
  23. @import "fonts.scss";
  24. @import "layout.scss";
  25. @import "../fonts/icon/foundation-icons.css";
  26. @mixin shadowBtn(){
  27. @include drop-shadow(0, 0, 5px, 0.4);
  28. @include transition-simply-prefix(box-shadow 0.3s ease-out);
  29. &:hover, &:focus{
  30. @include drop-shadow(0, 0, 5px, 0.7);
  31. }
  32. &:active{
  33. @include transition-simply-prefix(box-shadow 0s ease-out);
  34. @include drop-shadow(0, 0, 5px, 0.4);
  35. }
  36. }
  37. @mixin shadowTextBtnWhite(){
  38. cursor:pointer;
  39. text-shadow:0 0 2px rgba(255, 255, 255, 0.2);
  40. @include transition-simply-prefix(text-shadow 0.3s ease-out);
  41. &:hover, &:focus{
  42. text-shadow:0 0 3px rgba(255, 255, 255, 1);
  43. }
  44. &:active{
  45. @include transition-simply-prefix(text-shadow 0s ease-out);
  46. text-shadow:0 0 2px rgba(255, 255, 255, 0.2);
  47. }
  48. }
  49. @mixin shadowTextBtnBlack(){
  50. cursor:pointer;
  51. text-shadow:0 0 2px rgba(0, 0, 0, 0.2);
  52. @include transition-simply-prefix(text-shadow 0.2s ease-out);
  53. &:hover, &:focus{
  54. text-shadow:0 0 2px rgba(0, 0, 0, 0.8);
  55. }
  56. &:active{
  57. @include transition-simply-prefix(text-shadow 0s ease-out);
  58. text-shadow:0 0 2px rgba(0, 0, 0, 0.2);
  59. }
  60. }
  61. @mixin horihoverswitch(){
  62. position:relative; z-index:1; background-color:#fff;
  63. figure{
  64. position: absolute; top:0; left:0;
  65. &:first-child{ position:relative; z-index:1; }
  66. }
  67. }
  68. @mixin layer(){
  69. position:absolute; width:100%; height:100%; top:0; left:0;
  70. }
  71. .op-visible{
  72. visibility:visible;
  73. .csstransitions &{
  74. opacity:1;
  75. @include transition-simply-prefix(opacity 0.3s ease-out);
  76. }
  77. }
  78. .op-hidden{
  79. visibility:hidden;
  80. >*{
  81. margin-top:-100000px;
  82. }
  83. .csstransition &{
  84. opacity:0;
  85. @include transition-simply-prefix(visibility 0s 0.3s); // opacity 0.3s ease-out); change this
  86. >*{
  87. @include transition-simply-prefix(margin-top 0s 0.3s);
  88. }
  89. }
  90. }
  91. @mixin op-visible(){
  92. visibility:visible;
  93. .csstransitions &{
  94. opacity:1;
  95. @include transition-simply-prefix(opacity 0.3s ease-out);
  96. }
  97. } // change this
  98. @mixin op-hidden(){
  99. visibility:hidden;
  100. >*{
  101. margin-top:-100000px;
  102. }
  103. .csstransition &{
  104. opacity:0;
  105. @include transition-simply-prefix(visibility 0s 0.3s); // opacity 0.3s ease-out); change this
  106. >*{
  107. @include transition-simply-prefix(margin-top 0s 0.3s);
  108. }
  109. }
  110. } // change this
  111. @mixin bouton(){
  112. @include fs16();
  113. font-weight:bold;
  114. padding: 0.1em 0.3em 0.2em; @include rounded(0.3em);
  115. border: 2px solid #ccc; background-color:#ccc; color:#4D4D4D; // blanc/bleu
  116. @include shadowTextBtnWhite();
  117. text-align: center; text-decoration: none;
  118. }
  119. @mixin bouton-bleu(){
  120. @include bouton();
  121. @include shadowTextBtnBlack();
  122. border-color:#69CDCF; background-color:#69CDCF; color:#fff;
  123. }
  124. @mixin bouton-vert(){
  125. @include bouton();
  126. @include shadowTextBtnBlack();
  127. border-color:#E6DE1C; background-color:#E6DE1C; color:#fff;
  128. }
  129. /** colomnized() */
  130. @mixin columnized($padding){
  131. padding : $padding;
  132. &.columnized{
  133. padding: 0;
  134. .column>*{padding:$padding;}
  135. @include transition-simply-prefix(margin-left 0.3s ease-out);
  136. .column-switcher{
  137. display:inline-block; @include rounded(3px); color:#fff; background-color: #3e3e3e; vertical-align:middle;
  138. @include fs700(); @include fs22;
  139. padding: 0.05em 0.15em 0.2em 0.2em; line-height:0.5;
  140. @include regular;
  141. &.prev-column{cursor: w-resize;}
  142. &.next-column{cursor: e-resize;}
  143. }
  144. }
  145. }
  146. @mixin bgcWhite(){
  147. background-color: rgba(255, 255, 255, 0.8);
  148. text-shadow:0 0 4px rgba(255, 255, 255, 0.4);
  149. @include transition-simply-prefix(background-color 0.2s ease-out); // text-shadow 0.2s ease-out); //change this
  150. }
  151. @mixin bgcBlack(){
  152. background-color: rgba(0, 0, 0, 0.7);
  153. text-shadow:0 0 4px rgba(0, 0, 0, 0.4);
  154. @include transition-simply-prefix(background-color 0.2s ease-out); // text-shadow 0.2s ease-out); //change this
  155. }
  156. // .bgcWhiteParentHover(){
  157. // background-color: rgba(255, 255, 255, 0.2);
  158. // text-shadow:0 0 4px rgba(255, 255, 255, 0.9);
  159. // &:hover{
  160. // @include bgcWhite();
  161. // }
  162. // }
  163. $headerheight:45px;
  164. $headerpaddingtop:5px;
  165. $headerpaddingbottom:10px;
  166. $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
  167. /*
  168. __ ___________ ____ __________
  169. / / / / ____/ | / __ \/ ____/ __ \
  170. / /_/ / __/ / /| | / / / / __/ / /_/ /
  171. / __ / /___/ ___ |/ /_/ / /___/ _, _/
  172. /_/ /_/_____/_/ |_/_____/_____/_/ |_|
  173. */
  174. #header{
  175. padding-top:$headerpaddingtop;
  176. padding-bottom:$headerpaddingbottom;
  177. height:$headerheight;
  178. // position:relative;
  179. // @include drop-shadow(0, 3px, 2px, 0.4); margin-bottom:5px;
  180. a{&, &:active, &:visited{color:#000;}}
  181. // .logo, #header-blocks{@include inlineblock(); vertical-align:middle;}
  182. .logo{
  183. //width:210px; //padding-left:5px; //margin-left:50px;
  184. @include inlineblock();
  185. h1{
  186. margin:0;
  187. @include fs36;
  188. @include inlineblock(); vertical-align: baseline; position:relative; line-height:1.25;
  189. a:hover{text-decoration: none ;}
  190. }
  191. span.slogan{
  192. @include fs14;
  193. margin-top:-3px;
  194. margin-left:-0.5em;
  195. @include fs900;
  196. @media #{$small-only} {display:none;}
  197. @media #{$medium-only} { display:block; margin-left:0.1em; }
  198. @media #{$large-only} { display:block; margin-left:0.1em; }
  199. .ie8 &{position: absolute; margin-top:22px;}
  200. }
  201. }
  202. #header-blocks{
  203. //position:absolute; right:0; bottom:0;
  204. padding-top:17px;
  205. float:right;
  206. text-align:right;
  207. text-transform: capitalize;
  208. >.region{
  209. @include inlineblock(); vertical-align:middle;
  210. padding-right:1em; margin-right:1em;
  211. @media #{$small-only}{ padding-right:0.3em; margin-right:0.3em;}
  212. @media #{$medium-only}{ padding-right:0.3em; margin-right:0.3em;}
  213. border-right: 1px solid #707070;
  214. &:last-child{border:none; padding: 0; margin: 0;}
  215. }
  216. .block{
  217. @include inlineblock(); vertical-align:middle;
  218. h2{
  219. @include fs12;
  220. margin: 0; line-height: 1.2; font-weight: normal; }
  221. &:not(:last-child){
  222. padding-right:0.8em;
  223. @media #{$xlarge-only}{ padding-right:0.3em; } //change this
  224. }
  225. }
  226. #headerblock-left{
  227. @media #{$small-only}{display:none;}
  228. // @media #{$medium-only}{display:none;}
  229. }
  230. #block-social-media-links-social-media-links{
  231. ul.social-media-links{margin:0;line-height: 0;}
  232. li{
  233. line-height: 1;
  234. &.facebook a{background-image: url("../img/socialicons/svg/Facebook-color.svg");}
  235. &.twitter a{background-image: url("../img/socialicons/svg/Twitter-color.svg");}
  236. &.linkedin a{background-image: url("../img/socialicons/svg/LinkedIn-color.svg");}
  237. &.pinterest a{background-image: url("../img/socialicons/svg/Pinterest-color.svg");}
  238. &.vimeo a{background-image: url("../img/socialicons/svg/Vimeo-color.svg");}
  239. &.rss a{background-image: url("../img/socialicons/svg/RSS-color.svg");}
  240. // @media #{$small-only}{
  241. // &.linkedin,&.pinterest,&.vimeo{display:none;}
  242. // }
  243. @media #{$medium-only}{
  244. &.linkedin,&.pinterest,&.vimeo{display:none;}
  245. }
  246. }
  247. a{
  248. display:block; width:16px; height:16px;
  249. background-position: center;
  250. background-repeat: no-repeat;
  251. background-size: contain;
  252. }
  253. img{display:none;}
  254. }
  255. #block-materio-user-front-link{
  256. a{
  257. @include fs12;
  258. // line-height: 1.2;
  259. }
  260. // i{ vertical-align: text-bottom; margin: 0 2px 0px 0;}
  261. span.text{ display:none; }
  262. }
  263. #block-user-login{
  264. @include fs12;
  265. text-align:left; position:relative;
  266. h2{
  267. padding-right:5px;
  268. // .icon-user;
  269. i{ vertical-align: text-bottom; margin: 0 2px 2px 0;}
  270. }
  271. form#user-login-form{
  272. position:absolute; overflow:hidden; right:0; margin: 0;
  273. height:0;
  274. @include transition-simply-prefix(height 0.3s ease-out);
  275. &>div{
  276. padding: 5px; margin: 5px;
  277. background-color: #e6e6e6; @include rounded(5px); @include drop-shadow(0, 0, 5px, 0.2);
  278. }
  279. .form-item{margin: 0; padding-bottom:5px;}
  280. label,input{
  281. margin: 0;
  282. @include fs10;
  283. }
  284. // label{width:30%;}
  285. input.form-text{
  286. width:150px; height:2em;
  287. }
  288. .form-actions{
  289. margin: 5px 0; padding: 0; background-color:transparent; text-align: right;
  290. input.form-submit{
  291. // @include fs12;
  292. @include fs16; padding: 0.1em 0.6em 0.2em; @include rounded(0.3em);
  293. font-weight:bold;
  294. margin-bottom:4px;
  295. border: 2px solid #E6DE1C; background-color:#E6DE1C; color:#fff; // noire/jaune
  296. @include shadowTextBtnBlack();
  297. }
  298. }
  299. div.newpass{
  300. text-align: right;
  301. a{
  302. @include fs11;
  303. color:#686868;
  304. text-transform: lowercase;
  305. }
  306. }
  307. // div.register a{
  308. // display:block; padding: 10px 5px; background-color: #ccf718; font-weight:bold; text-align: center; .14;
  309. // }
  310. }
  311. html.no-touch &:hover, &.hovered{
  312. form#user-login-form{
  313. height:300px;
  314. &>div{
  315. }
  316. z-index:$header-z-index;
  317. }
  318. }
  319. @media #{$small-only}{
  320. span.login{display:none;}
  321. } //change this
  322. }
  323. #block-ajax-register-ajax-register-block{
  324. @include fs12;
  325. text-transform: lowercase;
  326. }
  327. #block-logintoboggan-logintoboggan-logged-in{
  328. @include fs12;
  329. line-height:1.5;
  330. i{
  331. vertical-align: text-bottom;
  332. margin: 0 5px 1px 0;
  333. line-height:1;
  334. }
  335. a span.account{text-transform: lowercase;}
  336. a span.logout{display:none; margin-left:5px; }
  337. .fi-power{margin: 0 0.5em 0 0.5em;}
  338. // @media #{$large-only}{ .fi-power{display: none;} }
  339. @media #{$small-only}{a span.account{display:none;}}
  340. @media #{$medium-only}{a span.account{display:none;}}
  341. }
  342. #block-materio-flag-materio-flag-mylists-nav{
  343. position:relative;
  344. h2{
  345. margin: 0;
  346. @include fs12;
  347. line-height:1.5;
  348. i{line-height:1;}
  349. @media #{$small-only}{ span.menu-title{display:none;}}
  350. @media #{$medium-only}{ span.menu-title{display:none;}}
  351. }// @include fs700;
  352. section.mylists{
  353. position:absolute; z-index:20; background-color: rgba(255, 255, 255, 0.9); min-width:100%; margin: 0 0 0 -5px;
  354. @include rounded(3px); @include drop-shadow(-2px, 2px, 5px, 0.2);
  355. .ie8 &{background:#FFF;}
  356. ul{margin: 0;}
  357. li{
  358. list-style: none;
  359. @include fs12; @include fs700;
  360. padding: 0 10px; text-align: left; width:200px;
  361. height:0; overflow:hidden; @include transition-simply-prefix(height 0.3s ease-out);
  362. // height:15px; padding: 3px 10px;
  363. a, span.preview{white-space:nowrap; cursor:pointer;}
  364. a.open-list{max-width:150px;}
  365. span.count{
  366. @include fs300;
  367. padding: 0 5px;}
  368. span.preview, a.edit-list{padding-right:5px;}
  369. .no-touch &:not(:hover) {
  370. span.preview, a.edit-list{@include op-hidden;}
  371. }
  372. }
  373. }
  374. &:hover{
  375. section.mylists{
  376. padding-bottom:5px;
  377. li{height:15px; padding: 3px 10px; }
  378. }
  379. }
  380. h2{
  381. i{ vertical-align: text-bottom; margin: 0 2px 2px 0;}
  382. // @media #{$xlarge-up}{ i{display: none;} }
  383. @media #{$small-only}{ span.menu-title{display:none;} }
  384. }
  385. }
  386. #headerblock-right{
  387. .block{
  388. @include inlineblock; padding:0; vertical-align: middle;
  389. &:first-child{padding: 0;}
  390. }
  391. }
  392. #block-menu-menu-top-menu{
  393. h2{
  394. .ie8 &{display:none;}
  395. i{ vertical-align: text-bottom; margin: 0 0 2px 0;}
  396. }
  397. ul.menu, li{
  398. @include fs12;
  399. list-style: none;
  400. .ie8 &{display: inline;}
  401. }
  402. // menu en ligne
  403. @media #{$medium-up}{
  404. h2{display:none;}
  405. ul.menu, li{
  406. @include inlineblock; vertical-align: middle;
  407. padding: 0; margin: 0;
  408. }
  409. a{padding: 0 0.5em 0 0;}
  410. } //change this
  411. //menu deroulant
  412. @media #{$small-only}{
  413. position:relative;
  414. h2 .menu-title{display: none;}
  415. .menu-wrapper{
  416. position:absolute; width:150px; display:none; right:0; padding-top:5px;
  417. ul.menu{
  418. background-color: #e6e6e6;
  419. @include rounded(5px); padding: 0 5px 5px 5px; margin: 0; text-align: right;
  420. li{
  421. height:0;
  422. overflow:hidden;
  423. @include transition-simply-prefix(height 0.3s ease-out);
  424. a{
  425. display:block; width:100%; padding:2px 5px; @include fs12;
  426. }
  427. }
  428. }
  429. }
  430. html.no-touch &:hover, &.hovered{
  431. z-index:$header-z-index;
  432. .menu-wrapper{
  433. display:block;
  434. ul.menu{li{height:25px;}}
  435. }
  436. }
  437. } //change this
  438. }
  439. #block-locale-language{
  440. position: relative;
  441. h2{
  442. @include fs9;
  443. line-height:1.6;
  444. display: inline-block;
  445. padding:0.20em 0.45em 0.10em; margin:0;
  446. @include rounded(3px);
  447. color:#fff; text-transform: uppercase;
  448. background-color: #4d4b4b;
  449. // @media #{$small-only}{ span.menu-title{display:none;}}
  450. // @media #{$medium-only}{ span.menu-title{display:none;}}
  451. }
  452. ul,li{
  453. margin:0;padding:0;list-style-type: none;
  454. @include fs12;
  455. line-height: 0.9;
  456. &.active{display:none;}
  457. }
  458. .ie8 &{padding-top:5px;}
  459. ul{
  460. padding-top:2.1em;
  461. position:absolute;
  462. top:0; left:0;
  463. text-align: left;
  464. }
  465. li{
  466. a{
  467. display: inline-block;
  468. font-size: 0.9em;
  469. padding:0.33em 0.34em 0.3em;
  470. // margin:0 0 0 0;
  471. @include rounded(3px);
  472. color:#fff; text-transform: uppercase;
  473. background-color: #808080;
  474. @include transition-simply-prefix(background-color 0.3s ease-out);
  475. &:hover{background-color: #1A1A1A;}
  476. }
  477. height:0;
  478. overflow: hidden;
  479. @include transition-simply-prefix(height 0.3s ease-in-out);
  480. }
  481. &:hover{li{height:1.5em;}}
  482. }
  483. #block-materio-user-old-database-link{
  484. a{
  485. @include fs12;
  486. ;}
  487. }
  488. }
  489. }
  490. /*
  491. __ _ ___ __ _
  492. __ __/ /_(_) (_) /_(_)__ _____
  493. / / / / __/ / / / __/ / _ \/ ___/
  494. / /_/ / /_/ / / / /_/ / __(__ )
  495. \__,_/\__/_/_/_/\__/_/\___/____/
  496. */
  497. #utilities{
  498. background-color: #fff;
  499. margin-top:$headerouterheight;
  500. .not-logged-in &{ overflow:hidden; }
  501. &>.inner{padding:0.5em 0;}
  502. &.closed{
  503. .tabs, .node-didactique{display:none;} height:0;
  504. }
  505. @media #{$small-only}{
  506. margin-top:0;
  507. }
  508. // max-height: 100px;
  509. }
  510. /*
  511. _
  512. ____ ___ ____ _(_)___
  513. / __ `__ \/ __ `/ / __ \
  514. / / / / / / /_/ / / / / /
  515. /_/ /_/ /_/\__,_/_/_/ /_/
  516. */
  517. #main{
  518. body.home-v2 &{
  519. padding-top:$headerouterheight;
  520. }
  521. }
  522. /*
  523. __ _ __ ___ __ __ __
  524. / /_ (_)___ _/ /_ / (_)___ _/ /_ / /____ ____/ /
  525. / __ \/ / __ `/ __ \/ / / __ `/ __ \/ __/ _ \/ __ /
  526. / / / / / /_/ / / / / / / /_/ / / / / /_/ __/ /_/ /
  527. /_/ /_/_/\__, /_/ /_/_/_/\__, /_/ /_/\__/\___/\__,_/
  528. /____/ /____/
  529. */
  530. #highlighted{
  531. @include rounded(5px);
  532. @include drop-shadow(0, 0, 6px, 0.6);
  533. padding: 0.5em;
  534. position:relative;
  535. @media #{$medium-up}{
  536. margin: 20px 0 6px;
  537. .block{ @include inlineblock; vertical-align: top; }
  538. .block-materio-didactique{
  539. width:65%;
  540. .side{
  541. @include inlineblock(); vertical-align: top;
  542. position:relative; //height:100%;
  543. }
  544. .group-sideleft{ width:65%; }
  545. .group-sideright{ width:30%; }
  546. .field-name-title-field{@include fs24;}
  547. // .field-name-field-visuel{}
  548. .node.emvideo{
  549. .group-sideleft, .group-sideright{ width:47%; }
  550. .group-sideleft{margin-right:2%;}
  551. // .field-name-field-visuel{display:none;}
  552. }
  553. }
  554. #block-materio-user-user-register{
  555. width:30%; padding:5px; height:290px;
  556. }
  557. }
  558. @media #{$small-up}{
  559. .block-materio-didactique{
  560. .side{@include inlineblock(); vertical-align: top;}
  561. }
  562. }
  563. @media #{$small-only}{
  564. margin:10px 0 6px;
  565. .block-materio-didactique{
  566. .group-sideleft, .group-sideright{ width:100%; }
  567. .node-didactique{
  568. .field-name-title-field{
  569. @include fs20;
  570. font-weight:normal!important;
  571. // &:before{content:"- ";}
  572. &:after{
  573. content:"\a0\f10b";
  574. font-family: "foundation-icons";
  575. font-style: normal;
  576. font-weight: normal;
  577. font-variant: normal;
  578. text-transform: none;
  579. line-height: 1;
  580. -webkit-font-smoothing: antialiased;
  581. display: inline-block;
  582. text-decoration: inherit;
  583. font-size: 16px;
  584. }
  585. }
  586. }
  587. html.js & .node-didactique{
  588. height:auto;
  589. height:30px; overflow: hidden;
  590. &.opened{height:auto;}
  591. }
  592. }
  593. }
  594. // @media #{$small-only}{
  595. // .block-materio-didactique{
  596. // // .pt(150px);
  597. // .group-sideleft{ width:50%; }
  598. // .group-sideright{ width:50%; }
  599. // }
  600. // } //change this
  601. .oldie &{
  602. .block{@include inlineblock;}
  603. }
  604. .block-materio-didactique{
  605. // .ie8 &{max-width:850px; border: 1px solid #C6C6C6;}
  606. .node-didactique{
  607. @include fs14;
  608. background-color:#fff; //padding: 5px;
  609. margin: 0 auto;
  610. // .ie8 &{max-width:750px; margin-left:15px; margin-top:10px;}
  611. .side{position:relative;}
  612. .field-name-title-field{
  613. @include fs900;
  614. @include italic;
  615. padding:5px 0;
  616. }
  617. .field-name-field-visuel{
  618. text-align: center;
  619. figure, img{display:inline;}
  620. }
  621. &.emvideo{
  622. .field-name-field-visuel{display:none;}
  623. }
  624. // .field-name-field-emvideo{
  625. // a{
  626. // display:block; width:100%; height:100%;
  627. // background: transparent url(../img/vimeo-play-btn.png) no-repeat center center;
  628. // &:hover{background-image: url(../img/vimeo-play-btn-hover.png);}
  629. // img{max-width:100%;}
  630. .ie8 &{.player{display:none;}}
  631. // }
  632. // }
  633. }
  634. html.js &{
  635. position:relative;
  636. overflow: hidden;
  637. .slides{
  638. height:270px; margin: 0; position:relative; width:100%; overflow:hidden;
  639. .node-didactique{ @include layer(); }
  640. .field-name-title-field{ height:30px;}
  641. .group-column-wrapper{
  642. height:240px;
  643. .side{ height:100%; }
  644. .field-name-field-emvideo{
  645. $r:0.5625;
  646. @media #{$small-only}{ $w:290px; width:$w; height:$w*$r; }
  647. @media #{$medium-only}{ $w:216px; width:$w; height:$w*$r; }
  648. @media #{$large-only}{ $w:216px; width:$w; height:$w*$r; }
  649. @media #{$xlarge-only}{ $w:280px; width:$w; height:$w*$r; }
  650. @media #{$xxlarge-only}{ $w:340px; width:$w; height:$w*$r; }
  651. *{height:100%; width:100%;}
  652. }
  653. }
  654. }
  655. .tabs{
  656. height:30px; margin: 0; text-align:left;
  657. >*{
  658. @include inlineblock(); vertical-align: top ; padding:5px 10px; @include fs12; cursor:pointer; color:#bfbfbf;
  659. &:hover, &:focus, &.active{color:#3f3f3f;}
  660. }
  661. }
  662. }
  663. }
  664. }
  665. /*
  666. __ __ __ _ __
  667. / /_ / /___ _____/ /__ ________ ____ _(_)____/ /____ _____
  668. / __ \/ / __ \/ ___/ //_/ / ___/ _ \/ __ `/ / ___/ __/ _ \/ ___/
  669. / /_/ / / /_/ / /__/ ,< / / / __/ /_/ / (__ ) /_/ __/ /
  670. /_.___/_/\____/\___/_/|_| /_/ \___/\__, /_/____/\__/\___/_/
  671. /____/
  672. */
  673. #block-materio-user-user-register, #block-materio-user-user-createaccount{
  674. min-height:120px; padding: 5px;
  675. background: transparent url('../img/register-block.png') no-repeat 100% 90%;
  676. .ie8 &{max-width:250px; float:right; background-image:none;}
  677. h2, h3{@include fs900; @include italic; padding:5px 0; margin: 0; line-height: 1; background-color:#fff; @include inlineblock(); min-width:50%;}
  678. h2{@include fs24;} h3{@include fs16;}
  679. form{margin: 0; background-color: rgba(255, 255, 255, 0.7); padding-bottom:5px; @include inlineblock(); }
  680. .form-item, .form-wrapper{
  681. margin: 0; @include inlineblock; vertical-align: middle; position:relative;
  682. }
  683. #edit-account{margin-right:5px;}
  684. input.form-text{ @include fs12; @include rounded(5px); margin-bottom:4px;.ie8 &{margin-right:5px;}}
  685. .form-item-mail input.form-text, .form-item-name input.form-text{ width:11em;}
  686. .form-item-pass input.form-text{ width:7em;}
  687. #edit-mail-check{
  688. position:absolute; bottom:100%; z-index:9999; background-image: none;
  689. height:auto; //width:90%;
  690. padding: 5px; @include rounded(5px); margin-bottom:10px;
  691. @include fs11; background-color: #fff;
  692. @include drop-shadow(0, 0, 5px, 0.6);
  693. @include transition-simply-prefix(bottom 0.1s ease-out);
  694. &.error{
  695. background-color: #f3968d;
  696. // border: 2px solid #f30002;
  697. color:#fff;
  698. }
  699. &.ok{ display:none; }
  700. }
  701. .form-submit{
  702. //border: 2px solid #69CDCF; background-color:#69CDCF; color:#FF7400; // orange/bleu
  703. @include fs16; padding: 0.1em 0.6em 0.2em; @include rounded(0.3em);
  704. font-weight:bold;
  705. margin-bottom:4px;
  706. }
  707. .form-item-termsofservices, #edit-field-newsletter{
  708. margin-bottom:0; display:block; line-height: 1;
  709. &>*{ @include inlineblock; vertical-align: middle; margin: 0; }
  710. label{ @include fs10; background-color: #fff; @include rounded(3px); }
  711. }
  712. #user-register-form{
  713. .form-submit{
  714. border: 2px solid #69CDCF; background-color:#69CDCF; color:#fff; // blanc/bleu
  715. @include shadowTextBtnBlack();
  716. &[disabled]{
  717. background-color:#ddd; border: 2px solid #ddd;
  718. }
  719. }
  720. }
  721. #user-login{
  722. .form-submit{
  723. border: 2px solid #E6DE1C; background-color:#E6DE1C; color:#fff; // noire/jaune
  724. @include shadowTextBtnBlack();
  725. }
  726. }
  727. #edit-simplenews{
  728. padding-top:0.5em;
  729. .fieldset-description{
  730. @include fs12;
  731. }
  732. .form-checkboxes{
  733. .form-item{
  734. display:block;
  735. label{@include fs12;}
  736. }
  737. }
  738. }
  739. a.join{
  740. // @include inlineblock();
  741. display:block;
  742. // margin: 10px 0;
  743. width:5em;
  744. @include fs16; padding: 0.1em 0.3em 0.2em; @include rounded(0.3em);
  745. font-weight:bold;
  746. border: 2px solid #69CDCF; background-color:#69CDCF; color:#fff; // blanc/bleu
  747. @include shadowTextBtnBlack();
  748. text-align: center; text-decoration: none;
  749. }
  750. @media #{$small-only}{
  751. background-position: 160% 50%;
  752. .form-item-mail input.form-text, .form-item-name input.form-text{ width:7em;}
  753. min-height:60px; padding: 15px 0;
  754. // #user-login, >h3:first-child, >h3 span{ display:none; }
  755. }
  756. .message-error{
  757. color:#b94a48; @include fs12;
  758. }
  759. .modal-content &{
  760. padding: 2em;
  761. width:400px;
  762. background-color: #fff;
  763. padding:5px;
  764. @include rounded(5px);
  765. @include drop-shadow(0, 0, 7px, 0.4);
  766. #user-register-form{
  767. // hide honeypot field, because drupal.attachbehavior() doesn't work
  768. div.homepage-textfield{display:none;}
  769. .description{
  770. @include fs12;
  771. }
  772. }
  773. }
  774. }
  775. /*
  776. __ __ __
  777. _________ ____ / /____ ____ / /_ / /_____ ____
  778. / ___/ __ \/ __ \/ __/ _ \/ __ \/ __/_____/ __/ __ \/ __ \
  779. / /__/ /_/ / / / / /_/ __/ / / / /_/_____/ /_/ /_/ / /_/ /
  780. \___/\____/_/ /_/\__/\___/_/ /_/\__/ \__/\____/ .___/
  781. /_/
  782. */
  783. #content-top{
  784. // padding-left:50px;
  785. /*
  786. ___ _ _ _ _
  787. | _| |___ ___ ___| |_|___| |_
  788. | _| | .'| . |___| | |_ -| _|
  789. |_| |_|__,|_ | |_|_|___|_|
  790. |___|
  791. */
  792. #block-materio-flag-materio-flag-mybookmarks, #block-materio-flag-materio-flag-mylists{
  793. // padding:5px 0;
  794. @include fs10; color:#666666; @include fs300;
  795. .ie8 &{margin-top:40px;}
  796. h2{
  797. @include fs12; @include fs700; line-height:1.2; margin:0; color:#000;
  798. a.open-list, i.fi-x{
  799. @include inlineblock(); cursor:pointer; color:#000; margin-left:0.5em;
  800. opacity:0; @include transition-simply-prefix(opacity 0.1s ease-out);
  801. }
  802. i:before{
  803. @include fs14;
  804. }
  805. }
  806. &:hover{
  807. a.open-list, i.fi-x{
  808. opacity:1;
  809. }
  810. }
  811. span.listname[name=bookmarks]{
  812. cursor:pointer;
  813. }
  814. section.bookmarks{
  815. height:0; overflow:hidden;
  816. &.active{
  817. height:auto;
  818. }
  819. article.node.vm-bookmark{
  820. overflow:hidden;
  821. }
  822. }
  823. .mylists{
  824. // .transition-simply-prefix(height 0.3s ease-out);
  825. section{
  826. h2, .flaged{
  827. height:0; overflow: hidden;
  828. }
  829. &.active{
  830. h2, .flaged{
  831. height:auto;
  832. }
  833. }
  834. }
  835. }
  836. // .js & .mybookmarks{display:none;}
  837. }
  838. }
  839. // ______ ____
  840. // /_ __/___ ____ / / /_ ____ ______
  841. // / / / __ \/ __ \/ / __ \/ __ `/ ___/
  842. // / / / /_/ / /_/ / / /_/ / /_/ / /
  843. // /_/ \____/\____/_/_.___/\__,_/_/
  844. #tool-bar{
  845. // margin-left:50px;
  846. position:relative;
  847. .inner-content{
  848. padding-top:10px; padding-bottom:10px;
  849. &>*{
  850. @include inlineblock();
  851. vertical-align: middle ;
  852. // height:35px;
  853. // margin: 5px;
  854. }
  855. @media #{$small-only}{
  856. // padding:0;
  857. // h1{line-height:0.5;}
  858. }
  859. }
  860. // text-align:right;
  861. // >*{ text-align: left ;}
  862. // .block{
  863. // .inlineblock();
  864. // margin:0 0 0 20px;
  865. // }
  866. .oldie &{background-color:#B1ADAD; padding:0 10px;}
  867. .btn-group{
  868. padding: 0; @include rounded(3px); @include bgc(#fff); margin:4px;
  869. @include shadowBtn();
  870. }
  871. #block-materio-page-title-materio-page-title{
  872. // .ie8 &{margin-top:40px;}
  873. margin: 0 10px 0 0;
  874. h1{ margin: 0;
  875. @include fs24; text-transform: capitalize; @include fs300;
  876. // line-height:1;
  877. }
  878. i{ vertical-align: middle ; margin-right:5px;}
  879. // i.icon-materio-folder{line-height: 1.3;}
  880. a.edit-list{
  881. @include op-hidden;
  882. i{ margin: 0 0 0 5px;}
  883. }
  884. &:hover{
  885. a.edit-list{ @include op-visible; }
  886. }
  887. @media #{$small-only}{ display:block;}
  888. }
  889. #block-materio-search-api-materio-search-api-viewmode{
  890. .viewmode-link{
  891. @include inlineblock(); margin:0 2px;
  892. &.active{cursor:normal;}
  893. .inner{display:none;@include fs10; }
  894. }
  895. @media #{$small-only}{
  896. .viewmode-link{ display:block; &:not(.active){display:none;} }
  897. }
  898. @media #{$small-only}{
  899. html.no-touch &:hover, &.hovered{ .viewmode-link.viewmode-cardsmall, .viewmode-link.viewmode-cardmedium{display:block;} }
  900. }
  901. @media #{$small-only}{
  902. html.no-touch &:hover, &.hovered{ .viewmode-link.viewmode-cardsmall, .viewmode-link.viewmode-cardmedium, .viewmode-link.viewmode-cardbig{display:block;} }
  903. }
  904. }
  905. // _____ __ ____ __ __
  906. // / ___/___ ____ ___________/ /_ / __ )/ /___ _____/ /__
  907. // \__ \/ _ \/ __ `/ ___/ ___/ __ \ / __ / / __ \/ ___/ //_/
  908. // ___/ / __/ /_/ / / / /__/ / / / / /_/ / / /_/ / /__/ ,<
  909. // /____/\___/\__,_/_/ \___/_/ /_/ /_____/_/\____/\___/_/|_|
  910. #block-materio-search-api-materio-search-api-search{
  911. // @include inlineblock(); vertical-align: middle ;
  912. // position:absolute; top:10px; right:0;
  913. float:right;
  914. >.inner{
  915. @include inlineblock(); margin:0 0 0 10px;
  916. min-width: 400px;
  917. padding: 5px 10px; background-color:#fff; @include rounded(3px);
  918. @include shadowBtn(); text-align: right;
  919. h4.form-title{
  920. padding: 0.2em 0 0.1em 0.2em;
  921. margin: 0.2em 0 0.1em 0.2em;
  922. text-align: left;
  923. @include fs14;
  924. html.no-js &{
  925. display:none;
  926. }
  927. }
  928. &.msa-advanced-search{
  929. // border-top: 1px solid #ccc;
  930. html.no-js &{
  931. display:none;
  932. }
  933. }
  934. }
  935. &.tabed{
  936. .searchform-tabs{
  937. text-align: left;
  938. // border-bottom: 1px solid #ccc;
  939. margin-bottom: 4px;
  940. h4{
  941. @include inlineblock();
  942. @include fs12;
  943. cursor: pointer;
  944. border-radius: 5px 5px 0 0;
  945. padding: 0.1em 0.5em;
  946. // margin:0 4px;
  947. transition: color 0.5s ease-in-out;
  948. &.active{
  949. border: 1px solid #ccc;
  950. border-bottom: 1px solid #FFF;
  951. background-color: #fff;
  952. }
  953. &:not(.active){
  954. color: #ccc;
  955. // border-bottom: 1px solid #ccc;
  956. &:hover{
  957. color: inherit;
  958. }
  959. }
  960. }
  961. &:after{
  962. content: "";
  963. display: block;
  964. // z-index: 5;
  965. // height:3px;
  966. background-color: #fff;
  967. border-top: 1px solid #ccc;
  968. margin-top: -3px;
  969. }
  970. }
  971. .msa-form-wrapper:not(.active){
  972. display: none;
  973. }
  974. }
  975. }
  976. // _____ __
  977. // / ___/___ ____ ___________/ /_
  978. // \__ \/ _ \/ __ `/ ___/ ___/ __ \
  979. // ___/ / __/ /_/ / / / /__/ / / /
  980. // /____/\___/\__,_/_/ \___/_/ /_/
  981. #materio-search-api-search-form{
  982. text-align: right;
  983. @include inlineblock(); margin: 0;
  984. .form-item, input, .form-checkboxes, .form-wrapper{@include inlineblock(); margin:0; vertical-align:middle; padding:0;}
  985. .form-checkboxes{
  986. padding: 3px; @include fs12;
  987. .form-item{
  988. margin:0 5px;
  989. label{@include fs10;}
  990. }
  991. }
  992. #edit-rightcol{
  993. padding-left: 0.5em;
  994. margin-left: 0.5em;
  995. border-left: 1px solid #ccc;
  996. }
  997. a.back-search-home{
  998. display:inline-block;
  999. vertical-align: middle;
  1000. color:#000;
  1001. // padding: 0 0.2em 0 0.5em;
  1002. // margin-left: 0.5em;
  1003. // border-left: 1px solid #ccc;
  1004. i:before{
  1005. font-size:1.3em;
  1006. }
  1007. }
  1008. input#edit-searchfield{
  1009. border: 1px solid #ccc; @include rounded(15px);
  1010. margin:3px 0 3px 3px; padding: 4px 5px; height:20px;
  1011. @include fs12; line-height:1;
  1012. background-position: 100% 7px;
  1013. // width:100%;
  1014. &.throbbing { background-position: 100% -15px; }
  1015. }
  1016. #edit-searchfield-autocomplete-aria-live{
  1017. .oldie &{
  1018. background-color:#1a1a1a;
  1019. }
  1020. };
  1021. // input#edit-create{
  1022. div.search-btn-wrapper{
  1023. display: inline-block;
  1024. padding: 3px;
  1025. }
  1026. &.loading{
  1027. div.search-btn-wrapper{
  1028. background: transparent url('../img/ajax-loader.gif') no-repeat center center;
  1029. input{ visibility: hidden; }
  1030. }
  1031. }
  1032. @media #{$small-only}{
  1033. input#edit-searchfield{width:16em;}
  1034. #edit-bundles-filter{display:none;}
  1035. }
  1036. }
  1037. // ___ __ __ _____ __
  1038. // / | ____/ / ______ _____ ________ ____/ / / ___/___ ____ ___________/ /_
  1039. // / /| |/ __ / | / / __ `/ __ \/ ___/ _ \/ __ / \__ \/ _ \/ __ `/ ___/ ___/ __ \
  1040. // / ___ / /_/ /| |/ / /_/ / / / / /__/ __/ /_/ / ___/ / __/ /_/ / / / /__/ / / /
  1041. // /_/ |_\__,_/ |___/\__,_/_/ /_/\___/\___/\__,_/ /____/\___/\__,_/_/ \___/_/ /_/
  1042. // #block-materio-search-api-mo-searchapi-advanced-search{
  1043. // // @include inlineblock(); vertical-align: middle ;
  1044. // // position:absolute; top:10px; right:0;
  1045. // float:right;
  1046. // >.inner{
  1047. // @include inlineblock(); margin:0 0 0 10px;
  1048. // padding: 3px 10px; background-color:#fff; @include rounded(3px);
  1049. // @include shadowBtn();
  1050. // // text-align: right;
  1051. // }
  1052. #materio-search-api-advanced-search-form{
  1053. >div{
  1054. position: relative;
  1055. #advancedsearch-filters-wrapper, .form-wrapper.right-col{
  1056. display: inline-block;
  1057. vertical-align: top;
  1058. }
  1059. .form-wrapper.right-col{
  1060. position: relative;
  1061. text-align: center;
  1062. >*{display:block;}
  1063. a.back-search-home{
  1064. color:#000;
  1065. padding-top: 0.45em;
  1066. i:before{
  1067. font-size:1.3em;
  1068. }
  1069. }
  1070. #edit-search{
  1071. margin: 0.5em 0 0.5em;
  1072. }
  1073. }
  1074. }
  1075. .form-wrapper.advancedsearch-filters{
  1076. padding-right: 0.5em;
  1077. margin-right: 0.5em;
  1078. border-right: 1px solid #ccc;
  1079. .advanced-search-form-table{
  1080. display:table;
  1081. // border-collapse:separate;
  1082. border-collapse: collapse;
  1083. border-spacing: 0 0.2em;
  1084. // min-width: 500px;
  1085. }
  1086. .advanced-search-form-headers{
  1087. display:table-header-group;
  1088. width:100%;
  1089. // grid-template-columns: 30% 30% 30%;
  1090. >div{
  1091. display:table-cell;
  1092. // min-width: 30%;
  1093. text-align: left;
  1094. text-transform: uppercase;
  1095. font-size: 9px;
  1096. }
  1097. >div:last-child:after{
  1098. content:"";
  1099. display:table-cell;
  1100. }
  1101. }
  1102. .filter-line{
  1103. margin:0.3em 0;
  1104. padding-top:0.3em;
  1105. display: table-row;
  1106. vertical-align: middle;
  1107. &:not(:first-child){
  1108. border-top: 1px solid #ccc;
  1109. >*{
  1110. padding:0.5em 0;
  1111. }
  1112. }
  1113. &:first-child{
  1114. >*{padding: 0.3em 0 0.5em;}
  1115. }
  1116. >*{
  1117. display:table-cell;
  1118. text-align: left;
  1119. // padding:0;
  1120. &:not(:last-child){
  1121. padding-right:0.5em;
  1122. }
  1123. &:not(:first-child):not(:last-child):before{
  1124. content:">";
  1125. color: #999;
  1126. font-size: 11px;
  1127. padding-right:0.5em;
  1128. }
  1129. }
  1130. .form-item{
  1131. // display:inline-block;
  1132. // vertical-align: middle;
  1133. @include fs12; line-height:1;
  1134. // padding-right:3em;
  1135. text-transform: capitalize;
  1136. // min-width : 4em;
  1137. margin:0 0em 0 0;
  1138. }
  1139. select{
  1140. width:auto;
  1141. }
  1142. .filter-markup{
  1143. // border-left: 1px solid #ccc;
  1144. position: relative;
  1145. // text-align: center;
  1146. span{
  1147. font-size: 11px;
  1148. color:#ccc;
  1149. padding:0.4em 1em;
  1150. text-align: center;
  1151. // display: inline-block;
  1152. // width:60%;
  1153. // background-color: #eee;
  1154. // border-radius: 7px;
  1155. }
  1156. }
  1157. .rm-btn{
  1158. // vertical-align: text-bottom;
  1159. // line-height: 3;
  1160. // height: 100%;
  1161. // input{margin-top:2em;}
  1162. }
  1163. }
  1164. // .rm-btn{
  1165. // float: right;
  1166. // margin:0.4em 0 0.4em 0.4em;
  1167. // }
  1168. .add-filter{
  1169. margin:0.5em 0;
  1170. display: table-row;
  1171. }
  1172. }
  1173. div.search-btn-wrapper{
  1174. display: inline-block;
  1175. // padding: 3px;
  1176. }
  1177. &.loading{
  1178. div.search-btn-wrapper{
  1179. background: transparent url('../img/ajax-loader.gif') no-repeat center center;
  1180. input{ visibility: hidden; }
  1181. }
  1182. }
  1183. .throbbing {
  1184. // background-position: 100% -20px; /* tweak this according to your gif */
  1185. display: none;
  1186. }
  1187. .ajax-progress-throbber{
  1188. .message{
  1189. display: none;
  1190. }
  1191. .throbber{
  1192. background: transparent url('../img/ajax-loader.gif') no-repeat center center;
  1193. }
  1194. }
  1195. }
  1196. // }
  1197. }
  1198. #center{
  1199. // background-color: #e6e6e6;
  1200. @include rounded(10px);
  1201. .node-type-page:not(.page-node-11187) &{ background-color:#fff; }
  1202. .ie8 &{height:100%; margin-top:20px;}
  1203. }
  1204. #content{
  1205. padding:1em;
  1206. @include transition-simply-prefix(height 0.3s ease-out);
  1207. &.faded{
  1208. opacity:0.5;
  1209. @include transition-simply-prefix(opacity 0.3s ease-out);
  1210. }
  1211. .materiobase-results, .materiobase-actuality, .materio-flags-list{
  1212. padding:0 0 30px 0; margin:0 0 20px 0;
  1213. &.loading{
  1214. background-image: url('../img/ajax-loader.gif');
  1215. background-position: center bottom;
  1216. background-repeat: no-repeat;
  1217. }
  1218. p.search-performance, p.flaglist-infos, p.actualities-infos{
  1219. @include fs12; @include fs500; margin: 0;
  1220. padding:10px 0 5px 15px;
  1221. }
  1222. // p.search-performance{.role-7 & {@include fs12;}}
  1223. .search-results, .actuality-items, .flaglist-items{
  1224. font-size:0;
  1225. >*{font-size:16px;}
  1226. text-align:left;
  1227. >*{text-align:left;}
  1228. }
  1229. }
  1230. ul.pager{
  1231. padding: 1em 0; text-align: left;
  1232. .ie8 &{position:absolute; left:37px; bottom: 35px;}
  1233. li{margin:0; @include inlineblock(); vertical-align: middle;}
  1234. .pager-current, a{color:#000;@include fs12; }
  1235. .pager-current{@include fs900; @include fs14;.ie8 &{background:#fff; padding:0.3em 1em 0.3em 1em; margin-top:0.05em; border: 1px solid #333333;}}
  1236. .pager-first, .pager-previous, .pager-next, .pager-last{ a{ @include fs24; @include fs300; } }
  1237. // html.js & {display:none;}
  1238. }
  1239. .node-type-page &{
  1240. // padding-left:15px;
  1241. }
  1242. }
  1243. /** #content-bottom */
  1244. #content-bottom{
  1245. padding-top:10px;
  1246. }
  1247. /*
  1248. _________ ____ ____ _____
  1249. / ____/ | / __ \/ __ \/ ___/
  1250. / / / /| | / /_/ / / / /\__ \
  1251. / /___/ ___ |/ _, _/ /_/ /___/ /
  1252. \____/_/ |_/_/ |_/_____//____/
  1253. */
  1254. $cardbookmark_w:50px;
  1255. $cardbookmark_h:70px;
  1256. $cardsmall_w:100px;
  1257. $cardsmall_h:140px;
  1258. $cardmedium_w:210px;
  1259. $cardmedium_h:295px;
  1260. $cardbig_w:425px;
  1261. $cardbig_h:610px;
  1262. $cardfull_w:850px;
  1263. $cardfull_h:610px;
  1264. $cardmargin:7px;
  1265. @mixin card-box($w, $h){
  1266. width:$w; height:$h;
  1267. @include inlineblock(); position:relative; margin:$cardmargin;
  1268. @include rounded(5px); background-color: #FFF;
  1269. @include drop-shadow(0, 0, 5px, 0.2);
  1270. @include transition-simply-prefix(box-shadow 0.3s ease-out); // opacity 0.3s ease-out); //change this commas
  1271. }
  1272. @mixin card($w, $h){
  1273. @include card-box($w, $h);
  1274. >div.side{
  1275. @include rounded(5px); overflow: hidden;
  1276. }
  1277. // .no-touch &:hover{ @include drop-shadow(0, 0, 5px, 0.7); }
  1278. &.focused{ @include drop-shadow(0, 0, $cardmargin, 0.9); }
  1279. &.just-added{ opacity:0; }
  1280. &.associated{
  1281. @include transition-simply-prefix(margin 0.3s ease-out);
  1282. &.just-added{margin-left:-$w;margin-right:$w;}
  1283. .modal-content &{
  1284. position:absolute;
  1285. top:0; left:0;
  1286. z-index:999;
  1287. }
  1288. }
  1289. &.removed{
  1290. @include transition-simply-prefix(width 0.3s ease-out);
  1291. width:0; padding-left:0; padding-right:0; margin-right:0; margin-left:0; overflow:hidden;
  1292. }
  1293. // TODO: how to show that a card was flaged ?
  1294. // .search-results &.flaged, .actuality-items &.flaged{
  1295. // border: 2px solid rgba(0,0,0, 0.3); margin: 3px;
  1296. // @include drop-shadow(0, 0, 3px, 0.6);
  1297. // }
  1298. nav.nav{
  1299. position:absolute; top:0; z-index:11;
  1300. width:24px;
  1301. left:$w - 24px;
  1302. // right:0;
  1303. padding: 5px 0;
  1304. @include border-radius(0, 5px, 0, 3px);
  1305. @include fs11;
  1306. // colors
  1307. // background-color: rgba(10, 10, 10, 0.9); color:#fff;
  1308. // a{color:#fff;}
  1309. //ul{background-color: rgba(10, 10, 10, 0.9);}
  1310. background-color: rgba(255, 255, 255, 0.9); color:#000;
  1311. a{color:#000;}
  1312. ul{background-color: rgba(255, 255, 255, 0.9);}
  1313. span.op{@include fs900; @include fs14;}
  1314. ul{padding: 0; margin: 0;}
  1315. section{
  1316. position:relative;
  1317. &>i, &>a{margin: 0 5px; &:hover{cursor:pointer;}}
  1318. }
  1319. ul{
  1320. position:absolute; right:0; top:0; margin-right:22px; min-width:80px; padding: 0; display:block;
  1321. @include rounded(3px); @include drop-shadow(-2px, 2px, 5px, 0.2);
  1322. // padding: 5px 10px;
  1323. li{
  1324. padding: 0; margin: 0; line-height:1; display:block;
  1325. height:0; overflow:hidden; @include transition-simply-prefix(height 0.2s ease-out);
  1326. // height:15px; overflow:hidden;
  1327. a{ display:block;}
  1328. }
  1329. &.links{
  1330. a{font-size:12px;}
  1331. }
  1332. &.flag-lists-entity-links{
  1333. width:160px;
  1334. font-size:0;
  1335. >*{font-size:11px;}
  1336. // &.loading{
  1337. // a{visibility: hidden;}
  1338. // background: transparent url('../img/ajax-loader.gif') no-repeat 98% center;
  1339. // }
  1340. li{
  1341. @include inlineblock(); min-width:48%; max-width:98%; padding-left:2px;
  1342. a{
  1343. color:#a6a6a6; @include transition-simply-prefix(color 0.2s ease-out);
  1344. &:hover, &.unflag-action{
  1345. color:#000; text-decoration: none;
  1346. }
  1347. }
  1348. &.flag-lists-create{
  1349. display:block; width:100%;
  1350. >*{ margin-top:1px; padding-top:1px; border-top:1px solid #e6e6e6;}
  1351. a{color:#000;}
  1352. }
  1353. &.loading{
  1354. a{visibility: hidden;}
  1355. background: transparent url('../img/ajax-loader.gif') no-repeat 98% center;
  1356. }
  1357. }
  1358. }
  1359. .ie8 &{background:#FFF;}
  1360. }
  1361. section:hover{
  1362. ul{
  1363. padding: 5px 5px;
  1364. li{height:17px;}
  1365. &.flag-lists-entity-links{
  1366. // width:160px;
  1367. }
  1368. }
  1369. }
  1370. }
  1371. div.workflow{
  1372. position:absolute; bottom:0; right:0; z-index:11;
  1373. padding: 5px;
  1374. @include border-radius(3px, 0, 5px, 0);
  1375. @include fs11; vertical-align: top;
  1376. background-color: rgba(20, 20, 20, 0.9); color:#fff;
  1377. span{padding: 3px 0 0 4px; @include inlineblock();}
  1378. }
  1379. .field-name-field-description .upgrade{
  1380. @include fs12;
  1381. padding-top:4em;margin-top:-4.5em;
  1382. // .bgc(rgba(255,255,255,0.6));
  1383. background : linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 4em);
  1384. position:relative;
  1385. }
  1386. .side.oops p, .side .upgrade p{
  1387. padding: 10px; @include fs12;
  1388. a{
  1389. display:block; margin: 10px 0;
  1390. @include fs18; padding: 0.1em 0.6em 0.2em; @include rounded(0.3em);
  1391. font-weight:bold;
  1392. border: 2px solid #69CDCF; background-color:#69CDCF; color:#fff; // blanc/bleu
  1393. @include shadowTextBtnBlack();
  1394. text-align: center; text-decoration: none;
  1395. }
  1396. }
  1397. // NOTES
  1398. $note_label_h:20px;
  1399. &.node-materiau.vm-cardmedium,
  1400. &.node-materiau.vm-cardbig{
  1401. transition: width 0.3s ease-in-out;
  1402. &.note-opened{
  1403. >div.side{
  1404. width:$w;
  1405. }
  1406. width:$w*2+$cardmargin*2;
  1407. nav.nav{
  1408. border-radius: 0 0 0 3px;
  1409. }
  1410. }
  1411. }
  1412. &.node-materiau.vm-cardmedium.note-opened,
  1413. &.node-materiau.vm-cardbig.note-opened,
  1414. &.node-materiau.vm-cardfull.note-opened{
  1415. .note-wrapper{
  1416. z-index:10; position :absolute;
  1417. .close{
  1418. position: absolute;
  1419. width:15px; height:15px;
  1420. top:5px; right:5px;
  1421. background-color: #fff!important;
  1422. background-image: url(../img/close2.png);
  1423. background-size: contain;
  1424. background-position: center;
  1425. cursor: pointer;
  1426. }
  1427. .form-item{
  1428. margin:0;
  1429. }
  1430. label{
  1431. // display: none;
  1432. height:$note_label_h;
  1433. @include fs14;
  1434. margin:0 5px;
  1435. line-height: 1.6;
  1436. }
  1437. textarea{
  1438. border: #ccc 1px solid;
  1439. resize:none;
  1440. padding:5px; margin:5px;
  1441. @include fs12;
  1442. }
  1443. }
  1444. }
  1445. &.node-materiau.vm-cardmedium.note-opened,
  1446. &.node-materiau.vm-cardbig.note-opened{
  1447. .note-wrapper{
  1448. width:$w+$cardmargin*2; height:$h;
  1449. top:0; right:0;
  1450. }
  1451. textarea{
  1452. width:$w+$cardmargin*2 - 10px;
  1453. border-radius: 0 7px 7px 0;
  1454. height:$h - 10px - $note_label_h;
  1455. }
  1456. }
  1457. &.node-materiau.vm-cardfull.note-opened{
  1458. .note-wrapper{
  1459. width:$w / 2;
  1460. left:0;
  1461. height:$h / 2;
  1462. top:$h / 2;
  1463. background-color: #fff;
  1464. border-radius: 0 0 0 7px;
  1465. }
  1466. textarea{
  1467. width:$w / 2 - 10px;
  1468. border-radius: 0 0 0 7px;
  1469. height:$h / 2 - 10px - $note_label_h;
  1470. }
  1471. }
  1472. }// .card()
  1473. /*
  1474. _ _ ___
  1475. ___ ___ ___ _| | ___ ___ ___ ___ ___| |_ ___ ___ ___| _|___ ___ _____ ___ ___ ___ ___
  1476. | _| .'| _| . | |_ -| -_| .'| _| _| | | . | -_| _| _| . | _| | .'| | _| -_|
  1477. |___|__,|_| |___| |___|___|__,|_| |___|_|_| | _|___|_| |_| |___|_| |_|_|_|__,|_|_|___|___|
  1478. |_|
  1479. */
  1480. article.search-performance{
  1481. .inner{
  1482. padding: 1em;
  1483. }
  1484. p{@include fs14;}
  1485. a.button{
  1486. display:block; margin: 10px auto; max-width:10em;
  1487. @include fs18; padding: 0.1em 0.6em 0.2em; @include rounded(0.3em);
  1488. font-weight:bold;
  1489. border: 2px solid #69CDCF; background-color:#69CDCF; color:#fff; // blanc/bleu
  1490. @include shadowTextBtnBlack();
  1491. text-align: center; text-decoration: none;
  1492. }
  1493. &.view-mode-cardsmall{
  1494. @include card-box(327px, 140px);
  1495. }
  1496. &.view-mode-cardmedium{
  1497. @include card-box(210px, 295px);
  1498. .inner{
  1499. padding: 4em 1em 0;
  1500. }
  1501. }
  1502. &.view-mode-cardbig{
  1503. @include card-box(425px, 115px);
  1504. display:block; margin:0 auto;
  1505. }
  1506. &.view-mode-cardfull{
  1507. @include card-box(850px, 115px);
  1508. .inner{
  1509. padding: 1em 212px;
  1510. }
  1511. display:block; margin:0 auto;
  1512. }
  1513. }
  1514. /*
  1515. ______ __ ____ __ __
  1516. / ____/___ __________/ / / __ )____ ____ / /______ ___ ____ ______/ /_______
  1517. / / / __ `/ ___/ __ / / __ / __ \/ __ \/ //_/ __ `__ \/ __ `/ ___/ //_/ ___/
  1518. / /___/ /_/ / / / /_/ / / /_/ / /_/ / /_/ / ,< / / / / / / /_/ / / / ,< (__ )
  1519. \____/\__,_/_/ \__,_/ /_____/\____/\____/_/|_/_/ /_/ /_/\__,_/_/ /_/|_/____/
  1520. */
  1521. article.node-materiau.vm-bookmark, article.node-breve.vm-bookmark{
  1522. @include card($cardbookmark_w, $cardbookmark_h);
  1523. margin:3px;
  1524. .group-header{
  1525. display:none;
  1526. }
  1527. .group-images{ @include horihoverswitch(); }
  1528. // nav.nav{top:0;}
  1529. div.workflow{display:none;}
  1530. }
  1531. /*
  1532. ______ __ _____ ____
  1533. / ____/___ __________/ / / ___/____ ___ ____ _/ / /
  1534. / / / __ `/ ___/ __ / \__ \/ __ `__ \/ __ `/ / /
  1535. / /___/ /_/ / / / /_/ / ___/ / / / / / / /_/ / / /
  1536. \____/\__,_/_/ \__,_/ /____/_/ /_/ /_/\__,_/_/_/
  1537. */
  1538. article.node-materiau.vm-cardsmall, article.node-breve.vm-cardsmall{
  1539. @include card($cardsmall_w, $cardsmall_h); //width:100px; height:140px;
  1540. .group-header{
  1541. display:none; position:absolute;
  1542. @include fs14; @include fs500;
  1543. .field-name-title-field{@include fs700;}
  1544. .field-name-field-reference-materio, .field-name-field-localisation{ @include inlineblock(); @include fs12; }
  1545. .field-name-field-localisation{ float:right; }
  1546. }
  1547. .group-images{ @include horihoverswitch(); @include rounded(5px); overflow:hidden; }
  1548. nav.nav{
  1549. ul.flag-lists-entity-links{
  1550. width:75px; min-width:75px;
  1551. li{width:98%;}
  1552. }
  1553. .ie8 &{background: #FFF}
  1554. }
  1555. .no-touch &:not(.focused) nav.nav{@include op-hidden;}
  1556. .no-touch &:not(.focused) div.workflow{@include op-hidden;}
  1557. }
  1558. /*
  1559. ______ ____ _ ____ __
  1560. /_ __/___ ____ / / /_(_)___ _________ ___ ____ _/ / / _________ __________/ /
  1561. / / / __ \/ __ \/ / __/ / __ \ / ___/ __ `__ \/ __ `/ / / / ___/ __ `/ ___/ __ /
  1562. / / / /_/ / /_/ / / /_/ / /_/ / (__ ) / / / / / /_/ / / / / /__/ /_/ / / / /_/ /
  1563. /_/ \____/\____/_/\__/_/ .___/ /____/_/ /_/ /_/\__,_/_/_/ \___/\__,_/_/ \__,_/
  1564. /_/
  1565. */
  1566. #tooltip{
  1567. .group-header.smallcard{
  1568. @include fs14; @include fs500;
  1569. .field-name-title-field{@include fs700;}
  1570. .field-name-field-reference-materio, .field-name-field-localisation{ @include inlineblock(); @include fs12; }
  1571. .field-name-field-localisation{ float:right; }
  1572. }
  1573. }
  1574. /*
  1575. ______ __ __ ___ ___
  1576. / ____/___ __________/ / / |/ /__ ____/ (_)_ ______ ___
  1577. / / / __ `/ ___/ __ / / /|_/ / _ \/ __ / / / / / __ `__ \
  1578. / /___/ /_/ / / / /_/ / / / / / __/ /_/ / / /_/ / / / / / /
  1579. \____/\__,_/_/ \__,_/ /_/ /_/\___/\__,_/_/\__,_/_/ /_/ /_/
  1580. */
  1581. article.node-materiau.vm-cardmedium, article.node-breve.vm-cardmedium{
  1582. @include card($cardmedium_w, $cardmedium_h); //width:210px; height:295px;
  1583. .side{
  1584. @include layer(); background-color:#fff; cursor:pointer;
  1585. &:nth-child(2){z-index:1;}
  1586. }
  1587. .group-header{
  1588. position:absolute; bottom:0; z-index:2;
  1589. width:190px; padding:5px 15px 5px 5px; min-height:55px;
  1590. @include fs20; @include fs300; line-height:1;
  1591. .field-name-title-field{@include fs700;}
  1592. .field-name-field-nature-titre{@include fs14;}
  1593. @include bgcWhite();
  1594. @include border-radius(0, 0, 4px, 4px); overflow: hidden;
  1595. .field-name-field-reference-materio, .field-name-field-localisation, .field-name-field-authored-on{ @include inlineblock(); @include fs12; vertical-align: bottom; width:48%;}
  1596. .field-name-field-localisation{ text-align: right; }
  1597. .ie8 &{background:#fff; font-color:#000; line-height: 1em; padding: 10px;}
  1598. }
  1599. &.node-breve .group-header{
  1600. // @include fs20; @include fs300; line-height:1.1;
  1601. color:#fff; @include bgcBlack();
  1602. .field-name-field-authored-on{ @include fs12; @include fs500; }
  1603. .ie8 &{background:#000; font-size:15px; line-height: 1.2em;}
  1604. }
  1605. // &:hover .group-header{
  1606. // .bgcWhiteParentHover();
  1607. // }
  1608. .group-images{ @include horihoverswitch(); }
  1609. // side 2 : description
  1610. .field-name-field-description, .field-name-body{
  1611. @include fs12; @include fs300; overflow: hidden; z-index:-1; @include columnized(5px);
  1612. .column>*{padding-right:25px;}
  1613. }
  1614. // side 3 : samples
  1615. .field-name-field-location{
  1616. @include fs12; padding:5px; @include fs300;
  1617. .field-label{ @include fs10; text-transform: lowercase; margin:0;}
  1618. }
  1619. // side 4 : companies
  1620. .column-wrapper{
  1621. @include columnized(5px);
  1622. }
  1623. .field-name-field-company-fab, .field-name-field-company-distrib{
  1624. @include fs12; padding:5px; @include fs300;
  1625. .field-label{ @include fs10; text-transform: lowercase; margin:0;}
  1626. .field-name-field-tode-company{@include fs14;}
  1627. // span.print-link{display:none;}
  1628. }
  1629. .field-name-field-materiau-ref, .field-name-field-source, .field-name-field-attachments{
  1630. @include fs12; padding: 5px; @include fs300; a{color:#000;}
  1631. }
  1632. .field-label{@include fs900; margin: 1em 0 0.5em;}
  1633. // nav
  1634. .no-touch &:not(.focused) nav.nav{@include op-hidden;}
  1635. .no-touch &:not(.focused) div.workflow{@include op-hidden;}
  1636. .ie8 &{nav.nav{background: #FFF}}
  1637. }
  1638. /*
  1639. ______ __ ____ _
  1640. / ____/___ __________/ / / __ )(_)___ _
  1641. / / / __ `/ ___/ __ / / __ / / __ `/
  1642. / /___/ /_/ / / / /_/ / / /_/ / / /_/ /
  1643. \____/\__,_/_/ \__,_/ /_____/_/\__, /
  1644. /____/
  1645. */
  1646. article.node-materiau.vm-cardbig, article.node-breve.vm-cardbig{
  1647. @include card($cardbig_w, $cardbig_h); //width:425px; height:610px;
  1648. >.side{
  1649. @include layer();
  1650. background-color:#fff;
  1651. height:270px;
  1652. top:340px; cursor:pointer;
  1653. &:nth-child(2){z-index:1;}
  1654. }
  1655. .group-side1{
  1656. position:relative; @include border-radius(5px, 5px, 0, 0); overflow:hidden;
  1657. width:$cardbig_w;
  1658. }
  1659. .group-header{
  1660. position:absolute; bottom:0; z-index:2;
  1661. width:405px; padding:10px;
  1662. @include fs20; @include fs300; line-height: 1.1;
  1663. .field-name-title-field{@include fs700;}
  1664. .field-name-field-nature-titre{@include fs14;}
  1665. @include bgcWhite();
  1666. .field-name-field-reference-materio, .field-name-field-localisation, .field-name-field-authored-on { @include inlineblock(); @include fs12; vertical-align: bottom; width:48%;}
  1667. .field-name-field-localisation{ text-align: right; }
  1668. .ie8 &{background:#fff; font-color:#000; line-height: 1em; padding: 20px; border-bottom: 1px solid #C6C6C6;}
  1669. }
  1670. // &:hover .group-header{ .bgcWhiteParentHover(); }
  1671. &.node-breve .group-header{
  1672. color:#fff; @include bgcBlack();
  1673. .field-name-field-authored-on{ @include fs12; @include fs500; }
  1674. .ie8 &{background:#000; font-color:#fff; line-height: 1em; padding: 20px;}
  1675. }
  1676. .group-images{ @include horihoverswitch(); height:auto;}
  1677. // side 2
  1678. .field-name-field-description, .field-name-body{
  1679. @include fs12; @include fs300; @include columnized(10px);
  1680. }
  1681. // side 3 : samples
  1682. .field-name-field-location{
  1683. @include fs12; padding:10px; @include fs300;
  1684. .field-label{ @include fs10; text-transform: lowercase; float: none; }
  1685. }
  1686. // ?????
  1687. .column-wrapper{
  1688. @include columnized(10px);
  1689. }
  1690. // side 4
  1691. .field-name-field-company-fab, .field-name-field-company-distrib{
  1692. @include fs12; padding:10px; @include fs300;
  1693. .field-label{ @include fs10; text-transform: lowercase; float: none; }
  1694. .field-name-field-tode-company{@include fs14;}
  1695. }
  1696. .field-name-field-materiau-ref, .field-name-field-source, .field-name-field-attachments{
  1697. @include fs12; padding: 10px; @include fs300; a{color:#000;}
  1698. }
  1699. .field-label{@include fs900; margin: 0 0 0.5em;}
  1700. // nav
  1701. // nav.nav{ margin: 5px; }
  1702. .ie8 &{nav.nav{background: #FFF}}
  1703. // upgarde and full
  1704. .side.oops p, .side .upgrade p{
  1705. padding: 3em;
  1706. a{
  1707. border: 2px solid #eee; background-color:#eee; color:#fff;
  1708. @include transition-simply-prefix(border 0.3s ease-out);
  1709. @include transition-simply-prefix(background-color 0.3s ease-out);
  1710. }
  1711. }
  1712. &:hover .side.oops p, &:hover .side .upgrade p{
  1713. a{
  1714. border: 2px solid #69CDCF; background-color:#69CDCF;
  1715. }
  1716. }
  1717. }
  1718. /*
  1719. ______ __ ______ ____
  1720. / ____/___ __________/ / / ____/_ __/ / /
  1721. / / / __ `/ ___/ __ / / /_ / / / / / /
  1722. / /___/ /_/ / / / /_/ / / __/ / /_/ / / /
  1723. \____/\__,_/_/ \__,_/ /_/ \__,_/_/_/
  1724. */
  1725. article.node-materiau.vm-cardfull, article.node-breve.vm-cardfull{
  1726. @include card($cardfull_w, $cardfull_h); //width:875px; height:610px;
  1727. nav.nav{top:0;}
  1728. font-size:0px;
  1729. >*{@include fs16;}
  1730. >.side{@include inlineblock(); width:50%;
  1731. &.group-side-left{
  1732. @include border-radius(5px, 0, 0, 5px);
  1733. }
  1734. &.group-side-right{
  1735. @include border-radius(0, 5px, 5px, 0);
  1736. }
  1737. }
  1738. .group-images{ @include horihoverswitch(); }
  1739. .group-header{
  1740. @include fs20; @include fs300; padding:10px 10px 0 10px;
  1741. .field-name-title-field{@include fs700;}
  1742. .field-name-title-field,.field-name-field-reference-materio{
  1743. @include inlineblock;
  1744. vertical-align: baseline;
  1745. // line-height: 40px;
  1746. }
  1747. .field-name-field-reference-materio{@include fs12;}
  1748. }
  1749. &.node-breve .group-header{
  1750. color:#fff; @include bgcBlack();
  1751. .field-name-field-authored-on{ @include fs500; }
  1752. }
  1753. // Samples
  1754. .field-name-field-location{
  1755. @include fs12; padding:5px 10px 0 10px; @include fs300;
  1756. .field-label, .field-items, .field-item{
  1757. @include inlineblock; vertical-align: baseline;
  1758. }
  1759. .field-label{ @include fs10; text-transform: lowercase; float: none; }
  1760. }
  1761. .field-name-field-description, .field-name-body{
  1762. @include fs12; @include fs300; padding: 5px 10px 0 10px;
  1763. }
  1764. .field-name-field-attachments{
  1765. padding: 10px;
  1766. @include fs12;
  1767. }
  1768. // side 4 : companies
  1769. .field-name-field-company-fab, .field-name-field-company-distrib{
  1770. @include fs12; padding:10px; @include fs300;
  1771. @include inlineblock(); width:40%;
  1772. .field-item{margin-top:1em;}
  1773. .field-label{ @include fs10; text-transform: lowercase; float: none; }
  1774. .field-name-field-tode-company{@include fs14;}
  1775. }
  1776. .field-name-field-materiau-ref, .field-name-field-source, .field-name-field-attachments{
  1777. @include fs12; padding: 10px; @include fs300; a{color:#000;}
  1778. }
  1779. .field-label{@include fs900; margin: 0 0 0.5em;}
  1780. // nav
  1781. // nav.nav{ margin: 5px; }
  1782. div.workflow{ margin: 5px; }
  1783. // upgarde and full
  1784. .side.oops p, .side .upgrade p{
  1785. padding: 3em;
  1786. a{
  1787. border: 2px solid #eee; background-color:#eee; color:#fff;
  1788. @include transition-simply-prefix(border 0.3s ease-out);
  1789. @include transition-simply-prefix(background-color 0.3s ease-out);
  1790. }
  1791. }
  1792. &:hover .side.oops p, &:hover .side .upgrade p{
  1793. a{
  1794. border: 2px solid #69CDCF; background-color:#69CDCF;
  1795. }
  1796. }
  1797. }
  1798. /*
  1799. __ ____ _ __
  1800. _________ __________/ / / __ \_____(_)___ / /_
  1801. / ___/ __ `/ ___/ __ / / /_/ / ___/ / __ \/ __/
  1802. / /__/ /_/ / / / /_/ / / ____/ / / / / / / /_
  1803. \___/\__,_/_/ \__,_/ /_/ /_/ /_/_/ /_/\__/
  1804. */
  1805. body.print-body-materiau{
  1806. // >*{font-size:0.8em;}
  1807. }
  1808. .print-node-materiau{
  1809. margin:0 auto;
  1810. @media screen {
  1811. @include card($cardfull_w, auto);
  1812. width:1024px;
  1813. padding:1em;
  1814. }
  1815. }
  1816. .print-site_name{}
  1817. .print-content{}
  1818. .print-content .node-materiau.vm-print{
  1819. margin:0; position:relative;
  1820. .field-name-title-field{@include fs500; font-size: 1.4em;}
  1821. // .field-name-field-reference-materio, .field-name-field-localisation, .field-name-field-authored-on{ @include inlineblock(); @include fs12; padding-right:15px;}
  1822. .field-name-field-nature-titre{
  1823. @include fs500;font-size: 1em;margin-bottom: 0.5em;
  1824. }
  1825. .group-head-right{
  1826. position:absolute;
  1827. top:0; right:0;
  1828. padding-top:1em;
  1829. text-align: right;
  1830. font-size:0.8em;
  1831. .field-name-field-reference-materio{font-weight: 800; font-size: 1.2em;}
  1832. }
  1833. .side{
  1834. &.group-side-left{
  1835. width:45%;
  1836. position:absolute;
  1837. .field-name-field-description{font-size:0.8em;}
  1838. // samples
  1839. .field-name-field-location{
  1840. font-size:0.7em;
  1841. }
  1842. // companies
  1843. >.field-type-taxonomy-term-reference{
  1844. display:inline-block; vertical-align: top; width: 45%;
  1845. margin:0.5em 1em 0 0;
  1846. font-size:0.7em;
  1847. >.field-label{font-size: 0.8em; font-weight: 300;}
  1848. >.node-company{
  1849. .field-name-field-tode-company{font-size: 1.2em;}
  1850. .field-label{display:none;}
  1851. }
  1852. }
  1853. }
  1854. &.group-side-right{
  1855. section, div, figure{max-width: 100%;}
  1856. .field-name-field-materiau-image{
  1857. text-align: right;
  1858. >figure{
  1859. display: inline-block;
  1860. max-width:19%;
  1861. margin:0.5em 0 0 0.5em;
  1862. max-width:100%;
  1863. margin-left: 50%;
  1864. img{max-width:100%;}
  1865. }
  1866. .field-item{
  1867. display:none;
  1868. &:nth-child(-n+7){
  1869. display:inline-block;
  1870. }
  1871. max-width:19%;
  1872. margin:0.5em 0 0 0.5em;
  1873. &:nth-child(-n+2){
  1874. max-width:100%;
  1875. margin-left: 50%;
  1876. }
  1877. img{max-width:100%;}
  1878. }
  1879. }
  1880. }
  1881. }
  1882. .field-name-field-tode-company{
  1883. font-size: 1.5em; font-weight: 700;
  1884. }
  1885. .field-name-field-description,
  1886. .field-name-field-company-fab,
  1887. .field-name-field-reference-distrib
  1888. {
  1889. padding-bottom: 1em;
  1890. }
  1891. }
  1892. /*
  1893. ____ ____ _____ ________
  1894. / __ \/ __ \/ _/ | / /_ __/
  1895. / /_/ / /_/ // // |/ / / /
  1896. / ____/ _, _// // /| / / /
  1897. /_/ /_/ |_/___/_/ |_/ /_/
  1898. */
  1899. @media print {
  1900. @page { margin: 1.5cm 7mm 8mm; }
  1901. }
  1902. .print-site_name{
  1903. width:100%;
  1904. vertical-align: bottom;
  1905. margin-bottom:0.5em;
  1906. h1{
  1907. margin:0 0 0 0;
  1908. font-size: 1.4em;
  1909. text-align: center;
  1910. // @include inlineblock(); vertical-align: baseline; position:relative; line-height:1.25;
  1911. a{
  1912. color:inherit;
  1913. &:hover{text-decoration: none ;}
  1914. }
  1915. }
  1916. span.slogan{
  1917. display: none;
  1918. font-size: 0.8em;
  1919. margin-top:-3px;
  1920. margin-left:-0.5em;
  1921. @include fs900;
  1922. .ie8 &{position: absolute; margin-top:22px;}
  1923. }
  1924. }
  1925. .print-content{
  1926. margin-bottom: 1em;
  1927. }
  1928. .print-footer{
  1929. position:absolute; bottom:0; text-align: center; width:100%;
  1930. p{
  1931. display:inline-block; width:45%; text-align: center;
  1932. // margin: 0 3em;
  1933. }
  1934. }
  1935. /*
  1936. ___ __ ____________ __________ __ _______ __ __________________
  1937. / | / / / /_ __/ __ \/ ____/ __ \/ |/ / __ \/ / / ____/_ __/ ____/
  1938. / /| |/ / / / / / / / / / / / / / / /|_/ / /_/ / / / __/ / / / __/
  1939. / ___ / /_/ / / / / /_/ / /___/ /_/ / / / / ____/ /___/ /___ / / / /___
  1940. /_/ |_\____/ /_/ \____/\____/\____/_/ /_/_/ /_____/_____/ /_/ /_____/
  1941. */
  1942. #autocomplete{
  1943. border: 0; @include rounded(3px);
  1944. background-color: rgba(0,0,0,0.6);
  1945. text-align: left;
  1946. margin-left: 2px;
  1947. .oldie &{background-color:#545454;}
  1948. li{
  1949. color:#FFF; background-color: transparent;
  1950. &.selected{background-color: rgba(0,0,0,0.8);}
  1951. div{padding:0.1em 5px;} @include fs12;
  1952. }
  1953. }
  1954. /**
  1955. * the old modal api (balck bg) for contextual forms (create new flag list)
  1956. */
  1957. @mixin mat_modal(){
  1958. background-color: rgba(0,0,0,0.7);
  1959. @include rounded(5px); border: 0;
  1960. *{color:#fff; background-color:transparent;}
  1961. @include fs12;
  1962. form{
  1963. background-color:transparent; color:#fff; border: 0px;
  1964. .form-actions{
  1965. background-color:transparent; margin: 0; padding: 0; border: 0;
  1966. }
  1967. input.form-text, textarea, div.grippie{background-color:#fff; color:#000; border: 0;}
  1968. .form-actions{ text-align: right ;}
  1969. input.form-submit{
  1970. @include button($button-tny);
  1971. //@include btn-mini; color:#000; //change this btn bootstrap -> foundation
  1972. &[name="create"]{
  1973. @include button($button-tny, $success-color);
  1974. }
  1975. &[name="save"]{
  1976. @include button($button-tny, $success-color);
  1977. }
  1978. &[name="delete"]{
  1979. @include button($button-tny, $alert-color);
  1980. }
  1981. &[name="cancel"]{
  1982. @include button($button-tny, $secondary-color);
  1983. }
  1984. }
  1985. }
  1986. }
  1987. #modal{
  1988. @include mat_modal();
  1989. >*{padding: 10px;}
  1990. #flag-lists-form{
  1991. .form-item-title{
  1992. // label, input{.inlineblock();}
  1993. // label{width:38%;}
  1994. input{width:95%;}
  1995. }
  1996. }
  1997. .actions{
  1998. text-align: right;
  1999. }
  2000. }
  2001. /**
  2002. * the new modal api used for preview and register modal
  2003. */
  2004. .modal-wrapper {
  2005. &:before {
  2006. content: "";
  2007. display: inline-block;
  2008. height: 100%;
  2009. margin-right: -0.25em;
  2010. vertical-align: middle;
  2011. }
  2012. &:after, &:before {
  2013. -moz-box-sizing: border-box;
  2014. }
  2015. // background-color: rgba(0, 0, 0, 0.4);
  2016. bottom: 0;
  2017. // display: none;
  2018. left: 0;
  2019. position: fixed;
  2020. right: 0;
  2021. text-align: center;
  2022. top: 0;
  2023. white-space: nowrap;
  2024. z-index: 99998;
  2025. .modal-bg{
  2026. background-color: #000;
  2027. position:absolute;
  2028. top:0; left:0;
  2029. width:100%; height:100%;
  2030. opacity:0.5;
  2031. }
  2032. .modal-content{
  2033. position:relative;
  2034. display: inline-block;
  2035. margin: 0 auto;
  2036. text-align: left;
  2037. vertical-align: middle;
  2038. white-space: normal;
  2039. // width: 400px;
  2040. min-height:200px;
  2041. // background-color: #fff;
  2042. }
  2043. }
  2044. /*
  2045. _______ __________ ____ __ __ ____ ___ _ __
  2046. / / ___// ____/ __ \/ __ \/ / / / / __ \/ | / | / /
  2047. __ / /\__ \/ / / /_/ / / / / / / / / /_/ / /| | / |/ /
  2048. / /_/ /___/ / /___/ _, _/ /_/ / /___/ /___/ ____/ ___ |/ /| /
  2049. \____//____/\____/_/ |_|\____/_____/_____/_/ /_/ |_/_/ |_/
  2050. */
  2051. .jspContainer{
  2052. .jspVerticalBar{
  2053. background-color: transparent;
  2054. width:5px; //margin-right:-5px;
  2055. .jspTrack{
  2056. background-color: transparent;
  2057. .jspDrag{
  2058. background-color: #ccc;
  2059. @include rounded(3px);
  2060. }
  2061. }
  2062. }
  2063. }
  2064. /*
  2065. __________ ____ __ ______________
  2066. /_ __/ __ \/ __ \/ / /_ __/ _/ __ \
  2067. / / / / / / / / / / / / / // /_/ /
  2068. / / / /_/ / /_/ / /___/ / _/ // ____/
  2069. /_/ \____/\____/_____/_/ /___/_/
  2070. */
  2071. #tooltip{
  2072. position:absolute; z-index:999; max-width:180px; background-color: rgba(255, 255, 255, 1); padding: 5px; @include rounded(3px);
  2073. @include fs12; @include fs500;
  2074. @include drop-shadow(0, 0, 5px, 0.4);
  2075. &.op-visible{
  2076. @include transition-simply-prefix(opacity 0.1s ease-out); // top 0.1s linear); // left 0.1s linear,
  2077. // change this transition foundation
  2078. }
  2079. }
  2080. /*
  2081. ______________________ ____ ___ ________ __
  2082. / ____/ ____/ ____/ __ \/ __ )/ | / ____/ //_/
  2083. / /_ / __/ / __/ / / / / __ / /| |/ / / ,<
  2084. / __/ / /___/ /___/ /_/ / /_/ / ___ / /___/ /| |
  2085. /_/ /_____/_____/_____/_____/_/ |_\____/_/ |_|
  2086. */
  2087. #block-feedback-form{
  2088. @media #{$medium-only}{ bottom:5px; left:5px; right:auto; }
  2089. h2{
  2090. line-height:1.2; @include fs14; margin: 0;
  2091. .title{display:none;}
  2092. }
  2093. #feedback-form-toggle{
  2094. padding: 2px 3px; @include rounded(3px); background-color:#ff7600; color:#fff;
  2095. line-height:2; @include fs900;
  2096. }
  2097. .content{
  2098. @include mat_modal();
  2099. .ie8 &{background:#000;}
  2100. }
  2101. #feedback-status-message{background-color:#fff; padding: 5px;}
  2102. }
  2103. /*
  2104. _________ _____ __ __ __ _________ ____ _____
  2105. /_ __/ | / ___// //_/ _/_/ /_ __/ | / __ ) ___/
  2106. / / / /| | \__ \/ ,< _/_/ / / / /| | / __ \__ \
  2107. / / / ___ |___/ / /| | _/_/ / / / ___ |/ /_/ /__/ /
  2108. /_/ /_/ |_/____/_/ |_| /_/ /_/ /_/ |_/_____/____/
  2109. */
  2110. @mixin tabs-primary(){
  2111. a{
  2112. @include fs12;
  2113. padding: 5px 10px;
  2114. background-color:#e6e6e6;
  2115. &.active, &:hover{background-color:#e6e6e6;}
  2116. @include rounded(3px);
  2117. }
  2118. }
  2119. @mixin tabs-secondary(){
  2120. @include fs10;
  2121. padding: 0.5em 1em;
  2122. }
  2123. #tasks{
  2124. ul.tabs{
  2125. @include inlineblock();
  2126. border:0 solid #fff;
  2127. padding: 0; margin: 0;
  2128. li{padding: 0; margin: 2px 5px; border:0 solid #fff;}
  2129. a{
  2130. border:0; color:#7f7f7f;
  2131. &.active, &:hover{font-weight: 900; color:#000;}
  2132. }
  2133. &.primary{
  2134. @include tabs-primary();
  2135. }
  2136. &.secondary{
  2137. @include tabs-secondary();
  2138. }
  2139. }
  2140. }
  2141. /*
  2142. ______________ _____________________
  2143. / ___/_ __/ |/_ __/ _/ ____/ ___/
  2144. \__ \ / / / /| | / / / // / \__ \
  2145. ___/ // / / ___ |/ / _/ // /___ ___/ /
  2146. /____//_/ /_/ |_/_/ /___/\____//____/
  2147. */
  2148. /*
  2149. _ _ ___ ___ ___
  2150. | | |_ -| -_| _|
  2151. |___|___|___|_|
  2152. */
  2153. .page-user, .page-user-edit, .page-user-password, .page-user-reset, .page-toboggan{
  2154. #center{background: #fff url('../img/user-page-bg.gif') no-repeat bottom right;}
  2155. .messages{ width:800px; margin:0 auto; }
  2156. &.role-6 #tasks .tabs.primary{display:none;}
  2157. &.role-6 #tasks .tabs.secondary{@include tabs-primary();}
  2158. #center >*{
  2159. width:800px; margin:0 auto; padding-top:1em; @include fs14;
  2160. fieldset{
  2161. margin-bottom:1em;
  2162. border:none;
  2163. }
  2164. legend{
  2165. @include fs16; margin:0; padding:10px 0 5px 0; line-height:1; border:0 solid #fff;
  2166. a{color:#000;}
  2167. }
  2168. .form-item{
  2169. margin:0 0 0.5em 0; width:100%;
  2170. label, input.form-text{
  2171. @include inlineblock(); vertical-align:middle;
  2172. }
  2173. label{margin-right:1em;}
  2174. input.form-text{
  2175. padding:2px 4px; width:20em;
  2176. }
  2177. }
  2178. .form-wrapper{
  2179. &>.form-item{margin:0 0 2em 0;}
  2180. }
  2181. .form-type-password-confirm, .form-type-new-password-confirm{
  2182. label{width:9em;}
  2183. .password-parent{width:auto;}
  2184. .password-strength, .password-confirm{
  2185. width:15em; margin-top:0;
  2186. }
  2187. }
  2188. .form-type-checkbox{
  2189. input{margin:0;}
  2190. label{@include fs14; margin:0;}
  2191. }
  2192. #edit-language{
  2193. .form-item{
  2194. @include inlineblock(); width:auto; margin-right:1em;
  2195. input, label{margin:0;}
  2196. }
  2197. }
  2198. select.form-select{
  2199. width:auto; padding:2px 4px; height:auto;
  2200. }
  2201. div.description{
  2202. @include fs11;
  2203. }
  2204. div.form-actions{
  2205. margin: 0; text-align:right; padding: 1em 0.5em;
  2206. }
  2207. // input#edit-submit{@include btn; @include btn-success;} //change this btn foundation
  2208. &#user-profile-form{
  2209. label{min-width:10em; }
  2210. }
  2211. #edit-profile-adherent-field-first-name, #edit-profile-adherent-field-name,
  2212. #edit-profile-adherent-field-private-quality, #edit-profile-adherent-field-service, #edit-profile-adherent-field-employee,
  2213. #edit-profile-adherent-field-naf, #edit-profile-adherent-field-siret{
  2214. @include inlineblock(); vertical-align:middle; width:auto; margin: 0 1em 0.5em 0;
  2215. div{width:auto; margin: 0; padding: 0;}
  2216. // label{margin: 0 0.5em 0 0;}
  2217. }
  2218. // #edit-profile-adherent-field-name, #edit-profile-adherent-field-service,
  2219. // #edit-profile-adherent-field-naf, #edit-profile-adherent-field-siret, .form-item-profile-adherent-field-adresse-und-0-locality{
  2220. // label{min-width:auto;}
  2221. // }
  2222. #edit-profile-adherent-field-siret{label{width:auto;}input{width:8em;}}
  2223. #edit-profile-adherent-field-naf{input{width:13em;}}
  2224. #edit-profile-adherent-field-organization{ margin: 2em 0 0 0; }
  2225. #edit-profile-adherent-field-employee{
  2226. label{width:auto;}
  2227. input{width:4em;}
  2228. }
  2229. #edit-profile-adherent-field-private-phone{
  2230. .form-phone-number{
  2231. @include inlineblock(); vertical-align:middle;
  2232. #edit-profile-adherent-field-private-phone-und-0-number{width:10em;}
  2233. }
  2234. }
  2235. #edit-profile-adherent-field-adresse-und-0{
  2236. padding:0;
  2237. .street-block{
  2238. input{ width:35em;}
  2239. }
  2240. .locality-block{
  2241. .form-item{width:auto; margin-right:1em;}
  2242. }
  2243. }
  2244. #edit-profile-adherent-field-user-website{
  2245. margin: 2em 0 0 0;
  2246. .form-item>*{@include inlineblock(); vertical-align: middle; }
  2247. input{width:35em}
  2248. }
  2249. &.profile{
  2250. h3{border:0 solid transparent;}
  2251. .field-label{display:inline;}
  2252. }
  2253. #edit-mimemail, #edit-locale, #edit-timezone{padding:0;}
  2254. }
  2255. } // user
  2256. /*
  2257. _ __
  2258. _____(_)___ ___ ____ / /__ ____ ___ _ _______
  2259. / ___/ / __ `__ \/ __ \/ / _ \/ __ \/ _ \ | /| / / ___/
  2260. (__ ) / / / / / / /_/ / / __/ / / / __/ |/ |/ (__ )
  2261. /____/_/_/ /_/ /_/ .___/_/\___/_/ /_/\___/|__/|__/____/
  2262. /_/
  2263. */
  2264. // .node-type-simplenews{
  2265. // img{
  2266. // max-width: none !important;
  2267. // }
  2268. // }
  2269. body.node-type-simplenews{
  2270. #content{
  2271. .inner-content{
  2272. text-align:center;
  2273. }
  2274. article.node.node-simplenews{
  2275. @include inlineblock();
  2276. max-width:600px;
  2277. padding:1em 0;
  2278. tbody{
  2279. border-top:0px;
  2280. }
  2281. img{max-width: 9999px;}
  2282. @media #{$small-only}{
  2283. max-width: 100%;
  2284. overflow-x: hidden;
  2285. // .field-name-body{position: relative;}
  2286. // table, tbody, tr,td{
  2287. // display: block;
  2288. // max-width: 100%;
  2289. // }
  2290. table{
  2291. width:100%!important;
  2292. }
  2293. td{
  2294. vertical-align: top
  2295. }
  2296. img{max-width: 100%;}
  2297. p{
  2298. padding: 0 0.5em;
  2299. }
  2300. }
  2301. }
  2302. }
  2303. }
  2304. /*
  2305. _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____
  2306. | _ | _ | __| __| | | | | |_ _| _ | |_ _|
  2307. | __| | | | __| | --| | | | | | | | | | --| | |
  2308. |__| |__|__|_____|_____| |_____|_____|_|___| |_| |__|__|_____| |_|
  2309. */
  2310. .page-node-11175{
  2311. #main{
  2312. // background-color:#fff;
  2313. #center{
  2314. background: #fff url('../img/bg-contact.gif') no-repeat bottom right;
  2315. }
  2316. .field-name-body p{
  2317. @include inlineblock; margin: 15px;
  2318. strong{@include fs18;}
  2319. }
  2320. }
  2321. } // contact
  2322. /*
  2323. _____ _____ _____ _____ _____ _____ _____
  2324. | _ | __ | | | | | | __|
  2325. | __| -|- -| --|- -| | | | | |
  2326. |__| |__|__|_____|_____|_____|_|___|_____|
  2327. */
  2328. body.page-node-11187{
  2329. // #center{ background-color: #fff; }
  2330. @media #{$medium-up}{
  2331. .node-11187{
  2332. .field-name-body{
  2333. div.column, div.column-demi, div.column-full, div.column-auto{
  2334. &, &:last-child{
  2335. @include inlineblock; margin: 10px; float:none;
  2336. }
  2337. }
  2338. div.column{
  2339. width:22.4%;
  2340. ul.list-text, p.description{ min-height:170px;}
  2341. }
  2342. div.column-demi{
  2343. width:46%;
  2344. ul.list-text{ min-height:110px;}
  2345. }
  2346. div.column-full{
  2347. width:92%;
  2348. // ul.list-text{ min-height:110px;}
  2349. }
  2350. div.column-auto{
  2351. width:auto; max-width: 98%;
  2352. }
  2353. }
  2354. }
  2355. #block-materio-user-user-register{
  2356. width:600px; margin: 0 auto; padding:2em;
  2357. }
  2358. }
  2359. @media #{$small-only}{
  2360. // #block-materio-user-user-register{ padding: 25px 0 0 0; #user-login, >h3:first-child, h3 >span{display:block;}}
  2361. #block-system-help{text-align: center;}
  2362. }
  2363. .node-11187{
  2364. .field-name-body{
  2365. text-align:center;
  2366. >*{text-align:left;}
  2367. div.column, div.column-demi, div.column-full, div.column-auto{
  2368. position:relative; background-color: #fff;
  2369. @include rounded(5px); @include drop-shadow(0, 0, 6px, 0.5);
  2370. .ie8 &{max-width:500px; margin:auto; margin-bottom:15px; border:1px solid #C6C6C6;}
  2371. overflow:hidden;
  2372. &>*{ padding: 0 10px;}
  2373. // img{float:left; padding: 0; }
  2374. h2{ text-align: left; margin: 5px 0 0 15px;}
  2375. .subtitle{
  2376. padding: 0 0 0 15px;
  2377. @include fs18; @include italic; @include bold; line-height:1;
  2378. }
  2379. ul{margin: 0; padding: 0 15px;}
  2380. li{
  2381. list-style: none; @include fs12;
  2382. &:before{
  2383. content:"+ ";
  2384. @include fs900;
  2385. }
  2386. }
  2387. .description{
  2388. @include fs12;
  2389. margin: 0; padding: 0 15px;
  2390. }
  2391. .get-link{
  2392. margin: 0; @include border-radius(0 0 5px 5px); border: 1px solid #fff; min-height: 92px;
  2393. a{ display:block; width:100%; padding: 15px 0; color:#1A1A1A; text-decoration: none; }
  2394. }
  2395. .get-link{background-color: #C8C8C8; }
  2396. &.web{ .get-link{ background-color: #69CDCF; } }
  2397. &.webshowroom { .get-link{ background-color: #D476AE; } }
  2398. &.pack4 { .get-link{ background-color: #E6DE1C; } }
  2399. &.etudiants{ .get-link{background-color: #4BA13D; } };
  2400. // &.ecole-de-neige { .list-neige{min-height:80px;} }
  2401. &.neutral .get-link{
  2402. min-height: 62px;
  2403. padding:15px 0;
  2404. }
  2405. } // end div.column div.column-demi
  2406. div.column{
  2407. h2{ padding:10px 0 0; @include fs24; }
  2408. // .subtitle{ min-height:3em; }
  2409. .get-link{
  2410. padding: 0;
  2411. @include fs28; text-align: center;
  2412. @include italic; @include fs900;
  2413. span{ @include fs20; }
  2414. @include shadowTextBtnWhite();
  2415. }
  2416. }
  2417. div.column-demi{
  2418. h2{ padding:10px 0 0; @include fs24; top:0; }
  2419. .subtitle{ min-height:2em; }
  2420. ul{ @include fs14; min-height:120px;}
  2421. .get-link{ @include fs14; text-align: left; padding: 0 1em; background-color:#ddd; }
  2422. }
  2423. }
  2424. } // end .node-11187
  2425. // hide get free account for user already logged-in
  2426. // hide get flocon for user already flocon (role-6)
  2427. &.logged-in{
  2428. // .column.gratos{.get-link{
  2429. // cursor:auto!important;
  2430. // a{display:none!important;}
  2431. // }}
  2432. // &.role-6{
  2433. // .column.etudiants{.get-link{
  2434. // cursor:auto!important;
  2435. // a{display:none!important;}
  2436. // }}
  2437. // }
  2438. }
  2439. } // princing
  2440. /*
  2441. _____ ____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____
  2442. | _ | \| | | __| __| | | | | | __| | __ | |
  2443. | | | | | __|__ |- -| | | | | | | __| | | -| | | |
  2444. |__|__|____/|__|__|_____|_____|_____|_____|_|___| |__| |_____|__|__|_|_|_|
  2445. */
  2446. .node-11186{
  2447. nav ul.links a.language-link { display:none; }
  2448. }
  2449. #webform-client-form-11186{
  2450. @media #{$medium-up}{
  2451. padding: 10px 30px;
  2452. #webform-component-column-left--membership-options{
  2453. margin: 10px 0;
  2454. label{width:auto;}
  2455. }
  2456. fieldset{
  2457. @include rounded(5px); border-left: 1px solid #cccccc; border-bottom: 1px solid #cccccc; padding: 10px; border-top-width: 0; border-right-width: 0; border-bottom-width: 0;
  2458. fieldset{ border: 0 solid #ddd; padding: 0;}
  2459. }
  2460. legend{margin: 0; @include fs18; @include fs700;}
  2461. .form-item{ margin: 0 20px 0 0; }
  2462. label{ @include fs12; width:10em; @include inlineblock; vertical-align:middle; margin-right:1em; border-bottom: 1px solid #cccccc; }
  2463. .description{ @include fs11; width:25em; @include inlineblock; vertical-align:bottom; margin-left:1em; color:#7f7f7f;}
  2464. input.form-text{width:13em;}
  2465. }
  2466. @media #{$medium-only}{
  2467. padding: 10px;
  2468. #webform-component-column-left--membership-options{
  2469. margin: 0 0 10px 0;
  2470. .form-item{width:100%;}
  2471. label{ width:75%; }
  2472. }
  2473. legend{margin: 0; @include fs16; @include fs700;}
  2474. .form-item{ margin: 0; float:none;}
  2475. label{ @include fs12; width:30%; @include inlineblock; vertical-align:middle; margin-right:0.5em; }
  2476. input.form-text, select.form-select{width:60%;}
  2477. #webform-component-infos{@include fs14;}
  2478. } //change this
  2479. background-color: #e6e6e6; @include rounded(10px);
  2480. .fieldset-wrapper>.form-item{ @include inlineblock; }
  2481. #webform-component-column-left{@include inlineblock; width:25%; border:none;}
  2482. #webform-component-column-right{ @include inlineblock; min-width:70%;}
  2483. #webform-component-column-left--membership-options{
  2484. .form-type-radio{
  2485. border:1px solid #ddd; @include rounded(5px); padding: 10px 5px; margin: 5px 0;
  2486. input{ @include inlineblock; vertical-align: middle; margin:0px 5px;}
  2487. label{@include fs20; @include fs700; @include inlineblock; vertical-align: middle; margin: 0;}
  2488. background-color: #fff;
  2489. &:hover{@include drop-shadow(0, 0, 5px, 0.2); }
  2490. &.form-item-submitted-column-left-membership-options:nth-child(1){background-color: #69CDCF;}
  2491. &.form-item-submitted-column-left-membership-options:nth-child(2){background-color: #D476AE;}
  2492. &.form-item-submitted-column-left-membership-options:nth-child(3){background-color: #E6DE1C;}
  2493. &.form-item-submitted-column-left-membership-options:not(.selected){opacity:0.4;}
  2494. }
  2495. &>label{width:200px; @include fs18; @include fs700; }
  2496. label{ border: 0; }
  2497. }
  2498. #webform-component-column-right--me--my-account-email{
  2499. display:block;
  2500. }
  2501. #webform-component-column-right--company--administrative-e-mail{
  2502. .description{@include inlineblock;}
  2503. }
  2504. #addressfield-wrapper{ margin-top:1em; }
  2505. .street-block .form-item{ @include inlineblock; }
  2506. #webform-component-column-right--collaborators{
  2507. margin: 20px 0; overflow:hidden;
  2508. fieldset{@include inlineblock; width:33%;}
  2509. .form-item{display:block;}
  2510. label{width:6em;}
  2511. input{width:11em;}
  2512. }
  2513. #webform-component-infos{margin: 20px 0;}
  2514. .form-actions{
  2515. padding: 0; margin: 0;
  2516. border: 0px;
  2517. background-color: transparent;
  2518. text-align: left;
  2519. .form-submit{
  2520. border: 2px solid #69CDCF; background-color:#69CDCF; color:#fff;
  2521. @include fs18; padding: 0.2em 1em 0.3em; @include rounded(0.3em);
  2522. font-weight:bold;
  2523. margin-bottom:9px;
  2524. @include shadowTextBtnBlack();
  2525. }
  2526. }
  2527. #webform-component-column-right--news-letters{
  2528. >label{margin: 0; @include fs18; @include fs700; border:none; line-height:40px}
  2529. .form-item{
  2530. @include inlineblock();
  2531. label{width:auto}
  2532. input, label{margin: 0;}
  2533. }
  2534. }
  2535. #edit-submitted-terms-of-services{
  2536. margin-bottom:0.5em;
  2537. input, label{margin: 0 0.3em 0 0;}
  2538. label{ width:auto; }
  2539. }
  2540. } // adhesion
  2541. /*
  2542. _____ _____ _____ _____ _____ _____ _____ _____ _____ _ _ _ _____ _____ _____ _____
  2543. | | | | | | _ | __ |_ _| | | | | __| | | | | __| | __ | |
  2544. | | | --| | --| | -| | | | | |- -| __| | | | | __| | | -| | | |
  2545. |_____|_____| |_____|__|__|__|__| |_| \___/|_____|_____|_____| |__| |_____|__|__|_|_|_|
  2546. */
  2547. #uc-cart-view-form{
  2548. background-color: #e6e6e6;
  2549. // @include rounded(10px);
  2550. padding: 10px, 30px;
  2551. // max-width:$cardfull_w;
  2552. display:inline-block;
  2553. table{
  2554. width:auto; display:table;
  2555. background-color:#fff;
  2556. thead th{border-bottom:none;padding: 1em;}
  2557. tbody{
  2558. border-top:none;
  2559. tr.even, tr.odd{
  2560. background-color:#fff;
  2561. border-bottom:none;
  2562. }
  2563. td{
  2564. padding: 1em;
  2565. // &.price{ padding: 0.5em 1em; }
  2566. }
  2567. }
  2568. }
  2569. fieldset{ border: none!important;}
  2570. .form-type-uc-quantity input{
  2571. width:2em;
  2572. }
  2573. .form-actions{
  2574. padding: 0; margin: 0;
  2575. border: 0px;
  2576. background-color: transparent;
  2577. text-align: right;
  2578. display:block; width:100%;
  2579. &:before, &:after{
  2580. display:block;
  2581. }
  2582. .form-submit{
  2583. @include bouton();
  2584. margin-left:1em;
  2585. &#edit-checkout--2{
  2586. @include bouton-bleu();
  2587. }
  2588. }
  2589. }
  2590. }
  2591. /*
  2592. _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____
  2593. | | | | | | | | __| | | | | | |_ _| | __| | __ | |
  2594. | | | --| | --| | __| --| -| | | | | | | | __| | | -| | | |
  2595. |_____|_____| |_____|__|__|_____|_____|__|__|_____|_____| |_| |__| |_____|__|__|_|_|_|
  2596. */
  2597. #uc-cart-checkout-form{
  2598. // display:inline-block;
  2599. @mixin price-table(){
  2600. @include fs14;
  2601. min-width:20em;
  2602. td.price{width:4em;};
  2603. }
  2604. background-color: #e6e6e6;
  2605. // @include rounded(10px);
  2606. padding: 10px, 30px;
  2607. fieldset{ border: none!important;}
  2608. fieldset.form-row{
  2609. // @include rounded(5px); border-left: 1px solid #cccccc; border-bottom: 1px solid #cccccc;
  2610. padding-bottom:20px; margin-bottom:20px;
  2611. // fieldset{ border: 0 solid #ddd; padding: 0;}
  2612. }
  2613. fieldset.form-column{
  2614. @include inlineblock; max-width:39%; clear:both; float:none;
  2615. margin: 15px 1em;
  2616. > .fieldset-wrapper > .form-wrapper{
  2617. margin: 10px 0;
  2618. }
  2619. }
  2620. fieldset.form-column-left{}
  2621. fieldset.form-column-right{
  2622. border-left:1px solid #ccc;
  2623. margin-left:2em; padding-left:2em;
  2624. // background-color:#fff; @include rounded(5px);
  2625. }
  2626. legend{margin: 0; @include fs18; @include fs700; border:none; line-height:2;}
  2627. .fieldset-description{@include fs12;}
  2628. .fieldset-wrapper{@include fs12;}
  2629. .form-item{ margin: 0 20px 0 0; }
  2630. .description{ @include fs11; width:25em; @include inlineblock; vertical-align:bottom; margin-left:1em; color:#7f7f7f;}
  2631. #cart-pane{
  2632. >.fieldset-wrapper{
  2633. @include inlineblock();
  2634. @include rounded(5px);
  2635. padding: 10px;
  2636. background-color:#fff;
  2637. }
  2638. table{
  2639. @include price-table();
  2640. }
  2641. tbody{border:none; }
  2642. tr{background-color: transparent; border:none; }
  2643. td{
  2644. padding: 0 5px;
  2645. vertical-align: bottom;
  2646. &.products{
  2647. a{color:inherit; @include fs700;}
  2648. width:auto;
  2649. ul.product-description{margin: 0; @include fs12;}
  2650. li{list-style: none;}
  2651. }
  2652. }
  2653. tr.subtotal{
  2654. td{@include fs16; @include fs700;}
  2655. }
  2656. }
  2657. #customer-pane{width:35em;}
  2658. #billing-pane{
  2659. label{ @include fs12; width:8em; @include inlineblock; vertical-align:middle; margin-right:1em; border-bottom: 1px solid #cccccc; }
  2660. input.form-text{width:13em;}
  2661. }
  2662. #coupon_automatic-pane{}
  2663. #coupon-pane{}
  2664. #payment-pane{
  2665. // float:right;
  2666. .fieldset-wrapper{
  2667. background-color:#fff;
  2668. @include rounded(5px);
  2669. padding: 10px;
  2670. }
  2671. #line-items-div{
  2672. float:none; border:none;
  2673. @include inlineblock(); margin: 10px 0 20px;
  2674. table{@include price-table();}
  2675. tbody{border:none;}
  2676. td{
  2677. padding: 0 5px;
  2678. }
  2679. tr{
  2680. td{@include fs500;}
  2681. &.line-item-total td{
  2682. @include fs16; @include fs700; text-align: right;
  2683. }
  2684. }
  2685. }
  2686. #edit-panes-payment-payment-method{
  2687. label{width:auto; border-bottom:none;}
  2688. .form-item-panes-payment-payment-method{
  2689. border:1px solid #ddd;
  2690. border-radius:5px;
  2691. margin: 0.5em; padding: 0.5em;
  2692. label{font-weight:bold;}
  2693. }
  2694. }
  2695. #payment-details{
  2696. width:25em;
  2697. border-top:none; padding: 0; margin: 0;
  2698. }
  2699. }
  2700. #edit-actions{
  2701. width:100%;
  2702. padding:1em 0; margin: 0;
  2703. border: 0px;
  2704. background-color: transparent;
  2705. text-align: center;
  2706. .form-submit{
  2707. @include bouton();
  2708. margin-left:1em;
  2709. &#edit-continue{
  2710. @include bouton-bleu();
  2711. }
  2712. }
  2713. }
  2714. }
  2715. /*
  2716. _____ _____ _____ _____ _____ _____
  2717. | | | | | | _ | __ |_ _|
  2718. | | | --| | --| | -| | |
  2719. |_____|_____| |_____|__|__|__|__| |_|
  2720. &&
  2721. _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ __ _____ ____ _____ _____ _____ _____ _____
  2722. | | | | | | | | __| | | | | | |_ _| | | | _ | | | | \| _ |_ _| | | | |
  2723. | | | --| | --| | __| --| -| | | | | | | | | | | |__|- -| | | | | | |- -| | | | | |
  2724. |_____|_____| |_____|__|__|_____|_____|__|__|_____|_____| |_| \___/|__|__|_____|_____|____/|__|__| |_| |_____|_____|_|___|
  2725. */
  2726. //.page-cart,
  2727. .page-cart-checkout-review{
  2728. #content{
  2729. //text-align:center;
  2730. &> .inner-content{
  2731. //.card-box($cardfull_w, $cardfull_h);
  2732. //text-align:left;
  2733. display:inline-block;
  2734. padding: 1em;
  2735. }
  2736. }
  2737. #edit-actions{
  2738. margin: 0; padding: 0;
  2739. &:before, &:after{display:block;}
  2740. }
  2741. #review-instructions{
  2742. width:30em;
  2743. padding: 1em 0;
  2744. // .info;
  2745. }
  2746. table.order-review-table{
  2747. border:none;
  2748. .pane-title-row{
  2749. border:none;
  2750. background-color:transparent;
  2751. text-align:left;
  2752. @include fs18;
  2753. td{ padding: 1em 0 0 0; }
  2754. }
  2755. table.cart-review{
  2756. tr.odd{
  2757. background-color:transparent;
  2758. border:none;
  2759. }
  2760. }
  2761. td.title-col{
  2762. padding: 0;
  2763. text-align:left;
  2764. }
  2765. td.data-col{
  2766. padding: 0;
  2767. width:75%;
  2768. }
  2769. .review-button-row{
  2770. border:none;
  2771. background-color:transparent;
  2772. &>td{
  2773. padding: 3em 0 0 0;
  2774. }
  2775. form{
  2776. margin: 0 0.5em 0 0; @include inlineblock();
  2777. }
  2778. }
  2779. }
  2780. #edit-actions{
  2781. border: 0px;
  2782. background-color: transparent;
  2783. text-align: right;
  2784. }
  2785. input.form-submit{
  2786. @include bouton();
  2787. margin-left:1em;
  2788. &#edit-submit{
  2789. @include bouton-bleu();
  2790. }
  2791. }
  2792. }
  2793. /*
  2794. ____ _____ ____ _____ _____ _____ _____ _____ _____ _____
  2795. | \| | \| _ | |_ _| | | | | __|
  2796. | | |- -| | | | --| | | |- -| | | | | __|
  2797. |____/|_____|____/|__|__|_____| |_| |_____|__ _|_____|_____|
  2798. |__|
  2799. */
  2800. #didactique-page{
  2801. .node-didactique{
  2802. @include rounded(5px); background-color: #FFF;
  2803. @include drop-shadow(0, 0, 5px, 0.2);
  2804. max-width:850px;
  2805. @include fs14; background-color:#fff; //padding: 5px;
  2806. margin: 1em auto; padding: 1em;
  2807. .field-name-field-emvideo{
  2808. margin: 1em 0;
  2809. }
  2810. .field-name-title-field{
  2811. @include fs24; @include fs900; @include italic; padding:5px 0;
  2812. }
  2813. .field-name-field-visuel{
  2814. figure, img{max-width:100%;}
  2815. }
  2816. }
  2817. @media #{$medium-up}{
  2818. .side{ @include inlineblock(); vertical-align: top; }
  2819. .group-sideleft{ width:60%; }
  2820. .group-sideright{ width:39%; }
  2821. }
  2822. // @media #{$small-up}{
  2823. // } // change this
  2824. }
  2825. /*
  2826. _ _ _ _____ _____ _ _ _ _____ _____ _____ _____
  2827. | | | | | | | | | | | __| | _ | __ | __|
  2828. | | | | | | | | | | | __| | | -| __|
  2829. |_____|__|__|_____| |_____|_____| |__|__|__|__|_____|
  2830. */
  2831. .page-whoweare{
  2832. #tool-bar{
  2833. @media #{$small-only}{
  2834. #block-materio-page-title-materio-page-title{display:none;}
  2835. } // chanhe this
  2836. }
  2837. }
  2838. /*
  2839. _ _
  2840. _____ ___|_|___| |_ ___ ___ ___ ___ ___ ___
  2841. | | .'| | | _| -_| | .'| | _| -_|
  2842. |_|_|_|__,|_|_|_|_| |___|_|_|__,|_|_|___|___|
  2843. */
  2844. .maintenance-page{
  2845. #container, #header{ text-align: center; padding: 0; position:relative;}
  2846. #main{background-color: transparent; }
  2847. #header h1.site-name{font-size:36px; margin: 0; padding-left:0;}
  2848. h2.site-slogan{font-size:16px; @include fs300; margin: 0; line-height:1.1;}
  2849. }
  2850. /*
  2851. _____ _____ _____
  2852. | __| _ | |
  2853. | __| | | |
  2854. |__| |__|__|__ _|
  2855. |__|
  2856. */
  2857. .page-faq-page #main{
  2858. background: #fff url('../img/bg-faq.png') no-repeat bottom right;
  2859. }
  2860. #content .faq-content{
  2861. .faq-description{
  2862. @include fs12; padding-bottom:2em;
  2863. }
  2864. ul.faq-ul-questions-top{
  2865. margin: 0;
  2866. li{
  2867. list-style: none;
  2868. a{
  2869. @include fs18; @include fs500;
  2870. }
  2871. }
  2872. }
  2873. h3.faq-header{
  2874. @include fs20; @include fs700; line-height:1.2;
  2875. margin: 0;
  2876. a{color:#000;}
  2877. }
  2878. .faq-dl-hide-answer{
  2879. padding: 0;
  2880. }
  2881. .faq-category-group{
  2882. padding-bottom:1em;
  2883. }
  2884. .faq-question-answer{
  2885. padding: 0.3em 0 0 0.8em;
  2886. .faq-question{
  2887. @include fs16; padding: 0; @include fs500;
  2888. a{color:#000;}
  2889. }
  2890. .faq-answer{
  2891. padding: 0; margin-bottom:2em;
  2892. @include fs12;
  2893. }
  2894. }
  2895. .field-name-body img{
  2896. max-width:50%;
  2897. height:auto;
  2898. }
  2899. }
  2900. /*
  2901. __ __ _ _____
  2902. / / / /___ ____ ___ ___ | | / /__ \
  2903. / /_/ / __ \/ __ `__ \/ _ \ | | / /__/ /
  2904. / __ / /_/ / / / / / / __/ | |/ // __/
  2905. /_/ /_/\____/_/ /_/ /_/\___/ |___//____/
  2906. */
  2907. body.home-v2{
  2908. #center{
  2909. background-color: transparent;
  2910. padding:0;
  2911. }
  2912. }
  2913. @mixin shaddowed(){
  2914. @include drop-shadow(0, 0, 5px, 0.2);
  2915. @include transition-simply-prefix(box-shadow 0.3s ease-out); // opacity 0.3s ease-out); //change this commas
  2916. &:hover{@include drop-shadow(0, 0, 5px, 0.4);}
  2917. }
  2918. #home-v2{
  2919. // padding: 40px 40px;
  2920. h2{font-size: 2.1em; font-weight: 300;}
  2921. a{color: #000};
  2922. .field-name-field-liens{
  2923. margin-top:1em;
  2924. .field-item{@include inlineblock(); margin:0 0.5em 0.5em 0; }
  2925. a{
  2926. font-weight: 700; @include inlineblock();
  2927. padding:0.5em 1em 0.7em;
  2928. @include rounded(5px);
  2929. background-color: rgba(255,255,255, 0.8);
  2930. body.logged-in &.visitor{display:none;}
  2931. body.not-logged-in &.member{display:none;}
  2932. }
  2933. }
  2934. .panel-separator{clear:both;}
  2935. >.panel-panel>div>.panel-pane {
  2936. // padding: 10px 15px;
  2937. overflow:hidden;
  2938. &.pane-node{
  2939. @include rounded(5px);
  2940. overflow:hidden;
  2941. .pane-content, .node{
  2942. position:relative; width:100%; height:100%; overflow:hidden;
  2943. }
  2944. .links a{
  2945. background-color: rgba(255,255,255, 0.7);
  2946. @include rounded(5px);
  2947. padding: 15px;
  2948. }
  2949. }
  2950. &.intro-video{
  2951. height:auto;
  2952. background-color: $creme;
  2953. margin-top:2em;margin-bottom:2em; padding-top:0;
  2954. .field-name-field-emvideo{
  2955. .embedded-video{
  2956. margin:0 auto;
  2957. @media #{$small-only}{ width:320px; height:180px;}
  2958. @media #{$medium-only}{ width:640px; height:360px;}
  2959. @media #{$large-only}{ width:800px; height:450px;}
  2960. @media #{$xlarge-up}{ width:1024px; height:576px;}
  2961. .player, iframe{
  2962. width:100%; height:100%;
  2963. }
  2964. }
  2965. }
  2966. .field-name-title-field{
  2967. display:none;
  2968. }
  2969. .field-name-body{
  2970. // display:none;
  2971. margin-top:1em;
  2972. text-align: center;
  2973. p{
  2974. // @include grid-column(6);
  2975. text-align: left;
  2976. @include inlineblock();
  2977. width:35%; margin-left:2%;
  2978. font-size:0.756em;
  2979. @media #{$small-only}{
  2980. width:100%;
  2981. text-align: center;
  2982. }
  2983. }
  2984. }
  2985. @media #{$small-only}{
  2986. margin-top: 0.5em;
  2987. }
  2988. }
  2989. &.pane-menu-menu-home-v2, &.pane-menu-menu-menu-home-member{
  2990. margin:2em 0;
  2991. ul.menu{
  2992. margin: 0px; text-align: center;
  2993. }
  2994. li{
  2995. margin:0 1em 0 0; padding:0px; list-style: none; height:2.5em;
  2996. @include inlineblock();
  2997. a{
  2998. background-color: #4d4d4d;
  2999. @include rounded(5px);
  3000. padding: 5px 12px 7px;
  3001. color: $creme;
  3002. font-size: 18px;
  3003. font-weight: 500;
  3004. transition:opacity,background-color 0.2s ease-out;
  3005. &[href="/fr/actuality"]{
  3006. background-color:$vertjaune;
  3007. @include shadowTextBtnBlack();
  3008. }
  3009. }
  3010. }
  3011. // @media #{$small-only}{
  3012. // display:none;
  3013. // }
  3014. }
  3015. &.pane-materio-user-user-register{
  3016. padding: 2em 0;
  3017. background: transparent url('../img/register-block.png') no-repeat 100% 90%;
  3018. text-align: center;
  3019. .pane-content{
  3020. @include inlineblock(); text-align: left;
  3021. }
  3022. h2, h3{@include fs900; @include italic; padding:5px 0; margin: 0; line-height: 1; @include inlineblock(); vertical-align: middle;}
  3023. h2{@include fs24;} h3{@include fs16;}
  3024. form{margin: 0 1em; padding:0px; @include inlineblock(); vertical-align: middle;}
  3025. .form-item, .form-wrapper{
  3026. margin: 0; position:relative; @include inlineblock();vertical-align: middle;
  3027. }
  3028. #edit-account{margin-right:5px;}
  3029. input.form-text{ @include fs12; @include rounded(5px); margin-bottom:4px;.ie8 &{margin-right:5px;}}
  3030. .form-item-mail input.form-text, .form-item-name input.form-text{ width:11em;}
  3031. .form-item-pass input.form-text{ width:7em;}
  3032. #edit-mail-check{
  3033. position:absolute; bottom:100%; z-index:9999; background-image: none;
  3034. height:auto; //width:90%;
  3035. padding: 5px; @include rounded(5px); margin-bottom:10px;
  3036. @include fs11; background-color: #fff;
  3037. @include drop-shadow(0, 0, 5px, 0.6);
  3038. @include transition-simply-prefix(bottom 0.1s ease-out);
  3039. &.error{
  3040. background-color: #f3968d;
  3041. // border: 2px solid #f30002;
  3042. color:#fff;
  3043. }
  3044. &.ok{ display:none; }
  3045. }
  3046. .form-submit{
  3047. //border: 2px solid #69CDCF; background-color:#69CDCF; color:#FF7400; // orange/bleu
  3048. @include fs16; padding: 0.1em 0.6em 0.2em; @include rounded(0.3em);
  3049. font-weight:bold;
  3050. margin-bottom:4px;
  3051. }
  3052. .form-item-termsofservices, #edit-field-newsletter{
  3053. margin-bottom:0; display:block; line-height: 1;
  3054. &>*{ @include inlineblock; vertical-align: middle; margin: 0; }
  3055. label{ @include fs10; background-color: #fff; @include rounded(3px); }
  3056. }
  3057. #user-register-form{
  3058. .form-submit{
  3059. border: 2px solid #69CDCF; background-color:#69CDCF; color:#fff; // blanc/bleu
  3060. @include shadowTextBtnBlack();
  3061. &[disabled]{
  3062. background-color:#ddd; border: 2px solid #ddd;
  3063. }
  3064. }
  3065. }
  3066. #user-login{
  3067. .form-submit{
  3068. border: 2px solid #E6DE1C; background-color:#E6DE1C; color:#fff; // noire/jaune
  3069. @include shadowTextBtnBlack();
  3070. }
  3071. }
  3072. #edit-simplenews{display:none;}
  3073. a.join{
  3074. @include inlineblock(); vertical-align: middle;
  3075. // display:block;
  3076. margin: 0 1em;
  3077. // width:5em;
  3078. @include fs16; padding: 0.1em 0.3em 0.2em; @include rounded(0.3em);
  3079. font-weight:bold;
  3080. border: 2px solid #69CDCF; background-color:#69CDCF; color:#fff; // blanc/bleu
  3081. @include shadowTextBtnBlack();
  3082. text-align: center; text-decoration: none;
  3083. }
  3084. @media #{$small-only}{
  3085. background-position: 160% 50%;
  3086. .form-item-mail input.form-text, .form-item-name input.form-text{ width:7em;}
  3087. min-height:60px; padding: 15px 0;
  3088. // #user-login, >h3:first-child, >h3 span{ display:none; }
  3089. }
  3090. .message-error{
  3091. color:#b94a48; @include fs12;
  3092. }
  3093. }
  3094. &.showroom{
  3095. @include shaddowed();
  3096. height:450px;
  3097. margin-top: 15px;
  3098. background-color: #fff;
  3099. // background: url("http://carnet-aux-petites-choses.fr/wp-content/uploads/2015/02/un-oeil-sur-la-matiere-materiO-26_gagaone.jpg");
  3100. // background-size: cover;
  3101. position: relative;
  3102. .pane-content{
  3103. width:100%; height:100%; position:relative;
  3104. .node{position:absolute;height:100%;width:100%;}
  3105. .field-name-field-bandeau{
  3106. position:absolute; width:100%; height:100%; overflow:hidden;
  3107. img{width:100%; margin-top:-10%;}
  3108. }
  3109. .group-content-wrapper{
  3110. position:relative;
  3111. z-index:2;
  3112. width:30%;
  3113. margin:3em 2em;
  3114. .group-content{
  3115. background-color: rgba(255,255,255, 0.8);
  3116. padding:1em;
  3117. @include rounded(5px);
  3118. .field-name-title-field{
  3119. font-size: 2.1em; font-weight: 300;
  3120. }
  3121. .field-name-body{
  3122. margin-top: 0.5em;
  3123. }
  3124. }
  3125. }
  3126. }
  3127. &:after{
  3128. content:url("../img/bulle.png");
  3129. transform: scale(0.8);
  3130. position: absolute;
  3131. bottom:-120px;
  3132. right: -20px;
  3133. z-index:10;
  3134. }
  3135. @media #{$small-only}{
  3136. // height:210px;
  3137. margin-top: 10px;
  3138. .pane-content{
  3139. .field-name-field-bandeau{
  3140. position:absolute; width:400%; height:100%; overflow:hidden;
  3141. }
  3142. .group-content-wrapper{
  3143. width:auto;
  3144. padding:2%;
  3145. margin:2%;
  3146. .field-name-body{
  3147. font-size:0.756em;
  3148. margin-top:0.5em;
  3149. }
  3150. }
  3151. }
  3152. &:after{
  3153. opacity:0.4;
  3154. }
  3155. }
  3156. } // end showrom
  3157. &.bdd{
  3158. @include shaddowed();
  3159. height:450px;
  3160. margin-top: 30px;
  3161. background-color: #FFF;
  3162. position: relative;
  3163. .links a{background-color: #e6e6e6;}
  3164. .field-name-field-bandeau{
  3165. @include inlineblock(); width:60%; height:100%; overflow:hidden;
  3166. img{max-width:2000px;}
  3167. }
  3168. .group-content-wrapper{
  3169. @include inlineblock(); width:35%;
  3170. // background-color: rgba(255,255,255, 0.7);
  3171. padding:1em;
  3172. @include rounded(5px);
  3173. .field-name-title-field{
  3174. font-size: 2.1em; font-weight: 300;
  3175. }
  3176. .field-name-body{
  3177. margin-top: 1em;
  3178. }
  3179. .field-name-field-liens a{background-color: rgba(230,230,230, 0.8);}
  3180. }
  3181. &:after{
  3182. content:url("../img/boule.png");
  3183. transform: scale(0.8);
  3184. position: absolute;
  3185. bottom:-50px;
  3186. left: -50px;
  3187. }
  3188. @media #{$small-only}{
  3189. height:auto;
  3190. .field-name-field-bandeau{
  3191. width:100%; display:block; height:310px; overflow:hidden;
  3192. }
  3193. .group-content-wrapper{
  3194. display:block; width:100%; z-index:1; padding: 0;
  3195. >*{padding:1em;}
  3196. }
  3197. &:after{opacity:0.6; z-index:0;}
  3198. }
  3199. } // end BDD
  3200. &.formations{
  3201. @include shaddowed();
  3202. position: relative;
  3203. height:300px;
  3204. margin-top: 30px;
  3205. background-color: #000;
  3206. color: #FFF;
  3207. a{color: #FFF;}
  3208. .node{
  3209. padding:0 0 0 30%; width:70%;
  3210. &:before{
  3211. content:" ";
  3212. background: transparent url("../img/formations.png") no-repeat center center;
  3213. background-clip: padding-box;
  3214. background-size: contain;
  3215. position: absolute; left:0;
  3216. // border: 1px solid red;
  3217. z-index: 2;
  3218. width:30%; height:100%;
  3219. // padding:0.5em;
  3220. }
  3221. }
  3222. .group-content-wrapper{
  3223. padding:1em; position:relative;
  3224. .field-name-title-field{
  3225. font-size: 2.1em; font-weight: 300;
  3226. }
  3227. .field-name-body{
  3228. margin-top: 1em;
  3229. }
  3230. }
  3231. @media #{$small-only}{
  3232. height:auto;
  3233. }
  3234. }
  3235. &.services{
  3236. @include shaddowed();
  3237. background-color: #FFF;
  3238. height:300px;
  3239. margin-top: 30px;
  3240. .node{
  3241. padding:0 30% 0 0; width:70%;
  3242. &:before{
  3243. content:" ";
  3244. background: transparent url("../img/services.png") no-repeat center center;
  3245. background-clip: padding-box;
  3246. background-size: contain;
  3247. position: absolute; right:0;
  3248. // border: 1px solid red;
  3249. z-index: 2;
  3250. width:30%; height:100%;
  3251. // padding:0.5em;
  3252. }
  3253. }
  3254. .group-content-wrapper{
  3255. padding:1em; position:relative;
  3256. .field-name-title-field{
  3257. font-size: 2.1em; font-weight: 300;
  3258. }
  3259. .field-name-body{
  3260. margin-top: 1em;
  3261. }
  3262. .field-name-field-liens a{background-color: rgba(230,230,230, 0.8);}
  3263. }
  3264. @media #{$small-only}{
  3265. height:auto;
  3266. }
  3267. }
  3268. &.publication{
  3269. @include shaddowed();
  3270. position: relative;
  3271. // height:300px;
  3272. margin-top: 30px;
  3273. padding:1em;
  3274. background-color: #000;
  3275. &, a, h1, h2{color: #fff;}
  3276. @include rounded(10px);
  3277. .view-publication-home-v2{
  3278. .views-row{
  3279. @include inlineblock();
  3280. width:30%;
  3281. h1{display:none;}
  3282. }
  3283. }
  3284. @media #{$small-only}{
  3285. .view-publication-home-v2{
  3286. .views-row{display:block; width:90%; margin-bottom: 1em;}
  3287. }
  3288. }
  3289. }
  3290. }
  3291. //mini panneau news
  3292. >.panel-panel>div>.pane-news-home-v2{
  3293. background-color: #e6e6e6; @include rounded(10px);
  3294. margin-top: 30px; padding-top: 1em; padding-bottom: 1em;
  3295. // padding:0;
  3296. position: relative;
  3297. // .panel-col-first{width:70%;}
  3298. // .panel-col-last{width:29.9%;}
  3299. h2{font-size: 30px;}
  3300. @media #{$medium-up}{
  3301. #mini-panel-news_home_v2 .center-wrapper{
  3302. @include grid-row();
  3303. .panel-panel{
  3304. overflow:hidden;
  3305. @include grid-column(4);
  3306. // width:32.8%;
  3307. padding:0em; margin-left:1em;
  3308. &.panel-col-first{width:auto;}
  3309. &:not(.panel-col-first){width:31%;}
  3310. .inside{margin:0;}
  3311. article.node, article.node-breve.vm-cardbig{margin:0; height:610px;}
  3312. }
  3313. }
  3314. }
  3315. #mini-panel-news_home_v2 .panel-col-bottom{
  3316. @include grid-row(); margin-top: 1.5em; margin-bottom: 1.5em;
  3317. >.inside{
  3318. @include grid-column(12);
  3319. }
  3320. p{display:none;}
  3321. .form-checkboxes{
  3322. margin:0 0 0.5em 0;
  3323. .form-item{
  3324. @include inlineblock(); margin-right: 1em;
  3325. label, input{vertical-align: middle;}
  3326. }
  3327. }
  3328. .form-item-mail{
  3329. @include inlineblock(); margin:0;
  3330. label, input{@include inlineblock(); margin-right: 1em;}
  3331. }
  3332. #edit-subscribe, #edit-unsubscribe{@include inlineblock();}
  3333. }
  3334. // .view-news-home-v2{
  3335. // .views-row{@include inlineblock();}
  3336. // }
  3337. .node-simplenews{
  3338. @include rounded(5px); background-color: #FFF;
  3339. @include drop-shadow(0, 0, 5px, 0.2);
  3340. @include transition-simply-prefix(box-shadow 0.3s ease-out);
  3341. overflow:hidden;
  3342. position:relative;
  3343. margin:7px;
  3344. >a{
  3345. position:absolute;
  3346. bottom:0; width:100%;
  3347. background-color: #FFF;
  3348. text-align: center;
  3349. h1{
  3350. padding: 10px; margin:0;
  3351. font-size:1em;
  3352. }
  3353. }
  3354. }
  3355. //deco
  3356. &:after{
  3357. content:url("../img/point.png");
  3358. //transform: scale(1);
  3359. position: absolute;
  3360. bottom:20px;
  3361. right: 10px;
  3362. }
  3363. @media #{$small-only}{
  3364. background-color: transparent;
  3365. #mini-panel-news_home_v2 .center-wrapper{
  3366. .panel-panel{
  3367. width:100%;
  3368. .inside{margin:0;}
  3369. .node{
  3370. max-width: 100%; margin:0;
  3371. .field-name-body{
  3372. width: 100%; padding:0;
  3373. p{max-width: 100%; padding: 1em;}
  3374. }
  3375. }
  3376. .node-simplenews{
  3377. .field-name-body a{
  3378. padding: 0; display: block; height:100%;
  3379. img{max-width: 100%;}
  3380. }
  3381. }
  3382. }
  3383. // .panel-panel:not(.panel-col-first){display:none;}
  3384. }
  3385. &:after{z-index: -1; opacity:0.4;}
  3386. }
  3387. }
  3388. #contact-pane{
  3389. margin:2em 0; padding:1em;
  3390. background-color: #e6e6e6;
  3391. .field-name-body{
  3392. text-align: center;
  3393. p{
  3394. @include inlineblock();
  3395. min-width: 20%;
  3396. }
  3397. }
  3398. }
  3399. } // homeV2
  3400. /*
  3401. _ _ _ _ _
  3402. | | | (_) | | (_)
  3403. _ __ _ _| |__ | |_ ___ __ _| |_ _ ___ _ __ ___
  3404. | '_ \| | | | '_ \| | |/ __/ _` | __| |/ _ \| '_ \/ __|
  3405. | |_) | |_| | |_) | | | (_| (_| | |_| | (_) | | | \__ \
  3406. | .__/ \__,_|_.__/|_|_|\___\__,_|\__|_|\___/|_| |_|___/
  3407. | |
  3408. |_|
  3409. */
  3410. body.node-type-publication{
  3411. article.node-publication{
  3412. .field{
  3413. figure, img{max-width:100%;}
  3414. }
  3415. @media #{$large-up}{
  3416. .field{@include inlineblock();}
  3417. .field-name-field-couverture{width:25%;}
  3418. .field-name-body{
  3419. margin-left: 1em;
  3420. width:70%;
  3421. }
  3422. }
  3423. }
  3424. }
  3425. // _ __ __
  3426. // / | / /___ / /____ _____
  3427. // / |/ / __ \/ __/ _ \/ ___/
  3428. // / /| / /_/ / /_/ __(__ )
  3429. // /_/ |_/\____/\__/\___/____/
  3430. .note-modal{
  3431. .close{
  3432. position: absolute;
  3433. top:0; right:0;
  3434. width:8px; height:8px;
  3435. border-radius: 4px;
  3436. background-color: #fff!important;
  3437. background-image: url(../img/close2.png);
  3438. background-size: contain;
  3439. background-position: center;
  3440. }
  3441. }
  3442. @import "misc.scss";
  3443. // end