Skip to content

Commit 5ead193

Browse files
yethonyethon
committed
Merge pull request #2 from firefly-ui/adds-foundation-styles
Adds Foundation styles
2 parents 3ca74cb + 78fdeb4 commit 5ead193

File tree

6 files changed

+696
-2
lines changed

6 files changed

+696
-2
lines changed

‎app/styles/firefly-ui/foundation/_checkbox.scss

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
$checkbox-line-height: 17px !default;
2+
$checkbox-input-type-height: 17px !default;
3+
$checkbox-input-type-width: 17px !default;
4+
$checkbox-border: solid 1px !default;
5+
$checkbox-border-radius: $global-radius !default;
6+
$checkbox-input-margin-top: 0 !default;
7+
$checkbox-input-margin-right: -1rem !default;
8+
$checkbox-input-margin-bottom: -1rem !default;
9+
$checkbox-input-margin-left: 0 !default;
10+
$checkbox-mark-height: $checkbox-input-type-height !default;
11+
$checkbox-mark-width: $checkbox-input-type-width !default;
12+
13+
$checkbox-unchecked-color: $white !default;
14+
$checkbox-unchecked-border-color: $medium-gray !default;
15+
$checkbox-unchecked-background-color: $white !default;
16+
17+
$checkbox-checked-color: $white !default;
18+
$checkbox-checked-border-color: $primary-color !default;
19+
$checkbox-checked-background-color: $primary-color !default;
20+
21+
$checkbox-indeterminate-color: $dark-gray !default;
22+
$checkbox-indeterminate-border-color: $medium-gray !default;
23+
$checkbox-indeterminate-background-color: $white !default;
24+
25+
$checkbox-disabled-color: $medium-gray !default;
26+
$checkbox-disabled-border-color: $medium-gray !default;
27+
$checkbox-disabled-background-color: $light-gray !default;
28+
29+
$checkbox-focus-border-color: rgba(0,0,0,0.3) !default;
30+
31+
.ff-checkbox {
32+
display: inline-block;
33+
position: relative;
34+
35+
line-height: $checkbox-line-height;
36+
37+
input[type="checkbox"] {
38+
height: $checkbox-input-type-height;
39+
width: $checkbox-input-type-width;
40+
41+
margin-top: $checkbox-input-margin-top;
42+
margin-right: $checkbox-input-margin-right;
43+
margin-bottom: $checkbox-input-margin-bottom;
44+
margin-left: $checkbox-input-margin-left;
45+
46+
position: absolute;
47+
overflow: hidden;
48+
padding: 0;
49+
border: 0;
50+
opacity: 0.001;
51+
z-index: 1;
52+
vertical-align: top;
53+
outline: none;
54+
55+
&:hover {
56+
cursor: pointer;
57+
}
58+
}
59+
60+
.ff-checkbox-mark {
61+
box-sizing: border-box;
62+
height: $checkbox-mark-height;
63+
width: $checkbox-mark-width;
64+
display: inline-block;
65+
vertical-align: top;
66+
border-radius: $checkbox-border-radius;
67+
border: $checkbox-border;
68+
69+
border-color: $checkbox-unchecked-border-color;
70+
background-color: $checkbox-unchecked-background-color;
71+
72+
&::after {
73+
content: '';
74+
display: block;
75+
position: absolute;
76+
}
77+
}
78+
79+
input[type="checkbox"] {
80+
&:checked {
81+
+ .ff-checkbox-mark {
82+
border-color: $checkbox-checked-border-color;
83+
background-color: $checkbox-checked-background-color;
84+
85+
&::after {
86+
top: 4px;
87+
left: 2.4px;
88+
height: 7px;
89+
width: 12px;
90+
91+
transform: rotate(-45deg) skew(0,1deg);
92+
93+
border-bottom: solid 2px;
94+
border-left: solid 2px;
95+
border-color: $checkbox-checked-color;
96+
97+
}
98+
}
99+
}
100+
101+
&:indeterminate {
102+
+ .ff-checkbox-mark {
103+
border-color: $checkbox-indeterminate-border-color;
104+
background-color: $checkbox-indeterminate-background-color;
105+
106+
&::after {
107+
top: 7.75px;
108+
left: 3px;
109+
width: 11px;
110+
111+
border-bottom: solid 1.5px;
112+
border-color: $checkbox-indeterminate-color;
113+
}
114+
}
115+
}
116+
117+
&:disabled {
118+
cursor: default;
119+
120+
+ .ff-checkbox-mark {
121+
border-color: $checkbox-disabled-border-color;
122+
background-color: $checkbox-disabled-background-color;
123+
124+
&::after {
125+
border-color: $checkbox-disabled-color;
126+
}
127+
}
128+
}
129+
130+
&:focus {
131+
+ .ff-checkbox-mark {
132+
border-color: $checkbox-focus-border-color;
133+
}
134+
}
135+
}
136+
}

‎bower.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"ember": "~2.5.0",
55
"ember-cli-shims": "0.1.1",
66
"ember-cli-test-loader": "0.2.2",
7-
"ember-qunit-notifications": "0.1.0"
7+
"ember-qunit-notifications": "0.1.0",
8+
"foundation-sites": "~6.1.0"
89
}
910
}

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "ff-checkbox",
33
"version": "1.0.0",
4-
"description": "Theme-able checkbox component for Ember 2.0! Supports Foundation and Bootstrap, part of Firefly UI",
4+
"description": "Theme-able checkbox component for Ember 2.0! Supports Foundation, part of Firefly UI",
55
"directories": {
66
"doc": "doc",
77
"test": "tests"
@@ -19,15 +19,18 @@
1919
"license": "MIT",
2020
"devDependencies": {
2121
"broccoli-asset-rev": "^2.4.2",
22+
"broccoli-clean-css": "1.1.0",
2223
"ember-ajax": "0.7.1",
2324
"ember-cli": "2.5.0",
2425
"ember-cli-app-version": "^1.0.0",
2526
"ember-cli-dependency-checker": "^1.2.0",
27+
"ember-cli-foundation-6-sass": "0.0.9",
2628
"ember-cli-htmlbars-inline-precompile": "^0.3.1",
2729
"ember-cli-inject-live-reload": "^1.4.0",
2830
"ember-cli-jshint": "^1.0.0",
2931
"ember-cli-qunit": "^1.4.0",
3032
"ember-cli-release": "0.2.8",
33+
"ember-cli-sass": "5.3.1",
3134
"ember-cli-sri": "^2.1.0",
3235
"ember-cli-uglify": "^1.2.0",
3336
"ember-data": "^2.5.0",

0 commit comments

Comments
 (0)