alecodes/mini-strap
2
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages 2 Wiki Activity Actions

feat(core): add styles for vanilla form elements

Browse source 
#1
This commit is contained in:
Alexander Navarro 2024-09-16 20:35:38 -03:00
parent 919afcbcfc
commit e754e40622
22 changed files with 1034 additions and 184 deletions
Download patch file Download diff file Expand all files Collapse all files

217
packages/core/src/components/form.scss Normal file
View file

@ -0,0 +1,217 @@
@use "../tokens" as *;
@use "../mixins";
@use "sass:color";
@use "sass:string";
fieldset:not(.msp-fieldset-border) {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}
fieldset.msp-fieldset-border {
padding: var(--msp-spacing-2);
margin: 0;
border-radius: var(--msp-border-radius);
border: var(--msp-border-width) var(--msp-border-style) var(--msp-color-text);
}
label {
display: inline-block;
margin-bottom: var(--msp-spacing-1);
}
select,
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not(
[type="range"]
) {
display: block;
border-radius: var(--msp-border-radius);
border: var(--msp-border-width) var(--msp-border-style)
var(--msp-border-color);
width: 100%;
background-color: var(--msp-color-bg-input);
color: var(--msp-color-text-input);
padding: var(--msp-spacing-1);
font-size: 0.8rem;
}
input[type="checkbox"] + label {
display: inline-block;
margin-bottom: initial;
}
input[type="checkbox"] {
float: left;
background-color: var(--msp-color-bg-input);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: var(--msp-border-radius);
border: var(--msp-border-width) var(--msp-border-style)
var(--msp-border-bg-input);
background-color: var(--msp-color-bg-input);
background-image: var(--msp-form-check-bg-image);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
$size: 0.75rem;
width: $size;
height: $size;
margin-top: 0.425rem;
margin-right: var(--msp-spacing-1);
&:checked {
background-color: var(--msp-color-bg-checkbox);
border-color: var(--msp-color-bg-checkbox);
$stroke-color: "%23#{string.slice(map-get($msp-colors, "--msp-color-text-checkbox"), 2, -1)}";
--msp-form-check-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="none" stroke="#{$stroke-color}" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m6 10 3 3 6-6"/></svg>');
}
}
input[type="radio"] {
float: left;
background-color: var(--msp-color-bg-input);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 50%;
border: var(--msp-border-width) var(--msp-border-style)
var(--msp-border-bg-input);
background-color: var(--msp-color-bg-input);
background-image: var(--msp-form-check-bg-image);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
$size: 0.75rem;
width: $size;
height: $size;
margin-top: 0.425rem;
margin-right: var(--msp-spacing-1);
&:checked {
background-color: var(--msp-color-bg-checkbox);
border-color: var(--msp-color-bg-checkbox);
$fill-color: "%23#{string.slice(map-get($msp-colors, "--msp-color-text-checkbox"), 2, -1)}";
--msp-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='#{$fill-color}'/%3e%3c/svg%3e");
}
}
input[type="color"] {
display: block;
border-radius: var(--msp-border-radius);
border: var(--msp-border-width) var(--msp-border-style)
var(--msp-color-bg-input);
padding: var(--msp-spacing-1);
width: 3rem;
height: 2rem;
background-color: var(--msp-color-bg-input);
&::-moz-color-swatch {
padding: var(--msp-spacing-1);
border-radius: var(--msp-border-radius);
border: 0;
}
}
input[type="range"] {
background-color: transparent;
display: block;
width: 100%;
// color: var(--msp-color-text-input);
border-color: transparent;
&::-moz-range-thumb {
background-color: var(--msp-color-text-range);
width: 1rem;
height: 1rem;
border-radius: 50%;
border: 0;
}
&::-moz-range-track {
background-color: var(--msp-color-bg-range);
color: transparent;
border-color: transparent;
width: 100%;
height: 0.5rem;
border-radius: var(--msp-border-radius);
}
}
input:disabled::placeholder,
input::placeholder,
select:disabled,
option:disabled {
opacity: 1;
color: var(--msp-color-text-input-disabled);
}
input:disabled {
background: var(--msp-color-bg-disabled);
}
.form-control[type="file"] {
&:not(:disabled):not([readonly]) {
cursor: pointer;
}
overflow: hidden;
@include mixins.hover-darker;
&.form-control::file-selector-button {
background-color: inherit;
padding-right: var(--msp-spacing-2);
margin-right: var(--msp-spacing-2);
pointer-events: none;
border-color: inherit;
border-style: solid;
border-width: 0;
border-inline-end-width: var(--msp-border-width);
border-radius: 0;
}
}
.msp-form-text-help {
margin-top: var(--msp-spacing-1);
font-size: 0.875em;
color: var(--msp-color-text-disabled);
}
[type="submit"]:not(:disabled),
button:not(:disabled) {
cursor: pointer;
}
button {
display: inline-block;
padding: var(--msp-spacing-1) var(--msp-spacing-2);
background: var(--msp-color-bg-btn);
font-size: 1rem;
color: var(--msp-color-text-btn);
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
border: var(--msp-border-width) var(--msp-border-style)
var(--msp-color-bg-btn);
border-radius: var(--msp-border-radius);
@include mixins.hover-darker;
}