afm-client/bower_components/tether/docs/welcome/sass/welcome.sass

   1 @import compass/css3
   2
   3 html, body
   4     height: 100%
   5
   6 body
   7     margin: 0
   8     font-family: "proxima-nova", "Helvetica Neue", sans-serif
   9
  10 .button
  11     display: inline-block
  12     border: 2px solid #333
  13     color: #333
  14     padding: 1em 1.25em
  15     font-weight: 500
  16     text-transform: uppercase
  17     letter-spacing: 3px
  18     text-decoration: none
  19     cursor: pointer
  20     width: 140px
  21     font-size: .8em
  22     line-height: 1.3em
  23     text-align: center
  24
  25 .tether-element.tether-theme-arrows-dark .tether-content
  26     padding: 1em
  27     font-size: 1.1em
  28
  29     .button
  30         border-color: #fff
  31         color: #fff
  32         width: 170px
  33         pointer-events: all
  34
  35 .mobile-copy
  36     display: none
  37
  38     @media (max-width: 568px)
  39         display: block
  40
  41 .button.dark
  42     background: #333
  43     color: #fff
  44
  45 .hero-wrap
  46     height: 100%
  47     overflow: hidden
  48
  49 table.showcase
  50     height: 100%
  51     width: 100%
  52     position: relative
  53
  54     &:after
  55         content: ""
  56         display: block
  57         position: absolute
  58         left: 0
  59         right: 0
  60         bottom: 20px
  61         margin: auto
  62         height: 0
  63         width: 0
  64         border-width: 18px
  65         border-style: solid
  66         border-color: transparent
  67         border-top-color: rgba(0, 0, 0, 0.2)
  68
  69     &.no-next-arrow:after
  70         display: none
  71
  72     .showcase-inner
  73         margin: 40px auto 60px
  74         padding: 10px
  75
  76         h1
  77             font-size: 50px
  78             text-align: center
  79             font-weight: 300
  80
  81             @media (max-width: 567px)
  82                 font-size: 40px
  83
  84         h2
  85             font-size: 24px
  86             text-align: center
  87             font-weight: 300
  88             margin: 1em 0 1em
  89
  90             @media (max-width: 567px)
  91                 font-size: 14px
  92
  93         p
  94             text-align: center
  95
  96     &.hero
  97         text-align: center
  98
  99         .tether-target-demo
 100             +inline-block
 101             border: 2px dotted #000
 102             margin: 5rem auto
 103             padding: 5rem
 104
 105             @media (max-width: 567px)
 106                 padding: 1rem
 107
 108     &.share
 109         background: #f3f3f3
 110
 111     &.projects-showcase .showcase-inner
 112
 113         .projects-list
 114             width: 80%
 115             max-width: 1200px
 116             margin: 0 auto
 117
 118             .project
 119                 color: inherit
 120                 text-decoration: none
 121                 position: relative
 122                 width: 50%
 123                 float: left
 124                 text-align: center
 125                 margin-bottom: 2rem
 126
 127             .os-icon
 128                 width: 8rem
 129                 height: 8rem
 130                 margin-bottom: 1rem
 131                 background-size: 100%
 132
 133             h1
 134                 font-size: 2.5rem
 135
 136             p
 137                 font-size: 1.3rem
 138
 139     &.browser-demo
 140         +background-image(linear-gradient(top left, #723362 0%, #9d223c 100%))
 141         background-color: #9d223c
 142         position: absolute
 143         top: 100%
 144
 145         &.fixed
 146             position: fixed
 147             top: 0
 148             bottom: 0
 149             left: 0
 150             right: 0
 151             z-index: 1
 152
 153             .browser-demo-inner
 154                 +transition(width 2s ease-in-out, height 2s ease-in-out)
 155
 156             // Sections
 157
 158             &[data-section="what"]
 159                 box-shadow: 0 0 0 0
 160
 161             &[data-section="why"]
 162
 163                 .browser-demo-inner
 164                     width: 70%
 165
 166             &[data-section="outro"]
 167
 168                 .showcase-inner
 169                     pointer-events: all
 170
 171         .showcase-inner
 172             pointer-events: none
 173             position: absolute
 174             left: 10%
 175             right: 40%
 176             top: 220px
 177             bottom: 120px
 178             margin: 0
 179             padding: 0
 180
 181             @media (max-width: 567px)
 182                 bottom: 90px
 183                 top: 180px
 184
 185         .browser-demo-inner
 186             height: 100%
 187             width: 100%
 188
 189         .section-copy
 190             +transition(opacity .5s ease-in-out, top .5s ease-in-out)
 191             +opacity(0)
 192             position: absolute
 193             top: 0
 194             position: absolute
 195             height: 200px
 196             color: #fff
 197             text-align: center
 198             width: 100%
 199
 200             &.active
 201                 +opacity(1)
 202                 top: -150px
 203
 204                 @media (max-width: 567px)
 205                     top: -130px
 206
 207             h2
 208                 font-size: 40px
 209                 font-weight: bold
 210                 line-height: 1
 211                 margin: 25px 0 15px
 212
 213                 @media (max-width: 567px)
 214                     font-size: 30px
 215
 216         .browser-window
 217             +border-radius(4px)
 218             background: #fff
 219             position: relative
 220             height: 100%
 221             width: 100%
 222             max-width: 1200px
 223             margin: 0 auto
 224
 225             .browser-titlebar
 226                 position: absolute
 227                 top: 0
 228                 left: 0
 229                 right: 0
 230                 border-bottom: 1px solid #eee
 231                 height: 55px
 232
 233                 .browser-dots
 234                     padding: 16px
 235
 236                     b
 237                         +border-radius(50%)
 238                         +inline-block
 239                         width: 10px
 240                         height: 10px
 241                         margin-right: 7px
 242                         background: rgba(0, 0, 0, .1)
 243
 244             .browser-frame
 245                 position: absolute
 246                 top: 55px
 247                 left: 0
 248                 right: 0
 249                 bottom: 0
 250
 251                 iframe
 252                     +border-radius(0 0 4px 4px)
 253                     border: 0
 254                     width: 100%
 255                     height: 100%
 256
 257     &.browser-demo-section
 258
 259         .section-scroll-copy
 260             position: relative
 261             z-index: 10
 262             color: #fff
 263             width: 100%
 264             font-size: 22px
 265
 266             .section-scroll-copy-inner
 267                 position: absolute
 268                 z-index: 10
 269                 color: #fff
 270                 right: 10%
 271                 width: 23%
 272
 273                 a
 274                     color: inherit
 275
 276                 .example-paragraph
 277                     +border-radius(4px)
 278                     background: #000
 279                     padding: 1rem
 280
 281 .browser-content
 282     display: none