styles.scss 90 KB

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