dlegr250_material_design 0.1.0

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 (72) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +9 -0
  3. data/.rspec +2 -0
  4. data/.travis.yml +4 -0
  5. data/Gemfile +4 -0
  6. data/README.md +66 -0
  7. data/Rakefile +6 -0
  8. data/app/controllers/styleguide_controller.rb +5 -0
  9. data/app/views/styleguide/_buttons.html.erb +79 -0
  10. data/app/views/styleguide/_menus.html.erb +189 -0
  11. data/app/views/styleguide/_navigation.html.erb +28 -0
  12. data/app/views/styleguide/index.html.erb +9 -0
  13. data/bin/console +14 -0
  14. data/bin/setup +7 -0
  15. data/dlegr250_material_design.gemspec +34 -0
  16. data/lib/dlegr250_material_design.rb +6 -0
  17. data/lib/dlegr250_material_design/version.rb +3 -0
  18. data/vendor/assets/javascripts/base/init.js.coffee +14 -0
  19. data/vendor/assets/javascripts/components/dialog.coffee +54 -0
  20. data/vendor/assets/javascripts/components/forms.coffee +17 -0
  21. data/vendor/assets/javascripts/components/layout.coffee +76 -0
  22. data/vendor/assets/javascripts/components/menus.coffee +87 -0
  23. data/vendor/assets/javascripts/components/snackbar_handler.coffee +8 -0
  24. data/vendor/assets/javascripts/components/tabs.coffee +18 -0
  25. data/vendor/assets/javascripts/components/utility.coffee +8 -0
  26. data/vendor/assets/javascripts/dlegr250_material_design.js +20 -0
  27. data/vendor/assets/javascripts/extensions/coffeescript.js.coffee +9 -0
  28. data/vendor/assets/javascripts/extensions/jquery.js.coffee +30 -0
  29. data/vendor/assets/javascripts/third_party/hammer.min.js +7 -0
  30. data/vendor/assets/javascripts/third_party/handlebars.latest.js +4454 -0
  31. data/vendor/assets/javascripts/third_party/jquery.hammer.js +33 -0
  32. data/vendor/assets/javascripts/third_party/snackbarlight.js +218 -0
  33. data/vendor/assets/stylesheets/base/base.scss +73 -0
  34. data/vendor/assets/stylesheets/base/global_classes.scss +261 -0
  35. data/vendor/assets/stylesheets/base/mixins.scss +202 -0
  36. data/vendor/assets/stylesheets/base/normalize.scss +229 -0
  37. data/vendor/assets/stylesheets/base/variables.scss +177 -0
  38. data/vendor/assets/stylesheets/components/badges.scss +28 -0
  39. data/vendor/assets/stylesheets/components/blank_slates.scss +58 -0
  40. data/vendor/assets/stylesheets/components/boxes.scss +34 -0
  41. data/vendor/assets/stylesheets/components/buttons.scss +225 -0
  42. data/vendor/assets/stylesheets/components/cards.scss +110 -0
  43. data/vendor/assets/stylesheets/components/code.scss +13 -0
  44. data/vendor/assets/stylesheets/components/dialogs.scss +57 -0
  45. data/vendor/assets/stylesheets/components/dividers.scss +35 -0
  46. data/vendor/assets/stylesheets/components/forms/error_messages.scss +27 -0
  47. data/vendor/assets/stylesheets/components/forms/fields.scss +56 -0
  48. data/vendor/assets/stylesheets/components/forms/labels.scss +17 -0
  49. data/vendor/assets/stylesheets/components/forms/radios.scss +90 -0
  50. data/vendor/assets/stylesheets/components/forms/selects.scss +15 -0
  51. data/vendor/assets/stylesheets/components/forms/text_fields.scss +38 -0
  52. data/vendor/assets/stylesheets/components/forms/toggles.scss +70 -0
  53. data/vendor/assets/stylesheets/components/lists.scss +242 -0
  54. data/vendor/assets/stylesheets/components/menus.scss +164 -0
  55. data/vendor/assets/stylesheets/components/overlay.scss +27 -0
  56. data/vendor/assets/stylesheets/components/snackbarlight.scss +77 -0
  57. data/vendor/assets/stylesheets/components/spinners.scss +67 -0
  58. data/vendor/assets/stylesheets/components/tabs.scss +62 -0
  59. data/vendor/assets/stylesheets/components/tooltips.scss +75 -0
  60. data/vendor/assets/stylesheets/dlegr250_material_design.scss +47 -0
  61. data/vendor/assets/stylesheets/fonts/material_design_iconic_font.scss +5168 -0
  62. data/vendor/assets/stylesheets/fonts/material_design_iconic_font/Material-Design-Iconic-Font.eot +0 -0
  63. data/vendor/assets/stylesheets/fonts/material_design_iconic_font/Material-Design-Iconic-Font.svg +787 -0
  64. data/vendor/assets/stylesheets/fonts/material_design_iconic_font/Material-Design-Iconic-Font.ttf +0 -0
  65. data/vendor/assets/stylesheets/fonts/material_design_iconic_font/Material-Design-Iconic-Font.woff +0 -0
  66. data/vendor/assets/stylesheets/fonts/material_design_iconic_font/Material-Design-Iconic-Font.woff2 +0 -0
  67. data/vendor/assets/stylesheets/layouts/application/appbar.scss +93 -0
  68. data/vendor/assets/stylesheets/layouts/application/base.scss +27 -0
  69. data/vendor/assets/stylesheets/layouts/application/main.scss +26 -0
  70. data/vendor/assets/stylesheets/layouts/application/sidebars.scss +85 -0
  71. data/vendor/assets/stylesheets/layouts/authentication/base.scss +53 -0
  72. metadata +155 -0
