css-reference/sass/footer.sass at master · digitalforus/css-reference · GitHub

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
.footer
  background: #fff
  bottom: 0
  box-shadow: 0 0 1rem rgba(#000, 0.2)
  left: 0
  position: fixed
  right: 0

.footer-title
  align-items: center
  color: $text-light
  display: none
  line-height: 1.2
  padding: 0 1rem
  small
    font-size: 0.8em
    margin-left: 0.5em
  a
    border-radius: 2px
    margin-left: -4px
    padding: 2px 4px
    &:hover
      background: $alpha
      color: $alpha-invert

.footer-facebook,
.footer-github
  align-items: center
  display: none
  flex-shrink: 0
  justify-content: flex-end
  iframe
    height: 20px

.footer-share
  align-items: center
  display: flex
  position: relative

.footer-share--contribute
  display: none

.footer-share-label
  margin-right: 0.25rem

.share-button
  align-items: center
  display: flex
  height: 2rem
  justify-content: center
  position: relative
  width: 2rem
  &:before
    +overlay
    background: rgba(black, 0.14)
    border-radius: 5px
    content: ""
    display: block
    height: 100%
    opacity: 0
    transform: scale(1.2)
    transform-origin: center center
    transition-duration: $speed
    transition-property: opacity, transform
    width: 100%
  svg
    height: 1rem
    position: relative
    width: 1rem
  &:hover:before
    opacity: 1
    transform: scale(1)

.footer-share-nav
  align-items: center
  bottom: 0
  display: flex
  font-weight: $weight-bold
  padding: 0 1rem
  position: absolute
  right: 0
  top: 0

+mobile
  .footer-share--social
    padding: 0.5rem 1rem

+desktop
  .footer
    align-items: stretch
    display: flex
    font-size: 0.8rem
    height: 3rem
    left: $menu-width
  .footer-share,
  .footer-facebook,
  .footer-github
    display: flex
  .footer-title
    display: none
    padding: 0.25rem 1rem
  .footer-share
    border-left: 1px solid $border
    flex-grow: 1
    flex-shrink: 1
    padding: 0.25rem 1rem
  .footer-share-nav
    display: none

+from(1000px)
  .footer-title
    display: flex