Merged form, button and checkbox into input_control
This commit is contained in:
Angelos Chalaris
parent
8cb6329a41
commit
4e38200448
10 changed files with 405 additions and 409 deletions
96
dist/mini-default.css
vendored
96
dist/mini-default.css
vendored
|
|
@ -622,54 +622,6 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
|
|||
::-ms-placeholder {
|
||||
color: #37474f; }
|
||||
|
||||
header {
|
||||
display: block;
|
||||
height: 36px;
|
||||
background: #263238;
|
||||
color: #fafafa;
|
||||
padding: 2px 8px;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden; }
|
||||
header .logo {
|
||||
color: #fafafa;
|
||||
font-size: 1.75em;
|
||||
line-height: 1.2;
|
||||
margin: 1px 6px 1px 1px; }
|
||||
header button, header [type="button"], header a.button, header label.button, header .button {
|
||||
background: #263238;
|
||||
color: #fafafa;
|
||||
vertical-align: top;
|
||||
margin: 2px 0 0; }
|
||||
header button:hover, header button:active, header button:focus, header [type="button"]:hover, header [type="button"]:active, header [type="button"]:focus, header a.button:hover, header a.button:active, header a.button:focus, header label.button:hover, header label.button:active, header label.button:focus, header .button:hover, header .button:active, header .button:focus {
|
||||
background: #37474f; }
|
||||
header .logo, header a.button {
|
||||
text-decoration: none; }
|
||||
|
||||
nav {
|
||||
display: block;
|
||||
background: #eceff1;
|
||||
border-radius: 1px;
|
||||
margin: 2px;
|
||||
padding: 4px 4px 4px 16px; }
|
||||
nav a, nav a:visited {
|
||||
display: block;
|
||||
color: #0277bd; }
|
||||
nav .sublink-1 {
|
||||
padding-left: 12px; }
|
||||
nav .sublink-2 {
|
||||
padding-left: 24px; }
|
||||
|
||||
footer {
|
||||
display: block;
|
||||
background: #263238;
|
||||
color: #fafafa;
|
||||
margin: 18px 0 0;
|
||||
padding: 22px 10px 12px;
|
||||
font-size: 85%; }
|
||||
footer a, footer a:visited {
|
||||
color: #039be5; }
|
||||
|
||||
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0; }
|
||||
|
|
@ -759,6 +711,54 @@ input[type="file"] {
|
|||
background: #212121;
|
||||
content: ''; }
|
||||
|
||||
header {
|
||||
display: block;
|
||||
height: 36px;
|
||||
background: #263238;
|
||||
color: #fafafa;
|
||||
padding: 2px 8px;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden; }
|
||||
header .logo {
|
||||
color: #fafafa;
|
||||
font-size: 1.75em;
|
||||
line-height: 1.2;
|
||||
margin: 1px 6px 1px 1px; }
|
||||
header button, header [type="button"], header a.button, header label.button, header .button {
|
||||
background: #263238;
|
||||
color: #fafafa;
|
||||
vertical-align: top;
|
||||
margin: 2px 0 0; }
|
||||
header button:hover, header button:active, header button:focus, header [type="button"]:hover, header [type="button"]:active, header [type="button"]:focus, header a.button:hover, header a.button:active, header a.button:focus, header label.button:hover, header label.button:active, header label.button:focus, header .button:hover, header .button:active, header .button:focus {
|
||||
background: #37474f; }
|
||||
header .logo, header a.button {
|
||||
text-decoration: none; }
|
||||
|
||||
nav {
|
||||
display: block;
|
||||
background: #eceff1;
|
||||
border-radius: 1px;
|
||||
margin: 2px;
|
||||
padding: 4px 4px 4px 16px; }
|
||||
nav a, nav a:visited {
|
||||
display: block;
|
||||
color: #0277bd; }
|
||||
nav .sublink-1 {
|
||||
padding-left: 12px; }
|
||||
nav .sublink-2 {
|
||||
padding-left: 24px; }
|
||||
|
||||
footer {
|
||||
display: block;
|
||||
background: #263238;
|
||||
color: #fafafa;
|
||||
margin: 18px 0 0;
|
||||
padding: 22px 10px 12px;
|
||||
font-size: 85%; }
|
||||
footer a, footer a:visited {
|
||||
color: #039be5; }
|
||||
|
||||
mark {
|
||||
background: #0277bd;
|
||||
color: #fafafa;
|
||||
|
|
|
|||
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
|
|
@ -386,3 +386,4 @@
|
|||
- Code cleanup in `form`.
|
||||
- Code cleanup in `button`. Updated `file` `input`s to be accessible.
|
||||
- Code cleanup in `checkbox`. Optimizations.
|
||||
- Restructured `form`, `button` and `checkbox` into one module: `input_control`. Made necessary changes for this to work properly.
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<!-- Live demo styled as of 20161109 -->
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/aa78a8f3c592252861c254ebb08cc81482e85135/dist/mini-default.min.css">
|
||||
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/aa78a8f3c592252861c254ebb08cc81482e85135/dist/mini-default.min.css"> -->
|
||||
<link rel="stylesheet" href="../../dist/mini-default.min.css">
|
||||
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>
|
||||
<meta charset="utf-8">
|
||||
|
|
|
|||
|
|
@ -141,7 +141,7 @@ $table-mobile-label-font-weight:$bold-font-weight; // Font weight for mob
|
|||
// Notes:
|
||||
// [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table
|
||||
// in order for their mobile headers to display properly.
|
||||
// Variables for forms and textual inputs
|
||||
// Variables for forms and inputs
|
||||
$form-back-color: #eceff1; // Background color for forms
|
||||
$form-fore-color: $fore-color; // Text color for forms
|
||||
$form-border-style: 1px solid #90a4ae; // Border style for forms
|
||||
|
|
@ -170,36 +170,6 @@ $input-disabled-opacity: 0.75; // Opacity for disabled input
|
|||
$input-readonly-back-color: #eceff1; // Background color for readonly input
|
||||
$input-readonly-border-color: #90a4ae; // Border color for readonly input
|
||||
$input-placeholder-fore-color: #37474f; // Text color for input placeholder
|
||||
// Variables for navigational elements
|
||||
$header-height: 36px; // Height for header
|
||||
$header-back-color: #263238; // Background color for header
|
||||
$header-fore-color: $back-color; // Text color for header
|
||||
$header-margin: 0; // Margin for header
|
||||
$header-padding: 2px 8px; // Padding for header
|
||||
$header-logo-name: 'logo'; // Class name for header's logo
|
||||
$header-logo-font-size: 1.75em; // Font size for header's logo
|
||||
$header-logo-line-height: 1.2; // Line height for header's logo
|
||||
$header-logo-margin: 1px 6px 1px 1px; // Margin for header's logo
|
||||
$header-logo-padding: 0; // Padding for header's logo
|
||||
$header-link-hover-color: #37474f; // Hover color for header's links
|
||||
$header-link-margin: 2px 0 0; // Margin for header's links
|
||||
$nav-back-color: #eceff1; // Background for nav
|
||||
$nav-fore-color: $fore-color; // Text color for nav
|
||||
$nav-border-style: 0; // Border style for nav
|
||||
$nav-border-radius: 1px; // Border radius for nav
|
||||
$nav-padding: 4px 4px 4px 16px; // Padding for nav
|
||||
$nav-margin: 2px; // Margin for nav
|
||||
$nav-link-fore-color: $link-fore-color; // Text color for links in nav
|
||||
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in nav
|
||||
$nav-sublink-depth: 2; // Amount of subcategory classes to add
|
||||
$nav-sublink-padding-left: 12px; // Left padding to add to subcategories
|
||||
$footer-back-color: #263238; // Background color for footer
|
||||
$footer-fore-color: $back-color; // Text color for footer
|
||||
$footer-font-size: 85%; // Font size for footer
|
||||
$footer-margin: 18px 0 0; // Margin for footer
|
||||
$footer-padding: 22px 10px 12px; // Padding for footer
|
||||
$footer-link-fore-color: #039be5; // Text color for links in footer
|
||||
// Variables for button elements
|
||||
$button-back-color: #cfd8dc; // Back color for button elements
|
||||
$button-back-opacity: 0.75; // Background opacity for button elements
|
||||
$button-hover-back-opacity: 1; // Background opacity for button elements
|
||||
|
|
@ -251,21 +221,48 @@ $button-style2-margin: 7px; // Margin for button style 2
|
|||
//$button-custom-border-radius: 0; // Custom button border radius
|
||||
//$button-custom-padding: 6px 8px; // Custom button padding
|
||||
//$button-custom-margin: 4px; // Custom button margin
|
||||
// Notes:
|
||||
// [1] - If the value of $hide-file-inputs is `true`, all <input type="file"> elements will be hidden and the only way
|
||||
// to access them is via the use of <label> elements that are linked to them. This option is enabled by default to
|
||||
// allow for universal button styles, even for file input buttons, but can be disabled if the base style is desired.
|
||||
// If the value is `false`, some fixes will be applied to the <input type="file"> element.
|
||||
// Variables for checkboxes and radio buttons
|
||||
$checkbox-size: 17px; // Size for checkbox/radio [1]
|
||||
$checkbox-size: 17px; // Size for checkbox/radio [2]
|
||||
$checkbox-back-color: $input-back-color; // Background clor for checkbox/radio
|
||||
$checkbox-fore-color: $input-fore-color; // Text/mark color for checkbox/radio
|
||||
$checkbox-border-style: $input-border-style; // Border style for checkbox/radio
|
||||
$checkbox-border-radius: $input-border-radius; // Border radius for checkbox/radio
|
||||
$checkbox-focus-border-color: $input-focus-border-color; // Border color for checkbox/radio on focus
|
||||
$checkbox-disabled-opacity: $input-disabled-opacity; // Opacity for disabled checkbox/radio
|
||||
// Notes:
|
||||
// [1] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
|
||||
// Notes:
|
||||
// [1] - If the value of $hide-file-inputs is `true`, all <input type="file"> elements will be hidden and the only way
|
||||
// to access them is via the use of <label> elements that are linked to them. This option is enabled by default to
|
||||
// allow for universal button styles, even for file input buttons, but can be disabled if the base style is desired.
|
||||
// If the value is `false`, some fixes will be applied to the <input type="file"> element.
|
||||
// [2] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
|
||||
// Variables for navigational elements
|
||||
$header-height: 36px; // Height for header
|
||||
$header-back-color: #263238; // Background color for header
|
||||
$header-fore-color: $back-color; // Text color for header
|
||||
$header-margin: 0; // Margin for header
|
||||
$header-padding: 2px 8px; // Padding for header
|
||||
$header-logo-name: 'logo'; // Class name for header's logo
|
||||
$header-logo-font-size: 1.75em; // Font size for header's logo
|
||||
$header-logo-line-height: 1.2; // Line height for header's logo
|
||||
$header-logo-margin: 1px 6px 1px 1px; // Margin for header's logo
|
||||
$header-logo-padding: 0; // Padding for header's logo
|
||||
$header-link-hover-color: #37474f; // Hover color for header's links
|
||||
$header-link-margin: 2px 0 0; // Margin for header's links
|
||||
$nav-back-color: #eceff1; // Background for nav
|
||||
$nav-fore-color: $fore-color; // Text color for nav
|
||||
$nav-border-style: 0; // Border style for nav
|
||||
$nav-border-radius: 1px; // Border radius for nav
|
||||
$nav-padding: 4px 4px 4px 16px; // Padding for nav
|
||||
$nav-margin: 2px; // Margin for nav
|
||||
$nav-link-fore-color: $link-fore-color; // Text color for links in nav
|
||||
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in nav
|
||||
$nav-sublink-depth: 2; // Amount of subcategory classes to add
|
||||
$nav-sublink-padding-left: 12px; // Left padding to add to subcategories
|
||||
$footer-back-color: #263238; // Background color for footer
|
||||
$footer-fore-color: $back-color; // Text color for footer
|
||||
$footer-font-size: 85%; // Font size for footer
|
||||
$footer-margin: 18px 0 0; // Margin for footer
|
||||
$footer-padding: 22px 10px 12px; // Padding for footer
|
||||
$footer-link-fore-color: #039be5; // Text color for links in footer
|
||||
// Variables for contextual background elements
|
||||
$mark-back-color: #0277bd; // Background color for <mark>
|
||||
$mark-fore-color: $back-color; // Text color for <mark>
|
||||
|
|
|
|||
|
|
@ -1,122 +0,0 @@
|
|||
// 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.
|
||||
}
|
||||
// Default styling
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
// Styling for file inputs
|
||||
$hide-file-inputs: true !default;
|
||||
@if $hide-file-inputs {
|
||||
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.
|
||||
}
|
||||
}
|
||||
// Mixin for alternate buttons (button color variants).
|
||||
// Variables:
|
||||
// - $button-alt-name : The name of the class used for the alternate button.
|
||||
// - $button-alt-back-color : The background color of the alternate button.
|
||||
// - $button-alt-back-opacity : Opacity of the background color of the alternate button.
|
||||
// - $button-alt-hover-back-opacity : Opacity of the background color of the alternate button on hover.
|
||||
// - $button-alt-fore-color : (Optional) The text color of the alternate button. Defaults to the text color of the button.
|
||||
// Notes:
|
||||
// Due to something like `.button.secondary` being a higher specificity than `a.button` or `a`, no extra rules are
|
||||
// required for such elements. However rules for the normal button elements are applied in order to not require the
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate button styles (button color variants).
|
||||
// Variables:
|
||||
// - $button-alt-name : The name of the class used for the alternate button style.
|
||||
// - $button-alt-border-style : The border style of the alternate button style.
|
||||
// - $button-alt-border-radius : Border radius of the alternate button style.
|
||||
// - $button-alt-padding : Padding of the alternate button style.
|
||||
// - $button-alt-margin : Margin of the alternate button style.
|
||||
// Notes:
|
||||
// Due to something like `.button.small` being a higher specificity than `a.small` or `a`, no extra rules are
|
||||
// required for such elements. However rules for the normal button elements are applied in order to not require the
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
// Definitions for checkboxes and radio button elements.
|
||||
// Note: both elements are hidden by default and use labels to show their input state.
|
||||
// Hide both input types - accessible (element is not visible, but screen readers read it normally).
|
||||
[type="checkbox"], [type="radio"] {
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
-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: '';
|
||||
@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: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -350,10 +350,8 @@ a{
|
|||
// External file loading. You can comment out modules you do not want to use.
|
||||
@import 'grid';
|
||||
@import 'table';
|
||||
@import 'form';
|
||||
@import 'input_control';
|
||||
@import 'navigation';
|
||||
@import 'button';
|
||||
@import 'checkbox';
|
||||
@import 'contextual';
|
||||
@import 'progress';
|
||||
@import 'utility';
|
||||
|
|
|
|||
|
|
@ -1,117 +0,0 @@
|
|||
// Definitions for forms and input elements.
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
// Fieldset styling.
|
||||
fieldset {
|
||||
@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: $fieldset-margin;
|
||||
padding: $fieldset-padding;
|
||||
}
|
||||
// Legend styling.
|
||||
legend {
|
||||
// IE and Edge fixes.
|
||||
box-sizing: border-box;
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
// Input group base naming.
|
||||
.#{$input-group-name} {
|
||||
display: inline-block;
|
||||
}
|
||||
// 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;
|
||||
}
|
||||
// Remove the default vertical scrollbar in IE.
|
||||
textarea {
|
||||
overflow: 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.
|
||||
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: $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;
|
||||
}
|
||||
}
|
||||
// Placeholder styling.
|
||||
::-webkit-placeholder {
|
||||
color: $input-placeholder-fore-color;
|
||||
}
|
||||
::-moz-placeholder {
|
||||
color: $input-placeholder-fore-color;
|
||||
}
|
||||
::-ms-placeholder {
|
||||
color: $input-placeholder-fore-color;
|
||||
}
|
||||
316
src/mini/_input_control.scss
Normal file
316
src/mini/_input_control.scss
Normal file
|
|
@ -0,0 +1,316 @@
|
|||
// Definitions for forms and input elements.
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
// Fieldset styling.
|
||||
fieldset {
|
||||
@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: $fieldset-margin;
|
||||
padding: $fieldset-padding;
|
||||
}
|
||||
// Legend styling.
|
||||
legend {
|
||||
// IE and Edge fixes.
|
||||
box-sizing: border-box;
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
// Input group base naming.
|
||||
.#{$input-group-name} {
|
||||
display: inline-block;
|
||||
}
|
||||
// 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;
|
||||
}
|
||||
// Remove the default vertical scrollbar in IE.
|
||||
textarea {
|
||||
overflow: 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.
|
||||
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: $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;
|
||||
}
|
||||
}
|
||||
// Placeholder styling.
|
||||
::-webkit-placeholder {
|
||||
color: $input-placeholder-fore-color;
|
||||
}
|
||||
::-moz-placeholder {
|
||||
color: $input-placeholder-fore-color;
|
||||
}
|
||||
::-ms-placeholder {
|
||||
color: $input-placeholder-fore-color;
|
||||
}
|
||||
// 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.
|
||||
}
|
||||
// Default styling
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
// Styling for file inputs
|
||||
$hide-file-inputs: true !default;
|
||||
@if $hide-file-inputs {
|
||||
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.
|
||||
}
|
||||
}
|
||||
// Mixin for alternate buttons (button color variants).
|
||||
// Variables:
|
||||
// - $button-alt-name : The name of the class used for the alternate button.
|
||||
// - $button-alt-back-color : The background color of the alternate button.
|
||||
// - $button-alt-back-opacity : Opacity of the background color of the alternate button.
|
||||
// - $button-alt-hover-back-opacity : Opacity of the background color of the alternate button on hover.
|
||||
// - $button-alt-fore-color : (Optional) The text color of the alternate button. Defaults to the text color of the button.
|
||||
// Notes:
|
||||
// Due to something like `.button.secondary` being a higher specificity than `a.button` or `a`, no extra rules are
|
||||
// required for such elements. However rules for the normal button elements are applied in order to not require the
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate button styles (button color variants).
|
||||
// Variables:
|
||||
// - $button-alt-name : The name of the class used for the alternate button style.
|
||||
// - $button-alt-border-style : The border style of the alternate button style.
|
||||
// - $button-alt-border-radius : Border radius of the alternate button style.
|
||||
// - $button-alt-padding : Padding of the alternate button style.
|
||||
// - $button-alt-margin : Margin of the alternate button style.
|
||||
// Notes:
|
||||
// Due to something like `.button.small` being a higher specificity than `a.small` or `a`, no extra rules are
|
||||
// required for such elements. However rules for the normal button elements are applied in order to not require the
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Definitions for checkboxes and radio button elements.
|
||||
// Note: both elements are hidden by default and use labels to show their input state.
|
||||
// Hide both input types - accessible (element is not visible, but screen readers read it normally).
|
||||
[type="checkbox"], [type="radio"] {
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
-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: '';
|
||||
@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: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue