mirror_css/css-water.css
1
0
Fork 0
mirror of https://github.com/kognise/water.css.git synced 2025-08-14 00:54:08 +02:00
Code Issues Releases Wiki Activity

Improve formatting

Browse Source
This commit is contained in:
Kognise
2019-08-26 13:13:31 -04:00
parent 115037438c
commit af3ad9cdc0
3 changed files with 89 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/parts/_core.css
View File

@@ -1,6 +1,7 @@
@import '_base.css'; @import '_base.css';
@import '_typography.css'; @import '_typography.css';
@import '_forms.css'; @import '_forms.css';
@import '_range.css';
@import '_links.css'; @import '_links.css';
@import '_code.css'; @import '_code.css';
@import '_misc.css'; @import '_misc.css';

79
src/parts/_forms.css
View File

@@ -30,6 +30,7 @@ textarea {
} }
input:not([type='checkbox']):not([type='radio']), input:not([type='checkbox']):not([type='radio']),
input[type='range'],
select, select,
button, button,
textarea { textarea {
@@ -83,81 +84,3 @@ textarea:disabled {
::placeholder { ::placeholder {
color: var(--form-placeholder); color: var(--form-placeholder);
} }
input[type='range'] {
-webkit-appearance: none;
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: var(--background);
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: var(--border);
-webkit-appearance: none;
margin-top: -7px;
}
input[type='range']:focus::-webkit-slider-runnable-track {
background: var(--background);
}
input[type='range']::-moz-range-track {
width: 100%;
height: 9.5px;
transition: 0.2s;
background: var(--background);
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: var(--border);
}
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: var(--background);
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: var(--background);
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: var(--border);
}
input[type='range']:focus::-ms-fill-lower {
background: var(--background);
}
input[type='range']:focus::-ms-fill-upper {
background: var(--background);
}

87
src/parts/_range.css Normal file
View File

@@ -0,0 +1,87 @@
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: var(--background);
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: var(--border);
-webkit-appearance: none;
margin-top: -7px;
}
input[type='range']:focus::-webkit-slider-runnable-track {
background: var(--background);
}
input[type='range']::-moz-range-track {
width: 100%;
height: 9.5px;
transition: 0.2s;
background: var(--background);
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: var(--border);
}
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: var(--background);
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: var(--background);
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: var(--border);
}
input[type='range']:focus::-ms-fill-lower {
background: var(--background);
}
input[type='range']:focus::-ms-fill-upper {
background: var(--background);
}