BigW Consortium Gitlab

todos.scss 4.32 KB
Newer Older
1
/**
2
 * Dashboard Todos
3 4
 *
 */
5

6 7 8 9 10 11 12 13
.todos-list > .todo {
  // workaround because we cannot use border-colapse
  border-top: 1px solid transparent;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;

14
  &:hover {
15 16
    background-color: $row-hover;
    border-color: $row-hover-border;
17 18
    cursor: pointer;
  }
19 20 21 22 23 24 25 26 27 28

  // overwrite border style of .content-list
  &:last-child {
    border-bottom: 1px solid transparent;

    &:hover {
      border-color: $row-hover-border;
    }
  }

29 30
  .todo-avatar,
  .todo-actions {
31
    @include transition(opacity);
32 33 34 35
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
  }

36 37 38 39 40 41 42 43
  .todo-actions {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: column;
    flex-direction: column;
    margin-left: 10px;
44
    min-width: 55px;
45 46 47
  }

  .todo-item {
48 49 50
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    min-width: 0;
51
  }
52

53
  &.todo-pending.done-reversible {
54
    background-color: $white-light;
55

56
    &:hover {
57
      border-color: $white-normal;
58
      background-color: $gray-light;
59
      border-top: 1px solid transparent;
60 61 62 63 64

      .todo-avatar,
      .todo-item {
        opacity: .6;
      }
65
    }
66

67 68 69 70 71 72 73 74
    .todo-avatar,
    .todo-item {
      opacity: .2;
    }

    .btn {
      background-color: $gray-light;
    }
75 76 77
  }
}

78
.todo-item {
79 80
  @include transition(opacity);

81
  .todo-title {
82 83
    display: flex;

84
    > .title-item {
85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
      -webkit-flex: 0 0 auto;
      flex: 0 0 auto;
      margin: 0 2px;

      &:first-child {
        margin-left: 0;
      }

      &:last-child {
        margin-right: 0;
      }
    }

    .todo-label {
      -webkit-flex: 0 1 auto;
      flex: 0 1 auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
Alfredo Sumaran committed
105 106 107 108 109 110
  }

  .status-box {
    margin: 0;
    float: none;
    display: inline-block;
111
    font-weight: $gl-font-weight-normal;
112 113 114
    padding: 0 5px;
    line-height: inherit;
    font-size: 14px;
115 116
  }

117
  .action-name {
118
    font-weight: $gl-font-weight-normal;
119 120
  }

121 122
  .todo-body {
    .todo-note {
123 124
      word-wrap: break-word;

125
      .md {
126
        color: $gl-grayish-blue;
127 128
        font-size: $gl-font-size;

129 130 131 132 133
        .label {
          color: $gl-text-color;
          font-size: inherit;
        }

134
        p {
135
          color: $gl-text-color;
136 137 138
        }
      }

139 140 141 142
      code {
        white-space: pre-wrap;
      }

143
      pre {
144
        border: 0;
145
        background: $gray-light;
146
        border-radius: 0;
147
        color: $todo-body-pre-color;
148 149 150 151
        margin: 0 20px;
        overflow: hidden;
      }

152 153
      .note-image-attach {
        margin-top: 4px;
154
        margin-left: 0;
155 156 157 158
        max-width: 200px;
        float: none;
      }

159 160 161 162 163 164 165
      p:last-child {
        margin-bottom: 0;
      }
    }
  }
}

166 167 168
@media (max-width: $screen-sm-max) {
  .todos-filters {
    .dropdown-menu-toggle {
169 170 171 172 173
      width: 130px;
    }

    .dropdown-menu-toggle-sort {
      width: auto;
174 175 176 177
    }
  }
}

178
@media (max-width: $screen-xs-max) {
179 180 181 182 183 184
  .todo {
    .avatar {
      display: none;
    }
  }

185 186
  .todo-item {
    .todo-title {
187
      flex-flow: row wrap;
188
      margin-bottom: 10px;
189 190 191 192

      .todo-label {
        white-space: normal;
      }
193 194
    }

195
    .todo-body {
196
      margin: 0;
197
      border-left: 2px solid $todo-body-border;
198 199 200
      padding-left: 10px;
    }
  }
201 202 203 204 205 206

  .todos-filters {
    .dropdown-menu-toggle {
      width: 100%;
    }
  }
207
}
Phil Hughes committed
208 209 210 211

.todos-empty {
  display: -webkit-flex;
  display: flex;
Phil Hughes committed
212
  -webkit-flex-direction: column;
Phil Hughes committed
213 214 215 216 217 218
  flex-direction: column;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;

  @media (min-width: $screen-sm-min) {
Phil Hughes committed
219
    -webkit-flex-direction: row;
Phil Hughes committed
220 221 222 223 224 225
    flex-direction: row;
    padding-top: 80px;
  }
}

.todos-empty-content {
Phil Hughes committed
226
  -webkit-align-self: center;
Phil Hughes committed
227 228 229 230 231 232 233 234 235 236 237 238 239
  align-self: center;
  max-width: 480px;
  margin-right: 20px;
}

.todos-empty-hero {
  width: 200px;
  margin-left: auto;
  margin-right: auto;

  @media (min-width: $screen-sm-min) {
    width: 300px;
    margin-right: 0;
Phil Hughes committed
240
    -webkit-order: 2;
Phil Hughes committed
241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264
    order: 2;
  }
}

.todos-all-done {
  padding-top: 20px;

  @media (min-width: $screen-sm-min) {
    padding-top: 50px;
  }

  > svg {
    display: block;
    max-width: 300px;
    margin: 0 auto 20px;
  }

  p {
    max-width: 470px;
    margin-left: auto;
    margin-right: auto;
  }

  a {
265
    font-weight: $gl-font-weight-bold;
Phil Hughes committed
266 267
  }
}
268 269 270 271

.todos-filters {
  @include new-style-dropdown;
}