Olu Amey
481 lines
7.9 KiB
Plaintext
481 lines
7.9 KiB
Plaintext
/* ------------------------------------------------------------------------------
|
|
*
|
|
* # Uniform form inputs plugin
|
|
*
|
|
* Styles for uniform.min.js - form components styling
|
|
*
|
|
* Version: 1.1
|
|
* Latest update: Mar 10, 2016
|
|
*
|
|
* ---------------------------------------------------------------------------- */
|
|
|
|
|
|
// Checkbox
|
|
// ------------------------------
|
|
|
|
// 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;
|
|
border-radius: @border-radius-small;
|
|
|
|
// Checkmark icon
|
|
&:after {
|
|
content: "\ed6e";
|
|
font-family: 'icomoon';
|
|
font-size: @icon-font-size;
|
|
color: inherit;
|
|
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;
|
|
.opacity(0);
|
|
.scale(0);
|
|
.transition-duration(0.1s);
|
|
}
|
|
|
|
// Checked style
|
|
&.checked {
|
|
border-color: transparent;
|
|
.transition-duration(0.1s);
|
|
|
|
// Icon
|
|
&:after {
|
|
.opacity(1);
|
|
.scale(1);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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
|
|
//
|
|
|
|
// 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);
|
|
}
|
|
|
|
// Display icon if checked
|
|
span.checked:after {
|
|
.opacity(1);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Custom colors
|
|
//
|
|
|
|
&[class*=border-] {
|
|
|
|
// Inherit colors
|
|
span {
|
|
color: inherit;
|
|
|
|
&:not(.checked) {
|
|
border-color: inherit;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Update checker colors in components variations
|
|
.dropdown-menu > .active:not(.disabled),
|
|
.dropdown-menu[class*=bg-],
|
|
.page-header-inverse .form-group > .checkbox,
|
|
.page-header-inverse .form-group > .checkbox-inline,
|
|
.navbar-inverse .navbar-form .form-group > .checkbox,
|
|
.navbar-inverse .navbar-form .form-group > .checkbox-inline,
|
|
.sidebar:not(.sidebar-default) .checkbox,
|
|
.sidebar:not(.sidebar-default) .checkbox-inline {
|
|
.checker {
|
|
span {
|
|
border-color: #fff;
|
|
color: #fff;
|
|
|
|
&.checked {
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 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%;
|
|
.opacity(0);
|
|
.scale(0);
|
|
}
|
|
|
|
// Checked style
|
|
&.checked {
|
|
&:after {
|
|
.opacity(1);
|
|
.scale(1);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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 {
|
|
.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);
|
|
}
|
|
|
|
// Display circle if checked
|
|
span.checked:after {
|
|
.opacity(1);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Custom colors
|
|
//
|
|
|
|
&[class*=border-] {
|
|
span {
|
|
border-color: inherit;
|
|
|
|
&:after {
|
|
border-color: inherit;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Update checker colors in components variations
|
|
.dropdown-menu > .active,
|
|
.dropdown-menu[class*=bg-],
|
|
.page-header-inverse .form-group > .radio,
|
|
.page-header-inverse .form-group > .radio-inline,
|
|
.navbar-inverse .navbar-form .form-group > .radio,
|
|
.navbar-inverse .navbar-form .form-group > .radio-inline,
|
|
.sidebar:not(.sidebar-default) .radio,
|
|
.sidebar:not(.sidebar-default) .radio-inline {
|
|
.choice {
|
|
span {
|
|
border-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// File uploader
|
|
// ------------------------------
|
|
|
|
// Base
|
|
.uploader {
|
|
position: relative;
|
|
display: inline-block;
|
|
|
|
// File name text
|
|
.filename {
|
|
color: @gray-light;
|
|
padding: @padding-base-vertical @padding-base-horizontal;
|
|
cursor: pointer;
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
border: 1px solid transparent;
|
|
float: right;
|
|
}
|
|
|
|
// Action button
|
|
.action {
|
|
cursor: pointer;
|
|
margin: 0;
|
|
|
|
// If normal button
|
|
&.btn {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
// Hover state
|
|
&:hover .action,
|
|
&:focus .action {
|
|
.box-shadow(0 0 0 100px fade(#000, 5%) inset); // Use box shadow instead of color for all buttons - contextual and custom
|
|
}
|
|
|
|
// Active state
|
|
&:active .action {
|
|
.box-shadow(0 0 0 100px fade(#000, 10%) inset); // The same as above - no color changes, only box shadow
|
|
}
|
|
|
|
// 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 {
|
|
input[type=file] {
|
|
cursor: @cursor-disabled;
|
|
}
|
|
.action {
|
|
.opacity(0.6);
|
|
}
|
|
}
|
|
|
|
// Inside sidebar
|
|
.sidebar .form-group > & {
|
|
display: block;
|
|
|
|
.filename {
|
|
float: none;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.action {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Inside inverse elements
|
|
//
|
|
.page-header-inverse .form-group > .uploader,
|
|
.navbar-inverse .navbar-form .form-group > .uploader {
|
|
.filename {
|
|
color: fade(#fff, 90%);
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Sizing
|
|
//
|
|
|
|
// Large
|
|
.uploader-lg {
|
|
input[type=file],
|
|
.action,
|
|
.filename {
|
|
height: @input-height-large;
|
|
}
|
|
|
|
.filename {
|
|
padding: @padding-large-vertical @padding-large-horizontal;
|
|
font-size: @font-size-large;
|
|
line-height: @line-height-large;
|
|
}
|
|
}
|
|
|
|
// Small
|
|
.uploader-sm {
|
|
input[type=file],
|
|
.action,
|
|
.filename {
|
|
height: @input-height-small;
|
|
}
|
|
|
|
.filename {
|
|
padding: @padding-small-vertical @padding-small-horizontal;
|
|
font-size: @font-size-small;
|
|
line-height: @line-height-small;
|
|
}
|
|
}
|
|
|
|
// Mini
|
|
.uploader-xs {
|
|
input[type=file],
|
|
.action,
|
|
.filename {
|
|
height: @input-height-mini;
|
|
}
|
|
|
|
.filename {
|
|
padding: @padding-xs-vertical @padding-xs-horizontal;
|
|
font-size: @font-size-small;
|
|
line-height: @line-height-small;
|
|
}
|
|
}
|