mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-15 02:14:00 +02:00
Code Issues Releases Wiki Activity

Input control cleanup

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-10 10:07:09 +02:00
parent af604fc48c
commit 8cb6329a41
7 changed files with 219 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
dist/mini-default.css vendored
View File

@@ -700,7 +700,16 @@ button, [type="button"], [type="submit"], [type="reset"], a.button, label.button
opacity: 0.65; } opacity: 0.65; }
input[type="file"] { input[type="file"] {
display: none; } border: 0;
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%); }
[type="checkbox"], [type="radio"] { [type="checkbox"], [type="radio"] {
height: 1px; height: 1px;

2
dist/mini-default.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
docs/v2/DEVLOG.md
View File

@@ -383,4 +383,6 @@
- Started converting media queries from `only screen and ()` to plain `()`. Changes have been applied to `grid` module. - Started converting media queries from `only screen and ()` to plain `()`. Changes have been applied to `grid` module.
- Code cleanup in `grid`, indentation etc. - Code cleanup in `grid`, indentation etc.
- Code cleanup in `table`. Media query conversions applied. Optimization. - Code cleanup in `table`. Media query conversions applied. Optimization.
- Code cleanup in `form`.
- Code cleanup in `button`. Updated `file` `input`s to be accessible.
- Code cleanup in `checkbox`. Optimizations.

126
src/mini/_button.scss
View File

@@ -2,12 +2,12 @@
// Different elements are styled based on the same set of rules. // Different elements are styled based on the same set of rules.
// Reset for Firefox focusing on button elements. // 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 { button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
// Fixes for Android 4, iOS and Safari. // Fixes for Android 4, iOS and Safari.
button, html [type="button"], [type="reset"], [type="submit"] { button, html [type="button"], [type="reset"], [type="submit"] {
-webkit-appearance: button; -webkit-appearance: button;
} }
// Other fixes. // Other fixes.
button { button {
@@ -15,47 +15,57 @@ button {
text-transform: none; // Remove inheritance of text-transform in Edge, Firefox, and IE. text-transform: none; // Remove inheritance of text-transform in Edge, Firefox, and IE.
} }
// Default styling // Default styling
button, [type="button"], [type="submit"], [type="reset"], a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name}{ button, [type="button"], [type="submit"], [type="reset"], a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name} {
display: inline-block; display: inline-block;
background: rgba($button-back-color, $button-back-opacity); background: rgba($button-back-color, $button-back-opacity);
color: $button-fore-color; color: $button-fore-color;
border: $button-border-style; border: $button-border-style;
@if $button-border-radius != 0 { @if $button-border-radius != 0 {
border-radius: $button-border-radius; border-radius: $button-border-radius;
} }
@if $button-padding != 0 { @if $button-padding != 0 {
padding: $button-padding; padding: $button-padding;
} }
@if $button-margin != 0 { @if $button-margin != 0 {
margin: $button-margin; margin: $button-margin;
} }
@if $apply-link-underline { // Override for links if underline is enabled. @if $apply-link-underline { // Override for links if underline is enabled.
text-decoration: none; text-decoration: none;
} }
transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;
cursor: pointer; cursor: pointer;
&:hover, &:active, &:focus { &:hover, &:active, &:focus {
background: rgba($button-back-color, $button-hover-back-opacity); background: rgba($button-back-color, $button-hover-back-opacity);
@if $apply-link-hover-fade { // Override for links if hover-fade is enabled. @if $apply-link-hover-fade { // Override for links if hover-fade is enabled.
opacity: 1; opacity: 1;
} }
} }
&:disabled, &[disabled] { &:disabled, &[disabled] {
cursor: not-allowed; cursor: not-allowed;
opacity: $button-disabled-opacity; opacity: $button-disabled-opacity;
} }
} }
// Styling for file inputs
$hide-file-inputs: true !default; $hide-file-inputs: true !default;
@if $hide-file-inputs { @if $hide-file-inputs {
input[type="file"] { input[type="file"] { // Hide, use labels instead. Hidden inputs like this are still accessible.
display: none; // Hide, use labels instead. border: 0;
} height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
}
} }
@else { @else {
::-webkit-file-upload-button { ::-webkit-file-upload-button {
-webkit-appearance: button; // Correct inability to style in iOS and Safari. -webkit-appearance: button; // Correct inability to style in iOS and Safari.
font: inherit; // Change font propery to `inherit` in Safari. font: inherit; // Change font propery to `inherit` in Safari.
} }
} }
// Mixin for alternate buttons (button color variants). // Mixin for alternate buttons (button color variants).
// Variables: // Variables:
@@ -70,16 +80,16 @@ input[type="file"] {
// base class for the button styles. // base class for the button styles.
@mixin make-button-alt-color ($button-alt-name, $button-alt-back-color, $button-alt-back-opacity, @mixin make-button-alt-color ($button-alt-name, $button-alt-back-color, $button-alt-back-opacity,
$button-alt-hover-back-opacity, $button-alt-fore-color: $button-fore-color) { $button-alt-hover-back-opacity, $button-alt-fore-color: $button-fore-color) {
button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name}, button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name},
[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name} { [type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name} {
background: rgba($button-alt-back-color, $button-alt-back-opacity); background: rgba($button-alt-back-color, $button-alt-back-opacity);
@if $button-alt-fore-color != $button-fore-color { @if $button-alt-fore-color != $button-fore-color {
color: $button-alt-fore-color; color: $button-alt-fore-color;
} }
&:hover, &:active, &:focus{ &:hover, &:active, &:focus {
background: rgba($button-alt-back-color, $button-alt-hover-back-opacity); background: rgba($button-alt-back-color, $button-alt-hover-back-opacity);
} }
} }
} }
// Mixin for alternate button styles (button color variants). // Mixin for alternate button styles (button color variants).
// Variables: // Variables:
@@ -94,19 +104,19 @@ button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"]
// base class for the button styles. // base class for the button styles.
@mixin make-button-alt-style ($button-alt-name, $button-alt-border-style, $button-alt-border-radius, @mixin make-button-alt-style ($button-alt-name, $button-alt-border-style, $button-alt-border-radius,
$button-alt-padding, $button-alt-margin) { $button-alt-padding, $button-alt-margin) {
button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name}, button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name},
[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name} { [type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name} {
@if $button-alt-border-style != $button-border-style { @if $button-alt-border-style != $button-border-style {
border: $button-alt-border-style; border: $button-alt-border-style;
} }
@if $button-alt-border-radius != $button-border-radius { @if $button-alt-border-radius != $button-border-radius {
border-radius: $button-alt-border-radius; border-radius: $button-alt-border-radius;
} }
@if $button-alt-padding != $button-padding { @if $button-alt-padding != $button-padding {
padding: $button-alt-padding; padding: $button-alt-padding;
} }
@if $button-alt-margin != $button-margin { @if $button-alt-margin != $button-margin {
margin: $button-alt-margin; margin: $button-alt-margin;
} }
} }
} }

