css-reference/sass/property.sass at master · jgthms/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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
.properties
  padding-bottom: 3rem
  position: relative

.property
  background-color: #fff
  background-image: linear-gradient($primary-light, #fff)
  background-repeat: no-repeat
  background-size: 100% 4rem
  border-top: 2px solid $primary
  overflow: hidden
  padding-bottom: 3rem
  padding-top: 2rem

.property--shorthand
  background-image: linear-gradient($purple-light, #fff)
  border-top-color: $purple

.property-links
  align-items: center
  display: flex
  font-size: 0.7rem
  justify-content: flex-end
  opacity: 0.5
  transition-duration: $speed
  transition-property: opacity
  a
    border-bottom: 1px solid transparent
    color: $text-light
    margin-left: 1em
    &:before
      left: auto
      right: 0
      transform: translateX(0) translateY(0)
      white-space: nowrap
    &:hover
      border-bottom-color: $link
      color: $link
      &:before
        transform: translateX(0) translateY(-4px)
  strong
    text-transform: capitalize
  &:hover
    opacity: 1
  .property-collections
    a
      margin-left: 0.25em

.property-name
  font-size: 1.2rem
  font-weight: $weight-bold
  a
    border-bottom: 1px solid transparent
    color: $text-strong
    display: inline-block
    position: relative
    vertical-align: top
    span
      color: $border
      padding-right: 0.6em
      position: absolute
      right: 100%
      top: 0
    &:hover
      border-bottom-color: $link
      color: $link
      span
        color: $link

.property-description
  code
    background: $background
    border-radius: 2px
    color: $text-strong
    padding: 0.2em 0.4em
  p
    margin-top: 0.5em
  .shorthand
    padding: 0
    a
      background: $background
      border-radius: 2px
      padding: 0.2em 0.4em
      &:hover
        background: $link
        color: $link-invert

.property-animation
  display: flex
  margin-top: 1rem
  .button
    background: $green
    color: #fff
    font-size: 0.8rem
    &:before
      content: "▶ Play animations"
    &:first-letter
      margin-right: 0.25em
    &.is-playing
      background: $red
      &:before
        content: "￭ Stop"

+mobile
  .property-header
    padding-left: 2rem
    padding-right: 2rem
  .property-links
    flex-wrap: wrap
    margin-bottom: 0.5rem

+desktop
  // .property
  //   margin-bottom: 3rem
  //   margin-left: auto
  //   margin-right: auto
  //   width: 500px
  .property-header
    padding-left: 3rem
    padding-right: 3rem
  .property-links
    float: right
    padding: 0.25rem 0

// +from(1000px)
//   .property
//     width: 700px

// +from(1200px)
//   .property
//     width: 900px

// +from(1400px)
//   .property
//     width: 1100px

// +from(1600px)
//   .property
//     width: 1300px