dlegr250_material_design 0.5.86 → 0.5.88
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.
- checksums.yaml +4 -4
- data/lib/dlegr250_material_design/version.rb +1 -1
- data/vendor/assets/javascripts/components/dialog.coffee +9 -9
- data/vendor/assets/stylesheets/base/variables/colors.scss +2 -1
- data/vendor/assets/stylesheets/base/variables/dimensions.scss +4 -13
- data/vendor/assets/stylesheets/components/badges.scss +2 -3
- data/vendor/assets/stylesheets/components/buttons.scss +21 -18
- data/vendor/assets/stylesheets/components/cards.scss +1 -1
- data/vendor/assets/stylesheets/components/dialogs.scss +12 -12
- data/vendor/assets/stylesheets/components/layout/toolbar.scss +20 -3
- data/vendor/assets/stylesheets/components/lists.scss +2 -2
- data/vendor/assets/stylesheets/components/menus.scss +1 -1
- data/vendor/assets/stylesheets/components/search.scss +12 -6
- data/vendor/assets/stylesheets/components/snackbars.scss +1 -1
- data/vendor/assets/stylesheets/components/spinners.scss +2 -2
- data/vendor/assets/stylesheets/components/tabs.scss +3 -3
- data/vendor/assets/stylesheets/dlegr250_material_design.scss +0 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 5758fbd8b0111d7a6a46507488e244fda03963ee
|
|
4
|
+
data.tar.gz: 20569743001d21368b9c7eac18a6f67552a499d6
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 17b879ef63c73d17262b4eb168d4462be112dbea910b8cdf1feee66cd1f4fe03fb2ac9f8a82d5d850b2036ed69ce32bcaf935ce7c09be6a2b7194e0fea9650db
|
|
7
|
+
data.tar.gz: 36cf4a95784887c6826b55ca852973684bfa72341c5d9c6283599be9c1428cf06152aee08236128e85035c98e8fc66c31cf75ad165434d728abfece3d96dc3de
|
|
@@ -52,15 +52,15 @@ class App.MD.Dialog
|
|
|
52
52
|
element.addClass("visible")
|
|
53
53
|
element.find("input[autofocus]").focus()
|
|
54
54
|
|
|
55
|
-
# Add shadow on dialog appbar when scrolling contents
|
|
56
|
-
$(".dialog-scrollable, .dialog-scrollable-no-actions").on "scroll", (e) ->
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
55
|
+
# # Add shadow on dialog appbar when scrolling contents
|
|
56
|
+
# $(".dialog-scrollable, .dialog-scrollable-no-actions").on "scroll", (e) ->
|
|
57
|
+
# $this = $(this)
|
|
58
|
+
# $dialogAppbar = $this.parents(".dialog").find(".dialog-appbar")
|
|
59
|
+
#
|
|
60
|
+
# if $this.scrollTop()
|
|
61
|
+
# $dialogAppbar.addClass("scroll-shadow")
|
|
62
|
+
# else
|
|
63
|
+
# $dialogAppbar.removeClass("scroll-shadow")
|
|
64
64
|
|
|
65
65
|
false
|
|
66
66
|
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
// Defaults to override
|
|
2
2
|
//----------------------------------------------------------------------
|
|
3
3
|
|
|
4
|
-
$body-background-color: #
|
|
4
|
+
$body-background-color: #ececec !default;
|
|
5
5
|
$color-primary: #2196f3 !default;
|
|
6
|
+
$color-primary: #4285f4 !default;
|
|
6
7
|
$color-secondary: #db4437 !default;
|
|
7
8
|
|
|
8
9
|
// SCSS maps of all colors
|
|
@@ -6,9 +6,9 @@
|
|
|
6
6
|
//----------------------------------------------------------------------
|
|
7
7
|
|
|
8
8
|
$toolbar-height-device-small: 56px !default;
|
|
9
|
-
$toolbar-height-device-medium:
|
|
10
|
-
$toolbar-height-device-large:
|
|
11
|
-
$toolbar-height-device-xlarge:
|
|
9
|
+
$toolbar-height-device-medium: 56px !default;
|
|
10
|
+
$toolbar-height-device-large: 64px !default;
|
|
11
|
+
$toolbar-height-device-xlarge: 64px !default;
|
|
12
12
|
|
|
13
13
|
$toolbar-button-height: 48px !default;
|
|
14
14
|
|
|
@@ -20,16 +20,7 @@ $sidebar-width: 250px !default;
|
|
|
20
20
|
// Text fields
|
|
21
21
|
//----------------------------------------------------------------------
|
|
22
22
|
|
|
23
|
-
$text-fields: "
|
|
24
|
-
input[type='email'],
|
|
25
|
-
input[type='number'],
|
|
26
|
-
input[type='search'],
|
|
27
|
-
input[type='text'],
|
|
28
|
-
input[type='tel'],
|
|
29
|
-
input[type='url'],
|
|
30
|
-
input[type='password'],
|
|
31
|
-
textarea
|
|
32
|
-
";
|
|
23
|
+
$text-fields: "input[type='email'], input[type='number'], input[type='search'], input[type='text'], input[type='tel'], input[type='url'], input[type='password'], textarea";
|
|
33
24
|
|
|
34
25
|
// Dimensions - lists
|
|
35
26
|
//----------------------------------------------------------------------
|
|
@@ -8,13 +8,12 @@
|
|
|
8
8
|
|
|
9
9
|
.badge {
|
|
10
10
|
display: inline-block;
|
|
11
|
-
font-size: $font-size-normal;
|
|
12
11
|
letter-spacing: 0.5px;
|
|
13
12
|
min-width: 18px;
|
|
14
|
-
padding:
|
|
13
|
+
padding: 2px 8px;
|
|
15
14
|
text-align: center;
|
|
16
15
|
vertical-align: middle;
|
|
17
|
-
@include rounded-corners;
|
|
16
|
+
@include rounded-corners(20px);
|
|
18
17
|
}
|
|
19
18
|
|
|
20
19
|
.badge-xsmall {
|
|
@@ -10,6 +10,8 @@
|
|
|
10
10
|
// $buttons: "button, .button, input[type='submit'], input[type='reset'], input[type='button']";
|
|
11
11
|
$buttons: ".button";
|
|
12
12
|
|
|
13
|
+
$default-button-rounded-corners: 4px;
|
|
14
|
+
|
|
13
15
|
// Buttons - base
|
|
14
16
|
//----------------------------------------------------------------------
|
|
15
17
|
|
|
@@ -33,7 +35,7 @@ $buttons: ".button";
|
|
|
33
35
|
@include flex-parent();
|
|
34
36
|
display: inline-flex;
|
|
35
37
|
@include no-touch-highlight;
|
|
36
|
-
@include rounded-corners;
|
|
38
|
+
@include rounded-corners($default-button-rounded-corners);
|
|
37
39
|
@include transition(all 0.2s ease-in-out);
|
|
38
40
|
flex: 0 1 auto; // Stop buttons from expanding
|
|
39
41
|
|
|
@@ -108,22 +110,22 @@ $buttons: ".button";
|
|
|
108
110
|
@include rounded-corners(50%);
|
|
109
111
|
@include transition(background-color 0.30s ease, color 0.30s ease);
|
|
110
112
|
|
|
111
|
-
&:active {
|
|
112
|
-
|
|
113
|
-
}
|
|
113
|
+
// &:active {
|
|
114
|
+
// background-color: darken(color("hover"), 5%);
|
|
115
|
+
// }
|
|
114
116
|
}
|
|
115
117
|
|
|
116
118
|
// Devices with pointers
|
|
117
119
|
@media (hover: hover) {
|
|
118
|
-
.button-icon {
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
}
|
|
120
|
+
// .button-icon {
|
|
121
|
+
// &:hover {
|
|
122
|
+
// background-color: color("hover");
|
|
123
|
+
// }
|
|
124
|
+
//
|
|
125
|
+
// &:active {
|
|
126
|
+
// background-color: darken(color("hover"), 5%);
|
|
127
|
+
// }
|
|
128
|
+
// }
|
|
127
129
|
}
|
|
128
130
|
|
|
129
131
|
// Button icon - sizes
|
|
@@ -131,13 +133,11 @@ $buttons: ".button";
|
|
|
131
133
|
|
|
132
134
|
.button-icon-small {
|
|
133
135
|
height: $button-icon-height * 0.8;
|
|
134
|
-
// line-height: $button-icon-height * 0.8;
|
|
135
136
|
width: $button-icon-height * 0.8;
|
|
136
137
|
}
|
|
137
138
|
|
|
138
139
|
.button-icon-large {
|
|
139
140
|
height: $button-icon-height * 1.2;
|
|
140
|
-
// line-height: $button-icon-height * 1.2;
|
|
141
141
|
width: $button-icon-height * 1.2;
|
|
142
142
|
}
|
|
143
143
|
|
|
@@ -174,6 +174,7 @@ $buttons: ".button";
|
|
|
174
174
|
@each $color-name, $color in $colors {
|
|
175
175
|
.button-raised-#{$color-name} {
|
|
176
176
|
background-color: $color;
|
|
177
|
+
|
|
177
178
|
@if $color-name == "white" {
|
|
178
179
|
color: color("black");
|
|
179
180
|
} @else if $color-name == "offwhite" {
|
|
@@ -181,7 +182,9 @@ $buttons: ".button";
|
|
|
181
182
|
} @else {
|
|
182
183
|
color: color("white");
|
|
183
184
|
}
|
|
185
|
+
|
|
184
186
|
// @include box-shadow(0 1px 2px 0 rgba(0, 0, 0, 0.4));
|
|
187
|
+
@include box-shadow(0 1px 2px rgba(0, 0, 0, 0.24));
|
|
185
188
|
|
|
186
189
|
&:hover {
|
|
187
190
|
background-color: lighten($color, 10%);
|
|
@@ -189,7 +192,7 @@ $buttons: ".button";
|
|
|
189
192
|
|
|
190
193
|
&:active {
|
|
191
194
|
background-color: darken($color, 5%);
|
|
192
|
-
@include box-shadow(0 3px
|
|
195
|
+
@include box-shadow(0 3px 9px 0 rgba(0, 0, 0, 0.5));
|
|
193
196
|
}
|
|
194
197
|
}
|
|
195
198
|
}
|
|
@@ -262,7 +265,7 @@ $buttons: ".button";
|
|
|
262
265
|
position: fixed !important;
|
|
263
266
|
right: $spacing-large;
|
|
264
267
|
width: $button-fab-height;
|
|
265
|
-
|
|
268
|
+
@include elevation(12);
|
|
266
269
|
@include box-shadow(0 3px 7px 0 rgba(0, 0, 0, 0.4));
|
|
267
270
|
@include rounded-corners(250px);
|
|
268
271
|
@include text-shadow(0 -1px 0 color("helper"));
|
|
@@ -309,7 +312,7 @@ $buttons: ".button";
|
|
|
309
312
|
height: $button-fab-height;
|
|
310
313
|
position: fixed !important;
|
|
311
314
|
right: $spacing-large;
|
|
312
|
-
|
|
315
|
+
@include elevation(12);
|
|
313
316
|
}
|
|
314
317
|
|
|
315
318
|
// Buttons - disabled
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
top: 0;
|
|
12
12
|
width: 100%;
|
|
13
13
|
will-change: scale, opacity;
|
|
14
|
-
|
|
14
|
+
@include elevation(24);
|
|
15
15
|
@include flex-parent();
|
|
16
16
|
@include flex-vertical-align-center();
|
|
17
17
|
@include transform(scale(1.15));
|
|
@@ -85,18 +85,18 @@
|
|
|
85
85
|
height: $dialog-header-height;
|
|
86
86
|
padding: 0 $spacing-small;
|
|
87
87
|
position: relative;
|
|
88
|
-
|
|
88
|
+
@include elevation(24);
|
|
89
89
|
}
|
|
90
90
|
|
|
91
91
|
.dialog-appbar-icon {
|
|
92
|
-
width: $
|
|
92
|
+
width: $toolbar-button-height;
|
|
93
93
|
|
|
94
94
|
// To match up with .appbar-button
|
|
95
95
|
.button-icon {
|
|
96
96
|
font-size: $font-size-icon;
|
|
97
|
-
height: $
|
|
98
|
-
line-height: $
|
|
99
|
-
width: $
|
|
97
|
+
height: $toolbar-button-height;
|
|
98
|
+
line-height: $toolbar-button-height;
|
|
99
|
+
width: $toolbar-button-height;
|
|
100
100
|
}
|
|
101
101
|
}
|
|
102
102
|
|
|
@@ -121,7 +121,7 @@
|
|
|
121
121
|
}
|
|
122
122
|
|
|
123
123
|
.dialog-appbar-secondary-actions {
|
|
124
|
-
@include list-item-secondary
|
|
124
|
+
@include list-item-secondary();
|
|
125
125
|
text-align: right;
|
|
126
126
|
@include flex-parent();
|
|
127
127
|
}
|
|
@@ -139,14 +139,14 @@
|
|
|
139
139
|
.dialog-header-icon {
|
|
140
140
|
padding-top: $spacing-normal;
|
|
141
141
|
text-align: center;
|
|
142
|
-
width: $
|
|
142
|
+
width: $toolbar-button-height;
|
|
143
143
|
|
|
144
144
|
// To match up with .appbar-button
|
|
145
145
|
.button-icon {
|
|
146
146
|
font-size: $font-size-icon;
|
|
147
|
-
height: $
|
|
148
|
-
line-height: $
|
|
149
|
-
width: $
|
|
147
|
+
height: $toolbar-button-height;
|
|
148
|
+
line-height: $toolbar-button-height;
|
|
149
|
+
width: $toolbar-button-height;
|
|
150
150
|
}
|
|
151
151
|
}
|
|
152
152
|
|
|
@@ -170,7 +170,7 @@
|
|
|
170
170
|
}
|
|
171
171
|
|
|
172
172
|
.dialog-header-secondary-actions {
|
|
173
|
-
@include list-item-secondary
|
|
173
|
+
@include list-item-secondary();
|
|
174
174
|
}
|
|
175
175
|
|
|
176
176
|
@media (min-width: $device-small) {
|
|
@@ -9,7 +9,6 @@
|
|
|
9
9
|
position: absolute;
|
|
10
10
|
right: 0;
|
|
11
11
|
top: 0;
|
|
12
|
-
width: 100%;
|
|
13
12
|
@include elevation(4);
|
|
14
13
|
@include transition(box-shadow 0.2s ease);
|
|
15
14
|
@include flex-parent();
|
|
@@ -21,6 +20,8 @@
|
|
|
21
20
|
|
|
22
21
|
.toolbar-section {
|
|
23
22
|
@include flex-parent();
|
|
23
|
+
display: inline-flex;
|
|
24
|
+
flex: 1;
|
|
24
25
|
}
|
|
25
26
|
|
|
26
27
|
// Toolbar - title
|
|
@@ -28,7 +29,8 @@
|
|
|
28
29
|
|
|
29
30
|
.toolbar-title {
|
|
30
31
|
flex: 1; // Fill up empty space
|
|
31
|
-
font-size: $font-size-normal;
|
|
32
|
+
font-size: $font-size-normal + 2px;
|
|
33
|
+
margin-left: $spacing-small;
|
|
32
34
|
@include flex-align-left();
|
|
33
35
|
@include font-smoothing();
|
|
34
36
|
@include truncate-text();
|
|
@@ -48,6 +50,13 @@
|
|
|
48
50
|
padding-top: $spacing-xsmall;
|
|
49
51
|
}
|
|
50
52
|
|
|
53
|
+
@media (min-width: $device-medium) {
|
|
54
|
+
.toolbar-title-supertext,
|
|
55
|
+
.toolbar-title-subtext {
|
|
56
|
+
font-size: $font-size-normal;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
51
60
|
// Toolbar - button icon
|
|
52
61
|
//----------------------------------------------------------------------
|
|
53
62
|
|
|
@@ -77,6 +86,14 @@
|
|
|
77
86
|
}
|
|
78
87
|
}
|
|
79
88
|
|
|
89
|
+
// Special menu button
|
|
90
|
+
@media (min-width: $device-large) {
|
|
91
|
+
.toolbar-button-icon[data-behavior="show-left-sidebar"] {
|
|
92
|
+
color: color("disabled");
|
|
93
|
+
pointer-events: none;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
80
97
|
// Toolbar - medium device
|
|
81
98
|
//----------------------------------------------------------------------
|
|
82
99
|
|
|
@@ -119,7 +136,7 @@
|
|
|
119
136
|
.toolbar-divider {
|
|
120
137
|
border: 0;
|
|
121
138
|
display: inline-block;
|
|
122
|
-
height:
|
|
139
|
+
height: 60%;
|
|
123
140
|
margin: 0 $spacing-xsmall;
|
|
124
141
|
width: 0;
|
|
125
142
|
}
|
|
@@ -51,7 +51,7 @@ ol {
|
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
.list-item-secondary-actions {
|
|
54
|
-
@include list-item-secondary
|
|
54
|
+
@include list-item-secondary();
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
// Lists - links in text
|
|
@@ -240,5 +240,5 @@ ol {
|
|
|
240
240
|
}
|
|
241
241
|
|
|
242
242
|
.list-header-secondary-actions {
|
|
243
|
-
@include list-item-secondary
|
|
243
|
+
@include list-item-secondary();
|
|
244
244
|
}
|
|
@@ -92,6 +92,7 @@
|
|
|
92
92
|
max-width: 300px;
|
|
93
93
|
pointer-events: auto;
|
|
94
94
|
position: relative;
|
|
95
|
+
@include elevation(6);
|
|
95
96
|
@include flex-parent();
|
|
96
97
|
@include transparency(1);
|
|
97
98
|
}
|
|
@@ -99,7 +100,7 @@
|
|
|
99
100
|
.search-header {
|
|
100
101
|
background-color: rgba(0, 0, 0, 0.08);
|
|
101
102
|
border: 1px solid transparent;
|
|
102
|
-
height: $
|
|
103
|
+
height: $toolbar-button-height;
|
|
103
104
|
@include rounded-corners(4px);
|
|
104
105
|
}
|
|
105
106
|
|
|
@@ -114,11 +115,11 @@
|
|
|
114
115
|
|
|
115
116
|
.search-results {
|
|
116
117
|
border: 1px solid color("divider");
|
|
117
|
-
border-top: none;
|
|
118
118
|
border-bottom: none;
|
|
119
|
+
border-top: none;
|
|
119
120
|
pointer-events: none;
|
|
120
121
|
position: absolute;
|
|
121
|
-
top: $
|
|
122
|
+
top: $toolbar-height-device-medium - 4px;
|
|
122
123
|
width: 100%;
|
|
123
124
|
@include elevation(24);
|
|
124
125
|
@include box-shadow(0 12px 15px 0 rgba(0,0,0,0.24));
|
|
@@ -133,6 +134,7 @@
|
|
|
133
134
|
|
|
134
135
|
.search[data-state="active"] {
|
|
135
136
|
max-width: 600px;
|
|
137
|
+
@include elevation(24);
|
|
136
138
|
}
|
|
137
139
|
}
|
|
138
140
|
|
|
@@ -140,7 +142,11 @@
|
|
|
140
142
|
//----------------------------------------------------------------------
|
|
141
143
|
|
|
142
144
|
@media (min-width: $device-large) {
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
145
|
+
.search-header {
|
|
146
|
+
height: $toolbar-button-height;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.search-results {
|
|
150
|
+
top: $toolbar-height-device-large - 8px;
|
|
151
|
+
}
|
|
146
152
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
//----------------------------------------------------------------------
|
|
3
3
|
|
|
4
4
|
.page-loader-container {
|
|
5
|
-
@include flex-
|
|
5
|
+
@include flex-parent();
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
// Variables
|
|
@@ -14,7 +14,7 @@ $spinner-height: 24px;
|
|
|
14
14
|
//----------------------------------------------------------------------
|
|
15
15
|
|
|
16
16
|
.spinner-container {
|
|
17
|
-
@include flex-
|
|
17
|
+
@include flex-parent();
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
// Spinners - base
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
display: inline-flex;
|
|
15
15
|
flex: none;
|
|
16
16
|
font-size: $font-size-small;
|
|
17
|
-
font-weight:
|
|
17
|
+
font-weight: 500;
|
|
18
18
|
justify-content: center;
|
|
19
19
|
height: 100%;
|
|
20
20
|
letter-spacing: 0;
|
|
@@ -24,9 +24,9 @@
|
|
|
24
24
|
padding: 0 12px;
|
|
25
25
|
position: relative;
|
|
26
26
|
text-align: center;
|
|
27
|
-
text-transform: uppercase;
|
|
27
|
+
// text-transform: uppercase;
|
|
28
28
|
vertical-align: middle;
|
|
29
|
-
@include font-smoothing();
|
|
29
|
+
// @include font-smoothing();
|
|
30
30
|
@include transition(color 0.30s ease, border-color 0.30s ease, background-color 0.30s ease);
|
|
31
31
|
|
|
32
32
|
&:hover {
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: dlegr250_material_design
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.5.
|
|
4
|
+
version: 0.5.88
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Daniel LeGrand
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: exe
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2017-
|
|
11
|
+
date: 2017-09-05 00:00:00.000000000 Z
|
|
12
12
|
dependencies: []
|
|
13
13
|
description: 'WARNING: ALPHA CODE, NOT PRODUCTION READY. ACTIVELY UNDER DEVELOPMENT
|
|
14
14
|
AS OF AUG 2016. Implement Google Material Design spec with modern browsers in mind
|