material 0.9.26 → 0.9.28

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 (54) hide show
  1. package/package.json +1 -1
  2. package/src/skin/material/_variables.scss +30 -0
  3. package/src/skin/material/base/body.scss +14 -33
  4. package/src/skin/material/base/elevation.scss +0 -1
  5. package/src/skin/material/base/grid.scss +7 -11
  6. package/src/skin/material/base/typo.scss +22 -23
  7. package/src/skin/material/button/action.scss +13 -37
  8. package/src/skin/material/button/button.scss +50 -66
  9. package/src/skin/material/button/file.scss +1 -1
  10. package/src/skin/material/button/floating.scss +36 -34
  11. package/src/skin/material/button/raised.scss +36 -34
  12. package/src/skin/material/button/stroked.scss +25 -28
  13. package/src/skin/material/component/component.scss +3 -5
  14. package/src/skin/material/component/divider.scss +0 -1
  15. package/src/skin/material/component/image.scss +0 -1
  16. package/src/skin/material/component/label.scss +0 -1
  17. package/src/skin/material/component/progress.scss +38 -43
  18. package/src/skin/material/component/subheader.scss +0 -1
  19. package/src/skin/material/component/text.scss +14 -15
  20. package/src/skin/material/container/appbar.scss +24 -35
  21. package/src/skin/material/container/banner.scss +1 -2
  22. package/src/skin/material/container/card.scss +0 -1
  23. package/src/skin/material/container/dialog.scss +33 -66
  24. package/src/skin/material/container/drawer.scss +14 -23
  25. package/src/skin/material/container/menu.scss +5 -8
  26. package/src/skin/material/container/tabs.scss +6 -6
  27. package/src/skin/material/container/toolbar.scss +19 -46
  28. package/src/skin/material/control/button.scss +43 -42
  29. package/src/skin/material/control/checkbox.scss +17 -23
  30. package/src/skin/material/control/colorpicker.scss +9 -11
  31. package/src/skin/material/control/menu.scss +2 -6
  32. package/src/skin/material/control/progress.scss +38 -41
  33. package/src/skin/material/control/search.scss +12 -11
  34. package/src/skin/material/control/selecter.scss +5 -7
  35. package/src/skin/material/control/selector.scss +0 -2
  36. package/src/skin/material/control/slider.scss +33 -51
  37. package/src/skin/material/control/snackbar.scss +1 -4
  38. package/src/skin/material/control/switch.scss +44 -75
  39. package/src/skin/material/control/switcher.scss +0 -1
  40. package/src/skin/material/control/textfield.scss +33 -53
  41. package/src/skin/material/control/tooltip.scss +1 -3
  42. package/src/skin/material/layout/layout.scss +17 -21
  43. package/src/skin/material/layout/resizer.scss +16 -36
  44. package/src/skin/material/module/ripple.scss +0 -1
  45. package/src/skin/material/view/calendar.scss +13 -18
  46. package/src/skin/material/view/form.scss +1 -2
  47. package/src/skin/material/view/grid.scss +7 -8
  48. package/src/skin/material/view/list.scss +6 -8
  49. package/src/skin/material/view/listview.scss +10 -17
  50. package/src/skin/material/view/map.scss +0 -1
  51. package/src/skin/material/view/page.scss +0 -1
  52. package/src/skin/material/view/tabview-bak.scss +0 -1
  53. package/src/skin/material/view/tabview.scss +2 -4
  54. package/src/skin/material/view/tree.scss +6 -7
@@ -3,8 +3,8 @@
3
3
  position: absolute;
4
4
  top: 0;
5
5
  left: 0;
6
-
7
6
  }
7
+
8
8
  .ui-resizer {
9
9
  opacity: .2;
10
10
  position: absolute;
@@ -18,8 +18,8 @@
18
18
  // &:hover, &.drag {
19
19
  // background-color: rgba(66, 133, 244, .5);
20
20
  // }
21
-
22
21
  }
