API tools faq
paste
Leeniiux

ICN - CSS

Leeniiux
Jan 30th, 2017
112
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.00 KB | None | 0 0
raw download clone embed print report
  1. @font-face {
  2. font-family: 'codropsicons';
  3. font-weight: normal;
  4. font-style: normal;
  5. src: url('../fonts/codropsicons/codropsicons.eot');
  6. src: url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), url('../fonts/codropsicons/codropsicons.woff') format('woff'), url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
  7. }
  8.  
  9. *,
  10. *::after,
  11. *::before {
  12. -webkit-box-sizing: border-box;
  13. box-sizing: border-box;
  14. }
  15.  
  16. .clearfix::before,
  17. .clearfix::after {
  18. content: '';
  19. display: table;
  20. }
  21.  
  22. .clearfix::after {
  23. clear: both;
  24. }
  25.  
  26. body {
  27. overflow-x: hidden;
  28. font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  29. color: #515158;
  30. background: rgb(179, 189, 180);
  31. -webkit-font-smoothing: antialiased;
  32. -moz-osx-font-smoothing: grayscale;
  33. }
  34.  
  35. a {
  36. text-decoration: none;
  37. color: white;
  38. outline: none;
  39. }
  40.  
  41. a:hover,
  42. button:hover {
  43. color: #515158;
  44. outline: none;
  45. }
  46.  
  47. a:focus,
  48. button:focus {
  49. outline: none;
  50. }
  51.  
  52. .hidden {
  53. position: absolute;
  54. overflow: hidden;
  55. width: 0;
  56. height: 0;
  57. pointer-events: none;
  58. }
  59.  
  60. /* Icons */
  61. .icon {
  62. display: block;
  63. width: 1em;
  64. height: 1em;
  65. margin: 0 auto;
  66. fill: currentColor;
  67. }
  68.  
  69. .container {
  70. position: relative;
  71. width: 100vw;
  72. height: 100vh;
  73. }
  74.  
  75. /* Header */
  76.  
  77. .codrops-header {
  78. position: absolute;
  79. z-index: 100;
  80. top: 0;
  81. left: 0;
  82. display: -webkit-flex;
  83. display: flex;
  84. -webkit-align-items: center;
  85. align-items: center;
  86. padding: 1.5em 1em;
  87. text-align: center;
  88. }
  89.  
  90. .codrops-header h1 {
  91. font-size: 1.15em;
  92. font-weight: normal;
  93. line-height: 1;
  94. margin: 0 0 0 1em;
  95. }
  96.  
  97. /* Top Navigation Style */
  98.  
  99. .codrops-links {
  100. position: relative;
  101. display: inline-block;
  102. text-align: center;
  103. white-space: nowrap;
  104. }
  105.  
  106. .codrops-links::after {
  107. content: '';
  108. position: absolute;
  109. top: 0;
  110. left: 50%;
  111. width: 1px;
  112. height: 100%;
  113. background: rgba(0, 0, 0, 0.1);
  114. -webkit-transform: rotate3d(0, 0, 1, 22.5deg);
  115. transform: rotate3d(0, 0, 1, 22.5deg);
  116. }
  117.  
  118. .codrops-icon {
  119. display: inline-block;
  120. width: 1.5em;
  121. margin: 0.5em;
  122. padding: 0em 0;
  123. text-decoration: none;
  124. }
  125.  
  126. .codrops-icon span {
  127. display: none;
  128. }
  129.  
  130. .codrops-icon::before {
  131. font-family: 'codropsicons';
  132. font-weight: normal;
  133. font-style: normal;
  134. font-variant: normal;
  135. line-height: 1;
  136. margin: 0 5px;
  137. text-transform: none;
  138. speak: none;
  139. -webkit-font-smoothing: antialiased;
  140. }
  141.  
  142. .codrops-icon--drop::before {
  143. content: '\e001';
  144. color: #09c;
  145. }
  146.  
  147. .codrops-icon--prev::before {
  148. content: '\e004';
  149. }
  150.  
  151. .main {
  152. position: fixed;
  153. top: 0;
  154. left: 0;
  155. overflow: hidden;
  156. width: calc(100vw - 300px);
  157. height: 100vh;
  158. }
  159.  
  160. .mall {
  161. position: relative;
  162. width: 100%;
  163. height: 100%;
  164. pointer-events: none;
  165. -webkit-perspective: 3500px;
  166. perspective: 3500px;
  167. -webkit-perspective-origin: 0% 50%;
  168. perspective-origin: 0% 50%;
  169. -webkit-transition: -webkit-transform 0.8s;
  170. transition: transform 0.8s;
  171. -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  172. transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  173. }
  174.  
  175. .mall.mall--content-open {
  176. -webkit-transform: translate3d(0,-25%,0) scale3d(0.8,0.8,1);
  177. transform: translate3d(0,-25%,0) scale3d(0.8,0.8,1);
  178. }
  179.  
  180. .surroundings,
  181. .levels {
  182. position: absolute;
  183. top: 50%;
  184. left: 50%;
  185. }
  186.  
  187. .surroundings {
  188. width: 192vmin;
  189. /* double of mall map */
  190. height: 128vmin;
  191. margin: -64vmin 0 0 -96vmin;
  192. pointer-events: none;
  193. -webkit-transition: opacity 0.8s;
  194. transition: opacity 0.8s;
  195. -webkit-transform-style: preserve-3d;
  196. transform-style: preserve-3d;
  197. }
  198.  
  199. .surroundings__map {
  200. opacity: 0.3;
  201. max-width: 100%;
  202. display: block;
  203. }
  204.  
  205. .surroundings--hidden {
  206. opacity: 0;
  207. }
  208.  
  209. .levels {
  210. width: 96vmin;
  211. height: 64vmin;
  212. margin: -32vmin 0 0 -48vmin;
  213. -webkit-transition: -webkit-transform 0.3s;
  214. transition: transform 0.3s;
  215. -webkit-transform-style: preserve-3d;
  216. transform-style: preserve-3d;
  217. }
  218.  
  219. .surroundings,
  220. .levels {
  221. -webkit-transform: rotateX(70deg) rotateZ(-45deg) translateZ(-15vmin);
  222. transform: rotateX(70deg) rotateZ(-45deg) translateZ(-15vmin);
  223. }
  224.  
  225. .level {
  226. position: relative;
  227. width: 100%;
  228. height: 100%;
  229. cursor: pointer;
  230. pointer-events: auto;
  231. -webkit-transition: opacity 1s, -webkit-transform 1s;
  232. transition: opacity 1s, transform 1s;
  233. -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  234. transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  235. -webkit-transform-style: preserve-3d;
  236. transform-style: preserve-3d;
  237. }
  238.  
  239. .level::after {
  240. font-size: 2.5vmin;
  241. line-height: 0;
  242. position: absolute;
  243. z-index: 100;
  244. top: -2em;
  245. left: 3.5em;
  246. white-space: nowrap;
  247. color: #7d7d86;
  248. -webkit-transform: rotateZ(45deg) rotateX(-70deg) translateZ(5vmin);
  249. transform: rotateZ(45deg) rotateX(-70deg) translateZ(5vmin);
  250. -webkit-transition: -webkit-transform 1s, color 0.3s;
  251. transition: transform 1s, color 0.3s;
  252. -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  253. transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  254. }
  255.  
  256. .level:hover::after,
  257. .level--current::after {
  258. color: #515158;
  259. }
  260.  
  261. .level--current::after {
  262. -webkit-transform: rotateZ(-20deg) rotateZ(45deg) rotateX(-70deg) translateZ(5vmin) translateX(5vmin) translateY(-10vmin);
  263. transform: rotateZ(-20deg) rotateZ(45deg) rotateX(-70deg) translateZ(5vmin) translateX(5vmin) translateY(-10vmin);
  264. }
  265.  
  266. .level--1::after {
  267. content: 'Rez-de-chaussée';
  268. }
  269.  
  270. .level--2::after {
  271. content: 'Étage 1';
  272. }
  273.  
  274. .level--3::after {
  275. content: 'Étage 2';
  276. }
  277.  
  278. .level:not(:first-child) {
  279. position: absolute;
  280. top: 0;
  281. left: 0;
  282. }
  283.  
  284. .level--2 {
  285. -webkit-transform: translateZ(10vmin);
  286. transform: translateZ(10vmin);
  287. }
  288.  
  289. .level--3 {
  290. -webkit-transform: translateZ(20vmin);
  291. transform: translateZ(20vmin);
  292. }
  293.  
  294. .level--4 {
  295. -webkit-transform: translateZ(30vmin);
  296. transform: translateZ(30vmin);
  297. }
  298.  
  299.  
  300. /* Selection transitions */
  301.  
  302. .levels--selected-1 .level:not(.level--1),
  303. .levels--selected-2 .level:not(.level--2),
  304. .levels--selected-3 .level:not(.level--3),
  305. .levels--selected-4 .level:not(.level--4) {
  306. opacity: 0;
  307. /* fade out all others */
  308. }
  309.  
  310. /* Other levels */
  311.  
  312. .level--current ~ .level {
  313. -webkit-transform: translateZ(90vmin);
  314. transform: translateZ(90vmin);
  315. }
  316.  
  317. .levels--selected-2 .level--1,
  318. .levels--selected-3 .level--1,
  319. .levels--selected-4 .level--1,
  320. .levels--selected-3 .level--2,
  321. .levels--selected-4 .level--2,
  322. .levels--selected-4 .level--3 {
  323. -webkit-transform: translateZ(-60vmin);
  324. transform: translateZ(-60vmin);
  325. }
  326.  
  327. /* Delays */
  328. /* 1 */
  329.  
  330. .levels--selected-1 .level--3,
  331. .levels--selected-2 .level--3,
  332. .levels--selected-3 .level--2,
  333. .levels--selected-4 .level--2 {
  334. -webkit-transition-delay: 0.1s;
  335. transition-delay: 0.1s;
  336. }
  337.  
  338. .levels--selected-1 .level--2,
  339. .levels--selected-2 .level--current,
  340. .levels--selected-2 .level--current::after,
  341. .levels--selected-3 .level--current,
  342. .levels--selected-3 .level--current::after,
  343. .levels--selected-4 .level--3 {
  344. -webkit-transition-delay: 0.25s;
  345. transition-delay: 0.25s;
  346. }
  347.  
  348. .levels--selected-1 .level--current,
  349. .levels--selected-1 .level--current::after,
  350. .levels--selected-4 .level--current,
  351. .levels--selected-4 .level--current::after {
  352. -webkit-transition-delay: 0.45s;
  353. transition-delay: 0.45s;
  354. }
  355.  
  356. /* Current level */
  357.  
  358. .level.level--current {
  359. -webkit-transform: translateZ(15vmin) rotate3d(0,0,1,20deg);
  360. /* go to center */
  361. transform: translateZ(15vmin) rotate3d(0,0,1,20deg);
  362. }
  363.  
  364. /* Navigation classes */
  365. .levels--open .level,
  366. .levels--open .level::after {
  367. -webkit-transition: -webkit-transform 1s, opacity 1s;
  368. transition: transform 1s, opacity 1s;
  369. -webkit-transition-delay: 0s;
  370. transition-delay: 0s;
  371. }
  372.  
  373. .levels--open .level.level--current {
  374. opacity: 1;
  375. }
  376.  
  377. .levels--open .level.level--moveOutUp,
  378. .levels--open .level.level--moveOutDown {
  379. opacity: 0;
  380. }
  381.  
  382. .levels--open .level.level--moveOutUp {
  383. -webkit-transform: translateZ(90vmin);
  384. transform: translateZ(90vmin);
  385. }
  386.  
  387. .levels--open .level.level--moveOutDown {
  388. -webkit-transform: translateZ(-60vmin);
  389. transform: translateZ(-60vmin);
  390. }
  391.  
  392.  
  393. /* Level nav */
  394. .mallnav {
  395. position: absolute;
  396. top: 0;
  397. right: 0;
  398. text-align: center;
  399. -webkit-transition: opacity 0.8s;
  400. transition: opacity 0.8s;
  401. }
  402.  
  403. .mallnav--hidden {
  404. pointer-events: none;
  405. opacity: 0;
  406. }
  407.  
  408. /* Box button */
  409. .boxbutton {
  410. font-size: 2em;
  411. display: block;
  412. width: 2em;
  413. height: 2em;
  414. margin: 0;
  415. padding: 0;
  416. color: #fff;
  417. border: 0;
  418. background: #d7d7dc;
  419. }
  420.  
  421. .boxbutton--dark {
  422. background: #c4c4c7;
  423. }
  424.  
  425. .boxbutton--darker {
  426. background: #2c2c2f;
  427. }
  428.  
  429. .boxbutton--alt {
  430. background: #3d1975;
  431. }
  432.  
  433. .boxbutton--disabled,
  434. .boxbutton--disabled:focus,
  435. .boxbutton--disabled:hover {
  436. cursor: default;
  437. pointer-events: none;
  438. opacity: 0.2;
  439. }
  440.  
  441. /* Level map */
  442.  
  443. .map__ground {
  444. fill: #d7d7dc;
  445. }
  446.  
  447. .map__outline {
  448. -webkit-transition: fill 0.3s;
  449. transition: fill 0.3s;
  450. fill: #bbb;
  451. }
  452.  
  453. .level:hover .map__outline,
  454. .level--current .map__outline {
  455. fill: #a6a3a8;
  456. }
  457.  
  458. .map__tree {
  459. fill: #7bad7f;
  460. }
  461.  
  462. .map__lake {
  463. fill: #a2bbdd;
  464. }
  465.  
  466. .map__space {
  467. -webkit-transition: fill-opacity 0.8s;
  468. transition: fill-opacity 0.8s;
  469. fill: #bdbdbd;
  470. fill-opacity: 0.6;
  471. }
  472.  
  473. .level--current .map__space {
  474. fill-opacity: 1;
  475. }
  476.  
  477. .map__space--selected {
  478. fill: #A4A4A4;
  479. }
  480.  
  481. /* Content */
  482. .content {
  483. position: absolute;
  484. border-top: solid black 1px;
  485. top: 100%;
  486. width: 100%;
  487. height: 50%;
  488. }
  489.  
  490. .content__item {
  491. position: absolute;
  492. border-top: solid black 1px;
  493. top: 0;
  494. width: 100%;
  495. height: 100%;
  496. padding: 3em;
  497. text-align: center;
  498. background: #666666;
  499. -webkit-transition: -webkit-transform 0.8s;
  500. transition: transform 0.8s;
  501. -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  502. transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  503. }
  504.  
  505. .content--open .content__item {
  506. -webkit-transition: none;
  507. transition: none;
  508. }
  509.  
  510. .content__item--current {
  511. -webkit-transform: translate3d(0,-100%,0);
  512. transform: translate3d(0,-100%,0);
  513. }
  514.  
  515. .content__item-title {
  516. font-size: 1.85em;
  517. margin: 0;
  518. padding: 0 0 0.75em 0;
  519. pointer-events: none;
  520. font-weight: normal;
  521. opacity: 0;
  522. -webkit-transform: translate3d(0,-3em,0) translate3d(0,-100%,0);
  523. transform: translate3d(0,-3em,0) translate3d(0,-100%,0);
  524. font-weight: bold;
  525. }
  526.  
  527. .content__item[data-category='1'] .content__item-title {
  528. color: #7cbf7f;
  529. }
  530.  
  531. .content__item[data-category='2'] .content__item-title {
  532. color: #6584c7;
  533. }
  534.  
  535. .content__item[data-category='3'] .content__item-title {
  536. color: #dc4b7c;
  537. }
  538.  
  539. .content__item[data-category='4'] .content__item-title {
  540. color: #ff5733;
  541. }
  542.  
  543. .content__item[data-category='5'] .content__item-title {
  544. color: red;
  545. }
  546.  
  547. .content__item--hover .content__item-title {
  548. opacity: 1;
  549. -webkit-transition: opacity 0.3s;
  550. transition: opacity 0.3s;
  551. }
  552.  
  553. .content__item--current .content__item-title {
  554. opacity: 1;
  555. -webkit-transform: translate3d(0,0,0);
  556. transform: translate3d(0,0,0);
  557. }
  558.  
  559. .content__item-details {
  560. opacity: 0;
  561. margin: 0 auto;
  562. max-width: 50vmax;
  563. }
  564.  
  565. .content__item--current .content__item-details {
  566. opacity: 1;
  567. }
  568.  
  569. .content__meta {
  570. margin: 0;
  571. font-size: 0.85em;
  572. line-height: 1.5;
  573. }
  574.  
  575. .content__meta-item {
  576. display: inline-block;
  577. padding: 0 0.25em;
  578. color: ;
  579. }
  580.  
  581. .content__meta .icon {
  582. display: inline-block;
  583. vertical-align: middle;
  584. }
  585.  
  586. .content__desc {
  587. text-align: left;
  588. margin: 7vmin 0 0 0;
  589. }
  590.  
  591. .content__button {
  592. position: absolute;
  593. top: -100%;
  594. right: 0;
  595. -webkit-transition: opacity 0.3s 0.7s;
  596. transition: opacity 0.3s 0.7s;
  597. }
  598.  
  599. .content__button--hidden {
  600. pointer-events: none;
  601. opacity: 0;
  602. -webkit-transition: none;
  603. transition: none;
  604. }
  605.  
  606. /* Spaces list (sidebar) */
  607.  
  608. .spaces-list {
  609. position: absolute;
  610. top: 0;
  611. right: 0;
  612. width: 300px;
  613. min-height: 100vh;
  614. padding: 5em 0 1em;
  615. background: #515158;
  616. border-left: solid black 1px;
  617. }
  618.  
  619. .search {
  620. position: fixed;
  621. z-index: 100;
  622. top: 0;
  623. right: 0;
  624. left: calc(100vw - 300px);
  625. border-bottom: solid gray 1px;
  626. }
  627.  
  628. .search__input {
  629. width: 100%;
  630. padding: 1.315em 2em;
  631. color: #fff;
  632. border: 0;
  633. background: #515158;
  634. border-radius: 0;
  635. }
  636.  
  637. .search__input:focus {
  638. outline: none;
  639. }
  640.  
  641. .label {
  642. position: absolute;
  643. top: 4em;
  644. right: 0;
  645. }
  646.  
  647. .label__text {
  648. font-size: 0.85em;
  649. line-height: 1;
  650. display: block;
  651. padding: 2em;
  652. color: #e4e4e4;
  653. }
  654.  
  655. .label__checkbox {
  656. position: absolute;
  657. z-index: 10;
  658. top: 0;
  659. left: 0;
  660. width: 100%;
  661. height: 100%;
  662. cursor: pointer;
  663. opacity: 0;
  664. }
  665.  
  666. .label__checkbox:checked + .label__text {
  667. color: black;
  668. }
  669.  
  670. .list {
  671. margin: 0 0 2em;
  672. padding: 0 1em 1em 2em;
  673. list-style: none;
  674. }
  675.  
  676. .list__item {
  677. font-size: 1.05em;
  678. line-height: 1;
  679. position: relative;
  680. display: block;
  681. }
  682.  
  683. .list__item:first-child {
  684. margin-top: 2em;
  685. }
  686.  
  687. .grouped-by-category [data-category='1']:first-child,
  688. .grouped-by-category :not([data-category='1']) + [data-category='1'],
  689. .grouped-by-category [data-category='2']:first-child,
  690. .grouped-by-category :not([data-category='2']) + [data-category='2'],
  691. .grouped-by-category [data-category='3']:first-child,
  692. .grouped-by-category :not([data-category='3']) + [data-category='3'],
  693. .grouped-by-category [data-category='4']:first-child,
  694. .grouped-by-category :not([data-category='4']) + [data-category='4'] {
  695. margin-top: 4em;
  696. }
  697.  
  698. .grouped-by-category [data-category='1']:first-child::before,
  699. .grouped-by-category :not([data-category='1']) + [data-category='1']::before,
  700. .grouped-by-category [data-category='2']:first-child::before,
  701. .grouped-by-category :not([data-category='2']) + [data-category='2']::before,
  702. .grouped-by-category [data-category='3']:first-child::before,
  703. .grouped-by-category :not([data-category='3']) + [data-category='3']::before,
  704. .grouped-by-category [data-category='4']:first-child::before,
  705. .grouped-by-category :not([data-category='4']) + [data-category='4']::before {
  706. font-size: 1.25em;
  707. position: absolute;
  708. top: -1.75em;
  709. left: 0;
  710. color: #c7c7c9;
  711. }
  712.  
  713. .grouped-by-category [data-category='1']:first-child::before,
  714. .grouped-by-category :not([data-category='1']) + [data-category='1']::before {
  715. content: 'Restauration';
  716. color: #7cbf7f;
  717. }
  718.  
  719. .grouped-by-category [data-category='2']:first-child::before,
  720. .grouped-by-category :not([data-category='2']) + [data-category='2']::before {
  721. content: 'Administration';
  722. color: #6584c7;
  723. }
  724.  
  725. .grouped-by-category [data-category='3']:first-child::before,
  726. .grouped-by-category :not([data-category='3']) + [data-category='3']::before {
  727. content: 'Santé';
  728. color: #dc4b7c;
  729. }
  730.  
  731. .grouped-by-category [data-category='4']:first-child::before,
  732. .grouped-by-category :not([data-category='4']) + [data-category='4']::before {
  733. content: 'Pédagogie';
  734. color: #ff5733;
  735. }
  736.  
  737. .list__item::after {
  738. content: 'Niveau : ' attr(data-niv);
  739. font-size: 0.65em;
  740. line-height: 3;
  741. position: absolute;
  742. top: 0;
  743. right: 0;
  744. padding: 0 0.5em;
  745. pointer-events: none;
  746. color: #c7c7c9;
  747. }
  748.  
  749. .list__link {
  750. font-size: 0.85em;
  751. display: block;
  752. padding: 0.5em 0.5em 0.5em 0;
  753. }
  754.  
  755. .list__item--active .list__link .list__link:hover {
  756. color: #1f7d60;
  757. }
  758.  
  759. /* Pins */
  760. .level__pins {
  761. position: absolute;
  762. top: 0;
  763. left: 0;
  764. width: 100%;
  765. height: 100%;
  766. pointer-events: none;
  767. -webkit-transform-style: preserve-3d;
  768. transform-style: preserve-3d;
  769. }
  770.  
  771. .level__pins--active {
  772. pointer-events: auto;
  773. }
  774.  
  775. .pin {
  776. position: absolute;
  777. width: 5.5vmin;
  778. height: 8.25vmin;
  779. margin: -8.25vmin 0 0 -2.25vmin; /* let the bottom tip be the reference point for individual coordinates */
  780. -webkit-transform: rotateZ(-20deg) rotateZ(45deg) rotateX(-70deg);
  781. transform: rotateZ(-20deg) rotateZ(45deg) rotateX(-70deg);
  782. -webkit-transform-origin: 50% 100%;
  783. transform-origin: 50% 100%;
  784. -webkit-transform-style: preserve-3d;
  785. transform-style: preserve-3d;
  786. }
  787.  
  788. .pin__icon {
  789. position: relative;
  790. display: block;
  791. width: 100%;
  792. height: 100%;
  793. opacity: 0;
  794. -webkit-transform: translate3d(0,-100px,0);
  795. transform: translate3d(0,-100px,0);
  796. -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  797. transition: opacity 0.3s, transform 0.3s;
  798. -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
  799. transition-timing-function: cubic-bezier(0.2,1,0.3,1);
  800. }
  801.  
  802. .level__pins--active .pin__icon {
  803. opacity: 1;
  804. -webkit-transform: translate3d(0,0,0);
  805. transform: translate3d(0,0,0);
  806. }
  807.  
  808. .pin:nth-child(2) .pin__icon {
  809. -webkit-transition-delay: 0.05s;
  810. transition-delay: 0.05s;
  811. }
  812. .pin:nth-child(3) .pin__icon {
  813. -webkit-transition-delay: 0.1s;
  814. transition-delay: 0.1s;
  815. }
  816. .pin:nth-child(4) .pin__icon {
  817. -webkit-transition-delay: 0.15s;
  818. transition-delay: 0.15s;
  819. }
  820. .pin:nth-child(5) .pin__icon {
  821. -webkit-transition-delay: 0.2s;
  822. transition-delay: 0.2s;
  823. }
  824. .pin:nth-child(6) .pin__icon {
  825. -webkit-transition-delay: 0.25s;
  826. transition-delay: 0.25s;
  827. }
  828. .pin:nth-child(7) .pin__icon {
  829. -webkit-transition-delay: 0.3s;
  830. transition-delay: 0.3s;
  831. }
  832. .pin:nth-child(8) .pin__icon {
  833. -webkit-transition-delay: 0.35s;
  834. transition-delay: 0.35s;
  835. }
  836. .pin:nth-child(9) .pin__icon {
  837. -webkit-transition-delay: 0.4s;
  838. transition-delay: 0.4s;
  839. }
  840.  
  841. .pin[data-category='1'] .icon--pin {
  842. fill: #7cbf7f;
  843. }
  844. .pin[data-category='2'] .icon--pin {
  845. fill: #6584c7;
  846. }
  847. .pin[data-category='3'] .icon--pin {
  848. fill: #dc4b7c;
  849. }
  850. .pin[data-category='4'] .icon--pin {
  851. fill: #ff5733;
  852. }
  853. .pin[data-category='5'] .icon--pin {
  854. fill: red;
  855. }
  856.  
  857. .pin--active .icon--pin {
  858. stroke: #515158;
  859. stroke-width: 15px;
  860. }
  861.  
  862. .icon--pin {
  863. width: 100%;
  864. height: 100%;
  865. }
  866.  
  867. .icon--logo {
  868. position: absolute;
  869. top: 11%;
  870. left: 25%;
  871. width: 50%;
  872. height: 50%;
  873. fill: white;
  874. fill-opacity: 0.6;
  875. -webkit-transition: fill-opacity 0.3s;
  876. transition: fill-opacity 0.3s;
  877. }
  878.  
  879. .pin--active .icon--logo,
  880. .pin:hover .icon--logo {
  881. fill-opacity: 1;
  882. }
  883.  
  884. /* Pins for floor 1 */
  885. .pin--1-1 { top: 25vmin; left: 65vmin; }
  886. .pin--1-2 { top: 45vmin; left: 3vmin; }
  887. .pin--1-3 { top: 44vmin; left: 72vmin; }
  888. .pin--1-4 { top: 38vmin; left: 79vmin; }
  889. .pin--1-5 { top: 45vmin; left: 49vmin; }
  890. .pin--1-6 { top: 33vmin; left: 72vmin; }
  891. .pin--1-7 { top: 30vmin; left: 30vmin; }
  892. .pin--1-8 { top: 60vmin; left: 70vmin; }
  893. .pin--1-9 { top: 10vmin; left: 30vmin; }
  894.  
  895. /* Pins for floor 2 */
  896. .pin--2-1 { top: 7vmin; left: 22vmin; }
  897. .pin--2-2 { top: 39vmin; left: 5vmin; }
  898. .pin--2-3 { top: 19vmin; left: 84vmin; }
  899. .pin--2-4 { top: 40vmin; left: 80vmin; }
  900. .pin--2-5 { top: 14vmin; left: 50vmin; }
  901. .pin--2-6 { top: 60vmin; left: 15vmin; }
  902. .pin--2-7 { top: 34vmin; left: 37vmin; }
  903. .pin--2-8 { top: 52vmin; left: 74vmin; }
  904.  
  905. /* Pins for floor 3 */
  906. .pin--3-1 { top: 17vmin; left: 15vmin; }
  907. .pin--3-2 { top: 42vmin; left: 5vmin; }
  908. .pin--3-3 { top: 19vmin; left: 85vmin; }
  909. .pin--3-4 { top: 61vmin; left: 57vmin; }
  910. .pin--3-5 { top: 58vmin; left: 25vmin; }
  911. .pin--3-6 { top: 30vmin; left: 57vmin; }
  912. .pin--3-7 { top: 32vmin; left: 37vmin; }
  913.  
  914. /* Pins for floor 4 */
  915. .pin--4-1 { top: 55vmin; left: 21vmin; }
  916. .pin--4-2 { top: 18vmin; left: 20vmin; }
  917. .pin--4-3 { top: 21vmin; left: 88vmin; }
  918. .pin--4-4 { top: 52vmin; left: 74vmin; }
  919. .pin--4-5 { top: 33vmin; left: 38vmin; }
  920. .pin--4-6 { top: 39vmin; left: 56vmin; }
  921. .pin--4-7 { top: 58vmin; left: 10vmin; }
  922.  
  923. /* Mobile compatability */
  924. .open-search,
  925. .close-search {
  926. display: none;
  927. }
  928.  
  929. /* 65.625 /// 40.625 */
  930. @media screen and (max-width: 1000px), screen and (max-height: 500px) {
  931. .main {
  932. width: 100vw;
  933. }
  934. .spaces-list,
  935. .search {
  936. width: 100vw;
  937. right: 100%;
  938. left: auto;
  939. }
  940. .spaces-list--open,
  941. .spaces-list--open .search {
  942. right: 0;
  943. }
  944. .open-search,
  945. .close-search {
  946. position: absolute;
  947. display: block;
  948. top: 0;
  949. right: 0;
  950. z-index: 1000;
  951. }
  952. .mallnav {
  953. top: 4em;
  954. }
  955. .container {
  956. overflow: hidden;
  957. }
  958. .container--overflow {
  959. overflow: auto;
  960. }
  961. .content__item {
  962. overflow: auto;
  963. }
  964. .codrops-header {
  965. padding-right: 4em;
  966. text-align: left;
  967. }
  968. }
  969.  
  970. /* POPUP */
  971.  
  972. h1.pop {
  973. font-size: 3em;
  974. font-weight: 200;
  975. margin: 0.5em 0 0.2em 0;
  976. }
  977.  
  978. p.pop {
  979. margin: 1.5em 0;
  980. color: #888;
  981. }
  982.  
  983. .thumbnail {
  984. max-width: 40%;
  985. }
  986.  
  987. .italic { font-style: italic; }
  988. .small { font-size: 0.8em; }
  989.  
  990. /** LIGHTBOX MARKUP **/
  991.  
  992. .lightbox {
  993. /** Default lightbox to hidden */
  994. display: none;
  995.  
  996. /** Position and style */
  997. position: fixed;
  998. z-index: 999;
  999. width: 100%;
  1000. height: 100%;
  1001. text-align: center;
  1002. top: 0;
  1003. left: -10.5%;
  1004. background: rgba(0,0,0,0.8);
  1005. }
  1006.  
  1007. .lightbox img {
  1008. /** Pad the lightbox image */
  1009. max-width: 1000%;
  1010. max-height: 1000%;
  1011. margin-top: 15%;
  1012. }
  1013.  
  1014. .lightbox:target {
  1015. /** Remove default browser outline */
  1016. outline: none;
  1017.  
  1018. /** Unhide lightbox **/
  1019. display: block;
  1020. }
  1021.  
  1022.  
  1023. .list__link {
  1024. color: #929292;
  1025. }
  1026.  
  1027. .list__link:hover {
  1028. color: #000000;
  1029. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!