facilityCard.scss 3.33 KB
Newer Older
Mattias J Duffy's avatar
Mattias J Duffy committed
1
2
@import '../_variables.scss';

3
4
.fc-root {
  width: 250px;
5
  border-radius: 5px !important;
6
7
8
9
  position: relative;
}

.fc-card-content {
10
  padding: 8px 4px !important;
11
12
13
14
15
16
17
18
19
20
}

.fc-small-grid-container-spacing {
  margin: -2px -8px !important;
}

.fc-small-grid-item-spacing {
  padding: 3px 8px !important;
}

21
22
23
24
.fc-ellipsis-container {
  width: 100%;
}

25
26
27
.fc-media {
  flex: 1;
  height: 115px;
28
  border-radius: 5px 5px 0 0 !important;
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
}

.fc-logo-container {
  width: 100px;
  height: 100px;
  margin: auto;
  margin-top: -60px;
  border-radius: 90px;
  border: 5px solid white;
}

.fc-logo {
  width: 100px;
  height: 100px;
  margin: auto;
  border-radius: 50%;
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.fc-title {
  font-weight: bold !important;
}

52
.fc-extra-info {
53
54
55
56
57
  display: flex;
  align-items: center;
  max-width: 50%;
}

58
59
60
61
.fc-extra-info-wrapper {
  padding-top: 8px;
}

62
63
64
65
66
67
.fc-two-line-ellipsis {
  position: relative;
  line-height: 1em;
  max-height: 2em;
  overflow: hidden;
}
68

Andrew Hrdy's avatar
Andrew Hrdy committed
69
.fc-toggle-map-btn-container {
70
71
72
  display: none !important;
}

73
74
75
76
77
78
79
80
81
82
83
84
85
86
@supports (-webkit-line-clamp: 2) {
  .fc-two-line-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box !important;
    /* autoprefixer: off */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
  }
}

.fc-one-line-ellipsis {
  white-space: nowrap;
87
  text-overflow: ellipsis;
88
  overflow: hidden;
89
90
}

91
92
//Between lg and xl
@media screen and (min-width: map-get($breakpoints, lg)) and (max-width: map-get($breakpoints, xl)) {
93
  .fc-root {
94
    width: 250px * $fc-lg-scale;
95
96
97
98
99
100
101
102
    height: 230px;
  }

  .fc-small-grid-item-spacing {
    padding: 0 8px !important;
  }

  .fc-media {
103
    height: 115px * $fc-lg-scale;
104
105
106
  }

  .fc-logo-container {
107
108
109
    width: 100px * $fc-lg-scale;
    height: 100px * $fc-lg-scale;
    margin-top: -60px * $fc-lg-scale;
110
    border-radius: 50%;
111
    border: 5px * $fc-lg-scale solid white;
112
113
114
  }

  .fc-logo {
115
116
    width: 100px * $fc-lg-scale;
    height: 100px * $fc-lg-scale;
117
118
  }

119
  .fc-extra-info {
120
121
    font-size: 11px;
  }
122

123
124
125
126
  .fc-card-map-marker-icon {
    height: 20px !important;
    width: 20px !important;
  }
127
128
}

129
130
//Under lg
@media screen and (max-width: map-get($breakpoints, lg)) {
131
132
133
134
135
136
  .fc-root {
    &.fc-selected {
      .fc-one-line-ellipsis {
        white-space: normal;
        overflow: inherit;
      }
137

Andrew Hrdy's avatar
Andrew Hrdy committed
138
      .fc-toggle-map-btn-container {
139
        display: block !important;
Andrew Hrdy's avatar
Andrew Hrdy committed
140
141
142
      }

      .fc-toggle-map-btn {
143
144
        width: 100% !important;
      }
Andrew Hrdy's avatar
Andrew Hrdy committed
145

146
147
      .fc-extra-info {
        max-width: 100% ;
Andrew Hrdy's avatar
Andrew Hrdy committed
148
149
        width: 100%;
        justify-content: center;
150
        padding: 4px 8px !important;
Andrew Hrdy's avatar
Andrew Hrdy committed
151
152
      }

153
154
      .fc-card-content {
        padding-bottom: 0 !important;
Andrew Hrdy's avatar
Andrew Hrdy committed
155
      }
156
157
    }
  }
158

159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
  .fc-small-grid-item-spacing {
    padding: 0 8px !important;
  }

  .fc-media {
    height: 115px * $fc-sm-scale;
  }

  .fc-logo-container {
    width: 100px * $fc-sm-scale;
    height: 100px * $fc-sm-scale;
    margin-top: -60px * $fc-sm-scale;
    border-radius: 50%;
    border: 5px * $fc-sm-scale solid white;
  }

  .fc-logo {
    width: 100px * $fc-sm-scale;
    height: 100px * $fc-sm-scale;
  }

  .fc-extra-info {
    font-size: 11px;
  }

  .fc-card-map-marker-icon {
    height: 20px !important;
    width: 20px !important;
  }

189
190
191
  .fc-map-dialog {
    width: 100% !important;
  }
192
}