1
0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-04-20 20:31:51 +02:00

🐛 fix - Resolved #108

Fixed the bugs related to the <select> element.
This commit is contained in:
Angelos Chalaris 2017-10-23 13:47:50 +03:00
parent e28f291531
commit 532608e16e
5 changed files with 31 additions and 6 deletions

8
.gitignore vendored
View File

@ -1 +1,9 @@
prepros-6\.config
docs/v3/index-splash-o2\.jpg
docs/v3/index-splash-o1\.jpg
dist/mini-doc\.min\.css
dist/mini-doc\.css

15
dist/mini-default.css vendored
View File

@ -3,7 +3,7 @@
Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.3.6
mini.css version: v2.3.7
*/
/*
Browsers resets and base typography.
@ -811,7 +811,7 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
border-color: #c9c9c9;
}
select:not([multiple]) {
select:not([multiple]):not([size]) {
padding-right: 1.5rem;
background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%23212121" d="M.25.75h.5L.5 1"/></svg>') no-repeat right;
background-color: #fafafa;
@ -820,10 +820,19 @@ select:not([multiple]) {
appearance: none;
}
select:not([multiple])[readonly] {
select:not([multiple]):not([size])[readonly] {
background-color: #e5e5e5;
}
select {
max-width: 100%;
}
option {
overflow: hidden;
text-overflow: ellipsis;
}
::-webkit-input-placeholder {
opacity: 1;
color: #616161;

File diff suppressed because one or more lines are too long

View File

@ -5,7 +5,7 @@
Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.3.6
mini.css version: v2.3.7
*/
// Basic rules for body and typography
$fore-color: #212121; // Text and general foreground color

View File

@ -268,7 +268,7 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
}
// Correct background styling in Safari
@if $apply-select-fix {
select:not([multiple]) {
select:not([multiple]):not([size]) {
padding-right: $select-padding-right;
background: url(selectArrow()) no-repeat right;
background-color: $input-back-color;
@ -280,6 +280,14 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
}
}
}
// Make select respect parent width, stylize options
select {
max-width: 100%;
}
option {
overflow: hidden;
text-overflow: ellipsis;
}
// Placeholder styling (keep browser-specific definitions separated, they do not play well together).
::-webkit-input-placeholder {
opacity: 1;