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

Updated to input control module (colors and values)

Browse source
This commit is contained in:
Angelos Chalaris 2016-12-05 13:41:35 +02:00
parent 51bb70d93b
commit d83b9782d1
6 changed files with 42 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
dist/mini-default.css vendored
View file

@ -588,18 +588,17 @@ footer {
color: #039be5; }
form {
background: #eceff1;
border: 1px solid #90a4ae;
border-radius: 2px;
background: #eeeeee;
border: 1px solid #bdbdbd;
margin: 8px;
padding: 8px;
padding: 12px 10px 18px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15); }
fieldset {
border: 1px solid #b0bec5;
border-radius: 1px;
margin: 0;
padding: 4px 6px 8px; }
border: 1px solid #bdbdbd;
border-radius: 2px;
margin: 2px;
padding: 6px 8px 8px; }
legend {
box-sizing: border-box;
@ -607,8 +606,8 @@ legend {
max-width: 100%;
white-space: normal;
font-weight: 700;
font-size: 0.85em;
padding: 4px; }
font-size: 0.925em;
padding: 2px 4px; }
.input-group {
display: inline-block; }
@ -632,10 +631,10 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
box-sizing: border-box;
background: #f5f5f5;
color: #212121;
border: 1px solid #b0bec5;
border: 1px solid #bdbdbd;
border-radius: 1px;
margin: 2px;
padding: 6px 8px; }
padding: 8px 12px; }
input:not([type]):focus, [type="text"]:focus, [type="email"]:focus, [type="number"]:focus, [type="search"]:focus,
[type="password"]:focus, [type="url"]:focus, [type="tel"]:focus, textarea:focus, select:focus {
border-color: #0288d1;
@ -652,17 +651,18 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
box-shadow: none; }
input:not([type])[readonly], [type="text"][readonly], [type="email"][readonly], [type="number"][readonly], [type="search"][readonly],
[type="password"][readonly], [type="url"][readonly], [type="tel"][readonly], textarea[readonly], select[readonly] {
background: #eceff1;
border-color: #90a4ae; }
background: #e0e0e0;
border-color: #bdbdbd; }
::-webkit-placeholder {
color: #37474f; }
::-webkit-input-placeholder {
color: #616161; }
::-moz-placeholder {
color: #37474f; }
opacity: 1;
color: #616161; }
::-ms-placeholder {
color: #37474f; }
color: #616161; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
border-style: none;
@ -757,7 +757,7 @@ input[type="file"] {
width: 17px;
height: 17px;
content: '';
border: 1px solid #b0bec5;
border: 1px solid #bdbdbd;
border-radius: 1px;
background: #f5f5f5;
color: #212121;

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

File diff suppressed because one or more lines are too long

2
docs/v2/DEVLOG.md
View file

@ -591,3 +591,5 @@
- `playground` cleanup, readying for the rest of the modules to be tested and documented.
- Added empty `input_control.html` documentation page for the module of the same name.
- Basic structure for `input_control` module's doc page.
- Updated color definitions for almost all the `input_control` `form` elements.
- Changed the `placeholder` rules a little bit to work properly for all elements now.

2
docs/v2/input_control.html
View file

@ -94,7 +94,7 @@
<main><div class="container">
<div class="row" style="padding-top: 40px;">
<div class="col-sm">
<h1>Card</h1>
<h1>Input Control</h1>
<p>The <strong>input_control</strong> module contains rules that affect forms, input elements, buttons, checkboxes and radio buttons. All of these elements's styles are predefined, allowing you to create modern, responsive forms quickly. Layout alternatives are also provided if you want your forms to look a certain way.</p>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p>
<ul class="breadcrumbs"><li><a href="index.html">Home</a></li><li><a href="modules.html">Modules</a></li><li>Input Control</li></ul>

30
src/flavors/mini-default.scss
View file

@ -179,36 +179,36 @@ $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 forms and inputs
$form-back-color: #eceff1; // Background color for forms
$form-back-color: #eeeeee; // Background color for forms
$form-fore-color: $fore-color; // Text color for forms
$form-border-style: 1px solid #90a4ae; // Border style for forms
$form-border-radius: 2px; // Border radius for forms
$form-border-style: 1px solid #bdbdbd; // Border style for forms
$form-border-radius: 0; // Border radius for forms
$form-margin: 8px; // Margin for forms
$form-padding: 8px; // Padding for forms
$form-padding: 12px 10px 18px; // Padding for forms
$form-box-shadow: // Box shadow for forms
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
$fieldset-back-color: $form-back-color; // Background color for fieldset
$fieldset-border-style: 1px solid #b0bec5; // Border style for fieldset
$fieldset-border-radius: 1px; // Border radius for fieldset
$fieldset-margin: 0; // Margin for fieldset
$fieldset-padding: 4px 6px 8px; // Padding for fieldset
$fieldset-border-style: 1px solid #bdbdbd; // Border style for fieldset
$fieldset-border-radius: 2px; // Border radius for fieldset
$fieldset-margin: 2px; // Margin for fieldset
$fieldset-padding: 6px 8px 8px; // Padding for fieldset
$legend-font-weight: $bold-font-weight; // Font weight for legend
$legend-font-size: 0.85em; // Font size for legend
$legend-font-size: 0.925em; // Font size for legend
$legend-fore-color: $form-fore-color; // Text color for legend
$legend-padding: 4px; // Padding for legend
$legend-padding: 2px 4px; // Padding for legend
$input-group-name: 'input-group'; // Class for input groups
$input-back-color: $back-color; // Background for input
$input-fore-color: $fore-color; // Text color for input
$input-border-style: 1px solid #b0bec5; // Border style for input
$input-border-style: 1px solid #bdbdbd; // Border style for input
$input-border-radius: 1px; // Border radius for input
$input-margin: 2px; // Margin for input
$input-padding: 6px 8px; // padding for input
$input-padding: 8px 12px; // padding for input
$input-focus-border-color: #0288d1; // Border color for focused input
$input-invalid-border-color: #d32f2f; // Border color for invalid input
$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
$input-readonly-back-color: #e0e0e0; // Background color for readonly input
$input-readonly-border-color: #bdbdbd; // Border color for readonly input
$input-placeholder-fore-color: #616161; // Text color for input placeholder
$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

5
src/mini/_input_control.scss
View file

@ -109,13 +109,16 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
}
}
// Placeholder styling.
::-webkit-placeholder {
::-webkit-input-placeholder {
opacity: 1;
color: $input-placeholder-fore-color;
}
::-moz-placeholder {
opacity: 1;
color: $input-placeholder-fore-color;
}
::-ms-placeholder {
opacity: 1;
color: $input-placeholder-fore-color;
}
// Definitions for the button and button-like elements.