simple-page-compoents 0.0.1 → 0.0.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/lib/button_group.rb +59 -0
- data/lib/data_table.rb +130 -0
- data/lib/navbar.rb +169 -0
- data/lib/progress_bar.rb +41 -0
- data/lib/simple-page-compoents.rb +24 -56
- data/vendor/assets/images/compoents/glyphicons-halflings-white.png +0 -0
- data/vendor/assets/images/compoents/glyphicons-halflings.png +0 -0
- data/vendor/assets/stylesheets/buttons.scss +152 -0
- data/vendor/assets/stylesheets/form.scss +1 -39
- data/vendor/assets/stylesheets/icons.scss +574 -0
- data/vendor/assets/stylesheets/navbar.scss +134 -44
- data/vendor/assets/stylesheets/pagination.scss +58 -0
- data/vendor/assets/stylesheets/progress.scss +138 -0
- data/vendor/assets/stylesheets/simple-page-compoents.scss +6 -1
- data/vendor/assets/stylesheets/table.scss +84 -0
- metadata +12 -1
|
@@ -1,32 +1,26 @@
|
|
|
1
|
-
|
|
1
|
+
.page-navbar {
|
|
2
2
|
font-size:13px;
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
.navbar-fixed-top {
|
|
6
|
-
top:0;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.navbar-fixed-bottom {
|
|
10
|
-
bottom:0;
|
|
11
|
-
}
|
|
3
|
+
overflow:visible;
|
|
12
4
|
|
|
13
|
-
.navbar-fixed-top,
|
|
14
|
-
.navbar-fixed-bottom {
|
|
15
|
-
left: 0;
|
|
16
|
-
margin-bottom: 0;
|
|
17
|
-
position: fixed;
|
|
18
|
-
right: 0;
|
|
19
|
-
z-index: 1000;
|
|
20
5
|
.navbar-inner{
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
6
|
+
&:after{
|
|
7
|
+
clear:both;
|
|
8
|
+
}
|
|
9
|
+
&:before, &:after{
|
|
10
|
+
content:"";
|
|
11
|
+
display:table;
|
|
12
|
+
line-height:0;
|
|
13
|
+
}
|
|
14
|
+
@include gradient(#fff, #f2f2f2);
|
|
15
|
+
border:solid 1px #d4d4d4;
|
|
16
|
+
@include border-radius(3px);
|
|
17
|
+
@include box-shadow(0 1px 3px rgba(black, 0.067));
|
|
18
|
+
min-height:40px;
|
|
19
|
+
padding-left:20px;
|
|
20
|
+
padding-right:20px;
|
|
24
21
|
}
|
|
25
|
-
}
|
|
26
22
|
|
|
27
|
-
.
|
|
28
|
-
overflow:visible;
|
|
29
|
-
.nav{
|
|
23
|
+
.nav {
|
|
30
24
|
display:block;
|
|
31
25
|
float:left;
|
|
32
26
|
left:0;
|
|
@@ -48,9 +42,22 @@ body > .page-navbar {
|
|
|
48
42
|
}
|
|
49
43
|
}
|
|
50
44
|
}
|
|
45
|
+
|
|
46
|
+
li.active > a {
|
|
47
|
+
background-color: #E5E5E5;
|
|
48
|
+
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125) inset;
|
|
49
|
+
color: #555555;
|
|
50
|
+
text-decoration: none;
|
|
51
|
+
&:hover, &:focus {
|
|
52
|
+
background-color: #E5E5E5;
|
|
53
|
+
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125) inset;
|
|
54
|
+
color: #555555;
|
|
55
|
+
text-decoration: none;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
51
58
|
}
|
|
52
59
|
|
|
53
|
-
&.color-inverse{
|
|
60
|
+
&.color-inverse {
|
|
54
61
|
.navbar-inner {
|
|
55
62
|
@include gradient(#222, #111);
|
|
56
63
|
border-color:#252525;
|
|
@@ -61,30 +68,113 @@ body > .page-navbar {
|
|
|
61
68
|
color:white;
|
|
62
69
|
}
|
|
63
70
|
}
|
|
71
|
+
.nav li.active > a {
|
|
72
|
+
background-color:#111;
|
|
73
|
+
color:white;
|
|
74
|
+
&:hover, &:focus {
|
|
75
|
+
background-color:#111;
|
|
76
|
+
color:white;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
64
79
|
}
|
|
65
80
|
}
|
|
66
|
-
}
|
|
67
81
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
clear:both;
|
|
82
|
+
&.fixed-top {
|
|
83
|
+
top:0;
|
|
71
84
|
}
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
85
|
+
|
|
86
|
+
&.fixed-bottom {
|
|
87
|
+
bottom:0;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
&.fixed-top, &.fixed-bottom {
|
|
91
|
+
left: 0;
|
|
92
|
+
margin-bottom: 0;
|
|
93
|
+
position: fixed;
|
|
94
|
+
right: 0;
|
|
95
|
+
z-index: 1000;
|
|
96
|
+
.navbar-inner {
|
|
97
|
+
padding-left:0;
|
|
98
|
+
padding-right:0;
|
|
99
|
+
@include border-radius(0);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
&.fixed-top, &.static-top {
|
|
104
|
+
.navbar-inner {
|
|
105
|
+
@include box-shadow(0 1px 10px rgba(0, 0, 0, 0.1));
|
|
106
|
+
border-width:0 0 1px;
|
|
107
|
+
}
|
|
76
108
|
}
|
|
77
|
-
@include gradient(#fff, #f2f2f2);
|
|
78
|
-
border:solid 1px #d4d4d4;
|
|
79
|
-
@include border-radius(3px);
|
|
80
|
-
@include box-shadow(0 1px 3px rgba(black, 0.067));
|
|
81
|
-
min-height:40px;
|
|
82
|
-
padding-left:20px;
|
|
83
|
-
padding-right:20px;
|
|
84
|
-
}
|
|
85
109
|
|
|
86
|
-
|
|
87
|
-
@include box-shadow(0 1px 10px rgba(0, 0, 0, 0.1));
|
|
88
|
-
border-width:0 0 1px;
|
|
110
|
+
// ---
|
|
89
111
|
}
|
|
90
112
|
|
|
113
|
+
.page-navlist {
|
|
114
|
+
.navlist-inner {
|
|
115
|
+
ul.nav {
|
|
116
|
+
list-style:none outside none;
|
|
117
|
+
background-color:#fff;
|
|
118
|
+
padding:0;
|
|
119
|
+
margin:0;
|
|
120
|
+
@include border-radius(6px);
|
|
121
|
+
|
|
122
|
+
@include box-shadow(0 1px 4px rgba(black, 0.067));
|
|
123
|
+
& > li {
|
|
124
|
+
& > a {
|
|
125
|
+
border:solid 1px #e5e5e5;
|
|
126
|
+
display:block;
|
|
127
|
+
margin:0 0 -1px;
|
|
128
|
+
padding:8px 14px;
|
|
129
|
+
text-shadow:0 1px 9 rgba(white, 0.5);
|
|
130
|
+
&:hover {
|
|
131
|
+
background-color:#f5f5f5;
|
|
132
|
+
}
|
|
133
|
+
&:hover, &:focus {
|
|
134
|
+
text-decoration:none;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.icon {
|
|
138
|
+
float:right;
|
|
139
|
+
margin-right:-6px;
|
|
140
|
+
margin-top:2px;
|
|
141
|
+
opacity:0.25;
|
|
142
|
+
|
|
143
|
+
background-image:url(/assets/compoents/glyphicons-halflings.png);
|
|
144
|
+
background-position: -456px -72px;
|
|
145
|
+
display:inline-block;
|
|
146
|
+
height:14px;width:14px;
|
|
147
|
+
vertical-align:text-top;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
&:first-child > a {
|
|
152
|
+
@include border-radius(6px 6px 0 0);
|
|
153
|
+
}
|
|
154
|
+
&:last-child > a {
|
|
155
|
+
@include border-radius(0 0 6px 6px);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
&.active > a {
|
|
159
|
+
border:0 none;
|
|
160
|
+
@include box-shadow((1px 0 0 rgba(black, 0.1) inset, -1px 0 0 rgba(black, 0.1) inset));
|
|
161
|
+
padding:9px 15px;
|
|
162
|
+
position:relative;
|
|
163
|
+
text-shadow:0 1px 0 rgba(black, 0.15);
|
|
164
|
+
z-index:2;
|
|
165
|
+
background-color:#0088cc;
|
|
166
|
+
color:#fff;
|
|
167
|
+
&:hover, &:focus {
|
|
168
|
+
background-color:#0088cc;
|
|
169
|
+
color:#fff;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.icon {
|
|
173
|
+
background-image:url(/assets/compoents/glyphicons-halflings-white.png);
|
|
174
|
+
opacity:1;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
.pagination {
|
|
2
|
+
margin-top:0;
|
|
3
|
+
margin-bottom:20px;
|
|
4
|
+
height:30px;
|
|
5
|
+
overflow:visible;
|
|
6
|
+
|
|
7
|
+
ul {
|
|
8
|
+
@include border-radius(4px);
|
|
9
|
+
@include box-shadow(0 1px 2px rgba(black, 0.05));
|
|
10
|
+
margin-bottom:0;
|
|
11
|
+
margin-left:0;
|
|
12
|
+
padding:0;
|
|
13
|
+
margin-top:0;
|
|
14
|
+
display:inline-block;
|
|
15
|
+
|
|
16
|
+
& > li {
|
|
17
|
+
display:inline;
|
|
18
|
+
line-height:20px;
|
|
19
|
+
& > a, & > span {
|
|
20
|
+
background-color:white;
|
|
21
|
+
border-color:#ddd;
|
|
22
|
+
border-image:none;
|
|
23
|
+
border-style:solid;
|
|
24
|
+
border-width:1px 1px 1px 0;
|
|
25
|
+
float:left;
|
|
26
|
+
line-height:20px;
|
|
27
|
+
padding:4px 12px;
|
|
28
|
+
text-decoration:none;
|
|
29
|
+
&:hover, &:focus {
|
|
30
|
+
background-color:#f5f5f5;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&:first-child {
|
|
35
|
+
& > a, & > span {
|
|
36
|
+
border-bottom-left-radius:4px;
|
|
37
|
+
border-left-width:1px;
|
|
38
|
+
border-top-left-radius:4px;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&:last-child {
|
|
43
|
+
& > a, & > span {
|
|
44
|
+
border-bottom-right-radius:4px;
|
|
45
|
+
border-top-right-radius:4px;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&.active {
|
|
50
|
+
& > a, & > span {
|
|
51
|
+
color:#999;
|
|
52
|
+
cursor:default;
|
|
53
|
+
background-color:#f5f5f5;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
.page-progress {
|
|
2
|
+
margin-bottom:5px;
|
|
3
|
+
background-color:#f7f7f7;
|
|
4
|
+
@include gradient(#f5f5f5, #f9f9f9);
|
|
5
|
+
@include border-radius(4px);
|
|
6
|
+
@include box-shadow(0 1px 2px rgba(black, 0.1) inset);
|
|
7
|
+
height:20px;
|
|
8
|
+
overflow:hidden;
|
|
9
|
+
.bar {
|
|
10
|
+
background-color:#0e90d2;
|
|
11
|
+
@include gradient(#149BDF, #0480BE);
|
|
12
|
+
@include box-shadow(0 -1px 0 rgba(black, 0.15) inset);
|
|
13
|
+
color:#fff;
|
|
14
|
+
font-size:12px;
|
|
15
|
+
float:left;
|
|
16
|
+
height:100%;
|
|
17
|
+
text-align:center;
|
|
18
|
+
text-shadow:0 -1px 0 rgba(black, 0.25);
|
|
19
|
+
@include transition(width 0.6s ease 0s);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&.active .bar {
|
|
23
|
+
-webkit-animation: progress-bar-stripes 2s linear infinite;
|
|
24
|
+
-moz-animation: progress-bar-stripes 2s linear infinite;
|
|
25
|
+
-ms-animation: progress-bar-stripes 2s linear infinite;
|
|
26
|
+
-o-animation: progress-bar-stripes 2s linear infinite;
|
|
27
|
+
animation: progress-bar-stripes 2s linear infinite;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&.striped {
|
|
31
|
+
.bar {
|
|
32
|
+
background-color: #149bdf;
|
|
33
|
+
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
|
|
34
|
+
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
|
35
|
+
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
|
36
|
+
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
|
37
|
+
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
|
38
|
+
-webkit-background-size: 40px 40px;
|
|
39
|
+
-moz-background-size: 40px 40px;
|
|
40
|
+
-o-background-size: 40px 40px;
|
|
41
|
+
background-size: 40px 40px;
|
|
42
|
+
}
|
|
43
|
+
&.info .bar {
|
|
44
|
+
background-color: #5bc0de;
|
|
45
|
+
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
|
|
46
|
+
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
|
47
|
+
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
|
48
|
+
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
|
49
|
+
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
|
50
|
+
}
|
|
51
|
+
&.success .bar {
|
|
52
|
+
background-color: #62c462;
|
|
53
|
+
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
|
|
54
|
+
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
|
55
|
+
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
|
56
|
+
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
|
57
|
+
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
|
58
|
+
}
|
|
59
|
+
&.warning .bar {
|
|
60
|
+
background-color: #fbb450;
|
|
61
|
+
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
|
|
62
|
+
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
|
63
|
+
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
|
64
|
+
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
|
65
|
+
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
|
66
|
+
}
|
|
67
|
+
&.danger .bar {
|
|
68
|
+
background-color: #ee5f5b;
|
|
69
|
+
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
|
|
70
|
+
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
|
71
|
+
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
|
72
|
+
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
|
73
|
+
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
&.info .bar {
|
|
78
|
+
background-color:#4BB1CF;
|
|
79
|
+
@include gradient(#5BC0DE, #339BB9);
|
|
80
|
+
}
|
|
81
|
+
&.success .bar {
|
|
82
|
+
background-color:#5EB95E;
|
|
83
|
+
@include gradient(#62C462, #57A957);
|
|
84
|
+
}
|
|
85
|
+
&.warning .bar {
|
|
86
|
+
background-color:#FAA732;
|
|
87
|
+
@include gradient(#FBB450, #F89406);
|
|
88
|
+
}
|
|
89
|
+
&.danger .bar {
|
|
90
|
+
background-color:#DD514C;
|
|
91
|
+
@include gradient(#EE5F5B, #C43C35);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
@-webkit-keyframes progress-bar-stripes {
|
|
96
|
+
from {
|
|
97
|
+
background-position: 40px 0;
|
|
98
|
+
}
|
|
99
|
+
to {
|
|
100
|
+
background-position: 0 0;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
@-moz-keyframes progress-bar-stripes {
|
|
105
|
+
from {
|
|
106
|
+
background-position: 40px 0;
|
|
107
|
+
}
|
|
108
|
+
to {
|
|
109
|
+
background-position: 0 0;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
@-ms-keyframes progress-bar-stripes {
|
|
114
|
+
from {
|
|
115
|
+
background-position: 40px 0;
|
|
116
|
+
}
|
|
117
|
+
to {
|
|
118
|
+
background-position: 0 0;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
@-o-keyframes progress-bar-stripes {
|
|
123
|
+
from {
|
|
124
|
+
background-position: 0 0;
|
|
125
|
+
}
|
|
126
|
+
to {
|
|
127
|
+
background-position: 40px 0;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
@keyframes progress-bar-stripes {
|
|
132
|
+
from {
|
|
133
|
+
background-position: 40px 0;
|
|
134
|
+
}
|
|
135
|
+
to {
|
|
136
|
+
background-position: 0 0;
|
|
137
|
+
}
|
|
138
|
+
}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
table.page-data-table {
|
|
2
|
+
margin-bottom:5px;
|
|
3
|
+
width:100%;
|
|
4
|
+
thead{
|
|
5
|
+
th{
|
|
6
|
+
vertical-align:bottom;
|
|
7
|
+
font-weight:bold;
|
|
8
|
+
text-align:left;
|
|
9
|
+
padding:8px;
|
|
10
|
+
line-height:20px;
|
|
11
|
+
}
|
|
12
|
+
&:first-child{
|
|
13
|
+
th, td{
|
|
14
|
+
border-top:0 none;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
th, td {
|
|
19
|
+
border-top:solid 1px #ddd;
|
|
20
|
+
line-height:20px;
|
|
21
|
+
padding:8px;
|
|
22
|
+
text-align:left;
|
|
23
|
+
vertical-align:top;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&.table-hover{
|
|
27
|
+
tbody {
|
|
28
|
+
tr:hover {
|
|
29
|
+
td, th {
|
|
30
|
+
background-color:#f5f5f5;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&.striped tbody > tr:nth-child(2n+1) {
|
|
37
|
+
& > td {
|
|
38
|
+
background-color:#f9f9f9;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&.bordered {
|
|
43
|
+
border-collapse:separate;
|
|
44
|
+
border:solid 1px #ddd;
|
|
45
|
+
border-left:0;
|
|
46
|
+
@include border-radius(4px);
|
|
47
|
+
|
|
48
|
+
thead:first-child tr:first-child > th:first-child,
|
|
49
|
+
tbody:first-child tr:first-child > td:first-child,
|
|
50
|
+
tbody:first-child tr:first-child > th:first-child
|
|
51
|
+
{
|
|
52
|
+
border-top-left-radius:4px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
thead:first-child tr:first-child > th:last-child,
|
|
56
|
+
tbody:first-child tr:first-child > td:last-child,
|
|
57
|
+
tbody:first-child tr:first-child > th:last-child
|
|
58
|
+
{
|
|
59
|
+
border-top-right-radius:4px;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
thead:last-child tr:last-child > th:first-child,
|
|
63
|
+
tbody:last-child tr:last-child > td:first-child,
|
|
64
|
+
tbody:last-child tr:last-child > th:first-child,
|
|
65
|
+
tfoot:last-child tr:last-child > td:first-child,
|
|
66
|
+
tfoot:last-child tr:last-child > th:first-child
|
|
67
|
+
{
|
|
68
|
+
border-bottom-left-radius:4px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
thead:last-child tr:last-child > th:last-child,
|
|
72
|
+
tbody:last-child tr:last-child > td:last-child,
|
|
73
|
+
tbody:last-child tr:last-child > th:last-child,
|
|
74
|
+
tfoot:last-child tr:last-child > td:last-child,
|
|
75
|
+
tfoot:last-child tr:last-child > th:last-child
|
|
76
|
+
{
|
|
77
|
+
border-bottom-right-radius:4px;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
th, td {
|
|
81
|
+
border-left:solid 1px #ddd;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: simple-page-compoents
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.1
|
|
4
|
+
version: 0.0.6.1
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- ben7th
|
|
@@ -16,11 +16,22 @@ executables: []
|
|
|
16
16
|
extensions: []
|
|
17
17
|
extra_rdoc_files: []
|
|
18
18
|
files:
|
|
19
|
+
- lib/progress_bar.rb
|
|
20
|
+
- lib/data_table.rb
|
|
21
|
+
- lib/navbar.rb
|
|
19
22
|
- lib/simple-page-compoents.rb
|
|
23
|
+
- lib/button_group.rb
|
|
24
|
+
- vendor/assets/stylesheets/pagination.scss
|
|
25
|
+
- vendor/assets/stylesheets/progress.scss
|
|
26
|
+
- vendor/assets/stylesheets/table.scss
|
|
20
27
|
- vendor/assets/stylesheets/navbar.scss
|
|
21
28
|
- vendor/assets/stylesheets/form.scss
|
|
29
|
+
- vendor/assets/stylesheets/buttons.scss
|
|
22
30
|
- vendor/assets/stylesheets/simple-page-compoents.scss
|
|
23
31
|
- vendor/assets/stylesheets/mixins.scss
|
|
32
|
+
- vendor/assets/stylesheets/icons.scss
|
|
33
|
+
- vendor/assets/images/compoents/glyphicons-halflings-white.png
|
|
34
|
+
- vendor/assets/images/compoents/glyphicons-halflings.png
|
|
24
35
|
- README.md
|
|
25
36
|
homepage: https://github.com/mindpin/simple-images
|
|
26
37
|
licenses:
|