dlegr250_material_design 0.5.99 → 0.6.0
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/stylesheets/base/variables/dimensions.scss +2 -2
- data/vendor/assets/stylesheets/components/buttons.scss +24 -18
- data/vendor/assets/stylesheets/components/grids.scss +4 -0
- data/vendor/assets/stylesheets/components/layout/grid.scss +13 -26
- 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: 904fb49ecd300f7e15e0be83d32148b23612e87e
|
|
4
|
+
data.tar.gz: d370ea262be2080f3bb4b6b9da7557a0775937ee
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 942c58820919eb356e12db3def5a57f0b4c289f536ce57f884a3e9e277adda46537b263a9e243633a1e0b07939adcfdb883411a712ba954658d73db014f714a9
|
|
7
|
+
data.tar.gz: 314b2cce2cc76a1eda080c2fed7db1f822cc1796c552a0b27ab2a54c6f0ca94c292c47dbd08d4163821f6facd8a95910311b7150804e8eb202182ee1c66c6052
|
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
|
|
8
8
|
$device-xsmall: 320px !default; // Small phone
|
|
9
9
|
$device-small: 460px !default; // Larger phone
|
|
10
|
-
$device-medium:
|
|
11
|
-
$device-large:
|
|
10
|
+
$device-medium: 820px !default; // Tablet
|
|
11
|
+
$device-large: 1000px !default; // Desktop
|
|
12
12
|
$device-xlarge: 1200px !default; // Large desktop
|
|
13
13
|
|
|
14
14
|
// Dimensions - toolbars
|
|
@@ -22,14 +22,16 @@ $default-button-rounded-corners: 4px;
|
|
|
22
22
|
cursor: pointer;
|
|
23
23
|
// font-size: $font-size-normal;
|
|
24
24
|
font-size: $font-size-normal;
|
|
25
|
-
font-weight:
|
|
25
|
+
font-weight: 600;
|
|
26
26
|
height: $button-height;
|
|
27
|
+
letter-spacing: 0.5px;
|
|
27
28
|
line-height: 1.2;
|
|
28
29
|
min-width: 0;
|
|
29
30
|
outline: none;
|
|
30
31
|
padding: 0 $spacing-normal;
|
|
31
32
|
text-align: center;
|
|
32
33
|
text-decoration: none;
|
|
34
|
+
text-transform: uppercase;
|
|
33
35
|
vertical-align: middle;
|
|
34
36
|
white-space: nowrap;
|
|
35
37
|
@include flex-parent();
|
|
@@ -96,6 +98,8 @@ $default-button-rounded-corners: 4px;
|
|
|
96
98
|
// Buttons - icon buttons
|
|
97
99
|
//----------------------------------------------------------------------
|
|
98
100
|
|
|
101
|
+
$button-icon-height: 40px;
|
|
102
|
+
|
|
99
103
|
// Basic icon without any coloring
|
|
100
104
|
.button-icon {
|
|
101
105
|
background-color: transparent;
|
|
@@ -103,35 +107,37 @@ $default-button-rounded-corners: 4px;
|
|
|
103
107
|
color: color("icon");
|
|
104
108
|
cursor: pointer;
|
|
105
109
|
height: $button-icon-height;
|
|
110
|
+
outline: none;
|
|
106
111
|
text-align: center;
|
|
107
112
|
width: $button-icon-height;
|
|
108
|
-
@include
|
|
109
|
-
|
|
110
|
-
@include no-touch-highlight;
|
|
113
|
+
@include material-icons();
|
|
114
|
+
@include no-touch-highlight-color();
|
|
111
115
|
@include rounded-corners(50%);
|
|
112
|
-
@include transition(background-color 0.
|
|
116
|
+
@include transition(background-color 0.2s ease-in-out);
|
|
117
|
+
@include flex-parent();
|
|
113
118
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
119
|
+
&:active {
|
|
120
|
+
background-color: rgba(0, 0, 0, 0.20);
|
|
121
|
+
}
|
|
117
122
|
}
|
|
118
123
|
|
|
119
|
-
// Devices with pointers
|
|
120
124
|
@media (hover: hover) {
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
125
|
+
.button-icon {
|
|
126
|
+
&:hover {
|
|
127
|
+
background-color: rgba(0, 0, 0, 0.08);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
&:active {
|
|
131
|
+
background-color: rgba(0, 0, 0, 0.20);
|
|
132
|
+
}
|
|
133
|
+
}
|
|
130
134
|
}
|
|
131
135
|
|
|
132
136
|
// Button icon - sizes
|
|
133
137
|
//----------------------------------------------------------------------
|
|
134
138
|
|
|
139
|
+
// TODO make a standard size for small/large, not relative to normal
|
|
140
|
+
|
|
135
141
|
.button-icon-small {
|
|
136
142
|
height: $button-icon-height * 0.8;
|
|
137
143
|
width: $button-icon-height * 0.8;
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
//======================================================================
|
|
2
|
+
// DEPRECATED: is this even used anywhere? 2017-11-27
|
|
3
|
+
//======================================================================
|
|
4
|
+
|
|
1
5
|
//======================================================================
|
|
2
6
|
// EXAMPLE:
|
|
3
7
|
// <div class="grid-row">
|
|
@@ -22,16 +22,6 @@ $flex-grid-columns-count: 12;
|
|
|
22
22
|
.grid-large-padded { padding: $flex-grid-gutter / 2; }
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
// Container
|
|
26
|
-
//----------------------------------------------------------------------
|
|
27
|
-
|
|
28
|
-
.row-container {
|
|
29
|
-
display: block;
|
|
30
|
-
margin: auto;
|
|
31
|
-
padding: $flex-grid-gutter / 2;
|
|
32
|
-
width: $flex-grid-width;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
25
|
// Rows
|
|
36
26
|
//----------------------------------------------------------------------
|
|
37
27
|
|
|
@@ -46,19 +36,28 @@ $flex-grid-columns-count: 12;
|
|
|
46
36
|
// Generate classes
|
|
47
37
|
//----------------------------------------------------------------------
|
|
48
38
|
|
|
49
|
-
|
|
39
|
+
// Shared across all "col-*" classes.
|
|
40
|
+
@mixin grid-column() {
|
|
50
41
|
box-sizing: border-box;
|
|
51
42
|
flex-grow: 0;
|
|
52
43
|
flex-shrink: 0;
|
|
53
44
|
padding: $flex-grid-gutter / 2;
|
|
54
45
|
}
|
|
55
46
|
|
|
47
|
+
// [class^="col-"] {
|
|
48
|
+
// box-sizing: border-box;
|
|
49
|
+
// flex-grow: 0;
|
|
50
|
+
// flex-shrink: 0;
|
|
51
|
+
// padding: $flex-grid-gutter / 2;
|
|
52
|
+
// }
|
|
53
|
+
|
|
56
54
|
// Small devices
|
|
57
55
|
@for $i from 1 through $flex-grid-columns-count {
|
|
58
56
|
$width: (100% / $flex-grid-columns-count * $i);
|
|
59
57
|
.col-small-#{$i} {
|
|
60
58
|
flex-basis: $width;
|
|
61
59
|
max-width: $width;
|
|
60
|
+
@include grid-column();
|
|
62
61
|
}
|
|
63
62
|
}
|
|
64
63
|
|
|
@@ -69,6 +68,7 @@ $flex-grid-columns-count: 12;
|
|
|
69
68
|
.col-medium-#{$i} {
|
|
70
69
|
flex-basis: $width;
|
|
71
70
|
max-width: $width;
|
|
71
|
+
@include grid-column();
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
74
|
}
|
|
@@ -80,6 +80,7 @@ $flex-grid-columns-count: 12;
|
|
|
80
80
|
.col-large-#{$i} {
|
|
81
81
|
flex-basis: $width;
|
|
82
82
|
max-width: $width;
|
|
83
|
+
@include grid-column();
|
|
83
84
|
}
|
|
84
85
|
}
|
|
85
86
|
}
|
|
@@ -91,21 +92,7 @@ $flex-grid-columns-count: 12;
|
|
|
91
92
|
.col-xlarge-#{$i} {
|
|
92
93
|
flex-basis: $width;
|
|
93
94
|
max-width: $width;
|
|
95
|
+
@include grid-column();
|
|
94
96
|
}
|
|
95
97
|
}
|
|
96
98
|
}
|
|
97
|
-
|
|
98
|
-
// On small devices, remove extra padding
|
|
99
|
-
//----------------------------------------------------------------------
|
|
100
|
-
|
|
101
|
-
// .grid .row .col-small-12 {
|
|
102
|
-
// padding: 0;
|
|
103
|
-
// }
|
|
104
|
-
//
|
|
105
|
-
// @media (min-width: $device-medium) {
|
|
106
|
-
// .grid-small-padded .row .col-small-12,
|
|
107
|
-
// .grid-medium-padded .row .col-small-12,
|
|
108
|
-
// .grid-large-padded .row .col-small-12 {
|
|
109
|
-
// padding: $flex-grid-gutter / 2;
|
|
110
|
-
// }
|
|
111
|
-
// }
|
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.
|
|
4
|
+
version: 0.6.0
|
|
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-
|
|
11
|
+
date: 2017-11-27 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
|