main.scss 10 KB

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