material-sass 1.1.0 → 1.3.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (46) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/fonts/MaterialIcons-Regular.eot +0 -0
  3. data/app/assets/fonts/MaterialIcons-Regular.ijmap +1 -1
  4. data/app/assets/fonts/MaterialIcons-Regular.svg +2373 -0
  5. data/app/assets/fonts/MaterialIcons-Regular.ttf +0 -0
  6. data/app/assets/fonts/MaterialIcons-Regular.woff +0 -0
  7. data/app/assets/fonts/MaterialIcons-Regular.woff2 +0 -0
  8. data/app/assets/fonts/README.md +9 -0
  9. data/app/assets/fonts/codepoints +932 -0
  10. data/app/assets/javascripts/material-sprockets.js +1 -2
  11. data/app/assets/javascripts/material.min.js +2 -2
  12. data/app/assets/javascripts/material/{form-adv-label.js → form-floating-label.js} +0 -0
  13. data/app/assets/javascripts/material/{form-adv-textarea.js → form-textarea.js} +0 -0
  14. data/app/assets/javascripts/material/{datepicker.js → picker.js} +68 -29
  15. data/app/assets/stylesheets/material.min.css +5 -5
  16. data/app/assets/stylesheets/material/addons/_material-icons.scss +1 -1
  17. data/app/assets/stylesheets/material/addons/material-icons/_variables.scss +1 -1
  18. data/app/assets/stylesheets/material/base.scss +5 -7
  19. data/app/assets/stylesheets/material/base/_grid.scss +0 -39
  20. data/app/assets/stylesheets/material/components/_avatar.scss +0 -35
  21. data/app/assets/stylesheets/material/components/_button-flat.scss +2 -15
  22. data/app/assets/stylesheets/material/components/_button-float.scss +42 -46
  23. data/app/assets/stylesheets/material/components/_button.scss +4 -9
  24. data/app/assets/stylesheets/material/components/_card.scss +35 -35
  25. data/app/assets/stylesheets/material/components/_dropdown.scss +2 -10
  26. data/app/assets/stylesheets/material/components/{_form-adv-checkbox.scss → _form-checkbox.scss} +0 -0
  27. data/app/assets/stylesheets/material/components/{_form-adv-label.scss → _form-floating-label.scss} +3 -1
  28. data/app/assets/stylesheets/material/components/{_form-adv-switch.scss → _form-switch.scss} +0 -0
  29. data/app/assets/stylesheets/material/components/{_form-adv-textarea.scss → _form-textarea.scss} +0 -0
  30. data/app/assets/stylesheets/material/components/_form.scss +3 -1
  31. data/app/assets/stylesheets/material/components/_nav.scss +5 -2
  32. data/app/assets/stylesheets/material/components/{_form-adv-datepicker.scss → _picker.scss} +24 -19
  33. data/app/assets/stylesheets/material/components/_snackbar.scss +2 -3
  34. data/app/assets/stylesheets/material/components/_tab.scss +20 -21
  35. data/app/assets/stylesheets/material/components/_tile.scss +45 -44
  36. data/app/assets/stylesheets/material/elements/_content.scss +7 -7
  37. data/app/assets/stylesheets/material/elements/_header.scss +18 -22
  38. data/app/assets/stylesheets/material/elements/_menu.scss +40 -83
  39. data/app/assets/stylesheets/material/mixin/_utilities.scss +33 -0
  40. data/app/assets/stylesheets/material/utilities/_print.scss +12 -36
  41. data/app/assets/stylesheets/material/utilities/_utilities.scss +3 -19
  42. data/lib/material-sass/version.rb +1 -1
  43. metadata +13 -13
  44. data/app/assets/javascripts/init.js +0 -9
  45. data/app/assets/stylesheets/material/elements/_footer.scss +0 -10
  46. data/app/assets/stylesheets/material/mixin/_css3.scss +0 -12
@@ -1,26 +1,26 @@
1
- .content-heading {
1
+ .content-header {
2
2
  background-color: $offwhite-solid;
3
3
  color: $black-text-solid;
4
4
  overflow: hidden;
5
5
  padding-top: $margin-sm;
6
6
  padding-bottom: $margin-sm;
7
- position: relative;
8
- z-index: 1;
9
- .heading {
10
- font-weight: $font-weight-light;
11
- }
12
7
  }
13
8
 
14
9
  // colour
15
10
  @each $color in $palette-list-class {
16
11
  $i: index($palette-list-class, $color);
17
12
 
18
- .page-#{$color} .content-heading {
13
+ .content-header-#{$color},
14
+ .page-#{$color} .content-header {
19
15
  background-color: nth($palette-list-color, $i);
20
16
  color: nth($palette-list-text, $i);
21
17
  }
22
18
  }