128
src/mini/_checkbox.scss
View File

@@ -4,70 +4,74 @@
[type="checkbox"], [type="radio"] { [type="checkbox"], [type="radio"] {
height: 1px; height: 1px;
width: 1px; width: 1px;
margin: -1px; margin: -1px;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
clip: rect(0 0 0 0); clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%); -webkit-clip-path: inset(100%);
clip-path: inset(100%); clip-path: inset(100%);
} }
// Use input-group to setup the style for labels. // Use input-group to setup the style for labels.
.#{$input-group-name} { .#{$input-group-name} {
// Label styling based on the specifics of the checkbox/radio variables. // Label styling based on the specifics of the checkbox/radio variables.
[type="checkbox"] + label, [type="radio"] + label { [type="checkbox"] + label, [type="radio"] + label {
position: relative; position: relative;
margin-left: $checkbox-size + ($checkbox-size * 0.25); margin-left: $checkbox-size + ($checkbox-size * 0.25);
// Styling for checkbox/radio box part. // Styling for checkbox/radio box part.
&:before { &:before {
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: $checkbox-size; width: $checkbox-size;
height: $checkbox-size; height: $checkbox-size;
content: ''; content: '';
border: $checkbox-border-style; @if $checkbox-border-style != 0 {
border-radius: $checkbox-border-radius; border: $checkbox-border-style;
background: $checkbox-back-color; }
color: $checkbox-fore-color; @if $checkbox-border-radius != 0 {
margin-left: -($checkbox-size + ($checkbox-size * 0.25)); border-radius: $checkbox-border-radius;
vertical-align: text-bottom; }
} background: $checkbox-back-color;
// Hover, focus, active styling. color: $checkbox-fore-color;
&:hover, &:active, &:focus { margin-left: -($checkbox-size + ($checkbox-size * 0.25));
&:before { vertical-align: text-bottom;
border-color: $checkbox-focus-border-color; }
} // Hover, focus, active styling.
} &:hover, &:active, &:focus {
} &:before {
[type="checkbox"]:focus + label:before, [type="radio"]:focus + label:before { border-color: $checkbox-focus-border-color;
border-color: $checkbox-focus-border-color; }
} }
// Make radio button box and fill circular. }
[type="radio"] + label { [type="checkbox"]:focus + label:before, [type="radio"]:focus + label:before {
&:before, &:after { border-color: $checkbox-focus-border-color;
border-radius: 50%; }
} // Make radio button box and fill circular.
} [type="radio"] + label {
// Disabled and readonly styles. &:before, &:after {
[type="checkbox"][disabled] + label, [type="radio"][disabled] + label { border-radius: 50%;
cursor: not-allowed; }
&:before, &:after { }
opacity: $checkbox-disabled-opacity; // Disabled and readonly styles.
} [type="checkbox"][disabled] + label, [type="radio"][disabled] + label {
} cursor: not-allowed;
// Fill for checked checkbox/radio elements. &:before, &:after {
[type="checkbox"]:checked + label, [type="radio"]:checked + label{ opacity: $checkbox-disabled-opacity;
&:after { }
margin-left: - floor($checkbox-size + floor($checkbox-size * 0.25)); }
position: absolute; // Fill for checked checkbox/radio elements.
top: ($checkbox-size - floor($checkbox-size * 0.55))/2; [type="checkbox"]:checked + label, [type="radio"]:checked + label{
left: ($checkbox-size - floor($checkbox-size * 0.55))/2; &:after {
width: floor($checkbox-size * 0.55); margin-left: - floor($checkbox-size + floor($checkbox-size * 0.25));
height: floor($checkbox-size * 0.55); position: absolute;
background: $checkbox-fore-color; top: ($checkbox-size - floor($checkbox-size * 0.55))/2;
content: ''; left: ($checkbox-size - floor($checkbox-size * 0.55))/2;
} width: floor($checkbox-size * 0.55);
} height: floor($checkbox-size * 0.55);
background: $checkbox-fore-color;
content: '';
}
}
} }

