angular-components/client/app/app.styl at 14f8c50ed772ff9f9bbd0f6d011ac83d1b16ae54 · FrontendMasters/angular-components · 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
@import '../styles'
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700);

html
body
  height 100%

body
  font-family 'Roboto', sans-serif
  background-color bg-color
  *
    box-sizing border-box
a
  color white
  text-decoration none
  &:visited
    color white
  &:hover
  &:active
    text-decoration none

#app
  header nav
    height navbar-height
    background-color primary-color
    makeShadow(2)
    z-index max-z
    position fixed
    min-width 100%
    padding 15px
    .logo
      span(1/8)
      color white
      font-size 1.8rem
      cursor pointer
    .links
      span(2/8, 5/8, 2)
      *
        font-size 1.3rem
        margin-left 10px
  main
    padding-top navbar-height

.button
  outline none
  border none
  border-radius 2px
  background-color primary-color
  color white
  text-transform uppercase
  text-align center
  min-width 88px
  min-height 36px
  overflow hidden
  user-select none
  vertical-align middle
  position relative
  padding 0px 6px
  white-space nowrap
  cursor pointer
  font-weight 500
  user-select none
  font-size 14px
  line-height 30px
  &[disabled]
  &.disabled
  :disabled
    background-color white !important//shade(primary-color, 20%)
    color text-disabled-color
    box-shadow none !important
  &.accent
    background-color accent-color
  &.fab
    width 56px
    min-width 0px
    background-clip padding-box
    height 56px
    line-height 56px
    z-index 20
    border-radius 50%

  &:active
  &:focus
    border none
    outline none

  &.raised
  &.fab
    makeShadow(1)
    transition all .3s ease

    &:active
      makeShadow(3)
main
  position relative
  min-height 400px

  [ui-view].ng-enter
    opacity 0
    transform scale3d(0.5,0.5,0.5)

  [ui-view].ng-enter-active
    opacity 1
    transform scale3d(1,1,1)

  [ui-view].ng-leave
    opacity 1
    transform translate3d(0,0,0)

  [ui-view].ng-leave-active
    opacity 0
    transform translate3d(100px, 0, 0)

  [ui-view].ng-enter
  [ui-view].ng-leave
    position absolute
    left 0
    right 0
    transition all .5s ease-in-out