summaryrefslogtreecommitdiffstats
path: root/afm-client/bower_components/tether/docs/sass/intro.sass
blob: 6088a41c21730129299ed16e544558ac96d1bd02 (plain)
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
@import compass/css3

$scrollableArea: 2000px
$exampleWidth: 400px
$exampleHeight: 180px

*, *:after, *:before
  +box-sizing(border-box)

body
  position: relative

.yellow-box
  width: 100px
  height: 100px
  background-color: #fe8
  pointer-events: none

.green-box
  margin-top: ($exampleHeight - 50px) / 2
  margin-left: ($exampleWidth - 200px) / 2
  width: 200px
  height: 50px
  background-color: #4e9

  .no-green &
    display: none

.scroll-box
  height: 150px
  border: 10px solid #eee
  background: #fbfbfb
  overflow: auto
  position: relative

.scroll-content
  height: $scrollableArea
  width: $scrollableArea
  padding: ($scrollableArea - $exampleHeight)/2 ($scrollableArea - $exampleWidth)/2 + 9

pre.pre-with-output
  margin: 0
  width: 50%
  float: left

  code mark
    background: #b8daff
    color: #000

p, h2, h3
  clear: both

output
  display: block
  position: relative
  width: 50%
  float: right
  margin-bottom: 15px

  &.scroll-page
    .scroll-box
      overflow: hidden

    &:after
      content: "↕ scroll the page ↕"

  &:after
    content: "↕ scroll this area ↕"
    position: absolute
    bottom: 25px
    width: 100%
    text-align: center
    font-size: 16px
    font-variant: small-caps
    color: #777
    opacity: 1
    transition: opacity 0.2s

  &.scrolled:after
    opacity: 0

  &[deactivated], &[activated]
    .scroll-box
      pointer-events: none

    cursor: pointer

    &:after
      position: absolute
      top: 0
      left: 0
      right: 0
      bottom: 0
      opacity: 1
      content: "Click To Show"
      background-color: #AAA
      border-left: 10px solid #EEE
      color: white
      font-size: 24px
      font-variant: normal
      padding-top: 80px

  &[activated]
    &:after
      content: "Click To Hide"

    &.visible-enabled
      &:after
        height: 35px
        padding-top: 5px

.attachment-mark
  position: relative

  &:after
    content: "A"
    width: 10px
    height: 10px
    background-color: red
    display: inline-block

    line-height: 10px
    font-size: 9px
    color: white
    text-align: center

    position: absolute

span.attachment-mark
  &:after
    position: relative
    top: -1px
    margin-right: 1px

.tether-marker-dot
  @extend .attachment-mark

  position: absolute

  &:after
    top: -5px
    left: -5px

@each $type in target, element
  .tether-#{ $type }-marker
    position: absolute

    @each $side in left, top, bottom, right
      div.tether-#{ $type }-attached-#{ $side } &
        #{ $side }: 0

    div.tether-#{ $type }-attached-center &
      left: 50%

.tether-element-attached-middle .tether-element-marker
  top: 50px

.tether-target-attached-middle .tether-target-marker
  top: 25px

.tether-element
  position: relative

  &.tether-pinned-left
    box-shadow: inset 2px 0 0 0 red
  &.tether-pinned-right
    box-shadow: inset -2px 0 0 0 red
  &.tether-pinned-top
    box-shadow: inset 0 2px 0 0 red
  &.tether-pinned-bottom
    box-shadow: inset 0 -2px 0 0 red

.tether-target
  position: relative

.tether-element.tether-out-of-bounds[data-example="hide"]
  display: none

[data-example^="optimizer"]
  &.lang-javascript
    /* This should just be a `code` selector, but sass doesn't allow that with & */
    min-height: 220px

  &.tether-element

    &:before
      margin-top: 26px
      display: block
      text-align: center
      content: "I'm in the body"
      line-height: 1.2
      font-size: 15px
      padding: 4px
      color: #666

  .scroll-box .tether-element:before
    content: "I'm in my scroll parent!"

.tether-element[data-example="scroll-visible"]
  height: 30px

  .tether-marker-dot
    display: none

.hs-doc-content h2.projects-header
  text-align: center
  font-weight: 300

.projects-paragraph
  text-align: center

  a
    +inline-block
    text-align: center
    margin-right: 30px
    color: inherit

    span
      +inline-block
      margin-bottom: 20px
      font-size: 20px
      color: inherit
      font-weight: 300

    img
      display: block
      max-width: 100%
      width: 100px