mui-sass 0.9.8 → 0.9.9
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
}
|