mui-sass 0.9.8 → 0.9.9

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: 91a5cebca7469d407e8a6be7552bf98821f14c9c
4
- data.tar.gz: 25ad2199a8d4a469cd2ed7568b8e384be0d0f19d
3
+ metadata.gz: 4c78e10f33f61678ecefe4ae3eb29d1b431c0e77
4
+ data.tar.gz: 140ba1bf681a6c884d5196828373ced15a2a1d64
5
5
  SHA512:
6
- metadata.gz: 19707a144ac4038997d2df51b4dd81b5c146b6671aa572f8c60961094e7c76eb1895e8ac487f078daf54e596631aa6bea0cc028a01e27123397c6ca5ef2332ef
7
- data.tar.gz: 97b03aa65eef7516759b672d843dae3e8a9666c6b7377cc942998736aeca8384b92b604033edc4efe59d6dbe93a17c937b24c65ff7270c1946028e32c26a1ba3
6
+ metadata.gz: 40470df44e5a5a512d7d83e24359290f34155daf2fdf3c1657b496fc7573cd0c2e96c62d0e6597b41a56189f740f2dc4b14d27743409f74280996d5a534beb24
7
+ data.tar.gz: ed3819b0bf17aa49ab5c376e54268269557e94723c9904d401c9c5fbdf657c0c6a565effb11e87041066eb5eec991072ccdd1b038841b59d33477866bfbbf697
data/CHANGELOG.md CHANGED
@@ -1,3 +1,7 @@
1
+ ## 0.9.9 (2017-02-16)
2
+
3
+ - Update assets to match upstream version
4
+
1
5
  ## 0.9.8 (2017-01-13)
2
6
 
3
7
  - Update assets to match upstream version
data/README.md CHANGED
@@ -43,17 +43,16 @@ By default, using `@import 'mui';` and `//= require mui`, all of MUI components
43
43
 
44
44
  You can also import individual Sass components.
45
45
 
46
- First you need to include core components:
46
+ First you need to include core and global components:
47
47
 
48
48
  ```scss
49
- // Normalizer
50
- @import "mui/normalize-3.0.3";
51
49
  // Core variables and mixins
52
- @import 'mui/colors';
53
- @import 'mui/variables';
54
- @import 'mui/mixins';
55
- // CSS Reboot
56
- @import "mui/reboot";
50
+ @import "mui/colors";
51
+ @import "mui/variables";
52
+ @import "mui/mixins";
53
+
54
+ // Globals
55
+ @import "mui/globals";
57
56
  ```
58
57
 
59
58
  Then include desired Sass component:
