metro-ui-rails 0.1.3
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.
- data/.gitignore +18 -0
- data/Gemfile +4 -0
- data/README.md +44 -0
- data/Rakefile +1 -0
- data/lib/generators/metro/layout/layout_generator.rb +19 -0
- data/lib/generators/metro/layout/templates/layout.html.erb +89 -0
- data/lib/metro-ui-rails.rb +10 -0
- data/lib/metro/ui/rails/engine.rb +15 -0
- data/lib/metro/ui/rails/metro.rb +2 -0
- data/lib/metro/ui/rails/version.rb +7 -0
- data/metro-ui-rails.gemspec +26 -0
- data/vendor/assets/images/.DS_Store +0 -0
- data/vendor/assets/images/metro/.DS_Store +0 -0
- data/vendor/assets/images/metro/ui/.DS_Store +0 -0
- data/vendor/assets/images/metro/ui/Calendar128.png +0 -0
- data/vendor/assets/images/metro/ui/Camera48.png +0 -0
- data/vendor/assets/images/metro/ui/InternetExplorer128.png +0 -0
- data/vendor/assets/images/metro/ui/Mail128.png +0 -0
- data/vendor/assets/images/metro/ui/Market128.png +0 -0
- data/vendor/assets/images/metro/ui/Music128.png +0 -0
- data/vendor/assets/images/metro/ui/Picture128.png +0 -0
- data/vendor/assets/images/metro/ui/Rss128.png +0 -0
- data/vendor/assets/images/metro/ui/Video128.png +0 -0
- data/vendor/assets/images/metro/ui/YouTube128.png +0 -0
- data/vendor/assets/images/metro/ui/armor.png +0 -0
- data/vendor/assets/images/metro/ui/bage-activity.png +0 -0
- data/vendor/assets/images/metro/ui/bage-alert.png +0 -0
- data/vendor/assets/images/metro/ui/bage-attention.png +0 -0
- data/vendor/assets/images/metro/ui/bage-available.png +0 -0
- data/vendor/assets/images/metro/ui/bage-away.png +0 -0
- data/vendor/assets/images/metro/ui/bage-busy.png +0 -0
- data/vendor/assets/images/metro/ui/bage-error.png +0 -0
- data/vendor/assets/images/metro/ui/bage-newMessage.png +0 -0
- data/vendor/assets/images/metro/ui/bage-paused.png +0 -0
- data/vendor/assets/images/metro/ui/bage-playing.png +0 -0
- data/vendor/assets/images/metro/ui/bage-unavailable.png +0 -0
- data/vendor/assets/images/metro/ui/chrome.png +0 -0
- data/vendor/assets/images/metro/ui/collapse24-black.png +0 -0
- data/vendor/assets/images/metro/ui/collapse24.png +0 -0
- data/vendor/assets/images/metro/ui/collapse32-black.png +0 -0
- data/vendor/assets/images/metro/ui/collapse32.png +0 -0
- data/vendor/assets/images/metro/ui/download-32.png +0 -0
- data/vendor/assets/images/metro/ui/excel2013icon.png +0 -0
- data/vendor/assets/images/metro/ui/expand24-black.png +0 -0
- data/vendor/assets/images/metro/ui/expand24.png +0 -0
- data/vendor/assets/images/metro/ui/expand32-black.png +0 -0
- data/vendor/assets/images/metro/ui/expand32.png +0 -0
- data/vendor/assets/images/metro/ui/firefox.png +0 -0
- data/vendor/assets/images/metro/ui/fork-32.png +0 -0
- data/vendor/assets/images/metro/ui/github.png +0 -0
- data/vendor/assets/images/metro/ui/grid.png +0 -0
- data/vendor/assets/images/metro/ui/ie.png +0 -0
- data/vendor/assets/images/metro/ui/lock-open.png +0 -0
- data/vendor/assets/images/metro/ui/lock.png +0 -0
- data/vendor/assets/images/metro/ui/logo32.png +0 -0
- data/vendor/assets/images/metro/ui/onenote2013icon.png +0 -0
- data/vendor/assets/images/metro/ui/opera.png +0 -0
- data/vendor/assets/images/metro/ui/pull24-dark.png +0 -0
- data/vendor/assets/images/metro/ui/pull24.png +0 -0
- data/vendor/assets/images/metro/ui/responsive.png +0 -0
- data/vendor/assets/images/metro/ui/row24.png +0 -0
- data/vendor/assets/images/metro/ui/shield-user.png +0 -0
- data/vendor/assets/images/metro/ui/simple.png +0 -0
- data/vendor/assets/images/metro/ui/star32.png +0 -0
- data/vendor/assets/images/metro/ui/stock-up.png +0 -0
- data/vendor/assets/images/metro/ui/view-32.png +0 -0
- data/vendor/assets/images/metro/ui/word2013icon.png +0 -0
- data/vendor/assets/javascripts/metro-ui.js +4 -0
- data/vendor/assets/javascripts/metro-ui/accordion.js +44 -0
- data/vendor/assets/javascripts/metro-ui/buttonset.js +34 -0
- data/vendor/assets/javascripts/metro-ui/dropdown.js +94 -0
- data/vendor/assets/javascripts/metro-ui/pagecontrol.js +41 -0
- data/vendor/toolkit/metro-ui/accordion.less +61 -0
- data/vendor/toolkit/metro-ui/bricks.less +57 -0
- data/vendor/toolkit/metro-ui/buttons.less +124 -0
- data/vendor/toolkit/metro-ui/cards.less +113 -0
- data/vendor/toolkit/metro-ui/code.less +48 -0
- data/vendor/toolkit/metro-ui/colors.less +67 -0
- data/vendor/toolkit/metro-ui/forms.less +427 -0
- data/vendor/toolkit/metro-ui/grid.less +112 -0
- data/vendor/toolkit/metro-ui/hero.less +18 -0
- data/vendor/toolkit/metro-ui/images.less +121 -0
- data/vendor/toolkit/metro-ui/layout.less +273 -0
- data/vendor/toolkit/metro-ui/menus.less +320 -0
- data/vendor/toolkit/metro-ui/modern-responsive-max480.less +195 -0
- data/vendor/toolkit/metro-ui/modern-responsive-max767.less +74 -0
- data/vendor/toolkit/metro-ui/modern-responsive-max979.less +66 -0
- data/vendor/toolkit/metro-ui/modern-responsive-min1200.less +16 -0
- data/vendor/toolkit/metro-ui/modern-responsive.less +5 -0
- data/vendor/toolkit/metro-ui/modern.less +26 -0
- data/vendor/toolkit/metro-ui/notices.less +181 -0
- data/vendor/toolkit/metro-ui/pagecontrol.less +90 -0
- data/vendor/toolkit/metro-ui/reset.less +504 -0
- data/vendor/toolkit/metro-ui/routines.less +136 -0
- data/vendor/toolkit/metro-ui/tables.less +157 -0
- data/vendor/toolkit/metro-ui/theme-dark.less +50 -0
- data/vendor/toolkit/metro-ui/tiles.less +293 -0
- data/vendor/toolkit/metro-ui/typography.less +361 -0
- metadata +192 -0
@@ -0,0 +1,74 @@
|
|
1
|
+
/* Landscape phone to portrait tablet */
|
2
|
+
@media (max-width: 767px) {
|
3
|
+
body {
|
4
|
+
padding-right: 10px;
|
5
|
+
padding-left: 10px !important; //TODO найти и уничтожить
|
6
|
+
}
|
7
|
+
|
8
|
+
[class*="span"], .hero-unit {
|
9
|
+
float: none;
|
10
|
+
display: block;
|
11
|
+
width: 100%;
|
12
|
+
margin-left: 0;
|
13
|
+
margin-right: 0;
|
14
|
+
}
|
15
|
+
|
16
|
+
[class*="offset"], .hero-unit {
|
17
|
+
margin-left: 0;
|
18
|
+
}
|
19
|
+
|
20
|
+
table {
|
21
|
+
thead {
|
22
|
+
tr {
|
23
|
+
th {
|
24
|
+
font-size: 9pt;
|
25
|
+
}
|
26
|
+
}
|
27
|
+
}
|
28
|
+
|
29
|
+
tbody {
|
30
|
+
tr {
|
31
|
+
td {
|
32
|
+
font-size: 10pt;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
}
|
36
|
+
}
|
37
|
+
|
38
|
+
h1 {font-size: 30pt;}
|
39
|
+
h2 {font-size: 16pt;}
|
40
|
+
|
41
|
+
.navigation-bar {
|
42
|
+
.navigation-bar-inner {
|
43
|
+
.menu-pull {
|
44
|
+
display: block;
|
45
|
+
}
|
46
|
+
.brand {
|
47
|
+
float: none;
|
48
|
+
width: 100%;
|
49
|
+
}
|
50
|
+
& > ul {
|
51
|
+
display: none;
|
52
|
+
float: none;
|
53
|
+
|
54
|
+
& > li {
|
55
|
+
display: block;
|
56
|
+
float: none;
|
57
|
+
width: 100%;
|
58
|
+
margin-left: 0;
|
59
|
+
padding-left: 0;
|
60
|
+
|
61
|
+
&.brand {
|
62
|
+
width: auto;
|
63
|
+
}
|
64
|
+
|
65
|
+
.dropdown-menu {
|
66
|
+
position: relative;
|
67
|
+
width: 100%;
|
68
|
+
border: 0;
|
69
|
+
}
|
70
|
+
}
|
71
|
+
}
|
72
|
+
}
|
73
|
+
}
|
74
|
+
}
|
@@ -0,0 +1,66 @@
|
|
1
|
+
/* Portrait tablet to landscape and desktop */
|
2
|
+
@media (min-width: 768px) and (max-width: 979px) {
|
3
|
+
.span1 {width: 42px;}
|
4
|
+
.span2 {width: 104px;}
|
5
|
+
.span3 {width: 166px;}
|
6
|
+
.span4 {width: 228px;}
|
7
|
+
.span5 {width: 290px;}
|
8
|
+
.span6 {width: 352px;}
|
9
|
+
.span7 {width: 414px;}
|
10
|
+
.span8 {width: 476px;}
|
11
|
+
.span9 {width: 538px;}
|
12
|
+
.span10 {width: 600px;}
|
13
|
+
.span11 {width: 662px;}
|
14
|
+
.span12 {width: 724px;}
|
15
|
+
|
16
|
+
.offset1 {margin-left: 62px; }
|
17
|
+
.offset2 {margin-left: 124px;}
|
18
|
+
.offset3 {margin-left: 186px;}
|
19
|
+
.offset4 {margin-left: 248px;}
|
20
|
+
.offset5 {margin-left: 310px;}
|
21
|
+
.offset6 {margin-left: 372px;}
|
22
|
+
.offset7 {margin-left: 434px;}
|
23
|
+
.offset8 {margin-left: 496px;}
|
24
|
+
.offset9 {margin-left: 558px;}
|
25
|
+
.offset10 {margin-left: 620px;}
|
26
|
+
.offset11 {margin-left: 682px;}
|
27
|
+
.offset12 {margin-left: 744px;}
|
28
|
+
|
29
|
+
.hero-unit {
|
30
|
+
.span12;
|
31
|
+
}
|
32
|
+
|
33
|
+
.navigation-bar {
|
34
|
+
.navigation-bar-inner {
|
35
|
+
.menu-pull {
|
36
|
+
display: block;
|
37
|
+
}
|
38
|
+
.brand {
|
39
|
+
float: none;
|
40
|
+
width: 100%;
|
41
|
+
}
|
42
|
+
& > ul {
|
43
|
+
display: none;
|
44
|
+
float: none;
|
45
|
+
|
46
|
+
& > li {
|
47
|
+
display: block;
|
48
|
+
float: none;
|
49
|
+
width: 100%;
|
50
|
+
margin-left: 0;
|
51
|
+
padding-left: 0;
|
52
|
+
|
53
|
+
&.brand {
|
54
|
+
width: auto;
|
55
|
+
}
|
56
|
+
|
57
|
+
.dropdown-menu {
|
58
|
+
position: relative;
|
59
|
+
width: 100%;
|
60
|
+
border: 0;
|
61
|
+
}
|
62
|
+
}
|
63
|
+
}
|
64
|
+
}
|
65
|
+
}
|
66
|
+
}
|
@@ -0,0 +1,26 @@
|
|
1
|
+
/*
|
2
|
+
* Metro UI CSS v 0.1.1
|
3
|
+
* Copyright 2012 Sergey Pimenov
|
4
|
+
* Licensed under the MIT Lilcense
|
5
|
+
*/
|
6
|
+
|
7
|
+
@import "reset.less";
|
8
|
+
@import "routines.less";
|
9
|
+
@import "colors.less";
|
10
|
+
@import "bricks.less";
|
11
|
+
@import "typography.less";
|
12
|
+
@import "layout.less";
|
13
|
+
@import "buttons.less";
|
14
|
+
@import "tables.less";
|
15
|
+
@import "grid.less";
|
16
|
+
@import "hero.less";
|
17
|
+
@import "menus.less";
|
18
|
+
@import "notices.less";
|
19
|
+
@import "tiles.less";
|
20
|
+
@import "forms.less";
|
21
|
+
@import "images.less";
|
22
|
+
@import "cards.less";
|
23
|
+
@import "code.less";
|
24
|
+
@import "pagecontrol.less";
|
25
|
+
@import "accordion.less";
|
26
|
+
|
@@ -0,0 +1,181 @@
|
|
1
|
+
/*
|
2
|
+
* Metro UI CSS v 0.1.1
|
3
|
+
* Copyright 2012 Sergey Pimenov
|
4
|
+
* Licensed under the MIT Lilcense
|
5
|
+
*
|
6
|
+
* Notices.less
|
7
|
+
*/
|
8
|
+
|
9
|
+
.replies {
|
10
|
+
//list-style: none;
|
11
|
+
//margin: 0;
|
12
|
+
//padding: 0;
|
13
|
+
.unstyled;
|
14
|
+
|
15
|
+
& > div, & > li, & > span {
|
16
|
+
.medium-brick;
|
17
|
+
#font > .normal;
|
18
|
+
height: auto;
|
19
|
+
padding: 10px;
|
20
|
+
|
21
|
+
.avatar {
|
22
|
+
width: 50px;
|
23
|
+
height: 50px;
|
24
|
+
overflow: hidden;
|
25
|
+
display: table-cell;
|
26
|
+
vertical-align:middle !important;
|
27
|
+
background: #6e6e6e;
|
28
|
+
box-shadow-bottom: inset 0px 0px 3px #fff;
|
29
|
+
|
30
|
+
img {
|
31
|
+
width: 100%;
|
32
|
+
height: 100%;
|
33
|
+
display:inline-block !important;
|
34
|
+
vertical-align:middle !important;
|
35
|
+
}
|
36
|
+
}
|
37
|
+
|
38
|
+
.reply {
|
39
|
+
margin-left: 60px;
|
40
|
+
margin-top: -50px;
|
41
|
+
|
42
|
+
.date {
|
43
|
+
float: right;
|
44
|
+
font-size: 55%;
|
45
|
+
color: @white;
|
46
|
+
}
|
47
|
+
.author {
|
48
|
+
color: @white;
|
49
|
+
}
|
50
|
+
.text {
|
51
|
+
.tertiary-text;
|
52
|
+
color: @white;
|
53
|
+
line-height: 16px;
|
54
|
+
&:hover {
|
55
|
+
color: @white;
|
56
|
+
}
|
57
|
+
}
|
58
|
+
}
|
59
|
+
|
60
|
+
.sticker {
|
61
|
+
width: 0;
|
62
|
+
height: 0;
|
63
|
+
border-top: 10px solid @white;
|
64
|
+
position: absolute;
|
65
|
+
display: block;
|
66
|
+
z-index: 1000;
|
67
|
+
}
|
68
|
+
|
69
|
+
.sticker.sticker-color-blue {border-color: @blue !important;}
|
70
|
+
.sticker.sticker-color-blueLight {border-color: @blueLight !important;}
|
71
|
+
.sticker.sticker-color-blueDark {border-color: @blueDark !important;}
|
72
|
+
.sticker.sticker-color-green {border-color: @green !important;}
|
73
|
+
.sticker.sticker-color-greenLight {border-color: @greenLight !important;}
|
74
|
+
.sticker.sticker-color-greenDark {border-color: @greenDark !important;}
|
75
|
+
.sticker.sticker-color-red {border-color: @red !important;}
|
76
|
+
.sticker.sticker-color-yellow {border-color: @yellow !important;}
|
77
|
+
.sticker.sticker-color-orange {border-color: @orange !important;}
|
78
|
+
.sticker.sticker-color-orangeDark {border-color: @orangeDark !important;}
|
79
|
+
.sticker.sticker-color-pink {border-color: @pink !important;}
|
80
|
+
.sticker.sticker-color-pinkDark {border-color: @pinkDark !important;}
|
81
|
+
.sticker.sticker-color-purple {border-color: @purple !important;}
|
82
|
+
.sticker.sticker-color-darken {border-color: @darken !important;}
|
83
|
+
.sticker.sticker-color-white {border-color: @white !important;}
|
84
|
+
|
85
|
+
.sticker.sticker-left {
|
86
|
+
border-left: 20px solid transparent !important;
|
87
|
+
left: -20px;
|
88
|
+
}
|
89
|
+
|
90
|
+
.sticker.sticker-right {
|
91
|
+
border-right: 20px solid transparent !important;
|
92
|
+
right: -20px;
|
93
|
+
}
|
94
|
+
}
|
95
|
+
}
|
96
|
+
|
97
|
+
|
98
|
+
.notices {
|
99
|
+
list-style: none;
|
100
|
+
margin: 0;
|
101
|
+
padding: 0;
|
102
|
+
|
103
|
+
& > div, & > li, & > span, & > a {
|
104
|
+
width: 385px;
|
105
|
+
height: 90px;
|
106
|
+
display: block;
|
107
|
+
overflow: hidden;
|
108
|
+
position: relative;
|
109
|
+
margin-bottom: 10px;
|
110
|
+
|
111
|
+
.notice-header, .header {
|
112
|
+
position: relative;
|
113
|
+
background: transparent;
|
114
|
+
#font > .subheader-secondary;
|
115
|
+
font-size: 12pt;
|
116
|
+
margin-top: 5px;
|
117
|
+
margin-left: 10px;
|
118
|
+
}
|
119
|
+
|
120
|
+
.notice-text, .text {
|
121
|
+
position: relative;
|
122
|
+
margin-right: 50px;
|
123
|
+
margin-left: 10px;
|
124
|
+
color: #fff;
|
125
|
+
#font > .small;
|
126
|
+
margin-top: -5px;
|
127
|
+
line-height: 16px;
|
128
|
+
}
|
129
|
+
|
130
|
+
.notice-icon, .icon {
|
131
|
+
position: absolute;
|
132
|
+
right: 10px;
|
133
|
+
bottom: 5px;
|
134
|
+
|
135
|
+
img {
|
136
|
+
width: 32px;
|
137
|
+
height: 32px;
|
138
|
+
}
|
139
|
+
}
|
140
|
+
|
141
|
+
.notice-image, .image {
|
142
|
+
max-height: 48px;
|
143
|
+
width: 48px;
|
144
|
+
height: 48px;
|
145
|
+
margin: 20px 20px 20px 20px;
|
146
|
+
float: left;
|
147
|
+
|
148
|
+
img {
|
149
|
+
width: 48px;
|
150
|
+
height: 48px;
|
151
|
+
}
|
152
|
+
}
|
153
|
+
|
154
|
+
.close {
|
155
|
+
position: absolute;
|
156
|
+
top: 5px;
|
157
|
+
right: 10px;
|
158
|
+
cursor: pointer;
|
159
|
+
font-weight: bold;
|
160
|
+
text-decoration: none;
|
161
|
+
color: #fff !important;
|
162
|
+
}
|
163
|
+
.close::before {
|
164
|
+
content: "\00d7";
|
165
|
+
color: #fff !important;
|
166
|
+
}
|
167
|
+
|
168
|
+
.image-large {
|
169
|
+
width: 88px;
|
170
|
+
height: 88px;
|
171
|
+
margin: 1px 10px 1px 1px;
|
172
|
+
overflow: hidden;
|
173
|
+
float: left;
|
174
|
+
|
175
|
+
img {
|
176
|
+
width: 88px;
|
177
|
+
height: 88px;
|
178
|
+
}
|
179
|
+
}
|
180
|
+
}
|
181
|
+
}
|
@@ -0,0 +1,90 @@
|
|
1
|
+
/*
|
2
|
+
* Metro UI CSS v 0.1.1
|
3
|
+
* Copyright 2012 Sergey Pimenov
|
4
|
+
* Licensed under the MIT Lilcense
|
5
|
+
*
|
6
|
+
* PageControl.less
|
7
|
+
*
|
8
|
+
*/
|
9
|
+
|
10
|
+
.page-control {
|
11
|
+
position: relative;
|
12
|
+
.clearfix;
|
13
|
+
|
14
|
+
& > ul {
|
15
|
+
.unstyled;
|
16
|
+
.clearfix;
|
17
|
+
position: absolute;
|
18
|
+
z-index: 9000;
|
19
|
+
width: 100%;
|
20
|
+
background-color: rgba(217, 217, 217, 0.16);
|
21
|
+
height: 30px;
|
22
|
+
|
23
|
+
li:first-child {
|
24
|
+
margin-left: 20px;
|
25
|
+
}
|
26
|
+
|
27
|
+
li {
|
28
|
+
float: left;
|
29
|
+
display: block;
|
30
|
+
text-align: center;
|
31
|
+
|
32
|
+
img {
|
33
|
+
float: left;
|
34
|
+
width: 16px;
|
35
|
+
height: 16px;
|
36
|
+
margin-right: 5px;
|
37
|
+
margin-top: 3px;
|
38
|
+
}
|
39
|
+
|
40
|
+
&.active {
|
41
|
+
border: 1px #ccc solid;
|
42
|
+
border-bottom: 0;
|
43
|
+
background-color: #fff;
|
44
|
+
|
45
|
+
span, a {
|
46
|
+
color: @blue;
|
47
|
+
}
|
48
|
+
}
|
49
|
+
|
50
|
+
span, a {
|
51
|
+
text-decoration: none;
|
52
|
+
//text-transform: uppercase;
|
53
|
+
display: block;
|
54
|
+
float: left;
|
55
|
+
padding: 5px 10px;
|
56
|
+
color: #1e1e1e;
|
57
|
+
#font > .navigation;
|
58
|
+
cursor: pointer;
|
59
|
+
outline: 0;
|
60
|
+
}
|
61
|
+
}
|
62
|
+
}
|
63
|
+
|
64
|
+
&.tabs-right {
|
65
|
+
& > ul {
|
66
|
+
li {
|
67
|
+
.place-right;
|
68
|
+
}
|
69
|
+
}
|
70
|
+
}
|
71
|
+
|
72
|
+
.frames {
|
73
|
+
margin-top: 28px;
|
74
|
+
width: 100%;
|
75
|
+
min-height: 50px;
|
76
|
+
border: 1px #ccc solid;
|
77
|
+
|
78
|
+
.frame {
|
79
|
+
width: 100%;
|
80
|
+
min-height: 100%;
|
81
|
+
height: auto;
|
82
|
+
display: none;
|
83
|
+
padding: 20px;
|
84
|
+
|
85
|
+
&.active {
|
86
|
+
display: block;
|
87
|
+
}
|
88
|
+
}
|
89
|
+
}
|
90
|
+
}
|