activeadmin_materialize_theme 0.1.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (94) hide show
  1. checksums.yaml +7 -0
  2. data/MIT-LICENSE +20 -0
  3. data/README.md +26 -0
  4. data/Rakefile +34 -0
  5. data/app/assets/config/activeadmin_materialize_theme_manifest.js +1 -0
  6. data/app/assets/javascripts/activeadmin_materialize_theme.js +65 -0
  7. data/app/assets/javascripts/materialize/anime.min.js +34 -0
  8. data/app/assets/javascripts/materialize/autocomplete.js +450 -0
  9. data/app/assets/javascripts/materialize/bin/materialize.js +12374 -0
  10. data/app/assets/javascripts/materialize/bin/materialize.min.js +6 -0
  11. data/app/assets/javascripts/materialize/buttons.js +354 -0
  12. data/app/assets/javascripts/materialize/cards.js +40 -0
  13. data/app/assets/javascripts/materialize/carousel.js +717 -0
  14. data/app/assets/javascripts/materialize/cash.js +960 -0
  15. data/app/assets/javascripts/materialize/characterCounter.js +136 -0
  16. data/app/assets/javascripts/materialize/chips.js +481 -0
  17. data/app/assets/javascripts/materialize/collapsible.js +275 -0
  18. data/app/assets/javascripts/materialize/component.js +44 -0
  19. data/app/assets/javascripts/materialize/datepicker.js +975 -0
  20. data/app/assets/javascripts/materialize/dropdown.js +617 -0
  21. data/app/assets/javascripts/materialize/forms.js +275 -0
  22. data/app/assets/javascripts/materialize/global.js +427 -0
  23. data/app/assets/javascripts/materialize/materialbox.js +453 -0
  24. data/app/assets/javascripts/materialize/modal.js +382 -0
  25. data/app/assets/javascripts/materialize/parallax.js +138 -0
  26. data/app/assets/javascripts/materialize/pushpin.js +145 -0
  27. data/app/assets/javascripts/materialize/range.js +263 -0
  28. data/app/assets/javascripts/materialize/scrollspy.js +295 -0
  29. data/app/assets/javascripts/materialize/select.js +432 -0
  30. data/app/assets/javascripts/materialize/sidenav.js +580 -0
  31. data/app/assets/javascripts/materialize/slider.js +359 -0
  32. data/app/assets/javascripts/materialize/tabs.js +402 -0
  33. data/app/assets/javascripts/materialize/tapTarget.js +314 -0
  34. data/app/assets/javascripts/materialize/timepicker.js +647 -0
  35. data/app/assets/javascripts/materialize/toasts.js +310 -0
  36. data/app/assets/javascripts/materialize/tooltip.js +303 -0
  37. data/app/assets/javascripts/materialize/waves.js +335 -0
  38. data/app/assets/stylesheets/activeadmin_materialize_theme/base.scss +107 -0
  39. data/app/assets/stylesheets/activeadmin_materialize_theme/components/footer.scss +18 -0
  40. data/app/assets/stylesheets/activeadmin_materialize_theme/components/form.scss +140 -0
  41. data/app/assets/stylesheets/activeadmin_materialize_theme/components/header.scss +61 -0
  42. data/app/assets/stylesheets/activeadmin_materialize_theme/components/layout_index.scss +83 -0
  43. data/app/assets/stylesheets/activeadmin_materialize_theme/components/layout_show.scss +56 -0
  44. data/app/assets/stylesheets/activeadmin_materialize_theme/components/sidebar.scss +37 -0
  45. data/app/assets/stylesheets/activeadmin_materialize_theme/components/title_bar.scss +43 -0
  46. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/LICENSE +21 -0
  47. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/README.md +91 -0
  48. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_badges.scss +55 -0
  49. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_buttons.scss +322 -0
  50. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_cards.scss +195 -0
  51. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_carousel.scss +90 -0
  52. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_chips.scss +90 -0
  53. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_collapsible.scss +91 -0
  54. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_color-classes.scss +32 -0
  55. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_color-variables.scss +370 -0
  56. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_datepicker.scss +191 -0
  57. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_dropdown.scss +85 -0
  58. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_global.scss +769 -0
  59. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_grid.scss +156 -0
  60. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_icons-material-design.scss +5 -0
  61. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_materialbox.scss +43 -0
  62. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_modal.scss +94 -0
  63. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_navbar.scss +208 -0
  64. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_normalize.scss +447 -0
  65. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_preloader.scss +334 -0
  66. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_pulse.scss +34 -0
  67. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_sidenav.scss +216 -0
  68. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_slider.scss +92 -0
  69. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_table_of_contents.scss +33 -0
  70. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_tabs.scss +99 -0
  71. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_tapTarget.scss +103 -0
  72. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_timepicker.scss +183 -0
  73. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_toast.scss +58 -0
  74. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_tooltip.scss +32 -0
  75. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_transitions.scss +13 -0
  76. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_typography.scss +60 -0
  77. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_variables.scss +349 -0
  78. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_waves.scss +114 -0
  79. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/forms/_checkboxes.scss +200 -0
  80. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/forms/_file-input.scss +44 -0
  81. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/forms/_forms.scss +22 -0
  82. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/forms/_input-fields.scss +354 -0
  83. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/forms/_radio-buttons.scss +115 -0
  84. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/forms/_range.scss +161 -0
  85. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/forms/_select.scss +180 -0
  86. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/forms/_switches.scss +89 -0
  87. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/materialize.scss +41 -0
  88. data/app/assets/stylesheets/activeadmin_materialize_theme/normalize.css +349 -0
  89. data/app/assets/stylesheets/activeadmin_materialize_theme/theme.scss +13 -0
  90. data/app/assets/stylesheets/activeadmin_materialize_theme/variables.scss +14 -0
  91. data/lib/activeadmin_materialize_theme.rb +6 -0
  92. data/lib/activeadmin_materialize_theme/engine.rb +7 -0
  93. data/lib/activeadmin_materialize_theme/version.rb +5 -0
  94. metadata +149 -0
@@ -0,0 +1,103 @@
1
+ .tap-target-wrapper {
2
+ width: 800px;
3
+ height: 800px;
4
+ position: fixed;
5
+ z-index: 1000;
6
+ visibility: hidden;
7
+ transition: visibility 0s .3s;
8
+ }
9
+
10
+ .tap-target-wrapper.open {
11
+ visibility: visible;
12
+ transition: visibility 0s;
13
+
14
+ .tap-target {
15
+ transform: scale(1);
16
+ opacity: .95;
17
+ transition:
18
+ transform .3s cubic-bezier(.42,0,.58,1),
19
+ opacity .3s cubic-bezier(.42,0,.58,1);
20
+ }
21
+
22
+ .tap-target-wave::before {
23
+ transform: scale(1);
24
+ }
25
+ .tap-target-wave::after {
26
+ visibility: visible;
27
+ animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
28
+ transition:
29
+ opacity .3s,
30
+ transform .3s,
31
+ visibility 0s 1s;
32
+ }
33
+ }
34
+
35
+ .tap-target {
36
+ position: absolute;
37
+ font-size: 1rem;
38
+ border-radius: 50%;
39
+ background-color: $primary-color;
40
+ box-shadow: 0 20px 20px 0 rgba(0,0,0,0.14), 0 10px 50px 0 rgba(0,0,0,0.12), 0 30px 10px -20px rgba(0,0,0,0.2);
41
+ width: 100%;
42
+ height: 100%;
43
+ opacity: 0;
44
+ transform: scale(0);
45
+ transition:
46
+ transform .3s cubic-bezier(.42,0,.58,1),
47
+ opacity .3s cubic-bezier(.42,0,.58,1);
48
+ }
49
+
50
+ .tap-target-content {
51
+ position: relative;
52
+ display: table-cell;
53
+ }
54
+
55
+ .tap-target-wave {
56
+ &::before,
57
+ &::after {
58
+ content: '';
59
+ display: block;
60
+ position: absolute;
61
+ width: 100%;
62
+ height: 100%;
63
+ border-radius: 50%;
64
+ background-color: #ffffff;
65
+ }
66
+ &::before {
67
+ transform: scale(0);
68
+ transition: transform .3s;
69
+ }
70
+ &::after {
71
+ visibility: hidden;
72
+ transition:
73
+ opacity .3s,
74
+ transform .3s,
75
+ visibility 0s;
76
+ z-index: -1;
77
+ }
78
+
79
+ position: absolute;
80
+ border-radius: 50%;
81
+ z-index: 10001;
82
+ }
83
+
84
+ .tap-target-origin {
85
+ &:not(.btn),
86
+ &:not(.btn):hover {
87
+ background: none;
88
+ }
89
+
90
+ top: 50%;
91
+ left: 50%;
92
+ transform: translate(-50%,-50%);
93
+
94
+ z-index: 10002;
95
+ position: absolute !important;
96
+ }
97
+
98
+ @media only screen and (max-width: 600px) {
99
+ .tap-target, .tap-target-wrapper {
100
+ width: 600px;
101
+ height: 600px;
102
+ }
103
+ }
@@ -0,0 +1,183 @@
1
+ /* Timepicker Containers */
2
+ .timepicker-modal {
3
+ max-width: 325px;
4
+ max-height: none;
5
+ }
6
+
7
+ .timepicker-container.modal-content {
8
+ display: flex;
9
+ flex-direction: column;
10
+ padding: 0;
11
+ }
12
+
13
+ .text-primary {
14
+ color: rgba(255, 255, 255, 1);
15
+ }
16
+
17
+
18
+ /* Clock Digital Display */
19
+ .timepicker-digital-display {
20
+ flex: 1 auto;
21
+ background-color: $secondary-color;
22
+ padding: 10px;
23
+ font-weight: 300;
24
+ }
25
+
26
+ .timepicker-text-container {
27
+ font-size: 4rem;
28
+ font-weight: bold;
29
+ text-align: center;
30
+ color: rgba(255, 255, 255, 0.6);
31
+ font-weight: 400;
32
+ position: relative;
33
+ user-select: none;
34
+ }
35
+
36
+ .timepicker-span-hours,
37
+ .timepicker-span-minutes,
38
+ .timepicker-span-am-pm div {
39
+ cursor: pointer;
40
+ }
41
+
42
+ .timepicker-span-hours {
43
+ margin-right: 3px;
44
+ }
45
+
46
+ .timepicker-span-minutes {
47
+ margin-left: 3px;
48
+ }
49
+
50
+ .timepicker-display-am-pm {
51
+ font-size: 1.3rem;
52
+ position: absolute;
53
+ right: 1rem;
54
+ bottom: 1rem;
55
+ font-weight: 400;
56
+ }
57
+
58
+
59
+ /* Analog Clock Display */
60
+ .timepicker-analog-display {
61
+ flex: 2.5 auto;
62
+ }
63
+
64
+ .timepicker-plate {
65
+ background-color: $timepicker-clock-plate-bg;
66
+ border-radius: 50%;
67
+ width: 270px;
68
+ height: 270px;
69
+ overflow: visible;
70
+ position: relative;
71
+ margin: auto;
72
+ margin-top: 25px;
73
+ margin-bottom: 5px;
74
+ user-select: none;
75
+ }
76
+
77
+ .timepicker-canvas,
78
+ .timepicker-dial {
79
+ position: absolute;
80
+ left: 0;
81
+ right: 0;
82
+ top: 0;
83
+ bottom: 0;
84
+ }
85
+ .timepicker-minutes {
86
+ visibility: hidden;
87
+ }
88
+
89
+ .timepicker-tick {
90
+ border-radius: 50%;
91
+ color: $timepicker-clock-color;
92
+ line-height: 40px;
93
+ text-align: center;
94
+ width: 40px;
95
+ height: 40px;
96
+ position: absolute;
97
+ cursor: pointer;
98
+ font-size: 15px;
99
+ }
100
+
101
+ .timepicker-tick.active,
102
+ .timepicker-tick:hover {
103
+ background-color: transparentize($secondary-color, .75);
104
+ }
105
+ .timepicker-dial {
106
+ transition: transform 350ms, opacity 350ms;
107
+ }
108
+ .timepicker-dial-out {
109
+ &.timepicker-hours {
110
+ transform: scale(1.1, 1.1);
111
+ }
112
+
113
+ &.timepicker-minutes {
114
+ transform: scale(.8, .8);
115
+ }
116
+
117
+ opacity: 0;
118
+ }
119
+ .timepicker-canvas {
120
+ transition: opacity 175ms;
121
+
122
+ line {
123
+ stroke: $secondary-color;
124
+ stroke-width: 4;
125
+ stroke-linecap: round;
126
+ }
127
+ }
128
+ .timepicker-canvas-out {
129
+ opacity: 0.25;
130
+ }
131
+ .timepicker-canvas-bearing {
132
+ stroke: none;
133
+ fill: $secondary-color;
134
+ }
135
+ .timepicker-canvas-bg {
136
+ stroke: none;
137
+ fill: $secondary-color;
138
+ }
139
+
140
+
141
+ /* Footer */
142
+ .timepicker-footer {
143
+ margin: 0 auto;
144
+ padding: 5px 1rem;
145
+ display: flex;
146
+ justify-content: space-between;
147
+ }
148
+
149
+ .timepicker-clear {
150
+ color: $error-color;
151
+ }
152
+
153
+ .timepicker-close {
154
+ color: $secondary-color;
155
+ }
156
+
157
+ .timepicker-clear,
158
+ .timepicker-close {
159
+ padding: 0 20px;
160
+ }
161
+
162
+ /* Media Queries */
163
+ @media #{$medium-and-up} {
164
+ .timepicker-modal {
165
+ max-width: 600px;
166
+ }
167
+
168
+ .timepicker-container.modal-content {
169
+ flex-direction: row;
170
+ }
171
+
172
+ .timepicker-text-container {
173
+ top: 32%;
174
+ }
175
+
176
+ .timepicker-display-am-pm {
177
+ position: relative;
178
+ right: auto;
179
+ bottom: auto;
180
+ text-align: center;
181
+ margin-top: 1.2rem;
182
+ }
183
+ }
@@ -0,0 +1,58 @@
1
+ #toast-container {
2
+ display:block;
3
+ position: fixed;
4
+ z-index: 10000;
5
+
6
+ @media #{$small-and-down} {
7
+ min-width: 100%;
8
+ bottom: 0%;
9
+ }
10
+ @media #{$medium-only} {
11
+ left: 5%;
12
+ bottom: 7%;
13
+ max-width: 90%;
14
+ }
15
+ @media #{$large-and-up} {
16
+ top: 10%;
17
+ right: 7%;
18
+ max-width: 86%;
19
+ }
20
+ }
21
+
22
+ .toast {
23
+ @extend .z-depth-1;
24
+ border-radius: 2px;
25
+ top: 35px;
26
+ width: auto;
27
+ margin-top: 10px;
28
+ position: relative;
29
+ max-width:100%;
30
+ height: auto;
31
+ min-height: $toast-height;
32
+ line-height: 1.5em;
33
+ background-color: $toast-color;
34
+ padding: 10px 25px;
35
+ font-size: 1.1rem;
36
+ font-weight: 300;
37
+ color: $toast-text-color;
38
+ display: flex;
39
+ align-items: center;
40
+ justify-content: space-between;
41
+ cursor: default;
42
+
43
+ .toast-action {
44
+ color: $toast-action-color;
45
+ font-weight: 500;
46
+ margin-right: -25px;
47
+ margin-left: 3rem;
48
+ }
49
+
50
+ &.rounded{
51
+ border-radius: 24px;
52
+ }
53
+
54
+ @media #{$small-and-down} {
55
+ width: 100%;
56
+ border-radius: 0;
57
+ }
58
+ }
@@ -0,0 +1,32 @@
1
+ .material-tooltip {
2
+ padding: 10px 8px;
3
+ font-size: 1rem;
4
+ z-index: 2000;
5
+ background-color: transparent;
6
+ border-radius: 2px;
7
+ color: #fff;
8
+ min-height: 36px;
9
+ line-height: 120%;
10
+ opacity: 0;
11
+ position: absolute;
12
+ text-align: center;
13
+ max-width: calc(100% - 4px);
14
+ overflow: hidden;
15
+ left: 0;
16
+ top: 0;
17
+ pointer-events: none;
18
+ visibility: hidden;
19
+ background-color: #323232;
20
+ }
21
+
22
+ .backdrop {
23
+ position: absolute;
24
+ opacity: 0;
25
+ height: 7px;
26
+ width: 14px;
27
+ border-radius: 0 0 50% 50%;
28
+ background-color: #323232;
29
+ z-index: -1;
30
+ transform-origin: 50% 0%;
31
+ visibility: hidden;
32
+ }
@@ -0,0 +1,13 @@
1
+ // Scale transition
2
+ .scale-transition {
3
+ &.scale-out {
4
+ transform: scale(0);
5
+ transition: transform .2s !important;
6
+ }
7
+
8
+ &.scale-in {
9
+ transform: scale(1);
10
+ }
11
+
12
+ transition: transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
13
+ }
@@ -0,0 +1,60 @@
1
+
2
+ a {
3
+ text-decoration: none;
4
+ }
5
+
6
+ html{
7
+ line-height: 1.5;
8
+
9
+ @media only screen and (min-width: 0) {
10
+ font-size: 14px;
11
+ }
12
+
13
+ @media only screen and (min-width: $medium-screen) {
14
+ font-size: 14.5px;
15
+ }
16
+
17
+ @media only screen and (min-width: $large-screen) {
18
+ font-size: 15px;
19
+ }
20
+
21
+ font-family: $font-stack;
22
+ font-weight: normal;
23
+ color: $off-black;
24
+ }
25
+ h1, h2, h3, h4, h5, h6 {
26
+ font-weight: 400;
27
+ line-height: 1.3;
28
+ }
29
+
30
+ // Header Styles
31
+ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
32
+ h1 { font-size: $h1-fontsize; line-height: 110%; margin: ($h1-fontsize / 1.5) 0 ($h1-fontsize / 2.5) 0;}
33
+ h2 { font-size: $h2-fontsize; line-height: 110%; margin: ($h2-fontsize / 1.5) 0 ($h2-fontsize / 2.5) 0;}
34
+ h3 { font-size: $h3-fontsize; line-height: 110%; margin: ($h3-fontsize / 1.5) 0 ($h3-fontsize / 2.5) 0;}
35
+ h4 { font-size: $h4-fontsize; line-height: 110%; margin: ($h4-fontsize / 1.5) 0 ($h4-fontsize / 2.5) 0;}
36
+ h5 { font-size: $h5-fontsize; line-height: 110%; margin: ($h5-fontsize / 1.5) 0 ($h5-fontsize / 2.5) 0;}
37
+ h6 { font-size: $h6-fontsize; line-height: 110%; margin: ($h6-fontsize / 1.5) 0 ($h6-fontsize / 2.5) 0;}
38
+
39
+ // Text Styles
40
+ em { font-style: italic; }
41
+ strong { font-weight: 500; }
42
+ small { font-size: 75%; }
43
+ .light { font-weight: 300; }
44
+ .thin { font-weight: 200; }
45
+
46
+
47
+ .flow-text{
48
+ $i: 0;
49
+ @while $i <= $intervals {
50
+ @media only screen and (min-width : 360 + ($i * $interval-size)) {
51
+ font-size: 1.2rem * (1 + (.02 * $i));
52
+ }
53
+ $i: $i + 1;
54
+ }
55
+
56
+ // Handle below 360px screen
57
+ @media only screen and (max-width: 360px) {
58
+ font-size: 1.2rem;
59
+ }
60
+ }