mtl 1.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (158) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +12 -0
  3. data/Gemfile +9 -0
  4. data/LICENSE.txt +22 -0
  5. data/README.md +104 -0
  6. data/Rakefile +6 -0
  7. data/app/assets/javascripts/mtl/clickables.coffee +25 -0
  8. data/app/assets/javascripts/mtl/collapsible.coffee +43 -0
  9. data/app/assets/javascripts/mtl/configuration.coffee.erb +1 -0
  10. data/app/assets/javascripts/mtl/document_modal.coffee +130 -0
  11. data/app/assets/javascripts/mtl/dropdown.coffee +24 -0
  12. data/app/assets/javascripts/mtl/hooks.coffee +14 -0
  13. data/app/assets/javascripts/mtl/icon.coffee.erb +17 -0
  14. data/app/assets/javascripts/mtl/modal.coffee +32 -0
  15. data/app/assets/javascripts/mtl/select.coffee +44 -0
  16. data/app/assets/javascripts/mtl/templates.coffee +4 -0
  17. data/app/assets/javascripts/mtl/toc.coffee +31 -0
  18. data/app/assets/javascripts/mtl.js +42 -0
  19. data/app/assets/stylesheets/mtl/all.scss +69 -0
  20. data/app/assets/stylesheets/mtl/extend/_avatars.scss +37 -0
  21. data/app/assets/stylesheets/mtl/extend/_buttons.scss +31 -0
  22. data/app/assets/stylesheets/mtl/extend/_cards.scss +21 -0
  23. data/app/assets/stylesheets/mtl/extend/_chips.scss +3 -0
  24. data/app/assets/stylesheets/mtl/extend/_collection-files.scss +108 -0
  25. data/app/assets/stylesheets/mtl/extend/_document-modals.scss +95 -0
  26. data/app/assets/stylesheets/mtl/extend/_dropdown.scss +12 -0
  27. data/app/assets/stylesheets/mtl/extend/_forms.scss +66 -0
  28. data/app/assets/stylesheets/mtl/extend/_global.scss +77 -0
  29. data/app/assets/stylesheets/mtl/extend/_grid.scss +25 -0
  30. data/app/assets/stylesheets/mtl/extend/_material-icons.scss +37 -0
  31. data/app/assets/stylesheets/mtl/extend/_mixins.scss +10 -0
  32. data/app/assets/stylesheets/mtl/extend/_roboto-rails.scss +49 -0
  33. data/app/assets/stylesheets/mtl/extend/_side-nav.scss +22 -0
  34. data/app/assets/stylesheets/mtl/extend/_toc.scss +12 -0
  35. data/app/assets/stylesheets/mtl/extend/_typography.scss +32 -0
  36. data/app/assets/stylesheets/mtl/extend/forms/_input-fields.scss +50 -0
  37. data/app/assets/stylesheets/mtl/layouts/_default.scss +220 -0
  38. data/app/assets/stylesheets/mtl/layouts/_single.scss +25 -0
  39. data/app/views/mtl/header.html.erb +25 -0
  40. data/bin/coffeelint.rb +16 -0
  41. data/lib/generators/mtl/install_generator.rb +20 -0
  42. data/lib/generators/mtl/templates/_color.scss +410 -0
  43. data/lib/generators/mtl/templates/_variables.scss +330 -0
  44. data/lib/generators/mtl/templates/mtl.scss +8 -0
  45. data/lib/generators/mtl/templates/simple_form.rb +211 -0
  46. data/lib/mtl/rails/card_file_presenter.rb +70 -0
  47. data/lib/mtl/rails/view_helpers.rb +412 -0
  48. data/lib/mtl/simple_form/suffix.rb +52 -0
  49. data/lib/mtl/version.rb +6 -0
  50. data/lib/mtl.rb +38 -0
  51. data/mtl.gemspec +35 -0
  52. data/package.json +11 -0
  53. data/spec/mtl/rails/card_file_presenter_spec.rb +126 -0
  54. data/spec/mtl/rails/view_helpers_spec.rb +193 -0
  55. data/spec/mtl/simple_form/suffix_spec.rb +39 -0
  56. data/spec/mtl_spec.rb +34 -0
  57. data/spec/spec_helper.rb +18 -0
  58. data/spec/support/dom.rb +15 -0
  59. data/vendor/assets/fonts/material-icons/MaterialIcons-Regular.eot +0 -0
  60. data/vendor/assets/fonts/material-icons/MaterialIcons-Regular.ijmap +1 -0
  61. data/vendor/assets/fonts/material-icons/MaterialIcons-Regular.svg +2373 -0
  62. data/vendor/assets/fonts/material-icons/MaterialIcons-Regular.ttf +0 -0
  63. data/vendor/assets/fonts/material-icons/MaterialIcons-Regular.woff +0 -0
  64. data/vendor/assets/fonts/material-icons/MaterialIcons-Regular.woff2 +0 -0
  65. data/vendor/assets/fonts/roboto/Roboto-Bold.eot +0 -0
  66. data/vendor/assets/fonts/roboto/Roboto-Bold.ttf +0 -0
  67. data/vendor/assets/fonts/roboto/Roboto-Bold.woff +0 -0
  68. data/vendor/assets/fonts/roboto/Roboto-Bold.woff2 +0 -0
  69. data/vendor/assets/fonts/roboto/Roboto-Light.eot +0 -0
  70. data/vendor/assets/fonts/roboto/Roboto-Light.ttf +0 -0
  71. data/vendor/assets/fonts/roboto/Roboto-Light.woff +0 -0
  72. data/vendor/assets/fonts/roboto/Roboto-Light.woff2 +0 -0
  73. data/vendor/assets/fonts/roboto/Roboto-Medium.eot +0 -0
  74. data/vendor/assets/fonts/roboto/Roboto-Medium.ttf +0 -0
  75. data/vendor/assets/fonts/roboto/Roboto-Medium.woff +0 -0
  76. data/vendor/assets/fonts/roboto/Roboto-Medium.woff2 +0 -0
  77. data/vendor/assets/fonts/roboto/Roboto-Regular.eot +0 -0
  78. data/vendor/assets/fonts/roboto/Roboto-Regular.ttf +0 -0
  79. data/vendor/assets/fonts/roboto/Roboto-Regular.woff +0 -0
  80. data/vendor/assets/fonts/roboto/Roboto-Regular.woff2 +0 -0
  81. data/vendor/assets/fonts/roboto/Roboto-Thin.eot +0 -0
  82. data/vendor/assets/fonts/roboto/Roboto-Thin.ttf +0 -0
  83. data/vendor/assets/fonts/roboto/Roboto-Thin.woff +0 -0
  84. data/vendor/assets/fonts/roboto/Roboto-Thin.woff2 +0 -0
  85. data/vendor/assets/javascripts/lodash.js +16607 -0
  86. data/vendor/assets/javascripts/materialize/animation.js +9 -0
  87. data/vendor/assets/javascripts/materialize/buttons.js +91 -0
  88. data/vendor/assets/javascripts/materialize/cards.js +26 -0
  89. data/vendor/assets/javascripts/materialize/carousel.js +454 -0
  90. data/vendor/assets/javascripts/materialize/character_counter.js +72 -0
  91. data/vendor/assets/javascripts/materialize/chips.js +267 -0
  92. data/vendor/assets/javascripts/materialize/collapsible.js +160 -0
  93. data/vendor/assets/javascripts/materialize/date_picker/picker.date.js +1430 -0
  94. data/vendor/assets/javascripts/materialize/date_picker/picker.js +1123 -0
  95. data/vendor/assets/javascripts/materialize/dropdown.js +265 -0
  96. data/vendor/assets/javascripts/materialize/forms.js +681 -0
  97. data/vendor/assets/javascripts/materialize/global.js +45 -0
  98. data/vendor/assets/javascripts/materialize/hammer.min.js +1 -0
  99. data/vendor/assets/javascripts/materialize/init.js +173 -0
  100. data/vendor/assets/javascripts/materialize/initial.js +11 -0
  101. data/vendor/assets/javascripts/materialize/jquery.easing.1.3.js +205 -0
  102. data/vendor/assets/javascripts/materialize/jquery.hammer.js +33 -0
  103. data/vendor/assets/javascripts/materialize/jquery.timeago.min.js +1 -0
  104. data/vendor/assets/javascripts/materialize/leanModal.js +192 -0
  105. data/vendor/assets/javascripts/materialize/materialbox.js +269 -0
  106. data/vendor/assets/javascripts/materialize/parallax.js +58 -0
  107. data/vendor/assets/javascripts/materialize/prism.js +8 -0
  108. data/vendor/assets/javascripts/materialize/pushpin.js +71 -0
  109. data/vendor/assets/javascripts/materialize/scrollFire.js +48 -0
  110. data/vendor/assets/javascripts/materialize/scrollspy.js +283 -0
  111. data/vendor/assets/javascripts/materialize/sideNav.js +352 -0
  112. data/vendor/assets/javascripts/materialize/slider.js +321 -0
  113. data/vendor/assets/javascripts/materialize/tabs.js +148 -0
  114. data/vendor/assets/javascripts/materialize/toasts.js +136 -0
  115. data/vendor/assets/javascripts/materialize/tooltip.js +230 -0
  116. data/vendor/assets/javascripts/materialize/transitions.js +169 -0
  117. data/vendor/assets/javascripts/materialize/velocity.min.js +5 -0
  118. data/vendor/assets/javascripts/materialize/waves.js +338 -0
  119. data/vendor/assets/javascripts/pdfobject.js +254 -0
  120. data/vendor/assets/stylesheets/materialize/_buttons.scss +211 -0
  121. data/vendor/assets/stylesheets/materialize/_cards.scss +185 -0
  122. data/vendor/assets/stylesheets/materialize/_carousel.scss +85 -0
  123. data/vendor/assets/stylesheets/materialize/_chips.scss +74 -0
  124. data/vendor/assets/stylesheets/materialize/_collapsible.scss +90 -0
  125. data/vendor/assets/stylesheets/materialize/_color.scss +412 -0
  126. data/vendor/assets/stylesheets/materialize/_dropdown.scss +57 -0
  127. data/vendor/assets/stylesheets/materialize/_global.scss +781 -0
  128. data/vendor/assets/stylesheets/materialize/_grid.scss +147 -0
  129. data/vendor/assets/stylesheets/materialize/_icons-material-design.scss +5 -0
  130. data/vendor/assets/stylesheets/materialize/_materialbox.scss +42 -0
  131. data/vendor/assets/stylesheets/materialize/_mixins.scss +5 -0
  132. data/vendor/assets/stylesheets/materialize/_modal.scss +90 -0
  133. data/vendor/assets/stylesheets/materialize/_navbar.scss +182 -0
  134. data/vendor/assets/stylesheets/materialize/_normalize.scss +424 -0
  135. data/vendor/assets/stylesheets/materialize/_prefixer.scss +384 -0
  136. data/vendor/assets/stylesheets/materialize/_preloader.scss +334 -0
  137. data/vendor/assets/stylesheets/materialize/_roboto.scss +49 -0
  138. data/vendor/assets/stylesheets/materialize/_sideNav.scss +219 -0
  139. data/vendor/assets/stylesheets/materialize/_slider.scss +92 -0
  140. data/vendor/assets/stylesheets/materialize/_table_of_contents.scss +33 -0
  141. data/vendor/assets/stylesheets/materialize/_tabs.scss +56 -0
  142. data/vendor/assets/stylesheets/materialize/_toast.scss +65 -0
  143. data/vendor/assets/stylesheets/materialize/_tooltip.scss +32 -0
  144. data/vendor/assets/stylesheets/materialize/_typography.scss +61 -0
  145. data/vendor/assets/stylesheets/materialize/_variables.scss +313 -0
  146. data/vendor/assets/stylesheets/materialize/_waves.scss +177 -0
  147. data/vendor/assets/stylesheets/materialize/date_picker/_default.date.scss +435 -0
  148. data/vendor/assets/stylesheets/materialize/date_picker/_default.scss +201 -0
  149. data/vendor/assets/stylesheets/materialize/date_picker/_default.time.scss +125 -0
  150. data/vendor/assets/stylesheets/materialize/forms/_checkboxes.scss +220 -0
  151. data/vendor/assets/stylesheets/materialize/forms/_file-input.scss +38 -0
  152. data/vendor/assets/stylesheets/materialize/forms/_forms.scss +22 -0
  153. data/vendor/assets/stylesheets/materialize/forms/_input-fields.scss +273 -0
  154. data/vendor/assets/stylesheets/materialize/forms/_radio-buttons.scss +119 -0
  155. data/vendor/assets/stylesheets/materialize/forms/_range.scss +159 -0
  156. data/vendor/assets/stylesheets/materialize/forms/_select.scss +116 -0
  157. data/vendor/assets/stylesheets/materialize/forms/_switches.scss +78 -0
  158. metadata +309 -0
