blocks.scss 4.97 KB
Newer Older
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
1 2
.centered-light-block {
  text-align: center;
3
  color: $gl-text-color;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
4 5 6 7 8 9
  margin: 20px;
}

.nothing-here-block {
  text-align: center;
  padding: 20px;
10
  color: $gl-text-color;
11
  font-weight: $gl-font-weight-normal;
12
  font-size: 14px;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
13
  line-height: 36px;
14

Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
15
  &.diff-collapsed {
16
    padding: 5px;
17

18 19
    .click-to-expand {
      cursor: pointer;
20
    }
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
21
  }
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
22
}
23

Annabel Dunstone's avatar
Annabel Dunstone committed
24
.row-content-block {
25
  margin-top: 0;
26
  background-color: $gray-light;
27
  padding: $gl-padding;
28
  margin-bottom: 0;
29 30
  border-top: 1px solid $white-dark;
  border-bottom: 1px solid $white-dark;
31
  color: $gl-text-color;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
32

33 34 35 36
  &.oneline-block {
    line-height: 42px;
  }

37
  &.white {
38
    background-color: $white-light;
39 40
  }

41 42 43 44
  &.top-block {
    border-top: none;
  }

45 46 47 48 49
  &.middle-block {
    margin-top: 0;
    margin-bottom: 0;
  }

50 51 52 53 54
  &.clear-block {
    margin-bottom: $gl-padding - 1px;
    padding-bottom: $gl-padding;
  }

55 56 57 58 59
  &.second-block {
    margin-top: -1px;
    margin-bottom: 0;
  }

60 61
  &.footer-block {
    margin-top: 0;
62
    border-bottom: none;
63 64 65
    margin-bottom: -$gl-padding;
  }

66 67 68 69 70
  &.content-component-block {
    padding: 11px 0;
    background-color: $white-light;
  }

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
71 72 73
  .title {
    color: $gl-text-color;
  }
74 75

  .oneline {
76
    line-height: 35px;
77
  }
78 79 80 81

  > p:last-child {
    margin-bottom: 0;
  }
82 83

  .block-controls {
84
    display: -webkit-flex;
85
    display: flex;
86
    -webkit-justify-content: flex-end;
87
    justify-content: flex-end;
88
    -webkit-flex: 1;
89
    flex: 1;
90 91 92 93 94 95

    .control {
      float: left;
      margin-left: 10px;
    }
  }
Annabel Dunstone's avatar
Annabel Dunstone committed
96 97 98 99 100

  &.build-content {
    background-color: $white-light;
    border-top: none;
  }
101 102 103 104

  &.top-block .container-fluid {
    background-color: inherit;
  }
105
}
106

107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122
.sub-header-block {
  background-color: $white-light;
  border-bottom: 1px solid $white-dark;
  padding: 11px 0;
  margin-bottom: 11px;

  .oneline {
    line-height: 35px;
  }

  &.no-bottom-space {
    border-bottom: 0;
    margin-bottom: 0;
  }
}

123 124
.cover-block {
  text-align: center;
125
  background: $gray-light;
126
  padding-top: 44px;
127 128 129
  position: relative;

  .avatar-holder {
130 131
    .avatar,
    .identicon {
132 133 134 135 136
      margin: 0 auto;
      float: none;
    }

    .identicon {
Clement Ho's avatar
Clement Ho committed
137
      border-radius: 50%;
138 139 140 141
    }
  }

  .cover-title {
142
    color: $gl-text-color;
143
    font-size: 23px;
Felipe Artur's avatar
Felipe Artur committed
144 145

    h1 {
146
      color: $gl-text-color;
Felipe Artur's avatar
Felipe Artur committed
147 148 149 150 151 152 153 154 155 156 157 158 159
      margin-bottom: 6px;
      font-size: 23px;
    }

    .visibility-icon {
      display: inline-block;
      margin-left: 5px;
      font-size: 18px;
      color: $gray;
    }

    p {
      padding: 0 $gl-padding;
160
      color: $gl-text-color;
Felipe Artur's avatar
Felipe Artur committed
161
    }
162 163 164 165
  }

  .cover-desc {
    color: $gl-text-color;
166 167 168 169

    &.username:last-child {
      padding-bottom: $gl-padding;
    }
170 171 172 173 174 175
  }

  .cover-controls {
    position: absolute;
    top: 10px;
    right: 10px;
176 177 178 179 180

    &.left {
      left: 10px;
      right: auto;
    }
181
  }
182 183 184 185 186 187

  &.groups-cover-block {
    background: $white-light;
    border-bottom: 1px solid $border-color;
    text-align: left;
    padding: 24px 0;
188 189

    .group-info {
190 191 192 193
      .cover-title {
        margin-top: 9px;
      }

194 195 196 197 198 199 200 201 202 203 204 205 206
      p {
        margin-bottom: 0;
      }
    }

    @media (max-width: $screen-xs-max) {
      text-align: center;

      .avatar {
        float: none;
      }
    }
  }
207

tauriedavis's avatar
tauriedavis committed
208 209 210
  &.user-cover-block {
    padding: 24px 0 0;
  }
211 212

  .group-info {
213

214 215
    h1 {
      display: inline;
216
      font-weight: $gl-font-weight-normal;
217
      font-size: 24px;
218
      color: $gl-text-color;
219
    }
220
  }
221
}
222 223 224 225

.block-connector {
  margin-top: -1px;
}
226 227 228 229

.nav-block {
  .controls {
    float: right;
230
    margin-top: 8px;
231
    padding-bottom: 8px;
232 233
  }
}
234 235 236

.content-block {
  padding: $gl-padding 0;
237
  border-bottom: 1px solid $white-dark;
238 239

  &.oneline-block {
240 241 242 243 244
    line-height: 36px;
  }

  > .controls {
    float: right;
245
  }
246 247 248 249

  .new-branch {
    margin-top: 3px;
  }
250
}
Phil Hughes's avatar
Phil Hughes committed
251 252 253 254

.content-block-small {
  padding: 10px 0;
}
255

256
.landing {
257
  margin: $gl-padding auto;
258 259 260 261 262
  overflow: hidden;
  display: flex;
  position: relative;
  border: 1px solid $blue-300;
  border-radius: $border-radius-default;
263
  background-color: $blue-50;
264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312
  justify-content: center;

  .dismiss-button {
    position: absolute;
    right: 6px;
    top: 6px;
    cursor: pointer;
    color: $blue-300;
    z-index: 1;
    border: none;
    background-color: transparent;

    &:hover,
    &:focus {
      border: none;
      color: $blue-400;
    }
  }

  .svg-container {
    align-self: center;
  }

  .inner-content {
    text-align: left;
    white-space: nowrap;

    h4 {
      color: $gl-text-color;
      font-size: 17px;
    }

    p {
      color: $gl-text-color;
      margin-bottom: $gl-padding;
    }
  }

  @media (max-width: $screen-sm-min) {
    flex-direction: column;

    .inner-content {
      white-space: normal;
      padding: 0 28px;
      text-align: center;
    }
  }
}

313
.empty-state {
314
  margin: 5% auto 0;
315 316 317 318 319 320 321

  .text-content {
    max-width: 460px;
    margin: 0 auto;
    padding: $gl-padding;
  }

322 323 324 325
  .emoji-icon {
    display: inline-block;
  }

326
  .btn {
327
    margin: $btn-side-margin 5px;
328

329
    @media(max-width: $screen-xs-max) {
330 331 332 333
      width: 100%;
    }
  }
}
334 335

.flex-container-block {
336
  display: -webkit-flex;
337 338
  display: flex;
}