styleguide/packages/react-components/src/TryBanner/index.styl at master · csseditor/styleguide · 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
.a0r-try-banner
  text-align center
  background $bg-color-gray-light
  padding 90px 20px 70px 20px
  border-radius 3px

  +breakpoint('tablet', 'max')
    padding 20px
    margin-top 40px
    text-align center
    margin-bottom 20px

.a0r-try-banner--dark
  background darken($bg-color-dark, 20%)

.a0r-try-banner__title
  display inline-block
  font-size 14px
  letter-spacing 1px
  position relative
  text-transform uppercase
  top -.5em

  .a0r-try-banner--dark &
    color #fff

  +breakpoint('tablet', 'max')
    display block
    margin-bottom 20px
    top auto

.a0r-try-banner__button
  margin-left 20px
  margin-top -20px

  +breakpoint('tablet', 'max')
    display block
    display inline-block
    margin 0
    white-space normal
    width 100%

.a0r-try-banner .copy
  color #666
  margin-top 30px