Skip to content

Commit 84e1843

Browse files
TransitoryBlissTransitoryBliss
committed
add sass fork
1 parent 666ec3b commit 84e1843

26 files changed

Lines changed: 2071 additions & 9 deletions

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
# https://help.github.com/articles/ignoring-files
33
# Example .gitignore files: https://github.com/github/gitignore
44

5+
*.log
6+
.sass-cache
57
Thumbs.db
68
.DS_Store
79
/node_modules/

‎README.md‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,20 @@ Check out [the demo at this link](http://fezvrasta.github.io/bootstrap-material-
1010

1111
## How to install
1212

13-
BOWER (LESS): bower install bootstrap-material-design --save
14-
BOWER (SASS): bower install bootstrap-material-design-sass --save
15-
NPM (SASS): npm install bootstrap-material-sass --save
16-
GEMS (LESS): gem install bootstrap-material-design
17-
18-
**NB**: the only official repository is the BOWER (LESS) one, the others could (but should not) be outdated.
13+
BOWER: bower install bootstrap-material-design --save
14+
GEMS: gem install bootstrap-material-design
15+
16+
### LESS & SASS
17+
18+
We decided to merge the SASS fork in to the main repository instead of having two seperate ones, [#40](https://github.com/FezVrasta/bootstrap-material-design/issues/40). The default grunt
19+
task will compile the LESS source. To use the SASS base use the SCSS task ```grunt scss```.
20+
21+
**NB** The LESS and SASS bases should reflect each other, right now this project is unstable and under heavy development
22+
so this might not be true before the first stable release.
1923

2024
## Getting started
2125

22-
Navigate to the `template/` folder in this repository, and you will see the `index.html` file, which has the CSS include statements, in the `head` section and the JS includes just before `body` section closes.
26+
Navigate to the `template/` folder in this repository, and you will see the `index.html` file, which has the CSS include statements, in the `head` section and the JS includes just before `body` section closes.
2327
You need to copy the `material/` folder to the root of your project, ensuring that all the files in your project can access the files through the relative URL, supplied in the CSS and the JS includes.
2428

2529
## Todo
@@ -31,7 +35,7 @@ You need to copy the `material/` folder to the root of your project, ensuring th
3135
- [Tabs](http://www.polymer-project.org/components/paper-tabs/demo.html)
3236
- [Toggle buttons](http://www.polymer-project.org/components/paper-toggle-button/demo.html)
3337

34-
I'll try to write every component without the need of Javascript but just CSS, and use JS only if strictly needed.
38+
I'll try to write every component without the need of Javascript but just CSS, and use JS only if strictly needed.
3539
More "todo" things can be found in the ISSUES of this repository.
3640

3741
# Support me

‎gruntfile.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,16 @@ module.exports = function(grunt) {
1717
}
1818
},
1919

20+
sass: {
21+
production: {
22+
files: {
23+
"css-compiled/material.css": "sass/material.scss",
24+
"css-compiled/material-wfont.css": "sass/material-wfont.scss",
25+
"css-compiled/ripples.css": "sass/ripples.scss"
26+
}
27+
}
28+
},
29+
2030
autoprefixer: {
2131
options: {
2232
browsers: ["last 3 versions", "ie 8", "ie 9", "ie 10", "ie 11"]
@@ -54,8 +64,10 @@ module.exports = function(grunt) {
5464

5565
});
5666
grunt.loadNpmTasks("grunt-contrib-less");
67+
grunt.loadNpmTasks("grunt-contrib-sass");
5768
grunt.loadNpmTasks("grunt-autoprefixer");
5869
grunt.loadNpmTasks("grunt-contrib-cssmin");
5970
grunt.loadNpmTasks("grunt-contrib-copy");
6071
grunt.registerTask("default", ["less", "autoprefixer", "cssmin", "copy"]);
72+
grunt.registerTask("scss", ["sass", "autoprefixer", "cssmin", "copy"]);
6173
};

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"grunt-autoprefixer": "^1.0.1",
2222
"grunt-contrib-copy": "^0.6.0",
2323
"grunt-contrib-cssmin": "^0.10.0",
24-
"grunt-contrib-less": "^0.11.4"
24+
"grunt-contrib-less": "^0.11.4",
25+
"grunt-contrib-sass": "^0.8.1"
2526
}
2627
}

‎sass/_alerts.scss‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
// main: _material.scss
2+
3+
.alert {
4+
border: 0px;
5+
border-radius: 0;
6+
a, .alert-link {
7+
color: #FFFFFF;
8+
}
9+
}
10+
11+
12+
// Alert buttons
13+
// --------------------------------------------------
14+
15+
.alert-default {
16+
@include alert-variant(#FFFFFF);
17+
a, .alert-link {
18+
color: #000000;
19+
}
20+
}
21+
22+
.alert-primary {
23+
color: #FFFFFF;
24+
@include alert-variant($primary);
25+
}
26+
// Success appears as green
27+
.alert-success {
28+
color: #FFFFFF;
29+
@include alert-variant($success);
30+
}
31+
// Info appears as blue-green
32+
.alert-info {
33+
color: #FFFFFF;
34+
@include alert-variant($info);
35+
}
36+
// Warning appears as orange
37+
.alert-warning {
38+
color: #FFFFFF;
39+
@include alert-variant($warning);
40+
}
41+
// Danger and error appear as red
42+
.alert-danger {
43+
@include alert-variant($danger);
44+
}
45+
46+
// Material shades
47+
.alert-material-red {
48+
@include alert-variant($red)
49+
}
50+
.alert-material-pink {
51+
@include alert-variant($pink);
52+
}
53+
.alert-material-purple {
54+
@include alert-variant($purple);
55+
}
56+
.alert-material-deeppurple {
57+
@include alert-variant($deeppurple);
58+
}
59+
.alert-material-indigo {
60+
@include alert-variant($indigo);
61+
}
62+
.alert-material-lightblue {
63+
@include alert-variant($lightblue);
64+
}
65+
.alert-material-cyan {
66+
@include alert-variant($cyan);
67+
}
68+
.alert-material-teal {
69+
@include alert-variant($teal);
70+
}
71+
.alert-material-lightgreen {
72+
@include alert-variant($lightgreen);
73+
}
74+
.alert-material-lime {
75+
@include alert-variant($lime);
76+
}
77+
.alert-material-lightyellow {
78+
@include alert-variant($lightyellow);
79+
}
80+
.alert-material-orange {
81+
@include alert-variant($orange);
82+
}
83+
.alert-material-deeporange {
84+
@include alert-variant($deeporange);
85+
}
86+
.alert-material-grey {
87+
@include alert-variant($grey);
88+
}
89+
.alert-material-bluegrey {
90+
@include alert-variant($bluegrey);
91+
}
92+
.alert-material-brown {
93+
@include alert-variant($brown);
94+
}
95+
.alert-material-lightgrey {
96+
@include alert-variant($lightgrey);
97+
}
98+

‎sass/_animations.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// main: _material.scss
2+
3+
@keyframes input-highlight {
4+
0% {
5+
left: 20%;
6+
width: 20%;
7+
}
8+
99% {
9+
width: 0;
10+
left: 0;
11+
opacity: 1;
12+
}
13+
100% {
14+
opacity: 0;
15+
}
16+
}

‎sass/_buttons.scss‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
// main: _material.scss
2+
3+
@mixin btn-shadow(){
4+
@extend .shadow-z-2;
5+
transition: box-shadow transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
6+
&:active:not(.btn-link) {
7+
@extend .shadow-z-3;
8+
}
9+
10+
&:hover {
11+
@extend .shadow-z-5;
12+
}
13+
14+
}
15+
16+
.btn {
17+
position: relative;
18+
padding: 8px 30px;
19+
border: 0;
20+
margin: 10px 1px;
21+
22+
cursor: pointer;
23+
border-radius: 4px;
24+
text-transform: uppercase;
25+
text-decoration: none;
26+
color: $darkbg-text;
27+
28+
&:hover {
29+
color: $darkbg-text;
30+
}
31+
&:hover:not(.btn-link) {
32+
@extend .shadow-z-2-hover;
33+
}
34+
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
35+
&:active:not(.btn-link) {
36+
@extend .shadow-z-3;
37+
}
38+
outline: none !important;
39+
}
40+
// This is needed to style buttons which has not a variation suffix (they must stiled as btn-default)
41+
.btn-link, .btn:not([class^="btn btn-"]), .btn-default {
42+
color: $lightbg-text;
43+
&:hover {
44+
color: $lightbg-text;
45+
}
46+
}
47+
.btn:not([class^="btn btn-"]), .btn-default {
48+
&:hover {
49+
background-color: rgba(255,255,255,0.5);
50+
}
51+
}
52+
53+
.btn-raised {
54+
@include btn-shadow();
55+
}
56+
57+
.open > .dropdown-toggle.btn {
58+
//.variations(#{""}, background-color, $btn-default);
59+
}
60+
.btn-flat {
61+
box-shadow: none !important;
62+
&.btn-default:hover {
63+
background: none;
64+
}
65+
}
66+
67+
.btn-group, .btn-group-vertical {
68+
position: relative;
69+
border-radius: 4px;
70+
margin: 10px 1px;
71+
72+
@include btn-shadow();
73+
&.open .dropdown-toggle {
74+
box-shadow: none;
75+
}
76+
&.btn-group-raised {
77+
@include btn-shadow();
78+
}
79+
.btn, .btn:active, .btn-group {
80+
box-shadow: none !important;
81+
margin: 0;
82+
}
83+
.btn:active .caret { margin-left: -1px; }
84+
}
85+
.btn-group-flat {
86+
box-shadow: none !important;
87+
}
88+
89+
// Floating Action Button (FAB)
90+
91+
.btn-fab {
92+
margin: 0;
93+
padding: 15px;
94+
font-size: 26px;
95+
width: 56px;
96+
height: 56px;
97+
&, &:hover {
98+
//.variations(#{""}, background-color, transparent);
99+
}
100+
&, .ripple-wrapper {
101+
border-radius: 100%;
102+
}
103+
&.btn-mini {
104+
width: 40px;
105+
height: 40px;
106+
padding: 13px;
107+
font-size: 15px;
108+
}
109+
}
110+
111+
// Alert buttons
112+
// --------------------------------------------------
113+
114+
.btn-default {
115+
@include button-variant($btn-default);
116+
}
117+
.btn-primary {
118+
@include button-variant($primary);
119+
}
120+
// Success appears as green
121+
.btn-success {
122+
@include button-variant($success);
123+
}
124+
// Info appears as blue-green
125+
.btn-info {
126+
@include button-variant($info);
127+
}
128+
// Warning appears as orange
129+
.btn-warning {
130+
@include button-variant($warning);
131+
}
132+
// Danger and error appear as red
133+
.btn-danger {
134+
@include button-variant($danger);
135+
}
136+
137+
// Material shades
138+
.btn-material-red {
139+
@include button-variant($red)
140+
}
141+
.btn-material-pink {
142+
@include button-variant($pink);
143+
}
144+
.btn-material-purple {
145+
@include button-variant($purple);
146+
}
147+
.btn-material-deeppurple {
148+
@include button-variant($deeppurple);
149+
}
150+
.btn-material-indigo {
151+
@include button-variant($indigo);
152+
}
153+
.btn-material-lightblue {
154+
@include button-variant($lightblue);
155+
}
156+
.btn-material-cyan {
157+
@include button-variant($cyan);
158+
}
159+
.btn-material-teal {
160+
@include button-variant($teal);
161+
}
162+
.btn-material-lightgreen {
163+
@include button-variant($lightgreen);
164+
}
165+
.btn-material-lime {
166+
@include button-variant($lime);
167+
}
168+
.btn-material-lightyellow {
169+
@include button-variant($lightyellow);
170+
}
171+
.btn-material-orange {
172+
@include button-variant($orange);
173+
}
174+
.btn-material-deeporange {
175+
@include button-variant($deeporange);
176+
}
177+
.btn-material-grey {
178+
@include button-variant($grey);
179+
}
180+
.btn-material-bluegrey {
181+
@include button-variant($bluegrey);
182+
}
183+
.btn-material-brown {
184+
@include button-variant($brown);
185+
}
186+
.btn-material-lightgrey {
187+
@include button-variant($lightgrey);
188+
}
189+

0 commit comments

Comments
 (0)