]>
Commit | Line | Data |
---|---|---|
31f18b77 FG |
1 | /* |
2 | * Component: Small Box | |
3 | * -------------------- | |
4 | */ | |
5 | ||
6 | .small-box { | |
7 | .border-radius(2px); | |
8 | position: relative; | |
9 | display: block; | |
10 | margin-bottom: 20px; | |
11 | box-shadow: @box-boxshadow; | |
12 | // content wrapper | |
13 | > .inner { | |
14 | padding: 10px; | |
15 | } | |
16 | ||
17 | > .small-box-footer { | |
18 | position: relative; | |
19 | text-align: center; | |
20 | padding: 3px 0; | |
21 | color: #fff; | |
22 | color: rgba(255, 255, 255, 0.8); | |
23 | display: block; | |
24 | z-index: 10; | |
25 | background: rgba(0, 0, 0, 0.1); | |
26 | text-decoration: none; | |
27 | &:hover { | |
28 | color: #fff; | |
29 | background: rgba(0, 0, 0, 0.15); | |
30 | } | |
31 | } | |
32 | ||
33 | h3 { | |
34 | font-size: 38px; | |
35 | font-weight: bold; | |
36 | margin: 0 0 10px 0; | |
37 | white-space: nowrap; | |
38 | padding: 0; | |
39 | ||
40 | } | |
41 | ||
42 | p { | |
43 | font-size: 15px; | |
44 | > small { | |
45 | display: block; | |
46 | color: #f9f9f9; | |
47 | font-size: 13px; | |
48 | margin-top: 5px; | |
49 | } | |
50 | } | |
51 | ||
52 | h3, p { | |
53 | z-index: 5; | |
54 | } | |
55 | ||
56 | // the icon | |
57 | .icon { | |
58 | .transition(all @transition-speed linear); | |
59 | position: absolute; | |
60 | top: -10px; | |
61 | right: 10px; | |
62 | z-index: 0; | |
63 | font-size: 90px; | |
64 | color: rgba(0, 0, 0, 0.15); | |
65 | } | |
66 | ||
67 | // Small box hover state | |
68 | &:hover { | |
69 | text-decoration: none; | |
70 | color: #f9f9f9; | |
71 | // Animate icons on small box hover | |
72 | .icon { | |
73 | font-size: 95px; | |
74 | } | |
75 | } | |
76 | } | |
77 | ||
78 | @media (max-width: @screen-xs-max) { | |
79 | // No need for icons on very small devices | |
80 | .small-box { | |
81 | text-align: center; | |
82 | .icon { | |
83 | display: none; | |
84 | } | |
85 | p { | |
86 | font-size: 12px; | |
87 | } | |
88 | } | |
89 | } |