/* ------------------------------------------------------------------------------
*
* # Uniform form inputs plugin
*
* Styles for uniform.min.js - form components styling
*
* Version: 1.0
* Latest update: Mar 10, 2015
*
* ---------------------------------------------------------------------------- */
// Chckbox
// ------------------------------
// Base
.checker {
position: relative;
display: inline-block;
cursor: pointer;
vertical-align: middle;
// Set general size
&,
span,
input {
width: @checkbox-size;
height: @checkbox-size;
}
// Checkbox setup
span {
color: @color-slate-700;
border: @checkbox-border-width solid @color-slate-500;
display: inline-block;
text-align: center;
position: relative;
// Checkmark icon
&:after {
content: "\e600";
font-family: 'icomoon';
display: none;
font-size: @icon-font-size;
line-height: 1;
position: absolute;
top: (@checkbox-size - @icon-font-size - (@checkbox-border-width * 2)) / 2;
left: (@checkbox-size - @icon-font-size - (@checkbox-border-width * 2)) / 2;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// Checked style
&.checked {
&:after {
display: block;
}
}
}
// Hide original checkbox
input[type=checkbox] {
border: none;
background: none;
display: -moz-inline-box;
display: inline-block;
margin: 0;
vertical-align: top;
cursor: pointer;
position: absolute;
top: -(@checkbox-border-width);
left: -(@checkbox-border-width);
z-index: 2;
.opacity(0);
}
//
// Posiitons
//
// Left checkbox
.checkbox &,
.checkbox-inline & {
position: absolute;
top: ((@line-height-computed - @checkbox-size) / 2);
left: 0;
}
// Horizontal form correction
.form-horizontal .checkbox &,
.form-horizontal .checkbox-inline & {
top: ((@padding-base-vertical + 1) + (@line-height-computed / 2) - (@checkbox-size / 2));
}
// Right checkbox
.checkbox-right & {
left: auto;
right: 0;
}
//
// States
//
// Active state
&.active,
.checkbox > label:active &,
.checkbox-inline:active & {
span {
&:after {
display: block;
.opacity(0.75);
}
}
}
// Disabled
&.disabled {
.opacity(0.5);
// Disable cursor
&,
input[type=checkbox] {
cursor: @cursor-disabled;
}
// When label is clicked
.checkbox > label:active &,
.checkbox-inline:active & {
span:after {
.opacity(0);
}
span.checked:after {
.opacity(1);
}
}
}
//
// Custom colors
//
&[class*=border-] {
// Inherit colors
span {
border-color: inherit;
color: inherit;
}
}
}
// Update checker colors in dropdown variations
.dropdown-menu > .active:not(.disabled),
.dropdown-menu[class*=bg-],
.navbar-inverse .navbar-form,
.sidebar:not(.sidebar-default) .checkbox {
.checker {
span {
border-color: #fff;
color: #fff;
}
}
}
// Radio
// ------------------------------
// Base
.choice {
position: relative;
display: inline-block;
cursor: pointer;
vertical-align: middle;
border-radius: 100%;
// Set general size
&,
span,
input {
width: @checkbox-size;
height: @checkbox-size;
}
// Radio setup
span {
border: @checkbox-border-width solid @color-slate-500;
display: -moz-inline-box;
display: inline-block;
border-radius: 100%;
text-align: center;
position: relative;
// Add colored circle
&:after {
content: "";
position: absolute;
top: ((@checkbox-size / 2) - @checkbox-border-width - ((@checkbox-size - 10) / 2));
left: ((@checkbox-size / 2) - @checkbox-border-width - ((@checkbox-size - 10) / 2));
border: ((@checkbox-size - 10) / 2) solid;
border-color: inherit;
width: 0;
height: 0;
border-radius: 100%;
display: none;
}
// Checked style
&.checked {
&:after {
display: block;
}
}
}
// Hide radio
input[type=radio] {
&:extend(.checker input[type=checkbox]);
}
//
// Posiitons
//
// Left radio
.radio &,
.radio-inline & {
position: absolute;
top: ((@line-height-computed - @checkbox-size) / 2);
left: 0;
}
// Horizontal form correction
.form-horizontal .radio &,
.form-horizontal .radio-inline & {
top: ((@padding-base-vertical + 1) + (@line-height-computed / 2) - (@checkbox-size / 2));
}
// Right radio
.radio-right & {
left: auto;
right: 0;
}
//
// States
//
// Active state
&.active,
.radio > label:active &,
.radio-inline:active & {
span {
&:after {
display: block;
.opacity(0.75);
}
}
}
// Disabled
&.disabled {
.opacity(0.5);
// Disable cursor
&,
input[type=radio] {
cursor: @cursor-disabled;
}
// When label is clicked
.radio > label:active &,
.radio-inline:active & {
span:after {
.opacity(0);
}
span.checked:after {
.opacity(1);
}
}
}
//
// Custom colors
//
&[class*=border-] {
span {
border-color: inherit;
&:after {
border-color: inherit;
}
}
}
}
// Update checker colors in dropdown variations
.dropdown-menu > .active,
.dropdown-menu[class*=bg-],
.navbar-inverse .navbar-form,
.sidebar:not(.sidebar-default) .checkbox {
.choice {
span {
border-color: #fff;
}
}
}
// File uploader
// ------------------------------
// Base
.uploader {
width: 100%;
position: relative;
display: -moz-inline-box;
display: inline-block;
vertical-align: middle;
border-radius: (@input-border-radius + 1);
// File name text
.filename {
color: @gray-light;
height: @input-height-base;
padding: @padding-base-vertical @padding-base-horizontal;
padding-right: (@input-height-base * 1.25);
cursor: pointer;
width: 100%;
float: left;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: default;
border: 1px solid @input-border;
background-color: #fff;
border-radius: @input-border-radius;
text-align: left;
}
// Action button
.action {
position: absolute;
color: @text-color;
top: 0;
right: 0;
width: @input-height-base;
height: @input-height-base;
cursor: pointer;
z-index: 1;
border: 1px solid @input-border;
.border-right-radius(@input-border-radius);
> i {
position: absolute;
top: 50%;
left: 50%;
margin-top: -(@icon-font-size / 2);
margin-left: -(@icon-font-size / 2);
}
}
&[class*=bg-] .action {
background-color: inherit;
border-color: inherit;
color: inherit;
}
// Hide file input
input[type=file] {
width: 100%;
margin-top: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
height: @input-height-base;
border: 0;
cursor: pointer;
z-index: 10;
.opacity(0);
}
// Disabled state
&.disabled {
.action {
.opacity(0.6);
}
.filename {
background-color: @input-bg-disabled;
cursor: @cursor-disabled;
}
}
}
//
// Sizing
//
// Large
.uploader-lg {
input[type=file],
.action,
.filename {
height: @input-height-large;
}
.action {
width: @input-height-large;
}
.filename {
padding-top: @padding-large-vertical;
padding-bottom: @padding-large-vertical;
padding-right: (@input-height-large * 1.25);
}
}
// Small
.uploader-sm {
input[type=file],
.action,
.filename {
height: @input-height-small;
}
.action {
width: @input-height-small;
}
.filename {
padding-top: @padding-small-vertical;
padding-bottom: @padding-small-vertical;
padding-right: (@input-height-small * 1.25);
}
}
// Mini
.uploader-xs {
input[type=file],
.action,
.filename {
height: @input-height-mini;
}
.action {
width: @input-height-mini;
}
.filename {
padding-top: @padding-xs-vertical;
padding-bottom: @padding-xs-vertical;
padding-right: (@input-height-small * 1.25);
}
}