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

Checkbox and radio buttons

Browse source 
Customized styling, breaking changes.
This commit is contained in:
Angelos Chalaris 2017-11-09 14:03:07 +02:00
parent d3c3202670
commit aee9008fa7
2 changed files with 56 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
docs/v3/DEVLOG.md
View file

@ -131,3 +131,5 @@
- Renamed `grid` to `layout`. It will now house the `card` module, too. This is done to make sure that cards are never used without the grid system, as they wouldn't work too well without it.
- Fully implemented the `card` module into `layout`, gave me no trouble. It's fully operational and tested. Some color tweaking might be required, but everything is pretty much ready for deployment in the `layout` module.
- Customized `checkbox` and `radio` input elements, they should work pretty much fine.
- *TODO* Add variables to customize `input_control` further, except buttons. Add all missing values much like I have done in `layout` module.

56
src/mini/_input_control.scss
View file

@ -27,7 +27,22 @@ $button-border-color-var: '--button-border-color' !default;
$button-hover-border-color-var: '--button-hover-border-color' !default;
// Check the `_input_control_mixins.scss` file to find this module's mixins.
@import 'input_control_mixins';
// TODO: Add a mixin for the switches.
// Necessary functions for certain elements (mainly the icon used for the checkbox)
/// Courtesy of: https://css-tricks.com/snippets/sass/str-replace-function/
/// -----------------------------------------------------------------------
/// Replace `$search` with `$replace` in `$string`
/// @author Hugo Giraudel
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
/* Input_control module CSS variable definitions */
:root {
#{$input-focus-color-var}: $input-focus-color;
@ -119,7 +134,7 @@ label {
}
// 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 {
[type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], 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});
@ -151,6 +166,43 @@ option {
overflow: hidden;
text-overflow: ellipsis;
}
// Styling for checkboxes and radio buttons.
[type="checkbox"], [type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
height: calc(1rem + var(#{$universal-padding-var}) / 2);
width: calc(1rem + var(#{$universal-padding-var}) / 2);
vertical-align: text-bottom;
padding: 0; // Remove padding added from previous styles.
flex-basis: 1.25rem !important; // Override fluid input-group styling.
flex-grow: 0 !important; // Using with fluid input-groups is not recommended.
&:checked:before {
position: absolute;
}
}
[type="checkbox"] {
&:checked:before {
content: '\2713';
font-family: sans-serif;
font-size: calc(1rem + var(#{$universal-padding-var}) / 2);
top: calc(0rem - var(#{$universal-padding-var}));
left: calc(var(#{$universal-padding-var}) / 4);
}
}
[type="radio"] {
border-radius: 100%;
&:checked:before {
border-radius: 100%;
content: '';
top: calc(#{$__1px} + var(#{$universal-padding-var}) / 2);
left: calc(#{$__1px} + var(#{$universal-padding-var}) / 2);
background: $fore-color;
width: 0.5rem;
height: 0.5rem;
}
}
// Placeholder styling (keep browser-specific definitions separated, they do not play well together).
:placeholder-shown {
color: var(#{$fore-color-var});