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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 07ae7743aaea56dd0b24c19472f4cb971966c87f
4
- data.tar.gz: fee2d3e6fcf33e076b48cb03bdcc334af1b4b448
3
+ metadata.gz: 904fb49ecd300f7e15e0be83d32148b23612e87e
4
+ data.tar.gz: d370ea262be2080f3bb4b6b9da7557a0775937ee
5
5
  SHA512:
6
- metadata.gz: a2b5685c4a74ccf2ce7eef0a7cb3f6f79a00566d49098c7fb2971dfdc272b3dcd4413d1c9d4765254e06f002f770a89da32c320660c02c053955ea1d163617a2
7
- data.tar.gz: 20d6149a0642d71188fe872f7884753d73250bba6046be29cb533472b2006954c9d3d0d7c59725586b3b2345d1a0ae79087550a14b36d0c309d7cd6d4c1c22e6
6
+ metadata.gz: 942c58820919eb356e12db3def5a57f0b4c289f536ce57f884a3e9e277adda46537b263a9e243633a1e0b07939adcfdb883411a712ba954658d73db014f714a9
7
+ data.tar.gz: 314b2cce2cc76a1eda080c2fed7db1f822cc1796c552a0b27ab2a54c6f0ca94c292c47dbd08d4163821f6facd8a95910311b7150804e8eb202182ee1c66c6052
@@ -1,3 +1,3 @@
1
1
  module Dlegr250MaterialDesign
2
- VERSION = "0.5.99"
2
+ VERSION = "0.6.0"
3
3
  end
@@ -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: 800px !default; // Tablet
11
- $device-large: 1200px !default; // Desktop
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: 500;
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 flex-parent();
109
- display: inline-flex;
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.30s ease, color 0.30s ease);
116
+ @include transition(background-color 0.2s ease-in-out);
117
+ @include flex-parent();
113
118
 
114
- // &:active {
115
- // background-color: darken(color("hover"), 5%);
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
- // .button-icon {
122
- // &:hover {
123
- // background-color: color("hover");
124
- // }
125
- //
126
- // &:active {
127
- // background-color: darken(color("hover"), 5%);
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
- [class^="col-"] {
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.5.99
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-08 00:00:00.000000000 Z
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