@@ -105,4 +104,4 @@ Anyone is welcome to contribute to MUI Sass. Please [raise an issue](https://git
105
104
 
106
105
  MUI © Andres Morey, 2015. Released under the [MIT](https://github.com/muicss/mui/blob/master/LICENSE.txt) license.
107
106
 
108
- `mui-sass` © Dmitriy Tarasov, 2015. Released under the [MIT](https://github.com/rubysamurai/mui-sass/blob/master/LICENSE.txt) license.
107
+ `mui-sass` © Dmitriy Tarasov, 2015. Released under the [MIT](https://github.com/rubysamurai/mui-sass/blob/master/LICENSE.txt) license.
@@ -1,5 +1,5 @@
1
1
  module Mui
2
2
  module Sass
3
- VERSION = '0.9.8'
3
+ VERSION = '0.9.9'
4
4
  end
5
5
  end
@@ -1933,12 +1933,17 @@ var jqLite = require('./lib/jqLite'),
1933
1933
  util = require('./lib/util'),
1934
1934
  animationHelpers = require('./lib/animationHelpers'),
1935
1935
  cssSelector = '.mui-textfield > input, .mui-textfield > textarea',
1936
- emptyClass = 'mui--is-empty',
1937
- notEmptyClass = 'mui--is-not-empty',
1938
- dirtyClass = 'mui--is-dirty',
1939
1936
  floatingLabelClass = 'mui-textfield--float-label';
1940
1937
 
1941
1938
 
1939
+ var touchedClass = 'mui--is-touched', // hasn't lost focus yet
1940
+ untouchedClass = 'mui--is-untouched',
1941
+ pristineClass = 'mui--is-pristine', // user hasn't interacted yet
1942
+ dirtyClass = 'mui--is-dirty',
1943
+ emptyClass = 'mui--is-empty', // control is empty
1944
+ notEmptyClass = 'mui--is-not-empty';
1945
+
1946
+
1942
1947
  /**
1943
1948
  * Initialize input element.
1944
1949
  * @param {Element} inputEl - The input element.
@@ -1948,16 +1953,31 @@ function initialize(inputEl) {
1948
1953
  if (inputEl._muiTextfield === true) return;
1949
1954
  else inputEl._muiTextfield = true;
1950
1955
 
1956
+ // add initial control state classes
1951
1957
  if (inputEl.value.length) jqLite.addClass(inputEl, notEmptyClass);
1952
1958
  else jqLite.addClass(inputEl, emptyClass);
1953
1959
 
1954
- jqLite.on(inputEl, 'input change', inputHandler);
1960
+ jqLite.addClass(inputEl, untouchedClass + ' ' + pristineClass);
1955
1961
 
1956
- // add dirty class on focus
1957
- jqLite.on(inputEl, 'focus', function() {jqLite.addClass(this, dirtyClass);});
1962
+ // replace `untouched` with `touched` when control loses focus
1963
+ jqLite.on(inputEl, 'blur', function blurHandler () {
1964
+ // ignore if event is a window blur
1965
+ if (document.activeElement === inputEl) return;
1958
1966
 
1959
- // add dirty class if element is currently focused
1960
- if (document.activeElement === inputEl) jqLite.addClass(inputEl, dirtyClass);
1967
+ // replace class and remove event handler
1968
+ jqLite.removeClass(inputEl, untouchedClass);
1969
+ jqLite.addClass(inputEl, touchedClass);
1970
+ jqLite.off(inputEl, 'blur', blurHandler);
1971
+ });
1972
+
1973
+ // replace `pristine` with `dirty` when user interacts with control
1974
+ jqLite.one(inputEl, 'input change', function() {
1975
+ jqLite.removeClass(inputEl, pristineClass);
1976
+ jqLite.addClass(inputEl, dirtyClass);
1977
+ });
1978
+
1979
+ // add change handler
1980
+ jqLite.on(inputEl, 'input change', inputHandler);
1961
1981
  }
1962
1982
 
1963
1983
 
@@ -1974,8 +1994,6 @@ function inputHandler() {
1974
1994
  jqLite.removeClass(inputEl, notEmptyClass);
1975
1995
  jqLite.addClass(inputEl, emptyClass)
1976
1996
  }
1977
-
1978
- jqLite.addClass(inputEl, dirtyClass);
1979
1997
  }
1980
1998
 
1981
1999
 
@@ -1,16 +1,12 @@
1
- // Normalizer
2
- @import
3
- "mui/normalize-5.0.0";
4
-
5
1
  // Core variables and mixins
6
2
  @import
7
3
  "mui/colors",
8
4
  "mui/variables",
9
5
  "mui/mixins";
10
6
 
11
- // CSS Reboot
7
+ // Globals
12
8
  @import
13
- "mui/reboot";
9
+ "mui/globals";
14
10
 
15
11
  // Components
16
12
  @import
@@ -13,6 +13,14 @@
13
13
  0 0px 2px rgba(mui-color('black'), 0.12),
14
14
  0 2px 2px rgba(mui-color('black'), 0.20);
15
15
  }
16
+
17
+ // Edge
18
+ @supports (-ms-ime-align:auto) {
19
+ box-shadow: 0 -1px 2px rgba(mui-color('black'), 0.12),
20
+ -1px 0px 2px rgba(mui-color('black'), 0.12),
21
+ 0 0px 2px rgba(mui-color('black'), 0.12),
22
+ 0 2px 2px rgba(mui-color('black'), 0.20);
23
+ }
16
24
  }
17
25
 
18
26
  @mixin x-btn-box-shadow-active() {
@@ -26,6 +34,14 @@
26
34
  0 0px 4px rgba(mui-color('black'), 0.12),
27
35
  1px 3px 4px rgba(mui-color('black'), 0.20);
28
36
  }
37
+
38
+ // Edge
39
+ @supports (-ms-ime-align:auto) {
40
+ box-shadow: 0 -1px 2px rgba(mui-color('black'), 0.12),
41
+ -1px 0px 2px rgba(mui-color('black'), 0.12),
42
+ 0 0px 4px rgba(mui-color('black'), 0.12),
43
+ 1px 3px 4px rgba(mui-color('black'), 0.20);
44
+ }
29
45
  }
30
46
 
31
47
  // ============================================================================
@@ -49,8 +65,7 @@
49
65
  display: inline-block;
50
66
  height: $mui-btn-height;
51
67
  padding: 0 $mui-btn-padding-horizontal;
52
- margin-top: $mui-btn-margin-vertical;
53
- margin-bottom: $mui-btn-margin-vertical;
68
+ margin: $mui-btn-margin-vertical 0;
54
69
 
55
70
  // Look and feel
56
71
  border: none;
@@ -66,6 +81,7 @@
66
81
  white-space: nowrap;
67
82
  user-select: none;
68
83
  font-size: $mui-btn-font-size;
84
+ font-family: inherit;
69
85
  letter-spacing: 0.03em;
70
86
 
71
87
  // For ripples
@@ -16,6 +16,14 @@
16
16
  font-weight: normal;
17
17
  cursor: pointer;
18
18
  }
19
+
20
+ input:disabled {
21
+ cursor: $mui-cursor-disabled;
22
+ }
23
+
24
+ input:focus {
25
+ @include mui-tab-focus();
26
+ }
19
27
  }
20
28
 
21
29
  .mui-radio > label > input[type="radio"],
@@ -52,6 +52,7 @@
52
52
  font-weight: normal;
53
53
  line-height: $mui-base-line-height;
54
54
  color: $mui-dropdown-link-font-color;
55
+ text-decoration: none;
55
56
  white-space: nowrap;
56
57
 
57
58
  // hover & focus state
@@ -2,15 +2,35 @@
2
2
  * MUI Form Component
3
3
  */
4
4
 
5
+ .mui-form {
6
+ legend {
7
+ display: block;
8
+ width: 100%;
9
+ padding: 0;
10
+ margin-bottom: $mui-base-line-height-computed / 2;
11
+ font-size: $mui-form-legend-font-size;
12
+ color: $mui-form-legend-font-color;
13
+ line-height: inherit;
14
+ border: 0;
15
+ }
16
+
17
+ fieldset {
18
+ border: 0;
19
+ padding: 0;
20
+ margin: 0 0 $mui-form-group-margin-bottom 0;
21
+ }
22
+ }
23
+
5
24
  .mui-form--inline {
6
25
  @media (min-width: $mui-screen-sm-min) {
7
- > .mui-textfield {
26
+ .mui-textfield {
8
27
  display: inline-block;
28
+ vertical-align: bottom;
9
29
  margin-bottom: 0;
10
30
  }
11
31
 
12
- > .mui-radio,
13
- > .mui-checkbox {
32
+ .mui-radio,
33
+ .mui-checkbox {
14
34
  display: inline-block;
15
35
  margin-top: 0;
16
36
  margin-bottom: 0;
@@ -21,17 +41,17 @@
21
41
  }
22
42
  }
23
43
 
24
- > .mui-radio > label > input[type="radio"],
25
- > .mui-checkbox > label > input[type="checkbox"] {
44
+ .mui-radio > label > input[type="radio"],
45
+ .mui-checkbox > label > input[type="checkbox"] {
26
46
  position: relative;
27
47
  margin-left: 0;
28
48
  }
29
49
 
30
- > .mui-select {
50
+ .mui-select {
31
51
  display: inline-block;
32
52
  }
33
53
 
34
- > .mui-btn {
54
+ .mui-btn {
35
55
  margin-bottom: 0;
36
56
  margin-top: 0;
37
57
  vertical-align: bottom;
@@ -0,0 +1,157 @@
1
+ /**
2
+ * MUI Globals
3
+ */
4
+
5
+ @if $mui-include-globals == true {
6
+ @include normalizecss();
7
+
8
+ // Body reset
9
+ html {
10
+ font-size: 10px;
11
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
12
+ }
13
+
14
+ body {
15
+ font-family: $mui-base-font-family;
16
+ font-size: $mui-base-font-size;
17
+ font-weight: $mui-base-font-weight;
18
+ line-height: $mui-base-line-height;
19
+ color: $mui-base-font-color;
20
+ background-color: $mui-body-bg-color;
21
+ }
22
+
23
+ // Links
24
+ a {
25
+ color: $mui-link-font-color;
26
+ text-decoration: $mui-link-text-decoration;
27
+
28
+ &:hover,
29
+ &:focus {
30
+ text-decoration: $mui-link-text-decoration-hover;
31
+ }
32
+
33
+ &:focus {
34
+ @include mui-tab-focus();
35
+ }
36
+ }
37
+
38
+ // paragraphs
39
+ p {
40
+ margin: 0 0 ($mui-base-line-height-computed / 2);
41
+ }
42
+
43
+ // lists
44
+ ul,
45
+ ol {
46
+ margin-top: 0;
47
+ margin-bottom: ($mui-base-line-height-computed / 2);
48
+ }
49
+
50
+ // Horizontal rules
51
+ hr {
52
+ margin-top: $mui-base-line-height-computed;
53
+ margin-bottom: $mui-base-line-height-computed;
54
+ border: 0;
55
+ height: 1px;
56
+ background-color: $mui-hr-color;
57
+ }
58
+
59
+ // Strong
60
+ strong {
61
+ font-weight: 700;
62
+ }
63
+
64
+ // Abbreviations
65
+ abbr[title] {
66
+ cursor: help;
67
+ border-bottom: 1px dotted $mui-abbr-border-color;
68
+ }
69
+
70
+ // headers
71
+ h1 {
72
+ @extend .mui--text-display1;
73
+ }
74
+
75
+ h2 {
76
+ @extend .mui--text-headline;
77
+ }
78
+
79
+ h3 {
80
+ @extend .mui--text-title;
81
+ }
82
+
83
+ h4 {
84
+ @extend .mui--text-subhead;
85
+ }
86
+
87
+ h5 {
88
+ @extend .mui--text-body2;
89
+ }
90
+
91
+ h1, h2, h3 {
92
+ margin-top: $mui-base-line-height-computed;
93
+ margin-bottom: ($mui-base-line-height-computed / 2);
94
+ }
95
+
96
+ h4, h5, h6 {
97
+ margin-top: ($mui-base-line-height-computed / 2);
98
+ margin-bottom: ($mui-base-line-height-computed / 2);
99
+ }
100
+ } @else {
101
+ // Cherry pick from normalize.css
102
+
103
+ // remove margin in Firefox and Safari
104
+ .mui-textfield > input,
105
+ .mui-textfield > textarea,
106
+ .mui-select > select {
107
+ margin: 0;
108
+ }
109
+
110
+ // show the overflow in Edge
111
+ .mui-textfield > input {
112
+ overflow: visible;
113
+ }
114
+
115
+ // remove inner border and padding in Firefox
116
+ button.mui-btn::-moz-focus-inner,
117
+ .mui-btn[type="button"]::-moz-focus-inner,
118
+ .mui-btn[type="reset"]::-moz-focus-inner,
119
+ .mui-btn[type="submit"]::-moz-focus-inner {
120
+ border-style: none;
121
+ padding: 0;
122
+ }
123
+
124
+ // restore focus styles unset by previous role
125
+ button.mui-btn:-moz-focusring,
126
+ .mui-btn[type="button"]:-moz-focusring,
127
+ .mui-btn[type="reset"]:-moz-focusring,
128
+ .mui-btn[type="submit"]:-moz-focusring {
129
+ outline: 1px dotted ButtonText;
130
+ }
131
+
132
+ // remove default vertical scrollbar in IE
133
+ .mui-textfield > textarea {
134
+ overflow: auto;
135
+ }
136
+
137
+ // add correct box sizing and padding in IE10-
138
+ .mui-radio,
139
+ .mui-checkbox {
140
+ input {
141
+ box-sizing: border-box;
142
+ padding: 0;
143
+ }
144
+ }
145
+ }
146
+
147
+ @if $mui-base-font-smoothing == true {
148
+ html,
149
+ body,
150
+ button, // safari issue
151
+ input, // safari issue
152
+ textarea { // safari issue
153
+ -webkit-font-smoothing: antialiased;
154
+ -moz-osx-font-smoothing: grayscale;
155
+ text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
156
+ }
157
+ }
@@ -19,4 +19,12 @@
19
19
  0 2px 2px 0 rgba(mui-color('black'), 0.16),
20
20
  0 0px 2px 0 rgba(mui-color('black'), 0.12);
21
21
  }
22
+
23
+ // Edge
24
+ @supports (-ms-ime-align:auto) {
25
+ box-shadow: 0 -1px 2px 0 rgba(mui-color('black'), 0.12),
26
+ -1px 0px 2px 0 rgba(mui-color('black'), 0.12),
27
+ 0 2px 2px 0 rgba(mui-color('black'), 0.16),
28
+ 0 0px 2px 0 rgba(mui-color('black'), 0.12);
29
+ }
22
30
  }