beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Input styling

Browse source 
Common textual inputs, general fixes applied.
This commit is contained in:
Angelos Chalaris 2017-11-07 13:12:38 +02:00
parent 2680474e98
commit d759febf75
2 changed files with 94 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
docs/v3/DEVLOG.md
View file

@ -98,4 +98,10 @@
## 20171107
- Built `.input-group`s from the ground up, cleaning legacy code and making sure everything works just like before.
- Built `.input-group`s from the ground up, cleaning legacy code and making sure everything works just like before.
- Copied over the fix for `number` `input`s, still valid.
- Removed the `textarea` fix, as it only applies to IE.
- Copied over fixes for `search` elements, as they seem to apply to modern browsers.
- Used CSS variables for most of the form `input` custmization, these should be easy to change.
- Replaced old `::placeholder` definitions with `:placeholder-shown` for most browsers, kept the `-ms-` prefixed one for Edge. Using `:placeholder-shown` is following the latest standards, it has a high implementation rate, does not conflict with the browser support **Gluon** is targeting and, if it does not work, the code will default to what browsers usually do, which is pretty much what I am doing, too. It also simplifies the code a bit. `::-ms-placeholder` simulates the default behavior, so all browsers should get a similar styling.
- Copied over all the fixes for `button` and similar elements, as they were up-to-date.

87
src/mini/_input_control.scss
View file

@ -7,9 +7,20 @@ $_include-fluid-input-group: true !default; // [Hidden] Should fluid i
$input-group-fluid-name: 'fluid' !default; // Class name for fluid input groups.
$input-group-vertical-name: 'vertical' !default; // Class name for vertical input groups.
$input-group-mobile-breakpoint: 767px !default; // Breakpoint for fluid input group mobile view.
$input-disabled-opacity: 0.75 !default; // Opacity for input elements when disabled.
$input-focus-color: #0288d1 !default; // Border color for focused input elements.
$input-invalid-color: #d32f2f !default; // Border color for invalid input elements.
// CSS variable name definitions [exercise caution if modifying these]
$input-focus-color-var: '--input-focus-color' !default;
$input-invalid-color-var: '--input-invalid-color' !default;
// Check the `_input_control_mixins.scss` file to find this module's mixins.
// @import 'input_control_mixins';
// TODO: Uncomment above as soon as mixins are ready to be used.
/* Input_control module CSS variable definitions */
:root {
#{$input-focus-color-var}: $input-focus-color;
#{$input-invalid-color-var}: $input-invalid-color;
}
// Base form styling
form { // Text color is the default, this can be changed manually.
background: var(#{$secondary-back-color-var});
@ -75,3 +86,79 @@ label {
}
}
}
// Correct the cursor style of increment and decrement buttons in Chrome.
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
height: auto;
}
// Correct style in Chrome and Safari.
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
// Correct style in Chrome and Safari.
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
// Common textual input styling. - Avoid using box-shadow with these.
input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
[type="password"], [type="url"], [type="tel"], textarea, select {
box-sizing: border-box;
// Background, color and border should not be unassigned, as the browser defaults will apply.
background: var(#{$back-color-var});
color: var(#{$fore-color-var});
border: $__1px solid var(#{$secondary-border-color-var});
border-radius: var(#{$universal-border-radius-var});
margin: calc(var(#{$universal-margin-var}) / 2);
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
}
// Hover, focus, disabled, readonly, invalid styling for common textual inputs.
input:not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select {
&:hover, &:focus {
border-color: var(#{$input-focus-color-var});
box-shadow: none;
}
&:disabled, &[disabled] {
cursor: not-allowed;
opacity: $input-disabled-opacity;
}
&:invalid, &:focus:invalid{
border-color: var(#{$input-invalid-color-var});
box-shadow: none;
}
&[readonly]{
background: var(#{$secondary-back-color-var});
}
}
// Fix for select and option elements overflowing their parent container.
select {
max-width: 100%;
}
option {
overflow: hidden;
text-overflow: ellipsis;
}
// Placeholder styling (keep browser-specific definitions separated, they do not play well together).
:placeholder-shown {
color: var(#{$fore-color-var});
}
::-ms-placeholder {
color: var(#{$fore-color-var});
opacity: 0.54;
}
// Definitions for the button and button-like elements.
// Different elements are styled based on the same set of rules.
// Reset for Firefox focusing on button elements.
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
// Fixes for Android 4, iOS and Safari.
button, html [type="button"], [type="reset"], [type="submit"] {
-webkit-appearance: button;
}
// Other fixes.
button {
overflow: visible; // Show the overflow in IE.
text-transform: none; // Remove inheritance of text-transform in Edge, Firefox, and IE.
}