22
+
23
23
  .resizer-height {
24
24
  cursor: ns-resize;
25
25
  position: absolute;
@@ -27,8 +27,8 @@
27
27
  left: 0;
28
28
  width: 100%;
29
29
  height: 5px;
30
-
31
30
  }
31
+
32
32
  .resizer-width {
33
33
  cursor: ew-resize;
34
34
  position: absolute;
@@ -36,23 +36,13 @@
36
36
  top: 0;
37
37
  height: 100%;
38
38
  width: 5px;
39
-
40
- }
41
- .ui-resizer-height, {
42
- /* empty */
43
- }
44
- .ui-resizer-width, {
45
- /* empty */
46
- }
47
- .ui-resizer-top, {
48
- /* empty */
49
- }
50
- .ui-resizer-right, {
51
- /* empty */
52
- }
53
- .ui-resizer-bottom, {
54
- /* empty */
55
39
  }
40
+
41
+ .ui-resizer-height,
42
+ .ui-resizer-width,
43
+ .ui-resizer-top,
44
+ .ui-resizer-right,
45
+ .ui-resizer-bottom,
56
46
  .ui-resizer-left {
57
47
  background-color: rgba(255, 165, 0, 5);
58
48
  opacity: .5;
@@ -60,17 +50,12 @@
60
50
  z-index: 100;
61
51
 
62
52
  &:hover {
63
- /* empty */
64
- }
65
53
  //background-color: rgba(255, 165, 0,5);
66
-
67
- }
68
- .ui-resizer-height, {
69
- /* empty */
70
- }
71
- .ui-resizer-top, {
72
- /* empty */
54
+ }
73
55
  }
56
+
57
+ .ui-resizer-height,
58
+ .ui-resizer-top,
74
59
  .ui-resizer-bottom {
75
60
  cursor: ns-resize;
76
61
  position: absolute;
@@ -78,14 +63,10 @@
78
63
  left: 0;
79
64
  width: 100%;
80
65
  height: 5px;
81
-
82
- }
83
- .ui-resizer-width, {
84
- /* empty */
85
- }
86
- .ui-resizer-right, {
87
- /* empty */
88
66
  }
67
+
68
+ .ui-resizer-width,
69
+ .ui-resizer-right,
89
70
  .ui-resizer-left {
90
71
  cursor: ew-resize;
91
72
  position: absolute;
@@ -93,5 +74,4 @@
93
74
  top: 0;
94
75
  height: 100%;
95
76
  width: 5px;
96
-
97
77
  }
@@ -7,5 +7,4 @@
7
7
  height: 5px;
8
8
  width: 5px;
9
9
  border-radius: 50%;
10
-
11
10
  }
@@ -1,6 +1,4 @@
1
- .material-calendar, {
2
- /* empty */
3
- }
1
+ .material-calendar,
4
2
  .material-book {
5
3
  margin-left: 10px;
6
4
  display: flex;
@@ -10,9 +8,7 @@
10
8
  header {
11
9
  flex: none;
12
10
 
13
- .calendar-headline, {
14
- /* empty */
15
- }
11
+ .calendar-headline,
16
12
  .book-headline {
17
13
  font-family: 'Helvetica';
18
14
  font-weight: light;
@@ -24,15 +20,15 @@
24
20
  width: 50%;
25
21
  padding: 10px;
26
22
  text-align: right;
27
-
28
23
  }
24
+
29
25
  .month-year {
30
26
  font-size: 24px;
31
27
  display: inline-block;
32
28
  width: 50%;
33
29
  padding: 10px;
34
-
35
30
  }
31
+
36
32
  .material-toolbar {
37
33
  text-align: right;
38
34
  font-size: 24px;
@@ -42,10 +38,10 @@
42
38
 
43
39
  .material-button {
44
40
  margin: 0;
45
-
46
41
  }
47
42
  }
48
43
  }
44
+
49
45
  .header-days {
50
46
  display: flex;
51
47
  flex-direction: horizontal;
@@ -57,8 +53,8 @@
57
53
  width: 100px;
58
54
  flex: none;
59
55
  display: inline-block;
60
-
61
56
  }
57
+
62
58
  .date {
63
59
  font-size: .8em;
64
60
  overflow: hidden;
@@ -70,23 +66,23 @@
70
66
  //display: inline-block;
71
67
  overflow: hidden;
72
68
  text-overflow: ellipsis;
73
-
74
69
  }
70
+
75
71
  .second {
76
72
  display: block;
77
73
  flex: none;
78
74
 
79
75
  //display: inline-block;
80
-
81
76
  }
77
+
82
78
  flex: 15;
83
79
 
84
80
  //white-space: nowrap;
85
81
  //display: inline-block;
86
82
  text-align: center;
87
-
88
83
  }
