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.
Files changed (99) hide show
  1. data/.gitignore +18 -0
  2. data/Gemfile +4 -0
  3. data/README.md +44 -0
  4. data/Rakefile +1 -0
  5. data/lib/generators/metro/layout/layout_generator.rb +19 -0
  6. data/lib/generators/metro/layout/templates/layout.html.erb +89 -0
  7. data/lib/metro-ui-rails.rb +10 -0
  8. data/lib/metro/ui/rails/engine.rb +15 -0
  9. data/lib/metro/ui/rails/metro.rb +2 -0
  10. data/lib/metro/ui/rails/version.rb +7 -0
  11. data/metro-ui-rails.gemspec +26 -0
  12. data/vendor/assets/images/.DS_Store +0 -0
  13. data/vendor/assets/images/metro/.DS_Store +0 -0
  14. data/vendor/assets/images/metro/ui/.DS_Store +0 -0
  15. data/vendor/assets/images/metro/ui/Calendar128.png +0 -0
  16. data/vendor/assets/images/metro/ui/Camera48.png +0 -0
  17. data/vendor/assets/images/metro/ui/InternetExplorer128.png +0 -0
  18. data/vendor/assets/images/metro/ui/Mail128.png +0 -0
  19. data/vendor/assets/images/metro/ui/Market128.png +0 -0
  20. data/vendor/assets/images/metro/ui/Music128.png +0 -0
  21. data/vendor/assets/images/metro/ui/Picture128.png +0 -0
  22. data/vendor/assets/images/metro/ui/Rss128.png +0 -0
  23. data/vendor/assets/images/metro/ui/Video128.png +0 -0
  24. data/vendor/assets/images/metro/ui/YouTube128.png +0 -0
  25. data/vendor/assets/images/metro/ui/armor.png +0 -0
  26. data/vendor/assets/images/metro/ui/bage-activity.png +0 -0
  27. data/vendor/assets/images/metro/ui/bage-alert.png +0 -0
  28. data/vendor/assets/images/metro/ui/bage-attention.png +0 -0
  29. data/vendor/assets/images/metro/ui/bage-available.png +0 -0
  30. data/vendor/assets/images/metro/ui/bage-away.png +0 -0
  31. data/vendor/assets/images/metro/ui/bage-busy.png +0 -0
  32. data/vendor/assets/images/metro/ui/bage-error.png +0 -0
  33. data/vendor/assets/images/metro/ui/bage-newMessage.png +0 -0
  34. data/vendor/assets/images/metro/ui/bage-paused.png +0 -0
  35. data/vendor/assets/images/metro/ui/bage-playing.png +0 -0
  36. data/vendor/assets/images/metro/ui/bage-unavailable.png +0 -0
  37. data/vendor/assets/images/metro/ui/chrome.png +0 -0
  38. data/vendor/assets/images/metro/ui/collapse24-black.png +0 -0
  39. data/vendor/assets/images/metro/ui/collapse24.png +0 -0
  40. data/vendor/assets/images/metro/ui/collapse32-black.png +0 -0
  41. data/vendor/assets/images/metro/ui/collapse32.png +0 -0
  42. data/vendor/assets/images/metro/ui/download-32.png +0 -0
  43. data/vendor/assets/images/metro/ui/excel2013icon.png +0 -0
  44. data/vendor/assets/images/metro/ui/expand24-black.png +0 -0
  45. data/vendor/assets/images/metro/ui/expand24.png +0 -0
  46. data/vendor/assets/images/metro/ui/expand32-black.png +0 -0
  47. data/vendor/assets/images/metro/ui/expand32.png +0 -0
  48. data/vendor/assets/images/metro/ui/firefox.png +0 -0
  49. data/vendor/assets/images/metro/ui/fork-32.png +0 -0
  50. data/vendor/assets/images/metro/ui/github.png +0 -0
  51. data/vendor/assets/images/metro/ui/grid.png +0 -0
  52. data/vendor/assets/images/metro/ui/ie.png +0 -0
  53. data/vendor/assets/images/metro/ui/lock-open.png +0 -0
  54. data/vendor/assets/images/metro/ui/lock.png +0 -0
  55. data/vendor/assets/images/metro/ui/logo32.png +0 -0
  56. data/vendor/assets/images/metro/ui/onenote2013icon.png +0 -0
  57. data/vendor/assets/images/metro/ui/opera.png +0 -0
  58. data/vendor/assets/images/metro/ui/pull24-dark.png +0 -0
  59. data/vendor/assets/images/metro/ui/pull24.png +0 -0
  60. data/vendor/assets/images/metro/ui/responsive.png +0 -0
  61. data/vendor/assets/images/metro/ui/row24.png +0 -0
  62. data/vendor/assets/images/metro/ui/shield-user.png +0 -0
  63. data/vendor/assets/images/metro/ui/simple.png +0 -0
  64. data/vendor/assets/images/metro/ui/star32.png +0 -0
  65. data/vendor/assets/images/metro/ui/stock-up.png +0 -0
  66. data/vendor/assets/images/metro/ui/view-32.png +0 -0
  67. data/vendor/assets/images/metro/ui/word2013icon.png +0 -0
  68. data/vendor/assets/javascripts/metro-ui.js +4 -0
  69. data/vendor/assets/javascripts/metro-ui/accordion.js +44 -0
  70. data/vendor/assets/javascripts/metro-ui/buttonset.js +34 -0
  71. data/vendor/assets/javascripts/metro-ui/dropdown.js +94 -0
  72. data/vendor/assets/javascripts/metro-ui/pagecontrol.js +41 -0
  73. data/vendor/toolkit/metro-ui/accordion.less +61 -0
  74. data/vendor/toolkit/metro-ui/bricks.less +57 -0
  75. data/vendor/toolkit/metro-ui/buttons.less +124 -0
  76. data/vendor/toolkit/metro-ui/cards.less +113 -0
  77. data/vendor/toolkit/metro-ui/code.less +48 -0
  78. data/vendor/toolkit/metro-ui/colors.less +67 -0
  79. data/vendor/toolkit/metro-ui/forms.less +427 -0
  80. data/vendor/toolkit/metro-ui/grid.less +112 -0
  81. data/vendor/toolkit/metro-ui/hero.less +18 -0
  82. data/vendor/toolkit/metro-ui/images.less +121 -0
  83. data/vendor/toolkit/metro-ui/layout.less +273 -0
  84. data/vendor/toolkit/metro-ui/menus.less +320 -0
  85. data/vendor/toolkit/metro-ui/modern-responsive-max480.less +195 -0
  86. data/vendor/toolkit/metro-ui/modern-responsive-max767.less +74 -0
  87. data/vendor/toolkit/metro-ui/modern-responsive-max979.less +66 -0
  88. data/vendor/toolkit/metro-ui/modern-responsive-min1200.less +16 -0
  89. data/vendor/toolkit/metro-ui/modern-responsive.less +5 -0
  90. data/vendor/toolkit/metro-ui/modern.less +26 -0
  91. data/vendor/toolkit/metro-ui/notices.less +181 -0
  92. data/vendor/toolkit/metro-ui/pagecontrol.less +90 -0
  93. data/vendor/toolkit/metro-ui/reset.less +504 -0
  94. data/vendor/toolkit/metro-ui/routines.less +136 -0
  95. data/vendor/toolkit/metro-ui/tables.less +157 -0
  96. data/vendor/toolkit/metro-ui/theme-dark.less +50 -0
  97. data/vendor/toolkit/metro-ui/tiles.less +293 -0
  98. data/vendor/toolkit/metro-ui/typography.less +361 -0
  99. 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,16 @@
1
+ /* Large desktop */
2
+ @media (min-width: 980px) {
3
+ .navigation-bar {
4
+ .navigation-bar-inner {
5
+ .menu-pull {
6
+ display: none;
7
+ }
8
+ & > ul {
9
+ display: block !important;
10
+ }
11
+ }
12
+ }
13
+ }
14
+
15
+
16
+
@@ -0,0 +1,5 @@
1
+ @import "colors.less";
2
+ @import "modern-responsive-min1200.less";
3
+ @import "modern-responsive-max979.less";
4
+ @import "modern-responsive-max767.less";
5
+ @import "modern-responsive-max480.less";
@@ -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
+ }