main.scss 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574
  1. // @Author: Bachir Soussi Chiadmi <bach>
  2. // @Date: 18-12-2017
  3. // @Email: bachir@figureslibres.io
  4. // @Filename: app.scss
  5. // @Last modified by: bach
  6. // @Last modified time: 20-12-2017
  7. // @License: GPL-V3
  8. @import './base/reset';
  9. @import './base/variables';
  10. @import './base/colors';
  11. @import './base/grid';
  12. @import './base/layout';
  13. // $mdi-font-path: "./mdi/fonts";
  14. // @import './mdi/scss/materialdesignicons.scss';
  15. @import './base/fonts';
  16. html{
  17. // background-color: red;
  18. }
  19. aside.messages{
  20. border:none;
  21. }
  22. // _ _ _
  23. // | || |___ __ _ __| |___ _ _
  24. // | __ / -_) _` / _` / -_) '_|
  25. // |_||_\___\__,_\__,_\___|_|
  26. header[role="banner"]{
  27. padding:0.2em 0 0 0;
  28. %header-fs{
  29. font-size: 0.9em;
  30. // line-height: 1;
  31. font-weight: 400;
  32. }
  33. #block-sitebranding{
  34. h1{
  35. margin:0;
  36. line-height: 1;
  37. }
  38. }
  39. #block-userlogin{
  40. position: relative;
  41. // width:8em;
  42. padding:0 1em;
  43. overflow: visible;
  44. h2{
  45. @extend %header-fs;
  46. line-height: 1.38;
  47. margin: 0;
  48. }
  49. &>section{
  50. background-color: #fff;
  51. overflow: hidden;
  52. width:11em;
  53. height:1px;
  54. padding:0.01em 1em;
  55. // margin:0 0 0 -1em;
  56. box-sizing:content-box;
  57. transition: all 0.4s ease-in-out;
  58. // outline: 1px solid blue;
  59. transition-delay: 2s;
  60. position: absolute;
  61. right:0;
  62. top:1.7em;
  63. box-sizing: content-box;
  64. }
  65. &:hover{
  66. &>section{
  67. transition-delay: 0s;
  68. height:12em;
  69. padding:1em 1em;
  70. box-shadow: 0 0 10px #ccc;
  71. }
  72. }
  73. .form-item{
  74. margin:0;
  75. position: relative;
  76. width:100%;
  77. &.form-item-name{
  78. margin:2px 0 0.5em 0;
  79. input{
  80. width:90%;
  81. padding:0;
  82. box-sizing: content-box;
  83. }
  84. }
  85. &.form-item-pass{
  86. margin:0 0 0.5em 0;
  87. input{
  88. width:90%;
  89. padding:0;
  90. box-sizing: content-box;
  91. }
  92. }
  93. &.form-item-persistent-login{
  94. font-size: 0.756em;
  95. label{
  96. vertical-align: top;
  97. }
  98. }
  99. }
  100. #edit-actions{
  101. margin:0;
  102. }
  103. .item-list{
  104. ul{
  105. margin:0;
  106. li{
  107. list-style: none;
  108. margin:0;
  109. a{
  110. font-size: 0.756em;
  111. }
  112. }
  113. }
  114. }
  115. }
  116. // menu
  117. #block-header{
  118. margin-right: 1em;
  119. padding-left: 1em;
  120. border-left: 1px solid #000;
  121. ul.menu{
  122. margin:0;
  123. li{
  124. padding:0;
  125. a{
  126. @extend %header-fs;
  127. }
  128. }
  129. }
  130. }
  131. #block-languageswitcher{
  132. text-align: right;
  133. h2{
  134. margin: 0.1em 0 0 0;
  135. font-size: 0.756em;
  136. font-weight: 400;
  137. padding:0.1em 0.4em 0.2em;
  138. border-radius: 3px;
  139. background-color: #444;
  140. color: #fff;
  141. display: inline-block;
  142. vertical-align: top;
  143. }
  144. &>ul.links{
  145. // background-color: #fff;
  146. overflow: hidden;
  147. width:3.5em;
  148. // display: inline-block;
  149. height:1px;
  150. padding:0.01em 0;
  151. margin:0;
  152. box-sizing:content-box;
  153. transition: all 0.4s ease-in-out;
  154. // outline: 1px solid blue;
  155. // transition-delay: 2s;
  156. }
  157. &:hover{
  158. &>ul.links{
  159. transition-delay: 0s;
  160. height:2em;
  161. padding:0.3em 0;
  162. // box-shadow: 0 0 10px #ccc;
  163. }
  164. }
  165. li{
  166. list-style: none;
  167. padding:0;
  168. display: inline-block;
  169. &.is-active{
  170. display:none;
  171. }
  172. a{
  173. margin: 0;
  174. font-size: 0.756em;
  175. font-weight: 400;
  176. padding:0.2em 0.4em;
  177. border-radius: 3px;
  178. background-color: #444;
  179. color: #fff;
  180. }
  181. }
  182. }
  183. // header bottom
  184. #block-pagetitle{
  185. float: left;
  186. padding:1em 0;
  187. h2{
  188. margin:0;
  189. font-size: 1.512em;
  190. text-transform: capitalize;
  191. font-weight: 300;
  192. }
  193. }
  194. #block-materiosapisearchblock{
  195. float:right;
  196. display:inline-block;
  197. // box-shadow: 0 0 5px rgba(0,0,0,0.2);
  198. padding:0;
  199. #materio-sapi-search-form{
  200. .form-item, input.button{
  201. display: inline-block;
  202. }
  203. #edit-search{
  204. border:1px #BBB solid;
  205. border-radius: 14px;
  206. padding:0.3em;
  207. color:#666;
  208. }
  209. #edit-submit{
  210. border:0;
  211. text-indent: 50px;
  212. overflow: hidden;
  213. width:20px; height:20px;
  214. margin:0;
  215. // border-radius: 7px;
  216. background-image: url('../img/search.png');
  217. background-position: center;
  218. background-repeat: no-repeat;
  219. background-size: contain;
  220. }
  221. }
  222. }
  223. }
  224. // main
  225. aside.messages{
  226. padding: 0;
  227. }
  228. // content top
  229. // #content-top{
  230. // &:after{
  231. // content:"";
  232. // clear:both;
  233. // display: block;
  234. // }
  235. // }
  236. // __ _
  237. // / _|_ _ ___ _ _| |_
  238. // | _| '_/ _ \ ' \ _|
  239. // |_| |_| \___/_||_\__|
  240. article.node--type-frontpage{
  241. %front-col-field__label{
  242. font-size: 3.5em;
  243. line-height: 1;
  244. }
  245. %front-col-descritpion{
  246. font-size: 0.9em;
  247. line-height: 1.3;
  248. }
  249. %part-centered-layout{
  250. padding:1.5em 0;
  251. background-color: #fff;
  252. >div:nth-child(1){
  253. width:80%;
  254. margin: 0 auto;
  255. text-align: center;
  256. .field__label{
  257. @extend %front-col-field__label;
  258. }
  259. .field__item{
  260. @extend %front-col-descritpion;
  261. }
  262. }
  263. }
  264. %part-columned-layout{
  265. display:grid;
  266. grid-template-columns: 300px 1fr;
  267. grid-column-gap: 2em;
  268. padding:2em 1em;
  269. >div:nth-child(1){
  270. color: #fff;
  271. grid-column: 1;
  272. .field__label{
  273. @extend %front-col-field__label;
  274. }
  275. .field__item{
  276. @extend %front-col-descritpion;
  277. }
  278. }
  279. >div:nth-child(2){
  280. grid-column: 2;
  281. }
  282. }
  283. .node__content{
  284. &>section{
  285. &.home-intro{
  286. @extend %part-centered-layout;
  287. }
  288. &.home-database{
  289. background-color: #69cdcf;
  290. @extend %part-columned-layout;
  291. .field--name-field-a-database{}
  292. .cards-list-home{
  293. position: relative;
  294. // max-height: (130px*1.4)*3;
  295. max-height: 580px;
  296. overflow-y: hidden;
  297. ul{
  298. width:100%;
  299. margin:0; padding:0;
  300. display: grid;
  301. grid-template-columns: repeat(auto-fill, minmax(50px, 130px));
  302. grid-template-rows: 1fr;
  303. grid-gap: 1em;
  304. justify-content:start;
  305. li{
  306. position: relative;
  307. list-style: none;
  308. margin:0; padding:0;
  309. padding-top: 140%;
  310. .card{
  311. position:absolute;
  312. top:0; bottom:0;
  313. left:0; right:0;
  314. width: auto;
  315. height: auto;
  316. .field--name-field-short-description{
  317. font-size: 0.756em;
  318. line-height: 0.9;
  319. }
  320. }
  321. }
  322. }
  323. }
  324. }
  325. &.home-showrooms{
  326. background-color: #50aa3c;
  327. @extend %part-columned-layout;
  328. .field--name-field-showrooms{
  329. }
  330. .field--name-computed-showrooms-reference{
  331. position:relative;
  332. // height:550px;
  333. display: grid;
  334. grid-template-rows: 1fr;
  335. $bp: ($column_width + $column_goutiere )*7;
  336. @media only screen and (max-width: $bp){
  337. grid-template-columns: 1fr;
  338. >.field__item{
  339. grid-column: 1;
  340. }
  341. }
  342. @media only screen and (min-width: $bp + 1px){
  343. grid-template-columns: 1fr 1fr;
  344. grid-gap: 1em;
  345. >.field__item:nth-child(odd){
  346. grid-column: 1;
  347. }
  348. >.field__item:nth-child(even){
  349. grid-column: 2;
  350. }
  351. }
  352. >.field__item{
  353. grid-row: 1;
  354. // position: absolute;
  355. // top:0; left:0;
  356. // width:100%; height:100%;
  357. // overflow: hidden;
  358. .taxonomy-term{
  359. position: relative;
  360. width:100%; height:100%;
  361. div.visuel{
  362. width:100%;
  363. padding-bottom: 10em;
  364. img{
  365. max-width: 100%;
  366. height: auto;
  367. }
  368. }
  369. section.text{
  370. position: absolute;
  371. bottom:0; left:0;
  372. width:100%;
  373. box-sizing:border-box;
  374. padding:1em 0;
  375. background-color:#50aa3c;
  376. color: #fff;
  377. >*{
  378. // display: inline-block;
  379. font-size: 0.9em;
  380. }
  381. h2,p{
  382. margin:0;
  383. }
  384. }
  385. }
  386. }
  387. }
  388. }
  389. &.home-blabla{
  390. background-color: #9458aa;
  391. @extend %part-columned-layout;
  392. .cards-list-home{
  393. position: relative;
  394. $bp: ($column_width + $column_goutiere );
  395. overflow-y: hidden;
  396. @media only screen and (max-width: $bp * 6){
  397. max-height: 630px;
  398. }
  399. @media only screen and (min-width: ($bp * 6) + 1px){
  400. max-height: 310px;
  401. }
  402. ul{
  403. width:100%;
  404. margin:0; padding:0;
  405. display: grid;
  406. grid-template-columns: repeat(auto-fill, minmax(80px, 220px));
  407. // grid-template-rows: 1fr;
  408. grid-gap: 1em;
  409. justify-content:start;
  410. li{
  411. position: relative;
  412. list-style: none;
  413. margin:0; padding:0;
  414. padding-top: 140%;
  415. overflow: hidden;
  416. .card{
  417. position:absolute;
  418. top:0; bottom:0;
  419. left:0; right:0;
  420. width: auto;
  421. height: auto;
  422. .field--name-title{
  423. font-size: 0.756em;
  424. line-height: 0.9;
  425. }
  426. }
  427. }
  428. }
  429. }
  430. }
  431. &.home-pricing{
  432. @extend %part-centered-layout;
  433. }
  434. }
  435. }
  436. }
  437. // ___ _
  438. // / __|__ _ _ _ __| |___
  439. // | (__/ _` | '_/ _` (_-<
  440. // \___\__,_|_| \__,_/__/
  441. .infinite-loading-container{
  442. .infinite-status-prompt{
  443. i[class^="loading-"]{
  444. width:15px; height:15px;
  445. }
  446. }
  447. }
  448. .cards-list{
  449. position: relative;
  450. .search-info{
  451. font-size: 0.756em;
  452. font-weight: 500;
  453. margin: 0;
  454. padding: 0 0 0.5em 0;
  455. }
  456. &>ul{
  457. // outline: 1px green solid;
  458. margin:0; padding:0;
  459. width: calc(100% + #{$column_goutiere});
  460. &>li{
  461. list-style: none;
  462. margin:0 $column_goutiere $column_goutiere 0; padding:0;
  463. display: inline-block;
  464. vertical-align: top;
  465. }
  466. }
  467. }
  468. article.card{
  469. position: relative;
  470. box-shadow: 0 0 5px rgba(0,0,0,0.2);
  471. width:$column_width; height:295px;
  472. // &.card-small{
  473. // width:100px; height:140px;
  474. // }
  475. // focused
  476. // box-shadow: 0 0 7px rgba(0,0,0,0.9);
  477. header{
  478. position: absolute;
  479. bottom:0;
  480. z-index:10;
  481. color: #000;
  482. background-color: rgba(255,255,255,0.8);
  483. padding: 0.3em 0.3em;
  484. box-sizing:border-box;
  485. width:100%;
  486. h1, h4{ margin:0; padding:0; }
  487. h1{
  488. font-size: 1.3em;
  489. font-weight: 700;
  490. line-height: 0.8;
  491. margin-bottom: 0.2em;
  492. }
  493. h4{
  494. font-size: 0.882em;
  495. font-weight: 300;
  496. line-height: 1;
  497. // margin-bottom: 0.1em;
  498. }
  499. span.ref{
  500. font-size: 0.693em;
  501. font-weight: 300;
  502. line-height: 1;
  503. }
  504. }
  505. section.images{
  506. position: relative;
  507. &, *{width: 100%; height:100%;}
  508. figure{
  509. margin:0;
  510. position: absolute;
  511. top:0; left:0;
  512. // width: 100%; height:100%;
  513. &:first-of-type{
  514. z-index:5
  515. }
  516. img{
  517. // width: 100%; height:100%;
  518. &.blank{
  519. position: absolute;
  520. top:0; left:0;
  521. z-index: 20;
  522. }
  523. }
  524. }
  525. }
  526. }