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 +4 -4
- data/CHANGELOG.md +4 -0
- data/README.md +8 -9
- data/lib/mui/sass/version.rb +1 -1
- data/vendor/assets/javascripts/mui.js +28 -10
- data/vendor/assets/stylesheets/_mui.scss +2 -6
- data/vendor/assets/stylesheets/mui/_buttons.scss +18 -2
- data/vendor/assets/stylesheets/mui/_checkbox-and-radio.scss +8 -0
- data/vendor/assets/stylesheets/mui/_dropdown.scss +1 -0
- data/vendor/assets/stylesheets/mui/_form.scss +27 -7
- data/vendor/assets/stylesheets/mui/_globals.scss +157 -0
- data/vendor/assets/stylesheets/mui/_panel.scss +8 -0
- data/vendor/assets/stylesheets/mui/_select.scss +9 -0
- data/vendor/assets/stylesheets/mui/_table.scss +4 -5
- data/vendor/assets/stylesheets/mui/_textfield.scss +49 -26
- data/vendor/assets/stylesheets/mui/_variables.scss +45 -48
- data/vendor/assets/stylesheets/mui/mixins/_grid-framework.scss +3 -0
- data/vendor/assets/stylesheets/mui/mixins/_util.scss +465 -0
- metadata +4 -5
- data/vendor/assets/stylesheets/mui/_reboot.scss +0 -182
- data/vendor/assets/stylesheets/mui/normalize-5.0.0.scss +0 -461
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 4c78e10f33f61678ecefe4ae3eb29d1b431c0e77
|
4
|
+
data.tar.gz: 140ba1bf681a6c884d5196828373ced15a2a1d64
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 40470df44e5a5a512d7d83e24359290f34155daf2fdf3c1657b496fc7573cd0c2e96c62d0e6597b41a56189f740f2dc4b14d27743409f74280996d5a534beb24
|
7
|
+
data.tar.gz: ed3819b0bf17aa49ab5c376e54268269557e94723c9904d401c9c5fbdf657c0c6a565effb11e87041066eb5eec991072ccdd1b038841b59d33477866bfbbf697
|
data/CHANGELOG.md
CHANGED
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
|
53
|
-
@import
|
54
|
-
@import
|
55
|
-
|
56
|
-
|
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.
|
data/lib/mui/sass/version.rb
CHANGED
@@ -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.
|
1960
|
+
jqLite.addClass(inputEl, untouchedClass + ' ' + pristineClass);
|
1955
1961
|
|
1956
|
-
//
|
1957
|
-
jqLite.on(inputEl, '
|
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
|
-
|
1960
|
-
|
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
|
-
//
|
7
|
+
// Globals
|
12
8
|
@import
|
13
|
-
"mui/
|
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
|
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
|
@@ -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
|
-
|
26
|
+
.mui-textfield {
|
8
27
|
display: inline-block;
|
28
|
+
vertical-align: bottom;
|
9
29
|
margin-bottom: 0;
|
10
30
|
}
|
11
31
|
|
12
|
-
|
13
|
-
|
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
|
-
|
25
|
-
|
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
|
-
|
50
|
+
.mui-select {
|
31
51
|
display: inline-block;
|
32
52
|
}
|
33
53
|
|
34
|
-
|
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
|
}
|