styles.scss 90 KB

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