Skip to content

Commit aa09a4b

Browse files
author
Erik Isaksen
committed
[Test] Publishing test for atoms
1 parent 5d5adc2 commit aa09a4b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

71 files changed

+943
-240
lines changed

‎assets/fonts/icomoon.eot

2.78 KB
Binary file not shown.

‎assets/fonts/icomoon.woff

2.7 KB
Binary file not shown.

‎atomic/_particles.scss

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import "util";
12
@import "particles/props";
23
@import "particles/modifiers";
34
@import "particles/mixins";

‎atomic/_util.scss

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
@import "../props";
2+
3+
@mixin custom_property($prop, $val, $fallback: true) {
4+
// Modified from
5+
// http://codepen.io/jakealbaugh/post/css4-variables-with-fallbacks-using-sass
6+
$map__name: map-get($prop__map, $prop);
7+
$nest__name: null;
8+
$nest__map__name: null;
9+
$map: null;
10+
$var__fall: null;
11+
$var__output: null;
12+
13+
@if type-of($map__name) == list {
14+
$nest__name: nth($map__name, 1);
15+
$nest__map__name: nth($map__name, 2);
16+
}
17+
18+
@if $nest-name {
19+
$map: map-get($prop__map, $nest__name);
20+
$nest__map: map-get($map, $nest__map__name);
21+
$var__fall: map-get($nest__map, $val);
22+
$var-output: var(--#{$nest__name}-#{$nest__map__name}-#{$val});
23+
} @else {
24+
$map: map-get($prop__map, $map-name);
25+
$var-fall: map-get($map, $var);
26+
$var-output: var(--#{$map__name}-#{$val});
27+
}
28+
@if $fallback {
29+
#{$prop}: $val;
30+
}
31+
#{$prop}: $var__output;
32+
33+
}
34+
35+
@mixin apply-directive($name, $fallback: true){
36+
@if $name {
37+
@if $fallback {
38+
@extend %#{$name};
39+
}
40+
@apply #{--$name}
41+
}
42+
}
43+
44+
@mixin custom_properties($var__map){
45+
@each $prop__name, $prop__mapping in $prop__map {
46+
47+
@each $var, $val in $prop__mapping {
48+
@if type-of($val) == map {
49+
@each $var__n, $val__n in $val {
50+
#{--$prop__name}__#{$var}__#{$var__n}: $val__n;
51+
}
52+
} @else {
53+
#{--$prop__name}__#{$var}: $val;
54+
}
55+
}
56+
}
57+
}
58+
59+
@mixin divide_children($box-spacing) {
60+
61+
> *:after {
62+
content: "|";
63+
margin: 0 $box-spacing;
64+
}
65+
66+
> *:last-child:after {
67+
content: none;
68+
}
69+
70+
}

‎atomic/atoms.scss

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@import "atoms/directives";
2+
@import "atoms/custom_properties";
3+
@import "atoms/reset";
4+
@import "atoms/elements";

‎atomic/atoms/custom_properties.scss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import "../particles";
2+
3+
:root {
4+
@include custom_properties($prop__map);
5+
}

‎atomic/atoms/directives.scss

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@import "directives/font-face/primary";
2+
@import "directives/font-face/secondary";
3+
@import "directives/font-face/icon";
4+
@import "directives/keyframes";

‎atomic/atoms/directives/font-face/icon.scss

Whitespace-only changes.

‎atomic/atoms/directives/font-face/primary.scss

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@import "particles/mixins/type";
2+
@import "particles/props/type";
3+
4+
$font_faces: map-get($type, map-get(font, primary));
5+
6+
@each $font in $font_faces {
7+
8+
@font-face {
9+
font-family: '#{$font}';
10+
@include type-src($font);
11+
font-weight: normal;
12+
font-style: normal;
13+
}
14+
15+
}

‎atomic/atoms/directives/font-face/secondary.scss

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@import "particles/mixins/type";
2+
@import "particles/props/type";
3+
4+
$font_faces: map-get($type, map-get(font, secondary));
5+
6+
@each $font in $font_faces {
7+
8+
@font-face {
9+
font-family: '#{$font}';
10+
@include type-src($font);
11+
font-weight: normal;
12+
font-style: normal;
13+
}
14+
15+
}

‎atomic/atoms/directives/keyframes.scss

Whitespace-only changes.

‎atomic/atoms/elements.scss

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@import "elements/body";
2+
@import "elements/lists";
3+
@import "elements/anchor";
4+
@import "elements/em";
5+
@import "elements/headlines";
6+
@import "elements/hr";
7+
@import "elements/inputs";
8+
@import "elements/lists";
9+
@import "elements/media";
10+
@import "elements/small";
11+
@import "elements/strong";
12+
@import "elements/table";
13+
@import "elements/template";

‎atomic/atoms/elements/anchor.scss

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@import "../../particles/props/color";
2+
3+
a,
4+
[role=link] {
5+
6+
background-color: $color-white--alpha;
7+
-webkit-text-decoration-skip: objects;
8+
text-decoration: none;
9+
font-size: inherit;
10+
11+
&:active,
12+
&:hover {
13+
outline-width: 0;
14+
text-decoration: underline;
15+
}
16+
}

‎atomic/atoms/elements/body.scss

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
2+
@import "../../particles/mixins/type";
3+
@import "../../particles/props/color";
4+
@import "../config";
5+
6+
body {
7+
margin: 0;
8+
padding: 0;
9+
color: map-get($color, gray--dark);
10+
@include type-baseline(map-get($type, map-get(font, body)));
11+
}

‎atomic/atoms/elements/headlines.scss

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
@import "../../particles/props/type";
2+
@import "../../particles/props/color";
3+
4+
h1, h2, h3, h4, h5, h6 {
5+
font-weight: map-get($type, weight--heavy);
6+
color: map-get($color, gray--darker);
7+
}
8+
9+
// h1 {
10+
// font-size: $type-size--h1;
11+
// }
12+
//
13+
// h2 {
14+
// font-size: $type-size--h2;
15+
// }
16+
//
17+
// h3 {
18+
// font-size: $type-size--h3;
19+
// }
20+
//
21+
// h4 {
22+
// font-size: $type-size--h4;
23+
// }
24+
//
25+
// h5 {
26+
// font-size: $type-size--h5;
27+
// }
28+
//
29+
// h6 {
30+
// font-size: $type-size--h6;
31+
// }

‎atomic/atoms/elements/hr.scss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
hr {
2+
box-sizing: content-box;
3+
height: 0;
4+
overflow: visible;
5+
}

‎atomic/atoms/elements/inputs.scss

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@import "inputs/button";
2+
@import "inputs/checkbox";
3+
@import "inputs/fieldset";
4+
@import "inputs/file";
5+
@import "inputs/label";
6+
@import "inputs/legend";
7+
@import "inputs/number";
8+
@import "inputs/optgroup";
9+
@import "inputs/radio";
10+
@import "inputs/search";
11+
@import "inputs/textarea";

‎atomic/atoms/elements/inputs/button.scss

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@import '../../particles/mixins/box';
2+
@import '../../particles/props/type';
3+
@import '../../particles/props/color';
4+
5+
button,
6+
[role=button],
7+
html [type="button"],
8+
[type="reset"],
9+
[type="submit"] {
10+
-webkit-appearance: button;
11+
appearance: button;
12+
cursor: pointer;
13+
display: block;
14+
width: 100%;
15+
font-size: map-get($type, size--baseline);
16+
line-height: map-get($type, map-get(leading, icon));
17+
margin: 0;
18+
@include box__border__radius;
19+
padding: map-get($box-spacing, spacing--wide);
20+
text-align: center;
21+
22+
@include form__button;
23+
@include form__button--disabled;
24+
25+
&::-moz-focus-inner,
26+
[type="button"]::-moz-focus-inner,
27+
[type="reset"]::-moz-focus-inner,
28+
[type="submit"]::-moz-focus-inner {
29+
border-style: none;
30+
padding: 0;
31+
}
32+
33+
&:-moz-focusring,
34+
[type="button"]:-moz-focusring,
35+
[type="reset"]:-moz-focusring,
36+
[type="submit"]:-moz-focusring {
37+
outline: 1px dotted ButtonText;
38+
}
39+
}

‎atomic/atoms/elements/inputs/checkbox.scss

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@import "../../particles/props/color";
2+
@import "../../particles/props/box";
3+
@import "../../particles/mixins/box";
4+
@import "../../particles/props/icon";
5+
6+
input[type=checkbox],
7+
[role=checkbox] {
8+
9+
padding: 0;
10+
margin: map-get($box, space--thinner);
11+
text-align: center;
12+
@include box__border;
13+
14+
&:checked {map-get(
15+
content: map-get($)icon, input--checkbox);
16+
color: map-get($color, action--success);
17+
}
18+
19+
}

‎atomic/atoms/elements/inputs/fieldset.scss

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@import "../../particles/props/box";
2+
@import "../../particles/mixins/box";
3+
4+
fieldset {
5+
@include box__border;
6+
margin: 0 map-get($box, spacing--thinner);
7+
padding: 0.35em 0.625em 0.75em;
8+
}

‎atomic/atoms/elements/inputs/file.scss

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
input[type=file] {
2+
3+
::-webkit-file-upload-button {
4+
-webkit-appearance: button;
5+
font: inherit;
6+
}
7+
8+
}

‎atomic/atoms/elements/inputs/label.scss

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@import "../../particles/props/type";
2+
@import "../../particles/props/box";
3+
4+
label {
5+
display: inline-block;
6+
font-size: map-get($type, size--baseline);
7+
margin-right: map-get($box, space);
8+
}

‎atomic/atoms/elements/inputs/legend.scss

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
legend {
2+
box-sizing: border-box;
3+
color: inherit;
4+
display: table;
5+
max-width: 100%;
6+
padding: 0;
7+
white-space: normal;
8+
}

‎atomic/atoms/elements/inputs/number.scss

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
input[type="number"] {
2+
3+
&::-webkit-inner-spin-button,
4+
&::-webkit-outer-spin-button {
5+
height: auto;
6+
}
7+
8+
}

‎atomic/atoms/elements/inputs/optgroup.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
optgroup {
2+
font-weight: bold;
3+
}

‎atomic/atoms/elements/inputs/radio.scss

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
input[type=radio],
2+
[role=radio] {
3+
4+
border-radius: 50%;
5+
cursor: pointer;
6+
display: flex;
7+
min-width: 1.5em;
8+
min-height: 1.5em;
9+
margin: 0 1em 0 0;
10+
justify-content: center;
11+
align-items: center;
12+
13+
&:checked::after {
14+
display: block;
15+
background-color: #3777bc;
16+
border-radius: 50%;
17+
content: "";
18+
position: relative;
19+
left: .025em;
20+
min-width: .75em;
21+
min-height: .75em;
22+
}
23+
24+
}

‎atomic/atoms/elements/inputs/search.scss

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
input[type=search],
2+
[role=search] {
3+
4+
-webkit-appearance: textfield;
5+
outline-offset: -2px;
6+
7+
&::-webkit-search-cancel-button,
8+
&::-webkit-search-decoration {
9+
-webkit-appearance: none;
10+
}
11+
12+
}

‎atomic/atoms/elements/inputs/textarea.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
textarea {
2+
overflow: auto;
3+
}

‎atomic/atoms/elements/lists.scss

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import "lists/unordered";
2+
@import "lists/listitems";

‎atomic/atoms/elements/lists/listitems.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
li {
2+
list-style: none;
3+
}

‎atomic/atoms/elements/lists/unordered.scss

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
ul {
2+
list-style: none;
3+
width: 100%;
4+
}

‎atomic/atoms/elements/media.scss

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@import "media/audio";
2+
@import "media/svg";
3+
@import "media/image";
4+
@import "media/picture";

‎atomic/atoms/elements/media/audio.scss

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
audio {
2+
&:not([controls]) {
3+
display: none;
4+
height: 0;
5+
}
6+
}

0 commit comments

Comments
 (0)