mirror of
https://github.com/kognise/water.css.git
synced 2025-08-14 09:04:45 +02:00
Merge branch 'master' into contributing-doc
This commit is contained in:
Justinas Pošiūnas
GitHub
3
.gitignore
vendored
3
.gitignore
vendored
@@ -85,3 +85,6 @@ typings/
|
||||
|
||||
# IntelliJ IDE
|
||||
.idea/
|
||||
|
||||
# Output of yarn build
|
||||
dist/
|
||||
12
dist/dark-legacy.css
vendored
12
dist/dark-legacy.css
vendored
@@ -1,12 +0,0 @@
|
||||
|
||||
|
||||
@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css');
|
||||
@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css') (prefers-color-scheme: light);
|
||||
/**
|
||||
* Dark-themed version for legacy browsers:
|
||||
* Loads the compiled, standalone version of the dark theme,
|
||||
* but overrides it with the compiled, standalone version of the light theme
|
||||
* if a system-wide theme preference is set on the user's device.
|
||||
*/
|
||||
|
||||
/*# sourceMappingURL=dark-legacy.css.map */
|
||||
1
dist/dark-legacy.css.map
vendored
1
dist/dark-legacy.css.map
vendored
@@ -1 +0,0 @@
|
||||
{"version":3,"sources":["dark-legacy.css"],"names":[],"mappings":";;AAOA,uGAAuG;AACvG,sIAC6B;AAT7B;;;;;EAKE","file":"dark-legacy.css","sourcesContent":["/**\n * Dark-themed version for legacy browsers:\n * Loads the compiled, standalone version of the dark theme,\n * but overrides it with the compiled, standalone version of the light theme\n * if a system-wide theme preference is set on the user's device.\n */\n\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css');\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css')\n(prefers-color-scheme: light);\n"]}
|
||||
2
dist/dark-legacy.min.css
vendored
2
dist/dark-legacy.min.css
vendored
@@ -1,2 +0,0 @@
|
||||
@import url("https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css");@import url("https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css") (prefers-color-scheme: light);
|
||||
/*# sourceMappingURL=dark-legacy.min.css.map */
|
||||
1
dist/dark-legacy.min.css.map
vendored
1
dist/dark-legacy.min.css.map
vendored
@@ -1 +0,0 @@
|
||||
{"version":3,"sources":["dark-legacy.css"],"names":[],"mappings":"AAOA,uGAAuG,CACvG,sIAHE","file":"dark-legacy.min.css","sourcesContent":["/**\n * Dark-themed version for legacy browsers:\n * Loads the compiled, standalone version of the dark theme,\n * but overrides it with the compiled, standalone version of the light theme\n * if a system-wide theme preference is set on the user's device.\n */\n\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css');\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css')\n(prefers-color-scheme: light);\n"]}
|
||||
600
dist/dark-legacy.standalone.css
vendored
600
dist/dark-legacy.standalone.css
vendored
@@ -1,600 +0,0 @@
|
||||
/**
|
||||
* Standalone dark-themed version for legacy browsers.
|
||||
* Includes dark variables and core, compiled at build time so the final output
|
||||
* will only include regular CSS, no variables.
|
||||
*/
|
||||
|
||||
body {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
line-height: 1.4;
|
||||
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
padding: 0 10px;
|
||||
|
||||
color: #dbdbdb;
|
||||
background: #202b38;
|
||||
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
button {
|
||||
transition: background-color 0.1s linear,
|
||||
border-color 0.1s linear,
|
||||
color 0.1s linear,
|
||||
box-shadow 0.1s linear,
|
||||
transform 0.1s ease;
|
||||
}
|
||||
|
||||
input {
|
||||
transition: background-color 0.1s linear,
|
||||
border-color 0.1s linear,
|
||||
color 0.1s linear,
|
||||
box-shadow 0.1s linear,
|
||||
transform 0.1s ease;
|
||||
}
|
||||
|
||||
textarea {
|
||||
transition: background-color 0.1s linear,
|
||||
border-color 0.1s linear,
|
||||
color 0.1s linear,
|
||||
box-shadow 0.1s linear,
|
||||
transform 0.1s ease;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.2em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
h5 {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
b,
|
||||
strong,
|
||||
th {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
q:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
q:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
blockquote{
|
||||
border-left: 4px solid #0096bfab;
|
||||
margin: 1.5em 0em;
|
||||
padding: 0.5em 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
q{
|
||||
border-left: 4px solid #0096bfab;
|
||||
margin: 1.5em 0em;
|
||||
padding: 0.5em 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
blockquote > footer {
|
||||
margin-top: 10px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
blockquote cite {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
address {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
a[href^='mailto']::before {
|
||||
content: '📧 ';
|
||||
}
|
||||
|
||||
a[href^='tel']::before {
|
||||
content: '📞 ';
|
||||
}
|
||||
|
||||
a[href^='sms']::before {
|
||||
content: '💬 ';
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: #efdb43;
|
||||
border-radius: 2px;
|
||||
padding: 0px 2px 0px 2px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
button, select,
|
||||
input[type='submit'],
|
||||
input[type='button'],
|
||||
input[type='checkbox'],
|
||||
input[type='range'],
|
||||
input[type='radio'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input:not([type='checkbox']):not([type='radio']),
|
||||
select {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input {
|
||||
color: #ffffff;
|
||||
background-color: #161f27;
|
||||
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
|
||||
margin-right: 6px;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px;
|
||||
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button {
|
||||
color: #ffffff;
|
||||
background-color: #161f27;
|
||||
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
|
||||
margin-right: 6px;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px;
|
||||
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
color: #ffffff;
|
||||
background-color: #161f27;
|
||||
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
|
||||
margin-right: 6px;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px;
|
||||
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
select {
|
||||
color: #ffffff;
|
||||
background-color: #161f27;
|
||||
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
|
||||
margin-right: 6px;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px;
|
||||
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
button,
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
select {
|
||||
background: #161f27 url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E") calc(100% - 12px) 50% / 12px no-repeat;
|
||||
padding-right: 35px;
|
||||
}
|
||||
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='submit'],
|
||||
input[type='button'] {
|
||||
padding-right: 30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #324759;
|
||||
}
|
||||
|
||||
input[type='submit']:hover {
|
||||
background: #324759;
|
||||
}
|
||||
|
||||
input[type='button']:hover {
|
||||
background: #324759;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
box-shadow: 0 0 0 2px #0096bfab;
|
||||
}
|
||||
|
||||
select:focus {
|
||||
box-shadow: 0 0 0 2px #0096bfab;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
box-shadow: 0 0 0 2px #0096bfab;
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
box-shadow: 0 0 0 2px #0096bfab;
|
||||
}
|
||||
|
||||
input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked {
|
||||
background: #324759;
|
||||
}
|
||||
|
||||
input[type='radio']:checked {
|
||||
background: #324759;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked::before,
|
||||
input[type='radio']:checked::before {
|
||||
content: '•';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked::before {
|
||||
content: '✔';
|
||||
transform: translateY(-50%) translateY(0.5px) translateX(-6px);
|
||||
}
|
||||
|
||||
input[type='checkbox']:active,
|
||||
input[type='radio']:active,
|
||||
input[type='submit']:active,
|
||||
input[type='button']:active,
|
||||
input[type='range']:active,
|
||||
button:active {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
input:disabled,
|
||||
select:disabled,
|
||||
button:disabled,
|
||||
textarea:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: #a9a9a9;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: #a9a9a9;
|
||||
}
|
||||
|
||||
::-ms-input-placeholder {
|
||||
color: #a9a9a9;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: #a9a9a9;
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
margin: 10px 0;
|
||||
padding: 10px 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
input[type='range']:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
transition: 0.2s;
|
||||
background: #161f27;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-thumb {
|
||||
box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: #dbdbdb;
|
||||
-webkit-appearance: none;
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
input[type='range']:focus::-webkit-slider-runnable-track {
|
||||
background: #161f27;
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
transition: 0.2s;
|
||||
background: #161f27;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-thumb {
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: #dbdbdb;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
border-width: 16px 0;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-fill-lower {
|
||||
background: #161f27;
|
||||
border: 0.2px solid #010101;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-fill-upper {
|
||||
background: #161f27;
|
||||
border: 0.2px solid #010101;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-thumb {
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
border: 1px solid #000000;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: #dbdbdb;
|
||||
}
|
||||
|
||||
input[type='range']:focus::-ms-fill-lower {
|
||||
background: #161f27;
|
||||
}
|
||||
|
||||
input[type='range']:focus::-ms-fill-upper {
|
||||
background: #161f27;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #41adff;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
code {
|
||||
background: #161f27;
|
||||
color: #ffbe85;
|
||||
padding: 2.5px 5px;
|
||||
border-radius: 6px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
samp {
|
||||
background: #161f27;
|
||||
color: #ffbe85;
|
||||
padding: 2.5px 5px;
|
||||
border-radius: 6px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
time {
|
||||
background: #161f27;
|
||||
color: #ffbe85;
|
||||
padding: 2.5px 5px;
|
||||
border-radius: 6px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
padding: 10px;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
var {
|
||||
color: #d941e2;
|
||||
font-style: normal;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
kbd {
|
||||
background: #161f27;
|
||||
border: 1px solid #dbdbdb;
|
||||
border-radius: 2px;
|
||||
color: #dbdbdb;
|
||||
padding: 2px 4px 2px 4px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid #dbdbdb;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 6px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
thead {
|
||||
border-bottom: 1px solid #dbdbdb;
|
||||
}
|
||||
|
||||
tfoot {
|
||||
border-top: 1px solid #dbdbdb;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: #1a242f;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #161f27;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #324759;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(65, 92, 115);
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background-color: #161f27;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: #161f27;
|
||||
}
|
||||
|
||||
details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
background-color: #1a242f;
|
||||
padding: 10px 10px 0;
|
||||
margin: 1em 0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
details[open] {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
details > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
details[open] summary {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
background-color: #161f27;
|
||||
padding: 10px;
|
||||
margin: -10px -10px 0;
|
||||
}
|
||||
|
||||
details > :not(summary) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
summary::-webkit-details-marker {
|
||||
color: #dbdbdb;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=dark-legacy.standalone.css.map */
|
||||
1
dist/dark-legacy.standalone.css.map
vendored
1
dist/dark-legacy.standalone.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/dark-legacy.standalone.min.css
vendored
2
dist/dark-legacy.standalone.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/dark-legacy.standalone.min.css.map
vendored
2
dist/dark-legacy.standalone.min.css.map
vendored
File diff suppressed because one or more lines are too long
19
dist/dark.css
vendored
19
dist/dark.css
vendored
@@ -230,6 +230,12 @@ select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
select[multiple] {
|
||||
padding-right: 10px;
|
||||
background-image: none;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='submit'],
|
||||
input[type='button'] {
|
||||
@@ -318,6 +324,19 @@ textarea:disabled {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px var(--focus) solid;
|
||||
border-radius: 6px;
|
||||
margin: 0;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
legend {
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
margin: 10px 0;
|
||||
padding: 10px 0;
|
||||
|
||||
2
dist/dark.css.map
vendored
2
dist/dark.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/dark.min.css
vendored
2
dist/dark.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/dark.min.css.map
vendored
2
dist/dark.min.css.map
vendored
File diff suppressed because one or more lines are too long
19
dist/dark.standalone.css
vendored
19
dist/dark.standalone.css
vendored
@@ -195,6 +195,12 @@ select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
select[multiple] {
|
||||
padding-right: 10px;
|
||||
background-image: none;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='submit'],
|
||||
input[type='button'] {
|
||||
@@ -283,6 +289,19 @@ textarea:disabled {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px var(--focus) solid;
|
||||
border-radius: 6px;
|
||||
margin: 0;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
legend {
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
margin: 10px 0;
|
||||
padding: 10px 0;
|
||||
|
||||
2
dist/dark.standalone.css.map
vendored
2
dist/dark.standalone.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/dark.standalone.min.css
vendored
2
dist/dark.standalone.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/dark.standalone.min.css.map
vendored
2
dist/dark.standalone.min.css.map
vendored
File diff suppressed because one or more lines are too long
12
dist/light-legacy.css
vendored
12
dist/light-legacy.css
vendored
@@ -1,12 +0,0 @@
|
||||
|
||||
|
||||
@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css');
|
||||
@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css') (prefers-color-scheme: dark);
|
||||
/**
|
||||
* Light-themed version for legacy browsers:
|
||||
* Loads the compiled, standalone version of the light theme at runtime,
|
||||
* but overrides it with the compiled, standalone version of the dark theme
|
||||
* if a system-wide theme preference is set on the user's device.
|
||||
*/
|
||||
|
||||
/*# sourceMappingURL=light-legacy.css.map */
|
||||
1
dist/light-legacy.css.map
vendored
1
dist/light-legacy.css.map
vendored
@@ -1 +0,0 @@
|
||||
{"version":3,"sources":["light-legacy.css"],"names":[],"mappings":";;AAOA,wGAAwG;AACxG,oIAC4B;AAT5B;;;;;EAKE","file":"light-legacy.css","sourcesContent":["/**\n * Light-themed version for legacy browsers:\n * Loads the compiled, standalone version of the light theme at runtime,\n * but overrides it with the compiled, standalone version of the dark theme\n * if a system-wide theme preference is set on the user's device.\n */\n\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css');\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css')\n(prefers-color-scheme: dark);\n"]}
|
||||
2
dist/light-legacy.min.css
vendored
2
dist/light-legacy.min.css
vendored
@@ -1,2 +0,0 @@
|
||||
@import url("https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css");@import url("https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css") (prefers-color-scheme: dark);
|
||||
/*# sourceMappingURL=light-legacy.min.css.map */
|
||||
1
dist/light-legacy.min.css.map
vendored
1
dist/light-legacy.min.css.map
vendored
@@ -1 +0,0 @@
|
||||
{"version":3,"sources":["light-legacy.css"],"names":[],"mappings":"AAOA,wGAAwG,CACxG,oIAHE","file":"light-legacy.min.css","sourcesContent":["/**\n * Light-themed version for legacy browsers:\n * Loads the compiled, standalone version of the light theme at runtime,\n * but overrides it with the compiled, standalone version of the dark theme\n * if a system-wide theme preference is set on the user's device.\n */\n\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css');\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css')\n(prefers-color-scheme: dark);\n"]}
|
||||
19
dist/light-legacy.standalone.css
vendored
19
dist/light-legacy.standalone.css
vendored
@@ -251,6 +251,12 @@ select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
select[multiple] {
|
||||
padding-right: 10px;
|
||||
background-image: none;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='submit'],
|
||||
input[type='button'] {
|
||||
@@ -357,6 +363,19 @@ textarea:disabled {
|
||||
color: #949494;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px #0096bfab solid;
|
||||
border-radius: 6px;
|
||||
margin: 0;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
legend {
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
margin: 10px 0;
|
||||
padding: 10px 0;
|
||||
|
||||
2
dist/light-legacy.standalone.css.map
vendored
2
dist/light-legacy.standalone.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/light-legacy.standalone.min.css
vendored
2
dist/light-legacy.standalone.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/light-legacy.standalone.min.css.map
vendored
2
dist/light-legacy.standalone.min.css.map
vendored
File diff suppressed because one or more lines are too long
19
dist/light.css
vendored
19
dist/light.css
vendored
@@ -230,6 +230,12 @@ select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
select[multiple] {
|
||||
padding-right: 10px;
|
||||
background-image: none;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='submit'],
|
||||
input[type='button'] {
|
||||
@@ -318,6 +324,19 @@ textarea:disabled {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px var(--focus) solid;
|
||||
border-radius: 6px;
|
||||
margin: 0;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
legend {
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
margin: 10px 0;
|
||||
padding: 10px 0;
|
||||
|
||||
2
dist/light.css.map
vendored
2
dist/light.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/light.min.css
vendored
2
dist/light.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/light.min.css.map
vendored
2
dist/light.min.css.map
vendored
File diff suppressed because one or more lines are too long
19
dist/light.standalone.css
vendored
19
dist/light.standalone.css
vendored
@@ -195,6 +195,12 @@ select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
select[multiple] {
|
||||
padding-right: 10px;
|
||||
background-image: none;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='submit'],
|
||||
input[type='button'] {
|
||||
@@ -283,6 +289,19 @@ textarea:disabled {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px var(--focus) solid;
|
||||
border-radius: 6px;
|
||||
margin: 0;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
legend {
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
margin: 10px 0;
|
||||
padding: 10px 0;
|
||||
|
||||
2
dist/light.standalone.css.map
vendored
2
dist/light.standalone.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/light.standalone.min.css
vendored
2
dist/light.standalone.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/light.standalone.min.css.map
vendored
2
dist/light.standalone.min.css.map
vendored
File diff suppressed because one or more lines are too long
@@ -69,7 +69,9 @@ function style() {
|
||||
// Calculate size before autoprefixing
|
||||
.pipe(bytediff.start())
|
||||
// autoprefix
|
||||
.pipe(postcss([autoprefixer()]))
|
||||
.pipe(postcss([autoprefixer({
|
||||
env: "legacy"
|
||||
})]))
|
||||
// Write the amount gained by autoprefixing
|
||||
.pipe(bytediff.stop(data => formatByteMessage('autoprefixer', data)))
|
||||
.pipe(excludeModern.restore)
|
||||
@@ -79,8 +81,9 @@ function style() {
|
||||
// Calculate size before autoprefixing
|
||||
.pipe(bytediff.start())
|
||||
// autoprefix modern builds
|
||||
// TODO: Use separate browserslist to only apply prefixes needed in *modern* browsers
|
||||
.pipe(postcss([autoprefixer()]))
|
||||
.pipe(postcss([autoprefixer({
|
||||
env: "modern"
|
||||
})]))
|
||||
// Write the amount gained by autoprefixing
|
||||
.pipe(bytediff.stop(data => formatByteMessage('autoprefixer', data)))
|
||||
.pipe(excludeLegacy.restore)
|
||||
|
||||
45
index.html
45
index.html
@@ -100,13 +100,33 @@
|
||||
|
||||
<h3>Form elements</h3>
|
||||
<form>
|
||||
<label for='email'>Email</label>
|
||||
<input
|
||||
type='email'
|
||||
name='email'
|
||||
id='email'
|
||||
placeholder='john.doe@gmail.com'
|
||||
/>
|
||||
|
||||
<fieldset>
|
||||
<legend>Fieldset</legend>
|
||||
|
||||
<label for='email'>Email</label>
|
||||
<input
|
||||
type='email'
|
||||
name='email'
|
||||
id='email'
|
||||
placeholder='john.doe@gmail.com'
|
||||
/>
|
||||
|
||||
<label for='password'>Password</label>
|
||||
<input
|
||||
type='password'
|
||||
name='password'
|
||||
id='password'
|
||||
placeholder='password'
|
||||
/>
|
||||
|
||||
<p>
|
||||
<input type='checkbox' name='remember' id='remember' checked />
|
||||
<label for='remember'>Remember me</label>
|
||||
</p>
|
||||
|
||||
<input type='submit' />
|
||||
</fieldset>
|
||||
|
||||
<label for='id'>User id (read only)</label>
|
||||
<input readonly name='id' id='id' value='04D6H89Z' />
|
||||
@@ -133,11 +153,9 @@
|
||||
<option value='lemon'>Lemon juice</option>
|
||||
</select>
|
||||
|
||||
<br />
|
||||
|
||||
<label for='drinks'>Or select multiple favorite drinks</label>
|
||||
<p>Hold down the Ctrl (windows) /
|
||||
Command (Mac) button to select multiple options.</p>
|
||||
<br/>
|
||||
<small>Hold down the Ctrl (Windows) / Command (Mac) button to select multiple options. (P.S. this message is inside a <code><small></code> tag!</small>)
|
||||
<select name='drink' id='drinks' multiple>
|
||||
<option value='mojito'>Mojito</option>
|
||||
<option value='water'>Water</option>
|
||||
@@ -168,11 +186,6 @@
|
||||
<label for='volume'>Volume</label>
|
||||
<input type='range' id='start' name='volume' id='volume' min='0' max='11' />
|
||||
</div>
|
||||
|
||||
<input type='checkbox' name='remember' id='remember' checked />
|
||||
<label for='remember'>Remember me</label>
|
||||
|
||||
<input type='submit' />
|
||||
</form>
|
||||
|
||||
<h3>Code</h3>
|
||||
|
||||
24
package.json
24
package.json
@@ -5,7 +5,8 @@
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build": "gulp style",
|
||||
"dev": "gulp watch"
|
||||
"dev": "gulp watch",
|
||||
"prepublishOnly": "yarn build"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@@ -41,7 +42,24 @@
|
||||
"postcss-import": "^12.0.1",
|
||||
"postcss-inline-svg": "^3.1.1"
|
||||
},
|
||||
"browserslist": [
|
||||
"defaults AND not android 4.4.3"
|
||||
"browserslist": {
|
||||
"legacy": ["defaults AND not android 4.4.3"],
|
||||
"modern": [
|
||||
"Edge > 16",
|
||||
"Firefox > 31",
|
||||
"Chrome > 49",
|
||||
"Safari > 9.1",
|
||||
"Opera > 36",
|
||||
"ios_saf > 9.3",
|
||||
"Android > 76",
|
||||
"OperaMobile > 46",
|
||||
"ChromeAndroid > 76",
|
||||
"FirefoxAndroid > 68",
|
||||
"UCAndroid > 12.12",
|
||||
"Samsung > 5"
|
||||
]
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -54,6 +54,12 @@ select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
select[multiple] {
|
||||
padding-right: 10px;
|
||||
background-image: none;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='submit'],
|
||||
input[type='button'] {
|
||||
@@ -129,3 +135,16 @@ textarea:disabled {
|
||||
::placeholder {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px var(--focus) solid;
|
||||
border-radius: 6px;
|
||||
margin: 0;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
legend {
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
}
|
||||
Reference in New Issue
Block a user