89
84
  }
85
+
90
86
  .allday {
91
87
  height: 24px;
92
88
  border-bottom: 4px solid #d4d4d4;
@@ -100,17 +96,17 @@
100
96
  min-height: 32px;
101
97
  padding: 4px;
102
98
  color: #D9D9D9;
103
-
104
99
  }
100
+
105
101
  .day {
106
102
  float: left;
107
103
  width: 15%;
108
104
  min-height: 32px;
109
105
  padding: 4px;
110
-
111
106
  }
112
107
  }
113
108
  }
109
+
114
110
  .calendar-body {
115
111
  display: flex;
116
112
  flex-direction: horizontal;
@@ -132,17 +128,17 @@
132
128
  border-right: 8px solid transaprent;
133
129
  color: #D9D9D9;
134
130
  padding-right: 5px;
135
-
136
131
  }
137
132
  }
133
+
138
134
  canvas {
139
135
  position: absolute;
140
136
  top: 0;
141
137
  left: 10%;
142
138
  width: 2000px;
143
139
  height: 1440px;
144
-
145
140
  }
141
+
146
142
  .week-day {
147
143
  flex: 15;
148
144
  position: relative;
@@ -212,7 +208,6 @@
212
208
  * border-radius: 3px;
213
209
  * padding: 5px;
214
210
  * }
215
-
216
211
  }
217
212
  }
218
213
  }
@@ -2,8 +2,8 @@
2
2
  background-color: #E6E6E6;
3
3
  .component-subheader {
4
4
  padding: 16px 0 0;
5
-
6
5
  }
6
+
7
7
  .material-layout {
8
8
  > .layout-component {
9
9
  border-bottom: 1px solid rgba(100, 100, 100, 0.3);
@@ -14,7 +14,6 @@
14
14
  margin-right: 16px;
15
15
  padding-top: 8px;
16
16
  margin-bottom: 16px;
17
-
18
17
  }
19
18
  }
20
19
  }
@@ -3,8 +3,8 @@
3
3
 
4
4
  &.container-body {
5
5
  overflow: hidden;
6
-
7
6
  }
7
+
8
8
  flex: none;
9
9
  display: flex;
10
10
  flex-direction: column;
@@ -32,21 +32,21 @@
32
32
  &.key-selected {
33
33
  //color: $grey-50;
34
34
  background-color: $grey-100;
35
-
36
35
  }
36
+
37
37
  .key-sort {
38
38
  float: right;
39
39
  padding: 3px;
40
-
41
40
  }
42
41
  }
42
+
43
43
  > .ui-resizer-width {
44
44
  &.resizer-drag {
45
45
  background-color: orange;
46
-
47
46
  }
48
47
  }
49
48
  }
49
+
50
50
  .grid-search {
51
51
  flex: none;
52
52
  width: 100%;
@@ -72,10 +72,10 @@
72
72
  &.key-selected {
73
73
  //color: $grey-50;
74
74
  background-color: $grey-100;
75
-
76
75
  }
77
76
  }
