Skip to content

Commit 6baafc3

Browse files
trusktrtrusktr
committed
v0.2.3
1 parent aeaf5de commit 6baafc3

14 files changed

+267
-1
lines changed

‎dist/clickables.css

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/** Anything that is clickable should have a pointer cursor. */
2+
3+
input[type='checkbox' i],
4+
input[type='radio' i],
5+
input[type='color' i],
6+
input[type='submit' i],
7+
input[type='button' i],
8+
button,
9+
input[type='date' i],
10+
input[type='time' i],
11+
input[type='datetime-local' i],
12+
input[type='month' i],
13+
input[type='week' i],
14+
input::-webkit-calendar-picker-indicator,
15+
input::-webkit-file-upload-button,
16+
input[type='range' i],
17+
input[type='reset' i],
18+
input[type='file' i],
19+
summary {
20+
cursor: pointer;
21+
}

‎dist/elements/body.css

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
body {
2+
font-family: sans-serif;
3+
color: #626e84;
4+
}

‎dist/elements/button.css

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
@import '../shared/colors.css';
2+
3+
input[type='button' i],
4+
input[type='reset' i],
5+
input[type='submit' i],
6+
input::-webkit-file-upload-button,
7+
input[type='color' i],
8+
button {
9+
--button-background-color: var(--cornflowerblue);
10+
--button-background-color-hover: var(--cornflowerblue-lighter);
11+
--button-background-color-focus: var(--button-background-color-hover);
12+
--button-background-color-active: var(--cornflowerblue-darker);
13+
--button-border-radius: 4px;
14+
--button-font-color: var(--inside-font-color);
15+
}
16+
17+
input[type='button' i],
18+
input[type='reset' i],
19+
input[type='submit' i],
20+
input::-webkit-file-upload-button,
21+
input[type='color' i],
22+
button {
23+
background-color: rgba(var(--button-background-color), 1);
24+
height: 40px;
25+
font-size: 16px;
26+
border: none;
27+
border-radius: var(--button-border-radius);
28+
color: var(--button-font-color);
29+
padding: 4px 24px;
30+
text-decoration: none;
31+
margin: 4px 2px; /*TODO perhaps move this out to somewhere for all inputs or other elements. */
32+
transition: background-color 100ms;
33+
}
34+
35+
input[type='button' i]:hover,
36+
input[type='reset' i]:hover,
37+
input[type='submit' i]:hover,
38+
input::-webkit-file-upload-button:hover,
39+
input[type='color' i]:hover,
40+
button:hover {
41+
background-color: rgba(var(--button-background-color-hover), 1);
42+
}
43+
44+
input[type='button' i]:focus,
45+
input[type='reset' i]:focus,
46+
input[type='submit' i]:focus,
47+
input::-webkit-file-upload-button:focus,
48+
input[type='color' i]:focus,
49+
button:focus {
50+
outline: none;
51+
background-color: rgba(var(--button-background-color-focus), 1);
52+
}
53+
54+
input[type='button' i]:active,
55+
input[type='reset' i]:active,
56+
input[type='submit' i]:active,
57+
input::-webkit-file-upload-button:active,
58+
input[type='color' i]:active,
59+
button:active {
60+
background-color: rgba(var(--button-background-color-active), 1);
61+
}

‎dist/elements/index.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@import './body.css';
2+
@import './button.css';
3+
@import './input/index.css';

‎dist/elements/input/index.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@import './input-color.css';
2+
@import './input-radio.css';
3+
@import './input-checkbox.css';

‎dist/elements/input/input-checkbox.css

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/* Checkboxes and radios share much of the same code. */
2+
@import './input.shared.css';
3+
4+
input[type='checkbox' i] {
5+
/* Checkboxes are boxes with rounded corners. */
6+
--checkable-border-radius: 15%;
7+
}
8+
9+
input[type='checkbox' i]:before {
10+
--checkable-transform--: translate(-50%, -62%) rotate(45deg);
11+
border-top: none;
12+
border-left: none;
13+
border-radius: 0;
14+
background: none;
15+
height: calc(var(--checkable-mark-scale) * 55%);
16+
width: calc(var(--checkable-mark-scale) * 28%);
17+
}

‎dist/elements/input/input-color.css

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@import './input.shared.css';
2+
3+
input[type='color' i] {
4+
width: auto;
5+
padding: 4px 8px;
6+
}
7+
8+
input[type='color' i]::-webkit-color-swatch-wrapper {
9+
min-width: 40px;
10+
}

‎dist/elements/input/input-radio.css

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/* Checkboxes and radios share much of the same code. */
2+
@import './input.shared.css';
3+
4+
/* The extra "[type]" is needed here to force this to be more specific than the rule imported from input.shared.css. :\ */
5+
input[type='radio' i] {
6+
/* Radios are circles. */
7+
--checkable-border-radius: 100%;
8+
}
9+
10+
input[type='radio' i]:before {
11+
--checkable-transform--: translate(-50%, -50%);
12+
border-top: calc(var(--checkable-mark-scale) * var(--checkable-mark-stroke-width)) solid
13+
rgba(var(--checkable-mark-color), 1);
14+
border-left: calc(var(--checkable-mark-scale) * var(--checkable-mark-stroke-width)) solid
15+
rgba(var(--checkable-mark-color), 1);
16+
border-radius: 100%;
17+
background: rgba(var(--checkable-mark-color), 1);
18+
height: calc(var(--checkable-mark-scale) * 40%);
19+
width: calc(var(--checkable-mark-scale) * 40%);
20+
}