@@ -0,0 +1,164 @@
1
+ //======================================================================
2
+ // EXAMPLE:
3
+ // <div class="menu-container">
4
+ // <i class="zmdi zmdi-more-vert button button-icon" role="menu-trigger" data-menu-id="menu-ID"></i>
5
+ // <div class="menu menu-width-3" data-position="bottom-right">
6
+ // <div class="menu-item">
7
+ // <div class="menu-item-icon">
8
+ // <i class="zmdi zmdi-star"></i>
9
+ // </div>
10
+ // <div class="menu-item-primary">
11
+ // Primary Text
12
+ // </div>
13
+ // <div class="menu-item-secondary">
14
+ // <%= link_to "", url, class: "zmdi zmdi-star" %>
15
+ // </div>
16
+ // </div>
17
+ // </div>
18
+ // </div>
19
+ //======================================================================
20
+
21
+ // Menus - triggers
22
+ //----------------------------------------------------------------------
23
+
24
+ [role="menu-trigger"] {
25
+ cursor: pointer;
26
+ }
27
+
28
+ // Menus - base
29
+ //----------------------------------------------------------------------
30
+
31
+ .menu-container {
32
+ display: inline-block;
33
+ position: relative;
34
+ }
35
+
36
+ .menu {
37
+ background: color("white");
38
+ line-height: normal;
39
+ overflow: hidden;
40
+ padding: 0;
41
+ position: absolute;
42
+ right: 0;
43
+ text-align: left;
44
+ text-transform: none;
45
+ top: 0;
46
+ transform-origin: 100% 0;
47
+ visibility: hidden;
48
+ will-change: scale;
49
+ z-index: $menu-depth;
50
+ @include box-shadow(0 2px 5px 1px rgba(0, 0, 0, 0.26));
51
+ @include rounded-corners;
52
+ @include transition(all 0.10s ease);
53
+ @include transform(scale(0.5));
54
+ @include transparency(0);
55
+
56
+ &.visible {
57
+ visibility: visible;
58
+ @include transform(scale(1));
59
+ @include transparency(1);
60
+ }
61
+ }
62
+
63
+ // Add padding at top/bottom on large
64
+ @media (min-width: $large-width) {
65
+ .menu {
66
+ padding: $spacing-small 0;
67
+ }
68
+ }
69
+
70
+ // Menus - menu item
71
+ //----------------------------------------------------------------------
72
+
73
+ .menu-item {
74
+ box-sizing: border-box;
75
+ color: color("text");
76
+ cursor: pointer;
77
+ display: table-row;
78
+ font-size: $font-size-normal;
79
+ @include no-touch-highlight;
80
+ @include transition(background-color 0.30s ease);
81
+
82
+ &:hover {
83
+ background-color: color("hover");
84
+ }
85
+ }
86
+
87
+ .menu-item:active {
88
+ .menu-item-icon,
89
+ .menu-item-primary,
90
+ .menu-item-secondary {
91
+ background-color: darken(color("hover"), 5%);
92
+ }
93
+ }
94
+
95
+ // Menus - menu item - shared
96
+ //----------------------------------------------------------------------
97
+
98
+ .menu-item-icon,
99
+ .menu-item-primary,
100
+ .menu-item-secondary {
101
+ box-sizing: border-box;
102
+ display: table-cell;
103
+ height: 48px;
104
+ min-height: 48px;
105
+ margin: 0;
106
+ padding: $spacing-normal 0;
107
+ vertical-align: middle;
108
+ @include transition(background-color 0.30s ease);
109
+ }
110
+
111
+ // Make large menus slightly smaller
112
+ @media (min-width: $large-width) {
113
+ .menu-item-icon,
114
+ .menu-item-primary,
115
+ .menu-item-secondary {
116
+ height: 36px;
117
+ min-height: 36px;
118
+ padding-bottom: $spacing-xsmall;
119
+ padding-top: $spacing-xsmall;
120
+ }
121
+ }
122
+
123
+
124
+ // Menus - menu item - icon
125
+ //----------------------------------------------------------------------
126
+
127
+ .menu-item-icon {
128
+ color: color("hint");
129
+ font-size: $font-size-icon;
130
+ padding: 0;
131
+ padding-left: $spacing-normal;
132
+ width: 72px - $spacing-normal * 2;
133
+ }
134
+
135
+ // Menus - menu item - primary
136
+ //----------------------------------------------------------------------
137
+
138
+ .menu-item-primary {
139
+ padding-left: $spacing-normal;
140
+ padding-right: $spacing-normal;
141
+ min-width: $menu-width;
142
+ }
143
+
144
+ // Menus - menu item - secondary
145
+ //----------------------------------------------------------------------
146
+
147
+ .menu-item-secondary {
148
+ color: color("hint");
149
+ padding-right: $spacing-normal;
150
+ text-align: right;
151
+
152
+ .icon {
153
+ font-size: $font-size-icon;
154
+ }
155
+ }
156
+
157
+ // Menus - sizes
158
+ //----------------------------------------------------------------------
159
+
160
+ @each $factor in $menu-width-factors {
161
+ .menu-width-#{$factor} .menu-item-primary {
162
+ min-width: $menu-width * $factor;
163
+ }
164
+ }
@@ -0,0 +1,27 @@
1
+ // Overlay - base
2
+ //----------------------------------------------------------------------
3
+
4
+ #overlay {
5
+ background-color: rgba(0, 0, 0, 0.6);
6
+ cursor: pointer;
7
+ height: 100%;
8
+ // display: none;
9
+ left: 0;
10
+ opacity: 1;
11
+ overflow-y: scroll;
12
+ position: fixed;
13
+ top: 0;
14
+ visibility: hidden;
15
+ width: 100%;
16
+ z-index: $overlay-depth;
17
+ @include no-touch-highlight;
18
+ @include transparency(0.5);
19
+ @include transition(all 0.10s ease);
20
+
21
+ &.visible {
22
+ // display: block;
23
+ visibility: visible;
24
+ @include transparency(1.0);
25
+ @include transition(all 0.30s ease);
26
+ }
27
+ }
@@ -0,0 +1,77 @@
1
+ //======================================================================
2
+ // See: https://github.com/joostLawerman/SnackbarLightjs
3
+ //======================================================================
4
+
5
+ // Snackbar - container
6
+ //----------------------------------------------------------------------
7
+
8
+ #snackbar-container {
9
+ bottom: 0;
10
+ left: 0;
11
+ position: fixed;
12
+ right: 0;
13
+ width: 100%;
14
+ z-index: 99999;
15
+ }
16
+
17
+ // Snackbar - base
18
+ //----------------------------------------------------------------------
19
+
20
+ .snackbar {
21
+ background-color: color("snackbar");
22
+ box-sizing: border-box;
23
+ clear: both;
24
+ color: color("white");
25
+ cursor: pointer;
26
+ font-size: $font-size-normal;
27
+ min-width: 100%;
28
+ opacity: 0;
29
+ overflow: hidden;
30
+ @include box-shadow(0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24));
31
+ @include transform(translateY(200%));
32
+ @include transition(transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, padding 0s linear 0.2s, height 0s linear 0.2s);
33
+ @include rounded-corners(0);
34
+
35
+ &.active {
36
+ height: auto;
37
+ margin-bottom: 0;
38
+ padding: 18px 24px;
39
+ @include transform(none);
40
+ @include transition(transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, height 0s linear 0.2s);
41
+ @include transparency(1.0);
42
+
43
+ a {
44
+ color: color("green");
45
+ font-weight: bold;
46
+ line-height: 100%;
47
+ margin-left: 24px;
48
+ text-decoration: none;
49
+ }
50
+ }
51
+ }
52
+
53
+ // Snackbar - media queries for medium and beyond
54
+ //----------------------------------------------------------------------
55
+
56
+ @media (min-width: $medium-width) {
57
+ #snackbar-container {
58
+ left: 20px !important;
59
+ right: auto;
60
+ width: auto;
61
+ }
62
+
63
+ #snackbar-container .snackbar {
64
+ max-width: 568px;
65
+ min-width: 288px;
66
+
67
+ &.active {
68
+ margin-bottom: 20px;
69
+ padding: 14px 24px;
70
+ }
71
+ }
72
+
73
+ #snackbar-container [class="snackbar active"] {
74
+ @include rounded-corners(2px);
75
+ margin-bottom: 20px;
76
+ }
77
+ }
@@ -0,0 +1,67 @@
1
+ // Variables
2
+ //----------------------------------------------------------------------
3
+
4
+ $spinner-height: 24px;
5
+
6
+ // Spinner container absolutely centers spinner
7
+ //----------------------------------------------------------------------
8
+
9
+ .spinner-container {
10
+ @include flex-center();
11
+ }
12
+
13
+ // Spinners - base
14
+ //----------------------------------------------------------------------
15
+
16
+ .spinner {
17
+ animation: rotate 0.8s infinite linear;
18
+ border-width: 4px;
19
+ border-style: solid;
20
+ border-color: color("divider");
21
+ border-right-color: transparent !important;
22
+ display: inline-block;
23
+ height: $spinner-height;
24
+ line-height: $spinner-height;
25
+ vertical-align: middle;
26
+ width: $spinner-height;
27
+ @include rounded-corners(50%);
28
+
29
+ &.spinner-xsmall {
30
+ height: $spinner-height * 0.5;
31
+ width: $spinner-height * 0.5;
32
+ }
33
+
34
+ &.spinner-small {
35
+ height: $spinner-height * 0.8;
36
+ width: $spinner-height * 0.8;
37
+ }
38
+
39
+ &.spinner-normal {
40
+ height: $spinner-height;
41
+ width: $spinner-height;
42
+ }
43
+
44
+ &.spinner-large {
45
+ height: $spinner-height * 1.5;
46
+ width: $spinner-height * 1.5;
47
+ }
48
+
49
+ &.spinner-xlarge {
50
+ height: $spinner-height * 2;
51
+ width: $spinner-height * 2;
52
+ }
53
+ }
54
+
55
+ // Spinners - colors
56
+ //----------------------------------------------------------------------
57
+
58
+ @each $color-name, $color in $colors {
59
+ .spinner-#{$color-name} {
60
+ border-color: $color;
61
+ }
62
+ }
63
+
64
+ @keyframes rotate {
65
+ 0% { transform: rotate(0deg); }
66
+ 100% { transform: rotate(360deg); }
67
+ }
@@ -0,0 +1,62 @@
1
+ // Tabs - base
2
+ //----------------------------------------------------------------------
3
+
4
+ .tabs {
5
+ display: table;
6
+ height: $tab-height;
7
+ table-layout: fixed;
8
+ width: 100%;
9
+ }
10
+
11
+ // Tabs - tab
12
+ //----------------------------------------------------------------------
13
+
14
+ .tab {
15
+ border-bottom: 2px solid transparent;
16
+ color: color("hint");
17
+ cursor: pointer;
18
+ display: table-cell;
19
+ font-size: $font-size-normal;
20
+ font-weight: 600;
21
+ height: $tab-height - 2px; // Account for 2px bottom border on tab
22
+ max-width: 264px;
23
+ min-width: 72px;
24
+ padding: 0 12px;
25
+ text-align: center;
26
+ text-decoration: none;
27
+ text-transform: uppercase;
28
+ vertical-align: middle;
29
+ @include transition(all 0.30s ease);
30
+
31
+ .icon {
32
+ color: color("hint");
33
+ font-size: $font-size-icon;
34
+ }
35
+
36
+ &:active {
37
+ background-color: color("hover");
38
+ }
39
+ }
40
+
41
+ // Tabs - colored
42
+ //----------------------------------------------------------------------
43
+
44
+ @each $color-name, $color in $colors {
45
+ .tabs-#{$color-name} {
46
+ .tab {
47
+ &:hover,
48
+ &:active {
49
+ border-color: lighten($color, 30%);
50
+ }
51
+
52
+ &.active {
53
+ border-color: $color;
54
+ }
55
+
56
+ &.active,
57
+ &.active .icon {
58
+ color: $color;
59
+ }
60
+ }
61
+ }
62
+ }
@@ -0,0 +1,75 @@
1
+ //======================================================================
2
+ // EXAMPLE:
3
+ // <div data-tooltip="Tooltip text" data-tooltip-position="left">
4
+ // Text
5
+ // </div>
6
+ //======================================================================
7
+
8
+ // Tooltips - base
9
+ //----------------------------------------------------------------------
10
+ [data-tooltip] {
11
+ position: relative;
12
+
13
+ &:after {
14
+ background: color("snackbar");
15
+ color: color("white");
16
+ content: attr(data-tooltip);
17
+ font-size: $font-size-small;
18
+ left: 50%;
19
+ line-height: normal;
20
+ padding: $spacing-small;
21
+ position: absolute;
22
+ text-transform: none;
23
+ top: 100%;
24
+ visibility: hidden;
25
+ white-space: nowrap;
26
+ z-index: 2;
27
+ @include rounded-corners;
28
+ @include transform(translateX(-50%) translateY(10%));
29
+ @include transition(opacity 0.2s ease, transform 0.2s ease);
30
+ @include transparency(0);
31
+ }
32
+
33
+ &:hover {
34
+ &:after {
35
+ display: block;
36
+ visibility: visible;
37
+ @include transparency(1);
38
+ }
39
+ }
40
+ }
41
+
42
+ // Tooltips - position
43
+ //----------------------------------------------------------------------
44
+
45
+ [data-tooltip-position="top"] {
46
+ &:after {
47
+ left: 50%;
48
+ top: 0;
49
+ @include transform(translateX(-50%) translateY(-10%));
50
+ }
51
+ }
52
+
53
+ [data-tooltip-position="right"] {
54
+ &:after {
55
+ left: 100%;
56
+ top: 20%;
57
+ @include transform(translateX(10%));
58
+ }
59
+ }
60
+
61
+ [data-tooltip-position="bottom"] {
62
+ &:after {
63
+ left: 50%;
64
+ top: 100%;
65
+ @include transform(translateX(-50%) translateY(10%));
66
+ }
67
+ }
68
+
69
+ [data-tooltip-position="left"] {
70
+ &:after {
71
+ left: 0;
72
+ top: 25%;
73
+ @include transform(translateX(-110%));
74
+ }
75
+ }