mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-13 17:33:59 +02:00
Input control cleanup
This commit is contained in:
Angelos Chalaris
11
dist/mini-default.css
vendored
11
dist/mini-default.css
vendored
@@ -700,7 +700,16 @@ button, [type="button"], [type="submit"], [type="reset"], a.button, label.button
|
||||
opacity: 0.65; }
|
||||
|
||||
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"] {
|
||||
height: 1px;
|
||||
|
||||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -383,4 +383,6 @@
|
||||
- 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 `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.
|
||||
|
||||
@@ -2,12 +2,12 @@
|
||||
// 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;
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
// Fixes for Android 4, iOS and Safari.
|
||||
button, html [type="button"], [type="reset"], [type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
// Other fixes.
|
||||
button {
|
||||
@@ -15,47 +15,57 @@ button {
|
||||
text-transform: none; // Remove inheritance of text-transform in Edge, Firefox, and IE.
|
||||
}
|
||||
// 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;
|
||||
background: rgba($button-back-color, $button-back-opacity);
|
||||
color: $button-fore-color;
|
||||
border: $button-border-style;
|
||||
@if $button-border-radius != 0 {
|
||||
border-radius: $button-border-radius;
|
||||
}
|
||||
@if $button-padding != 0 {
|
||||
padding: $button-padding;
|
||||
}
|
||||
@if $button-margin != 0 {
|
||||
margin: $button-margin;
|
||||
}
|
||||
@if $apply-link-underline { // Override for links if underline is enabled.
|
||||
text-decoration: none;
|
||||
}
|
||||
@if $button-border-radius != 0 {
|
||||
border-radius: $button-border-radius;
|
||||
}
|
||||
@if $button-padding != 0 {
|
||||
padding: $button-padding;
|
||||
}
|
||||
@if $button-margin != 0 {
|
||||
margin: $button-margin;
|
||||
}
|
||||
@if $apply-link-underline { // Override for links if underline is enabled.
|
||||
text-decoration: none;
|
||||
}
|
||||
transition: all 0.3s ease 0s;
|
||||
cursor: pointer;
|
||||
&:hover, &:active, &:focus {
|
||||
background: rgba($button-back-color, $button-hover-back-opacity);
|
||||
@if $apply-link-hover-fade { // Override for links if hover-fade is enabled.
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&:disabled, &[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: $button-disabled-opacity;
|
||||
}
|
||||
&:hover, &:active, &:focus {
|
||||
background: rgba($button-back-color, $button-hover-back-opacity);
|
||||
@if $apply-link-hover-fade { // Override for links if hover-fade is enabled.
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&:disabled, &[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: $button-disabled-opacity;
|
||||
}
|
||||
}
|
||||
// Styling for file inputs
|
||||
$hide-file-inputs: true !default;
|
||||
@if $hide-file-inputs {
|
||||
input[type="file"] {
|
||||
display: none; // Hide, use labels instead.
|
||||
}
|
||||
input[type="file"] { // Hide, use labels instead. Hidden inputs like this are still accessible.
|
||||
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 {
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; // Correct inability to style in iOS and Safari.
|
||||
font: inherit; // Change font propery to `inherit` in Safari.
|
||||
}
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; // Correct inability to style in iOS and Safari.
|
||||
font: inherit; // Change font propery to `inherit` in Safari.
|
||||
}
|
||||
}
|
||||
// Mixin for alternate buttons (button color variants).
|
||||
// Variables:
|
||||
@@ -70,16 +80,16 @@ input[type="file"] {
|
||||
// base class for the button styles.
|
||||
@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.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name},
|
||||
[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name} {
|
||||
background: rgba($button-alt-back-color, $button-alt-back-opacity);
|
||||
@if $button-alt-fore-color != $button-fore-color {
|
||||
color: $button-alt-fore-color;
|
||||
}
|
||||
&:hover, &:active, &:focus{
|
||||
background: rgba($button-alt-back-color, $button-alt-hover-back-opacity);
|
||||
}
|
||||
}
|
||||
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} {
|
||||
background: rgba($button-alt-back-color, $button-alt-back-opacity);
|
||||
@if $button-alt-fore-color != $button-fore-color {
|
||||
color: $button-alt-fore-color;
|
||||
}
|
||||
&:hover, &:active, &:focus {
|
||||
background: rgba($button-alt-back-color, $button-alt-hover-back-opacity);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate button styles (button color variants).
|
||||
// Variables:
|
||||
@@ -94,19 +104,19 @@ button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"]
|
||||
// base class for the button styles.
|
||||
@mixin make-button-alt-style ($button-alt-name, $button-alt-border-style, $button-alt-border-radius,
|
||||
$button-alt-padding, $button-alt-margin) {
|
||||
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} {
|
||||
@if $button-alt-border-style != $button-border-style {
|
||||
border: $button-alt-border-style;
|
||||
}
|
||||
@if $button-alt-border-radius != $button-border-radius {
|
||||
border-radius: $button-alt-border-radius;
|
||||
}
|
||||
@if $button-alt-padding != $button-padding {
|
||||
padding: $button-alt-padding;
|
||||
}
|
||||
@if $button-alt-margin != $button-margin {
|
||||
margin: $button-alt-margin;
|
||||
}
|
||||
}
|
||||
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} {
|
||||
@if $button-alt-border-style != $button-border-style {
|
||||
border: $button-alt-border-style;
|
||||
}
|
||||
@if $button-alt-border-radius != $button-border-radius {
|
||||
border-radius: $button-alt-border-radius;
|
||||
}
|
||||
@if $button-alt-padding != $button-padding {
|
||||
padding: $button-alt-padding;
|
||||
}
|
||||
@if $button-alt-margin != $button-margin {
|
||||
margin: $button-alt-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -4,70 +4,74 @@
|
||||
[type="checkbox"], [type="radio"] {
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
}
|
||||
// Use input-group to setup the style for labels.
|
||||
.#{$input-group-name} {
|
||||
// Label styling based on the specifics of the checkbox/radio variables.
|
||||
[type="checkbox"] + label, [type="radio"] + label {
|
||||
position: relative;
|
||||
margin-left: $checkbox-size + ($checkbox-size * 0.25);
|
||||
// Styling for checkbox/radio box part.
|
||||
&:before {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: $checkbox-size;
|
||||
height: $checkbox-size;
|
||||
content: '';
|
||||
border: $checkbox-border-style;
|
||||
border-radius: $checkbox-border-radius;
|
||||
background: $checkbox-back-color;
|
||||
color: $checkbox-fore-color;
|
||||
margin-left: -($checkbox-size + ($checkbox-size * 0.25));
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
// Hover, focus, active styling.
|
||||
&:hover, &:active, &:focus {
|
||||
&:before {
|
||||
border-color: $checkbox-focus-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
[type="checkbox"]:focus + label:before, [type="radio"]:focus + label:before {
|
||||
border-color: $checkbox-focus-border-color;
|
||||
}
|
||||
// Make radio button box and fill circular.
|
||||
[type="radio"] + label {
|
||||
&:before, &:after {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
// Disabled and readonly styles.
|
||||
[type="checkbox"][disabled] + label, [type="radio"][disabled] + label {
|
||||
cursor: not-allowed;
|
||||
&:before, &:after {
|
||||
opacity: $checkbox-disabled-opacity;
|
||||
}
|
||||
}
|
||||
// Fill for checked checkbox/radio elements.
|
||||
[type="checkbox"]:checked + label, [type="radio"]:checked + label{
|
||||
&:after {
|
||||
margin-left: - floor($checkbox-size + floor($checkbox-size * 0.25));
|
||||
position: absolute;
|
||||
top: ($checkbox-size - floor($checkbox-size * 0.55))/2;
|
||||
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: '';
|
||||
}
|
||||
}
|
||||
// Label styling based on the specifics of the checkbox/radio variables.
|
||||
[type="checkbox"] + label, [type="radio"] + label {
|
||||
position: relative;
|
||||
margin-left: $checkbox-size + ($checkbox-size * 0.25);
|
||||
// Styling for checkbox/radio box part.
|
||||
&:before {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: $checkbox-size;
|
||||
height: $checkbox-size;
|
||||
content: '';
|
||||
@if $checkbox-border-style != 0 {
|
||||
border: $checkbox-border-style;
|
||||
}
|
||||
@if $checkbox-border-radius != 0 {
|
||||
border-radius: $checkbox-border-radius;
|
||||
}
|
||||
background: $checkbox-back-color;
|
||||
color: $checkbox-fore-color;
|
||||
margin-left: -($checkbox-size + ($checkbox-size * 0.25));
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
// Hover, focus, active styling.
|
||||
&:hover, &:active, &:focus {
|
||||
&:before {
|
||||
border-color: $checkbox-focus-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
[type="checkbox"]:focus + label:before, [type="radio"]:focus + label:before {
|
||||
border-color: $checkbox-focus-border-color;
|
||||
}
|
||||
// Make radio button box and fill circular.
|
||||
[type="radio"] + label {
|
||||
&:before, &:after {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
// Disabled and readonly styles.
|
||||
[type="checkbox"][disabled] + label, [type="radio"][disabled] + label {
|
||||
cursor: not-allowed;
|
||||
&:before, &:after {
|
||||
opacity: $checkbox-disabled-opacity;
|
||||
}
|
||||
}
|
||||
// Fill for checked checkbox/radio elements.
|
||||
[type="checkbox"]:checked + label, [type="radio"]:checked + label{
|
||||
&:after {
|
||||
margin-left: - floor($checkbox-size + floor($checkbox-size * 0.25));
|
||||
position: absolute;
|
||||
top: ($checkbox-size - floor($checkbox-size * 0.55))/2;
|
||||
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: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,33 +2,33 @@
|
||||
// Different elements are styled based on the same set of rules.
|
||||
// Base form styling.
|
||||
form {
|
||||
@if $form-back-color != $back-color {
|
||||
background: $form-back-color;
|
||||
}
|
||||
@if $form-fore-color != $fore-color {
|
||||
color: $form-fore-color;
|
||||
}
|
||||
@if $form-border-style != 0 {
|
||||
border: $form-border-style;
|
||||
}
|
||||
@if $form-border-radius != 0 {
|
||||
border-radius: $form-border-radius;
|
||||
}
|
||||
@if $form-margin != 0 {
|
||||
margin: $form-margin;
|
||||
}
|
||||
@if $form-padding != 0 {
|
||||
padding: $form-padding;
|
||||
}
|
||||
@if $form-back-color != $back-color {
|
||||
background: $form-back-color;
|
||||
}
|
||||
@if $form-fore-color != $fore-color {
|
||||
color: $form-fore-color;
|
||||
}
|
||||
@if $form-border-style != 0 {
|
||||
border: $form-border-style;
|
||||
}
|
||||
@if $form-border-radius != 0 {
|
||||
border-radius: $form-border-radius;
|
||||
}
|
||||
@if $form-margin != 0 {
|
||||
margin: $form-margin;
|
||||
}
|
||||
@if $form-padding != 0 {
|
||||
padding: $form-padding;
|
||||
}
|
||||
}
|
||||
// Fieldset styling.
|
||||
fieldset {
|
||||
@if $fieldset-back-color != $form-back-color {
|
||||
background: $fieldset-back-color;
|
||||
}
|
||||
border: $fieldset-border-style;
|
||||
@if $fieldset-back-color != $form-back-color {
|
||||
background: $fieldset-back-color;
|
||||
}
|
||||
// Apply always to overwrite defaults for all of the below.
|
||||
border: $fieldset-border-style;
|
||||
border-radius: $fieldset-border-radius;
|
||||
// Margin and padding should never be unassigned, because browser defaults will be applied.
|
||||
margin: $fieldset-margin;
|
||||
padding: $fieldset-padding;
|
||||
}
|
||||
@@ -42,12 +42,12 @@ legend {
|
||||
// Actual styling.
|
||||
font-weight: $legend-font-weight;
|
||||
font-size: $legend-font-size;
|
||||
@if $legend-fore-color != $fore-color {
|
||||
color: $legend-fore-color;
|
||||
}
|
||||
@if $legend-padding != 0 {
|
||||
padding: $legend-padding;
|
||||
}
|
||||
@if $legend-fore-color != $fore-color {
|
||||
color: $legend-fore-color;
|
||||
}
|
||||
@if $legend-padding != 0 {
|
||||
padding: $legend-padding;
|
||||
}
|
||||
}
|
||||
// Input group base naming.
|
||||
.#{$input-group-name} {
|
||||
@@ -55,21 +55,21 @@ legend {
|
||||
}
|
||||
// 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;
|
||||
height: auto;
|
||||
}
|
||||
// Remove the default vertical scrollbar in IE.
|
||||
textarea {
|
||||
overflow: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
// Correct style in Chrome and Safari.
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
-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;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
// Common textual input styling.
|
||||
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;
|
||||
color: $input-fore-color;
|
||||
border: $input-border-style;
|
||||
@if $input-border-radius != 0 {
|
||||
border-radius: $input-border-radius;
|
||||
}
|
||||
@if $input-margin != 0 {
|
||||
margin: $input-margin;
|
||||
}
|
||||
@if $input-padding != 0 {
|
||||
padding: $input-padding;
|
||||
}
|
||||
&:focus {
|
||||
border-color: $input-focus-border-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: $input-disabled-opacity;
|
||||
}
|
||||
&:invalid, &:focus:invalid, &:focus:invalid:focus{
|
||||
border-color: $input-invalid-border-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
&[readonly]{
|
||||
background: $input-readonly-back-color;
|
||||
border-color: $input-readonly-border-color;
|
||||
}
|
||||
@if $input-border-radius != 0 {
|
||||
border-radius: $input-border-radius;
|
||||
}
|
||||
@if $input-margin != 0 {
|
||||
margin: $input-margin;
|
||||
}
|
||||
@if $input-padding != 0 {
|
||||
padding: $input-padding;
|
||||
}
|
||||
&:focus {
|
||||
border-color: $input-focus-border-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: $input-disabled-opacity;
|
||||
}
|
||||
&:invalid, &:focus:invalid, &:focus:invalid:focus{
|
||||
border-color: $input-invalid-border-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
&[readonly]{
|
||||
background: $input-readonly-back-color;
|
||||
border-color: $input-readonly-border-color;
|
||||
}
|
||||
}
|
||||
// Placeholder styling.
|
||||
::-webkit-placeholder {
|
||||
|
||||
@@ -23,7 +23,7 @@ tr {
|
||||
th, td {
|
||||
padding: $table-column-padding; // Apply always to overwrite default.
|
||||
border-left: $table-border-style;
|
||||
border-top: $table-border-style;
|
||||
border-top: $table-border-style;
|
||||
}
|
||||
th {
|
||||
border-top: 0;
|
||||
@@ -44,13 +44,13 @@ th:first-child, td:first-child {
|
||||
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%);
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
}
|
||||
tr {
|
||||
display: block;
|
||||
@@ -58,7 +58,7 @@ th:first-child, td:first-child {
|
||||
@if $table-border-radius != 0 {
|
||||
border-radius: $table-border-radius;
|
||||
}
|
||||
margin-bottom: $table-mobile-card-spacing;
|
||||
margin-bottom: $table-mobile-card-spacing;
|
||||
}
|
||||
td {
|
||||
display: block;
|
||||
@@ -66,12 +66,12 @@ th:first-child, td:first-child {
|
||||
@if $table-border-style != 0 {
|
||||
border-bottom: $table-border-style;
|
||||
}
|
||||
text-align: right;
|
||||
text-align: right;
|
||||
}
|
||||
td:before {
|
||||
content: attr(#{$table-mobile-card-label});
|
||||
float: left;
|
||||
font-weight: $table-mobile-label-font-weight;
|
||||
float: left;
|
||||
font-weight: $table-mobile-label-font-weight;
|
||||
}
|
||||
td:last-child {
|
||||
@if $table-border-style != 0 {
|
||||
|
||||
Reference in New Issue
Block a user