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

Input groups

Browse source 
Reworked and perfectly legacy-free.
This commit is contained in:
Angelos Chalaris 2017-11-07 11:25:20 +02:00
parent f93612e26d
commit f8215a6be7
2 changed files with 40 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
docs/v3/DEVLOG.md
View file

@ -95,3 +95,7 @@
- Decided not to add the `select` fix in `input_control`. Browsers are pretty wild around the element and its use cases are causing a ton of complications. It is possible, but quite unlikely that it will be rebuilt in the old way in the future, but most likely it will just follow the OS/Browser/Native UI as it should have done originally. It's debatable if this is for the best, but quite frankly it saves me a lot of time and effort for a single element and a lot of bytes in the codebase. I would rather not style it and provide an outside fix for safety, one that goes a bit against semantics to provide better styling. If you are reading this and want to tell me why this was a bad choice and led to the demise of the **hugging cat**, kindly do!
- Added styling for `form` elements, simplified the values of `padding` to make them more reasonable and uniform.
- `legend` elements now have larger text (`1rem` over `0.875rem` in the past). This is done with accessibility in mind, making sure that users will have an easier time reading forms, which are a crucially important part of websites nowadays. Also simplified padding to be more universal and avoid cluttering.
## 20171107
- Built `.input-group`s from the ground up, cleaning legacy code and making sure everything works just like before.

37
src/mini/_input_control.scss
View file

@ -2,7 +2,11 @@
Definitions for forms and input elements.
*/
// Different elements are styled based on the same set of rules.
$input-group-name: 'input-group' !default; // Class name for input groups.
$_include-fluid-input-group: true !default; // [Hidden] Should fluid input groups be included? (boolean)
$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.
// 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.
@ -40,3 +44,34 @@ legend {
label {
padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var});
}
// Input group styling.
.#{$input-group-name} {
display: inline-block;
// Fluid input groups
@if $_include-fluid-input-group {
&.#{$input-group-fluid-name} {
display: flex;
align-items: center;
justify-content: center;
& > input {
flex-grow: 1;
flex-basis: 0px;
}
// On mobile
@media screen and (max-width: #{$input-group-mobile-breakpoint}) {
align-items: stretch;
flex-direction: column;
}
}
// Verical input groups
&.#{$input-group-vertical-name} {
display: flex;
align-items: stretch;
flex-direction: column;
& > input {
flex-grow: 1;
flex-basis: 0px;
}
}
}
}