78
77
  }
78
+
79
79
  .grid-content {
80
80
  flex: 1;
81
81
  font-size: .85em;
@@ -114,20 +114,19 @@
114
114
  //}
115
115
  &[data-key="total"] {
116
116
  text-align: right;
117
-
118
117
  }
119
118
  }
119
+
120
120
  &.item-selected {
121
121
  background-color: rgba(160, 160, 160, 0.2);
122
122
 
123
123
  //border-right: 1px solid $blue-grey-600;
124
124
  border-bottom: 1px solid transparent;
125
125
  margin: 0;
126
-
127
126
  }
127
+
128
128
  &:last-child {
129
129
  border-bottom: none;
130
-
131
130
  }
132
131
  }
133
132
  }
@@ -5,9 +5,8 @@
5
5
 
6
6
  &.hide {
7
7
  display: none;
8
-
9
-
10
8
  }
9
+
11
10
  >.head {
12
11
  position: relative;
13
12
  display: flex;
@@ -22,20 +21,20 @@
22
21
  // background-color: $primary-color
23
22
  .button-icon svg {
24
23
  fill: rgba(255, 255, 255, 1);
25
-
26
24
  }
27
25
  }
28
26
  }
29
27
  }
28
+
30
29
  >.body.search {
31
30
  display: none;
32
31
  overflow: scroll;
33
32
  flex: 1;
34
33
  &.show {
35
34
  display: block;
36
-
37
35
  }
38
36
  }
37
+
39
38
  >.body {
40
39
  overflow: scroll;
41
40
  flex: 1;
@@ -63,9 +62,9 @@
63
62
  background-repeat: no-repeat;
64
63
  background-position: center;
65
64
  margin-right: 16px;
66
-
67
65
  }
68
66
  }
67
+
69
68
  &.hide {
70
69
  display: none;
71
70
  }
@@ -76,19 +75,19 @@
76
75
  }
77
76
  &.selected {
78
77
  background-color: rgba(0,0,0,.05);
79
-
80
78
  }
81
79
  }
82
80
  }
81
+
83
82
  >.foot {
84
83
  display: flex;
85
84
  flex-direction: row;
86
85
  flex: none;
87
86
  border-top: 1px solid rgba(0, 0, 0, 0.1);
88
87
  padding: 8px 16px 8px 24px;
89
-
90
88
  }
91
89
  }
90
+
92
91
  .virtual {
93
92
  overflow: auto;
94
93
  position: relative;
@@ -102,6 +101,5 @@
102
101
  top: 0;
103
102
  left: 0;
104
103
  width: 1px;
105
-
106
104
  }
107
105
  }
@@ -20,19 +20,19 @@
20
20
  &.is-selected {
21
21
  background-color: rgba(0, 0, 0, 0.05);
22
22
  transition: .1s;
23
-
24
23
  }
24
+
25
25
  .ui-icon {
26
26
  flex: none;
27
27
  padding: 24px;
28
-
29
28
  }
29
+
30
30
  .ui-text {
31
31
  flex: 1;
32
32
  padding: 16px 12px 16px 0;
33
-
34
33
  }
35
34
  }
35
+
36
36
  .material-button {
37
37
  display: flex;
38
38
  flex-direction: horizontal;
@@ -48,27 +48,21 @@
48
48
  .ui-icon {
49
49
  flex: none;
50
50
  padding: 24px;
51
-
52
51
  }
52
+
53
53
  .button-label {
54
54
  flex: 1;
55
55
  padding: 16px 12px 16px 0;
56
-
57
56
  }
58
57
  }
58
+
59
59
  .ui-separator {
60
60
  display: block;
61
61
  height: 1px;
62
62
  margin: 12px;
63
63
  background-color: #DDD;
64
-
65
-
66
-
67
-
68
-
69
-
70
-
71
64
  }
