first commit
This commit is contained in:
+238
@@ -0,0 +1,238 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Bootstrap switches
|
||||
*
|
||||
* Styles for switch.min.js - checkbox/radio toggle switches
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Oct 20, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
.bootstrap-switch {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
margin-top: -2px;
|
||||
margin-right: @element-horizontal-spacing;
|
||||
border-radius: @border-radius-base;
|
||||
border: 1px solid transparent;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
.user-select(none);
|
||||
.transition(all ease-in-out .05s);
|
||||
|
||||
// Container
|
||||
.bootstrap-switch-container {
|
||||
display: inline-block;
|
||||
top: 0;
|
||||
border-radius: @border-radius-base;
|
||||
.translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
// Remove outline
|
||||
&.bootstrap-switch-focused {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Set base styles
|
||||
.bootstrap-switch-handle-on,
|
||||
.bootstrap-switch-handle-off,
|
||||
.bootstrap-switch-label {
|
||||
cursor: pointer;
|
||||
display: inline-block !important;
|
||||
height: 100%;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
}
|
||||
|
||||
// Hide inputs
|
||||
input[type='radio'],
|
||||
input[type='checkbox'] {
|
||||
position: absolute !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
.opacity(0);
|
||||
|
||||
&.form-control {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// States
|
||||
&.bootstrap-switch-disabled,
|
||||
&.bootstrap-switch-readonly,
|
||||
&.bootstrap-switch-indeterminate {
|
||||
cursor: default !important;
|
||||
|
||||
.bootstrap-switch-handle-on,
|
||||
.bootstrap-switch-handle-off,
|
||||
.bootstrap-switch-label {
|
||||
cursor: default !important;
|
||||
.opacity(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
// Set animation
|
||||
&.bootstrap-switch-animate .bootstrap-switch-container {
|
||||
.transition(margin-left 0.2s);
|
||||
}
|
||||
|
||||
// Set border radiuses
|
||||
&.bootstrap-switch-inverse {
|
||||
.bootstrap-switch-handle-on {
|
||||
.border-left-radius(0);
|
||||
.border-right-radius(@border-radius-base - 1);
|
||||
}
|
||||
.bootstrap-switch-handle-off {
|
||||
.border-right-radius(0);
|
||||
.border-left-radius(@border-radius-base - 1);
|
||||
}
|
||||
}
|
||||
&.bootstrap-switch-on,
|
||||
&.bootstrap-switch-inverse.bootstrap-switch-off {
|
||||
.bootstrap-switch-label {
|
||||
.border-right-radius(@border-radius-base - 1);
|
||||
}
|
||||
}
|
||||
&.bootstrap-switch-off,
|
||||
&.bootstrap-switch-inverse.bootstrap-switch-on {
|
||||
.bootstrap-switch-label {
|
||||
.border-left-radius(@border-radius-base - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Handles
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.bootstrap-switch-handle-on,
|
||||
.bootstrap-switch-handle-off {
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
|
||||
// Contextual alternatives
|
||||
&.bootstrap-switch-default {
|
||||
color: @text-color;
|
||||
background-color: @gray-lighter;
|
||||
}
|
||||
&.bootstrap-switch-primary {
|
||||
color: #fff;
|
||||
background-color: @brand-primary;
|
||||
}
|
||||
&.bootstrap-switch-danger {
|
||||
color: #fff;
|
||||
background-color: @brand-danger;
|
||||
}
|
||||
&.bootstrap-switch-success {
|
||||
color: #fff;
|
||||
background-color: @brand-success;
|
||||
}
|
||||
&.bootstrap-switch-warning {
|
||||
color: #fff;
|
||||
background-color: @brand-warning;
|
||||
}
|
||||
&.bootstrap-switch-info {
|
||||
color: #fff;
|
||||
background-color: @brand-info;
|
||||
}
|
||||
}
|
||||
|
||||
// Set border radius
|
||||
.bootstrap-switch-handle-on {
|
||||
.border-left-radius(@border-radius-base - 1);
|
||||
}
|
||||
.bootstrap-switch-handle-off {
|
||||
.border-right-radius(@border-radius-base - 1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Label
|
||||
// ------------------------------
|
||||
|
||||
.bootstrap-switch-label {
|
||||
text-align: center;
|
||||
z-index: 100;
|
||||
color: @text-color;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
.box-shadow(0 0 0 1px fade(#000, 10%) inset);
|
||||
|
||||
&:hover {
|
||||
background-color: #fcfcfc;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
// Add vertical lines
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 3px;
|
||||
height: 10px;
|
||||
margin-top: -5px;
|
||||
margin-left: -1px;
|
||||
display: inline-block;
|
||||
border-left: 1px solid @input-border;
|
||||
border-right: 1px solid @input-border;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Sizing
|
||||
// ------------------------------
|
||||
|
||||
// Large
|
||||
.bootstrap-switch-large {
|
||||
.bootstrap-switch-handle-on,
|
||||
.bootstrap-switch-handle-off,
|
||||
.bootstrap-switch-label {
|
||||
padding: @padding-large-vertical @padding-large-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
// Mini
|
||||
.bootstrap-switch-mini {
|
||||
.bootstrap-switch-handle-on,
|
||||
.bootstrap-switch-handle-off,
|
||||
.bootstrap-switch-label {
|
||||
padding: @padding-xs-vertical @padding-xs-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.bootstrap-switch-small {
|
||||
.bootstrap-switch-handle-on,
|
||||
.bootstrap-switch-handle-off,
|
||||
.bootstrap-switch-label {
|
||||
padding: @padding-small-vertical @padding-small-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Checkbox specials
|
||||
// ------------------------------
|
||||
|
||||
.checkbox-switch > label,
|
||||
label.checkbox-switch.checkbox-inline {
|
||||
padding: 0;
|
||||
}
|
||||
.checkbox-switch.checkbox-right .bootstrap-switch {
|
||||
margin-right: 0;
|
||||
margin-left: @element-horizontal-spacing;
|
||||
}
|
||||
@@ -0,0 +1,264 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Switchery toggles
|
||||
*
|
||||
* Styles for switchery.min.js - toggle switches
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Mar 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
.switchery {
|
||||
background-color: #fff;
|
||||
border: 1px solid @input-border;
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: (@switchery-base-size * 2);
|
||||
height: @switchery-base-size;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
.box-sizing(content-box);
|
||||
|
||||
// Container
|
||||
.checkbox-switchery & {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin-top: ((@line-height-computed / 2) - (@switchery-base-size / 2) - 1); // Half text height - half switchery height - 1px border
|
||||
}
|
||||
|
||||
// Handle
|
||||
> small {
|
||||
background-color: #fff;
|
||||
border-radius: 100px;
|
||||
width: @switchery-base-size;
|
||||
height: @switchery-base-size;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
.box-shadow(0 1px 3px fade(#000, 40%));
|
||||
}
|
||||
}
|
||||
|
||||
// Override BS checkbox styles
|
||||
.checkbox.checkbox-switchery {
|
||||
margin-bottom: (@switchery-base-size - (@line-height-computed / 2) + 2);
|
||||
padding-left: 0;
|
||||
|
||||
&.disabled .switchery {
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove padding if no text label
|
||||
.checkbox[class*=switchery-],
|
||||
.checkbox-inline[class*=switchery-] {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Sizing
|
||||
// ------------------------------
|
||||
|
||||
// Large
|
||||
.switchery-lg {
|
||||
&.checkbox-switchery {
|
||||
margin-bottom: (@switchery-large-size - (@line-height-computed / 2) + 2);
|
||||
|
||||
.switchery {
|
||||
margin-top: (@line-height-computed / 2) - (@switchery-large-size / 2) - 1;
|
||||
}
|
||||
}
|
||||
|
||||
label& {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.switchery {
|
||||
height: @switchery-large-size;
|
||||
width: (@switchery-large-size * 2);
|
||||
|
||||
> small {
|
||||
height: @switchery-large-size;
|
||||
width: @switchery-large-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.switchery-sm {
|
||||
&.checkbox-switchery {
|
||||
margin-bottom: (@switchery-small-size - (@line-height-computed / 2) + 2);
|
||||
|
||||
.switchery {
|
||||
margin-top: (@line-height-computed / 2) - (@switchery-small-size / 2) - 1;
|
||||
}
|
||||
}
|
||||
|
||||
label& {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.switchery {
|
||||
height: @switchery-small-size;
|
||||
width: (@switchery-small-size * 2);
|
||||
|
||||
> small {
|
||||
height: @switchery-small-size;
|
||||
width: @switchery-small-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mini
|
||||
.switchery-xs {
|
||||
&.checkbox-switchery {
|
||||
margin-bottom: (@switchery-mini-size - (@line-height-computed / 2) + 2);
|
||||
|
||||
.switchery {
|
||||
margin-top: (@line-height-computed / 2) - (@switchery-mini-size / 2) - 1;
|
||||
}
|
||||
}
|
||||
|
||||
label& {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.switchery {
|
||||
height: @switchery-mini-size;
|
||||
width: (@switchery-mini-size * 2);
|
||||
|
||||
> small {
|
||||
height: @switchery-mini-size;
|
||||
width: @switchery-mini-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Options
|
||||
// ------------------------------
|
||||
|
||||
// Left position
|
||||
.checkbox-switchery {
|
||||
label,
|
||||
label& {
|
||||
position: relative;
|
||||
padding-left: ((@switchery-base-size * 2) + 12);
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.switchery-lg {
|
||||
label,
|
||||
label& {
|
||||
padding-left: ((@switchery-large-size * 2) + 12);
|
||||
}
|
||||
}
|
||||
|
||||
&.switchery-sm {
|
||||
label,
|
||||
label& {
|
||||
padding-left: ((@switchery-small-size * 2) + 12);
|
||||
}
|
||||
}
|
||||
|
||||
&.switchery-xs {
|
||||
label,
|
||||
label& {
|
||||
padding-left: ((@switchery-mini-size * 2) + 12);
|
||||
}
|
||||
}
|
||||
|
||||
&.checkbox-inline {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Right position
|
||||
.checkbox-switchery {
|
||||
&.checkbox-right {
|
||||
.switchery {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
label,
|
||||
label& {
|
||||
padding-left: 0;
|
||||
padding-right: ((@switchery-base-size * 2) + 12);
|
||||
}
|
||||
|
||||
&.switchery-lg {
|
||||
label,
|
||||
label& {
|
||||
padding-left: 0;
|
||||
padding-right: ((@switchery-large-size * 2) + 12);
|
||||
}
|
||||
}
|
||||
|
||||
&.switchery-sm {
|
||||
label,
|
||||
label& {
|
||||
padding-left: 0;
|
||||
padding-right: ((@switchery-small-size * 2) + 12);
|
||||
}
|
||||
}
|
||||
|
||||
&.switchery-xs {
|
||||
label,
|
||||
label& {
|
||||
padding-left: 0;
|
||||
padding-right: ((@switchery-mini-size * 2) + 12);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Double side switch
|
||||
//
|
||||
|
||||
.switchery-double {
|
||||
.switchery {
|
||||
position: relative;
|
||||
margin-left: @element-horizontal-spacing;
|
||||
margin-right: @element-horizontal-spacing;
|
||||
margin-top: -7px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
// Remove padding
|
||||
&.checkbox-switchery {
|
||||
label,
|
||||
label& {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Large
|
||||
&.switchery-lg .switchery {
|
||||
margin-top: -8px;
|
||||
margin-bottom: -6px;
|
||||
}
|
||||
|
||||
// Small
|
||||
&.switchery-sm .switchery {
|
||||
margin-top: -6px;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
|
||||
// Mini
|
||||
&.switchery-xs .switchery {
|
||||
margin-top: -5px;
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,440 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Uniform form inputs plugin
|
||||
*
|
||||
* Styles for uniform.min.js - form components styling
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Aug 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: "\e600";
|
||||
font-family: 'icomoon';
|
||||
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;
|
||||
.opacity(0);
|
||||
}
|
||||
|
||||
// Checked style
|
||||
&.checked {
|
||||
&:after {
|
||||
.opacity(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);
|
||||
}
|
||||
|
||||
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-],
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
// Checked style
|
||||
&.checked {
|
||||
&:after {
|
||||
.opacity(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
|
||||
//
|
||||
|
||||
// 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-],
|
||||
.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 {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: table;
|
||||
|
||||
// File name text
|
||||
.filename {
|
||||
color: @gray-light;
|
||||
height: @input-height-base;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
display: table-cell;
|
||||
cursor: default;
|
||||
border: 1px solid @input-border;
|
||||
border-right: 0;
|
||||
background-color: @input-bg;
|
||||
text-align: left;
|
||||
word-break: break-word;
|
||||
.border-left-radius(@input-border-radius);
|
||||
}
|
||||
|
||||
// Action button
|
||||
.action {
|
||||
display: table-cell;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
border-radius: 0;
|
||||
.border-right-radius(@input-border-radius);
|
||||
|
||||
// If normal button
|
||||
&.btn {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover state
|
||||
&:hover,
|
||||
&:focus {
|
||||
.action {
|
||||
.box-shadow(0 0 0 100px fade(#000, 5%) inset);
|
||||
}
|
||||
.action.btn-default {
|
||||
.box-shadow(0 0 0 100px fade(#000, 1%) inset);
|
||||
}
|
||||
}
|
||||
|
||||
// Active state
|
||||
&:active {
|
||||
.action {
|
||||
.box-shadow(0 0 0 100px fade(#000, 10%) inset);
|
||||
}
|
||||
.action.btn-default {
|
||||
.box-shadow(0 0 0 100px fade(#000, 3%) inset);
|
||||
}
|
||||
}
|
||||
|
||||
// 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 {
|
||||
.filename {
|
||||
background-color: @input-bg-disabled;
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user