dlegr250_material_design 0.5.79 → 0.5.80
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/dlegr250_material_design/version.rb +1 -1
- data/vendor/assets/stylesheets/base/global_classes.scss +1 -1
- data/vendor/assets/stylesheets/base/variables/dimensions.scss +12 -0
- data/vendor/assets/stylesheets/components/buttons.scss +7 -1
- data/vendor/assets/stylesheets/components/tabs.scss +21 -11
- 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: afce2656b4ecbf1a27a3282f5ca3e312a91fac91
|
|
4
|
+
data.tar.gz: 1c62eb61ecd9a0130a5d53b84a54f6acbd617278
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 7cfb27951459a35cf3f51665a5551df05d2d8b98d234e03a9a1519e2d678ca801e76908e5aeb36bd82eae9078f771d1d14d791dbaf7ba5083100e4bb6086ce6d
|
|
7
|
+
data.tar.gz: a7a688d6aa9627c291863a923833ca6fd1c8601c34cba8c92ae963706ce651df79faa0980aa8af8cff7c745b03596fdc3fb4cef2b1e2079226e84fad4b6b1a55
|
|
@@ -11,10 +11,21 @@ $body-background-color: #eee !default;
|
|
|
11
11
|
// Dimensions - appbar
|
|
12
12
|
//----------------------------------------------------------------------
|
|
13
13
|
|
|
14
|
+
// DEPRECATE
|
|
14
15
|
$appbar-height-small: 56px !default; // Small devices
|
|
15
16
|
$appbar-height-medium: 64px !default; // Medium to large devices
|
|
16
17
|
$appbar-height: $appbar-height-medium !default;
|
|
17
18
|
|
|
19
|
+
// Use
|
|
20
|
+
$appbar-height-device-small: 56px !default;
|
|
21
|
+
$toolbar-height-device-small: 56px !default;
|
|
22
|
+
|
|
23
|
+
$appbar-height-device-medium: 64px !default;
|
|
24
|
+
$toolbar-height-device-medium: 56px !default;
|
|
25
|
+
|
|
26
|
+
$appbar-height-device-large: 64px !default;
|
|
27
|
+
$toolbar-height-device-large: 56px !default;
|
|
28
|
+
|
|
18
29
|
$appbar-button-height: 48px !default;
|
|
19
30
|
|
|
20
31
|
// Dimensions - toolbar
|
|
@@ -140,6 +151,7 @@ $elevation-6: 6; // FAB (resting), snackbar
|
|
|
140
151
|
$elevation-8: 8; // Bottom nav, menu, raised button
|
|
141
152
|
$elevation-9: 9; // Submenu
|
|
142
153
|
$elevation-12: 12; // FAB (pressed)
|
|
154
|
+
$elevation-14: 14; // Overlay
|
|
143
155
|
$elevation-16: 16; // Sidebar, modal bottom sheet
|
|
144
156
|
$elevation-24: 24; // Dialog, pickers
|
|
145
157
|
$elevation-26: 26; // Popups on top of dialogs
|
|
@@ -28,7 +28,6 @@ $buttons: ".button";
|
|
|
28
28
|
padding: 0 $spacing-normal;
|
|
29
29
|
text-align: center;
|
|
30
30
|
text-decoration: none;
|
|
31
|
-
text-transform: uppercase;
|
|
32
31
|
vertical-align: middle;
|
|
33
32
|
white-space: nowrap;
|
|
34
33
|
@include flex-parent-row-align-center();
|
|
@@ -36,6 +35,7 @@ $buttons: ".button";
|
|
|
36
35
|
@include no-touch-highlight;
|
|
37
36
|
@include rounded-corners;
|
|
38
37
|
@include transition(all 0.2s ease-in-out);
|
|
38
|
+
flex: 0 1 auto; // Stop buttons from expanding
|
|
39
39
|
|
|
40
40
|
&:hover {
|
|
41
41
|
text-decoration: none !important;
|
|
@@ -84,6 +84,12 @@ $buttons: ".button";
|
|
|
84
84
|
min-height: $button-height;
|
|
85
85
|
}
|
|
86
86
|
|
|
87
|
+
// Less left/right padding
|
|
88
|
+
.button-compact {
|
|
89
|
+
padding-left: $spacing-small;
|
|
90
|
+
padding-right: $spacing-small;
|
|
91
|
+
}
|
|
92
|
+
|
|
87
93
|
// Buttons - icon buttons
|
|
88
94
|
//----------------------------------------------------------------------
|
|
89
95
|
|
|
@@ -8,26 +8,33 @@
|
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.tab {
|
|
11
|
-
|
|
11
|
+
align-items: center;
|
|
12
12
|
color: color("helper");
|
|
13
13
|
cursor: pointer;
|
|
14
|
-
font-weight: bold;
|
|
15
14
|
display: inline-flex;
|
|
16
|
-
|
|
15
|
+
flex: none;
|
|
16
|
+
font-size: $font-size-small;
|
|
17
|
+
font-weight: bold;
|
|
17
18
|
justify-content: center;
|
|
18
|
-
flex: 1 1 auto;
|
|
19
|
-
position: relative;
|
|
20
19
|
height: 100%;
|
|
20
|
+
letter-spacing: 0;
|
|
21
21
|
max-width: 264px;
|
|
22
22
|
min-height: 48px;
|
|
23
23
|
min-width: auto;
|
|
24
|
-
padding
|
|
25
|
-
|
|
24
|
+
padding: 0 12px;
|
|
25
|
+
position: relative;
|
|
26
26
|
text-align: center;
|
|
27
27
|
text-transform: uppercase;
|
|
28
28
|
vertical-align: middle;
|
|
29
29
|
@include font-smoothing();
|
|
30
|
-
@include transition(border-color 0.30s ease, background-color 0.30s ease);
|
|
30
|
+
@include transition(color 0.30s ease, border-color 0.30s ease, background-color 0.30s ease);
|
|
31
|
+
|
|
32
|
+
&:hover {
|
|
33
|
+
color: color("text");
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&:hover { border-color: rgba(0, 0, 0, 0.08); }
|
|
37
|
+
&:active { background-color: rgba(0, 0, 0, 0.04); }
|
|
31
38
|
}
|
|
32
39
|
|
|
33
40
|
@each $color-name, $color in $colors {
|
|
@@ -55,12 +62,15 @@
|
|
|
55
62
|
width: 100%;
|
|
56
63
|
|
|
57
64
|
.tab {
|
|
58
|
-
flex: 1;
|
|
59
|
-
flex-basis: 0;
|
|
60
|
-
flex-grow: 1;
|
|
65
|
+
flex: 1 1 auto;
|
|
61
66
|
}
|
|
62
67
|
}
|
|
63
68
|
|
|
69
|
+
@media (min-width: $device-medium) {
|
|
70
|
+
.tab {
|
|
71
|
+
font-size: $font-size-normal;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
64
74
|
|
|
65
75
|
@each $color-name, $color in $colors {
|
|
66
76
|
.tabs-#{$color-name} {
|
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.80
|
|
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-08-
|
|
11
|
+
date: 2017-08-19 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
|