65
+
72
66
  &.type-image {
73
67
  max-width: 1000px;
74
68
  display: flex;
@@ -99,8 +93,8 @@
99
93
  //height: 125px
100
94
  width: 125px;
101
95
  display: block;
102
-
103
96
  }
97
+
104
98
  .image-info {
105
99
  // padding: 16px
106
100
  background-color: rgba(0,0,0,.6);
@@ -133,17 +127,17 @@
133
127
  flex: none;
134
128
  svg {
135
129
  fill: white;
136
-
137
130
  }
138
131
  }
139
132
  }
140
133
  }
134
+
141
135
  &.hide-info {
142
136
  .image-info {
143
137
  display: none !important ;
144
-
145
138
  }
146
139
  }
140
+
147
141
  &.info-below {
148
142
  .image-info {
149
143
  //display: none !important
@@ -166,11 +160,11 @@
166
160
  flex: none;
167
161
  svg {
168
162
  fill: rgba(0,0,0,.8);
169
-
170
163
  }
171
164
  }
172
165
  }
173
166
  }
167
+
174
168
  &.layout-masonry {
175
169
  -webkit-column-count: 3;
176
170
  column-count: 3;
@@ -214,7 +208,6 @@
214
208
  // bottom: 0
215
209
  // left: 0
216
210
  // right: 0
217
-
218
211
  }
219
212
  }
220
213
  }
@@ -4,5 +4,4 @@
4
4
  right: 0;
5
5
  bottom: 0;
6
6
  left: 0;
7
-
8
7
  }
@@ -1,5 +1,4 @@
1
1
  .material-page {
2
2
  border: none;
3
3
  margin: 0;
4
-
5
4
  }
@@ -43,7 +43,6 @@
43
43
  >.views {
44
44
  >div {
45
45
  display: none;
46
-
47
46
  }
48
47
  }
49
48
  }
@@ -41,15 +41,14 @@
41
41
  background-color: transparent;
42
42
  // transform: scale(1.1)
43
43
  // transition: 50ms transform
44
-
45
44
  }
45
+
46
46
  &.type-action {
47
47
  max-width: 60px;
48
-
49
-
50
48
  }
51
49
  }
52
50
  }
51
+
53
52
  >.views {
54
53
  position: relative;
55
54
  flex: 1;
@@ -59,7 +58,6 @@
59
58
  top: 0;
60
59
  right: 0;
61
60
  bottom: 0;
62
-
63
61
  }
64
62
  }
65
63
  }
@@ -17,8 +17,8 @@
17
17
  -webkit-appearance: span;
18
18
  appearance: span;
19
19
  padding: 8px 16px;
20
-
21
20
  }
21
+
22
22
  .material-item {
23
23
  display: flex;
24
24
  flex-direction: horizontal;
@@ -38,19 +38,19 @@
38
38
  &.is-selected {
39
39
  background-color: rgba(0, 0, 0, 0.05);
40
40
  transition: .3s;
41
-
42
41
  }
42
+
43
43
  .ui-icon {
44
44
  flex: none;
45
45
  padding: 24px;
46
-
47
46
  }
47
+
48
48
  .ui-text {
49
49
  flex: 1;
50
50
  padding: 16px 12px 16px 0;
51
-
52
51
  }
53
52
  }
53
+
54
54
  .material-button {
55
55
  display: flex;
56
56
  flex-direction: horizontal;
@@ -66,20 +66,19 @@
66
66
  .ui-icon {
67
67
  flex: none;
68
68
  padding: 24px;
69
-
70
69
  }
70
+
71
71
  .ui-text {
72
72
  flex: 1;
73
73
  padding: 16px 12px 16px 0;
74
-
75
74
  }
76
75
  }
76
+
77
77
  .ui-separator {
78
78
  display: block;
79
79
  height: 1px;
80
80
  margin: 12px;
81
81
  background-color: #DDD;
82
-
83
82
  }
84
83
  }
85
84
  }