npm-dependencies-pagelet/css.styl at master · nodejitsu/npm-dependencies-pagelet · 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
120
121
122
$light-highlight = #F4F4F4
$med-highlight =  #2980B9
$dark-highlight = #2980B9
$link = #4789AC

$greedy = #E67E22
$greedy-border = #D35400

$uptodate =  #2ECC71
$uptodate-border = #28B362

$outofdate = #E74C3C
$outofdate-border = #C0392B

.package
  overflow: hidden

  h1
    color: $dark-highlight
    margin: 15px 0 0 0

  .status
    border-radius: 3px
    float: right
    overflow: hidden
    padding-left: 10px

    span
      color: #FFF
      font-weight: bold
      padding: 3px 10px

  .uptodate
    border: 1px solid $uptodate-border

    span
      background: $uptodate

  .outofdate
    border: 1px solid $outofdate-border

    span
      background: $outofdate

.summary
  li
    list-style: none
    margin: 20px 0

  .boxed
    position: relative

    &:before
      border-radius: 3px
      content: ''
      display: block
      height: 12px
      left: -20px
      position: absolute
      top: 2px
      width: 12px

  .uptodate:before
    background: $uptodate
    border: 1px solid $uptodate-border

  .outofdate:before
    background: $outofdate
    border: 1px solid $outofdate-border

table
  border-collapse: collapse
  border-spacing: 0
  border: 0
  margin: 15px 0
  width: 100%

  .name
    width: 30%

  .license
    width: 20%

  .status
    width: 20%

  .version
    width: 10%

  thead
    border-bottom: 1px solid #eaeaea

  th
    font-weight: normal

  td,
  th
    border: 0
    padding: 6px 13px
    text-align: left

    &.version
      text-align: right

  tr.outofdate
    color: $outofdate
    font-weight: bold

  tr.greedy
    color: $greedy
    font-weight: bold

  tfoot.more a
    border: 1px solid lighten($link, 60%)
    display: block
    margin-top: 20px
    padding: 10px
    text-align: center
    width: 100%

    &:hover
      text-decoration: none