summaryrefslogtreecommitdiff
path: root/styles/_sass/components/level.sass
blob: 608f291e758e69267bfe44f502b48ddb421a353b (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
$level-item-spacing: ($block-spacing / 2) !default

.level
  @extend %block
  align-items: center
  justify-content: space-between
  code
    border-radius: $radius
  img
    display: inline-block
    vertical-align: top
  // Modifiers
  &.is-mobile
    display: flex
    .level-left,
    .level-right
      display: flex
    .level-left + .level-right
      margin-top: 0
    .level-item
      &:not(:last-child)
        margin-bottom: 0
        margin-right: $level-item-spacing
      &:not(.is-narrow)
        flex-grow: 1
  // Responsiveness
  +tablet
    display: flex
    & > .level-item
      &:not(.is-narrow)
        flex-grow: 1

.level-item
  align-items: center
  display: flex
  flex-basis: auto
  flex-grow: 0
  flex-shrink: 0
  justify-content: center
  .title,
  .subtitle
    margin-bottom: 0
  // Responsiveness
  +mobile
    &:not(:last-child)
      margin-bottom: $level-item-spacing

.level-left,
.level-right
  flex-basis: auto
  flex-grow: 0
  flex-shrink: 0
  .level-item
    // Modifiers
    &.is-flexible
      flex-grow: 1
    // Responsiveness
    +tablet
      &:not(:last-child)
        margin-right: $level-item-spacing

.level-left
  align-items: center
  justify-content: flex-start
  // Responsiveness
  +mobile
    & + .level-right
      margin-top: 1.5rem
  +tablet
    display: flex

.level-right
  align-items: center
  justify-content: flex-end
  // Responsiveness
  +tablet
    display: flex