summaryrefslogtreecommitdiffstats
path: root/afm-client/bower_components/tether/docs/welcome/sass/welcome.sass
blob: 7a7523865dd408e24641d37f635e834fe2aac8d2 (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
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
@import compass/css3

html, body
    height: 100%

body
    margin: 0
    font-family: "proxima-nova", "Helvetica Neue", sans-serif

.button
    display: inline-block
    border: 2px solid #333
    color: #333
    padding: 1em 1.25em
    font-weight: 500
    text-transform: uppercase
    letter-spacing: 3px
    text-decoration: none
    cursor: pointer
    width: 140px
    font-size: .8em
    line-height: 1.3em
    text-align: center

.tether-element.tether-theme-arrows-dark .tether-content
    padding: 1em
    font-size: 1.1em

    .button
        border-color: #fff
        color: #fff
        width: 170px
        pointer-events: all

.mobile-copy
    display: none

    @media (max-width: 568px)
        display: block

.button.dark
    background: #333
    color: #fff

.hero-wrap
    height: 100%
    overflow: hidden

table.showcase
    height: 100%
    width: 100%
    position: relative

    &:after
        content: ""
        display: block
        position: absolute
        left: 0
        right: 0
        bottom: 20px
        margin: auto
        height: 0
        width: 0
        border-width: 18px
        border-style: solid
        border-color: transparent
        border-top-color: rgba(0, 0, 0, 0.2)

    &.no-next-arrow:after
        display: none

    .showcase-inner
        margin: 40px auto 60px
        padding: 10px

        h1
            font-size: 50px
            text-align: center
            font-weight: 300

            @media (max-width: 567px)
                font-size: 40px

        h2
            font-size: 24px
            text-align: center
            font-weight: 300
            margin: 1em 0 1em

            @media (max-width: 567px)
                font-size: 14px

        p
            text-align: center

    &.hero
        text-align: center

        .tether-target-demo
            +inline-block
            border: 2px dotted #000
            margin: 5rem auto
            padding: 5rem

            @media (max-width: 567px)
                padding: 1rem

    &.share
        background: #f3f3f3

    &.projects-showcase .showcase-inner

        .projects-list
            width: 80%
            max-width: 1200px
            margin: 0 auto

            .project
                color: inherit
                text-decoration: none
                position: relative
                width: 50%
                float: left
                text-align: center
                margin-bottom: 2rem

            .os-icon
                width: 8rem
                height: 8rem
                margin-bottom: 1rem
                background-size: 100%

            h1
                font-size: 2.5rem

            p
                font-size: 1.3rem

    &.browser-demo
        +background-image(linear-gradient(top left, #723362 0%, #9d223c 100%))
        background-color: #9d223c
        position: absolute
        top: 100%

        &.fixed
            position: fixed
            top: 0
            bottom: 0
            left: 0
            right: 0
            z-index: 1

            .browser-demo-inner
                +transition(width 2s ease-in-out, height 2s ease-in-out)

            // Sections

            &[data-section="what"]
                box-shadow: 0 0 0 0

            &[data-section="why"]

                .browser-demo-inner
                    width: 70%

            &[data-section="outro"]

                .showcase-inner
                    pointer-events: all

        .showcase-inner
            pointer-events: none
            position: absolute
            left: 10%
            right: 40%
            top: 220px
            bottom: 120px
            margin: 0
            padding: 0

            @media (max-width: 567px)
                bottom: 90px
                top: 180px

        .browser-demo-inner
            height: 100%
            width: 100%

        .section-copy
            +transition(opacity .5s ease-in-out, top .5s ease-in-out)
            +opacity(0)
            position: absolute
            top: 0
            position: absolute
            height: 200px
            color: #fff
            text-align: center
            width: 100%

            &.active
                +opacity(1)
                top: -150px

                @media (max-width: 567px)
                    top: -130px

            h2
                font-size: 40px
                font-weight: bold
                line-height: 1
                margin: 25px 0 15px

                @media (max-width: 567px)
                    font-size: 30px

        .browser-window
            +border-radius(4px)
            background: #fff
            position: relative
            height: 100%
            width: 100%
            max-width: 1200px
            margin: 0 auto

            .browser-titlebar
                position: absolute
                top: 0
                left: 0
                right: 0
                border-bottom: 1px solid #eee
                height: 55px

                .browser-dots
                    padding: 16px

                    b
                        +border-radius(50%)
                        +inline-block
                        width: 10px
                        height: 10px
                        margin-right: 7px
                        background: rgba(0, 0, 0, .1)

            .browser-frame
                position: absolute
                top: 55px
                left: 0
                right: 0
                bottom: 0

                iframe
                    +border-radius(0 0 4px 4px)
                    border: 0
                    width: 100%
                    height: 100%

    &.browser-demo-section

        .section-scroll-copy
            position: relative
            z-index: 10
            color: #fff
            width: 100%
            font-size: 22px

            .section-scroll-copy-inner
                position: absolute
                z-index: 10
                color: #fff
                right: 10%
                width: 23%

                a
                    color: inherit

                .example-paragraph
                    +border-radius(4px)
                    background: #000
                    padding: 1rem

.browser-content
    display: none