23
19
 
20
+ .content-heading {
21
+ font-weight: $font-weight-light;
22
+ }
23
+
24
24
  .content-inner {
25
25
  margin-top: $margin-lg;
26
26
  margin-bottom: $margin-lg;
@@ -3,8 +3,6 @@
3
3
  background-color: $offwhite-solid;
4
4
  color: $black-text-solid;
5
5
  min-height: $header-height;
6
- padding-top: (($header-height - $nav-height) / 2);
7
- padding-bottom: (($header-height - $nav-height) / 2);
8
6
  z-index: $header-base;
9
7
  &:after {
10
8
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
@@ -27,19 +25,17 @@
27
25
  z-index: 1;
28
26
  }
29
27
  .nav {
30
- margin: 0;
28
+ margin-top: 0;
29
+ margin-bottom: 0;
30
+ > li > a,
31
+ > li > .a {
32
+ height: $header-height;
33
+ }
31
34
  }
32
35
  .tab-nav {
33
36
  box-shadow: none;
34
- margin-top: (($header-height - $nav-height) / -2);
35
- margin-bottom: (($header-height - $nav-height) / -2);
36
- .nav > li {
37
- > a,
38
- > .a {
39
- padding-top: (($header-height - $line-height) / 2);
40
- padding-bottom: (($header-height - $line-height) / 2 - 2);
41
- }
42
- }
37
+ margin-top: 0;
38
+ margin-bottom: 0;
43
39
  }
44
40
  }
45
41
 
@@ -54,36 +50,36 @@
54
50
  }
55
51
 
56
52
  .header-affix {
57
- max-height: $nav-height;
53
+ max-height: $header-height;
58
54
  overflow: hidden;
59
- position: static !important;
60
55
  width: 0;
61
56
  &.affix {
62
- overflow: visible;
63
57
  width: auto;
64
58
  }
65
59
  }
66
60
 
67
61
  .header-affix-hide {
68
- position: static !important;
62
+ max-height: $header-height;
63
+ overflow: hidden;
64
+ width: auto;
69
65
  &.affix {
70
- max-height: $nav-height;
71
- overflow: hidden;
72
66
  width: 0;
73
67
  }
74
68
  }
75
69
 
76
70
  .header-logo,
77
71
  .header-text {
78
- display: block;
72
+ align-items: center;
73
+ display: flex;
79
74
  float: left;
80
75
  font-weight: $font-weight-light;
81
- height: $nav-height;
76
+ height: $header-height;
82
77
  line-height: $line-height-h4;
83
78
  margin: 0 $grid-gutter;
84
- padding: (($nav-height - $line-height-h4) / 2) 0;
79
+ white-space: nowrap;
85
80
  &:focus,
86
81
  &:hover {
82
+ outline: 0;
87
83
  text-decoration: none;
88
84
  }
89
85
  }
@@ -92,7 +88,7 @@
92
88
  font-size: $font-size-h4;
93
89
  img {
94
90
  display: block;
95
- max-height: $line-height-h4;
91
+ max-height: ($header-height * 0.75);
96
92
  width: auto;
97
93
  }
98
94
  }
@@ -12,33 +12,40 @@
12
12
  }
13
13
 
14
14
  .menu-collapse-toggle {
15
- background-color: transparent !important;
15
+ align-items: center;
16
16
  cursor: pointer;
17
- display: block;
18
- float: right;
19
- padding: (($nav-height - $line-height) / 2) $grid-gutter;
17
+ display: flex;
18
+ height: 100%;
19
+ padding: 0 $grid-gutter;
20
20
  position: absolute;
21
21
  top: 0;
22
22
  right: 0;
23
23
  z-index: 1;
24
+ &:focus,
24
25
  &:hover {
25
- color: $link-color !important;
26
+ outline: 0;
27
+ text-decoration: none;
26
28
  }
27
29
  }
28
30
 