@@ -0,0 +1,33 @@
1
+ /***************
2
+ Nav List
3
+ ***************/
4
+ .table-of-contents {
5
+ &.fixed {
6
+ position: fixed;
7
+ }
8
+
9
+ li {
10
+ padding: 2px 0;
11
+ }
12
+ a {
13
+ display: inline-block;
14
+ font-weight: 300;
15
+ color: #757575;
16
+ padding-left: 20px;
17
+ height: 1.5rem;
18
+ line-height: 1.5rem;
19
+ letter-spacing: .4;
20
+ display: inline-block;
21
+
22
+ &:hover {
23
+ color: lighten(#757575, 20%);
24
+ padding-left: 19px;
25
+ border-left: 1px solid lighten(color("materialize-red", "base"),10%);
26
+ }
27
+ &.active {
28
+ font-weight: 500;
29
+ padding-left: 18px;
30
+ border-left: 2px solid lighten(color("materialize-red", "base"),10%);
31
+ }
32
+ }
33
+ }
@@ -0,0 +1,56 @@
1
+ .tabs {
2
+ display: flex;
3
+ position: relative;
4
+ overflow-x: auto;
5
+ overflow-y: hidden;
6
+ height: 48px;
7
+ background-color: $tabs-bg-color;
8
+ margin: 0 auto;
9
+ width: 100%;
10
+ white-space: nowrap;
11
+
12
+ .tab {
13
+ -webkit-box-flex: 1;
14
+ -webkit-flex-grow: 1;
15
+ -ms-flex-positive: 1;
16
+ flex-grow: 1;
17
+ display: block;
18
+ float: left;
19
+ text-align: center;
20
+ line-height: 48px;
21
+ height: 48px;
22
+ padding: 0;
23
+ margin: 0;
24
+ text-transform: uppercase;
25
+ text-overflow: ellipsis;
26
+ overflow: hidden;
27
+ letter-spacing: .8px;
28
+ width: 15%;
29
+ min-width: 80px;
30
+
31
+ a {
32
+ color: $tabs-text-color;
33
+ display: block;
34
+ width: 100%;
35
+ height: 100%;
36
+ text-overflow: ellipsis;
37
+ overflow: hidden;
38
+ transition: color .28s ease;
39
+ &:hover {
40
+ color: lighten($tabs-text-color, 20%);
41
+ }
42
+ }
43
+
44
+ &.disabled a {
45
+ color: lighten($tabs-text-color, 20%);
46
+ cursor: default;
47
+ }
48
+ }
49
+ .indicator {
50
+ position: absolute;
51
+ bottom: 0;
52
+ height: 2px;
53
+ background-color: $tabs-underline-color;
54
+ will-change: left, right;
55
+ }
56
+ }
@@ -0,0 +1,65 @@
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: 0;
26
+ width: auto;
27
+ clear: both;
28
+ margin-top: 10px;
29
+ position: relative;
30
+ max-width:100%;
31
+ height: auto;
32
+ min-height: $toast-height;
33
+ line-height: 1.5em;
34
+ word-break: break-all;
35
+ background-color: $toast-color;
36
+ padding: 10px 25px;
37
+ font-size: 1.1rem;
38
+ font-weight: 300;
39
+ color: $toast-text-color;
40
+
41
+ display: flex;
42
+ align-items: center;
43
+ justify-content: space-between;
44
+
45
+ .btn, .btn-flat {
46
+ margin: 0;
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
+ @media #{$medium-only} {
59
+ float: left;
60
+ }
61
+ @media #{$large-and-up} {
62
+ float: right;
63
+ }
64
+
65
+ }
@@ -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
+ display: none;
12
+ position: absolute;
13
+ text-align: center;
14
+ max-width: calc(100% - 4px);
15
+ overflow: hidden;
16
+ left: 0;
17
+ top: 0;
18
+ pointer-events: none;
19
+ }
20
+
21
+ .backdrop {
22
+ position: absolute;
23
+ opacity: 0;
24
+ display: none;
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
+ transform: translate3d(0,0,0);
32
+ }
@@ -0,0 +1,61 @@
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: "Roboto", sans-serif;
22
+ font-weight: normal;
23
+ color: $off-black;
24
+ }
25
+ h1, h2, h3, h4, h5, h6 {
26
+ font-weight: 400;
27
+ line-height: 1.1;
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 / 2) 0 ($h1-fontsize / 2.5) 0;}
33
+ h2 { font-size: $h2-fontsize; line-height: 110%; margin: ($h2-fontsize / 2) 0 ($h2-fontsize / 2.5) 0;}
34
+ h3 { font-size: $h3-fontsize; line-height: 110%; margin: ($h3-fontsize / 2) 0 ($h3-fontsize / 2.5) 0;}
35
+ h4 { font-size: $h4-fontsize; line-height: 110%; margin: ($h4-fontsize / 2) 0 ($h4-fontsize / 2.5) 0;}
36
+ h5 { font-size: $h5-fontsize; line-height: 110%; margin: ($h5-fontsize / 2) 0 ($h5-fontsize / 2.5) 0;}
37
+ h6 { font-size: $h6-fontsize; line-height: 110%; margin: ($h6-fontsize / 2) 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
+ font-weight: 300;
49
+ $i: 0;
50
+ @while $i <= $intervals {
51
+ @media only screen and (min-width : 360 + ($i * $interval-size)) {
52
+ font-size: 1.2rem * (1 + (.02 * $i));
53
+ }
54
+ $i: $i + 1;
55
+ }
56
+
57
+ // Handle below 360px screen
58
+ @media only screen and (max-width: 360px) {
59
+ font-size: 1.2rem;
60
+ }
61
+ }
@@ -0,0 +1,313 @@
1
+ /* ==========================================================================
2
+ Materialize variables
3
+ ========================================================================== */
4
+ /**
5
+ * Table of Contents:
6
+ *
7
+ * 1. Colors
8
+ * 2. Badges
9
+ * 3. Buttons
10
+ * 4. Cards
11
+ * 5. Collapsible
12
+ * 6. Chips
13
+ * 7. Date Picker
14
+ * 8. Dropdown
15
+ * 10. Forms
16
+ * 11. Global
17
+ * 12. Grid
18
+ * 13. Navigation Bar
19
+ * 14. Side Navigation
20
+ * 15. Photo Slider
21
+ * 16. Spinners | Loaders
22
+ * 17. Tabs
23
+ * 18. Tables
24
+ * 19. Toasts
25
+ * 20. Typography
26
+ * 21. Footer
27
+ * 22. Flow Text
28
+ * 23. Collections
29
+ * 24. Progress Bar
30
+ */
31
+
32
+
33
+ /* 1. Colors
34
+ ========================================================================== */
35
+
36
+ $primary-color: color("materialize-red", "lighten-2") !default;
37
+ $primary-color-light: lighten($primary-color, 15%) !default;
38
+ $primary-color-dark: darken($primary-color, 15%) !default;
39
+
40
+ $secondary-color: color("teal", "lighten-1") !default;
41
+ $success-color: color("green", "base") !default;
42
+ $error-color: color("red", "base") !default;
43
+ $link-color: color("light-blue", "darken-1") !default;
44
+
45
+
46
+ /* 2. Badges
47
+ ========================================================================== */
48
+
49
+ $badge-bg-color: $secondary-color !default;
50
+
51
+
52
+ /* 3. Buttons
53
+ ========================================================================== */
54
+
55
+ // Shared styles
56
+ $button-border: none !default;
57
+ $button-background-focus: lighten($secondary-color, 4%) !default;
58
+ $button-font-size: 1.3rem !default;
59
+ $button-height: 36px !default;
60
+ $button-padding: 0 2rem !default;
61
+ $button-radius: 2px !default;
62
+
63
+ // Disabled styles
64
+ $button-disabled-background: #DFDFDF !default;
65
+ $button-disabled-color: #9F9F9F !default;
66
+
67
+ // Raised buttons
68
+ $button-raised-background: $secondary-color !default;
69
+ $button-raised-background-hover: lighten($button-raised-background, 5%) !default;
70
+ $button-raised-color: #fff !default;
71
+
72
+ // Large buttons
73
+ $button-large-icon-font-size: 1.6rem !default;
74
+ $button-large-height: $button-height * 1.5 !default;
75
+
76
+ // Flat buttons
77
+ $button-flat-color: #343434 !default;
78
+ $button-flat-disabled-color: lighten(#999, 10%) !default;
79
+
80
+ // Floating buttons
81
+ $button-floating-background: $secondary-color !default;
82
+ $button-floating-background-hover: $button-floating-background !default;
83
+ $button-floating-color: #fff !default;
84
+ $button-floating-size: 37px !default;
85
+ $button-floating-large-size: $button-floating-size * 1.5 !default;
86
+ $button-floating-radius: 50% !default;
87
+
88
+
89
+ /* 4. Cards
90
+ ========================================================================== */
91
+
92
+ $card-padding: 20px !default;
93
+ $card-bg-color: #fff !default;
94
+ $card-link-color: color("orange", "accent-2") !default;
95
+ $card-link-color-light: lighten($card-link-color, 20%) !default;
96
+
97
+
98
+ /* 5. Collapsible
99
+ ========================================================================== */
100
+
101
+ $collapsible-height: 3rem !default;
102
+ $collapsible-header-color: #fff !default;
103
+ $collapsible-border-color: #ddd !default;
104
+
105
+
106
+ /* 6. Chips
107
+ ========================================================================== */
108
+
109
+ $chip-bg-color: #e4e4e4 !default;
110
+ $chip-border-color: #9e9e9e !default;
111
+ $chip-selected-color: #26a69a !default;
112
+ $chip-margin: 5px !default;
113
+
114
+
115
+ /* 7. Date Picker
116
+ ========================================================================== */
117
+
118
+ $datepicker-weekday-bg: darken($secondary-color, 7%) !default;
119
+ $datepicker-date-bg: $secondary-color !default;
120
+ $datepicker-year: rgba(255, 255, 255, .4) !default;
121
+ $datepicker-focus: rgba(0,0,0, .05) !default;
122
+ $datepicker-selected: $secondary-color !default;
123
+ $datepicker-selected-outfocus: desaturate(lighten($secondary-color, 35%), 15%) !default;
124
+
125
+
126
+ /* 8. Dropdown
127
+ ========================================================================== */
128
+
129
+ $dropdown-bg-color: #fff !default;
130
+ $dropdown-hover-bg-color: #eee !default;
131
+ $dropdown-color: $secondary-color !default;
132
+ $dropdown-item-height: 50px !default;
133
+
134
+
135
+ /* 9. Fonts
136
+ ========================================================================== */
137
+
138
+ $roboto-font-path: "../fonts/roboto/" !default;
139
+
140
+
141
+ /* 10. Forms
142
+ ========================================================================== */
143
+
144
+ // Text Inputs + Textarea
145
+ $input-height: 3rem !default;
146
+ $input-border-color: color("grey", "base") !default;
147
+ $input-border: 1px solid $input-border-color !default;
148
+ $input-background: #fff !default;
149
+ $input-error-color: $error-color !default;
150
+ $input-success-color: $success-color !default;
151
+ $input-focus-color: $secondary-color !default;
152
+ $input-font-size: 1rem !default;
153
+ $input-margin: 0 0 20px 0 !default;
154
+ $input-padding: 0 !default;
155
+ $input-transition: all .3s !default;
156
+ $label-font-size: .8rem !default;
157
+ $input-disabled-color: rgba(0,0,0, .26) !default;
158
+ $input-disabled-solid-color: #BDBDBD !default;
159
+ $input-disabled-border: 1px dotted $input-disabled-color !default;
160
+ $input-invalid-border: 1px solid $input-error-color !default;
161
+ $placeholder-text-color: lighten($input-border-color, 20%) !default;
162
+
163
+ // Radio Buttons
164
+ $radio-fill-color: $secondary-color !default;
165
+ $radio-empty-color: #5a5a5a !default;
166
+ $radio-border: 2px solid $radio-fill-color !default;
167
+
168
+ // Range
169
+ $range-height: 14px !default;
170
+ $range-width: 14px !default;
171
+ $track-height: 3px !default;
172
+
173
+ // Select
174
+ $select-border: 1px solid #f2f2f2 !default;
175
+ $select-background: rgba(255, 255, 255, 0.90) !default;
176
+ $select-focus: 1px solid lighten($secondary-color, 47%) !default;
177
+ $select-padding: 5px !default;
178
+ $select-radius: 2px !default;
179
+ $select-disabled-color: rgba(0,0,0,.3) !default;
180
+
181
+ // Switches
182
+ $switch-bg-color: $secondary-color !default;
183
+ $switch-checked-lever-bg: desaturate(lighten($secondary-color, 25%), 25%) !default;
184
+ $switch-unchecked-bg: #F1F1F1 !default;
185
+ $switch-unchecked-lever-bg: #818181 !default;
186
+ $switch-radius: 15px !default;
187
+
188
+
189
+ /* 11. Global
190
+ ========================================================================== */
191
+
192
+ // Media Query Ranges
193
+ $small-screen-up: 601px !default;
194
+ $medium-screen-up: 993px !default;
195
+ $large-screen-up: 1201px !default;
196
+ $small-screen: 600px !default;
197
+ $medium-screen: 992px !default;
198
+ $large-screen: 1200px !default;
199
+
200
+ $medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default;
201
+ $large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;
202
+ $small-and-down: "only screen and (max-width : #{$small-screen})" !default;
203
+ $medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
204
+ $medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;
205
+
206
+
207
+ /* 12. Grid
208
+ ========================================================================== */
209
+
210
+ $num-cols: 12 !default;
211
+ $gutter-width: 1.5rem !default;
212
+ $element-top-margin: $gutter-width/3 !default;
213
+ $element-bottom-margin: ($gutter-width*2)/3 !default;
214
+
215
+
216
+ /* 13. Navigation Bar
217
+ ========================================================================== */
218
+
219
+ $navbar-height: 64px !default;
220
+ $navbar-height-mobile: 56px !default;
221
+ $navbar-font-size: 1rem !default;
222
+ $navbar-font-color: #fff !default;
223
+ $navbar-brand-font-size: 2.1rem !default;
224
+
225
+ /* 14. Side Navigation
226
+ ========================================================================== */
227
+
228
+ $sidenav-font-size: 14px !default;
229
+ $sidenav-font-color: rgba(0,0,0,.87) !default;
230
+ $sidenav-bg-color: #fff !default;
231
+ $sidenav-padding: 16px !default;
232
+ $sidenav-item-height: 48px !default;
233
+
234
+
235
+ /* 15. Photo Slider
236
+ ========================================================================== */
237
+
238
+ $slider-bg-color: color('grey', 'base') !default;
239
+ $slider-bg-color-light: color('grey', 'lighten-2') !default;
240
+ $slider-indicator-color: color('green', 'base') !default;
241
+
242
+
243
+ /* 16. Spinners | Loaders
244
+ ========================================================================== */
245
+
246
+ $spinner-default-color: $secondary-color !default;
247
+
248
+
249
+ /* 17. Tabs
250
+ ========================================================================== */
251
+
252
+ $tabs-underline-color: $primary-color-light !default;
253
+ $tabs-text-color: $primary-color !default;
254
+ $tabs-bg-color: #fff !default;
255
+
256
+
257
+ /* 18. Tables
258
+ ========================================================================== */
259
+
260
+ $table-border-color: #d0d0d0 !default;
261
+ $table-striped-color: #f2f2f2 !default;
262
+
263
+
264
+ /* 19. Toasts
265
+ ========================================================================== */
266
+
267
+ $toast-height: 48px !default;
268
+ $toast-color: #323232 !default;
269
+ $toast-text-color: #fff !default;
270
+
271
+
272
+ /* 20. Typography
273
+ ========================================================================== */
274
+
275
+ $off-black: rgba(0, 0, 0, 0.87) !default;
276
+ // Header Styles
277
+ $h1-fontsize: 4.2rem !default;
278
+ $h2-fontsize: 3.56rem !default;
279
+ $h3-fontsize: 2.92rem !default;
280
+ $h4-fontsize: 2.28rem !default;
281
+ $h5-fontsize: 1.64rem !default;
282
+ $h6-fontsize: 1rem !default;
283
+
284
+
285
+ /* 21. Footer
286
+ ========================================================================== */
287
+
288
+ $footer-bg-color: $primary-color !default;
289
+
290
+
291
+ /* 22. Flow Text
292
+ ========================================================================== */
293
+
294
+ $range : $large-screen - $small-screen !default;
295
+ $intervals: 20 !default;
296
+ $interval-size: $range / $intervals !default;
297
+
298
+
299
+ /* 23. Collections
300
+ ========================================================================== */
301
+
302
+ $collection-border-color: #e0e0e0 !default;
303
+ $collection-bg-color: #fff !default;
304
+ $collection-active-bg-color: $secondary-color !default;
305
+ $collection-active-color: lighten($secondary-color, 55%) !default;
306
+ $collection-hover-bg-color: #ddd !default;
307
+ $collection-link-color: $secondary-color !default;
308
+
309
+
310
+ /* 24. Progress Bar
311
+ ========================================================================== */
312
+
313
+ $progress-bar-color: $secondary-color !default;