‎dist/elements/input/input.shared.css

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
@import '../../shared/colors.css';
2+
3+
/* Various inputs use styling from button. */
4+
@import '../button.css';
5+
6+
/*
7+
* These are default values and styles for checkbox and radio inputs, which
8+
* have much of the same implementation, with some variation. These values are
9+
* default for checkbox, and radio modifies values.
10+
*
11+
* The input-checkbox.css and input-radio.css files contain only the small
12+
* differences.
13+
*/
14+
15+
input[type='checkbox' i],
16+
input[type='radio' i] {
17+
--checkable-size: 14px;
18+
19+
/** The value has to be an RGB number triplet, f.e. `--checkable-color: 20, 30, 40;`. */
20+
--checkable-color: var(--cornflowerblue);
21+
22+
/** The value has to be an RGB number triplet, f.e. `--checkable-mark-color: 20, 30, 40;`. */
23+
--checkable-mark-color: var(--checkable-color);
24+
--checkable-mark-scale: 1;
25+
--checkable-mark-stroke-width: calc(0.1275 * var(--checkable-size));
26+
27+
/** The value has to be an RGB number triplet, f.e. `--checkable-border-color: 20, 30, 40;`. */
28+
--checkable-border-color: var(--checkable-color);
29+
--checkable-border-width: calc(0.08 * var(--checkable-size));
30+
--checkable-border-radius: 100%;
31+
32+
/** The value has to be an RGB number triplet, f.e. `--checkable-background-color: 20, 30, 40;`. */
33+
--checkable-background-color: var(--checkable-color);
34+
--checkable-background-opacity: 0.15;
35+
}
36+
37+
input[type='checkbox' i],
38+
input[type='radio' i] {
39+
-moz-appearance: none;
40+
-webkit-appearance: none;
41+
appearance: none;
42+
43+
font-size: unset;
44+
box-sizing: border-box;
45+
position: relative;
46+
width: var(--checkable-size);
47+
height: var(--checkable-size);
48+
margin: 3px 4px 0px 3px;
49+
}
50+
51+
input[type='checkbox' i][disabled],
52+
input[type='radio' i][disabled] {
53+
opacity: 0.5;
54+
}
55+
56+
input[type='checkbox' i]:focus,
57+
input[type='radio' i]:focus {
58+
outline: none;
59+
outline-offset: 0;
60+
}
61+
62+
input[type='checkbox' i]:before,
63+
input[type='radio' i]:before {
64+
/* vars ending with -- are "private", not intended for end users. */
65+
--checkable-transform--: translate(-50%, -50%);
66+
content: '';
67+
display: block;
68+
position: absolute;
69+
top: 50%;
70+
left: 50%;
71+
transition: 0.1s all;
72+
transform: var(--checkable-transform--) scale(0);
73+
border-bottom: calc(var(--checkable-mark-scale) * var(--checkable-mark-stroke-width)) solid
74+
rgba(var(--checkable-mark-color), 1);
75+
border-right: calc(var(--checkable-mark-scale) * var(--checkable-mark-stroke-width)) solid
76+
rgba(var(--checkable-mark-color), 1);
77+
}
78+
79+
input[type='checkbox' i]:checked:before,
80+
input[type='radio' i]:checked:before {
81+
transform: var(--checkable-transform--) scale(1);
82+
}
83+
84+
input[type='checkbox' i]:after,
85+
input[type='radio' i]:after {
86+
content: '';
87+
box-sizing: content-box;
88+
position: absolute;
89+
top: 50%;
90+
left: 50%;
91+
transform: translate(-50%, -50%);
92+
z-index: -1;
93+
width: calc(100% - var(--checkable-border-width));
94+
height: calc(100% - var(--checkable-border-width));
95+
background: rgba(var(--checkable-background-color), var(--checkable-background-opacity));
96+
border: 0 solid rgba(var(--checkable-border-color), 1);
97+
border-width: var(--checkable-border-width);
98+
border-radius: var(--checkable-border-radius);
99+
}
100+
101+
input[type='checkbox' i]:focus:after,
102+
input[type='checkbox' i]:not([disabled]):hover:after,
103+
input[type='radio' i]:focus:after,
104+
input[type='radio' i]:not([disabled]):hover:after {
105+
border-width: calc(1.5 * var(--checkable-border-width));
106+
}

‎dist/elements/label.css

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
label {
2+
user-select: none;
3+
cursor: pointer;
4+
}

‎dist/extra/utils.css

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
[inline] {
2+
display: inline;
3+
}
4+
5+
[inline-block] {
6+
display: inline-block;
7+
}

‎dist/index.css

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import './clickables.css';
2+
@import './elements/index.css';

‎dist/shared/colors.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
:root {
2+
--cornflowerblue: 100, 149, 237;
3+
--cornflowerblue-lighter: 114, 159, 243;
4+
--cornflowerblue-darker: 67, 128, 241;
5+
6+
/* Color of text inside things like buttons which have a darker background by default. */
7+
--inside-font-color: white;
8+
}

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@lume/basicss",
3-
"version": "0.2.2",
3+
"version": "0.2.3",
44
"description": "Better default CSS styling for the browser's builtin elements.",
55
"license": "MIT",
66
"homepage": "http://github.com/lume/basicss#readme",

0 commit comments

Comments
 (0)