styles.scss 87 KB

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