base.sass 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/_base.components.scss +7 -0
- data/_base.functions.scss +9 -0
- data/_base.resets.scss +4 -0
- data/_base.settings.scss +29 -0
- data/base.sass.rb +7 -0
- data/components/_button.scss +127 -0
- data/components/_code.scss +48 -0
- data/components/_display.scss +15 -0
- data/components/_float.scss +11 -0
- data/components/_form-item.scss +35 -0
- data/components/_input.scss +29 -0
- data/components/_message.scss +44 -0
- data/functions/_clearfix.scss +25 -0
- data/functions/_compass.scss +23 -0
- data/functions/_ellipsis-overflow.scss +15 -0
- data/functions/_fixed-position.scss +31 -0
- data/functions/_float.scss +7 -0
- data/functions/_font-face.scss +70 -0
- data/functions/_img-retina.scss +27 -0
- data/functions/_map.scss +55 -0
- data/functions/_support.scss +21 -0
- data/resets/_basic.scss +67 -0
- data/resets/_button-and-input.scss +41 -0
- data/resets/_html5-tag.scss +7 -0
- data/resets/_small-label.scss +16 -0
- metadata +96 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 6f1527de9738b984d7fbc0c24bedbadf48fb3139
|
4
|
+
data.tar.gz: ea7c27137a24bb6a6e842f96b48a5c68510b2cf8
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 2e99f1d7d3e23b1e50cb113d87147fa64faea6a1a6b43333bcac479f294208ab76f7d05fc71924c63a7f6f40ad039d7627a262768a188f053f4c1b879664d4d9
|
7
|
+
data.tar.gz: 36b18820829474eab502714fe0b016c6a88096c4fe74fe5e3d2b10edf1068bb15564dcb571014f53b2d49922d0c02f00bc4241daefa5e611aa4a4e5a2a2dd594
|
@@ -0,0 +1,9 @@
|
|
1
|
+
@import 'functions/compass';
|
2
|
+
@import 'functions/clearfix';
|
3
|
+
@import 'functions/ellipsis-overflow';
|
4
|
+
@import 'functions/fixed-position';
|
5
|
+
@import 'functions/float';
|
6
|
+
@import 'functions/font-face';
|
7
|
+
@import 'functions/img-retina';
|
8
|
+
@import 'functions/map';
|
9
|
+
@import 'functions/support';
|
data/_base.resets.scss
ADDED
data/_base.settings.scss
ADDED
@@ -0,0 +1,29 @@
|
|
1
|
+
$font-family-base: Helvetica Neue, Helvetica, STHeiTi, sans-serif !default;
|
2
|
+
|
3
|
+
$font-size-base: 14px !default;
|
4
|
+
|
5
|
+
$line-height-base: 1.5 !default;
|
6
|
+
|
7
|
+
$text-color: #333 !default;
|
8
|
+
|
9
|
+
$body-bg-color: null !default;
|
10
|
+
|
11
|
+
$input-placeholder-color: #999 !default;
|
12
|
+
|
13
|
+
$selection-colors: (
|
14
|
+
// text: defaults to contrast-color(background),
|
15
|
+
background: null
|
16
|
+
) !default;
|
17
|
+
|
18
|
+
$link-status: (
|
19
|
+
link: (
|
20
|
+
color: #428bca,
|
21
|
+
line: none
|
22
|
+
),
|
23
|
+
hover: (
|
24
|
+
// color: defaults to darken(link.color, 15%),
|
25
|
+
line: underline
|
26
|
+
)
|
27
|
+
) !default;
|
28
|
+
|
29
|
+
$pseudo-element-colon: unquote(if(support-legacy-browser(ie, 8), ':', '::'));
|
data/base.sass.rb
ADDED
@@ -0,0 +1,127 @@
|
|
1
|
+
@function disabled-selectors() {
|
2
|
+
$selectors: unquote('&[disabled], &[disabled]:hover');
|
3
|
+
@if support-legacy-browser(ie, 6) {
|
4
|
+
$selectors: join($selectors, unquote('&.disabled, &.disabled:hover'), comma);
|
5
|
+
}
|
6
|
+
@return $selectors;
|
7
|
+
}
|
8
|
+
|
9
|
+
// Default styles
|
10
|
+
.btn {
|
11
|
+
@include inline-block;
|
12
|
+
padding: 4px 15px;
|
13
|
+
background: {
|
14
|
+
color: #eaeaea;
|
15
|
+
repeat: repeat-x;
|
16
|
+
}
|
17
|
+
@include background-image(linear-gradient(#fafafa, #eaeaea));
|
18
|
+
border: 1px solid #ddd;
|
19
|
+
border-bottom-color: #c5c5c5;
|
20
|
+
border-radius: 4px;
|
21
|
+
box-shadow: 0 1px 3px rgba(#000, 0.05);
|
22
|
+
color: $text-color;
|
23
|
+
font-weight: 500;
|
24
|
+
vertical-align: middle;
|
25
|
+
white-space: nowrap;
|
26
|
+
text-shadow: 0 1px rgba(#fff, 0.9);
|
27
|
+
cursor: pointer;
|
28
|
+
@include user-select(none);
|
29
|
+
|
30
|
+
&:hover {
|
31
|
+
background-color: #dadada;
|
32
|
+
@include background-image(linear-gradient(#eaeaea, #dadada));
|
33
|
+
border-color: #ccc #ccc #b5b5b5;
|
34
|
+
color: $text-color;
|
35
|
+
text-decoration: none;
|
36
|
+
}
|
37
|
+
|
38
|
+
&:active {
|
39
|
+
background: {
|
40
|
+
color: #dadada;
|
41
|
+
image: none;
|
42
|
+
}
|
43
|
+
border-color: #b5b5b5;
|
44
|
+
box-shadow: 0 3px 5px rgba(#000, 0.15) inset;
|
45
|
+
}
|
46
|
+
|
47
|
+
#{disabled-selectors()} {
|
48
|
+
background: {
|
49
|
+
color: #e5e5e5;
|
50
|
+
image: none;
|
51
|
+
}
|
52
|
+
border-color: #c5c5c5;
|
53
|
+
box-shadow: none;
|
54
|
+
color: #666;
|
55
|
+
text-shadow: 0 1px rgba(#fff, 0.9);
|
56
|
+
cursor: default;
|
57
|
+
@include opacity(0.5);
|
58
|
+
}
|
59
|
+
}
|
60
|
+
button.btn {
|
61
|
+
@if support-legacy-browser(ie, 7) {
|
62
|
+
*padding: {
|
63
|
+
top: 1px;
|
64
|
+
bottom: 2px;
|
65
|
+
}
|
66
|
+
}
|
67
|
+
}
|
68
|
+
|
69
|
+
.btn-primary {
|
70
|
+
&, #{disabled-selectors()} {
|
71
|
+
background-color: #60b044;
|
72
|
+
@include background-image(linear-gradient(#8add6d, #60b044));
|
73
|
+
color: #fff;
|
74
|
+
text-shadow: 0 -1px rgba(#000, 0.25);
|
75
|
+
}
|
76
|
+
|
77
|
+
border-color: #5ca941;
|
78
|
+
|
79
|
+
#{disabled-selectors()} {
|
80
|
+
border-color: #74bb5a #74bb5a #509338;
|
81
|
+
}
|
82
|
+
|
83
|
+
&:hover {
|
84
|
+
background-color: #569e3d;
|
85
|
+
@include background-image(linear-gradient(#79d858, #569e3d));
|
86
|
+
border-color: #4a993e;
|
87
|
+
color: #fff;
|
88
|
+
}
|
89
|
+
|
90
|
+
&:active {
|
91
|
+
background: {
|
92
|
+
color: #569e3d;
|
93
|
+
image: none;
|
94
|
+
}
|
95
|
+
border-color: #418737;
|
96
|
+
}
|
97
|
+
}
|
98
|
+
|
99
|
+
// dangerous operation
|
100
|
+
.btn-danger {
|
101
|
+
color: #900;
|
102
|
+
|
103
|
+
&:hover {
|
104
|
+
background-color: #b33630;
|
105
|
+
@include background-image(linear-gradient(#dc5f59, #b33630));
|
106
|
+
border-color: #cd504a;
|
107
|
+
color: #fff;
|
108
|
+
text-shadow: 0 -1px rgba(#000, 0.3);
|
109
|
+
}
|
110
|
+
|
111
|
+
&:active {
|
112
|
+
background: {
|
113
|
+
color: #b33630;
|
114
|
+
image: none;
|
115
|
+
}
|
116
|
+
border-color: #9f312c;
|
117
|
+
color: #fff;
|
118
|
+
}
|
119
|
+
|
120
|
+
#{disabled-selectors()} {
|
121
|
+
background-color: #e1e1e1;
|
122
|
+
@include background-image(linear-gradient(#fff, #e1e1e1));
|
123
|
+
border-color: #c5c5c5;
|
124
|
+
color: #900;
|
125
|
+
text-shadow: 0 1px rgba(#fff, 0.9);
|
126
|
+
}
|
127
|
+
}
|
@@ -0,0 +1,48 @@
|
|
1
|
+
$font-family-code: Monaco, Menlo, Consolas, Courier New, monospace !default;
|
2
|
+
$code-colors: (
|
3
|
+
inline: (
|
4
|
+
text: #c7254e,
|
5
|
+
background: #f9f2f4,
|
6
|
+
border: transparent
|
7
|
+
),
|
8
|
+
block: (
|
9
|
+
text: inherit,
|
10
|
+
background: #f5f5f5,
|
11
|
+
border: #ccc
|
12
|
+
)
|
13
|
+
) !default;
|
14
|
+
|
15
|
+
|
16
|
+
code, pre {
|
17
|
+
font-family: $font-family-code;
|
18
|
+
}
|
19
|
+
|
20
|
+
code {
|
21
|
+
margin: 0 3px;
|
22
|
+
padding: 2px 4px;
|
23
|
+
background-color: map-find($code-colors, 'inline.background');
|
24
|
+
border: 1px solid map-find($code-colors, 'inline.border');
|
25
|
+
border-radius: 4px;
|
26
|
+
color: map-find($code-colors, 'inline.text');
|
27
|
+
font-size: 90%;
|
28
|
+
white-space: nowrap;
|
29
|
+
}
|
30
|
+
|
31
|
+
pre {
|
32
|
+
padding: 6px 10px;
|
33
|
+
overflow: auto;
|
34
|
+
background-color: map-find($code-colors, 'block.background');
|
35
|
+
border: 1px solid map-find($code-colors, 'block.border');
|
36
|
+
border-radius: 4px;
|
37
|
+
color: map-find($code-colors, 'block.text');
|
38
|
+
|
39
|
+
code {
|
40
|
+
margin: 0;
|
41
|
+
padding: 0;
|
42
|
+
background-color: transparent;
|
43
|
+
border: 0;
|
44
|
+
color: inherit;
|
45
|
+
font-size: inherit;
|
46
|
+
white-space: pre;
|
47
|
+
}
|
48
|
+
}
|
@@ -0,0 +1,35 @@
|
|
1
|
+
.form-item {
|
2
|
+
@include clearfix;
|
3
|
+
padding: 10px;
|
4
|
+
|
5
|
+
.input {
|
6
|
+
width: 33%;
|
7
|
+
min-width: 200px;
|
8
|
+
margin-right: 5px;
|
9
|
+
}
|
10
|
+
|
11
|
+
.btn[type='submit'] {
|
12
|
+
font-size: round($font-size-base * 1.25);
|
13
|
+
}
|
14
|
+
|
15
|
+
.heading-label {
|
16
|
+
display: block;
|
17
|
+
margin-bottom: 5px;
|
18
|
+
cursor: pointer;
|
19
|
+
}
|
20
|
+
|
21
|
+
.linking-label {
|
22
|
+
margin: {
|
23
|
+
left: 5px;
|
24
|
+
right: 5px;
|
25
|
+
}
|
26
|
+
vertical-align: middle;
|
27
|
+
cursor: pointer;
|
28
|
+
}
|
29
|
+
|
30
|
+
.required#{$pseudo-element-colon}after {
|
31
|
+
content: '*';
|
32
|
+
margin-left: 5px;
|
33
|
+
color: #d9534f;
|
34
|
+
}
|
35
|
+
}
|
@@ -0,0 +1,29 @@
|
|
1
|
+
.input {
|
2
|
+
padding: 8px 7px 6px;
|
3
|
+
background-color: #fafafa;
|
4
|
+
border: 1px solid #c5c5c5;
|
5
|
+
border-radius: 4px;
|
6
|
+
box-shadow: 0 1px 2px rgba(#000, 0.075) inset;
|
7
|
+
outline: 0;
|
8
|
+
line-height: 1.2;
|
9
|
+
@include transition(border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out);
|
10
|
+
|
11
|
+
&:focus {
|
12
|
+
background-color: #fff;
|
13
|
+
border-color: #51a7e8;
|
14
|
+
box-shadow: 0 1px 2px rgba(#000, 0.075) inset, 0 0 5px rgba(#51a7e8, 0.5);
|
15
|
+
}
|
16
|
+
|
17
|
+
&[disabled], &[readonly] {
|
18
|
+
background-color: #e5e5e5;
|
19
|
+
border-color: #c5c5c5;
|
20
|
+
@include opacity(0.5);
|
21
|
+
cursor: not-allowed;
|
22
|
+
}
|
23
|
+
}
|
24
|
+
|
25
|
+
textarea.input {
|
26
|
+
overflow: auto;
|
27
|
+
resize: vertical;
|
28
|
+
line-height: $line-height-base;
|
29
|
+
}
|
@@ -0,0 +1,44 @@
|
|
1
|
+
$message-colors: (
|
2
|
+
success: (
|
3
|
+
text: #468847,
|
4
|
+
background: #dff0d8,
|
5
|
+
border: darken(adjust-hue(#dff0d8, -10), 5%)
|
6
|
+
),
|
7
|
+
error: (
|
8
|
+
text: #b94a48,
|
9
|
+
background: #f2dede,
|
10
|
+
border: darken(adjust-hue(#f2dede, -10), 3%)
|
11
|
+
),
|
12
|
+
warn: (
|
13
|
+
text: #c09853,
|
14
|
+
background: #fcf8e3,
|
15
|
+
border: darken(adjust-hue(#fcf8e3, -10), 3%)
|
16
|
+
),
|
17
|
+
info: (
|
18
|
+
text: #3a87ad,
|
19
|
+
background: #d9edf7,
|
20
|
+
border: darken(adjust-hue(#d9edf7, -10), 7%)
|
21
|
+
)
|
22
|
+
) !default;
|
23
|
+
|
24
|
+
|
25
|
+
%message {
|
26
|
+
margin-bottom: 15px;
|
27
|
+
padding: 8px 13px 6px;
|
28
|
+
border: 1px solid transparent;
|
29
|
+
border-radius: 4px;
|
30
|
+
text-align: left;
|
31
|
+
}
|
32
|
+
|
33
|
+
@each $type, $colors in $message-colors {
|
34
|
+
.message-#{$type} {
|
35
|
+
@extend %message;
|
36
|
+
background-color: map-get($colors, background);
|
37
|
+
border-color: map-get($colors, border);
|
38
|
+
color: map-get($colors, text);
|
39
|
+
|
40
|
+
a {
|
41
|
+
color: darken(map-get($colors, text), 10%);
|
42
|
+
}
|
43
|
+
}
|
44
|
+
}
|
@@ -0,0 +1,25 @@
|
|
1
|
+
@mixin clearfix {
|
2
|
+
// Only register once
|
3
|
+
@if not global-variable-exists(clearfix-exists) {
|
4
|
+
@at-root %clearfix {
|
5
|
+
&#{$pseudo-element-colon}before,
|
6
|
+
&#{$pseudo-element-colon}after {
|
7
|
+
content: '\20';
|
8
|
+
display: table;
|
9
|
+
}
|
10
|
+
|
11
|
+
&#{$pseudo-element-colon}after {
|
12
|
+
clear: both;
|
13
|
+
}
|
14
|
+
|
15
|
+
@if support-legacy-browser(ie, 7) {
|
16
|
+
*zoom: 1;
|
17
|
+
}
|
18
|
+
}
|
19
|
+
|
20
|
+
// Mark
|
21
|
+
$clearfix-exists: true !global;
|
22
|
+
}
|
23
|
+
|
24
|
+
@extend %clearfix;
|
25
|
+
}
|
@@ -0,0 +1,23 @@
|
|
1
|
+
@import 'compass/css3';
|
2
|
+
@import 'compass/css3/selection';
|
3
|
+
@import 'compass/reset/utilities'; // Only use reset-font, reset-list-style, reset-table and reset-html5
|
4
|
+
@import 'compass/utilities/sass';
|
5
|
+
|
6
|
+
// Override `compass/css3/appearance`
|
7
|
+
@mixin appearance($appearance) {
|
8
|
+
@each $prefix in -webkit, -moz {
|
9
|
+
@if support-prefix($prefix) {
|
10
|
+
@include prefix-prop(appearance, $appearance, $prefix);
|
11
|
+
}
|
12
|
+
}
|
13
|
+
}
|
14
|
+
|
15
|
+
// Override `compass/css3/inline-block`
|
16
|
+
@mixin inline-block {
|
17
|
+
display: inline-block;
|
18
|
+
|
19
|
+
@if support-legacy-browser(ie, 7) {
|
20
|
+
*display: inline;
|
21
|
+
*zoom: 1;
|
22
|
+
}
|
23
|
+
}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
@mixin ellipsis-overflow {
|
2
|
+
// Only register once
|
3
|
+
@if not global-variable-exists(ellipsis-overflow-exists) {
|
4
|
+
@at-root %ellipsis-overflow {
|
5
|
+
overflow: hidden;
|
6
|
+
text-overflow: ellipsis;
|
7
|
+
white-space: nowrap;
|
8
|
+
}
|
9
|
+
|
10
|
+
// Mark
|
11
|
+
$ellipsis-overflow-exists: true !global;
|
12
|
+
}
|
13
|
+
|
14
|
+
@extend %ellipsis-overflow;
|
15
|
+
}
|
@@ -0,0 +1,31 @@
|
|
1
|
+
@mixin fixed-position($x: center, $y: center) {
|
2
|
+
$map: (
|
3
|
+
x: (
|
4
|
+
left: 0,
|
5
|
+
right: 0,
|
6
|
+
center: 50%
|
7
|
+
),
|
8
|
+
y: (
|
9
|
+
top: 0,
|
10
|
+
bottom: 0,
|
11
|
+
center: 50%
|
12
|
+
)
|
13
|
+
);
|
14
|
+
|
15
|
+
position: fixed;
|
16
|
+
|
17
|
+
#{if($x == right, right, left)}: map-find($map, 'x.#{$x}') or $x;
|
18
|
+
#{if($y == bottom, bottom, top)}: map-find($map, 'y.#{$y}') or $y;
|
19
|
+
|
20
|
+
@if $x == center or $y == center {
|
21
|
+
@include translate(-to-number($x), -to-number($y));
|
22
|
+
}
|
23
|
+
|
24
|
+
@content;
|
25
|
+
}
|
26
|
+
|
27
|
+
|
28
|
+
// === Pivate (start with hyphen) ===
|
29
|
+
@function -to-number($s) {
|
30
|
+
@return if($s == center, -50%, 0);
|
31
|
+
}
|
@@ -0,0 +1,70 @@
|
|
1
|
+
// Override `compass/css3/font-face`
|
2
|
+
// Browsers support data: http://caniuse.com/fontface
|
3
|
+
@mixin font-face($filename, $font-family: $filename, $path: null) {
|
4
|
+
@if not at-stylesheet-root() {
|
5
|
+
@warn 'include font-face mixin from the root level of your stylesheet.';
|
6
|
+
}
|
7
|
+
|
8
|
+
$prefix: '#{$filename}';
|
9
|
+
$ts: if(is-absolute($path), '?' + timestamp(), '');
|
10
|
+
|
11
|
+
@if type-of($path) == string {
|
12
|
+
@if str-slice($path, str-length($path)) != '/' {
|
13
|
+
$path: $path + '/';
|
14
|
+
}
|
15
|
+
|
16
|
+
$prefix: $path + $prefix;
|
17
|
+
}
|
18
|
+
|
19
|
+
@font-face {
|
20
|
+
font-family: '#{$font-family}';
|
21
|
+
|
22
|
+
// IE9 compat mode
|
23
|
+
@if support-legacy-browser(ie, 9) {
|
24
|
+
src: font-url($prefix + '.eot' + $ts);
|
25
|
+
}
|
26
|
+
src: -combo-font-urls($prefix, $ts);
|
27
|
+
|
28
|
+
@content;
|
29
|
+
}
|
30
|
+
}
|
31
|
+
|
32
|
+
// Check whether the $path is start with either `/` or `http`.
|
33
|
+
@function is-absolute($path) {
|
34
|
+
$path: '#{$path}';
|
35
|
+
@return str-slice($path, 0, 1) == '/' or str-slice($path, 0, 4) == 'http';
|
36
|
+
}
|
37
|
+
|
38
|
+
@function timestamp() {
|
39
|
+
@return current-time('%Y%m%d%H%M%S');
|
40
|
+
}
|
41
|
+
|
42
|
+
|
43
|
+
// === Pivate (start with hyphen) ===
|
44
|
+
@function -combo-font-urls($prefix, $timestamp) {
|
45
|
+
$src: comma-list();
|
46
|
+
|
47
|
+
@if support-legacy-browser(ie, 8) {
|
48
|
+
$src: append($src, font-files($prefix + '.eot' + $timestamp + '#iefix'));
|
49
|
+
}
|
50
|
+
|
51
|
+
// Modern browsers
|
52
|
+
$src: append($src, font-files($prefix + '.woff' + $timestamp));
|
53
|
+
|
54
|
+
@if support-legacy-browser(ios-safari, '4.2-4.3') or
|
55
|
+
support-legacy-browser(android, '4.2-4.3') or
|
56
|
+
support-legacy-browser(safari, 5) or
|
57
|
+
support-legacy-browser(opera, 11)
|
58
|
+
{
|
59
|
+
$src: append($src, font-files($prefix + '.ttf' + $timestamp));
|
60
|
+
}
|
61
|
+
|
62
|
+
@if support-legacy-browser(ios-safari, '4.0-4.1') or
|
63
|
+
support-legacy-browser(android, 2.3) or
|
64
|
+
index($supported-browsers, opera-mini)
|
65
|
+
{
|
66
|
+
$src: append($src, font-files($prefix + '.svg' + $timestamp + '#legacy'));
|
67
|
+
}
|
68
|
+
|
69
|
+
@return $src;
|
70
|
+
}
|
@@ -0,0 +1,27 @@
|
|
1
|
+
// Short retina mixin for setting `background-image` and `background-size`.
|
2
|
+
@mixin img-retina($img-1x, $img-2x, $bg-size: $default-background-size) {
|
3
|
+
background-image: image-url($img-1x);
|
4
|
+
|
5
|
+
$vendor: comma-list();
|
6
|
+
@include with-each-prefix(background-img-opts, $background-size-threshold) {
|
7
|
+
@if $current-prefix == -webkit { $vendor: append($vendor, -vendor(-webkit-min, '2')); }
|
8
|
+
@if $current-prefix == -moz { $vendor: append($vendor, -vendor(min--moz, '2')); }
|
9
|
+
@if $current-prefix == -o { $vendor: append($vendor, -vendor(-o-min, '2/1')); }
|
10
|
+
@if $current-prefix == null { $vendor: append($vendor, -vendor(min, '2')); }
|
11
|
+
}
|
12
|
+
|
13
|
+
@media #{$vendor},
|
14
|
+
only screen and (min-resolution: 192dpi),
|
15
|
+
only screen and (min-resolution: 2dppx) {
|
16
|
+
background: {
|
17
|
+
image: image-url($img-2x);
|
18
|
+
size: unquote($bg-size);
|
19
|
+
}
|
20
|
+
}
|
21
|
+
}
|
22
|
+
|
23
|
+
|
24
|
+
// === Pivate (start with hyphen) ===
|
25
|
+
@function -vendor($prefix, $ratio) {
|
26
|
+
@return unquote('only screen and (#{$prefix}-device-pixel-ratio: #{$ratio})');
|
27
|
+
}
|
data/functions/_map.scss
ADDED
@@ -0,0 +1,55 @@
|
|
1
|
+
// Example:
|
2
|
+
//
|
3
|
+
// $map1: ( a: (x: 'x') );
|
4
|
+
// $map2: ( a: (y: 'y') );
|
5
|
+
//
|
6
|
+
// map-deep-merge($map1, $map2)
|
7
|
+
// => ( a: (x: 'x', y: 'y') )
|
8
|
+
@function map-deep-merge($map, $sub-map) {
|
9
|
+
@if type-of($map) != map or type-of($sub-map) != map {
|
10
|
+
@warn 'Params for `map-deep-merge` require map data.';
|
11
|
+
@return null;
|
12
|
+
}
|
13
|
+
|
14
|
+
@each $key, $value in $sub-map {
|
15
|
+
$original: map-get($map, $key);
|
16
|
+
|
17
|
+
@if type-of($original) == map and type-of($value) == map {
|
18
|
+
$value: map-deep-merge($original, $value);
|
19
|
+
}
|
20
|
+
|
21
|
+
$map: map-merge($map, ($key: $value));
|
22
|
+
}
|
23
|
+
|
24
|
+
@return $map;
|
25
|
+
}
|
26
|
+
|
27
|
+
|
28
|
+
// Example:
|
29
|
+
//
|
30
|
+
// $map: (
|
31
|
+
// a: (
|
32
|
+
// b: (
|
33
|
+
// c: 'Good job!'
|
34
|
+
// )
|
35
|
+
// )
|
36
|
+
// );
|
37
|
+
//
|
38
|
+
// Before: map-get(map-get(map-get($map, a), b), c)
|
39
|
+
// After: map-find($map, 'a.b.c')
|
40
|
+
@function map-find($map, $keys) {
|
41
|
+
@while str-index($keys, '.') {
|
42
|
+
$index: str-index($keys, '.');
|
43
|
+
|
44
|
+
// Child elements
|
45
|
+
$map: map-get($map, str-slice($keys, 0, $index - 1));
|
46
|
+
@if type-of($map) != map {
|
47
|
+
@return null;
|
48
|
+
}
|
49
|
+
|
50
|
+
// Rest keys
|
51
|
+
$keys: str-slice($keys, $index + 1);
|
52
|
+
}
|
53
|
+
|
54
|
+
@return map-get($map, $keys);
|
55
|
+
}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
// Check whether the $prefix is supported according to the supported browsers.
|
2
|
+
@function support-prefix($prefix) {
|
3
|
+
$index: index(browser-prefixes($supported-browsers), $prefix);
|
4
|
+
@return $index != null and $index != false;
|
5
|
+
}
|
6
|
+
|
7
|
+
// Check whether the $browser is supported according to the supported browsers,
|
8
|
+
// only declared minimum support (overwrite Compass).
|
9
|
+
@function support-legacy-browser($browser, $min-version, $max-version: null, $threshold: null) {
|
10
|
+
@if not index($supported-browsers, $browser) {
|
11
|
+
@return false;
|
12
|
+
}
|
13
|
+
|
14
|
+
$min-required-version: map-get($browser-minimum-versions, $browser);
|
15
|
+
|
16
|
+
@if not $min-required-version {
|
17
|
+
@return true;
|
18
|
+
}
|
19
|
+
|
20
|
+
@return compare-browser-versions($browser, '#{$max-version or $min-version}', $min-required-version) >= 0;
|
21
|
+
}
|
data/resets/_basic.scss
ADDED
@@ -0,0 +1,67 @@
|
|
1
|
+
* {
|
2
|
+
margin: 0;
|
3
|
+
padding: 0;
|
4
|
+
|
5
|
+
@if support-prefix(-webkit) {
|
6
|
+
-webkit-tap-highlight-color: rgba(#fff, 0);
|
7
|
+
}
|
8
|
+
|
9
|
+
$selection-text-color: map-get($selection-colors, text);
|
10
|
+
$selection-bg-color: map-get($selection-colors, background);
|
11
|
+
|
12
|
+
@if $selection-text-color != null {
|
13
|
+
@include selection($selection-bg-color, $selection-text-color) {
|
14
|
+
text-shadow: none;
|
15
|
+
}
|
16
|
+
}
|
17
|
+
@else if $selection-bg-color != null {
|
18
|
+
@include selection($selection-bg-color) {
|
19
|
+
text-shadow: none;
|
20
|
+
}
|
21
|
+
}
|
22
|
+
}
|
23
|
+
|
24
|
+
html {
|
25
|
+
@if support-prefix(-webkit) {
|
26
|
+
-webkit-overflow-scrolling: touch;
|
27
|
+
-webkit-text-size-adjust: 100%;
|
28
|
+
}
|
29
|
+
|
30
|
+
@if index($supported-browsers, ie-mobile) {
|
31
|
+
-ms-text-size-adjust: 100%;
|
32
|
+
}
|
33
|
+
}
|
34
|
+
|
35
|
+
body {
|
36
|
+
background-color: $body-bg-color;
|
37
|
+
color: $text-color;
|
38
|
+
font: unquote($font-size-base + '/' + $line-height-base) $font-family-base;
|
39
|
+
}
|
40
|
+
|
41
|
+
a {
|
42
|
+
color: map-find($link-status, 'link.color');
|
43
|
+
text-decoration: map-find($link-status, 'link.line');
|
44
|
+
|
45
|
+
&:hover {
|
46
|
+
color: map-find($link-status, 'hover.color')
|
47
|
+
or
|
48
|
+
darken(map-find($link-status, 'link.color'), 15%);
|
49
|
+
text-decoration: map-find($link-status, 'hover.line');
|
50
|
+
}
|
51
|
+
}
|
52
|
+
|
53
|
+
em {
|
54
|
+
font-style: normal;
|
55
|
+
}
|
56
|
+
|
57
|
+
img {
|
58
|
+
border: 0;
|
59
|
+
}
|
60
|
+
|
61
|
+
ol, ul {
|
62
|
+
@include reset-list-style;
|
63
|
+
}
|
64
|
+
|
65
|
+
table {
|
66
|
+
@include reset-table;
|
67
|
+
}
|
@@ -0,0 +1,41 @@
|
|
1
|
+
button, input, textarea, select {
|
2
|
+
@include reset-font;
|
3
|
+
}
|
4
|
+
|
5
|
+
button, input {
|
6
|
+
@if support-prefix(-moz) {
|
7
|
+
&::-moz-focus-inner {
|
8
|
+
padding: 0;
|
9
|
+
border: 0;
|
10
|
+
}
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
button, html input[type='button'], input[type='reset'], input[type='submit'] {
|
15
|
+
cursor: pointer;
|
16
|
+
|
17
|
+
@if index($supported-browsers, ios-safari) {
|
18
|
+
-webkit-appearance: button;
|
19
|
+
}
|
20
|
+
|
21
|
+
@if support-legacy-browser(ie, 7) {
|
22
|
+
*overflow: visible;
|
23
|
+
}
|
24
|
+
}
|
25
|
+
|
26
|
+
input[type='search'] {
|
27
|
+
@include appearance(textfield);
|
28
|
+
@include box-sizing(content-box);
|
29
|
+
|
30
|
+
@if support-prefix(-webkit) {
|
31
|
+
&::-webkit-search-decoration {
|
32
|
+
-webkit-appearance: none;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
}
|
36
|
+
|
37
|
+
#{elements-of-type(text-input)} {
|
38
|
+
@include input-placeholder {
|
39
|
+
color: $input-placeholder-color;
|
40
|
+
}
|
41
|
+
}
|
metadata
ADDED
@@ -0,0 +1,96 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: base.sass
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.1.0
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- junjun.zhang <http://MrZhang.me>
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
date: 2014-04-18 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: sass
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - "~>"
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: 3.3.5
|
20
|
+
type: :development
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - "~>"
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: 3.3.5
|
27
|
+
- !ruby/object:Gem::Dependency
|
28
|
+
name: compass
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
30
|
+
requirements:
|
31
|
+
- - "~>"
|
32
|
+
- !ruby/object:Gem::Version
|
33
|
+
version: 1.0.0.alpha
|
34
|
+
type: :development
|
35
|
+
prerelease: false
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
37
|
+
requirements:
|
38
|
+
- - "~>"
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: 1.0.0.alpha
|
41
|
+
description:
|
42
|
+
email:
|
43
|
+
executables: []
|
44
|
+
extensions: []
|
45
|
+
extra_rdoc_files: []
|
46
|
+
files:
|
47
|
+
- _base.components.scss
|
48
|
+
- _base.functions.scss
|
49
|
+
- _base.resets.scss
|
50
|
+
- _base.settings.scss
|
51
|
+
- base.sass.rb
|
52
|
+
- components/_button.scss
|
53
|
+
- components/_code.scss
|
54
|
+
- components/_display.scss
|
55
|
+
- components/_float.scss
|
56
|
+
- components/_form-item.scss
|
57
|
+
- components/_input.scss
|
58
|
+
- components/_message.scss
|
59
|
+
- functions/_clearfix.scss
|
60
|
+
- functions/_compass.scss
|
61
|
+
- functions/_ellipsis-overflow.scss
|
62
|
+
- functions/_fixed-position.scss
|
63
|
+
- functions/_float.scss
|
64
|
+
- functions/_font-face.scss
|
65
|
+
- functions/_img-retina.scss
|
66
|
+
- functions/_map.scss
|
67
|
+
- functions/_support.scss
|
68
|
+
- resets/_basic.scss
|
69
|
+
- resets/_button-and-input.scss
|
70
|
+
- resets/_html5-tag.scss
|
71
|
+
- resets/_small-label.scss
|
72
|
+
homepage: https://github.com/jsw0528/base.sass
|
73
|
+
licenses:
|
74
|
+
- MIT
|
75
|
+
metadata: {}
|
76
|
+
post_install_message:
|
77
|
+
rdoc_options: []
|
78
|
+
require_paths:
|
79
|
+
- "."
|
80
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
81
|
+
requirements:
|
82
|
+
- - ">="
|
83
|
+
- !ruby/object:Gem::Version
|
84
|
+
version: '0'
|
85
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
86
|
+
requirements:
|
87
|
+
- - ">="
|
88
|
+
- !ruby/object:Gem::Version
|
89
|
+
version: '0'
|
90
|
+
requirements: []
|
91
|
+
rubyforge_project:
|
92
|
+
rubygems_version: 2.2.0
|
93
|
+
signing_key:
|
94
|
+
specification_version: 4
|
95
|
+
summary: The beginning of your stylesheets
|
96
|
+
test_files: []
|