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

Bootstrap flavor - forms

Browse Source
This commit is contained in:
Angelos Chalaris
2016-10-08 12:37:09 +03:00
parent 9594c9b25e
commit c81e997592
3 changed files with 46 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
flavors/mini-bootstrap.css
View File

@@ -781,52 +781,52 @@ textarea {
- [1] : Input elements with button-like style (i.e. submit, reset, button etc.) are not affected by form styling.
Please use the button styles and mixins provided to properly style them to your liking.
*/
.frm input[type="color"], .frm input[type^="date"], .frm input[type$="time"], .frm input[type="email"],
.frm input[type="month"], .frm input[type="week"], .frm input[type="text"], .frm input[type="password"],
.frm input[type="url"], .frm input[type="number"], .frm input[type="search"], .frm input[type="tel"],
.frm select, .frm textarea {
.form input[type="color"], .form input[type^="date"], .form input[type$="time"], .form input[type="email"],
.form input[type="month"], .form input[type="week"], .form input[type="text"], .form input[type="password"],
.form input[type="url"], .form input[type="number"], .form input[type="search"], .form input[type="tel"],
.form select, .form textarea {
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: none; }
.frm input:not([type]) {
.form input:not([type]) {
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: none; }
.frm input, .frm select, .frm textarea {
.form input, .form select, .form textarea {
display: block;
margin: 0.2em;
padding: 0.3em; }
.frm input:focus, .frm select:focus, .frm textarea:focus {
border-color: #2678b3; }
.frm input[disabled], .frm select[disabled], .frm textarea[disabled] {
margin: 0;
padding: 6px 12px; }
.form input:focus, .form select:focus, .form textarea:focus {
border-color: #66afe9; }
.form input[disabled], .form select[disabled], .form textarea[disabled] {
cursor: not-allowed;
opacity: 0.65; }
.frm input:invalid, .frm input:focus:invalid, .frm input:focus:invalid:focus, .frm select:invalid, .frm select:focus:invalid, .frm select:focus:invalid:focus, .frm textarea:invalid, .frm textarea:focus:invalid, .frm textarea:focus:invalid:focus {
border-color: #e9322d; }
.frm input[readonly], .frm select[readonly], .frm textarea[readonly] {
.form input:invalid, .form input:focus:invalid, .form input:focus:invalid:focus, .form select:invalid, .form select:focus:invalid, .form select:focus:invalid:focus, .form textarea:invalid, .form textarea:focus:invalid, .form textarea:focus:invalid:focus {
border-color: #a94442; }
.form input[readonly], .form select[readonly], .form textarea[readonly] {
background-color: #e6e6e6;
border-color: #bfbfbf; }
.frm input[type="checkbox"], .frm input[type="radio"] {
.form input[type="checkbox"], .form input[type="radio"] {
display: inline-block; }
.frm select {
height: 1.9em; }
.frm select[multiple] {
.form select {
height: 34px; }
.form select[multiple] {
height: auto; }
.frm label {
margin: 0.5em 0 0 0.2em; }
.frm.inline input, .frm.inline select, .frm.inline textarea, .frm.inline label, .frm.aligned input, .frm.aligned select, .frm.aligned textarea, .frm.aligned label {
.form label {
margin: 0 0 5px 0; }
.form.form-inline input, .form.form-inline select, .form.form-inline textarea, .form.form-inline label, .form.form-horizontal input, .form.form-horizontal select, .form.form-horizontal textarea, .form.form-horizontal label {
display: inline-block; }
.frm.inline .ctrl-group {
.form.form-inline .ctrl-group {
display: inline-block; }
.frm.aligned .ctrl-group label {
.form.form-horizontal .form-group label {
text-align: right;
vertical-align: middle;
width: 15em;
width: 20%;
margin-top: 0; }
.frm .ctrl-group {
margin: 0 0 0.3em 0; }
.form .form-group {
margin: 0 0 15px 0; }
/*
Mixin for the tables.

2
flavors/mini-bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

24
flavors/mini-bootstrap.scss
View File

@@ -117,6 +117,7 @@ $fieldset-padding: 0; // Padding for fieldset
// Button border is built using utility module's generic mixin.
// Buttons differ from Bootstrap's in terms of line height.
// Button size variant font sizes are approximate.
// `btn-link` is not supported.
// -------------------
$btn-default-color: $body-color; // Default text color for buttons
$btn-alt-color: $body-bg-color; // Alternative text color for buttons
@@ -184,16 +185,29 @@ $grid-large-breakpoint: 1200px; // Breakpoint for medium to large de
// Variable definitions for the Form module (_form.scss)
//====================================================================
// Class names for the forms and components
$form-class-name: frm; // Name for the form class
$form-control-group-name: ctrl-group; // Name for the form's control group class
// --- NOTES: ---
// Basic styling is applied to forms using the .form class. The usual
// mini.css syntax should be used instead of the Bootstrap syntax.
// .form-group is not supported inside .form-inline.
// .form-control-static, .has-error, .has-warning, .has-success are not
// supported.
// No class is provided for .control-label and subsequently no styling.
// Focus and invalid borders are styled approximately.
// The width of the left column (label) of horizontal forms is preset to
// 20%.
// Some other functionalities are not supported as they are considered
// unimportant for the time being.
// -------------------
$form-class-name: form; // Name for the form class
$form-control-group-name: form-group; // Name for the form's control group class
// Colors for form components
$form-focus-color: #2678b3; // Color for focused form element outline
$form-invalid-color: #e9322d; // Color for invalid form element outline
$form-focus-color: #66afe9; // Color for focused form element outline
$form-invalid-color: #a94442; // Color for invalid form element outline
// Enable forms (_form.scss). (Use individual mixins below to use.)
@import '../scss/mini/form';
// Use form mixin to create form with given specs. For more information
// refer to the _form.scss file to check the definitions.
@include make-frm($form-class-name, 1px solid #ccc, 4px, 0.2em, 0.3em, $form-focus-color, $form-invalid-color, not-allowed, .65, darken($body-bg-color,10%), darken($body-bg-color,25%), 1.9em, 0.5em 0 0 0.2em, $form-control-group-name, 0 0 0.3em 0, inline, aligned,15em);
@include make-frm($form-class-name, 1px solid #ccc, 4px, 0, 6px 12px, $form-focus-color, $form-invalid-color, not-allowed, .65, darken($body-bg-color,10%), darken($body-bg-color,25%), 34px, 0 0 5px 0, $form-control-group-name, 0 0 15px 0, form-inline, form-horizontal, 20%);
//====================================================================
// Variable definitions for the Table module (_table.scss)
//====================================================================