styles.scss 94 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573
  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. }
  509. /*
  510. _
  511. ____ ___ ____ _(_)___
  512. / __ `__ \/ __ `/ / __ \
  513. / / / / / / /_/ / / / / /
  514. /_/ /_/ /_/\__,_/_/_/ /_/
  515. */
  516. #main{
  517. body.home-v2 &{
  518. padding-top:$headerouterheight;
  519. }
  520. }
  521. /*
  522. __ _ __ ___ __ __ __
  523. / /_ (_)___ _/ /_ / (_)___ _/ /_ / /____ ____/ /
  524. / __ \/ / __ `/ __ \/ / / __ `/ __ \/ __/ _ \/ __ /
  525. / / / / / /_/ / / / / / / /_/ / / / / /_/ __/ /_/ /
  526. /_/ /_/_/\__, /_/ /_/_/_/\__, /_/ /_/\__/\___/\__,_/
  527. /____/ /____/
  528. */
  529. #highlighted{
  530. @include rounded(5px);
  531. @include drop-shadow(0, 0, 6px, 0.6);
  532. padding: 0.5em;
  533. position:relative;
  534. @media #{$medium-up}{
  535. margin: 20px 0 6px;
  536. .block{ @include inlineblock; vertical-align: top; }
  537. .block-materio-didactique{
  538. width:65%;
  539. .side{
  540. @include inlineblock(); vertical-align: top;
  541. position:relative; //height:100%;
  542. }
  543. .group-sideleft{ width:65%; }
  544. .group-sideright{ width:30%; }
  545. .field-name-title-field{@include fs24;}
  546. // .field-name-field-visuel{}
  547. .node.emvideo{
  548. .group-sideleft, .group-sideright{ width:47%; }
  549. .group-sideleft{margin-right:2%;}
  550. // .field-name-field-visuel{display:none;}
  551. }
  552. }
  553. #block-materio-user-user-register{
  554. width:30%; padding:5px; height:290px;
  555. }
  556. }
  557. @media #{$small-up}{
  558. .block-materio-didactique{
  559. .side{@include inlineblock(); vertical-align: top;}
  560. }
  561. }
  562. @media #{$small-only}{
  563. margin:10px 0 6px;
  564. .block-materio-didactique{
  565. .group-sideleft, .group-sideright{ width:100%; }
  566. .node-didactique{
  567. .field-name-title-field{
  568. @include fs20;
  569. font-weight:normal!important;
  570. // &:before{content:"- ";}
  571. &:after{
  572. content:"\a0\f10b";
  573. font-family: "foundation-icons";
  574. font-style: normal;
  575. font-weight: normal;
  576. font-variant: normal;
  577. text-transform: none;
  578. line-height: 1;
  579. -webkit-font-smoothing: antialiased;
  580. display: inline-block;
  581. text-decoration: inherit;
  582. font-size: 16px;
  583. }
  584. }
  585. }
  586. html.js & .node-didactique{
  587. height:auto;
  588. height:30px; overflow: hidden;
  589. &.opened{height:auto;}
  590. }
  591. }
  592. }
  593. // @media #{$small-only}{
  594. // .block-materio-didactique{
  595. // // .pt(150px);
  596. // .group-sideleft{ width:50%; }
  597. // .group-sideright{ width:50%; }
  598. // }
  599. // } //change this
  600. .oldie &{
  601. .block{@include inlineblock;}
  602. }
  603. .block-materio-didactique{
  604. // .ie8 &{max-width:850px; border: 1px solid #C6C6C6;}
  605. .node-didactique{
  606. @include fs14;
  607. background-color:#fff; //padding: 5px;
  608. margin: 0 auto;
  609. // .ie8 &{max-width:750px; margin-left:15px; margin-top:10px;}
  610. .side{position:relative;}
  611. .field-name-title-field{
  612. @include fs900;
  613. @include italic;
  614. padding:5px 0;
  615. }
  616. .field-name-field-visuel{
  617. text-align: center;
  618. figure, img{display:inline;}
  619. }
  620. &.emvideo{
  621. .field-name-field-visuel{display:none;}
  622. }
  623. // .field-name-field-emvideo{
  624. // a{
  625. // display:block; width:100%; height:100%;
  626. // background: transparent url(../img/vimeo-play-btn.png) no-repeat center center;
  627. // &:hover{background-image: url(../img/vimeo-play-btn-hover.png);}
  628. // img{max-width:100%;}
  629. .ie8 &{.player{display:none;}}
  630. // }
  631. // }
  632. }
  633. html.js &{
  634. position:relative;
  635. overflow: hidden;
  636. .slides{
  637. height:270px; margin: 0; position:relative; width:100%; overflow:hidden;
  638. .node-didactique{ @include layer(); }
  639. .field-name-title-field{ height:30px;}
  640. .group-column-wrapper{
  641. height:240px;
  642. .side{ height:100%; }
  643. .field-name-field-emvideo{
  644. $r:0.5625;
  645. @media #{$small-only}{ $w:290px; width:$w; height:$w*$r; }
  646. @media #{$medium-only}{ $w:216px; width:$w; height:$w*$r; }
  647. @media #{$large-only}{ $w:216px; width:$w; height:$w*$r; }
  648. @media #{$xlarge-only}{ $w:280px; width:$w; height:$w*$r; }
  649. @media #{$xxlarge-only}{ $w:340px; width:$w; height:$w*$r; }
  650. *{height:100%; width:100%;}
  651. }
  652. }
  653. }
  654. .tabs{
  655. height:30px; margin: 0; text-align:left;
  656. >*{
  657. @include inlineblock(); vertical-align: top ; padding:5px 10px; @include fs12; cursor:pointer; color:#bfbfbf;
  658. &:hover, &:focus, &.active{color:#3f3f3f;}
  659. }
  660. }
  661. }
  662. }
  663. }
  664. /*
  665. __ __ __ _ __
  666. / /_ / /___ _____/ /__ ________ ____ _(_)____/ /____ _____
  667. / __ \/ / __ \/ ___/ //_/ / ___/ _ \/ __ `/ / ___/ __/ _ \/ ___/
  668. / /_/ / / /_/ / /__/ ,< / / / __/ /_/ / (__ ) /_/ __/ /
  669. /_.___/_/\____/\___/_/|_| /_/ \___/\__, /_/____/\__/\___/_/
  670. /____/
  671. */
  672. #block-materio-user-user-register, #block-materio-user-user-createaccount{
  673. min-height:120px; padding: 5px;
  674. background: transparent url('../img/register-block.png') no-repeat 100% 90%;
  675. .ie8 &{max-width:250px; float:right; background-image:none;}
  676. h2, h3{@include fs900; @include italic; padding:5px 0; margin: 0; line-height: 1; background-color:#fff; @include inlineblock(); min-width:50%;}
  677. h2{@include fs24;} h3{@include fs16;}
  678. form{margin: 0; background-color: rgba(255, 255, 255, 0.7); padding-bottom:5px; @include inlineblock(); }
  679. .form-item, .form-wrapper{
  680. margin: 0; @include inlineblock; vertical-align: middle; position:relative;
  681. }
  682. #edit-account{margin-right:5px;}
  683. input.form-text{ @include fs12; @include rounded(5px); margin-bottom:4px;.ie8 &{margin-right:5px;}}
  684. .form-item-mail input.form-text, .form-item-name input.form-text{ width:11em;}
  685. .form-item-pass input.form-text{ width:7em;}
  686. #edit-mail-check{
  687. position:absolute; bottom:100%; z-index:9999; background-image: none;
  688. height:auto; //width:90%;
  689. padding: 5px; @include rounded(5px); margin-bottom:10px;
  690. @include fs11; background-color: #fff;
  691. @include drop-shadow(0, 0, 5px, 0.6);
  692. @include transition-simply-prefix(bottom 0.1s ease-out);
  693. &.error{
  694. background-color: #f3968d;
  695. // border: 2px solid #f30002;
  696. color:#fff;
  697. }
  698. &.ok{ display:none; }
  699. }
  700. .form-submit{
  701. //border: 2px solid #69CDCF; background-color:#69CDCF; color:#FF7400; // orange/bleu
  702. @include fs16; padding: 0.1em 0.6em 0.2em; @include rounded(0.3em);
  703. font-weight:bold;
  704. margin-bottom:4px;
  705. }
  706. .form-item-termsofservices, #edit-field-newsletter{
  707. margin-bottom:0; display:block; line-height: 1;
  708. &>*{ @include inlineblock; vertical-align: middle; margin: 0; }
  709. label{ @include fs10; background-color: #fff; @include rounded(3px); }
  710. }
  711. #user-register-form{
  712. .form-submit{
  713. border: 2px solid #69CDCF; background-color:#69CDCF; color:#fff; // blanc/bleu
  714. @include shadowTextBtnBlack();
  715. &[disabled]{
  716. background-color:#ddd; border: 2px solid #ddd;
  717. }
  718. }
  719. }
  720. #user-login{
  721. .form-submit{
  722. border: 2px solid #E6DE1C; background-color:#E6DE1C; color:#fff; // noire/jaune
  723. @include shadowTextBtnBlack();
  724. }
  725. }
  726. #edit-simplenews{
  727. padding-top:0.5em;
  728. .fieldset-description{
  729. @include fs12;
  730. }
  731. .form-checkboxes{
  732. .form-item{
  733. display:block;
  734. label{@include fs12;}
  735. }
  736. }
  737. }
  738. a.join{
  739. // @include inlineblock();
  740. display:block;
  741. // margin: 10px 0;
  742. width:5em;
  743. @include fs16; padding: 0.1em 0.3em 0.2em; @include rounded(0.3em);
  744. font-weight:bold;
  745. border: 2px solid #69CDCF; background-color:#69CDCF; color:#fff; // blanc/bleu
  746. @include shadowTextBtnBlack();
  747. text-align: center; text-decoration: none;
  748. }
  749. @media #{$small-only}{
  750. background-position: 160% 50%;
  751. .form-item-mail input.form-text, .form-item-name input.form-text{ width:7em;}
  752. min-height:60px; padding: 15px 0;
  753. // #user-login, >h3:first-child, >h3 span{ display:none; }
  754. }
  755. .message-error{
  756. color:#b94a48; @include fs12;
  757. }
  758. .modal-content &{
  759. padding: 2em;
  760. width:400px;
  761. background-color: #fff;
  762. padding:5px;
  763. @include rounded(5px);
  764. @include drop-shadow(0, 0, 7px, 0.4);
  765. #user-register-form{
  766. // hide honeypot field, because drupal.attachbehavior() doesn't work
  767. div.homepage-textfield{display:none;}
  768. .description{
  769. @include fs12;
  770. }
  771. }
  772. }
  773. }
  774. /*
  775. __ __ __
  776. _________ ____ / /____ ____ / /_ / /_____ ____
  777. / ___/ __ \/ __ \/ __/ _ \/ __ \/ __/_____/ __/ __ \/ __ \
  778. / /__/ /_/ / / / / /_/ __/ / / / /_/_____/ /_/ /_/ / /_/ /
  779. \___/\____/_/ /_/\__/\___/_/ /_/\__/ \__/\____/ .___/
  780. /_/
  781. */
  782. #content-top{
  783. // padding-left:50px;
  784. /*
  785. ___ _ _ _ _
  786. | _| |___ ___ ___| |_|___| |_
  787. | _| | .'| . |___| | |_ -| _|
  788. |_| |_|__,|_ | |_|_|___|_|
  789. |___|
  790. */
  791. #block-materio-flag-materio-flag-mybookmarks, #block-materio-flag-materio-flag-mylists{
  792. // padding:5px 0;
  793. @include fs10; color:#666666; @include fs300;
  794. .ie8 &{margin-top:40px;}
  795. h2{
  796. @include fs12; @include fs700; line-height:1.2; margin:0; color:#000;
  797. a.open-list, i.fi-x{
  798. @include inlineblock(); cursor:pointer; color:#000; margin-left:0.5em;
  799. opacity:0; @include transition-simply-prefix(opacity 0.1s ease-out);
  800. }
  801. i:before{
  802. @include fs14;
  803. }
  804. }
  805. &:hover{
  806. a.open-list, i.fi-x{
  807. opacity:1;
  808. }
  809. }
  810. span.listname[name=bookmarks]{
  811. cursor:pointer;
  812. }
  813. section.bookmarks{
  814. height:0; overflow:hidden;
  815. &.active{
  816. height:auto;
  817. }
  818. article.node.vm-bookmark{
  819. overflow:hidden;
  820. }
  821. }
  822. .mylists{
  823. // .transition-simply-prefix(height 0.3s ease-out);
  824. section{
  825. h2, .flaged{
  826. height:0; overflow: hidden;
  827. }
  828. &.active{
  829. h2, .flaged{
  830. height:auto;
  831. }
  832. }
  833. }
  834. }
  835. // .js & .mybookmarks{display:none;}
  836. }
  837. }
  838. #tool-bar{
  839. // margin-left:50px;
  840. position:relative;
  841. .inner-content{
  842. padding-top:10px; padding-bottom:10px;
  843. &>*{
  844. @include inlineblock();
  845. vertical-align: middle ;
  846. // height:35px;
  847. // margin: 5px;
  848. }
  849. @media #{$small-only}{
  850. // padding:0;
  851. // h1{line-height:0.5;}
  852. }
  853. }
  854. // text-align:right;
  855. // >*{ text-align: left ;}
  856. // .block{
  857. // .inlineblock();
  858. // margin:0 0 0 20px;
  859. // }
  860. .oldie &{background-color:#B1ADAD; padding:0 10px;}
  861. .btn-group{
  862. padding: 0; @include rounded(3px); @include bgc(#fff); margin:4px;
  863. @include shadowBtn();
  864. }
  865. #block-materio-page-title-materio-page-title{
  866. // .ie8 &{margin-top:40px;}
  867. margin: 0 10px 0 0;
  868. h1{ margin: 0;
  869. @include fs24; text-transform: capitalize; @include fs300;
  870. // line-height:1;
  871. }
  872. i{ vertical-align: middle ; margin-right:5px;}
  873. // i.icon-materio-folder{line-height: 1.3;}
  874. a.edit-list{
  875. @include op-hidden;
  876. i{ margin: 0 0 0 5px;}
  877. }
  878. &:hover{
  879. a.edit-list{ @include op-visible; }
  880. }
  881. @media #{$small-only}{ display:block;}
  882. }
  883. #block-materio-search-api-materio-search-api-viewmode{
  884. .viewmode-link{
  885. @include inlineblock(); margin:0 2px;
  886. &.active{cursor:normal;}
  887. .inner{display:none;@include fs10; }
  888. }
  889. @media #{$small-only}{
  890. .viewmode-link{ display:block; &:not(.active){display:none;} }
  891. }
  892. @media #{$small-only}{
  893. html.no-touch &:hover, &.hovered{ .viewmode-link.viewmode-cardsmall, .viewmode-link.viewmode-cardmedium{display:block;} }
  894. }
  895. @media #{$small-only}{
  896. html.no-touch &:hover, &.hovered{ .viewmode-link.viewmode-cardsmall, .viewmode-link.viewmode-cardmedium, .viewmode-link.viewmode-cardbig{display:block;} }
  897. }
  898. }
  899. #block-materio-search-api-materio-search-api-search{
  900. // @include inlineblock(); vertical-align: middle ;
  901. // position:absolute; top:10px; right:0;
  902. float:right;
  903. >.inner{
  904. @include inlineblock(); margin:0 0 0 10px;
  905. padding: 3px 10px; background-color:#fff; @include rounded(3px);
  906. @include shadowBtn(); text-align: right;
  907. }
  908. }
  909. #materio-search-api-search-form{
  910. text-align: right;
  911. @include inlineblock(); margin: 0;
  912. .form-item, input, .form-checkboxes{@include inlineblock(); margin:0; vertical-align:middle; padding:0;}
  913. .form-checkboxes{
  914. padding: 3px; @include fs12;
  915. .form-item{
  916. margin:0 5px;
  917. label{@include fs10;}
  918. }
  919. }
  920. a.back-search-home{
  921. display:inline-block;
  922. vertical-align: middle;
  923. color:#000;
  924. padding: 0 0.5em 0 0.2em;
  925. i:before{
  926. font-size:1.3em;
  927. }
  928. }
  929. input#edit-searchfield{
  930. border: 1px solid #ccc; @include rounded(15px);
  931. margin:3px 0 3px 3px; padding: 4px 5px; height:20px;
  932. @include fs12; line-height:1;
  933. background-position: 100% 7px;
  934. // width:100%;
  935. &.throbbing { background-position: 100% -15px; }
  936. }
  937. #edit-searchfield-autocomplete-aria-live{
  938. .oldie &{
  939. background-color:#1a1a1a;
  940. }
  941. };
  942. input#edit-create{ padding: 3px; }
  943. &.loading{
  944. background: transparent url('../img/ajax-loader.gif') no-repeat 98% center;
  945. input#edit-create{ visibility: hidden; }
  946. }
  947. @media #{$small-only}{
  948. input#edit-searchfield{width:16em;}
  949. #edit-bundles-filter{display:none;}
  950. }
  951. }
  952. }
  953. #center{
  954. // background-color: #e6e6e6;
  955. @include rounded(10px);
  956. .node-type-page:not(.page-node-11187) &{ background-color:#fff; }
  957. .ie8 &{height:100%; margin-top:20px;}
  958. }
  959. #content{
  960. padding:1em;
  961. @include transition-simply-prefix(height 0.3s ease-out);
  962. &.faded{
  963. opacity:0.5;
  964. @include transition-simply-prefix(opacity 0.3s ease-out);
  965. }
  966. .materiobase-results, .materiobase-actuality, .materio-flags-list{
  967. padding:0 0 30px 0; margin:0 0 20px 0;
  968. &.loading{
  969. background-image: url('../img/ajax-loader.gif');
  970. background-position: center bottom;
  971. background-repeat: no-repeat;
  972. }
  973. p.search-performance, p.flaglist-infos, p.actualities-infos{
  974. @include fs12; @include fs500; margin: 0;
  975. padding:10px 0 5px 15px;
  976. }
  977. // p.search-performance{.role-7 & {@include fs12;}}
  978. .search-results, .actuality-items, .flaglist-items{
  979. font-size:0;
  980. >*{font-size:16px;}
  981. text-align:center;
  982. >*{text-align:left;}
  983. }
  984. }
  985. ul.pager{
  986. padding: 1em 0; text-align: left;
  987. .ie8 &{position:absolute; left:37px; bottom: 35px;}
  988. li{margin:0; @include inlineblock(); vertical-align: middle;}
  989. .pager-current, a{color:#000;@include fs12; }
  990. .pager-current{@include fs900; @include fs14;.ie8 &{background:#fff; padding:0.3em 1em 0.3em 1em; margin-top:0.05em; border: 1px solid #333333;}}
  991. .pager-first, .pager-previous, .pager-next, .pager-last{ a{ @include fs24; @include fs300; } }
  992. // html.js & {display:none;}
  993. }
  994. .node-type-page &{
  995. // padding-left:15px;
  996. }
  997. }
  998. /** #content-bottom */
  999. #content-bottom{
  1000. padding-top:10px;
  1001. }
  1002. /*
  1003. _________ ____ ____ _____
  1004. / ____/ | / __ \/ __ \/ ___/
  1005. / / / /| | / /_/ / / / /\__ \
  1006. / /___/ ___ |/ _, _/ /_/ /___/ /
  1007. \____/_/ |_/_/ |_/_____//____/
  1008. */
  1009. $cardbookmark_w:50px;
  1010. $cardbookmark_h:70px;
  1011. $cardsmall_w:100px;
  1012. $cardsmall_h:140px;
  1013. $cardmedium_w:210px;
  1014. $cardmedium_h:295px;
  1015. $cardbig_w:425px;
  1016. $cardbig_h:610px;
  1017. $cardfull_w:850px;
  1018. $cardfull_h:610px;
  1019. @mixin card-box($w, $h){
  1020. width:$w; height:$h;
  1021. @include inlineblock(); position:relative; margin:7px;
  1022. @include rounded(5px); background-color: #FFF;
  1023. @include drop-shadow(0, 0, 5px, 0.2);
  1024. @include transition-simply-prefix(box-shadow 0.3s ease-out); // opacity 0.3s ease-out); //change this commas
  1025. }
  1026. @mixin card($w, $h){
  1027. @include card-box($w, $h);
  1028. >div.side{
  1029. @include rounded(5px); overflow: hidden;
  1030. }
  1031. // .no-touch &:hover{ @include drop-shadow(0, 0, 5px, 0.7); }
  1032. &.focused{ @include drop-shadow(0, 0, 7px, 0.9); }
  1033. &.just-added{ opacity:0; }
  1034. &.associated{
  1035. @include transition-simply-prefix(margin 0.3s ease-out);
  1036. &.just-added{margin-left:-$w;margin-right:$w;}
  1037. .modal-content &{
  1038. position:absolute;
  1039. top:0; left:0;
  1040. z-index:999;
  1041. }
  1042. }
  1043. &.removed{
  1044. @include transition-simply-prefix(width 0.3s ease-out);
  1045. width:0; padding-left:0; padding-right:0; margin-right:0; margin-left:0; overflow:hidden;
  1046. }
  1047. // TODO: how to show that a card was flaged ?
  1048. // .search-results &.flaged, .actuality-items &.flaged{
  1049. // border: 2px solid rgba(0,0,0, 0.3); margin: 3px;
  1050. // @include drop-shadow(0, 0, 3px, 0.6);
  1051. // }
  1052. nav.nav{
  1053. position:absolute; top:0; right:0; z-index:11;
  1054. padding: 5px 0;
  1055. @include border-radius(0, 5px, 0, 3px);
  1056. @include fs11;
  1057. // colors
  1058. // background-color: rgba(10, 10, 10, 0.9); color:#fff;
  1059. // a{color:#fff;}
  1060. //ul{background-color: rgba(10, 10, 10, 0.9);}
  1061. background-color: rgba(255, 255, 255, 0.9); color:#000;
  1062. a{color:#000;}
  1063. ul{background-color: rgba(255, 255, 255, 0.9);}
  1064. span.op{@include fs900; @include fs14;}
  1065. ul{padding: 0; margin: 0;}
  1066. section{
  1067. position:relative;
  1068. &>i{margin: 0 5px; &:hover{cursor:pointer;}}
  1069. }
  1070. ul{
  1071. position:absolute; right:0; top:0; margin-right:22px; min-width:80px; padding: 0; display:block;
  1072. @include rounded(3px); @include drop-shadow(-2px, 2px, 5px, 0.2);
  1073. // padding: 5px 10px;
  1074. li{
  1075. padding: 0; margin: 0; line-height:1; display:block;
  1076. height:0; overflow:hidden; @include transition-simply-prefix(height 0.2s ease-out);
  1077. // height:15px; overflow:hidden;
  1078. a{ display:block;}
  1079. }
  1080. &.links{
  1081. a{font-size:12px;}
  1082. }
  1083. &.flag-lists-entity-links{
  1084. width:160px;
  1085. font-size:0;
  1086. >*{font-size:11px;}
  1087. // &.loading{
  1088. // a{visibility: hidden;}
  1089. // background: transparent url('../img/ajax-loader.gif') no-repeat 98% center;
  1090. // }
  1091. li{
  1092. @include inlineblock(); min-width:48%; max-width:98%; padding-left:2px;
  1093. a{
  1094. color:#a6a6a6; @include transition-simply-prefix(color 0.2s ease-out);
  1095. &:hover, &.unflag-action{
  1096. color:#000; text-decoration: none;
  1097. }
  1098. }
  1099. &.flag-lists-create{
  1100. display:block; width:100%;
  1101. >*{ margin-top:1px; padding-top:1px; border-top:1px solid #e6e6e6;}
  1102. a{color:#000;}
  1103. }
  1104. &.loading{
  1105. a{visibility: hidden;}
  1106. background: transparent url('../img/ajax-loader.gif') no-repeat 98% center;
  1107. }
  1108. }
  1109. }
  1110. .ie8 &{background:#FFF;}
  1111. }
  1112. section:hover{
  1113. ul{
  1114. padding: 5px 5px;
  1115. li{height:17px;}
  1116. &.flag-lists-entity-links{
  1117. // width:160px;
  1118. }
  1119. }
  1120. }
  1121. // display:none;
  1122. }
  1123. // &:hover{nav.nav{display:block;}}
  1124. div.workflow{
  1125. position:absolute; bottom:0; right:0; z-index:11;
  1126. padding: 5px;
  1127. @include border-radius(3px, 0, 5px, 0);
  1128. @include fs11; vertical-align: top;
  1129. background-color: rgba(20, 20, 20, 0.9); color:#fff;
  1130. span{padding: 3px 0 0 4px; @include inlineblock();}
  1131. }
  1132. .field-name-field-description .upgrade{
  1133. @include fs12;
  1134. padding-top:4em;margin-top:-4.5em;
  1135. // .bgc(rgba(255,255,255,0.6));
  1136. background : linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 4em);
  1137. position:relative;
  1138. }
  1139. .side.oops p, .side .upgrade p{
  1140. padding: 10px; @include fs12;
  1141. a{
  1142. display:block; margin: 10px 0;
  1143. @include fs18; padding: 0.1em 0.6em 0.2em; @include rounded(0.3em);
  1144. font-weight:bold;
  1145. border: 2px solid #69CDCF; background-color:#69CDCF; color:#fff; // blanc/bleu
  1146. @include shadowTextBtnBlack();
  1147. text-align: center; text-decoration: none;
  1148. }
  1149. }
  1150. }// .card()
  1151. /*
  1152. _ _ ___
  1153. ___ ___ ___ _| | ___ ___ ___ ___ ___| |_ ___ ___ ___| _|___ ___ _____ ___ ___ ___ ___
  1154. | _| .'| _| . | |_ -| -_| .'| _| _| | | . | -_| _| _| . | _| | .'| | _| -_|
  1155. |___|__,|_| |___| |___|___|__,|_| |___|_|_| | _|___|_| |_| |___|_| |_|_|_|__,|_|_|___|___|
  1156. |_|
  1157. */
  1158. article.search-performance{
  1159. .inner{
  1160. padding: 1em;
  1161. }
  1162. p{@include fs14;}
  1163. a.button{
  1164. display:block; margin: 10px auto; max-width:10em;
  1165. @include fs18; padding: 0.1em 0.6em 0.2em; @include rounded(0.3em);
  1166. font-weight:bold;
  1167. border: 2px solid #69CDCF; background-color:#69CDCF; color:#fff; // blanc/bleu
  1168. @include shadowTextBtnBlack();
  1169. text-align: center; text-decoration: none;
  1170. }
  1171. &.view-mode-cardsmall{
  1172. @include card-box(327px, 140px);
  1173. }
  1174. &.view-mode-cardmedium{
  1175. @include card-box(210px, 295px);
  1176. .inner{
  1177. padding: 4em 1em 0;
  1178. }
  1179. }
  1180. &.view-mode-cardbig{
  1181. @include card-box(425px, 115px);
  1182. display:block; margin:0 auto;
  1183. }
  1184. &.view-mode-cardfull{
  1185. @include card-box(850px, 115px);
  1186. .inner{
  1187. padding: 1em 212px;
  1188. }
  1189. display:block; margin:0 auto;
  1190. }
  1191. }
  1192. /*
  1193. ______ __ ____ __ __
  1194. / ____/___ __________/ / / __ )____ ____ / /______ ___ ____ ______/ /_______
  1195. / / / __ `/ ___/ __ / / __ / __ \/ __ \/ //_/ __ `__ \/ __ `/ ___/ //_/ ___/
  1196. / /___/ /_/ / / / /_/ / / /_/ / /_/ / /_/ / ,< / / / / / / /_/ / / / ,< (__ )
  1197. \____/\__,_/_/ \__,_/ /_____/\____/\____/_/|_/_/ /_/ /_/\__,_/_/ /_/|_/____/
  1198. */
  1199. article.node-materiau.vm-bookmark, article.node-breve.vm-bookmark{
  1200. @include card($cardbookmark_w, $cardbookmark_h);
  1201. margin:3px;
  1202. .group-header{
  1203. display:none;
  1204. }
  1205. .group-images{ @include horihoverswitch(); }
  1206. // nav.nav{top:0;}
  1207. div.workflow{display:none;}
  1208. }
  1209. /*
  1210. ______ __ _____ ____
  1211. / ____/___ __________/ / / ___/____ ___ ____ _/ / /
  1212. / / / __ `/ ___/ __ / \__ \/ __ `__ \/ __ `/ / /
  1213. / /___/ /_/ / / / /_/ / ___/ / / / / / / /_/ / / /
  1214. \____/\__,_/_/ \__,_/ /____/_/ /_/ /_/\__,_/_/_/
  1215. */
  1216. article.node-materiau.vm-cardsmall, article.node-breve.vm-cardsmall{
  1217. @include card($cardsmall_w, $cardsmall_h); //width:100px; height:140px;
  1218. .group-header{
  1219. display:none; position:absolute;
  1220. @include fs14; @include fs500;
  1221. .field-name-title-field{@include fs700;}
  1222. .field-name-field-reference-materio, .field-name-field-localisation{ @include inlineblock(); @include fs12; }
  1223. .field-name-field-localisation{ float:right; }
  1224. }
  1225. .group-images{ @include horihoverswitch(); @include rounded(5px); overflow:hidden; }
  1226. nav.nav{
  1227. ul.flag-lists-entity-links{
  1228. width:75px; min-width:75px;
  1229. li{width:98%;}
  1230. }
  1231. .ie8 &{background: #FFF}
  1232. }
  1233. .no-touch &:not(.focused) nav.nav{@include op-hidden;}
  1234. .no-touch &:not(.focused) div.workflow{@include op-hidden;}
  1235. }
  1236. /*
  1237. ______ ____ _ ____ __
  1238. /_ __/___ ____ / / /_(_)___ _________ ___ ____ _/ / / _________ __________/ /
  1239. / / / __ \/ __ \/ / __/ / __ \ / ___/ __ `__ \/ __ `/ / / / ___/ __ `/ ___/ __ /
  1240. / / / /_/ / /_/ / / /_/ / /_/ / (__ ) / / / / / /_/ / / / / /__/ /_/ / / / /_/ /
  1241. /_/ \____/\____/_/\__/_/ .___/ /____/_/ /_/ /_/\__,_/_/_/ \___/\__,_/_/ \__,_/
  1242. /_/
  1243. */
  1244. #tooltip{
  1245. .group-header.smallcard{
  1246. @include fs14; @include fs500;
  1247. .field-name-title-field{@include fs700;}
  1248. .field-name-field-reference-materio, .field-name-field-localisation{ @include inlineblock(); @include fs12; }
  1249. .field-name-field-localisation{ float:right; }
  1250. }
  1251. }
  1252. /*
  1253. ______ __ __ ___ ___
  1254. / ____/___ __________/ / / |/ /__ ____/ (_)_ ______ ___
  1255. / / / __ `/ ___/ __ / / /|_/ / _ \/ __ / / / / / __ `__ \
  1256. / /___/ /_/ / / / /_/ / / / / / __/ /_/ / / /_/ / / / / / /
  1257. \____/\__,_/_/ \__,_/ /_/ /_/\___/\__,_/_/\__,_/_/ /_/ /_/
  1258. */
  1259. article.node-materiau.vm-cardmedium, article.node-breve.vm-cardmedium{
  1260. @include card($cardmedium_w, $cardmedium_h); //width:210px; height:295px;
  1261. .side{
  1262. @include layer(); background-color:#fff; cursor:pointer;
  1263. &:nth-child(2){z-index:1;}
  1264. }
  1265. .group-header{
  1266. position:absolute; bottom:0; z-index:2;
  1267. width:190px; padding:5px 15px 5px 5px; min-height:55px;
  1268. @include fs20; @include fs300; line-height:1;
  1269. .field-name-title-field{@include fs700;}
  1270. .field-name-field-nature-titre{@include fs14;}
  1271. @include bgcWhite();
  1272. @include border-radius(0, 0, 4px, 4px); overflow: hidden;
  1273. .field-name-field-reference-materio, .field-name-field-localisation, .field-name-field-authored-on{ @include inlineblock(); @include fs12; vertical-align: bottom; width:48%;}
  1274. .field-name-field-localisation{ text-align: right; }
  1275. .ie8 &{background:#fff; font-color:#000; line-height: 1em; padding: 10px;}
  1276. }
  1277. &.node-breve .group-header{
  1278. // @include fs20; @include fs300; line-height:1.1;
  1279. color:#fff; @include bgcBlack();
  1280. .field-name-field-authored-on{ @include fs12; @include fs500; }
  1281. .ie8 &{background:#000; font-size:15px; line-height: 1.2em;}
  1282. }
  1283. // &:hover .group-header{
  1284. // .bgcWhiteParentHover();
  1285. // }
  1286. .group-images{ @include horihoverswitch(); }
  1287. // side 2 : description
  1288. .field-name-field-description, .field-name-body{
  1289. @include fs12; @include fs300; overflow: hidden; z-index:-1; @include columnized(5px);
  1290. .column>*{padding-right:25px;}
  1291. }
  1292. // side 3 : samples
  1293. .field-name-field-location{
  1294. @include fs12; padding:5px; @include fs300;
  1295. .field-label{ @include fs10; text-transform: lowercase; margin:0;}
  1296. }
  1297. // side 4 : companies
  1298. .column-wrapper{
  1299. @include columnized(5px);
  1300. }
  1301. .field-name-field-company-fab, .field-name-field-company-distrib{
  1302. @include fs12; padding:5px; @include fs300;
  1303. .field-label{ @include fs10; text-transform: lowercase; margin:0;}
  1304. .field-name-field-tode-company{@include fs14;}
  1305. // span.print-link{display:none;}
  1306. }
  1307. .field-name-field-materiau-ref, .field-name-field-source, .field-name-field-attachments{
  1308. @include fs12; padding: 5px; @include fs300; a{color:#000;}
  1309. }
  1310. .field-label{@include fs900; margin: 1em 0 0.5em;}
  1311. // nav
  1312. .no-touch &:not(.focused) nav.nav{@include op-hidden;}
  1313. .no-touch &:not(.focused) div.workflow{@include op-hidden;}
  1314. .ie8 &{nav.nav{background: #FFF}}
  1315. }
  1316. /*
  1317. ______ __ ____ _
  1318. / ____/___ __________/ / / __ )(_)___ _
  1319. / / / __ `/ ___/ __ / / __ / / __ `/
  1320. / /___/ /_/ / / / /_/ / / /_/ / / /_/ /
  1321. \____/\__,_/_/ \__,_/ /_____/_/\__, /
  1322. /____/
  1323. */
  1324. article.node-materiau.vm-cardbig, article.node-breve.vm-cardbig{
  1325. @include card($cardbig_w, $cardbig_h); //width:425px; height:610px;
  1326. .side{
  1327. @include layer(); background-color:#fff; height:270px; top:340px; cursor:pointer;
  1328. &:nth-child(2){z-index:1;}
  1329. }
  1330. .group-side1{position:relative; @include border-radius(5px, 5px, 0, 0); overflow:hidden;}
  1331. .group-header{
  1332. position:absolute; bottom:0; z-index:2;
  1333. width:405px; padding:10px;
  1334. @include fs20; @include fs300; line-height: 1.1;
  1335. .field-name-title-field{@include fs700;}
  1336. .field-name-field-nature-titre{@include fs14;}
  1337. @include bgcWhite();
  1338. .field-name-field-reference-materio, .field-name-field-localisation, .field-name-field-authored-on { @include inlineblock(); @include fs12; vertical-align: bottom; width:48%;}
  1339. .field-name-field-localisation{ text-align: right; }
  1340. .ie8 &{background:#fff; font-color:#000; line-height: 1em; padding: 20px; border-bottom: 1px solid #C6C6C6;}
  1341. }
  1342. // &:hover .group-header{ .bgcWhiteParentHover(); }
  1343. &.node-breve .group-header{
  1344. color:#fff; @include bgcBlack();
  1345. .field-name-field-authored-on{ @include fs12; @include fs500; }
  1346. .ie8 &{background:#000; font-color:#fff; line-height: 1em; padding: 20px;}
  1347. }
  1348. .group-images{ @include horihoverswitch(); height:auto;}
  1349. // side 2
  1350. .field-name-field-description, .field-name-body{
  1351. @include fs12; @include fs300; @include columnized(10px);
  1352. }
  1353. // side 3 : samples
  1354. .field-name-field-location{
  1355. @include fs12; padding:10px; @include fs300;
  1356. .field-label{ @include fs10; text-transform: lowercase; float: none; }
  1357. }
  1358. // ?????
  1359. .column-wrapper{
  1360. @include columnized(10px);
  1361. }
  1362. // side 4
  1363. .field-name-field-company-fab, .field-name-field-company-distrib{
  1364. @include fs12; padding:10px; @include fs300;
  1365. .field-label{ @include fs10; text-transform: lowercase; float: none; }
  1366. .field-name-field-tode-company{@include fs14;}
  1367. }
  1368. .field-name-field-materiau-ref, .field-name-field-source, .field-name-field-attachments{
  1369. @include fs12; padding: 10px; @include fs300; a{color:#000;}
  1370. }
  1371. .field-label{@include fs900; margin: 0 0 0.5em;}
  1372. // nav
  1373. // nav.nav{ margin: 5px; }
  1374. .ie8 &{nav.nav{background: #FFF}}
  1375. // upgarde and full
  1376. .side.oops p, .side .upgrade p{
  1377. padding: 3em;
  1378. a{
  1379. border: 2px solid #eee; background-color:#eee; color:#fff;
  1380. @include transition-simply-prefix(border 0.3s ease-out);
  1381. @include transition-simply-prefix(background-color 0.3s ease-out);
  1382. }
  1383. }
  1384. &:hover .side.oops p, &:hover .side .upgrade p{
  1385. a{
  1386. border: 2px solid #69CDCF; background-color:#69CDCF;
  1387. }
  1388. }
  1389. }
  1390. /*
  1391. ______ __ ______ ____
  1392. / ____/___ __________/ / / ____/_ __/ / /
  1393. / / / __ `/ ___/ __ / / /_ / / / / / /
  1394. / /___/ /_/ / / / /_/ / / __/ / /_/ / / /
  1395. \____/\__,_/_/ \__,_/ /_/ \__,_/_/_/
  1396. */
  1397. article.node-materiau.vm-cardfull, article.node-breve.vm-cardfull{
  1398. @include card($cardfull_w, $cardfull_h); //width:875px; height:610px;
  1399. nav.nav{top:0;}
  1400. font-size:0px;
  1401. >*{@include fs16;}
  1402. >.side{@include inlineblock(); width:50%;
  1403. &.group-side-left{
  1404. @include border-radius(5px, 0, 0, 5px);
  1405. }
  1406. &.group-side-right{
  1407. @include border-radius(0, 5px, 5px, 0);
  1408. }
  1409. }
  1410. .group-images{ @include horihoverswitch(); }
  1411. .group-header{
  1412. @include fs20; @include fs300; padding:10px 10px 0 10px;
  1413. .field-name-title-field{@include fs700;}
  1414. .field-name-title-field,.field-name-field-reference-materio{
  1415. @include inlineblock;
  1416. vertical-align: baseline;
  1417. // line-height: 40px;
  1418. }
  1419. .field-name-field-reference-materio{@include fs12;}
  1420. }
  1421. &.node-breve .group-header{
  1422. color:#fff; @include bgcBlack();
  1423. .field-name-field-authored-on{ @include fs500; }
  1424. }
  1425. // Samples
  1426. .field-name-field-location{
  1427. @include fs12; padding:5px 10px 0 10px; @include fs300;
  1428. .field-label, .field-items, .field-item{
  1429. @include inlineblock; vertical-align: baseline;
  1430. }
  1431. .field-label{ @include fs10; text-transform: lowercase; float: none; }
  1432. }
  1433. .field-name-field-description, .field-name-body{
  1434. @include fs12; @include fs300; padding: 5px 10px 0 10px;
  1435. }
  1436. .field-name-field-attachments{
  1437. padding: 10px;
  1438. @include fs12;
  1439. }
  1440. // side 4 : companies
  1441. .field-name-field-company-fab, .field-name-field-company-distrib{
  1442. @include fs12; padding:10px; @include fs300;
  1443. @include inlineblock(); width:40%;
  1444. .field-item{margin-top:1em;}
  1445. .field-label{ @include fs10; text-transform: lowercase; float: none; }
  1446. .field-name-field-tode-company{@include fs14;}
  1447. }
  1448. .field-name-field-materiau-ref, .field-name-field-source, .field-name-field-attachments{
  1449. @include fs12; padding: 10px; @include fs300; a{color:#000;}
  1450. }
  1451. .field-label{@include fs900; margin: 0 0 0.5em;}
  1452. // nav
  1453. nav.nav{ margin: 5px; }
  1454. div.workflow{ margin: 5px; }
  1455. // upgarde and full
  1456. .side.oops p, .side .upgrade p{
  1457. padding: 3em;
  1458. a{
  1459. border: 2px solid #eee; background-color:#eee; color:#fff;
  1460. @include transition-simply-prefix(border 0.3s ease-out);
  1461. @include transition-simply-prefix(background-color 0.3s ease-out);
  1462. }
  1463. }
  1464. &:hover .side.oops p, &:hover .side .upgrade p{
  1465. a{
  1466. border: 2px solid #69CDCF; background-color:#69CDCF;
  1467. }
  1468. }
  1469. }
  1470. /*
  1471. __ ____ _ __
  1472. _________ __________/ / / __ \_____(_)___ / /_
  1473. / ___/ __ `/ ___/ __ / / /_/ / ___/ / __ \/ __/
  1474. / /__/ /_/ / / / /_/ / / ____/ / / / / / / /_
  1475. \___/\__,_/_/ \__,_/ /_/ /_/ /_/_/ /_/\__/
  1476. */
  1477. body.print-body-materiau{
  1478. // >*{font-size:0.8em;}
  1479. }
  1480. .print-node-materiau{
  1481. margin:0 auto;
  1482. @media screen {
  1483. @include card($cardfull_w, auto);
  1484. width:1024px;
  1485. padding:1em;
  1486. }
  1487. }
  1488. .print-site_name{}
  1489. .print-content{}
  1490. .print-content .node-materiau.vm-print{
  1491. margin:0; position:relative;
  1492. .field-name-title-field{@include fs500; font-size: 1.4em;}
  1493. // .field-name-field-reference-materio, .field-name-field-localisation, .field-name-field-authored-on{ @include inlineblock(); @include fs12; padding-right:15px;}
  1494. .field-name-field-nature-titre{
  1495. @include fs500;font-size: 1em;margin-bottom: 0.5em;
  1496. }
  1497. .group-head-right{
  1498. position:absolute;
  1499. top:0; right:0;
  1500. padding-top:1em;
  1501. text-align: right;
  1502. font-size:0.8em;
  1503. .field-name-field-reference-materio{font-weight: 800; font-size: 1.2em;}
  1504. }
  1505. .side{
  1506. &.group-side-left{
  1507. width:45%;
  1508. position:absolute;
  1509. .field-name-field-description{font-size:0.8em;}
  1510. // samples
  1511. .field-name-field-location{
  1512. font-size:0.7em;
  1513. }
  1514. // companies
  1515. >.field-type-taxonomy-term-reference{
  1516. display:inline-block; vertical-align: top; width: 45%;
  1517. margin:0.5em 1em 0 0;
  1518. font-size:0.7em;
  1519. >.field-label{font-size: 0.8em; font-weight: 300;}
  1520. >.node-company{
  1521. .field-name-field-tode-company{font-size: 1.2em;}
  1522. .field-label{display:none;}
  1523. }
  1524. }
  1525. }
  1526. &.group-side-right{
  1527. section, div, figure{max-width: 100%;}
  1528. .field-name-field-materiau-image{
  1529. text-align: right;
  1530. >figure{
  1531. display: inline-block;
  1532. max-width:19%;
  1533. margin:0.5em 0 0 0.5em;
  1534. max-width:100%;
  1535. margin-left: 50%;
  1536. img{max-width:100%;}
  1537. }
  1538. .field-item{
  1539. display:none;
  1540. &:nth-child(-n+7){
  1541. display:inline-block;
  1542. }
  1543. max-width:19%;
  1544. margin:0.5em 0 0 0.5em;
  1545. &:nth-child(-n+2){
  1546. max-width:100%;
  1547. margin-left: 50%;
  1548. }
  1549. img{max-width:100%;}
  1550. }
  1551. }
  1552. }
  1553. }
  1554. .field-name-field-tode-company{
  1555. font-size: 1.5em; font-weight: 700;
  1556. }
  1557. .field-name-field-description,
  1558. .field-name-field-company-fab,
  1559. .field-name-field-reference-distrib
  1560. {
  1561. padding-bottom: 1em;
  1562. }
  1563. }
  1564. /*
  1565. ____ ____ _____ ________
  1566. / __ \/ __ \/ _/ | / /_ __/
  1567. / /_/ / /_/ // // |/ / / /
  1568. / ____/ _, _// // /| / / /
  1569. /_/ /_/ |_/___/_/ |_/ /_/
  1570. */
  1571. @media print {
  1572. @page { margin: 1.5cm 7mm 8mm; }
  1573. }
  1574. .print-site_name{
  1575. width:100%;
  1576. vertical-align: bottom;
  1577. margin-bottom:0.5em;
  1578. h1{
  1579. margin:0 0 0 0;
  1580. font-size: 1.4em;
  1581. text-align: center;
  1582. // @include inlineblock(); vertical-align: baseline; position:relative; line-height:1.25;
  1583. a{
  1584. color:inherit;
  1585. &:hover{text-decoration: none ;}
  1586. }
  1587. }
  1588. span.slogan{
  1589. display: none;
  1590. font-size: 0.8em;
  1591. margin-top:-3px;
  1592. margin-left:-0.5em;
  1593. @include fs900;
  1594. .ie8 &{position: absolute; margin-top:22px;}
  1595. }
  1596. }
  1597. .print-content{
  1598. margin-bottom: 1em;
  1599. }
  1600. .print-footer{
  1601. position:absolute; bottom:0; text-align: center; width:100%;
  1602. p{
  1603. display:inline-block; width:45%; text-align: center;
  1604. // margin: 0 3em;
  1605. }
  1606. }
  1607. /*
  1608. ___ __ ____________ __________ __ _______ __ __________________
  1609. / | / / / /_ __/ __ \/ ____/ __ \/ |/ / __ \/ / / ____/_ __/ ____/
  1610. / /| |/ / / / / / / / / / / / / / / /|_/ / /_/ / / / __/ / / / __/
  1611. / ___ / /_/ / / / / /_/ / /___/ /_/ / / / / ____/ /___/ /___ / / / /___
  1612. /_/ |_\____/ /_/ \____/\____/\____/_/ /_/_/ /_____/_____/ /_/ /_____/
  1613. */
  1614. #autocomplete{
  1615. border: 0; @include rounded(3px);
  1616. background-color: rgba(0,0,0,0.6);
  1617. text-align: left;
  1618. margin-left: 2px;
  1619. .oldie &{background-color:#545454;}
  1620. li{
  1621. color:#FFF; background-color: transparent;
  1622. &.selected{background-color: rgba(0,0,0,0.8);}
  1623. div{padding:0.1em 5px;} @include fs12;
  1624. }
  1625. }
  1626. /**
  1627. * the old modal api (balck bg) for contextual forms (create new flag list)
  1628. */
  1629. @mixin mat_modal(){
  1630. background-color: rgba(0,0,0,0.7);
  1631. @include rounded(5px); border: 0;
  1632. *{color:#fff; background-color:transparent;}
  1633. @include fs12;
  1634. form{
  1635. background-color:transparent; color:#fff; border: 0px;
  1636. .form-actions{
  1637. background-color:transparent; margin: 0; padding: 0; border: 0;
  1638. }
  1639. input.form-text, textarea, div.grippie{background-color:#fff; color:#000; border: 0;}
  1640. .form-actions{ text-align: right ;}
  1641. input.form-submit{
  1642. @include button($button-tny);
  1643. //@include btn-mini; color:#000; //change this btn bootstrap -> foundation
  1644. &[name="create"]{
  1645. @include button($button-tny, $success-color);
  1646. }
  1647. &[name="save"]{
  1648. @include button($button-tny, $success-color);
  1649. }
  1650. &[name="delete"]{
  1651. @include button($button-tny, $alert-color);
  1652. }
  1653. &[name="cancel"]{
  1654. @include button($button-tny, $secondary-color);
  1655. }
  1656. }
  1657. }
  1658. }
  1659. #modal{
  1660. @include mat_modal();
  1661. >*{padding: 10px;}
  1662. #flag-lists-form{
  1663. .form-item-title{
  1664. // label, input{.inlineblock();}
  1665. // label{width:38%;}
  1666. input{width:95%;}
  1667. }
  1668. }
  1669. .actions{
  1670. text-align: right;
  1671. }
  1672. }
  1673. /**
  1674. * the new modal api used for preview and register modal
  1675. */
  1676. .modal-wrapper {
  1677. &:before {
  1678. content: "";
  1679. display: inline-block;
  1680. height: 100%;
  1681. margin-right: -0.25em;
  1682. vertical-align: middle;
  1683. }
  1684. &:after, &:before {
  1685. -moz-box-sizing: border-box;
  1686. }
  1687. // background-color: rgba(0, 0, 0, 0.4);
  1688. bottom: 0;
  1689. // display: none;
  1690. left: 0;
  1691. position: fixed;
  1692. right: 0;
  1693. text-align: center;
  1694. top: 0;
  1695. white-space: nowrap;
  1696. z-index: 99998;
  1697. .modal-bg{
  1698. background-color: #000;
  1699. position:absolute;
  1700. top:0; left:0;
  1701. width:100%; height:100%;
  1702. opacity:0.5;
  1703. }
  1704. .modal-content{
  1705. position:relative;
  1706. display: inline-block;
  1707. margin: 0 auto;
  1708. text-align: left;
  1709. vertical-align: middle;
  1710. white-space: normal;
  1711. // width: 400px;
  1712. min-height:200px;
  1713. // background-color: #fff;
  1714. }
  1715. }
  1716. /*
  1717. _______ __________ ____ __ __ ____ ___ _ __
  1718. / / ___// ____/ __ \/ __ \/ / / / / __ \/ | / | / /
  1719. __ / /\__ \/ / / /_/ / / / / / / / / /_/ / /| | / |/ /
  1720. / /_/ /___/ / /___/ _, _/ /_/ / /___/ /___/ ____/ ___ |/ /| /
  1721. \____//____/\____/_/ |_|\____/_____/_____/_/ /_/ |_/_/ |_/
  1722. */
  1723. .jspContainer{
  1724. .jspVerticalBar{
  1725. background-color: transparent;
  1726. width:5px; //margin-right:-5px;
  1727. .jspTrack{
  1728. background-color: transparent;
  1729. .jspDrag{
  1730. background-color: #ccc;
  1731. @include rounded(3px);
  1732. }
  1733. }
  1734. }
  1735. }
  1736. /*
  1737. __________ ____ __ ______________
  1738. /_ __/ __ \/ __ \/ / /_ __/ _/ __ \
  1739. / / / / / / / / / / / / / // /_/ /
  1740. / / / /_/ / /_/ / /___/ / _/ // ____/
  1741. /_/ \____/\____/_____/_/ /___/_/
  1742. */
  1743. #tooltip{
  1744. position:absolute; z-index:999; max-width:180px; background-color: rgba(255, 255, 255, 1); padding: 5px; @include rounded(3px);
  1745. @include fs12; @include fs500;
  1746. @include drop-shadow(0, 0, 5px, 0.4);
  1747. &.op-visible{
  1748. @include transition-simply-prefix(opacity 0.1s ease-out); // top 0.1s linear); // left 0.1s linear,
  1749. // change this transition foundation
  1750. }
  1751. }
  1752. /*
  1753. ______________________ ____ ___ ________ __
  1754. / ____/ ____/ ____/ __ \/ __ )/ | / ____/ //_/
  1755. / /_ / __/ / __/ / / / / __ / /| |/ / / ,<
  1756. / __/ / /___/ /___/ /_/ / /_/ / ___ / /___/ /| |
  1757. /_/ /_____/_____/_____/_____/_/ |_\____/_/ |_|
  1758. */
  1759. #block-feedback-form{
  1760. @media #{$medium-only}{ bottom:5px; left:5px; right:auto; }
  1761. h2{
  1762. line-height:1.2; @include fs14; margin: 0;
  1763. .title{display:none;}
  1764. }
  1765. #feedback-form-toggle{
  1766. padding: 2px 3px; @include rounded(3px); background-color:#ff7600; color:#fff;
  1767. line-height:2; @include fs900;
  1768. }
  1769. .content{
  1770. @include mat_modal();
  1771. .ie8 &{background:#000;}
  1772. }
  1773. #feedback-status-message{background-color:#fff; padding: 5px;}
  1774. }
  1775. /*
  1776. _________ _____ __ __ __ _________ ____ _____
  1777. /_ __/ | / ___// //_/ _/_/ /_ __/ | / __ ) ___/
  1778. / / / /| | \__ \/ ,< _/_/ / / / /| | / __ \__ \
  1779. / / / ___ |___/ / /| | _/_/ / / / ___ |/ /_/ /__/ /
  1780. /_/ /_/ |_/____/_/ |_| /_/ /_/ /_/ |_/_____/____/
  1781. */
  1782. @mixin tabs-primary(){
  1783. a{
  1784. @include fs12;
  1785. padding: 5px 10px;
  1786. background-color:#e6e6e6;
  1787. &.active, &:hover{background-color:#e6e6e6;}
  1788. @include rounded(3px);
  1789. }
  1790. }
  1791. @mixin tabs-secondary(){
  1792. @include fs10;
  1793. padding: 0.5em 1em;
  1794. }
  1795. #tasks{
  1796. ul.tabs{
  1797. @include inlineblock();
  1798. border:0 solid #fff;
  1799. padding: 0; margin: 0;
  1800. li{padding: 0; margin: 2px 5px; border:0 solid #fff;}
  1801. a{
  1802. border:0; color:#7f7f7f;
  1803. &.active, &:hover{font-weight: 900; color:#000;}
  1804. }
  1805. &.primary{
  1806. @include tabs-primary();
  1807. }
  1808. &.secondary{
  1809. @include tabs-secondary();
  1810. }
  1811. }
  1812. }
  1813. /*
  1814. ______________ _____________________
  1815. / ___/_ __/ |/_ __/ _/ ____/ ___/
  1816. \__ \ / / / /| | / / / // / \__ \
  1817. ___/ // / / ___ |/ / _/ // /___ ___/ /
  1818. /____//_/ /_/ |_/_/ /___/\____//____/
  1819. */
  1820. /*
  1821. _ _ ___ ___ ___
  1822. | | |_ -| -_| _|
  1823. |___|___|___|_|
  1824. */
  1825. .page-user, .page-user-edit, .page-user-password, .page-user-reset, .page-toboggan{
  1826. #center{background: #fff url('../img/user-page-bg.gif') no-repeat bottom right;}
  1827. .messages{ width:800px; margin:0 auto; }
  1828. &.role-6 #tasks .tabs.primary{display:none;}
  1829. &.role-6 #tasks .tabs.secondary{@include tabs-primary();}
  1830. #center >*{
  1831. width:800px; margin:0 auto; padding-top:1em; @include fs14;
  1832. fieldset{
  1833. margin-bottom:1em;
  1834. border:none;
  1835. }
  1836. legend{
  1837. @include fs16; margin:0; padding:10px 0 5px 0; line-height:1; border:0 solid #fff;
  1838. a{color:#000;}
  1839. }
  1840. .form-item{
  1841. margin:0 0 0.5em 0; width:100%;
  1842. label, input.form-text{
  1843. @include inlineblock(); vertical-align:middle;
  1844. }
  1845. label{margin-right:1em;}
  1846. input.form-text{
  1847. padding:2px 4px; width:20em;
  1848. }
  1849. }
  1850. .form-wrapper{
  1851. &>.form-item{margin:0 0 2em 0;}
  1852. }
  1853. .form-type-password-confirm, .form-type-new-password-confirm{
  1854. label{width:9em;}
  1855. .password-parent{width:auto;}
  1856. .password-strength, .password-confirm{
  1857. width:15em; margin-top:0;
  1858. }
  1859. }
  1860. .form-type-checkbox{
  1861. input{margin:0;}
  1862. label{@include fs14; margin:0;}
  1863. }
  1864. #edit-language{
  1865. .form-item{
  1866. @include inlineblock(); width:auto; margin-right:1em;
  1867. input, label{margin:0;}
  1868. }
  1869. }
  1870. select.form-select{
  1871. width:auto; padding:2px 4px; height:auto;
  1872. }
  1873. div.description{
  1874. @include fs11;
  1875. }
  1876. div.form-actions{
  1877. margin: 0; text-align:right; padding: 1em 0.5em;
  1878. }
  1879. // input#edit-submit{@include btn; @include btn-success;} //change this btn foundation
  1880. &#user-profile-form{
  1881. label{min-width:10em; }
  1882. }
  1883. #edit-profile-adherent-field-first-name, #edit-profile-adherent-field-name,
  1884. #edit-profile-adherent-field-private-quality, #edit-profile-adherent-field-service, #edit-profile-adherent-field-employee,
  1885. #edit-profile-adherent-field-naf, #edit-profile-adherent-field-siret{
  1886. @include inlineblock(); vertical-align:middle; width:auto; margin: 0 1em 0.5em 0;
  1887. div{width:auto; margin: 0; padding: 0;}
  1888. // label{margin: 0 0.5em 0 0;}
  1889. }
  1890. // #edit-profile-adherent-field-name, #edit-profile-adherent-field-service,
  1891. // #edit-profile-adherent-field-naf, #edit-profile-adherent-field-siret, .form-item-profile-adherent-field-adresse-und-0-locality{
  1892. // label{min-width:auto;}
  1893. // }
  1894. #edit-profile-adherent-field-siret{label{width:auto;}input{width:8em;}}
  1895. #edit-profile-adherent-field-naf{input{width:13em;}}
  1896. #edit-profile-adherent-field-organization{ margin: 2em 0 0 0; }
  1897. #edit-profile-adherent-field-employee{
  1898. label{width:auto;}
  1899. input{width:4em;}
  1900. }
  1901. #edit-profile-adherent-field-private-phone{
  1902. .form-phone-number{
  1903. @include inlineblock(); vertical-align:middle;
  1904. #edit-profile-adherent-field-private-phone-und-0-number{width:10em;}
  1905. }
  1906. }
  1907. #edit-profile-adherent-field-adresse-und-0{
  1908. padding:0;
  1909. .street-block{
  1910. input{ width:35em;}
  1911. }
  1912. .locality-block{
  1913. .form-item{width:auto; margin-right:1em;}
  1914. }
  1915. }
  1916. #edit-profile-adherent-field-user-website{
  1917. margin: 2em 0 0 0;
  1918. .form-item>*{@include inlineblock(); vertical-align: middle; }
  1919. input{width:35em}
  1920. }
  1921. &.profile{
  1922. h3{border:0 solid transparent;}
  1923. .field-label{display:inline;}
  1924. }
  1925. #edit-mimemail, #edit-locale, #edit-timezone{padding:0;}
  1926. }
  1927. } // user
  1928. /*
  1929. _ __
  1930. _____(_)___ ___ ____ / /__ ____ ___ _ _______
  1931. / ___/ / __ `__ \/ __ \/ / _ \/ __ \/ _ \ | /| / / ___/
  1932. (__ ) / / / / / / /_/ / / __/ / / / __/ |/ |/ (__ )
  1933. /____/_/_/ /_/ /_/ .___/_/\___/_/ /_/\___/|__/|__/____/
  1934. /_/
  1935. */
  1936. // .node-type-simplenews{
  1937. // img{
  1938. // max-width: none !important;
  1939. // }
  1940. // }
  1941. body.node-type-simplenews{
  1942. #content{
  1943. .inner-content{
  1944. text-align:center;
  1945. }
  1946. article.node.node-simplenews{
  1947. @include inlineblock();
  1948. max-width:600px;
  1949. padding:1em 0;
  1950. tbody{
  1951. border-top:0px;
  1952. }
  1953. img{max-width: 9999px;}
  1954. @media #{$small-only}{
  1955. max-width: 100%;
  1956. overflow-x: hidden;
  1957. // .field-name-body{position: relative;}
  1958. // table, tbody, tr,td{
  1959. // display: block;
  1960. // max-width: 100%;
  1961. // }
  1962. table{
  1963. width:100%!important;
  1964. }
  1965. td{
  1966. vertical-align: top
  1967. }
  1968. img{max-width: 100%;}
  1969. p{
  1970. padding: 0 0.5em;
  1971. }
  1972. }
  1973. }
  1974. }
  1975. }
  1976. /*
  1977. _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____
  1978. | _ | _ | __| __| | | | | |_ _| _ | |_ _|
  1979. | __| | | | __| | --| | | | | | | | | | --| | |
  1980. |__| |__|__|_____|_____| |_____|_____|_|___| |_| |__|__|_____| |_|
  1981. */
  1982. .page-node-11175{
  1983. #main{
  1984. // background-color:#fff;
  1985. #center{
  1986. background: #fff url('../img/bg-contact.gif') no-repeat bottom right;
  1987. }
  1988. .field-name-body p{
  1989. @include inlineblock; margin: 15px;
  1990. strong{@include fs18;}
  1991. }
  1992. }
  1993. } // contact
  1994. /*
  1995. _____ _____ _____ _____ _____ _____ _____
  1996. | _ | __ | | | | | | __|
  1997. | __| -|- -| --|- -| | | | | |
  1998. |__| |__|__|_____|_____|_____|_|___|_____|
  1999. */
  2000. body.page-node-11187{
  2001. // #center{ background-color: #fff; }
  2002. @media #{$medium-up}{
  2003. .node-11187{
  2004. .field-name-body{
  2005. div.column, div.column-demi, div.column-full, div.column-auto{
  2006. &, &:last-child{
  2007. @include inlineblock; margin: 10px; float:none;
  2008. }
  2009. }
  2010. div.column{
  2011. width:22.4%;
  2012. ul.list-text, p.description{ min-height:170px;}
  2013. }
  2014. div.column-demi{
  2015. width:46%;
  2016. ul.list-text{ min-height:110px;}
  2017. }
  2018. div.column-full{
  2019. width:92%;
  2020. // ul.list-text{ min-height:110px;}
  2021. }
  2022. div.column-auto{
  2023. width:auto; max-width: 98%;
  2024. }
  2025. }
  2026. }
  2027. #block-materio-user-user-register{
  2028. width:600px; margin: 0 auto; padding:2em;
  2029. }
  2030. }
  2031. @media #{$small-only}{
  2032. // #block-materio-user-user-register{ padding: 25px 0 0 0; #user-login, >h3:first-child, h3 >span{display:block;}}
  2033. #block-system-help{text-align: center;}
  2034. }
  2035. .node-11187{
  2036. .field-name-body{
  2037. text-align:center;
  2038. >*{text-align:left;}
  2039. div.column, div.column-demi, div.column-full, div.column-auto{
  2040. position:relative; background-color: #fff;
  2041. @include rounded(5px); @include drop-shadow(0, 0, 6px, 0.5);
  2042. .ie8 &{max-width:500px; margin:auto; margin-bottom:15px; border:1px solid #C6C6C6;}
  2043. overflow:hidden;
  2044. &>*{ padding: 0 10px;}
  2045. // img{float:left; padding: 0; }
  2046. h2{ text-align: left; margin: 5px 0 0 15px;}
  2047. .subtitle{
  2048. padding: 0 0 0 15px;
  2049. @include fs18; @include italic; @include bold; line-height:1;
  2050. }
  2051. ul{margin: 0; padding: 0 15px;}
  2052. li{
  2053. list-style: none; @include fs12;
  2054. &:before{
  2055. content:"+ ";
  2056. @include fs900;
  2057. }
  2058. }
  2059. .description{
  2060. @include fs12;
  2061. margin: 0; padding: 0 15px;
  2062. }
  2063. .get-link{
  2064. margin: 0; @include border-radius(0 0 5px 5px); border: 1px solid #fff; min-height: 92px;
  2065. a{ display:block; width:100%; padding: 15px 0; color:#1A1A1A; text-decoration: none; }
  2066. }
  2067. .get-link{background-color: #C8C8C8; }
  2068. &.web{ .get-link{ background-color: #69CDCF; } }
  2069. &.webshowroom { .get-link{ background-color: #D476AE; } }
  2070. &.pack4 { .get-link{ background-color: #E6DE1C; } }
  2071. &.etudiants{ .get-link{background-color: #4BA13D; } };
  2072. // &.ecole-de-neige { .list-neige{min-height:80px;} }
  2073. &.neutral .get-link{
  2074. min-height: 62px;
  2075. padding:15px 0;
  2076. }
  2077. } // end div.column div.column-demi
  2078. div.column{
  2079. h2{ padding:10px 0 0; @include fs24; }
  2080. // .subtitle{ min-height:3em; }
  2081. .get-link{
  2082. padding: 0;
  2083. @include fs28; text-align: center;
  2084. @include italic; @include fs900;
  2085. span{ @include fs20; }
  2086. @include shadowTextBtnWhite();
  2087. }
  2088. }
  2089. div.column-demi{
  2090. h2{ padding:10px 0 0; @include fs24; top:0; }
  2091. .subtitle{ min-height:2em; }
  2092. ul{ @include fs14; min-height:120px;}
  2093. .get-link{ @include fs14; text-align: left; padding: 0 1em; background-color:#ddd; }
  2094. }
  2095. }
  2096. } // end .node-11187
  2097. // hide get free account for user already logged-in
  2098. // hide get flocon for user already flocon (role-6)
  2099. &.logged-in{
  2100. // .column.gratos{.get-link{
  2101. // cursor:auto!important;
  2102. // a{display:none!important;}
  2103. // }}
  2104. // &.role-6{
  2105. // .column.etudiants{.get-link{
  2106. // cursor:auto!important;
  2107. // a{display:none!important;}
  2108. // }}
  2109. // }
  2110. }
  2111. } // princing
  2112. /*
  2113. _____ ____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____
  2114. | _ | \| | | __| __| | | | | | __| | __ | |
  2115. | | | | | __|__ |- -| | | | | | | __| | | -| | | |
  2116. |__|__|____/|__|__|_____|_____|_____|_____|_|___| |__| |_____|__|__|_|_|_|
  2117. */
  2118. .node-11186{
  2119. nav ul.links a.language-link { display:none; }
  2120. }
  2121. #webform-client-form-11186{
  2122. @media #{$medium-up}{
  2123. padding: 10px 30px;
  2124. #webform-component-column-left--membership-options{
  2125. margin: 10px 0;
  2126. label{width:auto;}
  2127. }
  2128. fieldset{
  2129. @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;
  2130. fieldset{ border: 0 solid #ddd; padding: 0;}
  2131. }
  2132. legend{margin: 0; @include fs18; @include fs700;}
  2133. .form-item{ margin: 0 20px 0 0; }
  2134. label{ @include fs12; width:10em; @include inlineblock; vertical-align:middle; margin-right:1em; border-bottom: 1px solid #cccccc; }
  2135. .description{ @include fs11; width:25em; @include inlineblock; vertical-align:bottom; margin-left:1em; color:#7f7f7f;}
  2136. input.form-text{width:13em;}
  2137. }
  2138. @media #{$medium-only}{
  2139. padding: 10px;
  2140. #webform-component-column-left--membership-options{
  2141. margin: 0 0 10px 0;
  2142. .form-item{width:100%;}
  2143. label{ width:75%; }
  2144. }
  2145. legend{margin: 0; @include fs16; @include fs700;}
  2146. .form-item{ margin: 0; float:none;}
  2147. label{ @include fs12; width:30%; @include inlineblock; vertical-align:middle; margin-right:0.5em; }
  2148. input.form-text, select.form-select{width:60%;}
  2149. #webform-component-infos{@include fs14;}
  2150. } //change this
  2151. background-color: #e6e6e6; @include rounded(10px);
  2152. .fieldset-wrapper>.form-item{ @include inlineblock; }
  2153. #webform-component-column-left{@include inlineblock; width:25%; border:none;}
  2154. #webform-component-column-right{ @include inlineblock; min-width:70%;}
  2155. #webform-component-column-left--membership-options{
  2156. .form-type-radio{
  2157. border:1px solid #ddd; @include rounded(5px); padding: 10px 5px; margin: 5px 0;
  2158. input{ @include inlineblock; vertical-align: middle; margin:0px 5px;}
  2159. label{@include fs20; @include fs700; @include inlineblock; vertical-align: middle; margin: 0;}
  2160. background-color: #fff;
  2161. &:hover{@include drop-shadow(0, 0, 5px, 0.2); }
  2162. &.form-item-submitted-column-left-membership-options:nth-child(1){background-color: #69CDCF;}
  2163. &.form-item-submitted-column-left-membership-options:nth-child(2){background-color: #D476AE;}
  2164. &.form-item-submitted-column-left-membership-options:nth-child(3){background-color: #E6DE1C;}
  2165. &.form-item-submitted-column-left-membership-options:not(.selected){opacity:0.4;}
  2166. }
  2167. &>label{width:200px; @include fs18; @include fs700; }
  2168. label{ border: 0; }
  2169. }
  2170. #webform-component-column-right--me--my-account-email{
  2171. display:block;
  2172. }
  2173. #webform-component-column-right--company--administrative-e-mail{
  2174. .description{@include inlineblock;}
  2175. }
  2176. #addressfield-wrapper{ margin-top:1em; }
  2177. .street-block .form-item{ @include inlineblock; }
  2178. #webform-component-column-right--collaborators{
  2179. margin: 20px 0; overflow:hidden;
  2180. fieldset{@include inlineblock; width:33%;}
  2181. .form-item{display:block;}
  2182. label{width:6em;}
  2183. input{width:11em;}
  2184. }
  2185. #webform-component-infos{margin: 20px 0;}
  2186. .form-actions{
  2187. padding: 0; margin: 0;
  2188. border: 0px;
  2189. background-color: transparent;
  2190. text-align: left;
  2191. .form-submit{
  2192. border: 2px solid #69CDCF; background-color:#69CDCF; color:#fff;
  2193. @include fs18; padding: 0.2em 1em 0.3em; @include rounded(0.3em);
  2194. font-weight:bold;
  2195. margin-bottom:9px;
  2196. @include shadowTextBtnBlack();
  2197. }
  2198. }
  2199. #webform-component-column-right--news-letters{
  2200. >label{margin: 0; @include fs18; @include fs700; border:none; line-height:40px}
  2201. .form-item{
  2202. @include inlineblock();
  2203. label{width:auto}
  2204. input, label{margin: 0;}
  2205. }
  2206. }
  2207. #edit-submitted-terms-of-services{
  2208. margin-bottom:0.5em;
  2209. input, label{margin: 0 0.3em 0 0;}
  2210. label{ width:auto; }
  2211. }
  2212. } // adhesion
  2213. /*
  2214. _____ _____ _____ _____ _____ _____ _____ _____ _____ _ _ _ _____ _____ _____ _____
  2215. | | | | | | _ | __ |_ _| | | | | __| | | | | __| | __ | |
  2216. | | | --| | --| | -| | | | | |- -| __| | | | | __| | | -| | | |
  2217. |_____|_____| |_____|__|__|__|__| |_| \___/|_____|_____|_____| |__| |_____|__|__|_|_|_|
  2218. */
  2219. #uc-cart-view-form{
  2220. background-color: #e6e6e6;
  2221. // @include rounded(10px);
  2222. padding: 10px, 30px;
  2223. // max-width:$cardfull_w;
  2224. display:inline-block;
  2225. table{
  2226. width:auto; display:table;
  2227. background-color:#fff;
  2228. thead th{border-bottom:none;padding: 1em;}
  2229. tbody{
  2230. border-top:none;
  2231. tr.even, tr.odd{
  2232. background-color:#fff;
  2233. border-bottom:none;
  2234. }
  2235. td{
  2236. padding: 1em;
  2237. // &.price{ padding: 0.5em 1em; }
  2238. }
  2239. }
  2240. }
  2241. fieldset{ border: none!important;}
  2242. .form-type-uc-quantity input{
  2243. width:2em;
  2244. }
  2245. .form-actions{
  2246. padding: 0; margin: 0;
  2247. border: 0px;
  2248. background-color: transparent;
  2249. text-align: right;
  2250. display:block; width:100%;
  2251. &:before, &:after{
  2252. display:block;
  2253. }
  2254. .form-submit{
  2255. @include bouton();
  2256. margin-left:1em;
  2257. &#edit-checkout--2{
  2258. @include bouton-bleu();
  2259. }
  2260. }
  2261. }
  2262. }
  2263. /*
  2264. _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____
  2265. | | | | | | | | __| | | | | | |_ _| | __| | __ | |
  2266. | | | --| | --| | __| --| -| | | | | | | | __| | | -| | | |
  2267. |_____|_____| |_____|__|__|_____|_____|__|__|_____|_____| |_| |__| |_____|__|__|_|_|_|
  2268. */
  2269. #uc-cart-checkout-form{
  2270. // display:inline-block;
  2271. @mixin price-table(){
  2272. @include fs14;
  2273. min-width:20em;
  2274. td.price{width:4em;};
  2275. }
  2276. background-color: #e6e6e6;
  2277. // @include rounded(10px);
  2278. padding: 10px, 30px;
  2279. fieldset{ border: none!important;}
  2280. fieldset.form-row{
  2281. // @include rounded(5px); border-left: 1px solid #cccccc; border-bottom: 1px solid #cccccc;
  2282. padding-bottom:20px; margin-bottom:20px;
  2283. // fieldset{ border: 0 solid #ddd; padding: 0;}
  2284. }
  2285. fieldset.form-column{
  2286. @include inlineblock; max-width:39%; clear:both; float:none;
  2287. margin: 15px 1em;
  2288. > .fieldset-wrapper > .form-wrapper{
  2289. margin: 10px 0;
  2290. }
  2291. }
  2292. fieldset.form-column-left{}
  2293. fieldset.form-column-right{
  2294. border-left:1px solid #ccc;
  2295. margin-left:2em; padding-left:2em;
  2296. // background-color:#fff; @include rounded(5px);
  2297. }
  2298. legend{margin: 0; @include fs18; @include fs700; border:none; line-height:2;}
  2299. .fieldset-description{@include fs12;}
  2300. .fieldset-wrapper{@include fs12;}
  2301. .form-item{ margin: 0 20px 0 0; }
  2302. .description{ @include fs11; width:25em; @include inlineblock; vertical-align:bottom; margin-left:1em; color:#7f7f7f;}
  2303. #cart-pane{
  2304. >.fieldset-wrapper{
  2305. @include inlineblock();
  2306. @include rounded(5px);
  2307. padding: 10px;
  2308. background-color:#fff;
  2309. }
  2310. table{
  2311. @include price-table();
  2312. }
  2313. tbody{border:none; }
  2314. tr{background-color: transparent; border:none; }
  2315. td{
  2316. padding: 0 5px;
  2317. vertical-align: bottom;
  2318. &.products{
  2319. a{color:inherit; @include fs700;}
  2320. width:auto;
  2321. ul.product-description{margin: 0; @include fs12;}
  2322. li{list-style: none;}
  2323. }
  2324. }
  2325. tr.subtotal{
  2326. td{@include fs16; @include fs700;}
  2327. }
  2328. }
  2329. #customer-pane{width:35em;}
  2330. #billing-pane{
  2331. label{ @include fs12; width:8em; @include inlineblock; vertical-align:middle; margin-right:1em; border-bottom: 1px solid #cccccc; }
  2332. input.form-text{width:13em;}
  2333. }
  2334. #coupon_automatic-pane{}
  2335. #coupon-pane{}
  2336. #payment-pane{
  2337. // float:right;
  2338. .fieldset-wrapper{
  2339. background-color:#fff;
  2340. @include rounded(5px);
  2341. padding: 10px;
  2342. }
  2343. #line-items-div{
  2344. float:none; border:none;
  2345. @include inlineblock(); margin: 10px 0 20px;
  2346. table{@include price-table();}
  2347. tbody{border:none;}
  2348. td{
  2349. padding: 0 5px;
  2350. }
  2351. tr{
  2352. td{@include fs500;}
  2353. &.line-item-total td{
  2354. @include fs16; @include fs700; text-align: right;
  2355. }
  2356. }
  2357. }
  2358. #edit-panes-payment-payment-method{
  2359. label{width:auto; border-bottom:none;}
  2360. .form-item-panes-payment-payment-method{
  2361. border:1px solid #ddd;
  2362. border-radius:5px;
  2363. margin: 0.5em; padding: 0.5em;
  2364. label{font-weight:bold;}
  2365. }
  2366. }
  2367. #payment-details{
  2368. width:25em;
  2369. border-top:none; padding: 0; margin: 0;
  2370. }
  2371. }
  2372. #edit-actions{
  2373. width:100%;
  2374. padding:1em 0; margin: 0;
  2375. border: 0px;
  2376. background-color: transparent;
  2377. text-align: center;
  2378. .form-submit{
  2379. @include bouton();
  2380. margin-left:1em;
  2381. &#edit-continue{
  2382. @include bouton-bleu();
  2383. }
  2384. }
  2385. }
  2386. }
  2387. /*
  2388. _____ _____ _____ _____ _____ _____
  2389. | | | | | | _ | __ |_ _|
  2390. | | | --| | --| | -| | |
  2391. |_____|_____| |_____|__|__|__|__| |_|
  2392. &&
  2393. _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ __ _____ ____ _____ _____ _____ _____ _____
  2394. | | | | | | | | __| | | | | | |_ _| | | | _ | | | | \| _ |_ _| | | | |
  2395. | | | --| | --| | __| --| -| | | | | | | | | | | |__|- -| | | | | | |- -| | | | | |
  2396. |_____|_____| |_____|__|__|_____|_____|__|__|_____|_____| |_| \___/|__|__|_____|_____|____/|__|__| |_| |_____|_____|_|___|
  2397. */
  2398. //.page-cart,
  2399. .page-cart-checkout-review{
  2400. #content{
  2401. //text-align:center;
  2402. &> .inner-content{
  2403. //.card-box($cardfull_w, $cardfull_h);
  2404. //text-align:left;
  2405. display:inline-block;
  2406. padding: 1em;
  2407. }
  2408. }
  2409. #edit-actions{
  2410. margin: 0; padding: 0;
  2411. &:before, &:after{display:block;}
  2412. }
  2413. #review-instructions{
  2414. width:30em;
  2415. padding: 1em 0;
  2416. // .info;
  2417. }
  2418. table.order-review-table{
  2419. border:none;
  2420. .pane-title-row{
  2421. border:none;
  2422. background-color:transparent;
  2423. text-align:left;
  2424. @include fs18;
  2425. td{ padding: 1em 0 0 0; }
  2426. }
  2427. table.cart-review{
  2428. tr.odd{
  2429. background-color:transparent;
  2430. border:none;
  2431. }
  2432. }
  2433. td.title-col{
  2434. padding: 0;
  2435. text-align:left;
  2436. }
  2437. td.data-col{
  2438. padding: 0;
  2439. width:75%;
  2440. }
  2441. .review-button-row{
  2442. border:none;
  2443. background-color:transparent;
  2444. &>td{
  2445. padding: 3em 0 0 0;
  2446. }
  2447. form{
  2448. margin: 0 0.5em 0 0; @include inlineblock();
  2449. }
  2450. }
  2451. }
  2452. #edit-actions{
  2453. border: 0px;
  2454. background-color: transparent;
  2455. text-align: right;
  2456. }
  2457. input.form-submit{
  2458. @include bouton();
  2459. margin-left:1em;
  2460. &#edit-submit{
  2461. @include bouton-bleu();
  2462. }
  2463. }
  2464. }
  2465. /*
  2466. ____ _____ ____ _____ _____ _____ _____ _____ _____ _____
  2467. | \| | \| _ | |_ _| | | | | __|
  2468. | | |- -| | | | --| | | |- -| | | | | __|
  2469. |____/|_____|____/|__|__|_____| |_| |_____|__ _|_____|_____|
  2470. |__|
  2471. */
  2472. #didactique-page{
  2473. .node-didactique{
  2474. @include rounded(5px); background-color: #FFF;
  2475. @include drop-shadow(0, 0, 5px, 0.2);
  2476. max-width:850px;
  2477. @include fs14; background-color:#fff; //padding: 5px;
  2478. margin: 1em auto; padding: 1em;
  2479. .field-name-field-emvideo{
  2480. margin: 1em 0;
  2481. }
  2482. .field-name-title-field{
  2483. @include fs24; @include fs900; @include italic; padding:5px 0;
  2484. }
  2485. .field-name-field-visuel{
  2486. figure, img{max-width:100%;}
  2487. }
  2488. }
  2489. @media #{$medium-up}{
  2490. .side{ @include inlineblock(); vertical-align: top; }
  2491. .group-sideleft{ width:60%; }
  2492. .group-sideright{ width:39%; }
  2493. }
  2494. // @media #{$small-up}{
  2495. // } // change this
  2496. }
  2497. /*
  2498. _ _ _ _____ _____ _ _ _ _____ _____ _____ _____
  2499. | | | | | | | | | | | __| | _ | __ | __|
  2500. | | | | | | | | | | | __| | | -| __|
  2501. |_____|__|__|_____| |_____|_____| |__|__|__|__|_____|
  2502. */
  2503. .page-whoweare{
  2504. #tool-bar{
  2505. @media #{$small-only}{
  2506. #block-materio-page-title-materio-page-title{display:none;}
  2507. } // chanhe this
  2508. }
  2509. }
  2510. /*
  2511. _ _
  2512. _____ ___|_|___| |_ ___ ___ ___ ___ ___ ___
  2513. | | .'| | | _| -_| | .'| | _| -_|
  2514. |_|_|_|__,|_|_|_|_| |___|_|_|__,|_|_|___|___|
  2515. */
  2516. .maintenance-page{
  2517. #container, #header{ text-align: center; padding: 0; position:relative;}
  2518. #main{background-color: transparent; }
  2519. #header h1.site-name{font-size:36px; margin: 0; padding-left:0;}
  2520. h2.site-slogan{font-size:16px; @include fs300; margin: 0; line-height:1.1;}
  2521. }
  2522. /*
  2523. _____ _____ _____
  2524. | __| _ | |
  2525. | __| | | |
  2526. |__| |__|__|__ _|
  2527. |__|
  2528. */
  2529. .page-faq-page #main{
  2530. background: #fff url('../img/bg-faq.png') no-repeat bottom right;
  2531. }
  2532. #content .faq-content{
  2533. .faq-description{
  2534. @include fs12; padding-bottom:2em;
  2535. }
  2536. ul.faq-ul-questions-top{
  2537. margin: 0;
  2538. li{
  2539. list-style: none;
  2540. a{
  2541. @include fs18; @include fs500;
  2542. }
  2543. }
  2544. }
  2545. h3.faq-header{
  2546. @include fs20; @include fs700; line-height:1.2;
  2547. margin: 0;
  2548. a{color:#000;}
  2549. }
  2550. .faq-dl-hide-answer{
  2551. padding: 0;
  2552. }
  2553. .faq-category-group{
  2554. padding-bottom:1em;
  2555. }
  2556. .faq-question-answer{
  2557. padding: 0.3em 0 0 0.8em;
  2558. .faq-question{
  2559. @include fs16; padding: 0; @include fs500;
  2560. a{color:#000;}
  2561. }
  2562. .faq-answer{
  2563. padding: 0; margin-bottom:2em;
  2564. @include fs12;
  2565. }
  2566. }
  2567. .field-name-body img{
  2568. max-width:50%;
  2569. height:auto;
  2570. }
  2571. }
  2572. /*
  2573. __ __ _ _____
  2574. / / / /___ ____ ___ ___ | | / /__ \
  2575. / /_/ / __ \/ __ `__ \/ _ \ | | / /__/ /
  2576. / __ / /_/ / / / / / / __/ | |/ // __/
  2577. /_/ /_/\____/_/ /_/ /_/\___/ |___//____/
  2578. */
  2579. body.home-v2{
  2580. #center{
  2581. background-color: transparent;
  2582. padding:0;
  2583. }
  2584. }
  2585. @mixin shaddowed(){
  2586. @include drop-shadow(0, 0, 5px, 0.2);
  2587. @include transition-simply-prefix(box-shadow 0.3s ease-out); // opacity 0.3s ease-out); //change this commas
  2588. &:hover{@include drop-shadow(0, 0, 5px, 0.4);}
  2589. }
  2590. #home-v2{
  2591. // padding: 40px 40px;
  2592. h2{font-size: 2.1em; font-weight: 300;}
  2593. a{color: #000};
  2594. .field-name-field-liens{
  2595. margin-top:1em;
  2596. .field-item{@include inlineblock(); margin:0 0.5em 0.5em 0; }
  2597. a{
  2598. font-weight: 700; @include inlineblock();
  2599. padding:0.5em 1em 0.7em;
  2600. @include rounded(5px);
  2601. background-color: rgba(255,255,255, 0.8);
  2602. body.logged-in &.visitor{display:none;}
  2603. body.not-logged-in &.member{display:none;}
  2604. }
  2605. }
  2606. .panel-separator{clear:both;}
  2607. >.panel-panel>div>.panel-pane {
  2608. // padding: 10px 15px;
  2609. overflow:hidden;
  2610. &.pane-node{
  2611. @include rounded(5px);
  2612. overflow:hidden;
  2613. .pane-content, .node{
  2614. position:relative; width:100%; height:100%; overflow:hidden;
  2615. }
  2616. .links a{
  2617. background-color: rgba(255,255,255, 0.7);
  2618. @include rounded(5px);
  2619. padding: 15px;
  2620. }
  2621. }
  2622. &.intro-video{
  2623. height:auto;
  2624. background-color: $creme;
  2625. margin-top:2em;margin-bottom:2em; padding-top:0;
  2626. .field-name-field-emvideo{
  2627. .embedded-video{
  2628. margin:0 auto;
  2629. @media #{$small-only}{ width:320px; height:180px;}
  2630. @media #{$medium-only}{ width:640px; height:360px;}
  2631. @media #{$large-only}{ width:800px; height:450px;}
  2632. @media #{$xlarge-up}{ width:1024px; height:576px;}
  2633. .player, iframe{
  2634. width:100%; height:100%;
  2635. }
  2636. }
  2637. }
  2638. .field-name-title-field{
  2639. display:none;
  2640. }
  2641. .field-name-body{
  2642. // display:none;
  2643. margin-top:1em;
  2644. text-align: center;
  2645. p{
  2646. // @include grid-column(6);
  2647. text-align: left;
  2648. @include inlineblock();
  2649. width:35%; margin-left:2%;
  2650. font-size:0.756em;
  2651. @media #{$small-only}{
  2652. width:100%;
  2653. text-align: center;
  2654. }
  2655. }
  2656. }
  2657. @media #{$small-only}{
  2658. margin-top: 0.5em;
  2659. }
  2660. }
  2661. &.pane-menu-menu-home-v2, &.pane-menu-menu-menu-home-member{
  2662. margin:2em 0;
  2663. ul.menu{
  2664. margin: 0px; text-align: center;
  2665. }
  2666. li{
  2667. margin:0 1em 0 0; padding:0px; list-style: none; height:2.5em;
  2668. @include inlineblock();
  2669. a{
  2670. background-color: #4d4d4d;
  2671. @include rounded(5px);
  2672. padding: 5px 12px 7px;
  2673. color: $creme;
  2674. font-size: 18px;
  2675. font-weight: 500;
  2676. transition:opacity,background-color 0.2s ease-out;
  2677. &[href="/fr/actuality"]{
  2678. background-color:$vertjaune;
  2679. @include shadowTextBtnBlack();
  2680. }
  2681. }
  2682. }
  2683. // @media #{$small-only}{
  2684. // display:none;
  2685. // }
  2686. }
  2687. &.pane-materio-user-user-register{
  2688. padding: 2em 0;
  2689. background: transparent url('../img/register-block.png') no-repeat 100% 90%;
  2690. text-align: center;
  2691. .pane-content{
  2692. @include inlineblock(); text-align: left;
  2693. }
  2694. h2, h3{@include fs900; @include italic; padding:5px 0; margin: 0; line-height: 1; @include inlineblock(); vertical-align: middle;}
  2695. h2{@include fs24;} h3{@include fs16;}
  2696. form{margin: 0 1em; padding:0px; @include inlineblock(); vertical-align: middle;}
  2697. .form-item, .form-wrapper{
  2698. margin: 0; position:relative; @include inlineblock();vertical-align: middle;
  2699. }
  2700. #edit-account{margin-right:5px;}
  2701. input.form-text{ @include fs12; @include rounded(5px); margin-bottom:4px;.ie8 &{margin-right:5px;}}
  2702. .form-item-mail input.form-text, .form-item-name input.form-text{ width:11em;}
  2703. .form-item-pass input.form-text{ width:7em;}
  2704. #edit-mail-check{
  2705. position:absolute; bottom:100%; z-index:9999; background-image: none;
  2706. height:auto; //width:90%;
  2707. padding: 5px; @include rounded(5px); margin-bottom:10px;
  2708. @include fs11; background-color: #fff;
  2709. @include drop-shadow(0, 0, 5px, 0.6);
  2710. @include transition-simply-prefix(bottom 0.1s ease-out);
  2711. &.error{
  2712. background-color: #f3968d;
  2713. // border: 2px solid #f30002;
  2714. color:#fff;
  2715. }
  2716. &.ok{ display:none; }
  2717. }
  2718. .form-submit{
  2719. //border: 2px solid #69CDCF; background-color:#69CDCF; color:#FF7400; // orange/bleu
  2720. @include fs16; padding: 0.1em 0.6em 0.2em; @include rounded(0.3em);
  2721. font-weight:bold;
  2722. margin-bottom:4px;
  2723. }
  2724. .form-item-termsofservices, #edit-field-newsletter{
  2725. margin-bottom:0; display:block; line-height: 1;
  2726. &>*{ @include inlineblock; vertical-align: middle; margin: 0; }
  2727. label{ @include fs10; background-color: #fff; @include rounded(3px); }
  2728. }
  2729. #user-register-form{
  2730. .form-submit{
  2731. border: 2px solid #69CDCF; background-color:#69CDCF; color:#fff; // blanc/bleu
  2732. @include shadowTextBtnBlack();
  2733. &[disabled]{
  2734. background-color:#ddd; border: 2px solid #ddd;
  2735. }
  2736. }
  2737. }
  2738. #user-login{
  2739. .form-submit{
  2740. border: 2px solid #E6DE1C; background-color:#E6DE1C; color:#fff; // noire/jaune
  2741. @include shadowTextBtnBlack();
  2742. }
  2743. }
  2744. #edit-simplenews{display:none;}
  2745. a.join{
  2746. @include inlineblock(); vertical-align: middle;
  2747. // display:block;
  2748. margin: 0 1em;
  2749. // width:5em;
  2750. @include fs16; padding: 0.1em 0.3em 0.2em; @include rounded(0.3em);
  2751. font-weight:bold;
  2752. border: 2px solid #69CDCF; background-color:#69CDCF; color:#fff; // blanc/bleu
  2753. @include shadowTextBtnBlack();
  2754. text-align: center; text-decoration: none;
  2755. }
  2756. @media #{$small-only}{
  2757. background-position: 160% 50%;
  2758. .form-item-mail input.form-text, .form-item-name input.form-text{ width:7em;}
  2759. min-height:60px; padding: 15px 0;
  2760. // #user-login, >h3:first-child, >h3 span{ display:none; }
  2761. }
  2762. .message-error{
  2763. color:#b94a48; @include fs12;
  2764. }
  2765. }
  2766. &.showroom{
  2767. @include shaddowed();
  2768. height:450px;
  2769. margin-top: 15px;
  2770. background-color: #fff;
  2771. // background: url("http://carnet-aux-petites-choses.fr/wp-content/uploads/2015/02/un-oeil-sur-la-matiere-materiO-26_gagaone.jpg");
  2772. // background-size: cover;
  2773. position: relative;
  2774. .pane-content{
  2775. width:100%; height:100%; position:relative;
  2776. .node{position:absolute;height:100%;width:100%;}
  2777. .field-name-field-bandeau{
  2778. position:absolute; width:100%; height:100%; overflow:hidden;
  2779. img{width:100%; margin-top:-10%;}
  2780. }
  2781. .group-content-wrapper{
  2782. position:relative;
  2783. z-index:2;
  2784. width:30%;
  2785. margin:3em 2em;
  2786. .group-content{
  2787. background-color: rgba(255,255,255, 0.8);
  2788. padding:1em;
  2789. @include rounded(5px);
  2790. .field-name-title-field{
  2791. font-size: 2.1em; font-weight: 300;
  2792. }
  2793. .field-name-body{
  2794. margin-top: 0.5em;
  2795. }
  2796. }
  2797. }
  2798. }
  2799. &:after{
  2800. content:url("../img/bulle.png");
  2801. transform: scale(0.8);
  2802. position: absolute;
  2803. bottom:-120px;
  2804. right: -20px;
  2805. z-index:10;
  2806. }
  2807. @media #{$small-only}{
  2808. // height:210px;
  2809. margin-top: 10px;
  2810. .pane-content{
  2811. .field-name-field-bandeau{
  2812. position:absolute; width:400%; height:100%; overflow:hidden;
  2813. }
  2814. .group-content-wrapper{
  2815. width:auto;
  2816. padding:2%;
  2817. margin:2%;
  2818. .field-name-body{
  2819. font-size:0.756em;
  2820. margin-top:0.5em;
  2821. }
  2822. }
  2823. }
  2824. &:after{
  2825. opacity:0.4;
  2826. }
  2827. }
  2828. } // end showrom
  2829. &.bdd{
  2830. @include shaddowed();
  2831. height:450px;
  2832. margin-top: 30px;
  2833. background-color: #FFF;
  2834. position: relative;
  2835. .links a{background-color: #e6e6e6;}
  2836. .field-name-field-bandeau{
  2837. @include inlineblock(); width:60%; height:100%; overflow:hidden;
  2838. img{max-width:2000px;}
  2839. }
  2840. .group-content-wrapper{
  2841. @include inlineblock(); width:35%;
  2842. // background-color: rgba(255,255,255, 0.7);
  2843. padding:1em;
  2844. @include rounded(5px);
  2845. .field-name-title-field{
  2846. font-size: 2.1em; font-weight: 300;
  2847. }
  2848. .field-name-body{
  2849. margin-top: 1em;
  2850. }
  2851. .field-name-field-liens a{background-color: rgba(230,230,230, 0.8);}
  2852. }
  2853. &:after{
  2854. content:url("../img/boule.png");
  2855. transform: scale(0.8);
  2856. position: absolute;
  2857. bottom:-50px;
  2858. left: -50px;
  2859. }
  2860. @media #{$small-only}{
  2861. height:auto;
  2862. .field-name-field-bandeau{
  2863. width:100%; display:block; height:310px; overflow:hidden;
  2864. }
  2865. .group-content-wrapper{
  2866. display:block; width:100%; z-index:1; padding: 0;
  2867. >*{padding:1em;}
  2868. }
  2869. &:after{opacity:0.6; z-index:0;}
  2870. }
  2871. } // end BDD
  2872. &.formations{
  2873. @include shaddowed();
  2874. position: relative;
  2875. height:300px;
  2876. margin-top: 30px;
  2877. background-color: #000;
  2878. color: #FFF;
  2879. a{color: #FFF;}
  2880. .node{
  2881. padding:0 0 0 30%; width:70%;
  2882. &:before{
  2883. content:" ";
  2884. background: transparent url("../img/formations.png") no-repeat center center;
  2885. background-clip: padding-box;
  2886. background-size: contain;
  2887. position: absolute; left:0;
  2888. // border: 1px solid red;
  2889. z-index: 2;
  2890. width:30%; height:100%;
  2891. // padding:0.5em;
  2892. }
  2893. }
  2894. .group-content-wrapper{
  2895. padding:1em; position:relative;
  2896. .field-name-title-field{
  2897. font-size: 2.1em; font-weight: 300;
  2898. }
  2899. .field-name-body{
  2900. margin-top: 1em;
  2901. }
  2902. }
  2903. @media #{$small-only}{
  2904. height:auto;
  2905. }
  2906. }
  2907. &.services{
  2908. @include shaddowed();
  2909. background-color: #FFF;
  2910. height:300px;
  2911. margin-top: 30px;
  2912. .node{
  2913. padding:0 30% 0 0; width:70%;
  2914. &:before{
  2915. content:" ";
  2916. background: transparent url("../img/services.png") no-repeat center center;
  2917. background-clip: padding-box;
  2918. background-size: contain;
  2919. position: absolute; right:0;
  2920. // border: 1px solid red;
  2921. z-index: 2;
  2922. width:30%; height:100%;
  2923. // padding:0.5em;
  2924. }
  2925. }
  2926. .group-content-wrapper{
  2927. padding:1em; position:relative;
  2928. .field-name-title-field{
  2929. font-size: 2.1em; font-weight: 300;
  2930. }
  2931. .field-name-body{
  2932. margin-top: 1em;
  2933. }
  2934. .field-name-field-liens a{background-color: rgba(230,230,230, 0.8);}
  2935. }
  2936. @media #{$small-only}{
  2937. height:auto;
  2938. }
  2939. }
  2940. &.publication{
  2941. @include shaddowed();
  2942. position: relative;
  2943. // height:300px;
  2944. margin-top: 30px;
  2945. padding:1em;
  2946. background-color: #000;
  2947. &, a, h1, h2{color: #fff;}
  2948. @include rounded(10px);
  2949. .view-publication-home-v2{
  2950. .views-row{
  2951. @include inlineblock();
  2952. width:30%;
  2953. h1{display:none;}
  2954. }
  2955. }
  2956. @media #{$small-only}{
  2957. .view-publication-home-v2{
  2958. .views-row{display:block; width:90%; margin-bottom: 1em;}
  2959. }
  2960. }
  2961. }
  2962. }
  2963. //mini panneau news
  2964. >.panel-panel>div>.pane-news-home-v2{
  2965. background-color: #e6e6e6; @include rounded(10px);
  2966. margin-top: 30px; padding-top: 1em; padding-bottom: 1em;
  2967. // padding:0;
  2968. position: relative;
  2969. // .panel-col-first{width:70%;}
  2970. // .panel-col-last{width:29.9%;}
  2971. h2{font-size: 30px;}
  2972. @media #{$medium-up}{
  2973. #mini-panel-news_home_v2 .center-wrapper{
  2974. @include grid-row();
  2975. .panel-panel{
  2976. overflow:hidden;
  2977. @include grid-column(4);
  2978. // width:32.8%;
  2979. padding:0em; margin-left:1em;
  2980. &.panel-col-first{width:auto;}
  2981. &:not(.panel-col-first){width:31%;}
  2982. .inside{margin:0;}
  2983. article.node, article.node-breve.vm-cardbig{margin:0; height:610px;}
  2984. }
  2985. }
  2986. }
  2987. #mini-panel-news_home_v2 .panel-col-bottom{
  2988. @include grid-row(); margin-top: 1.5em; margin-bottom: 1.5em;
  2989. >.inside{
  2990. @include grid-column(12);
  2991. }
  2992. p{display:none;}
  2993. .form-checkboxes{
  2994. margin:0 0 0.5em 0;
  2995. .form-item{
  2996. @include inlineblock(); margin-right: 1em;
  2997. label, input{vertical-align: middle;}
  2998. }
  2999. }
  3000. .form-item-mail{
  3001. @include inlineblock(); margin:0;
  3002. label, input{@include inlineblock(); margin-right: 1em;}
  3003. }
  3004. #edit-subscribe, #edit-unsubscribe{@include inlineblock();}
  3005. }
  3006. // .view-news-home-v2{
  3007. // .views-row{@include inlineblock();}
  3008. // }
  3009. .node-simplenews{
  3010. @include rounded(5px); background-color: #FFF;
  3011. @include drop-shadow(0, 0, 5px, 0.2);
  3012. @include transition-simply-prefix(box-shadow 0.3s ease-out);
  3013. overflow:hidden;
  3014. position:relative;
  3015. margin:7px;
  3016. >a{
  3017. position:absolute;
  3018. bottom:0; width:100%;
  3019. background-color: #FFF;
  3020. text-align: center;
  3021. h1{
  3022. padding: 10px; margin:0;
  3023. font-size:1em;
  3024. }
  3025. }
  3026. }
  3027. //deco
  3028. &:after{
  3029. content:url("../img/point.png");
  3030. //transform: scale(1);
  3031. position: absolute;
  3032. bottom:20px;
  3033. right: 10px;
  3034. }
  3035. @media #{$small-only}{
  3036. background-color: transparent;
  3037. #mini-panel-news_home_v2 .center-wrapper{
  3038. .panel-panel{
  3039. width:100%;
  3040. .inside{margin:0;}
  3041. .node{
  3042. max-width: 100%; margin:0;
  3043. .field-name-body{
  3044. width: 100%; padding:0;
  3045. p{max-width: 100%; padding: 1em;}
  3046. }
  3047. }
  3048. .node-simplenews{
  3049. .field-name-body a{
  3050. padding: 0; display: block; height:100%;
  3051. img{max-width: 100%;}
  3052. }
  3053. }
  3054. }
  3055. // .panel-panel:not(.panel-col-first){display:none;}
  3056. }
  3057. &:after{z-index: -1; opacity:0.4;}
  3058. }
  3059. }
  3060. #contact-pane{
  3061. margin:2em 0; padding:1em;
  3062. background-color: #e6e6e6;
  3063. .field-name-body{
  3064. text-align: center;
  3065. p{
  3066. @include inlineblock();
  3067. min-width: 20%;
  3068. }
  3069. }
  3070. }
  3071. } // homeV2
  3072. /*
  3073. _ _ _ _ _
  3074. | | | (_) | | (_)
  3075. _ __ _ _| |__ | |_ ___ __ _| |_ _ ___ _ __ ___
  3076. | '_ \| | | | '_ \| | |/ __/ _` | __| |/ _ \| '_ \/ __|
  3077. | |_) | |_| | |_) | | | (_| (_| | |_| | (_) | | | \__ \
  3078. | .__/ \__,_|_.__/|_|_|\___\__,_|\__|_|\___/|_| |_|___/
  3079. | |
  3080. |_|
  3081. */
  3082. body.node-type-publication{
  3083. article.node-publication{
  3084. .field{
  3085. figure, img{max-width:100%;}
  3086. }
  3087. @media #{$large-up}{
  3088. .field{@include inlineblock();}
  3089. .field-name-field-couverture{width:25%;}
  3090. .field-name-body{
  3091. margin-left: 1em;
  3092. width:70%;
  3093. }
  3094. }
  3095. }
  3096. }
  3097. @import "misc.scss";
  3098. // end