filteredListPage.less 2.34 KB
Newer Older
1
2
3
4
5
@import './colors.less';

.filtered-list {
  min-height: 100%;
  display: grid;
6
  grid-template-columns: 19.25em 1fr auto;
7
8

  @media @tablet {
9
    grid-template-columns: 17em 1fr;
10
11
12
13
14
15
16
17
18
  }

  @media @mobile {
    display: block;
    padding: 0;
  }

  &.mobile-show-filter {
    @media @mobile {
Cliff Li's avatar
Cliff Li committed
19
      div.filter {
20
        display: grid;
21
22
23
24
25
      }
    }
  }

  .action-button {
26
    position: relative;
27
28
29
30
31
32
    display: none;
    cursor: pointer;
    padding: .5em;
    text-align: center;
    background-color: @color-grey;
    line-height: 1.5em;
Sandro Lutz's avatar
Sandro Lutz committed
33
    height: 2.5em;
34
35
36
37
38
39
40
41
42
43
    z-index: 100;

    @media @mobile {
      display: block;
    }

    &:hover {
      color: @color-red;
    }

44
45
46
    > div {
      top: -8px;
      padding-right: 1em;
47
48
    }

49
50
51
52
53
54
55
56
57
58
    img {
      height: 100%;
      margin-right: .5em;
    }

    span {
      vertical-align: super;
    }
  }

59
  .filter {
60
    position: sticky;
61
62
63
    display: grid;
    align-content: start;
    grid-gap: 20px;
64
    padding: 1.5em;
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

    @media @mobile {
      display: none;
      border-bottom: 1em solid @color-grey;
      padding: 1em;
    }

    h4 {
      margin: 0;
    }

    form {
      display: grid;
      grid-row: auto auto;
    }

    .check,.drop,.radio {
      display: grid;
      grid-row: auto auto;
      grid-gap: 10px;
    }
  }

  .content {
89
90
    position: relative;
    padding-top: calc(1.5em - 8px);
91
92
93

    @media @mobile {
      border: none;
94
      padding: 1em;
95
      min-height: 40vh;
96
97
    }

98
    .loading {
99
100
101
102
103
104
105
106
107
108
      position: relative;
      width: 100%;
      height: 50vh;

      > * {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
      }
109
110
    }

111
    .empty-list {
112
113
114
115
116
117
118
119
120
121
122
123
124
      position: relative;
      width: 100%;
      height: 50vh;

      > * {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        font-size: 1.2em;
        text-align: center;
        width: calc(100% - 2em);
      }
125
126
    }

127
128
129
130
131
132
    .list_header {
      position: sticky;
      top: 24px;
      z-index: 10;
      background-color: @color-grey;
      border-radius: 4px;
133
134
135
    }
  }

136
137
  .load-more-items {
    position: relative;
138
139
140
141
142
143
144
    width: 100%;
    padding: 1em 0;
    text-align: center;

    &.active {
      cursor: pointer;
    }
Ilya's avatar
Ilya committed
145

146
147
    .spinner {
      display: inline-block;
Ilya's avatar
Ilya committed
148
      position: relative;
149
      top: .5em;
150
151
152
    }
  }
}