SHARE
TWEET

Untitled

a guest Mar 21st, 2017 83 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. @import '~klsg/scss/utilities';
  2.  
  3. .placeholder-card {
  4.   pointer-events: none;
  5.  
  6.   a:hover,
  7.   a:focus {
  8.     text-decoration: none;
  9.   }
  10.  
  11.   .text {
  12.     opacity: 0.2;
  13.     word-wrap: break-word;
  14.   }
  15.  
  16.   .card__image {
  17.     position: relative;
  18.     background-color: $kl-lighter-gray;
  19.     color: inherit;
  20.     text-align: center;
  21.     padding: 15px;
  22.   }
  23.  
  24.   .card__heading {
  25.     font-size: 1.05rem;
  26.   }
  27. }
  28.  
  29. .card__likeness {
  30.   display: none;
  31. }
  32.  
  33. .leaflet-control-zoom {
  34.   position: relative;
  35.   top: 45px;
  36. }
  37.  
  38. .tooltip {
  39.   pointer-events: none;
  40. }
  41.  
  42. .page-footer {
  43.   position: absolute;
  44. }
  45.  
  46. .add-card {
  47.  
  48.   &__content {
  49.     min-height: 387px;
  50.     padding: 15px;
  51.     display: flex;
  52.     flex-direction: column;
  53.     flex-basis: 100%;
  54.     justify-content: center;
  55.     align-content: space-around;
  56.     text-align: center;
  57.     background-color: $kl-background-gray;
  58.   }
  59.  
  60.   .condos-input {
  61.     padding: 25px 0 70px 0;
  62.   }
  63. }
  64.  
  65. .favourites {
  66.   display: flex;
  67.  
  68.   .cards--fluid {
  69.     justify-content: flex-start;
  70.     padding-right: 15px;
  71.   }
  72.  
  73.   .card--fluid {
  74.     max-width: 50%;
  75.     padding: 0 0 15px 15px;
  76.     margin: 0;
  77.   }
  78.  
  79.   &__controls {
  80.     display: none;
  81.     width: 100%;
  82.     height: 40px;
  83.     line-height: 40px;
  84.     padding-top: 1px;
  85.     color: $kl-white;
  86.     font-weight: bold;
  87.   }
  88.  
  89.   &__control {
  90.     flex: 1;
  91.     text-align: center;
  92.     cursor: pointer;
  93.     background-color: $kl-dark-blue;
  94.     border-bottom: 4px solid $kl-dark-blue;
  95.  
  96.     &.is-active {
  97.       border-bottom-color: $kl-light-blue;
  98.     }
  99.  
  100.     &--icon {
  101.       height: 22px;
  102.       width: 22px;
  103.       vertical-align: top;
  104.       display: inline-block;
  105.       margin: 5px 10px 0 0;
  106.     }
  107.  
  108.     &--icon-list {
  109.       margin: 7px 10px 0 0;
  110.     }
  111.   }
  112.  
  113.   &__cards {
  114.     z-index: 9;
  115.     position: relative;
  116.     max-width: 720px;
  117.     margin: auto;
  118.     min-height: 100vh;
  119.   }
  120.  
  121.   &__separator {
  122.     display: flex;
  123.     justify-content: space-between;
  124.     background-color: $kl-background-gray;
  125.     margin: 0 0 10px 15px;
  126.     padding: 10px 15px;
  127.     font-size: 14px;
  128.     .btn {
  129.       height: 34px;
  130.       color: $kl-dark-gray;
  131.     }
  132.   }
  133.  
  134.   &__separator-title {
  135.     font-size: 22px;
  136.     font-weight: 700;
  137.   }
  138.  
  139.   &__separator-search {
  140.     width: 250px;
  141.     text-align: right;
  142.   }
  143.  
  144.   &__block {
  145.     margin-top: 30px;
  146.     width: 100%;
  147.   }
  148.  
  149.   &__placeholder {
  150.     text-align: center;
  151.     padding: 20px 0 40px;
  152.   }
  153.  
  154.   &__map {
  155.     position: relative;
  156.     flex: 1;
  157.     min-width: 390px;
  158.     width: 100%;
  159.     border-left: 2px solid $kl-light-gray;
  160.  
  161.     .placeholder {
  162.       width: 100%;
  163.       height: 100vh;
  164.       padding-left: 50%;
  165.       background-color: $mapbox-light-water;
  166.  
  167.       .spinner--wrapper {
  168.         position: fixed;
  169.       }
  170.     }
  171.   }
  172.   &__error {
  173.     background-color: $kl-white !important;
  174.   }
  175. }
  176.  
  177. @include media-breakpoint-down(md) {
  178.   .favourites {
  179.     display: block;
  180.  
  181.     &__controls {
  182.       display: flex;
  183.     }
  184.  
  185.     &__cards {
  186.  
  187.       &.is-hide {
  188.         display: none !important;
  189.       }
  190.     }
  191.  
  192.     &__map {
  193.       min-width: 0;
  194.       width: 100vw;
  195.  
  196.       &.is-hide {
  197.         /* For markers initialization we have to initialize map */
  198.         opacity: 0;
  199.         position: absolute;
  200.         top: -1111111px;
  201.       }
  202.     }
  203.   }
  204.  
  205.   .leaflet-control-zoom {
  206.     top: 0;
  207.   }
  208.  
  209.   .page-footer {
  210.     position: relative;
  211.   }
  212. }
  213.  
  214. @include media-breakpoint-down(xs) {
  215.   .favourites {
  216.     &__separator {
  217.       flex-direction: column;
  218.       align-items: flex-end;
  219.     }
  220.     &__separator-title {
  221.       position: absolute;
  222.       align-self: flex-start;
  223.     }
  224.     &__separator-search {
  225.       padding-top: 10px;
  226.     }
  227.     .card--fluid {
  228.       max-width: 100%;
  229.       justify-content: center;
  230.     }
  231.   }
  232. }
RAW Paste Data
Top