116
src/mini/_form.scss
View File

@@ -2,33 +2,33 @@
// Different elements are styled based on the same set of rules. // Different elements are styled based on the same set of rules.
// Base form styling. // Base form styling.
form { form {
@if $form-back-color != $back-color { @if $form-back-color != $back-color {
background: $form-back-color; background: $form-back-color;
} }
@if $form-fore-color != $fore-color { @if $form-fore-color != $fore-color {
color: $form-fore-color; color: $form-fore-color;
} }
@if $form-border-style != 0 { @if $form-border-style != 0 {
border: $form-border-style; border: $form-border-style;
} }
@if $form-border-radius != 0 { @if $form-border-radius != 0 {
border-radius: $form-border-radius; border-radius: $form-border-radius;
} }
@if $form-margin != 0 { @if $form-margin != 0 {
margin: $form-margin; margin: $form-margin;
} }
@if $form-padding != 0 { @if $form-padding != 0 {
padding: $form-padding; padding: $form-padding;
} }
} }
// Fieldset styling. // Fieldset styling.
fieldset { fieldset {
@if $fieldset-back-color != $form-back-color { @if $fieldset-back-color != $form-back-color {
background: $fieldset-back-color; background: $fieldset-back-color;
} }
// Apply always to overwrite defaults for all of the below.
border: $fieldset-border-style; border: $fieldset-border-style;
border-radius: $fieldset-border-radius; border-radius: $fieldset-border-radius;
// Margin and padding should never be unassigned, because browser defaults will be applied.
margin: $fieldset-margin; margin: $fieldset-margin;
padding: $fieldset-padding; padding: $fieldset-padding;
} }
@@ -42,12 +42,12 @@ legend {
// Actual styling. // Actual styling.
font-weight: $legend-font-weight; font-weight: $legend-font-weight;
font-size: $legend-font-size; font-size: $legend-font-size;
@if $legend-fore-color != $fore-color { @if $legend-fore-color != $fore-color {
color: $legend-fore-color; color: $legend-fore-color;
} }
@if $legend-padding != 0 { @if $legend-padding != 0 {
padding: $legend-padding; padding: $legend-padding;
} }
} }
// Input group base naming. // Input group base naming.
.#{$input-group-name} { .#{$input-group-name} {
@@ -55,21 +55,21 @@ legend {
} }
// Correct the cursor style of increment and decrement buttons in Chrome. // Correct the cursor style of increment and decrement buttons in Chrome.
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
height: auto; height: auto;
} }
// Remove the default vertical scrollbar in IE. // Remove the default vertical scrollbar in IE.
textarea { textarea {
overflow: auto; overflow: auto;
} }
// Correct style in Chrome and Safari. // Correct style in Chrome and Safari.
[type="search"] { [type="search"] {
-webkit-appearance: textfield; -webkit-appearance: textfield;
outline-offset: -2px; outline-offset: -2px;
} }
// Correct style in Chrome and Safari. // Correct style in Chrome and Safari.
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration { [type="search"]::-webkit-search-decoration {
-webkit-appearance: none; -webkit-appearance: none;
} }
// Common textual input styling. // Common textual input styling.
input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"], input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
@@ -79,31 +79,31 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
background: $input-back-color; background: $input-back-color;
color: $input-fore-color; color: $input-fore-color;
border: $input-border-style; border: $input-border-style;
@if $input-border-radius != 0 { @if $input-border-radius != 0 {
border-radius: $input-border-radius; border-radius: $input-border-radius;
} }
@if $input-margin != 0 { @if $input-margin != 0 {
margin: $input-margin; margin: $input-margin;
} }
@if $input-padding != 0 { @if $input-padding != 0 {
padding: $input-padding; padding: $input-padding;
} }
&:focus { &:focus {
border-color: $input-focus-border-color; border-color: $input-focus-border-color;
box-shadow: none; box-shadow: none;
} }
&[disabled] { &[disabled] {
cursor: not-allowed; cursor: not-allowed;
opacity: $input-disabled-opacity; opacity: $input-disabled-opacity;
} }
&:invalid, &:focus:invalid, &:focus:invalid:focus{ &:invalid, &:focus:invalid, &:focus:invalid:focus{
border-color: $input-invalid-border-color; border-color: $input-invalid-border-color;
box-shadow: none; box-shadow: none;
} }
&[readonly]{ &[readonly]{
background: $input-readonly-back-color; background: $input-readonly-back-color;
border-color: $input-readonly-border-color; border-color: $input-readonly-border-color;
} }
} }
// Placeholder styling. // Placeholder styling.
::-webkit-placeholder { ::-webkit-placeholder {

24
src/mini/_table.scss
View File

@@ -23,7 +23,7 @@ tr {
th, td { th, td {
padding: $table-column-padding; // Apply always to overwrite default. padding: $table-column-padding; // Apply always to overwrite default.
border-left: $table-border-style; border-left: $table-border-style;
border-top: $table-border-style; border-top: $table-border-style;
} }
th { th {
border-top: 0; border-top: 0;
@@ -44,13 +44,13 @@ th:first-child, td:first-child {
border: 0; border: 0;
height: 1px; height: 1px;
width: 1px; width: 1px;
margin: -1px; margin: -1px;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
position: absolute; position: absolute;
clip: rect(0 0 0 0); clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%); -webkit-clip-path: inset(100%);
clip-path: inset(100%); clip-path: inset(100%);
} }
tr { tr {
display: block; display: block;
@@ -58,7 +58,7 @@ th:first-child, td:first-child {
@if $table-border-radius != 0 { @if $table-border-radius != 0 {
border-radius: $table-border-radius; border-radius: $table-border-radius;
} }
margin-bottom: $table-mobile-card-spacing; margin-bottom: $table-mobile-card-spacing;
} }
td { td {
display: block; display: block;
@@ -66,12 +66,12 @@ th:first-child, td:first-child {
@if $table-border-style != 0 { @if $table-border-style != 0 {
border-bottom: $table-border-style; border-bottom: $table-border-style;
} }
text-align: right; text-align: right;
} }
td:before { td:before {
content: attr(#{$table-mobile-card-label}); content: attr(#{$table-mobile-card-label});
float: left; float: left;
font-weight: $table-mobile-label-font-weight; font-weight: $table-mobile-label-font-weight;
} }
td:last-child { td:last-child {
@if $table-border-style != 0 { @if $table-border-style != 0 {