Made Select component to make using styled selects easier
This commit is contained in:
parent
6281241b92
commit
c6d4c20982
19 changed files with 240 additions and 317 deletions
34
src/App.scss
34
src/App.scss
|
@ -187,7 +187,7 @@ a {
|
|||
}
|
||||
}
|
||||
|
||||
input, textarea, .select, .input {
|
||||
input, textarea, .input {
|
||||
|
||||
&.unstyled {
|
||||
border-radius: 0;
|
||||
|
@ -217,11 +217,7 @@ input, textarea, .select, .input {
|
|||
hyphens: none;
|
||||
padding: 8px .5em;
|
||||
|
||||
&.select {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:disabled, &[disabled=disabled] {
|
||||
&:disabled, &[disabled=disabled], &.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
@ -239,25 +235,6 @@ input, textarea, .select, .input {
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: $fallback--text;
|
||||
color: var(--inputText, --text, $fallback--text);
|
||||
margin: 0;
|
||||
padding: 0 2em 0 .2em;
|
||||
font-family: sans-serif;
|
||||
font-family: var(--inputFont, sans-serif);
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
height: 28px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
&[type=range] {
|
||||
background: none;
|
||||
border: none;
|
||||
|
@ -809,13 +786,6 @@ nav {
|
|||
}
|
||||
}
|
||||
|
||||
.select-multiple {
|
||||
display: flex;
|
||||
.option-list {
|
||||
margin: 0;
|
||||
padding-left: .5em;
|
||||
}
|
||||
}
|
||||
.setting-list,
|
||||
.option-list{
|
||||
list-style-type: none;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue