css-reference/sass/elements.sass at master · Eikonsphere/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
.box
  border: 2px solid $text
  border-radius: 3px
  position: relative
  &:before
    background: $text
    border-radius: 1px 0 2px 0
    color: #fff
    content: ""
    display: inline-block
    font-size: 0.8em
    padding: 0 6px 2px 4px
    vertical-align: top
  &.is-red
    border-color: $red
    &:before
      background: $red
  &.is-green
    border-color: $green
    &:before
      background: $green
  &.is-plum
    border-color: $plum
    &:before
      background: $plum
  &.is-alpha
    border-color: $alpha
    &:before
      background: $alpha
      color: $alpha-invert

.line
  background: $text
  height: 1px
  position: relative
  &:before
    background: $text
    border-radius: 2px
    color: #fff
    content: "Line"
    display: inline-block
    font-size: 10px
    height: 15px
    line-height: 15px
    margin-top: -6px
    padding: 0 4px
    vertical-align: top
  &.is-red
    background: $red
    &:before
      background: $red

.square
  align-items: center
  background: $border
  border-radius: 3px
  color: $text
  display: flex
  height: 75px
  justify-content: center
  line-height: 1.2
  padding: 0
  text-align: center
  width: 75px
  &.is-plum
    background: $plum
    color: $plum-invert
    &:before
      background: $plum
  &.is-alpha
    background: $alpha
    color: $plum
    &:before
      background: $alpha
  &.is-pink
    background: $pink
    color: #fff
    &:before
      background: $pink

.block
  background: $background
  border-radius: 3px
  color: $text
  display: block
  line-height: 1.2
  padding: 1em
  strong
    color: inherit
  &.is-alpha
    background: $alpha
    color: $plum
  &.is-beta
    background: $beta
    color: $plum
  &.is-pink
    background: $pink
    color: $plum
  &.is-plum
    background: $plum
    color: #fff
  &.is-yellow
    background: $yellow
    color: $plum
  &.is-orange
    background: $orange
    color: $plum
  &.is-green
    background: $green
    color: $plum
  &.is-turquoise
    background: $turquoise
    color: $plum
  &.is-blue
    background: $blue
    color: $plum
  &.is-purple
    background: $purple
    color: $plum
  &.is-red
    background: $red
    color: $plum

.natural,
.actual
  +center
  border-radius: 3px
  line-height: 1.2
  padding: 0.8em 1em

.natural
  border: 2px dotted $red
  color: $red

.actual
  +center
  background: $alpha
  border: 2px solid $alpha
  color: $plum