main.scss 37 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708
  1. @import './base/variables';
  2. @import './base/colors';
  3. @import './base/reset';
  4. @import './base/grid';
  5. @import './base/layout';
  6. @import './base/animations';
  7. @import './base/fonts';
  8. html{
  9. // background-color: red;
  10. }
  11. aside.messages{
  12. border:none;
  13. }
  14. // _ _ _
  15. // | || |___ __ _ __| |___ _ _
  16. // | __ / -_) _` / _` / -_) '_|
  17. // |_||_\___\__,_\__,_\___|_|
  18. header[role="banner"]{
  19. padding:0.2em 0 0 0;
  20. %header-fs{
  21. font-size: 0.9em;
  22. // line-height: 1;
  23. font-weight: 400;
  24. }
  25. #block-sitebranding{
  26. h1{
  27. margin:0;
  28. line-height: 1;
  29. }
  30. }
  31. #block-userlogin{
  32. position: relative;
  33. // width:8em;
  34. padding:0 1em;
  35. overflow: visible;
  36. h2{
  37. @extend %header-fs;
  38. line-height: 1.38;
  39. margin: 0;
  40. }
  41. &>section{
  42. background-color: #fff;
  43. overflow: hidden;
  44. width:11em;
  45. height:1px;
  46. padding:0.01em 1em;
  47. // margin:0 0 0 -1em;
  48. box-sizing:content-box;
  49. transition: all 0.4s ease-in-out;
  50. // outline: 1px solid blue;
  51. transition-delay: 2s;
  52. position: absolute;
  53. right:0;
  54. top:1.7em;
  55. box-sizing: content-box;
  56. }
  57. &:hover{
  58. &>section{
  59. transition-delay: 0s;
  60. height:12em;
  61. padding:1em 1em;
  62. box-shadow: 0 0 10px #ccc;
  63. }
  64. }
  65. .form-item{
  66. margin:0;
  67. position: relative;
  68. width:100%;
  69. &.form-item-name{
  70. margin:2px 0 0.5em 0;
  71. input{
  72. width:90%;
  73. padding:0;
  74. box-sizing: content-box;
  75. }
  76. }
  77. &.form-item-pass{
  78. margin:0 0 0.5em 0;
  79. input{
  80. width:90%;
  81. padding:0;
  82. box-sizing: content-box;
  83. }
  84. }
  85. &.form-item-persistent-login{
  86. font-size: 0.756em;
  87. label{
  88. vertical-align: top;
  89. }
  90. }
  91. }
  92. #edit-actions{
  93. margin:0;
  94. }
  95. .item-list{
  96. ul{
  97. margin:0;
  98. li{
  99. list-style: none;
  100. margin:0;
  101. a{
  102. font-size: 0.756em;
  103. }
  104. }
  105. }
  106. }
  107. }
  108. // non-vue userblock
  109. #block-userblock{
  110. h2{display:none;}
  111. a{
  112. margin-right: 1em;
  113. }
  114. }
  115. // vue userblock
  116. #user-tools{
  117. padding-top: 0.06em;
  118. h4{
  119. @extend %header-fs;
  120. cursor: pointer;
  121. }
  122. .mdi-logout::before {
  123. margin: -0.125em 0 0 0;
  124. vertical-align: top;
  125. }
  126. }
  127. // vue flaglist
  128. #user-flags{
  129. border-left: 1px solid #000;
  130. padding-left: 0.5em;
  131. margin-left: 0.5em;
  132. display: inline-block;
  133. vertical-align: top;
  134. position: relative;
  135. h2{
  136. @extend %header-fs;
  137. cursor: pointer;
  138. &:before{padding-right: 0.2em;}
  139. }
  140. ul{
  141. background-color: #fff;
  142. overflow: hidden;
  143. width:11em;
  144. max-height:1px;
  145. padding:0.01em 1em;
  146. // margin:0 0 0 -1em;
  147. box-sizing:content-box;
  148. transition: all 0.4s ease-in-out;
  149. // outline: 1px solid blue;
  150. transition-delay: 2s;
  151. position: absolute;
  152. right:0;
  153. top:1.7em;
  154. box-sizing: content-box;
  155. z-index: 30;
  156. }
  157. &:hover{
  158. ul{
  159. transition-delay: 0s;
  160. max-height:50em;
  161. padding:1em 1em;
  162. box-shadow: 0 0 10px #ccc;
  163. }
  164. }
  165. li{
  166. width:100%;
  167. // cursor: pointer;
  168. display: flex;
  169. flex-direction: row;
  170. align-items: baseline;
  171. flex-wrap: nowrap;
  172. h5{
  173. @extend %header-fs;
  174. cursor: pointer;
  175. }
  176. span.mdi{
  177. font-size: 0.9em;
  178. }
  179. div.actions{
  180. opacity:0;
  181. transition: opacity 0.3s ease-in-out;
  182. padding-left:0.5em;
  183. span.mdi{
  184. cursor: pointer;
  185. color: #4e4d4d;
  186. }
  187. span.delete-btn{
  188. &.loading:before{
  189. animation: rotating 2s linear infinite;
  190. }
  191. }
  192. }
  193. &:hover{
  194. div.actions{
  195. opacity:1;
  196. }
  197. }
  198. &.create-flag{
  199. margin-top: 0.2em;
  200. input{
  201. align-self: flex-end;
  202. border: 1px solid #bbb;
  203. border-radius:5px;
  204. width: calc(100% - 2em);
  205. font-size:0.8em;
  206. }
  207. span.add-btn{
  208. align-self: flex-end;
  209. color: #bbb;
  210. font-size: 1em;
  211. padding: 0 0 0 .5em;
  212. transition: all 0.2s ease-in-out;
  213. &.active{
  214. cursor: pointer;
  215. color:#1a1a1a;
  216. }
  217. &.loading:before{
  218. animation: rotating 2s linear infinite;
  219. }
  220. }
  221. }
  222. }
  223. }
  224. // menu
  225. #block-header{
  226. margin-right: 1em;
  227. padding-left: 1em;
  228. border-left: 1px solid #000;
  229. ul.menu{
  230. margin:0;
  231. li{
  232. padding:0;
  233. display: inline-block;
  234. &:not(:first-of-type){
  235. margin-left: 0.5em;
  236. }
  237. a{
  238. @extend %header-fs;
  239. }
  240. }
  241. }
  242. }
  243. #block-languageswitcher{
  244. text-align: right;
  245. h2{
  246. margin: 0.1em 0 0 0;
  247. font-size: 0.756em;
  248. font-weight: 400;
  249. padding:0.1em 0.4em 0.2em;
  250. border-radius: 3px;
  251. background-color: #444;
  252. color: #fff;
  253. display: inline-block;
  254. vertical-align: top;
  255. }
  256. &>ul.links{
  257. // background-color: #fff;
  258. overflow: hidden;
  259. width:3.5em;
  260. // display: inline-block;
  261. height:1px;
  262. padding:0.01em 0;
  263. margin:0;
  264. box-sizing:content-box;
  265. transition: all 0.4s ease-in-out;
  266. // outline: 1px solid blue;
  267. // transition-delay: 2s;
  268. }
  269. &:hover{
  270. &>ul.links{
  271. transition-delay: 0s;
  272. height:2em;
  273. padding:0.3em 0;
  274. // box-shadow: 0 0 10px #ccc;
  275. }
  276. }
  277. li{
  278. list-style: none;
  279. padding:0;
  280. display: inline-block;
  281. &.is-active{
  282. display:none;
  283. }
  284. a{
  285. margin: 0;
  286. font-size: 0.756em;
  287. font-weight: 400;
  288. padding:0.2em 0.4em;
  289. border-radius: 3px;
  290. background-color: #444;
  291. color: #fff;
  292. }
  293. }
  294. }
  295. // header bottom
  296. #header-bottom{
  297. // disable the default wrapper behaviour
  298. &:after{content: none;}
  299. // apply flex for normal layout
  300. display: flex;
  301. flex-direction: row;
  302. justify-content: space-between;
  303. #block-pagetitle{}
  304. #block-materiosapisearchblock{
  305. align-self: flex-end;
  306. }
  307. @include col-mediaquery-max(3){
  308. flex-direction: column-reverse;
  309. // justify-content: flex-start;
  310. #block-pagetitle{
  311. width: max-content;
  312. }
  313. #block-materiosapisearchblock{}
  314. }
  315. }
  316. #block-pagetitle{
  317. // float: left;
  318. padding:1em 0;
  319. h2{
  320. margin:0;
  321. font-size: 1.512em;
  322. text-transform: capitalize;
  323. font-weight: 300;
  324. body:not(.path-home) & {
  325. padding:0.5em 1em;
  326. }
  327. body.path-blabla &,
  328. body.path-checkout & {
  329. color: #fff;
  330. background-color: $color-blabla;
  331. }
  332. body.path-showrooms & {
  333. color: #fff;
  334. background-color: $color-showrooms;
  335. }
  336. body.path-base &,
  337. body.path-thematique & {
  338. color: #fff;
  339. background-color: $color-base;
  340. }
  341. body.path-pricing & {
  342. color: #fff;
  343. background-color: $color-webshowroom;
  344. }
  345. }
  346. }
  347. #block-materiosapisearchblock{
  348. // float:right;
  349. // display:inline-block;
  350. // box-shadow: 0 0 5px rgba(0,0,0,0.2);
  351. padding:0;
  352. #materio-sapi-search-form{
  353. .form-item, input.button{
  354. display: inline-block;
  355. }
  356. #edit-search{
  357. border:1px #BBB solid;
  358. border-radius: 14px;
  359. padding:0.3em;
  360. color:#666;
  361. }
  362. #edit-submit{
  363. border:0;
  364. text-indent: 50px;
  365. overflow: hidden;
  366. width:20px; height:20px;
  367. margin:0;
  368. // border-radius: 7px;
  369. background-image: url('../img/search.png');
  370. background-position: center;
  371. background-repeat: no-repeat;
  372. background-size: contain;
  373. }
  374. }
  375. }
  376. }
  377. // main
  378. aside.messages{
  379. padding: 0;
  380. }
  381. // content top
  382. // #content-top{
  383. // &:after{
  384. // content:"";
  385. // clear:both;
  386. // display: block;
  387. // }
  388. // }
  389. // ___ _ _ _ __ _
  390. // / __|___ _ _| |_ ___ _ _| |_ ___| | ___ / _| |_
  391. // | (__/ _ \ ' \ _/ -_) ' \ _|___| |__/ -_) _| _|
  392. // \___\___/_||_\__\___|_||_\__| |____\___|_| \__|
  393. #content-left{
  394. z-index: 5;
  395. box-sizing: content-box;
  396. max-width:1px;
  397. overflow-x: hidden;
  398. transition: all 0.3s ease-in-out;
  399. &.opened{
  400. max-width: 500px;
  401. padding: 0.3em;
  402. }
  403. >*{
  404. box-sizing: border-box;
  405. background-color: #fff;
  406. box-shadow: -2px 0px 4px rgba(0, 0, 0, 0.2);
  407. padding: 0.5em;
  408. }
  409. .flag-collection{
  410. >header{
  411. display: flex;
  412. flex-direction: row;
  413. justify-content: space-between;
  414. padding-bottom: $column_goutiere;
  415. h3{
  416. // flex-basis: calc(100% - 1em);
  417. }
  418. .mdi-close{
  419. // display: block;
  420. // flex-basis: 1em;
  421. cursor:pointer;
  422. align-self: flex-end;
  423. }
  424. }
  425. >ul{
  426. >li{
  427. margin:0 0 $column_goutiere 0;
  428. padding:0;
  429. article.card.minicard{
  430. width:$minicard_width;
  431. height:$minicard_height;
  432. margin:auto;
  433. >header{
  434. padding: 0.3em 0.3em 0.1em;
  435. h1{
  436. margin:0;
  437. }
  438. }
  439. >nav.tools{
  440. top: auto;
  441. bottom: 0;
  442. padding:0 0.2em;
  443. background:transparent;
  444. .mdi.unflag{
  445. cursor: pointer;
  446. }
  447. }
  448. }
  449. }
  450. }
  451. }
  452. }
  453. // __ _
  454. // / _|_ _ ___ _ _| |_
  455. // | _| '_/ _ \ ' \ _|
  456. // |_| |_| \___/_||_\__|
  457. @mixin btn{
  458. display: inline-block;
  459. font-size: 0.9em;
  460. font-weight: bold;
  461. padding: 0.7em 1em;
  462. margin-bottom: 0.3em;
  463. background-color: #fff;
  464. color: #000;
  465. border-radius: 5px;
  466. border: none;
  467. }
  468. article.node--type-frontpage{
  469. %front-col-field__label{
  470. font-size: 3.5em;
  471. line-height: 1;
  472. }
  473. %front-col-description{
  474. font-size: 0.9em;
  475. line-height: 1.3;
  476. }
  477. %part-centered-layout{
  478. padding:1.5em 0;
  479. background-color: #fff;
  480. >div:nth-child(1){
  481. width:80%;
  482. margin: 0 auto;
  483. text-align: center;
  484. .field__label{
  485. @extend %front-col-field__label;
  486. }
  487. .field__item{
  488. @extend %front-col-description;
  489. }
  490. }
  491. }
  492. // %part-columned-layout{
  493. // display:grid;
  494. // grid-template-columns: 300px 1fr;
  495. // grid-column-gap: 2em;
  496. // padding:2em 1em;
  497. // >div:nth-child(1){
  498. // color: #fff;
  499. // grid-column: 1;
  500. // .field__label{
  501. // @extend %front-col-field__label;
  502. // }
  503. // .field__item{
  504. // @extend %front-col-description;
  505. // }
  506. // }
  507. // >div:nth-child(2){
  508. // grid-column: 2;
  509. // }
  510. // }
  511. %part-columned-layout{
  512. display:flex;
  513. flex-direction: row;
  514. flex-wrap: nowrap;
  515. >div:nth-child(1){
  516. flex: 0 0 $column_width * 2 + $column_goutiere;
  517. box-sizing: border-box;
  518. padding: 1em;
  519. color: #fff;
  520. .field__label{
  521. @extend %front-col-field__label;
  522. }
  523. .field__item{
  524. @extend %front-col-description;
  525. }
  526. }
  527. >div:nth-child(2){
  528. flex: 1 1 auto;
  529. box-sizing: border-box;
  530. padding: 1em 0.5em;
  531. }
  532. }
  533. >h2{
  534. display: none;
  535. }
  536. .node__content{
  537. &>section{
  538. &.home-intro{
  539. @extend %part-centered-layout;
  540. .field__item{
  541. display: flex;
  542. flex-flow: row nowrap;
  543. justify-content: center;
  544. p{
  545. flex: 0 0 $column_width * 2;
  546. padding:1em;
  547. }
  548. }
  549. }
  550. &.home-database{
  551. background-color: $color-base;
  552. @extend %part-columned-layout;
  553. .field--name-field-a-database{
  554. .field__label{
  555. cursor: pointer;
  556. }
  557. }
  558. .field--name-field-database-links{
  559. .field__item{
  560. display: inline-block;
  561. a{
  562. @include btn;
  563. background-color: #fff;
  564. color: $color-base;
  565. }
  566. }
  567. }
  568. .cards-list-home{
  569. position: relative;
  570. // max-height: (130px*1.4)*3;
  571. max-height: 580px;
  572. overflow-y: hidden;
  573. ul{
  574. width:100%;
  575. margin:0; padding:0;
  576. // display: grid;
  577. // grid-template-columns: repeat(auto-fill, minmax(50px, 130px));
  578. // grid-template-rows: 1fr;
  579. // grid-gap: 1em;
  580. // justify-content:start;
  581. display: flex;
  582. flex-flow: row wrap;
  583. justify-content: space-between;
  584. li{
  585. padding:0 0 $column_goutiere / 2 0;
  586. box-sizing: border-box;
  587. // padding-top: 140%;
  588. width: $column_width / 2;
  589. height: $card_height / 2;
  590. position: relative;
  591. list-style: none;
  592. margin:0;
  593. .card{
  594. // position:absolute;
  595. // top:0; bottom:0;
  596. // left:0; right:0;
  597. width: 100%;
  598. height: 100%;
  599. .field--name-field-short-description{
  600. font-size: 0.656em;
  601. line-height: 1.2;
  602. }
  603. }
  604. }
  605. }
  606. }
  607. }
  608. &.home-showrooms{
  609. background-color: $color-showrooms;
  610. @extend %part-columned-layout;
  611. .field--name-field-showrooms{}
  612. .field--name-field-showroom-links{
  613. .field__item{
  614. display: inline-block;
  615. a{
  616. @include btn;
  617. background-color: #fff;
  618. color: $color-showrooms;
  619. }
  620. }
  621. }
  622. .field--name-computed-showrooms-reference{
  623. overflow: hidden;
  624. position:relative;
  625. // height:550px;
  626. display: grid;
  627. grid-template-rows: 1fr;
  628. $bp: ($column_width + $column_goutiere )*7;
  629. @media only screen and (max-width: $bp){
  630. grid-template-columns: 1fr;
  631. >.field__item{
  632. grid-column: 1;
  633. }
  634. }
  635. @media only screen and (min-width: $bp + 1px){
  636. grid-template-columns: 1fr 1fr;
  637. grid-gap: 1em;
  638. >.field__item:nth-child(odd){
  639. grid-column: 1;
  640. }
  641. >.field__item:nth-child(even){
  642. grid-column: 2;
  643. }
  644. }
  645. >.field__item{
  646. grid-row: 1;
  647. // position: absolute;
  648. // top:0; left:0;
  649. // width:100%; height:100%;
  650. // overflow: hidden;
  651. opacity: 0;
  652. // transform: translateX(100%);
  653. transition: all 2s ease-out;
  654. &.active{
  655. opacity: 1;
  656. // transform: translateX(0);
  657. // transition: all 0.3s ease-in-out;
  658. }
  659. .taxonomy-term{
  660. position: relative;
  661. width:100%; height:100%;
  662. div.visuel{
  663. width:100%;
  664. padding-bottom: 5em;
  665. img{
  666. max-width: 100%;
  667. height: auto;
  668. }
  669. }
  670. section.text{
  671. position: absolute;
  672. bottom:0; left:0;
  673. width:100%;
  674. box-sizing:border-box;
  675. padding:1em 0 0;
  676. background-color:$color-showrooms;
  677. color: #fff;
  678. // >*{
  679. // // display: inline-block;
  680. // font-size: 0.9em;
  681. // }
  682. h2,p{
  683. margin:0;
  684. }
  685. h2{
  686. font-size: 2em;
  687. }
  688. .field--name-field-public-address{
  689. br{
  690. display:none;
  691. }
  692. span:not(:nth-last-of-type(1)) {
  693. margin-right: 0.4em;
  694. &:after{
  695. padding-left: 0.5em;
  696. content:"⋅"
  697. }
  698. }
  699. }
  700. .field--name-field-public-phone {
  701. display: inline-block;
  702. margin-right: 0.4em;
  703. &:after{
  704. padding-left: 0.5em;
  705. content:"⋅"
  706. }
  707. }
  708. .field--name-field-public-email {
  709. display: inline-block;
  710. }
  711. }
  712. }
  713. }
  714. }
  715. }
  716. &.home-blabla{
  717. background-color: $color-blabla;
  718. @extend %part-columned-layout;
  719. .field--name-field-blabla-links{
  720. .field__item{
  721. display: inline-block;
  722. a{
  723. @include btn;
  724. background-color: #fff;
  725. color: $color-blabla;
  726. }
  727. }
  728. }
  729. .cards-list-home{
  730. position: relative;
  731. $bp: ($column_width*2 + $column_goutiere );
  732. overflow-y: hidden;
  733. max-height: 315px;
  734. // @media only screen and (max-width: $bp * 6){
  735. // max-height: 630px;
  736. // }
  737. // @media only screen and (min-width: ($bp * 6) + 1px){
  738. // max-height: 310px;
  739. // }
  740. ul{
  741. width:100%;
  742. margin:0; padding:0;
  743. // display: grid;
  744. // grid-template-columns: repeat(auto-fill, minmax(80px, $column_width*2));
  745. // // grid-template-rows: 1fr;
  746. // grid-gap: 1em;
  747. // justify-content:start;
  748. display: flex;
  749. flex-flow: row wrap;
  750. justify-content: space-between;
  751. li{
  752. padding:0 0 $column_goutiere 0;
  753. box-sizing: border-box;
  754. // padding-top: 140%;
  755. width: $column_width;
  756. // height: $card_height / 2;
  757. position: relative;
  758. list-style: none;
  759. margin:0;
  760. // padding-top: 67.8%;
  761. overflow: hidden;
  762. .card{
  763. // position:absolute;
  764. // top:0; bottom:0;
  765. // left:0; right:0;
  766. width: 100%;
  767. height: auto;
  768. .field--name-title{
  769. font-size: 0.756em;
  770. line-height: 0.9;
  771. }
  772. }
  773. }
  774. }
  775. }
  776. }
  777. &.home-pricing{
  778. @extend %part-centered-layout;
  779. >h3{
  780. @extend %front-col-field__label;
  781. text-align: center;
  782. text-transform: capitalize;
  783. padding: 0.7em 0 0.3em 0;
  784. }
  785. .field--name-field-pricing-pitch{
  786. text-align: center;
  787. p{ margin:0;}
  788. }
  789. .field--name-field-pricing{
  790. // padding:2em 0;
  791. display: flex;
  792. flex-flow: row nowrap;
  793. justify-content: center;
  794. padding-bottom: 1em;
  795. p{
  796. flex: 0 0 $column_width * 2;
  797. padding: 1em;
  798. margin: 0;
  799. text-align: center;
  800. }
  801. }
  802. .field--name-computed-products-reference{
  803. display: flex;
  804. flex-flow: row nowrap;
  805. // TODO: mediaQuery column
  806. >.field__item{
  807. flex:0 0 50%;
  808. text-align: center;
  809. padding: 2em 0;
  810. a.btn{
  811. @include btn;
  812. background-color: #fff;
  813. }
  814. &:nth-child(1){
  815. background-color: $color-base;
  816. a.btn{
  817. color: $color-base;
  818. }
  819. }
  820. &:nth-child(2){
  821. background-color: $color-webshowroom;
  822. a.btn{
  823. color: $color-webshowroom;
  824. }
  825. }
  826. color: #fff;
  827. position: relative;
  828. height:18em;
  829. >article{
  830. position: absolute;
  831. top:50%; left:50%;
  832. transform: translate(-50%, -50%);
  833. }
  834. .field--name-title{
  835. @extend %front-col-field__label;
  836. font-weight: 600;
  837. line-height: 0.7;
  838. padding-bottom: 0.1em;
  839. text-align: center;
  840. word-spacing: 30000px;
  841. }
  842. .field--name-body{
  843. @extend %front-col-description;
  844. padding:0.5em;
  845. p{
  846. margin: 0;
  847. }
  848. }
  849. }
  850. }
  851. }
  852. }
  853. }
  854. }
  855. // ___ _
  856. // / __|__ _ _ _ __| |___
  857. // | (__/ _` | '_/ _` (_-<
  858. // \___\__,_|_| \__,_/__/
  859. .infinite-loading-container{
  860. .infinite-status-prompt{
  861. i[class^="loading-"]{
  862. width:15px; height:15px;
  863. }
  864. }
  865. }
  866. .cards-list{
  867. position: relative;
  868. .search-info{
  869. font-size: 0.756em;
  870. font-weight: 500;
  871. margin: 0;
  872. padding: 0 0 0.5em 0;
  873. }
  874. &>ul{
  875. // outline: 1px green solid;
  876. margin:0; padding:0;
  877. width: calc(100% + #{$column_goutiere});
  878. &>li{
  879. list-style: none;
  880. margin:0 $column_goutiere $column_goutiere 0; padding:0;
  881. display: inline-block;
  882. vertical-align: top;
  883. }
  884. }
  885. }
  886. article.card{
  887. position: relative;
  888. box-shadow: 0 0 5px rgba(0,0,0,0.2);
  889. width:$column_width; height:$card_height;
  890. &.article{
  891. width:$column_width*2 + $column_goutiere; height:$card_height;
  892. }
  893. &.minicard{
  894. height:100px;
  895. }
  896. // &.card-small{
  897. // width:100px; height:140px;
  898. // }
  899. // focused
  900. // box-shadow: 0 0 7px rgba(0,0,0,0.9);
  901. // &.article{
  902. // width: $column_width * 2 + $column_goutiere;
  903. //
  904. // }
  905. header{
  906. position: absolute;
  907. bottom:0;
  908. z-index:10;
  909. color: #000;
  910. background-color: rgba(255,255,255,0.8);
  911. padding: 0.3em 0.3em;
  912. box-sizing:border-box;
  913. width:100%;
  914. h1, h4{ margin:0; padding:0; }
  915. h1{
  916. font-size: 1.3em;
  917. font-weight: 700;
  918. line-height: 0.85;
  919. margin-bottom: 0.2em;
  920. }
  921. h4{
  922. font-size: 0.882em;
  923. font-weight: 300;
  924. line-height: 1;
  925. // margin-bottom: 0.1em;
  926. }
  927. span.ref{
  928. font-size: 0.693em;
  929. font-weight: 300;
  930. line-height: 1;
  931. }
  932. }
  933. &.card-thematique header{
  934. background-color: $color-base-transparent;
  935. }
  936. nav.tools{
  937. position: absolute;
  938. top: 0;
  939. right: 0;
  940. z-index: 21;
  941. $toolbar_width: 15px;
  942. width: $toolbar_width;
  943. background-color: #fff;
  944. box-sizing: content-box;
  945. padding: 0.3em 0.1em;
  946. >*{
  947. overflow: visible;
  948. position: relative;
  949. span.btn{
  950. overflow: hidden;
  951. font-size: 0.882em;
  952. }
  953. .tool-content{
  954. position: absolute;
  955. top: 0px;
  956. right: 100%;
  957. // width: 5em;
  958. width: $column_width - $toolbar_width - 10px;
  959. box-sizing: border-box;
  960. padding: 0.3em;
  961. background-color: #fff;
  962. box-shadow: -2px 3px 4px rgba(0, 0, 0, 0.2);
  963. opacity: 0;
  964. max-height: 0; max-width:0;
  965. overflow: hidden;
  966. transition: all 0.2s ease-in-out;
  967. }
  968. &:hover{
  969. .tool-content{
  970. transition: all 0.3s ease-in-out;
  971. opacity: 1;
  972. max-height: 195px;
  973. max-width:200px;
  974. }
  975. }
  976. }
  977. .tool.flags{
  978. .tool-content{
  979. ul{
  980. display: flex;
  981. flex-flow: row wrap;
  982. li{
  983. padding:0 0.5em 0 0;
  984. }
  985. }
  986. }
  987. span.flag{
  988. cursor: pointer;
  989. font-size: 0.756em;
  990. color: #bbb;
  991. transition: color 0.3s ease-in-out;
  992. &:hover, &.isActive{
  993. color:#1a1a1a;
  994. }
  995. }
  996. }
  997. opacity: 0;
  998. transition: opacity 0.2s ease-in-out;
  999. }
  1000. &:hover{
  1001. nav.tools{
  1002. opacity:1;
  1003. }
  1004. }
  1005. section.images{
  1006. position: relative;
  1007. &, *{width: 100%; height:100%;}
  1008. figure{
  1009. cursor: pointer;
  1010. margin:0;
  1011. position: absolute;
  1012. top:0; left:0;
  1013. // width: 100%; height:100%;
  1014. &:first-of-type{
  1015. z-index:5
  1016. }
  1017. transition: opacity 0.2s ease-in-out;
  1018. &.show{opacity: 1; z-index:6;}
  1019. &.hide{opacity: 0;}
  1020. img{
  1021. // width: 100%; height:100%;
  1022. &.blank{
  1023. position: absolute;
  1024. top:0; left:0;
  1025. z-index: 20;
  1026. }
  1027. }
  1028. }
  1029. }
  1030. // overwritnig card for card-medium (aka search-card)
  1031. &.search-card{
  1032. >header{
  1033. cursor: pointer;
  1034. }
  1035. }
  1036. // overwriting card for modal-card
  1037. &.modal-card{
  1038. display: flex;
  1039. flex-flow: row-reverse nowrap;
  1040. width: $modalcard_width;
  1041. height: $modalcard_height;
  1042. >.col{
  1043. flex-basis: 50%;
  1044. }
  1045. section.col-right{
  1046. >*:not(nav.tools){
  1047. position: relative;
  1048. padding: 0.5em;
  1049. box-sizing: border-box;
  1050. width: 100%;
  1051. }
  1052. header{
  1053. bottom: auto;
  1054. }
  1055. section.samples{
  1056. ul{
  1057. display: flex;
  1058. flex-flow: row wrap;
  1059. font-size: 0.882em;
  1060. font-weight: 300;
  1061. // line-height: 1.35;
  1062. li{
  1063. padding-right: 0.5em;
  1064. span.showroom{ font-weight: 500; }
  1065. }
  1066. }
  1067. }
  1068. section.body{
  1069. p{
  1070. font-size: 0.882em;
  1071. font-weight: 300;
  1072. line-height: 1.35;
  1073. }
  1074. }
  1075. nav.tools{
  1076. opacity: 1;
  1077. section.close{
  1078. span.btn.mdi-close{
  1079. cursor:pointer;
  1080. }
  1081. }
  1082. }
  1083. }
  1084. }
  1085. }
  1086. // _____ _ _ _
  1087. // |_ _| |_ ___ _ __ __ _| |_(_)__ _ _ _ ___
  1088. // | | | ' \/ -_) ' \/ _` | _| / _` | || / -_)
  1089. // |_| |_||_\___|_|_|_\__,_|\__|_\__, |\_,_\___|
  1090. // |_|
  1091. #main-content > article.thematique{
  1092. div.cols{
  1093. display: flex;
  1094. flex-direction: row;
  1095. flex-wrap: nowrap;
  1096. // @media only screen and (max-width: $small-bp) {
  1097. @include col-mediaquery-max(3){
  1098. flex-wrap: wrap;
  1099. }
  1100. // }
  1101. div.col-left{
  1102. padding: 0 $column_goutiere $column_goutiere 0;
  1103. flex: 0 0 $column_width * 2 + $column_goutiere;
  1104. }
  1105. div.col-right{}
  1106. }
  1107. div.col-left section.body{
  1108. background-color: $color-base;
  1109. padding: 0.5em 1em 1em;
  1110. }
  1111. aside.linked-materials{
  1112. ul{
  1113. width:calc(100% + #{$column_goutiere});
  1114. li{
  1115. display: inline-block;
  1116. vertical-align: top;
  1117. width:$column_width;
  1118. margin:0 $column_goutiere $column_goutiere 0;
  1119. }
  1120. }
  1121. h3.field__label{
  1122. font-size: 1em;
  1123. font-weight: 500;
  1124. margin: 2em 0 1em 0;
  1125. }
  1126. h1.title{
  1127. font-size: 1em;
  1128. font-weight: 400;
  1129. }
  1130. h3.ref{
  1131. font-size: 0.756em;
  1132. font-weight: 600;
  1133. }
  1134. h2.description{
  1135. font-size: 0.756em;
  1136. font-weight: 400;
  1137. }
  1138. }
  1139. }
  1140. // ___ _ _ _
  1141. // | _ ) |__ _| |__| |__ _
  1142. // | _ \ / _` | '_ \ / _` |
  1143. // |___/_\__,_|_.__/_\__,_|
  1144. #blabla{
  1145. }
  1146. #main-content > article.article{
  1147. div.cols{
  1148. display: grid;
  1149. grid-template-rows: 1fr;
  1150. grid-template-columns: repeat(6, 1fr);
  1151. grid-gap: 1em;
  1152. div.col-left{
  1153. grid-column: 1;
  1154. }
  1155. div.col-right{
  1156. grid-column: 2/6;
  1157. }
  1158. }
  1159. section.accroche{
  1160. figure{
  1161. width:$column_width*2 + $column_goutiere;
  1162. margin:0 $column_goutiere 0 0;
  1163. img{
  1164. width:100%;
  1165. }
  1166. }
  1167. }
  1168. section.taxonomy{
  1169. margin:1em 0;
  1170. ul{
  1171. margin: 0;
  1172. }
  1173. li{
  1174. display:inline-block;
  1175. padding:0 0.5em 0 0;
  1176. }
  1177. }
  1178. div.gallery-wrapper{
  1179. .image{
  1180. display: inline-block;
  1181. width:$column_width;
  1182. margin:0 $column_goutiere $column_goutiere*0.6 0;
  1183. height:$card_height / 2;
  1184. background-size: cover;
  1185. }
  1186. }
  1187. // section.videos{
  1188. // ul{
  1189. // margin:0; padding:0;
  1190. // li{
  1191. // margin:0; padding:0;
  1192. // display: inline-block;
  1193. // width:100%; overflow: hidden;
  1194. // }
  1195. // }
  1196. // }
  1197. // section.visuels{
  1198. // width:calc(100% + #{$column_goutiere});
  1199. // figure{
  1200. // position: relative;
  1201. // display: inline-block;
  1202. // vertical-align: top;
  1203. // width:$column_width*2 + $column_goutiere;
  1204. // margin:0 $column_goutiere $column_goutiere*0.6 0;
  1205. // img{
  1206. // width:100%;
  1207. // }
  1208. // caption{
  1209. // position: absolute; bottom: 0; left:0;
  1210. // box-sizing: border-box; width: 100%; padding:0.5em;
  1211. // background-color: $transparent-bg-blk; color: #fff;
  1212. // }
  1213. // }
  1214. // }
  1215. aside.linked-materials{
  1216. ul{
  1217. width:calc(100% + #{$column_goutiere});
  1218. li{
  1219. display: inline-block;
  1220. vertical-align: top;
  1221. width:$column_width;
  1222. margin:0 $column_goutiere $column_goutiere 0;
  1223. }
  1224. }
  1225. h3.field__label{
  1226. font-size: 1em;
  1227. font-weight: 500;
  1228. margin: 2em 0 1em 0;
  1229. }
  1230. h1.title{
  1231. font-size: 1em;
  1232. font-weight: 400;
  1233. }
  1234. h3.ref{
  1235. font-size: 0.756em;
  1236. font-weight: 600;
  1237. }
  1238. h2.description{
  1239. font-size: 0.756em;
  1240. font-weight: 400;
  1241. }
  1242. }
  1243. nav.prevnext{
  1244. &.bottom{
  1245. margin:2em 0;
  1246. }
  1247. ul{
  1248. padding:0;
  1249. margin:0;
  1250. display: grid;
  1251. grid-template-columns: 1fr 1fr;
  1252. }
  1253. li{
  1254. padding:0;
  1255. margin:0;
  1256. list-style: none;
  1257. a{
  1258. font-size: 0.756em;
  1259. font-weight: 700;
  1260. }
  1261. &:nth-child(1){
  1262. grid-column: 1;
  1263. a:before{
  1264. content:'< ';
  1265. }
  1266. }
  1267. &:nth-child(2){
  1268. grid-column: 2;
  1269. text-align: right;
  1270. a:after{
  1271. content:' >';
  1272. }
  1273. }
  1274. }
  1275. }
  1276. }
  1277. // ___ _
  1278. // / __| |_ _____ __ ___ _ ___ ___ _ __ ___
  1279. // \__ \ ' \/ _ \ V V / '_/ _ \/ _ \ ' \(_-<
  1280. // |___/_||_\___/\_/\_/|_| \___/\___/_|_|_/__/
  1281. #showrooms{
  1282. width: calc(100% + #{$column_goutiere});
  1283. article.showroom{
  1284. width: $column_width * 2 + $column_goutiere;
  1285. display: inline-block;
  1286. vertical-align: top;
  1287. margin: 0 $column_goutiere $column_goutiere 0;
  1288. h1{
  1289. margin:0;
  1290. font-weight: 4;
  1291. }
  1292. p{ margin:0; }
  1293. figure{
  1294. margin:0;
  1295. img{
  1296. max-width: 100%;
  1297. }
  1298. }
  1299. }
  1300. }
  1301. // ___ _ _
  1302. // | _ \_ _(_)__(_)_ _ __ _
  1303. // | _/ '_| / _| | ' \/ _` |
  1304. // |_| |_| |_\__|_|_||_\__, |
  1305. // |___/
  1306. #main-content>#pricing,
  1307. #main-content .view-pricing-products .view-content{
  1308. display: flex;
  1309. flex-flow: row nowrap;
  1310. article.product,
  1311. .views-row{
  1312. flex:0 0 50%;
  1313. text-align: center;
  1314. padding: 2em 0;
  1315. >header{
  1316. padding-bottom: 1.3em;
  1317. }
  1318. >header h1,
  1319. .views-field-title{
  1320. font-size: 4em;
  1321. line-height: 0.6;
  1322. color: #fff;
  1323. text-align: center;
  1324. word-spacing: 30000px;
  1325. }
  1326. section.content, .views-field-body{
  1327. color: #fff;
  1328. .description{
  1329. font-size: 1.134em;
  1330. p{
  1331. margin: 0.3em;
  1332. }
  1333. }
  1334. }
  1335. aside{
  1336. padding:1em 0;
  1337. .variation{
  1338. display: flex;
  1339. flex-flow: row nowrap;
  1340. justify-content: center;
  1341. align-items:flex-end;
  1342. div.variation-description{
  1343. flex: 0 0 6.7em;
  1344. font-size: 2.012em;
  1345. font-weight: 800;
  1346. color: #fff;
  1347. p{
  1348. margin:0;
  1349. text-align: left;
  1350. }
  1351. }
  1352. button{
  1353. @include btn;
  1354. background-color: #fff;
  1355. }
  1356. }
  1357. }
  1358. &:nth-child(1){
  1359. background-color: $color-base;
  1360. aside .variation button{
  1361. color: $color-base;
  1362. }
  1363. }
  1364. &:nth-child(2){
  1365. background-color: $color-webshowroom;
  1366. aside .variation button{
  1367. color: $color-webshowroom;
  1368. }
  1369. }
  1370. }
  1371. }
  1372. .modal{
  1373. position: relative;
  1374. }
  1375. #pricing-modal-login-register{
  1376. position: relative;
  1377. width: 100%;
  1378. text-align: left;
  1379. h2{
  1380. margin: 0.4em 0 1.1em;
  1381. padding-right: 4em;
  1382. font-size: 1.2em;
  1383. font-weight: 300;
  1384. }
  1385. #login-register{
  1386. width: 100%;
  1387. display: flex;
  1388. flex-flow: row nowrap;
  1389. >section{
  1390. flex:0 0 250px;
  1391. form{
  1392. .form-item, .form-actions {
  1393. margin: 0.5em 0;
  1394. max-width: none;
  1395. }
  1396. .form-type-email,
  1397. .form-type-password,
  1398. .form-actions{
  1399. display:block;
  1400. }
  1401. input[type="email"],
  1402. input[type="password"]{
  1403. max-width: 11em;
  1404. }
  1405. &#user-login-form #edit-pass--description,
  1406. #edit-pass-pass1--description{
  1407. display: block;
  1408. max-width: 16em;
  1409. font-size: 0.693em;
  1410. }
  1411. }
  1412. }
  1413. section.login{
  1414. form{
  1415. >div{
  1416. // display: block;
  1417. }
  1418. }
  1419. }
  1420. section.register{
  1421. }
  1422. }
  1423. }
  1424. #main-content form.commerce-checkout-flow{
  1425. $w:3;
  1426. max-width: $column_width * $w + $column_goutiere * ($w - 1);
  1427. .layout-checkout-form{
  1428. display: flex;
  1429. flex-flow: column;
  1430. .layout-region-checkout-main{
  1431. // disable default style
  1432. width:100%;
  1433. float: none;
  1434. // apply custom style
  1435. order:2;
  1436. background-color: $color-webshowroom;
  1437. padding: 1em;
  1438. label,
  1439. legend,
  1440. fieldset#edit-review-contact-information,
  1441. fieldset#edit-review-payment-information{
  1442. color: #fff;
  1443. }
  1444. fieldset{
  1445. border:none;
  1446. margin:0; padding:0;
  1447. legend{
  1448. font-size: 1.5em;
  1449. font-weight: 600;
  1450. margin-bottom: 0.5em;
  1451. }
  1452. }
  1453. $lw:10em;
  1454. .form-item{
  1455. margin:0 0 0.5em 0;
  1456. }
  1457. label{
  1458. display: inline-block;
  1459. font-weight: bold;
  1460. min-width: $lw;
  1461. }
  1462. input[type="text"]{
  1463. width:20em;
  1464. }
  1465. .stripe-form{
  1466. display: inline-block;
  1467. background-color: #fff;
  1468. color: #1A1A1A;
  1469. border-radius: 5px;
  1470. padding: 1em;
  1471. margin: 0 0 1em;
  1472. .form-item{
  1473. display: flex;
  1474. align-items: center;
  1475. flex-flow: row nowrap;
  1476. label{
  1477. color: #777;
  1478. }
  1479. .form-text{
  1480. background-color: #fff;
  1481. border-radius: 3px;
  1482. }
  1483. }
  1484. }
  1485. // .form-item-payment-information-billing-information-address-0-address-address-line2
  1486. .form-item-payment-information-add-payment-method-billing-information-address-0-address-address-line2{
  1487. padding-left:$lw + 0.25em;
  1488. }
  1489. // .form-item-payment-information-billing-information-copy-to-address-book
  1490. .form-item-payment-information-add-payment-method-billing-information-copy-to-address-book{
  1491. display: none;
  1492. }
  1493. }
  1494. .layout-region-checkout-secondary{
  1495. // disable default style
  1496. width:100%;
  1497. float: none;
  1498. // apply custom style
  1499. order: 1;
  1500. // display: flex;
  1501. // flex-flow: row nowrap;
  1502. // >.checkout-pane{
  1503. // flex: 0 0 50%;
  1504. // }
  1505. >h3{display:none;}
  1506. #edit-order-summary{
  1507. background-color: $color-base;
  1508. color:#fff;
  1509. padding:1em;
  1510. .view-commerce-checkout-order-summary{
  1511. display: flex;
  1512. flex-flow: row nowrap;
  1513. justify-content: space-between;
  1514. align-items: flex-end;
  1515. }
  1516. .field--name-product-id{
  1517. .field--name-title{
  1518. font-size: 2.5em;
  1519. font-weight: 800;
  1520. }
  1521. .field--name-body{
  1522. }
  1523. }
  1524. .field--name-title{
  1525. font-size: 1.5em;
  1526. font-weight: 600;
  1527. }
  1528. p{
  1529. margin:0;
  1530. }
  1531. }
  1532. #edit-coupon-redemption{
  1533. background-color: $color-showrooms;
  1534. padding:1em;
  1535. >.form-wrapper{
  1536. display: flex;
  1537. flex-flow: row;
  1538. align-items: center;
  1539. .form-item{
  1540. margin:0 0.5em 0 0;
  1541. label{
  1542. color: #fff;
  1543. font-size: 1.5em;
  1544. font-weight: 600;
  1545. margin-right: 0.5em;
  1546. }
  1547. input[type="text"]{
  1548. width: 7em;
  1549. }
  1550. }
  1551. input[type="submit"]{
  1552. background-color: #fff;
  1553. color: $color-showrooms;
  1554. border: none;
  1555. margin:0;
  1556. padding:0.1em 0.7em;
  1557. box-sizing: content-box;
  1558. height:2em;
  1559. font-weight: 800;
  1560. border-radius: 5px;
  1561. }
  1562. }
  1563. }
  1564. }
  1565. .layout-region-checkout-footer{
  1566. // disable default style
  1567. float: none;
  1568. width: 100%;
  1569. padding: 0;
  1570. // apply custom style
  1571. order: 3;
  1572. #edit-actions{
  1573. text-align: right;
  1574. }
  1575. input#edit-actions-next{
  1576. background-color: $color-blabla;
  1577. color: #fff;
  1578. border: none;
  1579. border-radius: 5px;
  1580. padding: 0.2em 0.4em 0.3em;
  1581. font-weight: 600;
  1582. font-size: 1.323em;
  1583. }
  1584. }
  1585. }
  1586. }
  1587. // ___ _
  1588. // | __|__ ___| |_ ___ _ _
  1589. // | _/ _ \/ _ \ _/ -_) '_|
  1590. // |_|\___/\___/\__\___|_|
  1591. footer[role="contentinfo"]{
  1592. body:not(.path-home) & {
  1593. display:none;
  1594. }
  1595. #block-materiosimplenewssubscription{
  1596. form{
  1597. display: flex;
  1598. flex-flow: row nowrap;
  1599. align-items: center;
  1600. font-size: 0.756em;
  1601. >*{
  1602. margin-right: 0.5em;
  1603. }
  1604. #edit-subscriptions{
  1605. display: flex;
  1606. flex-flow: row nowrap;
  1607. >*{
  1608. margin-right: 0.5em;
  1609. display: flex;
  1610. flex-flow: row nowrap;
  1611. align-items: center;
  1612. }
  1613. input{
  1614. margin-right: 0.3em;
  1615. }
  1616. }
  1617. #edit-mail-wrapper{
  1618. input[type="email"]{
  1619. width:10em;
  1620. }
  1621. }
  1622. #edit-actions--2{
  1623. input[type="submit"]{
  1624. border: none;
  1625. background: none;
  1626. background-color: $color-base;
  1627. border-radius: 5px;
  1628. color: #fff;
  1629. padding: 0.7em 1em;
  1630. font-weight: 700;
  1631. }
  1632. }
  1633. }
  1634. }
  1635. }