location-view.component.scss 1.85 KB
Newer Older
mdsecurity's avatar
mdsecurity committed
1
//card
mdsecurity's avatar
mdsecurity committed
2
$card-spacing: .5rem;
mdsecurity's avatar
mdsecurity committed
3 4
$card-width: 15rem;
$card-height: 20rem;
mdsecurity's avatar
mdsecurity committed
5 6 7 8
$card-border-radius:0.25rem;
$card-border:1px solid rgba(0, 0, 0, 0.125);

//picture height
mdsecurity's avatar
mdsecurity committed
9
$card-background-height: 8.5rem;
mdsecurity's avatar
mdsecurity committed
10

mdsecurity's avatar
mdsecurity committed
11
//card circle pictuer
mdsecurity's avatar
mdsecurity committed
12
$card-circle-picture-diameter:7rem;
mdsecurity's avatar
mdsecurity committed
13

mdsecurity's avatar
mdsecurity committed
14
@import '../../styles.scss';
mdsecurity's avatar
mdsecurity committed
15

mdsecurity's avatar
mdsecurity committed
16 17 18 19 20 21 22 23 24 25 26 27 28
.app-container {
   @extend .container;
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  height: 100%;
  padding-right: 0;
  padding-left: 0;
  margin-right: 0;
  margin-left: 0;
  display: flex;
}

mdsecurity's avatar
mdsecurity committed
29 30 31 32 33 34 35 36
.location-card {
  width: $card-width;
  height: $card-height;
  margin: $card-spacing;
  padding: 0px;
  border-radius: $card-border-radius;
  border: 0;
  overflow: hidden;
mdsecurity's avatar
mdsecurity committed
37 38 39 40
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

mdsecurity's avatar
mdsecurity committed
41
.location-card:hover {
mdsecurity's avatar
mdsecurity committed
42 43 44
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

mdsecurity's avatar
mdsecurity committed
45 46 47 48 49 50 51 52 53 54 55
.location-background-picture {
  height: $card-background-height;
  width: 100%;
  margin-bottom:$card-circle-picture-diameter/2;
}

.location-circle-picture {
  position: absolute;
  right:($card-width/2) - ($card-circle-picture-diameter/2);
  top:$card-background-height - ($card-circle-picture-diameter/2);
  border-radius:50%;
mdsecurity's avatar
mdsecurity committed
56
  border:5px solid rgba(255, 255, 255, 1);
mdsecurity's avatar
mdsecurity committed
57 58 59
  box-shadow: 0 0 1px white;
  height: $card-circle-picture-diameter;
  width: $card-circle-picture-diameter;
mdsecurity's avatar
mdsecurity committed
60 61 62 63 64
}

.sidebar {
  height: 100%;
  width: 25%;
mdsecurity's avatar
mdsecurity committed
65
  background-color: #28282B;
mdsecurity's avatar
mdsecurity committed
66 67 68 69 70 71 72
  transition:all .5s cubic-bezier(0.55, 0, 0.1, 1);
}

.main-content {
  width:75%;
  height:100%;
  display:flex;
mdsecurity's avatar
mdsecurity committed
73 74 75
  background: center center no-repeat scroll #f5f5ef;
  background-image: url('../assets/clock.png');
  background-repeat: repeat;
mdsecurity's avatar
mdsecurity committed
76 77 78 79 80 81 82 83
}

@mixin transition($transition...) {
    -moz-transition:    $transition;
    -o-transition:      $transition;
    -webkit-transition: $transition;
    transition:         $transition;
}