31
+ .menu-collapse-toggle-close,
32
+ .menu-collapse-toggle-default {
33
+ transition-duration: 0.3s;
34
+ transition-property: opacity, transform;
35
+ transition-timing-function: $timing;
36
+ }
37
+
29
38
  .menu-collapse-toggle-close {
30
- margin-top: ($font-size / -2);
31
- margin-left: ($font-size / -2);
39
+ align-items: center;
40
+ display: flex;
41
+ height: 100%;
42
+ justify-content: center;
32
43
  opacity: 1;
33
44
  position: absolute;
34
- top: 50%;
35
- left: 50%;
36
- text-align: center;
45
+ top: 0;
46
+ left: 0;
37
47
  transform: rotate(0);
38
- transition-duration: 0.3s;
39
- transition-property: opacity, transform;
40
- transition-timing-function: $timing;
41
- width: $font-size;
48
+ width: 100%;;
42
49
  .menu-collapse-toggle.collapsed & {
43
50
  opacity: 0;
44
51
  transform: rotate(-225deg);
@@ -48,9 +55,6 @@
48
55
  .menu-collapse-toggle-default {
49
56
  opacity: 0;
50
57
  transform: rotate(225deg);
51
- transition-duration: 0.3s;
52
- transition-property: opacity, transform;
53
- transition-timing-function: $timing;
54
58
  .menu-collapse-toggle.collapsed & {
55
59
  opacity: 1;
56
60
  transform: rotate(0);
@@ -67,17 +71,10 @@
67
71
  .a {
68
72
  color: $black-text-solid;
69
73
  font-weight: $font-weight-medium;
70
- overflow: hidden;
71
- text-overflow: ellipsis;
72
- white-space: nowrap;
73
74
  &:focus,
74
75
  &:hover {
75
76
  background-color: $offwhite-solid;
76
77
  }
77
- .fa,
78
- .icon {
79
- margin-right: $grid-gutter;
80
- }
81
78
  }
82
79
  li.active {
83
80
  > a,
@@ -89,15 +86,13 @@
89
86
  a,
90
87
  .a {
91
88
  font-weight: $font-weight-normal;
89
+ min-height: ($nav-height * 0.75);
92
90
  padding-left: ($grid-gutter * 2);
93
91
  }
94
92
  ul {
95
93
  a,
96
94
  .a {
97
95
  font-size: $font-size-h6;
98
- font-weight: $font-weight-light;
99
- padding-top: (($nav-height - $line-height) / 4);
100
- padding-bottom: (($nav-height - $line-height) / 4);
101
96
  padding-left: ($grid-gutter * 3);
102
97
  }
103
98
  }
@@ -139,24 +134,32 @@
139
134
  }
140
135
 
141
136
  .menu-logo {
142
- @extend .header-logo;
137
+ align-items: center;
143
138
  border-bottom: 1px solid $black-divider-solid;
144
139
  color: $black-text-solid;
145
- float: none;
146
- height: $header-height;
147
- margin-right: 0;
140
+ display: flex;
141
+ font-size: $font-size-h4;
142
+ font-weight: $font-weight-light;
143
+ line-height: $line-height-h4;
148
144
  margin-bottom: $margin-base;
149
- margin-left: 0;
150
- padding: (($header-height - $line-height-h4) / 2) $grid-gutter (($header-height - $line-height-h4) / 2 - 1);
151
- &:focus,
152
- &:hover {
145
+ min-height: $header-height;
146
+ padding: 0 $grid-gutter;
147
+ &[href]:focus,
148
+ &[href]:hover {
153
149
  color: $black-text-solid;
150
+ outline: 0;
151
+ text-decoration: none;
154
152
  }
155
153
  .menu-content > & {
156
154
  &:first-child {
157
155
  margin-top: ($margin-base * -1);
158
156
  }
159
157
  }
158
+ img {
159
+ display: block;
160
+ max-height: ($header-height * 0.75);
161
+ width: auto;
162
+ }
160
163
  }
161
164
 
162
165
  .menu-scroll {
@@ -243,54 +246,8 @@
243
246
  .menu-top-user {
244
247
  align-items: center;
245
248
  display: flex;
246
- }
247
-
248
- @mixin nav-drawer() {
249
- background-color: transparent;
250
- display: block !important;
251
- overflow: visible;
252
- width: ($grid-gutter * 15);
253
- z-index: $header-base;
254
- &.in ~ .menu-backdrop {
255
- display: none;
256
- ~ .menu-backdrop {
257
- display: block;
258
- }
259
- }
260
- &.menu-left {
261
- ~ .content {
262
- margin-left: ($grid-gutter * 15);
263
- .content-heading,
264
- .content-inner {
265
- padding-left: $grid-gutter;
266
- }
267
- }
268
- ~ .footer,
269
- ~ .header {
270
- padding-left: $grid-gutter;
271
- // position
272
- left: ($grid-gutter * 15);
273
- }
274
- }
275
- &.menu-right {
276
- ~ .content {
277
- margin-right: ($grid-gutter * 15);
278
- .content-heading,
279
- .content-inner {
280
- padding-right: $grid-gutter;
281
- }
282
- }
283
- ~ .footer,
284
- ~ .header {
285
- padding-right: $grid-gutter;
286
- // position
287
- right: ($grid-gutter * 15);
288
- }
289
- }
290
- .menu-scroll {
291
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
292
- transform: none;
293
- width: ($grid-gutter * 15);
249
+ > * {
250
+ flex-shrink: 0;
294
251
  }
295
252
  }
296
253
 
@@ -27,6 +27,39 @@
27
27
  width: 100% \9;
28
28
  }
29
29
 
30
+ @mixin nav-drawer() {
31
+ background-color: transparent;
32
+ display: block !important;
33
+ overflow: visible;
34
+ width: ($grid-gutter * 15);
35
+ z-index: $header-base;
36
+ &.in ~ .menu-backdrop {
37
+ display: none;
38
+ ~ .menu-backdrop {
39
+ display: block;
40
+ }
41
+ }
42
+ &.menu-left {
43
+ ~ .content,
44
+ ~ .footer,
45
+ ~ .header {
46
+ margin-left: ($grid-gutter * 15);
47
+ }
48
+ }
49
+ &.menu-right {
50
+ ~ .content,
51
+ ~ .footer,
52
+ ~ .header {
53
+ margin-right: ($grid-gutter * 15);
54
+ }
55
+ }
56
+ .menu-scroll {
57
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
58
+ transform: none;
59
+ width: ($grid-gutter * 15);
60
+ }
61
+ }
62
+
30
63
  @mixin text-overflow() {
31
64
  display: block;
32
65
  line-height: inherit;
@@ -56,6 +56,10 @@
56
56
  display: table-header-group;
57
57
  }
58
58
 
59
+ .hidden-print {
60
+ display: none !important;
61
+ }
62
+
59
63
  // material
60
64
  .card,
61
65
  .card-img,
@@ -67,53 +71,25 @@
67
71
  .tile {
68
72
  border: 1px solid $black-divider-solid;
69
73
  }
70
-
71
- .fbtn-container,
72
- .menu,
73
- .menu-toggle {
74
- display: none !important;
75
- }
76
-
77
- .footer {
78
- page-break-after: always;
79
- }
80
-
81
- .header a {
82
- color: $link-color;
83
- }
84
-
85
- .tab-nav .nav > li.active > a {
86
- border-bottom: 3px solid $black-divider-solid;
87
- padding-bottom: ($line-height / 2 - 3);
88
- }
89
74
  }
90
75
 
91
76
  .visible-print-block {
92
77
  display: none !important;
93
- // print
94
- @media print {
95
- display: block !important;
96
- }
78
+ @media print {
79
+ display: block !important;
80
+ }
97
81
  }
98
82
 
99
83
  .visible-print-inline {
100
84
  display: none !important;
101
- // print
102
- @media print {
103
- display: inline !important;
104
- }
85
+ @media print {
86
+ display: inline !important;
87
+ }
105
88
  }
106
89
 
107
90
  .visible-print-inline-block {
108
91
  display: none !important;
109
- // print
110
- @media print {
111
- display: inline-block !important;
112
- }
113
- }
114
-
115
- @media print {
116
- .hidden-print {
117
- display: none !important;
92
+ @media print {
93
+ display: inline-block !important;
118
94
  }
119
95
  }
@@ -32,16 +32,14 @@
32
32
  }
33
33
 
34
34
  .collapsed-hide {
35
- display: inline;
36
- .collapsed & {
35
+ .collapsed > & {
37
36
  display: none;
38
37
  }
39
38
  }
40
39
 
41
40
  .collapsed-show {
42
- display: none;
43
- .collapsed & {
44
- display: inline;
41
+ :not(.collapsed) > & {
42
+ display: none;
45
43
  }
46
44
  }
47
45
 
@@ -60,10 +58,6 @@
60
58
  position: relative;
61
59
  }
62
60
 
63
- body.el-loading {
64
- position: static;
65
- }
66
-
67
61
  .el-loading-indicator {
68
62
  background-color: $white;
69
63
  font-family: sans-serif !important;
@@ -239,12 +233,6 @@ body.el-loading {
239
233
  overflow: hidden;
240
234
  }
241
235
 
242
- .p {
243
- display: block;
244
- margin-top: $margin-base;
245
- margin-bottom: $margin-base;
246
- }
247
-
248
236
  .padding-bottom {
249
237
  padding-bottom: $margin-md !important;
250
238
  }
@@ -333,10 +321,6 @@ body.el-loading {
333
321
  float: left;
334
322
  }
335
323
 
336
- .pull-none {
337
- float: none !important;
338
- }
339
-
340
324
  .pull-right {
341
325
  float: right;
342
326
  }