BurnyLlama/nebulosa-css
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

All form elements implemented.

Browse Source
This commit is contained in:
BurnyLlama 2023-08-01 18:24:54 +02:00
parent 9f9a6a1ba6
commit 37b8659eb2
3 changed files with 113 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/_palette.scss
View File

@ -160,29 +160,29 @@ $surface: $grey100;
$standout: $grey50;
$text: $grey800;
$primary50: $sea50;
$primary100: $sea100;
$primary200: $sea200;
$primary300: $sea300;
$primary400: $sea400;
$primary500: $sea500;
$primary600: $sea600;
$primary700: $sea700;
$primary800: $sea800;
$primary900: $sea900;
$primary: $sea;
$primary50: $blue50;
$primary100: $blue100;
$primary200: $blue200;
$primary300: $blue300;
$primary400: $blue400;
$primary500: $blue500;
$primary600: $blue600;
$primary700: $blue700;
$primary800: $blue800;
$primary900: $blue900;
$primary: $blue;
$accent50: $purple50;
$accent100: $purple100;
$accent200: $purple200;
$accent300: $purple300;
$accent400: $purple400;
$accent500: $purple500;
$accent600: $purple600;
$accent700: $purple700;
$accent800: $purple800;
$accent900: $purple900;
$accent: $purple;
$accent50: $yellow50;
$accent100: $yellow100;
$accent200: $yellow200;
$accent300: $yellow300;
$accent400: $yellow400;
$accent500: $yellow500;
$accent600: $yellow600;
$accent700: $yellow700;
$accent800: $yellow800;
$accent900: $yellow900;
$accent: $yellow;
$success: $sea;
$danger: $red;

87
src/forms.scss
View File

@ -40,7 +40,8 @@ form {
}
input,
textarea {
textarea,
select {
background-color: palette.$standout;
border: .1rem solid palette.$standout;
margin: .5rem;
@ -109,6 +110,10 @@ input[type="radio"] {
}
}
textarea {
resize: vertical;
}
input[type="radio"] {
border-radius: 100%;
@ -146,6 +151,7 @@ input[type="checkbox"].switch {
top: 50%;
left: .1rem;
translate: 0 -50%;
transition: .3s;
}
&:checked::after {
@ -160,4 +166,83 @@ input[type="checkbox"].switch {
background-color: palette.$grey900
}
}
}
input[type="color"] {
width: 3rem;
height: 3rem;
padding: .5rem;
cursor: pointer;
&::-moz-color-swatch,
&::-webkit-color-swatch {
width: 100%;
height: 100%;
border: 0 none transparent;
}
}
input[type="file"] {
font-family: 'Manrope', sans-serif;
color: palette.$grey500;
&::file-selector-button {
font-family: 'Manrope', sans-serif;
transition: .3s color, .3s background-color;
cursor: pointer;
text-decoration: none;
text-align: center;
margin: .5rem 1rem .5rem 0;
padding: .5rem 1rem;
border: 2px solid palette.$primary;
@if lightness(palette.$primary) < 50 {
color: palette.$grey50
}
@else {
color: palette.$grey900
}
background-color: transparent;
&:hover {
background-color: palette.$primary;
}
}
}
input[type="range"] {
color: transparent;
background-color: transparent;
border: 0 none transparent;
padding: 0;
&::-moz-range-track,
&::-webkit-slider-runnable-track {
background-color: palette.$primary;
@supports selector(input[type="range"]::-moz-range-progress) {
background-color: palette.$grey200;
}
height: .5rem;
border-radius: .25rem;
}
&::-moz-range-thumb,
&::-webkit-slider-thumb {
background-color: palette.$grey50;
height: 1.25rem;
width: 1.25rem;
border: 1px solid palette.$grey300;
border-radius: .75rem;
cursor: pointer;
}
&::-moz-range-progress {
background-color: palette.$primary;
height: .5rem;
border-radius: .25rem;
}
}

10
web/pages/forms.njk
View File

@ -37,11 +37,11 @@
<label for="select">Select:</label>
<select name="select" id="select">
<option value="select1">Select 1</option>
<option value="select2">Select 2</option>
<option value="select3">Select 3</option>
<option value="select4">Select 4</option>
<option value="select5">Select 5</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
</select>
</form>
{% endblock %}